Рис. 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 столбцов

<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. Если ячейка ничего не содержит, то между тэгами, обозначающими ячейку, нужно вставить специальный код&nbsp;

<td> &nbsp; </td>

6) Объединение строчек

Rowspan= “количество ячеек”

7) Объединение столбцов

Colspan = “количество ячеек”

Задание №1

1. Откройте файл page3.html

2. Используя рассмотренный ранее материал, создайте таблицу по образцу

Этапы выполнения задания:

1. Создайте таблицу, состоящую из 9 строчек и 6 столбцов. Пронумеруйте ячейки следующим образом.