إدراج الصور
بمجرد إدراج الصورة في الصفحة تظهر خواص هذه الصورة مثل أبعادها ومكانها واتجاهها وطلاقة محاذاتها وغيرها من الخواص في شريط الخواص بأسفل واجهة البرنامج كما يوضح الشكل التالي بما يتيح تعديل هذه الخواص لضبط الصورة في الصفحة، كما يمكن استخدام قوائم التنسيق المعدة مقدمًا CSS في ضبط الصورة المدرجة في الصفحة.
ظهور خواص الصورة في شريط الخواص
لإدراج صور في صفحة الويب انقر في المكان الذي تريد إدراج الصورة فيه واختار image من قاتمة Insert ليظهر بذلك المربع الحواري الخاص بإدراج الصور، في هذا المربع الحواري اختار الصورة التي تريد إدراجها واضغط زر Ok ليتم إدراج الصور في المستند في المكان الموجود فيه مؤشر الإدراج، وباستخدام الخواص التي تظهر في شريط الخواص الموضحة في الشكل التالي يمكنك ضبط إعدادات الحور .
خواص الصورة المدرجة
فمن حقل ID يمكنك إدراج الكود المميز للصور والمستخدم في إسكريبتات البرمجة الديناميكية، وفي حقل W قم بتحديد عرض الصورة، وفي حقل H قم بتحديد ارتفاع الصورة، وفي حقل Src قم بتحديد مصدر الصورة، ومن هذا الحقل يمكنك تغيير الصورة، ومن حقل Link يمكنك الربط إلي صورة معينه، وفي حقل ALt قم بكتابة النص البديل الذي يظهر في حالة فشل المتصفح في عرض الصورة، ومن حقلي Y وH قم بتحديد مكان الصور في صفحة الويب، ومن القائمة الموجودة في حقل ِAlgn اختار طريقة محاذاة الصورة.
تعديل خواص الصفحة قوائم التنسيق المعدة مسبقًا CSS
يمكنك استخدام قوائم الشيق المعدة مسبقًا في تعديل خواص الصفحة مثل عرض الصفحة ولون الخلفية أو إضافة صورة لخلفية الصفحة أو لخلفية جزء من الصفحة، كما يمكن استخدامها أيضًا في تعديل خواص النصوص.
فلتعديل عرض الصفحة باستخدام قوائم التعديل المعدة مسبقًا انقر في أي مكان في الصفحة لوضع مؤشر الإدراج في الصفحة لتظهر بذلك التعليمات الخاصة بأكواد عناصر الصفحة مثل كود جسم الصفحة <body> والطبقات <div.container> في أسفل نافذة التصميم كما يوضحها الشكل التالي.
ظهور التعليمات الخاصة بأكواد عناصر الصفحة
قم بفتح نافذة تنسيقات CSS أن لم تكن مفتوحة بالفعل باختيار CSS Styles من قائمة Window في أعلي النافدة انقر زر All وفي القائمة التي تظهر انقر فوق عنصر <body> كما يوضح الشكل التالي لتظهر بذلك خواص عنصر جسم الصفحة.
نافذة تنسيقات CSS
من بين خواص جسم الصفحة أنقر فوق خاصية Container والخاصة بمقاسات الصفحة لتظهر بذلك خواص الصفحة في أسفل النافدة ومنها خاصية عرض الصفحة Width كما يوضح الشكل التالي وبتغيير القيمة الموجودة في حقل يمكنك تغيير عرض الصفحة.
تغيير عرض الصفحة
وبهذه الطريقة يمكنك تغيير خواص أي جزء من أجزاء الصفحة فيمكنك مثلاً تغيير لون خلفية الصفحة وذلك بالانتقال إلي نمط عرض التصميم بالنقر فوق زر Design في أعلي يسار نافذة التصميم، وفي نافذة استايلات CSS اختار مجموعة خواص body وانقر فوق زر Edit Ruleليظهر بذلك المربع الحواري الخاص بتعديل خواص جسم الصفحة كما هو موضح في الشكل التالي.
المربع الحواري الخاص بتعديل خواص الصفحة
في المربع الحواء الخاص بتعديل الخواص الموضح في الشكل السابق، اختار Background لتظهر خواص خلفية الصفحة كما هي موضحة في الشكل، وفي حقل Background اختار اللون الذي تريد تطبيقه على خلفية الصفحة من بالتة الألوان الموعودة في الحقل.
وبهذه الطريقة أيضًا يمكنك إدراج صورة في تذييل الصفحة، ونمط العرض مازال هو عرض التصميم Design View انقر نقر مزدوجًا فوق خاصية CSS ليظهر في نافذة المربع الحواري الخاص بإعدادات تذييل الصفحة كما يوضحه الشكل التالي، في هذا المربع الحواري اختار مجموعة خيارات Background والذي يعرض خواص خلفية تذييل الصفحة كما يوضح الشكل.
خواص خلفية تذييل الصفحة
من مجموعة خواص خلفية تذييل الصفحة الموضحة في الشكل السابق انقر فوق زر التصفح الموجود بجوار حقل Background Image واختار الصورة التي تريد إدراجها في خلفية تذييل الصفحة واضغط زر Ok.
وبهذه الطريقة أيضًا يمكنك تعديل خواص النص بالنقر نقرًا مزدوجًا فوق خاصيةbody في نافذة CSS ليظهر بذلك المربع الحواري الخاص بخواص عناصر جسم الصفحة كما يوضحه الشكل التالي، ومن بين هذه الخواص خاصية نوع الخط Font-family والذي منه يمكنك تغيير نوع الخط المستخدم في جسم الصفحة.
مربع الحواري الخاص بخواص عناصر جسم الصفحة
ومن هذا المربع الحواري أيضًا يمكنك تغيير إعدادات الخط مثل حجم الخط من حقل Font Size ونسق الخط من حقل Font Style.
