Разработка информационного сайта для торговой фирмы «Мир мебели»

Работа со средствами управления сайтом в Dreamweaver начинается с

выполнения команды Site=>Manage Sites…. На экране появится окно со

списком сайтов (рис. 4).

Рис.4. Диалоговое окно для создания и управления сайтами

 

Работа с локальной  и удаленной версией сайта

Для работы с локальной и удаленной версией сайта в программе

Dreamweaver есть диалоговое окно Site Manager (Менеджер сайта). Половина этого окна находится в правой части рабочей области Dreamweaver, в панеле Files (рис. 5).

 

Рис. 5. Панель Files

Для того, чтобы полностью  раскрыть окно Site Manager, необходимо

нажать на кнопку Expand to show local and remote sites в правом верхнем

углу панели Files.

Site Manager позволяет выполнять все основные операции по управлению

файлами: создание, удаление, переименование и другие. Все операции с

файлами сайта рекомендуется производить  в Site Manager, так как при

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

Рис. 6. Диалоговое окно Site Manager

 

Работа с  картой сайта

Для перехода к режиму работы с картой сайта необходимо нажать кнопку

Site Map в окне Site Manager (рис. 6). При этом в левой части этого окна

будет отображена карта  текущего сайта (рис. 7). Этот режим предназначен

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

Рис. 7. Диалоговое окно Site Manager в режиме отображения карты сайта

 

Форматирование HTML-страниц: логическое и Визуальное

Идеологической основой языка HTML является концепция структурной

разметки, которая заключается  в разделении содержания документа  и его

представления. Таким образом, можно  выделить два уровня форматирования

документа: логический и визуальный. При форматировании HTML-страницы

следует уделять больше внимания ее содержанию, абстрагируясь от

представления, задавать лишь структуру  документа. Для определения же

визуального представления документа (интервалы между строками текста,

отступы, цвета, используемые для текста и фона, размер и стиль шрифтов)

следует использовать таблицы стилей (CSS – Cascading Style Sheets).

Рассмотрим основные элементы логического  форматирования HTML и их

практическое использование при  подготовке документов с использованием

HTML-редактора Dreamweaver.

Создание и  форматирование таблиц

Одним из наиболее широко используемых в HTML средств являются

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

Основное назначение HTML-таблиц – упорядочить данные (текст,

форматированный текст, изображения, ссылки, формы, поля форм, другие

таблицы) и разместить их в строки и столбцы ячеек.

Одним из главных принципов  модели таблиц HTML является то, что

размеры ячеек броузер  определяет автоматически в зависимости  от

содержимого. Размеры  таблиц изменяются динамически в  соответствии с

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

 

Рис. 8. Вставка таблицы

Создание и  использование стилей CSS

Каскадные таблицы  стилей (CSS, Cascade Style Sheet) являются

достаточно новой технологией  в web-дизайне. Являясь аналогами стилей в

программах верстки  и мощных текстовых процессорах, они позволяют авторам использовать типографские приемы определения представления и размещения к элементам на web-странице.

 

Основным препятствием для широкого использования стилей CSS

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

 

Таблицы стилей состоят  из набора правил, описывающих формат

представления элементов  документа. Правило представляет собой  объявление способа отображения элементов страницы, и записывается в следующем формате:

Селектор {правило: значение; правило: значение; …}

 

Вставка изображений  и других элементов

Важнейшей возможностью, которой обладает язык HTML, является

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

вставить изображение в редактируемый документ, необходимо нажать кнопку

Images на панели объектов и в открывшемся списке выбрать Image (рис. 6.1)

или выполнить команду Insert=>Image. В открывшемся диалоговом окне

необходимо выбрать графический  файл (в формате GIF, JPEG или PNG).

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

Рис. 9. Вставка изображения

 

3. Графический редактор Adobe Photoshop

Графическая программа Adobe Photoshop 5.0 представляет собой специализированное инструментальное средство, предназначенное для обработки растровых изображений.

По своим функциональным и эксплуатационным возможностям Adobe Photoshop 5.0 является самой совершенной среди аналогичных программ обработки растровой графики и пользуется заслуженным успехом в среде компьютерных дизайнеров.

Среди достоинств этой программы  можно выделить следующие:

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

Пользовательский  интерфейс программы

На рис.10 представлено окно программы при загрузке в нее графического документа с растровым изображением. Как и в любой другой графической или издательской программе, работающей в операционной среде Windows, здесь имеется стандартный набор элементов, характерных для данной операционной системы. Это – системные меню программы и документа, заголовки программы и документа, строка состояния и основное меню программы, а также системные кнопки Свернуть, Восстановить/Развернуть и Закрыть.

Внизу находится строка состояния, которая предназначена для отображения текущей информации об обрабатываемом изображении и выполняемой операции (рис.1). Строка состояния разбита на три части (поля). В первом слева поле указывается масштаб активного изображения. Здесь вы можете задать другой масштаб, нажав после этого клавишу [Enter]. Во втором поле отображается служебная информация, соответствующая выбранному пункту меню строки состояния (это меню открывается щелчком на черной треугольной метке справа). В третьем поле отображается информация об операции, которую вы можете выполнить, используя выбранный рабочий инструмент.

Между строкой меню и строкой  состояния находится рабочая  область программы. В ней расположены следующие элементы: блок инструментов (слева), рабочее окно документа с полосами прокрутки (в центре) и три совмещенные палитры (справа). Каждый из этих элементов является плавающим, т.е. вы можете свободно перемещать его, а также удалять с экрана. Это очень удобно, поскольку можно убрать все лишнее, освободив большую часть экрана для обработки изображения.

Кроме элементов интерфейса в программе  имеются диалоговые окна (диалоги) (рис.1). Они используются для настройки параметров различных команд.

Рассмотрим назначение основных элементов  интерфейса.

Рис.10 Окно программы Adobe Photoshop 5.0 
1 – системные меню; 2 – заголовки; 3 – строка меню; 
4 – системные кнопки программы и документа; 5 – блок инструментов; 
6 – окно документа с полосами прокрутки; 7 – строка состояния; 8 – палитры программы

 

 

Меню

Основное меню программы представляет собой набор списков команд, сгруппированных по функциональному назначению. Эти списки находятся в свернутом состоянии (в виде строки основного меню) и открываются при выборе одного из них.

Щелчок на том или ином пункте меню приводит к появлению на экране списка  входящих в него элементов. В этом списке могут находиться наименования как отдельных команд, так и  их групп. Справа от названия группы команд имеется черная треугольная метка, и при выборе данного элемента (установке на нем указателя мыши) открывается дополнительный список команд.

Помимо основного меню в программе  есть и другие, которые называются контекстными (вспомогательными).

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

На рис.11 показаны три контекстных меню. Слева изображено меню операции выделения, а справа – строки состояния (вверху) и палитры Color (Синтез) (внизу).

 

Рис.11  Контекстные меню

 

Рассмотрим назначение команд контекстного меню строки состояния  программы (это меню открывается  щелчком на черном треугольнике). При  выборе команд этого меню слева от треугольника отображается следующая  информация:

• Document Sizes (Размеры документов) – объемы памяти, занимаемые активным документом без учета слоев и служебных каналов и с их учетом;
• Scratch Sizes (Размеры рабочих дисков) – соотношение объема памяти, используемой в настоящее время для обработки изображения, и объема оперативной памяти, доступной для программы;
• Efficiency (Эффективность) – процент использования оперативной памяти при обработке изображения;
• Timing (Хронометраж) – время выполнения последней операции;
• Current Tool (Текущий инструмент) – название активного рабочего инструмента.

 

В списках команд основного  меню вы можете встретить ряд дополнительных надписей и меток, которые всем знакомы: многоточия, названия клавиш и подчеркнутые буквы. Кроме того, некоторые команды  меню могут быть затенены; это означает, что они в данный момент недоступны.

В зависимости от текущего состояния могут изменяться и  названия команд. Например, команды Hide Tools (Спрятать инструменты) и Show Tools (Показать инструменты) сменяют друг друга в меню Window (Окно) в зависимости от того, находится ли на экране блок рабочих инструментов программы.

 

Рабочие инструменты

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

На рис.12 показано, какие инструменты входят в состав блока инструментов. Слева приведена нумерация рядов ячеек блока инструментов. Это сделано для того, чтобы можно было установить соответствие между изображениями инструментов и их названиями.

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

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

В рядах 1, 2 и 4 рисунка  изображены дополнительные панели блока, относящиеся к левым ячейкам основной панели; в рядах 5, 8 и 9 – к правым, а в рядах 6 и 7 – к обеим ячейкам, левой и правой (дополнительные панели, относящиеся к разным ячейкам, здесь отделены друг от друга небольшим промежутком).

 

Рис.12 Блок инструментов

 

Для установления взаимно-однозначного соответствия между изображениями рабочих инструментов и их описанием ниже приводится таблица, где № - это номер ряда блока инструментов, а Яч. – номер ячейки блока (в порядке слева направо).

Перечень инструментов программы и их назначение

№	Яч.	Инструмент	Назначение
1	1		Rectangular Marquee (Выделение прямоугольника), Elliptical Marquee (Выделение эллипса), Single Row Marquee (Выделение строки), Single Column Marquee (Выделение столбца), Crop (Обрезка) Первые четыре инструмента  предназначены для формирования выделенных областей (контрастных масок) и их перемещения. Инструмент Crop осуществляет выделение и обрезку выбранной пользователем области прямоугольной формы
	2		Move (Перемещение) Выполняет перемещение  выделенной области изображения в другое место того же документа или в другой документ
2	1		Lasso (Лассо), Polygonal Lasso (Многоугольное лассо), Magnetic Lasso (Магнитное лассо) Формируют выделенные области  произвольной формы. В частности, инструментом Magnetic Lasso можно создавать выделенные области по границам цветовых и тоновых переходов
	2		Magic Wand (Волшебная палочка) Осуществляет выделение  области изображения с близкими оттенками пикселей
3	1		Airbrush (Аэрограф) Имитирует работу одного из инструментов рисования – аэрографа
	2		Paintbrush (Кисть) Имитирует работу кисти
4	1		Rubber Stamp (Резиновый штамп), Pattern Stamp (Штамп по образцу) Предназначены для переноса (клонирования) фрагмента изображения  в другое место того же или другого  документа. Первый из инструментов работает в обычном режиме, второй – в режиме копирования по образцу
	2		History Brush (Кисть событий) Данным инструментом можно восстановить первоначальный вид фрагмента изображения, обработанного  каким-либо инструментом рисования  или редактирования
5	1		Eraser (Ластик) Стирает фрагмент изображения. Может также работать как кисть  событий (для этого нужно выбрать  данный инструмент, открыть палитру Options (Параметры) и установить флажок параметра Erase to History)
	2		Pencil (Карандаш), Line (Линия) Первый инструмент имитирует рисование обычным карандашом, а второй предназначен для рисования прямолинейных отрезков
6	1		Blur (Размывание), Sharpen (Резкость), Smudge (Палец) Выполняют операции по редактированию отдельных фрагментов изображения, соответствующие названиям данных инструментов
	2		Dodge (Осветление), Burn (Затемнение), Sponge (Губка) Выполняют операции по редактированию отдельных фрагментов изображения, соответствующие названиям данных инструментов