دورة CSS – الدرس الرابع

قياسي

السلام عليكم

كيف الحال ؟! ..:)

صباح جميل يا كرام ..

صباح خالٍ من القهوة ورائحة البن المقيتة ، حافلٍ بالتقنية والويب ، ما قلَّ منهما أو كثر 🙂

.

.

كنَّا قد أنشأنا هيكل الـصفحة بلغة الـXHTML في الدرس السابق ، وسوف نخصص الأيَّام القادمة إن شاء الله لتعلُّم تنسيق الموقع بلغة CSS عبر 3 دروس تتقاسم أجزاء الصفحة كالتالي :

الدرس الرابع : التنسيق العام للصفحة ، تنسيق الغلاف الخارجي ، تنسيق الروابط التشعبية .

الدرس الخامس : تنسيق الهيدر ، والأزارير .

الدرس السادس : تنسيق القائمة الجانبية ، المحتوى ، والفووتر .

ونحن اليوم إن شاء الله على موعدٍ ممتعٍ مع الدرس الرابع 🙂 .

.

.

ملاحظة صغيرة :

ربَّما تحتاج إلى قراءة هذا الدرس أكثر من مرة قبل استيعابه 🙂 .

1- التنسيق العام للصفحة بضبط خصائص وسم الـ body /

نحدِّد ضمن خصائص هذا الوسم خلفية الموقع ، تنسيقات خطوطه ، والعديد من الخيارات الأخرى .

خلفية الموقع

الكثير من مصمِّمي المواقع يكتفون باختيار لونٍ واحدٍ لخلفية الموقع ، لكنَّ مواقع ويب 2 تتميَّز باختلاق تدرجاتٍ وإضاءاتٍ وألوانٍ جذَّابة ، وغالبًا ما تُستخدم الصور الذكيَّة المكررة أفقيًا أو عموديًا لتأدية هذا الغرض دون اضطرار اللجوء إلى الصور الكبيرة التي تسبب زخمًا بصريًا وبطئًا في التحميل .

استخدمتُ في هذا التصميم صورة مكررة تنتج خلفيةً متدرجة للون الأزرق ، وأضفتُ لها شريطًا منقطًا كلمسةٍ جماليةٍ لها ، مبدعي الفوتوشوب وبرامج الجرافكس الأخرى حتمًا يستطيعون رسم خلفياتٍ أكثر جمالاً وإثارة .

أيضًا ، أحببتُ أن أجرِّب وضع خلفية ثابتة ، بحيث أنَّها لا تتغيَّر بتحريك شريط التمرير scroll bar .

تنسيق الخطوط

أحبُّ الخطَّ tahoma بحجم 10pt ، اخترتُ له اللون الرمادي بتدرج #666666 .

تنسيقات أخرى

1- لأنَّ الموقع عربي ، فلا بدَّ من تحديد اتجاه النص من اليمين إلى اليسار .

2- ضبط خاصية الـmargin ، ونقصد عند استخدام هذه الخاصية في وسم الـ body / تحديد المسافة بين جسم الصفحة وبين حدود المتصفح ، ولذلكـ نختار لها القيمة 0 ، مع العلم أنَّ القيمة الإفتراضيَّة لها في متصفح الفايرفوكس = 1 بكسل وهي ذات القيمة المعتمدة في المعايير القياسية للويب ، أمَّا في متصفح الإكسبلور6 فتساوي 4 بكسل .

3- ضبط خاصيَّة الـPadding ، وهي المسافة بين عناصر الصفحة ( الصور والصناديق والنصوص و … إلخ ) وبين حدود الصفحة ، ونضع padding= 0 .

شرح الكود /

* بالنسبة لقيمة الـheight الَّتي وضعتها بـ100% فسأتحدَّث عنها في جزءٍ آخر من الدرس إن شاء الله .

* قمتُ بضبط الـmargin والـpadding بـ 0 ، ولا شكَّ في أنَّك تعرف بأنَّ هذا يعني تطبيق هذه القيمة على جميع الإتجاهات : left  right – top – bottom .

بينما لو أردتُ تطبيقها على الـ top فقط كمثال ، فسأكتب :

margin-top:0

padding-top:0

* ضبط خصائص الـbackground ، من اختيار صورة الخلفية ووضع مسارها ،واختيار لون الخلفية – بالمناسبة هل تستطيع معرفة سبب اختياري لهذا اللون بالتحديد ؟ 😉 – ، وضبط خاصية repeat بـ repeat-x لتتكرر الصورة على محورٍ أفقيٍ فقط ، وأخيرًا .. ضبط خاصية attachment بـ fixed كي أحقق رغبتي بثبات الخلفية بالنسبة لشريط التمرير .

* قمتُ بتنسيق الخط العام للصفحة كما أسلفت باختيار اللون عبر الخاصية color ، واختيار النوع عبر الخاصيَّة font-family واختيار الحجم عبر خاصيَّة font-size .

* text-align:right ، هذه الخاصية كانت لتنسيق اتجاه الكلام من اليمين إلى اليسار ، ويخطئ كثيرٌ من المصممين حين يختار عوضًا عن هذه الخاصية خاصية direction بوضع قيمة rtl لها ، فهذه الخاصية إذا ما استخدمت في وسم body سببت مشاكل عند تنسيق بقية الصفحة .

2- تنسيق الروابط التشعبية :

أكره الألوان والتنسيقات الإفتراضية للروابط ، وأكره أكثر أن أشاهد تصميمًا جميلاً تشوهه تنسيقات سيئة للروابط ! .

للروابط التشعبية 4 أوضاع يمكن ضبط تنسيق كلُّ منها على حده :

1- الروابط في وضعها الأصلي .

2- الروابط عند تمرير مؤشر الفأرة عليها.

3- الروابط المزارة .

4- الروابط لحظة النقر عليها .

وسوف أستثني النقطة الأخيرة من التغيير عند ضبط التنسيقات .

شرح الكود /

1- تنسيق الروابط في وضعها الأصلي :

هذه سهلة ، نقوم بتنسيق الوسم a ، أنا مثلاً أكره وضع خط تحت الروابط التشعبية ، ولذلك اخترتُ أن أضع القيمة none للخاصية text-decoration ، وهي الخاصية المسؤولة عن تحديد وضع الخط على الكلمة ، ولها 3 قيم : underline ( خط أسفل النص ) ، و overline ( خط أعلى النص ) ملاحظة : يمكن وضع هاتين القيمتين معًا ، وأخيراً القمة : none ( عدم وضع أي ط للنص ) .

ثمَّ وضعت لون الخط بقيمة 91D960 ، وحددت قيمة bold للخاصية font-weight كي يظهر خط الروابط عريضًا مميزًا .

2- تنسيق الروابط عند تمرير مؤشر الفأرة عليها – تنسيق الروابط المزارة :

هنا سنستخدم شيء ربما لا يعرفه الكثير من المبتدئين اسمه pseudo classes ، وهي مجموعة من الـclasses المبنية أصلاً في المتصفحات الداعمة للـCSS ، وأتذكر أني أرهقتُ الأستاذة العزيزة في الجامعة كثيرًا لأفهمها 😀 .

هذه الـClasses تصف حالة معينة تقع فيها الـselectors ” المحددات ” ، وعند استخدامها نضيف إلى الوسم نقطتين رأسيتين ثم اسم هذا الـclass ، ونبدأ بإضافة الخصائص وتحديد قيمها داخل الأقواس كما تعودنا :

XHTML Tag:pseudo-class

}

{

ومن أمثلة الـPseudo-classes المستخدمة مع المحددات على اختلافها  :first-child ، lang … ، ومن أمثلتها المستخدمة مع الروابط التشعبية ( الوسم a ) هي :

1- visited / للروابط المزارة .

2- focus / للروابط ساعة تركيز المؤشر عليها .

3- hover / للروابط ساعة تمرير المؤشر عليها .

4- active / للروابط النشطة .

وفي هذا التصميم لن أغير إلا خصائص الروابط المزارة ، والروابط لحظة تمرير المؤشر عليها ، أي أنني سأستخدم كلاسات الـ hover و visited كما لاحظتم في الكود :

للروابط لحظة تمرير المؤشر : وضعت قيمتي underline و overline للخاصية text-decoration ، كي يظهر خطين أسفل وأعلى الرابط لحظة تمرير المؤشر عليه .

للروابط المزارة : فقط تغيير اللون إلى درجة E0E7A8 عبر خاصية color .

.

.

3- تنسيق الغلاف الخارجي:

وهو – للتذكير – الـdiv الرئيسي المسمى بـ main ، وقد يسميه كثير من المصممين warpper .

1- كما تشاهدون في الكود ، وضعت للخاصية margin قيمة 0 لأعلى ولأسفل كي تنطبق حدود الغلاف على حدود الصفحة ، ووضعت قيمة auto لجهتي اليمين واليسار كي أغير موقع الغلاف فأضعه في المنتصف .

2- وضعت قيمة 760px لخاصية عرض الغلاف width لأني كما أسلفت لا أفضِّل العرض الكامل على الصفحة ، ولم أضعه 800px ، لأنَّ الشاشات ذات دقة 800 × 600 لن تعرضه بالشكل الصحيح .

3- الخاصية min-height سأتحدث عنها لاحقًا .

4- قمتُ بضبط خلفية الغلاف باللون الأبيض ، درجة ffffff .

5- قمتُ بوضع إطارين عن يمين وشمال الغلاف ، عرضهما 1بكسل ، ودرجة لونهما 69B2F0 ، وشكلهما dashed أي : مخطط .

.

.

إذا قمتَ بتنسيق الصفحة بهذه الطريقة ، فستفاجئ من أنَّ الغلاف الخارجي لن يظهر أمامك أصلاً إن لم تكن قد وضعت محتوياتٍ فيه ، أغلب المصممين يلجأ إلى اتخام الغلاف بوسم <br> كي يظهر طوله بشكل ممتد إلى النهاية .

هناك طريقة أخرى ، علمية وصحيحة تعلمتها من أستاذنا الكبير / كتومي ، تجعل طول الغلاف ممتدًا على كامل الصفحة دون الحاجة إلى توفر محتويات ، وخطواتها :

1- عيِّن لوسم html خاصية height بقيمة 100 % :

ولأنَّ الكثير من الناس – الله يسامحهم – ما زالوا يستخدمون IE6 ، فكان لزامًا علينا أن نرضي هذا المتصفح العجوز ، وذلك بوضع نفس الخاصية بنفس القيمة لوسم html وللغلاف معًا هكذا :

2- تحديد قيمة 100% لخاصيَّة height للوسم body ، كما شاهدنا في الكود سابقًا .

3- تحديد قيمة 100% لخاصية min-hight للغلاف main ، وهذه الخاصية تحدد أقصر طول يمكن أن يأخذه الكائن .

.

.

أخيرًا .. أتمنى أن يكون هذا الدرس مفيدًا لكم ، وأعتذر عن الفترات المتباعدة جدًا التي تكون بين الدروس والسبب انشغالي الشديد بإصلاح ما فسد من جهازي ، ولو انشغلتُ في نفسي لكان خيرًا لي وأقوم ، ولكن .. حسبي الله في عشقي التقني والبرمجي !.

دعواتكم يا كرام ..

Advertisements

7 responses »

  1. ما شاء الله على الدرس الرائع جدا و شكرا لك أخت احسان و أنا من الذين يعشقون التقنية كثيرا لدرجة الادمان مثلك لكن الله يعين

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s