نکاتی پیرامون طراحی قالب سایت

[jaza_sa]

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

گاهی اوقات طراحان سایت برای کنترل مکان اشیاء در صفحات وب از جدول استفاده می کنند .
این روش قبل از بوجود آمدن CSS مناسب بود ، ولی بعضی از طراحان هنوز هم از این روش استفاده می کنند .
اگرچه این کار بسیار متداول است ، ولی W3C به طور رسمی (www.w3c.org/tr/wai-webcontent (http://www.w3c.org/tr/wai-webcontent)) ، این روش را نامناسب اعلام کرده و گفته :
"استفاده از جدول باید برای نمایش اطلاعات جدولی (Data Tables) درنظر گرفته شود. این بدان معنی ست که طراحان نباید برای ساخت قالب صفحات از جداول استفاده کنند . استفاده از جدول برای قالب ، باعث به وجود آمدن مشکالات خاصی برای کاربران screen reader می شود."
به عبارت دیگر ، جداول در HTML فقط باید برای نمایش اطلاعات جدولی استفاده شوند ، نه برای ساخت قالب صفحات . برای طراحی قالب سایت ، باید از کنترل هایی مانندDIV و ویژگی style آن ها استفاده شود . و در صورت امکان از یک <style> جداگانه یا یک فایل مجزا استفاده شود .

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

2. لود سریعتر صفحه!
این نکته رو بخاطر بسپارید که یک فایل stylesheet فقط یکبار توسط مرورگر دانلود می شود ، و تا زمانی که این فایل از روی سرور تغییر نکند ، مرورگر از cache استفاده میکند ؛
اگر برای تعریف قالب از جدول استفاده کنید ، مرورگر برای هر درخواست ، قالب جدول را مجددا دانلود خواهد کرد ، بنابراین بایت های بیشتری دانلود خواهند شد و در نتیجه دانلود تمام صفحه نیاز به مدت بیشتری دارد .
به عنوان نمونه ، قالبی که توسط CSS تعریف شده ، میتواند حجم صفحه را تا 50% کاهش دهد ، و مزیت این روش کاملا مشخص است . بعلاوه ، در این روش سرور هنگام درخواست های زیاد فشار کمتری را تحمل میکند (فرستادن حجم کمتری از اطلاعات برای یک کاربر باعث می شود تا کاربران بیشتری بتوانند بطور همزمان از ذخایر سرور استفاده کنند).

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

Screen Reader : نرم افزاری که توانایی خواندن متن و دیگر محتویات صفحه را برای نابینایان مهیا می کند.

4. CSS و DIV ها انعطاف پذیری بیشتری نسبت به Table ها دارند .
به عنوان مثال ، میتوان دو فایل قالب آماده کرد که ظاهر و مکان اشیاء در آنها بطور متفاوت تعریف شده باشند . حال میتوان با استفاده از یک لینک ، قالب ها را با یکدیگر جابجا کرد و به طور کامل ظاهر صفحه را تغییر داد ، بدون اینکه چیزی از محتویات صفحه به خودی خود تغییر کند .
با استفاده از صفحات پویا در ASP.NET ، میتوان در زمان اجرا قالب صفحه را عوض کرد ، و به کاربران این امکان را میدهد تا بتوانند قالب مورد نظر خودشان را انتخاب کنند . این فقط مربوط به رنگ و فونت اشیاء نمی شود (شما میتوانید مکان اشیاء را با استفاده از فایل های CSS تغییر دهید درنتیجه میتوان فایلی داشت که مثلا مکان منو را از گوشه سمت چپ-بالا صفحه ، به گوشه سمت راست-پایین صفحه انتقال دهد و کاربران میتوانند قالب مورد نظر خودشان را انتخاب کنند) و این نکته بسیار اهمیت دارد .

5. CSS این امکان را به شما می دهد تا بدون نیاز به طراحی دوباره (توسط HTML) ، طراحی شما برای تجهیزات دیگری از قبیل موبایل (مانند PDA یا Smartphone) هم قابل استفاده باشد .
این اهمیت دارد که قالب طراحی شده ، با سایز صفحه آنها مطابقت داشته باشد ، تا محتویات در یک صفحه کوچک به خوبی جاداده شود و به راحتی قابل خواندن باشد . شما میتوانید این کار را هم با طراحی یک قالب مخصوص و هم با مخفی کردن آنها بطور کامل انجام دهید . برای مثال با جاگذاری آنها زیر یکدیگر (ترجیحا در ستون های عمودی) ، یا حذف محتویات بنر ، نظر سنجی و سربرگ هایی با لوگوی بزرگ . در صورتی که از جدول استفاده کرده باشید شما مجبور خواهید شد تا دوباره صفحات را طراحی کنید .
تمامی این مشکلات ، تنها با نوشتن یک فایل CSS جدید برطرف خواهد شد.
نتیجه : توجه کنید که بحث بالا مربوط به عدم استفاده از جداول برای طراحی قالب کلی سایت می باشد . البته ، استفاده از جداول برای ساختارهای جدولی قابل پذیرش است ، چرا که نگهداری و طراحی آن ساده است در غیر این صورت نیاز به استفاده بسیار زیاد از کدهای CSS خواهد بود . همچنین این احتمال وجود دارد که بخواهید بطور پویا ، قالب فرم را تغییر دهید . برای این کار نیاز به تمامی انعطاف پذیری های CSS ندارید و بجای آن استفاده از جداول مناسب تر است .

[jaza_sa]

این هم متن نویسنده :


Sometimes developers will use HTML tables to control the positioning of other items on a web page. This was considered the standard practice before CSS was developed, but many developers still use this methodology today. Although this is a very common practice, the W3C officially discourages it (Web Content Accessibility Guidelines 1.0 (http://www.w3c.org/tr/wai-webcontent)), saying "Tables should be used to mark up truly tabular information ("data tables"). Content developers should avoid using them to lay out pages ("layout tables"). Tables for any use also present special problems to users of screen readers." In other words, HTML tables should be used for displaying tabular data on the page, not to build the entire layout of the page. For that, you should use container controls (such as DIVs) and their style attribute, possibly through the use of a separate <style> section or a separate file. This is ideal for a number of reasons:

1· If you use DIVs and a separate stylesheet file to define appearance and position, you won't need to repeat this definition again and again, for each and every page of your site. This leads to a site that is both faster to develop and easier to maintain.


2· The site will load much faster for end users! Remember that the stylesheet file will be downloaded by the client only once, and then loaded from the cache for subsequent requests of pages until it changes on the server. If you define the layout inside the HTML file using tables, the client instead will download the table's layout for every page, and thus it will download more bytes, with the result that downloading the whole page will require a longer time. Typically, a CSS-driven layout can trim the downloaded bytes by up to 50%, and the advantage of this approach becomes immediately evident. Furthermore, this savings has a greater impact on a heavily loaded web server — sending fewer bytes to each user can be multiplied by the number of simultaneous users to determine the total savings on the web server side of the communications.

3· Screen readers, software that can read the text and other content of the page for blind and visually impaired users, have a much more difficult job when tables are used for layout on the page. Therefore, by using a table-free layout, you can increase the accessibility of the site. This is a very important requisite for certain categories of sites, such as those for public administration and government agencies. Few companies are willing to write off entire groups of users over simple matters like this.

4· CSS styles and DIVs provide greater flexibility than tables. You can, for example, have different stylesheet files that define different appearances and positions for the various objects on the page. By switching the linked stylesheet, you can completely change the appearance of the page, without changing anything in the content pages themselves. With dynamic ASP.NET pages, you can even change the stylesheet at run time, and thus easily implement a mechanism that enables end users to choose the styles they prefer. And it's not just a matter of colors and fonts — you can also specify positions for objects in CSS files, and thus have a file that places the menu box on the upper-left corner of the page, and another one that puts it on the bottom-right corner. Because we want to allow users to pick their favorite styles from a list of available themes, this is a particularly important point.

5· CSS enables you to target different classes of devices in some cases without requiring new HTML markup, such as mobile devices like PDAs or smartphones. Due to their constrained screen size, it is necessary to adapt the output for them, so that the content fits the small screen well and is easily readable. You can do this with a specific stylesheet that changes the size and position of some containers (placing them one under the other, rather than in vertical columns), or hide them completely. For example, you might hide the container for the banners, polls, and the header with a big logo. Try to do this if you use tables — it will be much more difficult. You'll have to think about a custom skinning mechanism, and you'll need to write separate pages that define the different layouts available. This is much more work than just writing a new CSS file.

Note : Note that the discussion above referred to the use of tables for the site's overall layout. However, using tables is acceptable to create input forms with a tabular structure, because otherwise too much CSS code would be required in that case to be easy writable and maintainable. It's also not very likely that you'll need to dynamically change the layout of the input form, so you don't need all the flexibility of CSS for that, and using HTML tables is more immediate.

[jaza_sa]

و اما مشکل اصلی طراحان کار با DIV هاست
و چون تنظیم DIV کمی سخت تر از Table است بیشتر ترجیح می دهند که از آن استفاده نکنند

من در این مثال سعی کردم تا این مشکل رو با استفاده از یک مثال ساده برطرف کنم
تمامی این مشکلات ، با بازی کردن با چند خصوصیت ساده از CSS برطرف میشه که بطور خلاصه توضیح میدم

float : با استفاده از این خصوصیت میتونید تنظیم کنید که DIV مربوطه در کدام سمت صفحه قرار بگیره right , left و ...

position : موقیعت شیء رو تنظیم میکنه : absolute , fixed , relative , static

left , right , top , bottom : فاصله شیء رو از کناره های صفحه مشخص میکنه

امیدوارم که بتونید روز به روز ، طراحی های بهتر و قوی تری انجام بدید :چشمک:

[Alen]

با تشكر ،واقعا مقاله جالب و روشنگرانه اي ارائه داديد.
فقط يك سوال براي من پيش اومده كه اگر جواب بديد بي نهايت متشكر خواهم شد.
آيا يك چنين چيزي (صفحه اي كه ضميمه كرده ام) نيز با تگ <div> قبل پياده سازي است يا براي طراحي آن بايد همچنان از جداول استفاده كنم.
يك توضيح اضافي:فرض كنيد ارتفاع ثابت نيست . به عنوان مثال فرض كنيد يك چنين چيزي در يك MasterPage طراحي شده و در صفحات مختلف محتوياتي كه در اين مثال براي نظر سنجي به كار رفته متفاوت خواهد بود .

[jaza_sa]

سلام

از اینکه این سوال رو پرسیدید خیلی ممنونم
اما نکته ای که باید ابه اون دقت کنید اینه که

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

ولی در این مثالی که شما ذکر کردید (فایل ضمیمه) بهتره که از DIV استفاده بشه
چون اطلاعات نمایش داده شده ساختار جدولی ندارند

موفق باشید ، سعی میکنم این مثال رو براتون با استفاده از DIV پیاده سازی کنم

[Alen]

مرسي واقعا ممنونم ، خودمم سعي ام رو مي كنم پياده سازيش كنم اگه تونستم . بازم ممنون
---------------------------------------------------------
به کمک دوستان کاری رو که می خواستم انجام دادم میتونید از این تایپیک مثال مربوطه رو بگیرید
http://barnamenevis.org/forum/showthread.php?t=116200

[jaza_sa]

سلام به همه دوستان
در این مثال ،
صفحه اول سایت ، با استفاده از تگ های DIV پیاده سازی شده
امید وارم که مفید واقع بشه :چشمک:

** مثال ها بروز شد **

[cyber_world]

سلام. مقاله اي كه گذاشتيد، بسيار مفيد بود و سوالي رو در ذهن من ايجاد كرد:
مطلبي كه فرموديد راجع به طراحي قالب سايت بود. آيا اين در مورد صفحه ي Gmail Calendar (تقويم جي ميل) هم صدق مي كنه؟
من كه source تقويم جي ميل رو نگاه كردم، به نظر مي رسه از table استفاده نكرده !!! ممكنه راهنماييم كنيد؟!!
ضمنا يك سوال ديگه هم داشتم، چه طور مي تونم مثل تقويم جي ميل tab control قرار بدم(براي day, week, month) ؟ (بطور كلي من ميخوام يك تقويم مثل تقويم جي ميل طراحي كنم )
متشكرم

[jaza_sa]

سلام. مقاله اي كه گذاشتيد، بسيار مفيد بود و سوالي رو در ذهن من ايجاد كرد:
مطلبي كه فرموديد راجع به طراحي قالب سايت بود. آيا اين در مورد صفحه ي Gmail Calendar (تقويم جي ميل) هم صدق مي كنه؟
من كه source تقويم جي ميل رو نگاه كردم، به نظر مي رسه از table استفاده نكرده !!! ممكنه راهنماييم كنيد؟!!
ضمنا يك سوال ديگه هم داشتم، چه طور مي تونم مثل تقويم جي ميل tab control قرار بدم(براي day, week, month) ؟ (بطور كلي من ميخوام يك تقويم مثل تقويم جي ميل طراحي كنم )
متشكرم

سلام دوست عزیز
در اکثر بخش های Google ، ایجکس به کار رفته شده و این اولین نکته ای هست که باید بدونید
دومین مسئله اینه که در این بخش ها ترکیبی از Table , Div استفاده شده ، به نحوی که Table ها درون Div ها قرار گرفته اند و با این عمل زیرکانه ، طراح هم به خصوصیات و انعطاف پذیری های Div دسترسی داره و هم به خصوصیات Table
و ساده ترین کاری که در بخش Calender انجام میشه اینکه ، وقتی کاربر روی یک لینک یا دکمه کلیک میکنه ، بخشی از صفحه از دید کاربر مخفی میشه و بخش دیگه ای ظاهر میشه . و اینکار رو هم میشه با JavaScript انجام داد ، فقط کافیه اون عنصر رو پیدا کنید و خصوصیت display اونو برابر none یا block قرار بدید که البته منم در این مثال بالا از این خصوصیت استفاده کرم

[mehrzad007]

ده دليل براي براي يادگيري و استفاده از استانداردهاي وب (http://www.toofani.net/archive/2005/12/27/10-reasons-to-learn-and-use-web-standandards-article.aspx)

چرا استفاده از جدول برای طرح‌بندی صفحات وب احمقانه است (http://www.toofani.net/stupidtables/)

با تشكر از شاهو طوفاني (http://shaho.info/)

[impression]

سلام
با تشکر فراوان از کاربر گرامی jaza_sa به خاطر مطالب مفیدشون.
دوستان من تا حالا فکر می‌کردم اگر از table استفاده نکنم، با تغییر تعداد و سایز pixel‌های صفحه، نظم صفحه به هم می‌خورد و کاربران مختلف با مانیتورهای گوناگون صفحه‌ی من را درست نمی‌بینند. حالا که شما این مطلب را نوشتید می‌شه لطفا توضیح بدهید که برای رع این مشکل چه جوری می‌شه از div‌ استفاده کرد؟ به علاوه لطفا توضیح بدهید که استفاده از table‌ چه تناقضی با css داره.
ببخشید شاید سوالاتم احمقانه به نظر بیاد ولی من خیلی مبتدی هستم. لطفا یه جوری توضیح بدهید که بفهمم.
با تشکر

[jaza_sa]

سلام
با تشکر فراوان از کاربر گرامی jaza_sa به خاطر مطالب مفیدشون.
دوستان من تا حالا فکر می‌کردم اگر از table استفاده نکنم، با تغییر تعداد و سایز pixel‌های صفحه، نظم صفحه به هم می‌خورد و کاربران مختلف با مانیتورهای گوناگون صفحه‌ی من را درست نمی‌بینند. حالا که شما این مطلب را نوشتید می‌شه لطفا توضیح بدهید که برای رفع این مشکل چه جوری می‌شه از div‌ استفاده کرد؟ به علاوه لطفا توضیح بدهید که استفاده از table‌ چه تناقضی با css داره.
ببخشید شاید سوالاتم احمقانه به نظر بیاد ولی من خیلی مبتدی هستم. لطفا یه جوری توضیح بدهید که بفهمم.
با تشکر
اگر دقت کنید در مثالهای بالا مشکل تغیر اندازه مرورگر ، مشکلی در صفحه بوجود نمیاره
و خیلی از سایت ها دیگه از Table استفاده نمیکنن و صفحات خودشون رو با Div طراحی میکنند
تنها کاری که شما باید انجام بدید اینه که ، به سایتهایی که طراحی اونا با استفاده از Div هست مراجع کنید و از اونا الهام بگیرید و در طراحی خودتون از اونا کمک بگیرید
درضمن Table و CSS هیچ تناقضی باهم ندارن ،
نکته ای که در این مقاله به اون اشاره شد این بود که در هنگام استفاده از Table ، ممکنه چندین برابر بیشتر از CSS استفاده کنیم تا زمان استفاده از Div و همچنین موارد دیگه ای که در مطالب بالا به آنها پرداخته شد

امید وارم تونسته باشم به سوالتون پاسخ داده باشم
موفق باشید

[jaza_sa]

نمونه بیشتر برای دانلود بزارید لطفا!
ممنون!
میشه بگید دقیقا چه نمونه ای میخواید ؟
میتونید نمونه های بیشتر (بینهایت) رو تو وب سایت ها ببینید ، بدون هیچگونه محدودیت ...

[mamaligh67]

طراحی قالب با دایو دردسرهای زیادی داره. بله میشه قالب خوب و حرفه ای ایجاد کردو لی با کلی زحمت و دردسر. 1-در مرور گرهای مختلف خیلی فرق دارند. 2- با رزولوشن های متفاوت بسیار دردسر ساز است. 3-با کوچک و بزرگ شدن مرورگر هیچ تضمینی نیست دایوها سرجای خود بمانند حتی اگه درست تنظیم کنی بر روی یکدیگر تاثیر میگذارند.4-برای جی کوئری نوشتن به دردسر میفتین مخصوصا واسه منوهای کشویی.
نکته: همه اینها رو میشه رفع کرد ولی جدول ساختار مشخصی داره و خیالت راحته. دایوها بیشتر برای سایتهای خیلی پویا و گرافیکی خوبه که کلی دردسر داره

[پیام حیاتی]

طراحی قالب با دایو دردسرهای زیادی داره. بله میشه قالب خوب و حرفه ای ایجاد کردو لی با کلی زحمت و دردسر. 1-در مرور گرهای مختلف خیلی فرق دارند. 2- با رزولوشن های متفاوت بسیار دردسر ساز است. 3-با کوچک و بزرگ شدن مرورگر هیچ تضمینی نیست دایوها سرجای خود بمانند حتی اگه درست تنظیم کنی بر روی یکدیگر تاثیر میگذارند.4-برای جی کوئری نوشتن به دردسر میفتین مخصوصا واسه منوهای کشویی.
نکته: همه اینها رو میشه رفع کرد ولی جدول ساختار مشخصی داره و خیالت راحته. دایوها بیشتر برای سایتهای خیلی پویا و گرافیکی خوبه که کلی دردسر داره

به تاریخ تایپیک دقت کردید؟!!!
ضعف شما در کد نویسی این دلایل را برای استفاده از table به جای div در ذهنتون بوجود آورده.