Видеоуроки

Переходим от фиксированного (жесткого) дизайна к «резиновому»
дата: 07.03.2008

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

Такой сайт хорошо выглядит на мониторе с разрешением 1024 х 768, но на больших мониторах с более высоким разрешением появляется много места по бокам — сайт выглядит узенькой колонкой.

Особенность так называемых «резиновых» сайтов заключается в том, что ширина их блоков устанавливается в процентном соотношении от размера окна браузера посетителя. Если окно браузера открыто на 100%, то его размеры зависят от размера монитора пользователя и его разрешения.

При этом нужно стремиться, чтобы и владельцы маленьких мониторов с разрешением 800 х 600, и обладатели больших мониторов с разрешением 1600 х 1200 остались довольны внешним видом сайта. Но самое главное — в обоих случаях текст на сайте должен быть удобен для чтения.

Привожу статистику по количеству посетителей с разными разрешениями экрана на 28 февраля 2008 г. (источник: статистика http://www.liveinternet.ru по посещаемости сайтов, находящихся в зоне ru).

Данные таблицы свидетельствуют о том, что наиболее распространенные ныне разрешения — 1024 х 768 (42% от числа всех посетителей) и 1280 х 1024, 1280 х 800 (почти 40% от числа всех посетителей). Поэтому разумнее всего оптимизировать сайт именно под эти разрешения.

Тем не менее не нужно забывать и о меньшинстве. Известно, что количество посетителей с большими мониторами увеличивается с каждым днем. Как правило, колонка для основного текста на таких мониторах растягивается так, что затрудняет чтение текста. В этом случае посетители вынуждены уменьшать окно браузера по ширине (хорошо, что есть такая возможность).

На уроке объясняются особенности создания резиновых сайтов на основе фиксированного сайта (материал первого выпуска).

Здесь дается решение и таких задач, которые появляются при создании фиксированных сайтов.

1. Обращается внимание на поведение IE 6.0, если ширина сайта равна 100% и как обойти этот глюк.

2. Как создать резиновую шапку сайта, фоном для которой служит картинка с фиксированными размерами.

3. Как установить максимальную ширину сайта. Рассматривается решение задачи и для IE 6.0.

4. Как установить минимальную ширину сайта, чтобы избежать наплыва блоков друг на друга при сужении окна браузера.

5. Как применить объектам на странице абсолютное позиционирование, с помощью которого можно точно размещать объекты на странице.

6. Для чего служит свойство z-index.

7. Рассматривается еще один способ выравнивания сайта посередине.

Длительность видеоурока —  42 мин. 13 сек. Он упакован в rar архив videolessons_3.rar и занимает 35,75 Mb..

Размер видеоурока — 1024 х 768 px.

Для просмотра урока необходим Flash Player (от 7 версии и выше).