Текст книги "Интернет. Быстрый старт"

Главное – это стиль…

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

Но ведь FrontPage 2000 содержит библиотеку стилей. Когда мы говорили об оформлении текста, мы пользовались его стандартной коллекцией стилей. Определения этих стилей действуют в пределах одного документа. Использование подобных локальных решений позволяет эффективно автоматизировать работу. Теперь, вместо того, чтобы во всем документе отыскивать текстовые элементы и изменять их атрибуты, достаточно один раз отредактировать соответствующий стиль, и вся Web-страница приобретет требуемый вид. Это второй вариант стилевого оформления сайта.

Однако есть и третий путь. Для сайта может быть разработано единое стилевое оформление, которое записывается в общий файл. Этот объединенный файл потом использует каждый HTML-документ, входящий в состав сайта. Подобные файлы называются каскадными таблицами стилей (CSS – Cascading Style Sheets). Мы рассмотрим оба последних варианта работы со стилями.

Итак, предположим, что у вас уже есть спроектированная Web-страница и вам необходимо исправить оформление заголовков первого уровня. Для этого вы должны отредактировать уже существующий стиль Heading 1 (Заголовок 1). Сначала необходимо выполнить команду Format/Style (Формат/ Стиль). При этом будет активизировано диалоговое окно Style (Стиль), показанное на рис. 8.33.

Рис. 8.33. Диалоговое окно Style

В списке Styles (Стили) показаны все тэги HTML, которые распознаются и используются FrontPage 2000. В этом списке вам необходимо выбрать тот тэг, который ответственен за создание заголовка первого уровня. Это, естественно, h1. Теперь вы можете его изменить. Для этого надо использовать кнопку Modify (Изменить), которая визуализирует очередное диалоговое окно Modify Style (Изменить стиль). Само по себе это окно не очень информативно. В поле Name (Наименование) отображается тэг, стилевое оформление которого вы собираетесь модифицировать, в блоке Preview (Предварительный просмотр) весьма схематично показывается внешний вид нового текстового оформления. Вам в этом окошке потребуется кнопка Format (Формат). Будучи нажатой, она показывает меню из пяти пунктов, каждый из которых является частью внешнего оформления текстового блока. Пункт Font (Шрифт) позволяет изменять шрифт, приписанный к этому стилю. Альтернатива Paragraph (Абзац) показывает диалоговое окно, которое позволяет управлять отступами и выравниванием. Пункт Border (Граница) ответственен за указание внешнего вида границ. Пункт Numbering (Нумерация) применяется в том случае, если необходимо использовать какие-либо списки, а следовательно, требуется выставить параметры их отображения. И наконец, альтернатива меню Position (Позиционирование) позволяет указывать правила точного позиционирования текста. Все эти действия производятся при помощи стандартных диалоговых окон, и работа с ними не представляет каких-нибудь затруднений. После изменения параметров какой-либо части текстового оформления результат должен показываться в окошке предварительного просмотра Preview (Предварительный просмотр). Но весьма часто получается так, что эти изменения достаточно малы и внешний вид демонстрируемого текста отличается от предыдущего варианта не слишком сильно. Здесь, конечно же, спасает только просмотр созданной страницы при помощи браузера. После завершения всей работы достаточно нажать кнопки ОК во всех диалоговых окнах и посмотреть на результаты своей работы. Если вы точно знали, что делали, они не должны вас сильно разочаровать. Все заголовки первого уровня должны изменить свой вид. Теперь посмотрим, какой ценой это было достигнуто, т. е., что изменилось в HTML-представлении вашей страницы. Если вы перейдете на соответствующую страницу и посмотрите код, то увидите, что появился новый блок кода:

<style>

<!–

h1 { font-family: Arial; text-transform: uppercase; font-weight: bold }

–>

</style>

Итак, все локальные определения стилей для данного документа размещаются в теле документа, сразу после тэга <body>. Блок определения стилей ограничен тэгами <styie> и </styie>. В самом блоке FrontPage 2000 помещает идентификаторы стилей, в данном случае это h1, а в фигурных скобках описывает их оформление. В вышеприведенном коде указано, что для отображения заголовков первого уровня будет использоваться шрифт из семейства Arial (font-family: Arial), а текст при этом будет отображаться только заглавными буквами (text-transform: uppercase) полужирного начертания (font-weight: bold).

Таким способом вы можете изменить любой стиль, используемый при работе с FrontPage 2000. Вполне вероятно, что этого будет недостаточно. Что ж, вы имеете возможность создавать и применять свои стили. В диалоговом окне, вид которого показан на рис. 8.33, вы видите выпадающий список List, который управляет отображаемым списком стилей. По умолчанию используется режим All HTML tags (Все тэги HTML), который показывает все тэги HTML. Но в списке List есть еще значение User-defined styles (Стили, определяемые пользователем), которое визуализирует список всех стилей, созданных или модифицированных пользователем. После того как вы изменили стиль h1, он должен отобразиться в этом списке. Если вы нажмете кнопку New (Новый), то сможете создать свой собственный стиль. Для создания стиля используется диалоговое окно New Style (Новый стиль), которое является полным функциональным аналогом диалогового окна Modify Style (Изменить стиль), рассмотренного ранее. Прежде чем приступать к заданию параметров текстового оформления стиля при помощи кнопки Format (Формат), стоит указать имя нового стиля, под которым он будет использоваться в коллекции стилей FrontPage 2000. Для этого, как всегда, используется поле ввода Name (Наименование). Если вы правильно выполните все действия, то в списке стилей вы сможете увидеть свой, только что определенный стиль. Стили, создаваемые пользователем, в терминологии FrontPage называются классами, и родительским классом для них является стиль Normal. Поэтому если вы создали стиль ms1, его полное имя будет выглядеть как Normal.ms1. Часто имя родительского класса опускается. Поэтому если вы будете рассматривать HTML-реализацию определения стиля, то его имя будет".ms1". Впрочем, это легко увидеть из нижеприведенного кода.

<style>

<!–

.ms1 { text-align: Right; line-height: 200 %; font-family: Century Gothic;

font-style: italic }

–>

</style>

Здесь в качестве стиля определен текст, прижатый к правому краю страницы, отображаемый шрифтом Century Gothic с курсивным начертанием. Также используется двойной межстрочный интервал. Если же вы обратите внимание на текст, которому приписан данный стиль, то увидите следующую конструкцию:

<р class="ms1">Эпиграф</p>

Здесь у тэга <р> появляется параметр class, в качестве значения которого используется имя определенного выше класса. Все достаточно стройно и логично.

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

Как вы помните, при создании встроенного стиля происходит расширение стиля Normal, но у вас всегда есть возможность расширить и остальные стили, которые заданы изначально. Так, например, если вы будете делать ненумерованный список, а потом вызовете команду Format (Формат) для одного из его пунктов, в появившемся диалоговом окне вы увидите уже знакомую кнопку Style (Стиль), при нажатии на которую отобразится диалоговое окно, позволяющее напрямую задать тот стиль, который был ранее объявлен в данном документе. Если вы припишете элементу списка ваш стиль nisi подобным образом, то он будет отображен при помощи стиля Bulleted list.ms1.

Однако необходимо напомнить, что стили, определенные в одном документе, не могут использоваться в оформлении других Web-страниц. Другие документы их просто не видят. Естественно, рассмотренное решение не очень хорошо подходит для оформления всего сайта. Нам бы хотелось определить необходимые стили сразу для всех страниц, входящих в состав сайта. Для этих целей идеально подходят файлы CSS (Cascading Style Sheets) – каскадные таблицы стилей. В этих файлах, которые представляют собой неотображаемые документы, содержатся объявления всех стилей, применяемых для оформления Web-страниц. Останется только подключить эти таблицы к HTML-файлам, и стили будут доступны для использования. FrontPage 2000 создает подобные файлы в виде специальных страниц. Для создания нового файла со стилевой таблицей необходимо выполнить команду меню File/ New/Page (Файл/Создать/Страница) и в появившемся диалоговом окне выбрать вкладку Style Sheets (Таблица стилей). На ней вы увидите список готовых стилевых таблиц. Для начала рассмотрим создание собственной таблицы стилей, а уже после этого проведем обзор ранее заданных решений.

Для создания своей собственной каскадной таблицы стилей в диалоговом окне New (Создать) необходимо выбрать образец Normal Style Sheet (Обычная стилевая таблица). При этом создается пустая страница с именем по умолчанию new_page_x.css, где в качестве х указывается номер создаваемой страницы. При создании страницы активизируется инструментальная панель Style (Стиль) с одноименной кнопкой, при нажатии на которую появляется уже знакомое вам диалоговое окно Style (Стиль), используемое для создания новых и переопределения уже существующих стилей. После внесения необходимых изменений на странице HTML появляется список всех измененных и созданных стилей вместе с их определениями. Выглядит это следующим образом:

big { font-size: 18pt }

ms2 { font-family: Matisse ITC; font-size: 12pt; font-weight: bold }

h1 { font-family: Arial; text-transform: uppercase; font-weight: bold }

h3 { font-family: Times New Roman; color: #0000FF }

Здесь указано, что был переопределен способ отображения укрупненного текста (тэг <big>). Теперь он будет отображаться шрифтом с размером 18 пунктов. Определен свой собственный стиль ms2, которому приписан шрифт Matisse ITC, размер 12 пунктов, полужирное начертание. Также были переопределены стили для отображения заголовков первого (h1) и второго (h2) уровней. Для первого был указан шрифт семейства Arial в полужирном начертании, причем все буквы текста с этим стилем автоматически будут преобразованы в заглавные (text-transform: uppercase). Для заголовков второго уровня зарезервирован шрифт Times New Roman, текст отображается синим цветом (color: #0000ff). Остальные параметры этого стиля не изменены. Если вы сохраните эту страницу и просмотрите ее обычным текстовым редактором, то увидите, что вышеприведенный текст и является ее кодом.

Теперь попробуем подключить созданную стилевую таблицу к какой-либо Web-странице. Для этого необходимо в обычном режиме работы выполнить команду меню Format/Style Sheet Links (Формат/Ссылки на стилевые таблицы). При этом активизируется диалоговое окно Link Style Sheet (Ссылка на стилевую страницу), показанное на рис. 8.34. В нем вы можете указать, будет подключаться стилевая таблица ко всем страницам сайта (альтернатива All pages (Все страницы)) или к ограниченному их количеству (переключатель Selected page(s) (Выбранная страница(ы)). Имена файлов подключаемых внешних стилевых таблиц (а подключать можно сразу несколько таблиц) отображаются в основном списке URL. Естественно, вы указываете не просто имена, а местонахождение этих файлов, поэтому у вас есть возможность подключать таблицы прямо из Интернета. Но делать этого не стоит, если вы заботитесь об удобстве работы с сайтом, а лучше все подключаемые ресурсы держать непосредственно на сервере.

Рис. 8.34. Диалоговое окно Link Style Sheet

Для добавления файла в список доступных стилевых таблиц нужно нажать кнопку Add (Добавить), которая активизирует стандартный диалог для подключения гиперссылки. Для удаления файла из этого списка используется кнопка Remove (Удалить). Для изменения порядка расположения файлов применяются кнопки Move Up (Переместить вверх) и Move Down (Переместить вниз). Это удобно в том случае, если в нескольких стилевых таблицах есть переопределение одного и того же стиля. Тогда в документе будет использовано то определение, которое расположено последним.

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

Для подключения внешних стилевых таблиц используется HTML-koh – струкция:

<link rel="stylesheet" type="text/css" href="s1.css">.

Здесь вы видите основной тэг <link> и несколько параметров. Параметр rei указывает на содержание подключаемого ресурса. В данном случае ему приписано значение «stylesheet», идентифицирующее подключаемый ресурс как таблицу стилей. Для указания типа файла, в котором эта таблица стилей содержится, использован параметр type со значением «text/ess». И наконец, самый главный параметр – href. В качестве его значения записывается URL файла с подключаемой таблицей.

Мы рассмотрели возможности создания собственных внешних каскадных таблиц стилей. Теперь пришла очередь стилевых таблиц, которые входят в коллекцию FrontPage 2000. Для использования какой-либо, заранее приготовленной разработчиками каскадной таблицы необходимо, как и прежде, выполнить команду меню File/New/Page (Файл/Создать/Страница) и перейти на вкладку Style Sheets (Стилевые таблицы). Все элементы списка за исключением уже рассмотренного нами Normal Style Sheet (Обычная стилевая страница) являются готовыми таблицами. Обзор будем производить в алфавитном порядке.

Таблица Arcs (Дуги) предназначена для оформления страниц в желто-коричневом цвете. Основной текст записывается шрифтом Verdana коричневого цвета. Используется следующая конструкция:

body

{

font-family: Verdana, Arial, Helvetica;

background-color: rgb(255,255,204);

color: rgb(102,102,51);

}

Здесь видно, что при отсутствии на компьютере посетителя сайта шрифта Verdana необходимо использовать шрифт семейства Arial. А если нет даже его – шрифт Helvetica. Цвет шрифта и фона задается прямым указанием его RGB-кода. Также в этой таблице присутствуют стили всех заголовков. Для них зарезервированы шрифты семейства Times. Также для каждого уровня заголовка указан цвет шрифта. А в самом начале стилевой таблицы объявляется стиль для тэга <а>. Как вы, наверное, помните, этот тэг применяется для создания гиперссылок. У всех гиперссылок есть три состояния: обычное отображение, пройденная гиперссылка и активная. Обычное отображение задается классом a: link, для пройденной заготовлен класс a: visited, а активная гиперссылка отображается при помощи класса a: active. В нашей стилевой таблице не налагается каких-либо условий на выбор шрифта для отображения гиперссылок. В определениях этих классов задан только цвет шрифта.

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

Стилевая таблица Blocks (Блоки) для основного текста и для заголовков применяет шрифт Bookman Old Style. Но гиперссылки оформляются при помощи красного цвета, а сам фон страниц приобретает светло-серебряный цвет. Сочетание достаточно агрессивное. Но нельзя не признать, что вкус присутствует.

Таблица Blueprint (Светокопия) на желтом фоне отображает текст и заголовки при помощи шрифта Century Gothic. Для гиперссылок предусмотрен темно-красный, практически пурпурный цвет. Как выглядит красное на желтом, думается, каждый может себе представить.

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

Стилевая таблица Downtown (Центр города) для обычного текста использует шрифт Garamond желтого цвета, для заголовков – шрифт Verdana, фон обещает быть синим, а гиперссылки – оранжевыми. Опять контраст.

Следующая по очереди (или по алфавиту) – каскадная стилевая таблица Expedition (Экспедиция). Очень сдержанный образец оформления. На персиковом фоне отображается содержимое страницы шрифтом Book Antiqua.

Одна из наиболее агрессивных схем оформления носит название Highway (Шоссе). На черном фоне отображается белый текст, набранный шрифтом Verdana. Гиперссылки – оранжевые. Без комментариев.

Но еще сильнее выражает эту идею оформления стилевая таблица Neon (Неон). Текст отображается ядовито-зеленым цветом на черном фоне. Шрифт, как и в предыдущей схеме, – Verdana. Что тут можно сказать? Неон, он и есть неон.

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

Схема Street (Уличный) используется для неформального оформления страниц. Подобный эффект достигается использованием шрифта Verdana для основного текста и Comic Sans MS для заголовков.

И последняя стилевая таблица Sweets (Конфеты) для текста использует лаконичный Arial, а для заголовков его несколько более претенциозную версию – Arial Rounded МТ Bold. Все это великолепие отображается на нежном желтом фоне страницы.

Необходимо отметить, что все эти схемы напрямую рассчитаны на удаленного пользователя, работающего на платформе Wintel (Windows + Intel), т. к. большинство из применяемых шрифтов наиболее распространены именно там.

На этом обзор предустановленных каскадных стилевых таблиц заканчивается. Но в данной главе необходимо рассмотреть еще один вариант единообразного оформления страниц. Он основан на применении так называемых тем оформления. С этим понятием сталкивался любой пользователь пакета MS Plus. В нем содержались комплекты настроек для внешнего вида Windows, включавшие в себя фон рабочего стола, стандартные иконки, обычные и анимированные курсоры, звуковые схемы, хранители экрана и т. д. Все эти компоненты были подобраны таким образом, чтобы создавать стилевое единство. Подобная концепция была перенесена и в семейство MS Office. Так, например, в известном всем MS Word есть свои темы оформления для текстовых документов. Естественно, что FrontPage 2000 как член семейства MS Office перенял эту возможность. Для оформления текущей страницы или всех Web-страниц, входящих в состав проектируемого сайта, с применением какой-либо темы необходимо выполнить команду меню Format/Theme (Формат/Тема). При этом активизируется диалоговое окно Themes (Темы), показанное на рис. 8.35.

Рис. 8.35. Диалоговое окно Themes

Прежде всего, необходимо указать границы применения темы оформления при помощи двух переключателей Apply Theme to (Применить тему к…), которые могут быть использованы в пределах только одной или нескольких выбранных страниц (альтернатива Selected page(s)). В том случае, если планируется данное оформление применить ко всему сайту, а это достаточно логичное решение, необходимо установить переключатель All pages (Все страницы). После указания границ распространения можно из основного списка выбрать саму тему. При перемещении по списку в окне предварительного просмотра Preview (Предварительный просмотр) показывается образец текущей темы. На рисунке виден образец темы Blank.

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

Любую тему оформления пользователь может изменить по своему вкусу. Для этого используется кнопка Modify (Изменить). При нажатии на нее в окне появляются пять дополнительных кнопок. Сама тема всегда состоит из цветовой схемы, набора применяемых рисунков и предустановленного шрифтового оформления. Все эти наборы объектов изменяются при помощи специальных диалоговых окон, активизируемых кнопками Colors (Цвета), Graphics (Рисунки) и Text (Текст), соответственно. После изменения необходимых параметров схему можно сохранить при помощи кнопки Save (Сохранить) или записать под другим именем при помощи кнопки Save As (Сохранить как). Естественно, после сохранения под другим именем образуется новая тема, которая также потом будет предлагаться в общем списке, так что у пользователя всегда есть возможность создать свою тему оформления. Искренне рекомендуем воспользоваться этой возможностью, т. к. эксклюзивный дизайн всегда ценится выше.

Как только вы выбрали необходимую тему оформления, в HTML-коде создаваемой Web-страницы, сразу после раздела заголовка, появляется тэг

<meta name="Microsoft Theme" content="blank 1111, default">.

Вид этого тэга должен навести вас на некоторые размышления. С тэгами <meta> вы уже встречались и, наверняка, помните, что они обрабатываются браузером в самом начале работы и несут в себе информацию, которая должна помочь правильному отображению загруженной Web-страницы. В этом тэге обычно присутствуют параметры name и content. Первый указывает категорию оформления, а второй – конкретное значение из этой категории. Как вы видите, в данном случае оба этих параметра присутствуют. Но значение параметра name равно «Microsoft Theme». То есть, если на машине удаленного пользователя есть Microsoft Office с установленными темами и он использует Internet Explorer, оформление Web-страницы гарантированно будет таким, как вы задумали. Но если посетитель вашего сайта «сидит» на Макинтоше, то вероятность адекватного отображения страницы резко падает. Радует только то, что те тэги, которые браузер не может опознать, просто игнорируются. Следовательно, в этом случае пострадает только оформление, а «начинка» страницы останется на месте. Упомянутая особенность является частью достаточно основательной проблемы. Каждый браузер поддерживает свое, отличающееся от других, подмножество тэгов HTML. Поэтому, если вы собираетесь создавать сайт, который гарантированно будет правильно и адекватно отображаться на всех типах систем, вам следует пользоваться наиболее распространенными тэгами и системно-независимыми средствами обобщенного оформления. Лучше всего использовать каскадные стилевые таблицы. Действительно, темы сильно облегчают и ускоряют процесс единообразного оформления сайта, но они не оригинальны. Вы же не хотите, чтобы посетители сайта увидели оформление, которое очень часто встречается в Интернете. Если хочется действительно оригинального и стильного оформления, придется достаточно много поработать.

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