Сергей Бердышев - Искусство оформления сайта. Практическое пособие
Главный атрибут тэга ‹div› (‹р›) – align=, обозначающий выравнивание. Выравнивание осуществляется по центру (center), по левому краю (left) и по правому краю (right). Например: ‹div align=“right”›А вот и я!‹/div›.
Другим важным способом организации текста является маркированный и нумерованный список, удобный для каких-либо перечислений. Он приятен для глаз и облегчает чтение большого массива информации. Задается маркированный список всегда парным тэгом ‹ul›‹/ul›. Каждый отдельный элемент, напротив которого стоит маркер, буква или число, полагается обозначать парным тэгом ‹li›‹/li›, который обладает тем удивительным свойством, что не требует к себе закрытия. То есть ‹/li› можно писать, а можно и не писать, греха в том не будет. Маркированный список задается в Web Page Maker через текстовый редактор точно так же, как в Word’е (см. рис. 20).
Рис. 20. Создание маркированного списка в Web Page MakerНо в этой программе маркер всегда является черным кружочком (Bullet style). Если нам нужно воспользоваться другим видом маркера – незакрашенным кружочком, квадратиком или картинкой-иконкой из папочки images.files, то нам придется научиться вносить свою правку в html-код. Пишем к тэгу маркированного списка атрибут стиля ‹ul style=“list-style-type:…;”›. На место многоточия нужно внести название выбранного нами маркера. Черный кружочек называется disc, но он нам не нужен, так как ставится программой самостоятельно. Незакрашенный кружочек обозначается словом circle, а квадратик – square. Если нам понадобилось поместить на место маркера картинку, то атрибуту придаем новое значение, меняя type (тип) на image (изображение): ‹ul style=“list-style-image: url( ваша папка для картинок/название рисунка. gif);”›.
Нумерованный список быстро и легко задается также через текстовый редактор в веб-конструкторе. Однако и в этом случае код знать полезно на случай внештатных ситуаций. Например, нам нужно поменять нумерацию с арабской на латинскую. Тогда мы открываем код и вносим правку в тэг ‹ol›. Изначально он не имеет атрибутов, поскольку арабская нумерация ставится по умолчанию. Мы подставляем type=“I” или “i”, что дает нумерацию римскими цифрами, прописными или строчными (обратите внимание на то, что арабский нумерованный список тоже может задаваться через type=, значение которого будет “ 1”). Аналогично задается буквенный список, атрибут которого принимает значение TYPE=“A” или “а”, что означает использование прописных или строчных латинских букв.
Если список разрывается, а потом возобновляется, нужно использовать атрибут start=. К примеру, если список оборвался на числе 15, то его продолжение мы начнем с записи ‹ol start=“16”›.
Напоследок скажем несколько слов про допустимые объемы контента. Здесь справедливо правило «магической семерки», как называется ключевой принцип минимизации текста, найденный опытным путем неутомимыми рекламистами: максимальное число букв в слове – 7, максимальное число слов в предложении – 7, максимальное число предложений в тексте – 7, максимальное число коротких абзацев (по 2–3 предложения) на странице – 7.[15]
С текстом мы разобрались, но сайт может говорить с нами не только через письменные слова, но и через звуковое сопровождение. Звуковое сопровождение бывает двух видов – фоновый звук и звук с проигрывателя. С проигрывателем все понятно. Посетитель заходит на сайт, видит интерфейс аудиоплейера и прокручивает запись, которую ему пообещали. Подобные трюки очень хороши для музыкальных и персональных ресурсов. Организовать нечто подобное у себя вы можете, открыв в Web Page Maker спецально для этих целей сверстанную вами страничку и пройдя путь Insert › Object › Audio, а затем выбрав нужный объект (см. рис. 21). Одна беда – этот проигрыватель запускает запись сразу, как только загрузилась страничка.
Рис. 21. Вставка аудиофайла в Web Page MakerОткроем код документа, чтобы исправить это недоразумение. Размещение аудиофайла задается тэгом ‹embed› (он же может использоваться и для видео, если только видеоролик не имеет формата AVI). Здесь мы увидим, что тэгу по умолчанию присвоен атрибут autostart= со значением true, хотя для наших целей нужно другое – false. Производим замену. Проверяем правильность написания кода, внося по ходу и другие необходимые поправки, чтобы в конечном итоге тэг принял вид:
‹embed src=“адрес папки с аудиофайлами/название файла” width=… (введите нужное значение) height=… (введите нужное значение) autostart=false›
Значения ширины и высоты рекомендую оставлять именно такими, какие предложил конструктор, поскольку они обычно наиболее удобны. Обратите внимание: на рисунке нетрудно заметить, что название файла записано русскими буквами – «Титаник». Прежде чем импортировать такой файл, переименуйте его, записав буквами латинского алфавита, причем пользуйтесь только строчными буквами: «titanik». Почему так, вы узнаете позднее, из п. 5.2.
Перейдем к фоновым звукам на сайте. К сожалению, они сильно раздражают, мешают работать, а иногда и просто пугают своей неожиданностью и резкостью. Вот почему применять их следует вдумчиво и очень осторожно. Если перед нами ресурс, посвященный какой-нибудь эстрадной певице, но на главной странице или в фотоальбоме можно разместить звуковой фон (например, на одном из сайтов про Бритни Спирс звучит песенка «Oops, I did it again»). Но в остальных случаях звуковой фон почти всегда неуместен. Впрочем, на моем ресурсе есть страничка релаксации – на тот случай, если гостям захочется чего-нибудь оригинального (http://busbook.narod.ru/relax.html). Ссылка, ведущая туда, предупреждает, что нужно предварительно включить колонки или встроенный динамик, чтобы насладиться музыкой природы. На страничке размещается гиф с анимированным изображением водопада, а звуковым фоном служит приятный звук падающей воды – слушай, смотри, медитируй.
Полезный совет: восприятие информации зависит от способа ее подачи. Обычно эту истину считают самоочевидной. Однако никто в глубине души не верит, что иначе поданная информация становится неузнаваемой, хотя на самом деле это так. При неправильной подаче материала на вашем сайте веселое может стать грустным, остроумное – глупым.
Глава 4. Зрелищность сайта
4.1. Темы (фоновые рисунки)
Напомню, что темой называется единое графическое решение для всех элементов, составляющих интерфейс каждой из страниц сайта. Основу, стиль и дух темы составляет подложка, то есть фоновый рисунок (background). В оптимуме фон должен быть белым либо представлять собой нежные оттенки каких-либо других цветов, максимально близкие к белому (нежно-розовый, светло-желтый и т. д.) с плавным сокращением насыщенности в одной из областей экрана, куда предполагается поместить основной массив текста и графики. Но в ряде случаев необходим более насыщенный и сложный фон.
Программки типа W.Y.S.I.W.Y.G. предлагают веб-программистам коллекцию шаблонов, готовых решений, включающих в себя разнообразные, подчас весьма оригинальные и продвинутые темы. Стоит ли пользоваться этими шаблонами? Скажем так: их нужно изучать и развивать. Даже поверхностное знакомство с сайтом «Образованные котята», построенном шутки ради на основе нашего ученического дизайна, покажет вам, что из шаблонов вырастают смелые и красивые идеи, весьма простые в исполнении. А самое главное: обилие деталей в веб-конструкторе способствует развитию обостренного восприятия дисгармонии. В процессе учебы нужно как можно чаще пользоваться готовыми темами, кнопками, иконками и т. д., комбинируя их и так и эдак, а потом критически изучая свое творение. Забракованные образцы подскажут, в каком направлении двигаться опасно, а это поспособствует отточенности вкуса и улучшению виртуальной сенсорики.
Проведем аналогию. Самообразование веб-дизайнера похоже на следствие пса Фу-фу из забавных детских детективов Е. Матюшкиной и Е. Оковитой, который разыскивал статую собаки с алмазными глазами. Если вы давно не читали своему ребенку сказок, то напомню, что эта статуя изготовлена из совершенно необычных материалов. У нее были:
1) глаз-алмаз, зубы золотые, нервы железные, шерсть шелковая;
2) голова чугунная, лоб медный, сердце каменное, мышцы стальные, ноги ватные;
3) уши-локаторы, нос по ветру, губа не дура, лапы загребущие, хвост пистолетом.
Я намеренно, чтобы не тратить впустую времени, разбил признаки на три разнокачественные группы. Если бы статуя № 3509 обладала качествами только первой или только третьей группы, то имела бы мало-мальски привлекательный вид благодаря оптимальному сочетанию признаков. Так, нос по ветру гармонирует с хвостом пистолетом, а глаз-алмаз – с золотыми зубами. Но смешанные вместе, вдобавок отягощенные медным лбом и прочими негативными качествами, эти признаки не слишком-то красили статую. Отчего Кролик, услышав описание собаки с алмазными глазами, недовольно хмыкнул: «Вот урод». Чтобы такого не говорили о вашем ресурсе, требуется выбирать качества из позитивных групп (первой или третьей), но только в строго сбалансированном отношении, не путая нервы железные с губой не дурой. А от негативных качеств из второй группы придется вовсе отказаться.
