Описываются общие принципы построения дизайна сайта для любого разрешения экрана.Дизайн сайта для любого разрешения экрана.
Разработка дизайна сайта для растягивания под любое разрешение экрана — очень важный принцип в web-разработке. Посетители, экраны которых имеют высокое разрешение, могут увидеть больше информации на одной странице, что уменьшает необходимость в прокручивании. Большинство сайтов имеют дизайн расчитанный только на одно разрешение экрана. Они могут выглядет замечательно при разрешении 800х600, но на экранах 1024х768 сайт выглядит пустым. Большие свободные пространства создают иллюзию маленького сайта. Все больше и больше людей начинают использовать мониторы с высоким разрешением. Поэтому очень важно проектировать сайт для любого разрешения экрана. В уроке рассматривается вопрос, как сделать дизайн сайта для любого разрешения экрана.
Шаг 1: Определите самое низкое разрешение экрана.
Прежде чем начать работу над сайтом, необходимо определить самое низкое разрешение экрана. Дизайн сайта разрабатывается с учетом минимального разрешения экрана. Многочисленные исследования аудитории интернета показывают, что разрешением 640х480 в последнее время пользуются только 0.5% пользователей. Таким образом, можно игнорировать такое низкое разрешение. Следующей важной величиной является 800х600. Несмотря на тенденцию к сокрашению, пользователей, у которых экран монитора имеет такое разрешение, все еще остается достаточное количество, чтобы принимать их во внимание. Это означает, что сайт надо проектировать для экранов с разрешением 800х600 и выше.
Шаг 2: Разработайте дизайн вашего сайта для минимального разрешения экрана.
Как только минимальное разрешение экрана определено, нужно разработать дизайн сайта для этой величины. Это означает, что все графические элементы должны быть спроектированы так, чтобы сайт смотрелся отлично при минимальном разрешении экрана.
Шаг 3: При разработке кода HTML убедитесь, что все Ваши таблицы имеют единицы измерения в процентах.
Важно: это главный секрет разработки дизайна сайта под любое разрешение экрана. Вам нужно работать с процентами, а не с пикселями. Если работать с пикселями, то Вы задаете абсолютный размер, в то время как проценты позволяют использовать относительные размеры. Размеры задаются в процентах от разрешения экрана.
Для четкого понимания вопроса давайте рассмотрим пример. Если Вы разрабатываете сайт для экрана с разрешением 800х600, вероятно, Вы сделаете таблицу шириной 800 рх и высотой 600 рх. Но если разрабатывать сайт для любого разрешения, то Вам нужно устанавливать высоту и ширину таблицы в 100%, так что вне зависимости от разрешения экрана страница будет заполнять все отведенное пространство. Это будет 100% от разрешения экрана. Процентное соотношение можно устанавливать любое.
На первом шаге можно сделать таблицу 100% высотой и 100% шириной. Вы можете установить 95%, если хочется получить некоторое свободное пространство вокруг страницы.
Шаг 4: В таблице для ячеек используйте в качестве единиц измерения пиксели, кроме ячеек для содержимого сайта.
Это очень важный пункт. Вам надо задать размеры для всех ячеек, кроме ячейки с информацией сайта. Размеры для этой ячейки можно не проставлять вообще.
Демонстрация простого дизайна сайта
Проверьте дизайн сайта при разрешении 640 x 480, 800 x 600 и 1024 x 768
Примечание:
Ширина и высота установлены в 100%
Первая и последняя колонки имеют фиксированный размер 120 рх и 10 рх соответственно
Средняя колонка (Содержимое) задана без размера, так что она подгонятеся под размер экрана
Такая же логика используется для строк (для высоты). Все строки имеют фиксированный размер, кроме строки с содержимым, которая масштабируется под размер экрана.
Пример 2 — Только заголовок
Проверьте при разрешении 640 x 480, 800 x 600 и 1024 x 768
HTML код
<table width=»100%» border=»0″ cellspacing=»5″ cellpadding=»5″>
<td width=»9%»> (Каждая ячейка 9%)
Шаг 5: Вставьте изображения и содержимое.
Как только Вы закончили размечать Вашу таблицу, проставляя размеры в процентах, Вам нужно вставить изображения и содержимое. Обычно на сайте размещают логотип в левом верхнем углу и кнопки навигации сверху или слева.
Для более сложных шаблонов Вам может потребоваться заполнить фон для завершения дизайна сайта. Помните, что Вы разрабатывали дизайн сайта под любое разрешение и размещать изображения надо соответствующим образом. Самый легки способ — использовать верхние левый и правый углы для фиксированных изображений и оставлять середину для выравнивания по размеру экрана.
Шаг 6: Проверьте Ваш сайт во всех разрешениях.
Последний шаг — это проверка вашего сайта во всех разрешениях, которые доступны на Вашем компьютере. Чтобы ее выполнить, нужно использовать средства операционной системы для установки разрешения монитора. Выполните проверку во всех возможных разрешениях, которые поддерживает Ваш монитор.