Блочная верстка сайта
План работы над сайтом
Верстка блоками DIV
Верстка блоками DIV
Верстка блоками DIV
Верстка блоками DIV
Практическая работа
Практическая работа
1. Макет
2. HTML код страницы
3. CSS код
3. CSS код
3. CSS код
Самостоятельная работа
CSS справочник
Практическая работа
Исходный макет
1. Оформление Header
2. Оформление шрифтов в Header
2. Оформление шрифтов в Header
3. Оформление блока навигации
3. Оформление блока навигации
3. Оформление блока навигации
4. Оформление Footer
4. Оформление Footer
4. Оформление Footer
5. Оформление блока левая панель
5. Оформление блока левая панель
6. Оформление блока Основной контент
Результат
1.53M
Категория: ИнтернетИнтернет

Блочная верстка сайта. Урок 16

1. Блочная верстка сайта

Урок 16

2. План работы над сайтом

В графическом редакторе создаётся макет сайта:
размечается, где какая область страницы (шапка,
1
подвал, боковая панель, основной контент) будет
находиться и сколько места занимать, готовятся
картинки, фоны.
Каждая часть страницы помещается в свой блок <div>:
верх сайта — в первый, меню — во второй, контент —
2 в третий и т. д. Каждый блок наполняется содержимым
средствами HTML, а также позиционируется и
оформляется с помощью CSS-разметки.
Оформление находится в отдельном CSS-файле,
3
подключенном к странице тегом <link>.

3. Верстка блоками DIV

Блок – прямоугольная область на странице,
которая по умолчанию занимает все доступную
ширину и начинается с новой строки.
Самым распространённым элементом,
используемым в блочной верстке, является
универсальный элемент <div>.
НTML
код:
<div> Блок 1
</div>
<div> Блок 2
</div>

4. Верстка блоками DIV

Рамка (border) – это контур, для которого можно задать
такие характеристики как толщина, цвет и тип
(пунктирная, сплошная, точечная).
Поля (padding) – отделяют содержимое блока от его
рамки, чтобы текст, например, не был «впритык» к
стенкам блока.
Отступы (margin) – это пустое
пространство между
различными блоками,
позволяющее на заданном
расстоянии расположить два
блока относительно друг друга.

5. Верстка блоками DIV

Если нам нужно расположить несколько блоков
горизонтально, то в их свойствах задается такой
параметр как «обтекание» float.
left
right

6. Верстка блоками DIV

Для того, чтобы каждому блоку задать своё
оформление, элементам <div> присваиваем
собственный класс .
НTML код:
<div class=“name1"> Блок 1 </div>
<div class=“name2"> Блок 2 </div>
Стили каждого класса прописываем в стилевом
файле.
div.name1 {
…;
}

7. Практическая работа

Урок 16

8. Практическая работа

Дополняем наш
стилевой файл!
Открываем файл с
помощью
SublimeText

9. 1. Макет

Header (шапка или заголовок);
Навигационное меню;
Боковая панель;
Основной блок с контентом;
Footer (ноги или подвал);

10. 2. HTML код страницы

11. 3. CSS код

12. 3. CSS код

13. 3. CSS код

#clear { clear:both; } запрещает обтекание элемента слева и
справа. Если убрать это правило, вёрстка «поедет» и низ
сайта перестанет корректно отображаться.

14. Самостоятельная работа

Урок 16

15.

Задание 1.
Создайте
страницу,
содержащую 5
блоков
TOP – шапка сайта, обычно содержит логотип компании, название, заголовки и
слоганы, поиск, навигацию;
LEFT и RIGHT – левая и правая колонки, обычно содержат рекламу, навигацию,
рассылку, новости и т. д.:
CENTER – содержит основной текст страницы;
FOOTER – подвал сайта, содержащий копирайты и другие сведения о сайте,
возможно, дублировать навигацию, что является признаком хорошего тона.

16. CSS справочник

http://html-css-tegs.ru/

17. Практическая работа

Урок 17

18. Исходный макет

Header (шапка или заголовок);
Навигационное меню;
Боковая панель;
Основной блок с контентом;
Footer (ноги или подвал);

19. 1. Оформление Header

В файле
style.css

20. 2. Оформление шрифтов в Header

В файле index.html

21. 2. Оформление шрифтов в Header

В файле
style.css

22. 3. Оформление блока навигации

В файле index.html

23. 3. Оформление блока навигации

В файле
style.css

24. 3. Оформление блока навигации

В файле style.css
(продолжение)

25. 4. Оформление Footer

В файле index.html

26. 4. Оформление Footer

В файле
style.css

27. 4. Оформление Footer

В файле style.css
(продолжение)

28. 5. Оформление блока левая панель

В файле
style.css

29. 5. Оформление блока левая панель

В файле
style.css

30. 6. Оформление блока Основной контент

6.
Оформле
ние блока
Основной
контент
В файле
style.css

31. Результат

English     Русский Правила