هل تتعلم تخطيط 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 id="header"＞＜/div＞ ＜div id="content"＞＜/div＞ ＜div id="globalnav"＞＜/div＞ ＜div id="subnav"＞＜/div＞ ＜div معرف = "بحث" ＞＜/div＞ ＜div معرف = "متجر" ＞＜/div＞ ＜div id="footer"＞＜/div＞ |