مقالات طراحی سایت

ردیف دوم
خب حال که پیاده سازی ردیف اولیه رو تموم کردیم، میریم سراغ ردیف دوم. توی این ردیف، نخستین از تمامی بایستی یه فریم پیاده سازی کنیم، یعنی همون باکسی که بعداً محتوای داخلش قرار می‌گیره. موقتاً با ظواهر خویش قاب شغل داریم، خیر متون طراحی سایت یا این که آیکونا.

پیاده سازی ردیف دوم
کاری که می بایست ایفا بدیم اینه که یه پس‌موضوع‌ی گرادینتی براش تمجید کنیم. توی وب سایت اتریوم، برای این عمل از یه linear gradient مستعمل که از سمت راست به چپ کشیده گردیده. ما هم همین مسیر رو می‌ریم.

می‌آیم توی پیکربندی استایل المنتور، نصیب پس‌قضیه رو گشوده می کنیم و نوع پس‌مورد رو روی «گرادینت» می‌ذاریم. هم اکنون برای رنگ نخستین، از رنگ سازمانی که گذشته‌خیس توی پروژه به کار گیری کردیم سود میگیریم. به عنوان مثالً همون بنفش خاص که توی تایتل‌ها یا این که دکمه‌ها هم بوده. اما اینجا یه تفاوت کوچیک داره، اونم اینه که با شفافیت زیر‌خیس (opacity نادر) مصرف شده، برای مثالً حدود ۱۰٪ یا این که ۲۰٪.

رنگ دوم گرادینت هم گشوده یه رنگ در حدود همین بنفشه، با یه کد رنگ خاص که از تارنما اتریوم برداشتیم، اونم با شفافیت کمتر. مقصود اینه که یه بک‌گراند محو و حرفه ای داشته باشیم که اذیت نکنه ولی ظواهر خاص خودش رو هم داشته باشه.

زاویه گرادینت رو هم تهیه میکنیم. زیرا می بایست از راست به چپ باشه، عدد زاویه رو می‌ذاریم روی ۹۰ مرتبه تا دقیقاً همون حالتی رو بهمون بده که توی مثال می‌باشد.

پیاده سازی ردیف دوم
پیاده سازی ردیف دوم
تا اینجا که گرادینت صحیح شد، درحال حاضر وهله مرز یا این که همون بوردرشه. توی وب سایت اساسی، یه لبه خیلی دقیق بدور این جعبه وجود داره. می آیم بخش لبه (border) و تنظیماتش رو گشوده می کنیم. نوع لبه رو «یکدست» یا این که solid می‌ذاریم، ضخامت رو روی ۱ پیکسل، و رنگش رو هم همون رنگی که توی پیاده سازی خودش مستعمل قرار می‌دیم. این رنگ دقیقاً با مخلوط کلی وبسایت هماهنگه، پس جلوه‌ی نیکی می‌ده.

border ردیف دوم
border ردیف دوم
نکته‌ی اصلی دیگه اینکه کناره‌های این جعبه یه‌نادر گرد شدن. یعنی کناره‌هاش انحنا دارن. برای این عمل بایستی مقدار border-radius رو معین کنیم. معمولاً با به کار گیری از ابزار Inspect توی مرورگر می‌شه اینو بررسی کرد. توی وبسایت اتریوم مقدارش ۱۶ پیکسل بود، پس ما هم دقیقاً همین رو وارد می کنیم تا اون شرایط گردی کناره‌ها به خیر و خوبی جاری ساختن بشه.

border-radius ردیف دوم
border-radius ردیف دوم
در غایت، اگه دیدیم رنگ بک‌گراند هنوز یه‌نادر فرق داره یا این که خیلی پررنگه، می‌تونیم مقدار opacity رو برای رنگ‌ها معدود یا این که زیاد کنیم تا دقیقاً به همون حالتی برسیم که توی مثال مهم میباشد. با همین تعدادی تا تهیه و تنظیم بی آلایش یعنی گرادینت، کناره، رنگ مطلوب و انحنای کناره‌ها، یه جعبه خیلی شیک و شبیه با ورژن‌ی مهم اتریوم پیاده سازی می کنیم که توی گام بعدی قراره محتواشو داخلش بذاریم.

محتوای ردیف دوم
خب پس از اینکه استایل کلی کانتینرمون رو پیاده سازی کردیم (یعنی همون گرادینت، لبه، انحنای کناره‌ها و کلیه اون کارای ظاهری) درحال حاضر وقتشه که بیایم سراغ چینش محتوا باطن این کانتینر. اینجا پیاده سازی به طور دو عدد ردیف کنار هم اجرا می‌شه. پس بایستی یه کانتینر داخلی تازه بکشیم داخلش و اون رو به دو نصیب تقسیم کنیم.

نخستین جهت دکورا سیون این کانتینر داخلی رو می‌ذاریم روی افقی (horizontal) تا ردیف‌ها ذکر کنار هم قرار بگیرن، خیر تحت هم. زیرا پیاده سازی به صورتیه که سمت چپ یه تصویر داریم و سمت راست یه متن و یه توضیح. نسبت پهنا دو عدد ردیف نسبتاًً پنجاه پنجاهه، یعنی هر کدوم نصف دور و اطراف رو می‌گیرن، پس نیازی وجود ندارد دستی عرضا رو تهیه کنیم، همون پیش‌فرض المنتور کفایت می‌کنه.

ردیف اولیه
حال باطن ردیف اولیه می‌آیم و تصویرمون رو اضافه می کنیم. تصویر متبوع از تارنما مهم اتریوم دانلود گردیده، پس می‌تونیم ریلکس اونو ذخیره کنیم و از بخش «اضافه کردن تصویر» توی المنتور، بارگذاریش کنیم. آن گاه هم یه‌راست بندازیمش باطن ردیف نخستین. زمانی عکسو وارد کردیم، به طور تقریبً نصف مسیر این نصیب رو رفتیم.

اضافه کردن تصویر
اضافه کردن تصویر
ردیف دوم
حال می‌رسیم به ردیف دوم. اینجا دو عدد متن بایستی بذاریم، یکی‌از عنوان مهم و یکی‌از توضیح کوتاه‌خیس زیرش.

پیاده سازی عنوان
برای عنوان اولیه، می‌تونیم همون المنتی که تا قبل از اینً به کار گیری کردیم (برای مثالً همون heading که بالا پیاده سازی کردیم) رو اسکن کنیم و بیاریمش باطن این ردیف. با این فعالیت، هم سی‌اس‌اس‌های مرتبط با فونت و مسافت و رنگ‌ها همراهش نسخه برداری می‌شن، و دیگه ما یحتاج وجود ندارد مجدد تمامی‌چیزو از اولیه تهیه و تنظیم کنیم. بعدش کافیه صرفا متنش رو تغییر تحول بدیم و عنوان تازه رو بنویسیم. از جملهً چیزی مثل «رمزگذاری فارغ از نوسان».

ردیف دوم
خب حال که پیاده سازی ردیف اولیه رو تموم کردیم، میریم سراغ ردیف دوم. توی این ردیف، نخستین از تمامی بایستی یه فریم پیاده سازی کنیم، یعنی همون باکسی که بعداً محتوای داخلش قرار می‌گیره. موقتاً با ظواهر خویش قاب شغل داریم، خیر متون طراحی سایت یا این که آیکونا.

پیاده سازی ردیف دوم
کاری که می بایست ایفا بدیم اینه که یه پس‌موضوع‌ی گرادینتی براش تمجید کنیم. توی وب سایت اتریوم، برای این عمل از یه linear gradient مستعمل که از سمت راست به چپ کشیده گردیده. ما هم همین مسیر رو می‌ریم.

می‌آیم توی پیکربندی استایل المنتور، نصیب پس‌قضیه رو گشوده می کنیم و نوع پس‌مورد رو روی «گرادینت» می‌ذاریم. هم اکنون برای رنگ نخستین، از رنگ سازمانی که گذشته‌خیس توی پروژه به کار گیری کردیم سود میگیریم. به عنوان مثالً همون بنفش خاص که توی تایتل‌ها یا این که دکمه‌ها هم بوده. اما اینجا یه تفاوت کوچیک داره، اونم اینه که با شفافیت زیر‌خیس (opacity نادر) مصرف شده، برای مثالً حدود ۱۰٪ یا این که ۲۰٪.

رنگ دوم گرادینت هم گشوده یه رنگ در حدود همین بنفشه، با یه کد رنگ خاص که از تارنما اتریوم برداشتیم، اونم با شفافیت کمتر. مقصود اینه که یه بک‌گراند محو و حرفه ای داشته باشیم که اذیت نکنه ولی ظواهر خاص خودش رو هم داشته باشه.

زاویه گرادینت رو هم تهیه میکنیم. زیرا می بایست از راست به چپ باشه، عدد زاویه رو می‌ذاریم روی ۹۰ مرتبه تا دقیقاً همون حالتی رو بهمون بده که توی مثال می‌باشد.

پیاده سازی ردیف دوم
پیاده سازی ردیف دوم
تا اینجا که گرادینت صحیح شد، درحال حاضر وهله مرز یا این که همون بوردرشه. توی وب سایت اساسی، یه لبه خیلی دقیق بدور این جعبه وجود داره. می آیم بخش لبه (border) و تنظیماتش رو گشوده می کنیم. نوع لبه رو «یکدست» یا این که solid می‌ذاریم، ضخامت رو روی ۱ پیکسل، و رنگش رو هم همون رنگی که توی پیاده سازی خودش مستعمل قرار می‌دیم. این رنگ دقیقاً با مخلوط کلی وبسایت هماهنگه، پس جلوه‌ی نیکی می‌ده.

border ردیف دوم
border ردیف دوم
نکته‌ی اصلی دیگه اینکه کناره‌های این جعبه یه‌نادر گرد شدن. یعنی کناره‌هاش انحنا دارن. برای این عمل بایستی مقدار border-radius رو معین کنیم. معمولاً با به کار گیری از ابزار Inspect توی مرورگر می‌شه اینو بررسی کرد. توی وبسایت اتریوم مقدارش ۱۶ پیکسل بود، پس ما هم دقیقاً همین رو وارد می کنیم تا اون شرایط گردی کناره‌ها به خیر و خوبی جاری ساختن بشه.

border-radius ردیف دوم
border-radius ردیف دوم
در غایت، اگه دیدیم رنگ بک‌گراند هنوز یه‌نادر فرق داره یا این که خیلی پررنگه، می‌تونیم مقدار opacity رو برای رنگ‌ها معدود یا این که زیاد کنیم تا دقیقاً به همون حالتی برسیم که توی مثال مهم میباشد. با همین تعدادی تا تهیه و تنظیم بی آلایش یعنی گرادینت، کناره، رنگ مطلوب و انحنای کناره‌ها، یه جعبه خیلی شیک و شبیه با ورژن‌ی مهم اتریوم پیاده سازی می کنیم که توی گام بعدی قراره محتواشو داخلش بذاریم.

محتوای ردیف دوم
خب پس از اینکه استایل کلی کانتینرمون رو پیاده سازی کردیم (یعنی همون گرادینت، لبه، انحنای کناره‌ها و کلیه اون کارای ظاهری) درحال حاضر وقتشه که بیایم سراغ چینش محتوا باطن این کانتینر. اینجا پیاده سازی به طور دو عدد ردیف کنار هم اجرا می‌شه. پس بایستی یه کانتینر داخلی تازه بکشیم داخلش و اون رو به دو نصیب تقسیم کنیم.

نخستین جهت دکورا سیون این کانتینر داخلی رو می‌ذاریم روی افقی (horizontal) تا ردیف‌ها ذکر کنار هم قرار بگیرن، خیر تحت هم. زیرا پیاده سازی به صورتیه که سمت چپ یه تصویر داریم و سمت راست یه متن و یه توضیح. نسبت پهنا دو عدد ردیف نسبتاًً پنجاه پنجاهه، یعنی هر کدوم نصف دور و اطراف رو می‌گیرن، پس نیازی وجود ندارد دستی عرضا رو تهیه کنیم، همون پیش‌فرض المنتور کفایت می‌کنه.

ردیف اولیه
حال باطن ردیف اولیه می‌آیم و تصویرمون رو اضافه می کنیم. تصویر متبوع از تارنما مهم اتریوم دانلود گردیده، پس می‌تونیم ریلکس اونو ذخیره کنیم و از بخش «اضافه کردن تصویر» توی المنتور، بارگذاریش کنیم. آن گاه هم یه‌راست بندازیمش باطن ردیف نخستین. زمانی عکسو وارد کردیم، به طور تقریبً نصف مسیر این نصیب رو رفتیم.

اضافه کردن تصویر
اضافه کردن تصویر
ردیف دوم
حال می‌رسیم به ردیف دوم. اینجا دو عدد متن بایستی بذاریم، یکی‌از عنوان مهم و یکی‌از توضیح کوتاه‌خیس زیرش.

پیاده سازی عنوان
برای عنوان اولیه، می‌تونیم همون المنتی که تا قبل از اینً به کار گیری کردیم (برای مثالً همون heading که بالا پیاده سازی کردیم) رو اسکن کنیم و بیاریمش باطن این ردیف. با این فعالیت، هم سی‌اس‌اس‌های مرتبط با فونت و مسافت و رنگ‌ها همراهش نسخه برداری می‌شن، و دیگه ما یحتاج وجود ندارد مجدد تمامی‌چیزو از اولیه تهیه و تنظیم کنیم. بعدش کافیه صرفا متنش رو تغییر تحول بدیم و عنوان تازه رو بنویسیم. از جملهً چیزی مثل «رمزگذاری فارغ از نوسان».