Пособие по веб-дизайну для начинающих: Начало. Первые шаги.

Пособие по веб-дизайну для начинающих или как я создавал свой сайт.

1. The beginning.
Эта история началась очень давно. Лет пять назад, не меньше. Сидели мы как-то с моим другом Максом, и я сетовал ему на свою «горькую долю», что, мол, писанины-то у меня много – рассказы, стихи, романы, — а вот пробиться с этим «в люди» весьма проблематично, так как в родном городе это нереально (пробовал, знаю), а обивать пороги всех крупных издательств я просто физически не в состоянии. Тогда-то Макс и произнёс два заветных слова – «сайт» и «интернет». Вы будете смеяться, но в те времена интернет был для меня диковинным зверем, и я очень слабо представлял, что это такое и с чем его едят. К слову, впервые я увидел интернет-ресурс вживую в 2002 году. Это был пресловутый «Яндекс», а показал мне его всё тот же Макс, затащив как-то в интернет-кафе.
Так вот, «не парься, брателло, всё будет путём! — сказал мне Макс, — Ты, главное, переведи свои вещи в электронный формат, а там уж я сам всё сделаю и сайт в и-нет выложу». «Клёво, — подумал я, — вот оно, признание, не за горами совсем!»
Признание и правда было не за горами. Оно находилось на другой планете, причём за пределами Солнечной системы. С момента того памятного разговора прошло несколько лет, а воз всё ещё находился на том же месте, где – во времена Крылова – его оставили лебедь, рак и щука. Ну не было у меня возможности «оцифровать» свои произведения! (Москвичам этого не понять). Я тихо матерился, ища всевозможные пути решения этой проблемы, а Макс обещал оторвать мне… скажем, ноги, за мою нерасторопность.
И вот у меня появился Он, Компьютер. Это сейчас я могу писать слово «компьютер» с маленькой буквы, потому что «железный друг» давно стал для меня обыденностью, но тогда осознание того, что у меня теперь тоже есть это чудо инженерной мысли, наполняло меня благоговейным трепетом и открывало путь в «касту избранных». Не хочу сказать, что я совсем не разбирался в компах и никогда их не видел (у меня в своё время был «суперкомпьютер» «Синклер», у друзей приходилось работать на 486-х, я владел базовыми пользовательскими навыками и мог немного программировать в «Бэйсике», не выходя за рамки школьной программы, да и в компьютерные клубы частенько захаживал), просто теперь я стал полноценным хозяином собственного электронно-вычислительного барахла, на котором была установлена глючная майкрософтовская скотина – Windows XP.
«Всё, — сказал себе я, — теперь займёмся набором текста, а Макс изготовит мне сайт». Правда, как должен выглядеть мой сайт, я представлял себе слабо. Я вообще слабо представлял, как должен выглядеть даже не мой, а «чей-то-ещё-сайт». Поэтому, когда Макс задал мне именно этот предательский вопрос, я был в затруднении. «Сам-то что предложишь?» — попытался выкрутиться я. «Твой сайт – тебе и дизайн придумывать!» — ответил Макс. Ах так, подлюка! Тогда… Тогда… Тогда я вообще не знаю, что делать…
Макс принялся терпеливо и доходчиво (на пальцах) объяснять, как должны в общем выглядеть дизайн и наполнение сайта, что сдерживающим фактором тут может быть только ограниченность фантазии и т.п., но существенной пользы его лекция так и не принесла. Тогда Макс плюнул и установил мне на компьютер Macromedia Dreamweaver MX со словами: «Поэкспериментируй, глядишь, чего и придумаешь», скинул туда же электронный учебник и самоустранился от решения моих проблем.

2. Первые шаги.
И вот я взялся за создание сайта. Прилежно читая учебник, я делал всё, что там было написано, а потом выбирал из этого подходящее для моего будущего детища. Долго и кропотливо я ваял этот «шедевр», несмотря на то, что у меня был Dreamweaver – визуальный редактор, что существенно облегчало работу.
Для несведущих поясню, что HTML-редакторы («сайтоделательные программы») делятся на два вида – те, где создание веб-страницы происходит путём написания соответствующего кода (типа HomeSite), и те, которые обладают дружественным («пользовательским») интерфейсом, позволяющим одним нажатием соответствующей кнопки вставить в документ необходимое наполнение. Скажу сразу, и те, и другие хороши по-своему, но визуальные редакторы (в частности, Dreamweaver) – это просто клад для начинающего и неискушённого пользователя. И плюньте в морду тому, кто с презрением относится к «визуальникам»! «В чём сила, брат?» «В визуальном редакторе Dreamweaver!» Нет, я, конечно, теперь неплохо знаю язык HTML и могу написать сайт хоть в «Блокноте», но я считаю это самым настоящим извращением! А представьте себе поточное производство – студию, занимающуюся веб-дизайном. Они там что, вручную всё пишут?! Хрена лысого! Лепят через тот же Dreamweaver и не парятся, потому что скорость возрастает, качество не страдает, а денег-то платят больше! Поэтому если профессиональный веб-дизайнер изготавливает сайт в «Блокноте» — он либо просто откровенный маньяк, либо мазохист.
Вернёмся, все же, к нашим баранам. Я делал свой сайт, опираясь на знание того, что в интернет выходят разные люди с различными способами связи, поэтому документ не должен быть очень тяжёлым (то есть небольшого объёма) и не перенасыщенным лишними наворотами, отвлекающими от основного наполнения. Больше, пожалуй, я не знал ничего.
Я вспоминаю первый вариант своего сайта, и на мои глаза наворачиваются слёзы умиления. Господи, каким же по-детски непосредственным он был! Обычные текстовые ссылки на однородном фоне. И всё. Краткость – сестра таланта. Потом я, правда, решил украсить страницы собственными картинками, нарисованными в «Пэйнте» и обработанными в «Фотошопе»… Вот тогда-то я и столкнулся с первой серьёзной проблемой: если использовать мои изображения в качестве фона, то они, почему-то, не хотят растягиваться на всю страницу целиком, а заполняют её так – целое изображение плюс ещё небольшой его кусочек. Мне было невдомёк, что размеры фонового (и вообще любого) изображения могут быть записаны как в абсолютных величинах (столько-то на столько-то пикселов), так и в относительных (столько-то процентов от площади веб-страницы). Но это я узнал позже. А пока я начал думать, что бы ещё предпринять? И надумал. Есть такая замечательная вещь – слои. Если вам надо совместить несовместимое, то именно они и придут к вам на помощь. Давай-ка, решил я, мы воткнём мои картинки не фоном, а как простые изображения, а потом приклеим поверх них слой со ссылками. Всё будет так нарядно!
И на самом деле, всё получилось просто замечательно. Я кайфовал и почёсывал своё тощее пузо в предвкушении того, что выложу этот шедевр в интернет и буду получать в гостевую книгу восторженные отклики… Мечтать не вредно.
Но пока что мы с вами отвлечёмся от слоёв и рассмотрим ещё одну проблему, которую я обнаружил опытным путём. Однажды пошёл я в гости к своему приятелю Андрюхе и прихватил с собой «винчестер» (в смысле, жёсткий диск), откуда планировал скинуть все фильмы и прочую занимающую место ерунду. Разговорились мы с тёзкой, и решил я ему похвастаться своими достижениями в области веб-дизайна. Первое, чем меня «порадовал» Андрей, было то, что стартовая страница не может называться Mainmenu, а должна именоваться index и писаться с маленькой буквы. Ладно, исправим. Щёлкай быстрее по ссылке и благоговей! Щёлк! «Невозможно отобразить страницу». Бр-р! Не понял! Всё же нормально работало! А теперь вдруг перестало…
«Ща проверим!» — успокоил меня Андрей и открыл мою страницу через Homesite. «Чудак! — сказал он, употребив в начале слова совершенно другую букву, — Ты как ссылку-то сделал?» Через пять минут я узнал, что и ссылки, то есть пути от одного файла к другому могут быть абсолютными и относительными. То есть это выглядит либо a href=”C://Program Files/My site/picture.jpeg», либо a href=“picture.jpeg”. Понятное дело, что относительный путь приемлем только в том случае, если вы собираетесь держать свой сайт только у себя на компьютере и при каждом удобном случае демонстрировать его друзьям, которые – с кислыми лицами и закатывая глаза – будут в сотый раз произносить: «Великолепно! Такого фантастически красивого и грамотного сайта я ещё никогда не видел!» Если же вы хорошо относитесь к своим друзьям и не намерены их так мучить, то вам прямая дорога на просторы «всемирной паутины». Следовательно, необходимо использовать абсолютные адреса ссылок, поскольку я могу себе представить «лицо» сервера, которому предложат найти именно ваш диск С и из папки «images» загрузить картинку на веб-страницу! Думаю, если бы у серверов были зачатки искусственного интеллекта, то они бы вместо «Невозможно отобразить страницу» или символа «битого» изображения выдавали сообщения довольно нецензурного содержания.
Лирическое отступление. Представьте, что, просматривая файл «Как я провёл лето» в папке «Документы», вы вспомнили про то, что описываемый в конкретном абзаце момент запечатлён на фото, которое хранится в папке «Картинки», и вам срочно захотелось эту фотографию посмотреть. Что вы сделаете? Выйдете из папки «Документы», откроете «Картинки» и будете предаваться воспоминаниям. Так же поступает и браузер (программа для просмотра веб-страниц): обнаружив ссылку на какой-то ресурс, он следует по указанному вами пути. Если этот документ лежит в той же папке, то ссылка будет такой — a href=”document.html». Если он находится во вложенной папке (то есть в подразделе), то ссылка примет вид a href=”другая папка/document.html”, а в случае, когда необходимо выйти из текущей папки и войти в другую (подняться на уровень вверх), — a href=”../новая папка/document.html”.
Следующим, за что я получил от Андрюхи по шее, был размер фоновых изображений. Как известно, работа интернет складывается из нескольких основных показателей – качества линии, по которой осуществляется передача данных, качества услуг провайдера, характеристик средства связи, по которому осуществляется доступ в сеть (скажем, ADSL-модем явно лучше обычного модема во много раз), и объёма закачиваемой информации. И если первые три фактора зависят исключительно от пользователей и провайдеров, то последний целиком лежит на совести веб-мастера.
Наглядный пример. Возьмём две картины – «Чёрный квадрат» Малевича и «Утро в сосновом бору» Шишкина. Переведём эти изображения в электронный формат в натуральную величину (только не пытайтесь представить этот процесс, я сам не знаю, как можно отсканировать эти картины и что с нами сделает любой искусствовед за такое варварство). Теперь посмотрим на характеристики получившихся файлов. Что мы имеем? «Чёрный квадрат» занимает в десятки раз меньший объём, чем «Утро в сосновом бору». Почему? Думаю, вы уже сами догадались. При одинаковых размерах количество цветов в картинах существенно различается. Иными словами, чем выше цветность, тем больше объём файла. Но это ещё не всё. Немалую роль играет и размер самого изображения (согласитесь, проще засунуть в карман тетрадный лист, чем таскать подмышкой транспарант «Ельцин – наш президент!»), а также качество картинки. Не вдаваясь в высокие материи, скажу одно: чем больше мелких деталей вы можете рассмотреть на изображении без существенной потери его общего качества (при увеличении), тем большего размера оно окажется.
Поэтому, размещая в интернете свою фотографию, совсем необязательно демонстрировать всем, что ваши юношеские прыщи упрямо не хотят сдавать своих позиций и, игнорируя всевозможные «клеросилы», чувствуют себя на вашем носу весьма вольготно. Да и портрет «Я на коне, в натуральную величину» размером метр на три тоже лучше держать не на сайте, а дома на стене.
Все проблемы с «тяжёлыми» изображениями решаются с помощью специальных графических редакторов, например, Adobe Photoshop или ImageReady. Вам достаточно знать в них всего две функции, чтобы «пережимать» картинки для нормального отображения в веб.
Первая называется Save for web (Сохранить для веб). Эта команда расположена в выпадающем меню File (Файл). После выбора этой команды, раскрывается всплывающее окно, где вы можете поэкспериментировать с качеством графического файла и с его форматами, пока не подберёте оптимального для вас. В нижней части окна «Optimized (Оптимизированное изображение)» отображается время, в течение которого ваш рисунок будет загружаться на веб-страницу. Понятное дело, что, если вы видите там шестизначное число, такой вариант однозначно не подходит. Некоторые люди не будут ждать и тридцати секунд, так что имейте это в виду.
Вторая функция – это изменение размера изображения. Откройте выпадающее меню Image (Изображение) и выберите там пункт Image size (Размер изображения). В появившемся окне вы увидите позиции Width (Ширина) и Height (Высота). Их-то вам и нужно менять. Обычно, размера 600 на 800 пикселов (точек на дюйм) бывает более чем достаточно.
В общем, после визита к Андрюхе я уже не чувствовал себя ни великим веб-мастером, ни таким же веб-дизайнером… Но я не оставил надежд ими стать, потому с удвоенной силой принялся изучать материалы по «сайтостроению» и исправлять свои огрехи.
Кроме того, я ненадолго отвлёкся от создания творческого сайта и быстренько склепал простенький сайт, посвящённый моей любимой игре «Silent Hill». Так, чтобы было.
И вот, наконец, сайт был готов. Вспоминая его, я начинаю напевать: «Я рисую белым мелом хрен на парте неумело», но это сейчас. Тогда он казался мне чем-то едва ли не шедевриальным, заслуживающим повышенного внимания со стороны посетителей.
Когда я принёс его на работу (а работал я уже тогда в известной компьютерной фирме менеджером по модернизации, но это совсем другая история) и показал своему сослуживцу Максу (не путать с упоминавшимся выше Максом), он выдал мне что-то невразумительное типа «Э-э-э… М-м-м… Это… В общем… Надо бы с дизайном поработать, какого-то определённого стиля придерживаться…» «Блин, — подумал я, — кругом одни враги да засады! Сговорились все что ли?!» Но новый дизайн решил обмозговать.
А пока я занялся решением новой проблемы. Возможно, вы уже догадались, что связана она была со слоями. Во всех браузерах существует так называемая «Панель закладок» — небольшое окошко справа, в котором вы храните ссылки на нужные вам по работе или просто понравившиеся веб-страницы. Согласитесь, так гораздо удобнее – щёлкнуть по ярлычку и сразу попасть в нужное место, нежели набирать в верхней строке, скажем, www.masha-ivanova.narod.ru/foto/intimfoto/masha_v_trusikah.png. Так вот, открытие и закрытие панели закладок соответственно сужает или увеличивает площадь отображения просматриваемой веб-страницы. Открывая и закрывая упомянутую панель я обнаружил нечто, меня совсем не порадовавшее: при отображении всей площади веб-страницы слой со ссылками располагался нормально, так, как ему и положено, но лишь только площадь становилась меньше, слой съезжал в сторону и ссылки находились уже не по центру изображения, а по левому его краю. Шайтан! Что делать-то? (Проблема, как я в последствие узнал, заключалась в том же, что и с изображениями, — в абсолютных и относительных величинах размеров слоя).
Ладно, слои must die! Будем искать другой выход. И я его нашёл.

21-23 сентября 2005 года.

Продолжение следует…