اليوم سوف أريكم كيفية صنع قالب لصفحة النت الخاصة بكم, ماذا نحتاج لذلك:
1. معرفة القليل حول HTML
2. معرفة القليل حول CSS
3. معرفت القليل حول Photoshop
4. القليل من الفنتازيا
لنبدأ بالعمل إذا... نقوم بإنشاء ملفين index.html و style.css. لنفرض أن شكل الصفحة سيكون كالتالي :
كما نرى هنا, فإن كل هذا التقسيم للصفحة مصنوع بإستخدام الجداول كل التالي:
<html> <head> <title> Home </title> </head> <body> <table border="1"> <tr> <td> Logo </td> <td colspan="2"> Banner </td> </tr> <tr> <td colspan="3"> Ruler </td> </tr> <tr> <td valign="top"> <table border="0" width="100%"> <tr> <td> Menu </td> </tr> </table> </td> <td valign="top"> <table border="0" width="100%"> <tr> <td> Content </td> </tr> </table> </td> <td valign="top"> <table border="0" width="100%"> <tr> <td> Menu </td> </tr> </table> </td> </tr> <tr> <td colspan="3"> Ruler </td> </tr> <tr> <td colspan="3" align="center"> Footer </td> </tr> </table> </body> </html>
حتى الآن شكل الصفحة غير مقبول, الجداول صغيرة جدا. نفتح فايل style.css و نضع فيه:
body{
padding:0px;
margin:0px;
}
table.main{
width:100%;
height:100%;
}
table.menu{
}
td.top{
height: 125px;
}
td.logo {
width:12%;
}
td.ruler{
height:8px;
}
td.content {
width: 70%;
}
td.menu{
width:250px;
height:300px;
}
td.other{
width:250px;
height:300px;
}
td.bottom {
height:20px;
}ما هذا الكود؟ ما وظيفة الفايل style.css؟ لا بد و أنكم سمعتم ب CSS, الفايل style.css يحتوي على السمات التي سوف نضفيها(اللون, الحجم, الصور,...الخ) على صفحتنا. شرح بسيط للكود أعلاه:
1. padding : المساحة بين محتوى الخلية و الحدود ( Space between cell element and border)
2. margin : المساحة حول محتوى الخلية ( Space around cell element)
3. width : العرض
4. hieght : الطول
نضغط على Refresh فى ال Web Browser لا شيء قد حدث, لماذا؟؟ بالطبع لن يحدث أي تغير, لأنه يجب استدعاء style.css في index.html و ذلك بالكود:
<link href="style.css" rel="stylesheet" type="text/css">
نضغط على Refresh من جديد, ولا ينتج أي شيء. إذا لاحظتم, فأنا استخدمت classes في الفايل style.css, لذلك يجب استدعاء ال class الخاص بكل تاغ بالتعليمة:
<"tag_name class="class_name<
نقوم بذلك:
<html> <head> <link href="style.css" rel="stylesheet" type="text/css"> <title> Home </title> </head> <body> <table border="1" class="main"> <tr> <td class="logo"> Logo </td> <td class="top" colspan="2"> Banner </td> </tr> <tr> <td class="ruler" colspan="3"> Ruler </td> </tr> <tr> <td class="menu" valign="top"> <table border="0" width="100%"> <tr> <td> Menu </td> </tr> </table> </td> <td class="content" valign="top"> <table border="0" width="100%"> <tr> <td> Content </td> </tr> </table> </td> <td class="other" valign="top"> <table border="0" width="100%"> <tr> <td> Menu </td> </tr> </table> </td> </tr> <tr> <td class="ruler" colspan="3"> Ruler </td> </tr> <tr> <td colspan="3" class="bottom" align="center"> Footer </td> </tr> </table> </body> </html>
بعد الضغط على Refresh يجب أنا يكون شكل الصفحة:
الأن وقد قسمنا الصفحة, لم يبقى لدينا سوى وضع بعض الرسومات, دعونا نستخدم الرسومات التالية:
ننشىء الآن مجلد جديد images و نضع بداخله الصور, و الآن نفتح الفايل style.css و نعدل به قليلا:
body{
padding:0px;
margin:0px;
}
table.main{
width:100%;
height:100%;
border-collapse:collapse;
}
table.menu{
border-collapse:collapse;
background-color:#666666;
}
td.top{
height: 125px;
background-image:url('images/banner.jpg');
background-repeat: x;
}
td.logo {
width:12%;
text-align: center;
background-image:url('images/logo_.jpg');
}
td.ruler{
background-image:url('images/seperate.jpg');
background-repeat:x;
height:8px;
}
td.content {
width: 70%;
background-color:#000000;
}
td.menu{
width:250px;
height:300px;
background-color:#000000;
}
td.other{
width:250px;
height:300px;
background-color:#000000;
}
td.bottom {
height:20px;
background-image:url('images/bottom.jpg');
background-repeat: x;
}
td.content{
background-color:#000000;
}ما الجديد:
1. border-collapse : حجم حاجز الجدول
2. background-color : لون الخلفية
3. background-image : صورة الخلفية
4. background-repeat : تكرار الصورة الخلفية
القالب أصبح جاهز الآن بكل بساطة. هذا القالب My Design تم تصميمه من قبلي. إذا أردتم الكود الكامل, فهو هنا:
