Пять причин посетить Беларусь
Лабораторная работа
Тема:Разработка и создание web-сайта туристической фирмы
Цель: Изучить основные приёмы работы с программой Dreamweaver.
Основные теоретические сведения.
Знакомство с программой
Окно Dreamweaver(рис. 1) разделено на несколько рабочих областей с различным назначением:
• кода - (отображает HTML-код страницы);
• дизайна - (отображает вид страницы и ее элементы);
• палитры, располагающиеся справа, каждая из которых имеет свое назначение (например, работа с файловой структурой сайта)
• палитра Свойства (снизу), отображающая все свойства выделенного на странице в данный момент объекта.
Все окна, кроме окна дизайна могут быть спрятаны (убраны с экрана).
Рисунок 1
Все команды, позволяющие настроить вид окна, расположены в меню программы Вид, некоторые из них вынесены в виде кнопок на панель инструментов Документ.
При открытии программы Dreamweaver (с настройками по умолчанию), появляется диалоговое окно (рис. 2).
Рисунок 2
| PreviousТор Next |
Окно разделено на три категории:
• Недавно измененные - содержит перечень последних документов, которые были открыты в программе, также содержит кнопкуОткрыть для открытия другой готовой страницы.
• Создать- содержит типы документов, которые могут быть созданы в программе (HTML-документы, РНР- документы, документы, содержащие каскадные таблицы стилей и пр.);
• Важныефункции – содержит перечень некоторых важных функций.
|
|
|
Ход работы:
1. В своей рабочей папке создайте папку под именем Vandrouka (корневая папка будущего вашего сайта).
2. Создайте внутри папки Vandroukaпапку для рисунков Images.
3. Скопируйте в Вашу папку Imagesсодержимое папки Imagesиз папкиЛр_Веб-сайт в Dreamweaver.
4. Откройте окно Dreamweaver и выберите пунктСоздать→HTML-документ.
Создание локальной копии сайта
5. Выберите пункт менюВеб-сайт →команда Создать веб-сайт. Появится диалоговое окно Определение сайтадля «Сайт без имени…».
6. В диалоговом окне Определение сайта для «Сайт без имени…»на вкладке Дополнительнов поле Категория выберите раздел Локальная информация.
7. В полеИмя сайтанаберите имя сайтаобязательноVandrouka(Ваша фамилияна латинице). В поле Локальная корневая папка укажите с помощью кнопки 
папку ...Ваша папка\Vandrouka. В поле Папка изображенийпо умолчанию укажите папку с помощью кнопки ...Вашапапкa\Vandrouka\Images (рис. 3).
8.
| Рисунок 3 |
Переключатель команды Ссылки относительно:установите в позицииДокумент. Поле HTTP- адресоставьте пустым. Включите опцию Кэш.
Вы создали локальную копию вашего будущего сайта.
9. Экспортируйте настройки сайта в файл, сохранив его в папку своего сайта под именем site.ste. Для этого, выполните действия:пункт менюВеб-сайт ®команда Управление сайтами. В открывшемся диалоговом окне Управление сайтамивыберите кнопкуЭкспорт.Появится диалоговое окноЭкспортировать сайтв поле Папкаукажите папку Vandroukaи в поле Имя файла укажите site.ste(рис.4). Нажмите кнопку ОК.В диалоговом окне Управление сайтаминажмите кнопку Готово.
|
|
|
Рисунок 4
Экспортированный сайт будет открыт в палитре Файлы (рис.5).
| Рисунок 5 |
Примечание: Для импортирования настроек сайта необходимо выполнить действия пункт менюВеб-сайт → команда Управление сайтами, в диалоговом окне Управление сайтами выбрать кнопку Импорт и выбрать свой файл с настройками сайта.
После выполнения всех пунктов в программе Dreamweaver автоматически создаётся пустаяweb-страница. Её можно видеть в Окне редактора.
Оформление первой страницы сайта (рис.10)
10. Зададим общие параметры для этой web-страницы. Выполните действия пункт менюИзменить →команда Свойства страницы.
11. В диалоговом окне Свойства страницызадайте параметры страницы:
В категории Название/кодировка в поле Названиезадайте имя страницы Vandrouka, в поле Тип документа - Переходный HTML 4.01Transitional, в поле Кодировка–Юникод(UTF-8).Перейдите в категориюВнешний вид (CSS)и установите:
|
|
|
шрифт страницы –Verdana;
размер шрифта – 14pt;
цвет текста и цвет фона –на своё усмотрение.
Закройте диалоговое окно, нажав кнопку ОК.
12. Сохраните пустую страницу под названием index.html(Файл → Сохранить как). Сохранённый файл появится в палитре Файлы (рис.6).
Рисунок 6
13. Зададимразметку web-страницы с помощью таблиц.Для этого обязательно вставьте два пустых абзаца (нажав клавишу ENTER) на станицеindex.html.
14. Вставим таблицу 1 состоящую из 2 столбцов и одной строки (рис. 9). Для этого выберите пункт менюВставка → команда Таблица или кнопку Таблица 
(вкладка Общий).
15. В открывшемся диалоговом окне Таблицазадайте параметры согласно рисунку 7.
16. 
| Рисунок 7 |
Выровняйте таблицупо центру страницы.
17. Сохраните внесённые изменения, нажав комбинацию клавиш CTRL+S.
18. Просмотрите полученный результат в браузере, нажав на кнопку Просмотреть в браузере (рис.8) или клавишу F12.
19.
| Рисунок 8 |
В левую ячейку таблицы1 вставим логотип турфирмы (рис. 9). Для этого установите курсор в ячейку и выберите пункт менюВставка → команда Изображение или кнопку Изображение
(вкладка Общий). В папке Vandrouka\Images выберите файл Логотип.jpg.
20. Введите фразу Логотип в диалоговом окне Атрибуты… в поле Замещающий текст. С помощью мышки перетяните правую границу ячейки влево.
|
|
|
21. Вставим название туристического агентства в правую ячейку таблицы. Для этогоустановите курсор в ячейку и введите текст Туристическое агентство Vandrouka.
22. Измените атрибуты текста с помощью палитры Свойства(в поле Формат выберитеЗаголовок 1, в поле по горизонтали – по центру).
23. Создайте вторую таблицу, состоящую из 2 строк и одного столбца для размещения в ней слогана турагентства (С нами ветер попутный!) и картинкиниже первой таблицы. Задайте свойства для этой таблицы аналогичные предыдущей, за исключением,поляВнутри ячейки-10. С помощью палитры Свойстваизмените атрибуты текста (в поле Формат выберитеЗаголовок 4инажмите кнопку курсив, в поле по горизонтали – по центру).
24. Вставьте изображение луга (файл Луг.jpg) во вторую строку (рис. 9).
25. Создайте третью таблицу, состоящую из 5 столбцов и одной строкишириной 98% с границами в 2 пункта и пробелами между ячейками в 5 пунктовниже второй таблицы. Установите цвет фона ячеек таблицы3 согласно рисунку 9. Для этого установите курсор в нужную ячейку и выберите в палитре Свойства в поле Фон приемлемый для Вас цвет. В каждую ячейку введите соответствующий текст, присвоив для него параметры (Заголовок 3, выравнивание по центру).
26. 
Сохраните изменения на странице и просмотрите результат в браузере(CTRL+Sи F12).
27.
| Рисунок 9 |
Создайтечетвёртую таблицу, состоящую из 2 столбцов и одной строки шириной 98% с границами в 2 пункта и пробелами между ячейками в 5 пунктов.
28. В левую ячейку таблицы вставьте изображение Белорусочка.jpg, а в правую – текст:
Пять причин посетить Беларусь
· Радушные жители
· Архитектура XII -XVII веков
· Белорусская кухня
· Уникальная природа
· Активный отдых.
29. 
Сохраните изменения и просмотрите результат в браузере (рис.10).
Рисунок 10
Дата добавления: 2018-06-27; просмотров: 254; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!