Як зробити розтягується сайт
Відео - Гумовий сайт
при верстці сайтів часто доводиться вирішувати принципове питання: яке буде поведінка сторінки при відкритті її з різним дозволом екрану? Тут можливі два варіанти - «гумові» (розтягуються) сторінки сайту або статичні. Про першому варіанті і піде мова. Хоч би якими були ваші уподобання у верстці, головним принципом в розтягується дизайну є відносна масштабованість.
Вам знадобиться
- - знання HTML;
- - програма для редагування html-коду.
Інструкція
1
Виберіть головний файл вашого шаблону сайту, в якому буде відображатися основна розмітка. Це може бути файл index.html або index.php. Однією з кращих програм для візуального редагування шаблонів сайтів є Macromedia Dreamweawer. На базі цієї програми буде вироблено необхідне редагування.
Відкрийте файл шаблона або створіть новий за командою «Файл» - «Новий», категорія - «Базова сторінка» - «HTML» або категорія «Динамічна сторінка» - «PHP». Тут розглядається загальний випадок, коли структура сайту записується саме в одному з двох файлів.
Відкрийте файл шаблона або створіть новий за командою «Файл» - «Новий», категорія - «Базова сторінка» - «HTML» або категорія «Динамічна сторінка» - «PHP». Тут розглядається загальний випадок, коли структура сайту записується саме в одному з двох файлів.
2
Вже давно не секрет, що верстка буває різних типів - на таблицях, на div-блоках і поєднана (таблиці і блоки одночасно). За табличну верстку відповідає html-тег . У програмі він позначений як «Таблиця» і розташовується в закладках візуальних форм. У структурі цього тега є різні властивості. Для розтягування знадобляться «ширина» і «висота» ( «width» і «height» відповідно). Код головною таблиці, яка стане основою розтягується сайту, визначається виразом:
Вкажіть в кожному з властивостей значення у відсотках (100%). Цим ви досягнете ефекту автоматичного розтягування елементів таблиці на екранах з будь геометрією. Це може бути 19-ти дюймовий монітор або смартфон - кожен з них коректно відтворить вміст.
3
Якщо буде потрібно точно вказати відповідність між елементами таблиці, то скористайтеся наступним прикладом:
Тут ви побачите, що для одного з осередків вказана ширина в 30% від всього, що визначено для самої таблиці. Простий розрахунок показує, що на другий осередок залишається 100% -30% = 70%. Пам`ятайте, що в цьому випадку один з осередків таблиці не повинна мати встановлений атрибут ширини (width). Всі розрахунки браузер зробить самостійно і правильно розтягне таблицю з осередками. Вміст всередині таблиць буде також коректно розтягуватися і стискатися на різних екранах.
. . вміст комірки 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% -
}
Поділися в соц мережах:
Схожі
- Як змінити html-код сайту
- Як зареєструвати сайт в яндексі
- Як створити сайт в блокноті
- Як вставити картинку в html таблицю
- Як зробити гумовий фон
- Як верстати шаблон
- Як відредагувати сайт
- Як скопіювати сайт joomla
- Як змінити стиль сайту
- Як змінити дизайн сайту
- Як змінити фон сайту
- Як створити нову сторінку
- Як зробити сайт на своєму комп`ютері
- Як підключити скрипт
- Як ставити шаблони на сайт
- Як зробити гумову картинку
- Як створити сайт для всіх
- Як переадресувати з сайту на сайт
- Як створити сайт html за шаблоном
- Як зробити картинку фоном для сайту
- Як вставити html-код в сайт