Unidad

12. HTML desde Dreamweaver En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver para trabajar sobre el propio cdigo HTML, y no nicamente sobre el editor grfico de la vista diseo. En este tema no se pretende ensearos el lenguaje HTML sino cmo poder realizar algunos reajustes directamente en el cdigo estando dentro de Dreamweaver. En muchas ocasiones veremos que para hacer pequeas correcciones, nos resultar ms cmodo y rpido si lo hacemos directamente desde el cdigo que recurriendo a asistentes. 12.1. Etiquetas Ya sabes que el lenguaje HTML est basado en etiquetas que marcan el inicio y fin de cada elemento de la pgina Web. En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el cdigo HTML de una pgina para darle un ttulo. Consista simplemente en escribir el ttulo deseado entre las etiquetas <title> y</title>. Las etiquetas consisten en poner un mismo comando entre los smbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el smbolo /, indica final y se suele denominar etiqueta de cierre. Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que actan, incluyendo cierto cdigo dentro de la etiqueta. Por ejemplo, un prrafo se inserta entre las etiquetas <p> y </p>, pero es posible cambiar sus caractersticas predeterminadas, como puede ser asignarle una clase de estilo CSS. Para ello, a la etiqueta de apertura anterior habra que aadir el atributo y su valor, quedando <p class="miclase"> y </p>. Tambin hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May + INTRO dentro del cdigo HTML equivale a la etiqueta <br>. Realmente estas etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir el estndar XHTML que obliga a que todas las etiquetas se cierren. Por tanto el salto de lnea anterior se escribira <br />. Otras etiquetas que se cierran sobre s mismas son las imgenes <img />, reglas horizontales <hr /> o elementos de formulario <input />.

Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con la apariencia y contenido definidos en el editor grfico, pero tambin ofrece otras posibilidades para trabajar directamente sobre el cdigo. 2.2. Entidades HTML HTML tambin dispone de cdigos especiales para representar caracteres especiales como pueden ser letras con acentos o no pertenecientes al alfabeto latino internacional, signos de puntuacin o tipogrficos y smbolos especiales que presenten un problema en HTML como < >, que podran malinterpretarse por el inicio de una etiqueta. Estos cdigos pueden mostrarse como un cdigo numrico o con un nombre de entidad. Ambos mtodos son igualmente aceptables, pero ambos debern ir encerrados entre los smbolos & y ;. De este modo, < se escribir como &lt; o &#60; Usar este mtodo es muy aconsejable, de esta forma los navegadores que estn configurados para visualizar juegos de caracteres que no contengan letras como la o la podrn ver el sitio correctamente. En caso contrario estos caracteres se mostraran de forma extraa si no elegimos la codificacin adecuada. En el tema 4 vimos que podamos escribir estos caracteres utilizando el men Insertar. Ahora te mostraremos otra forma para escribir caracteres que no se incluan en el listado de Dreamweaver y que podrs insertar escribiendo sus entidades en la vista de Cdigo.

Aqu tienes una tabla de los caracteres ms utilizados con sus Entidades HTML numrica y de nombre de entidad:

Si escribes ms de un espacio en el cdigo de Dreamweaver, cuando lo visualices en un Navegador slo veras uno. Esto es debido a que en HTML las palabras separadas por ms de un espacio se visualizan separadas de uno. Para saltarte esta norma puedes escribir tantas veces como quieras &nbsp; y se visualizarn tantos espacios como elementos de entidad hayas introducido. Antes de abusar de este tipo de espacios, piensa si no convendra ms aadirle margin o padding CSS.

 12.3. El inspector de cdigo Recordars que Dreamweaver ofrece la posibilidad de trabajar con tres vistas: vista Diseo, vista Cdigo y vista Dividir (Cdigo y Diseo). Todas estas vistas se aplican directamente sobre la ventana del documento.

Pero existe un panel que permite visualizar el cdigo independientemente de la vista aplicada en el documento. Este panel es el llamado Inspector de cdigo y puede abrirse a travs del men Ventana, opcin Inspector de cdigo. Tambin podemos abrir el Inspector de cdigo pulsando F10.

El Inspector de cdigo muestra el cdigo HTML de la misma forma que lo hacen la vista Cdigo y la vista Dividir (Cdigo y Diseo), pero puede resultar ms cmodo trabajar con el panel, ya que puede situarse en cualquier parte de la pantalla, y no se limita slo al espacio del documento. Por ejemplo, si disponemos de una pantalla panormica, podemos tener a un lado el diseo y a otro el cdigo. 12.4. Completar las etiquetas Una de las posibilidades que ofrece Dreamweaver a la hora de trabajar directamente sobre el cdigo HTML es la de completar las etiquetas mientras se van introduciendo. Esto se produce tanto en elInspector de cdigo como en las vistas de cdigo. Imaginemos que deseamos introducir en nuestra pgina un enlace a la pgina de aulaClic, que ha de abrirse en una ventana nueva. En este caso deberamos introducir la etiqueta <a href="http://www.aulaclic.es" target="_blank">Visitar infop</a>, con lo que obtendramos el siguiente enlace: Visitar infop Vamos a ver cmo funciona el mecanismo de completar etiquetas a travs de este ejemplo. Las etiquetas se completan siempre de izquierda a derecha, por lo que lo primero que debemos insertar es el smbolo < . Despus de escribir nosotros este smbolo, Dreamweaver mostrar una lista con todos los comandos que pueden aparecer despus l. Para elegir uno de ellos hay que pulsar dos veces sobre l con el puntero del ratn, o bien, estando seleccionado, pulsar INTRO. En este caso tenemos que elegir a, despus de lo cual desaparecer la lista. En el cdigo tendremos . Podemos continuar escribiendo el nombre de la etiqueta, o seleccionarla de la lista cuando sea visible. Si se trata de la seleccionada en azul, basta con pulsar la tecla Intro. En este caso, como la etiqueta de enlace slo tiene una letra, no necesitamos de esta opcin.

Despus de <a hay que introducir un espacio en blanco. Nada ms teclear el espacio en blanco aparecer otra lista de elementos, que son los que pueden escribirse despus de la a, los atributos de la etiqueta. Tenemos que elegir href. Para hacerlo, podemos optar por seleccionarlo de la lista con doble clic, pulsar h (para que se seleccione) + Intro (para introducirlo) o escribirlo.

Una vez seleccionado, el cdigo quedar como: <href=http://www.infop.hn

En lugar de cerrar ya la etiqueta con el smbolo >, queremos primero indicar que el vnculo ha de abrirse en una ventana nueva. Para ello tenemos que introducir un nuevo espacio, para que se nos muestre otra lista.

En ella hay que elegir target. Entonces el cursor aparecer entre las nuevas comillas dobles, y se mostrar una lista en la que es posible elegir el destino del enlace. Cuando un atributo puede tomar unos valores concretos, estos nos aparecern como opciones.

Como queremos que el enlace se abra en una pgina nueva, seleccionamos _blank. Cuando hayamos completado los atributos, cerramos la etiqueta de apertura con el smbolo > <href=www.infop.hn target=_blank> Ahora podemos introducir el contenido de la etiqueta. Pero es recomendable cerrarla ya y luego introducir el contenido, para que no se nos olvide. Para cerrar la etiqueta basta con escribir </ y automticamente se completar la etiqueta de cierre (</a>). <href=www.infop.hn target=_blank></a>

Tambin podemos configurar Dreamweaver para que introduzca la etiqueta de cierre al cerrar la de apertura. Esto lo hacemos desde el men Edicin Preferencias Sugerencias para el cdigo Cerrar etiquetas. Ahora podemos completar la etiqueta con el texto que servir de enlace.

2.5. Contraer y expandir cdigo Una de las ventajas de Dreamweaver es la posibilidad de seleccionar fragmentos de cdigo y contraerlos para facilitar su legibilidad. Por ejemplo, podemos seleccionar el trozo de cdigo correspondiente a una tabla, como se ve en la siguiente imagen, aunque podemos seleccionar cualquier cdigo:

Con el texto seleccionado, pulsamos en uno de los iconos junto a los nmeros de lnea o el icono Contraer seleccin

. El ejemplo anterior se contraera quedando:

De esta forma podramos ocultar el cdigo que no nos interesa y dejar el resto del cdigo ms legible. Para volver a la situacin inicial basta hacer clic en el icono expandir , o en el signo + que aparece al lado del cdigo contrado. Otro botn que nos ayudar ser el icono Seleccionar etiqueta padre . Este botn selecciona toda la etiqueta que contiene al punto de insercin. A medida que los sigamos pulsando, ir seleccionado las etiquetas en orden jerrquico, aumentando la seleccin. El icono contraer etiqueta completa contrae la etiqueta que contiene al punto de insercin, sin necesidad de seleccionarla primero. Una pega que encontramos es que esto no se guarda, y la prxima vez que abramos el documento aparecer todo el cdigo expandido. 12.6. Errores en el cdigo Al volver al modo grfico es posible ver si hay algunos errores en el cdigo HTML, como puede ser una etiqueta incompleta. El cdigo errneo aparecer en amarillo: Si volvemos al cdigo podremos encontrar el error fcilmente. Para que los errores se resalten, debe de estar pulsado el icono .

En el ejemplo anterior nos hemos comido el cierre de la etiqueta de apertura. Otra forma de detectar errores en el cdigo es fijndonos en los colores. Por ejemplo, si no hemos cerrado una etiqueta o las comillas de un atributo, veremos que los colores del cdigo no son como deberan. Pero ten en cuenta que no todos los errores son visibles a simple vista, por ejemplo escribir mal el nombre de un atributo. Para comprobar la compatibilidad de la pgina web que hayas creado puedes utilizar el desplegable Comprobar pgina . Despligalo y haz clic sobre la opcin Comprobar compatibilidad con navegadores:

 Se abrir la ventana de resultados con todos los posibles problemas o incompatibilidades que se presenten para cada uno de los navegadores y sus respectivas versiones. Si haces clic en la opcin Configuracin se abrir un cuadro de dilogo como ste:

Donde podrs indicar que navegadores y a partir de qu versin quieres que se tengan en cuenta cuando Dreamweaver realiza la comprobacin de compatibilidad.

12.7. Buscar y reemplazar En ocasiones es posible querer buscar dentro de un sitio web todas aquellas pginas que contengan un texto en concreto, una etiqueta en concreto, o parte de estos elementos. Tal vez los queramos buscar porque deseemos trabajar sobre esas pginas y no recordbamos cul de ellas era, o tal vez porque queramos cambiar ese texto o etiqueta por otros. Imaginemos que una persona ha creado un sitio web, en el que la mayora de las pginas tiene al comienzo un texto que hace referencia al nombre del sitio, por ejemplo, todas esas pginas comienzan conPerrosGatos, y tiene la seguridad de que no existe ese texto en ninguna parte de las pginas que no sea al comienzo. Ahora imaginemos que esta persona ha creado una imagen de un perro y un gato, y que quiere cambiar en todas las pginas que contienen el texto PerrosGatos dicho texto por la imagen. En este caso no es necesario que abra una por una todas las pginas que contienen dicho texto, ni tampoco que modifique una por una dichas pginas para cambiar el texto por la imagen. Para realizar esta tarea resulta ms sencillo utilizar la herramienta de Buscar y reemplazar. Puedes abrirla a travs del men Edicin, opcin Buscar y reemplazar, o pulsando Ctrl + F.

Mediante Buscar en puede especificarse en qu documentos buscar. Podemos buscar slo en el documento actual, en todo el sitio (sitio actual completo), o en los archivos seleccionados del sitio (habiendo seleccionado dichos archivos previamente), en los abiertos o en una carpeta en concreto.. A travs de Buscar se especifica si hay que buscarlo en el texto (en la ventana diseo), o en el cdigo HTML (cdigo fuente). Tambin podemos emplear el texto avanzado, por ejemplo si queremos buscar slo texto en determinadas etiquetas, o etiqueta especfica, que nos permite, por ejemplo, buscar etiquetas de determinado tipo y que tengan determinado atributo. Junto a la lista de opciones de Buscar, aparece un cuadro de texto en el que hay que indicar el texto o el cdigo que se desea buscar. En Reemplazar hay que especificar el texto o el cdigo por el que se desea cambiar el texto o cdigo buscado. Si queremos borrar basta con dejarlo vaco. Si no vamos a reemplazar no es necesario. En Opciones encontramos las opciones de bsqueda: si el texto debe coincidir en maysculas y minsculas, si se omitirn los espacios en blanco, si la palabra a buscar debe ser una palabra completao puede formar parte de otra, o si el texto introducido es un patrn de expresin regular. El reemplazo puede hacerse de varias formas, siempre a travs de los botones de la derecha de la ventana. Una de ellas es buscar uno por uno cada uno de los documentos que contengan el cdigo o texto a buscar, y reemplazar cuando se desee. Para ello se utilizan los botones Buscar sig. y Reemplazar. Si se desean buscar todos los documentos que contengan dicho texto o cdigo, y reemplazar en todos ellos, se utilizan los botones Buscar todos y Reemp. todos. O podemos reemplazarlos todos directamente. Cuando se utiliza la opcin Buscar sig., se abre la pgina en la que se encuentra el texto coincidente, resaltando en el cdigo fuente la lnea en la que ste se encuentra. De este modo podemos decidir uno por uno los cambios a realizar. Cuando estemos seguros de querer reemplazar pulsaremos sobre Reemplazar, y cuando no deseemos reemplazar volveremos a pulsar sobre Buscar sig.. Cuando se utiliza la opcin Buscar todos se cierra la ventana de Buscar y reemplazar y se abre un nuevo panel en el que aparecen todos los documentos en el que coincide el texto o el cdigo buscado.

Pulsando sobre el botn vuelve a abrirse la ventana de Buscar y reemplazar. Desde dicha ventana podemos reemplazar en los documentos encontrados, uno por uno, con el botn Reemplazar, o bien reemplazar directamente en todos los documento encontrados, pulsando sobre el botn Reemp. todos. En el panel, cuando se haya reemplazado en algn documento, ste volver a aparecer en la lista junto con un crculo verde, que indica que ya ha sufrido reemplazo.

En ocasiones podemos equivocarnos, al buscar y reemplazar texto o cdigo errneos. Hay que tener mucho cuidado al utilizar esta herramienta, ya que no es posible deshacer los cambios en los documentos que estn cerrados durante la bsqueda y el reemplazo. En el ejemplo anterior, la persona quera buscar el texto PerrosGatos, y reemplazarlo por una imagen. En este caso concreto, lo que se desea sustituir es texto por el cdigo de una imagen, por lo que enBuscar no podramos elegir la opcin Texto, habra que elegir la opcin Cdigo fuente. En Reemplazar con, habra que especificar la etiqueta HTML completa para insertar la imagen. En este caso la etiqueta sera <img scr="imagenes/logo_animales.gif" alt="PerrosGatos" />, teniendo en cuenta que la imagen se llama logo_animales.gif y que se encuentra dentro del sitio en la carpeta imagenes. Como el texto a reemplazar siempre est escrito igual, hemos marcado la opcin Coincidir Maysculas y Minsculas para asegurarnos de que si en otra parte aparece el texto perrosgatos, no sea reemplazado.