مفهوم الإطار في HTML. Iframe وFrame - ما هما وأفضل طريقة لاستخدام الإطارات في Html يتم التحكم في عرض حدود الإطار من خلال السمة

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

لماذا هذا ضروري؟ وبما أنه يتم تحميل المستندات في مناطق منفصلة خاصة بها، فإنها تتصرف بشكل مستقل. أي أنه يمكنك القيام بشيء ما في مستند واحد، بينما تظل المستندات الأخرى دون تغيير.

أين يمكنك العثور على هياكل الإطار هذه؟ هذه ملفات مساعدة (بامتداد .chm).

فيما يلي مثال بسيط لمستند يحتوي على إطارات:

مثال الإطارات أنت تعرض هذه الصفحة باستخدام متصفح لا يدعم الإطارات.

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

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

يتم عرض عنصر noframes إذا كان المتصفح لا يدعم الإطارات.

لاحظ أنه لا يوجد عنصر الجسم. يتم استخدام عنصر الإطارات بدلاً من ذلك. وهذا هو أحد أسباب عدم استخدام الإطارات على مواقع الويب.

سمات عناصر مجموعة الإطارات

• cols - التقسيم الرأسي للصفحة إلى مناطق العرض.
• الصفوف - التقسيم الأفقي للصفحة إلى مناطق العرض.

عنصر الإطار

يصف هذا العنصر منطقة نافذة واحدة. يمكنك تحميل أي مستند فيه باستخدام السمة src. أمثلة:

يصف التمرير- التمرير (تلقائي بشكل افتراضي). إذا تجاوز المستند منطقة عرض هذا الإطار، يحدث التمرير. إذا تم وضع المستند بالكامل داخل الإطار، فلن يكون هناك تمرير. يمكن تعطيل التمرير، لكن من الأفضل تركه تلقائيًا.

سمة واحدة noresize- يمنع تغيير حجم الإطار في المتصفح. افتراضيا هذا مسموح به.

يصف com.frameborder- إطار جانب الإطار. القيمة "1" - ارسم، القيمة "0" - لا ترسم. هاتان القيمتان فقط صالحتان. بشكل افتراضي، يتم رسم الإطار.

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

يصف ارتفاع الهامش- مسافة بادئة رأسية من المحتوى إلى حدود الإطار.

إطار iframe مضمن

عنصر iframe ("نافذة الخط"). تم إقران هذا العنصر (هناك علامة فتح وإغلاق). يخدم هذا العنصر نفس الغرض - تنظيم عنصر النافذة في المستند.

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

عنصر iframe هو عنصر مضمن ذو محتوى قابل للاستبدال. أولئك. يتم تشكيل منطقة من نوع الخط بأي أبعاد مجردة، ويتم تحميل محتوى بعض المستندات الخارجية (ملف HTML) في هذه المنطقة.

يحتوي Iframe على نفس سمات الصور (نظرًا لأنها من نفس النوع): الاسم، والعرض، والارتفاع، وsrc، وframeborder، والتمرير، وhspace، وvspace، وmarginwidth، وmarginheight.

3.8 ك

تتميز العديد من مواقع الويب الحديثة بقوائم التنقل "اللزجة" التي تظهر إما في الشريط الجانبي أو في الجزء العلوي أثناء التمرير لأعلى ولأسفل الصفحة. لكن خصائص CSS التي تسمح لك بإنشاء قوائم ثابتة لا تدعمها المتصفحات دائمًا. في السابق، تم استخدام إطارات HTML لتنفيذ وظائف مماثلة.

الفرق بين الإطارات وإطارات Iframe

عندما تستخدم مجموعة إطارات، فإنك تقوم بتقسيم الجزء المرئي من نافذة المتصفح إلى إطارات متعددة. كل إطار له محتواه الخاص، والذي لا يؤثر على محتوى الإطار التالي. تؤدي الإطارات وإطارات Iframe وظيفة مماثلة - فهي تقوم بتضمين مورد في صفحة ويب، ولكنها تختلف بشكل أساسي عن بعضها البعض:

• الإطارات هي العناصر التي تحدد التخطيط؛
• إطارات iframe هي عناصر تضيف محتوى.

تاريخ ومستقبل الإطارات

لقد قام W3C بإهمال الإطارات في HTML5. كان الأساس المنطقي لهذا القرار هو أن إطارات HTML لها تأثير سلبي على سهولة الاستخدام وإمكانية الوصول. دعونا نرى ما إذا كانت هذه الادعاءات مبررة.

مشاكل مع الإطارات

• مشكلات سهولة الاستخدام: مع تزايد شعبية الأجهزة المحمولة ذات الشاشات الصغيرة، هناك حاجة إلى أن تقدم المواقع للمستخدمين طرق عرض متعددة تتغير وفقًا لحجم إطار العرض. على الرغم من إمكانية التلاعب بالإطارات لتوفير درجة من الاستجابة، إلا أنها ليست مناسبة تمامًا لإنشاء مواقع ويب سريعة الاستجابة؛
• إمكانية الوصول: من الصعب جدًا قراءة برامج قراءة الشاشة والتقنيات المساعدة الأخرى والتفاعل مع المواقع التي تستخدم الإطارات.

يوجد حاليًا اتجاه عالمي في تطوير الويب لفصل محتوى صفحة الويب عن طريقة عرضها:

• يجب إضافة المحتوى وتحديده بواسطة الترميز، على سبيل المثال عبر HTML؛
• يتم تعريف العرض التقديمي بلغات مثل CSS وJavaScript.

يتضمن استخدام الإطارات في البداية إنشاء مظهر وبنية محددين، بينما يجب التعامل مع مهام العرض التقديمي باستخدام CSS.

مستقبل الإطارات

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

كيفية صنع الإطارات في HTML

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

المفهوم الأساسي للإطارات

المفهوم الأساسي للإطارات بسيط للغاية:

• استخدم عنصر مجموعة الإطارات في موقع محدد في عنصر النص في مستند HTML؛
• استخدم عنصر الإطار لتأطير محتوى صفحة الويب؛
• استخدم سمة src لتحديد المورد الذي يجب تحميله داخل الإطار؛
• قم بإنشاء ملف محتوى منفصل لكل إطار HTML.

دعونا نلقي نظرة على بعض الأمثلة لكيفية عمل ذلك. نحتاج أولاً إلى إنشاء بعض مستندات HTML التي سنعمل بها. لنقم بإنشاء أربعة مستندات HTML مختلفة. إليك ما سيحتوي عليه الأول:

الإطار 1

محتويات الإطار 1

سوف نقوم بحفظ الوثيقة الأولى كـframe_1.html. سيكون للوثائق الثلاثة المتبقية محتوى مماثل وسيتم تسميتها وفقًا لذلك.

إنشاء أعمدة عمودية

لإنشاء مجموعة من أربعة أعمدة رأسية، تحتاج إلى استخدام عنصر مجموعة الإطارات مع سمة cols. يتم استخدام سمة cols لتحديد عدد وحجم الأعمدة التي ستحتوي عليها مجموعة الإطارات. في حالتنا، لدينا أربعة ملفات لعرضها. لذلك، نحن بحاجة إلى أربعة إطارات.

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

وإليك كيفية عرض هذه العلامة:

إنشاء صفوف أفقية

يمكن إنشاء صفوف إطار HTML باستخدام سمة الصفوف بدلاً من سمة cols كما في المثال السابق:

من خلال إجراء هذا التغيير، قمنا بتحميل الإطارات الآن في أربعة صفوف، فوق بعضها البعض:

دمج الأعمدة والصفوف

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

مجموعة الإطارات cols = "*،*،*">

مثال إطار HTML:

توجد مجموعة الإطارات المتداخلة داخل العنصر الأصلي، الإطار الأول. يمكن وضع العنصر المتداخل في أي مكان. على سبيل المثال، إذا أردنا وضع العنصر المتداخل في المركز، فإننا ببساطة نعيد ترتيب العناصر على النحو التالي:

إليك كيفية ظهور الإطارات الآن:

يمكنك إنشاء إطارات متداخلة أخرى:

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

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

ستبدو الشبكة الناتجة من الصفوف والأعمدة كما يلي:

كيفية تصميم الإطارات

عندما يتعلق الأمر بتصميم صفحة ويب تستخدم إطارات بتنسيق HTML، هناك طريقتان لتعيين الأنماط:

• تحديد الأنماط داخل كل إطار؛
• تحديد الأنماط لمجموعة الإطارات.

يجب تحديد تمثيل كل إطار داخل المستند المصدر. يجب تحديد عرض مجموعة الإطارات داخل المستند الأصلي الذي يحتوي على مجموعة الإطارات. بمعنى آخر، يجب تعيين أنماطframe_1.html بواسطة قواعد CSS المضمنة في ملفframe_1.html، أو في ورقة الأنماط المرتبطة بملفframe_1.html.

تحديد أنماط الإطار في المستند المصدر

كما هو الحال مع أي صفحة ويب، يمكن تصميم محتوى كل إطار باستخدام CSS. لتصميم محتوى كل إطار، يجب إضافته إلى المستند الرئيسي، إما عن طريق الارتباط بملف نمط خارجي أو عن طريق إضافة أنماط داخلية أو مضمنة. وبالنظر إلى أن لدينا أربع وثائق مصدر، يجب تطبيق أنماط CSS على كل وثيقة على حدة.

من خلال تطبيق أنماط CSS على صفحة ويب تحتوي على مجموعة إطارات، لن نتمكن من تطبيق الأنماط على كل إطار على حدة. إذا أردنا تصميم نمطframe_1.html، فنحن بحاجة إلى إضافة تلك الأنماط مباشرةً إلى المستند نفسه. فيما يلي مثال لكيفية القيام بذلك:

الجسم (الخلفية: رمادي؛) h1 (اللون: أزرق؛) p (الهامش: 20 بكسل؛) الإطار 1

محتويات الإطار 1

إذا عدنا إلى مثالنا السابق لإنشاء إطارات بتنسيق HTML بأربعة أعمدة متساوية الحجم وقمنا بتحميل مجموعة الإطارات بعد إجراء هذه التغييرات على ملفframe_1.html، فسنحصل على ما يلي:

تحديد الأنماط وتنسيق مجموعات الإطارات

كيفية التأثير على عرض مجموعة الإطارات بما يتجاوز تحديد أنماط المستندات نفسها:

• يمكن تحديد حجم كل إطار أو تثبيته؛
• يمكن تغيير المسافة بين الإطارات.
• يمكن تحديد تنسيق الحدود حول كل إطار.

لا يتم إجراء هذه التغييرات من خلال CSS. ويتم ذلك عن طريق إضافة السمات وقيمها إلى عنصر الإطار.

تحجيم الإطار

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

سنقوم بإنشاء التخطيط التالي:

• صف واحد كامل العرض في الجزء العلوي من الصفحة؛
• ثلاثة أعمدة أسفل الصف العلوي؛
• تم تحديد حجم العمودين الأول والثالث لإنشاء أشرطة جانبية أيمن وأيسر؛
• تم تغيير حجم العمود الأوسط ليمثل مساحة محتوى أكبر.

يمكننا إنشاء إطار HTML باستخدام الكود التالي:

يقوم هذا الكود بإنشاء مجموعة إطارات مكونة من صفين:

• يبلغ ارتفاع الصف الأول 150 بكسل. السمة noresize المحددة للإطار الأول تعني أنه لا يمكن تغيير حجمه؛
• يتم الاحتفاظ بالأنماط التي طبقناها سابقًا علىframe_1.html، ولكنها تؤثر فقط على محتوى هذا الإطار؛
• يتم توسيع الصف الثاني لملء المساحة المتبقية؛
• مجموعة الإطارات الثانية متداخلة في الصف الثاني وتحتوي على ثلاثة أعمدة؛
• يملأ كل من العمودين الأول والثالث 20% من مساحة نافذة المتصفح المتاحة؛
• يتم توسيع العمود الثاني لملء المساحة المتبقية بين العمود الأول والثالث؛
• وبما أننا لم نحدد سمة noresize للأعمدة، فسيتم عرضها في البداية بناءً على الأحجام المحددة في الكود.

ولكن سيتمكن زائر الموقع من تغيير حجمها يدويًا.

يقوم هذا الكود بإنشاء صفحة ويب يتم عرضها على النحو التالي:

تنسيق الحدود والحشو حول الإطار

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

تضيف سمة هامش الارتفاع المطبقة على الإطار الأول 15 بكسل من الهامش أعلى وأسفل المحتوى الذي تم تحميله في الإطار الأول. تعمل قيمة إطار الإطار 0 على إزالة الحدود لجميع الإطارات السفلية الثلاثة. وهذا ما سيبدو عليه:

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

أحد الاستخدامات الأكثر شيوعًا للإطارات هو إنشاء قائمة تنقل "ثابتة" داخل إطار يكون مرئيًا دائمًا بغض النظر عن موضع محتويات الإطارات الأخرى. عند استخدامها بشكل صحيح، تتسبب الروابط الموجودة في قائمة التنقل في تحميل موارد جديدة في الإطار بينما يظل باقي الإطار ثابتًا.

يمكنك تنسيق نقاط الارتساء لاستهداف إطارات معينة عن طريق إعطاء سمة اسم لعنصر الإطار المطلوب واستخدام السمة الهدف داخل العنصر لتحميل href في الإطار المحدد. إذا كان هذا الأمر مربكًا بعض الشيء، فلنرشدك خلال عملية إنشاء الإطارات بتنسيق HTML خطوة بخطوة.

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

الآن بعد أن قمنا بتعيين الاسم = "mid_col" للعمود المركزي، يمكننا إنشاء عدة روابط في المستند المصدر للعمود الأيسرframe_2.html:

الإطار 2

محتويات الإطار 2

• تحميلframe_1.html
• تحميلframe_2.html
• تحميلframe_3.html
• تحميلframe_4.html

الآن، عندما نقوم بتحميل صفحة الويب، سيستضيف الشريط الجانبي الأيسر أربعة روابط تنقل. عند النقر على الرابط، يتم تحميل محتويات الملف في إطار العمود الأوسط بالسمة name="mid_col" . وهذا ما سنراه عند تحميل الصفحة:

إذا قمنا بالنقر على الرابط Loadframe_1.html، فسيتم تحميل محتويات هذا الملف في العمود الأوسط، وسنحصل على ما يلي:

إذا نقرنا على الرابط Loadframe_2.html، فسنرى أن كلاً من الشريط الجانبي الأيسر والعمود الأوسط سيعرضان روابط التنقل:

سيؤدي النقر فوق روابط تحميلframe_3.html وتحميلframe_4.html في العمود المركزي إلى تحميل محتويات هذه الملفات. إذا نسينا إضافة السمة target="mid_col" لأحد الروابط، فعند الضغط عليها سيتم تحميل الملف في الإطار الذي يحتوي على الرابط. إذا أردنا إعادة تحميل الصفحة بأكملها، على سبيل المثال، عند اتباع رابط لموقع خارجي، نحتاج إلى إضافة السمة target="_blank" أو target="_top". توفير بديل noframes

في الماضي، تم استخدام عنصر noframes لتوفير بديل للمتصفحات التي لا تدعم إطارات HTML. في الوقت الحالي، تدعم جميع المتصفحات الحديثة الإطارات، ولكن لا يتم دعم الإطارات عمليا. ونتيجة لذلك، لم نعد بحاجة إلى إنشاء بديل noframes عند العمل مع الإطارات.

كيفية جعل الإطارات تستجيب

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

استخدام الصفوف بدلاً من الأعمدة

إذا أمكن، قم بتنظيم الإطارات في صفوف بدلاً من الأعمدة. على شاشة صغيرة، يكون التنقل في المحتوى عموديًا أسهل بكثير من التنقل أفقيًا. من الأسهل عرض إطارات HTML المرتبة في صف واحد على شاشة صغيرة. إذا قمنا بتقليل عرض التخطيطات التي تحتوي على صفوف وأعمدة، لمحاكاة شاشة Apple iPhone 6، فإننا نرى أن عرض الصفوف أسهل بكثير من عرض الأعمدة:

استخدم النسب المئوية لعرض الأعمدة

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

كيفية التبديل من الإطارات إلى التقنيات الأخرى

تمت إزالة كل من عنصر مجموعة الإطارات وعنصر الإطار من أحدث مواصفات HTML5. يجب على مالكي المواقع التي تم إنشاؤها باستخدام الإطارات إعادة بناء أصولهم لإزالتها من التخطيط. في مرحلة ما، ستتوقف المتصفحات عن دعم الإطارات. وبالتالي، فإن التخلي عن الإطارات ليس أمرًا مرغوبًا فيه فحسب، بل يجب القيام به.

تقييم المحتوى الموجود في الإطارات

الخطوة الأولى لإعادة تصميم موقع يستخدم إطارات HTML iframe هي تحديد أسباب استخدام الإطارات:

• هل تم استخدام الإطارات لإنشاء تخطيط محدد؟ إذا كان الأمر كذلك، فيمكن استخدام CSS لإنشاء تخطيط مماثل؛
• هل تم استخدام الإطارات لإنشاء حجم حاوية إعلانية محدد؟ هناك العديد من الطرق لإعادة إنشاء هذا التأثير باستخدام CSS أو عناصر واجهة المستخدم المصممة للعمل مع CMS؛
• هل تم استخدام الإطارات لإنشاء قوائم التنقل اللاصقة؟ مرة أخرى، يمكن إعادة إنشاء نفس التأثير باستخدام CSS؛
• هل تم استخدام الإطارات لتحميل المحتوى من موقع خارجي؟ إذا كان الأمر كذلك، فيمكن استخدام عنصر iframe، الذي يعد جزءًا من HTML5، لتضمين محتوى من موقع خارجي.

في كل حالة تقريبًا، يمكنك استخدام CSS لإعادة إنشاء تخطيط مصمم باستخدام الإطارات، ويمكن استخدام إطارات iframe لتضمين الموارد الخارجية.

استراتيجية لموقعك الجديد

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

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

• ووردبريس؛
• جملة! ;
• دروبال.

مصادر إضافية

إذا كنت تريد معرفة المزيد حول إطارات HTML، فإن أفضل مصدر لمزيد من المعلومات هو World Wide Web Consortium (W3C). فيما يلي بعض الصفحات التي تحتوي على معلومات حول الإطارات:

• وثائق HTML4 حول الإطارات؛
• ميزات HTML5 المهملة

الأصناف المتعلقة

اسم العنصر	صفات	وصف
com.noframes		تم استخدام العنصر داخل العنصر الأصلي لتوفير محتوى احتياطي للمستخدمين الذين لا تدعم متصفحاتهم . في هذه المرحلة، تعتبر الإطارات تقنية مهملة، لذا لا ينبغي استخدام العنصر.
com.iframe	رمل	ينشئ إطارًا مضمنًا يقوم بإخراج مستند HTML مستقل إلى المستند الحالي.
مجموعة إطارات	com.frameborder	تم استخدام العنصر لإنشاء مجموعة من الإطارات التي يمكن معالجتها وتصميمها كإطار واحد. تم الآن إهمال إطارات HTML ويجب عدم استخدامها.
إطار	سرك	تم استخدام العنصر لتقسيم نافذة المتصفح إلى عدة أجزاء مستقلة. الإطارات مهملة حاليًا ويجب عدم استخدامها.

هذا المنشور هو ترجمة لمقال "إطارات" الذي أعده فريق المشروع الصديق

453

تعتبر مجموعة الإطارات طريقة سهلة لإنشاء مناطق تمرير منفصلة متعددة في نافذة المتصفح، بالإضافة إلى أنها آلية مناسبة لتغيير محتويات الإطار.

لكن الإطارات لها أيضًا عيوب كبيرة. ولهذا السبب لا ينصح باستخدامها. على الرغم من أن الإطارات مدعومة في HTML 4.01، إلا أنها ليست في HTML 5. لقد تم استبدالها بطرق تنسيق CSS الغنية بالميزات. العيوب الرئيسية للإطارات:

• تواجه محركات البحث صعوبة في التعامل مع الإطارات؛
• توافق ضعيف لعنوان URL؛
• الإطارات غير متوفرة لكافة تطبيقات العميل؛
• من الصعب وضع إشارة مرجعية على الصفحات المعروضة في الإطارات؛
• المشاكل الشائعة عند طباعة صفحات الويب.

عادةً، يتم استخدام الإطارات لإنشاء مناطق منفصلة قابلة للتمرير داخل نافذة واحدة. يُستخدم هذا الأسلوب في تطبيقات الأنظمة الأساسية للجوال وسطح المكتب. مثال على هذا التطبيق هو مستكشف Windows. تتكون نافذة Explorer من جزأين. يتم عرض المجلدات و"المفضلة" على الجانب الأيسر من النافذة، ويتم عرض محتويات المجلد المحدد على الجانب الأيسر من النافذة على الجانب الأيمن.

مجموعات الإطارات ووثائق الإطار

من الصعب استخدام الإطارات لأنها تتطلب إنشاء ملف HTML منفصل يحدد موقع الإطارات. بالإضافة إلى ملفات HTML إضافية لاستخدامها.

إنشاء مجموعة إطارات

فيما يلي مثال لإنشاء مجموعة إطارات HTML:

… …

مميزات الكود:

• عنصر "الجسم" مفقود. تلعب العلامة دورها.
• تحدد العلامات الموجودة بالداخل محتويات الإطارات وخصائصها؛
• باستثناء أنه لا يوجد المزيد من المحتوى في المستند.

بطاقة شعار

العلامة مسؤولة عن موقع الإطار في المستند. تحدد القيم المحددة فيه عدد صفوف وخطوط مجموعة الإطارات، وكذلك عرض الإطارات. يبدو تنسيق العلامة كما يلي:

يمكن تحديد أحجام الأعمدة أو الصفوف بالبكسل أو النسب المئوية أو "*". في الحالة الأخيرة، سيقوم المتصفح بتقسيم بقية النافذة إلى أعمدة، حيث تشير القيمة "*" إلى عرضها.

تحدد قيم سمة الأعمدة أو الصفوف أيضًا عدد الإطارات المعروضة على الصفحة. يتطلب كل إدخال (قيمة) علامة داخل علامة.

خذ بعين الاعتبار الأمثلة التالية لإنشاء علامة:

بطاقة شعار

تكون العلامة مسؤولة عن خصائص كل إطار في مجموعة الإطارات المضمنة داخل علامة مجموعة الإطارات. لديه بناء الجملة التالي:

تمنح سمة الاسم الإطار اسمًا فريدًا يمكن الرجوع إليه بواسطة عناوين URL والبرامج النصية وما إلى ذلك. وهذا ضروري للتحكم في محتوى الإطار. يتم استخدام سمة src لتحديد عنوان URL للمحتوى الذي يجب عرضه في الإطار.

تدعم العلامة سمة أخرى - noresize. افتراضيًا، يكون حجم الإطار قابلاً لتغيير الحجم. لمنع تغيير الحجم، يجب عليك تعيين السمة noresize إلى noresize .

على سبيل المثال :

تحديد الروابط للإطارات

لتغيير محتويات الإطار، يجب عليك تحديد الإطار المطلوب. يتم استخدام سمة الاسم لهذا الغرض. يمكن بعد ذلك استخدام هذه الأسماء في البرامج النصية وعلامات الارتباط لتحديد محتوى جديد للإطار.

يمكنك تغيير محتويات الإطار في مجموعة الإطارات باستخدام السمة المستهدفة لعلامة الارتباط. القيم التالية مسموح بها للسمة الهدف:

على سبيل المثال :

إذًا، الإطارات... ما الغرض منها وما الفوائد التي تقدمها؟ وسأحاول أن أتحدث عن ذلك في هذا الفصل، وبالطبع عن كيفية تنفيذها والعمل بها..

في كثير من الأحيان، عند إنشاء موقع ويب، يصبح من الضروري فتح عدة مستندات HTML في نفس الوقت في نافذة متصفح واحدة... لذلك تم إنشاء الإطارات لتحديد مناطق العمل لكل مستند. بالإضافة إلى ذلك، تعد الإطارات أداة جيدة يمكنك من خلالها تخطيط الصفحة؛ فهي بمثابة "بديل" جدير للطريقة الجدولية لتخطيط الصفحة... أضع كلمة "بديل" بين علامتي اقتباس لأن هذه طريقة مختلفة تمامًا لبناء موقع ويب له مزاياه وعيوبه، ومن الصعب جدًا مقارنته ببناء الموقع المألوف حتى الآن.. ولكن أول الأشياء أولاً..

دعونا نبدأ؟ لنفترض أننا بحاجة إلى فتح ثلاثة مستندات HTML مرة واحدة في نافذة متصفح واحدة وترتيبها، على سبيل المثال، بهذه الطريقة:

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

إذن، هناك ثلاثة ملفات logotype.html وmenu.html وtext.html.. والتي نحتاج إلى وضعها تحت سقف واحد، ولكن ليس لدينا سقف بعد..

نكتب "السقف"، الوثيقة الرئيسية التي سنربط بها ملفاتنا. وبما أنه سيكون الرئيسي، فإننا نعطيه اسم Index.html.

إطارات

هذا هو هيكل الوثيقة المألوفة لدينا، والتي مضغناها في بداية تدريبنا، الإطارات تكسر الصور النمطية الموجودة! يبدو هيكل إطار المستند كما يلي:

إطارات

يتم تعويض غياب العلامة بعلامة جديدة - قم بتثبيت إطار أو مجموعة من الإطارات... وسنعمل بالفعل مع هذا الرجل بشكل أكبر.

تحتوي العلامة على سمات الصفوف والأعمدة - تخبر هذه السمات المتصفح بكيفية وضع الإطارات في نافذة المتصفح

الصفوف - العمود الأفقي - العمودي

في حالتنا، نحتاج إلى وضع أفقي للإطارات... لذلك نكتب هكذا:

إطارات

النسب المئوية بعد علامة المساواة ليست أكثر من أحجام نوافذ الإطار لدينا في نافذة متصفح واحدة كبيرة؛ ومن المفترض أن نضع ثلاث نوافذ - وبالتالي، هناك أيضًا ثلاث قيم مفصولة بفواصل. تذكر كيف قمنا بتعيين أحجام الخلايا للجدول، وينطبق نفس المبدأ هنا، كما هو الحال في خلايا الجدول، يمكن تحديد أحجام الإطارات كنسبة مئوية من المساحة الإجمالية وبالبكسل.

فيما يلي بعض الأمثلة على الكتابة:
- يشير هذا الإدخال إلى أنه سيكون هناك ثلاث نوافذ أفقية حيث ستشغل الأخيرة 70% من مساحة نافذة المتصفح، والنوافذ الأولى والثانية ستشغل 15%.
- توجد هنا ثلاث نوافذ عموديًا، ويُشار إلى عرضها بالبكسل.
- مثل هذا الإدخال يعني أن النافذتين الأولى والثالثة سيكون عرضهما 100 و 180 بكسل على التوالي، وسيشغل الإطار الثاني كامل المساحة المتبقية.

لقد انتهينا من وضع المستندات، والآن كل ما تبقى هو توصيلها والاستمتاع بالنتيجة الأولى.

ستشير العلامة وسمتها src للمتصفح إلى المسار إلى مستند html الذي يجب فتحه في المساحة المخصصة له. لدينا ثلاث مستندات منفصلة logotype.html وmenu.html وtext.html، والآن نحتاج إلى تحديد مسار لكل منها، وهو ما نقوم به بالفعل. (أفترض أن جميع الملفات الأربعة موجودة في نفس المجلد وأن المسارات المؤدية إليها تحتوي على أبسط تدوين مثل:)

ملف Index.html


إطارات







ملف logotype.html


إطارات





ملف القائمة.html


إطارات


قائمة طعام:

حساء شامبينون
الفول في وعاء على الطريقة الإيطالية
سلطة الصيف الأسترالية
... ... ...



ملف text.html


إطارات


حساء شامبينون

الكثير من النص ..

في هذا المثال، قمت بنشر جميع مستندات HTML الأربعة حيث يكون ملف Index.html هو المستند الرئيسي، والثلاث الأخرى عبارة عن صفحات إضافية، كل منها، من حيث المبدأ، يمكن أن تعمل بشكل مستقل وتحتوي على أي شيء، صور، جداول، نصوص، روابط .. لقد فعلت ذلك لأعطيك فهمًا لمبدأ العمل مع الإطارات. في مزيد من الأمثلة، سأقوم بنشر الملف الرئيسي فقط مع الإطارات (وإلا فإنها ستشغل مساحة كبيرة جدًا على الصفحة)، وأنت تعلم أن لدي "في مكان ما" جميع الملفات الأخرى التي تحتوي على رسومات أو نصوص أو ربما شيء ما آخر.. حسنًا، لا تتخلف عني، قم بتحرير صفحاتك ببطء لموقع التدريب المستقبلي.. لا أعرف ما الذي ستكتب عنه، لكنني وعدت بمساعدة فتاة واحدة في كتابة موقع مخصص للطبخ..)) فقررت إن جاز التعبير أن أصوب عصفورين بحجر واحد.. الفتاة الأرنبة والموقع..)) شيء من هذا القبيل..))

في المثال أعلاه، قمنا بترتيب جميع النوافذ أفقيًا؛ عن طريق تغيير سمة الصفوف إلى أعمدة، ويمكنك ترتيبها بترتيب رأسي. ولكن ماذا لو كنت بحاجة إلى وضع نوافذنا؟

مثل هذا ؟: أو مثل هذا ؟: أو حتى مثل هذا ؟:

هناك مخرج. دعونا نلقي نظرة على الأمثلة.

لنبدأ بالحالة الأولى.. ماذا نرى؟ ونرى سطرين، حيث ينقسم الثاني إلى عمودين.

والآن بالترتيب:

- تقسيم نافذة المتصفح إلى سطرين
- تحميل شعارنا في السطر الأول
- وتقسيم الصف الثاني إلى عمودين
- في الأول ستكون هناك قائمة
- وفي الثانية هناك الكثير من النص
- أغلق علامة تقسيم العمود
- أغلق علامة تقسيم الخط

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

حسنًا، لننظر إلى مثال:

إطارات

وفي الحالة الثانية لدينا عمودين ينقسم فيهما الثاني إلى سطرين، فنكتب هكذا:

- تقسيم النافذة إلى عمودين
- الأول سوف يحتوي على المحتوى
- وقسم الثاني إلى سطرين
- شعار
- والنص الرئيسي
- إغلاق قسم الخط
- إغلاق التقسيم إلى أعمدة

إطارات

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

- تقسيم النافذة إلى ثلاثة أعمدة (لاحظ أن العمود الثاني يشغل 800 بكسل بالضبط والعمودين الخارجيين ليس لهما حجم محدد وسيقسمان المساحة المتبقية إلى النصف)
- في العمود الأول نقوم بتحميل مستند html الذي سيؤدي وظيفة تزيينية بحتة

-
-
- في العمود الثاني ندخل "الحالة الأولى"
-
-
-
-

- في العمود الثالث نقوم بتحميل نفس الملف بالزخارف
- ضربة عنيفة

انظر إلى المثال، وبعد ذلك سأشرح لك سبب اختياري لمسار النوافذ الخمس

إطارات

فلماذا خمس نوافذ؟ أتذكر أنني كتبت بالفعل عن حقيقة أن مستخدمي الإنترنت المختلفين لديهم دقة مختلفة على شاشاتهم، وبالتالي، سيبدو موقعنا مختلفًا على الشاشات المختلفة... وإذا لم تكن هناك أحجام محددة، فستظهر جميع رسوماتنا ونصوصنا وجداولنا ، كما يقولون، "تعويم" لأولئك المستخدمين الذين تختلف دقة شاشاتهم عن دقة شاشاتك. عندما قمنا بتصميم الموقع باستخدام جدول، تم حل مشكلة أبعاد الصفحة عن طريق تعيين عرض وارتفاع محددين لهذا الجدول؛ لسوء الحظ، لا يمكن القيام بذلك مع الإطارات... حتى لو قمت بتحديد عرض الإطارات غير الموجودة فيها النسب المئوية، ولكن بالبكسل، لا يزال العمود الأخير سيمتد عبر العرض المتبقي لنافذة المتصفح وستفقد الصفحة، كما يقولون، "مظهرها القابل للتسويق". اذا ماذا يجب ان نفعل؟ علينا أن نلجأ إلى حيل صغيرة... من خلال تعيين العمود المركزي (الذي لدينا فيه الصفحة بأكملها بالفعل) بحجم 800 بكسل، نحدد مرة واحدة وإلى الأبد عرضه، والعمودين الأول والثالث بدون أبعاد، في بالإضافة إلى الزخرفة، تعمل كنوع من "الينابيع" التي يرتكز عليها العمود المركزي.. لذا، بالنسبة للأشخاص ذوي دقة الشاشة المنخفضة، ستكون هذه النوافذ/المجالات ضيقة، وبالنسبة للأشخاص ذوي الدقة العالية، ستكون واسعة، لذلك لن يتأثر العمود المركزي بأي شكل من الأشكال، والآن يمكننا وضع أي أشياء فيه بثقة تامة، مع مرجعية دقيقة محليًا، دون القلق بشأن مصيرها المستقبلي. قارن المثال الأول، حيث توجد ثلاث نوافذ، والثالث، حيث يوجد بالفعل خمسة منها، أليس هذا أفضل؟

سننتهي من وضع الإطارات وأحجامها... ونحن عالقون هنا لفترة طويلة... فلنمضي قدمًا.

نأتي الإطارات إلى مظهر أنيق.

في مثالنا الأخير، أول ما يلفت انتباهك هو مجموعة كاملة من أشرطة التمرير الموجودة حيث تكون هناك حاجة إليها وحيث لا تكون هناك حاجة إليها.. دعنا نتخلص منها، حسنًا، يمكنك تركها في مكان ما.. يتم ذلك باستخدام سمة التمرير - العلامة، ويمكن أن يكون لها أحد المعاني الثلاثة:

• لا
• نعم - اعرض دائمًا،
• آلي

إطارات

هوامش الإطار، أو المسافة من حدود الإطار إلى النص أو الصورة، كما في حالتنا، يتم تعيينها بالبكسل باستخدام سمات هامش العرض والارتفاع للعلامة

إطارات

دعونا نتحدث قليلاً عن الإطار المحيط بإطاراتنا.

إذا لاحظت في المثال الأخير أنه من خلال تحريك المؤشر فوق حدود الإطار، فإن المؤشر، أي، يأخذ مظهرًا مختلفًا (الإمساك والتحريك) والآن يمكن سحب هذه الحدود في أي اتجاه مع الضغط على اليسار زر الفأرة. في بعض الأحيان، تلعب "حركة" حدود الإطار هذه دورًا في أيدي مشرف الموقع، ولكنها في كثير من الأحيان لا تزال تعيق الطريق.. من أجل منع المستخدم من اللعب بأحجام النوافذ للعلامة، تم اختراع السمة noresize

إطارات

لكن سمة الحدود، التي كانت مألوفة بالنسبة لنا منذ فترة طويلة، تحدد العرض بالبكسل لهذه الإطارات ذاتها بين الإطارات... وهي مكتوبة داخل العلامة. كما كان من قبل، فإن القيمة border="0" ستزيل الحدود تمامًا.

إطارات

الإطارات والروابط.

لقد حان الوقت لإحياء موقعنا بالروابط، ولكن المشكلة هي أن الرابط المألوف Beans in a Pot باللغة الإيطالية سيفتح هذا المستند في نفس الإطار الذي يوجد به، في حالتنا مباشرة في الإطار مع المحتوى، و المحتوى نفسه في لحظة النقر على هذا سوف تختفي الروابط في غياهب النسيان.. يمكنك إلقاء نظرة على المثال الأخرق.. انقر على أي رابط فيه.. لمنع حدوث ذلك في المستقبل، عليك إخبار المتصفح في أي إطار لفتح المستند الذي نحتاجه، حسنًا، ما لم تكن بالطبع بحاجة إلى فتحه في نفس الإطار.

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

هو مكتوب مثل هذا:

يمكنك أن تأتي بأي اسم.. الشيء الرئيسي هو عدم نسيانه..

هو مكتوب مثل هذا:

الفول في وعاء على الطريقة الإيطالية

حسنًا، أعتقد أنه ليس هناك حاجة للتوضيح لك أنه قبل الرجوع إلى أي مستندات، يجب عليك إنشاءها... في حالتي، الملفات (الوصفات) تحمل الأسماء text.html، text1.html، text2.html ...

انظر الى المثال:

ملف Index.html


إطارات













ملف القائمة.html


إطارات


قائمة طعام:

حساء شامبينون
الفول في وعاء على الطريقة الإيطالية
سلطة الصيف الأسترالية
... ... ...

تمامًا كما كان من قبل، يمكن فتح المستند في نافذة منفصلة. دعني أذكرك أنه مكتوب هكذا:

الفول في وعاء على الطريقة الإيطالية

أو عن طريق تعيين القيمة _top للسمة الهدف، افتحها في نفس نافذة المتصفح، ولكن في وضع ملء الشاشة.. "تصفير" كل ما هو موجود.. مكتوب هكذا:

الفول في وعاء على الطريقة الإيطالية

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

الإطار العائم

في بعض الأحيان يكون من الضروري إدراج مستند HTML آخر أو حتى سلسلة من هذه المستندات في صفحة تحتوي على بنية غير إطارية في نافذة منفصلة. لتحقيق هذا الغرض، هناك علامة - ما يسمى بالإطار العائم.

تحتوي هذه العلامة على عدد من السمات:

src - السمة المطلوبة التي تشير إلى المسار إلى الصفحة المراد فتحها
العرض - عرض الإطار العائم بالبكسل أو النسب المئوية
الارتفاع - ارتفاع الإطار العائم

التمرير - إظهار شريط التمرير

• لا - لا تظهر شريط التمرير مطلقًا،
• نعم - اعرض دائمًا،
• تلقائي - أظهر إذا كان ذلك ضروريًا.

محاذاة - محاذاة الإطار العائم

• اليسار الأيسر
• حق - على اليمين
• أعلى - أعلى
• أسفل - أدناه

Frameborder - وجود إطار حول إطار عائم

• 1 - تمكين الإطار
• 0 - قم بإيقاف تشغيل الإطار

كل ذلك مكتوب معًا على النحو التالي:

مثال للمستند ذو الإطار العائم:

الإطار العائم


الإطار العائم
تم تقديم ما يسمى بـ "الإطار العائم" في هذه الصفحة.
وفي نافذة منفصلة، ​​يتم فتح مستند HTML آخر للعرض.



… … …

noframes

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

تخيل الآن أنك قمت ببناء موقع الويب الخاص بك باستخدام بنية الإطار، وحاول بعض الزوار، ربما دون معرفة ما هي المشكلة، فتح موقع الويب الخاص بك، وسيعرض متصفحهم خطأ! ماذا سيفكرون في موقعك؟ أعتقد شيئًا مثل: "آه.. نوع من الهراء.. لن آتي إلى هنا مرة أخرى!"

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

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

إطارات


عذرًا، لكن متصفحك لا يدعم الإطارات.

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

يجب أن تكون العلامة موجودة داخل علامة

مع الإطار العائم، كل شيء أبسط، ما عليك سوى كتابة النص المطلوب بينهما وسيتم عرض هذا النص على الشاشة إذا كان المتصفح لا يدعم الإطارات.

عذرًا، لكن متصفحك لا يدعم الإطارات.

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

استخدم العلامة. تذكر أنه إذا كان الموقع يعمل في متصفحك ويتم عرضه كما تريد، فقد تكون الأمور مختلفة بالنسبة للمستخدمين الآخرين!

الإطارات عبارة عن مساحات مستطيلة من الشاشة، تحتوي كل منها على مستند HTML الخاص بها. تعتبر الإطارات رائعة لتنسيق المستندات التالية:

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

عناصر الواجهة الثابتة. يمكنك تجميد رسم على الشاشة، مثل شعار الشركة، بينما يتم تمرير بقية الصفحة في إطار آخر.

النماذج والنتائج. يمكنك إنشاء نموذج في إطار واحد وعرض نتائج الاستعلام في إطار آخر.

تعتبر الإطارات العادية حاليًا تقنية قديمة وغير مدعومة في HTML5. لا تستخدم الإطارات العادية في مشاريعك! في HTML5، لم تعد علامات الإطار ومجموعة الإطارات والإطارات موجودة، وبدلاً من ذلك، يتم توفير علامة iframe واحدة (إطار مضمن أو عائم).

بطاقة شعار

العلامة - تستبدل العلامة وتستخدم لتقسيم الشاشة. لديه علامة إغلاق.

صفات

كولس. يقسم الشاشة عموديا. يقبل القيم بالبكسل أو النسب المئوية أو *. تشير القيمة * إلى أن العمود المعين سيشغل بقية الشاشة

صفوف. يقسم الشاشة أفقيا. يقبل القيم بالبكسل أو النسب المئوية أو *. تشير القيمة * إلى أن سطرًا معينًا سيشغل بقية الشاشة

إطار الإطار. يحدد وجود الإطارات، أي. حدود الإطار. يقبل القيم "نعم" أو "لا".

حدود. يحدد عرض الإطار بالبكسل.

اللون الحدودي. يحدد لون الإطارات. بشكل افتراضي (إذا تم استخدام نظام ألوان Windows القياسي)، تكون حدود الإطار بلون رمادي باهت. ولكن إذا كنت ترغب في ذلك، يمكنك اختيار أي لون آخر. عند تعريف لون ما، يمكنك اختيار اسمه ومعادله العددي في نظام RGB. على سبيل المثال، أزرق أو #0000FF.

في علامة منفصلة، ​​من المنطقي استخدام واحدة فقط من السمات - COLS أو الصفوف. وهذا يعني أن بنية الإطار ستتكون من أعمدة فقط أو صفوف فقط. لإنشاء صفوف داخل أعمدة أو أعمدة داخل صفوف، ستحتاج إلى حاويات متداخلة....

مثال

نتيجة:

لاحظ أيضًا الفرق في ترتيب ترقيم الإطارات.

بطاقة شعار

تحدد العلامة الموضوعة في ... الحاوية ما يجب عرضه بالضبط في إطار معين. ليس لديه علامة إغلاق.

صفات

SRC. يحدد عنوان URL المرتبط بإطار معين.

عرض الحافة. يحدد المسافة بين محتويات الإطار وحدوده اليمنى واليسرى.

ارتفاع الهامش. يحدد المسافة بين محتويات الإطار وحدوده العلوية والسفلية.

التمرير. يحدد ما إذا كان شريط التمرير موجودًا في نافذة الإطار. يمكن أن يأخذ القيم "نعم" و"لا" و"تلقائي" (افتراضي).

نوريسيزي. يحدد حدود الإطار على أنها "ثابتة" ويمنع المستخدم من تغيير حجم نافذة الإطار. علاوة على ذلك، يتم تسجيل أحجام كافة الإطارات التي لها حدود مشتركة مع الإطار الثابت.

إطار الإطار، الحدود، اللون الحدودي. ترتبط هذه السمات بالإطارات وتشبه تلك الموجودة في ملف .

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

استخدام العلامة A للتحميل في إطار السمات

HREF. يحدد عنوان URL أو اسم المستند الجديد الذي تريد تحميله في نافذة إطار محددة.

هدف. يحدد اسم الإطار الذي سيتم تحميل المستند الجديد فيه. يجب تعيين هذا الاسم للإطار بواسطة سمة NAME في ملف .

المثال التالي يقسم الشاشة إلى منطقتين عموديتين. يحتوي الجانب الأيسر الأصغر على جدول المحتويات، وسيقوم الجانب الأيمن بتحميل جميع مستندات HTML الأخرى. يحتوي ملف جدول المحتويات على ارتباطات تشعبية نصية بسيطة للأقسام ذات الصلة. لكي يعمل كل شيء، تحتاج إلى إنشاء مستندات HTML في الملفات cosm.htm، وeat.htm، وperf.htm، وmassage.htm، وmanic.htm.

محتويات المثال

• بضائع
  • مستحضرات التجميل
  • المكملات الغذائية
  • العطور
• خدمات
  • تدليك
  • صباغة الاظافر

مرحبًا! بطاقة شعار

ستوفر عليك العلامة من الاضطرار إلى تكرار سمة TARGET على كل ارتباط تشعبي فردي إذا كانت جميعها تشير إلى نفس نافذة الإطار. للقيام بذلك، تحتاج إلى وضع علامة بالسمة TARGET في الحاوية....

سيؤدي استخدام العلامة إلى تقليل حجم ملف جدول المحتويات left.htm للمثال السابق.

محتويات المثال

• بضائع
  • مستحضرات التجميل
  • المكملات الغذائية
  • العطور
• خدمات
  • تدليك
  • صباغة الاظافر

تحل سمة TARGET لكل رابط محدد محل سمة العلامة التي تحمل الاسم نفسه.

محتويات المثال

• بضائع
  • مستحضرات التجميل
  • المكملات الغذائية
  • العطور
• خدمات
  • تدليك
  • صباغة الاظافر

هنا البضائع! هنا الخدمات! تم الحصول على المؤثرات الخاصة باستخدام سمة TARGET

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

الهدف=”_فارغ” . يتم تحميل المستند في نافذة متصفح جديدة.

الهدف=”_self” . يتم تحميل المستند في النافذة الحالية.

الهدف=”_parent” . يتم تحميل المستند في الإطار الأصلي. عادةً ما يكون هذا إطارًا يقف في حاوية ... أمام الحاوية الحالية. إذا لم يكن هناك إطار أصل، تصبح قيمة "_parent" مطابقة لـ "_self".

الهدف=”_top” . يتم تحميل المستند في الإطار العلوي.

في الأساس، تهدف أسماء الخدمات هذه إلى "اختراق" بنية الإطار الحالية بطريقة أو بأخرى. قم بالتجربة معهم لترى كيف يمكنك تحميل المستندات إلى نوافذ مختلفة.

بطاقة شعار

قدم HTML 4.0 الإطارات العائمة (أو المضمنة). باستخدام علامة، يمكنك وضع إطار واحد في مستند HTML عادي. علاوة على ذلك، حاوية... ليست هناك حاجة هنا.

علامة الإغلاق مطلوبة!

صفات

الينج. يحدد نوع المحاذاة. يقبل القيم "يسار"، "وسط"، "يمين".

ارتفاع. يحدد ارتفاع الإطار بالبكسل

عرض. يحدد عرض الإطار بالبكسل.

SRC، عرض الهامش، ارتفاع الهامش، التمرير، إطار الإطار، الحدود، لون الحدود، الاسم . مماثلة لتلك التي نوقشت في وقت سابق.

vsspace. لتعيين الهوامش في أعلى وأسفل إطار iframe

com.hspace. يضبط الهوامش على الجوانب خارج إطار iframe

عرض الحافة. يحدد مقدار المساحة المتروكة على طول الحواف اليسرى واليمنى داخل إطار iframe؛ يجب أن يكون مساوياً أو أكبر من 1.

ارتفاع الهامش. يحدد مقدار المساحة المتروكة على طول الحواف العلوية والسفلية داخل إطار iframe؛ يجب أن يكون مساوياً أو أكبر من 1.

التمرير. يحدد ما إذا كان سيتم عرض شريط التمرير في إطار iframe أم لا؛ يمكن أن تكون القيمة "نعم" أو "لا" أو "تلقائي". القيمة الافتراضية للمستندات العادية هي تلقائية.

عنوان. نص تلميح الأداة. بطاقة شعار

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

متصفحك لا يدعم الإطارات المضمنة!

كيفية تحميل الإطار دون ملفات إضافية؟

لتحميل إطار دون استخدام ملفات خارجية، تحتاج إلى وضع كود HTML الخاص بالإطار في متغير، ثم تحديد "javascript:parent" كعلامة SRC. اسم المتغير".

var varFrame = "رمز HTML"; ...

مشكلة في شريط العناوين في بنية موقع الإطار

عند استخدام الإطارات، يستخدم الموقع صفحة واحدة تشير إلى موقع الإطارات.

فيما يلي مثال على هذه الصفحة:

...

بعد تحميل هذه الصفحة، يتم تحميل المعلومات في الإطارات. تتم جميع انتقالات المستخدم عبر صفحات الموقع ضمن هذه الإطارات. يعرض شريط العناوين دائمًا المسار إلى الصفحة الرئيسية فقط، والذي لا يتغير أثناء التنقل. ولا يعرف الزائر أين هو في هذه اللحظة.

إذا لم يهبط الزائر على الفور على الصفحة الرئيسية للموقع (على سبيل المثال، من محرك البحث)، فهذا لا يؤدي إلى إعادة بناء الهيكل العام للإطارات. وهذا هو السبب وراء عدم قدرة مالك الموقع على توفير عنوان للصفحة الداخلية للموقع.

هناك عدة حلول لهذه المشكلة

في وقت سابق، تم النظر في مثال على هيكل الإطار. سننظر في طرق مختلفة لحل هذه المشكلة باستخدامها.

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

ثلاث حالات ممكنة:

قام الزائر بزيارة صفحة تحتوي على بنية الإطار؛

قيام الزائر بزيارة إحدى الصفحات المعلوماتية؛

يصل الزائر إلى صفحة بها قائمة تنقل.

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

وهكذا ينتهي الزائر "حيث لا ينبغي له". في بداية الصفحة نقوم بإدراج برنامج نصي من شأنه إنشاء بنية الإطار.

يمكن تنفيذ الحل على جانب العميل وعلى جانب الخادم. العيب الرئيسي للتنفيذ من جانب العميل واضح - الاعتماد على قدرات العميل وإعداداته. على سبيل المثال، يُحظر تشغيل البرامج النصية على جهاز الكمبيوتر الخاص بالمستخدم. لن يعمل الخيار الثاني إذا كان الخادم لا يدعم PHP.

حل جافا سكريبت.

هناك قيود على هذا الأسلوب - لا تدعم جميع المتصفحات JavaScript، وفي بعض الحالات يقوم المستخدمون بتعطيل البرامج النصية بأنفسهم.

أولاً، نتحقق من بيئة الصفحة، وبعد ذلك، إذا لم يكن هيكل الإطار المطلوب موجودًا، فإننا نقوم بإنشائه.

لنقم بإنشاء ملف fram.js :

إذا (window.name != "main") ( window.name = "root"; document.write(""); document.write(""); document.write(""); document.write("" ;)

أولاً نتحقق من اسم النافذة التي تم تحميل الصفحة فيها: إذا (window.name!= "الرئيسي"). إذا كان اسم النافذة واسم الإطار غير متطابقين، فأنت بحاجة إلى إنشاء بنية إطار. ويتم ذلك ديناميكيًا باستخدام طريقة الكتابة الخاصة بكائن المستند.

نقوم بتوصيل ملف بكل صفحة من الموقع fram.js. الآن سيكون لصفحات الموقع البنية التالية:

... ...

مع هذا النهج لحل هذه المشكلة، تختفي الحاجة إلى ملف يحتوي على بنية الإطار.

حل PHP

وبهذا النهج، سيصبح الموقع في متناول عدد أكبر من الزوار.

سوف نتحقق من بيئة الصفحة بشكل مختلف (ليس هو نفسه عند استخدام JavaScript). سنقوم بتحميل المستند في إطار باستخدام معلمة الإطارات = نعم. عند فتح الصفحة، نتحقق من هذه المعلمة، وإذا لزم الأمر، نقوم بإنشاء بنية الإطار ديناميكيًا. يوجد أدناه الكود المسؤول عن ذلك.

وضع الكود في ملف إطارات.php. أنت الآن بحاجة إلى توصيله بكل صفحة من صفحات الموقع. فيما يلي مثال على هذه الصفحة.

إطارات...

في هذه الحالة، كما هو الحال مع التنفيذ من جانب العميل، ليست هناك حاجة لإنشاء مستند HTML بشكل منفصل يصف بنية الإطار.

.

 

قد يكون من المفيد أن تقرأ:

• تنظيف ملفات التطبيق;
• مراجعة متعمقة لتطبيق Photos for Mac - كل ما تحتاج لمعرفته حول استبدال iPhoto وAperture;
• محاكي مبدل الأقراص المضغوطة - هل يمكنك صنعه بنفسك؟;
• كيف يمكنني تغيير اسمي الأخير في جهة اتصال؟;
• تعطيل خدمة "الدفع السهل" من MTS;
• إنشاء استطلاعات الرأي في Telegram كيفية الإعجاب في Telegram;
• مهندس كاميرا رئيسي لشركة Sony Xperia فيما يتعلق بتطوير التصوير الفوتوغرافي بالهاتف المحمول وتقنيات Sony والمستقبل;
• كيفية نقل الألعاب المحفوظة على الهاتف المحمول إلى جهاز آخر؟;