في إنتاج صفحات الويب، هناك العديد من المصطلحات، مثل: CSS، HTML، DHTML، XHTML وما إلى ذلك. في المقالة التالية سوف نستخدم بعض المعرفة الأساسية حول HTML قبل دراسة هذا البرنامج التعليمي التمهيدي، يرجى التأكد من أن لديك بالفعل معرفة أساسية معينة بـ HTML. لنبدأ باستخدام DIV+CSS خطوة بخطوة لتصميم تخطيط صفحة الويب.
الخطوة الأولى في جميع التصاميم هي الحمل. بعد الحمل، بشكل عام، تحتاجين إلى استخدام PhotoShop أو FireWorks (المشار إليها فيما يلي باسم PS أو FW) وبرامج معالجة الصور الأخرى لرسم تخطيط الواجهة الذي يجب تصميمه فيما يلي ما تصورته من مخطط تخطيط الواجهة.
بعد ذلك، نحتاج إلى تخطيط تخطيط الصفحة بناءً على المخطط المفاهيمي. بعد تحليل المخطط بعناية، يمكننا بسهولة أن نجد أن الصورة مقسمة تقريبًا إلى الأجزاء التالية:
1. الجزء العلوي، والذي يتضمن أيضًا الشعار والقائمة وصورة الشعار؛
2. يمكن تقسيم جزء المحتوى إلى الشريط الجانبي والمحتوى الرئيسي؛
3. يتضمن الجزء السفلي بعض معلومات حقوق النشر.
مع التحليل أعلاه، يمكننا بسهولة وضع طبقة التصميم الخاصة بنا كما هو موضح أدناه:
بناءً على الصورة أعلاه، قمت برسم مخطط تخطيطي فعلي آخر للصفحة لتوضيح العلاقة المتداخلة بين الطبقات، بحيث يكون من الأسهل فهمها.
هيكل DIV هو كما يلي:
│body {} /*هذا عنصر HTML، ولن أشرح التفاصيل*/
└#Container {} /*حاوية طبقة الصفحة*/
├#الرأس {} /*رأس الصفحة*/
├#PageBody {} /*نص الصفحة*/
│ ├#الشريط الجانبي {} /*الشريط الجانبي*/
│ └#MainBody {} /*المحتوى الرئيسي*/
└#التذييل {} /*أسفل الصفحة*/
في هذه المرحلة، تم الانتهاء من تخطيط الصفحة وتخطيطها، والشيء التالي الذي يتعين علينا القيام به هو البدء في كتابة كود HTML وCSS.
بعد ذلك، نقوم بإنشاء مجلد جديد على سطح المكتب ونطلق عليه اسم "DIV+CSS Layout Practice". قم بإنشاء مستندين فارغين للمفكرة ضمن المجلد وأدخل المحتوى التالي:
هذا هو الهيكل الأساسي لـ XHTML، قم بتسميته Index.htm، ثم قم بتسمية مستند المفكرة الآخر css.css.
بعد ذلك، نكتب البنية الأساسية لـ DIV في زوج العلامة <body></body>، ويكون الكود كما يلي:
<div id=container><!--حاوية طبقة الصفحة-->
<div id=Header><!--رأس الصفحة-->
</div>
<div id=PageBody><!--نص الصفحة-->
<div id=الشريط الجانبي><!--الشريط الجانبي-->
</div>
<div id=MainBody><!--المحتوى الرئيسي-->
</div>
</div>
<div id=التذييل><!--أسفل الصفحة-->
</div>
</div>
لتسهيل قراءة الكود في المستقبل، يجب علينا إضافة التعليقات ذات الصلة. بعد ذلك، افتح ملف css.css واكتب معلومات CSS، كما يلي: