Kako narediti spletno mesto: Za začetnike

Kako narediti spletno mesto: Za začetnike

Ste si vedno želeli narediti spletno stran? Morda ste prebrali nekaj našega HTML -ja ( razumevanje HTML ) in vaje CSS, vendar ne veste, kako uporabljati te jezike pri večjih projektih.





Danes vas bom vodil skozi postopek izdelave celotnega spletnega mesta iz nič. Ne skrbite, če se vam to zdi težka naloga, vodil vas bom skozi to na vsakem koraku.



To spletno mesto boste izdelali z uporabo HTML, CSS in JavaScript s pridihom jQuery (vodnik po jQuery). Ne boste počeli ničesar res krvavitev, zato bi morala ta koda v večini sodobnih brskalnikov delovati precej dobro.





Če niste prepričani o kakšnem CSS -ju, si oglejte CSS priročnik ob W3Schools.com .

Dizajn

Tukaj je zasnova tega spletnega mesta. Oglejte si sliko visoke ločljivosti, če želite boljši pogled, ali še bolje, celoten projekt prenesite tukaj.



To spletno mesto sem oblikoval za izmišljeno podjetje v Adobe Photoshop 2017. Če vas zanima, prenesite datoteko .PSD iz paketa za prenos. V datoteki Photoshop dobite naslednje:

V PSD -ju boste našli vse sloje, združene, poimenovane in barvno kodirane:



Če želite videti pravilno, potrebujete nekaj pisav. Prvi je Pisava Awesome , ki se uporablja za vse ikone. Drugi dve pisavi sta PT Serif in Myriad Pro (vključeno v Photoshop). Če niste prepričani, kako namestiti pisave, preberite naš vodnik.

Ne skrbite, če nimate Adobe Photoshop , za nadaljevanje ne potrebujete.



Začetna koda

Zdaj, ko je zasnova jasna, začnimo s kodiranjem! Ustvarite novo datoteko v svojem najljubšem urejevalniku besedil (uporabljam Vrhunsko besedilo 3 ). Shrani to kot index.html . Temu lahko rečete karkoli želite, razlog za to, da se številne strani imenujejo indeks, je način delovanja spletnih strežnikov. Privzeta konfiguracija za večino strežnikov je, da prikaže stran index.html, če ni podana nobena stran.

Če ne želite izvedeti podrobnosti, poiščite celotno kodo iz prenosa.

Tukaj je koda, ki jo potrebujete:





Noise Media


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





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


To naredi več stvari:

  • Določa minimalni zahtevani HTML.
  • Določa naslov strani »Noise Media«
  • Vključuje jQuery, ki gostuje v Google CDN (kaj je CDN).
  • Vključuje Font Awesome, ki gostuje na Google CDN.
  • Določa a slog oznako, v katero želite vnesti svoj CSS.
  • Določa a skript oznako, v katero želite vnesti svoj JavaScript.

Znova shranite datoteko in jo odprite v spletnem brskalniku. Verjetno ne boste opazili veliko in zagotovo še ne bo videti kot spletno mesto.

Opazite, kako je naslov strani Nosilni mediji . To je opredeljeno z besedilom v naslov oznaka. To ima biti znotraj glavo oznake.

kako vklopiti namizje Mac

Glava

Ustvarimo glavo. Evo, kako to izgleda:

Začnimo s tem sivim koščkom na vrhu. Je svetlo sive barve z rahlo temno sivo spodaj. Tukaj je od blizu:

Dodajte ta HTML v telo oznaka na vrhu:

Ko ste tukaj, razčistimo to. A div je kot zabojnik, v katerega lahko vstavite druge stvari. Te 'druge stvari' so lahko več vsebnikov, besedila, slik in česar koli drugega. Obstajajo nekatere omejitve glede tega, kaj lahko gre za določene oznake, vendar so divi precej splošne stvari. Ima id od zgornja vrstica . To bo uporabljeno za oblikovanje s CSS in po potrebi ciljanje na JavaScript. Poskrbite, da imate samo en element z določenim ID -jem - biti morajo edinstveni. Če želite, da ima več elementov isto ime, uporabite a razred namesto tega - temu so namenjeni! Tukaj je CSS, ki ga potrebujete za oblikovanje (postavite ga na vrh znotraj slog oznaka):

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

