بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
السلام عليكم ورحمة الله وبركاته
من أجل تقسيم صفحة html وتنظيمها تستخدم العلامة الزوجية div وهي من النوع block ، وسميت div اختصارا لكلمة division التي تعني قسم ، وكل قسم يجمع محتوى معين .
العلامة div تأخذ الخاصية id أو الخاصية class أو كلاهما ، ويمكننا بذلك تمييز القسم والتحكم فيه عن طريق لغة css وتنسيقه بحيث نحدد عرضه وارتفاعه وموضعه وخلفيته ولون الخط ونوعه وما إلى ذلك، وسنرى ذلك في حينه.
وهذا مثال على التقسيم:
هذه تقسيمة قالب كامل لكن بدون محتوى ، فإذا فتحت هذه الصفحة في المتصفح لن تجد شيئا سوى البياض، وكما ترى الديف الذي سميناه allContent يحتوى على بقية الأقسام وهي بالترتيب:
header : ويمثل رأس الصفحة الذي نكتب فيه عنوان الموقع واللوغو وما شاكل حسب رغبتنا.
navbare : ويمثل القسم الذي ننشيء فيه قائمة الروابط الأساسية للموقع.
sidebare : ويمثل القسم الجانبي الذي نضع فيه محتويات مختلفة.
content : ويمثل القسم الأهم قسم المحتوى الذي تظهر فيه المنشورات.
footer : ويمثل قدم الصفحة الذي نضع فيه الحقوق وبعض المحتوى.
هذا أبسط مثال لتقسيم قالب ، لكنه مناسب كبداية ، ويمكنك تقسيم قالبك الخاص بطريقة أخرى فباب الإبداع مفتوح في هذا المجال.
ويمكننا إعادة تقسيم هذه الأقسام إلى أقسام فرعية ونضع لها محتوى، لنبدأ مثلا بالديف الذي سميناه header :
وكما ترى قسمنا الديف header إلى ديفين آخرين ووضعنا في الأول عنوان الموقع وفي الثاني وضعنا اللوغو ، والمحتوى يظهر بهذا الشكل لكنه مجرد html يحتاج إلى تنسيق بلغة css كي نجعل اللوغو على اليسار والعنوان على اليمين ونجعل header يبدو بشكل أجمل.
مثال آخر ، لنضع محتوى للديف navbare :
قائمة الروابط الرئيسية تظهر بشكل عمودي لأنها غير منسقة بلغة css ، وسنتعلم في حينه كيف نجعلها أفقية وجميلة.
ويمكننا بنفس الطريقة إعادة تقسيم بقية الأقسام ووضع محتوى لها بحيث نحصل على قالب html كامل لا ينقصه سوى طبقة التنسيق ب css ليتحول إلى قالب جميل.
ويمكنك تحميل الملف كاملا : من هنا
ونكتفي بهذا القدر وموعدنا إن شاء الله مع الدرس القادم ، وفي انتظار ذلك دمتم في رعاية الله وحفظه.