Учебник Macromedia Dreamweaver (стр. 84 из 135)
Рис. 11.19. Заголовок, текст приветствия, портрет и гиперссылка
Остальные гиперссылки делаются по образу и подобию первой. Это проще всего сделать так. Выделите границу первого свободного элемента гиперссылки, созданного нами, и скопируйте его в буфер обмена. После чего щелкните мышью где угодно на странице (не на свободно позиционируемых элементах), чтобы поставить на нее текстовый курсор, и выполните вставку из буфера обмена. Новый свободный элемент будет помещен прямо поверх старого, который мы и копировали; вам останется только изменить его местоположение, имя и, разумеется, содержимое.
Создайте таким образом все'гиперссылки набора и разместите их на странице, назвав, соответственно, Projectsiink (список завершенных проектов), Linkslink (набор ссылок на "дружественные" ресурсы) и Aboutlink (сведения об авторе сайта). В результате у вас может получиться что-то похожее на рис. 11.20.
Теперь настала очередь сведений об авторских правах. Поместим их внизу, прямо под текстом приветствия, а свободный элемент назовем copyrights.
Рис. 11.20. Заголовок, текст приветствия, портрет и готовый набор гиперссылок
Рис. 11.21. Заголовок, текст приветствия, портрет, набор гиперссылок и сведения об авторских правах
Не забываем выровнять текст по правой стороне. Получится у нас вот что (рис. 11.21).
Вот и вся главная страница. Откройте ее в Web-обозревателе и посмотрите на окончательный результат.
При желании вы можете переделать весь сайт на основе свободно позиционируемых элементов. Назовите его Sample site 4 или еще как-нибудь. Таким образом, у вас будет уже четвертый сайт, созданный вашими собственными руками.
В этом случае вам сильно могут помочь шаблоны, описанные в главе 9. Создайте шаблон, содержащий заголовок, набор гиперссылок и сведения об авторских правах, поместите на нем пустой свободный элемент, где будет находиться содержимое страниц, и преобразуйте его в изменяемую область. После этого вам только останется создать на основе этого шаблона новую страницу и вписать в эту изменяемую область нужное содержимое.
Конечно, никто не заставляет вас использовать шаблоны. Вы можете сделать каждую страницу сайта непохожей на другие. Благо свободно позиционируемые элементы дают вам такую возможность.
Недостатки свободно позиционируемых элементов и их преодоление
Напоследок, по уже устоявшейся традиции, поговорим о недостатках свободно позиционируемых элементов. Итак, чем же они нам не угодили?
Прежде всего, свободно позиционируемые элементы предполагают статичный дизайн Web-страниц, не меняющийся при изменении размеров окна Web-обозревателя. Поясним это на примере. Когда вы просматриваете в Web-обозревателе обычную страницу, при изменении размеров окна, в котором она отображается, содержимое страницы также меняет размеры. Загрузите в Web-обозревателе страницу default.htm нашего первого сайта Sample site 1 и измените размеры его окна. Вы увидите, что ее содержимое "расползается" или "сужается" для того, чтобы максимально полно занять окно по ширине. А теперь загрузите только что законченную страницу default2.htm, попробуйте изменить размеры окна — и что же? Свободные элементы в любом случае остаются на своих местах, не делая попытки "подстроиться" под новые размеры., Они статичны, как гвозди, вколоченные в стену.
"Классические" Web-страницы почти всегда разрабатываются с определенным запасом "гибкости", позволяющей им подстраиваться под любой размер окна Web-обозревателя. Исключений из этого правила всего два: страницы, созданные на основе таблицы разметки фиксированной ширины, и... на основе свободно позиционируемых элементов.
В самом деле, свободные элементы всегда находятся на тех местах страницы, куда вы их поместили. Сдвинуть их с места средствами HTML абсолютно невозможно. Язык HTML не предназначен для того, чтобы описывать поведение элементов страницы при наступлении какого-либо события, например изменения размеров окна Web-обозревателя. HTML описывает внешний вид страницы — и только. Если же вы хотите, чтобы при изменении размеров окна менялся также и дизайн страницы, пишите сценарии на языке программирования JavaScript, помещайте их в HTML-код и привязывайте к соответствующим событиям. Но для этого нужно быть не только знатоком HTML и JavaScript, но и виртуозным программистом, да и в этом случае у вас может не все получиться.
Бесспорно, что в некоторых случаях статичность свободных элементов может быть даже полезна. Если вы разрабатываете стильный "авторский" дизайн, свободные элементы помогут вам сделать то, что надо, и сохранить все на своих местах. Также свободные элементы могут пригодиться для создания дизайна, напоминающего интерфейс Windows-приложений. И, разумеется, без свободных элементов не обойтись, если вы собираетесь оживить свои страницы анимацией. В других случаях, вероятно, лучше обойтись "классическими" Web-страницами.
Так, со статичностью разобрались. Какие же сюрпризы еще приготовили нам свободные элементы?
Несовместимость.
Как вы помните, свободно позиционируемые элементы возникли одновременно с каскадными таблицами стилей CSS. И программами Web-обозревателей они стали также поддерживаться одновременно: в 1997 году, начиная с четвертых версий Internet Explorer и Navigator. С более старыми версиями они не совместимы.
Что значит "несовместимы"? Не поддерживают. Содержимое свободно позиционируемых элементов они отобразят, конечно, правильно, только находиться оно будет в общем "потоке" текста. И уж, естественно, сложнейший дизайн, над которым столько дней и ночей корпел автор, исчезнет без следа. И ничего тут не сделаешь.
Конечно, в настоящее время подавляющее большинство программ Web-обозревателей, эксплуатируемых интернетчиками, составляют более-менее "свежие". Процент же старых программ настолько мал, что им можно пренебречь. Но вполне возможна такая ситуация, что вам придется делать страницы, которые обязательно должны поддерживаться всеми версиями этих программ (за исключением, может быть, самых уж древних и экзотических). Что делать в таком случае?
Самый очевидный путь — преобразовать дизайн Web-страниц, построенный на свободных элементах, в графическое изображение, простое или составное, состоящее из множества простых. Это графическое изображение может представлять собой либо набор изображений-гиперссылок (для составных изображений), либо карту-изображение (для простых). Однако этот путь подходит только для небольшого процента страниц, в основном тех, где свободные элементы содержат в себе только элементы дизайна (изображения, гиперссылки, редко меняющийся текст и т. п.). Если на вашей странице в свободных элементах помещаются тексты новостей или полезных советов, отбираемых из базы данных по случайному признаку, — согласитесь, этот путь не для вас.
Второй путь — преобразовать свободные элементы в таблицы разметки, т. е. использовать табличный дизайн. Это решает многие проблемы. (Если, конечно, свободные элементы не являются жизненно необходимыми, например, для создания анимации.) Благо Dreamweaver предоставляет для такого решения стандартные инструменты преобразования свободных элементов в таблицы и, наоборот, таблиц в свободные элементы.
Один из таких инструментов мы уже использовали в главе 10, когда преобразовывали стили CSS в HTML-разметку. Этот инструмент доступен после выбора пункта 3.0 Browser Compatible подменю Convert меню File. На рис. 10.39 показано диалоговое окно Convert to 3.0 Browser Compatible, открывающееся после выбора названного пункта. В группе переключателей Convert мы рассмотрели только переключатель CSS Styles to HTML Markup, выполняющий упомянутое выше преобразование. А для преобразования свободных элементов в таблицы предназначен переключатель Layers to Table. Переключатель Both преобразует и то и другое.
Однако существует и другой инструмент, позволяющий выполнить более точное преобразование. Он появляется после выбора пункта Layers to Table в подменю Convert меню Modify. Точнее, не инструмент, а появляющееся при этом диалоговое окно Convert Layers to Table, показанное на рис. 11.22.
Рис. 11.22. ДиалоговоеокноConvert Layers to Table
Элементы управления группы Table Layout задают параметры таблицы разметки, которая будет сгенерирована Dreamweaver на основе исходного набора свободных элементов.
Переключатель Most Accurate включает режим максимально точного преобразования. При этом будут соблюдены все размеры и расстояния. В свою очередь, переключатель Smallest: Collapse Empty Cells предписывает Dreamweaver убрать из получившейся таблицы ячейки и строки, размеры которых меньше заданной в поле ввода Less than Pixels Wide величины. (Данная величина задается в пикселах.) При этом получившаяся таблица разметки может немного отличаться от того, что планировалось, но будет компактнее.
Включенный флажок Use Transparent GIFs предписывает Dreamweaver использовать в получившейся таблице разметки "распорки" из прозрачных однопиксельных GIF-изображений. В этом случае таблица разметки будет правильно отображаться любым браузером. Рекомендуется всегда оставлять этот флажок включенным.
Включенный флажок Center on Page заставляет Dreamweaver помещать получившуюся таблицу разметки в центре страницы.
Флажки группы Layout Tools задают вспомогательные параметры: