Порядок выполнения практического задания

 

Создадим сайт, состоящий из нескольких web-страниц. Все необходимые изображения находятся в папке office. Одна из страниц сайта представлена на рисунке 1.7.

 

Рис. 1.7. Страница «о компании»

 

Прежде всего создайте папку Office, в которую вы будете сохранять все созданные web-страницы, и скопируйте туда изображения кнопок и верхней графической части.

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

 

Рис. 1.8. Схема разметки

 

Для кнопок навигационного меню используется вложенная таблица, вставленная в левую ячейку основной таблицы.

Создадим основную таблицу. На панели Insert (Вставка) щелкните на кнопке Table(Таблица). Откроется диалоговое окно Table(Таблица), в котором можно определить такие параметры таблицы, как Rows (Строки) и Columns(Столбцы), Table width (ширина таблицы), Border thickness (Толщина границы), Cell padding (Отступ в ячейке) и Cell spacing (Расстояние между ячейками). Итак, в основной таблице 2 строки и 2 столбца. Задайте параметры будущей таблицы, как показано на рисунке 1.9.

Ячейки первой строки объединены для вставки графического изображения. Поэтому выделите их и на панели свойств, щелкнув на кнопке Merge Cells (Объединить ячейки), или выберите из основного меню команду Modify Table Merge Cells (Изменить Таблица Объединить ячейки).

Вставьте в эту ячейку изображение header.jpg, выбрав на панели Insert (Вставка) кнопку Image (Изображение).

 

Рис. 1.9. Параметры основной таблицы

 

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

Вставьте в ячейки созданной таблицы изображения кнопок.

Обратите внимание, что в поле Src необходимо удалить путь доступа к файлу, оставив только его название. Это необходимо для устранения проблем с отображением графики при размещении сайта на удаленном сервере.

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

Основное содержание страницы состоит из заголовка и маркированного списка.

Наберите в правой ячейке основной таблицы текст: НАШИ НАПРАВЛЕНИЯ

Чтобы сделать этот текст заголовком 3 уровня, выделите его и на панели свойств в поле Format (Формат) выберите пункт Heading 3(Заголовок 3), в поле Font (Шрифт) - список шрифтов Times New Roman, Times, serif, как показано на рисунке 1.10.

 

Рис. 1.10. Оформление заголовка

 

Наберите пункты маркированного списка, предварительно нажав кнопку Unordered List (маркированный список) на панели свойств текста:

· доверительное управление капиталом;

· сопровождение сделок;

· поддержка и развитие малого бизнеса;

· маркетинговые исследования.

Для удобства редактирования html-кода страницы, отображающегося в окне кода, изменим кодировку страницы. Для этого нажмите на кнопку Page Properties (свойства страницы) на панели свойств. В открывшемся диалоговом окне выберите категорию Title/Encoding (Заголовок/Кодировка) и задайте заголовок страницы и кодировку, как указано на рисунке 1.11.

Для просмотра страницы в браузере можно воспользоваться командой FilePreview in Browser (ФайлПросмотреть в браузере), предварительно сохранив созданную страницу под названием about_comp.html в своей папке.

Самостоятельно отредактируйте страницу таким образом, чтобы границы таблицы не отображались.

 

Рис. 1.11. Смена кодировки

 

Создадим ещё одну страницу, в основной части которой размещена форма, как показано на рисунке 1.12.

 

Рис. 1.12. Страница «контакты»

 

В качестве основы используем уже созданную нами страницу about_comp.html. Для этого воспользуйтесь командой FileSave as(Файл Сохранить как) и сохраните страницу под названием contacts.html. Удалите содержимое правой ячейки, чтобы поместить на это место содержимое страницы «контакты».

Набираем заголовок 3-го уровня (ЗАДАТЬ ВОПРОС СПЕЦИАЛИСТАМ). Ниже добавляем форму. В состав формы входят однострочное поле вода (Ваше имя) и многострочное поле ввода (Текст сообщения), а также две кнопки: Отправить и Очистить.

Чтобы вставить форму на страницу, необходимо выбрать категорию Forms (Формы) на панели Insert (Вставка), как показано на рисунке 1.13, и щелкнуть на кнопке Form (Форма).

 

Рис. 1.13. Настройка панели Insert (Вставка)

 

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

Рамку нельзя увеличить или уменьшить вручную, но она будет автоматически расширяться при добавлении новых элементов формы (текстовых полей, переключателей, флажков).

Чтобы добавить в форму текстовое поле, поместите курсор внутри рамки формы и выберите на панели Insert(Вставка) кнопку Text Field (Текстовое поле). Выделите добавленное текстовое поле и на панели свойств укажите длину поля 60 символов, задав соответствующее значение в поле ввода Char Width (Ширина в символах).

Чтобы добавить в форму текстовую область, поместите курсор внутри рамки формы и на панели Insert (Вставка) выберите кнопку Text Area (Текстовая область). На панели свойств текстовой области задайте ширину 60 символов, количество строк – 5, введя соответствующие значения в полях ввода Char Width (Ширина в символах) и Num Lines (Количество строк). Перед полями ввода разместите текст, как показано на рисунке 1.12.

В форме присутствуют две кнопки: Отправить и Очистить.

Чтобы добавить в форму кнопку, поместите курсор внутри рамки формы и на панели Insert (Вставка) выберите кнопку Button (Кнопка). На панели свойств кнопки необходимо задать её тип с помощью переключателя Action(действие). Для кнопки Отправить это тип Submit, так как она предназначена для подтверждения введенной в форму информации и её отправки по определенному адресу. Кнопка Очистить является кнопкой сброса (Reset). При щелчке на этой кнопке все объекты формы будут переведены в их первоначальное состояние.

Чтобы разместить на кнопке соответствующую надпись, используйте поле Value (Значение) панели свойств кнопки. В качестве заголовка страницы введите: контакты.

Внизу каждой страницы размещен копирайт. Значок копирайта можно вставить, выбрав соответствующий символ на вкладке Text (Текст), как показано на рисунке 1.14.

 

Рис. 1.14. Добавления символа копирайта

 

Для добавления дополнительных пробелов используется сочетание клавиш Ctrl+Shift+Пробел.

Самостоятельно создайте страницу personal.html, представленную на рисунке 1.15.

 

Рис. 1.15. Страница «персонал»

 

Обратите внимание, что размещение фотографий и надписей выполнено с использованием ещё одной таблицы, состоящей из 2 столбцов и 4 строк. Расстояние между ячейками и внутри ячеек – 10 px, толщина границы – 0 рх.

Для перехода на следующую строку (без пропуска строки) используйте сочетание клавиш Shift+Enter.

В результате выполнения практического задания должна быть создана папка сайта, включающая файлы, представленные на рисунке 1.16:

 

Рис.1.16. Папка сайта

 

Изображения кнопок должны выполнять роль гиперссылок. Сделаем кнопку «о компании» ссылкой на страницу about_comp.html. Для этого необходимо выделить её и на панели свойств нажать на пиктограмму папки напротив поля Link. В открывшемся окне выбираем страницу about_comp.html . На рисунке 1.17 представлена панель свойств для кнопки «о компании».

 

Рис. 1.17. Настройка ссылки

 

Сделайте кнопку «наш персонал» ссылкой на страницу personal.html, кнопку «контакты» - ссылкой на страницу contacts.html.

Не забудьте, что кнопки нужно отредактировать на всех трёх страницах. Протестируйте свёрстанные страницы в браузере, проверьте правильность функционирования каждой кнопки на каждой странице.

Контрольные вопросы

1. Какие ссылки следует использовать для перехода с одной страницы сайта на другую: абсолютные или относительные?

2. Как присвоить странице название?

3. Будут ли отображаться на страницах графические изображения, если их поместить в папку Office/images? Почему?

4. Как зафиксировать положение меню?

5. Как разместить шапку сайта по центру страницы?

 

1.4. Требования к отчёту

Результаты практического задания представить в электронном виде и ответить на контрольные вопросы.

 

 

Литература

1. Видеоуроки Adobe Dreamweaver [Электронный ресурс] . – Режим доступа : http://dreamweaver-download.ru/. – Загл. с экрана.

2. Осипова О.Г. Самоучитель Adobe Dreamweaver CS3. – БХВ : СПб., 2008. – 400 с.

3. Черников С.В. Видеосамоучитель Adobe Dreamweaver CS3. Строим Web-сайты. – М. : ТРИУМФ, 2008. – 256 с.