Как да си направим уебсайт: За начинаещи

Как да си направим уебсайт: За начинаещи

Винаги ли сте искали да направите уебсайт? Може би сте прочели част от нашия HTML ( разбиране на HTML ) и CSS уроци, но не знам как да използвам тези езици в по -голям проект.





Днес ще ви водя през процеса на създаване на цялостен уебсайт от нулата. Не се притеснявайте, ако това ви се струва трудна задача, ще ви водя през нея на всяка стъпка.



Ще създадете този уебсайт, използвайки HTML, CSS и JavaScript с докосване на jQuery (ръководство за jQuery). Няма да правите нищо наистина ли кървене, така че този код трябва да работи доста добре в повечето съвременни браузъри.





Ако не сте сигурни в някакъв CSS, разгледайте Ръководство за CSS в W3Schools.com .

Дизайнът

Ето дизайна на този уебсайт. Разгледайте изображение с висока разделителна способност, ако искате по -добър поглед, или още по -добре, изтеглете пълния проект тук.



Проектирах този уебсайт за измислена компания в Адобе Фотошоп 2017. Ако се интересувате, не забравяйте да вземете .PSD файла от пакета за изтегляне. Ето какво получавате във файла Photoshop:

Вътре в PSD ще намерите всички слоеве, групирани, наименувани и цветно кодирани:



Ще ви трябват няколко шрифта, за да изглеждат нещата правилно. Първият е Страхотен шрифт , използвани за всички икони. Другите два шрифта са PT Serif и Myriad Pro (включени във 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).
  • Включва страхотен шрифт, хостван в Google CDN.
  • Определя а стил маркер, за да напишете вашия CSS.
  • Определя а скрипт маркер, за да напишете вашия JavaScript.

Запазете файла си отново и го отворете във вашия уеб браузър. Вероятно няма да забележите много и със сигурност все още няма да изглежда като уебсайт.

Забележете как е заглавието на страницата Носителна среда . Това се определя от текста вътре в заглавие етикет. Това има да бъде вътре в глава тагове.

как да изпратите анонимен имейл

Заглавката

Нека създадем заглавката. Ето как изглежда това:

Нека започнем с онова малко сиво в горната част. Това е светло сиво с леко тъмно сиво отдолу. Ето отблизо:

Добавете този HTML в тяло етикет в горната част:

Докато сте тук, нека разбием това. А div е като контейнер, в който да се поставят други неща. Тези „други неща“ могат да бъдат повече контейнери, текст, изображения, всичко наистина. Има някои ограничения за това, което може да влезе в определени тагове, но divs са доста общи неща. Той има документ за самоличност на горната лента . Това ще се използва за стилизиране с CSS и прицелване с JavaScript, ако е необходимо. Уверете се, че имате само един елемент с определен идентификатор - те трябва да са уникални. Ако искате няколко елемента да имат едно и също име, използвайте a клас вместо това - за това са предназначени! Ето 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;
}

Забележете как знакът за хеш (#, хаштаг, знак за паунд) се използва преди името. Това означава, че елементът е ID. Ако използвате клас, вместо това бихте използвали точка (.). The html и тяло етикетите имат пълнене и марж на нула. Това предотвратява всички нежелани проблеми с разстоянието.

Време е да преминем към логото и навигационната лента. Преди да започнете, имате нужда от контейнер, в който да поставите това съдържание. Нека направим това клас (за да можете да го използвате повторно по-късно), и тъй като това е не отзивчив уебсайт, направете го широк 900 пиксела.

HTML:


CSS:

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

Може да е трудно да се каже какво се случва, докато не завършите кода, така че може да бъде полезно да добавите (временен) цветен фон, за да видите какво се случва:

background: red;

Време е да създадете логото сега. Страхотен шрифт е необходимо за самата икона. Font Awesome е набор от икони, опаковани като векторен шрифт - страхотно! Първоначалният код по -горе вече настройва Font Awesome, така че всичко е готово за работа!

Добавете този HTML вътре на нормална обвивка div:



CSS:

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

Не се притеснявайте, че другите шрифтове не отговарят на дизайна - ще го подредите по -късно. Ако искате да използвате различни икони, преминете към Страхотни икони на шрифта страница и след това променете fa-намаляване на звука към името на иконата, която искате да използвате.

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

The 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; . Връзките са малко раздалечени и получават цвят, когато задържите мишката върху тях. Малкият сив разделител е дясна граница на всеки елемент, която след това се премахва за последния елемент с помощта на последна връзка клас. Ето как изглежда това:

Всичко, което остава за този раздел, е червеният хоризонтален цветен акцент. Добавете този 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.

можете ли да получите netflix на switch

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

Най -важният атрибут тук е размер на кутията: border-box; . Това гарантира, че елементите винаги ще бъдат с 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.



Тези три икони също са Шрифт-Страхотен . 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 се случват няколко нови неща. Заоблените ъгли се задават от рамка-радиус: 200px; . Задаването на тази стойност като ширината води до перфектен кръг. Можете да намалите това, ако предпочитате повече квадрат със заоблени ъгли. Забележете как действията при задържане на курсора се прилагат към divs - не е ограничено само до връзки. Ето как изглежда този раздел сега:

Последното нещо, което трябва да направите, е долният колонтитул! Това е много просто, тъй като това е просто сива зона без текст. Добавете този HTML след областите на иконите ' нормална обвивка :

Ето CSS:

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

Вижте - наистина прости неща.

Добавете малко Pizzazz

Това е всичко, кодирането е направено! Можете абсолютно да оставите нещата такива, каквито са, това е завършена уеб страница. Може би сте забелязали, че не изглежда точно като дизайна. Основната причина за това са използваните шрифтове. Нека да решим това.

Шрифтът, използван за повечето заглавия, е Безброй Pro . Това идва с Adobe Създайте облак, но той не е наличен като уеб шрифт. Шрифтът, който в момента се използва на уеб страницата, е Хелветика . Това изглежда добре, така че можете да го оставите както е 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 () . Това означава, че ще стартира, след като браузърът ви завърши изобразяването на страницата - това е добра практика. The setInterval () функцията се използва за извикване на changeImage () функционират редовно на предварително определен интервал в милисекунди (1000 милисекунди = 1 секунда). Това се съхранява в време променлива. Можете да увеличите или намалите това, за да ускорите или забавите превъртането. И накрая, просто изявление за случай се използва за показване на различни изображения и проследяване на показваното в момента изображение.

Кодиране Предизвикателство

Това е! Надяваме се, че сте научили много по време на процеса. Ако ви харесва предизвикателство и искате да изпробвате новооткритите си умения, защо не опитате да внедрите тези модификации:

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

Подобрете превъртането на изображението: Променете JavaScript, за да анимирате промените в изображението (подсказка: погледнете jQuery избледнява и Анимирани ).

Прилагане на множество кавички: Променете кавичките, за да промените между един от няколко различни (подсказка: погледнете кода за превъртане на изображението за начална точка).

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

как да завъртите видео в Windows Media Player?

След като се чувствате удобно да използвате JavaScript или ако имате опит с Ruby, можете да опитате да създадете уебсайт със статичен конструктор на уебсайтове като GatsbyJS или Jekyll.

Дял Дял Туит електронна поща Как да промените външния вид и усещането на вашия работен плот на Windows 10

Искате ли да знаете как да направите Windows 10 да изглежда по -добре? Използвайте тези прости персонализации, за да направите Windows 10 свой собствен.

Прочетете Напред Свързани теми
  • Програмиране
  • HTML
  • Уеб дизайн
  • CSS
За автора Джо Кобърн(136 статии са публикувани)

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

Още от Джо Кобърн

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате