HTML+CSS, верстка - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему HTML+CSS, верстка. Доклад-сообщение содержит 78 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

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

Описание слайда:

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

Описание слайда:

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

Описание слайда:

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

Описание слайда:

Слайд 62

Описание слайда:

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

Описание слайда:

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