شرح الدرس السادس بالتفصيل

الكثير من المقبلين على تعلم تصميم وبرمجة المواقع يواجهون مشكلة في معرفة الطريقة الصحيحة لبناء وتقسيم الصفحات , انا كنت احد هؤلاء الأشخاص فقد كنت ابدأ اتعلم اساسيات عن الـ html وما يسمى الوسوم tags لكني كنت انصدم عند محاولة بناء أي موقع من الصفر بمشكلة تقسيم الموقع .

في هذا الموضوع سأحاول أن ابسط لكم طريقة تقسيم اي صفحة تصممها , وساعتبر انك عزيزي القارئ لديك المعرفة الكافية في التعامل مع أكواد html, css ..

وعلى بركة الله نبدأ



لتقسيم صفحة html لا بد أن نفهم الفكرة التي ترتكز عليها عملية التقسيم
الفكرة تقوم على إنشاء تقسيمات أو بلوكات مستقلة , بحيث نتحكم بها والتي تشكل لنا في النهاية موقع مقسم بشكل جميل ورائع , وتقسيم الموقع باستخدام اكواد css يساهم في المحافظة على شكله عند عرضه بأي متصفح دون حدوث مشاكل بإذن الله , بعكس التقسيم باستخدام طريقة الجداول التي ربما يتبعها البعض .

سنقوم بتصميم موقع له 3 تقسيمات رئيسية هي الرأس Header والمحتوى content والذيل footer
( ملاحظة يمكن تقسيم الصفحة لاكثر من تقسيم كيفما تشاء .. لكن يجب في البداية فهم الطريقة الصحيحة وتسلسلها .. وتطبيق مفهوم التقسيم هذا عند تقسيم أي صفحة أو حتى تقسيم أي جزء من الأجزاء الثلاثة أعلاه )
في التصميم باستخدام HTML نستخدم وسم خاص للقيام بهذه التقسيمات ( ليس جدولاً كما يظن الكثيرون ) وهذا الوسم هو


رمز Code:
<div> </div>

في مثالنا سنستخدم 3 أوسمة من نوع div كل وسم يعبر عن قسم من أقسام الموقع.
ولكي يكون العمل منظم نحتاج أن نجمع ( أو نحزم ) هذه الأوسمة داخل حزام وبالتالي سنحتاج إلى وسم أضافي من نفس النوع نضع بداخلة الأوسمة الثلاثة للثلاثة الأقسام وسنطلق عليه اسم blank

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


وبالتالي سيكون الكود الأولي والذي يقسم وينظم عملنا كما يلي:

كود بلغة HTML

<div id="all"> <div id="blank"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div> </div>

بنفس الطريقة نحتاج إلى تقسيم القسم الثاني المسمى content إلى قسمين يمن ويسار , ولعمل ذلك نقوم بانشاء وسمين جديدين داخل content ونطلق عليهما الاسمين left, right

فيصبح الكود كالتالي:
رمز Code:

كود بلغة HTML

<div id="content"> <div id="right"></div> <div id="left"></div> </div>

( نضيف بعض التأثيرات لكي نستعرض النتيجة النهائية لما سبق باستخدام css

سأفترض هنا أن لديك معرفة كافية في html, css

سأقوم بعمل حدود لكل قسم وقيمة دنيا للعرض والطول كما في الكود التالي:
رمز Code:

كود بلغة HTML

<style> #all{ min-height:100px; border:2px solid #C30; min-width:10px; } #blank{ min-height:100px; border:2px dashed #000; width:500px; } #header, #content, #footer{ min-height:100px; border:1px solid #000; min-width:10px; } #left, #right{ min-height:100px; border:1px dashed #000; width:100px; } </style>

والنتيجة كما في الصورة