КАК CОЗДАТЬ ПРЕВОСХОДНЫЙ CАЙТ
В MICROSOFT EXPRESSION WEB 2 и СSS

Нолан Хестер

VISUAL QUICKPRO GUIDE
MICROSOFT
EXPRESSION WEB 2

Nolan Hester

Москва

QUICK PRO
КАК СОЗДАТЬ
ПРЕВОСХОДНЫЙ
WEBСАЙТ В MICROSOFT
EXPRESSION WEB 2 И CSS

Нолан Хестер

УДК
004.4,274

ББК
32.973.26-018.2
Х40

Хестер Н.

Х40
Как создать превосходный cайт в Microsoft Expression Web 2 и CSS.  – М.:  ДМК
Пресс. – 262 с.: ил.

ISBN 978-5-94074-548-8

В книге описана вторая версия программы Microsoft Expression Web –совре-

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

В версии 2.0 расширились возможности редактирования PHP-сайтов, улуч-

шилась работа с форматом Flash SWF, добавилась поддержка Silverlight, а также
технологии ASP.NET 3.5.

С помощью этой программы дизайнеры могут быстро создавать прекрасно

выглядящие 
сайты, 
пользуясь 
знакомыми 
инструментами. 
Благодаря

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

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

Web-cайты с использованием новейших технологий и программных средств.

УДК 004.4,274
ББК 32.973.26-018.2

Все права защищены. Любая часть этой книги не может быть воспроизведена в какой бы то

ни было форме и какими бы то ни было средствами без письменного разрешения владельцев автор-
ских прав.

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

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

ISBN 0-321-56379-4 (англ.)
Copyright © Peachpit Press

ISBN 978-5-94074-548-8 (рус.)
© Перевод на русский язык, оформление,

ДМК Пресс

содержание

Введение ....................................................................................... 9

Хоть стандартно, но круто .......................................................... 10
А как насчет FrontPage? ............................................................... 11
Как пользоваться этой книгой ................................................... 11
Советы............................................................................................. 12
Заглядывая в будущее: не теряйте связи ................................. 12
Так что же нового в версии 2?....................................................... 13

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

Открытие и закрытие Expression Web ...................................... 15
Главное окно .................................................................................. 16
Задание размера страницы ......................................................... 19
Панели задач.................................................................................. 21
Панели инструментов .................................................................. 26
Дополнительная визуализация................................................. 28

Глава 2. Создание сайтов .......................................................... 29

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

Содержание

Замена содержимого страниц сайта, созданного
по шаблону..................................................................................... 35
Удаление и добавление страниц в сайт, созданный
по шаблону..................................................................................... 37
Импортирование сайта ................................................................ 40
Работа с Web-сайтами .................................................................. 43
Изменение режима отображения сайта ................................... 46

Глава 3. Работа со страницами ................................................. 47

Создание Web-страниц ................................................................ 48
Работа с Web-страницами ........................................................... 52
Задание других свойств страницы ............................................ 57
Предварительный просмотр страниц в браузере................... 60

Глава 4. Работа с текстом .......................................................... 62

Ввод и выделение текста ............................................................. 63
Вставка текста ................................................................................ 65
Отступы .......................................................................................... 69
Выравнивание текста ................................................................... 71
Вставка специальных символов HTML .................................... 72
Создание заголовков .................................................................... 74
Создание списков.......................................................................... 75
Поиск текста, кода и тэгов ........................................................... 81
Проверка правописания, тезаурус ............................................ 85

Глава 5. Работа с графикой ....................................................... 89

Добавление картинок .................................................................. 90
Выравнивание картинок ............................................................. 93
Добавление границ, полей и отступов ..................................... 96
Редактирование картинок ......................................................... 100
Изменение размера и интерполяция изображения............. 105
Задание формата картинки ...................................................... 111

Содержание
77777

Глава 6. Создание ссылок........................................................ 115

Добавление ссылок .................................................................... 116
Задание места открытия ссылки ............................................. 121
Добавление всплывающих подсказок ................................... 122
Добавление закладок (якорей) ................................................ 123
Создание ссылок внутри картинки......................................... 126
Инструменты для работы со ссылками ................................. 129

Глава 7. Создание стилей с помощью CSS............................. 134

Инструменты для работы с CSS ............................................... 135
Принципы каскадирования ..................................................... 137
Создание набора шрифтов ....................................................... 138
Создание стилей на основе тэгов ............................................. 140
Создание стилей на основе классов ........................................ 144
Создание встроенных стилей ................................................... 147
Копирование и изменение стилей ........................................... 148
Создание таблиц стилей ............................................................ 151
Разрешение проблем, связанных с CSS.................................. 156

Глава 8. Верстка с применением CSS...................................... 159

Свойства, управляющие позиционированием..................... 160
Свойства float и clear .................................................................. 162
Использование инструментов позиционирования ............. 164
Готовые CSS-макеты................................................................... 165
Контекстные селекторы ............................................................ 168
Создание CSS-макета с нуля ..................................................... 170

Глава 9. Добавление интерактивного поведения .................. 176

Создание интерактивных кнопок ........................................... 177
Наделение элемента поведением............................................. 181
Меню ссылок ............................................................................... 190

Содержание

Глава 10. Добавление таблиц .................................................. 194

Создание таблиц ......................................................................... 195
Выделение элементов таблицы ............................................... 199
Изменение структуры таблицы............................................... 201
Разбиение и объединение ячеек .............................................. 205
Выравнивание строк и столбцов ............................................. 207
Форматирование таблиц и ячеек ............................................. 208
Вставка данных из таблицы Excel ........................................... 213
Использование таблиц для верстки ........................................ 215

Глава 11. Добавление форм .................................................... 221

Создание форм ............................................................................ 222
Добавление полей в форму....................................................... 223
Добавление текстовой области ................................................ 225
Добавление группирующей рамки ......................................... 226
Добавление флажков и переключателей............................... 227
Добавление кнопок отправки и сброса .................................. 230
Сохранение полученных из формы данных ........................ 232
Параметры расширений FrontPage......................................... 234

Глава 12. Публикация сайта..................................................... 236

Проверка сайта ............................................................................ 237
Пометка страниц, подлежащих публикации ........................ 239
Публикация в Web...................................................................... 241

Глава 13. Новые возможности Expression Web 2................... 248

Добавление мультимедийных файлов................................... 248
Чтобы вставить SWF-файл ....................................................... 247
Чтобы вставить файл в формате Windows Media ................ 251
Чтобы вставить приложение Silverlight ................................ 253

Предметный указатель ............................................................ 254

Microsoft Expression Web – это совсем но-
вая программа, предлагающая обшир-
ный набор визуальных средств для созда-
ния впечатляющих сайтов, отвечающих
всем Web-стандартам. Может быть, слово
«стандарты» не поражает воображение,
но именно они стоят за многочисленны-
ми сайтами, которые были разработаны
совместными усилиями на базе специфи-
кации «Web 2.0». В качестве инструмента
совместной разработки Expression Web
позволяет дизайнерам и программистам
трудиться вместе над одним проектом.
С помощью программы Expression Web
дизайнеры могут быстро создавать пре-
красно выглядящие сайты, пользуясь зна-
комыми инструментами. Благодаря под-
держке стандартов получившиеся в ре-
зультате файлы можно передать про-
граммистам для последующей работы
с помощью тех средств разработки, кото-
рые они предпочитают. Сделав свое дело,
они вернут файлы вам, а вы сможете за-
грузить их в Expression Web без малей-
ших затруднений. И вам даже не нужно
будет заглядывать в написанный про-
граммистами код. (Если вы захотите по-
копаться в XHTML, CSS, XML/XSLT и схе-
ме, то все к вашим услугам. Но c Expres-
sion Web в этом нет необходимости.)

Введение

10
10
10
10 Введение

Хоть стандартно, но круто

Все эти разговоры о стандартах для вас
как овсянка с витаминами? Скажу по-дру-
гому: на мой взгляд, Expression Web со-
держит лучшие на сегодняшний день ин-
струменты для работы с таблицами сти-
лей, а ведь я много лет пользовался для
создания сайтов редактором Dream-
weaver (рис. i.1). Например, Expression
Web позволяет с помощью буксировки
мышью изменять величины полей и от-
ступов (рис. i.2). Не понимаете, почему
внесенное в стиль изменение не работает,
как надо? Нет нужды копаться в специ-
фикациях консорциума W3C. На вкладке
CSS Properties (Свойства CSS) Expression
Web ясно покажет, какое из каскадно при-
мененных правил свело ваши усилия на
нет (рис. i.3). Приходилось разрешать
конфликты между внутренними и вне-
шними стилями? В Expression Web для ре-
шения проблемы достаточно движения
мышью (рис. i.4).

Рис. i.1. Что видишь,
то и получаешь:
быстрый поиск
и применение
CSSстиля

Рис. i.2. Expression
Web позволяет
изменять поля
и отступы с помо
щью буксировки

Рис. i.3. На вкладке CSS Properties видно, какое
из каскадно примененных правил свело ваши
усилия на нет

Рис. i.4. Хотите перенести внутренние стили
во внешнюю таблицу? Достаточно щелчка
и движения мышью

Введение 11
11
11
11
11

А как насчет FrontPage?

Если вы, как и многие другие, создавали
сайты с помощью программы FrontPage,
не отчаивайтесь. Expression Web без труда
открывает сайты, разработанные в этой
программе. Но поскольку во FrontPage
применялось множество нестандартных
инструментов и уловок, то миграция не
пройдет совсем уж безболезненно. (До-
полнительную информацию см. на врез-
ке «Лучше резать сразу» ниже.) Впрочем,
ветераны FrontPage быстро освоятся с но-
выми инструментами в Expression Web.
На самом деле Expression Web – это толь-
ко первый из целой линейки инструмен-
тов для Web, которые Microsoft собирает-
ся выпустить в 2007 году. В программе
Expression Blend применяется новая вер-
сия каркаса .NET Framework 3.0 для инте-
рактивного дизайна. Expression Design
предлагает средства иллюстрирования и
графического дизайна для Web и настоль-
ных компьютеров. Expression Media, ос-
нованная на программе iView MediaPro,
поможет организовать цифровые архи-
вы. Но начните с Expression Web. Кто зна-
ет, куда вас заведет работа дизайнера?

Как пользоваться этой
книгой

Как и во всех книгах из серии Visual
QuickStart издательства Peachpit, ключом
служит слово visual (визуальный). В кни-
ге более 600 снимков с экрана, на которых
иллюстрируется вся процедура создания
Web-страниц и сайтов. Краткие подри-
суночные подписи поясняют основные
функции и настройки. В идеале, для того
чтобы быстро найти нужный материал,
достаточно просмотреть заголовки разде-
лов, иллюстрации и подписи. Отыскав
интересующую вас тему, прочтите сопро-
водительный текст, в нем изложены все
детали.
Сначала речь пойдет о том, как настроить
Expression Web под свои привычки. Затем
мы поясним, почему нужно сосредото-
читься на создании именно сайта, а не
отдельной страницы. В основе такого
подхода лежат шаблоны и CSS. Я объяс-
ню, как с их помощью создать развиваю-
щийся сайт, не погрязнув в рутине посто-
янного обновления отдельных страниц.
Заложив фундамент, вы сможете быстро
приступить к размещению на страницах
текста и графики и связыванию страниц
с помощью ссылок. Далее мы увидим, как
CSS позволяет стилизовать и располо-
жить содержимое, чтобы страница краси-
во смотрелась. К этому моменту вы уже
будете готовы перейти к интерактивному
поведению и формам, которые придадут
блеск сайту. Ну а выставление своей ра-
боты на всеобщее обозрение – дело со-
всем простое. Честное слово.

12
12
12
12 Введение

Советы

В конце многих разделов вы найдете сове-
ты о том, как сэкономить время, восполь-
зовавшись разнообразными встроенны-
ми в Expression Web средствами. Упомя-
нем также некоторые типографские со-
глашения.
 Шрифт для кода. Текст, напечатан-
ный Ú‡ÍËÏ ¯ËÙÚÓÏ, должен вво-
диться буквально, например: в окне
текста наберите http://localhost
и нажмите клавишу Enter. Адреса
в Web также набраны таким шрифтом.
 Команды меню и комбинации кла-
виш. Команды меню выглядят так:
выберите команду File ⇒ Open Site.
Комбинации клавиш для быстрого
выбора команды (в тех случаях, когда
они имеются) приводятся в скобках
в том месте, где используются в пер-
вый раз. Например, (Ctrl+T) означает,
что для создания уменьшенного вари-
анта картинки можно одновременно
нажать клавиши Ctrl и T.
 Обрезанные рисунки. Иногда диало-
говое окно настолько велико, что не
умещается на одной странице вместе
с другими рисунками и текстом. В та-
ких случаях я оставлял лишь малень-
кий фрагмент окна (рис. i.5). Но все
необходимое для понимания описы-
ваемого шага сохранено. Это в любом
случае лучше, чем масштабировать
рисунок до неузнаваемости.

Рис. i.5. Иногда
изображение
диалогового окна
обрезается, но все
необходимые детали
присутствуют

Заглядывая в будущее:
не теряйте связи

Обновления и патчи для Expression Web
публикуются на странице http://www.
microsoft.com/products/expression/.
Для этой книги организован сопроводи-
тельный сайт, на котором есть множество
советов и приемов, взятых из реальной
практики. Программу Expression Web ждет
большое будущее, и я постараюсь дер-
жать вас в курсе всех изменений – как
крупных, так и мелких. Поэтому когда
будет время, заходите на сайт www.
waywest.net/expression/. Пишите мне на
адрес expression@waywest.net – делитесь
своими находками и – не дай бог – сооб-
щайте о найденных ошибках.
Желаю вам приятного чтения и потря-
сающего Web-сайта!

Введение 13
13
13
13
13

Так что же нового в версии 2?

Практически все нововведения в версии
Expression Web 2 скрыты «под капотом».
Главное окно, панели задач и инструменты
не претерпели сколько-нибудь значимых
изменений. Зато под поверхностью немало
существенных и с нетерпением ожидаемых
новшеств. Expression Web 2 включает:
 новые средства редактирования для
файлов в форматах Flash SWF и Win-
dows Media, которых так не хватало
в первой версии;
 поддержку новой технологии Micro-
soft Silverlight, которая позволяет со-
здавать обогащенные страницы с вы-
сокой степенью интерактивности;
 поддержку серверных элементов уп-
равления ASP.NET (рис. i.4). Опытные
программисты найдут в Expression
Web 2 полную палитру элементов уп-
равления для создания Web-приложе-
ний и служб (рис. i.5);
 поддержку PHP-страниц и серверных
сценариев для построения сайтов, об-
ращающихся к базам данных (рис. i.6).
С этими дополнениями Expression Web 2
предлагает инструменты создания сайтов
для программистов любой квалифика-
ции – от начинающих до самых опытных.
Их диапазон слишком широк для этой
книги, которая, как и раньше, рассчита-
на на пользователей начального и сред-
него уровня. Если вы хотите получить
дополнительную информацию о при-
надлежащих корпорации Microsoft тех-
нологиях Silverlight и ASP.NET, загляните
на сайты silverlight.net и www.asp.net. Если
вас интересует работа с базами данных из
PHP, обратите внимание на замечательную
книгу Ларри Ульмана «PHP and MySQL for
Dynamic Web Sites: Visual QuickPro Guide»
издательства Peachpit Press. Несмотря на
словечко Pro в названии, разработчик сред-
него уровня найдет в этой книге много по-
лезного для себя: http://www.peachpit.com/
store/product.aspx?isbn=0321526279/

Рис. i.5. В инструментарии
вы найдете
дополнительные элементы
управления ASP.NET,
разбитые по категориям

Рис. i.6. Теперь в Expression Web 2 встроена
поддержка PHPстраниц

Рис. i.4. Меню Insert
обеспечивает быстрый доступ
к элементам управления
ASP.NET

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

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