Veebisaidi loomine: algajatele

Veebisaidi loomine: algajatele

Kas olete alati tahtnud veebisaiti luua? Võib -olla olete lugenud mõnda meie HTML -i ( HTML -i mõistmine ) ja CSS -i õpetused, kuid ei tea, kuidas neid keeli suuremas projektis kasutada.





Täna juhendan teid täieliku veebisaidi loomise protsessis nullist. Ärge muretsege, kui see tundub raske ülesanne, ma juhendan teid selle igal sammul.



Selle veebisaidi koostamiseks kasutate HTML -i, CSS -i ja JavaScripti ning puudutate jQuery (jQuery juhend). Sa ei tee midagi tõesti veritsev serv, seega peaks see kood enamikes kaasaegsetes brauserites üsna hästi toimima.





Kui te pole üheski CSS -is kindel, vaadake seda CSS juhend kl W3Schools.com .

Kujundus

Siin on selle veebisaidi kujundus. Vaadake kõrge eraldusvõimega pilti, kui soovite paremat välimust või isegi paremat, laadige kogu projekt alla siit.



Kujundasin selle veebisaidi väljamõeldud ettevõttele aastal Adobe Photoshop 2017. Kui olete huvitatud, haarake kindlasti .PSD -fail kimpude allalaadimisest. Photoshopi failist leiate järgmist.

PSD sees leiate kõik kihid rühmitatuna, nimega ja värvikoodiga:



Selleks, et asjad näeksid õigesti, peate installima mõned fondid. Esimene on Font Awesome , kasutatakse kõigi ikoonide jaoks. Ülejäänud kaks fonti on PT Serif ja Myriad Pro (kaasas Photoshopiga). Kui te pole kindel, kuidas fonte installida, lugege meie juhendit.

Ärge muretsege, kui teil seda pole Adobe Photoshop , te ei vaja seda jätkamiseks.



Esialgne kood

Nüüd, kui disain on selge, alustame kodeerimist! Looge oma lemmiktekstiredaktoris uus fail (ma kasutan Ülev tekst 3 ). Salvestage see nimega index.html . Võite seda nimetada mis tahes meelepäraseks, põhjus, miks paljusid lehti nimetatakse indeksiks, on tingitud veebiserverite toimimisviisist. Enamiku serverite vaikekonfiguratsioon on lehe index.html esitamine, kui ühtegi lehte pole määratud.

Kui te ei soovi üksikasju teada saada, hankige allalaadimisel täielik kood.

Siin on kood, mida vajate:





Noise Media


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





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


See teeb mitmeid asju:

  • Määrab minimaalse minimaalse HTML -i.
  • Määrab lehe pealkirja „Noise Media”
  • Sisaldab Google'i CDN -is (mis on CDN) hostitud jQuery.
  • Sisaldab Font Awesome, mida hostitakse Google'i CDN -is.
  • Määrab a stiil märgend CSS -i kirjutamiseks.
  • Määrab a skript märgend JavaScripti kirjutamiseks.

Salvestage fail uuesti ja avage see oma veebibrauseris. Tõenäoliselt ei märka te palju ja kindlasti ei näe see veel välja nagu veebisait.

Pange tähele, kuidas lehe pealkiri on Müra Meedia . Seda määratleb kaustas olev tekst tiitel silt. See on sees olla pea silte.

kuidas eemaldada Google Drive Windows 10 -st

Päis

Loome päise. See näeb välja selline:

Alustame sellest väikesest hallist tükist ülaosas. See on helehall, mille all on kergelt tumehall. Siin on lähivõte:

Lisage see HTML kausta keha silt üleval:

Sel ajal, kui olete siin, jagame selle lahti. A div on nagu konteiner, kuhu muid asju panna. See „muu kraam” võib olla rohkem konteinereid, teksti, pilte ja kõike muud. Teatud siltidele võib olla teatud piiranguid, kuid divs on üsna üldised asjad. Sellel on id kohta ülemine riba . Seda kasutatakse CSS -i stiilimiseks ja vajadusel JavaScripti sihtimiseks. Veenduge, et teil oleks ainult üks konkreetse ID -ga element - need peaksid olema ainulaadsed. Kui soovite, et mitmel elemendil oleks sama nimi, kasutage a klassi selle asemel - selleks on need mõeldud! Siin on CSS, mida peate stiilima (pange oma ülaossa stiil silt):

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

Pange tähele, kuidas räsimärki (#, hashtag, naelamärk) kasutatakse nime ees. See tähendab, et element on ID. Kui kasutasite klassi, kasutaksite selle asemel punkti (.). The html ja keha siltide täidis ja veerised on seatud nulli. See hoiab ära soovimatud tühikutega seotud probleemid.

On aeg liikuda edasi logo ja navigeerimisriba juurde. Enne alustamist vajate selle sisu sisestamiseks konteinerit. Teeme sellest klassi (et saaksite seda hiljem uuesti kasutada) ja see on mitte tundlik veebisait, tehke see 900 pikslit lai.

HTML:


CSS:

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

Enne koodi lõpetamist võib olla raske öelda, mis toimub, seega võib olla kasulik lisada (ajutine) värviline taust, et näha, mis toimub:

background: red;

Nüüd on aeg logo luua. Font Awesome on ikooni enda jaoks vajalik. Font Awesome on ikoonide komplekt, mis on pakitud vektorfondina - fantastiline! Ülaltoodud esialgne kood on juba Font Awesome seadistatud, nii et see on kõik kasutamiseks valmis!

Lisage see HTML sees the tavaline ümbris div:



CSS:

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

Ärge muretsege, et teised fondid ei vasta kujundusele - korrastate selle hiljem. Kui soovite kasutada erinevaid ikoone, minge lehele Font Awesome ikoonid lehte ja seejärel muutke fa-helitugevuse vähendamine selle ikooni nimele, mida soovite kasutada.

Navigeerimisribale liikudes kasutate järjestamata loendit ( the ) selle jaoks. Lisage see HTML pärast the logo-konteiner (aga ikkagi sees tavaline ümbris ):

The href kasutatakse linkimiseks teistele lehtedele. Sellel õppematerjalide veebisaidil pole muid lehti, kuid võite siia panna nime ja failitee (kui vaja), nt. reviews.html . Pange see kindlasti mõlema topelt jutumärgi sisse.

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

See CSS algab tähega korrastamata nimekiri . Seejärel eemaldab see täppide abil list-style-type: pole; . Lingid on üksteisest veidi eemal ja neile hiirekursori viies antakse värv. Väike hall jagaja on iga elemendi parem ääris, mis seejärel eemaldatakse viimase elemendi jaoks, kasutades viimane link klassi. See näeb välja selline:

Selle jaotise jaoks on jäänud vaid punane horisontaalne esiletõst. Lisage see HTML pärast tavaline ümbris :

Ja siin on CSS:

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

See on ülemine osa tehtud. See näeb välja selline - üsna sarnane kujundusega, eks?

Peamine sisuala

Nüüd on aeg liikuda edasi põhilisele sisualale-nn „voltimise kohale”. See osa näeb välja järgmine:

See on üsna lihtne osa, vasakpoolne tekst ja pilt paremal. See piirkond saab olema lõdvalt jagatud kolmandikuks, ligikaudu ligikaudne Kuldne suhe .

Selle osa jaoks vajate näidispilti. See on allalaadimises kaasas. See pilt on 670 pikslit lai ja pärineb meie Panasonic Lumix DMC-G80/G85 ülevaatusest.

Lisage HTML pärast the top-color-splash 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.

hisense roku teleripult ei tööta

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






Pange tähele, kuidas tavaline ümbris element on tagasi tulnud (see on klasside kasutamise rõõm). Teil võib tekkida küsimus, miks pilt ( img ) silt ei sulgu. See on isesulguv silt. Edasine kaldkriips ( /> ) näitab seda, kuna alati pole mõtet sildi sulgeda.

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

Siin on kõige olulisem atribuut kasti suurus: border-box; . See tagab elementide laiuse alati 40% või 60%. Vaikimisi (ilma selle atribuudita) on teie määratud laius pluss polsterdus, veerised ja äärised. Pildiklass ( esiletõstetud pilt ) on max laius kohta 500 pikslit . Kui määrate ainult ühe mõõtme (laiuse või kõrguse) ja jätate teise tühjaks, muudab css pildi suurust, säilitades selle kuvasuhte.

Tsiteeri ala

Loome hinnapakkumiste ala. See näeb välja selline:

See on veel üks lihtne valdkond. See sisaldab tumehalli tausta, valge tsentreeritud tekstiga.

Lisage see HTML pärast Eelmine tavaline ümbris :



makeuseof is the best website ever


Joe Coburn



Ja siis see 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;
}

Siin ei toimu palju. Suurus on peamine kohandamine - fondi suurus, vahekaugus jne. Siin näeb kogu asi välja nüüd - see hakkab välja nägema nagu veebisait!

Ikooniala

Jätkame vajutamist - see on peaaegu valmis! Siin on järgmine valdkond, mis vajab loomist:

See osa kasutab mitut klassi. Kolm ikooni on enamasti samad, välja arvatud sisu, seega on mõistlik kasutada ID -de asemel klasse. Lisage see HTML pärast Eelmine hinnapakkumine :






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.



Need kolm ikooni on ka Font-Awesome . HTML kasutab taas tavaline ümbris klassi. Siin on 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 -is toimub paar uut asja. Ümardatud nurki seadistatakse piiri raadius: 200 pikslit; . Selle väärtuse määramine samale laiusele annab täiusliku ringi. Saate seda vähendada, kui eelistate rohkem ümarate nurkadega ruutu. Pange tähele, kuidas hõljumistoiminguid rakendatakse dividele - see ei piirdu ainult linkidega. See jaotis näeb nüüd välja selline:

Viimane asi, mida teha, on jalus! See on tõesti lihtne, kuna see on lihtsalt hall ala ilma tekstita. Lisage see HTML ikoonialade järele tavaline ümbris :

Siin on CSS:

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

Vaadake - tõesti lihtsad asjad.

Lisage veidi pizza

See on kõik, kodeerimine on tehtud! Võite absoluutselt jätta asjad nii, nagu need on, see on valmis veebileht. Võib -olla olete märganud, et see ei näe välja täpselt nagu disain. Selle peamine põhjus on kasutatavad fondid. Teeme selle korda.

Enamiku pealkirjade jaoks kasutatav font on Myriad Pro . See tuleb kaasa Adobe Looge pilv, kuid see pole veebifontina saadaval. Veebilehel praegu kasutatav font on Helvetica . See tundub ok, nii et võite selle siiski jätta PT Sans on saadaval veebifontina. Kogu teksti jaoks kasutatav font on PT Serif , mis on saadaval veebifontina.

Veebifondid on lihtne protsess. Nii nagu uue fondi arvutisse laadimine, saavad veebilehed soovi korral fonte laadida. Üks parimaid viise seda teha on läbi Google'i fondid .

Parema fondi vahetamiseks lisage see CSS:

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

Nüüd muutke oma html -i ja põhielemente uute fontide kasutamiseks:

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

Pange tähele, kuidas h3 element pole loendis - see vaikimisi PT-Serif selle asemel PT-Sans .

Viimase nägususena kasutame kolme erineva esiletõstetud pildi sirvimiseks JavaScripti. Sa vajad Pilt_2 ja Pilt_3 selle osa jaoks ja jällegi on see vabatahtlik. Veebisait on sel hetkel täiesti funktsionaalne ilma selle funktsioonita. See näeb välja (kiirendatud) järgmine:

Muutke oma HTML -i kolme esiletõstetud pildi lisamiseks. Pange tähele, kuidas kahel neist on CSS -klass peidetud . Igale pildile on antud ID, nii et JavaScript saab sihtida igaüks neist eraldi.





Siin on täiendavate esiletõstetud piltide peitmiseks vajalik CSS:

.hidden {
display: none;
}

Nüüd, kui HTML ja CSS on hoolitsetud, läheme üle JavaScriptile. Selle osa jaoks on kasulik mõista dokumendi objekti mudelit (DOM), kuid see pole nõue.

Leidke skript ala lehe allosas:


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

Lisage kausta järgmine JavaScript skript silt:

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

Siin toimub paar asja. Kood on sees $ (dokument). valmis () . See tähendab, et see käivitub, kui teie brauser on lehe renderdamise lõpetanud - see on hea tava. The setInterval () funktsiooni kasutatakse helistamiseks changeImage () toimivad korrapäraselt etteantud intervalliga millisekundites (1000 millisekundit = 1 sekund). See on salvestatud kausta aega muutuja. Kerimise kiirendamiseks või aeglustamiseks saate seda suurendada või vähendada. Lõpuks kasutatakse lihtsat juhtumit erinevate piltide kuvamiseks ja praegu kuvatava pildi jälgimiseks.

Kodeerimise väljakutse

See on kõik! Loodetavasti õppisite protsessi käigus palju. Kui soovite väljakutset ja soovite oma uued leitud oskused proovile panna, siis miks mitte proovida neid muudatusi rakendada:

Jaluse lisamine: Lisage jalusse teksti (vihje: võite seda uuesti kasutada tavaline ümbris ja üks kolmandik/kaks kolmandikku klassid.).

Parandage pildi kerimist: Pildimuutuste animeerimiseks muutke JavaScripti (vihje: vaadake jQuery hajuma ja Animeeritud ).

Rakendage mitu hinnapakkumist: Muutke hinnapakkumisi, et vahetada ühte mitmest erinevast (vihje: vaadake alguspunkti pildi kerimiskoodist).

Seadistage server: Seadistage server ja saatke andmeid veebilehe ja serveri vahel (vihje: lugege meie JSONi ja Pythoni juhendit).

kuidas ühendada wii hdmi -ga

Kui teil on JavaScripti kasutamine mugav või kui teil on Rubyga kogemusi, võite proovida oma kätt veebisaidi loomisel staatilise veebisaitide koostajaga, nagu GatsbyJS või Jekyll.

Jaga Jaga Piiksuma E -post Kuidas muuta oma Windows 10 töölaua välimust

Kas soovite teada, kuidas muuta Windows 10 paremaks? Kasutage neid lihtsaid kohandusi, et muuta Windows 10 enda omaks.

Loe edasi Seotud teemad
  • Programmeerimine
  • HTML
  • Veebidisain
  • CSS
Autori kohta Joe Coburn(136 artiklit avaldatud)

Joe on lõpetanud arvutiteaduse Ühendkuningriigi Lincolni ülikoolis. Ta on professionaalne tarkvaraarendaja ja kui ta ei lennuta droonidega ega kirjuta muusikat, võib teda sageli leida pildistamas või videoid tootmas.

Rohkem Joe Coburnilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin