Annons

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 att göra något riktigt 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:

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

Detta gör flera saker:

• Definierar den behövliga minimala HTML-koden.
• Definierar en sidtitel för "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 en stil tagg för att skriva din CSS i.
• Definierar en skriptikett 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 bullermedia . Detta definieras av texten inuti titeltaggen. Detta måste vara inne i huvudetiketterna.

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 inuti kroppstaggen högst upp:

Medan du är här, låt oss bryta ner det här. En div är som en behållare för att sätta in andra saker. Denna "andra grejer" kan vara mer behållare, text, bilder, allt som helst. Det finns vissa begränsningar för vad som kan gå in i vissa taggar, men divs är ganska generiska saker. Den har ett topp-bar- id . 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 en klass istället - det är vad de är avsedda för! Här är CSS du behöver utforma den (placera överst inne i din stil tagg):

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

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. Html- och kroppstaggarna har sin polstring 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 inte är en mottaglig webbplats, gör den 900 pixlar bred.

HTML:

CSS:

 .normal-wrapper { width: 900px; margin: 0 auto; padding: 15px 40px; background: red; overflow: 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:

 background: red; 

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 Font Awesome, så det är klart att gå!

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

  
 Buller Media 

CSS:

 .logo-icon { color: #000000; font-size: 60pt; float: left; } h1 { float: left; margin: 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, gå vidare till sidan Font Awesome Icons, och ändra sedan volym-ner till namnet på ikonen du vill använda.

Om du flyttar till navigeringsfältet använder du en oorderad lista ( UL ) för detta. Lägg till den här HTML-filen efter logotypbehållaren (men fortfarande inne i normalomslaget ):

Hem
Handla om
recensioner
Kontakta

Href används för att länka till andra sidor. Denna handledning webbplats har inga andra sidor, men du kan ange namn och filväg (om det behövs) här, t.ex. recensioner.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; /* 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; } 

Denna CSS börjar med en orörd lista . Det tar sedan bort punkterna med hjälp av listestyp: 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öger kant på varje element, som sedan tas bort för det sista elementet med hjälp av den sista länken klassen. 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 det normala omslaget :

Och här är CSS:

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

Det är det bästa avsnittet gjort. Här är hur det ser ut - ganska lik designen rätt?

Huvudinnehållsområde

Nu är det dags att flytta på huvudinnehållet - den så kallade "ovanför veckan". 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 delas löst i tredjedelar, ungefär approximativt Guldförhållandet Använda Guldförhållandet i Fotografi 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 toppfärg-splash- elementet:

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, kolla in vår recension av Panasonic G80 visad till höger!

Lägg märke till hur det normala omslaget har återgått (det är glädjen att använda klasser). Du kanske undrar varför bilden ( img ) taggen inte stänger. Detta är en självstängande tagg. Framåtstrecket ( /> ) indikerar detta, eftersom det inte alltid är vettigt att stänga 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 */ } 

Det viktigaste attributet här är box-size: border-box; . 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 ( featured-image ) har en maximal bredd på 500px . Om du bara anger en dimension (en bredd eller en höjd) och lämnar den andra blanken, kommer css att ändra storleken på bilden samtidigt som bildformatet bibehålls.

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 föregående normalomslag :

"Makeuseof är den bästa webbplatsen någonsin" 
Joe Coburn 

Och då den här 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 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 hemsida!

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 föregående citat-område :

  
 Youtube 
Kolla in vår YouTube-kanal för mer tekniska recensioner, tutorials 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-koden används återigen med normal-wrapper- klassen. Här är 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 finns några nya saker som händer i CSS. De avrundade hörnen ställs in med gränsradien: 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-filen efter ikonområdets normala omslag :

Här är CSS:

 #footer { width: 100%; background: #F1F1F1; /* light gray */ border-top: 1px solid #D4D4D4; /* dark gray "topline" */ height: 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 precis som designen. Den främsta orsaken till detta är de typsnitt som används. Låt oss sortera ut det.

Teckensnittet som används för de flesta 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, men PT Sans är tillgängligt som webfont. Teckensnittet som används för hela texten är PT Serif, som är tillgängligt 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'; 

Observera 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 behöver 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 dolda . 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:

 .hidden { 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 scriptområdet längst ner på sidan:

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

Lägg till följande JavaScript 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 händer några saker här. Koden finns inne i $ (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. Funktionen setInterval () används för att ringa funktionen changeImage () regelbundet vid ett fördefinierat intervall i millisekunder (1000 millisekunder = 1 sekund). Detta lagras i tidsvariabeln. 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 normalomslaget och en tredjedel / två tredjedelar .).
Förbättra bildrullen: Ä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).
Konfigurera 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 du använder 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!