Визуальный HTML редактор Microsoft Expression Web как инструмент начинающему 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.