إن كنت تبرمج تطبيقات للويب، وتحتاج لعرض بعض البيانات على هيئة Grid، فهذا الدرس يعطيك طريقة سهلة وسريعة لعرض بيانات عضوية على شكل جدول .. كالمستعملة في موقع Youtube

الطريقة بسيطة وأكثر احترافية من الطريقة المستعملة في Youtube حيث استعمل الموقع وسوم div بكثرة.

استعمال Bulleted List:

<h2></h2>
<ul>
	<li> <span></span></li>
	<li> <span></span></li>
	<li> <span></span></li>
	<li> <span></span></li>
	<li> <span></span></li>
</ul>

طبع البيانات:

<h2>Profile</h2>
<ul>
	<li>name: <span>cssbit</span></li>
	<li>channel views: <span>158</span></li>
	<li>age: <span>54</span></li>
	<li>joined: <span>february 12, 2007</span></li>
	<li>last sign in: <span>1 week ago</span></li>
	<li>videos watched <span>1,505</span></li>
	<li>subscribers: <span>5</span></li>
	<li>country: <span>morocco</span></li>
</ul>

ما ستضيفه الان في CSS:

ul {
	position: relative;
}
ul li {
	border-bottom:1px dotted #ccc
}
ul li span {
	position: absolute;
	right:05px
}

من المهم جدا أن تعطي الخاصية: relative للقائمة UL كي تستطيع تحريك القائمة او تغيير العرض والمكان وستبقى البيانات دائما في صندوق UL كذلك هذا مهم كي يتم احتساب المسافة في Right من يمين UL وليس من يمين الصفحة Body

الان استعمل مهارتك في CSS لتنسيق البيانات بخط جميل ولون مناسب ..

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

مثال مباشر

سنتعمل Class داخل Footer ونعطيه بعض الخصائص، وداخل هذا Class سنستعمل Heading (لك حرية الاختيار) والقوائم Bulleted List

<div id="footer">
	<div class="section">
	  <h2>title</h2>
	  <ul>
		 <li>link</li>
	  </ul>
	</div>
</div>

#footer .section {
	float: left;
	width:200px;
	padding:1em;
	margin: 10px;
}

كرر Class section في صفحة HTML حسب ما لديك من روابط، بعد ذلك أضف خلفية وألوان وخصائص حسب رغبتك.

ul {
	margin: 10px 0 0 0
}
ul li {
	text-transform: capitalize;
	display: block;
	padding:.2em;
	border-bottom:1px solid #BCD19E
}
ul li a {
	color:#BCD19E;
}
ul li a:hover {
	color:#fff
}

ولا تنس إضافة بعض Fix ل IE6:

/* IE Hacks */
*html #footer {
	height:1%;
}

يمكنك تصميم نماذج بريدية أنيقة (login, dashboard ..) في أقل من 5 دقائق.
مثال مباشر على الصفحة
نفس المثال ب HTML5

لديك صفحة دخول إلى لوحة تحكم في مشروعك مثلا، افتح المحرر وأنشئ صفحتين:

login.html
css/reset.css
css/login.css

استعمل ملف reset لتصفير الاعدادات الافتراضية ل Elements وأنصح باستعماله.

اختر لونا مختلفا للخلفية Body وليكن بدرجة خفيفة:

body {
	background:#f2f5ec;
}

ضع النموذج البريدي في وسط الصفحة:

#page {
	width:385px;
	margin:60px auto
}

<div id="page">
</div>

غير لون الخلفية الخاص بالنموذج الى الأبيض:

form {
	background:#fff;
}

أضف خلفية مختلفة للحقول Input سواء باستعمال لون ب CSS أو على شكل صورة:

form input {
	background:url(../images/input.png) repeat-x 0 0;
	border:1px solid #ddd;
}

وخلفية أو لون مختلف عند وضع مؤشر الفأرة Focus:

form input:focus {
	background:url(../images/input-focus.png) repeat-x 0 0;
	border:1px solid #bbddfc
}

وأخيرا، استعمل Class لتغير خصائص زر الأرسال Submit:

<input type="submit" value="login" class="login" />

form input.login:hover {
	background:#666
}

يمكنك الان البدأ بتصميم واجهة UI للوحة التحكم الخاصة بتطبيقك.

يمكن تصميم النماذج البريدية بأي طريقة يرغب بها المطور، وما دام هناك مجال للابتكار اللذي يصب في مصلحة الزائر، شرط أن يحضى هذا الأخير بتجربة جيدة في الموقع، وهذا يقدونا للحديث عن user experience أو اختصارا UX، الذي هو مهنة قائمة بذاتها لا تختلف عن Web designer أو Web Developer وأن كان من الأجدر بمطور الويب الإلمام ب UX

يجب أن تقدم تجربة فريدة وممتعة للزائر وهو يتصفح وينتقل بين صفحات الموقع، وأن يشعر بأن الموقع يهتم به كإنسان وليس ك Robot، وسأعود لاحقا للحديث عن هذا الموضوع من وجهة نظري.

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

تجربة النموذج البريدي:

اضغط هنا لرؤية المثال

الطريقة:

بعد أن نضع النصوص والحقول في نفس السطر أو في فقرة، نضيف بعض الخصائص على Input

form input {
	border:0;
	border-bottom:1px dotted #666;
	background: none;
	color:#C13E1F
}

من المهم أن نضيف هذا السطر في البداية، كي لا يظهر border على كامل input

form input {
	border:0;
}

زر الأرسال كي يظهر بشكل مختلف نضيف له Class وخصائص مختلفة:

<input type="submit" value="sign up" class="submit" />

form input.submit {
	background: #467B2C;
	color:#fff;
	border:none;
	padding:.5em
}

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

IE7 ملف javascript لترقيع المشاكل التي تظهر في متصفحات IE عند استعمال css و xhtml، كما يوجد ملف IE8 لبعض الخصائص المتقدمة الموجودة في css والتي لا تظهر في IE7 فما تحت

تمة عدة طرق لحل مشكلة عدم ظهور صور PNG بشكل شفاف في متصفحات IE6 فما تحت، من بينها استعمال ملف IE7، و بعض المواقع ك woothemes تستعمله في أعمالها الجميلة

يمكن تحميل الملف ووضعه في مجلد JS ضمن ملفات مشروعك، كما يمكن استدراجه مباشرة من مكتبة google code

<!--[if lt IE 7]>
 <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
 type="text/javascript"></script>
< ![endif]-->

الان اي صورة او ايقونة شفافة بصيغة PNG يجب أن تضيف لها -trans كالتالي:
logo-trans.png
edit-trans.png
..

وستظهر بشكل شفاف في متصفح IE6 (والأقل)

تجربة بدون ملف ie7
تجربة بملف ie 7

جرب المثالين على متصفح IE6

ملاحظة مهمة جدا، بعد استعمال ملف IE7 قد تظهر بعض الصور أو الإيقونات بشكل صغير في IE6 لذا من الأفضل إضافة width و height

<img src="10-trans.png" alt="" width="48" height="48" />

من المؤسف أننا كمطورين، مضطرين للمرور بكل هذا التعب والازعاج، فقط لدعم شفافية PNG في متصفحات IE