| В Методический Центр
Северного Административного Округа
г. Москвы
Реферат
(Мастер класс)
Уроки по теме:
«Изучение
Internet
- технологий в 10 – 11 классах.
HTML
- программирование»
Подготовил: учитель ИиИТ САО СОШ № 662
Федорова Светлана Владимировна
Москва, 2007
Содержание:
1. Введение ……………………………………………………….. 3 стр.
2. 1 занятие ……………………………………………………….. 4 стр.
3. 2 занятие ……………………………………………………….. 5 стр.
4. 3 занятие ……………………………………………………….. 6 стр.
5. 4 занятие ……………………………………………………….. 8 стр.
6. 5 занятие ………………………………………………………. 10 стр.
7. 6 занятие ………………………………………………………. 11 стр.
8. 7 занятие ………………………………………………………. 13 стр.
9. 8 занятие ………………………………………………………. 15 стр.
10. 9 занятие ………………………………………………………. 16 стр.
11. 10 занятие ……………………………………………………... 18 стр.
12. 11 занятие ……………………………………………………... 20 стр.
13. 12 занятие ……………………………………………………... 22 стр.
14. 13 занятие ……………………………………………………... 26 стр.
15. 14 занятие ……………………………………………………... 27 стр.
16. 15 занятие ……………………………………………………... 29 стр.
17. 16 занятие ……………………………………………………... 31 стр.
18. 17 занятие ……………………………………………………... 33 стр.
19. 18 занятие ……………………………………………………... 34 стр.
20. 19 занятие ……………………………………………………... 35 стр.
21. 20 занятие ……………………………………………………... 37 стр.
22. 21 занятие ……………………………………………………... 39 стр.
Введение
Преподавание раздела
Internet
– технологии является одним из самых сложных, и, в тоже время, одним из самых актуальных и интересных разделов ИиИТ для учащихся 10-11 классов. Это объясняется тем, что молодежь давно пользуется услугами
Internet
, не имея при этом глубоких знаний в этой области.
Именно в разделе
Internet
– технологии вводится большое количество терминов, которыми должны легко оперировать учащиеся. На этапе программирования и изучения
Web
– редактора, появляется возможность задействовать весь творческий потенциал ребят, а работа становится полной и осмысленной.
Самой важной проблемой для преподавателя, дающего этот раздел – наличие четкой и разработанной системы подачи материала и собственный опыт по участию в телеконференциях, форумах, чатах, созданию сайтов (который, к сожалению, не всегда имеется).
Литература и методические рекомендации по этому разделу хорошо отражают информационную часть, но, практически, не затрагивают глубоко разделы программирования и
Web
– дизайна, т.е. самой интересной части
Internet
– технологий.
Данный реферат разработан с целью, помочь преподавателям ИиИТ давать этот материал без особых затруднений, даже не имея собственного большого опыта.
Содержание представляет собой уже отработанные уроки. Количество уроков можно сократить, в зависимости от специфики комплектаций компьютерных классов, часов отведенных на ИиИТ.
Данный курс можно преподавать как в разделе Информатики, так и в разделе Информационные технологии (желательно и там, и там, не отвлекаясь на что-то другое).
Рекомендую требовать от учащихся ведения подробных конспектов, т.к. каждое занятие – проанализированный материал из многих книг и учебников, содержит самую главную и необходимую для понимания информацию.
1 занятие
«Глобальная сеть. Интернет. Технические ресурсы
Internet
.»
· Глобальная сеть
–
это система объединенных компьютеров, находящихся на большом расстоянии друг от друга.
Историческая справка:
- в 1964 г. в США была создана первая глобальная сеть, которая называлась «Система раннего оповещения о приближении ракет противника» (была засекречена).
- в 1969 г. в США была создана первая невоенного назначения сеть, которая называлась ARPANET. Сеть имела научное назначение и объединяла несколько Университетов в США.
- в 1983 г. на базе ARPANET был разработан протокол TCP/IP (с аббревиатурой познакомимся ниже). По этому протоколу и работает современный Internet.
- 1993 г. стал, поистине, революционным в развитии Internet – технологий с появлением службы WWW(World Wide Web – всемирная информационная сеть).
Так что же такое
Internet?
· Интернет
– это всемирная система компьютерных сетей, объединенных на базе протокола TCP/IP.
· Протокол
–
это стандарт (набор целого пакета программ, правил и т.д.) на предоставление сетевой информации, на способы ее передачи и обработки.
Технические ресурсы
Internet
Основными составляющими Internet являются узлы коммуникации
и каналы связи
между ними.
Для примера работы можно провести аналогию работы телефонной сети:
- узлами телефонной сети являются АТС - автоматические телефонные станции.
- АТС объединены между собой линиями связи, образующую городскую, региональную и т.д. телефонную сеть.
Аналогично абонент компьютерной сети (это может быть отдельный пользователь или целая организация) подключается к определенному Провайдеру
(
provider
– поставщик, снабженец). Пользователь заключает с Провайдером договор на предоставление определенных услуг и в дальнейшем оплачивает определенный тариф.
В распоряжении Провайдера находятся 1 – 2 мощных компьютера, которые работают в круглосуточном режиме. Эти компьютеры называются – Host
-компьютерами
(host - хозяин).
Каждый Host-компьютер имеет свой уникальный адрес в Internet, он называется
IP
– адресом (Identify Password).
IP – адрес состоит из 4-ех десятичных цифр (0 - 255), разделенных точками.
Пример
IP
– адреса:
193.126.9.17
Компьютеры пользователя также получают IP – адрес, но они называются временными адресами
(действуют только на время подключения пользователя к сети).
__________________________________________________________
2 занятие
Повторение предыдущего материала:
1. Что такое глобальная сеть?
2. Что такое Протокол?
3. Что такое Интернет?
4. Как работает Интернет?
5. Кто такой Провайдер?
6. Что такое Host-компьютерами?
7. Что такое IP – адрес?
«
DNS
– адресация. Каналы связи.»
Наряду с IP – адресами, в Internet действует система символьных адресов.
Она называется доменной системой имен (
DNS
–
Domain
Name
System
).
Каждый Host-компьютер помимо IP – адреса, приобретает имя.
Слово «домен» обозначает участок, зону. Система доменных имен строится по иерархическому принципу:
www.yandex.ru
1-ый с права от точки – домен верхнего уровня
(называется суффиксом
), следующий за ним – домен второго уровня и т.д.
Пример:
www.discoland.ru/shop
Слева от точки - домен – имя компьютера.
Домен верхнего уровня (суффикс) бывает географическим
(содержит 2 буквы) и административным
(содержит 3 буквы).
| Географический
|
Административный
|
| Российская зона - .ru
Англия - .uk
Канада - .ca
Германия - .de
Япония - .jp
|
На примере США:
.gov - правительственная сеть США
.mil - военная сеть США
.edu - образовательная сеть США
.com- коммерческая сеть
|
Каналы связи
В настоящее время широко используются 4 канала связи:
1- Телефонные линии (в системный блок ПК устанавливается модем);
2- Электрическая кабельная связь;
3- Оптоволоконныя связь;
4- Радиосвязь.
Все каналы различаются по трем главным различиям:
1- Пропускной способности;
2- Помехоустойчивости;
3- Стоимости.
Пропускная способность
- это максимальная скорость передачи информации по каналу. Она выражается в Кбит/сек или в Мбит/сек (десятки-сотни Кбит/сек – модемное соединение, десятки-сотни Мбит/сек – оптоволоконныя связь).
__________________________________________________________
3 занятие
Повторение предыдущего материала:
1. Что такое доменная система имен?
2. Какими бываю домены верхнего уровня?
3. Какие бывают каналы связи, их отличие?
4. Что такое пропускная способность?
«Программный ресурс
Internet
. Работа сети.»
Программный ресурс
Internet
Работа сети поддерживается программным обеспечением. Оно функционирует на Host-компьютерах и на персональных ПК.
Часто под словом сервер
понимают Host-компьютер, выполняющий определенные сервер – программы.
ПК пользователя имеет в ОС тоже специальные программы, которые называются Клиент – программами
:
Outlook Express
Internet Explorer и т.д.
Работа сети
В Internet используется пакетная система передачи
информации, т.е. вся, пересылаемая информация делится на небольшие блоки - пакеты протоколом TCP (Transfer Control Protocol – протокол управления передачей), к каждому пакету прикладывается IP- адрес получателя, затем все пакеты рассылаются (они могут отправиться по разным путям, но придут в одно место, т.к. на всех указан один IP- адрес получателя). На Host-компьютере получателя протокол TCP объединит все пакеты в единый документ.
Если какой-то пакет при транспортировке испорчен, то передача всего документа будет запрещена.
Каждый пакет передается от одного узла к другому, причем маршруты пакетов могут быть разными.
4 занятие
Повторение предыдущего материала:
1- Каким программным обеспечением поддерживается работа сети?
2- Что такое пакетная система передачи информации?
«
Internet
– услуги. Коммуникационные службы
Internet
»
От устройства и функционирования сети самое время перейти к главному вопросу:
Для чего используется
Internet?
Компьютерная сеть
Internet может выполнять две услуги:
1- быть средством общения между ее пользователями, находящимися на расстоянии друг от друга (эта функция называется коммуникационной
).
2- быть средством доступа к информационным ресурсам (эта функция называется информационной
).
Коммуникационная служба
Internet
I.
Электронная почта (
E-
mail)
– самая старая сетевая услуга. Ее назначение – поддержка обмена письмами в сети.
Процесс передачи почтового сообщения прост:
1. Сначала пользователь пишет текст письма в режиме off –
line
(т.е. без подключения к Internet), указывает адрес получателя и тему письма.
2. Подготовленное письмо помещается в папку «исходящие».
3. Далее в режиме on –
line
(подключившись к Internet) сервер по паролю определяет ПК – пользователя и отправляет все письма из папки «Исходящие», а также передает все поступившие письма в папку «Входящие» по протоколу POP3 (POP3 – Post Office Protocol – протокол почтового отделения).
Сеанс связи окончен!
Клиент–программа ПК – пользователя только передает и получает почту. Работает по протоколу SMTP – Simple Maile Transfer Protocol (простейший протокол передачи информации).
II. Телеконференции
Это также почтовая переписка, но отличается тем, что письмо отсылается всем участникам телеконференции (одновременно), и все сообщения, поступающие в адрес телеконференции от разных участников, отправляются каждому участнику.
Телеконференция требует регистрации всех участников, с указанием выбранной темы обсуждения, E-mail участника, Ф.И.О. участника.
Как правило, конференции посвящены обсуждению какой-либо темы (научной, политической, проектной).
В сети Телеконференции обслуживаются серверами – Новостей.
Клиент–программа ПК – пользователя только передает и получает почту. Работает по протоколу SMTP – Simple Mail Transfer Protocol (простейший протокол передачи информации).
III. Форумы прямого общения
IRC (
Internet
Relay
Chat – в переводе «болтовня»)
Проходит в режиме on-line в письменном виде.
Также надо зарегистрироваться, как участник, выбрать тему, но можно указать только свой nik – т.е. вымышленное имя
На Host-компьютере работает chat- сервер, а на ПК-пользователя - chat-клиент.
Ваше сообщение публикуется в Internet, и в дальнейшем обсуждается участниками. Всю переписку можно увидеть в Internet.
__________________________________________________________
5 занятие
Повторение предыдущего материала:
1. Как работает почта?
2. Что такое телеконференция?
3. Что такое форум?
«Информационная служба
Internet
(1993 г.). Сайт, структура каждой страницы.»
Эта служба работает в двух направлениях:
1. Служба передачи файлов
, работает по протоколу FTP (File Transfer Protocol – протокол передачи данных).
На Host-компьютере установлены серверы (программы) FTP, а на ПК – пользователя FTP-клиент (программы).
Для того, чтобы стало понятно: с появлением символьных имен Host-компьютеры (иногда их называют сервер – ПК из-за программ серверов, установленных на них) имеют большую область на жестком диске, которая предлагается всем пользователям Host-компьютера. Здесь пользователь может хранить папки с документами, свой личный банк данных и многое др.
Вся эта информация образует иерархическую структуру папок (подобно Проводнику). Часто информация, хранящаяся на сервере, является секретной. Каждый владелец получает от Провайдера свой FTP – доступ (со своим паролем и логином).
Аналогию можно провести с ячейками банка, где секретность содержимого ячейки клиента банка, гарантирует сам банк.
2. Служба
WWW
.
На сервере могут храниться сайты клиентов, которые воспроизводятся по протоколу HTTP (Hyper Text Transfer Protocol – протокол передачи гипертекстовых страниц). Его основной задачей является поиск и передача документов клиенту, а также обработкой гиперссылок.
Host-компьютер обладает WEB – сервером, а на ПК-клиента хранятся программы WEB- клиент (например Internet Explorer).
Что такое сайт (
site)?
Сайт можно сравнить с каталогом или книгой, но в отличии от них, сайт можно просматривать в любой последовательности. Все страницы увязаны ссылками – link, при нажатии на которые открываются запрошенные страницы (или даже другой сайт).
При разработке сайта нельзя допускать, чтобы на какой-то странице отсутствовали ссылки на другие страницы того же документа. Все страница сайта программируются на языке HTML.
При публикации сайт получает свой адрес URL (Uniformed Resource Locator – универсальный указатель ресурса).
Структура гипертекстовой страницы
6 занятие
«Программирование на
HTML
»
Каждый оператор на языке программирования HTML называется тег,
начинается угловой скобкой <, и заканчивается >. Различают парные (т.е. тег имеет закрывающий тег) и не парные теги.
· <
html
>
- 1 – ый тег (парный), определяет, что данный документ содержит html
– код.
· <
head
>
- голова программы, содержит:
- <
title
>
- имя сайта, оно будет высвечиваться в верхней строке браузера (парный).
Пример: <title>Мой сайт</title>
- <
meta
>
- содержит информацию о странице, облегчает поиск сайта поисковыми роботами.
· <
body
>
- парный тег. Содержит тело страницы, т.е. именно эту информацию увидит посетитель Вашего сайта.
Напишем нашу первую программу на языке
HTML.
Программа пишется в блокноте.
<html>
<head>
<title> my site</title>
</head>
<body>
<
h
1>Привет Всем!</
h
1>
</
body
>
</
html
>
Сохранить документ в специально подготовленной папке с именем index.htm
Раздел <
body
>
Параметры тега:
1. background="
name.jpg"
– фоновый узор для всего поля страницы
2. bgcolor="
yellow"
- цвет фона
3. link="
blue"
–цвет ссылок
4. alink="
red"
– цвет активной ссылки
5. vlink="
black"
– цвет посещенной ссылки
Теперь можно расширить тег <
body
> :
<body bgcolor=
"
yellow
"
link=
"
blue
"
alink=
"
red
"
vlink=
"
black
"
>
Расширьте тег <
body
>
в вашей рабочей странице index.htm (после внесенных изменений выполнить команду Файл-сохранить).
Цвет в тегах может быть записан английским названием цвета, а м.б. записан кодом цветовой палитры RGB.
В рабочем документе попробуйте поменять названия цвета фона на код. __________________________________________________________
7 занятие
Повторение предыдущего материала:
4. Что такое тег <html>?
5. Что такое тег <head>?
6. Что такое тег <body>? Его параметры.
7. Что такое код цвета?
«Оформление абзацев. Форматирование текста»
· Создание абзаца
<
div
>
- парный тег, который начинает абзац с новой строки.
Параметры:
1. align="
left"
(right, center, justify) - выравнивание абзаца.
<
div
align
=
"
center
"
>Мы изучаем программирование на языке
HTML
</
div
>
Вставьте этот тег после тега </h1> в html – код рабочей программы. Сохранитесь и посмотрите результат.
· Задание стиля шрифта
<
font
>
- парный тег.
В рабочем документе вставим в тег – абзаца стиль шрифта:
<div align=
"
left
"
><font face=
"
sans-serif
"
size=3 color=
"
green
"
>
Мы
изучаем
программирование
на
языке
HTML</font></div>
Посмотрите, как изменился шрифт.
· Физическое форматирование
Это парные теги и требуют закрытия. В рабочем документе перед русским текстом вставьте один из приведенных выше тегов, а после текста, закройте этот тег (вставьте этот фрагмент в рабочий документ, вместо
<
div
align
=
"
left
"
>Мы изучаем программирование на языке
HTML
</
div
>).
Пример (Обратите внимание, что
все теги закрываются в обратном порядке!!!
):
<div align=
"
left
"
><font face=
"
sans-serif
"
size=3 color=
"
green
"
><i>
Мы
изучаем
программирование
на
языке
HTML</i></font></div>
Посмотрите как изменился шрифт!
______________________________________________________
8 занятие
Повторение предыдущего материала:
1.
Тег абзаца?
2.
Как задать стиль шрифта?
3.
Какие теги относятся к физическому форматированию?
«Спец. символы. Заголовки.»
· Использование спец. символов
Тег переноса строки <
br
> (соответствует
Enter при работе в
Word).
Если вам надо писать большой текст:
«Да, будут ясны дни твои!
Как милый взор твой ныне ясен.
Средь лучших жребиев судьбы,
Да, будет жребий твой прекрасен!»
Здесь надо использовать тег абзаца
, тег форматирования
, тег спец. символов «»
и тег перевода строки
по окончанию каждой фразы, чтобы текст выглядел как стихотворение, иначе он растянется в длинное предложение, т.к. Enter в html – коде не воспринимается, как перевод строки.
Пример:
<div align="left">
<font face="sans-serif" size=3 color="green">
<i>Да, будут ясны дни твои!<Br>
Как милый взор твой ныне ясен.<Br>
Средь лучших жребиев судьбы,<Br>
Да, будет жребий твой прекрасен!<Br>
</i></font></div>
Вставьте этот фрагмент в html код вашей рабочей страницы, после закрытия первого абзаца (<div align="
left"
><font face="
sans-serif"
size=3 color="
green"
><i>Мы изучаем программирование на языке HTML</i></font></div>). Сохраните изменения и посмотрите на вашу html – страницу.
· Заголовки (парные теги, т.е. требуют закрытия)
<h1> - самый большой заголовок
<h2> - поменьше
<h3> и т.д. до <h6> - самый маленький
Раньше мы уже использовали этот тег, но у него есть параметр:
align="left"
(right, center, justify) – выравнивание
Изменим заголовок в рабочем документе:
<
h
1
align
="
center
"
>Привет Всем!</
h
1>
Сохраните изменения и посмотрите на вашу html – страницу.
9 занятие
Повторение предыдущего материала:
1. Какие спец. символы вам известны и для чего они используются?
2. Как можно создать заголовок и отцентрировать его?
«Списки. Линии.»
· Различают пронумерованные и непронумерованные списки.
1.
Пронумерованные списки
Пронумерованные списки начинаются стартовым тегом (парный)
<ol>
Каждый элемент списка начинается с непарного (не требует закрытия) тега: <
li
>
Параметры
тега
<ol>:
type=A
(a,I,1)
A – большие латинские буквы (A,B,C ….)
I – большие римские цифры (I, II,III….)
1 – обычные цифры (1,2,3…)
start
=
n
- число с которого начинается нумерация списка.
Пример:
<ol type=1 start=5>
<li>
Программирование
<
li
>Алгоритмизация
<
li
>Проектирование
</
ol
>
Вставьте этот фрагмент в html код вашей рабочей страницы, после закрытия последнего абзаца (после последнего </div>). Сохраните изменение рабочего документа.
2.
Непронумерованные списки
Пронумерованные списки начинаются стартовым тегом (парный)
<
ul
>
Каждый элемент списка начинается с непарного (не требует закрытия) тега: <
li
>
Параметры
тега
<ul>:
type=disc
(circle, square)
Пример
:
<ul type=
square >
<
li
>Программирование
<
li
>Алгоритмизация
<
li
>Проектирование
</
ul
>
Вставьте этот фрагмент в html код вашей рабочей страницы, после предыдущего списка. Сохраните изменение рабочего документа.
· Линии
<
hr
>
- не парный тег.
Параметры:
· align
=
"
left
"
(right, center) – выравнивание линии по горизонтали.
· color
=
"
red
"
(м.б. использован код цвета) – цвет линии.
· noshade
– без тени
· size
=
"
5
"
- толщина линии в pic.
· width
=
"…
%
"
– длина линии, обычно указывается в %.
Пример:
<hr align=
"
center
"
width=
"
100%
"
size=
"
8
"
color=
"
red
"
>
Вставьте этот тег в HTML рабочего документа, после списков. Сохраните изменения.
10 занятие
«Вставка картинок. Ссылки.»
1.
<
img
>
- тег вставки картинки (непарный тег).
Предварительно создать картинки с расширением jpg или gif и положить их в папку с рабочим документом.
Параметры тега:
· align="
left"
(right, top, middle) - управление обтеканием текста.
· alt="
alternative text"
- альтернативный текст, т.е. пояснительный текст, который появляется при наведении мышки на картинку.
· src="
n1.jpg"
- указание имени картинки, которая будут вставлена (если картинка лежит во вложенной папке, где хранятся все картинки, то нужно прописывать полный путь к картинке, пример: src="
papka/n1.jpg"
).
· border=0 - толщина рамки вокруг картинки.
· width=300 - ширина картинки (выставляется в pic.).
· height=200 – высота картинки (выставляется в pic.).
Пример
:
<img src="pic/1.jpg" align="left" alt="
логотип
"
border=1 width=200 height=200>
Вставьте этот фрагмент после линии в рабочий HTML документ. Сохраните изменения. (Можно попробовать различные варианты обтекания текстом, различную толщину рамки, вставить другие картинки).
2.
Ссылки.
Главный тег - парный
<
a
>
Параметры тега:
· href="
index.htm"
· В виде URL: href="
http://www.yandex.ru"
Пример:
1.Ссылкой является текст
<a href="index.htm">
На
главную
</a>
2. Ссылкой является картинка
<a href="
http://www.yandex.ru
"><img src="pic/2.jpg" align="left" alt="
логотип
"
border=1 width=200 height=200>
</
a
>
Вставьте этот фрагмент после картинки в рабочий HTML документ. Сохраните изменения. (Можно попробовать сделать ссылку на другой сайт). Ссылками может являться текст и картинки.
11 занятие
«Таблицы»
Таблицы – единственное средство скомпоновать страницу в полном соответствии с замыслом разработчика.
Таблица организована как набор строк и столбцов. Ячейки таблицы могут содержать любые элементы, такие, как заголовки, списки, графику, абзацы.
Таблица описывается следующими тегами:
<
table
>
- начало таблицы (парный тег).
<
tr
> -
строка таблицы (парный тег).
<
td
> -
столбец таблицы (парный тег).
1. Параметры тега <
table
>:
· width
=600 (м.б. в %)
– ширина таблицы
· height
=600 (м.б. в %)
– высота таблицы
· align
=
"
center
"
(
left
,
right
)
- размещение таблицы на экране
· background
=
"
f
1.
jpg
"
– фоновый узор заливки (всей таблицы или ячейки)
· bgcolor
=
"
white
"
(#000000)
– цвет фона (всей таблицы или ячейки)
· border
=3
– толщина рамки таблицы
· bordercolor=
"
gray
"
(#000000)
– цвет рамки
· cellpadding
=5
– втяжка внутрь ячейки (зазор между краем ячейки и внутренним содержимым)
· sellspacing
=10
- расстояние между ячейками одной и той же таблицы
1. Параметры тега <
tr
>:
· align
=
"
center
"
(
left
,
right
)
- выравнивание содержимого ячеек строки
· valign
=
"
top
"
(
bottom
,
middle
)
– вертикальное выравнивание ячеек строки
· bgcolor
=
"
gray
"
(#000000)
– цвет фона ячейки
2.
Параметры тега <
td
> :
· width
=150 (м.б. в %)
–ширина ячейки
· height
=180 (м.б. в %)
– высота ячейки
· align
=
"
center
"
(
left
,
right
)
- выравнивание содержимого ячеек
· valign
=
"
bottom
"
(
middle
,
top
)
– вертикальное выравнивание содержимого ячеек
· background=
"
f1.jpg
"
– фоновый узор
· bgcolor=
"
gray
"
(#000000)
– цвет фона
· border=3
– толщина рамки
· bordercolor=
"
gray
"
(#000000)
– цвет рамки
· colspan
=2
– объединение ячеек по горизонтали
· rowspan
=3
- объединение ячеек по вертикали
Попробуем вставить в новый документ (на чистую страницу блокнота):
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFCCCC">
<table width="44%" border="0">
<tr valign="top" align="left">
<td colspan="2"><img src="pic/zastavka2 .jpg" width="700" height="100"></td>
</tr>
<tr>
<td valign="top" align="left" width="58%">
<div align="left">
<font face="sans-serif" size=3 color="green">
<
i
>Да, будут ясны дни твои!<
Br
>
Как милый взор твой ныне ясен.<
Br
>
Средь лучших жребиев судьбы,<
Br
>
Да, будет жребий твой прекрасен!<
Br
>
</i></font></div>
</td>
<td align="right" width="42%"><img src="pic/3.jpg" width="200" height="200"></td>
</tr>
</table>
</body>
</html>
Сохраним этот документ с расширением
htm (с новым именем).
12 занятие
«Бегущая строка»
Используется для привлечения внимания ваших посетителей к новостям о Вашей организации, о новостях сайта (какие-то страницы обновлены и т.д.).
Главный тег <
marquee
>
Параметры тега:
· align
=
"
top
"
(
right
,
left
,
middle
,
bottom
)
– выравнивание строки:
right
–
по правому краю
left
-
по левому краю
top
-
вверху страницы
middle
–
в по центру страницы
bottom
–
внизу страницы
· behavior
=
"
slide
"
– поведение текста (движущийся).
· scrolldelay
=
"
value
"
(value – без задержки, общим потоком, т.е. текст заканчивается и снова идет без интервала задержки) – задержка текста, лучше ставить в pic ≈ 250.
· loop
=
"
value
"
(-1,
infinite
)
(value – одноразовый пробег,
-1,
infinite – число проигрываний – неограниченно) – число проигрываний или прохождений текста по строке.
· width
=
"
…%
"
– ширина бегущей строки, можно в pic.
· height
=18 (м.б. в %)
– высота бегущей строки, лучше указывать в pic.
· direction
=
"
left
"
(
right
)
– направление движения текста.
· bgcolor
=”#……”
(можно по названию цвета) -
цвет фона
Пример:
<
marquee
behavior
="
slide
"
direction
="
left
"
bgcolor
="
green
"
width
="100%"
height
="15"
scrolldelay
="240"
loop
="-1,
infinite
"><
font
color
="
white
">Наш сайт участвует в районной олимпиаде по проектной деятельности.</
font
>
</
marquee
>
На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «бегущую строку», сохранить документ с именем stroca.htm. Должно получиться следующее:
<html>
<head>
<title> my site</title>
</head>
<body>
<
marquee
><
font
color
="
black
">Наш сайт участвует в районной олимпиаде по проектной деятельности.</
font
></
marquee
>
</body>
</
html
>
12 занятие
«Формы»
Формы нужны, когда от посетителя Вашего сайта требуется заполнить определенную информацию для Вас, и отправить на Ваш E-mail (часто используется в «гостевой книге»). Иногда формы используются для удобства навигации (движения) по сайту (раскрывающиеся списки).
Главный тег <
form
>
- парный тег.
Параметры:
1.
method
="
post
"
- отправка почтой.
2.
action
="
mailto
:
info
@
yandex
.
ru
"
- указывается адрес E-mail владельца сайта
Тег будет выглядеть так:
<form method="post" action="mailto:info@yandex.ru">
Элементы формы, которые будут описаны ниже
<
/form
>
Элементы формы
· Текстовые поля (свободный текст) –
позволяет пользователю вводить более одной строки текста
<textarea>
- парный тег
Параметры:
· name
="…." -
название текстового поля (англ. буквами).
· rows
=5 -
высота поля в символах.
· с
ols
=10 -
ширина поля ввода в символах.
· wrap
="
off
" (
virtual
) –
строка символов не разбивается (разбивается автоматически).
Тег будет выглядеть так:
<form method="post" action="mailto:info@yandex.ru">
<textarea
name="address" rows=10
с
ols=50 wrap=" virtual "
>
г. Москва,
ул. Дегунинская, д. 18
СОШ
№ 660
Тел
. 905-82-55
</textarea>
</
form
>
На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «формы», сохранить документ с именем form1.htm
<html>
<head>
<title> my site</title>
</head>
<body>
<form method="post" action="mailto:info@yandex.ru">
<textarea name="address" rows=10
с
ols=50 wrap=" virtual ">
г. Москва,
ул. Дегунинская, д. 18
СОШ
№ 660
Тел
. 905-82-55
</textarea>
</
form
>
</body>
</html>
1
3
занятие
Продолжение темы «Формы»
2. Текстовые поля
(однострочные)
<
input
>
- не парный тег, имеет несколько типов:
· type=
"
text
"
Параметры
:
1. size
=20
– размер поля отображаемого ввода на экране.
2. maxlenght
=15
– максимальная длина вводимого значения в символах.
· type
="
reset
"
- кнопка сброса информации (очистка форм)
Параметры:
value
="сброс" –
название на кнопке.
· type
="
submit
"
- кнопка отправки информации
Параметры:
value
="отправить" –
название на кнопке.
Тег будет выглядеть так:
<form method="post" action="mailto:info@yandex.ru">
Введите
имя
:<input name="
имя
" type="text" size=40><br>
Введите
код
: <input name="
код
" type="text" size=20 maxlengh=10><br>
<input type="submit" value="
отправить
">
<input type="reset" value="
удалить
">
</form>
На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «формы», сохранить документ с именем form2.htm
<html>
<head>
<title> my site</title>
</
head
>
<
body
>
<form method="post" action="mailto:info@yandex.ru"><br>
Введите
имя
:<input name="
имя
" type="text" size=40><br>
Введите
код
: <input name="
код
" type="text" size=20 maxlengh=10><br>
<input type="submit" value="
отправить
">
<input type="reset" value="
удалить
">
</form>
</body>
</html>
1
4
занятие
Продолжение темы «Формы»
Продолжение описания типов тега:
<input>
· type
=
"
radio
"
- одиночный выбор значения из нескольких.
Параметры:
1.
name
="
predmet
"
– имя этой формы.
2.
checked
– выбрано изначально.
Тег будет выглядеть так:
<form method="post" action="mailto:info@yandex.ru">
Укажите
свой
любимый
предмет
:<input type="radio" name="predmet>
математика
<br>
<input type="radio" name="predmet>
литература
<br>
<input type="radio" name="predmet>
физика
<br>
<input type="radio" name="predmet>
информатика
</
form
>
На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «формы», сохранить документ с именем form3.htm
<html>
<head>
<title> my site</title>
</head>
<body>
<form method="post" action="mailto:info@yandex.ru">
Укажите
свой
любимый
предмет
: <br><input type="radio" name="predmet>
математика
<br>
<input type="radio" name="predmet>
литература
<br>
<input type="radio" name="predmet>
физика
<br>
<input type="radio" name="predmet>
информатика
</form>
</body>
</
html
>
· type
=
"
checkbox
"
- множественный выбор.
Параметры:
name
="
predmet
"
– имя этой формы.
В HTML-код документа form3.htm вставьте вместо type
="
radio
",
type
="
checkbox
"
сохраните документ под именем form4.htm
15 занятие
«Разворачивающиеся списки»
<
select
> -
выбор значений из разворачивающегося списка значений, заданных при помощи option
.
Параметры:
· name
="
predmet
"
– имя этой формы.
· size
=1
– начальная высота списка.
Каждое слово из разворачивающегося списка можно сделать ссылкой на другую страница, прописав теги ссылок около каждого слова из списка.
На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «формы», сохранить документ с именем form5.htm
<html>
<head>
<title> my site</title>
</head>
<body>
<form method="post" action="mailto:info@yandex.ru">
<select name="predmet" size="1">
<
option
value
="математика">математика<
br
>
<
option
value
="литература"> литература<
br
>
<option value="
физика
">
физика
<br>
<
option
value
="информатика"> информатика
</form>
</body>
</html>
«Установка звука на страницу»
В предыдущей программе:
1. В голову программы вставить тег
<bgsound src=" blue.kar">
2. после тега <body> вставьте следующий SCRIPT: <SCRIPT language=JavaScript event=EndOfStream(Result) for=MPlyr>
alert("Sound stream ended");
</SCRIPT>
Сохраните изменения в документе form5.htm
Этот документ должен выглядеть так:
<
html
>
<
head
>
<title> my site</title>
<bgsound src="blue.kar"></head><body>
<SCRIPT language=JavaScript event=EndOfStream(Result) for=MPlyr>
alert("Sound stream ended");
</SCRIPT>
<form method="post" action="mailto:info@yandex.ru">
<select name="predmet" size="1">
<option value="математика">математика<br>
<option value="литература"> литература<br>
<option value="
физика
">
физика
<br>
<option value="информатика"> информатика
</
form
>
</
body
>
</
html
>
Нужно предварительно положить файл
blue
.
kar в папку, имя музыкального файла может быть другим, расширение может быть .
mp3.
16 занятие
«Работа в программе
Dreamweaver
»
Meню программы похоже на меню программы Word:
· Edit – правка (Undo-отмена действия назад, Redo – отмена действия вперед, повторяются все функции копирования, вырезания, вставки из БО).
· View – вид (можно поставить сетку, разметку страницы и т.д.).
· Insert – вставка (в этом меню можно вставлять картинки, таблица, формы скрипты и т.д.) С этим меню мы много будем работать).
· Modify – установка параметров страницы.
· Text – установка для Вас увеличенного размера шрифты или уменьшенного размера.
В работе часто нужно меню:
· Window – в этом меню можно установить все плавающие панели, которые Вам нужны.
Начинаем работу:
· С самого начала документ надо сохранить:
File – Save as
Появляется диалоговое окно, в котором нужно выбрать место сохранения документа, задать имя документа (маленькими латинскими буквами), расширение уже задано.
Надо помнить, что первая страница, с которой будет загружаться Ваш сайт должна называться
index
.
htm
(именно эту страницу роботы искатели ищут для загрузки сайта). Любой сайт начинается с загрузки
index
.
htm
страницы.
«Установка параметров страницы
»
2. Нужно установить свои параметры страницы по меню –
Modify
-
Page
Properties
:
открывается плавающее меню Page Properties, в котором:
· Можно сразу указать имя сайта – Title.
· Можно установить фоновый узор страницы – Background Image. Нажатием на кнопку Browse открывается содержимое «Моего компьютера», находите папку, где хранятся подготовленные фоны (эта папка должна быть вложена в папку, где вы создаете свой сайт), выбираете нужный фон и нажимаете на кн. Select (вставить).
· В меню Modify-Page Properties можно установит просто цвет фона страницы, выбрав цвет в палитре Backgroud.
· Установит цвет шрифта, цвет ссылок, цвет посещенных ссылок, цвет активных ссылок. Сохранить изменения.
· В разделе Document Encoding – найти Cyrillic Win-1251(этот тип шрифта соответствует русскоязычной кириллице).
· На панели нажать кнопку ОК.
· После каждого изменения нужно выполнять команду
File
–
Save
.
· Функциональная кнопка F
12
– позволяет перейти в просмоторщик и посмотреть, как Ваша страница будет выглядеть в Internet (закрыв просмоторщик, Вы снова вернетесь в редактор).
Загляните в
html
-документ (если он не открыт, его можно открыть через меню
Window
-
Arrenge
Floating
Palleting
, либо нажатием на <>, кот. находятся либо внизу справа, либо вверху слева рабочего поля программ, в зависимости от версии программы). В голове программы появился
meta
-тег кириллицы 1251, появились параметры тега
body
.
17 занятие
«Работа с таблицами»
Для работы необходима плавающая панель Properties
(через меню Windows).
1. Через меню
Insert
–
Table
открывается диалоговое окно:
Rows
– количество строк;
Cows
– количество столбцов;
Width
– ширина таблицы (можно поставить в %, можно поставить pic);
Border
– указать толщину бардюра.
2. Поставьте Rows=3, Cows=2, Width=100%, Border=0
3. Выполнять команду File – Save.
4. Таблицу можно выделить, если подвести курсор к краю таблицы и щелкнуть левым кликом, контур таблицы темнеет, а плавающая панель Properties
отражает все возможности работы с таблицей.
5. Выделить таблицу и поработать с плавающей панелью
Properties
:
· Изменять количество строк и столбцов, поставить фоновый узор, или цвет, бордюр и цвет бордюра.
· С зажатым Shift, щелкнуть по ячейке таблицы, тогда можно работать с отдельной ячейкой.
· С зажатым левым кликом мыши протянуть курсор вдоль нескольких ячеек в панели Properties появляется новая функция – объединения.
· Поставив курсор в какую-либо ячейку в нее можно вставить картинку, написать текст или вставить другую таблицу и т.д.
6. Посмотрите в html
-документ,
тег таблицы уже вставлен в документ со всеми параметрами.
7. Сохраните изменения.
18 занятие
«Работа с текстом»
Работа с текстом в программе Dreamweaver похожа на работу с текстом в программе Word. В программе
Dreamweaver
не подпрограммы проверки на грамматические и синтаксические ошибки, поэтому тексты к страницам сайта лучше всего готовить в программе
Word
, а затем вставлять на страницу через Буфер Обмена.
1. Вставьте таблицу 3х2.
2. Поставьте курсор во вторую ячейку, при этом панель Properties
изменит свой внешний вид:
3. Напишите фрагмент текста:
Компьютерная сеть
Internet может выполнять две услуги:
1. быть средством общения между ее пользователями, находящимися на расстоянии друг от друга (эта функция называется коммуникационной
);
2. быть средством доступа к информационным ресурсам (эта функция называется информационной
).
· Выделите весь текстовый кусок так же, как если бы вы это делали в текстовом редакторе. Пользуясь панелью Properties
,
поменяйте стиль шрифта, размер, цвет расположение шрифта (по горизонтали и по вертикали).
· После работы с возможностями форматирования шрифтов через панель, наберите:
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
· Выделите первую ссылку, и на панели свойств, в разделе link впишите адрес, пусть даже, не существующей страницы – r1.htm, тоже проделайте с остальными записями.
· Сохраните изменения, нажмите функциональную клавишу F12. Надписи стали ссылками.
Нажатие клавиши Enter, создает новый абзац (посмотрите html – код, теги прописаны).
В программе можно вырезать, копировать, вставлять выделенные куски текста так же, как в программе Word (через Буфер Обмена).
19 занятие
«Работа с меню
Insert
- вставка»
· Insert
–
Image
– вставка картинки.
Поставьте курсор в любую ячейку таблицы, и выполните команду Insert –Image. Появится диалоговое окно:
В разделе Папка, открываете нужную папку, затем выделяете нужную картинку и нажимаете на кнопку Select.
Панель Properties
изменилась:
· Используя возможности панели, поработайте со вставленной картинкой: попробуйте разместить ее по-разному в ячейке таблицы, пропишите альтернативный текст, установите бордюр, сделайте картинку ссылкой.
· Сохраните изменения, нажмите функциональную клавишу F12. Надписи стали ссылками.
· Работа с картой:
В программе есть возможность всю картинку поделить на зоны, и каждую зону сделать ссылкой со своим «Альтернативным текстом» (со своими подсказками).
Выберите область выделения и разбейте вставленную картинку на зоны, поставьте ссылки (пусть даже на несуществующие страницы), пропишите альтернативный текст.
· Сохраните изменения, нажмите функциональную клавишу F12.
20 занятие
«Продолжение работы с меню
Insert
- вставка»
· «Вставка слоев»
Для того, чтобы можно было подписать картинку или вставить какую-то запись, используются прозрачные слои.
1. Вставить на страницу таблицу.
2. В ячейку таблицы вставить каринку.
3. Выполнить команду меню Insert
–
Layer
4. Выполнить команду меню Insert
–
Layer
.
Поработать с размерами слоев, с надписями на них, с несколькими слоями.
5. Сохранить изменения в рабочем документе, нажмите функциональную клавишу F
12
.
· «Вставка объектов форм»
Из меню Insert
–
Form
Object
в вашу страницу можно вставить различные формы.
· Попробуйте все формы, какие предлагает программа.
· Посмотрите html – код страницы.
· Самостоятельно сделайте страницу «Гостевой книги» (не забудьте прописать правильный E-mail в html – код страницы).
Пример:
21 занятие
«Продолжение работы с меню
Insert
- вставка»
· Из меню Insert
–
Line
Break
можно поставить разделительную полсу (Обязательно вставить ее на страницу
).
· Из меню Insert
–
Insert
E
-
mail
Link
можно поставить ссылку на ваш E
-
mail
(Обязательно поставить ее на страницу
).
При этом появляется диалоговое окно:
· Из меню Insert
–
Date
можно поставить дату создания сайта.
· Из меню Insert
–
Media
Flash
можно вставить флеш – картинку, указав ее точные размеры в панели Properties
.
· Из меню Insert
–
Head
|