الطريق إلى تصاميم خالية من الجداول

ADMIN · 02-02-2007, 11:05 صباحاً

السلام عليكم ورحمة الله تعالى وبركاته، وبعد

وسم <table> أو الجدول يكاد يكون الوسم الأكثر استخداما لتخطيط مواقعنا بالشكل الذي يراه المصمم مناسبا، ولكن منذ أن ظهرت منظمات كـمنظمة مشروع معايير الويب WaSP، وظهور متصفحات كـالفايرفوكس، بدأ مصممو صفحات الويب بالاتجاه نحو صفحات تتبع نظم ولوائح ومعايير منظمة الويب العالمية والوصول إلى تصاميم تعتمد على معاييير الXHTML مع الCSS خالية من الجداول.
مثال للجدول
عندما ظهرت الجداول في لغة الHTML ظهرت لسبب واحد، ألا وهو لجدولة البيانات، أي لإظهار بيانات كالمقارانات أو الجداول أو الرسوم البيانية على شكل جدول، ولكن مع ظهور خاصية border=0 التي تتيح إخفاء حدود الجداول قام المصممون باستخدامها لتخطيط المواقع وإداج الصور والخ...

حسنا، ما المشكلة في استخدام هذه الجداول لخطيط الموقع؟

هي ليست مشكلة واحدة عزيزي القارئ، بل هي مشاكل عديدة سأسرد الأهم منها:

الجداول بطيئة

في أغلب متصفحات الويب في الوقت الحالي، إذا لم تقم بتعريف عرض الجدول عند التصميم، فإن المتصفح سيتوجب عليه تحميل جميع الصور والنصوص الموجودة داخل الجدول قبل أن يستطيع عرضها على الزائر، حتى لو استخدمت الCSS في هذه الجداول فالمشكلة لا تزال قائمة حيث أنك لم تقم بتعريف عرض الجدول، والمشكلة تكبر مع استخدامك للجداول المتفرعة، أي جدول داخل جدول داخل جدول وهكذا، وهذا يسبب الكثير من البطء في موقعك.
توافق الXHTML

ببساطة إذا كنت تستخدم الجداول في تصميم الصفحة فإنك تخالف معايير XHTML والسبب في ذلك كما ذكرت آنفا أن الجداول أنشئت لعرض البيانات المجدولة tablular data كالصورة التي أرفقتها فوق أي كالبيانات التي تستخلص في العادة من برامج قواعد البيانات وما يشابهها.
الجداول تكون خدّاعة

لقد سمعت الكثير الكثير من الشكاوي حول عدم ظهور بعض المواقع بالشكل الصحيح مع هذا المتصفح ولكنها تظهر بالشكل الصحيح مع المتصفح الآخر. والسبب في بعض الأحيان يكون أن المصمم قد نسي إغلاق وسم هنا أو هناك في هذه الجداول وحتى عند التأكد من عدم وجود مشاكل مع الوسوم فإن المشكلة الأكبر هي عند الإنتهاء من التصميم يصبح تخطيط الصفحة كبير ومعقد جدا حتى يصعب عليك التعديل عليه في المستقبل، وفي بعض الأحيان لن يكون عندك خيار آخر إلا تصميم الصفحة من جديد وتخسر بذلك الوقت والجهد الكثير، وكان بإمكانك الإستعاضة عنها باستخدام الCSS وعندما تريد التعديل فإنك تعدل على ملف الCSS الخاص بالموقع واضافة وسم div هنا أو هناك وتوفر عليك الوقت والجهد.
مشاكل الطباعة

أنا متأكد إنك في بعض الأحيان عندما تريد أن تطبع صفحة من موقع مصمم بالجداول فستجد أجزاء من الصفحة لا تظهر في الطباعة وستجد هذه الأجزاء المقطوعة تطبع في صفحات منفصلة مما يسبب الكثير من الصداع للمستخدم، ولكن عندما تستخدم الCSS في تصميمك فبإمكانك تصميم مخطط لصفحتك فقط للطباعة، أي عندما يريد الزائر طباعة صفحة من موقعك فالمتصفح يقوم باستدعاء ملف التخطيط الخاص بالطباعة وإظهار الأجزاء التي تريد أن تظهرها في الصفحة وإخفاء الأجزاء الغير مهمه، ولقراءة المزيد عن تخطيط الطباعة للصفحة باستخدام الCSS.
قابلية الموقع

