Hur man skapar en webbplats: för nybörjare

Hur man skapar en webbplats: för nybörjare

Har du alltid velat skapa en webbplats? Kanske har du läst några av våra HTML ( förstå HTML ) och CSS -självstudier, men vet inte hur man använder dessa språk på ett större projekt.





Idag guidar jag dig genom processen att göra en komplett webbplats från grunden. Oroa dig inte om det här verkar vara en svår uppgift, jag guidar dig igenom det varje steg på vägen.



Du kommer att producera denna webbplats med HTML, CSS och JavaScript med en touch av jQuery (guide till jQuery). Du kommer inte att göra någonting verkligen blödande kant, så den här koden borde fungera ganska bra i de flesta moderna webbläsare.





Om du inte är säker på någon CSS, ta en titt på CSS -guide på W3Schools.com .

Designen

Här är designen för den här webbplatsen. Ta en titt på en högupplöst bild om du vill ha ett bättre utseende, eller ännu bättre, ladda ner hela projektet här.



Jag designade denna webbplats för ett fiktivt företag i Adobe Photoshop 2017. Om du är intresserad, se till att du hämtar .PSD -filen från buntnedladdningen. 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. Det första är Font Awesome , används för alla ikoner. De andra två teckensnitten är PT Serif och Myriad Pro (ingår i Photoshop). Om du inte är säker på hur du installerar teckensnitt, läs vår guide.

Oroa dig inte om du inte har det Adobe Photoshop , du behöver det inte för att fortsätta.



Initial kod

Nu när designen är klar, låt oss börja koda! Skapa en ny fil i din favorittextredigerare (jag använder Sublim text 3 ). Spara detta som index.html . Du kan kalla detta vad du vill, anledningen till att många sidor kallas index beror på hur webbservrar fungerar. Standardkonfigurationen för de flesta servrar är att visa index.html -sidan om ingen sida har angetts.

Om du inte vill lära dig detaljerna kan du ta 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 det minsta HTML -värde som krävs.
  • Definierar en sidtitel för 'Noise Media'
  • Inkluderar jQuery som finns på Google CDN (vad är ett CDN).
  • Inkluderar Font Awesome som finns på Google CDN.
  • Definierar a stil tag för att skriva din CSS i.
  • Definierar a manus tag för att skriva din JavaScript i.

Spara filen igen och öppna den i din webbläsare. Du kommer förmodligen inte att märka mycket, och det kommer säkert inte att se ut som en webbplats ännu.

Lägg märke till hur sidtiteln är Bullermedia . Detta definieras av texten inuti titel märka. Detta har att vara inne i huvud taggar.

min roku -fjärrkontroll fungerar inte

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 ljusgrått med en lätt mörkgrå undersida. Här är en närbild:

Lägg till denna HTML inuti kropp taggen överst:

Medan du är här, låt oss bryta ner det här. A div är som en behållare att lägga andra saker i. Dessa 'andra saker' kan vara fler behållare, text, bilder, vad som helst egentligen. Det finns vissa begränsningar för vad som kan gå in i vissa taggar, men divs är ganska generiska saker. Den har en id av övre bar . Detta kommer att användas för att styla det med CSS och rikta in det med JavaScript om det behövs. Se till att du bara har ett element med ett visst id - de ska vara unika. Om du vill att flera element ska ha samma namn, använd a klass istället - det är det de är utformade för! Här är CSS du behöver för att styla den (placeras högst upp i din stil märka):

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 a -klass skulle du istället använda ett punkt (.). De html och kropp taggar har sin vaddering 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 lägga detta innehåll i. Låt oss göra detta till en klass (så att du kan återanvända det senare), och som det här är inte en responsiv 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 innan du avslutar koden, så det kan vara bra 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 själva ikonen. Font Awesome är en uppsättning ikoner förpackade som ett vektorteckensnitt - fantastiskt! Den första koden ovan har redan konfigurerat Font Awesome, så det är klart att börja!

Lägg till denna HTML inuti de normal omslag div:



CSS:

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

Oroa dig inte för att de andra teckensnitten inte matchar designen - du kommer att städa upp det senare. Om du vill använda olika ikoner, gå vidare till Font Awesome Ikoner sidan och ändra sedan fa-volym ned till namnet på ikonen du vill använda.

När du går till navigeringsfältet använder du en oordnad lista ( de ) för detta. Lägg till denna HTML efter de logotyp-behållare (men fortfarande inne i normal omslag ):

De href används för att länka till andra sidor. Denna självstudiewebbplats har inga andra sidor, men du kan ange namn och sökväg (om det behövs) här, t.ex. recensioner.html . Se till att du lägger in det i båda dubbla citaten.

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 punktpunkterna med list-style-type: ingen; . Länkar är åtskilda lite och ges en färg när du håller musen över dem. Den lilla grå delaren är en högra kant på varje element, som sedan tas bort för det sista elementet med sista länken klass. Så här ser det ut:

Allt som återstår för detta avsnitt är den röda horisontella färgmarkeringen. Lägg till denna HTML efter normal omslag :

Och här är CSS:

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

Det är det översta avsnittet gjort. Så här ser det ut - ganska likt designen?

Huvudinnehållsområde

Det är nu dags att gå vidare till huvudinnehållsområdet-det så kallade 'ovanför vikningen'. Så här ser den här delen ut:

Detta är en ganska enkel del, lite text till vänster med en bild till höger. Detta område kommer att vara löst uppdelad i tredjedelar, ungefär ungefär Gyllene snittet .

Du behöver provbilden för den här delen. Det ingår i nedladdningen. Den här bilden är 670 px bred och kommer från vår Panasonic Lumix DMC-G80/G85 recension.

Lägg till HTML efter de topp-färg-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.

hur man kör Windows -program på Mac

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






Lägg märke till hur normal omslag elementet har återvänt (det är glädjen att använda klasser). Du kanske undrar varför bilden ( img ) taggen stängs inte. Detta är en självstängande tagg. Snedstrecket framåt ( /> ) indikerar detta, eftersom det inte alltid är vettigt att behöva 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-dimensionering: border-box; . Detta säkerställer att elementen alltid kommer att ha en bredd på 40% eller 60%. Standard (utan detta attribut) är din angivna bredd plus eventuell stoppning, marginaler och kanter. Bildklassen ( utvald bild ) har en maximal bredd av 500px . Om du bara anger en dimension (en bredd eller en höjd) och lämnar den andra tom, ändrar css storleken på bilden samtidigt som dess bildförhållande bibehålls.

Citat område

Låt oss skapa offertområdet. Så här ser det ut:

Detta är ett annat enkelt område. Den innehåller en mörkgrå bakgrund, med vitcentrerad text.

Lägg till denna HTML efter den förra normal omslag :



makeuseof is the best website ever


Joe Coburn



Och sedan denna 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 händer inte mycket här. Storleken är den viktigaste justeringen som behövs - teckenstorlek, avstånd, och så vidare. Så här ser det hela ut nu - det börjar likna en webbplats!

Ikonområde

Låt oss fortsätta trycka på - det är nästan klart! Här är nästa område som behöver skapas:

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 id: er. Lägg till denna HTML efter den förra 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.



Dessa tre ikoner är också Font-Awesome . HTML använder återigen normal omslag klass. 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 är några nya saker som händer i CSS. De rundade hörnen ställs in av gränsradie: 200px; . Att ställa in detta värde på samma sätt som bredden resulterar i en perfekt cirkel. Du kan minska detta om du föredrar mer av en kvadrat med rundade hörn. Lägg märke till hur svävaråtgärder tillämpas på divs - det är inte begränsat till endast länkar. Så här ser det här avsnittet ut nu:

Det sista du ska göra är sidfoten! Detta är verkligen enkelt, eftersom det bara är ett grått område utan text. Lägg till denna HTML efter ikonområdena normal omslag :

Här är CSS:

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

