said
11-01-2013, بتوقيت غرينيتش 03:21 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* ظƒظٹظپظٹط© ط¹ظ…ظ„ طھط®ط·ظٹط· ظ„طµظپط*ط©layout طھظ…ظ‡ظٹط¯ط§ ظ„طھطµظ…ظٹظ…ظ‡ط§ ط¨ css (http://www.dzbatna.com/t1457407/)
http://i44.tinypic.com/71mlgg.jpg
وبدءا من هذه الدروس, فلابد الأستيعاب جيدا والتطبيق المكثف حتى تتعلم اتقان الcss
فى هذا الدرس مفصل راح نعرف كيف نخطط لصفحة قبل تصميمها بcss حتى تكون
منظمة فى تقسميها وتكون سهله فى التعديل عليها بكل سهولة فى اى جزء تريده
من الصفحة اذا أردت ذلك لاحقا:
اولا : راح نضع مخطط لصفحتنا بحيث تشمل الأتى:
1- الهيدر header : ويشمل لوجو الموقع + تسجيل الدخول
2- الناف بار: ويشمل لنكات الموقع الرئيسية
3- قائمة يمنى: وتشمل لنكات الأقسام الداخلية للموقع
4- قائمة يسرى : وتشمل محتوى الموقع من مقالات....الخ
5- الفوتر: ويشمل حقوق الموقع .....
6- المحتوى الرئيسى main: وراح يشمل بداخلة القائمة اليمنى والقائمة اليسرى
6- المحتوى الكلى container : وراح الهيدر header+الناف بار+المحتوى الرئيسى +الفوتر
الان: دعنا نرسم مخطط لهذا الكلام ........
انظر لهذه الصورة وراح تفهم المعنى:
# صورة 1
http://i45.tinypic.com/swwpbt.jpg
الحين من هذا الصورة نريد ان نكتب كود code html لهذه الصفحة
وراح يكون كالأتى:
1- div للمحتوى الكلى container
2- بداخل الdiv السابق راح يكون فيه div للأتى:
1- div للهيدر >>>> وبداخل هذا الdiv راح يوجد:
- رابط اللوجو
- خانة تسجيل الدخول
2- div للناف بار>>>>> وبداخلة راح يوجد
-لنك الرئيسة
-لنك المنتدى forum
-لنك اتصل بنا
3- div للمحتوى الرئيسى main >>>وبداخلة يوجد div الأتى:
1- div العمود الأيسر(للمقالات) بداخلة العنوان والتاريخ والمقالات
2- dic العمود الأيمن (لنكات الأقسام ) بداخلة لنكات قسم ... وقسم.... وقسم ..... الخ .....
4- div لفصل مسافة بين الmain والفوتر وراح نسميه space
div-5 الفوتر
وبهيك راح يكون كود code الصفحة كالأتى:
رمز Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1256"> <meta name="author" content=""> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <title>درس مفصل تخطيط صفحة وتخطيطها تمهيدا لتصميمها </title> </head> <body> <div id="container"> <div id="header"> <div id="logo"><img src="رابط اللوجو"/> </div> <div id="form"> <form> اليوزر: <input type="text" name="username"> <br> الباسورد: <input type="password" name="password"> </form> </div> </div> <div id="navbar"> <a href="index.html?home">الرئيسية </a> <a href="index.html?forum">المنتدى forum</a> <a href="mailto:vista-designhttp://www.dzbatna.com/images/mail.gifemail.com">اتصل بنا</a> </div> <div id="main"> <div id="leftcloumn"> <h1>اضف مقال</h1> <h2>8 january 2014</h2> <p>اكتب مقالك هنا</p> </div> <div id="rightcolumn"> <h3>الأقسام </h3> اكتب الأقسام </div> <div class="spacer"></div> </div> <div id="footer">© 2014 vista-design </div> </div> </body> </html>
شوفوا شكل هذه الصفحة قبل التعديل عليها بcss كيف شكلها :p
#صورة 2
http://i49.tinypic.com/288mty9.jpg
الحين شوف سحر الcss اللى راح نسويه على هذه الصفحة بكل بساطة
حتى نجعلها صفحة لها قيمة ومٌنظمة .
نأتى الان الى ملف style.css
http://i49.tinypic.com/2ica6p0.jpg
اولا شوف الصورة الاتية مرة اخرى حتى نفهم كيف سيكون التخطيط بcss
#صورة 3
http://i49.tinypic.com/2mdlyck.jpg
هذا هو المطلوب الصحيح واللى مفروض ان يتم على أساسه تقسيم الصفحة
وبعد اضافة بعد الأوامر راح يصبح كود code css هيك:
رمز Code:
/* ------------------------------ css vista-design layout هذا خاص بالتنسيق الرئيسى من الصفحة من خطوط ونوع الخطوط وتأثر مرور الماوس ------------------------------ */ body{font-family:tahoma, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;} input, form, textarea h1, h2, h3, h4, h5, h6{margin:0; padding:0;} h1{font-size:18px;} h2{font-size:14px; color:#999999;} h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;} a:link, a:visited{color:#0033CC;} a:hover{text-decoration:none;} /* ------------------------------ PAGE STRUCTURE هذا هو التغيير المهم اللى راح يقسم الصفحة كما هو موضح ------------------------------ */ #container{width:800px; height:auto; border:1px solid; margin:0 auto;} #header{border:1px solid;width:auto;display:block;height:60px;} #header form{float:right;text-align:right; padding:5px 10px;} #navbar{text-align:right; font-size:small ; width:auto; border:1px solid; display:block; height:30px;} #navbar a{height:28px; line-height:28px; padding:0 4px; display:inline;} #main{border:1px solid;width:auto; display:block; padding:10px 0;} #rightcolumn{width:100px ;border:1px solid;height:300px; margin-right:20px; float:right; text-align:right; padding-right:3px;} #rightcolumn h3{text-align:center;} #leftcolumn{width:590px ;border:1px solid;height:300px; text-align:right; margin-left:10px; padding:3px 5px 3px 10px; float:left;} div.spacer{clear:both; height:10px; display:block;} #footer{width:auto; display:block; padding:10px 5px 9px 3px; font-size:11px; color:#666666;}
لو تلاحظ يوجد بعض الأوامر راح اوضحها للاعضاء:
رمز Code:
display:block
وظيفتها انها راح تقوم بصف اللنكات او اى كلمات على صف واحده على هيئة بلوك, مثل ما نشوف لنكات الناف بار الرئيسية المنتدى forum اتصل بنا...
------------------
رمز Code:
height:auto
اريد ان انوه للقيمة auto فهى مهمة جدااااااا
يجب ان تعلم انه من المفروض انه اى ارتفاع راح يأخذه اى وسم داخل
وسم تم تحديد قيمة طوله ان تكون قيمته auto
مثلا: لو وسم main قمنا بتعيين قميته الى :
رمز Code:
height:300px
اى وسم داخله ولنفرض وسم leftcolumn اذا اردنا تحديد ارتفاعه
فالمفروض ان يكون ان ارتفاعه هكذا
رمز Code:
height:auto
لماذا؟
لانه على سبيل المثال انا كتبت مقال وقد تجاوز طوله 300px
لو انت عينت الطول 300px ولم تجعله auto سوف يتوقف المقال عند هذا المقاس,
اما لو جعلته auto راح يتمدد المقال على حسب حجمه طالما عينت قيمته
auto
http://i49.tinypic.com/120pdeq.jpg
ولاحظ ان فى كود code صفحتنا ان لم أسوى هيك, وهذا يعتبر خطأ منى
ولكن أنا حددت قيم الheight الداخلية فقط ليكون للصفحة ابعاد يمكنكم
مشاهدتها
يمكنكم مشاهدة مثال عملى للصفحة اضغط على الصورة
http://2.bp.blogspot.com/_c-XFk4OciTE/SDQXno25t1I/AAAAAAAAAkw/5i4j6zXPbW8/s400/demo_button.jpg
(http://www.advphp.com/web2/layout)
وملفات الدرس مفصل مرفقة فى الموضوع
بهيك يكون انتهى الدرس مفصل.
اخوكم vista-design
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif layout.zip (http://www.traidnt.net/vb/attachments/450440d1264888674-layout.zip) (1.6 كيلوبايت, عدد مرات المشاهدة 67 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://i44.tinypic.com/71mlgg.jpg
وبدءا من هذه الدروس, فلابد الأستيعاب جيدا والتطبيق المكثف حتى تتعلم اتقان الcss
فى هذا الدرس مفصل راح نعرف كيف نخطط لصفحة قبل تصميمها بcss حتى تكون
منظمة فى تقسميها وتكون سهله فى التعديل عليها بكل سهولة فى اى جزء تريده
من الصفحة اذا أردت ذلك لاحقا:
اولا : راح نضع مخطط لصفحتنا بحيث تشمل الأتى:
1- الهيدر header : ويشمل لوجو الموقع + تسجيل الدخول
2- الناف بار: ويشمل لنكات الموقع الرئيسية
3- قائمة يمنى: وتشمل لنكات الأقسام الداخلية للموقع
4- قائمة يسرى : وتشمل محتوى الموقع من مقالات....الخ
5- الفوتر: ويشمل حقوق الموقع .....
6- المحتوى الرئيسى main: وراح يشمل بداخلة القائمة اليمنى والقائمة اليسرى
6- المحتوى الكلى container : وراح الهيدر header+الناف بار+المحتوى الرئيسى +الفوتر
الان: دعنا نرسم مخطط لهذا الكلام ........
انظر لهذه الصورة وراح تفهم المعنى:
# صورة 1
http://i45.tinypic.com/swwpbt.jpg
الحين من هذا الصورة نريد ان نكتب كود code html لهذه الصفحة
وراح يكون كالأتى:
1- div للمحتوى الكلى container
2- بداخل الdiv السابق راح يكون فيه div للأتى:
1- div للهيدر >>>> وبداخل هذا الdiv راح يوجد:
- رابط اللوجو
- خانة تسجيل الدخول
2- div للناف بار>>>>> وبداخلة راح يوجد
-لنك الرئيسة
-لنك المنتدى forum
-لنك اتصل بنا
3- div للمحتوى الرئيسى main >>>وبداخلة يوجد div الأتى:
1- div العمود الأيسر(للمقالات) بداخلة العنوان والتاريخ والمقالات
2- dic العمود الأيمن (لنكات الأقسام ) بداخلة لنكات قسم ... وقسم.... وقسم ..... الخ .....
4- div لفصل مسافة بين الmain والفوتر وراح نسميه space
div-5 الفوتر
وبهيك راح يكون كود code الصفحة كالأتى:
رمز Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1256"> <meta name="author" content=""> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <title>درس مفصل تخطيط صفحة وتخطيطها تمهيدا لتصميمها </title> </head> <body> <div id="container"> <div id="header"> <div id="logo"><img src="رابط اللوجو"/> </div> <div id="form"> <form> اليوزر: <input type="text" name="username"> <br> الباسورد: <input type="password" name="password"> </form> </div> </div> <div id="navbar"> <a href="index.html?home">الرئيسية </a> <a href="index.html?forum">المنتدى forum</a> <a href="mailto:vista-designhttp://www.dzbatna.com/images/mail.gifemail.com">اتصل بنا</a> </div> <div id="main"> <div id="leftcloumn"> <h1>اضف مقال</h1> <h2>8 january 2014</h2> <p>اكتب مقالك هنا</p> </div> <div id="rightcolumn"> <h3>الأقسام </h3> اكتب الأقسام </div> <div class="spacer"></div> </div> <div id="footer">© 2014 vista-design </div> </div> </body> </html>
شوفوا شكل هذه الصفحة قبل التعديل عليها بcss كيف شكلها :p
#صورة 2
http://i49.tinypic.com/288mty9.jpg
الحين شوف سحر الcss اللى راح نسويه على هذه الصفحة بكل بساطة
حتى نجعلها صفحة لها قيمة ومٌنظمة .
نأتى الان الى ملف style.css
http://i49.tinypic.com/2ica6p0.jpg
اولا شوف الصورة الاتية مرة اخرى حتى نفهم كيف سيكون التخطيط بcss
#صورة 3
http://i49.tinypic.com/2mdlyck.jpg
هذا هو المطلوب الصحيح واللى مفروض ان يتم على أساسه تقسيم الصفحة
وبعد اضافة بعد الأوامر راح يصبح كود code css هيك:
رمز Code:
/* ------------------------------ css vista-design layout هذا خاص بالتنسيق الرئيسى من الصفحة من خطوط ونوع الخطوط وتأثر مرور الماوس ------------------------------ */ body{font-family:tahoma, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;} input, form, textarea h1, h2, h3, h4, h5, h6{margin:0; padding:0;} h1{font-size:18px;} h2{font-size:14px; color:#999999;} h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;} a:link, a:visited{color:#0033CC;} a:hover{text-decoration:none;} /* ------------------------------ PAGE STRUCTURE هذا هو التغيير المهم اللى راح يقسم الصفحة كما هو موضح ------------------------------ */ #container{width:800px; height:auto; border:1px solid; margin:0 auto;} #header{border:1px solid;width:auto;display:block;height:60px;} #header form{float:right;text-align:right; padding:5px 10px;} #navbar{text-align:right; font-size:small ; width:auto; border:1px solid; display:block; height:30px;} #navbar a{height:28px; line-height:28px; padding:0 4px; display:inline;} #main{border:1px solid;width:auto; display:block; padding:10px 0;} #rightcolumn{width:100px ;border:1px solid;height:300px; margin-right:20px; float:right; text-align:right; padding-right:3px;} #rightcolumn h3{text-align:center;} #leftcolumn{width:590px ;border:1px solid;height:300px; text-align:right; margin-left:10px; padding:3px 5px 3px 10px; float:left;} div.spacer{clear:both; height:10px; display:block;} #footer{width:auto; display:block; padding:10px 5px 9px 3px; font-size:11px; color:#666666;}
لو تلاحظ يوجد بعض الأوامر راح اوضحها للاعضاء:
رمز Code:
display:block
وظيفتها انها راح تقوم بصف اللنكات او اى كلمات على صف واحده على هيئة بلوك, مثل ما نشوف لنكات الناف بار الرئيسية المنتدى forum اتصل بنا...
------------------
رمز Code:
height:auto
اريد ان انوه للقيمة auto فهى مهمة جدااااااا
يجب ان تعلم انه من المفروض انه اى ارتفاع راح يأخذه اى وسم داخل
وسم تم تحديد قيمة طوله ان تكون قيمته auto
مثلا: لو وسم main قمنا بتعيين قميته الى :
رمز Code:
height:300px
اى وسم داخله ولنفرض وسم leftcolumn اذا اردنا تحديد ارتفاعه
فالمفروض ان يكون ان ارتفاعه هكذا
رمز Code:
height:auto
لماذا؟
لانه على سبيل المثال انا كتبت مقال وقد تجاوز طوله 300px
لو انت عينت الطول 300px ولم تجعله auto سوف يتوقف المقال عند هذا المقاس,
اما لو جعلته auto راح يتمدد المقال على حسب حجمه طالما عينت قيمته
auto
http://i49.tinypic.com/120pdeq.jpg
ولاحظ ان فى كود code صفحتنا ان لم أسوى هيك, وهذا يعتبر خطأ منى
ولكن أنا حددت قيم الheight الداخلية فقط ليكون للصفحة ابعاد يمكنكم
مشاهدتها
يمكنكم مشاهدة مثال عملى للصفحة اضغط على الصورة
http://2.bp.blogspot.com/_c-XFk4OciTE/SDQXno25t1I/AAAAAAAAAkw/5i4j6zXPbW8/s400/demo_button.jpg
(http://www.advphp.com/web2/layout)
وملفات الدرس مفصل مرفقة فى الموضوع
بهيك يكون انتهى الدرس مفصل.
اخوكم vista-design
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif layout.zip (http://www.traidnt.net/vb/attachments/450440d1264888674-layout.zip) (1.6 كيلوبايت, عدد مرات المشاهدة 67 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
