في إنتاج صفحات الويب، هناك العديد من المصطلحات، مثل: CSS، HTML، DHTML، XHTML وما إلى ذلك. في المقالة التالية سوف نستخدم بعض المعرفة الأساسية حول HTML قبل دراسة هذا البرنامج التعليمي التمهيدي، يرجى التأكد من أن لديك بالفعل معرفة أساسية معينة بـ HTML. لنبدأ باستخدام DIV+CSS خطوة بخطوة لتصميم تخطيط صفحة الويب.
الخطوة الأولى في جميع التصاميم هي الحمل. بعد الحمل، بشكل عام، تحتاجين إلى استخدام PhotoShop أو FireWorks (المشار إليها فيما بعد باسم PS أو FW) وبرامج معالجة الصور الأخرى لرسم تخطيط الواجهة الذي يجب تصميمه فيما يلي ما تصورته من مخطط تخطيط الواجهة.
بعد ذلك، نحتاج إلى تخطيط تخطيط الصفحة بناءً على المخطط المفاهيمي. بعد تحليل المخطط بعناية، يمكننا بسهولة أن نجد أن الصورة مقسمة تقريبًا إلى الأجزاء التالية:
1. الجزء العلوي، والذي يتضمن أيضًا الشعار والقائمة وصورة الشعار؛
2. يمكن تقسيم جزء المحتوى إلى الشريط الجانبي والمحتوى الرئيسي؛
3. يتضمن الجزء السفلي بعض معلومات حقوق النشر.
مع التحليل أعلاه، يمكننا بسهولة وضع طبقة التصميم الخاصة بنا كما هو موضح أدناه:
بناءً على الصورة أعلاه، قمت برسم مخطط تخطيطي فعلي للصفحة لتوضيح علاقة التداخل بين الطبقات، بحيث يكون من الأسهل فهمها.
هيكل DIV هو كما يلي:
│body {} /*هذا عنصر HTML، ولن أشرح التفاصيل*/
└#Container {} /*حاوية طبقة الصفحة*/
├#الرأس {} /*رأس الصفحة*/
├#PageBody {} /*نص الصفحة*/
│ ├#الشريط الجانبي {} /*الشريط الجانبي*/
│ └#MainBody {} /*المحتوى الرئيسي*/
└#التذييل {} /*أسفل الصفحة*/
في هذه المرحلة، تم الانتهاء من تخطيط الصفحة وتخطيطها، والشيء التالي الذي يتعين علينا القيام به هو البدء في كتابة كود HTML وCSS.