Manual dreamweaver CC
-
Upload
wilder-vilcahuaman -
Category
Education
-
view
575 -
download
2
Transcript of 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
ZONIA CAHUANA CONISLLA
MANUAL
PRIMERA OPCION:
1 . - Meta comando < Win + R >.
2.- Teclea la palabra Dreamweaver.
3.- Pulsa la tecla < Enter >.
Ambiente de Dreamweaver 3
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
MANUAL
Vista previa en el navegador. 10
00
00
0
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
MANUAL
14
ÁREA DE TRABAJO EN DREAMWEAVER CS6.
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
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.
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
MANUAL
ZONIA CAHUANA CONISLLA
MANUAL
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
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.
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
MANUAL
ZONIA CAHUANA CONISLLA
MANUAL
El resultado será el siguiente:
26
ZONIA CAHUANA CONISLLA
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.
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
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.
ZONIA CAHUANA CONISLLA
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?
ZONIA CAHUANA CONISLLA
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?
ZONIA CAHUANA CONISLLA
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é?
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
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.
ZONIA CAHUANA CONISLLA
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.
ZONIA CAHUANA CONISLLA
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.
ZONIA CAHUANA CONISLLA
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.
ZONIA CAHUANA CONISLLA
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.
ZONIA CAHUANA CONISLLA
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
ZONIA CAHUANA CONISLLA
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:
ZONIA CAHUANA CONISLLA
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.
ZONIA CAHUANA CONISLLA
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.
ZONIA CAHUANA CONISLLA
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.
ZONIA CAHUANA CONISLLA
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.
ZONIA CAHUANA CONISLLA
MANUAL