Студопедия

Главная страница Случайная страница

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Задание на контрольную работу. Тема контрольной работы: создание таблиц средствами языка 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 e-mail
Фон 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)


Поделиться с друзьями:

mylektsii.su - Мои Лекции - 2015-2024 год. (0.007 сек.)Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав Пожаловаться на материал