Наименование: Блочная верстка HTML – страницы с подключением внешней CSS - таблицы
1. Цель: Научится создавать веб – страницы с применением блочной верстки. Осуществлять подключение внешнего CSS – файла. Формировать компетенции ОК 1, ОК 2, ОК 4, ОК 8; овладеть знаниями и умениями для освоения ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5
2. Подготовка к занятию: по предложенной литературе повторить тему «Введение в таблицы стилей и язык CSS» и ответить на следующие вопросы:
2.1 Назначение CSS?
2.2 Какими способами можно назначить цвет в правилах CSS?
3. Литература:
3.1 Шомас Е.А. Веб – дизайн, учебное пособие. Самара, КС ПГУТИ, 2014
3.2 https://html5book.ru/osnovy-html/ - Основы HTML
4. Перечень оборудования и программного обеспечения:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Браузеры
4.3 Текстовый редактор
5. Задание:
5.1 Создать шаблон веб страницы по следующему образцу без использования таблиц.
5.2 Подключите внешний CSS – файл, в котором пропишите правила к каждому из блоков определяя его высоту и ширину исходя из того, что общая ширина и высота шаблона – 900 х 1024 px. Каждый блок сделать разного оттенка одной цветовой гаммы используя графический редактор.
|
|
6. Порядок выполнения работы:
6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;
6.2 Выполнить задание практического занятия;
6.3 Дать ответы на контрольные вопросы;
7. Содержание отчета:
7.1 Наименование и цель работы
7.2 Код таблицы CSS
7.3 Ответы на контрольные вопросы
7.4 Вывод о проделанной работе
8. Контрольные вопросы:
8.1 Из чего состоит правило CSS?
8.2 Запишите два способа внедрения таблиц стилей в html – сценарий
ПРИЛОЖЕНИЕ:
Разметка и использование тегов
Разметка HTML всегда идет перед стилями. Нет смысла приступать к CSS без полностью готового HTML - кода. Больше всего тегов и контента используется внутри тега <body>.
Очень важный тег для разделения и определения структуры - тег <div>. Используя данный тег, можно разделить содержание на ячейки. Внутри данного тега можно использовать и прочие теги для определения контента (например, ссылки, текст, изображения), которые потом можно красиво оформить с помощью CSS.
Код для данного шаблона должен выглядеть так:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок</title>
<meta http-equiv="content-type" content= "text/html; charset="utf-8" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="navigation">
</div>
…
</div>
</body>
</html>
У тегов div есть ID. Это понадобится нам для оформления каждой ячейки. ID используется для маркировки тега и придания ему уникального стиля. В то время как “class” используется для повторяющихся элементов дизайна.
|
|
Также, в примере используется еще один div “wrapper”, которые как бы "обертывает" все остальные теги. Это нам пригодится позже для позиционирования нашей странички.
Ссылка на таблицу стилей
В таблице стилей мы определяем элементы дизайна страницы. Если Вы просмотрите Вашу страницу в браузере сейчас - ничего не появится. Все потому что мы не придали нашим тегам никакого цвета и формы. И поскольку наш CSS будет внешним, первым делом Вам необходимо убедиться в том, что на странице есть ссылка на таблицу стилей.
Добавьте следующий код между <head></head>:
<link rel="stylesheet" type="text/css" href="style.css" />
Создание CSS
Синтаксис CSS состоит из селектора, свойства и значения. Селектор - это тег, который необходимо оформить в дизайне, свойство - тип атрибута, который Вы хотите добавить, значение - количественное измерение свойства.
Свойства и возможные значение в CSS:
Свойство "background" (фоновое изображение) может задавать изображение или цвет, или и то и другое. Для показа изображения, значение должно состоять из пути к изображению. Для определения цвета используется шестнадцатеричный код.
Свойство "color" используется для определения цвета селектора. Значения записываются в виде шестнадцатеричного кода (пример: #FFFFFF для белого).
Свойство "margin" используется для определения позиции селектора. Значения задают расстояние сторон селектора до края окна браузера в следующем порядке: top, left, bottom, right. Если нам необходимо разместить страницу по центру, мы пишем "0px auto 0px". Указание всех четырех сторон не является обязательным.
Свойство "width" задает желаемую ширину в пикселях любого селектора.
Свойство "height" - высота в пикселях.
Свойство "float" позволяет нам позиционировать элементы внутри селекторов, в большинстве случаев справа или слева. Это свойство нам понадобиться для размещения блока меню.
Для создания CSS файла откройте свой любимый текстовый редактор и сохраните новый документ как style.css в папке с страницами сайта. Добавьте следующий код:
#wrapper {
background: #FFFFFF;
margin: 60px auto;
width: 900px;
height: 1024px;
}
#header {
background: …;
height: …;
width: …;
}