الدرس الثالث : تصميم الصفحة الرئيسية (default.asp)

الدرس الثالث : تصميم الصفحة الرئيسية (default.asp)

لدرس الثالث: الصفحة الأولى default.asp



دائما ما يبحث برنامج التصفح (Browser) عن صفحة تحمل اسم Default أو Index في الموقع لتشغيلها تلقائيا. لذا عادة ما تكون الصفحة الرئيسية في الموقع بهذا الاسم. وفي مشروعنا سنستخدم اسم : Default .
باستخدام Frontpage قم بتصميم ما يعجبك.. مع مراعاة وضع عنوان الصفحة بشكل بارز، ورابط لكل من الأخبار التقنية (tech.asp)، والأخبار المنوعة(news.asp)، ورابط لسجل الزوار(guest.asp)، وآخر لمحرك البحث(search.asp)، وأخيرا رابط لقسم إدارة الموقع(admin.asp). ولا تنسى أن تكتب فقرة ترحيبية بالزوار. وخزن جميع هذه الملفات في C:\Inetpub\wwwroot\news
ملاحظة: هذه بعض المواقع التي تشرح لك كيفية التصميم بالفرونت بيج: المصمم لك ، أجنادين.
ملاحظة: عند تركيب PWS سيتم إنشاء هذه المجلدات C:\Inetpub\wwwroot ثم قم أنت بإنشاء المجلد news لتخزين ملفات مشروعنا هذا فيه.

التصميم المقترح:

هذا هو نص HTML للتصميم المقترح. (استخدام هذا النص سيسهل عليك متابعة الدروس).
<html
dir=rtl>


<head>
<meta http-equiv=
“Content-Type” content=“text/html; charset=windows-1256”>
<meta http-equiv=
“Content-Language” content=“ar-qa”>
<meta name=
“GENERATOR” content=“Microsoft FrontPage 4.0”>
<meta name=
“ProgId” content=“FrontPage.Editor.Document”>
<title>
عالم اليوم</title>


</head>
<body>
<p align=
“center”><img border=“0” src=“thetitel.gif”></p>
<hr>
<p align=
“center”><font face=“Simplified Arabic” size=“3”><b><a href=“tech.asp”>أخبار
تقنية 
</a><a href=news.asp>أخبار منوعة </a><a href=search.asp>بحث</a>


|
<a href=“guest.asp”>سجل الزوار </a><a href=admin.asp>إدارة
الموقع
</a></b></font></p>


<hr>
<p align=
“center”><font face=“Simplified Arabic” size=“3”>مرحبا بكم في
موقعنا الإخباري المتميز
</font></p>


<p align=
“center”><font face=“Simplified Arabic” size=“3”>نتمنى لكم
المتعة والفائدة معنا
</font></p>


<p align=
“center”><font face=“Simplified Arabic” size=“3”>مع تحيات</font></p>


<p align=
“center”><font face=“Simplified Arabic” size=“3” color=“#AD1212”>إدارة
الموقع
</font></p>


<hr>
<p align=
“center”><font face=“Simplified Arabic” size=“3”><b><a href=“tech.asp”>أخبار
تقنية 
</a><a href=news.asp>أخبار منوعة </a><a href=search.asp>بحث</a>


|
<a href=“guest.asp”>سجل الزوار </a><a href=admin.asp>إدارة
الموقع
</a></b></font></p>


<p align=
“center”><b><font face=“Simplified Arabic” size=“2”>جميع
الحقوق محفوظة 2001
</font></b></p>


</body>
</html>

استخدام SSI

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

على سبيل المثال: سنعتمد تصميما واحدا لجميع الصفحات.. ففي رأس الصفحة عنوان الموقع، وتحته روابط للأقسام المختلفة.. وفي نهاية الصفحة الروابط من جديد.

ببساطة، يمكنك نسخ نفس النص لجميع الصفحات.. الرأس:

<head>
<meta http-equiv=
“Content-Type” content=“text/html; charset=windows-1256”>
<meta http-equiv=
“Content-Language” content=“ar-qa”>
<meta name=
“GENERATOR” content=“Microsoft FrontPage 4.0”>
<meta name=
“ProgId” content=“FrontPage.Editor.Document”>
<title>
عالم اليوم</title>


</head>
<body>
<p align=
“center”><img border=“0” src=“thetitel.gif”></p>
<hr>
<p align=
“center”><font face=“Simplified Arabic” size=“3”><b><a href=“tech.asp”>أخبار
تقنية </a><a href=“news.asp”>أخبار منوعة </a><a href=“search.asp”>بحث</a>


|
<a href=“guest.asp”>سجل الزوار </a><a href=“admin.asp”>إدارة
الموقع</a></b></font></p>


<hr>
نهاية الصفحة:
<hr>
<p align=
“center”><font face=“Simplified Arabic” size=“3”><b><a href=“tech.asp”>أخبار
تقنية </a><a href=“news.asp”>أخبار منوعة </a><a href=“search.asp”>بحث</a>


|
<a href=“guest.asp”>سجل الزوار </a><a href=“admin.asp”>إدارة
الموقع</a></b></font></p>


<p align=
“center”><b><font face=“Simplified Arabic” size=“2”>جميع
الحقوق محفوظة 2001</font></b></p>


</body>
</html>

ثم كتابة ما تريده ما بين هاتين الفقرتين.
للتوضيح أكثر، سأضح النص كاملا مرة أخرى، الجزء العلي سأضعه باللون الأخضر، والسفلي باللون الأرق، والجزء الرئيسي سيكون باللون الأسود. هذا هو النص:

<html
dir=rtl>


‘ الجزء العلوي
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1256″>
<meta http-equiv=”Content-Language” content=”ar-qa”>
<meta name=”GENERATOR” content=”Microsoft FrontPage 4.0″>
<meta name=”ProgId” content=”FrontPage.Editor.Document”>
<title>
عالم اليوم</title>


</head>
<body>
<p align=”center”><img border=”0″ src=”thetitel.gif”></p>
<hr>
<p align=”center”><font face=”Simplified Arabic” size=”3″><b><a href=”tech.asp”>
أخبار
تقنية 
</a>| <a href=news.asp>أخبار منوعة </a>| <a href=search.asp>بحث</a>


| <a href=”guest.asp”>
سجل الزوار </a>| <a href=admin.asp>إدارة
الموقع
</a></b></font></p>


<hr>
‘ الجزء الرئيسي
<p align=”center”><font face=”Simplified Arabic” size=”3″>
مرحبا بكم في
موقعنا الإخباري المتميز</
font></p>


<p align=”center”><font face=”Simplified Arabic” size=”3″>
نتمنى لكم
المتعة والفائدة معنا</
font></p>


<p align=”center”><font face=”Simplified Arabic” size=”3″>
مع تحيات</font></p>


<p align=”center”><font face=”Simplified Arabic” size=”3″ color=”#AD1212″>
إدارة
الموقع</
font></p>


‘ الجزء السفلي
<hr>
<p align=
“center”><font face=“Simplified Arabic” size=“3”><b><a href=“tech.asp”>أخبار
تقنية 
</a><a href=news.asp>أخبار منوعة </a><a href=search.asp>بحث</a>


|
<a href=“guest.asp”>سجل الزوار </a><a href=admin.asp>إدارة
الموقع
</a></b></font></p>


<p align=
“center”><b><font face=“Simplified Arabic” size=“2”>جميع
الحقوق محفوظة 2001
</font></b></p>


</body>
</html>


الأمر سهل للغاية أليس كذلك؟! إنه سهل هذه المرة لأن عدد الصفحات لدينا بسيط.. الصفحة الرئيسية، الأخبار التقنية، الأخبار المنوعة، بحث، سجل الزوار.. أي خمس صفحات.. لكن تخيل أن عندنا 100 صفحة.. هل ستقوم بعملية النسخ واللصق لكل هذه الصفحات!! وإن قمت بذلك.. تخيل أنك تريد إجراء تعديل معين في تصميم رأس الصفحة أو نهايتها، هل ستفتح الـ 100 صفحة وتقوم بتعديلها واحدة واحدة!! ألن يكون الأمر شاقا عليك!! إليك الحل.

قم بحفظ الجز الأعلى في ملف اسمه pageheader.txt والجزء الأسفل باسم pagefooter.txt
أجرِ تعديلا التالية على ملف default.asp لتكون الشفرة فيه كالتالي:

<htmldir=rtl> <!–#include file=”pageheader.txt” –>

<p align=
“center”><font face=“Simplified Arabic” size=“3”>مرحبا بكم في
موقعنا الإخباري المتميز</font></p>


<p align=
“center”><font face=“Simplified Arabic” size=“3”>نتمنى لكم
المتعة والفائدة معنا</font></p>


<p align=
“center”><font face=“Simplified Arabic” size=“3”>مع تحيات</font></p>


<p align=
“center”><font face=“Simplified Arabic” size=“3” color=“#AD1212”>إدارة
الموقع</font></p>


<!–#include file=”pagefooter.txt” –>

شغل الصفحة.. وستراها بنفس التصميم الأول.. والآن.. يمكن إدراج الرأس والنهاية لكل الصفحات الأخرى (التي سنصممها قريبا) من دون الحاجة لنسخ الشفرة في كل مرة.. وإن أردنا إجراء أي تغيير في المستقبل، كل ما علينا هو إجراء التغيير على أحد هذين الملفين.. والتغيير سيطبق تلقائيا على جميع الصفحات.

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

الكاتب ayman

ayman

مواضيع متعلقة

التعليقات مغلقة