Лабораторна робота №4 Розмітка сторінок за допомогою блоків (div) і css. Позиціонування
Мета роботи: формування вмінь розмітки сторінок за допомогою блоків(DIV) і CSS.
Контрольні питання
Для чого це потрібно?
Як це робиться?
Теоретичні відомості
Згадаємо недоліки використання таблиць:
"Повільне завантаження". Поки вся таблиця не завантажиться, інформація на екрані не з'явиться.
Зайвий код. Доводиться створювати багато комірок і рядків, які не потрібні.
Відсутність можливості з точністю до пикселів розташувати елемент на екрані.
Відсутність можливості "насунути" один елемент на іншій.
Відсутність можливості керувати відображенням елементів (при переповненні, таблиця просто збільшується в розмірах).
Ці проблеми можна розв'язати за допомогою CSS і <DIV>.
Як це робиться
Елемент <div> є блоковим елементом і призначений для виділення фрагмента документа з метою зміни виду вмісту. Як правило, вид блоку керується за допомогою стилів. Щоб не описувати кожен раз стиль всередині тегу, можна виділити стиль в зовнішню таблицю стилів, а для тегу додати атрибут class або id з ім'ям селектора.
Як і при використанні інших блочних елементів, вміст тегу <div> завжди починається з нового рядка. Після нього також додається перенесення рядка.
Тэг <DIV> - служить для групування елементів в блок. До згрупованих елементів можна застосувати стилі. Подивимося на прикладах, як це робиться:
Границю можна легко розмістити навколо заголовка, списку, абзацу або їх групи, помістивши їх в елемент div. Прописуємо стилі для цього блоку. Це можна використовувати з розміткою в такий спосіб:
Лістинг 3.2 - Виділення блоку границею
<div style="border-color:#FF00FF; border-style:dotted; "></div>
|
<div style="border:15px double #008000; "></div> |
|
|
|
|
|
|
<div style="border-style: outset; border-color: #FF0000"></div>
|
<div style="border-right: 10px solid #00FF00; border-bottom: 10px solid #00FF00"></div> |
|
|
|
|
|
|
<div style="border-left: 20px solid #FFFF00; border-right: 20px solid #FFFF00"></div>
|
|
||
|
|
||
Практичні завдання
Завдання 1
Створіть нову сторінку.
Зробіть її візуальною копією першої сторінки, але використовуйте не таблиці, а блоки й стилі. В Frontpage можна використовувати (хоча там не все реалізоване) меню "Format", підміню "Borders and Shading..." і "Pozition...". Також користуйтеся спецификацией каскадных таблиц стилей CSS2.
Стилі для блоків винесіть в main.css.
Перевірте працездатність на сервері.
У коментарях поясните властивості блоків.
Завдання 2
Створіть нову сторінку.
Зробіть колаж з картинок або фотографій (не менш 5-ти) застосувавши 2,5 мірне позиціонування.
Перевірте працездатність на сервері.
У коментарях поясните властивості блоків.
Завдання 3
Для сторінки з мітками (лабораторна робота №3) застосуєте властивість overflow:
- visible - для першого розділу
- auto - для другого розділу
- hidden - для третього розділу
- scroll - для четвертого розділу
- auto - для п'ятого розділу
- обов'язково задайте розміри, колір фону або бордюр блоків.