Як зробити розтягується сайт

Відео - Гумовий сайт

при верстці сайтів часто доводиться вирішувати принципове питання: яке буде поведінка сторінки при відкритті її з різним дозволом екрану? Тут можливі два варіанти - «гумові» (розтягуються) сторінки сайту або статичні. Про першому варіанті і піде мова. Хоч би якими були ваші уподобання у верстці, головним принципом в розтягується дизайну є відносна масштабованість.
Вам знадобиться
  • - знання 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% -
}
Поділися в соц мережах:

Увага, тільки СЬОГОДНІ!
Схожі
» » Як зробити розтягується сайт