با سلام خدمت دوستان و علاقه مندان، با ادامه دوره آموزشی خدمت شما دوستان هستیم. در این جلسه قصد طراحی header سایت قالب رو داریم. در جلسه قبل تنها Grid های بخش header رو آماده سازی کردیم و راست چین نمودن آن ها را انجام دادیم. در ابتدای کار نرم افزار کامپایلر رو اجرا می کنیم تا اگر کد css جدید در فایل های sass قرار داردیم توسط کامپایلر کدها در فایل style.css قالب قرار بگیرند و بعد از این کار به ترتیب از سمت راست هدر ابتدا کد مربوط به لوگوی قالب رو جایگزین میکنیم و سپس لوگوی قالب رو در پوشه images قرار میدیم. برای بخش لوگو از زیر استفاده میشه:

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

در کدهای بالا از کلاس top-ads استفاده کرده ایم. کدهای مربوط به این کلاس را باید در فایل mycode.scss قرار دهیم. کد زیر:

خب تا این قسمت کدهایی رو که اضافه کردیم به قالب HTML به شکل زیر هستند:

اگر در کد بالا دقت کنید متوجه افزودن کلاس header به اولین div کد می شوید. این کلاس را جهت تعیین margin-top در header قالب قرار داده ایم. به همین منظور کد css زیر رو به فایل mycode.scss اضافه می کنیم.

تصویر زیر نتیجه کدهایی است که تا الان اضافه به قالب اضافه شده است:

header-td1

نوبت به طراحی منوی بالای سایت میرسه. برای ایجاد منو و استفاده از منوی بوت استرپ در Sublime text بعد از پایان تگ <div class=”row”>  قالب بنویسید bs3-navbar و سپس tab رو بزن تا کدهای منو اضافه شود اگر هم از این روش دوست ندارین استفاده کنید به سایت getbootstrap مراجعه کنید و کد منوی دلخواه خودتون رو کپی کنید.

نکته ۱: منوی وردپرس راست چنی نمی باشد و بایستی با کدهای منو رو راست چین کنیم پس به فایل navbar.scss میریم و float: right رو به float: left تبدیل می کنیم همین کار رو هم برای float: left ها انجام میدیم. البته شما نیازی نیست انجام بدین من در پایان این جلسه تمامی فایلهایی رو که تغییر کردن در اختیارتون میزارم.

کد منویی که من استفاده کردم به صورت زیر تغییر کرده و المان های اضافی اونو حذف کردم:

حالا نوبت به استایل دادن و تغییر رنگ منو رسیده است. به فایل variables.scss مراجعه می کنیم و مقدار متغییر navbar-default-bg$ رو به ۲d2d2d# تغییر میدیم. منوی بوت استرپ دارای مقداری border-radius هست که لازم نیست و باید مقدارش صفر بشه که باید مقدار متغییر navbar-border-radius$ رو صفر تغییر بدیم.

در قدم بعد باید فونت های منو رو تنظیم کنیم در این قالب از فونت Byekan استفاده شده است که باید با استفاده از خاصیت font face به قالب اضافه بشه. ابتدا فونت Byekan رو در سه فرمت ttf,woff,eot در پوشه fonts قرار می دهیم و سپس کد زیر رو به بالای فایل mycode.scss اضافه می کنیم:

برای تغییر فونت پیش فرض بوت استرپ به مقدار متغییر font-family-sans-serif$ موجود در فایل variables.scss رو به صورت زیر تغییر می دهیم:

همچنین سایز پیش فرض فونت رو به ۱۳ پیکسل کاهش می دهیم:

سپس رنگ پیش فرض لینک های منو رو باید به سفید تغییر بدهیم که مقدار متغییر زیر رو در فایل variables.scss تغییر می دهیم:

سپس باید به لینک های منو background بدهیم و کد زیر رو به فایل mycode.scss اضافه می کنیم:

سپس خاصیبت hover لینک های منو رو باید تغییر بدهیم. برای اینکار به فایل navbar.scss میرویم و مقادیر زیر رو جایگزین می کنیم(بین خطوط ۴۱۱ تا ۴۲۰):

طراحی لینک های منو به پایان رسید و حالا نوبت استایل دهی به فیلد جستجو رسیده! ابتدا به فیلد input جستجو کلاس search-box رو اضافه می کنیم. کدهای html و css این بخش به شرح زیر است:

کد html فیلد جستجو:

کد css:

در تصویر پیش نمایش قالب بجای دکمه جستجو از تصویر یک ذره بین استفاده کردیم. در کد html بالا کلاس search-btn رو نیز به دکمه جستجو اضافه کردیم که کدهای css زیر رو براش تعیین می کنیم:

پس از پایان این قسمت میریم به سراغ نوار سفید رنگ زیر منو که به دو بخش تقسیم شده بخش سمت راست وظیفه نمایش سخن روز و تاریخ روز برعهده داره و در بخش سمت چپ آیکون های شبکه های اجتماعی قرار گرفته اند. در این بخش ما از font icon استفاده کردیم که از سایت fontello دانلود شده است. فایل های فونت آیکون رو در پوشه fonts قرار میدهیم. فایل css مربوط به فونت آیکون رو در پوشه css قرار داده و سپس در قالب واردش میکنیم.

کد html مربوط به این بخش:

و در سپس کدهای css این بخش:

تا این بخش header قالب رو طراحی کردیم. آموزش این جلسه به اتمام رسید. امیدوارم مفید واقع شده باشه. من کل فولدر assets رو به صورت فشرده در اختیار شما میذارم تا بتونید تغییراتی رو هم که در فایل های sass یا scss ایجاد کرده ام رو مشاهده کنید. پیشنهاد میکنم همین فایل ها رو دانلود کنید و جایگزین فایل های بوت استرپ خودتون کنید چون برخی از کدهای فایل های sass رو متناسب با rtl تصحیح کردم. در غیر این صورت خودتون باید زحمت بخشی هایی رو که به مشکل میخورید بکشید و متناسب با rtl تصحیح کنید.

لینک دانلود فایل های جلسه پنجم آموزش

تا جلسه آینده به امید خدا