11. Слои в Dreamweaver
Как создается слой в Dreamweaver
Итак, мы выяснили, что такое слой. Осталось разобраться, как он создается.
Рассмотрим небольшую страницу, содержащую фрагмент текста. Ее HTML-код приведен ниже.
<HTML>
<HEAD>
<ТITLЕ>Пример WEB-странииы</ТITLЕ>
</HEAD>
<BODY>
<Р>Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это,текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя.</Р> </BODY> </HTML>
Как видите, ничего сложного в нем нет. Эта страничка специально была максимально упрощена, чтобы никакие "навороты" не отвлекали вас от главного.
Что же мы увидим, если откроем данную страничку в Web-обозревателе 0 Ничего особенного: просто абзац с повторяющимся текстом. Вы можете проверить, если не верите автору на слово.
Этот текст — типичный пример фиксированного элемента страницы, находящегося в "потоке" текста и зависящего от "соседей". В данном случае, правда, никаких "соседей" нет. Однако Web-обозреватель сам решает, где и как расположить этот абзац, основываясь на свободном пространстве, которое он может ему отвести. Мы не можем поместить этот абзац там, где хочется, и дать ему нужные размеры.
Теперь преобразуем его в слой. Для этого просто допишем кое-какой код (в листинге он выделен полужирным шрифтом).
<HTML>
<HEAD>
<ТITLE>Пример WEB-страницы</ТITLE>
<STYLE>
#para (position: absolute; left: 50; top: 50; width: 200; height: 100;
background-color: #00FF00;}
</STYLE>
</HEAD>
<BODY>
<DIV ID="рага">
Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя.
</DIV>
</BODY>
</HTML>
Сохраните этот код в файле под именем 11.1.htm и откройте его в Web-обозревателе. Результат показан на рис. 11.1.
Вот мы и сделали первый слой. И для этого нам потребовалось внести в исходный HTML-код совсем небольшие изменения. Давайте рассмотрим их подробнее.
Прежде всего мы для создания абзаца использовали тег <DIV> вместо тега <р>. Тег <DIV> применяется для создания любого элемента страницы, фиксированного или свободно позиционируемого, содержащего внутри себя любое, простое или сложное, содержимое. В частности, его можно использовать для создания обычного текстового абзаца, что только что и было сделано. А элемент страницы, созданный с помощью тега <р>, т. е. обычный текстовый абзац, не может быть позиционирован свободно.
Затем мы дали нашему слою уникальное имя. Назвали его para и сделали это с помощью атрибута ID, поддерживаемого практически всеми "видимыми" тегами. С помощью данного имени мы в дальнейшем зададим для этого абзаца стиль.
Такой принцип создания слоёв использовался старыми версиями Dreamweaver. Две более свежие версии — 4.0 и MX — применяют для этого внутренние стили, что, на взгляд автора, порождает более компактный HTML-код, но, возможно, менее наглядно.
Теперь рассмотрим таблицу стилей. В ней мы использовали множество новых атрибутов, которые сейчас и рассмотрим.
Этот атрибут делает элемент страницы свободно позиционируемым:
position: absolute;
Запомните его — он обязательно должен присутствовать в определении стиля любого слоя. Если у вас что-то не работает, прежде всего, проверьте, задали ли вы для данного атрибута соответствующее значение. У обычного фиксированного элемента названный атрибут установлен в значение static. Это же его значение по умолчанию.
Эти атрибуты задают, соответственно, горизонтальную и вертикальную координаты левого верхнего угла слоя:
left: 50; top: 50;
В данный момент они заданы в пикселах, хотя вы можете использовать любую из поддерживаемых CSS единиц измерений. Имейте в виду, что данные атрибуты имеют силу только для слоёв, т. е. тех, у которых атрибут position установлен в значение absolute.
Примечание
Запомните, что координаты слоя отсчитываются относительно родителя, а не относительно окна Web-обозревателя. Поскольку в нашем случае родителем является сама страница, это несущественно, но, вообще, об этом забывать не следует.
А эти атрибуты задают, соответственно, ширину и высоту слоя:
width: 200; height: 100;
Они также даны в пикселах, хотя могут быть заданы в любой другой из поддерживаемых CSS единиц измерения. И также имеют силу только у свободно позиционируемых элементов.
А теперь взгляните еще раз на рис. 11.1. Вы видите, что высота нашего слоя заметно больше ста пикселов (сравните ее с шириной). Дело в том, что по умолчанию слой растягивается по вертикали, если его содержимое в нем не помещается. А у нас как раз такой случай. (Как уже говорилось, вы можете задать другое поведение, но об этом позже.)
background-color: #00FF00;
Здесь специально задан зеленый фон для свободно позиционируемого элемента, чтобы он был заметнее.
А теперь держитесь крепче! Добавлением всего одной строки в таблицу стилей мы превратим слой в небольшую "страничку в странице" (добавленный текст выделен полужирным шрифтом).
#para {position: absolute; left: 50; top: 50; width: 200; height: 100;
background-color: #OOFFOO; overflow : scroll }
Сохраните новый файл под именем 11.2.htm и откройте его в Web-обозревателе. И как оно вам (рис. 11.2)?
Давайте еще раз взглянем на добавленную нами строку:
overflow: scroll
overflow — атрибут, как раз и задающий поведение слоя, когда его содержимое в нем не помещается. Значение по умолчанию — auto — заставляет слой растягиваться по вертикали, что мы и наблюдали в предыдущем случае. А значение scroll отображает полосы прокрутки.
Теперь посмотрим, как это выглядит в Dreamweaver.
<HTML> <HEAD>
<ТITLE>Пример WEB-страницы</ТITLE>
<SCRIPT>
<!— Сценарий, необходимый для нормальной работы этой Web-страницы в старых версиях Navigator —> </SCRIPT> </HEAD> <BODY>
<DIV ID="para" STYLE="position: absolute; left: 50; top: 50; width: 200; height: 100; background-color: #00FF00; overflow: scroll">
Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя.
</DIV>
</BODY> </HTML>
Этот код дает тот же самый результат, что и предыдущий. Просто выглядит более компактным, особенно если выбросить код сценария, "отвечающего" за совместимость с Navigator.
Вот и все. Как видите, превратить фиксированный элемент страницы в свободный не составляет особого труда. Нужно всего лишь задать соответствующие стили и заменить теги <р> на <DIV>. А в большинстве случаев вам даже не нужно будет более-менее серьезно переделывать дизайн ваших страниц, если, конечно, они не основаны на фреймах или таблицах.
Вопрос в другом. Так ли уж нужны нам эти слои?