مقدمة :

      تعريف البرنامج : برنامج FrontPage هو أحد البرامج الهامة من إنتاج شركة مايكروسوفت ، لتصميم صفحات  ومواقع الويب ، ويحتوي على كافة الأدوات التي تحتاجها لتصميم موقعاً متكاملاً و نشره على شبكة الإنترنت العالمية . و يوفر البرنامج المعالجات والقوالب التي يمكنك من استخدامها أثناء التصميم بسهولة .

  مصطلحات هامة :

صفحة ويب : صفحة تحتوي على النصوص و الرسومات التي يتم إنشاؤها بلغة البرمجة ( HTML ) الخاصة بتصميم صفحات الانترنت و التي سنتعرف عليها لاحقاً في هذا الموقع التعليمي .

موقع ويب : مجموعة من صفحات الويب المرتبطة ببعضها البعض .

   تشغيل البرنامج:

  1. ننقر زر ابدأ ( start ) من شريط المهام.

  2. نختار قائمة البرامج ( programs ) .

  3. نختار البرنامج Microsoft FrontPage.

مكونات سطح المكتب لبرنامج FrontPage:

عند تشغيل البرنامج تظهر لنا الشاشة الرئيسية لهذا البرنامج، وهي تتشابه لحد كبير مع شاشات البرامج الموجود في Microsoft office مثل word وغيرها.

واجهة البرنامج

   تتكون الشاشة الرئيسة للبرنامج  من عدة أجزاء وسوف نتطرق لكل جزء  على حدى:

 شريط العنوان : يكون هذا الشريط في أعلى سطح المكتب باللون الأزرق وسمي بهذا الاسم لأنه يحتوي على العنوان.

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

  لتنفيذ أمر موجود في شريط القوائم نتبع ما يلي:

1- ننقر القائمة التي تحتوي على الأمر تظهر لنا الأوامر الموجودة في هذه القائمة.

2- نختار الأمر الذي  نريد تطبيقه.

   القوائم المختصرة: إحدى  طرق الوصول للأوامر المرتبطة بكائن موجود في الصفحة بالنقر على الكائن بالزر الأيمن للفأرة.

  أشرطة الأدوات: توفر لك الأشرطة وصولاً سريعاً ومباشر إلى بعض الأوامر، ومن أهم هذه الأشرطة:

            شريط الأدوات القياسي ( stander ) : _

            شريط التنسيق ( Formatting ) : _

            شريط الرسم ( Drawing ) : _

    ملاحظة: إذا كان أحد الأشرطة مخفي نظهره بالنقر بالزر الأيمن على احد الأشرطة الموجودة تظهر لنا قائمة بالأشرطة ننقر على الشريط المراد إظهاره.

            شريط العرض view bar  :  يستخدم FrontPage مصطلح العرض مرتين  :

         الأولى view bar: الذي يتيح لك التنقل بين طرق العرض المختلفة بسرعة ويسر. الشكل ( 1 - 1 ) .

        الثانية  view bar: الذي يتيح لك تغيير طريقة العرض لصفحة الويب من العرض العادي normal ، إلى العرض وفق لغة html إلى عرض المعاينة . الشكل ( 1- 2 ) .

    لوح المهام : يحتوي هذا اللوح على الأوامر الخاصة بالعمل الذي تقوم به، يمكن إظهار وإخفاء هذا اللوح من قائمة طرق العرض انظر الشكل ( 1 - 3 ) .

    إغلاق البرنامج:

 بعد أن تنتهي من التعرف على سطح المكتب FrontPage تستطيع الخروج الآن من البرنامج بفتح قائمة ملف ونقر إنهاء أو ننقر زر الإغلاق.

    ملاحظة : إذا  لم تحفظ عملك يطلب منك حفظ العمل .

 

الشكل ( 1 - 1 )

الشكل ( 1- 2 )

الشكل ( 1 - 3 )

 

 

 

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

