تقنيات تخطيط الصفحات HTML Layout

تقنيات تخطيط الصفحات HTML Layout
غالبًا ما تعرض مواقع الويب المحتوى في عدة أعمدة (مثل مجلة أو جريدة).
مثال
CSS Template

Cities

London

عناصر التخطيط HTML Layout Elements
يحتوي HTML على العديد من العناصر الدلالية التي تحدد الأجزاء المختلفة لصفحة الويب:

<header> - يحدد عنوانًا لمستند أو قسم او لوجو
<nav> - يحدد مجموعة من روابط التنقل مثل اقسام الموقع
<section> - يحدد قسمًا في الصفحة
<article> - يحدد محتوى مستقل بذاته
<aside> - لتحديد المحتوى بعيدًا عن المحتوى (مثل الشريط الجانبي)
<footer> - يحدد تذييلاً لمستند أو قسم
<details> - يحدد التفاصيل الإضافية التي يمكن للمستخدم فتحها وإغلاقها عند الطلب
<summary> - يحدد عنوانًا لعنصر <details>

تقنيات التخطيط Layout Techniques
هناك أربع تقنيات مختلفة لإنشاء تخطيطات متعددة الأعمدة. كل تقنية لها مزاياها وعيوبها:

CSS framework
CSS float property
CSS flexbox
CSS grid

CSS framework
إذا كنت ترغب في إنشاء التخطيط الخاص بك بسرعة ، يمكنك استخدام إطار عمل CSS ، مثل W3.CSS أو Bootstrap.اوBulma.css ....الخ
CSS float property
من الشائع عمل تخطيطات ويب كاملة باستخدام خاصية CSS float. من السهل تعلم Float - ما عليك سوى أن تتذكر كيفية عمل الخصائص float and clear. العيوب: ترتبط عناصر float بتدفق الصفحة، مما قد يضر بالمرونة.
مثال

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 30%;
  height: 300px; /* only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px; /* only for demonstration, should be removed */
}

/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

<h2>CSS Layout Float</h2>
<p> في هذا المثال ، أنشأنا رأسًا وعمودين / مربعين وتذييلاً. على الشاشات الأصغر حجمًا ، تتكدس الأعمدة فوق بعضها البعض. </ p>
<p> قم بتغيير حجم نافذة المتصفح لرؤية التأثير سريع الاستجابة </p>

<header>
  <h2>المدن</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">تونس</a></li>
      <li><a href="#">الجزائر</a></li>
      <li><a href="#">المغرب</a></li>
      <li><a href="#">لندن</a></li>
    </ul>
  </nav>
  
  <article>
<h1> لندن </ h1>
     <p> لندن هي عاصمة إنجلترا. إنها المدينة الأكثر اكتظاظًا بالسكان في المملكة المتحدة ، مع منطقة حضرية يزيد عدد سكانها عن 13 مليون نسمة. </ p>
     <p> بالوقوف على نهر التايمز ، كانت لندن مستوطنة رئيسية منذ ألفي عام ، ويعود تاريخها إلى تأسيسها من قبل الرومان ، الذين أطلقوا عليها اسم لوندينيوم. </ p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

تخطيط CSS Flexbox
يضمن استخدام Flexbox أن العناصر تتجاوب مع أحجام شاشات مختلفة وأجهزة عرض مختلفة.
مثال

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8"> 
<meta content="width=device-width, initial-scale=1" name="viewport"> 
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
  background-color: #799;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}

/* Style the navigation menu */
nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #9cc;
  padding: 20px;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #f1f1f1;
  padding: 10px;
}

/* Style the footer */
footer {
  background-color: #799;
  padding: 10px;
  text-align: center;
  color: white;
}
 
@media (max-width: 600px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
</style>
</head>
<body> 

<header>
  <h2>المدن</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">تونس</a></li>
      <li><a href="#">الجزائر</a></li>
      <li><a href="#">المغرب</a></li>
      <li><a href="#">لندن</a></li>
    </ul>
  </nav>
  
  <article>
<h1> لندن </ h1>
     <p> لندن هي عاصمة إنجلترا. إنها المدينة الأكثر اكتظاظًا بالسكان في المملكة المتحدة ، مع منطقة حضرية يزيد عدد سكانها عن 13 مليون نسمة. </ p>
     <p> بالوقوف على نهر التايمز ، كانت لندن مستوطنة رئيسية منذ ألفي عام ، ويعود تاريخها إلى تأسيسها من قبل الرومان ، الذين أطلقوا عليها اسم لوندينيوم. </ p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

تخطيط CSS grid
توفر CSS Grid Layout Module نظام تخطيط قائم على grid، مع صفوف وأعمدة ، مما يسهل تصميم صفحات الويب دون الحاجة إلى استخدام floats وposition .

سنتطرق اليها في دروس css ء

الدرس السابق الدرس التالي