Создание сайта при помощи Front Page 2000. Урок третий. Применение стилей

Анастасия Кулакова, alex_kulakoff@pisem.net

Использование тем FrontPage

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

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

Применение темы к отдельной странице.

1. В списке папок дважды щёлкните на файле index.htm.
2. В меню Format (Формат) выберите команду Theme (Тема). Откроется диалоговое окно Themes (Темы).
3. В списке Themes (Темы), расположенном в левой части окна, щёлкните на теме Artsy (Искусство). В окне просмотра программа покажет, как будут выглядеть элементы страницы, для которой выбрана тема Искусство.
4. В списке Themes (Темы), расположенном в левой части окна, щёлкните на теме Rice Paper (Рисовая бумага). В окне просмотра программа покажет, как будут выглядеть элементы страницы, для которой выбрана тема Рисовая бумага.
5. В списке Themes (Темы), расположенном в левой части окна, щёлкните на теме Expedition (Экспедиция). В окне просмотра программа покажет, как будут выглядеть элементы страницы, для которой выбрана тема Экспедиция.
6. В списке Themes (Темы), расположенном в левой части окна, щёлкните на теме Blank (Бланк). В окне просмотра программа покажет, как будут выглядеть элементы страницы, для которой выбрана тема Бланк.
7. Щёлкните на флажке Background Picture (Фоновое изображение). Флажок будет снят, и вы увидите, как будет выглядеть тема без фонового рисунка.
8. Снова щёлкните на этом флажке, программа отобразит в окне просмотра фоновый рисунок.
9. Нажмите кнопку ОК. FrontPage применит эту тему к странице "Главная" с учётом выбранных вами настроек.
10. Сохраните результаты.

Применение темы к сайту.

1. В меню Format (Формат) выберите команду Theme (Тема). Откроется диалоговое окно Themes (Темы).
2. В списке Themes (Темы), расположенном в левой части окна, щёлкните на теме Blank (Бланк).
3. В верхнем левом углу диалогового окна включите опцию All Pages (Все страницы) и нажмите ОК. Данная тема применится ко всему сайту.
4. Для отмены темы достаточно в этом диалогом окне снять флажки и нажать ОК.

   Изменение темы.

5. В меню Format (Формат) выберите команду Theme (Тема). Откроется диалоговое окно Themes (Темы), в окне просмотра которого будет показан образец текущей темы. В нижнем списке опций включите опцию Vivid colors (Живой цвет).
6. В верхнем левом углу диалогового окна включите опцию All Pages (Все страницы).
7. Нажмите кнопу Modify (Изменить). В диалогом окне появится группа кнопок под общим названием What Would You Like To Modify? (что вы хотели бы изменить?).
8. Щёлкните по кнопке Colors (Цвета), затем нажмите на ярлычке вкладки Custom (Настройки пользователя), а затем - на стрелке поля Item (Элемент). Раскроется этот список - в нём будут перечислены элементы страницы, цвет которых вы можете изменить.
9. Из этого списка выберите параметр Hyperlink (Followed). Затем выберите любой синий цвет. (Hex={00,00,FF})
10. Теперь выберите Hyperlink. Затем выберите любой тёмно-синий цвет. Hex={00,00,99}
11. Выберите параметр Body и установите синеватый цвет. Hex={00,66,CC}
12. Нажмите кнопку ОК. Затем щёлкните на кнопке Graphics (Графика), и снова щёлкните на стрелке поля Item (Элемент). FrontPage отобразит диалоговое окно Modify Theme (Изменить тему) со списком графических элементов, вид которых вы можете изменить.
13. Щёлкните в любом месте окна, чтобы свернуть список. Нажмите кнопку Cancel (Отмена). Затем щёлкните на кнопке Text (Текст). FrontPage отобразит диалоговое окно Modify Theme (Изменить тему) со списком графических элементов, вид которых вы можете изменить.
14. Нажмите кнопку ОК 2 раза и все изменения будут видны на странице.

Использование стилевых таблиц.

Темы - это лишь один из способов изменять внешний вид страниц. Альтернативный способ заключается в использовании стилей (styles) и стилевых таблиц (styles sheets). Стиль представляет собой набор характеристик (размеры, интервалы, цвет) элементов страниц (например, заголовков). Таблица стилей - это набор различных стилей, применяемых к странице.

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

В программе FrontPage существует три способа применения стилей.

1. Вы можете просто щёлкнуть правой кнопкой мышки на каком-либо элементе страницы, выбрать в контекстном меню команду Properties (Свойства) и в открывшемся диалоговом окне, задать требуемые свойства элемента. Такой способ называется заданием встроенного (inline) стиля. Этот способ позволяет изменять внешний вид отдельных элементов страниц. Например, если вы изменили оформление одного абзаца текста, то внешний вид остальных абзацев не изменится.
2. Можно создать таблицу стилей страницы (page header style sheet). В этом случае, когда вы измените оформление элемента страницы (например, заголовка или абзаца) в таблице стилей страницы, изменится и оформление всех элементов этой страницы данного типа. Например, вы можете создать стиль для основного текста, абзацы должны быть выровнены по центру страницы, а сам текст набран шрифтом Arial с размером 36 пунктов и красным цветом. Если вы примените такой стиль к странице, то весь основной текст окажется красного цвета, набран шрифтом Arial с размером 36 пунктов, а абзацы будут выровнены по центру страницы. Для создания таблицы стилей страницы нужно выбрать команду Style (Стиль) из меню Format (Формат), а затем в диалоговом окне Style (Стиль) произвести необходимые изменения.
3. Можно создать внешнюю таблицу стилей и установить связи между ней и отдельными страницами сайта. Это позволит вам изменять стиль нескольких страниц одновременно. Метод создания внешней таблицы можно узнать из справочной системы FrontPage.

Иногда для таблиц стилей используется другое название - "Иерархические таблицы стилей" (или "Cascading Style Sheets"). Название отражает тот факт, что к одной странице может быть применено несколько стилей, так что стили более низкого порядка (определяющие, например, оформление отдельной страницы) будут замещать стили более - высоко порядка (определяющие оформление группы страниц).

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

1. В списке папок дважды щёлкните на файле с именем prod01.htm. В окне просмотра откроется нужная страница.
2. В меню Format (Формат) выберите команду Style (Стиль). Откроется диалоговое окно Style (Стиль).
3. Прокрутите список Styles (Стили), выберите стиль p, а затем нажмите кнопку Modify (Изменить). Откроется диалоговое окно Modify Style (Изменить стиль).
4. Щёлкните по кнопке Format (Формат) и в контекстном меню выберите команду Font (Шрифт). Откроется диалоговое окно Font (Шрифт).
5. Щёлкните на стрелке поля Color (Цвет), выберите какой-нибудь из прямоугольников, закрашенных синим цветом, но так, чтобы сочеталось с цветом ссылок, Century Schoolbook, 14pt, а затем 2 раза нажмите на кнопку ОК. На экране снова появится диалоговое окно Style (Стиль).
6. Закройте это окно. Теперь перед вами изменённая страница. При желании вы можете сохранить результаты, при желании отменить применение стиля. Для этого в диалогом окне Style (Стиль) в поле List (Список) выберите параметр User-defined styles.
7. Нажмите кнопку удалить, а затем закройте все диалоговые окна, нажав кнопку ОК.

Добавление компонентов FrontPage.

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

Компонент	Описание
Comment (Комментарий)	Вставляет в HTML-код страницы комментарий, поясняющий программный код или элементы оформления страницы. Этот компонент не виден при просмотре страницы в браузере.
Page Banner (Баннер) *	Помещает баннер вверху страницы.
Hit Counter (Счётчик посещений) *	Показывает число, соответствующее количеству посещений страницы.
Hover Button (Всплывающая кнопка)	Воспроизводит особый визуальный эффект, когда указатель мышки оказывается расположенным над кнопкой, который заключается в изменении внешнего вида кнопки.
Marquee (Бегущая строка)	Отображает на странице горизонтальную полосу, в которой прокручивается текст.
Include Page (Включаемая страница)	Помещает страницу в определённое место на другой странице. Например, при помощи этого компонента вы можете помещать на каждую страницу об авторских правах.
Scheduled Picture (Рисунок, отображаемый по расписанию) *	Отображает рисунок в течение определённого времени, а затем может заменяться другим рисунком. Компонент полезен, когда необходимо представить пользователям информацию, зависящую от времени.
Substitution (Замещение)	Заменяет часть текста странице.
Categories (Категории)	Вставляет гиперссылки на страницы по категориям. Он полезен при составлении оглавления страниц определённого типа, например, де приводятся отчёты о расходах или планах.
Search Form (Форма поиска) *	Этот компонент позволяет посетителям искать на вашем сайте страницы, содержащие определённые фрагменты текста.
Table of Contents (Содержание) *	Создаёт оглавление сайта.

Но очень многие компоненты FrontPage будут правильно работать, только если сервер, на котором вы размещаете свой сайт, будет поддерживать FrontPage Server Extensions. (Они помечены звёздочкой *).

Например, тот же Navigation bar (Навигационная панель) не будет корректно работать на обыкновенном сервере. Именно поэтому мы в скором времени разберём другой способ создания ссылок на страницы с помощью Hover Button (Всплывающей кнопки).

Применение бегущей строки.

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

1. С помощью панели навигации (Navigation) перейдите на страницу "Творческие успехи".
2. Удалите весь текст, находящийся справа от боковой панели навигации.
3. В меню Insert (Вставка) выберите Component (Компонент) и щёлкните на пункте Marquee(Бегущая строка). Программа отобразит диалоговое окно Marquee Properties(Свойства бегущей строки).
4. В поле Text (Текст) наберите: Творческие и научные успехи!!!
5. В разделе Size (Размер) установите флажок в поле Width (Ширина), а в соответствующем поле наберите 400. Включите опцию In pixels (В пикселях).
6. Установите флажки Alternate. Нажмите кнопку ОК.
7. Для форматирования текста бегущей строки, щёлкните правой кнопкой мыши на ней, после чего в контекстном меню выберите пункт Font (Шрифт).
8. Выберите любой синий цвет.

   Пункты являются мерой высоты шрифта: в одном дюйме содержится 72 пункта. То есть, высота символа размером 72 пункта - 1 дюйм, символ размером 12 пунктов - одна шестая дюйма.

9. Нажмите ОК. Сохраните результаты. Просмотрите страницу в браузере, нажав на панели инструментов иконку Preview In Browser (Просмотреть в браузере).

Создание страницы "Деканат".

Теперь создадим страницу "Деканат". Для этого:

1. Откройте файл serv01.htm в режиме Page (Страница).
2. Удалите все комментарии и текст, следующий ниже до нижней таблицы.
3. Установите курсор на уровне верхней кнопки навигационной панели.
4. Наберите слово Деканат.
5. Теперь войдите в свойства этой страницы, щёлкнув правой кнопкой мышки, и в появившемся меню выберите Page Properties…(Свойства страницы). Значение Title (Название) укажите "МГОПУ Деканат".
6. На вкладке Language (Язык) параметр Page language (Язык страницы) укажите Russian (Русский), а HTML encoding (кодировка HTML) - Cyrillic (Кириллица). Нажмите ОК. Теперь вы спокойно печатать на русском языке и Front Page не будет считать слова за ошибки.
7. Сохраните результаты.

Использование таблиц для упорядочивания элементов на странице.

На многих страницах информация представлена в виде одного столбца. Они могут содержать текст или графические элементы, выровненные по левому краю, по правому или по центру, но все элементы этих страниц располагаются последовательно один за другим, а не рядом, по горизонтали. Для того чтобы отобразить фотографию и пояснение к ней рядом, на одном уровне, вы можете воспользоваться таблицей. Добавим теперь таблицу на страницу "Деканат".

1. Откройте файл serv01.htm. Удалите все комментарии и то, что расположено ниже, до нижней таблицы.
2. Как вставлять таблицу вы уже знаете, поэтому это не должно составить для вас особых затруднений. Создайте таблицу из 2 столбцов и 4 строк. Если будут затруднения, то:
   1. Щёлкните на строке, следующей после названия страницы. В меню Table (Таблица) нажмите пункт Insert (Вставка) и выберите команду Table (Таблица). Откроется диалоговое окно Insert Table (Вставить таблицу).
   2. В текстовом поле Rows (Число строк) удалите присутствующее там число 2 и наберите число 3, в поле Cols (Число столбцов) наберите 3, затем выберите параметр Specify width (Специальная ширина) и установит опцию In percent (В процентах). Таким образом наша таблица будет ровно и правильно отображаться при любых разрешениях экрана монитора. Нажмите кнопку ОК.
   3. Сохраните результаты.
3. Щёлкните на верхней ячейке правого столбца и наберите: Декан факультета, преподаватель экономики.
4. В правую верхнюю ячейку таблицы наберите текст: Жуковский Владимир Яковлевич. Доктор экономических наук, профессор.
5. Во второй ячейке 2 столбца наберите: Заместитель декана по учебной части.
6. Во второй ячейке правого столбца наберите: Лаврова Наталья Николаевна.
7. В третьей ячейке 2 столбца наберите: Заместитель декана по воспитательной работе.
8. В третьей ячейке правого столбца наберите: Елена Алексеевна.
9. Выделите текст в ячейках, щёлкните правой кнопкой мышки на выделенной области и в открывшемся контекстном меню выберите команду Cell Properties (Свойства ячейки). Откроется диалоговое окно Cell Properties (Свойства ячейки).
10. Щёлкните на стрелке поля Horizontal Alignment (Горизонтальное выравнивание), выберите пункт Center (Центр).
11. Свойство Background(Фон) установите на любой серый цвет.
12. Нажмите кнопку ОК.

Создадим страницу "День открытых дверей".

1. На панели Navigation (навигация) выберите страницу "День открытых дверей". Двойным щелчком мышки откройте её в редакторе и удалите весь текст, который находится справа от навигационной панели до нашей нижней таблицы.
2. Теперь войдите в свойства этой страницы, щёлкнув правой кнопкой мышки, и в появившемся меню выберите Page Properties…(Свойства страницы). Значение Title (Название) укажите "МГОПУ День открытых дверей".
3. На вкладке Language (Язык) параметр Page language (Язык страницы) укажите Russian (Русский), а HTML encoding (кодировка HTML) - Cyrillic (Кириллица). Нажмите ОК. Теперь вы спокойно печатать на русском языке и Front Page не будет считать слова за ошибки.
4. В свободное место можно поместить такой текст:
   День открытых дверей в 2001 году: 11 марта
   День открытых дверей проход по адресу расположения университета: 109444 г. Москва, ул. Ташкентская, 16.
   Проезд:
   м. "Выхино", далее авт. 209 (ост. "Универсам"), 169 (на 2ой ост. после ост. "Универсам");
   здание средней школы -- "самолётик".
   Дополнительную информацию смотрите на странице Деканат.
5. Выделите строку День открытых дверей в 2001 году: и примените к ней жирный шрифт.
6. Выделите внизу текста слово "Деканат" и создайте ссылку на страницу serv01.htm. (Вспоминая прошлый урок).
7. Сохраните результаты. Вторая страница общей темы готова.

Продолжение следует...

Интернет-проект "От Анастасии", http://nasta.virtualave.net