لإنشاء موقع وب إستعمال قالب ،  فقط انتق القالب وحدد المكان حيث يجب إنشاء الموقع عندما ينشىء فرونتبيج موقع الويب الجديد ويطبق بنية القالب عليه تاركاً لك مسألة ملء المحتوى وتخصيص مظهر الموقع ليناسب إحتياجاتك .
في هذا الدرس  ستنشىء نوعين مختلفين من مواقع الوب باستعمال قوالب : موقع بسيط مؤلف من صفحة واحدة وموقع وب شخصي .
نفذ الخطوات التالية :
1- إذا لم يمكن فرونتبيج مشتغلاً من قبل ، شغله الآن .
2- إذا كان لوح المهام صفحة جديدة أو وب جديد غير مفتوح ، اختر الأمر ملف جديد صفحة أو وب .
تبدو شاشتك الآن كالتالي :

 لوح المهام " صفحة جديدة أو وب جديد"
يحتوي لوح المهام صفحة جديدة أووب جديد على ارتباطات مريحة إلى مواقع الوب والصفحات الفردية التي كنت قد أنشأتها أو عملت معها في فرونتبيج . كما يحتوي على ارتباطات إلى القوالب والمعالجات التي يمكنك استعمالها لإنشاء صفحات أو مواقع وب جديدة : إذا لم يكن لوح المهام هذا مفتوحاً من قبل ، يمكنك فتحه باستعمال الطرق الثلاث التالية :

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


3- في الناحية جديد من قالب في لوح المهام صفحة جديدة أو ويب جديد ، انقر قوالب موقع ويب ، يظهر مربع الحوار قوالب موقع ويب التالي :


4- في مربع الحوار قوالب موقع ويب ، انقر الرمز صفحة ويب ذات صفحة واحدة .
5- في القسم خيارات ، حدد ماذا تريد أن تسمي موقعك و أين تريد تخزينه .
6- انقر موافق ، و بعد حوالي ثلاث ثواني ، تكون قد أنشأت موقع ويب جديد مؤلف من صفحة واحدة .
7- إذا لم تكن قائمة المجلدات مفتوحة ، اختر الأمر عرض قائمة المجلدات لفتحها .
8- في قائمة المجلدات ، انقر الملف index.htm نقراً مزدوجاً لفتحه . تبدو شاتك الآن كالتالي :


  إنشاء موقع ويب جديد باستعمال معالج :

 


نفذ الخطوات التالية :
1- انقر سهم الزر " جديد " على شريط الأدوات ثم انقر ويب . يظهر مربع الحوار : قوالب موقع ويب .
2- في مربع الحوار قوالب موقع ويب انقر الرمز معالج تواجد الشركة و حدد مكان و اسم موقعك  و انقر موافق .

الشكل 1

الشكل 2

الشكل 3

الشكل  4

الشكل 5

الشكل 6

الشكل 7

الشكل 8

الشكل 9

الشكل 10

الشكل  11

الشكل  12

 

الشكل 13

الشكل  14

الشكل  15

 


يظهر أول مربع حوار من سلسلة مربعات حوار معالج تواجد الشركة ، و التي تدعى صفحات . يستعمل المعالج تلك الصفحات ليطلب منك انتقاء الخيارات و معلومات الشركة الأساسية .
3- اقرأ المعلومات على الصفحة الأولى ثم انقر الزر التالي للانتقال إلى الصفحة الثانية .
4- تابع قراءة المعلومات و انقر التالي لقبول كل الانتقاءات الافتراضية في كل صفحة من صفحات معالج تواجد الشركة ، إلى أن تصل إلى الصفحة التي تطلب منك اسم و عنوان الشركة . ( الشكل 12 )
5- اكتب المعلومات حسب ما يناسبك .
6- معظم المواقع التي تنشئها المعالجات تأتي مع ثوب رسومي افتراضي يعطي كل صفحات الموقع مظهراً متناغماً . في هذه المرحلة من العملية يمكنك اختيار تغيير الثوب الافتراضي . ثم التالي ثم إنهاء .
ينشئ فرونت بيج موقعك باستعمال المعلومات التي زودتها ثم يعرض لائحة المهام التي يجب إنجازها لإنهاء الموقع .


7- اختر الأمر ملف  ×  إغلاق ويب . لإغلاق موقع ويب الحالي .

 

 

 

 التحكم في الصور باستخدام الجداول :  

 لكي يتضح لك كيف تساعدك الجداول على سهولة التحكم في وضع الصور والنص داخل صفحة الويب :

1-     قم بإنشاء صفحة جديدة .

2-     قم بإنشاء جدول داخل صفحة بحيث يتكون من خليتين.

3-     أدرج صورتك في الخلية اليسرى .

 إنشاء نماذج مصغرة للصور :   

النماذج المصغرة عبارة عن نسخ صغيرة لصور كبيرة الحجم ، إلى جانب كونها ارتباطات للصور الكبيرة ، وكمثال على النماذج المصغرة للصور وكيفية استخدامك لها تشغيل المستعرض الخاص بك ، انتقل إلى العنوان او تنسيقها  ( انظر الشكل 1 - 7  ) .

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

 

عند تصميم صفحات الويب ضع في اعتبارك أن معظم المستخدمين مازالوا يستعرضون الويب باستخدام مودم سرعته 28.8 كيلوبت في الثانية . لذلك عليك أن تراعي في تصميم الصفحات سرعة تحميلها عند استعراضها .

لإنشاء نموذج مصغر لإحدى الصور :   

1-     قم بإنشاء صفحة جديدة .

2-     أدرج أي صورة في الصفحة .

3-  تأكد من ظهور شريط أدوات الصورة داخل النافذة الرئيسية لفرونت بيج ، إن لم يكن هذا الشريط ظاهراً ، فحدد خيار أشرطة الأدوات Toolbars من قائمة عرض View وتأكد من تحديد أمر صورة Picture .

4-  حدد الصورة التي أدرجتها في الصفحة ، ثم انقر رمز صورة مصغرة تلقائية Auto Thumbnail الموجود على شريط أدوات الصورة سيتم على الفور استبدال نموذج مصغر بالصورة الأصلية ( انظر الشكل 2 - 7 ) .

 

2 - 7

تستطيع أيضاً تعديل طريقة ظهور النماذج المصغرة للصور داخل الصفحة . للقيام بهذا الإجراء :

1-     من قائمة أدوات Tools ، حدد أمر خيارات الصفحة  Page Options لتفتح مربع حوار خصائص الصفحة .

2-     حدد علامة تبويب Auto Thumbnail لتفتح اللوحة الخاصة بها ( انظر الشكل 3 - 7 ) .

3 - 7

3-  هنا تستطيع التحكم في حجم النماذج المصغرة للصورة إلى جانب التحكم في حجم ونوع الحدود التي تظهر حول هذه النماذج داخل صفحات الويب .

 إنشاء الخلفيات :

توجد طريقتان لاستخدام ملفات الصور كخلفيات . الأولى هي استخدام الصورة لإنشاء خلفية عادية ، والثانية هي إنشاء ما يسمى بـ " العلامة المائية " watermark .

 إنشاء خلفية عادية :

لإنشاء خلفية :

1-     اختر أمر خصائص Properties من قائمة ملف File لتفتح مربع حوار خصائص الصفحة  Properties Page  .

2-     انقر علامة تبويب خلفية  Background  .

3-  حدد مربع العلامة صورة خلفية Picture Background ، ثم أدخل اسم ملف الصورة التي تريد استخدامها كخلفية . إن لم تتذكر جيداً اسم ملف الصورة ، فاستخدم زر استعراض Browse للبحث عنه وتحديد موقعه .

4-     انقر زر موافق ، وستظهر الصورة التي حددتها كخلفية للصفحة التي تتعامل معها حالياً  .

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

 إنشاء العلامة المائية :

لتعيين صورة الخلفية كعلامة مائية :

1-     من قائمة ملف File ، حدد أمر خصائص Properties لتفتح مربع حوار خصائص الصفحة  Properties Page  .

2-     انقر علامة تبويب خلفية Background لتفتح اللوحة الخاصة بها .

3-     حدد مربع العلامة علامة مائية  watermark .

4-     انقر زر موافق ، لتصبح بذلك الصورة التي حددتها للخلفية علامة مائية لصفحة الويب التي تصممها .