Programmazione

Come creare un sito Web per principianti

Come creare un sito Web per principianti / Programmazione

Hai sempre desiderato creare un sito web? Forse hai letto alcuni dei nostri HTML (comprensione di HTML 5 passaggi per capire il codice HTML di base 5 passaggi per comprendere il codice HTML di base Leggi di più) e tutorial CSS 5 Baby Steps per imparare CSS e diventare un Kick-Ass CSS Sorcerer 5 Baby Steps to Imparare i CSS e diventare un Kick-Ass CSS Sorcerer CSS è il singolo cambiamento più importante che le pagine web hanno visto nell'ultimo decennio, e ha spianato la strada alla separazione tra stile e contenuto. Nel modo moderno, XHTML definisce la struttura semantica ... Leggi di più, ma non sai come usare quelle lingue su un progetto più grande.

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

Produrre questo sito Web utilizzando HTML, CSS e JavaScript con un tocco di jQuery (guida a jQuery Una guida di base a JQuery per programmatori Javascript Una guida di base a JQuery per programmatori Javascript Se sei un programmatore Javascript, questa guida a JQuery aiuterà inizi a scrivere codice come un ninja Leggi di più). Non farai nulla veramente bleeding edge, quindi questo codice dovrebbe funzionare abbastanza bene nella maggior parte dei browser moderni.

Se non sei sicuro di alcun CSS, dai un'occhiata alla guida CSS su W3Schools.com.

Il design

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

Ho progettato questo sito Web per una società fittizia in Adobe Photoshop CC 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, nominati e codificati a colori:

Avrai bisogno di alcuni font installati per far sembrare le cose corrette. Il primo è Font Awesome, 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 font, leggi la nostra guida Come installare i font su Windows, Mac e Linux Come installare i font su Windows, Mac e Linux Ulteriori informazioni .

Non preoccuparti se non hai Photoshop, non ne hai bisogno per procedere.

Codice iniziale

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

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

Ecco il codice che ti serve:

    Media rumore

Questo fa molte cose:

  • Definisce il minimo HTML richiesto.
  • Definisce un titolo di pagina di “Media rumore”
  • Include jQuery ospitato su Google CDN (cos'è un CDN Cosa sono i CDN e Perché lo spazio di archiviazione non è più un problema Quali sono i CDN e Perché lo spazio di archiviazione non è più un problema I CDN rendono Internet veloce e siti Web accessibili anche quando scalate a milioni di utenti. la larghezza di banda costa denaro, quelli di noi con contratti limitati lo sanno fin troppo bene, non solo tu ... Read More).
  • Include Font Awesome ospitato su Google CDN.
  • Definisce a stile tag per scrivere il tuo CSS in.
  • Definisce a copione tag per scrivere il tuo JavaScript in.

Salvare nuovamente il file e aprirlo nel browser Web. Probabilmente non noterai molto, e sicuramente non sarà ancora come un sito web.

Si noti come è il titolo della pagina Media rumore. Questo è definito dal testo all'interno del titolo etichetta. Questo ha essere dentro il capo tag.

L'intestazione

Creiamo l'intestazione. Ecco come appare:

Iniziamo con quel piccolo bit grigio in alto. È un grigio chiaro con un leggero grigio scuro al di sotto. Ecco un primo piano:

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

Mentre sei qui, rompiamolo. UN div è come un contenitore per inserire altre cose. Questo “altre cose” possono essere più contenitori, testo, immagini, qualsiasi cosa veramente. Ci sono alcune restrizioni su cosa può andare in determinati tag, ma i div sono cose abbastanza generiche. Ha un id di top-bar. Questo sarà usato per modellarlo con CSS, e targetizzarlo con JavaScript, se necessario. Assicurati di avere un solo elemento con un particolare ID - dovrebbero essere unici. Se vuoi che più elementi abbiano lo stesso nome, usa a classe invece - è per cosa sono progettati! Ecco il CSS che ti serve per modellarlo (mettilo in cima al tuo stile etichetta):

html, body margin: 0; padding: 0; font-family: 'Helvetica', 'Arial'; / * caratteri iniziali * / # top-bar larghezza: 100%; sfondo: # F1F1F1; / * grigio chiaro * / border-bottom: 1px solid # D4D4D4; / * grigio scuro "sottolineatura" * / altezza: 25px;

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

È ora di passare al logo e alla barra di navigazione. Prima di iniziare, hai bisogno di un contenitore per inserire questo contenuto. Facciamo di questo una classe (in modo che tu possa riutilizzarla in seguito), e poiché questo è non un sito web reattivo, rendilo largo 900 pixel.

HTML:

CSS:

.normal-wrapper width: 900px; margine: 0 auto; imbottitura: 15px 40px; sfondo: rosso; overflow: auto;

Può essere difficile dire cosa succede fino alla fine del codice, quindi può essere utile aggiungere uno sfondo (temporaneo) colorato per vedere cosa sta succedendo:

sfondo: rosso;

È ora di creare il logo ora. Font Awesome è necessario per l'icona stessa. Font Awesome è un set di icone confezionato come un font vettoriale: fantastico! Il codice iniziale sopra già impostato Font Awesome, quindi è tutto pronto per andare!

Aggiungi questo HTML dentro il normale-wrapper div:

  
Media rumore

CSS:

.logo-icon color: # 000000; font-size: 60pt; fluttuare: a sinistra;  h1 float: left; margine: 21px 0 0 25px;

Non preoccuparti per gli altri caratteri che non corrispondono al design - lo riordinerai in seguito. Se desideri utilizzare icone diverse, vai alla pagina Font Awesome Icons e poi cambia fa-volume-giù al nome dell'icona che desideri utilizzare.

Spostandoti sulla barra di navigazione, utilizzerai una lista non ordinata (UL) per questo. Aggiungi questo HTML dopo il logo-container (ma ancora dentro il normale-wrapper):

Il href è usato per collegarsi ad altre pagine. Questo sito web tutorial non ha altre pagine, ma puoi inserire il nome e il percorso del file (se necessario) qui, ad es. reviews.html. Assicurati di inserirlo all'interno di entrambe le virgolette.

Ecco il CSS:

#navbar list-style-type: none; / * rimuovi i punti elenco * / margine: 29px 0 0 0; padding: 0; float: giusto; font-size: 16pt;  #navbar li display: inline; / * crea elementi orizzontali * / #navbar li a: link, #navbar li a: visited, #navbar li a: active text-decoration: none; / * rimuovi sottolineatura * / colore: # 000000; riempimento: 0 16px 0 10px; / * space blocks apart * / margin: 0; border-right: 2px solid # B4B4B4; / * divider * / #navbar li a: link.last-link / * remove divider * / border-right: 0px;  #navbar li a: hover / * cambia colore su hover (mouseover) * / color: # EB6361;

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

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

Ed ecco il CSS:

# top-color-splash width: 100%; altezza: 4px; sfondo: # EB6361;

Questa è la parte superiore fatta. Ecco come appare - abbastanza simile al design giusto?

Area del contenuto principale

È ora di spostarsi nell'area dei contenuti principali, il cosiddetto “Sopra la piega”. Ecco come appare questa parte:

Questa è una parte piuttosto semplice, un testo a sinistra con un'immagine a destra. Questa area sarà vagamente diviso in terzi, approssimando approssimativamente il rapporto aureo usando la sezione aurea in fotografia per una migliore composizione usando la sezione aurea in fotografia per una migliore composizione Hai problemi con la composizione fotografica? Ecco due tecniche basate sul Rapporto aureo che miglioreranno drasticamente i tuoi scatti con poco sforzo da parte tua. Leggi di più .

Avrai bisogno dell'immagine di esempio per questa parte. È incluso nel download. Lumix DMC-G80 / G85 Recensione Panasonic Lumix DMC-G80 / G85 Recensione Panasonic Lumix DMC-G80 / G85 Recensione La Lumix G85 è l'ultima fotocamera mirrorless di Panasonic, e offre un notevole impatto il dipartimento video, con uscita HDMI e registrazione 4K - tutto per $ 1000! Leggi di più .

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

 
 
benvenuto!
 
Noise Media è un'azienda tecnologica specializzata in revisioni tecnologiche.
 
Siamo molto bravi in ​​quello che facciamo, ma sfortunatamente non siamo una vera compagnia.
 
Assicurati di visitare makeuseof.com per il tutorial completo su come costruire questo sito web.
 
In alternativa, dai un'occhiata alla nostra recensione della Panasonic G80 mostrata a destra!

Notare come il normale-wrapper l'elemento è tornato (è la gioia di usare le classi). Ci si potrebbe chiedere perché l'immagine (img) tag non si chiude. Questo è un tag che si chiude automaticamente. La barra in avanti (/>indica questo, poiché non ha sempre senso chiudere un tag.

CSS:

.un terzo larghezza: 40%; fluttuare: a sinistra; dimensionamento della scatola: border-box; / * assicura che padding e bordi non aumentino la dimensione * / margin-top: 20px; . two-third width: 60%; fluttuare: a sinistra; dimensionamento della scatola: border-box; / * assicura che padding e bordi non aumentino la dimensione * / padding-left: 40px; allineamento del testo: giusto; margin-top: 20px;  .featured-image max-width: 500px; / * riduce le dimensioni dell'immagine mantenendo le proporzioni * / .no-margin-top margin-top: 0; / * rimuovi margine su elementi come intestazioni * /

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

Quote Area

Creiamo l'area di 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-wrapper:

 
 
“makeuseof è il miglior sito web di sempre”
 
Joe Coburn

E poi questo CSS:

# quote-area background: # 363636; colore: #FFFFFF; allineamento del testo: centro; imbottitura: 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: sta iniziando a sembrare un sito web!

Area delle icone

Continuiamo a premere - è 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 anziché gli id. Aggiungi questo HTML dopo il precedente quote-zona:

 
 
  
 
Youtube
 
Controlla il nostro canale YouTube per ulteriori recensioni tecniche, tutorial e omaggi!
 
 
 
  
 
Recensioni
 
Se hai intenzione di acquistare un nuovo gadget, controlla qui prima. Ti daremo recensioni approfondite dei dispositivi più recenti.
 
 
 
  
 
Guide all'acquisto
 
A Guide all'acquisto ci sforziamo di fornire ai lettori gli strumenti per ottenere le cose migliori per la più bassa quantità di denaro.

Queste tre icone sono anche Font-Awesome. L'HTML sta ancora usando il normale-wrapper classe. Ecco il CSS:

.icon-outer box-sizing: border-box; / * assicura che padding e bordi non aumentino la dimensione * / float: left; larghezza: 33,33%; imbottitura: 25px; margine: 0; allineamento del testo: centro;  .icon-circle background: #EEEEEE; colore: # B4B4B4; larghezza: 200 px; altezza: 200 px; border-radius: 200px; / * crea angoli arrotondati * / margine: 0 auto; border: 2px solid # D6D6D6; dimensionamento della scatola: border-box; / * assicura che padding e bordi non aumentino la dimensione * / font-size: 75pt; padding: 30px 0 0 0; cursore: puntatore;  .icon-circle: hover / * cambia colore su hover (mouseover) * / color: #FFFFFF; sfondo: # EB6361;  h5 margin: 15px 0 10px 0; font-size: 20pt;

Ci sono alcune cose nuove in corso nel CSS. Gli angoli arrotondati vengono impostati da border-radius: 200px;. Impostando questo valore allo stesso modo della larghezza si ottiene un cerchio perfetto. Puoi ridurlo se preferisci più di un quadrato con angoli arrotondati. Osserva come vengono applicate le azioni al passaggio del mouse sulle div - non è limitato ai soli collegamenti. Ecco come appare questa sezione ora:

Il piè di pagina

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

Ecco il CSS:

#footer width: 100%; sfondo: # F1F1F1; / * grigio chiaro * / border-top: 1px solid # D4D4D4; / * grigio scuro "linea superiore" * / altezza: 150 px;

Vedi - roba davvero semplice.

Aggiungi un po 'di Pizzazz

Questo è tutto, la codifica è fatta! Puoi assolutamente lasciare le cose come sono, è una pagina web finita. Potresti aver notato, tuttavia, che non sembra Esattamente come il design. Il motivo principale di ciò sono i caratteri utilizzati. Facciamo questo.

Il carattere utilizzato per la maggior parte dei titoli è Myriad Pro. Viene fornito con Adobe Create Cloud, ma non è disponibile come webfont. Il carattere attualmente utilizzato nella pagina Web è Helvetica. Questo sembra ok, quindi puoi lasciarlo com'è, comunque PT Sans è disponibile come webfont. Il carattere utilizzato per tutto il testo è PT Serif, che è disponibile come webfont.

I caratteri Web sono un processo semplice. Proprio come caricare un nuovo carattere sul tuo computer, le pagine web possono caricare i caratteri su richiesta. Uno dei modi migliori per farlo è tramite 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 i tuoi elementi html e body per usare i nuovi font:

famiglia di caratteri: "PT Serif", "Helvetica", "Arial";

Notare come l'elemento h3 non è incluso nella lista - per impostazione predefinita PT-Serif invece di PT-Sans.

Come ultimo tocco di bellezza, usiamo alcuni JavaScript per scorrere tre diverse immagini in primo piano. Avrai bisogno image_2 e IMAGE_3 per questa parte, e ancora, è opzionale. Il sito Web è completamente funzionale a questo punto senza questa funzionalità. Ecco come sarà (accelerato):

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

Ecco il CSS necessario per nascondere le immagini in più:

.hidden display: none;

Ora che HTML e CSS sono gestiti, passiamo a JavaScript. È utile comprendere il modello di oggetto del documento JavaScript e lo sviluppo Web: Utilizzo del modello di oggetto documento Sviluppo JavaScript e Web: utilizzo del modello di oggetto documento In questo articolo viene illustrato lo scheletro del documento con cui JavaScript funziona. Avendo una conoscenza pratica di questo modello di oggetto astratto documento, è possibile scrivere JavaScript che funziona su qualsiasi pagina web. Leggi altro (DOM) per questa parte, ma non è un requisito.

Trovare la copione area in fondo alla pagina:

Aggiungi il seguente codice JavaScript all'interno di copione etichetta:

/ * JavaScript va qui, nella parte inferiore della pagina * / $ (document) .ready (function () // esegue una volta che la pagina è pronta var time = 2500; // ottiene i contenitori dell'immagine $ im1 = $ (' # f-image-1 '); $ im2 = $ (' # f-image-2 '); $ im3 = $ (' # f-image-3 '); setInterval (function () // chiama la funzione ogni x millisecondi (definiti nella variabile temporale sopra) changeImage ();, time); var currentImage = 1; function changeImage () switch (currentImage) case 1: // mostra l'immagine 2 $ im1.hide (); $ im2 .show (); $ im3.hide (); currentImage = 2; break; caso 2: // mostra l'immagine 3 $ im1.hide (); $ im2.hide (); $ im3.show (); currentImage = 3 ; break; default: // mostra l'immagine 1 $ im1.show (); $ im2.hide (); $ im3.hide (); currentImage = 1;);

Ci sono alcune cose che accadono qui. Il codice è contenuto all'interno $ (Document) .ready (). Ciò significa che verrà eseguito una volta che il browser ha completato il rendering della pagina: questa è una buona pratica. Il setInterval () la funzione è usata per chiamare il changeImage () funziona regolarmente a intervalli predefiniti in millisecondi (1000 millisecondi = 1 secondo). Questo è memorizzato nel tempo variabile. È possibile aumentare o diminuire questo per accelerare o rallentare lo scorrimento. Infine, una semplice dichiarazione di un caso viene utilizzata per mostrare immagini diverse e tenere traccia dell'immagine che mostra attualmente.

Sfida di codifica

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à, perché non provare a implementare queste modifiche:

Aggiungi un piè di pagina: Aggiungi del testo nel piè di pagina (suggerimento: potresti riutilizzare il normale-wrapper e un terzo / due terzi classi.).
Migliora lo scorrimento delle immagini: Modifica il JavaScript per animare le modifiche dell'immagine (suggerimento: guarda jQuery fadein e animate).
Implementa più citazioni: Modifica le virgolette per cambiare tra una di parecchie diverse (suggerimento: guarda il codice di scorrimento dell'immagine per un punto di partenza).
Imposta un server: Configurazione di un server e invio di dati tra la pagina Web e il server (suggerimento: leggi la nostra guida su JSON e Python Come ottenere Python e JavaScript per comunicare usando JSON Come ottenere Python e JavaScript per comunicare usando JSON Oggi ti mostrerò come usare JSON per inviare dati da JavaScript a Python. Tratterò su come configurare un server web, insieme a tutto il codice che ti serve..

Hai imparato nuove abilità oggi? Come sei arrivato alle sfide della codifica? Quali modifiche hai apportato per rendere questo sito web il tuo? Fateci sapere nei commenti qui sotto, ci piacerebbe sapere!

Scopri di più su: CSS, HTML, Web Design.