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

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

Содержание ▲

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

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

Слайд 1

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

HTML+CSS (верстка)

Слайд 2

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

Короткое введение Последний стандарт HTML – версия 5 XHML – переработанный HTML в соответствии со стандартом XML Стандарты неоднозначны, не все моменты регламентированы Придерживайтесь стандартов, осторожнее с нестандартными решениями

Слайд 3

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

Слайд 4

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

Привет, Мир!

Слайд 5

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

Элементы и теги Элементы и теги содержание тега Текст абзаца 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

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

Теги, атрибуты. Блочные и строковые элементы , , Семантика, логичность кода (, , , , …) Спецсимволы: < > … , , , , …, , текст Вложенность тегов

Слайд 10

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

Обработка ошибок, DTD Отсутствующие теги – плохая практика Первый абзац Второй абзац Заголовок Игнорирование лишних тегов Первый абзац Второй абзац XHTML – намного строже - не правильно, - правильно Регистр символов в названии тегов текст текст текст - не правильно Обязательные теги, например Инструменты проверки кода на ошибки: HTML – валидатор

Слайд 11

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

Текст Текст, абзацы, перевод строки Лишние пробельные символы не учитываются Скачано 10Кб Заголовки, значение заголовков и — все браузеры поддерживают, но… — блок предварительно форматированного текста (все пробелы, переводы строк, и т.д., монош. шрифт) Физическая и логическая разметка

Слайд 12

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

Шрифт Немного терминов Название шрифта, семейство (serif, sans-serif, monospace…) Размер Цвет Межсимвольное расстояние Курсив, жирность Буква

Слайд 13

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

Теги логической разметки текста

Слайд 14

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

Основные теги физической разметки

Слайд 15

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

Цитаты, адреса и — цитаты (длинная и короткая) Длииинная цитата Адрес - адрес

Слайд 16

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

Линейки Использование атрибутов не рекомендуется Часто используется для логического отделения информационных блоков

Слайд 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 align="bottom | left | middle | right | top" Заливка с помощью width или height Бывает, что изображения отключены… ismap, usemap onAbort – только ie, onError, onLoad Фоновые изображения

Слайд 25

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

Гиперссылки Основа гипертекста URL scheme:scheme_specific_part ://:@:/ Только US-ACSII – символы (/ код /) foto - ссылка с относительным адресом mailto:mail@mail.ru?subject=Subject

Слайд 26

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

Отношения. Мета-теги. Мы имеем дело не с документом, а с проектом, набором документов

Слайд 27

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

Списки Страны Англия Швейцария Города Крокодил Гена Чебурашка

Слайд 28

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

Списки определений Термин 1 Определение первого термина Термин 2 Определение второго термина

Слайд 29

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

Формы Процесс заполнения, отправки События (controls) type=text, password, file size="30" maxlength="20" value="my name" accept="image/*"

Слайд 30

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

Поля форм

Слайд 31

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

Поля форм 2 текст texxxt accesskey, disabled, readonly Введите имя:

Слайд 32

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

Таблицы Название таблицы 111 background, bgcolor, bordercolor, cols, height, title, nowrap colspan, rowspan , ,

Слайд 33

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

Фреймы Фреймы Рамки для frameset noresize, scrolling, frameborder для frame Не работают фреймы? target у ссылки,

Слайд 34

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

Объекты и апплеты Вложенные object

Слайд 35

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

div и span Div – блочный Span – строчный title, dir, lang, style, class

Слайд 36

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

CSS 2 Стиль – это правило отображения тега Встроенные стили, стили документа, внешние таблицы или @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( 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 ( 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) Значения можно присвоить любым элементам и сделать на основе них таблицу Анонимные объекты таблицы Name:

Слайд 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: [[,]* [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: [ || || ] | inherit