Introducción a Dreamweaver 3

En este segundo tema, veremos como crear documentos y editarlos. Empezaremos creando documentos con el elemento m�s simple y a la vez m�s importante que puede tener un documento HTML: texto.

Para crear un documento nuevo, primeramente hemos de asegurarnos que el sitio activo es el sitio en el que queremos trabajar, si no es as�, vayamos a la ventana "site files" donde podremos escoger el sitio activo. Para ello, utiliza men� window > site files.

TRUCO: Puedes abrir la misma ventana usando F5.

Una vez establecido el sitio activo, creemos nuestro primer documento HTML en Dreamweaver. Para hacer esto usamos men� File > New. Un documento en blanco aparecer� en el �rea de trabajo. Este documento a�n no tiene nombre, ya que no lo hemos guardado a disco todav�a, ni tiene t�tulo. Lo �nico que Dreamweaver ha hecho es definir el m�nimo documento HTML que se puede generar, es decir, aunque nosotros no lo veamos Dreamweaver ha creado los tags HTML necesarios para definir un documento HTML: Cabecera (Head) y Cuerpo (Body), tal como vimos que se deb�a hacer en el anterior cap�tulo. L�gicamente, en el cuerpo del documento a�n no hay nada.

TRUCO: Para crear un nuevo documento, puedes utilizar el atajo de teclado CTRL + N (PC) o Manzana + N (MAC).

El aspecto que tiene un documento nuevo, cuando a�n no hemos modificado ni a�adido nada, viene a ser como el que mostramos en la siguiente imagen:

Documento nuevo

En esta ventana del documento, hay 3 zonas importantes, que vamos a tratar de describir a continuaci�n.

Documento sin titulo

En primer lugar, en la parte superior de la ventana, tenemos una informaci�n interesante: El t�tulo HTML que tiene el documento y el nombre con el que el documento se ha guardado en el disco, que aparece entre par�ntesis. La diferencia entre ambos es clara, pero vamos a explicarla convenientemente. Todo documento HTML puede tener un t�tulo, este t�tulo es mostrado normalmente por los navegadores en la parte superior de la ventana, cuando son visualizados. Este t�tulo adem�s es un elemento que ser� utilizado por algunos buscadores para indexar nuestro documento, por tanto, es conveniente que el t�tulo HTML del documento sea descriptivo.

Por otro lado, el nombre del documento, es en s� el nombre f�sico con el que ser� almacenado el documento en el disco duro. Este nombre ser� el que se utilice para referirnos al documento desde cualquier enlace HTML. Todo nombre de documento o fichero que vaya a ser publicado en Internet, debe cumplir algunos requisitos, que veremos posteriormente.

Mini launcher

En la esquina inferior derecha de la ventana del documento, nos encontramos varias cosas. Tenemos el Mini Launcher al que hac�amos menci�n en el anterior cap�tulo. Desde �l podemos abrir distintas ventanas y paletas de Dreamweaver, usando los botones que aparecen. Los elementos que aparezcan en este Mini Launcher, pueden variar seg�n se hayan ajustado las preferencias del programa. Como ya vimos, podemos elegir que elementos se mostrar�n y cuales no. Despu�s, se nos muestra una informaci�n sobre el tama�o en Ks actual del documento, y el tiempo que se tardar�a en cargar en condiciones normales. Este c�lculo se hace en funci�n a la velocidad de la conexi�n que hayamos establecido por defecto en las preferencias del programa. Esta informaci�n puede ser de utilidad para optimizar los documentos y controlar el exceso de tama�o de nuestros documentos. Por �ltimo, encontramos el tama�o o resoluci�n en pixels que tiene actualmente la ventana en la que estamos dise�ando nuestro documento. Este elemento puede ser de gran ayuda, ya que simula con m�s o menos precisi�n el tama�o real que tendr� el documento al ser visualizado en un navegador. Podemos escoger cualquiera de las configuraciones definidas en las preferencias del programa, utilizando el men� desplegable que aparece cuando hacemos click sobre la peque�a flechita negra. De esta manera, podemos tener control visual sobre la resoluci�n a la que estamos dise�ando. Como norma, es bueno utilizar un tama�o de 800 x 600, que actualmente se puede considerar el m�nimo com�n.

Bueno, ahora que nos hemos familiarizado con la ventana del documento, empecemos a definirlo. Lo primero que haremos ser� definir las propiedades de nuestro documento, tales como titular, color o imagen de fondo, etc.. Para ello, utilizamos men� Modify > Page Properties...

Properties

Encontraremos una ventana similar a la que vemos arriba, en la que podemos ajustar las propiedades de nuestro documento activo. Veamos todas las posibilidades que tenemos:

  • Title: En este campo podemos a�adir el titular HTML que queremos para el documento.
  • Background Image: En caso de que tengamos una imagen de fondo para nuestro documento, en este campo insertar�amos la URL del fichero en cuesti�n. Si no recordamos la URL exacta, podemos utilizar el bot�n Choose..., para navegar por nuestro disco duro hasta seleccionar el fichero de la imagen que queremos. Dreamweaver calcular� entonces la URL.
    TRUCO: Una imagen de fondo en un documento HTML no tiene porque ser excesivamente grande, podemos utilizar una imagen peque�a, y despu�s esa imagen se duplicar� tantas veces como sea necesario para cubrir el tama�o de la ventana cuando se visualice en un navegador. De esta forma, podemos considerar una imagen de fondo como un patr�n de relleno. Es importante que tengamos en cuenta esto a la hora de definir nuestra imagen de fondo, para que los bordes de dicha imagen no se noten excesivamente al unirse unas con otras. En ese sentido, un buen truco es definir una peque�a imagen que sea sim�trica, de manera que el efecto visual de continuaci�n se cumpla.

A continuaci�n, encontramos una serie de controles que nos permiten ajustar los colores de distintos elementos del documento. As� podemos ajustar los colores para los siguientes:

  • Background: Ajusta el color de fondo del documento.
  • Text: Ajusta el color por defecto del texto en nuestro documento. Este color ser� el que tenga todo el texto de nuestro documento, excepto aquellos que se modifiquen particularmente, como veremos posteriormente.
  • Links: Los enlaces de un documento HTML se muestran en un color distinto, para que destaquen sobre el resto del documento. Normalmente este color es azul, aunque podemos utilizar este control para establecer otro color para los enlaces de nuestro documento.
  • Visited Links: Establece el color por defecto para los enlaces de nuestra p�gina cuando han sido visitados.
  • Active Links: establece el color por defecto para los enlaces de nuestra p�gina cuando son pulsados por el usuario.
  • M�rgenes: En los siguientes cuatro controles, podemos establecer cuales ser�n los m�rgenes del documento cuando sea visualizado. Por defecto, estos m�rgenes son unos 5 pixels, tomando como referencia la esquina superior izquierda del navegador.
    TRUCO: En realidad, solo podemos ajustar el margen izquierdo y superior del documento, siempre con respecto a la esquina superior izquierda. �Entonces, porque tenemos 4 controles?. La respuesta es que 2 de esos controlen indican el margen para Netscape y los otros 2 para Explorer. Esto es as�, porque estos dos navegadores no siempre funcionan igual.

    Explorer entender� los valores para el margen como Left Margin, Top Margin, es decir, el valor en pixels del margen izquierdo y el superior. Por el contrario, para ajustar estos valores en Netscape hemos de usar Margin Width y Margin Height, que viene a ser el margen a lo ancho y el margen a lo alto.

    Asi que, si queremos mantener el mismo aspecto en los dos navegadores, los valores de Left Margin y Margin Width, y los de Top Margin y Margin Height deben ser id�nticos.

    Dreamweaver crear� los par�metros para los dos navegadores, aunque cada uno entender� el suyo.

  • Document Encoding: En esta lista desplegable, podemos elegir el juego de caracteres que usar� nuestro documento. El juego normalmente usado en occidente es el Western (Latin 1).
  • Tracing Image: Dreamweaver 3.0 ofrece una funcionalidad muy interesante para dise�ar p�ginas web. Ofrece la posibilidad de utilizar una imagen como referencia para dise�ar nuestro documento. Es algo parecido a calcar una imagen. Es decir, podemos dise�ar la apariencia de nuestro documento en otro programa. Despu�s, insertamos esa imagen en Dreamweaver y la utilizamos como referencia para crear nuestro documento HTML. Esta imagen no ser� visualizada posteriormente por ning�n navegador, ni existir� en el c�digo HTML de nuestra p�gina. Es solamente una imagen de referencia que ser� visible en Dreamweaver. Pues bien, este campo nos permite escoger la imagen de referencia.

    Esta imagen, puede ser m�s o menos transparente. Este nivel de transparencia lo podemos ajustar en el control inmediatamente por debajo del anterior campo.

Finalmente, nos encontramos informaci�n sobre la carpeta donde tenemos nuestro documento, y sobre la carpeta ra�z del sitio activo.

NOTA: Algunos ajustes como el color del texto o los m�rgenes, no siempre ser�n respetados por los navegadores en los que se visualicen nuestros documentos. Hay que tener en cuenta que algunos de estos par�metros no son entendidos por todos los navegadores y en otros casos, aunque si sean entendidos, el usuario tiene la opci�n de ajustar las preferencias de su navegador para que no se tengan en cuenta. Por tanto, cuando dise�amos para la web hemos de tener siempre presente, que el aspecto final de nuestros documentos puede variar mucho de un navegador a otro.

.�Insertando elementos en la cabecera del documento

Como ya hemos dicho anteriormente, todo documento HTML se compone de dos partes fundamentales: Cabecera y Cuerpo. En este subcap�tulo, veremos para que sirve la cabecera y que tipo de informaci�n podemos insertar en ella.

La cabecera de un documento HTML tiene como fin fundamental aportar al navegador informaci�n relativa al documento, as� como informaci�n que puede ser �til para el correcto funcionamiento para el resto de los elementos insertados en el cuerpo del documento, aunque esta no se visualiza. La marca HTML que delimita la cabecera de un documento es <HEAD> </HEAD>. Todos los elementos incluidos entre el comienzo de la marca y el final de la marca, se consideran elementos de la cabecera.

Uno de los elementos m�s habituales que se incluyen en la cabecera de un documento HTML es el t�tulo, que viene definido por la marca HTML <TITLE> </TITLE>. Realmente, al a�adir un t�tulo a nuestro documento HTML utilizando la ventana de propiedades de la p�gina, lo que Dreamweaver hace es modificar la marca HTML en la cabecera del documento.

Pero no solo el t�tulo del documento tiene cabida en la cabecera. Por ser una parte que permanece oculta pero que a su vez es le�da en primer lugar por el navegador, esta es la zona ideal para a�adir elementos como informaci�n sobre el propio documento (metainformaci�n), o la definici�n de estilos de HTML din�micos o la definici�n de funciones javascript que ser�n invocadas posteriormente desde el documento.

METAINFORMACION: Se entiende por metainformaci�n informaci�n relativa al documento o a sus contenidos. As�, podemos considerar metainformaci�n de un documento informaci�n sobre el autor, fecha de creaci�n, descripci�n del documento, lista de palabras claves del contenido, etc. Como vemos, esta metainformaci�n aporta datos complementarios al documento, aunque no forman parte del contenido del documento estrictamente hablando.

Este tipo de informaci�n resulta de gran utilidad para que nuestro documento sea indexado en las bases de datos de los buscadores.

En un momento determinado, cualquier informaci�n relativa al documento a juicio del autor puede ser incluida en la cabecera del documento. Para ello se utiliza la marca HTML <META>

L�gicamente, existen otros elementos que se pueden a�adir a la cabecera, aunque su uso no esta muy extendido, entre otras cosas porque o bien no est�n soportadas por los navegadores m�s habituales, o bien no se encuentran reflejadas en el est�ndar marcado por el W3C.

Ya hemos visto anteriormente como modificar o editar el titular de una p�gina. Veamos ahora las posibilidades que ofrece Dreamweaver para insertar otros elementos de utilidad en la cabecera.

En primer lugar, lo que haremos ser� visualizar la cabecera del documento, que por defecto permanece oculta. Para ello utilizaremos men� View > Head Content. Al hacer esto, observaremos como la ventana del documento activo se transforma para mostrarnos el contenido de la cabecera en la parte superior de la ventana, como podemos apreciar en la imagen siguiente.

Cabecera

Como vemos, en esta cabecera ya hay alguna informaci�n, si pulsamos sobre cualquiera de los elementos que hay en la cabecera, en la paleta de propiedades aparecer�n los ajustes del elemento en cuesti�n. Concretamente en este ejemplo tenemos el titular del documento, y a continuaci�n informaci�n descriptiva del tipo de contenido del documento.

Ahora que tenemos la cabecera del documento visible, podemos a�adir f�cilmente elementos o modificar los existentes. Por ejemplo, para modificar el titular del documento actual, bastar�a con seleccionarlo en la cabecera, y a continuaci�n modificar los par�metros en la paleta de propiedades.

Paleta de propiedades

Seg�n se muestra en la imagen superior, cambiar el t�tulo de un documento utilizando este m�todo no es complicado. Bastar�a con modificar el contenido del campo que se muestra para que Dreamweaver actualice autom�ticamente las marcas de HTML y el documento adopte el nuevo t�tulo. De forma parecida podr�amos ir modificando los dem�s elementos.

Veamos como insertar elementos en la cabecera. Primero hemos de decir que no cualquier elemento puede ser insertado en la cabecera. Mas bien son unos pocos los elementos que pueden ser insertados en ella, como hemos explicado anteriormente. Los elementos m�s comunes que se pueden insertar en una cabecera se encuentran accesibles a trav�s del men� Insert > Head, aunque por comodidad es mejor utilizar la paleta Object > Head.

Object Head

En esta paleta encontramos los siguientes elementos que se pueden insertar en la cabecera de un documento:

  • Meta: Insertar�a metainformaci�n del documento. Como ya hemos visto antes esta metainformaci�n puede ser cualquier cosa que se considere relevante o de inter�s relativo al documento. La marca HTML encargada de esto es <META>, como ya hemos dicho. Esta directiva tiene dos par�metros: un primer par�metro en el que se indica el tipo de informaci�n que se quiere dar, y un segundo par�metro en el que se pasa la informaci�n en si. Para entenderlo mejor veamos un ejemplo:

    Si quisi�ramos introducir informaci�n sobre el nombre del autor del documento, tendr�amos un primer par�metro que indicar�a que vamos a dar informaci�n sobre el autor y en un segundo par�metro tendr�amos el nombre del mismo, tal como vemos a continuaci�n:

    <META NAME="autor" CONTENT="Oscar Reales">

    Existen algunas metainformaciones que est�n definidas en el est�ndar de HTML marcado por el W3C, pero en realidad podemos pasar la informaci�n que queramos en esta directiva HTML. De tal forma, podemos incluir el tel�fono del autor si quisi�ramos Para hacerlo tendr�amos un comando como el siguiente:

    <META NAME="tel�fono del autor" CONTENT="999 9999 999">

    En fin, no existe limite para el uso de esta directiva, aunque tampoco parece que sea de gran utilidad suministrar determinado tipo de informaci�n. Basta con incluir en el par�metro NAME el tipo de informaci�n que vamos a dar y en el par�metro CONTENT el contenido de esa informaci�n.

    Existe una particularidad en esta acci�n. Como hemos dicho anteriormente, existen algunos tipos de metainformaci�n que se han predefinido en el est�ndar de HTML. Cuando pasamos este tipo de informaci�n, el primer par�metro cambia por el par�metro HTTP-EQUIV. De tal forma, tenemos el siguiente ejemplo:

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

    Realmente, todo esto es mucho m�s f�cil cuando lo hacemos con Dreamweaver, ya que no tenemos que preocuparnos por la sintaxis adecuada, simplemente seleccionamos el objeto META y a continuaci�n pasamos los par�metros en la ventana de dialogo que aparece.

    Insertar metas
  • Keywords: Inserta una listas de palabras clave en la cabecera del documento. Esta lista de palabras clave ser� utilizada por algunos buscadores para indexar las p�ginas en sus bases de datos. En realidad, keywords o palabras claves, no deja de ser metainformaci�n y en realidad esta lista de palabras claves es pasada a trav�s de la marca HTML <META>. Lo que ocurre es que este tipo de metainformaci�n, sin ser un est�ndar reconocido, es una metainformaci�n com�nmente aceptada. En la ventana que aparece podemos incluir una lista de palabras claves, separadas por comas. Es conveniente no dejar espacios entre las palabras.
    TRUCO: Es importante para obtener un buen resultado en la indexaci�n de los buscadores que las palabras claves definidas en esta metainformaci�n, se corresponda lo m�s posible con el contenido de la p�gina. En caso contrario esa p�gina sufrir� una penalizaci�n que la har� perder posiciones en el �ndice del buscador.
  • Description: Metainformaci�n que describe brevemente el documento actual. Al igual que ocurre con keywords, esta informaci�n es utilizada por algunos buscadores para indexar nuestras p�ginas. En otras ocasiones, esta informaci�n es mostrada junto a la URL de nuestra p�gina en esos buscadores, de manera que el usuario tenga una idea del contenido del enlace. Esta informaci�n, es por tanto muy importante para conseguir que un usuario que alcance nuestra URL se interese por venir a nuestro sitio.
    TRUCO: La descripci�n no debe ser muy larga. Unas 20 palabras son suficientes. Al igual que ocurre con las palabras clave, una descripci�n que no se corresponda con el contenido de la p�gina penalizar�.
  • Refresh: Es una metainformaci�n reconocida por el est�ndar de HTML. La mayor�a de los navegadores actuales soportan esta opci�n. Con esta acci�n meta, tenemos la posibilidad de recargar la p�gina actual, o cualquier otra, cuando haya transcurrido un tiempo determinado. Es una opci�n que puede tener algunos usos interesantes. Por ejemplo, podemos hacer que una p�gina llame a otra cuando hayan transcurrido 10 segundos. Las utilidades de esta opci�n pueden ser varias.
    Refresco

    Como vemos en la ventana superior, ajustar los par�metros de esta acci�n, no es muy dif�cil. Primeramente insertamos el tiempo que deseamos que transcurra antes de realizar el refresco. A continuaci�n, indicamos la URL que se cargar� transcurrido ese tiempo, o si por el contrario queremos refrescar el documento actual.

    RECOMENDACI�N: Esta funci�n, que es en s� muy atractiva, tiene el inconveniente de que penaliza en la indexaci�n de algunos buscadores. Por tanto, conviene usarla con moderaci�n en caso de que queramos tener una buena posici�n en esos indices. Cuando no quede m�s remedio que utilizarla, siempre es mejor a�adir tiempos largos para el refresco de la p�gina, que excesivamente cortos.
  • Base: Normalmente, en todo documento HTML, cuando usamos la nomenclatura relativa para describir los enlaces del documento (veremos esto en m�s profundidad en otro tema), se toma como base el documento actual. Sin embargo, HTML prev� una marca que permite modificar esta base relativa a partir de la cual se buscara el enlace referenciado. Esta es la marca <BASE>. De esta forma, podemos hacer que el documento que se tome como referencia para las URL relativas sea otro distinto al actual insertando este elemento en la cabecera del documento.
  • Link: El elemento LINK es un elemento algo oscuro y que, a pesar de que esta definido claramente en el est�ndar de HTML, no esta soportado como debiera por los navegadores actuales. En realidad su misi�n es aportar cierto sentido l�gico a algunos enlaces de la p�gina actual. Cuando definimos un enlace en HTML, lo �nico que hacemos es referenciar el documento que ser� cargado cuando el usuario active ese enlace. Ahora bien, no se define ning�n tipo de relaci�n entre ese enlace y el documento actual. En teor�a esta directiva en la cabecera del documento, servir�a para describir la relaci�n l�gica que el documento actual tiene con ese documento referenciado en el enlace.

    Por ejemplo, se puede utilizar esta directiva para indicar que el documento referenciado es el documento previo en una serie de documentos secuenciales, o el siguiente. De esta manera, los navegadores que entiendan esta funcionalidad pueden realizar alguna acci�n consecuente. Como comentamos, esta directriz no se utiliza mucho, y no es soportada por los navegadores m�s comunes.

    Un caso en el que esta directriz es de cierta utilidad es el caso del WebTV. WebTV interpreta esta directriz para saber cual es el siguiente documento en una lista secuencial y precargarlo, de manera que cuando el usuario haga click en el enlace, la navegaci�n sea m�s r�pida.

NOTA: Como dijimos en el primer tema, Dreamweaver utiliza una tecnolog�a llamada Roundtrip, para que cualquier cambio visual en el documento genere inmediatamente el c�digo HTML necesario en el documento y viceversa. Si quiere comprobar que todos los elementos incluidos en la cabecera se han a�adido convenientemente al c�digo HTML, solo tiene que abrir la ventana del c�digo HTML, en Men� Window > HTML Source. Si lo desea puede utilizar el Lanzador o el Mini Launcher para abrir esta ventana. Observe como todos los elementos a�adidos en su documento de manera visual, se han a�adido tambi�n al c�digo HTML.

Para comprobar la sincronizaci�n perfecta entre el modo de edici�n visual y el modo de edici�n en c�digo, pruebe a eliminar manualmente algunas de las directivas HTML incluidas en el c�digo. Cierre la ventana y observe como los cambios son reflejados en el documento visual.

.�Insertando Texto

Ya hemos visto como modificar las propiedades del documento, y tambi�n como a�adir elementos a la cabecera del mismo. Pero a�n no tenemos nada en el cuerpo del documento, es decir, ahora mismo no visualizar�amos nada en un navegador si trat�ramos de ver nuestro documento.

En este subcap�tulo veremos como a�adir texto a nuestro documento, de manera que por fin tengamos algo que mostrarle al mundo.

Nada m�s f�cil de hacer en Dreamweaver (mucho m�s si tenemos algunos conocimientos de mecanograf�a). Primero debemos asegurarnos que la parte activa del documento es el cuerpo y no la cabecera. Si nos molesta la cabecera podemos ocultarla usando men� View > Head Content. De esta manera toda la ventana mostrar� exclusivamente el contenido del cuerpo del documento.

Hagamos click sobre el documento y observemos como aparece parpadeante una barra invertida en la posici�n actual, es el cursor que indica la posici�n actual en que nos encontramos dentro del documento. En esa posici�n, podemos escribir o a�adir cualquier elemento al cuerpo del documento.

Escribamos "Hola Mundo, esta es mi primera p�gina creada con Dreamweaver" sobre el documento y previsualicemos los resultados en un navegador. Para ello, utilizamos men� File > Preview in Browser... y autom�ticamente Dreamweaver lanzar� el navegador seleccionado y nos mostrar� en el nuestro documento.

TRUCO: Si has definido correctamente los navegadores en las preferencias del programa, puedes utilizar F12 para abrir el navegador primario o CTRL + F12 (PC) Manzana + F12 (Mac), para abrir el secundario.

Ahora que ya hemos visto que esto funciona, veamos realmente lo que Dreamweaver ha hecho. Cuando hemos escrito el texto sobre el documento, Dreamweaver ha insertado los tags adecuados en el c�digo HTML para que nuestro texto sea visualizado por un navegador. Concretamente ha introducido el tag <P> que es el que se encarga de crear un nuevo p�rrafo. Puedes comprobarlo abriendo la Ventana del c�digo HTML, usando el Lanzador o el Mini Lanzador en la esquina derecha de la ventana.

Hagamos ahora otra prueba, en la Ventana de c�digo, localiza el texto que introdujiste anteriormente y modif�calo. Elimina alguna de las palabras, o simplemente inserta algunas nuevas. Ten cuidado de no eliminar ninguna marca HTML en este proceso, solo modifica el texto que hay entre las marcas. Una vez hecho esto, cierra la Ventana de c�digo y comprueba que los cambios realizados de manera directa en el c�digo, se reflejan en el modo de edici�n visual del documento. Previsualiza tu documento en un navegador para ver que estos cambios se han realizado.

Bueno, pues como ver�s, a�adir texto a un documento HTML en Dreamweaver no es muy distinto de escribir un documento normal en un procesador de textos. Esta es una de las razones por las que las herramientas de edici�n de p�ginas HTML son tan �tiles.

Debes observar alguna peculiaridad. Cada vez que introduces un salto de linea, con el uso de la tecla return, Dreamweaver insertar� un nuevo p�rrafo. en el c�digo HTML. As�, puedes crear tantos p�rrafos como desees en un documento.

Si seleccionas uno de estos p�rrafos, observa que en la esquina inferior izquierda aparecen una serie de marcas HTML. Primeramente aparecer� <body> y a continuaci�n tendr�s una <p>. Esto indica que tienes el cursor situado en un p�rrafo., que esta a su vez situado dentro de la marca <body>. Selecciona todo el texto de un p�rrafo. Observa como la <p> aparece en negrita, indicando que todo el contenido de ese tag HTML est� seleccionado. Deselecciona el texto de ese p�rrafo. y haz click sobre la <p> que aparece en la esquina inferior izquierda de la ventana. Observa como ahora, todo el texto del p�rrafo se ha seleccionado autom�ticamente.

Haz click ahora sobre <body> y observa como todo el contenido en el cuerpo del documento se ha seleccionado. Esta manera de trabajar y seleccionar elementos es muy �til en la edici�n de documentos. En esta zona contextual de la ventana, ir�n apareciendo los distintos tags que hay hasta llegar a la posici�n actual del documento en la que te encuentras. De tal manera, si tuvi�ramos una palabra en negrita, que forma parte de un p�rrafo. y que a su vez forma parte del cuerpo del documento, al seleccionarla o situar el cursor en su posici�n, tendr�amos en la esquina inferior izquierda los siguientes tags HTML:

<body> <p> <b>

Como puedes ver, estos tags van siempre desde el gen�rico al particular, podr�amos decir que van desde el "tag" padre al "tag" hijo. Como es l�gico, todos los elementos incluidos en el cuerpo del documento, estar�n a dentro de la marca <body>.

Pero esto no es todo, seleccionemos ahora parte del texto de un p�rrafo. Con el seleccionado, abramos la ventana del c�digo HTML. Observamos como dentro de la ventana de c�digo HTML aparece seleccionado el texto que seleccionamos en el modo de edici�n visual. En todo momento, la sincronizaci�n entre el c�digo y el documento visual es total. As�, es muy f�cil editar y modificar elementos de nuestros documentos, tanto de manera visual como de manera directa en el c�digo HTML.

Ahora que estamos algo m�s familiarizado con la manera de editar documentos en Dreamweaver, y con su filosof�a Roundtrip, podemos a�adir algunos p�rrafos m�s a nuestro documento, de manera que tengamos m�s elementos con los que trabajar. H�galo.

Habr� observado, como le indicamos anteriormente, que cada vez que inserta un salto de l�nea, se inserta un nuevo p�rrafo. Esto esta bien pero, �Qu� ocurre si queremos pasar a otra l�nea sin insertar un nuevo p�rrafo? HTML tiene una marca que se encarga de realizar esta funci�n. Esa marca es <BR>. Esta marca es una marca abierta, es decir, no necesita marca de cierre. Sabiendo lo que sabemos ahora, podr�amos insertar esta marca de manera directa en el c�digo HTML de nuestro documento, all� donde la necesit�ramos, pero Dreamweaver puede hacer esto por nosotros.

Estando el cursor situado en el punto en el que queremos insertar este salto de l�nea especial, bastar� con que usemos men� Insert > Line Break. Tambi�n podemos localizar esta funci�n en la paleta Objects > Common o tal vez nos resulte m�s c�modo utilizar el atajo de teclado May�sculas + Return (ambas plataformas). De esta manera, podemos provocar un salto de l�nea dentro del mismo p�rrafo.

Continuemos con algunas funcionalidades simples. Tal vez queramos separar el contenido de un p�rrafo. de los dem�s con alg�n elemento gr�fico. En ese caso, podemos insertar una l�nea horizontal, a modo de separador. La marca HTML que realiza esta funci�n es <HR>. Al igual que <BR>, esta es una marca HTML abierta.

Barra horizontal

En la paleta de propiedades, cuando insertas o seleccionas una linea horizontal en el documento, puedes ajustar los par�metros de esa l�nea. Se puede ajustar el ancho y el alto, bien en pixels, bien en t�rminos porcentuales. Tambi�n podemos ajustar la alineaci�n de la l�nea. Por �ltimo, podemos escoger que la l�nea sea plana, o que por el contrario presente un aspecto m�s tridimensional, activando o desactivando el par�metro "shading".

Esta ser�a la l�nea horizontal que tendr�amos usando los par�metros de la imagen superior:


Tambi�n podemos utilizar las opciones cortar y pegar al portapapeles, para traer texto de otro documento o de otra aplicaci�n, o para llevarnos texto del documento actual a otro sitio. Aqu� hay algunas peculiaridades de Dreamweaver, que tenemos que tener en cuenta.

Si observamos las opciones disponibles para copiar y pegar en el men� Edit, veremos que hay algunas opciones m�s de las que hay normalmente

Men� Edit

Junto a las opciones de Cut, Copy y Paste habituales, encontramos otras dos opciones: Copy Text Only y paste as Text.

Como hemos estado viendo, Dreamweaver mantiene un doble modo de edici�n, uno visual y otro directamente en el c�digo HTML. Cuando seleccionamos algo en el modo visual, realmente estamos seleccionando el texto que vemos m�s los "tags" de HTML que est�n relacionados. Por tanto, si copiamos algo y nos lo llevamos a un editor de texto, nos estaremos llevando todo el c�digo HTML.

Esto, que puede parecer absurdo, es totalmente l�gico ya que, si copiamos y pegamos entre distintos documentos de Dreamweaver, estaremos copiando todo el c�digo HTML, que es al fin y al cabo lo que necesitamos para que los documentos sean visualizados correctamente en los navegadores.

Ahora bien, puede que necesitemos copiar solo el texto, sin copiar el c�digo HTML. Para esto tenemos esas dos acciones a�adidas en Dreamweaver:

  • Copy Text Only: La traducci�n literal es "Copiar solo texto". Con esta opci�n, copiaremos al portapapeles solo el texto seleccionado, sin copiar los "tags" HTML que lo generan.
  • Paste as Text: La traducci�n literal es "Pegar como texto". En el caso de que hayamos copiado una parte del documento, y en consecuencia tambi�n su c�digo, podemos utilizar esta opci�n para pegar solo el texto en otro documento de Dreamweaver.

Entendiendo esta manera de interactuar con el contenido del portapapeles, nos ser� mucho m�s f�cil entender otra peculiaridad de Dreamweaver. Cuando tratamos de pegar texto que ha sido copiado de un documento de texto generado con otra aplicaci�n, lease Microsoft Word o cualquier otro procesador o documento, veremos que al pegarlo en el documento HTML de Dreamweaver, este pierde todo el formato que pudiera tener el programa origen.

Esto es l�gico, ya que los comandos que formatean el texto en otras aplicaciones, no son comandos HTML, por tanto, cuando pegamos ese texto en Dreamweaver, no estamos pegando ning�n comando HTML que lo formate�. Una vez pegado ese texto, tendremos que formatearlo de nuevo, para que Dreamweaver vaya a�adiendo las marcas HTML necesarias para su formateado.

En fin, con lo que hemos aprendido hasta ahora, tenemos suficientes conocimientos para crear nuestro primer documento. Experimente un poco con todas estas opciones, crea un documento en el que importes texto a trav�s del portapapeles desde otras aplicaciones, introduce texto por ti mismo, crea y modifica varios p�rrafos o separarlos con l�neas horizontales. Recuerda que la pr�ctica es la mejor maestra.

.�Insertando caracteres especiales

Uno de los mayores problemas que se encontraba un editor de p�ginas web hace unos a�os, era la introducci�n en el c�digo de caracteres especiales, que por razones t�cnicas no estaban cubiertos en el juego de caracteres normales empleados y mostrados por el HTML en un navegador. Nos referimos a esos caracteres como las vocales acentuadas o la � (tan nuestras), o a las vocales y acentos franceses, o a los s�mbolos matem�ticos, o a s�mbolos como el "copyright" incluso a los s�mbolos que forman parte del HTML.

Una prueba de fuego para un editor web de hace unos a�os, pod�a ser realizar una p�gina web que mostrar� c�digo HTML. Como hacer para que los navegadores interpretar�n determinados caracteres como texto, en lugar de como HTML o c�digo del documento.

Para ello, existen una serie de entidades especiales que forzaban al navegador a mostrar un car�cter especial. As� por ejemplo, las vocales acentuadas ven�an a indicarse dentro del HTML de la siguiente forma:

Vocal Entidad especial
&aacute;
&eacute;
&iacute;
&oacute;
&uacute;

Como vemos, todas estas entidades comienzan por el s�mbolo "&" y terminan por ";". esto no es casualidad. HTML interpreta esos s�mbolos como s�mbolos de escape para el HTML. Lo que esta incluido entre esos dos s�mbolos no es HTML y por tanto no debe ser interpretado como tal.

De esta manera, con el conocimiento de todas las entidades especiales soportadas, pod�amos incluir caracteres especiales, no soportados directamente por el HTML en el contenido de nuestros documentos. El problema, como es evidente, era la memorizaci�n de tantas entidades y lo tedioso de introducirlas manualmente.

Actualmente, esto es mucho m�s f�cil, ya que Dreamweaver inserta cuando es preciso esas entidades especiales en el c�digo HTML por nosotros. De tal forma, cuando tecleamos una "�", Dreamweaver a�ade al c�digo la correspondiente entidad "&iacute;", como podemos comprobar visualizando el c�digo de esta p�gina.

Por tanto, la inclusi�n de caracteres especiales en Dreamweaver se simplifica mucho. Adem�s de esto, Dreamweaver pone a nuestra disposici�n una serie de caracteres especiales para que puedan ser introducidos directamente en nuestros documentos.

Estos caracteres especiales est�n localizables en la paleta Objects > Characters. As�, desde esta paleta podemos incluir s�mbolos como el de Copyright, o marca registrada, el s�mbolo del Yen, incluso el del Euro. Por si todos estos s�mbolos no fueran suficientes, podemos encontrar m�s s�mbolos en el �ltimo objeto incluido en esa paleta. El objeto "Other", abre una ventana donde podemos escoger cualquiera de los s�mbolos que aparecen en ella, para insertarlo en nuestro documento.

Characters

As�, podemos a�adir pr�cticamente cualquier s�mbolo que necesitemos al contenido de nuestro documento, sin la necesidad de teclear y recordar las entidades especiales equivalentes.

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO