Создание простейшего макета

Оцените материал
(0 голосов)

Здравствуйте! В этой статье мы обобщим знания полученные из уроков Блочная верстка (2 колонки) и Блочная верстка (3 колонки) и создадим простейший макет страницы для сайта. Макет будет 3 колоночным с основным содержимым и 2 колонками по бокам.

Для начала определим базовую структуру веб-страницы:

 <!DOCTYPE html>
lt;html>
    <head>
        <meta charset="utf-8">
        <link href="/styles.css" rel="stylesheet">
        <title>Блочная верстка в HTML5</title>
    </head>
    <body>
        <div id="header">
            <h1>MySyte.com - Сайт о Lorem Ipsum</h1>
            <div id="nav">
                <ul>
                    <li><a href="#">Главная</a></li>
                    <li><a href="#">Блог</a></li>
                    <li><a href="#">Форум</a></li>
                    <li><a href="#">Контакты</a></li>
                    <li><a href="#">О сайте</a></li>
                </ul>
            </div>
        </div>
        <div class="wrapper">
            <div id="sidebar1" class="aside">
                <h2>The standard Lorem Ipsum passage</h2>
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua..."</p>
                </div>
            <div id="sidebar2" class="aside">
                <h2>1914 translation by H. Rackham</h2>
                <p>It is a long established fact that a reader will be distracted by the readable
                content of a page when looking at its layout.</p>
                <h3>Options</h3>
                <ul>
                    <li>Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                </ul>
            </div>
            <div id="article">
                <h2>What is Lorem Ipsum?</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
                classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
                a Latin professor at Hampden-Sydney College in Virginia...</p>
            </div>
        </div>
        <div id="footer">
            <p>Contacts: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.;/p>
            <p>Copyright © MySyte.com, 2016</p>
        </div>
    </body>
</html>

Просмотреть  пример

В начале идет шапка сайта - блок с header, который содержит заголовок страницы и панель навигации. Далее идет блок wrapper, в котором два сайдбара и блок основного содержимого страницы. Сайдбары условно тоже содержат некоторое содержимое, но главное, что они определены до основного блока. И в самом низу небольшой футер.

В начале веб-страницы определено поключение файла styles.css, который будет стилизовать веб-страницу. Поэтому создадим в одном каталоге с веб-страницей файл styles.css и определим в нем следующее содержимое:

* {
    box-sizing: border-box;
}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, ul, li{
                 
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
body {
    font-family: Verdana, Arial, sans-serif;   
    background-color: #f7f7f7;
}
#header{
    background-color: #f4f4f4;
}
#header h1 {
    font-size: 24px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 30px 30px 30px 10px;
    clear: both;
}
#nav {
    background-color: #eee;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
#nav li {
    float: left;
    list-style: none;  
}
#nav a {
    display: block;
    color: black;
    padding: 10px 25px;
    text-decoration: none;
    border-right: 1px solid #ccc;
}
#nav li:last-child a {
    border-right: none;
}
#nav a:hover {
    font-weight: bold;
}
#nav:after {
    content: " ";
    display: table;
    clear: both;
}
.wrapper{
    background-color: #f7f7f7;
}
.aside h2 {
    font-size: 0.95em;
    margin-top: 15px;
}
.aside h3 {
    font-size: 0.85em;
    margin-top: 10px;
}
.aside p, .aside li {
    font-size: .75em;
    margin-top: 10px;  
}
.aside li{
    list-style-type: none;
}
#sidebar1 {
    float: left;
    width: 20%;
    padding: 0 10px 0 20px;
}
#sidebar2 {
    float: right;
    width: 20%;
    padding: 0 20px 0 10px;
}
#article{
    background-color: #fafafa;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin-left: 20%;
    margin-right: 20%;
    padding: 15px;
    width: 60%;
}
#article h2{
    font-size: 1.3em;
    margin-bottom:15px;
}
#article p{
    line-height: 150%;
    margin-bottom: 15px;
}
#footer{
    border-top: 1px solid #ccc;
    font-size: .8em;   
    text-align: center;
    padding: 10px 10px 30px 10px;
}
#nav ul, #header h1, .wrapper, #footer p {
    max-width: 1200px;
    margin: 0 auto;
}
.wrapper, #nav, #header, #footer{
    min-width: 768px;
}

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

