Урок 1 6
В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, подвал, боковая панель, основной контент ) будет находиться и сколько места занимать, готовятся картинки, фоны. Каждая часть страницы помещается в свой блок < div >: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки. Оформление находится в отдельном CSS-файле, подключенном к странице тегом < link >. 1 2 3
Н TML код: <div> Блок 1 </div> <div> Блок 2 </div> Блок – прямоугольная область на странице, которая по умолчанию занимает все доступную ширину и начинается с новой строки. Самым распространённым элементом, используемым в блочной верстке, является универсальный элемент < div >.
Рамка ( border ) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная). Поля ( padding ) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока. Отступы ( margin ) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.
Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задается такой параметр как « обтекание » float. left right
Н TML код: <div class=“name1"> Блок 1 </div> <div class=“name2"> Блок 2 </div> Для того, чтобы каждому блоку задать своё оформление, элементам < div > присваиваем собственный класс. Стили каждого класса прописываем в стилевом файле. div.name1 { …; }
Урок 16
Дополняем наш стилевой файл! Открываем файл с помощью SublimeText
Header ( шапка или заголовок); Навигационное меню; Боковая панель; Основной блок с контентом ; Footer ( ноги или подвал);
# clear { clear:both ; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.
Урок 16
TOP – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию; LEFT и RIGHT – левая и правая колонки, обычно содержат рекламу, навигацию, рассылку, новости и т. д.: CENTER – содержит основной текст страницы; FOOTER – подвал сайта, содержащий копирайты и другие сведения о сайте, возможно, дублировать навигацию, что является признаком хорошего тона. Задание 1. Создайте страницу, содержащую 5 блоков
http://html-css-tegs.ru/
Урок 17
Header ( шапка или заголовок); Навигационное меню; Боковая панель; Основной блок с контентом ; Footer ( ноги или подвал);
В файле style.css
В файле index.html
В файле style.css
В файле index.html
В файле style.css
В файле style.css (продолжение)
В файле index.html
В файле style.css
В файле style.css (продолжение)
В файле style.css
В файле style.css
В файле style.css
