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

Верстаем одностраничный сайт. Дек 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.
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».
<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>Также вы можете оставить заявку по электронной почте 000@gmail.com</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».
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>

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

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

  • Внизу, перед закрывающим тегом «body» пишем код JavaScript.
<script>
$('a[href^="#"]').click(function () {
var target = $(this).attr('href');
$('html, body').animate({scrollTop: $(target).offset() top  - 290 }, 800);
return false;
});
</script>

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

  • Перед блоками «about», «schedule» и «contact» вставляем блок div:
<div style="height:270px"></div>

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

<div style="height:20px"></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>Также вы можете оставить заявку по электронной почте 000@gmail.com</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;
}

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

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


Рейтинг@Mail.ru