Практическая работа №7.
Форматирование таблицы с применением каскадных таблиц стилей (CSS).
Цель: Oзнакомиться с тегами HTML для создания таблиц и научиться применять их на практике. Форматирование таблицы с применением каскадных таблиц стилей (CSS).
Задание.
Создать таблицу, содержащую расписание. Отформатировать таблицу с применением каскадных таблиц стилей (CSS) в Dreamweaver или Notepad (на выбор).
Ход выполнения.
Открыть html-страницу, создать таблицу, содержащую расписание в Dreamweaver или Notepad (на выбор) и сохранить ее в свой каталог (папку с названием своей группы).
Создать в том же каталоге файл <имя_пользователя>_table_style.css и в нем определить стили для форматирования данной таблицы.
Для того, чтобы отформатировать данную таблицу, потребуется определить стили для самого элемента таблица, для заголовка таблицы, для ячеек и (или) строк данной таблицы и для заголовочной строки и (или) ячеек данной таблицы, а также для содержимого ячеек.
Можно определить класс (или классы) для содержимого различных ячеек. А затем определить цепочки правил для форматирования таблицы.
Например, покажем содержимое файла файл <имя_пользователя>_table_style.css.
TABLE {
width: 592px
/*описание общих свойств таблицы*/
}
CAPTION{
font-family: Georgia, Times, serif;
font-size: 16px
}
TH {
background: #006;
color: white;
text-align: center;
height: 45px
/*описание свойств заголовочной ячейки таблицы*/
}
TD {
background: #CCCCFF;
text-align: center;
height: 45px
/*описание свойств обычной ячейки таблицы*/
}
.style1 {
font-size: 13px;
padding-top: 12px;
font-family: Georgia, Times, serif
/*описание свойств содержимого ячейки класса style1*/
}
.style2 {
font-size: 12px;
font-style: italic;
font-family: Georgia, Times, serif
/*описание свойств содержимого ячейки класса style1*/
}
Сохранить файл <имя_пользователя>_table_style.css.
Связать файл с описанием стилей создаваемой веб-страницы. Это можно сделать при помощи тега <link>, прописываемого в самом начале html-документа, сразу же после тега <head>. В этом теге должны присутсвовать аргументы: rel="stylesheet", type="text/css" и href, значением которого должен быть относительный путь к файлу <имя_пользователя>_table_style.css:
<head>
<link rel="stylesheet" type="text/css" href="val_ table_style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Розклад</title>
</head>
Прописать классы, согласно с определениями, сделанными в файле <номер_группы>_<имя_пользователя>_table_style.css.
Сохранить полученный результат.
Просмотреть созданную веб-страницу в браузере.
Например,
8. Оформить протокол практической работы.
Структура работы:
1.Цель
2.Задание.
3.Теоретические сведения (в случае выявления в протоколах одинаково написанных теоретических сведений, балы за выполнение этой работы будут сняты)
4.Ход выполнения
5.Результат выполнения (html-коды)
6.Выводы