КАТЕГОРИИ:
АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Цветовое оформление web-страницы, списки, ссылки в web-страницах
| 1. Повторение теоретических сведений. |
| 2. Выполнение команд, представленных в таблице. | |
| 3. Выполнение практической работы. | |
| 4. Ответы на контрольные вопросы. | |
| 5. Выполнение теста. |
Цель:получить начальные сведения об изменения цвета страницы, фон, вставлять гиперссылки, вставлять графические объекты, создавать списки
Знать:
- понятие гиперссылки, основные тэги их создания;
Уметь:
- изменять цвет страницы,
- выбирать фон,
- вставлять гиперссылки,
- вставлять графические объекты.
- создавать списки в различных вариантах
- пользоваться основными атрибутами для преобразования изображений в документе
Формируемые компетенции: ПКНМ-7, ПКНИ-8, ПКНМ-3.
| Теги | Результат |
| Цветовое оформление страницы | |
| <BODY BGCOLOR = "#FFFFFF"> | цвет фона -белый |
| <BODY BACKGROUND = "image.gif"> | фоновый узор – картинка image.gif |
| <BODY LINK="gray"> | цвет ссылки по умолчанию |
| <BODY VLINK="blue"> | цвет пройденной ссылки |
| <BODY АLINK="red"> | цвет активной ссылки |
| Некоторые коды цветов (00-FF) | |
| "#FF0000" | красный |
| "#00FF00" | зеленый |
| "#0000FF" | синий |
| "#FFFFFF" | белый |
| "#000000" | черный |
| Цветовое оформление текста | |
| <FONT СOLOR="blue" SIZE="1"> Текст </FONT> (SIZE от -7 до7) | Текст синего цвета с высотой букв 1 |
| Изображения на сайте | |
| <IMG SRC = "star.gif "> | Просто картинка |
| <A HREF = "test.htm" > <IMG SRC ="button.gif" BORDER="0"> </A> | Картинка-ссылка без граничной рамки |
| <A HREF = "test.htm" > <IMG SRC ="button.gif"> </A> | Картинка-кнопка |
| ALT="альтернативный текст" | Если картинка не загрузится, можно будет прочитать этот текст |
| <IMG SRC = "star.gif"> | Это картинка без выравнивания (по умолчанию) |
| <IMG SRC = "star.gif " ALIGN="left"> | Картинка слева от текста. Текст может размещаться на нескольких строчках и плавно обтекать картинку |
| <IMG SRC = "star.gif " ALIGN=" middle "> | Картинка центрирована по вертикали относительно текста |
| <IMG SRC = "star.gif " ALIGN=" top "> | Текст размещен по верхнему краю картинки |
| <IMG SRC = "star.gif " ALIGN=" bottom "> | Текст размещен по нижнему краю картинки |
| WIDTH, HEIGHT размер изображения, <IMG SRC = «arrow.gif» ALT=»Вперед» ALIGN=»left» WIDTH=»100» HEIGHT=»50»> | Высота изображения 100 пикселей, высота - 50 |
| Нумерованные и маркированные списки | |
| Нумерованный список <OL> <LI> Личные доходы <LI> <LI> Доходы соседа <LI> <LI> Расходы <LI> </OL> | Нумерованный список 1. Личные доходы 2. Доходы соседа 3. Расходы |
| Маркированный список <UL> <LI> Личные доходы <LI> <LI> Доходы соседа <LI> <LI> Расходы <LI> </UL> | Маркированный список · Личные доходы · Доходы соседа · Расходы |
| Ссылки | |
| <A HREF = ''http://www.tlt.ru''>Новости Тольятти</A> | Новости Тольятти |
| <A HREF = ''http://www.taom.ru''> Тольяттинская академия управления</A> | Тольяттинская академия управления |
| <A HREF = ''http://bridge.tlt.ru''>Бридж в Тольятти</A> | Бридж в Тольятти |
| <a href="../index.html">Домой</a> | Домой |
| Провести демонстрацию готовой презентации в соответствии с <a href="criteria.htm"> требованиями</a>. | Провести демонстрацию готовой презентации в соответствии с требованиями. |
| 1. Леонтьев, Б.В. Web-дизайн: Тонкости, хитрости и секреты / Б.В. Леонтьев. –М.: Познавательная книга плюс, 1999. - С. 8-11. |
| 2. Практикум по общей информатике: учеб.пособие / под. ред. В.П. Омельченко. – 2-е изд., перераб. и доп. – Ростов Н/Д: Феникс, 2007. –С. 310-358.: ил. – (Высшее образование) | |
| 3. Симонович, С.В. Специальная информатика: учебное пособие / С.В. Симонович, Г.А.Евсеев, А.Г. Алексеев. – М.: АСТ-ПРЕСС КНИГА, 2005. - С. 416 |
| 1. Добавить заголовок 3 уровня – «Маркированный список». Например: 1. список 2. таблица 3. картинка 4. рамка |
| 2. Добавить заголовок 3 уровня – «Маркированный список». | |
| 3. Добавить маркированный список, задав внешний вид маркера круглый: · элемент 1 · элемент 2 · элемент 3 | |
| 4. Добавить горизонтальную линию, задав однотонную линию толщиной в 5 пиксель, шириной 60% выравниванием по левому краю. | |
| 5. Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить. | |
| 6. Вставить рисунок, задав выравнивание по центру. | |
| 7. Добавить отцентрированный абзац «изображение в натуральную величину». | |
| 8. Увеличить (или уменьшить) пропорционально картинку в три раза, задав выравнивание по центру. | |
| 9. Добавить отцентрированный абзац «изображение пропорционально увеличено (уменьшено) в три раза». | |
| 10. Добавить горизонтальную линию: однотонную линию толщиной в 5 пиксель, шириной 60% < выравниванием по правому краю. | |
| 11. Создайте вручную гиперссылки на все страницы сайта из общей области. | |
| 12. На титульной странице создайте ссылку на свой e-mail адрес. | |
| 13. В ячейки таблицы с прозрачными границами расположите разные изображения. | |
| 14. Создайте ссылки на каждом изображении фотогалереи с выходом в отдельные окна. | |
| 15. Поставьте в конце страницы ссылку на свой электронный адрес. Добавить ссылку – «переход в начало документа». | |
| 16. Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить |
| 1. Как создать ссылку со страницы сайта на другую страницу сайта? |
| 2. Как сделать ссылкой графический объект? | |
| 3. Как создать закладку? | |
| 4. Как сделать ссылку на закладку? | |
| 5. Как в HTML-документе сделать ссылку на электронную почту? |
1. 
Гиперссылки на Web - странице могут обеспечить переход...
a) только в пределах данной web – страницы
б) только на web - страницы данного сервера
в) на любую web - страницу данного региона
г) на любую web - страницу любого сервера Интернет
Дата добавления: 2015-09-14; просмотров: 208; Мы поможем в написании вашей работы!; Нарушение авторских прав |