"Ясли-сад"
Федора Вирина для Народа
/ Лекция 5. Верстка. Часть 2.
Кроме собственно языка HTML существует еще
большое количество дополнений, которые призваны облегчить
жизнь веб-мастеру и немного навести порядок на сайте. Есть
среди них полезные, есть и вредные, но есть два дополнения,
которые нужно использовать обязательно, даже если сейчас вы
не видите, как они могут вам пригодится. Эти два дополнения
- SSI (Server Side Includes) и CSS (Cascade Style Sheets),
оба они довольно простые, хоть и обладают совсем недетскими
возможностями.
С помощью SSI вы можете включать в свою страницу
любые необходимые вам фрагменты (тексты, картинки, счетчики,
результаты работы программы и пр.) непосредственно на сервере.
Это дает вам возможность загружать в заданное место страницы
повторяющиеся элементы по всему сайту из одного источника.
Хороший пример - оглавление - оно обычно повторяется на всех
страницах узла и всегда одинаковое. Поставив директиву SSI,
вы сможете хранить оглавление в отдельном текстовом (или HTML)
файле, который сервер будет вставлять на каждой странице в
указанное вами место. Такой файл гораздо легче исправить,
если возникает такая необходимость. Представьте, что у вас
200 файлов, в каждом надо исправить оглавление и положить
на сервер, а тут - поменял текст в одном файле и положил на
сервер за несколько секунд. Кроме того, при большом объеме
сайта можно значительно выиграть в дисковом пространстве,
которое вам потребуется, оно, конечно, сейчас почти ничего
не стоит, но вам, например, потребуется меньше времени на
"заливку" файлов на сервер.
Как это делается? Существует ряд базовых
директив (исполняемых команд) SSI, которые вы специальным
образом включаете в свои страницы, а при запросе страницы
компьютером пользователя, сервер сканирует ее на наличие директив
и, если находит, то подставляет вместо них требуемые значения.
Для того, чтобы сервер сканировал документ необходимо ему
дать на то указание. Некоторые сервера сканируют все документы
без разбора, другие - только те файлы, которые имеют расширение
SHTML, причем, последних - большинство. Что именно будет сканировать
сервер, зависит от его настроек, поэтому если у вас есть доступ
к серверному ПО, то вы можете сделать так, как пожелаете,
но если вы планируете арендовать хостинг, то рассчитывайте,
что сканироваться будут только SHTML файлы.
SSI - это очень мощный инструмент,
который способен реально помочь вам в работе над проектом,
поэтому нужно сразу ориентироваться на его использование.
Следовательно, даже если вы не собираетесь использовать
возможности SSI прямо сейчас, все равно имеет смысл дать
всем страничным файлам расширение SHTML, а не HTML, чтобы
потом не пришлось переправлять все ссылки. Файлы переобозвать,
понятно, просто, но ссылки на них стоят на других страницах,
а может быть, и на других серверах, - пойди найди их все
и исправь. Поэтому лучше сразу использовать SSI, тем более,
что это очень просто.
Директивы SSI вставляются в файл в виде служебного
тега "комментарии"
<!--#Здесь должна быть команда с параметрами-->
такой тег (только без знака диез #) не отображается на страницы
и служит для помещения в коде служебных записей, например,
чтобы вы лучше ориентировались в тексте или, если над проектом
работает много людей. В случае, если ваша директива не может
быть выполнена, она просто не отобразится (если настройки
сервера это позволяют).
Две самые распространенные директивы SSI,
которые вы можете начать использовать прямо сейчас это exec
и include. Первая из них запускает внешнюю программу (обычно
CGI-скрипт), вставляя на страницу результаты работы этой программы,
а вторая - подставляет данные из файла и тоже может вставлять
результаты работы сторонней программы. Возьмем, например,
все то же оглавление и посмотрим, как будет выглядеть оно
на странице при подстановке с помощью директивы SSI. Пусть
у нас есть таблица в виде оконной рамы, где сверху - шапка
страницы, слева текстовый блок с основным содержанием, а справа
- оглавление. В этом случае код страницы, спроектированный
обычным образом, будет выглядеть следующим образом (обрезанно):
<table ...>
(тег таблицы с параметрами - шириной, толщиной
линий, фоном и пр.)
<tr><td>
(открываем строку, потом ячейку)
Основной текст страницы
</td> (закрываем ячейку)
<td> (открываем
ячейку)
Оглавление
</td> (закрываем
ячейку)
</tr> (закрываем
строку)
</table> (закрываем
таблицу)
Теперь, если оглавление у нас везде одинаковое,
мы можем подставить его с помощью директивы SSI, а само оглавление
поместим в файл ogl.txt, который будет вставляться в файл
непосредственно перед его открытием на компьютере пользователя.
В этом случае страница будет выглядеть следующим образом:
<table ...>
(тег таблицы с параметрами - шириной,
толщиной линий, фоном и пр.)
<tr><td>
(открываем строку, потом ячейку)
Основной текст страницы
</td>
(закрываем ячейку)
<td> (открываем
ячейку)
<!--#include virtual = "ogl.txt"-->
</td> (закрываем
ячейку)
</tr> (закрываем
строку)
</table> (закрываем
таблицу)
И к этому будет прилагаться файл ogl.txt,
хранящийся в той же директории, что и файл рассмотренной нами
только что странички. Если же файл будет храниться в отдельной
директории, то надо указывать относительный путь, как и при
обычной гиперссылке - это мы уже разбирали выше. Посмотрим
на получившийся результат: казалось бы ничего не изменилось,
только поменялась одна строка, но теперь у нас оглавление
в отдельном файле и, если нам придется добавить в него одну
строку, то нужно будет поменять только один файл. Кроме того,
сам файл стал короче, ведь оглавление - это не одна строка,
а мы заменили все одной строкой, убрав нагромождения тегов
в отдельный файл - с получившимся файлом будет гораздо легче
работать.
Однако теперь мы можем несколько сократить
получившийся код, так, чтобы в шаблоне у нас было еще меньше
мусора. Для этого мы уберем все окружающие оглавление теги
в тот же самый подгружаемый файл (мы можем подгружать все,
что угодно, а браузер уже получит страницу для отображения
полностью собранной, так что можно разрывать таблицы, открывающие
и закрывающие теги и пр.). Вот, что у нас получиться:
<table ...>
(тег таблицы с параметрами - шириной,
толщиной линий, фоном и пр.)
<tr><td>
(открываем строку, потом ячейку)
Основной текст страницы
<!--#include virtual = "ogl.txt"-->
Здорово, не правда ли?! А в файле ogl.txt
у нас теперь хранится много всякой ерунды:
Причем, обратите внимание, что и тег, закрывающий
таблицу, тоже здесь. В итоге, у нас есть один файл шаблона,
в который осталось только поместить основной текст и отформатировать
его (расставить абзацы, выключки, ссылки и пр.), объем кода
на странице сократился заметно. Такой файл будет сделан для
каждой страницы, а также один файл ogl.txt, который содержит
единое для всех оглавление и некоторое количество служебных
тегов.
Продолжение следует. 29.01.2001
"Ясли-сад"
Федора Вирина для Народа
/ Лекция 5. Верстка. Часть 1.
Теперь, когда у вас есть готовая концепция
сайта, его принципиальный макет, дизайн и все материалы, пора
приступить собственно к созданию сайта как такового. Настоящая
лекция достаточно сложна для восприятия и, по всей видимости,
к тому же и длинная, так что наберитесь терпения. Кроме того,
это первая лекция, когда вам для освоения материала понадобится
компьютер, все действия до этого можно и нужно было совершать
безо всякого компьютерного вмешательства (может быть, только
за исключением дизайна).
Сначала следует разобраться в структуре сайта.
Узел состоит из отдельных страниц, где каждая страница описывается
одним персональным файлом-сборкой и некоторым количеством
дополнительных файлов-включений (структура очень похожа на
файл Quark). То есть, для каждой страницы у вас должен быть
один общий файл (Htm, Html, Shtml, Dhtml, Xml и т.д.), который
описывает структуру страницы, а к нему прилагаются картинки,
возможно, программные модули, дополнительные модули, таблицы
стилей и прочее, что может понадобиться на этой странице.
Очень важно - на каждую страницу сайта должен быть создан
свой, отдельный и единственный файл-сборка, - именно этот
файл и будет выдаваться сервером в ответ на запрос от браузера,
именно на него вы будете ставить ссылки в навигации по сайту.
Элементы на странице связаны тегами - операторами
языка разметки страниц HTML. В отличие от других языков описания
страниц (PostScript, PCL и пр.), HTML чрезвычайно прост, поэтому
вы очень быстро и легко его освоите. В языке есть несколько
сотен тегов, однако, в своей повседневной работе вы вряд ли
будете использовать более 70-80 из них. Запоминать теги, конечно
не обязательно, - в процессе работы вы, со временем, выучите
их, однако знание тегов сделает вашу работу значительно комфортнее.
Куда печальнее другое: язык HTML имеет несколько стандартных
версий, из которых самые распространенные сейчас - это 3.0,
3.2 и 4.0. Следует учитывать, что чем старше версия языка,
теги которого вы используете, тем старше версия брузера нужна
для его корректного восприятия (номер версии браузера соответствует
номеру версии понимаемого им HTML), конечно, пользователей
IE 3 и NN 3 уже практически не осталось, но они, тем не менее,
есть. В связи с этим, старайтесь соблюдать стандарт, установленный
консорциумом WWW: HTML 4.0 или HTML 3.2, и у ваших посетителей,
а значит, и у вас возникнет значительно меньше проблем.
Между собой отдельные страницы узла связаны
гиперссылками, которые задаются специальными тегами. С помощью
гиперссылок можно связать не только любые две страницы, но
и вообще два произвольных объекта, так, чтобы при щелчке на
первом, браузер переходил на второй. Именно таким образом
организуется оглавление, если оно расположено на одной странице
с текстом.
Сайт в Интернете практически всегда располагается
на удаленном сервере, который может работать под одной из
версий Unix или под NT, причем первый вариант встречается
значительно чаще. То есть, если вы покупаете хостинг, о чем
я расскажу несколько позже, или располагаетесь на бесплатном,
не оговаривая ОС сервера, то, с вероятностью 99%, ваш сайт
будет располагаться на сервере с ОС Unix. Если ваш сервер
расположен на Unix-сервере, то следует быть очень внимательным
с названиями файлов и ссылками на них, поскольку Unix различает
прописные и заглавные буквы и воспринимает их, как разные,
следовательно, ссылка на страницу Beretta.html, записанная
как beretta.html, будет неработоспособной.
Существует два основных варианта создания
HTML-страниц. Первый - это работа с техническими редакторами,
такими как Home Site, Hot Dog, Ultra Pad и др. (при необходимости
можно использовать любой текстовый редактор, но по ряду причин
удобнее использовать специализированные). В таких редакторах
вы самостоятельно пишете код, видя перед собой именно текстовую
страничку с тегами. Конечно, редактор поможет вам в написании
тегов, проверит за вами строгость кода, даст посмотреть, ваше
творение в окне браузера, однако основная работа будет состоять
именно из скрупулезного написания, проверки и подгонки тегов.
Второй вариант - это WYSIWYG редакторы, с помощью которых
вы создаете визуальную картинку вашей страницы, то есть, имеете
дело непосредственно с блоками информации, которые произвольно
располагаете на странице, как это делается, например, в Word
или Page Maker. Самым известным в этой области редактором
является, пожалуй, Front Page производства Microsoft, а самым
лучшим (по отзывам многих дизайнеров) - Macromedia Dream Weaver.
Последний значительно менее популярен в силу своей дороговизны:
в сравнении с бесплатным Front Page (версии '98 и старше уже
не бесплатны), Dream Weaver стоимостью более 200 долларов
выглядит очень дорогой игрушкой.
Принципиальная разница между этими двумя
методами только в подходе: вы либо "делаете" страницу, либо
"программируете" ее. Соответственно, дизайнерские вещи, наверное,
проще делать в WYSIWYG редакторах, тогда как скоростная верстка
- это удел Home Site и подобных ему. Отсюда вытекают и особенности
той или иной верстки: программирование всегда более точная,
более структурированная работа, чем визуальное редактирование.
Споры по поводу того, какой редактор лучше использовать, вспыхивают
каждые насколько месяцев с новой силой, однако разницы между
подходами, кроме вышесказанной нет, поэтому выбирайте тот
редактор, который вам больше по вкусу. На мой взгляд, будущее
за визуальными редакторами, как это произошло в допечатной
подготовке (кто помнит сейчас первую Ventura, которая именно
программировала странички?), и со временем редакторы типа
Home Site будут вытеснены с рынка, как это произошло с DOS
Ventura и др. С другой стороны, сам я работаю именно в Home
Site, потому что в свое время мне это показалось более удобным.
Кроме двух вышеописанных способов для создания
HTML-страницы можно использовать множество "посторонних" программ,
которые умеют сохранять свои данные в этом формате. Из известных
мне программ такой возможностью обладают: Page Maker 6-6.5,
Corel 8-9, Office 97, Office 2000 (все программы). Пользоваться
подобными возможностями следует с большой осторожностью, и,
в любом случае, после программной генерации нужно вручную
проверять получившийся код.
Какой бы способ вы ни избрали для дальнейшей
работы (а может быть, и все сразу), я рекомендую вам обзавестись
книжкой по языку HTML, а также книжкой по программе верстки,
ежели таковая имеется (книжки можно посмотреть в разделе ). Несмотря на наличие в Сети большого количества
справочников и вспомогательных страниц, книгой почти всегда
пользоваться значительно удобнее. В конце лекции вы найдете
список рекомендованной литературы, я же в рамках этого курса
не буду касаться непосредственно описания языка HTML, тем
более, что руководств по нему более чем достаточно.
Итак, вы скачали и установили программу верстки
(нет, нет, не торопитесь, дочитайте лекцию до конца), положили
рядом с собой нарисованный макет и образец дизайна, книжку
по языку и несколько листов бумаги (все это вам пригодится);
теперь вы готовы работать. Первым делом создайте отдельную
папку для вашего проекта - в ней будет храниться весь ваш
проект и только он. Внутри этого каталога вы будете строить
структуру вашего будущего сайта: создайте отдельные директории
для каждой тематики, отдельную директорию для картинок - их
удобнее хранить все вместе (разбив отдельные категории картинок
на разные поддиректории), отдельную директорию для вложений
и дополнительных модулей. Грамотно составленная структура
каталога значительно облегчит вам жизнь, когда (неожиданно
быстро) ваш сайт вырастет на порядок. Перенесите сюда готовые
картинки (всегда сохраняйте исходные варианты в отдельной
папке), а файлы страниц создавайте непосредственно там, где
они и должны быть. Потом вы весь каталог загрузите на сервер
в Сети, поэтому будьте внимательны.
Внимание! Все
названия файлов, каталогов могут писаться только латинскими
буквами, без пробелов и знаков препинания. Вы можете использовать
неограниченное количество букв и цифр, разделяя их знаками
"-" и "_", а также точкой. Тем не менее, я не рекомендую
использовать более 10-15 знаков в названии, потому что
общий объем ссылки может превысить некий нелогичный предел,
после которого часть браузеров начинает "глючить".
Файл титульной страницы должен называться
index.html (или index.htm, shtml, dhtml и т.д.), т.к., именно
файл с таким названием будет загружаться на компьютер пользователя
при наборе в адресной строке адреса вашего сайта (вы же набираете,
фактически, адрес директории, а не конкретный файл с путем).
В очень редких случаях хостинг-провайдер может настраивать
свой сервер на выдачу по умолчанию файла default.html, но
это бывает так редко, что не стоит серьезного рассмотрения.
Некоторые трудности может вызывать гиперссылка,
если файлы, между которыми нужно ее поставить, находятся в
разных директориях. В этом случае нужно указать либо относительный
путь по дереву каталогов к файлу, на который вы ссылаетесь
или абсолютный путь (url). Первый вариант обычно предпочтительнее.
Например, вы хотите поставить ссылку между
файлами
work/site/about/owner.shtml
и work/site/advertising/job.shtml
относительная ссылка будет ../advertising/job.shtml, то есть,
мы сначала выходим из директории about, потом входим в директорию
advertising, где лежит нужный нам файл. Если же путь получается
очень длинный с большим количеством переходов, то, может быть,
проще поставить абсолютную ссылку или ссылку от корня сайта
(той директории, где лежит файл индекса), в последнем случае,
перед первым каталогом ставится прямой слэш:
/advertising/job.shtml (в данном случае предполагается, что
каталог advertising является поддиректорией корневой директории
сайта).
Прежде чем приступать непосредственно к верстке
конкретных страниц, заготовьте шаблон в соответствии с вашим
макетом и сохраните его отдельно. Теперь, вместо того, чтобы
писать коды каждой страницы заново, вы можете просто открыть
шаблон и, сохранив его новым файлом, внести изменения, и вот
- страница готова. Большинство продвинутых редакторов (как
текстовых, так и визуальных) позволяют сохранять шаблоны именно
как шаблоны, то есть, при создании нового файла будет выбираться
заданный шаблон, а не просто пустая страничка. Более того,
вы можете сохранить и несколько шаблонов, используя их по
мере необходимости. Хорошо продуманный и грамотно созданный
шаблон позволит вам, впоследствии, создавать страницы буквально
за несколько секунд.
Продолжение - в следующем номере. 25.01.2001
"Ясли-сад"
Федора Вирина для Народа
/ Лекция 4. Дизайн.
Вот мы и подошли с вами к "философскому камню"
всех веб-дизайнеров. Фантастическое количество людей говорит
о дизайне, как о каком-то фетише, поклоняясь ему, в том числе,
и с принесением человеческих жертв. В то же время, ситуация
складывается несколько иная, чем может показаться на первый
взгляд. Дизайн - это профессия (чтобы быть точным - ремесло),
которой обучают в нескольких вузах России, причем делают это
хорошо. Например, можно получить образование дизайнера в "полиграфе"
(конкурс 10 человек на место), МАрхИ (10-15 человек на место),
Текстильной академии (5 человек на место) и нескольких других.
При огромном конкурсе на поступление в эти учебные заведения,
все они вместе выпускают каждый год не менее сотни квалифицированных
специалистов, что почти удовлетворяет потребности существующего
рынка труда. Если вы занимаетесь (или планируете) заниматься
изготовлением сайтов на заказ, то, возможно, имеет смысл получить
профильное образование, тем более, что образование - это всегда
не только и не столько бумажка.
Однако вернемся к собственно дизайну вашего
сайта. В нижеследующей лекции я постараюсь рассказать некоторые
основные принципы и подходы к созданию внешнего облика вашего
сайта, приведу примеры, как хорошие, так и плохие, на которых
можно поучиться. И первый же совет, который я хочу вам дать:
"обратитесь в дизайн-студию, если вы не уверены в своих силах".
Конечно, это будет не бесплатно, но вы сэкономите собственное
время и, скорее всего, получите более удачный вариант, чем
вы сделали бы сами. Зато единовременная оплата услуг студии
позволит вам в дальнейшем избежать потерь из-за некачественного
внешнего вида сайта (особенно, если ваш сайт - торговый).
На мой взгляд, обращение в дизайн студию - это оптимальный
выход для издателя, не имеющего соответствующего опыта и знаний
в дизайне. Список дизайн-студий (неполный, конечно) вы найдете
в конце лекции.
Выбирая студию для размещения заказа, не
бросайтесь ни в самую дешевую (потому что это "по карману"),
ни в самую дорогую (несмотря на то, что это "круто"). Также
не стоит обращаться и в первую попавшуюся студию, рекламу
которой вы случайно углядели в модном журнале или на крупном
портале, - скорее всего, вы не будете удовлетворены. Внимательно
изучайте работы студии (благо, каждая уважающая себя студия
обязательно указывает ссылки на свои предыдущие работы), смотрите,
какая стилистика вам нравиться, какие цветовые сочетания вам
кажутся наиболее приятными. Не стесняйтесь задавать вопросы
и учтите, что хороший дизайнер редко делает что-либо просто
так, а следовательно, он может объяснить смысл и значение
любого элемента в своей работе. Только посмотрев работы студии
и поняв, что они вам нравятся, определив, что студия сможет
выполнить необходимую вам работу (ведь сайт - это не только
дизайн, но и программно-аппаратная часть), и, кстати, определившись
с тем, что же именно вы сами хотите, обращайтесь уже за прайс-листом
студии.
Если вы собираетесь разрабатывать только
внешний вид сайта, не затрагивая ни обработку контента, ни
создание сложных баз данных, ни программирование CGI-скриптов,
то вам не нужна дорогая фирма с солидной репутацией - сила
таких студий (например, Infoart) в разработке программной
части, которая вам, фактически, не нужна. Теоретически, вам
достаточно одного хорошего дизайнера, который просто нарисует
вам одну-две страницы, а вы потом самостоятельно напишите
для нее коды, то есть - воплотите "в цифре". Хотя, конечно,
лучше обратиться к дизайнеру, который специализируется именно
на www, поскольку, он уже знает требования, которые предъявляет
Интернет к издателю, и вам не придется потом потеть, верстая
страницы по созданному неопытным дизайнером шаблону.
Когда вы будете обращаться к дизайнеру
или в студию, то не забудьте принести макет, который вы
сделали, с его помощью вам будет значительно проще объяснить,
что именно вы хотите в конечном итоге увидеть. В свою
очередь, дизайнеру будет легче сделать именно то, что
вы от него ждете. Вообще общение с дизайнером (как и общение
с заказчиком) - чрезвычайно сложная и трудоемкая задача,
которая порой превращается в разговор слепого с глухим.
Чтобы у вас возникало поменьше затруднений, примите как
данность, что дизайнер разбирается в дизайне гораздо лучше,
чем заказчик, и в состоянии выполнить работу в соответствии
с вашими пожеланиями, тем более, что его предыдущие работы
вам понравились. Поэтому не стоит спорить с дизайнером
по мелочам, а лучше просто выдать ему принципиальные схемы
и сетки, которые у вас уже есть на руках, и сообщить необходимые
подробности (о предполагаемой аудитории, целях и задачах
сайта) и приоритеты (что для вас самое главное). Многолетний
опыт убеждает, что больше всего дизайнеров впечатляет
фраза "сделайте красиво" вкупе с неограниченными рамками
для творчества. То есть: работая с дизайнером, доверяйте
ему!
Если же вы решили обойтись собственными силами,
то придется изрядно поработать. Все же дизайн, хоть и ремесло,
но работа-то творческая, поэтому алгоритма создания гарантированно
красивой вещицы нет и быть не может. Тем не менее, есть несколько
ключевых моментов, которые помогут вам в работе.
Начните с того, что разработайте цветовую
гамму для вашего сайта. В работе обязательно учитывайте направленность
вашего сайта, его задачи, контролируйте образ, который возникает
у посетителя вашего ресурса, поскольку цветовая гамма имеет
не только эстетическое, но и глубокое психическое влияние
на человека. На эту тему я рекомендую прочесть вам серию статей
Константина Львовича Лидина (список литературы есть, как обычно,
в конце лекции) о цветоведении в скрин-дизайне. Крайне желательно
иметь единую цветовую гамму по всему сайту, по крайней мере,
если вы нарушаете это единство, то должны четко осознавать
в каких целях вы привносите диссонанс на свой ресурс. Очевидно,
что дизайн ресурса (аналогично единообразию макета и как следствие
этого), должен быть выдержан в едином стиле для обеспечения
комфорта пользователя и создания цельного впечатления от узла,
как от неделимого источника информации (развлечений, покупок
etc.), а не как набора отдельно взятых страниц. И одним из
механизмов создания единого облика является цветовая гамма.
Тогда, если вы захотите выделить какой-либо раздел, то вам
будет достаточно ввести один дополнительный цвет или оттенок
и ваш раздел, не нарушая общей цветовой гаммы ресурса (то
есть, не выпадая из общей картины), будет иметь собственную
индивидуальность.
Некоторое время назад мне довелось прочесть
статью, где один "чудо-дизайнер" рассуждал: "я открываю PhotoShop
и набрасываю туда много всякой всячины: смешные картинки,
орнаменты.., а потом стараюсь из всего этого собрать страницу".
Так вот, так делать не надо! Дизайн - это, прежде всего,
стилистика, преследующая определенную цель по разрешению поставленной
перед дизайнером задачи (увеличение продаж, привлечение клиентов,
создание моды или модного течения, социальная реклама…), а
о какой стилистике можно говорить при работе "методом набрасывания"?
Это не дизайн, а "художества".
Лучше всего взять белый лист бумаги и попробовать
нарисовать на нем то, что вам хотелось бы видеть, пусть то,
что вы делаете, будет похоже на детские каракули, но, в конце
концов, вы же рисуете для себя и показывать свою работу до
ее завершения никому не собираетесь. Изложив свои мысли в
виде образов на бумаге, вы получите нечто наглядное, что-то,
что уже можно редактировать, обрабатывать, исследовать, в
целом - то, с чем можно работать. Если вы затрудняетесь определить,
что именно вы хотите (наиболее частая ситуация: "чего-то хочу,
а чего не знаю" или "все это не то, а что нужно - не знаю"),
то побродите по Сети. Начните с дизайн-студий: поройтесь в
их портфолио, затем посмотрите на художественные, развлекательные,
рекламные сайты и ищите идею, которую вы сможете использовать
в своей работе. Не копируйте чужие наработки, но используйте
идеи. Синтезируйте и объединяйте их между собой, сочиняйте
что-то свое, отталкиваясь от чужих наработок. В общем, учитесь
на чужих работах создавать свои.
Как я уже говорил, главное - это единый образ
вашего ресурса, поэтому стоит обратить пристальное внимание
на общность шрифтового и графического оформления. Используйте
единый шрифтовой тег для всех заголовков ресурса, для близких
по смыслу элементов и пр. Вообще, постарайтесь использовать
побольше одинаковых элементов в облике своих страниц. Помимо
увеличения узнаваемости, это также снизит общее время загрузки,
поскольку уже загруженные один раз элементы будут забираться
браузером из кеша на локальном диске компьютера пользователя.
Такие, повторяющиеся элементы часто называют "фишками", поскольку,
становясь узнаваемым атрибутом узла, они начинают "держать"
всю картинку, как бы говоря "я стою здесь, следовательно,
все это принадлежит к таком-то семейству". Фишкой может являться
логотип или товарный знак, либо какая-то узнаваемая часть
этого знака. Например, если центральным элементом в вашем
логотипе является синий треугольник, то вы можете использовать
его потом во всех страницах ресурса, начиная с элементов оформления
меню (например, каждый пункт выделен синим треугольником),
и заканчивая завершающей пулей в тексте (значок, ставящийся
в начале или конце статьи, для остановки читателя, более свойственен
для журналов).
Конечно, хорошо, если эта фишка будет хоть
как-то визуально ассоциироваться с тематикой вашего сайта,
но, к сожалению, этого не всегда можно добиться. Поэтому иногда
делается наоборот: придумывается фишка, а потом с ней ассоциируется
уже тематика, т. е. фишка искусственно привязывается к тематике.
Если же в оформлении входной страницы сайта вы использовали
фотографию, рисунок или коллаж, то впоследствии вы можете
вырезать смысловую часть рисунка и использовать именно ее
в качестве фишки по всем другим страницам.
Посмотрите, как работают признанные, известные
дизайнеры: , , (журнал "КАК") и др. Никогда не вредно
учиться у профессионалов. Обратите внимание на используемые
ими в оформлении принципы композиции, цветовые решения, решения
пространства. Внимательно изучайте работы и старайтесь понять
принципы взаимодействия тех или иных элементов страницы, стержень
композиции, а поняв, попробуйте использовать схемы решений
в своих работах. Единственно, чего не надо делать, это клонировать
чужой дизайн. Во-первых, это пойдет на пользу не вам, а тому,
кто его придумал, поскольку ваш сайт не будет иметь собственного
лица, а во-вторых, можно и нарваться: по меньшей мере, на
"музей клонирования", а в худшем случае, от вас могут тем
или иным способом потребовать закрытия сайта.
Очень важная область дизайна - типографика
- шрифтовое решение композиции. К сожалению, в отличие от
печатных изданий, современные веб-возможности ограничены двумя
группами очень похожих и не очень красивых шрифтов: рублеными
(Arial, Verdana etc.) и антиквами во главе с Times New Roman.
Все остальные шрифты могут оказаться не установленными на
компьютере пользователя, и их использование регулярно приводит
к невозможности посетителем прочесть ваше послание, - вместо
текста будут показаны жуткие закорючки. Если же вам необходимо
написать текст каким-нибудь особенным шрифтом, то используйте
gif изображение для всего текста (например, для заголовков)
или для каждой буквы в отдельности, что гораздо экономичнее,
но чрезвычайно трудоемко (так, например, сделан сайт журнала
"КАК"). Тем не менее, как бы вы не ухищрялись, использование
текста в виде картинок приведет к многократному (sic) увеличению
объема страницы, что крайне нежелательно, учитывая современные
средства связи и загрузку интернет-каналов. Поэтому стоит
подумать о том, чтобы суметь выразить представляемые вами
образы существующими средствами, не используя громоздкие картинки.
Таким образом, из всего арсенала шрифтовых
решений, которое может быть использовано в печати, веб-дизайнеру
остается только два с половиной шрифта и 7 размеров. Не густо,
конечно. Есть надежда, что ситуация скоро сдвинется с мертвой
точки. Во-первых, использование CSS (о ней вы прочтете в следующих
лекциях) позволяет задавать размер шрифта в пунктах, а количество
браузеров, поддерживающих CSS уже достаточно велико, чтобы
можно было на них смело ориентироваться. Во-вторых, недавно
появилась система динамически подгружаемых шрифтов, которые
можно использовать, не опасаясь последствий, поскольку при
нахождении указания на такой шрифт браузер автоматически сгружает
его с указанного сервера и устанавливает (при условии работы
на платформе windows). К сожалению, я пока не нашел ни одного
руссифицированного шрифта такого рода. Создавая шрифтовое
решение для сайта, обязательно выписывайте шрифты, которые
вы используете и их размеры, чтобы потом не запутаться. Еще
раз подчеркиваю: не стоит полагаться на свою память, ей и
так предстоят нелегкие испытания.
В дизайне большое значение имеет Мода, что
легко заметить по рекламным материалам, оформлению бытовых
приборов и их упаковки, газетам, и, в меньшей степени, по
журналам. Например, сегодня очень популярен так называемый
soft design - плавные линии, отсутствие острых углов, по возможности,
белый цвет или приглушенные, иногда пастельные тона. В печатных
изданиях царствуют линеечки и треугольнички с кружочками -
большое количество выделяющих, отчеркивающих и акцентирующих
линеек и полукругов делают страницы похожими на графический
рисунок или даже чертеж (компания "Терем" около двух лет назад
логически завершила эту моду и оформила свою рекламу в виде
старого чертежа прошлого века). Точно так же мода диктует
свои условия и в веб-дизайне. Хорошим примером модного сайта
является узел Samsung или, например новый дизайн баннерной
сети RLE. Следовательно, мода не столько выделит вас из общей
массы, но сделает вас внешне более современным, и, соответственно,
динамичным. Мода очень активно продвигается на рынке, вдалбливаясь
в мозги пользователей, поэтому быть немодным означает проигрывать
в глазах посетителей тем вашим конкурентам, которые моде следуют.
Срабатывает "эффект бивиса-батхеда: "это же крута, Баклан",
причем, этот эффект работает не только на 15-летних подростков,
но и на взрослых, вполне сформировавшихся личностей, нужно
только грамотно его использовать (а как вы думаете, почему
ВАЗ 110 так популярен? - не такая уж это хорошая машина).
На самом деле, вопрос следования моды касается не столько
дизайнера, сколько маркетолога, а также идеолога всего сайта
целиком, но задуматься о нем, наверное, стоит до того, как
вы начали что-то делать руками, чтобы потом не пришлось переделывать.
И, напоследок, один очень большой секрет
всего дизайна: мой многолетний опыт работы и с печатными,
и с онлайновыми рекламными материалами и дизайнерскими работами
убеждает в том, что обычному пользователю, по большей части,
совершенно наплевать "что у них там нарисовано". Подходя к
дизайну с точки зрения "я бы такую картинку на стенку не повесил",
человек проходит мимо самых лучших дизайнерских наработок,
причем, к заказчикам это относится не меньше, чем к потребителям.
Куда важнее пользователю - удобен ли ваш сайт для изучения,
естественна ли его система навигации, а собственно дизайн
- это не самая важная на свете вещь. Увы, но это так.
Рекомендованная литература:
Книжка "Как сделать красиво в Интернете"
Лидин К.Л., Меерович М.Г.:
. .
на английском языке
Ссылки по теме:
Дизайн студии:
Продолжение - в следующем номере. 07.12.2000
"Ясли-сад"
Федора Вирина для Народа
/ Лекция 3. Материалы. Часть 4.
Об
иллюстрациях вообще
Принято считать разрешение мониторов равным
72 dpi. Поэтому все изображения для web следует подготавливать
именно с таким разрешением, несмотря на то, что в действительности
на вашем мониторе разрешение будет совсем другим (72 dpi -
разрешение старых 14' дисплеев). Также обязательно учитывайте,
что в вашем распоряжении есть не более 600-700 точек по ширине
экрана, - удерживайтесь в рамках, чтобы избежать горизонтальной
прокрутки изображения.
Как уже говорилось выше, формат JPEG предназначен
для очень сильного сжатия изображения, однако и формат GIF
тоже можно сжимать, причем достаточно эффективно. Принцип
сжатия основывается на унификации цветовых палитр (теоретически,
каждый кадр внутри файла может иметь собственную цветовую
палитру, что заметно увеличивает размеры файла) так, чтобы
итоговая палитра была только одна для всех изображений и содержала
не больше необходимого минимума цветов. Кроме того, осуществляется
уничтожение ненужных служебных записей и сжатие каждого отдельного
кадра, а наиболее сильные в этой области программы сравнивают
последовательно показываемые кадры и записывают в последний
из них только изменения первого, таким образом, получается
полтора кадра вместо двух. В результате, грамотно сжатый GIF
может занимать до четверти исходного файла. Если же, несмотря
на все ухищрения, впихнуть файл в установленные (например,
баннерной системой) рамки не удается, то придется выкидывать
кадры, при этом снизиться плавность анимации, однако и размер
кадра при этом прилично уменьшится.
Несколько слов о подготовке фона. Не нужно
подготавливать подложку формата предполагаемой вами страницы,
более того, это даже очень вредно, поскольку вы имеете очень
много шансов, что большая доля вашей аудитории будет иметь
другое разрешение экрана или, по меньшей мере, другой формат
окна браузера. Подготовьте изображение форматом 100*100 точек
и браузер сам повторит его по всему полю экрана пользовательского
монитора. Конечно, в данном случае возникает проблема создания
повторяющегося изображения, но существует довольно большое
количество клипартов на эту тему, некоторые ссылки вы найдете
в конце лекции. Также у вас есть большой простор для творчества
в PhotoShop, где можно сделать все что угодно; очень удобным
фильтром для создания повторяющихся тонов является Texturizer
и Andromeda (последняя - отдельно устанавливаемый фильтр).
Подогнать края также можно, немного растушевав 5-6 пикселов
по обрезу картинки.
В зависимости от назначения изображения стоит
придерживаться следующих эмпирических размеров:
Для большого баннера 468х60 - не более
15 kb - это требование большинства баннерных сетей
Для кнопок навигации - 1-2 kb, чтобы они
не перегружали страницу.
Для основного изображения - не более 100
kb, причем, только в том случае, если изображение самое
главное содержание конкретной страницы (например, репродукция
картины).
Для фонового изображения - 5 kb, но лучше
сделать фон не более 3 kb.
Все эти размеры, теоретически должны укладываться
в общую величину 70-100 килобайт на страницу, хотя, надо сказать,
что и эти цифры достаточно высоки для средних страниц, обычно,
если вы не слишком увлекаетесь анимацией и Java, общий объем
не будет получаться более 30-40 kb (если это не галерея картинок).
Продолжение - в следующем номере. 26.11.2000
Работа
с изображениями
Сейчас мы говорим только о тех картинках,
которые составляют содержание вашего сайта, а не являются
элементами его оформления (о них речь тоже пойдет, но всему
свое время). Чаще всего, контентными изображениями являются
семейные фотографии (походные, свадебные, институтские и пр.),
иллюстрации продаваемой продукции, рисунки или картины (особенно,
если сайт посвящен художнику), кадры из фильмов, скриншоты
игрушек и… несть им числа. Иллюстрации - это и благо, и бич
Интернета. Благо, потому что с их помощью вы можете лучше
донести до посетителя нужную информацию, - визуальные образы
практически всегда более наглядны и понятны, нежели описательные.
Фактически, без картинок (а значит, и без WWW) Интернет бы
не переживал сейчас такой бум, который мы можем наблюдать
последние два-три года, когда объемы подключений растут в
экспоненциальной прогрессии, а за новыми пользователями следует
рост информационного наполнения, финансовых инвестиций; развитие
элементарной базы, не говоря уже о таких супер-проектах, как,
например, SETI@HOME - распределения вычислений для решения
сверхсложных задач. В то же время, современные скорости работы
телекоммуникационного оборудования, составляющего "железную"
основу Интернета, не в состоянии предоставить веб-мастерам
того комфорта при работе с изображениями, который есть у дизайнеров
печатной продукции. В результате, вы, как веб-мастер, все
время должны помнить об объеме получающегося изображения,
чтобы вашим посетителям не пришлось полчаса ждать его загрузки
(вы сами стали бы столько ждать?).
Существует два основных формата графических
данных, используемых в веб-мастеринге - это GIF и JPEG, хотя
они и не единственные, но на данный момент наиболее распространенные.
Формат GIF используется для презентационной (деловой) графики:
схем, диаграмм, графиков, а также для анимации, однако если
в вашем распоряжении есть подлежащая выкладыванию на сайт
цветная фотография, то лучше использовать JPEG.
Формат GIF
Изображение не может содержать более 256
цветов (именно поэтому он не пригоден для фотографий), файл
может содержать несколько изображений и описание, отражающее
последовательность их воспроизведения, то есть, может использоваться
для записи анимации. Формат поддерживает прозрачный фон, что
делает его чрезвычайно удобным, когда есть необходимость размещения
какого-либо графического элемента на сложной текстуре. Анимированные
GIF умеет делать PhotoShop версии 5.5, совмещенный с ImageReady
(последняя программа может поставляться отдельно). Кроме того,
существует огромное количество программ сторонних разработчиков,
которые поддерживают как анимированные, так и статичные GIF,
в том числе и специально приспособленные к работе с изображениями
для Интернета. Одной из лучших программ можно считать Ulead
GifAnimator версии 2 и выше (на момент написания лекции, кажется,
вышла уже четвертая), а также Gif Construction Set версии
не ниже 1.3. Все эти программы позволяют очень качественно
"сжимать" полученные файлы, эффективно уменьшая их объем.
Формат JPEG
Содержит не менее 8 бит на канал, то есть
может содержать только полноцветное (true) или серое (grayscale)
изображение, а следовательно, плохо приспособлен для деловой
графики. Важное отличие от GIF (как и от других графических
форматов) - искажающее сжатие, которое позволяет вам получить
изображение очень маленькое, но настолько же далекое от совершенства.
Алгоритм сжатия основан на удалении части цветовой гаммы изображения,
с учетом того, что в целом и сложном изображении человек не
очень хорошо различает близкие цвета. За счет этого изображения
могут быть сжаты в несколько сотен раз, однако, чем больше
сжатие, тем больше полутонов удаляется и тем заметнее искажения
в изображении. Формат JPEG поддерживается всеми современными
графическими программами, включая и самые простые. При работе
с картинками для web я рекомендую использовать сжатие от 4
до 6, в зависимости от исходных размеров изображения, и прогрессивное
сканирование оригинала (изображение анализируется последовательно
несколько раз - это умеют не все программы, но PhotoShop версии
4 и выше понимает без проблем). При работе с этим форматом
обязательно сохраняйте исходное изображение в формате Tiff
или собственном формате рабочей программы, создавая JPEG файл
только в самом конце работы, поскольку сжатие происходит при
каждом сохранении файла, следовательно, ошибка будет накапливаться
и с каждым сохранением вы будете получать картинку все более
и более низкого качества.
Здесь
представлен архив 