Se - riktigt 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 exakt som designen. Huvudorsaken till detta är de teckensnitt som används. Låt oss reda ut det.

Teckensnittet som används för de flesta titlarna är Myriad Pro . Detta följer med Adobe Skapa moln, men det är inte tillgängligt som webfont. Teckensnittet som för närvarande används på webbsidan är Helvetica . Det här ser ok ut, så du kan lämna det som det är PT Sans finns som webfont. Teckensnittet som används för all text är PT Serif , som finns som webfont.

Webfonts är en enkel process. Precis som att ladda ett nytt teckensnitt på din dator kan webbsidor ladda teckensnitt efter behov. Ett av de bästa sätten att göra detta är genom Google Fonts .

Lägg till denna CSS för att byta till de bättre teckensnitten:

@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 kroppselement för att använda de nya teckensnitten:

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

Lägg märke till hur h3 -elementet inte ingår i listan - detta kommer som standard att PT-Serif istället för PT-Sans .

Som en sista bit av snygghet, låt oss använda lite JavaScript för att rulla igenom tre olika bilder. Du kommer behöva Bild_2 och Bild_3 för denna del, och igen, det är valfritt. Webbplatsen är helt funktionell vid denna tidpunkt utan denna funktion. Så här kommer det att se ut (snabbare):

Ändra din HTML så att den innehåller tre utvalda bilder. Lägg märke till hur två av dessa har en CSS -klass på dold . Varje bild har fått ett ID så att JavaScript kan rikta in dem var för sig.





Här är CSS som behövs för att dölja de extra presenterade bilderna:

.hidden {
display: none;
}

Nu när HTML och CSS tas om hand, låt oss byta till JavaScript. Det är användbart att förstå Document Object Model (DOM) för den här delen, men det är inte ett krav.

Hitta manus område längst ner på sidan:


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

Lägg till följande JavaScript inuti manus märka:

/* 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 $ (dokument) .ready () . Det betyder att den körs när din webbläsare har färdigställt sidan - det här är en bra metod. De setInterval () funktionen används för att ringa till changeImage () fungerar regelbundet vid ett fördefinierat intervall i millisekunder (1000 millisekunder = 1 sekund). Detta lagras i tid variabel. Du kan öka eller minska detta för att påskynda eller bromsa rullningen. Slutligen används ett enkelt fallbesked för att visa olika bilder och hålla reda på den bild som för närvarande visas.

Kodningsutmaning

Det är allt! Förhoppningsvis har du lärt dig mycket under processen. Om du vill ha en utmaning och vill testa dina nya kunskaper, varför inte prova att genomföra dessa modifieringar:

Lägg till en sidfot: Lägg till lite text i sidfoten (tips: du kan återanvända normal omslag och en tredjedel/två tredjedel klasser.).

Förbättra bildrullningen: Ändra JavaScript för att animera bildändringarna (tips: titta på jQuery fadein och Animerad ).

Implementera flera citat: Ändra citaten för att ändra mellan en av flera olika (tips: titta på bildrullningskoden 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).

hur man gör att den bärbara datorn inte sover när den är stängd

När du är bekväm med att använda JavaScript eller om du har någon erfarenhet av Ruby kan du försöka skapa en webbplats med en statisk webbplatsbyggare som GatsbyJS eller Jekyll.

Dela med sig Dela med sig Tweet E-post Så här ändrar du utseende och känsla på ditt Windows 10 -skrivbord

Vill du veta hur du får Windows 10 att se bättre ut? Använd dessa enkla anpassningar för att göra Windows 10 till din egen.

Läs Nästa Relaterade ämnen
  • Programmering
  • HTML
  • Webbdesign
  • CSS
Om författaren Joe Coburn(136 artiklar publicerade)

Joe är utbildad i datavetenskap från University of Lincoln, Storbritannien. Han är en professionell mjukvaruutvecklare, och när han inte flyger drönare eller skriver musik kan han ofta hittas ta foton eller producera videor.

Mer från Joe Coburn

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera