Иллюстрированный самоучитель по Adobe Dreamweaver MX

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

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

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

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

Иллюстрированный самоучитель по Adobe Dreamweaver MX › Свободно позиционируемые элементы › Пример использования свободно позиционируемых элементов
Рис. 11.17. Заголовок и текст приветствия

Иллюстрированный самоучитель по Adobe Dreamweaver MX › Свободно позиционируемые элементы › Пример использования свободно позиционируемых элементов
Рис. 11.18. Заголовок, текст приветствия и портрет

Первая такая гиперссылка будет вести на страницу списка увлечений нашего незабвенного Ивана Ивановича. А именно на страницу Passions.htm. Создадим небольшой новый элемент, назовем его Passionsiink и зададим для него белый фон. После этого введем в него слово Увлечения, выровняем его по центру и превратим в гиперссылку. Результат показан на рис. 11.19.

Иллюстрированный самоучитель по Adobe Dreamweaver MX › Свободно позиционируемые элементы › Пример использования свободно позиционируемых элементов
Рис. 11.19. Заголовок, текст приветствия, портрет и гиперссылка

Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.