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 basistekstcode begrijpen) 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). Je zult niets doen werkelijk bloeding, dus deze code zou redelijk goed moeten werken in de meeste moderne browsers.

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

Het ontwerp

Hier is het ontwerp voor deze website. Bekijk 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, leest u 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). Bewaar deze 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:

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 stijl tag om je CSS in te schrijven.
• Definieert een script tag om je 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 is Noise Media. Dit wordt gedefinieerd door de tekst in de titel label. Deze heeft om in de hoofd labels.

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 binnen de lichaam tag bovenaan

Terwijl je hier bent, laten we dit bespreken. EEN div is als een container om andere dingen in te stoppen “andere dingen” kan meer containers, tekst, afbeeldingen, eigenlijk iets zijn. Er zijn enkele beperkingen aan wat in bepaalde tags kan gaan, maar divs zijn tamelijk generieke dingen. Het heeft een ID kaart van bovenste balk. 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 a klasse in plaats daarvan - het is waar ze voor zijn ontworpen! Hier is de CSS die je nodig hebt om het te stylen (bovenaan in je plaatsen stijl label):

html, body margin: 0; opvulling: 0; lettertype-familie: 'Helvetica', 'Arial'; / * initiële lettertypen * / # top-bar width: 100%; achtergrond: # F1F1F1; / * lichtgrijs * / randbodem: 1px vast # D4D4D4; / * donkergrijs "onderstrepen" * / hoogte: 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 a-klasse zou gebruiken, zou u in plaats hiervan een volledige stop (.) Gebruiken. De html en lichaam 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 klasse maken (zodat je het later opnieuw kunt gebruiken), en omdat dit niet een responsieve website, maak deze 900 pixels breed.

HTML:

CSS:

.normale omslag width: 900px; marge: 0 auto; opvulling: 15px 40px; achtergrond: rood; overloop: automatisch; 

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:

achtergrond: rood;

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 binnen de normaal-wrapper div:

  
Noise Media
 

CSS:

.logo-icoon kleur: # 000000; font-size: 60pt; zweven: links;  h1 zweven: links; marge: 21 px 0 0 25 px; 

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

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

 
Huis
 
Wat betreft
 
beoordelingen
 
Contact
 

De href wordt gebruikt om naar andere pagina's te linken. Deze zelfstudiewebsite heeft 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; / * opsommingstekens verwijderen * / marge: 29px 0 0 0; opvulling: 0; zweven: rechts; lettergrootte: 16pt;  #navbar li display: inline; / * maak items horizontaal * / #navbar li a: link, #navbar li a: visited, #navbar li a: active text-decoration: none; / * onderstrepen verwijderen * / color: # 000000; opvulling: 0 16px 0 10px; / * spatie naar links * / marge: 0; border-right: 2px solid # B4B4B4; / * divider * / #navbar li a: link.last-link / * verwijder verdeler * / border-right: 0px;  #navbar li a: hover / * kleur veranderen bij zweven (mouseover) * / kleur: # 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 en wordt vervolgens voor het laatste element verwijderd met behulp van de last-koppeling klasse. Dit is hoe dat eruit ziet:

Het enige dat overblijft voor deze sectie is de rode horizontale kleurmarkering. Voeg deze HTML toe na de normaal-wrapper:

En hier is de CSS:

# top-kleur-splash breedte: 100%; hoogte: 4px; achtergrond: # EB6361; 

Dat is het bovenste deel gedaan. Hier is hoe het eruit ziet: vrij gelijkaardig aan het ontwerprecht?

Hoofdinhoudsgebied

Het is nu tijd om verder te gaan in het hoofdinhoudsgebied - de 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 zijn losjes opgedeeld in terts, grofweg in verhouding tot de gulden snede Gebruik van de gulden snede in fotografie voor een betere compositie Gebruik van de gulden snede in fotografie voor een betere compositie Heeft u moeite met fotocompositie? 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 de 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.
 
Of kijk op onze recensie van de Panasonic G80 aan de rechterkant!
 
 
  
 

Let op hoe het normaal-wrapper element is teruggekeerd (dat is het plezier van het gebruik van klassen). Je vraagt ​​je misschien af ​​waarom het beeld (img) wordt niet gesloten. Dit is een zelfsluitende tag. De schuine streep naar voren (/>) geeft dit aan, omdat het niet altijd logisch is om een ​​tag te moeten sluiten.

CSS:

.een derde breedte: 40%; zweven: links; box-sizing: border-box; / * zorg dat padding en randen de maat * / margin-top niet vergroten: 20px;  .twee-derde breedte: 60%; zweven: links; box-sizing: border-box; / * zorg dat padding en randen de maat * / opvulling links niet vergroten: 40px; text-align: right; margin-top: 20px;  .featured-image max-width: 500px; / * verkleint de afbeeldingsgrootte met behoud van de beeldverhouding * / .no-margin-top margin-top: 0; / * marge op zaken als headers verwijderen * /

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 (Aanbevolen-image) heeft een Maximale wijdte van 500px. 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 normaal-wrapper:

 
 
“makeuseof is de beste website ooit”
 
Joe Coburn
 
 

En dan deze CSS:

# quote-area background: # 363636; kleur: #FFFFFF; text-align: center; opvulling: 15px 0;  h3 font-weight: normaal; font-size: 20pt; margin-top: 0px;  h4 font-weight: normaal; lettergrootte: 16pt; marge-bodem: 0; 

Er gebeurt hier niet veel. Sizing is de belangrijkste vereiste aanpassing - lettergrootte, spatiëring, enzovoort. Dit 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 de vorige citaat-area:

 
 
  
 
YouTube
 
Bekijk ons ​​YouTube-kanaal voor meer technische reviews, 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 gebruikt opnieuw de normaal-wrapper klasse. Dit is de CSS:

.icon-outer box-sizing: border-box; / * zorg dat padding en randen de maat * / float niet vergroten: left; breedte: 33,33%; opvulling: 25px; marge: 0; text-align: center;  .icon-circle background: #EEEEEE; kleur: # B4B4B4; breedte: 200 px; hoogte: 200 px; grensradius: 200 px; / * maak afgeronde hoeken * / marge: 0 auto; rand: 2px vast # D6D6D6; box-sizing: border-box; / * zorg dat padding en randen de maat * / font-size niet vergroten: 75pt; opvulling: 30px 0 0 0; cursor: pointer;  .icon-circle: hover / * verander van kleur bij zweven (mouseover) * / color: #FFFFFF; achtergrond: # 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 door 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 pictogramgebieden ' normaal-wrapper:

Dit is de CSS:

#footer width: 100%; achtergrond: # F1F1F1; / * lichtgrijs * / randbovenzijde: 1px vast # D4D4D4; / * donkergrijs "bovenbelijning" * / hoogte: 150 px; 

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 er niet uitziet precies zoals het ontwerp. 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 wordt gebruikt op de webpagina is Helvetica. Dit ziet er goed uit, dus u kunt het laten zoals het is PT Sans is beschikbaar als een webfont. Het lettertype dat wordt gebruikt voor alle tekst is PT Serif, welke 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 worden toegepast PT-Serif in plaats van PT-Sans.

Als laatste stukje schoonheid, laten we wat JavaScript gebruiken om door drie verschillende aanbevolen afbeeldingen te bladeren. Je zal nodig hebben IMAGE_2 en image_3 voor dit onderdeel, 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 hebben van verborgen. Elke afbeelding heeft een ID gekregen, zodat JavaScript elk afzonderlijk kan targeten.

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

.verborgen 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.

Vind de script gebied onderaan de pagina:

Voeg het volgende JavaScript toe in de script label:

/ * JavaScript gaat hier, onderaan de pagina * / $ (document) .ready (function () // wordt uitgevoerd zodra de pagina gereed is var time = 2500; // haal de afbeeldingscontainers $ im1 = $ (' # f-image-1 '); $ im2 = $ (' # f-image-2 '); $ im3 = $ (' # f-image-3 '); setInterval (function () // call-functie elke x milliseconden (gedefinieerd in tijdvariabele hierboven) 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 ; pauze; standaard: // toon afbeelding 1 $ im1.show (); $ im2.hide (); $ im3.hide (); currentImage = 1;);

Er gebeuren hier een paar dingen. De code zit binnenin $ (Document) .ready (). Dit betekent dat het wordt uitgevoerd zodra uw browser de pagina heeft weergegeven - dit is een goede gewoonte. De setInterval () functie wordt gebruikt om de changeImage () functioneer regelmatig op een vooraf gedefinieerd interval in milliseconden (1000 milliseconden = 1 seconde). Dit wordt opgeslagen in de tijd variabel. 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:

Voeg een voettekst toe: Voeg wat tekst toe aan de voettekst (hint: u kunt de normaal-wrapper en eenderde / tweederde klassen.).
Verbeter het scrollen van afbeeldingen: Pas het JavaScript aan om de beeldveranderingen te animeren (hint: bekijk jQuery fadein en animeer).
Meerdere offertes implementeren: Wijzig de aanhalingstekens om te wisselen tussen een van de verschillende aanhalingstekens (hint: bekijk de scrollcode van de afbeelding 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 laat ik u zien hoe om JSON te gebruiken om gegevens van JavaScript naar Python te sturen Ik zal ingaan op het instellen van een webserver, 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 zouden het graag willen weten!

Ontdek meer over: CSS, HTML, Web Design.