Методика обучения технологии web 2.0 на примере создания школьного сайта спортивной тематики (стр. 9 из 13)
Реализация процесса регистрации нового пользователя на сайте состоит из следующих этапов: добавление средств навигации по сайту, чтобы пользователь мог найти регистрационную форму; отображение регистрационной формы; получение от пользователя его идентификационных данных и проверка их корректности; вывод сообщений об ошибках; сохранение записи в базе данных, отправка пользователю почтового сообщения, отображение страницы подтверждения регистрации.
Порядок написания программного кода для реализации данных функций веб-приложения следующая:
1. Создание класса функций, отвечающего за обработку регистрационных форм UserRegistration.php(листинг 2.4)
2. Создание шаблонов для страниц, связанных с регистрацией пользователей (листинг 2.5 – 2.6) Использование обработчика для входа пользователя на сайт AccountController.php.
Рис. 6 Форма для регистрации
Рис. 7 Форма для входа на сайт
Рис. 8 Приветствие вошедшего пользователя
Реализация средств web 2.0.
Реализация средств web 2.0 подробно описана в книге К. Зевраса «Web 2.0: создание приложений на PHP» в главах 8-10. Для создания системы блогов мы последовательно используем приведенный в книге код, не внося в него изменений. Главное, что нужно знать учащимся – это технологии, использование которых дает возможность создавать веб 2.0 – приложения:
·Prototype – библиотека кода JavaScript, которая упрощает написание кода на языке JavaScript, предлагая удобные средства межплатформенной разработки.
·Scriptaculous – библиотека кода JavaScript, предназначенная для создания спецэффектов и улучшения пользовательского интерфейса веб-сайтов. Эта библиотека основывается на средствах Prototype.
Основная самостоятельная работа будет осуществляться учащимися в области оформления web-приложения. Данной теме посвящен следующий параграф.
2.3 Визуальная стилистика web-приложения. Методика преподавания языковых стандартов разметки гипертекста в школе
В отличие от программирования на языках PHP и JavaScript, а также создания баз данных и запросов к ним, языковые стандарты разметки гипертекста HTML и CSSявляются, на наш взгляд, наиболее доступной для понимания школьников темой и способствуют реализации творческих способностей учеников. Если большая часть программного кода созданного приложения предполагает его копирование и пользование готовыми библиотеками, то визуальное оформление учащиеся способны сделать самостоятельно и, в зависимости от мотивации, весьма интересное и качественное. Применительно к теме нашей дипломной работы, создание визуального оформления веб-приложения не будет отличаться от оформления обычных html-страниц. Для стандартных элементов оформления нужно прописать код на языке CSS, задающий стиль этих элементов. Поэтому в данном параграфе мы выложим все задания по теме «Гипертекстовое представление информации», которые применялись мною на уроках информатике в 9 классе.
Практическая работа №1 «Создание html-страниц. Простейшие средства оформления»
Задание 1
Создайте html-страницу
1. Имеющую заголовок «Лабораторная работа №1. <Фамилия, Имя. Класс>»
2. Цветной фон (выбрать любой цвет)
Задание 2
1. На созданной странице разместите следующее стихотворение “колыбельная” из приложения 3:
2. Оформите текст следующим образом:
- Заголовок выровнен по центру, четверостишья - по левому краю, авторство - по правому;
- Каждый абзац написан различным шрифтом, цветом и размером.
- Заголовок по размеру больше остального текста и имеет жирное начертание
- Авторство написано курсивом
- Все компьютерные термины подчеркнуты.
Задание 3
Создайте html-страницу с именем Page2.html, имеющую
1. заголовок «Лабораторная работа №1. <Фамилия, Имя. Класс>»
2. цветной фон (выбрать любой цвет)
На созданной странице разместите следующую классификацию ЛВС из приложения 3 и оформите ее по образцу
Задание 4
1. Откройте документ Page2.html
1. Вставьте в этот документ «синий» текст ниже «классификации компьютерных сетей» и выполните задания:
1) С помощью тэгов <p>, <br> и <ul>список</ul> отформатируйте текст по образцу.
2) Вставьте картинки из папки imagesв те места, где стоит соответствующая метка
3) Вернитесь к пункту классификации «По типу сетевой топологии ». Сделайте так, чтобы каждый пункт списка (шина, звезда и т.д.) являлся ссылкой на соответствующее место в документе
4) * Измените начертание, размер и цвет текста «по вкусу»
Практическая работа №2
«Создание таблиц с помощью языка html»
Справочный материал
1. ТЭГИ
<table> - начало таблицы
Содержимое таблицы
</table> - конец таблицы
<tr> - начало строки
Содержимое
</tr> - конец строки
<td> - начало столбца
Содержимое ячейки
</td> - конец столбца
Пример
Написать код для создания таблицы, состоящей из 2 строк и 2 столбцов
| 1 | 2 |
| 3 | 4 |
<table>
<tr> <!-- перваястрок-
<td> 1 </td>
<td> 2 </td>
</tr>
<tr> <!--вторая строка-
<td> 3 </td>
<td> 4 </td>
</tr>
</table>
1. АТРИБУТЫ ТЭГОВ
<table>
1) Размеры
width = “ширинатаблицы”
height = “высотатаблицы”
2)Отступы
cellspasing= “расстояниемеждуячейками”
cellspadding = “отступ от границ ячейки внутри нее”
3)Линии
border = “толщина линии рамки” bordercolor = “цвет линии рамки”
4) Заливка ячеек
bgcolor = “цвет заливки ячейки”
background = “фоновая картинка для таблицы”
5) Выравнивание
align = “выравнивание содержимого таблицы по горизонтали”
valign = “выравнивание содержимого таблицы по вертикали”
1. Для тэгов <tr> и <td> применимы те же атрибуты, кроме №2 и №3, НО относится они будут исключительно к содержимому строки (<tr>) и конкретной ячейки (<td>)
2. Если ячейка ничего не содержит, то между тэгами, обозначающими ячейку, нужно вставить специальный код
<td> </td>
6) Объединение строчек
Rowspan= “количество ячеек”
7) Объединение столбцов
Colspan = “количество ячеек”
Задание №1
1. Откройте файл page3.html
2. Используя рассмотренный ранее материал, создайте таблицу по образцу
Этапы выполнения задания:
1. Создайте таблицу, состоящую из 9 строчек и 6 столбцов. Пронумеруйте ячейки следующим образом.
| 1 | 2 | 3 | 4 | 5 | 6 |
| 7 | |||||
| 8 | |||||
| 9 | |||||
| 10 | |||||
| 11 | |||||
| 12 | |||||
| 13 | |||||
| 14 |
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>)
- Наличие красной строки (значение задать самостоятельно)
- Выравнивание по ширине экрана
- Ширина левого отступа = ширине правого отступа (задать самостоятельно)
- Размер, цвет и начертание, отличное от других элементов