Haz clic en el pequeño separador y arrástralo hasta el tutorial

para que vayas siguiendo la lectura

 

 

 

Existen varios programas para la edición de páginas Web. Tengo entendido que uno de los mejores es el DreamWeaver de MacroMedia pero debo reconocer ante ustedes que no fui capaz de aprender a manejarlo por mi cuenta.

A duras penas logré trabajar un poco con el Front Page que es uno de los programas del paquete Office. También debo condensarles que es mucho lo que me falta por aprender sobre este programa pero lo poco que he aprendido quiero compartirlos con ustedes.

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.
 
 
 
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.
 
 
 
INSERTANDO FONDO PRINCIPAL
 
1.- Clic en FORMATO - FONDO. Te saldrá una ventana como esta
 
 
2.- Haz clic en la pestaña FORMATO
 
3.- Activa las casillas IMAGEN DE FONDO y CONVERTIR EN MARCA DE AGUA. Es última opción es la que permitirá que el fondo permanezca fijo mientras subes o bajas la página con la barra de desplazamiento.
 
4.- Clic en EXAMINAR. Te saldrá una venta con tu explorador. Ubica el fondo principal en la carpeta que hayas determinado para guardar todo el material que previamente elaboramos en el psp.
 
5.- Clic en aceptar. Así tendremos insertado en nuestra página el fondo principal que lucirá de esta manera.
 
 
6.- Ahora insertaremos nuestra primera tabla. Para ello haz clic en la herramienta TABLAS la cual te indico sombreada en amarillo en esta imagen.
 
 
Se te abrirá una ventanita como ésta
 
 
7.- Baja el ratón hasta el primer cuadrito y haz clic en él
 
8.- 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 a la tabla.
 
9.- Haz clic con el botón derecho del ratón dentro del rectángulo y selecciona la opción PROPIEDADES DE LA TABLA .
 
 
10.- Es en esta ventana donde vamos a darle toda la configuración que necesitamos a cada tabla que insertemos. A nuestra primera tabla le daremos la configuración que te indico en la imagen anterior.
 
DONDE DICE DISEÑO:
 
- En ALINEACIÓN: Siempre debes escoger la opción CENTRAR, obviamente con el objeto de que la tabla nos quede totalmente centrada en la página
 
- En ESPECIFICAR ANCHO: Pondremos la numeración en porcentaje del tamaño de la tabla. En nuestro ejemplo será de 87. Mientras mayor sea el ancho menos se verá nuestro fondo principal pero todo depende de nuestro criterio y de lo que queremos lograr en el diseño.
 
- En MARGEN DE CELDA Y ESPACIO ENTRE CELDA: Pondremos una numeración de 1 en cada casilla. Una vez que completemos la configuración notarás los efectos que se logran al aumentar estos valores. Si mayor es el número, mayor será el grosor del bordecito de la tabla. El segundo valor de Espacio Entre Celda te indicará la distancia que dejarás entre una tabla y otra.
 
Los valores que seleccionemos para el margen y la distancia cambiarán considerablemente la apariencia de la tabla. Si seleccionamos un número menor para el margen y uno mayor para la distancia entre celdas tendrá un aspecto pero si invertimos esos valores el aspecto de la tabla será completamente diferente.
 
DONDE DICE BORDES:
 
En TAMAÑO: Dale un valor de 1
En BORDE CLARO: selecciona el color  Hex={C9,BE,9A}
En BORDE OSCURO: Selecciona el color  Hex={96,82,44}
En COLOR: También selecciona el color Hex={96,82,44}
 
Los colores de los bordes cambiarán el efecto de la tabla cuando se invierten los tonos. Es decir si seleccionamos el color oscuro y lo ubicamos en la casilla del color claro, la apariencia de la tabla cambiará totalmente.
 
Es necesario que juegues un poco con las diferentes combinaciones que pueden hacerse. Es prácticamente la única forma de que vayas captando los cambios que se producen al usar diferentes valores en cada configuración. No temas a realizar estas pruebas luego que termines de realizar este ejercicio. Haciendo combinaciones diferentes lograrás cambiar la apariencia de las tablas.
 
DONDE DICE FONDO
 
Donde dice COLOR: Déjalo en AUTOMÁTICO. Solo se selecciona un color cuando no se hará uso de alguna textura previamente elaborada. En nuestro caso utilizaremos como fondo la primera barra dorada que realizamos en el psp.
 
- Activa la casilla UTILIZAR IMAGEN DE FONDO
- Clic en EXAMINAR
- Busca la primera barra dorada.
- Clic en ACEPTAR
 
La primera tabla tendrá este aspecto
 
 
 
11.- De nuevo haz clic dentro de la tabla e inserta una nueva tabla
 
 
12.- Dale la misma configuración que te indico en la imagen anterior. 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 para luego localizarlo haciendo clic en EXAMINAR.
En nuestro ejemplo, insertaremos el fondo gris texturizado que realizamos en el psp.
Nos quedará de esta forma.
 
 
 
13.- Repite dos veces más los pasos 11 y 12 para insertar dos nuevas tabla y darle la misma configuración de la anterior. Ahora nuestras tablas lucirán de esta manera.
 
 
14.- Inserta una nueva tabla y dale los valores que te indico en la imagen inferior. Como imagen de fondo selecciona la segunda barra dorada que hicimos
 
 
Nuestra tabla ahora tiene este aspecto
 
 
15.- Inserte una nueva tabla con esta configuración. El valor de los colores es el siguiente
BLANCO:    Hex={FD,FD,FD}  GRIS:    Hex={B6,B9,B3}
 
 
Nos quedará así
 
 
16.- Inserta una nueva tabla, esta vez con esta configuración que te señalo a continuación e inserta como imagen de fondo la primera barrita dorada que hicimos.
 
 
Tendremos un aspecto de tabla similar a ésto
 
 
 
17.- Inserta una nueva capa con estos valores. Como imagen de fondo inserta nuestro fondo gris texturizado
 
 
 
 
 
18.- Insertaremos una última tabla de las que conformarán los bordes principales de la página.
A esta tabla la configuraremos tal como te señalo en la próxima imagen. Los grises y el blanco tienen los mismos valores que te indiqué en el paso 15
 
 
Las tablas principales quedaran definitivamente como te muestro en esta imagen
 
 
 
19.- Haz de nuevo clic dentro de la última tabla y centra el curso justo a la mitad de la tabla. Eso podrás hacerlo haciendo clic en la herramienta CENTRAR, que te sombreo en esta imagen 
 
 
 
 
 

 

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

 

Morella Jiménez Diseños 2008