Сайт своими руками

«МБ» неоднократно обращался к теме создания сайтов (см. №№1, 23, 25, 27 за 2004 год). Правда, речь шла чаще о материях теоретических, чем практических. А теория и практика, как всем известно, вещи разные. Так что, несмотря на очевидную полезность и нужность теории, сегодня мы все-таки перейдем к практике, раскрыв основные вехи процесса создания вашего (видимо, первого) сайта. Матерым web-профессионалам к прочтению не обязательно.

Вместо предисловия
Будем считать, что вы — замечательный человек, которому есть что сказать людям, потому и решили сделать сайт. Обычно в таких случаях люди собирают кипы документации по html, читают статьи по дизайну и графике (а то и по так называемому web-программированию), устанавливают несколько текстовых и графических редакторов (предполагается, что человек умеет и немного работать с ними), трут в предвкушении руки, и…
А после этого «и…» мои друзья приходят ко мне с одним вопросом: «А что делать-то? С чего начать?» И дело не в том, что чтение статей — это плохо. Наоборот, это очень хорошо, потому что знания о юзабилити, композиции, цвете, тэгах и так далее лишними никогда не будут. Другое дело, что знание того же тэга абзаца

слабо помогает создать сайт (хотя и быстро помогает создать простую html-страничку). То-то и оно — инструментарий есть, логики действий в голове нет. Этот пробел сейчас восполним. Причем, прошу заметить, изложенное ниже вовсе не является каким-то откровением или единственно верным путем. Это всего лишь набор советов, опирающихся на опыт.

ШАГ 1. Урок рисования
Не вдаваясь в дебри профессионального процесса разработки сайта (разработка концепции, определение целевой группы и структуры распределения информации, и тэ дэ, и тэ пэ), определим для себя несколько базовых моментов:
1. Цель создания сайта.
2. Тематика сайта.
3. Дизайн и информационное содержимое (так называемый контент).
Допустим, вы решили создать сайт о своих любимых фильмах (тематика), чтобы поделиться ценными соображениями о просмотренных картинках с другими людьми (цель). Контент в данном случае — ваши статьи о фильмах. Остался дизайн.
На этом этапе компьютер вам вообще не нужен. Возьмите листок бумаги и карандаш, сядьте поудобнее и попытайтесь набросать примерный вид вашего будущего сайта — таким, как вы его себе представляете. Нарисуйте прямоугольничек (это будет экран монитора), а в нем — все, что пожелаете. Не беда, если рисовать вы не умеете, главное сейчас — четко определиться, где и как будут размещены информационные и навигационные области на экране. Обычно счи­тается необходимым разместить на странице: заголовок сайта (логотип), навигационное меню, а также собственно блок информации (в моем примере — рецензию на фильм). Все остальное — по желанию и при наличии возможностей. И не забывайте, что чем проще вы сделаете эскиз, тем легче его будет реализовать. И еще: «проще» не значит «хуже»!
Вот что получилось у меня (см. рис. на первой полосе). В наличии: заголовок с «банером» (например, ссылкой на популярную рецензию), алфавитная строка поиска фильма по первой букве его названия (можно сказать, первое навигационное меню), информационный блок с рецензией слева и меню навигации по жанрам справа.
Остается добавить, что обычно меню хватает и одного (например, в виде колонки в левой части страницы), а низ страницы также рекомендуется чем-нибудь занять: продублировать навигацию, вписать copyright, свой e-mail, навешать счетчиков… Словом, берем еще один лист и рисуем низ странички. Теперь все?

site0

Конечно же, нет! Самые внимательные наверняка заметили, что нарисовали мы вид «рабочей» (информационной) страницы сайта, так как именно на страницах такого вида наш пользователь будет проводить большую часть времени. Однако каждый сайт начинается с главной страницы, на которую пользователь неизбежно попадает, набрав адрес вашего ресурса в браузере. В идеале, она должна быть решена в том же стиле, что и прочие страницы сайта (дабы не запутать пользователя), и обязательно содержать меню навигации. Берем еще один листок и рисуем. Свою картинку приводить не буду (она аналогична рисунку на первой полосе, с той лишь разницей, что информационный блок заменен новостями, обращением к посетителям, ссылками на новые или популярные рецензии, и так далее).
В принципе, на этом можно и остановиться. Разобравшись с созданием основных страниц, сделать все остальные будет куда проще. Но если у вас есть желание — рисуйте и все остальные виды страниц, которые могут пригодиться на сайте (в моем примере это могут быть страницы с алфавитным перечислением фильмов).
Теперь, имея на руках четкую картинку будущего сайта, можно усаживаться за компьютер.

ШАГ 2. Верстка
На этом этапе нарисованное на бумаге нам предстоит реализовать в виде картинки на экране монитора. Для этого понадобится хороший графический редактор. Конечно, он может быть любым (кроме, разве что, Paint'a), но раз уж мы решили делать все максимально удобно и быстро, то берем Photoshop, желательно версии не ниже 5.5. Берем и рисуем что угодно, не забывая время от времени заглядывать в свой листочек. Не умеете рисовать? Не беда, можно вообще ничего не рисовать (взгляните — даже в оформлении некоторых известных сайтов картинки не используются), а просто набирать текстовые блоки: меню, заголовки, статьи. Вот тут-то и пригодятся все ваши знания о шрифтах, совместимых цветах, композиции… Нет таковых? Тогда дам парочку советов: не используйте много разных шрифтов одновременно; при выборе шрифтов для текста и ссылок (то есть всех тех элементов, что в готовом сайте не будут лишь картинками) используйте основные, имеющиеся у всех пользователей, гарнитуры: Times, Arial, Tahoma, Verdana и так далее. Выделяйте цветом и/или подчеркиванием ссылки. Используйте целиком или в обработанном виде «сторонние» картинки — никогда не поверю, что на вашем жестком диске не найдется галерей. Старайтесь располагать каждый элемент на отдельном слое — это здорово облегчит ваш труд. Итогом проделанной работы должна стать картинка, выглядящая как самый настоящий сайт. Все должно быть закончено! Другими словами, если показать ее другому человеку, то он должен не сомневаться, что это — скриншот с экрана браузера. Пример законченной работы — рис. 2 (использована статья Сергея Бережного «Сага о Чужой»).
Кстати, если в процессе работы в Photoshop вы несколько отклонились от первоначального эскиза на бумаге, но результат вам нравится больше — его и оставляйте! Изменили некоторые элементы совсем — ну и ладно, лишь бы смотрелось хорошо (в моем примере на рис. 2 иллюстрация к статье была перенесена влево, дабы, опираясь на законы композиции, «уравновесить» перегруженную «темными пятнами» правую часть). Наконец, возможно и такое, что картинка, созданная в Photoshop, будет вообще ни капли не похожа на то, что вы нарисовали на бумаге. Ну и что? Лишь бы хорошо смотрелось на экране!

site1

ШАГ 3. Кодинг
Сделать из картинки полноценную страницу на HTML — целое искусство, называемое кодингом. Люди, им занимающиеся, так и называются: html-кодеры. Без шуток — несмотря на всю кажущуюся простоту языка разметки HTML, точно воспроизвести с его помощью созданный в Photoshop эскиз — дело весьма нелегкое. К примеру, недавно знаменитая студия Артемия Лебедева проводила конкурс на вакансию кодера. Соискателям предлагался достаточно сложный эскиз страницы сайта, выполненный в Photoshop, а на выполнение работы давалось 3 (!) дня (в целях самоконтроля). Так что я не зря советовал вам делать эскиз проще. К тому же при простых эскизах отпадают многие проблемы верстки сложный дизайнов, реализуемые только с помощью css и ряда ухищрений, да и нет нужды заботиться о попиксельной точности.
Напугал? Ничего, прорвемся. Поскольку у нас есть Photoshop, то первая операция кодинга — разбивка макета на кусочки, — не составит для нас проблемы. Переходим (Jump to…) в ImageReady, берем ножик (slice tool) и «нарезаем» картинку от отдельные кусочки. Как именно? Желательно отделить все основные части друг от друга, то есть нарезать горизонтальные куски (в html мы сделаем из них отдельные таблицы). Для моего примера это: заголовок с банером (так называемая «шапка»), строка поиска, информационная часть (ну и не забываем про низ страницы). Затем каждый кусочек можно нарезать как хочется: выделить отступы, отдельные колонки. Чем лучше вы знаете html, тем лучше должны понимать, что удобнее сделать сейчас, и что будет легче дописать в коде страницы потом. Завершив нарезку, выполняем команду «File -> Save Optimized as…», указав в строке «тип файла» вариант «HTML and Images». В итоге вы получите сгенерированную html-страницу, пригодную к просмотру в браузере. Жаль лишь, что состоит она только из картинок. Впрочем, некоторые «особо продвинутые» забугорные web-мастера умудряются выдать страницу в таком виде чуть ли не за конечный результат (проставив ссылки на отдельные изображения)! Есть и вариант для продвинутых: без ножей и слоев выполняем разметку странички с помощью направляющих и вырезаем каждую картинку отдельно.
Ладно, открываем получившуюся страницу в браузере. Обычно сразу в глаза бросается прокрутка по горизонтали — это оттого, что не учли ширину боковой полосы прокрутки, а нарисовали эскиз с шириной, равной ширине экрана (к примеру, 800 или 1024 пикселя). Исправляем картинку в Photoshop, выполняем заново все операции с ImageReady. Вариант проще — открываем наш html-документ в текстовом редакторе и меняем ширину главной таблицы (например, WIDTH=780). Не беда, что картинки сожмутся — все равно их еще редактировать придется. Заметьте — все нарезанные вами кусочки программа поместила в одну таблицу! Лучше это сразу исправить и создать отдельные таблицы для шапки, строки поиска, информационной части и низа страницы. Теперь займитесь представлением лишних графических данных (пустые белые картинки, картинки с текстами) пустыми ячейками таблиц или текстом (вырезаем тэг <img /> и вставляем текст статьи, тэги и так далее). Тут-то вам и пригодятся познания в html, css и хитрых приемах верстки (например, использование прозрачного однопиксельного .gif-файла).
Я не описываю подробно все эти действия, потому что это уже дело техники и практики, и никаких газетных полос на описание всех вариантов не хватит. К тому же цель данной статьи немного в другом (см. выше).
Итак, работа над переводом страницы из графической в «полноценную» закончена. То есть почти вся текстовая информация, кроме логотипов и баннеров, «зашита» в html, лишние картинки удалены и вообще страница в браузере очень похожа на то, что было в Photoshop (в идеале — неотличима!). Словом, макет страницы вашего сайта создан. На жаргоне это называется «рыбой»: вид уже есть, сайта еще нет.

ШАГ 4. СТРАНИЦЫ И СВЯЗЫВАНИЕ
Используя данный макет (и другие, созданные при необходимости), вам остается создать множество информационных страниц (то есть добавить контента на сайт), разместить ссылки и проверить правильность их работы. Опять же, технику не рассматриваю. Неужели все? Можно сказать, да. Ваш первый сайт на чистом html готов!

ЭПИЛОГ
Надеюсь, все у вас получится, и Сеть с вашей помощью пополнится свежими интересными ресурсами. Напоследок остается лишь напомнить о том, что сайт без обновлений — мертвый сайт. А когда начнешь заниматься обновлением (то есть пополнением контента) постоянно, неизбежно встретишься с кучей проблем и неудобств. И начнется знакомство с SSI, PHP, MySQL и прочими интересными словами. Но это будет уже совсем другая история…


Рекомендуем почитать: