طراحی سایت و css

زمانی که HTML پا به عرصه دنیای اینترنت گذاشت، فرض بر این که این زبان تنها برای نمایش متن و عکس بوجود آمده است. عملا در آن زمان، کسی حتی فکر آن را نمی کرد که روزی برسد که اینترنت به خانه های صدها میلیون آدم و بر روی کامپیوترهای شخصی نفوذ کند.
HTML زبانی بود که بسیاری از موارد پیشرفته در طراحی در آن لحاظ نشده بود. بعلاوه اینکه این زبان قابلیت تغییر، کاربر پسندی و بسیاری دیگر از مباحثی که در دنیای برنامه نویسی و طراحی با گذشت زمان بوجود آمده اند را در خود جای نداده است.

CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای HTML. از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت مثلاً غیر فعال بودن جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم.

CSS هم مانند جاوا اسکرپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده کنیم. در این صورت می توانیم ظاهر همه صفحه ها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم. مثلاً فرض کنید که رنگ متن همچنین نوع فونت متن صفحه هایمان را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم، حالا اگر بخواهیم رنگ متن همه این صفحات را تغییر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن صفحات نداریم.

 

 

 

 

Css چیست ؟ (سی اس اس چیست)
css چیست ؟ الگوهای آبشاری یا روی‌ انداز آبشاری سَبْک یا سی‌ اس‌ اس (به انگلیسی: CSS: Cascading Style Sheets ) در کنار اچ‌تی‌ام‌ال هستهٔ فناوری ساخت صفحه‌های وب هستند. سی‌اس‌اس CSS روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. الگوهای آبشاری از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود. به گفته‌ای ساده تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره ها)، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای می‌دهند. css نوعی زبان برنامه نویسی می باشد که معمولا همرا با زبان Html به کار می رود.این دو زبان معمولا همراه با هم استفاده می شود.از این زبان بیشتر برای طراحی صفحات استفاده می شود.برای مثال برای تغییر فونت یا تصویر زمینه ی وب سایت از این زبان استفاده می شود.
با توجه به اینکه امروزه در هر شغلی افراد به طراحی وب سایت روی آورده اند باید طراحی سایت بصورت بهینه و طبق اصول Html و Css طراحی شود تا سایت کارایی داشته باشد.

عملا این زبان برنامه نویسی، مکملی بر زبان باستانی HTML است و سعی در پر کردن نقاط ضعف و خلاء های آن دارد.
CSS زبانی است که توسط آن قادر خواهید تا استیل طراحی صفحات وب سایت تان را یکبار تعریف و به صفحات مورد نیازتان اعمال نمایید.
برای این منظور مثالی را می زنیم. تصور کنید که سایت شما شامل 100 صفحه استاتیک می باشد و شما آنها را تماما به زبان HTML نوشته اید. بعد از یک هفته تصمیم گرفته اید تا فونت تمام کلمات را کمی بزرگتر کنید. گفتن اینکه فونت تمام کلمات بزرگتر شود بسیار کار راحتی است و تنها یک جمله است. ولی آیا در عمل تغییر 100 صفحه نیز به همان راحتی خواهد بود؟
قطعا نه. CSS دقیقا همان زبانی است که جمله یک خطی شما را تبدیل به همان یک جمله خواهد کرد. شما تنها کافی است تا استیل مورد نیازتان را در طراحی تغییر دهید و آن هم تنها با تغییر یک یا چند مورد کوچک.
جمله آخر اینکه، استفاده از CSS باعث تمیزتر شدن کدهای برنامه نویسی تان می شود، تغییرات آتی را آسان می کند و همچنین دید شما را بیشتر به طراحی معطوف می کند تا سر و کله زدن با کدهای برنامه نویسی.

 

کاربرد اصلی css چیست ؟

بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحهٔ وب اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال است ولی آن را می‌توان بر هر نوع مستند اکس‌ام‌ال از جمله اس‌وی‌جی و اکس‌یوال اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس CSS به عهدهٔ کنسرسیوم وب جهانگستر است.

یکی از مهمترین نکته ها برای طراحی سایت ، استفاده بهینه از  css میباشد در این بخش از آموزش css به شرح ویژگی های اساسی و مهم در طراحی وب سایت میپردازیم و روشهای اضافه کردن CSS به صفحه را مورد بررسی قرار میدهیم.

سه روش برای اضافه کردن CSS به صفحه وجود دارد :

  1. CSS خارجی
  2. CSS داخلی
  3. سبک درون خطی

برای آسان کردن کار موتور های جستجو سعی کنید از انیمیشن های فلش و یا تگ های span بوسیله css ،  کمتر استفاده کنید. با استفاده از css از دوباره نویسی کدهای HTML که باعث کند شدن لود صفحه میشود جلوگیری میکنیم.

در این جا نکاتی را در مورد سی اس اس برای شما بیان می کنیم:

  1. دستورات وارده حتما باید بین علامت {} قرار بگیرد و همچنین پس از نوشتن دستور با قرار دادن : مقدار آن را تعیین کنید.
  2. می توانید دستورات نوشته شده را پشت سرهم نوشته به شرطی که بین آنها با علامت ؛ از هم جدا شود.
  3. می توانید هرکدام از تگ ها را با علامت , از هم جدا کرد

 

مزایای استفاده از  CSS

با اینکه در سال‌های نخست پیدایش طراحی وب، طراح‌ها از جدول‌ها و ترفند پنهان سازی آنها برای چیدمان کمک می‌گرفتند، روش مدرن طراحی وب، این روند را منسوخ کرده است. چیدمان اکنون، تنها با دیواره (یا DIV)، که برتری‌های فراوانی نسبت به جدول‌ها (یا TABLE) دارند، انجام می‌شود. هر دیواره، یک موزاییک مجازی بخش کننده صفحه‌است که کار چیدمان را آسان‌تر انجام می‌دهد. جدول‌ها به جایگاه نمایش داده‌های ستونی خود بازگشتند و دیگر از آنها برای چیدن داده‌های صفحه‌های وب استفاده نمی‌شود. الگوهای آبشاری، افزون بر سبک تر کردن هر صفحه وب و پاک‌تر کردن آن، از داده‌های تصویری و نمایشی استاندارد، روش طراحی وب را به میزان فراوانی آسان تر و دسترسایی و کارایی وب را بهتر کرده‌اند.

به کمک CSS میتونیم از دوباره نویسی كدهای HTML که باعث مشکل شدن کدنویسی و همچنین كند شدن سرعت بارگذاری صفحه در اینترنت میشه جلوگیری كنیم.

برای مثال می تونیم یك بار نوع فونت مورد استفاده در یك صفحه را تعیین كنیم و دیگر مجبور نباشیم كد مربوط به فونت را در صفحه به كارببریم.
در واقع بطور کلی میشه گفت CSS این امکان رو ایجاد میکنه تا طراح بتونه چندین مشخصه توی طراحی صفحه رو به یکباره تعیین کنه و همچنین میشه گفت برای کنترل دقیق مشخصات صفحه و استاندارد کردن تگ های غیراستاندارد HTML و طراحی Layout صفحه میتونیم CSS رو بکار ببریم.

CSS زبانی است برای تعریف فرمت و قالب بندی صفحات وب که این قالب بندی می تواند شامل رنگها، تصاویر پس زمینه، نوع فونت بکار رفته، حاشیه های و میزان تورفتگی المان های صفحه باشد.

شاید شما این سوال به ذهنتان بیاید که بدون CSS هم می توان این تنظیمات را با استفاده از برچسبهای HTML انجام داد پس چرا از CSS استفاده کنیم؟ برای اینکه جواب این سوال را به خوبی داده باشیم، یک مثال ساده می زنیم.
همانطور که می دانید استفاده از فونت sans-serif (فونتهایی نظیر Arial, Verdana, Tahoma) بسیار رایج می باشد. ولی از آنجائیکه فونت پیش فرض مرورگر های وب از نوع serif (نظیر Times New Roman) می باشد، لذا برای ایجاد یک صفحه وب که برای نمایش متن از فونت sans-serif استفاده کند، باید از برچسب به کرار استفاده کرد. شما ممکن است در یک آرایش پیجیده از یک صفحه وب دهها مورد از برچسب را مشاهده کنید که فقط برای تعریف فونت صفحه بکار رفته اند. حال اگر فرض کنیم وبسایت شما از ۵۰ صفحه تشکیل شده و در هر صفحه ۱۵ بار از برچسب استفاده شده، در اینصورت تعداد کل برچسبهای برابر با عدد ۷۵۰ خواهد بود! یعنی فقط برای تعریف یک قانون بسیار ساده ما نیازمند به تعریف ۷۵۰ تا برچسب خواهیم بود
حال بیائید کمی مشکل را حادتر کنیم! فرض کنید مشتری شما به شما زنگ می زند و از شما می خواهد از فونت دیگری برای طراحی صفحه استفاده کنید. شما باید هزاران برچسب را که در داخل چندین صفحه وب استفاده کرده اید را ویرایش کنید!
اگر شما با HTML بخوبی آشنا باشید می دانید که استفاده از برچسب مشکل استفاده از برچسب را حل می کند ولی با این حال حتی اگر شما از برچسب نیز استفاده کرده باشید، باید تک تک صفحاتتان را باز کرده و این برچسب را ویرایش کنید.
بنابراین استفاده از HTML برای قالب بندی و تعریف ظاهر صفحه پیشنهاد نمی شود. همچنین ذکر این نکته هم حائز اهمیت است که استفاده از برچسبهایی نظیر در نسخه های بعدی استانداردهای W3C ممنوع شده است. بطور مثال اگر شما نوع سند HTML (DOCTYPE) را از نوع Strict انتخاب کنید (نظیر HTML 4.01 Strict ویا XHTML 1.0 Strict) در اینصورت این برچسبهای قابل استفاده نخواهد بود. بنابر این بهتر است از این برچسبهای HTML دوری کنید و از قوانین CSS برای تنظیم ظاهر المانهای صفحه استفاده کنید.

مزایای CSS بصورت خلاصه : (در مورد هرکدوم از این مزایا میشه مفصل صحبت کرد و مفهوم اونا رو در عمل باید دید)

  1. CSS در وقت صرفه جویی میکنه (همونطور که گفتم با تعیین یکباره مشخصات)
  2. تغیییرات مجدد تگ های HTML بسیار راحت میشه.
  3. طراحی صفحه بدون نیاز به تگ های قالب بندی HTML 
  4. طراحی صفحات دینامیک به کمک javascript
  5. و ...

 

 

 

 مزیت استفاده از CSS در مقابل ویژگی های خود تگهای html :
کاملا مشخص است که اگه بخواهید از attribute های خود html استفاده کنید ، بدلیل اینکه باید انها را در هر تگ دوباره و چندباره تکرار کنید حجم فایل html شما خیلی زیاد میشود ، در صورتی که ما با استفاده از CSS میتوانیم یک دسته از attribute ها را فقط یکبار و در یکجا تعریف کنیم و تگهای مختلف به اون دسته تنظیمات ارجاع بدن و نیازی به آوردن تنظیمات در خود تگ و اتلاف فضای بیشتر نباشد . با CSS کلی در اندازه ی فایل صفحه ی وب سایتتونصرفه جویی می کنید .
هر چه اندازه ی فایل وب سایتتون کوچیکتر باشد سرعت لود شدن صفحه ی وب هم مسلما بیشتر میشود . که اینکار با CSS میسر است .
تغییر دادن صفحه ی وب سایتتون به مراتب راحتتر میشود .
تنظیمات CSS را می توانید توی فایل جداگونه بگذارید و به این ترتیب استفاده و نگهداری آن راحتتر است .

 

اشتباهات معمول در CSS

طراحان و كدنويسان چه تازه كار باشند چه حرفه اي هميشه ممكن هست كه در نوشتن كد دچار اشتباه بشوند، اين اشتباهات ممكن است يه خاطر عدم تمرين كردن و يادگيري اصولي از ابتدا باشد، يا اينكه هنگام نوشتن عجله در كار باشد. در اين پست قصد معرفي رايج ترين اشتباهات در هنگام نوشتن كد HTML و CSS را داريم.


اشتباهات HTML

  • فراموش كردن بستن يك تگ 

اين اشتباه خيلي معمول است مخصوصا براي تازه كارها، خيلي از تگها نياز دارند كه بسته شوند تا درست كار كنند، مثل div, strong و لينكها. يكسري از تگها هم نياز دارند كه يك slash در انتهاي آنها گذاشته شود، مثل تگ img.

 
Text inside the div.
  

  • DOCTYPE اشتباه 

HTML نياز دارد كه سند خود را با يك DOCTYPE درست شروع كنيد.

قرار دادن نادرست تگها در كنار هم

اين نكته خيلي مهمي است كه تگها را در جاي درست خودشان باز كنيد و ببنديد. براي مثال وقتي يك div را باز ميكنيد بايد حتما بعد از اينكه تگ ديگري مي تواند بسته شود ، بسته شود براي مثال اين كد اشتباه است :

 
text

  • با حروف بزرگ نوشتن تگها

اين كار عادت نادرستي است و حتما بايد تگها با حروف كوچك نوشته شوند، براي مثال :

 

  • فراموش كردن باز يا بسته كردن quotes

اين اشتباه زياد پيش مي آيد و ممكن است باعث شود كد شما به درستي كار نكند، حتما هنگام باز كردن يك quote آنرا ببنديد :

 

  • استفاده كردن از inline استايل

اين كار هم يك عادت نادرست است. inline استايل ها درست كار ميكنند اگر استفاده كنيد ولي بعدها باعث عذاب شما خواهند شد ! آيتمهاي شما بايد توسط فايل CSS خارجي شما استايل داشته باشند كه در آينده هنگام ويرايش و تغيير دادن استايلها دچار عذاب نشويد. يك مثال از inline استايل :

 link name 

  • encoding نكردن كاراكترهاي خاص

كاراكترهايي مثل © و & بايد توسط كد صحيح HTML شان نشان داده شوند. در اين ليست مي توانيد كد اين كاراكترها را پيدا كنيد.

 

 

 

 

  • استفاده كردن بيش از حد از Id ها و class ها

class ها براي آيتم هايي استفاده مي شوند كه بيش از يك بار در كد شما مورد استفاده قرار مي گيرند. مثل يك لينك كه چندين بار در سايت شما مورد استفاده قرار مي گيرد و داراي استايل يكساني مي باشد. Id ها براي آيتم هايي كه تنها يك بار مورد استفاده قرار مي گيرند تعريف مي شوند مثل header div. اين دو مورد معمولا بيشتر از حد نياز مورد استفاده قرار مي گيرند و  ممكن است در آينده هنگام ويرايش و تغيير كد شما را گيج كنند، بهتر است در حد نياز از آنها استفاده كنيد.

 

  • فراموش كردن بستن براكت ها و استايلها

هر آيتمي در CSS با يك براكت } باز و بسته { مي شود. هر استايلي كه تعريف مي كنيد بايد با يك ; بسته شود. براي مثال :

#divname {
width: 40px;
height: 30px;

}
معمولا روشهاي متفاوتي براي نوشتن كد CSS وجود دارد كه بسته به طراح و برنامه نويس دارد بعضيها همه كدها را در يك خط مي نويسند و بعضي ها مثل مثال بالا هر استايلي را در يك خط جداگانه مي نويسند.

 

  • استفاده نكردن از Global Styles

خيلي از آيتمها مثل پاراگراف، هدرها و لينكها استايل يكساني در كل سايت دارند بنابراين بهتر است براي آنها يك استايل همگاني تعريف شود، اين كار هم باعث جلوگيري از اشتباههاي ناخواسته مي شود و هم كد شما را سبك تر مي كند.

 

  • استفاده نكردن از اسمهاي مناسب براي Id ها و Class ها

هميشه بهتر هست كه براي اين موارد نامهاي مناسبي انتخاب كنيد كه در آينده اگر نياز به ويرايش و تغيير داشت بتوانيد راحت بفهميد كه اين موارد براي چه هستند. براي مثال نامگذاري به صورت home-left-column به مراتب بهتر از left هست.

 

  • استفاده نكردن از كدهاي كوتاه

كدهاي كوتاه يكي ديگر از روشها براي مرتب و كم حجم كردن كد شما است. براي مثال به جاي استفاده از padding-top ، padding-right و ... مي توانيد از روش زير استفاده كنيد :

padding: 5px 10px 0 10px;

 
  • استفاده نكردن از كدهاي كوتاه براي رنگ

اعداد هگزايي كه مثل ffffff و يا 000000 تكرار مي شوند را ميتوان به صورت 000 و fff نوشت.

 

  • استفاده نادرست از positioning

Positioning يكي از مواردي است كه براي كساني كه تازه كار هستند خيلي سخت ممكن است به نظر برسد. انتخابهاي شما static , relative , absolute و fixed هستند. static حالت پيش فرض است و موقعيت آيتم در حالت نرمال صفحه است. relative قرار دادن آيتم به صورت وابسته به خودش است به اين معني كه شما مي توانيد آنرا نسبت به موقعيت نرمالش در صفحه به سمت بالا، پايين، چپ و راست حركت دهيد. absolute به شما اين امكان را مي دهد كه آيتم خود را در هر جاي صفحه قرار دهيد و اين حالت بيشترين اشتباه در موردش مي شود. مقاديري كه براي آيتم absolute در نظر مي گيريد به صورت relative و يا absolute نسبت به آيتم پدر خود مي باشد و اگر وجود نداشته باشد به تگ html بر ميگردد. حالت fixed وابسته به موقعيت پنجره مرورگر است يعني اگر پنجره مرورگر را تغيير دهيد اين آيتم تغييري نمي كند. يادگيري درست اين موارد به شما كمك بزرگي در چيدمان صفحه خواهد كرد.

 

  • اعتبارسنجي

در پايان هميشه كد HTML و CSS خود را اعتبارسنجي كنيد تا اشتباهات احتمالي را تصحيح كنيد. وب سايت شما ممكن است در حالت عادي درست نمايش داده شود ولي استفاده كردن از اعتبارسنج شما را در شناسايي اشكالات وب سايت شما كمك مي كند.

 

 

لیست ها در CSS
در این بخش از آموزش css  ، تنظیم لیست را توضیح می دهیم.
برای آموزش تنظیم لیست در سی اس اس بهتر است یادآوری ای از تنظیم لیست در Html را مرور کنیم.
تنظیم لیست در html به دو صورت می باشد که اولی توسط اعداد یا حروف نشان داده می شود  و دومی توسط نشانگر گرد توپر نشان داده می شود.
تنظیم لیست در Css در طراحی سایت به شما این امکان را می دهد که نشانگر آیتم لیست خود را به یک تصویر مدل دهید.با استفاده از خاصیت تنظیم لیست در Css لیستهای مورد نظر خود را می توانید به صورتهای مرتب،نامرتب و یا تنظیم تصویر برای نشانگر تنظیم می کنند.

در این ویژگی از سی اس اس  CSS می توان لیست هایی از قبیل موقعیت،شکل و یا نحوه ی نمایش اعدا و استفاده از تصاویر را در لیست ها تنظیم کرد.تنظیم لیست در سی اس اس  CSS شامل امکاناتی می باشد که آن ها را توضیح می دهیم.

list-style-image:با استفاده از این ویژگی برای عکس نشانگر تعریف می کند و به صورت یک آیکون کوچک نمایش داده می شود و شامل دو حالت است که یکی none می باشد که در این حالت هیچ عکسی در لیست دیده نمی شود،و حالت url که با استفاده از این حالت آدرس تصویر مورد نظر را وارد می کنند.

مثال زیر کاربرد list-style-image را نشان می دهد.

< ul style="list-style-image: url(../pic/mobsync.03.ico)" >
  < li > Item 1 < /li >
  < li > Item 2 < /li >
< /ul >

list-style-position:در این ویژگی موقعیت قرارگیری نشانه و متن آیتم های لیست را بر حسب یکی از حالت های زیرتعیین می کند.که این ویژگی هم شامل دو حالت می باشد که یکی inside می باشد که در این حالت نشانه لیست و متن آیتم های آن کمی تو رفته تر نمایش داده می شوند و حالت outside نشانه لیست و متن آیتم های به صورت عادی نمایش داده می شوند.

line-style-type:این ویژگی می توان marker لیست خود را به شکل دلخواه عوض کنید.

مثال زیر همه ی کاربردهای لیست را در سی اس اس نشان می دهد:

ul
{list-style: square url("sqpurple.gif");}

 

: طراحی وب سایت با CSS     
طراحی با CSS به واقع جداسازی محتوا و سبک است. محتوا باید در نسخهء متنی HTML و CSS باید مراقب باشد که HTML در صفحه چگونه متن را به نمایش می گذارد. با این حال، اکثر طراحان وب سایت به صورت مناسب اقدام به جدا کردن محتوا و سبک نمی کنند. HTML و CSS از یکدیگر جدا هستند. اما اگر شما تغییراتی در نسخهء متنی HTML ایجاد نمایید، یک ظاهر طراحی شدهء از هم جدا ایجاد می شود. زیرا CSS برای انجام کار متکی بر عناصر موجود در متن HTML می باشد.
در حال حاضر این موضوع برای کسی مهم نیست که ترکیب مطالب چند صفحهء ثابت کنار هم قرار نیست خیلی تغییری در طراحی سایت ایجاد کند؛ که با استفاده از CSSدر طراحی وب سایت از منافع آن بهره مند شده و از وجود دسترسی های ساده اطمینان حاصل نمایید.
اما اگر با یک سایتی که به درستی مدیریت شده و به طور مرتب مطالب آن به روز می شود و با وجود تعداد زیادی محتوای داینامیک(پویا)، بسیار مهم است که بتوان بدون نیاز به ویرایش HTML در هر صفحه و بدون پخش شدن مطالبی که تا به حال جمع آوری شده، کار انجام داد.پاسخ این کار CSS می باشد. اما تنها در صورتی می توان در طراحی سایت از CSS بهره مند شد که مطالب و محتوا به طور کامل از سبک جدا شده باشد.
برای داشتن طراحی سایت که به طور کامل قابل تغییر با CSS باشد، بسیار ضروری است که بدانیم که در هر نسخه متنی HTML در واقع 2 عنصر جداگانه وجود دارد. یکی محتوا است – که شامل متن و تصاویری است که افراد در وب سایت آنها را دیده و مطالعه می کنند؛ و دیگری ساختار صفحه است – DIVs ویا Table که عناصر و ویژگی های مختلف در صفحه را تعریف می کند.
برای ایجاد موفقیت در طراحی وب سایت با CSS، عناصر ساختاری صفحات HTML نیاز به برنامه ریزی و اجرا و پذیرش CSS برای ایجاد تغییرات در صفحه صرف نظر از محتوای ان دارد. به عنوان مثال اکثر صفحات در طراحی سایت باید دارای Header و یا عنوان، ستون سمت چپ، فضای اصلی و ستون سمت راست و همچنین پاورقی باشد.
اینها عناصر ساختاری صفحه در طراحی سایت می باشد. در هر یک از این عناصر ساختاری باید محتوای صفحه قرار گیرد. به طور مثال لوگو(آرم تجاری شرکت) در عنوان صفحه، منو در ستون سمت چپ صفحه و متن اصلی در محوطهء اصلی صفحه قرار می گیرد.
در این روش با در نظر گرفتن ساختار در هر صفحه، CSS پس از آن می تواند بدون نگرانی در مورد محتوا و مطالب بخشها و محل های هدفمندی برای هر صفحه ایجاد نماید. اگر فضای متن در ستون سمت چپ صفحه 10 پیکسل باشد و فضای اصلی صفحه 12 باشد، در CSS می توانید مطالب و چیزهایی که تمایل به انجام آن دارید را در این فضا قرار دهید. سمت چپ سایز فونت 10 و فضای اصلی سایز فونت می تواند 12 باشد.
این بدان معنی است که تا زمانی که صفحه با همان پایهء عناصر ساختاری باشد می توان کاملاً با CSS تبدیل کرد – برای مثال ستون سمت چپ را ساخته و تصویر پیش زمینه عنوان و یا صفحهء اصلی را اضافه نموده و ادامه دهید. اما شناخت نسخهء متنی HTML که شامل ساختار و محتوا هستند مرحلهء اول طراحی سایت با CSS در این کار می باشد.
برای تعمیم بیشتر، نیاز به یک ساختار صفحه ای است که تقریباً به اندازهء کافی انعطاف پذیر بوده به طوری که CSS بتواند عملیاتی که لازم و ضروری و موثر است را انجام داده و این عمل بدون هیچ گونه نگرانی در مورد محتوا در هر بخش از طراحی سایت و صفحات برگزار شود.
برای انجام این کار در مرحلهء بعدی ساختار بنیادی باید یک تقسیم بندی دیگر داشته باشید.table عنوان برای مثال باید به سه table داخلی تقسیم شود: table سمت چپ – table سمت راست و table اصلی؛ تقریباً تمام ترکیبات ممکن که شما نیاز دارید تا با CSS هر سبکی که در طراحی سایت می خواهید به نمایش بگذارید. تنها کاری که باید انجام دهید این است که محتوا و مطالب را در منطقهء مربوطه قرار دهید.

بهره گیری از منافع جداسازی این سه بخش که تمامی استاندارد ها مانند تبدیل پس زمینهء محو به رنگهای جامد، تصویر پس زمینه برای اضافه کردن لبه های گرد(rounded corners)، تغییرات در داخل و خارج تصاویر فقط با CSS انجام می شود. Table داخلی می تواند شناور بوده و می تواند یک تصویر را بر روی دیگری قرار دهد.
اگر این روش در ساختار مناطق دیگر در html استفاده شود، صفحه ای را خواهید داشت که صفحه بندی آن به طور کامل توسط CSS طراحی شده و به طور کامل از محتوای صفحه مستقل و غیر وابسته خواهد بود. 


 

 

طراحی وب با استفاده از جدول دیگر در سایت های Web 2.0 جایگاهی ندارد، حالا با قالب چینی سایت با استفاده از تکنیک های CSS جایگزین شده است. در صورت استفاده از جداول در طراحی قالب سایت ها، طراحی و محتوای سایت که به آنها می بایست به صورت مجزا توجه کرد در هم ادغام می شوند و امکان نگاه انتزاعی به هر کدام وجود نخواهد داشت. عیوب بسیاری در طراحی با استفاده از جدول وجود داشته که می توان موارد زیر را برشمرد:
به علت جدا نبودن طراحی از محتوا، هر جایی که نیاز به تغییر طراحی عنصری وجود داشته باشد این طراحی می بایست در همانجا ذکر شود. در نتیجه حجم صفحات وب ما بسیار سنگین خواهد بود. در حالی که با تعریف یک دستور CSS می توان آن را به دسته ای از عناصر اعمال کرد و بدین ترتیب حجم صفحات وب و در نتیجه میزان پهنای باند مصرفی را تا حد قابل توجهی کاهش داد و همینطور سرعت نمایش صفحات نیز در مرورگر کاربر افزایش می یابد.
اشکال دوم این است که در صورت نیاز برای تغییر ویژگی دسته ای از عناصر نیاز خواهیم داشت تا همه ی آنها را به صورت مجزا تغییر دهیم، اما در صورتی که از قوانین CSS استفاده کرده باشیم، تنها تغییر یک قانون اعمال شده به دسته ای از عناصر همه ی آنها را تغییر خواهد داد.
در طراحی با استفاده از CSS امکان تعیین چندین طراحی برای انواع مختلفی از صفحات را داریم. بنابراین برای طراحی متفاوتی برای چاپ، و یا برای مرورگرهای موبایل، و یا حتی برای انواع مرورگرهای متفاوت نیازی به ایجاد صفحات HTML مجزا نخواهیم داشت و تنها تعیین قواعد متفاوت CSS طراحی متفاوتی را به کاربر ارائه خواهد کرد.
به علت جدا شدن محتوا از طراحی و امکان دید انتزاعی به هر کدام در طراحی های بر اساس CSS در Web 2.0 می توان هر کدام را با حداقل توجه به دیگری تغییر داد. بدین ترتیب امکان تغییر کامل ظاهر سایت با تغییرات عمده در CSS و حداقل تغییرات و گاهی بدون تغییر در محتوای صفحات HTML وجود خواهد داشت. بدین ترتیب هزینه نگهداری سایت تا حد زیادی کاهش می یابد.

از همه این ها مهمتر این است که استفاده از جدول باعث بالا رفتن کدهای HTML صفحه شده و باعث میشود که چگالی اطلاعات صفحه به کدها کم شود و این مسئله تاثیر منفی در سئو (ارتقا رتبه سایت در موتورهای جستجو) خواهد شد.

شرکت تجارت پرشیا