.

Фреймы

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

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

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

Плавающие фреймы (iframes)

Плавающие фреймы (iframes, сокращенно от inline frames) — интересная вариация концепции фреймов. Большинство Web-разработчиков “воротят нос” при одном только упоминании о фреймах (по причине, указанной выше). Плавающие фреймы получили еще меньшее признание в кругах профессионалов. В отличие от обычных фреймов, когда вся Web- страница делится на множество отдельных фреймов, плавающий фрейм можно разместить в любом месте на странице, причем только один, как изображение. На моем сайте акварелей www. lopuck. com в разделе с галереей используется концепция п твакяцих фреймов (рис. 13.6).

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

Таблицы

Еще один способ разбивки содержимого страницы — с помощью таблиц. В отличие от фреймов, таблицы не делят страницу на множество отдельных частей. Вместо этого таблица размещается на Web-странице, как плавающий фрейм. Таблица представляет собой сетку, в ячейки которой помещается различное содержимое. Сетку таблицы можно “расчертить” произвольным образом, что позволяе г упорядочить содержимое макета страницы. В результате вы получите желаемое количество ячеек, каждая из которых является мини-Web-страницей.

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

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

CSS: тег <div>

Наиболее современным подходом к распределению содержимого на странице считается применение CSS-тегов (каскадных таблиц стилей) <div>. Каждый тег <div> позволяет выделить фрагмент Web-страницы, содержащий какой-либо HTML-элемент, например таблицу, форму, графику, Flash-анимацию и др. По сути, каждый тег <div> — это отдельная Web- страница. Более того, на одной странице можно определить неограниченное количество тегов <div>. Теги могут частично или полностью перекрывать дпут зру1 а либо быть вложенными Посему теги <div> часто называют CSS-слоями.

Вы можете задать порядок перекрытия слоями друг друга, для чего необходимо в теге <div> определить атрибут z-index.

<div id="NewLayer" style="position:absolute; left:128px; 4>top:70px: width:400px; height:300; z-index:l"> ^New Layer</div>

Основная схема структуры таблицы

Элементы, расположенные в ячейках таблицы find the perfect Rift at the riRht price!

Iill out our search form to help us find the perfect gift.

This gift is for I (select one)

Occeoion (select one)

LCh dO yOU vent to spend

Host much do you i50 0(j

ID

Чем больше значение атрибута z-inde.х, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. Можно получить очень ин ересный эффект наложения слоев <div> с разным HTML текстом.

Программа Macromedia Dreamweaver поддерживает технологию CSS, что позво- ляет без особого труда создавать Web-страницы со слоями и CSS-стилями. Щелкните и перетащите тег <div> на свою страницу, а затем добавьте внутрь него какие-либо HTML-элементы. Вы можете перемещать элементы в любое место на макете страницы

Использование в полном объеме всех возможностей языка HTML позволяет не только эффективно управлять разбивкой макета Web-страницы, но и помогает организовать графический дизайн сайта. Визуальные эффекты в HTML достигаются за счет использования: таблиц, CSS-стилей и гегов <div>, фонового узора и сплошного цвета заливки. Например, используя раскрашенные таблицы, вы сокращаете необходимость в дополнительной графике.

Чем меньше графики и больше HTML-кода, тем выше производительность Web-сайта. Кроме того, когда больше кода, чем графики, страницу значительно проше обновить, перевести на другие языки, автоматизировать с применением технологии DHTML (динамического HTML).

Выделение таблиц цветом

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

Взгляните на превосходную 1рафику, представленную 13.9. На самом деле здесь вообще нет никакой графики Дизайн построен на базе достаточно сложной HTML-таблицы, показанной 13.10. Яркая схема достигнута за счет разноцветной раскраски ячеек таблицы, реализованной с помощью атрибута bgcolor.



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×