تصميم ديزاين كامل للموقع : التصحيح

الهيكل الأساسي للصفحة

آخر تحيين: 29-01-2014

تفاصيل رأس الصفحة تصميم ديزاين كامل للموقع


مراعاة للتصيم السابق سنقسم صفحتنا إلى 3 أجزاء أساسية :

  • 1 - رأس الصفحة
  • 2 - قلب الصفحة الذي يحتوي على ثلاث كتل أساسية و هي :
    • قائمة الإبحار الأفقية
    • العمود الأيمن
    • المحتوى الأساسي
  • 3 -و أخيرا ، قدم الصفحة

بلغة html :

<body>
 <header> </header>  <!-- رأس الصّفحة -->

 <div>           <!--  قلب الصّفحة -->
  <nav> </nav>  <!-- القائمة الأفقية -->
 
   <div>
     <aside> </aside>  <!-- العمود الأيمن -->

     <section> </section> <!-- المحتوى الرّئيسي -->
   </div>
 </div>

 <footer></footer>  <!-- قدم الصفحة -->
</body>

سنقوم أولا بتحديد تموضع الكتل و بعدها سنضيف محتوى كل كتلة على حدة . لهذا سنضيف بعض الصفات للوسوم :

<body>
<header class="header"> </header>  <!-- رأس الصّفحة -->

<div id="wrapper">           <!--  قلب الصّفحة -->
  <nav class="navbar"> </nav>  <!-- القائمة الأفقية -->
 
   <div class="main-content">
     <aside class="sidebar"> </aside>  <!-- العمود الأيمن للصفحة -->

     <section class="contents"> </section> <!-- المحتوى الرّئيسي -->
   </div>
</div>

<footer class="footer"></footer>  <!-- قدم الصفحة -->

</body>

الجزء الأهم فيما يخص جانب html تم تنفيذه ، سيأتي الآن الدور على CSS لإعطاء معنى لهذا التقسيم . قبل ذلك سنقوم بتحديد نمط كل الصفحة .

تحديد نمط الصفحة

سأعطيكم الشيفرة ثم سأبرّرها :

html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, ul, li {
  margin:0;
  padding:0;
  border:0;
}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}

body {
  font-size:62%;
  font-family:'Arabic Transparent','Arabic Fixed',Arial,Helvetica, sans-serif;
  color:#000;
  background:#fff url('images/body.png') 100% 100%;
}

الشيفرة الأولى تقوم بإزالة جميع الهوامش و الحدود المبدئية و التي قد تختلف من متصفح لآخر . لهذا أرغمناها على أخذ قيمة 0 ، لتحيين الصفحة على جميع المتصفحين و الإنطلاق من نفس النقطة ، حتى نتحكم فيها لاحقا على هوانا .
أما الشيفرة الثانية ، رأيتموها سابقا ، و هي تقوم بتعريف الوسوم الجديدة للإصدارات القديمة لبعض المتصفّحين .
ثم يأتي بعدها النمط الأساسي لكل الصفحة . نمط عادي من لون و عائلة الخط . بالنسبة لحجم الخط قد حدّدته بالنسبة المؤية و بعدها يمكنني استعمال الطريقة em لتعديل هذا الحجم لاحقا حسب الحاجة ، للإشارة فنسبة "62%" ، ليست عبثا ، لأنها تساوي بالضبط 1em أو 10px .
ثم ختمت بالخاصية background : الخلفية عبارة عن صورة متدرجة الألوان و هي بطول 1px ، صممتها على الفوتوشوب . طريقة عملية لتخفيف حجم الصورة و الزيادة في سرعة تحميلها على المتصفح . و بما أن حجمها صغير ، لهذا أضفت القيمة repeat-y حتى يتم تكرارها عموديا لتأخذ حجم الصفحة .
إعلموا أن CSS3 تمكننا من إستعمال الألوان المتدرجة و التحكم فيها كيف نشاء ، و ستغنينا عن استعمال الصور ، سنرى ذلك لاحقا .
هذا كل ما يخص الصفحة ، يمكنم تجربة الشيفرة السابقة على متصفّحكم ، لتروا النتيجة .

ننتقل الآن إلى تحديد تموضع الكتل الأساسية ، حاولوا تجربة كل شيفرة أضفناها ، حتى تفهموا جيدا ما أحاول شرحه .

رأس الصفحة header

.header {
   width:100%;
   height: 120px;
   background: url('images/responsive-header.png') repeat-y;
   border-bottom:4px solid #5f554c;
}

أولا أعطيت لعرض الكتلة 100% و ستأخذ تلقائيا حجم شاشة أي حاسوب . لو أردتم لهذا العرض أن يتماشى مع عرض قلب الصفحة ، ما عليكم سوى وضع وسم header داخل wrapper في صفحة html .
ثم حددت طول الكتلة ، و أضفت إليها خلفية كصورة متدرجة الألوان .
و أخيرا قمت بتنميق الحدود السفلى

قلب الصفحة

#wrapper{
   width: 980px;
   margin:0 auto;
   font-size: 1.6em;
   padding:0 5px;
}

حدّدت عرض قلب الصفحة في 980px .
بالنسبة للهوامش الخارجية margin أعطيت قيمة 0 للهامش العلوي و السفلي ، ثم auto لليمين و اليسار ، بهذا ستتمركز الكتلة وسط الصفحة .
إن جرّبتم هذه الشيفرة ، لن تلاحظوا أي تغيير على المتصفح ، لأننا لم نكتب أي محتوى . ولهذا و من باب التجربة فقط ، أضيفوا مثلا طول الكتلة و خلفيتها مؤقتا :

#wrapper {
  width: 980px;
  margin:0 auto;
  font-size: 1.6em;
  padding:0 5px;
  height: 400px;background: #000; /*للتجربة فقط ، تحذف لاحقا*/
}

هذه الكتلة تضم ثلاث كتل أخرى ، و هي قائمة الإبحار الأفقية nav و العمود الأيمن aside ثم المحتوى الرّئيسي section ، سنراها في الدّرس الموالي .

قدم الصفحة

.footer{
    width: 100%;
    font-size: 1.6em;
    height: 250px;
    color: #c9c2b9;
    text-align:left;
    font-family:'Times New Roman';
    background: url('images/footer.png') repeat-x;
    border-top:4px solid #7b736a;
}

الشيفرة واضحة ، خاصياتها رأيناها في الكتل السابقة
هناك ملاحظة بسيطة . بما أن قلب الصفحة ثابت في 980px . بخلاف رأس الصفحة و قدم الصفحة ، فهما مرنان و سيأخذان تلقائيا عرض الشاشة و هذا لن يسبب أي مشكلة بالنسبة للحواسيب أكبر من 980px .
لكن في حاسوب أصغر مثلا بعرض 800px . فقدم و رأس الصفحة سيصبحان أيضا بعرض 800px ، بينما سيبقى قلب الصفحة دائما بعرض 980px . و هذا سيخلق نوعا من عدم تجانس و انسجام نمط الموقع .
لتفادي هذا الإزعاج سنستعمل الخاصية min-width :

.header, .footer {
  min-width: 980px;
}

هكذا ، إذا كان عرض شاشة الحاسوب أقل من 980px ، فسيبقى عرض رأس و قدم الصفحة ثابتا في 980px. أما إذا كان أكبر ، فسيأخذان تلقائيا العرض الجديد

صفحتنا لازالت كئيبة ، لكن ما قمنا به هو الجزء الأكثر أهمية . و في الدرس الموالي سنرى محتوى كل كتلة على حدة ، و سأركّز فقط على بعض النقاط الهامة .