Учебно-методический комплекс дисциплин по дисциплине «Веб-дизайн»

Скачать 0.97 Mb.

Название	Учебно-методический комплекс дисциплин по дисциплине «Веб-дизайн»
страница	7/8
Тип	Учебно-методический комплекс

rykovodstvo.ru > Руководство эксплуатация > Учебно-методический комплекс

1 2 3 4 5 6 7 8

заголовок

текст

Тег ВОDY используется для описания тела документа, может содержать следующие атрибуты:

ВАСКGROUND - определяет фон в виде рисунка из графического файла, на котором отображается текст документа. Значением атрибута будет являться путь к файлу.

Например: <�ВОDY ВАСКGROUND="bgr.gif"> - в качестве значения данного атрибута используется адрес в сокращенной форме URL.

Разные интерфейсы пользователя поддерживают различные дополнительные атрибуты для тега ВОDY.

Атрибут	Значение
ВGCOLOR	Цвет фона
ТЕХТ	Цвет текста
VLINK	Цвет посещенных гипертекстовых ссылок
LINK	Цвет гипертекстовой ссылки
ALINK	Цвет активной гипертекстовой ссылки

Цвет можно задавать названием цветового оттенка на английском языке или шестнадцатеричной кодировкой цветовых каналов RGB.
Задание 1

Создайте, в текстовом редакторе Блокнот, HTML-документ с заголовком Первый.
В качестве текста запишите свои ФИО.
Измените для документа цвет фона и цвет текста используя таблицу цветов. Для внесения изменений в MS Internet Explorer используйте кнопку Правка на панели инструментов, меню Вид – Просмотр HTMK кода или контекстное меню. Чтобы изменения отобразились на экране, используйте кнопку Обновить или клавишу F5.

Для изменения параметров символов используется тег

…

Атрибуты тега:

SIZE - позволяет задавать размер текста в данной области. Шрифт может иметь размер от 1 до 7.

СОLОR – изменение цвета текста.
Задание 2

Создайте HTML-документ, с заголовком – Размер.
Изменяя используя атрибут SIZЕ= тега создайте надпись типа:

и н ф о р м а т и к а

и н ф о р м а т и к а

Буквы сделайте цветными.
В качестве фона используйте рисунок.

Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Заголовки обозначают начала разделов документа.

Описывают заголовки теги вида ...</Hi > , где i — принимает значение от 1 до 6. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий. Каждый уровень имеет свой стиль.
Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта.

Теги, управляющие формой отображения

Тег	Значение
.....	Курсив (Italic)
...	Усиление ВОLD)
<�ТТ>...	Телетайп
.	Подчеркивание
~~...~~	Перечеркнутый текст
< BIG >... </ BIG >	Увеличенный фонт
< SMALL >...</ SMALL >	Уменьшенный фонт
< SUB >...</ SUB >	Подстрочные символы
< SUP >... </ SUР >	Надстрочные символы

Задание 3

В документе «Форматирование» отчеркните стили заголовков горизонтальной линией.
Введите заголовок 1-го уровня - Физические стили.
Введите слово ГИПЕРТЕКСТ 5 раз, каждый раз с новой строки
Примените к строкам следующие стили: полужирный, курсив, подчеркивание, телетайп, перечеркивание.
Сохраните изменения в документе.

При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем.
Теги, характеризующие тип информации

Тег	Значение
<�ЕМ>... </ЕМ>	Типографское усиление. От английского emphasis — акцент.
<�СIТЕ>...</СIТЕ>	Цитирование.
< STRONG >.</ STRONG >	Усиление. От английского strong emphasis — сильный акцент.
<�СODE>... </СОDE>	Отображает примеры кода (например, коды программ). Рекомендуется использовать для фрагментов исходных текстов.
~~...~~	Последовательность литералов. От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами.
<�КВD>... </КВD>	Пример ввода символов с клавиатуры. От английского keyboard — клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.
`...`	Переменная. От английского variable — переменная. Рекомендуется использовать для написания имен переменных.
...	Определение
-	Текст, заключенный в скобки

Задание 4

В документе «Форматирование» создайте горизонтальную линию.
Создайте заголовок 1-го уровня – Логические стили
Введите 10 строк текста и примените к ним различные логические стили. Выясните какие логические стили поддерживает ваш браузер.
Сформулируйте выводы – в чем состоит отличие физических и логических стилей.

В отличие от большинства текстовых процессоров, в HTML-документе обычно игнорируется символы перевода строки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобочитаемости). Однако браузер разделяет абзацы только при наличии тега
. Если вы не разделите абзацы тегом
, ваш документ будет выглядеть как один большой абзац.

...
Такая пара меток описывает абзац. Все, что заключено между
и
, воспринимается как один абзац.

Атрибут АLIGN позволяет выровнять текст на экране. Атрибут может принимать значения: left, right, center, justify. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам.
Задание 5

Создайте HTML-документ с заголовком «Абзацы».
Введите текст 4 раза с тегами абзаца:

В отличие от большинства текстовых процессоров, в HTML-документе обычно игнорируется символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобочитаемости). Однако браузер разделяет абзацы только при наличии тега . Если вы не разделите абзацы тегом , ваш документ будет выглядеть как один большой абзац.

Выполните выравнивание абзацев разными стилями. Сравните полученные результаты.

Тег <IMG SRC="/путь/файл.jpg(.gif)"> позволяет поместить изображение в документе.

Тег изображения может также включать атрибут ALT вызывающий всплывающую подсказку, например:

картинка

Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя.
Задание 6

В документе «Абзацы» добавьте в каждый абзац (в начало, конец, середину абзаца) изображение из графического файла.
Выполните оборачивание различными способами в каждом абзаце.
Установите различные поля вокруг рисунков.
После каждого абзаца, с помощью тега
, продолжите текст произвольным способом.

Тег … используется для создания «бегущей строки».

Атрибуты бегущей строки задают стиль строки и характер движения:

WIDTH - ширина области, задается в процентах или в пикселях;

HIGHT - высота области, задается в процентах или в пикселях;

BGCOLOR - цвет фона.

BEHAVIOR – позволяет управлять свойствами движения текста, принимая разные значения:

behavior="scroll" - прокрутка текста, используется по умолчанию;
behavior="slide" - прокрутка текста с остановкой;
behavior="alternate" - движение от края к краю

DIRECTION - задает направление движения бегущей строки. Может принимать значения: left (по умолчанию), right, up, down.

LOOP - задает число пробегов строки. Если этот атрибут не указан или имеет значение "-1", то строка будет "бегать" бесконечно

SCROLLDELAY (т.е. "запаздывание пробега") определяет время между прорисовками строки (в миллисекундах). По умолчанию этот атрибут имеет значение 85.

SCROLLAMOUNT - скорость движения строки. Рекомендуется ставить скорость "1", в этом случае строка выглядит удобочитаемо и не дергается.

HSPACE - задает смещение в пикселах вправо от бегущей строки.

VSPACE - этот атрибут задает пустое пространство выше и ниже бегущей строки.
Задание 7

В документе «Абзацы» добавьте заголовок – Примеры форматирования текста.
Заголовок оформите виде бегущей строки.
Отформатируйте бегущую строку с параметрами отличными от установленных по умолчанию.

Контрольные вопросы:

Какие теги являются обязательными для любого HTML-документа?
Каким образом можно создавать HTML-документы?
Перечислите атрибуты тега BODY.
На что влияют атрибуты тега FONT?
Сколько уровней заголовков определено стандартом? Чем они отличаются?
В чем отличие физических и логических стилей форматирования шрифта?
Назовите атрибуты тега ALIGN, какая между ними разница?
Каким образом в HTML-документ добавляются изображения?
Какие атрибуты используются при форматировании «бегущей строки»?
Какие виды списков можно создавать в HTML-документе?

Литература:

Информатика. Базовый курс: учеб. пособие для студ. высш. техн. учеб. заведений / под ред. С. В. Симоновича. - 2-е изд. - СПб. : Питер, 2006. - 639 с. : ил.
Гарнаев, А. Ю. Excel, VBA, Internet в экономике и финансах: практ. руководство/ А. Ю. Гарнаев. - СПб. : БХВ-Петербург, 2006. - 796 с. : ил.
Соловьева, Л. Ф. Сетевые технологии: учеб.-практикум / Л. Ф. Соловьева. - СПб. : БХВ-Петербург, 2005. - 398 с. : ил.

Тема 3: Создание гипертекстовой структуры (3ч)
Цель: разработка структуры web-узла, создание системы навигации
Задачи обучения:

разработка структуры web-узла;
изучение средств создания гиперссылок;
создание документа с локальной навигацией;
создание глобальной навигации;
закрепление навыков по оформлению и форматированию html-документов.

Учебный материал

Гипертекстовые ссылки являются ключевым компонентом, делающим Web привлекательным для пользователей. Добавляя гипертекстовые ссылки, создают набор документов связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно. Ссылки позволяют при помощи нажатия кнопки мыши быстро переходить от одного документа к другому не задумываясь о его адресе. Возможно использовать ссылки ссылки:

на удаленный HTML-файл;
на некоторую точку в этом же документе;
на любой файл, не являющийся HTML-документом.

Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например, запрашивать фал по FTP-протоколу для отображения его браузером.

с помощью гиперссылок организуется навигация по web-документам. Различают локальную и глобальную навигацию. Локальная навигация позволяет обращаться к определенному фрагменту документа. Глобальная – связывать отдельные документы.
В HTML переход от одного фрагмента текста к другому задается с помощью тега <A>…</A>, который может иметь следующий вид:

выделенный фрагмент

Например: Перейти к оглавлению

Атрибуты тега <A>:

HREF - имя документа (URL-адрес), к которому осуществляется переход. URL-адрес может быть абсолютным и относительным. Абсолютный адрес полностью определяет компьютер, каталог и файл, в котором находится документ. Относительный URL-адрес файла указывает на местонахождение документа относительно того документа, в котором находится ссылка.

TITLE - задает текст, всплывающей подсказки.

TARGET - указывает, куда должна загружаться вызываемая страничка. Если указать TARGET=_blank, (“main”) то браузер загрузит вызываемую страничку в новое окно. Если этот атрибут опустить, то страница загрузится в текущее окно.
Если подготовленная к публикации группа HTML-документов, ссылающихся друг на друга по имени файла и находится в одном каталоге, то вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере. Таким образом, появляется возможность разрабатывать целые коллекции документов без подключения к Internet, и только после окончательной готовности, подтвержденной испытаниями, помещать коллекции документов в Internet целиком.

В качестве ссылки можно использовать текст или графику.

Гипертекстовые ссылки в HTML делятся на контекстные гипертекстовые ссылки и общие. Контекстные ссылки вмонтированы в тело документа, в то время как общие ссылки связаны со всем документом в целом и могут быть использованы при просмотре любого фрагмента документа.

При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри этого документа. Для осуществления такого перехода необходимо создать в документе, к которому будет задан переход, некоторую опорную точку – метку.

В коде документа, куда будет осуществляться переход, нужно создать метку, т. е. ввести фрагмент документа. При этом фрагмент никак не будет выделен в тексте документа.

Затем в файле откуда переход будет выполнятся, следует определить переход на эту метку: <A HREF="адрес_документа#имя_метки">фрагмент документа</A>

Переход к метке можно определять и внутри одного документа. На практике это очень удобно при использовании больших документов. В начале документа можно поместить оглавление, состоящее из ссылок на анкеры, расположенные в заголовках разделов документа.
Задание 1

Создайте HTML-документ с заголовком «Обзор дизайнерских программ».
Текст используйте из файла «Обзор.doc».
Оформите текст соответствующими рисунками, примените различные эффекты отекания и табуляции.
Отформатируйте заголовки (размер, цвет, начертание).
Для оформления документа используйте горизонтальные линии.
Выполните дизайн общего заголовка. Создайте бегущую строку.
После текста введения создайте список программ, упоминающихся в тексте.
Создайте локальную навигацию на основе списка программ.
Проверьте корректность работы.
Измените предустановленный цвет ссылок.

Задание 2

Создайте HTML-документ с заголовком «Времена года».
Поместите в него таблицу из двух столбцов без обрамления. В первый столбец поместите рисунки из файлов: Зима.jpg, Весна.jpg, Лето.jpg, Осень.jpg. Во второй столбец введите подписи к рисункам. Текст выровняйте по центру ячейки.
Примените выравнивание таблицы по центру.
Настройте гиперссылки на рисунки для перехода к файлам с соответствующим текстом.
Проверьте корректность работы.

Контрольные вопросы:

Для чего используются гиперссылки?
На какие ресурсы можно использовать ссылки в HTML?
Для чего используется локальная навигация?
В чем заключается назначение глобальной навигации?
Какой тег применяется для создания гиперссылки?
Какие атрибуты используются при создании гиперссылки?
Какие используются структуры сайтов?
Как указать URL-адрес ресурса при вызове гиперссылки?
Как настроить открытие гиперссылки в отдельном окне?
Как создать метку в документе?

Литература:

Информатика. Базовый курс: учеб. пособие для студ. высш. техн. учеб. заведений / под ред. С. В. Симоновича. - 2-е изд. - СПб. : Питер, 2006. - 639 с. : ил.
Гарнаев, А. Ю. Excel, VBA, Internet в экономике и финансах: практ. руководство/ А. Ю. Гарнаев. - СПб. : БХВ-Петербург, 2006. - 796 с. : ил.
Соловьева, Л. Ф. Сетевые технологии: учеб.-практикум / Л. Ф. Соловьева. - СПб. : БХВ-Петербург, 2005. - 398 с. : ил.

Раздел 2. Выполняемые сценарии (12ч)

1 2 3 4 5 6 7 8

	Учебно-методический комплекс по дисциплине сд. 08 Информационные... Учебно-методический комплекс по дисциплине «Информационные технологии в профессиональной деятельности» составлен в соответствии с...		Учебно-методический комплекс по дисциплине «Маркетинг» Учебно-методический комплекс предназначен для студентов очной формы обучения, содержит план лекционных и практических занятий, рекомендации...
	Учебно-методический комплекс по дисциплине «Маркетинг» Учебно-методический комплекс предназначен для студентов заочной формы обучения, содержит план лекционных и практических занятий,...		Учебно-методический комплекс по дисциплине «Языки и среды реализации web -приложений» Учебно-методический комплекс предназначен для студентов заочной формы обучения, содержит план лекционных и практических занятий,...
	Учебно-методический комплекс по дисциплине «Деньги, кредит, банки» Учебно-методический комплекс рекомендован к изданию кафедрой «Банковское дело» и утвержден Учебно-методическим советом (протокол...		Учебно-методический комплекс по дисциплине «уголовное право» Учебно-методический комплекс по дисциплине «уголовное право» : учебно-методическое пособие / составитель А. М. Жуков. – Тольятти...
	Учебно-методический комплекс по дисциплине «Гештальт-психология» Учебно-методический комплекс предназначен для бакалавров очной формы обучения, содержит учебно-тематический план, учебную программу,...		Учебно-методический комплекс по дисциплине сапр вагоноремонтного производства Дисциплина входит в региональный компонент цикла дисциплин специализации и является обязательной для изучения
	Учебно-методический комплекс по дисциплине «Электронный бизнес» Методический комплекс включает учебную программу курса, планы проведения занятий, список основной и дополнительной рекомендуемой...		Учебно-методический комплекс по дисциплине «Программирование на языках высокого уровня (яву)» Учебно-методический комплекс (умк) составлен на основании гос впо и учебного плана Улгту специальности (направления) 23010165 «Вычислительные...
	Учебно-методический комплекс по дисциплине «Инструментальные средства в электронном бизнесе» Методический комплекс включает учебную программу курса, планы проведения занятий, список основной и дополнительной рекомендуемой...		Учебно-методический комплекс по дисциплине «Инструментальные средства в электронном бизнесе» Методический комплекс включает учебную программу курса, планы проведения занятий, список основной и дополнительной рекомендуемой...
	Учебно-методический комплекс по дисциплине «Уголовное право часть особенная» Учебно–методический комплекс по дисциплине «Уголовное право часть особенная» подготовлены в соответствии с требованиями Государственного...		Учебно-методический комплекс дисциплины по дисциплине «Политология» Учебно-методический комплекс составлен в соответствии с требованиями государственного образовательного стандарта высшего профессионального...
	Учебно-методический комплекс по дисциплине опд. В. 01 Современные... Настоящий учебно-методический комплекс разработан для курса по выбору «стфо: профильное обучение литературе», который изучается студентами...		Учебно-методический комплекс по дисциплине «сенсорный анализ продовольственных товаров» Учебно-методический комплекс предназначен для освоения программы по дисциплине «Сенсорный анализ продовольственных товаров» специальности...

Учебно-методический комплекс дисциплин по дисциплине «Веб-дизайн»

Похожие: