انواع طرحبندی در CSS بهترتیب اهمیت
تمام کسانی که در صنعت وب فعالیت میکنند، روزبهروز بیشتر به این واقعیت واقف میشوند که محتویات یک صفحه وب مهمترین بخش آن است، و شمای کلی وبسایت نسبت به متن آن اهمیت کمتری دارد. باز هم اگر از بهترین و زیباترین جملات برای رساندن مفهومتان به مشتری استفاده کنید، باز هم این مساله باقی میماند که کدام یک از مطالب وبسایت شما، در نظر وی بیشتر باید جلوه کند.
نکات اولیه:
این نکته روشن است که نباید از بالاترین محل صفحه بنا را بگذارید به نوشتن پاراگرافهای متن، یا بهعبارت دیگر کاربران شما گم میشوند و دیگر تمایل به خواندن را از دست خواهند داد. برای جلوگیری از این اشکال، معمولا از یک لوگو در بالای صفحه استفاده میکنند که با کلیک برروی آن به صفحه اصلی بر میگردد و بهدنبال آن نوار اصلی صفحه و دربرخی موارد عناصر دیگر مانند فیلد جستجو یا فرم ورود نامکاربری و رمز عبور قرار میگیرد.
نکته دیگر این است که برای اینکه کاربران، دسترسی راحتتری به مطالب موردنظرشان داشته باشند، بهتر است یک لینک مستقیم قرار دهید تا کاربر بتواند با کلیک بر روی آن مطالب غیرضروری را رد کند تا مستقیم به مطلب اصلی برسد.این عناصر به کاربر میفهمانند که به چه سایتی وارد شده است و بهسرعت بخشهای اصلیکه بتواند بهآن وارد شود را مشاهده میکند. درست بعد از این عناصر شما باید بخش اصلی را قرار دهید و بعد از آن مطالبی که از اهمیت کمتری برخوردارند. مانند نوار مرور ثانویه، لینکهای اضافی، دکمهها و غیره.
محتویات میتوانند مستقل از طرحبندی صفحه باشند
بهکمک تکنیک شناوری در CSS میتوان تقریبا هر طرحبندی که تصورش را میکنید پیاده کرد. همانطور که در مثالهایی که آوردهایم، مشاهده خواهید نمود، دو صفحه درست با یک نشانهگذاری HTML وجود دارد (بهجز یک div اضافی که در مثال آخر استفاده کردیم.) اما ما طرحبندیهای مختلفی از همین نشانهگذاری تولید خواهیم کرد و تمام اینها را فقط با سبکهای CSS انجام خواهیم داد.
نشانهگذاری HTML
<div class="example-layout">
<div class="example-header">
Page Header</div>
<div class="example-content">
<div class="primary">Primary Content
</div><div class="secondary">
Secondary Content</div>
<div class="tertiary">Tertiary Content
</div></div><div class="example-footer">
Page footer</div></div>
نشانهگذاری بالا را بهصورت زیر در CSS تعریف میکنیم. میتوانید ارتباط این شبهکدها را با نشانهگذاری HTML بهسادگی دریابید.
%;}10 :%; margin-left80 :.example-layout {width
;}999px solid #1 :.example-header, .example-footer {border
.example-footer {clear: both;}
ex;}6 :E; height95.primary {background: #FBA
F;}08.secondary {background: #FFE
.tertiary {background: #FFFABF;}
.example-header,
.example-footer,
.primary,
.secondary,
;}0 px5 :%; margin2 px10 :.tertiary {padding
; overflow: hidden;}0 :.example-content {padding
;}0 :.primary, .secondary, .tertiary {margin-top
این نکته را درنظر بگیرید که هر عنصر div بهاندازه 2% از چپ و راست فضای اضافی (padding) دارد. پس در عرض دادن به ستونها دقت بیشتری داشته باشید.
تک ستونی
سادهترین راه برای قراردادن مطلب اصلی در بالای صفحه، روش تک ستونی است. در این روش، بهسادگی مطلب اصلی را ابتدا، و بقیه مطالب را بهترتیب اهمیت پشت آن قرار میدهیم. در اینصورت، اساسا نیازی به تکنیک شناوری (floating) در CSS نخواهد بود.
دو ستونی
میتوانید با تکنیک شناوری و با استفاده از دستورات زیر، بهسادگی مطلب اصلی را در سمت چپ یا راست قرار دهید.
قرار دادن مطلب اصلی در سمت چپ (طرحبندی راستبهچپ:)
%;60 :.two-left .primary {float: left; width
%;}2 :margin-right
%;}30 :.two-left .secondary {float: right; width
% */100 % padding =8 % +2 % +30 % +60 /*
%;}100 :.two-left .tertiary {clear: both; width
سه ستونی
در ایننوع طرحبندی احتیاج به یک المان div ویژه با کلاس wrap داریم. در واقع این المان حکم پوشاننده (Wrapper) را دارد و اطراف مطلب اصلی، و مطالب فرعی ستونهای چپ و راست قرار میگیرد.
<div class="example-layout">
...
</div>
%;70 :.three-middle .wrap {float: left; width
%;}2 :margin-right
%;58 :.three-middle .primary {float: right; width
%;}2 :margin-left
%;57 :html .three-middle .primary {width
%;}1 :margin-left
*/ 6/* solves percentages issue in IE
%;}32 :.three-middle .secondary {float: left; width
%;}24 :.three-middle .tertiary {float: right; width
% */100 % padding =4 % +24 % +2 % + 70 / *
نکته: حواستان باشد که اگر ستونهای شما، مرز چپ یا راست دارد، آنها در اندازه عرض اصلی تاثیرگذار خواهد بود. بنابراین، اگر طرحبندی شما، با عرض ثابت است، یک ماشین حساب کنار دست خود بگذارید و مشغول به محاسبه و جمع شوید. اگر جز آن دسته از طراحان هستید که ترجیح میدهند، عرض ثابتی برای وبسایتشان نداشته باشند، پس بهتر است یا از مرزها استفاده نکنید، یا اگر استفاده میکنید، اندازه آن را به نصف حاشیه کناریاش تغییر دهید. بعد از مدتی تجربه و تمرین، قطعا میتوانید چیزی که دلخواهتان است را بدست آورید.
تازه ها
گوناگون
پیشنهاد سردبیر
در تپش این هفته، ماجرای فریب و تعرض در پوشش عرفانهای دروغین و رمالی را بررسی کردیم
پشت پرده اتاقهای دود و طلسـم
