إن مثل هذه الصفحات تقوم على المعادلة التالية :
مكونات صفحة الإطارات = عدد ملفات الصفحة نفسها + صفحة الملف الأساسي الذي يجمعها.
وقبل أن نبدأ… لنقم بالتحضير للأمثلة التي سترد في هذا الدرس. لذلك قم بإنشاء ثلاثة أو أربعة ملفات بسيطة لكي تستخدمها في تطبيق الأمثلة أو استخدم ملفاتك القديمة التي قمت بالتدرب عليها في الدروس السابقة. أنا قمت بإنشاء ملفـين أسميتها frame2.html, frame1.html وهما على النمط التالي كما تعرف :
|
<HTML> |
<HTML> |
ونبدأ الآن بتعريف الملف الرئيسي الذي سيضم كافة الإطارات والملفات. وهو بالمناسبة ملف ذو حالة خاصة حيث نقوم باستخدام الوسوم <FRAMESET> ... </FRAMESET>
بدلاً من الوسوم <BODY> ... </BODY>:
|
<HTML> |
نستطيع تمثيل هيكلية الإطارات من خلال الشكل التالي:
الخاصية COLS :
الخاصية الأولى التي تستخدم مع هذه الوسوم هي COLS وهي تعرّف عدد وأحجام الإطارات العمودية للصفحة. وتُحدد الأحجام بطريقتين : الطريقة المباشرة والطريقة النسبية...أو كلاهما معا.
|
<FRAMESET COLS="50%,50%"> |
يحدد إطارين عموديين حجم كل منهما 50% من حجم الشاشة |
|
<FRAMESET COLS="20%,50%,30%"> |
يحدد ثلاثة إطارات أحجامها 20% و 50% و 30% على التوالي من حجم الشاشة |
|
<FRAMESET COLS="200,300,*"> |
يحدد ثلاثة إطارات عمودية الأول حجمه 200 بيكسل، والثاني 300 بيكسل، |
|
<FRAMESET COLS="200,*,15%,20%"> |
يحدد أربعة إطارات حجم الأول هو 200 بيكسل، والثالث 15% من حجم الشاشة، والرابع 20% من حجم الشاشة أما الثاني فسيكون حجمه بما تبقى من الشاشة. |
|
<FRAMESET COLS="150,*,2*"> |
يحدد ثلاثة إطارات الأول حجمه 150 بيكسل.... أما المساحة المتبقية فتقسم على أساس أن الإطار الثالث حجمه هو ضعفي (*2) حجم الإطار الثاني (*) |
الخاصية ROWS :
أما الخاصية الثانية فهي ROWS وهي تحدد عدد وحجم الإطارات الأفقية (الصفوف) داخل الصفحة. وذلك بنفس الأسلوب المتبع مع الأعمدة، أي إما باستخدام الطريقة النسبية أو المطلقة.
|
<FRAMESET ROWS="50%,50%"> |
يحدد إطارين أفقيين ارتفاع كل منهما 50% من ارتفاع الشاشة |
|
<FRAMESET ROWS="20%,50%,30%"> |
يحدد ثلاثة إطارات أفقية ارتفاعاتها 20% و 50% و 30% على التوالي من ارتفاع الشاشة |
|
<FRAMESET ROWS="50,120,*"> |
يحدد ثلاثة إطارات أفقية الأول ارتفاعه 50 بيكسل، والثاني 120 بيكسل، والثالث سيكون بالإرتفاع المتبقي من الشاشة |
|
<FRAMESET ROWS="50,*,15%,20%"> |
يحدد أربعة إطارات أفقية ارتفاع الأول هو 50 بيكسل، والثالث 15% من ارتفاع الشاشة، والرابع 20% من ارتفاع الشاشة أما الثاني فسيكون ارتفاعه بما تبقى من ارتفاع الشاشة. |
|
<FRAMESET COLS="*,2*"> |
يحدد إطارين الثاني ارتفاعه ضعفي ارتفاع الأول |
دعنا نقوم الآن بإتمام الشيفرة للمثال المذكورة أعلاه:
|
<FRAMESET COLS="50%,50%"> <FRAME SRC="frame1.html"> </FRAMESET> |
ملاحضات :
- لإدراج صفحة إطارات نحتاج إلى ملف رئيسي يعتبر بمثابة الوعاء الذي سيضم هذه الإطارات.
- الملف الرئيسي هو ملف HTML إعتيادي غير أننا نكتب الوسوم <FRAMESET> ...</FRAMESET> بدلاً من <BODY> ...</BODY>. وبالتالي فهو يحتوي على الخصائص التي نريدها للإطارات وتعريفاتها.
- نستخدم الخصائص COLS, ROWS لتحديد عدد الإطارات (صفوفاً كانت أو أعمدة) وأحجامها.
- الملفات الفرعية التي تظهر ضمن الإطارات هي ملفات عادية كالتي قمنا بإنشائها في الدروس السابقة أو صوراً. ولا تحتوي على أي تنسيق أو وسوم خاصة.
- نستخدم الوسم <FRAME> داخل الملف الرئيسي لمناداة الملفات الفرعية داخل الإطارات، وذلك مع الخاصية SRC. بالإضافة إلى استخدامه لتحديد باقي الخصائص .
تمرين تطبيقي:
حاول أن تنجز صفحة ويب تحتوي على مختلف الوسوم المكتوبة أعلاه مع ملاحظة الفروق عند تغير قيم هذه الوسوم.