Как сделать веб‑сайт с нуля
Введение
Вы когда‑нибудь хотели сделать веб‑сайт? Возможно, вы прочитали несколько руководств по HTML и CSS, но не знаете, как применить эти знания в более крупном проекте.
В этом материале я проведу вас через весь процесс создания простого, но законченного веб‑сайта с нуля. Не переживайте, если кажется сложно — я объясню шаги простым языком и приведу рабочие примеры кода.
Вы создадите сайт на HTML, CSS и JavaScript с небольшой помощью jQuery. Здесь используются базовые подходы, поэтому код будет корректно работать в большинстве современных браузеров.
Если вы сомневаетесь в отдельных частях CSS, посмотрите руководство по CSS на W3Schools или официальную документацию.
Дизайн макета
Ниже — макет сайта. Для более детального просмотра можно открыть изображение высокого разрешения или скачать весь проект из архива.
Я создавал этот макет для вымышленной компании в Adobe Photoshop 2017. В архиве есть PSD‑файл, где слои сгруппированы, подписаны и выделены цветом.
Внутри PSD все слои организованы и подписаны для удобства:
Для корректного отображения макета потребуется несколько шрифтов: Font Awesome (иконки), PT Serif и Myriad Pro (Myriad Pro идёт с Photoshop). Если не знаете, как установить шрифты — найдите инструкцию по установке шрифтов для вашей ОС.
Не беспокойтесь, если у вас нет Photoshop — он не обязателен для дальнейших шагов.
Код проекта — начальная версия
Создайте новый файл в любом текстовом редакторе и сохраните как index.html (можно назвать иначе, но большинство серверов по умолчанию обслуживают index.html).
Если не хотите вникать в детали — можно скачать полный код из архива.
Вот минимальная структура страницы, с которой мы начнём. Скопируйте в файл index.html:
Noise Media
/* JavaScript goes here, at the bottom of the page */
Этот шаблон делает несколько вещей:
- Определяет минимальную HTML‑структуру.
- Устанавливает заголовок страницы — “Noise Media”.
- Подключает Font Awesome и jQuery через CDN.
- Оставляет место для CSS и JavaScript прямо в файле (подойдет для учебного проекта).
Сохраните и откройте файл в браузере — вы пока не увидите конечного дизайна, но файл уже корректен.
Верхняя панель и логотип
Сначала создадим узкую серую полосу сверху — это декоративный элемент с едва заметной тенью.
Добавьте в начало body этот элемент:
Объяснение: div — это контейнер. У него есть id=”top-bar”; id уникален на странице и используется для CSS или JavaScript.
Добавьте в тег style следующие правила:
html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray "underline" */
height: 25px;
}Совет: используйте .class для повторно используемых контейнеров и #id для уникальных частей.
Далее создадим контейнер для логотипа и навигации. Мы сделаем фиксированную ширину 900px — это упрощённый, неадаптивный макет.
HTML:
CSS:
.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}Здесь временно задан background: red для визуальной отладки — так легко увидеть границы блока.
Внутри normal-wrapper добавим логотип (иконка Font Awesome + заголовок):
Noise Media
CSS:
.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}Если хотите другую иконку — замените fa-volume-down на любое имя иконки с сайта Font Awesome.
Навигация: используем неупорядоченный список (UL).
Home About Reviews Contact CSS:
#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}И под ним тонкая цветная полоска‑акцент:
HTML:
CSS:
#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}Основная область
Теперь переходим к «выше сгиба» — главной зоне: текст слева и изображение справа, примерно разделённые в пропорции близкой к золотому сечению.
HTML (добавить после top-color-splash):
Welcome!
Noise Media is a technology company specialising in tech reviews.
We’re very good at what we do, but unfortunately, we are not a real company.
Make sure you visit makeuseof.com for the full tutorial on how to build this website.
Alternatively, check out our review of the Panasonic G80 shown on the right!
CSS:
.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}Ключ: box-sizing: border-box делает так, чтобы ширина включала padding и border — это упрощает расчёты макета.
Цитата
Простой тёмный блок с белым центровым текстом.
HTML:
“makeuseof is the best website ever”
Joe Coburn
CSS:
#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}
Блок иконок
Три одинаковых по стилю иконки, каждая с подписью и описанием.
HTML:
YouTube
Checkout our YouTube channel for more tech reviews, tutorials and giveaways!
Reviews
If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.
Buying Guides
At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.
CSS:
.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}
Анимация наведения показывает, что hover можно применять не только к ссылкам, но и к любым блокам:
Подвал
Простой светло‑серый подвал.
HTML:
CSS:
#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray "topline" */
height: 150px;
}Улучшаем шрифты и внешний вид
Чтобы сайт выглядел ближе к макету, подключим веб‑шрифты (Google Fonts). PT Sans будет для заголовков, PT Serif — для основного текста.
Добавьте это в начало style (или в отдельный CSS‑файл):
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}И для html, body укажите основной текст:
font-family: 'PT Serif', 'Helvetica', 'Arial';Обратите внимание: h3 оставлен отдельным, чтобы в дизайне он использовал PT Serif по умолчанию.
Карусель изображений на JavaScript
Опционально можно добавить простую смену изображений в блоке с feature‑изображением. Для этого нужны Image_2.jpg и Image_3.jpg.
Измените HTML блока изображений так, чтобы у каждого изображения был id и дополнительные изображения скрывались через класс hidden:
CSS для скрытия:
.hidden {
display: none;
}JavaScript (вставьте в