Sådan laver du et websted: For begyndere

Sådan laver du et websted: For begyndere

Har du altid ønsket at lave et websted? Måske har du læst nogle af vores HTML ( forstå HTML ) og CSS -selvstudier, men ved ikke, hvordan man bruger disse sprog til et større projekt.





I dag guider jeg dig gennem processen med at lave et komplet websted fra bunden. Bare rolig, hvis dette virker som en vanskelig opgave, jeg guider dig igennem det hvert trin på vejen.



Du producerer dette websted ved hjælp af HTML, CSS og JavaScript med et strejf af jQuery (guide til jQuery). Du vil ikke gøre noget virkelig blødende kant, så denne kode burde fungere rimelig godt i de fleste moderne browsere.





Hvis du ikke er sikker på nogen CSS, så tag et kig på CSS vejledning på W3Schools.com .

Designet

Her er designet til dette websted. Tag et kig på et billede i høj opløsning, hvis du vil have et bedre udseende eller endnu bedre, downloade det fulde projekt her.



Jeg har designet dette websted til et fiktivt firma i Adobe Photoshop 2017. Hvis du er interesseret, skal du sørge for at få fat i .PSD -filen fra pakkeoverførslen. Her er hvad du får i Photoshop -filen:

Inde i PSD finder du alle lag grupperet, navngivet og farvekodet:



Du skal installere et par skrifttyper, for at tingene kan se korrekte ud. Det første er Font Fantastisk , bruges til alle ikonerne. De to andre skrifttyper er PT Serif og Myriad Pro (inkluderet i Photoshop). Hvis du ikke er sikker på, hvordan du installerer skrifttyper, skal du læse vores vejledning.

Bare rolig, hvis du ikke har Adobe Photoshop , du behøver ikke det for at fortsætte.



Indledende kode

Nu hvor designet er klart, lad os begynde at kode! Opret en ny fil i din foretrukne teksteditor (jeg bruger Sublim tekst 3 ). Gem dette som index.html . Du kan kalde dette alt, hvad du kan lide, grunden til at mange sider kaldes indeks skyldes, hvordan webservere fungerer. Standardkonfigurationen for de fleste servere er at vise index.html -siden, hvis der ikke er angivet nogen side.

Hvis du ikke vil lære detaljerne, skal du tage den fulde kode fra download.

Her er den kode, du har brug for:





Noise Media


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





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


Dette gør flere ting:

  • Definerer det nødvendige minimum HTML.
  • Definerer en sidetitel for 'Noise Media'
  • Inkluderer jQuery hostet på Google CDN (hvad er et CDN).
  • Inkluderer Font Awesome hostet på Google CDN.
  • Definerer a stil tag til at skrive din CSS i.
  • Definerer a manuskript tag til at skrive dit JavaScript i.

Gem din fil igen, og åbn den i din webbrowser. Du vil sandsynligvis ikke lægge mærke til meget, og det vil bestemt ikke ligne et websted endnu.

Læg mærke til hvordan sidetitlen er Støjmedier . Dette er defineret af teksten inde i titel tag. Det her har at være inde i hoved mærker.

hvordan man sletter gamle windows -opdateringer

Overskriften

Lad os oprette overskriften. Sådan ser det ud:

Lad os starte med den lille grå bit øverst. Det er en lysegrå med en let mørkegrå underside. Her er et nærbillede:

Tilføj denne HTML inde i legeme tag øverst:

