Reklame

Har du altid ønsket at lave en hjemmeside? Måske har du læst nogle af vores HTML (forstå HTML 5 trin til forståelse af grundlæggende HTML-kode 5 trin til forståelse af grundlæggende HTML-kode Læs mere) og CSS-øvelser 5 Baby-trin til at lære CSS og blive en kick-ass CSS Sorcerer 5 Baby skridt til at At lære CSS og blive en Kick-Ass CSS Sorcerer CSS er de mest vigtige forandringswebsider, der er set i det sidste årti, og det banede vejen for adskillelse af stil og indhold. På den moderne måde definerer XHTML den semantiske struktur ... Læs mere, men ved ikke, hvordan man bruger disse sprog på et større projekt.

I dag leder jeg dig gennem processen med at lave en komplet hjemmeside fra bunden. Bare rolig, hvis det virker som en vanskelig opgave, vil jeg lede dig igennem det hele hvert skridt.

Du vil producere denne hjemmeside ved hjælp af HTML, CSS og JavaScript med et strejf af jQuery (vejledning til jQuery En grundlæggende vejledning til JQuery for Javascript-programmerere En grundlæggende vejledning til JQuery til Javascript-programmerere Hvis du er en Javascript-programmerer, vil denne guide til JQuery hjælpe du starter kodning som en ninja. Læs mere). Du vil ikke gøre noget rigtig blødende kant, så denne kode skal fungere ret godt i de fleste moderne browsere.

Hvis du ikke er sikker på nogen CSS, skal du kigge på CSS vejledningen på W3Schools.com.

Designet

Her er designet til denne hjemmeside. Se et billede i høj opløsning, hvis du vil have et bedre udseende, eller endnu bedre, download det fulde projekt her.

Jeg har designet denne hjemmeside til et fiktivt firma i Adobe Photoshop CC 2017. Hvis du er interesseret, skal du sørge for at tage fat på .PSD-filen fra bundle-download. Her er hvad du får i Photoshop-filen:

Inde i PSD'en finder du alle lag grupperet, navngivet og farvekodet:

Du skal bruge et par skrifttyper installeret til at se korrekt ud. Den første er Font Awesome, der bruges til alle ikonerne. De to andre skrifttyper er PT Serif og Myriad Pro (inkluderet i Photoshop). Hvis du ikke er sikker på, hvordan du installerer skrifttyper, skal du læse vores vejledning Sådan installeres skrifttyper på Windows, Mac og Linux Sådan installeres skrifttyper på Windows, Mac og Linux Læs mere.

Bare rolig, hvis du ikke har Photoshop, behøver du ikke at fortsætte.

Indledende kode

Nu hvor designet er klart, lad os begynde at kode! Opret en ny fil i din foretrukne teksteditor (jeg bruger Sublime Text 3). Gem dette som index.html . Du kan kalde dette noget, du kan lide, grunden til, at mange sider kaldes indeks, skyldes den måde webservers arbejde på. Standardkonfigurationen for de fleste servere er at vise index.html siden, hvis der ikke er angivet nogen side.

Hvis du ikke vil lære detaljerne, skal du tage den fulde kode fra downloaden.

Her er koden du har brug for:

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

Dette gør flere ting:

• Definerer den krævede minimummængde på HTML.
• Definerer en side titel af "Støj Media"
• Inkluderer jQuery hostet på Google CDN (hvad er en CDN Hvilke CDN'er er og hvorfor lagring ikke længere er et problem Hvilke CDN'er er og hvorfor lagring ikke længere er Et problem CDN'er gør internettet hurtigt og hjemmesider overkommelige, selv når du skalere til millioner af brugere., båndbredde koster penge, de af os på begrænsede kontrakter ved det alt for godt. Ikke alene gør du ... Læs mere).
• Inkluderer Font Awesome hostet på Google CDN.
• Definerer et stilmærke til at skrive dit CSS i.
• Definerer et script tag til at skrive din JavaScript ind.

Gem din fil igen og åbn den i din webbrowser. Du vil nok ikke mærke meget, og det vil helt sikkert ikke ligne en hjemmeside lige endnu.

Bemærk, hvordan sidetitel er støjmedier . Dette er defineret af teksten inde i titeltaggen . Dette skal være inde i hovedetiketterne.

Overskriften

Lad os oprette overskriften. Sådan ser det ud:

Lad os starte med den lille grå bit øverst. Det er en lysegrå med en let mørkegrå nedenunder. Her er et nærbillede:

Tilføj denne HTML inde i kropstegnet øverst:

Mens du er her, lad os bryde det ned. En div er som en beholder til at sætte andre ting i. Denne "andre ting" kan være flere containere, tekst, billeder, noget virkelig. Der er nogle begrænsninger på, hvad der kan gå ind i bestemte tags, men divs er ret generiske ting. Det har et id med top-bar . Dette vil blive brugt til at style det med CSS, og målrette det med JavaScript, hvis det kræves. Sørg for, at du kun har et element med et bestemt id - de skal være unikke. Hvis du vil have flere elementer til at have samme navn, skal du bruge en klasse i stedet - det er det de er designet til! Her er CSS'en, du skal style den (sæt øverst inde i din stil tag):

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

Bemærk, hvordan hash-tegnet (#, hashtag, pund-tegn) bruges før navnet. Det betyder, at elementet er et id. Hvis du brugte en klasse, ville du bruge et stop (.) I stedet. Html og body tags har deres polstring og margen sat til nul. Dette forhindrer problemer med uønskede mellemrum.

Det er på tide at gå videre til logoet og navbjælken. Før du starter, har du brug for en beholder til at indsætte dette indhold. Lad os gøre dette til en klasse (så du kan genbruge den senere), og da dette ikke er et lydhurt websted, gør det 900 pixels bredt.

HTML:

CSS:

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

Det kan være svært at fortælle, hvad der sker, indtil du er færdig med koden, så det kan være nyttigt at tilføje en (midlertidig) farvet baggrund for at se, hvad der sker:

 background: red; 

Det er på tide at skabe logoet nu. Font Awesome er nødvendig for selve ikonet. Font Awesome er et sæt ikoner pakket op som en vektor skrifttype - awesome! Den oprindelige kode ovenfor er allerede konfigureret Font Awesome, så det er helt klart at gå!

Tilføj denne HTML inde i normal-wrapper div:

  
 Støjmedier 

CSS:

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

Du skal ikke bekymre dig om de andre skrifttyper, der ikke passer til designet - du vil rydde op senere. Hvis du vil bruge forskellige ikoner, skal du gå videre til siden Font Awesome Icons, og derefter ændre fa-volume-down til navnet på det ikon, du vil bruge.

Hvis du flytter på navigationslinjen, bruger du en uordnet liste ( UL ) herfor. Tilføj denne HTML efter logo-containeren (men stadig inde i normal-wrapper ):

Hjem
Om
Anmeldelser
Kontakt

Href er brugt til at linke til andre sider. Denne vejledning hjemmeside har ikke nogen andre sider, men du kan sætte navn og filsti (hvis nødvendigt) her, fx reviews.html . Sørg for at sætte dette inde i begge dobbelt citater.

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

Denne CSS starter med en uordnet liste . Det fjerner derefter punktpunkterne ved hjælp af listestil type: none; . Links er adskilt lidt, og givet en farve, når du svæver musen over dem. Den lille grå divider er en højre grænse på hvert element, som derefter fjernes for det sidste element ved hjælp af sidste link klasse. Sådan ser det ud:

Alt der er tilbage til dette afsnit er den røde vandrette farvefarve. Tilføj denne HTML efter normal-wrapper :

Og her er CSS:

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

Det er den øverste sektion færdig. Sådan ser det ud - stort set ligner designet rigtigt?

Hovedindholdsområde

Nu er det tid til at flytte på hovedindholdsområdet - den såkaldte "over fold". Sådan ser denne del ud:

Dette er en ret simpel del, en del af teksten til venstre med et billede til højre. Dette område vil blive løst opdelt i tredjedele, omtrent tilnærmelsesvis den gyldne forhold. Brug af den gyldne ratio i fotografering til bedre sammensætning ved hjælp af den gyldne ratio i fotografering til bedre sammensætning Kæmper du med fotosammensætning? Her er to teknikker baseret på Golden Ratio, der vil forbedre dine skud drastisk med lidt indsats fra din side. Læs mere .

Du skal bruge stikprøvebilledet til denne del. Den er inkluderet i downloaden. Dette billede er 670px bredt, og er fra vores Panasonic Lumix DMC-G80 / G85-anmeldelse Panasonic Lumix DMC-G80 / G85 Gennemsyn Panasonic Lumix DMC-G80 / G85 Review Lumix G85 er Panasonics nyeste spejlløse kamera, og det pakker en seriøs slag i videoafdelingen med HDMI ud og 4K optagelse - alt for $ 1000! Læs mere .

Tilføj HTML efter det øverste farve-splash- element:

Velkommen! 
Noise Media er et teknologiselskab med speciale i tekniske anmeldelser.
Vi er meget gode til hvad vi gør, men desværre er vi ikke et rigtigt firma.
Sørg for at besøge makeuseof.com for den fulde vejledning om, hvordan du opbygger denne hjemmeside.
Alternativt kan du tjekke vores anmeldelse af Panasonic G80 vist til højre!

Bemærk hvordan det normale indpakningselement er vendt tilbage (det er glæden ved at bruge klasser). Du kan undre dig over, hvorfor billedbilledet ( img ) ikke lukker. Dette er et selvlukkende tag. Fremad skråstreg ( /> ) angiver dette, da det ikke altid giver mening at skulle lukke et tag.

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 vigtigste egenskab her er boks størrelse: grænse-boks; . Dette sikrer, at elementerne altid vil være 40% eller 60% bredde. Standard (uden denne attribut) er din angivne bredde plus eventuelle polstring, margener og grænser. Billedklassen ( featured-billede ) har en maksimal bredde på 500px . Hvis du kun angiver en dimension (bredde eller højde), og lad det andet være tomt, vil css ændre størrelsen på billedet, samtidig med at det bevares.

Citatområde

Lad os oprette tilbudsområdet. Sådan ser det sådan ud:

Dette er et andet simpelt område. Den indeholder en mørkegrå baggrund med hvid centreret tekst.

Tilføj denne HTML efter den tidligere normalpakke :

"Makeuseof er den bedste hjemmeside nogensinde" 
Joe Coburn 

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

Der foregår ikke meget her. Dimensionering er den nødvendige nødvendige justering - skrifttype, mellemrum og så videre. Sådan ser det hele ud nu - det begynder at ligne en hjemmeside!

Ikonområde

Lad os fortsætte med at trykke på - den er næsten færdig! Her er det næste område, der skal oprette:

Denne del vil udnytte flere klasser. De tre ikoner er stort set ens, med undtagelse af indholdet, så det giver mening at bruge klasser i stedet for ids. Tilføj denne HTML efter det foregående citat-område :

  
 Youtube 
Checkout vores YouTube-kanal for flere tech anmeldelser, tutorials og giveaways!
 Anmeldelser 
Hvis du planlægger at købe en ny gadget, skal du tjekke her først. Vi giver dig tilbundsgående anmeldelser af de nyeste enheder.
 Køb vejledninger 
Ved købsguider stræber vi efter at give læserne værktøjerne til at få de bedste ting til det laveste beløb.

Disse tre ikoner er også Font-Awesome. HTML'en bruger endnu en gang klassen Normal-wrapper . 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; } 

Der er et par nye ting i gang i CSS. De afrundede hjørner indstilles ved grænseradius: 200px; . Indstilling af denne værdi det samme som bredden resulterer i en perfekt cirkel. Du kan reducere dette, hvis du foretrækker mere af en firkant med afrundede hjørner. Bemærk hvordan hover handlinger anvendes på divs - det er ikke begrænset til kun links. Sådan ser dette afsnit ud nu:

Foden

Den sidste ting at gøre er footer! Dette er virkelig simpelt, da det kun er et gråt område uden tekst. Tilføj denne HTML efter ikonområderne ' normal-wrapper' :

Her er CSS:

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

Se - virkelig enkle ting.

Tilføj nogle Pizzazz

Det er det, kodningen er færdig! Du kan absolut forlade ting som de er, det er en færdig webside. Du har måske bemærket, at det ikke ser ud som designet. Hovedårsagen til dette er de anvendte skrifttyper. Lad os sortere det ud.

Skrifttypen, der bruges til de fleste titler, er Myriad Pro . Dette kommer med Adobe Create Cloud, men det er ikke tilgængeligt som webfont. Den skrifttype, der aktuelt bruges på websiden, er Helvetica . Dette ser ok ud, så du kan lade det være, men PT Sans er tilgængelig som webfont. Den skrifttype, der bruges til hele teksten, er PT Serif, som er tilgængelig som webfont.

Webfonter er en simpel proces. Ligesom at indlæse en ny skrifttype på din computer, kan websider indlæse skrifttyper efter behov. En af de bedste måder at gøre dette på er via Google Fonts.

Tilføj denne CSS for at skifte til de bedre skrifttyper:

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

Nu ændrer du dine html- og kropselementer for at bruge de nye skrifttyper:

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

Bemærk, hvordan h3-elementet ikke er medtaget på listen - dette er standard til PT-Serif i stedet for PT-Sans .

Lad os bruge nogle JavaScript til at rulle gennem tre forskellige fremhævede billeder. Du skal bruge Image_2 og Image_3 for denne del, og igen er det valgfrit. Webstedet er helt funktionelt på dette tidspunkt uden denne funktion. Her er hvordan det vil se ud (sped up):

Rediger din HTML til at omfatte tre fremhævede billeder. Bemærk hvordan to af disse har en CSS klasse af skjulte . Hvert billede er blevet givet et ID, så JavaScript kan målrette hver enkelt af dem selvstændigt.

Her er CSS nødvendigt for at skjule de ekstra fremhævede billeder:

 .hidden { display: none; } 

Nu hvor HTML og CSS er taget hånd om, lad os skifte til JavaScript. Det er nyttigt at forstå dokumentobjektmodellen JavaScript og webudvikling: Brug af dokumentobjektmodellen JavaScript og webudvikling: Brug af dokumentobjektmodellen Denne artikel introducerer dig i det dokumentskelet, som JavaScript arbejder med. Har et arbejdskendskab til denne abstrakte dokumentobjektmodel, kan du skrive JavaScript, der virker på en webside. Læs mere (DOM) for denne del, men det er ikke et krav.

Find scriptområdet nederst på siden:

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

Tilføj følgende JavaScript inde i scriptet tag:

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

Der sker et par ting her. Koden er indeholdt i $ (dokument) .ready () . Det betyder, at det vil køre, når browseren er færdig med at gøre siden - det er en god praksis. Funktionen setInterval () bruges til at kalde funktionen changeImage () regelmæssigt til et foruddefineret interval i millisekunder (1000 millisekunder = 1 sekund). Dette gemmes i tidsvariablen. Du kan øge eller formindske dette for at fremskynde eller sænke rullingen. Endelig bruges en simpel case-sætning til at vise forskellige billeder og holde styr på det aktuelt viste billede.

Kodning udfordring

Det er det! Forhåbentlig lærte du meget under processen. Hvis du har lyst på en udfordring og vil sætte dine nye fundne færdigheder til test, hvorfor ikke prøve at implementere disse ændringer:

Tilføj en footer: Tilføj nogle tekst i footer (tip: du kan genbruge normal-wrapper og en tredjedel / to tredjedel klasser.).
Forbedre billedrulning : Rediger JavaScript for at animere billedændringerne (hint: se jQuery fadein og animere).
Gennemfør flere citater: Rediger citaterne for at skifte mellem en af ​​flere forskellige (hint: se billedrullekoden for et startpunkt).
Opsæt en server: Opsæt en server og send data mellem websiden og serveren (tip: læs vores guide til JSON og Python Sådan får du Python og JavaScript til at kommunikere ved hjælp af JSON Sådan får du Python og JavaScript til at kommunikere ved hjælp af JSON I dag vil jeg vise dig hvordan du bruger JSON til at sende data fra JavaScript til Python. Jeg vil dække, hvordan du opsætter en webserver sammen med al den kode du har brug for. Læs mere).

Har du lært nogen nye færdigheder i dag? Hvordan gik du videre med de kodende udfordringer? Hvilke ændringer har du foretaget for at gøre denne hjemmeside til din egen? Lad os vide i kommentarerne nedenfor, vi vil gerne vide!