Har du alltid velat göra en hemsida? Kanske har du läst några av våra HTML-filer (förstå HTML 5 steg för att förstå grundläggande HTML-kod 5 steg för att förstå grundläggande HTML-kod Läs mer) och CSS-handledning 5 Babysteg för att lära CSS och bli en Kick-Ass CSS Sorcerer 5 Babysteg till Att lära sig CSS och bli en Kick-Ass CSS Sorcerer CSS är de viktigaste förändringswebbsidorna som har sett under det senaste decenniet, och det banade vägen för separation av stil och innehåll. På det moderna sättet definierar XHTML den semantiska strukturen ... Läs mer, men vet inte hur man använder dessa språk på ett större projekt.

Idag leder jag dig genom processen att göra en komplett webbplats från början. Oroa dig inte om det verkar som en svår uppgift, kommer jag att guida dig igenom det hela steget.

Du kommer att producera denna webbplats med hjälp av HTML, CSS och JavaScript med en touch av jQuery (guide till jQuery En grundläggande guide till JQuery för Javascript-programmerare En grundläggande guide till JQuery för Javascript-programmerare Om du är en Javascript-programmerare kommer den här guiden till JQuery att hjälpa du börjar kodning som en ninja. Läs mer). Du kommer inte göra någonting verkligen blödande kant, så den här koden ska fungera ganska bra i de flesta moderna webbläsare.

Om du inte är säker på någon CSS, ta en titt på CSS-guiden på W3Schools.com.

Designen

Här är designen för denna webbplats. Ta en titt på en högupplöst bild om du vill ha en bättre titt, eller ännu bättre, ladda ner hela projektet här.

Jag designade den här webbplatsen för ett fiktivt företag i Adobe Photoshop CC 2017. Om du är intresserad, se till att du tar tag i .PSD-filen från buntens nedladdning. Här är vad du får i Photoshop-filen:

Inne i PSD hittar du alla lager grupperade, namngivna och färgkodade:

Du behöver några teckensnitt installerade för att saker ska se korrekt ut. Den första är Font Awesome, som används för alla ikoner. De andra två teckensnitt är PT Serif och Myriad Pro (ingår i Photoshop). Om du inte är säker på hur du installerar teckensnitt, läs sedan vår guide Så här installerar du teckensnitt på Windows, Mac och Linux Så här installerar du teckensnitt på Windows, Mac och Linux Läs mer .

Oroa dig inte om du inte har Photoshop, behöver du inte fortsätta.

Initial Code

Nu när designen är klar, låt oss börja kodning! Skapa en ny fil i din favorit textredigerare (jag använder Sublime Text 3). Spara detta som index.html. Du kan kalla detta vad du vill, orsaken till att många sidor kallas index beror på hur webbservrar fungerar. Standardkonfigurationen för de flesta servrar är att servera index.html-sidan om ingen sida anges.

Om du inte vill lära känna detaljerna, ta tag i hela koden från nedladdningen.

Här är koden du behöver:

Detta gör flera saker:

• Definierar den behövliga minimala HTML-koden.
• Definierar en sidtitel på “Buller Media”
• Innehåller jQuery värd på Google CDN (vad är en CDN Vilka CDN är och varför lagring är inte längre ett problem Vilka CDN är och varför lagring är inte längre En utgåva CDNs gör Internet snabbt och webbplatser överkomliga även när du skala till miljontals användare. För det första , bandbredd kostar pengar, de av oss på begränsade kontrakt vet alltför bra. Inte bara gör du ... Läs mer).
• Inkluderar Font Awesome värd på Google CDN.
• Definierar a stil tagg för att skriva din CSS i.
• Definierar a manus tagg för att skriva in din JavaScript.

Spara filen igen och öppna den i din webbläsare. Du kommer nog inte märka mycket, och det kommer verkligen inte att se ut som en webbplats än.

Lägg märke till hur sidtiteln är Buller Media. Detta definieras av texten inuti titel märka. Detta har att vara inne i huvud taggar.

Rubriken

Låt oss skapa rubriken. Så här ser det ut:

Låt oss börja med den lilla gråbiten längst upp. Det är en ljusgrå med en ljust mörkgrå under. Här är en närbild:

Lägg till den här HTML-koden i kropp tagga på toppen:

Medan du är här, låt oss bryta ner det här. en div är som en behållare för att lägga andra saker i. Detta “andra saker” kan vara fler behållare, text, bilder, allting verkligen. Det finns vissa begränsningar för vad som kan gå in i vissa taggar, men divs är ganska generiska saker. Den har en id av top-bar. Detta kommer att användas för att stile det med CSS, och rikta det med JavaScript om det behövs. Se till att du bara har ett element med ett visst id - de borde vara unika. Om du vill att flera element ska ha samma namn, använd a klass istället - det är vad de är avsedda för! Här är CSS du behöver stile den (placera på toppen inuti din stil märka):

html, kropp margin: 0; vaddering: 0; font-family: "Helvetica", "Arial"; / * initiala teckensnitt * / # toppstång bredd: 100%; bakgrund: # F1F1F1; / * ljusgrå * / gränsbotten: 1px solid # D4D4D4; / * mörkgrå "understreck" * / höjd: 25px; 

Lägg märke till hur hashtecknet (#, hashtag, pundtecken) används före namnet. Det betyder att elementet är ett ID. Om du använde en klass skulle du använda ett helt stopp (.) Istället. De html och kropp taggar har sin vaddering och marginal inställd på noll. Detta förhindrar oönskade avståndsproblem.

Det är dags att gå vidare till logotypen och navbaren. Innan du börjar behöver du en behållare för att sätta in innehållet. Låt oss göra det till en klass (så att du kan använda den senare) och eftersom det här är inte en mottaglig webbplats, gör den 900 pixlar bred.

HTML:

CSS:

.normalförpackning bredd: 900px; marginal: 0 auto; vaddering: 15px 40px; bakgrund: röd; överflöde: auto; 

Det kan vara svårt att berätta vad som händer tills du avslutar koden, så det kan vara tillrådligt att lägga till en (tillfällig) färgad bakgrund för att se vad som händer:

bakgrund: röd;

Det är dags att skapa logotypen nu. Font Awesome behövs för ikonen själv. Font Awesome är en uppsättning ikoner packade upp som en vektor font - awesome! Den ursprungliga koden ovan är redan inställd på Font Awesome, så det är klart att gå!

Lägg till den här HTML-koden inuti de normal-wrapper div:

  
Buller Media
 

CSS:

.logo-icon color: # 000000; typsnittstorlek: 60pt; flyta till vänster;  h1 float: left; marginal: 21px 0 0 25px; 

Oroa dig inte för de andra typsnitt som inte matchar designen - du kommer att städa upp det senare. Om du vill använda olika ikoner ska du gå vidare till sidan Största ikoner för teckensnitt och ändra sedan fa-volym-down till namnet på ikonen du vill använda.

Om du flyttar till navigeringsfältet använder du en orörd lista (UL) för detta. Lägg till den här HTML-koden efter de logo-behållare (men fortfarande inne i normal-wrapper):

 
Hem
 
Handla om
 
recensioner
 
Kontakta
 

De href används för att länka till andra sidor. Denna hemsida har inte några andra sidor, men du kan ange namn och filväg (om det behövs) här, t.ex.. reviews.html. Se till att du sätter in det här inuti båda dubbla citat.

Här är CSS:

#navbar list-style-type: none; / * ta bort punkter * / marginal: 29px 0 0 0; vaddering: 0; float: right; typsnittstorlek: 16pt;  #navbar li display: inline; / * göra objekt horisontellt * / #navbar li a: länk, #navbar li a: besökte, #navbar li a: aktiv text-decoration: none; / * ta bort understreck * / färg: # 000000; vaddering: 0 16px 0 10px; / * Mellanslag mellanrum * / Marginal: 0; gräns-höger: 2px solid # B4B4B4; / * divider * / #navbar li a: link.last-link / * remove divider * / border-right: 0px;  #navbar li a: sväva / * ändra färg på svävar (mouseover) * / färg: # EB6361; 

Denna CSS börjar med en oorderad lista. Det tar sedan bort punkterna med hjälp av lista-stil-typ: none;. Länkarna är åtskilda lite och ges en färg när du håller muspekaren över dem. Den lilla grå delaren är en högra kant på varje element, som sedan tas bort för det sista elementet med hjälp av sista länken klass. Så här ser det ut:

Allt som finns kvar för det här avsnittet är den röda horisontella färgmarkeringen. Lägg till den här HTML-filen efter normal-wrapper:

Och här är CSS:

# toppfärgstänk bredd: 100%; höjd: 4px; bakgrund: # EB6361; 

Det är det bästa avsnittet gjort. Så här ser det ut - ungefär som designrätten?

Huvudinnehållsområde

Det är dags att gå vidare på huvudinnehållet - den så kallade “ovanför vikten”. Så här ser den här delen ut:

Det här är en ganska enkel del, en del text till vänster med en bild till höger. Detta område kommer att vara löst uppdelad i tredjedelar, ungefär approximativt guldförhållandet Använda guldförhållandet i fotografier för bättre komposition Använda guldförhållandet i fotografier för bättre komposition Kämpar du med fotokomposition? Här är två tekniker baserade på Golden Ratio som drastiskt förbättrar dina skott med liten ansträngning från din sida. Läs mer .

Du behöver provbilden för den här delen. Den ingår i hämtningen. Panasonic Lumix DMC-G80 / G85 recension Panasonic Lumix DMC-G80 / G85 recension Lumix G85 är Panasonics senaste spegelfria kamera och den packar ett allvarligt slag ihop med Panasonic Lumix DMC-G80 / G85. videoavdelningen, med HDMI ut och 4K inspelning - allt för $ 1000! Läs mer .

Lägg till HTML efter de top-färg splash element:

 
 
Välkommen!
 
Noise Media är ett tekniskt företag specialiserat på tekniska recensioner.
 
Vi är väldigt bra på vad vi gör, men vi är tyvärr inte ett riktigt företag.
 
Se till att du besöker makeuseof.com för hela handledningen om hur du bygger denna webbplats.
 
Alternativt kan du kolla in vår recension av Panasonic G80, som visas till höger!
 
 
  
 

Lägg märke till hur normal-wrapper elementet har återkommit (det är glädjen att använda klasser). Du kanske undrar varför bilden (img) taggen stänger inte. Detta är en självstängande tagg. Den främre snedstrecket (/>) indikerar detta, eftersom det inte alltid är vettigt att stänga en tagg.

CSS:

.en tredjedel bredd: 40%; flyta till vänster; box-dimensionering: gränsvärde; / * Kontrollera vaddering och gränser ökar inte storleken * / margin-top: 20px; . två tredjedelar bredd: 60%; flyta till vänster; box-dimensionering: gränsvärde; / * Kontrollera vaddering och gränser ökar inte storleken * / padding-left: 40px; textjustera: höger; marginal-topp: 20px;  .featured-image max-width: 500px; / * minska bildstorleken samtidigt som bildskärmsförhållandet behålls * / .no-margin-top margin-top: 0; / * Ta bort marginal på saker som rubriker * /

Det viktigaste attributet här är box-dimensionering: gränsvärde;. Detta säkerställer att elementen alltid kommer att vara 40% eller 60% bredd. Standardvärdet (utan detta attribut) är din angivna bredd plus eventuella vadderingar, marginaler och gränser. Bildklassen (utvald bild) har en maximal bredd av 500px. Om du bara anger en dimension (en bredd eller en höjd) och lämnar den andra blanken, kommer css att ändra storlek på bilden samtidigt som den bibehåller bildformatet.

Citatområde

Låt oss skapa offertområdet. Så här ser det här ut:

Detta är ett annat enkelt område. Den innehåller en mörkgrå bakgrund, med vit centrerad text.

Lägg till den här HTML-koden efter den förra normal-wrapper:

 
 
“makeuseof är den bästa webbplatsen någonsin”
 
Joe Coburn
 
 

Och då den här CSS:

# citat-område bakgrund: # 363636; färg: #FFFFFF; text-align: center; vaddering: 15px 0;  h3 font-weight: normal; typsnittstorlek: 20pt; marginal-topp: 0px;  h4 font-weight: normal; typsnittstorlek: 16pt; marginalbotten: 0; 

Det går inte mycket här här. Storleksanpassning är den viktigaste justeringen som behövs - teckenstorlek, avstånd och så vidare. Så här ser det hela ut nu - det börjar se ut som en webbplats!

Ikonområde

Låt oss fortsätta att trycka på - det är nästan klart! Här är nästa område som behöver skapa:

Denna del kommer att använda flera klasser. De tre ikonerna är mestadels desamma, med undantag för innehållet, så det är vettigt att använda klasser istället för ids. Lägg till den här HTML-koden efter den förra citat område:

 
 
  
 
Youtube
 
Kolla in vår YouTube-kanal för mer tekniska recensioner, handledningar och giveaways!
 
 
 
  
 
recensioner
 
Om du planerar att köpa en ny gadget, kolla här först. Vi ger dig fördjupade recensioner av de senaste enheterna.
 
 
 
  
 
Köpa guider
 
Vid köpguider strävar vi efter att ge läsarna verktygen för att få de bästa sakerna för den lägsta summan av pengar.
 
 

Dessa tre ikoner är också Font-Awesome. HTML används återigen med normal-wrapper klass. Här är CSS:

.ikon-yttre box-size: border-box; / * Kontrollera vaddering och gränser ökar inte storleken * / float: left; bredd: 33,33%; vaddering: 25px; marginal: 0; text-align: center;  .icon-cirkel bakgrund: #EEEEEE; färg: # B4B4B4; bredd: 200px; höjd: 200px; gränsstråle: 200px; / * göra rundade hörn * / marginal: 0 auto; gränsen: 2px solid # D6D6D6; box-dimensionering: gränsvärde; / * Kontrollera vaddering och gränser ökar inte storleken * / fontstorlek: 75pt; vaddering: 30px 0 0 0; markör: pekare;  .ikon-cirkel: sväva / * ändra färg på svävar (mouseover) * / color: #FFFFFF; bakgrund: # EB6361;  h5 marginal: 15px 0 10px 0; typsnittstorlek: 20pt; 

Det finns några nya saker som händer i CSS. De avrundade hörnen ställs in gränsstråle: 200px;. Ställer in det här värdet på samma sätt som bredden resulterar i en perfekt cirkel. Du kan minska detta om du föredrar mer av en fyrkant med rundade hörn. Lägg märke till hur hoverhandlingar tillämpas på divs - det är inte bara begränsat till länkar. Så här ser det här avsnittet ut nu:

Footer

Den sista sak att göra är sidfoten! Det här är väldigt enkelt, eftersom det bara är ett grått område utan text. Lägg till den här HTML-koden efter ikonområdena normal-wrapper:

Här är CSS:

#footer width: 100%; bakgrund: # F1F1F1; / * ljusgrå * / border-top: 1px solid # D4D4D4; / * mörkgrå "topline" * / höjd: 150px; 

Se - väldigt enkla saker.

Lägg till lite pizzazz

Det är det, kodningen är klar! Du kan absolut lämna saker som de är, det är en färdig webbsida. Du kanske har märkt att det inte ser ut exakt som designen. Den främsta orsaken till detta är de typsnitt som används. Låt oss sortera ut det.

Typsnittet som används för de flesta av titlarna är Myriad Pro. Detta kommer med Adobe Create Cloud, men det är inte tillgängligt som webfont. Den typsnitt som för närvarande används på webbsidan är Helvetica. Det ser bra ut, så du kan lämna det som det är PT Sans finns som webbfont. Teckensnittet som används för all text är PT Serif, som är tillgänglig som webfont.

Webfonter är en enkel process. Precis som att ladda in en ny typsnitt på din dator kan webbsidor ladda in teckensnitt på begäran. Ett av de bästa sätten att göra detta är genom Google Fonts.

Lägg till den här CSS för att byta till de bättre typsnitt:

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

Ändra nu dina HTML-och kroppsdelar för att använda de nya teckensnitten:

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

Lägg märke till hur h3-elementet inte ingår i listan - det här kommer som standard till PT-Serif istället för PT-Sans.

Som en sista bit av prettiness, låt oss använda vissa JavaScript för att bläddra igenom tre olika utvalda bilder. Du kommer behöva IMAGE_2 och IMAGE_3 för den här delen, och igen är det valfritt. Webbplatsen är helt funktionell vid denna punkt utan denna funktion. Här är hur det kommer att se ut (sped up):

Ändra din HTML så att den innehåller tre utvalda bilder. Lägg märke till hur två av dessa har en CSS-klass av dold. Varje bild har fått ett ID så att JavaScript kan rikta var och en av dem självständigt.

Här är CSS som behövs för att dölja de extra utvalda bilderna:

.dold display: none; 

Nu när HTML och CSS tas hand om, låt oss byta till JavaScript. Det är användbart att förstå dokumentobjektmodellen JavaScript och webbutveckling: Använda dokumentobjektmodellen JavaScript och webbutveckling: Använda dokumentobjektmodellen Den här artikeln kommer att introducera dig till det dokumentskelett som JavaScript fungerar med. Med en fungerande kunskap om denna abstrakta dokumentobjektmodell kan du skriva JavaScript som fungerar på vilken webbsida som helst. Läs mer (DOM) för den här delen, men det är inte ett krav.

Hitta manus område längst ner på sidan:

Lägg till följande JavaScript i manus märka:

/ * JavaScript går här längst ner på sidan * / $ (dokument) .ready (funktion () // kör när sidan är klar var time = 2500; // få bildbehållare $ im1 = $ (' $ im2 = $ ('# f-image-2'); $ im3 = $ ('# f-image-3'); setInterval (funktion x millisekunder (definierad i tidsvariabel ovan) changeImage ();, tid); var currentImage = 1; funktionändringImage () switch (currentImage) fall 1: // visa bild 2 $ im1.hide (); $ im2 .show (); $ im3.hide (); currentImage = 2; break; case 2: // visa bild 3 $ im1.hide (); $ im2.hide (); $ im3.show (); currentImage = 3 ; break; default: // visa bild 1 $ im1.show (); $ im2.hide (); $ im3.hide (); currentImage = 1;);

Det händer några saker här. Koden finns inuti $ (Dokument) .ready (). Det betyder att det kommer att köras när din webbläsare har gjort sidan - det här är en bra övning. De setInterval () funktionen används för att ringa changeImage () Fungerar regelbundet vid ett fördefinierat intervall i millisekunder (1000 millisekunder = 1 sekund). Detta lagras i tid variabel. Du kan öka eller minska detta för att påskynda eller sakta ner rullningen. Slutligen används ett enkelt fallutlåtande för att visa olika bilder och hålla reda på den aktuella bilden.

Kodningsutmaning

Det är allt! Förhoppningsvis lärde du dig mycket under processen. Om du vill ha en utmaning och vill sätta dina nya funna färdigheter på provet, varför inte prova att genomföra dessa ändringar:

Lägg till en sidfot: Lägg till lite text i sidfoten (tips: du kan återanvända normal-wrapper och en tredjedel / två tredjedelar klasser.).
Förbättra bilden rullning: Ändra JavaScript för att animera bildändringarna (tips: titta på jQuery fadein och animera).
Implementera flera citat: Ändra citat för att byta mellan en av flera olika (tips: titta på bildrulningskoden för en startpunkt).
Installera en server: Konfigurera en server och skicka data mellan webbsidan och servern (tips: Läs vår guide till JSON och Python Så här får du Python och JavaScript att kommunicera med JSON Hur får du Python och JavaScript att kommunicera med JSON Idag ska jag visa dig hur att använda JSON för att skicka data från JavaScript till Python. Jag kommer att täcka hur du installerar en webbserver tillsammans med all kod du behöver. Läs mer).

Har du lärt dig några nya färdigheter idag? Hur gick du vidare med de kodande utmaningarna? Vilka ändringar har du gjort för att göra webbplatsen din egen? Låt oss veta i kommentarerna nedan, vi skulle gärna veta!

Utforska mer om: CSS, HTML, webbdesign.