Методические рекомендации на тему "Создание сайта". Практическая работа 1 Создание Web страницы Цель работы Научиться создавать Webстраницы. Задачи работы

Название	Практическая работа 1 Создание Web страницы Цель работы Научиться создавать Webстраницы. Задачи работы
Анкор	Методические рекомендации на тему "Создание сайта"
Дата	24.09.2018
Размер	0.51 Mb.
Формат файла
Имя файла	Методические рекомендации на тему "Создание сайта".doc
Тип	Практическая работа #30829
Категория	Информатика

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

«Создание Web – страницы»

Цель работы: Научиться создавать Web-страницы.

Задачи работы:

1. Познакомиться с языком HTML.

2. Овладеть техникой создания Web-страниц.

Обеспечивающие средства: Сборник описаний практических работ; операционная система Windows XP, программа Internet Explorer; программа «Блокнот», персональный компьютер.

Требования к отчету: Итоги практической работы представить в виде файла lab1.html на диске.

Технология работы:

1.Создайте папку «Сайт» в папке «Мои документы». Откройте программу «Блокнот» в качестве простого инструмента для создания веб-страниц. Блокнот — это несложный текстовый редактор, используемый для создания простых документов. Наиболее часто программа «Блокнот» используется для просмотра и редактирования текстовых (TXT) файлов, для создания файлов веб-страниц (HTML). Программа «Блокнот» поддерживает только основное форматирование, поэтому случайное сохранение специального форматирования в документах, в которых должен остаться чистый текст, исключено. Это особенно полезно при создании HTML-документов для веб-страниц, так как особые знаки или другое форматирование могут не отображаться на опубликованных веб-страницах. Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры.

Документ HTML всегда начинается с тега и заканчивается закрывающим тегом .

Внутри документа выделяются два основных раздела: раздел заголовков и тело документа, идущие друг за другом.

Основное содержание размещается в теле документа, которое ограничивается парным тегом . Простейший правильный документ HTML, содержащий все теги, определяющие структуру, имеет вид:

Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами . Раздел заголовков должен содержать общий заголовок документа, ограниченный парным тегом

Таблица №1
Ф.И.О.	Адрес
Панова И.И.	Мира 6-21
Мишина В.П.	Победы 47-154
Новикова Е.Н.	Московская 23-4

меню

СОДЕРЖАНИЕ
КОМАНДЫ

РАЗМЕТКА

ШРИФТЫ

СПИСКИ

ГРАФИКА

атрибутом BACKGROUND. Данная строка будет выглядеть следующим образом:

После тегов <Н1> , определяющих стиль заголовка, добавьте еще одну строку кода:

Таким образом, код данного участка нашего html-документа будет иметь следующий вид:

ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!

и т. д.

Создайте свою домашнюю страницу согласно образцу. Сохраните внесенные в документ изменения и откройте вашу страничку в броузере (рис. 11.1).

Рис. 11.1. Web-страница после внесения изменений в код HTML

3.Покажите работу преподавателю.
4. Сохранить файл как lab11.txt в блокноте и как lab11.html для просмотра в браузере.

Практическая работа №12
«Анимация»
Цель работы: Научиться создавать анимационное изображение.
Задачи работы:

Получить навыки работы с функцией animate.

Обеспечивающие средства: Сборник описаний практических работ; операционная система Windows XP, программа Internet Explorer; программа «Блокнот»; персональный компьютер.
Требования к отчету: Итоги практической работы представить в виде файла lab12.html на диске.
персональный компьютер.

Технология работы:

function openWin(AddressURL,NUM) { if (NUM == 1) {VarWin = "width=300,height=300,status=no,toolbar=no,menubar=no,scrollbars=no"} else {VarWin = "width=500,height=300,status=no,toolbar=no,menubar=no,scrollbars=no"} open(AddressURL,"DWIN"+NUM,VarWin) } Создайте пример анимационного изображения, используя функцию animate. Размер всех картинок - 400x60 пикселей. Кроме кнопок "Быстрее" и "Медленнее", добавить еще кнопки "Стоп" и "Старт" (подумайте, как это можно сделать). Использование данной функции зависит от типа просмотрщика:

2. Сохранить файл как lab12.txt в блокноте и как lab12.html для просмотра в браузере.

Практическая работа №13
Графические часы

Цель работы: Создать графические часы.
Задачи работы:

Овладеть методикой работы с функцией clockTick() .

Обеспечивающие средства: Сборник описаний практических работ; операционная система Windows XP, программа Internet Explorer; программа «Блокнот»; персональный компьютер.
Требования к отчету: Итоги практической работы представить в виде файла lab13.html на диске.
персональный компьютер.

Технология работы:

Первый пример - это часы, отображающие время загрузки страницы (т.е. момент вызова скрипта). Используются методы объекта Date (getHours, getMinutes) и графические файлы, отображающие полученное время (имена этих файлов соответствуют цифрам 0-9).

Во втором примере, отображающем текущую дату, также используются методы объекта Date (getDate, getMonth, getYear) и графические файлы, отображающие полученную дату.

Задание - сделать идущие часы.
Для этого:

Задать пары для 10 цифр вида
dig0 = new Image(); dig0.src = "dg0.gif";

Создать таблицу, в которой будут выводиться цифры.

В таблице использовать команды с обязательным атрибутом name:

Написать функцию clockTick(), в которой

вычисляется текущее время (час, минуты, секунды);

с помощью вспомогательной функции setRis() определяется, какая картинка куда выводится;

с помощью функции setTimeout("clockTick()", 1000) запускается сама clockTick().

Функция setRis() должна иметь два аргумента: первый аргумент - какая цифра должна быть, второй аргумент - вместо какой картинки что подставлять. Для этого использовать конструкцию вида
ris.src = dig0.src (для цифры 0).

В качестве значения аргумента ris должно передаваться соответствующее значение атрибута name из команды .
Картинки:

dg0.gif

dg1.gif

dg2.gif

dg3.gif

dg4.gif

dg5.gif

dg6.gif

dg7.gif

dg8.gif

dg9.gif

dgam.gif

dgpm.gif

dgc.gif

dgp.gif

. Сохранить файл как lab13.txt в блокноте и как lab13.html для просмотра в браузере.