Визуальный 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 позволяет отображать части макета, которые обычно невидимы. Например, верстать страницу гораздо проще, если видны отступы и поля для конкретных элементов. Можно точно указать, что именно нужно видеть, а затем скрыть или показать сразу все выбранные элементы форматирования.

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

Выбрав из меню команду View => Visual Aids => Show (Вид => Дополнительная визуализация => Показать). Повторный выбор команды скрывает дополнительные элементы. Так же, можно это сделать через комбинацию клавиш “Ctrl+/”, или щелкнув по переключателю Visual Aids в строке состояния. Чтобы включить или выключить показ дополнительных элементов форматирования по отдельности:

После того как режим дополнительной визуализации активирован, выбрав из меню пункт View => Visual Aids и отметив все элементы, которые нужно сделать видимыми. Можно включить (или выключить) сразу все нужные пункты при условии, что курсор не покидает выпадающего меню. Когда курсор покинет область меню, изменения сразу вступят в силу.

 

2. Создание сайта.

2.1 Сайт на основе  шаблонов.

 

Теперь, ознакомившись с элементами рабочего стола программы можно постепенно приступать к созданию Web-страниц. Но создание целого сайта с множеством страниц, которые обладают сходным внешним видом и общей системой навигации будет нелегко сделать, если создавать страницы индивидуально. Поэтому вначале будет рассказано, как создать пустой сайт, содержащий всего одну страницу. А потом описана процедура создания однородного сайта из нескольких страниц с помощью шаблонов на основе каскадных таблиц стилей (CSS - Cascading Style Sheets). У такого подхода есть два достоинства: страницы отображаются быстрее и надежнее, а обновлять их по мере роста сайта оказывается проще.

 

Чтобы создать новый пустой сайт. Нужно открыть из меню пункт File => New => Web Site (Файл => Новый => Сайт). Появится диалоговое окно New (Новый). В нем уже отмечена группа шаблонов General (Общие). Необходимо выбрать в средней панели шаблон One Page Web Site (одностраничный сайт) или Empty Web Site (пустой сайт). По умолчанию Expression Web предлагает сохранить сайт в подпапке Му Web Sites или mysite папки ...\UserName\ Documents. Так же, можно изменить путь, нажав кнопку Browse (Обзор) и указать какое-нибудь место вне папки Documents, быть может, на другом диске. Указав в окне New Web Site Location папку для размещения сайта или создав новую папку, нажать кнопку Open. Указанный путь будет записан в текстовое поле в нижней части окна New. После обратной косой черты нужно ввести имя своего сайта и нажмать ОК. Затем в окне редактирования появится вкладка Web Site, на которой представлен список файлов, входящих в состав сайта, - в данном случае единственная, пока пустая, начальная страница default.htm. Такой же список появится на панели Folder List слева. Теперь можно наполнить пустую страницу или создать еще какие-нибудь.

Создание сайта на основе шаблона.

И так, приступим к описанию создания сайта на основе шаблонов. Использование шаблона для создания своего сайта позволяет сэкономить так много времени, что имеет смысл изучить все необходимые для этого шаги: выбор шаблона, его настройку и создание по нему страниц сайта. Шаблон дает возможность модифицировать оформление сразу всех страниц сайта, например шапку и навигационные ссылки, внеся изменение только в одном месте. При этом Expression Web автоматически генерирует необходимые CSS-файлы. Так чтобы сайт выглядел по возможности одинаково во всех браузерах.

Для того чтобы выбрать и настроить шаблон сайта. Пункт меню File => New => Web Site (Файл => Новый => Сайт). В окне New нужно выбрать группу Templates (Шаблоны) в левой колонке, а в средней колонке укажите шаблон, наиболее подходящий для вашего сайта. При этом в колонке справа вы увидите, как будет выглядеть сайт. Во время недолгой генерации сайта отображается диалоговое окно. В окне редактирования появляется вкладка, соответствующая новому сайту. В ней, а также на панели Folder List представлен список файлов, входящих в состав сайта. Дважды щелкнув по файлу default.htm , чтобы открыть начальную страницу. Некоторые области страницы реагируют на щелчки мышью. Это означает, что их содержимое можно заменить, вставив свои собственные заголовки, текст и картинки. Другие области, к примеру, название сайта и навигационную панель, изменять нельзя, так как они являются общими для всех страниц. Чтобы открыть эти заблокированные области, дважды щелкнуть по файлу с расширением “dwt” (обычно он называется master.dwt) на панели Folder List. Открытая шаблонная страница реагирует на щелчки мышью, ее можно изменять. Можно настроить общие элементы, например название сайта и навигационную панель, по своему усмотрению. Щелкнув правой кнопкой мыши по вкладке, соответствующей DWT-файлу, и выберите из контекстного меню команду Save (Сохранить). Появится предупреждение о том, что в результате изменения главной страницы шаблона будут модифицированы несколько файлов. Поскольку это именно то, что и надо, нажав Yes, а потом ОК, чтобы закрыть окно предупреждения. Вернувшись на начальную страницу, щелкнув по ее вкладке, можно увидеть, что все внесенные в шаблон изменения вступили в силу. Но наличие символа * на язычке вкладки говорит, что изменения еще не сохранены, поэтому нужно выбрать из меню команду File => Save All (Файл => Сохранить все). Теперь можно поменять заголовки, текст и картинки на домашней странице.

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

Чтобы заменить содержимое страницы:

Нужно дважды щелкнуть по заголовку на странице или перетащить его в другое место. Ввести или вставить из буфера обмена новый текст заголовка. К новому заголовку автоматически применяется стиль исходного. Выбрав какой-нибудь абзац на странице, ввести или вставить из буфера обмена новый текст. Стиль исходного абзаца сохраняется. Щелкнув по картинке, чтобы выбрать ее из меню команду Insert => Picture (Вставка => Картинка) и указать, откуда нужно взять картинку. Найдя нужную картинку и нажав кнопку Insert (Вставить). Добавив краткое описание в поле Alternate text (Альтернативный текст) и нажать ОК. Исходная картинка на странице будет заменена.

Удаление и добавление страниц в сайт, созданный по шаблону.

Естественно, сайт, создаваемый по шаблону, встроенному в Expression Web, будут стоять не те страницы, которые нам нужны. Избавиться от ненужных страниц совсем просто. Но чтобы вновь добавленные страницы отвечали выбранному шаблону, нужно предпринять определенные действия.

 

Чтобы удалить страницы. На панели Folder List щелкнуть правой кнопкой мыши по ненужной странице и выбрать из контекстного меню команду Delete (Удалить). Когда появится диалоговое окно Confirm Delete (Подтвердить удаление), нужно проверить, что выбран тот файл, и нажать Yes. Выбранный файл исчезнет, но папка, в которой он находился, останется.

Для того чтобы добавить страницу. На панели Folder List щелкнуть правой кнопкой мыши по странице, наиболее похожей на ту, что нужно добавить, и выбрать из контекстного меню команду New From Existing Page (Создать на основе существующей).

В окне редактирования появится новая страница без названия с таким же содержимым и форматированием, как страница-шаблон. Выбрав команду File => Save, откроется диалоговое окно Save As (Сохранить как), настроенное на папку сайта. Перейдя в подпапку, где должна быть сохранена новая страница, обычно это та же папка, из которой взята страница-шаблон. Ввести в поле File паше (Имя файла) содержательное имя и нажать кнопку Save (Сохранить). В выбранной папке на панели Folder List появится новая страница. Теперь можно наполнить новую страницу содержимым, сохраняя форматирование и общий дизайн страницы - шаблона. Стоит помнить, что на язычке вкладки в окне редактирования будет видна *, если изменения еще не сохранены.

Импортирование сайта.

Если уже имеется сайт, созданный с помощью другой программы, то Expression Web не будет заставлять вас начинать все сначала. Можно импортировать сайт как с жесткого диска, так и из сети. Для тех, кто раньше работал с программой Front-Page - предыдущим HTML-редактором от Microsoft, - это просто спасение. (Перед тем как переносить в Expression Web сайты, созданные в редакторе FrontPage).

 

Для импортирования сайта. Нужно выбрать пункт меню File => New => Web Site (Файл => Новый => Сайт). В окне New выбрать General => Import Web Site Wizard (Общие => Мастер импорта сайтов) и нажать ОК. Мастер сначала спросит, какой метод импорта необходим. Выбрав любой переключатель, а потом ввести путь или адрес в Web либо нажать кнопку Browse для интерактивного выбора. Для продолжения нажать Next (Далее). На следующем шаге с помощью кнопки Browse указать, куда импортировать сайт, а если сайт уже открыт в Expression Web, отметить флажок Add to current Web site (Добавить к существующему сайту). Нажать Next. На следующем шаге можно указать, сколько нужно импортировать уровней, считая от начальной страницы. Можно также задать максимальный суммарный объем импортируемых файлов или затребовать импорт только HTML-файлов и графики. На последнем шаге мастера нажать кнопку Finish (Готово), после чего появится окно с индикатором хода процесса загрузки. Так же можно импортировать начальную страницу сайта вместо текущей, нажмите Yes. Тогда импортированная начальная страница появится в списке файлов на панели Folder List наряду со всеми остальными. Теперь можно заняться модификацией или расширением сайта в Expression Web.

 

Работа с Web-сайтами.

Чтобы не ≪побить≫ ссылки, связывающие страницы сайта, для закрытия, открытия, переименования и удаления сайтов следует пользоваться только программой Expression Web.

Чтобы закрыть сайт. Нужно выполнить команду File => Save All (Файл => Сохранить все), а затем File => Close Site (Файл => Закрыть сайт). После закрытия сайта в окне редактирования и на панели Folder List ничего не останется.

 

