In questa lezione costruiremo le pagine che compongono un sito Web, sfruttando parte delle regole e dell'architettura sviluppata nelle lezioni precedenti in modo da realizzare una struttura ordinata e funzionale per i visitatori.
Realizzare pagine Web con Brackets
Nella scorsa lezione abbiamo creato il menu di navigazione all'interno del quale abbiamo inserito i nomi delle pagine che svilupperemo in questa nuova parte.
Iniziamo quindi aprendo il file di lavoro e creando la prima delle pagine interne che comporranno il sito Web.
Ci posizioniamo nella sidebar di sinistra, clicchiamo il tasto destro del mouse e procediamo alla creazione di un "Nuovo File" selezionando la relativa voce.
Assegniamo a questo documento il nome della pagina che vogliamo sviluppare, ovvero azienda.html e come fatto anche per i file precedenti impostiamo il tipo di pagina come documento HTML.
A questo punto non dovremo costruire da zero la pagina ma potremo partire da quanto già fatto per la Home Page, copiando e incollando il codice ed ereditando la struttura.
Apriamo quindi il file index.html copiamo tutto il contenuto presente e lo incolliamo all'interno della nuova pagina azienda.html
Dopo aver fatto questa operazione siamo pronti per personalizzare la pagina "Azienda", modificandone il contenuto a piacimento.
Iniziamo quindi dal tag <title></title> della pagina ed inseriamo il nome di riferimento.
<title>Azienda</title>
Ora è tempo di procedere con la modifica della voce di menu attiva, variando la classe chiamata active ed assegnando questa regola alla seconda voce presente all'interno del menu, in questo modo andremo ad impostare il colore giallo alla pagina "Azienda" in quanto attiva.
Procediamo aggiornando il titolo della pagina ed il contenuto della sezione body in modo da rendere ancor più specifica e riconoscibile la pagina.
Infine procediamo all'aggiornamento dell'immagine principale, inseriamo un nuovo file di tipo JPEG all'interno della cartella dedicata chiamata img.
Ora apriamo il file main.css che definisce l'immagine da visualizzare come sfondo del DIV #main_container attraverso la regola background-image.
Per avere un'immagine diversa rispetto a quella inserita all'interno della Home Page abbiamo bisogno di identificare maggiormente l'elemento #main_container, assegnando a lui una classe che lo renda riconoscibile per ogni pagina.
Torniamo dunque all'interno del file azienda.html ed aggiungiamo una nuova classe all'elemento main_container chiamata semplicemente azienda come nel modo seguente:
<div id="main_container" class="azienda">
<div>
<h1>Azienda</h1>
</div>
</div>
Ora possiamo andare all'interno del file main.css ed assegnare la nuova immagine inserendo la seguente regola specifica per la pagina azienda:
#main_container.azienda{
background-image: url(../img/azienda.jpg);
}
Tale regola indica che il DIV chiamato main_container dovrà avere un'immagine diversa in quanto il percorso indicato è diverso rispetto al background precedente.
Specifico che per essere sovrascritta la regola dovrà essere posizionata successivamente a quella originale, in quanto il codice CSS ragiona "a cascata", quindi una regola scritta successivamente ha il predominio su una scritta in precedenza.
Questa metodologia è usata anche per le ottimizzazioni responsive, ovvero per adattare la struttura rispetto alle diverse grandezze di schermo dei dispositivi mobili quali smartphone o tablet.
Avremo modo di entrare nei dettagli di questo argomento nelle lezioni successive.
Ora che abbiamo realizzato la pagina "Azienda" possiamo procedere con la creazione delle pagine successive.
Seguiamo la stessa procedura usata per la creazione della pagina "Azienda", creiamo quindi un nuovo file e lo chiamiamo portfolio.html, incolliamo al suo interno l'intero codice della pagina "Azienda" e modifichiamo gli elementi che intendiamo personalizzare.
Infine assegniamo un'immagine personalizzata anche a questa pagina inserendo una classe dedicata che avrà il compito di cambiare l'immagine all'interno della pagina "Portfolio".
<div id="main_container" class="portfolio">
<div>
<h1>Portfolio</h1>
</div>
</div>Infine aggiungiamo la nuova regola all'interno del file main.css indicando il nome dell'immagine che dovrà essere mostrata.
Per il momento lasciamo questa pagina con il contenuto presente, nella prossima lezione integreremo una galleria portfolio utilizzando la libreria jQuery grazie alla quale potremo inserire animazioni ed effetti coinvolgenti per gli utenti del sito Web.
A questo punto rimane da sviluppare la pagina "Contatti" all'interno della quale andremo ad inserire qualche informazione in più rispetto a queste prime pagine.
Procediamo come solito, creiamo una nuova pagina ereditando la struttura delle altre pagine.
Impostiamo poi un'immagine personalizzata assegnando una classe dedicata.
A questo punto procediamo con l'inserimento del contenuto su misura all'interno della pagina.
Creiamo una divisione in due colonne all'interno delle quali inseriremo le informazioni di contatto e la Google Map indicante l'esatta posizione dell'attività.
Continuiamo lasciando quanto già presente e aggiungiamo un nuovo DIV destinato a contenere queste due nuove colonne.
Digitiamo il codice abbreviato sfruttando le funzionalità dell'estensione Emmet la quale permette di scrivere codice HTML e CSS in modo rapido e semplificato.
div#content_contatti>div#content_contatti_left+div#content_contatti_rightEseguiamo l'istruzione attraverso la voce di menu "Emmet > Expand Abbreviation".
<div id="content_contatti">
<div id="content_contatti_left"></div>
<div id="content_contatti_right"></div>
</div>Il codice inserito stabilisce la creazione di un DIV contenitore e due DIV interni ai quali procediamo ad assegnare le seguenti regole CSS:
#content_contatti_left{
width: 50%;
height: 500px;
position: relative;
float: left;
background-color: #ddd;
}
#content_contatti_right{
width: 50%;
height: 500px;
position: relative;
float: left;
background-color: #ccc;
}
Oltre alle regole di struttura ho assegnato ad entrambi i DIV anche un colore di sfondo per renderli maggiormente riconoscibili e poter lavorare meglio, in seguito potremo anche decidere di rimuovere il colore.
Proseguiamo con la compilazione partendo dal DIV di sinistra chiamato #content_contatti_left.
Inserito il contenuto noteremo che il testo è allineato di default in alto a sinistra, per modificare questa impaginazione possiamo aggiungere alle regole CSS assegnate al DIV #content_contatti_left le seguenti istruzioni ed allinearci con il resto dei testi presenti nel documento:
{
padding: 50px;
box-sizing: border-box;
}
Possiamo ora procedere con la compilazione anche della colonna di destra all'interno della quale inseriamo una Google Map.
Come inserire una Google Map all'interno di un sito Web
Per inserire una mappa di Google all'interno di una pagina Web è necessario accedere al sito di riferimento https://www.google.it/maps/preview e cercare la location interessata.
Dopo aver effettuato la ricerca è possibile incorporare la mappa cliccando sulla voce "Condividi" e di seguito "Incorpora una mappa > COPIA HTML".
Ora non dovremo far altro che tornare all'interno della colonna di destra chiamata #content_contatti_right ed incollare il codice di richiamo della Google Map.
Come noterai, la mappa ha delle dimensioni di default che potrebbero non essere adatte al lavoro che stiamo eseguendo, per questo motivo il consiglio è quello di rimuovere tali misure ed inserire un elemento ID grazie al quale identificare la mappa ed assegnarle le dimensioni preferite.
Dopo aver assegnato un nome ID alla Google Map possiamo indicare le dimensioni preferite all'interno del file main.css ed ottenere la visualizzazione ideale per il nostro documento.
