Презентация на тему "8 Внеурочные занятия 8 класс. Блочная верстка сайтов html"

Скачать презентацию (0.28 Мб)
0 загрузок
0.0 оценка

Презентация: 8 Внеурочные занятия 8 класс. Блочная верстка сайтов html

Включить эффекты

1 из 7

ВКонтакте Одноклассники Мой Мир Телеграм

Ваша оценка презентации

Оцените презентацию по шкале от 1 до 5 баллов

0.0

0 оценок

Аннотация к презентации

Посмотреть и скачать презентацию по теме "8 Внеурочные занятия 8 класс. Блочная верстка сайтов html" по педагогике, включающую в себя 7 слайдов. Скачать файл презентации 0.28 Мб. Для учеников 8 класса. Большой выбор учебных powerpoint презентаций по педагогике

Формат

pptx (powerpoint)
Количество слайдов

7
Аудитория

8 класс
Слова

педагогика
Конспект

Отсутствует

Содержание

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

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

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

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

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги». Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким: Разберём некоторые моменты. — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри . Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока . Это вспомогательный слой, его смысл будет понятен, когда вы увидите код 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-файл. Запустить в браузере. С помощью стилей мы последовательно оформляем содержимое тега
и всех находящихся внутри контейнеров с помощью ранее изученных правил. #clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться. CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.
Слайд 7
страница с блочной вёрсткой

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