Eccoci giunti al punto cruciale di questa guida, suddividere il Layout con ImageReady CS.
Per pubblicare un sito è necessario che la grafica del Layout sia suddivisa in immagini più piccole per velocizzare il download ed evitare che venga visualizzata un'unica immagine di improbabile gestione. Questa suddivisione è detta slicing.
ImageReady CS è uno dei software in grado di fare slicing: è possibile ritagliare delle sezioni sull'immagine generale del layout e separare le immagini e gli spazi.
Una volta decisa la conformazione della pagina possiamo generare un file HTML strutturato con tabelle o CSS e per ogni sezione avremo un file immagine.
La suddivisione in sezioni si ottiene con due strumenti già incontrati nella scorsa lezione: «Sezione» e «Seleziona Sezione».
Questa immagine mostra il layout elaborato in Photoshop, suddiviso con le guide che abbiamo usato per definire gli spazi e pronto per essere suddiviso e ottimizzato con ImageReady:
Passiamo a ImageReady cliccando l'apposito pulsante (o digitando la combinazione Shift+Ctrl+M ).
Appena passati ad ImageReady troviamo una unica sezione predefinita che racchiude tutta l'area dell'immagine. Abbiamo ancora le guide ma non c'è una corrispondenza diretta tra le guide e lo slicing.
La suddivisione con le guide rimane però ancora molto utile, infatti ci permette di lavorare facilmente con lo strumento «Sezione». Le guide hanno impostata, per default, una caratteristica "magnetica", significa che mentre selezioniamo l'area di una sezione e passiamo vicino ad una guida il cursore viene attratto sulla guida, favorendo una selezione più precisa e veloce.
Una volta decise le sezioni il programma di elabora il layout distribuendo immagini, sfondi o colori di sfondo, con dimensioni uguali alle sezioni che abbiamo creato, su tabelle o CSS.
Di queste immagini faranno parte anche gli spazi che consideriamo vuoti e da assegnare ai contenuti della pagina. Nella IV parte di questa guida, impareremo con un tutorial pratico come gestire queste aree "morte".
Ecco come si presenta il piano di lavoro con il Layout diviso in sezioni:
Ogni sezione creata è contrassegnata da un numero, crescente in senso orizzontale:
Lo strumento «Seleziona Sezione» ci serve, come suggerisce il nome, a selezionare una sezione esistente e modificarne le dimensioni o spostarla nel piano di lavoro.
Nello spostare una sezione dalla sua posizione originale ImageReady crea automaticamente delle sezioni vuote, contrassegnate da riquadri numerati grigi invece che blu, che seguono sempre come principio quello della corretta suddivisione in aree rettangolari e "chiudono" gli spazi eventualmente lasciati dallo spostamento.
È possibile assegnare ad ogni livello del nostro file una paricolare struttura di sezioni, in questo modo abbiamo la possibilità di creare Layout più complessi e sfruttare le funzioni di Rollover disponibili su ImageReady. troviamo la funzione cliccando con il tasto destro del mouse sul livello da suddividere.
Le icone indicate dalle frecce indicano livelli con una propria struttura di sezioni:
Inoltre possiamo assegnare delle mappe immagine ai singoli livelli ed assegnare collegamenti, impostare del testo HTML, definire immagini rollover. Ma teniamo alta l'attenzione sull'ottimizzazione: nella lezione successiva scopriremo come configurare le opzioni di ottimizzazione e creazione della pagina web che conterrà il nostro layout.
