Делаем веб-магазин

Александр Федулов

Спецвыпуск: Хакер, номер #050, стр. 050-078-7

Открываем любимую программу верстки HTML-файлов и создаем таблицу шириной 100% - это будущая шапка. Поскольку картинок для шапки у нас две, делим таблицу пополам и помещаем картинки, не забывая прописать параметр Align (выравнивание). На дворе уже 2005 год, мы идем в ногу со временем и верстаем в соответствии со стандартом XHTML 1.0 :).

Использовать в таблицах атрибут Background нельзя: для каждой из таблиц, требующих фона в виде растрового изображения, все фоновые картинки прописываем в CSS как индивидуальные стили. Я сделал это во внешнем файле стилей, но никто не запрещает тебе объявить стили внутри HTML-документа. Поскольку у шапки фон единообразный, создадим стиль, в котором будет фоновая картинка для всей таблицы. Далее действуем по аналогии - та же таблица, те же 100%. Делим ее на три части (по числу колонок). Для левой и правой зададим ширину в пикселях, среднюю же оставим в покое - пусть масштабируется как душе угодно :). Самое интересное - подвал.

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

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

Оптимизация графики

Хороший сайт должен весить мало, поэтому наш долг и почетная обязанность - обеспечить наименьший вес графики. Повторю известные всем истины: если картинка представляет собой нечто содержащее большое количество цветов (например, фото), то разумнее всего экспортировать ее в формате .JPEG. Если же она представляет собой рисунок или схему с относительно небогатой палитрой, экспортируем в .GIF. Выбирая формат для экспорта, прояви любопытство и поэкспериментируй с настройками, посмотри на реакцию картинки на изменения параметров экспорта. Даже железные правила имеют исключения, и твоя картинка может стать подтверждением одного из них. Я лишь поясню, чем я руководствовался работая над данным сайтом. Для отображения логотипа фирмы и многих картинок подвала необходимы один-два цвета и несколько их оттенков: в таком случае логично будет выбрать дающий в итоге меньший вес .GIF.