الدرس العاشر الإطارات (2) HTML

الدرس العاشر
الإطارات (2)

أهلاً وسهلاً بك إلى الدرس العاشر من دروس HTML. والذي لا زلنا نناقش موضوع الإطارات فيه. لقد تعرفت في الدرس السابق على الأساسيات في هذا الموضوع، وتعلمت كيفية إنشاء صفحة ويب باستخدام مبدأ الإطارات. ونتابع معاً التعرف على باقي الخصائص والتحديدات المتعلقة بها.
بداية، أجد من الضروري أن أذكرك بالوسمين الأساسيين للإطارات واللذين ندرجهما في الملف الأساسي، وهما <FRAMESET> والذي يوضع بدلاً من <BODY> ويشكّل الوسم الأساسي لتحديد مجموعة الإطارات في الصفحة وخصائص هذه المجموعة ككل. و <FRAME> الذي يوضع داخل نطاق الوسم السابق ويعرّف الملف المصدر لكل إطار ويحدد خصائصه. ومن المهم جداُ أن نميز بين الخصائص المتعلقة بكل وسم وأن لا نخلط بينهما.
وعند الحديث عن الإطارات سوف نواجه تلك المشكلة العتيدة التي تؤرق دائماً مصممي صفحات الويب، ألا وهي مسألة توافق الوسوم والخصائص مع المتصفحات المختلفة . فمثلاً لدينا أربع خصائص للوسم <FRAMESET> ، لكن واحدة منها فقط تعمل مع كلا المتصفحين الرئيسيين Netscape, MS Explorer. وكما إعتدنا سوف لن أركز على هذه الخصائص ، لكن على الأقل سأكتفي بذكرها وذكر عملها وأترك لك حرية تجربتها إن أردت.
أولى هذه الخصائص هي FRAMEBORDER وهي تقوم بتحديد ظهور أو عدم ظهور الحدود حول الإطارات وتأخذ القيم 1 للظهور، و0 لعدم الظهور. وهذا مثال عليها:
‎<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">‎
    ‎<FRAME SRC="frame1.html">‎
    ‎<FRAME SRC="frame2.html">‎
    ‎<FRAME SRC="frame3.html">‎
    ‎<FRAME SRC="frame4.html">‎
<‎/FRAMESET>
  *  
أما الخصائص الثلاث الأخرى فهي:
  • BORDER: تحدد سمك الحدود الظاهرة حول الإطارات وهي تأخذ قيماً بالبيكسل. (‎BORDER="n"‎) وتعمل فقط مع Netscape
  • BORDERCOLOR: لإضافة لون للحدود (‎BORDERCOLOR="rrggbb"‎) وتعمل مع Netscape أيضاً.
  • FRAMESPACING: لتحديد مسافات فارغة إضافية حول الإطارات وتأخذ قيماً بالبيكسل (FRAMESPACING="n"‎) وهي تعمل مع MS Explorer.

أما الخصائص المستخدمة مع الوسم <FRAME> فهي كالتالي:
  • MARGINHEIGHT: تحدد مقدار المسافة الفارغة المتروكة للهوامش العلوية والسفلية للإطار (بالبيكسل).
    ‎MARGINHEIGHT="n"‎
  • MARGINWIDTH: تحدد مقدار المسافة الفارغة المتروكة للهوامش اليمنى واليسرى للإطار (بالبيكسل).
    ‎MARGINWIDTH="n"‎
  • SCROLLING: تحدد إمكانية ظهور أو عدم ظهور أشرطة التصفح الأفقية والعمودية على جوانب أو أسفل الإطار. وتأخذ القيم yes للظهور. no لعدم الظهور. و auto التي تحدد ظهور الأشرطة أو عدمه تلقائياً بحسب الحاجة إليها. تماماً كما يحدث في معظم تطبيقات Windows
    SCROLLING="yes"‎
    SCROLLING="no"‎
    SCROLLING="auto"‎
  • NORESIZE عند إضافة هذه الخاصية يتم منع عملية التحكم بحجم الإطار بالتصغير أو التكبير من خلال السحب والإفلات. وهي لا تأخذ أي قيم.
ولتوضيح مبدأ عمل هذه الخصائص إليك هذه الأمثلة، (سأقوم باستخدام الملف الرئيسي الذي أدرجت فيه الصورة في الدرس السابق، فهو أفضل مثال لتوضيحها). ولكي أذكرك به رجاءً أنقر هنا. وقم بتفحصه والتدقيق في تفاصيله لكي تقارنها بما سينتج عن الأمثلة التالية، كذلك حاول القيام بتكبير الإطار أو تصغيره بوضع المؤشر على الحد ثم استخدام السحب والإفلات بالإتجاه المطلوب. وذلك لكي تستطيع تمييز عمل الخاصية NORESIZE

‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40">‎
‎<FRAME SRC="frame2.html">‎
‎</FRAMESET>‎
  *  


‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30">‎
‎<FRAME SRC="frame2.html">‎
‎</FRAMESET>‎
  *  


‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes">‎
‎<FRAME SRC="frame2.html">‎
‎</FRAMESET>‎
  *  


‎<FRAMESET COLS="50%,50%">‎
‎<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes" NORESIZE>‎
‎<FRAME SRC="frame2.html">‎
‎</FRAMESET>‎
  *  



كذلك هناك الخصائص FRAMEBORDER, FRAMESPACING, BORDER, BORDERCOLOR التي تستخدم مع هذا الوسم وبنفس التفاصيل التي ذكرت مع <FRAMESET>. لكنها بالطبع تحدد خصائص الإطار وحده وليس مجموعة الإطارات ككل في الصفحة. وهي تعمل على متصفحات معينة دون غيرها.
بقي لدينا الخاصية NAME والتي تعتبر أهم خاصية لهذا الوسم، فهي التي تحدد طريقة تنسيق العمل بين الإطارات والصفحات وأسلوب عرضها لذلك فقد فضلت أن أفرد لها موضوعاً خاصاً وبصورة مستقلة عن باقي الخصائص، وذلك في الدرس التالي إن شاء الله.

هناك وسم ثالث يتعلق بالإطارات، ويتم إدراجه داخل الملف الرئيسي وعادة في النهاية وهو:
<NOFRAMES> ... <‎/NOFRAMES>
يستخدم هذا الوسم لتوفير بديل معين عن صفحة الإطارات في حالة قيام أحد الزوار بدخول الموقع مستخدماً متصفحاً لا يدعم الإطارات. (بالمناسبة فإن هناك متصفحات لا يمكن لها أن تعرض الإطارات مثل الإصدارات القديمة لـِ Netscape, MS Explorer) لكنك حتماً تستطيع مشاهدتها وذلك لأن الإصدارات المعربة من هذه المتصفحات هي إصدارات حديثة نسبياً وتدعم الإطارات.
فإذا أردت أن تمنح زوار موقعك الذين لا يستخدمون متصفحاً حديثاً فرصة مشاهدة موقعك، فكل ما عليك فعله هو إدراج هذا الوسم في نهاية الملف الرئيسي للإطارات والبدء بكتابة صفحتك كما لو كانت صفحة ويب عادية.
<HTML>
<HEAD>
<TITLE>Main File<‎/TITLE>
<‎/HEAD>
‎<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">‎
    ‎<FRAME SRC="frame1.html">‎
    ‎<FRAME SRC="frame2.html">‎
    ‎<FRAME SRC="frame3.html">‎
    ‎<FRAME SRC="frame4.html">‎
<‎/FRAMESET>

<NOFRAMES>
<BODY>
أكتب صفحتك
بالصورة
الإعتيادية هنا
<‎/BODY>
<‎/NOFRAMES>

<‎/HTML>
أما إذا كنت مصراً على إطاراتك ولا تريد إنشاء نسخة أخرى للموقع بدونها، فلم لا تكتب ملاحظة بسيطة ضمن هذا الوسم تخبر فيها زائرك بأن الموقع يحتوي على هذه الإطارات وأنه يحتاج إلى متصفح مناسب (على الأقل لكي تخفف عنه الصدمة)!! خاصية تعتبر من أهم خصائص الوسم <FRAME> لأنها تحدد طريقة تنسيق العمل بين الإطارات والصفحات وأسلوب عرضها. لنعتبر هذا تعريفاً مبدئياً. ولكي أوضح لك الهدف من هذه الخاصية، قم باستعراض المثال التالي ... الذي قمت فيه بتمثيل بعض الأجزاء من هذا الموقع (لنترك تلك الأمثلة المملة التي كنا نعمل عليها في هذا الدرسين السابقين ولنبدأ بالعمل الجدي). وأنقر على أزرار الوصلات التشعبية الموجودة في الإطار الأيسر ......وبالطبع لا تنسى النقر على زر BACK الموجود في متصفحك للعودة إلى هذه الصفحة. وقد تحتاج إلى نقره عدة مرات بحسب عدد المرات التي تنقلت فيها في صفحات الإطار.

ماذا وجدت؟!؟ إن الصفحات تظهر في نفس الإطار (أعرف أنك كنت تتوقع ظهورها في الإطار الآخر... فهل خيبت ظنّك؟). حسناً، لا زالت هذه الإطارات تحتاج إلى القليل من العمل لكي تعمل كما يجب. وقبل أن نكمل أود أن تتمعن في الشيفرات التالية، وهي في الواقع الشيفرات الخاصة بالملفات المستخدمة في هذا المثال. وأرجو أن تقوم بدراستها جيداً، على الأقل لكي تكون متأكداً من فهمك لكل الأفكار السابقة قبل أن تنتقل إلى النقاط التي ستلي.

شيفرة الملف الرئيسي الذي أسميته mainfile.html
<HTML>
<HEAD>
<TITLE>Main File<‎/TITLE>
<‎/HEAD>
‎<FRAMESET ROWS="60,*">‎
‎<FRAME SRC="header.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎
‎<FRAMESET COLS="120,*">‎
‎<FRAME SRC="lftframe.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎
‎<FRAME SRC="htmintro.html">‎
<‎/FRAMESET>
<‎/FRAMESET>
<‎/HTML>

شيفرة الملف العلوي (الترويسة) الذي أسميته header.html
<HTML>
<HEAD>
<TITLE>Header File<‎/TITLE>
<‎/HEAD>
‎<BODY bgcolor="#BCD8EB">‎
<CENTER><IMG SRC="frambnr.jpg"><‎/CENTER>
<‎/BODY>
<‎/HTML>

شيفرة الملف الذي يحتوي على الأزرار والوصلات التشعبية والذي أسميته lftframe.html
<HTML>
<HEAD>
<TITLE>Buttons<‎/TITLE>
<‎/HEAD>
‎<BODY BGCOLOR="#BCD8EB">‎
‎<A HREF="htutor01.html"><IMG SRC="lesson1.jpg"></A><BR>‎
‎<A HREF="htutor02.html"><IMG SRC="lesson2.jpg"></A><BR>‎
‎<A HREF="htutor03.html"><IMG SRC="lesson3.jpg"></A><BR>‎
‎<A HREF="htutor04.html"><IMG SRC="lesson4.jpg"></A><BR>‎
‎<A HREF="htutor05.html"><IMG SRC="lesson5.jpg"></A><BR>‎
<‎/BODY>
<‎/HTML>

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


وهنا يأتي دور الخاصية NAME والتي نقوم من خلالها بتعيين اسم ما للإطار -أي الإطار الذي نرغب أن تظهر به الملفات عندما نقوم بالنقر على الوصلات التشعبية- حيث سيتم فيما بعد استخدام هذا الإسم من أجل استهداف هذا الإطار من قبل الوصلات التشعبية في الإطارات الأخرى أو حتى في الصفحات الأخرى.
وبالمناسبة فقد حان الآن ذكر خاصية جديدة من خصائص الوسم <A> ... <‎/A> ( وهو وسم الوصلات التشعبية كما عرفت في الدرس السادس.) وهذه الخاصية هي TARGET. (انتظر قليلاً وستعرف لماذا)
دعنا نقوم بترتيب الأمور بصورة أكثر وضوحاً وتسلسلاً:
برأيك بأي من الملفات الثلاثة السابقة يجب أن نضع الخاصية NAME? سؤال سخيف! أليس كذلك؟ طالما أنها إحدى خصائص الوسم <FRAME> إذن من البديهي جداً أن ترد معه. وبما أن هذا الوسم يوضع فقط في الملف الرئيسي إذن هي توضع في الملف الرئيسي... هذه أصبحت واضحة‍! لكن مع أي وسم من وسوم <FRAME> الموجودة في الملف الرئيسي؟؟ بالطبع ليس مع الوسم الخاص بتعريف ملف الترويسة فهذا لا نريد استهدافه، وكذلك الأمر بالنسبة لتعريف ملف الوصلات التشعبية الذي لا نريد استهدافه أيضاً. إذن لم يبق لدينا إلا الوسم الخاص بتعريف الإطار العام الذي ستظهر به الملفات. وبافتراض أننا نريد تسمية هذا الإطار بالاسم mainwindow. وهو اسم اختلقته أنا حسب ما أريد وأستطيع إعطاءه أي اسم آخر أريده طالما أنه يبدأ بحرف أبحدي أو رقم وليس برمز خاص مثل /؟#$%^ (عدا الرمز _ الذي يستخدم في حالات خاصة سأذكرها لك لاحقاً في هذا الدرس).

إذن تصبح شيفرة الملف الأساسي هي:
<HTML>
<HEAD>
<TITLE>Main File<‎/TITLE>
<‎/HEAD>
‎<FRAMESET ROWS="60,*">‎
‎<FRAME SRC="header.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎
‎<FRAMESET COLS="120,*">‎
‎<FRAME SRC="lftframe.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1">‎
‎<FRAME SRC="htmintro.html" NAME="mainwindow">‎
<‎/FRAMESET>
<‎/FRAMESET>
<‎/HTML>
وبهذا نكون قد إنتهينا من إعداد الملف الرئيسي ليكون ملف إطارات فعال مائة بالمائة. ونستطيع الآن استهداف ذلك الإطار من أي مكان باستخدام الإسم الذي عرفناه به.
المرحلة الثانية هي تعريف الوصلات التشعبية بطريقة تجعل الملفات المتعلقة بهذه الوصلات تظهر في الإطار المحدد. وهنا يأتي دور الخاصية TARGET سالفة الذكر لكي تقوم على الرحب والسعة بأداء هذه الوظيفة. وسوف نعمل الآن على الملف المسمى lftframe.html. أليس هو الملف الذي يحتوي على الوصلات التشعبية؟! ليصبح بالشكل التالي:
<HTML>
<HEAD>
<TITLE>Buttons<‎/TITLE>
<‎/HEAD>
‎<BODY BGCOLOR="#BCD8EB">‎
‎<A HREF="htutor01.html" TARGET="mainwindow"><IMG SRC="lesson1.jpg"></A><BR>‎
‎<A HREF="htutor02.html" TARGET="mainwindow"><IMG SRC="lesson2.jpg"></A><BR>‎
‎<A HREF="htutor03.html" TARGET="mainwindow"><IMG SRC="lesson3.jpg"></A><BR>‎
‎<A HREF="htutor04.html" TARGET="mainwindow"><IMG SRC="lesson4.jpg"></A><BR>‎
‎<A HREF="htutor05.html" TARGET="mainwindow"><IMG SRC="lesson5.jpg"></A><BR>‎
<‎/BODY>
<‎/HTML>
لقد نجحنا... أليس كذلك
الحقيقة أننا لم ننجح بصورة مطلقة، بل إلى حد ما... وأعتذر لك لأني نغصت عليك هذا النجاح. لكن طالما أننا نريد الوصول إلى أفضل مستوى وأعلى أداء لموقعنا فيجب علينا دائماً تطبيق القواعد التي تضمن ذلك. ولكي أوضح لك السبب الذي يجعلني أتكلم كالفلاسفة سوف أطلب منك العودة إلى الصفحة الرئيسية للإطارات بعد أن قمت بإضافة وصلات تشعبية إضافية لها، واحدة خاصة بالإنتقال إلى ... صفحة الإطارات نفسها، أي إعادة تحميل الصفحة على الشاشة. والثانية للإنتقال من طريقة العرض بالإطارات إلى العرض بدون إطارات. لذلك أنقر هنا رجاءً. وقم بتجربة النقر على هذه الوصلات الجديدة.
مشكلة جديدة، أليس كذلك؟ ففي الحالة الأولى تم تحميل الصفحة داخل الإطار نفسه، وبذلك أصبحت الصفحات متداخلة في ما بينها، وكذلك الأمر في الحالة الثانية. أي أننا بإختصار لا نستطيع إبقاء الوسم بالشكل:
<A HREF="filename.html" TARGET="mainwindow"> ... </A>
كما لا نستطيع كتابته بالشكل التالي:
<A HREF="filename.html"> ... </A>
وطبعاً أنت تعرف السبب في كلتا الحالتين.
لقد وقعنا في مصيدة الإطارات. إذن فما الحل؟ الحل توفره لغة HTML نفسها من خلال وضع قيمة معينة للخاصية TARGET وهي "‎_top" لتخبر المتصفح أن يقوم بتحميل الصفحة في المستوى الأعلى من الشاشة. أي ان يقوم بإلغاء أي إطارات أو صفحات عادية موجودة أصلاً وأن يحمل الصفحة الجديدة مكانها. وهذه القيمة معرفة بشكل مسبق في لغة HTML وليست من عندي كما في الإسم mainwindow.
والحقيقة أنه يوجد ثلاث قيم أخرى بالإضافة إلى ‎_top معرفة بشكل مسبق في لغة HTML لتحدد موقع ظهور الصفحة المعنية. ويجب أن تتذكر دائماً أنها تكتب بالأحرف الصغيرة lowercase. فإذا كتبت بالأحرف الكبيرة فلن تحصل على النتيجة التي تريدها لأنها ستعتبر في هذه الحالة وكأنها أسماء عادية. وهذه هي القيم الأربعة:
 
‎_top
تحمل الصفحة في أعلى مستوى للشاشة أي تلغي الإطارات الموجودة أصلاً

‎_blank
تقوم بفتح شاشة جديدة وفارغة للمتصفح وتعرض الصفحة المحملة فيه

‎_self
(الحالة الإفتراضية) تقوم بتحميل الصفحة في نفس الإطار الذي توجد به الوصلة التشعبية التي تم النقر عليها، (وبالطبع هذا ما يحدث دائما دون وجود هذه القيمة، أليس كذلك؟)

‎_parent
تقوم بعرض الإطار المحمل مكان الإطار الأب،
وتأمل الشكل التالي الذي يمثل صفحة إطارات مركبة.
أنت تعرف أننا نحتاج إلى ثلاثة أزواج من الوسوم <FRAMESET> ... <‎/FRAMESET> لإخراج مثل هذه الصفحة.
  • الأول لتحديد الصفحة ككل
  • الثاني لتحديد الإطارين 2 و 3 المتفرعين من الصفحة الرئيسية
  • الثالث لتحديد الإطارين 4 و 5 المتفرعين من الإطار 3
وبالتالي نقول أن الصفحة الرئيسية هي الأب (أو الأم إذا أردت) للإطارين 2 و 3 وأن الإطار 3 هو الأب للإطارين 4 و 5. وعلى سبيل المثال إذا احتوى الإطار 5 أو 4 على وصلة تشعبية هدفها القيمة ‎_parent لتم تحميلها مكان الإطار 3... وهكذا الأمر بالنسبة للإطارين 1 و 2 بمقابل الصفحة الرئيسية.
وللتمييز بين هذه القيمة والقيمة ‎_top فإن القيمة ‎_top تقوم بالتحميل في المستوى الأول (الأعلى) دائماً وبغض النظر عن موقع الوصلة التشعبية.
ونعود الآن إلى صفحتنا. فلو أضفنا السطرين التاليين إلى ملف الوصلات التشعبية:
‎<A HREF="mainfile.html" TARGET="_top"><IMG SRC="mainpage.jpg"></A><BR>‎
‎<A HREF="htmintro.html" TARGET="_top"><IMG SRC="noframes.jpg"></A><BR>‎
لحصلنا على النتيجة المرجوة. جرّب ذلك وبذلك تستطيع أن تقول وبكل ثقة
نجحنا بجدارة 

الموضوع التالي
« الموضوع السابق
الموضوع السابق
الموضوع التالي »