Maquetación Web con Dreamweaver y Photoshop (1/2)

1. Tecnologías web.
Dia 2
Marzo 2018
José A. García jagarcia1980@Gmail.com
Práctica con Dreamweaver

2.  Entorno de trabajo
 Configurando el entorno de trabajo
 Pantalla de bienvenida
 Diferentes barras de dreamweaver

3.  Utilizaremos la versión trial de Dreamweaver
CS6
Las herramientas CS6 se pueden descargar de 2
formas:
- Gratuitamente registrándonos como
desarrolladores en la Adobe Cloud
http://www.adobe.com/products/creativecloud.html?promoid=JQPEQ
- Mediante la versión Trial
https://helpx.adobe.com/x-productkb/policy-pricing/cs6-product-
downloads.html
ENLACES EN MOODLE!

4. ENTORNO DE DREAMWEAVER CS4

5. CONFIGURANDO LA INTERFAZ DE
DREAMWEAVER CS4
Para personalizar la interfaz de trabajo y tener a la mano nuestros archivos de
nuestra web hacemos lo siguiente:
1)En el menú Ventana elegimos la opción Diseño de espacio de trabajo.
2)Existen diferentes vistas (Clásico, Programador, Diseñador, etc)
seleccionamos la vista Clásico.
Probamos entre las distintas vistas disponibles para ver sus diferencias.

6. PANTALLA DE BIENVENIDA.
Abrir elementos recientes: Enlista
los doctos abiertos recientemente.
Crear Nuevo: Enlista el tipo de
páginas que Dw puede generar
Elementos destacados
Generamos un nuevo archivo html.
Página en blanco → HTML → Crear

7. BARRA INSERTAR
Contiene Iconos que representan los elementos que podemos agregar a
nuestra página Web. Esta dividida por categorías que se dividen en fichas
(Diseño, Formularios, Datos, Texto, etc)
INSPECTOR DE PROPIEDADES
Se encuentra en el inferior de la ventana. Aquí se encuentran las opciones
del texto, fuente, tamaño, posición, color, etc.
Es versatil, p.e. si agregamos una tabla este cambia sus propiedades por
las de la tabla para poder ajustar el tamaño, ancho del borde, etc.
Si se llega a cerrar hacemos lo siguiente: Ventana → Propiedades

8. BARRA DE DOCUMENTO.
 Tiene varios menús
Tiene diferentes
vistas
Título de la página
Descargar
archivos del
servidor
Visualizar
en un
explorador
LOS PANELES.
Contiene información sobre acciones que ejecutamos en nuestra página.
Mediante las flechas podemos acceder a cada propiedad de ellos

9. DREAMWEAVER
 Para crear un sitio de dreamweaver hacemos lo siguiente:
1) En la pantalla de bienvenida elegimos la opción Sitio de Dreamweaver.
2) Se abre un cuadro de dialogo donde elegimos la pestaña de Avanzadas asignamos un
nombre y elegimos la carpeta de raíz local que es donde guardaremos todos los
archivos del sitio y también se elige la carpeta donde se alojaran todas las imágenes
de la página. Podemos activar o desactivar el caché.
3) Finalmente podemos ver nuestro sitio creado en el panel de Archivos (lado derecho).
1
2
3

10. CREANDO UN DOCUMENTO.
 Existen las siguientes formas de crear un nuevo archivo:
 1) En el panel de Archivo hacemos clic derecho sobre la carpeta en la cual
lo vamos a crear y seleccionamos Nuevo archivo y escribimos el nombre del
archivo. Para abrirlo damos doble clic sobre el.
 2) Desde la pantalla de bienvenida Crear Nuevo → HTML
 3) Desde Archivo →Nuevo →Página en blanco →HTML
 →

11. AGREGAR IMÁGENES
 Para insertar imágenes a nuestra página debemos hacer lo siguiente:
 1) Debemos agregar las imágenes a la carpeta images, podemos hacerlo de
forma manual. Y las podremos visualizar de esta forma:
 2) Arrastramos la imagen deseada hacia nuestro nuevo
documento y nos aparece un recuadro en donde podemos
insertar un texto alternativo (cuando no se abre la imagen
podemos saber de que se trataba) y aceptamos.

12.  3) Y así agregamos la imagen a nuestro documento.

13. AGREGAR TEXTO
 Para insertar texto a nuestra página debemos hacer lo siguiente:
 1) Trabajamos en la vista Diseño y escribimos el texto que deseamos publicar.
 2) Para darle formato al texto nos vamos a Formato y ahí aparecen una lista
de propiedades que podemos modificar en nuestro texto.
 3) Si modificamos el color aparece un cuadro de dialogo
en donde podemos determinar una etiqueta para persona-
lizar ese estilo del texto y después aplicarlo en futuros tex-
tos del mismo tipo.

14. ETIQUETAS META
 Sirven para que los motores de búsqueda (Google) encuentren nuestra página en
internet. Para insertarlas hacemos lo siguiente:
 1) Vamos al menú Insertar →
HTML → Etiquetas Head → Palabras
Clave
Agregamos palabras clave ej. Restaurant, gastronomía,
hotel, bar, agencia y aceptamos.
Separadas por comas
También podemos agregar una
descripción para nuestra página.

15. HIPERVÍNCULOS
 Enlaces básicos :
1) Seleccionar el texto que deseamos convertir en hipervínculo.
2) En el selector de propiedades buscamos el
campo vínculo y seleccionamos el botón del
lado derecho que es una carpeta.
3) Ahí buscaremos el archivo que vamos a
Vincular, ya sean archivos u otras páginas.
4) Para probar los vínculos se hace desde
vista previa (F12) y damos clic sobre el área marcada.

16.  Enlaces externos
1) Seleccionar el texto que deseamos convertir en hipervínculo.
2) En el selector de propiedades buscamos el campo vínculo y escribimos el url
de la página que queremos vincular.
En este ejemplo utilizamos facebook.
www.facebook.com
3) Para probar los vínculos se hace
desde vista previa (F12) y damos clic
sobre el área marcada.

17. ANCLAJES
Anclajes: Son vínculos que nos trasladan de un lado a otro
dentro de la misma página.
 Revisa el video proporcionado y realiza un ejemplo sencillo
de un anclaje
 Enlace a un correo. Revisar video proporcionado
 Enlace a un archivo. Revisar video proporcionado
 Enlace a una imagen. Revisar video proporcionado

18. DAR FORMATO AL TEXTO.
 Cómo editamos el formato de etiquetas?
1) Seleccionamos el título y en el inspector de
propiedades en el menú emergente elegimos
Encabezado 1. Si nos vamos a la vista Código
vemos que el texto esta dentro de la etiqueta h1.
Nota: Los textos que estén dentro de la eti-
queta h1, tendrán el formato del encabeza-
do 1.

19. Si queremos modificar el formato del encabezado, seleccionamos el texto con el formato
de encabezado y vamos al panel Estilos CSS ahí seleccionamos el icono de Nueva
Regla CSS y nos aparece el siguiente cuadro de dialogo.
Elegimos como tipo de selector la Etiqueta y con esto se reconfigura una etiqueta ya
existente le damos h1 y aceptamos nos aparece un cuadro de dialogo en donde
podemos elegir las propiedades de la Etiqueta como fuente( familia, tamaño,
color,etc) y se cambian el titulo a las nuevas propiedades
Si queremos hacer más reglas
hacemos los mismos pasos, solo hay
que indicar si son párrafos, títulos,
subtítulos, etc

20. LISTAS DE FUENTES.
 Aprenderemos a aplicar diferentes tipos de fuentes
1) Seleccionamos el texto que vamos a editar en el inpector de propiedades
elegimos el tipo de fuente que utilizaremos, ojo: Debe estar activada la
casilla CSS y no la de HTML.
2) Escribimos el nombre que le daremos a la nueva clase, en este caso R1.
Resultado
Tiene 3 fuentes o más porque si el explorador no encuentra en el explorador del
usuario una fuente ocupara la siguiente o la ultima

21. COMO CREAR UNA NUEVA LISTA DE FUENTES.
1) Creamos una nueva lista de fuentes que tendrá: Verdana, Tahoma, Arial,
Times New Roman y Sans Serif. Elegimos Editar lista de fuentes y
aceptamos. En el cuadro de dialogo elegimos las fuentes ya mencionadas y
las agregamos con el botón delas dos flechitas y finalmente aceptamos.

22. HACIENDO LISTAS
 Existen tres tipos de listas en dreamwaver
Sin ordenar (con viñetas)
1) Seleccionamos el texto
2) Damos click en el botón Lista sin ordenar
3) Se alista el texto con viñetas

23.  Lista ordenada (Lista numerada)
1) Seleccionamos el texto
2) Damos click en el botón Lista ordenada
3) Se alista el texto con números al inicio de cada línea. Si insertamos un
espacio y escribimos otra línea se agrega un número en la lista.
 Lista de definición (Glosario)
1) Seleccionamos el texto
2) Vamos al menú Formato → Lista → Lista de definición
3) Automáticamente el texto se ordena en párrafos. Agrega sangrías a la
lista.

24. TABLAS:
 Revisa los videos referentes al tema “Tablas” con ellos
aprenderás a crear una tabla (6.2), trabajar con bordes
(6.3), colorear la tabla (6.4), alinear contenido de una
tabla (6.5) ordenar el contenido de una tabla (6.6) y
anchos de tablas (6.7).

25. PLANTILLAS EN DREAMWEAVER
 Aspectos a considerar:
a) Cada vez que deseamos crear un sitio Web, tenemos que tener en cuenta que
las páginas deben seguir un formato uniforme.
b) Las plantillas son útiles si desea asegurarse de que todas las páginas del sitio
comparten determinadas características, independientemente de si está
creando un nuevo sitio a si está actualizando un sitio existente.
c) Al crear una plantilla, podrá indicar qué elementos de la página deberán
permanecer constantes (no editables) y qué elementos podrán modificarse.
d) Permite a través de la creación de una sola página todo el entorno web, si se
requiere hacer un cambio solo se hace en la plantilla y se modifica en todas las
paginas relacionadas con la plantilla

26.  Pasos para crear una plantilla
 Generamos una pagina que será nuestra plantilla Archivo
→ Nuevo →HTML
 Creamos la plantilla con una tabla 3Fx1C (Insertar
→Tabla) y la centramos (seleccionamos y alineamos al
centro).
 Agregamos los siguientes textos en las filas cabecera,
botones y contenido
1
2

27. El siguiente paso es definir que partes van a estar fijas en nuestra página, en este
caso botones y cabecera estarán fijos.
Cómo indicamos que la fila de contenido va a ser una región editable?
1) Guardamos nuestro archivo como plantilla Archivo →Guardar como plantilla y
aparece el siguiente cuadro de dialogo, lo nombramos plantilla y guardamos
2) Y aparece una carpeta llamada Templates que contiene nuestro archivo con la
extensión .dwt (dreamweaver template)
3) Ahora agregamos la región editable Insertar → Objetos de plantilla →Región
editable y aparece un cuadro de dialogo donde aceptamos y la plantilla se
modifica de la siguiente forma. Guardamos y cerramos.

28. 1) Realizamos otras páginas a partir de la platilla creada:
Archivo →Nuevo→Página de plantillas →Plantilla que
creamos
2) Abre la plantilla y ahí podemos notar que nos deja
modificar: sólo el área del contenido.
3) Modificamos la plantilla con algún texto y la guardamos
con un nombre representativo.
4) Generamos otra página siguiendo los pasos del punto 1.
Agregamos algún texto y la guardamos con otro nombre.
Ya tenemos dos páginas

29. Nota: Si queremos modificar cabecera o botones lo hacemos
directamente en la plantilla, en este caso pondremos los
botones como links a las páginas que creamos
anteriormente.
Guardamos y aparece un cuadro de dialogo y seleccionamos
actualizar

30.  Chequeamos que las dos paginas estén guardadas y la
plantilla. Ejecutamos la plantilla (F12). Y queda algo así
donde se están linkeadas las dos paginas.