Автор: Джеффри Зельдман. Бесплатные видеоуроки
Создаем «резиновый» сайт
Третий выпуск от 7 марта 2008 г.
Напоминаю, что первый выпуск был посвящен созданию сайта с фиксированными по ширине колонками. В этом случае ширина колонок зависит от воли веб-мастера. Если он установил ширину блоков в пикселях, то посетитель сайта уже не сможет их уменьшить или увеличить, даже если у него возникла такая потребность.
Этот сайт хорошо выглядит на мониторе с разрешением 1024 х 768, но на больших мониторах с более высоким разрешением появляется много места по бокам — сайт выглядит узенькой колонкой.
Особенность так называемых «резиновых» сайтов заключается в том, что ширина их блоков устанавливается в процентном соотношении от размера окна браузера посетителя. Если окно браузера открыто на 100%, то его размеры зависят от размера монитора пользователя и его разрешения.
При этом нужно стремиться, чтобы и владельцы маленьких мониторов с разрешением 800 х 600, и обладатели больших мониторов с разрешением 1600 х 1200 остались довольны внешним видом сайта. Но самое главное — в обоих случаях текст на сайте должен быть удобен для чтения.
Привожу статистику по количеству посетителей с разными разрешениями экрана на 28 февраля 2008 г. (источник: статистика http://www.liveinternet.ru по посещаемости сайтов, находящихся в зоне ru).
Данные таблицы свидетельствуют о том, что наиболее распространенные ныне разрешения — 1024 х 768 (42% от числа всех посетителей) и 1280 х 1024, 1280 х 800 (почти 40% от числа всех посетителей). Поэтому разумнее всего оптимизировать сайт именно под эти разрешения.
Тем не менее не нужно забывать и о меньшинстве. Известно, что количество посетителей с большими мониторами увеличивается с каждым днем. Как правило, колонка для основного текста на таких мониторах растягивается так, что затрудняет чтение текста. В этом случае посетители вынуждены уменьшать окно браузера по ширине (хорошо, что есть такая возможность).
На уроке объясняются особенности создания резиновых сайтов на основе фиксированного сайта (материал первого выпуска).
Здесь дается решение и таких задач, которые появляются при создании фиксированных сайтов.
- Обращается внимание на поведение IE 6.0, если ширина сайта равна 100% и как обойти этот глюк.
- Как создать резиновую шапку сайта, фоном для которой служит картинка с фиксированными размерами.
- Как установить максимальную ширину сайта. Рассматривается решение задачи и для IE 6.0.
- Как установить минимальную ширину сайта, чтобы избежать наплыва блоков друг на друга при сужении окна браузера.
- Как применить объектам на странице абсолютное позиционирование, с помощью которого можно точно размещать объекты на странице.
- Для чего служит свойство z-index.
- Рассматривается еще один способ выравнивания сайта посередине.
Длительность видеоурока — 42
мин. 13 сек. Он упакован в rar архив videolessons_3.rar и занимает 35,75 Mb..
Размер видеоурока — 1024 х 768 px.
Для просмотра урока необходим Flash Player (от 7 версии и выше).
Где скачать?
Файл доступен для скачивания — http://www.sharemania.ru/0103930.
Уроки в формате flash удобно просматривать в проигрывателе Media Player Classic. В настройках нужно проверить, чтобы был выбран формат .swf. View > Option > Formats (установить галочку Shockwave Flash file).
Внимание! В папке содержится не только видеоурок, но и папка с исходниками (HTML / CSS / image).
Примечание: скорость скачивания файлов у зарегистрированных пользователей выше.
- Первый выпуск от 7 декабря 2007 г.
- Второй выпуск от 13 января 2008 г. — создание горизонтального и вертикального меню на основе списка.
- Первый выпуск из серии «Результаты моих экспериментов».
- Третий выпуск от 7 марта 2008 г.
- Четвертый выпуск от 21 марта 2008 г.
- Пятый выпуск от 6 июня 2008 г.
Жду ваши отзывы, советы, рекомендации
Прошу вас поддержать мою инициативу. Присылайте свои отзывы об уроках, вопросы. Вы можете подсказать темы будущих уроков. Вы можете помочь мне дельным советом.
Внимание! Если вы однажды запросили извещение о выходе уроков, то повторно этого делать не нужно.
Если Вы впервые пришли на эту страницу по рекомендации или из поисковой системы, то можете оставить запрос об извещении о выходе видеоуроков по электронной почте.