درس للمبتدئين يشرح كيفية تصميم صفحة ويب بـ XHTML و CSS ، سيكون بسيط وسهل وموجه لمن يريد معرفة كيفية تصميم المواقع وبالأخص الطريقة الصحيحة والمعايير الحديثة ، سأركز فقط على أشياء أساسية يعني لن أطيل في الدرس كثيراً فقط تفاصيل صغيرة في CSS ، كما أن هذا الدرس بداية لدروس قادمة في نفس الموضوع إن شاء الله ولكن ستكون منها متوسطة ومنها متقدمة.
في البداية يستحسن ترتيب ملفاتك بحيث يكون ملف خاص بالصور ، وملف خاص للتصميم (الذي ستضع فيه ملف css) وهذا إن كنت ستضع أكثر من تصميم للصفحة وإلا ضعه بجانب الصفحة ومكونات الصفحة هي:
index.html
style.css
/images
كتابة المحتويات وتقسيمها
إبدأ بكتابة شفرة HTML مباشرةً وتحديد رأس الصفحة وقائمة التصفح وبقية المحتويات كما خططت لها ويفضل ترتيبها بحيث أنك تستخدم فراغات ما بين العناصر الرئيسية والفرعية في HTML وإستخدام التعليقات للتنقل بين العناصر بسهولة ، في البداية نحدد Doctype في بداية الصفحة وبالطبع سنسخدم XHTML من نوع Transitional ، هذه الشفرة الرئيسية التي سنكتبها في البداية:
كود:
الأشياء التي قمنا بتحديدها وكتابتها هي قائمة التصفح ( الصفحات الرئيسية التي يمكن في أي وقت التنقل فيما بينها / 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 : خاصية 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.
إضافات أخرى
ستلاحظ في ملف المصدر إضافة خواص لتنسيق المحتوى بشكل عام كأيقونة الروابط وخلفية رأس الصفحة وتحديد الخطوط المستخدمة وغيره ، تأكد في عملك خلو الصفحة من أخطاء بشكل عام وتوافق الصفحة مع متصفحات الويب المختلفة أهمها متصفح فايرفوكس والإكسبلورر
في البداية يستحسن ترتيب ملفاتك بحيث يكون ملف خاص بالصور ، وملف خاص للتصميم (الذي ستضع فيه ملف 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.
إضافات أخرى
ستلاحظ في ملف المصدر إضافة خواص لتنسيق المحتوى بشكل عام كأيقونة الروابط وخلفية رأس الصفحة وتحديد الخطوط المستخدمة وغيره ، تأكد في عملك خلو الصفحة من أخطاء بشكل عام وتوافق الصفحة مع متصفحات الويب المختلفة أهمها متصفح فايرفوكس والإكسبلورر
» حركات خطيره لكرة القدم بلاي ستيشن 2
» الان حصريا كود لعبه بلياردو اون لاين
» رتب و نجوم الاعضاء و المشرفين
» شرح كيفية اضافة موقعك الى ( msn ( bing وجلب روبوتاته الى منتداك ! بالشرح المفصل !
» احدث كود العاب فلاشية لموقعك 2010 متجدد + مجانا
» كود لعبه من سيربح المليون (حصريا)
» استايل لمركز التحميل كليجا
» كود محرك نشر المواضيع