|
مؤسس الموقع
|
رد: شرح الدرس السادس بالتفصيل
 
[ALIGN=CENTER][TABLETEXT="width:70%;background-image:url('http://rawdatelquran.net/vb/backgrounds/1.gif');"][CELL="filter:;"] [ALIGN=center]نقوم بتحرير القسم blank لكي يصبح حر الحركة وللتحكم به نستخدام الخاصية float في الـ css
رمز Code:
| كود بلغة HTML |
float:right;
|
لاحظ أن أثر هذه العملية هو خروج الوسم blank بكل محتوياته من سيطرة القسم all من حيث الارتفاع , كما أننا لن نستطيع عمل توسيط للـ blank لانه اصبح حر الحركة وبالتالي جاء دور القسم all لحل مشكلة التوسيط كما ذكرت سابقاً
نجعل قيمة العرض الخاصة بـ all ثابتة ولتكن القيمة 800 بكسل
رمز Code:
| كود بلغة HTML |
width:800px;
|
فيصبح الشكل كما في الصورة
للتوسيط نتحكم بالتباعد أو المارجن margin الخاص بالقسم all باستخدام الـ css كما يلي
رمز Code:
| كود بلغة HTML |
margin: auto auto auto auto;
|
وسيظهر لنا في النهاية الشكل في وسط الشاشة , ولتكون الأمور مضبوطة نعدل قيمة العرض للتقسيم blank سواء بقيمة ثابتة ( لاحظ لازم تكون أقل من 800 بكسل أو تساويها ) أو بنسبة مئوية من عرض التقسيم الأب اللي هو all مثلاً 95% وسيصبح الشكل كما في الصورة
وكود الـ css يصبح كالتالي
رمز Code:
| كود بلغة HTML |
<style> #all{ min-height:100px; border:2px solid #C30; width:800px; margin:auto auto auto auto; } #blank{ min-height:100px; border:2px dashed #000; width:95%; float:right; } #header, #content, #footer{ min-height:100px; border:1px solid #000; min-width:10px; } #left, #right{ min-height:100px; border:1px dashed #000; width:100px; } </style>
|
نقوم الآن بالتحكم بالتقسيمات الفرعية الخاصة بـ content والمسماه left , right وذلك بتعويمها كما يلي:
رمز Code:
| كود بلغة HTML |
#right{ width:200px; } #left{ width:520px; }
|
مع ملاحظة أن الاجمالي الكلي لعرض هذين التقسيمين يجب أن يكون أقل من العرض المخصصة للتقسيم الأب وذلك لكي يكون الشكل متوازن وايضاً يتيح التحكم ببعض الخصائص التي سنذكرها لاحقاً
نقوم لتحسين العرض وليكون الشكل أكثر جمالاً بتغيير القيمة الدنيا لارتفاع هذين التقسيمين إلى 400 بكسل مثلاً
ولحل هذه المشكلة واللي هي اصلا عدم تناسق التقسيمات الثلاثة الرئيسية اللي هي : header, content, footer خصوصاً الأثنين الأخيرين , والذي تظهر مشكلة أن الـ footer لن يتحرك للأسفل في حال زيادة ارتفاع الـ content ولحل ذلك نعدل من خصائص التقسيمات الثلاثة ونجعلها هي الأخرى تعوم مثل التقسيمين left, right
ونعدل ايضا في العرض بحيث يكون عرضها 100بالمائة لكي يصبح التقسيم متناغم
والكود بعد التعديل سيصبح
ستظهر مشكلة وهي عدم تحرك التقسيم footer إلى الاسفل عند تغير ارتفاع التقسيمين right,left رمز Code:
| كود بلغة HTML |
#header, #content, #footer{ min-height:100px; border:1px solid #000; min-width:10px; width:100%; float:right; position:relative; }
|
و يصبح في النهاية الشكل كما في الصورة
الآن نضيف بعض البيانات ونرتبها بحيث تبين لنا كيف سيكون المحتوى داخل التقسيمات ويفضل أن تكون كل البيانات داخل تقسيمات مستقلة ليسهل التحكم بها كما يلي
بيانات داخل التقسيم header
رمز Code:
| كود بلغة HTML |
<div style="text-align:center; direction:rtl; padding:10px; "> <h2>رأس الصفحة</h2> <h1 style="color:#06C;">بالتفصيل شرح تقسيم صفحات الـ html</h1> <span style="font-size:12px;">جميع الحقوق محفوظة لمحمد البعداني ALbadani Network | www.albadani.net </span> </div>
|
بيانات داخل التقسيم right
رمز Code:
| كود بلغة HTML |
<div style="direction:rtl; padding:10px; "> <h2>الجهة اليمنى</h2> <ul> <li>رابط 1</li> <li>رابط 2</li> <li>رابط 3</li> <li>رابط 4</li> <li>رابط 5</li> </ul> </div>
|
بيانات داخل التقسيم left
رمز Code:
| كود بلغة HTML |
<div style="direction:rtl; padding:10px; "> <h2>الجهة اليسرى</h2> <p style="font-size:12px; font-family:Tahoma, Geneva, sans-serif; text-align:justify;">كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي </p> </div>
|
وأخيرا بيانات داخل التقسيم footer
رمز Code:
| كود بلغة HTML |
<div style="direction:rtl; padding:10px; "> <h2 style="text-align:center;">ذيل الصفحة</h2> <p style="font-size:12px; font-family:Tahoma, Geneva, sans-serif; text-align:justify;">كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي </p> </div>
|
وفي النهاية يصبح التصميم كما في الصورةالتالية:
قبل الختام نقوم ببعض اللمسات الجمالية للصفحة مثل
- الألوان لكل تقسيم
- حذف الإطار الخاص بـ all
- الفصل بين left, right بمسافة فاصلة عن طريق الخاصية margin-left للـ right
- الاستغناء عن الحدود
وأية لمسات تراها مناسبة
و يصبح الشكل النهائي كما في الصورة
والكود النهائي للتصميم كالتالي:
رمز Code:
| كود بلغة HTML |
<!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=utf-8" /> <title>Albadani Network</title> <style> #all{ min-height:100px; /*border:2px solid #C30;*/ width:800px; margin:auto auto auto auto; } #blank{ min-height:100px; border:2px dashed #000; width:95%; float:right; background:#699; } #header, #content, #footer{ min-height:100px; /*border:1px solid #000;*/ min-width:10px; width:100%; float:right; position:relative; } #footer{ border-top:8px solid #fff; } #left, #right{ min-height:400px; /*border:1px dashed #000;*/ float:right; position:relative; margin-bottom:5px; } #right{ width:200px; margin-left:5px; } #left{ width:520px; background:#fff; padding:10px; } </style> </head> <div id="all"> <div id="blank"> <div id="header"> <div style="text-align:center; direction:rtl; padding:10px; "> <h2>رأس الصفحة</h2> <h1 style="color:#06C;">بالتفصيل شرح تقسيم صفحات الـ html</h1> <span style="font-size:12px;">جميع الحقوق محفوظة لمحمد البعداني ALbadani Network | www.albadani.net </span> </div> </div> <div id="content"> <div id="right"> <div style="direction:rtl; padding:10px; background:rgba(255,255,255,0.4); width:88%; margin-top:3px; border-radius:4px; moz-border-radius:4px;"> <h2>الجهة اليمنى</h2> <ul> <li>رابط 1</li> <li>رابط 2</li> <li>رابط 3</li> <li>رابط 4</li> <li>رابط 5</li> </ul> </div> </div> <div id="left"> <div style="direction:rtl; padding:10px; "> <h2>الجهة اليسرى</h2> <p style="font-size:12px; font-family:Tahoma, Geneva, sans-serif; text-align:justify;">كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي </p> </div> </div> </div> <div id="footer"> <div style="direction:rtl; padding:10px; "> <h2 style="text-align:center;">ذيل الصفحة</h2> <p style="font-size:12px; font-family:Tahoma, Geneva, sans-serif; text-align:justify;">كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي </p> </div> </div> </div> </div> <body> </body> </html>
|
في الختام أود ان انبه إلى انه يمكن اتباع نفس الفكرة في تقسيم أي جزئية داخل الصفحة , باضافة div لكل تقسيم تراه و تحريره او تعويمه باستخدام float وتوزيع العرض بشكل متناسب , كما يمكن عند اضافة أي بيانات داخل اي تقسيم ان تضيفها داخل تقسيمات div لكي يسهل التحكم بها .
اتمنى ان اكون قد وفقت في توصيل الفكرة , الفكرة التي ارهقني التعب وانا ابحث عنها ,
كما أؤؤكد أن المواقع الاحترافية التي نراها هي مبنية باستخدام html, css بالاضافة إلى jquery التي تضيف لمسات من حيث الحركة , يبقى لديك فقط التخطيط السليم للتقسيم , وتناسق الألوان , والصورة الجميلة والايقونات وبعدها يصير موقعك من أجمل المواقع
والسلام عليكم ورحمة الله وبركاته
منقول
صاحب الموضوع الأستاذ : محمد علي البعداني
[/ALIGN][/CELL][/TABLETEXT][/ALIGN] |