2. Задайте для тэга <table> следующие атрибуты:

1) Ширина – 1000 пикселей

2) Выравнивание по центру экрана

3) Расстояние между ячейками – 0

4) Отступ от границ ячейки внутри нее – 2 пикселя

5) Толщина линии – 1. Цвет линии – любой.

3. С помощью атрибута colspan= ‘” объедините 1,2 и 3 ячейки

4. С помощью атрибута rowspan = “” объедините ячейки: 7-9 и 10 – 14

5. Раскрасьте таблицу, задайте ширину столбцов (в %) и внесите в нее данные.

*Ширина столбца «Домашнее задание» - 50%, «Предмет» - 25%. Остальные – 12,5%

Практическая работа №3

“Создание галереи”

Создайте html-документ, имеющий следующую структуру

1 строка: Название галерии и автор работы

2 строка: Список разделов галереи

3 строка: Название первого раздела галереи

4 строка: Содержимое первого раздела

5 строка: Название второго раздела галереи

6 строка: Содержимое второго раздела

7 строка: Название третьего раздела галереи

8 строка: Содержимое третьего раздела

Примечания:

1. Задний фон надо замостить каким-либо изображением из папки background

2. Таблица закрашена любым цветом и выровнена по центру

3. Список разделов состоит из гиперссылок, позволяющих переходить к нужному месту в документе

4. В каждом разделе галереи содержатся миниатюры из папки small, которые являются ссылками на аналогичные изображения, хранящиеся в папке big. Чтобы картинка открывалась в новом окне, нужно в тэге <a>использовать атрибут target="_blank"

5. Весь содержащийся на старнице текст нужно отформатировать “по вкусу”, то есть изменить размер, шрифт, начертание и цвет.

Практическая работа №4

Написать таблицу стилей (CSS) для html-документа "Цвет и цветовые модели" (приложение №3)

Требования:

1. Заголовок 1-го уровня (<h1> .</h1>)

- Выравнивание по центру

- Отступ от верхнего края экрана - 30px

- Высота нижнего поля - 30x

- Размер, цвет и начертание, отличное от других элементов

2. Заголовки 2-го уровня (<h2> .</h2>)

- Выравнивание по левому краю

- Высота нижнего поля в 2 раза меньше высоты верхнего поля (задать самостоятельно)

- Наличие левого отступа (задать самостоятельно)

- Размер, цвет и начертание, отличное от других элементов

3. Абзац (<p>)

- Наличие красной строки (значение задать самостоятельно)

- Выравнивание по ширине экрана

- Ширина левого отступа = ширине правого отступа (задать самостоятельно)

- Размер, цвет и начертание, отличное от других элементов

4*. Создать три класса для следующих частей абзаца (<span> .</span>)

1) Первое предложение каждого абзаца

2) Термины и обозначения

3) Названия цветов

Задание №2

1. С помощью css задайте для элемента body (тело страницы) следующие значения:

- Фон закрашен одним узором из папки background. Изображение повторяется по горизонтали и по вертикали

- Фон во время прокрутки страницы остается неподвижным

2. Создайте три класса элементов "блок" (<div> .</div>)

1) Первый класс содержит в себе заголовок страницы (Цвет и цветовые модели)

- фон закршен одной из картинок из папки background

- Изображение повторять только по горизонтали

- высоту (height) задайте самостоятельно

- ширина (width) 100%

2) Второй класс содержит в себе меню страницы

- фон закрашен произвольным цветом

- высоту (height) задайте самостоятельно

- ширина (width) 100%

3) Третий класс содержит в себе графические изображения, расположенные в конце каждого абзаца. В блоке могут находится несколько изображений.

Практическая работа №5 Разметка web-страницы с помощью «блоков»

Пример:

Создание блока «Шапка страницы»

<div id="top"> <h1> Шапка страницы </h1> </div>

Описание блока «Шапка страницы с помощью CSS»

#top

{

height:200px;

width:100%;

background-color:#cc00cc;

position: absolute;}

Задание №1

1. Создайте 4 блока с разными идентификаторами и расположите в них соответствующий текст

1) Шапка страницы

2) Меню сайта

3) Контент сйта

4) Логотип сайта

2. Напишите таблицу стилей для каждого блока, используя свойства:

height:

width:

background-color:

margin-left:

margin-top:

position: absolute;

Задание №2

1. Замостите любым узором из папки Background фон документа (по желанию, блоки «Меню сайта» и «Шапка страницы»)

2. Закрасьте блок «Контент сайта» цветом, согласующимся с фоном страницы.

3. Вставьте в блок «Логотип» любую картинку из папки Logo

4. Откройте Вашу предыдущую практическую работу, находящуюся в папке «CSS – Прак. раб№2»

5. Скопируйте на страницу:

1) Заголовок «Цвета и цветовые модели» в блок «Шапка страницы»

2) Меню в блок «Меню»

3) Весь остальной текст в блок «Контент сайта»

6. Скопируйте таблицы стилей для этих элементов и добавьте их на новую страницу

Данная система заданий имеет свой целью научить школьников основным приемам разметки веб-страницы с попомщью элементов и присваивать этим элементам нужные свойства с помощью каскадных таблиц стилей. В случае успешного овладения данными навыками, они будут способны создать шаблон для генерации веб-страниц.

Таким образом, в парктической главе мы рассмотрели методику преподавания технологии web 2.0 в школе и процесс создания школьго сайта с применением этой технологии, доступный по содержанию для учащихся школы.

Заключение

Подведем итоги нашей дипломной работы. Итак, наше исследование состоит из теоретической и практической части. В теоретической части мы рассмотрели психолого-педагогические аспекты преподавания веб-технологий в школе и способы воздействия на мотивацию учащихся с целью совместного создания и ведения школьного сайта спортивной тематики. Также мы проанализировали научно-популярную литературу и различные информационные ресурсы по теме «Создание динамических web-приложений». На основе данного анализа мы выбрали технологии, которые впоследствии использовали для создания веб-приложения «Спортивный сайт школы».

В ходе теоретического и экспериментального исследования получены следующие основные результаты:

1. Мы изучили методическую и научно-популярную литературу по теме исследования и рассмотрели возможность ее применения в образовательном процессе;

2. Установили взаимосвязь между совместной работой над школьным сайтом и повышением мотивации к учебному процессу;

3. Установили класс теоретических понятий, которые нужно знать и понимать школьнику для выполнения практической части;