Coordinación de Informática Diseño de Páginas Web Manual del Participante
PRESENTACIÓN El Instituto Mexicano del Seguro Social conjuntamente con el Sindicato Nacional de Trabajadores del Seguro Social, comprometidos con la calidad en la superación y actualización del personal, impulsan la Capacitación en materia de Informática, Humanística, Promocional y de programas institucionales que se vinculen a la solución de los problemas en la operación, favoreciendo el otorgamiento de servicios de calidad. En ese contexto la coordinación de informática del Centro Nacional de Capacitación y Calidad comprometida con su modelo educativo se propone el desarrollo de materiales didácticos para el apoyo y mejor aprovechamiento de los participantes. A continuación se presenta el Material de Apoyo Didáctico del Participante Diseño de Páginas WEB, el cual fue desarrollado bajo estrictas normas pedagógicas y didácticas esto con el firme propósito de cumplir su objetivo, el apoyo al participante. 2 MÓDULO I
Contenido MÓDULO I INTRODUCCIÓN... 9 1.1 CONCEPTOS... 9 1.1.1 Página Web... 9 1.1.2 Sitio Web... 10 1.1.3 Portal... 11 1.2 ESTRUCTURAS... 11 1.2.1 Estructura lineal:... 11 1.2.2 Estructura jerárquica:... 12 1.2.3 Estructura centralizada:... 12 1.2.4 Estructura libre:... 13 MÓDULO II INTRODUCCIÓN HTML... 14 2.1 HTML... 14 2.1.1 Etiquetas en un documento HTML... 14 2.1.2 Etiquetas llenas... 15 2.1.3 Etiquetas con argumento... 15 2.1.4 Estructura de una Pagina WEB.... 16 2.2 FUENTE... 17 2.2.1 Tamaño y tipos de fuente... 17 2.2.2 Formato de texto Negritas, Itálicas, Subrayado:... 17 2.2.3 Color... 18 2.3 PÁGINA... 18 2.3.1 Fondo de página... 18 2.4 PÁRRAFO... 19 2.4.1 Cambios de párrafo:... 19 2.4.2 Cambios de línea:... 19 2.4.3 Alineación de texto:... 19 2.4.4 Divisiones de texto:... 20 2.4.5 Tabulaciones:... 20 3 MÓDULO I
2.4.6 Enmarcado... 20 2.5 TABLAS... 21 2.5.1 Definir tabla... 21 2.5.2 Definir fila... 21 2.5.3 Definir celda... 21 2.5.4 Definir encabezado... 21 2.6 HIPERVÍNCULOS... 22 2.6.1 Vínculos a un Archivo... 22 2.6.2 Vínculos a URL s... 22 2.6.3 Vínculos en imágenes... 22 2.7 IMÁGENES... 23 2.7.1 Imagen alineada a la izquierda... 23 2.7.2 Imagen con un texto alternativo... 23 2.7.3 Imagen alineada a la derecha... 23 2.7.4 Imagen redimensionada a más... 24 2.7.5 Imagen redimensionada a menos... 24 2.7.6 Imagen alineada a la izquierda con marco... 24 2.8 MULTIMEDIA... 24 2.8.1 Sonido... 24 2.8.2 Multimedia con el Media Player de Windows... 25 MÓDULO III INTRODUCCIÓN A DREAMWEAVER... 26 3.1 REQUERIMIENTOS... 27 3.1.1 Requisitos mínimos necesarios... 27 3.1.2 Entrar a Dreamweaver... 27 3.2 INTERFAZ DEL USUARIO... 28 3.2.1 Barra de título:... 28 3.2.2 Barra de Menús:... 28 3.2.3 Barra de herramientas insertar:... 28 3.2.4 Grupo de paneles:... 29 3.2.5 Selector de Etiquetas... 29 3.2.6 Panel propiedades:... 29 4 MÓDULO I
3.2.7 Común:... 29 3.2.8 Diseño:... 29 3.2.9 Formularios:... 29 3.2.10 Texto... 29 3.2.11 HTML:... 29 3.2.12 Aplicación:... 29 3.2.13 Elementos flash:... 29 3.2.14 Favoritos... 29 3.2.15 Ventana de documento... 30 3.2.16 Barra de documento... 30 3.2.17 Panel de propiedades... 31 3.3 DOCUMENTO... 32 3.3.1 Configuración... 32 3.3.2Reglas... 34 3.3.3 Cuadrícula... 35 3.3.4 Pre visualización... 36 3.3.5 Guardar como... 36 3.3.6 Crear documentos... 38 3.3.7 Abrir documento... 38 3.4 TEXTOS... 39 3.4.1 Insertar texto... 39 3.4.2 Formato de texto:... 40 3.4.3 Color... 40 3.4.4 Tipo de fuente... 40 3.4.5 Tamaño... 41 3.4.6 Negrita... 41 3.4.7 Itálica... 41 3.4.8 Alineación... 42 3.4.9 Texto Flash... 42 3.5 IMÁGENES... 43 3.5.1 Insertar imagen... 43 5 MÓDULO I
3.5.2 Editar imagen... 44 3.5.3 Cambiar tamaño... 45 3.5.4 Texto alternativo... 45 3.5.5 Alineación... 46 3.5.6 Bordes... 46 3.5.7 Imagen de sustitución... 47 3.6 TABLAS... 47 3.6.1 Crear tablas... 48 3.6.2 Modificar tablas... 49 3.6.3 Fondo de tabla... 49 3.6.4 Color a una celda... 49 3.6.5 Bordes de tabla... 50 3.6.6 Insertar columnas y filas... 50 3.6.7 Combinar celdas... 51 3.6.8 Dividir celdas... 51 3.6.9 Insertar texto e imágenes... 52 3.7 VÍNCULOS... 52 3.7.1 Vínculo en Texto... 52 3.7.2 Vínculo en Imágenes... 53 3.7.3 Vínculo a Correo Electrónico... 53 3.7.4 Botones Flash... 54 3.7.5 Zona interactiva... 55 6 MÓDULO I
Este material de apoyo didáctico para el participante está estructurado de la siguiente forma para su mejor comprensión: MÓDULO I INTRODUCCIÓN: En este módulo se verán conceptos tales como página web, sitio y portal con el objeto de que usted pueda distinguir entre los conceptos antes mencionados, así como su aplicación en la World Wide Web, además sabremos que para poder crear alguna aplicación basada en la web es necesario definir una estructura, esto es saber como van a estar vinculadas las páginas entre sí. MÓDULO II INTRODUCCIÓN HTML: En este módulo veremos etiquetas básicas del lenguaje HTML, (Hyper Text Markup Language), el cual se utiliza para la creación de páginas web, que no solo incluyen texto, ya que esto le da una apariencia plana, con este sencillo lenguaje usted puede incluir imágenes, sonidos, videos y por si fuera poco las animaciones creadas en Flash, con el objeto de que nuestro sitio tenga un mejor aspecto. MODULO III DREAMWEAVER: Macromedia Dreamweaver es solo un editor de código HTML profesional para el desarrollo de páginas Web. Tanto si estamos habituados en trabajar directamente con el código, como si prefiere un entorno de edición visual fácil de manejar, Dreamweaver es realmente la herramienta que nos permitirá trabajar del mismo modo que hacen los diseñadores Web profesionales. En este módulo veremos la interfaz, como trabajar con texto, imágenes, tablas, vínculos, videos y animaciones en Flash. 7 MÓDULO I
Diseño de Páginas Web Objetivo General: Al concluir el curso el participante operará un editor de código HTML, para el diseño de páginas web. Dirigido A: Personal IMSS SNTSS que tengan dentro de sus labores la innovación y desarrollo tecnológico basados en plataforma WEB, para facilitar el desempeño laboral. Perfil de Ingreso: El participante deberá contar con los cursos Introducción al Uso y Operación de las Microcomputadoras, Windows XP, además de tener conocimientos básicos del lenguaje HTML y gusto por el diseño de interfaces bajo plataforma WEB. 8 MÓDULO I
MÓDULO I INTRODUCCIÓN Objetivo: Al finalizar el modulo I el participante reconocerá las diferencias entre pagina web, sitio y portal, además conocerá las estructuras de un página web permitiéndole estructurar y desarrollar la misma de forma eficiente. Introducción: En la actualidad se habla de las Paginas Web, de sitios y de portales, por ese motivo en este módulo se explicara brevemente las diferencias que existen entre estos conceptos. Cuando nos disponemos a desarrollar un página Web es de vital importancia la estructura que esta vaya a tener esto dependerá de las necesidades que la organización tenga. Para obtener resultados óptimos, necesitaremos diseñar y planificar el sitio Web antes de crear las páginas que va a contener. Una vez que sepamos diferenciar ente sitio, página y portal Web veremos las estructuras las cuales son: Estructura lineal, Estructura jerárquica, Estructura centralizada y Estructura libre. A continuación definiremos lo que es: Página WEB, Sitio WEB y Portal. 1.1 CONCEPTOS 1.1.1 Página Web Una página de Internet o página Web es un documento electrónico que contiene información específica de un tema en particular y que es almacenado en algún sistema de cómputo que se encuentre conectado a la red mundial de información denominada Internet, de tal forma que este documento pueda ser consultado por cualesquier persona que se conecte a esta red mundial de comunicaciones y que cuente con los permisos apropiados para hacerlo. Una página Web es la unidad básica del World Wide Web. 9 MÓDULO I
Una página Web tiene la característica peculiar de que el texto se combina con imágenes para hacer que el documento sea dinámico y permita que se puedan ejecutar diferentes acciones, una tras otra, a través de la selección de texto remarcado o de las imágenes, acción que nos puede conducir a otra sección dentro del documento, abrir otra página Web, iniciar un mensaje de correo electrónico o transportarnos a otro Sitio Web totalmente distinto a través de sus hipervínculos. Estos documentos pueden ser elaborados por los gobiernos, instituciones educativas, instituciones públicas o privadas, empresas o cualquier otro tipo de asociación, y por las propias personas en lo individual. 1.1.2 Sitio Web Es un conjunto de archivos electrónicos y páginas Web referentes a un tema en particular, que incluye una página inicial de bienvenida, generalmente denominada home page, con un nombre de dominio y dirección en Internet específicos. Empleados por las instituciones públicas y privadas, organizaciones e individuos para comunicarse con el mundo entero. En el caso particular de las empresas, este mensaje tiene que ver con la oferta de sus bienes y servicios a través de Internet, y en general para eficientar sus funciones de mercadotecnia. Su Sitio Web no necesariamente debe localizarse en el sistema de cómputo de su negocio. Los documentos que integran el Sitio Web pueden ubicarse en un equipo en otra localidad, inclusive en otro país. El único requisito es que el equipo en el que residan los documentos esté conectado a la red mundial de Internet. Este equipo de cómputo o Servidor Web, como se le denomina técnicamente, puede contener más de un sitio Web y atender concurrentemente a los visitantes de cada uno de los diferentes sitios. Al igual que los edificios, oficinas y casas, los Sitios Web requieren de una dirección particular para que los usuarios puedan acceder a la información contenida en ellos. Estas direcciones, o URLs por sus siglas en inglés (Uniform Resource Locator), aparecen cotidianamente en todos los medios de comunicación como son prensa escrita, radio, televisión, revistas, publicaciones técnicas y en el propio Internet a través de los motores de búsqueda (por su denominación en inglés search engines). 10 MÓDULO I
Los nombres de estos sitios Web obedecen a un sistema mundial de nomenclatura y están regidos por el ICANN (Internet Corporation for Assigned Names and Numbers). Los Sitios Web pueden ser de diversos géneros, destacando los sitios de negocios, servicio, comercio electrónico en línea, imagen corporativa, entretenimiento y sitios informativos. 1.1.3 Portal Portal es un término, sinónimo de puente, para referirse a un Sitio Web que sirve o pretende servir como un sitio principal de partida para las personas que se conectan al World Wide Web. Son sitios que los usuarios tienden a visitar como sitios ancla. Los portales tienen gran reconocimiento en Internet por el poder de influencia que tienen sobre grandes comunidades. La idea es emplear estos portales para localizar la información y los sitios que nos interesan y de ahí comenzar nuestra actividad en Internet. Un Sitio Web no alcanza el rango de portal sólo por tratarse de un sitio robusto o por contener información relevante. Un portal es mas bien una plataforma de despegue para la navegación en el Web. 1.2 ESTRUCTURAS 1.2.1 Estructura lineal: Antes del nacimiento de la World Wide Web, la mayoría de los formatos visuales eran lineales, es decir, una página seguí a la otra a lo largo de una secuencia inalterable. Este modelo hoy en día todavía es muy usado para crear aplicaciones de enseñanza. Página Principal Página 1 Página 2 Página 3 11 MÓDULO I
1.2.2 Estructura jerárquica: En este modelo, tomamos como punto de partida una página de inicio, desde la cual podremos acceder al resto de las páginas del sitio. Los sitios con estructura jerárquica ayudan a proporcionar un mejor sentido sobre la orientación de nuestro sitio Web. Página Principal Tema A Tema B Tema C Apartado A1 Apartado A2 Apartado C1 Apartado C2 Apartado C3 1.2.3 Estructura centralizada: Este tipo de navegación esta basado en una página central de inicio a la que vincularemos el resto de las páginas principales del sitio. El principal inconveniente de este modelo es tener que pasar constantemente por la página principal para ir a otra zona. Página Principal Página Principal Página Principal Página Principal Página Principal Página Principal Página Principal Página Principal Página Principal 12 MÓDULO I
1.2.4 Estructura libre: Esta última estructura nos permite aprovechar al máximo la funcionalidad de los hipervínculos permitiéndoles que prácticamente cualquier página pueda conectarse a cualquier otra de nuestro sitio. Como principal inconveniente del uso de este método es la pérdida del internauta durante la navegación. 13 MÓDULO I
MÓDULO II INTRODUCCIÓN HTML Objetivo: Al finalizar el módulo II el participante empleará las etiquetas básicas del lenguaje de marcas de texto (HTML) permitiéndole estructurar una página web. Introducción: El HTML (Hyper Text Markup Language) es un lenguaje que sirve para escribir hipertexto, es decir, documentos de texto presentado de forma estructurada, con enlaces (links) que conducen a otros documentos o a otras fuentes de información (por ejemplo bases de datos) que pueden estar en tu propia máquina o en máquinas remotas de la red. Todo ello se puede presentar acompañado de cuantos gráficos estáticos o animados y sonidos seamos capaces de imaginar. Por supuesto, la estética de los documentos escritos en HTML no se limita a texto digamos normal; consigue todos los efectos que habitualmente se pueden producir con un moderno procesador de textos: negrita, cursiva, distintos tamaños y fuentes, tablas, párrafos tabulados, sangrías, incluso texto y fondo de página de colores, y muchos más. Pero esto es bastante sencillo de conseguir. Qué necesitas para empezar? pues solamente un editor de texto cualquiera (desde Word al humilde "Bloc de notas" de Windows), un visualizador WWW como internet explorer, netescape o mozilla entre otros. 2.1 HTML 2.1.1 Etiquetas en un documento HTML En el transcurso de este manual a las instrucciones que conforman el lenguaje HTML les llamaremos Tags o bien en español Etiquetas, la notación de los elementos consiste en los símbolos < y >, los cuales encierran dentro de ellos una instrucción. 14 MÓDULO II
2.1.2 Etiquetas llenas Se forman escribiendo la instrucción correspondiente seguida del texto al que se quiere aplicar la instrucción y se termina repitiendo la instrucción pero con una barra inclinada inmediatamente antes de la misma. Por ejemplo, el elemento H1 que sirve para dar el máximo tamaño al texto, se escribirá: <H1> Texto de prueba </H1>. Y este sería el resultado: Texto de prueba NOTA: Si olvidas poner </H1> todo el resto de la página tendrá el mismo tamaño grande. 2.1.3 Etiquetas con argumento Algunas de las etiquetas se escriben con argumento. Es como pasarle parámetros a la instrucción, y se llaman atributos del elemento. Por ejemplo, el elemento <A> que sirve para hacer un link (enlace) con otro documento o con otra página del actual, se escribirá: <A HREF="http://www.miservidor.es "> Link de prueba </A>. NOTA: Si en este ejemplo escribimos www.miservidor.es en mayúsculas eso sería el nombre de una máquina y sería interpretado como un ordenador distinto. Los elementos pueden anidarse unos con otros, teniendo cuidado de poner los cierres en el lugar adecuado. Por ejemplo el elemento <H1> combinado con <I> que sirve para generar texto en itálica, quedaría de la siguiente forma: <H1><I>Texto de prueba </I></H1>. 15 MÓDULO II
2.1.4 Estructura de una Página WEB. <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Donde: <HTML> Es el lenguaje en el cual se desarrollará la Pagina </HTML> Cierre del lenguaje <HEAD></HEAD> Entre estas etiquetas se pone el title, estas etiquetas normalmente no se ven cuando se navega y además reside la información del documento (Página WEB) <TITLE> </TITLE> Entre estas etiquetas se pone el titulo que va a aparecer en la barra de título de la página WEB <BODY> Comienzo del cuerpo de la Página WEB, es decir, en esta sección se pondrá todo lo que va a contener la dicha página (etiquetas, imágenes, video, archivos de sonido, tablas y otras más.). </BODY> Cierre del cuerpo de la página WEB. 16 MÓDULO II
A continuación describiremos algunas de las etiquetas más importantes dentro el código HTML y daremos algunos ejemplos. Dentro de la etiqueta BODY podemos controlar el color que tomarán los vínculos al ser visualizados y posteriormente al ser activados (clic sobre ellos). Por ejemplo si queremos que los links (vínculos) se muestren de color amarillo, azul-verde cuando son activados, y verdes después de haber sido utilizados se pondría de la siguiente manera: <BODY LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF"> 2.2 FUENTE 2.2.1 Tamaño y tipos de fuente Para definir distintos tamaños de letra, en HTML se utiliza la etiqueta donde x es un número que puede variar entre 1 y <Hx> </Hx> Otra forma de cambiar los tamaños de las letras es con la etiqueta: <FONT> </FONT> 2.2.2 Formato de texto Negritas, Itálicas, Subrayado: Veremos que para poner negritas al texto es necesario utilizar las siguientes etiquetas: <B> </B> <I> </I> Para poder dar el efecto de Itálicas usemos: No dejemos a un lado el texto subrayado para el cual utilizaremos las siguientes etiquetas: <U> </U> Nosotros podemos predeterminar el tamaño de todo el texto que se va a mostrar en toda la página a mostrar con la siguiente etiqueta: <BASEFONT SIZE=valor> 17 MÓDULO II
Cuando queremos dar el tipo de fuente es necesario utilizar la etiqueta: <FONT FACE= arial > texto </FONT> NOTA: Esta etiqueta se puede combinar con las anteriores. Entre los formatos que se le pueden dar a la fuente esta el de color, para ello utilizaremos la etiqueta <color> de la siguiente forma: 2.2.3 Color <FONT COLOR= red >texto a utilizar</font> En lugar de poner el color con su nombre, lo podemos hacer con su código el cual está dado en hexadecimal, la codificación de estos colores está basada en mezclas cromáticas RGB (RED GREEN BLUE), es decir, se mezclan ciertas cantidades de los tres colores básicos (rojo verde y azul), para conseguir el color deseado. La cantidad de cada color está definida por el código que utilizamos, que tiene seis dígitos en hexadecimal. Si los cortamos en 3 grupos de dos de izquierda a derecha, obtendremos la cantidad (en hexadecimal) de cada color. 2.3 PÁGINA 2.3.1 Fondo de página Con esto también nos damos cuenta de que se puede modificar el fondo de nuestra página para ello utilizaremos la siguiente etiqueta: <BODY BGCOLOR=#FF0000> Esto dará un fondo de color rojo. Veamos a continuación varias etiquetas que nos sirven para dar formato a párrafos. 18 MÓDULO II
2.4 PÁRRAFO 2.4.1 Cambios de párrafo: Para definir los saltos de párrafo se utilizan las siguientes etiquetas: <P> </P> NOTA: No es necesario que esta etiqueta sea cerrada ya que el texto continuará normalmente hasta que se encuentre otro salto <p> Al poner estas etiquetas nos da una línea vacía entre los dos párrafos. 2.4.2 Cambios de línea: Si nosotros no queremos que entre los párrafos haya un espacio, es decir que no exista la línea blanca se utiliza un salto, pero de línea el cual se hace con las siguientes etiquetas: <BR></BR> 2.4.3 Alineación de texto: Es de suma importancia recalcar que cuando nosotros necesitamos alinear el texto, hay que utilizar la etiqueta <P>, la cual admite cuatro parámetros o atributos, alineación a la izquierda, alineación a la derecha, alineación centrada y alineación justificada. <P ALIGN=LEFT> <P ALIGN=RIGHT> <P ALIGN=CENTER> <P ALIGN=JUSTIFY> NOTA: En el caso de utilizar alguno de estos atributos es recomendable usar el cierre de la etiqueta </P> 19 MÓDULO II
2.4.4 Divisiones de texto: Un elemento que se comparta de forma parecida al <BR> es el siguiente y de igual forma admite las alineaciones de texto. <DIV ALIGN=LEFT> </DIV> <DIV ALIGN=RIGHT> < /DIV> <DIV ALIGN=CENTER> </DIV> NOTA: Fíjese que en esta etiqueta si se debe de utilizar el cierre de la misma. 2.4.5 Tabulaciones: Cuando decimos tabulaciones no son precisamente como en Word, el proceso que realiza es el de adentrar el texto un cierto número de espacios hacia la derecha con respecto del margen izquierdo de nuestra página, por tal motivo se le llama tabulación, y para ello se utiliza la siguiente etiqueta. <BLOCKQUOTE> </BLOCKQUOTE> 2.4.6 Enmarcado Ahora es turno de ver la forma de enmarcar un texto, es decir, rodear el texto con un recuadro y opcionalmente ponerle una etiqueta, primero se vera como enmarcar el texto y luego poner su respectiva etiqueta; para ello utilizaremos las siguientes etiquetas: <FIELDSET> </FIELDSET> Para ponerle la etiqueta a este recuadro se utiliza la siguiente etiqueta, acepta tres tipos de alineación izquierda, derecha y centro: <LEGEND> </LEGEND> 20 MÓDULO II
2.5 TABLAS Las tablas son sin duda uno de los elementos más potentes del HTML. Con pocos elementos se pueden conseguir efectos espectaculares. En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamaño y color, imágenes, links... Por supuesto, además de permitir cualquier contenido, tienen sus propios atributos de alineación tanto horizontal como vertical, y atributos de dimensionado. Por defecto se autodimensionan, es decir, se adaptan en tamaño a su contenido, pero también es posible definirlo de forma fija. Las tablas han sido utilizadas largo tiempo para maquetar el contenido de las páginas, y aunque las nuevas tendencias aconsejen hacer esto con bloques (capas XHTML), no es un elemento que vaya a desaparecer, y es mucho más sencillo de utilizar. 2.5.1 Definir tabla Para definir tabla se necesita las siguientes etiquetas, hay que mencionar que las tablas tienen sus propios sub elementos. <TABLE> </TABLE> 2.5.2 Definir fila Para definir la fila se utiliza las siguientes etiquetas. <TR></TR> 2.5.3 Definir celda Para definir una celda hay que utilizar las siguientes etiquetas: <TD></TD> 2.5.4 Definir encabezado Una cabecera es lo mismo que una celda de datos pero de forma automática el texto de su contenido recibe los atributos de negrita y centrado. Sólo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez. <TH></TH> 21 MÓDULO II
2.6 HIPERVÍNCULOS Seguramente te preguntarás qué es eso de un "link". Pues un link es un área de la pantalla, que puede contener una o varias palabras o una imagen, que es "sensible" al puntero del ratón, y al ponerlo sobre ella y pulsar el botón izquierdo el visualizador llamará a la página que tiene asignada el link. Habitualmente por defecto los visualizadores señalan un área linkada subrayándola, si es texto, o poniéndole un borde si es una imagen, ambas cosas en color azul. Por supuesto, eso se puede cambiar en las configuraciones de visualizador. Si no se desea que aparezca el subrayado para mejorar la estética en algunos casos, se puede parametrizar con una instrucción de estilo. 2.6.1 Vínculos a un Archivo Cuando nosotros queremos vincular un archivo es necesario poner todo el path (ruta) de este archivo, así como, su extensión (.doc.xls.swf etc.), se utiliza las siguientes etiquetas: <A HREF="mifichero.doc">texto sobre el cual va a aparecer el link </A>. 2.6.2 Vínculos a URL s Cuando nosotros necesitamos hacer un vínculo a una URL es necesario indicar cual es su ubicación, es decir el servidor y el nombre del fichero. <A HREF="http://www.miservidor.es/mifichero.html"> texto sobre el cual va a aparecer el link </A>. 2.6.3 Vínculos en imágenes Cuando se va a vincular le imagen a algún archivo o bien a alguna URL es necesario especificar el path y a demás poner el nombre de la imagen junto con su extensión como se muestra a continuación con las siguientes etiquetas. Ir al índice <A HREF="indice.html"> <img src="bolaroja.gif" border=0> </A>. NOTA: Dentro de los vínculos podemos visualizar la forma en la que se van a cargar las nuevas páginas, esto con la etiqueta <TARGET>: _blank Se carga en una página nueva. _self Se carga en la misma página. 22 MÓDULO II
2.7 IMÁGENES Insertar imágenes en un documento permite crear páginas mucho más atractivas. Según el tipo de gráficos utilizado se pueden conseguir efectos realmente sorprendentes Una nueva propiedad de algunos visualizadores es la posibilidad de presentar gráficos con animación. No hay que confundir los gráficos animados en formato GIF con los "movies" o vídeos en formato MPG que no son tratados directamente por el visualizador, sino por una herramienta auxiliar que hay que definirle La forma de incluir una imagen animada en el documento es la misma que una imagen fija. No se requiere ningún tipo de programa ni script, todo está definido en la propia imagen. Existen en la red en forma de shareware programas para hacer ficheros de imágenes animadas. Su construcción es muy sencilla: sólo necesitas tener la serie de imágenes que quieres animar e ir ensamblándolas con algún programa al efecto, definir el tiempo entre imagen, el ciclo de repetición y listo. 2.7.1 Imagen alineada a la izquierda Con esta etiqueta podemos insertar las imágenes. <IMG SRC="sugeren.gif"> 2.7.2 Imagen con un texto alternativo Para insertar una imagen con texto alternativo es necesario utilizar la etiqueta <ALT> dentro dela etiqueta <IMG SCR>, esto nos mostrará un texto al poner el puntero del mouse sobre la imagen. <IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN"> 2.7.3 Imagen alineada a la derecha Al igual que los textos nosotros podemos dar alineación a nuestra imagen. <IMG SRC="sugeren.gif" ALIGN=RIGHT> 23 MÓDULO II
2.7.4 Imagen redimensionada a más Cuando decimos que se va a redimensionar una imagen queremos que la misma crezca o disminuya de tamaño esto lo hacemos con la siguiente etiqueta, acepta dos propiedades width y heigth. <IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=75 HEIGTH=20 > 2.7.5 Imagen redimensionada a menos Para hacer que nuestra imagen disminuya su tamaño lo hacemos de la siguiente forma con la esta etiqueta solo tenemos que cambiar las propiedades ancho y alto (width y height): <IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=25 HEIGTH=10 > 2.7.6 Imagen alineada a la izquierda con marco Para poder ponerle un marco a la imagen es necesario utilizar la siguiente etiqueta: <IMG SRC="sugeren.gif" ALIGN=LEFT BORDER=5> 2.8 MULTIMEDIA 2.8.1 Sonido Otro atractivo mas para nuestras páginas Web es el sonido, el cual es fácil de insertar y acepta los formatos WAV, AIFF, AU, MIDI o MP3, para este proceso se utiliza la siguiente etiqueta: <EMBED SRC="mozart.mid" WIDTH=160 HEIGHT=70> NOTA: Esta etiqueta también acepta que el ancho y el alto sean modificados. 24 MÓDULO II
2.8.2 Multimedia con el Media Player de Windows Se utiliza también el elemento <EMBED> y sus atributos son: TYPE, SRC, AUTOSTART, LOOP, SHOWCONTROLS, SHOWSTATUSBAR, CLICKTOPLAY, VOLUME, WIDTH, HEIGHT, HIDDEN. Todas las instrucciones son válidas tanto para ficheros de sonido como para los de video o video con sonido. La propiedad TYPE manda llamar al media player <EMBED TYPE="application/x-mplayer2"SRC="minueto.mid" WIDTH=287 HEIGHT=65> Otros atributos de EMBED son: AUTOSTART con dos posibles valores: 1 (por defecto) y 0, y como ya habrás deducido, 1 hace que suene inmediatamente después de cargar la página, y sin necesidad de pulsar el botón "start" de la consola. SHOWCONTROLS que puede valer 1 (por defecto) o 0, y sirve para que la consola muestre los botones de control, como start, pause stop, etc. SHOWSTATUSBAR puede valer 0 (por defecto) o 1 para hacer que aparezca la barra de estado. CLICKTOPLAY con valores 1 (por defecto) o 0 que permiten iniciar o parar la ejecución del fichero multimedia pulsando con el puntero del ratón en la consola, en lugar de en los botones de la barra de controles. Fíjate que esto funciona pulsando en el interior de la ventana superior del Media Player, no en la barra de controles. VOLUME Para definir el volumen de sonido que habrá al cargar el fichero multimedia. Contra lo que cabría esperar el valor 0 establece el máximo volumen y cualquier valor mayor que 0 establece volumen medio. Hay además un atributo que no es propiamente del elemento <EMBED>: ALIGN= y sus valores TOP, BOTTOM, CENTER, LEFT, RIGHT, MIDDLE y TEXTTOP que funcionan igual que sus respectivos del elemento IMG, es decir, que no tiene efectos sobre el sonido o la imagen, sino sobre la figura de la consola y su alineación con el texto de la página. He aquí un ejemplo con todos ellos excepto HIDDEN: 25 MÓDULO II
MÓDULO III INTRODUCCIÓN A DREAMWEAVER Objetivo: El participante aprenderá a distinguir entre las aplicaciones basadas en la WEB e identificara las partes de la interfaz que compone Dreamweaver. Introducción: En este módulo echaremos un vistazo a la interfaz de Dreamweaver, a sus herramientas y a como van a ser empleadas en el diseño de aplicaciones basadas en la WEB. Antes de comenzar a utilizar Dreamweaver echemos un vistazo a los requisitos del sistema necesarios para su instalación y correcto funcionamiento, sin dejar a un lado una breve introducción de lo que es realmente Dreamweaver. Qué es Dreamweaver? Es necesario mencionar que Dreamweaver es un software de la familia Macromedia ahora llamada Adobe Macromedia. Dreamweaver es un editor de Código HTML (Hipertext Mark up Language) profesional para el desarrollo de páginas WEB. Una de las principales ventajas de este programa es que nos da la opción de trabajar directamente en el código o bien si preferimos un entorno de edición visual fácil de manejar, realmente Dreamweaver es la herramienta que nos permitirá trabajar del mismo modo que hacen los diseñadores WEB profesionales. Dreamweaver nos permitirá crear sitios Web, utilizando la interfaz gráfica y nos da la posibilidad de visualizar los cambios que vayamos introduciendo, al mismo tiempo que los realizamos. 26 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.1 REQUERIMIENTOS 3.1.1 Requisitos mínimos necesarios Procesador Pentium III equivalente o superior 256 MB en RAM 1.8 GB de espacio libre en disco duro Pantalla de 16 bits que soporte la resolución de 1024 x 768. CD ROM Sistema Operativo Windows 2000, XP o Vista 3.1.2 Entrar a Dreamweaver Una vez instalado Dreamweaver el entrara él será tan fácil como la ejecución de cualquier otro programa de Microsoft Office. Clic en el menú Inicio Sitúese sobre todos los programas Sitúese sobre Macromedia Clic sobre Dreamweaver 27 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.2 INTERFAZ DEL USUARIO Barra de Título Barra de Menú Barra de herramientas Documento Barra de herramientas Insertar Paneles Selector de etiquetas Panel de propiedades Panel de Archivos 3.2.1 Barra de título: Muestra el nombre de la aplicación junto al nombre del archivo en el que actualmente se esta trabajando. 3.2.2 Barra de Menús: Contiene los menús que por defecto, posee Macromedia Dreamweaver 3.2.3 Barra de herramientas insertar: contiene los botones para la inserción de objetos (imágenes, tablas, capas y marcos). 28 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.2.4 Grupo de paneles: Se agrupan al lado derecho de la ventana. 3.2.5 Selector de Etiquetas: Muestra la etiquetas HTML que controlan el texto o los objetos seleccionados. 3.2.6 Panel propiedades: Visualiza las propiedades del objeto o texto seleccionado permitiendo modificarlas. A continuación describiremos la barra de herramientas insertar; la cual consta de ocho categorías predeterminadas: Común, Diseño, Formularios Texto, HTML, Aplicación, Elementos Flash y Favoritos. 3.2.7 Común: En esta categoría usted tendrá acceso a las opciones y elementos HTML. 3.2.8 Diseño: Usted verá las opciones de inserción como: tablas, etiquetas, marcos. 3.2.9 Formularios: Ofrece los comandos con los cuales usted podrá crear los formularios. 3.2.10 Texto: Contiene características especiales como: símbolos de copyright entre otros. 3.2.11 HTML: Contiene botones los cuales permiten que los diseñadores WEB incluyan etiquetas <meta> con palabras claves para los motores de búsqueda, y muchas otras tareas que producen gran impacto en un sitio WEB. 3.2.12 Aplicación: En esta categoría usted podrá insertar elementos dinámicos como grabar formularios de inserción y actualización. 3.2.13 Elementos flash: Permite insertar elemento de Macromedia Flash. 3.2.14 Favoritos: En esta categoría usted podrá agrupar y organizar los botones de la barra de herramientas insertar que utilice con mayor frecuencia. 29 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.2.15 Ventana de documento La ventana de documento la vamos a dividir en dos para fines prácticos la primera de ellas será la barra del documento, la cual se detallará más adelante; la segunda será la zona de trabajo que va a ser el lugar donde se verá el código o el diseño según la hayamos elegido. Barra de documento Zona de trabajo 3.2.16 Barra de documento Esta barra contiene botones que nos permitirán alternar entre las diferentes vistas del documento Vista de código Vistas de diseño y código Vista de diseño 30 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
Título de documento Errores de comprobación de navegador Validar formato Administración de archivos Vista previa Actualizar vista de diseño Ver opciones ayudas visuales 3.2.17 Panel de propiedades Este panel es el que con mayor frecuencia se utiliza, este panel cambiara sus atributos dependiendo del objeto seleccionado para que de esta forma uno pueda dar formato a nuestro objeto. 31 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.3 DOCUMENTO 3.3.1 Configuración Antes de comenzar a diseñar la página, es necesario configurar el documento, con el cuadro de dialogo de propiedades de la página, podremos configurar el título de la página, las imágenes y colores del fondo, del texto y de los vínculos. Clic sobre el menú modificar Clic sobre Propiedades de la Página Se abre el cuadro de diálogo de propiedades de la página, del lado izquierdo se van a ver las categorías, tendrá que seleccionar una y posteriormente configurar sus propiedades. Aspecto 32 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
En esta categoría puedes cambiar el tipo de fuente predeterminada de la página, el tamaño, color de texto, color de fondo, o bien poner una imagen como fondo de nuestra página, y configuración de márgenes. Es necesario mencionar que existen otras categorías como la de Vínculos en la cual podrás configurar los colores de los mismos, es decir el color del vínculo en su estado reposo, en su estado sobre y en su estado presionado, tamaño y tipo de fuente. También podemos configurar los encabezados en la categoría que tiene el mismo nombre, poniéndole las propiedades de tamaño, tipo y color de fuente. 33 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
No debemos dejar a un lado la categoría de título y codificación en la cual podemos configurar el título de documento, tipo de documento y la codificación. 3.3.2Reglas Las reglas son elementos que nos ayudan a tener un mejor control sobre la página, veremos como activar las reglas. Clic en el menú ver Posiciónate sobre reglas Clic en mostrar 34 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.3.3 Cuadrícula La cuadrícula nos ayudará a posicionar mejor los objetos insertados en nuestro documento, en esta propiedad nosotros podemos definir el tamaño y color de línea. 35 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.3.4 Pre visualización Con la opción de pre visualizar el documento tendremos la oportunidad de ver nuestra página como si ya estuviera alojada en un sitio en Internet, esto va a depender de nuestro navegador en este ejemplo lo tenemos con el Internet Explorer. Clic en menú Archivo Vista previa en el navegador Clic en Internet Explorer 6.0 3.3.5 Guardar como Con esta opción nosotros podremos decidir el lugar (carpeta) donde se va a estar guardando las páginas de nuestro sitio Web y se utiliza por primera vez las, las veces subsecuentes solo le daremos la opción guardar (Shift+S). 36 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
Clic en menú Archivo Clic en guardar como Seleccionar la carpeta destino Dar el nombre de la página Clic en botón aceptar 37 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.3.6 Crear documentos Con esta opción vamos a poder crear paginas HTML nuevas para que estén comprendidas dentro de nuestro sitio, de la siguiente forma. Clic en menú Archivo Clic en nuevo Elegir el tipo de documento Clic en botón crear 3.3.7 Abrir documento Con esta opción nosotros podremos traer y abrir archivos existentes ya sean HTML o PHP y se hace de la siguiente forma: Clic en el menú Archivo Clic en Abrir Buscar y seleccionar el archivo Clic en botón Abrir 38 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.4 TEXTOS A pesar del hecho indiscutible de que hoy en día Internet se ha convertido en un medio visual, la mayoría de la información que nos ofrece es aún textual. Aquí vamos a aprender la forma más rápida de añadir y editar textos desde un ambiente visual (Dreamweaver). 3.4.1 Insertar texto Crear texto en Dreamweaver es un acto muy sencillo, consiste en ubicar el cursor sobre la ventana del documento e introducir el texto por medio del teclado o bien copiar el texto desde otra aplicación y pegarlo en el documento de Dreamweaver; veamos a continuación como se hace este sencillo movimiento: Colocar el cursor en algún sitio del documento Empezar a teclear el texto deseado Si se desea traer el texto desde otra aplicación hay que realizar los siguientes pasos: Abrir la aplicación donde se encuentre el texto Seleccionar el texto Copiar el texto (Ctrl+C) Cambiarnos al documento de Dreamweaver Pegar el texto (Ctrl+V) 39 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.4.2 Formato de texto: Cuando hablamos del formato de texto hacemos referencia a las propiedades que este pueda adquirir que son muy similares a las que adquiere en Word, color, tipo, tamaño, negrita, itálica, subrayada, alineación. Todas estas opciones se le darán al texto desde el panel de propiedades veamos la forma de hacerlo. 3.4.3 Color Seleccionar el texto Ir al panel de propiedades Clic en color de texto Clic en el color deseado 3.4.4 Tipo de fuente Seleccionar el texto Ir al panel de propiedades Clic en fuente editar la lista de fuente Seleccionar la fuente Clic en el botón 40 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
Clic en el botón Aceptar 3.4.5 Tamaño Seleccionar el texto Ir al panel de propiedades Clic en tamaño Clic en el tamaño deseado 3.4.6 Negrita Seleccionar el texto Ir al panel de propiedades Clic en el botón 3.4.7 Itálica Seleccionar el texto Ir al panel propiedades Clic en el botón 41 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.4.8 Alineación Con esta opción nosotros decidiremos el tipo de alineación que el texto vaya a tener y puede ser: izquierda, derecha o centrado o bien justificado. Seleccionar el texto Ir al panel propiedades IZQ DER R CENTRADO Dar clic en el botón deseado JUSTIFICADO 3.4.9 Texto Flash Ir a la barra de herramientas del insertar Seleccionar la categoría común Localizar el comando media flash Clic en texto flash Seleccione el tipo, tamaño y color de fuente En el apartado texto escriba el texto deseado Introduzca el nombre del archivo en el cuadro guardar como Seleccione el color de sustitución Clic en el botón aceptar 42 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.5 IMÁGENES En un principio Internet nació como un medio de difusión de texto entre científicos y militares estadounidenses. En la actualidad, Internet se ha convertido en un medio visual enfocado a todo tipo de usuarios. Ahora veremos que la potencia de Dreamweaver es incluso mayor a la hora de usar un entorno visual para introducir imágenes. 3.5.1 Insertar imagen Para insertar una imagen es necesario estar colocado en algún lugar del documento y realizar los siguientes pasos: Ir a la barra de herramientas de insertar Seleccionar la categoría común Clic en el botón imágenes Clic en imagen 43 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
Buscar y seleccionar la imagen Clic en el botón aceptar 3.5.2 Editar imagen Dreamweaver es una completísima herramienta para el diseño de páginas Web y no un programa de edición de gráficos. Pero en muchas ocasiones al colocar una imagen en un documento nos daremos cuenta de que esta debe ser modificada. Dreamweaver nos permite especificar el editor de gráfico que deseemos utilizar, en este caso se utilizará Fireworks. Clic en el menú editar Clic en editar con editor externo Clic en el botón Aceptar 44 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.5.3 Cambiar tamaño La anchura y altura de una imagen son dos atributos importantes, ya que los navegadores reconstruyen las páginas más rápido si conocen estos atributos. Estos valores, expresados en pixeles, son incluidos en el código HTML de un documento al insertar la imagen, como se vio en el módulo anterior. Redimensionar una imagen desde Dreamweaver es realmente fácil, lo único que hay que hacer es lo siguiente: Seleccionar la imagen Ir al panel de propiedades Cambiar de AN y Al 3.5.4 Texto alternativo El texto alternativo es probablemente uno de los mayores rasgos distintivos que podemos usar con las imágenes que se insertan en nuestro documento. Este texto es el que se muestra cuando colocamos el puntero del mouse sobre la imagen veamos como hacer esta sencilla operación: Seleccionar la imagen Ir al panel propiedades Clic dentro del cuadro de texto de Alt Escribir el texto 45 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.5.5 Alineación Las imágenes pueden estar alineadas con el texto introducido. Seleccione la imagen Ir al panel propiedades Seleccionar el alineado deseado 3.5.6 Bordes Durante el proceso creativo, suele ser necesario añadir un borde sólido alrededor de una imagen para poder distinguirla de otras colocadas en el mismo documento. El atributo borde nos permite situar un borde rectangular de un solo color rodeando un gráfico. La anchura de este borde se mide en pixeles y el color de este es el mismo que el del texto predeterminado del documento. Para añadir un borde a una imagen en Dreamweaver siga los siguientes pasos: Seleccione la imagen Ir al panel propiedades Escribir el ancho del borde en el cuadro de texto borde 46 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.5.7 Imagen de sustitución Las imágenes de sustitución son uno de los efectos más populares en la realización de páginas Web. Una imagen de sustitución no es más que una imagen que cambia cuando sitúa el puntero del mouse sobre ella. En verdad trabajamos con dos imágenes. Para añadir una imagen de sustitución hay que realizar los siguientes pasos: Ir a la barra de insertar Seleccionar la categoría común Clic en icono imagen Clic en imagen de sustitución 3.6 TABLAS La colocación de imágenes, textos y otros elementos en un documento lo contribuyen a la presentación de nuestras páginas. Hasta ahora, no tenemos mucho control sobre los elementos que hemos introducido, ya que nos vemos restringidos por las limitaciones del HTML. A continuación veremos como las tablas nos ayudarán a la hora de estructurar una página Web. Una tabla de HTML ordena el contenido de una página de otro modo, estaría suelto. 47 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
Las tablas son una de las utilidades más potentes para presentar datos e imágenes en un documento HTML. Las tablas se componen de tres elementos básicos: columnas, filas y celdas. Las filas van de izquierda a derecha de la tabla y las columnas de arriba abajo, mientras que las celdas se forman en la intersección de columna y fila y es donde se introduce la información. 3.6.1 Crear tablas Veamos ahora con la practicidad de Dreamweaver la forma más rápida y sencilla de crear una tabla. Colóquese en el documento Vaya a la barra de herramientas insertar Clic en el icono tabla Introducir las propiedades de la tabla Clic en el botón aceptar Filas Columnas Ancho de Tabla Grosor de borde Relleno celda Espacio entre celdas 48 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.6.2 Modificar tablas La mayoría de las modificaciones que le podemos hacer a una tabla las realizaremos usando el panel de propiedades. Gracias a este panel, controlaremos fácilmente el número de filas y columnas que va a contener nuestra tabla, así como los parámetros básicos (anchura, borde y alineación). 3.6.3 Fondo de tabla Cabe mencionar que le podemos poner un color de fondo a nuestra tabla o bien solo a una celda vemos como realizarlo: Seleccione la tabla Ir al panel de propiedades Seleccionar el color de fondo 3.6.4 Color a una celda Seleccionar la celda Ir al panel de propiedades Seleccionar el color 49 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.6.5 Bordes de tabla En esta propiedad podemos manejar dos aspectos: color y grosor de borde hagamos lo siguiente: Seleccione la tabla Ir al panel propiedades Seleccione el grosor (dado en pixeles) y color deseado 3.6.6 Insertar columnas y filas Si ya insertamos la tabla y nos damos cuenta de que a esta le hacen falta más filas o columnas es muy sencillo de solucionar este problema realicemos los siguientes pasos: Seleccionar la tabla Ir al panel de propiedades Modificar el número de columnas y el número de filas 50 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.6.7 Combinar celdas Para combinar las celdas y obtener una sola celda hagamos lo siguiente: Seleccionar el rango de celdas a combinar Ir al panel de propiedades Clic en el icono combinar 3.6.8 Dividir celdas Siga los siguientes pasos: Seleccione la celda a dividir Ir al panel propiedades Seleccionar filas o columnas y el número Clic en el botón aceptar 51 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.6.9 Insertar texto e imágenes Hagamos lo siguiente: Seleccionar la celda donde se desea insertar Escribir el texto y dar formato o bien Realizar los pasos para la inserción de imágenes. No hagamos a un lado que le podemos dar alineación a los textos o bien a las imágenes insertadas en una tabla, para realizarlo hagamos lo siguiente: Seleccione el texto o imagen Ir al panel propiedades Seleccionar las propiedades de Horiz. Y Vert 3.7 VÍNCULOS Después de configurar un sitio local en nuestro disco duro y crear los documentos, necesitaremos establecer conexión entre ellos. De ello se encargan los vínculos, que nos aportan gran movilidad independientemente de encontrarse o no en el mismo servidor. Dreamweaver nos permitirá crear vínculos entre documentos HTML, imágenes, archivos multimedia o software transferible. 3.7.1 Vínculo en Texto Es muy común asignar vínculos a palabras o frases de su página Web. Realizaremos los siguientes pasos: Seleccionar el texto Ir al panel propiedades Escribir la ruta del vínculo en la sección vínculo 52 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
3.7.2 Vínculo en Imágenes Insertar la imagen Seleccionar la imagen Ir al panel de propiedades Poner el vínculo 3.7.3 Vínculo a Correo Electrónico Un vínculo de correo electrónico abre una ventana de mensaje en blanco utilizando el programa de correo asociado al navegador del usuario. Cuando la ventana de mensaje de correo electrónico aparece, el campo Para se rellena automáticamente con la dirección especificada en el vínculo. Seleccione el texto o imagen Ir a la barra de herramienta de insertar Clic en el botón vinculo de correo electrónico 53 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
Escribir la dirección de correo electrónico Clic en el botón aceptar 3.7.4 Botones Flash Con esta herramienta nosotros podemos crear botones tipo flash sin necesidad de hacerlo desde Macromedia Flash. Veamos como hacerlo: Ir a la barra de herramientas de insertar Clic en el icono media Clic en el texto botón flash 54 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
Seleccionar el estilo Llenar las opciones Clic en el botón aceptar Poner la ruta del vínculo 3.7.5 Zona interactiva Esta propiedad de zona interactiva se utiliza comúnmente para hacer que alguna sección de una imagen contenga un vínculo. Veamos como realizarlo: Inserto la imagen Ir al panel propiedades Selecciono la herramienta de zona interactiva Dibujo la zona que va a contener el vínculo Tecleo la ruta de la liga 55 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
NOTAS FINALES Una página Web puede construirse fácilmente en programas de edición de HTML, pero es de suma importancia tener los conocimientos fundamentales de dicho lenguaje para saber que acciones tomar al presentarse un error. Una página Web no es otra cosa que texto relacionado entre sí por medio de vínculos, los cuales nos llevaran a un lugar determinado de nuestra página o bien en su defecto a otra que pudiera estar localizada en cualquier parte de la Internet. Al momento de crear una página Web es necesario tomar en cuenta: El giro de la empresa. La información con la que contamos. Si va a ser una pagina, un portal o un sitio. 56 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS
BIBLIOGRAFÍA Álvarez García, Alonso. HTML. España 2002. Editorial Anaya Multimedia. López Quijado J.Domine HTML 2ª Edición. Editorial Ra-ma Obra Literaria del Centro Nacional de Capacitación y Calidad IMSS SNTSS Elaborado por: Alejandro Flores Ocampo 57 MÓDULO III INTRODUCCIÓN A DREAMWEAVER IMSS