Kā izveidot vietni: iesācējiem

Kā izveidot vietni: iesācējiem

Vai jūs vienmēr esat vēlējies izveidot vietni? Varbūt esat izlasījis kādu no mūsu HTML ( HTML izpratne ) un CSS apmācības, bet nezinu, kā šīs valodas izmantot lielākam projektam.





Šodien es jūs vadīšu, veidojot pilnīgu vietni no nulles. Neuztraucieties, ja tas šķiet grūts uzdevums, es jums to darīšu ik uz soļa.



Jūs izveidosit šo vietni, izmantojot HTML, CSS un JavaScript, pieskaroties jQuery (jQuery ceļvedis). Jūs neko nedarīsit tiešām asiņošana, tāpēc šim kodam vajadzētu darboties diezgan labi lielākajā daļā mūsdienu pārlūkprogrammu.





Ja neesat pārliecināts par kādu CSS, apskatiet CSS ceļvedis plkst W3Schools.com .

Dizains

Šeit ir šīs vietnes dizains. Apskatiet augstas izšķirtspējas attēlu, ja vēlaties labāku izskatu vai pat labāku, lejupielādējiet visu projektu šeit.



Es izveidoju šo vietni izdomātam uzņēmumam Adobe Photoshop 2017. Ja jūs interesē, noteikti paņemiet .PSD failu no paketes lejupielādes. Lūk, ko jūs iegūstat Photoshop failā:

PSD iekšpusē visi slāņi ir sagrupēti, nosaukti un krāsoti:



Lai lietas izskatītos pareizi, jums būs jāinstalē daži fonti. Pirmais ir Fonts Awesome , izmanto visām ikonām. Pārējie divi fonti ir PT Serif un Myriad Pro (iekļauts Photoshop). Ja neesat pārliecināts, kā instalēt fontus, izlasiet mūsu ceļvedi.

Neuztraucieties, ja jums nav Adobe Photoshop , jums nav nepieciešams, lai turpinātu.



Sākotnējais kods

Tagad, kad dizains ir skaidrs, sāksim kodēt! Izveidojiet jaunu failu savā iecienītākajā teksta redaktorā (es izmantoju Cildens teksts 3 ). Saglabājiet šo kā index.html . To var saukt par visu, kas jums patīk, tāpēc daudzas lapas tiek sauktas par indeksu, pateicoties tīmekļa serveru darbam. Lielākajai daļai serveru noklusējuma konfigurācija ir rādīt lapu index.html, ja lapa nav norādīta.

Ja nevēlaties uzzināt sīkāku informāciju, iegūstiet pilnu lejupielādes kodu.

Šeit ir nepieciešams kods:





Noise Media


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





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


Tas veic vairākas lietas:

  • Nosaka minimālo nepieciešamo HTML.
  • Nosaka lapas nosaukumu “Noise Media”
  • Ietver jQuery, kas tiek mitināts Google CDN (kas ir CDN).
  • Ietver Font Awesome, kas tiek mitināts Google CDN.
  • Definē a stils tagu, kurā ierakstīt savu CSS.
  • Definē a skripts tagu, kurā ierakstīt savu JavaScript.

Saglabājiet failu vēlreiz un atveriet to savā tīmekļa pārlūkprogrammā. Jūs, iespējams, daudz nepamanīsit, un tas noteikti vēl neizskatīsies kā vietne.

Pievērsiet uzmanību lapas nosaukumam Trokšņa mediji . To nosaka teksts titulu tagu. Šī ir būt iekšā galvu tagus.

atbrīvoties no Windows 10 bloatware

Virsraksts

Izveidosim galveni. Lūk, kā tas izskatās:

Sāksim ar to mazo pelēko gabaliņu augšpusē. Tas ir gaiši pelēks ar nedaudz tumši pelēku krāsu apakšā. Šeit ir tuvplāns:

Pievienojiet šo HTML ķermenis atzīme augšpusē:

Kamēr jūs esat šeit, sadalīsim šo. A div ir kā konteiners, kurā ievietot citas lietas. Šī “cita lieta” var būt vairāk konteineru, teksts, attēli un jebkas cits. Ir daži ierobežojumi tam, ko var iekļaut noteiktos tagos, taču divs ir diezgan vispārīgas lietas. Tam ir id no augšējā josla . Tas tiks izmantots, lai veidotu to ar CSS, un, ja nepieciešams, atlasiet mērķauditoriju, izmantojot JavaScript. Pārliecinieties, ka jums ir tikai viens elements ar noteiktu ID - tiem jābūt unikāliem. Ja vēlaties, lai vairākiem elementiem būtu vienāds nosaukums, izmantojiet a klase tā vietā - tās ir paredzētas! Šeit ir CSS, kas jums jāveido (ievietojiet augšpusē jūsu iekšpusē stils atzīme):

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

Ievērojiet, kā pirms nosaukuma tiek izmantota jaucējzīme (#, hashtag, mārciņas zīme). Tas nozīmē, ka elements ir ID. Ja izmantojāt klasi, tā vietā izmantojiet punktu (.). The html un ķermenis tagu polsterējums un piemales ir iestatītas uz nulli. Tas novērš nevēlamas atstarpes problēmas.

Ir pienācis laiks pāriet uz logotipu un navigācijas joslu. Pirms sākat, jums ir nepieciešams konteiners, kurā ievietot šo saturu. Padarīsim to par klasi (lai vēlāk varētu to izmantot atkārtoti), un tā tas ir nē atsaucīga vietne, padariet to 900 pikseļu platu.

HTML:


CSS:

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

Var būt grūti pateikt, kas notiek, līdz esat pabeidzis kodu, tāpēc var būt noderīgi pievienot (pagaidu) krāsainu fonu, lai redzētu, kas notiek:

background: red;

Ir pienācis laiks izveidot logotipu. Fonts Awesome ir nepieciešama pašai ikonai. Fonts Awesome ir ikonu kopums, kas iepakots kā vektora fonts - satriecoši! Sākotnējais kods jau ir iestatījis lielisku fontu, tāpēc viss ir gatavs lietošanai!

Pievienojiet šo HTML iekšā un normāls ietinējs div:



CSS:

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

Neuztraucieties par to, ka citi fonti neatbilst dizainam - vēlāk jūs to sakārtosit. Ja vēlaties izmantot dažādas ikonas, dodieties uz Fontu Awesome ikonas lapu un pēc tam mainiet fa-skaļuma samazināšana uz tās ikonas nosaukuma, kuru vēlaties izmantot.

Pārejot uz navigācijas joslu, jūs izmantosit nesakārtotu sarakstu ( un ) priekš šī. Pievienojiet šo HTML pēc un logo-konteiners (bet tomēr iekšpusē normāls ietinējs ):

The href izmanto, lai izveidotu saiti uz citām lapām. Šajā apmācības vietnē nav citu lapu, taču šeit varat ievietot nosaukumu un faila ceļu (ja nepieciešams), piem. reviews.html . Pārliecinieties, ka esat to ievietojis abās pēdiņās.

Šeit ir 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;
}

Šis CSS sākas ar nesakārtots saraksts . Pēc tam tas noņem aizzīmes, izmantojot list-style-type: nav; . Saites ir nedaudz novietotas viena no otras un tām tiek piešķirta krāsa, virzot peles kursoru virs tām. Mazais pelēkais dalītājs ir labā robeža uz katra elementa, kas pēc tam tiek noņemts pēdējam elementam, izmantojot pēdējā saite klase. Lūk, kā tas izskatās:

Šai sadaļai ir palicis tikai sarkanās horizontālās krāsas izcēlums. Pievienojiet šo HTML pēc normāls ietinējs :

Un šeit ir CSS:

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

Tā ir pabeigta augšējā sadaļa. Lūk, kā tas izskatās - diezgan līdzīgs dizainam, vai ne?

Galvenā satura joma

Tagad ir pienācis laiks pāriet uz galveno satura apgabalu-tā ​​saukto “virs pirmā ekrāna”. Lūk, kā izskatās šī daļa:

Šī ir diezgan vienkārša daļa, teksts pa kreisi un attēls labajā pusē. Šī joma būs brīvi sadalīts trešdaļās, aptuveni aptuveni Zelta attiecība .

Šai daļai jums būs nepieciešams attēla paraugs. Tas ir iekļauts lejupielādē. Šis attēls ir 670 pikseļu plats un ir no mūsu Panasonic Lumix DMC-G80/G85 pārskata.

Pievienojiet HTML pēc un top-color-splash elements:



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.

izveidojiet sērijveida failu, lai palaistu komandu

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






Ievērojiet, kā normāls ietinējs elements ir atgriezies (tas ir klases izmantošanas prieks). Jums varētu rasties jautājums, kāpēc attēls ( img ) atzīme netiek aizvērta. Šis ir pašslēgšanās tags. Slīpsvītra uz priekšu ( /> ) norāda uz to, jo ne vienmēr ir jēga slēgt tagu.

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

Vissvarīgākais atribūts šeit ir kastes izmēri: border-box; . Tas nodrošina, ka elementu platums vienmēr būs 40% vai 60%. Noklusējums (bez šī atribūta) ir jūsu norādītais platums, kā arī jebkurš polsterējums, piemales un apmales. Attēlu klase ( Featured-attēls ) ir maksimālais platums no 500 pikseļi . Ja norādāt tikai vienu dimensiju (platumu vai augstumu) un otru atstājat tukšu, css mainīs attēla izmēru, saglabājot tā malu attiecību.

Citāta apgabals

Izveidosim citātu apgabalu. Lūk, kā tas izskatās:

Šī ir vēl viena vienkārša joma. Tajā ir tumši pelēks fons ar baltu tekstu centrā.

Pievienojiet šo HTML pēc Iepriekšējais normāls ietinējs :



makeuseof is the best website ever


Joe Coburn



Un tad š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;
}

Šeit nekas daudz nenotiek. Lielums ir galvenā nepieciešamā korekcija - fonta lielums, atstarpes utt. Lūk, kā viss izskatās tagad - tas sāk izskatīties pēc mājas lapas!

Ikonu apgabals

Turpināsim spiedienu - tas ir gandrīz pabeigts! Tālāk ir jāizveido joma:

Šajā daļā tiks izmantotas vairākas klases. Trīs ikonas lielākoties ir vienādas, izņemot saturu, tāpēc ir lietderīgi izmantot klases, nevis ID. Pievienojiet šo HTML pēc Iepriekšējais citātu apgabals :






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.



Šīs ir arī trīs ikonas Fonts-satriecošs . HTML atkal izmanto normāls ietinējs klase. Šeit ir 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 notiek dažas jaunas lietas. Noapaļotos stūrus nosaka robežas rādiuss: 200 pikseļi; . Iestatot šo vērtību tāpat kā platumu, tiek iegūts perfekts aplis. To var samazināt, ja vēlaties vairāk kvadrāta ar noapaļotiem stūriem. Ievērojiet, kā kursori tiek piemēroti diviem - tas neaprobežojas tikai ar saitēm. Šī sadaļa tagad izskatās šādi:

Pēdējā lieta, kas jādara, ir kājene! Tas ir patiešām vienkārši, jo tas ir tikai pelēks laukums bez teksta. Pievienojiet šo HTML pēc ikonu apgabaliem ” normāls ietinējs :

Šeit ir CSS:

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

Redzi - patiešām vienkāršas lietas.

Pievienojiet nedaudz Pizzazz

Tas ir viss, kodēšana ir pabeigta! Jūs varat pilnīgi atstāt lietas tādas, kādas tās ir, tā ir gatava tīmekļa lapa. Jūs, iespējams, pamanījāt, ka tas neizskatās tieši tā tāpat kā dizains. Galvenais iemesls tam ir izmantotie fonti. Sakārtosim to.

Lielākajai daļai virsrakstu izmantotais fonts ir Myriad Pro . Tas nāk ar Adobe Izveidojiet mākoni, taču tas nav pieejams kā tīmekļa fonts. Šobrīd tīmekļa lapā izmantotais fonts ir Helvetica . Tas izskatās labi, tāpēc jūs varat atstāt to tādu, kāds tas ir PT Sans ir pieejams kā tīmekļa fonts. Visam tekstam izmantotais fonts ir PT Serif , kas ir pieejams kā tīmekļa fonts.

Tīmekļa fonti ir vienkāršs process. Tāpat kā jauna fonta ielāde datorā, arī tīmekļa lapas pēc nepieciešamības var ielādēt fontus. Viens no labākajiem veidiem, kā to izdarīt, ir caur Google fonti .

Pievienojiet šo CSS, lai pārslēgtos uz labākajiem fontiem:

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

Tagad modificējiet savu html un pamattekstu, lai izmantotu jaunos fontus:

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

Ievērojiet, kā h3 elements nav iekļauts sarakstā - tas pēc noklusējuma būs PT-Serif tā vietā PT-Sans .

Visbeidzot, glītumā, izmantosim JavaScript, lai ritinātu trīs dažādus piedāvātos attēlus. Jums būs nepieciešams Attēls_2 un Attēls_3 šai daļai un atkal tas nav obligāti. Vietne šajā brīdī ir pilnīgi funkcionāla bez šīs funkcijas. Lūk, kā tas izskatīsies (paātrināts):

Pārveidojiet savu HTML, lai iekļautu trīs piedāvātos attēlus. Ievērojiet, kā diviem no tiem ir CSS klase paslēptas . Katram attēlam ir piešķirts ID, lai JavaScript varētu mērķēt uz katru no tiem neatkarīgi.





Šeit ir CSS, kas nepieciešams, lai paslēptu papildu piedāvātos attēlus:

.hidden {
display: none;
}

Tagad, kad ir parūpējies par HTML un CSS, pāriesim uz JavaScript. Šai daļai ir lietderīgi saprast dokumenta objekta modeli (DOM), taču tā nav obligāta prasība.

Atrodi skripts apgabals lapas apakšā:


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

Iekšpusē pievienojiet šādu JavaScript skripts atzīme:

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

Šeit notiek dažas lietas. Kods ir ietverts iekšpusē $ (dokuments) .ready () . Tas nozīmē, ka tas tiks palaists, tiklīdz jūsu pārlūkprogramma būs pabeigusi lapas atveidošanu - tā ir laba prakse. The setInterval () funkcija tiek izmantota, lai izsauktu changeImage () darbojas regulāri ar iepriekš noteiktu intervālu milisekundēs (1000 milisekundes = 1 sekunde). Tas tiek saglabāts mapē laiks mainīgais. Varat to palielināt vai samazināt, lai paātrinātu vai palēninātu ritināšanu. Visbeidzot, vienkāršs gadījuma paziņojums tiek izmantots, lai parādītu dažādus attēlus un izsekotu pašreiz parādītajam attēlam.

Kodēšanas izaicinājums

Tieši tā! Cerams, ka procesa laikā jūs daudz uzzinājāt. Ja vēlaties izaicinājumu un vēlaties pārbaudīt savas jaunās prasmes, kāpēc nemēģiniet ieviest šīs izmaiņas:

Pievienot kājeni: Pievienojiet kājenē tekstu (mājiens: jūs varētu atkārtoti izmantot normāls ietinējs un viena trešdaļa/divas trešdaļas klases.).

Uzlabojiet attēla ritināšanu: Modificējiet JavaScript, lai animētu attēla izmaiņas (mājiens: apskatiet jQuery izbalēt un Animēts ).

Īstenojiet vairākus citātus: Mainiet citātus, lai pārslēgtos starp vienu no vairākiem (mājiens: sākuma punktu skatiet attēla ritināšanas kodā).

Iestatiet serveri: Iestatiet serveri un nosūtiet datus starp tīmekļa lapu un serveri (mājiens: izlasiet mūsu JSON un Python rokasgrāmatu).

bezmaksas runas teksta programmatūra operētājsistēmai Windows 10

Kad esat ērti lietojis JavaScript vai ja jums ir pieredze darbā ar Ruby, varat izmēģināt savus spēkus, veidojot vietni, izmantojot tādu statisku vietņu veidotāju kā GatsbyJS vai Jekyll.

Kopīgot Kopīgot Čivināt E -pasts Kā mainīt Windows 10 darbvirsmas izskatu

Vai vēlaties uzzināt, kā uzlabot Windows 10 izskatu? Izmantojiet šos vienkāršos pielāgojumus, lai padarītu Windows 10 savu.

Lasīt Tālāk Saistītās tēmas
  • Programmēšana
  • HTML
  • Web dizains
  • CSS
Par autoru Džo Koburns(Publicēti 136 raksti)

Džo ir absolvējis datorzinātnes Linkolnas universitātē, Lielbritānijā. Viņš ir profesionāls programmatūras izstrādātājs, un, kad viņš nelido ar droniem un neraksta mūziku, viņu bieži var atrast, fotografējot vai veidojot video.

Vairāk no Džo Kobērna

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu