Как сделать растягивающийся сайт?

При верстке сайтов часто приходиться решать принципиальный вопрос: какое будет поведение страницы при открытии ее с разным разрешением экрана? Здесь возможны два варианта – «резиновые» (растягивающиеся) страницы сайта или статичные. О первом варианте и пойдет речь. Каковы бы ни были ваши предпочтения в верстке, главным принципом в растягивающегося дизайна является относительная масштабируемость.
Создать сайт самостоятельно с Wix.com

Вам понадобится

• - знание HTML;
• - программа для редактирования html-кода.

Инструкция

Выберите главный файл вашего шаблона сайта, в котором будет отражаться основная разметка. Это может быть файл index.html или index.php. Одной из лучших программ для визуального редактирования шаблонов сайтов является Macromedia Dreamweawer. На базе этой программы будет произведено необходимое редактирование.

Откройте файл шаблона или создайте новый по команде «Файл» - «Новый», категория – «Базовая страница» - «HTML» или категория «Динамическая страница» - «PHP». Здесь рассматривается общий случай, когда структура сайта записывается именно в одном из двух файлов.

Уже давно не секрет, что верстка бывает разных типов – на таблицах, на div-блоках и совмещенная (таблицы и блоки одновременно). За табличную верстку отвечает html-тег . В программе он обозначен как «Таблица» и располагается в закладках визуальных форм. В структуре этого тега есть различные свойства. Для растягивания понадобятся «ширина» и «высота» («width» и «height» соответственно). Код главной таблицы, которая станет основой растягивающегося сайта, определяется выражением:

. . здесь структура таблицы с содержимым сайта . .

Укажите в каждом из свойств значения в процентах (100%). Этим вы добьетесь эффекта автоматического растягивания ячеек таблицы на экранах с любой геометрией. Это может быть 19-ти дюймовый монитор или смартфон – каждый из них корректно воспроизведет содержимое.

Если потребуется точно указать соответствие между ячейками таблицы, то воспользуйтесь следующим примером:

. . содержимое ячейки 1 . .

. . содержимое ячейки 2 . .

Здесь вы увидите, что для одной из ячеек указана ширина в 30% от всего, что определено для самой таблицы. Простой расчет показывает, что на вторую ячейку остается 100%-30%=70%. Помните, что в этом случае одна из ячеек таблицы не должна иметь установленный атрибут ширины (width). Все расчеты браузер произведет самостоятельно и правильно растянет таблицу с ячейками. Содержимое внутри таблиц будет также корректно растягиваться и сжиматься на разных экранах.

В ситуации с div-версткой блоки тега растягиваются по-умолчанию на всю ширину экрана и следуют один за другим слева - направо, сверху – вниз. Для уточнения их геометрии создайте CCS-класс или идентификатор (ID), в котором укажите, например, атрибуты width="30%" и (или) height="50%" для категории размеров и положения блока (Box). Не забудь связать указанный стиль с файлом разметки сайта и привязать класс (ID) к нужному тегу . Обычно он ставится в самом начале скрипта, определяя всю будущего геометрию сайта:

. . содержимое сайта . .

Или так:

. . содержимое сайта . .

Код для CSS-правила будет следующим:

. myclass {

width: 30%;

height: 50%;

}

#myID {

width: 30%;

height: 50%;

}

Оцените статью!