بسم الله الرحمن الرحيم
بسم الله والحمد لله والصلاة والسلاه على سيدنا محمد بن عبد الله وبعد :
هذه ثالث مره ولله الحمد أكتب الموضوع ويقف بسبب الفيرس اللعين win32 وقد تمت إزالته بفضل الله
الموضوع عن الصفحة الرئيسيه فى أى موقع وهنستخدم الtable لانه أسهل من الdiv
الدرس الخامس
حمل المرفق التالى: primitive-project.rar :download:
بعد تحميله عند فتح ملف الindex.html ستجد الكود التالى:
<html>
<head>
<title>
مكه المكرمه للبناء والانشاء والتعمير
</title>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<center>
<table border='0' cellspacing='0' cellpadding='0'>
<!-- Header -->
<tr class='header' width='900' height='300'>
<td></td>
</tr>
<!-- nav -->
<tr class='nav' width='900' height='40'>
<td>
<center>
<font size='5' face='andalus'>
<a href='' target=''> الرئيسيه </a>
<a href='pages/2nd.html' target='frm'> الخدمات العامه </a>
<a href='' target='frm'> الأداره </a>
<a href='' target='frm'> الأنشاءات المحليه </a>
</font></center>
</td>
</tr>
<!-- main -->
<tr class='main' width='900' height='900'>
<td>
<center>
<iframe name='frm' width='844' height='800' border='0' scrolling='yes' src='pages/main.html'></iframe>
</center>
</td>
</tr>
<!-- footer -->
<tr class='footer' width='900' height='100'>
<td>
<center>
<span>
<font size='5' color='#651962' face='verdana'>
Powered By Ahmed kamel ^_^
</font>
</span>
</center>
</td>
</tr>
</table>
</center>
</body>
</html>
هذا كود الصفحه
وستجد كود ملف الstyle.css
وكوده كالتالى:
body {background-color:#651962;}
table {width:900;height:1340;padding:0;margin:0;}
.header {background-image:url('images/header.jpg');background-repeat:no-repeat;}
.nav {background-image:url('images/nav.jpg');background-repeat:no-repeat;}
.main {background-image:url('images/main.jpg');background-repeat:no-repeat;}
.footer {background-image:url('images/footer.jpg');background-repeat:no-repeat;}
ونبدأ الشرح على بركة الله
أو ملف الاندكس أتعمل فيه table
واتقسم إلى أربع أجزاء Header , Nav ,Main ,Footer
نبدأبالHeader
الكود:
<tr class='header' width='900' height='300'>
<td></td>
</tr>
<!-- Header -->
وفيما يلى التفصيل
<!-- Header -->
ده comment تعليق كتبته بين <> وكتبت جواهم <!-- اللى انا عايزه أعمل عليه كومنت >
بعد كده كله مفهوم عدا class
class : هو قيمة بعطيها للشىء اللى برغب انى اعمله استايل بcss وبتاخد علامه دوت(.)
كود الهيدر الخاص بالcss
.header {background-image:url('images/header.jpg');background-repeat:no-repeat;}background-image : صورة الخلفيه
وبعدين كتبت url وفتحت قوسين وعملت "وهنا المسار" وفى الاخر simi colum (;)
طبعا لو سيبت الخلفيه كده هتتكرر فعملت background-repeat :تكرار الخلفيه no-repeat لاتكرار
طبعا بتكون محدد فى الصف اللى فى الهتمل tr
width && height
خلصنا من الهيدر وشرح الcss الخاص بيه
ندخل على الNav
الكود الخاص بيه:
<tr class='nav' width='900' height='40'>
<td>
<center>
<font size='5' face='andalus'>
<a href='' target=''> الرئيسيه </a>
<a href='pages/2nd.html' target='frm'> الخدمات العامه </a>
<a href='' target='frm'> الأداره </a>
<a href='' target='frm'> الأنشاءات المحليه </a>
</font></center>
</td>
</tr>
<!-- nav -->
الكود سهل ولا يحتاج الى شرح
عباره عن صف tr وعمود td وعملت center والروابط ولكن فى شىء :huh:
بص الكود عشان انا لم أكتبه بالمره السابقه
<a href='' target=''> الرئيسيه </a>
كتبت a الخاصه بالروابط و href الخاصه بالمسار والجديد هو الtarget الخاص بمكان فتح الصفحه وكتبت فى رابطتين أخرين frm ودول الخاصين بالiframe ونذكره لاحقا
كود
خاص بالمسافات يعنى فى البرمجه مابيعترفش غير بمسطره أو مسافه واحده وكل بمسافه جديده وعيش انت بقى ونسق براحتك :D
ليست به أى مشكله
ندخل على الMain
عملت جزء يظهر فيه الموضوع اللى هطلبه ألا وهو Iframe
لنرى كود الMain أولا:
<tr class='main' width='900' height='900'>
<td>
<center>
<iframe name='frm' width='844' height='800' border='0' scrolling='yes' src='pages/main.html'></iframe>
</center>
</td>
</tr>
<!-- main -->
iframe :هو يقتطع جزء معين ليكون target تفتح فيه اللى انت عايزه ممكن تعمل منه واحد فى الهيدر مثلا عشان يقول للمستخدم Welcome لما يكتب بياناته صح وممكن فى أى مكان بالصفحه
الكود:
<iframe width='' height='' name='اسمها وليكن frm' border='الاطار' scrolling='لو فى موضوعات مثلا هتفتح فى الاى فريم وكبيره زى المقاله دى مثلا ممكن تخلها yes وممكن تخليها no بس لازم تصلح المشكله دى بلغه j-query' src='هنا هتكتب مسار صفحة تفتح بمجرد مايفتح الاى فريم فى الرئيسيه كرساله ترحيب أو ما شابه'>
style code:
.main {background-image:url('images/main.jpg');background-repeat:no-repeat;}Footer:
نهايه الصفحه وهى عباره عن شريط وفيه كلمتين وعاده بتبقى حقوق الملكيه
الكود:
<tr class='footer' width='900' height='100'>
<td>
<center>
<span>
<font size='5' color='#651962' face='verdana'>
Powered By Ahmed kamel ^_^
</font>
</span>
</center>
</td>
</tr>
<!-- footer -->
عملت center وfont و span وكتبت كلمتين
كودالاستايل
.footer {background-image:url('images/footer.jpg');background-repeat:no-repeat;}
إذا عجبك الموضوع برجاء التقييم
وأى سؤال انا تحت أمرك
وصلى اللهم وسلم على سيدنا محمد وعلى اله وصحبه وسلم