12 – تخطيط الصفحات في html

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

اليوم درسنا عن تخطيط صفحات الانترنت
باستخدام css وباستخدام الجداول
درس ان شاء الله بسيط ومفيد مهم جدا

HTML Layouts
يتم إنشاء أعمدة متعددة باستخدام <DIV> أو عناصر <TABLE>. وتستخدم CSS لتنسيق العناصر، أو لإنشاء الخلفيات الملونة

وعلى الرغم من أنه من الممكن إنشاء تخطيطات لطيفة  من خلال الجداول في  HTML،
لكن صممت الجداول لعرض البيانات الجدولية – ليس كأداة تخطيط!

سنشرح طريقه التخطيط ب div وسنستخدم معها السمة id
وتعلمنا في الدرس السابق ما هي السمة id  وللعلم الدرس السابق لم يكن اوانه ولكني فضلت انت تخوض هذا الدرس وانت تعرف عنه كل شئ

لاحظ اننا سنقوم ببناء الصفحة بعدة عناصر بسيطة شرحت جميعها في دروس سابقة
وللتاكيد علي الفهم ساراجع معك العناصر المستخدمه وهي
<div> ونضيف له معرف عن طريق سمة id وتعلمنا سابقا ان العنصر div هو صندوق محتوي
<h1> وهي من عناصر العناوين في اللغة
<b> وهو من عناصر تنسيق النصوص ويستخدم لجعل النص عريض
<br> تستخدم لوضع سطر جديد

واليك الكود  قد وضعته اليوم قابل للنسخ ولكن رجاء لا تعتمد علي النسخ واللصق حاول ان تقوم بكتابته بنفسك
وقد اضفت الي الكود بعض التعليقات لتشرح مواضع الاكواد

[code] <!– بداية الصفحة –>

<div id="page">

<!– بداية الهيدر = راس الصفحة –>
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<!– نهاية الهيدر .نهاية اعلي الصفحة –>

<!– بداية القائمة الجانبية –>
<div id="menu">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<!–نهاية القائمة الجانبية –>

<!–بداية محتوي الصفحة –>
<div id="content">
Content goes here
</div>
<!–نهاية محتوي الصفحة –>
<!–بداية ذيل الصفحة –>
<div id="footer">
Copyright
</div>
<!–نهاية ذيل الصفحة –>
</div>
<!–نهايه الصفحة –>

[/code]

قم بحفظ الصفحة الان ولكن تذكر هذة الاكواد تكون بين وسمين body

قم بعرض الصفحة علي المتصفح الان

تبا لهذا المنظر البائس ؟ اهكذا تخطيط الصفحات ؟؟ لالا لا تقلق الان سنضع لمسة css لتغير هذا المنظر البائس الي منظر جمالي ^^

انت تعلم مسبقا طريقه كتابة اكواد css تعلمناها في الدرس السادس علي ما اعتقد
هيا بنا الان نخبر المتصفح باننا سنستخدم اكواد css وهذا يحدث بكتابة هذا الكود بين وسمين head
وهذا هو الكود

[code] <style type="text/css">

</style>

[/code]

والام كود css مع شرح بسيط

[code]

/* 1 قمنا بتحديد عرض الصفحة  */
#page{
width:500px;
}

/* قمنا بتغيير لون الخلفير لراس الصفحة */
#header{
background-color:#FFA500;
}
/* قمنا بتحديد قيمة الهامش من الاسفل حتي لا يتسبب في تباعد العناصر  */
h1{
margin-bottom:0;
}

/* قمنا بتحديد خلفية
قمنا بتحديد الطول 200 بكسل
قمنا بتحديد العرض 100 بكسل
قمنا بازاحة او دفع القائمة لليسار مما يسمع لعنصر اخر الالتفاف حولة

*/

#menu{background-color:#FFD700;
height:200px;
width:100px
;float:left;
}

/* قمنا بتغيير الخلفية
قمنا بتحديد الطول 200 بكسل
قمنا بتحديد العرض 400 ولاحظ هنا ان 400 + 100 للقائمة = 500 وهي قيمة العرض الكلي
دفعنا العنصر لليسار ليلتصق بالقائمة التي دفعناها او ازحناها لليسار ^^
*/
#content{
background-color:#EEEEEE;
height:200px;
width:400px;
float:left;
}
/*
قمنا بتحديد خلفية للفوتر
***
اضفنا خاصية تفرض علي الهنصر بحجز الجانبين
بحيث تاخذ المساحة كاملة حتي لا ياتي بجوارها  اي عنصر اخر
***
اضفنا خاصية تقوم بتوسيط النص
*/
#footer{
background-color:#FFA500;
clear:both;
text-align:center;
}

[/code]

لاحظ ان
#FFA500 و #FFD700 هي اكواد الوان سنتعلمها قريبا

والطريق الاخري هي التقسيم عن طريق الجداول

نحن تعلمنا الجداول جيدا في السابق وبمجرد طرح الكود الجميع يستطيع فهمه وتطبيعه
فلا شئ جديد اقوم بشرحة
اليكم الكود

[code] <table width="500" border="0">
<tbody>
<tr>
<td style="background-color: #ffa500;" colspan="2">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color: #ffd700; width: 100px;"><b>Menu</b>
HTML
CSS
JavaScript</td>
<td style="background-color: #eeeeee; height: 200px; width: 400px;">Content goes here</td>
</tr>
<tr>
<td style="background-color: #ffa500; text-align: center;" colspan="2">Copyright</td>
</tr>
</tbody>

[/code]

وطبعا يمكن تقسيم الصفحة كما تحب ليش شرطا ان تكون قائمة ومحتوي فناء مواقع  تستخدم قائمتين جانبييتين
وغيرها من الطرق انت لك الحرية في تخطيط صفحتك

الي هنا انتهي وادع لكم التجارب والابداع
لنا لقاء في درس اخر