Вёрстка. Каркас сайта

Содержание

Слайд 2

В этом уроке мы напишем полный код каркаса сайта, на html и

В этом уроке мы напишем полный код каркаса сайта, на html и
СSS, и проделаем это в нескольких вариантах, постепенно добавляя блоки и колонки.

Слайд 3

создадим следующую html конструкцию, на основе которой и будем создавать каркас сайта.

создадим следующую html конструкцию, на основе которой и будем создавать каркас сайта.
html> Каркас сайта      Оболочка         
Шапка         
Сайдбар         
Контент         
Подвал     

Слайд 4

1. 

 — wrapper (оболочка), в нём располагаются другие блоки.
2. 
 – header (голова),

1. — wrapper (оболочка), в нём располагаются другие блоки. 2. – header
так называется область в которой расположена шапка сайта. 3. 
 – sidebar (боковая панель), область в которой обычно распложено вертикальное меню и виджеты (календарь и т.д.) 4. 
 – content (содержание), область в которой расположено содержание сайта. 5.
 – footer (нижний колонтитул), или подвал, область в самом низу страницы.

Давайте подробно рассмотрим эту почему именно такие названия у блоков с идентификаторами.

Слайд 5

Теперь, в таблице стилей, задаём этим блокам предварительные параметры. Подключим стили глобальным

Теперь, в таблице стилей, задаём этим блокам предварительные параметры. Подключим стили глобальным
способом, в тело тега head, при помощи тега style.
Оболочке wrapper прописываем ширину (высота по  мере заполнения увеличивается автоматически), временную рамку, внутренний отступ, и выравнивание по центру страницы.
Для шапки задаём высоту, фоновый цвет, и внешний отступ снизу, для того, чтоб следующие блоки не прижались к нему вплотную.
Для блоков sidebar, content, и footer — высоту, и отступ снизу, зададим пока такие же, как и у “header”, а фоновый цвет дадим, временно, каждому свой, чтоб они друг от друга отличались.

Слайд 6


Слайд 7

Теперь посмотрим на то, что у нас получилось

Теперь посмотрим на то, что у нас получилось

Слайд 8

Вот такое вышло начало. Все блоки одинаковой высоты расположились друг под другом и

Вот такое вышло начало. Все блоки одинаковой высоты расположились друг под другом
оболочка раздвинулась и заключает их в себе.
Теперь задаём сайдбару полагающуюся ему ширину, примерно в 200 пикселей, и смещаем на привычный правый край, задав внешний отступ слева в 700px, так как общая заданная ширина составляет 900px (900-200=700).

Слайд 9

#sidebar{   width: 200px; /* Ширина */   height: 80px; /* Высота временная */   background: #2ff553; /*

#sidebar{ width: 200px; /* Ширина */ height: 80px; /* Высота временная */
Фоновый цвет */   margin-bottom: 10px; /* Отступ снизу */   margin-left: 700px; /* Отступ слева */ }

Слайд 10

Сайдбар занял своё место и готов к дальнейшим преобразованиям
И вот теперь пришло

Сайдбар занял своё место и готов к дальнейшим преобразованиям И вот теперь
время познакомиться с ещё одним замечательным свойством CSS, которое называется float (наплывание или обтекание).
Прописываем его в селектор sidebar, и происходит следующее: блок сайдбар, как бы приподнимется, и освободит место для других блоков, которые тут же его займут, а сайдбар, как бы наплывёт на них.  В значении у float ставим  right(справа), так как сайдбар находится справа.

Слайд 11

#sidebar{   height: 80px; /* Высота, временная */   width: 200px; /* Ширина */   background: #2ff553; /*

#sidebar{ height: 80px; /* Высота, временная */ width: 200px; /* Ширина */
Фоновый цвет */   margin-bottom: 10px; /* Отступ снизу */   margin-left: 700px; /* Отступ слева */   float: right; /* Обтекание справа */ }

Слайд 12

Теперь нам осталось укоротить блок content, Так как общая заданная длина у нас

Теперь нам осталось укоротить блок content, Так как общая заданная длина у
900px, то расчёт делается исходя из этого: 900-200(ширина сайдбара) — 10(ширина зазора между блоками)=690px.

Слайд 13

Каркас сайта с одним сайдбаром справа

#content{   height: 80px; /* Высота временная */   width: 690px;

Каркас сайта с одним сайдбаром справа #content{ height: 80px; /* Высота временная
/* Ширина */   background: #9ef7af; /* Фоновый цвет */   margin-bottom: 10px; /* Отступ снизу */ }

Слайд 14

Полный код страницы

Каркас сайта Оболочка      Шапка         

Сайдбар         

Контент         
Подвал         
    

Слайд 16

Каркас сайта с одним сайдбаром слева. Найдите три отличия в коде.

Каркас сайта с одним сайдбаром слева. Найдите три отличия в коде. Каркас
/> Каркас сайта