Inicio TuToriales diseño web tutorial 03

Ejercicio: ejercicio 03 sitio web
Objetivo: CRear y gestionar un sitio web
Software y versión utilizados: Dreamweaver mx
Nivel: Básico
Duración: Una hora aprox.

Archivos necesarios: 03_ejercicio sitio

 

Paso 1

El primer paso que debemos realizar siempre es definir el sitio web. Antes debemos asegurarnos que todos los archivos que vayamos a utilizar estarán en el mismo directorio o carpeta.
Desde el menú Sitio/ nuevo sitio le damos nombre y definimos la carpeta de raiz local, que sera´la carpeta donde tengamos todos los contenidos.

 
 

Paso 2

Para este ejercicio hemos de crear 4 páginas web desde el menu Archivo / Nuevo y escogemos página básica HTML.
En la primera página crearemos un menú de navegación y en las tres siguientes el desarrollo de los contenidos.
Para colocar los textos simplemente los copiamos desde el procesador de texto y los pegamos en las respectivas páginas web.

Nota
Es importante que los nombre de loas páginas no contengan tildes o ñ puesto que los vinculos no funcionaran en la red.
 

Paso 3

Para dar formatos al texto podemos variar su tipografia, estilo, tamaño, color, alineación... desde la paleta de propiedades.
Podemos crear estilos sencillos desde la paleta de estilos HTMl y aplicarlos rápidamente a todo el sitio.
La opsicón más completa es crear estilos en cascada desde la paleta estilos CSS, el número de opciones es mucho mayor y no se limita únicamente al texto, además se puede guardar la hoja de estilos en el sitio y adjuntarla a las sucesivas páfinas que vayamos creando.

Nota
Como vereis solo podemos aplicar familas tipográficas universales que permitiran ver las páginas correctamente en ordenadores remotos.
Lo mismo ocurre con los colores, únicamente tenemos disponibles los colores comunes a todos los sistemas operativos.
 

Paso 4

A continuación colocaremos una imágen a cada página. Esto lo hacemos cliclando en el icono de el arbol en la paleta Insertar o desde el Menú insertar / imagen.
Las imágenes no las podemos colocar en el sitio que nosotros queramos como en otros programas de edición. Los Editores HTML son programas de inserción continúa por lo tanto la imagen se colocará donde tengamos el punto de inserción.
Para centrar la imagen en la ventana lo hacemos desde la paleta de Propiedades.

Nota

Las imágenes deben estar en modo de color RGB, a 72 ppp y las guardaremos en formato .jpg o .gif que son los formatos compatibles con los navegadores.
En principio no las debemos escalar desde el editor HTML

 

Paso 5

Podemos colocar imágenes o dar color al fondo de las páginas desde el menú modificar / propiedades de la página. Como podeis observar las imágenes de fondo siempre se colocan de modo mosaico, cosa que puede ser molesta si la imaen no es adecuada.

 
 

Paso 6

Para finalizar realizamos los hipervinculos que nos permitirán navegar entre las páginas de el sitio.
Cada página debe permitirnnos ir a las restantes. Podemos realizarlos de varias maneras:

  • Desde el menú Insertar / Hipervínculo.
  • Desde la paleta propiedades escribiendo directamente el nombre de la página.
  • Desde la paleta propiedades buscando la página a través de el icono de la carpeta.
  • Desde la paleta propiedades con el señalador y la ventana de el sitio.
 
 

Final

Podeis comprobar el resultado del sitio en el navegador desde el menu Archivo / Vista Previa en el Navegador o desde el icono de vista previa.

A continuación teneis un ejemplo se el resultado de este ejercicio.

ejemplo

 

Ernesto Navarro Durá. 2009