| دورة تصميم المواقع بإسلوب المحترفين web2.0 دورة تصميم المواقع بإسلوب المحترفين web2.0
ملقي الدورة: [vista-design] |
  |
| | LinkBack | أدوات الموضوع | انواع عرض الموضوع |
|
#1
30-01-2010, 02:32 AM
| |||||
| |||||
 [الدرس السادس] كيفية عمل تخطيط لصفحةlayout تمهيدا لتصميمها ب css
 نبدأ معكم انطلاقا من هذا الدرس استغلال ما تعلمناه فى الدروس السابقة وبدءا من هذه الدروس, فلابد الأستيعاب جيدا والتطبيق المكثف حتى تتعلم اتقان الcss فى هذا الدرس راح نعرف كيف نخطط لصفحة قبل تصميمها بcss حتى تكون منظمة فى تقسميها وتكون سهله فى التعديل عليها بكل سهولة فى اى جزء تريده من الصفحة اذا أردت ذلك لاحقا: اولا : راح نضع مخطط لصفحتنا بحيث تشمل الأتى: 1- الهيدر : ويشمل لوجو الموقع + تسجيل الدخول 2- الناف بار: ويشمل لنكات الموقع الرئيسية 3- قائمة يمنى: وتشمل لنكات الأقسام الداخلية للموقع 4- قائمة يسرى : وتشمل محتوى الموقع من مقالات....الخ 5- الفوتر: ويشمل حقوق الموقع ..... 6- المحتوى الرئيسى main: وراح يشمل بداخلة القائمة اليمنى والقائمة اليسرى 6- المحتوى الكلى container : وراح الهيدر+الناف بار+المحتوى الرئيسى +الفوتر الان: دعنا نرسم مخطط لهذا الكلام ........ انظر لهذه الصورة وراح تفهم المعنى: # صورة 1  الحين من هذا الصورة نريد ان نكتب كود html لهذه الصفحة وراح يكون كالأتى: 1- div للمحتوى الكلى container 2- بداخل الdiv السابق راح يكون فيه div للأتى: 1- div للهيدر >>>> وبداخل هذا الdiv راح يوجد: - رابط اللوجو - خانة تسجيل الدخول 2- div للناف بار>>>>> وبداخلة راح يوجد -لنك الرئيسة -لنك المنتدى -لنك اتصل بنا 3- div للمحتوى الرئيسى main >>>وبداخلة يوجد div الأتى: 1- div العمود الأيسر(للمقالات) بداخلة العنوان والتاريخ والمقالات 2- dic العمود الأيمن (لنكات الأقسام ) بداخلة لنكات قسم ... وقسم.... وقسم ..... الخ ..... 4- div لفصل مسافة بين الmain والفوتر وراح نسميه space div-5 الفوتر وبهيك راح يكون كود الصفحة كالأتى: كود: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <**** ************"content-type" content="text/html; charset=windows-1256"> <**** 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">المنتدى</a> <a href="mailto:vista-design@email.com">اتصل بنا</a> </div> <div id="main"> <div id="leftcloumn"> <h1>اضف مقال</h1> <h2>8 january 2010</h2> <p>اكتب مقالك هنا</p> </div> <div id="rightcolumn"> <h3>الأقسام </h3> اكتب الأقسام </div> <div class="spacer"></div> </div> <div id="footer">© 2010 vista-design </div> </div> </body> </html> شوفوا شكل هذه الصفحة قبل التعديل عليها بcss كيف شكلها  #صورة 2  الحين شوف سحر الcss اللى راح نسويه على هذه الصفحة بكل بساطة حتى نجعلها صفحة لها قيمة ومٌنظمة . نأتى الان الى ملف style.css  اولا شوف الصورة الاتية مرة اخرى حتى نفهم كيف سيكون التخطيط بcss #صورة 3  هذا هو المطلوب الصحيح واللى مفروض ان يتم على أساسه تقسيم الصفحة وبعد اضافة بعد الأوامر راح يصبح كود css هيك: كود: /* ------------------------------
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;} كود: display:block ------------------ كود: height:auto اريد ان انوه للقيمة auto فهى مهمة جدااااااا يجب ان تعلم انه من المفروض انه اى ارتفاع راح يأخذه اى وسم داخل وسم تم تحديد قيمة طوله ان تكون قيمته auto مثلا: لو وسم main قمنا بتعيين قميته الى : كود: height:300px فالمفروض ان يكون ان ارتفاعه هكذا كود: height:auto لانه على سبيل المثال انا كتبت مقال وقد تجاوز طوله 300px لو انت عينت الطول 300px ولم تجعله auto سوف يتوقف المقال عند هذا المقاس, اما لو جعلته auto راح يتمدد المقال على حسب حجمه طالما عينت قيمته auto  ولاحظ ان فى كود صفحتنا ان لم أسوى هيك, وهذا يعتبر خطأ منى ولكن أنا حددت قيم الheight الداخلية فقط ليكون للصفحة ابعاد يمكنكم مشاهدتها يمكنكم مشاهدة مثال عملى للصفحة اضغط على الصورة  وملفات الدرس مرفقة فى الموضوع بهيك يكون انتهى الدرس. المطلوب من الأعضاء: عمل تعديل على هذه الصفحة بالأتى: 1-اضافة لنك فى الناف بار. 2-اضافة div فوق الفوتر وقم بتحديد الحدود الخاص به border solid فى انتظاركم اخوكم vista-design توقيعي عالم مطورى الويب لتعليم برمجة وتصميم المواقع www.advphp.com آخر تعديل بواسطة vista-design ، 30-01-2010 الساعة 02:36 AM |
|
| العلامات المرجعية |
 مواضيع جديدة في قسم دورة تصميم المواقع بإسلوب المحترفين web2.0 |
| |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
|
|
|
المواضيع المتشابهه | ||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| الدرس السادس عشر : شرح كيفية الاشتراك فى القنوات من خلال قائمة SubScriptions | Gaf_8008 | دورة يوتيوب، تعلم اليوتيوب، شرح YouTube | 20 | 12-05-2011 06:12 PM |
| مناقشــة الدرس السادس كيفية عمل تخطيط لصفحة layout | vista-design | دورة تصميم المواقع بإسلوب المحترفين web2.0 | 25 | 11-02-2010 12:57 AM |
دخول الاعضاء
العرض العادي
