Web-дизайн – проектная деятельность по созданию средствами web-технологий информационной архитектуры web-сайта

Функции web-сайта:
информирование и привлечение пользователей;
выполнение каких-либо операций: интернет-банк, платежные

2. Технологии создания web-сайта

Статические сайты и web-страницы – это сайты, сделанные по классической технологии

Динамические сайты и Web-страницы.
Не существуют в неизменном виде на сервере,

Достоинство - интерактивность:
проверка правильности заполнения полей;
ввод запросов;
поиск

Правила при создании физической (файловой) структуры сайта:
Имена директорий, документов HTML и

Простая Web-страница создается в текстовом редакторе (Notepad++ или др.) как текстовый

3. Инструментальные средства для создания web-сайтов

Web-редакторы:
- простые (показывают только исходный код):

Графические редакторы: Adobe PhotoShop, Adobe Flash, CorelDRAW и др.

4. Структура HTML-документа
Файлы имеют расширение .htm или .html.
Содержат один тип управляющих

Объект doctype
Является сокращением от "Document Type Definition" ("Определение типа документа"),
используется для

Вариант Strict
Код не содержит элементов и атрибутов, помеченных W3C как «устаревшие»

Вариант Transitional
Код может содержать устаревшие теги, вариант введен в целях совместимости

Вариант Frameset
Аналогичен Transitional, но содержит также элементы для создания наборов фреймов.
Декларация

5. Структура HTML-элемента (локальное форматирование)

<[имя тега] [имя атрибута 1]=[”значение атрибута 1”]

Кавычки вокруг значения атрибута обязательны в тех случаях, когда значение это

Цвет в Web

1. Система шестнадцатеричного кодирования основана на трех компонентах –

Использование справочника по HTML

1. Создать документ с синим цветом фона белым

Использование справочника по HTML

2. Создать заголовок второго уровня с выравниванием по

Теги, не имеющие атрибутов

Рекомендуемый ресурс http://htmlbook.ru

6. Адресация в HTML
Абсолютная адресация не используется

Используется относительная адресация

Пример 1
Изображение

Пример 2
HTML-документ расположен на один уровень выше, чем изображение

Пример 3
HTML-документ расположен на два уровня выше, чем изображение

Пример 4
HTML-документ расположен на один уровень ниже, чем изображение

Пример 5
HTML-документ расположен на два уровня ниже, чем изображение

Пример 6

7. Гиперссылки

Можно разделить на 3 категории:
1. Внешняя – ссылка на web-страницу,

здесь

Структура гиперссылки

Конечный якорь

Исходный якорь

Виды адресов

Абсолютный адрес - это полный адрес в Internet.

Примеры относительной адресации

<а href="doc2.html">

1. Переход на другой документ на одном

<а href="#glava1">Глава 1 – переход на конкретный фрагмент текущего документа.

CSS – Cascading Style Sheets (иерархические стилевые спецификации или каскадные таблицы

Структура CSS-элемента
селектор {стилевое свойство 1: значение;
стилевое свойство 2: значение; …
стилевое

Способы включения таблиц стилей в HTML-документ

Внешняя стилевая спецификация
Внедренные стилевые таблицы
Внутренние стили

Внешняя стилевая спецификация

Определяет стиль всего сайта.

Является текстовым файлом с расширением css.

Внедренные стилевые таблицы

В заголовок документа в теге помещаются теги , а внутри этой пары тегов вводятся стилевые правила.

Внутренние стили

Применяется к конкретному HTML-элементу внутри тега при помощи атрибута

Класс без указания имени элемента.
Например:
.my{color:#00ff00}
Применяется к разным элементам.
Например:

Cтиль для специфического элемента
Любому элементу можно присвоить идентификатор ID, и затем

Специальные элементы
Псевдокласс – специальный селектор, определяющий, как выглядит HTML-элемент в определенный

Иерархия и каскадность в стилевых спецификациях
Иерархия – соподчинение.
Соподчинение таблиц стилей.
Наибольший приоритет

9. Установка к следующему семестру

Контрольная работа (файл МУ_КР_Web-дизайн_КТ_испр.doc) включает одно задание

В следующем семестре – дифференцированный зачет (зачет с оценкой).
Зачет состоит из