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

- visibility ۶۶ mode_comment

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

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

header

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

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

info نکته :

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

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

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

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

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

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

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

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

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

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

info نکته :

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

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

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

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

Sidebar

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

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

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

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

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

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

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

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

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

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

comment دیدگاه کاربران
Peyman

سلام . واقعا زحمت کشیدی . خیلی خوب بود .

آموزش تبدیل به wordprees رو کی شروع می کنید ؟ ❗

سجاد دریس

از لینک زیر قابل دسترسی هست :

laya25

سلام من این اموزشو دیروز تموم کردم قالبم با firefox درست بود ولی با explorer درهم برهم بود این اشکالاتی رو هم که تو این جلسه گقتین مینوشتم قالبم درست که نمیشد تو firefox هم بهم میریخت جالبش اینجاست که من امروز که فایل هارو باز کردم کلا فالبم تو firefox بهم ریخته نمیدونم چرا
فایل css خودمو با فایل css شما مقایسه کردم فرقی نمیکنه ولی وقتی فایل شما رو با مال خودم جا بجا میکنم کار میکنه ولی با فالی خودم نه میشه نگاه کنید ببینید مشکلم کجاست؟
یک دنیا ممنون
http://upir.ir/1393.2/ghaleb_d0453.zip

سجاد دریس

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

masood

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

لقمان آوند

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

پوریا

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

سجاد دریس

از فایل index.html کپی بگیرید و فایل رو طبق نیازتون ویرایش کنید

sadaf ebadi

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

میشه لطف کنید و اون قسمتی که به عنوان css reset نوشتین رو توضیح بدین؟

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2 3