Barra deines de documents a Adobe CS5 Dreamweaver

La barra d'eines Document d'Adobe Creative Suite 5 (Adobe CS5) Dreamweaver conté eines que us ajuden a visualitzar el vostre document en diferents modes, com ara Codi i Disseny, així com adreçar elements com ara el títol del document i la compatibilitat del navegador.

• Vista de codi: mostra el codi i només el codi que utilitza aquesta vista. Dreamweaver us ajuda a desxifrar codi mitjançant etiquetes de codificació de colors, atributs, CSS i altres elements.

• Vista dividida: en seleccionar aquesta opció es divideix la finestra del document entre les vistes de codi i disseny. Aquesta vista pot ser molt útil perquè veieu el disseny i el codi alhora.

  

  Controleu la vista de la pàgina des de la barra d'eines Document.

• Vista de disseny: aquesta opció mostra la vostra pàgina a la vista de disseny a la finestra del document.

• Codi en directe: quan la visualització en directe està habilitada, podeu veure el codi font del vostre document tal com el veuria un usuari en un navegador, però no podeu editar el codi de la pàgina en aquesta visualització.

• Comprova la compatibilitat del navegador: aquest menú mostra opcions que us permeten comprovar la integritat de la pàgina, com ara l'accessibilitat, o si les vostres regles CSS són compatibles amb diferents navegadors.

• Live View: Live View mostra la vostra pàgina com si estigués en un navegador, sense vores, guies i altres ajudes visuals. A Live View, no podeu editar el contingut previsualitzat, però podeu saltar a la vista Codi, Dividir o Disseny i modificar el contingut de la vostra pàgina.

• Inspecciona: el nou botó Inspecciona funciona amb Live View per revelar les regles CSS que donen format als elements de la teva pàgina. Quan seleccioneu un element a la pàgina amb Inspecció activat, el tauler Estils CSS mostra les propietats que donen format a aquest element i us permet desactivar o modificar propietats específiques i veure'n els resultats.

• Vista prèvia/depuració al navegador: feu clic en aquest botó per previsualitzar o depurar el vostre document en un dels vostres navegadors web instal·lats, el BrowserLab d'Adobe o Device Central.

• Ajudes visuals: feu clic en aquest botó per seleccionar diferents ajudes visuals (com ara vores i guies) que us ajudin a veure diversos elements i facilitar el disseny de les vostres pàgines.

• Actualitza la vista de disseny: feu clic a aquest botó per actualitzar la vista de disseny del document després de fer canvis a la vista de codi. Els canvis que feu a la vista Codi no apareixen automàticament a la vista Disseny fins que realitzeu determinades accions, com ara desar el fitxer o fer clic en aquest botó.

• Títol del document: introduïu el nom del vostre document en aquest camp.

• Gestió de fitxers: feu clic en aquest botó per mostrar el menú emergent Gestió de fitxers. Utilitzeu aquest menú per comprovar l'entrada o la sortida del document quan estigui habilitat per al vostre lloc.

• Pàgina anterior/Pàgina següent/Actualització/Barra d'adreces: a Live View, aquestes eines funcionen com ho farien en un navegador web i us permeten navegar entre pàgines, actualitzar la pàgina i veure l'adreça de la pàgina actual. La barra d'adreces també funciona quan la visualització en directe no està activada, revelant el camí al document en què esteu treballant actualment.

• Documents relacionats: els documents utilitzats i adjuntats a la vostra pàgina, com ara fitxers CSS i JavaScript externs, s'enumeren a sota (Mac) o a sobre (Windows) dels botons de selecció de visualització (Codi/Divisió/Disseny). Podeu fer clic a qualsevol document de la llista per editar el fitxer adjunt a la vista dividida sense haver de canviar de document.

  • XML, JavaScript, CSS i altres tipus de fitxers basats en codi només es poden veure i editar a la vista de codi; els botons Disseny i Dividir apareixen atenuats.

  • L'actualització també actualitza les funcions de codi que depenen del model d'objectes de document (DOM), com ara la possibilitat de seleccionar les etiquetes d'obertura o tancament d'un bloc de codi.

• Opcions de visualització en directe: feu clic i seleccioneu les opcions d'aquest menú per controlar com apareix i funciona el vostre document quan la visualització en directe està activada.