در سلسله آموزشهای طراحی سایت آنلاینر به کار با فریم ها پرداختیم.
در این مقاله قصد بررسی لایه بندی و کار با div ها را داریم.
لایه بندی در HTML :
لایه بندی در صفحات وب از ملزومات طراحی وب سایت است به عبارت دیگر سایتی بدون لایه بندی مشکلات زیادی را به وجود خواهد آورد.
برای ایجاد موقیت و مکان آیتم های مختلف در صفحه وب باید توسط div بتوانید بصورت حرفه ای صفحه خود را لایه بندی کنید.
بطور مثال میخواهیم باکسی را در صفحه وب طراحی کنیم بطوریکه اگر صفحه وب دارای مطالب زیادی باشد، با اسکرول کردن به سمت پایین باکس مربوطه همچنان در گوشه صفحه ثابت خواهد بماند و قابل روئیت باشد.
[html]
<div style="position:fixed;top:0;left:0;width:100px;height:200px;background:red";>
این یک متن تست برای باکس ثابت میباشد.
</div>
[/html]
تکه کد بالا باکسی با عرض 100 و ارتفاع 200 پیکسل در گوشه سمت چپ بالای صفحه ایجاد میکند.صفت top فاصله باکس از بالای صفحه و left فاصله باکس از سمت چپ صفحه را مشخص می کند. صفتی به نام position نیز در بین صفات دیگر با مقدار fixed تعیین شده است که باعث میشود کادر شما همیشه در همان موقعیت ثابت بماند بطوریکه با اسکرول کردن صفحه وب در همان مکان قابل رویت باشد. نکته قابل توجه اینست که اگر مقدار position تعیین نشود نمیتوان از دو صفت top و left استفاده کرد.
در مثال بعد میخواهیم کمی کاربردی تر عمل کنیم تا بتوانید بهتر در صفحات وب تان از مثال ها استفاده کنید. میخواهیم لایه های زیر را ایجاد نماییم تا هر مطلبی که مد نظر داریم را در لایه خودش نمایش دهیم.
--------------------------------------- | | | | | | | لایه 1 | | | | | | | | |---------| | | | لایه 3 | | | | | | | | | | | لایه 2 | | | | | | | | | | | | | | ---------------------------------------
برای این منظور ابتدا لایه ای با نام wrapper ایجاد میکنیم تا تمام عوامل را در آن ایجاد کنیم. سپس در لایه wrapper دو لایه دیگر ایجاد میکنیم یکی با نام لایه 3 و دیگری با نام right wrapper .لایه right wrapper برای نگهداری لایه 1 و لایه 2 ایجاد میشود.
[html]
<html>
<head>
</head>
<body>
<div id="wrapper" style="width:980px;>
<div id="right-wrapper" style="width:230px;float:right";>
<div id="layer-1" style="width:230px;height:200px;background:red;">
این لایه شماره 1 است
</div>
<div id="layer-2" style="width:230px;height:200px;background:yellow;">
این لایه شماره 2 است
</div>
</div>
<div id="layer-3" style="width:750px;height:400px;float:left;background:blue;">
این لایه شماره 3 است
</div>
</div>
</body>
</html>
[/html]
شاید توضیحاتی درباره مثال بالا برایتان مفید واقع شود. در مثال بالا ابتدا لایه ای با نام wrapper با عرض 980 پیکسل ایجاد کردیم.
سپس در این لایه لایه های دیگری با نام layer-3 و لایه ای بانام right-wrapper ایجاد کردیم. لایه right-wrapper حاوی دو لایه دیگر به نام layer-1 و layer-2 است. این گروه بندی باکس ها لازم است برای تمام لایه بندی ها در صفحات وب اعمال شود.
در آموزش بعد به لیست های ترتیبی و غیر ترتیبی میپردازیم.
با آنلاینر همراه شوید …
