Фреймовая структура страницы html

Безимени-188Предыдущие разделы содержали общие сведения о создании сайта. Вы получили информацию о том, как размещать текст, создавать ссылки, наполнять текст картинками и задавать цветовой фон. В этом разделе мы научим создавать страницу, используя фреймы.

Прежде всего, вспомним из чего состоит html сайт:

• Наверху html сайта располагается шапка, это может быть картинка или надпись, соответствующая теме. Надпись может отсутствовать, можно обойтись картинкой, это по желанию хозяина сайта. Шапка или header – основной элемент дизайна, привлекающий пользователя. Для шапки используют графику, слоганы, логотипы, все, что запоминается и завлекает.

• С левой, с правой стороны или сверху от контекста, несущего общий смысл, размещается меню html сайта. В меню включаются ссылки на следующие страницы или другие ссылки по теме. Наиболее удобным считается горизонтально размещенное меню, включающее все разделы сайта, правильным будет поместить меню в середине <ul> элемента, после этого основные элементы создаются с помощью CSS-стиля.

• Основной тематический контекст, несущий смысловую нагрузку, располагают в центре.

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

Как создать сайт, используя frame

Что такое frame и для чего его используют? Фрейм представляет собой структуру файлов при помощи которых можно разделить браузерное окно на несколько рабочих частей, они и называются фреймами. Каждый frame располагает своим html – документом и является независимой, отдельной WEB-страницей, имеющей свой электронный адрес.

Основные преимущества фреймов:

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

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

Попробуем создать свою страницу из отдельных элементов. Все произведенные операции напоминают верстку таблиц html. Фрейм – страница имеет одно отличие от html страницы, отсутствует тэг body, отвечающий за тело страницы.

В документах, содержащих фреймы, контейнеры BODY заменяются контейнерами FRAMESET, поэтому необходимо создать новый html документ:

Инструкция:

• Вписываем количество фреймов и их содержимое теги html <frame> внутрь контейнера <frameset></frameset>

• Размещение frame на странице web происходит с использованием атрибутов для <frameset rows и cols. Структура фреймов может быть вертикальной, горизонтальной или комбинированной.

• Для того чтобы создать удобную комбинацию, перед началом работы необходимо накидать схему размещения элементов на листочке и приблизительно представить, как все будет выглядеть и насколько это будет удобно. Только после этого можно приступать к комбинированию страницы.

• Количество вертикальных элементов определяется cols, количество горизонтальных rows.

Если вы хотите расположить фреймы вертикально, то html код будет выглядеть так:

посмотреть результат

 

Используя этот код можно создать три вертикальных frame. Сделать это позволил атрибут cols вписанный в тэг <frameset>. Здесь можно задать ширину каждого элемента, например, ширина первого 150, третьего также 150, второй фрейм располагается на оставшихся пикселях, его обозначаем символом “*”, в котором звездочка и обозначает все оставшееся пространство. Можно не задавать пиксели, а использовать проценты. Например:

Тремя вписанными фреймами мы задали параметры вертикали. Ширина первого фрейма 25% от всей площади экрана, ширина третьего фрейма 30% от площади экрана, второй фрейм занимает оставшееся пространство. Общая сумма должна составлять 100%.

Для frame можно задавать и комбинированные параметры. Например:

Здесь параметры будут выглядеть несколько иначе, ширина первого вложенного фрейма составляет 65 пикселей, ширина третьего фрейма занимает 35% от общей площади экрана, второй элемент занимает оставшееся пространство.

Для того, чтобы разместить элементы горизонтально, используем rows

посмотреть результат

 

Теперь элементы сайта размещены горизонтально.

Комбинированная страница создается совмещением элементов cols и rows, в тэге <frameset>. Создается сложная структура элементов сайта, в которых html код имеет вид:

посмотреть результат

 

Как получить такой html код? Для этого необходимо разделить страницу сайта на горизонтальные элементы атрибутами rows для <frameset>

Следующий шаг создаем первый и третий элемент сайта

Далее работаем над вторым элементом, разбивая его на две колонки и размещаем их во втором элементе. Для этого нам нужно заменить тэг <frame> на <frameset></frameset>, разместив в нем полученные колонки с вписанными фреймами, их должно быть два. Теперь html код получает такой вид:

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

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

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Оставить комментарий

http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика