Слайд 1Введение в HTML
(основы Web-мастерства)
Курс лекций
Санкт-Петербург
– 2006 –
Слайд 2Содержание
Основы Web-дизайна
Документы HTML
Графика в документе
HTML
Таблицы в документе HTML
Применение каскадных таблиц
стилей
Слайд 3Основы Web-дизайна
Лекция 1
Санкт-Петербург
– 2006 –
Слайд 4Определение Web-дизайна
Web-дизайн — это процесс создания художественного произведения, размещаемого в
качестве ресурса всемирной информационной сети Интернет.
Будучи творческим процессом, он
отражает способности автора, и в то же время не имеет ограничений в средствах его самовыражения.
Слайд 5Инструментарий Web-дизайна
Среда разработки документов HTML
Редактор векторной графики
Редактор растровой графики
Обозреватели
IE 4.0 или выше и Netscape Navigator версии 4.01 или
выше
Программа GIF анимации
Программы оптимизации растровых изображений
Программа фрагментатор графики
Слайд 6Основные положения (1)
Отображение сайта для экранного разрешения 640х480
с цветовой
палитрой 256 цветов.
Максимально возможное число графических элементов в формате GIF
(минимум JPG)
Идентичное отображение в различных обозревателях (IE 4, NN 4)
Минимизация объема файлов страниц и изображений
Слайд 7Основные положения (2)
Элементы навигации по сайту всегда должны быть доступны,
в том числе при отображении только текста страницы
Исполнение страниц в
едином стилевом решении
Применение корректных цветовых схем
(не более трех разных цветов)
Использование не более трех различных шрифтов на странице
Слайд 8Структура Web-сайта
Стартовая страница
Расширения файлов страниц .html
Папки для графики
Имена папок
и файлов в строчном регистре латинскими буквами
Документирование обновления страниц
Слайд 9Логическая структура
http://www.mysite.ru
Слайд 11Динамическая и статическая компоновка Web-сайта
Статическая компоновка страницы позволяет добиться
идентичности ее отображения во всех обозревателях, но оставляет пустое поле
при высоком разрешении экрана компьютера.
Динамическая компоновка растягивает документ на всю ширину экрана, что может приводить к неадекватности отображения в разных обозревателях.
Слайд 12Компоновка Web-страницы
Левое позиционирование элементов навигации
Правое позиционирование элементов навигации
Верхнее позиционирование элементов
навигации
Смешанная компоновка
Слайд 13Заголовок
Логотип
Рекламный баннер
Текстовое поле
Адрес электронной почты, авторское право
Элементы навигации
Слайд 14Заголовок
Логотип
Рекламный баннер
Текстовое поле
Адрес электронной почты, авторское право
Элементы навигации
Слайд 15Заголовок
Рекламный баннер
Текстовое поле
Адрес электронной почты, авторское право
Элементы
навигации
Счетчик посещений
Элементы
навигации
Слайд 16Заголовок
Заголовок
Логотип
Рекламный баннер
Текстовое поле
Адрес электронной почты, авторское право
Элементы навигации
Счетчик посещений
русский
english
Элементы
навигации
Выбор
языка
Анонсы
Рубрик
(текст)
Слайд 1710 советов дизайнеру
Холмогоров В. Основы Web-мастерства. Учебный курс. СПб.: Питер,
2001. - 352 с.
Шафран Э. Создание Web-страниц. Самоучитель. СПб.: Питер,
1999. - 320 с.
Крейнак Дж., Хебрейкен Дж. Интернет. Энциклопедия. СПб.: Питер, 1999. - 560 с.
Слайд 18Документы HTML
Лекция 2
Санкт-Петербург
– 2006 –
Слайд 19Структура документа HTML
Основной код
Документ HTML
Заголовок документа
Внешний заголовок
Тело документа
Слайд 20Типы тегов
обрабатываемое значение
Слайд 21Обязательные теги HTML
Содержимое
Содержимое
Внешний заголовок
Основной
код
Слайд 24Теги HTML
Предварительно отформатированный
текст
Слайд 25Теги абзаца в HTML
Текст, заключаемый в абзац
RIGHT
LEFT
CENTER
JUSTIFY
Слайд 26Теги выравнивания в HTML
Часть кода HTML
Часть кода HTML
Часть кода HTML
Слайд 27Теги переноса в HTML
Текст одной строки,
а это текст
следующей строки
Строка без переносов
Слайд 28Теги начертания в HTML
Текст полужирным шрифтом
Текст курсивным шрифтом
Текст полужирным
шрифтом
Текст курсивным шрифтом
Слайд 29Теги эффектов в HTML
Подчеркнутый текст
Зачеркнутый текст
Подстрочный текст
Надстрочный текст
Увеличение размера шрифта
Текст
Слайд 30Теги шрифта в HTML
Текст для вывода
FACE="Arial" SIZE="+2"
COLOR="#0000FF">
Отрывок текста
Слайд 32Атрибуты тега
Тело
документа HTML
Слайд 33Заголовки
Текст заголовка
где n=1…6
Это текст заголовка
на странице
Слайд 34Маркированные списки
Вхождение1
Вхождение2
Вхождение3
…
Вхождение n
Слайд 35Нумерованные списки
Вхождение1
Вхождение2
Вхождение3
Вхождение4
Слайд 36Гиперссылки
Текст гиперссылки
/A>
Текст гиперссылки
/A>
Слайд 37Ссылки на разделы
Ключевое слово или заголовок раздела
/A>
Текст ссылки
/A>
Слайд 39Графика в документе HTML
Лекция 3
Санкт-Петербург
– 2006 –
Слайд 42Графические форматы в Интернет
GIF – Graphic Intergange Format
JPEG
– Joint Photographic Expert Group
PNG – Portable Network Graphics
Слайд 43Оптимизация графики
GifClean32
WebGraphic Optimizer
ShoeString Picture Dicer
Слайд 44Теги графики в HTML
ссылка на документ">
Слайд 45Атрибуты тега IMG
RIGHT
LEFT
CENTER
TOP
BOTTOM
MIDDLE
BASELINE
HSPACE=0
VSPACE=0
Слайд 46GIF - анимация
Ulead GIF Animator
Jasc Animation Shop
Adobe ImageReady
Macromedia Flash
Corel R.A.V.E.
GIF Movie Gear
Слайд 47Карты изображений в HTML
x2, y2"
ALT="альтернативный текст">
Слайд 48Карты изображений в HTML (2)
SHAPE=RECT COORDS="x1, y1, x2, y2"
- прямоугольник
с углами х1,у1 и х2,у2
SHAPE=CIRCLE COORDS="X, Y, R"
- круг с
центром Х,Y и радиусом R
SHAPE=POLY COORDS="x1, y1, x2, y2, …"
многоугольник с вершинами х1,у1,
х2,у2 и так далее вплоть до xN, yN
Слайд 50Ускорение загрузки графики
картинка">
pict1.jpg – уменьшенная копия,
pict2.jpg – файл изображения
Слайд 5104.10.01
доц. В.Н.Гаркуша
Таблицы в документе HTML
Лекция 4
Санкт-Петербург
– 2006 –
ALIGN="Значение"
VALIGN="Значение">
Содержимое
ячеек
Слайд 54Таблица с заголовком
Название
Заголовок1
Заголовок2
содержимое
Слайд 56Цвета в таблице
Содержимое таблицы
текст
Слайд 57Пример цветной таблицы
текст
текст
BGCOLOR=BLACK> текст
текст
Слайд 58Советы
задавайте значения ширины везде в одних и тех же
единицах
не оставляйте пустых ячеек (BR)
указывайте тип выравнивания
в таблице
явно задавайте ширину таблицы
явно указывайте все параметры ячеек, столбцов и таблицы в целом
Слайд 59Рисунки в таблице
alt="Эмблема кафедры">
Кафедра радиоэлектронных средств
(РЭС)
Слайд 60Фреймы
способ организации логических разделов на странице
каждый раздел отображает
отдельную страницу
переход на новую страницу происходит только в одном
из разделов
FRAMEBORDER="значение" NORESIZE>
Текст для броузера, не поддерживающего фреймы
Слайд 64доц. В.Н.Гаркуша
Применение каскадных таблиц стилей
Лекция 5
Санкт-Петербург
– 2006 –
Слайд 65Каскадные таблицы стилей
Задавая свойства стиля в файле
.css, подключают этот файл к html-документу, заставляя клиентский броузер считывать
значения параметров каждого компонента
Web-страницы из файла стиля.
Возможность подключить один и тот же файл к разным html-документам позволяет отказаться от необходимости назначения свойств каждого конкретного объекта.
Слайд 66Директивы и параметры CSS
Селектор -
НАЗВАНИЕ ЭЛЕМЕНТА
{свойство: значение;}
H1 {color: blue; font-size: 20 pt;}
Слайд 67Группировка селекторов CSS
H1, H2, H3, H4 {font-family: helvetica; color:
red; font-size: 30 pt;}
Группировка селекторов -
НАЗВАНИЕ ЭЛЕМЕНТА-1,
НАЗВАНИЕ ЭЛЕМЕНТА-2, ... НАЗВАНИЕ ЭЛЕМЕНТА-N {свойство: значение;}
Слайд 68Группировка параметров CSS
H1 {
font-family: helvetica;
font-style: italic;
font-size: 30 pt;
color:
black;}
Группировка селекторов -
НАЗВАНИЕ ЭЛЕМЕНТА {
Определение-1;
Определение-2;
...
Определение-N;}
Слайд 69Принцип наследования
BODY {
background: white;
color: black;
font-family: sans-serif;
font-size: 10 pt;
}
Вложенные теги наследуют признаки директив более высокого
уровня – "старших" тегов.
Следующая директива описывает единые параметры для всех видимых элементов web-страницы.
Слайд 70Свойства шрифта
font-size
H1 {font-size: 30 pt;}
H2 {font-size: 100 px;}
H3 {font-size:
60%; }
font-family
P {font-family: Arial Black URL('../fonts/arialblack.ttf'); }
Слайд 71Свойства шрифта (2)
font-variant
CAPTION {font-variant: small-caps;}
font-weight
STRIKE {font-weight: bold;}
font-style
EM {font-style: italic;}
Слайд 72Свойства текста
text-align
P {text-align: justify; }
text-decoration
P {text-decoration: none; }
text-indent
P {text-indent: 30pt;
}
line-height
P {line-height: 5px; }
Слайд 73Свойства текста (2)
text-transform
CAPTION {text-transform: capitalize; }
letter-spacing
P {letter-spacing: 3px; }
vertical-align
TD {vertical-align:
top; }
IMG {vertical-align: top-text;}
Слайд 74Свойства цвета и фона
background-image
BODY {background-image: URL(/images/picture.gif; }
background-color
H1 {background-color: #F00000; }
background-repeat
BODY
{background-repeat: no-repeat; }
Слайд 75Свойства цвета и фона (2)
background-position
BODY {background-position: 30cm 0cm} TD {background-position:
middle;}
background-attachment
BODY {background-attachment: scroll; }
Слайд 76Свойства границ
padding
TABLE {padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 15px;}
margin
P {margin-left: 20px;}
IMG{
margin-top:
10mm;
margin-left: 15mm;
margin-bottom: 10mm;}
Слайд 77Свойства границ (2)
border-color
TABLE {border-color: blue;}
border-width
TD {
border-top-width: 2px;
border-bottom-width: 2px;
border-right-width: 1mm;
border-left-width :
1mm;}
Слайд 78Свойства списков
list-style-position
LI {list-style-position: inside;}
list-style-type
LI {list-style-type: square;}
list-style-image
LI {list-style-image: URL(/images/marker.gif);}
Слайд 79Вспомогательные свойства
white-space
P {white-space: pre;}
width height
IMG {height: 80%;
width: 120px;}
float
TD {float: left;}
clear
IMG
{clear: both;}
display
IMG {display: block;}
Слайд 80Классы
НАЗВАНИЕ ЭЛЕМЕНТА.имя класса
{свойство: значение;}
P.myclass {text-align: justify;}
текст формата
директив CSS
Текст формата по умолчанию
Слайд 81Классы (2)
.имя класса {свойство: значение;}
.myclass {color: green;}
текст зеленого
цвета
>Текстовый заголовок
Слайд 82Идентификаторы
НАЗВАНИЕ ЭЛЕМЕНТА#имя идентификатора
{свойство: значение;}
P#qwerty {text-align: left;}
текст, позиционированный
по левой границе экрана
Текст формата директив CSS
Слайд 83Идентификаторы (2)
#имя идентификатора
{свойство: значение;}
#qwerty {color: #00FF00;}
текст заголовка
Слайд 84Интеграция в web-страницу
Заголовок страницы
P {text-align: justify;}
H1 {color: green;}
Текст документа
Слайд 85Подключение файла CSS
Заголовок страницы
@import URL(../css/file.css);
Слайд 86Подключение файла CSS (2)
Заголовок страницы
Слайд 87Применение CSS
Заголовок страницы
P{text-align: justify;}
H1{color: green;}
- - >