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

Flasher · 12-09-2007, 03:31 PM

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

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

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

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

كود:

<!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 :

كود:

<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 أضف التالي:

كود:

#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 للعناصر

أضف

كود:

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

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

كود:

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

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

كود:

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

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

كود:

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

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

كود:

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

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

كود:

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

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

كود:

<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

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

كود:

    <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>

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

والله أعلم.

محمد الثقفي · 12-09-2007, 03:44 PM

السلام عليكم

درس رائع يا فلاشر

كثير من الاعضاء محتاجين الدرس هذا وبصراحه شرحك رائع ومميز جدا

جزاك الله خير وكل عام وانت بالف خير

seifss · 12-09-2007, 07:50 PM

يعطيك العافيه ياFlasher اسلوبك رائع بارك لله فيك ............وكل عام وانت بخير

هكرز المنتديات · 14-09-2007, 11:26 PM

ممكن أعرف معني <div>

وفيما تستخدم رجاءاً

Flasher · 16-09-2007, 11:45 PM

أهلا بكم جميعا وتقبل الله صيامكم وقيامكم.. بارك الله فيكم..

بالنسبة لك اخي "هكرز المنتديات"

Div ماخوذة من الكلمة division وتعني قسم او جزء
اما استخدامها فهي تستخدم للبيانات التي لايوجد لها وسم محدد مثل وسم الtable محدد لتصميم جدول معين وسم a محدد للروابط والوسم b محدد للنمط العريض وهكذا ... اما الdiv لايوجد لها بيانات محددة او اشياء عادة تعرض داخلها فهي تقبل اي شئ ، بالاضافة انها لايوجد فيها اعدادات افتراضيه مثل الهوامش في p .. بالاضافه انها تعرض ك block element "تاخذ سطر كامل" ونفس الشئ في الوسم span الا انه inline element "تقبل عناصر اخرى في نفس السطر" ويمكنك تعديل مظهرها كماتشاء فهي كما ذكرت لك لاتحتوي على اعدادات افتراضيه مثل الP او h1 .

هكرز المنتديات · 17-09-2007, 12:38 AM

وضحت الفكرة ... الله يبارك فيك ويزيدك علم ياغالي

شكرااااااا

Abdullah Alhoshan · 17-09-2007, 02:32 AM

بارك الله فيك .. دوما متألق ومبدع ،،

A-z-k9 · 18-09-2007, 06:23 AM

أنار الله دربك علماً ونوراً , شرحك ممتاز جداً ومفهوم

جزاك الله خير

عابرنت · 18-09-2007, 09:39 AM

يعطيك العافيه اخوي على شرح المميز

ايمن جوجل · 20-09-2007, 05:26 PM

ما شاء الله
موضوع قيم للغاية عزيزيFlasher, الله ينور

تحياتي لك

Mafia4Maroc · 21-09-2007, 03:51 AM

Gooooooooooooooood
Man
Thanks

Barakat · 26-09-2007, 04:43 PM

فعلا رائع

Abosaleh_2003 · 28-09-2007, 04:57 PM

لا خلا ولا عدم

-مشاري- · 01-10-2007, 02:12 AM

بيض الله وجهك ولاهنت

x_yousef_x · 03-10-2007, 01:56 PM

شكر لك يا فلاشر

تحياتي

Abdulaziz Al Rashdi · 05-10-2007, 09:04 PM

شكرا لك أخي
بارك الله فيك
أرغب ببناء صفحة على الشفرات التي قمت بكتابتها

Flasher · 06-10-2007, 01:34 AM

اهلا بكم جميعا....وشكرا على كلامكم الجميل.

إقتباس:

المشاركة الأصلية بواسطة الرجل الخارق

شكرا لك أخي
بارك الله فيك
أرغب ببناء صفحة على الشفرات التي قمت بكتابتها

لا مانع اخي الكريم... بالعكس يسعدني جدا، يهمني في الموضوع انك تعرفت على طريقة بسيطة جدا في بناء واجهات (أو هياكل) الصفحات باستخدام CSS.

أحمد خلف · 09-10-2007, 02:39 PM

درس رائع شكراً فلاشر.

الCSS نستخدمها ولكن نجهل الكثير عنها خاصة بما يتعلق بتقسيم وترتيب الصفحة.

تسائلات :
× لدي بلوك ايمن واريد ان اضع في داخله DIV واريد هذا الDIV يتمركز في اعلى هذا البلوك.
× DIV بعرض 400px واريد ان اجعل في الطرف الايمن نص وفي الطرف الايسر نص اخر بدون ما اقسم الDIV.
× كيف اتحكم بمكان النص داخل الDIV.
× لدي بلوكين بالDIV بجانب بعض واريد ان اجعل بنهم فاصل "مثلاً 2px".

ارجو اني ما اكون ثقلت

Flasher · 10-10-2007, 02:23 AM

إقتباس:

المشاركة الأصلية بواسطة Fast

درس رائع شكراً فلاشر.

الCSS نستخدمها ولكن نجهل الكثير عنها خاصة بما يتعلق بتقسيم وترتيب الصفحة.

العفو اهلا بك...

إقتباس:

تسائلات :
× لدي بلوك ايمن واريد ان اضع في داخله DIV واريد هذا الDIV يتمركز في اعلى هذا البلوك.

لم افهم معنى "يتمركز في الاعلى" ؟ ..عندما تضع :

كود:

<div class="block">
<div class="top">
TOP
</div>
.........
</div>

ستظهر TOP في الاعلى .. لكن ربما تقصد ان هناك حشو زائد من الاعلى (padding) وتريد الDIV يرتفع
عندها تستطبع اعطاءه هامش(margin) بالسالب حتى يرتفع.
margin-top:-4px;

إقتباس:

× DIV بعرض 400px واريد ان اجعل في الطرف الايمن نص وفي الطرف الايسر نص اخر بدون ما اقسم الDIV.

اممم..
ممكن تقصد كذا

كود:

<div class="d400">
	<div class="l">left left left left left left left left left left left left left </div>
    <div class="r">right right right right right right right right right right </div>
</div>

css:

كود:

div.d400
{
	width:400px;
	background:#ffff99;
	overflow:hidden;
}
div.d400 div.r
{
	float:right;
	width:198px;
	color:#CC6600;
}

div.d400 div.l
{
	float:left;
	width:198px;
}

إقتباس:

× كيف اتحكم بمكان النص داخل الDIV.

عن طريق :
text-align : left/right/center *** يتحكم بالنص فقط ولايؤثر على العنصر الحاوي للنص
float : right / left *** يعمل ازاحه كامله للعنصر
position : *** // نفس الشئ يتحكم بالعنصر كامل // وله موضوع مستقل هنا للاخ الفاضل ca2oom

إقتباس:

× لدي بلوكين بالDIV بجانب بعض واريد ان اجعل بنهم فاصل "مثلاً 2px".

ارجو اني ما اكون ثقلت

عن طريق الmargin يمكنك ذلك العنصر الايمن اعطه margin-left:1px و الايسر margin-right:1px .

أحمد خلف · 10-10-2007, 04:24 AM

انت مميز Flasher

كل ما كنت اعرفه عن الCSS هو 40% انت الان اعطيتني حوالى 50% من اللي كنت احتاجة،

لا عدمنا الله من اعضاء مثلك

سوف اعوذ للموضوع اذا واجهني اي تسائل اخر

وكل عام وانت بخير مقدماً

aldosare · 14-10-2007, 10:20 AM

جزاك الله خير الجزاء
صراحة استفدت من درسك كثير
عملت تجربة في المرفقات لكن واجهتني مشاكل
منها :

1- توسيط الصفحة

2- تلاحظ أن في الجزء الأيمن من التصميم رؤوس الجداول في أطرافها تقويس لكن المشكلة أن الجدول يكمل الخط فيكون شكله مشوه شنو الحل فيها .؟
3- تلاحظ أن في الجزء الأيمن والأيسر والوسك فرقنا بيهما بخط لكن امشكلة عندما كثرت الجداول ونزلت للأسفل اختفى الخط ما السبب .؟

شكرا لك على الشرح
وفي انتظار توضيحك

Flasher · 14-10-2007, 01:37 PM

شكرا Fast وكل عام والجميع بخير

..

aldosare شغلك حلو.. لكن عندك لخبطة شوي
- اذا بغيت تستخدم وصف css لاكثر من عنصر استخدم class وليس الid
وفي الcss # >>> .
- اذا استخدمت الpx لاتخلط معها الem واستمر على واحد منهم فقط.
- ماوضعته انا ليس شرطا ان يكون موجود مثل الpadding والmargin والborder في الخطوة الثالثة لاني اشوفك قعدت تعدل فيها وحطيت شئ سالب على شانها.
- وضعت انت لل body عرض محدد وهذا خطأ لان حتى الان ليس اغلب المتصفحات تدعم هذه الطريقة والصحيح ان تجعل العرض لل wrap .. وتضع margin:auto
- مشكلة الحد اللي داخل على القائمة هذا شئ طبيعي لان الحد يكون خارج العنصر فمهما سويت من خلفيه ماراح تغطي الحد .. والحل انك تجعل الحد لعنصر اسفل من عنوان القائمة .
- مشكلة الخطوط انها حدود للعنصر center والذي يفترض ان يكون اطول واحد بينهم (الايمن والايسر)
لكن هناك حل افضل مادام انك وضعت عرض ثابت لل wrap ان تصنع خلفيه بنفس عرض الwrap فيها الخطوط بامكانك الاطلاع على الملف المرفق ففيه تعديلات كثيرة .. ايضا لاتهمل شكل الواجهة في المتصفحات الاخرى.

aldosare · 14-10-2007, 02:52 PM

أسأل الله العلي العظيم أن يوفقك في كل دروبك
وأن يفتح لك أبواب رزقه

صراحة أفدتني

خاصة تعليقاتك في الملف

بارك الله فيك

وياليت يكون هنالك دروس أكثر عمقا في css

مثل التعامل مع زرائر الهافر - وكذلك القوائم المنسدلة وغيرها من أوامر تضفي جمالا للموقع

وأنا أول التلاميذ المتابعين لدروسك

Flasher · 15-10-2007, 08:37 PM

إقتباس:

المشاركة الأصلية بواسطة aldosare

أسأل الله العلي العظيم أن يوفقك في كل دروبك
وأن يفتح لك أبواب رزقه

صراحة أفدتني

خاصة تعليقاتك في الملف

بارك الله فيك

وياليت يكون هنالك دروس أكثر عمقا في css

مثل التعامل مع زرائر الهافر - وكذلك القوائم المنسدلة وغيرها من أوامر تضفي جمالا للموقع

وأنا أول التلاميذ المتابعين لدروسك

امين واياك اخي الحبيب...
بالنسبة للدروس فلست اهلا لذلك هذا مجرد محاولة بسيطة لنقل شئ تعلمته لكم.
وان شاء الله هناك المزيد.... لعل وعسى ان اجد موضوعا مناسبا للطرفين للملقي

والمتلقين الكرام..

yasser-atrees · 25-10-2007, 01:43 AM

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