Пример использования свободно позиционируемых элементов
Напоследок рассмотрим небольшую Web-страницу, использующую свободно позиционируемые элементы для размещения содержимого. Пусть это будет новая начальная страница для нашего сайта. Разместим на ней заголовок, портрет гипотетического создателя, полосу навигации, начальный текст и сведения об авторских правах. Предположим, что мы уже разработали умопомрачительный дизайн, и перейдем сразу к следующему этапу.
Откройте панель Site Dreamweaver, если вы ее уже закрыли. Переключитесь на первый наш сайт Sample site 1. Создайте в этом сайте новую страницу по имени default2.htm. Это и будет наша новая главная страница. Откройте ее.
Автор уже не будет предлагать вам задать ее параметры, т. е. название, цвета фона, текста и гиперссылок. Это само собой разумеется. И не будет предлагать вам значения этих параметров. Примените фантазию. Единственное условие: ваше творение должно хорошо выглядеть. Хотя, вероятно, наилучший результат – следовать оформлению старой главной страницы этого сайта (помните о принципе единства оформления). Мы так и сделали.
Теперь давайте откроем старую главную страницу. Разместите окна со старой и новой главными страницами на экране так, чтобы они не перекрывали или не сильно перекрывали друг друга. Таким образом, вы будете видеть обе страницы и сможете без проблем копировать содержимое из одной страницы в другую.
Как любой театр начинается с вешалки, так и любая Web-страница начинается с заголовка. Для него мы создадим свободно позиционируемый элемент, расположенный в верхней части страницы, и назовем его Header. Просто создадим его, не заботясь о реальных размерах и местоположении. Все эти параметры мы скорректируем потом, когда будет готово все содержимое страницы.
Скопируйте со старой страницы текст заголовка в созданный нами свободный элемент. Измените тег с <р> (присваиваемый по умолчанию) на <H1> (заголовок первого уровня), выбрав пункт Heading 1 в раскрывающемся списке Format редактора свойств. Задайте для заголовка выравнивание по центру. (Как видите, текст теперь будет выровнен по центру свободного элемента.) Измените размеры свободного элемента так, чтобы он занимал минимальное пространство страницы. Результат показан на рис. 11.15.
Продолжаем работу над страницей. Давайте создадим тень для нашего свободно позиционируемого заголовка. Для этого поместим под него еще один свободно позиционируемый элемент точно таких же размеров, но не имеющий содержимого и "залитый" черным цветом. Это обычная практика в такого рода случаях.
Рис. 11.15. Заголовок страницы Layers.htm
Создадим данный элемент. Назовем его Headershadow и зададим ему черный цвет фона. После этого переключимся на элемент Header и зададим для него такой же цвет, как у фона самой Web-страницы, иначе расположенный ниже элемент-тень будет "просвечивать" сквозь него. Заодно установим параметр Overflow в hidden, чтобы размеры свободного элемента-заголовка случайно не изменились (Internet Explorer имеет такой грешок). Перепишем (или запомним) значения размеров, местоположения и z-индекса элемента-заголовка. Они потом нам очень пригодятся.
Теперь вернемся к нашему элементу-тени. Зададим для него такую же ширину (поле ввода W) и высоту (Н), как и для элемента-заголовка, – это важно. А для горизонтальной и вертикальной координат (поля ввода, соответственно, L и Т) зададим небольшое смещение (пиксела на четыре в большую сторону), ведь тень всегда немного сдвинута относительно "хозяина". Z-индекс (поле ввода Z) зададим меньшим, чем у элемента-заголовка. И посмотрим на результат – рис. 11.16.
Рис. 11.16. Готовый заголовок с тенью
Красиво, не так ли? Единственный недостаток: если вы хотите изменить размеры и (или) местоположение такого заголовка, вам также придется, соответственно, изменить размеры и (или) местоположение его тени.