درس: تصميم صفحة ويب بواسطة XHTML و CSS ~ andromeda-ar

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

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

index.html
style.css
/images

كتابة المحتويات وتقسيمها

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

01 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02 <html xmlns="http://www.w3.org/1999/xhtml">

03 <head>

04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

05 

06 <link href="style.css" type="text/css" rel="stylesheet" />

07

08 

09 <title>موقع ويب</title>

10 </head>

11

12 <body>

13

14 

15 ...

16

17 </body>

18 </html>

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

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

تحديد وتنسيق ملامح المحتويات عن طريق CSS

هنا سيتم تحديد شكل المحتويات التي كتبناها بالتفصيل ، تستطيع كتابة شفرة CSS إما عن طريق نفس الصفحة ( عن طريق العنصر style وما بين العنصر head ) ونقوم يتضمين شفرة CSS عن طريق ملف خارجي عن طريق هذا الكون ويكون ضمن العنصر head:

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

01 body {

02     margin: 0;

03     direction: rtl;

04     text-align: center;

05 }

06

07 #centrical {

08     margin: 0 auto;

09     text-align: right;

10     width: 768px;

11 }

12

13 #navigation {

14     width:100%;

15     height: 31px;

16 }

17

18 #navigation ul {

19     margin: 0; padding: 0;

20     list-style: none;

21 }

22

23 #navigation ul li {

24     margin: 0; padding: 0;

25     display: inline;

26 }

27

28 #navigation ul li a {

29     padding: 6px 25px 8px 25px;

30     text-decoration: none;

31     float: right;

32 }

33

34 #header {

35     margin: 10px auto;

36     width: 768px;

37     height: 122px;

38     text-align: right;

39 }

40

41 #content {

42     margin: 10px auto;

43     padding: 0 10px;

44     width: 56 %;

45     text-align: right;

46     float: right;

47 }

48

49 #content p {

50     line-height: 20px;

51     font-family: tahoma; font-size: 14px;

52 }

53

54 #sidebar {

55     margin: 10px auto;

56     width: 38 %;

57     float:left;

58 }

59

60 #footer {

61     padding: 5px 0;

62     border-top: 1px dotted #999999;

63     clear: both;

64 }

أشياء مهمة حسب الكلاسات المذكورة بالأعلى:

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.

إضافات أخرى

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

andromeda-ar

المشاركات الشائعة

ارشيف المدونة