Статьи

Практический веб-дизайн — объяснение рамок и их использование

Март 10, 2019

Ах, кадры. Мы ненавидели их, когда Netscape впервые предложил их примерно в 1995 году; мы сожалели о них, когда они стали все яростью в течение нескольких коротких лет; мы бы хотели, чтобы они ушли и никогда больше не затемняли наши показы. Что же, может быть.

Споры об использовании фреймов бушуют уже восемь лет, и хотя большинство экспертов в большинстве случаев категорически не согласны с их использованием, я не буду продолжать здесь споры. Я скажу, что по моему опыту в Интернете, 90% сайтов, которые все еще используют фреймы, не используют их хорошо; Я все еще немного удивлен, когда нахожу сайт, который лучше работает с фреймом, чем нет.

Большинству людей, которые опоздали с веб-дизайном или только изучают его, теперь говорят: «Фреймы? Забудьте их! Вы не создадите страницу в фреймах, их трудно понять правильно, и это пустая трата времени для Вы, чтобы узнать их. « Теперь в этом утверждении много правды. Нет необходимости изучать дизайн фреймов: многие профессиональные веб-дизайнеры разработали сотни элегантных, функциональных сайтов без единого фрейма и будут продолжать разработку, не задумываясь о фреймах. Процент созданных сайтов постоянно снижается, особенно сейчас, когда все больше и больше дизайнеров переходят к дизайну на основе CSS, что по существу делает концепцию фреймов несущественной. Обратите внимание, что, хотя HTML 4 включает фреймы как часть официального кода, HTML 4.01 Strict не поддерживает фреймы, полагаясь вместо этого на таблицы стилей.

Для хорошей компиляции плюсов и минусов фреймов, см . Статью SitePoint Тома Чаплина на эту тему . Это несколько лет, но все еще уместно.

Однако бывают случаи, когда необходимо знание конструкции рамы. Возможно, ваш бизнес-сайт использует фреймы, и вы вынуждены работать в рамках параметров компании. Возможно, у вас есть клиент или тетя, которая без ума от фреймов и настаивает на том, чтобы вы использовали фрейм-дизайн. Или, может быть, вы придумали концепцию дизайна, которая на самом деле лучше работает в кадре (вряд ли это звучит, это случается).

Рамки имеют свое применение, хотя они и нечасты. Поэтому я решил предоставить некоторую информацию о дизайне фрейма новичку или веб-дизайнеру среднего уровня — некоторые инструкции, а также некоторые замечания, предостережения и предупреждения по пути. Фреймовая техника не так уж сложна, хотя и сложна, и ее стоит изучить, если по какой-либо другой причине вы будете знать, о чем идет речь.

Основной дизайн

Фреймы разрушают всю фундаментальную концепцию Интернета: большую коллекцию отдельных страниц, связанных вместе гипертекстом. … Фреймы нарушают слишком много принятых веб-стандартов, чтобы быть достойной системой доставки информации. — Росс Шеннон

Рамки: просто скажи нет. — Якоб Нильсен

С этими утверждениями сложно спорить. Фреймы нарушают работу Интернета. В идеале идея состоит в том, чтобы перемещаться по сайту без ограничений с сайта на сайт и со страницы на страницу без каких-либо проблем перемещаться из одного места в другое. Укажи, щелкни, просмотри контент, укажи, щелкни, иди куда-нибудь еще.

Сеть по своей природе подвижна; фреймы разрушают эту парадигму, добавляя статическую структуру к веб-страницам. Текучая парадигма смещается в тот момент, когда вы входите в рамку страницы. Контент отображается внутри «загона» фреймов, заблокированных внутри баррикады кода. Навигация нарушена; обычная методология «нажми, нажми» больше не работает. В некоторых старых браузерах, таких как Netscape 2, даже кнопка BACK не всегда позволяла вам покинуть рамку страницы. К счастью, этот небольшой раздражитель больше не является фактором, поскольку браузеры, которые плохо обрабатывают фреймы, практически исчезли из пула браузеров, используемых в настоящее время, за исключением Lynx, который отображает содержимое страницы NOFRAMES и предоставляет помечены ссылки на оформленный контент.

