المهارات التي تحتاج إلى إتقانها عند كتابة CSS في Dreamweaver

نظرًا لـ "التصور" وسهولة التشغيل، يقوم العديد من الأصدقاء بكتابة CSS في DreamWeaver، واليوم نقدم بعض "أفضل العادات" لكتابة CSS في Dreamweaver، على أمل أن تكون مفيدة للجميع.

تعمل CSS على تغيير مسار تصميم مواقع الويب. لتلبية العدد المتزايد من المصممين الذين يميلون إلى CSS، يقدم Macromedia DW MX عددًا من الميزات الجديدة والمحسنة المتعلقة بـ CSS. باستخدام هذه الميزات الجديدة، يمكنك التخطيط للتحديثات المستقبلية وتطوير المواقع الأكثر توافقًا مع معايير W3C. تتناول هذه المقالة بعض الاقتراحات لاستخدام CSS في DW MX وإبراز ميزة CSS معينة.

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

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

في الواقع، تستخدم العديد من المواقع مجموعة من هذه الأساليب الثلاثة حسب الحاجة.

من الأشياء المهمة التي يجب مراعاتها عند العمل باستخدام CSS هو حقيقة أن المتصفحات المختلفة والإصدارات المختلفة من نفس المتصفح تقوم بتحليل CSS بطرق مختلفة. بالإضافة إلى الاختلافات في متصفحات الويب، عليك أيضًا أن تدرك أن هناك العديد من المتصفحات الأخرى، مثل متصفحات السمع، والمتصفحات المعتمدة على التلفزيون، والأجهزة المحمولة مثل Palm Pilot وTTY (آلة كاتبة، آلة كاتبة عن بعد).

ما هي أفضل الممارسات؟

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

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

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

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

الخيار الأول الذي يتعين عليك القيام به هو ورقة الأنماط التي تريد استخدامها. فيما يلي تفاصيل لأوراق الأنماط المختلفة عندما يتعلق الأمر بأفضل الممارسات:

Inline CSS: ببساطة، يجب أن تحاول تجنب استخدامه. من بين العيوب الأخرى، استخدام CSS المضمن يعني أنك لا تستفيد من الميزة الحقيقية لـ CSS، وهي أنك لا تفصل المحتوى عن التنسيق. يستخدم DW MX Inline CSS بشكل أساسي لتحديد موضع عناصر الصفحة (تسمى هذه العناصر "طبقات" في واجهة مستخدم DW MX)، أو لاستخدام تأثير DHTML معين، الأمر الذي يتطلب استخدام جافا سكريبت ذو النمط المضمن لتغيير خصائص الكائن.

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

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

إنشاء ورقة أنماط CSS في DW MX

عند إنشاء ورقة أنماط CSS في DW MX (نص 》CSS Style 》ورقة أنماط جديدة)، في مربع الحوار المنبثق، لديك خياران: New Style Sheet File ) وفقط لـ الصفحة الحالية (هذا المستند فقط). حدد "ملف ورقة الأنماط الجديدة" وتبدأ عملية إنشاء CSS خارجي. يتطلب هذا الخيار منك تسمية ورقة الأنماط وتحديد موقع حفظ لها قبل عملية الإنشاء الفعلية؛ أما الخيار الآخر، هذا المستند فقط، فسيقوم بكتابة التعليمات البرمجية ذات الصلة مباشرة إلى الصفحة.

يمكنك أيضًا تحديد ورقة أنماط موجودة لتحرير أو إضافة تعريفات جديدة في مربع الحوار New Style.

هل ينبغي توصيلها بـ CSS خارجي أم استيرادها؟

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

يعد الاتصال هو الأسلوب الأكثر استخدامًا. حدد "رابط" لتوصيل ورقة الأنماط بالصفحة. سيضيف الترميز التالي إلى صفحتك:

خيار الاتصال مدعوم من جميع المتصفحات التي تدعم CSS. إذا كنت تريد أن تتمكن بعض المتصفحات القديمة (مثل Netscape 4.x) من "رؤية" ورقة الأنماط هذه، فستحتاج إلى استخدام الطريقة التالية.

إذا حددت خيار "استيراد"، فإن العلامات المستخدمة هي:

سوف يتجاهل NetSscape4 تمامًا ملف CSS المستورد ويفسر الصفحة وفقًا لملف CSS المتصل. بهذه الطريقة، يمكننا استخدام الميزات الجديدة في CSS دون القلق بشأن مشكلات توافق المتصفح.

مفتش خصائص CSS

يمكنك التبديل بسهولة إلى وضع CSS في مفتش خصائص DW MX. افتراضيًا، يعرض Property Inspector علامات الخطوط في وضع HTML الأولي. انقر على حرف "A" الصغير بجوار القائمة المنسدلة "الخطوط" وسترى أوراق أنماط CSS المتوفرة حاليًا بدلاً من قائمة علامات الخطوط.

وفي الوقت نفسه، يمكنك بسهولة العودة إلى وضع HTML.

أوراق أنماط CSS الجاهزة

إحدى ميزات CSS المثيرة في DW MX هي تضمين أوراق أنماط CSS الجاهزة. يمكن لمستخدمي CSS الجدد تجربتها أولاً. حدد ملف > جديد، وحدد أوراق أنماط CSS في مربع حوار المستند الجديد المنبثق، وستظهر قائمة بجميع CSS المتوفرة في المربع الموجود على اليمين. لممارسة ما نطلق عليه أفضل الممارسات، اختر واحدة تم وضع علامة "يمكن الوصول إليها".

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

أوراق أنماط وقت التصميم (أوراق أنماط وقت التصميم)

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

تعد أوراق أنماط وقت التصميم مفيدة أيضًا للمطورين الذين يرغبون في تطبيق CSS على جانب الخادم (مثل ASP أو PHP أو ColdFusion) أو على جانب العميل من خلال JavaScript. تعد أوراق الأنماط من جانب الخادم أيضًا طريقة أخرى للتعامل مع دعم CSS الضعيف في متصفحات العميل. لكن في الإصدارات السابقة من DW، لم تكن هذه الطريقة تسمح لك بمشاهدة التأثير الفعلي لـ CSS أثناء مرحلة التصميم. تتيح لك أوراق أنماط وقت التصميم عرض تأثيرات ورقة الأنماط في الوقت الفعلي، حتى تتمكن من العمل بصريًا في DW MX. فائدة أخرى هي أنه عند تحميل ملفات الموقع، لن تضطر بعد الآن إلى تصفح الموقع بأكمله بحثًا عن أوراق الأنماط المتكررة.

التحقق من الصحة

سواء قمت بإنشاء ورقة الأنماط الخاصة بك أو تحرير ورقة موجودة، فإن التحقق من الصحة يضمن عدم إساءة استخدام العلامات غير القياسية أو التعليمات البرمجية غير الصحيحة. لا يتضمن DW MX في حد ذاته أداة التحقق من صحة CSS، ويمكنك استخدام خدمة التحقق التي يوفرها موقع W3C. ضمن DW MX، يمكنك التحقق من صحة علامات HTML أو DHTML (ملف > التحقق من الصفحة > التحقق من صحة العلامات (لـ HTML) أو ملف > التحقق من الصفحة > التحقق من صحة XML لـ XHTML.). يوفر DW MX العديد من الأدوات المساعدة عند تطوير المواقع المستندة إلى CSS. بمساعدة MW MX، إلى جانب الفهم الجيد لـ CSS، يمكنك تطوير موقع سيصمد أمام اختبار الزمن.