Создание Web-сайтов в Microsoft Expression Web

и

Normal paragraphs without line breaks Не требует дополнительных пояснений (Обычные абзацы без разрывов строк)

Рис. 4.10. Меню, выпадающие при нажатии кнопок Undo или Redo, позволяют указать, сколько действий отменить или вернуть

Чтобы вернуть отмененное действие:
Выполните команду Edit ⇒ Redo (Правка ⇒ Вернуть) или нажмите комбинацию клавиш Ctrl+Y. Ранее отмененное действие выполняется повторно. После слов Undo (Отменить) или Redo (Вернуть) в меню идут дополнительные слова, зависящие от того, какое именно действие имеется в виду. Если на экране присутствует панель инструментов Standard (Стандартные), то меню, выпадающие при нажатии кнопок Undo или Redo, позволяют указать, сколько действий вы хотите отменить или вернуть (рис. 4.10).

68 Работа с текстом Чтобы разорвать строку: Это можно сделать несколькими способами:
Щелкните мышью в том месте, где надо разорвать строку текста, и нажмите комбинацию клавиш Shift+Enter.
Щелкните мышью в том месте, где надо разорвать строку текста, и выберите из меню команду Insert ⇒ HTML ⇒ Break (Вставка ⇒ HTML ⇒ Разрыв) (рис. 4.11).
Щелкните мышью в том месте, где надо разорвать строку текста, найдите на панели Toolbox категорию HTMLTags и дважды щелкните по иконке Break (рис. 4.12). Чтобы вставить новый абзац:
Щелкните мышью в том месте, где должен начинаться новый абзац, и нажмите Enter. Курсор (возможно, вместе с текстом) перейдет на новую строку. Чтобы показать или скрыть маркеры новой строки и нового абзаца:
Нажмите кнопку Show All (Показать все) на панели инструментов Standard (Стандартные) (рис. 4.13). Появятся обычно скрытые маркеры конца строки и конца абзаца. Чтобы скрыть эти маркеры, нажмите кнопку Show All еще раз. Если вы хотите показать или скрыть любые из десяти разных видов маркеров, щелкните по стрелке рядом с кнопкой Show All (рис. 4.14).

Отступы 69

Отступы

Рис. 4.11. Чтобы разорвать строку, выберите из меню команду Insert ⇒ HTML ⇒ Break

Рис. 4.15. Кнопка Increase Indent Position имеется на обеих панелях инструментов Common и Formatting

Рис. 4.12. Можно также дважды щелкнуть по иконке Break на панели Toolbox Рис. 4.16. Выделенный абзац сдвинулся на 40 пикселей

Рис. 4.13. Чтобы показать маркеры новой строки и нового абзаца, нажмите кнопку Show All на панели инструментов Standard. Повторное нажатие скрывает маркеры

Отступы – это средство структурирования текста; наличие отступа говорит о том, что текст менее важен, чем предшествующий ему, или, по крайней мере, является подчиненным. Неудивительно, что отступы играют такую важную роль в структурных конспектах, поскольку, как и в случае Web-страниц, в них основное внимание уделяется самой информации, а не ее внешнему виду. Впрочем, беспокоиться не о чем – CSS позволит точно определить, как должен выглядеть сдвинутый текст. Но это отдельная процедура, которая будет описана в главе «Создание стилей с помощью CSS». Здесь же мы лишь покажем, как сформировать простейший отступ. Чтобы задать отступ для абзаца: 1. Щелкните мышью в любом месте абзаца (или нажмите кнопку мыши и обведите курсором несколько абзацев). 2. Нажмите клавишу Tab или кнопку Increase Indent Position (Увеличить отступ) на панели инструментов Common или Formatting (рис. 4.15). Выделенные абзацы сдвигаются вправо (рис. 4.16). Чтобы увеличить отступ, нажмите ту же кнопку еще раз. Для уменьшения отступа нажмите соседнюю кнопку Decrease Indent Position (Уменьшить отступ).

Рис. 4.14. Можно щелкнуть по стрелке рядом с кнопкой Show All и отметить в выпадающем меню виды маркеров, которые нужно показать или скрыть

70 Работа с текстом Чтобы начать абзац с красной строки: 1. Щелкните мышью в любом месте абзаца и выберите из меню команду Format ⇒ Paragraph (Формат ⇒ Абзац) (рис. 4.17). 2. В диалоговом окне Paragraph (Абзац) введите число в поле Indent first line (Красная строка) или воспользуйтесь для задания числа маленькими стрелками справа от этого поля (рис. 4.18). В области Preview (Образец) в нижней части окна видно, каков будет эффект. 3. Добившись нужного результата, нажмите OK, чтобы закрыть окно и применить новые параметры (рис. 4.19).

Выравнивание текста 71

Выравнивание текста

Рис. 4.17. Чтобы начать абзац с красной строки, выберите из меню команду Format ⇒ Paragraph Рис. 4.20. Чтобы выровнять текст, нажмите любую из кнопок выравнивания на панели инструментов Common или Formatting

Рис. 4.21. Выделенный абзац выравнивается в соответствии со сделанным выбором

Рис. 4.18. В диалоговом окне Paragraph (Абзац) введите число в поле Indent first line. В области Preview в нижней части окна видно, каков будет эффект

Рис. 4.19. Первая строка выделенного параграфа сдвигается вправо на указанную величину

Как и текстовый редактор, программа Expression Web позволяет выравнивать текст по левому краю, по правому краю или по центру. Можно также выравнивать по ширине, но в Web этот способ применяется редко. Чтобы выровнять текст:
Щелкните мышью в любом месте абзаца (или нажмите кнопку мыши и обведите курсором несколько абзацев). Нажмите любую из кнопок выравнивания на панели инструментов Common или Formatting (рис. 4.20). Выделенные абзацы выравниваются в соответствии со сделанным выбором (рис. 4.21). В отличие от панели Common, панель Formatting содержит кнопку Justify (По ширине). Но имейте в виду, что в этом режиме слова не растягиваются, так что в некоторых строках могут оказаться некрасивые лакуны.

72 Работа с текстом

Вставка специальных символов HTML По необходимости в языке HTML для представления некоторых символов применяются специальные коды. Чтобы вставить специальный символ: 1. Щелкните мышью в том месте текста, куда надо вставить специальный символ, и выберите из меню пункт Insert ⇒ Symbol (Вставка ⇒ Символ) (рис. 4.22). 2. В диалоговом окне Symbol воспользуйтесь раскрывающимися списками Font (Шрифт) и Subset (Набор), чтобы найти нужный символ (рис. 4.23). Можно вместо этого выбрать символ из строки Recently used symbols (Недавно использовавшиеся символы), если он там есть. Нажмите кнопку Insert (Вставить). В текст будет вставлен HTML-код, соответствующий выбранному символу. Если вас интересуют часто употребляющиеся знаки препинания, например длинное тире или многоточие, обратитесь к набору General Punctuation (Знаки препинания) (рис. 4.23). Со временем все символы, которыми вы часто пользуетесь, попадут в строку Recently used symbols, так что возиться со списками Font и Subset будет уже не нужно.

Вставка специальных символов HTML 73 Рис. 4.22. Щелкните мышью в том месте текста, куда надо вставить специальный символ, и выберите из меню пункт Insert ⇒ Symbol

Рис. 4.24. Чтобы вставить горизонтальную линию, выберите из меню пункт Insert ⇒ HTML ⇒ Horizontal Line (левый рисунок) или щелкните по иконке Horizontal Line на панели Toolbox

Чтобы вставить горизонтальную линию:
Щелкните мышью в том месте текста, куда надо вставить горизонтальную линию, и выберите из меню пункт Insert ⇒ HTML ⇒ Horizontal Line (Вставка ⇒ HTML ⇒ Горизонтальная линия) (рис. 4.24 слева). Если открыта панель Toolbox, то можно щелкнуть по иконке Horizontal Line в категории HTML ⇒ Tags (рис. 4.24 справа). Чтобы изменить свойства линии, щелкните по ней правой кнопкой мыши и выберите из контекстного меню пункт Horizontal Line Properties (Свойства горизонтальной линии) (рис. 4.25). В диалоговом окне Horizontal Line Properties можно изменить ширину (лучше задавать ее в процентах от ширины окна, а не в виде абсолютного значения) (рис. 4.26), а также толщину, выравнивание и цвет. Чтобы применить изменения, нажмите OK. Если на экране видна панель инструментов Formatting, то в меню, выпадающем из кнопки Outside Borders (Внешние границы), тоже есть кнопка для задания свойств горизонтальных линий (рис. 4.27).

Рис. 4.23. Воспользуйтесь раскрывающимися списками Font и Subset, чтобы найти нужный символ. Можно вместо этого выбрать символ из строки Recently used symbols

Рис. 4.25. Чтобы изменить свойства горизонтальной линии, щелкните по ней правой кнопкой мыши и выберите из контекстного меню пункт Horizontal Line Properties

Рис. 4.26. В диалоговом окне Horizontal Line Properties можно изменить ширину, толщину, выравнивание и цвет линии

Рис. 4.27. На панели инструментов Formatting в меню, выпадающем из кнопки Outside Borders, также есть кнопка для задания свойств горизонтальных линий

74 Работа с текстом

Создание списков 75

Создание заголовков

Создание списков

Именно заголовки помогают читателям сориентироваться в ваших Web-страницах. Если в обычных абзацах находится содержимое, то заголовки придают тексту структуру. Хорошие заголовки помогают читателю быстро найти нужную тему, не читая весь текст. В HTML предусмотрено шесть уровней заголовков, от самого крупного h1 до самого мелкого h6. Но лучше думать не о размерах шрифта, а об относительной важности заголовков. Используйте H1 для самых важных заголовков, например страницы в целом. Тогда H2 и H3 следует зарезервировать для подзаголовков, а H4 или H5 – для разделов на боковых панелях. И самое главное – будьте последовательны при выборе размеров шрифтов для структурирования содержимого. Что касается цвета и гарнитуры шрифта заголовка, то их лучше задавать с помощью CSS, как описано в главе «Создание стилей с помощью CSS».

Списки бывают двух видов: нумерованные и маркированные. Можно изменить параметры, действующие для списков по умолчанию (использовать буквы вместо цифр в номерах или квадратные, а не круглые маркеры). Если необходимо чтото более сложное, то лучше с помощью CSS создать стили списков, распространяющиеся на весь сайт. Дополнительную информацию см. в главе «Создание стилей с помощью CSS».

Чтобы создать заголовок: 1. Щелкните мышью в том месте текста, куда надо поместить заголовок (рис. 4.28). 2. Из раскрывающегося списка Style (Стиль) на панели инструментов Common или Formatting выберите размер заголовка (рис. 4.29). Указанный стиль применяется к тексту (рис. 4.30). Стиль заголовка применяется к абзацу в целом, поэтому делайте заголовок коротким, чтобы он занимал не более двух строк. Чем короче, тем лучше. Если на шаге 2 вы передумаете, то просто выберите другой размер заголовка из раскрывающегося списка.

Рис. 4.28. Щелкните мышью в том месте текста, куда надо поместить заголовок

Рис. 4.31. Выделите абзацы, которые хотите пронумеровать

Рис. 4.32. Нажмите кнопку Numbering на панели инструментов Formatting или Common

Рис. 4.29. Из раскрывающегося списка Style на панели инструментов Common или Formatting выберите размер заголовка

Рис. 4.30. Выделенный текст становится заголовком типа H2

Рис. 4.33. Выделенные абзацы сдвигаются вправо и нумеруются

Чтобы создать нумерованный список: 1. Выделите абзацы, которые хотите пронумеровать (рис. 4.31). 2. Нажмите кнопку Numbering (Нумерация) на панели инструментов Formatting или Common (рис. 4.32). Выделенные абзацы сдвигаются вправо и нумеруются (рис. 4.33).

76 Работа с текстом

Создание списков 77

Чтобы создать маркированный список: 1. Выделите абзацы, которые хотите промаркировать (рис. 4.34). 2. Нажмите кнопку Bullets (Маркеры) на панели инструментов Formatting или Common (рис. 4.35). Выделенные абзацы сдвигаются вправо и маркируются (рис. 4.36).

Рис. 4.34. Выделите абзацы, которые хотите промаркировать

Рис. 4.35. Нажмите кнопку Bullets на панели инструментов Formatting или Common

Рис. 4.37. Щелкните мышью в том месте, где должен быть список определений, и выберите пункт Defined Term из раскрывающегося списка Style на панели инструментов Common или Formatting

Рис. 4.38. Селектор тэгов в верхней части окна редактирования показывает, что вставлен тэг DT (определяемый термин)

Рис. 4.39. После нажатия Enter текст сдвигается вправо и оформляется как определение предшествующего ему термина Рис. 4.36. Выделенные абзацы сдвигаются вправо и маркируются

Рис. 4.40. Закончив добавление терминов, нажмите Enter – восстановится режим ввода обычного текста

Чтобы создать список определений: 1. Щелкните мышью в том месте, где должен быть список определений. 2. Из раскрывающегося списка Style (Стиль) на панели инструментов Common или Formatting выберите пункт Defined Term (Определяемый термин) (рис. 4.37). 3. Введите первый термин (рис. 4.38). 4. После нажатия клавиши Enter текст сдвигается вправо и оформляется как определение предшествующего ему термина (рис. 4.39). 5. Если после ввода определения вы захотите добавить еще термины, нажмите Enter – курсор окажется в начале следующей строки, и можно будет вводить следующий термин. 6. Когда все термины будут введены, дважды нажмите клавишу Enter, тогда восстановится режим ввода обычного текста (рис. 4.40). Можно ввести все термины и определения, как обычный текст, а затем отформатировать их построчно, выбрав стиль из раскрывающегося списка Style. Но лучше уже в начале ввода перейти в режим определения терминов, поскольку в этом случае форматирование выполняется автоматически.

78 Работа с текстом

Создание списков 79

Чтобы закончить список:
Чтобы включить в список – нумерованный, маркированный или определений – новый пункт, нажмите один раз клавишу Enter. Тогда откроется новая сдвинутая строка, на которой вы сможете продолжить ввод (рис. 4.41 сверху). Чтобы вернуться в режим ввода обычного текста, нажмите Enter дважды – новая строка уже не будет иметь отступа (рис. 4.41 снизу). Чтобы снять форматирование: 1. Выделите один или несколько абзацев, для которых нужно удалить нумерацию или маркировку. 2. Если список нумерованный, нажмите кнопку Numbering (Нумерация) на панели инструментов Formatting или Common. Нумерация будет отменена. или Если список маркированный, нажмите кнопку Bullets (Маркеры) на панели инструментов Formatting или Common. Маркировка будет отменена.

Рис. 4.42. Щелкните мышью в конце строки, после которой нужно создать вложенный список

Рис. 4.43. Нажмите клавишу Enter, затем Tab. Будет создан новый список с таким же форматированием, как у родительского

Рис. 4.41. Чтобы включить в список новый пункт, нажмите один раз клавишу Enter – откроется новая сдвинутая строка (верхний рисунок). Чтобы вернуться в режим ввода обычного текста, нажмите Enter дважды (нижний рисунок). Рис. 4.44. Добавляйте пункты во вложенный список, нажимая Enter, когда необходимо начать новую строку

Рис. 4.45. Чтобы добавить новые элементы в родительский список, щелкните мышью в его конце и нажмите Enter

Чтобы создать вложенный список: 1. Щелкните мышью в конце строки, после которой нужно создать вложенный список (рис. 4.42). 2. Нажмите клавишу Enter, затем Tab. Expression Web создаст новый список с таким же форматированием, как у родительского (рис. 4.43). 3. Добавляйте пункты во вложенный список, нажимая Enter, когда необходимо начать новую строку (рис. 4.44). (О том, как изменить форматирование, см. раздел «Чтобы изменить форматирование списка» на следующей странице.) 4. Закончив добавлять элементы во вложенный список, щелкните в любом месте родительского списка. Чтобы добавить новые элементы в родительский список, щелкните мышью в его конце и нажмите Enter для продолжения ввода (рис. 4.45). В список добавляется элемент без дополнительного отступа (рис. 4.46).

Рис. 4.46. В список добавляется элемент без дополнительного отступа

80 Работа с текстом Чтобы изменить формат списка: 1. Выделите в списке те строки, которые хотите переформатировать (рис. 4.47). 2. Выберите из меню пункт Format ⇒ Bullets and Numbering (Формат ⇒ Список) (рис. 4.48). Диалоговое окно List Properties (Свойства списка) откроется на вкладке, соответствующей форматированию выделенного фрагмента. 3. Выберите желаемый формат списка или перейдите на другую вкладку, где есть то, что вам нужно (рис. 4.49). 4. После нажатия кнопки OK выделенные строки будут переформатированы (рис. 4.50).

Поиск текста, кода и тэгов 81 Рис. 4.47. Выделите в списке те строки, которые хотите переформатировать Рис. 4.48. Выделите в списке те строки, которые хотите переформатировать, и выберите из меню пункт Format ⇒ Bullets and Numbering

Помимо стандартных функций поиска и замены, Expression Web позволяет производить поиск и замену в коде глобально по всему сайту. Это особенно удобно, когда вы пытаетесь найти причину ошибки. Многочисленные параметры в диалоговом окне Find and Replace (Поиск и замена) позволяют отыскать самый крохотный кусочек кода даже в огромном сайте. Имеется также возможность просматривать при поиске только HTML-тэги. Чтобы найти текст или код на одной странице: 1. Чтобы искать внутри отдельной страницы, откройте ее или выберите из списка на панели Folder List. 2. Выполните команду Edit ⇒ Find (Правка ⇒ Найти) (Ctrl+F). 3. В диалоговом окне Find and Replace введите искомый текст в поле Find what (Найти) или выберите его из раскрывающегося списка (рис. 4.53).

При переформатировании формат вложенных списков не изменяется (рис. 4.51). Хотя в окне List Properties есть возможность задать специальные графические маркеры, но лучше оставить этот переключатель в положении Use current CSS style (Использовать текущий CSS-стиль) (рис. 4.52). Тогда вы сможете создать маркеры, распространяющиеся на весь сайт. Дополнительную информацию см. в главе «Создание стилей с помощью CSS».

Поиск текста, кода и тэгов

4. Задайте параметры поиска в секции Search options: где искать, направление поиска и, к примеру, необходимость учета регистра. 5. Если вы нажмете кнопку Find Next (Искать далее), то найденные фрагменты будут подсвечиваться (рис. 4.54). Страница по-прежнему видна, так что вы можете продолжать поиск, нажимая кнопку Find Next. или Если вы нажмете кнопку Find All, то первый найденный фрагмент подсвечивается, а вместо диалогового окна Find and Replace появляется панель Find, в которой перечислены все найденные фрагменты. Чтобы продолжить поиск на странице, нажимайте синие стрелки Next result (Далее) и Back (Назад) на этой панели. Чтобы закрыть панель Find, нажмите кнопку X в ее полосе заголовка. В комбинированном режиме можно искать по тексту или коду, не изменяя текущего режима.

Рис. 4.49. В диалоговом окне List Properties выберите желаемый формат или перейдите на другую вкладку Рис. 4.50. Выделенные строки переформатируются в соответствии с тем, что задано в окне List Properties

Рис. 4.52. Хотя в окне List Properties есть возможность задать специальные графические маркеры, но лучше оставить этот переключатель в положении Use current CSS style

Рис. 4.51. При переформатировании сохраняется формат вложенных списков

Рис. 4.53. В диалоговом окне Find and Replace можно ввести искомый текст в поле Find what или выбрать его из раскрывающегося списка

Рис. 4.54. Найденный фрагмент подсвечивается (верхний рисунок). Для перехода к следующему найденному фрагменту нажмите кнопку Next (нижний рисунок)

82 Работа с текстом Чтобы найти текст или код во всем сайте: 1. Откройте нужный сайт, выбрав его имя из списка на панели Folder List (рис. 4.55). 2. Выполните команду Edit ⇒ Find (Правка ⇒ Найти). 3. В диалоговом окне Find and Replace введите искомый текст в поле Find what (Найти) или выберите его из раскрывающегося списка (рис. 4.53). При необходимости воспользуйтесь секцией Advanced (Дополнительно) для более точной настройки параметров поиска (рис. 4.56). На панели Find отображаются результаты поиска с указанием имени страницы, номера строки и контекста (рис. 4.57). 4. При щелчке по синей стрелке Next result (Далее) Expression Web откроет страницу, содержащую найденный фрагмент, и подсветит его (рис. 4.58). 5. Для перехода к следующему фрагменту нажимайте стрелку Next result, а для перехода к предыдущему – стрелку Back (Назад). Чтобы закрыть панель Find, нажмите кнопку X в ее полосе заголовка. Поскольку на шаге 1 вы задали поиск по всему сайту, параметры на панели Find where игнорируются (рис. 4.56). На шаге 4 все страницы, на которых присутствует искомый фрагмент, но которые еще не были открыты, автоматически открываются в том режиме, в котором соответствующая страница была открыта в последний раз: конструирования, программирования или комбинированном. Можно искать на нескольких страницах, но не по всему сайту. Для этого на шаге 1 щелкните по нужным страницам на панели Folder List, одновременно удерживая клавишу Ctrl. Все остальное делается, как и раньше.

Поиск текста, кода и тэгов 83 Рис. 4.55. Чтобы искать по всему сайту, выберите его имя из списка на панели Folder List

Рис. 4.59. На вкладке HTML Tags задайте параметры поиска и замены с помощью раскрывающихся списков Find tag, Replace action и To

Рис. 4.56. Введите искомый текст в поле Find what. При необходимости воспользуйтесь панелью Advanced для более точной настройки параметров поиска Рис. 4.57. На панели Find отображаются результаты поиска с указанием имени страницы, номера строки и контекста

Рис. 4.60. Когда на панели Find появятся результаты поиска, обратите внимание на колонку Matched Text и удостоверьтесь в том, что найдено именно то, что вы хотели

Рис. 4.58. При щелчке по синей стрелке Next открывается страница, содержащая найденный фрагмент Рис. 4.61. Нажмите зеленую стрелку в верхней части панели Find, чтобы вернуться в окно Find and Replace

Чтобы найти и заменить HTML-тэги: 1. В списке на панели Folder List выберите весь сайт, одну или несколько (удерживая клавишу Ctrl) страниц, в которых хотите искать HTML-тэг. Затем выполните команду Edit ⇒ Find. 2. В диалоговом окне Find and Replace перейдите на вкладку HTML Tags (Тэги HTML). Задайте параметры поиска и замены с помощью раскрывающихся списков Find tag (Найти тэг), Replace action (При замене) и To (Заменить на) (рис. 4.59). 3. При необходимости воспользуйтесь переключателем Find where (Где искать) в секции Search options (Параметры поиска), чтобы расширить или сузить диапазон просматриваемых страниц, и секцией Advanced (Дополнительно), чтобы точнее настроить параметры поиска. Поскольку Expression Web не умеет отменять операцию «заменить все», то нажимайте кнопку Find All (Найти все), а не Replace All (Заменить все). 4. Когда на панели Find появятся результаты поиска, обратите внимание на колонку Matched Text (Найденный текст) и удостоверьтесь в том, что найдено именно то, что вы хотели. Если сомневаетесь, укажите на соответствующую строку и нажмите синюю стрелку Next result (Далее) (рис. 4.60). Страница откроется, и вы сможете разрешить свои сомнения. 5. Изучив результат поиска, нажмите зеленую стрелку в верхней части панели Find (рис. 4.61). Снова появится диалоговое окно Find and Replace.

84 Работа с текстом 6. (Необязательно.) При необходимости можно подкорректировать параметры поиска и замены и, если вы хотите проявить повышенную осторожность, выбрать переключатель Find 2 в разделе Display results in (Показывать результаты в) (рис. 4.62). Снова нажмите кнопку Find All, тогда на панели Find появится вторая вкладка (рис. 4.63). Сравните результаты, показанные на обеих вкладках. Повторяйте шаг 5, пока не получите удовлетворительный результат. Затем в последний раз вернитесь в окно Find and Replace. 7. Нажмите кнопку Replace All (Заменить все) в окне Find and Replace (рис. 4.64). В предположении, что вы все тщательно проверили, нажмите кнопку Yes в окне предупреждения (рис. 4.65). Expression Web выполнит замену и покажет, что было сделано, в списке на панели Find (рис. 4.66).

Проверка правописания, тезаурус 85

Проверка правописания, тезаурус

Рис. 4.62. Выбрав переключатель Find 2, вы сможете подкорректировать параметры поиска и замены и вывести результаты на отдельную панель

Рис. 4.67. Чтобы проверить правописание на одной или нескольких страницах, выберите из меню команду Tools ⇒ Spelling ⇒ Spelling (верхний рисунок) или нажмите кнопку Spelling на панели инструментов Standard (нижний рисунок)

Рис. 4.63. Переключаясь между панелями Find 1 и Find 2, вы сможете сравнить результаты двух поисков

Если вы знакомы с регулярными выражениями и поиском по образцу, то имейте в виду, что такая возможность имеется в секции Advanced окна Find and Replace. Рис. 4.68. Неверно написанные слова подсвечиваются, а в диалоговом окне Spelling предлагаются варианты написания

Если хотите добавить специальные правила поиска, нажмите кнопку HTML Rules (Правила HTML) в окне Find and Replace.

Рис. 4.64. Поскольку откатить действие невозможно, удостоверьтесь, что найдено именно то, что надо, и только потом нажимайте кнопку Replace All

Рис. 4.66. Expression Web выполнит замену и покажет, что было сделано, в списке на панели Find

Рис. 4.65. В предположении, что вы все тщательно проверили, нажмите кнопку Yes

Рис. 4.69. Если вы точно знаете, что слово написано правильно (например, это торговая марка), можете добавить его в словарь

Expression Web позволяет проверять правописание на одной странице или по всему сайту. Можно добавлять в словарь новые слова. Наконец, когда вы ищете подходящее слово, можете прибегнуть к помощи тезауруса. Чтобы проверить правописание на одной странице: 1. Откройте интересующую вас страницу. Выберите из меню команду Tools ⇒ Spelling ⇒ Spelling (Сервис ⇒ Правописание ⇒ Правописание) (F7) или нажмите кнопку Spelling на панели инструментов Standard, если она видна (рис. 4.67). 2. Expression Web подсветит неверно написанные слова, а в диалоговом окне Spelling будут предложены варианты написания. Если вы согласны с предложенным вариантом, нажмите кнопку Change (Изменить). Кнопка Change All (Изменить все) исправляет все случаи неправильного написания данного слова на странице (рис. 4.68). 3. Если вы точно знаете, что слово написано правильно (например, это торговая марка, которую Expression Web не распознает), нажмите кнопку Ignore (Пропустить) или Ignore All (Пропустить все). Можно также добавить новое слово в словарь, нажав кнопку Add (Добавить) (рис. 4.69). 4. Завершив проверку правописания, нажмите OK, чтобы закрыть окно (рис. 4.70).

Рис. 4.70. Завершив проверку правописания, нажмите OK, чтобы закрыть окно

86 Работа с текстом Чтобы проверить правописание на нескольких страницах: 1. В списке на панели Folder List выберите сайт целиком или несколько страниц (удерживая клавишу Ctrl одновременно со щелчком мышью), для которых хотите проверить правописание. Выберите из меню команду Tools ⇒ Spelling ⇒ Spelling (Сервис ⇒ Правописание ⇒ Правописание) (F7) или нажмите кнопку Spelling на панели инструментов Standard, если она видна. 2. Появится окно, в котором вас спросят, что вы хотите просматривать: несколько страниц или весь сайт (рис. 4.71). Если вы нажмете кнопку Start (Начать), окно закроется и начнется проверка правописания. 3. Когда Expression Web выведет результаты, просмотрите колонку Misspelled words (Слова с ошибками), чтобы быстро понять, какие ошибки были обнаружены (рис. 4.72). 4. Дважды щелкните по строке списка, чтобы увидеть неправильно написанные слова в контексте. Если хотите воспользоваться вариантом написания, который предлагает Expression Web, нажмите кнопку Change или Change All (чтобы исправить все случаи неверного написания данного слова на выбранной странице). 5. Когда вы закончите просмотр одной страницы, Expression Web спросит, надо ли показать следующую страницу, содержащую ошибки в правописании (рис. 4.73 сверху). Когда будут просмотрены все страницы, Expression Web предложит вернуться к исходному списку страниц и слов (рис. 4.73 снизу). 6. После возврата к списку страниц Expression Web выведет те страницы, которые были исправлены (пометив

Проверка правописания, тезаурус 87

Рис. 4.71. Программа спрашивает, что вы хотите просматривать: несколько страниц или весь сайт

Рис. 4.74. В списке проверенных страниц Expression Web помечает те, что были исправлены (словом Edited)

Рис. 4.72. Просмотрите колонку Misspelled words, чтобы быстро понять, какие ошибки были обнаружены

Рис. 4.75. Чтобы изменить параметры проверки правописания, выберите из меню команду Tools ⇒ Spelling ⇒ Spelling Options

Рис. 4.73. Проверив страницу, вы можете перейти к следующей (верхний рисунок). Когда будут проверены все страницы, можно вернуться к исходному списку (нижний рисунок)

их словом Edited) и которые не были исправлены (рис. 4.74). Если вы проверили все страницы, закройте диалоговое окно Spelling, нажав кнопку X в его левом верхнем углу.

Рис. 4.76. Чтобы выбрать другой словарь, в частности тот, который вы модифицировали, нажмите кнопку Custom Dictionaries

Чтобы изменить параметры проверки правописания: 1. Выберите из меню команду Tools ⇒ Spelling ⇒ Spelling Options (Сервис ⇒ Правописание ⇒ Параметры) (рис. 4.75). 2. Установите те из параметров, представленных в окне Spelling Options, которые вас интересуют, например Check spelling as you type (Автоматически проверять орфографию) (рис. 4.76). Чтобы выбрать другой словарь, в частности тот, который вы модифицировали, нажмите кнопку Custom Dictionaries (Словари). 3. В диалоговом окне Custom Dictionaries (Вспомогательные словари) словарь, используемый по умолчанию, выделен (рис. 4.77). Чтобы добавить или изменить слова, нажмите кнопку Edit Word List (Изменить список слов). Чтобы переключиться на новый пустой словарь, нажмите кнопку New (Создать). Чтобы переключиться на созданный вами вспомогательный словарь, нажмите кнопку Add (Добавить). 4. Нажмите OK, чтобы закрыть окно и применить изменения.

Рис. 4.77. Чтобы добавить или изменить слова в словаре, выбранном по умолчанию, нажмите кнопку Edit Word List. Чтобы переключиться на новый пустой словарь, нажмите кнопку New. Чтобы переключиться на созданный вами вспомогательный словарь, нажмите кнопку Add

88 Работа с текстом Чтобы воспользоваться тезаурусом: 1. Выделите слово в любой открытой странице и выберите из меню команду Tools ⇒ Thesaurus (Сервис ⇒ Тезаурус) (F7) (рис. 4.78). 2. В диалоговом окне Thesaurus показано выделенное слово и его значения (рис. 4.79). Выберите подходящее значение из левого списка, а затем любой его синоним из правого списка. Нажмите кнопку Lookup (Поиск), если не уверены, что означает синоним, или кнопку Replace (Заменить), чтобы заменить исходное слово выбранным синонимом. 3. Чтобы закрыть окно, нажмите кнопку Cancel (Отмена) или кнопку X в правом верхнем углу окна.

Рис. 4.78. Выделите слово в любой открытой странице и выберите из меню команду Tools ⇒ Thesaurus

Рис. 4.79. Различные значения выделенного слова приведены в левом списке. Выберите любое из них, затем выберите синоним из правого списка и нажмите кнопку Replace или кнопку Lookup, если не уверены, что означает синоним

Работа с графикой

5

Если заголовки и текст определяют смысловое содержание страницы, то графика придает ей дополнительную привлекательность. В первом разделе этой главе мы покажем, как добавлять и позиционировать картинки. А во втором объясним, как с помощью панели инструментов Pictures (Картинки) изменять их внешний вид. О том, как включить в изображения активные области, отвечающие на щелчки мышью, см. в разделе «Создание активных областей в изображении».

90 Работа с графикой

Добавление картинок 91

Добавление картинок Expression Web позволяет добавлять картинки разными способами: перетаскивать на страницу, искать в файловой системе или копировать непосредственно из цифровой камеры. Чтобы добавить картинку: 1. Откройте Web-страницу и щелкните мышью в том месте, где должна быть картинка. Выберите из меню команду Insert ⇒ Picture (Вставка ⇒ Картинка) и укажите в меню, из какого источника ее брать (рис. 5.1). 2. Найдите нужную картинку и нажмите кнопку Insert (Вставить) (рис. 5.2). 3. Введите краткое описание картинки в поле Alternate text (Альтернативный текст) и, если хотите, подробное описание в поле Long description (рис. 5.3). 4. После нажатия OK картинка появится на странице. Если нужно, нажмите клавишу Enter, чтобы следующий за ней заголовок или текст начинался с новой строки (рис. 5.4). 5. Сохраните изменения (Ctrl+S). Если добавленная картинка еще не входила в состав файлов сайта, то откроется окно Save Embedded Files (Сохранить прикрепленные файлы) (рис. 5.5). Нажмите кнопку Change Folder (Изменить папку), чтобы перейти в ту папку сайта, где хранятся картинки (см. шестой совет). Затем нажмите OK, и изображение будет сохранено в указанной папке.

Рис. 5.1. Чтобы добавить картинку, выберите из меню команду Insert ⇒ Picture и укажите источник Рис. 5.5. Когда в сайт добавляются новые файлы, появляется диалоговое окно Save Embedded Files Рис. 5.6. Кнопка Insert Picture from File имеется на панелях инструментов Pictures, Standard и Common

Рис. 5.2. Найдите нужную картинку и нажмите кнопку Insert

Рис. 5.3. Добавьте краткое описание в поле Alternate text и при желании подробное описание

Рис. 5.7. Уже сохраненные в сайте картинки можно перетащить на страницу с панели Folder List

Если к компьютеру подключена цифровая камера или сканер, то на шаге 1 можно получить изображение непосредственно с устройства. На практике, однако, такие изображения слишком объемны, вставлять их в Web-страницы не стоит. Лучше сначала скопировать изображение на диск и выполнить масштабирование. Можно также воспользоваться кнопкой Insert Picture from File (Вставить картинку из файла), которая имеется на панелях инструментов Pictures, Standard и Common (рис. 5.6). Панель Pictures содержит наиболее употребительные инструменты для работы с графикой, поэтому имеет смысл добавить ее в окно. Для этого выберите из меню команду View ⇒ Toolbars ⇒ Pictures (Вид ⇒ Панели инструментов ⇒ Картинки). Если картинка уже сохранена в сайте, то можно перетащить ее на страницу с панели Folder List (рис. 5.7). На шаге 2 будет гораздо проще найти нужную картинку, если изменить вид папки на Large или Extra Large Icons (Крупные или Очень крупные значки) (рис. 5.8). Альтернативный текст, заданный на шаге 3, могут произносить вслух специальные программы, предназначенные для людей с дефектами зрения. Он же помогает посетителям с медленным соединением понять, что будет изображено на картинке еще до того, как она загрузится. Чтобы не загромождать файловую структуру сайта, сохраняйте картинки в отдельной папке. Если же картинок очень много, заведите отдельные папки для каждого раздела сайта. Картинка для этого примера была заранее масштабирована с учетом ограниченного места на печатной странице. Дополнительные сведения см. в разделе «Изменение размера и интерполяция изображения» ниже.

Рис. 5.4. После того как картинка появится на странице, можете включить после нее разрыв строки

Рис. 5.8. Найти нужную картинку будет гораздо проще, если изменить вид папки на Large или Extra Large Icons

92 Работа с графикой

Выравнивание картинок 93 Рис. 5.12. Чтобы задать выравнивание картинки по горизонтали, дважды щелкните по ней

Чтобы переместить картинку: 1. Если щелкнуть по картинке, то в углах и по краям появятся небольшие квадратики-манипуляторы (рис. 5.9). 2. Не отпуская кнопку мыши, перетащите картинку в другое место (рис. 5.10). 3. Отпустите кнопку, и картинка займет новое положение (рис. 5.11). В зависимости от того, как текст и заголовки должны обтекать картинку, можно изменить параметры ее стиля (см. раздел «Чтобы задать выравнивание по горизонтали» на следующей странице). Рис. 5.9. Щелкните по картинке, по углам и по краям появятся небольшие квадратики, реагирующие на щелчки мышью

Рис. 5.13. В зависимости от того, как текст должен обтекать картинку, выберите значение Left или Right Рис. 5.14. Взаимное расположение текста и картинки изменяется в соответствии с заданными параметрами (в данном случае картинка слева от текста)

Рис. 5.11. Отпустите кнопку, и картинка займет новое положение

Выравнивание картинок Выравнивание по горизонтали (обтекание) определяет, как картинка располагается относительно элементов, находящихся слева и справа от нее. Выравнивание по вертикали определяет, находится ли картинка на том же уровне, выше или ниже соседних элементов, которые могут быть как другими картинками, так и текстом. Чтобы задать выравнивание по горизонтали: 1. Дважды щелкните по картинке (рис. 5.12). 2. В окне Picture Properties (Свойства картинки) перейдите на вкладку Appearance (Внешний вид). По умолчанию параметр Wrapping style (Обтекание) установлен в None (Нет), а поля равны нулю. В зависимости от того, как текст должен обтекать картинку, выберите значение Left (Слева) или Right (Справа) (рис. 5.13). 3. Задать способ выравнивания картинки по вертикали позволяет раскрывающийся список Alignment (подробнее см. раздел «Чтобы задать выравнивание по вертикали» на следующей странице). 4. Чтобы закрыть окно и применить внесенные изменения, нажмите OK. Взаимное расположение текста и картинки изменится в соответствии с заданными параметрами (рис. 5.14). Если на экране видна панель инструментов Common или Formatting, для задания способа обтекания (но не выравнивания по вертикали) можно щелкнуть по соответствующей иконке.

Рис. 5.10. Не отпуская кнопку мыши, перетащите картинку в другое место

Хотя в окне Picture Properties есть средства для задания полей, но гораздо проще воспользоваться методом перетаскивания, который описан ниже.

Открыть окно Picture Properties можно также щелчком правой кнопкой мыши с последующим выбором пункта Picture Properties из контекстного меню.

94 Работа с графикой Чтобы задать выравнивание по вертикали: 1. Дважды щелкните по картинке и в окне Picture Properties перейдите на вкладку Appearance. Неудивительно, что в раскрывающемся списке Alignment (Выравнивание) обычно выбрано значение Default (По умолчанию) (рис. 5.15). 2. Установите в этом списке нужное вам значение (рис. 5.16), точнее одно из следующих: Default (По умолчанию), Top (По верхнему краю), Middle (По центру), Bottom (По нижнему краю). Остальные способы современные браузеры не поддерживают. 3. Чтобы закрыть окно и применить внесенные изменения, нажмите OK. Расположение картинки относительно соседнего текста изменяется (рис. 5.17).

Выравнивание картинок 95

Рис. 5.15. Неудивительно, что в раскрывающемся списке Alignment обычно выбрано значение Default

Рис. 5.18. Здесь выравнивание по верхнему краю сочетается с обтеканием справа

Рис. 5.19. Три картинки с выравниванием по умолчанию

Рис. 5.16. Установите в этом списке нужное вам значение, точнее одно из следующих: Default, Top, Middle, Bottom Рис. 5.20. Три картинки с выравниванием по верхнему краю

Рис. 5.17. Вертикальное расположение картинки относительно соседнего текста изменяется (в данном примере выравнивается по верхнему краю) Рис. 5.21. Левая и правая картинки выровнены по верхнему краю, средняя – по центру

Эффект выравнивания зависит от установленного режима обтекания. Сравните, например, рис. 5.17, на котором установлено выравнивание по верхнему краю без обтекания, и рис. 5.18, на котором установлено такое же выравнивание, но с обтеканием справа. Сравнив рис. 5.19, 5.20 и 5.21, вы поймете, чем отличаются различные способы выравнивания.

96 Работа с графикой

Добавление границ, полей и отступов 97

Добавление границ, полей и отступов Если вам трудно запомнить, что такое границы, поля и отступы, взгляните на рис. 5.22. Он заимствован из диалогового окна New Style (Новый стиль) и помогает развеять все сомнения. А можно просто изменять поля и отступы с помощью перетаскивания. В принципе, можно задавать их индивидуально для каждой картинки, но лучше создать таблицу CSS, определив в ней несколько стилей для полей и отступов, которые затем применять к картинкам глобально по всему сайту. Дополнительные сведения см. в главе «Создание стилей с помощью CSS». Чтобы добавить рамку вокруг картинки: 1. Находясь в режиме конструирования или в комбинированном режиме, щелкните по картинке (рис. 5.23). 2. Выберите из меню команду Format ⇒ Borders and Shading (Формат ⇒ Границы и заливка) (рис. 5.24). Диалоговое окно Borders and Shading по умолчанию открывается на вкладке Borders (Границы) (рис. 5.25).

3. Задайте тип (Setting), стиль (Style), цвет (Color) и толщину (Width) рамки, ориентируясь на образец в области Preview (рис. 5.26). Нажмите OK. Диалоговое окно закроется, а вокруг картинки будет нарисована рамка (рис. 5.27).

Рис. 5.22. Рисунок из диалогового окна New Style наглядно показывает различие между границами, полями и отступами

Если вы захотите изменить рамку, снова выберите из меню пункт Format ⇒ Borders and Shading и задайте другие параметры. Если в окне Borders and Shading указать тип Default, то рамка исчезнет. Если же просто нажать клавишу Backspace, чтобы очистить текстовое поле, то рамка останется. Рис. 5.26. Задайте тип, стиль, цвет и толщину рамки, ориентируясь на образец в области Preview

Рис. 5.23. Выберите картинку, вокруг которой хотите нарисовать рамку

Рис. 5.27. Вокруг картинки рисуется рамка с указанными параметрами

Рис. 5.24. Выберите из меню команду Format ⇒ Borders and Shading, откроется диалоговое окно Borders and Shading

Рис. 5.28. Чтобы быстро добавить однопиксельную черную рамку, нажмите кнопку Border на панели инструментов Picture и выберите первую иконку в выпадающем меню

Рис. 5.25. Окно по умолчанию открывается на вкладке Borders

Если в окне видна панель инструментов Common, то можно быстро добавить однопиксельную черную рамку, нажав кнопку Border (Граница) и выбрав первую иконку в выпадающем меню (рис. 5.28).

98 Работа с графикой Чтобы добавить поля вокруг картинки: 1. Находясь в режиме конструирования или в комбинированном режиме, щелкните по картинке. В углах появятся тонкие бежевые линии. Если провести курсор над такой линией, его форма изменится на двустороннюю стрелку (рис. 5.29). 2. Потяните линию мышью, чтобы изменить горизонтальное поле. При этом появится прямоугольная область, по которой можно судить о величине поля (рис. 5.30). Когда добьетесь нужной величины, отпустите кнопку мыши. 3. Точно так же можно задать вертикальное поле (рис. 5.31). Когда установите нужную величину, отпустите кнопку мыши (рис. 5.32). 4. Не забудьте сохранить изменения (Ctrl+S).

Добавление границ, полей и отступов 99

Рис. 5.29. Чтобы добавить поля вокруг картинки, потяните мышью одну из бежевых линий по углам Рис. 5.33. Щелкните по картинке, одновременно удерживая нажатой клавишу Shift. В углах появятся тонкие голубые линии

Рис. 5.30. Установите величину горизонтального поля, ориентируясь на прямоугольную область сбоку от картинки

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

Рис. 5.32. Добившись желаемой величины поля, отпустите кнопку мыши

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

Рис. 5.31. Точно так же можно задать вертикальное поле Область поля заштрихована диагональными линиями, это еще один способ оценить величину поля.

Чтобы добавить отступы: 1. Находясь в режиме конструирования или в комбинированном режиме, щелкните по картинке, одновременно удерживая нажатой клавишу Shift. В углах появятся тонкие голубые линии (рис. 5.33). 2. Потяните линию мышью, чтобы добавить отступ от соответствующей стороны. При этом появится прямоугольная область, по которой можно судить о величине отступа (рис. 5.34). Когда добьетесь нужной величины, отпустите кнопку мыши. 3. Чтобы добавить отступ от любой другой стороны, повторите шаг 2 (рис. 5.35). 4. Не забудьте сохранить изменения (Ctrl+S).

Рис. 5.35. Можно добавить отступ от любой стороны картинки

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

100 Работа с графикой

Редактирование картинок 101

Редактирование картинок Если нужно серьезно изменить картинку, то лучше воспользоваться специализированным графическим редактором, но многие простые вещи можно сделать и с помощью инструментов на панели Pictures, например зеркально отразить, изменить контрастность, сделать чернобелым. Процедура во всех случаях одна и та же и описана в разделе «Чтобы выполнить простые манипуляции с картинкой» ниже. В остальной части главы рассматриваются более сложные задачи: вырезание части картинки, изменение размера и интерполяция изображения, получение мини-картинок и задание прозрачного цвета. Отредактированную картинку можно сохранить в новом файле или заменить старый. Для пущей надежности храните копию исходного изображения вне сайта. Кнопка Restore (Восстановить) позволяет отменить изменения, поэтому она очень быстро станет вашим первым помощником.

Рис. 5.36. Чтобы выполнить простые манипуляции с картинкой, для начала выделите ее

Рис. 5.37. Нажмите кнопку на панели инструментов Pictures (в данном случае, отражение относительно горизонтальной оси)

Рис. 5.38. Картинка на странице изменяется в зависимости от выбранного инструмента

Кнопка Restore работает только до тех пор, пока вы не сохранили изменения.

Таблица 5.1. Инструменты на панели Pictures

Чтобы выполнить простые манипуляции с картинкой: 1. Находясь в режиме конструирования или в комбинированном режиме, щелкните по картинке (рис. 5.36). 2. Нажмите кнопку на панели инструментов Pictures (рис. 5.37) (см. табл. 5.1 ниже.) Картинка на странице изменяется в зависимости от того, какая кнопка была нажата (рис. 5.38). 3. О том, как сохранить изменения, см. раздел «Чтобы сохранить изменения» на следующей странице. Чтобы восстановить исходную картинку после редактирования: 1. Чтобы отменить изменения, сделанные в процессе редактирования картинки, нажмите кнопку Restore (Восстановить). Картинка возвращается в состояние, предшествующее последнему изменению. 2. Каждое следующее нажатие кнопки Restore откатывает очередное изменение, сделанное с момента последнего сохранения.

Используется Чтобы

или или или или

Вставить картинку с диска, цифровой камеры или сканера Создать уменьшенное изображение, связанное с исходным (см. раздел «Чтобы создать миникартинку» ниже) Повернуть картинку влево или вправо Повернуть картинку по гозиронтали или вертикали Увеличить или уменьшить контрастность Увеличить или уменьшить яркость Вырезать часть картинки (см. раздел «Чтобы вырезать часть картинки» ниже) Сделать один из цветов прозрачным (см. раздел «Чтобы задать прозрачный цвет» ниже) Сделать картинку черно-белой (обесцветить) Добавить эффект выпуклости Интерполировать изображения (см. раздел «Изменение размера и интерполяция изображения» ниже) Создать активные области внутри картинки (см. раздел «Чтобы создать активные области» ниже) Восстановить картинку в виде, предшествующем изменениям

102 Работа с графикой Чтобы сохранить изменения: 1. Чтобы сохранить изменения, внесенные в ходе редактирования картинки, нажмите Ctrl+S. В диалоговом окне Save Embedded Files, где перечислены все измененные файлы, выберите картинку, которую нужно сохранить (рис. 5.39). 2. Если вы хотите сохранить измененную версию в новом файле, нажмите кнопку Rename (Переименовать) и введите новое имя (суффикс .jpg оставьте без изменения) (рис. 5.40). Отложенное действие (колонка Action), зарегистрированное для этого файла, меняется с Overwrite (Переписать) на Save (Сохранить) (рис. 5.41). Нажмите OK. или Чтобы заменить исходный файл, просто нажмите OK. 3. В зависимости от решения, принятого на шаге 2, измененная картинка либо заменяет исходный файл, либо сохраняется в новом.

Редактирование картинок 103 Если вы переименовали измененную картинку, новый файл появляется в списке на панели Folder List (рис. 5.42).

Рис. 5.39. В диалоговом окне Save Embedded Files перечислены все файлы, которые были изменены или добавлены с момента последнего сохранения сайта в целом

Рис. 5.40. Чтобы сохранить измененную картинку в новом файле, нажмите кнопку Rename и введите новое имя (суффикс .jpg оставьте без изменения) Рис. 5.41. После переименования файла отложенное действие для него меняется с Overwrite на Save

Рис. 5.42. Если вы переименовали измененную картинку, новый файл появляется в списке на панели Folder List.

Часто сайты содержат сотни картинок, особенно если в разных частях сайта используются версии одной и той же картинки разных размеров. Поэтому называть файл просто treefern_small.jpg, как это делает Expression Web, недостаточно. Если для моего макета нужны картинки шириной 50, 100 и 288 пикселей, то я назову файлы соответственно treefern50.jpg, treefern100.jpg и treefern288.jpg. Тогда при просмотре списка файлов я точно буду знать, какой вариант мне нужен, а, коль скоро число стоит в конце имени, все три файла окажутся в отсортированном списке по соседству. Если понадобится создать картинку еще одного размера, то из схемы именования сразу же следует, что исходный файл назывался treefern.

104 Работа с графикой Чтобы вырезать часть картинки: 1. Находясь в режиме конструирования или в комбинированном режиме, щелкните по картинке (рис. 5.43). 2. Нажмите кнопку Crop (Вырезать) на панели инструментов Pictures (рис. 5.44). 3. Внутри картинки появляется пунктирный контур, обозначающий границы вырезаемой части (рис. 5.45). Потяните за любой из квадратиковманипуляторов, расположенных по краям и в углах, чтобы изменить положение или размер контура (рис. 5.46). 4. Снова нажмите кнопку Crop, или дважды щелкните по любому манипулятору, или нажмите комбинацию клавиш Ctrl+E. Часть картинки внутри контура будет вырезана (рис. 5.47). 5. Сохраните изменения (Ctrl+S), как описано в разделе «Чтобы сохранить изменения» выше.

Изменение размера и интерполяция изображения 105

Изменение размера и интерполяция изображения

Рис. 5.43. Щелкните по картинке, из которой хотите вырезать часть

Рис. 5.44. Нажмите кнопку Crop на панели инструментов Pictures

Рис. 5.45. Внутри картинки появляется пунктирный контур, обозначающий границы вырезаемой части

Рис. 5.47. Снова нажмите кнопку Crop, или дважды щелкните по любому манипулятору, или нажмите комбинацию клавиш Ctrl+E. Часть картинки внутри контура будет вырезана

Рис. 5.46. Потяните за любой из манипуляторов, чтобы изменить положение или размер контура

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

106 Работа с графикой Чтобы вручную изменить размер и интерполировать изображение: 1. Находясь в режиме конструирования или в комбинированном режиме, щелкните по картинке и потяните за какой-нибудь из квадратиков-манипуляторов, расположенных по краям и в углах (рис. 5.48 и 5.49). 2. Отпустите кнопку мыши, размер картинки изменится (рис. 5.50). 3. Чтобы интерполировать новую картинку, нажмите кнопку Resample на панели инструментов Pictures (рис. 5.51). Можно также щелкнуть по иконке Picture Actions (Действия) в правом нижнем углу картинки и выбрать из меню команду Resample Picture To Match Size (Интерполировать в соответствии с размером) (рис. 5.52). Картинка перерисовывается, хотя большой разницы вы, возможно, и не заметите. 4. Сохраните изменения (Ctrl+S), как описано в разделе «Чтобы сохранить изменения» выше.

Изменение размера и интерполяция изображения 107

Рис. 5.48. Чтобы изменить размеры картинки, щелкните по какому-нибудь из квадратиковманипуляторов Рис. 5.49. Потяните за манипулятор

Рис. 5.50. Отпустите кнопку мыши, размер картинки изменится

Рис. 5.53. Чтобы точно задать новый размер и интерполировать изображение, отметьте флажок Specify size и введите новую ширину и высоту соответственно в поля Width и Height (верхний рисунок). Если еще отметить флажок Keep aspect ratio, то при вводе одного размера второй будет изменяться автоматически (нижний рисунок)

Рис. 5.51. Чтобы интерполировать новую картинку, нажмите кнопку Resample на панели инструментов Pictures

Рис. 5.54. Если не отмечать флажок Keep aspect ratio, то можно задавать высоту и ширину независимо

Рис. 5.52. Можно также щелкнуть по иконке в правом нижнем углу картинки и выбрать из меню команду Resample Picture To Match Size

Чтобы точно задать новый размер и интерполировать изображение: 1. Находясь в режиме конструирования или в комбинированном режиме, дважды щелкните по картинке. В окне Picture Properties перейдите на вкладку Appearance (Внешний вид). 2. Отметьте флажок Specify size (Задать размер) и введите новую ширину и высоту (в пикселях или в процентах) соответственно в поля Width и Height (рис. 5.53 сверху). Если еще отметить флажок Keep aspect ratio (Сохранить пропорции), то при вводе одного размера второй будет изменяться автоматически (рис. 5.53 снизу). Нажмите OK. Диалоговое окно закроется, и размеры картинки изменятся. 3. Чтобы интерполировать новую картинку, нажмите кнопку Resample на панели инструментов Pictures. Можно также щелкнуть по иконке Picture Actions в правом нижнем углу картинки и выбрать из меню команду Resample Picture To Match Size. Картинка перерисовывается в соответствии с новыми размерами. 4. Сохраните изменения (Ctrl+S), как описано в разделе «Чтобы сохранить изменения» выше. Если на шаге 2 не отмечать флажок Keep aspect ratio, то можно задавать высоту и ширину независимо (рис. 5.54).

108 Работа с графикой Чтобы создать миникартинку: 1. Находясь в режиме конструирования или в комбинированном режиме, вставьте полномасштабную версию интересующей вас картинки и щелкните по ней (рис. 5.55). 2. Нажмите кнопку Auto Thumbnail (Автоматическое уменьшение) на панели инструментов Pictures (Ctrl+T) (рис. 5.56). Исходная картинка заменится уменьшенной копией (рис. 5.57). 3. Можете поместить на страницу и другие картинки, повторяя для каждой шаг 2 (рис. 5.58). 4. Сохраните изменения (Ctrl+S), как описано в разделе «Чтобы сохранить изменения» выше.

Изменение размера и интерполяция изображения 109 5. Чтобы посмотреть, как выглядят мини-картинки в браузере, нажмите клавишу F12 (рис. 5.59). 6. Щелкнув по любой мини-картинке в браузере, вы увидите исходное полномасштабное изображение (рис. 5.60).

Рис. 5.59. Чтобы посмотреть, как выглядят миникартинки в браузере, нажмите клавишу F12 и щелкните по любой мини-картинке Рис. 5.55. Вставьте полномасштабную версию картинки, для которой нужно сгенерировать уменьшенную копию, а затем щелкните по ней

Не обязательно заранее создавать страницу для показа полномасштабной картинки. Если выполнить описанные выше действия, то будут автоматически созданы необходимая страница и ссылки, ведущие на нее с мини-картинки. На шаге 2 можно также щелкнуть правой кнопкой мыши по полномасштабной картинке и выбрать из контекстного меню пункт Auto Thumbnail (Автоматическое уменьшение) (рис. 5.61).

Рис. 5.56. Нажмите кнопку Auto Thumbnail на панели инструментов Pictures (Ctrl+T)

Рис. 5.58. Можно поместить на страницу другие картинки и преобразовать их в уменьшенные копии

Рис. 5.57. Исходная картинка заменится уменьшенной копией

Рис. 5.60. Браузер покажет исходное полномасштабное изображение

Рис. 5.61. Можно также щелкнуть правой кнопкой мыши по полномасштабной картинке и выбрать из контекстного меню пункт Auto Thumbnail

110 Работа с графикой Чтобы изменить принимаемый по умолчанию размер мини-картинки: 1. Выберите из меню команду Tools ⇒ Page Editor Options (Сервис ⇒ Параметры редактора страниц). Перейдите на вкладку Auto Thumbnail (Автоматическое уменьшение), на которой представлены параметры по умолчанию (рис. 5.62). 2. С помощью раскрывающегося списка Set (Задать) укажите, какую сторону мини-картинки взять за основу при масштабировании (рис. 5.63). Введите число в поле Pixels (Пикселей). Если нужно окружить мини-картинку рамкой, оставьте флажок Border thickness (Толщина рамки) отмеченным и введите толщину рамки в пикселях в соседнее поле. Можно также добавить эффект выпуклости. 3. Нажмите OK, чтобы закрыть диалоговое окно. Изменения будут применяться ко всем последующим миникартинкам.

Задание формата картинки 111

Задание формата картинки

Рис. 5.62. Чтобы увидеть параметры, принимаемые по умолчанию, перейдите на вкладку Auto Thumbnail в диалоговом окне Page Editor Options Рис. 5.64. Чтобы изменить формат, принимаемый по умолчанию, нажмите кнопку File Type Settings на вкладке Pictures в диалоговом окне Page Editor Options

Рис. 5.63. С помощью раскрывающегося списка Set укажите, какую сторону мини-картинки взять за основу при масштабировании

В Web практически все изображения имеют один из двух форматов: GIF или JPEG. Формат GIF (Graphics Interchange Format, разработанный компанией CompuServe) лучше применять для кнопок, областей, закрашенных одним цветом, и разного рода иллюстраций (рисунков, диаграмм и т. п.). Формат JPEG (первоначально разработанный группой Joint Photographic Experts Group) больше подходит для фотографий, поскольку позволяет передать миллионы цветов в относительно компактном файле. Постепенно набирает популярность также формат PNG (Portable Network Graphics), поскольку его начали поддерживать основные браузеры, начиная с версии 4. Формат PNG позволяет неплохо сжимать изображения, не теряя так много информации, как JPEG. К тому же он не имеет лицензионных ограничений, как формат GIF. По умолчанию Expression Web сохраняет фотографии в формате JPEG, устанавливая довольно высокий уровень качества 90. Если вы хотите чуть уменьшить файлы с фотографиями, то можете перевести их в формат PNG или снизить качество до 60–65. При этом появление «зубчатости» на картинке маловероятно. Дополнительную информацию см. в разделе «Чтобы изменить формат одной картинки» ниже. Если для кнопок используется формат GIF, то удобно назначать какой-то цвет прозрачным. Это, например, позволит создать иллюзию непрямоугольной фигуры; нужно лишь, чтобы цвет «лишних» участков совпадал с цветом фона. Подробнее см. раздел «Чтобы задать прозрачный цвет» ниже.

112 Работа с графикой Чтобы изменить формат, принимаемый по умолчанию: 1. Выберите из меню пункт Tools ⇒ Page Editor Options ⇒ Picture (Сервис ⇒ Параметры редактора страниц ⇒ Картинки) и нажмите кнопку File Type Settings (Параметры для разных типов файлов) (рис. 5.64). 2. В диалоговом окне Picture File Type (Тип графического файла) с помощью флажков задайте параметры формата GIF, а с помощью текстовых полей – параметры формата JPEG (рис. 5.65). 3. Нажмите OK, чтобы закрыть окно. Заданные параметры будут применяться к вновь создаваемым картинкам (рис. 5.66).

Задание формата картинки 113

Рис. 5.65. С помощью флажков задайте параметры формата GIF, а с помощью текстовых полей – параметры формата JPEG

Рис. 5.68. Чтобы изменить формат одной картинки, нажмите кнопку Picture File Type на вкладке Appearance

Если вы хотите сохранять все фотографии в формате PNG, то на шаге 1 выберите пункт png во втором раскрывающемся списке (рис. 5.67). Если вы не собираетесь создавать много кнопок с прозрачными краями в формате GIF, то на шаге 2 лучше не отмечать флажок Transparent (Прозрачность), поскольку прозрачный цвет можно задать для отдельных картинок.

Рис. 5.66. Нажмите OK, чтобы закрыть окно. Заданные параметры будут применяться к вновь создаваемым картинкам

Чтобы изменить формат одной картинки: 1. Дважды щелкните по картинке на Web-странице, чтобы открыть диалоговое окно Picture Properties. 2. Перейдите на вкладку Appearance (Внешний вид) и нажмите кнопку Picture File Type (Тип графического файла) (рис. 5.68). 3. Выберите другой формат (рис. 5.69). Можно также изменить уровень качества для JPEG-файла, если сбросить флажок Use image as is (Использовать оригинальное изображение) и ввести новые значения в поля Quality (Качество) и Progressive passes (Число стадий). 4. Нажмите OK, чтобы закрыть диалоговое окно и применить новые параметры к выбранной картинке (рис. 5.70). В диалоговом окне Picture Properties также нажмите OK.

Рис. 5.69. Выберите другой формат или измените уровень качества для JPEG-файла, сбросив флажок Use image as is

Рис. 5.70. Нажмите OK, чтобы закрыть диалоговое окно и применить новые параметры к выбранной картинке

Рис. 5.67. Чтобы сохранять все фотографии в формате PNG, а не JPEG, выберите пункт png во втором раскрывающемся списке

114 Работа с графикой Чтобы задать прозрачный цвет: 1. Находясь в режиме конструирования или в комбинированном режиме, щелкните по картинке (рис. 5.71). 2. Нажмите кнопку Set Transparent Color (Задать прозрачный цвет) на панели инструментов Pictures (рис. 5.72). 3. Если выбранная картинка имеет формат JPEG, который не поддерживает прозрачность, нажмите кнопку OK в диалоговом окне с предложением преобразовать картинку в формат GIF (рис. 5.73). 4. Когда курсор находится над выбранной картинкой, он принимает форму ластика (рис. 5.74). Щелкните по точке того цвета, который хотите сделать прозрачным. Указанный цвет становится прозрачным, то есть под ним виден цвет фона (рис. 5.75).

Рис. 5.71. Выберите картинку, для которой нужно задать прозрачный цвет

Создание ссылок Рис. 5.72. Нажмите кнопку Set Transparent Color на панели инструментов Pictures

Рис. 5.73. Если выбранная картинка имеет формат JPEG, появляется диалоговое окно с предложением преобразовать ее в формат GIF

Рис. 5.75. Указанный цвет становится прозрачным, то есть под ним виден цвет фона

6

Рис. 5.74. Щелкните ластиком по точке того цвета, который хотите сделать прозрачным

Главное достоинство Web – возможность переходить с одной страницы на другую, где бы та ни находилась. Для этого служат гиперссылки. Гиперссылки, или просто «ссылки», бывают нескольких видов: внешние, которые ведут на другую страницу; внутренние, которые ведут на другое место внутри данной страницы; ссылки для отправки электронной почты и ссылки внутри картинки. Expression Web позволяет легко создавать все такие ссылки. Попутно отметим, что изменение стандартного цвета ссылок рассматривается в главе «Создание стилей с помощью CSS».

116 Создание ссылок

Добавление ссылок Одни ссылки ведут на страницы, находящиеся вне данного сайта, другие – на страницы вашего же сайта. В первом случае Expression Web автоматически создает абсолютные ссылки, во втором – относительные. Абсолютная ссылка включает полный URL, например http://www. waywest.net/expression/, а относительная – только имя файла и папку, в которой он находится: /ExamplePages/ creatinglinks.htm. У относительных ссылок есть то преимущество, что при любой реорганизации сайта ExpressionWeb позаботится об их правильности. Чтобы сослаться на страницу внутри сайта: 1. Выделите текст, который должен стать ссылкой, щелкните правой кнопкой мыши и выберите из контекстного меню команду Hyperlink (Ссылка) (рис. 6.1). 2. По умолчанию в диалоговом окне Insert Hyperlink (Вставить ссылку) предполагается, что ссылка будет вести на другую страницу текущего сайта (рис. 6.2). В центральной области окна укажите, куда должна вести ссылка, и нажмите OK (рис. 6.3). Окно закрывается, а выделенный текст становится ссылкой на другую страницу (рис. 6.4).

Добавление ссылок 117 Рис. 6.1. Выделите текст, который должен стать ссылкой, щелкните правой кнопкой мыши и выберите из контекстного меню команду Hyperlink

Рис. 6.5. Можно также после выделения текста нажать кнопку Hyperlink на панели инструментов Standard

Рис. 6.2. По умолчанию в диалоговом окне Insert Hyperlink предполагается, что ссылка будет вести на другую страницу текущего сайта

Рис. 6.6. Чтобы сослаться на еще не существующую страницу, нажмите кнопку Create New Document (верхний рисунок). Присвойте новой странице имя и, если не хотите прерывать текущую работу, отметьте переключатель Edit the new document later (нижний рисунок)

На шаге 1 можно также после выделения текста нажать кнопку Hyperlink на панели инструментов Standard (рис. 6.5). Рис. 6.3. В центральной области окна укажите, куда должна вести ссылка, и нажмите OK

Рис. 6.4. Выделенный текст становится ссылкой на другую страницу

Чтобы сослаться на еще не существующую страницу: 1. Выделите текст, который должен стать ссылкой, щелкните правой кнопкой мыши и выберите из контекстного меню команду Hyperlink (Ссылка). 2. Нажмите кнопку Create New Document (Создать новый документ) в диалоговом окне Insert Hyperlink (рис. 6.6 сверху). Присвойте новой странице имя и, если не хотите прерывать текущую работу, отметьте переключатель Edit the new document later (Редактировать новый документ позже) (рис. 6.6 снизу). 3. Нажмите OK. Окно закроется, а в список на панели Folder List будет добавлена новая пустая страница.

118 Создание ссылок Чтобы сослаться на внешнюю страницу: 1. Выделите текст, который должен стать ссылкой, щелкните правой кнопкой мыши и выберите из контекстного меню команду Hyperlink (Ссылка). 2. Нажмите кнопку Browse the Web (Обзор Web) (рис. 6.7). Если браузер еще не запущен, он запустится сейчас. 3. Перейдите на страницу, на которую должна вести ссылка, и нажмите комбинацию клавиш Alt+Tab. Адрес страницы появится в поле Address в окне Insert Hyperlink (рис. 6.8). 4. Нажмите OK. Окно закроется, и выделенный текст станет ссылкой на внешнюю страницу (рис. 6.9).

Добавление ссылок 119 Рис. 6.11. Чтобы изменить ссылку, щелкните по ней правой кнопкой мыши и выберите из контекстного меню пункт Hyperlink Properties

Рис. 6.7. Чтобы сослаться на внешнюю страницу, нажмите кнопку Browse the Web

Если вы знаете адрес внешней страницы, то на шаге 2 можете ввести его прямо в поле Address. Рис. 6.12. Чтобы удалить ссылку, нажмите кнопку Remove Link в окне Edit Hyperlink

На шаге 3 можно воспользоваться раскрывающимся списком в поле Address, чтобы выбрать одну из недавно посещенных страниц (рис. 6.10).

Рис. 6.8. Отыскав нужную страницу с помощью браузера, нажмите комбинацию клавиш Alt+Tab. Адрес страницы появится в поле Address

Рис. 6.10. Можно воспользоваться раскрывающимся списком в поле Address, чтобы выбрать одну из недавно посещенных страниц

Рис. 6.9. Выделенный текст становится ссылкой на внешнюю страницу

Чтобы изменить ссылку: 1. Щелкните правой кнопкой мыши по ссылке и выберите из контекстного меню пункт Hyperlink Properties (Свойства ссылки) (рис. 6.11). 2. В окне Edit Hyperlink (Изменить ссылку) перейдите на другую страницу, или введите новый адрес прямо в поле Address, или выберите какой-нибудь адрес из раскрывающегося списка, связанного с этим полем. 3. Нажмите OK. Окно закроется, и выделенный текст станет ссылкой на другую страницу. Чтобы удалить ссылку: 1. Щелкните правой кнопкой мыши по ссылке и выберите из контекстного меню пункт Hyperlink Properties (Свойства ссылки). 2. В окне Edit Hyperlink нажмите кнопку Remove Link (Удалить ссылку) (рис. 6.12). Окно закроется, и текст перестанет быть ссылкой.

120 Создание ссылок Чтобы создать почтовую ссылку: 1. Выделите текст, который должен стать ссылкой, щелкните правой кнопкой мыши и выберите из контекстного меню команду Hyperlink. 2. В окне Insert Hyperlink нажмите кнопку E-mail Address (Почтовый адрес) (рис. 6.13). 3. Введите тему письма и адрес, Expression Web автоматически добавит в начало адреса схему mailto: (рис. 6.14). 4. Нажмите OK. Окно закроется, и выделенный текст станет ссылкой на почтовый адрес.

Задание места открытия ссылки 121

Задание места открытия ссылки

Рис. 6.13. Чтобы создать почтовую ссылку, нажмите кнопку E-mail Address в окне Insert Hyperlink

Рис. 6.14. Введите тему письма и адрес, Expression Web автоматически добавит в начало адреса схему mailto:

Рис. 6.15. Чтобы задать место открытия ссылки, нажмите кнопку Target Frame в окне Edit Hyperlink

Рис. 6.16. В окне Target Frame выберите вариант New Window

Обычно при щелчке по ссылке браузер заменяет текущую страницу новой. Но можно задать параметры ссылки так, что конечная страница будет открываться в новом окне. Это особенно полезно для внешних ссылок, поскольку в исходном окне посетитель будет по-прежнему видеть ваш сайт. Чтобы задать место открытия ссылки: 1. Щелкните правой кнопкой мыши по существующей ссылке и выберите из контекстного меню команду Hyperlink. 2. В окне Edit Hyperlink нажмите кнопку Target Frame (Конечный фрейм) (рис. 6.15) 3. В окне Target Frame выберите вариант New Window (Новое окно) (рис. 6.16). 4. Нажмите OK. Окно закроется, и вы снова окажетесь в окне Edit Hyperlink. 5. Нажмите OK. Окно закроется, и место открытия ссылки будет изменено. Если в вашем сайте используются фреймы, то можно выбрать вариант Same Frame (Тот же фрейм) или Parent Frame (Родительский фрейм). Но многие поисковые машины испытывают затруднения при индексации содержимого фреймов, поэтому на будущее подумайте о переходе на технологию CSS-позиционирования. Если вы хотите, чтобы все ссылки открывались в новом окне, то на шаге 3 отметьте флажок Set as page default (По умолчанию для данной страницы).

122 Создание ссылок

Добавление закладок (якорей) 123

Добавление всплывающих подсказок В Expression Web всплывающие подсказки называются ScreenTips, в языке JavaScript – tooltips, но, как ни называй, они очень часто встречаются в Web. Когда вы проводите курсором над ссылкой на какой-нибудь странице, появляется короткий текст, описывающий, куда ведет ссылка. Конечно, задавать этот параметр не обязательно, но, поскольку он помогает пользователям ориентироваться, делайте это, когда есть возможность. Чтобы добавить всплывающую подсказку: 1. Щелкните правой кнопкой мыши по существующей ссылке и выберите из контекстного меню команду Hyperlink. 2. В окне Edit Hyperlink нажмите кнопку ScreenTip (Подсказка) (рис. 6.17). 3. В окне Set Hyperlink ScreenTip (Задать подсказку для ссылки) введите текст подсказки (рис. 6.18). 4. Нажмите OK. Окно закроется, и вы снова окажетесь в окне Edit Hyperlink. 5. Нажмите OK. Окно закроется, и для ссылки будет задана всплывающая подсказка. 6. Нажмите клавишу F12 для запуска браузера и проведите курсором над текстом ссылки, чтобы увидеть всплывающую подсказку в действии (рис. 6.19). Всплывающие подсказки работают в большинстве современных браузеров, а не только в Internet Explorer.

Рис. 6.20. Чтобы создать закладку, выделите текст и выполните команду Insert ⇒ Bookmark

Рис. 6.17. Нажмите кнопку ScreenTip в окне Edit Hyperlink

Рис. 6.21. В диалоговом окне Bookmark выделенный текст автоматически предлагается в качестве имени закладки Рис. 6.18. Введите текст подсказки и нажмите OK

Рис. 6.19. В браузере проведите курсором над текстом ссылки, чтобы увидеть всплывающую подсказку в действии

Рис. 6.22. Закладка подчеркивается пунктирной линией

Добавление закладок (якорей) Закладки, или, как их еще называют, якоря, позволяют переходить в конкретное место длинной Web-страницы. Закладка создается в два этапа: сначала сама закладка (якорь), а потом – ссылка, ведущая на эту закладку. Чтобы создать закладку: 1. Выделите текст, на который будет осуществляться переход, то есть конечную цель закладки. 2. Выполните команду Insert ⇒ Bookmark (Вставка ⇒ Закладка) (Ctrl+G) (рис. 6.20). 3. В диалоговом окне Bookmark выделенный текст автоматически предлагается в качестве имени закладки (рис. 6.21). Если хотите, можете ввести другое имя. 4. Нажмите OK. Окно закроется, и выделенный текст станет закладкой, о чем свидетельствует пунктирное подчеркивание (рис. 6.22). Ниже описано, как создать ссылку на закладку.

124 Создание ссылок Чтобы создать ссылку на закладку: 1. Выделите текст закладки, щелкните по нему правой кнопкой мыши и выберите из контекстного меню команду Hyperlink. 2. В окне Insert Hyperlink перейдите на страницу, содержащую закладку. Укажите на нее в списке, который расположен в центральной части окна, и нажмите кнопку Bookmark (Закладка) (рис. 6.23). 3. В диалоговом окне Select Place in Document (Выбор места в документе) выберите закладку, на которую хотите поставить ссылку (рис. 6.24). В данном примере есть всего одна закладка, но вообще-то на странице их может быть много. 4. Нажмите OK. Окно закроется, и вы снова окажетесь в окне Insert Hyperlink.

Добавление закладок (якорей) 125

Рис. 6.23. Чтобы создать ссылку на закладку, перейдите на нужную страницу и нажмите кнопку Bookmark

Рис. 6.26. Чтобы убрать закладку, щелкните правой кнопкой мыши и выберите из контекстного меню пункт Bookmark Properties

Рис. 6.24. Выберите закладку и нажмите OK Рис. 6.27. Выберите имя закладки и нажмите кнопку Clear

Рис. 6.25. Нажмите OK, чтобы закрыть диалоговое окно и поставить ссылку

Чтобы убрать закладку: 1. Выделите текст, который раньше был помечен закладкой. Щелкните правой кнопкой мыши и выберите из контекстного меню пункт Bookmark Properties (Свойства закладки) (рис. 6.26). 2. Выберите имя закладки и нажмите кнопку Clear (Убрать) (рис. 6.27). 3. Нажмите OK, чтобы закрыть диалоговое окно. Выделенный текст больше не является закладкой.

126 Создание ссылок

Создание ссылок внутри картинки 127

Создание ссылок внутри картинки Можно поставить ссылку на всю картинку или создать внутри картинки так называемую «активную область» (hotspot). Организовав внутри картинки несколько активных областей, можно создать ссылки на различные страницы. Чтобы создать ссылку для картинки в целом: 1. Откройте страницу, содержащую нужную картинку. Щелкните по картинке правой кнопкой мыши и выберите из контекстного меню команду Hyperlink (рис. 6.28). 2. В окне Insert Hyperlink выберите страницу, на которую должна вести ссылка, и нажмите OK (рис. 6.29). Окно закроется, при этом для картинки будет создана ссылка, ведущая на указанную страницу.

Рис. 6.28. Чтобы создать ссылку для картинки в целом, щелкните по картинке правой кнопкой мыши и выберите из контекстного меню команду Hyperlink

Рис. 6.30. Чтобы создать активную область, нажмите одну из трех кнопок на панели инструментов Pictures

Рис. 6.31. После выбора фигуры курсор принимает форму карандаша, и вы можете нарисовать на картинке границу активной области

Чтобы создать активную область: 1. Щелкните по картинке, внутри которой хотите создать активные области. 2. На панели инструментов Pictures нажмите одну из трех кнопок, соответствующих активным областям различной формы: прямоугольник, круг, многоугольник (рис. 6.30). 3. После выбора фигуры курсор принимает форму карандаша, и вы можете нарисовать на картинке границу активной области (рис. 6.31). Нарисуйте контур; перед тем как изменить направление, щелкните мышью. 4. Закончив рисовать, дважды щелкните мышью. Откроется окно Insert Hyperlink, в котором вы сможете выбрать нужную страницу или закладку (рис. 6.32). (Подробнее об этом окне см. раздел «Чтобы сослаться на страницу внутри сайта» выше). В данном примере активная область ссылается на закладку. 5. Нажмите OK. Окно закроется, а активная область станет ссылкой на указанную страницу. 6. Повторите описанные шаги, чтобы создать другие активные области. Чтобы начать рисование многоугольника сначала, нажмите Esc. Активные области не должны перекрываться или выходить за границы картинки. Поэтому вам может потребоваться увеличить саму картинку. Для этого достаточно потянуть за один из манипуляторов по краям картинки, а затем – если понадобится – перерисовать активные области. Если вам пришлось увеличить картинку более чем на 10%, лучше создайте увеличенную копию оригинала, иначе качество изображения пострадает.

Рис. 6.29. Выберите страницу, на которую должна вести ссылка, и нажмите OK

Рис. 6.32. Выберите страницу или закладку, на которую должна ссылаться активная область

128 Создание ссылок Чтобы изменить активную область: 1. Выберите любой из манипуляторов, расположенных вдоль границы активной области (рис. 6.33). 2. Перетащите манипулятор в новое место и отпустите кнопку мыши (рис. 6.34). 3. Повторяйте описанные шаги, пока область не примет нужную вам форму. Чтобы увидеть границы активной области: 1. Если вы не можете найти границы активной области, щелкните по картинке и нажмите кнопку Highlight Hotspots (Выделить активные области) на панели инструментов Pictures (рис. 6.35). Картинка исчезнет, а останутся только границы активных областей (рис. 6.36). 2. Снова нажмите кнопку Highlight Hotspots, картинка восстановится, и вы сможете подправить границы. Чтобы изменить или удалить ссылку для активной области: 1. Дважды щелкните по активной области. Откроется диалоговое окно Edit Hyperlink. 2. Выберите другую конечную страницу или ссылку или нажмите кнопку Remove Link (Удалить ссылку). 3. Нажмите OK. Окно закроется, а ссылка будет изменена или удалена.

Инструменты для работы со ссылками 129

Инструменты для работы со ссылками

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

Рис. 6.34. Перетащите манипулятор в новое место

В режиме Hyperlinks (Ссылки) вы можете быстро найти и поправить «битые» (никуда не ведущие) ссылки внутри своего сайта. Обязательно тестируйте все ссылки; ничто так не раздражает посетителей, как ссылки, ведущие в никуда. Рис. 6.37. В режиме просмотра ссылок показываются все ссылки, ведущие на страницу и с нее

Рис. 6.38. Чтобы проанализировать конкретную страницу, щелкните по ней правой кнопкой мыши и выберите из контекстного меню команду Move to Center Рис. 6.35. Чтобы увидеть границы активной области, нажмите кнопку Highlight Hotspots на панели инструментов Pictures

Рис. 6.39. В центре отображаются выбранная страница и связанные с ней ссылки

Чтобы воспользоваться режимом просмотра ссылок: 1. Откройте Web-сайт, перейдите на вкладку Web Site (Сайт) в верхней части окна редактирования и нажмите кнопку Hyperlinks (Ссылки), которая расположена в нижней части окна. 2. Чтобы получить общее представление о сайте, щелкните по его начальной странице (в данном примере default.htm). В режиме просмотра ссылок показываются все ссылки, ведущие на начальную страницу и с нее (рис. 6.37). 3. Чтобы проанализировать какую-либо из представленных на этой диаграмме страниц, щелкните по ней правой кнопкой мыши и выберите из контекстного меню команду Move to Center (Переместить в центр) (рис. 6.38). Теперь в центре отображаются выбранная страница и связанные с ней ссылки (рис. 6.39). Если вы предпочитаете видеть заголовки страниц, а не имена файлов, щелкните правой кнопкой мыши где-нибудь в окне просмотра ссылок и выберите из контекстного меню команду Show Page Titles (Показывать заголовки страниц) (рис. 6.40). Заодно вы увидите все неозаглавленные страницы.

Рис. 6.36. Картинка исчезнет, а останутся только границы активных областей

Рис. 6.40. Чтобы видеть заголовки страниц, а не имена файлов, щелкните правой кнопкой мыши где-нибудь в окне просмотра ссылок и выберите из контекстного меню команду Show Page Titles (верхний рисунок). Заодно вы увидите все неозаглавленные страницы (нижний рисунок)

130 Создание ссылок

Инструменты для работы со ссылками 131

Чтобы проверить отдельную ссылку:
В режиме просмотра ссылок щелкните правой кнопкой мыши по внешней ссылке и выберите из контекстного меню команду Verify Hyperlink (Проверить ссылку) (рис. 6.41). Если ссылка «битая», то соответствующая ей стрелка будет разорвана (рис. 6.42). О том, как исправить ошибку, см. раздел «Чтобы исправить битые ссылки» ниже. Для проверки внешних ссылок необходимо соединение с Интернетом.

Рис. 6.43. На панели Hyperlinks показаны «битые» внутренние ссылки, а непроверенные внешние помечены вопросительным знаком

Рис. 6.41. Чтобы проверить отдельную ссылку, щелкните по ней правой кнопкой мыши и выберите из контекстного меню команду Verify Hyperlink

Рис. 6.44. Отметьте переключатель Verify all hyperlinks и нажмите кнопку Start

Рис. 6.42. Если ссылка «битая», то соответствующая ей стрелка будет разорвана Рис. 6.45. На панели Hyperlinks показано состояние всех ссылок на сайте

Чтобы проверить все ссылки на сайте: 1. Выполните команду Task Panes ⇒ Hyperlinks (Панели задач ⇒ Гиперссылки). На панели Hyperlinks перечислены все внутренние «битые» ссылки, а непроверенные внешние помечены вопросительным знаком (рис. 6.43). 2. Нажмите кнопку Verify Hyperlink (Проверить гиперссылки) ( ), чтобы начать проверку. 3. В диалоговом окне Verify Hyperlinks отметьте переключатель Verify all hyperlinks (Проверить все ссылки) (рис. 6.44) и нажмите кнопку Start (Начать). 4. Спустя некоторое время на панели Hyperlinks будет показано состояние всех ссылок на сайте (рис. 6.45). О том, как исправить ошибки, см. раздел «Чтобы исправить битые ссылки» на следующей странице.

132 Создание ссылок Чтобы исправить битые ссылки: 1. Находясь на панели Hyperlinks, щелкните правой кнопкой мыши по «битой» ссылке и выберите из контекстного меню команду Edit Hyperlink (Изменить ссылку) (рис. 6.46). 2. В диалоговом окне Edit Hyperlink нажмите кнопку Browse (Обзор) и укажите страницу, на которую следует перейти (рис. 6.47). 3. После того как нужная страница будет задана, вы снова окажетесь в окне Edit Hyperlink. Решите, что вы хотите сделать: исправить эту ссылку на всех страницах (это наиболее вероятное решение, оно подразумевается по умолчанию) или только на некоторых (рис. 6.48). Нажмите кнопку Replace (Заменить). Спустя некоторое время панель Hyperlinks перерисовывается, исправленной «битой» ссылки на ней уже не будет (рис. 6.49). или Когда исправляется внешняя ссылка, против нее на панели Hyperlinks изображается вопросительный знак и статус Unknown (Неизвестно) (рис. 6.50). Нажмите кнопку Verify Hyperlink (Проверить ссылку) ( ), чтобы снова открыть диалоговое окно Verify Hyperlinks (см. раздел «Чтобы проверить все ссылки на сайте» на предыдущей странице). После успешной проверки вопросительный знак заменяется галочкой (рис. 6.51). 4. Повторяйте описанные шаги до тех пор, пока «битых» ссылок не останется. Когда вы исправите все «битые» ссылки, в нижней части панели Hyperlinks появится соответствующее сообщение (рис. 6.51).

Инструменты для работы со ссылками 133

Рис. 6.46. Чтобы исправить «битую» ссылку, щелкните по ней правой кнопкой мыши и выберите из контекстного меню команду Edit Hyperlink

Рис. 6.49. Исправленные внутренние ссылки удаляются из списка

Рис. 6.50. Когда исправляется внешняя ссылка, против нее на панели Hyperlinks изображается вопросительный знак и статус Unknown. Нажмите кнопку Verify Hyperlink

Рис. 6.47. Нажмите кнопку Browse и укажите страницу, на которую следует перейти

Рис. 6.48. Указав нужную страницу, нажмите кнопку Replace

Рис. 6.51. После успешной проверки вопросительный знак заменяется галочкой

Инструменты для работы с CSS 135

Инструменты для работы с CSS Каждому стилю соответствует один из трех селекторов

Создание стилей с помощью CSS

7

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

Рис. 7.1. Вкладка Manage Styles – то место, где можно создать и организовать все стили

Почему так много внимания уделяется каскадным таблицам стилей (Cascading Style Sheets – CSS)? Потому что теоретически CSS позволяет отделить содержимое от дизайна и верстки. Тем самым вы получаете возможность отформатировать одну и ту же информацию для различных устройств, начиная от гигантских компьютерных мониторов и заканчивая крошечными экранами сотовых телефонов и устройствами, которые еще даже не изобретены. «Теоретически» – потому что разделение содержимого и дизайна – не такое простое дело. К тому же в отличие от полиграфического дизайна, где можно абсолютно точно контролировать внешний вид страницы, CSS сознательно оставляет некоторую свободу посетителям и разработчикам браузеров. Соблюсти нужный баланс не всегда легко, но Expression Web предоставляет в ваше распоряжение один из лучших комплектов инструментов для работы с CSS из имеющихся на рынке.

В этой главе мы начнем с описания этих инструментов и философии каскадирования, принятой в CSS, а затем покажем, как создавать стили двух видов: на основе тэгов и на основе классов. Стили на основе тэгов (их еще называют поэлементными) применяются к конкретным элементам HTML-разметки, например к заголовкам h1 или к гиперссылкам. Стили на основе классов можно применять даже тогда, когда никакого HTML-элемента нет, например чтобы нарисовать какойто текст красным цветом и крупным шрифтом. Стили на основе классов можно использовать на одной странице многократно. Стиль третьего вида – на основе идентификаторов – может встречаться на одной странице только один раз. Обычно такие стили применяются к колонкам и к хвостовикам; мы рассмотрим их в главе 8.

В Expression Web есть множество инструментов для работы с CSS-стилями. Вкладка Manage Styles (Управление стилями) на одноименной панели задач – то место, где можно создать и организовать все стили (рис. 7.1). На соседней с ней вкладке Apply Styles (Применение стилей) можно посмотреть образцы каждого стиля (рис. 7.2). На панели CSS Properties (Свойства CSS) предлагаются три способа упорядочения свойств CSS: сводка всех тэгов в выбранной области сайта, каскадное представление, показывающее, как стили связаны между собой, и перечисление по алфавиту или по категориям (рис. 7.3). Показывать все правила, Показывать Показывать применяемые в алфавитном сверху к выбранной порядке правила области сайта Показывать по категориям

Рис. 7.2. На вкладке Apply Styles можно посмотреть образцы каждого стиля

Выбранный тэг

Все правила, применяемые к тэгу

Рис. 7.3. На панели CSS Properties предлагается три способа упорядочения свойств CSS

136 Создание стилей с помощью CSS К CSS также имеют отношение две панели инструментов, хотя лично мне кажется, что панели задач удобнее. Панель инструментов Style Application (Применение стилей) используется главным образом в тех случаях, когда вы хотите создавать стили в ручном режиме (рис. 7.4). (Если вы не крупный знаток CSS, рекомендуется работать в автоматическом режиме, принятом по умолчанию.) Панель инструментов Style (Стили) включает выпадающие меню для применения стилей к классам и идентификаторам, а также кнопки для создания стилей и присоединения таблиц стилей (рис. 7.5). Еще один инструмент – панель задач CSS Reports (Отчеты по CSS) – рассматривается отдельно ниже.

Принципы каскадирования 137 Заголовок

Рис. 7.4. Панель инструментов Style Application применяется в основном для создания стилей вручную

Рис. 7.5. Панель инструментов Style включает выпадающие меню для применения стилей к классам и идентификаторам

Чтобы изменить настройки CSS: 1. Выберите из меню пункт Tools ⇒ Page Editor Options (Сервис ⇒ Параметры редактора страниц).

Внутренний стиль на основе класса

Рис. 7.6. Внутренняя таблица стилей записывается в начале страницы – между тэгами и Ссылка на внешнюю таблицу стилей Внешний стиль на основе класса

Чтобы подготовить среду для работы с CSS: 1. Включите следующие панели задач: Tag Properties (Свойства тэгов), CSS Properties (Свойства CSS), Apply Styles (Применение стилей) и Manage Styles (Управление стилями). 2. Выберите из меню пункт View ⇒ Visual Aids (Вид ⇒ Дополнительная визуализация) и отметьте все флажки, кроме двух, относящихся к ASP.NET. 3. Отметьте в меню флажок View ⇒ Quick Tag Selector (Вид ⇒ Быстрый селектор тэгов). Теперь все готово для стилизации. Чтобы были видны относящиеся к CSS панели инструментов, выберите из меню пункт View ⇒ Toolbars (Вид ⇒ Панели инструментов) и отметьте панель Style Application или Style.

Внутренний стиль листа

Рис. 7.7. Чтобы присоединить к странице внешнюю таблицу стилей, необходимо указать ссылку на файл, в котором она находится

2. Перейдите на вкладку CSS и ознакомьтесь с параметрами, которые Expression Web принимает по умолчанию. Если захотите что-нибудь изменить, пользуйтесь раскрывающимися списками.

Принципы каскадирования Почему таблицы стилей называются каскадными? Из-за порядка применения различных стилей к элементам. Каскад распространяется сверху вниз: сначала внешняя таблица стилей, потом внутренняя, потом встроенные стили. Чем ближе свойство к элементу, тем больше его приоритет. Можно сказать иначе. Если для некоторого элемента не задан встроенный стиль, то применяются правила, описанные во внутренней таблице. А если для него нет правил и во внутренней таблице, то берутся правила из внешней. В результате такой каскад стилей позволяет определять внешний вид как на уровне сайта, так и на уровне отдельных абзацев. Стили на самом нижнем уровне – встроенные – применяются к отдельному абзацу или блоку. Вся стилевая информация такого рода находится внутри тэга

. Внутренние стили распространяются на всю страницу и записываются в ее начале – между тэгами и (рис. 7.6). Внешние таблицы стилей действуют на несколько страниц или на весь сайт. Они находятся в отдельном файле и могут присоединяться к отдельным страницам (рис. 7.7). В этой главе будет показано, как создавать стили разных видов и применять их к одной странице. Затем некоторые стили будут экспортированы во внешнюю таблицу. Таким образом, мы сможем сначала поэкспериментировать с одной страницей, а уж потом решать, стоит ли применять найденное решение ко всему сайту. Опытные разработчики, особенно те, кто заранее знает, какие стили применять, предпочитают сразу работать с внешними таблицами. Если вы относитесь к их числу, то можете сразу перейти к разделу «Чтобы создать пустую внешнюю таблицу стилей».

138 Создание стилей с помощью CSS

Создание набора шрифтов 139

Создание набора шрифтов

4. С помощью кнопок Move Up (Вверх) и Move Down (Вниз) можно поместить предпочтительные шрифты в начало списка (рис. 7.9). Нажмите OK, чтобы закрыть окно. В следующий раз, когда вы станете создавать стиль, в списке семейств шрифтов будет присутствовать только что созданный набор (рис. 7.10).

В Web не имеет значения, сколько «навороченных» шрифтов установлено на вашем компьютере. Важно, какие шрифты есть на компьютере пользователя. Стандартный способ решения этой проблемы – указывать в стилях набор шрифтов. По умолчанию Expression Web включает только самые общие наборы: Sans Serif (без засечек), Serif (с засечками), моноширинный, а в каждый из них входят широко распространенные шрифты. Можно создать и свои наборы, перечислив в них шрифты, которые следует искать на компьютере пользователя (шрифтам, расположенным в начале списка, отдается приоритет). В конце списка следует обязательно указывать какой-нибудь общий набор. В этом случае если предпочтительный для вас шрифт у пользователя отсутствует, то будет подставлен один из стандартных или, по крайней мере, шрифт из наиболее близкого семейства. Чтобы создать набор шрифтов: 1. Выберите из меню команду Tools ⇒ Page Editor Options (Сервис ⇒ Параметры редактора страниц), перейдите в диалоговом окне на вкладку Font Families (Семейства шрифтов) и выберите пункт (New Font Family) (Новой семейство шрифтов) в верхнем списке (рис. 7.8 сверху). 2. В окне Add font (Добавить шрифт) введите несколько начальных букв имени шрифта, и при условии, что такой шрифт установлен на вашем компьютере, он будет выделен в раскрывающемся списке. Нажмите кнопку Add (Добавить) (рис. 7.8 сверху). Шрифт добавляется в верхний список, оказываясь первым в новом наборе (рис. 7.8 снизу). 3. Продолжайте добавлять шрифты в набор, повторяя шаг 2 (рис. 7.8 снизу).

Рис. 7.9. С помощью кнопок Move Up и Move Down переместите предпочтительные шрифты в начало списка

Чтобы добавить шрифты в уже существующий набор, выберите его на шаге 2 и выполните описанные на последующих шагах действия. Однако изменить порядок шрифтов в наборе невозможно. На шаге 2 можно включить в набор шрифт, отсутствующий на вашем компьютере. Это полезно, если вы полагаете, что такой шрифт установлен на большинстве компьютеров, пусть даже его нет у вас лично. Рис. 7.8. Чтобы создать набор шрифтов, щелкните по строке (New Font Family) в списке (верхний рисунок) и начинайте добавлять в него шрифты по одному (нижний рисунок)

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

140 Создание стилей с помощью CSS

Создание стилей на основе тэгов Стили на основе тэгов применяются ко всем экземплярам указанного HTML-элемента. Например, если один раз создать стиль для тэга h1, то он будет применен ко всем таким тэгам на странице (или на всех страницах сайта, если поместить стиль во внешнюю таблицу). В этом разделе мы рассмотрим только элементы нескольких видов, но те же самые действия можно выполнить для любого HTMLэлемента. Чтобы создать стили заголовков: 1. Откройте любую страницу сайта, содержащую заголовки, и нажмите кнопку New Style (Новый стиль) на вкладке Manage Styles или Apply Styles. 2. В диалоговом окне Manage Styles выберите из раскрывающегося списка Selector (Селектор) тэг h1, чтобы определить внешний вид всех заголовков первого уровня (рис. 7.11). 3. Воспользуйтесь списком Category (Категория) и свойствами для каждой категории, чтобы задать внешний вид элементов h1. Для закрытия окна нажмите кнопку OK. Стиль h1 появляется на вкладке Manage Styles в категории Elements (Элементы) и применяется ко всем тэгам h1 на странице (рис. 7.13). 4. Можете повторить шаги 1–3 для заголовков других уровней.

Создание стилей на основе тэгов 141 Если заданы стили для всех заголовков, они будут автоматически применяться и в случае изменения уровня заголовка (рис. 7.14).

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

Если, как часто бывает, вам случится работать с вложенными элементами, воспользуйтесь быстрым селектором тэгов – щелкните по открывающему тэгу – и сразу увидите все, что ему принадлежит (рис. 7.15). Обычно линейные размеры задают в пикселях, но если для этой цели употреблять ключевые слова (от xx-small до xx-large), то пользователь сможет по своему усмотрению увеличивать или уменьшать размеры текстовых элементов. Обращайте внимание не столько на абсолютные значения в пикселях, сколько на понятную иерархию относительных размеров элементов.

Рис. 7.12. Воспользуйтесь списком Category и свойствами для каждой категории, чтобы задать внешний вид элементов h1 Рис. 7.13. Новый стиль применяется ко всем тэгам h1 на странице

Рис. 7.14. Если заданы стили для всех заголовков, они будут автоматически применяться и в случае изменения уровня заголовка

Рис. 7.15. Пользуйтесь быстрым селектором тэгов, чтобы сразу же увидеть все элементы, подчиненные данному тэгу

142 Создание стилей с помощью CSS Чтобы стилизовать гиперссылки: 1. Откройте любую страницу сайта, содержащую заголовки, и нажмите кнопку New Style на вкладке Manage Styles или Apply Styles. 2. В диалоговом окне Manage Styles выберите из раскрывающегося списка Selector строку a:link, чтобы определить внешний вид еще не посещавшихся ссылок (рис. 7.16). 3. Оставаясь в категории Font (Шрифт), выберите из раскрывающегося списка пункт More Colors (Дополнительные цвета) (рис. 7.17). 4. В диалоговом окне More Colors выберите цвет и нажмите OK (рис. 7.18). 5. Оказавшись вновь в окне New Style, отметьте флажок none (нет) в колонке text-decoration (рис. 7.19). Закройте окно, нажав кнопку OK. В категорию Elements на вкладке Manage Styles добавляется стиль a:link; кроме того, он применяется ко всем ссылкам на открытой странице (рис. 7.20).

Создание стилей на основе тэгов 143 Рис. 7.16. Выберите из раскрывающегося списка Selector строку a:link, чтобы определить внешний вид еще не посещавшихся ссылок

Рис. 7.21. Выберите другой цвет (правый рисунок) для стиля a:hover и задайте для него подчеркивание

Рис. 7.17. Оставаясь в категории Font, выберите из раскрывающегося списка пункт More Colors

Рис. 7.22. Выберите третий цвет для стиля a:visited и снова отмените подчеркивание

Рис. 7.18. В диалоговом окне More Colors выберите цвет и нажмите OK

Рис. 7.20. В категорию Elements на вкладке Manage Styles добавляется стиль a:link; кроме того, он применяется ко всем ссылкам на открытой странице

Рис. 7.19. Отметьте флажок none в колонке textdecoration, чтобы ссылки не подчеркивались

Рис. 7.23. Список в категории Elements на вкладке Manage Styles содержит все три стиля ссылок

6. Повторите шаги 1–5, выбрав на шаге 2 пункт a:hover, а на шаге 4 – какой-нибудь другой цвет (рис. 7.21). (Принято подчеркивать ссылки, над которыми находится курсор.) 7. Повторите шаги 1–5, выбрав на шаге 2 пункт a:visited, а на шаге 4 – третий цвет (рис. 7.22). Нажмите OK, чтобы окончательно закрыть окно New Style. В списке на вкладке Manage Styles вы увидите все три стиля ссылок (рис. 7.23). О том, как экспортировать их во внешнюю таблицу стилей, см. ниже.

144 Создание стилей с помощью CSS

Создание стилей на основе классов 145

Создание стилей на основе классов

5. Чтобы применить стиль к пока еще неизмененному абзацу, щелкните по нему правой кнопкой мыши на вкладке Manage Styles и выберите из контекстного меню команду Apply Style (Применить стиль) (рис. 7.28 слева). или Перейдите на вкладку Apply Styles и щелкните по новому стилю (рис. 7.28 справа). Стиль применяется к выделенному абзацу, а в тэг абзаца включается имя стиля – (рис. 7.29).

Если стили на основе элементов применяются к конкретным тэгам, например h1, то стили на основе классов – к чему угодно. Благодаря такой гибкости вы, вероятно, будете время от времени изменять их. Поэтому старайтесь присваивать стилям имена, сообразуясь с назначением (.caption или .pullquote), а не с внешним видом (.thatcoolblue ihatedaweeklater). Ниже описано, как можно переименовать основанный на классе тэг, не нарушив уже существующие привязки. Чтобы создать стиль, основанный на классе: 1. Откройте страницу, в которой вы хотите создать внутренний стиль. В примере ниже для стилизации выбран абзац (рис. 7.24). 2. Нажмите кнопку New Style на вкладке Manage Styles или Apply Styles (рис. 7.25). 3. По умолчанию в окне New Style первый создаваемый стиль назван .newStyle1 и определен для текущей страницы (рис. 7.26). Присвойте ему другое имя, например myStyle. (Expression Web автоматически добавляет в начало имени точку, чтобы стиль применялся именно к классу.) 4. Выберите категорию Font и задайте свойства, которые сочтете необходимыми (рис. 7.27). Воспользуйтесь образцом, чтобы уточнить свое решение, и нажмите OK. Новый стиль появится в списке на панели Manage Styles.

Рис. 7.24. Чтобы создать стиль, основанный на классе, выберите для начала абзац, к которому стиль будет применяться Рис. 7.25. Нажмите кнопку New Style на вкладке Manage Style или Apply Style

Рис. 7.28. Чтобы применить стиль, щелкните по нему правой кнопкой мыши на вкладке Manage Styles и выберите из контекстного меню команду Apply Style (левый рисунок) или просто щелкните по имени стиля на вкладке Apply Styles (правый рисунок)

Рис. 7.26. По умолчанию к окне New Style первый создаваемый стиль назван .newStyle1 и определен для текущей страницы Рис. 7.29. Вид абзаца изменяется в соответствии с новым стилем, а в его тэге появляется имя стиля

Рис. 7.27. Выберите категории, включаемые в стиль, и для каждой из них задайте свойства

В начале имени стиля не должно быть цифр (.1stStyle). Expression Web создаст такой стиль, но не позволит применить его. На шаге 4, чтобы задать наиболее употребительные параметры, например Georgia, medium или normal, достаточно ввести первые несколько букв. Expression Web подставит недостающие, избавляя вас от необходимости каждый раз делать выбор из раскрывающегося списка. Внутренние таблицы стилей иногда называют вложенными (embedded), поскольку они размещаются между тэгами и .

146 Создание стилей с помощью CSS Чтобы переименовать стиль на основе класса: 1. На вкладке Apply Styles или Manage Styles выберите основанный на классе стиль, который хотите переименовать, обновив при этом все ссылки на него. Щелкните по нему правой кнопкой мыши и выберите из контекстного меню команду Rename class (Переименовать класс) (рис. 7.30). 2. Введите новое имя и нажмите OK (рис. 7.31). В окне статуса показано, сколько было обновлено ссылок. Нажмите OK, чтобы закрыть окно. Если переименовать основанный на классе стиль в окне Modify Style, то все существующие ссылки на него окажутся некорректны. Поэтому пользуйтесь этим окном, чтобы изменять свойства стиля, но не его имя.

Создание встроенных стилей 147 Рис. 7.33. Разница проявляется, когда вы выбираете из списка Selector пункт (inline style)

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

Рис. 7.31. Введите новое имя и нажмите OK Рис. 7.32. Как и в других случаях, для создания встроенного стиля нужно первым делом нажать кнопку New Style

Рис. 7.35. Как видно из кода в верхней части окна, встроенный стиль записывается внутри выделенного абзаца или блока

Создание встроенных стилей Итак, вы научились создавать стили на основе элементов и классов. Ну а если имеется один-единственный абзац, который должен выглядеть немного иначе, чем все остальные? Тут-то и пригодятся встроенные стили. О том, как встроенные стили взаимодействуют с другими таблицами стилей, см. в разделе «Принципы каскадирования» выше. Чтобы создать встроенный стиль: 1. Щелкните в любом месте внутри абзаца или блока, который собираетесь стилизовать. 2. Нажмите кнопку New Style на вкладке Manage Styles или Apply Styles (рис. 7.32). 3. В диалоговом окне New Style выберите из списка Selector самый первый пункт (inline style) (рис. 7.33). 4. Выберите из левого списка категорию и с помощью различных раскрывающихся списков задайте свойства стиля (рис. 7.34). Для оценки произведенного эффекта воспользуйтесь образцом, после чего нажмите OK. Окно закроется, а созданный стиль будет применен к выделенному абзацу или блоку (рис. 7.35). В Expression Web есть еще два способа дать понять, что вы создали именно встроенный стиль: на вкладке CSS Properties он называется that, а на вкладке Manage Styles не появляется вовсе (рис. 7.36).

Рис. 7.36. Есть еще два способа понять, что создан именно встроенный стиль: на вкладке CSS Properties он называется that, а на вкладке Manage Styles вообще отсутствует

Не путайте встроенные стили со встроенными элементами, которые применяются всего лишь к нескольким символам или словам внутри абзаца. Примером встроенного элемента может служить <em>выделенное слово.

148 Создание стилей с помощью CSS

Копирование и изменение стилей 149

Копирование и изменение стилей Можно быстро создать новый вариант стиля, скопировав существующий и изменив одно-два свойства. Точно так же можно модифицировать и существующий стиль. На самом деле часто бывает так, что сначала создается стиль на основе класса, а затем оказывается, что он мог бы применяться и к элементам. Типичный пример – вы создали стиль для одного абзаца, а потом захотели применить его ко всем абзацам, то есть преобразовать в стиль на основе элемента (рис. 7.37 и 7.38). Если вы применили стиль по ошибке или просто передумали, то можно легко отменить стилизацию элемента, не удаляя самого стиля. Но если уж стиль удален, то это необратимо, поэтому лучше с этим не торопиться. Чтобы скопировать и изменить стиль: 1. На вкладке Manage Styles щелкните правой кнопкой мыши по стилю, который хотите скопировать, и выберите из контекстного меню команду New Style Copy (Копировать стиль) (рис. 7.39). 2. В диалоговом окне New Style задайте имя нового стиля в поле Selector и внесите необходимые изменения (рис. 7.40). 3. Нажмите OK. Окно закроется, а модифицированный стиль появится в списке на вкладке Manage Styles (рис. 7.41). Рис. 7.41. Модифицированный стиль появится в списке на вкладке Manage Styles

Рис. 7.42. Щелкните правой кнопкой мыши по стилю на основе класса, который нужно преобразовать в стиль на основе элемента

Рис. 7.37. Если созданный стиль вам очень понравился ...

Рис. 7.38. ... то его легко скопировать и применить в другом месте

Рис. 7.39. Чтобы скопировать и изменить стиль, щелкните по нему правой кнопкой мыши на вкладке Manage Styles и выберите из контекстного меню команду New Style Copy

Рис. 7.40. Задайте имя нового стиля в поле Selector и внесите необходимые изменения

Рис. 7.43. С помощью раскрывающегося списка Selector укажите элемент, который хотите стилизовать (в данном случае тэг p)

Чтобы преобразовать стиль: 1. Щелкните правой кнопкой мыши по стилю на основе класса, который нужно преобразовать в стиль на основе элемента (рис. 7.42). 2. В диалоговом окне Modify Style с помощью раскрывающегося списка Selector укажите элемент, который хотите стилизовать (в данном случае тэг p) (рис. 7.43). Нажмите OK. Окно закроется, и все экземпляры выбранного элемента будут обновлены. Новый стиль на основе элемента появится в списке на вкладке Manage Styles. Исходный стиль на основе класса сохраняется, вы можете удалить его или использовать в других целях.

150 Создание стилей с помощью CSS Чтобы отменить стилизацию: 1. Выберите элемент, для которого хотите отменить стилизацию (рис. 7.44). 2. На вкладке Apply Styles нажмите кнопку Clear Style (Убрать стиль) (рис. 7.45). Стиль перестает применяться к выбранному элементу (рис. 7.46). Чтобы удалить стиль: 3. На вкладке Apply Styles щелкните правой кнопкой мыши по стилю, который собираетесь удалить, и выберите из контекстного меню команду Delete (Удалить) (рис. 7.47). 4. Появляется окно с просьбой подтвердить удаление. Нажмите Yes. Стиль удаляется.

Создание таблиц стилей 151

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

Рис. 7.44. Выберите элемент, для которого хотите отменить стилизацию Рис. 7.45. На вкладке Apply Styles нажмите кнопку Clear Style

Рис. 7.48. Внутренние таблицы стилей целиком размещаются в разделе заголовка страницы

Рис. 7.46. Стиль убирается Рис. 7.47. На вкладке Apply Styles щелкните правой кнопкой мыши по стилю, который собираетесь удалить, и выберите из контекстного меню команду Delete Рис. 7.49. Чтобы создать пустую внешнюю таблицу стилей, в диалоговом окне New на вкладке Page выберите категорию General и пункт CSS

Рис. 7.50. Новый, еще не имеющий имени CSSфайл открывается в окне редактирования и появляется в списке на вкладке Manage Styles

Чтобы создать пустую внешнюю таблицу стилей: Есть несколько способов.
Нажмите кнопку New (Создать) на панели инструментов Common или Standard и выберите из меню пункт CSS.
Выполните команду File ⇒ New ⇒ CSS (Файл ⇒ Создать ⇒ CSS).
Выполните команду File ⇒ New и в диалоговом окне New на вкладке Page (Страница) выберите категорию General и пункт CSS. Нажмите OK (рис. 7.49). Новый, еще не имеющий имени CSSфайл открывается в окне редактирования и появляется в списке на вкладке Manage Styles (рис. 7.50). См. раздел «Чтобы сохранить пустую таблицу стилей» на следующей странице.

152 Создание стилей с помощью CSS

Создание таблиц стилей 153 Рис. 7.54. Если таблица стилей находится вне текущего сайта, нажмите кнопку Attach Style Sheet на вкладке Apply Styles или Manage Styles

Чтобы сохранить пустую таблицу стилей: 1. Когда в окне редактирования появится новая пустая таблица стилей (см. предыдущий раздел), нажмите комбинацию клавиш Ctrl+S. 2. В окне Save As (Сохранить как) найдите папку с текущим сайтом (рис. 7.51 сверху). Присвойте таблице стилей осмысленное имя, из выпадающего списка Save as выберите тип файла CSS Files и нажмите кнопку Save (рис. 7.51 снизу) (см. совет ниже). На язычке вкладки, соответствующей открытой странице, а также в списке на вкладке Manage Styles появляется новое имя (рис. 7.52). Не существует общепринятого соглашения об именовании внешних таблиц стилей. Часто встречаются имена main.css, style1.css, global.css. Лично я называю внешние таблицы так же, как сайт, к которому они относятся. Это помогает мне не забыть, какая таблица к чему относится. Поэтому на шаге 2 я выбрал имя wanderings.

Рис. 7.51. Чтобы сохранить пустую таблицу стилей, воспользуйтесь диалоговым окном Save As и найдите в нем папку с текущим сайтом (верхний рисунок). Присвойте таблице стилей осмысленное имя, из выпадающего списка Save as выберите тип файла CSS Files и нажмите кнопку Save

Рис. 7.55. Воспользуйтесь окном Attach Style Sheet, чтобы создать ссылку на таблицу стилей либо импортировать ее

Рис. 7.52. В списке на вкладке Manage Styles появляется новое имя

Рис. 7.56. Страница ссылается на внешнюю таблицу стилей (левый рисунок). Директива @layout.css говорит, что страница может при необходимости импортировать таблицу стилей (правый рисунок)

Рис. 7.53. Если таблица стилей находится в том же сайте, что и открытая страница, перетащите ее с панели Folder List на страницу

Можно также присоединить таблицу стилей, загрузив ее с одного из многочисленных сайтов, предлагающих такие файлы бесплатно. (См., например, сайт www.csszengarden.com, на котором имеется множество замечательных бесплатных примеров.)

Чтобы присоединить таблицу стилей к странице: 1. Откройте страницу, к которой хотите присоединить внешнюю таблицу стилей (таблица может быть и пустой, о чем будет сказано ниже). 2. Если таблица стилей находится в том же сайте, что и открытая страница, перетащите ее с панели Folder List на страницу (рис. 7.53). или Если таблица стилей находится вне текущего сайта, нажмите кнопку Attach Style Sheet (Присоединить таблицу стилей) на вкладке Apply Styles или Manage Styles (рис. 7.54). В диалоговом окне Attach Style Sheet найдите нужный файл (рис. 7.55) и нажмите OK. Теперь внешняя таблица стилей окажется в списке на вкладке Manage Styles (рис. 7.56). Есть два способа присоединить таблицу стилей сразу к нескольким страницам. Первый способ – щелкнуть по каждой из них мышью, одновременно удерживая клавишу Ctrl, а затем нажать кнопку Attach Style, как описано на шаге 2. Второй способ – при появлении окна Attach Style Sheet на шаге 2 отметить переключатель All HTML Pages (Все HTML-страницы). В диалоговом окне Attach Style Sheet вы можете либо создать ссылку на таблицу стилей (переключатель Link), либо импортировать ее (переключатель Import) (рис. 7.55). Ссылки применяются чаще, так как их поддерживает большее число браузеров. Директивы импорта внутри присоединенной таблицы стилей будут обрабатываться новыми браузерами, не смущая старые. Старые браузеры при этом увидят только основную таблицу, на которую ведет ссылка, а новые смогут импортировать более детальную.

154 Создание стилей с помощью CSS Чтобы перенести внутренние стили во внешнюю таблицу: 1. Сначала присоедините внешнюю таблицу стилей к текущей странице (см. предыдущий раздел) и откройте вкладку Manage Styles. 2. Перетащите те внутренние стили, которые вы хотите поместить во внешнюю таблицу, на файл, соответствующий этой таблице (рис. 7.57 слева). (Чтобы выбрать несколько внутренних стилей, щелкайте по ним, одновременно удерживая клавишу Ctrl.) Отпустите кнопку мыши. Выбранные стили переносятся во внешнюю таблицу, а в списке внутренних стилей для текущей страницы больше не значатся (рис. 7.57 справа). 3. Чтобы добавить внутренние стили из других страниц в ту же внешнюю таблицу, присоедините эту таблицу к каждой такой странице. Затем можно будет перетащить стили из каждой страницы во внешнюю таблицу (рис. 7.58).

Создание таблиц стилей 155

Рис. 7.57. Выделите интересующие вас внутренние стили и перетащите их на файл, соответствующий внешней таблице (левый рисунок). Выбранные стили переносятся во внешнюю таблицу (правый рисунок)

Рис. 7.59. Чтобы отсоединить внешнюю таблицу стилей от страницы, щелкните правой кнопкой мыши по таблице и выберите из контекстного меню команду Remove Link

Чтобы отсоединить внешнюю таблицу стилей от страницы: 1. Откройте страницу, от которой хотите отсоединить внешнюю таблицу стилей. 2. На вкладке Manage Styles щелкните правой кнопкой мыши по внешней таблице стилей и выберите из контекстного меню команду Remove Link (Убрать ссылку) (рис. 7.59). Ссылка на внешнюю таблицу стилей будет убрана, и эта таблица исчезнет из списка на вкладке.

Рис. 7.60. Чтобы отсоединить внешнюю таблицу стилей от нескольких страниц, сначала щелкните мышью по этим страницам, удерживая клавишу Ctrl ...

Чтобы отсоединить внешнюю таблицу стилей от нескольких страниц: 1. На панели Folder List щелкните мышью по тем страницам, от которых хотите отсоединить внешнюю таблицу стилей, одновременно удерживая клавишу Ctrl (рис. 7.60). 2. Выполните команду Format ⇒ CSS Styles ⇒ Manage Style Sheet Links (Формат ⇒ Стили CSS ⇒ Управление ссылками на таблицы стилей) (рис. 7.61). 3. В диалоговом окне Link Style Sheet есть возможность убрать ссылки со всех страниц сайта или только с некоторых. Выберите таблицу стилей, которую хотите отсоединить, и нажмите кнопку Remove (Убрать) (рис. 7.62). (В примере показана только одна ссылка, но их могло бы быть и больше.) Ссылка на внешнюю таблицу стилей убирается. Если никаких других ссылок вы убирать не хотите, закройте окно, нажав OK.

Рис. 7.61. ... а затем выполните команду Format ⇒ CSS Styles ⇒ Manage Style Sheet Links

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

Рис. 7.58. Присоединив внешнюю таблицу стилей в другой странице, вы сможете перетащить в нее и другие внутренние стили

Рис. 7.62. Выберите таблицу стилей, которую хотите отсоединить, и нажмите кнопку Remove

156 Создание стилей с помощью CSS

Разрешение проблем, связанных с CSS 157

Разрешение проблем, связанных с CSS На панели CSS Reports (Отчеты по CSS) Expression Web помогает выявлять источники ошибок, которые иначе найти было бы сложно. Можно проверить, имеются ли какие-нибудь неиспользуемые стили, содержат ли страницы ссылки на стили, которые вы забыли создать, а также просмотреть список несогласованных ссылок между страницами и стилями. На этой же панели задач есть инструменты для разрешения или устранения конфликтов. Иногда, впрочем, самый простой способ решить проблему – внимательно посмотреть на код, пользуясь при этом панелью задач CSS Properties, особенно если вы пытаетесь понять, не оказывает ли влияние на стилизацию конкретного элемента какая-то часть каскада. См. раздел «Чтобы выявить причины ошибок в CSS» на следующей странице. Чтобы сгенерировать отчеты по CSS: 1. Откройте сайт и выберите из меню пункт Task Panes ⇒ CSS Reports (Панели задач ⇒ Отчеты по CSS), чтобы стала видна панель задач CSS Reports. 2. Щелкните по иконке со стрелкой в левом верхнем углу панели, задайте параметры отчета в диалоговом окне CSS Reports и нажмите кнопку Check (Проверить) (рис. 7.63). Будет сгенерирован отчет обо всех найденных ошибках (рис. 7.64). 3. Чтобы увидеть код, который, возможно, является причиной ошибки, щелкните по маленькой синей стрелке в начале каждой строки (рис. 7.64).

Рис. 7.63. Чтобы запустить проверку CSS, щелкните по иконке со стрелкой на панели CSS Reports и задайте параметры отчета в диалоговом окне CSS Reports

Рис. 7.64. На панели отображается список возможных ошибок

Рис. 7.65. Нажмите кнопку Style Sheet Links, чтобы просмотреть соответствующую таблицу стилей

или Нажмите кнопку Style Sheet Links (Ссылки на таблицы стилей), чтобы просмотреть соответствующую таблицу стилей (рис. 7.65). 4. Внесите необходимые изменения и снова запустите отчет. Продолжайте, пока не будут исправлены все ошибки. Наличие неиспользуемых стилей не страшно. Но если в отчете их очень много, лучше удалите лишние, чтобы не загромождать сайт.

158 Создание стилей с помощью CSS Чтобы выявить причины ошибок в CSS: 1. Выделите элемент, к которому применяется стиль, работающий не так, как вы ожидаете. В нашем примере это стиль, задающий отступы для картинки. Картинка должна находиться на одном уровне с верхним краем соседнего текста, но оказалась слишком низко (рис. 7.66 справа). 2. На панели задач CSS Properties нажмите кнопки Summary (Сводка) и Show set properties (Показывать свойства набора) в верхнем ряду (рис. 7.66 слева). 3. Внимательно изучите правую колонку для свойства, которое могло бы быть причиной ошибки. В нашем случае свойство clear равно both. 4. Если вы подозреваете какое-то конкретное свойство, попробуйте задать для него другое значение из раскрывающегося списка. Мы изменили значение свойства clear на inherit (рис. 7.67 слева). Если ошибка не пропала, восстановите исходное значение и попробуйте какое-нибудь другое свойство. В этом примере внесенного изменения оказалось достаточно, теперь картинка выровнена по верхнему краю текста (рис. 7.67 справа).

Верстка с применением CSS

8

Рис. 7.66. Панель задач CSS Properties – прекрасное средство для выявления причин ошибок, к примеру, неправильного выравнивания картинки по верхнему краю соседнего текста

Рис. 7.67. Изменив значение свойства clear с both на inherit, мы исправили ошибку выравнивания картинки

Каскадные таблицы стилей могут ошеломить начинающего это многообразием возможностей для управления позиционированием элементов, в особенности если вы привыкли управлять расположением с помощью таблиц. Все абзацы, картинки и разделы на странице в CSS трактуются как прямоугольные блоки. В главе 5 вы уже встречались с этой моделью при задании отступов и полей для картинок. Посмотрите еще раз на приведенный там рисунок, чтобы лучше уяснить принципы блочной модели (рис. 8.1). Двигаясь от центра к внешней границе, вы последовательно встречаете содержимое элемента, отступ, границу и поле. Такую же модель вложенных прямоугольников CSS применяет к заголовкам, боковым пане-

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

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

160 Верстка с применением CSS

Свойства, управляющие позиционированием 161

Свойства, управляющие позиционированием По умолчанию элементы на странице отображаются в естественном порядке (потоке) снизу вверх, то есть так, как следуют друг за другом в разметке. В CSS определено пять свойств, позволяющих управлять положением любого элемента в потоке: absolute (абсолютное), fixed (фиксированное), relative (относительное), static (статическое) и inherit (унаследованное). Чтобы лучше понять их смысл, взгляните на прилагаемые снимки с экрана, на которых изображено окно редактирования и вкладка CSS Properties (Свойства CSS).
Абсолютное позиционирование. Абсолютно позиционированный элемент исключается из потока страницы и может быть помещен в любое место, например рядом с другим элементом (рис. 8.2). Его положение определяется относительно родительского блока, каковым является тэг body, который обычно начинается в левом верхнем углу страницы (рис. 8.2 слева). Если вставить абсолютно позиционированный элемент внутрь другого такого же элемента, то его положение будет определяться положением родителя (рис. 8.3). Имейте в виду, что размеры абсолютно позиционированных элементов автоматически не адаптируются к содержимому. Поэтому верстка с применением слоев, которые по умолчанию абсолютно позиционированы, может вызывать неожиданные проблемы при отображении в браузере, если вы не проявите достаточной осторожности (рис. 8.4).

Рис. 8.5. Положение фиксированного элемента определяется относительно окна браузера, поэтому он всегда занимает одно и то же место ...

Рис. 8.2. Абсолютно позиционированный элемент размещается относительно левого верхнего угла страницы с координатами (0,0). В данном случае элемент absolute-A отстоит на 100 пикселей от левого края и на 50 пикселей от правого. Его положение никак не влияет на положение элемента static-A

Рис. 8.6. ... даже если прокрутите страницы до самого конца

Рис. 8.3. Отношения между родителем и потомком: элемент absolute-B находится внутри элемента absolute-A, поэтому координаты 50, 50 отсчитываются от левого верхнего угла родителя: 300,25 Рис. 8.7. Для относительно позиционированного элемента координаты левого верхнего угла (141,42) отличаются относительно естественного положения в потоке, которое обозначено пустым прямоугольником

Рис. 8.4. Абсолютно позиционированные элементы не расширяются автоматически, чтобы вместить все содержимое, поэтому применение слоев для создания макета может приводить к неприятностям

Рис. 8.8. Статические элементы можно переупорядочивать в потоке, как, например, в данном случае, где элемент static-B помещен выше static-A


Фиксированное позиционирование. Положение фиксированного элемента определяется относительно окна браузера, а не страницы или какого-либо другого элемента. При прокрутке окна вниз или вверх фиксированный элемент остается на одном месте, хотя прочие элементы появляются и исчезают (рис. 8.5 и 8.6).
Относительное позиционирование. Относительно позиционированный элемент включается в поток, то есть его положение зависит от положения соседних элементов. При перемещении такого элемента его координаты изменяются относительно естественного места в потоке (рис. 8.7).
Статическое позиционирование. Статический элемент принадлежит потоку страницы. Изменить его место в потоке можно (рис. 8.8), но переместить его по соседству с другим элементом не удастся, так как это вывело бы его из потока (рис. 8.9). В следующем разделе объясняется, что этот аспект позиционирования управляется свойствами float и clear.
Унаследованное позиционирование. Если свойство position элемента равно inherit, то он просто наследует способ позиционирования от своего родителя.

Рис. 8.9. Статические элементы нельзя изымать из потока и располагать рядом друг с другом

162 Верстка с применением CSS

Свойства float и clear Абсолютное позиционирование – инструмент точный, но недостаточно гибкий, как было показано на рис. 8.4. Чтобы добиться текучей верстки, адаптирующейся к разнообразным устройствам просмотра, пользуйтесь оставшимися четырьмя способами позиционирования в сочетании со свойствами float и clear. Оба они находятся в категории Layout (Верстка) в диалоговых окнах New Style (Создать стиль) и Modify Style (Изменить стиль) (рис. 8.10 и 8.11). Принцип действия свойства float такой же, как у атрибута обтекания, управляющего взаимным расположением текста и картинок. Если задать для элемента свойство float со значением left, то он сдвинется к левому краю объемлющего контейнера, оставляя другим элементам место в правой части. Свойство clear управляет тем, как элементы сдвигаются, если соседние элементы тоже плавающие (float). По сути дела, вы отменяете стандартные соглашения о том, где происходит разрыв строки между элементами, расположенными сбоку от плавающего.

Значения свойства float
Left (влево). Элемент сдвигается влево, позволяя другим элементам обтекать его справа (рис. 8.12).
None (отсутствует). Это значение, принимаемое по умолчанию, – элемент остается на своем месте в потоке. Другие элементы не будут его обтекать. Если оставить поле float пустым, то большинство браузеров воспримет это как none, но некоторые не понимают такой установки. В таком случае для правильного отображения страницы задайте значение none явно.
Right (вправо). Элемент сдвигается вправо, позволяя другим элементам обтекать его слева (рис. 8.13).

Свойства float и clear 163 Рис. 8.10. Свойство float может принимать четыре значения

Значения свойства clear

Рис. 8.11. Свойство clear допускает пять вариантов позиционирования

Рис. 8.12. Изменение свойства float для элемента Box A с none (левый рисунок) на left (правый рисунок) позволяет элементу Box B обтекать его справа. Элемент Box C не сдвигается вправо, поскольку Box B отодвигает его настолько далеко вниз, что уже можно поместить и прямо под Box A

Рис. 8.13. Элемент Box A сдвигается вправо, позволяя элементу Box B обтекать его слева


Inherit (унаследовано). Для элемента действует то же значение свойства, что и для объемлющего его родительского элемента.

Рис. 8.14. Верхний рисунок: элемент Box D расположен справа, потому что элемент Box B, сдвинутый влево, оказался ниже Box C. Нижний рисунок: изменение свойства clear для элемента Box D с none на both заставляет D перейти на новую строку, поскольку никакой другой элемент не может его обтекать


Both (обе). Это значение запрещает обтекание элемента с обеих сторон, так что другие элементы должны располагаться либо ниже, либо выше.
Left (слева). Такой элемент запрещает обтекание слева.
None (нет). Если задано это значение, то элемент разрешено обтекать с обеих сторон. Как и в случае со значением none свойства float, задавайте none явно, если браузер не распознает значения по умолчанию (поле clear оставлено пустым).
Right (справа). Такой элемент запрещает обтекание справа.
Inherit (унаследовано). Элемент наследует свойство от своего родителя.

164 Верстка с применением CSS

Использование инструментов позиционирования Панели задач Apply Styles, Manage Styles и CSS Properties играют важную роль не только для форматирования (см. главу 7), но и для позиционирования. Чтобы сэкономить время, включите их заранее. Чтобы подготовиться к позиционированию: 1. Выберите из меню пункт View ⇒ Ruler and Grid (Вид ⇒ Линейка и сетка) и отметьте флажки Show Ruler (Показывать линейку) и Show Grid (Показывать сетку). Вдоль верхнего и левого края окна редактирования появляются линейки с рисками через каждые 50 пикселей. 2. Включите следующие панели задач: Tag Properties, CSS Properties, Apply Styles и Manage Styles. 3. Выберите из меню пункт View ⇒ Visual Aids (Вид ⇒ Дополнительная визуализация) и отметьте все флажки, кроме двух, относящихся к ASP.NET. 4. Отметьте флажок View ⇒ Quick Tag Selector (Вид ⇒ Быстрый селектор тэгов). Теперь все готово к позиционированию элементов с помощью CSS. Если вы хотите использовать не пиксели, а другие единицы измерения, то на шаге 1 выберите из меню пункт View ⇒ Ruler and Grid ⇒ Configure и задайте необходимые параметры.

Готовые CSS-макеты 165

Готовые CSS-макеты

Устаревшие способы верстки: фреймы, таблицы и слои Если вы любитель фреймов, табличной верстки или слоев, то заголовок, наверное, вызвал у вас негодование. Раньше они в какой-то мере компенсировали недостаточность арсенала средств верстки в Web и позволяли создавать более-менее пристойные макеты. Но у каждого из этих способов есть свои недостатки. На страницу внутри фрейма нельзя поставить закладку, при табличной верстке приходится применять множество крохотных прозрачных GIF-файлов, а слои не адаптируются к изменению размера содержимого. С этим приходилось мириться, так как не было приемлемых альтернатив. Но новые браузеры стали поддерживать CSS-позиционирование, на смену FrontPage пришла программа Expression Web, а стало быть, и прежним способам верстки пора отправляться на покой. Если вы разработали и продолжаете поддерживать сайты с применением фреймов (с помощью FrontPage или Dreamweaver), то обнаружите, что в Expression Web они тоже работают. (Доступ к фреймам дает пункт меню File ⇒ New ⇒ Page ⇒ Frames Pages (Файл ⇒ Создать ⇒ Страница ⇒ Страницы с фреймами)). И табличная верстка тоже спрятана в недрах Expression Web (Table ⇒ Layout Tables). Несмотря на то что вкладка Layers (Слои) находится по соседству со вкладками Apply Styles и Manage Styles, она вряд ли будет играть важную роль в деле CSS-позиционирования. Хотя слои легко рисовать и позиционировать, но они основаны на абсолютном позиционировании и порядке в стеке, что может очень быстро превратить ваш макет в хаос. Слои все еще активно применяются для создания, скажем, навигационных меню, всплывающих при прохождении курсора, но можно сверстать сложную страницу и без них. Это продемонстрировано в готовых макетах верстки, которые входят в состав Expression Web и будут рассмотрены ниже. Microsoft включила все три инструмента, чтобы облегчить переход к конструированию на основе стандартов Web с применением CSS. Именно эта цель и поставлена в данной главе.

Применение готовых CSS-макетов, включенных в дистрибутив Expression Web, позволит вам обойтись без неизбежных проб и ошибок, возникающих при создании макета с нуля. Не забудьте открыть инструменты и панели, упомянутые в разделе «Использование инструментов позиционирования» на предыдущей странице. Рис. 8.15. Выберите категорию CSS Layouts в левой колонке, а в средней колонке укажите макет, образец которого приведен справа

Рис. 8.16. Раздел left_col имеет фиксированную ширину, а остальные разделы автоматически адаптируются к ширине страницы

Рис. 8.17. В CSS-файл только три из шести стилей, ассоциированных с идентификаторами (#container, #left_col и #page_content), включают свойства позиционирования

Чтобы воспользоваться готовым CSS-макетом: 1. Выберите из меню команду File ⇒ New ⇒ Page (Файл ⇒ Создать ⇒ Страница). 2. В диалоговом окне New выберите категорию CSS Layouts (CSS-макеты) в левой колонке, а в средней колонке укажите макет, образец которого приведен справа (рис. 8.15). Нажмите OK. Появится чистая HTML-страница, а также неозаглавленный CSS-файл. В данном примере раздел в левой колонке имеет фиксированную ширину, а остальные разделы автоматически адаптируются к ширине страницы (рис. 8.16). Взглянув на CSS-файл, вы увидите, что только три из шести стилей, ассоциированных с идентификаторами (#container, #left_col и #page_content), включают свойства позиционирования (рис. 8.17). 3. Выполните команду File ⇒ Save All (Файл ⇒ Сохранить все). 4. В диалоговом окне Save As введите имя и заголовок HTML-страницы и связанного с ней CSS-файла. По умолчанию CSS-файл присоединяется в странице. (В данном примере мы выбрали имена prebuiltlayout.htm и prebuiltlayout.css.)

166 Верстка с применением CSS 5. Добавьте какое-нибудь содержимое в основные разделы страницы – заголовок или текст, – чтобы стали видны разделы, которые до того были схлопнуты (рис. 8.18). 6. Теперь изменим стили для идентификаторов, чтобы ощутить, как отдельные свойства влияют на верстку. Перейдите на вкладку Manage Styles, щелкните правой кнопкой мыши по стилю #left_col и выберите из контекстного меню пункт Modify Style (Изменить стиль) (рис. 8.19). 7. В диалоговом окне Modify Style для категорий, выделенных полужирным шрифтом, уже заданы какие-то свойства. Так, для стиля #left_col категория Position (Позиция) выделена, поскольку в ней для свойства position задано значение absolute, а для свойства width – значение 200 (пикселей) (рис. 8.20). Измените 200 на 100 и закройте окно, нажав OK. 8. На вкладке Manage Styles щелкните правой кнопкой мыши по стилю #page_ content, выберите из контекстного меню команду Modify Style, а затем категорию Box (Блок). Измените величину левого поля с 200 на 100 и нажмите OK. На Web-странице ширина левой колонки уменьшается наполовину, что отражено и в сводке на вкладке CSS Properties (рис. 8.22).

Рис. 8.21. Измените величину левого поля в стиле #page_content с 200 на 100 пикселей

Готовые CSS-макеты 167

Рис. 8.18. Добавьте какое-нибудь содержимое в основные разделы страницы, чтобы стали видны разделы, которые до того были схлопнуты

Рис. 8.22. Ширина левой колонки уменьшается наполовину, что отражено и в сводке на вкладке CSS Properties

Рис. 8.19. Щелкните правой кнопкой мыши по стилю #left_col и выберите из контекстного меню пункт Modify Style

Рис. 8.23. Можно приступить к стилизации внешнего вида самих разделов, например изменив свойства границ

Рис. 8.20. Для стиля #left_col задана ширина 200 пикселей

Рис. 8.24. Неудивительно, что в категории Position собраны многие свойства, управляющие позиционированием

9. Как и в главе 7, вы можете приступить к стилизации внешнего вида самих разделов, например задать границы (рис. 8.23). Но воздержитесь от изменения стилей содержимого (заголовков, текста, списков и т. д.), пока не прочтете раздел «Контекстные селекторы» ниже. 10. Продолжите настройку стилей в окне Modify Style, обращая особое внимание на категории, относящиеся к позиционированию: Box, Position и Layout (рис. 8.24 и 8.25). 11. Закончив работу, выполните команду File ⇒ Save All, чтобы сохранить изменения в HTML- и CSS-файле. Чтобы применить тот же макет к другим страницам, присоедините созданную таблицу стилей как внешнюю. CSS-файл, управляющий версткой, принято называть layout.css. Чтобы не усложнять, во всех примерах используется только один CSS-файл. Но для коммерческих сайтов часто применяются несколько взаимосвязанных таблиц стилей, содержащих различные трюки, призванные обойти проблемы отображения, присущие старым браузером. Дополнительную информацию по этому поводу можно найти на сайтах http://www. positioniseverything.net и http://alistapart.com.

Рис. 8.25. В категории Layout представлены свойства float и clear, управляющие взаимным расположением элементов по горизонтали

168 Верстка с применением CSS

Контекстные селекторы Выше вы видели, что совместное использование тэгов div и правил, привязанных к идентификатору, позволяет создавать стили для конкретных разделов. Контекстные селекторы дают возможность создавать стили, которые применяются только тогда, когда определенный тэг находится в определенном разделе. Например, вам нужно особым образом стилизовать заголовок h3 лишь, если он встречается в боковой панели. Или применить специальное сочетание полей и отступов для абзацев в главном разделе. Контекстные селекторы решают эту задачу, не загромождая код. Вынеся стили во внешнюю таблицу, вы сможете быстро применить их к любым страницам, содержащим один и тот же набор разделов. Чтобы создать контекстный селектор: 1. Нажмите кнопку New Style (Создать стиль) на вкладке Manage Styles. В поле Selector диалогового окна New Style автоматически генерируется обобщенное имя стиля (рис. 8.26 сверху). 2. Дважды нажмите клавишу Backspace, чтобы стереть само имя и точку перед ним. Затем введите #èìÿ_ðàçäåëà(ïðîáåë)èìÿ_êëàññà. В примере мы создали стиль #page_content p, который будет применяться ко всем абзацам в главной области страницы (рис. 8.26 снизу). 3. В окне Modify Style задайте значения свойств в разных категориях, чтобы абзацы стилизовались, как вам нужно (рис. 8.27). Нажмите кнопку Apply (Применить), если хотите посмотреть, что получилось, и внести изменения, или кнопку OK, чтобы закрыть окно. Ко всем абзацам в разделе #page_content будет применен новый стиль, который также появляется в списке на вкладке Manage Styles (рис. 8.28).

Контекстные селекторы 169 Рис. 8.26. Чтобы создать контекстный селектор, замените обобщенное имя стиля (верхний рисунок) своим: #èìÿ_ðàçäåëà (ïðîáåë) èìÿ_êëàññà

Рис. 8.29. Для раздела left_col создан контрастный стиль p

4. Повторите шаги 1–3, чтобы создать контекстные стили для абзацев в следующем разделе страницы. В примере мы создали для левой колонки контрастный стиль (рис. 8.29). 5. Повторите шаги 1–3, чтобы создать контекстные стили для заголовков. В примере это стили #left_col h3 и #page_content h2 (рис. 8.30). 6. Перетащите стили, ассоциированные с идентификаторами, из текущей страницы во внешнюю таблицу (рис. 8.31). (О том, как создавать внешние таблицы стилей, рассказано выше.) 7. Сохраните плоды своих трудов, выполнив команду File ⇒ Save All. Если на шаге 2 передвинуть окно New Style в другое место экрана, то вы будете знать, какой идентификатор набирать, поскольку все идентификаторы видны на вкладке Manage Styles.

Рис. 8.27. Нажмите кнопку OK, чтобы закрыть диалоговое окно, или кнопку Apply, чтобы посмотреть, что получилось, и внести изменения

Рис. 8.30. Здесь в левой колонке применяется специальный стиль h3, а в главной области – специальный стиль h2

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

Рис. 8.32. В режиме программирования видно, что контекстные селекторы не включаются в тэг h2

Рис. 8.28. Ко всем абзацам в разделе #page_content будет применен новый стиль, который также появляется в списке на вкладке Manage Styles

Рис. 8.31. Перетащите стили, ассоциированные с идентификаторами, из текущей страницы во внешнюю таблицу

Рис. 8.33. Вся стилевая информация для тэга h2 находится во внешней таблице

170 Верстка с применением CSS

Создание CSS-макета с нуля 171

Создание CSS-макета с нуля Как бы хороши ни были готовые макеты, рано или поздно вы захотите создать собственный. Но сначала все же поработайте с готовыми, чтобы лучше освоиться. Приведенный ниже пример макета, созданного с нуля, сознательно сделан простым, чтобы вы поняли, что к чему. Процедура состоит из двух этапов: сначала создаются стили, ассоциированные с идентификаторами разделов, а затем сами разделы с указанными идентификаторами. Кстати, некоторые стили в примере сделаны чрезмерно яркими, чтобы лучше смотрелись на черно-белых снимках с экрана. В своих собственных разработках проявляйте больше вкуса. Организуйте рабочее пространство, как описано в разделе «Чтобы подготовиться к позиционированию» выше. Чтобы создать для макета стили, ассоциированные с идентификаторами: 1. Создайте новую пустую HTML-страницу (Ctrl+N) и пустой CSS-файл (File ⇒ New ⇒ CSS). 2. Сохраните оба файла, назвав их соответственно default.htm и layout.css. 3. Перейдите на страницу default.htm и нажмите кнопку Attach Style Sheet (Присоединить таблицу стилей) на вкладке Manage Styles. В диалоговом окне Attach Style Sheet найдите файл layout.css (рис. 8.34). Нажмите OK. Окно закроется, а в списке на вкладке Manage Styles появится внешняя таблица стилей (рис. 8.35).

Рис. 8.34. В диалоговом окне Attach Style Sheet найдите файл layout.css Рис. 8.35. После присоединения к странице, внешняя таблица стилей появляется в списке на вкладке Manage Styles

Рис. 8.36. Вместо обобщенного имени стиля введите #container (#èìÿÂàøåãîÐàçäåëà)

Рис. 8.37. Поскольку раздел container объемлет все содержимое страницы, задаем для него свойства position: absolute, width: 100%, height: 100% Рис. 8.38. Идентификатор #container появился в списке на вкладке Manage Styles, но точка не обведена кружочком, поскольку элемента с таким идентификатором еще нет на странице

4. Нажмите кнопку New Style на вкладке Manage Styles. В поле Selector диалогового окна New Style автоматически генерируется обобщенное имя стиля (рис. 8.36 сверху). Дважды нажмите клавишу Backspace, чтобы очистить поле, и введите имя #container. Из раскрывающегося списка Define in (Определить в) выберите Existing style sheet (Существующей таблице стилей), а из списка URL – имя layout.css в поле URL (рис. 8.36 снизу). 5. Не закрывая окно New Style, задайте в категории Position следующие свойства: position: absolute, width: 100%, height: 100% (рис. 8.37). Задайте другие свойства в этой и других категориях по своему усмотрению, помня, что это можно сделать и позже. (О свойствах, относящихся к позиционированию, см. раздел «Свойства, управляющие позиционированием» выше.) Нажмите OK. Идентификатор #container появится списке на вкладке Manage Styles (рис. 8.38). Обратите внимание, что красная точка не обведена кружочком, поскольку элемента с таким идентификатором еще нет на странице.

172 Верстка с применением CSS

Создание CSS-макета с нуля 173

6. Повторите шаги 4–5 для добавления стилей, ассоциированных с идентификаторами других элементов, которые вы собираетесь разместить на странице. Они будут использованы ниже в разделе «Чтобы вставить тэги div и связать их со стилями» (рис. 8.39). 7. Когда все будет готово, выполните команду File ⇒ Save All. Свойства, заданные в каждом стиле, можно посмотреть, перейдя на вкладку Apply Styles или открыв саму таблицу стилей (layout.css) (рис. 8.40 и 8.41).

Рис. 8.39. Создайте стили, ассоциированные с идентификаторами других элементов, которые вы собираетесь разместить на странице

Определив на шаге 5, что раздел container занимает всю площадь страницы, мы упростили себе задачу размещения последующих разделов. Еще одно преимущество, которое мы получаем от помещения всех элементов в контейнерный div, заключается в том, что для их стилизации достаточно изменить стили, связанные с самим контейнером. (Дополнительную информацию см. в разделе «Контекстные селекторы» выше.)

Рис. 8.40. На вкладке Apply Styles перечислены все стили. Если задержать курсор над именем стиля, всплывет подсказка с детальным описанием свойств

Рис. 8.42. Чтобы вставить тэг div, выберите из меню команду Insert ⇒ HTML ⇒