المتصفحات النصية (ومنها محركات البحث) ومتصفحات الجيب أو الهواتف الخليوية تعاني كثيرا من تصاميم الجداول، ولا تستطيع قرائتها بالشكل الصحيح، في الواقع فإن منظمة الويب العالمية وفي مقالها لنصائح تصميم الصفحات فأنها تقول "لا تستخدموا الجداول في التصميم" حيث بتصميمك لصفحتك باستخدام الCSS بإمكانك تصميم التخطيط المناسب للمتصفح، سواء كان متصفح جيب أو متصفح الشاشة أو حتى المتصفح العادي للحاسب.
الكفاءة

المواقع المصممة باستخدام الCSS تقدم الكثير من المرونة للمستخدم والمصمم، حيث ليس فقط بإمكان الصمم التعديل على التصميم الكامل للصفحة بتعديل ملف واحد فقط، ولكن أيضا توفير تصاميم بديلة للموقع لاختيارها من قبل المستخدم.

أمثلة لتصاميم جاهزة بدون جداول

فكر بالمستقبل

التوجه الحالي للمتصفحات والمنظمة العالمية للويب يذهب إلى تصاميم تقوم على XHTML مع توافق الCSS حيث أن من المهم عزيزي المصمم أن تفهم وتفرق بين التصميم والمحتوى، فعندما تريد التعديل على التصميم تذهب إلى ملف التصميم، وعندما تريد التعديل على المحتوى تذهب إلى المحتوى، وبهذا يكون موقعك مرتب ومرن. "اكتب مرة، استخدم في أي مكان، لكل الأشخاص" موقعك باستخدام الCSS سيكون قابل للتصفح من أي جهاز و في كل مكان.

المراجع

هذا وصلى الله على محمد وعلى آله وصحبه وسلم،
مع تحياتي،

حقوق الدرس للكاتب عبدالرحمن العتيبة

n.a.r.u.t.o · 02-07-2007, 02:05 مساءً

يعطيك العافية على الدرس حبيبي

لكن اعتقد الجداول عمليتها اسهل

والا اظطر الشخص تعلم css

ADMIN · 02-07-2007, 02:09 مساءً

السي اس اس افضل تقنياً

وتقاس على مستوى اخترافي وتوفر حجم كبير في الصفحه والتمبلتات اذا كنت تستخدم هذا النظام

n.a.r.u.t.o · 02-07-2007, 02:15 مساءً

بصراحة انا تعلمت الـ html وشويه من الدرس الي حطيته

والحينه احاول اتقن الـ php

Mr Nigga · 02-08-2007, 01:45 مساءً

موضوع ولا اروع واستفدت منو كثـير

وعنـدي سؤال شاغل بالي اليومين هذي يا ادمن اذا امكنك مساعدتي

اذا كنت اريد ان تصميم موقع يصبح بي اتش بي

بدلا عن اتش ام أل

لاني كما علمت وكما اشاهد ان البي اتش بي اخف

ولكـن ما هيا الطرق الصحيحه لهذا النوع من الديزاين وما طريقتـه ؟

ومشكور مجددا

ADMIN · 02-08-2007, 02:13 مساءً

التمبلتات

حاول تعتمد على التمبلتات

محمد يوسف · 03-06-2007, 10:46 مساءً

والله يا اخى ادمن اتمنى انك تمدنا بثل هذه الدورس لانى بحاجة اليها

وهذا الدرس سوف يفيدنى الكثير

بارك الله فيك

Dark Eyes · 08-18-2007, 02:30 صباحاً

حياك ربي يا ادمن

والله انا معلوماتي قليله عن معظم لغات البرمجه

لكن على حسب ما فهمت بالموضوع

وحسب الامثله الموجوده

ان صعب اننا نطبق الكلام هذا على منتدى مثلا او على موقع كبير

يعني مثلا لو افترضنا ان رئيسية مجلة ابن الخليج بلغة اتش تي ام ال

صعب اننا نسوي مثلها بال Css

ياريت لو غلطان تصححولي

يسلموووووووووووو يالغاليين

02-02-2007, 11:05 صباحاً	#1 (permalink)
ADMIN .::+: Gulf Son :+::. تاريخ التسجيل: May 2005 الدولة: بلاد الخليج المشاركات: 48,123 معدل تقييم المستوى: 53	الطريق إلى تصاميم خالية من الجداول السلام عليكم ورحمة الله تعالى وبركاته، وبعد وسم <table> أو الجدول يكاد يكون الوسم الأكثر استخداما لتخطيط مواقعنا بالشكل الذي يراه المصمم مناسبا، ولكن منذ أن ظهرت منظمات كـمنظمة مشروع معايير الويب WaSP، وظهور متصفحات كـالفايرفوكس، بدأ مصممو صفحات الويب بالاتجاه نحو صفحات تتبع نظم ولوائح ومعايير منظمة الويب العالمية والوصول إلى تصاميم تعتمد على معاييير الXHTML مع الCSS خالية من الجداول. مثال للجدول عندما ظهرت الجداول في لغة الHTML ظهرت لسبب واحد، ألا وهو لجدولة البيانات، أي لإظهار بيانات كالمقارانات أو الجداول أو الرسوم البيانية على شكل جدول، ولكن مع ظهور خاصية border=0 التي تتيح إخفاء حدود الجداول قام المصممون باستخدامها لتخطيط المواقع وإداج الصور والخ... حسنا، ما المشكلة في استخدام هذه الجداول لخطيط الموقع؟ هي ليست مشكلة واحدة عزيزي القارئ، بل هي مشاكل عديدة سأسرد الأهم منها: الجداول بطيئة في أغلب متصفحات الويب في الوقت الحالي، إذا لم تقم بتعريف عرض الجدول عند التصميم، فإن المتصفح سيتوجب عليه تحميل جميع الصور والنصوص الموجودة داخل الجدول قبل أن يستطيع عرضها على الزائر، حتى لو استخدمت الCSS في هذه الجداول فالمشكلة لا تزال قائمة حيث أنك لم تقم بتعريف عرض الجدول، والمشكلة تكبر مع استخدامك للجداول المتفرعة، أي جدول داخل جدول داخل جدول وهكذا، وهذا يسبب الكثير من البطء في موقعك. توافق الXHTML ببساطة إذا كنت تستخدم الجداول في تصميم الصفحة فإنك تخالف معايير XHTML والسبب في ذلك كما ذكرت آنفا أن الجداول أنشئت لعرض البيانات المجدولة tablular data كالصورة التي أرفقتها فوق أي كالبيانات التي تستخلص في العادة من برامج قواعد البيانات وما يشابهها. الجداول تكون خدّاعة لقد سمعت الكثير الكثير من الشكاوي حول عدم ظهور بعض المواقع بالشكل الصحيح مع هذا المتصفح ولكنها تظهر بالشكل الصحيح مع المتصفح الآخر. والسبب في بعض الأحيان يكون أن المصمم قد نسي إغلاق وسم هنا أو هناك في هذه الجداول وحتى عند التأكد من عدم وجود مشاكل مع الوسوم فإن المشكلة الأكبر هي عند الإنتهاء من التصميم يصبح تخطيط الصفحة كبير ومعقد جدا حتى يصعب عليك التعديل عليه في المستقبل، وفي بعض الأحيان لن يكون عندك خيار آخر إلا تصميم الصفحة من جديد وتخسر بذلك الوقت والجهد الكثير، وكان بإمكانك الإستعاضة عنها باستخدام الCSS وعندما تريد التعديل فإنك تعدل على ملف الCSS الخاص بالموقع واضافة وسم div هنا أو هناك وتوفر عليك الوقت والجهد. مشاكل الطباعة أنا متأكد إنك في بعض الأحيان عندما تريد أن تطبع صفحة من موقع مصمم بالجداول فستجد أجزاء من الصفحة لا تظهر في الطباعة وستجد هذه الأجزاء المقطوعة تطبع في صفحات منفصلة مما يسبب الكثير من الصداع للمستخدم، ولكن عندما تستخدم الCSS في تصميمك فبإمكانك تصميم مخطط لصفحتك فقط للطباعة، أي عندما يريد الزائر طباعة صفحة من موقعك فالمتصفح يقوم باستدعاء ملف التخطيط الخاص بالطباعة وإظهار الأجزاء التي تريد أن تظهرها في الصفحة وإخفاء الأجزاء الغير مهمه، ولقراءة المزيد عن تخطيط الطباعة للصفحة باستخدام الCSS. قابلية الموقع المتصفحات النصية (ومنها محركات البحث) ومتصفحات الجيب أو الهواتف الخليوية تعاني كثيرا من تصاميم الجداول، ولا تستطيع قرائتها بالشكل الصحيح، في الواقع فإن منظمة الويب العالمية وفي مقالها لنصائح تصميم الصفحات فأنها تقول "لا تستخدموا الجداول في التصميم" حيث بتصميمك لصفحتك باستخدام الCSS بإمكانك تصميم التخطيط المناسب للمتصفح، سواء كان متصفح جيب أو متصفح الشاشة أو حتى المتصفح العادي للحاسب. الكفاءة المواقع المصممة باستخدام الCSS تقدم الكثير من المرونة للمستخدم والمصمم، حيث ليس فقط بإمكان الصمم التعديل على التصميم الكامل للصفحة بتعديل ملف واحد فقط، ولكن أيضا توفير تصاميم بديلة للموقع لاختيارها من قبل المستخدم. أمثلة لتصاميم جاهزة بدون جداول مثال لصفحة ب3 أعمدة لمنظمة الويب العالمية أمثلة 1 أمثلة 2 أمثلة 3 فكر بالمستقبل التوجه الحالي للمتصفحات والمنظمة العالمية للويب يذهب إلى تصاميم تقوم على XHTML مع توافق الCSS حيث أن من المهم عزيزي المصمم أن تفهم وتفرق بين التصميم والمحتوى، فعندما تريد التعديل على التصميم تذهب إلى ملف التصميم، وعندما تريد التعديل على المحتوى تذهب إلى المحتوى، وبهذا يكون موقعك مرتب ومرن. "اكتب مرة، استخدم في أي مكان، لكل الأشخاص" موقعك باستخدام الCSS سيكون قابل للتصفح من أي جهاز و في كل مكان. المراجع http://davespicks.com/essays/notables.html http://www.hotdesign.com/seybold/09redesigns.html http://www.saila.com/usage/layouts/cssvtables.shtml http://webdesign.about.com/od/layout/a/aa111102a.htm هذا وصلى الله على محمد وعلى آله وصحبه وسلم، مع تحياتي، حقوق الدرس للكاتب عبدالرحمن العتيبة من مواضيع ADMIN في المنتدى [مبتدء] درس عمل نص ثلاثي الابعاد مناظرة في مسمى الإيمان والكفر [الشيخ محمد الفزازي] برنامج مقاسات التصميم رساءل للجوال روعه العله من تحريم اكل لحم الخنزير __________________ يقول الامام مالك رحمه الله: إنما هؤلاء أقوام أرادوا القدح في النبي صلى الله عليه وسلم فلم يمكنهم ذلك، فقدحوا في أصحابه حتى يقال رجل سوء ولو كان رجلاً صالحاً لكان أصحابه صالحين. وقال أبو الوفا بن عقيل رحمه الله: انظر كيف اختار لمرضه بيت البنت، واختار لموضعه من الصلاة الأب، فما هذه الغفلة المستحوذة على قلوب الرافضة عن هذا الفضل والمنزلة التي لا تكاد تخفى عن البهيم فضلا عن الناطق. <a rel="nofollow" href="http://www.dartmediakuwait.com/adclick.php?n=a85a316d" target="_new"><img src="http://www.dartmediakuwait.com/adview.php?what=zone:107&source=MP3Q8&n=a85a316d" border="0" alt=""></a>

02-07-2007, 02:05 مساءً	#2 (permalink)
n.a.r.u.t.o :: الإدارة :: تاريخ التسجيل: Apr 2006 الدولة: U ( R a K ) E المشاركات: 10,470 معدل تقييم المستوى: 53	رد: الطريق إلى تصاميم خالية من الجداول يعطيك العافية على الدرس حبيبي لكن اعتقد الجداول عمليتها اسهل والا اظطر الشخص تعلم css من مواضيع n.a.r.u.t.o في المنتدى [PC] لعبة Neighbors From Hell 2 20 أيقونة مشاركة للمنتديات (( مع أمثله )) [PC] لعبة القتال Power Rangers الصندوق السحري [icons] عدد 120 أيقونة عالية الجودة بحجم موحد __________________ ::The Umbrella Corporation:: Yes, I am proud to be muslim, arabi, emirate, khaymawe

02-07-2007, 02:09 مساءً	#3 (permalink)
ADMIN .::+: Gulf Son :+::. تاريخ التسجيل: May 2005 الدولة: بلاد الخليج المشاركات: 48,123 معدل تقييم المستوى: 53	رد: الطريق إلى تصاميم خالية من الجداول السي اس اس افضل تقنياً وتقاس على مستوى اخترافي وتوفر حجم كبير في الصفحه والتمبلتات اذا كنت تستخدم هذا النظام من مواضيع ADMIN في المنتدى متطرفون يلقون برأس خنزير مكتوب عليه اسم النبي الكريم في مسجد بيافا (صوره) شرح طريقة انصهار الأجسام 3D Studio Max مائة قاعدة تعين على ضبط النحو ومعرفة الإعراب [متقدم] درس تصميم موقع من الألف الى الياء Disc4You CDRWIN 6.1 __________________ يقول الامام مالك رحمه الله: إنما هؤلاء أقوام أرادوا القدح في النبي صلى الله عليه وسلم فلم يمكنهم ذلك، فقدحوا في أصحابه حتى يقال رجل سوء ولو كان رجلاً صالحاً لكان أصحابه صالحين. وقال أبو الوفا بن عقيل رحمه الله: انظر كيف اختار لمرضه بيت البنت، واختار لموضعه من الصلاة الأب، فما هذه الغفلة المستحوذة على قلوب الرافضة عن هذا الفضل والمنزلة التي لا تكاد تخفى عن البهيم فضلا عن الناطق.

