ثانياً: ملف السي اس اس:
في هذا الملف سنقوم بعملية تحديد أماكن الصناديق التي صنعناها في الملف السابق، بالإضافة إلى عملية تحديد بعض الستايلات للخطوط و الروابط.
الستايل الأول سيكون لوسم الـbody:
كود:
body{direction:rtl;margin:0;background:url(images/bg.gif) repeat-y 50% 0 #DCDCDC; font-family:Tahoma, Arial, Verdana, sans-serif; font-size:0.75em; color:#646464;text-align: right;}
في هذا الستايل سنقوم أولا بتحديد الإتجاه الذي نريد أن يكون عليه المستند و هو "من اليمين إلى اليسار".
الأمر الثاني سيكون margin:0 و الذي سيزيل الحواشي الإفتراضيه التي تكون موجوده في صفحة الويب عند بنائها.
الأمر الثالث الذي سنحدده هنا هو خلفيه الصفحه، هذه الخلفيه ستكون عباره عن صوره تتوسط الصفحه، و باقي الخلفيه ستكون اللون:#DCDCDC. أما باقي الأوامر فهي لتحديد نوع الخط و حجمه و لونه.
الستايل الثاني سيكون للصندوق Container و هو الصندوق الأكبر و الحاوي لجميع الصناديق الأخرى:
كود:
#container{width:524px; margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto;}
هذا الستايل يحتوي على أمرين أساسيان و حسب، و هما العرض الذي نريده لذاك الصندوق و الذي سيكون 524 بكسل، و الأمر الآخر هو الحواشي، و ستكون كالتالي:
- الحاشية العلويه ستكون مساوية للصفر، أي أننا لا نريد اي حاشيه،
- الحاشية السفليه ستكون كالعلوية، أي أننا لا نريد أي حاشية سفليه أيضاً،
- الحاشية اليمنى و اليسرى سيحتويان على القيمة auto لنقوم بوضع هذا الصندوق بمنتصف الصفحه.
الستايل الثالث هو لصندوق رأسية الموقع header:
كود:
#header{width:500px; height:100px; background-color:#F5F5F5; border-bottom:1px solid #A7A7A7; margin-right:4px; margin-left:6px; margin-bottom:35px; padding-top:32px; padding-right:15px;text-align: right;}
هذا الستايل قد يبدو طويلاً نسبياً، لكنه بسيط و ليس فيه أي شكل من التعقيد:
- الأمرين الأول و الثاني لتحديد عرض (500 بكسل) و طول (100 بكسل) الصندوق
- الأمر الثالث لتحديد لون خلفية الصندوق
- الأمر الرابع لإخبار المتصفح أننا نريد وضع حد أو border في الجزء السفلي من الصندوق و نقوم بتحديد عرضه و نوعه و أخيراً لونه.
- بالنسبه للحواشي فإننا نريد وضع حاشيه يمنى (5 بكسل) و يسرى (5 بكسل) و أخيره في الأسفل (35 بكسل)
- لوضع عنوان الموقع بالمكان المحدد الذي نريده، علينا وضع بعض الحواشي الداخليه باستخدام الأمر padding. سنحتاج هنا لوضع حاشية داخليه علويه بمقدار 32 بكسل و أخرى بالجهة اليمنى بمقدار 15 بكسل. يمكنك تغيير هذه المقاييس حسب حاجتك و ذوقك!
- آخر أمر هنا هو إتجاه النص نريده يكون من الجهة اليمين.
الآن نريد تحديد حجم العنوان الرئيسي للموقع من خلال الستايل التالي:
كود:
#header h1{ font-size:2em;}
فيكون حجم العنوان بداخل الصندوق header هو 2em
نأتي الآن إلى صندوق middle و هو كما ذكرنا في السابق فإنه يحتوي على صندوقين بداخله و هما صندوق القائمه الرئيسية و صندوق المحتويات. في هذا الصندوق (middle) سنقوم فقط بوضع الحواشي اليمنى و اليسرى اللازمه لإبعاد الصندوقين الذين بداخله عن حافة الصندوق الأكبر (Container)، و نقوم بعمل هذا كالتالي:
كود:
#middle{margin-right:35px; margin-left:35px;}
الآن سنبدأ في صندوق القائمة الرئيسية للموقع و المسمى Navigation، في هذا الصندوق سنقوم سنقوم بوضع ثلاثة أوامر، و ستكون على الشكل التالي:
كود:
#navigation{width:125px; float:right;text-align: right;}
هذه الأوامر الثلاثه هي:
- عرض الصندوق و الذي يساوي هنا القيمة 125 بسكل
- float:right.... و هذا الأمر يخبر المتصفح أننا نريد أن نضع هذا الصندوق في الجهة اليمنى من الصندوق الأكبر الذي هو بداخله و هو الصندوق middle. هذا الأمر (float) يعتبر من أهم الأوامر في عملية ترتيب الصناديق المستخدمه في بناء الموقع، فهو الذي يقوم بإخبار المتصفح عن الأماكن التي نريد أن نضع فيها صناديقنا دون أن نضع قيم ثابته (position:absolute) لتحديد مكان ظهور الصندوق.
- الأمر الأخير هو لتحديد إتجاه النصوص.
بداخل هذا الصندوق يوجد لدينا القائمه الرئيسية. هذا القائمه قمت بعمل ستايل لها لتظهر صورة السهم على الجانب الأيمن من كل رابط بدلاً من الدائرة الممله التي نراها عند قيامنا ببناء قوائم غير مرقمه <ul>.
الستايل الذي سيلزمنا للقيام بذلك هو التالي:
كود:
#navlist{margin-right:0; padding-right:0; list-style: none;}
#navlist li{padding-right:20px; background-image:url(images/arrow.gif); background-repeat:no-repeat; background-position: center right;}
الصندوق التالي الذي سنقوم بعمل الستايل الخاص به هو صندوق المحتويات (content)، و سيكون بالشكل التالي:
كود:
#content{width:310px; float:left; margin-bottom:50px; text-align: right;}
هذا الستايل يحتوي على أربعه أوامر:
- أمر عرض الصندوق و سيحتوي على القيمة 310 بكسل
- الأمر float و هو الذي تحدثنا عنه سابقاً في ستايل صندوق القائمه. لكننا سنقوم الآن باستخدامه لوضع هذا الصندوق في الجهة اليسرى من الصندوق middle.
- الحاشية السفليه للصندوق و ستحوي القيمة 50 بكسل
- أخيراً إتجاه كتابة النصوص
بالنسبه للعنوان في هذا الصندوق فسنقوم بتحديد حجمه باستخدام الستايل التالي:
كود:
#content h1{font-size:1.5em;}
اذا فحجمه سيكون 1.5em
الستايل التالي الذي سنطبقه سيكون على صندوق قاع الموقع footer، و به سيكون لدينا 3 أوامر كالتالي:
كود:
#footer{clear:both; margin-right:25px;text-align: right;}
- الأمر الأول هنا (clear:both هو الأهم لدينا، فهو يقوم بإنزال الصندوق المطبق عليه هذا الإمر إلى السطر التالي. مثلاً لو كان لدينا قبل هذا الصندوق صندوق آخر عرضه 100 بكسل، فسيكون عندنا بهذه الحاله مكان كافي لوضع هذا الصندوق بجانبه، و لكننا لا نريد فعل ذلك، لهذا سنقول للمتصفح أننا نريد هذا الصندوق أن ينزل تحت الصندوق السابق مهما كان عرض او قيمة حاشية ذاك الصندوق.
- الأمر الثاني هو للحاشية اليمنى و التي نريدها أن تكون 35 بكسل. تذكر هنا أننا خرجنا الآن من الصندوق middle أي أن هذه الحاشيه ستكون بين هذا الصندوق و الصندوق الحاوي لجميع الصناديق container.
- الأمر الثالث و الأخير هو لتحديد مسار النص بداخل هذا الصندوق.
آخر ستايل سيكون للروابط و هو كالتالي:
كود:
a:link, a:visited{color:#646464; text-decoration:none;}
a:hover{text-decoration:underline;}
لا أظن أنه يحتاج إلى أي شرح..
النتيجه النهائيه لجميع الأوامر السابقه هي:
كود:
body{direction:rtl;margin:0;background:url(images/bg.gif) repeat-y 50% 0 #DCDCDC; font-family:Tahoma, Arial, Verdana, sans-serif; font-size:0.75em; color:#646464; text-align: center;}
#container{width:524px; margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto;}
#header{width:500px; height:100px; background-color:#F5F5F5; border-bottom:1px solid #A7A7A7; margin-right:4px; margin-left:6px; margin-bottom:35px; padding-top:32px; padding-right:15px;text-align: right;}
#header h1{ font-size:2em;}
#middle{margin-right:35px; margin-left:35px;margin-bottom:50px;}
#navigation{width:125px; float:right;text-align: right;}
#navlist{margin-right:0; padding-right:0; list-style: none;}
#navlist li{padding-right:20px; background-image:url(images/arrow.gif); background-repeat:no-repeat; background-position: center right;}
#content{width:310px; float:left;text-align: right;}
#content h1{font-size:1.5em;}
#footer{clear:both; margin-right:25px;text-align: right;}
a:link, a:visited{color:#646464; text-decoration:none;}
a:hover{text-decoration:underline;}
بهذا نكون قد انتهينا من بناء ملف السي اس اس.
الأمر الوحيد الذي بقي علينا عمله هو وصل ملف السي اس اس بملف الإتش تي إم إل، و سيكون بإحدى الطرق التاليه:
إما عن طريق وضع هذه الستايلات بداخل الوسم head في صفحة الـ html كالتالي:
كود HTML:
<head>
<title>موقعي الشخصي | تم بناء هذا الموقع لأهداف تعليمية و حسب</title>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1256" />
<style type="text/css" media="screen">
body{direction:rtl;margin:0;background:url(images/bg.gif) repeat-y 50% 0 #DCDCDC; font-family:Tahoma, Arial, Verdana, sans-serif; font-size:0.75em; color:#646464; text-align: center;}
... باقي الستايلات
</style>
</head>
أو عن طريق وضع هذه الستايلات بملف خارجي و لنسمه styles.css و وضعه في المجلد ذاته الذي يحوي ملف الhtml، فنضع بهذه الحاله وصله له في وسم الhead كالتالي:
كود HTML:
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
و بهذا نكون قد انتهينا من العمل، و أصبح موقعنا جاهزاً..
يمكنك إلقاء نظره على العمل النهائي من الرابط التالي:
كود HTML:
http://www.isader.com/SSS1/css01.html
http://www.isader.com/SSS1/css01.html
ملاحظه: بحال كان الشرح غير كافي على أحد النقاط، أرجو من الجميع عدم التردد في طرح الأسئله.
ملاحظه أخرى: للأشخاص الذين هم على دراية بكيفية تصميم المواقع باستخدام السي اس اس، و وجدوا أن هناك خطأ في أحد الملفات السابقه، أو أن هناك طريقه أفضل لعمل المطلوب، الرجاء عدم التردد في طرحها و إفادتنا بها.
أتمنى أن يكون هذا الدرس مفيداً و أدى الغرض المطلوب منه
تحيتي للجميع...
عماد الصدر
معاً لإنترنت عربية أفضل