افتح مفتش الخصائص (نافذة > خصائص)، إذا لم يكن مفتوحاً بالفعل وحدد خيار CSS في الزاوية اليسرى من اللوحة.
تاريخ آخر تحديث
20/12/2021
تعرف على كيفية استخدام Property Inspector للنص لتطبيق تنسيق HTML أو تنسيق CSS في Dreamweaver.
يمكنك استخدام مفتش خصائص النص لتطبيق تنسيق HTML أو تنسيق أوراق الأنماط المتتالية (CSS).عندما تطبق تنسيق HTML، يضيف Dreamweaver خصائص إلى كود HTML في محتوى صفحتك. عندما تطبق تنسيق CSS، يكتب Dreamweaver خصائص إلى رأس المستند أو إلى صفحة أنماط منفصلة.
عند إنشاء أنماط CSS المضمنة، يقوم Dreamweaver بإضافة تعليمة برمجية لسمة النمط مباشرةً في النص الأساسي للصفحة.
نبذة عن تنسيق النص (CSS مقابل HTML)
تنسيق النص في Dreamweaver مشابه لاستخدام معالج النصوص القياسي. يمكنك تعيين أنماط التنسيق الافتراضية (فقرة، العنوان 1، العنوان 2، وما إلى ذلك) لكتلة من النص، وتغيير الخط والحجم واللون والمحاذاة للنص المحدد، أو تطبيق أنماط النص مثل الخط الغامق والمائل والرمز (أحادي المسافة) والتسطير السفلي.
يحتوي Dreamweaver على مفتشي خصائص، مدمجين في واحد: مفتش خصائص CSS ومفتش خصائص HTML. عندما تستخدم مفتش خصائص CSS، ينسق Dreamweaver النص باستخدام صفحات الأنماط المتتالية (CSS). يمنح CSS مصممي الويب والمطورين تحكماً أكبر في تصميم صفحات الويب، مع توفير ميزات محسنة لإمكانية الوصول وتقليل حجم الملف. يتيح لك مفتش خصائص CSS الوصول إلى الأنماط الموجودة، بالإضافة إلى إنشاء أنماط جديدة.
استخدام CSS هو طريقة للتحكم في نمط صفحة الويب دون المساس ببنيتها. من خلال فصل عناصر التصميم المرئي (الخطوط والألوان والهوامش وما إلى ذلك) عن المنطق الهيكلي لصفحة الويب، يمنح CSS مصممي الويب تحكماً مرئياً وطباعياً دون التضحية بسلامة المحتوى. بالإضافة إلى ذلك، تعريف التصميم الطباعي وتخطيط الصفحة من داخل كتلة واحدة ومميزة من الرمز—دون الحاجة إلى اللجوء إلى خرائط الصور وعلامات الخط والجداول وملفات GIF الفاصلة—يتيح تنزيلات أسرع وصيانة مبسطة للموقع ونقطة مركزية للتحكم في خصائص التصميم عبر صفحات ويب متعددة.
يمكنك تخزين الأنماط المنشأة باستخدام CSS مباشرة في المستند، أو للحصول على مزيد من القوة والمرونة، يمكنك تخزين الأنماط في صفحة أنماط خارجية. إذا قمت بإرفاق صفحة أنماط خارجية بعدة صفحات ويب، فإن جميع الصفحات تعكس تلقائياً أي تغييرات تجريها على صفحة الأنماط. للوصول إلى جميع قواعد CSS لصفحة، يمكن استخدام لوحة أنماط CSS (نافذة > أنماط CSS).للوصول إلى القواعد التي تنطبق على تحديد حالي، استخدم لوحة أنماط CSS (الوضع الحالي) أو القائمة المنبثقة للقاعدة المستهدفة في مفتش خصائص CSS.
إذا كنت تفضل ذلك، يمكنك استخدام علامات ترميز HTML لتنسيق النص في صفحات الويب الخاصة بك. لاستخدام علامات HTML بدلاً من CSS، نسق نصك باستخدام مفتش خصائص HTML.
يمكنك الجمع بين تنسيق CSS وHTML 3.2 داخل نفس الصفحة. ويتم تطبيق التنسيق على نحو هرمي: فيتجاوز تنسيق HTML 3.2 التنسيق المطبّق بواسطة أوراق أنماط CSS الخارجية، وتتجاوز أنماط CSS المضمنة في المستند أنماط CSS الخارجية.
تحرير قواعد CSS في مفتش الخصائص
قم بأحد الإجراءات التالية:
- ضع نقطة الإدراج داخل كتلة نص تم تنسيقها بواسطة قاعدة تريد تحريرها.تظهر القاعدة في القائمة المنبثقة للقاعدة المستهدفة.
- حدد قاعدة من القائمة المنبثقة Targeted Rule.
- انقر على تحرير القاعدة.
قم بإجراء تغييرات على القاعدة باستخدام الخيارات المختلفة
في مفتش خصائص CSS.
Targeted Rule
هي القاعدة التي تقوم بتحريرها في عارض خصائص CSS. عندما يكون لديك نمط موجود مطبق على النص، تظهر القاعدة التي تؤثر على تنسيق النص عند النقر داخل النص في الصفحة.يمكنك أيضاً استخدام القائمة المنبثقة للقاعدة المستهدفة لإنشاء قواعد CSS جديدة أو أنماط مضمنة جديدة أو تطبيق فئات موجودة على النص المحدد.إذا كنت تنشئ قاعدة جديدة، فستحتاج إلى إكمال مربع الحوار "New CSS Rule".لمزيد من المعلومات، راجع الروابط في نهاية هذا الموضوع.
Edit Rule
يفتح مربع حوار تعريف قاعدة CSS للقاعدة المستهدفة.إذا حددت قاعدة CSS جديدة من القائمة المنبثقة للقاعدة المستهدفة ونقرت على زر تعديل القاعدة، يفتح Dreamweaver مربع حوار تعريف قاعدة CSS الجديدة بدلاً من ذلك.
CSS Designer
يفتح لوحة مصمم CSS ويعرض الخصائص للقاعدة المستهدفة في العرض الحالي.
Font
يغير خط القاعدة المستهدفة.
Size
يقوم بتعيين حجم الخط للقاعدة المستهدفة.
Text Color
يقوم بتعيين اللون المحدد كلون الخط في القاعدة المستهدفة. حدد لوناً آمناً للويب بالنقر على مربع اللون، أو أدخل قيمة سادسة عشرية (على سبيل المثال، #BB5153) في حقل النص المجاور.
غامق
يضيف خاصية الخط الغامق للقاعدة المستهدفة.
مائل
يضيف خاصية الخط المائل للقاعدة المستهدفة.
Left وCenter وRight Align
يحاذي القاعدة المستهدفة إلى اليسار أو الوسط أو اليمين.
تعرض خصائص Font وSize وText Color وBold وItalic وAlignment دائمًا الخصائص الخاصة بالقاعدة التي تنطبق على التحديد الحالي في النافذة Document. فإذا قمت بتغيير أي من هذه الخصائص، فسوف تؤثر على القاعدة المستهدفة.
تحرير لون النص باستخدام عارض الخصائص
في حالة عدم تطبيق أي قاعدة محددة على النص، يمكنك تحرير لون النص الخاص بك مباشرة من عارض الخصائص. في المثال التالي، لاحظ لون النص قبل التحرير. يعرض الحقل المجاور لأداة اختيار الألوان اللون الأبيض، مما يشير إلى لون النص حيث وضعت المؤشر.
لتحرير لون النص، حدد النص الذي تريد تحريره. انقر فوق منتقي الألوان وحدد أي لون تختاره. راجع الصورة التالية حيث يعرض مفتش الخصائص اللون الجديد.
تعيين تنسيق HTML في مفتش الخصائص
افتح مفتش الخصائص (نافذة >
خصائص)، إذا لم يكن مفتوحاً بالفعل، وانقر على زر HTML.
حدد النص الذي تريد تنسيقه.
قم بتعيين الخيارات التي تريد تطبيقها على النص المحدد:
Format
يعين نمط الفقرة للنص المحدد. الفقرة تُطبق التنسيق الافتراضي لعلامة <p>، العنوان 1 يُضيف علامة H1، وهكذا.
ID
يقوم بتعيين معرِّف إلى التحديد الذي قمت به. تسرد القائمة المنبثقة للمعرّف (إذا كانت قابلة للتطبيق) جميع المعرّفات غير المستخدمة والمعلنة في المستند.
الفئة
يعرض نمط الفئة المطبق حاليًا على النص المحدد.إذا لم يتم تطبيق أي أنماط على التحديد، تظهر القائمة المنبثقة "بدون نمط CSS".إذا تم تطبيق أنماط متعددة على التحديد، تظهر القائمة فارغة.
استخدم قائمة النمط لتنفيذ أي مما يلي:
حدد النمط الذي تريد تطبيقه على التحديد.
تحديد None لإزالة النمط المحدد حاليًا.
تحديد Rename لإعادة تسمية النمط.
حدد إرفاق ورقة الأنماط لفتح مربع حوار يتيح لك إرفاق ورقة أنماط خارجية بالصفحة.
غامق
يطبق إما <b> أو <strong> على النص المحدد وفقًا لتفضيل النمط المحدد في الفئة العامة في مربع حوار التفضيلات.
Italic
يطبق إما <i> أو <em> على النص المحدد وفقًا لتفضيل النمط المحدد في الفئة العامة في مربع حوار التفضيلات.
Unordered List
ينشئ قائمة ذات تعداد نقطي للنص المحدد. إذا لم يتم تحديد أي نص، تبدأ قائمة نقطية جديدة.
Ordered List
ينشئ قائمة ذات تعداد رقمي للنص المحدد. إذا لم يتم تحديد أي نص، سيبدأ إنشاء قائمة مرقمة جديدة.
Blockquote وRemove Blockquote
قم بمحاذاة النص المحدد إلى اليسار أو إزالة المحاذاة من خلال تطبيق أو إزالة علامة blockquote.في القائمة، تؤدي المحاذاة إلى إنشاء قائمة متداخلة وإزالة المحاذاة تلغي تداخل القائمة.
Link
ينشئ ارتباط نص تشعبي للنص المحدد. انقر على أيقونة المجلد لتصفح ملف في موقعك؛ اكتب عنوان URL؛ اسحب أيقونة التوجيه إلى الملف إلى ملف في لوحة الملفات؛ أو اسحب ملفًا من لوحة الملفات إلى المربع.
Title
يحدد تلميح الأداة النصي لارتباط نص تشعبي.
Target
يحدد الإطار أو النافذة التي سيتم تحميل المستند المرتبط فيها:
_blank يحمّل الملف المرتبط في نافذة متصفح جديدة بدون اسم.
_parent يقوم بتحميل الملف المرتبط في الإطار الرئيسي أو النافذة الرئيسية للإطار الذي يحتوي على الرابط.إذا لم يكن الإطار الذي يحتوي على الرابط متداخلًا، فسيتم تحميل الملف المرتبط في نافذة المتصفح الكاملة.
_self يحمّل الملف المرتبط في نفس الإطار أو النافذة التي يحتوي عليها الرابط.هذا الهدف ضمني، لذا لا تحتاج عمومًا إلى تحديده.
_top يحمل الملف المرتبط في نافذة المتصفح الكاملة، مما يزيل جميع الإطارات.
إعادة تسمية فئة من مفتش خصائص HTML
يعرض Dreamweaver جميع الفئات المتاحة لصفحتك في قائمة الفئة لمفتش خصائص HTML.يمكنك إعادة تسمية الأنماط في هذه القائمة من خلال تحديد خيار إعادة التسمية في نهاية قائمة أنماط الفئة.
من لوحة مفتش الخصائص، حدد القائمة المنسدلة للفئة.
من القائمة المنبثقة، حدد إعادة التسمية في نهاية القائمة.
حدد النمط الذي تريد إعادة تسميته من القائمة المنبثقة إعادة تسمية النمط.
أدخل اسمًا جديدًا في حقل النص الاسم الجديد وانقر
موافق.
المزيد مثل هذا
قم بإنشاء مواقع ويب جميلة في Dreamweaver
قم بتصميم مواقع الويب الديناميكية وبرمجتها وإدارتها في أداة قوية متكاملة.
