درس: تصميم صفحة ويب بواسطة XHTML و CSS
درس للمبتدئين يشرح كيفية تصميم صفحة ويب بـ 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>:
ستلاحظ تعيين خاصية 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.
إضافات أخرى
ستلاحظ في ملف المصدر إضافة خواص لتنسيق المحتوى بشكل عام كأيقونة الروابط وخلفية رأس الصفحة وتحديد الخطوط المستخدمة وغيره ، تأكد في عملك خلو الصفحة من أخطاء بشكل عام وتوافق الصفحة مع متصفحات الويب المختلفة أهمها متصفح فايرفوكس والإكسبلورر.
درس رائع أخوي أحمد بارك الله فيك ووفقك
وإياك أخي عبدالملك ، أشكرك على تعليقك ..
الصراحة درس جميل وانت مبدع أخوي
والدرس مفيد …..
بارك الله في جهدك ووقتك ..
الدرس بسيط جداً، رائع – ومهضوم – كتبته تماماً مثل المثال ، لكن هناك خلل ما في تجربتي احد الكلاسات فلم تظهر النتيجة مثل صفحتك ، سأحاول مرة أخرى بفكرة قريبه ..
تحية طيبه
{ درس رااائع جدا وقيم !! .. استفدت الكثييييير منه ! .. لا حرمت الجنه !! ..
وننتظر المزيد ..
خالص الود =)
من أروع الدروس بالنسبة لي..
درس سلس ويوضح فكرة الـ css للمبتدئين..
أشكرك ..
[...] يغلب فيها الجانب النظري على العملي ، هناك موضوع عملي لكيفية تصميم صفحة ويب بـ XHTML و CSS وأيضاً أوجه الدرس للمبدئين خصوصاً ، كما أن لكل مطور [...]
جميل جداً أخي العزيز
تابعت لك دروس مختلفة هنا
لكن عندي سؤال بسيط لأني حابه أطبق الخطوات معاك
أريد أعرف موقع أو مساحة تتيح لي عمل موقع وتطبيق هذه الخطوات
وتقديري لك
يمكن تطبيق الدرس بسهولة بإستخدام أي محرر html، أو محرر عادي مثل notepad على الجهاز بحفظ الصيغة على *.html ، عند تحميل الملفات المذكورة في الدرس ستجدين ملفات html إفتحيها على أي متصفح ويمكنك تعديلها وفهم طريقة عرضها وكتابتها ..
أما إذا كنت تقصدين الإستضافة (Web Hosting) / تجربة إستضافة محلية، فهذا موضوع يمكن أن يفيدك:
http://www.walidov.com/web-development/xampp-localhost-apache.html
http://www.walidov.com/web-development/domain-name-godaddy.html
أيضاً إستضافة من جوجل مجانية إن كنت تمتلكين حساب هناك:
http://sites.google.com/
يمكنك البحث أكثر عبر جوجل لأن معلوماتي عن الإستضافة المجانية ليست كثيرة ولا أهتم بها حالياً ..
السلام عليكم ورحمة الله وبركاته
الأخوة الأعزاء
أردت أن أقدم إليكم الكتب التالية باللغة العربية حول CSS وهي مفيدة جداً:
حلول متقدمة في الويب باستخدام CSS
http://www.raypub.com/catalog/book_info.php?cPath=&products_id=780
برمجة الويب باستخدام HTML مع CSS و XHTML
http://www.raypub.com/catalog/book_info.php?cPath=&products_id=740
بالتوفيق للجميع
المهندس: نور جزار