Hvordan lage et nettsted: For nybegynnere

Hvordan lage et nettsted: For nybegynnere

Har du alltid ønsket å lage et nettsted? Kanskje du har lest noen av HTML -koden vår ( forstå HTML ) og CSS -opplæringsprogrammer, men vet ikke hvordan jeg skal bruke disse språkene på et større prosjekt.





I dag veileder jeg deg gjennom prosessen med å lage et komplett nettsted fra bunnen av. Ikke bekymre deg hvis dette virker som en vanskelig oppgave, jeg veileder deg gjennom det hvert trinn på veien.



Du vil produsere dette nettstedet ved hjelp av HTML, CSS og JavaScript med et snev av jQuery (guide til jQuery). Du vil ikke gjøre noe egentlig blødende kant, så denne koden burde fungere ganske bra i de fleste moderne nettlesere.





Hvis du ikke er sikker på CSS, kan du ta en titt på CSS -guide på W3Schools.com .

Designet

Her er designet for dette nettstedet. Ta en titt på et bilde med høy oppløsning hvis du vil se bedre ut, eller enda bedre, last ned hele prosjektet her.



Jeg designet dette nettstedet for et fiktivt selskap i Adobe Photoshop 2017. Hvis du er interessert, må du huske å hente .PSD -filen fra pakken som lastes ned. Her er hva du får i Photoshop -filen:

Inne i PSD finner du alle lagene gruppert, navngitt og fargekodet:



Du trenger noen få fonter installert for at ting skal se riktig ut. Den første er Font Awesome , brukt for alle ikonene. De to andre skriftene er PT Serif og Myriad Pro (følger med Photoshop). Hvis du ikke er sikker på hvordan du installerer fonter, kan du lese vår guide.

Ikke bekymre deg hvis du ikke har det Adobe Photoshop , du trenger det ikke for å fortsette.



Innledende kode

Nå som designet er klart, la oss begynne å kode! Lag en ny fil i ditt favoritt tekstredigeringsprogram (jeg bruker Sublim tekst 3 ). Lagre dette som index.html . Du kan kalle dette alt du liker, grunnen til at mange sider kalles indeks skyldes måten webservere fungerer på. Standardkonfigurasjonen for de fleste servere er å vise index.html -siden hvis ingen side er angitt.

Hvis du ikke vil lære detaljene, kan du hente hele koden fra nedlastingen.

Her er koden du trenger:





Noise Media


/* CSS goes here, at the top of the page */





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


Dette gjør flere ting:

  • Definerer minimum HTML som kreves.
  • Definerer en sidetittel på 'Noise Media'
  • Inkluderer jQuery som er hostet på Google CDN (hva er et CDN).
  • Inkluderer Font Awesome på Google CDN.
  • Definerer a stil tag for å skrive CSS i.
  • Definerer a manus tag for å skrive JavaScript i.

Lagre filen igjen og åpne den i nettleseren din. Du vil sannsynligvis ikke legge merke til mye, og det vil absolutt ikke se ut som et nettsted ennå.

Legg merke til hvordan sidetittelen er Støy Media . Dette er definert av teksten inne i tittel stikkord. Dette har å være inne i hode tagger.

beste stedet å kjøpe brukte Mac

Overskriften

La oss lage overskriften. Slik ser det ut:

La oss starte med den lille grå biten på toppen. Det er en lys grå med en svak mørk grå under. Her er et nærbilde:

Legg til denne HTML -filen inne i kropp taggen øverst:

Mens du er her, la oss bryte dette ned. EN div er som en beholder å sette andre ting i. Disse 'andre tingene' kan være flere beholdere, tekst, bilder, hva som helst egentlig. Det er noen begrensninger på hva som kan gå inn i bestemte koder, men divs er ganske generiske ting. Den har en id av topp-bar . Dette vil bli brukt til å style det med CSS, og målrette det med JavaScript om nødvendig. Sørg for at du bare har ett element med en bestemt ID - de skal være unike. Hvis du vil at flere elementer skal ha samme navn, bruker du a klasse i stedet - det er det de er designet for! Her er CSS du trenger for å style den (sett øverst inne i din stil stikkord):

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

Legg merke til hvordan hashtegnet (#, hashtag, pundskilt) brukes før navnet. Dette betyr at elementet er en ID. Hvis du brukte en a -klasse, ville du bruke et punktum (.) I stedet. De html og kropp tagger har polstring og margin satt til null. Dette forhindrer uønskede mellomromsproblemer.

Det er på tide å gå videre til logoen og navbar. Før du begynner, trenger du en beholder for å sette dette innholdet i. La oss gjøre dette til en klasse (slik at du kan bruke det senere), og slik dette er ikke et responsivt nettsted, gjør det 900 piksler bredt.

HTML:


CSS:

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

Det kan være vanskelig å fortelle hva som skjer før du er ferdig med koden, så det kan være nyttig å legge til en (midlertidig) farget bakgrunn for å se hva som skjer:

background: red;

Det er på tide å lage logoen nå. Font Awesome er nødvendig for selve ikonet. Font Awesome er et sett med ikoner pakket som en vektor font - fantastisk! Den første koden ovenfor har allerede konfigurert Font Awesome, så alt er klart!

Legg til denne HTML -koden innsiden de normal innpakning div:



CSS:

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

Ikke bekymre deg for at de andre skriftene ikke stemmer overens med designet - du vil rydde opp i det senere. Hvis du ønsker å bruke forskjellige ikoner, går du videre til Font Awesome Ikoner siden, og deretter endre fa-volum ned til navnet på ikonet du vil bruke.

Når du går til navigasjonslinjen, bruker du en uordnet liste ( de ) for dette. Legg til denne HTML -koden etter de logo-beholder (men fortsatt inne i normal innpakning ):

De href brukes til å koble til andre sider. Denne opplæringsnettstedet har ingen andre sider, men du kan sette navn og filbane (hvis nødvendig) her, f.eks. anmeldelser.html . Sørg for at du legger dette inn i begge doble anførselstegn.

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 . Den fjerner deretter punktene ved hjelp av liste-stil-type: ingen; . Lenker er litt mellom hverandre, og får en farge når du holder musen over dem. Den lille grå skillelinjen er en høyre kant på hvert element, som deretter fjernes for det siste elementet ved hjelp av siste lenke klasse. Slik ser det ut:

Alt som gjenstår for denne delen er det røde horisontale fargehøydepunktet. Legg til denne HTML -koden etter normal innpakning :

Og her er CSS:

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

Det er den øverste delen som er gjort. Slik ser det ut - ganske likt designet, ikke sant?

Hovedinnholdsområde

Det er nå på tide å gå videre til hovedinnholdsområdet-det såkalte 'over folden'. Slik ser denne delen ut:

Dette er en ganske enkel del, litt tekst til venstre med et bilde til høyre. Dette området blir løst delt inn i tredjedeler, omtrent tilnærmet Golden Ratio .

Du trenger eksempelbildet for denne delen. Det er inkludert i nedlastingen. Dette bildet er 670 piksler bredt, og er fra Panasonic Lumix DMC-G80/G85 anmeldelse.

Legg til HTML etter de topp-farge-sprut element:



Welcome!


Noise Media is a technology company specialising in tech reviews.


We’re very good at what we do, but unfortunately, we are not a real company.


Make sure you visit makeuseof.com for the full tutorial on how to build this website.

iphone 12 pro max vs iphone 12

Alternatively, check out our review of the Panasonic G80 shown on the right!






Legg merke til hvordan normal innpakning elementet har returnert (det er gleden ved å bruke klasser). Du lurer kanskje på hvorfor bildet ( img ) -taggen lukkes ikke. Dette er en selvlukkende tag. Slash fremover ( /> ) indikerer dette, da det ikke alltid er fornuftig å måtte lukke en 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 viktigste egenskapen her er eske-dimensjonering: border-box; . Dette sikrer at elementene alltid kommer til å ha en bredde på 40% eller 60%. Standard (uten dette attributtet) er den angitte bredden pluss eventuell polstring, marginer og kanter. Bildeklassen ( featured-image ) har en maks bredde av 500px . Hvis du bare angir en dimensjon (en bredde eller en høyde), og lar den andre stå tom, vil css endre størrelsen på bildet mens det beholder sideforholdet.

Sitatområde

La oss lage sitatområdet. Slik ser dette ut:

Dette er et annet enkelt område. Den inneholder en mørk grå bakgrunn, med hvit sentrert tekst.

Legg til denne HTML -koden etter den forrige normal innpakning :



makeuseof is the best website ever


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

Det er ikke mye som skjer her. Størrelse er den viktigste justeringen som trengs - skriftstørrelse, mellomrom og så videre. Slik ser det hele ut nå - det begynner å ligne et nettsted!

Ikonområde

La oss fortsette å trykke på - det er nesten ferdig! Her er det neste området som må opprettes:

Denne delen vil benytte flere klasser. De tre ikonene er stort sett de samme, med unntak av innholdet, så det er fornuftig å bruke klasser i stedet for ID -er. Legg til denne HTML -koden etter den forrige sitat-område :






YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!







Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.







Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.



Disse tre ikonene er også Font-Awesome . HTML -koden bruker igjen normal innpakning klasse. 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;
}

Det er noen nye ting som skjer i CSS. De avrundede hjørnene blir satt av kant-radius: 200px; . Å sette denne verdien på samme måte som bredden resulterer i en perfekt sirkel. Du kan redusere dette hvis du foretrekker mer av en firkant med avrundede hjørner. Legg merke til hvordan svevehandlinger brukes på divs - det er ikke begrenset til bare lenker. Slik ser denne delen ut nå:

Det siste du må gjøre er bunnteksten! Dette er veldig enkelt, ettersom det bare er et grått område uten tekst. Legg til denne HTML -koden etter ikonområdene normal innpakning :

Her er CSS:

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

Se - veldig enkle ting.

Legg til litt Pizzazz

Det er det, kodingen er ferdig! Du kan absolutt la ting være som det er, det er en ferdig webside. Du har kanskje lagt merke til at det ikke ser ut nøyaktig som designet. Hovedårsaken til dette er skriftene som brukes. La oss ordne det.

Skriften som brukes for de fleste titlene er Myriad Pro . Dette følger med Adobe Lag Cloud, men den er ikke tilgjengelig som en webfont. Skriften som for tiden brukes på nettsiden er Helvetica . Dette ser ok ut, så du kan la det være som det er PT Sans er tilgjengelig som webfont. Skriften som brukes for all teksten er PT Serif , som er tilgjengelig som en webfont.

Webfonter er en enkel prosess. På samme måte som å laste inn en ny skrifttype på datamaskinen din, kan nettsider laste inn fonter på forespørsel. En av de beste måtene å gjøre dette på er gjennom Google Fonts .

Legg til denne CSS for å bytte til de bedre skriftene:

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

Endre nå html- og kroppselementene dine for å bruke de nye skriftene:

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

Legg merke til hvordan h3 -elementet ikke er inkludert i listen - dette vil som standard være PT-Serif i stedet for PT-Sans .

Som en siste bit av skjønnhet, la oss bruke litt JavaScript for å bla gjennom tre forskjellige utvalgte bilder. Du vil trenge Bilde_2 og Bilde_3 for denne delen, og igjen, er det valgfritt. Nettstedet er helt funksjonelt på dette tidspunktet uten denne funksjonen. Slik vil det se ut (fremskyndet):

Endre HTML -koden din for å inkludere tre utvalgte bilder. Legg merke til hvordan to av disse har en CSS -klasse på skjult . Hvert bilde har fått en ID slik at JavaScript kan målrette mot hvert av dem uavhengig.





Her er CSS som trengs for å skjule de ekstra funksjonene:

.hidden {
display: none;
}

Nå som HTML og CSS er tatt vare på, la oss bytte til JavaScript. Det er nyttig å forstå Document Object Model (DOM) for denne delen, men det er ikke et krav.

Finn manus området nederst på siden:


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

Legg til følgende JavaScript i manus stikkord:

/* 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 er noen få ting som skjer her. Koden er inne $ (dokument) .ready () . Dette betyr at den vil kjøre når nettleseren din er ferdig med å gjengi siden - dette er en god praksis. De setInterval () funksjonen brukes til å ringe til changeImage () fungere regelmessig med et forhåndsdefinert intervall i millisekunder (1000 millisekunder = 1 sekund). Dette er lagret i tid variabel. Du kan øke eller redusere dette for å øke eller senke rullingen. Til slutt brukes en enkel saksuttalelse for å vise forskjellige bilder, og holde oversikt over bildet som vises for øyeblikket.

Kodingsutfordring

Det er det! Forhåpentligvis har du lært mye under prosessen. Hvis du har lyst på en utfordring, og vil prøve de nye ferdighetene dine på prøve, hvorfor ikke prøve å implementere disse modifikasjonene:

Legg til bunntekst: Legg til litt tekst i bunnteksten (hint: du kan bruke normal innpakning og en tredjedel/to tredjedel klasser.).

Forbedre rulling av bilder: Endre JavaScript for å animere bildeendringene (hint: se på jQuery fadein og Animert ).

Gjennomfør flere sitater: Endre anførselstegnene for å endre mellom ett av flere forskjellige (hint: se på rulleskoden for bildet for et utgangspunkt).

Sett opp en server: Sett opp en server og send data mellom nettsiden og serveren (hint: les vår guide til JSON og Python).

brukt pc -butikk i nærheten av meg

Når du er komfortabel med å bruke JavaScript eller hvis du har erfaring med Ruby, kan du prøve deg på å lage et nettsted med en statisk nettstedbygger som GatsbyJS eller Jekyll.

Dele Dele kvitring E -post Slik endrer du utseendet på Windows 10 -skrivebordet

Vil du vite hvordan du får Windows 10 til å se bedre ut? Bruk disse enkle tilpasningene for å gjøre Windows 10 til din egen.

Les neste Relaterte temaer
  • Programmering
  • HTML
  • Webdesign
  • CSS
Om forfatteren Joe Coburn(136 artikler publisert)

Joe er utdannet i informatikk fra University of Lincoln, Storbritannia. Han er en profesjonell programvareutvikler, og når han ikke flyr droner eller skriver musikk, kan han ofte bli funnet å ta bilder eller produsere videoer.

Mer fra Joe Coburn

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere