جميع قوالب بلوجر بكل تصاميمها تتمحور حول نموذجين أو ثلاث ، هذه النماذج هي عبارة عن أكواد HTML و الـCSS تقدم البنية الداخلية للقالب ، أي مكان تموضع مختلف مقاطعه و أدواته ، و هذا ما يخلق لنا إمكانية تصنيف القوالب حسب عدد الأعمدة ، و مكان العمود الجانبي sidebar إلخ ... . سنرى في هذا الفصل كيفية إنشاء النموذج الأبسط على الإطلاق في قوالب بلوجر ، نموذج يتكون من عمودين فقط : عمود الرسائل الإلكترونية و عمود جانبي sidebar ، إلى جانب الهيدر و الفوتر طبعا .
الفهرس
دروس تصميم القوالب
الفصل الأول : قوالب بلوجر ... بدايتك في التصميم .
الفصل الثاني : قوالب بلوجر ... العناصر الأساسية .
الفصل الأول : قوالب بلوجر ... بدايتك في التصميم .
الفصل الثاني : قوالب بلوجر ... العناصر الأساسية .
تقديم النموذج
عرض ثابث :
يتميز هذا النموذج بعرض ثابث بحيث مهما إختلفت أبعاد شاشة المستخدم فإنه يظهر بنفس الأبعاد ، فبعرضه الثابث يسهل النموذج علينا تصميم باقي عناصره ، حيث تكون عروض هذه العناصر بالبكسل و يسهل التحكم بها ، كما من خلال العرض الثابث نضمن أن القالب يظهر بنفس الشكل في جميع شاشات المستخدمين و في جميع المتصفحات .
و لتحقيق مسألة العرض الثابث نستخدم عنصر <div> بسيط نخصصه بعرض محدد ، و هو العرض الثابث الذي نتحذث عنه حيث نستخدم خاصية width ، و بعدها نضيف خاصية margin:0 auto لكي تجعل المدونة تظهر في وسط الشاشة تماما .
ضبط مواضع الأعمدة :
تكون هذه الأعمدة دائما عبارة عن مقاطع . فلضبط مواضع هذه الأعمدة نضعها داخل عنصر <div> حيث نخصصه بـعرض ثابث ، مع إضافة خاصية التعويم float .
خاصية تعويم العناصر float هي من تلعب الدور الأهم في التصميم ، فالأعمدة تأتي لأول مرة في وسط القالب ، و خاصية float هي من تزيح هذه الأعمدة إلى أمكنتها المحددة .
يتكون نموذج التصميم الذي نحن بصدد التكلم عنه من 8 مقاطع :
- الهيدر يتكون من مقطعين ، الأول يحتوي على أداة رأس الصفحة ، و الثاني إختياري يمكن أن يحتوي على أي شيء لكننا نضعه دائما من أجر البانر الإعلاني حيث تكون أبعاد هذا المقطع هي 60 × 468 .
- الـMenu : هو نفسه عبارة عن أداة قائمة الروابط أو أداة الصفحات بحيث نجعل منها قائمة أفقية باستخدام خصائص الـCSS .
- وسط الصفحة : يتكون من مقطعين ، المقطع الأول عريض و يحتوي على أداة رسائل المدونة الإلكترونية ، أي المواضيع و المقالات و التدوينات ، ثم المقطع الثاني يكون بالجانب يمثل القائمة الجانبية Sidebar يحتوي على عدد كبير من الأدوات .
- الفوتر : يحتوي على ثلاث أعمدة ، يمكن أن يحتوي كل عمود على مالانهاية من الأدوات إلى أننا نكتفي باداة واحدة و ذلك للمحافظة على تناسق القالب .
خصائص الـCSS هي أكثر الأشياء التي يجب أن نتقنها لتصميم أحسن القوالب ، لأنه يمكن أن يكون لقالبين نفس بنية الـHTML و خصائص CSS مختلفة فيظهران مختلفين عن بعضهما كل الإختلاف ، فعن طريق الـCSS نحدد الألوان و الخلفيات و الخطوط و غيرها .
معضم الخصائص يجب أن تكون معروفة حق المعرفة عندك لكي تقوم بالتصميم ، أما بعض التقنيات يمكن تعلمها بسهولة إنطلاقا من الأمثلة فقط . سنرى في الفصل القادم طريقة تصميم الـMenu ، فالـMenu كما قلنا سابقا هو عبارة عن أداة قائمة الروابط ، و كما نعلم قائمة الروابط تأتي بشكل عمودي دائما ، و لجعلها أفقية أفقية لا بد من إستخدام بعض تقنيات الـCSS . أما في هذا الفصل سنركز على بنية القالب من ناحية الـHTML فقط
.الإضافات :
أقصد بالإضافات تلك الأدوات الخارجية التي نضيفها بأنفسنا كترقيم الصفحات و المواضيع ذات صلة و القوائم المنسدلة إلخ ... تلك الأدوات غير موجودة في المجموعة التي تقدمها بلوجر ، يتم تصميمها من طرف المستخدمين الخبراء في مجال البرمجة و التصميم فقط .
يتم إدخال بعض تلك الإضافات في أداة HTML/Javascript ، أما معضمها فيتم إدخاله عبر تصميم HTML القالب .
غرضنا من هذه الإضافات هو أننا سنقوم بإدخال بعضها في تصميمنا كأداة ترقيم الصفحات و المواضيع ذات صلة حيث سنقوم بالتعمق قليلا في أكواد الـXML الخاصة ببلوجر ، و هذا ضروري لكي تندمج هذه الإضافات في قالبنا بطريقة صحيحة و تصبح جزءا لا يتجزء من التصميم .
تخصيص الأدوات
هذا هو عملنا الكبير الذي يستلزم الصبر و الخبرة ، فبلوجر تقدم أدواتها ببنية HTML موحدة ، من خلال إستخدام برنامج Firebug الموجود في المتصفح موزيلا
، أو الخيار Inspecter l'element الموجود في غوغل كروم 
نستطيع الإضطلاع على بنية كل الأدوات و التعرف على مختلف عناصرها و بالتالي التمكن من تعديلها بخصائص الـCSS المناسبة ، و هنا تظهر أهمية الـCSS في عملنا هذا حيث يشكل تخصيص الأدوات 70% من ما نقوم به في التصميم .بعض الأدوات كقوائم الروابط أو التسميات تكون بنيتها بسيطة بحيث من خلال مثال واحد يمكننا تعلم كيفية التعامل معها بسهولة ، ناهيك عن أننا قد نبدع فيها عدة تصاميم باستخدام ما نعرفه في الـCSS . لكن هناك أداة صعبة قليلا و هي أداة رسائل المدونة الإلكترونية لأن بنيت الـHTML الخاصة بها كبيرة و تحتاج إلى نوع من التركيز و الصبر .
.
تصميم الهيدر
أولا و قبل كل شيء و كما رأينا في الفصل السابق يكون لدينا قالب فارغ بهذا الكود :
<?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>
<!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>
...
<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>
...
<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>
...
<b:section id="header">
<b:widget id='Header1' locked='true' title='...(رأس الصفحة)' type='Header' />
</b:section>
...
بالنسبة للمقطع الثاني فسنتركه فارغا ، حيث سيقوم المستخدم بإضافة أداة HTML/Javascript فيه تحتوي على بانر إعلاني ما .
نكون بهذا قد أكملنا تصميم بنية HTML الخاصة بالهيدر ، و النتيجة النهائية المفروض الحصول عليها هي :
 |
| واجهة بلوجر الجديدة لا تعطي الترتيب صحيحا لذلك توجه إلى الواجهة القديمة |
كل ما تعرفنا عليه و سنتعرف عليه في هذا الفصل يخص بنية الـHTML الخاصة بنموذج واحد من قوالب بلوجر فقط ، أما الـCSS و هي التي تمثل تقريبا كل التصميم سنتعرف على بعض تقنياتها المهمة في الفصول القادمة إن شاء الله .
.
تصميم الـMenu
حسنا العملية الأولى هي إضافة المقطع . مباشرة بعد وسم إغلاق الهيدر ( <header/> ) سنكتب العنصر <b:section> الخاص بالقائمة :
...
</header>
<b:section id="menu" maxwidgets="1"/>
...
</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>
...
<header>
<b:section id="menu" maxwidgets="1" >
<b:widget id='LinkList1' locked='true' title='' type='LinkList'/>
</b:section>
...
و ستكون النتيجة في الأخير :
أترى كيف أن القالب يأخذ بنيته على مهل و بسهولة ، فكما قلنا سابقا سنحتاج إلى معرفة الـHTML و الـCSS فقط .
تصميم وسط الصفحة
بعد اخر عنصر أضفناه ، نضيف العنصر الذي سيحمل كلا من المقطعين ، و هو عبارة عن عنصر <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>
...
</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 فقط ، لذلك لا تهتم بالمظهر الخارجي في هذه المرحلة
.
تصميم الفوتر
أولا نضع العنصر الفوتر <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>
...
</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>
</footer>
<div class="copyright">
المدونة لدى بلوجر ، من تصميم عاشق النت.....
</div>
</div>
</body>
</html>
بهذا نكون قد أنهينا تصميم بنية القالب و لم يتبقى إلى إلا 70% من مراحل التصميم
، و التي تتمثل في الـCSS .أما ما نتوصل إليه أخيرا فهو البنية التالية :
كما ترى إنها بنية جميلة و بسيطة و منظمة ، لا يوجد بها تداخلات للأدوات و لا أي خلل ، بالنسبة للواجهة المحذثة في بلوجر تعطي بعض الخلل في التصميم خاصتاً في عناصر الهيدر ، لذلك غالبا ما نصمم قوالبنا في الواجهة القديمة .
المصدر: http://www.3asq-net.com/2012/06/fixed-width.html#ixzz29NlWDPTp
ليست هناك تعليقات:
إرسال تعليق