02-07-2007, 02:15 مساءً	#4 (permalink)
n.a.r.u.t.o :: الإدارة :: تاريخ التسجيل: Apr 2006 الدولة: U ( R a K ) E المشاركات: 10,470 معدل تقييم المستوى: 53	رد: الطريق إلى تصاميم خالية من الجداول بصراحة انا تعلمت الـ html وشويه من الدرس الي حطيته والحينه احاول اتقن الـ php من مواضيع n.a.r.u.t.o في المنتدى [PC] لعبة Master of Defense [Hack] تنبيه صوتي عندما تصلك رسالة خاصة, تعليق ... ألخ الفلم المقتبس من قصة حقيقة Gone Baby Gone 2007 [PS2] لعبة Heroes of Might and Magic [product] تحديد عدد المواضيع للزوار __________________ ::The Umbrella Corporation:: Yes, I am proud to be muslim, arabi, emirate, khaymawe

02-08-2007, 01:45 مساءً	#5 (permalink)
Mr Nigga :: مراقب قسم القرافيكس :: تاريخ التسجيل: May 2006 الدولة: ابن الخليج المشاركات: 1,458 معدل تقييم المستوى: 57411	رد: الطريق إلى تصاميم خالية من الجداول موضوع ولا اروع واستفدت منو كثـير وعنـدي سؤال شاغل بالي اليومين هذي يا ادمن اذا امكنك مساعدتي اذا كنت اريد ان تصميم موقع يصبح بي اتش بي بدلا عن اتش ام أل لاني كما علمت وكما اشاهد ان البي اتش بي اخف ولكـن ما هيا الطرق الصحيحه لهذا النوع من الديزاين وما طريقتـه ؟ ومشكور مجددا من مواضيع Mr Nigga في المنتدى كبر مجموعة من الشعارات مفتوحة المصدر إدراج ملف الفلاش في صفحة ويب درس القلوب المتموجـه عالمي الخاص اكتـب بالدم وارسلها لصديق ... مره حلوه __________________ أوشكــت أيـــامي على الإنتـــهـــــــاء .....!

الطريق إلى تصاميم خالية من الجداول

منتديات شبكة ابن الخليج

اكثر الكلمات بحثاً

	Sitemap \| Archive \| Tag Could
	$معهد مطور - ينتهي الإعلان بتاريخ 6\11\2008$

02-08-2007, 02:13 مساءً	#6 (permalink)
ADMIN .::+: Gulf Son :+::. تاريخ التسجيل: May 2005 الدولة: بلاد الخليج المشاركات: 48,123 معدل تقييم المستوى: 53	رد: الطريق إلى تصاميم خالية من الجداول التمبلتات حاول تعتمد على التمبلتات من مواضيع ADMIN في المنتدى برنامج لحفظ اي فلاش وسهل الاستعمال الأمومة كود المفضله بشكل متقن ورائع Eclipse 2007 سعودي يصمم حاضناً يرفع نسبة حماية الطائرة 100% عند الهبوط الاضطراري __________________ يقول الامام مالك رحمه الله: إنما هؤلاء أقوام أرادوا القدح في النبي صلى الله عليه وسلم فلم يمكنهم ذلك، فقدحوا في أصحابه حتى يقال رجل سوء ولو كان رجلاً صالحاً لكان أصحابه صالحين. وقال أبو الوفا بن عقيل رحمه الله: انظر كيف اختار لمرضه بيت البنت، واختار لموضعه من الصلاة الأب، فما هذه الغفلة المستحوذة على قلوب الرافضة عن هذا الفضل والمنزلة التي لا تكاد تخفى عن البهيم فضلا عن الناطق.

03-06-2007, 10:46 مساءً	#7 (permalink)
محمد يوسف عضو متميز تاريخ التسجيل: Sep 2006 المشاركات: 258 معدل تقييم المستوى: 1109	رد: الطريق إلى تصاميم خالية من الجداول والله يا اخى ادمن اتمنى انك تمدنا بثل هذه الدورس لانى بحاجة اليها وهذا الدرس سوف يفيدنى الكثير بارك الله فيك من مواضيع محمد يوسف في المنتدى [module][All] موسوعة الوطن العربى شرح تركيب السيرفر الشخصى (خادم الجمل) وثبيت منتدى عليه استفسار بسيط دورة احتراف تركيب منتدى vbومجلةMKPortal على مساحة مجانية [module][All] ترجمة المواقع والنصوص __________________ تخيل التعليق

08-18-2007, 02:30 صباحاً	#8 (permalink)
Dark Eyes عضــو تاريخ التسجيل: Aug 2007 المشاركات: 13 معدل تقييم المستوى: 9	رد: الطريق إلى تصاميم خالية من الجداول حياك ربي يا ادمن والله انا معلوماتي قليله عن معظم لغات البرمجه لكن على حسب ما فهمت بالموضوع وحسب الامثله الموجوده ان صعب اننا نطبق الكلام هذا على منتدى مثلا او على موقع كبير يعني مثلا لو افترضنا ان رئيسية مجلة ابن الخليج بلغة اتش تي ام ال صعب اننا نسوي مثلها بال Css ياريت لو غلطان تصححولي يسلموووووووووووو يالغاليين من مواضيع Dark Eyes في المنتدى [متوسط] درس طريقة عمل النص البلاستيكي بإحتراف ... شرح فيديو

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

أدوات الموضوع
عرض نسخة صالحة للطباعة أرسل هذا الموضوع إلى صديق
طرق مشاهدة الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
مواضيع مكذوبة ?!!	الصعيدي المشاغب	حوارات ثقافية عامة	6	12-25-2006 03:29 مساءً
قواعد في أدلة الأسماء والصفات	ADMIN	حوارات ثقافية عامة	2	06-30-2006 03:30 مساءً
سورة البقرة رقم 2 ( مدنية )	رنين	حوارات ثقافية عامة	3	05-19-2006 01:27 صباحاً
رسالة محمد مكاوي- الرجل الثالث في تنظيم القاعدة- حول أبو مصعب الزرقاوي	ADMIN	حوارات ثقافية عامة	4	02-21-2006 09:39 صباحاً
زعموا انهم وجددوا خطا في القرآن ولم يرد مسلم !!	الهوى ماهو كلام	حوارات ثقافية عامة	12	01-21-2006 10:01 صباحاً