Веб-мастерская Ларисы ВоронинойВерстаем одностраничный сайт.

WEB-мастерская Ларисы Ворониной

Верстаем одностраничный сайт. Дек 13 2016

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

Демо

Скачать

Идея следующая: Шапка и меню будут фиксированными, а контент будет подвижным. В контенте на нужных местах будут стоять якоря, и при нажатии на пункт меню, контент будет прокручиваться до соответствующего якоря, сами якоря будут с отступом высотой шапки.

Создаём отдельную папку для нашего сайта. В ней будут находиться файлы index.html, style.css и папка с изображениями images.

Делаем нарезку.

Открываем наш макет в Фотошопе.

Вырезать будем шапку, панель меню, разделительную линию и картинку с Колизеем.

Вырезаем шапку.

Отключаем видимость слоя «панель меню» и видимость слоя с пунктами меню.

Включаем направляющие, берём инструмент «раскройка» и строго по направляющим вырезаем шапку. Далее: Файл ->сохранить для web, расширение jpg, имя даём «header», и сохраняем выделенный фрагмент в папку с сайтом.

Вырезаем панель меню.

Отключаем все фоны и текст меню, оставляем слой «панель меню», отключаем все стили для него.

Вырезаем панель меню и сохраняем в формате PNG под названием «меню».

- Таким же образом вырезаем разделительную линию и картинку с Колизеем.

Таким образом в папке images должно быть 4 файла.

Делаем непосредственно верстку одностраничного сайта.

В редакторе создаём два документа index.html и style.css.

В index.html пишем каркас одностраничного сайта.

<!DOCTYPE html>
<html>
<head>
<title>Школа итальянского</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="menu">
</div>
</div>
<div class="content">
<div class="about">
</div>
<div class="schedule">
</div>
<div class="contact">
</div>
</div>
</div>
</body>
</html>

И сразу напишем стили для каркаса в файле style.css.

Создаём пункты меню внутри блока с классом «menu».

<div class="menu">
<ul>
<li><a href="#about">О нас</a></li>
<li><a href="#schedule">Расписание уроков</a></li>
<li><a href="#contact">Записаться на курсы</a></li>
</ul>
<span>8(495)000-00-00</span>
</div>

Пишем стили для меню.

.menu ul li {
list-style:none;/*убираем маркеры*/
float:left;/*выравнивание по левому краю*/
padding:10px 25px 10px 0;/*отступы*/
}
.menu ul li a, span {
font:24px "Century Gothic";/*шрифт*/
color:#020f5f;/*цвет текста*/
text-decoration:none;/*убираем подчёркивание*/
}
.menu ul li a:hover {
text-decoration:underline;/*добавляем подчёркивание*/
}
span {
float: right;
margin: 10px 20px 0 0;
}

Создаём контент.

<div class="content">
<div class="about">
<h2 id="about">О нас</h2>
<img src="images/img1.png">
<p>Приветствуем тебя дорогой друг!</p>
<p>Добро пожаловать в нашу школу итальянского языка. Занятия проводятся в игровой форме под руководством прекрасных преподавателей - носителей языка. В стоимость курса входят также языковые туристические туры в знаменитые города Италии. </p>
<p>Обучаясь у нас, ты не только научишься свободно владеть итальянским языком, но и получишь массу приятных воспоминаний и новых друзей.</p>
</div>
<div class="schedule">
<h2 id="schedule">Расписание уроков</h2>
<img src="images/img1.png">
<p>1-я группа: с понедельника по пятницу 18.00-21.00</p>
<p>2-я группа: по субботам и воскресеньям 15.00-21.00</p>
<p>3-я группа: по субботам и воскресеньям 9.00-15.00</p>
<p>Срок обучения 1-я и 2-я ступень 4 недели</p>
</div>
<div class="contact">
<h2 id="contact">Записаться на курсы</h2>
<img src="images/img1.png">
<p>Записаться на курсы вы сможете по телефону: 8(495)000-00-00, менеджер Анна</p>
<p>Или по адресу:</p>
<p>г. Москва, ул. Верхняя Солнечная, дом 25 аудитория 30</p>
<p>Также вы можете оставить заявку по электронной почте [email protected]</p>
</div>
</div>

Пишем стили для контента.

.about, .schedule, .contact {
background: #50aee1;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #eef4f8;
}
#about, #schedule, #contact{
margin-bottom: 3px;
background: url(images/line.png) no-repeat bottom;
}
h2 {
padding-left: 20px;
padding-bottom: 10px;
font:24px "Century Gothic";
color:#020f5f;
}
p {
padding: 0 20px 20px 20px;
font:18px "Century Gothic";
}
img {
margin: 20px;
float: left;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #eef4f8;
}

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

Для этого используем библиотеку JQuery и код JavaScript.

Библиотеку JQuery подключаем между тегами «head».

Скачиваем библиотеку вот здесь.

Папку js помещаем в папку с сайтом.

Внизу, перед закрывающим тегом «body» пишем код JavaScript.

Ну а теперь нам нужно сделать расстояния между блоками контента, чтобы всё смотрелось прилично.

Перед блоками «about», «schedule» и «contact» вставляем блок div:

После блока "contact" вставляем блок div:

Вот все получившиеся файлы.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Школа итальянского</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="menu">
<ul>
<li><a href="#about">О нас</a></li>
<li><a href="#schedule">Расписание уроков</a></li>
<li><a href="#contact">Записаться на курсы</a></li>
</ul>
<span>8(495)000-00-00</span>
</div>
</div>
<div class="content">
<div style="height:270px"></div>
<div class="about">
<h2 id="about">О нас</h2>
<img src="images/img1.png">
<p>Приветствуем тебя дорогой друг!</p> <p>Добро пожаловать в нашу школу итальянского языка. Занятия проводятся в игровой форме под руководством прекрасных преподавателей - носителей языка. В стоимость курса входят также языковые туристические туры в знаменитые города Италии. </p> <p>Обучаясь у нас, ты не только научишься свободно владеть итальянским языком, но и получишь массу приятных воспоминаний и новых друзей.</p>
</div>
<div style="height:270px"></div>
<div class="schedule">
<h2 id="schedule">Расписание уроков</h2>
<img src="images/img1.png">
<p>1-я группа: с понедельника по пятницу 18.00-21.00</p>
<p>2-я группа: по субботам и воскресеньям 15.00-21.00</p>
<p>3-я группа: по субботам и воскресеньям 9.00-15.00</p>
<p>Срок обучения 1-я и 2-я ступень 4 недели</p>
</div>
<div style="height:270px"></div>
<div class="contact">
<h2 id="contact">Записаться на курсы</h2>
<img src="images/img1.png">
<p>Записаться на курсы вы сможете по телефону: 8(495)000-00-00, менеджер Анна</p>
<p>Или по адресу:</p>
<p>г. Москва, ул. Верхняя Солнечная, дом 25 аудитория 30</p>
<p>Также вы можете оставить заявку по электронной почте [email protected]</p>
</div>
<div style="height:20px"></div>
</div>
</div>
<script>
$('a[href^="#"]').click(function () {
var target = $(this).attr('href');
$('html, body').animate({scrollTop: $(target).offset().top - 290 }, 800);
return false;
});
</script>
</body>
</html>

style.css

body {
background: #0075d4;/*общий фон*/
margin: 0;
padding: 0;
}
.wrapper {
margin: 0 auto;/*центрируем блок с классом wrapper*/
overflow: hidden;
width: 1000px;/*ширина блока wrapper*/
}
.header {
position:fixed;/*фиксируем блок с классом header*/
background:url(images/header.jpg) no-repeat;
width: 1000px;/*ширина шапки*/
height: 300px;/*высота шапки*/
}
.menu {
margin: 0 auto;/*центрируем блок с классом wrapper*/
overflow: hidden;
width: 998px;/*ширина панели меню*/
height: 70px;/*высота панели меню*/
background:url(images/menu.png);/*фоновый рисунок*/
margin-top: 180px;/*отступ сверху*/
border-radius: 10px;/*Закругление углов*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #eef4f8;/*рамка*/
box-shadow:3px 3px 5px 0px #0148a4;/*тень*/
}
.menu ul li {
list-style:none;/*убираем маркеры*/
float:left;/*выравнивание по левому краю*/
padding:10px 25px 10px 0;/*отступы*/
}
.menu ul li a, span {
font:24px "Century Gothic";/*шрифт*/
color:#020f5f;/*цвет текста*/
text-decoration:none;/*убираем подчёркивание*/
}
.menu ul li a:hover {
text-decoration:underline;/*добавляем подчёркивание*/
}
span {
float: right;
margin: 10px 20px 0 0;
}
.about, .schedule, .contact {
background: #50aee1;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #eef4f8;
}
#about, #schedule, #contact{
margin-bottom: 3px;
background: url(images/line.png) no-repeat bottom;
}
h2 {
padding-left: 20px;
padding-bottom: 10px;
font:24px "Century Gothic";
color:#020f5f;
}
p {
padding: 0 20px 20px 20px;
font:18px "Century Gothic";
}
img {
margin: 20px;
float: left;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #eef4f8;
}

По аналогии вы можете создать свой собственный сайт.

Скачать сайт.

Работу сайта смотрим вот здесь.

Получайте новые статьи по почте

Категории

Верстаем одностраничный сайт. Дек 13 2016

Делаем нарезку.

Делаем непосредственно верстку одностраничного сайта.

Вот все получившиеся файлы.

Категории

Страницы