Презентация HTMLCSS, верстка онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему HTMLCSS, верстка абсолютно бесплатно. Урок-презентация на эту тему содержит всего 78 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:78 слайдов
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:2.97 MB
- Просмотров:114
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда: HTML+CSS (верстка)
№2 слайд
Содержание слайда: Короткое введение
Последний стандарт HTML – версия 5
XHML – переработанный HTML в соответствии со стандартом XML
Стандарты неоднозначны, не все моменты регламентированы
Придерживайтесь стандартов, осторожнее с нестандартными решениями
№3 слайд
Содержание слайда:
№4 слайд
Содержание слайда: <html>
<html>
<body>
Привет, Мир!
</body>
</html>
№5 слайд
Содержание слайда: Элементы и теги
Элементы и теги
<название_тега>
<название_тега>содержание тега</название_тега>
<p>Текст абзаца</p>
HTML – это прежде всего содержание, данные.
HTML, как правило, только лишь советует как отображать документы.
№6 слайд
Содержание слайда: Редакторы
WYSIWYG или текстовые процессоры
WebStorm
Sublime
Atom
Notepad++
Microsoft Word!?
№7 слайд
Содержание слайда: Браузеры
Internet Explorer
Edge
Firefox
Opera
Safari
Chrome
Yandex
Vivaldi
№8 слайд
Содержание слайда: Другие инструменты
Firebug – не заменим для разработки и отладки HTML, CSS, Javascript
Pixel Perfect – плагин
для подложки рисунка
дизайна при верстке
IE Developer Toolbar,
IETester,
DebugBar for IETester
№9 слайд
Содержание слайда: Теги, атрибуты. Блочные и строковые элементы
<html>, <head>, <title>
<body bgcolor="#A0BEC4" onload="alert('Loaded');"></body>
<!-- комментарий -->
Семантика, логичность кода
(<strong>, <em>, <blockquote>, <code>, …)
Спецсимволы: < > …
<p>, <h1>, <h2>, <h3>, …, <br>, <hr>
<a href="url">текст</a>
<img src="url" title="текст">
Вложенность тегов
№10 слайд
Содержание слайда: Обработка ошибок, DTD
Отсутствующие теги – плохая практика
<p>Первый абзац <p>Второй абзац <h2>Заголовок
Игнорирование лишних тегов
<p>Первый абзац <p><p>Второй абзац <uktag>
XHTML – намного строже
<br> - не правильно, <br /> - правильно
Регистр символов в названии тегов
<b>текст <i>текст </b>текст</i> - не правильно
Обязательные теги, например <html>
Инструменты проверки кода на ошибки: HTML – валидатор
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
№11 слайд
Содержание слайда: Текст
Текст, абзацы, перевод строки
Лишние пробельные символы не учитываются
<p align="left" class="log" lang="ru" id="loginfo" style="color:blue" title="Некоторая статистическая информация">Скачано 10Кб</p>
Заголовки, значение заголовков
<br> и <nobr> — все браузеры поддерживают, но…
<pre> — блок предварительно форматированного текста (все пробелы, переводы строк, и т.д., монош. шрифт)
Физическая и логическая разметка
№12 слайд
Содержание слайда: Шрифт
Немного терминов
Название шрифта, семейство (serif,
sans-serif, monospace…)
Размер
Цвет
Межсимвольное
расстояние
Курсив, жирность
<font size=5 color="#FFFFFF" face="Courier, Arial">
Б</font>уква
№13 слайд
Содержание слайда: Теги логической разметки текста
№14 слайд
Содержание слайда: Основные теги физической разметки
№15 слайд
Содержание слайда: Цитаты, адреса
<blockquote> и <q> — цитаты (длинная и короткая)
<blockquote cite="http://lib.ru/" lang="en" style="color:green;">Длииинная цитата</blockquote>
<address>Адрес</address> - адрес
№16 слайд
Содержание слайда: Линейки
<hr align="center" color="#000000" size="3" width="50%">
Использование атрибутов не рекомендуется
Часто используется для логического отделения информационных блоков
№17 слайд
Содержание слайда: Изображения в документе HTML
Формат? Все зависит от браузеров, в HTML нет спецификаций
Формат GIF
сжатие "без потерь"
256 цветов максимум
чересстрочный (всплывающий) и нормальный формат
прозрачность
анимация
№18 слайд
Содержание слайда: Формат JPEG
Формат JPEG
24 битная палитра (16 млн цветов)
потеря качества рисунка
Формат PNG
цветовые схемы:
truecolor
grayscale
индексированная палитра (GIF-подобная) – PNG-8
альфа канал на 254 уровня
улучшенное сжатие без потерь
двухмерное чередование
гамма-коррекция
Формат MNG
№19 слайд
Содержание слайда:
№20 слайд
Содержание слайда:
№21 слайд
Содержание слайда:
№22 слайд
Содержание слайда:
№23 слайд
Содержание слайда: Итог
JPEG – для фотографий, изображений с большим количеством градиентов и цветов
GIF – для маленьких рисунков, иконок, пиктограмм, полезен, когда края – четкие
PNG8 – когда не много цветов, четкие края, например скриншоты windows - окон
PNG24 – полупрозрачности, изображение без потери качества, большое количество цветов
№24 слайд
Содержание слайда: Применение изображений в HTML
<img src="/images/screenshot.png" alt="Скриншот" title="Скриншот" border="1" align="middle" width="50" height="70">
align="bottom | left | middle | right | top"
Заливка с помощью width или height
Бывает, что изображения отключены…
ismap, usemap
onAbort – только ie, onError, onLoad
Фоновые изображения
№25 слайд
Содержание слайда: Гиперссылки
Основа гипертекста
URL
scheme:scheme_specific_part
<схема>://<логин>:<пароль>@<хост>:<порт>/<URL‐путь>
http://ru.wikipedia.org:80/wiki/HTTP?get#GET
<a id="GET" name="GET"></a>
Только US-ACSII – символы
http://yandex.ru/yandsearch?text=%2F+%D0%BA%D0%BE%D0%B4%20%2F (/ код /)
<a href="foto.jpg" target="_blank">foto</a> - ссылка с относительным адресом
mailto:mail@mail.ru?subject=Subject
№26 слайд
Содержание слайда: Отношения. Мета-теги.
Мы имеем дело не с документом, а с проектом, набором документов
<head>
<base href="http://rezonans.ru/" />
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="MediaWiki 1.16alpha-wmf" />
<meta name="keywords" content="ASCII,Ref-en,Английский язык,Соединённые Штаты Америки,Стандарт,Код,Информация,Диакритический знак,Акут,Man (Unix),Язык" />
</head>
№27 слайд
Содержание слайда: Списки
<ul type="square">
<li>Страны
<ul type="circle">
<li>Англия</li>
<li>Швейцария</li>
</ul>
</li>
<li>Города</li>
</ul>
<ol type="A" start="3">
<!-- A, a, I, i, 1 -->
<li>Крокодил Гена</li>
<li value="6">Чебурашка</li>
</ol>
№28 слайд
Содержание слайда: Списки определений
<dl>
<dt>Термин 1</dt>
<dd>Определение первого термина</dd>
<dt>Термин 2</dt>
<dd>Определение второго термина</dd>
</dl>
№29 слайд
Содержание слайда: Формы
Процесс заполнения, отправки
<form action="form.php" enctype="multipart/form-data" method="POST"></form>
События
<input name="my_name"> (controls)
type=text, password, file
size="30" maxlength="20" value="my name"
accept="image/*"
№30 слайд
Содержание слайда: Поля форм
<input type="checkbox" name="border" value="top" checked="checked" />
<input type="radio" name="border" value="top" checked>
<input type="submit" value="отправить" name="submit">
<input type="reset" value="Сбросить форму">
<input type="image" src="knopka.jpg" name="btn" />
<input type="button" value="надпись">
<input type="hidden" name="user" value="34tr3sdf" />
№31 слайд
Содержание слайда: Поля форм 2
<button type="submit" ><img src="btn.gif" alt="btn" /> текст</button>
<textarea name="longtext" rows="10" cols="40"></textarea>
<select name="xxx" multiple="multiple" size="5"><option selected="selected">texxxt</option></select>
accesskey, disabled, readonly
<label for="name-field">Введите имя:</label>
<input name="name" id="name-field" />
<fieldset><legend align="top"></legend></fieldset>
№32 слайд
Содержание слайда: Таблицы
<table cellspacing="0" cellpadding="0" border="0" frame="below" rules="cols" width="100%">
<caption>Название таблицы</caption>
<thead>
<tr align="left" valign="middle">
<th>111</th>
<td></td>
</tr>
</thead>
</table>
background, bgcolor, bordercolor, cols, height, title, nowrap
colspan, rowspan
<tfoot>, <tbody>
<colgroup>, <col>
№33 слайд
Содержание слайда: Фреймы
<html><head><title>Фреймы</title></head>
<frameset rows="30%, *">
<frame src="fr1.htm" ></frame>
<frame src="fr2.htm"></frame>
</frameset>
</html>
Рамки для frameset
noresize, scrolling, frameborder для frame
<noframes>
<iframe height="100" width="400" src="fr1.htm">Не работают фреймы?</iframe>
target у ссылки, <base>
№34 слайд
Содержание слайда: Объекты и апплеты
<object>
<param name="name" value="1" />
</object>
Вложенные object
<embed src="x.swf" type="application/x-shockwave-flash" />
№35 слайд
Содержание слайда: div и span
Div – блочный
Span – строчный
title, dir, lang, style, class
№36 слайд
Содержание слайда: CSS 2
Стиль – это правило отображения тега
Встроенные стили, стили документа, внешние таблицы
<link> или @import
@media – правило
/* комментарий к стилям */
№37 слайд
Содержание слайда: Синтаксис
seceltor {property:value; property1:value1;}
p {color: red; text-decoration: underline;}
p {font-family: Georgia, 'Times New Roman', Times, serif;}
p {border: 1px solid red;}
Стиль элемента явно указан, либо унаследован, либо взят по умолчанию
№38 слайд
Содержание слайда: Селекторы
p {} /* типовой, по тегу */
#id1 {} /* идентификатор */
.class1 {} /* по имени класса */
* {} /* универсальный */
*[align="right"] {} /* по атрибутам */
p#id1.class1.class2 {}
p:first-line {} /* псевдоэлементы */
div, table, .class1 {} /*групповой*/
ul ul{} /*контекст, наследующие*/
ol > li {} /*дочерний*/
li + li {} /*соседние*/
№39 слайд
Содержание слайда: Приоритеты стилей
Стили
!important
Порядок каскадирования:
По источнику ("ближе" к тегу)
Специфичность, более узкое, точное определение
Порядок следования
Как правило стили приоритетнее атрибутов
№40 слайд
Содержание слайда: Специфичность
a – id; b – класс, псевдокласс, аттрибут; c – имя тега.
* {} /* a=0 b=0 c=0 -> специфичность = 0 */
li {} /* a=0 b=0 c=1 -> специфичность = 1 */
ul li {} /* a=0 b=0 c=2 -> специфичность = 2 */
ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */
ul ol li.red {} /* a=0 b=1 c=3 -> специфичность = 13 */
li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */
#x34y {} /* a=1 b=0 c=0 -> специфичность = 100 */
/* style="" -> специфичность = 1000 */
№41 слайд
Содержание слайда: Размеры, цвета, URL в CSS
Ключевые слова, inherit
url(http://localhost/1.jpg)
red, #7788AA, rgb(12,11,34)
Размеры:
em — ширина буквы m в настоящем шрифте. Например,
p {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.
px — пикселы
pt — пункты. Один пункт = 1/72 дюйма.
% — проценты
ex — ширина буквы x
in — дюймы
cm — сантиметры
mm — миллиметры
pc —размер в пиках. (12 пунктов).
№42 слайд
Содержание слайда: Шрифты
font-family: Georgia, 'Times New Roman', Times, serif; (с засечками, без, рукописные..)
font-size: larger;
font-style: italic;
font-variant: small-caps;
font-weight: bold; (400)
font: [font-style || font-variant || font-weight] font-size [/line-height] font-family
Загрузка шрифтов, @font-face
№43 слайд
Содержание слайда: Свойства текста
letter-spacing: 2px;
line-height: 120%; (наслед. вычисл. от родителя)
text-align: right;
text-decoration: blink | line-through | overline | underline | none
text-ident: -5em;
text-transform: capitalize | lowercase | uppercase | none
vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значение | проценты
(только строк. и замещ. элементы)
word-spacing: 10em;
white-space: normal | nowrap | pre (pre в ie6 работает )
Другие языки…
№44 слайд
Содержание слайда: Контейнер строки
№45 слайд
Содержание слайда: Свойства контейнеров
Блочная модель CSS, горизонтальное и вертикальное форматирование (по 7 свойств)
top, right, bottom, left
№46 слайд
Содержание слайда: Горизонтальное форматирование
Значение auto – заполняет всю оставшуюся ширину контейнера (margin, width)
Отрицательные поля
Сумма 7 размеров дочернего элемента = width родительского
Для замещающих элементов размеры auto равны реальным размерам
Размеры замещающих элементов изменяются пропорционально, если задавать одно из них
№47 слайд
Содержание слайда: height=auto
№48 слайд
Содержание слайда: Вертикальное форматирование
Высота по содержимому (auto)
Или через height. Если содержимого больше чем height – прокрутка
margin-top или bottom равное auto = 0
Высота в процентах – от блока контейнера, но…
Центрирование по вертикали через процентные margin и высоту блока-контейнера
Сворачивание полей
Отрицательные margin
№49 слайд
Содержание слайда: Сворачивание вертикальных полей
№50 слайд
Содержание слайда: Форматирование строчных элементов
Многострочный строковый элемент, рамки, фон
Строковый блок и контейнер строки
Отступы, рамки и поля незамещаемых элементов не оказывают влияния на высоту строкового блока в отличии от замещаемых
Вспомним line-height
Если в строке есть замещаемый элемент, то его реальная высота, padding и margin, border влияют на высоту строкового блока
№51 слайд
Содержание слайда: Изменение представления элемента
display: block | inline | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | inline-block
Пример употребления display:block
Пример употребления display:inline
display определяет только лишь представление элемента, но не его тип, не его суть
display: inline-block
Иногда значение display вычисляется в зависимости от значения свойств float или position (абс. – или table или block)
№52 слайд
Содержание слайда: Поля
По умолчанию margin=0
У некоторых элементов есть поля по умолч.
img {margin: 1em;}
img {margin: 1em 2em 3em 4em;}
img {margin: 1em 2em;}
img {margin: 1em 2em 3em;}
Процентные значения от ширины родительского элемента
margin-left, margin-right, margin-top, margin-bottom
Поля строковых элементов (левое и правое)
№53 слайд
Содержание слайда: Рамки
Рамки внутри полей, они ограничивают фон
Ширина, стиль, цвет
Ширина по умолч.=medium или none
Цвет по умолч.=цвет элемента
border-style: стиль (TRBL) или отдельно
border-width: thin | medium | thick | значение (TRBL) или отдельно, % - запрещены
Если border-style=none, то border-width=0
border-color: color (TRBL) или отдельно
Цвет рамки может = transparent
№54 слайд
Содержание слайда: Рамки, стили рамок
№55 слайд
Содержание слайда: Отступы
padding: значение (любые меры, проценты) (TRBL)
Залиты фоном
Отступы не сворачиваются
% относительно ширины родителя (причем и верхние и нижние поля)
padding-top, padding-right, padding-bottom, padding-left
Можно применять к строковым элементам
№56 слайд
Содержание слайда: Цвета, фон
color: <цвет> | inherit
Свойство color для элементов форм
background-color: цвет | transparent (умолч.)
background-image: url(путь к файлу) | none
background-color + background-image
background-repeat: no-repeat | repeat | repeat-x | repeat-y
№57 слайд
Содержание слайда: Фон
background-position: [проценты | значение] | [left | center | right] || [top | center | bottom]
(если одно задано, второе – center)
background-attachment: fixed | scroll
(http://www.meyerweb.com/eric/css/edge/complexspiral/glassy.html)
background: background-attachment || background-color || background-image || background-position || background-repeat
№58 слайд
Содержание слайда: Перемещение, плавающая модель
Рисунки, параграф с float
Задание ширины обязательно
Поля не сворачиваются
Перемещаемый элемент генерирует блочный элемент
Правила перемещаемых элементов (стр.327)
Перемещаемый элемент увеличивается, чтобы вместить всех перемещаемых потомков
Отрицательные поля
Если ширина больше – перемещаемый элемент окажется за боковым краем родителя
clear: both | left | none | right
№59 слайд
Содержание слайда: Позиционирование
position: absolute | fixed | relative | static
static – нормальный поток
relative – смещение элемента с теми же размерами и начальными координатами
absolute – удаление из нормального потока.
Генерация структурного блока.
fixed – абсолютно позиционированный элемент, но блок-контейнер – окно просмотра.
№60 слайд
Содержание слайда: Позиционирование 2
Блок-контейнер для элементов с position = relative | static – родитель
Блок-контейнер для элементов с position = absolute – ближайший предок с position != static. Если ближайший предок – строковый, то контейнер – предок. Если таких элементов нет – начальный блок-контейнер
№61 слайд
Содержание слайда: Свойства смещения
top, right, bottom, left: <длина> | <процентное значение> | auto | inherit
Ширина и высота
min-width, min-height: <длина> | <процентное значение> | inherit
max-width, max-height: <длина> | <процентное значение> | none | inherit
№62 слайд
Содержание слайда: Переполнение и отсечение содержимого
overflow: visible | hidden | scroll | auto | inherit
overflow-x и overflow-y
clip: rect(top, right, bottom, left) | rect(Y1, X1, Y2, X2) | auto | inherit
№63 слайд
Содержание слайда: Видимость элементов
visibility: visible | hidden | collapse | inherit
№64 слайд
Содержание слайда: Абсолютное позиционирование
Абсолютное позиционирование относительно…
Перекрытие элементов
Размеры и размещение
left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = ширина блока-контейнера
Значение auto
right или bottom компенсируют, если все свойства заданы
№65 слайд
Содержание слайда: Размещение по оси z
z-index: число | auto
Может быть отрицательным
Локальный контекст
занесения в стек
№66 слайд
Содержание слайда: Фиксированное позиционирование
Относительно окна браузера
Удобно, например, для баннеров или для меню
№67 слайд
Содержание слайда: Относительное позиционирование
Смещение относительно текущего положения
№68 слайд
Содержание слайда: Верстка таблиц
Объединять ячейки через CSS нельзя
У ячеек нет полей
№69 слайд
Содержание слайда: Таблицы. Продолжение
display: inline-table – таблица строкового уровня (типа inline-block)
Значения можно присвоить любым элементам и сделать на основе них таблицу
Анонимные объекты таблицы
<table>
<td>Name:</td>
<td><input type="text"></td>
</table>
№70 слайд
Содержание слайда: Таблицы. Продолжение
Слои таблицы
caption-side: top |
bottom
border-collapse:
collapse | separate |
inherit
border-spacing: <длина гор.> <длина верт.>? | inherit
empty-cells: show | hide | inherit
№71 слайд
Содержание слайда: Сливающиеся рамки ячеек
Если display: table | inline-table у элемента не может быть отступов, только поля
Рамки могут применяться к таблице, ячейкам, строкам, группам строк, столбцам и группам столбцов
Между рамками ячеек не может быть никаких промежутков; рамки сливаются и центрируются
№72 слайд
Содержание слайда: Размеры таблиц
Ширина
table-layout: auto | fixed | inherit
Скорость рендера с фиксированной шириной больше
Если сумма ширин столбцов больше ширины таблицы, то берется первое
Высота: или заданная или как сумма высот строк
Вертикальное выравнивание – не то же самое что и для строковых элементов
№73 слайд
Содержание слайда: Элементы списка
Управлять размещением сложно
list-style-position: inside | outside – вне содержимого или как строковый маркер в начале содержимого
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
list-style-image: none | url('путь к файлу')
list-style: list-style-type || list-style-position || list-style-image
№74 слайд
Содержание слайда: Генерируемое содержимое
Например маркеры списка…
a[href]:before {content: "(link)";}
Ограничения на display
content: строка | attr(атрибут) | open-quote | close-quote | no-open-quote | no-close-quote | url }
Теги недопустимы
Генерируемые кавычки
Счетчики
counter-reset и counter-increment
№75 слайд
Содержание слайда: Курсоры
cursor: [[<uri>,]* [auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | seresize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherit
a[href] {cursor: pointer;}
№76 слайд
Содержание слайда: Курсоры
№77 слайд
Содержание слайда: Контуры
Ну участвуют в потоке документа
Могут употребляться вместе с рамками
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit (TRBL – нет)
outline-width: thin | medium | thick | <длина> | inherit
outline-color: <цвет> | invert | inherit
outline: [ <outline-color> || <outline-style> || <outline-width> ] | inherit
№78 слайд
Содержание слайда:
Скачать все slide презентации HTMLCSS, верстка одним архивом:
