DISEÑO DE PAGINAS WEB. PLAN DE TRABAJO 1. 1. 1. ESPACIO DE TRABAJO Y GESTIÓN DE ARCHIVOS 1.1 Conocer la interfaz de usuario del programa 1.1.1 Gestionar.

Presentación del tema: "DISEÑO DE PAGINAS WEB. PLAN DE TRABAJO 1. 1. 1. ESPACIO DE TRABAJO Y GESTIÓN DE ARCHIVOS 1.1 Conocer la interfaz de usuario del programa 1.1.1 Gestionar."— Transcripción de la presentación:

1 DISEÑO DE PAGINAS WEB

2 PLAN DE TRABAJO 1. 1. 1. ESPACIO DE TRABAJO Y GESTIÓN DE ARCHIVOS 1.1 Conocer la interfaz de usuario del programa 1.1.1 Gestionar los conjuntos de paneles 1.2 Crear nuevos documentos 1.3 Ver distintos archivos a la vez 1.4 Alternar entre las vistas de diseño y de código 1.5 Elementos básicos de una página web 1.6 Uso de comandos básicos en Dreamweaver

3 Introducción a Dreamweaver ¿Que es Dreamweaver?  Dreamweaver es un editor HTML que contiene herramientas potentes para asegurar un diseño de alta calidad en la creación, edición y gestión de páginas web.  Con esta herramienta se pueden crear tablas, marcos, capas, insertar comportamientos JavaScript, videos, etc.  Dreamweaver incluye su propio FTP con el cual se puede actualizar de manera rápida y sencilla el servidor donde se encuentre hospedado el sitio.

4 Página de Inicio

5 1.1 Conocer la interfaz de usuario del programa

6 AREAS MAS UTILIZADAS

7 ELEMENTOS PRINCIPALES DEL ENTORNO D ETRABAJO

8

9

10

11 ESPACIOS DE TRABAJO

12 VENTANA DEL DOCUMENTO

13 VISTAS RELATIVAS DEL CÓDIGO

14 VENTANA DEL DOCUMENTO

15 PANEL DE ARCHIVOS

16 PANEL DE ACTIVOS

17 CATEGORIA COMUN DEL PANEL INSERTAR

18

19

20 CATEGORIA DISEÑO DEL PANEL INSERTAR

21 CATEGORIA DISEÑO

22

23 PROPIEDAD IMPORTANTE

24 INSPECTOR DE PROPIEDADES

25 OPCIONES DEL PANEL DE ESTILOS CSS

26

27 Barra Insertar Contiene Iconos que representan los elementos que podemos agregar a nuestra página Web. Esta dividida por categorías que se dividen en fichas (Diseño, Formularios, Datos, Texto, etc) I NSPECTOR DE PROPIEDADES Se encuentra en el inferior de la ventana. Aquí se encuentran las opciones del texto, fuente, tamaño, posición, color, etc. Es versatil, p.e. si agregamos una tabla este cambia sus propiedades por las de la tabla para poder ajustar el tamaño, ancho del borde, etc. Si se llega a cerrar hacemos lo siguiente: Ventana  Propiedades

28 Barra de documento. Tiene varios menús Tiene diferentes vistas Título de la página Descargar archivos del servidor Visualizar en un explorador L OS PANELES. Contiene información sobre acciones que ejecutamos en nuestra página. Mediante las flechas podemos acceder a cada propiedad de ellos

29 Definir Sitios Locales Definir un sitio local es un proceso previo a la creación de cualquier página individual el cual consiste en especificar una carpeta (denominada – Carpeta Raíz Local) del disco duro, esta carpeta será la base de toda la estructura de archivos y carpetas que serán utilizados dentro del sitio Web (páginas, imágenes, archivos, etc.) En el panel Archivos administra todos las carpetas y archivos de los sitios locales o remotos que se especifiquen en Dreamweaver. En este panel, se pueden crear, eliminar, copiar y mover archivos y carpetas. Panel Archivos

30 ¿Cómo Definir un Sitio Local? 1)Utilizar la opción Administrar Sitios..  Esta opción nos permitirá:  Especificar un Nuevo Sitio  Editar la configuración de un Sitio  Quitar un Sitio  Duplicar un Sitio  Importar y Exportar un Sitio  Cambiar de Sitios 2)Usar la opción Nuevo  Se puede utilizar las siguientes formas: a)Básica (Wizard) b)Avanzada 3)Definir las opciones del sitio (Básica)  Nombre del Sitio  Tecnología del Servidor (ASP *versiones, PHP, JPS ColdFusion, My Sql)  Ruta y Forma de editar los archivos durante el desarrollo  Local  Directamente en el Server  Forma de la conexión al Servidor Remoto

31 Cambiar de Sitio Se puede seleccionar un sitio de los que ya se hayan establecido en Dreamweaver de las siguientes formas: a)Mediante la opción Administrar Sitios b)Mediante el Panel Archivos

32 Crear una Nueva Página Para crear una nueva página puede hacer uso de las siguientes formas: a)Uso de la Opción Nuevo  Mediante esta opción puede agregar nuevos documentos de tipo:  HTML  Hojas de Estilo en Cascada (CSS)  Documentos de JavaScript y VbScript  Documentos XML  Páginas Dinámicas compatibles con lenguajes de Java,ColdFusion, ASP y PHP b)Uso del Panel de Archivos

33 Guardar Documentos En el momento que se agregue un Nuevo Documento, es necesario almacenarlo inmediatamente, ya que de esta manera todas las rutas de referencia a los archivos y vínculos que se agreguen al documento, se establecerán de manera correcta, de lo contrario se presentarán vínculos rotos y errores dentro de un documento o todOs los documentos del sitio. Los documentos se deberán almacenar con la extensión.html

34 Entorno de Trabajo

35 Barra Insertar La barra INSERTAR es la principal herramienta que utiliza Dreamweaver para el diseño de las páginas, la cual esta organizada de la siguiente manera:  Común  Diseño  Formularios  Texto  HTML  Aplicación  Elementos de Flash  Favoritos

36 Panel Propiedades Este panel se utiliza para ver y modificar los atributos de los siguientes elementos:  Textos  Imágenes  Tablas  Frames  Elementos de Flash  Otros Elementos. Los atributos disponibles dentro del panel, cambiarán dependiendo del elemento seleccionado.

37 Configurar el Titulo de la Página Para definir el título de la página (el título que aparece en la barra de título del navegador), puede hacerlo de la siguiente manera: a)Barra de herramientas DOCUMENTO. b)Uso de la Opción de “Propiedades de la Página”

38 Especificar el Tamaño de la página Tamaño de la Página  Para el diseño de una página se debe tomar en cuanta la resolución que comúnmente los usuarios tengan configurado en una PC. Las resoluciones mas comunes son:  800 x 600 px  1024 x 768 px  Para un diseño de un sitio a una resolución de 800 x 600 píxeles se deberá diseñar en base a las siguientes medidas:  Ancho: 750 px  Alto: 440 px o según lo largo de la página

39 Previsualización de las Páginas Para previsualizar una página en el navegador se utliza: a)Menú Archivo/Vista Previa en el Navegador Dreamweaver permite configurar varios navegadores que se pueden utilizar en la previsualización.

40 Propiedades Básicas de la Página

41 Encabezados Los encabezados son formatos predefinidos que son aplicados a un texto que se desea resaltar como en el caso de títulos y subtítulos.

42 Insertar Textos A medida que introduzca texto y aplique formato en la vista Diseño, Dreamweaver creará el código HTML subyacente para la página. Con los textos se pueden aplicar los siguientes atributos:  Interlineados  Salto con Interlineado Sencillo  Salto con Interlineado Doble  Definir el formato predeterminado de las fuente en toda la página  Formatos  Fuente  Tamaño  Color  Estilos  Formatos de Párrafo  Alineación  Sangría

43 Formatos de Textos Para aplicar formatos a un texto se utiliza el panel Propiedades, en el cual podrá definir los siguientes formatos:  Fuente  Párrafo

44 Creación de Listas Dreamweaver crea 3 tipos básicos listas:  Ordenadas  Sin Ordenar  Definición

45 Imágenes Las imágenes que utiliza Dreamweaver son:  JPG (Join Photographic Expert Group)  Este formato es recomendable para imágenes fotográficas o imágenes con una mayor gama de tonalidades o para imágenes con degradados de alta calidad. Este formato no puede tener transparencias ni animaciones.  GIF (Graphic Interchange Format)  Este formato es el mas recomendable para imágenes de colores uniformes (sin degradados), este formato tiende a descargarse mas rápido por su formato comprimido. Permite tener transparencia y animaciones.  PNG (Portable Network Graphic)  Este formato comparte características de JPG y GIF, no pierde calidad, se comprimen mas que los GIF y conserva todos los colores como el JPG, pero el formato PNG no tiene animaciones y aun no lo soportan algunos navegadores y servidores..

46 Insertar Imágenes Para insertar una imagen se puede realizar de las siguiente formas:  Mediante la Barra Insertar  Mediante la Opción Insertar Imagen

47 Modificar los Atributos de la imagen Mediante el Panel Propiedades se puede modificar características como:  Ancho y Alto  Posición Vertical y Horizontal  Archivo de Origen  Texto Alterno  Bordes  Alineación de la Imagen  Edición y Efectos de Imágenes  Vínculos

48 Imágenes Cambiantes Dreamweaver permite cambiar una imagen por otra al momento de situar el puntero del mouse sobre la imagen (Rollover). Para un Rollover es recomendable trabajar con imágenes que tengan el mismo tamaño.

49 Vínculos En Dreamweaver se pueden especificar los siguientes tipos de vínculos:  Links Absolutos  Vínculos que marcan la ruta completa para llamar a un archivo especifico dentro del mismo sitio o en otros.  Ejemplo 1: »http://www.aulafacil.com/word/temario.htm  Ejemplo 2: »C:\Mis Documentos\web\pagina2.htm  Links Relativos  Vínculos que se especifican solo colocando el nombre del archivo al que se desea llamar, tomando como base la ruta de la carpeta donde se encuentre almacenado el archivo actual.  Ejemplos: »archivo.htm »carpeta/archivo.htm ».. /archivo.htm

50 Vínculos  Links a un e-mail  Ejemplo:  mailto:lmoreno@ccpm.com.mx  Links a una Ancla  Vinculo que se hace hacia cualquier lugar dentro de la misma página o a otro lugar especifico de otra página.  Ejemplo 1: »#nombredelancla  Ejemplo 2: »Pagina2.htm#nombredelancla  Ejemplo 3: »http://www.sitio.com/pagina2.htm#nombredelancla

51 Insertar Vínculos Para Insertar vínculos relativos, absolutos y correo electrónico, se puede realizar desde:  Panel Propiedades  Panel Insertar

52 Insertar Vínculos Las anclas son marcas con un nombre definido por el usuario, lo cual permiten crear vínculos a dichas marcas, generando un desplazamiento hacia esas marcas. Las características del nombre de una ancla son:  Deben ser únicos dentro de la página  No utilizar espacios ni signos especiales.  Recomendable el uso de letras minúsculas Al hacer un vinculo hacia una ancla, se debe anteponer el signo # al nombre de la ancla.  Ejemplo:  #contenido  #tema1

53 Mapas Sensibles Los mapas sensibles permiten dividir una imagen en varias secciones con vínculos. Los mapas son definidos mediante un trazo sobre una imagen con las siguientes herramientas:  Zona Interactiva Rectangular  Zona Interactiva Oval  Zona Interactiva Poligonal

54 Crear albums de fotos Dreamweaver tiene la facilidad de crear albums de fotografías apartir de una carpeta de imágenes. Dreamweaver además crea páginas y vínculos por cada una de las imágenes que se encuentre en la página principal del album.

55 Películas y Sonidos Videos  En Dreamweaver se pueden insertar videos de los dos formatos mas conocidos:  Videos de Windows Media  QuickTime Sonidos  Los sonidos pueden insertados como fondo de la página o con controles de reproducción a través de un Plug-in. Los formatos mas comunes de sonido son:  Mp3  Wav  Midi

