- •Фгбоу впо «Башкирский государственный педагогический университет
- •2. Требования к уровню освоения содержания дисциплины «Технологии Internet (Web-мастерство)»
- •3. Объем дисциплины «Технологии Internet (Web-мастерство)» и виды учебной работы
- •4. Содержание дисциплины «Технологии Internet (Web-мастерство)»
- •4.1. Разделы дисциплины и виды занятий
- •4.2.Содержание разделов дисциплины «Технологии Internet (Web-мастерство)»
- •5. Учебно-методическое обеспечение дисциплины
- •6.5. Система подготовки материалов и методических разработок
- •7. Содержание итогового и промежуточного контроля
- •7.1. Перечень примерных контрольных вопросов и заданий для самостоятельной работы
- •7.2 Теоретические вопросы к зачету.
- •Практические задания
- •8. Методические рекомендации по организации изучения дисциплины
- •8.1. Методические рекомендации для преподавателей
- •9.Учебная практика по дисциплине «Технологии Internet (Web-мастерство)» не предусмотрена.
- •2.1. Конспекты лекций по дисциплине «Технологии Internet (Web-мастерство)»
- •2.1. Язык гипертекстовой разметки html.
- •2.1.1. Основные теги.
- •Комментарии
- •Общий вид html-документа
- •2.1.2. Обычный текст или абзац
- •Обычный текст или абзац в сеpедине стpоки
- •2.1.3. Ссылки
- •Ссылки на главы дpугих документов
- •2.1.4. Списки
- •Ненумеpованный список
- •Нумеpованный список
- •2.1.5. Физические стили
- •Наложение различных стилей
- •2.1.6. Рисунки
- •Составные картинки
- •Элемент map
- •2.1.7. Таблицы
- •2.1.8. Формы html
- •Атрибут checkbox
- •Атрибут image
- •Атрибут password
- •Атрибут radio
- •Атрибут reset
- •Атрибут select
- •Атрибут submit
- •Атрибут textarea
- •2.1.9. Фpеймы
- •3.1. Базовый синтаксис css
- •3.3. Применение свойства цвета.
- •Свойство 'background-color'
- •3.4. Фоновые изображения [background-image]
- •3.5. Семейство шрифта [font-family]
- •3.6. Боксовая модель
- •Боксовая модель в css
- •3.7.Принципы css-позиционирования
- •Абсолютное позиционирование
- •Относительное позиционирование
- •4.1. Цвет и форма.
- •4.2. Модульная сетка в дизайне.
- •4.3. Типы сайтов. Модели организации сайта.
- •4.3.1. Линейная организация
- •4.3.2. Решетка
- •4.3.3. Иерархия
- •4.3.4. Паутина
- •5.1. Теория навигации
- •5.1.1 Размещение элементов навигации
- •5.1.2. Правила навигации
- •5.1.3. Основные приемы создания ссылок
- •5.2. Программы для создания web-страниц
- •6.1. Изображения в Интернет: технологии gif, jpeg, png, Flash.
- •6.1.1. Форматы изображений
- •6.1.2. Формат gif
- •6.1.3. Формат jpeg
- •6.1.4. Формат png
- •6.1.6. Другие форматы изображений
- •6.2. Анимация
- •6.3. Звук
- •6.4 Видео
- •7.1. Технологии программирования
- •7.2. Программирование на стороне клиента
- •7.2. Синтаксис языка JavaScript и основы программирования на нем
- •8.1. Технологии, работающие на стороне сервера
- •8.2. Сценарии на стороне сервера
- •8.3. Технологии создания интерактивных страниц: asp, php, ssi
- •8.4. Серверные программные интерфейсы приложений
- •8.4. Сетевые и сопутствующие протоколы
- •8.4.3. Адресация: url/uri/urn/urc
- •9.4 Работа с формами
- •9.5. Рнр: выборочная загрузка
- •9.6 Рнр: гостевая книга
- •10.1. Базовая модель Web-процесса
- •10.2. Планирование сайта
- •I определение цели
- •2. Определение аудитории
- •3. Профилирование пользователей
- •4. Требования к сайту
- •II план сайта
- •III разработка дизайна
- •Логотип
- •Навигатор по сайту
- •IV создание пробного сайта
- •V тестирование
- •10.3 Публикация и продвижение сайта
- •Упражнение 2 – создание списка
- •Упражнение 3 - вставка рисунка
- •Упражнение 4 – гиперссылки
- •Лабораторная работа № 2 Создание home page средствами Notepad (папка web)
- •Последовательность выполнения работы
- •Лабораторная работа № 3
- •Сведения о пользователе
- •Лабораторная работа № 4 Создание домашней странички (папка web)
- •Лабораторная работа № 5 JavaScript
- •Лабораторная работа № 6 JavaScript Создание и обработка форм в электронных документах, их назначение.
- •Лабораторная работа № 7 Тема «Использование Flash-технологий для создания Web-сайтов»
- •Задания для самостоятельной работы
- •Упражнение 4 Создание анимационного ролика «Шарик летит по улице города»
- •Упражнение 6 Создание собственных кнопок
- •Задания для самостоятельной работы
- •Лабораторная работа № 8. Создание web-сайта средствами редактора Dreamweaver (папка web-6)
- •5 Проверить корректность работы файла стилей!
- •Лабораторная работа №9 по технологиям Internet.
- •Лабораторная работа 10. Введение в язык php
- •Лабораторная работа 11. Обработка данных форм
- •Лабораторная работа 12. Массивы
4.1. Цвет и форма.
Цвета используются в Web не только для того, чтобы просматривать было интереснее, но и для того, чтобы проинформировать, развлечь пользователя или вызвать его подсознательные ощущения. Но из-за ограничений сегодняшней технологии браузеров применение цвета в Web может оказаться сложной задачей. Цветовоспроизведение далеко от совершенства, а воздействие Web-цветов на пользователей может не всегда соответствовать пpeдположениям.
Можно указать цвет фона документа; цвет текста, используемый по умолчанию; цвета ссылок; цвет шрифтов, используемых в документе; цвет фона в таблицах. Следующие несколько страниц представляют собой обзор использования атрибутов, задающих цвет для HTML-элементов.
Два основных определения цвета для всего документа могут быть заданы в атрибутах элемента <body>:
<body bgcolor="#FFFFFF" text="#000000">
Данный код задает белый цвет фона для всего документа и черный цвет для текста (если не указано иное). Кроме того, в элементе <body> можно задать три атрибута, определяющих цвета текстовых ссылок в различных состояниях:
<body link="blue" alink="red" vlink="purple">
Атрибут link определяет цвет еще не посещенной ссылки в документе. Если вы задали цвет фона, например черным, для ссылки лучше использовать более светлый тон, нежели стандартный синий. Атрибут alink определяет цвет ссылки в момент щелчка по ней. Этот момент трудно заметить, однако его можно использовать для создания эффекта вспышки. Иногда может быть более приемлемым задать атрибуту alink значение, совпадающее со значениями атрибутов link или viink. Атрибут viink определяет цвет уже посещенной ссылки (в большинстве браузеров стандартное значение purple — фиолетовый). Многие авторы задают атрибуту viink значение, соответствующее красному цвету, который позволяет дать стандартное цветовое объяснение ссылке. Используя рассмотренные атрибуты, вы можете создать белую страницу с темно-зеленым текстом, красными ссылками и светло-розовым цветом посещенных ссылок при помощи кода, приведенного ниже:
<body bgcolor="#FFFFFF" text="#000800"
link="#FF0000" vlink="#FF00FF" alink="FF0000">
Старайтесь не применять для ссылок цвета, которые могут смутить ваших читателей. Использование для ссылок цветов "наоборот", например синие — посещенные, красные — непосещенные, может запутать пользователя, привыкшего к обратному сочетанию цветов. Несмотря на то, что едва ли автор
Пользуясь цветами, дизайнеры, как правило, пытаются соблюсти баланс. Избыток цвета может слишком раздражать и наводить беспорядок, тогда как его недостаток может наводить скуку. При употреблении цвета мы стремимся к гармонии; другими словами, мы делаем цвет привлекательным. Хотя может показаться, что это скорее дело вкуса, теория цвета давно продемонстрировала, что некоторые цветовые сочетания удаются, а другие - нет.
Самые базовые советы по искусному применению цвета таковы:
в пределах одной страницы следует пользоваться лишь несколькими цветами;
не стоит задействовать чрезмерное количество цветов;
теплые и холодные цвета следует употреблять вместе.
Здесь можно упомянуть несколько простых схем нахождения приятных сочетаний цветов с помощью цветового круга (Рисунок 4.1.). Простейший способ сделать это — выбрать цвета, соседствующие друг с другом на цветовом круге. Эту схему называют аналоговой. Цвета, которые на цветовом круге размещаются прямо противоположно друг другу, также хорошо сочетаются; они считаются дополняющими. Для получения разновидностей можете попробовать приблизительно дополняющие цвета, или три цвета, которые на цветовом круге формируют равносторонний треугольник. Такая цветовая схема именуется триадической. Диаграммы цветовой гармонии, иллюстрирующие вышеприведенные принципы, показаны на рисунке, а примеры находятся по адресу www.webdesignref.com/ examples/colorharmony.htm.
Наконец, простейшей гармонией является сочетание чистого черного, чистого белого и еще одного цвета. Она не очень интересна, но надежна и хорошо выглядит, особенно при использовании живого цвета, который будет контрастировать с нейтральными черным и белым.
Рисунок 4.1. Примеры схем гармонии цветов
Цвета, которые на цветовом круге размещаются прямо противоположно друг другу также хорошо сочетаются.