Вибір дизайн верстки
Існує два типи дизайну. Один з них "гумовий", це той, що під розмір віконця браузера підбудовувався, другий — фіксований (зі смугами прокрутки). Є ще й комбінований.
Фіксований дизайн – табличний дизайн, у якому величина зовнішньої таблиці, або кожного осередку задана в пікселях. Вибір ширини зовнішньої таблиці залежить від орієнтації на визначений дозвіл монітора користувачів:
-
Дозвіл монітора
Ширина сторінки
Висота сторінки
640х480
600
300
800х600
760
420
1024х768
955
600
При фіксованому дизайні зовнішня каркасна таблиця розміщається звичайно злівого краю або в центрі екрану. Останній варіант доцільніший, тоді не так помітні широкі поля навколо при великих дозволах монітора. Хоча можна використовувати випадне меню, що позіцюйоване.
ПРИКЛАД
-
Каркасна таблиця вирівняна
по лівому краї
Каркасна таблиця вирівняна
по центрі сторінки
Коротше, як ви будете вирівнювати вашу каркасну таблицю — по лівому краю, по центрі, а може і по правому — справа винятково вашого смаку. Пам'ятати треба одне — на екрані, на чий дозвіл орієнтована ваша сторінка, він буде займати усе відведене місце (у даному випадку все рівно яке вирівнювання); на екранах, чий дозвіл більше — буде з'являтися порожнє місце праворуч (із двох сторін або ліворуч) від вашої сторінки. Отут-то і має значення вирівнювання каркасної таблиці.
Зрозуміло, що фіксований дизайн набагато простіше розробляти. Всі елементи фіксованої ширини, розташовані статично друг від друга... Так що тим, хто хоче мати контроль над розміткою сторінки, варто розробляти сторінки фіксованої ширини, що буде залишатися постійною для всіх користувачів, незалежно від розміру монітора або змін розмірів вікна.
Проміжний підсумок:
Фіксований дизайн | |
+ | - |
Розробляти і верстати фіксований дизайн набагато простіше | У фіксованого дизайну є тільки один оптимальний дозвіл екрана.
|
Гумовий дизайн – табличний дизайн, у якому ширина однієї або декількох осередків задається у відсотках від ширини вікна.
При цьому всі елементи вашої Web-сторінки заповнюють весь доступний простір вікна браузера, поза залежністю від розмірів монітора. Якщо розмір вікна браузера змінюється, елементи повторно виводяться, щоб настроїтися на нові розміри. Зовні це нагадує гумку, що то стягається, то стискується...
ПРИКЛАД
Отже, що ми маємо?
Гумовий дизайн | |
+ | - |
|
|
Можна використовувати також комбінований підхід, коли сторінка складається зі стовпців, заданих комбінаціями абсолютних і відносних розмірів. У цьому випадку при зміні розміру вікна один стовпець зберігає колишню величину, у той час як інші змінюють розмір і заповнюють вільне місце. У більшості випадків найбільше переважно використовувати саме цей метод.
Тепер, я сподіваюся, видно, що однозначно відповісти на запитання, який дизайн краще, а який гірше, повинні саме ви самі. (...як там? Порятунок потопаючих, справа рук самих потопаючих? От отут теж саме!)
Тільки ви в стані вирішити, що саме потрібно вам. При цьому треба дотримуватися одного єдиного правила — головне, щоб відвідувачам вашого Web-сайту було у вас комфортно, зручно і... цікаво.
- Українська інженерно-педагогічна академія
- 1Історія та можливості використання високих інформаційних технологій та програмування при створенні електронних ресурсів
- Види і форми представлення інформації
- Структурована інформація
- Технології гіпертексту
- Мультимедіа
- Інтерактивні цифрові мультимедіа
- 2Електронні видання
- Інформаційна революція й електронне видання
- Особливості електронних видань
- Класифікація електронних видань
- Основні компоненти електронних видань
- Текстова інформація
- Напівтонові і кольорові ілюстрації
- Анімаційна графіка
- Порівняльний аналіз графічних форматів
- Відеоінформація
- Компонування Web-сторінок Проста таблична верстка
- Вибір дизайн верстки
- Недоліки табличної верстки
- Принципи побудови системи навігація
- Виробництво друкованих і електронних засобів інформації
- 3Технології гіпертекстових видань
- 4Засоби розробки електронних видань
- 1 Спосіб
- 2 Спосіб
- 3 Спосіб
- Особенности работы с текстом
- Вставка изображений на Web-страницу
- Д обавление файлов мультимедіа
- Сохранение изображений
- Добавление надписей в изображение
- Создание значков для предпросмотра изображений
- Настройка прозрачности
- Изменение исходного размера изображения
- Практикум Тема: Створення html- документів
- Тема: Створення електронних навчально-інформаційних видань. Розробка структури видання
- Тема: Створення електронних учбово-інформаційних видань. Розробка елементів навігації і оформлення
- Тема: Обробка і представлення відео- інформації
- Створити фільм;
- Тема: Створення навчальних фільмів
- Перелік посилань