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 egentlig 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:

Dette gjør flere ting:

• Definerer det krevende minimumet HTML som kreves.
• Definerer en sidetittel på “Noise 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 a stil tag for å skrive CSS i.
• Definerer a manus tag 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 Noise Media. Dette er definert av teksten inne i tittel stikkord. Dette har å være inne i hode tags.

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-en i kropp tag øverst:

Mens du er her, la oss bryte dette ned. EN div er som en beholder for å sette andre ting inn. Dette “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 en id av top-bar. 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 inni din stil stikkord):

html, kropp margin: 0; polstring: 0; font-familie: 'Helvetica', 'Arial'; / * første skrifttyper * / # topplinje bredde: 100%; bakgrunn: # F1F1F1; / * lysgrå * / grensebunn: 1px solid # D4D4D4; / * mørk grå "understreke" * / høyde: 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. De html og kropp koder 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 inn innholdet. La oss gjøre dette til en klasse (slik at du kan bruke det senere), og da dette er ikke En responsiv nettside, gjør den 900 piksler bred.

HTML:

CSS:

.normal innpakning bredde: 900px; margin: 0 auto; polstring: 15px 40px; bakgrunn: rød; overløp: 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:

bakgrunn: rød;

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 helt klart å gå!

Legg til denne HTML-koden innsiden de normal-wrapper div:

  
Noise Media
 

CSS:

.logo-icon color: # 000000; skriftstørrelse: 60pt; flyte: venstre;  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.

Flytter på navigasjonslinjen, vil du bruke en uordnet liste (UL) for dette. Legg til denne HTML-koden etter de logo-container (men fortsatt inne i normal-wrapper):

 
Hjem
 
Handle om
 
anmeldelser
 
Ta kontakt med
 

De href brukes 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. reviews.html. Pass på at du setter dette inn i begge to sitater.

Her er CSS:

#navbar liste-stil-type: none; / * Fjern punktpoeng * / margin: 29px 0 0 0; polstring: 0; flyte: høyre; skriftstørrelse: 16pt;  #navbar li display: inline; / * lag elementer horisontal * / #navbar li a: link, #navbar li a: besøkt, #navbar li a: aktiv text-decoration: none; / * Fjern understreke * / farge: # 000000; polstring: 0 16px 0 10px; / * mellomrom mellomrom * / margin: 0; border-right: 2px solid # B4B4B4; / * divider * / #navbar li a: link.last-link / * fjern divider * / border-right: 0px;  #navbar li a: hover / * endre farge på hover (mouseover) * / farge: # EB6361; 

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

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

Og her er CSS:

# toppfargestrykk bredde: 100%; høyde: 4px; bakgrunn: # EB6361; 

Det er den øverste delen gjort. Her ser det ut som det ligner på designretten?

Hovedinnholdsområde

Nå er det på tide å flytte på hovedinnholdsområdet - den såkalte “over brettet”. 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 være løst delt inn i tredjedeler, omtrent tilnærmet Golden Ratio Bruke Golden Ratio i fotografering for bedre komposisjon Bruke Golden Ratio i fotografering for bedre komposisjon Kjører du med fotoposisjon? 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 de topp-farge-splash element:

 
 
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 anmeldelsen av Panasonic G80 vist til høyre!
 
 
  
 

Legg merke til hvordan normal-wrapper elementet har returnert (det er gleden av å bruke klasser). Du lurer kanskje på hvorfor bildet (img) -merket lukkes ikke. Dette er en selvlukkende kode. Foroverstreket (/>) indikerer dette, da det ikke alltid gir mening å måtte lukke en tagg.

CSS:

.en tredjedel bredde: 40%; flyte: venstre; boks-størrelse: border-box; / * Kontroller polstring og grenser øker ikke størrelsen * / margin-top: 20px;  .tredje tredjedel bredde: 60%; flyte: venstre; boks-størrelse: border-box; / * Kontroller polstring og grenser øker ikke størrelsen * / polstring-venstre: 40px; tekstjustering: høyre; margin-topp: 20px;  .featured-image maksimal bredde: 500px; / * redusere bildestørrelse samtidig som aspektforholdet holdes * / .no-margin-top margin-top: 0; / * Fjern margin på ting som overskrifter * /

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 (verdig-bilde) har en max bredde av 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 den forrige normal-wrapper:

 
 
“makeuseof er den beste nettsiden noensinne”
 
Joe Coburn
 
 

Og så dette CSS:

# sitatområde (bakgrunn: # 363636; farge: #FFFFFF; tekst-align: center; polstring: 15px 0;  h3 font-weight: normal; skriftstørrelse: 20pt; margin-topp: 0px;  h4 font-weight: normal; skriftstørrelse: 16pt; margin-bunn: 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 den forrige sitat-området:

 
 
  
 
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 bruker igjen normal-wrapper klasse. Her er CSS:

.ikon-ytre boks-størrelse: ramme-boks; / * Kontroller polstring og grenser øker ikke størrelsen * / float: left; bredde: 33,33%; polstring: 25px; margin: 0; tekst-align: center;  .icon-sirkel bakgrunn: #EEEEEE; farge: # B4B4B4; bredde: 200px; høyde: 200px; border-radius: 200px; / * lage avrundede hjørner * / margin: 0 auto; grense: 2px solid # D6D6D6; boks-størrelse: border-box; / * Kontroller polstring og grenser øker ikke størrelsen * / font-size: 75pt; polstring: 30px 0 0 0; markør: pointer;  .ikon-sirkel: svever / * endre farge på svever (mouseover) * / color: #FFFFFF; bakgrunn: # EB6361;  h5 margin: 15px 0 10px 0; skriftstørrelse: 20pt; 

Det er noen nye ting som skjer i CSS. De avrundede hjørner blir satt av border-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 etter ikonområdene ' normal-wrapper:

Her er CSS:

#footer bredde: 100%; bakgrunn: # F1F1F1; / * lys grå * / kantlinje: 1px solid # D4D4D4; / * mørk grå "topline" * / høyde: 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 nøyaktig 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. Skrifttypen som for tiden brukes på nettsiden er Helvetica. Dette ser bra ut, så du kan forlate det som det er PT Sans er tilgjengelig som en webfont. Skriften som brukes for hele 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-familie: 'PT Sans', 'Helvetica', 'Arial'; 

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

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

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

Som en siste bit av prettiness, la oss bruke litt JavaScript for å bla gjennom tre forskjellige kjente bilder. Du vil trenge 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:

.skjult 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 manus område nederst på siden:

Legg til følgende JavaScript inne i manus stikkord:

/ * JavaScript går her nederst på siden * / $ (dokument) .ready (funksjon () // kjør når siden er klar var tid = 2500; // få bildebeholderne $ im1 = $ (' $ im2 = $ ('# f-image-2'); $ im3 = $ ('# f-image-3'); setInterval (funksjon () // samtalefunksjon hver x millisekunder (definert i tidsvariabelen ovenfor) changeImage ();, tid); var currentImage = 1; funksjon changeImage () switch (currentImage) tilfelle 1: // vis bilde 2 $ im1.hide (); $ im2 .show (); $ im3.hide (); currentImage = 2; break; case 2: // vis bilde 3 $ im1.hide (); $ im2.hide (); $ im3.show (); currentImage = 3 ; break; default: // vis bilde 1 $ im1.show (); $ im2.hide (); $ im3.hide (); currentImage = 1;);

Det skjer noen ting her. Koden er inne i $ (Document) .ready (). Dette betyr at det vil løpe når nettleseren din har fullført siden - dette er en god praksis. De setInterval () funksjonen brukes til å ringe changeImage () Fungerer regelmessig i et forhåndsdefinert intervall i millisekunder (1000 millisekunder = 1 sekund). Dette er lagret i tid variabel. 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 den på nytt normal-wrapper og en tredjedel / to-tredje klasser.).
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).
Konfigurer 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 å bruke 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!

Utforsk mer om: CSS, HTML, Web Design.