Вы всегда хотели сделать сайт? Возможно, вы читали некоторые из наших учебных пособий по HTML ( понимание HTML ) и CSS , но не знаете, как использовать эти языки в большом проекте.
Сегодня я проведу вас через процесс создания полноценного сайта с нуля. Не волнуйтесь, если это кажется трудным заданием, я проведу вас через каждый шаг.
Вы создадите этот сайт с использованием HTML, CSS и JavaScript с оттенком jQuery ( руководство по jQuery ). Вы не будете делать ничего по- настоящему крутого, поэтому этот код должен работать довольно хорошо в большинстве современных браузеров.
Если вы не уверены в каком-либо CSS, посмотрите руководство по CSS на W3Schools.com .
Дизайн
Вот дизайн для этого сайта. Посмотрите на изображение с высоким разрешением, если вы хотите лучше выглядеть, или даже лучше, загрузите полный проект здесь .
Я разработал этот сайт для вымышленной компании в Adobe Photoshop 2017. Если вам интересно, убедитесь, что вы взяли файл .PSD из комплекта загрузки . Вот что вы получаете в файле photoshop:
Внутри PSD вы найдете все слои, сгруппированные, названные и имеющие цветовую кодировку:
Вам нужно установить несколько шрифтов, чтобы все выглядело правильно. Первым является Font Awesome , используемый для всех значков. Другие два шрифта — PT Serif и Myriad Pro (включены в Photoshop). Если вы не знаете, как установить шрифты, прочитайте наше руководство
Не беспокойтесь, если у вас нет Adobe Photoshop , он вам не нужен.
Исходный код
Теперь, когда дизайн понятен, давайте начнем кодировать! Создайте новый файл в вашем любимом текстовом редакторе (я использую Sublime Text 3 ). Сохраните это как index.html . Вы можете называть это как угодно, причина, по которой многие страницы называются индексными, связана с тем, как работают веб-серверы. Конфигурация по умолчанию для большинства серверов заключается в обслуживании страницы index.html, если страница не указана.
Если вы не хотите узнавать подробности, скачайте полный код из загрузки .
Вот код, который вам нужен:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Noise Media</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> /* CSS goes here, at the top of the page */ </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> /* JavaScript goes here, at the bottom of the page */ </script> </body> </html> Это делает несколько вещей:
- Определяет необходимый минимум HTML.
- Определяет заголовок страницы «Noise Media»
- Включает в себя jQuery, размещенный в Google CDN ( что такое CDN ).
- Включает Font Awesome, размещенный на Google CDN.
- Определяет тег стиля для написания вашего CSS.
- Определяет тег сценария для написания вашего JavaScript.
Сохраните файл снова и откройте его в веб-браузере. Вы, вероятно, не заметите много, и это, конечно, пока не будет выглядеть как веб-сайт.
Обратите внимание, как заголовок страницы называется Noise Media . Это определяется текстом внутри тега заголовка . Это должно быть внутри тегов головы .
Заголовок
Давайте создадим заголовок. Вот как это выглядит:
Давайте начнем с этого маленького серого кусочка сверху. Это светло-серый с небольшим темно-серым снизу. Вот крупный план:
Добавьте этот HTML внутри тега body вверху:
<div id="top-bar"></div>
Пока вы здесь, давайте разберемся с этим. Div — это как контейнер для размещения других вещей. Этими «другими вещами» может быть больше контейнеров, текста, изображений, чего угодно. Существуют некоторые ограничения на то, что может входить в определенные теги, но div — довольно общие вещи. У него есть идентификатор top-bar . Это будет использоваться для стилизации его с помощью CSS и нацеливания на JavaScript, если это необходимо. Убедитесь, что у вас есть только один элемент с определенным идентификатором — они должны быть уникальными. Если вы хотите, чтобы несколько элементов имели одно и то же имя, используйте вместо этого класс — это то, для чего они предназначены! Вот CSS, который вам нужен для стилизации (поместите вверху внутри вашего тега стиля ):
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; }
Обратите внимание, как перед именем используется хеш-знак (#, хэштег, знак фунта). Это означает, что элемент является идентификатором. Если бы вы использовали класс, вы бы использовали вместо него точку (.). У тегов html и body их отступы и поля установлены на ноль. Это предотвращает любые нежелательные проблемы с интервалами.
Пришло время перейти к логотипу и навигационной панели. Прежде чем начать, вам нужен контейнер для размещения этого контента. Давайте сделаем это классом (чтобы вы могли использовать его позже), и поскольку это не адаптивный веб-сайт, сделайте его шириной 900 пикселей.
HTML:
<div class="normal-wrapper"> </div>
CSS:
.normal-wrapper { width: 900px; margin: 0 auto; padding: 15px 40px; background: red; overflow: auto; }
Может быть трудно сказать, что происходит, пока вы не закончите код, поэтому может быть полезно добавить (временный) цветной фон, чтобы увидеть, что происходит:
background: red;
Пришло время создать логотип. Шрифт Awesome необходим для самой иконки. Font Awesome — это набор иконок, упакованный как векторный шрифт — потрясающе! Исходный код выше уже настроил Font Awesome, так что все готово!
Добавьте этот HTML внутри div -обертки normal-wrapper :
<div id="logo-container"> <i class="fa fa-volume-down logo-icon"></i> <h1>Noise Media</h1> </div>
CSS:
.logo-icon { color: #000000; font-size: 60pt; float: left; } h1 { float: left; margin: 21px 0 0 25px; }
Не беспокойтесь о том, что другие шрифты не соответствуют дизайну — это будет позже. Если вы хотите использовать разные значки, перейдите на страницу Font Awesome Icons и измените fa-volume-down на имя значка, который вы хотите использовать.
Переходя на панель навигации, вы будете использовать для этого неупорядоченный список ( UL ). Добавьте этот HTML-код после логотипа-контейнера (но все еще внутри обычной оболочки ):
<ul id="navbar"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Reviews</a></li> <li><a href="" class="last-link" >Contact</a></li> </ul>
Href используется для ссылки на другие страницы. Этот учебный веб-сайт не имеет других страниц, но вы можете указать здесь имя и путь к файлу (если требуется), например, reviews.html . Убедитесь, что вы поместили это в обе двойные кавычки.
Вот 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; }
Этот CSS начинается с неупорядоченного списка . Затем он удаляет маркеры с помощью list-style-type: none; , Ссылки немного разнесены друг от друга и окрашены, когда вы наводите на них курсор мыши. Маленький серый разделитель — это правая граница для каждого элемента, которая затем удаляется для последнего элемента с помощью класса last-link . Вот как это выглядит:
Все, что осталось для этого раздела, это красная горизонтальная цветная подсветка. Добавьте этот HTML после обычной оболочки :
<div id="top-color-splash"></div>
А вот и CSS:
#top-color-splash { width: 100%; height: 4px; background: #EB6361; }
Это верхний раздел сделано. Вот как это выглядит — очень похоже на дизайн, верно?
Основная область контента
Пришло время перейти к основной области контента — так называемой «над сгибом». Вот как выглядит эта часть:
Это довольно простая часть, часть текста слева с изображением справа. Эта область будет условно разделена на трети, что приблизительно соответствует золотому сечению.
Вам понадобится образец изображения для этой части. Это включено в загрузку . Это изображение имеет ширину 670 пикселей и взято из нашего обзора Panasonic Lumix DMC-G80 / G85. Обзор
Добавьте HTML после элемента top-color-splash :
<div class="normal-wrapper"> <div class="one-third"> <h2 class="no-margin-top">Welcome!</h2> <p>Noise Media is a technology company specialising in tech reviews.</p> <p>We're very good at what we do, but unfortunately, we are not a real company.</p> <p>Make sure you visit .com for the full tutorial on how to build this website.</p> <p>Alternatively, check out our review of the Panasonic G80 shown on the right!</p> </div> <div class="two-third"> <img class="featured-image" src="Image_1.jpg" /> </div> </div>
Обратите внимание, как вернулся элемент normal-wrapper (это радость использования классов). Вы можете быть удивлены, почему тег image ( img ) не закрывается. Это самозакрывающийся тег. Косая черта ( /> ) указывает на это, поскольку не всегда имеет смысл закрывать тег.
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; , Это гарантирует, что элементы всегда будут иметь ширину 40% или 60%. Значением по умолчанию (без этого атрибута) является указанная вами ширина плюс любые отступы, поля и границы. Максимальный размер класса изображений ( featured-image ) составляет 500 пикселей . Если вы укажете только одно измерение (ширину или высоту) и оставите другое поле пустым, css изменит размер изображения, сохранив его соотношение сторон.
Цитата Площадь
Давайте создадим область цитаты. Вот как это выглядит:
Это еще одна простая область. Он содержит темно-серый фон с белым текстом по центру.
Добавьте этот HTML после предыдущей обычной оболочки :
<div id="quote-area"> <div class="normal-wrapper"> <h3>“ is the best website ever”</h3> <h4>Joe Coburn</h4> </div> </div>
И тогда этот 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 после предыдущей области цитаты :
<div class="normal-wrapper"> <div class="icon-outer"> <div class="icon-circle"> <i class="fa fa-youtube logo-icon"></i> </div> <h5>YouTube</h5> <p>Checkout our YouTube channel for more tech reviews, tutorials and giveaways!</p> </div> <div class="icon-outer"> <div class="icon-circle"> <i class="fa fa-camera-retro logo-icon"></i> </div> <h5>Reviews</h5> <p>If you're planning to buy a new gadget, check here first. We'll give you in-depth reviews of the latest devices.</p> </div> <div class="icon-outer"> <div class="icon-circle"> <i class="fa fa-dollar logo-icon"></i> </div> <h5>Buying Guides</h5> <p>At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.</p> </div> </div>
Эти три иконки также являются Font-Awesome . HTML снова использует класс normal-wrapper . Вот 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; }
В CSS происходит несколько новых вещей. Закругленные углы задаются радиусом границы: 200 пикселей; , Установка этого значения так же, как ширина приводит к идеальному кругу. Вы можете уменьшить это, если вы предпочитаете больше квадрата с закругленными углами. Обратите внимание, как действия наведения применяются к элементам div — он не ограничивается только ссылками. Вот как выглядит этот раздел:
Нижний колонтитул
Последнее, что нужно сделать, это нижний колонтитул! Это действительно просто, так как это просто серая область без текста. Добавьте этот HTML после normal-wrapper областей значков:
<div id="footer"></div>
Вот CSS:
#footer { width: 100%; background: #F1F1F1; /* light gray */ border-top: 1px solid #D4D4D4; /* dark gray "topline" */ height: 150px; }
Видите — действительно простые вещи.
Добавьте немного Pizzazz
Вот и все, кодирование сделано! Вы можете оставить все как есть, это готовая веб-страница. Вы, возможно, заметили, однако, что это не похоже на дизайн. Основной причиной этого являются используемые шрифты. Давайте разберемся с этим.
Шрифт, используемый для большинства названий, — Myriad Pro . Это происходит с Adobe Create Cloud, но оно не доступно в качестве веб-шрифта. В настоящее время на веб-странице используется шрифт Helvetica . Это выглядит нормально, так что вы можете оставить все как есть, однако PT Sans доступен как веб-шрифт. Для всего текста используется шрифт PT Serif , который доступен как веб-шрифт.
Веб-шрифты — это простой процесс. Как и при загрузке нового шрифта на ваш компьютер, веб-страницы могут загружать шрифты по требованию. Один из лучших способов сделать это — через Google Fonts .
Добавьте этот 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-Sans используется PT-Serif .
В завершение, давайте немного поработаем с JavaScript, чтобы пролистать три разных изображения. Вам понадобятся Image_2 и Image_3 для этой части, и опять же, это необязательно. На данный момент сайт полностью функционален без этой функции. Вот как это будет выглядеть (ускорилось):
Измените ваш HTML, чтобы включить три рекомендуемых изображения. Обратите внимание, что два из них имеют скрытый класс CSS. Каждому изображению был присвоен идентификатор, чтобы JavaScript мог ориентироваться на каждый из них независимо.
<div class="two-third"> <img id="f-image-1" class="featured-image" src="Image_1.jpg" /> <img id="f-image-2" class="featured-image hidden" src="Image_2.jpg" /> <img id="f-image-3" class="featured-image hidden" src="Image_3.jpg" /> </div>
Вот CSS, необходимый для скрытия дополнительных рекомендуемых изображений:
.hidden { display: none; }
Теперь, когда мы позаботились о HTML и CSS, давайте переключимся на JavaScript. Полезно понимать объектную модель документа (DOM) для этой части, но это не является обязательным требованием.
Найдите область скрипта внизу страницы:
<script type="text/javascript"> /* JavaScript goes here, at the bottom of the page */ </script>
Добавьте следующий JavaScript внутри тега script :
/* JavaScript goes here, at the bottom of the page */ $(document).ready(function() { // run once the page is ready var time = 2500; // get the image containers $im1 = $('#f-image-1'); $im2 = $('#f-image-2'); $im3 = $('#f-image-3'); setInterval(function(){ // call function every x milliseconds (defined in time variable above) changeImage(); }, time); var currentImage = 1; function changeImage(){ switch(currentImage) { case 1: // show image 2 $im1.hide(); $im2.show(); $im3.hide(); currentImage = 2; break; case 2: // show image 3 $im1.hide(); $im2.hide(); $im3.show(); currentImage = 3; break; default: // show image 1 $im1.show(); $im2.hide(); $im3.hide(); currentImage = 1; } } });
Здесь происходит несколько вещей. Код содержится внутри $ (document) .ready () . Это означает, что он будет работать после того, как ваш браузер закончит рендеринг страницы — это хорошая практика. Функция setInterval () используется для регулярного вызова функции changeImage () с предварительно заданным интервалом в миллисекундах (1000 миллисекунд = 1 секунда). Это хранится во временной переменной. Вы можете увеличить или уменьшить его, чтобы ускорить или замедлить прокрутку. Наконец, простая инструкция case используется для показа различных изображений и отслеживания текущего отображаемого изображения.
Coding Challenge
Это оно! Надеюсь, вы многому научились в процессе. Если вы представляете себе задачу и хотите проверить свои новые найденные навыки, почему бы не попробовать реализовать эти модификации:
Добавить нижний колонтитул: Добавьте текст в нижний колонтитул (подсказка: вы можете повторно использовать классы normal-wrapper и одну треть / две трети .).
Улучшение прокрутки изображения: измените JavaScript, чтобы оживить изменения изображения (подсказка: посмотрите на jQuery fadein и animate ).
Реализация нескольких кавычек: Измените кавычки, чтобы они менялись между несколькими разными (подсказка: посмотрите на код прокрутки изображения для начальной точки).
Настройка сервера: настройте сервер и отправьте данные между веб-страницей и сервером (подсказка: прочитайте наше руководство по JSON и Python ).
Когда вы освоитесь с JavaScript или если у вас есть опыт работы с Ruby, вы можете попробовать свои силы в создании веб-сайта со статическим конструктором веб-сайтов, таким как GatsbyJS или Jekyll