اصنع واجهة Css بكل بساطة وبدون جداول !

27-Feb-2008, 09:51 AM

أولا أهنئكم بقدوم شهر رمضان المبارك ، الله يوفقنا وإياكم لصيامة وقيامه ..

بسم الله الرحمن الرحيم ، يمكنك باستخدام أنماط الCSS صناعة واجهة موقعك وتجزئتها حسب ماتريد دون استخدام الطريقة الكلاسيكة (الجداول). وفوق هذا كله سرعه تحميل الصفحة. ولمعرفة المزيد حول : لماذا واجهة الCSS أفضل من استخدام الجداول ؟ واختصرها في عملية قراءة الجدول بطيئة ، انعدام المرونه في الجداول ، سهوله التحكم بمظهر الواجه أسهل في الCSS ، الجداول من الصعب بناءها للتوافق مع عدة أحجام للشاشات و من مزايا الCSS هو استخدام أكثر من نمط لعدة أغراض فعند طباعه الصفحة تستطيع استخدام نمط خاص للطباعة وهكذا.

الواجهة التي سنحاول شرح طريقة عملها هي على هذا الشكل :

أولا ً : تهيئة الصفحة وتجميع أفكارك وترتيبها

كود بلغة HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>  واجهتي الأولى </title>
<style type="text/css">
body {
    font-family:Tahoma, 'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-size:.8em;
    direction:rtl;
    color:#999;
}
 
h1,
h2,
h3 {
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-weight: bold;
}
</style>
</head>
 
<body>
</body>
</html>

في هذه الخطوه كتبنا بعض التنسيقات المبدئية من لون النص ونوع الخط .

ثانيا ً : البدء بكتابة العناصر واعطاءها مسميات id حتى يمكننا تسيقها بالCSS
نضع هذا داخل الbody :

كود بلغة HTML:

<div id="wrap">
    <div id="header">
        <h1>رأس الصفحة</h1>
    </div>
    <div id="right">
        <h1>الجزء الأيمن</h1>
    </div>
 
     <div id="left">
        <h1>الجزء الأيسر</h1> 
    </div>
 
    <div id="center">
    <h1>المحتوى الرئيسي</h1>
    </div>
    <div id="footer">
        <h1>ذيل الصفحة</h1>
    </div>
</div>

العنصر الأول هو باسم wrap وهو العنصر الذي يضم بقية العناصر وتستطيع بعدها التحكم في عرض الواجهة إذا أردت .
وبقية العناصر أظنها واضحة.

ثالثاً : تنسيق العناصر وإعطاءها بعض الشكليات الجمالية

مابين وسمين style أضف التالي:

كود بلغة HTML:

#header
{
    padding:1em;
    background-color:#f9f9f9;
    border-bottom:.1em #E2E2E2 solid;
}
#footer
{
    border-top:.1em #E2E2E2 solid;
    background-color:#f9f9f9;
    padding:0 2em;
}
 
 
#right,#left,#center
{
    padding:1em;
}
#center
{
    border-left:.1em #E2E2E2 solid;
    border-right:.1em #E2E2E2 solid;
}

ستحصل على شكل مشابه لهذا :

تلاحظ العناصر ظاهرة بشكل مفرد وسنحاول في الخطوة القادمة -وهي الخطوة الرئيسية- ضبط محاذاتها .

رابعاً : ضبط الFloating للعناصر

أضف

كود بلغة HTML:

#right
{
	float:right;
	width:14em;
}
#left
{
	float:left;
	width:14em;
}

ستحصل على نتيجة جيدة لكن حدود العنصر الرئيسي ظاهره على نهاية الصفحة وهذا بسبب ان العنصر رئيسي أخذ عرض كامل للمكان المتواجد فيه ، والحل بإضافة هامش أيمن وأيسر

كود بلغة HTML:

#center
{
	border-left:.1em #E2E2E2 solid;
	border-right:.1em #E2E2E2 solid;
	margin:0 16em; /* أضفنا هذا السطر*/ 
}

المشكلة الاخرى هي عند تصفحك الواجهة بالانترنت إكسبلورر ستلاحظ "الجزء الأيمن" مكانها اعلى بقليل من "المحتوى الرئيسي" والحل هنا إضافة display:inline-block; للعنصر الرئيسي

كود بلغة HTML:

