Chi è esperto nello sviluppo di siti web sa che di solito non si inizia con la struttura HTML. Invece si parte con un programma grafico e si costruisce il layout della pagina lì (Chi lavora in un'agenzia riceve il layout dal grafico o dal cliente). Dopodiché, il compito consiste nel costruire la pagina da questo layout. Ecco di cosa si tratterà adesso.
In riferimento alla ricostruzione dei layout, vi troverete spesso di fronte ai due termini Slicing e Dicing. In realtà non significa altro che prendere il modello o il design, tagliarlo nel proprio programma grafico e poi ricomporlo tramite HTML.
Il programma grafico giusto
Ognuno ha le proprie preferenze su quali software utilizzare. Così vale anche per i programmi grafici. In relazione al web design professionale, la situazione è leggermente diversa. Qui si lavora quasi esclusivamente con Photoshop. Infatti, la maggior parte dei progetti di design sono disponibili come file PSD. E proprio questo formato PSD non può essere aperto o modificato con tutti i programmi.
Chi non ha Photoshop, tuttavia, non è completamente bloccato. Un'alternativa possibile è GIMP. Potete scaricare gratuitamente il programma dal sito http://www.gimp.org/. Vi mostrerò i passaggi fondamentali per la creazione di un layout utilizzando GIMP. Questo funziona in modo simile anche con Photoshop.
Creare un proprio layout
Prima di tutto, pianificate i concetti di design di base:
• Quanta larghezza avrà il layout?
• Quante colonne dovrà contenere?
Successivamente create l'area di lavoro tramite File>Nuovo e impostate le dimensioni. Anche se il layout che sto creando sarà "a tutta larghezza", il contenuto vero e proprio avrà una larghezza di soli 1000 pixel. Come altezza imposto 887 pixel. (L'altezza effettiva della pagina web si orienterà comunque successivamente sul contenuto).
Con OK confermate le impostazioni. A questo punto avete l'area di lavoro pronta e potete iniziare a riempirla di contenuti. (Per motivi di chiarezza, userò uno sfondo grigio nella bozza, che non sarà visibile in seguito sul sito web).
Un elemento molto comune da includere nel sito è il logo, solitamente presentato come un'immagine. Per inserirlo nel layout, aprite File>Apri e selezionate il vostro logo, che dovrebbe essere in uno dei formati PNG, GIF o JPEG. Confermate la selezione con Apri. Ora premete Ctrl+C per copiare il logo negli appunti. Passate poi al vero e proprio web design e premete Ctrl+V lì. Il logo inserito non si troverà ancora nella posizione desiderata. Usando lo strumento Sposta, potrete spostarlo facilmente nella posizione corretta.
Se l'immagine non si sposta, dovete attivare prima il livello. Le impostazioni corrispondenti si trovano sotto Finestra>Dialoghi ancorabili>Livelli.
Per una miglior divisione, dovreste mostrare le guide. Per farlo, cliccate col mouse sul righello e trascinatelo tenendo premuto il pulsante sinistro del mouse nella posizione desiderata.
Così potete tracciare quante guide volete, per allineare gli elementi del sito.
Ora create un altro livello. Questo livello deve contenere il menù superiore.
Come nome potreste indicare Menù superiore. Create il livello con OK. Selezionate il rettangolo di selezione e tracciate l'area in cui inserire la navigazione.
Nell'esempio attuale immagino che lo sfondo del menù superiore avrà un gradiente di colore. Per farlo, clicco su Gradiente di colore: Riempire la selezione con un gradiente di colore.
Il gradiente di colore dovrebbe andare dal grigio al nero. Potete impostare i colori corrispondenti tramite i campi colore. Imposto il tipo di gradiente come dal primo al secondo colore, quindi va dal primo al secondo colore. Ora tenete premuto il tasto Ctrl e tracciate una linea dall'alto in basso nell'area selezionata. Una volta rilasciato il pulsante sinistro del mouse, l'area avrà il gradiente desiderato.
In generale ora avete due opzioni:
• Lasciate l'area per la navigazione così com'è.
• Inserite i singoli elementi di navigazione per poter vedere nel dettaglio nella bozza quali tipologie di font etc. state utilizzando.
Quale delle due varianti scegliete rimane naturalmente a voi. Se volete però ad esempio presentare il layout al vostro cliente, vi consiglierei in ogni caso di inserire i punti del menù. Esperienza insegna che molti clienti hanno difficoltà a immaginarseli.
Inizialmente dovreste scegliere un tipo di carattere. In GIMP troverete le impostazioni corrispondenti sotto Finestra>Dialoghi ancorabili>Caratteri.
Nel corso di questa serie si è già affrontato il problema dei caratteri in relazione a CSS ed HTML. In ultima analisi, come web designer potete teoricamente specificare qualsiasi tipo di carattere. Ma non sapete se tale carattere sia effettivamente presente sul computer dei visitatori del sito e quindi possa essere visualizzato. Pertanto, i risultati - soprattutto se si utilizzano caratteri molto esotici - sono difficili da controllare. Tornando su questo aspetto nel corso di questa serie, quando si tratterà dei caratteri del sito di esempio. Per il layout attuale, comunque, opto per le seguenti impostazioni:
• Verdana bold
• 20 pixel
• Colore del testo bianco
Ora potete inserire singoli elementi di menu in questo modo. È meglio copiare il livello in cui è contenuto il primo punto del menu e inserirlo come nuovo livello. Quindi è possibile adattare il testo del livello. In questo modo si crea il menu superiore.
Il menu superiore dovrebbe ottenere un effetto hover. Quindi, quando si passa il mouse sui singoli punti del menu, il colore di sfondo cambia. Naturalmente, questo aspetto dovrebbe essere visualizzato anche nella bozza. Per fare ciò, si imposta il colore di hover desiderato e si copia uno dei livelli di menu esistenti. A questo livello viene assegnato il colore. Nell'esempio attuale si assume una gradienza di colore blu. Successivamente si inserisce il testo del punto del menu. In questo modo si ha già un'idea di come apparirà il menu alla fine.
