نموذج تصميم قوالب بلوجر ( نموذج Fixed Width )

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

الفهرس

دروس تصميم القوالب
الفصل الأول : قوالب بلوجر ... بدايتك في التصميم .
الفصل الثاني : قوالب بلوجر ... العناصر الأساسية .

1. تقديم النموذج .
2. تصميم الهيدر .
3. تصميم الـMenu .
4. تصميم وسط الصفحة .
5. تصميم الفوتر .

---

تقديم النموذج

يتحدد نموذج التصميم كما يلي :

عرض ثابث :
يتميز هذا النموذج بعرض ثابث بحيث مهما إختلفت أبعاد شاشة المستخدم فإنه يظهر بنفس الأبعاد ، فبعرضه الثابث يسهل النموذج علينا تصميم باقي عناصره ، حيث تكون عروض هذه العناصر بالبكسل و يسهل التحكم بها ، كما من خلال العرض الثابث نضمن أن القالب يظهر بنفس الشكل في جميع شاشات المستخدمين و في جميع المتصفحات .
و لتحقيق مسألة العرض الثابث نستخدم عنصر <div> بسيط نخصصه بعرض محدد ، و هو العرض الثابث الذي نتحذث عنه حيث نستخدم خاصية width ، و بعدها نضيف خاصية margin:0 auto لكي تجعل المدونة تظهر في وسط الشاشة تماما .

ضبط مواضع الأعمدة :
تكون هذه الأعمدة دائما عبارة عن مقاطع . فلضبط مواضع هذه الأعمدة نضعها داخل عنصر <div> حيث نخصصه بـعرض ثابث ، مع إضافة خاصية التعويم float .
خاصية تعويم العناصر float هي من تلعب الدور الأهم في التصميم ، فالأعمدة تأتي لأول مرة في وسط القالب ، و خاصية float هي من تزيح هذه الأعمدة إلى أمكنتها المحددة .
يتكون نموذج التصميم الذي نحن بصدد التكلم عنه من 8 مقاطع :

• الهيدر يتكون من مقطعين ، الأول يحتوي على أداة رأس الصفحة ، و الثاني إختياري يمكن أن يحتوي على أي شيء لكننا نضعه دائما من أجر البانر الإعلاني حيث تكون أبعاد هذا المقطع هي 60 × 468 .
• الـMenu : هو نفسه عبارة عن أداة قائمة الروابط أو أداة الصفحات بحيث نجعل منها قائمة أفقية باستخدام خصائص الـCSS .
• وسط الصفحة : يتكون من مقطعين ، المقطع الأول عريض و يحتوي على أداة رسائل المدونة الإلكترونية ، أي المواضيع و المقالات و التدوينات ، ثم المقطع الثاني يكون بالجانب يمثل القائمة الجانبية Sidebar يحتوي على عدد كبير من الأدوات .
• الفوتر : يحتوي على ثلاث أعمدة ، يمكن أن يحتوي كل عمود على مالانهاية من الأدوات إلى أننا نكتفي باداة واحدة و ذلك للمحافظة على تناسق القالب .

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

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

تخصيص الأدوات
هذا هو عملنا الكبير الذي يستلزم الصبر و الخبرة ، فبلوجر تقدم أدواتها ببنية HTML موحدة ، من خلال إستخدام برنامج Firebug الموجود في المتصفح موزيلا  ، أو الخيار Inspecter l'element الموجود في غوغل كروم  نستطيع الإضطلاع على بنية كل الأدوات و التعرف على مختلف عناصرها و بالتالي التمكن من تعديلها بخصائص الـCSS المناسبة ، و هنا تظهر أهمية الـCSS في عملنا هذا حيث يشكل تخصيص الأدوات 70% من ما نقوم به في التصميم .
بعض الأدوات كقوائم الروابط أو التسميات تكون بنيتها بسيطة بحيث من خلال مثال واحد يمكننا تعلم كيفية التعامل معها بسهولة ، ناهيك عن أننا قد نبدع فيها عدة تصاميم باستخدام ما نعرفه في الـCSS . لكن هناك أداة صعبة قليلا و هي أداة رسائل المدونة الإلكترونية لأن بنيت الـHTML الخاصة بها كبيرة و تحتاج إلى نوع من التركيز و الصبر .

لكن على العموم يبقى تصميم قوالب بلوجر عملا سهلا و بسيطا جدا لأنه لا يتطلب معرفة كبيرة بالبرمجة و التصميم ، فلغة HTML و الـCSS كافيتان لتصميم أحسن القوالب  .

---

تصميم الهيدر

أولا و قبل كل شيء و كما رأينا في الفصل السابق يكون لدينا قالب فارغ بهذا الكود :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML>
<html>
<head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
<b:skin><![CDATA[


]]></b:skin>
</head>
<body>


</body>
</html>

سنشتغل في باقي هذه الفقرة داخل العنصر <body> فقط ، حيث سنضع العناصر الضرورية لإنشاء هيدر يتكون من مقطعين .
لا يجب أن ننسى بأننا نشتغل على نموذج بعرض ثابث لذلك سنضع عنصر <div> داخل بدن الصفحة مع إعطائعه العرض 990px ، و لا ننسى خاصية margin:0 auto التي ستجعل المدونة تتوسط الصفحة .
أي أننا سنكتب داخل العنصر <body> ما يلي :

...
<body>
     <div class="centerat" style="width: 990px; margin: 0 auto;">

     </div>
</body>
...

العرض 990px ليس مفروضا ، يمكنك أن تضع عرضا اخر حسب رغبتك ، كل ما في الأمر هو أن العرض 990px مناسب جدا لأن المدونة تظهر واضحة في جميع الشاشات التي أبعادها أكبر من أو يساوي 768 × 1024 .

و الان بعد ما وضعنا عنصر توسيط المحتوى ( أقصد الـ<div> السابق ) ، حان الوقت لتصميم هيدر المدونة .
هيدر المدونة عبارة عن عنصر <header> يحتوي على مقطعين ، المقطع الأول يعوم نحو اليمين و هو يحتوي على أداة رأس الصفحة ، و المقطع الثاني يعوم نحو اليسار و يحتوي على مساحة البانر الإعلاني ، لذلك فإننا نضع المقطعين داخل عنصري <div> نخصصهما بـfloat و width اللازمين . إليك المثال :

...
<div class="centrat" style="width: 990px; margin: 0 auto;">
    <header>
        <div style="width: 490px; float: right;">
            <b:section id="header" />
        </div>
        <div style="width: 468px; height:60px; float: left;">
            <b:section id="banner" maxwidgets="1" />
        </div>
        <div style="clear: both;"/>
    </header>

</div>
...

كما تلاحظ ليس هناك شيء خارق للعادة ، فكما رأينا في الفصل السابق المقاطع هي عبارة عن عناصر <b:section> .
العنصر </ "div style="clear: both> يمنع العناصر العائمة من الخروج عن إطار الهيدر ، نضيف دائما هذا العنصر الصغير بعد العناصر العائمة .
بعدما أدخلنا المقاطع الخاصة بالهيدر ، حان وقت إدخال الأدوات . و الأداة التي سنقوم بإدخالها هي أداة رأس الصفحة .
الطريقة سهلة جدا و لقد رأيناها في الفصل السابق . نقوم بحفظ ما وصلنا إليه و نتوجه إلى واجهة التخطيط ، نضيف أداة رأس الصفحة بالطريقة العادية ، و نعود إلى واجهة تحرير HTML .

سنجد على مستوى أكواد القالب أن هناك تغييرا ما حيث سنلاحظ أن عنصرا <b:widget> أُضيف من تلقاء نفسه داخل عنصر المقطع  ، هذا العنصر هو الأداة نفسها ، أي أداة رأس الصفحة و ذلك يتبين من خلال السمة Type التي تكون في هذا العنصر الجديد .
فكما نعلم أداة رأس الصفحة تكون ثابثة في معضم القوالب ، و نحن سنحافظ على التقليد و سنقوم بجعلها ثابثة عن طريق تغيير قيمة السمة locked إلى true .

...
<b:section id="header">
<b:widget id='Header1' locked='true' title='...(رأس الصفحة)' type='Header' />
</b:section>
...

بالنسبة للمقطع الثاني فسنتركه فارغا ، حيث سيقوم المستخدم بإضافة أداة HTML/Javascript فيه تحتوي على بانر إعلاني ما .
نكون بهذا قد أكملنا تصميم بنية HTML الخاصة بالهيدر ، و النتيجة النهائية المفروض الحصول عليها هي :

واجهة بلوجر الجديدة لا تعطي الترتيب صحيحا لذلك توجه إلى الواجهة القديمة 

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

---

تصميم الـMenu

الـMenu أو ببساطة القائمة الأفقية هو عبارة عن مقطع يحتوي على أداة واحدة و هي أداة قائمة الروابط . سنقوم بتصميمه بنفس الطريقة المعتمدة ، سنضع مقطعا معرف بـid ما ، و سنذهب إلى واجهة التخطيط حيث سنجد مقطعا جديدا قد أضيف ، سندخل أداة قائمة الروابط بالطريقة العادية ، ثم سنعود إلى واجهة تحرير HTML و نغير قيمة السمة locked لنجعل من الأداة ثابثة .

حسنا العملية الأولى هي إضافة المقطع . مباشرة بعد وسم إغلاق الهيدر ( <header/> ) سنكتب العنصر <b:section> الخاص بالقائمة :

...
</header>
<b:section id="menu" maxwidgets="1"/>

...

لا نحتاج إلى عنصر <div> يحتوي على سمتي float و width لأننا نريد من القائمة أن تظهر على عرض الصفحة بأكمله و في الوسط .
الان نتوجه إلى واجهة التخطيط حيث سنجد أن هناك مقطعا جديدا ، نضيف فيه أداة قائمة الروابط كالعادة دائما ، يمكننا أن نضيف أداة الصفحات أيضا ، و سنحصل على نفس النتائج .
من الضروري أن نضع بعض الروابط في الأداة حتى نستطيع تخصيصها بالـCSS عندما نريد أن نجعل القائمة أفقية .

بعدما نعود إلى واجهة تحرير HTML سنجد العنصر <b:widget> الخاص بأداة قائمة الروابط ، و هنا سنقوم بتغيير قيمة سمة locked من جديد لنجعل من الأداة ثابثة .

...
<header>
<b:section id="menu" maxwidgets="1" >     
    <b:widget id='LinkList1' locked='true' title='' type='LinkList'/>   
</b:section>

...

و ستكون النتيجة في الأخير :

أترى كيف أن القالب يأخذ بنيته على مهل و بسهولة ، فكما قلنا سابقا سنحتاج إلى معرفة الـHTML و الـCSS فقط .

---

تصميم وسط الصفحة

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

بعد اخر عنصر أضفناه ، نضيف العنصر الذي سيحمل كلا من المقطعين ، و هو عبارة عن عنصر <div> سنميز بـclass معين لكي نستطيع تخصيصه بالـCSS فيم بعد .
داخل هذا العنصر سنضع المقطعين حيث سنخصص للمقطع الأول عرضا كبير يصلح للتدوينات و المواضيع ، و الثانية عرضا صغيرا يصلح للإعلانات .

...
</b:section>
<div class="page">
    <div style="float: right; width: 300px;">
        <b:section id="sidebar" />
    </div>
    <div style="float: left; width: 660px;" >
        <b:section id="posts">
            <b:widget id="Blog1" locked="true" type="Blog" />
        </b:section>
    </div>
    <div style="clear:both" />
</div>

...

كما تلاحظ ، لقد أدخلنا أداة رسائل المدونة الإلكترونية مباشرةً ، هذا لأنه لا يمكننا إدخالها بالطريقة السابقة . لماذا ؟ - لأن أداة رسائل المدونة الإلكترونية غير موجودة في قائمة الأدوات التي تقدمها بلوجر .
لقد خصصنا العرض 300px للـSidebar ، و العرض 660px للمواضيع ، و حسب قيم الخاصية float نلاحظ بأن الـSidebar ستكون في اليمين و التدوينات في اليسار . يمكننا قلبهما إن أردنا و ذلك بتغيير قيم الخاصية float .

هكذا نكون أنهينا تصميم وسط الصفحة ، و النتيجة ستكون كما يلي :

أليس جميلا . يأخذ القالب بنيته رويدا رويدا . بالنسبة للمظهر الخارجي للقالب فإنه يدخل ضمن نطاق الـCSS ، فالـCSS هي من تحدد الملامح الخارجية للقالب ، أما الان فنحن نقوم بتصميم بنية الـHTML فقط ، لذلك لا تهتم بالمظهر الخارجي في هذه المرحلة  .

---

تصميم الفوتر 

يتكون الفوتر من ثلاث أعمدة ، أي من ثلاث مقاطع ، حيث تكون المقاطع على نفس المستوى ، و يتم تحقيق ذلك من خلال خاصية float التي نضعها في العنصر <div> الذي يحتوي على المقطع .
أولا نضع العنصر الفوتر <footer> ، و هو العنصر الذي يحتوي على المقاطع الثلاث و كل شيء ، المقطع الأول يعوم نحو اليمين ، المقطع الثاني يعوم نحو اليسار ، و المقطع الثالث يتوسط الصفحة .
بالنسبة لتموضع المقطعين الأول و الثاني ، فالطريقة واضحة جدا ، نستعمل خاصية float مرة أخرة ، بينما المقطع الثالث و الذي يجب أن يتوسط الصفحة فإننا نستخدم خاصية margin:0 auto التي ستجعله يتوسط الصفحة ، و هي نفسها الخاصية التي وضعناها للعنصر <div> الذي يحتوي على تصميمنا كله و الذي يجعل المدونة تتوسط الصفحة .
أما بالنسبة للعروض فيجب الإنتباه قليلا هنا : العرض الكلي للمودنة هو 990px ، و عند تقسيم 990px على 3 فإننا نحصل على 330px أي أن كل مقطع يجب أن يأخذ عرض 330px ، إلا أننا سنضع عرض أقل و هو 320px و المسافة الباقية سنباعد بها المقاطع قليلا عن طريق الـCSS .

...
</div>
<footer>
    <div style="float: right; width: 320px;">
        <b:section id="footer1" />
    </div>
    <div style="float: left; width: 320px;">
        <b:section id="footer2" />
    </div>
    <div style="margin: 0 auto; width: 320px;">
        <b:section id="footer3" />
    </div>
    <div style="clear:both"/>
</footer>
...

يرغب الكثيرون في وضع حقوقهم بعد الفوتر ، لذلك فبعد عنصر الإغلاق <footer/> نضع <div> اخر يحتوي على تلك الحقوق .

..................
            </footer>
            <div class="copyright">        
                المدونة لدى بلوجر ، من تصميم عاشق النت.....    
            </div>
        </div>
    </body>
</html>

بهذا نكون قد أنهينا تصميم بنية القالب و لم يتبقى إلى إلا 70% من مراحل التصميم  ، و التي تتمثل في الـCSS .
أما ما نتوصل إليه أخيرا فهو البنية التالية :

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

يمكنك تحميل النموذج الذي توصلانا إليه في الاخر من الرابط :   تحميل النموذج