Закладка не всегда работает; вместо того, чтобы отмечать конкретный URL-адрес содержимого в рамке, вы просто добавили в закладки набор фреймов, который может иметь другой URL-адрес и может не содержать тот же контент по возвращении. Копирование URL-адреса фрейма для использования в качестве гиперссылки на другой странице может не отправить посетителя на соответствующую страницу, поскольку URL-адрес страницы в рамке не отображается; отображается только URL фрейма. Печать страницы в рамке не всегда работает хорошо. Файлы cookie плохо отслеживают страницы набора фреймов. Содержимое в рамке отображается довольно плохо на небольших экранах, таких как ноутбуки и карманные компьютеры.

Вероятно, самым большим раздражителем фреймов является случайная страница с фреймами, которая не выпустит вас, когда вы войдете; он настаивает (из-за плохого дизайна или намерения) на отображении каждой другой страницы, на которую вы переходите, в своем собственном наборе кадров. Этот последний вариант является технически оправданным выбором для некоторых коммерческих сайтов, которые хотят, чтобы их собственные навигационные настройки или рекламный контент всегда были перед посетителями, но это не очень хороший выбор. Ловушка посетителей в рамках вашего сайта — лучший способ заставить их покинуть ваш сайт как можно быстрее — даже если это включает в себя полное закрытие браузера и начало поиска с нуля.

Есть также соображения о дополнительной нагрузке на сервер и обслуживании страниц. Страница в рамке часто занимает больше места на сервере, чем альтернатива без рамки, и эти рамки также увеличивают время загрузки страницы. Куча оформленных страниц может быть более сложной и трудоемкой для изменения. И когда вы создаете новый набор фреймов, у вас будет минимум два (с одним фреймом — больше, если у вас больше фреймов) попаданий на сервер за одно посещение. С большим количеством наборов кадров вы генерируете больше обращений к серверу, не создавая дополнительных просмотров страниц. Это может вызвать проблемы, если вы можете принять ограниченный объем трафика на ваш сайт; он также может нанести ущерб вашей попытке отслеживать посещения сайта.

В настоящее время существуют ситуации, когда кадры представляют собой разумное решение. Одним из них является представление длинного документа, разделенного на главы или блоки. Простое, работоспособное решение состоит в том, чтобы создать набор фреймов с двумя столбцами, где левая сторона предлагает навигационные ссылки, а правая сторона отображает фактические главы содержимого. Нажатие на ссылку в левой рамке приводит к отображению определенной главы в правой рамке. Это позволяет избежать ужасно длинного документа, который может отображаться слишком долго, и отображает содержимое в виде управляемых кусков. Является ли использование frameset единственным решением для такого контента? Конечно нет, но это один из возможных методов.

Набор фреймов, используемый с аутсорсингом, является еще одной полезной возможностью. Если вы используете отдельные рамки для своего баннера или логотипа, навигации и контента и добавляете корзину покупок на страницу контента, даже если аутсорсинговая корзина покупок не использует ваш логотип или навигационные материалы, ваш сайт по-прежнему работает хорошо и имеет правильный внешний вид.

Дело в том, что фреймы считаются ошибками веб-дизайна не потому, что они бесполезны, а потому, что ими так ужасно злоупотребляли в прошлом (и настоящем, и, вероятно, будут в будущем). Помните, что основная идея, лежащая в основе фрейма, состоит в том, чтобы держать некоторую информацию постоянно видимой при просмотре другой информации, которая может быть изменена. Когда это работает хорошо, это позволяет зрителю сохранять, скажем, навигационное окно, оглавление, рекламное объявление или строку заголовка (или комбинацию этих элементов) на месте, когда они получают доступ к различным областям сайта. Для коммерческих сайтов это может быть полезно для постоянного хранения логотипа или навигации вашей компании или рекламы перед зрителем. Для некоммерческих сайтов это, вероятно, наиболее полезно, чтобы навигационная или другая информация всегда была под рукой, в отличие от размещения меню на каждой странице (кстати, выбор большинства дизайнеров).

В худшем случае вы можете попасть в «адский фрейм», когда плохо спроектированные или намеренно ограниченные наборы фреймов блокируют вас на сайте без выхода. Кнопки «Назад» работают не так, как должны, навигация по самому сайту кошмарна, кадры копируют себя друг в друге, и даже ввод нового URL в адресной строке открывает новый сайт внутри старого фрейма. Теперь это раздражает.

Если вы собираетесь использовать набор фреймов, убедитесь, что ваш контент поддается отображению в рамке. Есть ли другой способ показать это? И подумайте о своей аудитории. Хотя сейчас почти все используют браузеры с поддержкой фреймов, некоторые люди не любят фреймы и бегают, как ошпаренные кошки, когда на экране появляется фреймовый сайт. Для этих людей кадры похожи на криптонит Супермена. Вы не будете далеко спорить с ними; Лучше всего дать им альтернативу <noframes>

Допустим, вы хотите построить сайт с использованием фреймов по любой причине. Хорошо, как ты это делаешь?

Примечание: я обычно рекомендую попробовать код, пока мы продвигаемся в вашем собственном редакторе кода HTML. Вы должны сделать это и здесь, но вам придется создать несколько файлов HTML, которые будут служить исходными файлами фрейма, иначе вы ничего не увидите. Вероятно, самый простой способ сделать это — создать несколько простых файлов HTML без содержимого <body><body> bgcolor

Чтобы использовать приведенный ниже пример кода, попробуйте создать следующие страницы: вашу страницу index.html, которая будет вашей страницей фреймов, и шесть страниц содержимого:

  • leftside.html,
  • mainpage.html,
  • rightside.html,
  • title.html,
  • navigation.html и
  • moreinfo.html.

Ни одна из этих страниц не нуждается ни в каком текстовом или графическом содержимом, если вы действительно не хотите помещать в них какой-либо контент. Просто дайте им разные цвета фона, чтобы они выделялись на вашем экране.

Базовая конструкция рамы

Прежде всего, вы должны использовать правильные рамки DOCTYPE. Для документов HTML 4 это: 

 <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FRAMESET//EN" "http://www.w3c.org/TR/html4/frameset.dtd">

Это вариант переходного документа HTML 4.

Для документов XHTML 1.0 тип документа: 

 

<DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 FRAMESET//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  Помните, поскольку более ранние версии HTML официально не поддерживают фреймы, если по какой-то причине вы не вышли из Wayback Machine и все еще пишете страницы для просмотра в HTML 3.2 или более ранних версиях, вам не нужен конкретный тип документа для написать оформленные страницы.  Большинство современных браузеров в любом случае будут поддерживать фреймы и их содержимое, но не ожидайте 100% соответствия любым способом. 

          

            

        






  Отправной точкой для любого набора веб-страниц в <frame>src<frame src="mainpage.html"> 



 <frame>


  Тег <frame>  В приведенном выше примере предполагается, что вы хотите, чтобы файл с именем mainpage.html отображался во фрейме.  Единственный обязательный атрибут для <frame src="mainpage.html" scrolling="yes">  Все идет нормально. 


  Вы также можете контролировать появление полос прокрутки внутри фрейма с помощью атрибута прокрутки: 


 </frame>


  Значением по умолчанию для этого атрибута является auto, что позволяет браузеру решать, следует ли отображать полосы прокрутки.  Два других значения - да и нет, что само собой разумеется. 


  Закрывающего <head> 


  Вы не должны включать какую-либо информацию тега <body>  Все на этой странице должно быть включено в теги <frameset> 


  Теперь вам нужно построить страницу фрейма.  Эта страница, обычно называемая index.html по понятным причинам, содержит информацию заголовка для всего сайта, а также теги DOCTYPE  Вот базовый пример, опуская такие потребности, как теги <meta><html>   

<head>   

<title>Frames Document</title>   

</head>   

<frameset rows="50%,50%">   

   

***add framed pages here using the <frame> tags***   

   

</frameset>   

</html> 


 <body>


  Обратите внимание, что в этом документе нет тегов <frameset>  Теги BODY<frameset><frameset>  Теги ROWSCOLSCOLS  В приведенном выше примере проценты используются для разделения доступного пространства отображения на две равные горизонтальные области.  Атрибут <frameset cols="50%,50%"> 


 <frameset cols="100,*,100">


  Многим веб-дизайнерам нравится делить свои страницы на три вертикальных столбца, причем два внешних фрейма уже, чем центральный столбец, который будет содержать основной объем информации (этот макет эмулирует традиционный трехколонный стиль дизайна сайта).  Если вы хотите сделать это, попробуйте что-то вроде: 


 <frameset cols="100,500,100">


  где левый и правый столбцы имеют ширину 100 пикселей, а больший центр занимает остальную часть пространства дисплея.  Как всегда, я рекомендую придерживаться процентной ширины (или высоты), когда это возможно, поскольку люди используют различные размеры дисплея.  Обратите внимание, что звездочка в центре приведенного выше кода просто означает что-то вроде «остальной части дисплея».  Если вы написали это так: 


 <frameset cols=*,2*">


  Вы бы установили ширину страницы в 700 пикселей, что оставило бы большую часть экранной недвижимости неиспользованной для наших друзей с большими дисплеями.  Вы также можете организовать свое отображение в относительных терминах, которые определяют размер кадров относительно других кадров.  В этом примере показаны два столбца, где один справа в два раза больше ширины слева: 


 *


  ROWS  Приведенный выше код сообщает дисплею: ​​«Разрежьте дисплей на две колонки и сделайте правую сторону в два раза больше левой». 





            






  Если атрибут <frameset cols="1*,250,3*>   

   

