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.
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la
pgina anterior como puede hacerse. Abre un documento nuevo y
selecciona la Categora Pgina bsica, HTML, en la columna Diseo
dejamos la opcin por defecto: <ninguno>.
Seguidamente, haz clic sobre la zona blanca del documento y escribe lo
siguiente:
Esta es mi primera pagina
Esta pagina nos servir para comprobar el funcionamiento de
dreamweaver.
Mi nombre es:
Curso el seccin:
Una vez introducido el texto,
vamos a modificar el ttulo y el
color de fondo del documento.
Para ello podemos hacer clic
sobre el men Modificar y elegir
la opcin Propiedades de la
pgina.
Entonces se abrir una ventana
como la que aparece a continuacin:

En Color de Fondo escribe #CCCCFF, de este modo el fondo del

documento pasar a ser de color azul.
Haz clic en Ttulo/Codificacin a la izquierda, y en el Ttulo escribe Mi
primera pgina.
Para aplicar los cambios, pulsa sobre el botn Aceptar.
Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de
tenerla en la carpeta donde estamos creando nuestras pginas,
habitualmente en una subcarpeta dedicada a las imgenes.
Copia la imagen, para luego poder insertarla en la pgina web que estamos
creando. Gurdala en la carpeta donde vas a guardar la pgina que acabas
de crear.
Ahora vamos a insertar 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
(tecla Enter). Despus nos dirigimos al men Insertar, opcin Imagen.
En la nueva ventana que aparece, debers buscar la imagen en la carpeta
en la que la habas guardado, seleccionarla y pulsar Aceptar.
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 travs del men Ventana,

opcin Propiedades.
Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es
porque est contrado. Para que te aparezca desplegado debes hacer doble
clic en Propiedades.

Selecciona la primera lnea de texto. En el inspector de propiedades

pulsa HTML y aplica el formato Encabezado 1 (h1) seleccionando el
valor Encabezado1 del cuadroFormato.

Para cambiar el color del texto cambiamos el panel a las opciones de estilo,
pulsando el icono CSS a la izquierda.
Mediante el inspector de propiedades en Dreamweaver CS6 accedemos
tanto a las propiedades de CSS como a las propiedades de HTML.

Podemos decir que en una pgina web, HTML se encarga de estructurar el

contenido, la informacin, mientras que CSS se encarga de mostrar ese
contenido con el formato adecuado.
Selecciona la primera lnea. En Regla de destino selecciona <Nuevo estilo
en lnea>, para aplicar el formato solo al texto seleccionado. Tambin aplica
el estilo de FuenteArial, Helvetica, sans-serif, color azul #009 y centra el

texto con el segundo botn de la parte derecha

imagen siguiente:

, tal y como muestra la

Selecciona la segunda lnea de texto, y seleccionando como antes <Nuevo

estilo en lnea>, marca los botones
para ponerlo en negrita y cursiva
respectivamente.
Vamos a centrar tambin la imagen. Para ellos seleccinala. 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.
Haz clic sobre p.
Ahora, en Regla de destino selecciona <Nuevo estilo en lnea> y centra el
prrafo como hemos visto hasta ahora, pulsando en
. Por ltimo vamos a
crear el enlace. Selecciona el texto de la ltima lnea, y cambia el panel
de Propiedades a las propiedades de HTML.
Por ltimo guarda el documento. Ya sabes que puedes hacerlo a travs del
men Archivo, desde la opcin Guardar.
Puedes llamar al documento como lo desees, pero la extensin ha de ser htm o
html. Por ejemplo, lo hemos llamado miprimerapagina.htm, y la hemos
guardado en la misma carpeta que la imagen descargada.
Ahora, puedes ver cmo se ve en tu navegador pulsando la tecla F12.