Личный сайт с нуля силами FrontPage 2000
Оформление Web-страниц с помощью FrontPage 2000
Использование фона с другой страницы
Наложение изображения на текст
В предыдущей статье, опубликованной под тем же заголовком, мы рассказали, как создать шаблон Web-узла и за считанные минуты на его основе представить костяк персонального сайта. Вполне возможно, что одной статьи и нескольких часов времени достаточно, чтобы сделать личный сайт, который будет выглядеть, как и сотни других, собранных, что называется, на конвейере. Однако чем лучше вы будете владеть возможностями FrontPage 2000, тем менее шаблонно и более творчески сможете подойти к оформлению ваших страниц. В данной статье мы продолжим знакомство с программой и поговорим об оформлении Web-страниц с помощью FrontPage 2000.
Оформление Web-страниц с помощью FrontPage 2000
Откроем новую страницу в программе FrontPage 2000, вставим в нее файл, созданный программой Word, или наберем вручную необходимый на данной странице тест и посмотрим, какие возможности для его форматирования предлагает программа FrontPage 2000.
 |
|
Параметры шрифта
Следует сразу предупредить начинающего Web-дизайнера: гарантировать, что текст вашей страницы будет смотреться одинаково во всех браузерах, невозможно, хотя к этому следует стремиться. Помимо устаревших версий браузера, которые не отражают всех тонкостей примененого вами форматирования, можно привести пример, когда представленный вами текст будет отображаться по-разному и в современных браузерах. На рис. 1 показан выделенный текст, к которому применяется процедура изменения шрифта. Выполнить данную команду можно различными способами, например FormatХFont или путем нажатия клавиш Alt+Enter. На вкладке рис. 1 видно, что параметры шрифта выделенного текста выбираются по умолчанию. Большинство браузеров имеют настройку, которая определяет шрифт, используемый по умолчанию, и именно этим шрифтом отразят данный текст. Конечно, можно выбрать шрифт из тех, что доступны в меню (см. рис. 1), например Photoshop small, но если этот шрифт отсутствует на машине, с которой ведется просмотр вашей странички, то текст будет показан шрифтом по умолчанию. Поэтому следует выбирать не экзотические шрифты, а те, что доступны повсеместно.
Выбор размера шрифта и шрифтовых эффектов не представляет особого труда и читатель легко разберется, как применить эти функции. Возможно, следует обратить внимание на то, что выделение заголовка подчеркиванием, как это сделано на рис. 1 (подчеркнут заголовок «Стихи разных лет»), — не самое удачное решение, поскольку обычно так выделяются гиперссылки. И если в оформленных заголовках невозможно отличить, где стоит гиперссылка, а где это просто подчеркивание, то это наверняка будет раздражать посетителей сайта. То же самое можно сказать и о выборе цвета — цвет гиперссылок для других частей текста лучше не использовать. Тем более что возможности по выбору цвета для шрифта в FrontPage 2000 действительно широкие.
|
|
Выбор цвета шрифта
Если вы хотите выделить цветом текст заголовка «Стихи разных лет» (рис. 2), выделите данную фразу, во вкладке Font откройте меню Color (здесь вам будет доступна палитра из 16 стандартных цветов) и выберите цвет для заголовка. После того как вы сделаете заголовок цветным, в разделе Document’s Colors добавится данный цвет. В следующий раз, когда вы захотите сделать заголовок такого же цвета, его можно будет выбрать из палитры использованных в документе цветов.
Если 16 цветов стандартной палитры недостаточно, можно обратиться к пункту More Colors (см. рис. 2), что приведет к появлению одноименной панели, предоставляющей более широкий выбор (рис. 3). Кроме того, если щелкнуть мышью на кнопке Custom, то откроется вкладка Цвет, в которой можно создать собственную палитру, автоматически добавляемую в раздел Custom Colors (см. рис. 2).
|
|
Создание фона
Заливка фона цветом
Самый простой вариант изменения фона — это заливка фона цветом. Для выполнения данной процедуры выполните команду FormatХBackground, в результате чего появится панель Page Properties с открытой вкладкой Background (рис. 4).
Вы можете выбрать темный фон, а шрифт сделать светлым.
Если для фона выбрать темно-синий цвет, а для шрифта — белый, то страница примет вид, как показано на рис. 5. Следует отметить, что для выбора цвета фона существуют те же возможности, что и для выбора цвета шрифта.
Вероятно, читатель уже убедился, что программа представляет весьма широкие возможности по выбору сочетания цветов. Однако следует напомнить, что чрезмерное увлечение использованием цвета — занятие рискованное. Если при написании текста черным по белому контрастность максимальна, то при других сочетаниях цвета читаемость текста снижается. Для того чтобы определиться с контрастностью, можно скопировать цветное изображение и перевести его в любом графическом редакторе в изображение «градации серого» — это поможет принять решение. Следует избегать использования светлого шрифта на темном фоне для больших объемов текста. Во-первых, читать такой текст, да еще в больших объемах, достаточно утомительно. Во-вторых, может возникнуть ситуация некорректной загрузки фона (например, когда фон загружается с запозданием), а светлый текст на темном фоне вообще не будет виден, пока не загрузится фон.
|
|
Фоновый рисунок
Если просто цветной гладкий фон вас не устраивает, то для создания оригинального фона можно прибегнуть к помощи графического файла. Сразу следует заметить, что данный файл должен быть небольшим по объему. Чем он будет меньше, тем быстрее будет загружаться в браузер и, следовательно, тем скорее будет открываться ваша страница. Хотя строгого ограничения на размер страницы не существует, лучше ориентироваться на объем 100 Кбайт — с учетом как HTML-текста, так и всех графических элементов. Даже если в процессе разработки страницы у вас создается впечатление, что загрузка происходит очень быстро, не стоит забывать, что скорость загрузки по Сети намного меньше, чем скорость загрузки с жесткого диска.
Итак, если вы хотите поместить фоновый рисунок, его для начала нужно выбрать из какой-либо библиотеки или создать самому. Например, вы можете сгенерировать этот рисунок средствами Photoshop, используя фильтр создания текстур. Создав необходимый файл, вернемся к программе FrontPage, а именно к вкладке Background (см. рис. 4). Поставьте флажок в окошке Background Picture, после чего активизируется кнопка Brouse, щелкнув по которой, вы активизируете панель Select Background Picture — Выберите фоновую картинку (рис. 6). На данной панели имеется две кнопки-иконки «увеличительное стекло на фоне земного шара», с помощью которой осуществляется поиск файла по Сети, и кнопка «увеличительное стекло на фоне папки», используя которую можно искать файл на вашем жестком диске. Нажав на данную кнопку, вы получите доступ к панели Select File (рис. 6) и сможете выбрать необходимый файл с жесткого диска. В нашем примере это предварительно созданный файл лист1.jpg.
Применив данный файл в качестве фонового, вы получите изображение, как на рис. 7.
Как известно, фон генерируется путем многократного повторения выбранного вами изображения. Следует отметить, что фон на рис. 7 выбран неудачно. Вместо однородного бесшовного полотна получилась картинка, на которой видны стыки, как при сшивании лоскутков. Во избежание подобного эффекта следует изменить выбранный рисунок так, чтобы элементы стыковались бесшовно. Второй недостаток полученного фона заключается в том, что интенсивность его цвета слишком велика, и поэтому текст на таком фоне плохо читается.
Отредактируем файл с фоновой картинкой — сделаем изображение более равномерным и ослабим интенсивность цвета, в результате исчезнет мозаичность фона и читаемость текста улучшится (рис. 8).
Иногда согласно замыслу оформления необходим фоновый рисунок большого формата. В этом случае особое внимание следует обращать на размер файла и выбирать изображение, содержащее минимальное количество цветов, что позволит его максимально сжать. Так, например, на рис. 9 фоновый рисунок, сохраненный в формате JPG, в режиме большого сжатия занимает менее 15 Кбайт, что вполне допустимо.
|
|
Использование фона с другой страницы
Если вы хотите, чтобы несколько страниц вашего узла имели одинаковый фон, этого легко добиться с помощью функции Get background information from another page (Импорт фоновой информации с другой страницы). При наличии нескольких ссылок на одну страницу с определенным фоном можно изменить фон сразу всех этих страниц, поменяв фон той страницы, на которую сделаны ссылки.
|
|
Размещение графических файлов
Вставить графическое изображение на страницу с помощью FrontPage очень просто. Для этого необходимо выполнить команду InsertХ PictureХFrom File, в результате чего появится панель Picture, пользуясь которой можно выбрать интересующий вас файл, получив доступ к ресурсам вашего жесткого диска и к ресурсам Сети (рис. 10).
Внедряя графический файл, помните, что его увеличение средствами FrontPage приводит к потере качества изображения. Поэтому лучше изменить размеры в графическом редакторе и внедрить изображение заново. Все изображения лучше сохранять в одной папке, например в папке Images, которая, кстати, создается программой автоматически. Добавление графических изображений можно комбинировать с фоном (рис. 11).
|
|
Наложение изображения на текст
Размещая изображение на странице с текстом, вы можете определить так называемую z-координату изображения. Координата z направлена перпендикулярно плоскости изображения, и индекс по этой оси определяет, что расположено сверху: текст поверх изображения или изображение поверх текста. Чтобы подложить изображение под текст, следует выполнить команду ViewХToolbarsХPositioning, что приведет к появлению одноименной панели, на которой следует нажать предпоследнюю кнопку справа (рис. 12). Если подвести к этой кнопке курсор, программа выдаст подсказку о ее назначении — Send Backward. Для того чтобы наложить изображение поверх текста, следует нажать последнюю кнопку (Вring Forward). Учтите, не все браузеры понимают порядок наложения (z-упорядочивание).
В принципе, если панель ViewХTool BarsХ Pictures активизирована, то эти иконки уже доступны на нижней панели (см. рис. 12). Кроме того, на данной панели доступны инструменты, которыми можно поворачивать и кадрировать картинку, менять ее контрастность, яркость и т.д. Активизировав рисунок и нажимая на кнопки данного ряда, легко понять, какие действия при этом производятся с рисунком.
|
|
Внедрение горизонтальной линии
Чтобы отделить один информационный блок от другого, удобно использовать горизонтальные линии. Например, вы хотите добавить в конце странички информацию об авторских правах на публикуемый материал и отделить эту информацию от текста страницы. Выполните команду InsertХHorizontal Line, и на странице появится горизонтальная линия (рис. 13), затем для внесения упоминания об авторском праве вам понадобится значок копирайта, для введения которого достаточно выполнить команду InsertХSymbol, в результате чего появится панель Symbol, в которой следует выбрать данный символ.
Итак, мы кратко рассмотрели основные возможности программы FrontPage 2000, которые позволят отформатировать страницу, внедрить графические элементы и сделать ее наглядной и привлекательной.
КомпьютерПресс 5'2001
