الدروس

  • إطارات الـ HTML

    سوف نقوم بالتعرف على الإطارات Frames وطريقة عرض صفحات الويب باستخدامها …

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

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

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

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

    مع الإطارات، يمكنك عرض عدة صفحات في نفس نافذة المتصفّح.


    أمثلة جربه بنفسك - أمثلة

    إطارات عمودية
    كيفية عمل إطارات عمودية مع ثلاثة مستندات مختلفة.

    إطارات أفقية
    كيفية عمل إطارات أفقية مع ثلاثة مستندات مختلفة.

    (يمكنك الحصول على مزيد من الأمثلة في أسفل هذه الصفحة).


    إطارات الـ HTML

    مع الإطارات، يمكنك أن تقوم بعرض أكثر من مستند HTML في نفس نافذة المتصفح. كل مستند HTML يسمى إطار (frame) ، وكل إطار مستقل عن الآخر.

    سلبيات استخدام الإطارات:

    • مطور الويب يجب أن يتابع ملفات HTML أكثر
    • من الصعب طباعة الصفحة بأكملها

    عنصر الإطارات (frameset) في الـ HTML

    العنصر frameset يحمل اثنان أو أكثر من عناصر الإطار frame. كل عنصر إطار يحمل مستند منفصل.

    العنصر frameset يعيّن فقط كم عدد الأعمدة أو الصفوف التي ستكون فيه.


    عنصر الإطار frame في الـ HTML

    الوسم <frame> يعرف أحد النوافذ أو الإطارات (frame) المعينة في frameset.

    في المثال بالأسفل لدينا frameset بعمودين.

    العمود الأول بقيمة 25% عرضاً من نافذة المتصفح. والثاني بقيمة 75% عرضاً من نافذة المتصفح. الملف "frame_a.htm" هو الملف المحدد للإطار والعمود الأول، بينما العمود الثاني فتم تحديد الملف "frame_b.htm" له:

    كود HTML:
    <frameset cols="25%,75%">
       <frame src="frame_a.htm" />
       <frame src="frame_b.htm" />
    </frameset>

    ملاحظة: حجم أعمدة الإطارات يمكن أن يكون بالبكسل أيضاً ("cols="200,500)، كما يمكن أن تكون قيمة أحد هذه الأعمدة قيمة المساحة المتبقية، بوضع علامة النجمة * ("*,cols="25%).



    ملاحظات أساسية - معلومات مفيدة

    معلومة: إذا كان للإطار حدود مرئية، يمكن للمستخدم أن يقوم بإعادة تحجيمها عن طريق سحب هذه الحدود. ولمنع المستخدم من ذلك، يمكنك إضافة "noresize="noresize إلى الوسم <frame>.

    ملاحظة: أضف الوسم <noframes> للمتصفحات التي لا تدعم الإطارات.

    هام: لا يمكنك استخدام الوسوم <body></body> مع الوسوم <frameset></frameset> ! مع ذلك، فأنت عندما تقوم بإضافة الوسم <noframes> محتوياً على بعض النصوص للمتصفحات التي لا تدعم الإطارات سيتوجب عليك تطويق النص بالوسوم <body></body> ! انظر كيف ذلك في المثال الأول بالأسفل.


    أمثلة المزيد من الأمثلة

    كيفية استخدام الوسم <noframes>
    كيفية استخدام الوسم <noframes> (للمتصفحات التي لا تدعم الإطارات).

    الإطارات المتداخلة
    كيفية عمل إطارات لثلاث مستندات، ودمجها في صفوف وأعمدة.

    إطارات مع "noresize="noresize
    كيفية استخدام الخاصية noresize. لاحظ عندما تحاول تحريك مؤشر الفأرة عليهم بأنك لا تستطيع سحب الحدود.

    إطارات الملاحة
    كيفية عمل إطارات الملاحة. إطارات الملاحة تحتوي على قائمة من الوصلات وإطار آخر هو الهدف، حيث تقوم بفتح الوصلات في الإطار الثاني (الهدف). الملف المسمى "tryhtml_contents.htm" يحتوي ثلاث وصلات. وكود المصدر للوصلات هو:

    كود HTML:
    <a href ="frame_a.htm" target ="showframe">Frame a</a>
    <a href ="frame_b.htm" target ="showframe">Frame b</a>
    <a href ="frame_c.htm" target ="showframe">Frame c</a>
    بينما الإطار الثاني سيقوم بعرض وصلات الصفحات.

    الإطار المضمن
    كيفية عمل الإطار المضمن (وهو إطار يكون داخل صفحة الـ HTML).

    القفز إلى القسم المحدد باستخدام الإطار
    إطاران. الأول فيه كود المصدر لقسم محدد في الملف. القسم المحدد يعمل عن طريق <a name="C10"> في الملف "link.htm".

    القفز إلى قسم محدد عن طريق إطار الملاحة
    إطاران. إطار الملاحة في الجانب الأيسر هو (content.htm) ويحوي قائمة بالوصلات مع هدف (target) يشير إلى الإطار الثاني وهو صفحة (link.htm). بينما يقوم الإطار الآخر بالذهاب إلى الوصلة والقسم المحدد له. كود الـ HTML في الملف "content.htm" كالتالي:

    كود HTML:
    <a href ="link.htm" target ="showframe">Link without Anchor</a>
    <a href ="link.htm#C10" target ="showframe">Link with Anchor</a>

    وسوم إطار الـ HTML

    الوسم الوصف
    <frameset> تعريف مجموعة من الإطارات
    <frame /> (تعريف نافذة تابعة (إطار
    <noframes>
    تعريف قسم بدون إطارات (noframe) للمتصفحات التي لا تدعم الإطارات
    <iframe> (frame) تعريف نافذة إطار مضمن