استخدام معالجات CSS الأولية في Dreamweaver

  1. دليل مستخدم Dreamweaver
  2. مقدمة
    1. أساسيات تصميم الويب التفاعلي
    2. الجديد في Dreamweaver
    3. تطوير الويب باستخدام Dreamweaver - نظرة عامة
    4. Dreamweaver | الأسئلة الشائعة
    5. اختصارات لوحة المفاتيح‬‏‫
    6. متطلبات النظام لبرنامج Dreamweaver
    7. ملخص الميزات
  3. Dreamweaver وCreative Cloud
    1. مزامنة إعدادات Dreamweaver مع Creative Cloud
    2. مكتبات Creative Cloud في Dreamweaver
    3. استخدام ملفات Photoshop في Dreamweaver
    4. العمل باستخدام Adobe Animate وDreamweaver
    5. استخراج ملفات SVG المحسّنة من المكتبات
  4. مساحات عمل Dreamweaver وطرق عرضه
    1. مساحة عمل Dreamweaver
    2. تحسين مساحة عمل Dreamweaver للتطوير المرئي
    3. البحث عن الملفات استنادًا إلى اسم الملف أو المحتوى | Mac OS
  5. إعداد المواقع
    1. حول مواقع Dreamweaver
    2. إعداد إصدار محلي من موقعك
    3. الاتصال بخادم نشر
    4. إعداد خادم اختبار
    5. استيراد إعدادات موقع Dreamweaver وتصديرها
    6. إحضار مواقع ويب موجودة من خادم بعيد إلى جذر موقع الويب المحلي
    7. ميزات الوصول في Dreamweaver
    8. الإعدادات المتقدمة
    9. تعيين تفضيلات الموقع لنقل الملفات
    10. تحديد إعدادات خادم الوكيل في Dreamweaver
    11. مزامنة إعدادات Dreamweaver مع Creative Cloud
    12. استخدام Git في Dreamweaver
  6. إدارة الملفات
    1. إنشاء الملفات وفتحها
    2. إدارة الملفات والمجلدات
    3. إحضار الملفات من الخادم ووضعها فيه
    4. سحب الملفات وإيداعها
    5. مزامنة الملفات
    6. مقارنة الملفات لمعرفة الاختلافات
    7. حماية ملفات ومجلدات في موقع Dreamweaver
    8. تمكين Design Notes لمواقع Dreamweaver وتعطيلها
    9. منع الاستغلال المحتمل لـ Gatekeeper
  7. التخطيط والتصميم
    1. استخدام الأدوات المساعدة المرئية للتخطيط
    2. حول استخدام CSS لتخطيط صفحاتك
    3. تصميم مواقع ويب تفاعلية باستخدام Bootstrap
    4. إنشاء استعلامات الوسائط واستخدامها في Dreamweaver
    5. عرض المحتوى باستخدام الجداول
    6. الألوان
    7. تصميم استجابة باستخدام مخططات الشبكة المرنة
    8. ميزة Extract في Dreamweaver
  8. CSS
    1. فهم أوراق الأنماط المتتالية
    2. تخطيط الصفحات باستخدام CSS Designer
    3. استخدام معالجات CSS الأولية في Dreamweaver
    4. كيفية تعيين تفضيلات أنماط CSS في Dreamweaver
    5. نقل قواعد CSS في Dreamweaver
    6. تحويل CSS مضمنة إلى قاعدة CSS في Dreamweaver
    7. استخدام علامات div
    8. تطبيق تدرجات على الخلفية
    9. إنشاء تأثيرات CSS3 الانتقالية وتحريرها في Dreamweaver
    10. تنسيق التعليمات البرمجية
  9. محتويات الصفحة وأصولها
    1. تعيين خصائص الصفحة
    2. تعيين خصائص عناوين CSS وخصائص ارتباطات CSS
    3. استخدام النص
    4. البحث عن النص والعلامات والسمات واستبدالها
    5. لوحة DOM
    6. التحرير في Live View
    7. ترميز المستندات في Dreamweaver
    8. تحديد العناصر وعرضها في النافذة Document
    9. تعيين خصائص النص في عارض الخصائص
    10. إجراء التدقيق الإملائي لصفحة ويب
    11. استخدام القواعد الأفقية في Dreamweaver
    12. إضافة مجموعات الخطوط وتعديلها في Dreamweaver
    13. استخدام الأصول
    14. إدراج التواريخ وتحديثها في Dreamweaver
    15. إنشاء الأصول المفضلة وإدارتها في Dreamweaver
    16. إدراج الصور وتحريرها في Dreamweaver
    17. إضافة كائنات وسائط
    18. إضافة مقاطع الفيديو في Dreamweaver
    19. إدراج فيديو HTML5
    20. إدراج ملفات SWF
    21. إضافة تأثيرات صوتية
    22. إدراج صوت HTML5 في Dreamweaver
    23. العمل باستخدام عناصر المكتبة
    24. استخدام النصوص العربية والعبرية في Dreamweaver
  10. الربط والتنقل
    1. حول الربط والتنقل
    2. الربط
    3. مخططات الصور
    4. استكشاف أخطاء الارتباطات وحلها
  11. عناصر واجهة jQuery وتأثيراتها
    1. استخدام عناصر واجهة مستخدم jQuery UI والجوال في Dreamweaver
    2. استخدام تأثيرات jQuery في Dreamweaver
  12. كتابة التعليمات البرمجية لمواقع الويب
    1. حول كتابة التعليمات البرمجية في Dreamweaver
    2. بيئة كتابة التعليمات البرمجية في Dreamweaver
    3. تعيين تفضيلات التعليمات البرمجية
    4. تخصيص ألوان التعليمات البرمجية
    5. كتابة تعليمة برمجية وتحريرها
    6. تلميحات التعليمات البرمجية وإكمال التعليمات البرمجية
    7. طي التعليمات البرمجية وتوسيعها
    8. إعادة استخدام التعليمات البرمجية مع أجزاء التعليمات البرمجية
    9. فحص التعليمات البرمجية
    10. تحسين التعليمة البرمجية
    11. تحرير التعليمة البرمجية في طريقة العرض Design
    12. العمل باستخدام محتوى العنوان للصفحات
    13. إدراج تضمينات على جانب الخادم في Dreamweaver
    14. استخدام مكتبات العلامات في Dreamweaver
    15. استيراد علامات مخصصة إلى Dreamweaver
    16. استخدام سلوكيات JavaScript (إرشادات عامة)
    17. تطبيق سلوكيات JavaScript المضمنة
    18. نبذة عن لغتي XML وXSLT
    19. تنفيذ تحويلات XSL على جانب الخادم في Dreamweaver
    20. تنفيذ تحويلات XSL على جانب العميل في Dreamweaver
    21. إضافة كيانات أحرف لـ XSLT في Dreamweaver
    22. تنسيق التعليمات البرمجية
  13. عمليات سير العمل على مستوى المنتجات
    1. تثبيت الملحقات واستخدامها في Dreamweaver
    2. التحديثات من داخل التطبيق في Dreamweaver
    3. إدراج مستندات Microsoft Office في Dreamweaver ‏(Windows فقط)
    4. استخدام Fireworks وDreamweaver
    5. تحرير المحتوى في مواقع Dreamweaver باستخدام Contribute
    6. تكامل Dreamweaver مع تطبيق Business Catalyst
    7. إنشاء حملات إعلانية خاصة عبر البريد الإلكتروني
  14. القوالب
    1. حول قوالب Dreamweaver
    2. التعرف على القوالب والمستندات القائمة على القوالب
    3. إنشاء قالب Dreamweaver
    4. إنشاء مناطق قابلة للتحرير في القوالب
    5. إنشاء مناطق وجداول التكرار في Dreamweaver
    6. استخدام المناطق الاختيارية في القوالب
    7. تحديد سمات العلامات القابلة للتحرير في Dreamweaver
    8. كيفية إنشاء قوالب متداخلة في Dreamweaver
    9. تحرير القوالب وتحديثها وحذفها
    10. تصدير محتوى xml واستيراده في Dreamweaver
    11. تطبيق أو إزالة قالب من مستند موجود
    12. تحرير المحتوى في قوالب Dreamweaver
    13. قواعد بناء الجملة لعلامات القوالب في Dreamweaver
    14. تعيين تفضيلات التمييز لمناطق القالب
    15. فوائد استخدام القوالب في Dreamweaver
  15. شاشات الهاتف المحمول والشاشات المتعددة
    1. إنشاء استعلامات الوسائط
    2. تغيير اتجاه الصفحة للأجهزة الجوالة
    3. إنشاء تطبيقات الويب للأجهزة الجوالة باستخدام Dreamweaver
  16. المواقع والصفحات ونماذج الويب الديناميكية
    1. فهم تطبيقات الويب
    2. إعداد الكمبيوتر لتطوير التطبيقات
    3. استكشاف أخطاء اتصالات قاعدة البيانات وحلها
    4. إزالة برامج الاتصال النصية في Dreamweaver
    5. تصميم صفحات ديناميكية
    6. نظرة عامة على مصادر المحتوى الديناميكي
    7. تعريف مصادر المحتوى الديناميكي
    8. إضافة محتوى ديناميكي إلى الصفحات
    9. تغيير المحتوى الديناميكي في Dreamweaver
    10. عرض سجلات قاعدة البيانات
    11. توفير البيانات المباشرة واستكشاف أخطائها وحلها في Dreamweaver
    12. إضافة سلوكيات خادم مخصصة في Dreamweaver
    13. إنشاء النماذج باستخدام Dreamweaver
    14. استخدام النماذج لجمع معلومات من المستخدمين
    15. إنشاء نماذج ColdFusion وتمكينها في Dreamweaver
    16. إنشاء نماذج الويب
    17. دعم HTML5 محسّن لعناصر النماذج
    18. تطوير نموذج باستخدام Dreamweaver
  17. إنشاء التطبيقات مرئيًا
    1. إنشاء صفحات رئيسية وصفحات تفاصيل في Dreamweaver
    2. إنشاء صفحات البحث والنتائج
    3. إنشاء صفحة إدراج سجل
    4. إنشاء صفحة تحديث سجل في Dreamweaver
    5. إنشاء صفحات حذف سجل في Dreamweaver
    6. استخدام أوامر ASP لتعديل قاعدة البيانات في Dreamweaver
    7. إنشاء صفحة تسجيل
    8. إنشاء صفحة تسجيل دخول
    9. إنشاء صفحة يمكن للمستخدمين المخولين فقط الوصول إليها
    10. تأمين المجلدات في Coldfusion باستخدام Dreamweaver
    11. استخدام مكونات ColdFusion في Dreamweaver
  18. اختبار مواقع الويب ومعاينتها ونشرها
    1. معاينة الصفحات
    2. معاينة صفحات ويب Dreamweaver على أجهزة متعددة
    3. اختبار موقع Dreamweaver

 

