Методическое пособие 378

Задания

1.Откройте диалоговое окно для создания и управления

сайтами.

2.Сделайте копию сайта text.htm. Назовите ее textcopy.html.

3.Настройте параметры исходного сайта text.htm: определите служебное имя, папку и др.

4.Откройте диалоговое окно Site Manager.

5.С помощью менеджера сайтов создайте еще одну копию text.htm: text1.htm.

6.Разместите text1.htm на сервере.

7.Удалите text1.htm.

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

1.В чем состоит управление сайтами?

2.Какие инструменты управления сайтами есть в

Dreamweaver?

3.Как задать тип доступа к сайту, размещенному на

сервере?

4.Как можно быстро конвертировать HTML-документ из одной кодировки в другую?

5.Как разместить файлы на сервере?

6.Как синхронизировать локальные файлы с файлами на сервере?

29

Практическая работа № 4 HTML-редактор Dreamweaver. Создание таблиц,

гиперссылок и фреймов

Цель работы: овладение навыками управления webдокументами.

Теоретические сведения

В процессе создания web-сайта [1-3] существенным моментом является правильное назначение имен файлов. При назначении имени ресурса следует ограничиться цифрами и буквами латинского алфавита. Причем, при назначении имен файлам следует придерживаться одного регистра символов, обычно только нижнего регистра. Это связано с различиями настроек операционных систем на разных компьютерах и серверах.

При разработке Internet-ресурсов [1-3] автору следует обратить внимание на адрес созданного ресурса. Адреса ресурсов следует делать интуитивно понятными. Имена каталогов должны представлять собой слово или составное слово, поясняющее смысл и содержание данного элемента сайта. Названия файлов также должны соответствовать этим требованиям и отражать их содержание. Кроме того, URL следует делать как можно более коротким, а также использовать в нем общепринятые слова естественного языка.

Создание главной (домашней) страницы сайта

Главная страница сайта должна иметь специальное имя – index.html (или index.htm). После того, как странице присвоено имя и она сохранена можно приступать к наполнению ее информационным содержанием.

Необходимо задать название (заголовок) страницы – поле Title в категории Title/Encoding (рис. 4), выбрать желаемую кодировку.

30

Кроме заголовка, в категории Appearance этого диалогового окна, можно установить следующие параметры страницы:

•Background image – изображение, которое будет использовано в качестве фона страницы (графический файл с изображением можно выбрать, нажав кнопку Browse…);

•Background / Text – соответственно цвета фона страницы и текста;

•Links / Visited links / Active links – соответственно цвета ссылок / посещенных ссылок / активных ссылок;

•Left margin / Top margin / Margin width / Margin height –

задают отступы (поля) по бокам и в начале и конце страницы (Left и Top margin отображаются только в браузере Internet

Explorer, а Margin width и height только в Netscape Navigator,

поэтому рекомендуется использовать оба параметра одновременно для сохранения совместимости).

Фреймы

Фреймы позволяют разделить окно браузера на несколько частей, в каждую из которых будет загружен свой HTML-документ.

Прежде чем приступать к созданию фреймов, необходимо включить режимотображения их границ, выполнив команду View=>Visual Aids=>Frame Borders.

Начать создание фреймов проще всего, выбрав один из предусмотренных вариантов, нажав на кнопку Frames на закладке Layout панели Insert (рис. 17). Кроме того, можно воспользоваться одним из вариантов, которые расположены в меню Insert=>HTML=>Frames.

Для добавления дополнительных фреймов можно воспользоваться командами Modify=>Frameset=>Split Frame Left, Right, Up или Down – соответственно для добавления фрейма слева, справа, сверху или снизу. Чтобы удалить фрейм, нужно мышью перетащить его границу за пределы страницы.

31

осуществляться переход. Если же это внешняя ссылка, то необходимо указать полный URL ресурса, начиная с имени протокола (например, http://spb.fio.ru/). Поле Target указывает, где должен быть открыт документ, на который указывает ссылка. Это может быть одно из четырех предустановленных значений:

• _blank – документ загружается в новом неименованном

окне;

•_parent – документ загружается в родительском фрейме или окне;

•_self – документ загружается в то же окно или фрейм, что и исходный;

•_top – документ открывается в том же окне браузера, но все существующие фреймы при этом удаляются.

По умолчанию все ссылки открываются в том же окне или фрейме (то есть используется установка _self).

Кроме ссылок на файлы целиком, существует возможность создания ссылки на определенное место в документе – якорь. Для этого сначала необходимо создать в документе сами якоря. Это можно сделать, выполнив команду

Insert=>Named Anchor или нажав кнопку Named Anchor на закладке Common панели объектов (рис. 17).

Задания

1.Создайте несколько HTML-документов.

2.Задайте открытие ссылки на web-сайт в новом окне.

Вкачестве ссылки на web-сайт, укажите любой интернет-адрес

(например, http://spb.fio.ru).

3.В качестве ссылки на web-страницу, укажите любой созданный ранее HTML-документ.

4.В качестве ссылки на изображение, укажите любую из сохраненных ранее картинок.

5.Сохраните документы в рабочую папку под разными именами (index.htm, page1.htm, page2.htm и т. д.)

6.Определите главную страницу сайта index.htm.

33

7. В каждом документе текст «страница 1», «страница 2», «страница 3» и т.д. сделайте ссылками на соответствующие страницы сайта.

8. В левом верхнем углу каждой страницы расположите логотип – рисунок отражающий тематику сайта. Картинкулоготип сделайте ссылкой на главную страницу.

9. Разместите созданный Web-сайт на FTP-сервере, обратитесь к нему с помощью программы Internet Explorer и проверьте работу ссылок.

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

1.Зачем нужны фреймы?

2.Как создать фрейм?

3.Как добавить гиперссылку?

4.Чем ссылка отличается от якоря?

34

БИБЛИОГРАФИЧЕСКИЙ СПИСОК

1.Дуванов, А. А. Web-конструирование. DHTML [Текст] / А. А. Дуванов. – СПб.: БХВ-Петербург, 2005 . – 512 с.

2.Матросов, А. В. HTML 4.0. [Текст] / А. В. Матросов, А. О. Сергеев, М. П. Чаунин. – СПб.: БХВ-Петербург 2007. – 674 с.

3.Дуванов, А. А. Web-конструирование. Элективный курс [Текст] / А. А. Дуванов. – СПб.: БХВ-Петербург, 2006 . –

432 с.

4.Справочник по HTML [Электронный ресурс] –

Режим доступа: http://htmlbook.ru/html/.

5.Белозубов, А. В. Основы работы с HTML-редактором Adobe Dreamweaver CS3 [Текст]: учебно-методическое пособие / А. В. Белозубов, Д. Г. Николаев. – СПб.: СПбГУ ИТМО, 2007. – 112 с.

6.Дронов, В. А. Macromedia Dreamweaver 2004 [Текст]

/В. А. Дронов. – СПб.: БХВ-Петербург, 2004. – 192 с.

7.Adobe Dreamweaver [Электронный ресурс] – Режим доступа: https://helpx.adobe.com/ru/dreamweaver.html.

8.[Электронный ресурс] – Режим доступа: http://www.3w.org.

9.[Электронный ресурс] – Режим доступа: http://www.w3c.org

10.[Электронный ресурс] – Режим доступа: http://www.citforum.ru

35

36