Опубликован: 24.12.2006 | Доступ: свободный | Студентов: 2670 / 211 | Оценка: 4.51 / 4.22 | Длительность: 23:31:00

Урок 1: Введение в Newland Tours

Форматирование страницы контактов

В этом упражнении разрывы строк в тексте будут преобразованы в абзацы. Помимо этого, будут использованы некоторые инструменты Dreamweaver для разметки веб-документов. В первую очередь, разобьем содержимое веб-документов по абзацам.

  1. В режиме Design (Дизайн) поместите курсор между надписями Contact a Newland Tours Agent (Установите связь с агентом Newland Tours) и If you are interested (Если вы заинтересованы), трижды нажмите клавишу (Del), чтобы удалить разрывы строк , а затем – (Enter) (Windows) или (Return) (Macintosh).

    Dreamweaver разделит текст на два абзаца и поместит каждый из них между тегами <p> и </p>.

  2. Повторите шаг 1, чтобы вставить разрыв абзаца перед каждым из следующих слов: By Mail, Newland Tours, 123 Wharton, New York, By Email, info@newlandtours.com, (555) и Image.

    По завершении этого шага содержимое основной области окна будет разбито на десять абзацев. Может быть, пока текст выглядит не слишком эффектно, но, по крайней мере, он уже определенным образом отформатирован.

  3. В режиме Design (Дизайн) поместите курсор внутри первого абзаца Contact a Newland Tours Agent (Установите контакт с агентом Newland Tours). В меню Format (Формат) на панели Inspector Property (Инспектор свойств) выберите пункт Heading 1 (Заголовок 1).

    Заголовок страницы примет соответствующий внешний вид. В режиме Code (Код) тег <p> для этого абзаца окажется заменен на тег <h1>, который отмечает заголовок первого уровня.

    Также следует обратить внимание, что заголовок страницы находится довольно близко к баннеру. Чтобы увеличить расстояние между ними, следует добавить тег для принудительного перехода на следующую строку строки <br>.

    .
  4. В режиме Code (Код) между открывающим тегом <h1> и словом Contact введите <br>, чтобы создать разрыв строки.

    Чтобы увидеть результаты разметки в режиме Design (Дизайн), следует щелкнуть в соответствующей области окна документа.


  5. В режиме Design (Дизайн) поместите курсор перед текстом If you are interested (Если вы заинтересованы) и щелкните на кнопке Images (Изображения) в категории Common (Общий) на панели Insert (Вставка).

    В результате, изображения встроены в веб-документ вместе с HTML-кодом и текстом, – так что следует аккуратно выбирать место для вставки изображения.

    Следует обратить внимание, что справа от кнопки Images есть маленькая треугольная стрелка, с помощью которой можно раскрыть раскрывающийся список. При щелчке на стрелке обнаружится множество других связанных с изображениями элементов, которые можно вставить из этого списка, включая заполнители изображений, интерактивные и переключающиеся изображения, так называемые активные точки (hotspots), предназначенные для активации функций или объектов и т. д. В книге эти элементы использоваться не будут, но важно знать об их существовании. Остальные кнопки на панели Insert (Вставка) скрывают сходные команды.


  6. В диалоговом окне Select Image Source (Выбор источника изображений) выберите файл fountain_versailles.jpg, расположенный в папке сайта images. Нажмите OK.

    Помимо того, что это диалоговое окно позволяет выбрать изображение, так, чтобы Dreamweaver мог сгенерировать к нему корректный путь от страницы contact.htm, оно содержит несколько других возможностей и настроек. К ним относятся предварительный просмотр изображений, информация об объеме и размерах изображения, а также опции, позволяющие выбрать тип ссылки: относительно документа или корня сайта (по умолчанию выбран тип, задаваемый относительно документа, который и нужен в данный момент).

    В верхней части диалогового окна есть опция Select File Name From (Выберите имя файла из). Для нее существует два варианта выбора: File system (Файловая система) (указание файла, расположенного на компьютере) или Data sources (Источники данных) (динамический запрос адреса из базы данных). В книге будут задействованы оба варианта. На этом шаге нужно выбрать вариант File system.


  7. Не снимая выделения с добавленного на веб-страницу изображения, на панели инспектора свойств измените тип выравнивания для изображения в меню Align (Выравнивание) на Left (По левому краю).

    По умолчанию страница обычно выравнивается по левому краю одной строки текста, в то время как остальной текст располагается ниже изображения. В результате, на странице остается много свободного места. Если выбран вариант Left (По левому краю) (или, наоборот, Right [По правому краю]), то будет происходить обтекание текстом изображения.