Cum să creați un site web: pentru începători

Cum să creați un site web: pentru începători

Ați dorit întotdeauna să creați un site web? Poate că ați citit o parte din HTML-ul nostru ( înțelegerea HTML ) și tutoriale CSS, dar nu știu cum să folosiți aceste limbi într-un proiect mai mare.





Astăzi vă voi ghida prin procesul de creare a unui site web complet de la zero. Nu vă faceți griji dacă acest lucru pare o sarcină dificilă, vă voi ghida prin ea la fiecare pas.



Veți produce acest site folosind HTML, CSS și JavaScript cu o notă de jQuery (ghid pentru jQuery). Nu vei face nimic într-adevăr bleeding edge, deci acest cod ar trebui să funcționeze destul de bine în majoritatea browserelor moderne.





Dacă nu sunteți sigur de orice CSS, aruncați o privire la Ghid CSS la W3Schools.com .

Design-ul

Iată designul acestui site. Aruncați o privire la o imagine de înaltă rezoluție dacă doriți un aspect mai bun sau chiar mai bun, descărcați proiectul complet aici.



Am proiectat acest site web pentru o companie fictivă din Adobe Photoshop 2017. Dacă sunteți interesat, asigurați-vă că ați preluat fișierul .PSD din descărcarea pachetului. Iată ce obțineți în fișierul Photoshop:

În interiorul PSD, veți găsi toate straturile grupate, denumite și codificate în culori:



Veți avea nevoie de câteva fonturi instalate pentru ca lucrurile să arate corect. Primul este Font Awesome , folosit pentru toate pictogramele. Celelalte două fonturi sunt PT Serif și Myriad Pro (inclus cu Photoshop). Dacă nu sunteți sigur cum să instalați fonturi, citiți ghidul nostru.

Nu vă faceți griji dacă nu aveți Adobe Photoshop , nu aveți nevoie de el pentru a continua.



Codul inițial

Acum că designul este clar, să începem codarea! Creați un fișier nou în editorul dvs. de text preferat (îl folosesc Text sublim 3 ). Salvați acest lucru ca index.html . Poți numi asta orice îți place, motivul pentru care multe pagini sunt numite index se datorează modului în care funcționează serverele web. Configurația implicită pentru majoritatea serverelor este să servească pagina index.html dacă nu este specificată nicio pagină.

Dacă nu doriți să aflați detaliile, accesați codul complet din descărcare.

Iată codul de care aveți nevoie:





Noise Media


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





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


Aceasta face mai multe lucruri:

  • Definește HTML-ul minim necesar.
  • Definește titlul paginii „Noise Media”
  • Include jQuery găzduit pe CDN Google (ce este un CDN).
  • Include Font Awesome găzduit pe CDN Google.
  • Definește a stil eticheta pentru a scrie CSS în.
  • Definește a scenariu eticheta pentru a scrie JavaScript.

Salvați din nou fișierul și deschideți-l în browserul web. Probabil că nu veți observa prea multe și cu siguranță nu va arăta încă ca un site web.

Observați cum este titlul paginii Noise Media . Aceasta este definită de textul din titlu etichetă. Acest are a fi în interiorul cap Etichete.

cum se adaugă text pe tiktok

Antetul

Să creăm antetul. Iată cum arată:

Să începem cu acea bucățică cenușie din partea de sus. Este un gri deschis cu un ușor gri închis dedesubt. Iată un prim plan:

Adăugați acest cod HTML în corp etichetă în partea de sus:

În timp ce sunteți aici, haideți să descompunem acest lucru. A div este ca un container pentru a pune alte lucruri. Aceste „alte lucruri” pot fi mai multe containere, text, imagini și orice altceva. Există unele restricții cu privire la ceea ce poate intra în anumite etichete, dar divs-urile sunt lucruri destul de generice. Are un id de in capul barului . Acesta va fi folosit pentru a-l stiliza cu CSS și pentru a-l viza cu JavaScript, dacă este necesar. Asigurați-vă că aveți un singur element cu un anumit id - acestea ar trebui să fie unice. Dacă doriți ca mai multe elemente să aibă același nume, utilizați un clasă în schimb - pentru asta sunt concepute! Iată CSS-ul de care aveți nevoie pentru a-l stiliza (pus în partea de sus în interiorul stil etichetă):

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

Observați cum este utilizat semnul hash (#, hashtag, lira) înaintea numelui. Aceasta înseamnă că elementul este un ID. Dacă ați folosi o clasă a, ați folosi în schimb un punct (.). The html și corp etichetele au umplutura și marja setate la zero. Acest lucru previne orice probleme de spațiere nedorite.

Este timpul să treceți la sigla și bara de navigare. Înainte de a începe, aveți nevoie de un container pentru a pune acest conținut. Să facem din aceasta o clasă (astfel încât să o puteți reutiliza mai târziu) și, așa cum este nu un site web receptiv, faceți-l lățime de 900 de pixeli.

HTML:


CSS:

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

Poate fi greu să spui ce se întâmplă până nu termini codul, deci poate fi util să adaugi un fundal colorat (temporar) pentru a vedea ce se întâmplă:

background: red;

Este timpul să creați logo-ul acum. Font Awesome este necesar pentru pictograma în sine. Font Awesome este un set de icoane împachetate ca font vector - minunat! Codul inițial de mai sus a configurat deja Font Awesome, așa că totul este gata!

Adăugați acest cod HTML interior the normal-wrapper div:



CSS:

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

Nu vă faceți griji cu privire la faptul că celelalte fonturi nu se potrivesc cu designul - veți ordona acest lucru mai târziu. Dacă doriți să utilizați diferite pictograme, mergeți la Icoane minunate pentru fonturi pagină, apoi modificați fa-volume-down la numele pictogramei pe care doriți să o utilizați.

Trecând la bara de navigare, veți utiliza o listă neordonată ( UL ) pentru aceasta. Adăugați acest cod HTML după the logo-container (dar încă în interiorul normal-wrapper ):

The href este folosit pentru a face legătura cu alte pagini. Acest site web tutorial nu are alte pagini, dar puteți pune numele și calea fișierului (dacă este necesar) aici, de ex. recenzii.html . Asigurați-vă că ați introdus acest lucru în ambele ghilimele duble.

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

Acest CSS începe cu un lista neordonata . Apoi elimină punctele glonț folosind list-style-type: none; . Link-urile sunt distanțate puțin și au o culoare când treceți mouse-ul peste ele. Micul separator gri este o margine dreaptă pentru fiecare element, care este apoi eliminat pentru ultimul element folosind ultimul link clasă. Iată cum arată:

Tot ce a mai rămas pentru această secțiune este evidențierea culorii orizontale roșii. Adăugați acest cod HTML după normal-wrapper :

Iată CSS:

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

Aceasta este secțiunea de sus realizată. Iată cum arată - destul de similar cu designul nu?

Zona principală de conținut

Acum este timpul să vă deplasați pe zona principală de conținut - așa-numitul „deasupra pliantei”. Iată cum arată această parte:

Aceasta este o parte destul de simplă, un text din stânga cu o imagine în dreapta. Această zonă va fi vag împărțit în treimi, aproximând aproximativ Ratia de aur .

Veți avea nevoie de exemplul de imagine pentru această parte. Este inclus în descărcare. Această imagine are o lățime de 670 px și este de la Panasonic Lumix DMC-G80 / G85 Review.

Adăugați codul HTML după 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.

poți amesteca diferite mărci de berbec

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






Observați cum normal-wrapper elementul a revenit (asta este bucuria de a folosi cursurile). S-ar putea să vă întrebați de ce imaginea ( img ) eticheta nu se închide. Aceasta este o etichetă de închidere automată. Slash înainte ( /> ) indică acest lucru, deoarece nu are întotdeauna sens să fie necesar să închideți o etichetă.

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

Cel mai important atribut aici este box-sizing: border-box; . Acest lucru asigură că elementele vor avea întotdeauna 40% sau 60% lățime. Implicit (fără acest atribut) este lățimea specificată, plus orice umplutură, margini și margini. Clasa de imagine ( imagine prezentată ) are o lățimea maximă de 500 px . Dacă specificați doar o dimensiune (o lățime sau o înălțime) și o lăsați pe cealaltă necompletată, css va redimensiona imaginea, menținându-și raportul de aspect.

Zona de ofertă

Să creăm zona de cotare. Iată cum arată acest lucru:

Aceasta este o altă zonă simplă. Conține un fundal gri închis, cu text centrat pe alb.

Adăugați acest cod HTML după anteriorul normal-wrapper :



makeuseof is the best website ever


Joe Coburn



Și apoi acest 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;
}

Nu se întâmplă multe aici. Dimensionarea este principala ajustare necesară - dimensiunea fontului, spațierea și așa mai departe. Iată cum arată acum totul - începe să arate ca un site web!

Zona de pictograme

Să continuăm să apăsăm - este aproape terminat! Iată următoarea zonă care trebuie creată:

Această parte va utiliza mai multe clase. Cele trei pictograme sunt în mare parte aceleași, cu excepția conținutului, deci este logic să folosiți clase în loc de id-uri. Adăugați acest cod HTML după anteriorul citat-zona :






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.



Aceste trei icoane sunt, de asemenea Font-Awesome . Codul HTML folosește din nou fișierul normal-wrapper clasă. Iată 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;
}

Există câteva lucruri noi în CSS. Colțurile rotunjite sunt setate de raza chenarului: 200px; . Setarea acestei valori la fel ca lățimea are ca rezultat un cerc perfect. Puteți reduce acest lucru dacă preferați mai mult un pătrat cu colțuri rotunjite. Observați modul în care acțiunile de deplasare sunt aplicate divs-urilor - nu este limitat doar la linkuri. Iată cum arată această secțiune acum:

Ultimul lucru de făcut este subsolul! Acest lucru este foarte simplu, deoarece este doar o zonă gri, fără text. Adăugați acest cod HTML după zonele pictograme ' normal-wrapper :

Iată CSS:

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

Vezi - lucruri foarte simple.

Adăugați niște Pizzazz

Gata, codificarea s-a făcut! Puteți lăsa lucrurile așa cum sunt, este o pagină web terminată. Este posibil să fi observat totuși că nu arată exact ca și designul. Principalul motiv pentru aceasta este fontul folosit. Să rezolvăm asta.

Fontul folosit pentru majoritatea titlurilor este Myriad Pro . Aceasta vine cu Chirpici Creați Cloud, dar nu este disponibil ca font web. Fontul utilizat în prezent pe pagina web este Helvetica . Acest lucru pare ok, deci l-ați putea lăsa așa cum este, totuși PT Sans este disponibil ca font web. Fontul folosit pentru tot textul este PT Serif , care este disponibil ca font web.

Webfonts sunt un proces simplu. La fel ca încărcarea unui font nou pe computer, paginile web pot încărca fonturi la cerere. Una dintre cele mai bune modalități de a face acest lucru este prin Google Fonts .

Adăugați acest CSS pentru a comuta la fonturile mai bune:

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

Acum modificați elementele html și body pentru a utiliza noile fonturi:

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

Observați cum elementul h3 nu este inclus în listă - acest lucru va fi implicit PT-Serif in loc de PT-Sans .

Ca ultim pic de frumusețe, haideți să folosim câteva JavaScript pentru a derula trei imagini diferite. Vei avea nevoie Imagine_2 și Imagine_3 pentru această parte și din nou, este opțional. Site-ul este complet funcțional în acest moment, fără această caracteristică. Iată cum va arăta (accelerat):

Modificați codul HTML pentru a include trei imagini prezentate. Observați cum două dintre acestea au o clasă CSS de ascuns . Fiecărei imagini i sa dat un ID, astfel încât JavaScript să poată viza fiecare dintre ele independent.





Iată CSS-ul necesar pentru a ascunde imaginile suplimentare prezentate:

.hidden {
display: none;
}

Acum că HTML și CSS sunt îngrijite, să trecem la JavaScript. Este util să înțelegeți Modelul de obiect document (DOM) pentru această parte, dar nu este o cerință.

Găsi scenariu zona din partea de jos a paginii:


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

Adăugați următorul JavaScript în scenariu etichetă:

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

Aici se întâmplă câteva lucruri. Codul este conținut în interior $ (document). ready () . Aceasta înseamnă că va rula odată ce browserul dvs. a terminat de redat pagina - aceasta este o practică bună. The setInterval () funcția este utilizată pentru a apela changeImage () funcționează regulat la un interval predefinit în milisecunde (1000 milisecunde = 1 secundă). Aceasta este stocată în timp variabil. Puteți mări sau micșora acest lucru pentru a accelera sau a încetini derularea. În cele din urmă, o declarație de caz simplă este utilizată pentru a afișa diferite imagini și pentru a urmări imaginea care se afișează în prezent.

Coding Challenge

Asta e! Sperăm că ați învățat multe în timpul procesului. Dacă vă place o provocare și doriți să puneți la încercare noile abilități găsite, de ce nu încercați să implementați aceste modificări:

Adăugați un subsol: Adăugați un text în subsol (indiciu: ați putea reutiliza fișierul normal-wrapper și o treime / două treimi clase.).

Îmbunătățiți derularea imaginii: Modificați JavaScript pentru a anima modificările imaginii (indiciu: uitați-vă la jQuery fadein și animate ).

Implementați mai multe ghilimele: Modificați ghilimelele pentru a schimba una dintre cele mai diferite (sugestie: uitați-vă la codul de derulare a imaginii pentru un punct de plecare).

Configurați un server: Configurați un server și trimiteți date între pagina web și server (indiciu: citiți ghidul nostru pentru JSON și Python).

cum să închizi forțat pe ferestre

Odată ce vă simțiți confortabil folosind JavaScript sau dacă aveți experiență cu Ruby, puteți încerca să creați un site web cu un constructor de site-uri statice precum GatsbyJS sau Jekyll.

Acțiune Acțiune Tweet E-mail Cum să schimbați aspectul și senzația desktopului dvs. Windows 10

Vrei să știi cum să faci Windows 10 să arate mai bine? Folosiți aceste personalizări simple pentru a vă face Windows 10 propriul dvs.

Citiți în continuare Subiecte asemănătoare
  • Programare
  • HTML
  • Web design
  • CSS
Despre autor Joe Coburn(136 articole publicate)

Joe este absolvent de Informatică de la Universitatea Lincoln, Marea Britanie. Este un dezvoltator de software profesionist și, atunci când nu zboară cu drone sau nu scrie muzică, poate fi găsit adesea făcând fotografii sau producând videoclipuri.

Mai multe de la Joe Coburn

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona