Секреты HTML

Антон Околелов

Представьте себе на секунду, что вы - HTML-coder большой преуспевающей компании, и ваша зарплата составляет 1000 долларов США. Представили? Я думаю, без проблем! Вообразите также, что фирма получила заказ на сайт средней руки. Цена, допустим, уже обговорена, дизайнер, пускай, тоже отмучился.

Другими словами, на вашем мониторе сияет готовый утвержденный монолитный кусок графики заданного размера, заботливо увешанный штатным сумасшедшим художником всевозможными кренделями и "загогулинами". Кроме того, один шибко умный директор, возомнивший себя специалистом по юзабилити, не смог удержаться и наполнил эскиз различными ссылками, регистрационными и поисковыми формами, кнопками, подпиской и прочим хламом.

В общем, все это сваливается на вашу бедную голову, которая, в свою очередь, порождает извечный вопрос: что делать? Ответить на него очень просто. Если вы вообще в первый раз слышите, что такое HTML, то советую немедленно застрелиться, так как у вас нет никаких шансов! Но если вы знаете хотя бы азы, например, как сделать текст полужирным или поставить ссылку на любимый ресурс (www.idiot.ru?), то я помогу вам оправдать возложенное на вас высокое доверие. Итак, начнем.

Быть или не быть?

Первым делом надо решить проблему с фреймами (их еще называют кадрами), а именно: будут они или нет. Нельзя не отметить, что все дизайнеры всегда выступают за фреймы, я полагаю, это у них в крови. Объяснения этому могут быть разные: быстрее грузится, постоянное неподвижное оформление и т.п. Но я могу назвать сразу несколько причин, почему нельзя использовать сайты с кадрами:

- Такие ресурсы очень плохо индексируются поисковыми системами. Фактически, нормально отображаться будет только главная страница, т.к. остальные попросту не содержат фрейм-структуру. Можно, конечно, выкрутиться из этой ситуации при помощи JavaScript и PHP, но стоит ли игра свеч?

- Если сайт состоит из двух страниц, одна из которых главная, а вторая "О нас", то флаг вам в руки. Но серьезные сайты не могут позволить себе прокрутку посреди экрана, когда меню не помещается на страницу. Даже если как-нибудь схитрить со структурой информации, сократив таким образом количество пунктов до минимума, а потом принудительно запретить полосу прокрутки, то все равно пользователи не смогут работать с сайтом в маленьком окне или при низком разрешении монитора.

- Владельцы других ресурсов не смогут поставить ссылку на конкретные страницы вашего сайта, им придется писать так: "сайт www.takoy-to-site.ru, раздел такой-то-раздел". Вместо: www.takoy-to-site.ru/takoy-to-razdel.html. Для простого посетителя второй вариант проще, потому что можно одним кликом попасть куда надо, а не искать в глючной навигации чужеродного сайта нужную информацию.

- Еще один аспект. Допустим, вам надо отмечать текущее местонахождение пользователя крестиком у соответствующего пункта меню. Вы представляете, сколько там будет скриптов, возможно, даже DHTML? То же относится и к так называемой "дороге" ("хлебным крошкам").

- Даже сам Билл Гейтс со всем своим штатом сотрудников не сможет сделать выпадающее меню (если, конечно, таковое необходимо), пересекающее границу между фреймами.

Другими словами, если нет "мудрых" указаний сверху или особенной специфической ситуации, фреймы использовать не стоит. Поехали дальше!

Хирургическое вмешательство

Теперь начинайте резать. Что-что вы сказали? Дизайнера? Да нет, конечно, ведь ваша фирма без профессионала в этой области просто развалится. Я могу себе представить, как вы со своим боссом пытаетесь придумать внешний вид сайта! Не так-то это просто, как кажется, ведь для этого надо иметь небольшой, но стабильный сдвиг (шутка). А теперь серьезно - ведь пора заняться делом.

Прежде чем начинать расчленять изображение на элементы, четко определитесь, где у вас находится текст, а где графика. Первое уменьшает "вес" (размер) страницы. Второе, наоборот, увеличивает, зато смотрится красиво. Думайте сами. Затем посмотрите, какие из картинок лучше "загифовать", а какие "зажпеговать".

Как, неужели вы никогда не слышали таких слов!? Значит, придется на этом кратко остановиться. Как гласят предания, когда Бог создавал Всемирную Паутину, он придумал три формата графических изображений: gif, jpeg и png. Поэтому, если вы еще не поняли, про ваш любимый bmp, увы, придется забыть.

Формат gif используется для изображений, где важна четкость и содержится мало цветов (кстати, чем меньше цветов в gif-картинке, тем она "легче"). Типичные примеры: надписи, карты, линии и т.д.

Jpeg является антиподом gif и создан для полноцветных фотоподобных рисунков. Беда у него одна - чем ниже качество, тем выше эффект Гиббса (расплывчатость на границах резких переходов цветов), поэтому никогда не используйте его для надписей, карт, линий и т.д.

Png в будущем должен заменить gif, но сейчас применяется редко.

Вся информация у вас есть, можете начинать "операцию". Оперируя, никогда не раздирайте объект "руками", на это существуют специальные программы, например, Adobe ImageReady. Лучше потратить время на изучение таковых, чем, вооружившись блокнотом и ручкой, часами записывать координаты, размеры и названия нарезанных элементов.

Сборка

Но даже если вы максимально автоматизировали процесс резки и на выходе получили HTML-эскиз, все равно вам придется его исправлять. Почему? Наверное, потому, что человеческий мозг все еще незаменим.

При правке также следует пользоваться каким-нибудь мощным инструментом, так как позиционируются элементы друг относительно друга за счет невидимых таблиц, таблиц в таблицах и т.п. Править такие "HTML-спагетти" полностью вручную просто безумие. Я пользуюсь Dreamweaver'ом - на мой взгляд, это самый лучший HTML-редактор за всю историю интернет-цивилизации, хотя есть, конечно, и другие мнения.

Допустим, вы все сделали. Не спешите прыгать по офису с криками "Yes! I did it!" и звать босса. Сначала посмотрите, как это выглядит в Netscape. Я живо представляю себе ваше лицо при виде расползающихся во все стороны надписей, кусков картинок и кнопок. Есть невероятное множество причин, которые могут повлиять на внешний вид вашего сайта. Вот некоторые из них:

ћ Если вы убрали стандартный отступ на странице с помощью

<BODY leftmargin="0" topmargin="0">

, то ребятам из Netscape на это плевать. Делайте так:

<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

.

ћ По возможности расставляйте все размеры: таблиц вообще, отдельных их ячеек и изображений. Это убережет вас от большей части неприятностей.

ћ Уберите все пробелы и переводы строк (они трактуются, как пробелы) в тегах <TD>, иначе рисунки сместятся так, что можно остаться заикой на всю жизнь. Вот пример правильного HTML:

:
<TR>
<TD width="10" height="10"><IMG src="/images/sq.gif" width="10" height="10"></TD>
</TR>
:

- Если меню текстовое, то оно может "плавать" в зависимости от установок пользователя, я имею в виду размер шрифта. Иногда это недопустимо. Чтобы этого избежать, ставьте фиксированную высоту букв с помощью CSS (Cascade Style Sheet). Вы можете не захотеть изучать еще и CSS, но боюсь, что другого выхода нет, т.к. тег официально считается отмененным (www.w3.org). А вот все основные тексты должны быть именно плавающими, так как зрение у посетителей бывает разное.