Автоматизированное создание и публикация вэб

Тема 1 Автоматизированное создание и публикация вэб-ресурсов (4 часа)
Урок 1
Тема: Структура веб-сайтов, разновидности веб-страниц. Регистрация вебсайта на сервере бесплатного хостинга.
Содержание учебного материала
Структура веб-сайтов, разновидности веб-страниц. Регистрация веб-сайта на
сервере бесплатного хостинга. Автоматизированное создание статической
веб-страницы, выбор ее типа и оформления. Наполнение веб-страницы
информацией, создание ссылок, загрузка файлов на сервер.
Цель урока
Изучить принцип работы и строение сайтов. Научиться создавать сайты на
бесплатном хостинге.
Задание уроку
Показать структуру веб-сайтов, разновидности веб-страниц. Показать
принцип регистрация веб-сайта на сервере бесплатного хостинга. Научить
создавать статической веб-страницы, выбирать тип оформления в
автоматическом режиме. Научить создавать наполнение веб-страницы
информацией, создавать ссылки, загружать файлы на сервер.
Тип урока
Урок усвоения новых знаний
Оборудование
Компьютеры, подключенные к сети Интернет, мультимедийный проектор.
Ход урока
Организационная часть
Приветствие, проверка подготовленности учеников, к уроку, проверка
присутствия. Сообщение темы и плана работы на уроке, цели и заданий
уроку
Актуализация опорных знаний
Вопросы для повторения:
1) Что такое Интернет?
2) Какие службы Интернет вы знаете?
3) Что собой представляет служба WWW?
Стимулирование учебной деятельности
Большую часть времени, проводя в Интернете, мы изучаем различные сайты
не задумываясь о технологиях, с помощью которых они были сделаны. На
этом уроке мы откроем тайну построения вэб-сайтов в Интернете.
Объяснение нового материала
Структура веб-сайтов
Структура сайта должна максимально соответствовать целям создания сайта
и способствовать их достижению. Ведь, если структура сайта не будет
подчинена реализации поставленных задач, вы не сможете достичь
запланированного результата.
Для начала, обозначаются основные разделы сайта. Правильное разделение
информации по категориям поможет в сопровождении сайта и наполнении
его содержимым (контентом). После этого организовывается связь между
разделами – так называемые, навигационные цепочки. Навигация по сайту
должна быть логичной и удобной. Она должна способствовать быстрому
нахождению желаемой информации.
На следующей блоксхме представлена структура простейшего сайта. Цифрой
1 обозначена главная (домашняя) страница. Обычно при вводе адреса сайты
вы попадаете именно на эту страницу. Далее с главной страницы идут
ссылки на другие страницы, обозначенные номерами 2-10.
Существуют более сложные структуры:
Разновидности веб-страниц
На сегодняшний день в Интернете существует огромное количество сайтов,
предназначенных для разных услуг, с разными возможностями. Поэтому
сайты принято делить по разым категориям.
По доступности сервисов:

Открытые — все сервисы полностью доступны для любых посетителей
и пользователей.

Полуоткрытые — для доступа необходимо зарегистрироваться (обычно
бесплатно).

Закрытые — полностью закрытые служебные сайты организаций (в том
числе корпоративные сайты), личные сайты частных лиц. Такие сайты
доступны для узкого круга людей. Доступ новым людям обычно даётся через
т. н. инвайты (приглашения).
По природе содержимого:

Статические —
всё
содержимое
заранее
подготавливается.
2
Пользователю выдаются файлы в том виде, в котором они хранятся на
сервере.

Динамические — содержимое генерируется специальными скриптами
(программами) на основе других данных из любого источника.
По схеме представления информации, её объёму и категории решаемых
задач можно выделить следующие типы веб-ресурсов:
o
Информационные ресурсы: тематический сайт, тематический портал
(порталы похожи на тематические сайты, но дополнительно содержат
средства взаимодействия с пользователями и позволяют пользователям
общаться в рамках портала (форумы, чаты) — это среда существования
пользователя).
o
Веб-сервис — услуга созданная для выполнения каких либо задач в
рамках сети WORLD WIDE WEB: доска объявлений, каталог сайтов, поисковый
сервис, почтовый сервис, веб-форум, блоговый сервис, файлообменный,
пиринговый сервис,

Комбинированные Веб сервисы (Социальные сети), комбинированные
Веб сервисы (Специализированные социальные сети)
Регистрация веб-сайта на сервере бесплатного хостинга
Бесплатный хостинг — услуга, позволяющая пользователю бесплатно
разместить веб-сайт или другую информацию пользователя (текст,
изображения, видео) в сети Интернет на сервере хостинг-провайдера.
Возможности бесплатного хостинга обычно урезаны относительно платных
вариантов, поэтому данный способ в большей степени подходит для
домашних страниц пользователей и других некоммерческих сайтов. Хотя,
сегодня уже появляются провайдеры предлагающие бесплатный хостинг на
уровне платного, ориентирующиеся на старт начинающих проектов, с
перспективой, что затем эти проекты будут пользоваться сопутствующими
платными услугами.
Как правило, на сайтах размещенных на беспланом хостинге размещается
принудительная реклама для компенсации денежных затрат на
предоставление бесплатных услуг хостига.
Для примера, в качестве бесплатного хостинга воспользуемся Российским
сервисом
Яндекс.Народ,
который
находится
по
адресу
http://narod.yandex.ru/. После того как сайт загрузился выбираем ссылку
Создайте свой сайт. Сайт предложит авторизоваться на сервисе (если у вас
есть уже зарегистрированный Яндекс аккаунт) или зарегистрироваться. При
регистрации нужно будет ввести свои данные такие как имя, фамилия, логин,
пароль и др. После регистрации у вас появится электронный ящик и
доменное имя вашего сайта состоящее из логина, который вы указали, и
домена narod.ru, например http://ivan-ivanov.narod.ru/. После того как все
регистрационные данные введены можно переходить к созданию сайта, для
этого нужно выбрать ссылку Начать пользоваться сервисом Народ.
3
Автоматизированное создание статической веб-страницы, выбор ее
типа и оформления
Создание сайта в автоматическом режиме – очень удобный способ для
начинающего вэб-мастера, не знающего основ строения страниц. Что-бы
создать сайт автоматически выбираем ссылку Создать сайт с помощью
конструктора. Далее процесс создания сайта будет проходить с помощью
мастера, который будет задавать вопросы, а вы должны выбирать один из
вариантов. В первом шаге мастер просит выбрать специфику сайта
(коммерческий, персональный, фан-клуб и т.д.). Во втором шаге необходимо
ввести название сайта и выбрать страницы, которые должны присутствовать
на вашем сайте, например Биография, Опыт работы, Портфолио и т.д. В
третьем шаге необходимо выбрать макет и оформление сайта после чего
нажать кнопку Начать заполнять.
Наполнение веб-страницы информацией
Обычно, сайты созданные с помощью конструктора заполняются при
помощи визуального редактора. Сайт созданный с помощью сервиса Народ
не является исключением. Используя специальные кнопки, поля,
необходимо ввести информацию, которая будет отображаться на страницах
сайта
Диагностика правильности усвоения учениками знаний
Контрольные вопросы для проверки:
1) Какие структуры веб-сайтов бывают?
2) Назовите основные разновидности веб-страниц.
3) Что такое вэб-хостинг?
4) Какая разница между платным и бесплатным вэб-хостингом?
Подведение итогов урока
Давайте в виде экспресс-опроса повторим, что же мы узнали из
сегодняшнего урока. Ученики по очереди называют основные понятия этой
темы.
Сообщение домашнего задания
Повторить конспект. Изучить параграф учебника.
Урок 2
Тема: Автоматизированное создание и администрирование форумов и
чатов
Содержание учебного материала
Автоматизированное создание и администрирование форумов и чатов.
Цель урока
Научиться создавать и администрировать бесплатные форумы и чаты.
Задание уроку
Научиться создавать и администрировать форумы и чаты.
Тип урока
4
Урок усвоения новых знаний
Оборудование
Компьютеры, подключенные к сети Интернет, мультимедийный проектор.
Ход урока
Организационная часть
Приветствие, проверка подготовленности учеников, к уроку, проверка
присутствия. Сообщение темы и плана работы на уроке, цели и заданий
уроку
Актуализация опорных знаний
Вопросы для повторения:
1) Какие структуры веб-сайтов бывают?
2) Назовите основные разновидности веб-страниц.
3) Что такое вэб-хостинг?
4) Какая разница между платным и бесплатным вэб-хостингом?
Стимулирование учебной деятельности
Наверное, часто в Интерене вы сталкивались с такими сервисами как форумы
и чаты.
Веб-форум - класс веб-приложений для организации общения посетителей
веб-сайта. Форум предлагает набор разделов для обсуждения. Работа
форума заключается в создании пользователями тем в разделах и
последующим обсуждением внутри этих тем. Отдельно взятая тема, по сути,
представляет собой тематическую гостевую книгу.
Чат (англ. chat - болтать) - средство обмена сообщениями по компьютерной
сети в режиме реального времени, а также программное обеспечение,
позволяющее организовывать такое общение. Характерной особенностью
является коммуникация именно в реальном времени или близкая к этому,
что отличает чат от форумов и других «медленных» средств.
Возможно и для ваших сайтов понадобятся такие сервисы. В Интернете эти
сервисы, так-же как и бесплатный вэб-хостинг, могут предоставляться
бесплатно.
Объяснение нового материала
Создание и администрирование форумов
Попробуем создать свой вэб-форум. Для этого воспользуемся сайтом
http://mybb2.ru/. Первым делом необходимо зарегистрироваться. Щелкаем
по ссылке Создать форум. Далее необходимо ввести регистрационные
данные (имя форума, категория форума, логин и пароль администратора и
т.д.) в соответствующие поля.
После регистрации необходимо авторизоваться на форуме, для этого вводим
свои логи и пароль в соответствующие поля и нажимаем кнопку Вход.
Переходим к настройке форума. Ссылка Профиль, в верхней части форума,
позволяет настроить ваши личные данные. На странице форума есть кнопка
Новая тема, которая позволяет создать новую тему форума.
5
Вся остальная работа с форумом такая-же как и на остальных форумах сети
Интернет.
Создание и администрирование чатов
Сейчас поэксперементируем с созданием бесплатного чата. В Интернете
множество сайтов предоставляют такую услугу. Для примера воспользуемся
сайтом http://chatservice.ru/. Открываем эту страницу. Далее необходимо
зарегистрироваться, для этого щелкаем по ссылке Регистрация чата. Сервис
предлагает ввести адрес вашего электронного ящика и символы с картинки.
Вводим необходимые данные и нажимаем кнопку Регистрация. После этого
система на указанный вами e-mail высылает письмо, в котором ссылка для
подтверждения регистрации. Необходимо перейти по этой ссылке, после
чего ваш чат будет готов к работе. Далее приглашайте своих друзе и
начинайте общаться в вашем личном чате.
Диагностика правильности усвоения учениками знаний
Контрольные вопросы для проверки:
1) Дайте определение вэб-форума.
2) Дайте определение чата.
Подведение итогов урока
Давайте в виде экспресс-опроса повторим, что же мы узнали из
сегодняшнего урока. Ученики по очереди называют основные понятия этой
темы.
Сообщение домашнего задания
Повторить конспект. Изучить параграф учебника.
Урок 3
Тема: Технологии веб 2. Блоги и разновидности веб-журналов
Содержание учебного материала
Обзор технологий веб 2. Понятие блога и разновидностей веб-журналов.
Создание и оформление веб-журнала, публикация сообщений в веб-журнале
и настройки его параметров. Веб-сообщества. Вики-технологии.
Цель урока
Познакомиться с технологией веб 2. Изучить принцип работы блогов, вебжурналов, веб-сообществ, вики-технологий.
Задание уроку
Познакомить учащихся с технологией веб 2, а так-же с блогами, вебжурналами, веб-сообществами, вики-технологиями.
Тип урока
Урок усвоения новых знаний
Оборудование
Компьютеры, подключенные к сети Интернет, мультимедийный проектор
Ход урока
Организационная часть
6
Приветствие, проверка подготовленности учеников, к уроку, проверка
присутствия. Сообщение темы и плана работы на уроке, цели и заданий
уроку.
Актуализация опорных знаний
Вопросы для повторения:
1) Какие службы Интернет вы знаете?
2) Назовите основные разновидности веб-страниц.
3) Что такое вэб-хостинг?
4) Дайте определение вэб-форума.
5) Дайте определение чата.
Стимулирование учебной деятельности
Работая в Интернете возможно у вас возникали вопросы: «А могу ли я сам(а)
внести свою информацю на какую-либо страницу?», «Могу ли я создать свою
личную страницу в Интернете, что-то на подобие личного дневника?» и
другие. Всё это стало реально с появлением технологии веб 2.
Объяснение нового материала
Обзор технологий веб 2
Web 2.0 (веб 2) - методика проектирования систем, которые путём учета
сетевых взаимодействий становятся тем лучше (тем полнее), чем больше
людей ими пользуются. Особенностью веб 2.0. является принцип
привлечения пользователей к наполнению и многократной выверке
контента.
Web 2.0 не является технологией или каким-то особым стилем Web-дизайна.
Для определения сути подходит определение Web 2.0 как комплексного
подхода к организации, реализации и поддержке Web-ресурсов. Далее
рассмотрим наиболее известные «проявления» Web 2.0, с которыми, так или
иначе, встречался каждый пользователь Интернета.
Понятие блога и разновидностей веб-журналов.
Блог (англ. blog, от «web log» — сетевой журнал или дневник событий) —
веб-сайт, основное содержимое которого — регулярно добавляемые записи,
содержащие текст, изображения или мультимедиа. Для блогов характерны
недлинные записи вре́менной значимости, отсортированные в обратном
хронологическом порядке (последняя запись сверху). Отличия блога от
традиционного дневника обусловливаются средой: блоги обычно публичны
и предполагают сторонних читателей, которые могут вступить в публичную
полемику с автором (в комментарии к блогозаписи или своих блогах).
Людей, ведущих блог, называют бло́ герамиСовокупность всех блогов Сети
принято называть блогосферой.
По авторскому составу блоги могут быть личными, групповыми
(корпоративными, клубными…) или общественными (открытыми). По
содержанию — тематическими или общими. По размещению — сетевыми и
отдельными (stand-alone).
7
Для блогов характерна возможность публикации отзывов (комментариев,
«комментов») посетителями. Она делает блоги средой сетевого общения,
имеющей ряд преимуществ перед электронной почтой, группами новостей,
веб-форумами и чатами.
Создание и оформление веб-журнала
Для создания веб-журнала предлагаю использовать ресурс от корпорации
Google – Blogger. Открываем адрес https://www.blogger.com/ после чего
необходимо щелкнуть по ссылке Создать блог. В браузер загрузится форма, в
которой необходимо заполнить все поля (электронный адрес, пароль, ваше
имя для подписи в блоге и др.). После того как все данные внесены следует
нажать кнопку Продолжить.
Компания Google защищает свои ресурсы, поэтому чтобы убедиться что
новый аккаун создается реальным человеком система просит подтвердить
данные, для этого вам необходимо указать номер своего мобильного
телефона, после чего система пришлет на ваш телефон СМС с кодом
подтверждения. Его нужно ввести в соответствующее поле. После
подтверждения своих данных вам нужно будет указать название вашего вебжурнала и url-адрес журнала. После нажатия на кнопку Продолжить, система
предложит вам выбрать начальный шаблон оформления вашего блога.
Выбираем шаблон которой больше подходит тематике нашего веб-журнала.
В дальнейшем этот шаблон можно будет подкорректировать или поменять
на другой шаблон. После нажатия на кнопку Продолжить система сообщит
вам о том что блог был удачно создан. Переходим к блоку, щелкнув по
кнопке Перейти к блогу.
В только что созданном блоге нет сообщений для обсуждения, поэтому
система сразу предлагает вам создать первое сообщение. Для этого в поле
Название набираем название вашего сообщения, ниже в поле необходимо
набрать текст сообщения, после чего нажать кнопку Опубликовать
сообщение. После этого можно перейти на свій блог и убедиться в том что
ваш вэб-журнал работает и в том что ваше сообщение опубликовано.
Вкладка Дизайн позволяет изменить оформление вашего блога.
Публикация сообщений в веб-журнале
Для того что бу публиковать сообщения в блоге, первым делом вы должны
авторизоваться в системе. После, в верхней части страницы щелкаем по
ссылке Новое сообщение. В окно бразера загрузится форма, в которой
необходимо указать название вашего сообщения и само сообщение, после
нажать кнопку Опубликовать сообщение.
Что бы написать комментарий к сообщению на своем или чужем блоге
необходимо щелкнуть по ссылке Комментарии, которая находится ниже
самого сообщения. В появившемся окне ввести текст комментария и нажать
кнопку Отправить комментарий.
Настройка параметров веб-журнала
8
Находясь на своем блоге щелкните по ссылке Дизайн, которая находится в
верхней части блога. Откроется страница на которой можно изменить
внешний вид блога. На вкладке Настройки можно изменить другие
параметры блога такие как: название, описание блога, необходимость
обнаружения блога поисковыми системами и др.
Веб-сообщества
Веб-сообщества (интернет-сообщества) - группа людей со сходными
интересами, которые общаются друг с другом в основном через Интернет.
Интернет предоставляет широчайшие технические возможности для
общения. Кроме того, в Интернете сравнительно легко найти людей со
схожими интересами и взглядами на мир. Вдобавок, общение в сети начать
психологически проще, чем при личной встрече. Подобные интернетсообщества постепенно начинают играть ощутимую роль в жизни всего
общества, особенно в условиях создания электронной демократии.
Примерами интернет-сообществ являются вики-проекты, форумы, чаты,
социальные сети, многопользовательские сетевые игры и т. п. Также можно
упомянуть отходящие в прошлое эхоконференции Фидонет, группы
рассылок, ньюсгруппы Usenet.
Вики-технологии
Ви́ ки — (англ. wiki) веб-сайт, структуру и содержимое которого пользователи
могут сообща изменять с помощью инструментов, предоставляемых самим
сайтом. Известнейший вики-сайт — Википедия (http://www.wikipedia.org/).
Впервые термин «вики» для описания веб-сайта был использован в 1995
году Уордом Каннингемом, разработчиком первой вики-системы
WikiWikiWeb, который заимствовал слово гавайского языка, означающее
«быстрый». Позже этому слову был придуман английский бэкроним What I
Know Is....
Вики предлагает всем пользователям редактировать любую страницу или
создавать новые страницы на Вики-сайте, используя обычный веб-браузер
без каких-либо его расширений.
Вики поддерживает связи между разными страницами за счёт почти
интуитивно понятного создания ссылок на другие страницы и отображения
того, существуют данные страницы или нет.
Вики не является тщательно изготовленным сайтом для случайных
посетителей. Напротив, Вики стремится привлечь посетителей к
непрерывному процессу создания и сотрудничества, который постоянно
меняет вид сайта.
Диагностика правильности усвоения учениками знаний
Контрольные вопросы:
1) Что собой представляет термин веб 2?
2) Что такое блог?
3) Кто такие блогеры?
9
4) Что такое веб-сообщества?
5) Опишите основные принципы Вики-технологии.
Подведение итогов урока
Давайте в виде экспресс-опроса повторим, что же мы узнали из
сегодняшнего урока. Ученики по очереди называют основные понятия этой
темы.
Сообщение домашнего задания
Повторить конспект. Изучить параграф учебника.
Урок 4
Тема: Практическая работа № 49. «Создание и ведение коллективного
блога.»
Содержание учебного материала
Создание и ведение коллективного блога.
Цель урока
Научиться работать блогами.
Задание к уроку
Научить учащихся пользоваться коллективными блогами.
Тип урока
Урок формирования умений и навыков
Оборудование
Компьютеры, подключенные к сети Интернет, программа-браузер
Ход урока
Организационная часть
Приветствие, проверка подготовленности учеников, к уроку, проверка
присутствия. Сообщение темы и плана работы на уроке, цели и заданий к
уроку
Актуализация опорных знаний
Вопросы для повторения:
1) Какие службы Интернет вы знаете?
2) Назовите основные разновидности веб-страниц.
3) Что такое вэб-хостинг?
4) Дайте определение вэб-форума.
5) Дайте определение чата.
6) Дайте определение блога.
Стимулирование учебной деятельности
Люди, пользующиеся коммуникативными возможностями блогов вне
контекста ведения собственного блога, отмечают возможности общения с
людьми, с которыми они не имеют возможности общаться непосредственно,
например, с друзьями, живущими в других городах. Большинство блогеров
говорят, что ведут или читают блоги ради общения с интересными им
10
людьми. В первую очередь это возможность сказать что-то один раз так,
чтобы это услышали многие.
Многие люди предпочитают ведение блога, чтение блогов и дискуссии в
комментариях в качестве развлекательного времяпрепровождения,
особенно, если они по каким-либо причинам ограничены в других средствах
развлечения, кроме интернета, и имеют довольно много свободного
времени, которое надо тратить
Блог предоставляет возможность участникам создать образ иного Я,
возможно, такого, к которому автор стремится.
Так-же блоги обладают психотерапевтической функцией, которая либо
предполагалась заранее, либо была осознана в процессе ведения записей —
«выплеснуть эмоции», «изложить наболевшее», «для успокоения нервов, в
конце концов». Данная функция традиционного дневника, ведущегося в
укромной тетрадке, неоднократно упоминается различными авторами и, по
всей видимости, приобрела новую форму и новые возможности, как способ
пожаловаться на жизнь множеству людей сразу и получить в ответ
успокоительные «поглаживания».
Самостоятельное выполнение учениками заданий под контролем и с
помощью учителя
Предварительно учитель создает новый блог с помощью сервиса Blogger
.com.
Для обсуждения в блоге предлагается произвольная тема, например «Как вы
провели летние каникулы»
Учащиеся входят на блог и начинают писать сообщения.
Учитель так-же учавствует в обсуждении темы.
Подведение итогов урока
Учащиеся проговаривают, чему они научились на этом уроке. Если есть
вопросы, задают их учителю.
Сообщение домашнего задания
Повторить конспект. Изучить параграф учебника.
11
Тема 2 Основы вэб-дизайна (7 часов)
Урок 5
Тема: Язык разметки гипертекста HTML
Содержание учебного материала
Язык HTML. Структура гипертекстового документа. Разновидности тегов. Теги
для форматирования текста. Теги гиперссылок.
Цель урока
Изучить основные теги языка HTML
Задание уроку
Изучить понятие языка HTML. Изучить структуру гипертекстового документа,
разновидности тегов: теги для форматирования текста, теги гиперссылок.
Тип урока
Урок усвоения новых знаний
Оборудование
Компьютеры, мультимедийный проектор, программа Microsoft PowerPoint,
презентация к уроку
Ход урока
Организационная часть
Приветствие, проверка подготовленности учеников, к уроку, проверка
присутствия. Сообщение темы и плана работы на уроке, цели и заданий
уроку.
Актуализация опорных знаний
Вопросы для повторения:
1) Какие службы Интернет вы знаете?
2) Назовите основные разновидности веб-страниц.
3) Что такое вэб-хостинг?
Стимулирование учебной деятельности
На предыдущих уроках мы создавали свои вэб-ресурсы на основе готовых
платформ (движков). От нас требовалось только ввести информацию. Но на
этом вэб-технологии не заканчиваются. Можно самостоятельно создавать
свои сайты, на которых не ограничивать себя в использовании различных
технологий. Для того чтобы можно было создать свой сайт, вам необходимо
выучить язык разметки гипертекста HTML.
Объяснение нового материала
HTML (от англ. HyperText Markup Language - «язык разметки гипертекста») стандартный язык разметки документов во Всемирной паутине. Большинство
веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML
интерпретируется браузером и отображается в виде документа, в удобной
для человека форме.
Для создания HTML документов используют текстовые редакторы (например
Блокнот), текстовые процессоры (Word), редакторы тегов HTML и визуальные
12
HTML-редакторы. Вы можете создать HTML документ в простом Блокноте.
Придерживаясь определённого стандарта и записав в текстовом файле HTML
код, сохранив на жёстком диске и изменив расширение на .html или .htm вы
получите полноценную web страничку.
Разновидности тегов
HTML - это теговый язык разметки документов. Любой документ на языке
HTML представляет собой набор элементов, причём начало и конец каждого
элемента обозначается специальными пометками — тегами. Элементы могут
быть пустыми, то есть не содержащими никакого текста и других данных
(например, тег перевода строки <br>). В этом случае обычно не указывается
закрывающий тег. Кроме того, элементы могут иметь атрибуты,
определяющие какие-либо их свойства (например, размер шрифта для
элемента font). Атрибуты указываются в открывающем теге. Вот примеры
фрагментов HTML-документа:
<strong>Текст между двумя тегами — открывающим и
закрывающим.</strong>
<a href="http://www.example.com">Здесь элемент содержит
атрибут href.</a>
А вот пример пустого элемента: <br>
Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет.
Элементы могут быть вложенными. Например, следующий код:
<b>
Этот текст будет жирным,
<i>а этот - ещё и курсивным</i>
</b>
даст такой результат:
Этот текст будет жирным, а этот - ещё и курсивным
Структура гипертекстового документа
Любой
HTML
документ
должен
содержать
следующие
теги
<html></html>,
<head></head>,
<body></body>,
<title></title>. Порядок расположения тегов в HTML документе
представлен ниже
<html>
<head>
<title>Название вашей страницы</title>
</head>
<body>
Тело вашего документа
</body>
</html>
Внутри тега <head></head> располагается название вашего HTML документа
(чаще всего именно его вы видите в качестве ссылки в результатах поиска
поисковыми машинами), помимо этого тега внутри конструкции
<head></head> могут располагаться так называемые Мета Теги.
13
Теги для форматирования текста
HTML имеет шесть уровней заголовков разделов документа,
пронумерованных цифрами от 1 до 6. Заголовки объявляются парой тэгов с
номерами, соответствующими уровню, например, <h1></h1> - заголовок
раздела первого уровня, а <h6></h6> - заголовок раздела шестого уровня. От
нормального текста заголовки отличаются размером и толщиной букв.
Заголовок первого уровня <h1> отображается обычно очень крупным
шрифтом, в то время как заголовок шестого уровня h6 – очень мелким.
По умолчанию заголовок выравнивается по левому краю страницы. Но его
также можно выровнять по правому краю или центрировать. Для
правостороннего выравнивания в тэге <h1> используется атрибут
align=”right”, а для центрирования – align=”center”. Допускается также явное
указание левостороннего выравнивания – align=”left”.
Начертание текста
<b></b> - полужирное начертание.
<i></i> - курсивное начертание.
<u></u> - подчеркнутое начертание.
<tt></tt> - телетайпный шрифт.
Для указания размера шрифта используются теги <font></font> с атрибутом
size. В качестве значений этого атрибута используются целые числа от 1 до 7.
Причем значение 1 соответствует минимальному размеру шрифта, а
значение 7 – максимальному.
В тэгах <font></font> может использоваться также атрибут color для указания
цвета шрифта, ограниченного тэгами текста.
Для того, чтобы представлять текст в виде отдельных абзацев, понадобятся
тэги <p></p>. Эти тэги имеют следующие параметры:
ALIGN – выравнивание текста. Возможные значения: LEFT – по левому краю,
RIGHT – по правому краю, CENTER – по центру, JUSTIFY – по ширине.
<p
<p
<p
<p
align=justify>Параграф, выровненный по ширине</p>
align=left>Параграф, выровненный по левому краю</p>
align=right>Параграф, выровненный по правому краю</p>
align=center>Параграф, выровненный по центру</p>
<BR> - Данный элемент осуществляет перевод строки, то есть практически
аналогичен нажатию Enter в текстовом редакторе. Элемент не имеет
конечного тэга.
Теги гиперссылок
Гиперссылка (англ. hyperlink) в компьютерной терминологии — часть
гипертекстового документа, ссылающаяся на другой элемент (команда,
текст, заголовок, примечание, изображение) в самом документе, на другой
объект (файл, директория, приложение), расположенный на локальном
компьютере или в компьютерной сети, либо на элементы этого объекта.
Гиперссылка может быть добавлена к любому элементу гипертекстового
14
документа и обычно выделяется графически. В HTML-документах текстовые
ссылки по умолчанию выделяются синим цветом, при наведении на них
курсором мыши в окне браузера изменяются, например, меняют цвет или
выделяются подчеркиванием. При навигации в браузере с помощью
клавиатуры текстовые и графические ссылки выделяются прямоугольной
пунктирной рамочкой. Посещенная ранее ссылка обычно выделяется
цветом, отличным от цвета непосещенной ссылки.
«Битой» ссылкой называют такую гиперссылку, которая ссылается на
отсутствующий по каким-либо причинам объект, например, если документ
или файл удален или перемещен администратором ресурса, на котором он
был расположен, или если сам ресурс недоступен. Обычно в таком случае на
странице появляется сообщение с кодом ошибки, но это происходит не
всегда.
Важнейшим понятием в HTML является гиперссылка, которая позволяет
связать текст или какой-либо объект с другими гипертекстовыми
документами. Текст, который является гиперссылкой, как правило,
выделяется цветом и подчеркивается. Для определения ссылки используется
тег <А…></A>, структура которого имеет следующий вид:
<А href="filename">Текст ссылки</A>
Здесь filename — имя файла или адрес Интернет, на который необходимо
сослаться, а текст_ссылки — текст гипертекстовой ссылки, который будет
непосредственно показан в HTML-документе. Например, гипертекстовая
ссылка <А
href="my_work.htm">Просмотр</A>
ссылается на
документ my_work.htm, образуя гипертекстовую ссылку в виде слова
«Просмотр». Если документ, на который указывает ссылка, находится в том
же или другом каталоге, относящемся к вэб-сайту, то подобная ссылка
называется
относительной,
например:
<А
href="photo/my_photo.htm">Мой фотоальбом</A> ссылается на
файл my_photo.htm, расположенный в каталоге photo, вложенном в
текущую, и образует ссылку в виде текста «Мой фотоальбом». Если есть
необходимость сослаться на ресурс в сети Интернет, расположенный на
удаленном сервере, или указать в ссылке полное имя файла и путь к файлу,
то используют абсолютные ссылки. Структура такого тега аналогична, однако
он формируется на основе полного пути к ресурсу в виде
протокол://URL/путь,
например:
<А
href="http://www.google.com.ua/">Заголовок ссылки</A>
Гиперссылка в пределах html страницы
<А href="#target">Текст ссылки</A>
………
<A name="target"></A>
Текст.
Диагностика правильности усвоения учениками знаний
15
Контрольные вопросы:
1) Что такое HTML?
2) Опишите структуру гипертекстового документа.
3) Какие разновидности тегов бывают?
4) Какие теги используются для форматирования текста?
5) Какие теги используются для вставки гиперссылок?
Подведение итогов урока
Учащиеся проговаривают, чему они научились на этом уроке. Если есть
вопросы, задают их учителю.
Сообщение домашнего задания
Повторить конспект. Изучить параграф учебника.
Урок 6
Тема: Создание таблиц и настройка их свойств
Содержание учебного материала
Создание таблиц и настройка их свойств. Позиционирование элементов на
веб-страницах с помощью таблиц.
Цель урока
Научиться использовать теги для создания таблиц, и настройки их свойств
Задание уроку
Научиться создавать таблицы, настраивать их параметры, с помощью таблиц
позиционировать информацию на веб-странице.
Тип урока
Урок усвоения новых знаний
Оборудование
Компьютеры, мультимедийный проектор, программа Microsoft PowerPoint,
презентация к уроку.
Ход урока
Организационная часть
Приветствие, проверка подготовленности учеников, к уроку, проверка
присутствия. Сообщение темы и плана работы на уроке, цели и заданий
уроку.
Актуализация опорных знаний
Вопросы для повторения:
1) Назовите основные разновидности веб-страниц.
2) Что такое вэб-хостинг?
3) Что такое HTML?
4) Опишите структуру гипертекстового документа.
5) Какие разновидности тегов бывают?
6) Какие теги используются для форматирования текста?
7) Какие теги используются для вставки гиперссылок?
Стимулирование учебной деятельности
16
Используя теги, которые мы уже изучили, информацию на странице можно
разместить в одну колонку, а в Интернете, вы, наверное, обращали
внимание, информация на веб-страницах может размещаться на нескольких
колонках. Учащиеся предлагают различные способы размещения
информации на нескольких колонках. Подводя итог сказанного учениками,
учитель делает вывод, что информацию на нескольких колонках лучше всего
позиционировать с помощью таблиц.
Объяснение нового материала
Создание таблицы
Для создания таблицы служит тэг <TABLE>. Как известно таблица состоит из
строк, а строки, в свою очередь состоят из ячеек. Для определения строк
служит тэг <TR>, для создания ячеек - <TD>.
Таблицы в HTML документ вставляются следующим образом
<table border="1">
<tr><td>Ячейка11<td>Ячейка12</tr>
<tr><td>Ячейка21<td>Ячейка22</tr>
</table>
Таблицу открывает и закрывает тег <table></table>, тег <tr></tr> - определяет
столбец, одиночный тег <td> определяет ячейку в столбце, таким образом
представленный код прописывает таблицу размером 2х2, которая в HTML
документе будет выглядеть следующим образом
Ячейка11 Ячейка12
Ячейка21 Ячейка22
Настройка свойств таблицы
Атрибуты для тэга <table>
Align
выравнивание таблицы относительно документа. Возможные
значения: center, left, right
Valign - выравнивает текст в таблице по вертикали. Значения: top, bottom,
middle, baseline.
background=“имя файла“ строка, определяющая рисунок для заднего фона
таблицы
bgcolor =цвет определяет задний фон таблицы
border толщина внешней рамки в пикселях. Если атрибут не указан, то
таблица выводится без видимой рамки
bordercolor =цвет рамки
bordercolorlight =цвет рамки слева и сверху
bordercolordark =цвет рамки справа и снизу
width = число ширина таблицы в процентах или пикселях
height = число рекомендуемая высота таблицы только в пикселях
colspan – указывает, какое количество ячеек будет объединено по
горизонтали для указанной ячейки. По умолчанию - 1.
rowspan - указывает, какое количество ячеек будет объединено по вертикали
17
для указанной ячейки. По умолчанию - 1.
Позиционирование элементов на веб-страницах с помощью таблиц
Используя таблицы, можно сделать аккуратную компоновку информации в
пределах вэб-страницы, добиться точного расположения того или иного
фрагмента страницы, будь то текст, графика или гиперссылка. Например,
используя таблицу, можно легко добиться отображения текста в нескольких
колонках, подобно газетной публикации.
Различают два основных способа разметки структуры документа:
позиционирование с помощью таблиц и с помощью кастадных таблиц стилей
(CSS). Основное преимущество первого способа заключается в его простоте и
совместимости со всеми видами браузеров. Недостаток состоит в
грамозкости кода, причем с ростом уровня сложности разметки количество
кода становиться огромным.
В качестве примера рассмотрим двуколончатую разметку (левая колонка
будет содержать навигационное меню, а центральная - информационную
часть страницы) с шапкой (для логотипа) и подвалом (для счетчиков,
описания авторский прав и т.п.). В общем, страница будет выгдядеть
примерно вот так:
Logo - Логотип, название, краткое описание
сайта.
Menu.
Content. Здесь
Здесь будет
информационная часть
навигационное страницы.
меню.
Footer - счетчики, авторские права и т.п.
Сам html код страницы имеет следующий вид:
<table align="center">
<tr>
<td>
Logo - Логотип, название, краткое описание сайта.
</td>
</tr>
</table>
<table align="center">
<tr>
<td id="tdright">
Menu.
18
Здесь будет навигационное меню.
</td>
<td>
  </td>
<td>
Content. Здесь информационная часть страницы.
</td>
</tr>
</table>
<table align="center">
<tr>
<td>
Footer - счетчики, авторские права и т.п.
</td>
</tr>
</table>
Диагностика правильности усвоения учениками знаний
Контрольные вопросы:
1) Какие теги используются для создания таблиц?
2) За что отвечают пара тегов <td></td>?
3) За что отвечают пара тегов <tr></tr>?
4) Какие свойства таблицы можно указать в тегах?
5) Для чего используется позиционирование элементов с помощью
таблицы?
Подведение итогов урока
Учащиеся проговаривают, чему они научились на этом уроке. Если есть
вопросы, задают их учителю.
Сообщение домашнего задания
Повторить конспект. Изучить параграф учебника.
Урок 7
Тема: Графика, аудио- и видеоинформация на веб-страницах
Содержание учебного материала
Графика, аудио- и видеоинформация на веб-страницах. Веб-страницы с
фреймами.
Цель урока
Научиться вставлять графику, аудио- и видеоинформацию.
Задание уроку
Научиться использовать теги для вставки графики, аудиовидеоинформации на веб-страницах. Научиться использовать фреймы.
Тип урока
Урок усвоения новых знаний
Оборудование
19
и
Компьютеры, мультимедийный проектор, программа Microsoft PowerPoint,
презентация к уроку.
Ход урока
Организационная часть
Приветствие, проверка подготовленности учеников, к уроку, проверка
присутствия. Сообщение темы и плана работы на уроке, цели и заданий
уроку
Актуализация опорных знаний
Вопросы для повторения:
1) Что такое HTML?
2) Опишите структуру гипертекстового документа.
3) Какие теги используются для форматирования текста?
4) Какие теги используются для вставки гиперссылок?
5) Какие теги используются для создания таблиц?
6) Какие свойства таблицы можно указать в тегах?
Стимулирование учебной деятельности
Для того что-бы сделать свою страницу более привлекательной и красочной
стандарт HTML позволяет вставлять в текст вэб-страницы различные
изображения, ауди- и видеоинформацию. Сегодня на уроке мы должны
изучить приёмы вставки этих данных
Объяснение нового материала
Вставка графики
Рисунок в HTML документ вставляется следующим образом <img
src="risunok.jpg" width="100" height="140" alt="Рисунок">. Разберем, каково
значение параметров тега <img>. Как видите, это одиночный тег. Параметр
src задаёт путь к изображению (абсолютный или относительный). Правила
указания относительного пути, такие же как и для ссылки. Параметры width и
height определяют ширину и высоту рисунка в пикселях в HTML документе.
Параметр alt задаёт альтернативный текст - тот текст который отображается в
браузере если отключена загрузка графики.
Графика должна быть представлена в виде файлов с расширениями .jpg .gif
.png.
По возможности следует использовать графические файлы небольших
размеров, дабы уменьшить время загрузки страницы браузером. Вряд ли
стоит использовать на одной странице графические изображения размером,
превышающим в сумме 100 kB. Такая страница будет грузиться очень долго у
большинства пользователей и далеко не каждый дождется конца загрузки.
Вставка аудиоинформации
Иногда на вэб-странице должно присутствовать звуковое оформление.
Проблема первая:
Выбрать формат аудиофайла. Аудиофайлы старых форматов (WAV, MIDI и т.
д.) - СЛИШКОМ БОЛЬШИЕ. Посетитель сайта будет долго ждать загрузки
20
файла - до того, как услышит звук. Мы должны ценить время посетителя,
которое он счел возможным уделить сайту! Новейшие форматы дают
большее сжатие (некоторые позволяют начать воспроизведение до полной
загрузки файла - потоковый звук), однако, существует возможность, что
компьютер не сможет воспроизвести такой файл!
Проблема вторая:
Посетитель должен контролировать воспроизведение звука! На экран
должны быть выведены органы управления "нашим магнитофоном
(плеером)".
Итак - в файле HTML страницы требуется указать:
1. Способ соединения со звуковым файлом (фоновый звук BGSOUND или
отдельный объект EMBED/OBJECT)
2. Какая программа будет воспроизводить звук
3. Способ запуска воспроизведения звука
Тег <bgsound> определяет музыкальный файл, который будет проигрываться
на веб-странице при ее открытии. Громкость, продолжительность звучания
музыки и другие характеристики определяются с помощью параметров тега,
а также могут управляться через скрипты. Этот тег должен размещаться
только в контейнере <head>.
Пользователи, как правило, отрицательно относятся к музыке, которая играет
на сайте, поэтому используйте эту возможность с осторожностью и по
необходимости.
<head>
<bgsound src="music.mid">
</head>
Фоновый звук BGSOUND не удовлетворяет простому решению второй
проблемы (нет стандартных органов управления)! Применение скрипта
усложняет страницу и увеличивает риск "отказа" - сбою воспроизведения.
Тэг EMBED предпочтительнее OBJECT т.к. позволяет не указывать точное
соответствие воспроизводящей программы (пункт 2), а указать только тип
подключенного звука! Все распространенные Интернет - браузеры, во всех
операционных системах обладают некоторой способностью к адаптации поиску подходящей программы из установленных на компьютере!
EMBED - лучшее решение, из предоставленных веб-мастеру, однако, дав
свободу Интернет-браузеру, мы получаем неопределенность - т.к. не знаем,
какая программа появится в отведенном нами месте HTML страницы (зато
есть большая вероятность, что браузер выберет программу, которая сможет
воспроизвести наш формат аудиофайл). Это может быть даже
видеопроигрыватель! Главное - что он зарегестрирован в ОС, как программа,
для которой наш формат аудиофайла "съедобен"!
<EMBED type="video/x-msvideo" SRC="music.mp3"
AUTOSTART=FALSE />
21
Вставка видеоинформации
Для вставки видеоинформации используется тот-же способ что и с
аудиоинформацией.
<EMBED type="video/x-msvideo" SRC="video.avi"
AUTOSTART=FALSE />
Веб-страницы с фреймами.
Фрейм (frame) — это отдельный, законченный HTML-документ, который
вместе с другими HTML-документами может быть отображён в окне webбраузера.
Фреймы по своей сути очень похожи на ячейки таблицы, однако более
универсальны. Фреймы разбивают web-страницу на отдельные мини-кадры,
расположенные на одном экране, которые являются независимыми друг от
друга. Каждое окно может иметь собственный адрес. При нажатии на любую
из ссылок, расположенных в одном фрейме, вы можете рассматривать
страницы, показанные в другом окне.
Фреймы довольно часто использовались для навигации по web-сайту. При
этом навигационная страница располагается в одном окне, а страницы с
текстом - в другом.
В современном WWW использование фреймов не рекомендовано. Главным
образом это связано, как ни странно, с алгоритмами работы поисковых
машин, которые могут привести пользователя к html-документу,
являющемуся согласно задумке лишь одним из фреймов того, что автору
сайта хотелось бы представить.
Тег <FRAME> определяет свойства отдельного фрейма, на которые делится
окно браузера. Этот элемент должен располагаться в контейнере
<FRAMESET>, который к тому же задает способ разметки страницы на
отдельные области. В каждую из таких областей загружается
самостоятельная веб-страница определяемая с помощью параметра src. Хотя
обязательных атрибутов у тега <FRAME> и нет, рекомендуется задавать
каждому фрейму имя через атрибут name. Это особенно важно, если
требуется по ссылке из одного фрейма загружать документ в другой.
<frameset> <frame> </frameset>
Параметры:
bordercolor - Цвет линии границы.
frameborder - Отображать рамку вокруг фрейма или нет.
name - Задает уникальное имя фрейма.
noresize - Определяет, можно изменять размер фрейма пользователю или
нет.
scrolling - Способ отображения полосы прокрутки во фрейме.
src - Путь к файлу, предназначенному для загрузки во фрейме.
Закрывающий тег - Не требуется.
Например:
22
<frameset rows="80,*" cols="*">
<frame src="top.html" name="topFrame" scrolling="no"
noresize>
<frameset cols="80,*">
<frame src="left.html" name="leftFrame"
scrolling="no" noresize>
<frame src="main.html" name="mainFrame">
</frameset>
</frameset>
Диагностика правильности усвоения учениками знаний
Контрольные вопросы:
1) Какой тег используется для вставки графики в вєбстраницу?
2) Какие существуют способы вставки аудиоданных в вэб-страницу?
3) Как вставить видеоданные в веб-страницу?
4) Что такое фреймы?
5) Для чего используются фреймы?
Подведение итогов урока
Учащиеся проговаривают, чему они научились на этом уроке. Если есть
вопросы, задают их учителю.
Сообщение домашнего задания
Повторить конспект. Изучить параграф учебника.
Урок 8
Тема: Основные принципы эргономичного размещения информации на
веб-страницах
Содержание учебного материала
Основные принципы эргономичного размещения информации на вебстраницах. Пространственный дизайн веб-страниц. Дизайн цвета, формы,
шрифтов, текстуры. Дизайн информационного наполнения и структуры вебсайтов.
Цель урока
Научиться основным принципам эргономичного размещения информации на
веб-страницах
Задание уроку
Научиться основным принципам эргономичного размещения информации на
веб-страницах. Изучить технологию пространственного дизайна веб-страниц.
Изучить дизайн цвета, формы, шрифтов, текстуры, дизайн информационного
наполнения и структуры веб-сайтов.
Тип урока
Урок усвоения новых знаний
Оборудование
Компьютеры, мультимедийный проектор, программа Microsoft PowerPoint,
23
презентация к уроку
Ход урока
Организационная часть
Приветствие, проверка подготовленности учеников, к уроку, проверка
присутствия. Сообщение темы и плана работы на уроке, цели и заданий
уроку
Актуализация опорных знаний
Вопросы для повторения:
1) Опишите структуру гипертекстового документа.
2) Какие теги используются для форматирования текста?
3) Какие теги используются для вставки гиперссылок?
4) Какой тег используется для вставки графики в вєбстраницу?
5) Какие существуют способы вставки аудиоданных в вэб-страницу?
6) Как вставить видеоданные в веб-страницу?
7) Что такое фреймы?
8) Для чего используются фреймы?
Стимулирование учебной деятельности
Наверное, вы задумывались, просматривая веб-страницы в Интернете, о
внешней привлекательности сайтов, почему у вас не получается сделать
такие красивые страницы… Учащиеся предлагают свои версии. Сегодня на
уроке мы изучим основные правила дизайна веб-страниц.
Объяснение нового материала
Эргономика - (от греч. ergon работа + nomos закон) - научная дисциплина,
изучающая трудовые процессы с целью создания оптимальных условий
труда, что способствует увеличению его производительности, а также
обеспечивает необходимые удобства и сохраняет силы, здоровье и
работоспособность человека.
Можно спорить о том, применимо ли определение и понятие "эргономика" к
веб-дизайну, но понятие "эргономичный сайт" уже прочно закрепилось
среди посетителей Интернет.
Эргономичный сайт - сайт, созданный с учётом и на основе научных знаний
об устройстве и работе человеческого глаза, просматривающего,
собирающего (для последующего анализа) информацию с источника
излучения определённой спектральной интенсивности, ограниченного по
полю обзора.
Эргономичный сайт обеспечивает необходимые удобства посетителю,
сохраняет его силы, здоровье и работоспособность. А это, в конечном итоге,
повышает эффективность сайта и приносит доход владельцу сайта.
Создание эргономичного сайта немыслимо без знания основных
антропологических параметров человека. С точки зрения веб-дизайна - это, в
первую очередь, характеристики человеческого глаза.
Основные характеристики и угловые поля зрения человеческого глаза. Учёт
24
именно этих характеристик важен при создании профессионального сайта.
Расстояние наилучшего зрения для нормального человека - 25 см.
Поле зрения одного глаза по горизонтали в направлении к носу - 60 ° (град.),
к виску - 90 град. (всего 150 град.), по вертикали вверх - 50 град, вниз - 70
град. Суммарное поле зрения обоих глаз по горизонтали 180 град.
Поле зрения глаза - пространство, в пределах которого возможно
различение предметов при неподвижном положении глаза.
Острота зрения глаза быстро падает от центра к краю сетчатки и через 16
град. от оси она уменьшается в три раза.
Полная продолжительность движения глаз 0,05-0,06 сек. Глаз
поворачивается на 10 град. с максимальной скоростью 300 град. в 1 сек, а на
30 град. - со скоростью 500 град. в 1 сек.
Зрачок глаза может изменяться по диаметру от 2 до 8 мм, а время инерции
увеличивается от 0,05 до 0,2 сек.
При наибольшей яркости угловой предел разрешения 0,6', а при малой - 50'.
Минимальная, ещё ощутимая глазом разность углов параллакса при
стереоскопическом зрении, составляет 10".
Глаз никогда не находится в неподвижном состоянии. Даже при фиксации он
совершает три рода движений:
1.
тремор - колебания зрительных осей глаз с амплитудой примерно 1' с
частотой от 30 до 90 Гц с хаотическим изменением направления и частоты;
2.
дрейф - медленные, хаотически меняющиеся по скорости (от 0 до 30
мин в 1 сек) и направлению повороты; средняя скорость 6' в 1 сек;
продолжительность одного дрейфа от 0,2 до 0,8 сек.; изображение точки
перемещается в пределах центральной ямки и не выходит из неё;
3.
маленькие синхронные непроизвольные скачки, которые наблюдатель
не ощущает, амплитудой от 2' до 60' и продолжительностью 0,01-0,02 сек.;
наблюдателю же кажется, что он фиксирует одну точку неподвижным
взором.
Зона наиболее чёткого видения ограничивается жёлтым пятном и составляет
около 2 град. Эта зона называется центральной.
Далее идёт зона ясного видения (30 град. по горизонтали и 22 град. по
вертикали), в пределах которой при неподвижном положении глаза
возможно распознавание предметов без различения мелких деталей.
Третья зона - зона периферического зрения, в пределах которой невозможно
опознавание предметов, но она имеет большое значение для
ориентирования в окружающем пространстве. В этой зоне в особенности
хорошо заметны движущиеся предметы. Ограниченность резко
наблюдаемого поля компенсируется его подвижностью.
Возникновение в сознании человека светового или зрительного образа
происходит с некоторым запаздыванием относительно момента воздействия
света на сетчатую оболочку глаза. Это время запаздывания, называемое
25
временем ощущения, колеблется от 0,1 до 0,25 сек. в зависимости от яркости
объекта.
Чем больше яркость предмета, тем меньше время ощущения. Зрительное
ощущение также не сразу исчезает после окончания действия света.
Остающееся после окончания светового воздействия зрительное ощущение
называется последовательным образом.
Глаз человека имеет рецепторы трёх типов, ответственные за восприятие
цвета и различающиеся своей чувствительностью к электромагнитным
колебаниям различных длин волн.
Одни рецепторы реагируют на фиолетово-синий, другие - на зелёный, третьи
- на оранжево-красный цвет. Если свет не попадает, глаз человека
воспринимает чёрный цвет. Если все рецепторы освещаются одинаково,
человек видит серый или белый цвет.
Благодаря трёхцветному зрению, человеческий глаз может различать любой
из цветовых оттенков. Зрительный аппарат человека анализирует свет,
определяет в нём содержание различных излучений, а затем в мозгу
происходит их синтез в единый цвет.
Экспериментальные исследования показывают некоторые особенности
работы человеческого глаза:
1.
Трёхкомпонентность цветового зрения проявляется только при
наблюдении относительно крупных объектов.
2.
Цвет объектов средних размеров является смесью только двух цветов:
оранжевого и сине-зелёного (голубого).
3.
Мелкие детали различаются глазом только по яркостным градациям,
т.е. кажутся чёрно-белыми, причём отсутствие окраски мелких деталей
незначительно ухудшает субъективное восприятие цветового изображения.
Использование "правильной" палитры цветов
Для того что-бы страница красиво смотрелась нужно правильно подобрать
сочетания цветов:
Белый цвет - со всеми.
Розовый цвет - с белым и нежно-голубым, промежуточный между красным и
белым тонами.
Красный цвет - с желтым, белым, бурым, синим и черным. Необходимо
избегать совмещения красного цвета с фиолетовым и лиловым.
Оранжевый цвет - с голубым, синим, лиловым, фиолетовым и белым тонами.
Является промежуточным между красным и желтым тонами.
Желтый цвет - с синим, фиолетовым, лиловым. Желтый цвет без отделки или
дополнения к нему малопривлекателен.
Коричневый цвет - с небесным, кремовым, желтым, розовым, оранжевым,
зеленым и бежевым.
Зеленый цвет - с коричневым, оранжевым, салатным, желтым и белым
цветами и только светлая зелень - с серым и черным тонами. Он является
26
промежуточным между холодными и теплыми тонами.
Светло-синий - с белым, желтым, оранжевым, розовыми цветами, является
промежуточным
между
красным
и
синим.
Темно-синий - со светло-синим (голубым), белы, серым, красным и желтым.
Фиолетовый цвет - с белым, желтым, оранжевым, розовым цветами,
является
промежуточным
между
красным
и
синим.
Черный цвет, белый и серый используются как отделка. Неплохо выглядит
черный цвет в соседстве с оранжевым, желтым, розовым, красным,
сиреневым и салатным тонами.
Меньше – это больше
«Меньше – это больше», наверное, самая известная фраза, иллюстрирующая
движение минимализма. Фраза была популяризована архитектором
Людвигом Миесом ван де Рохом (Ludwig Mies van der Rohe) в описании
эстетики
минимализма.
В веб-дизайне принцип «Меньше – это больше» означает использование
только самых необходимых дизайнерских элементов. Используйте меньше,
чтобы макет не был сборником бессмысленных элементов.
Простая типографика и скупое использование цвета делают дизайн
приятным и минималистичным.
Простой дизайн, выставляющий напоказ в первую очередь контент, а потом
уже все остальное. Простые двойные линейки над и под некоторыми
областями помогают разделить содержимое без ущерба для дизайна.
Простая навигация и графика создают ощущение минимализма.
Избегайте ненужных вещей
Не включайте ненужные элементы в свой дизайн. Думайте только о том, что
необходимо для содержимого и функциональности вашего дизайна.
Сфокусируйтесь на этих вещах и избегайте всего, что прямо к ним не
относится. Но помните, тем не менее, что определенные дизайнерские и
графические элементы будут конкретно играть на читабельность и
функциональность сайта.
Каждая деталь имеет значение
Дизайн в стиле минимализм придает значение каждой детали. Что вы
собираетесь оставить – жизненно важно. Обводка вокруг картинки, цветовая
палитра, пустое пространство – каждая деталь становится важной для
общего впечатления и ощущения от сайта, так как этих деталей мало.
Подумайте об ощущении, которое должен вызывать ваш веб-сайт у
посетителей, а потом уже решайте, какие детали будут соответствовать
этому ощущению. Многие дизайнеры думают, что в случае с минимализмом
«один размер подойдет всем», то есть применяют один и тот же макет к
разным сайтам. На самом деле главное – тот огромный эмоциональный
пласт, который становится основой индивидуальных графических элементов.
Дизайн в стиле минимализм запросто может быть прикольным и модным,
27
свежим и чистым, сдержанным и изысканным, элегантным и утонченным –
каким угодно, основываясь только на этих деталях.
Минимум цвета
Цвет приобретает дополнительное значение в минимализме. Выбор
правильной палитры или акцентирующих цветов крайне важен. Многие
дизайнеры останавливают свой выбор на черном, белом и сером цветах, но
в минимализме может быть использован любой цвет из существующих.
Как и в случае с деталями, цвет играет критическую роль, если количество
цветов ограничено. Обращайте внимание на значение цветов и на то, как они
сочетаются друг с другом.
Большие шрифты
Шрифты больших размеров часто используются вместо изображений, чтобы
создать интересную графику на странице.
Узоры и картинки в качестве фона
Бледные узоры и огромные иллюстрации в качестве фона могут создать
очень интересный визуальный эффект минималистичному веб-дизайну.
Читабельность сайта
Если вы напрямую зависите от того, читают ли тексты на вашем сайте – не
делайте черный фон. Светлый текст на темном фоне читать намного тяжелее,
чем темный текст на светлом.
Хочешь донести информацию до пользователя – не жди, что он будет ради
тебя напрягаться – подай текст в самом дружелюбном и удобном виде.
Самым читабельным шрифтом признан Verdana. А для дизайна сайтов лучше
выбирать пастельные тона темные шрифты. Также не следует
передозировать ваш проект множеством различных размеров, начертаний и
цветов текста - иначе пользователь просто не сможет воспринять структуру,
важность и акценты – и не сможет привычно просканировать содержимое
страницы, выделив для себя главное.
Не нужно увлекаться выделением курсивом и жирным большого количества
слов – такое выделение потеряет свой основной смысл – привлекать
внимание. А подчеркивание лучше оставить для оформления ссылок, как
уже традиционно сложилось.
Если по вашей дизайнерской задумке вы создаете текстовое поле или
колонку яркого цвета, например оранжевого – то размещайте там нечто
важное, чтобы не разочаровать пользователя.
Постарайтесь не перегружать свои страницы анимированными баннерами их большие скопления отвлекают внимание от текста и становятся настоящей
“костью в горле” у ваших читателей.
Грамотность текста
Контент – главное на странице, хороший контент ничем не заменишь.
Содержание веб-страницы имеет большее значение, чем любой другой
фактор, для того, чтоб посетители продолжали посещать эту страницу,
28
поскольку контент единственное, что читает посетитель. Избегайте
грамматических ошибок в содержании Вашей веб-страницы. Так же не
должно быть орфографических ошибок.
Навигация по сайту
Как известно, первое, что ищет на незнакомом сайте посетитель — это
способ перемещения по сайту, ссылки, меню и т. п. Всё это часто называют
навигационными елементами сайта.
Навигация по сайту должна (в идеале) отражать структуру имеющейся на
нём информации. Навигация создаётся для посетителей, поэтому удобство,
доступность и простота ставятся на первое место. Желательно разделить
информацию на сайте на несколько структурных групп, а возможно и на
несколько уровней.
Диагностика правильности усвоения учениками знаний
Контрольные вопросы:
1) Назовите
основные
принцыпы
эргономичного
размещения
информации на веб-страницах.
2) Назовите примеры, как нельзя размещать информацию на сайте.
3) Назовите пары цветов, которые будут гармонично сочетаться на
страницах сайта.
Подведение итогов урока
Учащиеся проговаривают, чему они научились на этом уроке. Если есть
вопросы, задают их учителю.
Сообщение домашнего задания
Повторить конспект. Изучить параграф учебника.
Урок 9
Тема: Практическая работа №50. Разработка веб-сайта средствами языка
HTML.
Цель урока
На практике отработать навыки разработки веб-сайта средствами языка
HTML.
Задание к уроку
Разработать веб-сайт используя полученніе знания на предідущих уроках
Тип урока
Урок формирования умений и навыков
Оборудование
Компьютеры, подключенные к сети Интернет, программы браузер, блокнот.
Ход урока
Организационная часть
Приветствие, проверка подготовленности учеников, к уроку, проверка
присутствия. Сообщение темы и плана работы на уроке, цели и заданий к
уроку
29
Актуализация опорных знаний
Вопросы для повторения:
1) Опишите структуру гипертекстового документа.
2) Какие теги используются для форматирования текста?
3) Какие теги используются для вставки гиперссылок?
4) Какой тег используется для вставки графики в веб-страницу?
5) Назовите основные принцыпы эргономичного размещения
информации на веб-страницах.
Стимулирование учебной деятельности
В ходе выполнения данной практической работы вы создадите макет Webсайта с помощью программного средства Блокнот и языка гипертекстовой
разметки HTML.
Самостоятельное выполнение учениками заданий под контролем и с
помощью учителя
Ученики выполняют практическую работу №50. Разработка веб-сайта
средствами языка HTML.
Задание к практической работе
1. Создать в своей папке папку с названием maket. В этой папке будут
хранится файлы, содержащие страницы сайта и другие документы
(например, рисунки, фоны и т.д.)
2. Создать заготовки Web-страниц. Такие «пустые» страницы должны иметь
заголовок, но могут пока не иметь содержания. Все создаваемые страницы
необходимо сохранить в виде файлов в папке сайта maket.
3. Открыть окно текстового редактора Блокнот.
4. Набрать в Блокноте структуру НTML-документа. Для этого перейти на
английскую раскладку клавиатуры и набрать следующие теги:
<HTML> начало HTML-кода
<HEAD> начало заголовка
заголовок содержит описательную и служебную информацию
<TITLE> Заголовок страницы </TITLE>
</HEAD> конец заголовка
<BODY > начало тела
содержание страницы
</BODY> конец тела
</HTML> конец HTML-кода
5. Используя меню Файл и команду Сохранить как… сoхранить документ в
папке maket под именами index.html, 1.html, 2.html, 3.html.
6. Закройте окно программы Блокнот.
7. Создайте главную страницу сайта. Дизайн главной страницы сайта обычно
состоит из одной «сложной» таблицы или нескольких «простых» таблиц, в
которых располагается необходимая информация. Существуют несколько
классических схем табличного дизайна. Вы осуществите схему главной
30
страницы, состоящую из трех таблиц.
Заголовок сайта
Ссылка 1
Полезное содержимое сайта
Ссылка 2
Ссылка 3
Сведения о разработчиках сайта
8. Откройте документ index.html из папки maket. Документ откроется в окне
браузера Internet Explorer. На экране вы увидите пустую Web-страницу.
9. Перейдите в Блокнот из программы Internet Explorer. Для этого выберите
меню Вид→Просмотр HTML-кода.
10. Структура таблицы задается парным тэгом <TABLE> </TABLE>.Наберите
между тэгами <BODY > </BODY > структуру первой таблицы:
- таблица состоит из одной строки и одной ячейки;
- окантовка таблицы шириной в 1 пиксель (атрибут BORDER);
- ширина таблицы 100% от ширины окна браузера (атрибут WIDTH);
- высота таблицы 100 пикселей (атрибут HEIGHT).
Внимание! Кавычки вводить только на английской раскладке клавиатуры!
<TABLE BORDER=1 WIDTH=”100%” HEIGHT=100>
<TR>начало кода строки
<TD>начало кода ячейки
Заголовок сайта
</TD>конец кода ячейки
</TR>конец кода строки
</TABLE>
11. После внесения изменений в Блокноте выполняйте следующие действия:
- сохраните изменения в папке сайта (меню Файл, команда Сохранить как);
- сверните окно Блокнота на панель задач;
- в окне программы Internet Explorer щелкните мышью на кнопке Обновить;
- разверните окно Блокнота на весь экран, щелкнув мышью на
соответствующей кнопке панели задач.
12. Вторая таблица состоит из двух столбцов и такого количества строк,
сколько гиперссылок вы планируете создать на своей главной странице сайта
(в нашем случае, из трех строк). Следует ввести HTML-код, который бы
осуществил:
- ширину первого столбца — 30 % от ширины таблицы;
- высоту строки 40 пикселей;
- объединил 3 ячейки второго столбца (атрибут ROWSPAN).
Наберите структуру второй таблицы после первой таблицы (между тэгами
</TABLE> и </BODY>.
<TABLE BORDER=1 WIDTH=”100%”> начало таблицы
<TR> начало кода первой строки
31
<TD WIDTH=”30%” HEIGHT=40 >начало первой ячейки
Ссылка 1
</TD>конец кода первой ячейки
<TD ROWSPAN=3>начало кода второй ячейки
Информация о сайте
</TD>конец кода второй ячейки
</TR>конец кода первой строки
<TR> начало кода второй строки
<TD HEIGHT=40 >начало первой ячейки
Ссылка 2
</TD>конец кода первой ячейки
</TR>конец кода второй строки
<TR> начало кода третьей строки
<TD HEIGHT=40 >начало первой ячейки
Ссылка 3
</TD>конец кода первой ячейки
</TR>конец кода третьей строки
</TABLE>конец таблицы
13. Сохранить изменения и просмотреть страницу в Internet Explorer. Для
этого повторить действия, описанные в пункте 11.
14. Добавьте HTML-код третьей таблицы между последним тэгом </TABLE> и
тэгом </BODY>.
<TABLE BORDER=1 WIDTH=”100%” HEIGHT=100>
<TR>
<TD>
Сведения о разработчиках сайта
</TD>
</TR>
</TABLE>
15. Сохраните изменения в файле index.html и просмотрите страницу в
Internet Explorer.
16. Создайте на главной странице сайта панель навигации, содержащую
гиперссылки на все страницы сайта. Гиперссылка в общем виде создается с
помощью тега <A> </A>. В общем виде: <A HREF=”адрес, куда перейти”>
объект ссылки (текст, рисунок и т.д.)</A>. Гиперссылки в нашем случае будут
располагаться во второй таблице в первой ячейке. Создайте на титульной
странице сайта гиперссылку на электронный адрес владельца сайта.
Сведения о разработчиках сайта содержатся в третьей таблице.
17. Открыть документ из именной папки документ index.html.
18. Перейдите в Блокнот из программы Internet Explorer. Для этого выберите
меню Вид→Просмотр HTML-кода.
19. Для создания гиперссылки на страницу 1.html внесите следующие
32
изменения в код первой ячейки второй таблицы:
<TD WIDTH=”30%” HEIGHT=40 >
<A HREF=”1.htm”> Ссылка 1 </A>
</TD>
20. Аналогично создайте гиперссылки на страницы 2.html, 3.html:
<TD HEIGHT=40 ><A HREF=”2.htm”>Ссылка 2</A>
</TD>
…
<TD HEIGHT=40 ><A HREF=”3.htm”>Ссылка 3</A>
</TD>
…
21. Сохраните изменения в файле index.html и просмотрите страницу в
Internet Explorer.
22. Добавьте в третью таблицу код, осуществляющий гиперссылку на
электронный адрес владельца сайта. В качестве электронного адреса для
примера, выберем адрес ivanov@ukr.net
<TABLE BORDER=1 WIDTH=”100%” HEIGHT=100>
<TR>
<TD>
<A HREF=”Mailto: ivanov@ukr.net”> Написать письмо</A>
</TD>
</TR>
</TABLE>
23. Сохраните изменения в файле index.html и просмотрите страницу в
Internet Explorer.
Подведение итогов урока
Учащиеся задают вопросы учителю по данной теме. Учитель анализирует
выполненные работы и выставляет оценки.
Сообщение домашнего задания
Повторить конспект. Изучить параграф учебника. При наличии домашнего
компьютера – доработать свой сайт.
Урок 10
Тема: Обзор среды редактора сайтов
Содержание учебного материала
Обзор среды редактора сайтов. Создание сайта с помощью мастера и в
неавтоматизированном режиме: установка параметров страницы, ввод и
форматирования элементов страницы: текста, гиперссылок, изображений.
Графика и мультимедийная информация на веб-страницах. Структуризация
веб-страниц с помощью таблиц.
Цель урока
33
Изучить основные возможности визуального редактора сайтов
Задание уроку
Изучить основные приемы работы с визуальным редакторм. Научиться
создавать сайты с текстом, графикой, таблицами при помощи визуального
редактора.
Тип урока
Урок усвоения новых знаний
Оборудование
Компьютеры, мультимедийный проектор, программа Microsoft PowerPoint,
презентация к уроку.
Ход урока
Организационная часть
Приветствие, проверка подготовленности учеников, к уроку, проверка
присутствия. Сообщение темы и плана работы на уроке, цели и заданий
уроку
Актуализация опорных знаний
Вопросы для повторения:
1) Опишите структуру гипертекстового документа.
2) Какие теги используются для форматирования текста?
3) Какие теги используются для вставки гиперссылок?
4) Какой тег используется для вставки графики в веб-страницу?
5) Назовите основные принцыпы эргономичного размещения
информации на веб-страницах.
Стимулирование учебной деятельности
До сегоднешнего урока мы писали страницы при помощи текстового
редактора Блокнот. Вы на себе ощутили на сколько это трудоемкая работа.
Поэтому
программисты
разработали
специальное
приложение,
облегчающее работу вэб-мастера – это визуальный редактор. Основным
преимуществом этой системы является полное разделение оформления и
содержания. Таким образом, пользователи могут сосредоточить свои усилия
на написании документа, и структурирования его. Теперь не обязательно
знать HTML-теги. Еще одним преимуществом является то, что содержание
вашего документа может быть легко экспортировать в различные форматы.
Объяснение нового материала
В качестве визуального редактора предлагаю использовать приложение
FrontPage – это визуальный редактор HTML, входящий в состав пакета
приложений Microsoft Office. Данное приложение при разработке страниц
веб-узла пользуется движком Internet Explorer. FrontPage позволяет
создавать сайты, отображающиеся одинаково в любом браузере. Программа
обладает широким спектром возможностей, в частности, может
автоматически отправлять изменения, внесённые разработчиком сайта в
исходные тексты, в режиме реального времени.
34
Чтобы создать законченный web-узел, недостаточно просто разместить в
одной папке несколько HTML-файлов. Грамотно построенный узел имеет
хорошо продуманную структуру. Это облегчает пользователю поиск
необходимой информации. Мастер web-узла поможет правильно
скомпоновать узел, а вам останется только наполнить страницы
содержанием. Чтобы прибегнуть к услугам мастера, выполните следующие
шаги.
1. Запустите Frontpage.
2. Выберите команду Файл -> Создать -> Страница или web-узел (File > New >
Web). В области задач приложения откроется окно Создание web-страниц
(New Page or Web) со списком шаблонов и мастеров, которыми можно
воспользоваться для построения web-узла.
3. В разделе Создание с помощью шаблона (New from Template) щелкните на
значке Шаблоны веб-узлов (Web Site Template) и в появившемся окне
диалога Шаблоны веб-узлов (Web Site Templates) щелкните на значке Мастер
корпоративного веб-узла (Corporate Presence Wizard).
4. В поле раздела Options (Параметры) введите название папки, в которой
будут храниться файлы.
5. Щелкните на кнопке ОК.
6. В первом окне мастера щелкните на кнопке Далее (Next).
Второе окно предлагает список основных web-страниц, которые можно
включить в новый web-узел: Домашняя страница (Home Page); Что нового
(What's New); Товары и услуги (Products/Services); Оглавление (Table of
Contents); Обратная связь (FeedBack form); Форма поиска (Search form).
7. Оставьте установленными все флажки и щелкните на кнопке Далее.
Следующее окно мастера, предлагает определить вид домашней страницы.
Устанавливая и сбрасывая флажки этого окна, вы добавляете или убираете
соответствующие разделы домашней страницы.
8. Установите все четыре флажка.
9. Щелкните на кнопке Далее.
Шесть следующих окон диалога мастера настраивают вид страницы
определенного типа (из тех, которые были выбраны во втором окне
мастера).
10. Десятое окно мастера задает общее оформление всех страниц. После
настройки щелкните два раза на кнопке Далее.
11. Введите полное название сайта, то же самое название, сокращенное
до одного слова, и адрес компании. Щелкните на кнопке Далее.
12. В следующем окне введите электронный адрес web-мастера и адрес
информационной поддержки. Щелкните два раза на кнопке Далее, а затем
на кнопке Готово (Finish). Мастер сгенерирует новый web-узел и откроет его в
режиме просмотра задач со списком действий, которые необходимо
выполнить для получения законченного узла.
35
Редактирование страниц сайта производится стандартніми способома, по
аналогии с текстовым процессором Microsoft Word.
Учитель демонстрирует набор текста, вставку таблицы, графики.
Диагностика правильности усвоения учениками знаний
Контрольные вопросы:
1) Для чего нужен визуальный редактор?
2) Как в визуальном редакторе происходит форматирование текста?
3) Как при помощи редактора вставить таблицу?
4) Как при помощи редактора вставить изображение?
Подведение итогов урока
Учащиеся проговаривают, чему они научились на этом уроке. Если есть
вопросы, задают их учителю.
Сообщение домашнего задания
Повторить конспект. Изучить параграф учебника.
Урок 11
Тема: Практическая работа №51. Разработка и публикация веб-сайта
средствами редактора веб-сайтов.
Цель урока
Научиться разрабатывать сайты с помощью визуального редактора.
Задание к уроку
На практике отработать навыки создания сайтов с помощью визуального
редактора.
Тип урока
Урок формирования умений и навыков
Оборудование
Компьютеры, программы: браузер, FrontPage
Ход урока
Организационная часть
Приветствие, проверка подготовленности учеников, к уроку, проверка
присутствия. Сообщение темы и плана работы на уроке, цели и заданий к
уроку
Актуализация опорных знаний
Вопросы для повторения:
1) Для чего нужен визуальный редактор?
2) Как в визуальном редакторе происходит форматирование текста?
3) Как при помощи редактора вставить таблицу?
4) Как при помощи редактора вставить изображение?
Стимулирование учебной деятельности
В ходе выполнения этой практической работы вы научитесь создавать более
масштабные и профессиональные сайты при помощи визуального редактора
FrontPage.
36
Самостоятельное выполнение учениками заданий под контролем и с
помощью учителя
Задание к практической работе
1. Создайте пустой веб-узел под именем maket2 в своей папке.
- Создайте в своей папке папку maket2, в которой будет храниться макет вебузла.
- Запустите приложение FrontPage.
- Выберите меню Создать страницу или веб-узел.
- На панели Создание веб-страницы или узла в разделе Создание щелкните
команде Пустой веб-узел.
- В появившемся диалоговом окне Шаблоны веб-узлов выделите значок
Пустой веб-узел и щелкните по кнопке Обзор.
- В диалоговом окне Место для нового веб-узла найдите папку maket2 и
щелкните по кнопке Открыть.
- На панели представлений щелкните по кнопке Папки.
- В открывшемся окне вы видите содержание пока пустого веб-узла: пустые
папки _private и images. Кроме этого, были созданы и скрытые папки,
необходимые для работы приложения.
- Сверните окно приложения FrontPage на панель задач и откройте свою
папку, в которой хранится папка maket2. Посмотрите на значок папки вебузла — она изменилась.
- Восстановите окно приложения FrontPage.
2. Создайте веб-страницы, которые войдут в состав веб-узла.
- Запустите программу FrontPage.
- Выберите меню Файл, команда Открыть веб-узел и откройте папку maket2.
- Щелкните на Панели представлений по кнопке Страница.
- Выберите меню Файл, команду Создать Страницу или веб-узел.
- На Панели Создание веб-страниц или узлов выберите в разделе Создание
по команду Пустая страница.
- В окне просмотра и редактирования страницы создана страница с именем
по умолчанию new_page_1.htm.
- Наберите текст Заголовок сайта.
- Посмотрите на имя файла. Появившаяся звездочка * в имени файла
напоминает о том, что в файле произошли изменения и перед просмотром
страницы в браузере необходимо эти изменения принять или отклонить.
- Щелкните по кнопке HTML-код в нижней части окна просмотра страницы и
просмотрите код страницы, который был введен автоматически.
- Щелкните по кнопке Просмотр.
- Выберите меню Файл, команду Сохранить как….
- В появившемся диалоговом окне выбрать папку maket2 и сохранить файл с
именем zagolov.htm.
- Просмотрите страницу в браузере. Для этого выберите меню Файл, команда
37
Просмотр в обозревателе.
- Закройте окно Internet Explorer.
- Создайте страницу с заголовком Меню и сохраните её в папке maket2 с
именем menu.htm.
- Создайте страницу с заголовком Адрес и сохраните её в папке maket2 с
именем avtor.htm.
- Создайте страницы под именами 1.htm, 2.htm, 3.htm с заголовками Первая,
Вторая, Третья соответственно.
3. Создайте главную страницу веб-узла с фреймовой структурой следующего
вида:
Заголовок
Меню
Адрес
- Щелкните меню Файл, команда Создать страницу или веб-узел.
- На панели Создание веб-страниц в разделе Создание с помощью шаблона
выберите команду Шаблоны страниц.
- В появившемся диалоговом окне Шаблоны страниц щелкните по вкладке
Страница рамок, выберите рамку Колонтитулы и оглавление и щелкните по
кнопке ОК.
Фрейм оглавления
Фрейм верхнего колонтитула
Основной фрейм
Фрейм нижнего колонтитула
- Внутри фрейма верхнего колонтитула щелкните по кнопке Задать
38
начальную страницу.
- В появившемся диалоговом окне откройте папку maket2, выделите файл
zagolov и щелкните по кнопке ОК. Выделенный файл появится в рамке.
- Внутри фрейма оглавления щелкните по кнопке Задать начальную
страницу.
- В появившемся диалоговом окне откройте папку maket2, выделите файл
menu и щелкните по кнопке ОК. Выделенный файл появится в рамке.
- Внутри основного фрейма щелкните по кнопке Задать начальную страницу
и задайте в качестве начальной страницы файл 1.htm из папки maket2.
- Внутри фрейма нижнего колонтитула щелкните по кнопке Задать начальную
страницу и задайте в качестве начальной страницы файл avtor.htm из папки
maket2.
- Выберите меню Файл, команда Сохранить как.
- Нажмите на кнопку Изменить и введите название страницы Домашняя и
щелкните по кнопке ОК.
- Наберите имя файла index.htm сохраните файл в папке maket2.
- Просмотрите страницу index.htm в браузере (меню Файл, команда
Просмотр в обозревателе).
- «Уберите» рамки, т.е. сделайте их «невидимыми». Для этого щелкнуть
правой кнопкой мыши в любом месте страницы, в появившемся контекстном
меню выбрать команду Свойства рамки. В появившемся диалоговом окне
Свойства рамки в поле Полосы прокрутки выбрать Никогда. Щелкнуть по
кнопке Страница рамок и убрать флажок из категории Показать границы.
- Сохранить изменения и просмотреть результат в обозревателе.
4. Создайте панель навигации. Добавьте электронный адрес создателей
сайта.
- Щелкните меню Файл, команда Открыть.
- В появившемся диалоговом окне Открытие файла выберите файл index.htm
в папке maket2.
- Поместите курсор под заголовком Меню.
- Вставьте динамический объект Меняющаяся кнопка. Для этого выполните
действия: меню Вставка, команда Веб-компонент; в появившемся
диалоговом окне Вставка компонента веб-узла в списке Тип компонента
выберите Динамические эффекты, а в списке Выберите эффект Меняющаяся кнопка. Щелкните по кнопке Готово; в диалоговом окне
Свойства меняющейся кнопки в поле Текст кнопки наберите текст: На
главную; щелкните по кнопке Обзор… и выберите файл 1.htm папке maket2;
щелкните по кнопке Выбор рамки; в появившемся диалоговом окне
Конечная рамка в поле Текущая страница рамок щелкните по основному
фрейму и нажмите ОК; щелкните ОК; на панели Свойства меняющейся
кнопки можно выбрать цвет кнопки, эффект и т.д.; щелкните ОК.
- Сохраните изменения и просмотрите результат в браузере (меню Файл,
39
команда Просмотр в обозревателе).
- Создайте еще две кнопки под кнопкой На главную со следующими
параметрами: кнопка «На вторую» осуществляет ссылку на файл 2.htm,
открывая его в основной рамке; кнопка «На третью» осуществляет ссылку на
файл 3.htm, открывая его в той рамке.
- Просмотрите изменения в обозревателе.
- Щелкните по слову Адрес и добавьте гиперссылку на электронный адрес.
Для этого: выберите меню Вставка, команда Гиперссылка; в диалоговом окне
Добавление гиперссылки выберите Связать с: электронной почтой; в поле
Адрес электронной почты наберите адрес электронной почты, например:
ivanov@ukr.net; щелкните по кнопке ОК.
- Сохраните изменения и просмотрите результат в обозревателе.
5. Просмотрите созданный веб-узел.
- Откройте веб-узел maket2.
- Щелкните по кнопке Переходы на Панели представлений.
- Перетащите мышью файлы из списка папок в окно просмотра так, как
показано на рисунке.
- Щелкните по
кнопке
Гиперссылки и
просмотрите все
гиперссылки
данного сайта.
- Щелкните по
кнопке Отчеты и
определите
«вес» сайта, т.е.
его размер.
- Закройте вебузел
и
программу FrontPage.
Подведение итогов урока
Учащиеся задают вопросы учителю по данной теме. Учитель анализирует
выполненные работы и выставляет оценки.
Сообщение домашнего задания
Повторить конспект. Изучить параграф учебника. При наличии домашнего
компьютера с установленным визуальным редактором – доработать свой
сайт.
40