Definición de Dreamweaver

Dreamweaver es el software para el desarrollo y diseño de Páginas Web adaptables para diversos
dispositivos electrónicos. es una aplicación en forma de suite (basada en la forma de estudio de
Adobe Flash) que está destinada a la construcción, diseño y edición de sitios y aplicaciones Web
basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe
Systems) es el programa más utilizado en el sector del diseño y la programación web, por sus
funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su
soporte de los estándares del World Wide Web Consortium.

Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edición de
imágenes como para animación a través de su integración MALVERDE'S Hasta la versión MX, fue
duramente criticado por su escaso soporte de los estándares de la web, ya que el código que
generaba era con frecuencia sólo válido para Internet Explorer y no validaba como HTML estándar.
Esto se ha ido corrigiendo en las versiones recientes.

Acceso a Dreamweaver
Para poder acceder a Dreamweaver existen diversas formas, pero las más usuales son:

Opción 1:

1) Abre el menú Metro de Windows (Presionado la tecla de < Windows >).

2) Desplázate por los programas y haz clic en la aplicación Adobe Dreamweaver
CS6.

Opción 2:

1) En la opcion busqueda escribimos "DreamWeaver"

2) Elegimos la opcion y hacemos clic en ella.

Opción 3:
1) Metacomando < Win + R >.
2) Teclea la palabra Dreamweaver.
3) Pulsa la tecla < Enter >.

Opción 4:

También podemos crear un acceso directo al escritorio ver imagen:

TEMA 2: ENTORNO GRÁFICO

Ambiente de Dreamweaver
Veamos cuáles son los elementos que componen Dreamweaver CS6, la pantalla, los paneles, las
barras, entre otros, para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman,
dónde están y cuál es su funcionamiento. Cuando conozcamos todo esto estaremos en disposición
de empezar a crear páginas web.

A continuación en el resto de esta unidad vamos a ir describiendo los puntos más importantes
señalados en esta imagen:

1. Las barras principales.

2. La barra de menú.
3. Las pestañas de documentos.
4. La barra de estado.
5. La barra de herramientas estándar.
 6. El panel de propiedades.
7. Área de paneles.
8. Paneles y ventanas.
9. Línea inferior de pestañas.
10. Vistas del documento.

Las barras principales

La Barra de Aplicación

La barra de 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: El logo de la aplicación, los botones propios de la
aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on-
line ver imagen:

La barra de menú

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.

Las pestañas de documentos

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, entre otros... Pudiendo acceder a ellos
con un clic. Esto nos ahorrará bastante tiempo.

La barra de estado

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 + C para copiar, Ctrl + V para pegar, entre otros.)

El panel de propiedades

El panel o también conocido como 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.

Á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.

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

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.

Observemos 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.
 También podemos 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.
 Otra manera en la cual se le conocen son paneles acoplables y desacoplables, podemos acoplar
y desacoplar los paneles. Para ello hay que pinchar en el título del panel y arrastrar 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 expandido.
Línea inferior de pestañas

En la 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, entre otros.

Vistas del documento

Dreamweaver CS6, ofrece distintas vistas que permiten mostrar y editar el contenido del
documento, para así usar la vista con la que más nos agrade trabajar.

Vista Código.

Presenta la codificación para escribir o editar manualmente el código con el que se esté trabajando.
Para activar la Vista código, realiza cualquiera de las siguientes tres opciones:
1. Haz clic en botón Código de la Barra de herramientas documento.

2. Sitúate en el menú Ver y selecciona la opción Código.

3. O presiona la tecla < F10 >.
Al realizar cualquiera de las tres opciones anteriores, se mostrará la Vista Código del documento
con el que se esté trabajando.
Vista Diseño.

Muestra el contenido de la página web y permite editarlo. Activa la Vista Diseño, empleando
cualquiera de las siguientes opciones:
1. Haz clic en botón Diseño de la Barra de herramientas Documento.

2. Sitúate en el menú Ver y selecciona la opción Diseño.

Vista Dividir.

Separa en dos el área de trabajo, visualizando en una parte el código y en la otra la vista diseño.
La Vista Dividir, se activa desde:
1. El botón Dividir de la Barra de herramientas Documento.
2. O desde el menú Ver -> Código y Diseño.

Vista En vivo.

Es casi similar a la vista diseño, sólo que en esta es posible interactuar con el contenido de la
página tal y como se estuviera haciendo en el navegador. Activa la Vista En vivo, desde:

1. El botón Vista En vivo de la Barra de herramientas Documento.

2. Desde el menú Ver -> Vista en vivo.

3. O Metacomando < Alt + F11 >.

Vista Código en vivo.

 Divide en dos partes el área de trabajo, mostrando el contenido de la página web en vivo, y a la
vez que es posible editar dicho contenido mediante código.

Una vez que se haya activado la Vista En Vivo, es posible activar la Vista Código en vivo. Para
ello realiza lo siguiente:
1. Haz clic en el botón Código en vivo de la Barra de herramientas Documento.

2. O desde el menú Ver -> Código en vivo.

Vista previa en el navegador.

Permite visualizar la página web en alguno de los navegadores instalados en el equipo (por lo
regular es el navegador que se tiene por default).

Para ejecutar la página en un navegador, presiona la tecla < F12 > o haz clic en el ícono de
la Barra de herramientas Documento.
Barra de herramientas Navegación con navegador

La barra de herramientas Navegación con navegador se activa en la Vista en vivo y muestra la

dirección de la página que está viendo en la ventana de documento.

TEMA 4: INTRODUCCIÓN AL HTML

Conceptos Básicos

WWW (World Wide Web)

Es un sistema con estándares aceptados universalmente para formatear copiar, modificar y

almacenar información interconectados en redes. Digamos, simplemente, que es un sistema de
información, el sistema de información propio de Internet.

Sus características son:

 Información por hipertexto: Diversos elementos (texto o imágenes) de la información que

se nos muestra en la pantalla están vinculados con otras informaciones que pueden ser de
otras fuentes. Para mostrar en pantalla esta otra información bastará con hacer clic sobre
ellos.
 Gráfico: En la pantalla aparece simultáneamente texto, imágenes e incluso sonidos.
 Global: Se puede acceder a él desde cualquier tipo de plataforma, usando cualquier
navegador y desde cualquier parte del mundo.
 Pública: Toda su información está distribuida en miles de ordenadores que ofrecen su
espacio para almacenarla. Toda esta información es pública y toda puede ser obtenida por
el usuario.
 Dinámica: La información, aunque esta almacenada, puede ser actualizada por el que la
publico sin que el usuario deba actualizar su soporte técnico.
 Independiente: Dada la inmensa cantidad de fuentes, es independiente y libre.

Navegador

Es el programa que nos ofrece acceso a Internet. Debe ser capaz de comunicarse con un servidor
y comprender el lenguaje de todas las herramientas que manejan la información de Web. Puede
decirse que cada casa de software podría tener su navegador propio, aunque los más populares
sean Google Chrome, Mozilla Firefox, Internet Explorer, Opera, Safari, entre otros.

Servidor

Se encarga de proporcionar al navegador los documentos y medios que este solicita. Utiliza un
protocolo HTTP para atender las solicitudes de archivos por parte de un navegador.

HTTP

Es el protocolo de transferencia de hipertexto, o sea, el protocolo que los servidores de World Wide
Web utilizan para mandar documentos HTML a través de Internet.

URL

Es el Localizador Uniforme de Recursos, o dicho más claramente, es la dirección que localiza una
información dentro de Internet.

Ejemplo: http://uba.edu.ve/aulavirtual/index.html

Donde ....
http:// es el indicador de pagina Web
uba.edu.ve es el Dominio (nombre) del computador
/aulavirtual/ es el Directorio dentro del computador
index.html es el Fichero que contiene la página Web

Lista de algunos Dominios:

Dominio Uso destinado

.com Uso comercial
.info Información
.net Redes y Proveedores de servicios de Internet
.org Organizaciones y asociaciones
.edu Educación
.gov Gobierno
.int Organismos internacionales
.mil Fuerzas armadas de los Estados Unidos
.mobi Sitios para dispositivos móviles
.museum Museos
.tv Televisión entretenimiento

HTML
De momento, le basta saber que estas siglas (Hyper Text Markup Language) se corresponden con
la definición "Lenguaje para marcado de hipertexto". Más claro aún, se trata de un lenguaje para
estructurar documentos a partir de texto en World Wide Web. Este lenguaje se basa en tags
(instrucciones que le dicen al texto como deben mostrarse) y atributos (parámetros que dan valor al
tag). El HTML estructura documentos. La mayoría de los documentos tienen
estructuras comunes (títulos, párrafos, listas...) que van a ser definidas por este
lenguaje mediante tags, cualquier cosa que no sea una tag es parte del documento
mismo.

Este lenguaje no describe la apariencia del diseño de un documento sino que ofrece a cada
plataforma que le de formato según su capacidad y la de su navegador (tamaño de la pantalla,
fuentes que tiene instaladas...). Por ello y para no frustrarnos, no debemos diseñar los documentos
basándonos en como lucen en nuestro navegador sino que debemos centrarnos en proporcionar un
contenido claro y bien estructurado que resulte fácil de leer y entender.

No se desespere por lo que acaba de leer. HTML tiene dos ventajas que lo hacen prácticamente
imprescindibles a la hora de diseñar una presentación Web: Su compatibilidad y su facilidad de
aprendizaje debido al reducido número de tags que usa.

Básicamente, los documentos escritos en HTML constan del texto mismo del documento y las tags
que pueden llevar atributos. Esto llevado a la práctica, vendría a ser:

<tag> texto afectado </tag>

 La tag del principio activa la orden y la última (que será la del principio precedida del signo /) la
desactiva. No todas las tags tienen principio y final pero esto lo veremos más adelante.

La estructura básica de un documento nuevo HTML se describe a continuación:

<HTML>
Indica el inicio del documento.
<HEAD>
Inicio de la cabecera.
<TITLE>
Inicio del título del documento.
</TITLE>
Final del título del documento.
</HEAD>
Final de la cabecera del documento.
<BODY>
Inicio del cuerpo del documento.
</BODY>
Final del cuerpo del documento.
</HTML>
Final del documento.

TEMA 5:
EJERCICIOS PRÁCTICOS HTML

- Ejercicio Práctico 1-
1- Abrir el bloc de notas y copiar la estructura tal como muestra la fig.1
 Fig.1

2- Guardar el documento como eje1.html

- Ejercicio Práctico 2-

La etiqueta META

Dentro de la cabecera de nuestro documento podemos incluir otras etiquetas adicionales.

La etiqueta <META> indica al visor de Internet las palabras clave y contenido de nuestra página
Web. Muchos de los buscadores de páginas Web de Internet (Google, Yahoo, Lycos, entre otros...)
utilizan el contenido de esta etiqueta para incluir la página en sus bases de datos.
La etiqueta <META> lleva generalmente dos parámetros, name y content.

Fig.2

Luego de un tiempo que nuestro Sitio Web esta en la Internet el resultado es el siguiente:

Ver figura 3:
 Fig.3

1- Abrir el bloc de notas siguiendo con el ejercicio anterior copiar la estructura tal como muestra la
fig.4

Fig.4

2- Guardar como… eje2.html

- Ejercicio Práctico 3-
La directiva <BODY></BODY> indica el inicio y final de nuestra pagina Web. Será entre el inicio y
el final de esta directiva donde pongamos los contenidos de nuestra página, textos, gráficos, enlaces,
entre otros.... Esta directiva tiene una serie de parámetros opcionales que nos permiten indicar la
"apariencia" global del documento :
 El código de color es un numero compuesto por tres pares de cifras hexadecimales que indican
la proporción de los colores "primarios", rojo, verde y azul. El código de color se antecede del
símbolo #.

Ejemplos :

#000000 Color Negro

#FF0000 Color Rojo
#00FF00 Color Verde
#0000FF Color Azul
#FFFFFF Color Blanco

El primer par de cifras indican la proporción de color Rojo, el segundo par de cifras la proporción
de color Verde y las dos ultimas la proporción de color Azul. Cada par de cifras hexadecimales nos
permiten un rango de 0 a 255. Combinando las proporciones de cada color primario obtendremos
diferentes colores.

De cualquier forma la mayoría de los editores de HTML nos permiten obtener el código de color
correspondiente escogiendo directamente el color de una paleta.

1- Abrir el bloc de notas siguiendo con el ejercicio anterior copiar y probar uno a uno los
parámetros del BODY tal como muestra la fig.5
 Fig.5

NOTA: Deben tener en cuenta que los tipos de imágenes a utilizar son .jpg - .gif - .png la imagen
debe estar en el mismo lugar del fichero de la página web.

2- guardar como eje3a.html

3- Abrir el bloc de notas siguiendo con el ejercicio anterior copiar y probar uno a uno los
parámetros del BODY tal como muestra la fig.6

Fig.6

NOTA: El background y el bgcolor no pueden ir juntos ya que uno muestra la imagen y otro un
color de fondo, el resto pueden ir juntos.

4- guardar como eje3b.html

- Ejercicio Práctico 4-
Todos los visores de páginas Web actuales soportan todos los caracteres gráficos del la
especificación ISO 8859-1, que permiten escribir textos en la mayoría de los paises occidentales.

De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres ASCII, se han
definido dos formas de representar caracteres especiales usando solamente el código ASCII de 7
bits. Para hacer referencia a estos caracteres se les asigna un código numérico o un nombre de
"entidad". Asimismo hay caracteres que se utilizan para las directivas de HTML, por ejemplo < y >.
Estos caracteres pueden ser representados por un código numérico o una entidad cuando deseemos
que aparezcan en el documento "tal cual". Las entidades comienzan por el símbolo & (ampersand)
y terminan con el símbolo ; (punto y coma).

Juego de caracteres del Documento.

&nbsp; &#160; Ð &ETH; &#208;

¡ &iexcl; &#161; Ñ &Ntilde; &#209;
¢ &cent; &#162; Ò &Ograve; &#210;
£ &pound; &#163; Ó &Oacute; &#211;
¤ &curren; &#164; Ô &Ocirc; &#212;
¥ &yen; &#165; Õ &Otilde; &#213;
¦ &brvbar; &#166; Ö &Ouml; &#214;
§ &sect; &#167; × &times; &#215;
¨ &uml; &#168; Ø &Oslash; &#216;
© &copy; &#169; Ù &Ugrave; &#217;
ª &ordf; &#170; Ú &Uacute; &#218;
« &laquo; &#171; Û &Ucirc; &#219;
¬ &not; &#172; Ü &Uuml; &#220;
&shy; &#173; Ý &Yacute; &#221;
® &reg; &#174; Þ &THORN; &#222;
¯ &macr; &#175; ß &szlig; &#223;
° &deg; &#176; à &agrave; &#224;
± &plusmn; &#177; á &aacute; &#225;
² &sup2; &#178; â &acirc; &#226;
³ &sup3; &#179; ã &atilde; &#227;
´ &acute; &#180; ä &auml; &#228;
µ &micro; &#181; å &aring; &#229;
¶ &para; &#182; æ &aelig; &#230;
· &middot; &#183; ç &ccedil; &#231;
¸ &cedil; &#184; è &egrave; &#232;
¹ &sup1; &#185; é &eacute; &#233;
º &ordm; &#186; ê &ecirc; &#234;
» &raquo; &#187; ë &euml; &#235;
¼ &frac14; &#188; ì &igrave; &#236;
½ &frac12; &#189; í &iacute; &#237;
¾ &frac34; &#190; î &icirc; &#238;
¿ &iquest; &#191; ï &iuml; &#239;
À &Agrave; &#192; ð &eth; &#240;
Á &Aacute; &#193; ñ &ntilde; &#241;
 &Acirc; &#194; ò &ograve; &#242;
à &Atilde; &#195; ó &oacute; &#243;
Ä &Auml; &#196; ô &ocirc; &#244;
 Å &Aring; &#197; õ &otilde; &#245;
Æ &AElig; &#198; ö &ouml; &#246;
Ç &Ccedil; &#199; ÷ &divide; &#247;
È &Egrave; &#200; ø &oslash; &#248;
É &Eacute; &#201; ù &ugrave; &#249;
Ê &Ecirc; &#202; ú &uacute; &#250;
Ë &Euml; &#203; û &ucirc; &#251;
Ì &Igrave; &#204; ü &uuml; &#252;
Í &Iacute; &#205; ý &yacute; &#253;
Î &Icirc; &#206; þ &thorn; &#254;
Ï &Iuml; &#207; ÿ &yuml; &#255;

1- Abrir el bloc de notas siguiendo con el ejercicio anterior copiar y probar los Juego de caracteres
tal como muestra la fig.7

Fig.7

Es por ello que si deseamos que cualquier visor de páginas Web pueda visualizar las letras
acentuadas de nuestro documento debemos utilizar sus correspondientes entidades o códigos para
representarlas.

2- Desarrollar 10 ejercicios utilizando diferentes juegos de caracteres semejante a la fig.7

3- Guardar como… eje4.html

Conteste las siguientes preguntas con las opciones Falso o Verdadero según sea el caso

¿Dreamweaver es un editor de imágenes?

Verdadero Falso
Correcto

¿La barra de menú se encuentra en el área de paneles?

Verdadero Falso

Correcto

¿El acrónimo de HTML es HyperText Markup Language («lenguaje de marcas de hipertexto»)?

Verdadero Falso

Correcto

¿La etiqueta META se usa para agregar palabras claves en las páginas web para facilitar la
búsqueda en los buscadores?

Verdadero Falso

Correcto