كيفية تصميم صفحة ويب بسيطة في Div: 4 خطوات (بالصور)

جدول المحتويات:

كيفية تصميم صفحة ويب بسيطة في Div: 4 خطوات (بالصور)
كيفية تصميم صفحة ويب بسيطة في Div: 4 خطوات (بالصور)

فيديو: كيفية تصميم صفحة ويب بسيطة في Div: 4 خطوات (بالصور)

فيديو: كيفية تصميم صفحة ويب بسيطة في Div: 4 خطوات (بالصور)
فيديو: كيفية طريقة اضافة الأصدقاء المقربون على تطبيق الانستقرام التحديث الجديد 2024, أبريل
Anonim

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

خطوات

الخطوة 1. اعلم أن علامة "div" تُستخدم أساسًا لإنشاء مناطق أو أقسام منفصلة لصفحة موقع الويب

هذا من بين العناصر القوية للغاية في "XHTML" لأنه ضروري لوضع تصميم صفحة الويب باستخدام "CSS". بكلمات بسيطة ، تعني هذه العملية تنفيذ مواقع خالية من استخدام الجداول للتخطيط وتحديد المواقع.

الخطوة الثانية: إنشاء ورقة أنماط - تستخدم علامات "Div" أوراق الأنماط التي تسمح لتصميم الويب الخاص بالموقع أن يكون مستقلاً عن البيانات

يمكن إدراج تصميم الخلفيات بالألوان والخطوط والعرض والارتفاع والتخطيط وموضع الصفوف أو الأعمدة في أوراق الأنماط مع ترك كود div ومعلومات فقط على الصفحات الفعلية.

  • يمكنك إنشاء ورقة أنماط كمستند آخر ثم ربطها. افتح مستندًا جديدًا في المفكرة ، واكتب الكود الخاص بك به واحفظه تحت الامتداد ".css".
  • خصائص CSS المفيدة جدًا هي "لون الخلفية" و "الارتفاع" و "العرض" و "عائم" و "مسح".

الخطوة الثالثة. ربط ورقة الأنماط - يمكنك ربط ورقة الأنماط باستخدام علامة الارتباط

يجب استخدام هذا في قسم "الرأس" في موقع الويب الخاص بك. على سبيل المثال. يجب عليك كتابة المسار إلى ملف CSS الخاص بك في المكان الذي تمت كتابة "path" فيه في هذا المثال.

صمم صفحة ويب بسيطة في Div الخطوة 1
صمم صفحة ويب بسيطة في Div الخطوة 1
صمم صفحة ويب بسيطة في Div الخطوة 2
صمم صفحة ويب بسيطة في Div الخطوة 2
صمم صفحة ويب بسيطة في Div الخطوة 3
صمم صفحة ويب بسيطة في Div الخطوة 3

الخطوة الأولى: فهم فوائد استخدام علامات div أو علامات بدون جدول:

  • تحميل المواقع يصبح أسرع. تعمل مواقع الويب التي تعتمد على علامات "div" على تشغيل المتصفحات بشكل أسرع نظرًا لخفة وزنها. يتم التحكم في "Div" من خلال أوراق الأنماط المتتالية ، وبالتالي ، يحتاج إلى ترميز أقل يساعد في الحفاظ على حجم الملف عند الحد الأدنى.
  • "Div" سهل الاستخدام لجميع محركات البحث - مواقع الويب المستندة إلى CSS هي صديقة لتحسين محرك البحث لأنها تتيح لمصمم الويب الاحتفاظ بالمقالات الرئيسية في المقدمة مما يسمح لمحركات البحث بالعثور على المحتويات الرئيسية بسهولة أكبر.
  • يحفظ موقع الويب المستند إلى علامة "div" النطاق الترددي. يحتوي موقع الويب الذي لا يحتوي على جدول على حجم ملف أصغر ، مما يعني أنه يوفر النطاق الترددي الخاص بك. إذا كان لديك موقع حركة مرور ضخم ، حيث يتم تصفح كل صفحة من قبل زوار الموقع ، فيجب عليك توفير حجم النطاق الترددي من خلال عدم وجود جداول. قد يكون مقدار النطاق الترددي المحفوظ مفيدًا خلال فترة زمنية أو في نهاية الشهر.
  • الكود الأنظف - تقوم مواقع الويب التي تستخدم علامات 'div' و CSS بإنشاء رمز أكثر وضوحًا. يسمح هذا الرمز الأنظف لبرامج الزحف لمحركات البحث بقراءة المحتوى الفعلي.

موصى به: