سلام خدمت تمامی دوستان طراح
در این ترجمه سعی شده تا مزایای استفاده از DIV ها ، نسبت به Table ها در طراحی سایت بیان بشه .
به هر حال اگر ایرادی ، نقصی چیزی هست به بزرگی خودتون ببخشید
گاهی اوقات طراحان سایت برای کنترل مکان اشیاء در صفحات وب از جدول استفاده می کنند .
این روش قبل از بوجود آمدن CSS مناسب بود ، ولی بعضی از طراحان هنوز هم از این روش استفاده می کنند .
اگرچه این کار بسیار متداول است ، ولی W3C به طور رسمی (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 ندارید و بجای آن استفاده از جداول مناسب تر است .
در این ترجمه سعی شده تا مزایای استفاده از DIV ها ، نسبت به Table ها در طراحی سایت بیان بشه .
به هر حال اگر ایرادی ، نقصی چیزی هست به بزرگی خودتون ببخشید
گاهی اوقات طراحان سایت برای کنترل مکان اشیاء در صفحات وب از جدول استفاده می کنند .
این روش قبل از بوجود آمدن CSS مناسب بود ، ولی بعضی از طراحان هنوز هم از این روش استفاده می کنند .
اگرچه این کار بسیار متداول است ، ولی W3C به طور رسمی (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 ندارید و بجای آن استفاده از جداول مناسب تر است .
آخرین ویرایش:
