Macromedia Dreamweaver MX

Пример использования свободно позиционируемых элементов

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

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

Откройте панель Site Dreamweaver, если вы ее уже закрыли. Переключитесь на первый наш сайт Sample site 1. Создайте в этом сайте новую страницу по имени default2.htm. Это и будет наша новая главная страница. Откройте ее.

Автор уже не будет предлагать вам задать ее параметры, т. е. название, цвета фона, текста и гиперссылок. Это само собой разумеется. И не будет предла­гать вам значения этих параметров. Примените фантазию. Единственное условие: ваше творение должно хорошо выглядеть. Хотя, вероятно, наилуч­ший результат — следовать оформлению старой главной страницы этого сайта (помните о принципе единства оформления). Мы так и сделали.

Теперь давайте откроем старую главную страницу. Разместите окна со ста­рой и новой главными страницами на экране так, чтобы они не перекрыва­ли или не сильно перекрывали друг друга. Таким образом, вы будете видеть обе страницы и сможете без проблем копировать содержимое из одной страницы в другую.

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

Скопируйте со старой страницы текст заголовка в созданный нами свобод­ный элемент. Измените тег с <р> (присваиваемый по умолчанию) на <ні> (заголовок первого уровня), выбрав пункт Heading 1 в раскрывающемся списке Format редактора свойств. Задайте для заголовка выравнивание по центру. (Как видите, текст теперь будет выровнен по центру свободного элемента.) Измените размеры свободного элемента так, чтобы он занимал минимальное пространство страницы. Результат показан нарис. 11.15.

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

Создадим данный элемент. Назовем его Headershadow и зададим ему черный цвет фона. После этого переключимся на элемент Header и зададим для него такой же цвет, как у фона самой Web-страницы, иначе расположенный ни­же элемент-тень будет "просвечивать" сквозь него. Заодно установим пара­метр Overflow в hidden, чтобы размеры свободного элемента-заголовка слу­чайно не изменились (Internet Explorer имеет такой грешок). Перепишем (или запомним) значения размеров, местоположения и z-индекса элемента - заголовка. Они потом нам очень пригодятся.

Теперь вернемся к нашему элементу-тени. Зададим для него такую же ши­рину (поле ввода W) и высоту (Н), как и для элемента-заголовка, — это важно. А для горизонтальной и вертикальной координат (поля ввода, соот­ветственно, L и Т) зададим небольшое смещение (пиксела на четыре в большую сторону), ведь тень всегда немного сдвинута относительно "хозяи­на". Z-индекс (поле ввода Z) зададим меньшим, чем у элемента-заголовка. И посмотрим на результат — рис. 11.16.

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

Теперь давайте поместим на страницу начальный текст, содержащий при­ветствие. Это совсем простая задача. Создадим новый свободный элемент, назовем его content и поместим под заголовком. После этого остается толь­ко скопировать в него со старой страницы сам текст приветствия. Результат см. на рис. 11.17.

Точно так же создадим еще один свободный элемент и поместим в него портрет нашего героя. Вновь созданный элемент назовем Photo и поместим его правее текста приветствия. Для портрета зададим достаточно маленькие размеры, чтобы он поместился на небольшом пространстве нашей странич­ки. То, что у вас должно получиться в результате, показано на рис. 11.18.

Следующий элемент — полоса навигации. Но мы с вами не хотим создавать унылую, выровненную по линеечке, словно взвод солдат, замерших по стойке "смирно", полосу навигации. Давайте применим свою фантазию, прибавим к ней изумительные свойства свободно позиционируемых эле­ментов и создадим что-нибудь пооригинальнее. А именно набор гиперссы­лок, "рассыпанных" по всей странице.

Иван И. Иванов (Sample 1 /default2.htm)

І і і і і І і і і і І і і і і 1 і її і і I

Здравствуйте! I

Меня зовут Иван Иванович Иванов. Я

Вольный Web-дизайнер. А это - мой личный Web-сайт, который сделал я сам в Macromedia Dreamweaver MX.

На этом сайте вы можете прочитать: У

«о моих увлечениях:

.о выполненных мной проектах: «подробнее обо мне любимом.

А здесь вы найдете ссылки на другие интернет-ресурсы.

<Ьоф> < di vft Content;- < р> < font:-

Первая такая гиперссылка будет вести на страницу списка увлечений на­шего незабвенного Ивана Ивановича. А именно на страницу Passions. htm. Создадим небольшой новый элемент, назовем его Раззіопзііпк и зададим ДЛЯ него белый фон. После ЭТОГО введем В него СЛОВО Увлечения, выровняем его по центру и превратим в гиперссылку. Результат показан нарис. 11.19.

Остальные гиперссылки делаются по образу и подобию первой. Это проще всего сделать так. Выделите границу первого свободного элемента гипер­ссылки, созданного нами, и скопируйте его в буфер обмена. После чего щелкните мышью где угодно на странице (не на свободно позиционируе­мых элементах), чтобы поставить на нее текстовый курсор, и выполните вставку из буфера обмена. Новый свободный элемент будет помещен прямо поверх старого, который мы и копировали; вам останется только изменить его местоположение, имя и, разумеется, содержимое.

Создайте таким образом все гиперссылки набора и разместите их на стра­нице, назвав, соответственно, Projectsьnk (список завершенных проектов), Linksьnk (набор ссылок на "дружественные" ресурсы) и Aboutlink (сведения об авторе сайта). В результате у вас может получиться что-то похожее на рис. 11.20.

Теперь настала очередь сведений об авторских правах. Поместим их внизу, прямо под текстом приветствия, а свободный элемент назовем copyrights.

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

Вот и вся главная страница. Откройте ее в Web-обозревателе и посмотрите на окончательный результат.

При желании вы можете переделать весь сайт на основе свободно позицио­нируемых элементов. Назовите его Sample site 4 или еще как-нибудь. Таким образом, у вас будет уже четвертый сайт, созданный вашими собственными руками.

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

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