Come creare un sito Web: per principianti

Come creare un sito Web: per principianti

Hai sempre desiderato realizzare un sito web? Forse hai letto alcuni dei nostri HTML ( comprensione dell'HTML ) e tutorial CSS , ma non so come utilizzare quei linguaggi su un progetto più grande.





Oggi ti guiderò attraverso il processo di creazione di un sito Web completo da zero. Non preoccuparti se questo sembra un compito difficile, ti guiderò in ogni fase del processo.



Produrrai questo sito Web utilizzando HTML, CSS e JavaScript con un tocco di jQuery (guida a jQuery). Non farai niente veramente all'avanguardia, quindi questo codice dovrebbe funzionare abbastanza bene nella maggior parte dei browser moderni.





Se non sei sicuro di alcun CSS, dai un'occhiata al Guida CSS a W3Schools.com .

Il design

Ecco il design di questo sito web. Dai un'occhiata a un'immagine ad alta risoluzione se vuoi un aspetto migliore, o anche meglio, scarica il progetto completo qui.



Ho progettato questo sito Web per un'azienda fittizia in Adobe Photoshop 2017. Se sei interessato, assicurati di prendere il file .PSD dal download del pacchetto. Ecco cosa ottieni nel file di Photoshop:

All'interno del PSD, troverai tutti i livelli raggruppati, denominati e codificati per colore:



Avrai bisogno di alcuni caratteri installati affinché le cose sembrino corrette. Il primo è Carattere fantastico , utilizzato per tutte le icone. Gli altri due caratteri sono PT Serif e Myriad Pro (incluso con Photoshop). Se non sei sicuro di come installare i caratteri, leggi la nostra guida.

Non preoccuparti se non ce l'hai Adobe Photoshop , non è necessario per procedere.



Codice iniziale

Ora che il design è chiaro, iniziamo a programmare! Crea un nuovo file nel tuo editor di testo preferito (sto usando Testo sublime 3 ). Salva questo come index.html . Puoi chiamarlo come preferisci, il motivo per cui molte pagine sono chiamate index è dovuto al modo in cui funzionano i server web. La configurazione predefinita per la maggior parte dei server è di servire la pagina index.html se non è specificata alcuna pagina.

Se non vuoi conoscere i dettagli, prendi il codice completo dal download.

Ecco il codice che ti serve:





Noise Media


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





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


Questo fa diverse cose:

  • Definisce il codice HTML minimo richiesto.
  • Definisce un titolo di pagina di 'Noise Media'
  • Include jQuery ospitato su Google CDN ( cos'è un CDN ).
  • Include Font Awesome ospitato su Google CDN.
  • Definisce a stile tag in cui scrivere il tuo CSS.
  • Definisce a sceneggiatura tag per scrivere il tuo JavaScript.

Salva nuovamente il file e aprilo nel browser web. Probabilmente non noterai molto e di certo non sembrerà ancora un sito web.

Nota com'è il titolo della pagina Media del rumore . Questo è definito dal testo all'interno del titolo etichetta. Questo ha essere dentro testa tag.

come collegare un microfono a un computer

L'intestazione

Creiamo l'intestazione. Ecco come appare:

Cominciamo con quel piccolo pezzo grigio in alto. È un grigio chiaro con un leggero grigio scuro sotto. Ecco un primo piano:

Aggiungi questo HTML all'interno di corpo etichetta in alto:

Già che sei qui, scomponiamolo. UN div è come un contenitore in cui mettere altre cose. Queste 'altre cose' possono essere più contenitori, testo, immagini, qualsiasi cosa. Ci sono alcune restrizioni su cosa può andare in certi tag, ma i div sono cose abbastanza generiche. Ha un ID di barra superiore . Questo sarà usato per modellarlo con CSS e indirizzarlo con JavaScript se necessario. Assicurati di avere un solo elemento con un ID particolare: dovrebbero essere univoci. Se vuoi che più elementi abbiano lo stesso nome, usa a classe invece - è quello per cui sono progettati! Ecco il CSS di cui hai bisogno per modellarlo (metti in alto all'interno del tuo stile etichetta):

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

Notare come viene utilizzato il cancelletto (#, hashtag, cancelletto) prima del nome. Ciò significa che l'elemento è un ID. Se stavi usando una classe, useresti invece un punto (.). Il html e corpo i tag hanno il padding e il margine impostati su zero. In questo modo si evitano problemi di spaziatura indesiderati.

È ora di passare al logo e alla barra di navigazione. Prima di iniziare, hai bisogno di un contenitore in cui inserire questo contenuto. Facciamolo diventare una classe (così puoi riutilizzarlo in seguito), e poiché questo è non un sito web reattivo, rendilo largo 900 pixel.

HTML:


CSS:

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

Può essere difficile dire cosa sta succedendo fino a quando non finisci il codice, quindi può essere utile aggiungere uno sfondo colorato (temporaneo) per vedere cosa sta succedendo:

background: red;

È ora di creare il logo ora. Carattere fantastico è necessario per l'icona stessa. Font Awesome è un set di icone confezionate come font vettoriali: fantastico! Il codice iniziale sopra ha già configurato Font Awesome, quindi è tutto pronto!

Aggiungi questo HTML dentro il normale-involucro divisione:



CSS:

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

Non preoccuparti per gli altri caratteri che non corrispondono al design: lo sistemerai in seguito. Se desideri utilizzare icone diverse, vai su Font fantastiche icone pagina e poi cambia fa-volume-giù al nome dell'icona che si desidera utilizzare.

Passando alla barra di navigazione, utilizzerai un elenco non ordinato ( il ) per questo. Aggiungi questo HTML dopo il logo-contenitore (ma ancora dentro il normale-involucro ):

Il href viene utilizzato per collegarsi ad altre pagine. Questo sito Web di tutorial non ha altre pagine, ma puoi inserire il nome e il percorso del file (se richiesto) qui, ad es. recensioni.html . Assicurati di inserire questo all'interno di entrambe le doppie virgolette.

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

Questo CSS inizia con an lista non ordinata . Quindi rimuove i punti elenco usando list-style-type: nessuno; . I collegamenti sono leggermente distanziati e ricevono un colore quando si passa il mouse su di essi. Il piccolo divisore grigio è un bordo destro su ciascun elemento, che viene quindi rimosso per l'ultimo elemento utilizzando il tasto ultimo-link classe. Ecco come appare:

Tutto ciò che resta per questa sezione è l'evidenziazione del colore orizzontale rosso. Aggiungi questo HTML dopo il normale-involucro :

Ed ecco il CSS:

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

Questa è la sezione superiore fatta. Ecco come appare: abbastanza simile al design giusto?

Area principale dei contenuti

Ora è il momento di passare all'area del contenuto principale, il cosiddetto 'above the fold'. Ecco come appare questa parte:

Questa è una parte piuttosto semplice, del testo a sinistra con un'immagine a destra. Questa zona sarà liberamente diviso in terzi, approssimando approssimativamente il Rapporto aureo .

Avrai bisogno dell'immagine di esempio per questa parte. È incluso nel download. Questa immagine è larga 670 px ed è tratta dalla nostra recensione della Panasonic Lumix DMC-G80/G85.

Aggiungi l'HTML dopo il top-color-splash elemento:



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.

come misurare l'area su google maps

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






Notare come normale-involucro element è tornato (questa è la gioia di usare le classi). Forse ti starai chiedendo perché l'immagine ( img ) il tag non si chiude. Questo è un tag a chiusura automatica. La barra in avanti ( /> ) lo indica, poiché non sempre ha senso dover chiudere un tag.

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

L'attributo più importante qui è box-size: border-box; . Ciò garantisce che gli elementi avranno sempre una larghezza del 40% o del 60%. L'impostazione predefinita (senza questo attributo) è la larghezza specificata più eventuali padding, margini e bordi. La classe di immagine ( immagine-in evidenza ) ha un larghezza massima di 500 px . Se specifichi solo una dimensione (una larghezza o un'altezza) e lasci l'altra vuota, css ridimensionerà l'immagine mantenendo le sue proporzioni.

Area Preventivo

Creiamo l'area del preventivo. Ecco come appare:

Questa è un'altra area semplice. Contiene uno sfondo grigio scuro, con testo centrato in bianco.

Aggiungi questo HTML dopo il precedente normale-involucro :



makeuseof is the best website ever


Joe Coburn



E poi questo 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;
}

Non c'è molto da fare qui. Il dimensionamento è la regolazione principale necessaria: dimensione del carattere, spaziatura e così via. Ecco come appare ora l'intera faccenda: inizia a sembrare un sito web!

Area delle icone

Continuiamo ad andare avanti: è quasi finito! Ecco la prossima area che deve essere creata:

Questa parte utilizzerà diverse classi. Le tre icone sono per lo più le stesse, ad eccezione del contenuto, quindi ha senso usare le classi invece degli id. Aggiungi questo HTML dopo il precedente area-citazione :






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.



Queste tre icone sono anche Font-Fantastico . L'HTML utilizza ancora una volta il normale-involucro classe. Ecco il 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;
}

Ci sono alcune novità in corso nel CSS. Gli angoli arrotondati vengono impostati da bordo-raggio: 200px; . Impostando questo valore uguale alla larghezza si ottiene un cerchio perfetto. Puoi ridurlo se preferisci un quadrato con gli angoli arrotondati. Nota come le azioni al passaggio del mouse vengono applicate ai div: non è limitato solo ai collegamenti. Ecco come appare ora questa sezione:

L'ultima cosa da fare è il piè di pagina! Questo è davvero semplice, in quanto è solo un'area grigia senza testo. Aggiungi questo HTML dopo le aree delle icone normale-involucro :

Ecco il CSS:

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

Vedi - cose davvero semplici.

Aggiungi un po' di pizzazz

Ecco fatto, la codifica è fatta! Puoi assolutamente lasciare le cose come stanno, è una pagina web finita. Potresti aver notato, tuttavia, che non sembra Esattamente come il disegno. La ragione principale di ciò sono i caratteri utilizzati. Risolviamolo.

Il carattere utilizzato per la maggior parte dei titoli è Miriade di professionisti . Questo viene fornito con Adobe Crea Cloud, ma non è disponibile come carattere web. Il carattere attualmente utilizzato nella pagina Web è Helvetica . Questo sembra ok, quindi puoi lasciarlo così com'è, comunque PT Sans è disponibile come carattere web. Il carattere utilizzato per tutto il testo è PT Serif , disponibile come carattere web.

I caratteri web sono un processo semplice. Proprio come caricare un nuovo font sul tuo computer, le pagine web possono caricare i font su richiesta. Uno dei modi migliori per farlo è attraverso Google Fonts .

Aggiungi questo CSS per passare ai caratteri migliori:

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

Ora modifica il tuo html e gli elementi del corpo per utilizzare i nuovi caratteri:

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

Nota come l'elemento h3 non è incluso nell'elenco -- questo sarà di default PT-Serif invece di PT-Sans .

Come ultimo tocco di bellezza, usiamo un po' di JavaScript per scorrere tre diverse immagini in primo piano. Avrai bisogno Immagine_2 e Immagine_3 per questa parte, e ancora, è facoltativo. Il sito web è completamente funzionante a questo punto senza questa funzione. Ecco come apparirà (accelerato):

Modifica il tuo codice HTML per includere tre immagini in primo piano. Nota come due di questi hanno una classe CSS di nascosto . A ogni immagine è stato assegnato un ID in modo che JavaScript possa indirizzare ciascuna di esse in modo indipendente.





Ecco il CSS necessario per nascondere le immagini extra in primo piano:

.hidden {
display: none;
}

Ora che ci siamo occupati di HTML e CSS, passiamo a JavaScript. È utile comprendere il Document Object Model (DOM) per questa parte, ma non è un requisito.

Trovare la sceneggiatura area in fondo alla pagina:


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

Aggiungi il seguente JavaScript all'interno di sceneggiatura etichetta:

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

Ci sono alcune cose che stanno accadendo qui. Il codice è contenuto all'interno $(documento).pronto() . Ciò significa che verrà eseguito una volta che il browser ha terminato il rendering della pagina: questa è una buona pratica. Il setIntervallo() la funzione viene utilizzata per chiamare il cambiaImmagine () funzionare regolarmente a un intervallo predefinito in millisecondi (1000 millisecondi = 1 secondo). Questo è memorizzato in tempo variabile. Puoi aumentarlo o diminuirlo per accelerare o rallentare lo scorrimento. Infine, viene utilizzata una semplice istruzione case per mostrare immagini diverse e tenere traccia dell'immagine attualmente visualizzata.

Sfida di programmazione

Questo è tutto! Spero che tu abbia imparato molto durante il processo. Se hai voglia di una sfida e vuoi mettere alla prova le tue nuove abilità trovate, perché non provare a implementare queste modifiche:

Aggiungi un piè di pagina: Aggiungi del testo nel piè di pagina (suggerimento: potresti riutilizzare il normale-involucro e un terzo/due terzi classi.).

Migliora lo scorrimento delle immagini: Modifica JavaScript per animare le modifiche all'immagine (suggerimento: guarda jQuery dissolvenza e Animato ).

Implementa più preventivi: Modifica le virgolette per cambiare tra una delle tante diverse (suggerimento: guarda il codice di scorrimento dell'immagine per un punto di partenza).

Configura un server: Imposta un server e invia dati tra la pagina web e il server (suggerimento: leggi la nostra guida a JSON e Python ).

cosa significa karma su reddit?

Una volta che ti senti a tuo agio con JavaScript o se hai esperienza con Ruby, puoi provare a creare un sito Web con un costruttore di siti Web statico come GatsbyJS o Jekyll.

Condividere Condividere Tweet E-mail Come cambiare l'aspetto del desktop di Windows 10

Vuoi sapere come migliorare l'aspetto di Windows 10? Usa queste semplici personalizzazioni per personalizzare Windows 10.

Leggi Avanti Argomenti correlati
  • Programmazione
  • HTML
  • Web design
  • CSS
Circa l'autore Joe Coburn(136 articoli pubblicati)

Joe si è laureato in Informatica presso l'Università di Lincoln, nel Regno Unito. È uno sviluppatore di software professionista e quando non pilota droni o scrive musica, lo si può trovare spesso a scattare foto o produrre video.

Altro da Joe Coburn

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti