الدرس التاسع
الإطارات (1)
أهلاً وسهلاً بك إلى الدرس التاسع من دروس
HTML.
في هذا الدرس والدرسين التاليين سوف نقوم بالتعرف على الإطارات
Frames
وطريقة عرض صفحات الويب باستخدامها…
فهل تعرف ما هي الإطارات؟ حسنا، سأوضحها لك…
هل سبق لك وأن زرت إحدى الصفحات لتشاهد أنها مقسمة إلى عدة أقسام بحيث
يظهر في كل منها صفحة مستقلة، وتبدو بصورة منفصلة عن الأقسام الأخرى. وربما
تكون قد قمت بالنقر على إحدى الوصلات التشعبية الموجودة في أحد الأقسام
لتظهر الصفحة المتعلقة بها في القسم الآخر.
إذا كنت قد شاهدت مثل هذه الصفحات فهذا يعني أن الإطارات مألوفة لديك وإلا قم بالنقر
هنا
لتشاهد مثالاً على صفحة ذات إطارات (ولا تنسى العودة لكي تتابع الدرس معا).
كما شاهدت، فإن الصفحة مكونة من ثلاثة أقسام: علوي وأيسر وأيمن… والحقيقة أن كل قسم منها هو عبارة عن ملف
Html
كامل ومستقل بحد ذاته. وهي مجرد صفحات عادية لا تختلف أبداً عن تلك التي
تعلمت إنشاءها في الدروس السابقة، ولا علاقة لكل منها بالصفحات الأخرى من
حيث التركيب والتعريف.
أما كيف تم جمعها معا لتظهر بالشكل الذي شاهدته؟ فهنا بيت القصيد.
فبالإضافة إلى الصفحات والملفات الإعتيادية يوجد دائماً ملف أساسي يتم
إنشاؤه خصيصا لتعريف صفحة الإطارات وتجميعها وتحديد خصائصها. أي أن
المعادلة تتلخص بـِ:
مكونات صفحة الإطارات = عدد ملفات الصفحة نفسها + صفحة الملف الأساسي الذي يجمعها.
أي أنني في المثال السابق إحتجت فعلياً إلى أربعة ملفات لتكوين الصفحة.
وقبل أن نبدأ… لنقم بالتحضير للأمثلة التي سترد في هذا الدرس. لذلك قم
بإنشاء ثلاثة أو أربعة ملفات بسيطة لكي تستخدمها في تطبيق الأمثلة أو
استخدم ملفاتك القديمة التي قمت بالتدرب عليها في الدروس السابقة. أنا قمت
بإنشاء ملفات على النمط التالي (وهي التي استخدمتها في المثال) وأسميتها
frame1.html, frame2.html, frame3.html
Frame1</TITLE><br>
</HEAD><br>
<body><br>
Frame 1<br>
</BODY><br>
</HTML><br>
</font></p>
<p dir="RTL" align="RIGHT">
ونبدأ الآن بتعريف الملف الرئيسي الذي سيضم كافة
الإطارات والملفات. وهو بالمناسبة ملف ذو حالة خاصة حيث نقوم باستخدام الوسوم
</p>
<p dir="LTR" align="CENTER">
<font size="4" face="Times New Roman">
<frameset> ... </FRAMESET>
</font></p>
<p dir="RTL" align="RIGHT">
بدلاً من الوسوم
<font size="4" face="Times New Roman"><body> ... </BODY>
</font></p>
<p dir="RTL" align="center">
((إذن الملف الرئيسي للإطارات لا يتضمن تعريفا باستخدام
<font size="4" face="Times New Roman">BODY</font> ))
</p>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<html><br>
<head><br>
<title>Master File</TITLE><br>
</HEAD><br> <br>
<frameset><br>
</FRAMESET><br> <br>
</HTML><br>
</font></p>
<p dir="RTL" align="RIGHT">
نأتي الآن إلى الخصائص: والخاصية الأولى التي تستخدم مع هذه الوسوم هي
<font size="4" face="Times New Roman">COLS</font>
وهي تعرّف عدد وأحجام الإطارات العمودية للصفحة. وتُحدد الأحجام بطريقتين
(هل عرفتهما؟) نعم… إنهما الطريقة المباشرة والطريقة النسبية...أو كلاهما
معا.
</p>
<p dir="RTL" align="RIGHT">
والآن إليك هذه الأمثلة التي توضح مفهوم الأعمدة... وألفت نظرك إلى أن
قيامك بالنقر على الشيفرة لكل مثال سيؤدي بك إلى مشاهدة هذا المثال بصورة
عملية
<u><b>لكن إنتبه! فهذه الشيفرة غير مكتملة وكتابتها بهذا الشكل فقط لن يؤدي إلى أي نتيجة ولا إلى ظهور أي إطارات
</b></u>
حيث ينقصها وسوم أخرى خاصة بمصدر الملفات الظاهرة داخل الإطارات، وقد قمت
بإكمالها لغرض توضيح النتيجة لك فقط. لذلك أرجو أن تكتفي الآن بمعاينة كل
شيفرة ونتيجتها إلى أن أقوم بسرد باقي الخصائص المهمة لاحقاً.
</p>
<center>
<table dir="LTR" border="1" cellpadding="5" width="80%">
<tbody>
<tr>
<td>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<nobr><frameset COLS="50%,50%"></nobr><br>
</FRAMESET><br>
<a href="http://www.khayma.com/hpinarabic/examples/master_1.html" target="_blank"> * </a>
</font></p>
</td>
<td>
<p dir="RTL" align="RIGHT">
<font size="4">يحدد إطارين عموديين حجم كل منهما 50% من حجم الشاشة
</font></p>
</td>
</tr>
<tr>
<td>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<nobr><frameset COLS="20%,50%,30%"></nobr><br>
</FRAMESET><br>
<a href="http://www.khayma.com/hpinarabic/examples/master_2.html" target="_blank"> * </a>
</font></p>
</td>
<td>
<p dir="RTL" align="RIGHT">
<font size="4">
يحدد ثلاثة إطارات أحجامها 20% و 50% و 30% على التوالي من حجم الشاشة
</font></p>
</td>
</tr>
<tr>
<td>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<nobr><frameset COLS="200,300,*"></nobr><br>
</FRAMESET><br>
<a href="http://www.khayma.com/hpinarabic/examples/master_3.html" target="_blank"> * </a>
</font></p>
</td>
<td>
<p dir="RTL" align="RIGHT">
<font size="4">
يحدد ثلاثة إطارات عمودية الأول حجمه 200 بيكسل، والثاني 300 بيكسل، <br>
أما الثالث * أي انه غير محدد بحجم معين ولكنه سيكون بالحجم المتبقي من
الشاشة (طالما أننا لا نعرف استبانة الشاشة التي يستخدمها زائر الموقع)
</font></p>
</td>
</tr>
<tr><td><p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<nobr><frameset COLS="200,*,15%,20%"></nobr><br>
</FRAMESET><br>
<a href="http://www.khayma.com/hpinarabic/examples/master_4.html" target="_blank"> * </a>
</font></p>
</td>
<td>
<p dir="RTL" align="RIGHT">
<font size="4">
يحدد أربعة إطارات حجم الأول هو 200 بيكسل، والثالث 15% من حجم الشاشة،
والرابع 20% من حجم الشاشة أما الثاني فسيكون حجمه بما تبقى من الشاشة.
</font></p>
</td>
</tr>
<tr>
<td>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<nobr><frameset COLS="150,*,2*"></nobr><br>
</FRAMESET><br> <br>
<a href="http://www.khayma.com/hpinarabic/examples/master_5.html" target="_blank"> * </a>
</font></p>
</td>
<td>
<p dir="RTL" align="RIGHT">
<font size="4">
يحدد ثلاثة إطارات الأول حجمه 150 بيكسل.... أما المساحة المتبقية فتقسم
على أساس أن الإطار الثالث حجمه هو ضعفي (*2) حجم الإطار الثاني (*)
</font></p>
</td>
</tr>
</tbody></table>
</center>
<p dir="RTL" align="RIGHT">
أما الخاصية الثانية فهي
<font size="4" face="Times New Roman">ROWS</font>
وأعتقد أنك استنجت طبيعة عملها. نعم هي تحدد عدد وحجم الإطارات الأفقية
(الصفوف) داخل الصفحة. وذلك بنفس الأسلوب المتبع مع الأعمدة، أي إما
باستخدام الطريقة النسبية أو المطلقة. وسأقوم بسرد بعض الأمثلة لتوضيحها
(وأذكرك ثانية أن هذه الأمثلة غير مكتملة):
</p>
<center>
<table border="1" width="80%">
<tbody>
<tr>
<td><p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<nobr><frameset ROWS="50%,50%"></nobr><br>
</FRAMESET><br>
<a href="http://www.khayma.com/hpinarabic/examples/master_6.html" target="_blank"> * </a>
</font></p>
</td>
<td>
<p dir="RTL" align="RIGHT">
<font size="4">
يحدد إطارين أفقيين ارتفاع كل منهما 50% من ارتفاع الشاشة
</font></p>
</td>
</tr>
<tr>
<td>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<nobr><frameset ROWS="20%,50%,30%"></nobr><br>
</FRAMESET><br>
<a href="http://www.khayma.com/hpinarabic/examples/master_7.html" target="_blank"> * </a>
</font></p>
</td>
<td>
<p dir="RTL" align="RIGHT">
<font size="4">
يحدد ثلاثة إطارات أفقية ارتفاعاتها 20% و 50% و 30% على التوالي من ارتفاع الشاشة
</font></p>
</td>
</tr>
<tr>
<td>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<nobr><frameset ROWS="50,120,*"></nobr><br>
</FRAMESET><br>
<a href="http://www.khayma.com/hpinarabic/examples/master_8.html" target="_blank"> * </a>
</font></p>
</td>
<td>
<p dir="RTL" align="RIGHT">
<font size="4">يحدد ثلاثة إطارات أفقية الأول ارتفاعه 50 بيكسل، والثاني 120 بيكسل، والثالث سيكون بالإرتفاع المتبقي من الشاشة
</font></p>
</td>
</tr>
<tr><td><p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<nobr><frameset ROWS="50,*,15%,20%"></nobr><br>
</FRAMESET><br>
<a href="http://www.khayma.com/hpinarabic/examples/master_9.html" target="_blank"> * </a>
</font></p>
</td>
<td>
<p dir="RTL" align="RIGHT">
<font size="4">يحدد أربعة إطارات أفقية ارتفاع الأول هو 50 بيكسل،
والثالث 15% من ارتفاع الشاشة، والرابع 20% من ارتفاع الشاشة أما الثاني
فسيكون ارتفاعه بما تبقى من ارتفاع الشاشة.
</font></p>
</td>
</tr>
<tr>
<td>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<nobr><frameset COLS="*,2*"></nobr><br>
</FRAMESET><br>
<a href="http://www.khayma.com/hpinarabic/examples/master_0.html" target="_blank"> * </a>
</font></p>
</td>
<td>
<p dir="RTL" align="RIGHT">
<font size="4">
يحدد إطارين الثاني ارتفاعه ضعفي ارتفاع الأول
</font></p>
</td>
</tr>
</tbody></table>
</center>
<p dir="RTL" align="RIGHT">
لم ننته بعد من ذكر كل الخصائص المتعلقة بالوسوم
<font size="4" face="Times New Roman"><frameset></font>
فلا زال هناك الكثير. ولكن من الضروري أن نقوم الآن بالإنتقال إلى وسم آخر
للإطارات لأنه مرتبط إرتباطاً وثيقاً بالوسوم السابقة وخصائصها المذكورة
أعلاه، وهي
<font size="4" face="Times New Roman"><frame></font>
فما هو عمل هذا الوسم؟
</p>
<p dir="RTL" align="RIGHT">
حسنا، كل ما قمنا به حتى الآن هو تعريف مجموعة
من الإطارات وخصائصها (فقط تعريف الإطارات) لكن لم نحدد ماهية هذه الإطارات
ولا محتوياتها ولا مصادرها. تماما كما نقوم بتعريف صفحات الويب الإعتيادية
وخصائصها في الوسم
<font size="4" face="Times New Roman"><body></font>
دون أن يعني ذلك تحديد محتويات هذه الصفحات. فإذا أردنا فيما بعد إدراج صورة مثلاً نستخدم الوسم الخاص بذلك وهو
<font size="4" face="Times New Roman">
<img SRC="imagname.ext"></font>
</p>
<p dir="RTL" align="RIGHT">
وفي حالة الإطارات فإننا نستخدم الوسم
<font size="4" face="Times New Roman"><frame></font>
وهو وسم مفرد أي ليس له وسم نهاية تماماً مثل
<font size="4" face="Times New Roman"><img></font>.
وفيه نقوم بتحديد مصدر وخصائص كل ملف نريد إظهاره داخل أحد الإطارات. ويتم استخدام هذا الوسم مرات بنفس عدد الإطارات المذكورة داخل
<font size="4" face="Times New Roman"><frameset>.</font>
وسوف أقوم مباشرة باستخدام الخاصية
<font size="4" face="Times New Roman">SRC</font>
لتحديد مصدر الملف.
</p>
<p dir="RTL" align="RIGHT">
دعنا نقوم الآن بإتمام الشيفرة لبعض الأمثلة المذكورة أعلاه. ونبدأ بالمثال الأول:
</p>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<frameset COLS="50%,50%"><br>
<frame SRC="frame1.html"><br>
<frame SRC="frame2.html"><br>
</FRAMESET><br>
</font></p>
<p dir="RTL" align="center">
الآن ... والآن فقط أصبح لديك صفحة إطارات محترمة.</p>
<p dir="RTL" align="RIGHT">
مثال آخر:</p>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<frameset COLS="200,400,*"><br>
<frame SRC="frame1.html"><br>
<frame SRC="frame2.html"><br>
<frame SRC="frame3.html"><br>
</FRAMESET><br>
</font></p>
<p dir="RTL" align="RIGHT">
مثال ثالث:</p>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<frameset ROWS="50,*,15%,20%"><br>
<frame SRC="frame1.html"><br>
<frame SRC="frame2.html"><br>
<frame SRC="frame3.html"><br>
<frame SRC="frame4.html"><br>
</FRAMESET><br>
</font></p>
<p dir="RTL" align="RIGHT">
ورابع:</p>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<frameset COLS="*,2*"><br>
<frame SRC="frame1.html"><br>
<frame SRC="frame2.html"><br>
</FRAMESET><br>
</font></p>
<hr align="CENTER" size="4" width="80%">
<p dir="RTL" align="RIGHT">
وبالإضافة إلى ما ذكر، نستطيع إدراج صورة مباشرةً داخل الإطار وباستخدام
<font size="4" face="Times New Roman"><frame SRC></font>
تماماً كما ندرجها باستخدام
<font size="4" face="Times New Roman"><img SRC></font>
وإليك هذا المثال:
</p>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<frameset COLS="50%,50%"><br>
<frame SRC="frame1.html"><br>
<frame SRC="thedome.jpg"><br>
</FRAMESET><br>
<a href="http://www.khayma.com/hpinarabic/examples/mastimag.html" target="_blank"> * </a>
</font></p>
<hr align="CENTER" size="4" width="80%">
<p>
</p>
<p dir="RTL" align="RIGHT">
والآن لماذا لا نقم معاً بمراجعة الأفكار الأساسية السابقة الذكر وتلخيصها؟ وهذه هي:-
</p>
<center>
<table dir="rtl" border="5" width="80%" bgcolor="#FFFFFF">
<tbody>
<tr>
<td>
<font size="4">
<p dir="RTL" align="RIGHT">
</p>
<ul>
<li>لإدراج صفحة إطارات نحتاج إلى ملف رئيسي يعتبر بمثابة الوعاء الذي سيضم هذه الإطارات.
</li>
<li>الملف الرئيسي هو ملف
<font size="4" face="Times New Roman">HTML</font>
إعتيادي غير أننا نكتب الوسوم
<font size="4" face="Times New Roman"><frameset> ...</FRAMESET></font>
بدلاً من
<font size="4" face="Times New Roman"><body> ...</BODY>.</font>
وبالتالي فهو يحتوي على الخصائص التي نريدها للإطارات وتعريفاتها.
</li>
<li>نستخدم الخصائص
<font size="4" face="Times New Roman">COLS, ROWS</font>
لتحديد عدد الإطارات (صفوفاً كانت أو أعمدة) وأحجامها.
</li>
<li>الملفات الفرعية التي تظهر ضمن الإطارات هي ملفات عادية كالتي
قمنا بإنشائها في الدروس السابقة أو صوراً. ولا تحتوي على أي تنسيق أو وسوم
خاصة.
</li>
<li>نستخدم الوسم
<font size="4" face="Times New Roman"><frame></font>
داخل الملف الرئيسي لمناداة الملفات الفرعية داخل الإطارات، وذلك مع الخاصية
<font size="4" face="Times New Roman">SRC.</font>
بالإضافة إلى استخدامه لتحديد باقي الخصائص .
</li>
</ul>
</font>
</td>
</tr>
</tbody></table>
<br clear="all"></center>
<p dir="RTL" align="RIGHT">
كما نستطيع تمثيل هيكلية الإطارات من خلال الشكل التالي:
</p>
<center>
<img src="http://www.khayma.com/hpinarabic/images/frameset.gif" border="0" height="254" width="304"></center>
<p>
<br>
</p>
<p dir="RTL" align="RIGHT">
هل تأكدت من فهمك لهذه النقاط؟ لنتابع إذن ... <br>
حتى الآن قمنا بتقسيم الصفحة إما لإطارات أفقية أو لإطارات عمودية. لكن
نحتاج لمعرفة كيفية إدراج كلاهما في الصفحة. كما في الأمثلة التالية:
</p>
<p dir="RTL" align="RIGHT">
</p>
<ul>
<li><p dir="RTL" align="right">
صفحة مكونة من صفين، الثاني منهما مقسم بدوره إلى عمودين
<a href="http://www.khayma.com/hpinarabic/examples/master.html" target="_blank"> * </a>
</p>
</li>
<li><p dir="RTL" align="right">
صفحة مكونة من عمودين، الثاني منهما مقسم بدوره إلى صفين
<a href="http://www.khayma.com/hpinarabic/examples/masterc.html" target="_blank"> * </a>
</p>
</li>
</ul>
<p dir="RTL" align="RIGHT">
لنبدأ بالمثال الأول:<br>
بما أن الصفحة تحتوي على صفين نقوم بتعريفهما أولاً حسب الإرتفاعات المرغوب بها:
</p>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<frameset ROWS="100,*"><br>
<frame SRC="frame1.html"><br>
<frame SRC="frame2.html"><br>
</FRAMESET><br> <br>
</font></p>
<p dir="RTL" align="RIGHT">
لكن الصف الثاني مقسم إلى عمودين وهنا يعتبر بمفهوم لغة
<font size="4" face="Times New Roman">HTML</font>
وكأنه صفحة إطارات جديدة لذلك لا نحتاج لتعريفه كصف وبدلاً من ذلك نعاود استخدام تعريف الصفحات! أي
<font size="4" face="Times New Roman"><frameset></font>
مرة أخرى.
</p>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<frameset ROWS="100,*"><br>
<frame SRC="frame1.html"><br> <br>
<frameset><br>
</FRAMESET><br> <br>
</FRAMESET><br> <br>
</font></p>
<p dir="RTL" align="RIGHT">
وبما أن الصف الثاني (أو لنقل الإطار الثاني)
مقسم إلى عمودين، إذن بقي علينا إضافة تعريف لهذه الأعمدة. وبذلك تكون
الشيفرة النهائية كالتالي:
</p>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<frameset ROWS="100,*"><br>
<frame SRC="frame1.html"><br> <br>
<frameset COLS="200,*"><br>
<frame SRC="frame2.html"><br>
<frame SRC="frame3.html"><br>
</FRAMESET><br> <br>
</FRAMESET><br> <br>
</font></p>
<p dir="RTL" align="RIGHT">
ما رأيك أن تحاول كتابة الشيفرة الخاصة بالمثال الثاني، أما إذا أردت إختصار هذه المهمة
<a href="http://www.khayma.com/hpinarabic/examples/framcode.html" target="_blank">فهذه هي</a>
</p>
<hr align="CENTER" size="4" width="80%">
<p dir="RTL" align="right">
لنقم الآن بإدراج مثال آخر وتحليله:
أنقر
<a href="http://www.khayma.com/hpinarabic/examples/masterc2.html" target="_blank">هنا</a>
لمشاهدته ثم عد إلى هنا لنناقشه معاً
</p>
<p dir="RTL" align="RIGHT">
يوجد لدينا ثلاثة أعمدة، أليس كذلك؟ إذن لنقم
بتعريف صفحة إطارات ذات ثلاثة أعمدة (طبعاً لا يوجد أهمية للأحجام
المذكورة، فأنا اخترتها حسب رغبتي وتستطيع أنت اختيار الأحجام التي
تريدها).
</p>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<frameset COLS="100,*,100"><br>
<frame SRC="frame1.html"><br>
<frame SRC="frame2.html"><br>
<frame SRC="frame3.html"><br>
</FRAMESET><br> <br>
</font></p>
<p dir="RTL" align="RIGHT">
العمود الأوسط من هذه الصفحة مقسم إلى صفين، إذن نستبدل تعريفه بتعريف آخر
لصفحة إطارات مكونة من صفين (وهذا هو التعريف بصورة مستقلة)
</p>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<frameset ROWS="80,*"><br>
<frame SRC="frame2.html"><br>
<frame SRC="frame4.html"><br>
</FRAMESET><br> <br>
</font></p>
<p dir="RTL" align="RIGHT">
وبعد دمج الشيفرتين السابقتين معاً نحصل على هذه الشيفرة النهائية:
</p>
<p dir="LTR" align="LEFT">
<font size="2" face="Arial">
<frameset COLS="100,*,100"><br>
<frame SRC="frame1.html"><br> <br>
<frameset ROWS="80,*"><br>
<frame SRC="frame2.html"><br>
<frame SRC="frame4.html"><br>
</FRAMESET><br> <br>
<frame SRC="frame3.html"><br>
</FRAMESET><br> <br>
</font></p>
وصلنا الآن إلى نهاية هذا الدرس. وقد قمنا فيه بمناقشة أساسيات إدراج الإطارات، ولكن بقى هناك الكثير ليقال في هذا المجال</div>
