illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6336 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

آموزش طراحی قالب (فصل چهارم- جلسه دوم) : تکمیل محتوای HTML

26811 ۱۵ تیر ۹۲

در این جلسه از آموزش طراحی قالب، محتوای HTML را تکمیل خواهیم کرد.

پس از بخش Header شروع میکنیم.

header

اگر طرح فتوشاپ را در نظر بگیرید، هدر ما به دو بخش راست و چپ  تقسیم می شود.

پس برای اینکار کدمان را به شکل زیر توسعه می دهیم.

نکته :

دقت کنید که در قالب های rtl، (راست به چپ) قسمت راست بر قسمت چپ مقدم تر است، اما در قالب های ltr (چپ به راست) این قضیه برعکس است،

به عنوان مثال اگر قالبمان انگلیسی بود کد ما به شکل زیر تغییر می کرد :

خب، در قسمت راست قالب ما دو قسمت دیگر به عنوان لوگو و توضیح داریم. و در قسمت چپ آیکون شبکه های اجتماعی و فرم جستجو. پس دوباره کد را به شکل زیر توسعه می دیم.

حال باید هر قسمت را با تگ معیّنی در قسمت مورد نظر وارد کنیم که به ترتیب زیر است :

Logo : لوگوی سایت ، که در اینجا ما نام سایت را قرار داده ایم را با استفاده از تگ h1 می نویسیم

Title : توضیح سایت را به دلیل اینکه اهمیت کمتری نسبت به نام سایت دارد را با استفاده از تگ h2 می نویسیم.

Social Network icons : آیکون ها را با استفاده از تگ img وارد می کنیم.

Search : برای قسمت جستجو نیز از تگ form استفاده میکنیم.

با توجه به توضیحات بالا کد ما به شکل زیر تغییر خواهد کرد.

اگر همه کارها را به درستی انجام داده اید هنگام اجرای کد در مرورگر شاهد چنین نتیجه ای خواهید بود :

نکته :

دلیل اینکه value دکمه جستجو را خالی گذاشتیم این است که بعدا می خواهیم بجای دکمه از آیکون استفاده کنیم.

خب اگر دقت کنید آیکون های شبکه اجتماعی باید به صفحه ای لینک شوند اما ما اینجا فقط از تگ img استفاده کرده ایم برای اینکار تک تک تگ های img را درون تگ a مانند کد زیر قرار می دهیم.

البته چونکه فعلا لینک ما معلوم نیست، آدرس را # قرار می دهیم.

خب اگر به طرح psdمان برگردیم، قسمت منو را هم داشتیم که در پایین هدر قرار دارد پس برای اضافه کردن آن کد زیر را بعد تگ (.left) قرار می دهیم.

Sidebar

ستون های کناری ما دارای اجزاء کوچکتری به نام بلوک یا همان باکس ها هستند که عناوین مختلفی از جمله موضوعات، لینک ها، امکانات، اخرین مطالب، تبلیغات و.. می گیرند.

طبق طرحمان، ما فقط دو بلوک موضوعات و تبلیغات را داریم که موضوعات در ستون راست و تبلیغات در ستون چپ قرار می گیرد، اما بعضی از دوستان گفته بودند که چگونه سایر بلوک ها را هم اضافه کنیم؟ اگر به کدها دقت کنید متوجه خواهید شد چگونه اینکار را انجام دهید :

کد فعلی ما این است :

برای ایجاد بلوک یه div با کلاس block ایجاد می کنیم

سپس قسمت عنوان بلوک و محتوای آن را نیز درست می کنیم  و آن را در ستون راست قرار می دهیم :

می توان از تگ ul نیز برای ایجاد موضوع های سایت استفاده کرد :

می توان یک بلوک دیگر با عنوان آخرین مطالب را پس از بلوک موضوعات به شکل زیر ایجاد کرد :

ستون تبلیغات را نیز به همین شکل ایجاد می کنیم و بجای تگ ul از img برای وارد کردن تصاویر تبلیغات استفاده می کنیم.و یک بلوک دیگر با عنوان پیوندها نیز بعد از تبلیغات ایجاد می کنیم :

بسیار خب اگر این کد را در مرورگر اجرا کنید باید چنین نتیجه ای رسیده باشید :

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 66 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    این نکته تگ block که چندین بار و تو چند جای صفحه میشه از ش استفاده کرد خیلی جالب بود واقعا وسام سوال بود ممنون

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram