منتديات كاس العالم الترفيهيه

اختار لغه المنتدى

اربط حزام الامام و اضغط

منتديات كاس العالم الترفيهيه

انت الزائر رقم؟

عدد زوار المنتدى

زوار المنتدى

المواضيع الأخيرة

» واجهات مجانيه للشات الكتابي و الصوتي
الأربعاء أغسطس 01, 2012 2:32 am من طرف الصقر

» حركات خطيره لكرة القدم بلاي ستيشن 2
الثلاثاء نوفمبر 15, 2011 6:34 pm من طرف AHMMED

» الان حصريا كود لعبه بلياردو اون لاين
الأحد أغسطس 21, 2011 1:56 pm من طرف Mr_King

» رتب و نجوم الاعضاء و المشرفين
السبت يوليو 02, 2011 9:07 pm من طرف غوغو

» شرح كيفية اضافة موقعك الى ( msn ( bing وجلب روبوتاته الى منتداك ! بالشرح المفصل !
الأحد مايو 15, 2011 5:50 am من طرف حرائر السامر

» احدث كود العاب فلاشية لموقعك 2010 متجدد + مجانا
الإثنين مايو 09, 2011 3:26 am من طرف مهدي العكيلي

» كود لعبه من سيربح المليون (حصريا)
الإثنين مايو 09, 2011 3:25 am من طرف مهدي العكيلي

» استايل لمركز التحميل كليجا
الخميس مارس 03, 2011 9:23 pm من طرف Admin

» كود محرك نشر المواضيع
الخميس مارس 03, 2011 8:28 pm من طرف Admin

راديو روتانا

 

    درس: تصميم صفحة ويب بواسطة xhtml و css

    شاطر
    avatar
    Admin
    المدير العام
    المدير العام


    عدد المساهمات : 431
    نقاط : 881
    السٌّمعَة : 0
    تاريخ التسجيل : 07/11/2010
    العمر : 30

    درس: تصميم صفحة ويب بواسطة xhtml و css

    مُساهمة من طرف Admin في الأحد فبراير 06, 2011 2:03 am

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


    في البداية يستحسن ترتيب ملفاتك بحيث يكون ملف خاص بالصور ، وملف خاص للتصميم (الذي ستضع فيه ملف css) وهذا إن كنت ستضع أكثر من تصميم للصفحة وإلا ضعه بجانب الصفحة ومكونات الصفحة هي:
    index.html
    style.css
    /images
    كتابة المحتويات وتقسيمها

    إبدأ بكتابة شفرة HTML مباشرةً وتحديد رأس الصفحة وقائمة التصفح وبقية المحتويات كما خططت لها ويفضل ترتيبها بحيث أنك تستخدم فراغات ما بين العناصر الرئيسية والفرعية في HTML وإستخدام التعليقات للتنقل بين العناصر بسهولة ، في البداية نحدد Doctype في بداية الصفحة وبالطبع سنسخدم XHTML من نوع Transitional ، هذه الشفرة الرئيسية التي سنكتبها في البداية:




    كود:
    الكود:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- نكتب إسم ملف تنسيق css --><link href="style.css" type="text/css" rel="stylesheet" /><!-- إسم الصفحة سيظهر في المتصفح --><title>موقع ويب</title></head><body><!-- محتوى الصفحة سيكون ضمن العنصر body -->...</body></html>




    الأشياء التي قمنا بتحديدها وكتابتها هي قائمة التصفح ( الصفحات الرئيسية التي يمكن في أي وقت التنقل فيما بينها / Navigation ) ورأس الصفحة كتبنا إسم الموقع ووصف بسيط له ثم المحتوى الرئيسي للصفحة ثم القائمة الجانبية وتحتوي على روابط أو أشياء أخرى تحددها ثم ذيل الصفحة في النهاية ، إطلع على شفرة XHTML التالية ضمن العنصر <body>:
    [img]

    ستلاحظ تعيين خاصية id لكل وسم div نكتب به الإسم الذي ينختاره في ملف CSS لكتابة الخواص المتعلقة بمحتوى أوسمة div التي حددناها في شفرة HTML.
    تحديد وتنسيق ملامح المحتويات عن طريق CSS

    هنا سيتم تحديد شكل المحتويات التي كتبناها بالتفصيل ، تستطيع كتابة شفرة CSS إما عن طريق نفس الصفحة ( عن طريق العنصر style وما بين العنصر head ) ونقوم يتضمين شفرة CSS عن طريق ملف خارجي عن طريق هذا الكون ويكون ضمن العنصر head:
    نكتب المحددات (Selectors) كأوسمة p ، h1 ، html ، .. والكلاسات وغيره ، تكتب هذه الشفرة بالمثال الذي ذكرته سابقاً سأدقق على بعض النطاق التي سأذكرها ، هنا سأذكر أهم المحددات لتصميم صفحتنا:



    ستلاحظ تعيين خاصية id لكل وسم div نكتب به الإسم الذي ينختاره في ملف CSS لكتابة الخواص المتعلقة بمحتوى أوسمة div التي حددناها في شفرة HTML.
    تحديد وتنسيق ملامح المحتويات عن طريق CSS

    هنا سيتم تحديد شكل المحتويات التي كتبناها بالتفصيل ، تستطيع كتابة شفرة CSS إما عن طريق نفس الصفحة ( عن طريق العنصر style وما بين العنصر head ) ونقوم يتضمين شفرة CSS عن طريق ملف خارجي عن طريق هذا الكون ويكون ضمن العنصر head:
    نكتب المحددات (Selectors) كأوسمة p ، h1 ، html ، .. والكلاسات وغيره ، تكتب هذه الشفرة بالمثال الذي ذكرته سابقاً سأدقق على بعض النطاق التي سأذكرها ، هنا سأذكر أهم المحددات لتصميم صفحتنا:


    كود:
    الكود:
    body {    margin: 0;    direction: rtl;    text-align: center;}#centrical {    margin: 0 auto;    text-align: right;    width: 768px;}#navigation {    width:100%;    height: 31px;}#navigation ul {    margin: 0; padding: 0;    list-style: none;}#navigation ul li {    margin: 0; padding: 0;    display: inline;}#navigation ul li a {    padding: 6px 25px 8px 25px;    text-decoration: none;    float: right;}#header {    margin: 10px auto;    width: 768px;    height: 122px;    text-align: right;}#content {    margin: 10px auto;    padding: 0 10px;    width: 56 %;    text-align: right;    float: right;}#content p {    line-height: 20px;    font-family: tahoma; font-size: 14px;}#sidebar {    margin: 10px auto;    width: 38 %;    float:left;}#footer {    padding: 5px 0;    border-top: 1px dotted #999999;    clear: both;}








    أشياء مهمة حسب الكلاسات المذكورة بالأعلى:
    body : خاصية direction تحمل القيمة rtl لإستخدامها في تحويل إتجاه الصفحة إلى العربية.
    body : خاصية text-align تحمل القيمة center لتوسيط النص و الكلاسات في وسط الصفحة إن أردت. (نستخدمها في دعم متصفح الإكسبلورر)
    centrical# : إذا أردنا توسيط صندوق أو أي وسم div أو غيره في متصفحات تدعم المعايير القياسية يجب أن تحمل الخاصة margin قيمة auto كإضافة تلقائية في يمين ويسار الصندوق.
    navigation ul li# : أعطينا الخاصية display قيمة inline لكي تكون القوائم متساوية في خط واحد ضمن قائمة التصفح.
    content p# : إستخدمنا خاصية line-height لعمل مسافة ما بين سطور الفقرة في النص.
    sidebar , #content# : إستخدمنا خاصية float لتحديد توجه الكلاس إما على اليمين أو على اليسار لكي يكونوا معاً في جانب واحد.
    footer# : إستخدمنا خاصية clear في ذيل الصفحة لتكون أسفل الكلاسات التي تحمل خاصية float وتجنباً عدم تناسقها في حال إستخدام خاصية float.
    إضافات أخرى

    ستلاحظ في ملف المصدر إضافة خواص لتنسيق المحتوى بشكل عام كأيقونة الروابط وخلفية رأس الصفحة وتحديد الخطوط المستخدمة وغيره ، تأكد في عملك خلو الصفحة من أخطاء بشكل عام وتوافق الصفحة مع متصفحات الويب المختلفة أهمها متصفح فايرفوكس والإكسبلورر


      الوقت/التاريخ الآن هو الخميس أبريل 26, 2018 3:52 am