طريقة التنفيذ منظمة HTML

بنية DIV+CSS

هل تتعلم تخطيط CSS؟ ألا يمكنك إتقان تخطيط CSS النقي بالكامل؟ عادة ما تكون هناك حالتان تعيق دراستك:

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

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

الهيكل HTML

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

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

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

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

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

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

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

شعار واسم الموقع

محتوى الصفحة الرئيسية

التنقل في الموقع (القائمة الرئيسية)

القائمة الفرعية

مربع البحث

المنطقة الوظيفية (مثل عربة التسوق ، أمين الصندوق)

تذييل (حقوق الطبع والنشر والبيانات القانونية ذات الصلة)

عادة ما نستخدم عناصر div لتحديد هذه الهياكل ، مثل هذا:

＜ div id = header ＞＜/div ＞

＜ معرف DIV = المحتوى ＞＜/div ＞

＜ div id = GlobalNav ＞＜/div ＞

＜ Div ID = SubNav ＞＜/div ＞

＜ DIV ID = Search ＞＜/div ＞

＜ DIV ID = Shop ＞＜/div ＞

＜ DIV ID = تذييل ＞＜/div ＞

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

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

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

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

مثال آخر هو: يمكنك تحديد أنماط الارتباط في كتل محتوى مختلفة من خلال قواعد مختلفة. على غرار هذا: #globalnav a: link أو #subnava: link أو #content a: link. يمكنك أيضًا تحديد العناصر نفسها في كتل المحتوى المختلفة مع أنماط مختلفة. على سبيل المثال ، يتم تعريف أنماط P في #Content و #Footer بواسطة #Content P و #FooterP ، على التوالي. من الناحية الهيكلية ، تتكون صفحتك من الصور والروابط والقوائم والفقرات ، وما إلى ذلك. هذه العناصر نفسها ليس لها تأثير على جهاز الشبكة (PDA أو الهاتف المحمول أو تلفزيون الشبكة). يمكن تعريفها على أنها أي مظهر.

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

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

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

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

＜ Div ID = Navcontainer ＞

＜ Div ID = GlobalNav ＞

＜ ul ＞ قائمة ＜/ul ＞

＜/div ＞

＜ div id = subnav ＞

＜ ul ＞ قائمة أخرى ＜/ul ＞

＜/div ＞

＜/div ＞

تتيح لك عناصر Div المتداخلة تحديد المزيد من قواعد CSS للتحكم في الأداء ، على سبيل المثال: يمكنك إعطاء #NavContainer قاعدة لجعل القائمة بشكل صحيح ، ثم منح #globalnav قاعدة لجعل القائمة اليسار ، وإعطاء #Subnav قائمة أخرى مختلفة تمامًا.

استبدل الطرق التقليدية بـ CSS

ستساعدك القائمة التالية في استبدال الطرق التقليدية بـ CSS:

سمات HTML وطرق CSS المقابلة

سمات HTML

وصف طريقة CSS

محاذاة = اليسار

محاذاة = تعويم يمين: اليسار ؛

تعويم: صحيح. استخدم CSS لتعويم أي عنصر: الصورة ، الفقرة ، DIV ، العنوان ، الجدول ، القائمة ، إلخ.

عند استخدام سمة Float ، يجب عليك تحديد عرض العنصر العائم.

marginWidth = 0LeftMargin = 0 marginheight = 0 topmargin = 0 margin: 0 ؛ باستخدام CSS ، يمكن تعيين الهامش على أي عنصر ، ليس فقط عنصر الجسم ، ولكن الأهم من ذلك ، يمكنك تحديد قيم الهامش في الأعلى واليمين والأسفل واليسار للعنصر على التوالي.

VLINK =#333399 Link =#000000 Link =#3333ff a: link#3ff ؛

ج: زار: #339 ؛

A: Hover: #999 ؛

ج: نشط: #00F ؛

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

bgColor = #fffff الخلفية اللون: #ffff ؛ في CSS ، يمكن لأي عنصر تحديد لون الخلفية ، وليس فقط عناصر الجسم والجدول.

BorderColor = #ffffff border-color: #ffff ؛ يمكن لأي عنصر تعيين حدود (Boeder) ، يمكنك تحديد الأعلى واليمين والأسفل واليسرى على التوالي

الحدود = 3cellspacing = 3 عرض الحدود: 3px ؛ باستخدام CSS ، يمكنك تحديد حدود الجدول كأناقة موحدة ، أو يمكنك تحديد لون الحدود العلوية واليمين واليسرى على التوالي.

يمكنك استخدام Table ، TD أو TH المختارين.

إذا كنت بحاجة إلى ضبط تأثير بلا حدود ، فيمكنك استخدام تعريف CSS: collapse: الانهيار ؛

＜ BR واضح = اليسار ＞

＜ BR واضح = يمين ＞

＜ br clear = all ＞

واضح: اليسار

واضح: صحيح ؛

واضح: كلاهما ؛

تستخدم العديد من تخطيطات العمود 2 أو 3 عمود السمة العائمة لتحديد موقعها. إذا قمت بتحديد لون الخلفية أو صورة الخلفية في الطبقة العائمة ، فيمكنك استخدام السمة Clear.

cellpadding = 3

vspace = 3

Hspace = 3 حشوة: 3px ؛ مع CSS ، يمكن لأي عنصر تعيين سمات الحشو. وبالمثل ، يمكن أن تضع الحشو أعلى ، يمين ، أسفل ويسار على التوالي. الحشو شفاف.

محاذاة = مركز محاذاة النص: المركز ؛

يمين الهامش: السيارات ؛ الهامش اليساري: السيارات ؛

تعمل المحاذاة النصية فقط مع النص.

يمكن أن تتركز مستويات الكتلة مثل Div و P أفقياً من خلال الهامش اليمين: Auto ؛ والهامش اليساري: السيارات ؛

بعض النصائح المؤسفة وبيئات العمل

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

موقع موارد آخر لنصائح CSS هو Big John و Holly Bergevin هو كل شيء.

فهم السلوك العائم

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