من الموضوعات التى تثير نقاشاُ طويلا ولا يتم التوصل فيها لنتيجة ثابتة هو أى طرق التخطيط (Layout types) يفضل إستخدامها عند التفكير فى إنشاء موقع الكترونى ولعل ذلك يعرضنا لماهية طرق التخطيط المتعارف عليها بالنسبة لتصميم مواقع الويب و ما هو تعريف و مميزات و عيوب كل طريقة و يستحق الذكر أن طرق التخطيط المستخدمة فى تصميم المواقع الإلكترونية لها تأثير كبير على قابلية الإستخدام و الوصول و يتضح ذلك بالتعرف على خصائص كل طريقة :

1- التخطيط الثابت (Fixed layout):
هو ان تكون مكونات التصميم لها عرض ثابت باستخدام وحدة قياس مطلقة وليست نسبية ( مثل البكسل و السنتيمتر و الإنش)
المميزات :

• -سهل التطبيق و يمكن المصمم من التحكم بسهولة فى وضع كل عنصر من عناصر الصفحة .
• -نتيجة لتثبيت العرض بوحدة قياس ثابتة فالتصميم يكون ثابت الحجم فى كل المتصفحات و كل الأبعاد مما يقلل إحتمالات حدوث تغييرات يصعب التحكم فيها .

العيوب :

• -لا يتأثر بالتغيير فى أبعاد الشاشة أو تغيير حجم نافذة المتصفح , فعلى سبيل المثال إذا كنت تستخدم لابتوب بأبعاد شاشة شديدة الإتساع فسترى بعض التصميمات الثابتة تبدو بحجم صغير للغاية على شاشتك و ستتعجب لم يضيق المصمم التصميم لهذا الحد و هناك متسع من المساحة !! , و لا يخطر على بالك ان التصميم يظهر سليماُ على أبعاد معينة و يبدو عليها ملائماُ تماماُ , و بالمثل عند إستخدامك للويب من الهاتف المحمول .
• - لا يتأثر بتغيير المستخدم لحجم خط الكتابة , إن فكرت فى تكبير حجم خط الكتابة بضغطك على ( “+” + Ctrl) فسترى ان التصميم لا تتغير أبعادة وفقا لهذا التغيير فى حجم الخط بل وقد يتشوة التصميم بالكامل و تخرج الكتابة من على حدودة

مثال :
Floral Touch .حاول تغيير أبعاد الشاشة و تكبير حجم الخط بالضغط على ( “+” + Ctrl) و راقب التأثير على التصميم .

2- التخطيط السائل أو المتدفق (liquid / fluid layout):

هو ان تكون مكونات التصميم محدد لها العرض بنسبة مئوية (%)من عرض نافذة المتصفح ( أحب ان أفكر بة كما السائل الذى يأخذ شكل الإناء الذى يحتوية ).

المميزات

• هذا التخطيط يستجيب للتغيرات فى أبعاد الشاشة و نافذة المتصفح , فإن قمت باستخدام أبعاد شاشة شديد ة الإتساع ستجد التصميم قد تدفق كما السائل ليناسب هذة الأبعاد الجديدة فلا يعانى المستخدم من أى تغيير يعيقة من استخدام الموقع .

العيوب :

• -لا يستجيب للتغير فى حجم خط الكتابة
• -فى حالة استخدام أبعاد شاشة شديدة الإتساع (بشكل كبير جدا )قد تجد انة نتيجة لتمدد التصميم ليوائم هذة الأبعاد فالكتابة النصية أيضا تمتد لتجد مقاطع الكتابة النصية ممتدة بخط عرضى عريض لدرجة تصعب معة قرائتها (و يمكن التغلب على هذا العيب باستخدام خاصية التنسيق “max-width” والتى تحدد عرضا للعنصر لا يمكن تجاوزة تجنبا لهذة الأبعاد الغريبة .

• -فى حالة إستخدام أبعاد شاشة صغيرة للغاية مثل الهواتف المحمولة أو مثلا تصغير عرض نافذة المتصفح لدرجة كبيرة جدا فسترى ان التصميم السائل قد تدفق ليلائم هذا العرض الضيق الجديد و نتيجة لذلك سيحدث تداخل فى مقاطع الكتابة لدرجة قد يستحيل معها القراءة (و يمكن التغلب على هذا العيب باستخدام خاصية التنسيق “min-width” والتى تحدد حداُ أدنى لعرض العنصر حتى لا ينكمش لعرض غير مرغوب بة يتعارض مع قابلية الإستخدام .

مثال :

JJ Fluid Solution .حاول تغيير أبعاد الشاشة و تكبير حجم الخط بالضغط على ( “+” + Ctrl) و راقب التأثير على التصميم .

3- التخطيط المرن (elastic layout):

و تذكرنى تسميتة بالشخصية الكارتونية ” elastic girl ” فى فيلم الكارتون الشهير “The incredibles” , وهذا التخطيط يشبة لحد كبير التخطيط الثابت فهو يستخدم فى تحديد عرض مكونات الصفحة وحدة قياس ولكنها ليست مطلقة مثل نظيرة الثابت ولكنها نسبية ( مثل em ,ex), وهو لا يستجيب للتغير فى أبعاد الشاشة أو عرض المتصفح ولكنة يستجيب على خلاف ذلك لتغيير حجم خط الكتابة

المميزات :

• -يستجيب للتغير فى حجم خط الكتابة فلو قمت بالضغط على ( “+” + Ctrl) ستجد التصميم قد امتد فى مرونة ليلائم هذا الحجم الجديد للخط .

العيوب:

• لا يستجيب للتغير فى أبعاد الشاشة ولا عرض نافذة المتصفح.

مثال :

Elastic Lawn .حاول تغيير أبعاد الشاشة و تكبير حجم الخط بالضغط على( “+” + Ctrl) و راقب التأثير على التصميم .

4-التخطيط المختلط أو الهجين (Hyprid layout) :
وهو مزيج من بعض أو كل طرق التخطيط السابقة فمثلاُ من الممكن أن يكون التخطيط العام للتصميم سائل و لكن القوائم الجانبية تتبع التخطيط الثابت و ذلك بكون عرضها ثابت القياس .

• و يتضح من عرض هذة الطرق المختلفة للتخطيط انة من الصعب ان نخرج بطريقة واحدة لتكون هى المثلى , بل لكل طريقة مميزات و عيوب و يجب أن يكون الإختيار و فقاُ لمتطلبات و خصائص التصميم الذى تقوم بة .

• أيضاُ يجب الأخذ فى الإعتبار أن الطرق السابقة هى طرق لتخطيط التصميم و التحكم فى سلوكة و خصائصة وليست هى الكود الفعلى الذى بة يصاغ التصميم . بمعنى أنها لا علاقة لها بالقضية المثارة عن استبدال الجداول بالطبقات “Divs” فى التصميم
• و ستجد أغلب الأمثلة المستخدمة لشرح هذة الطرق سواءاُ على شبكة الويب أو فى كتب تعليمية تستخدم تطبيق هذة الطرق ياستخدام نظام الطبقات “Divs ” ولن تجد إلا القليل للغاية من الأمثلة لهذة الطرق ياستخدام نظام الجداول فى بناء التصميم مثل ذلك المثال table_liquid