آموزش طراحی قالب html و css جلسه ۲ طراحی header سایت | پاسخ وردپرس |

مطالب پیشنهادی برای شما مهمان عزیز

بنام و یاد خدا سلام ,

در خدمت شما هستم با جلسه دوم آموزش طراحی قالب html و css  در وب سایت پاسخ وردپرس.

ما توی جلسه قبلی تمام فایل های مورد نظر برای قالب را کامل پیاده سازی کردیم توی این جلسه میخواهیم
header سایت را پیاده سازی کنیم پس بامن همراه باشید تا آخر

آموزش طراحی header سایت

برای پیاده سازی header  کد html زیر را داخل فایل index.html قرار دهید

دقت داشته باشید که من توی قسمت بالای header لوگو سایت باکس جستجو و یک منو هم قرار دادم

بیشتر بخوانید :
آموزش html و css طراحی باکس نرم افزار های مورد نیاز | پاسخ وردپرس |

نکته 

من تمام کد ها راخل header  قرار دادم که کد html5 است که یک کلاس هم بهش اختصاص دادم
و منوی بالای باکس جستجو را هم داخل کد nav قرار دادم چون این منو ها برای من مهم بودن

بریم سراغ استایل دهی اگه لان شما کد های بالا داخل مرور گر اجرا کنید مثال تصویر زیر خواهد بود .

آموزش طراحی قالب html

من برای پس زمینه header از یک تصویر استفاده کردم که میتوانید برای لینک زیر دریافت نمایید

دانلود پس زمینه و لوگو 

برای تعریف تصویر پس زمینه header کد های زیر داخل فایل style.css قرار دهید.

دقت داشته باشید که من یک کلاس عمومی تعریف کردم بنام container  که عرض ۱۲۰۰ px براش در نظر گرفتم

برای تقسیم بندی بخش های لوگو و باکس جستجو و منو کد های زیر را داخل فایل style.css قرار دهید.

بیشتر بخوانید :
آموزش HTML5 و CSS3 طول و عرض در css | پاسخ وردپرس | ( height and width)

من برای تقسم بندی از خاصیت float در css استفاده کردم برای این که منو و باکس جستجو هم یک استایل مناسب بگیرند کدهای زیررا داخل فایل style.css قرار دهید

بغد از قرار کدهای بالا ما الان باید نتیجه کار مثل تصویر زیر داشته باشیم

بیشتر بخوانید :
آموزش طراحی قالب HTML5 و CSS3 طراحی باکس پربازدید ترین مطالب | پاسخ وردپرس |

آموزش طراحی قالب html

خوب این جلسه از آموزش طراحی قالب html  و css در وب سایت پاسخ وردپرس به پایان رسید اگه این آموزش دوست داشتید به دوستان خود به اشتراک بزارید
تا یکی دیگه از جلسات آموزشی وب سایت پاسخ وردپرس خدا نگهدار

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. سلام خسته نباشید می خواستم بهم بگید از قسمت ی که نوشتید این کد هارا داخل فایل style .css قرار دهیم
    می شه این و بیشتر توضیح بدید
    یعنی ما کد ها رو در چه تکی باید قراردهیم

    فروردین 30, 1398 - 11:29 بعد از ظهر
    1. زمان الله ابراهیمی مدیر

      سلام خدمت شما دوست عزیز برای این که بهتر کد ها را بهتر مدیریت کنیم کد های style داخل فایل بنام style.css قرار میدیم یا هر اسم دیگه که دوست داشته باشید فقط تنها نکته باید رعایت بشه با پسوند .cssباشه امید وارم که منظور شما را درست متوجه شده باشم بازم اگه سوال بود در خدمتم دوست عزیز موفق و سر بلند باشید مثل همیشه

      فروردین 31, 1398 - 7:07 قبل از ظهر
  2. سلام این کد هایی که گفتید داخل فایل به نام …. باشه حتما باید با برنامه‌ی خاصی کد هارو نوشت یا با نود پد هم می شه؟

    اردیبهشت 1, 1398 - 5:39 بعد از ظهر
    1. زمان الله ابراهیمی مدیر

      دوست عزیز سلام خدمت شما فایل استایل هز اسم که دوست داشته باشید قرار بدید مشکل نداره کد های css را با هر ویرایشگری میتوایند بنویسید با خود نوت پد ساده ویندوز موفق باشید

      اردیبهشت 2, 1398 - 6:14 قبل از ظهر