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

html5 وضع مخطط للصفحة النموذجية : layout

آخر تحيين: 06-01-2015

تصميم ديزاين كامل للموقع : التصحيح HTML5 تقطيع الصفحة النموذجية


layout : مصطلح نعني به الصفحة النموذجية للموقع .

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

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

html5 التصميم المرن و التصميم الثابت

لوضع تخطيط للصفحة النموذجية لدينا الإختيار بين نوعين من التصاميم

  • تصميم مرن : في هذا النوع ستأخذ صفحات الموقع كل عرض شاشة حاسوبكم . و ستتوافق أيضا مع عرض جميع الحواسيب الأخرى .
    لتحديد عرض الصفحة نستعمل النسب المؤية . مثال :

    body{
      width: 100%;
    }
    
  • تصميم ثابت : نقوم بتحديد عرض صفحتنا بالبيكسل(px) . و يبقى هذا العرض ثابتا مهما كان عرض شاشة حاسوبكم .

    body{
      width: 960px;
    }


صورة لتصميم مرن

صورة لتصميم ثابت


يمكنكم اعتماد أي تصميم تودونه ، حسب حاجتكم . في مثالنا سنرى نموذج التصميم الثابت .

هذا نموذج بسيط فيما يخص التنميق ، و الذي يهمنا كثيرا هو البناء السليم و المتين لعناصر html5 و css3 المكونة لصفحتنا .

التطبيق

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



بما أن الأمور أصبحت جدية الآن ، أدعوكم لإنشاء ملف موقعكم و الملفات التي سيضمها . مثلا أنا سميت ملف موقعى science، يمكنكم تسميته كما يحلو لكم . أما بالنسبة للملفات التي سيضمها ، أنصحكم بالحفاظ على نفس الأسماء التي سأقترحها عليكم ، حتى لا تضطروا إلى تغيير الرّوابط .
في نهاية المطاف سيضم موقعنا الملفات التالية (ملف images و صفحتين : index.html و style.css)
إذاً ، إفتحوا برنام تحرير النصوص و قوموا بإنشاء الصفحتين :

- index.html
- style.css

- بالنسبة للملف images ، لا تقوموا بإنشائه فهو موجود في ملف الصور الذي ستقومون بتحميله فورا . ثم فك الضغط عنه و وضع ملف images الذي ستحصلون عليه ، داخل ملف موقعكم الذي يضم الصفحتين السابقتي الذِّكر .



تحميل ملف الصّور

سأزودكم ببعض المعلومات المهمة ، قبل بدأ التمرين
اعلموا بأن بعض الإصدارات القديمة لمتصفّحي الأنترنت ، لا تتعرف على وسوم الهيكلة الجديدة للغة HTML5 . و عندما لا يتعرّف المتصفّح على وسم ما ، يقوم باعتباره كأنه وسم داخلي و يعطيه ميزة الوسم <span> . ما العمل إذاً ، و وسومنا من نوع الكتلة ؟
لا تنزعجوا ، توجد دائما حلول مناسبة لجعل الكل يعمل بشكل جيد . في صفحة CSS سنقوم بتأكيد و إخبار هذا المتصفح القديم ، البالي ، الرّث أنه يجب عليه أن يحترم وسومنا ويعتبرها كما هي ، و ذلك باستعمال الخاصية display و قيمتها block
افتحوا صفحة style.css و ضعوا فيها الشيفرة التالية

aside,footer,header,nav,section{display:block;}
لا تنسوا ، كلما استعملتم وسما جديدا من نوع الكتلة للغة html5 , أضيفوه إلى الشيفرة السابقة ، سنتعرف طبعا على وسوم جديدة لاحقا . ثم ضعوا هذه الشيفرة دائما في بداية صفحة CSS

مشكلتنا تم حلّها جزئيا ، لأن هناك متصفّح يقف دائما في وجه تيار التغيير و هو أنترنت إكسبلولر : Internet explorer و خاصة في الإصدارات الأقدم من النسخة التاسعة . فهو عندما لا يتعرّف على وسم ما ، لا يقوم بتحويله إلى وسم داخلي ، بل بكل بساطة و غرابة أيضا ، يقوم بتجاهله ، كأنه غير موجود ! و بالتالي فشيفرتنا السابقة لن تنفع معه . لرفع هذا التّحدّي لدينا حلاّن :

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

  • الحل الأول : إضافة شيفرة جافاسكريبت في صفحة HTML تقوم بالوساطة لتعريف هذا المتصفّح بالوسوم الجديدة ،
    <script>
      document.createElement("aside");
      document.createElement("footer");
      document.createElement("header");
      document.createElement("nav");
      document.createElement("section");  
    </script>
    

    لستم مطالبين بفهم الشيفرة التالية ، أضيفوا سطرا و ضعوا فيه اسم الوسم الذي استخدمتموه .
    يجب أن تضعوا هذه الشيفرة بين وسم head في صفحتكم .
  • الحل الثاني و الأفضل يُقدّمه لنا google ، فهو يوفر لنا ملفا صغيرا مكون من جافاسكريبت ، يقوم بهذا الدّور و زيادة يحلّ لنا أغلب مشاكل CSS3 أيضا على هذا المتصفح ،
    ما عليكم سوى وضع هذا الرّابط بين وسم head
    <head>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    </head>

    اعلموا أنه يمكنكم أيضا تحميل هذا الملف بدل وضع الرابط إلى مكتبة google توجهونه إلى ملف موقعكم . هذا هو رابط التحميل لمن رغب في ذلك .


حتى لا نزعج التلاميذ المجتهدين من زوار موقعنا بالسيفرات السابقة ، يمكننا وضعها على شكل ملاحظة ، و لن تتم قراءتها إلا من طرف الإصدارات المعنية للمتصفح . و في حالتنا هي كل إصدار أقل من النسخة 9 لمتصفح internet explorer .
افتحوا صفحة index.html و ضعوا فيها الشيفرة التالية :

<!DOCTYPE html>
<html dir="rtl">
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="style.css">
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
</head>
<body>

</body>
</html>

لديكم كل ما يلزمكم ، إلى مفاتيح حواسيبكم إذاً ، و الله ولي التوفيق . حاولوا بجهد ، قبل القفز لرؤية التصحيح .