Advertentie

Heb je altijd al een website willen maken? Misschien heb je enkele van onze HTML gelezen (HTML 5 Stappen voor het begrijpen van HTML-code voor basis-HTML 5 Lees meer over basist HTML-code) en CSS-tutorials 5 Babystappen voor het leren van CSS en een Kick-Ass CSS Sorcerer 5 Baby Steps to CSS leren en een valstrik worden CSS Sorcerer CSS is de allerbelangrijkste verandering die webpagina's in het afgelopen decennium hebben ondergaan, en het maakte de weg vrij voor de scheiding van stijl en inhoud. Op de moderne manier definieert XHTML de semantische structuur ... Lees meer, maar weet niet hoe die talen moeten worden gebruikt voor een groter project.

Vandaag zal ik u begeleiden bij het maken van een compleet nieuwe website. Maak je geen zorgen als dit een moeilijke taak lijkt, ik begeleid je er bij elke stap op weg.

Je maakt deze website met behulp van HTML, CSS en JavaScript met een vleugje jQuery (gids voor jQuery Een eenvoudige gids voor JQuery voor Javascript-programmeurs Een eenvoudige gids voor JQuery voor Javascript-programmeurs Als je een Javascript-programmeur bent, zal deze gids voor JQuery helpen je begint te coderen als een ninja Lees meer). U zult niets echt bloedend doen, dus deze code zou redelijk goed moeten werken in de meeste moderne browsers.

Als u niet zeker bent van een CSS, bekijk dan de CSS-gids op W3Schools.com.

Het ontwerp

Hier is het ontwerp voor deze website. Kijk eens naar een afbeelding met een hoge resolutie als u het volledige project hier beter wilt bekijken of, nog beter, wilt downloaden.

Ik heb deze website ontworpen voor een fictief bedrijf in Adobe Photoshop CC 2017. Als je geïnteresseerd bent, zorg er dan voor dat je het .PSD-bestand van de bundel download haalt. Dit is wat je krijgt in het photoshop-bestand:

In de PSD vindt u alle lagen die zijn gegroepeerd, benoemd en met een kleurcode zijn gecodeerd:

Je hebt een paar lettertypen nodig om dingen er goed uit te laten zien. De eerste is Font Awesome, gebruikt voor alle pictogrammen. De andere twee lettertypen zijn PT Serif en Myriad Pro (meegeleverd met Photoshop). Als u niet zeker weet hoe u lettertypen moet installeren, lees dan onze handleiding. Lettertypen installeren op Windows, Mac en Linux. Lettertypen installeren op Windows, Mac en Linux Meer lezen.

Maak je geen zorgen als je geen Photoshop hebt, je hebt het niet nodig om verder te gaan.

Initiële code

Nu het ontwerp duidelijk is, laten we beginnen met coderen! Maak een nieuw bestand in je favoriete teksteditor (ik gebruik Sublime Text 3). Sla deze op als index.html . Je kunt dit alles noemen wat je wilt, de reden waarom veel pagina's index worden genoemd, is te wijten aan de manier waarop webservers werken. De standaardconfiguratie voor de meeste servers is om de index.html-pagina te gebruiken als er geen pagina is opgegeven.

Als je de details niet wilt leren, pak je de volledige code uit de download.

Dit is de code die je nodig hebt:

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

Dit doet verschillende dingen:

• Bepaalt de minimale HTML-vereiste die vereist is.
• Definieert een paginatitel van "Noise Media"
• Bevat jQuery gehost op Google CDN (wat is een CDN Wat CDN's zijn & Waarom opslag niet langer een probleem is Wat CDN's zijn en waarom opslag niet langer is Een kwestie CDN's maken internet snel en websites betaalbaar, zelfs wanneer u opschaalt naar miljoenen gebruikers. bandbreedte kost geld, dat van ons met beperkte contracten weet dat maar al te goed, niet alleen ... Lees meer).
• Inclusief Font Awesome gehost op Google CDN.
• Definieert een stijltag om uw CSS in te schrijven.
• Hiermee definieert u een scripttag om uw JavaScript in te schrijven.

Sla uw bestand opnieuw op en open het in uw webbrowser. Je zult waarschijnlijk niet veel merken, en het zal zeker nog niet op een website lijken.

Merk op hoe de paginatitel Noise Media is . Dit wordt gedefinieerd door de tekst binnen het title- label. Dit moet zich binnen de head- tags bevinden.

De kop

Laten we de kop maken. Dit is hoe dat eruit ziet:

Laten we beginnen met dat kleine grijze bit bovenaan. Het is een lichtgrijs met een licht donkergrijs eronder. Hier is een close-up:

Voeg deze HTML toe aan de top in de body- tag:

Terwijl je hier bent, laten we dit bespreken. Een div is als een container om andere spullen in te stoppen. Dit 'andere spul' kan meer containers, tekst, afbeeldingen of wat dan ook zijn. Er zijn enkele beperkingen aan wat in bepaalde tags kan gaan, maar divs zijn tamelijk generieke dingen. Het heeft een id van de top-bar . Dit wordt gebruikt om het te stijlen met CSS en indien gewenst te targeten met JavaScript. Zorg ervoor dat je maar één element hebt met een bepaalde id - ze moeten uniek zijn. Als u wilt dat meerdere elementen dezelfde naam hebben, gebruikt u in plaats daarvan een klas - dat is waarvoor ze zijn ontworpen! Hier is de CSS die je nodig hebt om het te stylen (bovenaan in je stijltag):

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

Merk op hoe het hekje (#, hashtag, hekje) vóór de naam wordt gebruikt. Dit betekent dat het element een ID is. Als u een klasse zou gebruiken, zou u in plaats hiervan een volledige stop (.) Gebruiken. De html- en body- tags hebben hun opvulling en marge ingesteld op nul. Dit voorkomt ongewenste spatiëring.

Het is tijd om verder te gaan naar het logo en de navigatiebalk. Voordat je begint, heb je een container nodig om deze inhoud in te plaatsen. Laten we dit een les maken (zodat je het later opnieuw kunt gebruiken), en omdat dit geen responsieve website is, maak je het 900 pixels breed.

HTML:

CSS:

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

Het kan moeilijk zijn om te vertellen wat er gebeurt tot je de code hebt voltooid, dus het kan handig zijn om een ​​(tijdelijke) gekleurde achtergrond toe te voegen om te zien wat er gebeurt:

 background: red; 

Het is tijd om het logo nu te maken. Font Awesome is nodig voor het pictogram zelf. Font Awesome is een set pictogrammen die is verpakt als een vectorlettertype - geweldig! De oorspronkelijke code hierboven heeft al Font Awesome ingesteld, dus het is allemaal klaar voor gebruik!

Voeg deze HTML toe aan de standaard -wrapper- div:

  
 Noise Media 

CSS:

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

Maak je geen zorgen over de andere lettertypen die niet overeenkomen met het ontwerp - je zult dit later opruimen. Als u andere pictogrammen wilt gebruiken, ga dan naar de pagina Font Awesome Icons en verander vervolgens fa-volume-down in de naam van het pictogram dat u wilt gebruiken.

Als u naar de navigatiebalk gaat, gebruikt u hiervoor een ongeordende lijst ( UL ). Voeg deze HTML toe na de logo-container (maar nog steeds binnen de normale verpakking ):

Huis
Over
beoordelingen
Contact

De href wordt gebruikt om naar andere pagina's te linken. Deze zelfstudiewebsite bevat geen andere pagina's, maar u kunt hier de naam en het bestandspad (indien nodig) plaatsen, bijvoorbeeld reviews.html . Zorg ervoor dat je dit in beide dubbele aanhalingstekens plaatst.

Dit is de 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; } 

Deze CSS begint met een ongeordende lijst . Vervolgens worden de opsommingstekens verwijderd met behulp van list-style-type: none; . Links zijn een beetje uit elkaar geplaatst en krijgen een kleur als je je muis eroverheen beweegt. De kleine grijze scheidingslijn is een rechterrand van elk element, die vervolgens wordt verwijderd voor het laatste element met behulp van de klasse van de laatste koppelingen . Dit is hoe dat eruit ziet:

Het enige dat overblijft voor deze sectie is de rode horizontale kleurmarkering. Voeg deze HTML toe na de normale verpakking :

En hier is de CSS:

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

Dat is het bovenste deel gedaan. Hier is hoe het eruit ziet - vergelijkbaar met het ontwerp, toch?

Hoofdinhoudsgebied

Het is nu tijd om verder te gaan in het hoofdgedeelte van de inhoud - het zogenaamde 'boven de vouw'. Dit gedeelte ziet er zo uit:

Dit is een vrij eenvoudig onderdeel, sommige tekst van links met een afbeelding aan de rechterkant. Dit gebied zal losjes verdeeld zijn in derde delen, ongeveer de Gouden Ratio benaderen De Gouden Ratio gebruiken in Fotografie voor een Betere Samenstelling De Gouden Ratio in Fotografie gebruiken voor een Betere Samenstelling Heb je moeite met de fotosamenstelling? Hier zijn twee technieken gebaseerd op de Gulden snede die je schoten drastisch zullen verbeteren met weinig inspanning van jouw kant. Lees verder .

U hebt de voorbeeldafbeelding voor dit onderdeel nodig. Het is opgenomen in de download. Deze afbeelding is 670px breed en komt uit onze Panasonic Lumix DMC-G80 / G85 recensie Panasonic Lumix DMC-G80 / G85 recensie Panasonic Lumix DMC-G80 / G85 recensie De Lumix G85 is de nieuwste spiegelloze camera van Panasonic, en hij heeft een serieuze indruk de video-afdeling, met HDMI-uitgang en 4K-opname - allemaal voor $ 1000! Lees verder .

Voeg de HTML toe na het top-color-splash element:

Welkom! 
Noise Media is een technologiebedrijf dat gespecialiseerd is in technische beoordelingen.
We zijn erg goed in wat we doen, maar helaas zijn we geen echt bedrijf.
Zorg ervoor dat je makeuseof.com bezoekt voor de volledige tutorial over hoe deze website te bouwen.
Als alternatief, bekijk onze review van de Panasonic G80 aan de rechterkant!

Merk op hoe het normale-wrapper- element is teruggekeerd (dat is het plezier van het gebruik van klassen). U vraagt ​​zich misschien af ​​waarom de image ( img ) tag niet sluit. Dit is een zelfsluitende tag. De schuine streep ( /> ) geeft dit aan, omdat het niet altijd logisch is om een ​​tag te moeten sluiten.

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

Het belangrijkste kenmerk hier is box-sizing: border-box; . Dit zorgt ervoor dat de elementen altijd 40% of 60% breed zijn. De standaardwaarde (zonder dit kenmerk) is de door u opgegeven breedte plus eventuele opvulling, marges en randen. De afbeeldingsklasse ( afgebeelde afbeelding ) heeft een maximale breedte van 500 px . Als u slechts één dimensie (een breedte of hoogte) opgeeft en de andere leeg laat, zal CSS de grootte van de afbeelding wijzigen terwijl de hoogte-breedteverhouding behouden blijft.

Gebied citeren

Laten we het citaatgebied maken. Dit is hoe dit eruit ziet:

Dit is een ander eenvoudig gebied. Het bevat een donkergrijze achtergrond met wit gecentreerde tekst.

Voeg deze HTML toe na de vorige normale verpakking :

"Makeuseof is de beste website ooit" 
Joe Coburn 

En dan deze 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; } 

Er gebeurt hier niet veel. Sizing is de belangrijkste benodigde aanpassing - lettergrootte, spatiëring, enzovoort. Hier is hoe het geheel er nu uitziet: het begint er uit te zien als een website!

Pictogramgebied

Laten we doorgaan - het is bijna klaar! Dit is het volgende gebied dat moet worden gemaakt:

Dit deel maakt gebruik van verschillende klassen. De drie pictogrammen zijn meestal hetzelfde, met uitzondering van de inhoud, dus is het zinvol om klassen te gebruiken in plaats van id's. Voeg deze HTML toe na het vorige citaatgebied :

  
 YouTube 
Bekijk ons ​​YouTube-kanaal voor meer technische beoordelingen, tutorials en weggeefacties!
 beoordelingen 
Als je van plan bent om een ​​nieuwe gadget te kopen, kijk dan eerst hier. We geven u een grondige beoordeling van de nieuwste apparaten.
 Handleidingen kopen 
Bij Buying Guides streven we ernaar de lezers de tools te bieden om de beste dingen voor het laagste bedrag te krijgen.

Deze drie pictogrammen zijn ook Font-Awesome. De HTML maakt opnieuw gebruik van de klasse van de normale verpakking . Dit is de 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; } 

Er zijn een paar nieuwe dingen aan de gang in de CSS. De afgeronde hoeken worden ingesteld op grensradius: 200 px; . Als u deze waarde op dezelfde manier instelt als de breedte, resulteert dit in een perfecte cirkel. Je kunt dit verminderen als je meer van een vierkant met afgeronde hoeken wilt. Merk op hoe zweefacties worden toegepast op de divs - het is niet beperkt tot alleen links. Hier is hoe deze sectie er nu uitziet:

De voettekst

Het laatste wat je moet doen is de voettekst! Dit is heel eenvoudig, want het is slechts een grijs gebied zonder tekst. Voeg deze HTML toe na de normale omslag van de pictogramgebieden:

Dit is de CSS:

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

Kijk - echt simpele dingen.

Voeg wat pit toe

Dat is alles, de codering is klaar! Je kunt de dingen absoluut laten zoals ze zijn, het is een voltooide webpagina. U hebt misschien gemerkt dat het niet precies op het ontwerp lijkt. De belangrijkste reden hiervoor is de gebruikte lettertypen. Laten we dat uitzoeken.

Het lettertype dat voor de meeste titels wordt gebruikt, is Myriad Pro . Dit komt met Adobe Create Cloud, maar het is niet beschikbaar als een webfont. Het lettertype dat momenteel op de webpagina wordt gebruikt, is Helvetica . Dit ziet er goed uit, dus je kunt het laten zoals het is, maar PT Sans is beschikbaar als een webfont. Het lettertype dat voor alle tekst wordt gebruikt, is PT Serif, dat beschikbaar is als een webfont.

Webfonts zijn een eenvoudig proces. Net als bij het laden van een nieuw lettertype op uw computer, kunnen webpagina's op verzoek fonts laden. Een van de beste manieren om dit te doen is via Google Fonts.

Voeg deze CSS toe om over te schakelen naar de betere lettertypen:

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

Pas nu je html- en body-elementen aan om de nieuwe lettertypen te gebruiken:

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

Merk op hoe het h3-element niet in de lijst is opgenomen - dit zal standaard PT-Serif zijn in plaats van PT-Sans .

Als laatste stukje schoonheid, laten we wat JavaScript gebruiken om door drie verschillende aanbevolen afbeeldingen te bladeren. Voor dit onderdeel heb je Image_2 en Image_3 nodig, en nogmaals, het is optioneel. De website is op dit moment volledig functioneel zonder deze functie. Hier is hoe het eruit zal zien (versneld):

Pas uw HTML aan om drie uitgelichte afbeeldingen te bevatten. Merk op hoe twee van deze een CSS-klasse van verborgen hebben . Elke afbeelding heeft een ID gekregen, zodat JavaScript elk afzonderlijk kan targeten.

Hier is de CSS nodig om de extra uitgelichte afbeeldingen te verbergen:

 .hidden { display: none; } 

Nu de HTML en CSS zijn afgehandeld, laten we overschakelen naar JavaScript. Het is handig om het JavaScript-model en de webontwikkeling van het documentobject te begrijpen: Documentmodel JavaScript en webontwikkeling gebruiken: Documentmodel gebruiken In dit artikel wordt het documentskelet geïntroduceerd waarmee JavaScript werkt. Als u op de hoogte bent van dit abstracte documentobjectmodel, kunt u JavaScript schrijven dat op elke webpagina werkt. Lees meer (DOM) voor dit onderdeel, maar het is geen vereiste.

Zoek het scriptgedeelte onderaan de pagina:

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

Voeg het volgende JavaScript toe aan de scripttag :

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

Er gebeuren hier een paar dingen. De code bevindt zich in $ (document) .ready () . Dit betekent dat het wordt uitgevoerd nadat uw browser de pagina heeft weergegeven - dit is een goede gewoonte. De functie setInterval () wordt gebruikt om de functie changeImage () regelmatig aan te roepen op een vooraf gedefinieerd interval in milliseconden (1000 milliseconden = 1 seconde). Dit wordt opgeslagen in de tijdvariabele. U kunt dit verhogen of verlagen om het scrollen te versnellen of te vertragen. Ten slotte wordt een eenvoudige case-opdracht gebruikt om verschillende afbeeldingen weer te geven en de momenteel weergegeven afbeelding bij te houden.

Codering Uitdaging

Dat is het! Hopelijk heb je veel geleerd tijdens het proces. Als je zin hebt in een uitdaging en je nieuwe vaardigheden wilt testen, kun je proberen deze wijzigingen te implementeren:

Een voettekst toevoegen : voeg wat tekst toe aan de voettekst (hint: u kunt de klassen met de normale omslag en een derde / tweederde klasse opnieuw gebruiken.).
Verbeter het scrollen van afbeeldingen: pas het JavaScript aan om de beeldveranderingen te animeren (hint: bekijk jQuery fadein en animeer).
Meerdere aanhalingstekens implementeren: wijzig de aanhalingstekens om te wisselen tussen verschillende aanhalingstekens (hint: bekijk de afbeeldingsrolcode voor een beginpunt).
Een server instellen : een server instellen en gegevens verzenden tussen de webpagina en de server (hint: lees onze handleiding voor JSON en Python.) Hoe Python en JavaScript te communiceren met JSON Hoe Python en JavaScript te krijgen om te communiceren met behulp van JSON Vandaag zal ik laat u zien hoe u JSON gebruikt om gegevens van JavaScript naar Python te sturen, ik zal uitleggen hoe u een webserver installeert, samen met alle code die u nodig hebt Lees meer).

Heb je vandaag nieuwe vaardigheden geleerd? Hoe ben je verder gekomen met de codeeruitdagingen? Welke wijzigingen heb je aangebracht om deze website zo te maken? Laat het ons weten in de comments hieronder, we willen het graag weten!