آموزش طراحی قالب وب سایت – جلسه چهارم
نحوه قالب بندی سایت :
به کمک دستور div در طراحی قالب، باکس ایجاد میکنیم و اجزای سایت را داخل این باکس ها load میکنیم
یک div باید width و height و رنگ ( background ) داشته باشد.
میخواهیم عکس زیر را که در فتوشاپ ایجاد شده به کمک css و html به یک قالب سایت تبدیل کنیم :
برای دیدن عکس در اندازه اصلی روی آن کلیک کنید
نکته : بهتر است ابتدا کد بخش html کامل نوشته شود سپس به هر بخش استایل خودش را بدهیم .
نکته : طبق عکس فوق به هریک از بخش های قالب فوق box گفته میشود مثل باکس logo یا panel1 و …
برای طراحی پروژه فوق نیاز به دانستن چند دستور مهم در css هست که به طور خلاصه توضیح میدم و بعد سراغ انجام پروژه میریم :
1-نحوه تعیین فاصله عمودی بین باکس ها :
در html از کد زیر به عنوان Enter استفاده میشود .
همانطوری که در عکس فوق مشاهده میکنید بین دو باکس lastnews و modtread فاصله هست و در بخش html نیز ما کد زیر را بین دو کد فوق قرار دادیم
<div class="clear"> </div>
.clear{ clear:both; height:10px; }
نکته : در طراحی قالب هیچ وقت از دستورات <br> و یا margin-top یا margin-bottom برای ایجاد فاصله بین باکس ها استفاده نکنید
چون در مرورگرهای مختلف درست نمایش نمیدهد و نیز بهم میریزد قالب را .
2- دستور Margin , Padding :
در کل 4 مدل margin و padding درایم : top – bottom – left – right
به فاصله بین دو box به اصطلاح margin گفته میشود مثلا در عکس فوق برا ایجاد فاصله بین باکس panel1 , panel2 از دستور زیر استفاده شده
<div class="panel1"><span>panel1</span></div> <div class="panel2"><span>panel2</span></div>
div.panel2{ margin-left:10px; }
برای اطلاعات بیشتر و دیدن مثالها به این لینک مراجعه کنید
————————–
و به فاصله محتوای درونی یک باکس با لبه داخلی آن padding گفته میشود
مثلا در عکس فوق به فاصله بین کلمه logo و لبه سمت چپ آن paddding-left گفته میشود
span{ padding:30px; color:#fff; display: block; }
<div class="logo"> <span>Logo</span></div>
برای اطلاعات بیشتر به این لینک مراجعه کنید .
3- دستور float :
با استفاده از خاصیت float می توان موقعیت یک عنصر را به سمت چپ یا راست تنظیم کرد.
المان هایی که خاصیت float می گیرند، اندازه شان به اندازه محتوای داخلشون بستگی دارد و اگر محتوا کم باشد، المان مورد نظر کوچک میشه . به بعبارتی اگر خاصیت float بدهیم به تگ بلاک ، فضای خالی بعد آن تگ بلاک دیگر حفظ نمیشود
-
برای رفع این مشکل باید width رو به المانی که float دارد بدهید.
کد بخش HTML :
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="main"> <div class="row-top"> <div class="logo"> <span>Logo</span></div> <div class="header"><span> Header</span></div> </div> <div class="clear"></div> <div class="row-news"> <div class="n-left"> <div class="lastnews"><span>lastnews</span></div> <div class="clear"></div> <div class="mostread"><span>mostnews</span></div> </div> <div class="n-right"> <div class="panel1"><span>panel1</span></div> <div class="panel2"><span>panel2</span></div> </div> </div> <div class="clear"></div> <div class="row-content"> <div class="c-left"><span>c-left</span></div> <div class="component"><span>component</span></div> <div class="c-right"><span>c-right</span></div> </div> <div class="clear"></div> <div class="row-bottom"> <div class="bottem1"><span>bottem1</span></div> <div class="bottem2"><span>bottem2</span></div> <div class="bottem3"><span>bottem3</span></div> <div class="bottem4"><span>bottem4</span></div> <div class="bottem5"><span>bottem5</span></div> </div> <div class="clear"></div> <div class="footer"> <span>footer</span></div> <div class="clear"></div> </div> </body> </html>
کد بخش CSS :
@import url(reset.css); body{ margin:0 auto; } span{ padding:30px; color:#fff; display: block; } .clear{ clear:both; height:10px; } div.main{ margin:0 auto; width:980px; min-height: 500px; background: #fff ; } div.logo{ margin-right:10px; background: blue ; width:20%; height:100px; float:left; } div.header{ background: blue ; width:78%; height:100px; float:left; } div.n-left{ width:47%; height:300px; float:left; margin-right:5px; } div.n-right{ width:47%; height:300px; float:left; } div.lastnews{ background: blue ; height:145px; } div.mostread{ background: blue ; height:145px; } div.panel1{ height:300px; background: blue ; width:48%; float:left; margin-left:15px; } div.n-right{ margin-left:35px; } div.panel2{ height:300px; background: blue ; width:48%; float:right; } div.c-left{ width:200px; background: blue url() 0 0 no-repeat; height:300px; float:left; margin-right:40px; } div.component{ width:500px; background: blue url() 0 0 no-repeat; height:300px; float:left; } div.c-right{ width:200px; background: blue url() 0 0 no-repeat; height:300px; float:right; } div.bottem1,div.bottem2,div.bottem3,div.bottem4,div.bottem5{ float:left; margin-right:18px; background: blue url() 0 0 no-repeat; width:18%; height:100px; } div.footer{ width:980px; height: 50px; background: blue url() 0 0 no-repeat; }
کل پروژه فوق را نیز میتوانید از اینجا دانلود کنید