Home-theater-designers
Ar visada norėjote sukurti svetainę? Galbūt perskaitėte kai kuriuos mūsų HTML ( suprasti HTML ) ir CSS vadovėliai, bet nežinau, kaip tomis kalbomis naudotis didesniame projekte.
Šiandien aš jums padėsiu sukurti visą svetainę nuo nulio. Nesijaudinkite, jei tai atrodo sunki užduotis, aš jums padėsiu kiekviename žingsnyje.
Šią svetainę kursite naudodami HTML, CSS ir „JavaScript“, palietę „jQuery“ („jQuery“ vadovas). Nieko nepadarysi tikrai kraujas kraujas, todėl šis kodas turėtų veikti gana gerai daugelyje šiuolaikinių naršyklių.
Jei nesate tikri dėl kokio nors CSS, pažiūrėkite į CSS vadovas adresu W3Schools.com .
Dizainas
Štai šios svetainės dizainas. Pažvelkite į didelės skiriamosios gebos vaizdą, jei norite atrodyti geriau ar dar geriau, atsisiųskite visą projektą čia.
Sukūriau šią svetainę išgalvotai įmonei Adobe Photoshop 2017. Jei jus domina, būtinai paimkite .PSD failą iš paketo atsisiuntimo. Štai ką galite rasti „Photoshop“ faile:
PSD viduje rasite visus sluoksnius, sugrupuotus, pavadintus ir pažymėtus spalvomis:
Jums reikės įdiegti kelis šriftus, kad viskas atrodytų teisingai. Pirmasis yra Šriftas nuostabus , naudojamas visoms piktogramoms. Kiti du šriftai yra PT serifas ir „Myriad Pro“ (įtraukta į „Photoshop“). Jei nesate tikri, kaip įdiegti šriftus, perskaitykite mūsų vadovą.
Nesijaudinkite, jei neturite Adobe Photoshop , jums to nereikia tęsti.
Pradinis kodas
Dabar, kai dizainas yra aiškus, pradėkime koduoti! Sukurkite naują failą savo mėgstamiausiame teksto redaktoriuje (aš naudoju Didingas tekstas 3 ). Išsaugoti tai kaip index.html . Tai galite pavadinti bet kuo, kas jums patinka, todėl daugelis puslapių vadinami indeksu dėl žiniatinklio serverių veikimo būdo. Numatytoji daugumos serverių konfigūracija yra rodyti puslapį index.html, jei joks puslapis nėra nurodytas.
Jei nenorite sužinoti išsamios informacijos, eikite ir paimkite visą atsisiuntimo kodą.
Štai jums reikalingas kodas:
Noise Media
/* CSS goes here, at the top of the page */
/* JavaScript goes here, at the bottom of the page */
Tai daro keletą dalykų:
- Nustato minimalų būtiną HTML.
- Apibrėžia puslapio pavadinimą „Triukšmo medija“
- Apima „jQuery“, priglobtą „Google“ CDN (kas yra CDN).
- Apima nuostabų šriftą, priglobtą „Google“ CDN.
- Apibrėžia a stilius žymę, į kurią įrašysite savo CSS.
- Apibrėžia a scenarijus žymą, kad galėtumėte įrašyti „JavaScript“.
Išsaugokite failą dar kartą ir atidarykite jį žiniatinklio naršyklėje. Tikriausiai daug ko nepastebėsite ir kol kas tikrai neatrodys kaip svetainė.
Atkreipkite dėmesį į puslapio pavadinimą Triukšmo žiniasklaida . Tai apibrėžia tekstas viduje titulas žyma. Tai turi būti viduje galva žymes.
kaip įjungti „Mac“ darbalaukį
Antraštė
Sukurkime antraštę. Štai kaip tai atrodo:
Pradėkime nuo tos mažos pilkos spalvos viršuje. Tai šviesiai pilka su šiek tiek tamsiai pilka apačia. Štai iš arti:
Įtraukite šį HTML į kūnas žyma viršuje:
Kol būsite čia, suskaidykime tai. A div yra tarsi talpykla, į kurią galima įdėti kitų dalykų. Ši „kita medžiaga“ gali būti daugiau talpyklų, teksto, vaizdų ar bet ko kito. Yra tam tikrų apribojimų, kurie gali būti įtraukti į tam tikras žymas, tačiau „divs“ yra gana bendri dalykai. Jame yra id apie viršutinė juosta . Tai bus naudojama kuriant stilių naudojant CSS ir, jei reikia, taikykite pagal „JavaScript“. Įsitikinkite, kad turite tik vieną elementą su tam tikru ID - jie turėtų būti unikalūs. Jei norite, kad keli elementai turėtų tą patį pavadinimą, naudokite a klasė vietoj to - jie yra skirti tam! Štai CSS, kurį turite suformuoti (įdėkite savo viršuje stilius žyma):
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;
}Atkreipkite dėmesį, kaip maišos ženklas (#, hashtag, svaro ženklas) naudojamas prieš pavadinimą. Tai reiškia, kad elementas yra ID. Jei naudojate klasę, vietoj to naudokite tašką (.). The html ir kūnas žymių užpildai ir paraštės yra nustatyti į nulį. Tai apsaugo nuo nepageidaujamų tarpų problemų.
Atėjo laikas pereiti prie logotipo ir naršymo juostos. Prieš pradėdami, jums reikia konteinerio, į kurį įdėkite šį turinį. Padarykime tai klase (kad vėliau galėtumėte ją pakartotinai naudoti), ir taip ne interaktyvią svetainę, padarykite 900 pikselių pločio.
HTML:
CSS:
.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}Gali būti sunku pasakyti, kas vyksta, kol nebaigsite kodo, todėl gali būti naudinga pridėti (laikiną) spalvotą foną, kad pamatytumėte, kas vyksta:
background: red;Atėjo laikas sukurti logotipą. Šriftas nuostabus reikalinga pačiai piktogramai. Nuostabus šriftas yra piktogramų rinkinys, supakuotas kaip vektorinis šriftas - nuostabus! Pirmiau pateiktas kodas jau nustatė nuostabų šriftą, todėl viskas paruošta naudoti!
Pridėkite šį HTML viduje į įprastas įvyniojimas div:
CSS:
.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}Nesijaudinkite, kad kiti šriftai neatitinka dizaino - vėliau tai sutvarkysite. Jei norite naudoti skirtingas piktogramas, pereikite prie Nuostabios šrifto piktogramos puslapį, tada pakeiskite fa-garsumo mažinimas prie norimos naudoti piktogramos pavadinimo.
Pereidami į naršymo juostą, naudosite nesutvarkytą sąrašą ( į ) už tai. Pridėkite šį HTML po į logotipas-konteineris (bet vis tiek viduje įprastas įvyniojimas ):
The href naudojamas nuorodoms į kitus puslapius. Šioje mokymo svetainėje nėra kitų puslapių, tačiau čia galite įdėti pavadinimą ir failo kelią (jei reikia), pvz. reviews.html . Įsitikinkite, kad tai įrašėte abiejose dvigubose kabutėse.
Štai 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;
}Ši CSS prasideda an netvarkingas sąrašas . Tada jis pašalina kulkų taškus naudodami list-style-type: nėra; . Nuorodos yra šiek tiek atskirtos ir įgauna spalvą, kai užvedate pelę ant jų. Mažas pilkas daliklis yra dešinė kiekvieno elemento kraštinė, kuri vėliau pašalinama paskutiniam elementui naudojant paskutinė nuoroda klasė. Štai kaip tai atrodo:
Šiam skyriui lieka tik raudonos horizontalios spalvos paryškinimas. Pridėkite šį HTML po įprastas įvyniojimas :
O štai CSS:
#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}Taip padaryta viršutinė dalis. Štai kaip jis atrodo - gana panašus į dizainą?
Pagrindinė turinio sritis
Dabar atėjo laikas pereiti prie pagrindinės turinio srities-vadinamosios „virš matomos ribos“. Štai kaip atrodo ši dalis:
Tai gana paprasta dalis, šiek tiek kairės pusės tekstas su vaizdu dešinėje. Ši sritis bus laisvai padalintas į trečdalius, maždaug apytiksliai Aukso santykis .
Šiai daliai jums reikės pavyzdinio vaizdo. Tai įtraukta į atsisiuntimą. Šis vaizdas yra 670 pikselių pločio ir yra iš mūsų „Panasonic Lumix DMC-G80/G85“ apžvalgos.
Pridėkite HTML po į viršutinė spalva-purslai elementas:
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.
„Windows 10“ sako, kad neprisijungęs prie interneto, bet aš
Alternatively, check out our review of the Panasonic G80 shown on the right!
Atkreipkite dėmesį, kaip įprastas įvyniojimas elementas grįžo (tai yra džiaugsmas naudojant klases). Jums gali būti įdomu, kodėl vaizdas ( img ) žyma neužsidaro. Tai savaime užsidaranti žyma. Brūkšnys į priekį ( /> ) tai rodo, nes ne visada prasminga uždaryti žymą.
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 */
}Svarbiausias atributas čia yra dėžutės dydis: border-box; . Tai užtikrina, kad elementų plotis visada bus 40% arba 60%. Numatytasis (be šio atributo) yra jūsų nurodytas plotis plius bet koks paminkštinimas, paraštės ir kraštinės. Vaizdo klasė ( rodomas vaizdas ) turi maks. plotis apie 500 taškų . Jei nurodysite tik vieną matmenį (plotį ar aukštį), o kitą paliksite tuščią, css pakeis vaizdo dydį, išlaikydamas jo kraštinių santykį.
Citatos sritis
Sukurkime citatų sritį. Štai kaip tai atrodo:
Tai dar viena paprasta sritis. Jame yra tamsiai pilkas fonas su baltos spalvos centru.
Pridėkite šį HTML po Ankstesnis įprastas įvyniojimas :
makeuseof is the best website ever
Joe Coburn
Ir tada šis 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;
}Čia nedaug kas vyksta. Dydis yra pagrindinis reikalingas koregavimas - šrifto dydis, tarpai ir pan. Štai kaip viskas atrodo dabar - tai pradeda atrodyti kaip svetainė!
Piktogramų sritis
Toliau spausime - tai beveik baigta! Štai kita sritis, kurią reikia sukurti:
Šioje dalyje bus naudojamos kelios klasės. Trys piktogramos dažniausiai yra vienodos, išskyrus turinį, todėl tikslinga vietoj ID naudoti klases. Pridėkite šį HTML po Ankstesnis citata-sritis :
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.
Šios trys piktogramos taip pat yra Šriftas-nuostabus . HTML vėl naudoja įprastas įvyniojimas klasė. Štai 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 vyksta keletas naujų dalykų. Suapvalinti kampai nustatomi ribos spindulys: 200 taškų; . Nustačius tokią vertę kaip plotis, gaunamas tobulas apskritimas. Galite tai sumažinti, jei norėtumėte daugiau kvadrato su užapvalintais kampais. Atkreipkite dėmesį, kaip užvedimo veiksmai taikomi divams - tai neapsiriboja tik nuorodomis. Štai kaip šis skyrius atrodo dabar:
Poraštė
Paskutinis dalykas, kurį reikia padaryti, yra poraštė! Tai tikrai paprasta, nes tai tik pilka sritis be teksto. Pridėkite šį HTML po piktogramų sritimis įprastas įvyniojimas :
Štai CSS:
#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}Žiūrėk - tikrai paprasti dalykai.
Pridėkite šiek tiek „Pizzazz“
Štai viskas, kodavimas baigtas! Galite visiškai palikti dalykus tokius, kokie jie yra, tai yra baigtas tinklalapis. Tačiau galbūt pastebėjote, kad neatrodo tiksliai kaip dizainas. Pagrindinė to priežastis yra naudojami šriftai. Išspręskime tai.
Šriftas, naudojamas daugeliui pavadinimų, yra „Myriad Pro“ . Tai ateina su „Adobe“ Sukurkite „Cloud“, bet jis negalimas kaip žiniatinklio šriftas. Šiuo metu tinklalapyje naudojamas šriftas yra Helvetika . Tai atrodo gerai, todėl galite palikti viską taip, kaip yra PT Sans yra žiniatinklio šriftas. Visam tekstui naudojamas šriftas yra PT serifas , kurį galima rasti kaip žiniatinklio šriftą.
Webfontai yra paprastas procesas. Kaip ir įkeliant naują šriftą į kompiuterį, tinklalapiai pagal poreikį gali įkelti šriftus. Vienas iš geriausių būdų tai padaryti yra „Google“ šriftai .
Pridėkite šį CSS, kad pereitumėte prie geresnių šriftų:
@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';
}Dabar pakeiskite savo HTML ir turinio elementus, kad galėtumėte naudoti naujus šriftus:
font-family: 'PT Serif', 'Helvetica', 'Arial';Atkreipkite dėmesį, kaip h3 elementas neįtrauktas į sąrašą - pagal numatytuosius nustatymus PT-Serif vietoj PT-Sans .
Galiausiai, naudokitės „JavaScript“, kad peržiūrėtumėte tris skirtingus vaizdus. Jums reikės Vaizdas_2 ir Vaizdas_3 šiai daliai ir vėl tai neprivaloma. Svetainė šiuo metu visiškai veikia be šios funkcijos. Štai kaip tai atrodys (pagreitinta):
Pakeiskite HTML, kad įtrauktumėte tris vaizdus. Atkreipkite dėmesį, kaip du iš jų turi CSS klasę paslėptas . Kiekvienam vaizdui buvo suteiktas ID, kad „JavaScript“ galėtų taikyti kiekvieną iš jų atskirai.
Štai CSS, kurio reikia norint paslėpti papildomus vaizdus:
.hidden {
display: none;
}Dabar, kai pasirūpinta HTML ir CSS, pereikime prie „JavaScript“. Naudinga suprasti šios dalies dokumento objekto modelį (DOM), tačiau tai nėra reikalavimas.
Surask scenarijus sritis puslapio apačioje:
/* JavaScript goes here, at the bottom of the page */
Įdėkite toliau nurodytą „JavaScript“ į aplanką scenarijus žyma:
/* 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;
}
}
});Čia vyksta keli dalykai. Kodas yra viduje $ (dokumentas) .ready () . Tai reiškia, kad jis bus paleistas, kai jūsų naršyklė baigs atvaizduoti puslapį - tai gera praktika. The setInterval () funkcija naudojama skambinti changeImage () reguliariai veikti iš anksto nustatytu intervalu milisekundėmis (1000 milisekundžių = 1 sekundė). Tai saugoma laikas kintamasis. Galite padidinti arba sumažinti, kad paspartintumėte arba sulėtintumėte slinkimą. Galiausiai, paprastas atvejis naudojamas rodyti skirtingus vaizdus ir sekti šiuo metu rodomą vaizdą.
Kodavimo iššūkis
Viskas! Tikimės, kad proceso metu daug išmokote. Jei jums patinka iššūkis ir norite išbandyti savo naujus įgūdžius, kodėl gi nepabandžius įgyvendinti šių pakeitimų:
Pridėti poraštę: Į poraštę pridėkite šiek tiek teksto (užuomina: galite pakartotinai naudoti įprastas įvyniojimas ir trečdalis/du trečdaliai klasės.).
Pagerinkite vaizdo slinkimą: Pakeiskite „JavaScript“, kad pagyvintumėte vaizdo pokyčius (užuomina: pažiūrėkite į „jQuery“ išnyks ir Animacinis ).
Įgyvendinkite kelias citatas: Pakeiskite citatas, kad pakeistumėte vieną iš kelių skirtingų (užuomina: pradinio taško ieškokite vaizdo slinkties kodu).
Nustatykite serverį: Nustatykite serverį ir siųskite duomenis tarp tinklalapio ir serverio (patarimas: perskaitykite mūsų JSON ir „Python“ vadovą).
perduoti iš „Android“ į „xbox one“
Kai jaučiatės patogiai naudodami „JavaScript“ arba turite patirties su „Ruby“, galite išbandyti savo jėgas kurdami svetainę naudodami statinį svetainių kūrėją, pvz., „GatsbyJS“ ar „Jekyll“.
Dalintis Dalintis „Tweet“ Paštu Kaip pakeisti „Windows 10“ darbalaukio išvaizdąNorite sužinoti, kaip „Windows 10“ atrodyti geriau? Naudokite šiuos paprastus pritaikymus, kad padarytumėte „Windows 10“ savo.
Skaityti toliau Susijusios temos- Programavimas
- HTML
- Interneto svetainės dizainas
- CSS
Joe yra baigęs informatikos studijas Linkolno universitete, JK. Jis yra profesionalus programinės įrangos kūrėjas, o kai neskraido bepiločiais orlaiviais ir nerašo muzikos, jį dažnai galima rasti fotografuojant ar kuriant vaizdo įrašus.
Daugiau iš Joe CoburnPrenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
Norėdami užsiprenumeruoti, spustelėkite čia