Разделы презентаций


Введение в HTML (основы Web -мастерства)

Содержание

Содержание Основы Web-дизайна Документы HTML Графика в документе HTML Таблицы в документе HTML Применение каскадных таблиц стилей

Слайды и текст этой презентации

Слайд 1Введение в HTML (основы Web-мастерства)
Курс лекций

Санкт-Петербург
– 2006 –

Введение в HTML  (основы Web-мастерства) Курс лекцийСанкт-Петербург– 2006 –

Слайд 2Содержание
Основы Web-дизайна
Документы HTML
Графика в документе

HTML
Таблицы в документе HTML
Применение каскадных таблиц

стилей

Содержание Основы Web-дизайна Документы HTML Графика в документе HTML Таблицы в документе HTML Применение каскадных таблиц стилей

Слайд 3Основы Web-дизайна
Лекция 1

Санкт-Петербург
– 2006 –

Основы Web-дизайна Лекция 1Санкт-Петербург– 2006 –

Слайд 4Определение Web-дизайна
Web-дизайн — это процесс создания художественного произведения, размещаемого в

качестве ресурса всемирной информационной сети Интернет.
Будучи творческим процессом, он

отражает способности автора, и в то же время не имеет ограничений в средствах его самовыражения.
Определение Web-дизайнаWeb-дизайн — это процесс создания художественного произведения, размещаемого в качестве ресурса всемирной информационной сети Интернет. Будучи

Слайд 5Инструментарий Web-дизайна
Среда разработки документов HTML
Редактор векторной графики
Редактор растровой графики
Обозреватели

IE 4.0 или выше и Netscape Navigator версии 4.01 или

выше
Программа GIF анимации
Программы оптимизации растровых изображений
Программа фрагментатор графики

Инструментарий Web-дизайна Среда разработки документов HTMLРедактор векторной графикиРедактор растровой графикиОбозреватели IE 4.0 или выше и Netscape Navigator

Слайд 6Основные положения (1)
Отображение сайта для экранного разрешения 640х480 с цветовой

палитрой 256 цветов.
Максимально возможное число графических элементов в формате GIF

(минимум JPG)
Идентичное отображение в различных обозревателях (IE 4, NN 4)
Минимизация объема файлов страниц и изображений
Основные положения (1)Отображение сайта для экранного разрешения 640х480  с цветовой палитрой 256 цветов.Максимально возможное число графических

Слайд 7Основные положения (2)
Элементы навигации по сайту всегда должны быть доступны,

в том числе при отображении только текста страницы
Исполнение страниц в

едином стилевом решении
Применение корректных цветовых схем (не более трех разных цветов)
Использование не более трех различных шрифтов на странице

Основные положения (2)Элементы навигации по сайту всегда должны быть доступны, в том числе при отображении только текста

Слайд 8Структура Web-сайта
Стартовая страница
Расширения файлов страниц .html
Папки для графики
Имена папок

и файлов в строчном регистре латинскими буквами
Документирование обновления страниц

Структура Web-сайта Стартовая страницаРасширения файлов страниц .htmlПапки для графикиИмена папок и файлов в строчном регистре латинскими буквамиДокументирование

Слайд 9Логическая структура
http://www.mysite.ru

Логическая структураhttp://www.mysite.ru

Слайд 10Физическая структура

Физическая структура

Слайд 11Динамическая и статическая компоновка Web-сайта
Статическая компоновка страницы позволяет добиться

идентичности ее отображения во всех обозревателях, но оставляет пустое поле

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

Слайд 12Компоновка Web-страницы
Левое позиционирование элементов навигации
Правое позиционирование элементов навигации
Верхнее позиционирование элементов

навигации
Смешанная компоновка

Компоновка Web-страницыЛевое позиционирование элементов навигацииПравое позиционирование элементов навигацииВерхнее позиционирование элементов навигацииСмешанная компоновка

Слайд 13Заголовок
Логотип
Рекламный баннер
Текстовое поле
Адрес электронной почты, авторское право
Элементы навигации

ЗаголовокЛоготипРекламный баннерТекстовое полеАдрес электронной почты, авторское правоЭлементы навигации

Слайд 14Заголовок
Логотип
Рекламный баннер
Текстовое поле
Адрес электронной почты, авторское право
Элементы навигации

ЗаголовокЛоготипРекламный баннерТекстовое полеАдрес электронной почты, авторское правоЭлементы навигации

Слайд 15Заголовок
Рекламный баннер
Текстовое поле
Адрес электронной почты, авторское право
Элементы
навигации
Счетчик посещений
Элементы
навигации

ЗаголовокРекламный баннерТекстовое полеАдрес электронной почты, авторское правоЭлементы навигацииСчетчик посещенийЭлементы навигации

Слайд 16Заголовок
Заголовок
Логотип
Рекламный баннер
Текстовое поле
Адрес электронной почты, авторское право
Элементы навигации
Счетчик посещений
русский
english
Элементы
навигации
Выбор
языка
Анонсы


Рубрик
(текст)

ЗаголовокЗаголовокЛоготипРекламный баннерТекстовое полеАдрес электронной почты, авторское правоЭлементы навигацииСчетчик посещенийрусскийenglishЭлементы навигацииВыборязыкаАнонсы Рубрик(текст)

Слайд 1710 советов дизайнеру
Холмогоров В. Основы Web-мастерства. Учебный курс. СПб.: Питер,

2001. - 352 с.
Шафран Э. Создание Web-страниц. Самоучитель. СПб.: Питер,

1999. - 320 с.
Крейнак Дж., Хебрейкен Дж. Интернет. Энциклопедия. СПб.: Питер, 1999. - 560 с.
10 советов дизайнеруХолмогоров В. Основы Web-мастерства. Учебный курс. СПб.: Питер, 2001. - 352 с.Шафран Э. Создание Web-страниц.

Слайд 18Документы HTML
Лекция 2

Санкт-Петербург
– 2006 –

Документы HTML Лекция 2Санкт-Петербург– 2006 –

Слайд 19Структура документа HTML
Основной код
Документ HTML
Заголовок документа
Внешний заголовок
Тело документа

Структура документа HTMLОсновной кодДокумент HTMLЗаголовок документаВнешний заголовокТело документа

Слайд 20Типы тегов
обрабатываемое значение


Типы теговобрабатываемое значение

Слайд 21Обязательные теги HTML
Содержимое
Содержимое
Внешний заголовок
Основной

код

Обязательные теги HTML Содержимое Содержимое Внешний заголовок Основной код

Слайд 22HTML код


My Web-page




HTML код			My Web-page

Слайд 23Escape-последовательности

Escape-последовательности

Слайд 24Теги HTML

Предварительно отформатированный
текст


Теги HTMLПредварительно отформатированный			текст

Слайд 25Теги абзаца в HTML

Текст, заключаемый в абзац


RIGHT
LEFT
CENTER
JUSTIFY

Теги абзаца в HTML Текст, заключаемый в абзац RIGHTLEFTCENTERJUSTIFY

Слайд 26Теги выравнивания в HTML

Часть кода HTML


Часть кода HTML


Часть кода HTML

Теги выравнивания в HTML Часть кода HTML Часть кода HTML Часть кода HTML

Слайд 27Теги переноса в HTML

Текст одной строки,

а это текст

следующей строки

Строка без переносов

Теги переноса в HTML Текст одной строки, а это текст следующей строки Строка без переносов

Слайд 28Теги начертания в HTML
Текст полужирным шрифтом
Текст курсивным шрифтом
Текст полужирным

шрифтом

Текст курсивным шрифтом

Теги начертания в HTMLТекст полужирным шрифтомТекст курсивным шрифтом Текст полужирным шрифтом Текст курсивным шрифтом

Слайд 29Теги эффектов в HTML
Подчеркнутый текст
Зачеркнутый текст
Подстрочный текст
Надстрочный текст
Увеличение размера шрифта
Текст

Теги эффектов в HTMLПодчеркнутый текстЗачеркнутый текстПодстрочный текстНадстрочный текстУвеличение размера шрифтаТекст

Слайд 30Теги шрифта в HTML

Текст для вывода

FACE="Arial" SIZE="+2"
COLOR="#0000FF">
Отрывок текста

Теги шрифта в HTML Текст для вывода Отрывок текста

Слайд 31Цвет

Цвет

Слайд 32Атрибуты тега

Тело

документа HTML

Атрибуты тега 	Тело документа HTML

Слайд 33Заголовки

Текст заголовка

где n=1…6

Это текст заголовка

на странице

Заголовки Текст заголовка где n=1…6 Это текст заголовка на странице

Слайд 34Маркированные списки

Вхождение1
Вхождение2
Вхождение3


Вхождение n

Маркированные списки	 Вхождение1 	 Вхождение2 	 Вхождение3 	… 	 Вхождение n

Слайд 35Нумерованные списки

Вхождение1
Вхождение2
Вхождение3

Вхождение4

Нумерованные списки	 Вхождение1 	 Вхождение2 	 Вхождение3 	 Вхождение4

Слайд 36Гиперссылки

Текст гиперссылки
/A>

Текст гиперссылки
/A>

ГиперссылкиТекст гиперссылки/A>Текст гиперссылки/A>

Слайд 37Ссылки на разделы

Ключевое слово или заголовок раздела
/A>

Текст ссылки
/A>

Ссылки на разделыКлючевое слово или заголовок раздела/A>Текст ссылки/A>

Слайд 38Ссылки на e-mail

Текст ссылки
/A>

Ссылки на e-mailТекст ссылки/A>

Слайд 39Графика в документе HTML
Лекция 3

Санкт-Петербург
– 2006 –

Графика в документе HTML Лекция 3Санкт-Петербург– 2006 –

Слайд 40Разделительные линии


Разделительные линии

Слайд 41Разделительные линии (2)

Разделительные линии (2)

Слайд 42Графические форматы в Интернет
GIF – Graphic Intergange Format
JPEG

– Joint Photographic Expert Group
PNG – Portable Network Graphics

Графические форматы в Интернет GIF – Graphic Intergange Format JPEG – Joint Photographic Expert Group PNG –

Слайд 43Оптимизация графики
GifClean32
WebGraphic Optimizer

ShoeString Picture Dicer

Оптимизация графики GifClean32 WebGraphic Optimizer ShoeString Picture Dicer

Слайд 44Теги графики в HTML

ссылка на документ">

Теги графики в HTML

Слайд 45Атрибуты тега IMG

RIGHT
LEFT
CENTER
TOP
BOTTOM
MIDDLE
BASELINE
HSPACE=0

VSPACE=0

Атрибуты тега IMG RIGHTLEFTCENTERTOPBOTTOMMIDDLEBASELINEHSPACE=0 VSPACE=0

Слайд 46GIF - анимация
Ulead GIF Animator
Jasc Animation Shop

Adobe ImageReady
Macromedia Flash
Corel R.A.V.E.
GIF Movie Gear

GIF - анимация Ulead GIF Animator Jasc Animation Shop Adobe ImageReady Macromedia Flash Corel R.A.V.E. GIF Movie

Слайд 47Карты изображений в HTML

x2, y2"
ALT="альтернативный текст">

Карты изображений в HTML

Слайд 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

Карты изображений в HTML (2)SHAPE=RECT COORDS=

Слайд 49Карты изображений в HTML (3)

Карты изображений в HTML (3)

Слайд 50Ускорение загрузки графики

картинка">

pict1.jpg – уменьшенная копия,
pict2.jpg – файл изображения

Ускорение загрузки графикиpict1.jpg – уменьшенная копия,pict2.jpg – файл изображения

Слайд 5104.10.01
доц. В.Н.Гаркуша
Таблицы в документе HTML
Лекция 4

Санкт-Петербург
– 2006 –

04.10.01доц. В.Н.ГаркушаТаблицы в документе HTML Лекция 4Санкт-Петербург– 2006 –

Слайд 52Теги таблицы

ALIGN="Значение"
VALIGN="Значение">
Содержимое

ячеек


Теги таблицы  	  Содержимое ячеек

Слайд 53Простые таблицы


а
б


в


Простые таблицы			 а 		 б 				 в

Слайд 54Таблица с заголовком

Название


Заголовок1
Заголовок2


содержимое


Таблица с заголовком Название 				 Заголовок1 		 Заголовок2 				 содержимое

Слайд 55Вложенные таблицы

Вложенные таблицы

Слайд 56Цвета в таблице

Содержимое таблицы

текст

Цвета в таблицеСодержимое таблицы текст

Слайд 57Пример цветной таблицы


текст


текст


BGCOLOR=BLACK> текст
текст


Пример цветной таблицы    текст   текст     текст

Слайд 58Советы
задавайте значения ширины везде в одних и тех же

единицах
не оставляйте пустых ячеек (BR)
указывайте тип выравнивания

в таблице
явно задавайте ширину таблицы
явно указывайте все параметры ячеек, столбцов и таблицы в целом
Советы задавайте значения ширины везде в одних и тех же единицах не оставляйте пустых ячеек (BR) указывайте

Слайд 59Рисунки в таблице



alt="Эмблема кафедры">

   Кафедра радиоэлектронных средств



(РЭС)



Рисунки в таблице

Слайд 60Фреймы
способ организации логических разделов на странице
каждый раздел отображает

отдельную страницу
переход на новую страницу происходит только в одном

из разделов
Фреймы способ организации логических разделов на странице каждый раздел отображает отдельную страницу переход на новую страницу происходит

Слайд 61Фреймы


FRAMEBORDER="значение" NORESIZE>

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


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

Слайд 62Фреймы на странице

Фреймы на странице

Слайд 63Фреймы на странице (2)

Фреймы на странице (2)

Слайд 64доц. В.Н.Гаркуша
Применение каскадных таблиц стилей
Лекция 5

Санкт-Петербург
– 2006 –

доц. В.Н.ГаркушаПрименение каскадных таблиц стилей Лекция 5Санкт-Петербург– 2006 –

Слайд 65Каскадные таблицы стилей
Задавая свойства стиля в файле

.css, подключают этот файл к html-документу, заставляя клиентский броузер считывать

значения параметров каждого компонента
Web-страницы из файла стиля.
Возможность подключить один и тот же файл к разным html-документам позволяет отказаться от необходимости назначения свойств каждого конкретного объекта.
Каскадные таблицы стилей   Задавая свойства стиля в файле .css, подключают этот файл к html-документу, заставляя

Слайд 66Директивы и параметры CSS
Селектор -
НАЗВАНИЕ ЭЛЕМЕНТА


{свойство: значение;}
H1 {color: blue; font-size: 20 pt;}

Директивы и параметры 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 {свойство: значение;}
Группировка селекторов CSS H1, H2, H3, H4 {font-family: helvetica; color: red; font-size: 30 pt;}   Группировка

Слайд 68Группировка параметров CSS
H1 {
font-family: helvetica;
font-style: italic;
font-size: 30 pt;
color:

black;}
Группировка селекторов -
НАЗВАНИЕ ЭЛЕМЕНТА {
Определение-1;
Определение-2;
...
Определение-N;}

Группировка параметров CSS H1 {font-family: helvetica; font-style: italic;font-size: 30 pt;color: black;}   Группировка селекторов -НАЗВАНИЕ ЭЛЕМЕНТА

Слайд 69Принцип наследования
BODY {
background: white;
color: black;
font-family: sans-serif;
font-size: 10 pt;

}
Вложенные теги наследуют признаки директив более высокого

уровня – "старших" тегов.

Следующая директива описывает единые параметры для всех видимых элементов web-страницы.
Принцип наследования BODY {background: white;color: black;font-family: sans-serif; font-size: 10 pt; }   Вложенные теги наследуют признаки

Слайд 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'); }

Свойства шрифтаfont-sizeH1 {font-size: 30 pt;} H2 {font-size: 100 px;}H3 {font-size: 60%; }font-familyP {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;}

Свойства шрифта (2)font-variantCAPTION {font-variant: small-caps;} font-weightSTRIKE {font-weight: bold;}font-styleEM {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; }

Свойства текстаtext-alignP {text-align: justify; }text-decorationP {text-decoration: none; }text-indentP {text-indent: 30pt; }line-heightP {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;}

Свойства текста (2)text-transformCAPTION {text-transform: capitalize; }letter-spacingP {letter-spacing: 3px; }vertical-alignTD {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; }

Свойства цвета и фонаbackground-imageBODY {background-image: URL(/images/picture.gif; }background-colorH1 {background-color: #F00000; }background-repeatBODY {background-repeat: no-repeat; }

Слайд 75Свойства цвета и фона (2)
background-position
BODY {background-position: 30cm 0cm} TD {background-position:

middle;}
background-attachment
BODY {background-attachment: scroll; }

Свойства цвета и фона (2)background-positionBODY {background-position: 30cm 0cm} TD {background-position: middle;}background-attachmentBODY {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;}

Свойства границpaddingTABLE {padding-left: 10px;padding-right: 10px; padding-top: 15px;padding-bottom: 15px;}marginP {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;}

Свойства границ (2)border-colorTABLE {border-color: blue;}border-widthTD {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);}

Свойства списковlist-style-positionLI {list-style-position: inside;}list-style-typeLI {list-style-type: square;}list-style-imageLI {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;}

Вспомогательные свойстваwhite-spaceP {white-space: pre;}width heightIMG {height: 80%;width: 120px;}floatTD {float: left;}clearIMG {clear: both;}displayIMG {display: block;}

Слайд 80Классы
НАЗВАНИЕ ЭЛЕМЕНТА.имя класса
{свойство: значение;}
P.myclass {text-align: justify;}

текст формата

директив CSS
Текст формата по умолчанию

КлассыНАЗВАНИЕ ЭЛЕМЕНТА.имя класса {свойство: значение;}P.myclass {text-align: justify;} текст формата директив CSS Текст формата по умолчанию

Слайд 81Классы (2)
.имя класса {свойство: значение;}
.myclass {color: green;}
текст зеленого

цвета

>Текстовый заголовок

Классы (2).имя класса {свойство: значение;}.myclass {color: green;} текст зеленого цвета >Текстовый заголовок

Слайд 82Идентификаторы
НАЗВАНИЕ ЭЛЕМЕНТА#имя идентификатора
{свойство: значение;}
P#qwerty {text-align: left;}
текст, позиционированный

по левой границе экрана
Текст формата директив CSS

ИдентификаторыНАЗВАНИЕ ЭЛЕМЕНТА#имя идентификатора {свойство: значение;}P#qwerty {text-align: left;} текст, позиционированный по левой границе экрана Текст формата директив CSS

Слайд 83Идентификаторы (2)
#имя идентификатора
{свойство: значение;}
#qwerty {color: #00FF00;}
текст заголовка


Идентификаторы (2)#имя идентификатора {свойство: значение;}#qwerty {color: #00FF00;} текст заголовка

Слайд 84Интеграция в web-страницу


Заголовок страницы

P {text-align: justify;}
H1 {color: green;}


Текст документа

Интеграция в web-страницу	Заголовок страницы					P {text-align: justify;}			H1 {color: green;}				Текст документа

Слайд 85Подключение файла CSS

Заголовок страницы

@import URL(../css/file.css);



Подключение файла CSSЗаголовок страницы		@import URL(../css/file.css);

Слайд 86Подключение файла CSS (2)

Заголовок страницы


Подключение файла CSS (2)Заголовок страницы

Слайд 87Применение CSS

Заголовок страницы

P{text-align: justify;}
H1{color: green;}
- - >


Применение CSSЗаголовок страницы			P{text-align: justify;}	H1{color: green;}	- - >

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика