Annonse

Har du alltid ønsket å lage et nettsted? Kanskje du har lest noen av HTML-ene våre (forstå HTML 5 trinn for å forstå grunnleggende HTML-kode 5 trinn for å forstå grunnleggende HTML-kode Les mer) og CSS opplæringsprogrammer 5 Baby trinn for å lære CSS og bli en Kick-Ass CSS Sorcerer 5 Baby trinn til å Lære CSS og bli en Kick-Ass CSS Sorcerer CSS er de mest viktige endringswebsider som har sett i det siste tiåret, og det banet vei for adskillelse av stil og innhold. På den moderne måten definerer XHTML den semantiske strukturen ... Les mer, men vet ikke hvordan man bruker disse språkene på et større prosjekt.

I dag skal jeg veilede deg gjennom prosessen med å lage et komplett nettsted fra bunnen av. Ikke bekymre deg om dette virker som en vanskelig oppgave, jeg veileder deg gjennom det hvert skritt av veien.

Du vil produsere dette nettstedet ved hjelp av HTML, CSS og JavaScript med et snev av jQuery (guide til jQuery En grunnleggende veiledning til JQuery for Javascript-programmerere En grunnleggende veiledning til JQuery for Javascript-programmerere Hvis du er en Javascript-programmerer, vil denne veiledningen til JQuery hjelpe du begynner å kode som en ninja. Les mer). Du vil ikke gjøre noe virkelig blødende kant, så denne koden skal fungere ganske bra i de fleste moderne nettlesere.

Hvis du ikke er sikker på noen CSS, ta en titt på CSS-guiden på W3Schools.com.

Designet

Her er designen for denne nettsiden. Ta en titt på et høyoppløselig bilde hvis du vil ha et bedre utseende, eller enda bedre, last ned hele prosjektet her.

Jeg laget denne nettsiden for et fiktivt selskap i Adobe Photoshop CC 2017. Hvis du er interessert, må du sørge for at du tar tak i .PSD-filen fra buntdownloaden. Her er hva du får i Photoshop-filen:

Innenfor PSD finner du alle lagene gruppert, navngitt og fargekodede:

Du trenger noen fonter installert for at ting skal se riktig ut. Den første er Font Awesome, brukt til alle ikonene. De to andre skrifttyper er PT Serif og Myriad Pro (følger med Photoshop). Hvis du ikke er sikker på hvordan du installerer skrifter, leser du vår veiledning Slik installerer du skrifter på Windows, Mac og Linux Slik installerer du skrifter på Windows, Mac og Linux Les mer.

Ikke bekymre deg hvis du ikke har Photoshop, trenger du ikke å fortsette.

Innledende kode

Nå som designen er klar, la oss begynne å kode! Opprett en ny fil i favoritt tekstredigeringsprogrammet (jeg bruker Sublime Text 3). Lagre dette som index.html . Du kan kalle dette alt du liker, grunnen til at mange sider kalles indeks skyldes måten webservere jobber på. Standardkonfigurasjonen for de fleste servere er å betjene index.html siden hvis ingen side er angitt.

Hvis du ikke vil lære detaljene, kan du ta tak i hele koden fra nedlastingen.

Her er koden du trenger:

Noise Media /* CSS goes here, at the top of the page */ /* JavaScript goes here, at the bottom of the page */ 

Dette gjør flere ting:

• Definerer det krevende minimumet HTML som kreves.
• Definerer en side tittel på "Støy Media"
• Inkluderer jQuery hostet på Google CDN (hva er en CDN Hvilke CDN er og hvorfor lagring ikke lenger er et problem Hvilke CDN er og hvorfor lagring ikke lenger er Et problem CDNer gjør Internett raskt og nettsteder rimelige, selv når du skaler til millioner av brukere., båndbredde koster penger, de av oss på begrensede kontrakter vet det alt for godt. Ikke bare gjør du ... Les mer).
• Inkluderer Font Awesome hostet på Google CDN.
• Definerer en stilmerke for å skrive CSS i.
• Definerer en skriptetikett for å skrive inn JavaScript.

Lagre filen igjen og åpne den i nettleseren din. Du vil nok ikke legge merke til mye, og det vil sikkert ikke se ut som et nettsted enda.

Legg merke til hvordan sidetittelen er Støymedier . Dette er definert av teksten inne i titteletiketten. Dette må være inne i hodetegnene.

Overskriften

La oss lage overskriften. Her ser det ut som:

La oss begynne med den lille gråbiten øverst. Det er en lysegrå med en svak mørk grå under. Her er en nærbilde:

Legg til denne HTML-koden inne i kroppstegnet øverst:

Mens du er her, la oss bryte dette ned. En div er som en beholder for å sette inn andre ting. Denne "andre ting" kan være flere containere, tekst, bilder, noe egentlig. Det er noen begrensninger på hva som kan gå inn i bestemte koder, men divs er ganske generiske ting. Den har et topp-bar- id . Dette vil bli brukt til å stile det med CSS, og målrett det med JavaScript hvis nødvendig. Pass på at du bare har ett element med et bestemt ID - de skal være unike. Hvis du vil at flere elementer skal ha samme navn, bruk en klasse i stedet - det er det de er designet for! Her er CSS du må style den (sett øverst inne i stilen din):

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

Legg merke til hvordan hash sign (#, hashtag, pund sign) brukes før navnet. Dette betyr at elementet er en ID. Hvis du brukte en klasse, ville du bruke en fullstopp (.) I stedet. Html- og kroppskodene har deres polstring og margin satt til null. Dette forhindrer problemer med uønskede mellomrom.

Det er på tide å gå videre til logoen og navbaren. Før du begynner, trenger du en beholder for å sette dette innholdet inn. La oss gjøre dette til en klasse (slik at du kan bruke det senere), og siden dette ikke er en responsiv nettside, gjør den 900 piksler bred.

HTML:

CSS:

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

Det kan være vanskelig å fortelle hva som skjer til du er ferdig med koden, så det kan være nyttig å legge til en (midlertidig) farget bakgrunn for å se hva som skjer:

 background: red; 

Det er på tide å lage logoen nå. Font Awesome er nødvendig for selve ikonet. Font Awesome er et sett med ikoner pakket opp som en vektor font - fantastisk! Den opprinnelige koden ovenfor er allerede konfigurert Font Awesome, så det er alt klart å gå!

Legg til denne HTML- indeksen i normal-wrapper div:

  
 Noise Media 

CSS:

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

Ikke bekymre deg for de andre skriftene som ikke samsvarer med designet - du vil rydde opp det senere. Hvis du ønsker å bruke forskjellige ikoner, kan du gå videre til siden Font Awesome Icons, og deretter endre fa-volum ned til navnet på ikonet du vil bruke.

Hvis du flytter på navigasjonslinjen, bruker du en uordnet liste ( UL ) for dette. Legg til denne HTML-en etter logo-containeren (men fortsatt inne i normal-wrapper ):

Hjem
Handle om
anmeldelser
Kontakt

Href er brukt til å koble til andre sider. Denne opplæringswebsiden har ingen andre sider, men du kan sette navnet og filbanen (hvis nødvendig) her, for eksempel vurderinger.html . Pass på at du setter dette inn i begge to sitater.

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

Dette CSS starter med en uordnet liste . Den fjerner deretter punktpoengene ved hjelp av listestype: none; . Lenker er adskilt litt, og gitt en farge når du holder musen over dem. Den lille grå deleren er en rett kant på hvert element, som deretter fjernes for det siste elementet ved hjelp av siste link- klassen. Her ser det ut som:

Alt som er igjen for denne delen er det røde horisontale fargelyset. Legg til denne HTML -filen etter normal innpakning :

Og her er CSS:

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

Det er den øverste delen gjort. Her ser det ut som det ser ut - ganske lik designen riktig?

Hovedinnholdsområde

Nå er det på tide å flytte på hovedinnholdsområdet - den såkalte "over fold". Slik ser denne delen ut:

Dette er en ganske enkel del, noen tekst til venstre med et bilde til høyre. Dette området vil bli løst oppdelt i tredjedeler, omtrent omtrentlig Golden Ratio Bruke Golden Ratio i fotografering for bedre komposisjon Bruke Golden Ratio i fotografering for bedre komposisjon Kjører du med fotosammensetning? Her er to teknikker basert på Golden Ratio som vil forbedre bildene dine drastisk, med liten innsats fra din side. Les mer .

Du vil trenge prøvebildet for denne delen. Den er inkludert i nedlastingen. Dette bildet er 670px bredt, og er fra vår Panasonic Lumix DMC-G80 / G85-gjennomgang Panasonic Lumix DMC-G80 / G85-gjennomgang Panasonic Lumix DMC-G80 / G85-gjennomgang Lumix G85 er Panasonics nyeste speilfrie kamera, og det pakker en alvorlig slag i videoavdelingen, med HDMI ut og 4K-opptak - alt for $ 1000! Les mer .

Legg til HTML-koden etter toppfargestråleelementet :

Velkommen! 
Noise Media er et teknologiselskap som spesialiserer seg på tekniske anmeldelser.
Vi er veldig gode på hva vi gjør, men dessverre er vi ikke et ekte selskap.
Sørg for at du besøker makeuseof.com for hele opplæringen om hvordan du bygger denne nettsiden.
Alternativt kan du sjekke ut vår anmeldelse av Panasonic G80 vist til høyre!

Legg merke til hvordan det normale innpakningselementet har returnert (det er gleden av å bruke klasser). Du lurer kanskje på hvorfor bildet ( img ) -merket ikke lukker. Dette er en selvlukkende kode. Fremoverstreket ( /> ) indikerer dette, da det ikke alltid er fornuftig å lukke en tagg.

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

Den viktigste egenskapen her er boks størrelse: border-box; . Dette sikrer at elementene alltid skal være 40% eller 60% bredde. Standard (uten dette attributtet) er den angitte bredden pluss eventuelle polstring, marginer og grenser. Bildeklassen ( featured-image ) har en maksimal bredde på 500px . Hvis du bare angir en dimensjon (bredde eller høyde), og la den andre være tom, vil css endre størrelsen på bildet samtidig som det opprettholder aspektforholdet.

Sitatområde

La oss lage sitatområdet. Slik ser dette ut:

Dette er et annet enkelt område. Den inneholder en mørkegrå bakgrunn, med hvit, sentrert tekst.

Legg til denne HTML-koden etter forrige normalpakke :

"Makeuseof er den beste nettsiden noensinne" 
Joe Coburn 

Og så dette 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; } 

Det skjer ikke mye her. Dimensjonering er den viktigste justeringen som trengs - skriftstørrelse, mellomrom, og så videre. Her ser det ut som alt ser ut akkurat nå - det begynner å se ut som et nettsted!

Ikonområde

La oss fortsette å trykke på - det er nesten ferdig! Her er neste område som trenger å skape:

Denne delen vil benytte flere klasser. De tre ikonene er stort sett de samme, med unntak av innholdet, så det er fornuftig å bruke klasser i stedet for ids. Legg til denne HTML-koden etter forrige sitatområde :

  
 YouTube 
Sjekk ut vår YouTube-kanal for flere tekniske anmeldelser, opplæringsprogrammer og oppgaver!
 anmeldelser 
Hvis du planlegger å kjøpe en ny gadget, sjekk her først. Vi gir deg grundig gjennomgang av de nyeste enhetene.
 Kjøpe guider 
Ved å kjøpe veiledninger streber vi oss for å gi leserne verktøyene for å få de beste greiene for det laveste beløpet.

Disse tre ikonene er også Font-Awesome. HTML-en er igjen å bruke normal-wrapper- klassen. Her er 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; } 

Det er noen nye ting som skjer i CSS. De avrundede hjørnene blir satt av grense-radius: 200px; . Innstilling av denne verdien som den samme som bredden, resulterer i en perfekt sirkel. Du kan redusere dette hvis du foretrekker mer av et firkant med avrundede hjørner. Legg merke til hvordan hoverhandlinger brukes på divs - det er ikke bare begrenset til koblinger. Slik ser denne delen ut akkurat nå:

The Footer

Den siste tingen å gjøre er bunnteksten! Dette er veldig enkelt, siden det bare er et grått område uten tekst. Legg til denne HTML-koden etter ikonområdenees vanlige innpakning :

Her er CSS:

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

Se - veldig enkle ting.

Legg til litt pizzazz

Det er det, kodingen er ferdig! Du kan absolutt la ting som de er, det er en ferdig nettside. Du har kanskje lagt merke til at det ikke ser ut akkurat som designet. Hovedårsaken til dette er skrifttyper som brukes. La oss sortere det ut.

Skriften som brukes for de fleste av titlene er Myriad Pro . Dette kommer med Adobe Create Cloud, men det er ikke tilgjengelig som webfont. Skriften som brukes på nettsiden er Helvetica . Dette ser bra ut, så du kan la det være, men PT Sans er tilgjengelig som en webfont. Skriften som brukes til all teksten, er PT Serif, som er tilgjengelig som en webfont.

Webfonter er en enkel prosess. På samme måte som å laste inn en ny skrift på datamaskinen, kan nettsider laste inn skrifter på forespørsel. En av de beste måtene å gjøre dette på er via Google Fonts.

Legg til dette CSS for å bytte til de bedre skriftene:

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

Endre nå html- og kroppselementene dine for å bruke de nye skriftene:

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

Legg merke til hvordan h3-elementet ikke er inkludert i listen - dette er standard for PT-Serif istedenfor PT-Sans .

Som en siste bit av prettiness, la oss bruke litt JavaScript for å bla gjennom tre forskjellige kjente bilder. Du trenger Image_2 og Image_3 for denne delen, og igjen er det valgfritt. Nettstedet er helt funksjonelt på dette tidspunktet uten denne funksjonen. Her er hvordan det vil se ut (sped opp):

Endre HTML-en din for å inkludere tre kjennetegnede bilder. Legg merke til hvordan to av disse har en CSS-klasse av skjult . Hvert bilde har fått en ID, slik at JavaScript kan målrette hver enkelt av dem selvstendig.

Her er CSS som trengs for å skjule de ekstra kjente bildene:

 .hidden { display: none; } 

Nå som HTML og CSS er tatt vare på, la oss bytte til JavaScript. Det er nyttig å forstå dokumentobjektmodellen JavaScript og webutvikling: Bruke dokumentobjektmodellen JavaScript og webutvikling: Bruke dokumentobjektmodellen Denne artikkelen vil introdusere deg til dokumentskeletet som JavaScript fungerer med. Å ha et arbeidskunnskap om denne abstrakte dokumentobjektmodellen, kan du skrive JavaScript som fungerer på en hvilken som helst nettside. Les mer (DOM) for denne delen, men det er ikke et krav.

Finn skriptområdet nederst på siden:

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

Legg til følgende JavaScript inne i skriptet :

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

Det skjer noen ting her. Koden er inneholdt i $ (dokument) .ready () . Dette betyr at det vil løpe når nettleseren din har fullført siden - dette er en god praksis. Funksjonen setInterval () brukes til å ringe funksjonen changeImage () regelmessig til et forhåndsdefinert intervall i millisekunder (1000 millisekunder = 1 sekund). Dette lagres i tidsvariabelen. Du kan øke eller redusere dette for å øke hastigheten eller senke rullingen. Endelig brukes en enkel case-setning til å vise forskjellige bilder, og holde oversikt over bildet som vises.

Koding Utfordring

Det er det! Forhåpentligvis lærte du mye under prosessen. Hvis du har lyst på en utfordring, og vil sette de nye ferdighetene du har prøvd, hvorfor ikke prøv å implementere disse endringene:

Legg til en bunntekst: Legg til litt tekst i bunnteksten (hint: du kan bruke vanlig innpakning og en tredjedel / to tredjedeler .).
Forbedre bildet rulle: Endre JavaScript for å animere bildeendringene (hint: se på jQuery fadein og animere).
Implementere flere anførselstegn: Endre anførselstegnene for å bytte mellom en av flere forskjellige (hint: se på bildeskrollkoden for et utgangspunkt).
Oppsett en server: Oppsett en server og send data mellom nettsiden og serveren (hint: les vår guide til JSON og Python Hvordan få Python og JavaScript til å kommunisere ved hjelp av JSON Hvordan få Python og JavaScript til å kommunisere ved hjelp av JSON I dag vil jeg vise deg hvordan du bruker JSON til å sende data fra JavaScript til Python. Jeg skal dekke hvordan du konfigurerer en webserver, sammen med all koden du trenger. Les mer).

Har du lært noen nye ferdigheter i dag? Hvordan tok du deg av de kodende utfordringene? Hvilke modifikasjoner har du gjort for å gjøre dette nettstedet ditt eget? Gi oss beskjed i kommentarene nedenfor, vi vil gjerne vite!