DreamweaverCS5

Prctica: Mi primera pgina

Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear
una pgina web sencilla, con varios estilos de texto, una imagen y un enlace a otra pgina.
Crear esta pgina solo te llevar unos pocos minutos, y sabrs cmo trabajar con los
elementos bsicos con los que estn hechas la mayora de las pginas web. Si nunca has
hecho una pgina web, este es el momento para descubrir lo fcil 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 categora Pgina en blanco, HTML en
Tipo de pgina y para terminar en la columna Diseo dejamos la opcin por
defecto: <ninguno>.

3. Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:

4. Una vez introducido el texto, vamos a modificar el ttulo y el color de fondo del

documento.

Pgina 1
Copyright INE DE T E C

DreamweaverCS5

5. Para ello podemos hacer clic sobre el men Modificar y elegir la opcin

Propiedades de la pgina. Se abrir la ventana Propiedades de la pgina

mostrndonos el contenido de la categora 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 categora Ttulo/Codificacin a la izquierda, y en el campo Ttulo
escribe Mi primera pgina.

8. Para guardar y aplicar los cambios, pulse sobre el botn Aceptar.

Insertar una imagen:

1. Para insertar la imagen, hemos de tenerla en la carpeta donde estamos creando

nuestras pginas, habitualmente en una subcarpeta dedicada a las imgenes.

Pgina 2
Copyright INE DE T E C

DreamweaverCS5

2. Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al

hacer clic con el botn derecho del ratn sobre la imagen que queremos traer de
Internet, se abre una ventana con una opcin 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 pgina en
Internet, hay que respetar los derechos de autor de la imagen.
3. Para esta prctica 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 lnea de texto. En primer lugar,

situamos el cursor al final de la segunda lnea y creamos un salto de lnea pulsando la

tecla ENTER.
5. Despus nos dirigimos al men Insertar, y escogemos la opcin Imagen.
6. En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la que la
habas 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 travs del men Ventana, y pulsando

la opcin Propiedades. Si lo que te ocurre es que nicamente te aparece el ttulo del

panel en la parte baja de la interfaz, es porque est contrado. Para que te aparezca
desplegado debes hacer doble clic en Propiedades.

Pgina 3
Copyright INE DE T E C

DreamweaverCS5

Modificar el formato con el panel Propiedades:

1. Selecciona la primera lnea 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
diseo de la pgina Web y reducen el tamao del archivo.
Seleccione nuevamente la primera lnea. En el rea Regla de destino seleccione
<Nuevo estilo en lnea>, 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 botn Alinear al centro.

8. Selecciona la segunda lnea de texto, y seleccionando como antes <Nuevo estilo en

lnea>.
9. Active ahora los botones Negrita y Cursiva para modificar el formato.
10. Vamos a centrar tambin la imagen. Para ellos empezamos seleccionndola en el
documento. Lo que hay que centrar es el contenido del prrafo que la contiene. Para
hacerlo, en la barra de estado, encima de las propiedades nos aparece la jerarqua de
etiquetas. Haga clic sobre <p>.
11. Ahora, en el rea Regla de destino seleccione <Nuevo estilo en lnea> y centre
el prrafo como hemos visto hasta ahora, pulsando en el botn 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 lnea del

documento, y cambie el panel Propiedades a las propiedades de HTML.

2. En el campo Vnculo, escriba la URL de la pgina a enlazar, en nuestro caso ser
http://www.cocacola.es.

3. Por ltimo guarda el documento. Ya sabes que puedes hacerlo a travs del men

Archivo, y pulsando la opcin Guardar.

4. Puedes llamar al documento como desee, pero la extensin ha de ser *.htm o *.html.
Por ejemplo, lo podemos llamar miprimerapagina.htm, y la hemos guardado en el
Escritorio de Windows.

Pgina 4
Copyright INE DE T E C

DreamweaverCS5

5. Ahora, puedes ver cmo se ve en tu navegador pulsando la tecla F12.

Pgina 5
Copyright INE DE T E C