cssbit 2.0

كثير من المطورين يواجهون صعوبة في بناء صفحة كاملة ب css، هذه المقالة البسيطة تعرض طريقة لتصميم صفحة ويب عادية ب css و xhtml ..

تحضير ملف css:
أول شيء أقوم به، أو إنشاء مجلد جديد للعمل في LOCALHOST ليكن باسم page مثلا، وانشئ داخله مجلد جديد باسم: css أو style أو stylesheet ..

ببساطة لدي مجلد باسم page أو project أو اي اسم اخر يحتوي على ما يلي:

• مجلد باسم css
• مجلد باسم images لوضع الصور background و icons
• ملف index.html

ثم انتقل الى مجلد css وانشيء ملف style.css أو أي اسم أخر: master, dashboard, login .. حسب مكان استعمال الملف ..

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

/**
 
 @file: master.css
 @update: 08/06/2008 Or 08/06 only
 @author: cssbit.com
 
*/

كتابة رؤوس الأقلام:
أبدأ بكتابة أهم class سأستعملها وعادة تكون 4 أو 5 .. اما اضافة المزيد من الكلاسات والخصائص فتأتي في وقت لاحق عندما أنتهي من بناء أساس الصفحة ..

body {
 
}
#wrap /* ... #page, #main ... */ {
 
}
#header {
 
}
#sidebar {
 
}
#content {
 
}
#footer {
 
}

الكلاس #wrap يمكن ان يضم باقي الكلاسات header, footer, sidebar .. كما يمكن ان يكون مستقلا عنهم .. ايضا يمكن اختيار اسم مناسب وقصير ومفهوم ..

نعم انتهى ملف css بالنسبة لي ..

تهيئة ملف xhtml:
سانشئ ملف xhtml جديد واحفظه باسم index.html أو login.html .. استعمل phpdesigner لذلك هو يقوم بكتابة وسوم مبدئية مثل doctype ووسمي head و body ..

مباشرة بعد وسم body ابدأ بكتابة تعليق، هذا أول شيء أقوم به دائما ..

<!-- #start page -->
 
<!-- #end page -->

بعد ذلك أقرر شكل الصفحة الذي اريد، وهل ستكون بعرض الشاشة مثلا، أم بقياس معين: 760 بيسكل مثلا ..

<!-- #start page -->
<div id="wrap">
 
 <!-- start header -->
 <div id="header"></div>
 <!-- /end haeder -->
 
 <!-- start sidebar -->
  <div id="sidebar"></div>
 <!-- /end sidebar -->
 
 <!-- start content -->
  <div id="content"></div>
 <!-- /end content -->
 
 <!-- start footer -->
 <div id="footer"></div>
 <!-- /end footer -->
 
</div>
<!-- #end page -->

وهكذا اكون انتهيت من تخصيص صفحة xhtml .. أنشأت اقساما في الصفحة بعدد class التي كتبتها في ملف css من قبل ..
التعليقات المكتوبة قبل كل class بسيطة وواضحة تشرح بداية class ونهايته ..
طبعا لن اكتب اكثر من 2 او 3 كلمات في التعليق .. كلمات انجليزية بسيطة وواضحة

بداية العمل:
مباشرة الى ملف css، لا استطيع الانتظار حتى أبدأ بكتابة اول الاسطر .. بحيث اكتب ما اتخيله وما أريد الحصول عليه، ومن حين لاخر اضغط على زر F5 أو refresh لرؤية ماذا حل بالصفحة ..

body {
	margin: 0;
	padding: 0;
	font: 1em arial, verdana;
}
 
#wrap {
	width: 800px;
	margin: 05px auto;
 
}
 
#header {
	height: 120px;
	background: #4DBDE3;
}
 
#sidebar {
	width: 260px;
	float: left;
	border: 2px solid #ddd;
	height: 300px; /* i will remove this line later */
	margin: 05px 0;
 
}
 
#content {
	width: 510px;
	float: right;
	border: 2px solid #ddd;
	height: 300px; /* i will remove this line later */
	margin: 05px 0;
}
 
#footer {
	clear: both;
	height: 80px;
	background: #696969;
 
}

هذه الاسطر كتبتها دون الرجوع لملف xhtml لأنني اعرف مسبقا ما الذي اريده .. هدير، قائمة جانبية على اليسار، محتوى، فوتر ..

• شكل الصفحة
• تحميل الملفات

طبعا لم اكتب شيء في ملف xhtml لحد الان .. عدا اسطر الاعداد والتهئية ..
الارتفاع الذي وضعته لكل من sidebar و content سأفوم بحذفه عند العمل على الصفحة، وضعته لارى شكل الصفحة ..
طبعا اثناء العمل ساضيف اسطر وامسحها، اغير الالوان والخطوط والأحجام عشرات المرات ..

انتقل بين صفحة css و صفحة xhtml، أستعرض مجلد الايقونات والصور لاضيف بعضها منها .. لاحصل في النهاية على صفحة انيقة ومرتبة ومتوافقة مع المعايير القياسية ..

This entry was posted on الأحد, يونيو 8th, 2008 at 7:17 م and is filed under دروس. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.