Upoštevajte, kako se pred imenom uporablja znak za razpršitev (#, hashtag, znak za funt). To pomeni, da je element ID. Če bi uporabljali razred, bi namesto tega uporabili točko (.). The html in telo oznake in rob sta nastavljena na nič. To preprečuje kakršne koli neželene težave z razmikom.

Čas je, da preidete na logotip in navbarno vrstico. Preden začnete, potrebujete vsebnik, v katerega bo vstavljena ta vsebina. Naj bo to razred (tako da ga boste kasneje lahko ponovno uporabili). ne Odzivno spletno mesto naj bo široko 900 slikovnih pik.

HTML:


CSS:

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

Težko je povedati, kaj se dogaja, dokler ne dokončate kode, zato je lahko koristno dodati (začasno) barvno ozadje, da vidite, kaj se dogaja:

background: red;

Čas je, da ustvarite logotip. Pisava Awesome je potreben za samo ikono. Font Awesome je niz ikon, zapakiranih kot vektorska pisava - super! Zgornja začetna koda je že nastavila Font Awesome, zato je vse pripravljeno!

Dodajte ta HTML notri the normalni ovoj div:



CSS:

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

Ne skrbite, da druge pisave ne ustrezajo oblikovanju - to boste kasneje uredili. Če želite uporabiti različne ikone, pojdite na Čudovite ikone pisave stran, nato pa spremenite fa-zmanjšanje glasnosti na ime ikone, ki jo želite uporabiti.

Če se pomaknete na navigacijsko vrstico, boste uporabili neurejen seznam ( the ) za to. Dodajte ta HTML po the logo-zabojnik (vendar še vedno v normalni ovoj ):

The href se uporablja za povezavo do drugih strani. Ta spletna stran z vadnicami nima drugih strani, vendar lahko tukaj vnesete ime in pot do datoteke (če je potrebno), npr. reviews.html . Poskrbite, da to vnesete v obe dvojni narekovaji.

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

Ta CSS se začne z neurejen seznam . Nato odstrani oznake z uporabo list-style-type: none; . Povezave so malo razmaknjene in dobijo barvo, ko z miško premaknete nanje. Majhen sivi razdelilnik je desna obroba na vsakem elementu, ki se nato odstrani za zadnji element z uporabo zadnja povezava razred. Evo, kako to izgleda:

Za ta razdelek ostane le še rdeča vodoravna barvna oznaka. Ta HTML dodajte po normalni ovoj :

In tukaj je CSS:

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

To je zgornji del narejen. Evo, kako izgleda - precej podobno oblikovanju, kajne?

Področje glavne vsebine

Zdaj je čas, da se premaknete na glavno vsebinsko področje-tako imenovano 'nad pregibom'. Takole izgleda ta del:

To je precej preprost del, nekaj besedila na levi s sliko na desni. To področje bo ohlapno razdeljeno na tretjine, približno približno Zlata sredina .

Za ta del boste potrebovali vzorčno sliko. Vključeno je v prenos. Ta slika je široka 670 slikovnih pik in je iz našega pregleda Panasonic Lumix DMC-G80/G85.

Dodajte HTML po 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.

zakaj se moja sporočila ne dostavijo

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






Upoštevajte, kako normalni ovoj element se je vrnil (to je veselje pri uporabi razredov). Morda se sprašujete, zakaj slika ( img ) se oznaka ne zapre. To je samozapiralna oznaka. Poševnica naprej ( /> ) označuje to, saj ni vedno smiselno zapreti oznake.

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

Tu je najpomembnejša lastnost velikost škatle: okvir-okvir; . To zagotavlja, da bodo elementi vedno široki 40% ali 60%. Privzeto (brez tega atributa) je vaša podana širina skupaj z oblazinjenji, robovi in ​​obrobami. Razred slike ( predstavljena slika ) ima največja širina od 500 slikovnih pik . Če določite samo eno dimenzijo (širino ali višino), drugo pa pustite prazno, bo css spremenil velikost slike, hkrati pa ohranil njeno razmerje stranic.

Področje ponudb

Ustvarimo področje narekovajev. Evo, kako to izgleda:

To je še eno preprosto področje. Vsebuje temno sivo ozadje z belim besedilom v sredini.

Dodajte ta HTML po prejšnji normalni ovoj :



makeuseof is the best website ever


Joe Coburn



In potem ta 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;
}

Tu se ne dogaja veliko. Velikost je glavna potrebna prilagoditev - velikost pisave, razmik itd. Takole zdaj izgleda vse skupaj - začelo je izgledati kot spletno mesto!

Območje ikon

Nadaljujmo s pritiskom - skoraj je končano! Tukaj je naslednje področje, ki ga je treba ustvariti:

Ta del bo uporabljal več razredov. Tri ikone so večinoma enake, razen vsebine, zato je smiselno uporabiti razrede namesto ID -jev. Dodajte ta HTML po prejšnji območje narekovajev :






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.



Te tri ikone so tudi Pisava-super . HTML znova uporablja normalni ovoj razred. Tukaj je 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;
}

V CSS se dogaja nekaj novih stvari. Zaobljene vogale določa meja-polmer: 200px; . Če to vrednost nastavite enako kot širino, dobite popoln krog. To lahko zmanjšate, če želite bolj kvadrat z zaobljenimi vogali. Upoštevajte, kako se dejanja z miško nanašajo na divi - ni omejeno samo na povezave. Takole zdaj izgleda ta razdelek:

Zadnja stvar, ki jo morate narediti, je noga! To je zelo preprosto, saj gre le za sivo območje brez besedila. Dodajte ta HTML za območja ikon ' normalni ovoj :

Tukaj je CSS:

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

Glej - res preproste stvari.

Dodajte nekaj Pizzazza

To je to, kodiranje je končano! Stvari lahko popolnoma pustite takšne, kot so, to je dokončana spletna stran. Morda ste opazili, da ni videti točno kot dizajn. Glavni razlog za to so uporabljene pisave. Rešimo to.

Pisava, ki se uporablja za večino naslovov, je Nešteto Pro . To prihaja z Adobe Ustvarite oblak, vendar ni na voljo kot spletna pisava. Pisava, ki se trenutno uporablja na spletni strani, je Helvetica . To je videti v redu, zato lahko pustite, kot je PT Sans je na voljo kot spletna pisava. Pisava, uporabljena za vse besedilo, je PT Serif , ki je na voljo kot spletna pisava.

Spletne pisave so preprost postopek. Tako kot nalaganje nove pisave v računalnik lahko tudi spletne strani naložijo pisave na zahtevo. Eden najboljših načinov za to je skozi Googlove pisave .

Če želite preklopiti na boljše pisave, dodajte ta 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';
}

Zdaj spremenite svoje html in telesne elemente za uporabo novih pisav:

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

Upoštevajte, da element h3 ni vključen na seznam - to bo privzeto nastavljeno na PT-Serif namesto PT-Sans .

Kot zadnjo lepoto uporabimo nekaj JavaScripta za pomikanje po treh različnih predstavljenih slikah. Boste potrebovali Slika_2 in Slika_3 za ta del in spet ni obvezen. Spletno mesto je v tem trenutku popolnoma funkcionalno brez te funkcije. Takole bo videti (pospešeno):

Spremenite svoj HTML tako, da bo vključeval tri predstavljene slike. Opazite, kako imata ta dva razreda CSS skrito . Vsaki sliki je bil dodeljen ID, tako da lahko JavaScript vsako od njih cilja neodvisno.





Tukaj je CSS, potreben za skrivanje dodatnih predstavljenih slik:

.hidden {
display: none;
}

Zdaj, ko je poskrbljeno za HTML in CSS, preidimo na JavaScript. Za ta del je koristno razumeti objektni model dokumenta (DOM), vendar to ni pogoj.

Poišči skript območje na dnu strani:


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

V datoteko skript oznaka:

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

Tu se dogaja nekaj stvari. Koda je v notranjosti $ (dokument) .ready () . To pomeni, da se bo zagnalo, ko bo brskalnik končal upodabljanje strani - to je dobra praksa. The setInterval () funkcija se uporablja za klicanje changeImage () redno deluje v vnaprej določenem intervalu v milisekundah (1000 milisekund = 1 sekunda). To je shranjeno v čas spremenljivka. To lahko povečate ali zmanjšate, da pospešite ali upočasnite drsenje. Nazadnje, preprosta izjava o primeru se uporablja za prikaz različnih slik in spremljanje trenutno prikazane slike.

Kodiranje izziv

To je to! Upajmo, da ste se med postopkom veliko naučili. Če imate radi izziv in želite preizkusiti svoje novo pridobljene sposobnosti, zakaj ne poskusite izvesti teh sprememb:

Dodajte nogo: V nogo dodajte nekaj besedila (namig: lahko znova uporabite normalni ovoj in ena tretjina/dve tretjini razrede.).

Izboljšajte drsenje slike: Spremenite JavaScript, če želite animirati spremembe slike (namig: poglejte jQuery fadein in Animirani ).

Izvedite več narekovajev: Spremenite narekovaje, če želite spremeniti enega izmed več različnih (namig: poiščite izhodiščno kodo za premikanje slik).

Nastavitev strežnika: Nastavite strežnik in pošljite podatke med spletno stranjo in strežnikom (namig: preberite naš vodnik za JSON in Python).

kako operater odkleniti telefon android

Ko se boste naučili uporabljati JavaScript ali če imate izkušnje z Rubyjem, se lahko preizkusite v ustvarjanju spletnega mesta s statičnim graditeljem spletnih mest, kot sta GatsbyJS ali Jekyll.

Deliti Deliti Cvrkutati E-naslov Kako spremeniti videz in občutek namizja Windows 10

Želite vedeti, kako narediti Windows 10 boljši? S temi preprostimi prilagoditvami naredite Windows 10 svoj.

Preberite Naprej Sorodne teme
  • Programiranje
  • HTML
  • Oblikovanje spletnih strani
  • CSS
O avtorju Joe Coburn(136 objavljenih člankov)

Joe je diplomiral iz računalništva na Univerzi v Lincolnu v Veliki Britaniji. Je poklicni razvijalec programske opreme in ko ne leti z brezpilotnimi letali ali ne piše glasbe, ga pogosto najdejo pri fotografiranju ali ustvarjanju videoposnetkov.

Več od Joea Coburna

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti