Tips of the Web

Спецвыпуск Xakep, номер #021, стр. 021-088-1

Vadias (painter@gameland.ru, www.freehand.str.ru)

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

Tipsa 1. Главная страница сайта - это то же самое, что обложка книги либо первые кадры фильма. От них зависит весьма многое в плане первых впечатлений, поэтому делать мейнпэйдж следует такой, чтобы, с одной стороны, юзеру было понятно, какого рода этот сайт и что ему тут светит (то есть вывесить на ней "содержание" сайта), и, с другой стороны, она должна радовать глаз и не отпугивать. Помни, твоя первоначальная цель - заинтриговать зрителя. Вот так-то, старый интриган ;).

Tipsa 2. Даже для раскрутки любительских проектов нужны некоторые исследования. Но ничего - проводить их несложно: найди наиболее успешный и популярный сайт своих "конкурентов" (сайтов с аналогичной тематикой) и проанализируй, почему именно туда народ валит толпой. Стоит ли подсказывать тебе, что нужно делать дальше :)? Но в любом случае - не воровать графику и тексты, однако хорошую идею можно своеобразно адаптировать к своему ресурсу ;).

Tipsa 3. Наверняка ты случайно нарывался на сайты, которые, предоставляя информацию, интересующую тебя меньше всего на свете, тем не менее заставляли тебя возвращаться туда снова и снова, а то и приобретать новые интересы. Вернись на эти сайты еще разок и как следует подумай над тем, что именно привлекло твое внимание, и возьми соответствующий прием себе на заметку.

Tipsa 4. Таблицы в настоящее время - самый популярный метод построения веб-страницы, поскольку они более или менее дают гарантию того, что пага будет одинаково выглядеть и в старом добром ишаке, и в Мозилле, и в Опере. Однако надо быть осторожным с их размещением, проверять и устанавливать все тэги, даже вспомогательные, прописывать ширину и высоту ячеек, потому как для некоторых браузеров вспомогательные тэги являются обязательными. Это скажется и на эстетике загрузки страницы: размеры с самого начала будут появляться правильно (пример обратного ты наверняка видел: загружается текст, потом картинка, и текст неожиданно прыгает вверх, вниз или в стороны).

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

Tipsa 6. Вложенности таблиц по возможности следует избегать, разделяя большую таблу на маленькие. Если без вложенности не обойтись, проследи, чтоб вложенных таблиц было не более трех.

Tipsa 7. Есть хитрый метод предзагрузки пикчур большого размера, и реализуется он средствами HTML без JavaScript. Допустим, ты уверен, что с главной страницы юзер скорее всего пойдет на страницу с фотографией. Тогда на главную страницу в укромное место вставляешь эту фотку и указываешь ей размер 1X1 пиксель. Чтобы она грузилась уже после остального страничного материала, юзай параметр LOWSRC. В общем, конструкция такая: <img width="1" height="1" lowsrc="fotka.jpg">. Изображение остается в кэш-памяти и при загрузке страницы берется оттуда.