Как быстро сделать простой, но в тоже самое время полноценный сайт за пару часов? Без использования готовых шаблонов и систем управления контентом?
Для тех, кто только начал знакомиться с азами верстки, эта задача покажется очень сложной, но на самом деле создать небольшой веб - ресурс на несколько страниц можно очень быстро. При этом знаний и опыта программирования на php, javascript или jquery не понадобится, т. к. сайт будет полностью построен на базе html и css.
Для того, чтобы сделать процесс написания сайта более наглядным и интуитивно понятным, разобьем его на несколько простых этапов:
1. Первым делом создадим каркас будущего сайта. В нашем примере он будет состоять из хедера, боковых сайдбаров, блока контента и футера. Его основная разметка выглядит так:
<div class="header"></div> /* Шапка сайта */
<div class="left_col"></div> /* Левая колонка */
<div class="right_col"></div> /* Правая колонка */
<div class="content"></div> /* Центральный блок контента */
<div class="footer"></div> /* Подвал сайта */
</div>
Чтобы сайт не занимал 100% площади монитора, его каркас оборачиваем в <div class="container"></div>, которому потом зададим необходимую величину.
2. Далее наполним все блоки сайта необходимым содержимым:
- В шапку сайта добавим логотип.
- Под хедер добавим горизонтальное меню.
- В левый сайдбар вертикальное меню.
- В правый сайдбар произвольный текст.
- В блок контента картинку с текстом.
- В футер добавим дату и копирайт.
Разметка сайта после добавления контента:
<div class="container">
<div class="header">
<div class="logo">My First Site</div>
</div>
<div class="menu">
<a href="#">Главная</a>
<a href="#">Новости</a>
<a href="#">Статьи</a>
<a href="#">Контакты</a>
<a href="#">О нас</a>
</div>
<div class="left_col">
<ul class="menu_left">
<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 class="right_col">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.
</div>
<div class="content">
<img src="img/cat.jpg" class="img">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum
</div>
<div class="footer">My First Site.ru, Copyright 2018.</div>
</div>
</body>
3. Далее пропишем стили для наших блоков и контента, для чего создадим отдельный файл style.css, в который скопируем приведенный ниже код. Этот файл чуть позже подключим к сайту в разделе <head></head>.
.container{width:1200px;margin:0 auto;font-size:20px;text-align:center;} /* задаем размеры контейнера сайта, выравниваем его по центру */
.header{width:auto;background:rgb(218, 200, 200);height:100px;} /* размеры и фон хедера */
.left_col{width:240px;float:left;height:600px;background:rgb(179, 165, 165);padding:25px 10px; border-right: 2px solid white} /* левая колонка */
.content{background:grey;height:650px;width:55%;box-sizing:border-box;padding:25px 20px;text-align:left;margin:0 auto} /*блок контента*/
.right_col{width:240px;background:rgb(179, 165, 165);height:600px;float:right;padding:25px 10px; border-left: 2px solid white} /*правая колонка*/
.footer{width:auto;background:rgb(182, 182, 208);padding:20px;text-align:center;border-top:2px solid white}/* размеры футера */
.menu{background:black; border-bottom: 2px solid white;text-transform:uppercase} /* главное меню */
.menu a {margin-right:10px; background:black; text-decoration:none;padding:10px 20px;display:inline-block;color:white} /* параметры ссылок главного меню */
.menu a:hover {color:black;background:white} /* цвет ссылок меню при наведении курсора */
.menu_left {padding:0;margin-right:10px} /* отступы бокового меню */
.menu_left li {list-style:none} /* удаляем маркеры у элементов списка меню */
.menu_left a{margin-top:10px; display:block; color:white;text-decoration:none;background:grey;padding:10px ;border-left:3px solid white;text-transform:uppercase;box-shadow:0px 2px 3px black} /*задаем необходимые размеры и другие параметры пунктов левого меню */
.menu_left a:hover {background: rgb(111, 105, 105); transform: translateX(10px);-webkit-transform:translateX(10px); -transition:0.3s; -webkit-transition: 0.3s;} /* параметры ссылок левого меню при наведении курсора */
.logo{font-size:26px;float:left;padding:10px; font-weight:900; text-transform:uppercase} /* логотип */
.logo:before{content:""; position:absolute; background:black;top:50px;width:60px;height:3px} /* черта под логотипом*/
.img{float:left;margin:10px; border: 2px solid white} /* параметры картинки в блоке контента */
4. На этом практически все. Остается только добавить структурную разметку страницы, после чего окончательный код сайта будет выглядеть так:
<html>
<head>
<meta charset=utf-8> /* кодировка сайта*/
<link rel="stylesheet" type="text/css" href="style.css"> / *подключаем файл стилей*/
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">My First Site</div>
</div>
<div class="menu">
<a href="#">Главная</a>
<a href="#">Новости</a>
<a href="#">Статьи</a>
<a href="#">Контакты</a>
<a href="#">О нас</a>
</div>
<div class="left_col">
<ul class="menu_left">
<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 class="right_col">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</div>
<div class="content">
<img src="img/cat.jpg" class="img">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum</div>
<div class="footer">My First Site, Copyright 2018</div>
</div>
</body>
</html>
Как адаптировать сайт под экраны современных мобильных устройств, можно узнать в этойстатье.
На этом все. Надеюсь, что статья была вам полезной!
