martes, 14 de febrero de 2012

Macromedia Dreamweaver 8


Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para descubrir lo fácil que es.

Mi primera página
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como puede hacerse. Abres un documento nuevo y seleccionas la Categoría Página básica,HTML.
Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.
Una vez introducido el texto, vas a modificar el título y el color de fondo del documento.
Para ello debes hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
Entonces se abrirá una ventana como la que aparece más abajo.
Cambia el Título por Mi primera página.
En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser de color azul.
Seguidamente pulsa sobre el botón Aceptar.
Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en un cd-rom o en un disquete, pero preferiblemente en el disco duro.
Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre una ventana con una opción similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro.
En los navegadores más modernos al colocar el cursor sobre una imagen aparecen estos iconos  en una esquina de la imagen, si haces clic en el icono del disquete aparecerá el mismo menú Guardar imagen como... a que hacíamos referencia anteriormente.
Copia la imagen que aparece a continuación, para luego poder insertarla en la página web que estamos creando. Puedes guardarla, por ejemplo, en la carpeta Mis Documentos.


Ahora tienes que insertar la imagen debajo de la segunda línea de texto. En primer lugar debes situar el cursor al final de la segunda línea y pulsar un intro (Enter) para ir a una nueva línea. Después debes dirigirte al menú Insertar, a la opción Imagen.
En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías guardado, y después seleccionarla.

Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto:
Si no te aparece, puedes mostrarlo a través del menú Ventana, con la opción Propiedades.
Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraido. Para que te aparezca desplegado debes pulsar sobre el botón , que aparece junto al nombre.
Selecciona la primera línea de texto y cambia el Formato por Encabezado 1 y el color por #000066, tal y como se muestra en la siguiente imagen.
Después de esto, la apariencia de la primera línea habrá cambiado. Selecciona la imagen y las dos útimas líneas de texto. Pulsa sobre el botón  para centrarlos.
Una vez hayas centrado la imagen y las otras dos líneas siguientes, selecciona la segunda línea de texto, que aún no ha sido modificada. Cambia el Formato por Encabezado 3, pulsa una vez sobre el
botón  y pulsa tres veces sobre el botón .






Selecciona de nuevo la última línea, y en Vínculo introduce http://www.elpais.es, para crear un enlace a esa otra página:
Después de todos estos pasos, puedes ver cómo ha quedado el documento pulsando la tecla F12.
Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo, desde la opción Guardar.
Puedes llamar al documento como lo desees, pero siempre teniendo en cuenta que la extensión ha de ser htm o html.
Por ejemplo, puedes llamarlo prueba1.htm.
Si pulsas aquí podrás ver cómo debería haber quedado la página después de haber seguido todos los pasos anteriores. Compara esta página con la tuya, para ver si lo has hecho todo bien.


EmoticonEmoticon