- •Курс лекций по дисциплине «Web-дизайн»
- •Лекция 1 Тема: Основные понятия Web-дизайна
- •Понятие web- дизайна
- •Краткие итоги
- •Лекция 2 Тема: Технологии web-дизайна
- •Логическая и физическая структура сайта
- •Ширина документа
- •Фиксированный макет
- •«Резиновый» макет
- •Высота документа
- •Объекты веб-страницы прямоугольны
- •Активное использование рисунков
- •Разрезание изображения на фрагменты
- •Применение фонового рисунка
- •Картинки вместо текста
- •Одноколонная сетка
- •Двухколонная сетка
- •Трехколонная сетка
- •Лекция 3 Тема: Принципы компоновки и алгоритм создания web- сайта
- •Принципы компоновки web- сайта
- •Статическая компоновка страницы
- •Динамическая компоновка страницы
- •Элементы web-страницы
- •Лекция 4 Тема: Графические изображения. Особенности веб-графики
- •Графика для web
- •Возможности оптимизации
- •Лекция 5 Тема: Структура html документа
- •Основные понятия html
- •Структура html-документа
- •Название документа title
- •Пример простого html-документа
- •Пример использования фонового рисунка
- •Лекция 6 Тема: Цветовые спецификации. Графические элементы
- •Цветовые спецификации
- •Символьная нотация
- •Соответствие формата rgb и символьной нотации
- •. Графические элементы
- •Горизонтальные линии
- •Рисунки
- •Лекция 7 Тема: Ввод текстовой информации
- •Управление переводом строки
- •Маркированный список
- •Нумерованный список
- •Список определений
- •Форматирование текста
- •Контейнер div
- •Отступы
- •Таблицы
- •Лекция 8 Тема: Гиперссылки
- •Универсальный идентификатор ресурсов url
- •Правила записи ссылок
- •Внутренние ссылки
- •Ссылки на документы различных типов
- •Лекция 9 Тема: Создание Web- узла с помощью мастера (редактор Front Page).
- •Создание web-узла с помощью мастера
- •Редактирование содержимого общих областей.
- •Свойства страницы
- •Проектирование и создание таблицы
- •Лекция 10 Тема: Основные принципы работы с dw
- •Запуск редактора
- •Выбор интерфейса
- •Определение и настройка сайта
- •Лекция 11 Тема: Работа над web-сайтом
- •Создание новой веб-страницы
- •Лекция 12 Тема: Использование графических изображений
- •Вставка графики на веб-страницу
- •Лекция 13
- •Линейки
- •Дополнительная вспомогательная разметка
- •Таблицы
- •Создание таблиц
- •Граница таблицы
- •Форматирование таблицы
- •Табличный дизайн веб-страницы
- •Задание фреймовой структуры веб-страницы
- •Заполнение фреймов
- •Лекция 15 Тема: Создание и использование форм
- •Лекция 16 Тема: Использование шаблонов
- •1 Способ. Создание шаблона на основе существующей веб-страницы
- •2 Способ Создание нового шаблона
- •Лекция 17 Тема: Свободно позиционируемые элементы
- •Лекция 18 Тема: Использование Web-анимации
- •Лекция 19 Тема: Способы размещения сайтов в сети Интернет
Пример простого html-документа
<HTML>
<HEAD>
<TITLE>Приветствие</TITLE>
</HEAD>
<BODY>
<P>Добро пожаловать!</P>
</BODY>
</HTML>
|
|
|
|
Этот документ отобразится в броузере так:
В этом примере обратите внимание на то, куда выводится броузером название документа в элементе TITLE.
Пример использования фонового рисунка
<HTML>
<HEAD>
<TITLE>Приветствие</TITLE>
</HEAD>
<BODY BACKGROUND="smail.gif">
<P>Добро пожаловать!</P>
</BODY>
</HTML>
|
|
|
|
Этот документ отобразится в броузере так:
Вопросы для закрепления.
Дайте понятия элемента HTML, тега, атрибутов.
Что такое браузер?
Каковы особенности и правила HTML-документа?
Какие элементы HTML входят в обязательную структуру HTML-документа?
Для чего используется элемент BODY, и какие он имеет атрибуты?
Домашние задание: Создать две web- страницы в редакторе блокнот, используя язык HTML, с информацией о себе.
Лекция 6 Тема: Цветовые спецификации. Графические элементы
Цели: Ознакомить учащихся с основными цветовыми спецификациями ;использование цветовых обозначений с помощью символьной нотации.
План урока.
Организационный момент.
Изложение нового материала.
1) Цветовые спецификации
2) Символьная нотация
3) Добавление графических объектов с помощью языка HTML
Закрепление изученного.
Итог урока.
Ход урока.
Организационный момент.
Отметить присутствующих. Сообщить тему урока. Настроить учащихся на восприятие материала.
Изложение нового материала.
Цветовые спецификации
Для определения цвета различных элементов HTML-документа необходимо указать значение соответствующих атрибутов. Указывать значения этих атрибутов можно двумя способами:
определять цвет в формате RGB;
определять цвет, используя символьную нотацию
Формат RGB
Формат RGB – это система указания цвета, которая базируется на смешении трех основных цветов: красном (RED), зеленом (GREEN) и синем (BLUE). Итоговый цвет определяется цифрами в шестнадцатеричном коде. Для каждого цвета задается шестнадцатеричное значение в пределах от 0 до FF, что соответствует диапазону 0-255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Например, число #800080 обозначает фиолетовый цвет. Указывая цвет в формате RGB, можно определить более шестнадцати миллионов цветовых оттенков.
Символьная нотация
Задание цвета в формате RGB имеет один недостаток – необходимо помнить совокупности цифр для указания цвета. Этого недостатка лишена символьная нотация. Можно указывать название цвета на английском языке. Но у этого способа указания цвета тоже есть недостаток – определено всего шестнадцать имен цветов.
Соответствие формата rgb и символьной нотации
Ниже приведена таблица соответствий указания цвета в символьной нотации и формате RGB.
Символьная нотация |
Формат RGB |
Цвет |
Black |
#000000 |
Черный |
Silver |
#C0C0C0 |
Серебро |
Gray |
#808080 |
Серый |
White |
#FFFFFF |
Белый |
Maroon |
#800000 |
Темно-бордовый |
Red |
#FF0000 |
Красный |
Purple |
#800080 |
Фиолетовый |
Fuchsia |
#FF00FF |
Розовый |
Green |
#008000 |
Зеленый |
Lime |
#00FF00 |
Известь |
Olive |
#808000 |
Оливковый |
Yellow |
#FFFF00 |
Лимонный |
Navy |
#000080 |
Темно-синий |
Blue |
#0000FF |
Синий |
Teal |
#008080 |
Темно-бирюзовый |
Aqua |
#00FFFF |
Бирюзовый |
Таким образом, строка TEXT="#008000" и строка TEXT="Green" в теге <BODY> одинаково определяют цвет шрифта – зеленый.