fbpx

9- فرونت بيدج - التعامل مع الاطارات | اللى حصل

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

وسوم :


الدرس التاسع – التعامل مع الاطارات


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

تعقل في استخدام الإطارات :


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

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

إنشاء الإطارات :

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

  1. قم بإنشاء موقع جديدة استناداً إلى القالب Empty Web .
  2. قم بإنشاء أربعة صفحات ، صفحة بإسم Main لتحتوي على معلومات أساسية عن الموقع وقم بتعبئتها بالشكل الذي تريده ، وصفحة بإسم Favorites لتحتوي على قائمة بمواقعك المفضلة ، وصفحة بإسم Contacts لتحتوي على معلوماتك الشخصية ، وصفحة بإسم links تحتوي على ثلاثة روابط للصفحات السابقة .
  3. في نافذة Task Pane أنقر فوق Page Templates ليظهر لك مربع الحوار Page Templates ، وانقر فوق زر التبويب Frames Pages .
  1. اختر أحد القوالب الجاهزة ، وليكن القالب Contents ، وستلاحظ ظهور شكل القالب ووصف له في يمين مربع الحوار .
  2. انقر فوق الزر Ok .
  3. قم بحفظ الصفحة الجديدة باسم index.htm لتكون الصفحة الرئيسية للموقع .
    ستظهر لك الصفحة الآن على الشكل التالي :

تحديد الصفحات الأولية :

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

اتبع الآن الخطوات التالية :

  1. انقر بالفأرة داخل الإطار الأيسر ، ولاحظ أن حدوده أصبحت باللون الأزرق .
  2. انقر فوق الزر Set Initial Page ليظهر لك مربع الحوار Insert Hyperlink .
  1. قم باختيار الصفحة links.htm ، انقر فوق الزر Ok .
  2. انقر بالفأرة داخل الإطار الأيمن .
  3. انقر فوق الزر Set Initial Page ليظهر لك مربع الحوار Insert Hyperlink .
  4. قم باختيار الصفحة main.htm ، انقر فوق الزر Ok .
    لعلك لاحظت وجود الزر New Page بجانب الزر Set Initial Page ويمكنك استخدامه في حالة إذا كنت لم تقم بإعداد أية صفحات أخرى في الموقع ، وبالتالي لا توجد صفحات لتعيينها كصفحات أولية، وعند النقر عليه سيقوم Front Page بإنشاء صفحة جديدة يمكنك تحريرها كأي صفحة أخرى لتصبح هي الصفحة الأولية .

الروابط والإطارات :

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

اتبع الخطوات التالية :

  1. انقر بزر الفأرة الأيمن فوق رابطة من الروابط الموجودة في الإطار الأيسر.
  2. اختر البند Hyperlink Properties ، ليظهر لك مربع الحوار Edit Hyperlink .
  3. انقر فوق الزر Target Frame ، ليظهر لك مربع الحوار Target Frame .
  4. من صندوق Current Frames Page انقر فوق الإطار الذي تريد أن تظهر الصفحة التي تشير إليها الرابطة داخله ، وفي حالتنا هذه ستقوم بالنقر فوق الإطار الأيمن .
  5. كرر الخطوات السابقة مع الرابطتين الباقيتين من الإطار الأيسر .
  6. لتحديد إطار خاص لعرض الصفحة داخله ، اختر أحد بنود قائمة Common targets .
  7. لتحديد الإطار الإفتراضي قم باختيار الإطار من قائمة Common targets ثم قم بتحديد البند Set as Page Default أسفل مربع الحوار.
  8. انقر فوق الزر Ok ، لإغلاق مربع الحوار Target Frame .
  9. انقر فوق الزر Ok مرة أخرى ، مربع الحوار Edit Hyperlink .
    في مربع الحوار Target Frame ستجد تحت قائمة Common targets خمسة اختيارات:
  • Page Default : لعرض الصفحة الجديدة داخل الإطار الافتراضي .
  • Same Frame : لعرض الصفحة الجديدة داخل نفس الإطار .
  • Whole Page : لإلغاء جميع الإطارات وعرض الصفحة الجديدة داخل نافذة مستعرض الويب دون إطارات .
  • New Window : لفتح نافذة جديدة لمستعرض الويب وعرض الصفحة داخلها .
  • Parent Window : عندما تقوم بتقسيم الصفحة إلى مجموعة من الإطارات بشكل فإنك في الواقع تقوم بإنشاء مجموعة إطارات داخل إطار رئيسي ، لذا إذا قمت باختيار البند Parent Frame سيقوم مستعرض الويب بعرض الصفحة الجديدة داخل الإطار الرئيسي ، وفي حالتنا هذه سيقوم بعرض الصفحة الجديدة لتحتل مساحة المستعرض كلها .
  • خصائص الإطار :
    يمكنك تحديد العديد من الخصائص التي تحدد شكل الإطار والكيفية التي سيعرض بها عند استعراض الموقع من خلال مستعرض الويب عن طريق مربع الحوار Frame Properties ،

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

  1. انقر بزر الفأرة الأيمن داخل الإطار واختر البند Frame Properties ليظهر لك مربع الحوار Frame Properties .
  1. في صندوق Name قم بكتابة اسم مميز للإطار .
  2. في صندوق Initial Page قم بتحديد الصفحة الأولية، أو انقر فوق الزر Browse ليظهر مربع الحوار Edit Hyperlink ومنه قم باختيار الصفحة الأولية كما رأينا سابقاً .
  3. في القسم Frame Size قم بتحديد عرض وارتفاع الإطار .
  4. في القسم Margins يمكنك تحديد المسافات البينية، وهما المسافتين الأفقية والرئيسية (بوحدة البيكسل) ما بين حد الإطار وما يحتويه من نصوص أو صور.
  1. إذا قمت بتحديد الخيار Resizable in Browser سيصبح بإمكان زائري الموقع تغيير مساحة الإطار .
  2. من قائمة Show Scrollbars المنسدلة يمكنك تحديد كيفية ظهور أشرطة التمرير في الإطار ، فإذا قمت بإختيار If needed سيتم إظهار أشرطة التمرير فقط في حالة إذا كان الإطار يحتوي على نصوص أو صور ذات مساحة أكبر من مساحة الإطار ، وإذا قمت باختيار Never لن يتم إظهار أشرطة التمرير بصرف النظر عن محتوى الإطار ، وإذا قمت باختيار Always سيتم إظهار أشرطة التمرير دوماً بصرف النظر عن محتوى الإطار .
  3. انقر فوق الزر Ok .

الإطارات الخلفية :

عادة ما تظهر الإطارات داخل نافذة مستعرض الويب وبينها حدود رمادية اللون ، إذا أردت إلغاء عرض تلك الإطارات فأتبع الخطوات التالية :

انقر بزر الفأرة الأيمن داخل الإطار واختر البند Frame Properties ، ليظهر لك مربع الحوار Frame Properties .

انقر فوق الزر Frame Page ، ليظهر لك مربع الحوار
Page Properties .

حدد قيمة البند Frame Spacing بصفر .

قم بإلغاء اختيار البند Show Borders .

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

تخصيص الإطارات :

  1. لست مضطراً إلى التعامل مع القوالب الجاهزة في Front Page 2002 كما هي لإنشاء الإطارات ، إذ يمكنك إجراء تعديلات عليها بتقسيم أحد الإطارات أو حذفها كما في الخطوات التالية :
  2. قم بتحديد الإطار الأيمن في الموقع الذي قمنا بإنشائه في بداية هذا الفصل .
  3. اختر البند Split Frame من قائمة Frames ، ليظهر لك مربع الحوار Split Frame .
  4. اختر البند Split into Columns لتقسيم الإطار إلى عمودين ، أو البند Split into rows لتقسيمه إلى صفين ، في حالتنا اختر تقسيم الإطار لصفين .
  • انقر فوق الزر Ok ، لإنشاء الإطار الجديد وعندها يمكنك التعامل معه بنفس الطرق التي شرحناها سابقاً.

ملحوظة

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

حذف الاطارات

لحذف إطار .. قم بتحديد الإطار ثم اختر البند Delete Frame من قائمة Frames .
بعض مستعرضات الويب لا تدعم الإطارات :
في الواقع أن الغالبية العظمى من مستعرضات الويب تدعم عرض الصفحات المقسمة إلى إطارات ، ولكن بعض المستعرضات لا توفر تلك الإمكانية .
ولعلك لاحظت أثناء عملك في الصفحات التي تحتوي على إطارات أن هناك زر تبويب جديد باسم No Frames يظهر أسفل الشاشة الرئيسية التي تقوم بإعداد صفحاتك داخلها ، وعند النقر فوق هذا الزر يقوم Front Page 2002 بفتح صفحة جديدة (بدون إطارات) ، هذه الصفحة ستظهر مباشرة إذا قام أحدهم بمحاولة استعراض موقعك من خلال مستعرض لا يدعم عرض الإطارات ، وتحتوي هذه الصفحة على رسالة تخبر فيها زائر الموقع بأن مستعرض الويب الذي يستخدمه لا يدعم عرض الإطارات ولهذا لن يستطيع استعراض الموقع .
ومن الأفضل هنا أن تقوم بإضافة مجموعة من الروابط التي تشير إلى صفحات موقعك المختلفة ليتم عرضها صفحة بصفحة بدلاً من عرضها داخل إطارات.

الحدود المشتركة :

كما رأينا في الجزء السابق الهدف من استخدام الإطارات Frames هو الحصول على طريقة أفضل وأسهل لاستعراض الموقع ، ويوفر Front Page  طريقة أخرى خلاف الإطارات لتؤدي نفس الغرض وهي “الحدود المشتركة” Shared Borders .

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

ويقسم Front Page  الصفحة إلى أربعة حدود ، هي العلوي Top والأيسر Left والأيمن Right والسفلي Bottom .

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

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

إظهار الحدود المشتركة وضبط خصائصها :

لإضافة الحدود المشتركة إلى موقع من مواقع الويب التي قمنا بإعدادها ، اتبع الخطوات التالية :

1. قم بفتح الموقع .

2. قم بفتح أي صفحة من صفحات الموقع .

3. اختر البند Shared Borders من قائمة Format ليظهر لك مربع الحوار Shared Borders .

4. اختر الحدود التي تريد إظهارها .

إذا قمت باختيار البند Include navigation buttons أسفل الحد العلوي Top سيتم إضافة عنوان الصفحة وشريط الروابط تلقائياً للحد العلوي ، وإذا قمت باختيار نفس البند أسفل الحد الأيسر Left أو الأيمن Right سيتم إضافة شريط الروابط تلقائياً للحد .

5. في أعلى مربع الحوار اختر البند All Pages لتطبيق إظهار الحدود التي قمت باختيارها على الصفحة الحالية فقط .

6. لضبط خصائص الحدود أنقر فوق الزر Border Properties ليظهر لك مربع الحوار Vorder Properties .

7. من قائمة Border المنسدلة اختر الحد الذي تريد ضبط خصائصه .

8. إذا كنت تريد أن يكون لخلفية الحد لون معين ، اختر البند Color ثم اختر من القائمة المنسدلة اللون الذي تريده .

9. إذا كنت تريد أن يكون لخلفية الحد صورة ، اختر البند Picture .

10. انقر فوق الزر Browse وقم بتحديد اسم وموقع الصورة .

11. انقر فوق الزر Ok لإغلاق مربع الحوار Border Properties .

12. انقر فوق الزر Ok لإغلاق مربع الحوار Shared Borders .

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

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


التعامل مع الاطارات التعامل مع الاطارات التعامل مع الاطارات التعامل مع الاطارات التعامل مع الاطارات التعامل مع الاطارات التعامل مع الاطارات

Comments are closed.

error: Content is protected !!