استخدام الإطارات في HTML. إنشاء سمات الإطارات لعلامة الإطار لتخصيص مظهر النوافذ

ما هي الإطارات؟

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

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

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

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

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

إطارات - جيدة أم سيئة؟

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

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

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

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

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

تأثير الإطارات على الترويج لموقع الويب.

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

إذًا، كيف وماذا يؤثر استخدام الإطارات على الترويج؟

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

تقوم روبوتات البحث بفهرسة الصفحة الأولى - الرئيسية - فقط، والتي يصلون إليها من موارد الطرف الثالث. تظل الصفحات الأخرى مغلقة أمام Yandex وGoogle - لأنه حتى من المواقع الأخرى، من المستحيل الارتباط بها نظرًا لحقيقة أن الإطارات تخفي العناوين الحقيقية للصفحات.

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

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

مرحبا عزيزي القراء لموقع بلوق. اليوم سنتحدث عن الإطارات في HTML. من الواضح أننا سنبدأ من البداية، أي نوع هذا الحيوان. سنتحدث أيضًا عن الحاضر (الإطار) والمستقبل (Iframe) لهذه العناصر في الإصدار الحالي من لغة ترميز النص التشعبي وفي معيار Html 5 الجديد مع .

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

ما هو وكيف يختلف Iframe عن الإطار؟

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

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

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

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

كيف يتم إنشاء بنية الإطار في لغة ترميز النص التشعبي؟ إذا تحدثنا عن معيار Html 4.01 (حسب التصنيف)، وهو المعيار الرئيسي في الوقت الحالي، فسيتم استخدام ثلاثة عناصر لهذا - الإطار ومجموعة الإطارات وNoframes.

Iframe - إطار مدمج بمعيار Html 5

إذا تحدثنا عن معيار Html 5 (مستقبلنا، وبعض عناصره مدعومة بالفعل من قبل العديد من المتصفحات)، فلن تكون هناك علامات Frame وFrameset وNoframes، بالإضافة إلى بنية الإطار الكلاسيكية بدلاً من ذلك؛ علامة Iframe واحدة (إطار مضمن)، والتي سنتحدث عنها في البداية، ثم سنوجه انتباهنا إلى المخطط الكلاسيكي من الإصدار 4.01، والذي هو قيد الاستخدام بالفعل الآن.

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

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

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

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

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

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

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

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

أيضًا في Iframe، تم ترحيل سمة Frameborder من علامة الإطار، والتي تحتوي على قيمتين فقط - إما 0 (لا يتم عرض الإطار المحيط بالإطار) أو 1 (الإطار مرئي). القيمة الافتراضية هي Frameborder=1، لذا لإزالتها ستحتاج إلى إدخال Frameborder='0':

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

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

كما ذكرت سابقًا، المثال الواضح لاستخدام إطار Iframe هو:

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

الإطارات المستندة إلى علامات الإطار ومجموعة الإطارات - بنيتها

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

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

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

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

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

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

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

إنشاء بنية تعتمد على مجموعة الإطارات وخصائص Cols وRows الخاصة بها

قيم Cols وRows لعلامة Html Frameset هي أرقام مفصولة بفواصل (بدون مسافات). تحدد هذه الأرقام نسب النوافذ التي نريد الحصول عليها نتيجة لذلك. لذلك، بغض النظر عن عدد الأرقام المفصولة بفواصل المكتوبة في Cols أو Rows، فإن عدد الإطارات التي لدينا سيكون هو النتيجة.

على سبيل المثال، باستخدام هذا الترميز، سنحصل على ثلاثة أعمدة رأسية يتوافق عرضها مع النسب 2:5:3.

نظرًا لأننا قمنا بتعيين النسب لثلاثة إطارات، فسيتعين علينا تضمين ثلاثة عناصر إطار بين علامتي فتح وإغلاق مجموعة الإطارات، حتى بدون تحديد سمات إضافية:

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

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

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

لنلقي نظرة على مثال. الآن دعنا نختار تقسيم إطار العرض إلى صفوف أفقية باستخدام الصفوف:

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

ما هو جدير بالملاحظة هو أن القيمتين "*" و "1*" تعنيان نفس الشيء - فنحن نقسم كل المساحة المتبقية إلى مساحة واحدة ونعطي هذا الجزء لهذا الإطار (حسنًا، أي كل المساحة المتبقية).

لكن انظر ماذا يحدث إذا استخدمت القيمة "*" مع رقم لتقسيمه بشكل متناسب:

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

من السهل جدًا إجراء الحساب - فقط أضف أربعة (4*) إلى اثنين (2*) واقسم على هذا المقام (تذكر الكسور من المنهج الدراسي) اثنين وأربعة. أولئك. لقد حصلنا على أن العمود الأول مع الإطار سوف يشغل ثلث المساحة المتبقية في الارتفاع، والعمود الثالث سوف يشغل الثلثين. أو بمعنى آخر يكون الثالث ضعف الأول:

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

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

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

أولئك. أولاً، نستخدم "frameset cols=”20%,80%"" لتقسيم كل المساحة المتوفرة إلى عمودين رأسياً وتعيين محتويات العمود الأيمن بعلامة "frame"، ولكن بدلاً من إضافة عنصر "frame" بالنسبة للعمود الأيسر، نفتح "صفوف الإطارات الجديدة ="10%،*"".

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

حدد المسار في سمة Src لعنصر الإطار

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

فكيف نتحكم في مظهر النوافذ التي نقوم بإنشائها؟ كل هذا موجود في سمات علامة الإطار. أول واحد يستحق الذكر هو سرك. لقد رأينا ذلك بالفعل في علامة Img عندما نظرنا إلى إدراج الصور في كود Html. لم يتغير جوهره ولا يزال يسمح لك بتحديد المسار إلى المستند الذي يجب تحميله في الإطار.

يمكن تحديد المسار إلى المستند في Src كـ . تُستخدم المسارات النسبية عادةً للمستند الموجود على المورد الخاص بك، ولكنك ستحتاج إلى مسارات مطلقة عندما تريد تحميل مستند من موقع آخر إلى نافذة إطار.

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

ولذلك، كان من الأسهل بالنسبة لي استخدام الروابط النسبية في سمة Src لعلامة الإطار:

الجدير بالذكر أنه إذا قمت باستبدال جميع الروابط الواردة في هذا الكود من النسبية إلى المطلقة (مثل https://site/navigator/joomla.html) وفتحت هذا الملف في المتصفح، فسيتم تحميل المستندات المحددة في الإطار من الخادم الخاص بي وسترى صورة مماثلة في متصفحك. علاوة على ذلك، لا يهم مكان وجود ملفك مع بنية الإطار (index.html) - على جهاز الكمبيوتر الخاص بك أو على الاستضافة.

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

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

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

لذلك، عندما تحدثنا عن الارتباطات التشعبية، ذكرنا سمة العلامة "A" كـ Target=_blank. هل تتذكر ما هو الغرض منه؟ من الصحيح فتح المستند المرتبط في نافذة جديدة. افتراضيًا، يجب أن يتم فتحه في نفس النافذة، وهو ما يعادل الهدف = "_self".

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

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

لقد صنعوها وأطلقوا عليها اسم "ktona". يمكنك الآن فتح الملف الذي تم تحميله كقائمة في النافذة اليسرى بأمان وإضافة سمة Target="ktona" إلى جميع علامات A الموجودة فيه:

تاريخ Joomla ومكون VirtueMart

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

يكفي فقط وضع العنصر الأساسي target="ktona" بين علامتي الفتح والإغلاق وستفتح جميع الروابط في كود Html الخاص بهذا المستند صفحات جديدة في الإطار المحدد المسمى "ktona":

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

حسنًا، أولاً، عليك إعطاء اسم للإطار العمودي الأيسر:

وفي الملف الذي تم تحميله في النافذة العلوية (gor.html)، تحتاج إلى إضافة العنصر الأساسي target="gor":

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

سمات علامة الإطار لتخصيص مظهر النوافذ

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

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

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

في الأداة التي كانت موجودة لدي، استخدمت القيمة الافتراضية Auto وظهرت أشرطة التمرير في الإطارات حسب الحاجة:

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

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

سمة بصرية أخرى هي إطار الحدود. باستخدامه، يمكنك تحديد ما إذا كنت تريد رسم إطار (حدود) بين الإطارات أم لا. يمكن أن يحتوي Frameborder على قيمتين محتملتين فقط - إما 0 (لا ترسم إطارًا) أو 1 (إظهار الحدود). القيمة الافتراضية بالطبع هي 1.

هناك دقة واحدة. إذا كنت تريد إزالة الحدود المرئية، فسيتعين عليك إضافة Frameborder=0 إلى كافة علامات الإطار الخاصة بالإطارات التي تريد إزالة الحدود المرئية بينها.

حسنًا، لا يزال يتعين علينا النظر في بعض سمات علامة الإطار - عرض الهامش وارتفاع الهامش، الذي يضبط المساحة المتروكة في العرض (اليمين واليسار) والارتفاع (أعلى وأسفل) من حدود النافذة إلى المحتوى الذي تم تحميله فيها (الرقم يعني عدد بكسلات الحشوة):

لماذا لا يمكنك إنشاء موقع ويب على الإطارات؟

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

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

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

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

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

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

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

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

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

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

ولكن، ومع ذلك، من أجل تجنب أي مشاكل مع محركات البحث، قمت بإغلاق بنية الإطار بالكامل من العرض، وكذلك، فقط في حالة إضافة علامة تعريف Rodots إلى جميع ملفات Html الخاصة بها، وحظر فهرستها:

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

كل التوفيق لك! نراكم قريبا على صفحات موقع المدونة

أنت قد تكون مهتم

توجيهات التعليق وDoctype في كود Html، بالإضافة إلى مفهوم العناصر المضمنة والكتلة (العلامات)
التضمين والكائن - علامات HTML لعرض محتوى الوسائط (فيديو، فلاش، صوت) على صفحات الويب
Img - علامة HTML لإدراج صورة (Src)، ومحاذاة النص وتغليفه حوله (محاذاة)، وكذلك ضبط الخلفية (الخلفية)
ما هي لغة ترميز النص التشعبي Html وكيفية عرض قائمة بجميع العلامات في أداة التحقق من صحة W3C تحديد، خيار، منطقة النص، التسمية، مجموعة الحقول، وسيلة الإيضاح - علامات Html لشكل القوائم المنسدلة وحقول النص
قوائم في كود Html - علامات UL، OL، LI وDL
الخط (الوجه والحجم واللون) وعلامات الاقتباس والعلامات المسبقة - تنسيق النص القديم بتنسيق HTML خالص (لا يتم استخدام CSS)
كيفية تعيين الألوان في أكواد Html وCSS، واختيار ظلال RGB في الجداول، ومخرجات Yandex وبرامج أخرى

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

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

تاريخ التكنولوجيا

يمكننا اليوم أن نذكر أن قرار الابتعاد عن العمل باستخدام تقنية الإطار قد تم اتخاذه أخيرًا. ينص الموقع https://www.w3.org/TR/html5-diff/#obsolete-elements بوضوح على أنه تم إهمال علامات الإطار ومجموعة الإطارات وعلامات noframes المعتادة لإنشاء مثل هذا الهيكل. كحجة، يتم تقديم البيانات التي تفيد بأن استخدام مثل هذا الهيكل يؤثر سلبًا على سهولة استخدام المواقع وإمكانية الوصول إليها على الإنترنت.

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

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

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

فوائد الإطارات

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

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

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

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

العيوب المحتملة

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

1. سهولة الاستخدام غير مرضية. اليوم، تتزايد حصة مستخدمي الأجهزة المحمولة والأجهزة اللوحية ذات دقة الشاشات الصغيرة وتتجاوز بالفعل عدد أولئك الذين يزورون المواقع من أجهزة الكمبيوتر المكتبية وأجهزة الكمبيوتر المحمولة. وهنا يؤدي استخدام الإطارات إلى حدوث مشكلات خطيرة في استجابة الصفحات عند عرضها على أجهزة مختلفة. هذه المشكلة ليس لها حل عملي اليوم.
2. تدهور إمكانية الوصول إلى الموقع لمختلف البرامج. تكشف الزيادة في عدد البرامج الإضافية (على سبيل المثال، برامج قراءة الشاشة) عن إمكانية وصول أسوأ بكثير إلى المعلومات للقراءة.
3. لا يتم عرض الصفحات بشكل صحيح. غالبًا ما يبدو تخطيط الصفحات التي تحتوي على مثل هذه البنية غير صحيح في المتصفحات من وجهة نظر التصميم. وهذا يرجع إلى ميزات التكنولوجيا. من وجهة نظر تحسين محركات البحث، يعد استخدام الإطارات في تخطيط HTML للصفحة أمرًا غير مرغوب فيه إلى حد كبير.
4. توافر عنوان واحد للهيكل بأكمله. ونتيجة لذلك، لا يمكن وضع إشارة مرجعية على الصفحات الداخلية لهذا الموقع. وهذا يؤدي إلى إزعاج للمستخدمين.
5. الفهرسة غير الصحيحة من قبل محركات البحث. إن وجود العديد من المستندات الكاملة على موقع الويب، والتي يتم تشكيل صفحة واحدة منها، يؤدي إلى تعقيد عمل محركات البحث بشكل كبير. وهذا يؤدي إلى أخطاء كبيرة أثناء الفهرسة. ونتيجة لذلك، يؤدي التحديد غير الصحيح للموضوعات وعناوين الصفحات إلى فقدان المحتوى المهم من الفهرسة.
6. سيئة السمعة. يعد هذا عيبًا غير معتاد بالنسبة للموارد الموجودة على الشبكة. ومع ذلك، لا بد من القول أن حقيقة أن تخطيط المواقع على الإطارات أصبح عفا عليه الزمن يؤدي إلى حقيقة أن مؤلفي هذه الموارد وأصحابها يعتبرون رجعيين. ولكن هناك بعض الاستثناءات. حتى المواقع الحديثة التي تستضيف غرف الدردشة عادةً ما تستخدم الإطارات.

فهرسة الإطارات بواسطة محركات البحث

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

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

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

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

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

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

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

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

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

ميزات الترويج لموقع الويب في الإطارات

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

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

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