Annuncio pubblicitario

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 starai facendo nulla di veramente sanguinoso, 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:

Noise Media /* CSS goes here, at the top of the page */ /* JavaScript goes here, at the bottom of the page */ 

Questo fa molte cose:

• Definisce il minimo HTML richiesto.
• Definisce il titolo di una pagina di "Noise Media"
• Include jQuery ospitato su Google CDN (cos'è un CDN Quali CDN sono 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 si scalano 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 un tag di stile in cui scrivere i tuoi CSS.
• Definisce un tag script 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.

Nota come il titolo della pagina è Noise Media . Questo è definito dal testo all'interno del tag del titolo . Questo deve essere all'interno dei tag head .

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 codice HTML all'interno del tag body in alto:

Mentre sei qui, rompiamolo. Un div è come un contenitore in cui inserire altre cose. Questa "altra roba" può 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 della barra superiore . 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 invece una classe - è ciò per cui sono progettati! Ecco il CSS che devi disegnare (mettilo in cima al tuo tag di stile ):

 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 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 (.). I tag html e body 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, è necessario un contenitore per inserire questo contenuto. Facciamo di questo un corso (in modo da poterlo riutilizzare in un secondo momento), e dato che questo non è un sito web reattivo, ingrandisci 900 pixel.

HTML:

CSS:

 .normal-wrapper { width: 900px; margin: 0 auto; padding: 15px 40px; background: red; 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:

 background: red; 

È 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 partire!

Aggiungi questo HTML all'interno del div normale del wrapper :

  
 Media rumore 

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 riordinerai in seguito. Se desideri utilizzare icone diverse, vai alla pagina Font Awesome Icons e quindi modifica il fa-volume-down al nome dell'icona che desideri utilizzare.

Spostandoti sulla barra di navigazione, utilizzerai un elenco non ordinato ( UL ) per questo. Aggiungi questo codice HTML dopo il logo-container (ma ancora all'interno del normale wrapper ):

Casa
Di
Recensioni
Contatto

L' 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 esempio reviews.html . Assicurati di inserirlo all'interno di entrambe le 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 una lista non ordinata . Rimuove quindi i punti elenco usando il tipo di stile lista: nessuno; . 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 utilizzando la classe last-link . Ecco come appare:

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

Ed ecco il CSS:

 #top-color-splash { width: 100%; height: 4px; background: #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 "above the fold". Ecco come appare questa parte:

Questa è una parte piuttosto semplice, un testo a sinistra con un'immagine a destra. Quest'area sarà divisa in parti separate, approssimativamente approssimando la sezione aurea 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 l'elemento top-color-splash :

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 del Panasonic G80 mostrato a destra!

Si noti come è ritornato l'elemento wrapper normale (è la gioia dell'uso delle classi). Ci si potrebbe chiedere perché il tag image ( img ) non si chiude. Questo è un tag che si chiude automaticamente. La barra diretta ( /> ) indica ciò, poiché non ha sempre senso 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 è il ridimensionamento della casella: 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 ( featured-image ) ha una larghezza massima di 500 px . Se si specifica solo una dimensione (larghezza o altezza) e si lascia vuoto l'altro, 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 codice HTML dopo il precedente wrapper normale :

"Makeuseof è il miglior sito web di sempre" 
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 cosa: 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 codice HTML dopo la precedente area di preventivo :

  
 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 la classe wrapper normale . 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 cose nuove in corso nel CSS. Gli angoli arrotondati vengono impostati con il raggio del bordo: 200 px; . 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 il normale wrapper delle aree delle icone:

Ecco il CSS:

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

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 font 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 così com'è, tuttavia 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:

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

Nota come l'elemento h3 non è incluso nella lista - questo sarà predefinito per PT-Serif invece di PT-Sans .

Come ultimo tocco di bellezza, usiamo alcuni JavaScript per scorrere tre diverse immagini in primo piano. Avrai bisogno di 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 nascosta . 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.

Trova l'area degli script nella parte inferiore della pagina:

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

Aggiungi il seguente codice JavaScript all'interno del tag dello script :

 /* 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 accadono qui. Il codice è contenuto in $ (document) .ready () . Ciò significa che verrà eseguito una volta che il browser ha completato il rendering della pagina: questa è una buona pratica. La funzione setInterval () viene utilizzata per chiamare regolarmente la funzione changeImage () a un intervallo predefinito in millisecondi (1000 millisecondi = 1 secondo). Questo è memorizzato nella variabile temporale . È 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 wrapper normale e le classi di un terzo / due terzi ).
Migliora lo scorrimento dell'immagine: modifica JavaScript per animare le modifiche dell'immagine (suggerimento: guarda jQuery fadein e animate).
Implementa più citazioni: modifica le virgolette per passare da una a diverse (suggerimento: guarda il codice di scorrimento dell'immagine per un punto di partenza).
Configurazione di un server: installazione di un server e invio di dati tra la pagina Web e il server (suggerimento: leggere 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 farò 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!