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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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