Следующая пара стилей управляет отображением шапки (хедера) и заголовка страницы:

#header{
    background-color: #f4f4f4;
}
#header h1 {
    font-size: 24px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 30px 30px 30px 10px;
    clear: both;
}

Следующий набор стилей управляет созданием горизонтальной панели навигации:

#nav {
    background-color: #eee;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
#nav li {
    float: left;
    list-style: none;  
}
#nav a {
    display: block;
    color: black;
    padding: 10px 25px;
    text-decoration: none;
    border-right: 1px solid #ccc;
}
#nav li:last-child a {
    border-right: none;
}
#nav a:hover {
    font-weight: bold;
}
#nav:after {
    content: " ";
    display: table;
    clear: both;
}

В одной из прошлых тем подробно обсуждалось создание горизонтальной панели навигации. В принципе здесь ничего нового не добавляется: для элементов <li> устанавливается обтекание (float: left;), благодаря чему они размещаются в ряд, а каждая ссылка делается блочным элементом (display: block;)

Далее идет настройка средней части страницы, в частности, сайдбаров:

.wrapper{
    background-color: #f7f7f7;
}
.aside h2 {
    font-size: 0.95em;
    margin-top: 15px;
}
.aside h3 {
    font-size: 0.85em;
    margin-top: 10px;
}
.aside p, .aside li {
    font-size: .75em;
    margin-top: 10px;  
}
.aside li{
    list-style-type: none;
}
#sidebar1 {
    float: left;
    width: 20%;
    padding: 0 10px 0 20px;
}
#sidebar2 {
    float: right;
    width: 20%;
    padding: 0 20px 0 10px;
}

Стиль класса wrapper позволяет установить фоновый цвет для боковых панелей. Для каждого сайдбара определяется ширина в 20% от ширины страницы. Процентные значения позволят автоматически подстраивать ширину блоков под ширину окна браузера при его расширении или сужении.

Далее следуют стили блока основного содержимого и футера:

#article{
    background-color: #fafafa;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin-left: 20%;
    margin-right: 20%;
    padding: 15px;
    width: 60%;
}
#article h2{
    font-size: 1.3em;
    margin-bottom:15px;
}
#article p{
    line-height: 150%;
    margin-bottom: 15px;
}
#footer{
    border-top: 1px solid #ccc;
    font-size: .8em;   
    text-align: center;
    padding: 10px 10px 30px 10px;
}

Поскольку боковые панели имеют ширину в 20% каждая, то для главного блока устанавливается ширина в 60% и отступы справа и слева в 20%.

И в конце идет пара довольно важных стилей:

#nav ul, #header h1, .wrapper, #footer p {
    max-width: 1200px;
    margin: 0 auto;
}
.wrapper, #nav, #header, #footer{
    min-width: 768px;
}

В начале для ряда селекторов определяется максимальная ширина в 1200 пикселей. Это значит, что основные элементы страницы не выйдут за пределы 1200 пикселей. А автоматический внешний отступ слева и справа позволит центрировать содержимое элементов. То есть при ширине браузера в 1400 пикселей эти элементы с шириной в 1200 пикселей будут размещаться как бы по середине, а справа и слева будут отступы шириной в (1400-1200)/2 = 100 пикселей.

Второй стиль позволят сделать фиксированную минимальную ширину для ряда элементов. То есть в итоге при сжатии окна браузера сайдбары и основной блок будут выглядеть более менее, а при сжатии окна менее 768 пикселей образуется полоса прокрутки.

Данная модель размеров не идеальна. И далее мы рассмотрим более гибкие и распространенные концепции на основе адаптивной верстки.

В итоге у нас получится следующий простенький макет:

Прочитано 539 раз Последнее изменение Понедельник, 19 сентября 2016 18:54
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+