***yadayada***   

   

</frameset>  Если атрибут COLS не установлен, строки распространяются на всю ширину страницы.  Если ни один из атрибутов не установлен, рамка занимает точную область отображения браузера - и какая польза от этого?  (Возможно, есть использование для набора фреймов без атрибутов COLS или ROWS, но я не могу придумать ни одного лишнего. Если вы можете, опубликуйте его на форумах.) 


  Вы можете смешивать абсолютные, относительные и процентные измерения, но тщательно проверяйте их, чтобы увидеть, как они отображаются.  На самом деле, вы должны тщательно проверить все измерения столбцов и строк, чтобы увидеть, как они отображаются, и не забудьте проверить макет на разных размерах дисплея и в разных браузерах.  Вот три примера измерений микширования, взятых со страницы W3C на фреймах HTML : 


 <frameset rows="30%,70%" cols="33%,34%,33%>   

   

***yadayada***   

   

</frameset>


  В этом примере создаются три столбца: центральное пространство, фиксированное в 250 пикселей, полезно для фрагмента содержимого с известным размером, такого как графика или окно Flash, и два столбца с каждой стороны;  левый столбец получает 25% оставшегося пространства, а правый столбец получает остальные 75% оставшегося пространства. 


 <frameset rows="30%,400,*,2*">   

   

***yadayada***   

   

</frameset>


  Этот пример дает вам сетку 2 на 3 подпространства. 


 <html>   

<head>   

<title>Frames Document</title>   

</head>   

<frameset cols="100,*,100">   

   <frame src="leftside.html">   

   <frame src="mainpage.html">   

   <frame src="rightside.html">   

</frameset>   

</html>


  Здесь у вас есть дисплей браузера, разделенный по горизонтали на четыре отдельные области.  Первый получает 30% площади дисплея.  Второй получает 400 пикселей точно.  Два других разделят оставшийся газон между ними, и четвертая область получит вдвое больше, чем третья.  Если ваш дисплей имеет высоту ровно 1000 пикселей, маловероятно, что первая строка получит 300 пикселей, вторая 400, третья 100 и четвертая 200. 


  Теперь давайте соберем пример страницы набора фреймов, используя примеры кода сверху и еще несколько: 


 <noframes>


  Это дает вам отображение с тремя столбцами, с двумя боковыми столбцами, ограниченными до 100 пикселей каждый, и центральным столбцом, используемым для основного контента.  Помните, что в каждом столбце, если ваш контент превышает доступную ширину, вы получаете горизонтальные полосы прокрутки.  Никто не любит горизонтальные полосы прокрутки.  Опять же, поиграйте с шириной столбцов, чтобы вы могли как можно больше избегать полос прокрутки.  Использование строк в ваших наборах кадров дает вам вертикальные полосы прокрутки, которые более приемлемы. 


  Помните, что размер кадров можно изменить, просто переместив курсор за границу, подождите, пока он не сменится двойной стрелкой, и перетащите границу рамки туда, где вы хотите.  Текст будет адаптироваться к изменениям;  графики и другого содержимого жесткого размера не будет, и появятся полосы прокрутки.  Не хотите, чтобы ваши посетители меняли ваши рамки?  Используйте атрибут noresize (у него нет значений). 






 <noframes>


  Всегда включайте раздел с <noframes>Your browser won't handle frames.  <a href="noframes.html">Go here for a better view!</a></noframes>  Люди с такими браузерами будут видеть только контент, отображаемый в тегах;  остальные из нас этого вообще не увидят, поскольку наши браузеры, совместимые с фреймами, не покажут это: 


 <noframes>


  Конечно, этот файл noframes.html должен включать в себя весь контент, содержащийся в наборе фреймов, в дизайне, который использует - как вы уже догадались - без фреймов.  Два сайта в одном ... хм, вот аргумент для проектирования без рамок ... 


  Поместите код </frameset><noframes> 


  Программы чтения с экрана и аудио-браузеры испытывают огромные трудности с рамочными страницами.  Это одна из причин использовать страницу <frameset cols=*,2*>    

   <frame src="navigation.html">    

   <frame src="mainpage.html">    

</frameset>  Некоторые программы чтения с экрана могут обрабатывать простые наборы кадров, поэтому это предостережение постепенно становится неактуальным, но есть множество людей, использующих старые программы чтения с экрана, которые вообще не могут обрабатывать кадры.  Максимальная доступность - это необходимость, а не вариант, который следует учитывать случайно. 





            






  Trickier Stuff 


  Вы можете «вкладывать» один набор фреймов в другой для более сложных макетов.  Начните с чего-то простого: 


 <frameset rows="20%,*">    

   <frame src="title.html">    

      <frameset cols="*,2*>    

         <frame src="navigation.html">    

         <frame src="mainpage.html">    

      <frameset>    

</frameset>


  Здесь у нас есть две колонки, правая в два раза больше левой.  По именам файлов вы можете сделать вывод, что мы будем использовать левую сторону для навигации и правую, большую колонку для контента.  Теперь давайте разберемся с этим: 


 <frameset>


  Это позволяет нам комбинировать строки и столбцы вместе для создания классического «газетного» дизайна сайта: горизонтальный «заголовок», используемый в качестве заголовка, и два столбца, узкий левый столбец для навигации и более широкий правый столбец для основного отображение контента.  Обратите внимание, что второй <frameset><frameset cols="20%,*">    

   <frame src="title.html">    

      <frameset rows="*,2*>    

         <frame src="navigation.html">    

         <frame src="mainpage.html">    

      </frameset>    

</frameset> 


  Хотите двухколонный дисплей с большим правым столбцом, разделенным на две строки?  Просто переключите атрибуты row и cols выше: 


 <frameset>


  Если левая колонка недостаточно широка, просто измените значение с 20% до 30% - или как вам удобно. 


  Маржа 


  HTML 4 предоставляет две команды управления полем: marginheight и marginwidth.  Первый указывает, в пикселях, сколько места нужно оставить между содержимым фрейма в его верхнем и нижнем полях.  Второй делает то же самое для левого и правого поля.  Там нет конкретного по умолчанию. 


  Рамки без границ 


  Вы можете добавить определенные атрибуты в свой <frameset cols="*,*" framespacing="0" frameborder="0" border="0">  В разных версиях Netscape и Internet Explorer используются разные команды, поэтому для правильного оформления сайта вам могут понадобиться все перечисленные ниже атрибуты, хотя следующий код не совсем стандартный HTML 4: 


 border


  И Netscape, и IE используют атрибут framespacing 


  frameborder  Это не допустимый тег HTML 4.


  yes  До HTML 4 тег использовал разные значения для двух браузеров: значения Netscape были no1  IE были 0yes  Значения по умолчанию - 1<... frameborder="0">  HTML 4 стандартизировал тег для использования 1 и 0.


  Если вы кодируете в HTML 4, используйте bordercolor 



  Цветные границы 



  <frameset cols="*,*" bordercolor="#F0F0F0">


 <frameset>


  Как и предыдущие теги, bordercolor не является официальным HTML 4, хотя он работает как с Netscape, так и с IE. 





            






  Ширина поля и высота поля 


  Не так много людей удосужились указать эти атрибуты, которые также идут внутри <frameset cols=*,2*>     

   <frame src="navigation.html" name="frame1">     

   <frame src="mainpage.html" name="frame2">     

</frameset>  Тэги определяют высоту и ширину поля в пикселях.  Попробуйте теги, чтобы увидеть, работают ли они для вас. 






  Интерактивные рамки 


  Это хорошая идея для рамочных страниц, чтобы иметь возможность взаимодействовать друг с другом;  то есть прямые гиперссылки на оформленные страницы.  Для этого вам нужно будет использовать атрибуты name и target. 


  Начните с присвоения имен страницам в рамке: 


 <a href="moreinfo.html" target="frame2">More content</a>


  После того, как вы назвали их, вы можете использовать атрибут target для направления на них гиперссылок: 


 <base>


  Если вы поместите эту гиперссылку на страницу navigation.html, когда пользователь щелкнет по ней, файл mainpage.html будет заменен файлом moreinfo.html с правой стороны. 


  Если вы укажете цель, которая не была определена с указанием имени, страница откроется в новом окне браузера. 


  Но что, если мы хотим, чтобы двадцать разных страниц циклически проходили по основному контенту?  Мы могли бы просто написать двадцать различных ссылок в navigation.html, все нацеленные на «frame2», или мы могли бы использовать <head><base target="frame2"> 


 target="frame2"


  Это эмулирует наличие атрибута _ 


  Специальные целевые команды 


  Есть четыре специальные целевые команды, и все они начинаются с чудесного, волшебного, мистического подчеркивания: target="_blank"  Вот они: 





            






    

  •   target="_top" 
    • 

  •   target="_self"  используется в основном, когда вы ссылаетесь со своего контента в рамке на внешний сайт. 
    • 

  •   target="_parent" 
    • 

  •   _top  если вы не используете вложенные наборы фреймов, эта команда работает так же, как команда marginheight  Если вы используете вложенные наборы фреймов, то эта команда загружает URL во фрейм, который является «следующим шагом вверх» — родительским окном. 
    • 



  Некоторые другие команды 


  marginwidthname


  Атрибут scrolling 



  Атрибут on  Значения включены, offauto  Если у вас нет особой необходимости включать или выключать полосы прокрутки, этот атрибут лучше всего исключать из кода, и на дисплее будет отображаться, нужны ли полосы прокрутки.  Обратите внимание, что команды scrolling="no"noresize  Если вы используете их вместе, протестируйте свой сайт на дисплее 640x480, чтобы увидеть, как он выглядит. 


  Атрибут title  Некоторые браузеры отображают эту информацию, когда мышь наводит курсор на элемент, в то время как другие отображают информацию в меню, вызываемом правой кнопкой мыши.  Если вы хотите включить более длинное описание (обычно для невизуальных браузеров), используйте тег longdesc  Он предоставит ссылку на более подробное описание. 



  Расширенные возможности 





  IFrames 



  IFrames, первоначально предназначенная только для Internet Explorer, теперь доступны для просмотра в Internet Explorer 2.x и выше, Netscape 7, Mozilla, Opera 3 и 6 и даже в браузере WebTV / MSN.  IFrames включены в спецификации HTML 4.0, а также в спецификации XHTML 1.0.  IFrames - это «встроенные» или «независимые фреймы», которые находятся в теле обычной HTML-страницы и могут быть вложены в страницу так же, как графика, и не требуют использования набора фреймов.  Они просты в использовании и весьма полезны для боковой панели и другой интересной информации, которая не имеет непосредственного отношения к основному содержанию контента.  Чем больше вы их используете, тем больше вы их найдете.  Когда вы создаете свою страницу и попадаете в область, где вы хотите разместить iframe, просто используйте следующий код (естественно, модифицированный для ваших собственных нужд): 



 <iframe src="sidecontent.html" width="200" height="100" align="right">Inside this tag is content contained within an iframe.  Your browser may not display this material.  You can click <a href="sidecontent.html">here</a> to see it for yourself, and use the BACK button to return to the main page.</iframe>


  Это дает вам небольшую независимую HTML-страницу в теле основной веб-страницы, заполненную любым контентом, который вам нравится.  Несовместимые браузеры будут видеть содержимое в двух тегах <iframe>  Хотя атрибуты width и height считаются необязательными, они обычно используются;  Вы можете выбрать пиксели (как в приведенном выше примере) или проценты для выбора размера. 


  Обратите внимание, что атрибут align  Если вы решите использовать его, ваш основной выбор: 


    

  •   bottom  нижняя часть объекта выровнена с базовой линией 
    • 

  •   left 
    • 

  •   middle 
    • 

  •   right 
    • 

  •   top 
    • 



  Вы также можете использовать команды frameborderscrolling 


  Пользователи CSS могут использовать атрибуты class  Пользователи CSS также могут использовать абсолютное позиционирование, тег с плавающим тегом div  Посмотрите учебник Webmonkey о том, как выполнить этот изящный маленький подвиг. 






  Слои 


  Слои чем-то похожи на IFrames по концепции, но не по исполнению или даже по внешнему виду.  Они являются строго элементами Netscape и никогда не включались в официальные спецификации HTML.  Так как они не поддерживаются более новыми версиями Netscape / Mozilla, не являются частью официальных спецификаций HTML и теряют свою актуальность, я не буду вдаваться в подробности об их уходе и кормлении здесь. 


  Размещение в поисковой системе 








  Кадры создают большие проблемы для поисковых систем.  Большинство поисковых систем, включая Google, испытывают проблемы с чтением страниц с фреймами.  Некоторые из них автоматически ищут версии «noframes», и, если они недоступны, поисковая система часто соглашается индексировать только «главную» или фреймовую страницу.  Как и в старых браузерах, многие поисковые системы игнорируют инструкции по созданию фрейма.  Только информация внутри тегов noframes читается — информация, которую браузер с поддержкой фреймов будет игнорировать.  Следовательно, сообщение «этот сайт использует фреймы, но ваш браузер их не поддерживает», которое вы часто видите в результатах поиска.  Вы, вероятно, не хотите, чтобы страница набора фреймов выделялась в поисковой системе;  хуже всего то, что вы рискуете, что движок отображает неполную или вводящую в заблуждение информацию о вашем сайте вместо тщательно созданного сообщения о позиционировании, которое вы намеревались показать в списке движков. 


  Итак, как вы обходите это?  Теги <meta><meta>  Тем не менее, их стоит добавить для двигателей и интрасетей, которые все еще используют их. 


  Обратите внимание, что есть веский аргумент, что теги <meta>  Я не буду обсуждать это здесь, но если вы хотите узнать больше об этой проблеме, ознакомьтесь со статьей Search Engine Watch « Смерть метатега» .  Единственная крупная поисковая система, которая все еще использует теги <meta> 


  Лучший способ снять шкуру с этой конкретной кошки — включить полезную информацию в инструкции <noframes>  Поместите информацию <noframes><frameset>  Обратите внимание, что размещение информации над первым тегом frameset отключит информацию о кадре в некоторых версиях Netscape. 


  Не забудьте использовать теги <body><noframes>  Предоставление заголовка на странице набора фреймов полезно, даже если оно не будет отображаться при правильном просмотре страницы.  Поисковые системы индексируют заголовки;  они являются одним из наиболее важных элементов ваших страниц. 


  Теперь, когда вы дошли до этого места, вы создали страницу, которую поисковые системы могут видеть и индексировать правильно.  Отлично … пока.  Что вы еще не сделали, так это дайте пользователям поисковых систем страницу, которая находится в вашем наборе фреймов;  у них есть страница за пределами нормальных рамочных ограничений.  Это может быть особенно проблематично с такими двигателями, как AltaVista, которые «поддерживают фреймы».  Эти движки могут ссылаться на любую страницу в рамке вашего сайта и отображать ее самостоятельно, без использования набора фреймов. 


  Вы можете легко ориентировать посетителей, приходящих прямо на страницу внутри вашего сайта, если и когда она не отображается внутри созданного вами набора фреймов.  К счастью, есть простой ответ на это.  Просто обязательно добавьте ссылку «Главная» вверху или внизу каждой страницы, которая ведет на главную страницу с фреймами.  Убедитесь, что вы используете атрибут target="_top" 


 <a href="index.html" target="_top">Home Page</a>


  Без этого атрибута посетители, нажимающие на ссылку «Главная», увидят новый набор рамок, нарисованных внутри основной рамки;  не очень, и не очень удобно. 


  Другое решение использует JavaScript для принудительного перерисовывания фреймов, но я оставлю это как упражнение для студентов, чтобы найти и использовать.  Существует много различных вариантов кодирования JavaScript, которые решают эту конкретную задачу.  Часто страницы, использующие JavaScript для работы с перерисовкой фрейма, также не позволяют посетителям использовать кнопку «Назад» обычным способом, чтобы вернуться туда, откуда они пришли.  Пользователи должны дважды, очень быстро щелкнуть по кнопке «Назад», прежде чем на предыдущей странице появится возможность выбросить их обратно в набор фреймов, или использовать меню истории кнопки «Назад», чтобы выйти из набора фреймов. 






  Заключительные советы 


  Всегда включайте альтернативные навигационные ссылки для ваших страниц HTML в рамке для тех, у кого нет браузеров с поддержкой фреймов. 


  Всегда, всегда, всегда добавляйте атрибут target="_blank"  В противном случае ваш фрейм может охватывать внешний сайт в пределах его фрейма.  Этот эффект (иногда преднамеренно причиняемый бедным невинным пользователям веб-дизайнерам со злым умыслом, чаще всего используемым на коммерческих сайтах, которые хотят постоянно держать перед собой свой рекламный фрейм), раздражает как веб-пользователей, так и владельцев сайтов, которые не хочу, чтобы ваш набор фреймов «угонял» их контент.  Могут даже быть юридические последствия для захвата других сайтов в ваших фреймах. 


  Не позволяйте фреймам других людей поглощать ваши страницы, добавив этот <meta><head> 








 <meta http-equiv="Window-target" content="top" />


  Создание закладки для страницы HTML в рамке достаточно просто — просто щелкните правой кнопкой мыши внутри фрейма, выберите «Добавить в избранное» или «Добавить закладку», и эта страница в рамке будет добавлена ​​в закладки.  Конечно, большинство современных версий Netscape и Internet Explorer могут создавать закладки на страницах без необходимости щелчка правой кнопкой мыши. 


  Вы можете обмениваться данными между несколькими кадрами, используя <object>  Это немного сложнее, чем остальная часть материала, который я рассмотрел, поэтому я оставлю вам возможность узнать больше о том, как использовать эту команду.  Начните со спецификаций W3C . 


  Предложение, относящееся к тегу <object>  Поскольку я не являюсь ни JavaScript, ни Perl Codemaster, я позволю вам узнать об этом самостоятельно!  Вы также можете начать это исследование с приведенными выше спецификациями W3C и продолжить с собственного отличного учебника SitePoint по проектированию с использованием рамок от неподражаемого Кевина Янка. 


  Хотите узнать, как создать индексную страницу, которая работает как для IE, так и для Netscape, а также для браузеров, которые не поддерживают этот эффект?  About.com имеет хороший небольшой учебник о том, как использовать фрагмент JavaScript для достижения этой цели. 


  Получайте удовольствие от создания и, как всегда, не стесняйтесь комментировать на форумах.  Кто знает, вы можете найти использование фреймов на своем сайте, которое вы раньше не рассматривали! 


  Список используемой литературы 


  Выбор DOCTYPE 
  http://www.htmlhelp.com/tools/validator/doctype.html 


  Смерть метатега 
  http://searchenginewatch.com/sereport/article.php/2165061 


  Проектирование с рамками — Введение 
  http://www.sitepoint.com/article/622 


  Учебник Рам Дуга 
  http://users.snowcrest.net/dougbnt/frametut.html 


  Рамки для пикника 
  http://hotwired.lycos.com/webmonkey/96/31/index3a.html 


  Рамки в документах HTML 
  http://www.w3.org/TR/REC-html40/present/frames.html 


  Рамки без слез 
  http://www.alistapart.com/stories/frames/frames4.html 


  Рамки — почему и почему нет 
  http://webdesign.about.com/library/weekly/aa111097.htm 








  Обрамление Сети 
  http://webreference.com/dev/frames/i 


  Фурор над рамками 
  http://webclipart.about.com/library/weekly/aa062797.htm 


  История HTML 
  http://hotwired.lycos.com/webmonkey/97/17/index0a.html?tw=authoring 


  Как использовать метатеги HTML 
  http://www.searchenginewatch.com/webmasters/article.php/2167931 


  Элемент <IFRAME> </ IFRAME> — встроенные кадры 
  http://webdesign.about.com/library/tags/bltags-iframe.htm 


  IFrames 
  http://webdesign.about.com/cs/frameshelp/a/aaiframe.htm 


  IFrames Lowdown 
  http://hotwired.lycos.com/webmonkey/96/37/index2a.html 


  Входы и выходы фреймов 
  http://www.ddj.com/documents/s=2361/nam1011135274/index.html 


  Введение в рамки 
  http://www.jalfrezi.com/frames.htm 


  Руководство пользователя Lynx, версия 2.8.3 
  http://lynx.isc.org/release/lynx2-8-3/lynx_help/Lynx_users_guide.html 


  Поисковые системы и фреймы 
  http://www.searchenginewatch.com/webmasters/article.php/2167901 


  Некоторые предостережения с использованием фреймов 
  http://www.evolt.org/article/rating/22/293/index.html 


  В кадр или не в кадр? 
  http://www.sitepoint.com/article/122 


  Десять ошибок, пересмотренных три года спустя 
  http://useit.com/alertbox/990502.html 


  Основы веб-разработчика: Глава 5. Фреймы XHTML 
  http://webdevfoundations.net/chapter5/l 


  Веб-фреймы для всех 
  http://webdesign.about.com/library/weekly/aa110199.htm 


  Веб-сайт Администрация 
  http://www.ehsco.com/opinion/19980209.html 


  Почему кадры сосут (большую часть времени) 
  http://www.useit.com/alertbox/9612.html 


  Написание HTML-фреймов для аудио браузеров 
  http://webdesign.about.com/cs/frameshelp/a/aaaccessframes.htm
39
Share: