Разделы презентаций

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

Содержание

План работы над сайтомВ графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, подвал, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.Каждая часть страницы

Слайды и текст этой презентации

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

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

Слайд 2План работы над сайтом
В графическом редакторе создаётся макет сайта: размечается,

где какая область страницы (шапка, подвал, боковая панель, основной контент)

будет находиться и сколько места занимать, готовятся картинки, фоны.

Каждая часть страницы помещается в свой блок 

: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Оформление находится в отдельном CSS-файле, подключенном к странице тегом .

1

2

3

План работы над сайтомВ графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, подвал, боковая

Слайд 3Верстка блоками DIV
НTML код:

Блок 1
Блок 2
Блок

– прямоугольная область на странице, которая по умолчанию занимает все

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

Слайд 4Верстка блоками DIV
Рамка (border) – это контур, для которого можно задать

такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля

(padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.

Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Верстка блоками DIVРамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип

Слайд 5Верстка блоками DIV
Если нам нужно расположить несколько блоков горизонтально, то

в их свойствах задается такой параметр как «обтекание» float.



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

Слайд 6Верстка блоками DIV
НTML код:
Блок

2
Для того, чтобы каждому блоку задать своё оформление, элементам

присваиваем собственный класс .

Стили каждого класса прописываем в стилевом файле.

div.name1 {
…;
}

Верстка блоками DIVНTML код: Блок 2 Для того, чтобы каждому блоку задать своё оформление, элементам присваиваем собственный

Слайд 7Практическая работа
Урок 16

Практическая работаУрок 16

Слайд 8Практическая работа
Дополняем наш стилевой файл!

Открываем файл с помощью SublimeText

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

Слайд 91. Макет
Header (шапка или заголовок);
Навигационное меню;
Боковая панель;

Основной блок с контентом;
Footer (ноги или подвал);

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

Слайд 102. HTML код страницы

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

Слайд 113. CSS код

3. CSS код

Слайд 123. CSS код

3. CSS код

Слайд 133. CSS код
#clear { clear:both; } запрещает обтекание элемента слева

и справа. Если убрать это правило, вёрстка «поедет» и низ

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

Слайд 14Самостоятельная работа
Урок 16

Самостоятельная работаУрок 16

Слайд 15TOP – шапка сайта, обычно содержит логотип компании, название, заголовки

и слоганы, поиск, навигацию;
LEFT и RIGHT – левая и правая

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

Задание 1.
Создайте страницу, содержащую 5 блоков

TOP – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию;LEFT и RIGHT –

Слайд 16CSS справочник
http://html-css-tegs.ru/

CSS справочникhttp://html-css-tegs.ru/

Слайд 17Практическая работа
Урок 17

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

Слайд 18Исходный макет
Header (шапка или заголовок);
Навигационное меню;
Боковая панель;

Основной блок с контентом;
Footer (ноги или подвал);

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

Слайд 191. Оформление Header
В файле style.css

1. Оформление HeaderВ файле style.css

Слайд 202. Оформление шрифтов в Header
В файле index.html

2. Оформление шрифтов в HeaderВ файле index.html

Слайд 212. Оформление шрифтов в Header
В файле style.css

2. Оформление шрифтов в HeaderВ файле style.css

Слайд 223. Оформление блока навигации
В файле index.html

3. Оформление блока навигацииВ файле index.html

Слайд 233. Оформление блока навигации
В файле style.css

3. Оформление блока навигацииВ файле style.css

Слайд 243. Оформление блока навигации
В файле style.css
(продолжение)

3. Оформление блока навигацииВ файле style.css(продолжение)

Слайд 254. Оформление Footer
В файле index.html

4. Оформление FooterВ файле index.html

Слайд 264. Оформление Footer
В файле style.css

4. Оформление FooterВ файле style.css

Слайд 274. Оформление Footer
В файле style.css
(продолжение)

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

Слайд 285. Оформление блока левая панель
В файле style.css

5. Оформление блока левая панельВ файле style.css

Слайд 295. Оформление блока левая панель
В файле style.css

5. Оформление блока левая панельВ файле style.css

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

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

Слайд 31Результат

Результат

Похожие презентации

Паралимпийские игры Паралимпийские игры 575
Кафедра ПБТПиП Санкт-Петербургский университет ГПС МЧС России КАФЕДРА ПОЖАРНОЙ Кафедра ПБТПиП Санкт-Петербургский университет ГПС МЧС России КАФЕДРА ПОЖАРНОЙ 226
Внутренняя политика Александра III Внутренняя политика Александра III 267
Профессиональное образовательное учреждение Сыктывкарский кооперативный Профессиональное образовательное учреждение Сыктывкарский кооперативный 244
Всемирный день сердца – 29 сентября Всемирный день сердца – 29 сентября 245
Экология Экология 209
Аналитический отчёт за 2019-2020 год группа Ромашка Аналитический отчёт за 2019-2020 год группа Ромашка 179
Всё о абортах… Всё о абортах… 232
У всякого мастера свои затеи 3 класс У всякого мастера свои затеи 3 класс 398
Конспект урока по теме Конспект урока по теме "Мой город" 202
Опыты с песком Опыты с песком 223
Гато Выполнил: Феофанов И.С. ПКД 18-11-1 Гато Выполнил: Феофанов И.С. ПКД 18-11-1 149
Комплекс специальной спутниковой связи «Стрела-3» Комплекс специальной спутниковой связи «Стрела-3» 370
Материалы, применяемые при протезировании зубов облицовками Материалы, применяемые при протезировании зубов облицовками 265
Министерство образования и науки Челябинской области Государственное бюджетное Министерство образования и науки Челябинской области Государственное бюджетное 174
Компьютерные сети Компьютерные сети 190
Задание №7 Задание №7 149
БЮДЖЕТНОЕ УСТРОЙСТВО РЕСПУБЛИКИ БЕЛАРУСЬ БЮДЖЕТНОЕ УСТРОЙСТВО РЕСПУБЛИКИ БЕЛАРУСЬ 298
Как написать научную статью Как написать научную статью 268
ВОЛЕЙБОЛ- правила игры ВОЛЕЙБОЛ- правила игры 175

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.

Для правообладателей

Яндекс.Метрика