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

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

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

Вам пригодится

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

Инструкция
1
Выберите основной файл вашего шаблона сайта, в котором будет отражаться главная разметка. Это возможно файл index.html либо index.php.

Одной из лучших программ для визуального редактирования шаблонов сайтов есть Macromedia Dreamweawer.На базе данной программы будет произведено нужное редактирование.Откройте файл шаблона либо создайте новый по команде «Файл» — «Новый», категория – «Базисная страница» — «HTML» либо категория «Динамическая страница» — «PHP».Тут рассматривается неспециализированный случай, в то время, когда структура сайта записывается как раз в одном из двух файлов.
2
Уже давно не секрет, что верстка не редкость различных типов – на таблицах, на div-блоках и совмещенная (таблицы и блоки в один момент). За табличную верстку отвечает html-тег

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

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

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

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

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

Не забудь связать указанный стиль с файлом разметки сайта и привязать класс (ID) к нужному тегу . В большинстве случаев он ставится в начале скрипта, определяя всю будущего геометрию сайта:. . содержимое сайта . .Либо так:. . содержимое сайта . .Коддля CSS-правила будет следующим:. myclass { width: 30%; height: 50%;}#myID { width: 30%; height: 50%;}

Резиновый сайт


Темы которые будут Вам интересны: