البدء باستخدام تخطيط صفحة الويب DIV+CSS

هل تتعلم تخطيط CSS؟ هل مازلت غير قادر على إتقان تخطيط CSS النقي بشكل كامل؟ عادة ما يكون هناك حالتان تعيقان تعلمك:

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

سبب آخر هو أنك في حيرة من أمر خصائص طبقة العرض التقديمي المألوفة جدًا (مثل cellpadding، وhspace، وalign=left، وما إلى ذلك) ولا تعرف ما هي عبارات CSS التي تريد تحويلها إليها. بمجرد الانتهاء من حل المشكلة الأولى ومعرفة كيفية تنظيم HTML الخاص بك، سأقدم لك قائمة توضح بالتفصيل نوع CSS الذي يجب استخدامه لاستبدال سمات العرض التقديمي الأصلية.

HTML منظم

عندما نتعلم إنتاج صفحات الويب لأول مرة، فإننا نفكر دائمًا في كيفية تصميمها أولاً، مع الأخذ في الاعتبار الصور والخطوط والألوان وخطط التخطيط. ثم نستخدم Photoshop أو Fireworks لرسمها وتقطيعها إلى صور صغيرة. وأخيرًا، قم بتحرير HTML لاستعادة جميع التصميمات إلى الصفحة.

إذا كنت تريد أن يتم تصميم صفحة HTML الخاصة بك باستخدام CSS (متوافق مع CSS)، فأنت بحاجة إلى الرجوع والبدء من جديد. لا تفكر في "المظهر" أولاً، ولكن فكر أولاً في دلالات محتوى صفحتك وبنيتها.

المظهر ليس هو الشيء الأكثر أهمية. يمكن تقديم صفحة HTML جيدة التنظيم بأي مظهر، ويعتبر CSS Zen Garden مثالًا كلاسيكيًا. تساعدنا CSS Zen Garden أخيرًا على إدراك قوة CSS.

HTML ليس مخصصًا للقراءة على شاشة الكمبيوتر فقط. قد لا يتم عرض صورك المصممة بعناية في Photoshop على أجهزة المساعد الرقمي الشخصي والهواتف المحمولة وأجهزة قراءة الشاشة. ولكن يمكن عرض صفحة HTML جيدة التنظيم في أي مكان وعلى أي جهاز شبكة من خلال تعريفات مختلفة لـ CSS.

ابدأ بالتفكير

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

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

نستخدم عادة عناصر DIV لتعريف هذه الهياكل، على غرار ما يلي:

<div معرف=رأس></div>

<div معرف=محتوى></div>

<div معرف=globalnav></div>

<div معرف=subnav></div>

<div معرف=بحث></div>

<div معرف=متجر></div>

<div معرف=تذييل></div>

إنه ليس التخطيط، إنه الهيكل. هذا وصف دلالي لكتل ​​المحتوى. عندما تفهم البنية الخاصة بك، يمكنك إضافة المعرف المقابل إلى DIV. يمكن احتواء أي كتلة محتوى داخل حاوية DIV، ويمكن تضمين DIV آخر بداخلها. يمكن أن تحتوي كتل المحتوى على أي عنصر HTML --- عناوين، وفقرات، وصور، وجداول، وقوائم، وما إلى ذلك.

بناءً على ما سبق، أنت تعرف بالفعل كيفية تنظيم HTML، ويمكنك الآن تحديد التخطيط والأنماط. يمكن وضع كل كتلة محتوى في أي مكان على الصفحة، ويمكن تحديد اللون والخط والحد والخلفية وخصائص المحاذاة وما إلى ذلك للكتلة.

يعد استخدام المحددات أمرًا رائعًا

يعد اسم المعرف وسيلة للتحكم في كتلة محتوى معينة من خلال تغليف كتلة المحتوى هذه بـ DIV وإضافة معرف فريد، يمكنك استخدام محددات CSS لتحديد مظهر كل عنصر من عناصر الصفحة بدقة، بما في ذلك العناوين والقوائم والصور. أو روابط أو فقرات وما إلى ذلك. على سبيل المثال، إذا كتبت قاعدة CSS لـ #header، فيمكن أن تكون مختلفة تمامًا عن قاعدة الصورة في #content.

مثال آخر: يمكنك استخدام قواعد مختلفة لتحديد أنماط الارتباط في كتل محتوى مختلفة. شيء من هذا القبيل: #globalnav a:link أو #subnav a:link أو #content a:link. يمكنك أيضًا تحديد أنماط مختلفة لنفس العنصر في كتل محتوى مختلفة. على سبيل المثال، حدد نمط p في #content و #footer من خلال #content p و #footer p على التوالي. من الناحية الهيكلية، تتكون صفحتك من صور وروابط وقوائم وفقرات وما إلى ذلك. ولا تؤثر هذه العناصر في حد ذاتها على جهاز الشبكة الذي يتم عرضها عليه (المساعد الرقمي الشخصي أو الهاتف المحمول أو تلفزيون الإنترنت). ويمكن تعريفها بأنها أي مظهر للأداء.

تعتبر صفحة HTML المنظمة بعناية بسيطة للغاية، ويتم استخدام كل عنصر لأغراض هيكلية. عندما تريد وضع مسافة بادئة لفقرة، لا تحتاج إلى استخدام علامة الاقتباس، فقط استخدم علامة p وأضف قاعدة هامش CSS إلى p لتحقيق غرض المسافة البادئة. p عبارة عن علامة منظمة والهامش هو سمة عرض تقديمي. الأول ينتمي إلى HTML والأخير ينتمي إلى CSS. (هذا هو الفصل بين البنية والتعبير.)

لا تحتوي صفحات HTML جيدة التنظيم على علامات سمات تقريبًا. الكود نظيف وموجز للغاية. على سبيل المثال، الكود الأصلي <table width=80% cellpadding=3 border=2 align=left> يمكنه الآن كتابة <table> فقط في HTML، وكل الأشياء التي تتحكم في الأداء تتم كتابتها في CSS في HTML المنظم هو جدول، وليس أي شيء آخر (مثل استخدامه للتخطيط وتحديد المواقع).

تدرب على هيكلة نفسك

ما ورد أعلاه هو مجرد البنية الأساسية في التطبيق الفعلي، حيث يمكنك ضبط كتل المحتوى وفقًا لاحتياجاتك. غالبًا ما يحدث تداخل DIV، وسترى أن هناك طبقات أخرى في طبقة الحاوية، ذات بنية مشابهة لما يلي:

<div معرف=navcontainer>

<div معرف=globalnav>

<ul>قائمة</ul>

</div>

<معرف div=subnav>

<ul>قائمة أخرى</ul>

</div>

</div>

تتيح لك عناصر div المتداخلة تحديد المزيد من قواعد CSS للتحكم في العرض التقديمي، على سبيل المثال، يمكنك منح #navcontainer قاعدة لتوسيط القائمة على اليمين، وإعطاء #globalnav قاعدة لتوسيط القائمة على اليسار، وإعطاء #subnav قاعدة أخرى. قاعدة لتوسيط القائمة بالكامل.