معهد دعم اتش فى اى بى اس لحلول الويب - Powered by vBulletin


 
 
النتائج 1 إلى 1 من 1

الموضوع: تعلم css بسهولة (4)

  1. #1
    المشرف العام
    الصورة الرمزية HVIPS1


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 3
    الدولة: eygpt
    المشاركات: 2,778
    HVIPS1 غير متواجد حالياً

    Arrow تعلم css بسهولة (4)


    تعلم CSS بسهولة (4)

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

    والذي يحوي هذه الملفات:
    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 كملف رئيسي للتصميم:



    كود بلغة HTML:
    كود:
    <link href="stylesheet/main_style.css" type="text/css" rel="stylesheet" />
    5) ثم قمت بتحديد ملف big_style.css كملف ثان للتصميم:

    كود بلغة HTML:
    كود:
    <link href="stylesheet/big_style.css" type="text/css" rel="alternate stylesheet" title="big" />
    لاحظ أنني أضفت خاصية title وتعني العنوان وأعطيت للملف تسمية big، ستعرف فائدة ذلك بعد قليل.
    6) قمت بإضافة ملف جافاسكربت الخاص بتغيير الخط:

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

    كود بلغة HTML:
    كود:
    <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 وجافا سكربت

    الملفات المرفقة

 

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •