منتدى روضة القرآن - شرح الدرس السادس بالتفصيل

[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]