Rambler's Top100
Главная
Скачать (Download)
Dreamweaver CS6
Dreamweaver CS5
Dreamweaver CS4
Dreamweaver 8
Dreamweaver MX 2004
Dreamweaver 4
Уроки (Tutorials)
Видеоуроки new!!!

Fireworks
ЧаВо
Документация
Статьи
Программы и скрипты
Бесплатные шаблоны
Каталог сайтов
Форум
Карта сайта
Контакты

Разработка сайта создание сайта.

Дизайн c CSS - Обзор
- Слои в Dreamweaver
- Вставка блочного контента
- Изменение цвета подсветки блока

главная > Dreamweaver MX 2004 > компоновка страниц с CSS

О слоях в Dreamweaver

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

Note Слой в Dreamweaver - это тег div с абсолютной или относительной позицией.

Понятие слоев

С Dreamweaver, вы можете использовать слои для компоновки страницы. Можно размещать слой перед или за другим слоем, скрывать некоторые слои, показывая другие или двигать по странице.

С помощью слоев доступна большая гибкость в размещении содержания. Однако, браузеры старее Microsoft Internet Explorer 4.0 и Netscape Navigator 4.0 не могут показывать слои и версии 4 браузеров не всегда правильно передают слои.

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

Код HTML для слоев

Когда вы вставляете слой в документ, Dreamweaver вставляет HTML-тег для этого слоя в код страницы. Можно выбрать какой код Dreamweaver-у вставлять - div или span для обозначения слоев. По умолчанию Dreamweaver описывает слои тегом div.

Note Есть еще два других тега для создания слоев: layer и ilayer. Но эти теги поддерживаются только в Netscape Navigator 4; Internet Explorer не поддерживает эти теги и Netscape прекратил поддержку этих тегов в более поздних браузерах. Dreamweaver понимает теги layer и ilayer, но не создает слои с использованием этих тегов.

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

Для улучшения читаемости для старых браузеров, нужно внимательно относится к месту, где размещается код слоя. Код, который описывает слой, может быть в любом месте тела файла HTML. Когда вы рисуете слой в Dreamweaver, слой показывается там где его нарисовали, но Dreamweaver вставляет код слоя в начале страницы, после тега body. При выборе команды Insert Layer (Вставить слой) при рисовании слоя, код вставляется в точку, где стоит курсор. При создании вложенных слоев, Dreamweaver вставляет код в пределах кода, который описывает "отцовский" тег.

Note Не зависимо от того, какой тег используется, версии браузеров Internet Explorer и Netscape Navigator до 4.0 показывают содержимое слоя, но не помещают в слой. Содержимое слоя появится в части страницы где помещен код слоя; например, если код слоя размещен в начале страницы, то в браузере, который не поддерживает слои содержимое слоя покажется в начале страницы.

Пример кода HTML для слоя:

<div id="Layer1" style="position:absolute; visibility:inherit; width:200px; height:115px; z-index:1">
</div>

Пример кода HTML для слоя, который вложен в другой слой:

<div id="Parent" style="position:absolute; left:56px; top:54px; width:124px; height:158px; z-index:1;">
Content inside the parent layer.
<div id="Nested" style="position:absolute; left:97px; top:114px; width:54px; height:69px; z-index:1;">
Content inside the nested layer.
</div>
</div>

Вы можете установить свойства для слоев на странице, включая x и y координаты, z-index (также называют порядком укладки) и visibility.

главная > Dreamweaver MX 2004 > компоновка страниц с CSS

Реклама

Простой конкурс с денежными призами!





Rambler's Top100 Рейтинг@Mail.ru