Программа ДО Создание сайтов. Автор: Шумкова Наталья Владимировна. Работа №416358
Управление образования Кировского района Департамента образования
города Екатеринбурга
Муниципальное автономное общеобразовательное учреждение
гимназия № 35
Рекомендована
методическим советом
Протокол № __ от «__» _______2020 г
Председатель методического совета:
_________/_____________/
Утверждаю
Директор:
__________/
Никандрова Е.А
./
Приказ № ____
от « __ » __________ 2020 г.
Дополнительная общеобразовательная общеразвивающая программа
технической направленности
«Создание сайтов»
Возраст обучающихся – 15-16 лет.
Срок реализации 1 год.
Автор-составитель:
Шумкова Наталья Владимировна,
педагог дополнительного образования,
высшей квалификационной категории
Екатеринбург
2020 г
2
Паспорт программы
Название программы
Создание сайтов
Автор-составитель
Шумкова Наталья Владимировна
Вид программы
Типовая
Направленность
Техническая
Форма реализации
Очная
Срок реализации
1 год
Возраст обучающихся
15-16 лет
Категория детей
Учащиеся среднего школьного возраста
Уровень освоения программы
Стартовый
Краткая аннотация
Программа ориентирована на учащихся
классов с углублённым изучением инфор-
матики. Обучающиеся овладеют основным
приёмам работы с инструментальными
программами для создания Web-страниц с
использованием языка гипертекста, изучат
возможности применения Web-страниц в
различных областях профессиональной де-
ятельности.
3
Пояснительная записка
Направленность программы
Техническая
Актуальность
Создание компьютерных сетей предоставило человечеству абсолютно новый способ об-
щения. Новейшие достижения в технологии передачи информации открывают неограничен-
ные возможности по обработке и передаче массива данных практически в любую точку зем-
ного шара. Технологии Всемирной паутины открывают широкие возможности для исполь-
зования их в Интернете. Данная программа позволит учащимся изучить основные инстру-
ментальные средства для создания и разработки Web-страниц. Процесс создания Web-сайта
творческий и увлекательный, поэтому данная программа будет интересна учащимся не
только в получении новых знаний и умений, но и в выборе их будущей профессиональной
деятельности. Представляемая программа ориентирована на формирование компьютерной
грамотности создания Web-страниц, что соответствует образовательным целям самих уча-
щихся и в целом общества.
Новизна
Программа «Создание сайтов» предназначена для обучающихся 15-16 лет. Данная катего-
рия обучающихся впервые знакомится с построением Web-страниц. Программа ориентиро-
вана на учащихся классов с углублённым изучением информатики. Включает изучение ма-
териала за рамками базового курса.
Педагогическая целесообразность
При проведении занятий выполняются практические работы с использованием компью-
тера, направленные на отработку отдельных технологических приемов, а также практикума
– интегрированных практических работ (проектов), ориентированных на получение целост-
ного содержательного результата, с учетом выполнения требований СанПин. При выполне-
нии работ практикума предполагается использование материала и заданий из других пред-
метных областей. Объёмные практические работы рассчитаны на несколько учебных часов.
Практические работы включают подготовительный этап, не требующий использования
средств информационных и коммуникационных технологий, а также включаются в домаш-
нюю работу и проектную деятельность.
Объём и срок реализации
Программа рассчитана на 36 часов в год (1 час в неделю). Срок реализации 1 год. Наполняе-
мость учебной группы 15 человек. Формы организации обучающихся на занятии: групповая.
Цель программы.
Научить обучающихся применять основные инструментальные средства для создания
Web-сайта с использованием языка гипертекста, а также показать возможности применения
Web-страниц в различных областях профессиональной деятельности. Знания и навыки, по-
лученные учащимися, окажутся полезными при дальнейшем изучении предметов не только
информационно-технологического профиля, но всех других и будут способствовать осознан-
ному выбору профиля для дальнейшего обучения. По окончании курса ученики должны
уметь эффективно использовать инструментальные программные средства с использованием
языка HTML для создания Web-страниц и Web-сайтов. В конце изучения курса учащиеся
выполняют проектную работу – создание сайта на предложенные темы (см. приложение).
Задачи программы.
обучающие:
•
дать общие представления и понятия среды Интернет и Web-страниц;
•
обучить основным приемам работы с основными инструментальными програм-
мами для создания Web-страниц;
•
научить создавать простые Web-сайты с помощью языка гипертекстовой разметки
документов (HTML);
•
научить изменять дизайн сайта с помощью инструментальных средств.
4
развивающие:
•
развивать умение переносить полученные знания в новую учебную ситуацию;
•
развивать мышление, память;
•
развивать мотивацию продолжать изучение веб-страниц;
•
развитие самостоятельности;
•
развивать интеллектуальные качества, познавательных и творческих способностей;
•
развитие интереса к предмету.
воспитательные:
•
воспитание трудолюбия, дисциплинированности, аккуратности;
•
воспитание личностных качеств коллективной работы;
•
воспитание эстетического вкуса при создании дизайна веб-страницы;
•
воспитание стремления к профессиональному самоопределению.
Планируемые результаты
Личностные результаты:
▪
наличие представлений об информации как важнейшем стратегическом ресурсе раз-
вития личности, государства, общества;
▪
понимание роли информационных процессов в современном мире;
▪
владение первичными навыками анализа и критичной оценки получаемой информа-
ции;
▪
ответственное отношение к информации с учетом правовых и этических аспектов ее
распространения;
▪
развитие чувства личной ответственности за качество окружающей информационной
среды;
▪
способность увязать учебное содержание с собственным жизненным опытом, понять
значимость подготовки в области информатики и ИКТ в условиях развития информа-
ционного общества;
▪
готовность к повышению своего образовательного уровня и продолжению обучения с
использованием средств и методов информатики и ИКТ;
▪
способность и готовность к общению и сотрудничеству со сверстниками и взрослыми
в процессе образовательной, общественно-полезной, учебно-исследовательской, твор-
ческой деятельности;
▪
способность и готовность к принятию ценностей здорового образа жизни за счет зна-
ния основных гигиенических, эргономических и технических условий безопасной экс-
плуатации средств ИКТ.
▪
формирование ответственного отношения к учению, готовности и способности, обу-
чающихся к саморазвитию и самообразованию на основе мотивации к обучению и по-
знанию;
▪
формирование целостного мировоззрения, соответствующего современному уровню
развития науки и общественной практики;
▪
развитие осознанного и ответственного отношения к собственным поступкам;
▪
формирование коммуникативной компетентности в процессе образовательной,
учебно-исследовательской, творческой и других видов деятельности.
Метапредметные результаты
▪
умение самостоятельно определять цели своего обучения, ставить и формулировать
для себя новые задачи в учёбе и познавательной деятельности, развивать мотивы и
интересы своей познавательной деятельности;
5
▪
владение основами самоконтроля, самооценки, принятия решений и осуществления
осознанного выбора в учебной и познавательной деятельности;
▪
владение общепредметными понятиями, определениями и представлениями;
▪
владение информационно-логическими умениями: определять понятия, создавать
обобщения, устанавливать аналогии, классифицировать, самостоятельно выбирать ос-
нования и критерии для классификации, устанавливать причинно-следственные связи
и делать выводы;
▪
владение умениями самостоятельно планировать пути достижения целей; соотносить
свои действия с планируемыми результатами, определять способы действий в рамках
предложенных условий, корректировать свои действия в соответствии с изменяю-
щейся ситуацией; оценивать правильность выполнения учебной задачи.
▪
владение основными универсальными умениями информационного характера: поста-
новка и формулирование проблемы; поиск и выделение необходимой информации,
применение методов информационного поиска; структурирование и визуализация ин-
формации; выбор наиболее эффективных способов решения задач в зависимости от
конкретных условий; самостоятельное создание алгоритмов деятельности при реше-
нии проблем творческого и поискового характера;
▪
владение информационным моделированием как основным методом приобретения
знаний: умение преобразовывать объект из чувственной формы в пространственно-
графическую или знаково-символическую модель; умение строить разнообразные ин-
формационные структуры для описания объектов; умение «читать» таблицы, графики,
диаграммы, схемы и т.д., самостоятельно перекодировать информацию из одной зна-
ковой системы в другую; умение выбирать форму представления информации в зави-
симости от стоящей задачи, проверять адекватность модели объекту и цели моделиро-
вания;
▪
формирование и развитие компетентности в области использования информационно-
коммуникационных технологий: умений и навыков использования средств информа-
ционных и коммуникационных технологий для сбора, хранения, преобразования и пе-
редачи различных видов информации, навыки создания личного информационного
пространства.
Предметные результаты
1. Введение в курс.
Выпускник научится:
•
понимать основные Web-технологии;
•
знать, что такое Интернет, браузер, Web-страница, Web-сайт.
•
понимать назначение и основные возможности программы FrontPage.
Выпускник получит возможность научиться:
•
подключаться к сети Интернет;
•
запускать и выполнять простейшие команды в браузере InternetExplorer.
•
запускать программу FrontPage и выполнять в ней основные команды.
2. Основные понятия HTML. Структура HTML-документа.
Выпускник научится:
•
узнать назначение и особенности языка HTML;
•
выполнять структуру Web-документа;
•
набирать основные теги.
Выпускник получит возможность научиться:
•
создавать простейшую Web-страницу.
6
3. Создание и фоновое оформление главной Web-страницы.
Выпускник научится:
•
знать основные инструменты для создания Web-страниц;
•
знать, что такое фон, текстура, баннер;
•
различать теги управления форматированием текста, абзацев;
•
различать теги управления списками;
•
различать теги управления графикой;
•
понимать, что такое индексная (главная) Web-страница;
•
выполнять приёмы работы с поисковыми системами в Интернет.
Выпускник получит возможность научиться:
•
создавать Web-страницы с графическими и текстовыми элементами;
•
редактировать созданныеWeb-страницы;
•
просматривать Web-страницы средствами FrontPage и InternetExplorer. создавать
Web-страницы с элементами форматирования;
•
искать информацию в Интернете;
•
создавать индекснуюWeb-страницу.
4. Использование таблиц.
Выпускник научится:
•
узнает принципы построения таблиц в HTML-документе;
•
узнает теги для изменения ширины ячеек таблицы;
•
узнает приемы использования таблиц в Web-документах.
Выпускник получит возможность научиться:
•
создавать Web-страницы с таблицами;
•
использовать таблицы для форматирования Web-страницы.
5. Анимация. Бегущая строка.
Выпускник научится:
•
узнает элементы анимации для Web-страниц;
•
усвоит приемы использования анимационных файлов.
Выпускник получит возможность научиться:
•
использовать анимационные файлы на Web-страницах;
•
использовать элементы анимации языка HTML.
6. Работа с гиперссылками. Создание страниц сайта.
Выпускник научится:
•
узнает, что такое гиперссылки и приемы их использования;
•
изучит различия между внешними и внутренними гиперссылками;
•
усвоит основные приемы работы с гиперссылками;
•
изучит различия между текстовыми и графическими гиперссылками;
•
узнает, что такое навигация.
Выпускник получит возможность научиться:
•
создавать Web-страницы с гиперссылками;
•
использовать гиперссылки для оглавлений, меню;
•
применять гиперссылки для связи Web-страниц;
•
создавать Web-страницы с графическими и текстовыми гиперссылками;
•
использовать гиперссылки для навигации.
7. Фреймы.
Выпускник научится:
•
что такое фреймы;
•
приемы использования фреймов в Web-документе;
•
основные теги работы с фреймами.
Выпускник получит возможность научиться:
•
создавать Web-страницы с фреймами;
•
использовать фреймы для оптимизации и структурирования Web-страниц;
7
•
заполнять и оформлять фреймы.
8. Виды сайтов.
Выпускник научится:
•
способы навигации по сайту;
•
приемы обработки фотографий;
•
способы настройки изображения.
Выпускник получит возможность научиться:
•
обрабатывать фотографии;
•
использовать графические и технические способы оформления сайта.
9. Основы веб-дизайна.
Выпускник научится:
•
способы создания индивидуального стиля оформления сайта;
•
приемы использования таблиц в Web-документах;
•
различия между текстовыми и графическими гиперссылками;
•
приёмы создания макета сайта.
Выпускник получит возможность научиться:
•
верстать отредактированный веб-документа;
•
применять различные стили при оформлении веб-документа;
•
использовать фреймы для оптимизации и структурирования Web-страниц;
•
использовать гиперссылки для навигации.
Аттестация
По итогам изучения курса учащиеся должны:
•
Овладеть основными знаниями компьютерных Интернет-технологий.
•
Владеть основами работы с прикладными программными средствами и применять
их на практике для создания Web-сайта.
•
Определять дизайн Web-сайта и его структурных компонентов.
•
Знать основные тэги и их характеристики.
•
Уметь применять различные цвета для оформления Web-странички.
•
Научиться использовать таблицы, определять структуру Web-документа, исполь-
зуя при этом различные анимационные графические элементы, фотографии, рисунки.
•
Уметь создавать гиперссылки.
•
Уметь использовать дополнительные источники информации (литература, интернет-
источники, программы) для создания Web-страниц.
В конце изучения курса учащиеся выполняют проектную работу – создание сайта на предло-
женные темы (см. приложение). Работа оценивает по критериям.
Критерии оценивания WEB-документа
Деятельность учащегося оценивается по результатам защиты индивидуального про-
екта. Тема выбирается самостоятельно из предложенного списка (см. приложение). Резуль-
таты работы представлены в виде веб-документа
.
№
критерия
Критерий
1.
Структура веб-документа
Тема сформулирована, авторство указано, цель сформулирована
Выводы сделаны и соответствуют поставленной цели
Использованные ресурсы указаны. Библиография
2.
Содержание веб-документа
8
Текст хорошо написан. Сформированные идеи ясно изложены, структурированы
Выводы обоснованные с научной точки зрения, основанные на данных
Наличие графических объектов
3.
Корректность текста
Отсутствие орфографических и пунктуационных ошибок
Использование научной терминологии
Информация точная, полная
4.
Оформление веб-документа
Оформление логично, едино, отвечает требованиям эстетики, дизайн не противо-
речит содержанию
Изображения привлекательны, интересны и соответствуют содержанию
Текст легко читается, фон сочетается с графическими элементами
Списки и таблицы выстроены и размещены корректно
Анимационные эффекты не отвлекают внимание от содержания информации
5.
Навигационные функции
Навигационные функции характеризуют организацию информации на сайте и
возможности перемещения между разделами.
Предусмотрена возможность возврата на предыдущие страницы
Содержание
1. Введение в курс (2 часа).
Правила техники безопасности в компьютерном классе. Знакомство с понятием Web-сайт и
Web-страница, сеть Интернет, Web-технологии, программы браузеры, интерактивное сред-
ство представления информации.
2. Основные понятия HTML. Структура HTML-документа (2 часа).
Язык гипертекстовой разметки документов, теги, HTML-код. Рекомендации по разработке
проекта сайта. Практикум: «Проектирование сайта».
3. Создание и фоновое оформление главной Web-страницы (4 часов).
Панель инструментов. Текстура, фон, добавление текстуры, баннер. HTML страница, редак-
тирование HTML страницы, ввод текста и графики в HTML страницу, просмотр Web-стра-
ницы. Абзац, заголовки текста, управление шрифтом, списки, разделительные полосы,
вставка графических изображений, фоновая графика. Практикум: “Создание титульной
страницы сайта. Поиск в сети Интернет рисунков для сайта. Создание логотипа сайта и раз-
мещение на титульной странице”.
4. Использование таблиц (4 часа).
Построение таблиц в HTML документе, оформление таблиц, объединение ячеек, изменение
ширины ячеек, использование таблицы без рамки. Практикум: “Создание таблиц в HTML
документе”.
5. Анимация. Бегущая строка (5 часов).
Анимированные файлы, бегущая строка, диалоговое окно бегущей строки. Практикум: “До-
бавление на Web-страницу анимированных рисунков и бегущей строки”.
6. Работа с гиперссылками. Создание страниц сайта (9 часов).
Гиперссылка, добавление гиперссылки, изменение гиперссылки, удаление гиперссылки.
Практикум: “Добавление гиперссылок на главнуюWeb-страницу”. Текстовые ссылки, гра-
фические ссылки, навигация. Практикум: “Размещение панели навигации на титульной
странице сайта”.
7. Фреймы (2 часа).
Фрейм, установочный HTML-файл, левый фрейм, центральный фрейм, верхний фрейм.
Практическая работа “Заполнение и оформление фреймов”.
9
8. Виды сайтов (2 часов).
Способы организации информации на сайте. Навигация и технический дизайн. Подготовка
фотографий для веб страниц.
Практическая работа “Создание Web-сайта”.
9. Основы веб-дизайна (6 часов).
Фирменный стиль оформления сайта. Информационное наполнение сайта и расположение
элементов на нем. Вёрстка и оптимизация веб-страниц.
Учебный план
№
Раздел/Тема
Количество часов
Формы аттеста-
ции/ контроля
Теория
Практика
Всего
1. Введение в курс
1
1
2
Создание веб-
страницы
2. Основные понятия HTML.
Структура HTML-документа
1
1
2
Создание веб-
страницы
3. Создание и фоновое оформле-
ние главной Web-страницы
1
3
4
Создание веб-
страницы
4. Использование таблиц
1
3
4
Создание веб-
страницы
5. Анимация. Бегущая строка
1
4
5
Создание веб-
страницы
6. Работа с гиперссылками. Со-
здание страниц сайта
2
7
9
Создание веб-
страницы
7. Фреймы
1
1
2
Создание веб-
страницы
8. Виды сайтов
1
1
2
Создание веб-
страницы
9.
Основы веб-дизайна
1
5
6
Проектная работа
по созданию сайта
на тему по выбору
Всего
10
26
36
10
Календарно-тематический план
Дата
(неделя)
№
урока
Тема и тип урока
1.
1.
Введение в курс.
Урок изучения нового
2.
2.
Знакомство с Web-технологией.
Урок изучения нового
3.
3.
Основные понятия HTML. Структура HTML-документа.
Урок изучения нового
4.
4.
Атрибуты тегов. Заголовок документа.
Урок изучения нового
5.
5.
Цвет фона и текста. Размер, тип, начертание шрифта.
Урок изучения нового
6.
6.
Форматирование текста в HTML-документе.
Урок комплексного применения знаний
7.
7.
Организация списков в документе
Урок изучения нового
8.
8.
Практическая работа “Оформление Web-страницы”
Урок комплексного
применения знаний
9.
9.
Таблицы в HTML документе
Урок изучения нового
10.
10.
Практикум: “Создание таблиц в HTML документе”
Урок комплексного применения знаний
11.
11.
Использование таблиц
Урок комплексного применения знаний
12.
12.
Практикум: “Использование таблиц в HTML документе”
Урок комплексного применения знаний
13.
13.
Анимация: элементы языка HTML.
Урок изучения нового
14.
14.
Практическая работа “Бегущая строка”.
Урок комплексного применения знаний
15.
15.
Анимация: файлы.
Урок комплексного применения знаний
16.
16.
Практическая работа “Использование анимационных файлов”.
Урок комплексного применения знаний
17.
17.
Динамический HTML.
Урок комплексного применения знаний
18.
18.
Гиперссылки: понятие, виды
Урок изучения нового
19.
19.
Гиперссылки: внутренние и внешние, оглавление.
Урок изучения нового
20.
20.
Внутренние гиперссылки
Урок комплексного применения знаний
21.
21.
Практическая работа “Создание гиперссылок”
Урок комплексного применения знаний
22.
22.
Разработка гипертекстового документа
Урок комплексного применения знаний
23.
23.
Задание цвета ссылок на веб-странице
Урок комплексного применения знаний
24.
24.
Гиперссылки: использование, индексная Web-страница
Урок комплексного применения знаний
11
25.
25.
Практическая работа “Использование гиперссылок”
Урок комплексного применения знаний
26.
26.
Практическая работа “Использование графических гиперссылок”
Урок комплексного применения знаний
27.
27.
Фреймы: понятие, использование, виды.
Урок изучения нового
28.
28.
Практическая работа “Использование фреймов”
Урок комплексного применения знаний
29.
29.
Виды сайтов, их назначение.
Урок комплексного применения знаний
30.
30.
Способы организации информации.
Урок комплексного применения знаний
31.
31.
Разработка проекта. Поиск информации в интернет.
Урок комплексного применения знаний
32.
32.
Составление плана проекта. Работа с творческим проектом.
Урок комплексного применения знаний
33.
33.
Создание Web-страниц сайта.
Урок комплексного применения знаний
34.
34.
Заполнение Web-страниц сайта.
Урок комплексного применения знаний
35.
35.
Защита проектов.
Итоговый урок
36.
36.
Повторение.
Материально-техническое обеспечение программы
1.
Компьютерный класс на 12-15 компьютерных мест.
2.
Операционная система Windows.
3.
Программа текстовый редактор Блокнот.
4.
Браузер Opera, InternetExplorer, Chrom.
Список литературы
1.
Концепция развития дополнительного образования детей в Российской Федерации.
Утверждена распоряжением Правительства Российской Федерации от 4 сентября 2014 г.
№ 1726 –р.
2.
Федеральный Закон от 29 декабря 2012 года № 273-ФЗ «Об образовании в Российской
Федерации» - М.: 2013. – 238 с.
3.
Буйлова, Л. Н. Современные подходы к разработке дополнительных общеобразова-
тельных общеразвивающих программ / Л. Н. Буйлова // Молодой ученый. — 2015. —
№ 15. — С. 567 - 572.
4.
Усенков Д. Уроки Web-мастера. – М.: Лаборатория Базовых Знаний, 2001.
5.
Программа элективного курса по информатике «Технология создания сайта» Хутор-
ской А.В., д-р пед. наук, Орешко А.П., канд. физ.-мат. наук //Элективные курсы в про-
фильном обучении: Образовательная область «Информатика» /Министерство образо-
вания РФ – Национальный фонд подготовки кадров. – М.: Вита-Пресс, 2004.
6.
Дунаев В.В. Самоучитель dreamweaverMX 2004, - СПб: Питер, 2005.
7.
Кенин А. Окно в мир Интернета: Практическое руководство. – Екатеринбург: У-Фак-
тория, 2003.
12
Список информационных ресурсов
•
http://www.intuit/
-
сайт интернет-университета информационных технологий. Курс
лекций посвящённый основам веб-технологий.
•
http://www.postroika/
- «Учебник (руководство) по HTML».
•
http://html.manual.ru/
- «HTML – справочник»
Сведения о составителе
Шумкова Наталья Владимировна, образование высшее, Уральский государственный педа-
гогический университет, 1995 год, Специальность – физика и информатика, квалификация
– учитель физики и информатики. Высшая квалификационная категория.
Приложение
Список примерных тем проектных работ для создания Web-сайта
•
Мир, в котором я живу.
•
Я выбираю здоровый образ жизни.
•
Моя семья.
•
Моя школа (мой класс).
•
Моя электронная газета (Мой электронный журнал).
•
Завтра будет лучше.
•
Информатика вокруг нас.
•
Все науки хороши, выбирай на вкус.
•
Мой любимый город.
•
Сайт магазина, фирмы, организации.
Способы организации защиты проекта:
1.
Индивидуальный
2.
Групповой с распределением видов деятельности внутри группы.
Практические работы
Лабораторная работа №
1
Знакомство со структурой гипертекстов на языке
HTML
1.
Создать папку
с именем
HTML,
в папке со своей фамилией
.
2.
Откройте программу Блокнот
.
Создайте документ под именем
teatr.txt
с гипертекстом
.
<html>
<head>
<title>
Театры
Екатеринбурга
</title>
</head>
<body>
<div>
Екатеринбург
и
его
театры
</div>
У нас старинные академические театры: Театр оперы и балета, Музкомедия, Драма, ТЮЗ,
Кукольный
театр, Филармония. Открылись молодые замечательные театры: Волхонка,
Театрон,
Коляда
-
театр.
Театральный институт готовит талантливые кадры. Жители города
-
истинные театралы, знающие толк в искусстве, любящие своих и гастролирующих арти-
стов.
</body>
</html>
13
3.
Сохраните и закройте документ. Откройте и сохраните документ под именем
teatr.htm.
От-
кройте
документ
teatr.htm
браузером
.
Для редактирования документа откройте этот же
файл
teatr.htm
с помощью Блокнота
,
исправьте
и сохраните
.
Затем перейдите в
teatr.htm
и
обновите
F5.
4.
Изучите материал
уроков 1
-3, 6
из файла…
\
Документы
\ LessHTML\ less HTML.htm
5.
Установите для заголовка документа следующие параметры:
▪
шрифт
Monotype Corsiva
;
▪
цвет (узнать у учителя)
;
6.
Изучить
Урок 8
.
7.
Измените вид документа:
•
перечень старинных театров представьте в виде маркированного списка
–
контейнер
-
тэг
<UL>
…
</UL>
, вставьте перед каждым элементом списка тэг
<LI>
•
перечень молодых театров представьте в виде нумерованного списка
–
контейнер
-
тэг
<OL>
…
</OL>
, вставьте перед каждым элементом списка тэг
<LI>
8.
Установите
:
для элементов списка
контейнер
-
тэг
<FONT>
…
</FONT>
с параметрами
:
•
шрифт
Georgia;
•
размер 2;
•
цвет –
зелёного оттенка «00АА33»;
для заголовков списка
контейнер
-
тэг
<FONT>
…
</FONT>
с параметрами
:
•
шрифт
Comic Sans MS
;
•
размер 5;
•
цвет –
зелёного оттенка «
OLIVE
»;
9.
Вставить в документ линию
(
тэг
<HR>)
Урок 3, между нумерованным списком и последую-
щим текстом. Параметры линии:
•
длина –
750
, толщина –
4;
•
цвет –
зелёного оттенка «
99CC99
»;
•
расположить по центру.
10.
Добавьте документу фон
:
у тэга <
BODY>
задайте параметр цвета
фона –
светло
-
жёлтый отте-
нок «
FFFFCC
»
.
11.
Задайте начертание:
для элементов списка
контейнер
-
тэг
<I>
…
</I>
;
для заголовков списка
контейнер
-
тэг
<B>
…
</B>
подчеркните слово
«талантливые»:
контейнер
-
тэг
<U>
…
</U>
.
12.
Поставьте тэг
<BR>
перед
последним предложением
для перевода строки.
13.
Работу покажите учителю.
Лабораторная работа 2
Вставка картинки в гипертекстовый документ
1.
Откройте файл с
именем
teatr.htm
–
необходимо дополнить его картинками: фотографии
или логотипы театров.
2.
Скопируйте в свою папку
HTML
необходимые картинки.
3.
Изучить
Урок
5
из файла
…
\
Документы
\ LessHTML\ less HTML.htm
4.
Вставьте картинку любого старинного театра к маркированному списку с помощью тега
<img
src
=”имя_файла.
jpg
”>
, разместив его в гипертексте перед началом маркированного списка.
5.
Сохранить, обновить.
6.
Установите параметры тега
<img>:
a.
выравнивание –
вправо
;
14
b.
ширина –
280
пикселей;
c.
высота –
16
0 (или наоборот –
в зависимости от картинки)
;
d.
толщина рамки –
4
пикселя;
e.
цвет рамки –
синий.
7.
Вставьте картинку любого молодого
театра к нумерованному списку с помощью тега
<img
src
=”имя_файла.
jpg
”
>
, разместив его в гипертексте перед началом нумерованного списка.
8.
Сохранить, обновить.
9.
Установите параметры тега
<img>:
a.
выравнивание –
влево;
b.
ширина –
210
пикселей;
c.
высота –
14
0 (или наоборот –
в зависимости от картинки);
d.
толщина рамки –
6 пикселей;
e.
цвет рамки –
коричневый.
10.
Работу покажите учителю.
Лабораторная работа №
3
Вставка таблицы
в гипертекстовый документ
1.
Изучить
Урок
7
из файла
…
\
Документы
\ LessHTML\ less HTML.htm
2.
Создайте новый текстовый документ
redactor.txt
и наберите структуру гипертекста. Устано-
вите цвет страницы светло
-
розовым
.
3.
Оформите название
работы: заголовок 1 уровня, бордовым цветом, тип шрифта
Constantia
,
по центру.
4.
Наберите абзац и маркированный список
коричневым цветом, размер
3
, тип шрифта
Segoe
Print.
5.
Вставьте таблицу с помощью тэга
<table
>…</
table>
Установите параметры таблицы:
а)
ширина –
70%
от ширины страницы;
б)
выравнивание –
по центру
;
в)
толщина рамки –
2 пикселя;
г)
цвет рамки –
коричневый;
д)
цвет фона таблицы –
светло
-
оранжевый.
6.
Оформите название таблицы с помощью тэга
<caption
>…</
caption>
. Установите заголовок 2
уровня, цвет тёмно
-
красный.
7.
Создайте таблицу
из 5
строк с помощью тэгов
<tr>
…
</tr>
и
3
столбцов с помощью
тэгов
<td>
…
</td>.
Заполните ячейки таблицы.
Основные типы приложений для создания текстовых документов
Для обработки текстовой информации на компьютере используют
программы, которые позволяют выполнять следующие действия с доку-
ментом:
•
создавать,
•
редактировать,
•
форматировать,
15
•
сохранять,
•
распечатывать.
Программы для обработки текста
Вид программы
Название
Расширение
Текстовый редактор
Блокнот,
WordPad
.txt
Текстовый процессор
Microsoft Word
.doc, .rtf
Web-
редактор
Microsoft FronPage
.htm
Издательские
системы
Scribus
.sla, .pdf
8.
Выполните форматирование заголовков столбцов, задайте цвет букв и тип шрифта (по жела-
нию)
9.
Покажите работу учителю.
Лабораторная работа №
4
Объединение ячеек
таблицы
в
WEB-
документе
1.
Изучить
Урок
7
из файла
…
\ LessHTML\ less HTML.htm
2.
Создайте новый текстовый документ
information.txt
и наберите структуру гипертекста
.
3.
Определите количество строк и столбцов. Вставьте таблицу
.
Оформите название таблицы: уста-
новите заголовок 2 уровня, задайте цвет
и тип шрифта
.
4.
Заполните ячейки таблицы
номерами ячеек по порядку
.
5.
Установите параметры ячейки
:
a.
colspan
–
для объединения по горизонтали, затем
удалите ненужные ячейки;
b.
rowspan
–
для объединения по вертикали
,
затем удалите ненужные ячейки.
6.
Заполните ячейки таблицы текстом, вставьте картинки.
7.
Установите параметры таблицы: ширина –
60%; выравнивание –
по центру; толщина рамки –
3
пикселя; задайте цвет рамки и цвет фона таблицы.
8.
Установите цвет страницы.
9.
Выполните форматирование заголовков столбцов, задайте цвет букв, начертание и тип шрифта.
10.
Покажите работу учителю.
Представление информации
Виды информации
Носители инфор-
мации
Программы обра-
ботки информации
Символьная
Текстовая
Текстовый процессор
Word
Знаковая
16
Числовая
Программа Калькуля-
тор; табличный про-
цессор Excel
Графическая
Графический редактор
Paint
Звуковая
Проигрыватель Win-
dows Media
Видео
Видео-редактор
Movie Maker
Лабораторная работа №5
Вставка бегущей строки в гипертекстовый документ
1.
Создайте новый текстовый документ
Flashka.txt
и наберите структуру гипертекста. Устано-
вите цвет страницы
.
Оформите название работы.
2.
С помощью тэга
<marquee
>… </
marquee>
оформите первую бегущую строку с текстом «Кто
владеет информацией, тот владеет миром».
3.
Установите параметры первой бегущей строки:
a.
bgcolor
–
для выбора цвета фона бегущей строки;
b.
height
–
для установки ширины бегущей строки.
c.
width
–
для установки ширины бегущей строки в процентах от ширины страницы.
4.
Подберите размер и цвет букв для текста первой бегущей строки.
5.
Наберите текст
вашей веб
-
страницы
.
6.
Оформите нумерованный список.
7.
Задайте начертание и размер текста.
8.
Оформите вторую бегущую строку
с картинками.
9.
Установите параметры для второй бегущей строки:
a.
direction
–
для выбора направления бегущей строки
(вправо)
;
b.
scrollamount
–
для изменения скорости бегущей строки
в пикселах
.
c.
scrolldelay
–
для указания паузы, задержки по времени
в миллисекундах
.
17
10.
Оформите третью бегущую строку с текстом «Самой большой флэш
-
карты не существует!».
11.
Установите параметры для третьей бегущей строки:
a.
behavior
–
для выбора поведения бегущей строки (
slide
или
alternate);
b.
direction
–
по желанию (вверх или вниз);
12.
Подберите размер и цвет букв для текста третьей
бегущей строки.
13.
Создайте
четвёртую
и пятую бегущую строку
с одинаковым текстом «
My flash
!». Если у каж-
дой ширина будет по
49
% и направления противоположные (одно влево, одно вправо), то
получите интересный эффект.
Можно взять по 2
4
% шириной 4 бегущие строки.
14.
Покажите работу учителю.
Лабораторная работа №
6
Гиперссылки
18
Лабораторная работа №
7
Создание фреймов
из
веб
-
страниц
1.
Создайте
веб
-
страницу
zagolovok.htm
.
Напишите в ней
предложение
«Веб
-
страницы
с ги-
перссылками». Оформите как заголовок 1 уровня. Задайте выравнивание по центру. Выбе-
рите самостоятельно цвет букв и самой страницы.
2.
Изучите
Урок
12
из файла
…
\
Документы
\ LessHTML\ less HTML.htm
3.
Создайте файл
frame1.htm
с помощью парного тэга
<frameset>
…
</frameset>.
Установите
параметр тега
rows
,
который форми-
рует
два
окна, создавая горизонтальное
деление исходного
.
Размер укажите в
процентах:
20%, 80%.
Для открытия
файлов в окнах используйте непарный
тэг
<frame src
=”имя веб
-
страницы”>
для
каждого файла отдельно. В первом
окне должна открываться веб
-
страница
zagolovok.htm
, а во втором
index.htm
.
4.
Создайте файл
frame2.htm
. Установите пара-
метр тега
с
ols
,
который формирует два окна, создавая
вертикальное
деление исходного. Размер укажите в
процентах: 50%, 50%.
В первом окне должна откры-
ваться веб
-
страница
teatr.htm
, а во втором
flashka.htm
.
5.
Разделите левое
окно ещё на два окна с помощью вложенного
тэга
<frameset>
…
</frameset>
. Установите параметр тега
rows
,
который задаёт размер окон
40% и 60%. В
верхнем окне должна открываться веб
-
стра-
ница
teatr.htm
, а в нижнем
information.htm
.
Разделите по горизонтали правое окно в соот-
ношении 70% и 30%. В верхнем окне должна
открываться веб
-
страница
flashka.htm
, а в ниж-
нем
redactor.htm
.
6.
Создайте веб
-
страницу
nazvanie.htm
. Напишите в ней предложение «Мои веб
-
страницы».
Оформите как заголовок 1 уровня. Задайте выравнивание по центру. Создайте веб
-
страницу
menu.htm
. Напишите в ней нумерованный список ваших веб
-
страниц. Выберите самостоя-
тельно тип шрифта, цвет букв и самой страницы.
7.
Создайте файл
frame3.htm
по образцу.
20%
40%
40%
Мои веб
-
страницы
Список
стра-
ниц
1. teatr
2. redactor
3.information
4. flashka
5. index
teatr
40%
flashka
70%
information
60%
redactor
30%
8.
Работу покажите учителю.
Веб
-
страницы с гиперссылками
20%
Принтеры
80%
50%
50%
teatr
flashka
50%
50%
teatr
40%
flashka
70%
information
60%
redactor
30%
Создать дипломы
