[ css ] شرح تقسيم صفحات html أثناء التصميم باستخدام css خطوة خطوة للمبتدئين

[محروم.كوم]

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



الكثير من المقبلين على تعلم تصميم وبرمجة المواقع يواجهون مشكلة في معرفة الطريقة الصحيحة لبناء وتقسيم الصفحات , انا كنت احد هؤلاء الأشخاص فقد كنت ابدأ اتعلم اساسيات عن الـ html وما يسمى الوسوم tags لكني كنت انصدم عند محاولة بناء أي موقع من الصفر بمشكلة تقسيم الموقع .

في هذا الموضوع سأحاول أن ابسط لكم طريقة تقسيم اي صفحة تصممها , وساعتبر انك عزيزي القارئ لديك المعرفة الكافية في التعامل مع أكواد html, css ..

وعلى بركة الله نبدأ



لتقسيم صفحة html لا بد أن نفهم الفكرة التي ترتكز عليها عملية التقسيم
الفكرة تقوم على إنشاء تقسيمات أو بلوكات مستقلة , بحيث نتحكم بها والتي تشكل لنا في النهاية موقع مقسم بشكل جميل ورائع , وتقسيم الموقع باستخدام اكواد css يساهم في المحافظة على شكله عند عرضه بأي متصفح دون حدوث مشاكل بإذن الله , بعكس التقسيم باستخدام طريقة الجداول التي ربما يتبعها البعض .

سنقوم بتصميم موقع له 3 تقسيمات رئيسية هي الرأس Header والمحتوى content والذيل footer
( ملاحظة يمكن تقسيم الصفحة لاكثر من تقسيم كيفما تشاء .. لكن يجب في البداية فهم الطريقة الصحيحة وتسلسلها .. وتطبيق مفهوم التقسيم هذا عند تقسيم أي صفحة أو حتى تقسيم أي جزء من الأجزاء الثلاثة أعلاه )
في التصميم باستخدام HTML نستخدم وسم خاص للقيام بهذه التقسيمات ( ليس جدولاً كما يظن الكثيرون ) وهذا الوسم هو

رمز Code:



في مثالنا سنستخدم 3 أوسمة من نوع div كل وسم يعبر عن قسم من أقسام الموقع.
ولكي يكون العمل منظم نحتاج أن نجمع ( أو نحزم ) هذه الأوسمة داخل حزام وبالتالي سنحتاج إلى وسم أضافي من نفس النوع نضع بداخلة الأوسمة الثلاثة للثلاثة الأقسام وسنطلق عليه اسم blank

ولأغراض حل مشكلة التوسيط (توسيط الموقع في ظل اختلاف مقاس العرض للمتصفحين ) سنحتاج إلى حزام أخر يحوي كل الأوسمة السابقة وسنطلق عليه اسم all
( هذا الوسم الأخير مهم لحل مشكلة التوسيط خصوصاً مع المواقع التي تتطلب عرض ثابت وليس متحرك أو متمدد وسأبين ذلك لاحقاً )


وبالتالي سيكون الكود الأولي والذي يقسم وينظم عملنا كما يلي:

رمز Code:












بنفس الطريقة نحتاج إلى تقسيم القسم الثاني المسمى content إلى قسمين يمن ويسار , ولعمل ذلك نقوم بانشاء وسمين جديدين داخل content ونطلق عليهما الاسمين left, right

فيصبح الكود كالتالي:
رمز Code:







( نضيف بعض التأثيرات لكي نستعرض النتيجة النهائية لما سبق باستخدام css

سأفترض هنا أن لديك معرفة كافية في html, css




سأقوم بعمل حدود لكل قسم وقيمة دنيا للعرض والطول كما في الكود التالي:
رمز Code:

#all{
min-height:100px;
border:2px solid #C30;
min-width:10px;
}
#blank{
min-height:100px;
border:2px dashed #000;
width:500px;
}
#header, #content, #footer{
min-height:100px;
border:1px solid #000;
min-width:10px;
}
#left, #right{
min-height:100px;
border:1px dashed #000;
width:100px;
}

والنتيجة كما في الصورة




نقوم بتحرير القسم blank لكي يصبح حر الحركة وللتحكم به نستخدام الخاصية float في الـ css

رمز Code:
float:right;
لاحظ أن أثر هذه العملية هو خروج الوسم blank بكل محتوياته من سيطرة القسم all من حيث الارتفاع , كما أننا لن نستطيع عمل توسيط للـ blank لانه اصبح حر الحركة وبالتالي جاء دور القسم all لحل مشكلة التوسيط كما ذكرت سابقاً

نجعل قيمة العرض الخاصة بـ all ثابتة ولتكن القيمة 800 بكسل

رمز Code:
width:800px;
فيصبح الشكل كما في الصورة





للتوسيط نتحكم بالتباعد أو المارجن margin الخاص بالقسم all باستخدام الـ css كما يلي

رمز Code:
margin: auto auto auto auto;
وسيظهر لنا في النهاية الشكل في وسط الشاشة , ولتكون الأمور مضبوطة نعدل قيمة العرض للتقسيم blank سواء بقيمة ثابتة ( لاحظ لازم تكون أقل من 800 بكسل أو تساويها ) أو بنسبة مئوية من عرض التقسيم الأب اللي هو all مثلاً 95% وسيصبح الشكل كما في الصورة




وكود الـ css يصبح كالتالي
رمز Code:

#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;
}




نقوم الآن بالتحكم بالتقسيمات الفرعية الخاصة بـ content والمسماه left , right وذلك بتعويمها كما يلي:
رمز Code:
float:right;
position:relative;


ثم نعدل من عرض كل تقسيم كما يلي

رمز Code:
#right{
width:200px;
}

#left{
width:520px;
}


مع ملاحظة أن الاجمالي الكلي لعرض هذين التقسيمين يجب أن يكون أقل من العرض المخصصة للتقسيم الأب وذلك لكي يكون الشكل متوازن وايضاً يتيح التحكم ببعض الخصائص التي سنذكرها لاحقاً
نقوم لتحسين العرض وليكون الشكل أكثر جمالاً بتغيير القيمة الدنيا لارتفاع هذين التقسيمين إلى 400 بكسل مثلاً

ستظهر مشكلة وهي عدم تحرك التقسيم footer إلى الاسفل عند تغير ارتفاع التقسيمين right,left


ولحل هذه المشكلة واللي هي اصلا عدم تناسق التقسيمات الثلاثة الرئيسية اللي هي : header, content, footer خصوصاً الأثنين الأخيرين , والذي تظهر مشكلة أن الـ footer لن يتحرك للأسفل في حال زيادة ارتفاع الـ content ولحل ذلك نعدل من خصائص التقسيمات الثلاثة ونجعلها هي الأخرى تعوم مثل التقسيمين left, right
ونعدل ايضا في العرض بحيث يكون عرضها 100بالمائة لكي يصبح التقسيم متناغم
والكود بعد التعديل سيصبح

رمز Code:
#header, #content, #footer{
min-height:100px;
border:1px solid #000;
min-width:10px;
width:100%;
float:right;
position:relative;
}


و يصبح في النهاية الشكل كما في الصورة






الآن نضيف بعض البيانات ونرتبها بحيث تبين لنا كيف سيكون المحتوى داخل التقسيمات ويفضل أن تكون كل البيانات داخل تقسيمات مستقلة ليسهل التحكم بها كما يلي

بيانات داخل التقسيم header
رمز Code:

رأس الصفحة


بالتفصيل شرح تقسيم صفحات الـ html


جميع الحقوق محفوظة لمحمد البعداني ALbadani Network | www.albadani.net

بيانات داخل التقسيم right
رمز Code:

الجهة اليمنى

• رابط 1
  
• رابط 2
  
• رابط 3
  
• رابط 4
  
• رابط 5
  

بيانات داخل التقسيم left
رمز Code:

الجهة اليسرى


كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي








وأخيرا بيانات داخل التقسيم footer
رمز Code:

ذيل الصفحة


كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي






وفي النهاية يصبح التصميم كما في الصورةالتالية:




قبل الختام نقوم ببعض اللمسات الجمالية للصفحة مثل
- الألوان لكل تقسيم
- حذف الإطار الخاص بـ all
- الفصل بين left, right بمسافة فاصلة عن طريق الخاصية margin-left للـ right
- الاستغناء عن الحدود
وأية لمسات تراها مناسبة

و يصبح الشكل النهائي كما في الصورة




والكود النهائي للتصميم كالتالي:

رمز Code:





Albadani Network

#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;
}

رأس الصفحة


بالتفصيل شرح تقسيم صفحات الـ html


جميع الحقوق محفوظة لمحمد البعداني ALbadani Network | www.albadani.net

الجهة اليمنى

• رابط 1
  
• رابط 2
  
• رابط 3
  
• رابط 4
  
• رابط 5
  

الجهة اليسرى


كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي










ذيل الصفحة


كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي كلام تجريبي














في الختام أود ان انبه إلى انه يمكن اتباع نفس الفكرة في تقسيم أي جزئية داخل الصفحة , باضافة div لكل تقسيم تراه و تحريره او تعويمه باستخدام float وتوزيع العرض بشكل متناسب , كما يمكن عند اضافة أي بيانات داخل اي تقسيم ان تضيفها داخل تقسيمات div لكي يسهل التحكم بها .
اتمنى ان اكون قد وفقت في توصيل الفكرة , الفكرة التي ارهقني التعب وانا ابحث عنها ,
كما أؤؤكد أن المواقع الاحترافية التي نراها هي مبنية باستخدام html, css بالاضافة إلى jquery التي تضيف لمسات من حيث الحركة , يبقى لديك فقط التخطيط السليم للتقسيم , وتناسق الألوان , والصورة الجميلة والايقونات وبعدها يصير موقعك من أجمل المواقع

والسلام عليكم ورحمة الله وبركاته

اخوكم محمد علي البعداني
اليمن صنعاء
1 فبراير 2014


لتحميل الصفحة بصيغة html

شبكة وغرد قلبي | Albadani Network

المصدر

حصرياً:شرح تقسيم صفحات html أثناء التصميم باستخدام css خطوة خطوة للمبتدئين - شبكة وغرد قلبي | Albadani Network

__DEFINE_LIKE_SHARE__