56 Hojas de Estilo Hoja de Estilo en Cascada (Cascading Style Sheet)  Un estilo es un grupo de atributos de formato identificados por un solo nombre que es el encargado de comunicar al navegador como mostrar un elemento.  Ventajas de los Estilos:  Facilita el empleo de formatos a un texto y la actualización de los mismos con solo modificar un estilo.  Un estilo puede ser utilizado en:  Solo en el documento donde fue creado  En todas las páginas de un sitio, ya que los estilos se guardan en un archivo externo (*.css) y son llamados desde el archivo.html  Un estilo puede ser reutilizado en otros sitios.

57 Creación de Estilos Un estilo se puede crear de diferentes maneras:  Panel Propiedades  Panel Estilos CSS  Panel Inspector de Etiquetas  Opción Estilos CSS del menú Texto

58 Tablas Una tabla es la herramienta principal para realizar un mejor diseño de una página web. La mayoría de las páginas web están diseñadas en base a tablas. Una Tabla esta conformada por filas y columnas, la intersección entre estas forman una celda. Las Tablas contienen las siguientes propiedades:  Propiedades Generales (Para toda una tabla)  Propiedades Particulares (Para cada celda)

59 Propiedades de las Tablas Propiedades Generales  No. Columnas  No. Filas  Ancho y Alto de la Tabla  Color de Fondo  Imagen de Fondo  Ancho y Color de los Bordes  Alienación de la Tabla  Espacio entre celdas (Espacio en Celda)  Margen Interno de las Celdas (Espacio entre Celdas) Propiedades Particulares  Alineación dentro de la Celda  Ancho y Alto de la Celda  Imagen y Color de Fondo de la Celda  Color del Borde de la Celda  Combinar una Celda  Dividir una Celda

60 Insertar Tablas Una tabla puede ser insertada de la siguiente forma: a)Menú Insertar / Tabla b)Mediante la Barra Inserta c)Importada Una tabla puede contener:  Texto  Imágenes  Botones  Elementos Flash  Otras Tablas

61 Formato de Tablas Se le pueden aplicar propiedades a una tabla o las celdas por medio del panel Propiedades  Propiedades de la Tabla  Propiedades de las Celdas

62 Comportamientos sobre Imágenes Un comportamiento común sobre una imagen es una acción llamada Rollover, la cual permite cambiar una imagen por otra al momento de posicionar el puntero del mouse encima de una imagen. Existen dos tipos de rollovers que se pueden realizar en Dreamweaver:  Normal  Cambia solamente una imagen por otra  Avanzada  Cambia mas de una imagen situada en cualquier parte de la página.

63 Capas Las capas permiten colocar cualquier tipo de elementos en cualquier parte de la pantalla de manera flotante. Las capas pueden estar visibles u ocultas y se puede cambiar su estado en cualquier momento.

64 Animaciones en Dreamweaver En Dreamweaver se pueden crear animaciones sencillas, ya que dreamweaver contiene un panel de línea de tiempo en la cual se pueden especificar trayectos y tiempo de duración a las animaciones. Las animaciones se pueden aplicar solamente a las capas y solo esta disponible para la actualización 1.0.1

65 Menús Desplegables Dreamweaver contiene una herramienta muy sencilla para el diseño de menús desplegables. Los menús pueden ser Horizontales o Verticales Para la creación de un menú se utiliza el comportamiento Mostrar Menú Emergente

66 Ventanas Pop-Up Son ventanas que se abren inmediatamente al entrar a la página de un sitio.

67 Frames (Marcos) Marcos  Los marcos son estructuras dinámicas que permiten la organización de la información de una página web. Los marcos básicamente permiten dividir la ventana de un navegador en varias regiones, cada una de las cuales puede mostrar un documento HTML diferente  Los marcos pueden ser áreas de contenidos (cambiantes) o áreas estáticas de una página. Conjunto de Marcos  Es un archivo.html que indica al navegador el estructura, diseño y propiedades que tendrá cada uno de los marcos que se visualizarán en la página, tales como:  Número de Marcos  Tamaño de los Marcos  Ubicación de los Marcos  Archivo.html que se visualizará inicialmente dentro de cada frame  Entre otras propiedades.

68 Frames (Creación) Crear un Conjunto de Frames  Se puede insertar un conjunto de marcos de varios diseños predefinidos de Dreamweaver. Para esto de puede relizar por medio de las siguientes formas.  Menú Archivo  Menú Insertar  Botón Marcos de la Barra Insertar Insertar Frames  Es posible insertar manualmente frames dentro de un documento ya existente mediante las siguientes opciones:  Menú Insertar  Botón Marcos de la Barra Insertar  Arrastrando con el mouse de los bordes del área del documento hacia adentro (es necesario contar previamente por lo menos con un frame)

69 Frames (Propiedades) Los frames tienen las siguientes propiedades:  Propiedades del Conjunto de Marcos  Numero de Filas y Columnas  Tipo, ancho y color de Bordes  Tamaño de la Fila o columna  Pixeles  Porcentaje  Relativo  Propiedades de los Frames  Nombre del Frame  Archivo de Origen  ScrollBars  Tipo y Color del Borde  Ancho y Alto del Margen  No Resize

70 Formularios Los formularios permiten solicitar y recibir información proporcionada por los usuarios que visiten un sitio web. Los formularios están compuestos por campos, los cuales pueden ser del siguiente tipo:  Texto  Botones de Opción  Casillas de Verificación  Menús  Listas

71 Funcionamiento de los Formularios Los datos del formulario pueden ser enviados a los siguientes destinos:  A una Base de Datos en un servidor  A un correo electrónico  A una Aplicación que procesará la información Para que se lleve a cabo este proceso es necesario crear aplicaciones que puedan procesar la información enviada por los formularios. Algunas aplicaciones están desarrolladas en los siguientes lenguajes:  PHP  ASP  Perl  JPS  ColdFusion

72 Creación de un Formulario Para crear un formulario se utiliza la Barra Insertar / Formulario o el menú Insertar.  Insertar el área de Formulario  Configurar el área del formulario.  Dentro del área del formulario insertar los controles.  Configurar los Controles.  Colocar Botones de Envió y Restauración. NOTA: Los nombres que se les asignen a los controles debe ser iguales a las variables utilizadas en la aplicación que procesará los datos (CGI, ASP o PHP).

73 Validación de Formularios Es un comportamiento que comprueba los datos introducidos en los campos por parte del usuario por medio de reglas que se pueden establecer para cada campo (Regla de Validación). En caso de que los datos introducidos en un campo no cumpla con la regla de validación se visualizará en pantalla un mensaje de error. La validación se puede realizar de dos formas:  Validación Campo por Campo.  Validación de todo el formulario.

74 Contenidos del Head Entre las etiquetas Head, se pueden establecer ciertas propiedades que no son visibles en la página web (a excepción del título de la página). Las propiedades de cabecera mas utilizadas son:  Meta  Palabras Clave  Descripción  Actualizar Para ver los contenidos del Head, se pueden utilizar las siguientes opciones:  Menú Ver  Botón de Vistas

75 Plantillas Una plantilla es un documento que se puede utilizar como base para la creación de otros documentos. Cada documento basado en una plantilla utiliza el mismo diseño y estructura que la plantilla Al modificar la plantilla, se actualizan automáticamente todas las páginas web basadas en esa plantilla. Una plantilla contiene las siguientes zonas:  Región Editable  Región No editable (Bloqueda)  Región Opcional  Región Repetida

76 Elementos Flash En Dreamweaver se pueden insertar elementos flash como:  Botones Flash  Textos Flash  Animaciones de Flash (.swf) Para insertar cualquier elemento de este tipo, utilizar la barra Insertar / Común

77 Publicar un Sitio Para publicar un sitio es necesario contar con los siguientes requerimientos:  Servidor (Local o Internet Server)  Contar con una cuenta y password para accesar al Servidor  Crear en el Servidor la misma estructura de archivos a la del sitio que se tiene en Dreamweaver  Contar con un dominio de internet (www.dominio.com)www.dominio.com  Tener un servicio de transferencia de archivos (FTP o FileManager)  Servicio de SQL o algún manejador para Bases de Datos  Server, PHP o CGI Al publicar un sitio hay que tomar en cuenta todos los archivos que se utilizaron en el sitio:  Imágenes  Elementos de Flash  Hojas de Estilos  Videos  Scripts  CGI o PHP´s  Etc, etc.