ضبط مقاييس القالب

في الدرس السابق تكلمنا  (الصناديق والعنــاصر التي تتكون منهـا أكواد قوالب بلـــوجر)ضبط مقاييس وأبعاد القالب من أهم الأمور التي يتعين الإلمام بها حين يعتزم المرء تصميم قالب جديد، وتجد طريقتين لضبط مقاييس العرض width لأي قالب وهما :

1- أن تحدد عرضا ثابتا fixed للقالب لا يتغير في جميع الأحوال مثلا 800 بيكسل.
2- أن تجعل عرض القالب مرنا fluid بمعنى أن العرض في هذه الحالة ليس ثابتا بل يكون متغيرا حسب مقاييس الشاشة ، وكذلك حسب نوع المتصفح.

ضبط مقاييس القالب على عرض ثابت .
من أجل ضبط مقاييس أبعاد القالب ، يتعين أولا ضبط مقاييس عرض بعض الصناديق الكبيرة وسنشير إلى المشهورة منها التي يغلب أن تتوفر في معظم القوالب وهي :

الجسم : body.
الغلاف الخارجي : outer wrapper .
غلاف منطقة الرأس : Header wrapper.
منطقة المحتوى : content wrapper .
المنطقة السفلى : Footer wrapper .
المنطقة الرئيسية : main-wrapper
العمود الجانبي : sidebar wrapper .
لنبدأ بالغلاف الخارجي outer-wrapper 
نحن نعلم انه يضم داخله صناديق أخرى وهي منطقة الرأس Header ، ومنطقة المحتوى content والمنطقة السفلى footer. لذلك يجب أن يكون عرض هذه العناصر متساوية جميعا بما فيها الغلاف الغلاف الخارجي الذي يضمها.

ومثلا لنجعل هذا العرض هو 800 بيكسل.

ولما كان عرض منطقة المحتوى هو 800 بيكسل، ونحن نعلم انه يضم بدوره صناديق أخرى هي منطقة التدوينات ، والأعمدة الجانبية التي نفترض أنها ستكون في قالبنا هذا عمودان ، هذا يعني أنه يجب تقسيم 800 بيكسل على هذه العناصر بدورها، فلنجعل مقياس منطقة التدوينات هو 400 بيسكل، بقس 400 بيكسل نقسمها بين العمودين ، لكن حتى نترك فراغا بين منطقة التدوينات وكل عمود جانبي سنحدد مقياس كل عمود في 180 بيكسل لتبقى 20 بيكسل التي ستنقسم إلى اثنين لتصبح 10 بيكسل بين كل عمود ومنطقة التدوينات فارغا تجنبا لاختلاط محتوى كل صندوق بمحتوى الصندوق الآخر. وهي التي تم تحديد باستعمال خاصية الحشو أو المحاذاة إلى الداخل padding .
وعليه سيكون الكود بالشكل التالي :

 

body {

min-width: 800px; }

#outer-wrapper {

margin: 0 auto; /* to make the template lays in the screen center */

min-width: 800px;

max-width: 800px; }

#content-wrapper {

min-width: 800px;

max-width: 800px; }

#header-wrapper {

min-width: 800px;

max-width: 800px; }

#main-wrapper {

min-width: 400px;

max-width: 400px; }

.sidebar {

padding: 10px 10px 10px 10px;

min-width: 180px;

max-width: 180px; }

#sidebar1 {.....}

#sidebar2 {.....}

#footer-wrapper {

min-width: 800px;

max-width: 800px; }

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