deseoaprender.com
Curso básico de Dreamweaver
 Aprende el manejo de Dreamweaver MX y 8

Crear páginas web con Adobe Dreamweaver; herramientas para diseño web: tablas.

   
 
   
 

TRABAJAR CON TABLAS EN DREAMWEAVER

    En el diseño de una página web es importantísimo el manejo de las Tablas, pues son estas fundamentales para poder distribuir el contenido; lo lógico es que una página no conste únicamente de texto (en este caso sería sencillísimo, nos colocabamos en el cuerpo de la misma y ¡a teclear!), sino que deseemos colocar partes con texto, otras con algún tipo de publicidad, otra para ofrecer intercambio de enlaces, etc…

   Será entonces cuando entren en juego las Tablas que no son más que unos espacios que distribuiremos a nuestro gusto dentro del entorno de dicha página.Sabiendo combinar dichas tablas seremos capaces de diseñar una página a nuestro gusto.

    Las tablas se componen de filas y de columnas y además podremos insertar nuevas tablas dentro de cualquiera de dichas filas y columnas ( celdas se llaman cada uno de los espacios de una tabla).
-

    Pero vayamos a los ejemplos, porque una imagen vale más que mil palabras; teníamos hasta ahora la página de ejemplo que estamos haciendo así:

creación de páginas web con Adobe Dreamweaver

    Vamos a ver como podemos incrustar una nueva tabla entre otras (pues podemos darnos cuenta que se nos ha olvidado algo; por ejemplo yo quiero colocar un sitio donde aparezca la fecha actual, la cual se deberá actualizar automáticamente cada día, y dicha fecha quiero que aparezca entre “Bienvenido a esta web….” y el banner de publicidad que hay debajo.-Para ello tendré que crear una nueva tabla de 1 fila y 1 columna en dicho lugar, lo que haré picando a la derecha de la tabla donde está el “Bienvenido…” para que el cursor se ponga ahí:


   Será entonces cuando pulse <Enter> para que abra el espacio:

curso online gratis de Dreamweaver

    Para que inserte la nueva tabla, lo que puedo hacer mediante el menú superior “Insertar-Tabla”:

herramientas webmaster para diseño web

    O bien mediante el icono que te indico abajo con la flecha (estando en la ficha “Común”):

cursos en linea de creación web

    En ambos casos nos deberá aparecer la ventana de Tabla en la que le diremos que debe constar de 1 fila, 1 columna, el 90% de ancho y los demás datos a “ 0” , así:

Dreamweaver MX

    Así que una vez hayamos hecho clic en Aceptar nos tiene que aparecer:

    En este caso vemos que ha abierto además otro espacio entre la tabla creada y el banner, por lo que picamos a la derecha de la tabla creada para colocar allí el cursor y damos un <Supr> para quitar dicho espacio, debiendo quedar:

manual para aprender Dreamweaver 8

    Ahora, decidimos que la fecha deberá aparecer centrada en dicha Tabla, para lo cual deberemos picar dentro de ella para colocar ahí el cursor, y entonces picamos con botón derecho dentro de la tabla y elegimos “ Alinear al Centro ”:

aprender gratis con cursos online

    Volvemos a picar dentro de la tabla y veremos que el cursor se colocará justo en el centro de la misma:

    Ahora debemos seguir este proceso:

   1).-debemos colocar un código entre <HEAD> y </HEAD> en cualquier lugar pero siempre dentro del cuerpo delimitado por estas etiquetas (que están al principio del código de la página).-Para ver este código ya sabeis que no hay más que cambiar a dicha vista, picando en:

    Con lo que aparecerá la misma (con la barra desplazadora subís al principio):

curso de Adobe Dreamweaver

    Veis claramente las dos etiquetas que menciono <head> y </head> que están al principio y al final del código que encierran; pues será en cualquier lugar entre ellas, donde deberé colocar este código:

<SCRIPT>
var mydate=new Date();
var year=mydate.getYear(); if (year < 1000) year+=1900; var
day=mydate.getDay(); var month=mydate.getMonth(); var
daym=mydate.getDate(); if (daym<10) daym="0"+daym; var
dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sábado");
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"); </SCRIPT>

así que pico a la derecha de </style> y doy un <Enter> para abrir un espacio y entonces introduzco el código (bien tecleándolo, o mediante “Copiar-Pegar” como hago yo, puesto que lo tengo escrito en otro sitio), así:

    Ahora vuelvo a la vista de “ Diseño ” (picar arriba en el botón) viendo como en la tabla no aparecerá nada aún, puesto que falta otra parte del código que nos muestre la fecha,
    2).-deberemos introducir otro pequeño código entre <body> y </body> (es decir en el cuerpo de la página) y concretamente en el sitio exacto donde queremos que aparezca, recordad que habíamos decidido fuese en el centro de la Tabla , así que nos aseguramos de que el cursor esté en dicho centro (picando dentro de ella) y volvemos a la vista de Código (ya sabemos como), y el cursor aparecerá justo en el sitio donde debamos introducir dicho código:

<script>
document.write("<small><font color='0066CC' face='Arial'><b>"+ dayarray[day] + " " + daym + " de " + montharray[month] + " de " + year + "</b></font></small>");
</script>

    Al igual que antes yo hago mediante “Copiar-Pegar”, y vuelvo a “Diseño” donde aparentemente no ha pasado nada porque nada se muestra, pero si ahora pulso F12 para comprobar la página en el navegador definido, saldrá:

curso online de Adobe Dreamweaver gratis

    ¡Voilá!, ya tenemos la fecha en nuestra página, fecha que de forma automática se deberá actualizar cada día. Seguiremos en el próximo tema trabajando con tablas.

 
  ** Un excelente hosting: Alojamiento web recomendado. Si tienes nociones de inglés, es un buen alojamiento para tu web.
   
 
Nos han visitado ya:
 usuarios.
   
Copyright © deseoaprender.com - Cantabria (España) 2005-2010.-Todo el contenido de esta web está protegido por la Ley de Propiedad Intelectual; por tanto no podrá reproducirse ni copiarse en todo o en parte, sin el consentimiento por escrito de su autor y propietario.