Tagliare un Layout
Tutorial creato da
Prepariamo il nostro layout o template con Photoshop.
Quando siamo soddisfatti del nostro lavoro, passiamo alla fase più delicata e cioè dobbiamo dividere il nostro layout in sezioni in modo che potremo salvarlo in tante immagini da utilizzare con il nostro editor.
Apriamo il nostro documento in photoshop, selezioniamo: Visualizza--->Mostra--->Guide e con lo strumento spostamento, posizioniamo le tue guide all'inizio e alla fine delle varie sezioni:
Quando siamo sicuri di aver diviso bene tutte le sezioni, prendiamo lo strumento Slice:
e, con l'aiuto delle guide che abbiamo appena fissato, tracciamo tutte le sezioni in modo che il lavoro verrà tagliato esattamente come abbiamo ritagliato le sezioni:
Quando abbiamo terminato anche questa operazione, salviamo per Web (html e immagini):
A questo punto possiamo chiudere Photoshop e aprire Dreamweaver (o qualsiasi altro editor).
In Dreamweaver apriamo il nostro documento e facciamo le modifiche del caso...
Per avere la possibilità di scrivere DENTRO le sezioni procediamo in questo modo: ci posizioniamo sulla RIGA dove c'è il codice del nostro box:
A questo punto, dobbiamo creare uno spazio SCRIVIBILE in quel punto utilizzando QUELL'IMMAGINE.
Procediamo in questo modo:
Inserisci--->Tabella (lo faccio sul mio esempio, quindi tengo conto delle mie misure):
Ora andiamo a mettere tutti gli altri parametri e a impostare LO SFONDO di questa tabella che non sarà altro che l'immagine di partenza.
Selezioniamo la tabella appena creata e procediamo come in figura:
Adesso, cancelliamo la riga dell'immagine che non ci serve più perché abbiamo creato il box:
A questo punto il nostro box pronto per scriverci dentro.
Possiamo inserire i tag che vogliamo, ma non dimentichiamo questo:
Se non inseriamo questo, il testo partirà dal centro verticale del box. Inserendolo, invece, cominceremo a scrivere dal "top" appunto... dall'inizio del box.