Существует несколько различных стратегий веб-дизайна, позволяющих сделать так, чтобы веб-страница занимала все окно браузера, независимо от размера страницы. Вот три простых, умеренно сложных и продвинутых метода, которые вы можете использовать для оптимизации своего сайта.
Простой способ: используйте таблицы
Один из наиболее распространенных методов, используемых с самого начала веб-дизайна, заключался в использовании таблиц для окружения вашего контента. Если вы установите ширину и высоту таблицы на «100%», то таблица будет расширяться до краев окна браузера, будь то маленький экран 640×480 или более продвинутый монитор с высоким разрешением.
HTML-код для таблиц очень распространен и хорошо известен, а свойство «ширина» задается прямо в самом начале кода:
<TABLE width=100% height=100%><TR><TD>Ваше содержание будет здесь</TD></TR></TABLE>
Если вы хотите проявить фантазию, вы можете «вложить» одну таблицу в другую, установив выравнивание внутренней таблицы на «центр», что сделает ваш контент «плавающим» точно по центру окна браузера:
<TABLE width=100% height=100%><TR><TD><TABLE align="center"><TR><TD>Ваш контент будет здесь</TD></TR></TABLE></TD ></TR></ТАБЛИЦА>
Вы можете увидеть примеры кода TABLE и попробовать свои варианты с такими свойствами, как цвет фона, на веб-сайте W3Schools .
Использование CSS для идеального жидкого макета
С появлением каскадных таблиц стилей идея «жидких макетов» означала, что ваш веб-контент будет изящно расширяться и сжиматься в зависимости от размера окна браузера, в котором он находится. Обычно эти макеты имели столбцы «фиксированной ширины» либо на слева, справа или с обеих сторон и большую область посередине для контента, который будет расширяться или сжиматься. Мэтью Джеймс Тейлор много писал о том, как настроить хорошие макеты с помощью CSS, и включает множество бесплатных загружаемых шаблонов для контента вашего веб-сайта.
Его макеты довольно обширны, но разделы, необходимые для того, чтобы сайт соответствовал размеру страницы, относительно просты. Они используют два процента, 50% и 25%, для двух столбцов, а третий столбец просто занимает оставшийся процент (25%). Код CSS можно бесплатно загрузить с сайта, а код, регулирующий столбцы, четко обозначен:
/* 3 настройки столбца */.threecol {background:#eee; /* устанавливает цвет фона правого столбца*/}.threecol .colmid {right:25%; /* устанавливает ширину правого столбца */background:#ccc; /* устанавливает цвет фона центрального столбца */}.threecol .colleft {right:50%; /* устанавливает ширину среднего столбца */background:#f4f4f4; /* устанавливает цвет фона левого столбца */}
В каждом столбце используется больше кода, чтобы дать содержимому 2%-ную границу, а высота фактически регулируется разделом верхнего и нижнего колонтитула со многими другими настройками, такими как шрифты и границы. Прелесть CSS в том, что он позволяет легко изменить весь сайт всего несколькими строками кода. Например, если вы хотите сделать его двухколоночным, вы можете просто удалить раздел « .colmid » из приведенного выше кода. Средний столбец по-прежнему будет занимать 50% страницы, а « три столбца ». раздел будет заполнять остальную часть, растягиваясь, чтобы соответствовать остальной части страницы.
Есть много мест, где можно узнать больше о хитростях CSS, но одно из лучших называется «Сад дзен CSS» , в котором демонстрируется множество различных способов новаторского и красивого заполнения страницы изображениями и контентом.
Расширенные веб-макеты с использованием условного Javascript
Для более продвинутых программистов существует метод использования Javascript для определения типа браузера и экрана, который использует зритель, и перехода на альтернативную таблицу стилей для соответствующего макета. В статье Марка ван ден Доббельштейна в A List Apart объясняется, как разрабатывать отдельные классы для экранов от «сверхшироких» (шириной более 1280 пикселей) до простых вертикальных макетов КПК, таких как iPhone. Вы можете увидеть, как это работает, на странице примераметода «switchy McLayout», но он включает в себя несколько довольно обширных методов кодирования, которые выходят далеко за рамки базового табличного HTML. Однако, как только вы освоите этот уровень кодирования, вы сможете настроить свой веб-сайт на основе множества различных факторов, включая высоту экрана, наличие полосы прокрутки, размер шрифта, положение мыши и глубину цвета.
Как сделать контент формальным и функциональным
Преимущество того, чтобы ваш веб-сайт заполнил экран, заключается в том, что он лучше фокусируется на содержании вашего сайта. В конце концов, если ваш контент легче читать, его будет легче понять, что сделает поток информации между вами и вашими пользователями более плавным. Какую бы технику вы ни использовали, стоит потратить время на то, чтобы ваш сайт выглядел лучше на экране.