como usar dreamweaver

REVISTA DIGITAL 2010

ADOBE DREAMWEAVER CS4

Pág

ina1

2010 ¿CÓMO USAR ADOBE DREAMWEAVER CS4?

Revista Digital Informática II



Pág

ina2

Contenido

Editorial 3

¿Qué es Adobe Dreamweaver cs4? 4

Crear una nueva página Web en Dreamweaver 4

Documento HTML en blanco 5

Creación de la página y encabezado 5

La vista de Diseño 6

Menú insertar 6

Barra de Herramientas 7

Descripción de las Barras de Herramientas 7

Abrir un archivo HTML 9

Crear una tabla invisible para colocar los elementos 10

Modificar una Tabla 11

Insertar imágenes en Dreamweaver 11

Configuración de las Propiedades de imágenes 12

Color en Dreamweaver 12

Para definir una imagen o un color de fondo 13



Pág

ina3

Editorial

Estimados lectores esta revista digital está dirigida a personas jóvenes y

adultas, con el propósito de facilitar el manejo del software Adobe

Dreamweaver CS4. Cabe destacar que este software fue creado por

Macromedia, ahora producido por Adobe Systems.

Este programa está enfocado a la creación de páginas web, sumado al

aprendizaje que obtienes al utilizarlo. Para mí es muy importante esta revista

por el hecho de ayudar a personas que deseen crear su propia página web,

este manual trata temas básicos que te será de mucha ayuda. De esta manera

cada persona puede crear su página con su propio estilo.



Pág

ina4

¿Qué es Adobe Dreamweaver CS4?

Adobe Dreamweaver CS4 es un software (programa) muy fácil de utilizar, el

cual nos permite crear páginas web muy sencillas y con nuestro propio estilo.

Se puede crear tablas, insertar imágenes, insertar videos, etc., de una forma

muy fácil y sencilla.

Crear una nueva página web en Dreamweaver

El programa Adobe Dreamweaver, presenta varias formas de iniciar un nuevo trabajo. Como el tema que tratamos es la creación de nuevas páginas web.

Para adaptarnos con el entorno del programa, expongo a continuación la página inicial del software, desde la cual podremos acceder a las diferentes funcionalidades. En la imagen podemos apreciar la barra de herramientas estándar y una ventana con varios comandos



Pág

ina5

Documento HTML en blanco

La primera opción que dispone Dreamweaver es la creación de una página HTML en blanco. Para ello se puede acceder de las siguientes maneras:

1. La primera y la más sencilla, es hacer click en el botón HTML que aparece en la ventana de inicio rápido.

2. La segunda, que puede llevar varios pasos, es hacer click en “Archivo / Nuevo…”

3. La tercera, es a través de las teclas de acceso rápido, para lo cual se emplea “Ctl + N”

Creación de la Página y Encabezado

- El primer paso, como es de suponerse, es la creación de los archivos necesarios. Para crear el archivo HTML, iremos a “Archivo / Nuevo…”. Cuando se abre el cuadro “Nuevo Documento”, seleccionaremos “HTML”, y en la segunda columna, “ninguno”, con lo que estaremos creando un archivo HTML sin un diseño predefinido. Más a la derecha, seleccionaremos el tipo de documento que deseamos crear (para el ejemplo, XHTML 1.1).

- Dado que se trata de un archivo HTML que no contiene formato alguno, no se tendrá la posibilidad de crear un archivo CSS relacionado o insertar el código CSS en el <head>, lo que podremos hacer posteriormente

-



Pág

ina6

La vista de diseño

Como hemos visto en anteriores artículos, la vista de diseño permite al diseñador observar los resultados mientras está trabajando en la página, lo que resulta de gran ayuda. Sin embargo, la vista de diseño no presenta los trabajos tal y cual se verán en un navegador, en primer lugar porque no está pensado para ello, sino que es un lugar sobre el que trabajar, y segundo porque sería imposible implementar una vista en la cual se fueran reflejando los resultados del trabajo tal como se vería en diferentes navegadores.

Menú insertar

El menú insertar, tiene algunos elementos que la ventana insertar no contiene. Dado que el resto de los elementos son iguales a los de la ventana, describiremos exclusivamente los primeros.



Pág

ina7

Barras de herramientas

Las barras de herramientas son cuatro:

Barra de herramientas Documento

Barra de herramientas Estándar

Barra de herramientas Codificación

Barra de herramientas Representación de Estilos

Descripción de las Barras de Herramientas

Barra de herramientas Documento

La barra de herramientas Documento es la que contiene los botones que permiten alternar entre los distintos modos de visualización que Dreamweaver ofrece, además de opciones de transferencia entre el modo local y modo remoto. A continuación mostramos una imagen de la barra de herramientas, que mostramos dividida en dos.

Botones:

Vista de Código

Dividir

Diseño

Vista en Vivo

Código en Vivo

Titulo del documento

Administración de Archivos

Vista Previa

Actualización de la vista

Opciones

Ayudas visuales

Validar formato

Comprobar página



Pág

ina8

Barra de Herramientas Estándar

La barra de herramientas estándar es similar a las barras de herramientas estándar de casi todos los programas. En esta barra se puede abrir documentos, crear nuevos, guardar, imprimir, cortar, copiar, pegar, etc. Su utilización es similar a los de cualquier otro software.

Barra de Estado

Esta barra se encuentra ubicada al pie, y contiene la información adicional del documento, entre las que se encuentran algunas ayudas, como el selector de etiquetas, que muestra las etiquetas seleccionadas en cualquiera de las vistas, precedidas de las etiquetas de superior jerarquía.

En esta barra también pueden seleccionarse y deseleccionarse las herramientas de mano, se puede seleccionar el zoom empleado y el tamaño de la ventana, que permite optar por tamaños estándar o personalizados. A continuación aparece un campo en el que se muestra el tamaño de la página y el tiempo de descarga, información que incluye los archivos dependientes (CSS, JS, etc.), imágenes y videos. Por último, la barra muestra la codificación del documento.

Barra de Codificación (o de programación)

http://www.blog.lawebera.es/category/herramientas/hojas-estilos-css/



Pág

ina9

Esta barra de herramientas se encuentra dispuesta en forma vertical, y solo es visible cuando se encuentra la vista de código (su uso es exclusivo en el código). Esta barra de herramientas puede ocultarse o personalizarse, mostrando los botones que son útiles y cancelando la visualización de aquellos que no presentan utilidad.

Barra de Representación de Estilos

Esta barra, que aparece oculta por defecto, contiene los comandos que permiten la visualización de documentos de acuerdo al medio para el cual ha sido programado (si se han hecho vistas para diferentes medios) y alternar entre distintas hojas de estilo. Puede verse la página en modo “Screen” (pantalla, muestra el documento como aparecerá en un ordenador), en modo de impresión, móvil y proyección.

Abrir un archivo HTML

Para abrir un archivo HTML existente, lleve a cabo una de estas operaciones:

Seleccione Archivo > Abrir.

Si el archivo se ha creado con Microsoft Word, elija Archivo > Importar > Importar HTML de Word.

Si elige Importar HTML de Word, Dreamweaver abre el archivo y le permite especificar opciones para eliminar código ajeno a HTML generado por Word. (Microsoft Word 97 y las versiones posteriores cuentan con el comando Guardar como HTML, que añade código HTML innecesario al convertir un documento a este formato.)

Nota: No se puede importar directamente un archivo de Microsoft Word (.doc) a Dreamweaver. Si desea importar el contenido de un archivo de Word, inicie Word y guarde el archivo como HTML antes de importar el archivo HTML resultante a Dreamweaver.



Pág

ina1

0

Crear una Tabla invisible para colocar los elementos.

Para que los elementos que colocamos en una página mantengan una cierta

posición al ser visualizados por los navegadores necesitamos colocarlos dentro

de tablas.

El texto, las imágenes y los demás elementos de una página se ordenan dentro

de tablas. Utilizamos tablas con Bordes cero cuando queremos mantener las

tablas invisibles.

Pulsamos Insertar y Tabla.

Ponemos "0" cero en el cuadrado correspondiente a Borde.

Pulsamos Aceptar.

Y el resultado se ve así en la vista de Diseño de Dreamweaver.



Pág

ina1

1

MODIFICAR UNA TABLA

1. Añadir filas y columnas

a. Hacer clic en el lugar en el que se quiere insertar una fila o una columna

b. Modificar - Tabla - Insertar filas o columnas c. Aparece el cuadro de diálogo Insertar filas o columnas d. Añadir un número de filas o columnas

2. Eliminar filas y columnas

a. Hacer clic en una celda de la fila o columna que se desea eliminar b. Elegir una de estas opciones:

3. Combinar y dividir celdas

a. Para combinar dos celdas:

Se seleccionan con el puntero del ratón las dos celdas que se quieren combinar

b. Para dividir una celda o columna sencilla

Hacer clic en la celda que se quiere dividir

En el inspector de Propiedades hacer clic en el botón Dividir celda

Aparece el cuadro de diálogo Dividir celda

En el campo Dividir especificar si la celda se divide en filas o columnas

En los campos Número de filas o Número de columnas especificar en cuántas filas o columnas se dividirá la celda

INSERTAR IMAGENES EN DREAMWEAVER

Para insertar una o varias imágenes en un documento en Dreamweaver, se lleva a cabo una de estas operaciones:

Situar el puntero en el lugar de la ventana de documento donde quiere que aparezca la imagen - Insertar - Imagen

En el cuadro de diálogo «Seleccionar origen de imagen» buscar y elegir el archivo de imagen que se desea insertar - Aceptar - Sale cuadro de diálogo - Aceptar

Aparece la barra de menú



Pág

ina1

2

CONFIGURACIÓN DE LAS PROPIEDADES DE IMÁGENES

Modificar el tamaño de las imágenes

Se puede cambiar el tamaño de una imagen de dos maneras: utilizando el inspector de Propiedades o bien arrastrando la imagen hasta su nuevo tamaño

Quitar imagen:

Seleccionar la imagen que se quiere quitar

Pulsar la tecla suprimir

COLOR EN DREAMWEAVER

Se puede definir el color para varios elementos de la página, como:

Texto. Fondo de las páginas, tablas y celdas. Hipervínculos. Bordes de tablas, entre otros.

Para establecer el color de un elemento, hay que cambiar sus propiedades. Por ejemplo, el color del texto es una propiedad de la fuente y el color de fondo de la página actual es una propiedad de página. También se puede definir el color para varios elementos de página (estilos de texto, fondos, hipervínculos o bordes de tabla) todo al mismo tiempo utilizando Estilos CSS.

Seleccionar el Color.



Pág

ina1

3

- En la esquina superior izquierda se verá una muestra del color, para elegir el

color basta con hacer clic en el color de nuestra elección

- Desde el cuadro de diálogo que se despliega podemos crear un nuevo color

- Si se quiere añadir el color a la lista de colores personalizados hacemos clic

sobre el botón Agregar a los colores personalizados.

Para definir una imagen o un color de fondo

1. Elija Modificar > Propiedades de la página o seleccione Propiedades de la página en el menú contextual de la vista Diseño de la ventana de documento.

2. Para definir una imagen de fondo, haga clic en el botón Examinar, vaya hasta la imagen y selecciónela. Como alternativa, introduzca la ruta de acceso a la imagen de fondo en el cuadro Imagen de fondo. Dreamweaver forma un mosaico con la imagen de fondo (la repite) si ésta no ocupa toda la ventana del navegador. (Para evitar que se forme un mosaico con la imagen de fondo, utilice CSS -hojas de estilos en cascada- para desactivar la formación de mosaicos con la imagen. Consulte Utilizar hojas de estilos CSS.)

3. Para definir un color de fondo, haga clic en el cuadro Color de fondo y seleccione un color del selector de color. (Consulte Trabajar con colores.)

Documents

como usar dreamweaver