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

by evergreen Sat Feb 05, 2011 5:46 pm

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

XHTML و CSS

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

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

index.html
style.css
/images

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

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

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	<!-- نكتب إسم ملف تنسيق css -->

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

07

08	<!-- إسم الصفحة سيظهر في المتصفح -->

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

10

</head>

11

12

<body>

13

14	<!-- محتوى الصفحة سيكون ضمن العنصر body -->

15

...

16

17

</body>

18

</html>

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

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

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

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.

إضافات أخرى

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

http://www.mubde3.net/blog/archives/design-webpage-with-xhtml-css

by reem Tue Feb 15, 2011 1:11 am

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

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

Re: درس: تصميم صفحة ويب بواسطة XHTML و CSS