Dreamweaver CS5
Práctica: Mi primera página 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.
Empezar un nuevo proyecto: 1. Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto a lo largo del tema
que puede hacerlo de varias formas. 2. Abre un documento Nuevo y selecciona la categoría Página en blanco, HTML en Tipo de página y para terminar en la columna Diseño dejamos la opción por defecto:
.
3. Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:
4. Una vez introducido el texto, vamos a modificar el título y el color de fondo del
documento.
Página 1
Copyr Copyriight ght INE INE DE T E C
Dreamweaver CS5
5. Para ello podemos hacer clic sobre el menú Modificar y elegir la opción
Propiedades de la página . Se abrirá la ventana Propiedades de la página mostrándonos el contenido de la categoría Apariencia (CSS).
6. En Color de fondo escriba el valor hexadecimal #CCCCFF , de este modo el fondo
del documento pasará a ser de color azul. 7. Haz clic en la categoría Título/Codificación a la izquierda, y en el campo Título escribe Mi primera página.
8. Para guardar y aplicar los cambios, pulse sobre el botón Aceptar.
Insertar una imagen: 1. Para insertar la imagen, hemos de tenerla en la carpeta donde estamos creando
nuestras páginas, habitualmente en una subcarpeta dedicada a las imágenes.
Página 2
Copyright INE DE T E C
Dreamweaver CS5
2. 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 guardar dicha imagen en un fichero de nuestro disco duro. Ten en cuenta que si piensas publicar la página en Internet, hay que respetar los derechos de autor de la imagen. 3. Para esta práctica nosotros vamos a utilizar la imagen “logo-grupo.jpg” que se adjunta con este documento.
4. Ahora vamos a colocar la imagen debajo de la segunda línea de texto. En primer lugar,
situamos el cursor al final de la segunda línea y creamos un salto de línea pulsando la tecla ENTER. 5. Después nos dirigimos al menú Insertar, y escogemos la opción Imagen. 6. En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías guardado, seleccionarla y pulsar Aceptar. La imagen se coloca en el documento.
7. Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el panel
Propiedades que se encuentra normalmente en la parte inferior de la ventana.
8. Si no se encuentra abierto, puedes mostrarlo a través del menú Ventana, y pulsando
la opción Propiedades. Si lo que te ocurre es que únicamente te aparece el título del panel en la parte baja de la interfaz, es porque está contraído. Para que te aparezca desplegado debes hacer doble clic en Propiedades.
Página 3
Copyright INE DE T E C
Dreamweaver CS5
Modificar el formato con el panel Propiedades: 1. Selecciona la primera línea de texto. En el panel Propiedades pulse HTML y aplique
el formato Encabezado 1 (h1) seleccionando el valor Encabezado1 en el desplegable Formato.
2. Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando 3. 4.
5. 6. 7.
el icono CSS a la izquierda del panel Propiedades. Mediante el panel Propiedades en Dreamweaver CS5 podemos acceder tanto a las propiedades de CSS como a las propiedades de HTML de una forma muy sencilla. Al utilizar el panel Propiedades de CSS, Dreamweaver aplica formato al texto mediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre el diseño de la página Web y reducen el tamaño del archivo. Seleccione nuevamente la primera línea. En el área Regla de destino seleccione , para aplicar el formato solo al texto seleccionado. En el desplegable Fuente aplique el estilo Arial, Helvetica, sans-serif . Cambie el color de texto a un azul con un valor hexadecimal #009 y centre el texto pulsando el botón Alinear al centro .
8. Selecciona la segunda línea de texto, y seleccionando como antes
línea>. 9. Active ahora los botones Negrita y Cursiva para modificar el formato. 10. Vamos a centrar también la imagen. Para ellos empezamos seleccionándola en el documento. Lo que hay que centrar es el contenido del párrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos aparece la jerarquía de etiquetas. Haga clic sobre . 11. Ahora, en el área Regla de destino seleccione y centre el párrafo como hemos visto hasta ahora, pulsando en el botón Alinear al centro del panel Propiedades. Crear un enlace: 1. Por último vamos a crear el enlace. Para ello, seleccione el texto de la última línea del
documento, y cambie el panel Propiedades a las propiedades de HTML. 2. En el campo Vínculo, escriba la URL de la página a enlazar, en nuestro caso será http://www.cocacola.es.
3. Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú
Archivo, y pulsando la opción Guardar. 4. Puedes llamar al documento como desee, pero la extensión ha de ser *.htm o *.html. Por ejemplo, lo podemos llamar miprimerapagina.htm, y la hemos guardado en el Escritorio de Windows. Página 4
Copyright INE DE T E C
Dreamweaver CS5
5. Ahora, puedes ver cómo se ve en tu navegador pulsando la tecla F12.
Página 5
Copyright INE DE T E C
