![]()
|
|||||||
Блочная верстка в HTML.. Шаблон сайта.Стр 1 из 2Следующая ⇒ Блочная верстка в HTML. Основой создания любого HTML-элемента является блок. Блок представляет собой прямоугольную область. В зависимости от назначения, блоки могут представлять собой: элементы меню, логические разделы сайта, элементы оформления, элементы интерфейса. На сегодняшнем занятии мы рассмотрим несколько примеров их использования: 1) верстка шаблона сайта; 2) создание навигации по сайту; 1. Шаблон сайта. Рассмотрим простейший пример шаблона сайта: Шаблон содержит в себе 5 структурных элементов: 1) <header> - заголовок сайта; 2) <nav> - навигация по сайту; 3) <iframe> - основной элемент, в который будет происходить загрузка страниц; 4) <aside> - часть сайта для дополнительных элементов (реклама, тэги, веб-приложения и др.) 5) <footer> - подвал сайта HTML – код: Можно заметить, что тэги навигации, контента и дополнительных элементов объединены тэгом <section>, это сделано для удобства верстки элементов. Если оставить код в таком виде, вы увидите пустую страницу, необходимо каждому блоку задать свойства позиционирования и как минимум цвета. Будут изменяться 7 основных свойств: 1) внешний отступ элемента – margin; 2) внутренний отступ элемента – padding; 3) граница – border; 4) ширина – width; 5) высота – height; 6) обтекание элемента – float; 7) цвет фона – background-color. Свойства элементов будем задавать при помощи таблиц стилей CSS. Здесь стоит вспомнить основные элементы веб-страницы: НАПОМИНАНИЕ: html-код пишется в тэг body, css-код в тэг style, js-код в script CSS – код: После проделанных операций у вас получится самый распространенный шаблон сайтов. Самостоятельная работа 1: 1. Измените цвета шаблона на свои; 2. Представленный шаблон является наиболее полным, но существуют и упрощенные его версии, для их создания необходимо просто удалить некоторые элементы: a. Удалите подвал сайта. b. Удалите панель дополнительных элементов. c. Удалите заголовок сайта. 3. Измените свойства шаблонов из задания 2, таким образом, чтобы они корректно отображались в браузере.
|
|||||||
|