طراحی سایت بدون بهره گرفتن از جدول و با کمک سی اس اس

[img]http://www.********.ir/images/CSS-Website-Designs-30.jpg[/img]

چگونه طراحی سایت را بدون جداول انجام دهیم؟

طراحی سایت با به کارگیری جداول در سایت های Web 2.0 دیگر اهمیتی ندارد، اکنون این روش قدیمی شده و به جای آن در قالب چینی سایت از روشهای سی اس اس بهره گرفته می شود. اگر شما از جدول ها برای طراحی قالب سای تان بهره ببرید مجبور هستید طراحی سایت و نوشتن محتواهای سایت تان یکجا انجام می شوند و جداگانه نمی توانید در آنها دخل و تصرفی کنید و در این صورت امکان نگاه انتزاعی به هر یک از آنها از شما گرفته می شود و در واقع دست و بال شما بسته می شود و عمل شما محدودتر می شود. به طور مختصر طراحی سایت با جدول ها عیب هایی دارد که موردهای زیر را می توان نام برد:

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

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

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

[img]http://www.********.ir/images/table_broken.png[/img]

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

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

در گذشته جداول در HTML تنها به یک خاطر موجود بود: نشان دادن داده ها با چارچوب جدولی. ولی بعدها جدول با ویژگی border="0" بهتری را در اختیار طراحان سایت گذاشت که بتوانند طراحی تصاویر و متن را روی آن بگذارند. بهره گیری از جداول که رایج ترین ایزار طراحی صفحه های پر طمطراق بود حالا با ایجاد صفحه های اینترنتی بهتر از آنها، و با توانایی دسترسی مناسب تر، انعطاف‌پذیری، کارایی بالاتر در تضاد است.

[img]http://www.********.ir/images/css_pack_06.jpg[/img]

ما یک شیوه برای برطرف کردن این معایب برای شما داریم:

صفحه های طراحی سایت شما با سرعت بیشتری بارگذاری شود

هزینه پشتیبانی طراحی وب سایت کمتر گردد

نیازی به طراحی های دوباره سایت نباشد

شکل صفحه های سایت در همه جای سایت یکسان باشد

نتیجه های خوبی در موتورهای جستجوگر به دست آورد

طراحی وب‌سایت شما برای همه کاربران با هر رده سنی و همچنین برای همه دستگاه ها با هر مرورگری قابل‌دسترسی‌تر باشد

جنبه رقابتی طراحی سایت فروشگاهی شما با امنیت کسب و کارتان همراه باشد

[img]http://www.********.ir/images/csswebdesign860x450.jpg[/img]

کاستی های بهره گیری از جداول در طراحی سایت

هنگامی که داده های مربوط به چگونگی نشان دادن صفحه ها را وارد محتوای سایت می کنید

این امر اندازه و حجم صفحه های شما را به‌طور غیرلازم افزایش می دهد که کاربران باید داده های مرتبط به نحوه نشان دادن صفحه ها را در هر بار بازدید صفحه ها از نو بگیرند. و پهنای باند شما به راحتی از دست می رود.

این کار طراحی دوباره محتوا و سایت‌های کنونی را خیلی پرهزینه و سخت اجرا می کند.

سخت و پرهزینه بودن منجر به حفظ یکنواختی دیداری در کل یک سایت می گردد.

صفحه های طراحی‌شده با جداول همینطور برای استفاده کننده ها دارای معایب هست و افرادی که با موبایل ها و یا دستگاه های دیگر به صفحه شما می آیند توانایی دسترسی بسیار کمتری خواهند داشت.

با برداشتن کد مرتبط با نحوه نمایش از داخل صفحه های، طراحی دوباره سایت‌ها و محتوای موجود بسیار کم‌زحمت‌تر (و بسیار کم‌هزینه‌تر) می‌شود. برای تغییر [Only registered and activated users can see links. Click Here To Register...] ، تنها نیاز به تغییر دادن شیو‌ه‌نامه صفحه های دارید؛ اصلاً احتیاجی به تغییر دادن خود صفحه های ندارید.

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

پایین آمدن حجم فایل به معنای باز شدن سریع‌تر صفحه ها و هزینه کمتر میزبانی سایت است.

استفاده از استانداردهای [Only registered and activated users can see links. Click Here To Register...] همینطور سبب سهل شدن حفظ هماهنگی در کل یک سایت می‌شود. از آنجا که صفحه های از ?? CSS مشترک برای طرح‌بندی بهره می‌برند، همه آنها به یک صورت شکل می‌گیرند.

کاربرانی که از خبرخوان ها برای مرور اینترنت بهره می گیرند مجبور نمی شوند یکی‌یکی خانه‌های زیاده از حد جدول‌ها و فضانگهدارها را پشت سر بگذارند تا به متن اصلی صفحه های شما برسند.

[img]http://www.********.ir/images/csstable.jpg[/img]

اما در مواقعی جدول بهتر از CSS ظاهر می شود در مواردی که CSS به خوبی طراحی‌های جدولی انجام نمی‌دهد.

همانطور که گفتیم، چیزهایی هست که جداول بهتر از سی اس اس انجام می‌دهد. ولی آخر سر شما باید از خودتان سوال کنید که آیا همه مسائلی که در ارتباط با به کارگیری از جداول برای طراحی به‌جای داده مطرح شد ارزش آن را دارد یا نه.

حالا موقع آن است که نوشتن CSS را برای طراحی سایت شروع کنید

نخست، به هر div یک کناره بدهید. این به شما کمک می‌کند که ملاحظه کنید هر کدام کجا شروع و کجا تمام می‌شود، و اینکه آیا تگ‌ها در هم فرو رفته هستند یا نه.

فرمان های سی اس اس تان را برای انتخاب‌گرهای اجزا نخست از همه بنویسید (<html>، <body>، <p>، <h1>، <h2>، <ul>، <li>، غیره.

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

برای [Only registered and activated users can see links. Click Here To Register...] خود نیاز دارید دست به تجربه های جدیدی بزنید که راه های جدید را برای برطرف کردن این مشکلات و کاستی ها پیشنهاد می دهند.