12.- Una vista al código fuente 
Ya al principio del Manual, hemos dicho que había que saber un poco sobre código html para aprender a manejar con soltura un editor como Dreamweaver.
Si no tienes mucha idea de a qué nos estamos refiriendo pincha aquí: código html . Si ya sabes, aunque sólo sea un poco, de lenguaje html, continúa leyendo.
Una de las potencialidades de este editor es que podemos pasar al código fuente sin ningún problema pinchando en el icono 
Pero es que, además, si selecciono en la vista Diseño 
un determinado elemento, al pinchar en la vista Código aparecerá el código, correspondiente a ese elemento, también seleccionado. Lo cual es muy de agradecer pues, a veces, es muy difícil la localización entre todo el código de un determinado fragmento.
Por ejemplo, si señalo la última imagen que he puesto en este documento, la imagen de la vista Diseño y voy al código fuente, aparecerá seleccionado todo el código correspondiente a la inclusión de esta imagen.
La etiqueta está diciendo que la imagen se llama 142.png que se encuentra en la carpeta imag y que hay que salir de la carpeta en la que está el archivo de la página para pillarla (eso quieren decir los dos puntos). Es decir, que la carpeta en la que se encuentra el documento éste y la carpeta imag se encuentran en el mismo nivel. Mira la estructura:
Veamos una ruta de una imagen colocada en el index.htm Aquí no habrá los dos puntos pues la página está "por encima"
Las letras src vienen de source, fuente en inglés. Aquí nos encontramos también el texto alternativo a la imagen alt. Es el texto que se mostrará cuando el visitante visite nuestra página sin que se carguen las imágenes (una opción de navegación que permite mayor rapidez en las descargas). También, pero sólo en el Explorer, ese texto aparecerá cuando aproximemos el cursor a la imagen. Observa, por otro lado, el tema de la tilde. Yo he colocado el texto en la vista Diseño en el Inspector de Propiedades... y he colocado la tilde correspondiente: 
Dreamweaver ha transformado la tilde (carácter especial) en un código legible por todos los navegadores: ó Finalmente aparece la anchura y la altura de la imagen.
13.- Salto de línea
Probablemente a estas alturas del curso ya te habrás encontrado con la necesidad de separar dos líneas de texto por algo menos del espacio que se origina al pulsar el intro del teclado.
Ello se consigue con Insertar > HTML > Caracteres especiales > Salto de línea
Vamos a observar el código que se genera cuando pulsamos el intro (lo pulso):
El párrafo se ha encerrado entre las etiquetas <p> de apertura y </p> de cierre.
Veamos ahora el código que se genera cuando insertamos un salto de línea (lo inserto):
Observa que el párrafo no se ha cerrado. En vez de cerrarse se ha escrito la etiqueta <br> de break, romper. Como este salto de línea se emplea muchísimo y está ciertamente bastante escondido, es más fácil aprenderse el atajo del teclado: se trata de pulsar el intro pero con la tecla de la flecha de las mayúsculas pulsada.
14.- Listas de cosas
Cuando queremos realizar una enumeración de objetos, lo hacemos pulsando la tecla del panel de propiedades 
(una vez que nos hayamos situado en el primer objeto de la lista).
Estas son mis aficiones:
- El cine
- La lectura
- Los paseos por el campo
Para acabar la enumeración volvemos a pulsar el mismo botón:
Veamos el código que se ha generado:
Se introduce la lista con la etiqueta <ul> unordered list y después, cada uno de los objetos de la lista con las etiquetas <li> list item de apertura y su correspondiente de cierre.
Si, en cambio, queremos que nuestra lista sea numerada, pulsamos el botón: 
Estas son mis aficiones por orden de preferencia:
- El deporte de aventura
- La música rock
- Salir de juerga con mis amigos
Veamos el código que se ha generado:
La etiqueta <ol> de ordered list, lista ordenada. El resto, es lo mismo que en el caso anterior.
15.- Sangrar el texto
Si deseo que una determinada línea comience algo más allá del margen,
no lo conseguiré dándole al espaciador. Tendré que pulsar el botón 
(Sangría de texto) que permitirá que el texto se sitúe sangrado desde el margen izquierdo. Puedo pulsarlo varias veces. Hacemos una prueba pulsándolo cuatro veces. Para deshacer la accíon pulsaré el botón 
(Anular sangría de texto)
He pulsado 4 veces el botón Sangría de texto. Y pulso intro:
Ahora el margen se guarda. Pulso intro:
Para volver al margen inicial pulsaré la tecla Anular sangría. Pulso intro
Pulso 4 veces la tecla . Esta línea ha vuelto al margen inicial.
Veamos el código generado:
Aparte de la etiqueta del sangrado <blockquote>, comentar la etiqueta <strong> equivalente a la etiqueta <b> bold para poner el texto en negrita.
Hay otra forma de sangrar el texto o de colocar más de un espacio entre dos palabras. Es con Insertar espacio indivisible no breaking space con la secuencia Si lo hacemos desde la vista Diseño se hace con Insertar > HTML > Caracteres especiales > Espacio indivisible
Como veis hay un atajo que conviene aprenderse pues esta secuencia se utiliza mucho. Es la combinación de teclas Ctrl + Mayúsculas + Espacio
Hacemos una prueba
Hacemos una prueba
Hacemos una prueba
Hacemos una prueba
Hacemos una prueba
Vista del código:
En realidad, aunque el no breaking space se ideó para que dos palabras separadas no puedan nunca verse cortadas en dos líneas diferentes, la utilidad mayor, es la que acabamos de ver.
Otra utilidad es el relleno de celdas de una tabla, por ejemplo, para mostrar la celda vacía pero con sus paredes y espacio interior perfectamente definido. Por ejemplo, en esta tabla:
| relleno |
Según la versión del navegador que emplees, la celda primera y la segunda puede que las veas diferentes. Mira el código:
En la primera celda hay un y en la segunda no hemos puesto nada. En el navegador ambos están vacías...
