|
Buscador
Secciones
Otras zonas
Otras zonas
Libros
Registro
Otras Webs
|
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.
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:  En esta ventana del documento, hay 3 zonas importantes, que vamos a tratar de describir a continuación.  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.  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...  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:
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:
Finalmente, nos encontramos información sobre la carpeta donde tenemos nuestro documento, y sobre la carpeta raíz del sitio activo.
|
|
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.
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.
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.
En esta paleta encontramos los siguientes elementos que se pueden insertar en la cabecera de un documento:
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.
| 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. |
| 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á. |
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. |
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 TextoYa 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.
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
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:
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 especialesUno 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 |
|---|---|
| á | á |
| é | é |
| í | í |
| ó | ó |
| ú | ú |
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 "í", 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.
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.
 |
Leer comentarios (159) |
 |
Escribir comentario |
Puntuación: (136 votos) |
|
 |
Votar |
 |
Recomendar este tutorial |
 |
Estadísticas |
Copyright © 1999-2007
Programación en castellano.
Todos los derechos reservados.
Formulario de Contacto -
Datos legales -
Publicidad
Hospedaje web y servidores dedicados linux por Ferca Network
red internet: musica mp3 | logos y melodias | hospedaje web linux | registro de dominios | servidores dedicados
más internet: comprar | recursos gratis | posicionamiento en buscadores | tienda virtual | gifs animados
Tutoriales