Mens du er her, lad os bryde dette ned. EN div er som en beholder til at putte andre ting i. Disse 'andre ting' kan være flere beholdere, tekst, billeder, hvad som helst virkelig. Der er nogle begrænsninger for, hvad der kan gå ind i bestemte tags, men divs er temmelig generiske ting. Den har en id af top-bar . Dette vil blive brugt til at style det med CSS, og målrette det med JavaScript, hvis det kræves. Sørg for, at du kun har et element med et bestemt id - de skal være unikke. Hvis du vil have flere elementer til at have samme navn, skal du bruge a klasse i stedet - det er det, de er designet til! Her er den CSS, du har brug for til at style den (sat øverst i din stil tag):

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æg mærke til hvordan hashtegnet (#, hashtag, pundtegn) bruges før navnet. Det betyder, at elementet er et ID. Hvis du brugte en a -klasse, ville du i stedet bruge et punktum (.). Det html og legeme tags har deres polstring og margen sat til nul. Dette forhindrer uønskede mellemrumsproblemer.

Det er tid til at gå videre til logoet og navbaret. Inden du starter, skal du bruge en beholder til at sætte dette indhold i. Lad os gøre dette til en klasse (så du kan genbruge det senere), og som dette er ikke et responsivt websted, gør det 900 pixels bredt.

HTML:


CSS:

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

Det kan være svært at fortælle, hvad der foregår, før du er færdig med koden, så det kan være nyttigt at tilføje en (midlertidig) farvet baggrund for at se, hvad der sker:

background: red;

Det er tid til at oprette logoet nu. Font Fantastisk er nødvendig for selve ikonet. Font Awesome er et sæt ikoner pakket som en vektor skrifttype - fantastisk! Den indledende kode ovenfor er allerede konfigureret Font Awesome, så det hele er klar til at gå!

Tilføj denne HTML inde det normal indpakning div:



CSS:

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

Du skal ikke bekymre dig om, at de andre skrifttyper ikke matcher designet - det rydder du op senere. Hvis du ønsker at bruge forskellige ikoner, skal du gå videre til Font Awesome Ikoner side, og skift derefter fa-volumen-ned til navnet på det ikon, du ønsker at bruge.

Når du flytter til navigationslinjen, bruger du en uordnet liste ( det ) for det. Tilføj denne HTML efter det logo-container (men stadig inde i normal indpakning ):

Det href bruges til at linke til andre sider. Dette selvstudiewebsted har ingen andre sider, men du kan angive navn og filsti (hvis det kræves) her, f.eks. anmeldelser.html . Sørg for at lægge dette inde i begge dobbelte citater.

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 . Det fjerner derefter punkttegn ved hjælp af liste-stil-type: ingen; . Links er lidt adskilt fra hinanden og får en farve, når du holder musen over dem. Den lille grå opdeler er en højre kant på hvert element, som derefter fjernes for det sidste element ved hjælp af sidste link klasse. Sådan ser det ud:

Det eneste, der er tilbage til dette afsnit, er den røde vandrette farvefremhævelse. Tilføj denne HTML efter normal indpakning :

Og her er CSS:

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

Det er den øverste sektion udført. Sådan ser det ud - temmelig ligner designet, ikke?

Hovedindholdsområde

Det er nu tid til at flytte på hovedindholdsområdet-det såkaldte 'over folden'. Sådan ser denne del ud:

Dette er en ret simpel del, noget tekst til venstre med et billede til højre. Dette område vil være løst opdelt i tredjedele, omtrent tilnærmelsesvis til Guldforhold .

Du skal bruge prøvebilledet til denne del. Det er inkluderet i download. Dette billede er 670 px bredt og er fra vores Panasonic Lumix DMC-G80/G85 anmeldelse.

Tilføj HTML efter det top-farve-stænk 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.

fjernskrivebord fra windows til ubuntu

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






Læg mærke til hvordan normal indpakning element er vendt tilbage (det er glæden ved at bruge klasser). Du undrer dig måske over, hvorfor billedet ( img ) tag lukker ikke. Dette er et selvlukkende mærke. Fremad skråstreg ( /> ) angiver dette, da det ikke altid giver mening at skulle lukke et mærke.

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 vigtigste egenskab her er box-dimensionering: border-box; . Dette sikrer, at elementerne altid vil være 40% eller 60% bredde. Standarden (uden denne attribut) er din angivne bredde plus eventuel polstring, margener og kanter. Billedklassen ( fremhævet billede ) har en max-bredde af 500px . Hvis du kun angiver en dimension (en bredde eller en højde) og lader den anden stå tom, ændrer css størrelsen på billedet, samtidig med at dets billedformat bevares.

Citat område

Lad os oprette tilbudsområdet. Sådan ser dette ud:

Dette er et andet simpelt område. Den indeholder en mørkegrå baggrund med hvid centreret tekst.

Tilføj denne HTML efter den forrige normal indpakning :



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

Der sker ikke meget her. Størrelse er den vigtigste justering, der er nødvendig - skriftstørrelse, afstand og så videre. Sådan ser det hele ud nu - det begynder at ligne et websted!

Ikonområde

Lad os blive ved med at trykke på - det er næsten færdigt! Her er det næste område, der skal oprettes:

Denne del vil bruge flere klasser. De tre ikoner er stort set de samme, med undtagelse af indholdet, så det giver mening at bruge klasser i stedet for id'er. Tilføj denne HTML efter den forrige citat-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 ikoner er også Font-Awesome . HTML -koden bruger igen normal indpakning 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;
}

Der er et par nye ting i gang i CSS. De afrundede hjørner sættes af grænse-radius: 200px; . Indstilling af denne værdi på samme måde som bredden resulterer i en perfekt cirkel. Du kan reducere dette, hvis du foretrækker mere en firkant med afrundede hjørner. Læg mærke til, hvordan svævehandlinger anvendes på divs - det er ikke begrænset til kun links. Sådan ser dette afsnit ud nu:

Det sidste du skal gøre er sidefoden! Dette er virkelig simpelt, da det bare er et gråt område uden tekst. Tilføj denne HTML efter ikonområderne ' normal indpakning :

Her er CSS:

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

Se - virkelig enkle ting.

Tilføj lidt Pizzazz

Det er det, kodningen er færdig! Du kan absolut lade tingene være, som de er, det er en færdig webside. Du har muligvis bemærket, at det ikke ser ud Nemlig som designet. Hovedårsagen til dette er de anvendte skrifttyper. Lad os ordne det.

Den skrifttype, der bruges til de fleste af titlerne, er Myriad Pro . Dette følger med Adobe Opret Cloud, men den er ikke tilgængelig som webfont. Den skrifttype, der i øjeblikket bruges på websiden, er Helvetica . Det ser ok ud, så du kan dog lade det være som det er PT Sans er tilgængelig som webfont. Den skrifttype, der bruges til hele teksten, er PT Serif , som er tilgængelig som webfont.

Webfonts er en simpel proces. Ligesom at indlæse en ny skrifttype på din computer, kan websider indlæse skrifttyper efter behov. En af de bedste måder at gøre dette på er igennem Google skrifttyper .

Tilføj denne CSS for at skifte til de bedre skrifttyper:

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

Rediger nu dine html- og kropselementer for at bruge de nye skrifttyper:

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

Bemærk, hvordan h3 -elementet ikke er inkluderet på listen - dette vil som standard være PT-Serif i stedet for PT-Sans .

Som en sidste smukhed, lad os bruge lidt JavaScript til at rulle gennem tre forskellige fremhævede billeder. Du får brug for Billede_2 og Billede_3 for denne del, og igen, er det valgfrit. Websitet er fuldstændigt funktionelt på dette tidspunkt uden denne funktion. Sådan ser det ud (fremskyndet):

Rediger din HTML for at inkludere tre fremhævede billeder. Bemærk, hvordan to af disse har en CSS -klasse på skjult . Hvert billede har fået et ID, så JavaScript kan målrette mod dem hver for sig.





Her er den CSS, der er nødvendig for at skjule de ekstra fremhævede billeder:

.hidden {
display: none;
}

Nu hvor HTML og CSS er taget sig af, lad os skifte til JavaScript. Det er nyttigt at forstå Document Object Model (DOM) for denne del, men det er ikke et krav.

Find manuskript område nederst på siden:


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

Tilføj følgende JavaScript inde i manuskript tag:

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

Der sker et par ting her. Koden er indeholdt inde $ (dokument). ready () . Det betyder, at den kører, når din browser er færdig med at gengive siden - det er en god praksis. Det setInterval () funktionen bruges til at kalde changeImage () fungere regelmæssigt med et foruddefineret interval i millisekunder (1000 millisekunder = 1 sekund). Dette gemmes i tid variabel. Du kan øge eller reducere dette for at fremskynde eller bremse rulningen. Endelig bruges en simpel sagsfremstilling til at vise forskellige billeder og holde styr på det aktuelt viste billede.

Kodningsudfordring

Det er det! Forhåbentlig har du lært meget under processen. Hvis du har lyst til en udfordring og vil teste dine nye fundne færdigheder, hvorfor så ikke prøve at implementere disse ændringer:

Tilføj en sidefod: Tilføj noget tekst i sidefoden (tip: du kan genbruge normal indpakning og en tredjedel/to tredjedel klasser.).

Forbedr billedrulning: Rediger JavaScript for at animere billedændringerne (tip: se jQuery fadein og Animeret ).

Gennemfør flere citater: Rediger citaterne for at skifte mellem et af flere forskellige (tip: se på billedrulningskoden for et udgangspunkt).

Opsætning af en server: Opsæt en server, og send data mellem websiden og serveren (tip: læs vores guide til JSON og Python).

hvordan man sender nogen en besked på youtube

Når du er tryg ved at bruge JavaScript, eller hvis du har erfaring med Ruby, kan du prøve din hånd med at oprette et websted med en statisk webstedsbygger som GatsbyJS eller Jekyll.

Del Del Tweet E -mail Sådan ændres udseendet og følelsen af ​​dit Windows 10 -skrivebord

Vil du vide, hvordan du får Windows 10 til at se bedre ud? Brug disse enkle tilpasninger til at gøre Windows 10 til din egen.

Læs Næste Relaterede emner
  • Programmering
  • HTML
  • Webdesign
  • CSS
Om forfatteren Joe Coburn(136 artikler udgivet)

Joe er uddannet i datalogi fra University of Lincoln, UK. Han er en professionel softwareudvikler, og når han ikke flyver med droner eller skriver musik, kan han ofte findes tage fotos eller producere videoer.

Mere fra Joe Coburn

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere