You are on page 1of 5

Dreamweaver

Dreamweaver es un editor de páginas Web que puede trabajar en código html
o bien en un entorno de edición visual y fácil de manejar muy similar al de un
procesador de textos.
Dreamweaber nos permite crear sitios Web en forma visual, utiliando un
interfa gráfica y nos da la posibilidad visualiar los cambias que vayamos
realiando.
!cceso
 Damos clic al botón "nicio de la #arra de $areas.
 %legimos $odos los programas. %ntramos a la carpeta &acromedia.
 Damos clic sobre el icono de Dreamweaver.
#arra de herramientas "nsertar
%sta barra contiene los elementos más utiliados para dise'o de páginas Web
y se puede mostrar de dos formas diferentes dentro del ambiente
Dreamweaver(
 )omo barras totalmente independientes.
 )omo fichas.
%structura de una página Web en Dramweaver
%n el cap*tulo anterior, hab*amos dicho que la estructura básica de un
documento Web está formada por(
 )abecera
 )uerpo
%n Dreamweaver la estructura de un documento html tambi+n esta presente.
%s decir, en la casilla $itulo de la #arra de herramientas Documento,
escribimos el t*tulo de la página, que será el que aparece en la barra de t*tulo
del navegador y que en lenguaje html lo colocábamos entre las etiquetas
,$"$-%./,0$"$-%..
$oda la 1entana de documento es el cuerpo de la página Web , que
anteriormente la situábamos entre las etiquetas ,#2D3./,0#2D3..
4ormato de texto
5árrafo
%n Dreamweaver no es necesario utiliar la etiqueta ,5. para el comieno de
un párrafo ni la etiqueta ,05. para el fin del párrafo, solo basta con escribir el
párrafo en el área body de la página.
62&#7%D%- !-8&629!:. ;!#7"%-! &!7$"6%< <";!
&%D"2= ;7!4")2=
>? de @une de AB>C
-as etiquetas ,#7. para salto de renglón y Dnbsp para espacios en blanco, no
son necesarias cuando capturamos un párrafo en Dreamweaver.
!lineación
%n Dreamweaver se realia mediante botones de acción(
 "quierda
 Derecha
 )entrado
 @ustificado
=angr*a de párrafo
Dreamweaver sustituye las etiquetas ,blocEquote./,0blocEquote. por los
botones de acción =angr*a de texto y !nular sangr*a de texto.
$exto en negritas
 =eleccionamos el texto o párrafo al que deseamos aplicar el formato
negrita.
 Facemos clic al botón 6egrita del "nspector de propiedades.
$exto en cursiva o itálica
 =eleccionamos el texto o párrafo.
 Damos clic al botón )ursiva del inspector de propiedades.
$exto subrayado
 =eleccionamos el texto o párrafo.
 Facemos clic al botón $am del "nspector de propiedades.
 %legimos el tama'o deseado.
)olor de letra
 =eleccionamos el texto o párrafo al que le vamos a aplicar un color.
 Facemos clic al botón 5aleta de colores del "nspector de propiedades.
 %legimos un color para el texto.
$ipo de texto
 =eleccionamos el párrafo o texto al que deseamos combiarle el tipo de
letra.
 Damos clic al botón 4uente del inspector de propiedades.
 %legimos el tipo de letra.
%ncabeados
 =eleccionamos el primer párrafo.
62&#7%D%- !-8&629!:. ;!#7"%-! &!7$"6%< <";!
&%D"2= ;7!4")2=
>? de @une de AB>C
 Facemos clic al botón 4ormato del "nspector de propiedades.
 %legimos el encabeado deseado.
-istas
-ista no ordenada
 Damos clic al botón $exto de la #arra de herramientas "nsertar.
 Facemos clic al botón -ista sin ordenar.
 %scribimos el primer elemento de la lista.
 Damos %nter para escribir el segundo elemento de la lista.
-ista ordenada
 Damos clic a la ficha $exto de la #arra de herramientas "nsertar.
 Facemos clic al botón -ista ordenada.
 %scribimos el primer elemento de la lista.
 Damos %nter para escribir el segundo elemento.
-ista de definición
 Damos clic a la ficha $exto de la #arra de herramientas "nsertar.
 Facemos clic al botón -ista de definición.
 %scribimos el t+rmino a definir.
 Damos %nter para escribir la definición del t+rmino.
!ncho de l*nea
 =eleccionamos la l*nea a la que deseamos cambiarle su ancho haciendo
clic sobre +sta con el apuntador del &ouse.
 Facemos clic al botón 8nidades del "nspector de propiedades.
 %legimos las unidades de medida del ancho de l*nea, 5*xeles o G.
 %n la casilla !n tecleamos el valor del ancho de la l*nea.
;rosor de l*nea
 =eleccionamos la l*nea a la que deseamos cambiarle su grosor.
 %n la casilla !l tecleamos el valor del grosor de la l*nea.
 Damos %nter.
!lineación de l*nea
 =eleccionamos la l*nea a la que deseamos cambiarle su alineación.
 Facemos clic al botón !linear del "nspector de propiedades.
 %legimos el tipo de alineación.
62&#7%D%- !-8&629!:. ;!#7"%-! &!7$"6%< <";!
&%D"2= ;7!4")2=
>? de @une de AB>C
"mágenes
"nserción
 Damos clic al botón "mágenes de la #arra de herramientas "nsertar.
 %legimos la opción "magen.
 %n la ventana =eleccionar origen de imagen, damos clic sobre el nombre
de la imagen.
 Facemos clic al botón aceptar.
$ama'o
5odemos modificar el tama'o de una imagen en Dreamweaver de dos formas(
>. )olocamos el apuntador del &ouse en alguna de las manijas de edición
de la imagen. Facemos clic y sin soltar el botón movemos el &ouse para
modificar el tama'o de la imagen.
A. %n la casilla !n, del "nspector de propiedades, escribimos el ancho de la
imagen en p*xeles. %n la casilla !l, del "nspector de propiedades,
escribimos la nueva altura de la imagen en p*xeles.
!lineación de imagen vs texto
 =eleccionamos la imagen que deseamos alinear.
 Damos clic al botón alinear del inspector de propiedades.
 %legimos alguno de los siguientes atributos de alineación(
>. -*nea de base( alinea el texto con la parte inferior de la imagen.
A. =uperior( alinea la parte superior de una imagen con la parte
superior del elemento más alto.
H. &edio( alinea la parte central de la imagen con la l*nea de base
del texto.
C. &edio absoluta( "nferior absoluta( alinea la parte inferior de la
imagen con la parte inferior del texto.
?. "quierda( sitIa la imagen en el margen iquierdo, ajustando a la
derecha el texto que la rodea.
J. Derecha( sitIa la imagen en el margen derecho, ajustando a la
iquierda el texto que lo rodea.
!lineación de imagen
%l editor de páginas Web nos #renda otra opción de alineación, la cual nos
permite alinear toda la imagen, incluido el texto en sentido horiontal, de la
siguiente manera(
 Damos clic sobre la imagen.
 %legimos alguna de las siguientes opciones de alineación(
62&#7%D%- !-8&629!:. ;!#7"%-! &!7$"6%< <";!
&%D"2= ;7!4")2=
>? de @une de AB>C
>. !l centro
A. ! la derecha
62&#7%D%- !-8&629!:. ;!#7"%-! &!7$"6%< <";!
&%D"2= ;7!4")2=
>? de @une de AB>C