با سلام
درس دوم رو شروع می کنیم. گام بعدی لوگو (هیدر) قالب رو می خواهیم در بالای صفحه قرار دهیم.
قالبی که می خواهیم طراحی کنیم یک قالب مناسب برای فروشگاه است و نام فروشگاه رو پرنس شاپ انتخاب می کنم.gif)
من این هیدر رو پیدا کردم و تغییراتی در اون ایجاد کردم ، همان طور که می بینید یک کادر در بالای آن به همراه محلی برای قرار دادن کد جستجو ایجاد کردم. پیشنهاد می کنم شما هم فعلا از همین استفاده کنید. (عکس رو در پوشه images ذخیره کنید)
تصویر در اندازه واقعی جهت دانلود :
کد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
(دوستمون اشاره کرده که آموزش های مکرری وجود دارد ، اما مطئمنا این آموزش اصولی تر خواهد بود و در آخر من قالب طراحی شده رو در اختیار شما قرار می دهم.)
در طراحی قالب از تگ div خیلی استفاده میشه و مدتیه که استفاده از table جز در برخی موارد منسوخ شده است.
فایل home رو که در درس قبلی ایجاد کرده اید با برنامه notepad باز کنید...
بعد از تگ body کد زیر را وارد کنید :
کد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
فایل رو مجددا ذخیره کنید.
فایل style رو باز کنید و کد زیر رو وارد کنید :
کد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
این فایل رو هم ذخیره کنید.
دوباره سراغ فایل home می رویم :
می خواهیم یک منوی پیمایش و جستجو روی عکس ایجاد کنیم...
کد زیر رو وارد کنید :
کد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
کادر دوم دلخواه است و من از آن برای قرار دادن لوگوی بانک استفاده کردم. (می توانید یک پوشه با نام bank ایجاد کنید و لوگوی 5 بانک رو در اندازه های 32 در 32 پیکسل وارد کنید.)
فقط توجه کنید که کد ها رو به صورت آبشاری وارد کنید تا متوجه شوید که هر کد مربوطه به کدام div است.
در تگ div که از صفت class استفاده کرده ایم با علامت"
. "در فایل style می توانیم به آن دسترسی داشته باشیم. همچنین با علامت # می توانیم به div هایی که از صفت id استفاده کنیم دسترسی داشته باشیم.
حال باید ویژگی تگ های div با کلاس nav0 و search0 و micon را به ترتیب برای منو ، کادر جستجو و آیکن های اضافی تعریف کنیم برای اینکار سراغ فایل style می رویم :
کد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
می بینید که در تکنولوژی css می توانیم ویژگی ها را به صورت آبشاری تعیین کنیم. به عنوان مثال تعیین کرده ایم که تگ های a و ul و li در این دیویژن های تعریف شده چه ویژگی های داشته باشند.
آموزش این درس به پایان رسید فقط ویژگی های زیر را هم به فایل style اضافه کنید .
کد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
قالب در آخر بدون مشکل در انواع مرورگرها لود خواهد شد.
فعلا با فایرفاکس تست کنید بعدا یه فکری به حال ie خواهیم کرد
تا اینجا یک صفحه با یک بکگراند و هیدر به صورت کامل ایجاد کرده ایم ، در درس بعد می خواهیم یک منو زیر هیدر قالب ایجاد کنیم.
فقط قبل از پایان تفاوت html رو با html 4 بگم که در این زبان شما باید تگ ها به صورت با نظم تر وارد کنید.
به عنوان مثال تفاوت تگ br رو در html و html 4 رو مشاده کنید :
کد:
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید