بناء صفحات الإنترنت برنامج FrontPage يستخدم لإنشاء وتصميم صفحات إنترنت Web Pages كل موقع إنترنت Web Site يحتوي مجموعة من صفحات الإنترنت Web Pages الصفحة الثانية Web Page 2 الصفحة الأولى Web Page 1 موقع إنترنت Web Site الصفحة الرابعة Web Page 4 الصفحة الثالثة Web Page 3

واجهة برنامج Front Page

تتكون الواجهة من الأجزاء التالية: شريط العرض View Bar: يظهر على يسار الشاشة و وظيفته إظهار صفحات الويب بطرق مختلفة. Folders: تحتوي مجلدين دائما هما Private, Images بالإضافة إلى كل صفحة ويب يتم إنشائها. Tool Bar: شريط الأدوات Menu Bar: شريط القوائم Formatting Bar: شريط التنسيق تخزن صفحات الانترنت على شكل ملفات HTML Hyper Text Markup Language

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

من قائمة File إختر الأمر New ثم Page or Web من القائمة الظاهرة على يمين الشاشة إختر Empty Web الصندوق الظاهر يحتوي ما يلي: زر التبويب WebSite: لتحديد نوع الموقع ونختار دائما One Page Web الحقل Specify the Location of the new web: لتحديد مكان وإسم موقع الويب الذي نريد إنشائه. إي مكان تخزينه على الحاسب. عادة تقوم Front Page بإنشاء مجلدين وصفحة جديدة عند إنشاء موقع ويكون اسم هذه الصفحة Index

يمكنك الضغط على الزر Folders على يسار الشاشة للتأكد من الملفات والمجلدات المكونة للموقع. كما ويمكنك من نفس المكان تغيير أسماء الملفات والمجلدات الموجودة ضمن الموقع وذلك بالضغط بزر الفأرة الأيمن على الملف واختيار Rename لإضافة صفحة جديدة للموقع، إفتح قائمة New واختر الأمر Page ثم من زر التبويب General إختر Normal Page

تنسيق النصوص Formatting Text حدد النص المراد تنسيقه وذالك بتظليل النص من قائمة Format إختر الأمر Font

Font: لتحديد نوع الكتابة Font Style: لتحديد نمط الخط (عريض، مائل، عادي) Size : لتحديد حجم الخط Color: لتحديد لون الخط Effects: لتحديد التأثيرات على الخط مثل: Underline: خط في الأسفل Strikethrough: خط في وسط الكلمات Overline: خط فوق الكلمات Superscript: رفع الرمز للأعلى لكتابة الأسس 42 Subscript: إنزال الرمز للأسفل مثل 42

زر التبويب الثاني في قائمة الأمر Font هو Character Spacing و يحتوي: Position: لتحديد موقع الكلمة على السطر By: لتحديد مقدار الزيادة أو النقصان للأمر Spacing لاحظ أن الأمر Spacing يحتوي ثلاث خيارات: Normal : عادي Expand: زيادة المسافة Condensed: تقليل المسافة

Formatting Bar لتحديد لون الكتابة لجعل الخط عريض لجعل الخط مائل لوضع خط أسفل الكلمات المختارة لتحديد محاذاة النص لتحديد إتجاه النص (النص العربي يتجه من اليمين إلى اليسار) ترقيم أو تنقيط النص

إضافة صورة لصفحة الويب هناك نوعان من الصور التي يمكن إضافتها لصفحة الويب Clipart و Picture From File من قائمة Insert إختر الأمر Picture حدد نوع الصورة (Clipart أو From File) أضف الصورة على الصفحة

إضغط بزر الفأرة الأيمن عليها ثم اختر Picture Properties لتغيير خصائص الصورة: إضغط بزر الفأرة الأيمن عليها ثم اختر Picture Properties يظهر ثلاث أزرار تبويب: Appearance, General, Video من زر التبويب General يمكنك تغيير الصورة وذلك بتحديد ملف اخر لها من الحقل Picture Source ملاحظة: الصور هي عبارة عن ملفات تخزن على الحاسب. وهذا يفسر سبب تحديد اسم الملف في الأمر Picture Source لتغيير الصورة. أي يتم تغيير اسم الملف الذي يمثل الصورة من زر التبويب Appearance يمكن تحديد أبعاد ومكان الصورة داخل الصفحة وذلك من خلال اختيار الأمر Specify Size ثم تحديد العرض Width والارتفاع Height

إضافة جدول لصفحة ويب يتكون الجدول من الأجزاء التالية: أعمدة Columns صفوف Rows خلايا Cells وهي عبارة عن تقاطع الأعمدة مع الصفوف لإضافة جدول لصفحة الويب من قائمة Table إختر Insert ثم إختر الامر Table

لجعل هذه الخيارات رئيسية عند إنشاء جدول جديد لتحديد عدد الأعمدة لتحديد عدد الصفوف محاذاة الجدول عرض الحدود لتحديد عرض الجدول تباعد محتويات الخلية عن الحد لتحديد المسافة بين الخلايا إتجاه النص في الجدول لجعل هذه الخيارات رئيسية عند إنشاء جدول جديد

لتغيير خصائص الجدول بعد إنشائه ضع مؤشر الطباعة داخل الجدول من قائمة Table إختر الأمر Table Properties ثم Table الشكل الظاهر ينقسم لثلاث أقسام: Layout: ويحتوي خصائص تصميم الجدول Borders: يحتوي خصائص حدود الجدول Background: لتحديد لون أرضية الجدول أو الصورة التي ستظهر على أرضية الجدول

في الجزء Borders Size: لتحديد حجم الحدود Color: لتحديد لون الحدود Light Border: لتحديد لون الحد عندما تكون الإضاءه عليه Dark Border: لتحديد لون الحد عندما تكون الإضاءه ليست على الحد. في الجزء Background: Color: لتحديد لون أرضية الجدول Use Background Picture: لإستخدام صورة كأرضية للجدول وذلك باختيارها من زر Browse

الخيار Float في الجزء Layout يستخدم ليتيح إلتفاف النص حول الجدول. لإضافة صفوف أو أعمدة: من قائمة Insert إختر Table إختر Rows or Columns حدد نوع الإضافة (أعمدة أو صفوف) عدد الأعمدة أو الصفوف مكان الإضافة ملاحظة: مكان الإضافة يعتمد على نوعها فعند إضافة عمود تكون الخيارات يمين ويسار أما الصف فتكون أعلى و أسفل

حذف خلايا الجدول إختر الخلية أو مجموعة الخلايا المطلوب حذفها من قائمة Table إختر الأمر Delete Cells ملاحظة: يمكن إختيار الجدول أو صف أو عمود أو خلية بالفأرة أو بوضع مؤشر الفأرة على الجزء المطلوب اختياره ثم من قائمة Table إختر Select ثم نوع الجزء.

تقسيم الخلايا Split Cells لتقسيم خلية أو مجموعة خلايا: حدد الخلية أو الخلايا المراد تقسيمها من قائمة Table إختر الأمر Split Cells حدد طريقة التقسيم حدد عدد أجزاء التقسيم

دمج خلايا الجدول Merging Cells حدد الخلايا المراد دمجها من قائمة Table إختر الأمر Merge Cells لإدراج نصوص أو صور للجدول: ضع مؤشر الفأرة داخل الخلية أكتب النص المطلوب أو من قائمة Insert أضف صورة داخل الخلية. إن أحد أهم استخدامات الجداول في صفحات الانترنت هو تنسيق ظهور الصور والنصوص في الصفحة لتظهر ثابتة في مكانها دائما

إضافة خلفية لصفحة الويب من قائمة File إختر الأمر Properties اختر زر التبويب Background

القسم المسمى Colors يحتوي Background Picture: لتحديد الصورة التي ستظهر كأرضية للصفحة كاملة من خلال زر Browse القسم المسمى Colors يحتوي Background: لتحديد لون أرضية الصفحة Text: لتحديد لون النص المكتوب داخل الصفحة Hyperlink: لتحديد لون الارتباط التشعيبي مع صفحة أو موقع انترنت Visited Hyperlink: لتحديد لون الارتباط التشعيبي مع صفحة أو موقع انترنت تمت زيارته من قبل Active Hyperlink: لتحديد الارتباط التشعيبي الفعال

المكونات Components المكونات المستخدمة في تصميم صفحات الانترنت Hit Counter: يشير إلى عدد الأشخاص الذين قاموا بزيارة الموقع. Marquee: لإضافة نص متحرك داخل الصفحة Hover Button: لإضافة أزرار ذات تأثيرات معينة عندما يتم الضغط عليها واستخدامها. Search Form: لإتاحة عملية البحث داخل الموقع Date and Time: لإظهار اخر وقت وتاريخ لتعديل الموقع

Hit Counter يستخدم العداد لإظهار عدد الأشخاص الذين قاموا بزيارة الموقع مما يوفر دعاية للمواقع التي يزورها أعداد كبيرة. طريقة إضافة عداد: حدد مكان الإضافة بالضغط بمؤشر الفأرة عليه من قائمة Insert إختر الأمر Web Components من القائمة اليسرى Component Type إختر الأمر Hit Counter ملاحظة: عند عمل Preview معاينة للصفحة، سوف لن يظهر العداد. يجب نشر الصفحة أولا حتى تستطيع تفعيله

Counter Style تستخدم لتحديد شكل العداد Reset Counter To تستخدم لتحديد بداية العداد Fixed Number of Digits تستخدم لتحديد عدد خانات العداد

مثال هذا الشكل يبين ما يلي: أول وأقل قيمة سيظهرها العداد هي 100 لن يزيد عدد خانات العداد عن 3 أعلى رقم يأخذه العداد هو 999

Hover Button تستخدم لإضافة تأثيرات على الأزرار بحيث تظهر هذه التأثيرات عند الضغط على الزر أو عند تمرير الفأرة عليه. لإضافة Hover Button: من قائمة Insert إختر Web Components إجعل الفأرة تؤشر على Dynamic Effects إختر من القائمة اليمنى Hover Button

يتكون الشكل من الأوامر التالية: Button Text: لتحديد النص المكتوب على الزر Link To: لتحديد الصفحة أو الموقع التي سيتم الانتقال له عند الضغط على الزر وذلك بتحديد الـ URL للصفحة Button Color: لون الزر في الصفحة Background Color: لون أرضية الزر Effect: لتحديد التأثير على الزر عند تمرير الفأر عليه Height and Width: لتحديد عرض وارتفاع الزر الزر Font: لتنسيق النص الظاهر على الزر الزر Custom: لإضافة تأثيرات صوتية وصور على الزر

عند الضغط على زر Custom الجزء الخاص بتحديد الصوت عند الضغط على الزر أو تمرير الفأرة عليه الجزء الخاص بتحديد الصورة على واجهة الزر أو الصورة التي ستظهر عند تمرير الفأرة على الزر

Play Sound On Click: لتحديد ملف الصوت الذي سيعمل عند الضغط على الزر. On Hover: لتحديد ملف الصوت الذي سيعمل عند تمرير الفأرة على الزر Custom Button: لتحديد الصورة التي ستظهر على واجهة الزر On Hover: لتحديد الصورة التي ستظهر عند تمرير الفأرة على الزر. ملاحظة: لمعاينة Hover Button نستخدم الأمر Preview on Browser في قائمة File

Marquees لإضافة Marquees نص متحرك: من قائمة Insert إختر Web Components إجعل الفأرة تؤشر على Dynamic Effects إختر من القائمة اليمنى Marquees يظهر صندوق الخصائص التالي

Repeat: لتحديد عدد مرات الحركة، ينطبق على جميع الحركات باستثناء Slide Text: لتحديد النص المتحرك، أي الجمل أو الكلمات التي ستتحرك على الشاشة Direction: لتحديد لأي اتجاه سيتحرك النص. Speed: لتحديد سرعة حركة النص من خلال القيمتين: Delay: كل ما قلت قيمتها تزيد سرعة النص Amount: تمثل المسافة المقطوعة في كل حركة. كل ما زادت تزيد سرعة النص Behavior: لتحديد طريقة الحركة داخل المربع، و هناك ثلاث طرق Scroll: الحركة الدائرية أي عند الوصول للنهاية يعود النص للظهور من الطرف الاخر Slide: يتحرك النص مرة واحدة فقط من طرف البداية إلى النهاية ثم يتوقف. Alternate: يتحرك النص بين الطرفين داخل المربع. Repeat: لتحديد عدد مرات الحركة، ينطبق على جميع الحركات باستثناء Slide Continuously: الحركة الدائمة بشكل مستمر Times: لتحديد عدد مرات الحركة Background Color: لتحديد لون أرضية الــ Marquee Width and Height: لتحديد عرض وارتفاع الــ Marquee الزر Style: لتحديد حجم الخط ولونه أي تنسيق النص المتحرك

لا نحتاج لنشر الموقع لعرض الـ Marquees، يمكن عرضها من زر Preview أو من Preview in Browser. لإدراج وقت وتاريخ تعديل الصفحة: من قائمة Insert إختر الأمر Date and Time حدد تنسيق التاريخ من Date Format حدد تنسيق الوقت من Time Format

إضافة نموذج بحث Search Form تستخدم للبحث عن نصوص داخل الموقع الذي تقوم بإنشاءه. لإضافة نموذج بحث: من قائمة Insert إختر الأمر Web Component من القائمة اليسرى إختر Web Search

زر التبويب Search Form Properties Label For Input: لتحديد عنوان حقل إدخال النص Width in Characters: لتحديد حجم حقل الإدخال بالرموز. فمثلا إذا كانت قيمته 20 هذا يعني أن الحقل يتسع لـ 20 رمز. ولكن يمكن كتابة أكثر من هذا الرقم من الرموز إلى أنها لا تظهر جميعها. في المثال: حجم الحقل هو 6 وكتب فيه ABCDE و ABCDEFG Label for start search button: اسم الزر الذي يبدأ عملية البحث. أي الكلمة الظاهرة على الزر. Label for Reset button: اسم الزر الذي يقوم بمسح محتويات حقل الإدخال

زر التبويب الثاني Search Results : تستخدم الأوامر فيه لوصف كيفية ظهور نتائج البحث. Word List To Search: لتحديد المجلدات التي سيتم البحث فيها. في حالة كانت القيمة All هذا يعني أن عملية البحث ستشمل جميع المجلدات Folders الموجودة ضمن الموقع. Date Format: لتحديد تنسيق التاريخ. Time Format: لتحديد تنسيق الوقت Display Score: لعرض رقم يشير إلى مدى تطابق نتيجة البحث مع النص المراد البحث عنه. كلما كان الرقم أكبر تكون درجة المطابقة أكبر. Display File Date: لإظهار الوقت والتاريخ. Display File Size: لإظهار حجم الملفات الناتجة عن عملية البحث بوحدة الكيلو بايت Kilobyte.