A través de este tutorial pretendo darles algunas instrucciones que les permitirán tener un conocimiento básico sobre el manejo de las tablas en el Front Page.

 

Estos pasos que les daré son sólo un ejemplo de lo que se puede lograr jugando con las configuraciones. Luego está en ustedes practicar con diferentes valores para que vayan observando los cambios. Son muchos los efectos que pueden lograrse y de esta forma ir dándole a cada página un toque distinto.

 

Antes de montar una Web debemos preparar y diseñar en el Paint Shop Pro o cualquier otro programa editor de imágenes, todo el material que utilizaremos como el top, fondos, barras, separadores, botones etc

Como el objetivo de este tuto se circunscribe al manejo de las tablas en Front Page les doy todo el material ya listo que utilizaremos para lograr algo similar al diseño que están viendo en estos momentos. La página que montaremos corresponde a una de mis letras de canciones. Pueden verla en este enlace

 http://morellajimenez.com.do/letdedicatedtotheone.htm

 

Indicaciones de como elaborar un top, los fondos, barras y botones los tengo incluidos en  varios de mis tutos. Por eso obviaremos todo ese proceso para comenzar directamente las instrucciones de como ir incorporando cada elemento en las tablas.

 

Espero de corazón que este tuto sea de utilidad para muchos de ustedes ya que estoy consciente de que la mayoría de los Webmaster trabajan con programas más actualizados como el DreamWeaver el cual jamás puede aprender a utilizar

Es posible que muchos les guste realizar este tipo de diseño sin necesidad de que vayan a tener tener su propia Web. Pero para quienes tengan en mente tener una página en la Red les diré algunos tips que deberán tomar en cuanta desde el momento mismo que se guardan los archivos hasta la hora de subirlos al servidor.

- No uses la letra ñ en ningún nombre de archivo

.- usa solo minúsculas

.- no uses acentos

.- utiliza nombres cortos

.- si consta de dos o mas palabras, escríbelas todas pegadas.

.- todos los archivos deberán ser guardados en la carpeta IMAGE de MIS WEB

.- Los htm se guardarán en la raíz de MIS WEB

.- En el servidor o administrador del hosting, al subir los archivos, los mismos deben estar ubicados en la misma carpeta de origen a fin de que se reconozca la ruta Si un archivo lo subes y lo ubicas en otra carpeta diferente entonces esa imagen no te saldrá en la página cuando la subas.

 

 

Materiales

 

 

CONFIGURACION DE LA PAGINA

 
 

Cuando empezamos a diseñar una Web lo primero que debemos hacer es decidir el tamaño de la página en función de la resolución que queremos. Para nuestro ejemplo seleccionaremos una resolución de 1024 x 768. Para ello haz clic en VER - TAMAÑO DE PAGINA. Luego selecciona la resolución que te indico.

 

1.- INSERTANDO FONDO INICIAL

 

1.1.- Clic en FORMATO - FONDO.( Format - Background) Te saldrá una ventana como esta

 

 

1.2.- Haz clic en la pestaña FORMATO (Formatting)

 

1.3.- Activa las casillas IMAGEN DE FONDO (Backgaund picture)  y CONVERTIR EN MARCA DE AGUA. (Make it a watermark) Esta última opción es la que permitirá que el fondo permanezca fijo mientras subes o bajas la página con la barra de desplazamiento.

 

1.4.- Clic en EXAMINAR (browse). Te saldrá una venta con tu explorador. Ubica el fondo1  en la carpeta que hayas determinado para guardar todo el material que previamente elaboramos en el psp.

 

COLOR DE FONDO

Para evitar que mientras abra la web se vea un fondo blanco poco atractivo podemos darle el mismo color del utilizado en el diseño. Te diré como hacerlo

 1.5 Haz clic en la flechita de la casilla Background (fondo) y aplica el color Hex={55,36,3F}

En la barra Texto se seleccionás el color de las letras que utilizaremos en la página en este caso es el Hex={AD,85,84}

 

1.6.- Clic en aceptar. Así tendremos insertado en nuestra página el fondo principal que lucirá de esta manera.

 

 

2.- Ahora insertaremos nuestra primera tabla. Para ello haz clic en la herramienta TABLAS la cual te indico con la flechita roja

 

 

Se te abrirá una ventanita como ésta

 

 

3.- Baja el ratón hasta el primer cuadrito y haz clic en él

 

4.- Te aparecerá en la página un rectángulo que puede ser de líneas de punticos o con un pequeño borde pero eso no tiene importancia ya que esa tabla la ajustaremos según la configuración que vayamos a darle.

5.- Haz clic con el botón derecho del ratón dentro del rectángulo y selecciona la opción PROPIEDADES DE LA TABLA .

 


 

Es en esta ventana donde le daremos la configuración deseada a cada tabla. En este caso aplica los valores que te muestro en la captura.anterior

Los colores utilizados son:

 

Light Border    #A5727B

Dark Border     #45282E

Color                #45282E

 

- Activa la casilla UTILIZAR IMAGEN DE FONDO (Use background picture)
- Clic en EXAMINAR (browse)
- Busca la barra1
- Clic en ACEPTAR (Ok)

La primera tabla tendrá este aspecto


 

6.- De nuevo haz clic dentro de la tabla e inserta una nueva tabla y dale la misma configuración que te indico a continuación

 

Recuerda que cada vez que vayamos a utilizar un fondo ya elaborado para la tabla debemos insertarlo a través de la opción UTILIZAR IMAGEN DE FONDO (Use background picture) para luego localizarlo haciendo clic en EXAMINAR, en nuestro ejemplo insertaremos el fondo2. Nos quedará de esta forma.


 

7.- Inserta otra tabla y selecciona nuevamente el fondo2 dándole esta configuración.

 

 

Ahora tus tablas lucirán así

 

 

8.-  inserta una nueva tabla pero esta vez selecciona la barra2 con estos valores.

 

 

 

 

9.- Nueva tabla insertando el fondo2 con los valores siguientes

 

 

10.- Baja el cursor para tener más espacio para trabajar. Te quedará algo similar a lo que te muestro en esta captura

 

 

11. Lleva de nuevo el cursor a la parte superior para insertar otra tabla en la cual insertaremos el Top

 

 

12.- Ubica el cursor debajo de la imagen del top. Agrega otra tabla insertando el fondo2 y dale la siguiente configuración

 

 

 

La nueva tabla tendrá este aspecto

 

 

13.- Utilizando nuevamente el fondo2 y ubicada dentro de la tabla que acabamos de hacer inserte una nueva y fíjate bien en esta configuración. Notarás que en este caso, el color oscuro está en la parte superior y el claro en la parte inferior, esto permite darle una forma acanalada a la table.

 

 

Así lucirá

 

 

 

14.- Nueva tabla, esta vez con la barra1 y estos valores

 

 

 

15.- Inserta una nueva tabla con el fondo2

 

 

 

 

16.- Lleva el cursor al final de la tabla de abajo a fin de juntar ese borde inferior con el borde inferior de las tablas superiores

 

 

17.- Vuelve a llevar el cursor al interior de la última tabla realizada y bájalo varios espacios para poder seguir trabajando.

 

 

 

Mist Modelo

Claudia Viza

 

Mist Flores ViPics.com

Morella Jiménez

 

 

 

 

 

Página Principal / Agradecimientos / Algo de Mi / Fotos /

Fondos / Midis  / Letras de Canciones / Fuentes

 Marcos Para Fotografías / Marcadores de Libros

 Juegos de Tarjeta y Sobres / Identifica tus Regalos / Tarjetas de Felicitación

Invitaciones / Etiquetas potes de Cocina / Etiquetas para libros

Para Tus Notas / Sobres para cds / Certificados y Diplomas /

Bingo Baby Shower / El Primer Album del Bebé / Portadas de Revistas

Tutoriales / Mis Poemas / Sólo Para Niños /

Mi Hermano, Héroe de la Historia Dominicana

Recetas / Libro de los Valores

Contáctame / Firma mi Libro