• Para facilitarte tu regreso, añade este sitio a tus Favoritos

Curso de Dreamweaver: diseño web paso a paso, lección 8 - Creación de páginas web, curso webmaster - recursos web
» ¿ Buscas un alojamiento para tu web que te ofrezca lo mejor del mercado ?, pues estás de suerte, lee detenidamente la siguiente información:

   ******** OFERTA: 50% descuento ********

   • ILIMITADO espacio en disco  • ILIMITADO de transferencia mensual o ancho de banda   • dominio gratis 1 año   •. Alojamiento web en hosting de calidad.
   • Correo ilimitado   • Alojamiento ilimitado de dominios   • Soporte para PHP5 y otros   • MySQL (hasta 75 bases de datos)   • Backup diario de las B. de Datos   • Atención al cliente las 24 horas (es en inglés, pero te aseguro que no lo vás a necesitar porque el hosting funciona 100% a satisfacción del webmaster)
   • Instalador de múltiples aplicaciones (Joomla, PHP-Nuke, Wordpress, osCommerce, Foro PhpBB y otros muchos) de forma sencilla   • ...y muchos más que irás descubriendo.
» Lo tienes todo por menos de ¡¡ 50 € al año !!. Si estás interesado, puedes conseguirlo fácilmente: Aloja tu sitio aquí, a través de este enlace y tendrás esta oferta especial.
NOTA: Esta web está alojada en él desde hace 2 años y no ha tenido una sola caída. ALTAMENTE RECOMENDADO.
 
 
 * MENÚ DEL CURSO
 * OTRA FORMA DE DISEÑAR TU WEB
 * TODO ESTO GRATIS PARA TÍ
 * Y HAY MUCHO MÁS AÚN
 * ENLACES PATROCINADOS
 
 

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í:

curso dreamweaver, curso diseño web.Tutorial Dreamweaver webmaster
 

   
   
y 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í:
       
y será entonces cuando pulse <Enter> para que abra el espacio:
      

para que inserte la nueva tabla, lo que puedo hacer mediante el menú superior “Insertar-Tabla”:
    
o bien mediante el icono (estando en la ficha “Común”):
-

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í:

                          
con lo que tras dar 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:
-
     
teniendo ya la tabla como veis.
   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 ”:

con lo cual ahora volvemos a picar dentro de la tabla y veremos que el cursor se colocará justo en el centro de la misma:
-
      
y 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):
-
                          

donde 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í:
y 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:
-

y el código debe ser este:
-

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

que 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á:

¡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.Saludos
 
  
 
   
Google
 
© deseoaprender.com - Cantabria (España) 2005-2009.-Todo el contenido de esta web está protegido por la Ley de Propiedad Intelectual; por tanto no podrá reproducirse ni copiarse sin el consentimiento por escrito de su autor y propietario.