Тема: Разработка web-сайта в Adobe Dreamweaver

Лабораторная работа №10

Цель работы: научиться регистрировать сайт, разрабатывать его физическую структуру, создавать шаблоны страниц и страницы на основе шаблона, выгружать сайт в Интернет.

Продолжительность: 4 учебных часа.

Максимальная оценка: 6 баллов.

Задание:

1. Запустите Adobe Dreamweaver.

2. Зарегистрируйте новый сайт, который будет создаваться на локальном компьютере, а затем выгружаться в Интернет. Сайт не будет использовать серверных технологий. В качестве имени сайта укажите свою фамилию, укажите в качестве папки для хранения файлов сайта папку MySite, которую следует создать в вашей личной папке.

 

Сайт будет представлять информацию о различных видах электронной коммерции.

 

3. Определите физическую структуру сайта, описывающую размещение файлов и папок сайта на диске локального компьютера (Window – Files):

а). В папке MySite создайте папки: Pictures (в этой папке будут храниться все графические объекты сайта), Сommerce (в этой папке будут размещаться html-файлы, описывающие различные виды электронной коммерции).

б). В папке MySite создайте файл index.html (он будет содержать главную страницу сайта).

в). Найдите в Интернете и скопируйте в папку Pictures картинки, которые вы будете размещать на сайте (файлы картинок могут иметь форматы .gif, .jpeg, .jpg, .png, .psd). Скопируйте в папку Picturesфайл e-cash.png из папкиФайлы для лабораторной работы №10.

г). В папке Сommerce создайте файлы, в которых будут сохранены страницы сайта: EDI.html, EFS.html, trade.html, cash.html, marketing.html, banking.html, insurance.html.

 

4. Разработайте шаблон страниц сайта:

а). Создайте пустой шаблон (File – New… – Blank Template): тип шаблона – шаблон HTML (HTML template), макет – 3 гибридных столбца, верхний и нижний колонтитулы (3 column hubrid, header and footer).

б). Оформите области шаблона по образцу (см. Рисунок 1). Рисунок, размещаемый в верхнем колонтитуле, выберите самостоятельно среди файлов, скопированных вами в папку Pictures. Для вставки нужного элемента (рисунка, таблицы, гиперссылки и др.) на страницу используется меню Insert.

в). Создайте гиперссылки на документы (выделите текст ссылки, выберите команду Insert – Hyperlink и заполните поле Link, указав имя файла нужного документа):

· Главная – файл index.html

· Электронный обмен информацией – файл EDI.html

· Электронное движение капитала – файл EFS.html

· Электронная торговля – файл trade.html

· Электронные деньги – файл cash.html

· Электронный маркетинг – файл marketing.html

· Электронный банкинг – файл banking.html

· Электронные страховые услуги – файл insurance.html

г). Создайте редактируемые области в шаблоне: основное содержимое – Edit1(выделите текст, выберите команду Insert – Template Objects – Editable Region), примеры – Edit2. См. Рисунок 1.

Рисунок 1. Шаблон страниц

д). Сохраните шаблон под именем Main(File – Save As…, тип файла – Template Files (*.dwt)). Для файла шаблона в папке сайта будет создана папка Templates.

 

5. Создайте страницы сайта на основе шаблона:

а). Главная страница (см. Рисунок 2). Откройте файл index.html. Примените шаблон Main (Modify – Templates – Apply template to Page…). Заполните редактируемые области (текст находятся в папке Файлы для лабораторной работы №10). Для размещения рисунка справа от списка видов коммерции создайте таблицу, в левую часть которой внесите список, в правую – рисунок. Рисунок выберите самостоятельно среди рисунков, скопированных вами в папку Pictures.

Рисунок 2. Главная страница сайта

б). Страница электронные деньги (см. Рисунок 3). Откройте файл cash.html. Примените шаблон Main. Заполните редактируемые области (текст находятся в папке Файлы для лабораторной работы №10). Вставьте рисунок e-cash.png из папки Pictures (расположите рисунок перед абзацем Российский закон…).

Рисунок 3. Страница «Электронные деньги»

в). Оформите остальные страницы сайта.

 

6. Для каждой страницы сайта определите заголовки (Title):

а). index.html– Электронная коммерция

б). EDI.html -Электронный обмен информацией

в). EFS.html -Электронное движение капитала

г). trade.html -Электронная торговля

д). cash.html -Электронные деньги

е). marketing.html -Электронный маркетинг

ж). banking.html -Электронный банкинг

з). insurance.html -Электронные страховые услуги

 

7. Сохраните все страницы сайта (File – Save All).

8. Просмотрите страницы сайта в браузере, проверьте работу гиперссылок (File – Preview in Browser – IExplore).