Како направити веб страницу: За почетнике

Како направити веб страницу: За почетнике

Да ли сте одувек желели да направите веб страницу? Можда сте прочитали неки наш ХТМЛ ( разумевање ХТМЛ -а ) и ЦСС водичи, али не знају како да користе те језике на већем пројекту.





Данас ћу вас водити кроз процес израде комплетне веб странице од нуле. Не брините ако вам ово изгледа као тежак задатак, водићу вас кроз то на сваком кораку.



Направићете ову веб страницу користећи ХТМЛ, ЦСС и ЈаваСцрипт са додиром јКуери -ја (водич за јКуери). Нећете ништа радити заиста крварење, па би овај код требало да ради прилично добро у већини модерних прегледача.





Ако нисте сигурни у било који ЦСС, погледајте ЦСС водич ат В3Сцхоолс.цом .

Дизајн

Ево дизајна ове веб странице. Погледајте слику високе резолуције ако желите бољи изглед, или још боље, преузмите цео пројекат овде.



Дизајнирао сам ову веб страницу за измишљену компанију у Адобе Пхотосхоп 2017. Ако сте заинтересовани, преузмите .ПСД датотеку из пакета за преузимање. Ево шта добијате у датотеци Пхотосхоп:

Унутар ПСД -а ћете пронаћи све слојеве груписане, именоване и означене бојом:



Да би ствари изгледале исправно, биће вам потребно неколико фонтова. Први је Фонт Авесоме , користи се за све иконе. Друга два фонта су ПТ Сериф и Мириад Про (укључено у Пхотосхоп). Ако нисте сигурни како инсталирати фонтове, прочитајте наш водич.

Не брините ако немате Адобе Пхотосхоп , не треба вам за наставак.



Почетни код

Сада када је дизајн јасан, почнимо кодирање! Направите нову датотеку у свом омиљеном уређивачу текста (користим Узвишени текст 3 ). Сачувајте ово као индек.хтмл . Ово можете назвати како год желите, разлог зашто се многе странице зову индекс је због начина на који веб сервери раде. Подразумевана конфигурација за већину сервера је да служи страници индек.хтмл ако није наведена ниједна страница.

Ако не желите да сазнате детаље, преузмите цео код из преузимања.

Ево кода који вам је потребан:





Noise Media


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





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


Ово чини неколико ствари:

  • Дефинише минимално потребан ХТМЛ.
  • Дефинише наслов странице „Ноисе Медиа“
  • Укључује јКуери хостован на Гоогле ЦДН -у (шта је ЦДН).
  • Укључује Фонт Авесоме хостован на Гоогле ЦДН -у.
  • Дефинише а стил ознаку за писање вашег ЦСС -а.
  • Дефинише а скрипта ознаку за писање вашег ЈаваСцрипт -а.

Поново сачувајте датотеку и отворите је у свом веб прегледачу. Вероватно нећете много приметити, а сигурно још увек неће изгледати као веб страница.

Обратите пажњу на наслов странице Ноисе Медиа . Ово је дефинисано текстом унутар датотеке наслов таг. Ово има бити унутар глава ознаке.

Виндовс није могао аутоматски открити поставке прокија ове мреже за Виндовс 10

Заглавље

Креирајмо заглавље. Ево како то изгледа:

Почнимо са оним малим сивим делом на врху. Светло је сиво са благо тамносиве боје испод. Ево изблиза:

Додајте овај ХТМЛ у тело ознака на врху:

Док сте овде, хајде да ово разбијемо. А. див је попут контејнера за убацивање других ствари. Ове 'друге ствари' могу бити више контејнера, текста, слика, било чега другог. Постоје нека ограничења у погледу тога шта може да уђе у одређене ознаке, али диви су прилично опште ствари. Има ид оф горња трака . Ово ће се користити за обликовање са ЦСС -ом и циљање помоћу ЈаваСцрипт -а ако је потребно. Уверите се да имате само један елемент са одређеним ИД -ом - они би требали бити јединствени. Ако желите да више елемената има исто име, користите а класа уместо тога - то је оно за шта су дизајнирани! Ево ЦСС -а који вам је потребан за обликовање (ставите га на врх унутар стил ознака):

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;
}

Обратите пажњу на то како се знак хеша (#, хасхтаг, знак фунте) користи испред имена. То значи да је елемент ИД. Да сте користили класу, уместо ње бисте користили тачку (.). Тхе хтмл и тело Тагови имају свој паддинг и маргину на нули. Ово спречава све нежељене проблеме са размаком.

Време је да пређемо на лого и навигациону траку. Пре него што почнете, потребан вам је контејнер у који ћете ставити овај садржај. Нека ово постане класа (да бисте је касније могли поново користити), а како је ово не прилагодљива веб страница, нека буде широка 900 пиксела.

ХТМЛ:


ЦСС:

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

Може бити тешко рећи шта се дешава док не довршите код, па може бити корисно додати (привремену) позадину у боји да видите шта се дешава:

background: red;

Време је за креирање логотипа. Фонт Авесоме је потребно за саму икону. Фонт Авесоме је скуп икона упакованих као векторски фонт - одлично! Почетни код изнад већ је поставио Фонт Авесоме, тако да је све спремно за рад!

Додајте овај ХТМЛ у тхе нормал-враппер див:



ЦСС:

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

Не брините да други фонтови не одговарају дизајну - то ћете касније средити. Ако желите да користите различите иконе, пређите на Фонт Авесоме Ицонс страницу, а затим промените фа-волуме-довн на име иконе коју желите да користите.

Прелазећи на навигациону траку, користићете неуређену листу ( тхе ) за ово. Додајте овај ХТМЛ после тхе лого-контејнер (али још увек унутар нормал-враппер ):

Тхе хреф се користи за повезивање на друге странице. Ова веб страница са водичем нема других страница, али овде можете ставити име и путању датотеке (ако је потребно), нпр. ревиевс.хтмл . Уверите се да сте ово унели унутар оба двострука навода.

Ево ЦСС -а:

#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;
}

Овај ЦСС почиње са неуређена листа . Затим уклања тачке за набрајање помоћу лист-стиле-типе: ноне; . Везе су мало размакнуте и добијају боју када пређете мишем преко њих. Мали сиви разделник је десна ивица на сваком елементу, која се затим уклања за последњи елемент помоћу последња веза класа. Ево како то изгледа:

Све што је остало за овај одељак је црвена хоризонтална ознака боје. Додајте овај ХТМЛ након нормал-враппер :

А ево и ЦСС -а:

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

То је горњи део урађен. Ево како то изгледа - прилично слично дизајну, зар не?

Подручје главног садржаја

Сада је време да пређемо на главно подручје садржаја-такозвано „изнад прелома“. Ево како овај део изгледа:

Ово је прилично једноставан део, неки текст са леве стране са сликом са десне стране. Ово подручје ће бити лабаво подељено на трећине, отприлике приближно Голден Ратио .

За овај део ће вам требати пример слике. Укључено је у преузимање. Ова слика је широка 670 пиксела и потиче из нашег Панасониц Лумик ДМЦ-Г80/Г85 прегледа.

Додајте ХТМЛ после тхе врхунске боје елемент:



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!






Обратите пажњу на то како се нормал-враппер елемент се вратио (то је задовољство коришћења класа). Можда се питате зашто слика ( имг ) ознака се не затвара. Ово је ознака која се сама затвара. Коса црта ( /> ) указује на то, јер нема увек смисла затварање ознаке.

ЦСС:

.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пк . Ако наведете само једну димензију (ширину или висину), а другу оставите празну, цсс ће променити величину слике уз задржавање пропорције.

Куоте Ареа

Креирајмо подручје цитата. Ево како ово изгледа:

Ово је још једно једноставно подручје. Садржи тамно сиву позадину са белим текстом у средини.

Додајте овај ХТМЛ после Претходна нормал-враппер :



makeuseof is the best website ever


Joe Coburn



И онда овај ЦСС:

#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;
}

Овде се не дешава много. Величина је главно потребно прилагођавање - величина фонта, размак итд. Ево како цела ствар сада изгледа - почиње да личи на веб локацију!

Ицон Ареа

Наставимо са притиском - скоро је готово! Ево следеће области коју је потребно створити:

Овај део ће користити неколико класа. Три иконе су углавном исте, са изузетком садржаја, па има смисла користити класе уместо ИД -ова. Додајте овај ХТМЛ после Претходна подручје наводника :






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.



Ове три иконе су такође Фонт-Авесоме . ХТМЛ поново користи нормал-враппер класа. Ево ЦСС -а:

.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;
}

У ЦСС -у се дешава неколико нових ствари. Заобљене углове постављају бордер-радиус: 200пк; . Постављање ове вредности исто као и ширина резултира савршеним кругом. Ово можете смањити ако више волите квадрат са заобљеним угловима. Обратите пажњу на то како се акције лебдења примењују на дивове - није ограничено само на везе. Ево како овај одељак сада изгледа:

Последње што треба да урадите је подножје! Ово је заиста једноставно, јер је то само сива зона без текста. Додајте овај ХТМЛ после области икона ' нормал-враппер :

Ево ЦСС -а:

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

Видите - заиста једноставне ствари.

Додајте мало Пиззазз -а

То је то, кодирање је завршено! Апсолутно можете оставити ствари какве јесу, то је готова веб страница. Можда сте ипак приметили да то не изгледа баш тако попут дизајна. Главни разлог за то су кориштени фонтови. Хајде да то решимо.

Фонт који се користи за већину наслова је Мириад Про . Ово долази са Адобе Направите Цлоуд, али није доступан као веб фонт. Фонт који се тренутно користи на веб страници је Хелветица . Ово изгледа у реду, па бисте могли оставити како јесте ПТ Санс је доступан као веб фонт. Фонт који се користи за цео текст је ПТ Сериф , који је доступан као веб фонт.

Вебфонтови су једноставан процес. Баш као и учитавање новог фонта на ваш рачунар, веб странице могу учитавати фонтове на захтев. Један од најбољих начина за то је кроз Гоогле фонтови .

Додајте овај ЦСС да бисте прешли на боље фонтове:

@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';
}

Сада измените хтмл и боди елементе да бисте користили нове фонтове:

font-family: 'PT Serif', 'Helvetica', 'Arial';

Обратите пажњу на то како елемент х3 није укључен у листу - ово ће подразумевано бити ПТ-Сериф уместо ПТ-Санс .

Као последњи делић лепоте, употребимо неки ЈаваСцрипт за листање кроз три различите истакнуте слике. Требаћеш Слика_2 и Слика_3 за овај део, и опет, није обавезно. Веб локација је у овом тренутку потпуно функционална без ове функције. Ево како ће то изгледати (убрзано):

Измените свој ХТМЛ тако да укључи три истакнуте слике. Обратите пажњу на то како два од њих имају ЦСС класу сакривен . Свакој слици је додељен ИД тако да ЈаваСцрипт може да циља сваку од њих независно.





Ево ЦСС -а потребног да сакријете додатне слике:

.hidden {
display: none;
}

Сада када смо се побринули за ХТМЛ и ЦСС, пређимо на ЈаваСцрипт. За овај део је корисно разумети Објектни модел документа (ДОМ), али то није услов.

Пронађите скрипта област при дну странице:


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

Додајте следећи ЈаваСцрипт у скрипта ознака:

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

Овде се дешава неколико ствари. Код се налази унутра $ (доцумент) .реади () . То значи да ће се покренути када прегледач заврши приказивање странице - ово је добра пракса. Тхе сетИнтервал () функција се користи за позивање цхангеИмаге () функционишу редовно у унапред дефинисаном интервалу у милисекундама (1000 милисекунди = 1 секунда). Ово је ускладиштено у време променљива. Ово можете повећати или смањити да бисте убрзали или успорили помицање. Коначно, једноставна изјава случаја користи се за приказивање различитих слика и праћење тренутно приказане слике.

Цодинг Цхалленге

То је то! Надајмо се да сте током процеса много научили. Ако волите изазов и желите да тестирате своје новостечене вештине, зашто не бисте покушали да примените ове измене:

Додајте подножје: Додајте текст у подножје (савет: можете поново да користите нормал-враппер и једна трећина/две трећине класе.).

Побољшајте померање слика: Измените ЈаваСцрипт да бисте анимирали промене слике (савет: погледајте јКуери фадеин и Анимирани ).

Имплементирајте више цитата: Измените наводнике да бисте прелазили са једног на више различитих (наговештај: погледајте почетну тачку у коду за померање слике).

Подесите сервер: Подесите сервер и шаљите податке између веб странице и сервера (савет: прочитајте наш водич за ЈСОН и Питхон).

како добити аеро тему на виндовс 10

Једном када се навикнете на коришћење ЈаваСцрипт -а или ако имате искуства са Руби -јем, можете се окушати у креирању веб локације са статичним градитељем веб страница попут ГатсбиЈС -а или Јекилл -а.

Објави Објави Твеет Емаил Како променити изглед и осећај ваше Виндовс 10 радне површине

Желите да знате како да Виндовс 10 изгледа боље? Користите ове једноставне прилагодбе да бисте Виндовс 10 учинили својим.

Прочитајте следеће Повезане теме
  • Програмирање
  • ХТМЛ
  • Веб дизајн
  • ЦСС
О аутору Јое Цобурн(136 објављених чланака)

Јое је дипломирао рачунарство на Универзитету Линцолн, УК. Он је професионални програмер софтвера и када не лети беспилотним летелицама или не пише музику, често га се може затећи како фотографише или производи видео записе.

Више од Јоеа Цобурна

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили