وسم الإطارات frameset في HTML

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

دعني اُخبرك بها يمكن ان تتكون الإطارات من ثلاث اقسام او اكثر او اقل دون حديث كتير, هيا بنا نقوم بإنشاء امثلة وكما تعرف التكرار يعلم الشخص الذي لا يريد التعلم, لكن في البداية يجب عليك تحضير ثلاث او اربع ملفات بسيطة في سطح المكتب لكي نستخدمها في تطبيق الأمثلة القادمة, قمنا بإنشاء ثلاث ملفات بإسم

NusurTech.html,||| NusurTech1.html,||| NusurTech2.html
.

ستكون بين تلك الملفات ملف رئيسي الذي سيظم كافة الإطارات و الملفات, وهو بالمناسبة ملف ذو حالة خاصة حيث نقوم باستخدام الوسم FRAMESET بدل body وسم الإطارات frameset في HTML وبذلك الشكل سيكون هو جسم الصفحة ويمكن كتابة اي وسوم اخرى مثل ادراج الجداول و الصور ...الخ, وسيكون الملف الرئيسي بهذا الشكل من الداخل.

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<frameset>
    <!-- html هنا يتم ادراج اي  وسم من وسوم-->
</frameset>
</html>

الخصائص المتعلقة وسم الإطارات frameset في HTML

يُستخدم الوسم (Tag) frameset لتحديد تخطيط الإطارات (Frameset layout) في صفحة الويب. يتم استخدامه بالتزامن مع الوسم frame لتعريف الإطارات الفرعية (Subframes) داخل الصفحة. إليك بعض الخصائص المتعلقة وسم الإطارات frameset في HTML:

خاصية cols في وسم الإطارات frameset في HTML

cols: تحدد عرض الإطارات الأفقية في الصفحة. تمامًا مثل الخاصية rows، يتم تحديد العرض لكل إطار عن طريق تحديد قيمة العرض بكتابة الأرقام والنسب المئوية في سلسلة نصية واحدة.

تُعرِّف هذه الخاصية عدد احجام الاطارات العمودية للصفحة وتحدد الاحجام بطريقتين, الطريقة المباشرة و الطريقة النسبية, او الأثنان معاً و الشكل الرئيسي لها بالشكل

<frameset cols="60%,40%"></frameset>
.

لقد قمنا بإنشاء اثنين من الإطارات, الإطار الأول يحتوي على 60% من مساحة الصفحة و الآخر 40% لكن بشكل عمودي لأننا استخدمنا cols وهذا الخاصية تحدد الإطارات عمودية.

مثال

<frameset cols="40%,30%,30%"></frameset>
.

في المثال السابق قمنا بإنشاء ثلاث اطارات حيث يحتوي الإطار الأول من حجم الصفحة 40% و الإثنين الباقيات كلاً منهم 30% ويمكن تحديد حجم الإطار داخل الصفحة بالبكسل بدل النسبة المئوية.

مثال 2

<frameset cols="25%, 75%">
   <!-- الإطار الأول -->
   <frame src="frame1.html">

   <!-- الإطار الثاني -->
   <frame src="frame2.html">
</frameset>

في المثال أعلاه، يتم تحديد عرض الإطار الأول بنسبة 25% من عرض الصفحة، وعرض الإطار الثاني بنسبة 75%.

خاصية rows في وسم الإطارات frameset في HTML

rows: تحدد ارتفاع الإطارات الرأسية في الصفحة. يجب تحديد الأرتفاع لكل إطار عن طريق تحديد قيمة الطول بكتابة الأرقام والنسب المئوية في سلسلة نصية واحدة.

هذه الخاصية عكس الخاصية السابقة, إذا كانت cols تحدد حجم الإطار عمودية فإن rows تحدد الإطار بشكل افقي الصفوف داخل الصفحة, وذلك بنفس الأسلوب المتبع مع الأعمدة ويمكن تحديد حجم الإطار عن طريق البكسل أو النسبة المئوية, و الصورة العامة لها بالشكل

<frameset rows="60%,40%"></frameset>
.

قمنا بتحديد اطارين افقيين ارتفاع الأول 60 و الثاني 40

مثال

<frameset rows="60%,20%,20%"></frameset>
.

تحدد ثلاث اطارات افقية, بإرتفاع الأول 60% والثاني 20% والثالث 20% وكما يمكن تحديد عدد الاطارات الذي تريده اذا كانت افقية او عمودية, هناك مجموعة من الخصائص المتعلقة بذلك الوسم.

مثال

<frameset rows="20%, 80%">
   <!-- الإطار الأول -->
   <frame src="frame1.html">

   <!-- الإطار الثاني -->
   <frame src="frame2.html">
</frameset>

في المثال أعلاه، يتم تحديد ارتفاع الإطار الأول بنسبة 20% من ارتفاع الصفحة، وارتفاع الإطار الثاني بنسبة 80%.

خاصية frame في وسم الإطارات frameset في HTML

هذا الوسم مرتبط ارتباطاً وثيقاً بالوسوم السابقة وخصائصها المذكورة اعلاه, الآن ما هو عمل هذا الوسم؟ سأُخبرك الآن! كل ما قمنا به الى الآن هو تعريف مجموعة من الإطارات, لكن لم نحدد ما هي هذه الإطارات ولا محتوياتها ولا مصادرها, تماماً كما نقوم بتعريف صفحات الويب الإعتيادية وخصائصها في الوسم body, دون أن يعني ذلك تحديد محتويات هذه الصفحات فإذا اردنا فيما بعد ادراج صورة مثلاً نستخدم الوسم الخاص بإدراج الصور وهو

<img src="NusurTech.png">
.

في حالة الإطارات فإننا نستخدم الوسم frame وهو وسم منفرد (سنجل) مثل الوسم الخاص بإدراج الصور, ثم بعد ذلك تقوم بتحديد مصدر وخصائص كل ملف نريد اظهاره داخل احد الاطارات ويتم استخدام هذا الوسم عدة مرات بنفس عدد الاطارات المذكورة داخل الوسم الرئيسي لإدراج الإطارات وهو frameset وسوف نقوم مباشرتاً بإستخدام الخاصية src الذي تقوم بتحديد مسار الملف او مصدر الملف.

مثال

<frameset cols="60%, 40%">
    <frame src="NusurTech1.html">
</frameset>

في ذلك المثال قمنا بجلب الملف الأول الذي قمنا بإنشاءه اول المقال باسم NusurTech1.html من خلال الخاصية src الذي تحدد مسار الملف داخلها و الأكود الموجودة داخل الملف الفرعي الذي هو NusurTech1.html بذلك الشكل.

الآن سنقوم بجلب الملف الآخر الذي هو NusurTech2.html بنفس الطريقة وسيكون السورس كود داخل الملف الرئيسي بذلك الشكل

<frameset cols="60%, 40%">
    <frame src="NusurTech1.html">
    <frame src="NusurTech2.html">
</frameset>

وكما يمكن اضافة جداول وصور ......الخ, داخل الملفات الفرعية.

<frameset cols="200, 400, *">
    <frame src="NusurTech1.html">
    <frame src="NusurTech2.html">
    <frame src="NusurTech3.html">
</frameset>

في المثال السابق قمنا بإنشاء ثلاث اطارات, الإطار الأول يحتوي على مساحة من الصفحة 200px و الثاني 400px و الثالث يأخذ باقي الصفحة من خلال تلك العلامة, وقمنا بجلب ثلاث ملفات داخل الاطارات وهذا يعني ان كل اطار سيكون داخله ملف.

مثال

<frameset rows="40%, 40% 20%">
    <frame src="NusurTech1.html">
    <frame src="NusurTech2.html">
    <frame src="NusurTech3.html">
</frameset>

في ذلك المثال قمنا بتحديد الخاصية rows بدل cols ولا يختلف الحديث عن الأمثلة السابقة.

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

مثال

<frameset cols="40%, 60%">
    <frame src="NusurTech1.html">
    <frame src="NusurTech.png">
</frameset>

مثال

<frameset rows="100, *">
    <frame src="NusurTech1.html">
    <frame src="NusurTech2.html">
</frameset>

بما ان الصفحة تحتوي على صفين نقوم بتعريفهما اولاً حسب الإرتفاعات المرغوب بها, دعنا نعقد الامور اكثر, سنقوم بتقسيم الصف الثاني الى عمودين, وهنا يعتبر بمفهوم لغة html وكأنه صفحة اطارات جديدة لذلك لا نحتاج لتعريفه كصف وبدلاً من ذلك نعاود استخدام تعريف الصفحات frameset مره اخرى.

وسيكون السورس كود بذلك الشكل مع إضافة وسم ادراج الإطارات مرة اخرى داخل الوسم الأول

<frameset rows="100, *">
    <frame src="NusurTech1.html">
    <frameset></frameset>
</frameset>

وبما اننا نريد الصف الثاني او الإطار الثاني مقسم الى عمودين اذاً بقي علينا اضافة تعريف لهذه الأعمدة وبذلك تكون الشيفرة بذلك الشكل

<frameset rows="100, *">
    <frame src="NusurTech1.html">
    <frameset cols="50%, *">
        <frame src="NusurTech2.html">
        <frame src="NusurTech3.html"></frame>
        </frame>
    </frameset>
</frameset>

مثال

<frameset cols="150, * , 150">
    <frame src="NusurTech1.html">
    <frame src="NusurTech2.html">
    <frame src="NusurTech3.html">
</frameset>

في المثال السابق قمنا بإنشاء ثلاث اعمدة طبعاً يمكن اختيار الأحجام, لا اهمية للأحجام المذكورة فأنا اخترتها حسب رغبتي, تسطتيع انت اختيار الأحجام الذي تريدها .

دعونا الآن نقوم بتقسيم العمود الأوسط الى صفين اذاً نستبدل تعريفه بتعريف آخر لصفحة مكونة من صفين وسيكون السورس كود بذلك الشكل

<frameset cols="100, * , 100">
    <frame src="NusurTech1.html">
        <frameset rows="80, *">
            <frame src="NusurTech2.html">
            <frame src="NusurTech3.html">
        </frameset>
        <frame src="NusurTech3.html">
</frameset>

إختبار للجميع

قم بإنشاء ثلاث اطارات ويكون الأوسط صف و الآخرين اعمدة وقم ايضاًً بكتابة اكواد html الذي تعرفنا عليها في الدروس السابقة في الملفات الفرعية يكون في العمود الأيمن تعريف عن صاحب السورس كود + صور له و العمود الأيسر نص بسيط لما تعرفه عن html, الصف الأوسط صورة بحجم صغير على اليمن و لوغو على اليسار, بالتوفيق للجميع.

نسور التقنية Nusur Tech

وسم الإطارات frameset في HTML