Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Задание на контрольную работу. Тема контрольной работы: создание таблиц средствами языка HTML.
|
|
Контрольная работа №1.
Верстка таблиц в HTML.
Тема контрольной работы: создание таблиц средствами языка HTML.
Цель работы: изучение возможностей языка HTML по созданию и управлению внешним видом таблиц.
Основной задачей контрольной работы является изучение возможностей таблиц при создании структуры сайта.
Задание на контрольную работу
Сверстайте с помощью таблиц шаблон сайта. Структура сайта задается с помощью универсального шаблона. Тематика сайта определяется вариантом л.р. №1 или курсового проекта.
Рассмотрим подробнее правила задания шаблона с помощью универсальной таблицы:
1. По умолчанию, каждая ячейка таблицы является резиновой, т.е. расширяется в лево/право или вверх/вниз если там нет другой ячейки.
2. Ширина или высота ячейки, заданная фиксированным значением, не может быть изменена.
3. Ширина и высота ячейки может быть задана в процентах от размеров родительского элемента.
4. В создании шаблона принимают участие только те ячейки, номера которых перечислены в задании.
Таблица 3.1 Универсальный шаблон.
Параметры всей таблицы задаются таблицей 3.2.
Таблица 3.2 Расположение и размер таблицы
| Вариант | Ширина | Выравнивание | cellpadding | Cellspacing | Граница |
| ФП-100 | - | ||||
| Ф-600 | Центр | - | |||
| Ф-800 | Left | - | |||
| М | Right | ||||
| ФП-100 | - | - | |||
| ФП-80 | Центр | - | - | ||
| М | Left | ||||
| Ф-800 | Right | ||||
| Н | - | ||||
| ФП-50 | Центр | - |
Возможные значения параметры ячеек таблицы описаны в таблице 3.3.
Таблица 3.3. Описание параметров ячеек таблицы
| Параметр | Значение | Описание |
| Ширина | Ф - 200 | Ширина ячейки фиксированная, 200 пикселей |
| ФП-50 | Ширина ячейки фиксированная, 50% ширины контейнера | |
| Н | Ширина не задана, определяется содержимым | |
| М | Максимальная ширина ячейки | |
| Содержимое | МВ-5 | Вертикальное меню, в виде списка из 5 элементов |
| МГ-3 | Горизонтальное меню в виде набора ссылок из 3 элементов | |
| З | Заголовок | |
| П | Параграф | |
| ЗП | Заголовок и параграф | |
| А | Автор и дата последнего обновления | |
| И | Изображение | |
| И-4 | 4 упорядоченных изображения | |
| E | ||
| Фон | FF00FF | Цвет фона |
| img | Фон задается изображением | |
| - | Нет фона | |
| A0F | Цвет в 16ом формате, сокращенная запись для AA00FF |
Варианты структуры таблицы и свойства ее ячеек задаются таблицей 3.4
Таблица 3.4 Варианты заданий
| № варианта | Задание | № ячеек | |||||||
| Таблица | |||||||||
| Ширина | Ф200, ФП50, Н | ||||||||
| Содержимое | 2хИ, А, Е, МГ-5, ЗП, П, МВ-6 | ||||||||
| Фон | #ABC | #00D | #D00 | #ABC | img | #ABC | #ABC | ||
| Таблица | |||||||||
| Ширина | Ф300, ФП30, М | ||||||||
| Содержимое | И, А, Е, МГ-3, ЗП, 2хП, МВ-4 | ||||||||
| Фон | img | #CDE | #DEF | #AAA | img | #BCE | img | img | |
| Таблица | |||||||||
| Ширина | Ф200, ФП50, Н | ||||||||
| Содержимое | И, А, Е, 2хМГ-2, ЗП, П, МВ-5 | ||||||||
| Фон | #DDE | img | img | #CDE | #BBC | img | #DED | #ACB | |
| Таблица | |||||||||
| Ширина | Ф200, М, Н | ||||||||
| Содержимое | И, А, Е, МГ-2, ЗП, П, 2хМВ-3 | ||||||||
| Фон | #FCE | #DCE | #CCC | img | img | #ADC | img | img | |
| Таблица | |||||||||
| Ширина | М, ФП50, Н | ||||||||
| Содержимое | И-4, А, Е, МГ-2, ЗП, П, МВ-5 | ||||||||
| Фон | img | #CСE | #DВF | img | #AAA | i mg | #BCE | img | |
| Таблица | |||||||||
| Ширина | Ф200, ФП25, Н | ||||||||
| Содержимое | И, А, Е, МГ-4, 3хЗП, П, МВ-2 | ||||||||
| Фон | img | #FCE | #AAA | img | #BBB | #CDE | #AED | img | |
| Таблица | |||||||||
| Ширина | Ф200, ФП50, Н | ||||||||
| Содержимое | 2хИ, А, Е, МГ-3, ЗП, П, МВ-5 | ||||||||
| Фон | #DDC | #BCE | img | img | img | #EDA | img | #FAB | |
| Таблица | |||||||||
| Ширина | Ф240, ФП40, М | ||||||||
| Содержимое | И, А, Е, МГ-4, ЗП, 3хП, МВ-5 | ||||||||
| Фон | #DCC | img | #CDE | #AAC | #ABC | #FEC | img | img | |
| Таблица | |||||||||
| Ширина | Ф250, ФП50, Н | ||||||||
| Содержимое | И-5, А, Е, МГ-2, ЗП, П, МВ-4 | ||||||||
| Фон | img | img | #DEE | #AAC | #ADA | img | #EDB | #BBD | |
| Таблица | |||||||||
| Ширина | ФП40, М, Н | ||||||||
| Содержимое | И, А, Е, 2хМГ-2, ЗП, П, МВ-5 | ||||||||
| Фон | #ABC | #AAF | img | img | #DDE | #BCE | #CCE | img | |
| Таблица | |||||||||
| Ширина | Ф200, ФП50, Н | ||||||||
| Содержимое | 3хИ, А, Е, МГ-2, ЗП, П, МВ-2 | ||||||||
| Фон | img | #BCE | img | #DDF | #ACA | img | #ABA | img | |
| Таблица | |||||||||
| Ширина | М ФП50, Н | ||||||||
| Содержимое | И, А, Е, МГ-4, ЗП, П, 3хМВ-5 | ||||||||
| Фон | #ADA | img | #CCC | img | #DDD | #BCB | img | #ADE | |
| Таблица | |||||||||
| Ширина | Ф200, ФП50, Н | ||||||||
| Содержимое | И, А, Е, МГ-3, 2хЗП, П, МВ-5 | ||||||||
| Фон | img | #CDE | #FFA | img | img | #AAF | #BCE | img | |
| Таблица | |||||||||
| Ширина | Ф250, ФП40, Н | ||||||||
| Содержимое | И, А, Е, 2хМГ-2, ЗП, П, МВ-5 | ||||||||
| Фон | #CEA | #FED | img | #ACA | img | #DCE | #BBC | img | |
| Таблица | |||||||||
| Ширина | Ф300, ФП50, М | ||||||||
| Содержимое | И, А, Е, 2хМГ-2, ЗП, П, 2хМВ-3 | ||||||||
| Фон | #BCA | img | #CDA | #ACE | img | #DDD | img | img |
Пояснения к таблице:
1. Если в качестве фона указано img, то это означает использовать любую фоновую картинку.
2. Для каждого варианта есть обязательный набор содержимого (расшифровку см. в таблице 3.3). Если перед обозначением указан множитель (например, 2хИ), то это говорит о том, что данный элемент должен быть размещен указанное число раз. Место для размещения элементов выбирается студентом самостоятельно, исходя из получившейся после упрощения таблицы. К примеру, горизонтальные меню лучше размещать в длинных ячейках, вертикальные — в высоких и т.д.
3. Студент самостоятельно выбирает, к каким ячейкам таблицы следует применить параметры ширины (расшифровку см. в таблице 3.3)