Как сделать сайт: для начинающих

Как сделать сайт: для начинающих

Вы всегда хотели создать сайт? Возможно, вы читали наш HTML ( понимание HTML ) и CSS, но не знаю, как использовать эти языки в большом проекте.





Сегодня я проведу вас через процесс создания полноценного веб-сайта с нуля. Не волнуйтесь, если это кажется сложной задачей, я буду сопровождать вас на каждом этапе пути.



Вы создадите этот веб-сайт, используя HTML, CSS и JavaScript, с добавлением jQuery (руководство по jQuery). Ты ничего не будешь делать В самом деле передний край, поэтому этот код должен хорошо работать в большинстве современных браузеров.





Если вы не уверены в каком-либо CSS, взгляните на Руководство по CSS в W3Schools.com .

Дизайн

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



Я разработал этот сайт для вымышленной компании в Adobe Photoshop 2017. Если вам интересно, убедитесь, что вы взяли файл .PSD из загружаемого пакета. Вот что вы получите в файле фотошопа:

Внутри PSD вы найдете все слои, сгруппированные, названные и имеющие цветовую кодировку:



Вам понадобится установить несколько шрифтов, чтобы все выглядело правильно. Первый - это Font Awesome , используется для всех значков. Два других шрифта PT Serif и Myriad Pro (входит в состав Photoshop). Если вы не знаете, как устанавливать шрифты, прочтите наше руководство.

Не волнуйся, если у тебя нет Adobe Photoshop , вам это не нужно для продолжения.



Исходный код

Теперь, когда дизайн понятен, приступим к написанию кода! Создайте новый файл в своем любимом текстовом редакторе (я использую Возвышенный текст 3 ). Сохраните это как index.html . Вы можете называть это как угодно, потому что многие страницы называются индексами из-за того, как работают веб-серверы. Конфигурация по умолчанию для большинства серверов заключается в обслуживании страницы index.html, если страница не указана.

Если вы не хотите узнавать подробности, возьмите полный код из загрузки.

Вот код, который вам нужен:





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */


Это делает несколько вещей:

  • Определяет минимум необходимого HTML.
  • Определяет заголовок страницы 'Noise Media'
  • Включает jQuery, размещенный в Google CDN (что такое CDN).
  • Включает Font Awesome, размещенный на Google CDN.
  • Определяет стиль тег для записи вашего CSS.
  • Определяет сценарий тег для записи вашего JavaScript.

Снова сохраните файл и откройте его в веб-браузере. Вы, вероятно, ничего не заметите, и уж точно пока он не будет похож на веб-сайт.

Обратите внимание, как выглядит заголовок страницы Шумовые СМИ . Это определяется текстом внутри заглавие ярлык. Этот имеет быть внутри голова теги.

откуда берутся продукты желаний

Заголовок

Создадим заголовок. Вот как это выглядит:

Начнем с серого наверху. Это светло-серый с небольшим темно-серым под ним. Вот крупный план:

Добавьте этот HTML-код в тело тег вверху:

Пока вы здесь, давайте разберемся с этим. А div подобен контейнеру, в который помещается другой материал. Этот «другой материал» может быть большим количеством контейнеров, текста, изображений и всего, что угодно. Существуют некоторые ограничения на то, что может входить в определенные теги, но div - это довольно общие вещи. Имеет я бы из верхняя планка . Это будет использоваться для стилизации его с помощью 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 а также тело У тегов заполнение и поля равны нулю. Это предотвращает любые нежелательные проблемы с интервалами.

Пришло время перейти к логотипу и навигационной панели. Прежде чем вы начнете, вам понадобится контейнер, в который будет помещено это содержимое. Давайте сделаем это классом (чтобы вы могли повторно использовать его позже), и поскольку это нет адаптивный веб-сайт, сделайте его шириной 900 пикселей.

HTML:


CSS:

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

Может быть трудно сказать, что происходит, пока вы не закончите код, поэтому может быть полезно добавить (временный) цветной фон, чтобы увидеть, что происходит:

background: red;

Пришло время создать логотип. Font Awesome нужен для самой иконки. Font Awesome - это набор иконок в виде векторного шрифта - круто! Исходный код выше уже настроил Font Awesome, так что все готово к работе!

Добавьте этот HTML внутри в нормальная обертка div:



CSS:

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

Не беспокойтесь о том, что другие шрифты не соответствуют дизайну - вы поправите это позже. Если вы хотите использовать разные значки, перейдите к Font Awesome Иконки страницу, а затем измените fa-volume-down к имени значка, который вы хотите использовать.

Перейдя на панель навигации, вы будете использовать неупорядоченный список ( в ) для этого. Добавьте этот HTML после в логотип-контейнер (но все еще внутри нормальная обертка ):

В 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 начинается с неупорядоченный список . Затем он удаляет маркеры, используя тип-стиль-список: нет; . Ссылки немного разнесены и окрашиваются в цвет, когда вы наводите на них указатель мыши. Маленький серый разделитель - это правая граница на каждом элементе, которая затем удаляется для последнего элемента с помощью последняя ссылка класс. Вот как это выглядит:

Все, что осталось для этого раздела, - это горизонтальная красная подсветка. Добавьте этот HTML-код после нормальная обертка :

А вот CSS:

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

Это верхний раздел готов. Вот как это выглядит - очень похоже на дизайн, не так ли?

Основная область содержимого

Пришло время перейти к области основного контента - так называемой «верхней части страницы». Вот как выглядит эта деталь:

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

Вам понадобится образец изображения для этой части. Он включен в загрузку. Это изображение шириной 670 пикселей из нашего обзора Panasonic Lumix DMC-G80 / G85.

Добавьте HTML после в всплеск верхнего цвета элемент:



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.

как восстановить удаленные картинки на android

Alternatively, check out our review of the Panasonic G80 shown on the right!






Обратите внимание, как нормальная обертка элемент вернулся (это радость использования классов). Вам может быть интересно, почему изображение ( 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 */
}

Самым важным атрибутом здесь является размер коробки: рамка-рамка; . Это гарантирует, что элементы всегда будут иметь ширину 40% или 60%. По умолчанию (без этого атрибута) указанная ширина плюс любые отступы, поля и границы. Класс изображения ( Популярные изображения ) имеет Максимальная ширина из 500 пикселей . Если вы укажете только одно измерение (ширину или высоту), а другое оставите пустым, css изменит размер изображения, сохраняя его соотношение сторон.

Ценовая область

Создадим область цитаты. Вот как это выглядит:

Это еще одна простая область. Он содержит темно-серый фон с белым текстом по центру.

Добавьте этот 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.



Эти три значка также Font-Awesome . HTML снова использует нормальная обертка класс. Вот 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-код после областей значков ' нормальная обертка :

Вот CSS:

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

Смотрите - действительно простые вещи.

Добавьте немного Pizzazz

Вот и все, кодирование готово! Вы можете оставить все как есть, это готовая веб-страница. Однако вы могли заметить, что это не выглядит точно нравится дизайн. Основная причина этого - используемые шрифты. Давайте разберемся с этим.

Шрифт, используемый для большинства заголовков: Myriad Pro . Это идет с Adobe Создайте облако, но оно недоступно в виде веб-шрифта. В настоящее время на веб-странице используется шрифт Helvetica . Выглядит нормально, но вы можете оставить все как есть. PT Sans доступен как веб-шрифт. Шрифт, используемый для всего текста: PT Serif , который доступен как веб-шрифт.

Веб-шрифты - это простой процесс. Так же, как загрузка нового шрифта на ваш компьютер, веб-страницы могут загружать шрифты по запросу. Один из лучших способов сделать это - через Google шрифты .

Добавьте этот 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 вместо того PT-Sans .

В качестве финальной части красивости давайте воспользуемся JavaScript для прокрутки трех различных избранных изображений. Тебе понадобится Изображение_2 а также Изображение_3 для этой части, и опять же, это необязательно. На данный момент веб-сайт полностью функционален без этой функции. Вот как это будет выглядеть (ускорено):

Измените свой HTML, включив в него три избранных изображения. Обратите внимание, что у двух из них есть класс CSS скрытый . Каждому изображению был присвоен идентификатор, чтобы JavaScript мог настроить таргетинг на каждое из них независимо.





Вот CSS, необходимый для скрытия дополнительных избранных изображений:

.hidden {
display: none;
}

Теперь, когда мы позаботились о HTML и CSS, давайте перейдем к JavaScript. В этой части полезно понимать объектную модель документа (DOM), но это не является обязательным требованием.

Найди сценарий область внизу страницы:


/* JavaScript goes here, at the bottom of the page */

Добавьте следующий код JavaScript внутри сценарий ярлык:

/* 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;
}
}
});

Здесь происходит несколько вещей. Код находится внутри $ (документ) .ready () . Это означает, что он будет запущен после того, как ваш браузер завершит рендеринг страницы - это хорошая практика. В setInterval () функция используется для вызова changeImage () работают регулярно с заданным интервалом в миллисекундах (1000 миллисекунд = 1 секунда). Это хранится в время Переменная. Вы можете увеличить или уменьшить это значение, чтобы ускорить или замедлить прокрутку. Наконец, простой оператор case используется для отображения различных изображений и отслеживания текущего изображения.

Coding Challenge

Вот и все! Надеюсь, вы многому научились в процессе. Если вам нравится сложная задача и вы хотите проверить свои новые навыки, почему бы не попробовать реализовать эти модификации:

Добавить нижний колонтитул: Добавьте текст в нижний колонтитул (подсказка: вы можете повторно использовать нормальная обертка а также одна треть / две трети классы.).

Улучшение прокрутки изображения: Измените JavaScript, чтобы анимировать изменения изображения (подсказка: посмотрите jQuery угасать а также Анимированные ).

Реализуйте несколько кавычек: Измените кавычки, чтобы переключаться между одним из нескольких разных (подсказка: посмотрите на код прокрутки изображения для отправной точки).

Настройте сервер: Настройте сервер и отправьте данные между веб-страницей и сервером (подсказка: прочтите наше руководство по JSON и Python).

как сделать диск восстановления для windows 8.1

Когда вы освоитесь с JavaScript или если у вас есть опыт работы с Ruby, вы можете попробовать свои силы в создании веб-сайта с помощью конструктора статических веб-сайтов, такого как GatsbyJS или Jekyll.

Делиться Делиться Твитнуть Эл. адрес Как изменить внешний вид рабочего стола Windows 10

Хотите узнать, как улучшить внешний вид Windows 10? Используйте эти простые настройки, чтобы сделать Windows 10 своей собственной.

Читать далее Похожие темы
  • Программирование
  • HTML
  • Веб-дизайн
  • CSS
Об авторе Джо Коберн(136 опубликованных статей)

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

Ещё от Joe Coburn

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Нажмите здесь, чтобы подписаться