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

أنواع القوالب المتاحة في الفرونت بيج :

القوالب نوعان هما قوالب الصفحات page templates وقوالب المواقع web templates .

قوالب المواقع :

هناك تشكيلة مكونة من عشرة قوالب للمواقع يمكنك اختيار ما تريد منها حسب ما يناسبك ( انظر الشكل 1-2 )

من قائمة File حدد خيار New ثم خيار Page or Web ثم من مربع الحوار اختر Web Site Templates .

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

هذا المعالج يرشدك إلى خطوات إنشاء موقع ويب خاص بأعمالك التجارية .

Customer Support Web :

يمكنك هذا المعالج من إنشاء موقع ويب خاص بدعم المستهلكين ، يصلح هذا القالب لشركات البرامج التي تقوم بإنشاء مواقع دعم المستهلكين .

Discussion Web Wizard :

يرشدك هذا المعالج إلى عملية إنشاء موقع مناقشة يشبه مجموعات الأخبار .

Import Web Wizard :

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

Project Web :

يقوم هذا المعالج بإنشاء موقع ويب يتم تأسيسه وفق مشروع معين يحوي الجدول الخاص بهذا المشروع وحالته وعدده وملفات الأرشيف والمناقشات . × Personal Web : يكنك من إنشاء موقع ويب شخصي يعكس أنشطتك واهتماماتك الخاصة .

One Page Web :

يحوي هذا القالب صفحة ويب واحدة .

Empty Web :

لا يحوي أي صفحة ويب بداخله .

- استخدام قالب معالج الويب :

لاستخدام قالب بسيط في إنشاء موقع ويب ...

قم بما يلي :

1 - من قائمة File ، حدد الخيار New ثم Page or Web حتى تفتح مربع حوار New وبداخله علامة تبويبWeb Site محددة .

2 - حدد نوع القالب الذي تريد استخدامه ، كأن تختار قالب Customer Support Web مثالاً

3 - حدد المجلد أو الدليل الذي تريد أن تنشئ فيه موقع الويب ثم انقر زر ok .

4 - في حالة عدم وجود هذا المجلد بالفعل ، سيسألك البرنامج إن كنت تريد إنشاءه . في هذه الحالة انقر زر yes وسيقوم الفرونت بيج بعد ذلك بإنشاء القالب طالما انتهيت من إنشاء المجلد الخاص به .

5 - بعد بضع ثوان ، سيتم إنشاء القالب .

يقوم الفرونت بيج بإضافة صفحة آو أكثر إلى موقع الويب بعد تحديد أي قالب من القوالب ما عدا قالب Empty Web .

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

رغم أن عدد القوالب للمواقع عشرة فقط إلا أنه يحتوي على 27 قالباً للصفحات .

ويبين الشكل 2-2 معظم قوالب الصفحات التي يمكنك اختيار ما يناسب احتياجك منها .

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

- لإنشاء صفحة ويب باستخدام أحد القوالب قم بما يلي :

1 - من قائمة File حدد خيار New ثم خيار Page or Web لتفتح مربع حوار New اختر منه Page Templates

2 - حدد نوع القالب الذي تريد استخدامه ، كأن تختار قالب – Left ، Narrow aligned Body مثلاً .

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

3 - انقر زر ok بعد ثوان معدودة ، سيتم إنشاء الصفحة الجديدة من القالب الذي حددته .

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

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

أيضاً يتيح لك الفرونت بيج تزيين النص وتنسيقه بالإضافة إلى وضع النص الأصلي في الصفحة ، وستلاحظ إن كان لك معرفة وتعامل سابق مع برامج أوفيس أن الأمر لا يختلف كثيراً مع الفرونت بيج وستجد أن إضافة النص سهل جداً كما لو أنك تكتب ملف وورد وتقوم بتنسيقه ، يمكنك باستخدام الفرونت بيج :-

1 - تعديل حجم النص .

2 - ضبط وضع النص ، كأن يكون منخفضاً subscript أو مرتفعاً superscript عن السطر .

3 - إضافة سمات إلى النص ، كأن تجعله عريضاً أو مائلاً أو أسفله سطر ، أو حتى الجمع بين هذه السمات .

4 - توسيط النص على الشاشة .

5 - إضافة ألوان أو أي تأثيرات أخرى ، مثل تأثير النص الوامض .

6 - تغيير الخط الظاهر على الشاشة .

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

- إضافة النص إلى صفحة الويب :-

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

- لتبدأ بكتابة أي فقرة تريدها :

1- إذا لم تكن لديك الآن صفحة فارغة على الشاشة ، فلتقم بإنشاء واحدة .

2- عند الموضع الذي يظهر فيه مؤشر الكتابة

اكتب ما يلي :

بسم الله الرحمن الرحيم

لا حول ولا قوة إلا بالله

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

قم بما يلي :

1 - حدد نص بسم الله الرحمن الرحيم .

2 - من قائمة Format ، حدد أمر Font . في مجموعة Size ، استخدم شريط التمرير حتى تصل إلى خيار 7 ثم حدده ، انقر بعد ذلك زر ok ، لا بد أن يظهر النص لديك بنفس الحجم الموجود في الشكل .

بشكل عام ، يمنحك الفرونت بيج قدراً معقولاً من حرية الاختيار في تحديد حجم النص الذي تكتبه ، ويبين( الشكل 1-3 ) المدى المتاح لك في تغيير حجم النص حيث يبدأ من 8 إلى 36 نقطة .

ملاحظة :

لست مضطراً لاستخدام قائمة Format حتى تفتح مربع حوار Font يمكنك أيضاً أن تنقر بزر الفأرة الأيمن بعد تحديد النص لتفتح قائمة مختصرة ، من هذه القائمة حدد أمر Font Properties لتفتح مربع حوار Font .

- إضافة الألوان والسمات :

والآن ، قم بإضافة بعض السمات إلى النص

ابدأ بتغيير لون العنوان :

ولتغيير لون النص :

1 - حدد عنوان النص .

2 - من قائمة Format اختر أمر Font لتفتح مربع حوار Font ( انظر الشكل 2-3 ) .

3 - افتح القائمة المنسدلة Color حتى تظهر لوحة الألوان .

4 - حدد خيار Red ثم انقر زر ok لتغلق مربع حوار Font لتفتح مربع حوار Font يجب الآن أن يظهر عنوان الفقرة باللون الأحمر .

أيضاً يمكنك جعل النص عريضاً أو مائلاً أو أسفله خط .

- لجعل النص عريضاً :

1 - حدد الكلمات لا حول ولا قوة إلا بالله.

2 - انقر رمز Bold ( يحمل هذا الرمز حرف B ) الموجود على شريط الأدوات .

- لجعل النص مائلاً :

1 - حدد الكلمات أي من الكلمات .

2 - انقر رمز Italics ( يحمل هذا الرمز حرف I المائل ) الموجود على شريط الأدوات .

ولإضافة سطر أسفل النص :

1 - حدد كلمة الله جل جلاله .

2 - انقر رمز Underline ( يحمل هذا الرمز حرف U ) الموجود على شريط الأدوات .

3 - الآن ينبغي أن تشبه الفقرة لديك ما هو مبين في الشكل (3 - 3 ) .

1 - حدد كلمة أي كلمة من النص.

2 - من قائمة Format ، حدد أمر Font لتفتح مربع حوار Font .

3 - في جزء Effects ، يمكنك أن ترى التأثيرات المتنوعة التي يتيحها لك ، كما يتيح لك مربع المعاينة Preview رؤية الشكل الذي يظهر عليه النص بعد تطبيق أي تأثير من تلك التأثيرات .

لا حظ السطرين الظاهرين في مربع المعاينة يتيحان لك رؤية النص بالنسبة للتأثيرات التي تغير من الوضع الرأسي ، مثل تأثير انخفاض subscript وارتفاع superscript النص عن السطر .

4- مثلاً حدد خياري Caps Small و Superscript . انقر زر ok لتغلق مربع الحوار وترى التغييرات التي أجريتها على النص .

يعد تغيير المسافة بين الأحرف Character Spacing من التأثيرات التي تستطيع استخدامها لإبراز النص .

هذه بعض الخيارات التي يمكنك تطبيقها فيما يتعلق بتأثير المسافة بين الأحرف :

1 - حدد الكلمات أي من الكلمات بالحروف الإنجليزية أو اكتب مثلاsaudint.com.

2 - افتح مربع حوار Font .

3 - انقر علامة التبويب Character Spacing لتفتح اللوحة الخاصة بتأثير المسافة بين الأحرف .

4 - من مربع القائمة المنسدلة Spacing ، حدد خيار Expanded وفي مربع القائمة الذي يجاوره By ، حدد خيار 10 .

5 - انقر زر ok لحفظ وتطبيق التغييرات التي أجريتها على المسافة بين الأحرف . وكما ترى فإن تأثير المسافة بين الأحرف يعطيك قدراً من الحرية في التعديل في وضع النص .

نصل الآن إلى واحد من أهم الدروس الأساسية في برنامج الفرونت بيج , حيث أن تصميم الموقع يفضل أن يكون ضمن جداول حتى تضمن أن يظهر المظهر نفسه للموقع الذي صممته في كل أجهزة الكمبيوتر وعلى جميع دقات الشاشة إضافة إلى أهم أنواع مستكشفات الانترنيت .

وبالتالي إذا أجدت استخدام الجداول في صفحات الويب يتيح لك قدراً هائلاً من التحكم في وضع الصور والنصوص داخل الصفحات .

والجداول عبارة عن هياكل شبكية مستطيلة ، تستطيع إنشاءها لتحوي بداخلها صوراً أو نصوصاً .

تسمى مجموعة الخلايا الأفقية بـ " صف " ، في حين تسمى مجموعة الخلايا الرأسية بـ " عمود " .

- إنشاء الجداول :

( لإنشاء جدول )

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

2 - من قائمة Table ، حدد أمر Insert ثم Table لتفتح مربع حوار Insert Table ( انظر الشكل 1 - 4 ) .

يجب أن تعرف كيفية تحديد حجم الجدول لأن عرض الجدول وفق النسبة المئوية لحجم الشاشة أو عدد البكسلات .

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

على سبيل المثال ،

من درجات الوضوح الشائعة درجتا 640X 480 و 800X 600. هذه الدرجة تشير إلى عدد البكسلات ( أفقياً X رأسياً ) المعروضة على الشاشة التي تستخدمها .

عندما تحدد عرض الجدول وفق نسبة مئوية معينة ، فإن العرض سيكون نسبياً ، أي وفق نسبة عرض الشاشة . أما إذا حددت الجدول وفق عدد معين من البكسلات فإنك تحدد عرضاً مطلقاً للجدول .

- لتغيير عرض الجدول :

1 - ضع مؤشر الكتابة داخل الجدول .

2 - من قائمة Table ، حدد خيار Select ثم Table .

3 - من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties ( انظر الشكل 2-4 ) .

5 - انقر زر ok وسيتم تغيير حجم الجدول الذي أنشأته من قبل .

- ارتفاع الجدول :

تستطيع أيضاً أن تعدل ارتفاع الجدول من خلال مربع حوار Table Properties رغم أن معظم مصممي صفحات الويب لا يهتمون بارتفاع الجدول قدر اهتمامهم بعرضه .

ويتم عادة ضبط ارتفاع الجدول تلقائياً بحسب المحتوى الموجود داخل الجدول أو الخلايا الفردية ، وإذا قررت تغيير ارتفاع الجدول ، يمكنك فقط أن تجري تعديلات مطلقة وفق عدد معين من البكسلات .

حدد خيار Specify height ثم اكتب عدد البكسلات الذي تريد أن تحدده لارتفاع الجدول . التعامل مع تخطيط الجداول حدد قيم تخطيط الجدول بأرقام أعلى من القيم العادية . فالمبالغة في تعيين قيم الخصائص تساعد على فهم طبيعة تلك الخصائص .

- لتغيير حجم الحد في الجدول :

1 - حدد الجدول الذي أنشأته من قبل .

2 - من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties .

3 - في جزء Borders ، غير الحجم Size إلى 20 .

4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على حجم الحد في الجدول ( انظر الشكل3 - 4 ) .

- حدود غير مرئية :

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

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

- لتغيير حشو الخلايا :

1 - حدد الجدول الذي أنشأته من قبل .

2 - من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties .

3 - في جزء Layout ، اضبط خانة Cell padding على 20 .

4 - انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على حشو الخلايا ( انظر الشكل 4 - 4) .

- لتغيير المسافة بين الخلايا :

1 - حدد الجدول الذي أنشأته من قبل .

2 - من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties .

3 - في جزء Layout ، اضبط خانة Cell spacing على 20 .

4 - انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على المسافة بين الخلايا ( انظر الشكل 5 - 4 ) .

يمكنك أن تحدد للجدول حدوداً عادية ، أو تنشئ تأثيراً ثلاثي الأبعاد من خلال الحدود الفاتحة light border والحدود الداكنة dark border.

- لتحديد لون حدود الجدول :

1- حدد الجدول الذي أنشأته من قبل .

2 - من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties .

3 - في جزء Border ، انقر سهم القائمة المنسدلة Color لتفتح لوحة الألوان .

4 - حدد خيار Red لتظهر حدود الجدول باللون الأحمر .

5 - انقر زر ok لتطبيق ورؤية اللون الذي حددته لحدود الجدول .

- يمكنك أيضاً تحديد ألوان ثلاثية الأبعاد لحدود الجدول لتحديد ألوان ثلاثية الأبعاد لحدود الجدول :

1- حدد الجدول الذي أنشأته من قبل .

2 - من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties .

3 - في جزء Border ، انقر سهم القائمة المنسدلة light Border لتفتح لوحة الألوان الخاصة بها . 4- حدد خيار Red لتظهر الحد الفاتح للجدول بهذا اللون .

5 - ومن نفس الجزء انقر سهم القائمة المنسدلة Dark Border لتفتح لوحة الألوان الخاصة بها .

6 - حدد خيار Maroon ليظهر الحد الداكن للجدول بهذا اللون .

7 - انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على لون الحدود الفاتحة والداكنة للجدول ( انظر الشكل 6 - 4 ) .

يشير مصطلح الرسومات graphics عادة إلى أي عنصر مرئي غير نصي يظهر على صفحة الويب . في حين يشير مصطلح الصور في الغالب إلى الملفات الرسومية الساكنة التي توجد في صيغتين هما GIF و JPEG .

من أهم القواعد التي يجب أن تنتبه لها عند استخدام الصور في الويب وهي :

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

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

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

إضافة الصور باستخدام فرونت بيج :

لإضافة صورة إلى صفحة الويب :

1 - في الفرونت بيج ، افتح صفحة جديدة داخل الموقع الخاص بك .

2 - من قائمة Insert ، حدد خيار Picture ثم From File لتفتح مربع حوار Picture .

3 - حدد ملف الصورة التي تريد إدراجها في صفحتك .

4 - انقر زر ok وستظهر الصورة في صفحة الويب انظر الشكل .

5 - من قائمة File ، حدد أمر save لتفتح مربع حوار save as ( انظر الشكل 1 - 6 ) لتتأكد من أن ملف الصورة قد تم حفظه مع موقع الويب إلى جانب حفظه في مجلد

7- انقر زر ok لتحفظ ملف الصورة مع موقع الويب الخاص بك .

تعديل ملفات الصور لديك :

من الإعدادات التي يمكنك القيام بها لتعديل ملفات الصور ما يلي :

1 - التحكم في أبعاد الصورة داخل الصفحة

2 - التحكم في طريقة محاذاة النص بالنسبة للصورة

3 - تحديد إذا ما كان سيتم عرض الصورة داخل الحدود

4 - إضافة ارتباط تشعبي إلى الصورة

ولتعديل طريقة عرض الصورة داخل صفحة الويب :

1- حدد الصورة التي تريد تعديلها .

2- من قائمة Format ، حدد أمر Properties لتفتح مربع حوار Picture Properties ( انظر الشكل 6 - 2 ) .

4- لتعديل أبعاد الصورة ، حدد علامة تبويب Appearance لتفتح النافذة الخاصة بها .

5- قم بتغيير قيمتي العرض والارتفاع لتعدل أبعاد عرض الصورة .

6- انقر زر ok لحفظ تغييراتك وإغلاق مربع حوار Picture Properties .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

كيف تعمل الارتباطات :

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

أنواع الارتباطات :

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

ولنبدأ أولاً بـ :-

الارتباطات إلى صفحات داخل الموقع :

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

2 - اكتب النص التالي :

صدى لـ تصميم مواقع الانترنيت وحجز الأسماء والمساحات أو أي نص آخر تريد أن تنشئ له ارتباطاً . حدد الكلمات .

3 - من قائمة Insert ، اختر أمر Hyperlink لتفتح مربع حوار Insert Hyperlink .

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

لـ إنشاء ارتباط إلى مواقع أخرى :

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

2 - اكتب النص التالي :

صدى لـ تصميم مواقع الانترنيت وحجز الأسماء والمساحات أو أي نص آخر تريد أن تنشئ له ارتباطاً . حدد الكلمات .

3 - من قائمة Insert ، اختر أمر Hyperlink لتفتح مربع حوار Insert Hyperlink .

4 - في خانة Address ، اكتب النص التالي : [عزيزي الزائر يتوجب عليك التسجيل للمشاهدة الرابطللتسجيل اضغط هنا] ( انظر الشكل 2 - 8 ) .

5 - انقر زر ok لإغلاق مربع الحوار وحفظ الارتباط .

قم بالخطوات 1 و 2 و 3 السابقة وبعد أن تفتح مربع الحوار Insert Hyperlink اذهب إلى E-mail Address فيفتح لك مربع حوار اكتب في خانة E-mail address عنوان الإيميل الذي ترغب .

وأخيراً إنشاء ارتباط داخل نفس الصفحة :

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

2 - اكتب النص الذي ترغب به ثم حدده .

3 - من قائمة Insert اختر bookmark ( انظر الشكل 3 - 8 ) .

التعرف على الخرائط المصورة :

عندما تنشئ عدة ارتباطات في صورة واحدة ، فإنك تنشئ ما يسمى بالخريطة المصورة . وللخرائط المصورة فائدة عظيمة في صفحات الويب حيث أنها تمثل تصويراً رسومياً يمكن للمستعرضين استخدامه في التنقل داخل موقع الويب .

إنشاء الخرائط المصورة باستخدام الفرونت بيج :

أول خطوة في عملية إنشاء الخريطة المصورة هي تحديد الصورة التي تنوي استخدامها ، إذاً عليك أن تختار ملفاً بإحدى هاتين الصيغتين GIF أو JPEG عليك حفظ تلك الصور بصيغة GIF أو JPG .

ثم انتقل إلى خطوات تحويلها إلى خريطة مصورة وإليك هذه الخطوات .

1 - قم بإدراج ملف الصورة في صفحة الويب التي ستضم الخريطة المصورة .

2 - حدد الصورة التي قمت بإدراجها في الصفحة .

3 - تأكد من ظهور شريط أدوات الصورة في في النافذة الرئيسية لفرونت بيج من شريط أدوات الصورة ، انقر رمز Polygonal Hotspot .

يجب أن يظهر المؤشر على شكل قلم رصاص .

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

5 - استمر في تتبع الكائن وإنشاء نقاط الإرساء إلى أن تصل إلى النقطة التي بدأت منها . انقر نقطة الإرساء الأولى مرة أخرى لتنهي عملية تتبع الكائن ، وسيظهر على الفور مربع حوار Create Hyperlink .

6 - في مربع نص Address ، اكتب عنوان الصفحة التي تريد أن تنشئ الارتباط إليها . انقر زر OK لتحفظ الارتباط وتغلق مربع الحوار .

7 - كرر الخطوات من 3 إلى 6 مع عدة كائنات أخرى تريد أن تحولها إلى نقاط ساخنة داخل الخريطة المصورة . أنقر أداة البقعة التي تريد استخدامها مع تحديد المناطق التي تريد تحويلها إلى بقاع ساخنة داخل الصورة .

معاينة الخريطة المصورة :

ينبغي أن تستخدم علامة تبويب PREVIEW التي توجد في النافذة الرئيسية لفرونت بيج ( في الجانب الأيسر السفلي ) لتختبر الخريطة المصورة التي أنشأتها .

لمعاينة الخريطة المصورة :

1 - تأكد من أنك مازلت تعرض الصفحة التي قمت بإنشائها .

2 - تأكد من تحديد علامة تبويب Normal الموجودة في الجزء السفلي من نافذة الصفحة .

3 - لمعاينة الصفحة والخريطة المصورة اللتين انتهيت من إنشائها ، انقر علامة تبويب PREVIEW وسترى الصفحة بنفس هيئتها عند استعراضها بواسطة أحد مستعرضات الويب .

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

وهكذا تم هذا الدرس آمل أن تكون قد كونت صورة واضحة تماماً عن كيفية عمل الارتباطات ولا بد أنك الآن قد أصبحت على استعداد كامل لعمل موقع ويب .

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

هل يجب استخدام الإطارات ؟

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

إنشاء الإطارات باستخدام قوالب الفرونت بيج :

بعد أن تنتهي من عملية التخطيط لاستخدام الإطارات أبدأ باستعراض الإطارات الموجودة وابحث عن قالب يشبه الذي خططة له بدرجة كبيرة

دعنا نقوم بتأسيس موقع ويب في غاية البساطة مع الاستعانة بالإطارات :

1 - من قائمة File ، اختر أمر New ثم Page or Web لتفتح مربع حوار New اختر منه Page Templates .

2 - انقر علامة تبويب Frames Page لتعرض اللوحة الخاصة بها ( انظر الشكل 1 - 9 ) .

4 - انقر ok لإغلاق مربع الحوار وإنشاء صفحة الويب باستخدام القالب الذي حددته ( انظر الشكل 2 - 9 ) .

سنقوم بإنشاء قائمة بسيطة في الإطار الصغير الموجود في يسار الصفحة كما يلي :

1 - في الإطار الأيسر ، انقر زر New Page وسيتم إنشاء صفحة جديدة في الإطار .

2 - اكتب النص التالي في الصفحة المؤطرة : Page1 صفحة 1

3 - حدد نص Page1 من قائمة Insert ، حدد أمر Hyperlink لتفتح مربع الحوار Insert Hyperlink .

4 - في مربع Address اكتب اسم إحدى الصفحات التي أنشأتها من قبل في الدروس السابقة أو حدد إحداها بـ أي طريقة تودها .

5 - في مربع حوار Insert Hyperlink ، انقر زر Target Frame لتفتح مربع حوار Target Frame ( انظر الشكل 9 - 3 ).

6 - يعرض مربع حوار Target Frame شكلاً تمثيلياً للإطارين الموجودين في الصفحة ، حدد الإطار الأيمن بالنقر داخله ، هذا الإطار هو المكان الذي ستظهر فيه الصفحة التي أنشأت لها إطاراً ، حيث تم عرضها عندما تحدد الإطار الذي أنشأته .

7 - انقر زر ok لإغلاق مربع الحوار Target Frame . انقر زر ok مرة أخرى لإغلاق مربع حوار Insert Hyperlink .

8 - كرر الخطوات من 3 إلى 7 مع نصي صفحة 1و مع تحديد صفحتين مختلفتين لعرضهما في هذين الارتباطين .

9 - تم الانتهاء من إنشاء صفحتك المؤطرة تقريباً ، الآن تحتاج إلى إلى تحديد الصفحة التي سيتم عرضها وغالباً ما تكون نفس الصفحة التي تمت تسميتها بواسطة ارتباط Page1 انقر زر Set Initial Page الموجود في اللوحة اليمنى لتفتح مربع حوار Insert Hyperlink .

10 -اكتب اسم الملف الذي يحتوي على ارتباط إلى Page1 الذي أنشأته في الخطوة 4 .

11 -انقر زر ok لإغلاق مربع الحوار .

12 -من قائمة File ، حدد أمر Save لحفظ ملفاتك . سيطلب منك حفظ كل الملفات التي أنشأتها . ونظراً لأنك أنشأت الملف الظاهر في الإطار الأيسر ، سيطلب منك حفظه إلى جانب حفظ الملف المسمى بـ " مجموعة الإطارات " frameset file وهو الملف الذي يتحكم في الصفحة المؤطرة .

13 -بعد الانتهاء من حفظ ملفاتك ، حدد علامة تبويب Preview لعرض الصفحات المؤطرة ( أي ذات الإطارات ) واختبر أدوات التحكم في الإطارات. ما تزال الإطارات مثيرة للجدل رغم ظهورها من بضع سنوات ، لكن لا تنس ألا تبالغ باستخدامها .

5 - بحسب حجم موقع الويب الذي تقوم بنشره وسرعة الاتصال بالخادم ، قد تستغرق عملية النشر ما يتراوح بين بضع ثوان وبضع دقائق عندما ينتهي فرونت بيج من نشر موقعك ونجاح عملية النشر ، ستعرض لك رسالة توضح ذلك .

6 - سوف يظهر عند الانتهاء وصلة لمعاينة الموقع الذي تم نشره ، انقر ارتباط published web site .

7- انقر زر Done لإغلاق مربع حوار publish web .

مهام إدارة موقع الويب :

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

1 - تأكد من أن الموقع الذي تريد تحديثه قد تم فتحه .

2 - من قائمة File ، اختر أمر publish web لتفتح مربع حوار publish web .

3 - في مربع نص Enter publish destination ، اكتب عنوان URL الخاص بخادم الويب الذي نشرت عليه موقعك . تأكد بعد ذلك من تحديد مربع العلامة publish changed pages only .

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

الحصول على تقارير عن موقع الويب :

للحصول على تقارير عن موقع الويب :

1 - افتح موقع الويب الذي تريد أن تحصل على تقرير عنه .

2 - من شريط view ، انقر رمز reports سيظهر بعد ثوان على الشاشة تقرير يضم معلومات عن الموقع الذي فتحته (انظر الشكل 2 - 10).