Чтобы открыть сайт. Выполнить команду File => Open Site (Файл => Открыть сайт). Открывается окно Open Site, в котором перечислены все сайты, созданные с помощью Expression Web. Выбрать какой-нибудь сайт в правой колонке и нажать кнопку Open (Открыть). Выбранный сайт появляется в окне редактирования, полный путь к нему представлен в верхней части этого окна.

Чтобы переименовать сайт. Открыть сайт, который нужно переименовать, и выберите из меню команду Site => Site Settings (Сайт => Настройки сайта). Откроется окно Site Settings, и в текстовом поле сверху будет подсвечено текущее имя сайта. Ввести новое имя и нажать ОК, чтобы закрыть окно. Новое имя отображается в окне редактирования и на панели Folder List.

Чтобы удалить сайт. Открыть сайт, который нужно удалить. Щелкнуть правой кнопкой мыши по его имени в списке на панели Folder List и выбрать из контекстного меню команду Delete (Удалить). Когда появится окно подтверждения Confirm Delete, установить переключатель в положение Delete this Web site entirely (Удалить сайт целиком) и нажать ОК. Удаленный сайт пропадает из списка на панели Folder List.

 

Изменение режима отображения сайта.

По умолчанию Expression Web показывает открытый сайт в виде списка папок и файлов. Но есть и еще три режима отображения. О режиме Remote Web Site (Удаленный сайт).

Чтобы изменить режим отображения сайта:

Щелкнуть по соответствующей сайту вкладке в окне редактирования, и нажать кнопку Remote Web Site (Удаленный сайт) в нижней части окна, чтобы настроить публикацию сайта или увидеть файлы, которые уже опубликованы. Так же, щелкнув по соответствующей сайту вкладке, в окне редактирования и нажав кнопку Reports (Отчеты) в нижней части окна, чтобы получить список заголовков отчетов и, возможно, обнаруженных ошибок. Есть ещё способ. На панели Folder List выбрать файл, для которого нужно получить список ссылок. Щелкнув по соответствующей сайту вкладке в окне редактирования и нажав кнопку Hyperlinks (Гиперссылки) в нижней части окна появится диаграмма, на которой представлены ссылки, ведущие как на выбранную страницу, так и с нее на другие страницы.

 

2.2 Работа со страницами, текстом и графикой.

 

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

 

Создание Web-страниц.

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

 

Чтобы создать пустую страницу. Нужно открыть сайт, над которым нужно поработать, и выбрать из меню команду File => New => Page (Файл => Создать => Страница). В окне New по умолчанию предлагается создать HTML-файл. После нажатия ОК в окне редактирования появляется пустая Web- страница.

Если же вы нужно начать со стандартной пустой HTML-страницы, то необходимо выбрать из меню пункт File => New => HTML, тогда можно будет обойтись без промежуточного открытия диалогового окна New. А если видна панель инструментов Common, то можно нажать на ней кнопку New. Для добавления страницы к уже существующему сайту можно также нажать кнопку New в полосе заголовка панели Folder List. По умолчанию при этом создается пустая HTML-страница. Хотя разрешается создавать отдельные страницы, не открывая предварительно сайт, лучше избегать хаоса и работать в контексте сайта, пусть даже он состоит всего из одной страницы. Если нужно создать не HTML-страницу, то выбрать в средней колонке другой вариант, например CSS. Чтобы по умолчанию предлагался иной формат, щелкнуть по ссылке Page Editor Options (Параметры редактора страниц). Или выберите из меню пункт Tools => Page Editor Options (Сервис => Параметры редактора страниц). В окне Раgе Editor Options перейти на вкладку Authoring (Создание страниц) и указать нужный формат в списке Default Document Type (Тип документа по умолчанию). Изменения вступают в силу после нажатия кнопки ОК. В том же окне можно изменить также объявления типа документа и схемы, но вообще-то эти параметры должны применяться к сайту в целом, поэтому менять их для отдельных страниц нецелесообразно. (Для новых сайтов лучше всего задавать XTML 1.0 Transitional и CSS 2.1, а для старых, в которых много тэгов, исключенных из спецификации XHTML, - HTML 4.01 Transitional.)

 

Чтобы создать новую страницу по шаблону необходимо открыть сайт и выполнить команду File => New => Page (Файл => Создать => Страница). В окне New выбрать в левой колонке пункт CSS Layouts (CSS-макеты), а в средней - нужный шаблон, ориентируясь на внешний вид, который отображается в области Preview (Образец). После нажатия ОК в окне редактирования появится не озаглавленная пустая (на первый взгляд) страница. Чтобы видеть все в деталях, нужно включить режим дополнительной визуализации. Выполнив команду View => Visual Aids => Show (Вид => Дополнительная визуализация => Показать) (Ctrl+) и отметив в выпадающем меню все флажки, кроме двух, относящихся к ASP.NET.