Manual Macromedia Dreamweaver

Artículo escrito por: Lucas Ansalone

Fecha: 20/08/03 - Prohibida su reproducción, total o parcial sin conocimiento previo del autor.

En este manual usted verá como crear de manera rápida y simple un sitio web. Dreamweaver es un potente programa con el que podremos crear páginas profesionales de manera sencilla.

Comenzando

Bien, iremos de a poco, un sitio web es un documento que se aloja en el servidor si se quiere que se tenga acceso a este, es decir que si queremos publicar nuestro sitio en Internet para que sea accesible debemos subirlo a un servidor web.

Servidor

Un servidor es nada más que una computadora pero potente que nos provee de todas las herramientas para que nuestro documento sea accesible vía Internet.

Lo primero que vemos en Dreamweaver

Al abrir el programa nos van a aparecer divido en dos, en la parte de arriba vemos el codigo, en la de abajo es la parte gráfica, es decir sino sabemos programar sitios web mediante código podremos hacerlo de manera gráfica, muy similar a un documento Office.

Podemos cambiar la vista a solo código o solo entorno gráfico, seguramente para los más nuevo el entorno gráfico será lo más apropiado. Esto lo elegimos mediante la opción VER - DISEÑO, de esta manera se nos abre la pantalla completa para que podamos comenzar a trabajar en el entorno grafico. También existe otra manera de acceder a la misma opción de forma más rápida, esto lo hacemos mediante unos botones en la esquina superior izquierda: El que está seleccionado en la imagen que vemos es el de diseño, es decir el entorno gráfico, el de medio es el de código y diseño juntos y el de la izquierda es el de código solo.

Comenzar a diseñar

Vamos a ir de a poco, primero veremos lo básico, escribimos un texto cualquiera en la hoja, por ejemplo "Esta es mi página web", ahora la probaremos en nuestro navegador, de esta manera iremos viendo como va quedando nuestra página en Internet Explorer, entonces vamos a ARCHIVO-VISTA PREVIA EN EL EXPLORADOR-IEXPLORE o presionando simplemente F12 el programa lanzará la vista previa de la página.

Bueno, ahora a ese simple texto vamos a darle forma, pero primero vamos a darle el titulo a la página, si ese que aparece arriba a la izquierda en el explorador, esto lo hacemos en la parte donde dice Título, arriba: donde en la imagen ves "web, creacion de sitios, curso" seguramente lo tendrás en blanco, ahí pones el título que le queres dar a la página, ahora dale F12 y nos aparecerá.

Todo sobre formatos de textos

Ahora es hora de darle formato a un texto, es decir cambiarle la letra, tamaño, color, ponerlo en negrita, etc.

Esto también es bastante simple, seleccionando primero el texto vamos a donde dice "Texto" en el menú de arriba, allí nos saldrás varias opciones, por ahora veremos de darle negrita y subrayado, dentro del menú texto elegimos "Estilo" que verás que tiene una flecha hacia la derecha, esto quiere decir que hay más opciones, elegimos Negrita y ahora vemos que el texto tiene negrita, para subrayarlo, son los mismos pasos, solo que elegimos Subrayado.

Ahora veremos como centrar los textos, o mandarlos a la izquierda, derecha, etc. Esto es bien sencillo, seleccionando el texto vamos al menú TEXTO allí elegimos ALINEAR y veremos que tenemos 4 opciones, IZQUIERDA, DERECHA, CENTRO y JUSTIFICAR.

Creando enlaces

Aquí veremos como enlazar páginas, es decir crear licks o unir cada una de las páginas del sitio. Primero que nada vamos a probar enlazando un texto a un sitio web, por ejemplo este www.zona-trucos.com.ar, para lograr esto es muy sencillo, ponemos por ejemplo en la página "Visitá zona-trucos.com" sin comillas obviamente, seleccionamos ese texto, le damos click con el botón derecho del mouse y elegimos CREAR VINCULO, nos aparecerá un recuadro, en la parte que dice URL ponemos http://www.zona-trucos.com.ar y le damos aceptar entonces veremos que ya se ha creado!

Todo sobre imágenes en Dreamweaver

Bueno, en esta oportunidad veremos como insertar imagenes con Dreamweaver, es muy muy fácil aunque ya hay que empezar a ver un poco la parte del código, ya que necesitaremos cambiar unas cosas que veremos adelante.

Para insertar una imágen es muy simple, solo basta con ir a INSERTAR-IMAGEN se nos abrirá el ya conocido menú donde elegimos la imagen que queremos mostrar y listo. Si se quiere poner en el medio o a la derecha solo basta hacer lo mismo que se hace con el texto.

Le damos F12 así probamos como se ve. Todo muy lindo, pero que sucederá cuando la página este alojada en la web?, la imágen solo la tenemos nosotros, entonces habrá que subirla, lo haremos por FTP . Ahora la imágen ya está en el servidor, solo queda que desde nuestra página accedamos y la mostremos, entonces allí si se verá correctamente la imágen. Esto se hace con el botón derecho sobre la imágen y elegimos PROPIEDADES, se nos abrirá un menú abajo seguramente, vemos una opción que dice: ORIGEN, bien, allí colocamos la dirección donde esta la imágen, ejemplo http://www.zona-trucos.com.ar/foto.gif , el menú que veremos será algo como este:

Ya tenemos nuestra imágen en la página, ahora veremos como hacer para que la imágen tenga un vínculo a algún sitio o a donde queramos, otra vez le damos click botón derecho y luego PROPIEDADES, veremos el mismo cuadro y en vínculo ponemos la dirección a donde queremos que al hacer click sobre la imágen se diriga.

Todo sobre tablas en Dreamweaver

Ahora viene la parte más aburrida que es donde vemos las tablas, aunque es la parte más importante quizas de este manual, ya que todo sitio bien hecho y bien ordenado está hecho con tablas, sino uno se da cuenta que el sitio es hecho por un usuario común o inexperto.

Primero iremos viendo de a poco, para conocer más o menos como trabajan las tablas, crearemos una para el titulo de la página y otra para el texto que irá debajo del mismo.

Para insertar una nueva tabla es muy simple, INSERTAR-TABLA al ir allí se nos abrirá un nuevo recuadro, en el se nos pregunta la cantidad de filas y columnas, ponemos 2 filas y 0 columnas, ok, ahora se han creado, en la primera introducimos el titulo, le damos algun color, le ponemos negrita y si quieren subrayado, en la tabla de abajo empezamos a escribir un texto....

Por cierto podemos agrandar las tablas y achicar a nuestro gusto,apretando el mouse sobre las lineas con el botón izquierdo, podremos darle el espacio que querramos. Vemos como queda con F12 y se ve que queda bastante bien, ok, pero ese borde queda mal así, nos queda o cambiarle el color o quitarlo, iremos por paso, para cambiarle el color, hacemos click en la tabla y vemos en la parte de código de arriba esto: <table width="75%" height="96" border="1"> , donde border="1" es el que debemos cambiar, el 1 por el 0, de esta manera la tabla no tendrá borde. Para cambiarle el color, es botón derecho sobre la tabla, allí seleccionamos PROPIEDADES, y nos aparece nuevamente el recuadro, vemos la parte que dice Borde

Hacemos un click sobre la flecha negra que apunta hacia abajo y elegimos el color, sino si sabemos los códigos de los colores simplemente los escribimos.

Como quitar el subrayado de los links

Aquí veremos algo que se pide mucho en todos lados, que es como quitarle el subrayado a los links, además mostraré como hacer que al pasar el mouse sobre este cambie de color, aclaro este código no es mio, no recuerdo de quien es, pero mio no :)

Comenzando con esto, entre <head> y </head>, ponemos el siguiente código:

<style>
a:hover{
color:red;
text-decoration=none;
}
</style>

Esto hará que al pasar sobre el link pinte el de color rojo (red) poniendo blue lo hará en azul, yellow en amarillo y así, luego text-decoration=none; es el que le quita el subrayado, lo bueno de esto es que no se necesita hacer en toda la página, es en general para todos los links que haya en el documento.

 

Personaliza tu pc con los mejores iconos y fondos!!! (Servicio externo con costo adicional, no de Zona-Trucos) Visítanos! Iconos y Fondos Cambiá tu desktop! Fondos, cursores, salvapantallas, programitas, imagenes de modelos, coches y autos, lugares, animales, cine TV, famosas, mensajes sms y mas!. Descargar! Pon al día tu pc con toneladas de iconos, fondos, programitas, sonidos, skins, punteros, y mucho mas!!. Descargar!