Визуальный HTML редактор Microsoft Expression Web как инструмент начинающему Web дизайнеру

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

ФГАОУ ВПО «СЕВЕРО-КАВКАЗСКИЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ»

ПЕДАГОГИЧЕСКИЙ ИНСТИТУТ

КАФЕДРА ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ

КУРСОВАЯ РАБОТА

по дисциплине

«Технологии Web дизайна»

на тему:

«Визуальный HTML редактор Microsoft Expression Web как инструмент начинающему Web дизайнеру»

 

Выполнил:

Воробьев Андрей

студент 3 курса группы А2

направления (специальности) ИТМПИЯ

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

________________________

(подпись)

Руководитель работы:

Семеренко Р. Г.

 

 

Работа допущена к защите _______________________ ______________

(подпись руководителя) (дата)

Работа выполнена и

защищена с оценкой _________________________ Дата защиты______________

Члены комиссии: ________________ __________ _______________

(должность) (подпись) (И.О. Фамилия)

 

________________ _______________ _______________

________________ _______________ _______________

________________ _______________ _______________

 

Ставрополь, 2013 г.

 

Содержание.

 

 

 

Введение.

 

Microsoft Expression Web, современная программа, которая предлагает обширный спектр визуальный средств для создания сайтов, отвечающих современным стандартам и требованиям. Именно Expression Web стоит за многочисленными сайтами, которые были разработаны совместными усилиями на базе спецификации Web 2.0. Как дизайнерам, так и программистам, Expression Web позволяет вместе работать над одним проектом. Для дизайнера программа позволяет создавать прекрасно выглядящие сайты, пользуясь знакомыми инструментами. Получившиеся  файлы, после можно передать программистам, для последующей работы с помощью тех средств, которые они предпочтут. Так же файлы можно снова загрузить в Expression Web без каких-либо затруднений и необходимости смотреть в программный код сайта. Для начинающего программиста, программа представляет все инструменты создания сайтов, что делает её простой и доступной для начинающего Web – дизайнера.

Актуальность этого программного обеспечения растёт вместе с необходимостью развития Web технологий, что сейчас является модным. С помощью этой программы можно создавать как простые любительские сайты – визитки, так и многоструктурные мультимедийные сайты, коммерческие сайты, сайты на заказ. В нынешний момент, существует уже четвёртая версия этой программы, но в этой курсовой работе будет рассмотрена вторая версия, так как за последние годы она получила большую популярность и простоту работы с ней. Для начинающего, программа может предоставить создание сайтов, как по шаблону, так и с чистого листа. Имея три режима работы, она так же становится удобной для тех людей, кто никогда даже не видел html код, что делает её более привлекательной и доступной. Так же имея возможности импорта с других программ, Expression Web легко читает файлы с таких программ как Front Page и Dreamweaver.

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

Объектом этой курсовой работы становится сама программа Expression Web и её возможности. Задачей же, решение поставленных ряда проблем.

Проблемы, которые необходимо решить, это:

1. Освоение в среде Expression Web.
2. Создание сайта
3. Редактирование текста, графики и т.д.
4. Последующая публикация и проверка.

Цель курсовой работы:

1. Описание элементов программы.
2. Пути создания сайта и предотвращение возможных ошибок.
3. Описание процесса создания сайта.
4. Проверка и публикация.

 

 

1. Знакомство с Expression Web.

1.1 Главное окно.

 

Перед тем, как начать работу с Expression Web необходимо ознакомится с основами работы и элементами программами, представляемыми перед пользователем. Поэтому, перед тем, как начать создание страницы и сайта рассмотрим основные окна и панели программы. В главном окне программы Expression Web находятся те средства, которые необходимы для повседневной работы. В центре расположено окно редактирования, в котором представлены вкладки, соответствующие открытым документам. Панели задач и инструментов по бокам окна редактирования содержат наиболее употребительные инструменты. Если необходимо, эти панели можно скрыть, а потом снова показать. Файлы, входящие в состав Web-сайта. Все файлы и папки, составляющие текущий сайт, отображаются на панели Folder List (Список папок) - одной из четырех, отображаемых по умолчанию. Иконки с изображениями папки и страницы в полосе заголовка этой панели позволяют создавать новые файлы непосредственно в главной папке. Окно редактирования. Вкладки вдоль верхнего края соответствуют открытым Web-страницам и сайтам. Для перехода от одного файла к другому достаточно одного щелчка. Окно можно открыть в режиме конструирования (Design view), так что вся HTML-разметка и CSS-стили будут скрыты. В режиме программирования (Code view) показывается только код, а в комбинированном режиме (Split view) - и то и другое. Удобный компромисс.

Панели задач. По умолчанию слева и справа от окна редактирования расположено по две панели. Более обширно будет описано в разделе ≪Панели задач≫. Строка состояния, расположенная вдоль нижнего края окна и позволяет настраивать разнообразные аспекты представления HTML и CSS. Переключатель Visual Aids (Дополнительная визуализация) позволяет работать с элементами страницы, которые обычно скрыты. Что подробнее будет рассмотрено отдельно в разделе ≪Дополнительная визуализация≫. Переключатель Style Application (Применение стилей) обычно установлен в состояние Auto, при этом действуют стандарты XHTML 1.0 Transitional и CSS 2.1. После двойного щелчка откроется меню, в котором можно выбрать режим Manual (Вручную). Затем, дважды щелкнув по кнопке Standard, открывается страница Page Editor Options (Параметры редактора страниц), где можно выбрать другие схемы. В последних двух элементах строки состояния отображаются текущие схемы HTML и CSS, установленные в окне параметров редактора страниц. Режим редактирования. По умолчанию Expression Web открывается в комбинированном режиме, когда в верхней части окна редактирования отображается код, а в нижней - визуальное представление. Чтобы выйти из этого режима, нужно щелкнуть по кнопке Design (Конструирование) или Code (Код). Эти кнопки находятся в левом нижнем углу окна редактирования. Чтобы перейти на любую из открытых страниц, достаточно просто щёлкнуть по соответствующей вкладке этой страницы, расположенной в верхней части окна редактирования.

 

2.  Задание размера страницы.

 

Не так давно большинство Web-дизайнеров создавали страницы стандартной ширины, примерно 750 пикселей. Но по мере того как все пользователи домашних компьютеров начали массово переходить на мониторы с высоким разрешением, стандартная ширина увеличилась до 960 пикселей. Как бы то ни было, Expression Web позволяет легко задать размер страницы.

Чтобы изменить перечень размеров страниц нужно щелкнуть по иконке в правой части строки состояния и выбрать из выпадающего меня пункт Modify Page Sizes (Изменить перечень размеров страниц). То же самое можно сделать с помощью меню View => Page Size => Modify Page Sizes. В диалоговом окне Modify Page Sizes отображается текущий список размеров страниц. Выбрав размер, для изменения, нужно нажать кнопку Modify (Изменить). Появится окно Page Size (Размер страницы), где в полях Width (Ширина) и Height (Высота) можно будет задать новые размеры. Новый размер заменит тот, что отображался раньше в выбранном пункте меню, выпадающего из строки состояния.

 

3.  Панель задач и панель инструментов.

 

Работая с Expression Web можно выделить четыре панели задач:

1. Folder List (Список папок)
2. Tag Properties (Свойства тэгов)
3. Apply Styles (Применить стили)
4. Toolbox (Набор инструментов)

Так же программа позволяет показать любые из 18 имеющихся панелей и для каждой задать свой размер, программа запомнит их расположение и восстановит при следующем её запуске. Горизонтальные линии разбивают множество панелей задач в выпадающем меню на четыре группы (не включая команды Reset Workspace Layout (Восстановить организацию рабочего пространства) в самом низу). По умолчанию элементы, входящие в одну группу, отображаются в виде вкладок на одной и той же панели. Но при желании можно перетащить любую вкладку в отдельную панель.

Для того что бы открыть панель задач: нужно выбрать из меню Menu пункт Task Panes (Панели задач). В выпадающем меню будут подсвечены те панели, которые сейчас открыты. Чтобы открыть новую панель, щелкните по ее названию в меню. В результате появится либо новая панель, либо новая вкладка в уже открытой панели.

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

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

 

Реорганизация панели задач:

Щелкнув по полосе заголовка любой панели задач и, не отпуская кнопку мыши, перетащите ее в любое место экрана. Панель станет плавающей или, щелкнув по полосе заголовка плавающей панели задач и, не отпуская кнопку мыши, перетащить ее к любому краю окна редактирования.  Когда панель окажется рядом с ближайшей пристыкованной панелью, она тоже пристыкуется к краю окна. Можно поступить иначе. Щелкнув правой кнопкой мыши по полосе заголовка пристыкованной панели задач и выбрав из выпадающего меню команду Float (Плавающая). Панель отстыкуется от края окна, а ее рамка станет более темной. Затем панель можно переместить в любое другое место, попутно изменив размер.

Для восстановления стандартного расположения панелей:

Из меню Task Panes выбрав команду Reset Workspace Layout. При этом все панели, кроме четырех стандартных, будут закрыты, а эти четыре размещены по бокам окна редактирования.

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

Нажать кнопку с изображением прямоугольника, которая имеется в полосе заголовка любой панели с длинным списком элементов. Панель увеличится так, что станет видно больше элементов. При повторном нажатии панель возвращается в исходное свернутое состояние. Так же щелкнув правой кнопкой мыши по полосе заголовка панели и выбрав из выпадающего меню команду Maximize (Развернуть) - панель увеличится. Снова щелкнув правой кнопкой по полосе заголовка и выбрав из меню команду Restore (Восстановить) - панель вернется в исходное состояние.

Немного о панели Toolbox. Панель Toolbox содержит больше элементов, чем любая другая. Увеличить число видимых в ней элементов можно, не развертывая саму панель. Для этого щелкнув правой кнопкой мыши по полосе заголовка и выбрав из меню пункт Icons Only (Только иконки). Одни иконки занимают меньше места, чем иконки с названиями, поэтому объем видимой информации увеличивается. Когда вы только начинаете осваивать Expression Web, названия помогают понять, какая иконка что обозначает. Таким образом, они быстро запоминаются, так что со временем пользователь может перейти к более компактному представлению иконок. Можно настроить вид расширяющейся панели Toolbox. Щелкнув правой кнопкой мыши по полосе заголовка и выбрав из меню пункт Collapse All (Свернуть все) или Expand All (Раскрыть все). Это позволяет быстро свернуть или раскрыть все категории инструментов на панели задач. Чтобы свернуть одну категорию, щелкнув по иконке “–” слева от выделенного полужирным шрифтом названия категории. Входящие в нее инструменты исчезают, оставляя только самоназвание. Чтобы восстановить перечень инструментов в одной категории, щелкните по иконке “+”.

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

В состав Expression Web входят 11 панелей инструментов, которые дают быстрый доступ практически ко всем командам. Но если показать их все сразу, на экране возникнет неразбериха, поэтому по умолчанию видна лишь панель Common (Употребительные), в которой представлены только наиболее часто применяемые команды. Панели инструментов, как и панели задач, можно перемещать и изменять их размеры. Назначение различных панелей будет объяснено ниже, по мере необходимости.

Чтобы добавить панель инструментов:

Нужно выбрать пункт меню View => Toolbars (Вид => Панели инструментов) и в выпадающем меню отметьте нужную панель. Выбранная панель размещается над окном редактирования. (Слева от названий уже выбранных панелей в меню стоят галочки.). Открыть панель инструментов можно также, щелкнув правой кнопкой по полосе заголовка уже открытой панели и сделав выбор из появляющегося меню.

Чтобы закрыть панель инструментов:

Необходимо нажмать кнопку X в правом верхнем углу панели инструментов. Панель сразу же закроется или в меню View => Toolbars щелкнув по названию отмеченной панели. Как только отпустить кнопку мыши, панель закроется.

Чтобы переместить панель инструментов:

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

Чтобы изменить размер панели инструментов:

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

Чтобы перестыковать панель инструментов:

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

 

4. Дополнительная визуализация.

 

При работе в режиме конструирования и в комбинированном режиме Expression Web позволяет отображать части макета, которые обычно невидимы. Например, верстать страницу гораздо проще, если видны отступы и поля для конкретных элементов. Можно точно указать, что именно нужно видеть, а затем скрыть или показать сразу все выбранные элементы форматирования.