في الجزء Sources من اللوحة CSS Designer، انقر فوق 
ثم انقر فوق أحد الخيارات التالية:
- إنشاء ملف CSS جديد: لإنشاء وإرفاق ملف CSS جديد بالمستند
- إرفاق ملف CSS موجود: لإرفاق ملف CSS موجود بالمستند
- تعريف في الصفحة: لتعريف CSS داخل المستند
تاريخ آخر تحديث
25 أبريل 2024
تعرف على كيفية استخدام لوحة CSS Designer أو إرفاق أوراق الأنماط واستعلامات الوسائط والمحددات وتعيين خصائص CSS.
لوحة CSS Designer (Window > CSS Designer) هي مفتش خصائص CSS يتيح لك إنشاء أنماط وملفات CSS وتعيين الخصائص "بصريًا"، إلى جانب استعلامات الوسائط.
الأقسام التالية متوفرة في واجهة CSS Designer:
- Sources: مجموعة من ملفات CSS المرتبطة بالمشروع
- @Media: استعلامات الوسائط للتحكم في حجم الشاشة
- Selectors: المحددات المرتبطة باستعلام الوسائط المحدد في لوحة @Media
- Properties: الخصائص المرتبطة بالمحدد المحدد، مع خيار لإظهار الخصائص المعينة فقط
باستخدام CSS Designer، يمكنك تعديل قاعدة فردية في ورقة أنماط CSS (استخدم علامة التبويب Current في CSS Designer)، أو إذا كنت تفضل، يمكنك العمل مباشرة في ورقة أنماط CSS (استخدم علامة التبويب All في CSS Designer).
إنشاء أوراق أنماط وإرفاقها
استنادًا إلى الخيارات التي حددتها، يظهر مربع الحوار Create A New CSS File أو Attach Existing CSS File.
انقر فوق Browse لتحديد اسم ملف CSS، وموقع حفظ الملف الجديد إذا كنت تقوم بإنشاء CSS.
قم بأحد الإجراءات التالية:
- انقر فوق Link لربط مستند Dreamweaver بملف CSS
- انقر فوق Import لاستيراد ملف CSS في المستند.
(اختياريًا) انقر فوق Conditional Usage وحدد استعلام الوسائط المطلوب ربطه مع ملف CSS.
تعريف استعلامات الوسائط
في اللوحة CSS Designer، انقر فوق CSS Source في الجزء Sources.
انقر 
فوق الجزء @Media لإضافة استعلام وسائط جديد.
يظهر مربع الحوار Define Media Query ويسرد جميع شروط استعلام الوسائط التي يدعمها Dreamweaver.
حدد Conditions وفقًا للمتطلبات.
تأكد من تحديد قيم صالحة لكل الشروط التي تحددها. وبخلاف ذلك، لا يتم إنشاء استعلامات الوسائط المناظرة بنجاح.
ملاحظة
يتم دعم عملية "And" فقط للشروط المتعددة.
إذا قمت بإضافة شروط استعلام وسائط عبر تعليمات برمجية، لا تتم تعبئة سوى الشروط المدعومة في مربع الحوار Define Media Query. إلا أن المربع النصي Code في مربع الحوار يعرض التعليمات البرمجية بالكامل (بما في ذلك الشروط غير المدعومة).
عند النقر فوق استعلام وسائط في العرض Design/Live، يتم تحويل إطار العرض لمطابقة استعلام الوسائط المحدد. لعرض إطار العرض بالحجم الكامل، انقر فوق Glocbal في الجزء @Media.
تعريف محددات CSS
في لوحة CSS Designer، حدد مصدر CSS في جزء Sources أو استعلام وسائط في جزء @Media.
في الجزء Selectors، انقر فوق . بناءً على العنصر المحدد في المستند، يحدد CSS Designer بذكاء المحدد ذي الصلة ويقترحه عليك (حتى ثلاث قواعد).
يمكنك تنفيذ واحد أو اكثر من الأمور التالية:
- استخدم مفاتيح الأسهم لأعلى أو لأسفل لجعل المحدد المقترح أكثر تحديدًا أو أقل تحديدًا.
- احذف القاعدة المقترحة واكتب المحدِّد المطلوب. وتأكد من كتابة اسم المحدِّد إلى جانب مدلول Selector Type. على سبيل المثال، إذا كنت تحدد معرفًا، فقم ببدء اسم المحدد برمز الشباك "#".
- للبحث عن محدد معين، استخدم مربع البحث أعلى الجزء.
- لتغيير اسم محدد، انقر فوقه وادخل الاسم المطلوب.
- لإعادة ترتيب المحددات، اسحبها إلى الوضع المطلوب.
- لنقل محدد من مصدر إلى آخر، اسحب المحدد إلى المصدر المطلوب في الجزء Source.
- لتكرار محدد في المصدر المحدد، انقر بالزر الأيمن للماوس فوق المحدد وانقر فوق Duplicate.
- لتكرار محدد وإضافته إلى استعلام وسائط، انقر بالزر الأيمن للماوس فوق المحدد وحرك مؤشر الماوس فوق Duplicate Into Media Query ثم اختر استعلام الوسائط.
ملاحظة: يتوفر الخيار Duplicate Into Media Query فقط في حالة احتواء مصدر Selector المحدد على استعلامات وسائط. لا يمكنك تكرار Selector من مصدر واحد في استعلام وسائط لمصدر آخر.
نسخ الأنماط ولصقها
يمكنك الآن نسخ الأنماط من أحد المحددات ولصقها في آخر. كما يمكنك نسخ كل الأنماط أو نسخ فئة معينة فقط من الأنماط مثل Layout، وText وBorder.
انقر بزر الماوس الأيمن على محدد واختر من الخيارات المتاحة:
- إذا كان المحدد لا يحتوي على أنماط، فسيتم تعطيل Copy وCopy All Styles.
- يتم تعطيل Paste Styles للمواقع البعيدة التي لا يمكن تحريرها. لكن خيارا النسخ ونسخ الكل
للأنماط متاحان. - يعمل Pasting Styles الموجود بالفعل جزئيًا على أحد المحددات (تداخل). يتم لصق Union
لجميع المحددات. - نسخ ولصق الأنماط يعمل أيضًا مع روابط مختلفة لملفات CSS – Import و Link و Inline
Styles.
أعد ترتيب المحددات
انقر على المحدد المطلوب واسحبه إلى الموضع الجديد في جزء Selectors.
تعيين خصائص CSS
يتم تجميع الخصائص في الفئات التالية ويتم تمثيلها بواسطة رموز مختلفة أعلى الجزء Properties:
- Layout
- Text
- Border
- Background
- المزيد (قائمة خصائص "النص فقط" وليس الخصائص ذات عناصر التحكم المرئية)
ملاحظة
قبل تحرير خصائص CSS Selector، قم بتحديد العناصر المقترنة مع CSS Selector باستخدام Reverse Inspect. بإجراء ذلك، يمكنك تقييم ما إذا كانت جميع العناصر المميزة أثناء Reverse Inspect تتطلب بالفعل تغييرات أم لا.
حدد مربع الاختيار Show Set لعرض آخر خصائص تم تعيينها. لعرض جميع الخصائص التي يمكنك تحديدها لمحدد، قم بإلغاء تحديد مربع الاختيار Show Set.
لتعيين خاصية مثل width أو border-collapse انقر فوق الخيارات المطلوبة المعروضة بجانب الخاصية في الجزء Properties.
تتم الإشارة إلى الخصائص التي تم تجاوزها باستخدام تنسيق خط متوسط.
تعيين الهوامش والمساحات الخالية والوضع
باستخدام عناصر التحكم في المربع ضمن الجزء Properties في CSS Designer، يمكنك تعيين الهوامش والمساحات الخالية والوضع والخصائص بسرعة. إذا كنت تفضل الكود، يمكنك تحديد كود اختصار للهامش والحشو في مربعات التحرير السريع، كما هو موضح في هذا المثال.
انقر فوق القيم وأدخل القيمة المطلوبة. إذا كنت تريد أن تكون القيم الأربع متساوية ومتغيرة بشكل متزامن، انقر على أيقونة الرابط في المنتصف.
في أي وقت، يمكنك تعطيل أو حذف قيم محددة، على سبيل المثال، قيمة الهامش الأيسر مع الاحتفاظ بالقيم اليمنى والعلوية والسفلية.
تعيين خصائص الحدود
يتم تنظيم خصائص Border Control في علامات تبويب منطقية لمساعدتك على عرض أو تعديل الخصائص بسرعة.
إذا كنت تفضل الكود، يمكنك تحديد كود اختصار للحدود ونصف قطر الحدود في مربع نص التحرير السريع.
لتحديد خصائص Border Control، قم أولاً بتعيين الخصائص في علامة التبويب All Sides. يتم تمكين علامات التبويب الأخرى ويتم تطبيق الخصائص المحددة في علامة تبويب 'All Sides' على الحدود الفردية.
عندما تغير خاصية في علامات تبويب الحدود الفردية، تتغير قيمة الخاصية المقابلة في علامة تبويب "جميع الجهات" إلى "undefined" (القيمة الافتراضية).
في المثال أدناه، تم تعيين لون الحدود إلى الأسود ثم تم تغييره إلى الأحمر للحدود العلوية.
يستند الكود المدرج إلى إعداد التفضيلات للاختصار أو الصيغة الكاملة.
أثناء تشغيل Inspect، يتم التركيز على علامات التبويب حسب أولوية علامات تبويب "التعيين". تكون الأولوية القصوى لعلامة التبويب "All sides" متبوعة بـ "Top"، و"Right"، و"Bottom"، و"Left". على سبيل المثال، إذا تم تعيين القيمة العلوية فقط للحدود، فإن الوضع المحسوب ينقل التركيز إلى علامة التبويب "العلوي" متجاهلاً علامة التبويب "جميع الجهات" لأنه لم يتم تعيين علامة التبويب "جميع الجهات".
تعطيل الخصائص أو حذفها
تتيح لك الميزة Disable/Enable CSS Property استبعاد أجزاء من CSS من اللوحة CSS Designer، دون الحاجة إلى إجراء تغييرات مباشرةً بالتعليمات البرمجية. عند استبعاد أجزاء من CSS، يمكنك مشاهدة أنواع التأثيرات التي تطبّقها خصائص وقيم معينة بالصفحة لديك.
عند تعطيل خاصية لـ CSS، يقوم برنامج Dreamweaver بإضافة علامات تعليقات لـ CSS وتسمية [disabled] إلى خاصية CSS التي قمت بتعطيلها. يمكنك حينئذ إعادة تمكين خاصية CSS المعطلة أو حذفها بسهولة وفقًا للتفضيل الخاص بك.
يمكنك تعطيل أو حذف كل خاصية باستخدام CSS Designer.
توضح لقطة الشاشة التالية رمزي التعطيل والحذف لخاصية الارتفاع . تكون هذه الرموز مرئية عند المرور بمؤشر الماوس فوق الخاصية.
يمكنك أيضاً استخدام عناصر التحكم في الحذف والتعطيل على مستوى مجموعة Border Control لتطبيق هذه الإجراءات على جميع الخصائص.
اختصارات لوحة المفاتيح
يمكن إضافة أو حذف محددات CSS والخصائص باستخدام اختصارات لوحة المفاتيح. يمكنك أيضاً التنقل بين مجموعات الخصائص في جزء Properties.
|
اختصار |
سير العمل |
|
CTRL + Alt +[Shift =] |
لإضافة محدد (إذا كان عنصر التحكم موجود في قسم المحدد) |
|
CTRL + Alt+ S |
لإضافة محدد (إذا كان عنصر التحكم في أي مكان من التطبيق) |
|
CTRL + Alt +[Shift =] |
لإضافة الخصائص (إذا كان عنصر التحكم موجود في قسم الخصائص) |
|
CTRL + Alt+ P |
لإضافة الخصائص (إذا كان عنصر التحكم موجود في أي مكان من التطبيق) |
|
Select + Delete |
لإزالة المحدد، إذا تم تحديد المحدد |
|
CTRL + Alt + (PgUp/PgDn) |
الانتقال السريع بين الأقسام أثناء التواجد في اللوحة الفرعية للخصائص |
تحديد عناصر الصفحة المقترنة مع CSS Selector
في أغلب الأحيان، تكون أداة CSS Selector واحدة مقترنة مع عناصر صفحة متعددة على سبيل المثال، نص في المحتوى الرئيسي للصفحة، وعنوان، ونص تذييل يمكن أن يتم إقرانهم جميعًا مع نفس أداة CSS Selector. عندما تقوم بتحرير خصائص CSS Selector، ستتأثر جميع العناصر المقترنة مع أداة التحديد بما في ذلك العناصر التي لم تقصد تغييرها.
تساعدك Live Highlight في تحديد جميع العناصر المقترنة مع CSS Selector. إذا كنت ترغب في تغيير عنصر واحد فقط أو بعض العناصر، يمكنك إنشاء CSS Selector لهذه العناصر، ثم تحرير الخصائص.
لتحديد عناصر الصفحة المقترنة مع CSS Selector، قم بتمرير الماوس فوق أداة التحديد في Live View (مع إيقاف تشغيل طريقة العرض Live Code). يقوم Dreamweaver بتمييز العناصر المقترنة بخطوط منقطة.
لتأمين التمييز للعناصر، انقر فوق Selector. يتم الآن تمييز العناصر باستخدام حد أزرق.
لإزالة التمييز الأزرق حول العناصر، انقر فوق Selector مرة أخرى.
يتم تمكين Live Highlight بشكل افتراضي. لتعطيل Live Highlight، انقر فوق خيارات Live View في شريط أدوات Document، ثم انقر فوق Disable Live Highlight.
الارتباط بورقة أنماط CSS خارجية
عند تحرير ورقة أنماط CSS خارجية، يتم تحديث جميع المستندات المرتبطة بورقة أنماط CSS هذه لكي تعكس عمليات التحرير تلك.
يمكنك تصدير أنماط CSS الموجودة في مستند لإنشاء ورقة أنماط CSS جديدة، وإرفاق ورقة أنماط خارجية أو الارتباط بها لتطبيق الأنماط الموجودة بها.
يمكنك إرفاق أي ورقة أنماط تقوم بإنشائها أو نسخها بالموقع لديك بالصفحات الخاصة بها.
افتح CSS Designer عبر القيام بأحد الأمور التالية:
- حدد Window > CSS Designer.
- اضغط على Shift + F11.
في CSS Designer، انقر فوق أيقونة + بجوار Sources، وحدد Attach Existing CSS File.
قم بأحد الإجراءات التالية:
- انقر فوق Browse للاستعراض إلى ورقة أنماط CSS خارجية.
- اكتب المسار إلى ورقة الأنماط في مربع File/URL.
انقر فوق الزر Preview للتأكد من أن ورقة الأنماط تطبّق الأنماط التي تريدها على الصفحة الحالية.
إذا لم تكن الأنماط المطبّقة هي المتوقعة، انقر فوق Cancel لإزالة ورقة الأنماط. تعود الصفحة إلى الشكل السابق لها.
انقر فوق OK.
قم بإنشاء مواقع ويب جميلة في Dreamweaver
قم بتصميم مواقع الويب الديناميكية وبرمجتها وإدارتها في أداة قوية متكاملة.
