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

ФГБОУ ВПО «Воронежский государственный технический университет»

Кафедра систем информационной безопасности

УПРАВЛЕНИЕ WEB-ДОКУМЕНТАМИ

МЕТОДИЧЕСКИЕ УКАЗАНИЯ

к практическим занятиям по дисциплине «Информационная безопасность РИС» для студентов специальности

090303 «Информационная безопасность автоматизированных систем»

очной формы обучения

Воронеж 2014

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

Внешний вид программы является стандартным для операционной системы Windows. После запуска Dreamweaver открывается окно с возможностью выбора дальнейших действий пользователя.

Для переключения между режимами отображения и редактирования HTML-документа предназначены три первые кнопки на панели инструментов (рис. 1):

Code – исходный код;

Split – исходный код / поле документа (окно делится на две части);

Design – поле документа.

Рис. 1. Панель инструментов

По умолчанию всегда стоит палитра common objects (основные объекты). В нее включено практически все, что вам нужно (слева-направо):

Hyperlink - вставляет гиперссылку на страницу

E-mail Link (сслыка на электронную почту) - вставляет ссылку на электронный адрес

Named Anchor - вставка якоря

Table (таблица) - вставляет таблицу

Div Tag - вставляет тэг div

Images

2

o Image (картинка) - вставляет на страницу графический элемент

o Rollover Image - вставка изменяющегося изображения (картинку изменяющую свой вид при наведении на нее)

oFireworks HTML - вставляет объект Macromedia FireWorks

o Navifgation Bar - вставляет навигационную панель состоящую из нескольких кнопок

Media

o Flash - вставляет флеш-анимацию в страницу o Flash Button - вставляет флеш-кнопку

o Flash Text - вставляет флеш-текст o Flash Video - вставляет флеш-видео

o ShockWave - вставляет Shockwave-анимацию o Applet - вставляет ява-апплет

o ActiveX - вставляет ActiveX

o Plugin - вставляет объект, проигрываемый плагином

Date (дата) - вставка в документ текущей даты (можно с автообновлением)

SSI - вставляет инклюд (подключаемый внешний

HTML файл)

Comment - вставляет комментарий в документ

Шаблоны - создание шаблона

Tag Chooser - библиотека тэгов Палитра layout

Standard View (Стандартный режим). Переход в стандартный режим работы с документом.

Layout View (Режим макетирования). Переход в режим макетирования документа.

Draw Layout Table (Создание макетной таблицы). Доступ к инструменту создания макетной таблицы.

Draw Layout Cell (Создание макетной ячейки). Доступ к инструменту создания макетной ячейки.

3

Tabular data (табличные данные) - вставляет готовую таблицу с готовыми данными (например, из Excel)

Frames (фреймы) - поможет сделать одним нажатием на кнопку сложную фреймовую структуру.

Палитра forms (формы) служит для визуального создания форм (того, что вы довольно часто заполняете на различных сайтах). Она состоит из объектов:

Form - сама форма

Text Field - текстовое поле

Hidden Field - скрытое поле

Textarea - текстовая область

Checkbox - чекбокс (это где вы галочку на выборах ставите)

Radio Button - обеспечивает выбор одного из вариантов

Radio Group - группа radio button

List/Menu - делает выпадающий список или меню

Jump menu - для перехода по клику на другую страничку

Image Field - поле картинки

File Field - форма для закачки файлов

Button - кнопка

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

Bold, strong - полужирный текст

Italic, emphasis - курсив

Heading 1, Heading 2, Heading 3 - заголовки

Unordered List, Ordered List, List Item - список,

пронумерованный список, пункт списка

Abbreviation, Acronym - аббревиатура

Characters - специальные символы

4

Палитра html

Horizontal Rule (линейка) - вставляет декоративный элемент - линейку (обычно используется как разделитель абзацев)

Head - помогает добавлять различные описания и

свойства странички, такие как:

o устанавливать параметры обновления странички o указывать базовую ссылку (ссылку по

умолчанию)

oуказывать ссылки

Script - вставляет java, vbasic скрипты

Чуть ниже находится панель инструментов Properties

(рис. 2) – это редактор свойств, она выполняет функции основного диспетчерского пульта программы. Эта панель объединяет кнопки вызова наиболее востребованных команд и ресурсов редактора (слева-направо):

Рис. 2. Панель свойств

Code View (Режим разметки). Кнопка перехода в режим отображения исходной гипертекстовой разметки документа.

Code and Design View (Режим разметки и планировки). Кнопка перехода в комбинированный режим работы, когда окно документа расщепляется на две части: в одной выводятся коды разметки, в другой отображается внешний вид гипертекстовой страницы.

Design View (Режим планировки). Кнопка перехода в визуальный режим работы редактора – режим WYSIWYG.

Title (Заголовок). Текстовое поле, предназначенное для ввода заголовка документа.

5

Check browser support – тестирует на совместимость с браузерами: Firefox, Internet Explorer, Mozilla, Netscape Navigator, Opera, Safari.

Validate markup – проверка кода текущего документа или всего сайта на ошибки.

File Management (Управление файлами). Кнопка открывает меню, содержащее файловые команды сетевого обмена и контроля обращения.

Preview/Debug in Browser (Просмотр/отладка в браузере). Позволяет просмотреть гипертекстовый документ в выбранном браузере.

Refresh Design View (Обновить страницу). По этой команде все изменения, сделанные в исходном тексте документа, переносятся в режим планировки. При этом выполняется проверка синтаксиса и интерпретация кодов. Корректные фрагменты отображаются на странице, ошибочные помечаются желтым цветом.

View Options (Параметры отображения). Кнопка открывает меню с командами, которые управляют визуализацией вспомогательных элементов окна документа.

Visual Aids – в это меню входят команды, которые управляют представлением кодов.

В нижней части окна документа расположена строка статуса. Слева расположена секция тэгов, занимающая большую часть строки. С помощью этой секции можно выбрать фрагмент текста, помеченный тем или иным тэгом HTML. Секция тэгов имеет вид небольшой панели инструментов, чьи кнопки соответствуют тэгам и расположены слева направо в порядке вложенности.

Подготовка редактора Dreamweaver к работе

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

6

программы, нужно в главном меню открыть пункт Edit, а в нем выбрать пункт Preferences… (Edit=>Preferences…)

После этого на экране отображается окно редактирования параметров работы (рис. 3). В левой части окна отображаются категории возможных настроек, а в правой

–параметры выбранной категории.

Вкатегории General собраны общие настройки программы. В категориях Code Colors, Code Format, Code Rewriting задаются параметры, определяющие отображение и редактирование непосредственно HTML-кода.

Параметры работы с таблицами стилей задаются в категории CSS [1-3] Styles. В категории File Types / Editors

приводятся в соответствие типы файлов и их внешние редакторы.

Флажок Use CSS instead of HTML tags включает или отключает использование для форматирования текста стилей CSS вместо тэгов HTML. По умолчанию он включен, и его желательно выключить.

Рис. 3. Редактирование параметров

Важным моментом, на котором следует остановиться подробнее, является подготовка редактора Dreamweaver к работе с русскоязычными документами. Общепринятым,

7

стандартным языком в компьютерных технологиях является английский язык. Поэтому при размещении англоязычных документов в Internet не возникает никаких затруднений. Но как только речь заходит о документах, которые используют другую кодировку – возникает целый ряд проблем. Шрифты строятся на основе какой-либо таблицы кодировки и определяют вид отрисовываемого символа, соответствующего конкретному коду. Поэтому для корректного отображения HTML-документов необходимо указывать кодировку, в которой он сохранен.

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

Preferences (рис. 3) выбрать категорию New Document. В

списке Default encoding указывается какая-либо из кириллических кодировок. Наиболее употребительными являются Кириллица (KOI8-R) и Кириллица (Windows). Какую из них выбрать зависит от настроек сервера, на котором планируется размещать HTML-документы. Рекомендуется, если это возможно, использовать кодировку Кириллица (Windows). Теперь нужно включить флажок Use when opening existing files that don't specify an encoding, если он не включен по умолчанию. После этого Dreamweaver будет автоматически применять выбранную в списке Default encoding кодировку ко всем открываемым Web-страницам, если в них не задана явно другая кодировка. Далее, в списке Fonts Setting категории Fonts нужно указать, какие шрифты будут использоваться для отображения текста. Для русскоязычных HTML-документов нужно выбрать пункт Кириллица.

Теперь все вновь создаваемые HTML-документы будут поддерживать русские буквы. Для того чтобы изменить кодировку уже существующего HTML-документа, необходимо выполнить команду Modify=>Page Properties.

Появится окно параметров текущей страницы (рис. 4). В категории Title/Encoding из списка Encoding следует

выбрать новую желаемую кодировку и нажать кнопку Reload, расположенную справа. Если перед этим документ не был

8