الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

تصميم موقع ( 3 أعمدة ) بواسطة ال Css | الجزء الأول !

بدأه Numb3r.06 في 7 نوفمبر 2009 · 4 رد · 2,134 مشاهدة · في منتدى تصميم صفحات الويب
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكــم ورحمـة الله وبركاتــه ،،

مضى الكثير من الوقت و أنا فكر في إنشاء درس عن كيفية تصميم صفحة " من 3 أعمدة " بواسطة الـ CSS و إستخدام الـ Float و بعد الكثير من التفكير قمت بتصميم الصفحة و بعد أخد رأي خالد قررت البدأ في كتابة الدرس .. نبدأ بسم الله ..

مثال حي على الدرس ( الشكل النهائي )

في البداية سأقوم بشرح الـ div

اقتباس
و إعطاء فكرة عنه حتى لا تنساها :

الـ Div يمكننا تخيله كـصندوق مخفي نضع به المحتوى ( النص أو الصورة ) و نقوم بتحريكه بالطريقة التي نرغب فيها و هذه صورة بسيطة توضح الفكرة :

1.png

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	 <pre class="html" style="font-family: monospace;">  <html xmlns="http://www.w3.org/1999/xhtml">
	   <head>
	   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	   <title> موقع القرآن الكريم </title>
	   <link href="style.css" rel="stylesheet" type="text/css" />
	   </head>
	   <body>
	   <div id="page">
	   <div id="header">
		 <div id="theader">
		   <h1> موقع القرآن الكريم </h1>
		   <h4> موقع مختص بـ القرآن الكريم </h4>
		 </div>
	   </div>
	   <div id="nav">
		 <ul>
				<li><a href="#">الفهرس</a></li>
				<li><a href="#">الفهرس</a></li>
				<li><a href="#">الفهرس</a></li>
				<li><a href="#">الفهرس</a></li>
				<li><a href="#">الفهرس</a></li>
				<li><a href="#">الفهرس</a></li>
		 </ul>
	   </div>
	   <div id="content">
		 <div id="tcontent">
			 <div id="c1">
	   	<h2> سورة البلد </h2>
	   <p> لَا أُقْسِمُ بِهَذَا الْبَلَدِ (١) وَأَنْتَ حِلٌّ بِهَذَا الْبَلَدِ (٢) وَوَالِدٍ وَمَا وَلَدَ (٣) لَقَدْ خَلَقْنَا الْإِنْسَانَ فِي كَبَدٍ (٤) أَيَحْسَبُ أَنْ لَنْ يَقْدِرَ عَلَيْهِ أَحَدٌ (٥) يَقُولُ أَهْلَكْتُ مَالًا لُبَدًا (٦) أَيَحْسَبُ أَنْ لَمْ يَرَهُ أَحَدٌ (٧) أَلَمْ نَجْعَلْ لَهُ عَيْنَيْنِ (٨) وَلِسَانًا وَشَفَتَيْنِ (٩) وَهَدَيْنَاهُ النَّجْدَيْنِ (١٠) فَلَا اقْتَحَمَ الْعَقَبَةَ (١١) وَمَا أَدْرَاكَ مَا الْعَقَبَةُ (١٢) فَكُّ رَقَبَةٍ (١٣) أَوْ إِطْعَامٌ فِي يَوْمٍ ذِي مَسْغَبَةٍ (١٤) يَتِيمًا ذَا مَقْرَبَةٍ (١٥) أَوْ مِسْكِينًا ذَا مَتْرَبَةٍ (١٦) ثُمَّ كَانَ مِنَ الَّذِينَ آَمَنُوا وَتَوَاصَوْا بِالصَّبْرِ وَتَوَاصَوْا بِالْمَرْحَمَةِ (١٧) أُولَئِكَ أَصْحَابُ الْمَيْمَنَةِ (١٨) وَالَّذِينَ كَفَرُوا بِآَيَاتِنَا هُمْ أَصْحَابُ الْمَشْأَمَةِ (١٩) عَلَيْهِمْ نَارٌ مُؤْصَدَةٌ (٢٠)</p>

			 </div>
	   <div id="c2">
	   	<h2> سورة التين </h2>
	   <p> وَالتِّينِ وَالزَّيْتُونِ (١) وَطُورِ سِينِينَ (٢) وَهَذَا الْبَلَدِ الْأَمِينِ (٣) لَقَدْ خَلَقْنَا الْإِنْسَانَ فِي أَحْسَنِ تَقْوِيمٍ (٤) ثُمَّ رَدَدْنَاهُ أَسْفَلَ سَافِلِينَ (٥) إِلَّا الَّذِينَ آَمَنُوا وَعَمِلُوا الصَّالِحَاتِ فَلَهُمْ أَجْرٌ غَيْرُ مَمْنُونٍ (٦) فَمَا يُكَذِّبُكَ بَعْدُ بِالدِّينِ (٧) أَلَيْسَ اللَّهُ بِأَحْكَمِ الْحَاكِمِينَ (٨) </p>
			 </div>

	   <div id="c3">
	   	<h2> سورة الشمس </h2>
	   <p> وَالشَّمْسِ وَضُحَاهَا (١) وَالْقَمَرِ إِذَا تَلَاهَا (٢) وَالنَّهَارِ إِذَا جَلَّاهَا (٣) وَاللَّيْلِ إِذَا يَغْشَاهَا (٤) وَالسَّمَاءِ وَمَا بَنَاهَا (٥) وَالْأَرْضِ وَمَا طَحَاهَا (٦) وَنَفْسٍ وَمَا سَوَّاهَا (٧) فَأَلْهَمَهَا فُجُورَهَا وَتَقْوَاهَا (٨) قَدْ أَفْلَحَ مَنْ زَكَّاهَا (٩) وَقَدْ خَابَ مَنْ دَسَّاهَا (١٠) كَذَّبَتْ ثَمُودُ بِطَغْوَاهَا (١١) إِذِ انْبَعَثَ أَشْقَاهَا (١٢) فَقَالَ لَهُمْ رَسُولُ اللَّهِ نَاقَةَ اللَّهِ وَسُقْيَاهَا (١٣) فَكَذَّبُوهُ فَعَقَرُوهَا فَدَمْدَمَ عَلَيْهِمْ رَبُّهُمْ بِذَنْبِهِمْ فَسَوَّاهَا (١٤) وَلَا يَخَافُ عُقْبَاهَا (١٥)	  </p> 
	   </div>
		 </div>
	   </div>
	   <div id="footer">
	   <div id="tfooter">
						 <span> جميع الحقوق محفوظة لـ مدونة فتى من زمن آخر</span>
	   </div>
	   </div>
	   </div>
	   </body>
	   </html>

لاحظ في المحتوى السابق إستخدامنا للـ div أكثر من مرة و هذا ما يساعد في التحكم بالصفحة بشكل سهل و إضافة المؤثرات المتعددة ، حيث ( header ) هو رأس الصفحة و ( nav ) هي قائمة الأقسام و ( content ) هو المحتوى ( c1 , c2 , c3 ) هي الأعمدة الثلاثة و ( footer ) هو نهاية الصفحة . الأن قم بإنشاء ملف جديد و سميه style.css .. و ها قد حان وقت العمل :

أولا : سنقوم بإلغاء الحاشية والحشو عن طريق إضافة الأتي :

* {
	   margin: 0;
	   padding: 0;
	   }

ثانيا : أساسيات

قم بإضافة التالي 

body {
	   direction: rtl;
	   font-family:tahoma;
	   background: #796646;
	   }

	   a {
	   text-decoration: none;
	   }


	   p {
	   text-align: justify;
	   }

	   h1 {
	   font-size: 400%;
	   text-align: center;
	   padding: 35px 0 0 0;
	   }

	   h4 {
	   font-size:120%;
	   text-align:center; 
	   color:#e96e33;
	   }

	   h2 {
	   color: #573523;
	   padding: 0 0 010px;
	   }

و هنا تم تعين إتجاه الصفحة عن طريق ( direction ) من اليمين إلى اليسار و تحديد الخط ( Tahoma ) و تعين لون الخليفة ( #796646 ) .

و كذلك تعين شكل الروابط بـ ( text-decoration ) .

و تنسيق محتوى الصفحة ( النص ) عن طريق ( text-align: justify ) و تعيين خصائص العنوانين ( h1 , h2 , h4 ) .

ثالثا : الصفحة ( page ) :

تذكر في ملف index.html إنه تم تحديد محتوى الصفحة كله بـ div أو الصندوق المخفي المسمى page فسنكتب التالي :

#page {
	   width: 994px;
	   background: #FFF;
	   margin: 0 auto;
	   height: 100%;
	   padding: 12px 0 12px 0;
	   border-right: 1px solid #79664b;
	   border-left: 1px solid #79664b;
	   border-bottom: 1px solid #79664b;
	   }

حيث العرض هو ( 994 بكسل ) و لون الخليفة أبيض ( FFF ) و نقوم بإضافة ( margin : 0 auto ) لتوسيط المحتوى و نحدد الإرتفاع بـ ( 100% ) أي التمدد و في النهاية إضافة الإطار للجواب الثلاثة ( اليمين – اليسار – الأسفل ) .

رابعا : رأس الصفحة

رأس الصفحة أو الـ ( header ) و هو مكان العنوان و الوصف و لاحظ في ملف index.html تم حصره داخل صندوق مخفي عن طريق الـ div و قمت بإضافة id لرأس الصفحة و id فرعي كذلك ..

#header {
	   margin: 0px auto 0px auto;
	   width: 944px;
	   background: #222;
	   border: 1px solid #f25614;
	   }

تم هنا تحديد العرض ( width ) و الخليفة ( background ) و عمل إطار ( border ) ..

#theader {
	   margin: 1px;
	   padding: 1px;
	   background: #f3ede2;
	   height: 150px;
	   }

هذا هو الـ id الفرعي ( و يمكن الإستغناء عنه و العمل على الأساسي ، و لكن تحتاج للتعديل على ملف index.html )

حيث الحاشية والحشو قمت بتحديدهم بـ 1px و هذا لأني أرغب في إضافة إطارين للهيدر و ليس إطار واحد و تم تعين الإرتفاع بـ 150 بكسل .

إلى هنا أكون قد أنتهيت من بداية هذا الجزء و سيكون الجزء القادم عبارة عن قائمة الأقسام و المحتوى و الأعمدة ..

#2

سؤال :

كيف يمكن جعل الموقع ممدد على كامل الصفحة

ما أقصدة عندما تكون البيانات في الموقع قليله فإن الفوتر أو ذيل الصفحة لا يكون في آخر صفحة الإنترنت , السؤال كيف أجعل ذيل الصفحة دائما ملتصق في ذيل المتصفح حتى لو كانت البيانتا قليله وإذا زادت يتم تمديد الصفحة كما هو معروف

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#3

جميل جدا جزاك الله خير

سجلني متابع بعنف :)

اتمنى في نهاية كل درس ترفق اذا سمحت العمل وشكرا مقدما

#4

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

ملف الـ HTML

<body>
	<div id="page-wrap">
 <p>محتوى الموقع </p>
<div class="push"></div>
</div>
<div id="footer">
	<p>جميع الحقوق محفوظة</p>
</div>   </body>

التنسيق الخاص به 

 
* {
	margin: 0;
}
html, body {
	height: 100%;
}
#page-wrap {
	margin: 0 auto -140px; 
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
#footer, .push {
	height: 140px; 
}

عذرا على تأخري في الرد :)

علما بأن هناك أكثر من طريقة ، عن نفسي أعرف هذه و هناك طريقة أخرى ..

تحياتي ..

تم تعديل هذه المشاركة بواسطة Numb3r.06 في 10 نوفمبر 2009 في 14:52

#5
حسام المقحم كتب:
جميل جدا جزاك الله خير

سجلني متابع بعنف :)

اتمنى في نهاية كل درس ترفق اذا سمحت العمل وشكرا مقدما

صديقي ، قمت بإرفاق مثال على الدرس في البداية ،

عد إلى الأعلى و شاهد المثال :)

مواضيع مشابهة