دليل المستخدم إلغاء

تخطيط الصفحات باستخدام CSS Designer

بحث

تاريخ آخر تحديث 20‏/12‏/2021

تعرف على كيفية استخدام لوحة CSS Designer أو إرفاق أوراق الأنماط واستعلامات الوسائط والمحددات وتعيين خصائص CSS.

نافذة اللوحة CSS Designer ‏( > CSS Designer) عبارة عن CSS Property Inspector يتيح لك إنشاء ملفات وأنماط CSS وتعيين الخصائص إلى جانب استعلامات الوسائط "بصريًا".

تتوفر الأقسام التالية في واجهة CSS Designer:

المصادر:مجموعة من ملفات CSS ترتبط بالمشروع
@Media: استعلامات الوسائط للتحكم في حجم الشاشة
المحددات: المحددات المرتبطة باستعلام الوسائط المحدد في اللوحة @Media
الخصائص: الخصائص المرتبطة بالمحدد الذي تم تحديده، مع وجود خيار لإظهار الخصائص المعيّنة فقط

يمكنك، باستخدام CSS Designer، أو تحرير قاعدة فردية في ورقة أنماط CSS (استخدام علامة التبويب Current في CSS Designer)، أو ما تفضله، ويمكنك العمل مباشرة في ورقة أنماط CSS (استخدم علامة التبويب All في CSS Designer).

إنشاء أوراق أنماط وإرفاقها

في الجزء Sources من اللوحة CSS Designer، انقر فوق ثم انقر فوق أحد الخيارات التالية:
- Create a New CSS File: لإنشاء ملف CSS جديد وإرفاقه بالمستند.
- Attach Existing CSS File: لإرفاق ملف CSS موجود بالمستند
- Define in Page: لتعريف CSS في المستند
إنشاء أوراق الأنماط وإرفاقها باستخدام 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 بذكاء المحدِد ذا الصلة ويطلبه منك (3 قواعد بحد أقصى).

يمكنك تنفيذ واحد أو اكثر من الأمور التالية:
- استخدم مفتاحي الأسهم لأعلى ولأسفل لجعل المحدِّد المقترح أكثر أو أقل تخصيصًا.
- احذف القاعدة المقترحة واكتب المحدِّد المطلوب. وتأكد من كتابة اسم المحدِّد إلى جانب مدلول Selector Type. على سبيل المثال، إذا كنت تحدد معرفًا، فقم ببدء اسم المحدد برمز الشباك "#".
- للبحث عن محدد معين، استخدم مربع البحث أعلى الجزء.
- لتغيير اسم محدد، انقر فوقه وادخل الاسم المطلوب.
- لإعادة ترتيب المحددات، اسحبها إلى الوضع المطلوب.
- لنقل محدد من مصدر إلى آخر، اسحب المحدد إلى المصدر المطلوب في الجزء Source.
- لتكرار محدد في المصدر المحدد، انقر بالزر الأيمن للماوس فوق المحدد وانقر فوق Duplicate.
- لتكرار محدد وإضافته إلى استعلام وسائط، انقر بالزر الأيمن للماوس فوق المحدد وحرك مؤشر الماوس فوق Duplicate Into Media Query ثم اختر استعلام الوسائط.
ملاحظة: يتوفر الخيار Duplicate Into Media Query فقط في حالة احتواء مصدر Selector المحدد على استعلامات وسائط. لا يمكنك تكرار Selector من مصدر واحد في استعلام وسائط لمصدر آخر.

نسخ الأنماط ولصقها

يمكنك الآن نسخ الأنماط من أحد المحددات ولصقها في آخر. كما يمكنك نسخ كل الأنماط أو نسخ فئة معينة فقط من الأنماط مثل Layout، وText وBorder.

انقر بزر الماوس الأيمن فوق أحد المحددات وحدد من الخيارات المتاحة:

إذا كان المحدد لا يحتوي على أنماط، فسيتم تعطيل Copy وCopy All Styles.
يتم تعطيل Paste Styles للمواقع البعيدة التي لا يمكن تحريرها. ولكن يتوفر الخياران Copy وCopy All
styles.
يعمل Pasting Styles الموجود بالفعل جزئيًا على أحد المحددات (تداخل). يتم لصق تجميع
كل المحددات.
يعمل أيضًا نسخ الأنماط ولصقها مع الروابط المختلفة لملفات CSS – Import، Link، Inline
Styles.

إعادة ترتيب المحددات

انقر فوق المحدد المطلوب واسحبه إلى الموضع الجديد باستخدام جزء "المحددات".

تعيين خصائص 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 على الحدود الفردية.

عند تغيير خاصية في علامات تبويب الحد الفردي، تتغير قيمة الخاصية المقابلة في علامة التبويب All Sides إلى undefined (القيمة الافتراضية).

في المثال التالي، تم تعيين لون الحد إلى الأسود، ثم تم تغييره إلى الأحمر بالنسبة للحد Top.

تم تعيين لون الحد إلى اللون الأحمر لأعلى

التعليمة البرمجية التي تم إدخالها تستند إلى إعداد التفضيل على نحو مختصر أو مفصل.

أثناء تشغيل Inspect، يتم التركيز على علامات التبويب حسب أولوية علامات تبويب "التعيين". تكون الأولوية القصوى لعلامة التبويب "All sides" متبوعة بـ "Top"، و"Right"، و"Bottom"، و"Left". على سبيل المثال، إذا تم تعيين القيمة العليا لأحد الحدود، ينقل الوضع المحوسب التركيز إلى علامة التبويب "Top"، متجاهلاً علامة التبويب "All sides" لأن علامة التبويب "All sides" لم يتم تعيينها.

تعطيل الخصائص أو حذفها

تتيح لك الميزة Disable/Enable CSS Property استبعاد أجزاء من CSS من اللوحة CSS Designer، دون الحاجة إلى إجراء تغييرات مباشرةً بالتعليمات البرمجية. عند استبعاد أجزاء من CSS، يمكنك مشاهدة أنواع التأثيرات التي تطبّقها خصائص وقيم معينة بالصفحة لديك.

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

يمكنك تعطيل كل خاصية من الخصائص أو حذفها باستخدام CSS Designer.

توضح لقطة الشاشة التالية رمزي التعطيل والحذف لخاصية الارتفاع . تكون هذه الرموز مرئية عند المرور بمؤشر الماوس فوق الخاصية.

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

اختصارات لوحة المفاتيح

يمكن إضافة أو حذف محددات CSS والخصائص باستخدام اختصارات لوحة المفاتيح. يمكنك أيضًا الانتقال بين مجموعات الخصائص في الجزء Properties.

Shortcut	سير العمل
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.

إرفاق ملف CSS حالي
قم بأحد الإجراءات التالية:
- انقر فوق Browse للاستعراض إلى ورقة أنماط CSS خارجية.
- اكتب المسار المؤدي إلى ورقة الأنماط في المربع File/URL.
انقر فوق الزر Preview للتأكد من أن ورقة الأنماط تطبّق الأنماط التي تريدها على الصفحة الحالية.

إذا لم تكن الأنماط المطبّقة هي المتوقعة، انقر فوق Cancel لإزالة ورقة الأنماط. تعود الصفحة إلى الشكل السابق لها.
انقر فوق OK.

احصل على مساعدة بشكل أسرع وأسهل

مستخدم جديد؟