#center
{
	border-left:.1em #E2E2E2 solid;
	border-right:.1em #E2E2E2 solid;
	margin:0 16em;
	display:inline-block; /* أضفنا هذا السطر*/

حسناً هل انتهينا ؟
لا لم ننتهي بعد بقي أن نذكر بعض المشاكل التي قد تواجهك ، ضع محتوى تجريبي للعنصر الايمن وليكن هكذا :

كود بلغة HTML:

<div id="right">
    	<h1>الجزء الأيمن</h1>
        الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ،
        الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ،
        الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ، الجزء الأيمن ،
    </div>

ستلاحظ ذيل الصفحة لايتأثر بالمحتوى الذي أدخلته وينزل الى أسفل وحل ذلك بجعله يلغي أي عنصر يأتي بجانبه .

كود بلغة HTML:

#footer
{
	border-top:.1em #E2E2E2 solid;
	background-color:#f9f9f9;
	padding:0 2em;
	clear:both; /* أضفنا هذا السطر*/ 
}

الان أدخل محتوى تجريبي بداخل المحتوى الرئيسي وليكن هكذا :

كود بلغة HTML:

<div id="center">
	<h1>المحتوى الرئيسي</h1>
	
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
            
    </div>

سنحاول أدخال نصوص مشابهة للشكل التالي :

كود بلغة HTML:

<div style="float:left; color:red">جملة ملاصقة للجانب الايسر</div>
<div style="float:right; color:blue">جملة ملاصقة للجانب الايمن</div> 
<div style="float:right; color:#993399; clear:both;">جملة فاصلة بينهم</div>

من المفترض ان هذه العناصر تعمل بشكل جيد لكن بحكم المحاذاة الحاصلة من العنصر الأيمن والأيسر فان الfloat داخل العنصر center لن يعمل بشكل جيد ولابد من وضع هذه العناصر في عنصر له خاصية overflow:hidden; display:inline-block

يكون الكود بالشكل النهائي:

كود بلغة HTML:

    <div id="center">
    	<h1>المحتوى الرئيسي</h1>
        <div style="overflow:hidden; display:inline-block">
        <div style="float:left; color:red">جملة ملاصقة للجانب الايسر</div>
        <div style="float:right; color:blue">جملة ملاصقة للجانب الايمن</div> 
        <div style="float:right; color:#993399; clear:both;">جملة فاصلة بينهم</div> 
        </div>
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , 
    المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي , المحتوى الرئيسي ,

    </div>

مثال للناتج النهائي

كتب الموضوع مشكورا Flasher

16-Mar-2008, 03:49 AM

ياسلام عليكـ يا آرا ويب انت خطيييييييييييير ربي يسعدكـ..!

الجنرال

07-Apr-2008, 06:49 AM

ماشاء الله عليك ار ويب تسلم ايديك يا حبيبى

16-Mar-2008, 03:49 AM	#2 (permalink)
عضو جديد تاريخ التسجيل: Jul 2007 المشاركات: 10	رد: اصنع واجهة Css بكل بساطة وبدون جداول ! ياسلام عليكـ يا آرا ويب انت خطيييييييييييير ربي يسعدكـ..! الجنرال

07-Apr-2008, 06:49 AM	#3 (permalink)
عضو جديد تاريخ التسجيل: Apr 2008 المشاركات: 19	رد: اصنع واجهة Css بكل بساطة وبدون جداول ! ماشاء الله عليك ار ويب تسلم ايديك يا حبيبى __________________ بسم الله الرحمن الرحيم بسبب المشاكل فى طلبات الدعم الفنى وصعوبه الوصول الى دعم فنى وحمايه واصلاح لمشاكل المنتديات من قواعد البيات وغيرها من ترقيع الثعرات وحمايه من الاختراق ووالترقيه والتركيب سكربات لموقعك وغيرها من الخدمات www.co-zag.com واميلى karim_karim20102002@yahoo.com او karim_karim20102002@hotmail.com

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
طريقة عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر رد
التحميل المباشر من Youtube وبدون تعب	dragnoir	البرامج الكاملة والنادرة Programs	1	31-Aug-2009 06:22 PM
اكسب المال من تصميم المنازل والحدائق وبدون خبرة	dragnoir	البرامج الكاملة والنادرة Programs	0	01-Aug-2009 01:33 PM
واجهة موقع إستضافة مجانا إحترافيه	araweb	معرض التصاميم وبرامج التصميم	2	21-Apr-2009 11:45 PM
اصنع استايل خاص بك لمنتديات الvb للمبتدئين	هانى الشامى	البرامج الكاملة والنادرة Programs	4	19-Feb-2008 01:28 PM
واجهة استضافة بصيغة psd للتحميل .... روماني	araweb	معرض التصاميم وبرامج التصميم	0	01-Dec-2007 10:41 AM

اصنع واجهة Css بكل بساطة وبدون جداول !

تبادل الخبرات في جميع لغات البرمجة : PHP, ASP, Java Scripts, vb scripts, ajax, vb ....