Завантажити папку CD для вивчення курсу «Уроки HTML і CSS» (141 Мб)
Таблична верстка - досить поширений на сьогоднішній день метод верстки.
Якщо таблиця служить для розмітки сторінки і оформлення дизайну, то вона називається макетної.
На малюнку 1 наведено зовнішній вигляд сайту, на малюнку 2 - зеленим кольором позначена таблиця, яка є основою макета цього сайту. Для того, щоб макетну сітку не було видно, використовується таблиця з невидимою кордоном. Для цього в тезі TABLE задається атрибут border = "0".
Малюнок 1. Зовнішній вигляд сайту
Малюнок 2. Таблиця, яка лежить в основі макета сайту
Все різноманіття дизайну засобами таблиць можна звести до трьох типів:
- «Фіксований» (жорсткий),
- «Гумовий» дизайн та
- Комбінований з перших двох.
1. «Фіксований» табличний дизайн (макет) сайту
При «фіксованому» дизайні макет сторінки створюється на основі таблиць певної ширини, наприклад макетна таблиця шириною 1000px
.
Приклад 1. «Фіксований» дизайн сайту. На малюнку 3 наведено приклад коду фіксованого (жорсткого) дизайну, в основі якого лежить макетна таблиця шириною 1000px. На малюнку 4 - зовнішній вигляд цього макета.
Вибір ширини таблиці залежить від орієнтації на певний дозвіл моніторів користувачів. Так, для дозволу екрану по горизонталі 1024px - слід брати ширину макетної таблиці 960-980 пікселів, для ширини екрана1280px - ширину макетної таблиці можна взяти 1200-1220px і т.д.
У цьому випадку сайт буде відображатися на екрані цілком по ширині, на моніторах великих дозволів з обох сторін макета сайту залишиться порожнє місце, на моніторах з меншим дозволом внизу екрана буде з'являтися горизонтальна смуга прокрутки.
1. Реалізуйте web-сторінку на основі малюнків 3 і 4. Збережіть файл.
2. Змінюючи розміри браузера, проаналізуйте поведінку макета.
2. «Гумовий» табличний дизайн (макет) сайту
Для «гумового сайту» характерно використання таблиць шириною, заданою в процентному співвідношенні від ширини браузера. В цьому випадку сторінка буде переверстується в залежності від ширини браузера.
Приклад 2. «Гумовий» дизайн сайту. На малюнку 5 наведено приклад коду «гумового» дизайну, в основі якого лежить макетна таблиця шириною 100% від екрану. На малюнку 6 - зовнішній вигляд цього макета.
1. Реалізуйте web-сторінку на основі малюнків 5 і 6. Збережіть файл.
2. Змінюючи розміри браузера, проаналізуйте поведінку макета.
3. Комбінований дизайн сайту
Можна зробити гнучку комбіновану структуру сайту (рис. 7) - комбінацію «фіксованого» і «гумового» дизайну. коли ширина деяких елементів таблиці задається абсолютним значенням (в пікселах), а ті осередки, які треба зробити гумовими задаються у відсотках від ширини макетної таблиці, або параметр ширини (width) не вказується взагалі. наприклад:
У наведеному вище прикладі ширина «гумовою» осередки не зазначена і буде змінюватися в залежності від залишку вільного місця екрану.
Так, якщо ширина екрана дорівнює 1600 пікселів, ширина «гумовою» осередку буде 1600-100-50-150 = 1300 пікселів.
Якщо ширина екрану 1280 пікселів, ширина «гумовою» осередку буде 1280-100-50-150 = 980 пікселів.
Якщо ширина екрану 1024 пікселів, ширина «гумовою осередки» буде 1024-100-50-150 = 724 пікселя.
Приклад 3. Комбінація «фіксованого» і «гумового» дизайну. На малюнку 8 наведено приклад коду комбінованого дизайну, в основі якого лежить макетна таблиця шириною 100% від екрану. На малюнку 9 - зовнішній вигляд цього макета.
1. Реалізуйте web-сторінку на основі малюнків 8 і 9. Збережіть файл.
2. Змінюючи розміри браузера, проаналізуйте поведінку макета.
Найчастіше макетує складова складається не з однієї таблиці, а з декількох певним чином вкладених одна в іншу. Це дозволяє розширити можливості створення складного дизайну. дозволяє створювати макетні сітки складної структури.
Приклад 4. Гумовий сайт з вкладеними таблицями
1. Реалізуйте web-сторінку на основі малюнків 10 і 11. Збережіть файл.
2. Змінюючи розміри браузера, проаналізуйте поведінку макета.
1. Використовуючи елементи сайту MyHouse.ru створіть дві web-сторінки з табличним комбінованим макетом сайту.
2. У верхній частині сайту розмістіть біжучий рядок.
3. У лівій частині сайту - меню, в правій частині - вміст web-сторінки.
4. На кожній web-сторінці гіперпосилання, ведучу на іншу, створену Вами сторінку. Гіперпосилання повинні бути взаємними, тобто з першої сторінки повинен бути перехід на другу сторінку, а з другої сторінки відповідно перехід на першу сторінку.
Схожі статті