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

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

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

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


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

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

  <div id="nav">       <!-- قائمة الإبحار -->
  </div>

  <div id="sidebar">  <!-- العمود الأيمن -->
  </div>

  <div id="main">     <!-- قلب الصفحة -->
  </div>

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

</body>

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



بما أن هذه الطريقة استعملت في الملايين من المواقع ، حيث نجد تقريبا نفس أسماء الصفة id : header , nav , sidebar, footer ... لجأت لغة HTML5 إلى توحيد هذه الهيكلة بإضافة وسوم جديدة بالأسماء المتداولة من بينها :

<header> , <nav> , <aside>, <section>, <footer>, <article>

إذا أخذنا الشيفرة السابقة و وظّفنا فيها هذه الوسوم ، سنحصل على التقسيم الآتي :

<body>

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

  <nav>       <!-- قائمة الإبحار -->
  </nav>

  <aside>  <!-- العمود الجانبي -->
  </aside>

  <section>     <!-- قلب الصفحة -->
  </section>

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

</body>


بهذه الوسوم أصبحت صفحتنا جد مهيكلة . لن أدخل في تفاصيل شرح هذه الوسوم . فالشرح الموجود أمام كل وسم في الشيفرات السابقة ، جد كاف حاليا . طبعا سأتطرق لذلك في الدّرس الموالي .

أين اختفى وسم div إذاً ، و لقد اعتمدنا عليه كليا في السابق ؟

طبعا يمكنكم استعمال وسم div ، فهو وسم مهم و لم يفقد أبدا بريقه ، يمكنكم استعماله متى تشاؤون و خاصة داخل هذه الوسوم أو حتى أنه يمكننا إحاطتها كلها بوسم div مثلا للتحكم العام في الصفحة .

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