Пособие по веб дизайну для начинающих: Новое дизайнерское решение.

Пособие по веб дизайну для начинающих или как я создавал свой сайт.

3. Новое дизайнерское решение.
Однажды, слоняясь по книжному магазину, я наткнулся на книгу Е. Якушиной «Изучаем интернет, создаём веб-страничку» (можете считать это рекламой, но я не вижу другого способа отблагодарить автора за её замечательную работу). Книжечка была тоненькая, небольшого формата, но, полистав её, я понял, что именно её мне всё это время и не хватало. На книге следовало бы сделать надпись яркими крупными буквами: «Для полнейших лохов», настолько понятно, доходчиво и последовательно она была написана. Там не было каких-то сверхнавороченных приёмов, лишь самое необходимое, что может потребоваться начинающему веб-мастеру.
Из этой книги я почерпнул очень много полезной информации, что очень помогло мне в создании нового дизайна своего сайта. Но об этом – чуть позже. Пока – небольшое лирическое отступление.
Бродя по интернету, вы наверняка натыкались на сайты, оформленные по последнему писку моды – с флэш-анимацией, играющей на заднем плане музыкой и прочей абсолютно ненужной и рассчитанной на тупых тинэйджеров приблудой. На этих сайтах вы, думаю, неоднократно видели модные-премодные кнопочки навигации, которые мигают при наведении на них курсора мыши или, скажем, светятся изнутри. Это – флэш-кнопки, в которых используется эффект анимации. Именно такие кнопочки я и решил разместить на своей странице.
Отступление в отступлении. Macromedia Dreamweaver хорош ещё тем, что может сам создавать какое-то количество мультимедийных объёктов. То есть, если вы не умеете рисовать во Flash, вы можете воспользоваться стандартными флэш-объектами, имеющимися в арсенале программы. Но вот здесь-то и кроется главная засада. Во-первых, флэш-объекты всегда достаточно тяжелы, поэтому время загрузки страницы увеличивается пропорционально количеству «флэшек». А во вторых… Здесь-то и обнаруживается слабая сторона визуальных редакторов.
Сами флэш-анимированные кнопки на странице не располагаются. Они лежат на сайте либо в общей массе, либо в отдельной директории в виде файлов формата swf. Отображение этих кнопок на странице происходит в результате обращения к ним браузером по специальному сценарию, написанному на языке JavaScript. Этот язык предназначен для создания небольших программ (и больших, впрочем, тоже) — скриптов, которые невидимо для пользователя взаимодействуют с браузером и помогают последнему воспроизводить всё то, что было задумано и заложено веб-мастером в тело страницы (описание максимально упрощено). Их можно писать самостоятельно (при соответствующем знании языка JavaScript) или же пользоваться уже готовыми, создаваемыми визуальным редактором. Скрипты – помимо собственно программной части – могут содержать в себе определённую информацию – авторство, дата создания и т.п. Информация может быть как полезной, так и избыточной. Рассматриваемый нами Dreamweaver, как выяснилось, генерируя скрипты, наполняет их как раз информацией последнего типа.
Главная страница моего сайта в новом виде выглядела так: однородный мрачный фон, а в центре – колонка флэш-кнопок (короче, откровенное убожество). Удивительно, но после того, как я разместил на странице порядка восьми кнопок, она стала «весить» во много раз больше. «Чё за фигня?!» — подумал я и решил посмотреть исходный код страницы.
Снова лирика. Как слово состоит из букв, а текст – из слов, так веб-страница состоит из тегов. Тег – это элементарная единица, «кирпичик», из которых строятся страницы вашего сайта. Подобно тому, как мы читаем роман, чтобы узнать его содержание, браузер прочитывает исходный код страницы (совокупность тегов) и показывает нам уже готовый результат.
В общем, заглянул я в «исходник», и глаза у меня полезли на лоб, когда я увидел, что навтыкал в скрипт мистер Dreamweaver… Исключительно благодаря лишней (с моей, конечно, точки зрения, расходящейся со взглядами программистов из Macromedia) информации (типа ссылки на сайт производителя) мой документ стал столько весить. «Непорядок, — сказал себе я, — Придётся исправлять вручную». Чистил код я долго, нарушая все «копирайты» и нагло внося изменения в то, что с таким трепетом и восторженными слезами от осознания собственного вклада в прогресс человеческий создавал безымянный программер, нещадно эксплуатируемый проклятыми буржуинами. Наконец, всё было готово. Файл стал легче, но морального удовлетворения у меня от этого не случилось. Наоборот, мысль о том, что придётся каждый раз так мучиться после вставки флэш-кнопок, полностью отбило желание когда-либо ещё связываться с «флэшками» на веб-страницах.
Иными словами, этот вариант мне тоже не подходил…
Тогда я обратил свой взор к самому гениальному изобретению в веб-дизайне – к таблицам. Они хороши хотя бы тем, что при грамотном их построении страница приобретает весьма упорядоченный и симпатичный вид. В основу моего нового сайта легла простая таблица (два столбца, три строки) с невидимыми границами. Справа вверху был логотип с надписью «Сайт моего творчества» на галлюциногенном фоне, слева – менявшаяся в зависимости от раздела картинка, нижние строки были отведены под «копирайт» и дублирующие текстовые ссылки, а центр – под панель навигации по сайту (слева) и основное наполнение (справа). Общий фон – чёрный, подстать доминирующей тематике произведений – мистике и ужасам. Текст на главной странице сводился к описанию структуры сайта и указанию координат для связи (ICQ и e-mail).
Панель навигации заслуживает особого разговора. Это были кнопки-изображения с написанными на них названиями рубрик – «Ад по соседству», «Возмездие», «Демонология», «Об авторе» и т.д. Они были красного цвета с белыми буквами. При наведении на них курсора мыши, кнопки изменяли окраску и текст надписи – «читать», «смотреть», «войти» и пр. Это – так называемый эффект Rollover Image (Активного изображения). Суть его проста: при наведении курсора на картинку вам демонстрируется другое изображение, как бы подложенное под основное. Разумеется, размеры изображений должны быть идентичными во избежание искажений. В основе этого эффекта лежит всё тот же вездесущий сценарий JavaScript, который, в отличие от своего «брата во флэше», занимает более приемлемый объём (хотя и не самый маленький). Согласитесь, гораздо проще нарисовать в Photoshop’е пару картинок, чем мучиться с «флэшкой».
Каждая навигационная кнопка (как, впрочем, и всякая другая кнопка у меня на сайте) была снабжена альтернативным текстом (записывается внутрь тега «alt» на панели Image (Свойства изображения) или непосредственно в тело страницы). Зачем нужен альтернативный текст? А вот зачем.
Не знаю, как вы, а я путешествую по интернету с отключённым отображением картинок и даже с выключенным распознаванием JavaScript (на котором основывается работа большинства флэш-баннеров). Если мне требуется задействовать какую-то из этих функций, я просто её включаю. Для чего я это делаю? Во-первых, экономлю трафик. Во-вторых, избавляю себя от созерцания всякой ерунды типа «Фото девушек в купальниках. Click here!» или мигающих «заманух» «Жёсткое порно с Еленой Берковой здесь! Также вы можете подписаться на рассылку новостей о методиках лечения геморроя!». Мне не нужны все эти «диваны — офисная мебель – резиновые женщины – кофеварки с автоминетчиком» и прочая гадость за девяносто девять долларов и девяносто девять центов, а от музыки ополоумевшего лягушонка меня так тошнит, что я был бы полным мазохистом, если бы закачал её себе на телефон. Именно от этого всего я себя и отгораживаю, отключив в своём верном Mozill’е практически все функции. Кроме того, незагаженные рекламой и картинками страницы грузятся значительно быстрее.
Ладно, ближе к делу. Представьте себе, что ваш сайт – это много-много картинок и почти полное отсутствие текста. Всё смотрится красиво и шоколадно, но тут на него лезу я… И не вижу ничего, кроме фона. Почему? Потому, что загрузку изображений-то я отключил! А если у вас на изображениях навигация завязана? Тогда как? (Кстати, встречал как-то серьёзный коммерческий сайт, сделанный профессионалами, где был именно такой «косяк». Видно, и на старуху бывает проруха.) Вот здесь-то и пригодится альтернативный текст. Если он сделан к обычной картинке, то вместо неё (в случае, когда загрузка изображений отключена или они не загружаются из-за «глюков» на сервере) появится сделанная вами надпись, например, «Хоронили тёщу, порвали три баяна». В случае если к картинке привязана любая ссылка (на другой ресурс сайта, на более крупное изображение и пр.), то вместо изображения будет виден текстовый «линк» на какой-то объект.
Если коснуться оформления прочих страниц сайта, то оно практически не отличалось от дизайна главной, с той лишь разницей, что в центральной правой строке располагалась колонка кнопок-изображений с названиями рассказов и стихов – «Спикер», «Дядя Лёша», «Рождение мага» и далее в том же духе. Эффект активного изображения здесь я решил не использовать. Чуть ниже кнопок находилось небольшое описание раздела, более подробное, чем на главной странице. Страницы произведений, на которые ссылались кнопки, были оформлены традиционно – чёрный текст на белом фоне.
Помимо чисто творческих разделов на сайте имелись Гостевая книга, «Новости сайта», «Полезные ссылки», «Мой город» (фотографии Рязани) и «Об авторе».
Теперь оставалось оптимизировать сайт для поисковых систем и выложить его в интернет.

23 — 27 сентября 2005 года.