Практические работы для 11 класса (по учебнику К.Ю. Полякова, Е.А. Еремина)



Практическая работа № 31
«Табличная верстка»






Файлы-заготовки для выполнения этой практической работы


1. Скопируйте на свой компьютер каталог TABLE. Откройте файл table.htm в редакторе. Ваша задача – оформить веб-страницу так, как показано на образце (см. ниже на этой странице). Для этого нужно использовать рисунки из подкаталога images и стилевой файл.

2. Добавьте заголовок страницы (title), укажите название документа и фамилию автора, например:

 	Таблицы: работа Василия Пупкина.

3. С помощью стилевого файла установите для всех таблиц вертикальный отступ (margin) 10 пикселей.

4. Присвойте первой таблице класс sport для того, чтобы можно было управлять оформлением её ячеек независимо от других таблиц.

5. Введите класс left для ячеек первой таблицы (селектор table.sport td.left), установите для них выравнивание по левой границе. Для остальных ячеек таблицы (селектор table.sport td) установите (с помощью стилевого файла) выравнивание по центру. Ячейки, содержащие заголовки и места, занятые командами, оформите с помощью тэга th.

6. Для всех ячеек первой таблицы установите внутренний отступ 2 пикселя по вертикали и 5 пикселей по горизонтали.

7. Для второй таблицы используйте три класса ячеек: header фоновый рисунок back.jpg из каталога images;, белый цвет символов, шрифт без засечек (sans-serif), жирный, выравнивание по центру picture выравнивание по центру, фоновый рисунок paper.jpg из каталога images; внутренний отступ (padding) 10 пикселей, ширина ячейки (width) 120 пикселей note шрифт Arial, Helvetica или любой шрифт без засечек (sans-serif), цвет символов #800000, выравнивание по центру, внутренний отступ (padding) 5 пикселей сверху и снизу, и 10 пикселей по бокам, шрифт без засечек

8. Замените верхние кавычки на «ёлочки».

9. Выделите латинские слова и их перевод с помощью тэга em.

10. Рекламный блок в третьей таблице расположен в отдельной ячейке, которой присвоен класс ad: рамка цвета #CCCCCC толщиной 1 пиксель, фоновый цвет rgb(230,230,255), выравнивание по центру. Текст должен быть ссылкой на веб-страницу в Интернете с рецептом салата «Цезарь».






Наверх