Manual de Dream Weaver de Gergen

Poniendo el ttulo
Para crear la estrucura de la plantilla, que servir de base para todas las pginas de la web, hay que tener muy clarito el concepto de Tablas y Celdas, e incluso conocer un poco ms a fondo el HTML. Desde luego, podemos crear tablas sin recurrir al cdigo HTML, pues tanto el Dreamweaver como el resto de programas lo permiten, pero os aseguro que os liaris mucho ms si no sabis como queda el cdigo por dentro. Confiad en m como hasta ahora. Como siempre, os lo explicar paso a paso. Veris como no es tn dificil. En primer lugar crearemos el archivo de la plantilla, llamandola "plantilla1.htm". Le ponemos el "1" por si queremos mas tarde hacer experimentos. Para crearla abrid el Dreamweaver y pulsad en "Archivo" + "Nuevo" o "Archivo" + "Nueva Ventana" si lo hacis desde la ventana "Sitio" del Dreamweaver. En ambos casos aparece una ventana nueva. Para empezar vamos a guardarla con el nombre "plantilla1.htm". Ya sabis, pulsad en "Archivo" + "Guardar como" y escogis la carpeta donde guardis la web. Que cosas van a ser comunes a todas las pginas de nuestra nueva web? Pensad un poco..... ya? Por ejemplo, el ttulo de las pginas, aunque puede ser distinto en cada pgina, seguro que nos conviene que empiecen con el nombre de nuestra web. Es decir, mi web se llama CreaTuWeb, de modo que todas las pginas de la misma, tienen un ttulo que empieza por esa palabra. Ms tarde, a cada una de las pginas le puedo poner (optativo) el nombre de la seccin, quedando por ejemplo "CreaTuWeb : Como insertar imagenes" o algo as. Pero como hemos visto, todas empiezan con el nombre de la pgina general, de modo que nos vamos al cdigo HTML, y ponemos esa palabra en el ttulo, es decir, cambiamos la lnea:
<title>Untitled Document</title>
por:
<title>Nombre de mi web : PONER SECCION</title>
En "Nombre de mi web" poned el ttulo de la web, y dejad el resto " : PONER SECCION" tal que as. Luego, conforma usemos la plantilla para crear nuevas pginas, esa ser una de las cosas a personalizar. De este modo, si creamos una nueva pgina, tenemos ya medio titulo terminado, solo a falta de cambiar " : PONER SECCIN" por el nombre de la seccin de la nueva pgina.
Enlace para la Hoja de Estilos

Que ms cosas se os ocurre que sern comunes? Acordaos que vamos a usar una hoja de estilo para todas estas nuevas pginas. La que usamos para la pgina principal se llam "estilo1.css", pero los estilos del resto van a ser algo diferentes, de modo que crearemos una nueva hoja de estilo que llamaremos "estilo2.css". Como sabis, tras crearla hay que decirle a cada pgina donde est y como se llama la hoja de estilo que queremos que siga, de modo que vamos a insertar en la plantilla la lnea que hace todo eso. Ms tarde creamos la hoja "estilo2.css". Si recordis (espero que si) esa lnea era:
<link href="ruta/estilo2.css" media="screen" rel="StyleSheet" type="text/css">
donde "ruta/estilo2.css" es la ruta relativa del archivo de la hoja de estilo. Nosotros, por comodidad, guardaremos el archivo estilo2.css en el mismo lugar que la hoja de estilo anterior, luego la ruta ser simplemente href="estilo2.css". Por tanto la lnea que tenemos que poner es:
<link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css">
y como recordaris hay que situarla dentro de la cabecera del cdigo, es decir, entre <HEAD> y </HEAD> quedando por ahora el cdigo completo de plantilla1.htm como este:
<html> <head> <title>Titulo de tu pagina : PONER SECCION</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css"> </head> <body bgcolor="#FFFFFF"> </body> </html>
Una vez terminado todo esto guardamos la pgina con el nombre que ya sabis, "plantilla1.htm" y la cerramos.
Creando la segunda Hoja de Estilos
Ahora vamos a crear la segunda hoja de estilo, la que vamos a llamar "estilo2.css". Para ello, de nuevo, pulsad "Archivo" + "Nuevo" o "Archivo" + "Nueva ventana" y aparecer una nueva ventana, (obviamente). Ahora le damos a "Archivo" + "Guardar Como..." le ponemos el nombre "estilo2.css" guardamos y la cerramos. Pero como esto no es una pgina web sino una hoja de estilo, que como sabis, no tienen las palabrejas <HEAD> y esas cosas, tenemos que borrar todo el cdigo que Dreamweaver le ha puesto por defecto. Para eso, nos vamos a la ventana "Sitio", hacemos doble clic en "estilo2.css" para abrirla. Esta vez no aparece como una ventana de Dreamweaver sino como un documento de Block de Notas de Windows. (Esto es por ponerle al guardar la extensin .css en lugar de .htm) Podemos as ver su cdigo. Este es el cdigo que Dreamweaver pone a todas las pginas HTML, pero en este caso no es HTML sino CSS de modo que borramos TODO el cdigo que aparece y la cerramos guardando los cambios. Ms adelante iremos aadiendo los estilos de la plantilla conforme nos haga falta, pero por ahora ah lo tenemos, completamente en blanco. Parece una maniobra algo absurda, verdad? Quizs no lo he explicado muy bien. La cosa es que hemos creado un archivo en blanco y lo hemos llamado "estilo2.css", simplemente. No tiene ms historia
LA ESTRUCTURA
Creando la estructura
Alguno de vosotros habr pensado en algunas otras cosas ms que podamos incluir en la plantilla por ser comunes a todas las pginas, como las metatags ect. No os preocupis que lo haremos ms adelante. Ahora vamos a incluir lo ms importante que es la estructura. Hay muchos buenos webmasters que odian el uso de las tablas y celdas para crear las estructuras, pero personalmente, creo que una vez entendidas no tienen porque causar el mnimo problema. De hecho, esta misma web usa tablas para la estructura y me complace decir que adems de ser una estructura sencilla, no se va al traste con ningn navegador (al menos por ahora) de modo que hoy por hay es mi forma preferida. Si alguien desea conocer alternativas solo puedo decirle que investige el uso de los "divs" y capas. Pero vamos a lo nuestro. Vamos a crear una estructura basada en tablas. Concretamente sern cinco tablas:
La primera tabla ser una franja superior en la que podremos colocar un bonito dibujo del ttulo de nuestra web (un banner nuestro) y quizs algo de propaganda externa o intercambio de banners (ms tarde veremos todo esto). En la segunda tabla, justo debajo de la primera, pondremos el ttulo de la seccin en la que nos encontramos, adems de unas flechitas para facilitar al visitante la navegacin (adelante, atras..). Ser similar a la barra verde oscura de arriba de estas pginas. La tercera tabla es la ms importante. En ella colocaremos los textos y/o contenidos de la web. La dividiresmos en dos partes. Una parte izquierda con el men y otra parte derecha ms ancha donde irn los contenidos en si. La cuarta tabla es similar a la segunda en aspecto. Incluir, adems de las flechitas de la segunda tabla, algunos enlaces rpidos, como el chat, actualizaciones, etc. La quinta y ltima tabla, ser la de abajo del todo, donde podremos colocar la fecha de ltima actualizacin de esa pgina concreta, nuestra firma, y algunas cosillas ms que se nos ocurran. Como adivinaris, crear todo esta cada vez que queramos incluir una nueva pgina en nuestra web seria un tostn, de modo que solo la vamos a crear una sola vez en la plantilla. Cuando queramos crear una nueva pgina solo tendremos que incluir en la plantilla algunas cosas y listo. Se guarda con el nombre que queramos y mantenemos la plantilla. Dicho esto, vamos a crear esas cinco tablas y ya de paso os explico como se crean en HTML, vale
Cmo Crear Tablas

Para comenzar vamos a ir abriendo con el Dreamweaver la pgina anteriormente creada para la plantilla, la llamada "plantilla1.htm". Si echis un vistazo al cdigo HTML de la misma, veris que an no hay nada entre <BODY> y </BODY>, es decir, no tiene nada que mostrar. Nosotros vamos a crear la primera tabla, que ser la tabla Superior. Para ello, en Dreamweaver pulsamos en "Insertar" + "Tabla" y en la ventanita gris que aparecer ponemos - Filas: Nmero de filas (horizontales) que queremos que tenga la tabla. - Columnas: Nmero de columnas (verticales) que deseamos.
- Ancho: Anchura de la tabla completa. Se puede escoger un ancho determinado en pixeles o que se muestre con un ancho igual a una cantidad relativa a la anchura de la pgina, como por ejemplo, que sea la mitad de la anchura de la pgina, o el 100 por cien, etc. - Borde: Si ponemos un nmero distinto de cero ser el grosor de las lneas que delimitan cada celda de la tabla, es decir, aparecen las celdas con un recuadro de cierto grosor. Si ponemos un cero (0) los bordes sern invisibles. - Relleno Celda y Espacio Celda: Son los margenes de cada celda, es decir, la separacin entre lo que contienen y los bordes. Nosotros, para esta primera tabla, vamos a escoger 1 fila, 2 columnas, ancho 95% en porcentaje, borde cero y relleno y espacio de celda cero tambin. (poned un cero en estos). Una vez aceptais, aparece la tabla delimitada con unas lneas discontnuas que luego no se vern en la web. Ahora toca retocarla para darle el aspecto deseado, pero antes quisiera que supierais que ha hecho Dreamweaver para crear esa tabla, es decir, que ha cambiado en nuestro cdigo HTML. Para saberlo, basta con ver el cdigo HTML de la pgina "plantilla1.htm" pulsando Podemos ver que al insertar la tabla aparece, entre <BODY> y </BODY> lo siguiente:
...... <table w idth="90%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> </tr> </table> ....
En la pgina siguiente os explico que significa este cdigo.
Propiedades de las Tablas

Os coloco el cdigo para recordarlo:
...... <table w idth="90%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> </tr> </table> ....
Esto es lo que Dreamweaver nos ha insertado en el cdigo de nuestra pgina para que nos aparezca la tabla. Como vis, todas las tablas empezan por <TABLE> y deben acabar con </TABLE>. Todo lo que hay entre esas dos palabrejas forma parte de la tabla. Tambin vemos que aparecen otras cosillas dentro de la primera de esas palabras mgicas. Os recuerdo:
<table width="90%" border="0" cellspacing="0" cellpadding="0">
Veamos esto detalladamente...
Width="90%"
La primera cosa que aparece es "WIDTH" que significa anchura. el 90% indica que la tabla debe ser de ancho un 90% del ancho de la ventana del navegador que tenga abierta el visitante. Si pusieramos 50%, la tabla siempre ocupara la mitad de la ventana del navegador. Otra opcin sera indicarle un tamao fijo, como por ejemplo 200px. Las letras "px" indican "pixeles" y el la unidad con la que se miden las dimensiones de, por ejemplo, la resolucin de un monitor (800x600 pixeles). Tambin se pueden especificar las dimensiones en centimetros, puntos, etc, pero no es recomendable.
Border="0"
Esto indica que el borde de las celdas y de la tabla en si, tendrn un borde de cero, es decir, no tiene borde o no se ver.
Se puede indicar un borde de 5px (cinco pixeles) o algo as para que sea visible, pero en este ejemplo no lo usaremos, pues as queda ms profesional la cosa, je je. No olvidad nunca especificar las unidades de esas medidas. Dreamweaver parece que lo ha olvidado, de modo que nosotros, en cada una de las medidas que hay en nuestro cdigo le vamos a incluir las letras "px" indicando que son pixeles. De este modo, el cdigo quedar as:
<table width="90%" border="0px" cellspacing="0px" cellpadding="0px">
No dejeis ningn espacio entre el nmero y las letras px, pues entonces no funciona el invento. El 90% no necesita unidades de medida, recordadlo.
cellspacing="0"
Es el margen desde el contenido de las celdas hasta el borde de su celda. Si por ejemplo especificamos un cellspacing de 20px el contenido de la celda estar separado del borde de esa celda por arriba, abajo y por los lados una distancia de 20 pixeles.
cellpadding="0"
Esta palabreja indica el margen que deseamos dejar desde el borde de las celdas de la tabla, hasta el borde de la tabla. Por supuesto, tenemos que insertarle las letras "px" tras el cero o el nmero que sea. Vaya lio! Mejor os dejo un dibujillo donde seguro que me expreso mejor. En rojo tenis la distancia correspondiente al "cellspacing" y en azul la que corresponde a "cellpadding":
Bueno, pues as es como se define una tabla bsica. Ahora vamos a ver como se organiza, pero eso ser en la pgina siguiente, vale?
Tablas, segn HTML

Os coloco de nuevo el cdigo para tenerlo a mano. Observar que le he aadido las letras "px" a las medidas:
...... <table w idth="90%" border="0px" cellspacing="0px" cellpadding="0px"> <tr> <td> </td> <td> </td> </tr> </table> ....
Por si alguno anda despistado, os recuerdo que las tablas se organizan en filas y columnas. Las filas son horizontales y las columnas, las divisiones verticales (de arriba a abajo). En HTML, las tablas se dividen en filas y luego cada fila se puede dividir en tantas columnas. Las filas se representan con la palabra mgica "TR" y su contenido debe estar entre las palabras <TR> y </TR>. Como podis ver en el cdigo de arriba, solo existe una fila en esa tabla. A su vez, cada fila se puede dividir en columnas. Cada columna se representa con las letras "TD" y su cdigo se encierra entre <TD> y </TD> como se puede ver en el ejemplo de arriba. El cdigo que aparece dentro de cada fila es que en HTML representa un espacio en blanco, es decir, como una letra invisible o transparente, vamos, un hueco. Visto todo esto creo que es fcil interpretar el cdigo anterior, no? Es solo una tabla de anchura 90%, sin borde ni margenes, con una sola fila y dos columnas. A su vez, cada columna tiene un espacio en blanco dentro. Y ya est.
Creando la estructura
Tenemos la tabla lista. An no vamos a rellenarla, pero por lo pronto escribid una palabra en cada una de las celdas para identificarlas a simple vista. Por ejemplo, en la celda de la izquierda podemos poner "logotipo" y en la de la derecha "banner". Podis escribirlas directamente o bien cambiando en el cdigo HTML los smbolos por las palabras deseadas. Es lo mismo.
El cdigo de la tabla ser ahora este:

...... <table w idth="99%" border="0px" cellspacing="0px" cellpadding="0px"> <tr> <td>Logotipo</td> <td>Banner</td> </tr> </table> ....
Y tendr este aspecto en el Dreamweaver:
Muy triste, si que si, pero darle tiempo y ya tendr mejor pinta, de verdad, poco a poco... Antes de darle forma a la tabla vamos a crear todas las demas que componen cada una de las pginas. Para ello solo hay que seguir las instrucciones anteriores, os indico: Abrir la pgina "plantilla1.htm" con el Dreamweaver. Haced clic una sola vez a la derecha de la tabla, pero no dentro sino fuera de ella, de forma que el cursor quede justo a la derecha de esa tabla. Una vez hecho, pulsad Enter (o Intro, segn el teclado) una vez para crear una nueva lnea. Ahora, igual que hicimos antes, pinchad en Dreamweaver en: Insertar > tabla. Esta vez escoged 1 fila y tres columnas. El resto igual que antes, borde cero, margenes cero y ancho 99%. Esta vez vamos a escribir estas palabras en esas celdas: a la izquierda "titulo", en el centro "ruta" y en la derecha "flechas". Ms tarde podis poner lo que ms os convenga a vosotros, pero por ahora dejadlo as.
Bien, vamos a por la tercera tabla. Igual que antes, ponemos el cursor bajo la ltima tabla creada y Insertar > Tabla, escogiendo ahora 1 fila y dos columnas. En la primera escribimos "menu" y en la de la derecha "contenido". Acordaos de poner en todas un 99% de anchura. En la siguiente esogemos 1 fila y 3 columnas (con las palabras "contador", "opciones" en medio y "flechas" en la derecha) y en la quinta y ltima (por fin!) una fila y tres columnas tambin, escribiendo las palabras "fecha", "hueco" y "firma". Como siempre todas con borde cero, margenes cero y ancho 99%. Ya puestos, mirad el cdigo y aadidle las letras "px" a cada medida tal y como os indiqu antes. El cdigo completo queda como:
...... <table w idth="99%" border="0px" cellspacing="0px" cellpadding="0px"> <tr> <td>Logotipo</td> <td>Banner</td> </tr> </table> <table w idth="99%" border="0px" cellspacing="0px" cellpadding="0px"> <tr> <td>titulo</td>
Y la apariencia de la pgina en el Dreamweaver as:
Horrible, lo reconozco, pero os prometo que es idntica a esta pgina. Ya tomar forma despus. Ahora vamos a darle color a la cosa, que as sin nada dentro y sin bordes est un poco sosilla, no? Acompame a la siguiente pgina y lo vemos.
Estilos para las Tablas

Para darle un poco de gracia a la tablas les podemos poner unos colores de fondo y adems, para que no se nos desordenen mucho cuando el visitante cambie el tamao de la ventana del navegador, les pondremos un tamao determinado a algunas de las celdas, pero eso os lo explico sobre la marcha. El caso es que estas cosillas se pueden hacer aadiendo otras palabrejas como las vistas antes (border, cellspacing, etc...) pero a veces son interpretadas de manera diferente segn el tipo de navegador que use el visitante y aparece todo desvirtuado. Para evitarlo vamos a recurrir al uso de los estilos CSS. Esto no impide esas desvirtuaciones al 100 por 100, pero si las reduce notablemente. Adems tiene otras muchas ventajas que ya iras descubriendo por el camino. Os acordais de esa segunda hoja de estilo que creamos en lecciones anteriores y que habiamos dejado en blanco? Pues vamos a meterle mano ahora. Os recuerdo que la llamabamos "estilo2.css". En fin, vamos a definir el unos estilos para algunas de estas celdas, como por ejemplo, el color de fondo, la anchura y en algunas adems, que el contenido aparezca centrado o justificado. Primero definiremos esos nuevos estilos en la hoja de estilo "estilo2.css" y despus, en la pgina "plantilla1.htm" indicaremos a cada celda qu tipo de estilo deseamos que tenga. Quizs los colores de fondo o la anchura no os gusten para vuestra web, pero no ser problema, pues en cualquier momento se puede rectifiar con solo retocar ligeramente la hoja de estilo. Esto es ms rpido que retocar cada una de las pginas de nuestra web y eso es una de las ventajas de usar los estilos. No me enrrollo ms, vamos a ponernos en marcha ya!!!
Definiendo los Estilos

Vamos a definir los estilos para algunas tablas, y celdas. Paso a paso, como siempre:
Estilos para Tablas

Como habis visto antes, hemos definido que las tablas creadas sern de una anchura del 99% de la ventana del navegador. Esto lo podemos hacer con la hoja de estilos de la siguiente forma.
Definimos en la hoja "estilo2.css" el tipo de tabla llamado por ejemplo "tabla.99" escribiendo en ella esto:
table.99{width:99%}
donde:
table .99 99%
indica que vamos a crear un tipo de estilo de tabla
indica que ese tipo de estilo se llamar 99 indica la anchura definida
Daos cuenta que la forma de definir los estilos no es igual que el HTML. Para definir propiedades en HTML se pona width="99" mientras que en la hoja de estilos se escribe como width:99%, con dos puntos y sin comillas. Ms tarde tendremos que indicar en la "plantilla1.htm" que las tablas tienen que seguir el estilo .99 pero lo vemos despus.
Estilos para celdas

Ahora vamos a definir el color de fondo de algunas celdas. Para diferenciar unas celdas de otras les pondremos colores diferentes a algunas, tal y como en esta misma web. Adems, cada una tendr una anchura distinta, de modo que definiremos un estilo para cada una de las celdas. Parece un tostn, pero una vez hecho resulta de lo ms comodo, os lo prometo. Os acordais del juego ese de hundir la flota? Ese de los barquitos, que uno deca h4, "tocadoo", e2 "Hundidoo!!!", je je. Pues vamos a hacer lo mismo con las celdas. As, la celda superior de la izquierda ser la "a1", la superior del centro la "a2" y la superior de la derecha la "a3". Los estilos de las celdas de la tabla siguiente sern "b1" y "b2" y as con todas ellas. Vamos a abrir la hoja de estilos "estilo2.css" si la habis cerrado, y escribimos en ella esto (podis copiar y pegar):
table.99 {w idth:99% ;} td.a1{ ;} td.a2{ ;} td.b1{ ;} td.b2{ ;} td.b3{ ;}
Aqu vemos definido el estilo de la tabla de antes y las definiciones "vacias" de cada celda de la pgina. Vamos acompletar estas definiciones. Los espacios que gue he dejado en blanco son solo para separar por tablas, vamos, para aclarar un poco solamente. Cada propiedad va dentro de los corchetes (no son parntesis, sino corchetes!!). Ahora est en blanco como vis. Os recuerdo tambin que dentro pueden ir varias propiedades, pero deben separarse unas de otras mediante punto y coma " ; ". Notad tambin que en el caso de definir propiedades en CSS (en la hoja de estilos) no se ponen las unidades de medida entre "comillas" tal y como hacamos en HTML, aunque sigue siendo recomendable indicar las unidades (pixeles, puntos, centmetros...) con las letras correspondientes (px, pt, cm...). Vamos a rellenar esas propiedades en la siguiente pgina...
Los Colores
La primera propiedad que vamos a definir para cada celda es el color de fondo, aunque os explico de paso cmo insertar tambin imagenes de fondo. Los colores pueden ser todos los colores posibles los cuales se pueden indicar de distintas formas. Existe una serie de 16 colores estandar que pueden indicarse directamente con su nombre en ingls. Son los siguientes: Black Gray Silver Red Purple Maroon Fuchsia Navy Teal Blue Green Lime Olive Yellow Aqua White
Si no os basta con estos, y necesitais algn matiz de color que no est en la tabla, podis definir cualquiera de los 16 millones restantes (no creo que los useis todos, no? je je je). Pero definirlos es un poco ms complicado, pues ya no van por el nombre sino por un cdigo con este aspecto: #307596 Daos cuenta que los colores definidos por un cdigo se escriben con un smbolo de "almohadilla" o "#" delante, pero los colores bsicos no.
Y cmo saber que cdigo tiene cierto color? Pues con Dreamweaver es muy facilito. Simplemente seleccionad una palabra en una pgina de prueba de Dreamweaver (cread una pgina de prueba para esto y luego si eso la borrais). Selecionada la palabra, pinchad arriba en Texto > Color... y os aparece esta ventana (aunque se ver mejor que aqu, je je je):
Ahora solamente pichais en el cuadro de la derecha, llena de colores, luego subid la flecha negra que hay casi escondida en la parte baja de la columna de matices a la derecha del todo para terminar de decidiros y tras eso, pinchad en "Agregar a los colores personalizados". Luego en Aceptar y ya est. La palabra antes seleccionada aparece en ese color. Ahora, para sabes e cdigo de ese color basta con mirar el cdigo HTML de la pgina esa de pruebas y apuntar en un papel el nmero que tiene y que aparece en una lnea similar a esta:
<font color="#298D56">palabra</font>
El cdigo de el color de este ejemplo sera #298D56. Os recuerdo que para escribir el cuadradillo "#" o almohadilla (creo que se llama as ese smbolo) hay que pulsar a la vez las teclas "AltGr" + "3". Una vez que encontrais los colores que queris para cada celda o grupo de celdas, lo pondremos en la hoja de estilos, tal y como os explico a continuacin en la siguiente pgina. Recordad que podis cambiar esos colores rpida y fcilmente ms tarde si cambiais de opinin. No os costar ningn esfuerzo gracias a los estilos CSS, pues solo tendris que retocar la hoja de estilos "estilo2.css" y automaticamente cambia el color en todas las pginas que usen ese estilo.
Los Colores
La primera propiedad que vamos a definir para cada celda es el color de fondo, aunque os explico de paso cmo insertar tambin imagenes de fondo. Los colores pueden ser todos los colores posibles los cuales se pueden indicar de distintas formas. Existe una serie de 16 colores estandar que pueden indicarse directamente con su nombre en ingls. Son los siguientes: Black Gray Silver Red Purple Maroon Fuchsia Navy Teal Blue Green Lime Olive Yellow Aqua White
Si no os basta con estos, y necesitais algn matiz de color que no est en la tabla, podis definir cualquiera de los 16 millones restantes (no creo que los useis todos, no? je je je). Pero definirlos es un poco ms complicado, pues ya no van por el nombre sino por un cdigo con este aspecto: #307596 Daos cuenta que los colores definidos por un cdigo se escriben con un smbolo de "almohadilla" o "#" delante, pero los colores bsicos no. Y cmo saber que cdigo tiene cierto color? Pues con Dreamweaver es muy facilito. Simplemente seleccionad una palabra en una pgina de prueba de Dreamweaver (cread una pgina de prueba para esto y luego si eso la borrais). Selecionada la palabra, pinchad arriba en Texto > Color... y os aparece esta ventana (aunque se ver mejor que aqu, je je je):
Ahora solamente pichais en el cuadro de la derecha, llena de colores, luego subid la flecha negra que hay casi escondida en la parte baja de la columna de matices a la derecha del todo para terminar de decidiros y tras eso, pinchad en "Agregar a los colores personalizados". Luego en Aceptar y ya est. La palabra antes seleccionada aparece en ese color. Ahora, para sabes e cdigo de ese color basta con mirar el cdigo HTML de la pgina esa de pruebas y apuntar en un papel el nmero que tiene y que aparece en una lnea similar a esta:
<font color="#298D56">palabra</font>
El cdigo de el color de este ejemplo sera #298D56. Os recuerdo que para escribir el cuadradillo "#" o almohadilla (creo que se llama as ese smbolo) hay que pulsar a la vez las teclas "AltGr" + "3". Una vez que encontrais los colores que queris para cada celda o grupo de celdas, lo pondremos en la hoja de estilos, tal y como os explico a continuacin en la siguiente pgina. Recordad que podis cambiar esos colores rpida y fcilmente ms tarde si cambiais de opinin. No os costar ningn esfuerzo gracias a los estilos CSS, pues solo tendris que retocar la hoja de estilos "estilo2.css" y automaticamente cambia el color en todas las pginas que usen ese estilo.
Definiendo color de fondo en celdas

Bien, supongamos que me han gustado los siguientes colores con estos cdigos: blanco: white Verde Claro: #9ED7D7 Verde Oscurillo: #0EBEBA Amarillento: #F6DA98 (o si os habis conformado con los colores bsicos red, yellow, etc....) Para definir que una celda b1 tenga el color de fondo, por ejemplo, de color verde oscuro cuyo cdigo es #OEBEBA tenemos que poner en la hoja de estilos "estilo2.css" lo siguiente:
td.b1 { background-color: #OEBEBA ; }
Como sabis, td indica columna, .b1 es el nombre que le damos a cierta celda, backgroundcolor indica que vamos a definir el color de fondo y #OEBEBA es el cdigo del color verde oscuro. De la misma forma definimos el resto de las celdas, de modo que quedara as.
table.99 {w idth:99% ;} td.a1{ background-color: w hite ;} td.a2{ background-color: w hite ;} td.b1{ background-color: #0EBEBA ;} td.b2{ background-color: #0EBEBA ;} td.b3{ background-color: #0EBEBA ;}
Todo esto puede simplificarse bastante, reuniendo todas las celdas a las que vamos a dar las mismas propiedades, es decir, el mismo color de fondo. Por ejemplo, si las celdas td.b1 td.b2 y td.b3 van a tener el mismo color de fondo, #OEBEBA, podemos simplificar las tres lneas de este modo:
td.b1, td.b2, td.b3 { background-color: # 0EBEBA ; }
es decir, las ponemos todas seguidas y separadas por una coma "," y a continuacin ponemos la propiedad o propiedades entre corchetes una sola vez. De este modo ahorramos espacio, aunque por ahora no lo vamos a hacer, pues como seguramente definiremos ms propiedades adems del color de fondo, quizs no nos interese hacerlo. Bien, dicho esto, ya tenemos definidos los colores de fondo de todas las celdas de la plantilla. Ahora vamos a definir la anchura.
Anchura de las Celdas

Para definir la anchura que deseamos que tenga una celda, usaremos el comando "WIDTH". Como ya os he comentado, podemos utilizar distintas unidades, como por ejemplo, centmetros (cm), puntos (pt), porcentajes (%) o pixeles (px) entre otros. Os recomiendo usar siempre pixeles, pues creo que son las ms comodas. Recordad que se indican con las letras "px" despus del nmero. Imagina que no sabris cuanto mide un pixel (ni yo mismo lo se, je je) de modo que lo mejor es hacer algunas pruebas hasta que veamos que la anchura es la deseada.
Como an no sabemos exactamente que anchura queremos darle a cada celda, pondremos un valor aproximado y ms tarde, dependiendo del contenido de cada celda, la ajustaremos mejor. Cuando definimos varias propiedades para el mismo elemento (por ejemplo, color de fondo y anchura en una celda) podemos hacerlo en la misma lnea. Para ello basta con insertar el trozo de cdigo correspondiente a la nueva propiedad junto a la propiedad definida antes, pero separandolas una de otra por un punto y coma ";". De este modo, si ponemos una determinada anchura a una celda de las definidas en el apartado anterior, la hoja de estilo "estilo2.css" quedara as:
td.a1{ background-color: OEBEBA; w idth: 50px ;}
El punto y coma ";" del final (el de antes del corchete final) no es necesario, pero yo suelo incluirlo siempre por si alguna vez incluyo alguna otra propiedad ms, no olvidarme de separarla de la anterior. Como al principio habiamos definido que la anchura de las tablas sera del 99%, solo es necesario definir el ancho de todas las celdas de la tabla menos una. Esa ltima a la que no definimos la anchura tomar el ancho restante, es decir, el que le permitan las otras celdas a las que si hemos definido el ancho. As, por ejemplo, fijaos en esta misma pgina, la que estis leyendo. A la izquierda hay un menu que es una celda con un ancho definido en la hoja de estilo. Adems, a la derecha de estas lneas, hay otra celda con otro ancho diferente definido. En cambio, la celda en la que estn estas palabras, con fondo amarillo, no tiene definido el ancho, de modo que ocupa lo que le dejan las celdas de los lados hasta ocupar todas juntas el 99% de la ventana del navegador. El caso es que solo vamos a definir el ancho a aquellas celdas que sabemos lo que queremos que ocupen de anchura, el resto las dejaremos sin definir. No se si se entiende bien el proposito, espero que si. En el ejemplo que estamos haciendo, el la primera tabla con las celdas a1 y a2, solo definiremos la a1, pues en ella vamos a poner un banner de nuestra pgina que sabremos (cuando lo hagamos, claro) el ancho que va a tener. En cambio, dejaremos que la celda a2 ocupe todo lo que quede hasta completar el 99% de la tabla. En ese espacio podremos poner un banner de publicidad o de intercambio de banners, y nos da ms o menos igual lo que ocupe. En la tabla segunda, que hemos dividido en tres celdas, b1, b2 y b3, solo definiremos las celdas b1 y b3, pues ms o menos sabemos y queremos que ocupe un ancho determinado,
en cambio dejaremos que la b2 ocupe el resto y por eso no definimos su anchura en la hoja de estilos "estilo2.css". En la tabla tercera, donde ir el men lateral y el contenido de las pginas, solo definiremos el ancho de la celda del men, la c1, y dejaremos que la c2 ocupe el resto, que es donde irn los contenidos de la pgina. Asimismo, en la siguiente tabla, solo definimos las celdas d1 y d3 dejando que la d2 tome el resto del ancho hasta el 99%. Y finalmente en la ltima tabla solo definimos el ancho en las celdas e1 y e3 dejando libre la central. Puede sonar un poco rollo todo esto, verdad? Venga, animo que la cosa est saliendo muy bien.
Asignando Estilos a las Celdas

A continuacin os muestro cmo queda la hoja de estilos "etilo2.css" tras completar la definicin del ancho de algunas celdas:
table.99 {w idth:99% ;} td.a1{ background-color: w hite ; w idth: 150px ; } td.a2{ background-color: w hite ; } td.b1{ background-color: #OEBEBA ; w idth: 150px ; } td.b2{ background-color: #OEBEBA ; }
Bueno, pues antes de seguir aadiendo ms propiedades, vamos a volver a la pgina "plantilla1.htm" para completar unas cosillas y ver que tal funcionan estas definiciones y como ponerlas en marcha. En primer lugar guardamos y cerramos la hoja de estilo "estilo2.css" y abrimos la pgina "plantilla1.htm" con el dreamweaver. Por si las moscas, os indico que tal haba quedado el cdigo HTML de esa plantilla:
<html> <head> <title>Titulo de tu pagina : PONER SECCION </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css"> </head>
Como podris comprobar, si hacis vista previa de esa pgina, no los colores ni los anchos son tal y como hemos definido en la hoja de estilos. Por qu puede ser? Pues porque no hemos indicado en la pgina qu estilo debe seguir cada celda. Hemos definido los estilos pero an no los hemos aplicado a nada. Ahora vamos a aprender a asignar un estilo definido a un elemento de una pgina. Para hacer esto solo necesitamos echar un vistazo al cdigo HTML de la pgina "plantilla2.htm". Para hacer que una determinada celda siga un determinado estilo reformamos el cdigo para quede, en lugar de as:
<td>Logotipo</td>
de esta otra forma:

<td class="a1">Logotipo</td>
Lo que hemos hecho es especificar que esa celda es del tipo "a1" y por tanto, seguir las propiedades definidas en la hoja de estilo, segn el estilo de "td.a1". Para eso, se ha incluido el comando class, que indica la clase de estilo a seguir y se ha indicado la clase ( ="a1"). Lo mismo haremos con todas las dems celdas. No ser facil identifiarlas en el cdigo HTML pues antes habiamos escrito una palabra representativa en cada una de ellas. As, por ejemplo, en el cdigo correspondiente a la celda "a2" pondremos esto:
<td class="a2">banner</td>
y as con todas las dems. El cdigo de la pgina "plantilla1.htm" queda as entonces:

<html> <head> <title>Titulo de tu pagina : PONER SECCION </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css"> </head>
Insertando comentarios
Ahora la cosa va cogiendo forma, poca, eso si, pero algo de forma, no? Si guardais la hoja de estilo "estilo2.css" y la pgina "plantilla1.htm" y hacis una vista previa de esta ltima, podris ver lo que hemos conseguido (si es que habis hecho bien los debers, claro, je je je). Os muestro aqu una imagen de cmo se debera ver esa plantilla por ahora desde el DreaWeaver:
Y desde un navegador, por ejemplo el iExplorer:
Ya ya, ya se que eso no parece en absoluto una pgina web sino una tabla sin ningn fuste (sentido), pero poco a poco vers como se va pareciendo ms a una web de verdad, paciencia y confianza amiguetes!
Como resulta que vamos a meterle mano al cdigo HTML de nuestra plantilla ms de una vez, conviene tener bien estructurado el cdigo, para as no perdernos demasiado y poder identificar rpidamente cada trozo de cdigo. Para facilitar eso, tenemos una opcin muy buena. Se trata de poder incluir en el cdigo algunos comentarios. Los comentarios no se ven al hacer vista previa (vamos, que no lo ve el visitante) y en realidad no hacen nada de nada de nada. Para lo nico que valen es para facilitarnos la identificacin del cdigo. Os pongo un ejemplo para aclararnos un peln. Podemos incluir anter del comienzo del cdigo de cada tabla, un comentario indicando algo as como "Comienzo de la tabla tercera". De este modo, si tenemos que retocar algo de la tercera tabla, bastar con buscar esa lnea (comentario) para saber que trozo de cdigo es el que buscamos. Creo que es util, no? Pues vamos al lio. Vamos a abrir la pgina "plantilla1.htm", y nos vamos a ver su cdigo HTML pulsando el botn del dreamweaver. Para insertar un comentario solo necesitamos encerrarlo entre estos dos smbolos: 
Otro ejemplo es este, donde vemos que podemos meter ms guiones por si queremos dejarlo ms visible:

Pues entendido esto, vamos a crear un comentario al principio de cada una de las 5 tablas que creamos antes en la plantilla. El cdigo ahora queda as:
<html> <head> <title>Titulo de tu pagina : PONER SECCION</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css"> </head>
Ahora es algo ms largo en total, pero creo que nos ser ms fcil identificar cada trozo.
Aplicando Estilos a las Tablas

Hay que ver como sois. Hemos definido antes un estilo para las tablas, para que ocupen un 99% del ancho, y se me ha olvidado usarlo. Y vosotros no me avisais!! Hay que estar ms atentos!! je je je je. Vamos pues a decirle a las tablas que deben seguir el estilo definido antes en la hoja de estilo. Os acordais? Ese que definimos as:
table.99 {width:99%}
en la hoja de estilo "estilo2.css". Al principio, al crear las tablas escogimos, junto con el tamao de borde cero y esas cosas, que el ancho fuera 99%, os acordais? Pues el Dreamweaver incluy un trozo de cdigo en nuestras tablas para cumplir eso. El cdigo era este:
<table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
Pero resulta que nosotros no vamos a querer que el ancho est definido en el cdigo HTML de la plantilla sino solo en la hoja de estilo, de modo que vamos a ver el cdigo HTML de la plantilla y borraremos el trozo de cdigo este width="99%". Ese trozo borrado (acordaos de borrarlo en las cinco tablas que tenemos) no nos hace falta, pues la anchura la tenemos definida en la Hoja de Estilos. El cdigo queda entonces as:
<table border="0px" cellspacing="0px" cellpadding="0px">
Ahora acudimos de nuevo a ver el cdigo HTML de la plantilla y aadir en las lneas:
<table......
lo siguiente:
class="99"
quedando la cosa as (para cada una de las cinco tablas):

<table class="99" border="0px" cellspacing="0px" cellpadding="0px">
y listo, con solo eso, todas las tablas ocuparn ahora el 99% del ancho de la ventana del navegador. Si queris hacer una prueba de que tal funciona esto, haced lo siguiente: - Guardad la plantilla. - Abrid la hoja de estilos y en lugar de 99% poden 50%.
- Guardad la hoja de estilos. - Abrid la plantilla y veris como ha cambiado el ancho con solo retocar un numerito. Parece una tonteria porque el ejemplo es tonto, pero imaginad la cantidad de cosas que se pueden variar en segundos con solo un par de clics, verdad? Bueno, pues ahora volved a poner el 99% en la hoja de estilos y seguimos con el tema. Acordaos de poner lo de <table class="99"......> en las cinco tablas.
Texto de Celdas en Negrita

Mirando la vista previa de lo que hasta ahora tenemos como plantilla se me ocurren un par de cosillas. Por ejemplo, me gustara que el texto de algunas celdas apareciera centrado, el de otras justificado, el de otras en negrita, y otras con texto de un color distinto al negro, por ejemplo azul. Imaginad que ya llevo terminadas 20 pginas y me decido a hacer todos esos cambios. Que Horror!! Tengo que cambiar eso en cada una de las 20 pginas? Pues mire usted, no! Solo tenemos que modificar la Hoja de Estilos y Listo, asunto arreglado. No os quejareis eh? Ser que no os enseo cosas utiles y fciles..... je je je. Pues vamos all!
Celdas con Textos en Negrita

Decidimos que queremos que los textos de las celdas b1, b2, c1, d2, c1, c2 y c3 se muestren en negrita. Para ello solo tenemos que incluir la propiedad que os escribo abajo, en cada una de las lneas correspondientes a cada celda que queremos en negrita, dentro de la hoja de estilos "estilo2.css":
font-weight:bold
donde bold significa "negrita" en CSS. De este modo, la hoja de estilos quedar as:
w idth: 50px ; } td.e1{ background-color: w hite ; w idth: 150px ; font-w eight: bold ; } td.e2{ background-color: w hite ; fontw eight: bold ; } td.e3{ background-color: w hite ; w idth: 150px ; font-w eight: bold ; }
y se ver de esta forma en el iExplorer:
Centrado, Justificado y Color de Texto

Vamos ahora a aadir el resto de propiedades. que queremos que sigan algunas celdas.
Celdas con Texto Centrado

Para que la web tenga mejor pinta, decidimos que el texto de algunas celdas debe ir centrado. En realidad todas las celdas quedan bien si las centramos, excepto una, la celda c2 que queda mejor si el texto aparece justificado. Para que todas las dems aparezcan centradas incluimos en el cdigo de la hoja de estilo, y para cada una de las definiciones de las celdas (menos para la c2) lo siguiente:
text-align:center
As, por ejemplo, una de las lneas de cdigo de una celda, quedara como:
td.b1{ background-color: #OEBEBA ; width: 150px ; font-weight: bold ; text-align: center ; }
Y as hacemos con todas las dems celdas (menos la c2).
Celdas con Texto Justificado

La celda c2 en cambio es donde meteremos los textos de la web. Es la zona principal y por eso queda mejor "justificada" que centrada. Para esto, el cdigo a insertar en la hoja de estilo, y solo en la lnea de cdigo de la celda c2, incluiriamos esto:
text-align: justify
quedando entonces esa lnea as:

td.c2{ background-color: #F6DA98 ; text-align: justify ; }
Celdas con Texto de otro Color

Imaginaos que ahora se me ocurre que el texto de la celda b2 no sea negro, sino azul oscuro. Tras investigar cual es el cdigo de ese color mediante el metodo usado y explicado en secciones anteriores, encuentro que el cdigo es: #000080 Pues solo hay que insertar la siguiente propiedad en la lnea de cdigo de la hoja de estilo, correspondiente a la celda b2,
color: #XXXXX ;
donde XXXX es el cdigo del color.
de modo que quedaria as esa lnea:

td.b2{ background-color: #OEBEBA ; font-weight: bold ; color: #000080}
y listo, solo tenemos ahora que guardar la hoja de estilos:

table.99 {w idth:99% ;} td.a1{ background-color: w hite ; w idth: 150px ; text-align: center ; } td.a2{ background-color: w hite ; text-align center ; } td.b1{ background-color: #0EBEBA ; w idth 150px ; font-w eight: bold ; text-align: cent
y hacer una vista previa para ver lo que hemos conseguido, que ser ms o menos esto:
Flechas de Navegacin
Aunque parezca metira, la estructura ya est terminda. Lo nico que tenemos hacer ahora es rellenarla con elementos comunes a todas las pginas de nuestra web. Por ejemplo, todas van a tener las flechitas de desplazamiento en las tablas b y d. Estas servirn para que el usuario pueda avanzar y retroceder de pgina fcilmente. Es muy conveniente dar estas y otras facilidades a los visitantes. Vamos entonces a insertar esas flechitas. Lo primero es conseguir los archivos de esas flechitas. Tenis varias opciones, una es buscar unas flechas que os gusten en internet, otra es buscarlas en nuestra Galeria de Objetos a la que podis acceder desde el men principal de esta web. La ltima opcin es crearlas vosotros mismos con algn programa de dibujo. Eso si, os recomiendo que le pongais pocos colores y que el tamao no sea muy grande para no ralentizar la carga de la pgina. Para ir ms rpido en este ejemplo, vamos a aprovecharnos de las flechas de esta misma pgina. Os las coloco aqu mismo para que os las guardeis en vuestro disco duro. Para ello, pulsad sobre ellas con el botn derecho del rotn y pulsad en "Guardar Imagen Como...". Acordaos guardarla en la carpeta de la web.
Ahora vamos a insertarlas en las celdas b3 y d3. Para ello: - Abrid la pgina "plantilla1.htm" con el Dreamweaver. - borrad la palabra "flechas" que hay en la celda b3.
- Pinchad en Insertar > Imagen - Se abre una ventana del dreamweaver. Buscad en esa ventana la carpeta donde guardsteis los archivos de esas flachas (obligatoriamente, deben estar dentro de la carpeta de vuestra web). - Una vez encontrado el archivo de la flecha "atras" pusad en "Seleccionar" y la flecha aparecer en la celda. Ahora, para que la flecha de la derecha, la de "Adelante" no se quede demasiado pegada a la de "atras" vamos a insertar un espacio en blanco. Es decir, ponis el cursor a la derecha de la flecha insertada y pulsais una vez el espacio. - El siguiente paso es insertar la flecha de "Adelante" de la misma forma que la otra. Bien, no ha quedado mal del todo, no? Ahora hacemos lo mismo en la tabla d3 y despus guardamos la plantilla. La pgina se ve ahora as:
Por cierto, sabed que por ahora si hacemos clic en las flechas, no pasa nada de nada. Eso es porque an no hemos puesto los enlaces en las flechas. Aunque las flechas son comunes a todas las pginas, (por eso las ponemos en la plantilla) los enlaces sern siempre distintos en una y otra pgina, claro, y por eso los enaces no los incluimos en la plantilla. Como sabris, Dreamweaver a escrito el cdigo HTML correspondiente a esas flechas en el cdigo de la plantilla. Vamos a echarle un ojillo en la siguiente pgina para ir conociendo un poquitn ms ese mundo del HTML.
Cdigo HTML en la Insercin de Imgenes

Si abrimos el archivo "plantilla1.htm" con el Dreamweaver y miramos el cdigo podremos ver esto:
<html> <head> <title>Titulo de tu pagina : PONER SECCION</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css"> </head> <body bgcolor="#FFFFFF">  <table class="99" w idth="99%"
pero vamos a ver solo la parte de la celda b3, pues el cdigo de la elda d3 es casi idntico:
.....  <table class="99" w idth="99%" border="0px" cellspacing="0px" cellpadding="0px"> <tr> <td class="b1">titulo</td> <td class="b2">ruta</td> <td class="b3"><img src="atras.gif" w idth="13" height="19"> <img src="adelante.gif" w idth="13" height="19">
Vemos que lo nico que se ha cambiado del cdigo es que en lugar de aparecer:
<td class="b3">flechas</td>
al borrar la palabra "flechas" e incluir las flechas se ha quedado as (os pongo en rojo lo nuevo):
<td class="b3"> <img src="atras.gif" width="13" height="19"> <img src="adelante.gif" width="13" height="19"> </td>
Pues bien, vemos que para incluir una imagen solo tenemos que irnos al cdigo HTML y escribir:
<img
que significa que se va a meter una imagen.
src="...."
poner la ruta del archivo de la imagen. indicar el ancho de la imagen. indicar la altura de la imagen.
width="..."
height="..."
Fijaos que toda esa lnea empieza y acaba con < y > es decir, hay que cerrarla tras definir en ella la ruta, ancho y alto con el smbolo > . Eso si, tal y como os decia otro da, es recomendable, aunque no obligatorio, incluir al lado del nmero, qu a qu tipo de unidades de medida nos referimos. De modo que no estara mal poner, a la derecha de cada nmero de anchura y altura, las letras de pixeles, "px", quedando el cdigo as:
<td class="b3"> <img src="atras.gif" width="13px" height="19px"> <img src="adelante.gif" width="13px" height="19px"> </td>
Listo, ya sabis como meter imagenes, tanto con Dreamweaver como en el puro estilo "HTML a mano", je je je. No estais contentos? Es que no os oigo aplaudir!!! je je je je.
Fecha de ltima Actualizacin

Qu os parece si ahora incluimos en una de las celdas la fecha de la ltima actualizacin de la pgina? Bien, no? Pues vamos. No se trata de que cada vez que reformemos algo pongamos la nueva fecha, eso es un rollo. Lo que haremos es que el propio Dreamweaver, actualice esa fecha cada vez que cambiemos y guardemos alguna de nuestras pginas. La fecha en cuestin no es la misma para cada pgina. Cada pgina de nuestra web tendr su propia fecha de actualizacin. De todas formas, el cdigo de esa aplicacin es el mismo para todas las pginas, de modo que podemos incluirlo en la plantilla. Venga vamos, pero como siempre, paso a paso: - Abrid la plantilla con el Dreamweaver. - Poned el cursor en la celda e1. - Borrad la palabra que pusimos antes, la palabra "fecha".
- Haced clic en Insertar > fecha y os aparcer esta ventana de Dreamweaver:
Escoged el formato que ms os guste. Y no olvidad marcar o activar la casilla de abajo, para que Dreamweaver actualice la fecha al guardar cada pgina. Si escogis poner tambin el formato del da, es posible que si estos llevan acentos, al insertarlo aparezca una cosa muy rara en lugar del nombre del da, pero no os preocupeis, eso se ve bien en la vista previa. Ya os explicar ms adelante que es eso tan raro. En el ejemplo no he elegido incluir tambin la hora, para no llenar mucho la celda. Vamos a ver como queda esa celda una vez pulsamos en Aceptar. La pgina se ve ahora as en iExplorer:
Seguramente eso no sea suficiente y queramos incluir antes de eso, las palabras "Actualizada el ". As, todo completo, la cosa quedara tal y como en mi web.
Para hacer eso basta con escribir "Actualizada el " antes de la fecha. Para ello poned el cursor antes de las palabras que aparecen en la celda y sin ms, escribidlo. Despus guardad la pgina. La celda queda as :
Como veis, sale todo en negrita, pues as lo habiamos definido antes en la hoja de estilos. Mola verdad?
Firma de Pgina
Qu ms cosillas son comunes a todas las pginas? Amos a pensar... a ver... YA! la firma! Quizs querais que en todas las pginas de vuestra web aparezca, por ejemplo eso de "Creada por Fulano" o "Dieada por XXX ". A estas alturas seguro que sabis hacerlo solos solas, verdad? Bueno, vamos a explicarlo de todos modos, por si acaso. Abrimos la pgina "plantilla1.htm" con el Dreamweaver, ponemos el cursor en la celda e3 y borramos lo que en ella hay, la palabra "firma". Ahora escribimos directamente lo que deseamos que aparezca y luego la guardamos. OS doy unas pistas por si os interesan. El smbolo o o etc, etc, podis insertarlos de la siguiente forma: - Poneis el cursor en el lugar donde queris insertarlo. - Pulsais en el dreamweaver, en la seccin Insertar > Caracteres y podis escoger entre todos los que hay disponibles, que son un montn. (Hasya el Euro! ). Es posible que al insertar alguno de estos carcteres raros, en la ventana del Dreamweaver se vea alguna cosilla rara, como cdigo. No pasa nada, pues el visitante no lo ver as sino bien. Probad la vista previa y lo comprobais. La pgina queda ahora as:
No os asusteis al ver eso de "hueco" justo al lado de "Creada por Fulano". Eso es porque para hacer las fotos de estas ventanas y que no ocupen mucho, debo reducir esas ventanas y aparece todo muy pegado, pero agrandando un poco la ventana se ve ms separado, mejor. Si quereis, podemos hacer que cuando la gente pinche en "Fulano" (en vuestro caso, vuestro nombre) el visitante os pueda escribir un mensaje. Solo hay que crear un enlace de mensajes. Os recuerdo como se hacia en la siguiente pgina.
Enlace de Correo para la Firma

Seleccionad la palabra en la que queris insertar el enlace de correo electrnico. Por ejemplo, la palabra "Fulano". Despus, con la palabra seleccionada, haced clic en aquel botn de proppiedades que pusimos en Dreamweaver en las lecciones del principio, del otro men, aque con este aspecto:
Si no lo tenis (por no hacerme caso en su momento, je je) podis pinchar en Modificar > Propiedades de la Seleccin. En cualquier caso, se abre esta ventanita:
Pues bien, si tenis seleccionada la palabra, ahora, en esa ventana, en el hueco donde pone Vnculo escribid lo siguiente: mailto:XXXXX@XXXXXX.XX donde XXX@XXXX.XX es la direccin a donde queris que vayan a parar los E-Milios que os manden. Ya podis cerrar esa ventana y estar listo el enlace de correo electrnico. Facil, no? je je. Veamos qu cdigo se ha insertado en la pgina para conseguir esto. Antes de crear el vnculo teniamos en esa celda esto:
<td class="e3">Creada por Fulano © </td>
y tras poner el enlace de correo, esto otro:

<td class="e3">Creada por <a href="mailto:jorgegens@wanadoo.es">Fulano</a> © </td>
Por lo tanto, podemos deducir que para incluir un enlace cualquiera, solo necesitamos escribir esto:
<a href="direccin del enlace">palabra para el enlace</a>
Si adems, no se trata de un enlace normal, sino de un enlace de correo electrnico, hemos de escribir la palabra mgica mailto: antes de la direccin de correo. Es facilsimo, verdad? je je je, bueno, quizs algo lioso al principio, pero veris como le acabis perdiendo el miedo. El cdigo de la plantilla es ahora este:
<html> <head> <title>Titulo de tu pagina : PONER SECCION</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css"> </head> <body bgcolor="#FFFFFF">  <table class="99" w idth="99%"
Cuando en lugar de un enlace de correo electrnico se quiere poner un enlace a una pgina se debe poner en aquel hueco la direccin del enlace. A esa direccin se le suele llamar Ruta del Archivo. Es muy importante tener claro el concepto de Ruta de Archivo, pues el 70% de los errores y dudas que me comentais son debidos a estas.
Para tener claro este concepto, os recomiendo que volvis al men principal de esta web (la de los cuadros amarillos) y visitis la seccin "Elementos" y dentro de esta, el apartado "Todo Rutas". Pronto seguir con estas lecciones. Mientras haced muchos exerimentos y usad el Foro para cualquier duda. Como estoy muy mal de tiempo no os puedo asegurar respuestas a los mensajes que me envieis a mi correo. Lo intentar pero no creo poder responder tantos, sois demasiados para mi, je je je. Por eso prefiero que usis el Foro, al que puedo aceder sin mucho problema desde el trabajo (que no se entere el jefe!!! je je je je je). Pronto inlcuir ms cosillas. Nos leemos. Jorgens

Manual de Dream Weaver de Gergen

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual de Dream Weaver de Gergen

Uploaded by

Copyright:

Available Formats

Poniendo el ttulo

Enlace para la Hoja de Estilos

Creando la segunda Hoja de Estilos

Cmo Crear Tablas

En la pgina siguiente os explico que significa este cdigo.

Propiedades de las Tablas

Veamos esto detalladamente...

Tablas, segn HTML

El cdigo de la tabla ser ahora este:

Y tendr este aspecto en el Dreamweaver:

Y la apariencia de la pgina en el Dreamweaver as:

Estilos para las Tablas

Definiendo los Estilos

Estilos para Tablas

indica que vamos a crear un tipo de estilo de tabla

indica que ese tipo de estilo se llamar 99 indica la anchura definida

Estilos para celdas

Definiendo color de fondo en celdas

Anchura de las Celdas

Asignando Estilos a las Celdas

de esta otra forma:

y as con todas las dems. El cdigo de la pgina "plantilla1.htm" queda as entonces:

Y desde un navegador, por ejemplo el iExplorer:

Por ejemplo, esto que sigue es un comentario:

Aplicando Estilos a las Tablas

quedando la cosa as (para cada una de las cinco tablas):

Texto de Celdas en Negrita

Celdas con Textos en Negrita

y se ver de esta forma en el iExplorer:

Centrado, Justificado y Color de Texto

Celdas con Texto Centrado

Y as hacemos con todas las dems celdas (menos la c2).

Celdas con Texto Justificado

quedando entonces esa lnea as:

Celdas con Texto de otro Color

donde XXXX es el cdigo del color.

de modo que quedaria as esa lnea:

y listo, solo tenemos ahora que guardar la hoja de estilos:

Cdigo HTML en la Insercin de Imgenes

que significa que se va a meter una imagen.

Fecha de ltima Actualizacin

- Haced clic en Insertar > fecha y os aparcer esta ventana de Dreamweaver:

Enlace de Correo para la Firma

y tras poner el enlace de correo, esto otro:

You might also like