Файловый архив студентов. Файловый архив студентов.
1261 вуз, 4613 предмет.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Башкирский Государственный Педагогический Университет им. М. Акмуллы
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
UMK-_Internet_tekhnologii_bakalavr.doc
Скачиваний:
103
Добавлен:
18.03.2015
Размер:
2.27 Mб
Скачать
☆
►Содержание►

Лабораторная работа № 4 Создание домашней странички (папка web)

Основные требования:

- табличная структура (меню, контент, заголовок); сайт содержит 4 страницы; используются иллюстрации (в отдельной папке img).

1.Тема сайта - home page.

2. Опредилить структуру сайта (расположение меню, заголовков, контента)

Пример:

заголовок

Обо мне

Мои увлечения

Гостевая книга

На главную

контент

3. При работе использовать файлы контрольной работы № 1.

4. Написать файл стилей.

Пример: файл style.css

.zag{background-color:#ff0000 ; text-align:center; color:#000000}

.content{background-color:#00ff00; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif}

.menu{background-color:#0000ff; color:#000000}

A {text-decoration:none}

A:vizited{color:#000000}

A:hover{color:#000000; text-decoration:underline}

5. Написать первую страницу index.htm, со ссылкой на файл стилей

Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>my home page</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<table width="100%" height="100%" border="1" cellpadding="5" cellspacing="5" bordercolor="#000000" bgcolor="#000000">

<tr bordercolor="#FFFFFF">

<td height="50" colspan="2" class="zag">Заголовок</p></td>

</tr>

<tr>

<td width="30%" valign="top" class="menu">

<p> Обо мне </p>

<p> Мои увлечения </p>

<p> Гостевая книга </p>

<p> </p>

<p> </p>

<p> </p>

<p> на главную </p>

</td>

<td width="70%" height="100" valign="top" class="content">

обо мне - главная

</td>

</tr>

</table>

</body>

6. Используя команду «сохранить как», создать остальные файлы:

str1.htm, str2.htm. Третья страница str3.htm – гостевая книга.

7. Прописать все ссылки

8. Заполнить контент

9. Составить отчет о лабораторной работе.

Лабораторная работа № 5 JavaScript

Для выполнения заданий необходимо создать папку JS.

Для создания файлов выбирать команду Создать – Текстовый документ.

Задание 1. Включение скриптов JavaScript в HTML страницу

Цель этого примера показать, как вставляется JavaScript в файл HTML-документа и продемонстрировать назначение тегов <script> и </script>.

1. В текстовом документе набрать текст:

<html>

<body>

<br>

Это обычный HTML документ <br>

<script language = "JavaScript">

document.write("ЭTO и есть JavaScript!")

</script>

<br>

Выходим обратно в HTML

</body>

</html>

2. Сохранить файл в папке JS под именем z1.htm. Просмотреть файл.

Задание 2. Обработка событий

Событие — это очень важное в программировании на JavaScript понятие. События главным образом порождаются пользователем, явля­ются следствиями его действий. Если пользователь нажимает кнопку мыши, то происходит событие, которое называется Click. Если экранный указатель мыши движется по ссылке HTML-документа, происходит со­бытие MouseOver.

Можно заста­вить появиться новое всплывающее окно, которое появляется при нажа­тии кнопки. Появление нового окна будет следствием наступления собы­тия Click.

1. В текстовом документе набрать текст

<html>

<body>

<form>

<input type="button" value="Нажми сюда" onClick="alert('Ой-ой')"> </form>

</body>

</html>

2. Сохранить под именем z2.htm. Просмотреть файл.

Задание 3. Обработка функций. Открытие окон.

С помощью JavaScript можно создать новое окно броузера. В новое открывшееся окно можно загрузить уже существующий HTML-документ, но в нем также можно разместить абсолютно новый, создаваемый по ходу работы, документ. Рассмотрим пример того, как можно создать новое окно броузера и загрузить в него существующий документ.

Следующий скрипт открывает новое окно броузера и загружает в него HTML-страничку.

<html>

<head>

<script language = "JavaScript">

function openWin()

{ myWin=open("z1.htm");}

</script>

</head>

<body>

<form>

<input type = "button" value="Открываем новое окно"

onClick="openWin() " >

</form>

</body>

</html>

2. Сохранить под именем z3.htm. Просмотреть результат.

3. Заменить строку

myWin=open("z1.htm")

На следующий текст

myWin=open("z1.htm", "newWindow", "width400, height = 30, status = no, toolbar = no, menubar=no")

Просмотреть результат.

Задание 4. Обработка простых форм

1. Набрать следующий текст (Обработка формы с введением пароля, содержащим > 3 символов)

<html>

<head>

<title>Обработка сложных форм</title>

<script language=JavaScript>

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("регистрация не прошла");

}

</script>

</head>

<body>

<center>

<form name="FirstForm">

Заполните форму

<p>

имя: <input type=text size=20 name="FirstName">

<br>

фамилия: <input type=text size=20 name="LastName">

<p>

адрес : <textarea name="Address">

450000

г. Уфа

</textarea>

<p> Мои увлечения

<input type=checkbox checked=0 name="check1">Компьютеры

<input type=checkbox name="check2">Учеба

<input type=checkbox name="check3">Книги

<input type=checkbox name="check4">Спорт

<input type=checkbox name="check5">Музыка

<p>

Укажите пароль(не менее трех символов):

<br><input type=password size=10 name="Password1">

<br><input type=password size=10 name="Password2">

<p>

<input type="submit" onClick="process(1)">

</form>

</body>

</html>

2. Сохранить под именем z4.htm. Просмотреть результат.

Задание 5. Обработка списков

1. Наберите следующий текст

<html>

<head>

<title>Обработка списка</title>

<script language=JavaScript>

function newprocess()

{

str=document.SForm.city2.value

alert(str);

}

</script>

</head>

<body><center>

<p>Выберите город в котором хотите жить

<form name="SForm">

<p><select name="city2"size=4>

<option value="Уфа" selected>Уфа

<option value="Москва">Москва

<option value="Питер">Питер

<option value="Париж">Париж

</select>

<p>

<input type=submit value="Выбор" onClick="newprocess()">

</form>

</body>

</html>

2. Сохраните файл как z5.htm

Задание 6. Придумайте свою форму, на основе предыдущих, включающую 4 текстовых поля, флажки, список.

Форма должна: производить проверку пароля, подсчитывать количество выбранных ответов во флажках и обрабатывать список

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности