Практическое занятие №11

Наименование: Блочная верстка 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>

</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>:

Создание 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: …;
}