أساسيات موقع ويب قائم على Div: 7 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:42

سيوضح لك هذا الدليل الأساسيات الخاصة بكيفية إنشاء موقع ويب باستخدام divs. لأن الجداول المستخدمة في التخطيط شريرة! لفهم هذه التعليمات ، ستحتاج إلى معرفة أساسيات html و css. إذا كنت لا تفهم شيئًا ما ، فلا تتردد في طرحه. تستخدم صفحتي الرئيسية أيضًا هذا النوع من بنية div.

الخطوة الأولى: إنشاء الملفات الأساسية

قم أولاً بإنشاء ملف html الخاص بك. سنضيف الأساسيات إليه. سيكون ملف css فارغًا الآن. يحتوي ملف html الآن على: test احفظ ملف html الخاص بك باسم something.html. يمكنك اختيار الاسم بنفسك. يجب حفظ ملف css كملف css. تأكد من إعطائه نفس الاسم كما هو مذكور في ملف html. في هذه الحالة "style.css" ، لدينا الآن صفحة html فارغة عند معاينتها في متصفحنا.

الخطوة 2: تحرير علامة النص الأساسي للألوان والخطوط الأساسية …

سنترك ملف html كما هو ، ونقوم بتحرير ملف css فقط. أضف الكود التالي إلى ملف css: body {background: # 444444؛ عائلة الخطوط: verdana ، arial ، sans-serif ؛ اللون: # 444444 ؛ حجم الخط: 12 بكسل ؛ margin: 0px؛} باستخدام هذا الجزء من الكود ، سنحدد جميع خصائص علامة النص الأساسي. نظرًا لأن كل المحتوى موجود في علامة النص الأساسي ، ستؤثر هذه الإعدادات على الصفحة بأكملها ، حيث تم ضبط لون الخلفية والخط (اللون) على الرمادي الداكن ، وتم تعيين عائلة الخط (عائلة الخطوط) على verdana. إذا كان الكمبيوتر المستخدم لعرض موقعنا لا يحتوي على الخط "verdana" ، فسيتم عرض موقعنا بالخط "arial". يمكنك إضافة المزيد من الخطوط إلى القائمة. "sans-serif" هو النوع العام الذي سيتم استخدامه عند عدم توفر أي خط قمت بتوفيره. تم تعيين حجم الخط (حجم الخط) على 12 بكسل. هذه قيمة مطلقة. إذا كنت تريد تعديل أحجام الخطوط الأخرى (مثل الرؤوس ، والفقرات ، وعناصر القائمة ، …) يمكنك استخدام الوحدة النسبية "em" بدلاً من "px". بهذه الطريقة ، إذا كنت ترغب في تغيير حجم موقع الويب الخاص بك ، فسيتعين عليك فقط تغيير حجم خط النص الأساسي. تم تعيين الهامش على 0 بكسل لجميع الجوانب الأربعة لعلامة النص الأساسي. يتم ذلك للتأكد من أن الموقع سوف يلتصق بأعلى النافذة.

الخطوة 3: إضافة حاوية مع رأس ومحتوى

سنقوم الآن بإضافة الحاوية. هذا ببساطة عبارة عن div مركزي يحتوي على موقعنا الإلكتروني بالكامل. في هذه الحاوية ، سنضيف قسمين آخرين ؛ a content div و header div. سيبدو ملف html الخاص بنا الآن بهذا الشكل: test Content Header سنضيف الكود التالي إلى ملف css: div # container {width: 800px؛ الهامش: 0px auto؛ الخلفية: #FFFFFF ؛ المساحة المتروكة: 0px؛} div # content {width: 800px؛ أعلى الحشو: 100 بكسل ؛ الخلفية: أصفر ؛} div # header {width: 800px؛ الارتفاع: 100 بكسل ؛ الخلفية: أزرق ؛ الموقف: مطلق. أعلى: 0 بكسل؛}. clearfix: بعد {content: "."؛ العرض محجوب؛ الارتفاع: 0؛ واضحة على حد سواء؛ visibility: hidden؛}. clearfix {display: inline-block؛} / * Hide from IE Mac / * /. clearfix {display: block؛} div # container تعني أن لدينا علامة div بالمعرف "container". سنضيف بعض الألوان و "margin: 0px auto؛" للتأكد من توسيط الحاوية الخاصة بنا في الصفحة ، يجب أن نعطي المحتوى مساحة أعلى والرأس قيمة مطلقة مع "top: 0px" للتأكد من وضع الرأس فوق المحتوى الآخر. لا تمانع الألوان القبيحة. إنه فقط لتسهيل قراءة الألوان ورؤية divs المختلفة. سنحتاج إلى رمز الإصلاح الغريب هذا للتأكد من أن عناصر التنقل والمحتوى (التي تمت إضافتها في الخطوة التالية) لا تسقط من div المحيطة.

الخطوة 4: أنشئ قسمين في Content Div للملاحة والمحتوى الفعلي

سنضيف الآن قسمي div آخرين في محتوى div. واحد للتنقل والآخر للمحتوى الفعلي. ستضيف الرمز الجديد:

التنقل المحتوى الرئيسي سنضيف بعض كود css لعرض عناصر التنقل والمحتوى الرئيسي div # nav {width: 200px؛ تعويم: اليسار؛ الخلفية: برتقالي ؛} div # maincontent {width: 600px؛ تعويم: صحيح ؛ background: pink؛} لاحظ حقيقة أن كلا قسمي div كلاهما عائم. إذا لم نضع كود clearfix الإضافي في الخطوة السابقة ، فسوف تطفو divs خارج div المحيط. باستخدام طريقة clearfix ، سنتأكد من عدم حدوث ذلك.

الخطوة 5: إضافة بعض Divs الإضافية للبنية في التنقل

سنقوم الآن بإضافة بعض divs الإضافية إلى كل من div "nav" لإنشاء نوع من البنية في صفحة الويب الخاصة بنا. غيّر الجزء التالي من التعليمات البرمجية:

• فو
• شريط

سنقوم الآن بإعلان جزء من الكود لتحديد كيفية عرض div "navblock". لاحظ أن navblock يحتوي على فئة وليس معرف. السبب في ذلك بسيط. يتم عرض divs بمعرف مرة واحدة فقط (كتلة التنقل ، الرأس ، التذييل ، …). يمكن عرض Divs مع الفئات أكثر من مرة. هنا سنستخدم فئة. فقط في حالة رغبتنا في إضافة كتلة تنقل أخرى لاحقًا on.div.navblock {width: 180px؛ الهامش: 5 بكسل تلقائي ؛ border: 1px solid red؛} إذا أردنا إضافة كتلة أخرى من التنقل ، فكل ما عليك فعله هو إضافة هيكل… new. سيبدو الرمز الخاص بك الآن بهذا الشكل ؛

• فو
• شريط
• بوو
• بعيد

الخطوة 6: أضف بعض Divs الإضافية للبنية في المحتوى الرئيسي

سنفعل الشيء نفسه الآن لمحتوى div للمحتوى الرئيسي ، ويبدو الكود الآن على النحو التالي:

أبجد هوز دولور الجلوس امات، …

مرة أخرى ، سنضيف جزءًا من التعليمات البرمجية إلى ملف css الخاص بنا لتحديد كيفية عرض div: div.contentblock {width: 580px؛ الهامش: 5 بكسل تلقائي ؛ border: 1px Solid white؛} يمكننا الآن إضافة كتلة أخرى من المحتوى عن طريق إضافة "…" أخرى في div المحتوى الرئيسي مثل هذا ؛

أبجد هوز دولور الجلوس امات، …

Nunc cursus ، justo eget elementum

الخطوة 7: اجعل الموقع أقل قبحًا

الآن الجزء الممتع. الآن بعد أن أصبح لدينا بنية div الرئيسية ، يمكننا تغيير الألوان إلى شيء أقل فوضوية / قبيح /… ما عليك سوى التلاعب بالألوان الموجودة في ملف css. هذا هو ملف html الكامل لصفحة الويب المعروضة في الصورة: اختبار

• فو
• شريط
• بوو
• بعيد

أبجد هوز دولور الجلوس امات، …

Nunc cursus ، justo eget elementum

Header وهذا هو ملف css الكامل: body {background: # 444444؛ عائلة الخطوط: verdana ، arial ، sans-serif ؛ اللون: # 444444 ؛ حجم الخط: 12 بكسل ؛ الهامش: 0px؛} div # container {width: 800px؛ الهامش: 0px auto؛ الخلفية: #FFFFFF ؛ المساحة المتروكة: 0px؛} div # content {width: 800px؛ أعلى الحشو: 100 بكسل ؛ الخلفية: #FFFFFF؛} div # header {width: 800px؛ الارتفاع: 100 بكسل ؛ الخلفية: # 888888 ؛ الموقف: مطلق. أعلى: 0px؛} div # nav {width: 200px؛ تعويم: اليسار؛ الخلفية: #FFFFFF؛} div # maincontent {width: 600px؛ تعويم: صحيح ؛ الخلفية: #DDDDDD؛} div.navblock {width: 180px؛ الهامش: 5 بكسل تلقائي ؛ border: 1px solid #DDDDDD؛} div.contentblock {width: 580px؛ الهامش: 5 بكسل تلقائي ؛ border: 1px solid #FFFFFF؛}. clearfix: after {content: "."؛ العرض محجوب؛ الارتفاع: 0؛ واضحة على حد سواء؛ visibility: hidden؛}. clearfix {display: inline-block؛} / * Hide from IE Mac / * /. clearfix {display: block؛} الآن لديك الأساسيات. بالطبع لا يزال هناك الكثير لتعديله مثل الألوان ، وأحجام الخطوط ، وكتلة تنقل ذات مظهر أفضل ، … لكن هذه التعليمات تتعلق فقط ببنية div. إذا كنت ترغب في رؤية التعليمات الأخرى ذات الصلة ، فيمكنك دائمًا أن تسأل. سأرى ما إذا كان بإمكاني إيجاد الوقت.