نكات اوليه:
اين نكته روشن است كه نبايد از بالاترين محل صفحه بنا را بگذاريد به نوشتن پاراگراف‌هاي متن، يا به‌عبارت ديگر كاربران شما گم مي‌شوند و ديگر تمايل به خواندن را از دست خواهند داد. براي جلوگيري از اين اشكال، معمولا از يك لوگو در بالاي صفحه استفاده مي‌كنند كه با كليك برروي آن به صفحه اصلي بر مي‌گردد و به‌دنبال آن نوار اصلي صفحه و دربرخي موارد عناصر ديگر مانند فيلد جستجو يا فرم ورود نام‌كاربري و رمز عبور قرار مي‌گيرد.
نكته ديگر اين است كه براي اينكه كاربران، دسترسي راحت‌تري به مطالب موردنظرشان داشته باشند، بهتر است يك لينك مستقيم قرار دهيد تا كاربر بتواند با كليك بر روي آن مطالب غيرضروري را رد كند تا مستقيم به مطلب اصلي برسد.اين عناصر به كاربر مي‌فهمانند كه به چه سايتي وارد شده است و به‌سرعت بخش‌هاي اصلي‌كه بتواند به‌آن وارد شود را مشاهده مي‌كند. درست بعد از اين عناصر شما بايد بخش اصلي را قرار دهيد و بعد از آن مطالبي كه از اهميت كمتري برخوردارند. مانند نوار مرور ثانويه، لينك‌هاي اضافي، دكمه‌ها و غيره.
محتويات مي‌توانند مستقل از طرح‌بندي صفحه باشند
به‌كمك تكنيك شناوري در CSS مي‌توان تقريبا هر طرح‌بندي كه تصورش را مي‌كنيد پياده كرد. همانطور كه در مثال‌هايي كه آورده‌ايم، مشاهده خواهيد نمود، دو صفحه درست با يك نشانه‌گذاري HTML وجود دارد (به‌جز يك div اضافي كه در مثال آخر استفاده كرديم.) اما ما طرح‌بندي‌هاي مختلفي از همين نشانه‌گذاري توليد خواهيم كرد و تمام اين‌ها را فقط با سبك‌هاي CSS انجام خواهيم داد.
نشانه‌گذاري HTML
Page Header
Secondary Content
نشانه‌گذاري بالا را به‌صورت زير در 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) را دارد و اطراف مطلب اصلي، و مطالب فرعي ستون‌هاي چپ و راست قرار مي‌گيرد.
...
%;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 / *
نكته: حواستان باشد كه اگر ستون‌هاي شما، مرز چپ يا راست دارد، آن‌ها در اندازه عرض اصلي تاثيرگذار خواهد بود. بنابراين، اگر طرح‌بندي شما، با عرض ثابت است، يك ماشين حساب كنار دست خود بگذاريد و مشغول به محاسبه و جمع شويد. اگر جز آن دسته از طراحان هستيد كه ترجيح مي‌دهند، عرض ثابتي براي وب‌سايتشان نداشته باشند، پس بهتر است يا از مرزها استفاده نكنيد، يا اگر استفاده مي‌كنيد، اندازه آن را به نصف حاشيه كناري‌اش تغيير دهيد. بعد از مدتي تجربه و تمرين، قطعا مي‌توانيد چيزي كه دلخواه‌تان است را بدست آوريد.
hgjhgj