Manual dreamweaver CC

ZONIA CAHUANA CONISLLA
MANUAL
PR I MER A OPC I ON:
1 . - A b r e 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
¿Qué es Dream weaver?
Es una aplicación que está destinada a la construcción,
diseño y edición de sitios y aplicaciones Web.
Lo que se
puede hacer
con Dream
weaver.
 Las funciones de edición visual de
Dreamweaver permiten crear páginas Web
de forma rápida, sin escribir una sola línea
de código.
 Puede ver todos los elementos o activos del
sitio y arrastrarlos desde un panel fácil de
usar directamente hasta un documento.
 Puede agilizar el flujo de trabajo de
desarrollo mediante la creación y edición de
imágenes en Macromedia Fireworks o en
otra aplicación de gráficos y su posterior
importación directa a Dreamweaver.
 Dreamweaver también contiene
herramientas que facilitan la adición de
activos de Flash a las páginas web.
¿Como poder acceder a Dreamweaver existen diversas formas, pero las
redes usuales son?
1
2

MANUAL
PR I MER A OPC I ON:
1 . - Meta comando < Win + R >.
2.- Teclea la palabra Dreamweaver.
3.- Pulsa la tecla < Enter >.
Ambiente de Dreamweaver
3

MANUAL
1. Haz clic en botón Código de la Barra de herramientas documento
Vista 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
4
5

MANUAL
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.
6

MANUAL
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
documentos.
2. O desde el menú Ver
Código y Diseño.
7

MANUAL
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:
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.
8
9

MANUAL
Vista previa en el navegador.
10
00
00
0

MANUAL
Crear un nuevo documento.
Para crear un nuevo documento en
Dreamweaver CS6, realiza lo
siguiente:
1. Menú Archivo Nuevo.
En la categoría Página en blanco del
cuadro de diálogo Nuevo documento,
selecciona el tipo de página que
deseas crear en la columna Tipo de
página.
2. O Metacomando < Ctrl + N >.
11

MANUAL
Abrir un documento
Para abrir un
documento en
Dreamweaver CS6,
realiza lo que se
señala a
continuación:
1. Menú Archivo
Abrir.
2. O Metacomando
< Ctrl + O >.
Una vez realizado
alguno de los
procedimientos
anteriores aparecerá
el cuadro de diálogo
Abrir, donde
deberás seleccionar
el documento a
abrir.
Guardar un documento
Para guardar un documento en
Dreamweaver CS6, presiona el
Metacomando
< Ctrl + S > o haz clic en el menú Archivo
Guardar.
Al guardar por primera vez un documento
aparecerá el cuadro diálogo Guardar
como, donde se habrá de especificar el
nombre del archivo y el tipo de
documento a guardar.
12
13

MANUAL
14
ÁREA DE TRABAJO EN DREAMWEAVER CS6.

MANUAL
El panel Insertar contiene botones para crear e insertar objetos al
documento.
Los botones se encuentran organizados en categorías, entre las que se
puede cambiar seleccionando la categoría deseada
del menú desplegable Categoría.
El panel Insertar está organizado en las categorías
siguientes:
Categoría Común. Permite crear e insertar los
objetos que se utilizan con más frecuencia, como las
imágenes y las tablas.
Categoría Diseño. Permite insertar tablas,
elementos de tabla, etiquetas div, marcos y widgets
de Spry. También puede elegir dos vistas para
tablas: Estándar (valor predeterminado) y Tablas
expandidas.
Categoría Formularios. Contiene botones que
permiten crear formularios e insertar elementos de
formulario, incluidos widgets de validación de Spry.
Categoría Datos. Permite insertar objetos de datos
de Spry y otros elementos dinámicos, como juegos
de registros, regiones repetidas y grabar formularios
de inserción y actualización.
Categoría Spry. Contiene botones para crear
páginas de Spry, incluidos objetos de datos y widgets de Spry.
Categoría jQuery Mobile. Contiene botones para crear formularios en
lenguaje jQuery.
Categoría InContext Editing. Contiene botones para la creación de
páginas de InContext Editing, incluidos botones para Regiones editables,
Regiones repetidas y la administración de clases CSS.
Categoría Texto. Permite insertar diversas etiquetas de formato de texto
y listas, como b, em, p, h1 y ul.
Categoría Favoritos. Permite agrupar y organizar los botones del panel
Insertar que utiliza con más frecuencia en un lugar común.
Panel Insertar. 15

MANUAL
CONFIGURAR UN SITIO EN DREAMWEAVER.
Un Sitio es el conjunto de archivos
de hipertexto (páginas web) y
carpetas relacionados entre sí, con
un diseño similar y un objetivo en
común.
Cada sitio Web tendrá una
dirección única, es decir, nunca se
podrán repetir las URL’s.
Estructura de una Página Web.
16
17

MANUAL
Configurar un Sitio nuevo.
Configurar un sitio de Dreamweaver permite organizar todos los documentos
asociados con un sitio Web. El cuadro de diálogo Configuración del sitio es
donde se especifica la configuración del sitio de Dreamweaver.
Para abrir el cuadro de diálogo Configuración del sitio, haz clic en el menú Sitio
Nuevo sitio.
El cuadro de diálogo Administrar sitios se
emplea para crear nuevos sitios, editar,
duplicar, eliminar un sitio o importar o
exportar la configuración de un sitio.
1. Selecciona Sitio Administrar sitios y
selecciona un sitio de la lista.
18

MANUAL
Panel Archivos.
Utilice el panel Archivos para ver y
administrar los archivos del sitio de
Dreamweaver.
Al visualizar sitios, archivos o
carpetas en el panel Archivos,
puedes cambiar el tamaño del área
de visualización y expandir o
contraer el panel Archivos.
19

MANUAL
FORMATO A LA PÁGINA WEB
20
Propiedades de la
página.
Al momento de crear
una Página Web es
recomendable crear
sitios que sigan un
mismo formato, es
decir, que tengan el
mismo color de fondo,
de fuente, etc.
El formato de la página
se define a través del
cuadro de diálogo
Propiedades de la
página.

MANUAL
Categoría Apariencia (CSS).
La categoría Apariencia
(CSS) permite
especificar la fuente y el
tamaño de la letra; así
como el color del texto,
color de fondo, aplicar
una imagen de fondo,
los márgenes del área
del documento.
Categoría Apariencia (HTML).
La categoría Apariencia
(HTML), permite
especificar varias opciones
básicas para el diseño de
página y éstas son:
21
22

MANUAL
Comentarios.
Un comentario es un texto
descriptivo que se inserta
en el código HTML para
explicar el código o
facilitar otra información.
El texto del comentario
aparece sólo en la vista
Código y no se muestra
en los navegadores.
Si se desea que la fecha
insertada se actualice
cada vez que se guarde
el documento, activa la
casilla Actualizar
automáticamente al
guardar. Pero si se
requiere que la fecha se
convierta en texto
normal cuando se
inserte y no se actualice
automáticamente,
desactiva dicha opción.
23

MANUAL
Cuando se trabaja con páginas web, muchas de
las ocasiones es necesario emplear caracteres especiales
tales como ñ, ©, á, ü, por mencionar algunos; para esto
Dreamweaver dispone de diferentes caracteres que podemos
incorporar al documento.
Para insertar caracteres especiales, haz clic en el menú
Insertar HTML
Caracteres especiales Otro. Una vez hecho lo anterior se
mostrará el cuadro de diálogo Caracteres especiales, ahí
deberás seleccionar el carácter buscado.
En Dreamweaver
CS6, es posible
insertar tres tipos
de listas, que son:
24

MANUAL
Menú Formato.
También puedes emplear el menú Formato, para modificar el aspecto del
texto; dentro de este menú encontrarás los submenús para:
Aumentar Sangría o Anular sangría.
Asignarle formato al párrafo.
Alinear el texto.
Crear listas.
Aplicar estilos predefinidos.
Crear o aplicar estilos CSS.
Modificar el color de texto.
Crear estilos CSS.

MANUAL
Cuando hayas terminado de
configurar las propiedades del
estilo CSS, haz clic sobre el
botón Aceptar.
Menús usando hojas de estilos.
El elemento esencial en una Página Web es el uso de menús, ya
que gracias a ellos permiten que el usuario pueda desplazarse en
cada página que compone el sitio Web.
Hoy en día la mayoría de los menús se realizan con el uso de
hojas de estilos y html. Anteriormente era muy frecuente ver
Páginas Web con menús hechos en Flash, pero la desventaja era
el tiempo en que tardaba de cargarse, por lo que terminaron
quedando obsoletos.
Para crear menús usando hojas de estilos, se deben crear dos
documentos: un documento HTML (.html) y la otra una Hoja de
estilos (.css).
El documento HTML deberá contener los siguientes dos
elementos:
Una capa y una lista sin ordenar, para ello procede a realizar lo
siguiente:
25

MANUAL
El resultado será el siguiente:
26

MANUAL
Concepto de Imagen.
Una imagen es el gráfico vectorial
o no vectorial, que muestra una
presentación visual de algo en
formato digital.
Insertar imágenes.
Cuando se insertan imágenes en
Dreamweaver, el programa genera
unacualquier tipo de trabajo
educativo. Referencia del archivo
de imagen.
27
Definición de propiedades de tipo CSS
Font-family: Establece la familia de fuentes (o serie de familias) del
estilo.
Font-size: Define el tamaño del texto.
Font-style: Especifica normal, italic u oblique como estilo de la
fuente.
Line-height: Establece el alto de la línea en la que se coloca el texto
Text-decoration: Añade subrayado, sobreimpresión o tachado al
texto o hace que el texto parpadee.
Font-weight: Aplica una cantidad específica o relativa de negrita a la
fuente.
Font-variant: Establece la variante de versales en el texto.
Text-transform: Convierte en mayúscula la primera letra de cada
palabra de la selección o convierte todo en mayúsculas o minúsculas.
Color: Establece el color del texto.

MANUAL
Localiza el archivo de imagen PSD de Photoshop en el cuadro de diálogo
Seleccionar origen de imagen.
4. En el cuadro de diálogo Optimización de imágenes que aparece, ajusta la
configuración de
28

MANUAL
EL Diseño de botones: nos permiten enlazar las páginas al momento de dar clic.
Estos son algunos diseños de los botones.
Deben tener la misma forma y línea de color.
• Los podemos diseñar en Photoshop, Corel o Power Point.
¿Qué necesito primero para diseñar mi primer Web?
Diseñar los botones
¿CÓMO DE SER LOS BOTONES?
¿Cómo voy a diseñar los botones?
29
29
30

MANUAL
• Si es el photoshop hay editarlos luego guardarlo como imagen jpg o gif para que no se
vea el fondo.
• Si es en el corel se deben diseñar de uno en uno y luego dar control + e, y guardarlo
como jpg, aceptar.
• Si es el power point hay q hacerlo en insertar formas y luego dar clic sobre la imagen y
guardarlo.
Es un formato publicitario en Internet. Esta forma de publicidad online consiste en incluir
una pieza publicitaria dentro de una página web. Prácticamente en la totalidad de los casos, su
objetivo es atraer tráfico hacia el sitio web del anunciante que paga por su inclusión.
Estos pueden ser horizontales o verticales. Las medidas son las siguientes.
Diseñando Banner.

MANUAL
Necesito escoger el fondo o los colores que estarán de fondo de mi página web. Este fondo debe
combinar con todos las aplicaciones que contendrá mi página considerando el diseño de los
botones, la tipografía y las imágenes.
Este contendrá lo que oferta mi empresa, a que se dedica o que promueve o vende.
Es el relato de cómo nace la empresa, los hechos históricos, fotos de la empresa del antes y
después, fotos de los creadores de la empresa.
Es la razón de ser de la empresa, el motivo por el cual existe. Así mismo es la determinación de
la/las funciones básicas que la empresa va a desempeñar en un entorno determinado para
conseguir tal misión.
¿Qué otra cosa necesito para mi diseño de mi WEB?
¿Qué contendrá en LINK de INICIO?
¿Qué contendrá en LINK de HISTORIA?
¿Qué contendrá en LINK de MISIÓN?

MANUAL
En la misión se define: la necesidad a satisfacer, los clientes a alcanzar, productos y servicios a
ofertar.
Se refiere a lo que la empresa quiere crear, la imagen futura de la organización.
La visión es creada por la persona encargada de dirigir la empresa, y quien tiene que valorar e
incluir en su análisis muchas de las aspiraciones de los agentes que componen la organización,
tanto internos como externos.
La visión se realiza formulando una imagen ideal del proyecto y poniéndola por escrito, a fin de
crear el sueño (compartido por todos los que tomen parte en la iniciativa) de lo que debe ser en
el futuro la empresa.
Los valores son aquellos juicios éticos sobre situaciones imaginarias o reales a los cuales nos
sentimos más inclinados por su grado de utilidad personal y social.
Los valores de la empresa son los pilares más importantes de cualquier organización. Con ellos
en realidad se define a sí misma, porque los valores de una organización son los valores de sus
miembros, y especialmente los de sus dirigentes.
Los empresarios deben desarrollar virtudes como la templanza, la prudencia, la justicia y la
fortaleza para ser transmisores de un verdadero liderazgo.
Este contendrá imágenes referentes a lo que mi empresa vende o promueve.
Sera la información de la empresa ubicación, teléfono, correo electrónico o un mapa de
ubicación. Quien es la persona encargada.
Ya que tengo toda la información requerida en texto, imágenes, botones, fotos, etc.
Buscaremos la carpeta que creamos en el sitio web, esta estará alojada en mis DOCUMENTOS
y se llama la carpeta MI SITIO, en esta carpeta agregaremos los botones y las imágenes o fotos.
Aquí se almacenará todo.
¿Qué contendrá en LINK de VISIÓN?
¿Qué contendrá en LINK de VISIÓN?
¿Qué contendrá en LINK de GANELERIA?
¿Qué contendrá en LINK de CONTACTO?
¿Y luego?
¿Qué contendrá en LINK de MISIÓN?

MANUAL
Ahora si empezaremos a diseñar nuestra web en el programa de Dw, Seleccionamos HTML y se
nos abrirá la ventana para diseñar el sitio WEB.
En la parte derecha inferior como se muestra encerrado en recuadro rojo, está la aplicación de
ACCIONES, aquí nos muestra la carpeta MI SITIO con todos los elementos que contiene esa
carpeta fotos imágenes y botones y todo lo que queramos agregar. Si queremos INSERTAR un
elemento de esta carpeta a nuestra PLANTILLA de WEB solamente lo seleccionamos el objeto
y lo arrastramos a la plantilla para agregarlo y poderlo manipular dentro.
El siguiente paso es INSERTAR una tabla asi como se muestra en la siguiente imagen damos
clic.
¿Qué debo de conocer antes de empezar a diseñar?
¿Y después qué?

MANUAL
Ya que damos clic nos muestra la siguiente ventana, y seleccionamos lo siguiente: en FILAS
ponemos 7 en COLUMNAS ponemos 7, en ANCHO DE TABLA ponemos 750 pixeles, GROSOR
DE BORDE ponemos CERO y seleccionamos la aplicación AMBOS y damos
Nos parecerá una tabla con CELDAS las cuales podemos mover o hacerlas más grande
dependiendo del acomodo de lo que contendrá nuestra página WEB.
ACEPTAR

MANUAL
¿Cómo voy a trabajar con esta tabla en la distribución de los elementos?
Selecciono 5 celdas como se muestra en la siguiente imagen.
Ya que seleccione las 5 celdas doy clic derecho
y me aparece una ventana, selecciono la opcion
de COMBINAR CELDAS, para que las celdas que
seleccione las pueda uni en una sola ya que en
esta parte pondremos el Banner horizontal.
Tambien en esta ventana de opciones de tabla,
nos permite insertar mas filas o columnas.

MANUAL
Ya que hicimos este paso agregamos el banner y ajustamos las celdas al tamaño, como se
muestra en la siguiente imagen
Ejemplo de banner vertical.
Agregando los botones de forma horizontal. Solamente seleccionamos los botones y los
arrastramos a la celda que queremos que estén.

MANUAL
Después para guardar todo lo que estamos haciendo damos clic en
F12 y nos aparecerá una venta que dice que si deseamos guardar y
le damos la opción de SI y nos aparecerá una ventana para agregar
el nombre de nuestra primer página que la nombraremos INDEX y le
damos únicamente GUARDAR, ya que terminamos este paso se nos
abrirá la página del explorador para visualizar la vista previa de la
página, cada vez que demos F12 nos mostrara que queremos
guardar y después nos mostrara la vista preliminar.
Guarda el archivo de imagen para la Web
en una ubicación dentro de la carpeta raíz
de su sitio Web.

MANUAL
Concepto de Hipervínculo.
31
Los hipervínculos son links (vínculos) que al ser
pulsados nos redirigen hacia otra página o archivo;
permitiendo conectar los diferentes elementos de
una Página Web.
En Dreamweaver es posible establecer
hipervínculos a cualquier elemento del documento
como puede ser: texto, imágenes, multimedia, etc.

MANUAL
¿Cómo hacer vínculos?
Selecciono el BOTON ya que
lo tengo seleccionado, en la
barra de PROPIEDADES esta
la opción de VÍNCULO
presiono en icono del
CÍRCULO y arrastro con una
FLECHA que aparece a la
página que deseo vincular con el
BOTON, ver la imagen.
Vínculo a correo electrónico.

MANUAL
Menú de salto.
Un menú de salto es un menú
emergente de un documento que
pueden ver los visitantes del sitio
y que ofrece vínculos con
documentos o archivos. Puedes
crear vínculos con documentos
del sitio Web, documentos de
otros sitios, correo electrónico,
gráficos o cualquier tipo de
archivo que se pueda abrir en un
navegador.
Cada opción de un menú de
salto está asociada a un URL.
Cuando los usuarios eligen una
opción, se les remite al URL
asociado. Los menús de salto se
insertan dentro del objeto de
formulario Menú de salto.
Para finalizar,
haz clic en
Aceptar.
34

MANUAL
Los formularios son los elementos que se utilizan para la
recolección de datos del usuario y se emplean muy
cotidianamente para el registro de usuarios,
comentarios, inicio de sesiones, etc.
Los objetos de formulario son mecanismos
que permiten a los usuarios introducir
datos. Puede añadir a un formulario los
siguientes objetos de formulario:

MANUAL
Dreamweaver
puede añadir
código
JavaScript que
comprueba el
contenido de
los campos de
texto
especificados
para
asegurarse de
que el usuario
ha introducido
el tipo correcto
de datos.
Concepto de Capa.

MANUAL
La Etiqueta Div: coloca una capa
fija en el documento, esto es, la
capa se encontrará estática.
Etiqueta DIV: de diseño de
cuadricula fluida.
Incrusta una capa que se adapta a
la resolución de la pantalla, es decir,
al modificar el tamaño del
navegador, el contenido de esta
etiqueta se adapta.
Div PA. Inserta una capa de
posición absoluta, es decir, es
posible moverla en cualquier parte
del documento.
Elementos Multimedias
Insertar Audio.
Incorporar sonido a la Página Web no es muy recomendable,
ya que en algunas ocasiones el usuario que visita el sitio suele
estar escuchando su propia música cuando se encuentran
navegando en Internet, y esto puede resultar molesto para el
internauta.
Sin embargo, en Dreamweaver es posible insertar diferentes
tipos de audio, como
.wav, .midi y .mp3, entre otros. Los factores que hay que tener
en cuenta antes de optar por un formato y un método para
añadir sonido son: su finalidad, el tipo de usuarios a los que
está destinado, el tamaño de archivo, la calidad de sonido y las
diferencias en los navegadores.

MANUAL
En Dreamweaver CS6 se
incorporó el uso de nuevas
etiquetas de HTML5 que
versiones anteriores al programa
no contaba con ellas, unas de
estas etiquetas es la de
incorporar audio a la Página Web
y sus etiquetas son la de
<AUDIO>… </AUDIO>; cuando
se desea generar el código HTML
manualmente se deberá emplear
dicha etiqueta y sus respectivos
atributos a emplear. Cualquier
tipo de trabajo educativo.
Insertar Video.
Algunas ocasiones es necesario colocar
video(s) en Páginas Web, ya sea para
ilustrar algo o simplemente una atracción
para el internauta.
Los formatos de vídeo que suelen utilizarse
en Internet son los formatos: .avi,
.mpeg y .mov.
Sin embargo, hay que tomar en cuenta el
peso del archivo, ya que entre más pese el
archivo de video, mayor será el tiempo en
que va a descargarse y mostrarse en el sitio
Web.

MANUAL
El componente FLV incorpora
videos al documento sin
necesidad de utilizar la
herramienta de creación de Flash,
dicho videos deberán contener la
extensión .flv.
Dreamweaver inserta un
componente SWF que muestra el
archivo FLV; cuando se visualiza
en un navegador, este
componente muestra el archivo
FLV seleccionado, así como un
conjunto de controles de
reproducción.

Manual dreamweaver CC

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Manual dreamweaver CC

Similar a Manual dreamweaver CC (20)

Más de WILDER VILCAHUAMAN

Más de WILDER VILCAHUAMAN (20)

Último

Último (20)

Manual dreamweaver CC