تعلم CSS بسهولة (4) - نسخة قابلة للطباعة

بداية، أرجو أن تقوموا بتنزيل الملف التالي: lesson4.zip

والذي يحوي هذه الملفات:

index.html - الملف الذي سيحوي التصميم.
main_style.css - التصميم الأساسي.
big_style.css - التصميم الثاني.
styleswitcher.js - ملف الجافاسكربت الذي يتحكم بنوع التصميم.

هذا درس عملي وسهل ويحل مشكلة بسيطة لكنها مزعجة، وهي حجم ونوع الخط، فعادة ما يختار المصمم خطاً معيناً لموقعه، وعندما يأخذ آراء الزوار في الموقع فربما يجد بعض التعليقات مثل: الخط كبير جداً، أو الخط صغير جداً! ويمكن حل هذه المشكلة عن طريق CSS وجافاسكربت، وبأسلوب سهل.

ملاحظة: هذا الدرس هو ملخص لصفحة في Alist Apart وملف الجافاسكربت مأخوذ منه وقد سمح الموقع لمن يشاء أن يستخدمه كما يريد.

1) قمت أولاً بإنشاء ملف css للموقع، وفيه حددت الخطوط المستخدمه وسميته main_style.css
2) قمت بإنشاء نسخة من ملف main_style.css وسميته big_style.css
3) قمت بتعديل الخطوط في الملف الثاني لتكون كبيرة وواضحة.
4) في ملف index.htm قمت بتحديد ملف main_style.css كملف رئيسي للتصميم:

PHP كود :
<link href="stylesheet/main_style.css" type="text/css" rel="stylesheet" /> 

5) ثم قمت بتحديد ملف big_style.css كملف ثان للتصميم:

PHP كود :
<link href="stylesheet/big_style.css" type="text/css" rel="alternate stylesheet" title="big" /> 

لاحظ أنني أضفت خاصية title وتعني العنوان وأعطيت للملف تسمية big، ستعرف فائدة ذلك بعد قليل.

6) قمت بإضافة ملف جافاسكربت الخاص بتغيير الخط:

7) قمت بإنشاء زرين لكي يستطيع المستخدم تغيير الخط كما يشاء:

PHP كود :
<input class="selectorbutton" 
onclick="setActiveStyleSheet('default'); 
return false;" type="button" value="القياسي" />
  
<input class="selectorbutton" 
onclick="setActiveStyleSheet('big'); 
return false;" type="button" value="الواضح" /> 

إذا ضغط المستخدم على الزر الأول فإنه سيختار التصميم الأساسي، وإذا ضغط على الزر الثاني فإنه سيختار التصميم الذي أسميناه big، وهو التصميم الثاني، هذا ملخص أوامر html وجافاسكربت أعلاه، ولأنني ليست خبيراً في جافا سكربت فأعتذر عن شرحها

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

ملاحظة 1: يجب أن تقوم بإضافة ملف الجافاسكربت في كل صفحات الموقع.
ملاحظة 2: يمكنك استبدال الزرين بنصوص عادية، أو بصور، هذا يعتمد على مهارتك في html وجافا سكربت.

منقول بتصرف من منتديات سوالف سوفت
وقد كتبها: سردال

تحياتى