AUTÓNOMA DE NUEVO LEÓN “ESCUELA INDUSTRIAL Y PREPARATORIA TÉCNICA ÁLVARO OBREGÓN” MC FERNANDO RODRÍGUEZ GUTIÉRREZ DIRECTOR ING. JOSÉ ALBERTO OLVERA RANGEL SUBIRECTOR ADMINISTRATIVO MAP MAGDALENO ZARAZÚA NAVARRO SUBDIRECTOR ACADÉMICO MADO RAYMUNDO CARRIZALES GARZA SECRETARIO ACEDÉMICO ME ERNESTO CERÓN DUQUE JEFE DE ESPECIALIDADES TÉCNICAS Y TALLERES MT. HÉCTOR F. BERRONES CORTEZ COORDINADOR DE TECNOLOGÍAS DE INFORMACIÓN Y DE COMUNICACIÓN Ambiente Visual I 2ª Edición 2014 Lic. María del Carmen Aguilar Macías
Pág. Agradecimientos. 4 Introducción 5 Etapa 1. Introducción a Dreamweaver y páginas web 8 Etapa 2. Uso de texto, imágenes, enlaces 23 Etapa 3. Aplicación de comportamientos, multimedia y publicaciones en la web 52 Bibliografía.
Al MC Fernando Rodríguez Gutiérrez, Director de la EIAO Por la confianza y apoyo en cada circunstancia de mi vida profesional como personal. A mi esposo e hijos Por ser el aliciente cada día de mi vida. A mis padres Por su ayuda y apoyo incondicional. A mi Señor Dios Por brindarme su protección en cada paso de mi vida, y por otorgarme un ángel que cuide de mí y mi familia, por su amor y bondad.
En el presente curso de Ambiente Visual I se empelará el software de Dreamweaver el cual es un editor de código HTML para el diseño visual y la administración de sitios y páginas web. Este software incluye numerosas herramientas y funciones de edición de código, las cuales te permitirán añadir diseño y funcionalidad sin escribir ni una sola línea de código. El alumno podrá ver todos los elementos o activos del sitio, agilizará el flujo de trabajo de desarrollo mediante la creación y edición de imágenes y su importación directa a Dreamweaver, te permitirá crear tus propios objetos y comandos, modificar métodos e incluso escribir para ampliar las posibilidades con nuevos comportamientos.
de la etapa 1 Competencias genéricas 4. Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la utilización de medios, códigos y herramientas apropiados. Atributos Identifica las ideas clave en un texto o discurso oral e interfiere conclusiones a partir de ellas. Maneja las tecnologías de la información y la comunicación para obtener información y expresar ideas. 6. Sustenta una postura personal sobre temas de interés y relevancia general, considerando otros puntos de vista de manera crítica y reflexiva. Atributos Estructura ideas y argumentos de manera clara coherente y sintética. Competencias generales Maneja las tecnologías de la información y la comunicación como herramienta para al acceso a la información y su transformación en conocimiento, así como para el aprendizaje y trabajo colaborativo con técnicas de vanguardia que le permitan su participación constructiva en la sociedad. Atributos ***** Emplea pensamiento lógico, crítico, creativo y propositivo para analizar fenómenos naturales y sociales que le permitan tomar decisiones pertinentes en su ámbito de influencia con responsabilidad. Atributos Selecciona las fuentes de información de acuerdo a criterios responsables. Competencia Profesional Aplicar las herramientas de Dreamweaver para la creación de una página Web en el ambiente laboral.
de competencia - Conocer los conceptos básicos para poder utilizar el ambiente de trabajo de Dreamweaver.. - Identificar las partes elementales para el uso adecuado en Dreamweaver. - Utilizar el asistente de Dreamweaver para guiarse en la elaboración de una página web. Actividades de Aprendizaje Llevar a cabo cada una de las actividades marcadas en este manual, con la dirección y supervisión por parte del docente, donde en cada una de ellas debe llenar el formato correspondiente a la práctica o actividad en cuestión.
1 Introducción a Dreamweaver y a Páginas Web 1.1 Conceptos básicos 1.1.1 ¿Qué es el software de Dreamweaver? Dreamweaver es la herramienta de diseño de páginas web más avanzada, tal como se ha afirmado en muchos medios. Aunque sea un experto programador de HTML el usuario que lo maneje, siempre se encontrarán en este programa razones para utilizarlo, sobre todo en lo que a productividad se refiere. Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional, y soporta gran cantidad de tecnologías, además muy fáciles de usar: Hojas de estilo y capas Javascript para crear efectos e interactividades Inserción de archivos multimedia... Ya que se pueden crear talas, editar marcos, insertar comportamientos, de una forma sencilla y visual. 1.1.2 Página web Una página web es un documento electrónico diseñado para el World Wide Web (Internet) que contiene algún tipo de información como texto, imagen, video, animación u otros. Una de las principales características de las páginas web son los Hipervínculos — también conocidos como links o enlaces — y su función es la de vincular una página con otra. Es por ello que a Internet se le conoce como la telaraña (Web) mundial, porque una página web se vincula con otra y así sucesivamente hasta ir formando una enorme telaraña de documentos entrelazados entre sí. Una página web forma parte de un Sitio Web o Sitio de Internet, que no es más que el conjunto de páginas web que lo componen ordenadas jerárquicamente bajo una misma dirección de Internet (URL). Las páginas web son visualizadas a través de Navegadores Web que interpretan el código con el que son diseñadas estas.
Editar páginas web Para editar una página es necesario conocer un poco sobre el lenguaje de HTML el cual es una abreviatura de HyperText Markup Language, siendo este el lenguaje que todos los navegadores utilizan para mostrar la información. Este es un lenguaje muy sencillo ya que se basa en el empleo de etiquetas encerradas entre paréntesis angulares (<..>), donde el texto a colocar va incluido dentro de los paréntesis. Estructura de un documento básico La estructura básica de un documento HTML es la siguiente: <HTML> Indica el inicio del documento <HEAD> Indica el inicio de la cabecera (o encabezado) <TITLE> Inicio del título del documento </TITLE> Final del título del documento </HEAD> Final de la cabecera (o encabezado) <BODY> Inicio del cuerpo del documento Instrucciones HTML </BODY> Final del cuerpo del documento </HTML> Final del documento Cualquier editor de texto te permite crear páginas web, para ello solo es necesario crear los documentos con la extensión HTML o HTM e incluir el contenido del documento en código HTML e incluso el editor de textos más simple es el BLOC DE NOTAS incluido en Windows que permite el diseño de página web. Hoy en día existe una inmensa cantidad de editores de páginas web, donde uno de los más utilizados es Adobe Dreamweaver, pero se puede mencionar Microsoft Expresion Web, FrontPage, Amaya, entre otros. Ejemplo 1: A continuación realizaremos un ejemplo sencillo de como editar una página web en el Bloc de Notas. Realiza los pasos necesarios en tu computadora para abrir el Bloc. 1. Realiza la captura del siguiente código: <HTML> <HEAD> <TITLE> Mi primer página </TITLE> </HEAD> <BODY> <H1> <Center>Bienvedid@ </H1></Center> <p> A mi primera página web</p>
Al principio es muy sencillo pero, poco a poco, se va a ir complicando </BODY> </HTML> 2. Enseguida guarda tu documento en tu computadora con el nombre de index.html (recuerda que es necesario anotar la extensión para que sea identificado como página web). 3. Minimiza la aplicación y abre el navegador de Internet Explorer, veremos como quedo este ejemplo, para ello no es necesario realizar los siguientes pasos: 4. Localiza en la barra de menús la opción de Archivo y selecciona la opción Abrir, el cual te mostrará la siguiente ventana: 5. En la siguiente ventana, localizaras el archivo index.html creado y da un clic en el botón de abrir. 6. Te regresa a la ventana inicial y solo necesitas dar un clic en el botón de Aceptar. Da un clic en el botón de examinar
Enseguida podrás observar la página que acabas de crear. Cómo pudiste observar al principio el trabajo en un editor de textos es fácil para diseñar una página web, pero conforme deseamos agregar más cosas el trabajo será un poco más complicado. A continuación se muestran algunas de las etiquetas más comunes en la edición de páginas. Etiquetas HTML Apertura Acción Cierre < ! Comentario. --> <BLOCKQUOTE> Da formato con sangría a un párrafo </BLOCKQUOTE> <BODY> Cuerpo del documento. </BODY> <BR> Retorno de línea. NO <CENTER> Centrar. </CENTER> <DD> Definiciones marcadas, para Lista de Definiciones <DL>. NO <DL> Lista de Definiciones, con términos marcados con <DT> y definiciones marcadas con <DD>. </DL> <DT> Términos marcados, para Lista de Definiciones <DL>. NO <FONT> Definición de la fuente. </FONT> <H1 ...H6> Tamaño de letras del 1 al 6. </H1 .../H6> <HEAD> Encabezamiento del documento. </HEAD> <HR> Línea horizontal. NO <HTML> Al principio y al fin de todo documento. </HTML> <I> Itálica (Cursiva). </I> <IMG> Cargar imágenes. NO
HTML Apertura Acción Cierre <MARQUEE> Marquesina o banner, movimiento del texto. </MARQUEE> - Internet Explorer <OL> Lista ordenada, con elementos marcados con <LI>. </OL> <P> Retorno de línea, con un espacio. NO <P ALIGN> Alineación de texto. </P> <PRE> Visualiza el texto en su formato original. </PRE> <S> Texto tachado. </S> <STRONG> Formato enfatizado más fuerte que <EM>. </STRONG> <SUB> Subíndice. </SUB> <SUP> Superíndice. </SUP> <TABLE> Tabla. </TABLE> <TD> Celdas de una fila en una tabla, dentro de <TR>. </TD> <TH> Título de Tabla. </TH> <TITLE> Título dentro de HEAD. </TITLE> <TR> Fila de una Tabla. </TR> <TT> Formato tipo máquina. </TT> <UL> Lista no ordenada, con elementos marcados con <LI>. </UL> Es importante mencionar que existen muchas más etiquetas que se pueden emplear en la edición de páginas web y que tengan una excelente presentación, ya sea con imágenes, tablas, marcos o formularios; así como videos y sonidos. 1.1.4 Como tener una página web Para poder tener una página en Internet es necesario contratar a alguna empresa con servidores, que puedan alojarla y hacerla accesible desde Internet las 24 horas del día. Estos servicios pueden ser por paga o gratuitos. Cuando contratas un servicio es como si compraras una casa, por ejemplo: 1. El Terreno (Hospedaje web o Housting) es el espacio donde se desarrollará la construcción. Donde el Housting es un espacio virtual conectado a un servidor conectado permanentemente a Internet, al colocar tu sitio ahí los haces accesible a cualquier cliente conectado a Internet sin importar la hora y el lugar.
La Construcción (sitio web) está compuesto por diferentes áreas (página web), Un sitio web es un conjunto de páginas web conectadas entre sí por medio de enlaces (links). 3. La dirección (dominio) indica la ubicación de la página. Un dominio es tu dirección en Internet. Al adquirir un dominio personalizas tu sitio web y tus cuentas de correo electrónico. Por ejemplo: Un dominio está compuesto por: misitio .mx Tú lo eliges Es exclusivo De preferencia corto, que describa tu actividad y fácil de recordar Tú lo eliges Indica actividad o procedencia territorial, por ejemplo: .com comercial .org organización .us de USA .mx de México En el caso de que se contrate el servicio de manera gratuita, tendrás ciertas limitaciones: como poco espacio de disco, lentitud y el nombre de tu página estará precedida por la suya; y como de alguna manera ellos tendrán que generar ingresos, se dedican a vender espacios publicitarios dentro de nuestras a la cual no podremos negarnos. Dreamweaver permite crear una copia local del sitio, que luego subirás a Internet para que esté a disposición de todo el mundo, para esto deberás mantener la estructura local, donde todos los archivos deberán subirlos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organización de las carpetas. Secuencia didáctica # 1: Introducción y Conceptos básicos de Dreamweaver. Descripción. Pts. 1. Realizar un documento en Word sobre los conceptos de: Que es Dreamweaver, como tener una página en internet y que es una página web. (Deberá traer portada, conclusión personal y bibliografía) 1 2. Investiga y realiza en Word un cuadro sinóptico de los diferentes software de diseño. (Deberá traer portada, conclusión personal y bibliografía) 1 3. Registre los pasos en un documento de Word de cómo abrir y guardar documentos en Dreamweaver. (Deberá traer portada, conclusión personal y bibliografía) 1 4. Realiza en el bloc de notas una página donde anotes tus datos personales y enlistes tus hobbies. (Deberá traer portada) 1 5. Realizar un reporte de los conceptos básicos de Dreamweaver, en Word, el cual debe contener el concepto de página web, las herramientas de y antecedentes del mismo. (PA) 1
Entorno de trabajo de Dreamweaver y su arranque Para trabajar con Dreamweaver es necesario conocer algunos de los elementos gráficos de la pantalla. Barra de aplicación: está compuesta de los botones propios de la aplicación y la conmutación del espacio de trabajo a. Botones de la aplicación: estos te mostrarán el icono para cambiar entre la vista de diseño, código; así como acceder a las extensiones que se pueden añadir y como administrar los sitios. b. Conmutación del espacio de trabajo: es la configuración del entorno de trabajo (paneles visibles y su disposición) que podemos guardar y cargar. Barra de menús: muestra las opciones agrupadas de acuerdo a sus características, estas opciones a veces se muestran también en los paneles Barra de aplicación Pestaña de documento Barra de herramientas estándar Barra de estado Barra de herramientas de documentos Inspector de propiedades Ventanas o paneles acoplables b a
de herramientas estándar: contiene los iconos con las acciones más habituales de los menús de Archivo y Edición; esta barra es de mucha utilidad ya que también estas acciones se pueden ejecutar con el teclado, mediante los métodos abreviados. Pestaña del documento: cada documento que abrimos se mostrará en esta área con el nombre asignados, por default le asigna el nombre de untitle-1, está área nos permitirá movernos más fácilmente entre ellos. Si junto al nombre aparece un * este nos indica el documento ha sufrido cambios y estos no han sido guardados. Presionado botón derecho del mouse sobre la pestaña aparecerán diversas opciones que te permitirá Abrir, Guardar, Guardar como…, Cerrar, etc. Barra de herramienta de documentos: esta barra muestra las diferentes vistas de edición del documento o página, te permite acceder de manera rápida al título de la página o realizar las distintas opciones de validación que ofrece el programa. A continuación explicaremos cada una de las vistas del documento que puedes encontrar en Dreamweaver. Vista de código Esta vista te permite trabajar en un entorno totalmente de programación, de código fuente; no te permite tener una referencia visual de cómo te está quedando la página. Vista Diseño: En esta vista pueden trabajar con el editor visual ya que nos ofrece un aspecto muy similar al resultado final que aparecería en un navegador, pero totalmente editable
Dividir: Permite dividir la ventana en dos zonas: Código y Diseño. Generalmente en la parte superior encontrarás la vista de código que muestra el código fuente y en la parte inferior encontrarás la vista de diseño con el editor visual. Cambio que realices en cualquiera de las ventanas se verá reflejado en la otra. Vista en vivo: Muestra una representación más realista de la apariencia que tendrá la página en el navegador; es una vista no editable para el usuario, esto es que no puede hacerle cambio Vista en código en vivo: Se emplea en conjunto con la vista en vivo; divide la pantalla pero sin que podamos editar el código. Inspector de propiedades: esta ventana te permite examinar y editar las propiedades más comunes del elemento de la página seleccionado en ese momento, como texto, objeto insertado o imagen. Esta ventana cambiara las propiedades en función del elemento seleccionado. Barra de estado: muestra las dimensiones actuales de la ventana del documento en pixeles. Del lado izquierdo encontraremos el selector de etiquetas, después se muestra las herramientas de selección (selección, mano, zoom)
o paneles: es un conjunto de paneles o grupos que se muestran juntos en una orientación vertical. Estas ventanas o paneles se pueden acoplar o desacoplar moviéndose dentro o fuera del conjunto acoplado. Algunas acciones que puedes hacer con los paneles son las siguientes: Para acoplar un panel solo arrástralo a la parte superior o inferior de los otros paneles. Para acoplar un grupo de paneles, arrástrala por su barra de título (del área vacía) al conjunto acoplado. Para quitar un panel o grupo de paneles, arrástralo fuera del conjunto de paneles de su barra de título o hacer que flote con libertas. Como se puede observar el primer panel que se muestra es el panel de Insertar, en el cual encontramos diferentes categorías, cada una con herramientas clasificadas de acuerdo a su función por ejemplo: Hipervínculo, imágenes, Tablas, Multimedia, formularios, etc. Secuencia didáctica # 2: Entorno de trabajo Descripción. Pts. 6. Realizar un dibujo de la página principal de Dreamweaver e indicar las partes principales de dicha pantalla: barras de herramientas, los paneles o ventanas, el área de trabajo y las vistas del documento. (Debe traer portada y cada una de las partes identificadas con colores diferentes) 2 7. Anotar de forma individual la definición de cada uno de los elementos de Dreamweaver así como la función de cada una de las barras de herramientas y los paneles, (Debe traer portada) 1 8. Anote los pasos en una hoja en blanco para activar las diferentes vistas de un archivo de Dreamweaver. (Debe traer portada) 1 9. Elaborar un resumen del entorno de trabajo de Dreamweaver, el cual debe contener las partes de la pantalla y el uso del programa. (PA) 2 1.3 Crear o editar un sitio web sin conexión a Internet En la mayoría de los sistemas de creación y publicación de páginas, un sitio consta de dos partes: un conjunto de archivos situados en un equipo local y una ubicación en un servidor web remoto donde de publicarán los archivos. El método más empleado para crear un sitio web es crear y editar las páginas en el disco local y publicar copias de esas páginas en el servidor web remoto. Para ello una vez que tengas creadas las carpetas que formarán la estructura del sitio local o la carpeta raíz ya puedes definir el nuevo sitio
ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a Nuevo sitio. Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los sitios definidos. También podemos acceder desde el icono de acceso rápido de la barra de la aplicación a la opción Administrar sitios o Nuevo sitio... En el caso de haber seleccionado la opción de Administrar sitios, te muestra la siguiente ventana que contiene la lista de los sitios locales definidos. En dicha ventana se pueden mostrar varios sitios locales en un mismo ordenador.
Archivo Este es uno de los paneles más importantes de Dreamweaver ya que da acceso a los archivos del sitio. Es posible visualizar un sitio en el panel de Archivo o en una ventana; para cambiar a otra solo hay que pulsar el botón que aparece en la parte superior del panel de la ventana . Este nos sirve para ver a la vez el sitio local y el sitio remoto y así poder sincronizar los archivos o compararlos. En esta imagen se visualizan ambos. Dreamweaver guarda la caché de nuestro sitio, cómo se organizan los archivos y se relacionan entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde Dreamweaver, automáticamente actualizará todas las referencias a ese archivo (enlaces desde otras páginas, origen de la imagen, etc). En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las páginas no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc., ya que Dreamweaver simplemente no encontrará la página. Al modificar algún objeto que es referenciado por algún otro documento, se muestra una ventana similar a ésta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados. Sitio remoto Vacío Sitio local Nuestro s
hay que pulsar sobre el botón Actualizar, aunque esto dependerá de si tenemos configurada la opción Mensaje al actualizar vínculos si movemos archivos. Lo cual podemos establecer desde el menú Edición, opción Preferencias, categoría General Propiedades del documento Este permite definir el formato de cada una de las páginas a través del cuadro de diálogo del mismo nombre; se puede abrir de diferentes maneras: Menú Modificar, Propiedades de página; Combinación de teclas Ctrl. + J; Presionando botón derecho del mouse en el fondo de la página , o bien desde; Ventana del Inspector de propiedades En el cual se abrirá el siguiente cuadro de diálogo: Como podrás observar del lado izquierdo te muestra las categorías y del lado derecho las opciones que pueden ser modificadas. CATEGORÍA PROPIEDADES Apariencia (CSS) Fuente de página: es el tipo de letra que le aplicaremos al texto Tamaño: es el tamaño de la fuente que aplicaremos al texto. Color del texto: es el color de la fuente. Color del fondo: específica un color de fondo para el documento, este solo se mostrará en el caso de no haber establecido ninguna imagen de fondo. Imagen de fondo: muestra una imagen de fondo para el documento. Esta imagen se muestra en mosaico; así mismo es importante al elegir una imagen de fondo tener en cuenta
colores de la imagen para establecer unos u otros colores para el texto,. Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita, seleccionamos la opción no-repeat. Si queremos que se repita o dejamos la opción en blanco o seleccionamos la opción repeat. Si queremos que se repita solo en horizontal seleccionamos la opción repeat-x y si queremos que se repita en vertical, entonces seleccionamos repeat-y. Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador. Apariencia (HTML) Imagen de fondo: permite especificar una imagen de fondo para el documento. Fondo: permite especificar un color de fondo para el documento. Texto: es el color de la fuente. Vínculos: es el color que mostrará el texto de los vínculos. Vínculos visitados: es el color que mostrará el texto de los vínculos visitados. Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón hace clic sobre el mismo. Márgenes: establece márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador. Se puede observar que muchas de las propiedades de HTML y CSS son similares; pero la diferencia es que el CSS aplica a la configuración utilizando reglas de estilo; mientras que las HTML lo hacen como atributo estos ya en desuso porque te limita al contenido y no al diseño. Colores Para la asignación de los colores es necesario desplegar una paleta de colores, al hacer esta selección se muestra el valor hexadecimal del color en la parte superior La paleta de colores utiliza 216 colores seguros para la web, esto es que se muestran de la misma forma en cualquier navegador bajo cualquier sistema operativo.
colores pueden ser personalizados desde el botón de comando de la parte superior de la paleta. Los colores se asignan por medio del siguiente botón , los cuales suelen aparecer en la ventana de inspector de propiedades de muchos de los objetos; este botón te permite insertar un color, pero también lo puedes hacer desde la caja de texto que se encuentra al lado en la cual especifiques el valor hexadecimal del color que deseas aplicar. Por ejemplo el color axul con un valor de #39F donde el botón quedaría de la siguiente manera: En la web los colores se representan por la cantidad que contienen de los colores primarios aditivos (Rojo, Verde y Azul) ; para indicar la cantidad de los mismo es necesario emplear el valor hexadecimal que van desde el 0 a la F; donde le valor mínimo (00) que indica la ausencia de color y el máximo FF que tiene su intensidad total. Para indicar que nos referimos a un color utilizamos el símbolo # al principio del código; por ejemplo #F7F0E2, donde el primer par corresponde al rojo, el segundo al azul y el ultimo al verde. Secuencia didáctica # 3: Configuración de un sitio local Descripción. Pts. 10. Anote los pasos en una hoja en blanco los pasos para ver o modificar las propiedades del documentos. 1 11. Registre en un documento de Word todas las opciones que tiene la opción de colores de Dreamweaver. 1 12.Realizar la edición de un sitio web, a través del asistente, donde realices cambios al color, tipo de fuente, alineación, etc. (PA) 1 Primer evaluación parcial (escrito). Unidad de competencia 1, secuencias didáctica 1, 2 y 3. 10 HASTA AQUÍ PRIMER EXAMEN PARCIAL
de la etapa 2 Competencias genéricas 4. Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la utilización de medios, códigos y herramientas apropiados. Atributos Identifica las ideas clave en un texto o discurso oral e infiere conclusiones a partir de ellas. Maneja las tecnologías de la información y dela comunicación para obtener información y expresar ideas Competencias generales Maneja tecnologías de la información y la comunicación como herramienta para el acceso a la información y su transformación en conocimiento, así como para el aprendizaje y trabajo colaborativo con técnicas de vanguardia que le permitan su participación constructiva en la sociedad. Competencia Profesional Aplicar las herramientas de Dreamweaver para la creación de una página web en el ambiente laboral Elementos de competencia - Conocer los tipos de imágenes para elaborar páginas web mediante la herramienta de Dreamweaver. - Conocer los tipos de enlaces para identificar sus funciones dentro del programa de diseño de páginas web. - Incorporar el uso de tablas para comprender su aplicación en el programa de diseño de páginas. - Utiliza los marcos para la elaboración de páginas de Dreamweaver en el salón de clases. - Crear formularios para diseñar páginas web mediante la herramienta de Dreamweaver.
de Aprendizaje Llevar a cabo cada una de las actividades marcadas en este manual, con la dirección y supervisión por parte del docente, donde en cada una de ellas debe llenar el formato correspondiente a la práctica o actividad en cuestión.
2 Uso de texto, imágenes y enlaces 2.1 Características de texto Las características de los textos seleccionados pueden ser definidos a través del inspector de propiedades, donde se encontrarán diversas características que se explicaran a continuación: Formato: Permite seleccionar un formato para los párrafos ya definidos para HTML; los cuales pueden ser encabezados, párrafo o preformateado. Los encabezados se utilizan para establecer títulos dentro de un documento (H1, H2, H3, H4. . . H6). El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito por el usuario. Fuente: Permite seleccionar un conjunto de fuentes, los cuales serán mostrados como un grupo de fuentes en lugar de una sola, ya que es posible establecer una única fuente; esto posibilita que el usuario no tenga una fuente y se aplique otra del conjunto. Tamaño: Permite cambiar el tamaño del texto, el cual se puede definir en píxeles, centímetros, etc. Color: Selecciona el color de la fuente, ignorando el color que se haya definido en las propiedades de la página; si no se ha estableció ningún color en las propiedades , el color del texto por defecto será negro. Estilo: Establece si el texto se mostrará en negrita o cursiva; esto también de puede hacer a través dl menú de Texto, donde se pueden encontrar otras opciones como subrayar.
Con estos botones es posible establecer el acomodo del texto dentro de la página; por ejemplo: izquierda, derecha, centrada y justificada. Sangría: Son los botones que permiten colocar un sangrado al texto capturado, o bien, anularlo. Un sangrado o sangría es un margen que se establece a ambos lados del texto Lista: Estos permiten colocar caracteres especiales (viñetas) o una lista numerada al insertar un texto. Una es lista desordenada y otra se conoce como ordenada. 2.2 Uso de imágenes Otro de los elementos importantes en el diseño de un página web, es la forma de ilustrarlo por lo cual veremos la importancia de la inserción de imágenes. Las imágenes pueden ser de diferentes formatos: bmp, gif, jpg, png, tiff, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o no ser compatibles con algunos navegadores. Los formatos más utilizados para web son el GIF, el PNG y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos: Formato GIF: Utilizan un máximo de 256 colores, y son recomendables para dibujos con grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animaciones. En cambio, no están recomendados para fotografías, ya que se perderían colores, y al no tener áreas de color continuo, el archivo final sería mayor que por ejemplo un JPG. Formato JPG: Estas imágenes pueden contener millones de colores, en un archivo comprimido de tamaño razonable. Por ejemplo, las imágenes que obtenemos de una cámara digital suelen estar en este formato.
tanto, son especialmente indicadas para fotografías, o gráficos complejos, obteniendo mejores resultados que el GIF. En cambio, en gráficos con pocos colores y continuos, generará un archivo mayor que el GIF, y podremos apreciar pérdida de calidad. Formato PNG. Se trata de un formato de compresión sin perdida. Tiene varias versiones: PNG 8 es un formato de 256 colores muy similar al GIF, que en teoría obtiene archivos algo menores. También admite transparencias. PNG 24 y PNG 36. Es un formato de color verdadero (34 o 36 bits), lo que hace que sea un archivo de tamaño algo mayor. Admite canal de transparencia alfa, lo que quiere decir que puede obtener distintos niveles de transparencia, a diferencia de PNG 8 o GIF que pueden ser totalmente transparentes o no. El resultado es el de mayor calidad, pero también de mayor tamaño. Este formato es el más adecuado cuando necesitamos distintos niveles de transparencia, o requerimos que una imagen muestre correctamente todos sus colores y detalles, evitando la pérdida de calidad que puede producir JPG. También resulta especialmente indicado para imágenes con degradados de color. Lo habitual es utilizar GIF o PNG para pequeños gráficos, normalmente elementos del diseño o imágenes simples, y JPG para fotografías, sean del tamaño que sean. Nos limitaremos al uso de estos formatos. Ya que aunque algunos navegadores soportan otros, no lo hacen todos. Si introduces una imagen no soportada en Dreamweaver, te aparecerá un cuadrado gris en su lugar. 2.2.1 Insertar una imagen Una de las formas de insertar una imagen es accedes al menú Insertar, opción Imagen; la cual mostrará la siguiente ventana, desde la cual podrás selecciona la imagen: o bien con la combinación de teclas CTRL + Alt + I.
Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicación diferente, la imagen puede no verse al estar siendo buscada en la ubicación anterior. La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento. Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imágenes| y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada AG00011_.GIF, se encuentra dentro de la carpeta PUB60COR En el caso de insertar la imagen como relativa al Documento la ruta sería: C:\Archivos de programa\Microsoft Office\CLIPART\PUB60COR Otra forma de insertar una imagen, es arrastrarla directamente desde el panel de Archivos sobre el documento; si insertamos una imagen y luego la borramos, movemos o le cambiamos el nombre aparecerá el vínculo roto y pueden aparecer de la siguiente manera: o .
Cambiar el tamaño de una imagen En Dreamweaver las imágenes pueden ser modificadas, el cambio se aplica directamente sobre el archivo de la imagen, solo varía la visualización de la misma dentro de la página. Existen dos formas de modificar el tamaño. 1. Una de ellas es solo seleccionar la imagen, arrastrar con el puntero de los recuadros negros que aparecen alrededor de la imagen. 2. O también a través del inspector de propiedades, cambiando los campos de Ancho y Alto; estos campos te muestran el tamaño original de la imagen, donde el valor se muestra resaltado en negrita y aparece una fleca circular que te permitirá volver al tamaño original solo dando un clic en ella. También se puede modificar la ubicación de la imagen para ello se hace desde el campo Alinear del inspector de propiedades. La alineación de las imágenes ofrece más posibilidades que la del texto: superior, medio, medio absoluta, línea de base, etc. Así mismo se pueden crear vínculos y comportamientos sobre partes de una imagen, sin la necesidad de que sea sobre toda ella. A esto se le conoce como mapa de imagen. 2.2.3 Mapa de imágenes Se denominan así porque son las partes de una imagen que pueden ser utilizadas para asignarle algún tipo de comportamiento. Estos mapas de imagen se pueden crear desde el inspector de propiedades, con la imagen seleccionada.
la imagen seleccionada, es posible crear el mapa de imagen empleando los siguientes botones: . Los tres últimos botones son los que se utilizan para crearlos, el primero marca el mapa en forma rectangular, el segundo en forma circular y el último en forma libre, dependiendo de lo que desees crear. Ejemplo de mapa de imagen libre La apariencia del puntero del mouse cambia al posicionarlo sobre la imagen y es posible dibujar o marcar el mapa sobre la imagen. Al estar seleccionado un mapa el inspector de propiedades cambiara y te permitirá asignar un vínculo y colocarle de manera opcional un texto alternativo, por ejemplo: 2.2.4 Imagen de sustitución (Rollover) Esto es una imagen que cambia por otra cuando colocas el puntero del mouse sobre ella. Este tipo de imagen se utiliza en los menús o en los botones para desplazarnos a través de distintas páginas. Al posicionar el puntero del mouse sobre la imagen original esta cambiara por la imagen de sustitución y así hemos creado un Rollover. Para llevar a cabo esta actividad hay que seleccionar el menú Insertar, opción Objetos de imagen y la opción Imagen de sustitución y te mostrará la siguiente ventana. Original Sustitución
recomienda que la opción Carga previa de imagen de sustitución para que esta se cargue inmediatamente en la página, así se evitará la demora en la descarga de la misma, cuando se llegue el momento de mostrarla. El texto alternativo es el que se mostrará al situar el puntero del mouse sobre la imagen, o bien, el que se mostrará si por algún motivo la imagen no puede ser mostrada por el navegador. Secuencia didáctica # 4: Inserción de Texto e Imágenes Descripción. Pts. 12. Elaborar un documento en Word donde expliques el uso del texto y las imágenes que se pueden emplear en Dreamweaver. 1 13. Realizar un página en Dreamweaver donde emplees texto para mostrar una serie de definiciones de la etapa 1 de este manual (máximo 10). 1 14. En el documento anterior de Dreamweaver, coloca al final del texto una imagen (pantalla de Dreamweaver) y que esta sea sustituida por otra a tu gusto. 1 15. Diseña una página web con imágenes y estilos personalizados CSS, donde incluyas al menos dos imágenes y los estilos CSS sean creados. (PA) 1 2.3 Enlaces Los enlaces (hiperenlaces) o, son enlaces del documento que permiten que cuando se hace clic sobre ellos, se abra una nueva página, se abra un documento, o nos traslademos a otro punto de la página en la que nos encontramos. La manera más sencilla de crear un enlace es desde el inspector de propiedades por lo que es necesario seleccionar el texto que fungirá como enlace y posteriormente dar un clic en Vínculo del inspector de propiedades.
posible crear vínculos vacíos, que pueden ser útiles cuando se empelan comportamientos; para ello es necesario solo escribir una almohadilla #. Otra forma de crear un enlace es desde el menú Insertar y la opción Hipervínculo, la cual te mostrará la siguiente ventana: Deberás completar o rellenar cada uno de los campos de la ventana mostrada, por ejemplo: Texto: es el texto a mostrar en el enlace. Vinculo: Es la página a donde redirigirás el enlace, si se trata de una enlace externo deberá empezar siempre por http://. O bien, da un clic en la carpeta que aparece a un lado de la caja de texto y localiza la página, imagen o archivo que vayas a vincular. Destino: es la ventana donde se abrirá la página. Título: es una ayuda contextual del vínculo, el cual aparecerá al mantener un instante el cursor sobre el enlace. Tecla de acceso: Facilita la accesibilidad a las páginas. Índice de tabulador: Se utiliza papa establecer la prioridad del enlace, esto se hará con la tecla del Tabulador. Destino del enlace Este determina en que ventana va a ser abierto la página vinculada y dependerá de si el documento esta creado en marcos. Estos e podrá especificar en el inspector de propiedades (HTML) a través de la opción Destino. _blank: Abre el documento vinculado en una nueva ventana o pestaña del navegador.
Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. Tiene sentido si se emplean marcos. _self: Abre el documento vinculado en el mismo marco o ventana que el vínculo. Es la opción predeterminada, y la que se produce si no indicamos otra cosa. _top: Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se emplean marcos. Si en la página no empleas marcos (lo común hoy en día) simplemente no especificaremos nada para abrirlo en la misma ventana, y emplearemos _blank para abrir ventanas nuevas. Formato del enlace En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo, puede adquirir cuatro colores diferentes que pueden especificarse a través de las propiedades de la página. Estos cuatro colores diferentes corresponden a los tres estados del vínculo: vínculo normal, vínculo activo (el último pulsado), vínculo visitado o vínculo de sustitución (cuando el cursor está sobre el vínculo). Aquí tienes un vínculo de ejemplo: www.google.com Si has visitado alguno, verás que sale en un tono morado, si no sale en azul. Recuerda que como todo en nuestra página, los vínculos tienen un formato por defecto, pero es totalmente personalizable por CSS. Para ello, basta con crear una Regla de estilo para la etiqueta a. Si queremos distinguir entre los tres estados del enlace, emplearemos los siguientes selectores: a:link para los enlaces normales. (color azul) a:visited para los enlaces visitados. (color morado) a:active para los enlaces activos. a:hover para los enlaces con el cursor encima. Aunque en las propiedades del documento contamos con la categoría Vínculos CSS que nos permite establecer estos valores.
el vínculo está definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona. Si la imagen contiene un borde o recuadro alrededor lo podemos quitar de la siguiente manera: En el Inspector de propiedades CSS seleccionamos Nueva regla CSS en Regla de destino, y pulsamos Editar regla. En Tipo de selector, elegimos Compuesto, y en Nombre de selector escribimos a img, es decir, imágenes que estén dentro de una etiqueta a (de enlace). Se abrirá la ventana Definición de regla para a img: En ella, seleccionamos la categoría Borde, y en Style seleccionamos none. Pulsamos Aceptar. Esta regla hará que las imágenes con enlace se muestren sin borde. Si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vínculo. Suele adquirir la apariencia de una mano señalando.
a correo electrónico Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil cuando se desea que los visitantes de la web puedan contactar con nosotros. La sintaxis del vínculo en este caso es mailto:direccióndecorreo. Puede definirse el vínculo a través de Vínculo, del inspector de propiedades, seleccionando previamente el texto o la imagen deseados. También es posible a través del menú Insertar, opción Vínculo de correo electrónico. En este caso no es posible asignar el vínculo a una imagen, solo permite introducir el texto que contendrá el vínculo de correo. Lo que hace esta opción es abrir el cliente de correo predeterminado del usuario (Outlook, Firebird...). Por lo que puede no ser práctica si el usuario no lo tiene, se conecta en un ordenador público, o emplea el correo web directamente. 2.4 Tablas Una tabla en cualquier documento, página o libro te permite mostrar la información de forma organizada y ordenada y para poder crear una tabla hay que seleccionar el menú Insertar, a la opción Tabla.
la ventana que aparece habrá que especificar el número de Filas y Columnas que tendrá la tabla, así como el Ancho de la tabla. El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje de la página o del elemento contenedor y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla. Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrará borde. Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y los bordes de éstas. Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla. También se puede establecer si se quiere un encabezado para la tabla, por ejemplo para indicar el contenido de filas o columnas. Si deseamos colocar un título, lo indicamos en Texto, el título aparecerá fuera de la tabla. En Resumen: podemos indicar una descripción de la tabla pero dicho texto no aparece en el navegador del usuario.
las celdas Las celdas son cada uno de los recuadros que forman una tabla, resultan de la intersección entre una fila y una columna. imagen y texto C O L U M N A Texto dentro de una celda CELDA FILA Para comenzar a insertar algún elemento en una celda, ya sea texto o imágenes, simplemente hay que situar el punto de inserción dentro de la celda deseada haciendo clic. Pero si lo que se desea hacer es insertar elementos ya existentes en la celdas, crearnos primero la tabla vacía, y después seleccionar y arrastrar los elementos a insertar sobre la celda. Seleccionar elementos de una tabla Existen varias formas de seleccionar una tabla. 1. Una de ellas es a través del menú Modificar estando el punto de inserción en la tabla, o 2. Desplegando el menú contextual de la tabla al pulsar con el botón derecho sobre ella. En ambos casos aparece la opción Tabla, a través de la cual se puede elegir la opción Seleccionar tabla. También es posible seleccionar pulsando con el ratón sobre el borde exterior que la rodea, o pulsando <table> que aparece en la barra de estado de la ventana de documento. Cuando se selecciona una tabla o cuando se coloca el
sobre cualquier parte de la tabla, este muestra una zona verde con el ancho de la tabla y de cada columna. Junto a los anchos se encuentran unos menús desplegables (menú de encabezado de la tabla y menú de encabezado de la columna). Estos menús permiten acceder rápidamente a determinados comandos relacionados con la tabla. Formato de tabla Las propiedades de la tabla se especifican a través de su inspector de propiedades. En este caso, se crearán atributos para la tabla. Pero algunos de estos valores, como el ancho, los podemos especificar mediante CSS. A través del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha de la pantalla), el borde de la (en Col. borde) o los valores de relleno y espaciado de la celda. Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores.
parte superior del inspector de propiedades nos permite alternar entre las propiedades HTML, que en este caso sirven para especificar las propiedades del texto que se insertará dentro de la celda (o celdas) seleccionada, y la propiedades CSS para definir los estilos. La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo (que es preferible definir con CSS), la alineación del contenido en horizontal (Horz.) y vertical (Vert.), especificar su tamaño (An. y Al.) (en Fnd). Si no queremos que el tamaño se ajuste al contenido, marcamos la opción No aj. y si queremos convertirla en un encabezado, basta con marcar la opción Enc.. Cambiar tamaño de tabla y celdas Como ya sabes, el Ancho de una tabla puede ser definido como Píxeles o como Porcentaje. El tamaño de la tabla a través del inspector de propiedades estará especificado por los valores de An (anchura) y Al (altura). Normalmente sólo se especifica la anchura, no la altura. Los valores An y Al de una celda siempre están en Píxeles. No es necesario especificar ninguno de estos dos valores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamaño, y no que se ajusten al contenido o al tamaño de la ventana. No solo puede establecerse el tamaño de las tablas y de las celdas a través del inspector de propiedades. También es posible hacerlo manteniendo pulsado el ratón sobre alguno de los bordes, arrastrándolo hacia la posición deseada.
y eliminar filas y columnas Existen varias formas de añadir y eliminar filas y columnas a una tabla. Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el menú contextual de la tabla al pulsar con el botón derecho sobre ella, o bien abrir el menú Modificar. En ambos casos aparece la opción Tabla. Según las celdas seleccionadas, algunas de las opciones de Tabla se podrán utilizar mientras que otras no. Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna. La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda. También tenemos una opción más completa, la opción Insertar filas o columnas.... Al seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se insertarán serán filas o columnas, el número de ellas que se insertará, y la posición donde se insertarán.
eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la opción Eliminar fila o Eliminar columna del menú Tabla. También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr) Anidar, dividir y combinar celdas Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas. Lo que se muestra a continuación es un ejemplo de anidamiento. Como puedes observar, en la primera celda de la tabla se ha insertado otra tabla. Para anidar tablas sólo tienes que posicionar el cursor en la celda donde quieres insertar la nueva tabla e insertarla como ya hemos visto. Combinar celdas consiste en convertir 2 o más celdas en una sola por lo que dejará de haber borde de separación entre una celda y otra ya que serán una sola. Esto nos puede servir por ejemplo para utilizar la primera fila para escribir el título de
tabla, normalmente más ancho. En este caso habría que combinar todas las celdas de la primera fila en una sola. Mientras que dividir celdas consiste en partir en dos una celda. Una de las formas de dividir y combinar celdas es a través del inspector de propiedades. Si se seleccionan varias celdas pueden combinarse pulsando sobre el botón del inspector de propiedades (lo encontrarás en la parte inferior izquierda del panel Propiedades, o pulsando sobre la opción Combinar celdas de la opción Tabla, que como ya has visto puedes dirigirte a ella a través del menú contextual de la tabla y a través del menú Modificar. Podemos combinar celdas en vertical y horizontal: Para dividir una celda hay que pulsar sobre el botón del inspector de propiedades, o sobre la opción Dividir celda de la opción Tabla. En ambas situaciones, aparece una ventana en la que hay que especificar si la celda se va a dividir en filas o columnas, y el número de éstas.
de tabla Al trabajar con tablas en Dreamweaver se nos proporcionan distintos modos de visualización; pero los podemos visualizar de manera distinta desde el menú Ver opción Modo de tabla. Dentro de esta opción podemos elegir entre Modo estándar o el Modo de tablas expandidas. El Modo de tablas expandidas añade temporalmente relleno y espaciado de celda a las tablas de un documento y aumenta los bordes de las tablas para facilitar la edición. Este modo se puede utilizar para seleccionar elementos de las tablas o colocar el punto de inserción de forma precisa e introducir contenido pero en este modo no vemos la página como quedará exactamente. Secuencia didáctica # 5: Inserción de Enlaces y Tablas. Descripción. Pts. 16. Elaborar un documento en Word donde expliques la importancia de los enlaces y las tablas que se pueden emplean en Dreamweaver. 1 17. Defina en un documento en Word las siguientes opciones de los enlaces: blank, parent, self y top. 1 18. Crea una tabla donde insertes 5 correos electrónicos y realizar un enlace a uno de ellos. 1 19. Realice una práctica anotando los detalles en un documento de Word, 1
una tabla de 2 columnas con 4 renglones, rellene las celdas, inserte 1 columna y una fila según el ejemplo que el maestro proporcionará. 20. Crea una página web donde se muestre el empleo de los enlaces, donde al menos muestres dos.(PA) 1 21. Diseña una página web la cual contenga tablas, la cual debe tener al menos dos tablas. (PA) 1 Segunda evaluación parcial (escrito). Unidad de competencia 1 y 2, secuencias didáctica 1 a la 5 10 2.5 Marcos Los marcos o frames se emplean para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia. Cada uno de los marcos de una página, contiene un documento HTML individual. Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco. El trabajar con marcos puede resultar una tarea algo complicada, sobre todo al principio, aunque actualmente no son muy usados, resultan realmente prácticos a la hora de mostrarlos en la web. Uno de los inconvenientes de no emplear marcos es que nos vemos en la necesidad de tener que repetir los elementos comunes, como el menú y logo en cada página, con la complicación correspondiente a la hora de hacer un cambio
Crear marcos Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas. 1. Para crear un marco, primero hay que abrir un documento, de preferencia uno nuevo. 2. Seleccionar el menú Insertar, HTML, Marcos. A través de esta opción puede elegirse el tipo de marco que va a crearse. Vamos a ver el marco a la Izquierda. Si pulsamos sobre Izquierda aparecerá un nuevo marco a la izquierda del documento actual, como se muestra a continuación: Aparece una línea que divide el documento en dos. En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El marco de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como marco padre (MainFrame). Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado. El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.
marcos Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos, que puede abrirse a través del menú Ventana. También puedes abrir el panel Marcos pulsando la combinación de teclas Mayúsculas + F2. En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se puede pasar de uno a otro pulsando sobre ellos en el panel. También puede seleccionarse la página de marcos pulsando sobre el borde que rodea a los marcos (el que aparece más grueso y en relieve en la imagen). Para especificar las propiedades específicas de cada uno de ellos, sí es necesario seleccionar los marcos. Guardar los marcos Todos los documentos que contienen marcos tienen que tener una página en cada uno de ellos. Es por esto que al crear algún marco, se cargan páginas nuevas por defecto en cada uno de ellos, a excepción del marco que contiene la página original. Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, por lo que es necesario guardar la página que contiene el grupo de marcos, así como cada una de las páginas que están incluidas en sus marcos. No es conveniente guardar la primera vez los marcos con la opción Guardar todo , ya que podemos equivocarnos al dar los nombres a los nuevos documentos. Es preferible guardar cada documento uno por uno. Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo previamente. Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor en ellos antes de pulsar sobre Guardar
marcos Una vez seleccionado un marco a través del panel Marcos, pueden establecerse sus propiedades a través del inspector de propiedades. Cada marco tiene asignado un nombre, que puede cambiarse a través de Nombre de marco. El nombre no puede contener espacios en blanco. En Origen aparece el nombre del documento HTML que está contenido en el marco. En Bordes puede elegirse si aparecerá o no una línea separando el marco del resto de marcos. En el caso de que se muestre el borde, se puede especificar un color para éste a través de Color borde. Desplaz. indica si aparecerán o no las barras de desplazamiento cuando el documento del marco no pueda visualizarse completamente. Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar las medidas del marco desde el navegador. El Ancho del margen y el Alto del margen indican la separación que habrá entre el contenido del marco y sus bordes izquierdo-derecho y superior-inferior. Si lo seleccionado es todo el conjunto de marcos (la página de marcos), el inspector de propiedades es algo diferente. En Bordes puede elegirse si aparecerá o no una línea separando los marcos entre sí y puede especificarse un color para este a través de Color del borde. También es posible establecer un grosor para el borde a través de Ancho.
campo Columna (o Fila dependiendo del marco elegido en Selección Fila Col.) sirve para especificar el tamaño del marco, que puede ser en Píxeles, Porcentaje (de la ventana) o Relativo (proporcional al resto de marcos). Contenido del marco Como ya has visto, el contenido de un marco puede establecerse a través del campo Origen del inspector de propiedades. Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras que el de otros ha de poder variar. A través del campo Origen del inspector de propiedades, sólo es posible especificar el documento que se cargará inicialmente en el marco, pero hemos de poder cambiar este documento por otro a través de vínculos. 2.6 Formularios Los formularios se emplean para recoger datos de los usuarios; pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc. Una vez que el usuario rellena los datos y pulsa el botón para enviar el formulario se arrancará un programa que recibirá los datos y hará el manejo correspondiente. Aquí vamos a ver cómo crear el formulario, (insertar campos y botones en el formulario y validarlos). Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.
de formulario Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Formulario, o lo que es más cómodo si vamos a insertar varios elementos, desde el panel Insertar en la sección Formularios. Esta opción accede a la lista de todos los objetos de formulario que pueden ser insertados en la página. Campo de texto y Área de texto Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias. Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando la opción Una línea o Multi línea respectivamente. También es posible definirlo como Contraseña es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en la imagen siguiente. A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento. Campo de te Área de texto A través del inspector de propiedades es posible asignar también el Ancho del cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro. Botón Es el botón conocido de Windows. El botón puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores). Siendo posible cambiar el texto del botón, a través de la propiedad Valor del inspector de propiedades.
mínimo tiene que haber un botón del tipo Enviar formulario, imprescindible para enviar los datos. Además le suele acompañar un botón Restablecer formulario para hacer reseteo en el caso de que el usuario quiera comenzar de nuevo a rellenarlo. 2.6.1 Crear formularios Para el diseño de los formularios se hace a través del menú Insertar → Formulario, opción Formulario, o desde el panel Insertar. Una vez creado un formulario, este se mostrará en la ventana de Dreamweaver como un recuadro formado por líneas naranjas discontinuas, similar al de la imagen siguiente. Estas líneas son ayudas visuales al trabajar en diseño, pero no se verán en el formulario final. Entre las propiedades del formulario, encontramos el campo Acción. En el indicamos a dónde se envían los datos. Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes puedes insertar a través del menú Insertar, opción Formulario o desde el panel Insertar. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia. Validar formularios La validación de formularios sirve para hacer que JavaScript valide el formulario antes de que se envíe, avisando al usuario para que corrija los errores, como
obligatorios sin rellenar. Esto es mucho más eficiente y rápido que enviar la página y validarla sólo en el servidor. Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a través del menú Ventana, opción Comportamientos, o pulsando Mayús + F4. Comportamientos forma parte del panel Inspector de etiquetas, en este panel hay que desplegar el botón y pulsar sobre la opción Validar formulario, deberás haber seleccionado el formulario previamente. Entonces se mostrará una ventana como la siguiente, donde aparecen todos los elementos del formulario. Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir. Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser numérico (Número) y si ha de estar en un rango, una Dirección de correo electrónico, etc.
didáctica # 6: Creación de Marcos y Formularios Descripción. Pts. 22. Elaborar un documento en Word sobre los marcos y el uso de formularios que se pueden utilizar en Dreamweaver. 1 23. Elaborar una página web con marcos, inserción de texto, de imágenes. 1 24. Configurar un marco y guardarlo para poder usarlo posteriormente. 0.5 25. Elaborar un formulario con los campos de una agenda telefónica: nombre, dirección, teléfono y correo electrónico. 1 26. Elaborar un formulario con los campos de nombre, calificación1, calificación2 y promedio. 1 27. Elaborar un formulario para realizar la suma de dos números. 1.5 28. Crear una página web conde muestres el empleo de los marcos, dependiendo del estilo seleccionado, al menos debe contener dos.(PA) 1 29. Elaborar una página web donde diseñes dos formularios.(PA) 1
de la etapa 3 Competencias genéricas 5. Desarrolla innovaciones y propone soluciones a partir de métodos establecidos. Atributos Sigue instrucciones y procedimientos de manera reflexiva, comprendiendo como cada uno de sus pasos contribuye al alcance de un objetivo. Utiliza tecnologías de la información y comunicación para procesar e interpretar información. 8. Participa y colabora de manera efectiva en equipos diversos. Atributos Aporta puntos de vista con apertura y considera los de otras personas de manera reflexiva. Competencias generales Utiliza métodos y técnicas de investigación tradicionales y de vanguardia para el desarrollo de su trabajo académico, el ejercicio de su profesión y la generación de conocimientos. Atributos Elige los procedimientos adecuados en la resolución de un problema. Procesa información utilizando las tecnologías de la información y de la comunicación. Formula y concluye resultados a partir de las evidencias obtenidas. Elabora propuestas académicas y profesionales, inter, multi y transdisciplinarias de acuerdo a las mejores prácticas mundiales para fomentar y consolidar el trabajo colaborativo. Atributos Identifica los rumbos a seguir en el desarrollo de cualquier problema a través del trabajo colaborativo. Propone sus puntos de vista a la vez que respeta los de sus compañeros. Trabaja y participa con una actitud positiva en los diferentes roles de las tareas asignadas.
de competencia - Identificar los tipos de comportamientos de Dreamweaver para desarrollarlos dentro de una página web. - Conocer los tipos de capas para comprender sus funciones dentro del programa de diseño de páginas web. - Incorporar los elementos multimedia para implementarlos en una página web mediante el Dreamweaver. - Diseñar una página web para integrar los elementos desarrollados durante la unidad de aprendizaje. Actividades de Aprendizaje Llevar a cabo cada una de las actividades marcadas en este manual, con la dirección y supervisión por parte del docente, donde en cada una de ellas debe llenar el formato correspondiente a la práctica o actividad en cuestión.
3 Aplicación de comportamientos, multimedia y publicación en la web. 3.1 Comportamientos Los comportamientos son acciones que suceden cuando los usuarios realizan un eventos sobre un objeto, como puede ser mover el ratón sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc. Los comportamientos no existen como código HTML, se programas en JavaScript. Dreamweaver permite insertarlos a través del panel de Comportamientos, por lo que no es necesario escribir ninguna línea de código JavaSript para programarlos. Otros comportamientos que ya has manejado son los que se aplican sobre las imágenes de sustitución y las barras de navegación, que ya están predefinidos, por lo que no es necesario introducir este conjunto de comportamientos a través del panel de Comportamientos. El panel de Comportamientos se puede acceder a través del menú Ventana, opción de Comportamientos, o bien, con la combinación de teclas Mayus + F4. En este panel hay que desplegar el botón pulsando sobre él, y en Mostrar eventos elegir HTML 4.1. Es la opción por defecto. Esta opción se debe a que en el pasado, los comportamientos solían ser diferentes dependiendo del navegador. En la actualidad, los navegadores tienden a seguir el estándar, lo que hace que ya no tengamos problemas de compatibilidad. Sólo habremos de cambiarlo si hacemos páginas específicas para navegadores más viejos, ya en desuso. 3.2 Multimedia Ahora vamos a ver cómo insertar elementos multimedia. En concreto, cómo insertar una animación Flash, un sonido y un vídeo, que son los más empleados.
Películas Flash (SWF) Son animaciones, cuyo archivo tiene la extensión SWF. Es frecuente verlas en las páginas iníciales de los sitios web, a modo de presentación hacia los usuarios, como banners publicitarios, como botones... Flash es el elemento multimedia más empleado en las páginas web. Estas películas pueden crearse mediante el programa Flash también de Adobe. Para poder ser visualizado en el navegador, y necesitan que el usuario tenga instalado el plug-in de Flash Player. Su instalación es muy sencilla y normalmente ya viene con el navegador. Los archivos SWF suelen ser lo suficientemente pequeños para ser publicados en una página web en forma de animaciones con diversas funciones y grados de interactividad. Estos archivos son compilados y comprimidos a partir de los archivos editables con los que el usuario trabaja en Adobe Flash; están construidos principalmente por dos elementos: objetos basados en vectores e imágenes. Para insertar un archivo flash en la ventana de documento deberá situar el punto de inserción en el lugar donde se desea insertar la película Flash. Podrá insertarla de las siguientes maneras: Seleccionando la opción Insertar > Media > SWF. Se abrirá el cuadro de diálogo Seleccionar archivo y buscaremos el archivo de película Flash (swf), O bien, desde el panel Insertar hacer clic en la ficha Común y seleccionar la opción Media: SWF. De cualquiera de las formas se abrirá el siguiente cuadro de diálogo:
las opciones más importantes que nos ofrece el inspector de propiedades cuando tenemos seleccionado el archivo Flash: Como en otros elementos, como las imágenes, podemos asignarle el ancho (An.) y alto (Alt.). En Archivo, indicamos la ruta hasta el archivo SWF. Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), nos resultará muy útil indicar su ubicación en Origen. Así, para editarlo, bastará con pulsar Editar. La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio. La otra es la opción Rep. autom. (reproducción automática), que al estar marcada indica que nada más cargarse la página comenzará a reproducirse la película Flash. Si esta opción no estuviera marcada, se mostraría únicamente el primer fotograma de la película hasta que el usuario la activase. Por tanto interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún comportamiento. La Calidad, cuanto más baja, antes se cargará el archivo pero peor se verá. Conviene dejarla en Alta para verlo tal cuál se creó. La Escala permite elegir cuanto se verá del archivo. Las películas Flash no siempre son del tamaño exacto del contenido, pueden tener un escenario de fondo
del objeto, aunque no se muestre. Si dejamos Predeterminada, se verá todo la película. En cambio, si elegimos Ajuste exacto, se verán sólo los objetos, omitiendo el escenario de fondo. Alinear funciona como con las imágenes, y nos permite alinear la película en relación con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido del elemento que contiene el Flash (normalmente un párrafo) empleando CSS. Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el Flash. En cambio, si es Transparente, el fondo se verá transparente (a no ser que se haya especificado un color de fondo en el Flash). El botón Reproducir nos permite ver la película. Al insertarse la película, veremos la ubicación en la vista de diseño con el siguiente aspecto: Al insertarse animaciones Flash, es frecuente que Dreamweaver añada algunos archivos que nos permitirán reproducir los elementos, normalmente creando la carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se verán. De todas formas, Dreamweaver nos avisará cuando incluya archivos.
Publicación de la Web. A continuación, se tomo un ejemplo de cómo puedes publicar una página en la web. Consideremos que este es un ejemplo tomado del mismo internet para que entiendas un poco el cómo publicar una página. El primer paso para alojar su página Web es, o bien comprar un dominio en un servidor Web o registrarnos en una de las múltiples páginas que existen, que nos ofrecen alojamiento gratis con algunas restricciones. Nosotros vamos a optar por la segunda opción, ya que es nuestra primera página Web. He seleccionado para este curso registrarnos en la página de multimania, podía haber seleccionado cualquier otra. Veamos los pasos que tenemos que hacer para tener nuestro espacio de alojamiento preparado para subir los archivos. En primer lugar escribiremos la dirección Web en nuestro navegador, en este caso http://www.multimania.es. Se abrirá la página y en la sección ¡Únete a multimania ahora! Introduciremos un nombre de usuario y la contraseña con la que nos queremos registrar. Cuando los haya introducido pulsará el botón Sign up! A continuación deberá rellenar toda la información de esta página del formulario. También deberá introducir un correo electrónico dónde nos mandarán las instrucciones para activar nuestra cuenta. Cuando esté todo correcto pulsa el botón Continuar.
la página de Información adicional, rellene los datos que se le piden, marque la casilla Acepto los términos y condiciones, introduzca el Código de seguridad y haga clic en el botón Registrar.
siguiente página informa que se le ha enviado un mensaje a su cuenta de correo electrónico y que en él aparece el vínculo que debe utilizar para activar la cuenta. Una vez que la cuenta está activada hay que elegir un sitio Web y una contraseña FTP. El nombre del sitio tendrá la siguiente forma http://cursodreamweaver.mi- website.es, ya que podemos elegir el subdominio. La contraseña FTP se la pedirán cuando publique su sitio por FTP. Cuando tenga los datos introducidos, pulse el botón Siguiente.
último, le aparecerá un mensaje con su nombre de usuario, dándonosla bienvenida a Multimania y ofreciéndonos la oportunidad de entrar a nuestra cuenta. En dado caso que se tenga alguna duda, tenemos que acercarnos al proveedor del servicio para que nos ayude con la publicación de la página. Secuencia didáctica # 7: Aplicación de Comportamientos Descripción. Pts. 30. Elaborar un documento en Word sobre los comportamientos y su aplicación en Dreamweaver. 1 31. Elaborar un documento en Word sobre las capas y su aplicación en Dreamweaver. 1 32. Aplicar un comportamiento en una página web, prediseñada con anterioridad. 1 33. Aplicar 2 comportamientos en una página web, prediseñada con anterioridad. 1 34. Elabora una página web donde hagas uso de los comportamientos, la cual debe contener al menos dos comportamientos.(PA) 1 35. Diseña una página web con la inclusión de capas, al menos una. (PA) 1 Secuencia didáctica # 8: Manejo de Multimedia Descripción. Pts. 36. Elaborar un documento en Word sobre el manejo de multimedia en Dreamweaver y lo relacionado con películas, sonido y videos. 2
Insertar en una página web predefinida un sonido y un video. 1 38. Realizar otro ejercicio para insertar en una página web predefinida un sonido y un video. 1 39. Insertar en una página web predefinida una película. 1 40. Crear una página web, en la cual hagas empleo de elementos de multimedia.(PA) 1 Secuencia didáctica # 9: Publicación en la Web Descripción. Pts. 41. Investigar los pasos para publicar una página web en internet. Y entregar la investigación en un documento de Word. 2 42. Investigar en que sitios se puede publicar una página web de manera gratuita. 1 43.Realizar la publicación de una página web ya terminada con todos los atributos vistos en el curso 1 44. Diseña una página web, la cual debe contener imágenes, estilos CSS, marcos, enlaces, tablas, formularios, capas, comportamientos y multimedia.(PA) 2 Evaluación global (escrito). Unidad de competencia 1,2 y 3 20 Portafolio de evidencias 10
Antonio, o. P. (2010). Dreamweaver cs5. Anaya multimedia. Mediaactive. El gran libro de dreamweaver cs4. Marcombo, s.a. Oros cabello, j. L. (2010). Adobe dreamweaver cs4 profesional. Curso practico. Complementaria www.ciberaula.com/curso/dweavercs4/ www.emagister.com/cursos-dreamweaver-cs4-kwes-33889.htm www.educaweb.com/cursos-de/dreamweaver-cs4/
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
oracle4engineer
takuros
hiracky16
tsukuboshi
kamakiri1225
stefafafan
ohmori_yusuke
wannesrams
knishioka
kzykmyzw
.jpg){kind=avatar}
hiro_torii
visional_engineering_and_design
katarinadahlin
sabderemane
addyosmani
reverentgeek
davetheseo
aleyda
geoffreycrofte
axbom
soudai
popppiees
keavy
tammyeverts
