CSS Блочная модель Блочная верстка CSS 3 1

CSS Блочная модель. Блочная верстка. CSS 3 1

2

Верстка процесс формирования веб-страниц в текстовом редакторе, а также результат этого процесса. 3

Верстальщик 4

Есть ли смысл? Москва: 25 000 – 120 000 Питер: 30 000 – 40 000 Ульяновск: 10 000 – 20 000 5

Виды верстки по типам элементов Табличная (table) Блочная (div-верстка, верстка слоями) 6

Табличная верстка условное название метода верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть HTML-тег <table>). 7

Пример табличной верстки 8

Блочная верстка условное название метода верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются блоки [они же слои] (то есть HTML-тег <div>). 9

СЕМАНТИКА!! Таблица это таблица! 10

Блочный макет 11

Плюсы табличной верстки Хорошо отображается в браузерах Хорошо создавать «резиновую» верстку Хорошая система расположения элементов Минусы: 12 Большое кол-во кода Медленный рендер При вложенности таблиц очень сложный для понимания код Несемантично

Плюсы блочной верстки Компактный код Семантика Быстрый рендер Трендово, модно, дорого. Минусы 13 Плывет в разных браузерах, при разных резрешениях За расположение отвечает CSS Сложность в управлении и размещении блоков

Код 14

Shocked 15

Верстка Статическая (фиксированная) – ширина сайта не зависит от ширины экрана пользователя. Резиновая (тянущаяся) – сайт подстраивается под размер монитора пользователя. 16

Пример резиновой верстки 17

Пример статичной верстки 18

Модульная сетка набор невидимых направляющих, вдоль которых располагаются элементы веб-страницы. 19

Пример 20

Еще пример 21

Одноколонная сетка чаще всего встречается в академическом дизайне, при фиксированном макете и публикации большого текста. Академический дизайн характеризуется минимализмом оформления и даже аскетизмом. Основной упор делается на содержательную часть, а дизайну как таковому практически не уделяется внимания. Преимущественно академический дизайн встречается в научной среде. 22

Пример 23

Двухколонная сетка используется две колонки — одна отводится под основной текст, а вторая используется для навигации и другой полезной информации двухколонная сетка стала стандартом де-факто для информационных сайтов из-за своего удобства. 24

Пример 25

Трехколонная сетка часто применяются на главных страницах сайтов, где одновременно требуется показать пользователю множество возможностей, которые он обнаружит на данном сайте. Трехколонная сетка обеспечивает больше простора для дизайна, ведь в некоторых местах можно объединять колонки, разбивать материал на отдельные фрагменты и визуально отделять один блок от другого. Макет при этом может получиться достаточно сложным, но результат обычно того стоит. 26

Примеры 27

Вывод: Прежде чем переходить к созданию веб-страницы, сделайте ее набросок на листе бумаги. 28

Блочные элементы Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. <div>, <h 1>. . <h 6>, p 29

Блочная модель 30

Как задать? div{ Margin-top: 25 px; Margin-Bottom: 20 px; Margin-Left: 10 px; Margin-Right: 1 px; } Долго. 31

Модель TRBL – Top-Right-Bottom-Left margin: 10 px 20 px 15 px 1 px; margin: 10 px; = margin: 10 px; margin 10 px 20 px; = margin: 10 px 20 px; margin: 10 px 20 px 15 px; = margin: 10 px 20 px 15 px 20 px; 32

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

НЕЛЬЗЯ ВКЛАДЫВАТЬ БЛОЧНЫЕ В СТРОЧНЫЕ 34

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

Плавающие элементы такие элементы, которые обтекаются по контуру другими объектами веб-страницы. float : left; float: right; 36

1. Обтекание картинок текстом 37

2. Создание врезок 38

3. Расположение слоев по горизонтали 39

Лабораторная работа № 1 Создание макетов различной конфигурации с помощью блочной верстки и CSS 40

Позиционирование элементов 41

Как позиционировать position: ? left: 10 px; top: 20 px; right: 40 px; bottom: 50 px; 42

position: relative; Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. 43

position: absolute Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на вебстранице словно абсолютно позиционированного элемента и нет. Отсчет координат ведется от родителя со свойством position. Если такого не находится, то от верхнего левого угла браузера. 44