La Vista Layout è un'altra modalità visuale per inserire tabelle, presente in Dreamweaver dalla versione 4 e UltraDev 4. Serve per disegnare dei layout di pagina basati su tabelle. Sebbene consenta un minor controllo sulla pagina e sebbene abbia qualche limitazione, questa modalità potrà risultare familiare a coloro che vengono dal mondo della grafica.
Si accede alla modalità Layout dal pannello "Layout" della barra "Inserisci". Per impostazione predefinita è attiva la visualizzazione "Standard" che rende accessibili solo i pulsanti "Tabella". Cliccando sul pulsante "Layout" si accede a questa modalità e diventano attivi i pulsanti Tabella Layout e Disegna cella layout mentre diventano inattivi i pulsanti accessibili dalla modalità "Standard".
Attenzione: queste visualizzazioni sono concetti distinti rispetto alla vista "Codice", "Divisa" e "Progettazione". Infatti mentre le tre precedenti permettono di visualizzare il codice della pagina o gli oggetti che il codice rappresenta, le modalità "Standard", "Espanso" e "Layout" permettono di visualizzare in modi differenti gli oggetti che stiamo inserendo nella pagina. In altre parole queste modalità sono dei modi di concepire la modalità Progettazione.
Modalità "Layout"
Una volta entrati nella modalità Layout appaiono due regioni celesti in cima alla pagina web corrente, insieme alle parole "Modalità Layout". Inoltre è sempre presenti il comando "Esci" che ci permette di tornare alla modalità Standard.
Per disegnare una tabella o una cella di layout bisogna premere i relativi pulsanti ("Tabella layout" e "Disegna cella layout") e disegnare con il mouse la tabella o la cella. Se si disegna direttamente una cella, verrà anche disegnata la relativa tabella, che occuperà l'intera rimanente area delle pagina.
L'area della tabella è del colore di sfondo della pagina ed è editabile, dunque possiamo inserire testo, immagini, etc. e possiamo anche ridimensionarla, cliccando sul suo bordo per selezionarla. In questo caso la maniglia per il ridimensionamento diagonale manterrà le proporzioni di larghezza ed altezza della cella senza bisogno di premere il tasto "Maiuscolo".
L'area residua della tabella è invece di colore grigio, per cui le relative celle non sono modificabili.
Tuttavia nell'area grigia premendo il pulsante Tabella layout è possibile inserire una tabella nidificata all'interno della tabella di layout principale.
È anche possibile nell'area grigia della tabella disegnare ulteriori celle, ogni volta che si deve disegnarne una bisognerà cliccare il pulsante Disegna cella layout.
Attenzione: Non è invece possibile disegnare altre tabelle nidificate o celle e relative tabelle nidificate all'interno delle celle editabili.
Sul bordo superiore delle tabelle e delle celle di layout è presente un'area che ne indica le dimensioni e da cui è accessibile un menu a comparsa le cui relative voci sono accessibili anche dal pannello "Proprietà", ad eccezione di Aggiungi immagine spaziatore, che inserisce un'immagine spaziatrice all'interno della tabella, in pratica una gif trasparente di 1px per 1px, la cui larghezza è impostata, come attributo html, pari alle dimensioni, in pixel, della cella.
Selezionando dal menu a comparsa, o dal pannello "Proprietà", Imposta ridimensionamento automatico colonna essa sarà allargata alla dimensione relativa 100%, ovvero occuperà l'intera area disponibile.
Modalità "Espanso"
Per quanto riguarda la modalità "Espanso", possiamo attivarla premendo il pulsante Espanso (proprio a sinistra del pulsante Layout). Questa visualizzazione "espande" letteralmente le tabelle, le celle, i bordi e rende più semplice la loro gestione. Ancora una volta in alto troviamo del testo che ci ricorda quale modalità ci troviamo accompagnato dal pulsante "Esci" che ci riporta velocemente alla modalità Standard.
