Выбранный для просмотра документ Выдержки из презентцииТехнология создания сайтов.ppsx
Скачать материал "Рабочая программа курса по выбору (элективного курса) для учащихся 9-11 классов Web-дизайн и сайтостроение."
Рабочие листы
к вашим урокам
Скачать
1 слайд
Технология создания сайтов
Сопровождение урока элективного курса
9 класс
Тема: «Структура Web-страницы. Абзацные теги»
Сергеева Елена Александровна
учитель информатики ГБОУ Школа №1200 г.Москва
2014-2015 уч. г.
2 слайд
Язык гипертекстовой разметки
HTML
(Hyper Text Markup Language)
Изобрел Тим Бернес – в 1989 г.
Идея: специальными ключевыми словами тегами (tag) обозначать, как браузеру следует отображать текст, размеченный языком HTML.
Браузер – программа, с помощью которой можно просматривать документы, размеченные языком гипертекстовой разметки.
3 слайд
СТРУКТУРА WEB - страницы
тело страницы
4 слайд
ПЕРВАЯ СТРАНИЧКА
Для того, чтобы увидеть свою первую страничку в браузере, достаточно создать текстовый файл с расширением .htm (например, index.htm)
Задание: В программе БЛОКНОТ создайте документ следующего содержания
5 слайд
<Р align=right> Если вас застал учитель
<BR> За любимым вашим делом – <ВR> Ковырянием отвёрткой
<BR> B мониторе и в винде, <BR> Bы ему признайтесь сразу,
<BR> Что хотели поразвлечься, <BR> И учитель, улыбаясь,
<BR> Молoтoк вам принесёт.
<Р align =сепtег> Разгоняя свой процессор,
<BR> He забудь про охлажденье: <BR> Peгyляpнo (летом - чаще)
<ВR> Поливай его водой. <BR> Ecли ж после процедуры
<BR> Oh работать перестанет,
<BR> Чтo ж — такое может статься:
<BR> Чтo поделаешь - замёрз!
АБЗАЦНЫЕ ТЕГИ
Задание: Подумай и ответь, как отобразиться на странице данное стихотворение.
6 слайд
АБЗАЦНЫЕ ТЕГИ
<DIV align=left> Разгоняя свой процессор, </DIV>
<DIV align=center> He забудь про охлажденье: </DIV>
<DIV align=right> Регулярно (летом - чаще)
<BR> Поливай его водой.</DIV>
<DIV align=left> Если ж после процедуры </DIV>
<DIV align=center> Он работать перестанет, </DIV>
<DIV align=right> Что ж — такое может статься :
<BR> Что поделаешь - замёрз! </DIV>
Задание: Подумай и ответь, как отобразиться на странице данное стихотворение.
7 слайд
ЗАГОЛОВКИ
<H2 align=center> Вредные советы.
<H4 align=right> Почти по Остеру.
<DIV align=left> Разгоняя свой процессор, </DIV>
<DIV align=center> He забудь про охлажденье: </DIV>
<DIV align=right> Регулярно (летом - чаще)
<BR> Поливай его водой.</DIV>
<DIV align=left> Если ж после процедуры </DIV>
<DIV align=center> Он работать перестанет, </DIV>
<DIV align=right> Что ж — такое может статься :
<BR> Что поделаешь - замёрз! </DIV>
Задание: В программе БЛОКНОТ создайте документ следующего содержания
8 слайд
ШРИФТОВОЕ ОФОРМЛЕНИЕ
<P> <FONT size = 1> Если старые дискеты
</FONT>
<BR> <FONT size =3> Пятый год лежат в коробке, </FONT>
<BR> <FONT size =5> Ходят слухи, что способны </FONT>
<BR> <FONT size=7> Размагнититься они.
</FONT>
<FONT size = от 1 до 7> текст </FONT>
9 слайд
ШРИФТОВОЕ ОФОРМЛЕНИЕ
В HTML имеется и ещё один способ указывать размер шрифта, позволяющий показать, на сколько размеров должен быть увеличен или уменьшен шрифт выделенного фрагмента. Задаётся он с помощью чисел со знаками « + » или « - ». Например, «+2» означает увеличение основного размера на две единицы, а «-1» — уменьшение на одну единицу.
Теги <FONT> можно вкладывать друг в друга.
Сложно?!
Но нужно это для того, чтобы страницу могли прочитать на мониторе с любым расширением без изменения размера шрифта.
<FONT sizе = - 1> Шрифт размера -1
<FONT size = + 2> A это шрифт размера +2 </FONT>
Опять – 1 </FОNT>
10 слайд
ШРИФТОВОЕ ОФОРМЛЕНИЕ
Ещё один «опасный» атрибут тега <FONT> — атрибут face, с помощью которого можно установить гарнитуру шрифта.
Часто на компьютере посетителя вполне может такого шрифта не оказаться, и тогда, в лучшем случае, текст отобразится стандартным шрифтом браузера.
Чтобы избежать таких казусов, принято значением атрибута face указывать несколько шрифтов в порядке убывания приоритета их использования.
<FONT face = "monotype corsive, scriptc, fantasy"> Это должно быть записано курсивом </FONT>
11 слайд
ШРИФТОВОЕ ОФОРМЛЕНИЕ
Самый интересный и многообещающий атрибут тега <FONT> — это атрибут установки цвета текста color.
Задать значение цвета можно с помощью его названия
(red — красный, firebrick — кирпичный, ...) или
номера (#FF0000 — красный, #В22222 —кирпичный).
Номер цвета состоит из трёх пар шестнадцатеричных чисел (триплет). Первая пара обозначает светимость красной составляющей пикселя, вторая пара — зелёной, третья — синей.
Если все три составляющие пикселя светятся в полную мощь, получаем белый цвет, кодируемый триплетом #FFFFFF. Несветящийся пиксель, кодируемый номером #000000, даёт чёрный цвет.
12 слайд
Рассмотрим несколько примеров значений атрибута цвета:
#888888 — все составляющие пикселя светятся одинаково, поэтому получаем серый цвет;
#С2С2С2 — этот цвет, тоже серый, будет заметно светлее предыдущего, так как светимость составляющих пикселя больше;
#00FF00 — светится только зелёная составляющая пикселя, причём в полную мощь, поэтому получаем яркий зелёный цвет;
#008800 —тёмно-зелёный цвет;
#88FF88 — к зелёному цвету добавили немного серого, при этом снижается контрастность цвета, и мы получаем светло-зелёный цвет;
#FF00FF — смесь красной и синей дают цвет под названием фукси (что-то вроде яркого сиреневого).
ШРИФТОВОЕ ОФОРМЛЕНИЕ
13 слайд
Есть тег, точнее, два тега, позволяющие устанавливать параметры шрифта для всего документа.
Это тег <BASEFONT> и уже знакомый нам тег <BODY>.
У тега <BASEFONT> есть атрибуты size, color и face, аналогичные соответствующим атрибутам тега <FONT>. А отличается он от своего локального собрата тем, что не имеет закрывающей пары и действует на всю страничку, так сказать, глобально.
На страничке может встретиться несколько тегов <BASEFONT>. В этом случае каждый новый тег полностью отменяет действие предыдущего.
ШРИФТОВОЕ ОФОРМЛЕНИЕ
14 слайд
<P> Если вы скачали фильмы,
<BR> Не имея Интернета,
<BASEFONT size = 4 face = ''comic sans ms''>
<BR> А потом их посмотрели,
<BR> Не включая монитор,
<BASEFONT size = 6 color = #00FF88>
<BR> Значит, вам пора на запись
<BR> Срочно к психотерапевту.
ШРИФТОВОЕ ОФОРМЛЕНИЕ
Задание: В программе БЛОКНОТ создайте документ следующего содержания
15 слайд
ЛИТЕРАТУРА О ПОСТРОЕНИИ САЙТА
Создание веб-страниц для «чайников» Смит Б.
Веб-дизайн: Книга Дмитрия Кирсанова Кирсанов Д.
Построй свой СУПЕР-САЙТ за 21 день! Морозова О.
«Postroika.ru» – основы сайтостроения для чайников
(www.postroika.ru)
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ ГЛАВНАЯ-Технология создания сайтов и основы Web-дизайна.ppsx
Скачать материал "Рабочая программа курса по выбору (элективного курса) для учащихся 9-11 классов Web-дизайн и сайтостроение."
Рабочие листы
к вашим урокам
Скачать
1 слайд
Программа элективного курса
9 класс
Составил: учитель информатики
ГБОУ Школы №1200
Сергеева Елена Александровна
Технология создания сайтов и основы Web-дизайна
2 слайд
Возрастающая роль информационных технологий в жизни общества определяет особое положение предмета «Информатика» в общей системе школьного образования.
Элективные курсы – обязательные курсы по выбору учащихся, за счет изменения структуры, содержания и организации образовательного процесса позволяют более полно учитывать интересы, склонности и способности учащихся, создают условия для профессиональной ориентации.
Введение
3 слайд
Место курса в учебном плане
Элективный курс «Технология создания сайтов и основы Web-дизайна» разработан для учащихся 9-х классов любого профиля (гуманитарного, естественно - научного, социального, экономического, сервисного и других).
Курс рассчитан на 34 часа (1 час в неделю).
Курс служит средством внутрипрофильной специализации в области новых информационных технологий.
Курс включает в себя практическое освоение техники создания Web-сайтов.
4 слайд
Цели курса
Научить учащихся:
ориентироваться и продуктивно действовать в информационном Интернет - пространстве, используя собственные веб - ресурсы;
способам представления информации в сети Интернет;
способам научно-технического мышления и деятельности, направленных на самостоятельное творческое познание и исследование информационного пространства.
Сформировать у учащихся:
целостное представление об информационной картине мира средствами «Всемирной паутины»;
элементы информационной и телекоммуникационной компетенции по отношению к знаниям, умениям и опыту конструирования веб- сайтов.
Реализовать у учащихся:
коммуникативные, технические и эвристические способности в ходе проектирования и конструирования сайтов.
5 слайд
Задачи курса
Познакомить с видами веб - сайтов, их функциональными, структурными и технологическими особенностями, с основами веб-дизайна.
Сформировать навыки элементарного проектирования, конструирования, размещения и сопровождения веб – сайта.
Дать первичные навыки программирования на языках HTML, CSS.
Сформировать умения работать в коллективе с комплексными веб - проектами.
Создать и разместить в сети Интернет собственный веб - сайт по выбранной тематике.
6 слайд
Основной тип занятий - практикум
Каждый урок сопровождается презентацией лекционного содержания.
Посмотреть >>
7 слайд
Основной вид деятельности –
проектная работа
Метод проектов занимает одно из приоритетных мест среди инновационных технологий, реализующее основную идею ФГОС – развивающее обучение. При выполнении проектной работы учащиеся вовлекаются в активную и разнообразную деятельность по самостоятельному овладению теорией и практикой. С использованием методики проектных занятий учащиеся осваивают базовые технические навыки с применением средств информационно-коммуникационных технологий.
Тематика проектов может касаться какого-то теоретического вопроса школьной программы, связанного с углубленным изучением предмета. Но чаще всего темы проектов относятся к актуальной практической жизни.
8 слайд
Результат проектной деятельности
Итогом совместной деятельности над проектами, конечно, является готовый к использованию на уроках или во внеурочной работе готовый продукт.
Это видимая сторона работы. Скрытые ее стороны рано или поздно проявляются – качественный рост показателей всех участников образовательного процесса, повышение мотивации к учению, возрастание эффективности урока, развитие творческих и исследовательских способностей, повышения интереса к предмету и, безусловно, повышения качества знаний по предмету.
Посмотреть архив >>
9 слайд
По окончании курса учащиеся
Знают:
принципы и структуру «Всемирной паутины»;
формы представления и управления информацией в сети Интернет;
виды веб-сайтов, основные принципы создания веб-страниц и веб-дизайна.
Умеют:
находить, сохранять и систематизировать необходимую информацию из сети;
проектировать, создавать и размещать в сети веб-сайты объемом 5-10 страниц;
программировать на языках HTML, CSS на уровне создания не менее 3-5 соответствующих элементов сайта.
Владеют:
приемами организации и самоорганизации работы по изготовлению сайта;
положительным опытом коллективного сотрудничества при конструировании сложных веб-сайтов.
10 слайд
Литература и источники
Программа элективного курса. А.В.Хуторской, доктор пед.наук, А.П.Орешко, кандидат физ-мат.наук, одобрена Министерством образования РФ – Национальный фонд подготовки кадров, Москва, 2004.
Технологии создания сайтов и основы Web-дизайна. Ситникова О.В., Татарникова Л.А., Вьюгов Д.С., Томск, 2005.
Создаем школьный сайт в Интернете. Элективный курс: Учебное пособие/М.Ю.Монахов, А.А.Воронин. – М.: БИНОМ. Лаборатория знаний, 2005.
Создание веб-страниц для «чайников». Смит Б.
Веб-дизайн: Книга Дмитрия Кирсанова.
Построй свой СУПЕР-САЙТ за 21 день! Морозова О.
www.postroika.ru «Postroika.ru» - основы сайтостроения для чайников.
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ Заявка на участие.docx
Скачать материал "Рабочая программа курса по выбору (элективного курса) для учащихся 9-11 классов Web-дизайн и сайтостроение."
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ оплата МАГИСТР Сергеева ЕА.doc
Скачать материал "Рабочая программа курса по выбору (элективного курса) для учащихся 9-11 классов Web-дизайн и сайтостроение."
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ Тысячи лет.docx
Скачать материал "Рабочая программа курса по выбору (элективного курса) для учащихся 9-11 классов Web-дизайн и сайтостроение."
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ Экология.docx
Скачать материал "Рабочая программа курса по выбору (элективного курса) для учащихся 9-11 классов Web-дизайн и сайтостроение."
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ Сайт.doc
Скачать материал "Рабочая программа курса по выбору (элективного курса) для учащихся 9-11 классов Web-дизайн и сайтостроение."
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ brak.txt
Скачать материал "Рабочая программа курса по выбору (элективного курса) для учащихся 9-11 классов Web-дизайн и сайтостроение."
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ him.txt
Скачать материал "Рабочая программа курса по выбору (элективного курса) для учащихся 9-11 классов Web-дизайн и сайтостроение."
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ les.txt
Скачать материал "Рабочая программа курса по выбору (элективного курса) для учащихся 9-11 классов Web-дизайн и сайтостроение."
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ ozon.txt
Скачать материал "Рабочая программа курса по выбору (элективного курса) для учащихся 9-11 классов Web-дизайн и сайтостроение."
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ sval.txt
Скачать материал "Рабочая программа курса по выбору (элективного курса) для учащихся 9-11 классов Web-дизайн и сайтостроение."
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ titul.txt
Скачать материал "Рабочая программа курса по выбору (элективного курса) для учащихся 9-11 классов Web-дизайн и сайтостроение."
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ РП+ТП Технология создания сайтов и основы Web-дизайна.docx
Скачать материал "Рабочая программа курса по выбору (элективного курса) для учащихся 9-11 классов Web-дизайн и сайтостроение."
Рабочие листы
к вашим урокам
Скачать
Рабочие листы
к вашим урокам
Скачать
6 664 963 материала в базе
Настоящий материал опубликован пользователем Сергеева Елена Александровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материалВаша скидка на курсы
40%Курс повышения квалификации
36/72 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Мини-курс
3 ч.
Мини-курс
5 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.