ricerca
montagna

Come ti costruisco un Sito Web

Palmiero Corrado

Va da sé che questa mini guida, non vuole ne essere esaustiva, ne definitiva, ma semplicemente un esempio tra mille modi e programmi differenti su come creare un Sito Web.

Parte Terza – Creazione Home Page
(Menù – Logo - Contenitore - ConvalidaW3C)
Configurazione Foglio di Stile CSS


creazioneindex
Dopo che abbiamo configurato il Server sia in locale che in remoto, creiamo la nostra Home Page: index.html, la quale sarà la nostra pagina principale.
index


Il passo successivo sarà riempire l’head con Meta Tag, particolari tag Html nei quali s’inseriscono informazioni sul Sito, un tempo essenziali per avere un buon posizionamento sull’indice di ricerca.
indexmeta
Al momento il Tag più importante, preso in considerazione, è la “Description” del sito, la quale deve essere lunga come un messaggio sms, circa 150 -160 caratteri, e funge come un messaggio pubblicitario, infatti compare nell’indice di ricerca, ed è per questo e anche per avere una buona posizione, che dovrebbe sempre contenere numero di telefono e città. Sempre nell’head si può inserire uno script che richiama i Microdati. Con i microdati aumenta la possibilità che le nostre informazioni vengano colte dal crawler e mostrate nei risultati di ricerca nel modo corretto.
Nell’head abbiamo anche inserito il link al file favicon.ico, la favicon per chi non lo sapesse è l’icona che compare nell’ url del Sito Web (barra degli indirizzi).


creazionestyle
Completato l’head cominciamo con la struttura, e creiamo dapprima il file CSS che ci permetterà di impostare il primo passo con il colore, il logo, il menù, e il contenitore della pagina.

Per stabilire i vari colori usiamo lo strumento contagocce di Photoshop posizionandoci sopra all’area di nostro interesse: per esempio se vogliamo sapere il colore della barra del menù, ci posizioniamo sopra un’area del menù, per il colore dell’Home Page su un’area dell’Home Page, quindi poi clicchiamo sulla scheda del selettore di colore di primo piano, e copiamo il codice esadecimale ottenuto.
colorepagina


Una volta impostato il foglio di stile, apriamo da Dreamweaver il file index e cominciamo ad inserire i contenuti.
implementazione


Ho creato un collegamento al foglio di stile, poi ho creato un menù dropdown, a tendina per essere chiari, questo in previsione di creare in futuro altre pagine, un contenitore per i contenuti della pagina (div id wrap), inserito il logo e l’icona che aprirà la pagina di ricerca, il primo risultato è questo:
paginam


Nuovamente dal foglio di stile, cominciamo a definire le media query. Le media query sono 1/3 della ricetta per il design sensibile. È l'ingrediente fondamentale che, nella forma più semplice, consente di applicare specificato CSS a seconda del dispositivo (telefono, televisione…) e ai criteri di query multimediali, come ad esempio la stampa.
impostazionebreackpoint


Visualizziamo adesso la nostra pagina sui browser: Google ed Explorer

visualizzazionepagina


Bene!! anche il malefico Explorer seppur al momento senza nessun script lavora bene… ottimo, ottimo!!!

Prima di proseguire con l’inserimento di altri contenuti, controlliamo che il codice sia HTML che CSS rispondano ai criteri del W3C e quindi non ci sia nessun errore. W3C è l’acronimo di World Wide Web Consortium; un consorzio internazionale voluto e fondato da Tim Berners Lee, padre del Web. Il consorzio W3C è composto da grandi multinazionali telefoniche, informatiche, professori universitari, ricercatori… l’obbiettivo è quello di rendere attraverso “specifiche” l’accesso al web a tutti i dispositivi, e questo è possibile solo grazie ad un “comune linguaggio di comunicazione” nello specifico, il protocollo di comunicazione e linguaggio in cui è scritto il file tra server, PC ed altri dispositivi.
convalidapagina
convalidacss



Home Page

Indice

Prima Parte

Seconda Parte

Quarta Parte

Quinta Parte

Sesta Parte