Tutorial dreamweaver

 

Lección 1: 

Parte 1: Conseguir Adobe Dreamweaver CS3. 

Bueno, llegado a este punto, supongo que has de tener instalado el Macromedia Dreamweaver en tu ordenador. Nosotros utilizaremos la version CS3 del programa en Español, por su puesto. Por eso te recomiendo que intentes conseguir esta version para poder seguir el tutorial. 

Tambien supongo que tienes un espacio web, si no lotienes puedes acceder a uno gratuito, Aqui te dejo una lista de Servidores gratuitos muy buenos para alojar tu Web. 

iespana 

100 Mb de espacio 
Acceso: Web y Ftp 
Trafico: Ilimitado 
Nombre del Dominio: Htt://nombre.iespana.es 
Inscripciónn en el directorio de Iespana 

galeon hispavista 

5 Mb de espacio 
Acceso: Web 
Trafico: Ilimitado 
Nombre del Dominio:Http://nombre.*** . 
Teinscriben en google, Lycos , Hot bot y Altaweb, de manera gratuita 

tripod 

1024 Mb de espacio 
Acceso: Web y FTP 
Trafico: Ilimitado 
Nombre del Dominio: Http://***/nombre 

telepolis 

50 Mb de espacio 
Acceso: Web y Ftp 
Trafico: Ilimitado 
Nombre del Dominio: Http://club.telepolis.com/nombre 

Parte 2: Preparar nuestro entorno de trabajo. 

Ok, todo en orden. Una vez que tehayas descargado e instalado el Dreamweaver, necesitas crear las carpetas en las cuales vamos a meter todo el contenido de nuestra Web. Vamos a crear dos carpetas: 

Una carpeta que llamaremos "web" que es donde irá todo el contenido de nuestra web e iremos guardando nuestra página a medida que la vayamos creando. Al mismo tiempo dentro de esta carpeta "web" crearemos una nueva carpeta quellamaremos "imagenes". Esto que parece una tonteria, es MUY IMPORTANTE, ya que nos permitirá tener organizada nuestra web, y a la hora de subir la web será mucho más facil. 

 

Parte 3: Y... ¿Como lo vamos a hacer? 

Bueno, una vez hecho todo lo anterior, te voy a explicar por encima como vamos a hacer nuestra primera pagina web. Vamos a utilizar el sistema que utilizan la mayoria de webmasters.Vamos a trabajar con Etiquetas DIV.... no te asustes !!! Son muy sencillas de utilizar, te explico por encima: 

Una Etiqueta DIV es un pequeño rectangulo, donde podemos poner cosas dentro. Es decir, las DIV se utilizan para dividir la web en partes, y trabajar esas partes de forma individual. Mira, por ejemplo, la web que vamos a realizar mediante el tutorial, se compondra de 4 Etiquetas Div,mira el dibujo: 

 

Es muy sencillo, a cada etiqueta le daremos un tamaño determinado. No te preocupes por eso, lo haremos mediante una Hoja de Estilo (más adelante veremos que es esto) que es un documento donde escribimos el tanto el tamaño que queremos darle a las etiquetas, como la posicion que queremos que tengan. Dentro de cada DIV podremos poner muchas cosas: Texto, Tablas, Listas,Imagenes, Links .... 

Una vez que ya te has familiarizado con estos conceptos, creo que estas preparado para comenzar con lo que realmente nos interesa "Crear nuestra primera WEB" 

 

Lección 2: 

Parte 1: Empieza nuestro proyecto...Abrimos Dreamweaver 

Bueno, una vez que te haya quedado claro todo lo anterior, es hora comenzar con la creacion de nuestra pagina web. 
1º.Vamos a ejecutarel Dreamweaver. Vamos a Archivo > Nuevo > Página en blanco > Html. 

 

Una vez dentro, puede que te asustes, ya que tiene demasiadas opciones y botones, pero descuida ya que la mayoria no los vamos a utilizar. Veras que la pantalla se divide en dos partes, la del "codigo html"  y la de "diseño" donde veremos graficamente nuestra web. 

Parte 2: Poniendo el Titulo a la pagina Vete a la parte de Codigo y pon el Titulo que quieras a tu pagina web. 
Nosotros le pondremos como Titulo : ANIMALES 

 

Parte 3: Crear las Div , Importante. 
Bueno, una vez que hayas puesto el titulo, vamos a empezar con lo importante, vamos a crear la Estructura de nuestra web. Esta estructura consistira básicamente en : 

-Cabecera (Parte Alta) 
-Menu (Ira a la izquierda) 
-Contenido...