<metakeywords>Информатика, класс, урок, на тему, 10 класс, Фон веб-страницы.</metakeywords>
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Фон веб-страницы.</metakeywords>
-
==Тема==
+
== Тема ==
-
*'''Фон веб-страницы.'''
+
*'''Фон веб-страницы.'''
-
==Цель==
+
== Цель ==
-
*Научить изменять фон веб-страницы посредством как цвета, так и картинки.
+
-
==Ход урока==
+
*Научить изменять фон [[Основные теги. Каркас веб-страницы. Полные уроки|веб-страницы]] посредством как цвета, так и картинки.
-
===Цвет как фон===
+
== Ход урока ==
+
+
=== Цвет как фон ===
Цвет фона веб-страницы устанавливается в уже знакомом тэге '''< BODY>.'''<br>
Цвет фона веб-страницы устанавливается в уже знакомом тэге '''< BODY>.'''<br>
-
Например, мы хотим, чтобы фон документа был розовым.
+
Например, мы хотим, чтобы фон документа был розовым.
Вот так выглядит код:
Вот так выглядит код:
Строка 22:
Строка 23:
< html >
< html >
-
< head > < title > Фон страницы < /title >
+
< head > < title > [[Фон веб-сторінки. Повні уроки|Фон страницы]] < /title >
< /head >
< /head >
Строка 34:
Строка 35:
< /html >
< /html >
+
<br> [[Image:Fon1.jpg|400px|Фон страницы]]
-
[[Image:Fon1.jpg|400px|Фон страницы]]
+
<br> Документ можно раскрасить любым другим цветом. <br>
-
+
-
+
-
Документ можно раскрасить любым другим цветом. <br>
+
Если в элементе '''< BODY<span style="font-weight: bold;"> </span><span style="font-weight: bold;" /> >''' цвет не указывать, то по умолчанию он будет белым.
Если в элементе '''< BODY<span style="font-weight: bold;"> </span><span style="font-weight: bold;" /> >''' цвет не указывать, то по умолчанию он будет белым.
Строка 44:
Строка 43:
[[Image:Fon2.jpg|400px|Фон страницы]]
[[Image:Fon2.jpg|400px|Фон страницы]]
+
<br> Больше цветов для использования их как фона можно взять по этой ссылке: http:/ /www.artlebedev.ru/tools/colors/
-
Больше цветов для использования их как фона можно взять по этой ссылке: http:/ /www.artlebedev.ru/tools/colors/
+
<br> {{#ev:youtube|iaoaG2iymII&feature=related}}
-
+
<br> Важно иметь ввиду, что в тэге < '''BODY''' > одновременно можно прописывать и цвет [[Оформление текста|текста]], и цвет фона.
-
{{#ev:youtube|iaoaG2iymII&feature=related}}
+
-
+
-
+
-
Важно иметь ввиду, что в тэге < '''BODY''' > одновременно можно прописывать и цвет текста, и цвет фона.
<br> Но есть некоторые правила при использовании цвета для фона.
-
+
-
+
-
Но есть некоторые правила при использовании цвета для фона.
+
Например, не нужно злоупотреблять яркими фонами: желтым, красным, салатовым и т.д.
Например, не нужно злоупотреблять яркими фонами: желтым, красным, салатовым и т.д.
Строка 65:
Строка 59:
Пожалейте глаза посетителей – ведь яркие цвета трудно воспринимаются.
Пожалейте глаза посетителей – ведь яркие цвета трудно воспринимаются.
+
<br>
-
===Картинка как фон===
+
=== Картинка как фон ===
Кроме цвета, фоном также может служить и картинка или какой-нибудь узор.<br>
Кроме цвета, фоном также может служить и картинка или какой-нибудь узор.<br>
-
С помощью того же тэга < '''BODY''' > и такого атрибута как '''«Background»''', можно использовать любую картинку как фон веб-страницы. ]
+
С помощью того же [[Основні теги. Каркас веб-сторінки. Повні уроки|тэга]] < '''BODY''' > и такого атрибута как '''«Background»''', можно использовать любую картинку как фон веб-страницы. ]
Атрибут '''"Background"''' указывает путь, где лежит картинка для фона.
Атрибут '''"Background"''' указывает путь, где лежит картинка для фона.
Строка 78:
Строка 73:
Например, <'''body background="image1.jpg" '''>
Например, <'''body background="image1.jpg" '''>
+
<br> [[Image:Fon4.jpg|400px|Фон страницы]]
-
[[Image:Fon4.jpg|400px|Фон страницы]]
+
<br> Существуют некоторые замечания по поводу использования картинки как фона:
-
+
-
+
-
Существуют некоторые замечания по поводу использования картинки как фона:
+
*Во-первых, нужно тщательно выбирать картинку для фона, так как их большинство просто не годятся для фона или же ужасно выглядят во множестве
*Во-первых, нужно тщательно выбирать картинку для фона, так как их большинство просто не годятся для фона или же ужасно выглядят во множестве
*Во-вторых, рекомендуется для фона брать какой-либо узор (как в примере, выше)
*Во-вторых, рекомендуется для фона брать какой-либо узор (как в примере, выше)
-
*В-третьих, важно знать, что картинка в документе «размножается» слева направо и сверху вниз
+
*В-третьих, важно знать, что [[Вставка изображений в веб-страницу. Полные уроки|картинка в документе]] «размножается» слева направо и сверху вниз
+
<br> {{#ev:youtube|eUsuuxo3nYo}}<br>
-
{{#ev:youtube|eUsuuxo3nYo}}<br>
+
<br>
-
+
-
==Вопросы==
+
== Вопросы ==
''1. Какая команда позволяет установить фоновый цвет документа? ''<br>
''1. Какая команда позволяет установить фоновый цвет документа? ''<br>
Строка 102:
Строка 95:
<br>
<br>
-
==Список использованных источников==
+
== Список использованных источников ==
''1. Урок на тему: «Выбираем фон для веб-странички», Малахова Е. В., г. Киев. ''<br>
''1. Урок на тему: «Выбираем фон для веб-странички», Малахова Е. В., г. Киев. ''<br>
Строка 108:
Строка 101:
''2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г. ''<br>
''2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г. ''<br>
-
''3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г. ''
+
''3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г. ''
+
<br>
----
----
+
<br> ''Отредактировано и выслано преподавателем Киевского национального [http://xvatit.com/vuzi/ukraine-ukr/ университета] им. Тараса Шевченко Соловьевым М. С. ''
-
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С. ''
+
<br>
-
+
----
----
+
<br> '''Над уроком работали'''
-
'''Над уроком работали'''
+
Малахова Е. В.
-
Малахова Е. В.
+
Соловьев М. С.
-
+
-
Соловьев М. С.
+
+
<br>
----
----
-
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
-
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
< h2 > Сейчас используется розовый цвет для фона < h2 >
< /body >
< /html >
Документ можно раскрасить любым другим цветом.
Если в элементе < BODY<span style="font-weight: bold;" /> > цвет не указывать, то по умолчанию он будет белым.
Больше цветов для использования их как фона можно взять по этой ссылке: http:/ /www.artlebedev.ru/tools/colors/
Важно иметь ввиду, что в тэге < BODY > одновременно можно прописывать и цвет текста, и цвет фона.
Например: <body text="green" bgcolor="pink">
Но есть некоторые правила при использовании цвета для фона.
Например, не нужно злоупотреблять яркими фонами: желтым, красным, салатовым и т.д.
Пожалейте глаза посетителей – ведь яркие цвета трудно воспринимаются.
Картинка как фон
Кроме цвета, фоном также может служить и картинка или какой-нибудь узор.
С помощью того же тэга < BODY > и такого атрибута как «Background», можно использовать любую картинку как фон веб-страницы. ]
Атрибут "Background" указывает путь, где лежит картинка для фона.
В этом примере он указывает на то, что картинка лежит в той же папке, что и наш документ.
Например, <body background="image1.jpg" >
Существуют некоторые замечания по поводу использования картинки как фона:
Во-первых, нужно тщательно выбирать картинку для фона, так как их большинство просто не годятся для фона или же ужасно выглядят во множестве
Во-вторых, рекомендуется для фона брать какой-либо узор (как в примере, выше)
В-третьих, важно знать, что картинка в документе «размножается» слева направо и сверху вниз
Вопросы
1. Какая команда позволяет установить фоновый цвет документа?
2. Что нужно сделать для того, чтобы поставить на фон картинку?
3. Перечислите основные правила при размещении фоновой картинки на веб-страницу.
Список использованных источников
1. Урок на тему: «Выбираем фон для веб-странички», Малахова Е. В., г. Киев.
2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.
3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.
Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.
Над уроком работали
Малахова Е. В.
Соловьев М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
