Kako napraviti web stranicu: Za početnike

Kako napraviti web stranicu: Za početnike

Jeste li oduvijek željeli napraviti web stranicu? Možda ste pročitali neki naš HTML ( razumijevanje HTML -a ) i CSS vodiči, ali ne znaju koristiti te jezike na većem projektu.





Danas ću vas voditi kroz proces izrade cjelovite web stranice od nule. Ne brinite ako vam se ovo čini kao težak zadatak, vodit ću vas kroz to na svakom koraku.



Napravit ćete ovu web stranicu koristeći HTML, CSS i JavaScript s dodirom jQueryja (vodič za jQuery). Nećete ništa raditi stvarno krvarenje, pa bi ovaj kôd trebao prilično dobro funkcionirati u većini modernih preglednika.





Ako niste sigurni u neki CSS, pogledajte CSS vodič na W3Schools.com .

Dizajn

Evo dizajna ove web stranice. Pogledajte sliku visoke razlučivosti ako želite bolji izgled, ili još bolje, preuzmite cijeli projekt ovdje.



Dizajnirao sam ovu web stranicu za izmišljenu tvrtku u Adobe Photoshop 2017. Ako ste zainteresirani, svakako preuzmite .PSD datoteku iz paketa za preuzimanje. Evo što dobivate u datoteci Photoshopa:

Unutar PSD -a pronaći ćete sve slojeve grupirane, imenovane i označene bojama:



Morat ćete instalirati nekoliko fontova da bi stvari izgledale ispravno. Prvi je Font Sjajan , koristi se za sve ikone. Druga dva fonta su PT Serif i Myriad Pro (uključeno u Photoshop). Ako niste sigurni kako instalirati fontove, pročitajte naš vodič.

Ne brinite ako nemate Adobe Photoshop , ne trebate za nastavak.



Početni kod

Sad kad je dizajn jasan, započnimo kodiranje! Izradite novu datoteku u svom omiljenom uređivaču teksta (koristim Uzvišeni tekst 3 ). Spremite ovo kao index.html . To možete nazvati kako god želite, razlog zašto se mnoge stranice nazivaju indeksom je zbog načina rada web poslužitelja. Zadana konfiguracija za većinu poslužitelja je posluživanje stranice index.html ako nije navedena stranica.

Ako ne želite saznati detalje, preuzmite cijeli kôd iz preuzimanja.

Evo koda koji vam je potreban:





Noise Media


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





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


To čini nekoliko stvari:

  • Definira minimalno potreban HTML.
  • Definira naslov stranice 'Noise Media'
  • Uključuje jQuery hostiran na Google CDN -u (što je CDN).
  • Uključuje Font Awesome hostiran na Google CDN -u.
  • Definira a stil oznaku za pisanje vašeg CSS -a.
  • Definira a skripta oznaku za pisanje vašeg JavaScript -a.

Ponovo spremite datoteku i otvorite je u svom web pregledniku. Vjerojatno nećete primijetiti mnogo, a zasigurno još neće izgledati ni kao web stranica.

Obratite pažnju na naslov stranice Noise Media . To je definirano tekstom unutar datoteke titula označiti. Ovaj ima biti unutar glava oznake.

kako poslati anonimnu e -poštu

Zaglavlje

Kreirajmo zaglavlje. Evo kako to izgleda:

Počnimo s onim malim sivim dijelom na vrhu. Svijetlosiva je s malo tamnosive boje ispod. Evo izbliza:

Dodajte ovaj HTML u tijelo oznaka na vrhu:

Dok ste ovdje, hajde da to razbijemo. A div je poput spremnika za umetanje drugih stvari. Ove 'druge stvari' mogu biti više spremnika, teksta, slika, bilo čega doista. Postoje neka ograničenja u pogledu toga što može ući u određene oznake, ali divi su prilično općenite stvari. Ima an iskaznica od gornja traka . To će se koristiti za oblikovanje s CSS -om i ciljanje na JavaScript ako je potrebno. Provjerite imate li samo jedan element s određenim ID -om - oni bi trebali biti jedinstveni. Ako želite da više elemenata ima isti naziv, upotrijebite a razred umjesto toga - to je ono za što su dizajnirani! Evo CSS -a koji vam je potreban za oblikovanje (stavite ga na vrh unutar stil označiti):

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

Obratite pažnju na to kako se znak hash (#, hashtag, znak funte) koristi ispred imena. To znači da je element ID. Da ste koristili klasu, umjesto toga biste koristili točku (.). The html i tijelo oznake i rub imaju oznake nula. Time se sprječavaju svi neželjeni problemi s razmakom.

Vrijeme je da prijeđete na logotip i navigacijsku traku. Prije nego počnete, potreban vam je spremnik za umetanje ovog sadržaja. Neka ovo postane klasa (kako biste je kasnije mogli ponovno koristiti), a kako je to ne responzivna web stranica, neka bude široka 900 piksela.

HTML:


CSS:

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

Može biti teško reći što se događa dok ne dovršite kôd, pa može biti korisno dodati (privremenu) pozadinu u boji kako biste vidjeli što se događa:

background: red;

Vrijeme je za izradu logotipa. Font Sjajan je potrebno za samu ikonu. Font Awesome skup je ikona pakiranih kao vektorski font - super! Početni kod iznad već je postavio Font Awesome, pa je sve spremno za rad!

Dodajte ovaj HTML unutra the normalni omot div:



CSS:

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

Ne brinite što drugi fontovi ne odgovaraju dizajnu - to ćete kasnije pospremiti. Ako želite koristiti različite ikone, prijeđite na Font Awesome Icons stranicu, a zatim promijenite fa-smanjivanje glasnoće na naziv ikone koju želite koristiti.

Prelaskom na navigacijsku traku koristit ćete neuređen popis ( the ) za ovo. Dodajte ovaj HTML nakon the logo-kontejner (ali još uvijek unutar normalni omot ):

The href koristi se za povezivanje na druge stranice. Ova web stranica s vodičem nema drugih stranica, ali ovdje možete staviti naziv i put do datoteke (ako je potrebno), npr. recenzije.html . Stavite ovo unutar oba dvostruka navoda.

Evo CSS -a:

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

Ovaj CSS počinje s neuređen popis . Zatim uklanja točke označavanja pomoću list-style-type: none; . Veze su malo razmaknute i dobivaju boju kada zadržite pokazivač miša iznad njih. Mali sivi razdjelnik desna je ivica na svakom elementu, koja se zatim uklanja za posljednji element pomoću zadnja veza razred. Evo kako to izgleda:

Sve što je ostalo za ovaj odjeljak je crvena vodoravna oznaka boje. Dodajte ovaj HTML nakon normalni omot :

A evo i CSS -a:

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

To je gornji dio gotov. Evo kako to izgleda - prilično slično dizajnu, zar ne?

Područje glavnog sadržaja

Vrijeme je da prijeđete na područje glavnog sadržaja-takozvano 'iznad preklopa'. Evo kako ovaj dio izgleda:

Ovo je prilično jednostavan dio, neki tekst lijevo sa slikom na desnoj strani. Ovo područje će biti labavo podijeljeno na trećine, otprilike približno Zlatni omjer .

Za ovaj dio trebat će vam ogledna slika. Uključeno je u preuzimanje. Ova slika je široka 670 piksela i potječe iz našeg Panasonic Lumix DMC-G80/G85 pregleda.

Dodajte HTML nakon the top-color-splash element:



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.

kako pokrenuti tumblr blog

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






Uočite kako je normalni omot element se vratio (to je zadovoljstvo korištenja klasa). Možda se pitate zašto slika ( img ) oznaka se ne zatvara. Ovo je oznaka koja se sama zatvara. Kosa crta ( /> ) ukazuje na to jer nema uvijek smisla zatvarati oznaku.

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

Ovdje je najvažniji atribut okvir veličine: border-box; . Time se osigurava da će elementi uvijek biti širine 40% ili 60%. Zadana vrijednost (bez ovog atributa) je vaša navedena širina plus bilo koji ulomak, margine i obrubi. Klasa slike ( istaknuta slika ) ima maksimalna širina od 500 piksela . Ako navedete samo jednu dimenziju (širinu ili visinu), a drugu ostavite praznom, css će promijeniti veličinu slike, zadržavajući omjer slike.

Područje citata

Kreirajmo područje citata. Evo kako ovo izgleda:

Ovo je još jedno jednostavno područje. Sadrži tamno sivu pozadinu s bijelim tekstom u sredini.

Dodajte ovaj HTML nakon prethodni normalni omot :



makeuseof is the best website ever


Joe Coburn



I onda ovaj 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;
}

Ovdje se ne događa puno. Veličina je glavno potrebno prilagođavanje - veličina fonta, razmak itd. Evo kako sada cijela stvar izgleda - počinje izgledati kao web stranica!

Područje ikona

Nastavimo s pritiskom - skoro je gotovo! Evo sljedećeg područja koje je potrebno stvoriti:

Ovaj dio će koristiti nekoliko klasa. Tri ikone su uglavnom iste, s izuzetkom sadržaja, pa ima smisla koristiti klase umjesto ID -ova. Dodajte ovaj HTML nakon prethodni područje navodnika :






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.



Ove tri ikone su također Font-Strašan . HTML ponovno koristi normalni omot razred. Evo CSS -a:

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

U CSS -u se događa nekoliko novih stvari. Zaobljene kutove postavljaju border-radius: 200px; . Postavljanje ove vrijednosti isto kao i širina rezultira savršenim krugom. To možete smanjiti ako želite više kvadrata sa zaobljenim uglovima. Obratite pažnju na to kako se radnje miša primjenjuju na odjeljke za div - nije ograničeno samo na veze. Evo kako ovaj odjeljak sada izgleda:

Zadnje što trebate učiniti je podnožje! Ovo je stvarno jednostavno jer je to samo sivo područje bez teksta. Dodajte ovaj HTML nakon područja ikona ' normalni omot :

Evo CSS -a:

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

Vidite - stvarno jednostavne stvari.

Dodajte malo Pizzazza

To je to, kodiranje je gotovo! Apsolutno možete ostaviti stvari kakve jesu, to je gotova web stranica. Možda ste ipak primijetili da to ne izgleda točno poput dizajna. Glavni razlog tome su korišteni fontovi. Riješimo to.

Font koji se koristi za većinu naslova je Bezbroj Pro . Ovo dolazi sa Adobe Izradite Cloud, ali nije dostupan kao web -font. Font koji se trenutno koristi na web stranici je Helvetica . Ovo izgleda u redu, pa biste ipak mogli ostaviti kako jest PT Sans dostupan je kao web font. Font koji se koristi za sav tekst je PT Serif , koji je dostupan kao web font.

Webfontovi su jednostavan proces. Baš kao i učitavanje novog fonta na vaše računalo, web stranice mogu učitavati fontove na zahtjev. Jedan od najboljih načina za to je putem Google fontovi .

Dodajte ovaj CSS da biste prešli na bolje fontove:

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

Sada izmijenite html i elemente tijela tako da koriste nove fontove:

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

Primijetite kako element h3 nije uključen u popis - ovo će prema zadanim postavkama biti PT-Serif umjesto PT-Sans .

Kao posljednju sitnicu, upotrijebimo neki JavaScript za pomicanje kroz tri različite istaknute slike. Trebat će vam Slika_2 i Slika_3 za ovaj dio, i opet, nije obavezno. Web stranica je u ovom trenutku potpuno funkcionalna bez ove značajke. Evo kako će to izgledati (ubrzano):

Izmijenite svoj HTML tako da uključi tri istaknute slike. Primijetite kako dvije od njih imaju CSS klasu skriven . Svaka je slika dobila ID tako da JavaScript može zasebno ciljati svaku od njih.





Evo CSS -a potrebnog za skrivanje dodatnih istaknutih slika:

.hidden {
display: none;
}

Sada kada smo se pobrinuli za HTML i CSS, prijeđimo na JavaScript. Za ovaj dio je korisno razumjeti Objektni model dokumenta (DOM), ali to nije uvjet.

Naći skripta područje pri dnu stranice:


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

Dodajte sljedeći JavaScript unutar datoteke skripta označiti:

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

Ovdje se događa nekoliko stvari. Kôd se nalazi unutra $ (dokument) .ready () . To znači da će se pokrenuti kada vaš preglednik dovrši iscrtavanje stranice - ovo je dobra praksa. The setInterval () funkcija se koristi za pozivanje changeImage () funkcionira redovito u unaprijed definiranom intervalu u milisekundama (1000 milisekundi = 1 sekunda). Ovo je pohranjeno u vrijeme promjenjivo. To možete povećati ili smanjiti kako biste ubrzali ili usporili pomicanje. Konačno, jednostavna izjava slučaja koristi se za prikaz različitih slika i praćenje trenutno prikazane slike.

Izazov kodiranja

To je to! Nadamo se da ste tijekom procesa puno naučili. Ako volite izazov i želite testirati svoje nove vještine, zašto ne biste pokušali implementirati ove izmjene:

Dodajte podnožje: Dodajte malo teksta u podnožje (savjet: mogli biste ponovno upotrijebiti normalni omot i jedna trećina/dvije trećine klase.).

Poboljšajte pomicanje slike: Izmijenite JavaScript da biste animirali promjene slike (savjet: pogledajte jQuery nestati u i Animirani ).

Implementirajte više citata: Izmijenite navodnike kako biste ih promijenili između nekoliko različitih (natuknica: pogledajte početnu točku u kodu za pomicanje slike).

Postavljanje poslužitelja: Postavite poslužitelj i šaljite podatke između web stranice i poslužitelja (savjet: pročitajte naš vodič za JSON i Python).

kako pokrenuti dijagnostiku sustava

Kad vam bude odgovaralo korištenje JavaScripta ili ako imate iskustva s Rubyjem, možete se okušati u stvaranju web stranice sa statičnim graditeljem web stranica poput GatsbyJS -a ili Jekylla.

Udio Udio Cvrkut E -pošta Kako promijeniti izgled i osjećaj radne površine sustava Windows 10

Želite li znati kako Windows 10 izgledati bolje? Pomoću ovih jednostavnih prilagodbi Windows 10 učinite svojim.

Pročitajte Dalje Povezane teme
  • Programiranje
  • HTML
  • Web dizajn
  • CSS
O autoru Joe Coburn(136 objavljenih članaka)

Joe je diplomirao računalne znanosti na Sveučilištu Lincoln, UK. On je profesionalni programer softvera, a kad ne leti bespilotnim letjelicama ili ne piše glazbu, često ga se može zateći kako fotografira ili proizvodi video zapise.

Više od Joea Coburna

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu