بسم الله الرحمن الرحيم

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

أول شىء راح نفتح الفوتوشوب ونسوى عمل جديد بمقاسات 1000 فى 800 بكسل

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

بعدين نسوى تدرج لصفحة باستخدام اداة التدرج

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


بعدين راح نسوى ثلاث مستطيلات
مستطيل للهيدر
ومستطيل للمحتوى
ومستطيل للفوتر


نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي



بعدين بأستخدام اداة التقطيع راح نقوم بتقطيع الصفحة لاربعة اجزاء مهمه

ولازم تركز فى القطع ومكانها لانه مهم جداااااااااااااا

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

بعد عمل ذلك

راح نقوم بعمل save for web للصفحة ونختار حفظ للصوره حتى يقطعها الفوتوشوب

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

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

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي



الحين انتهينا من نقطة التصميم

فلنفرض اننا حفظنا الصور داخل مجلد اسمه test

بداخل هذا الملف راح نسوى ملفين

index.html وهو الصفحة الرئيسية اللى راح يظهر فيها شغلنا

style.css وهو ملف الcss


بالنسبة لصفحة الindex

فكرته بسيطه

راح نسوى div رئيسى باسم container

بداخله 3 divs

div للهيدر header# وراح نستخدمه فى ملف الcss لنعدل عليه
div للمحتوى content# بالمثل...................................... ...... ........
div للفوتر footer# بالمثل .................................................. .

ولا ننسى الترميز فى اول الصفحة windows-1256


وهذه هى الصفحة:



كود:
<!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> 	<title>درس تخطيط وتصميم الزوايا المستديرة</title>	 	<meta http-equiv="content-type" content="text/html;charset=windows-1256" />     	<meta name="keywords" content="css tutorial"></meta> 	<meta name="description" content=""></meta> 	<link rel="stylesheet" href="style.css" media="screen" /> </head> <body>  <div id="container">  	<div id="header"> 		 		<h1><a href="http://vistacompany.org" title="درس عمل تخطيط وزوايا مستديرة ">vista-design</a></h1>  	</div>  	<div id="content"> 	 		<h2>المحتوى</h2> 		 		<p>ماذا يمكن أن أفعل بتقنية CSS؟  CSS هي لغة تصميم تحدد شكل وثيقة HTML،   فهي تهتم بالخطوط، الألوان، الهامش، والعرض والارتفاع، </br>  صورة خلفية الموقع، وكيفية توزيع المساحات وأشياء أخرى كثير  ة، انتظر فقط وسترى! </br> HTML يمكن أن تستخدم بشكل خاطئ لإضافة تصميم  للمو  اقع، لكن CSS توفر المزيد من الخيارات وهي أكثر دقة وعملية،   وهي مدعومة من قبل المتصفحات الرئيسية اليوم.  </br>  	</div>	 	 	<div id="footer"> 	coded by <a href="http://vistacompany.org.com" title="css xhtml valid">vistacompany.org</a> 	</div>  </div>  </body> </html>




نأتى الان لصفحة css اللى هى أهم شىء

اولا دعنا نفهم تحديد id وclass لكل جزء فى الصفحة راح نعدل عليه

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

اكيد الصورة مشروحة

الخطوات فى ملف css:

1- نسوى body ونضيف رابط الخلفية ولاتنسى التكرارررررررررررررر
مع زيادات لون الخط والحجم وووووو



كود:
body{  		background:#d8e6ec url(steps_01.gif) repeat-x;         font:80% Arial, Helvetica, Sans-Serif; 		color:#555; 		line-height:180%; 		margin:0; 		padding:0; 		text-align:center;         }

2-نأتى لcontainer div
نعطيه العرض اللى كتبناه
ونخليه auto للحواف بتاعته حتى ما يخذ العرض تمام على اى متصفح
ونخلى اتجاه الكلام من اليمين طالما احنا عرب

#container{
margin:0 auto;
width:850px;
text-align:right;
}


3- نأتى ل header div

راح نضيف رابط الصورة وارتفاعها



كود:
#header{ 		height:283px; 		background:url(steps_05.gif) no-repeat 0 0; 		}

4- نأتى لcontent div

نضيف الصورة ولا تنسى راح نكررها بالعرض
ونسوى محاذاة حتى الكلام بعيد عن الجوانب



كود:
#content{ 		background:url(steps_08.gif) repeat-y; 		padding:.5em 34px; 		}

5- اخر شىء الفوتر


كود:
#footer{ 		padding:25px 60px; 		background:url(steps_10.gif) no-repeat 0 0;				 		color:#ffffff; 		}

والملف كاملا راح يكون هيك





كود:
    body{  		background:#d8e6ec url(steps_01.gif) repeat-x;         font:80% Arial, Helvetica, Sans-Serif; 		color:#555; 		line-height:180%; 		margin:0; 		padding:0; 		text-align:center;         }     	#container{	 		margin:0 auto; 		width:850px; 		text-align:left; 		} 	#header{ 		height:283px; 			padding-left:5px ; 			 		background:url(steps_05.gif) no-repeat 0 0; 	 		}				 	#content{ 	text-align:right; 	background:url(steps_08.gif) repeat-y  ; 	padding:.5em 50px ; 		} 	#footer{ 		padding:50px 60px; 		background:url(steps_10.gif) no-repeat 0 0;				 		color:#ffffff; 		}


مثال حى: اضغــــــــــط هــــــــــنا