تعرف على كيفية العمل باستخدام ملفات معالجات CSS الأولية وتحويلها برمجيًا في داخل Dreamweaver.

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

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

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

يستخدم Dreamweaver منشئ Ruby-Saas المضمن للتحويل البرمجي لملفات SCSS وLESS. يدعم Dreamweaver أيضًا أطر عمل Compass وBourbon لتحويل ملفات Sass برمجيًا. 

يستند LESS إلى لغة JavaScript، بينما يستند Sass إلى Ruby. ومع ذلك، لا يلزم عليك معرفة أي شيء عن أيّ من هاتين اللغتين. ولا يلزم عليك استخدام سطر الأوامر لتحويل الملفات برمجيًا إلى CSS. يقوم Dreamweaver تلقائيًا بتحويل الملفات برمجيًا في CSS باستخدام مكتبة less.js JavaScript عندما تقوم بتحميل هذه الملفات أو تحريرها أو حفظها.

الإصدارات المدعومة:

  • Sass: 3.4.25
  • LESS: 2.7.2
  • Compass: 1.0.3
  • Bourbon: 4.2.6
  • Bourbon Neat: 1.7.3
  • Bourbon Bitters: 1.2.0

طريقة معالجة Dreamweaver لمعالجات CSS الأولية

تختلف طريقة معالجة Dreamweaver لمعالجات CSS الأولية سواءٌ ما إذا كنت قد قمت بتحديد موقع أم لا. إذا قمت بتحديد موقع، يمكنك إعداد تفضيلات معالجات CSS الأولية وأيضًا استخدام أطر عمل Compass وBourbon من داخل Dreamweaver.

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

تابع القراءة لمعرفة كيفية استخدام Dreamweaver مع معالجات CSS الأولية:

Dreamweaver 2017 ومعالجات CSS الأولية

في Dreamweaver 2017، تم تضمين دعم معالجات CSS الأولية في Dreamweaver. أي أنه يمكنك العمل على ملفات Sass/LESS/SCSS داخل Dreamweaver. يتيح لك النقر فوق Ctrl+S or Cmd+S فقط التحويل البرمجي التلقائي للغة CSS في Dreamweaver. يمكنك أيضًا تحويل ملفات CSS برمجيًا يدويًا باستخدام Tools > Compile (أو F9). تظهر التغييرات أيضًا في جميع ملفات HTML المفتوحة حيث يتم ربط CSS التي تم تحوليها برمجيًا هذه أو إرفاقها.

ها هو سير عمل على مستوى عالٍ للمهام المتضمنة عند استخدام معالجات CSS الأولية:

  • قم بتثبيت برنامج التحويل البرمجي المناسب إذا كنت تريد استخدام Compass أو Bourbon من داخل Dreamweaver. يتم هذا التثبيت من خلال عملية من نقرة واحدة. قم بتعيين إعدادات معالجات CSS الأولية.

قم بتثبيت برنامج التحويل البرمجي فقط إذا كنت تريد نسخة من ملفات إطار العمل (Bourbon)، أو إذا كنت تريد إنشاء ملفات scss الافتراضية وملفات التكوين المستندة إلى Ruby ‏(Compass). يوصى بالاحتفاظ بنسخة من ملفات إطار العمل. إذا تمت إزالة فئات Mixin أو دالات معينة من إطار عمل التأليف في المراجعات اللاحقة، فلا يزال بإمكانك الوصول إلى ملفات المعالج الأولي داخل موقعك.

  • تأكد من تمكين التحويل البرمجي التلقائي. ثم اضغط Save لتحديث ملفات CSS.
  • (اختياري) قم بعرض التغييرات التي تظهر في طريقة العرض Live أو في Real-time Preview في جميع صفحات HTML التي يتم فيها استخدام css الذي تم إنشاؤه.

Dreamweaver 2015 ومعالجات CSS الأولية

في Dreamweaver 2015 والإصدارات السابقة من CC، يمكنك استخدام ملفات Sass وLESS و SCSS مع Dreamweaver. ومع ذلك، كان عليك التحويل البرمجي لهذه الملفات بنفسك خارج تطبيق Dreamweaver.
سوف يتمثل سير العمل لديك في الخطوات التالية:

  1. تنزيل برنامج التحويل البرمجي وتثبيته.
  2. إعداد مهمة تنظيم (Gruntfile.js) لبرنامج التحويل البرمجي لقراءة ملف Sass/LESS/SCSS.
  3. قم بإعداد مهمة أخرى للتحويل البرمجي للملف في CSS، والتي ستعمل عليها بعد ذلك في Dreamweaver.

يجب عليك تنفيذ هذه الخطوات في كل مرة تقوم فيها بإجراء تغيير في ملف Sass/LESS/SCSS لديك.

ملاحظة:

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

وإذا لم يكن لديك موقع محدد، فيمكنك اختيار تحويل ملفات Sass وLESS برمجيًا يدويًا. لكن الدعم لإطاري عمل Compass وBourbon frameworks غير مدعوم.

كيف تُستخدم معالجات CSS الأولية في Dreamweaver؟

ها هو سير عمل على مستوى عالٍ للمهام المتضمنة عند استخدام معالجات CSS الأولية:

  1. قم بتحديد موقع في Dreamweaver. تأكد أن ملف LESS الذي تحاول تحويله برمجيًا موجود في المجلد الجذر للموقع. وإذا كنت قد حددت بالفعل موقعًا وتم تضمين ملف Sass/LESS في الموقع الجذر، فواصل القيام بالخطوة التالية. لمزيد من المعلومات حول إعداد موقع، Dreamweaver راجع حول مواقع Dreamweaver.
  2. تعيين التفضيلات لمعالجات CSS الأولية (مثل تحديد موقع ملفات CSS التي تم إنشاؤها). هذه التفضيلات خاصة بالموقع. لمزيد من المعلومات، راجع تعيين تفضيلات معالجات CSS الأولية الخاصة بالموقع.
  3. إذا كنت تريد استخدام أطر عمل محددة، مثل Compass أو Bourbon، فيمكنك تحديد الإعدادات لأطر العمل هذه. لمزيد من المعلومات، راجع: استخدام إطار عمل Compass أو  استخدام إطار عمل Bourbon.
  4. إعداد إكمال تلقائي أو تحويل ملفات LESS برمجيًا يدويًا. لمزيد من المعلومات، راجع تحويل ملفات معالجات CSS الأولية برمجيًا.

