24/02/2011 Adobe Dreamweave cs5 Tema: Introduccin, Sitio Web, Configurar sitio, Administrar sitio.

---------------------------------------------------------Adobe Dreamweaver es un programa orientado al diseo y desarrollo de paginas web, caracterizandose por permitirnos utilizar diversas herramientas de programas dif erentes como adoble flash, adobe photoshop, adobe fireworks, programacin en html, etc. Las paginas web creadas son reconocidas directamente por el navegador internet e xplorer por la extensin HTML. Estas paginas seran publicadas o vistas desde el navegador. INICIO O CARGA DE DW.CS5 ------------------------1. Seleccionar el boton inicio. 2. Seleccionar todos los programas 3. Seleccionar Adobe Master Collection. 4. Seleccionar Adobe Dreamweaver Profesional cs5. 5. Seleccionar la herramienta HTML. DESCRIPCION DE LOS PANELES O VENTANAS ------------------------------------1. Barra de propiedades --------------------, esta barra nos permite asignar jetos de la pagina web (color, tamao, estilos, etc. - Pulsar ctrl+ f3 (activar / desactivar barra de prop.)

atributos a los ob

SITIO WEB --------Un sitio es un lugar que aloja objetos de las pgina web donde por defecto debe de encotrarse en una unidad de almacenamiento del computa dor como es el disco duro (c:). Un sitio web se caracteriza por permitirnos organizar los objetos en carpetas de plantillas, imagenes, sonidos,videos, peliculas, descargas, botones, etc. La finalidad de tener un sitio web es para poder publicar una pagina en el naveg ador sin ningun problema de carga. 1. Crear las carpetas y subcarpetas en la unidad C: Nota, crear las subcarpetas de acuerdo al contenido de los dra la pgina web. CONFIGURACION DE SITIO ---------------------1. Seleciconar el menu sitio (dreamweaver cs5). 2. Seleccionar nuevo sitio. 3. Escribir el nombre del sitio. 4. Seleccionar el botn de examinar del sitio. 5. Abrir y seleccionar el sitio web. 6. Seleccionar guardar. NOTA ----, guardar la pagina web y pulsar F12 (internet si el sitio reconoce la pagina creada. HOJAS DE ESTILOS ---------------RGB (RED=ROJO, GREEN=VERDE. BUEL=AZUL) objetos que ten

explorer), para probar

00 FF (MAXIMO COLOR)

66

44

CSS es un lenguaje usado paa definir la presentacin de un documento estrucuturado escrito en HTML o XML (y por extensin en XHTML). el w3c (World Wide Web Consorti um) es el encargado de formular la especificacin de las hojas de estilo que servi ran de estandar para los agentes de usuario o navegadores. La idea que se e un documento 1. Seleccionar 2. Seleccionar 3. Seleccionar 4. Seleccionar 5. Seleccionar 6. Seleccionar encuentra detras del desarrollo de CSS es separar la estructura d de su presentacin. el menu archivo nuevo pagina de muestra hoja de estilos la pagina de muestra crear.

ADJUNTAR HOJA DE ESTILO ----------------------1. Abrir la pagina o documento que recibira la nueva presentacin. 2. Selecionar adjuntar hojas de estilos de la propiedad clases (barra de prop iedades) 3. Seleccionar examinar y abrir la hoja de estilo. 4. Activar la opcin: vincular. 5. Seleccionar la media: all (todo) 6. Seleccionar aceptar. CREAR PLANTILLA ----------------

01/03/2011 Adobe Dreamweaver CS5 Tema: Capas - Div Pa ----------------------------------------------------------------------Los Div PA son capas que vienen acumuladas unas tras otras, estas permite organi zar los objetos con la finalidad de moverlos, copiarlos, eliminarlos. Los Div PA por defecto se insertan mostrando un marco de borde azul, estos puede n reducirse o ampliarse. INSERTAR DIV PA ---------------1. Seleccionar el menu insertar 2. Seleccionar objetos de diseo 3. Seleccionar Div Pa PANEL DE CAPAS O DIV PA ----------------------1. Seleccionar el menu ventana 2. Seleccionar Div PA ANIMACIONES DE OBJETOS ---------------------Dreamweaver nos permite animar objetos como imagenes, textos utilizando las dire ctivas como: <marquee>TEXTO</marquee> sintaxis:

behavior=altenate (alterna de extremo a extremo) slide (se desliza de un lado a otro) scroll (da vueltas o giros) direction=left (izquierda) right (derecha) up (arriba) down (abajo) scrolldelay= indica el tiempo de demora en segundo. Ejemplo:1 <marquee behavior=alternate>texto1</marquee> IMAGEN DE SUSTITUCION --------------------Las imagenes de sustitucion tienen la prioridad de cambiar al darle clic sobre e l objeto cambiando por una imagen de destino. 1. Seleccionar el objeto o imagen de origen 2. Seleccionar el menu insertar 3. Seleccionar objeto de imagen 4. Seleccionar imagen de sustitucion 5. Abrir la imagen de origen 6. Abrir la imagen de destino 7. Seleccionar el boton de aceptar TABLAS ----------Las tablas son un conjunto d celdas que almacenan objetos como textos, imagenes, videos, sondos, etc. Mediante esta herramienta tabla sera necesario contar con filas y columnas con l a finalidad de tener los objetos bien alineados. CREAR TABLAS --------------------1. Seleccionar el menu insertar 2. Seleccionar tabla 3. Ingresar el numero de filas 4. Ingresar el numero de columnas 5. Seleccionar aceptar 03/03/2011 Adobe Dreamweaver CS5 Tema: Herramientas Spry de Acordeon ---------------------------------------------------------------------------------------------------------------------------Esta herramienta tiene la prioridad de permitirnos colocar distintos paneles de areas contenidos de objetos permitiendo recoger o expandir su presentacion al mo mento de darle la pulsacion con el mouse. CREAR REGION ACORDEON -------------------------------------1. Seleccionar el menu insertar 2. Seleccionar Spry 3. Seleccionar Spry de Acordeon EDITAR REGION ACORDEON -------------------------------------1. Seleccionar la region de paneles (color celeste de texto) 2. Seleccionar el icono aadir (+) de etiquetas

3. Cambiar o escribir el titulo o etiqueta del panel QUITAR REGION O PANEL -----------------------------------1. Seleccionar el titulo o etiqueta del panel 2. Seleccionar el icono restar (-) Nota: ------- Dentro de cada contenedor se colocara o trabajar como cualquier pagina no rmal. PANELES DE FICHA SPRY ---------------------------------Los paneles de ficha spry tiene la propiedad de mostrar el contenido de un conte nedor separados por paneles, donde el contenido del otro. El numero de fichas es ilimitado puesto que se puede manipular muchas fichas de ellas. 1. Seleccionar el menu insertar 2. Seleccionar paneles de ficha spry Nota, por defecto se insertaran 2 fichas. AADIR FICHAS SPRY ----------------------------1. Seleccionar la regin del panel 2. Seleccionar el icono de aadir (+) EDITAR FICHAS SPRY -----------------------------1. Seleccionar la etiqueta del Spry 2. Editar o cambiar el nombre de etiqueta BARRAS DE MENU SPRY ---------------------------------Las barras de menu spry se caracterizan por crear 2 modelos como en orden horizo ntal o en orden vertical, permitiendonos vincular los elementos del menu, submen u. 1. Seleccionar el menu Insertar 2. Seleccionar el spry 3. Seleccionar barras de menu spry 4. Seleccionar: Horizontal, vertical, ok AADIR ELEMENTOS DE MENUS -------------------------------------------1. Seleccionar la region del panel de menus 2. Seleccionar el icono de aadir (+) (panel de propiedades) Nota, los elementos pueden ser organizados u ordenados. QUITAR ELEMENTOS ----------------------------1. Seleccionar el elemento (sub elemento) 2. Seleccionar el icono restar (-) VINCULAR ELEMENTOS DE MENUS ------------------------------------------------1. Seleccionar el elemento del menu (submenu) 2. Editar en el campo vinculo, como: http:// (vinculo para paginas web) file:// (vinculo para paginas de archivo de documentos) mailto:// (vinculo para correo electronico) Ejemplo: http://www.idat.com.pe

file://c:trabajo1.html mailto://idat@idat.com.pe Trabajo ----------Elaborar una pagina web teniendo en cuenta lo siguiente: 1. Pagina principal 2. Pagina de envios de mensajes de e-mail 3. Pagina de servicios 4. Pagina de catalogo Nota ------, utilizar las herramientas como capas, regiones en acordeon, menus, ficha s de contenidos