أرجو أن تقوموا بتنزيل الملف المرفق مع هذا الموضوع والذي يحوي:
1) index.html الملف الذي سيحوي التصميم.
2) main_style.css التصميم الأساسي.
3) big_style.css التصميم الثاني.
4) styleswitcher.js ملف الجافاسكربت الذي يتحكم بنوع التصميم.
في الدروس الثلاثة الماضية حرصت على أن أقدم لكم خلاصة ما تعلمته، والحمدلله أنني فعلت ذلك في ثلاثة دروس فقط حيث كنت أظن أنني بحاجة إلى أكثر من ذلك، واليوم هذا درس عملي وسهل ويحل مشكلة بسيطة لكنها مزعجة، وهي حجم ونوع الخط، فعادة ما يختار المصمم خطاً معيناً لموقعه، وعندما يأخذ آراء الزوار في الموقع فربما يجد بعض التعليقات مثل: الخط كبير جداً، أو الخط صغير جداً! ويمكن حل هذه المشكلة عن طريق CSS وجافاسكربت، وبأسلوب سهل.
ملاحظة: هذا الدرس هو ملخص لصفحة في Alist Apart وملف الجافاسكربت مأخوذ منه وقد سمح الموقع لمن يشاء أن يستخدمه كما يريد.
خطوات العمل
1) قمت أولاً بإنشاء ملف css للموقع، وفيه حددت الخطوط المستخدمه وسميته main_style.css
2) قمت بإنشاء نسخة من ملف main_style.css وسميته big_style.css
3) قمت بتعديل الخطوط في الملف الثاني لتكون كبيرة وواضحة.
4) في ملف index.htm قمت بتحديد ملف main_style.css كملف رئيسي للتصميم:
5) ثم قمت بتحديد ملف big_style.css كملف ثان للتصميم:كود:<link href="stylesheet/main_style.css" type="text/css" rel="stylesheet" />
لاحظ أنني أضفت خاصية title وتعني العنوان وأعطيت للملف تسمية big، ستعرف فائدة ذلك بعد قليل.كود:<link href="stylesheet/big_style.css" type="text/css" rel="alternate stylesheet" title="big" />
6) قمت بإضافة ملف جافاسكربت الخاص بتغيير الخط:
7) قمت بإنشاء زرين لكي يستطيع المستخدم تغيير الخط كما يشاء:كود:<script src="styleswitcher.js" type="text/javascript"></script>
إذا ضغط المستخدم على الزر الأول فإنه سيختار التصميم الأساسي، وإذا ضغط على الزر الثاني فإنه سيختار التصميم الذي أسميناه big، وهو التصميم الثاني، هذا ملخص أوامر html وجافاسكربت أعلاه، ولأنني ليست خبيراً في جافا سكربت فأعتذر عن شرحهاكود:<input class="selectorbutton" onclick="setActiveStyleSheet('default'); return false;" type="button" value="القياسي" /> <input class="selectorbutton" onclick="setActiveStyleSheet('big'); return false;" type="button" value="الواضح" />
في متصفح موزيلا، هناك ميزة جيدة في هذا المتصفح تتيح للمستخدم اختيار التصميم الذي يريده من بين عدة تصاميم وضعها مصمم الموقع (هذا إن كان المصمم قد وضع فعلاً أكثر من ملف css) أما إنترنت إكسبلورر فلا يتيح مثل هذه الميزة، فلذلك أنشأنا هذان الزران لكي يختار التصميم المناسب له مباشرة في الصفحة، سيقوم برنامج الجافاسكربت هنا بتغيير التصميم عندما يضغط المستخدم على أحد الزرين، ثم يضع ملف cooky في حاسوب المتصفح يحفظ الاختيار الذي حدده المتصفح فلا يحتاج إلى أن يختار التصميم المناسب له كل ما انتقل إلى صفحة جديدة، وحتى إن أغلق المتصفح وعاد بعد مدة سيجد أن اختياره سيظهر له مباشرة، لأن برنامج الجافاسكربت يختبر أولاً وجود ملف cooky في حاسوب المستخدم، فإن وجد فإنه يحدد التصميم الذي اختاره المتصفح ويظهره له مباشرة، وإلا سيظهر التصميم الأساسي الذي حدده المصمم.
ملاحظة 1: يجب أن تقوم بإضافة ملف الجافاسكربت في كل صفحات الموقع.
ملاحظة 2: يمكنك استبدال الزرين بنصوص عادية، أو بصور، هذا يعتمد على مهارتك في html وجافا سكربت.
