شبكة دريم ويفر العربية
شبكة دريم ويفر العربية

الدرس الثامن : التحكم في خصائص الصفحة

السلام عليكم ورحمة الله وبركاته

نستكمل اليوم الدروس حول الأنماط وتنسيق شكل الموقع وهو ما يسمى CSS

بعد إنشاء صفحة جديدة في دريم ويفر نتوجه إلى Modify ثم Page Properties كما في الصورة التالية :

8-1

ستظهر لك الصورة التالية وهي عبارة عن مربع حواري … تلاحظ في العمود الأيسر كلمة Category أي القسم … يعني أن هذا المربع يقسم خصائص الصفحة التي ترغب في تعديلها إلى أقسام … القسم الذي يظهر الآن هو Appearance(CSS) >> أي تنسيق المظهر بواسطة أوامر CSS

8-2

وشرح القسم الأول موضح في الصورة أعلاه بالتفصيل .

 

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

8-3

 

القسم الثالث يتعلق بتنسيق الروابط التشعبية على موقعك من حيث نوع الخط وحجمه ولون النص ،، انظر إلى الصورة ثم تابع شرح هذا القسم

8-4

في السطر الأول Link font وهو يضع لك تلقائياً الخيار Same as page font أي أنه سيجعل الخط هو نفس الخط الافتراضي للصفحة في القسم الأول ،،

وإذا كنت ترغب في تغيير نوع الخط يجب عليك تغييره وكذلك الحقلين الذين بجواره ستأخذ نفس الشكل للخط الافتراضي من حيث الإمالة أو التعريض إلا إذا قمت بتغييرها من هذين الحقلين

في السطر الثاني Size وهو يعني حجم الخط ، إذا تركته فارغاً سيأخذ نفس قيمة حجم الخط الافتراضي للصفحة كما هو موضح في القسم الأول

السطرين الثالث والرابع يوجد بها أربع خصائص لحالة الرابط بإمكانك تغيير لونه في كل حالة وتوضيحها كالآتي :

[list type=”bullet”]
  • Link color : لون الرابط التشعبي الأصلي في الحالة العادية
  • Rollover link : لون الرابط التشعبي في حالة مرور الماوس عليه
  • Visited link : لون الرابط التشعبي الذي تم النقر عليه وزيارته
  • Active link : لون الرابط التشعبي الذي في حالة التفعيل الآن
[/list]

السطر الخامس Underline style ومن خلاله تستطيع وضع خط أسفل الروابط أو إلغاءه ويوجد فيه أربع اختيارات كالآتي :

[list type=”bullet”]
  • Always underline : يضع خط تحت الرابط في جميع الحالات الأربعة التي ذكرتها في الأعلى
  • Never underline : لا يضع خط تحت الرابط في جميع الحالات
  • Show underline only on rollover : يضع خط تحت الرابط في حال مرور الماوس عليه فقط وفيما عدا ذلك لا يضع رابط
  • Hide underline on rollover : يختفي الخط الذي أسفل الرابط في حال مرور الماوس عليه وفيما عدا ذلك يكون الخط ظاهراً
[/list]

القسم الرابع : ما يتعلق بالعناوين العريضة Heading وهي مرتبة من الأكبر H1 إلى الأصغر H6 ، تستطيع أن تضع لكل واحدة تنسيق خاص بها من حيث اللون ، وتضع لها خط خاص بها … كما في الصورة التالية :

8-5

القسم الخامس : يتعلق بالعنوان الذي يظهر في أعلى الصفحة عند تصفح الموقع ، وكذلك ترميز اللغة … انظر إلى الصورة التالية :

8-6

  • في السطر الأول Title عنوان صفحة الموقع
  • السطر الثاني : يعني أن هذا المستند يعتمد على أحدث إصدار من لغة Html وهو HTML5
  • السطر الثالث : Encoding ، يفضل دائماً ن يكون UTF-8 كما هو ظاهر في الصورة ومعناه الترميز العالمي وهو الأصل من أجل أن تظهر الحروف التي تكتبها بلغتك في جميع المتصفحات كما هي بدلاً من ظهورها كرموز غير مفهومه (فائدة : الترميز window-1256 هو الخاص باللغة العربية ولكن لا يستحسن استخدامه لأنه قد يسبب مشاكل في ظهور الحروف بشكل صحيح)
  • السطر الرابع والخامس : يفضل تركها كما هي

 

أما القسم الخامس والأخير فمن خلاله تستطيع إدراج صورة شفافة لتكون خلفية الصفحة وتتحكم في نسبة الشفافية … لاحظ الصورة التالية وكيف قمت بإضافة صورة وجعلت نسبة الشفافية 50% وكيف ظهرت في الخلفية ..

8-7

انتهى الدرس بحمد الله

أخي الحبيب ! أنت رائع لأنك قرأت الدرس كاملاً ٬ أرجو أن يكون الدرس قد حقق لك الفائدة المرجوة وإذا كان لديك سؤال تفضل بكتابته في التعليقات

 

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *