УП.02

На 21.05.2021

 Тема:  Распределение блоков на веб-странице

Цель: Закрепить полученные знания об оформление текста на веб-странице при помощи html и css

Теоретические сведения

Одной из лучших сторон CSS является то, что стили дают нам возможность позиционировать содержимое и элементы на странице практически любым мыслимым образом. Это вносит структурность в наш дизайн и помогает сделать контент более наглядным.

Есть несколько разных типов позиционирования в CSS, каждый из этих типов имеет свою область действия. В этой главе мы собираемся взглянуть на несколько различных случаев применения — создание многократно используемых макетов и уникальное позиционирование одноразовых элементов, а также описание нескольких методов как это сделать.

Далее читайте в источнике по ссылке: 

Ход работы

1. Скопируйте предыдущую работу на новый лист Notepad++ и сохраните под именем pz18.html в той же папке.

2. Удалите содержимое блока id='content" кроме элемента <h1> и введите новый заголовок "Виды публикаций и особенности их размещения". Не забудьте также про элемент <title>.

 

3. Ниже добавьте новый раздел с id="center", в котором разместите следующий текст:

Как и в области периодической печати, сфера интернет-журналистики включает в себя множество жанров, каждый из которых имеет свои особенности. 
Веб-обзор
Публикации проанализированных статей Интернета по определенной тематике с определением дальнейших перспектив их развития в сети. Благодаря таким обзорам можно сразу определить: удачная ли тема выбрана изданием, интересен или нет для аудитории способ раскрытия данной темы. Так как количество сайтов увеличивается, ранее созданным порталам порой сложно удержать своего читателя. Нужно каждый день производить новый, отличный от конкурентного контент.
Пользователю интересны яркие и динамичные проекты, в которых информация представлена качественно и привлекает внимание. Чтобы не тратить попросту время, достаточно прочитать обзор на интересующую тематику и выбрать сайты, ознакомиться с которыми имеет смысл более подробно. Но обзоры помогают не только пользователям - подбор информации о том, что интересно человеку сегодня, позволяет изданиям находиться на плаву, выпуская материалы на «злобу дня», давая на них комментарии ведущих специалистов в данной области знания.
Блог
Cетевой журнал-страница с короткими записями, ссылками, полем для комментариев. На сегодняшний день блогосфера, как говорилось ранее, динамично развивающаяся и набирающая популярность область массовой информации и коммуникации. Существуют разные типы блогов - текстовой, видео, аудио. Этот способ ведения новостных сообщений доступен каждому, достаточно просто зарегистрироваться на специальных сайтах, и можно начинать творить. Как правило, авторы делятся со своими читателями эмоциями, рассказывают о прошедших и будущих мероприятиях, комментируют прочитанное, увиденное как самими, так и другими членами блогосферы. Блог - это своего рода дневник или журнал событий (самый крупный портал, представляющий услуги по созданию блога так и называется Живой Журнал). Люди, ведущие такие записи, гордо носят имя блоггеров. Если раньше было принято вести личные дневники и делиться написанным в них только с самыми близкими людьми (дневники известных людей), то сейчас модно делиться своими наблюдениями со всеми. 
Авторский проект
личное мнение по поводу происходящих процессов с точки зрения одного человека. Как критерий
успешности такого автора - количество отзывов, ссылок на него в публикациях других участников
коммуникации. Авторские проекты - это первая ступень развития интернет-журналистики в
нашей стране. Именно такие проекты раскрыли возможности Интернета как средства массовой
информации. Благодаря минимальным затратам авторские проекты успешно продвигались в сетях,
завоевывая массовую аудиторию и набирая популярность.
Социальная сеть
Интерактивный многопользовательский веб-сайт, контент которого наполняется самими участниками сети. Сайт представляет собой автоматизированную социальную среду, позволяющую общаться группе пользователей, объединенных общим интересом. К ним относятся и тематические форумы, особенно отраслевые, которые активно развиваются в последнее время.

Как и в предыдущей работе данный текст необходимо разбить на отдельные части. Но теперь мы будем использовать не разделы и абзацы, а секции.

4. Каждый абзац "оберните" тегом <section>...</section>.

5. Сделайте заголовки 5-го уровня по видам публикаций.

Теперь необходимо позиционировать наши секции в отдельных блоках. Для этого нужно задать стиль для элемента <section>.

6. В файл main.css перед селектором #footer добавьте селектор section.

7. Задайте для элемента следующий стиль: 

цвет фона: #D3EFF3;
внутренний и внешние отступы по 10px;
ширина блока 45% от общей ширины окна
радиус рамки блока 6px;
расположение элемента слева от родителя.

Проверьте правильность написания кода:

Обратите внимание, где теперь размещён "подвал". Он как будто обтекает наши секции, как изображения. Для того, чтобы он размещался ниже, необходимо очистить его от этого обтекания. Для этого применяется свойство clear с различными значениями (читайте в теории). 

8. Применим значение both для свойства clear:

В селектор #footer добавим свойство clear со значением both: