Разделы презентаций
- Разное
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Блочная верстка сайта
Содержание
- 1. Блочная верстка сайта
- 2. Исходный макет Header (шапка или заголовок); Навигационное
- 3. Результат
- 4. Верстка блоками DIVРамка (border) – это контур, для
- 5. Практическая работа 1Урок 18 - 19
- 6. Атрибуты relative и absoluteИногда бывает необходимо разместить какой-то блок в строго
- 7. Атрибуты relative и absoluteПредположим, мы хотим разместить дочерний блок в 20
- 8. Атрибуты relative и absoluteПроблема решается довольно просто: родителю дополнительно задаётся position: relative;Дополните css:Сохраните и оцените результат в браузере:
- 9. Практическая работа 2Урок 18 - 19
- 10. Самостоятельная работаСоздать web-страницу, внешний вид которой изображен ниже на рисунке:
- 11. Шаг 1Контейнер будет содержать в себе пять
- 12. В файле style.css описываем параметры всего документа:Шаг 1
- 13. Работаем в index.html:12Шаг 1
- 14. В файле style.css описываем параметры контейнера:Шаг 1#
- 15. В файле style.css описываем параметры top:Шаг 1
- 16. Работаем в index.html – добавим еще 4 блока в контейнер:Шаг 23
- 17. Шаг 2Следующим этапом верстки будет расположение трех
- 18. Шаг 2
- 19. Шаг 3Блок footer добавьте самостоятельно4
- 20. Самостоятельная работа 2Создать web-страницу, внешний вид которой изображен ниже на рисунке:
- 21. CSS справочникhttp://html-css-tegs.ru/
- 22. Скачать презентанцию
Исходный макет Header (шапка или заголовок); Навигационное меню; Боковая панель; Основной блок с контентом; Footer (ноги или подвал);
Слайды и текст этой презентации
Слайд 2Исходный макет
Header (шапка или заголовок);
Навигационное меню;
Боковая панель;
Основной блок с контентом;
Слайд 4Верстка блоками DIV
Рамка (border) – это контур, для которого можно задать
такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).
Поля
(padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.
Слайд 6Атрибуты relative и absolute
Иногда бывает необходимо разместить какой-то блок в строго заданном положении относительно
родительского.
Задание 1.
Создайте html-документ, в теле которого разместите код, как на
рисунке:
Слайд 7Атрибуты relative и absolute
Предположим, мы хотим разместить дочерний блок в 20 пикселях левее и
ниже верхнего левого угла родительского блока. Создайте таблицу стилей css:
Сохраните
и оцените результат в браузере:Не совсем тот результат!
Наш дочерний элемент ушел не к маме, а к дедушке (т.е. к BODY)!
Слайд 8Атрибуты relative и absolute
Проблема решается довольно просто: родителю дополнительно задаётся position: relative;
Дополните css:
Сохраните и
оцените результат в браузере:
Слайд 11Шаг 1
Контейнер будет содержать в себе пять блоков:
TOP –
шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы,
поиск, навигацию;LEFT и RIGHT – левая и правая колонки, обычно содержат рекламу, навигацию, рассылку, новости и т. д.:
CENTER – содержит основной текст страницы;
FOOTER – подвал сайта, содержащий копирайты и другие сведения о сайте, возможно, дублировать навигацию, что является признаком хорошего тона.
Слайд 14В файле style.css описываем параметры контейнера:
Шаг 1
# этот знак говорит,
что элемент является уникальным атрибутом и используется в HTML документе
в теге div один раз.
Слайд 17Шаг 2
Следующим этапом верстки будет расположение трех блоков последовательно по
горизонтали. Для этого используем float – это позволит
обтекать другим элементам наш блок справа или слева. Добавим в css-документ следующий код:
Слайд 20Самостоятельная работа 2
Создать web-страницу, внешний вид которой изображен ниже на
рисунке:
