ما هو تخطيط صفحة الويب؟

التخطيط إذا نظرنا إلى الكلمة، يمكننا وصفها بأنها النظام والتصميم وخطة التوزيع. بناءً على ذلك، سيكون من الصحيح وصف تخطيط صفحة الويب بأنه توزيع صفحة الويب.

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

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

كنا نستخدم وسم <div>، ونعطيها معرفًا/فئة، ونقسم الصفحة إلى أقسام. ومع العناصر الدلالية التي جاءت مع HTML5، أصبحت هذه الأقسام تتحول مباشرة إلى وسوم.

على سبيل المثال، عند إضافة رأس إلى أعلى الصفحة كنا نكتب الكود على النحو التالي

< div id=”header”>…< /div>

بينما الآن يكفي أن نضيف الكود بين المحتويات:

< header>…< /header>

بعض هذه الوسوم تشمل الرأس، والتذييل، والتنقل، والقسم، والمقال، والجانب.

يمكننا استعراض هذه المعلومات من خلال لوحة ليو;

عند فتح الصفحة للمرة الأولى، تظهر لدينا عمومًا عمودان.

هنا، الجزء الأزرق على اليسار يمثل المنطقة التي توجد بها القائمة، وهي تتوافق مع وسم <nav>. بينما الجزء الأيمن يحتوي على المحتوى العام.

منطقة المحتوى على اليمين أيضًا تنقسم إلى أقسام بالطبع.

الجزء الظاهر في الصورة والذي يظهر في أعلى الصفحة يتوافق مع وسم <header>.

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

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

الجزء الذي يظهر أسفل ذلك بالقائمة أو المعلومات التفصيلية يمثل جزءًا منفصلًا.

يمكن أن يحتوي على أي محتوى، ويمكن تقسيمه داخليًا أو استخدامه فقط لاستيعاب عنصر واحد.

في قوالبنا، ليس لدينا منطقة <footer>، ولكن لو كان لدينا، كان بإمكاننا إضافتها بنفس طريقة وسم <header> داخل <content>، أو يمكننا تقييمها أيضًا تحت الحاوية العامة.