Поиск

Собственная Web-страница

Большинство пользователей, имеющих постоянное подключение к Интернету, имеют возможность создать личную страничку объемом несколько Мбайт. Это очень хорошая возможность, и грех ею не воспользоваться. С чего начать? Что делать? Думаю, в первую очередь создатель страницы должен ответить для себя на два других вопроса. Вопервых, какова цель создания страницы, какие функции она будет выполнять? А вовторых, каким образом люди будут находить эту стра ницу среди миллионов подобных?

Когда вышла книга «HTML в примерах» («Питер», 1997), я создал страничку которая предназначалась, в первую очередь, для пользователей, желающих само стоятельно создавать свои Webстраницы и другие гипертекстовые документы Причем акцент делался на непосредственное использование языка гипертексто вой разметки HTML, а не на применение сложных гипертекстовых редакторов хотя этот подход тоже обсуждался. В книге был опубликован адрес этой Webстра ницы, которая работала одновременно как электронное приложение и как реаль но действующий пример. Поскольку страница была оборудована электронной почтой, я получил много отзывов от читателей. Надо сказать, что идея «народно го» HTML — с Блокнотом и графическим редактором Paint — многим пришлас! по душе. И почти во всех письмах содержались вопросы по оформлению Web страниц. Большая часть вопросов относилась к области, которую принято назы вать «быстрым стартом». Читатели в первую очередь интересовались, как начат! работу по созданию Webстраниц, а с изучением самого языка (как я понял и; писем) проблем обычно не возникало.

Когда я создавал свою страницу, в моде были фоновые рисунки в серых тонах. Надо было придумать чтонибудь другое. Но отказываться от серого фона тоже не хотелось: окно броузера, которое служит естественной рамкой страницы, име ет серый цвет. Я выбрал в качестве фона рельефную плитку серебристого цвета (код цвета "silver" был тогда новинкой) с красным узором. В качестве узора подо шли спецсимволы из общедоступного шрифта Wingdings. Я сознательно избегал рисования в графических редакторах и старался использовать только то, что есть под рукой у пользователя Windows. Правда, узор раскрасил в два оттенка красно го: вид фона сразу улучшился.

На странице предполагалось использовать таблицы: в первую очередь, для созда ния рамок вокруг заголовков и ссылок (яркий фон не позволял размещать текст в качестве обычных абзацев). Значит, и другие детали страницы должны были быть выдержаны в этом стиле. В рисунки были добавлены рамки: в основном, это были перекрашенные рамки, которые создаются Internet Explorer и программами для Windows. Получить изображение рамки (как и других элементов пользователь ского интерфейса) очень просто: достаточно нажать клавишу Print Screen и вставить содержимое буфера обмена в качестве нового рисунка в графическом редакторе. Структура заглавной страницы была создана при помощи невидимых таблиц (border=0): каждый рисунок или надпись находились в отдельной ячейке. С таким документом очень легко работать, так как в гипертекстовом редакторе невидимые таблицы показаны пунктирными линиями (рис. 6.11). Взаимное положение дета лей страницы тоже не изменяется в зависимости от режима просмотра (полноэк ранный, оконный) и разрешения монитора.

На титульной странице была оставлена только основная информация (заголовки, фотография, счетчик, электронная почта), а все остальное было распределено по отдельным HTMLстраницам и сделано доступным при помощи ссылок.

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

<TABLE align="center" border=5 cellspacing=0 cellpadding=3>
<TR><TD background="set/<a. gif'XA href="knigi. htm">
<IMG src="mybooks.gif" alt="MY BOOKS" border=0 width=181 height=31></a>
</table>

Для фона ячейки таблицы был выбран рисунок размером 2x2 пиксела (рис. 6.12,а). В приведенном выше примере это файл Setka.gif. Две точки этого рисункасетки сделаны прозрачными, поэтому сквозь фон элемента ТО просвечивает фон страницы (рис. 6.12,6). Содержимое элемента TD рисунок Mybooks.gif, который представ ляет собой надпись с прозрачным фоном. Эта надпись является и гиперссылкой. При выборе цвета непрозрачных пикселов рисункасетки необходимо учитывать цвет фона страницы. Использование того же самого цвета не дает нужного эффек та. Хорошо, если сетка имеет более темный оттенок, нежели фон. Можно сделать сетку белой. Элемент с таким фоном будет выделяться ярким пятном на темном фоне страницы. Несомненным достоинством фонового рисункасетки является и то, что он очень мал — всего несколько пикселов. Наличие таких рисунков прак тически не влияет на скорость загрузки страницы.

Ну, а теперь — руководство к действию. Начинайте разработку собственной стра ницы с общего плана и схемы: как страница будет разделена на фреймы, где буду! находиться крупные рисунки и заголовки, какими будут ссылки и цветовая палит ра. В смысле поиска идей можно посоветовать следующее. Некоторые провайде ры создают наборы ссылок для доступа к страницам своих клиентов. Посмотрите, как и что сделано у других, и если вам понравится какойнибудь эффект, откройте страницу в режиме источника (когда видны элементы HTML), посмотрите код и, при необходимости, оставьте у себя копию. Но не забывайте, что вам доступен целый Интернет примеров. Очень красивые сайты делают известные компании. Там тоже есть чему поучиться. Бывает, правда, что страница создана программ ным путем, и ее элементы расположены в нескольких очень длинных строках. Тогда, прежде чем разбираться в структуре страницы, надо отделить элементы друг от друга, создав дополнительные строки. Это удобно делать в Блокноте. Посмотрите сайт своего провайдера. Там наверняка должны быть рекомендации по созданию персональных страниц (как назвать файл титульной страницы, как сделать счетчик посещений и т. д.).

Если требуется разместить на страницах большое количество графики, не следует сосредоточивать много рисунков в одном документе. Загрузка крупных рисунков и фотографий вносит самые большие задержки в просмотр страниц. Поэтому надо принимать меры к тому, чтобы пользователи не ждали подолгу. Первый шаг в этом направлении — уменьшение объема файлов в формате JPG. Мне больше всего нравится использовать для этой цели графический редактор MS Photo Editor (он устанавливается вместе с программами MS Office). При сохранении JPGизображения в новом файле можно выбирать показатель каче ства рисунка в процентах. Чутьчуть снизив качество, можно получить значитель но меньший размер файла. Правда, качество изображения — понятие условное. Разместив на экране рядом две фотографии с качеством 100% и 80%, вы вряд ли заметите различия. Но в 60процентных изображениях ухудшения уже заметны на глаз. Вид фотографий необходимо проверять в двух режимах монитора: High Color и True Color.

Вторая задача — рациональное распределение графики по страницам. Мы уже знаем, что с помощью фреймов можно сделать легко доступным набор страниц (см. рис. 3.15). По этой схеме можно создать галерею графических объектов так, чтобы пользователь загружал только один рисунок (фотографию) по своему выбору. Сделайте заготовки страниц, а потом заполняйте их деталями и смотрите, что получается. Страницы легко модернизировать и тогда, когда они уже опублико ваны (размещены на сервере провайдера). Как только будет готова новая версия страницы, за несколько минут замените свои файлы на сервере. Для этого можно использовать программу CuteFTP или аналогичную.

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