8 Внеурочные занятия 8 класс. Блочная верстка сайтов HTML
презентация к уроку (8 класс)

Слайд 1

Блочная верстка сайтов HTML . Выполнила: Шалагина Екатерина Алексеевна Внеурочные занятия для 8 класса ГБОУ гимназия №293 Санкт-Петербург, 2020

Слайд 2

Отличия блочной вёрстки от табличной Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега < table > , то концепция блочной вёрстки основана на активном использовании универсальных тегов < div > , внутрь которых помещается содержимое, включая другие теги. Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки < div > , которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как < table > — это таблица, которую нужно использовать для отображения табличных данных и не более того. Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку « кроссбраузерной », то есть одинаково отображаемой любым обозревателем. СУТЬ БЛОЧНОЙ ВЁРСТКИ На бумаге или в графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны. Каждая часть страницы помещается в свой блок < div > : верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки. Конечный HTML-документ представляет собой набор блоков < div > с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом < link > , или как минимум в контейнере < style > секции < head > .

Слайд 3

Принципы блочной вёрстки Первый — конечно же, повсеместное использование тега < div > , который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много. Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально . Третий принцип — таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту. Но, сколько не теоретизируй, а понимать всё проще на примере. Итак, у нас есть макет (рисунок выше). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример . ЗАДАНИЕ: Изобразить условный макет своей страницы.

Слайд 4

Шаблон страницы с блочной вёрсткой Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги». Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким: Разберём некоторые моменты. < div id =" container "> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри < table > . Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока < div id =" clear "> . Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS. Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.

Слайд 5

Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так. Шаблон страницы с блочной вёрсткой

Слайд 6

д обавим файл CSS, код которого приведён ниже. Для удобства размещения css - кода здесь в презентации, он расположен в две колонки. В действительности же все стили прописываются в одном css - файле друг за другом (порядок не важен, соблюдение синтаксиса обязательно). body { background: #FFF; color: #000; font-family: Arial, sans-serif; font-size: 14px; } # header { background: #F5DEB3; width: 100%; height: 55px; } # container { background: #FFD700; margin: auto auto ; text-align: center; width: 80%; height: 400px; } # navigation { background: #FE9798; width: 100%; height: 25px; } # sidebar { background: #40E0D0; float: left; width: 20%; height: 280px; } # content { background: #DCDCDC; float: right; width: 80%; height: 280px; } # clear { clear: both; } # footer { background: #00BFFF; width: 100%; height: 40px; } Задание: создать css - файл, добавить приведенный в примере код, сохранить файл в той же папке, где расположен html- файл. Запустить в браузере. С помощью стилей мы последовательно оформляем содержимое тега < body > и всех находящихся внутри контейнеров с помощью ранее изученных правил. # clear { clear:both ; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться. CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

Слайд 7

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