Adobe Dreamweaver CS6 Mg. Carlos Antonio Huamán Terrazas. Presentación Es un programa donde se puede desarrollar páginas Web. El diseño de Web, es un proyecto o planificación de una estrategia de mercado aplicado a Internet, debido a la gran facilidad y flexibilidad de la red para llegar a la mayor cantidad de personas sin importar las distancias. Para ello se cuenta con numerosos recursos y programas como Adobe Dreamweaver CS6 que nos permiten lograr llegar de una manera eficaz a tal objetivo, como por ejemplo crear una página Web de tu promoción de colegio, club deportivo favorito, artista preferido o hasta elaborar una Web Site completa para una empresa. Profesor: Mg. Carlos A. Huamán Terrazas 1
Conceptos previos de diseño de Web En el área de trabajo de Diseño de Web hay muchos conceptos que debemos tener en cuenta, ya que están relacionados directamente y conocerlos será muy importante para el buen aprendizaje de Adobe Dreamweaver CS6. Página Web WebSite o Sitio Web HTML Es un documento electrónico diseñado para el Internet que contiene algún tipo de información como texto, imagen, vídeo, animación u otros que contienen hipervínculos para enlazar una página de otra. Es elconjunto de páginas Web ordenadas jerárquicamente bajo una sola dirección de Internet (URL) Son siglas que al castellano significa Lenguaje Marcado de Hipertextos, básicamente se trata de un conjunto de etiquetas o códigos que sirven para definir la configuración del texto o de otros elementos de la página. La última versión de estas etiquetas es HTML 5. Conceptos previos de diseño de Web Navegador Web Es un programa que nos permite visualizar y movernos en una página Web. FTP Son siglas que al castellano significa protocolo de transferencias de archivos y sirve para enviar y/o recibir archivos de una máquina a otra. Por ejemplo, para enviar y almacenar los archivos de las páginas Web, las cuales son visualizadas en Internet. Hosting En castellano significa hospedar o alojar y sirve para poner una o varias páginas Web a un servidor de Internet, las cuales pueden ser vistas en cualquier lugar del mundo con acceso a Internet. Dominio Es un nombre y dirección de Internet. Profesor: Mg. Carlos A. Huamán Terrazas 2
Estructura de trabajo Para ingresar al Dreamweaver sigue los siguientes pasos: 3 Otra forma de ingresar al Adobe Dreamweaver CS6 Dar clic a Inicio Todos los Programas Adobe Master Collection CS6 Adobe Dreamweaver CS6 2 1 Estructura de pantalla de trabajo Cuando ingrese al Dreamweaver CS6, visualizare lo siguiente: 1 2 3 N Parte Descripción 1 Abrir un elemento existente Aquí se puede abrir las últimas páginas web diseñadas con Adobe Dreamweaver CS6. 2 Crear Nuevo Esta opción nos permite elegir en que perspectiva olenguaje desea trabajar. 3 Elementos destacados En esta sección se muestra las mejoras e innovaciones de Adobe Dreamweaver CS6. Profesor: Mg. Carlos A. Huamán Terrazas 3
Estructura de pantalla de trabajo Al escoger la opción Crear Nuevo HTML, visualizare las siguientes opciones: 1 2 5 3 4 Estructura de pantalla de trabajo N Parte Descripción 1 Barra de menú Muestra los comandos básicos que contienen los programas para Windows, desde como abrir un archivo, como guardar o insertar código, hasta la ayuda que nos proporciona el programa acerca de sus funciones. 2 Barra de herramientas del documento Posee botones que nos permite diferenciar las vistas del documento y también nos deja ver algunos comandos relativos a la visualización del documento. 3 Documento de trabajo Es el área de trabajo de diseño, donde se inserta el texto, imagen, video o animación. 4 Inspector de propiedades Permite examinar y editar las propiedades mas comunes del elemento de la pagina, texto o imagen seleccionada. 5 Panel insertar Contiene botones para crear e insertar objetos como tablas, imágenes o vínculos y están organizados por categoría: Común, Diseño y Formulario, entre otros Profesor: Mg. Carlos A. Huamán Terrazas 4
Estructura de pantalla de trabajo Barra de representación de estilos. Contiene botones que permite ver como aparecería el diseño en distintos tipos de medios si se utiliza hojas de estilos dependientes de los medios. 1 Para habilitarla debemos: 1. Clic derecho. 2. Escoger Representación de estilos. 2 Mi primera página Web Titulo en la barra de título. Profesor: Mg. Carlos A. Huamán Terrazas 5
Mi primera página Web Tipos de visualización Mi primera página Web Tipos de visualización Profesor: Mg. Carlos A. Huamán Terrazas 6
Usar etiqueta HTML Si deseas ver todo el código fuente HTML (el código de programación interno de la página Web) que se genera automáticamente, debes realizar el siguiente paso: Usar etiqueta HTML Escribir código HTML Cuando estás en la vista de Etiqueta HTML, puedes escribir en ella, este formato se llama formato de programación y debes saber los códigos de programación que quieres que se ejecuten en la página Web, para ello realiza los siguientes pasos: Profesor: Mg. Carlos A. Huamán Terrazas 7
Formato de texto En Adobe Dreamweaver CS6 hay herramientas que te ayudan a dar formato de texto de forma muy sencilla ya que se aplican formatos predeterminados, para aplicarlos realiza los siguientes pasos: Propiedades de página Adobe Dreamweaver CS6 brinda una gama de ventajas para hacer que la página Web que estas diseñando quede muy vistosa y con apariencia profesional, como dar color, tamaño, formato de fuente al texto, insertar imagen de fondo, aplicar color de fondo de página, vínculos, entre otros. Para ingresar a las propiedades de mi página web debo hacer lo siguiente: Profesor: Mg. Carlos A. Huamán Terrazas 8
Aplicar imagen de fondo Las imágenes de fondo dan una apariencia más profesional y atractiva a tu página Web. Para aplicar imagen de fondo realiza los siguientes pasos: Guardar página Web Luego de haber creado la página web, esta puede ser previsualizada en un navegador Web. Para ello, primero debemos guardar la página Web. Luego de guardar, puedes previsualizar tu página Web en un navegador, yendo a la opción Archivo Vista previa en el navegador escoge el navegador o presionando la tecla F12 Profesor: Mg. Carlos A. Huamán Terrazas 9