در این قسمت آموزش می خواهیم چهارچوب ، header و منو سایت رو پیاده سازی کنیم
ابتدای کار باید یک فایل html و یک فایل style sheet داشته باشیم ، که برای ساخت این دو فایل میتونیم از notepad و یا visual studio و .. استفاده کنید با هر برنامه ای که راحت هستید این کار رو انجام بدید.
فایل html همان صفحه وب ما هست که کد های html و تگ ها در آن جای می گیرد و برای استایل دادن به این تگ ها از فایل css که به فایل html ما اشاره می کند استفاده می کنیم ، استفاده از فایل با پسوند css در طراحی به نام استایل دادن به صورت embedded یا external معروف است.روش های دگری برای استایل دادن وجود داره (inline,internal) :
استایل دادن به تگ html سه حالت داره :
1- Embedded :
که این نوع استایل دادن دقیقا به شکل مثالی هست که براتون قرار دادم و استایل هامون داخل تگ head و در داخل :
<style type="text/css">
Inja
</style>
قرار میگیره ..
2- inline هست که داخل تگ قرار میگیره با استفاده از پارامتر style به صورت زیر :
<p style="font-size: 14px; color: purple;"></p>
3-External هست که به عنوان یه فایل css استایل ها داخل آن قرار میگیرند و در تگ head این فایل به صورت زبر فراخوانی میشه :
<link href="Controls.css" rel="stylesheet" type="text/css" />
اولین کاری که من بعد از ایجاد این دو فایل انجام دادم اضافه کردن css reset ساده زیر به فایل css هست که margin,padding پش فرض تمامی تگ ها رو برابر با صفر می کنه.
* {
margin:0;
padding:0;
}
با توجه به طرح و تگ های که استفاده میشه من این css reset رو احتیاج دونستم.
البته css reset ها کاملتری هم وجو داره که می تونید از طریق موتور جستجوی گوگل پیدا کنید.
خوب برای طراحی قالب ابتدا یک نظری به طرح قالب می ندازیم .بله ما باید رنگ پس زمینه رو برابر با سفید میکنیم و قسمت آبی لایت بالا رو نیز توسط یه تگ دیو پیاده سازی می کنیم و در نهایت یک wrapper که به عرض 1000px که باید در وسط صفحه ما قرار بگیره ..
برای شروع مقدار فونت های پیش فرض و سایز فونت رو در استایل تگ body تنظیم می کنیم.همچینین باید پس زمینه سفید رو نیز به تگ body اعمال کنیم:
body
{
background-color: #fff;
font-family: Tahoma;
font-size: 12px;
}
خوب برای کد نویسی قالب که از دو تکه تشکیل شده ابتدا قسمت آبی لایت و در داخل آن تگ wrapper که باید در وسط صفحه قرار بگیرد رو طراحی می کنیم ، پس از دو دیو تشکیل شده اولی تگی که قسمت پس زمینه آبی قسمت بالا رو تشکیل میده و یک تگ دیو که wrapper سایت ما رو مشخص می کنه و در وسط صفحه قرار می گیره که محتوای ما در داخل این wrapper خواهد بود.
استایل های این دو تگ به صورت زیر خواهد بود :
#Head-Bg {
background-image: url('Images/header.png');
background-repeat: repeat-x;
min-height: 600px;
}
#Wraper {
width: 1000px;
margin:auto;
min-height:100px;
overflow: hidden;
}
کد HTML:
<div id="Head-Bg">
<div id="Wraper">
</div>
</div>
خو حالا ما می تونیم داخل تگ اصلی wrapper محتوای سایت رو تقسیم بندی کنیم همانطور که می دانیم ابتدا باید Header سایت رو پیاده کنیم توسط یک تگ دیو با طول و عرض ثابت به صورت سلیقه ای :
کد HTML:
[RIGHT]<div id="Head-Bg">
<div id="Wraper">
<div id="Header-Wraper">
</div>
</div>
</div>
[/RIGHT]
[RIGHT][/RIGHT]
داخل header ما دو تصویر (وب سایت) و (من) رو داریم برای اینکه این دو تصویر در وسط header قرار بگیره ابتدا به وسیله یک تگ دیو با عرض لازم و به طول header و margin:0 auto ایجاد میکنیم حال دو تگ دیو دیگر نیز برای لگو ها تشکیل میدهیم و توسط margin و float به صورت منظم تصویر های خود رو جایگزاری می کنیم.
بعد از header سایت نوبت منو سایت میرسه که تشکیل شده از جعبه جستجو و لیستی از منو:
اول کار یک دیو wrapper برای کل سطر منو با استایل عرض به طول wrapper اصلی و طول به صورت سلیقه ای و با دستور float زیر header قرار میدهیم. برای لست منو و قسمت جستجو نیز به اندازه ی لازم و به طول wrapper منو دیو اصلی ایجاد میکنیم با این کار ما قسمت منو و جستجو رو تفکیک می کنیم.برای دیو اصلی لیست منو float:right و برای جستجو float:left میدهیم توجه کنید که جمع عرض این دو دیو اصلی باید کمتر از مقدار عرض دیو اصلی منو باشد.
لازم به ذکر هست که سعی کنید یک پوشه به اسم images و .. ایجاد کنید و تمامی عکس های استفاده شده برای این طراحی رو در ان پوشه قرار دهید تا هم کار شما نظم داشته باشد و هم دسترسی به فایل های پروژه راحتر باشد.
خوب سریعا ul و li های مربوط به منو رو تشکیل می دهیم و توسط select های css در جای خود قرار میدهیم و مقدار hover آنها را تنظیم می کنیم ، به نظرم با نگاه کردن به استایل های منو متوجه موضوع خواهید شد و نیاز به توضیح نمی بینم در هر صورت اگه قسمتی رو متوجه نشدید می توانید بپرسید ..
برای پس زمینه های li من از دو تصویر جداگانه استفاده کردم ، البته بهتر بود که توسط css sprite این کارو توسط یک تصویر می کردیم ولی این موضوع رو بزارید به حساب کمبود وقت و مقداری هم تنبلی بنده..
برای اینکه از یه تصویر استفاده کنیم می تونیم این دو تصویر رو با هم برش داده (در کنار هم ) و تو selecthover با استایل background-position مکان Hover تصویر رو معیین کنید دوستانی که نیاز به آموزش این نحوه دارند می تونن درخواست بدن تا همین منو رو به اون شکل نیز طراحی کنیم.
اگه توجه کنید من ترجیح دادم به جای select های پیچیده برای یافتن li اول برای تغییر استایل برای home از یه دیو جداگانه بیرون از تگ ul استفاده کنم و این روش کاملا سلیقه ای هست.
قسمت جستجو :
یک دیو کلی برای تکست باکس که تشکیل شده از 3 دیو داخلی که دیو سمت چپ و راست برای تصوریرهای radius دار و قسمت وسط نیز برای تصویر کل جستجو که به اندازه 1px بود و با دادن background-reapet این یک پیکسل رو تکرار کردم، دکمه جستجو از روش css sprite که در منو استفاده نکردیم پیاده سازی شده یک تصویر که شامل شکل اصلی و hover دکمه هست و برای یه دیو اختصاص دادیم و در نهایت با background-position همانطور که در بالا توضیح داده شد تصویر رو جابجا و تنظیم کردیم.
و بوسیله کد جاوااسکریپت برای جستجو خاصیت onfocus و onblur رو پیاده سازی کردیم به صورت زیر :
value="جستجو.." onfocus="if(this.value == 'جستجو..') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'جستجو..'; }"
این قسمت از آموزش به پایان رسید دوستان می تونند فایل این قسمت از آموزش رو دریافت کنند..
موفق باشید..