Верстка веб страницы в «газетном» стиле смотрится очень необычно и интересно. Такая верстка может подойти разным веб сайтом (или отдельным их разделам), но самое интересное, что сделать «газетную» верстку достаточно легко, зная немного 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>
Положение картинок в тексте и тег для врезки куска статьи в текст Вы можете регулировать в зависимости от величины Вашей статьи и от того, какой Вы хотите ее видеть. Вы можете это делать в процессе работы, находя наилучший вариант.
Демонстрационный код выше дан для того, чтобы Вы поняли принцип построения страницы.
Если этого будет Вам недостаточно, Вы можете заглянуть в дополнительные материалы и посмотреть код демо страницы там.
Сейчас наша страница будет выглядеть вот так:
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;
Если мы перезагрузим браузер, то увидим следующую картину:
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 вот так:
Вы должны помнить об этом и тестировать страницу во всех браузерах. Даже если какое-то из свойств не поддерживается браузером, нужно постараться чтобы страница выглядела красиво при любом варианте.
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; }
Теперь он будет выглядеть вот так:
Здесь происходит то же самое, что и в случае с заголовком.
К сожалению, пока что в браузере 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 поддерживаются разными браузерами в более полном объеме. И конечно же, использовать их уже сейчас имеет смысл.
Оставляйте Ваши комментарии и делитесь этим уроком с друзьями с помощью кнопок социальных сетей. Это будет расценено как благодарность.
А также подписывайтесь на обновление блога, если Вы еще не подписались. Я обещаю Вам много интересных и полезных статей и уроков. Все о веб!
Успехов Вам и до встречи в следующих уроках!