dreamweaver...dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente...

LICEO MAYOR DE PALERMO

“GENERADORES DEL FUTURO CON VISIÓN COMERCIAL Y

AUTOVALORACIÓN PERSONAL”

ASIGNATURA: INFORMÁTICA

GRADO: NOVENO

GUIA DE TRABAJO No. 001

NOMBRE: ______________________________________ FECHA: ___________________

DREAMWEAVER

Qué es Dreamweaver

Dreamweaver CS6 es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver CS6 permiten agregar rápidamente diseño y funcionalidad a las

páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy

sencilla y visual.

Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los

sitios web, actualizando el sitio web en el servidor sin salir del programa.

Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la versión

caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa

de este fantástico programa.

Arrancar y cerrar Dreamweaver CS6

Desde el icono de Dreamweaver CS6 del Escritorio, si lo tienes .

Para cerrar Dreamweaver CS6, podemos utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier ventana de Windows.

Pulsar la combinación de teclas Alt + F4.

Hacer clic sobre el menú Archivo y elegir la opción Salir.

Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedirá confirmación

para guardar o no cada uno de ellos.

OBJETIVO: Conocer los aspectos básicos de DREAMWEAVER para

empezar hacer el sitio web de la empresa.

http://www.adobe.com/es/products/dreamweaver/





GRADO: NOVENO

Abrir y guardar documentos

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).

Pulsar la combinación de teclas Ctrl + O.

Hacer clic sobre el menú Archivo y elegir la opción Abrir....

Hacer clic sobre el menú Archivo y elegir la opción Abrir reciente. Muestra los últimos archivos abiertos.

Hacer clic sobre el menú Archivo y elegir la opción Examinar en Brigde. Se abrirá el programa Brigde que muestra las

carpetas y archivos de forma gráfica.

Hacer doble clic sobre el archivo en la ventana del sitio.

Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrir con → Adobe Dreamweaver

CS6.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:

Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible).

Pulsar la combinación de teclas Ctrl + N.

Hacer clic sobre el menú Archivo y elegir la opción Nuevo.

Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco.

En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para

nuestro primer ejemplo elegimos en Diseño ninguno. A continuación pulsamos el botón Crear.





GRADO: NOVENO

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botón Guardar de la barra de herramientas estándar.

Pulsar la combinación de teclas Ctrl + S.

Hacer clic sobre el menú Archivo y elegir la opción Guardar.

Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente con varios documentos, poder

guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las

siguientes operaciones.

Hacer clic en el botón Guardar todo de la Barra de herramientas estándar.

Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.

Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en cada uno de ellos. Debes

tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no desear guardar los cambios en

todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opción, al menos hasta que





GRADO: NOVENO

te hayas habituado a manejar el programa. De todas formas, observa que cuando hay cambios sin guardar aparece un *

tras el nombre del documento .

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como puede hacerse. Abre un

documento nuevo y selecciona la Categoría Página básica, HTML, en la columna Diseño dejamos la opción por

defecto: <ninguno>.

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

Una vez introducido el texto, vamos a modificar el título y el color de fondo del documento.

Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.

Entonces se abrirá una ventana como la que aparece a continuación:





GRADO: NOVENO

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser de color azul.

Haz clic en Título/Codificación a la izquierda, y en el Título escribe Mi primera página.

Para aplicar los cambios, pulsa sobre el botón Aceptar.

Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la carpeta donde estamos creando

nuestras páginas, habitualmente en una subcarpeta dedicada a las imágenes.

Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botón derecho del

ratón sobre la imagen que queremos traer de Internet, se abre una ventana con una opción similar a Guardar imagen

como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro.

Ten en cuenta que si piensas publicar la página en Internet, hay que respetar los derechos de autor de la imagen.

Copia la imagen que aparece a continuación, para luego poder insertarla en la página web que estamos creando.

Guárdala en la carpeta donde vas a guardar la página que acabas de crear.

Ahora vamos a insertar la imagen debajo de la segunda línea de texto. En primer lugar, situamos el cursor al final de la

segunda línea y creamos un salto de línea (tecla Enter). Después nos dirigimos al menú Insertar, opción Imagen.





GRADO: NOVENO

En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías 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 través del menú Ventana, opción Propiedades.

Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraído. Para que te aparezca

desplegado debes hacer doble clic en Propiedades.

Selecciona la primera línea de texto. En el inspector de propiedades pulsa HTML y aplica el formato Encabezado 1 (h1)

seleccionando el valor Encabezado1 del cuadro Formato.

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.





GRADO: NOVENO

Podemos decir que en una página web, HTML se encarga de estructurar el contenido, la información, mientras que CSS

se encarga de mostrar ese contenido con el formato adecuado.

Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto mediante hojas de estilos en

cascada. Los estilos CSS ofrecen un mayor control sobre el diseño de la página Web y reducen el tamaño del archivo.

Selecciona la primera línea. En Regla de destino selecciona <Nuevo estilo en línea>, para aplicar el formato solo al texto

seleccionado. También aplica el estilo de Fuente Arial, Helvetica, sans-serif, color azul #009 y centra el texto con el

segundo botón de la parte derecha , tal y como muestra la imagen siguiente:

Selecciona la segunda línea de texto, y seleccionando como antes <Nuevo estilo en línea>, marca los

botones para ponerlo en negrita y cursiva respectivamente.

Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrar es el contenido del párrafo que la

contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos aparece la jerarquía de etiquetas. Haz clic

sobre p.

Ahora, en Regla de destino selecciona <Nuevo estilo en línea> y centra el párrafo como hemos visto hasta ahora,

pulsando en .

Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambia el panel de Propiedades a las

propiedades de HTML.

En el campo Vínculo, escribe la URL de la página a enlazar, como se ve en la imagen:





GRADO: NOVENO

Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo, desde la opción Guardar.

Puedes llamar al documento como lo desees, pero la extensión 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 cómo se ve en tu navegador pulsando la tecla F12.

Vamos a ver cuáles son los elementos básicos de Dreamweaver CS6, la pantalla, las barras, los paneles, etc..., para saber

diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos

cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto

estaremos en disposición de empezar a crear páginas web.

LA PANTALLA INICIAL

Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así

conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se

muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu

ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento y dónde, como

veremos más adelante.





GRADO: NOVENO

En el resto de esta unidad vamos a ir describiendo los puntos más importantes señalados en esta imagen por los

números en azul del 1 al 9.

1.- Las barras.

2.- Las pestañas de documentos.

3.- La barra de estado.

4.- El panel de propiedades.

5.- Área de paneles.

6.- Paneles y ventanas.

7.- Línea inferior de pestañas.

8.- Vista diseño del documento.

9.- Vista código del documento.





GRADO: NOVENO

LAS BARRAS

1.- La barra de la aplicación.

La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si tenemos la ventana maximizada veremos

todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen superior.

Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones propios de la

aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line.

Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre

la vista de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador de sitios, que ya

veremos.

Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es

la configuración del entorno (paneles visibles y su disposición) que podemos guardar y cargar. Lo veremos más adelante.

Los menús, están agrupados en categorías.

Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden

insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a través de los menús, aunque en

ocasiones nos envíen a los paneles.

2.- Las pestañas de documento.

Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro

fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada

documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botón derecho,

como Cerrar otros archivos.

Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de estilos, archivos

JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo.

3.- La barra de estado.





GRADO: NOVENO

Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo.

A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la

derecha tenemos las herramientas de Selección, Mano (para desplazarse) y Zoom. Más a la derecha encontramos tres

iconos para ver la página en tres tamaños de pantalla: móvil, tableta y PC escritorio.Y al final hay otros datos como el

tamaño de la ventana, el tamaño de la página o su codificación.

Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que podemos ver u ocultar desde el

menú Ver → Barras de herramientas.

La barra de herramientas estándar.

La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición.

De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código

fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. Esta barra puede ser muy útil, pero en realidad casi todo el mundo

usa esos comandos directamente con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.)

La barra de herramientas de documento.

La contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, vistas previa en

multipantalla, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece

el programa.





GRADO: NOVENO

La barra de representación de estilos.

Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando

hojas distintas que dependan del eso. Hay varias opciones, como las de ver los estilos que dependen de pseudo clases

activas, como cuando el cursor está sobre un elemento.

La barra de navegación con navegador.

Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas de nuestro sitio, aunque

sólo tiene sentido con la Vista en vivo, como ya veremos.

Como también veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra

barra de herramientas.

EL ENTORNO DE DREAMWEAVER

Inspectores y paneles

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles

(ventanas) o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un

inspector cambian dependiendo del objeto seleccionado, mientras que el panel nos da acceso a opciones generales fijas.

A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores.

A continuación vamos a ver el inspector de Propiedades y más adelante veremos el panel Insertar.

4.- El inspector de Propiedades

El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por

lo que se convierte en uno de los elementos más utilizados en Dreamweaver. Por ejemplo, cuando el elemento

seleccionado sea una imagen, como sucede en la imagen que puedes ver, mostrará su ubicación, dimensiones, peso,

clase, etc...

En otros elementos, como párrafos y estilos, este panel puede mostrar dos tipos de propiedades, HTML y CSS, que

podemos aplicar a los diferentes elementos de la página Web que estemos diseñando.





GRADO: NOVENO

5.- Área de paneles.

En la parte derecha de la pantalla tenemos el área o pila de paneles.

Inicialmente, el área de paneles contiene unos determinados elementos, pero podemos quitar y poner los elementos

que queramos. Para quitar un elemento del área de paneles basta hacer clic con el botón derecho sobre su nombre para

que aparezca un menú con la opción Cerrar. Para añadir un elemento al área de paneles hay que ir al menú Ventana y

hacer clic en el elemento que queramos añadir, si el elemento se abre en una ventana flotante, bastará arrastrarlo al

área de paneles.

6.- Paneles.

Una vez tenemos el áea de paneles con los elementos que más nos interesen, podemos abrirlos o desplegarlos de tres

formas.

1. Abrir el panel dentro del área de paneles. Para ello primero hay que expandir el área de paneles pulsando el botón de

la parte superior derecha , a continuación, basta hacer clic en cada panel para que se abra dentro del área de

paneles. Para cerrar el panel hacer doble clic.

Por ejemplo, en la siguiente imagen vemos el panel Archivos abierto dentro del área de paneles. Se pueden abrir varios

paneles a la vez y ajustar sus tamaños colocando el cursor en el borde inferior y arrastrándolo.





GRADO: NOVENO

2. Abrir el panel al lado del área de paneles. Para ello hay que partir del área de paneles sin expandir, y al pulsar en un

panel, este se abrirá pegado al lado, como vemos en la siguiente figura.





GRADO: NOVENO

3. Abrir como panel flotante. Para ello hay que pinchar en el título del panel y arrastar el panel fuera del área de

paneles, el panel se puede colocar en cualquier zona de la pantalla, incluso fuera de la pantalla de Dreamweaver. Al

hacer doble clic en el título del panel, este se contrae pero sigue flotando en la misma posición. Para expandirlo, volver a

hacer doble clic. En al siguiente imagen vemos el panel Archivos flotando y epandido.





GRADO: NOVENO

Hemos visto un inspector y ahora vamos a ver un panel, el panel Insertar.

El panel Insertar.

En el panel Insertar, encontramos todos los elementos que podemos encontrar en el menú Insertar, clasificados en

categorías. Podemos emplearlo para insertar imágenes, enlaces, multimedia, tablas, formularios... cualquier elemento

que nuestra web necesite.

Como vemos en las imágenes, es posible configurar este panel para verlo como menú (imagen anterior), como panel

flotante o como una barra de herramientas integrada en la ventana de trabajo (imagen siguiente)





GRADO: NOVENO

.

7. Línea inferior de pestañas.

En al parte inferior de la pantalla tenemos una línea que contiene varias pestañas (Buscar, Validación , ... )

Para abrir una pestaña basta hacer clic sobre ella, para cerrarla hacer doble clic en su título.

Estas pestañas se pueden configurar de forma similar a como acabamos de ver con el área de paneles. Es decir, se

pueden añadir y quitar, convertir en flotantes, etc.

ACTIVIDAD

Teniendo en cuenta la información suministrada, construya la página inicial de su empresa, y preséntela en una usb.

dreamweaver...dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente...

Documents