Как верстать сайт?

179 просмотров

В этой статье мы затронем один очень простой и современный способ вёрстки сайта. Главным критерием будет следующее: сайт должен быть адаптивным под все мобильные устройства. В данной статье не будет лишней информации – что такое html и прочее, для этого существует специальный раздел на нашем сайте, где вы найдёте бесплатные онлайн-курсы по вёрстке .

Все действия будем делать поэтапно и в данной статье не будет заворачиваться в плане дизайна.



Цель данной статьи - показать принцип вёрстки, данный код вы можете использовать во всех своих проектах. Основная идея в том, что вам не нужны различные Фреймворки по типу Bootstrap и ему подобные.

Этап 1: Создание структуры папок и файлов

Создайте на своём компьютере папку, абсолютно в любом месте (для обучения можно просто на рабочем столе). Далее создайте файлы по схеме, которая расположена ниже по тексту. Когда верстаете сайт, следует придерживаться следующим правилам размещения папок и файлов.

[css]
-- css.css
[images]
-- logo.png
[js]
-- jquery.js
-- script.js
- index.html

Этап 2: создание структуры html документа


Открываем файл index.html и внесём туда код размещённый ниже. Данный файл можно открыть в при помощи браузера, ваш браузер будет воспринимать его как готовый сайт и построит блоки согласно следующему коду:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Мой первый сайт</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/css.css">

</head>
<body>

<!-- сюда вставляем код html шапки -->

<!-- сюда вставляем код html контента -->

<!-- сюда вставляем код html сетки -->

<!-- сюда вставляем код html подвала -->

<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
</body>    
</html>

Этап 3: создаём шапку сайта


Как уже было написано выше, мы не будем особо заморачиваться с дизайном, поэтому всё будет в минималистичном стиле. В нашей шапке будет логотип, ссылки на WhatsApp и Viber, номер телефона.

Заменяем в index.html:

<!-- сюда вставляем код html шапки -->
На:
<div id='win1'>
<div class="header">
    <div class="container">
        <div class="row">
            <div class="advantages-items">
            <div class="win1__logo"><img src="images/logo.png"></div>
            <div class="win1__soc">
                <a href="viber://add?number=(ваш_номер_телефона)"><img src="images/viber.png"></a>
                <a href="https://wa.me/(ваш_номер_телефона)?text=Привет!"><img src="images/whatsapp.png"></a>
            </div>
            <div class="win1__phone">
                <span>(ваш_номер_телефона)</span>
                <a href="mailto:(ваш_email)">(ваш_email)</a>
            </div>
            </div>
        </div>
    </div>
</div>

Этап 4: создание стилей в файле css.css

Открываем файл /css/css.css . В данном файле будут хранится стили нашего сайта. К примеру, вы хотите изменить цвет текста или отступы между буквами. Теперь вам понадобится добавить туда основные стили, которые нам понадобятся для построения блоков по горизонтали.


Вставляем следующий код в файл /css/css.css:

body {font-family: 'Roboto Slab', serif;overflow-x: hidden;color: #000;background: #fff;padding:0;margin:0;font-size:14px;}
.container{position:relative;width:1170px;margin-right: auto;margin-left:auto;padding-left:15px;padding-right:15px;}
.container:before, .container:after{content:'';display:table;clear:both;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

.advantages-items{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: left;-webkit-justify-content: left;-ms-flex-pack: left;justify-content: left;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.advantages-items.items-bottom{-webkit-box-align: flex-end;-webkit-align-items: flex-end;-ms-flex-align: flex-end;align-items: flex-end;}
.advantages-items.items-top{-webkit-box-align: end;-webkit-align-items: end;-ms-flex-align: end;align-items: end;}

.container - данный класс говорит о том, что ширина нашего сайта относительно всей ширины экрана составляет 1170px, вы можете сделать по желанию, но лучше оставить так как есть.

.advantages-items – говорит о том, что дочерние блоки выстраиваются по горизонтали и выравниваются по центру относительно горизонта.

.advantages-items.items-bottom – говорит о том, что дочерние блоки будут выравниваться понизу.

.advantages-items.items-top – говорит о том, что дочерние блоки будут выравниваться поверху.


Ниже мы добавим стили для нашей шапки (css.css):

.win1__logo{-webkit-flex-basis: -webkit-calc(100% - 400px);-ms-flex-preferred-size: calc(100% - 400px);flex-basis: calc(100% - 400px);box-sizing: border-box;}
.win1__soc{-webkit-flex-basis: 200px;-ms-flex-preferred-size: 200px;flex-basis: 200px;box-sizing: border-box;}
.win1__phone{-webkit-flex-basis: 200px;-ms-flex-preferred-size: 200px;flex-basis: 200px;box-sizing: border-box;}

В данном коде мы говорим следующее:

.win__soc – блок ссылок на Whatsapp и Viber будут шириной 200px (пикселей).

.win__phone – блок с номером телефона на сайте будет шириной 200px (пикселей).

.win1__logo – блок логотипа будет шириной 100% - 400px (400px – это суммарная ширина блоков win__soc и win__phone).


Этап 5: Придаём шапке сайта нормальный вид

Теперь посмотрим на сайт. Как он выглядит? Заходим через браузер Google Chrome или Яндекс.Браузер. Почему именно эти браузеры? Зачастую это самые популярные браузеры, плюс нам понадобится Панель инструментов web-разработчика, которая уже встроена в данные браузеры.

Открыть index.html через браузер можно следующим путём: кликаем правой кнопкой мыши на файл index.html и выбираем: Открыть с помощью - далее выбираем браузер (Google Crome или Яндекс.Браузер). Теперь мы видим что блоки с логотипом и иконки не отображаются? Всё верно, в нашей папке images отсутствуют файлы logo.png, viber.png и whatsapp.png. Вы можете использовать свои изображения.

Либо скачать наши заготовки: logo.png viber.png и whatsapp.png (не забудьте переименовать название файлов в точности как тут)

Теперь, чтобы логотип не прилипал, добавим отступы к шапке. Существует 2 вида отступов: внутренний и внешний, мы будем использовать внутренний. Но мы будем использовать отступ для всей шапки, поэтому в css.css добавим новый стиль:

.header{padding:25px 0}

Далее добавим стиль для номера телефона, его нужно сделать больше, более жирным:

.win1__phone span{font-size:16px;font-weight:bold;margin-bottom:6px;display:inline-block}


Этап 6: верстаем первый экран

Идея первого экрана в том, чтобы слева на 50% от всего экрана был текст, а справа background с картинкой. Для начала давайте сделаем структуру в index.html.

Заменяем в index.html:

<!-- сюда вставляем код html контента -->

На:

<div id="win2">
    <div class="container">
        <div class="row">
            <div class="advantages-items">
            <div class="left">
                <div class="title1"><span>Мой первый сайт</span> вам понравится результат</div>
                <div class="title2">узнайте более подробней перейдя по ссылке</div>
                <a href="#" class="button1"><span>Подробнее <i class="im im-arrow-right"></i></span></a>
            </div>
            </div>
        </div>
    </div>
</div>

Теперь нужно добавить стили к нашему экрану, чтобы он выглядел более презентабельным. Первую строчку в .tittle1 span сделаем самой крупной и с новой строчки. То, что не находится в теге span, сделаем чуть меньше, а класс .title2 сделаем ещё меньше. Плюс добавим стили кнопки с классом .button1.

#win2{padding:150px 0;background:#f1f1f1}
#win2 .title1 {font-size:30px;display:block;margin-bottom:15px;font-weight:bold}
#win2 .title1 span{font-size:40px;display:block;margin-bottom:10px;text-transform:uppercase;}
#win2 .title2 {font-size:18px;display:block;margin-bottom:35px}
.button1{font-weight:bold;border:0;cursor:pointer;text-transform:uppercase;position:relative;font-family: 'MuseoSans700';overflow:hidden;text-decoration:none;font-size:18px;color:#1e1a0d;display:inline-block;text-align:center;padding:15px 50px;border-radius: 6px;background-image: -moz-linear-gradient( -90deg, rgb(255,228,134) 0%, rgb(255, 212, 0) 100%);background-image: -webkit-linear-gradient( -90deg, rgb(255,228,134) 0%, rgb(255, 212, 0) 100%);background-image: -ms-linear-gradient( -90deg, rgb(255,228,134) 0%, rgb(255, 212, 0) 100%);box-shadow: 0px -1px 0px 0px rgba(255, 233, 173, 0.05), 0px 5px 0px 0px rgb(195, 151, 28), 2px 7px 38px 0px rgb(10, 10, 9,0.1);}
.button1.button1--white{border-bottom:5px solid #d0b73f;box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.004),0px 5px 0px 0px rgba(208, 183, 63, 0.004),0px 12px 13px 0px rgba(0, 0, 0, 0.10);}
.button1 span{position:relative;z-index:5;}
.button1 span i{font-size: 16px;position: relative;margin-left: 10px;top: 2px;}
.button1:before{content:'';position:absolute;z-index:4;opacity:0;top:0;left:0;width:100%;height:100%;background:#fff;box-shadow: 0px 0px 51px 57px rgba(255, 255, 255, 0.91);}
.button1:hover:before{opacity:0.5}
.button1:after{animation:landing_pageBlick 4s linear infinite;content:'';position:absolute;z-index:4;border-radius:300px;opacity:1;top:0;left:0;width:50px;height:100%;background:#fff;box-shadow: 0px 0px 51px 57px rgba(255, 255, 255, 0.91);}
@keyframes landing_pageBlick {0% {left:-50%;opacity:0}50%{left:-50%;opacity:0}60%{left:10%;opacity:1}70%{left:120%;opacity:0}100% {left:0%;opacity:0}}

Чтобы заменить фон на нашем экране с цвета на картинку требуется сделать следующее:

Заменяем в предыдущем коде:

#win2{padding:150px 0;background:#f1f1f1}

На:

#win2{padding:150px 0;background:#f1f1f1 url(https://showskills.ru/uploads/posts/2019-11/1572684083_bg.jpg) center center no-repeat;background-size:cover}

Этап 7: сверстаем 3 блока

Когда верстаешь сайт, зачастую нужно сделать сетку из 3,4,5 и более блоков по горизонтали, к примеру вам нужно сделать блок с преимуществами. В качестве примера мы сделаем сетку из 3 блоков, открываем index.html и ставим следующий код:

Заменяем в index.html

<!-- сюда вставляем код html сетки -->

На:

<div id="win3">
    <div class="container">
        <div class="row">
            <h2>О нас</h2>
                <div class="advantages-items items-top">
                    <div class="wrap">
                        <div class="info">
                            <div class="tile">Быстро</div>
                            <div class="text">Вы делаете заявку на сайте или по телефону</div>
                        </div>
                    </div>
                    <div class="wrap">
                        <div class="info">
                            <div class="tile">Качественно</div>
                            <div class="text">Мы составляем техническое задание и высылаем вам</div>
                        </div>
                    </div>
                    <div class="wrap">
                        <div class="info">
                            <div class="tile">Результативно</div>
                            <div class="text">В течении 5 дней вы получаете готовый продукт</div>
                        </div>
                    </div>
                </div>    
            </div>
    </div>
</div>

Теперь нам нужно разделить наши блоки на 3, для этого пропишем сразу следующий код в css.css:

#win3{padding:50px 0;text-align:center}
#win3 h2{font-size:40px;text-transform:uppercase}
#win3 .wrap{box-sizing: border-box;-webkit-flex-basis: -webkit-calc(100% / 3);-ms-flex-preferred-size: calc(100% / 3);flex-basis: calc(100% / 3);}
#win3 .wrap .info{padding:0 15px;}
#win3 .wrap .info .tile{font-size:30px;font-weight:bold;padding-bottom:10px}
#win3 .wrap .info .text{font-size:18px;}

Этап 8: верстаем подвал

Подвал будет максимально простой, в нём будет повторятся наш логотип и строчка: все права защищены.

Заменяем в index.html

<!-- сюда вставляем код html подвала -->

На:

<footer>
    <div class="container">
        <div class="row">
                <div class="advantages-items">
                    <div class="wrap"><img src="images/logo.png"></div>
                    <div class="wrap end">Все права защищены © 2020</div>
                </div>    
            </div>
    </div>
</footer>

Теперь добавим следующее в css.css. По сути мы опять будем работать со свойством flex-basis, только установим следующий код:

footer{margin-top:50px;padding:15px 0; background:#f1f1f1}
footer .wrap{-webkit-flex-basis: 50%;-ms-flex-preferred-size: 50%;flex-basis: 50%;}
footer .wrap.end{text-align:right}

Этап 8: Адаптивная вёрстка

Теперь сделаем так, чтобы наш сайт нормально отображался на всех видах устройствах, по другому говоря адаптируем сайт под все мобильные устройства. Вы можете использовать Инструменты web-мастера, в Google Chrome данный инструмент можно вызвать по разному, нажать кнопку F12, либо наведите на элемент который нужно адаптировать правой кнопкой и выберете Посмотреть код. После нажмите комбинацию клавиш CTRL+SHIFT+M. Далее добавьте в ваш css.css следующий код:

@media(max-width:1200px){
    .container{width:100%;padding:0}
    .container .row{padding-left:15px;padding-right:15px}
}
@media(max-width:1024px){
    
}
@media(max-width:768px){
    
}
@media(max-width:767px){
    
}
@media(max-width:600px){
    
}
@media(max-width:500px){
    
}

В данном примере можно адаптировать сайт следующим образом:

@media(max-width:1200px){
    .container{width:100%;padding:0}
    .container .row{padding-left:15px;padding-right:15px}
}
@media(max-width:1024px){
    #win1{background:#f1f1f1}
    .win1__logo, .win1__soc, .win1__phone{-webkit-flex-basis: 100%;-ms-flex-preferred-size: 100%;flex-basis: 100%;margin-bottom:15px;text-align:center}
    .win1__phone span{display:block}
    #win2{text-align:center;padding: 0px 0 50px;}
    #win2 .left{width:100%}
    #win3 .wrap{-webkit-flex-basis: 100%;-ms-flex-preferred-size: 100%;flex-basis: 100%;margin:15px 0}
}
@media(max-width:768px){
    
}
@media(max-width:767px){
    
}
@media(max-width:600px){
    
}
@media(max-width:500px){
    footer .wrap, footer .wrap.end{-webkit-flex-basis: 100%;-ms-flex-preferred-size: 100%;flex-basis: 100%;margin:15px 0;text-align:center}
}

0 комментариев

Информация

Посетители, находящиеся в группе Незарегистрированные, не могут оставлять отзывы к данному курсу.