Il grosso problema dell'impaginazione sul web è sempre stato quello del posizionamento preciso degli oggetti. A differenza di una pagina progettata per la stampa, quella web non ha punti di riferimento ben delineati. L'esempio più classico è dato dalle dimensioni da attribuire alla pagina che dipendono dalle impostazioni della scheda grafica dei nostri visitatori. Che risoluzione usano i navigatori? Ovviamente non è dato saperlo, bisogna fare delle scelte.
Un secondo problema è dato dalla carenza del linguaggio HTML in fatto di impaginazione vera e propria. Le prime versioni del linguaggio non prevedevano comandi appositi cosicché gli web-designer si dovettero ingegnare piegando gli strumenti esistenti a loro vantaggio. Ecco, quindi, che il tag <table>, nato per creare tabelle, fu sapientemente usato per creare regioni editabili all'interno della pagina web. Questo comando viene ancora abbondantemente utilizzato anche se le ultime innovazioni dell'HTML ne stanno ridimensionando notevolmente la portata: mi riferisco alle specifiche dei fogli di stile sul posizionamento preciso degli oggetti (CSS2).
GoLive ci permette sia di gestire i CSS2, come vedremo più avanti, che di aggirare il problema utilizzando la griglia di Layout. Questa non è altro che una tabella flessibile, generata automaticamente e aggiornata costantemente da GoLive. Non dobbiamo più perdere tempo a costruire tabelle complesse, ci pensa GoLive.
Inserimento e gestione della griglia
Innanzitutto una griglia può essere inserita in un punto qualsiasi della nostra pagina e, successivamente, popolata di oggetti di testo o multimediali.
Come si inserisce? Vediamolo con un esempio:
- nella palette Oggetti, scheda Generale trasciniamo il primo oggetto (Griglia Layout, appunto) sulla nostra pagina aperta. Apparirà un' area quadrettata di circa 200x200 pixel: è la nostra griglia.
Impostiamone subito la larghezza andando nell'Inspector inserendo nelle caselle Larghezza e Altezza rispettivamente 500 e 300.
- proviamo adesso ad inserire del testo e un immagine. Per inserire del testo dobbiamo usare un altro oggetto della palette, in particolare il secondo, cornice di testo Layout. trasciniamolo all'interno della griglia. Come si noterà viene inserito un quadrato di piccole dimensioni: ridimensioniamolo. Abbiamo due possibilità: con il mouse, cliccando su uno dei quadratini blu ai quattro angoli della cornice e trascinando, oppure usando la barra degli strumenti. Come dicevamo, la barra degli strumenti è contestuale, cioè cambia in base all'oggetto selezionato di volta in volta. Infatti possiamo spostare o ridimensionare la cornice usando le prime quattro caselle. Le prime due ci danno la posizione dall'angolo superiore sinistro della cornice: impostiamole a 32 e 32. Le successive riguardano la dimensione: impostiamole a 160 e 48.
- per inserire il testo nella cornice appena creata basta cliccarci dentro e digitare il testo desiderato. Inseriamo "Antico Oleificio Adobe". Naturalmente possiamo attribuire ogni tipo di formattazione possibile al testo inserito in una cornice.
- ripetiamo il punto 2 inserendo una cornice 96x96 nella posizione 368x112 e digitiamo "olio extra"/interruzione di riga, "olio di oliva"/interruzione di riga, "olio di semi".
- possiamo attribuire un colore di sfondo alle cornici. Selezioniamole cliccando sul bordo delle stesse e dalla palette Colori trasciniamo il colore desiderato nell'Inspector.
- a questo punto possiamo inserire un immagine o semplicemente un segnaposto. Scegliamo quindi dalla palette Oggetti l'oggetto Immagine e trasciniamolo nella griglia. Come per la cornice di testo reimpostiamo la posizione (ad esempio, 16 e 144) e la dimensione (320 e 112).
Come avete visto è uno strumento estremamente flessibile che vi permette di impaginare in modo creativo e preciso allo stesso tempo.
Proprietà della griglia
Andiamo a vedere le proprietà della griglia nell'Inspector.
- Abbiamo già visto le proprietà Larghezza e Altezza. A destra di esse c'è il pulsante Ottimizza. Questo si utilizza una volta completato l'inserimento degli oggetti e serve a togliere eventuali parti di griglia in più, oltre all'ottimizzazione del codice HTML.
- Le caselle Orizzontale e Verticale ci permettono di impostare le dimensioni delle maglie della griglia. Più fitta è la griglia e più il posizionamento sarà preciso: l'inconveniente è una maggiore quantità di codice HTML e quindi una inutilmente eccessiva pesantezza della pagina. Anche in questo caso il consiglio è di non appesantire inutilmente.
- La casella Aggancia fa sì che, se selezionata, gli oggetti inseriti nella griglia vengano calamitati sulla stessa.
- La casella Visibile visualizza o meno la griglia lasciandola comunque funzionante.
- Allineamento. Vale lo stesso discorso fatto per l'allineamento destra o sinistra delle immagini.
- Colore. Come abbiamo visto per le cornici nello stesso modo possiamo impostare un colore di sfondo per la griglia