Tutorial bsico de Dreanweaver Lic.

Ren Santos








Tutorial bsico de Dreamweaver

Por Ren Santos

Tutorial bsico de Dreanweaver Lic. Ren Santos
Configuracin de un sitio de
Dreamweaver nuevo

Despus de planificar la estructura del sitio, o si ya posee un sitio, debe definir un
sitio en Dreamweaver antes de iniciar el desarrollo. Configurar un sitio de
Dreamweaver permite organizar todos los documentos asociados con un sitio Web.

Para definir un sitio de Dreamweaver:

Seleccione Sitio > Administrar sitios.

Aparece el cuadro de dilogo Administrar sitios.

Nota: si no tiene ningn sitio de Dreamweaver definido, aparecer el cuadro de
dilogo Definicin del sitio y podr omitir este paso y continuar con el siguiente.

Haga clic en el botn Nuevo.

Aparecer el cuadro de dilogo Definicin del sitio.

Siga uno de estos procedimientos:

Haga clic en la ficha Bsicas para utilizar el asistente para la Definicin del sitio,
que le guiar a travs del proceso de configuracin.

Nota: se recomienda que los nuevos usuarios de Dreamweaver utilicen el asistente
para la Definicin del sitio. Es probable que los usuarios que tengan ms
experiencia con Dreamweaver prefieran las opciones Avanzadas.

Haga clic en la ficha Avanzadas para utilizar las opciones avanzadas que le
permiten configurar carpetas locales, remotas y de prueba por separado segn
convenga.

Nota: para empezar, puede configurar un sitio de Dreamweaver completo, o
simplemente realizar el primer paso, la configuracin de la carpeta local.

Realice el proceso de definicin del sitio de Dreamweaver:

En el asistente para la Definicin del sitio, responda a las preguntas de cada
pantalla y, a continuacin, haga clic en Siguiente para avanzar en el proceso de
configuracin o haga clic en Atrs para regresar a una pantalla anterior.






Tutorial bsico de Dreanweaver Lic. Ren Santos
Creando Pginas Web Con DreamWeaver

La introduccin
Dreamweaver es un programa del diseo de pginas Web que le deja escribir texto
y agregar diferentes medios directamente en una pgina, de igual manera que lo
hace con su programa de procesamiento de texto. Dreamweaver convierte su texto
y el diseo grfico de la pgina en el cdigo de HTML, el cual es entendido por un
navegador de Internet.
Lo que usted ve en su pantalla cuando crea una pgina de Web en Dreamweaver
ser similar a lo que se le presente en un navegador de Internet, lo que hace el
diseo de su pgina ms intuitiva.
Al momento de activar Dreamweaver, usted debera ver una pantalla como la
siguiente:


Si no ve el panel Propiedades (se muestra en la base de la ventana del
programa), seleccione Propiedades del men Ventana.
La seccin principal de la pantalla es un rea en blanco en la cual usted crea su
pgina Web determinando el tipo de texto, aplicando formatos y diseando la
estructura de la pgina.
El panel Properties se usa para automatizar el proceso de formateo y para crea los
hiper-enlaces.

Tutorial bsico de Dreanweaver Lic. Ren Santos
Comenzando con Dreamweaver
Para crear una pgina de Web, empiece simplemente escribiendo en la pantalla
principal, no se preocupe por el cdigo, Dreamweaver automticamente construir
el cdigo apropiado de HTML en el trasfondo.
Pruebe escribiendo algunas palabras en la pantalla Dreamweaver, como sigue:

Para ver el cdigo html que Dreamweaver ha creado, d un clic sobre el icono
Show Code View en la esquina superior izquierda. Alternativamente, seleccione
"Code" del men View.

Ahora guarde la pgina seleccionando Archivo | Guardar (o use el comando

Tutorial bsico de Dreanweaver Lic. Ren Santos
rpido Ctrl-S localice la ubicacin exacta donde quiere guardar el archivo, pngale
un nombre representativo y listo.
Para este ejemplo le pondr a su archivo index.html este es el nombre perfecto
para la pgina principal o anfitriona de un sitio Web, Asegurase de que su archivo
tiene la extensin .html, y haga clic en Guardar.

Visualizacin previa del Documento
Dreamweaver le da una idea bastante buena de cmo su pgina va a mirar en un
navegador, pero recuerde que Dreamweaver no es un navegador. Para ver cmo se
visualiza su pgina realmente, haga una previsualizacin | Archivo | Vista Previa
en Navegador | Internet Explorer, o el que tenga instalado. La tecla rpida para
la exhibicin preliminar en el navegador principal del sistema es F12 - sta es una
buena tecla de acceso rpido para aprender, usted la usar frecuentemente. Su
documento ser lanzado en Explorer as es que usted puede ver cmo se presenta
en un navegador real.
Su documento experimental simple probablemente se ver exactamente igual en
Dreamweaver y en el navegador, pero como los documentos y los trazados se
convierten en ms complicados, las diferencias se ponen ms aparentes. Siempre
pruebe sus pginas en una coleccin variada de navegadores en ambos sistema
operativo de la Macintosh y las Ventanas antes de ir en directo!

Formateando texto con Dreamweaver
Usted fcilmente puede cambiar el formato de texto que ha escrito resaltndolo
con su ratn y luego usando las opciones en el panel Properties.

Por ejemplo, en el panel Properties usted puede hacer clic:
1 El botn de la B en la derecha para hacer su letra negra de seleccin.
2 El botn de la I inclinada para aplicar el estilo de letras itlicas.
3 La flecha del caracteres en el medio (etiquetado con una A) puede escoger la
tipografa de su agrado para su texto, como Arial, Courier, Times romano, etc.
4 Dimensin del texto (inicialmente no muestra Ninguno) para aumentar o
disminuir el tamao del texto. Usted puede hacer esto ya sea seleccionando 1
sin embargo 7 para los tamaos bsicos (con 7 siendo muy grande y 1 ser muy
pequeo), o seleccionando +7 a travs de 7 para una seleccin ms ancha de
tamaos del texto (con +7 siendo muy grande y 7 siendo muy pequeo).
5 Formato de prrafo a la izquierda se encuentra el botn de formato de
prrafo, resulta muy til si va a crear ttulos o subttulos en una pgina. Puede
seleccionar entre 1 es un tamao de carcter muy grande, hasta 6 que es un
tamao de carcter muy pequeo.
6 Alineacin de texto. Los botones de alineacin aparecen en el centro del

Tutorial bsico de Dreanweaver Lic. Ren Santos
inspector de propiedades, a la derecha del botn de letra cursiva. La alineacin
puede ser: izquierda, centro, derecha y justificada.

Cree hipervnculos con Dreamweaver
Usted tambin usa el panel de Propiedades para agregar los hiperenlaces a una
pgina de Web.
Si es texto, resalte las palabras que usted usar para reproducir el enlace. Luego
escriba la direccin Web o URL en el campo Vnculo (Link) del panel de
propiedades de texto.

En el campo Link usted puede:
1. digitar una direccin web (URL), que comienza con http: //, para
direccional a cualquier pgina en la Web.
2. Digitar el nombre de un archivo que forma parte del sitio web que est
creando, el cual se podra encontrar en el mismo nivel del archivo donde se
origina el vnculo (o, si el archivo est en una subcarpeta, escriba el nombre
de esa subcarpeta y luego el archivo al que usted quiere conectar, como
subcarpeta/otroarchivo.html, que conectara con un archivo llam
otroarchivo.html que est en una carpeta llam subcarpeta).
3. Hacer clic sobre el icono de la carpeta a la derecha del campo Link y
navegar hacia el archivo de destino al que quiere vincular.
Finalmente presione la tecla Enter de su teclado activar los vnculos.


Propiedades de pgina con Dreamweaver
Es til para colocar algunas propiedades de manera anticipada para su pgina. La
propiedad de la pgina ms importante es el ttulo del documento, lo cual se
convierte en el nombre con el cual la pgina se reconoce en los motores de
bsqueda. Usted puede colocar el ttulo directamente desde adentro de
DreamWeaver usando el campo en lo alto de la ventana de documento (mostrado
aqu como "Document sin titular").

Tutorial bsico de Dreanweaver Lic. Ren Santos

Si no coloca un titular en la pgina ser imposible que un motor de bsqueda la
pueda reconocer en el amplio universo de Internet. No lo olvide, siempre agregue
un ttulo a su pgina Web.
Otras propiedades de la pgina web pueden ser las que aparecen en la ventana de
configuracin de pgina, que se puede acceder mediante el botn inferior en el
inspector de propiedades de texto o mediante el men Modificar al seleccionar el
comando Propiedades de Pgina:


Como usted puede ver, este panel puede usarse para colocar el ttulo del
documento, imagen de fondo, color de fondo, el margen, y otras opciones.

Cambiando El color del fondo
Usted puede cambiar el color de fondo de su pgina, el color del texto y los hiper-
enlaces.
Otra vez, seleccione la opcin del men Modificar | Propiedades de Pgina (o
Ctrl-J comando rpido). Usted obtendr un panel como esto:

Tutorial bsico de Dreanweaver Lic. Ren Santos

Aqu usted puede colocar el ttulo del documento, y si selecciona la opcin Aspecto,
podr elegir: la imagen de fondo, color de fondo, color de color del texto. Si elige
Vnculos podr especificar el color de los enlaces, color del enlace visitado, y ms.
Insertando Imgenes
A diferencia de los procesadores de texto, que incrustan imgenes en el documento
mismo, las pginas de Web invocan imgenes apuntando hacia una posicin en el
sistema de archivo fuera del documento. Esto posibilita usar el mismo archivo de
imagen centenares de veces a todo lo largo de un sitio Web sin duplicar el archivo.
Un webmaster generalmente crear una carpeta designada "grficos" o "imgenes"
en el servidor Web para identificar una ubicacin central donde se almacenarn
todas las imagenes.
Para intercalar una imagen en su pagina, haga clic en el lugar dnde quiere que la
imagen aparezca. Ahora puede hacer clic sobre el botn Insertar Imagen que
tiene el aspecto de un cuadro con un rbol. Este icono forma parte de la barra de
herramientas Comn de DreamWeaver.


Se activar un panel como el que sigue cuando haga clic sobre el botn insertar
imagen. El siguiente paso es ubicar la imagen, seleccionarla y hacer clic en
Aceptar.

Tutorial bsico de Dreanweaver Lic. Ren Santos


Finalmente, la imagen aparecer en su documento de Dreamweaver en el lugar que
especificado. Si selecciona la imagen podr ver en el inspector de propiedades de la
imagen las dimensiones (en pxeles).

Las tablas en DreamWeaver
Usted puede cambiar la visualizacin de su pgina de Web dividindola en
secciones verticales u horizontales, de tal forma que se pueda ver el texto en una
seccin, los enlaces de navegacin en otra seccin, las imgenes en otra, los clip de
vdeo en otra, etc.
Nota: La mayora de pginas en la Internet son diseadas con
tablas. Aunque las tablas son la forma ms fcil de disear una
pgina, se consideran ya no la mejor opcin en la concepcin actual
del diseo web se prefiere usar una tecnologa denominada Cascada
Style Sheets (en espaol, hojas de estilo en cascada) para
acondicionar los elementos de una pgina. Sin embargo, CSS es un
tema complicado que vale la pena estudiar por aparte y que no cubre
este tutorial.
Usted puede insertar una tabla en la mitad de una pgina, o puede exhibir su
pgina entera como una tabla, lo cual rompera la pgina entera en columnas y
filas.
Para agregar una tabla, site el cursor del ratn en un rea en blanco donde quiere
que la tabla sea intercalada. Luego seleccione Tabla del men Insert.
Alternativamente, d un clic sobre el icono Insertar Tabla en la barra de
herramientas "comn".


Tutorial bsico de Dreanweaver Lic. Ren Santos

Usted obtendr un panel que se parece al siguiente:

en esta ventana de configuracin, podr colocar diversas propiedades para la tabla,
incluyendo el nmero de filas y columnas, la anchura de la tabla (qu tanto de la
pantalla llenar) y el grosor de los bordes entre las columnas y las filas.
Por ejemplo, para insertar una tabla como la que se visualiza a continuacin, debe
insertar los datos que siguen:


Cambiando las Propiedades de la tabla
Puede cambiar las dimensiones de una tabla haciendo clic sobre cualquier de los
bordes y luego arrastrando hacia la izquierda o hacia la derecha.
Podra hacer la columna seleccionada ms pequea arrastrando uno de sus bordes.
Lo mismo se har con el ancho de una fila. Si se desea agrandarlo o reducirlo.