Свободно позиционируемые элементы

Глава 11. Свободно позиционируемые элементы Глава 12. Анимация элементов Web-страниц Глава 13. Использование сценариев Глава 14. Метатеги и серверные директивы...

Работа с группой свободно позиционируемых элементов Dreamweaver, кроме всего прочего, позволяет выделить одновременно несколько свободно позиционируемых элементов и произвести над ними некотор...

Рисунок 11.10. Группа выделенных свободно позиционируемых элементов Для задания выравнивания используется четыре других пункта подменю Align меню Modify: Left (комбинация клавиш <Ctrl&...

Работа со свободно позиционируемыми элементами Если на вашей странице создано несколько свободно позиционируемых элементов, управлять ими удобнее всего в специальной панели. Панель Layers появ...

Рисунок 11.11. Панель Layers Как видите, большую часть этой панели занимает список свободно позиционируемых элементов, имеющихся на странице. Данный список представляет собой таблицу, состоящ...

Рисунок 11.12. Три свободно позиционируемых элемента (сверху вниз): невидимый, видимый, "наследующий" видимость у родителя Самая интересная возможность, предлагаемая панелью Layers,...

Рисунок 11.13. Вложенные свободно позиционируемые элементы в списке панели Layers Как видите, в случае наличия вложенных свободных элементов в списке создается "дерево", "расту...

Рисунок 11.14. Структуры свободно позиционируемых элементов многократной вложенности Если вы хотите "вынести" вложенные элементы из родителя, просто перетащите их в нужную позицию в...

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

Рисунок 11.15. Заголовок страницы Layers.htm Создадим данный элемент. Назовем его Headershadow и зададим ему черный цвет фона. После этого переключимся на элемент Header и зададим для него та...

Рисунок 11.16. Готовый заголовок с тенью Красиво, не так ли? Единственный недостаток: если вы хотите изменить размеры и (или) местоположение такого заголовка, вам также придется, соответствен...

Рисунок 11.17. Заголовок и текст приветствия...

Рисунок 11.18. Заголовок, текст приветствия и портрет Первая такая гиперссылка будет вести на страницу списка увлечений нашего незабвенного Ивана Ивановича. А именно на страницу Passions.htm....

Рисунок 11.19. Заголовок, текст приветствия, портрет и гиперссылка Остальные гиперссылки делаются по образу и подобию первой. Это проще всего сделать так. Выделите границу первого свободного...

Рисунок 11.20. Заголовок, текст приветствия, портрет и готовый набор гиперссылок...

Рисунок 11.21. Заголовок, текст приветствия, портрет, набор гиперссылок и сведения об авторских правах Не забываем выровнять текст по правой стороне. Получится у нас вот что (Рисунок 11.21)....

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

Рисунок 11.22. Диалоговое окно Convert Layers to Table Элементы управления группы Table Layout задают параметры таблицы разметки, которая будет сгенерирована Dreamweaver на основе исходного н...

Рисунок 11.23. Диалоговое окно Convert Tables to Layers В этом окне находится только группа флажков Layout Tools, уже нам знакомая. Поэтому не будем описывать ее снова, а скажем только, что к...

Что дальше? Вот мы и познакомились со свободно позиционируемыми элементами. И даже сделали одну Web-страничку на их основе. И что с того? Все это можно было сделать традиционными путями, исп...

ГЛАВА 11. Свободно позиционируемые элементы Свободно позиционируемые элементы — совсем недавнее нововведение в HTML. Фактически они появились в 1997 году, одновременно с таблицами стилей. И...

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

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

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

Как создается свободно позиционируемый элемент Итак, мы выяснили, что такое свободно позиционируемый элемент. Осталось разобраться, как он создается. Рассмотрим небольшую Web-страничку, соде...

Рисунок 11.1. Свободно позиционируемый абзац текста на странице 11.1.htm Теперь рассмотрим таблицу стилей. В ней мы использовали множество новых атрибутов, которые сейчас и рассмотрим. Этот...

Рисунок 11.2. Свободно позиционируемый абзац текста с возможностью прокрутки содержимого Теперь посмотрим, как это выглядит в Dreamweaver MX, т. е. самой последней (да и в предыдущей версии —...

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

Работа со свободно позиционируемыми элементами Теперь рассмотрим, как в Dreamweaver создаются свободно позиционируемые элементы....

Создание свободно позиционируемых элементов Создайте в Dreamweaver новую Web-страницу. С ней мы и будем экспериментировать. Однако прежде, чем начинать свои эксперименты, давайте выполним нек...

Рисунок 11.3. Кнопка Draw Layer панели объектов Однако после нажатия этой кнопки новый свободный элемент на странице не появится. Его нужно будет нарисовать примерно так же, как мы рисовали я...

Рисунок 11.4. Свободно позиционируемый элемент в окне документа Dreamweaver Второй способ создания свободного элемента — выбор пункта Layer меню Insert. В этом случае вам не придется рисовать...

Рисунок 11.5. Свободно позиционируемый элемент с выделенной границей Как видите, в данном случае свободно позиционируемый элемент предлагает вам набор маркеров изменения размера. Кроме того,...

Рисунок 11.6. "Захват" свободно позиционируемого элемента Кроме всего прочего, в окне документа заметен некий значок, представленный на Рисунок 11.7. Это значок свободного элемента...

Рисунок 11.7. Значок свободно позиционируемого элемента Чтобы удалить свободный элемент, выделите его границу и нажмите клавишу <Del>. Вы также можете создавать свободно позиционируемы...

Рисунок 11.8. Свободно позиционируемые элементы, вложенные друг в друга (сетка временно отключена) Вы уже знаете, что свободно позиционируемые элементы могут перекрывать друг друга. Обычно э...

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

Рисунок 11.9. Вид панели редактора свойств при выделенном свободном элементе (тег <DIV> или <SPAN>) В поле ввода Layer ID вводится уникальное имя свободного элемента. Dreamweaver...