- •Фгбоу впо «Башкирский государственный педагогический университет
- •2. Требования к уровню освоения содержания дисциплины «Технологии Internet (Web-мастерство)»
- •3. Объем дисциплины «Технологии Internet (Web-мастерство)» и виды учебной работы
- •4. Содержание дисциплины «Технологии Internet (Web-мастерство)»
- •4.1. Разделы дисциплины и виды занятий
- •4.2.Содержание разделов дисциплины «Технологии Internet (Web-мастерство)»
- •5. Учебно-методическое обеспечение дисциплины
- •6.5. Система подготовки материалов и методических разработок
- •7. Содержание итогового и промежуточного контроля
- •7.1. Перечень примерных контрольных вопросов и заданий для самостоятельной работы
- •7.2 Теоретические вопросы к зачету.
- •Практические задания
- •8. Методические рекомендации по организации изучения дисциплины
- •8.1. Методические рекомендации для преподавателей
- •9.Учебная практика по дисциплине «Технологии Internet (Web-мастерство)» не предусмотрена.
- •2.1. Конспекты лекций по дисциплине «Технологии Internet (Web-мастерство)»
- •2.1. Язык гипертекстовой разметки html.
- •2.1.1. Основные теги.
- •Комментарии
- •Общий вид html-документа
- •2.1.2. Обычный текст или абзац
- •Обычный текст или абзац в сеpедине стpоки
- •2.1.3. Ссылки
- •Ссылки на главы дpугих документов
- •2.1.4. Списки
- •Ненумеpованный список
- •Нумеpованный список
- •2.1.5. Физические стили
- •Наложение различных стилей
- •2.1.6. Рисунки
- •Составные картинки
- •Элемент map
- •2.1.7. Таблицы
- •2.1.8. Формы html
- •Атрибут checkbox
- •Атрибут image
- •Атрибут password
- •Атрибут radio
- •Атрибут reset
- •Атрибут select
- •Атрибут submit
- •Атрибут textarea
- •2.1.9. Фpеймы
- •3.1. Базовый синтаксис css
- •3.3. Применение свойства цвета.
- •Свойство 'background-color'
- •3.4. Фоновые изображения [background-image]
- •3.5. Семейство шрифта [font-family]
- •3.6. Боксовая модель
- •Боксовая модель в css
- •3.7.Принципы css-позиционирования
- •Абсолютное позиционирование
- •Относительное позиционирование
- •4.1. Цвет и форма.
- •4.2. Модульная сетка в дизайне.
- •4.3. Типы сайтов. Модели организации сайта.
- •4.3.1. Линейная организация
- •4.3.2. Решетка
- •4.3.3. Иерархия
- •4.3.4. Паутина
- •5.1. Теория навигации
- •5.1.1 Размещение элементов навигации
- •5.1.2. Правила навигации
- •5.1.3. Основные приемы создания ссылок
- •5.2. Программы для создания web-страниц
- •6.1. Изображения в Интернет: технологии gif, jpeg, png, Flash.
- •6.1.1. Форматы изображений
- •6.1.2. Формат gif
- •6.1.3. Формат jpeg
- •6.1.4. Формат png
- •6.1.6. Другие форматы изображений
- •6.2. Анимация
- •6.3. Звук
- •6.4 Видео
- •7.1. Технологии программирования
- •7.2. Программирование на стороне клиента
- •7.2. Синтаксис языка JavaScript и основы программирования на нем
- •8.1. Технологии, работающие на стороне сервера
- •8.2. Сценарии на стороне сервера
- •8.3. Технологии создания интерактивных страниц: asp, php, ssi
- •8.4. Серверные программные интерфейсы приложений
- •8.4. Сетевые и сопутствующие протоколы
- •8.4.3. Адресация: url/uri/urn/urc
- •9.4 Работа с формами
- •9.5. Рнр: выборочная загрузка
- •9.6 Рнр: гостевая книга
- •10.1. Базовая модель Web-процесса
- •10.2. Планирование сайта
- •I определение цели
- •2. Определение аудитории
- •3. Профилирование пользователей
- •4. Требования к сайту
- •II план сайта
- •III разработка дизайна
- •Логотип
- •Навигатор по сайту
- •IV создание пробного сайта
- •V тестирование
- •10.3 Публикация и продвижение сайта
- •Упражнение 2 – создание списка
- •Упражнение 3 - вставка рисунка
- •Упражнение 4 – гиперссылки
- •Лабораторная работа № 2 Создание home page средствами Notepad (папка web)
- •Последовательность выполнения работы
- •Лабораторная работа № 3
- •Сведения о пользователе
- •Лабораторная работа № 4 Создание домашней странички (папка web)
- •Лабораторная работа № 5 JavaScript
- •Лабораторная работа № 6 JavaScript Создание и обработка форм в электронных документах, их назначение.
- •Лабораторная работа № 7 Тема «Использование Flash-технологий для создания Web-сайтов»
- •Задания для самостоятельной работы
- •Упражнение 4 Создание анимационного ролика «Шарик летит по улице города»
- •Упражнение 6 Создание собственных кнопок
- •Задания для самостоятельной работы
- •Лабораторная работа № 8. Создание web-сайта средствами редактора Dreamweaver (папка web-6)
- •5 Проверить корректность работы файла стилей!
- •Лабораторная работа №9 по технологиям Internet.
- •Лабораторная работа 10. Введение в язык php
- •Лабораторная работа 11. Обработка данных форм
- •Лабораторная работа 12. Массивы
Лабораторная работа № 6 JavaScript Создание и обработка форм в электронных документах, их назначение.
Рекомендации к составлению форм:
1) Используйте тэг перевода строки <br>, в контейнере формы;
2) Если вы работаете с длинным полем ввода, или с полем TEXTAREA, целесообразно разместить поясняющий текст над полем, а не рядом с ним;
3) Можно воспользоваться тэгом предварительного форматирования <pre>, для выравнивания полей, но данным советом лучше не пользоваться;
4) Пользуйтесь таблицами для выравнивания полей форм. Данный метод предпочтительнее предварительного форматирования, т.к. позволяет включить в форму не только форматирование и текст, но и другие объекты HTML, например рисунки.
5) Используйте тэг абзаца <p>, для разделения формы на логические части;
6) Иногда для желаемой компоновки формы оказывается недостаточным применение тэгов перевода строки и абзаца. Попробуйте воспользоваться тэгами списка. Они особенно хорошо подходят для организации нужного отступа и нумерации полей;
7) Существует три основных способа расположения опций на странице: горизонтальный (в одной строке), вертикальный (списком) и смешанный (таблицей);
8) Допускается комбинирование нескольких способов компоновки в одной форме;
9) Разрабатывая форму, старайтесь не выходить за рамки одной страницы;
10) Кнопку отправки располагайте внизу формы;
11) Располагайте поля формы в логическом порядке;
12) Хорошо продумайте вашу форму еще до начала их разработки.
Упражнение 1. Простейшая форма.
Создать форму, которая содержит текст "Моя первая форма!" и кнопку подтверждения (ниже строки текста). При нажатии кнопки появляется окно сообщения с текстом "Принято".
Теория.
Кнопку подтверждения вставляют с помощью элемента INPUT (не имеет закрывающего тега), который в простейшем варианте может быть сформирован следующим образом
<INPUT TYPE=SUBMIT OnClick=метод_обработчик >
Небольшой метод, выполняющий обработку, может быть записан прямо в элементе INPUT.
В общем случае здесь записывается вызов функции-обработчика (заключается в кавычки).
Выполнение упражнения.
1) Наберите текст, приведенной HTML-страницы и убедитесь, что форма функционирует в соответствии с заданием.
<html>
<head>
<title> First Form</title>
</head>
<body>
<form>
Моя первая форма!
<P>
<input type="submit" onClick="alert('Передано!')">
</form>
</body>
</html>
После проверки работы программы вставьте теги для выравнивания кнопки подтверждения по центру строки и обновите файл.
2) Создайте в разделе HEAD функцию - обработчик process (скрипт), которая выводит окно с требуемым сообщением. Текст сообщения определяется в функции process с помощью переменной str. Замените вызов функции alert на вызов process.
3) Удалите текст. Измените функцию process так, чтобы она имела один аргумент — текст сообщения. В определении обработчика onClick измените вызов функции process, добавив в качестве аргумента текст 'Новый вариант' (в апострофах, так как кавычки уже использованы).
4) Добавьте на страницу вторую форму, в которой выводится текст "Это вторая форма" и используется та же функция-обработчик process. На экране разделите формы горизонтальной линией. При нажатии кнопки из первой форме должен выводиться текст "Первая форма", а на второй — "Вторая форма".
Упражнение 2. Запрос строк текста.
В первую форму добавить два окна для ввода имени и фамилии. При нажатии кнопки подтверждения появляется окно, в котором выводятся объединенные в одну строку имя и фамилия. Функция-обработчик process принимает один аргумент — номер вызвавшей его формы. Далее, следуя инструкциям необходимо ввести новую форму для ввода пароля.
Теория.
! Для адресации к конкретному элементу конкретной формы с помощью атрибута name элементам и формам присваиваются имена (в тексте упражнения они выделены).
Текст, введенный пользователем в созданное окно, определяется значением свойства value (при использовании этого свойства для обработки в скрипте использовать для записи только строчные буквы).
Выполнение задания.
1) Наберите текст, приведенной HTML-страницы и убедитесь, что форма функционирует в соответствии с заданием.
<html><head>
<title> Форма с текстовыми полями</title>
<script language=javascript>
function process(nForm){
if(nForm==1){
str=document.FirstForm.FirstName.value+" " +
document.FirstForm.LastName.value;
alert(str) }
}
</script></head>
<body>
<form name="FirstForm">
Моя первая форма!
<P>
Имя: <input type=text size=20 name="FirstName">
Фамилия: <input type=text size=20 name="LastName">
<P><input type=submit onClick="process(1)">
</form>
<hr>
<form> Это вторая форма!
<P><input type=submit onClick="alert('Пусто!')">
</form>
</body></html>
В обработчике обратите внимание на метод обращение к значению поля, который фактически описывает "путь" выбора от наиболее общего понятия (document) к собственно значению элемента value. Запись (читается слева направо):
document.FirstForm.FirstName.value
означает: в документе выбрать форму FirstForm, в которой выбрать элемент FirstName, у которого получить свойство value.
2) Добавить во вторую форму поле "Место жительства". Добавить в process обработку информации из второй формы (не забудьте дать имена элементам документа).
При нажатии кнопки во второй форме выводится строка, объединяющая текст "Место жительства: « и название взятого из формы населенного пункта.
3) Добавить третью форму для ввода пароля регистрации пользователя в системе. Для этого необходимо использовать уже знакомый тэг INPUT с параметром TYPE=”password”. В этом случае все вводимые символы будут заменяться звездочками.
4) Создать два поля для ввода пароля. Затем изменить функцию process, для того чтобы она могла обрабатывать информацию поступающую от третьей формы следующим образом:
· Если пароль в первом и втором поле указан правильно (совпадает) выводиться сообщение “Войти в систему?” и двумя клавишами OK и Cancel. (Для выполнения этого задания можно воспользоваться функцией confirm(строка)). Пример: result=confirm(“Войти в систему?”). В случае нажатия на кнопку OK переменная result получит значение TRUE, иначе FALSE.
· Если пароль указан неправильно (не совпадает в первом и во втором поле) выводится сообщение “Пароль набран не правильно!!” с единственной клавишей OK. Переменная result в этом случае положить значение FALSE.
· Если значение переменной result TRUE (истина) вывести сообщение “Регистрация в системе прошла успешно”, иначе “Регистрация не прошла”.
Рекомендации: Для проверки на равенство двух строк можно воспользоваться операторами языка JavaScript = = (проверка на равенство), или != (проверка на неравенство). Пример: Str= =FirstForm.Lastname.value.
Упражнение 3. Использование полей для ввода многострочной информации.
Преобразуем поле ввода - места жительства, т.о. чтобы в нем можно было указывать полный адрес. Очевидно, что для этих целей использование однострочного поля не логично. Для подобных целей используется контейнер, используемый в создаваемых формах: TextArea . Этот контейнер описывает поле, состоящее из нескольких строк.
Заменим тэг места жительства INPUT в предыдущем упражнении на следующий:
<textarea rows=5 cols=20 name="Address">
450000
г. Уфа
</textarea>
1) Проверьте работоспособность HTML документа. Внимание!!! Имя объекта осталось прежним.
2) Объединим используемые нами формы в одну; Исправим созданную нами функцию process.
<html><head>
<title> Форма с текстовыми полями </title>
<script language=javascript>
function process(nForm){
var result;
if(nForm==1) {
str=document.FirstForm.FirstName.value+" " +
document.FirstForm.LastName.value+"\n"+"Место жительства: "+document.FirstForm.Address.value;
if (document.FirstForm.Password1.value == document.FirstForm.Password2.value) {
alert(str);
result=confirm("Войти в систему?");
}
else{
alert("Пароль набран не правильно!!");
result=0;
}
if (result==1) alert("Регистрация в системе прошла успешно!!")
else alert("Регистрация не прошла)");
}
}
</script>
</head>
<body>
<form name="FirstForm">
<P>
Имя: <input type=text size=20 name="FirstName"><br>
Фамилия: <input type=text size=20 name="LastName"><br>
Место жительства:
<textarea rows=5 cols=20 name="Address">
450000
г. Уфа
</textarea><br>
Укажите пароль: <br> <input type=password size=20 name="Password1">
<br><input type=password size=20 name="Password2"><br>
<P><input type=submit onClick="process(1)">
</body></html>
3) С помощью тэгов таблицы проведите выравнивание полей формы относительно друг друга (border=0). Для всех текстовых полей укажите одинаковую величину, описывающую количество символов в строке.
4) Используя дополнительный параметр тэга INPUT – maxlength установить максимально возможное количество символов: для имени – 15, для фамилии 20, для пароля 10.
Упражнение 4. Использование флажков.
Добавить в форму анкету, состоящую из 5-7 простых вопросов. Изменить процедуру обработки т.о. чтобы выводилось сообщение о количестве включенных и выключенных флажках. (Например: Включено – 3, Выключено – 4).
Теория.
Для добавления флажка в форму используется уже знакомый тэг INPUT. В этом случае параметр TYPE должен иметь значение checkbox, параметр CHECKED может принимать значение true(1) или false(0), в зависимости от начального положения флажка.
Пример:
<input type=checkbox checked=1 name="check1">
! Для обращения к любой форме в документе можно использовать не только имя, но и номер в массиве форм (далее в коде выделено). Все формы в документе получают свой порядковый номер (который начинается с нуля).
Аналогичный метод существует и для элементов форм. Каждый объект в форме получает свой порядковый номер, и доступ к нему может быть осуществлен через массив элементов формы elements.
Например: document.forms[0].elements[4].value.length
В данном случае необходимо получить длину строки пятого элемента первой формы текущего документа.
Выполнение задания:
1) Добавить в имеющуюся форму 5 вопросов в левую часть таблицы (добавить 5 строк таблицы);
2) Добавить в левую часть таблицы 5 флажков. Каждый флажок должен по умолчанию иметь значение наиболее вероятного ответа. (Должны присутствовать различные начальные состояния); Какое значение используется по умолчанию?
3) Изменить функцию process т.о. чтобы в случае успешного входа в систему подводился итог количества положительных и отрицательных ответов. Для этого необходимо произвести подсчет, например, так:
Если объекты флажков имеют имена check1, check2 и т.д.
v=0;n=0;
If (document.FirstForm.check1.checked=1) v++
else n++;
If (document.FirstForm.check2.checked=1) v++
else n++;
и т.д.
4) Добавить проверку на недопустимость паролей длиной менее 4 символов; (Для этого можно воспользоваться свойством length объекта строки); Пример:
document.FirstForm.Password1.value.length
Текст функции process:
function process(nForm)
{
var result,v,n;
str=document.FirstForm.FirstName.value+" " +
document.FirstForm.LastName.value+"\n"+"Место жительства: "+document.FirstForm.Address.value;
if (( document.FirstForm.Password1.value == document.FirstForm.Password2.value)
&& (document.FirstForm.Password2.value.length>3))
{
alert(str);
result=confirm("Войти в систему?");
}
else
{
alert("Пароль набран не правильно!!");
result=0;
}
if (result==1)
{
alert("Регистрация в системе прошла успешно!!");
v=0;n=0;
if (document.forms[0].check1.checked==1) v++
else n++;
if (document.forms[0].check2.checked==1) v++
else n++;
if (document.forms[0].check3.checked==1) v++
else n++;
if (document.forms[0].check4.checked==1) v++
else n++;
if (document.forms[0].check5.checked==1) v++
else n++;
alert("Ответов ДА-"+v+" Ответов НЕТ-"+n);
}
else alert("Регистрация не прошла");
}
5) Изменить подсчет количества положительных и отрицательных ответов на цикл, осуществляя просмотр соответствующих элементов (по номерам). Пример:
v=0;n=0;
for(i=5;i<12;i++)
if (document.forms[0].elements[i].checked==1) v++
else n++;
alert("Ответов ДА-"+v+" Ответов НЕТ-"+n);
Упражнение 5. Использование переключателей.
В данном задании необходимо создать новую форму, содержащую переключатели (2 группы по 3-5 переключателей в каждой) и кнопку SUBMIT. Кроме того, необходимо написать новую функцию для обработки информации от данной формы – она должна выводить сообщение о номере выбранного элемента в первой и второй группе.
Теория.
Для выполнения данного задания будем использовать файл, сформированный нами в 4-ом упражнении. Построение переключателей проходит в той же последовательности, что и создание флажков. В качестве параметра TYPE выступает значение radio. Возникает вопрос как определить к какой группе относится переключатель. Решение состоит в том, что у каждого переключателя поле NAME совпадает с именем группы (и наоборот имя группы совпадает с именем любого из переключателей входящих в группу). Т.о. для создания группы переключателя необходимо создать хотя бы один переключатель и задать в нем поле NAME. Построим две группы переключателей с именами групп соответственно: group1 и group2. Обратите внимание, что значения по умолчанию устанавливаются так же как и у флажков через параметр CHECKED, но значение истина (1) может быть только у одного члена группы.
<form name="SecondForm">
<input type=radio name="group1">
<input type=radio name="group1">
<input type=radio name="group1" checked=1>
<input type=radio name="group1">
<input type=radio name="group2">
<input type=radio name="group2" checked=1>
<input type=radio name="group2">
<input type=submit onClick="">
</form>
1) Протестируйте данный пример. Определите какие переключатели относятся к первой, а какие ко второй группе. Попробуйте переставить строки местами, убедитесь, что принадлежность группе определяется полем NAME.
2) Добавим новую функцию (newprocess), обрабатывающую значения из второй формы. Для обращения к форме и к ее элементам будем использовать соответствующие массивы (см. переключатели). Не забудьте отредактировать пункт onClick кнопки submit.
function newprocess()
{
var str1,str2;
str1="";
str2="";
for (i=0;i<4;i++) str1+=document.forms[1].elements[i].checked+" ";
for (;i<7;i++) str2+=document.forms[1].elements[i].checked+" ";
alert(str1+"/"+str2);
}
Объясните почему значение индекса forms равно 1. Если вы внимательно выполняли задание, то, наверное, заметили, что пример приведенный выше не выполняет тех действий, которые даны в задании. В данном примере выводиться состояние всех переключателей первой и второй группы, разделенные косой чертой. Но эта информация избыточна, т.к. достаточно знать какой переключатель в каждой из форм является истинным, чтобы сделать вывод о ложности всех остальных. Модифицируйте функцию таким образом, чтобы она сообщала о номерах включенных переключателях (причем мы будем нумеровать их, начиная с 1).
3) Добавьте форматирование, т.о. чтобы переключатели располагались друг под другом в двух столбцах (в каждом столбце по группе).
4) В приведенном примере мы обращались к значениям переключателей через elements, но можно аналогично обращаться к этим же параметрам используя имя группы, пример:
document.forms[1].group1[1].checked
Упражнение 6. Использование списков.
Во вторую форму (см. Упражнение 5) вместо флажков необходимо включить два списка. Первый представляет собой всплывающий список городов из которых можно выбрать только один город. Второй – список городов (с полосой прокрутки) из которых можно выбрать только один.
Теория:
Для создания подобных списков используется контейнер <select> </select>, который имеет следующие параметры: NAME – с этим параметром мы уже знакомы, SIZE – определяет количество видимых строк на экране (его мы рассмотрим ниже на примере).
Для указания элементов списка используется тэг <option>, который включается в контейнер списка <select>. Тэг <option> имеет следующие параметры: value – указывает, какое значение будет передано обработчику в случае выбора данного объекта из списка и selected – определяет какое значение из списка будет использоваться по умолчанию. Рассмотрим следующий пример:
<select name="city" size=1 >
<option value=1> Москва
<option value=”Уфа” selected> Уфа
<option value=3> Рига
<option value=4> Санкт-Петербург
<option value=5> Саратов
<option value=6> Липецк
</select>
1) Данный список необходимо добавить во вторую форму (см. упражнение 5).
2) Изменим функцию newprocess, добавив в нее следующую строку:
alert(""+document.forms[1].city.value);
Остальные строки данной функции закомментируем: /* */.
3) Добавим второй список, у которого содержимое контейнера не изменяется, но изменятся два параметра: имя списка – city2, параметр SIZE равен 5.
<select name="city2" size=5>
Какие изменения с точки зрения визуального представления вы наблюдаете?
4) Изменим функцию newprocess, добавив в нее следующую строку:
alert(""+document.forms[1].city2.value);
Какие сообщения мы будем получать, выбирая различные города из представленного списка. Почему?
Какой город используется по умолчанию? Как сменить город по умолчанию?
Попробуйте добавить в приведенный список еще несколько городов. Смените город по умолчанию.
5) Используя тэги таблицы, установите форматирование для новых встроенных объектов.