Verkkosivuston luominen: aloittelijoille

Verkkosivuston luominen: aloittelijoille

Oletko aina halunnut tehdä verkkosivuston? Ehkä olet lukenut jonkin HTML -koodistamme ( HTML: n ymmärtäminen ) ja CSS -opetusohjelmat, mutta en tiedä kuinka käyttää näitä kieliä isommassa projektissa.





Tänään opastan sinua koko verkkosivun luomisessa alusta alkaen. Älä huoli, jos tämä tuntuu vaikealta tehtävältä, opastan sinua sen läpi joka askeleella.



Tuotat tämän verkkosivuston käyttämällä HTML-, CSS- ja JavaScript -tiedostoja jQueryn ripauksella (jQuery -opas). Et tule tekemään mitään Todella verenvuoto, joten tämän koodin pitäisi toimia melko hyvin useimmissa nykyaikaisissa selaimissa.





Jos et ole varma jostakin CSS: stä, katso CSS -opas klo W3Schools.com .

Muotoilu

Tässä on tämän sivuston suunnittelu. Katso korkean resoluution kuvaa, jos haluat paremman ulkoasun tai jopa paremman, lataa koko projekti täältä.



Suunnittelin tämän sivuston kuvitteelliselle yritykselle vuonna Adobe Photoshop 2017. Jos olet kiinnostunut, muista napata .PSD -tiedosto paketin latauksesta. Tässä on, mitä saat Photoshop -tiedostosta:

PSD: n sisältä löydät kaikki kerrokset ryhmiteltyinä, nimettyinä ja värikoodattuina:



Tarvitset muutamia fontteja asennettuna, jotta asiat näyttävät oikein. Ensimmäinen on Fontti Mahtava , käytetään kaikissa kuvakkeissa. Kaksi muuta fonttia ovat PT Serif ja Myriad Pro (sisältyy Photoshopiin). Jos et ole varma fonttien asentamisesta, lue oppaamme.

Älä huoli, jos sinulla ei ole Adobe Photoshop , et tarvitse sitä jatkaaksesi.



Alkuperäinen koodi

Nyt kun suunnittelu on selvä, aloitetaan koodaus! Luo uusi tiedosto suosikkitekstieditorissasi (käytän Ylellinen teksti 3 ). Tallenna tämä nimellä index.html . Voit kutsua tätä haluamallasi tavalla, koska monia sivuja kutsutaan indeksiksi, koska verkkopalvelimet toimivat. Useimpien palvelimien oletusasetus on näyttää index.html -sivu, jos sivua ei ole määritetty.

Jos et halua oppia yksityiskohtia, hanki koko koodi latauksesta.

Tässä on tarvitsemasi koodi:





Noise Media


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





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


Tämä tekee useita asioita:

  • Määrittää vaaditun vähimmäis -HTML: n.
  • Määrittää 'Noise Media' -sivun otsikon
  • Sisältää jQueryn, joka on isännöity Google CDN: ssä (mikä on CDN).
  • Sisältää Font Awesome -palvelun, joka on isännöity Google CDN: ssä.
  • Määrittää a tyyli -tunniste, johon CSS kirjoitetaan.
  • Määrittää a käsikirjoitus -tunniste, johon JavaScript kirjoitetaan.

Tallenna tiedosto uudelleen ja avaa se selaimessasi. Et todennäköisesti huomaa paljon, eikä se varmasti näytä verkkosivustolta juuri nyt.

Huomaa, miten sivun otsikko on Noise Media . Tämä määritetään tekstin sisällä otsikko tag. Tämä on olla sisällä pää tunnisteita.

mitä on ihmisten puhelimien takana

Otsikko

Luodaan otsikko. Tältä se näyttää:

Aloitetaan siitä pienestä harmaasta osasta yläosassa. Se on vaaleanharmaa ja hieman tummanharmaa alla. Tässä lähikuva:

Lisää tämä HTML -koodi vartalo tunniste ylhäällä:

Kun olet täällä, katkaise tämä. A div on kuin säiliö muiden tavaroiden laittamiseen. Tämä 'muu tavara' voi olla enemmän säiliöitä, tekstiä, kuvia tai mitä tahansa. Tiettyihin tunnisteisiin voi liittyä joitain rajoituksia, mutta divit ovat melko yleisiä asioita. Siinä on id / yläpalkki . Tätä käytetään muotoilemaan sitä CSS: llä ja kohdistamaan se tarvittaessa JavaScriptillä. Varmista, että sinulla on vain yksi elementti, jolla on tietty tunnus - niiden on oltava yksilöllisiä. Jos haluat useilla elementeillä olevan saman nimen, käytä a luokka sen sijaan - sitä varten ne on suunniteltu! Tässä on CSS, joka sinun on muotoiltava (laita yläosaan tyyli 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;
}

Huomaa, kuinka hash -merkkiä (#, hashtag, puntamerkki) käytetään nimen edessä. Tämä tarkoittaa, että elementti on tunnus. Jos käytät luokkaa, käytä sen sijaan pistettä (.). The html ja vartalo tunnisteiden täyte ja marginaali on nolla. Tämä estää kaikki ei -toivotut välilyönnit.

On aika siirtyä logoon ja navigointipalkkiin. Ennen kuin aloitat, tarvitset säilön tämän sisällön sijoittamiseen. Tehdään tästä luokka (jotta voit käyttää sitä myöhemmin uudelleen), ja koska tämä on ei reagoiva sivusto, tee siitä 900 pikselin leveä.

HTML:


CSS:

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

Voi olla vaikeaa sanoa, mitä tapahtuu, ennen kuin olet lopettanut koodin, joten voi olla hyödyllistä lisätä (väliaikainen) värillinen tausta nähdäksesi mitä tapahtuu:

background: red;

Nyt on aika luoda logo. Fontti Mahtava tarvitaan itse kuvakkeeseen. Font Awesome on joukko kuvakkeita, jotka on pakattu vektorifontiksi - mahtavaa! Yllä oleva alkuperäinen koodi on jo Font Awesome, joten kaikki on valmis käyttöön!

Lisää tämä HTML sisällä the normaali kääre div:



CSS:

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

Älä huolehdi siitä, että muut fontit eivät vastaa muotoilua - siistit sen myöhemmin. Jos haluat käyttää erilaisia ​​kuvakkeita, siirry kohtaan Fontti Mahtavia kuvakkeita sivu ja vaihda sitten fa-äänenvoimakkuuden vähennys sen kuvakkeen nimeen, jota haluat käyttää.

Kun siirryt navigointipalkkiin, käytät järjestämätöntä luetteloa ( the ) tätä varten. Lisää tämä HTML jälkeen the logo-kontti (mutta silti sisällä normaali kääre ):

The href käytetään linkittämään muille sivuille. Tällä opetusohjelman verkkosivustolla ei ole muita sivuja, mutta voit kirjoittaa nimen ja tiedostopolun (tarvittaessa) tähän, esim. reviews.html . Muista kirjoittaa tämä molempiin lainausmerkkeihin.

Tässä 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;
}

Tämä CSS alkaa merkillä järjestämätön lista . Sitten se poistaa luettelomerkit käyttämällä list-style-type: ei mitään; . Linkit ovat hieman erillään toisistaan ​​ja saavat värin, kun viet hiiren niiden päälle. Pieni harmaa jakaja on jokaisen elementin oikea reuna, joka poistetaan sitten viimeiselle elementille käyttämällä viimeinen linkki luokka. Tältä se näyttää:

Tässä osiossa on jäljellä vain punainen vaakasuuntainen värikorostus. Lisää tämä HTML -koodi normaali kääre :

Ja tässä CSS:

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

Siinä on yläosa tehty. Tältä se näyttää - melko samanlainen kuin muotoilu?

Pääsisältöalue

Nyt on aika siirtyä pääsisältöalueelle-niin sanottuun 'sivun yläosaan'. Tältä tämä osa näyttää:

Tämä on melko yksinkertainen osa, hieman tekstiä vasemmalla ja kuva oikealla. Tämä alue tulee olemaan irtonaisesti jaettu kolmanneksiin, suunnilleen likimäärä Kultainen leikkaus .

Tarvitset mallikuvan tähän osaan. Se sisältyy lataukseen. Tämä kuva on 670 pikselin leveä ja se on Panasonic Lumix DMC-G80/G85 -katsauksestamme.

Lisää HTML jälkeen the top-color-splash elementti:



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.

miten luodaan viiva wordiin

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






Huomaa, kuinka normaali kääre elementti on palannut (se on luokkakäytön ilo). Saatat ihmetellä, miksi kuva ( img ) -tunniste ei sulkeudu. Tämä on itsestään sulkeva tunniste. Kauttaviiva ( /> ) osoittaa tämän, koska tagin sulkeminen ei aina ole järkevää.

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

Tärkein ominaisuus tässä on laatikon mitoitus: border-box; . Tämä varmistaa, että elementit ovat aina 40% tai 60% leveitä. Oletus (ilman tätä määritettä) on määritetty leveys sekä mahdolliset täyte, marginaalit ja reunat. Kuvaluokka ( esillä oleva kuva ) on a max-leveys / 500 kuvapistettä . Jos määrität vain yhden ulottuvuuden (leveys tai korkeus) ja jätät toisen tyhjäksi, css muuttaa kuvan kokoa säilyttäen sen kuvasuhteen.

Lainausalue

Luodaan lainausalue. Tältä se näyttää:

Tämä on toinen yksinkertainen alue. Se sisältää tummanharmaan taustan ja valkoisen tekstin keskellä.

Lisää tämä HTML jälkeen Edellinen normaali kääre :



makeuseof is the best website ever


Joe Coburn



Ja sitten tämä 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;
}

Täällä ei tapahdu paljon. Koko on tärkein tarvittava säätö - fonttikoko, väli ja niin edelleen. Tältä koko asia näyttää nyt - se alkaa näyttää verkkosivustolta!

Kuvakealue

Jatketaan painamista - se on melkein valmis! Tässä on seuraava alue, joka on luotava:

Tämä osa käyttää useita luokkia. Kolme kuvaketta ovat enimmäkseen samat sisältöä lukuun ottamatta, joten on järkevää käyttää luokkia tunnusten sijaan. Lisää tämä HTML jälkeen Edellinen lainausalue :






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.



Nämä kolme kuvaketta ovat myös Fontti-mahtava . HTML käyttää jälleen normaali kääre luokka. Tässä 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;
}

CSS: ssä on muutamia uusia asioita. Pyöristetyt kulmat asetetaan raja-säde: 200 kuvapistettä; . Tämän arvon asettaminen samaksi kuin leveys johtaa täydelliseen ympyrään. Voit vähentää tätä, jos haluat enemmän neliötä, jossa on pyöristetyt kulmat. Huomaa, kuinka hover -toimintoja sovelletaan div -osioihin - se ei rajoitu vain linkkeihin. Tältä osio näyttää nyt:

Viimeinen asia on alatunniste! Tämä on todella yksinkertaista, koska se on vain harmaa alue ilman tekstiä. Lisää tämä HTML -kuvakealueiden jälkeen normaali kääre :

Tässä CSS:

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

Katso - todella yksinkertaisia ​​asioita.

Lisää Pizzazzia

Siinä se, koodaus on tehty! Voit jättää asiat sellaisina kuin ne ovat, se on valmis verkkosivu. Olet ehkä huomannut, että se ei näytä tarkalleen kuten suunnittelu. Suurin syy tähän ovat käytetyt fontit. Selvitetään se.

Useimpien nimikkeiden fontti on Myriad Pro . Tämä tulee mukana Adobe Luo pilvi, mutta se ei ole käytettävissä webfontina. Verkkosivulla tällä hetkellä käytetty fontti on Helvetica . Tämä näyttää hyvältä, joten voit jättää sen sellaisenaan PT Sans on saatavana webfontina. Koko tekstissä käytetty fontti on PT Serif , joka on saatavana webfontina.

Web -fontit ovat yksinkertainen prosessi. Aivan kuten uuden fontin lataaminen tietokoneellesi, verkkosivut voivat ladata fontteja tarvittaessa. Yksi parhaista tavoista tehdä tämä on läpi Google -fontit .

Lisää tämä CSS vaihtaaksesi parempiin kirjasimiin:

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

Muokkaa nyt html- ja body -elementtejäsi käyttämään uusia fontteja:

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

Huomaa, kuinka h3 -elementti ei sisälly luetteloon - tämä on oletuksena PT-Serif sijasta PT-Sans .

Lopuksi nättiä, käytämme JavaScriptiä selataksesi kolmea esillä olevaa kuvaa. Tarvitset Kuva_2 ja Kuva_3 Tämä osa on jälleen valinnainen. Sivusto on tällä hetkellä täysin toimiva ilman tätä ominaisuutta. Tältä se näyttää (nopeutettu):

Muokkaa HTML -koodiasi niin, että se sisältää kolme esillä olevaa kuvaa. Huomaa, kuinka kahdella näistä on CSS -luokka piilotettu . Jokaiselle kuvalle on annettu tunnus, jotta JavaScript voi kohdistaa jokaisen kuvan itsenäisesti.





Tässä on CSS, jota tarvitaan ylimääräisten esillä olevien kuvien piilottamiseen:

.hidden {
display: none;
}

Nyt kun HTML ja CSS on hoidettu, siirrytään JavaScriptiin. On hyödyllistä ymmärtää DOM (Document Object Model) tässä osassa, mutta se ei ole vaatimus.

Etsi käsikirjoitus sivun alalaidassa oleva alue:


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

Lisää seuraava JavaScript käsikirjoitus 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;
}
}
});

Täällä tapahtuu muutamia asioita. Koodi on sisällä $ (asiakirja) .ready () . Tämä tarkoittaa, että se käynnistyy, kun selaimesi on suorittanut sivun hahmontamisen - tämä on hyvä käytäntö. The setInterval () -toimintoa käytetään soittamaan changeImage () toimivat säännöllisesti ennalta määrätyin välein millisekunteina (1000 millisekuntia = 1 sekunti). Tämä tallennetaan aika muuttuja. Voit lisätä tai vähentää tätä nopeuttaaksesi tai hidastaaksesi vieritystä. Lopuksi yksinkertaista tapauslausumaa käytetään näyttämään erilaisia ​​kuvia ja seuraamaan parhaillaan näkyvää kuvaa.

Koodaushaaste

Se siitä! Toivottavasti opit paljon prosessin aikana. Jos haluat haasteen ja haluat testata uudet löytämäsi taidot, kokeile toteuttaa nämä muutokset:

Lisää alatunniste: Lisää alatunnisteeseen tekstiä (vihje: voit käyttää normaali kääre ja kolmasosa/kaksi kolmasosaa luokat.).

Paranna kuvan vieritystä: Muokkaa JavaScriptiä animoidaksesi kuvan muutokset (vihje: katso jQueryä haalistuminen ja Animoitu ).

Toteuta useita lainauksia: Muokkaa lainausmerkkejä vaihtaaksesi yhden useista eri lainauksista (vihje: katso aloituskohtaa kuvan vierityskoodista).

Määritä palvelin: Asenna palvelin ja lähetä tietoja verkkosivun ja palvelimen välillä (vihje: lue JSON- ja Python -oppaamme).

kuinka saada aero -teema Windows 10: een

Kun olet tyytyväinen JavaScriptin käyttöön tai jos sinulla on kokemusta Rubyn käytöstä, voit kokeilla kättäsi verkkosivuston luomisessa staattisen verkkosivuston rakentajan, kuten GatsbyJS: n tai Jekyllin, kanssa.

Jaa Jaa Tweet Sähköposti Kuinka muuttaa Windows 10 -työpöydän ulkoasua

Haluatko tietää, miten Windows 10 näyttää paremmalta? Näiden yksinkertaisten mukautusten avulla voit tehdä Windows 10: stä oman.

Lue seuraava Liittyvät aiheet
  • Ohjelmointi
  • HTML
  • Web-suunnittelu
  • CSS
Kirjailijasta Joe Coburn(136 artikkelia julkaistu)

Joe on valmistunut tietojenkäsittelytieteestä Lincolnin yliopistosta Iso -Britanniasta. Hän on ammattimainen ohjelmistokehittäjä, ja kun hän ei lentä droneilla tai kirjoita musiikkia, hänet voidaan usein ottaa valokuvista tai videoista.

Lisää Joe Coburnilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi