manual dreamweaver cc

ZONIA CAHUANA CONISLLA

MANUAL

PRIMERA OPCION:

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

PRIMERA OPCION:

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


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


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

manual dreamweaver cc

Education