ضبط التفضيلات لمعالجات CSS الأولية

يمكنك تعيين تفضيلات خاصة بالمواقع لمعالجات CSS الأولية باستخدام مربع حوار Sites > Manage Sites.

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

ملاحظة:

تنطبق الإعدادات الموجودة في أقسام General وSource & Output الفرعية على إطار عمل Ruby-Saas بشكل افتراضي.

لتعيين تفضيلات Compass، يجب عليك تحديد خانة اختيار Use Compass في قسم Compass

تعيين إعدادات معالجات CSS الأولية العامة

يمكنك تعيين تفضيلات معالجات CSS الأولية العامة التالية في مربع حوار Sites > Manage Sites > CSS Preprocessors. تنطبق هذه الإعدادات بشكل افتراضي على إطار عمل Saas.

إعدادات معالجات CSS الأولية العامة
إعدادات معالجات CSS الأولية العامة

Enable Auto Compilation on File Save

حدد هذا الخيار لتمكين التحويل البرمجي لمعالجات CSS الأولية تلقائيًا. إذا قمت بتحديد هذا الخيار، سيقوم Dreamweaver تلقائيًا بإنشاء ملف CSS عندما تقوم بحفظ ملف Sass أو LESS أو SCSS لديك. في حالة إلغاء تحديد هذا الخيار، يتعين عليك تحويل الملفات يدويًا في كل مرة تقوم فيها بإجراء تغيير.

خيارات LESS

Enable Strict Math

قم بمعالجة هذه العمليات الحسابية في أقواس فقط. فعلى سبيل المثال، تتم معالجة (100 بكسل/25 بكسل) بنجاح بينما لم تتم معالجة 20% + 10% (دون أقواس). عند تعطيل هذا الخيار، تتم معالجة جميع العمليات الحسابية في الملف.

Enable Strict Units

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

.class {
  property: 1px * 2px;
}

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

ومع تشغيل الوحدات الصارمة، يفترض Dreamweaver أن هذا خطأ في الحساب ويعرض خطأ.

Rewrite URLs as Relative URLs

يتيح هذا الخيار لك إعادة كتابة عناوين URL في ملف CSS الذي تم إنشاؤه كي تكون عناوين URL مرتبطة بالملف الذي تم إنشاؤه دائمًا.

Generate Source map

لإنشاء المخطط المصدر. المخطط المصدر عبارة عن ملف يسد الفجوة بين اللغات عالية المستوى مثل Sass وLess، واللغات منخفضة المستوى، التي يتم التحويل برمجيًا إليها، مثل CSS.

خيارات Sass/SCSS

Output File Style

تحديد نمط ملف إخراج CSS:

  • Nested - يقوم بتنسيق CSS المحول برمجيًا في بنية نمطية معروفة.
  • Compact - يقوم بتنسيق CSS المحول برمجيًا في بنية محكمة تستغرق مساحة أقل من Nested أو Expanded.
  • Compressed - يقوم بإخراج CSS في بنية مستوية.
  • Expanded - يقوم بإخراج CSS بشكل موسع مع شغل كل خاصية وقاعدة لسطر واحد. الخصائص مقصودة داخل القواعد، لكن القواعد غير مقصودة بأي طريقة. 

Create Source Comments

يقوم بإنشاء التعليقات في ملف إخراج CSS الذي يحدد التعليمة البرمجية ل CSS إلى السطر الذي تم إنشاؤه به.

Generate Source map

يقوم بإنشاء مخطط مصدر (الملف الذي يسد الفجوة بين اللغات عالية المستوى مثل Sass وLESS، واللغات منخفضة المستوى، التي يتم التحويل برمجيًا إليها، مثل CSS).

تعيين تفصيلات مصدر وإخراج CSS

يمكنك تحديد ملفات CSS التي تم إنشاؤها التي يلزم وضعها، والمسار الذين ينبغي على Dreamweaver مشاهدته وتشغيل التحويل البرمجي التلقائي عندما يتم تعديل ملف Sass/LESS في مسار ما باستخدام محرر خارجي.

ملاحظة:

تنطبق الخيارات الموجودة في قسم Source & Output بشكل افتراضي على Saas. ولتمكين هذه الخيارات لـ Compass، يجب عليك تحديد خانة اختيار Use Compass في قسم Compass

وبعد تعديل هذه الإعدادات وتثبيت Compass، يتم ترحيل جميع الإعدادات إلى config.rb. في وقت لاحق، إذا كنت تريد تعديل أي إعدادات، قم بتحرير الإعدادات مباشرة في ملف config.rb. كما لا تؤثر التغييرات التي تمت في مربع حوار Site Settings على التحويل البرمجي.

تعيين إعدادات Source & Output لـ Compass
تعيين إعدادات Source & Output لـ Compass

يمكنك تعيين تفضيلات معالجات CSS الأولية للمصدر والإخراج في حوار Sites > Manage Sites.

إعدادات معالج CSS الأولي للمصدر والإخراج
إعدادات معالج CSS الأولي للمصدر والإخراج

إخراج CSS

تحديد مكان ملف إخراج CSS المنشأ.

In the same folder as source

حدد هذا الخيار إذا كنت تريد حفظ ملفات CSS التي تم إنشاؤها في نفس المجلد الخاص بملفات Sass وLESS.

Define output folder

حدد هذا الخيار لتحديد مجلد تريد حفظ ملفات CSS التي تم إنشاؤها فيه.

Replace segment of input path

يتيح لك هذا الخيار استبدال جزء من المسار باستخدام سلاسل From وTo. على سبيل المثال، عند تعيين From: scss وTo:css، يتم وضع ملف الإخراج داخل نفس البنية الشجرية بعد استبدال SCSS في المسار css.

Source Folder

حدد المجلد الفرعي داخل جذر الموقع الذي يحتاج إلى مشاهدته. يحتوي هذا المجلد الفرعي في المعتاد على ملفات SCSS أو LESS. 

إذا قمت بتمكين Compilation في General settings، سيقوم Dreamweaver تلقائي بتشغيل معالج CSS الأولي. يقوم Dreamweaver بتشغيل التحويل التلقائي عند تعديل أي ملف داخل المجلد خارجيًا أو من داخل Dreamweaver.

استخدام إطار عمل Compass

Compass هو إطار عمل تأليف CSS مفتوح المصدر يتيح لك إنشاء أوراق أنماط CSS3 باستخدام Sass.

يوفر Dreamweaver الدعم إلى Compass. لذلك إذا قمت بإنشاء أوراق أنماط باستخدام Compass، يمكنك تحويل أوراق الأنماط هذه برمجيًا وإنشاء ملفات CSS من داخل Dreamweaver.

  1. استخدم ملفات Compass.

    إذا لم يكن لديك Compass مثبت بالفعل على نظامك، فيمكنك تثبيته من داخل Dreamweaver.

    في مربع حوار Site Setup، حدد CSS Preprocessors > Compass. حدد Use Compass ثم انقر فوق Install Files.

    تثبيت ملفات Compass
    تثبيت ملفات Compass

    يتم تثبيت جميع ملفات Compass وملف تكوين *.rb داخل مجلد موقعك، ويمكنك مشاهدتها في لوحة Files.

    ملفات Compass المثبتة
    ملفات Compass المثبتة

  2. تحديد ملف تكوين حالي مستند إلى Ruby

    إذا كان لديك Compass مثبتًا بالفعل على الكمبيوتر، وكان لديك إعداد ملف Compass *.rb، فمن داخل مربع حوار Dreamweaver Site Setup حدد المسار إلى ملف Compass *.rb داخل جذر الموقع الحالي.

    1. في مربع حوار Site Setup، حدد CSS Preprocessors > Compass.
    2. حدد خانة اختيار Use Compass.
    3. انقر فوق Specifying Ruby-based configuration file، واستعرض للوصول إلى موقع الملف.
    4. انقر فوق Save عند الانتهاء من ذلك.
    تحديد ملف تكوين حالي مستند إلى Ruby
    تحديد ملف تكوين حالي مستند إلى Ruby

    ملاحظة:

    يجب أن يوجد هذا الملف في مجلد جذر الموقع.

  3. تحديد خيارات التكوين يدويًا

    إذا لم يكن لديك خيار تكوين حالي، فيمكنك تحديد التكوينات يدويًا.

    1. في مربع حوار Site Setup، حدد CSS Preprocessors > Compass.
    2. حدد خانة اختيار Use Compass.
    3. انقر فوق Specifying Configuration Options manually. حدد خيارات التكوين التالية وانقر فوق Save.

    يتم ملء الحقول التالية تلقائيًا، ولكن يمكنك تغييرها وفقًا لمتطلباتك:

    ملاحظة:

    يجب أن تكون جميع المسارات المخزنة في هذه المسارات داخل جذر الموقع.

    HTTP Path

    المسار إلى المشروع عند التشغيل داخل خادم الويب. يتم التعيين افتراضيًا إلى "/".

    Images Directory

    الدليل الذي يتم فيه الإبقاء على الصور. الدليل نسبي لـ project_path.

    Generated Images Directory

    الدليل الذي يتم فيه الإبقاء على الصور التي تم إنشاؤها. هذا الدليل نسبي لـ project_path، ويقوم بتعيين قيمته بشكل افتراضي إلى images_dir.

    Fonts Directory

    الدليل الذي يتم فيه الإبقاء على ملفات الخط.

    Relative Assets

    يوضح ما إذا كانت وظائف أداة Compass المساعدة ينبغي أن تنشئ عناوين URL نسبية من CSS إلى الأصول أو عناوين URL مطلقة باستخدام مسار http لنوع الأصل.

  4. إذا قمت بتحديد Enable Auto Compilation on File Save، في مربع حوار Sites > Manage Sites > CSS Preprocessors، يقوم Dreamweaver بإنشاء ملف CSS في كل مرة تقوم فيها بحفظ التغييرات على ملفات Sass لديك.

    يمكنك أيضًا معاينة هذه التغييرات في الوقت الحقيقي في نافذة المستعرض لديك. لمزيد من المعلومات حول معاينة التغييرات التي قمت بها في الوقت الحقيقي في المستعرض، راجع  المعاينة في الوقت الحقيقي.

    في حالة عدم رغبتك في التحويل البرمجي التلقائي، يمكنك عندئذ تحويل ملف CSS يدويًا من خلال القيام بأي مما يلي:

    • انقر بزر الماوس الأيمن فوق ملف Sass أو LESS أو SCSS في اللوحة Files ثم انقر فوق Compile
    • انقر فوق Tools > Compile لتحويل الملف الحالي برمجيًا.
  5. يمكنك عندئذ إرفاق ملف CSS الذي تم تحويله برمجيًا بملفات HTML في موقعك. لمزيد من المعلومات، راجع الارتباط بورقة أنماط CSS خارجية.

استخدام إطار عمل Bourbon

يقوم Dreamweaver بدعم مجموعة منتجات Bourbon. إذا قمت بإنشاء أوراق أنماط باستخدام Bourbon، يمكنك تحويل أوراق الأنماط هذه برمجيًا وإنشاء ملفات CSS من داخل Dreamweaver.

يتم دعم صفات Bourbon التالية:

  • Bourbon - مكتبة خلط بسيطة وخفيفة لـ Sass
  • Bourbon Neat - إطار عمل شبكة دلالي خفيف لـ Sass وBourbon
  • Bourbon Bitters - أنماط سقالات وبنية لمشروعات Bourbon

يمكن استيراد إطار عمل Bourbon من خلال إضافة واحد مما يلي في التعليمات البرمجية:

  • @import "bourbon"  - لاستيراد Bourbon
  • @import “neat” – لاستيراد Bourbon Neat
  • @import “base” – لاستيراد Bourbon Bitter

ثم يستخدم Dreamweaver بعد ذلك إصدارًا بحزمة مسبقة من Bourbon أثناء تحويل ملفات المعالج الأولي برمجيًا.

في المقابل يمكنك تثبيت ملفات إطار عمل Bourbon لموقعك كي لا تؤثر التحديثات الإضافية لـ Dreamweaver على عمليات سير عمل التحويل البرمجي الخاصة بك. يتم نسخ ملفات إطار عمل Bourbon إلى موقعك. Bourbon هو إطار العمل المستخدم عند تشغيل التحويل البرمجي لأي من الملفات التي تستورد إطار العمل.

تثبيت ملفات Bourbon أو Bourbon Neat أو Bourbon Bitters

لتثبيت Bourbon أو أيّ من صفاته:

  1. في مربع حوار Site Setup، حدد CSS Preprocessors > Bourbon أو Bourbon Neat أو Bourbon Bitters.

  2. انقر فوق Install Files لتثبيت الملفات في موقع مجلد جذر الموقع داخل موقعك.

    تثبيت ملفات Bourbon
    تثبيت ملفات Bourbon

    يتم تثبيت جميع ملفات Bourbon داخل مجلد موقعك، ويمكنك مشاهدتها في لوحة Files.

    ملفات Bourbon المثبتة
    ملفات Bourbon المثبتة

    في حالة الفشل، يتم عرض الأخطاء في لوحة Output (Window > Results > Output)، ويتغير رمز شريط الحالة للّون الأحمر.

تحويل ملفات معالج CSS الأولي برمجيًا

إعداد التحويل البرمجي التلقائي لملفات معالج CSS الأولي

يمكنك إعداد الخيارات داخل Dreamweaver لتحويل التغييرات التي تتم في ملف Sass أو LESS برمجيًا في CSS المكافئ له. يمكنك أيضًا تحديد المواقع (داخل جذر الموقع) التي تريد حفظ CSS المنشأ بها.

  1. في مربع حوار Site Setup، حدد CSS Preprocessors > General > Enable Auto Compilation on File Save.

    تمكين التحويل البرمجي التلقائي
    تمكين التحويل البرمجي التلقائي

  2. انقر فوق CSS Preprocessors > Source & Output.

  3. حدد المواقع التي تريد حفظ ملفات CSS التي قمت بإنشائها بها. يمكنك اختيار أحد الخيارات التالية:

    In the same folder as source

    حدد هذا الخيار إذا كنت تريد حفظ ملفات CSS التي تم إنشاؤها في نفس المجلد الخاص بملفات Sass وLESS.

    Define output folder

    حدد هذا الخيار لتحديد المجلد الذي تريد حفظ ملفات CSS التي تم إنشاؤها فيه.

    Replace segment of input path

    يتيح لك هذا الخيار استبدال جزء من المسار باستخدام سلاسل From وTo.

  4. حدد المجلد الذي يحتوي على ملفات Sass أو LESS التي يحتاج Dreamweaver إلى تعقبها.

    وفي حالة عمل التغييرات لأي من الملفات داخل المجلد الذي تم تعقبه هذا، يقوم Dreamweaver تلقائيًا بتحويل الملفات بعد حفظها. 

    إعدادات معالج CSS الأولي للمصدر والإخراج
    إعدادات معالج CSS الأولي للمصدر والإخراج

    ملاحظة:

    يشاهد Dreamweaver هذه الملفات ويقوم بتحويلها برمجيًا حتى في حالة عمل التغييرات خارج Dreamweaver (باستخدام محرر نصوص على سبيل المثال).

بعد النجاح في التحويل البرمجي، يتم عرض رسالة في لوحة Output (Window > Results > Output). يتم عرض رمز الحالة في شريط الحالة باللون الأخضر. لفتح CSS المحوّل برمجيًا، انقر بشكل مزدوج فوق رسالة النجاح في اللوحة.

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

ملاحظة:

يتم إرساء Output في أسفل مساحة العمل. إذا تم إغلاق اللوحة، انقر فوق Window > لوحة Output.

يمكنك أيضًا تبديل لوحة Output (إظهار / إخفاء) باستخدام رمز الحالة عندما يكون باللون الأحمر.

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

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

التحويل البرمجي يدويًا لملف معالج CSS أولي

في بعض الحالات (مثلاً عند عدم تحديد موقع Dreamweaver)، قد تحتاج إلى جميع ملف معالج CSS أولي يدويًا.

وفي تلك السيناريوهات، قم بتعطيل Enable Auto Compilation on File Save في CSS Preprocessors > لوحة General في حوار Site Setup.

لتحويل معالج CSS برمجيًا يدويًا، انقر بزر الماوس الأيمن فوق الملف في لوحة Files ثم انقر فوق Compile.

تحويل ملفات معالجات CSS الأولية برمجيًا من خلال لوحة Files
تحويل ملفات معالجات CSS الأولية برمجيًا من خلال لوحة Files

كما يمكنك النقر فوق Tools > Compile لتحويل الملف الحالي برمجيًا.

شعار Adobe

تسجيل الدخول إلى حسابك