Веб-дизайн для начинающих. Часть 2
В позапрошлом номере «Игромании» (в первой части статьи «Веб-дизайн для начинающих») мы познакомились с Macromedia Dreamweaver , одной из самых популярных программ для создания интернет-страничек, и разобрались, как сделать простейший домашний сайт. Сегодня мы двинемся дальше и добавим на наш ресурс различные мультимедийные файлы и дополнительные модули, разберемся, что такое CSS, и определимся с цветовым решением.
Масс-медиа
Большинство современных игровых порталов (да и не только игровых) щеголяют огромным количеством мультимедийных файлов. Стоит только зайти на заглавную страничку, как вас начинают буквально бомбардировать всевозможными видеовставками, модулями панелей голосования, рандомизаторами изображений, флэш-плакатами и прочей мишурой, от которой рябит в глазах, но без которой любому современному сайту не обойтись.
Как же прикрутить всю эту красоту к своей страничке? Macromedia Dreamweaver отлично справится с этой задачей. Запустите программу и убедитесь в том, что на панели инструментов активирована закладка Common. Выберите любой элемент из списка Media (пятая кнопка справа) и щелкните по нему левой кнопкой мышки один раз — перед вами появится диалоговое окно, в котором нужно указать путь к медиафайлу. Macromedia Dreamweaver позволяет подгрузить на сайт графические файлы, приложения, сделанные при помощи Macromedia Flash , аудио и видеофайлы ( Shockwave ), Java -апплеты, файлы параметров, ActiveX -компоненты и различные плагины.
Рекомендуем вам держать все модули, которые вы собираетесь ставить на сайт, в одной общей папке, находящейся не где-нибудь, а в корневой директории вашего сайта. Это, во-первых, обеспечит максимально быстрый доступ к ресурсам, а во-вторых, когда дело дойдет до загрузки сайта на хост, вы не запутаетесь, где какой элемент хранится.
Не забывайте о чувстве меры: на заглавную страничку можно добавить только три, максимум четыре мультимедийных приложения. Например, один флэш-ролик и парочку рандомизаторов изображений (это окошко, в которое случайным образом загружается одна из картинок, находящихся в базе).
Нередко в Сети можно наткнуться на сайты-монстры: уже с заглавной страницы они начинают расстреливать барабанные перепонки несчастного посетителя жуткими звуками и музыкой, впиваться в глаза кислотными флэш-роликами, загружать мозг видеофрагментами, проигрываемыми во всплывающих окнах. Это перебор. Будьте уверены, что, посетив такую страничку один раз, пользователь уже никогда на нее не вернется. И ладно бы только стилистика страдала, так ведь и расход трафика у таких монстров колоссальный. Платят за это, кстати, не только посетители, но и вы — владелец сайта (ведь многие хостеры тарифицируют исходящий трафик).
Галочки на полях
Несколько советов начинающим веб-дизайнерам.
- Не скупитесь на комментарии при создании сайта. В Dreamweaver на панели инструментов во вкладке Common находится элемент Comment (третий справа). Щелкнув по нему, вы увидите специальное окно, в котором можно сделать комментарий.
- Как можно чаще тестируйте свой сайт в браузере. В этом случае вы сразу же обнаружите ошибки, и не придется переделывать все с нуля.
- Храните все файлы в одном каталоге. Странички помещайте непосредственно в корневую директорию, а все остальные файлы — графику, видео, флэш-ролики — распределите по подпапкам (глубже третьего уровня лучше не зарываться).
- Перед публикацией сайта в Сети не забудьте оптимизировать его: сжать всю графику до минимально приемлемого уровня, запаковать все ресурсы раздела Download в RAR-архивы, произвести компрессию музыкальных композиций и видеоклипов.
CSS — это просто
В создании портала или простенького сайта вам очень помогут так называемые каскадные таблицы стилей, сокращенно — CSS ( Cascading Style Sheets ). Они позволяют задать определенный формат каждой части веб-странички. А поскольку сайт, как правило, — это совокупность нескольких страниц, сшитых вместе и выполненных в едином стиле, то CSS просто незаменимы. Достаточно дать несколько указаний в HTML-документе на таблицу стилей, и вуаля — все веб-страницы примут единый установленный в CSS-файле формат.
Второй несомненный плюс каскадных таблиц — для изменения стиля сайта вам понадобится лишь слегка отредактировать содержимое CSS-файла, никакие изменения в структуру портала при этом вносить не придется.
Чтобы создать новый стиль в Macromedia Dreamweaver, щелкните правой кнопкой мышки по главному рабочему полю и в контекстном меню выберите пункт CSS Styles/ New. Появится окно, в котором необходимо настроить ряд базовых параметров CSS-документа. Первым делом укажите, к чему применить новый стиль. Для этого напротив метки Selector Type выделите одну из наиболее подходящих позиций. При активации пункта Class стиль будет применен ко всем тегам, а следовательно, ко всей странице (напротив метки Name не забудьте задать имя).
Метка Tag позволяет применить CSS к одному из тегов поля Tag. Третий тип, Advanced , открывает доступ к тонким настройкам, которые начинающему веб-дизайнеру не понадобятся. Задав зону действия CSS, выберите в поле Define- in способ хранения нового CSS-документа. Хорошие веб-мастера никогда не содержат записи о стилях внутри самих страниц — это крайне неудобно: каждому новому HTML-документу придется вручную задавать один и тот же стиль. Поэтому вариант This Document Only подходит, только если вы создаете небольшой домашний сайт, состоящий из 4-5 страниц. Всем остальным лучше поставить флажок напротив строки New Style Sheet File.
Нажмите Ok и, если вы выбрали способ сохранения New Style Sheet File , пропишите путь к будущему CSS-документу. Те же, кто выбрал пункт This Document Only , сразу увидят окно для разработки стиля. Остается только выбрать цветовую схему сайта, задать начертание букв, цвет и толщину бордюров, а также настроить ряд других параметров. Значение атрибутов всегда понятно из контекста, поэтому не будем на них задерживаться, а сразу перейдем к управлению стилями.
Самый удобный способ применения стиля к веб-страничке — выделить нужную часть HTML-документа в главном рабочем поле и выбрать нужный CSS из списка Style на панели свойств. Но как быть, если вы загрузили какой-нибудь стиль из интернета и хотите поставить его на свою страничку? В этом случае кликните правой кнопкой мышки по рабочему полю Macromedia Dreamweaver и в появившемся меню выберите пункт CSS Styles/ Manage Files. В окне Edit Style Sheet щелкните по кнопке Attach и пропишите путь к новому стилю — он станет доступен в меню Style инспектора свойств.
Можно создавать стиль самостоятельно, можно качать из интернета, но есть, скажем так, промежуточный вариант — никто не запрещает вам отредактировать один из базовых CSS. Для этого в окне Edit Style Sheet выберите из списка произвольную таблицу, щелкните по кнопке Edit , определите один из файлов, вложенных в CSS-документ, и еще раз кликните Edit.
Мы описали лишь самое важное, что можно сделать при помощи CSS. Помимо этого, каскадные таблицы стилей используются для создания красивых выпадающих меню, как средство для сокращения скорости загрузки страниц. Вариантов — масса, но это уже тема для отдельной статьи.
Добавьте красок
В первой статье вкратце была затронута одна очень важная тема — цветовое решение вашего сайта. Мы рассказали, как настроить цвет шрифта и фонового рисунка, но практически не обсудили взаимосвязь оттенков. Поскольку именно по сочетанию цветов нам пришло больше всего вопросов (на ящик internet@igromania.ru), мы решили рассмотреть цветовую схему сайта более внимательно.
Сразу отметим, что однозначного ответа на вопрос, как подобрать цвета, не существует. Сколько людей, столько и мнений. Тем не менее есть несложные методики, позволяющие хотя бы не наделать грубых ошибок. Все предельно просто. Берете какую-нибудь красивую панорамную фотографию (снятую профессиональным фотографом) или картину (нарисованную известным художником), делаете скриншот, загружаете в Photoshop , инструментом «пипетка » определяете цвета наиболее контрастных участков изображения и записываете их цифровые шифры.
После этого снова запускаете Macromedia Dreamweaver и используете полученные коды цветов для формирования цветовой гаммы вашего сайта. Если фотография действительно была хорошая, то все цвета будут очень гармонично сочетаться.
Колор по радиусу
Способ подбора цветовой гаммы сайта по красивой фотографии, описанный в статье, конечно, хорош. Но он, скажем так, довольно деликатен и требует хотя бы базовых дизайнерских навыков, чтобы вовремя заметить неудачное сочетание цветов. А вот узнать, сочетаются или нет базовые цвета палитры, очень просто. Для этого еще дизайнеры средневековья (поговаривают, что и раньше) придумали шестисекторный колориметрический круг.
Цвета, расположенные друг напротив друга сочетаются гармонично. Через один сектор друг от друга располагаются цвета, которые при определенных условиях могут сочетаться, а иногда даже давать отличную гамму. А вот цвета, находящиеся в соседних секторах, сочетаются очень плохо: чтобы скомбинировать их в красивое изображение, надо быть профессиональным колористом.
Теория ассоциативных рядов
В школьных курсах анатомии и физиологии четко различают понятия цветоощущения и световосприятия. Жаль, что большинство, едва стартовав со школьной скамьи во взрослую жизнь, забывают, в чем же разница. Напомним. Световосприятие — это воздействие световых волн на сетчатку глаза. В рецепторах (палочках и колбочках) под воздействием фотонов света зрительный пигмент переходит из одного состояние в другое, генерируется нервный импульс, который прямой дорожкой устремляется в мозг. Мозгу хорошо, он счастлив.
В сером веществе больших полушарий головного мозга начинает формироваться цветоощущение. Разную длину световой волны (а значит, и разную скорость импульсации нейронов; информацию от клеток, содержащих разный пигмент) наш мозг интерпретирует как разные цвета. То есть можно даже сказать, что в природе никаких цветов вообще не существует. Они есть только для мозга. Цвета — это наш способ восприятия световых волн разной длины.
Тут мы подошли к самому главному. Любой цвет вызывает у человека ту или иную эмоцию. Эмоции могут разниться на уровне отдельно взятых оттенков, но вот сочетания нескольких оттенков и их тональный рисунок практически у всех людей рождают приблизительно одинаковые ощущения. Мягкие тона называются пастельными; яркие, «тяжелые» принято объединять в так называемые «престижные» гаммы; «природный» рисунок имитирует цвета леса или поля; цвета бодрости — это схемы, составленные еще в середине прошлого века американскими и английскими психологами, — они поднимают настроение.
Все эти тонкости и нюансы вам придется учитывать. Возможно, не сразу, а постепенно набираясь опыта, подбирая для сайта все новые и новые цветовые комбинации, вы научитесь чувствовать настроение цветов, определять, какие эмоции испытает пользователь, зайдя на вашу страничку. Многие начинающие веб-дизайнеры спрашивают: ну как же мне узнать, что почувствует посетитель? Ответ прост: он почувствует приблизительно то же, что чувствуете вы, глядя на эти же цвета. Просто не забывайте почаще задавать себе этот вопрос.
Палитра Photoshop
Печально, но факт: многие пользователи, даже те, кто постоянно работает над созданием сайтов, не знают, по какому принципу построена палитра самого популярного графического редактора Photoshop.
Мотайте на ус, мозг и прочие постоянные запоминающие устройства. По горизонтали в палитре происходят цветовые переходы. По вертикали же только тональные переходы. Те, кто не знают этого правила, часто допускают ошибку: они считают, что нижние левый и правый угол по коду цветов приблизительно одинаковы. Визуально в углах все действительно выглядит одинаково темным. На деле же коды совпадают только для самых угловых точек — в них идеален черный цвет (по системе RGB — 0, 0, 0). Но уже при смещении всего на один пиксель значения цветов начнут заметно различаться. Для правого угла палитры существует даже специальное название — цветной тон.
Из палитры любого оттенка можно получить отличные сочетания цветов для оформления сайта. Достаточно провести мысленно произвольную наклонную линию по палитре, разбить ее на четыре равных отрезка (упрощенный вариант золотого сечения), точку, отстоящую от края на длину одного отрезка, сделать фоном сайта, а две крайние точки цветом рамок и, например, заголовков.
Оптимизация
Сайт готов, выложен в интернет, и вы, довольно потирая руки, сидите в кресле, попиваете чаек, смотрите, как на счетчике медленно растет число посетителей. Внешне все выглядит нормально — кнопочки нажимаются, флэш-ролики проигрываются, раздел Download функционирует, даже форум подвисает не слишком часто…
Однако это внешнее благополучие — вовсе не повод, чтобы не оптимизировать свой сайт. Конечно, здорово, если вы провели компрессию графических файлов, некоторые даже переформатировали в gif , ужали все видеоролики и музыкальные файлы, упаковали все скачиваемые ресурсы. Но ведь есть еще сами веб-странички, то есть начинка HTML-документа! Давайте разберемся, как оптимизировать исходный код вашего сайта.
Профессионалы предпочитают производить очистку веб-страниц собственноручно. Оно и понятно, ни одна программа не поймает все глюки, а наметанный глаз специалиста с легкостью замечает пустые теги, лишние комментарии и прочий ненужный контент. Но начинающему веб-дизайнеру до профи еще расти и расти, поэтому за него всю оптимизацию проведет верный друг и помощник — Macromedia Dreamweaver.
Подгрузите в программу HTML-файл, который нужно очистить от лишних элементов, и в меню Commands выберите пункт Clean Up Html. Откроется окошко, в котором нужно настроить параметры зачистки.
Рассмотрим атрибуты поля Remove. По умолчанию, флажки установлены напротив двух пунктов — Empty Container Tags и Redundant Nested Tags. Мы рекомендуем добавить в список удаляемых элементов комментарии, сделанные при помощи сторонних программ, исключая Dreamweaver ( Non-Dreamweaver HTML-comments ) и специальные маркировки ( Dreamweaver Special Markup ). Если вы убеждены в том, что в тело вашего сайта просочился какой-то специфический тег, которому не место в финальном варианте HTML-документа, то установите галку около строки Specific tag(s) и вбейте в поле рядом его название. После этого, не изменяя настроек параметра Options , нажмите кнопку Ok. Программа пробежится по вашей страничке в поисках бесполезных элементов, удалит их и выведет на экран окно отчета, в котором будет указано суммарное число вырезанных фрагментов.
Почистите все страницы вашего сайта, сохраните оптимизированные HTML-документы и только после этого публикуйте в Сети. Да, чуть не забыли предупредить — перед оптимизацией обязательно сделайте резервную копию всей папки с вашим сайтом. Очень редко, но все же случается, что Dreamweaver удаляет нужные теги. Да и комментарии, которые совсем не нужны на сайте в интернете, могут пригодиться, когда вы будете доводить до ума свою страничку.
* * *
Интернет неуклонно растет. Месяц за месяцем, год за годом. Число сайтов увеличивается чуть ли не в геометрической прогрессии, а вот о качестве того же сказать нельзя. Да, общий уровень крупных порталов за последние несколько лет сильно повысился. Зато стилистика домашних страничек упала ниже плинтуса, несмотря на появление большого числа базовых шаблонов, конструкторов сайтов и прочей удобной веб-бижутерии.
Искренне надеемся, что наши статьи помогут вам сделать не очередную безликую поделку в духе « хомячок ужасающий, обыкновенный » («хомяк», «хомячок» — жаргонное название домашней страницы, от англ. homepage), а вполне достойный сайт, на который пользователи будут заходить постоянно.