11 – الفرونت بيدج – التعامل مع عناصر الويب - - موقع اللى حصل

23 أغسطس 2020
التصنيف :
مهاراتك

الدرس الحادى عشر – التعامل مع عناصر الويب

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

ويمكنك الوصول إلى عناصر الويب في Front Page  باختيار الأمر Web Component من قائمة Insert ليظهر لك مربع الحوار

 Insert Web Component والذي سيكون مدخلنا إلى إنشاء وإدراج تلك العناصر .

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

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

Dynamic Effects :

يوفر برنامج Front Page  ثلاثة أنواع من عناصر التأثيرات الديناميكية هي الأزرار المتحركة Hover Buttons والرسالة المتحركة

 Marquee وشرائط الإعلانات المتغيرة Banner Ad Manager .

Hover Button :

يستخدم برنامج Front Page  لغة جافا لإنشاء أزرار

 Buttons متحركة ، وتظهر تأثيرات حركة هذه الأزرار عند مرور مؤشر الفأرة فوقها أثناء عرضها من خلال مستعرض الويب .

ولإنشاء مثل هذه النوعية من الأزرار اتبع الخطوات التالية :

1. انقر بالفأرة المكان الذي تريد إدراج الزر فيه .

2. من قائمة Insert اختر البند Web Component ، ليظهر لك مربع الحوار Insert Web Component .

3. اختر البند Dynamic Effects من القائمة اليسرى .

4. اختر البند Hover Button من القائمة اليمنى .

5. انقر فوق الزر Finish ليظهر لك مربع الحوار

 Hover Button Properties .

6. في صندوق Button Text قم بكتابة النص الذي تريد ظهوره على الزر .

7. انقر فوق الزر Font ، ليظهر لك مربع الحوار Font .

8. اختر نوع الخط وتنسيقه وحجمه ولونه ثم انقر فوق الزر Ok .

9. انقر فوق الزر Browse ، ليظهر لك مربع الحوار

 Select Hover Button Hyperlink .

10. حدد الصفحة الذي تريد فتحها عند النقر فوق هذا الزر .

11. من قائمة Button Color المنسدلة حدد لون الزر، ومن قائمة

Effect color قم بتحديد لون التأثير الذي سنقوم بتحديده لاحقاً .

12. اختر التأثير الذي تريده من قائمة Effect .

13. حدد ارتفاع وعرض الزر من صندوقي Height و Width .

14. انقر فوق الزر Ok .

التأثيرات المتاحة للأزرار المتحركة يمكننا تلخيصها في التالي :

* Color fill : لتغيير لون الزر من اللون الذي تم اختياره من قائمة

 Button color إلى اللون الذي تم اختياره من قائمة Effect color .

* Color average : لتغيير لون الزر إلى لون متوسط بين اللون الذي تم اختياره من قائمة Button color واللون الذي تم اختياره من قائمة Effect color .

* Glow : لتغيير اللون من منتصفه على شكل دائرة من اللون الذي تم اختياره من قائمة Button color إلى اللون الذي تم اختياره من قائمة

 Effect color .

* Reverse glow : لتغيير لون الزر من حوافه من اللون الذي تم اختياره من قائمة Button color إلى اللون الذي تم اختياره من قائمة

Effect color.

* Light glow : مثل التأثير Glow ولكن بلون أبيض.

* Bevel out : يجعل الزر يبرز إلى أعلى بشكل مجسم.

* Bevel in : يجعل الزر ينضغط إلى أسفل .

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

لأداء ذلك اتبع الخطوات التالية :

1. من مربع الحوار Hover Button Properties انقر فوق الزر Custom ، ليظهر لك من مربع الحوار Custom .

2. قم بتحديد ملف الصوت التي تريده أن يعمل عند النقر بالفأرة فوق الزر في صندوق On click وقم بتحديد ملف الصوت التي تريده أن يعمل عند المرور بمؤشر الفأرة فوق الزر في صندوق On hover .

3. قم بتحديد الصورة الأساسية للزر في صندوق Button والصورة التي تريدها أن تظهر عند المرور بمؤشر الفأرة فوق الزر في صندوق On hover .

4. انقر فوق الزر Ok .

Marquee :

الرسالة المتحركة Marquee في برنامج Front Page  هو أسلول لعرض النصوص بحيث تتحرك بعرض الشاشة من اليسار إلى اليمين أو بالعكس أو تتأرجح بين جانبي الشاشة ، ولإعداد مثل هذه النوعية من النصوص اتبع الخطوات التالية :

1. انقر بالفأرة في المكان الذي تريد إدراج الرسالة فيه.

2. من قائمة Insert اختر البند Web Component ، ليظهر لك مربع الحوار Insert Web Component .

3. اختر البند Dynamic Effects من القائمة اليسرى .

4. اختر البند Marquee من القائمة اليمنى .

5. انقر فوق الزر Finish ليظهر لك مربع الحوار

 Marquee Properties .

6. في صندوق Text ، اكتب نص الرسالة .

7. في الجزء Direction ، قم بتحديد اتجاه الحركة من اليمين إلى اليسار Left أو من اليسار إلى اليمين Right .

8. في الجزء Speed ، من البند Delay قم بتحديد زمن التوقف بين كل خطوة من خطوات الحركة ويقاس بالميلي ثانية ، ومن البند Amount قم بتحديد مقدار المسافة التي تتحركها كل خطوة من خطوات الحركة مقاسة بوحدة البيكسل .

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

10. من الجزء Size قم بتحديد عرض Width وارتفاع Height النص ، وعادة ما يقوم البرنامج بضبط تلك القيم تلقائياً .

11. في الجزء Repeat قم بتحديد عدة المرات لتكرار الحركة ، وإذا قمت بتحديد الخيار Continuously سيتم إعادة الحركة بشكل مستمر لعدد لا نهائي من المرات .

12. أخيراً من قائمة Background color قم باختيار لون خلفية النص .

13. انقر فوق الزر Ok .

بعد ذلك يمكن تنسيق نص الرسالة المتحركة بنفس الطريقة التي تقوم فيها بتنسيق أي نص عادي في برنامج Front Page  .

يمكنك استخدام هذه الأداة لإنشاء شرائط الإعلانات Banners ، وتوفر لك إمكانية إظهار أكثر من صورة وتحديد مؤثرات خاصة لإظهار وإخفاء تلك الصور لفترات زمنية محددة ، لأداء ذلك اتبع الخطوات التالية :

1. أنقر بالفأرة في المكان الذي تريد إدراج شريط الإعلان فيه .

2. من قائمة Insert اختر البند Web Component ، ليظهر لك مربع الحوار Insert Web Component .

3. اختر البند Dynamic Effects من القائمة اليسرى .

4. اختر البند Banner Ad Manager من القائمة اليمنى .

5. انقر فوق الزر Finish ليظهر لك مربع الحوار

 Banner Ad Manager Properties .

6. في صندوق Width قم بتحديد عرض شريط الإعلان بوحدة البيكسل ، وفي صندوق Height قم بتحديد ارتفاع الشريط.

7. من قائمة Transition effect المنسدلة قم باختيار التأثير الذي تريد استخدامه لإظهار وإخفاء صورة شريط الإعلان .

8. في صندوق Show each picture for قم بتحديد الفترة الزمنية لعرض الصورة (بالثانية).

9. في صندوق Link to قم بكتابة عنوان الصفحة التي تريد أن يقوم مستعرض الويب بعرضها عند النقر بالفأرة فوق شريط الإعلان ، أو انقر فوق الزر Browse الموجود بجانب الصندوق وقم بتحديد الصفحة .

10. انقر فوق الزر Add وقم بتحديد الصورة الأولى في شريط الإعلان .

11. كرر الخطوات السابقة لتحديد باقي الصور التي يتكون منها الشريط .

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

12. استخدم الزرين Move Up و Move Down لتغيير ترتيب عرض الصور ، (لاحظ أن أسماء الصور تظهر مرتبة داخل قائمة

 Picture to display في مربع الحوار ).

13. انقر فوق الزر Ok .

أداة Web Search في Front Page 2002 تمكنك من إضافة ميزة هامة إلى موقعك حيث توفر لك هذه الأداة إمكانية إنشاء نموذج يقوم زائر الموقع من خلاله بكتابة كلمة أو عبارة ما للبحث عنها داخل صفحات الموقع ، ولأداء ذلك اتبع الخطوات التالية:

1. انقر بالفأرة في المكان الذي تريد نموذج البحث فيه.

2. من قائمة Insert اختر البند Web Component ، ليظهر لك مربع الحوار Insert Web Component .

3. اختر البند Web Search من القائمة اليسرى .

4. اختر البند Current Web من القائمة اليمنى .

5. انقر فوق الزر Finish ليظهر لك مربع الحوار

 Search Form Properties

6. في صندوق Label for Input قم بكتابة العبارة التي تريدها أن تظهر قبل صندوق البحث.

7. في صندوق Width in characters قم بتحديد عدد الحروف المسموح بكتابتها داخل صندوق البحث.

8. في صندوق Label for “Start Search” Button قم بكتابة العبارة التي تريدها أن تظهر فوق الزر الذي إذا قم زائر الموقع بالنقر فوقه تبدأ عملية البحث .

9. في صندوق Label for “Clear” button قم بكتابة العبارة التي تريدها أن تظهر فوق الزر الذي إذا قم زائر الموقع بالنقر فوقه يتم إخلاء العبارة المكتوبة داخل صندوق البحث تمهيداً لإجراء عملية بحث جديدة .

10. انقر فوق زر التبويب Search Results .

11. قم باختيار البند Display score لإظهار النسبة المئوية لمدى دقة نتائج عملية البحث .

12. قم باختيار البند Display File Data لإظهار تاريخ إنشاء كل صفحة من الصفحات التي تظهر في نتائج عملية البحث .

13. قم باختيار البند Display file size لإظهار حجم كل صفحة من الصفحات التي تظهر في نتائج عملية البحث .

14. انقر فوق الزر Ok .

من المفترض أن يظهر نموذج البحث في الصفحة كما في الشكل التالي :

Hit Counter :

تستخدم هذه الأداة لإنشاء (عداد) Counter لإظهار عدد المرات التي يتم فيها استعراض موقعك ، ويوفر لك البرنامج إمكانية اختيار شكل الأرقام والقيمة الأولية للعداد وعدد خانات الأرقام ، كما في الخطوات التالية :

1. انقر بالفأرة في المكان الذي تريد إدراج العداد فيه .

2. من قائمة Insert اختر البند Web Component ، ليظهر لك مربع الحوار Insert Web Component .

3. اختر البند Hit Counter من القائمة اليسرى .

4. اختر شكل الأرقام الذي تفضله للعداد من القائمة اليمنى.

5. انقر فوق الزر Finish ليظهر لك مربع الحوار

 Hit Counter Properties .

6. قم باختيار صندوق Reset counter to ، ثم قم بتحديد القيمة الأولية للعداد .

7. قم باختيار صندوق Fixed number of digits ، ثم قم بتحديد عدد خانات الأرقام للعداد

8. انقر فوق الزر Ok .

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

ولإعداد مثل هذه الصفحة اتبع الخطوات التالية :

1. انقر بالفأرة في المكان الذي تريد إدراج الروابط فيه.

2. من قائمة Insert اختر البند Web Component ، ليظهر لك مربع الحوار

 Insert Web Component .

3. اختر البند Photo Gallery من القائمة اليسرى .

4. انقر فوق الزر Finish ليظهر لك مربع الحوار Photo Gallery Properties .

5. انقر فوق الزر Add ثم اختر البند Picture from files ليظهر لك مربع الحوار File Open.

6. قم بتحديد ملفات الصور التي تريدها .

7. انقر فوق الزر Open .

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

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

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

ويمكنك تغيير ترتيب الصور

 9. ويمكنك تغيير ترتيب الصور بالنقر فوق أي من ملفات الصور وثم النقر فوق الزر Move Up لتقديم الصورة إلى أعلى ، أو الزر Move Down لتأخيرها إلى أسفل .

10. في الجز Thumbnail Size قم بتحديد عرض Width وارتفاع Height الصورة ، ويمكنك اختيار صندوق Maintain aspect ratio للمحافظة على التناسب بين حجم الصورة الأصلية والصورة المصغرة .

11. في صندوق Caption أكتب عنواناً للصورة (إذا أردت) .

12. في صندوق Description أكتب وصفاً للصورة (إن أردت) .

13. أنقر فوق زر التبويب Layout .

14. من قائمة Choose a layout اختر الشكل الذي تريد أن تظهر الصور المصغرة عليه داخل الصفحة ، وسيظهر لك شكل توضيحي لها في صندوق Preview .

15. انقر فوق الزر Ok .

Include Content :

القسم Include Content يضم عدد من الأدوات التي تساعدك على إدراج نصوص أو صفحات أو صور بشكل تلقائي أو استناداً إلى فترة زمنية معينة .

Substitution :

أداة Substitution في Front Page  تشبه إلى حد كبير Auto Text في برنامج Microsoft Word ، فمن خلالها يمكنك تحديد كلمة معينة ليتم استبدالها بعبارة طويلة ، وتضم الأداة بعض الكلمات السابقة التجهيز مثل Author ويتم استبدالها باسم المستخدم الذي قام بإعداد الصفحة ،

و Page URL ويتم استبدالها بعنوان الصحة .

وسنقوم أولاً بالتعرف على كيفية إعداد مجموعة من الكلمات المختصرة لاستخدامها مع أداة Substitution ، اتبع الخطوات التالية :

1. من قائمة Tools اختر البند Web Settings ، ليظهر لك مربع الحوار Web Settings .

2. انقر فوق زر التبويب Parameters .

3. انقر فوق الزر Add ليظهر لك مربع الحوار

 Add Name and Value .

4. في صندوق Name قم بكتابة كلمة تعبر عن العبارة التي ستقوم بكتابتها .

5. في صندوق Value قم بكتابة العبارة .

6. انقر فوق الزر Ok ، للعودة إلى مربع الحوار Web Settings  .

7. انقر فوق الزر Ok .

الآن اتبع الخطوات التالية لإدراج العبارة التي قمنا بإعدادها داخل الصفحة :

1. انقر بالفأرة في المكان الذي تريد إدراج العبارة فيه .

2. من قائمة Insert اختر البند Web Component ، ليظهر لك مربع الحوار Insert Web Component .

3. اختر البند Include Content من القائمة اليسرى .

مربع الحوار Insert Web Component

4. اختر البند Substitution من القائمة اليمنى .

5. انقر فوق الزر Finish ليظهر لك مربع الحوار Substitution Properties .

مربع الحوار Substitution Properties

6. من قائمة Substitute with اختر الكلمة التي تعبر عن العبارة التي تريد إدراجها .

7. انقر فوق الزر Ok .

نكمل شرح فى الدرس القاد (الثانى عشر) والاخير

بلال وجرأة مالك بن دينار

فرونت,فرونت بيج,فروونت,الفرونت,دروس فرونت بيج,تعليم فرونت بيج,الفرونت بيج,فرونت;,رنامج فرونت بيج 2003,دورة برنامج فرونت بيج,دروس الفرونت بيج,تعليم الفرونت بيج,دورة برنامج الفرونت بيج,تعلم فرونت بيج,بيدج,برنامج فرونت بيج 2003 عربي كامل مع السيريال,للفرونت,برنامج فرونت بيج 2003,برنامج فرونت,معرض السيارات فرونت بيج,تعلم الفرونت بيج 2003,شرح تثبيت الفرونت بيج,شرح تحميل و تثبيت برنامج فرونت,شرح تحميل و تثبيت برنامج فرونت بيج,بالفرونت,الإلكترون

Comments are closed.

error: عفواُ .. غير مسموح بالنسخ