Лабораторная работа №2. Стилевое оформление Web-страниц

Задание 1. Задать стилевое оформление страницы «Мой офис» (файл office.htm).

1. С помощью стиля задать для заголовка «Мой офис Состав и возможности MS Office» расположение по центру страницы.

• Найти в коде страницы «Мой офис» тег абзаца, содержащий текст заголовка (<p class=”zag”>). Встроить в тег стиль – добавить в тег параметр style с определением стиля, содержащим название свойства стиля – выравнивание (text‑align) и его значение – по центру (center), в описании стиля свойство и значение указываются через двоеточие:

<p class=”zag” style=”text-align:center”>

• Проверить действие стиля.

2. Добавить в описание стиля абзаца заголовка страницы написание заглавными буквами.

• Если стиль содержит несколько определений, то они указываются через знак точки с запятой (;). Добавить в конец значения параметра style (перед закрывающей кавычкой) знак разделителя (;) и новое определение, состоящее из свойства преобразование текста (text-transform) и значения uppercase (заглавные буквы):

<p class=”zag” style=”text-align:center; text-transform: uppercase”>

3. Самостоятельно задать крупный шрифт для абзаца заголовка (добавить в описание стиля еще одно определение стиля со свойством font-size и значением large).

4. Задать для текста гиперссылки «К началу страницы» выравнивание по центру страницы и отступ от предыдущего текста.

• Найти в коде страницы тег div, описывающий абзац текста «К началу страницы». Встроить в тег стиль, состоящий из двух определений: выравнивание текста (как в пункте 1) и отступ сверху (margin-top) со значением 20 пикселей (20):

<div style=”text-align:center;margin-top:20”>

5. Самостоятельно задать для ячейки th, содержащей заголовок таблицы «Подробнее о приложениях MS Office», курсивное написание: свойство font-style, значение italic.

6. Иногда требуется задать стиль сразу для нескольких экземпляров тега на странице. В этом случае используется таблица стилей, внедренная в страницу. Создать внедренную в страницу «Мой офис» таблицу стилей и задать вертикальное выравнивание по верхнему краю ячеек для всех ячеек td таблицы (свойство vertical-align, значение top):

• В раздел страницы head (после открывающего, но перед закрывающим тегом head) добавить описание внедренной таблицы стилей:

<style type=”text/css”>

<!--

-->

</style>

• Внутри таблицы стилей (после <!--, но перед -->) вставить описание стиля выравнивания для селектора td (тег ячейки таблицы):

td {vertical-align:top}

• Изменяя размер окна страницы «Мой офис», проверить действие вертикального выравнивания.

7. Изменить цвет всех ссылок на странице (селектор a, свойство color, значение цвета – текстовое называние или числовой код цвета – см. Приложение. Фоновые цвета):

• Добавить во внедренную таблицу стилей (аналогично предыдущему пункту) описание нового стиля, например:

a {color: #CC0066}

8. Самостоятельно с помощью внедренной таблицы стилей отключить отображение рамок для всех рисунков на странице (селектор img, свойство border-width, значение 0).

9. Если требуется применить стиль не ко всем экземплярам тега, а лишь к некоторым, либо применить стиль к экземплярам разных тегов, можно задать класс элементов. Стиль может быть задан для всех элементов класса. На странице «Мой офис» заголовок и подзаголовок страницы (экземпляры тега p), а также заголовок таблицы (тег th) объединены в класс zag. Определить для класса zag выделение цветом (color), полужирное написание (свойство font-weight со значением bold) и увеличенный размер (font-size). Селектором в данном случае будет выступать имя класса, предваренное знаком точки (.):

.zag {

font-size: 120%;

color: #662244;

font-weight: bold}

10. Отключить подчеркивание (свойство text-decoration, значение none) гиперссылок внутри списка приложений. Поскольку следует изменить написание не всех ссылок, а только тех, которые являются элементами списка (li), в определении стиля используются контекстные селекторы. В качестве селектора в этом случае выступают имена тегов, записанные в порядке их следования в коде HTML:

li a {text-decoration:none}

11. Сохранить все сделанные в файле office.htm изменения.

Задание 2. Задать стилевое оформление страниц «Новые возможности Word» (файл word.htm), «Новые возможности Excel» (файл excel.htm), «Мой офис» (файл office.htm).

12. Если необходимо задать единый стиль сразу для нескольких страниц, следует использовать связанную таблицу стилей. Задать цвет фона для страниц «Новые возможности Word» и «Новые возможности Excel»:

• В рабочей папке создать с помощью приложения «Блокнот» новый файл с именем tablecss.css.

• В файле tablecss.css задать описание стиля: селектор BODY, свойство background-color, значение – название или цифровой код фонового цвета, например,

body {background-color: #F08080}

• В коде страниц «Новые возможности Word» и «Новые возможности Excel» в раздел HEAD вставить строку ссылки на внешнюю таблицу стилей. Поскольку таблица находится в той же папке, что и сами страницы, ссылка имеет вид:

<link href=”tablecss.css” rel=”stylesheet” type=”text/css” />

• Сохранить все изменения в файлах tablecss.css, word.htm, excel.htm.

13. Открыть файл office.htm в приложении MS Expression Web и изучить интерфейс работы со стилями (рис.8).

• Выполнить команду Format/Background: на вкладке Language в списках Save the document as и Reload the current document as: выбрать значение Cyrillic.

• Проверить, что в код страницы (в раздел head) записана строка META-определения:

<meta content=”text/html; charset=windows-1251”

http-equiv=”Content-Type”>

• Если строка meta отсутствует, следует повторно выполнить команду Format/Background, пока она не появится, а затем сохранить документ.

ВНИМАНИЕ! Задание кодировки является обязательным, так как в противном случае документ может быть сохранен в другой кодировке и русский текст станет не читаем (по умолчанию в Expression Web установлена кодировка UTF-8).

Панели работы со стилями CSS

Рис.8. Интерфейс MS Expression Web

• В случае если не отображается окно с кодом или окно с внешним видом страницы, следует переключить режим отображения, щелкнув на слове Split внизу окна страницы.

• В случае если не отображается какая-либо из нужных панелей инструментов (CSS Properties – Панель свойств стиля, Apply Style и Manage Style – панели работы со стилями, Toolbox – панель вставки HTML-тегов), следует включить ее отображение в меню Panels.

14. Поскольку требуется добиться единообразия оформления всех страниц, присоединить созданную ранее внешнюю таблицу стилей tablecss.css к странице «Мой офис». Для этого следует перейти на панель работы со стилями (Manage Style или Apply Style) и выполнить команду Attach Style Sheet. В окне команды нажать кнопку Browse и выбрать файл таблицы стилей из рабочей папки; установить переключатель Attach as в позицию Link, затем нажать OK.

15. Перенести определения стилей из внутренней таблицы во внешнюю, чтобы они стали доступны для других страниц:

• На панели Manage Style, используя полосу прокрутки или изменив размер панели, отобразить как внутренние, так и внешние стили (рис.9).

Рис.9. Отображение внутренней и внешней таблиц стилей

• Выделить мышью стиль .zag во внутренней таблице и перетащить его мышью на окошко стилей tablecss.css – стиль будет перемещен во внешнюю таблицу стилей.

• Перетащить во внешнюю таблицу стилей также стили, определенные для a и img (рис.10).

Рис.10. Внутренняя и внешняя таблицы стилей после изменения

• Сохранить сделанные изменения, нажав на значок дискетки. Автоматически будут сохранены изменения и связанной таблицы стилей.

• Открыть в окне браузера страницы word.htm и excel.htm и проанализировать произошедшие изменения (действует стиль гиперссылок).

16. Создать во внешней таблице tablecss.css стиль для выделения теста абзацев p жирным написанием и увеличенным размером шрифта:

• На панели работы со стилями (Manage Style или Apply Style) выполнить команду New Style.

• В окне команды в поле Selector выбрать p, в поле Define in – выбрать Existing style sheet, затем нажать кнопку Browse и выбрать файл таблицы стилей tablecss.css из рабочей папки;

• Сконструировать определение стиля абзаца p, для чего следует заполнить значения нужных свойств стиля: в списке Category выбрать Font, в поле font-size выбрать значение medium, в поле font-weight выбрать bold. В нижней части окна можно просмотреть сформированное определение и образец стиля. Нажать OK.

• На панели Manage Style проверить, что стиль появился в списке стилей внешней таблицы tablecss.css.

• Сохранить сделанные изменения.

• Проанализировать изменения при отображении в окне браузера страниц word.htm и excel.htm.

17. Применить стиль заголовков .zag для заголовков «Новые возможности Word» и «Новые возможности Excel» и подзаголовков (выделены в исходном тексте справки оранжевым цветом) страниц word.htm и excel.htm:

• Открыть страницы word.htm и excel.htm в MS Expression Web, настроить кодировку (!) этих страниц (аналогично пункту 13).

• Переход между страницами осуществляется щелчком на ярлычке соответствующей вкладки.

• Чтобы применить стиль к нужному заголовку/подзаголовку, следует установить курсор на его текст (в области кода или в области просмотра документа), затем щелкнуть на селекторе стиля .zag на панели Apply style (или выбрать команду Apply Style из контекстного меню селектора на панели Manage Style).

• В случае, если к какому-либо абзацу стиль был применен ошибочно, следует установить курсор на текст этого абзаца, а затем выполнить команду Clear Style на панели Apply style.

18. Для абзаца гиперссылки «К началу страницы», расположенной внизу страницы «Мой офис», задан встроенный стиль. Поскольку аналогичные ссылки есть и на других страницах, следует оформить их одинаково. Переместить встроенный стиль во внешнюю таблицу стилей и применить стиль ко всем ссылкам на начало страницы.

• В окне отображения страницы «Мой офис» найти ссылку «К началу страницы». Щелкнуть на ссылке мышью, будет выделен элемент div. Однако на панели Apply Style встроенный стиль (Inline Style) не отображается. Щелкнуть на ярлычке тега (div) мышью таким образом, чтобы выделился весь абзац и на панели Apply Style отобразился встроенный стиль (Inline Style) – рис.11. При наведении указателя мыши на встроенный стиль на панели Apply Style выдается подсказка с определением этого стиля.

• Щелкнуть правой кнопкой мыши на встроенном стиле на панели Apply Style и выполнить команду New Style Copy. В окне создания стиля задать имя нового стиля .naverh; убедиться, что стиль будет сохранен во внешнюю таблицу стилей и нажать OK. Сохранить изменения.

Рис.11. Отображение встроенного в тег стиля

• Удалить встроенный в тег абзаца стиль. Для этого, не снимая выделения с абзаца, выполнить команду Clear Style на панели Apply Style.

• Не снимая выделения с абзаца, применить к нему стиль .naverh.

• Аналогично предыдущему пункту, применить стиль .naverh к абзацам ссылок «К началу страницы», расположенным внизу страниц word.htm и excel.htm.

• Сохранить все сделанные изменения.

19. Добавить в описание стиля тела страницы body определения типа и размера шрифта:

• На панели инструментов Manage Style найти в списке стилей внешней таблицы tablecss.css селектор body, щелкнуть на нем правой кнопкой мыши и выбрать из контекстного меню команду Modify Style.

• В окне изменения стиля выбрать категорию Font, для свойства font-family выбрать значение Georgia, Times New Roman, Times, serif; для свойства font-size выбрать значение small, нажать ОК.

• Сохранить изменения и посмотреть, как изменился внешний вид страниц.

20. В документе «Новые возможности Word» (word.htm) встроить стиль, задающий абзацный отступ слева, для 3-го и 4-го абзацев раздела «Возможность легко избежать орфографических ошибок»:

• Найти в тексте страницы word.htm 3-ий абзац раздела, начинающийся со слов «Некоторые параметры…» и щелкнуть на нем мышью. Затем выполнить команду New Style на панели инструментов стиля.

• В окне команды создания стиля выбрать в качестве селектора первый элемент списка (inline style), затем определить встроенный стиль: категория Box, снять флажок во второй группе свойств margin: Same for all, определить для свойства margin: left значение 80, оставить единицы измерения px (пиксели). Нажать ОК.

• Задать такой же встроенный стиль для следующего абзаца, начинающегося со слов «Все программы…».

• Сохранить все сделанные изменения.

Самостоятельное задание:

21. Создать действующий для всех страниц стиль абзацев DIV, задающий выравнивание по ширине страницы и отступ красной строки размером 40 пикселей (категория Block, свойство text-align, значение justify; свойство text-indent).

22. Создать действующий для всех страниц стиль выделения гиперссылок, обеспечивающий подсветку (изменение цвета фона) ссылки при наведении на нее указателя мыши. Для указания состояния ссылки используются так называемые псевдоклассы (link – еще не просмотренная ссылка, visited – просмотренная ссылка, active – активная, открытая в данный момент, hover – наведен указатель мыши). Псевдокласс указывается в таблице стилей после имени тега через двоеточие. Селектор – псевдокласс a:hover, категория Background, свойство background-color.

23. Создать действующий для всех страниц стиль выделения другим цветом текста уже просмотренных ссылок.

24. Изменить внедренный в страницу «Мой офис» стиль ячеек таблицы td – задать более мелкий шрифт написания текста внутри таблицы (категория Font, свойство font-size).

25. На странице «Мой офис» изменить встроенный в заголовок таблицы стиль ячейки th – задать разреженное написание символов заголовка (категория Block, свойство letter-spacing).

26. На странице «Новые возможности Word» отключить подчеркивание для гиперссылок, находящихся внутри списка с графическим маркером с помощью стиля, основанного на классе.

27. На странице «Новые возможности Word» с помощью стиля, основанного на классе, отключить красную строку для абзацев div с увеличенным отступом слева, находящихся в разделе «Возможность легко избежать орфографических ошибок» (абзацы, начинающиеся со слов «Некоторые параметры…» и «Все программы…»). Категория Block, свойство text-indent.

28. На странице «Новые возможности Excel» заключить встречающиеся в тексте названия приложения и его версий (Microsoft Office Excel 2007, Excel и т.п.) в тег span, а затем определить для этого тега стиль, задающий подчеркнутое написание и курсив (категория Font, свойство font-style).

29. Создать новую таблицу стилей, действующую для страниц word.htm и excel.htm. В таблицу добавить стиль, задающий буквицу – измененное написание первой буквы абзаца (с помощью псевдокласса first-letter тега div): увеличить размер, изменить цвет текста или цвет фона буквицы.

30. Сравнить отображение страниц в разных браузерах (разных версиях браузера) с помощью компонента предпросмотра MS Expression Web SuperPreview:

• Открыть компонент MS Expression Web SuperPreview из главного менюWindows (рис.12).

• В окнах просмотра выбрать браузеры FireFox и Internet Explorer, щелкнув на соответствующих значках мышью. Если FireFox не установлен на локальном компьютере (либо текущая версия не поддерживается SuperPreview), выбрать разные, наиболее различающиеся (например, 6 и 8) версии IE.

• Рис.12. Окно компонента MS Expression Web SuperPreview

• Нажать на кнопку … в строке Location и выбрать файл страницы, которую надо просмотреть (например, office.htm из рабочей папки).

• Используя полосы прокрутки и колесико мыши (для изменения масштаба отображения), сравнить внешний вид страницы в разных браузерах.

• Сменить браузер (версию браузера) в одном из окон просмотра. Для этого щелкнуть на значке крестика × на панели управления соответствующим окном просмотра и выбрать новый браузер (версию).

• Средство предпросмотра Expression Web SuperPreview можно вызвать для выбранной страницы из Expression Web, нажав кнопку .

• Если на компьютере установлены разные локальные браузеры (например, IE и FireFox) – просмотреть страницу в этих браузерах, выполнив в редакторе Expression Web команду Preview/Preview in Multiple Browsers. Чем просмотр с помощью этой команды отличается от режима просмотра SuperPreview?

31. Продемонстрировать страницы преподавателю.