Веб верстка в стиле «Газетная страница»

/ 👁 9206

Верстка веб страницы в «газетном» стиле смотрится очень необычно и интересно. Такая верстка может подойти разным веб сайтом (или отдельным их разделам), но самое интересное, что сделать «газетную» верстку достаточно легко, зная немного CSS3 и HTML5.
дополнительные материалы к урокам

демо версия урока

Что же понадобится для того, чтобы добиться вида «газетной» или «журнальной» веб страницы?

Основными характеристиками таких страниц является разбиение текста на колонки, врезка небольшого фрагмента текста крупным шрифтом где-то в середине статьи, линии-разделители, находящиеся между колонками. На газетных страницах также вставляются фотографии. Можно выбрать черно-белые фото и тогда верстка будет напоминать газетную страницу. Если выбрать цветные фотографии, то верстка будет больше похожа на журнальную.

Я возьму две черно-белые фотографии и текст о Мерлин Монро. Все это Вы можете найти в дополнительных материалах к уроку или использовать свои материалы.

Давайте начнем делать веб верстку в стиле «Газетная страница».

1. Первое, что нам нужно сделать – это создать новый html5 документ, в котором мы будем использовать html5 теги. Внутри тегов body будет расположен тег article, который и будет содержать текст нашей статьи, разделенный на абзацы (при помощи тегов p).

Также тег article будет иметь заголовок (тег header) и область для врезки отрывка из статьи (тег aside). Где-то между абзацами текста нужно будет вставить картинки (заранее создайте для них папку img и сохраните картинки в нее).

Также создадим файл таблицы стилей и дадим ему имя «style.css». Его нужно сохранить в той же папке, что и сам html файл и подключить к нему (если Вы будете сохранять файл стилей в отдельной папке, не забудьте проверить правильность пути к нему).

На коде ниже Вы можете увидеть всю структуру html файла. Я только не вставляла текст в демонстрационный код, чтобы не перегружать его. Думаю, с этим у Вас не возникнет проблем (если что, то Вы всегда можете заглянуть в файл в дополнительных материалах).

<!doctype html>
<html>
<head>
<meta charset="windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Untitled Document</title>
</head>
<body>
<article>
<header><h1>Заголовок статьи</h1>
<h4>Подзаголовок</h4>
</header>
<p>Здесь должен быть первый абзац текста</p>
<img src="img/1.jpg">
<p>Второй абзац текста</p>
<p>Третий абзац и так далее</p>
<img src="img/2.jpg">
<p>абзац текста</p>
<aside>Врезка из статьи</aside>
<p>абзац текста</p>
</article>
</body>
</html>

 

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

Демонстрационный код выше дан для того, чтобы Вы поняли принцип построения страницы.

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

Сейчас наша страница будет выглядеть вот так:

html5 верстка веб страницы

2. Теперь займемся стилями нашей веб страницы.

Переходим в файл «style.css» и для начала пропишем основные стили для страницы. Мы придадим цвет для тега body, а также для тега article, где находится наша статья. Также настроим параметры ширины, позиционирования основных элементов и шрифта.

Пропишите в файле «style.css» следующий код:

body{
	background:#444;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:62.5%;
	line-height:1.4em;
}
article{
	position:relative;
	margin:auto;
	width:920px;
	padding:20px;
	background:white;
	box-shadow:0px 0px 10px #333;
}
article p{
	font-size:1.2em;
	line-height:1.6em;
}

 

Теперь наша страница выглядит так:

придание основных стилей веб странице

3. Теперь нужно разделить весть наш контент на 2 колонки (кстати, Вы можете делить и на больше колонок. Просто меняйте значения параметра column-count). А также нужно указать расстояние между колонками. Эти свойства нужно прописывать, используя присавки для разных браузеров (так мы обеспечим кроссбраузерность нашей веб страницы). Итак, продолжите стили для article следующим кодом:

-webkit-column-count:2;
	-moz-column-count:2;
	-ms-column-count:2;
	-o-column-count:2;
	column-count:2;
	-webkit-column-gap:1em;
	-moz-column-gap:1em;
	-o-column-gap:1em;
	-ms-column-gap:1em;
	column-gap:1em;

 

Если мы перезагрузим браузер, то увидим следующую картину:

разделение статьи не колонки при помощи CSS3

4. Настало время поработать с заголовком нашей статьи. Нужно сделать его размер гораздо крупнее, чем текст самой статьи и сделать все буквы заглавными. Также расположим его по всей ширине страницы и сделаем нижнюю рамку.

У нас есть также и небольшой подзаголовок. Его мы выровняем про правому краю.

article header{
	position:relative;
	display:block;
	-webkit-column-span:all;
	-moz-column-span:all;
	-o-column-span:all;
	-ms-column-span:all;
	 column-span:all;
	border-bottom:2px solid #333;

}
article header h1{
	font-size:8em;
	line-height:1em;
	font-weight:bold;
	text-transform:uppercase;
	margin:0;
	padding:0;
}
article header h4{
	text-align:right;
	padding:0;
	margin:0;
}

 

Немного о поддержке браузерами свойства column-span

Свойство column-span определяет сколько колонок будет охватывать данный элемент.

Некоторое время назад оно не поддерживалось ни одним из популярных браузеров. Сегодня ситуация значительно изменилось и это свойство прекрасно работает во всех популярных браузерах кроме Firefox.

Будем надеяться, что браузер Firefox тоже в скором времени будет поддерживать свойство column-span.

Однако, на данный момент наша страница во всех остальных браузерах будет выглядеть вот так:

заголовок растянутый на несколько колонок

А в браузере Firefox вот так:

свойство column-span в Firefox

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

5. Теперь нам нужно сделать врезку в статью. Для этого обычно выбирается наиболее интересный кусочек из статьи, копируется, вставляется где-то в тексте, выделяясь более крупным шрифтом другого стиля (в нашем случае он находится в теге aside). При желании можно также поменять и цвет у этого кусочка. Все зависит от Вашего дизайна.

Итак, пропишем для тега aside следующие стили:

article aside{
	position:relative;
	display:block;
	font-size:2em;
	line-height:1.2em;
	font-style:italic;
	-webkit-column-span:all;
	-moz-column-span:all;
	-o-column-span:all;
	-ms-column-span:all;
	 column-span:all;
	 border-top:2px solid #333;
	 border-bottom:2px solid #333;
	 margin-bottom:20px;
}

 

Теперь он будет выглядеть вот так:

оформление тега aside

Здесь происходит то же самое, что и в случае с заголовком.

К сожалению, пока что в браузере Firefox это будет выглядеть несколько иначе:

тег aside в браузере Firefox

6. Остался последний штрих. Нужно сделать линии между колонками нашей статьи. А делается это достаточно просто.

Необходимо к стилям тега article добавить следующие стоки:

-webkit-column-rule: 1px solid #333;
	-moz-column-rule: 1px solid #333;
	-o-column-rule: 1px solid #333;
	-ms-column-rule: 1px solid #333;
	column-rule: 1px solid #333;

 

Перезагрузите браузер и посмотрите на результат:

разделители для колонок

Вот так просто можно сделать газетную или журнальную страницу у себя на сайте.

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

А также подписывайтесь на обновление блога, если Вы еще не подписались. Я обещаю Вам много интересных и полезных статей и уроков. Все о веб!

Успехов Вам и до встречи в следующих уроках!

Tags: ,

Leave a Reply