1. Web дизайн.—>>
4. Как сделать стильный WEB-сайт.
Сделай свой сайт привлекательнее
В Интернете полно страничек всяких и разных. На одни ты заходишь из-за часто появляющейся нужной тебе информации - девочки и все такое,:) на другие ты заходишь порадовать глаза - опять девочки и все такое,:) а на некоторые вообще не заходишь - там, наверное, мальчики.:) Но я не к этому клоню, а к тому, что, к примеру, ты ищешь какую-то информацию по интересующей тебя теме. Первым делом ты топаешь на поисковый сервак и ищешь интересующие источники по ключевым словам. Вот долгожданный список.
Мазафака, он же на километры вниз... Это еще полбеды - часть источников отпугивает сразу же внешним видом или нечитабельностью. Бывает навигация для дебилов :) или куча ненужной рекламы, а потом с гулькин глаз, а не то, что ты подумал, :) информации. А для кого тогда делают такие кривые и неприступные для нормальных людей сайты? Да скорее не для кого, а кто и как. :) Это ламеры, которые не читают Х и не знают, как сделать свой сайт более привлекательным, да и руки у них растут ниже коленок. Я тут опишу децел соображений на тему привлекательности твоего сайта, а ты сам поднатужься, подумай (хоть раз в жизни), как это все хозяйство приспособить.
Первое, с чего начинается саит - доменное имя. Если ты делаешь его только для себя любимого, ну и еще котенка Пинка, то тебе название www.пустыня_сахара.соm/~первый_бархан/поворот_налево/чуть_вниз/твоя_пага вполне подойдет. Если же сайт предназначен для более широкой аудитории, хотя бы возьми себе домен www.твоя_пага.dа.гu, благо это бесплатно. Если твой проект перспективен и будет иметь большую аудиторию, то можешь вполне получить домен третьего уровня у провайдера. Например, компания Синхролайн (www/.sl.ru) под перспективные проекты готова дать домены www.твоя_пага.sl.ru и www.твоя_пага.xxi.ru, а компания Зенон (www.aha.ru) под перспективные проекты готова дать домены www.твоя_пага.hobby.ru. Я думаю, таких примеров еще полно, и если ты реально имеешь перспективный проект - свяжись с провайдерами и поговори, просвети что к чему. :) Есть еще такая распространенная фича, как регистрация по чужим аккаунтам доменов www.твоя_пага.com и www.твоя_пага.net, но это уже надо уметь сотворить, а потом сейчас, по-моему, это стало сложнее, и они регистрят по предоплате, но в любом случае сайт будет грузиться быстрее, если он лежит в России, чем в Штатах.:) Да и места тогда будет ограничено, а по договоренности под хороший проект ты сможешь выпросить у наших провов золотые горы, они как бы тоже не дураки, и клевые сайты им нужны, а там, глядишь, и на работу возьмут.:) Ну, типа, ты понял, :) едем дальше. А дальше ты, собстно, делаешь свой сайт. Начну заходить издалека...
Первым делом ты выбираешь, как делать страницу: с фреймами, без фреймов, со скриптами, без скриптов, с генерацией на лету и т.п. Что касается фреймов, отношение к ним однозначно отрицательное. Почему? А потому что они только съедают место, усложняют структуру страницы, точнее упрощают в смысле изготовления, но нагружают в смысле восприятия. Ты сразу скажешь, мол, ни фига подобного, что, мол, иначе так не сделать, а с фреймами все удобно и пучком. Ничего подобного, а всего того же и даже круче можно добиться с помощью обычной таблицы, просто сложнее делать страницу, так как структуру приходится планировать изначально, а если присутствует меню, то таскать его по всем файлам, поэтому сайт лучше продумать заранее, чтобы потом было удобнее добавлять новые разделы и инфу. Открой наугад самый навороченный сайт и найди там хоть один фрейм…
Со скриптами дела обстоят другим макаром. Если ты прекрасно знаешь яву или яву-скрипт - пиши на здоровье, но если ты в этом новичок и латаешь потом часами дыры в скриптах, то стоит задуматься. Зачастую криво написанные скрипты глючат или грузят ресурсы машины, что потом в результате просто отпугивает посетителя похлеще тухлой колбасы. И вообще я, к примеру, приверженец плоского хтмл, но бывают вещи, которых без скриптов ты просто не сделаешь, особенно это касается коммерческих проектов. Но и это не критично, руби в своей области, а чувака программиста в принципе всегда найдешь, что, друзей что ли мало. :)
Ну, это крутая фишка. Под ней я понимаю генерацию кода при вызове страницы, это используется, к примеру, на тех же поисковых системах: при поиске чего-либо страница с результатами генерится по ходу дела, это все сделано обычно на Perl, но щас появился еще стандарт php. Сюда же можно отнести базы данных типа mySQL, в которых хранится информация, на основе которой потом и можно генерить содержимое страниц. Но эти все дела уже требуют основательных знаний в Perl и mySQL, а также Unix, так как потребуется выставление атрибутов для файлов, чтобы все работало. Если ты, чувак, в этом круто рубишь - беги искать работу :) Таких перцев сейчас ищут все конторы (дизайнерские).
Далее еще встает вопрос, под какими разрешениями будет хорошо смотреться твоя страница и какими браузерами ее смогут разглядеть. Тут фразы типа "мой любимый браузер ИЕ, и я буду фигарить тока под него" - не катят. Нужно делать, чтобы видели все и под всеми браузерами. Под ИЕ2 косить, конечно, не стоит, :) но, уж хотя бы начиная с ИЕЗ и НетШкафаЗ, твоя пага должна быть видна неизменно. Чтобы этого добиться, нужно использовать теги, которые поддерживают все браузеры, а то, что различается, либо вставлять вместе с проверкой на браузер или заменять графическими изысками. Применение стилей и форматирование - это все здорово, но этого не поймут старые браузеры, поэтому глянь хоть раз, как это смотрится в них, чтобы не потерять часть аудитории. Если ты ставишь каждый вечер новую бету-версию браузера, то не факт, что в каком-то институте уже сменили ИЕЗ на новый. Можно, конечно, наплевать на контингент отсталых, но, поверь мне, что сталеросовых ой как много, и ты потеряешь столько же много посетителей.:)
Далее о разрешении... Спорный вопрос - делать для разрешений от 640х480 или от 800х600, ведь в принципе сейчас почти у всех минимум 800х600, но именно почти, а не у всех, так что выбирай сам. Сайт делают по двум направляющим: либо фиксированный по ширине и помещающийся на минимальном разрешении (какое выбрал), а на всех больших просто остается таким же и, к примеру, центруется, либо делается на 100% по ширине и просто расползается в зависимости от расширения. Я сам люблю делать фиксированный, и мне нравятся отцентрированные сайты. Но на вкус и цвет колбаса разная. :)
Итак, ты выбрал, допустим, что твой сайт будет без фреймов для браузеров от ИЕЗ (НетШкафЗ) и выше и виден будет под всеми расширениями от 640х480. Осталось придумать структуру сайта и подобрать цвета для оформления. Вроде фигня фигней - ан нет! Это чуть ли ни самое важное при ваянии сайта. Что касается структуры и навигации, то старайся придерживаться правила, что всего ты должен достигать не более чем за два клика, тогда любой зашедший будет находить все, что надо, да и индексация поисковых систем пройдет продуктивнее (поисковые машины имеют определенную глубину индексации по ссылкам). Если структура более сложная, и избежать ветвлений невозможно, то обязательно сделай карту сайта (раздел, в котором будет показано ветвление сайта со ссылками во все узлы). Навигацию делай ненавязчивой и занимающей как можно меньше полезного места, но при этом наиболее эффективной и позволяющей свободно передвигаться взад, вперед и налево.:)
Тэкс, это ты вроде просек. С цветами тоже децел заморочка. Ты можешь, конечно, вывести гигабайтную полиграфию с миллиардами цветов, бить себя в грудь, смотря это на супер-пупер мониторе профессиональной серии. Но нужно помнить несколько моментов: графика должна как можно меньше весить, чтобы сайт грузился как можно быстрее, не у всех крутые мониторы, и все твои старания сведутся к близким цветам, что может конкретно исказить картину или вовсе все испортить, да и к тому же есть ограничения по отображению сразу нескольких цветов. По-хорошему надо выбрать определенную палитру и тащить ее через весь сайт, оживляя анимацией и графикой. Надо попытаться сделать сайт как можно выразительнее, но при этом не перегрузить его графикой и палитрой и оставить легко читабельным Что касается фона, это дело вкуса и дизайна. Самым читабельным считается естественно белый (в книжке ты вроде читаешь черное по белому), но и зацикливаться на этом не стоит: можно сделать вполне читабельным и на цветном фоне и совсем нечитабельным на белом. :) Но кроме фона и графики, нужно еще как-то сочетать эту самую палитру. Есть мнение (кстати, его поддерживает Уткин), что хорошо сочетаются цвета, кратные 3-м, то есть состоящие из 0, 3, 6, 9, F, С. Например, цвет #9F9ССF красиво смотрится на фоне #FCFCFC и т.д. Но это опять же совсем не обязательно, так как может еще зависеть от графики, расположенной на сайте. Одним словом, пробуй так, пробуй сяк и старайся смотреть на разных мониторах. Относительно графических форматов. В вебе используют в основном всего 2 формата: gif и jpg. Первый используется там, где нужно не более 256 цветов или нужна прозрачность, либо анимация. А там, где нужно гораздо больше 256 цветов (фото, иллюстрации и прочее), используется второй, то бишь jpg. К тому же есть немереное количество оптимизирующих программ (да хоть тот же ФотоЖоп), которые позволяют сбрасывать у jpg размер без особой потери качества.
Тэкс, что я еще не рассказал? Ах, ну да, я еще не упомянул о шрифтах. Я, конечно, понимаю, что ты недавно поставил себе диск 2000+ шрифтов и все такое. Но только не надо выливать все 2000 на один сайт. :) Юзер просто одуреет от этого разнообразия и больше не придет. Принято вообще придерживаться только одного шрифта на всем сайте, но можно добавить еще парочку для смысловой нагрузки заголовков и навигации, но не перебарщивай. Ты пробовал читать роман "Мастер и Маргарита", написанный десятью шрифтами? :) Я думаю, стошнило бы после первых 20 страниц.:))
Что касается размещения всех дел на сайте, то старайся все делать компактнее и занимать как можно больше полезной площади. Как именно, совет дать невозможно. Нужно смотреть для каждого отдельного случая и править, визуально наблюдая. Проще всего набраться опыта компоновки и уловок, ползая по другим хорошо сделанным сайтам и временами посматривая код (View Source). Хотя со временем тебе код будет уже не так важен, как сама идея, которых полно в Интернете. Это, конечно, не значит, что, мол, замкнись, чувак, и ни в коем случае не думай сам, а все смотри в Интернет.:) Нет, конечно же, ваяй сам, но когда музу кто-то подстрелил, можно и на чужих посмотреть.:)
Еще хотелось бы сказать по поводу графических изысков. Не бойся рисовать. Первая буковка в абзаце, замененная на графический аналог, значительно преобразит этот самый абзац. А указатели, как в теге ul, можно и вовсе сделать самому намного красивее. Да и та же таблица. Ставь по жизни border=0, а нужное обрамление рисуй сам, просто добавляя еще ячейки по краям и вставляя это обрамление как графику. Одним словом, побольше своего. А анимация? Ну на фига тебе анимированный гиф, нарисованный вон тем лопоухим? :) Скачай себе любую прогу для создания анимации (о таких прогах ты сможешь прочесть в этом же номере) и твори. Анимацию делать совсем не сложно, просто рисуешь отдельные кадры, а потом собираешь их в проге, расставляя нужные задержки по времени между ними. И аля оп - твой собственный гиф. :) А вот уже подсмотреть, как сделаны чужие анимашки, или содрать оттуда некоторые кадры, это милое дело.:)
Ну и напоследок о рекламе и всяких рейтингах, а также поисковых системах. С чего бы начать...
Поисковые системы - это такие сервисы, которые предоставляют поиск по многотысячным ресурсам Интернет по разным критериям: ключевым словам, категориям и т.п. Для пополнения своих баз они предоставляют всем желающим зарегистрировать у них свои сайты, типа тебе тоже можно. :) Таких поисковых систем не так много, но и не так мало. Но достаточно знать хотя бы несколько основных, а остальные можно найти в них же по тому же слову поиск или search. Среди наших - www.rambler.ru, www.au.ru, www.aport.ru и т.д. Среди англоязычных - www.yahoo.com, www.altavista.com и т.д. Регистрация в поисковых системах ой как необходима, так как почти все прибегают к их помощи при поиске нужной информации. Некоторые поисковые системы предлагают кроме регистрации еще и принять участие в рейтинге, который можно просматривать отдельно и который обычно еще делится на подкатегории, то есть твой сайт будет участвовать в рейтинге по какой-то одной тематике и не мешаться с другими тематиками. В качестве примера поисковиков с рейтингом смотри www.rambler.ru, www.list.ru и т.д. Тут уже смотри сам, если на твой сайт не ходит даже 100 человек, то тогда затея с рейтингом сомнительна, так как все равно ты будешь где-то далеко в... внизу. :). Но если твой сайт раскручен, то рейтинг порой не помешает, другое дело, что выставляй счетчики не всех подряд (иначе твой сайт будет напоминать "Мурзилку"), а только самых раскрученных рейтингов и с хорошей репутацией.
Есть еще одна феня - обмен баннерами. Это некая система, в которой при регистрации ты получаешь код, который произвольным образом показывает чужие баннеры на твоем сайте, а взамен, с определенной пропорцией (1:2, например), показывает любой твой, который должен быть определенного размера и весить не более чем... (все узнаешь на сайте определенной баннерной системы). Затея опять же хороша, когда твой сайт хорошо посещаем и к тому же когда он обширен, что по нему лазить - не перелазить. Плюс хорошо поставленные баннеры на сайте придают некую интерактивность, так как постоянно меняются при новых загрузках. Для примера, глянь www.linkexchange.ru, остальные ищи в поиске, меня ломает писать.:)
Ну вот, в принципе, и все. А дальше все еще зависит от информационной нагрузки сайта. Так, если он про разновидности бабочки махаона, то посетителей у тебя особо много не будет. :) Дерзай, ваяй, не будь лопушком. :) Читай X и все такое. :)