][الدرس الأول][توزيع الهيدر و الفوتر بتقنية css][

ثانيا الدرس :
بعد تصميم الهيدر قم بتقسيمه عن طريق
اداة التقطيع ][الدرس الأول][توزيع الهيدر و الفوتر بتقنية css][ Nrb56614

:

][الدرس الأول][توزيع الهيدر و الفوتر بتقنية css][ XVH56287

بعد التقطيع سينتج لديك 6 قطع :
بالشكل التالي
][الدرس الأول][توزيع الهيدر و الفوتر بتقنية css][ 14168879

الأن ندخل في الجزء الصعب و المهم من الموضوع:
افتح صفحة html جديدة
ستكون في الكود التالي :

كود PHP:

<html>
<head>
<title>css zerovb </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
الجزء
الأول
</head>
<body>
الجزء التاني
</body>
</html>

نضيف الكود الذي في الصورة
][الدرس الأول][توزيع الهيدر و الفوتر بتقنية css][ BQN58579

][الدرس الأول][توزيع الهيدر و الفوتر بتقنية css][ BQN58579

طبعا h اختصار ل header
و رقم واحد عادي عشان تفرق بينهم
و repeat-x تعني ان تكتكر الخلفية
او تمدد على حجم الصفحة بمعنى اخر
و عند كود hieght اللي هوا الارتفاع
الخاص بالقطعة
بتقدر تطلعو من
right click على الصورة
هتلاقي مكتوب عند ال hieght
تاخدو و تضعو في الكود
كما في الصورة
][الدرس الأول][توزيع الهيدر و الفوتر بتقنية css][ OSf59324

][الدرس الأول][توزيع الهيدر و الفوتر بتقنية css][ OSf59324

و الان انتهينى من التمدد
لنركب قطعتي الهيدر :
افعل كمان في هذه الكود:

كود PHP:

.header2{
background-image:url('images/zerovb-css_01') ;
background-repeat: no-repeat;
height:190px;
width:247px;
float: left
}

هذه الكود
اعتقد واضح جدا
اضفنا

كود PHP:

no-repeat

هذه يعني ان لا تمدد و لا تكرار للقطعة
للقطعة على الجهة اليسرى
لاحظ

كود PHP:

float :left

سأتركك تكتشف كود القطعة الثالثة بنفسك
و هذه الناتج النهائي :
][الدرس الأول][توزيع الهيدر و الفوتر بتقنية css][ VNR59349

][الدرس الأول][توزيع الهيدر و الفوتر بتقنية css][ VNR59349

و الان انزل الا عند كود

كود PHP:

<body>
هنا
</body>

اكتب هذا الكود

كود PHP:

<div class="h1">
<div class="h2"></div>
<div class="h3"></div>
</div>

طبعا مع استبدال
h1 - h2 -h3
بالاسماء اللتي عملتها
بالاعلى
و الان تبقى علينا الفوتر
لا يختلف شيئا عن الهيدر
و لكن مكان
h1-h2-h3
ضع اي حرف اخر
انا وضعت
f1-f2-f3
الناتج الهيدر + الفوتر
][الدرس الأول][توزيع الهيدر و الفوتر بتقنية css][ XCh59866

][الدرس الأول][توزيع الهيدر و الفوتر بتقنية css][ XCh59866

ضع هذا الكود في الاسفل

كود PHP:

<body>

<div class="h1">
<div class="h2"></div>
<div class="h3"></div>
</div>

<div class="f1">
<div class="f2"></div>
<div class="f3"></div>
</div>

</body>

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

» دورة تصميم الاستايلات (5) توزيع الفوتر بالفرونت بيج
» دورة تصميم الاستايلات (4) توزيع الهيدر بالفرونت بيدج
» ][الدرس الثاني][توزيع التأطير css][
» دورة تصميم الاستايلات (8) توزيع المحتوى بالفرونت بيج ,, تابع
» حصريا النجم أحمد سيف - اغنية جرب تعيش - دراما هتكسر الدنيا - توزيع مصطفى أبورية