شبكة ابن الخليج - عرض مشاركة واحدة

ADMIN · 06-26-2006, 07:43 صباحاً

الدرس الثالث: الصفحة الأولى 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> 
 
****** **********="Content-Type" content="text/html; charset=windows-1256"> 
 
****** **********="Content-Language" content="ar-qa"> 
 
****** name="GENERATOR" content="Microsoft FrontPage 4.0"> 
 
****** 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> 
 
****** **********="Content-Type" content="text/html; charset=windows-1256"> 
 
****** **********="Content-Language" content="ar-qa"> 
 
****** name="GENERATOR" content="Microsoft FrontPage 4.0"> 
 
****** 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> 
 
****** **********="Content-Type" content="text/html; charset=windows-1256"> 
 
****** **********="Content-Language" content="ar-qa"> 
 
****** name="GENERATOR" content="Microsoft FrontPage 4.0"> 
 
****** 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 لتكون الشفرة فيه كالتالي:

كود:

 <html dir=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" -->

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

إعداد: خالد الحر

06-26-2006, 07:43 صباحاً	#1 (permalink)
ADMIN .::+: Gulf Son :+::. تاريخ التسجيل: May 2005 الدولة: بلاد الخليج المشاركات: 45,788 معدل تقييم المستوى: 53	تصميم الصفحة الرئيسية (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> **** ******="Content-Type" content="text/html; charset=windows-1256"> ** ******="Content-Language" content="ar-qa"> ** name="GENERATOR" content="Microsoft FrontPage 4.0"> ** 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> ** ******="Content-Type" content="text/html; charset=windows-1256"> ** ******="Content-Language" content="ar-qa"> ** name="GENERATOR" content="Microsoft FrontPage 4.0"> ** 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> ** ******="Content-Type" content="text/html; charset=windows-1256"> ** ******="Content-Language" content="ar-qa"> ** name="GENERATOR" content="Microsoft FrontPage 4.0"> ** 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 لتكون الشفرة فيه كالتالي: كود: <html dir=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" --> شغل الصفحة.. وستراها بنفس التصميم الأول.. والآن.. يمكن إدراج الرأس والنهاية لكل الصفحات الأخرى (التي سنصممها قريبا) من دون الحاجة لنسخ الشفرة في كل مرة.. وإن أردنا إجراء أي تغيير في المستقبل، كل ما علينا هو إجراء التغيير على أحد هذين الملفين.. والتغيير سيطبق تلقائيا على جميع الصفحات. إعداد: خالد الحر من مواضيع ADMIN في المنتدى Golden Al-Wafi Translator مترجم الوافي الذهبي كامل تصاميم واجهات للموقع عل شكل بي اس دي 38 شرح قائمة Edit درس حول خط إلى شكل Shape وأصنع كلمتك الخاصه المتواجدون الآن بالمربعات وبالالوان بشكل انيق ومطور __________________ دليل مواقع ابن الخليج خدمة google page rank مقدمه من ابن الخليج خدمه اختصار الروابط الآن تستطيع جلب كل ستايلات المنتدى للمجلة ومن غير اي تدخل شخصي منك فقط بـ 120 ريال** اطلب منتج بالضغط هنا "من هارون أمير المؤمنين إلى نقفور كلب الروم، قد قرأت كتابك يا ابن الكافرة، والجواب ما تراه دون أن تسمعه، والسلام" اين نحن من هذه الرساله؟ التعديل الأخير تم بواسطة : ADMIN بتاريخ 10-30-2006 الساعة 09:33 مساءً. <a rel="nofollow" href="http://www.dartmediakuwait.com/adclick.php?n=a85a316d" target="_new"><img src="http://www.dartmediakuwait.com/adview.php?what=zone:107&source=MP3Q8&n=a85a316d" border="0" alt=""></a>