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

الموضوع: CSS بسهولة (3)

  1. #1
    عضو فعال جدا
    تاريخ التسجيل
    Sep 2000
    المشاركات
    2,029

    CSS بسهولة (3)



    أرجو أن تقوموا بتنزيل الملف المرفق مع هذا الموضوع والذي يحوي:
    1) layout.gif - صورة مصغرة للتصميم.
    2) logo.gif - صورة تمثل شعاراً.
    3) index.htm - ملف html الذي سيحوي التصميم.
    4) layout.css - ملف css والذي سنضع فيه تفاصيل التصميم.

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

    أول إضافة جديدة هي معرف جديد قديم! وهو topnav a، وقد شرحنا بالتفصيل في الدرس الماضي خصائص topnav، فما الجديد في هذا المعرف؟ الجديد هو إضافة الحرف a، وهو الأمر الخاص بالروابط في html، نحن نخبر المتصفح بأن المساحة أو المعرف topnav سيحوي عدداً من الروابط، ولهذه الروابط خصائص معينة:
    كود:
    #topnav a {
    font: bold 10px Tahoma;
    text-decoration: none;
    color: Gray;
    }
    font: تعني الخط! وهنا حددنا له أن يكون ثخيناً bold، بمقياس 10px، ونوع Tahoma، لاحظوا الترتيب الذي اتبع في وضع القيم، فلا يجوز مثلاً أن أضع نوع الخط قبل قياسه، بل يجب أن تكون مرتباً بهذا الترتيب، وبالطبع لا يجب أن تضع كل هذه القيم، يمكنك أن تضع القياس فقط أو الخط فقط أو القياس والخط معاً، لكن إن أردت أن تضع جميع الخصائص فيجب أن تضعها بهذا الترتيب. (المزيد من الشرح ستجدونه في مواقع أخرى متخصصة)

    text-decoration: هذه الخاصية تقوم بعمل تأثيرات على النص، وتقبل هذه القيم:
    - none: لا تفعل شيئاً.
    - underline: تضع خطاً أسفل النص.
    - overline: تضع خطاً أعلى النص.
    - line-through: تضع خطاً على النص.
    ونحن اخترنا القيمة none حيث لا نريد للروابط أن يكون تحتها أو فوقها خط.

    color: وتعني لون الخط واخترنا القيم gray له وتعني الرمادي، ويمكن وضع قيم أخرى للون كالقيم الرقمية (مثال: #808080)

    ثم نجد معرف topnav وقد أضفنا له ul و li، وهذان أمران في html لعمل القوائم، وتم استخدامهما هنا لإنشاء الروابط، بحيث تعرض الروابط على خط واحد بدلاً من عدة خطوط، فإذا أردنا في المستقبل أن نقوم بوضع الروابط في مساحة جانبية ويكون كل رابط أسفل الآخر فيمكن عمل هذا بسهولة في ملف css دون الحاجة إلى فتح ملفات html وتعديلها
    كود:
    #topnav ul, li {
    text-indent: 50px;
    display: inline;
    margin-right: 20px;
    }
    text-indent: هذه خاصية تضيف مساحة فارغة للسطر الأول في الفقرات وقد استخدمتها هنا لكي أبعد الروابط عن طرف الصفحة لكي يسهل قراءتها أكثر.

    display: هذه الخاصية تتحكم بأسلوب عرض العناصر فيhtml وتقبل هذه القيم:
    none: وتعني أنها لن تعرض شيئاً، وهذه مفيدة في حالة رغبة المصمم أن ينشأ ملف css لطباعة المحتويات، حيث يجعل كل عناصر التصميم تختفي ما عدى المحتويات الرئيسية فقط، وهذا يوفر الوقت على المصمم ويوفر الوقت وحبر الطباعة على زوار الموقع، وكذلك يوفر الوقت على المبرمج حيث لا حاجة لإنشاء ملف خاص للطباعة.

    inline: وتعني أنها ستعرض كل شيء في سطر واحد وبما أننا طبقناها على أوامر ul وli فإن هذه الأوامر تظهر عادة على شكل قوائم، وباختيار قيمة inline سنجبرها على أن تظهر في سطر واحد.

    margin-right: شرحناها في الدرس الماضي، لكن هنا خصصنا خاصية margin للجهة اليمنى فقط، حتى تكون الروابط متباعدة عن بعضها البعض بمسافة تسهل عملية قراءتها.

    ثم أضفنا معرف main، والذي سيكون في منتصف الصفحة وسيحوي المحتويات الرئيسية، ثم حددنا للمعرف p main كيف سيعرض الفقرات فاخترنا حجم الخط ونوعه، ثم حددنا للمعرف main a، كيف سيعرض الروابط واخترنا لون الخط والذي يجب أن يكون مختلفاً تماماً عن النص حتى يتم التعرف عليه، واخترنا عدم وضع خط أسفله، وفي النهاية أضفنا فئة جديدة وهذه تحتاج لشرح بسيط.

    الفئات (class) في css يتم تحديدها بوضع نقطة قبلها، والمعرفات كما شرحنا في الدرس الماضي يتم وضع علامة # قبلها، الفئات يمكن استخدامها أكثر من مرة في نفس الصفحة، بينما لا يجوز استخدام المعرفات في نفس الصفحة أكثر من مرة، وتستطيع تسمية الفئات كما تشاء، وبما أن أن الفئة هنا خاصة بملاحظة "جميع الحقوق محفوظة" فإنني أسميتها copyright، واخترت لها عدة خصائص، كالإطار العلوي الرمادي المنقط، واخترت توسيط النص الذي ستحتويه.

    ملف index.htm لا جديد فيه إلا أمر <p class="copyright">، وهو كيفية تحديد الفئة في html، فالمعرفات نحددها باستخدام id، والفئات نحددها باستخدام class، طبعاً أضفت بعض الفقرات (منسوخة من موضوع لي في سوالف للجميع قسم السيارات ) وأضفت روابط في معرف topnav لاحظ كيف استخدمات أوامر ul وli، وغير في ملف css الأمر الخاص بعرضها display من inline إلى list-item وانظر ماذا سيحدث.

    هذا كل شيء

    أرجو أن يكون الشرح جيداً ومفهوماً.





    الملفات المرفقة الملفات المرفقة
    سردال غير متواجد حالياً


  2. #2
    عضو نشيط جدا
    تاريخ التسجيل
    Jul 2001
    المشاركات
    443


    رااااااااااااائع بمعني الكلمة شكرا لك على هذا الدرس وعلى جميع ابداعاتك وجزاك الله خيرا
    مع تحياتى





    __________________
    small genius سابقاً
    لدينا عملاء من: مصر - السعودية - الكويت - قطر - الامارات - امريكا - انجلترا -اسبانيا - ايطاليا - التشيك - اندونسيا - المانيا - تركيا - الهند - كولومبيا - ليتوانيا - هولندا - فنلندا... والعديد من الدول الاخري
    http://www.egycoins.com
    اكبر موقع - عربي لبيع وشراء العملات
    0020127624502
    egycoins غير متواجد حالياً

  3. #3
    عضو سوبر نشيط
    تاريخ التسجيل
    Nov 2001
    المشاركات
    823


    درس رائع بالفعل
    جزاك الله خير يا استاذ سردال





    أبو الوليد غير متواجد حالياً

  4. #4
    عضو فعال جدا
    تاريخ التسجيل
    Sep 2000
    المشاركات
    2,029


    small genius و awilah

    جزاكم الله خير





    سردال غير متواجد حالياً

  5. #5

    تاريخ التسجيل
    May 2001
    المشاركات
    3,294


    يعطيك الف عافيه استاذ سردال





    __________________
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور
    Net Hunter غير متواجد حالياً

  6. #6
    عضو سوبر نشيط
    تاريخ التسجيل
    Jul 2001
    المشاركات
    668

    تظل يا سردال مدرسة نتعلم منها ولا زلنا نتعلم



    مشكور ـ أستاذنا العزيز .........سردال

    يعطك الف مليون عافية على الدرس الجميل والرائع ..........


    أخي العزيز كلنا نعلم اننا نستطيع تحرير الـ CSS عن طريق برنامج برنامج

    الـ Microsoft FrontPage وذلك بفتح ملف الـ CSS ثم من قائمة تنسيق ثم الأمر نمط

    ولاكن هنالك برنامج خر بشكل آحترافي يوفر العديد من المميزات المتطورة بشكل جميع للغاية

    هو برنامج Visual InterDev 6.0 Professional فيجوال أنترودف بروفيشنال

    صورة البرنامج ,,,




    طبعاً البرنامج يقوم بعمل ملفات الـ CSS بإحترافية تامة للغاية .

    و أيضاً عند الإنتهاء من التنسيقات ... تستطيع مشاهدة ما قمت به من خلال الأمر Preview و بذلك تستطيع رؤية كل ما قمت به من تسيقات وغيرها .......

    أنصح الجميع لمن أراد أن يعمل ملفات CSS بإحترافية تامة ان يستخدم هذا البرنامج ......... وفي الأخير مجرد أقتراح

    ولاكن تظل يا سردال مدرسة نتعلم منها ولا زلنا نتعلم .

    لرؤية مميزات البرنامج بشكل أوضح تفضل :
    http://msdn.microsoft.com/vinterdev/default.asp

    فقط أردت العقيب على الموضوع تحياتي لك .

    اخوك فالح .





    __________________
    * عش ما شئت فإنك ميت . وأحبب من شئت فأنك مفارقة , وأعمل ما شئت فأنك مجازى بة

    * ما فائدة القلم اذا لم يفتح فكرا ..أو يضمد جرحا ..أو يرقا دمعة ..أو يطهر قلباً ..أو يكشف زيفاً .. أو يبني صرحاً يسعد الأنسان في ضلالة
    faleh2002 غير متواجد حالياً

  7. #7
    عضو فعال جدا
    تاريخ التسجيل
    Sep 2000
    المشاركات
    2,029


    Net Hunter: الله يعافيك

    faleh2002: يبدو أن InterDev يقوم بمهمة إنشاء ملفات CSS بشكل ممتاز، وحقيقة أعجبتني الواجهة كثيراً، تختصر الكثير من الوقت الذي قد أقضيه في تحرير الملفات يدوياً ، شخصياً أستخدم برنامج TopStyle Pro وهو برنامج يستحق كل درهم تدفعه من أجل شراءه، فهو يتعامل أيضاً مع XHTML، وphp بشكل محدود، وفي الإصدار القادم سيدعم الكثير من الملفات، ليغني أي شخص يستخدمه عن الحاجة لشراء أكثر من برنامج.

    وشكراً لك





    سردال غير متواجد حالياً

  8. #8
    عضو فعال
    تاريخ التسجيل
    Feb 2003
    المشاركات
    1,168


    الله يعطيك العافية أخ سردال
    كفيت ووفيت





    __________________

    أطلبوا العلم من المهد الى اللحد
    ________________________________________________________________________
    :::::::::: الحدث العربي :::::::::: دليل المعارض العربية :::::::::: http://www.arabevent.com ::::::::::
    arabevent غير متواجد حالياً

  9. #9
    عضو فعال جدا
    تاريخ التسجيل
    Sep 2000
    المشاركات
    2,029


    arabevent: شكراً





    سردال غير متواجد حالياً

  10. #10
    عضو فعال
    تاريخ التسجيل
    Nov 2002
    المشاركات
    1,092


    شكراً لك مواضيع جميلة و إباع بصراحة إبداع ...





    __________________
    البريد
    almuslim@gmail.com
    الماسنجر
    muslem@php.net
    Mr.Muslem غير متواجد حالياً

  11. #11
    عضو فعال جدا
    تاريخ التسجيل
    Sep 2000
    المشاركات
    2,029


    Mr.Muslem: لماذا "مسلم منهار"؟

    لا أستطيع أن أتخيل المسلم إلا شخصاً أمله بالله كبير، وشكراً على المشاركة





    سردال غير متواجد حالياً

  12. #12
    عضو فعال
    تاريخ التسجيل
    Nov 2002
    المشاركات
    1,131


    يا سلام..

    استاذ فعلاً

    جزالك الله كل خير





    __________________
    System
    KaRiM_NET غير متواجد حالياً





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

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

أضف موقعك هنا| اخبار السيارات | حراج | شقق للايجار في الكويت | بيوت للبيع في الكويت | دليل الكويت العقاري | مقروء | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض