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

МИ У СОЦМЕРЕЖАХ -

при верстці сайтів часто доводиться вирішувати принципове питання: яке буде поведінка сторінки при відкритті її з різним дозволом екрану? Тут можливі два варіанти - «гумові» (розтягуються) сторінки сайту або статичні. Про першому варіанті і піде мова. Хоч би якими були ваші уподобання у верстці, головним принципом в розтягується дизайну є відносна масштабованість.

Виберіть головний файл вашого шаблону сайту, в якому буде відображатися основна розмітка. Це може бути файл 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% -
}

Зверніть увагу

Не полінуйтеся перевірити отриманий шаблон у всіх основних браузерах (Mozilla Firefox, Google Chome, Internet Explorer, Opera). Він повинен коректно розтягуватися в кожному з них.

Корисна порада

Властивості ширини і висоти таблиць можна також прописувати в CSS-файлах (каскадних таблицях стилів). У цьому випадку в index-файлах вказуються не ширина і висота, а посилання на класи і ID у відповідних стилях.

Увага, тільки СЬОГОДНІ!