8. manual dreamweaver
TRANSCRIPT
52
53
INTRODUCCIÓN
Dreamweaver forma parte de la suite de herramientas para la creación de contenido Web. Es una herramienta que cubre todos los aspectos del diseño Web. Dreamweaver ofrece lo que es en esencia, un método de tres opciones para el desarrollo Web:
Para construir un sitio de cualquier grado de interés, casi es seguro que utilizarás una
combinación de estos 3 métodos.
Esta aplicación cubre todos los aspectos del diseño Web y el desarrollo de aplicaciones
Web profesional, tanto para usuarios que están comenzando a diseñar como para un usuario experto.
1.- Mediante las herramientas que proporciona,podrás ingresar directamente información (comotexto) en la página.
2.- Insertar la información de manera automáticamediante objetos y comportamientos integrados.
3.- Podrás ir tras bambalinas pasa trabajardirectamente con el código que integra tu página.
54
Antes de entrar de lleno con el trabajo de Dreamweaver, es necesario que comprendas
algunos términos importantes. Internet y world wide web
El Web está construido alrededor de varios conceptos y protocolos clave. Éstos se
encuentran interrelacionados, pero tienen objetivos muy diferentes. Sin ninguno de ellos, Internet no funcionaría como sabemos que lo hace. Necesitas conocer estos conceptos y la manera en cómo se integran en el ciclo de desarrollo y en la experiencia del usuario. Estos conceptos son:
Protocolo de transferencia de archivos (FTP)
World Wide Web (www)
TCP/IP
Protocolo de transferencia de hipertexto (HTTP)
Lenguaje de marcado de hipertexto (HTML)
El protocolo de transferencia de archivos (FTP, File Transfer Protocol) fue uno de los primeros métodos para usar Internet. Su propósito es evidente en su nombre: se usa para transferir archivos de un lugar a otro o de una computadora a otra en una red distribuida.
Protocolo de Transferencia de Archivos (FTP)
55
Originalmente, Internet se usó para que investigadores y científicos compartieran
información. Usaban FTP para transferir archivos completos de información de un lado a otro. Por ejemplo, un investigador redactaba algunas notas acerca de su serie de experimentos actual. Luego las subía mediante FTP a un depósito común, donde sus colegas podían descargarlas y comentarlas o agregar sus propios hallazgos. FTP era una buena manera de conectar a los usuarios entre sí y permitirles compartir sus archivos de computadora.
Hoy en día, FTP aún es uno de los aspectos más empleados de Internet. Si alguna vez has descargado un programa de shareware o comprado una actualización en línea, es posible que hayas utilizado FTP para esto. Como desarrollador Web, usarás FTP principalmente para colocar y recuperar los archivos que integran tus sitios en tu servidor remoto. Esto tendrá sentido cuando comprendas cómo se construye un sitio Web.
Como medio para compartir información, FTP ha sido reemplazado por un método más
conveniente, dinámico y apropiado: World Wide Web.
Al igual que FTP, World Wide Web (red mundial) tiene un nombre elocuente. Es
realmente una red mundial, y la manera en que está construida puede describirse como una
Word Wide Web (WWW)
56
Telaraña interconectada. Puede empezar a navegar en su sitio favorito y 30 minutos después nadie sabe dónde terminará.
Mediante el uso del protocolo de transferencia de hipertexto (http, HyperText Transfer
Protocol) y el lenguaje de marcado de hipertexto (HTML, Hypertext Markup Language), la Web proporciona una infraestructura que permite ver el contenido de texto, gráficos, imagen e incluso películas y sonido en un programa denominado navegador.
Es probable que estés familiarizado con navegadores populares como Microsoft
Internet Explorer. El brillo y el esplendor que permiten experimentar al usuario son razones importantes para el crecimiento exponencial en la popularidad de Internet y el World Wide Web.
Para desarrollar el contenido que integrará su propio rincón en el Web, necesita estar
familiarizado con los conceptos que lo hacen funcionar. Esto incluye las maneras en que el vasto número de computadoras y programas que integran Internet se comunican entre sí, además de hacerlo con el lenguaje del Web, HTML.
El Web es distinto de FTP y funciona de manera muydiferente. Aunque el propósito de FTP es permitirletransferir todos los archivos de información, el del Webes que vea el contenido de esos archivos sin tener quedescargarlos a su computadora.
57
Un componente clave en la infraestructura de Internet es el protocolo de
comunicaciones sobre el que opera. En realidad se trata de una serie de protocolos. TCP/IP es un método de varias capas mediante el cual los datos se convierten en paquetes y se envían por los cables que conectan a las computadoras entre sí.
Protocolo de Internet
Aunque IP se incluye después de TCP en el nombre del protocolo, es el núcleo de las
comunicaciones que logran que Internet funcione. Tal vez hayas oído de las direcciones IP, esos conjuntos de números separados por puntos que se asignan a cada computadora host (anfitrión) y a los dominios en Internet (por ejemplo, 208.43.451.78). El protocolo de Internet utiliza ese esquema de numeración para determinar la ruta que debe tomar entre los ruteadores y hosts que integran Internet, a fin de alcanzar el destino indicado.
TCP/IP
TCP/IP
Esta conformado por:
Protocolo de control de transmisiones (Transmission Control Protocol - TCP)
Protocolo de Internet (Internet Protocol - IP).
58
Protocolo de control de transmisión
El protocolo de control de transmisión (TCP, Transmission Control Protocol) es el modo en que funcionan las cosas en el Web. Cada paquete creado por el protocolo IP se empaqueta, se numera y se etiqueta para que la computadora que lo recibe sepa qué hacer con él. Si faltan paquetes, ésta sabe cómo pedirlos de nuevo a la computadora que envía. Y la información de TCP indica lo que debe contener el paquete, de modo que la computadora que recibe identifique datos corrompidos.
“Imagina cómo reunirías a un grupo de 15 amigos para ir de México a Oaxaca. Es probable que se dividan en tres automóviles para el camino. Tal vez a uno no tenga dinero suficiente para casetas y tome la ruta normal, a otro de los conductores le guste la carretera y el tercero conozca un “atajo”. Tres automóviles están tomando diferentes rutas al mismo destino y cada uno encontrará circunstancias en el camino que acelerarán su viaje (como casetas de cobro vacías en la carretera) o lo harán más lento (como un choque en el atajo). Aunque todos salieron en fila, no hay garantía del orden ni de la hora en que llegarán al destino.”
Esto es muy parecido a lo que sucede a un archivo que se está transmitiendo en una red únicamente con el protocolo IP. Éste necesita ayuda para asegurarse de que las cosas terminen en el lugar que les corresponde. Esa ayuda es la que ofrece el protocolo de control de transmisión TCP.
59
Cuando se ha establecido una conexión, se envía una solicitud de datos en la forma de
una dirección. Podría ser una dirección IP o un nombre de dominio plenamente calificado, como http://www.grupoico.com.mx. Esa solicitud se controla mediante TCP/IP a la computadora host que la atiende y que envía la respuesta como HTTP a la computadora que hizo la solicitud. Cuando llega, el protocolo TCP/IP le ayuda otra vez a unir los paquetes de información para que los use o los despliegue.
El contenido de la información enviada determina la manera en que se usará la
respuesta cuando regrese a la computadora que lo solicita.
Él lenguaje de marcado de hipertexto (HTML, HyperText Markup Language) es la base del World Wide Web. Se trata de un conjunto de etiquetas que describe al navegador cliente, la manera en que debe desplegarse un archivo, que es el propósito central del Web: desplegar archivos de información.
Protocolo de Transferencia de Hipertexto (HTTP)
Lenguaje de Marcado de Hipertexto (HTML)
60
Código Resultado
Los primeros documentos HTML eran de sólo
texto. Con frecuencia se trataba de textos de proyectos científicos o de investigación, y su formato resultaba importante. HTML proporcionaba un medio jerárquico de organizar y desplegar información para que pudiera verse de manera tal, que recalcara su estructura más que su diseño. Lo hacía así al proporcionar una selección de etiquetas que marcaban el texto simple y que el navegador comprendía.
Una de las grandes ventajas de HTML es la
capacidad de crear y ejecutar hipervínculos. Los hipervínculos son direcciones integradas en el contenido, que permiten que el usuario sea remitido, con sólo hacer clic, al material relacionado con el tema de la página.
EL ENTORNO DE DREAMWEAVER
Dreamweaver es una herramienta de desarrollo WYSIWYG (What You See Is What You Get – Lo que ve es lo que obtiene). Aunque puedes construir una página Web en un editor de texto como el bloc de notas y ver los resultados después de que hayas terminado, la Web es un medio en esencia orientado a la presentación y es agradable ver lo que en realidad está
61
Haciendo mientras lo diseña. El desarrollo de Dreamweaver se enfoca en la ventana de documento, esta ventana es la plataforma gráfica en la que se construirá el sitio. Mediante el interactivo del sistema podrás conocer los elementos de la ventana.
1 Barra de Herramientas Insertar
La barra Insertar contiene botones para la creación e inserción de diversos tipos de objetos, como tablas, capas e imágenes. Los botones están organizados en categorías, a las que puede cambiar en la parte izquierda de la barra Insertar. Cuando se inicia Dreamweaver, se abre la última categoría con la que ha trabajado.
2 Barra de Herramientas del Documento
La barra de herramientas Documento contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: vista Código, vista Diseño y una vista dividida que muestra las vistas Código y Diseño. Esta barra contiene también algunos comandos y opciones relativos a la visualización del documento y a su transferencia entre los sitios local y remoto.
3 Ventana del documento
Muestra el documento actual en cualquiera de las siguientes vistas: La vista Diseño es un entorno de diseño el desarrollo rápido de aplicaciones. La vista Código es un entorno de codificación manual para escribir y editar código HTML, JavaScript, PHP y otros tipos de código. Para más información, consulte Codificación en Dreamweaver. La vista Dividir hace posible ver en el mismo documento las dos vistas, Código y Diseño.
4 Selector de Etiquetas
Aparece en la barra de estado en la parte inferior de la ventana de documento, muestra la jerarquía de etiquetas que rodean a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido
5 Inspector de propiedades
Permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada tipo de objeto tiene diferentes propiedades.
6 Panel CSS
En modo Actual, el panel Estilos CSS muestra tres secciones: un Resumen del panel selección que muestra las propiedades de CSS de la selección actual del documento, un panel Acerca de que contiene reglas que muestra la ubicación de las propiedades seleccionadas (o una cascada de reglas para la etiqueta seleccionada, en función de la selección) y un panel Propiedades que permite editar las propiedades CSS al definir reglas para la selección.
7 Panel Aplicación
Este panel contiene un grupo de paneles importantes para la construcción de aplicaciones dinámicas. Panel Base de datos contiene información acerca de al BD que están conectadas a su sitio, es una referencia fácil para revisar tablas, vistas y estructuras almacenadas de procedimientos. Panel Vinculaciones presenta una lista de los conjuntos de registro específicos que se han diseñado para la página actual. Panel Comportamientos del servidor le permite agregar, eliminar y editar comportamientos del servidor, como repetir regiones y navegación dinámica.
8 Inspector de Etiquetas
Permite ver y editar cada atributo asociado a una determinada etiqueta.
9 Panel Archivos
Permite administrar los archivos y las carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel Archivos también proporciona acceso a todos los archivos del disco local, como ocurre en el Explorador de Windows.
62
¿QUÉ ES UN SITIO?
Un sitio Web se forma cuando integra una colección de documentos HTML relacionados entre sí y que deben desplegarse de manera conjunta. Al organizar el contenido y proporcionar maneras lógicas para recorrerlo, estás convirtiendo tus documentos individuales en un sitio que un usuario puede usar para encontrar y acceder a la información que necesita.
Existen tres distribuciones comunes para un sitio
La primera es el modelo de tabla decontenido que sirve como interfaz deentrada a un catálogo de material. Porejemplo, si tiene un libro o un informe queestá dividido en secciones, incluiría unapágina de tabla de contenido queproporcione vínculos con cada sección. Amedida que se complete cada sección, elusuario regresaría a la tabla de contenidopara determinar la siguiente sección quedesea acceder.
63
PLANEACIÓN DE UN SITIO
Son demasiadas las personas que empiezan a construir una página sin considerar en forma apropiada que hacer con ella. La falta de planeación no solo tiene impacto en la calidad de su producto final, también lo puede poner en una situación difícil con un cliente cuyas ideas acerca del sitio eran diferentes a las suyas.
Crear una página Web es fácil pero no es una tarea trivial construir un sitio Web, por lo
que resulta indispensable es la planeación.
La segunda distribución es la estructuraWeb, donde el contenido está lleno devínculos de referencia cruzada. En cualquierpágina determinada, podría tener variosvínculos con otras partes del sitio que seconectan con material relacionado. Elobjetivo de este tipo de estructura es que elusuario siga el contenido del sitio en unaespecie de flujo de conciencia,ramificándose a voluntad a partesrelacionadas del sitio.
La tercera distribución es la aplicación Web.En ésta, suele guiarse al usuario por el sitiode manera estructurada, tal como estándiseñadas las páginas. Por ejemplo, si estállenando una solicitud de seguros en línea,sería importante completar cada secciónpara estar seguro de que todo se incluyó enforma apropiada. El usuario dependería deque el diseñador del sitio lo guíe por losdocumentos específicos que necesita paracompletarla.
64
Algunos elementos que debes tomar en cuenta cuando planeas un sitio son: Objetivo de un sitio
Comprender el objetivo del sitio que se está diseñando es básico de esa forma sabrás como dirigirte y que es lo que se desea al final del trabajo
Para definir el objetivo debes contestar las siguientes preguntas:
¿Cómo se usa el sitio?
Así como diferentes sitos tiene diversos propósitos, los visitantes los usan de manera distinta. Algunos tienen un flujo libre y permiten navegar de una página a la siguiente. Otros guían a los usuarios para que den una serie de pasos hacia un objetivo.
¿Se trata de un sitio de información, educativo, de entretenimiento o comercial?
¿El sitio depende desplegar técnica de vanguardia o alcanzar a una audiencia amplia?
¿Cómo se usa el sitio?
¿Cómo se dirigirá el tráfico a los sitios?
65
DEFINICIÓN DE UN SITIO
1. Abre Dreamweaver y crea un documento nuevo HTML.
2. Selecciona el menú Sitio – Nuevo sitio
Alumno:
Basado en la planeación que debes hacer antes de crear un sitio Web, es necesario saber que esta materia contempla realizar una serie de páginas para cubrir distintas necesidades.
Deberás usar la estructura de organización
que te da Dreamweaver para formar un menú principal desde el cual accederás a todas las páginas que se tienen contempladas desarrollar para esta materia.
Por lo tanto la definición del sitio y su
estructura estarán determinadas en función de lo mencionado.
66
3. A continuación se presenta el asistente para sitios del cual permaneceremos en la pestaña Básicas.
4. Agrega un nombre para tu sitio compuesto por tu nombre y las iníciales de tus apellidos y da clic en Siguiente.
5. A continuación preguntará con que tecnología desea trabajar. Selecciona la opción No y pulsa el botón Siguiente.
6. Ahora debes elegir la situación en que se encuentra: ¿Cómo deseas trabajar con sus archivos y en qué lugar deseas almacenarlos?
7. Activa la primera opción y crea la siguiente ramificación de carpetas y pulsa clic en el botón Siguiente.
67
8. En esta ventana se especifica el nombre del servidor remoto que se usará para subir la página a Internet, así que por el momento lo dejaremos como ninguno. Da clic en Siguiente.
9. La pantalla final muestra todas las opciones que se eligieron. Si hay algo que desees modificar podrás editar el sitio, pero por el momento pulsa el botón Completado.
Ahora tu sitio está definido.
68
DISEÑO DE UN SITIO
Cuando estás trabajando en un sitio para uso personal, tienes la libertad de elegir las herramientas y plataformas de desarrollo. Esta consideración se vuelve más importante cuando empiezas a construir sitios para clientes que ya tienen la manera en la que quieren que se hagan las cosas.
Algunos desarrolladores informales hasta el momento cuando se sientan ante la
computadora es cuando empiezan a jugar con el desarrollo de la página, y por supuesto este no es el método más apropiado para definir o para desarrollar tu trabajo, por lo que es importante considerar los siguientes puntos:
•Los sitios HTML están integrados solo por texto un fondo de color o una imagende fondo dispuesta en mosaico. Esta técnica se usa de manera muy efectiva yofrece una información simple y coherente cuando la información es lo másimportante.
•Los sitios basados en imágenes suelen usar una interface gráfica más compleja,diseñada o importada de un programa de imágenes Photoshop.
•Los sitios construidos por Multimedia proporcionan un contenido dinámico yanimado, que da como resultado, un agradable recorrido en su interior,obteniendo a cada paso una sorpresa animada y efectos sorprendentes que sison bien trabajados hacen un sitio ligero y atractivo.
¿El sitio se basará en HTML, en Imágenes o en Multimedia?
•Aunque los marcos fueron muy populares en un tiempo, últimamente han caídoen desuso. Aunque hay oportunidades por supuesto de usar bien los marcos,para dividir las secciones de las páginas
¿Usarás Marcos?
•Toma en cuenta lo siguiente, el texto amarillo claro es ilegible a menos que secoloque obre un fondo negro, el fondo de una página de varios colores sonmolestos y deberás cuidar, no desperdiciar el tiempo creando algo que no seaposible usar (Un video de más de 250 MB, un archivo Fla publicado en EXE, yaque el navegador solo admite SWF, etc)
Comprométete a evitar errores de diseño.
69
CONFIGURACIÓN DE UNA PÁGINA INDEX
Proceso de configuración de la página
1. Guarda la página actual con el nombre de Índex y observa como automáticamente toma la ruta del sitio que acabas de definir.
2. En la sección de titulo especifica tu nombre.
3. Activa el menú Modificar y selecciona la opción Propiedades de la página.
Combinación de 3 elementos para
crear una página
Texto: se agregará un texto simple.
Activos: son imágenes, archivos de Flash, vínculos, colores y otros elementos que se
emplean para integrar la página.
Objetos de Dreamweaver: Además de texto y activos, usará otros elementos HTML como
tablas, marcos, capas, etc.
70
4. Esta ventana contiene las opciones de configuración de la página actual organizada por categorías. Por el momento solo agregaremos un fondo.
5. Activa el botón Examinar y selecciona la imagen de fondo para la página.
6. Dreamweaver almacena en la misma carpeta todos los elementos que conforman una página Web, por lo tanto cuando alguno de estos elementos no se encuentra incluido en la carpeta del sitio, solicita hacer una copia. Da clic en Sí.
7. Lo puedes guardar con un nombre en específico o conservar el nombre actual.
8. De regreso a la ventana, del listado Repetir elige la opción con el mismo nombre.
9. Pulsa clic en aceptar para ver el resultado.
71
EL CONTENIDO DE LA PÁGINA INDEX Ahora trabajar con el contenido de la página índex, pero antes es necesario dejar en claro la función de la página Índex.
Todo sitio Web tiene una página Índex que sirve como un contenedor para direccionar a la página principal es decir la página que tiene los contenidos que vemos desplegados en pantalla.
Esta página índex puede llamarse de las siguientes maneras:
Index.htm
Index.html
Index.asp
Default.htm
Default.html
Default.asp
72
Así pues cada vez que en el navegador tecleas www.grupoico.com.mx lo que hace este
dominio es activar www.grupoico.com.mx/default.asp en realidad y a su vez Default.asp, llama a http://www.grupoico.com.mx/paginaico2007.asp
Pero bueno te preguntarás ¿Qué necesidad hay de tener una página índex o default que
llame a la página principal?, bueno la razón, es que es más sencillo recordar teclear www.grupoico.com.mx en lugar de http://www.grupoico.com.mx/paginaico2007.asp.
Sin embargo las páginas índex o default pueden contener información y no simplemente
limitarse a servir de páginas de ruteo a otras páginas. Así pues una vez descrito el uso de las páginas índex procede a crear una página índex
con contenido, siguiendo los pasos que a continuación se describen:
1. Escribe el nombre del instituto como si de Word se tratara y seleccionarlo.
Así con cualquiera de estas direcciones podrás acceder a la página de ICO
73
2. En el panel propiedades de la opción fuente activa la lista desplegable y selecciona la
opción Editar lista de fuentes.
3. En la ventana que se muestra, ubica la lista fuentes disponibles y elige la fuente
correspondiente para el nombre del instituto que es Myriad Pro. Una vez hecho esto da clic
en el botón añadir para que la fuente se coloque en la lista fuentes elegidas. Da clic en
Aceptar.
4. Ahora en el listado podemos seleccionar la fuente.
74
5. Seleccionada la fuente ahora activa la opción Negrita (B) y Cursiva (I) para obtener el
siguiente resultado.
6. Coloca el curso al principio del texto y selecciona la herramienta imagen.
7. Busca e inserta el logotipo de ICO. Agrégalo al sitio si te lo solicita.
8. Cada vez que insertes una imagen en Dreamweaver podrás dar un nombre alternativo a
las imágenes y una descripción solo como fuente informativa para la página.
9. Una vez que la imagen está en la página elige del las propiedades de la imagen la opción
Medio de la lista alinear para conseguir el siguiente resultado.
75
10. Debajo del nombre del instituto escribe los siguientes datos:
11. Debajo de este texto escribe las prácticas que se desarrollaran en esta materia, selecciona
el texto y aplica viñetas:
12. Selecciona el titulo del instituto y aplica el siguiente formato:
76
13. Selecciona el texto de los datos y aplica también un formato como el siguiente:
14. Para el texto de las prácticas el formato es el siguiente.
77
15. Para ver como ha quedado la página presiona la tecla F12.
78
LA PROGRAMACIÓN HTML
Las etiquetas
HTML utiliza etiquetas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se establece la forma en la que debe mostrarse en el navegador el texto, así como también las imágenes y los demás elementos.
Toda etiqueta se identifica por los signos menor que y mayor que (<>) conocidos también como Tags, además algunas tienen atributos que pueden tomar algún valor. En general las etiquetas se aplicarán de tres formas especiales: Las etiquetas básicas o mínimas que conforman una página Web son:
HTML
• Es el acrónimo en inglés de Hyper Text Markup Language (Lenguajede marcación de hipertexto), es un lenguaje informático diseñadopara estructurar textos y presentarlos en forma de hipertexto, quees el formato estándar de las páginas Web.
Las que se abren y se cierran: <b>Título del tema</b> esta etiqueta coloca el texto en
negritas.
Las que solo se abren, como <br> que se muestra en el navegador
como una línea horizontal.
Y las que pueden abrirse y cerrarse o solo abrirse, como por
ejemplo <p>.
79
<html> </html> Estás etiquetas determinan que todo lo que se encuentra entre ellas pertenece a una página Web. <html>
<head> <title>ejemplo</title> </head> <body> Contenidos </body> </html>
<head> </head> Sirven para contener todo lo que esté relacionado con el encabezado de la página.
<title> </title> Determina que el texto se colocará en la barra de titulo de la ventana una vez que se publique la página.
<body> </body> Todo lo relacionado con los contenidos de la página debe colocarse entre estas etiquetas.
HTML EN DREAMWEAVER
La primera vez se abre Dreamweaver, se enfrenta a una desafiante pantalla de diseño en blanco, esperando a que se agregue texto, imágenes, más toda su decoración. Los diseñadores experimentados desean saber inmediatamente cómo acceder al código subyacente para ver como configura Dreamweaver la estructura HTML básica y familiarizarse con las herramientas de edición de código.
Aunque pretendas confiar plenamente en la capacidad de diseño de Dreamweaver, aprender algo sobre HTML te ayudará a conocer el cómo y porqué algo está presentado mal y como corregirlo.
Para poder examinar la estructura HTML de los documentos creados en Dreamweaver, se cuenta con las siguientes opciones de vista: Mostrar vista de código
Mostrar vistas de código y diseño
Panel de Código
80
Mostrar vista de diseño
La vista dividida de Código y Diseño tiene una peculiaridad. Cuando se agregan ymodifican objetos en el panel Diseño, el panel Código cambia automáticamenteadaptándose al cambio. Sin embargo, cuando se escribe en el panel Código, hay queactualizar el panel Diseño pulsando clic en él, con la tecla F5 o bien seleccionando elmenú Ver- Actualizar vista de diseño.
Panel de Código
Panel de Diseño
81
VISTA GENERAL DE LOS ELEMENTOS BÁSICOS DE HTML
Ahora que ya sabes dónde buscar el código de tu página, es hora de analizar brevemente la codificación HTML. Esta visión general puede proporcionarte las bases que debes aprender para crear un Diseño Web y proporcionarle al menos la esencia de lo que se espera ver en una página. Etiquetas principales
82
Etiquetas del encabezado
Otra etiqueta que se incluye en el encabezado de una página es la etiqueta <meta> la cual se conoce como etiqueta contenida, porque no tiene etiqueta de cierre. Esta etiqueta puede incluir 2 tipos de información: atributos http-equiv para proporcionar información al explorador y el atributo name para proporcionar información a los buscadores y a los usuarios de la Web.
Cuando planifiques tu sitio, considera pensar en una descripción breve y las palabras clave para tu página.
•Para que el navegador sepa que un archivo contiene HTML, tienes que declarar el documento.Para hacerlo, el documento se inicia con una etiqueta <html> y se cierra con una etiqueta</html>. Además cada documento HTML debe contener una etiqueta <head>, una etiqueta<title> y una etiqueta <doby>.
<html> </html>
•La etiqueta <head> incluye información sobre el encabezado del documento. Cualquierinformación con relación a la propia página se encuentra contenida dentro de esta sección,incluyendo las palabras clave, el titulo de la página y la codificación del conjunto de caracteres,así como las Hojas de estilo en cascada y las rutinas de JavaScript.
<head> </head>
•La etiqueta <title> se encuentra contenida en la etiqueta <head> y es la que le da el nombre a lapágina, mismo que se muestra en la barra de título una vez que se publica la página. Al añadiresta página a favoritos el nombre con el cual se registrará es el que se encuentre entre lasetiquetas <title> </title>.
<title> </title>
•La etiqueta <body> encierra todo el contenido de la página, como texto, imágenes, animacionesy todo lo que incluya su página se sitúa entre el <body> y </body>. Desde esta etiqueta sepuede definir algunos atributos como el color de fondo de la página, el color del texto, el tipo deletra del texto, el color para los vínculos, etc por lo que a este tipo de etiquetas se les denominacontenedores.
<body> </body>
Dreamweaver genera estas etiquetas automáticamente cada vez que el se crea un archivo nuevo.
<meta name=”description” content=”El Instituto de Compuingles de Oriente teofrece siempre nuevas alternativas para enfrentar el futuro tecnológico de nuestropaís por lo que esta carrera esta hecha para ti” >
<meta name=”keywords” content= “computación, educación, estudio, instituto,tecnología, escuela”>
83
Etiquetas del cuerpo del documento
La etiqueta más común dentro del cuerpo de la página Web es <p> que define los párrafos. Esta etiqueta deja un renglón en blanco antes y después del texto que encierra. Además puede contener atributos de alineación para el texto y puede controlar la apariencia del texto.
Etiquetas para vincular páginas
Para hacer funcional un sitio Web es necesario generar el enlace de comunicación entre una y otra página, HTML identifica estos vínculos mediante el uso de etiquetas de fijación.
Si un usuario pulsa las palabras contenidas en el punto de fijación, será guiado hasta la
página que aparece de referencia en el atributo de la etiqueta.
El primer ejemplo enlaza a una página local ubicada dentro del mismo directoriopor lo que se esta generando una referencia o un vínculo relativo.
El segundo ejemplo es un vínculo a otro sitio Web; se le denomina vínculo oreferencia absoluta.
84
La etiqueta de punto de fijación también se utiliza para enlazar elementos de una misma
página. El uso de vínculos dentro de una página requiere de 2 etiquetas: La primera define el destino o punto de fijación para el vínculo.
<a name=”pagetop”> ¡Bienvenido! </a>
Una vez definido el destino, la segunda etiqueta se utiliza para invocar el punto de fijación situado en cualquier otra parte del documento.
<a href=”#pagetop”> Volver al principio </a> Etiqueta de imagen
Cuando escuchas hablar de imágenes dentro del contexto Web, seguramente piensas primero en fotografías, imágenes animadas, etc, aunque realmente las imágenes para la Web son algo más que eso: logotipos, barras de encabezado, diseños de fondo y los botones también son imágenes. Cada imagen que utilices en tu sitio Web debe tener referencia a una etiqueta de imagen.
La etiqueta de imagen utiliza un atributo de origen para especificar la ubicación del archivo de imagen y además puede contener atributos como dimensiones de la imagen, alineación, borde y texto alt entre las más comunes.
85
Además puedes agregar imágenes de otra forma a tu página, mediante la asignación de una imagen de fondo. Esta acción se lleva a cabo dentro de la etiqueta <body> usando el siguiente atributo.
<body background="LOGO EDG.jpg"> Etiquetas de listas
En una página Web es frecuente que necesites presentar texto en formato de lista ordenada y sin ordenar. Las listas ordenadas son aquellas que se encuentran numeradas y emplean una estructura de código que se define con una etiqueta inicial una final y etiquetas intermedias de apertura y cierre que ordenan los elementos de la lista.
Sea el caso de usar listas sin ordenar, estas cuentan con la misma estructura que las anteriores con la variante de la etiqueta de inicio y cierre de la estructura. Este tipo de listas se característica por ocupar una viñeta simple (un punto) para marcar cada elemento de la lista.
<ol> <li>Inicio</li> <li>Todos los programas</li> <li>Macromedia</li> <li>Dreamweaver MX</li> </ol>
<ul> <li>Mercadotecnia</li> <li>Diseño vectorial</li> <li>Imagen digital</li> </ul>
86
Etiquetas de formato de texto
Mediante la etiqueta <font> es posible mejorar la apariencia del texto mediante algunos atributos como puede ser el color del texto, el tipo de letra y el tamaño, por lo tanto cuando modifiques el formato del texto de tu página desde Dreamweaver encontrará estas etiquetas dentro del código de la página que estés desarrollando.
<font color="#FF3300" face="Aachen BT, Abscissa, AdLibBT"> Objetivo: </font></p> EJERCICIO: PÁGINA INFORMATIVA DE MI ESPECIALIDAD
Objetivo: Realizar una página orientada a la especialidad de Diseño empleando la estructura vista en esta clase. Desarrollo: 1.- Diseña un fondo para tu página de 81 x 81
pixeles, sencillo y usando colores claros. 2.- Solicita a tu profesor las imágenes para esta
práctica. 3.- Crea una página orientada a la especialidad
que incluya: - Encabezado con el nombre del instituto, el logo
de la especialidad y el nombre. - Como fondo de la página incluye el diseño
creado. - Agrega el objetivo de la especialidad - El listado de las materias que la conforman, con
nombre de la materia, software empleado y duración.
- Información extra que gustes incluir. 4.- Da formato al texto de la página. 5.- Verifica el código generado y examínalo.
87
CONOCE EL PROCESO DE DESARROLLO DEL E-BLEND
El concepto del sistema e-blend que se utiliza en tus clases, tuvo que ver en sus inicios con un sistema llamado e-learning, o bien Aprendizaje Electrónico, se compone por el contenido de la clase, animaciones que representan los procesos del contenido, audio de la narración del contenido e interactividad para revisar este material tantas veces sea necesario y así conseguir llevar al alumno de la mano en el aprendizaje de las materias que conforman la retícula académica que ofrece ICO.
Luego del sistema e-learning, (Aprendizaje Electrónico) surgió el sistema e-blend 1.0
(Fusión Electrónica) mismo que mantenida una estructura similar, contenido temático, audio del contenido y algunas animaciones pero como elemento innovador, se incluyeron tutoriales para guiar las prácticas.
88
En la evolución de todo sistema se busca la innovación, cubrir otras necesidades de
aprendizaje, se pone a tu alcance el sistema e-blend 2.0 que ahora cuenta con los beneficios que se han mencionado y además tutoriales, demostraciones y ejercicios multimedia, que representan todos los procesos a seguir para conseguir desarrollar tu práctica de forma optima. Los tutoriales sirven de apoyo para entender de mejor manera algunos tópicos, las demostraciones te irán dando una idea de cómo se realizan ciertos procesos o para presentar información condensada y acompañada de animaciones, para entender de ejercicios multimedia como apoyo de tu clase.
En sí, cada sistema electrónico de auto aprendizaje o aprendizaje guiado cuenta con una estructura distinta dadas las necesidades a cubrir, sin embargo el proceso de realización es el mismo y se presenta a continuación.
89
Proceso de desarrollo del una clase para e-blend
•Tema a cubrir: El auge del uso de la computadora, en la sociedad
Define el producto final a obtener en la clase o el tema a cubrir.
•Título: El cambio en la Cybersociedad
Elige un nombre que con solo leerlo indique lo que se obtiene como producto final o el tema principal a trabajar.
•Los temas: La Cybersociedad
• Nuevas tecnologías, nuevas profesiones
• La historia de la PC
• Tendencias tecnológicas
Luego se especifica los temas internos a tratar en clase.
Realiza una investigación preliminar de lo que se tratará la clase
Define que puede usarse como contenido temático.
Procede a la captura del contenido temático.
•Para este ejemplo no se necesita práctica porque es teórica.
Desarrolla la práctica en el programa a utilizar
Ilustra los contenidos ayudándote de la práctica realizada, escaneando imágenes o descargándolas de internet.
Teniendo ya la clase se procede a meterla en un plantilla Web para poder ser publicada.
90
El proceso para desarrollar la clase es extenso y cuenta mucho el proceso de investigación e ilustración pero además el proceso de armado requiere de trabajo en Dreamweaver y conocimiento de herramientas que optimicen la publicación de la clase ya armada en formato Web. HOJAS DE ESTILO EN CASCADA (CSS)
Una vez que a se ha completado el proceso de creación de la clase en formato de texto es necesario incluirla en la Dreamweaver para que se pueda ver, como un clase de e-blend, y esto incluye desarrollar cada tema en una página web distinta, con el mismo formato y distribución de la información.
Es un trabajo repetitivo y un poco extenso en tiempo por lo tanto se presentan
herramientas que te optimizarán dicho proceso.
La expresión en cascada hace referencia a la posibilidad de aplicar varias hojas de estilo a
una misma página.
Las hojas de estilo en Cascada o CSS
• Son documentos que contienen información de estilos o reglas deformato referidos a cualquier elemento que conforma la página Webmismas que permiten mejorar el aspecto del contenido Web.
91
También es posible hacer referencia a una hoja de estilo desde varias páginas Web lo que permite apreciar una de las grandes ventajas de las hojas de estilo CSS.
Una hoja de estilos en cascada (CSS) permite definir las propiedades de presentación de
casi todas las etiquetas HTML. Esto se lleva a cabo mediante la creación de una regla, para la presentación de una etiqueta predeterminada. Una regla está formada por los siguientes elementos:
Los estilos CSS se pueden incrustar en el documento HTML o pueden estar vinculadas desde un documento externo.
Hoja de estilos
CSS
1 Hoja de estilos
CSS
2
Hoja principal Contenido
Listas
Hoja de estilos
CSS
3
Web 1
Contenidos
Web 2
Contenidos
Hoja de
estilos CSS
Web 3
Contenidos
92
Al unir todos los elementos del diagrama el resultado de una regla es el siguiente:
p { font-family: "Myriad Pro"; font-size: 14px; color: #006699; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; text-align: justify; text-indent: 15pt; }
Observa que la declaración se encuentra dentro de unas llaves. Una regla puede contener
múltiples declaraciones dentro de las llaves, cada una de ellas debe ser separada por medio de un punto y coma, por lo tanto una regla con múltiples declaraciones.
El punto y coma es esencial para separar las declaraciones, pero es opcional para la
última declaración en una regla. En caso de omitir algún punto y coma entre declaraciones el explorador ignorará toda la declaración.
Reglas de CSS
El selector, elemento al que se está aplicando el estilo.
Por ejemplo, si deseas formatear la etiqueta de párrafo para quepresente el texto en verde, el selector es la etiqueta <p>
La declaración, define que elementos forman un estilo y consta a su vez de dos partes:
• La propiedad. Propiedad del selector que se ha modificando,como el color, el tamaño, la fuente, el margen o la ubicación. Porejemplo para que el texto del párrafo se muestre en verde, debemodificar la propiedad color.
• El valor. Configuración de la propiedad. Por ejemplo para un textode párrafo en verde, el valor de la propiedad es green o suequivalente en hexadecimal.
Cuando se actualiza un estilo CSS los documentos que utilizan este estilo se actualizan automáticamente.
93
También puedes usar las declaraciones para varios selectores al mismo tiempo, como se
muestra en el ejemplo.
ARMADO DE LOS CONTENIDOS PARA LA CLASE
Para pasar tu información a la hoja HTML de Dreamweaver, necesitas preparar la información, así que realiza lo que se enlista a continuación:
1. Crea una pleca en Photoshop para tu clase de 790px x 100px y guárdala en formato
JPG.
2. En cuanto a las imágenes de tu clase comienza por darles formato apoyándote en las
herramientas de office.
3. Capturar las imágenes de la clase y trátalas en
Photoshop, para dejarlas que queden separadas
como se muestra.
4. Ahora captura el texto del primer tema en una
página nueva de Dreamweaver como se muestra.
Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto del contenido de una página Web.
94
5. Inserta las imágenes del primer tema.
6. Define el formato de cada una de las secciones de los temas.
7. Guarda la página como Tema1.html.
8. Repite desde el punto 4 al 7 en cada tema almacenando las páginas con nombres
consecutivos (Tema1.html, Temas2.html, etc.).
DESARROLLO DE LA HOJA DE ESTILO EN CASCADA (CSS) Ahora que ya conoces las especificaciones básicas que conforman las hojas de estilo, es
hora de aplicarlo. Las hojas de estilo externas e incrustadas usan el panel Estilos CSS, el cual facilita tanto la creación como la aplicación de reglas de estilo.
Eliminar regla
Editar estilo
Nueva Regla CSS
Adjuntar hoja de estilo
Las reglas creadas
La hoja CSS
Propiedades de las reglas
95
Crea hojas de estilo CSS
Realiza el siguiente proceso para crear una hoja de estilos CSS:
1. Emplea la opción Nuevo del menú Archivo.
2. De la ventana Nuevo documento, en la categoría Página básica elige la opción CSS y
pulsa Crear.
3. Guarda la hoja, como tipo CSS.
Es en este punto donde ha creado la hoja de estilos CSS, que es donde se almacenarán todos los estilos creados.
4. Activa el panel CSS que encabeza la sección de paneles. Enseguida da clic en la
opción Todo.
Un estilo es un conjunto de reglas de formato que controla el aspecto del contenido de una página Web.
Una hoja de estilo es el contenedor de estos estilos. Aunque cabe mencionar que los estilos CSS
también pueden usarse en páginas de contenido HTML.
El panel de Estilos CSS se encuentra encabezando la lista de panles y también puede activarlo desde el menú Ventana y la opción Estilos CSS, o bien
pulsando Shift y F11.
96
5. Ahora para crear los estilos CSS o Reglas pulsa el botón Nueva regla CSS dentro del
panel Estilos CSS.
6. En el cuadro de dialogo que aparase En Tipo de selector se encuentran las siguientes
opciones:
Clase es posible especificar si el estilo va a ser uno personal creado desde cero.
Etiqueta puede modificar los atributos de una etiqueta ya existente y en Nombre aparece la lista de etiquetas HTML que pueden ser redefinidas, como pueden ser BODY, A, FORM, TABLE, etc.
Avanzada aplica un estilo a uno de los tipos de vínculo que aparecen en la lista de campo selector que se muestra encima del selector del tipo de estilos. Estos estilos permiten eliminar el subrayado de los vínculos y cambiar la apariencia de varios estados de vínculo. Una vez definidos, se aplican automáticamente.
7. Activa la opción Etiqueta.
8. En la sección Etiqueta activa la etiqueta h4, que es una etiqueta corresponde a un
formato de encabezado.
9. En Definir: se determina si el estilo si se añade a una nueva hoja de estilos (Nuevo
archivo de hojas de estilo) o se añade a la hoja de estilo propia del documento (Sólo
este documento).
10. Activa la opción Sólo este documento. Pulsa Aceptar
11. A continuación se presentará la ventana donde se definirá el estilo.
El cuadro de dialogo se divide en categorías lógicas para agrupar las propiedades del estilo. Para este ejemplo utiliza las opciones de la categoría Tipo que corresponden a la apariencia del texto.
97
12. Para este ejemplo se crearan los siguientes estilos:
Etiqueta: h4 Etiqueta: body Etiqueta: p
Tipo: Tipo de letra Tamaño Variante Color Bloque: Alineamiento de texto
Fondo: Imagen de fondo Repetir Anexo
Tipo: Tipo de letra Tamaño Color Bloque: Alineamiento de texto Sangría de texto
Editar los estilos CSS
Al
modificar una hoja de estilos CSS que controla al documento, automáticamente cambiará el formato de todo el texto controlado por dicha hoja de estilos.
Para modificar un estilo realiza estos sencillos pasos:
1. Selecciona del panel Estilos CSS el estilo a modificar.
2. Da clic en el botón Editar estilos.
3. Modifica las categorías necesarias y da clic en Aceptar.
Si algunas de estas opciones no se pueden apreciar en el Documento de Dreamweaver se marcarán con un asterisco y eso
depende de la versión del explorador, por lo que esto se presentará en exploradores inferiores a la versión 3.
La modificación de una hoja de estilo afecta a todos los documentos a los que haya sido vinculado.
98
4. Al editar el estilo Dreamweaver envía un mensaje que sugiere la actualización del
estilo en el documento. Pulsa Si para aplicar automáticamente los cambios del estilo.
APLICACIÓN DE LAS HOJAS DE ESTILO
Cuando deseas aplicar un estilo contenido en una hoja CSS ya sea para generar una hoja de estilo nueva o para aplicar estilos externos al documento actual realiza lo siguiente.
1. Abre el documento HTML al que deseas aplicar la hoja de estilos CSS.
2. Activa desde el panel Estilos CSS el botón Adjuntar hoja de estilos.
3. Del cuadro de dialogo Vincular hoja de estilos Externa pulse el botón Examinar
4. Busca la hoja CSS, selecciónala y pulsa Aceptar.
5. Activa la opción Vincular para crear un vínculo entre el documento actual y la página
de estilo CSS. Pulsa Aceptar.
6. Los estilos de etiqueta se aplican automáticamente a la hora de la vinculación.
Para ver el resultado de la aplicación de los estilos pulse F12
99
¿QUÉ SON LOS HIPERVÍNCULOS?
Dreamweaver ofrece varios métodos para crear vínculos con documentos, imágenes,
archivos multimedia o software transferible. Puedes establecer vínculos con cualquier texto o imagen de cualquier lugar del documento, incluidos el texto y las imágenes situados en un encabezado, lista, tabla, elemento con posición absoluta o marco.
Los elementos señalados con un círculo blanco, son hipervínculos y hay otros tantos más que aunque no se
señalaron seguramente ya identificaste. Los vínculos se pueden crear y administrar de varias formas distintas. Algunos
diseñadores de sitios Web prefieren crear vínculos con páginas o archivos que todavía no existen cuando están trabajando, mientras que otros prefieren crear primero todos los archivos y las páginas y añadir los vínculos más tarde. Otra forma de administrar vínculos consiste en crear páginas con marcas de posición en las que se añade y comprueban los vínculos antes de completar todas las páginas del sitio.
LOS HIPERVÍNCULOS
Para manejar estos elementos primero es necesario que conozcas los siguientes conceptos:
Son elementos que le permiten desplazarse desde una página a otra, lo que genera la posibilidad de navegar en Internet por lo que
este concepto se te hará muy familiar.
100
Los URL están formados por varios elementos en el formato Protocol://ruta de acceso/nombre de archivo#punto de fijación
Este tipo de direcciones tienen 2 partes:
Para vincular un documento alojado en otro servidor, es necesario emplear una ruta absoluta.
•Es un localizador unificado de recursos (Uniform Resource Locator). Los URL sondirecciones únicas en la Web, usadas para hacer referencia a los sitios, las páginas eincluso las secciones dentro de una página, que proporcionan una manera de vincularlugares en la Web.
URL
•También conocidas como rutas absolutas indican un URL completo del documentovinculado.
URL absolutas
•Las rutas relativas se utilizan generalmente con vínculos a documentos locales,especialmente cuando el documento actual y el documento con el que establece elvínculo se encuentran en la misma carpeta.
URL relativas
El protocolo de conexión http://
La dirección del sitio donde está el recurso www.pendragn.com/island/islandperty.html#top
Protocolo://servidor/carpeta/documento http://www.adobe.com/es/
Existen dos tipos de vínculos relativos:
Relativos al documento y relativos al sitio
101
En una ruta relativa al documento se omite la parte del url absoluto y se indica únicamente la parte de la ruta que define el lugar donde se encuentra la página vinculada.
Si está en la misma carpeta se indica únicamente el nombre del archivo.
<a href="index.htm">En la misma carpeta</a>
Si está en una subcarpeta se referencia la subcarpeta y el documento, separados por la barra diagonal (/).Cada diagonal representa un nivel por debajo en la jerarquía de carpetas.
<a href="Images/catalogo.htm">En una subcarpeta</a>
Si está en una carpeta de nivel superior se escribe el símbolo de aumento de nivel (..) seguido del nombre de la carpeta y del archivo. Cada ../ representa un nivel por encima en la jerarquía de carpetas.
<a href="../sitio/index.htm">En una capeta superior</a>
A pesar de que los vínculos relativos al documento son los más comunes (y son más fáciles de comprender si es nuevo en el diseño Web) los vínculos relativos al sitio son sólo adecuados para sitios muy grandes. Un vínculo relativo al sitio siempre usa la raíz del sitio como punto inicial de la ruta de acceso del vínculo, en lugar de usar la ubicación del documento actual. Para señalarlo, un vínculo relativo al sitio empieza por una barra inclinada (/).
Ejemplo, si se tiene el siguiente sitio
http://www.principal.com/nivel1/nivel2/nivel3/pagina.html
Para ir de una página llamada enlace.html que se encuentra en la carpeta nivel1 a página.html que se encuentra en la carpeta llamada nivel3 la ruta relativa al sitio es la siguiente:
<a href="/nivel1/nivel2/nivel3/pagina.htm">Vínculo relativo al
sitio</a>
Si desplazas la página enlace.html a otro directorio, el vínculo a pagina.html seguirá siendo el mismo, porque la ruta de acceso del vínculo comienza en la raíz del sitio, en lugar de empezar en la ubicación del archivo enlace.html. Existen desventajas definitivas en el uso de los vínculos relativos al sitio, las cuales se presenta a continuación:
102
Estos vínculos se basan en el servidor para establecer la estructura del directorio, probarlos localmente es difícil.
Si intentas abrir una página con vínculos relativos al sitio directamente en el navegador, los vínculos se rompen por que el navegador no puede encontrar la raíz del sitio.
Cualquier imagen que esté vinculada a la página de esta manera no se presentará y no podrás desplazarte de una página a otra.
El único método para probar las páginas es con la opción Vista previa desde Dreamweaver. Dreamweaver interpreta temporalmente los vínculos como absolutos cuando se usa esta opción.
HIPERVÍNCULOS A LAS PÁGINAS
Los vínculos se pueden asignar a textos, imágenes, botones Flash, textos Flash lo cual
resulta ser una tarea muy sencilla a continuación observe el proceso. 1. Selecciona el texto o imagen a la que se le aplicará el vínculo.
2. Desde el Inspector de propiedades asigna el destino del vínculo en la casilla con el mismo nombre, pulsando la carpeta que se encuentra a un constado de la opción.
O bien activa la opción Crear vínculo del menú Modificar.
3. Selecciona el archivo destino y pulsa Aceptar.
A no ser que sea necesario usar vínculos relativos al sitio es mejor
utilizar vínculos relativos al documento.
Busca el archivo Señala el archivo
103
4. Aun activo el elemento que la hará de vínculo selecciona cualquiera de los destinos que desees de la lista Destino
Otra alternativa para generar vínculos y además aplicar algunos atributos de mejora es: 1. Coloca el curso en el lugar donde deseas que aparezca el vínculo. 2. Activa el menú Insertar y la opción Hipervínculo 3. De la ventana que se presenta asigna el texto que la hará de vínculo. 4. Elije la página que se vinculará. 5. Selecciona el destino de la página vinculada. 6. Escribe un título de página para el hipervínculo, el cual se presentará cuando coloques el mouse sobre el vínculo. 7. En el campo Tecla de acceso, introduce una letra para seleccionar el hipervínculo en el navegador. 8. En el campo Índice de tabulador, introduce un número para el orden de fichas. 9. Al finalizar pulsa Aceptar para apreciar el vínculo.
_blank: abre la página en una ventana nueva.
_parent: se usa en el diseño con marcos y abre la página en el marco padre de la página origen.
_self: carga la página vinculada en la misma ventana o marco de la página origen.
_top: sobre escribe el grupo de marcos para cargar el archivo vinculado en la ventana completa.
104
HIPERVÍNCULOS INTERNOS
Realizar vínculos a secciones específicas de la página, permite a los usuarios examinar partes específicas del contenido de una página. Este tipo de vínculos hacen uso de los puntos de fijación o marcadores de posición. Estos marcadores pueden situarse al inicio, al final o en puntos específicos del documento.
Para crear un vínculo interno en la página lo primero que debes hacer es crear el marcador para posteriormente realizar el vínculo a dicho punto de fijación. Crear un marcador 1. Sitúa el cursor en el punto que desees colocar el marcador. 2. Activa el menú Insertar y la opción Anclaje con nombre. 3. Introduce un texto como nombre del marcador y pulsa aceptar.
Establece el vínculo interno 1. Selecciona el texto o imagen que servirá como vínculo. 2. Desde el Inspector de propiedades, en el cuadro vínculo escribe el nombre del marcador antecedido por el signo de # (gato).
* También puedes arrastras el símbolo de Señalar el archivo hacia el marcador.
* Otra opción es arrastrar el texto o imagen seleccionado hacia el marcadormientras pulsa la tecla Shift.
* Si el marcador se encontrará en otra página desde el Inspector de propiedades, enel cuadro vínculo escriba el nombre de la página seguido por el símbolo # y elnombre del marcador.
* También puedes escribir toda una ruta relativa de la ubicación del marcador.
105
HIPERVÍNCULOS A CORREO ELECTRÓNICO
Te permiten proporcionar ayuda a los usurarios y solicitar una respuesta. En lugar de esperar que los usuarios corten y peguen una dirección de correo en su aplicación de mensajería (Outlook, Exchange, etc) usa vínculos de correo electrónico.
Los vínculos de correo son únicos y se pueden introducir usando dos métodos:
1er método
Mediante el campo estándar del Vínculo del Inspector de Propiedades
Deberás escribir la palabra mailto: seguido de la dirección de correo electrónico.
2do método
Mediante del uso del botón Vínculo de correo electrónico de la barra de
herramientas Insertar en la pestaña Común.
En la ventana que se presenta deberá agrega el texto de referencia así como la
dirección de correo.
106
Una capa es una pequeña página Web dentro de otrapágina Web que puede contener los mismos elementos.
Las capas en Dreamweaver Una capa es un contenedor en la página Web que puede incluir en su interior elementos de página HTML. El uso de capas en la página proporciona mayor control y flexibilidad para hacer la página dinámica. Las capas se crearon para el diseño Web con el fin de proporcionar a los diseñadores un control y una flexibilidad similares a los que tenían en el diseño tradicional para impresión. Al colocar los elementos de una página en capas podrá controlar los objetos que deben aparecer delante y los que deben aparecer desplazados u ocultos. También puede utilizar el editor de líneas de tiempo para crear animaciones moviendo una o varias capas simultáneamente por la pantalla.
Uno de los inconvenientes de usar capas en la página Web es que esas capas no se ven en todos los navegadores Web antiguos. Solamente los navegadores Internet Explorer 4.0 y Netscape 4.0 así como las versiones más recientes muestran las capas y no siempre correctamente. De forma predeterminada, Dreamweaver crea capas con la etiqueta div e inserta código de capa en el punto de inserción, o bien en la parte superior de la página, inmediatamente después de la etiqueta body. Si se crea una capa anidada, Dreamweaver inserta el código dentro de la etiqueta que define la capa padre.
107
Trabajo con las capas A continuación se presentan las acciones básicas que debe conocer acerca del manejo de las capas: Crear capas Para crear una capa, lleve a cabo una de estas operaciones:
Haga clic en el botón Dibujar capa de la barra Insertar y arrástrelo en la vista Diseño de la ventana de documento para dibujar la capa.
Para colocar el código de una capa en un determinado lugar del documento, sitúe el punto de inserción en la ventana de documento y a continuación, elija el menú Objetos de diseño > Div PA
108
Si tiene activada la opción Elementos invisibles, aparecerá un marcador de código de capa en la vista Diseño cada vez que coloque una capa en la página. Si los marcadores de código de capa no están visibles y desea verlos, elija Ver > Ayudas visuales > Elementos invisibles. Cuando la opción Elementos invisibles está activada, los elementos de la página pueden cambiar de posición. Para dibujar múltiples capas consecutivamente:
1. Haga clic en el botón Dibujar capa del panel Insertar. 2. Arrastre el ratón mientras presiona la tecla Control para dibujar cada capa.
Podrá continuar dibujando nuevas capas mientras no suelte la tecla Control. Selección de capas Si desea añadir contenido o definir las propiedades como anchura, altura, cambiar su posición, etc. a una o más capas existentes primero debe seleccionarlas.
109
Para seleccionar capas debe de realizar una de las siguientes acciones:
Coloque el puntero sobre la capa y esta cambiara a un color rojo y después seleccione la capa que utilizara.
Haga clic en cualquier punto dentro de la capa para activar el manejador de selección.
Haga clic en borde de una capa cuando el puntero del ratón tome la forma de flecha con cuatro puntas, esto activará los manejadores de tamaño de la capa.
110
Cuando haya varias capas seleccionadas, los manejadores dela última capa seleccionada se resaltarán en blanco. Losmanejadores de las demás capas se resaltarán en azul.
Si desea seleccionar más de una capa a la vez, haga clic en una capa y manteniendo pulsada la tecla Shift de clic dentro o en el borde de las siguientes capas a seleccionar. Esta acción también aplica en el panel Capas. Mover capas Antes de realizar cualquiera de las acciones que se pueden utilizar para mover capas es necesario que considere lo siguiente:
Al mover las capas unas quedarán encima de otras, lo cual puede ser muy útil para colocar una capa de texto sobre una de imagen, por dar un ejemplo.
Caso contrario si desea mover las capas sin que estas se sitúen unas encima de otras active del panel Capas la casilla Evitar solapamiento.
Ahora sí para mover capas realice cualquiera de las siguientes acciones:
Para mover arrastrando, seleccione las capas y arrastre el manejador de selección de la capa. Si es un grupo de capas arrastre el manejador de la última capa seleccionada (resaltada en azul).
Para mover un píxel cada vez, seleccione la capa o las capas y utilice la tecla Shift y cualquiera de las teclas de flecha de cursor para mover la capa en el incremento actual de ajuste a la cuadrícula.
111
Si esta activa la casilla Evitar solapamiento del panel Capas, nose podrá cambiar el tamaño de una capa para que sesuperponga en otra.
Modificar el tamaño de las capas Es posible modificar el tamaño de una capa o de varias capas simultáneamente para dar la misma anchura y altura.
Seleccione la capa desde su borde y con los manejadores de tamaño asigne las dimensiones deseadas para la capa, arrastrando cualquiera.
Para cambiar el tamaño por píxel de la capa, selecciónela y pulse la tecla Control acompañada de la cualquiera de las teclas de flecha de cursor.
Si desea asignar el mismo tamaño a varias capas ejecute los siguientes pasos:
1. Seleccione 2 o más capas.
112
Si tiene una capa contenida dentro de otra la capa contenedora se convierteen una capa padre mientras que la capa interna se le denomina capa hija, porlo tanto cuando se alinean capas anidadas, las capas hijas que no estánseleccionadas pueden moverse solo sí se selecciona y se mueve su capapadre. Para evitarlo, utilice capas anidadas sólo cuando se requiera.
2. Elija el comando Asignar mismo ancho o Asignar mismo alto del submenú Organizar en el menú Modificar.
Alineación de capas Utilice los comandos de alineación de capas para alinear una o varias capas con respecto al borde de la última capa seleccionada.
113
Para alinear dos o más capas: 1 Seleccione las capas. 2 Elija Modificar > Alinear y seleccione una opción de alineación. Ajustar capas a la cuadrícula Para ajustar la posición, el orden y otras propiedades de una capa, puede utilizar el mouse o bien Dreamweaver proporciona las herramientas de regla y cuadricula que le ayudarán en el posicionamiento de las capas en la página. Utilice la cuadrícula como guía visual para colocar y cambiar el tamaño de las capas en la ventana de documento. Puede activar la cuadrícula para utilizarla como guía al dibujar capas. También puede hacer que las capas se ajusten automáticamente a la cuadrícula y cambiar la cuadrícula o controlar el comportamiento de ajuste especificando la configuración de la cuadrícula. El ajuste funciona independientemente de que la cuadrícula esté visible. Para mostrar la cuadricula, elija Ver > Cuadricula > Mostrar cuadricula Para ajustar una capa: 1 Elija Ver > Cuadrícula > Ajustar a cuadrícula, para activar (o desactivar) la opción de ajuste. 2 Seleccione la capa y arrástrela. La capa saltará a la posición de ajuste más próxima.
114
Propiedades de las capas Una capa tiene asociadas un conjunto de propiedades que permiten definirla de una manera precisa y cuyos valores determinan el comportamiento y la apariencia de la capa en la página. Para establecer los valores de las propiedades de las capas utilizando el Inspector de propiedades realice lo siguiente:
Para ver todas las propiedades siguientes, haga clic en la capa y a continuación se mostraran las Propiedades de la capa. Para definir las propiedades de apariencia y comportamiento de una capa selecciónela y configure las opciones siguientes:
PROPIEDADES DE LAS CAPAS
ID de capa: Permite especificar un nombre para identificar la capa en el panel Capas y en el código JavaScript. Introduzca un nombre. Utilice sólo caracteres alfanuméricos; no utilice caracteres especiales como espacios, guiones, barras ni puntos. Cada capa debe tener un nombre exclusivo.
Iz y Sup (izquierda y superior): especifican la posición del ángulo superior izquierdo de la capa con respecto al ángulo superior izquierdo de la página o de la capa padre, si la capa esta anidada. Teclee después de la cantidad la unidad de medida sin espacios en blanco.
An y Al: Especifican la anchura y la altura de la capa utilizando la misma unidad de medida.
Índice Z: Determina el índice z, u orden de apilamiento, de la capa. En un navegador, las capas con números más altos aparecen delante de las capas con números más bajos. Los valores pueden ser positivos o negativos. Resulta más sencillo cambiar el orden de apilamiento de las capas mediante el panel Capas que introduciendo valores de índice z específicos
Vis: Específica si la capa es visible inicialmente o no. Dispone de las opciones siguientes:
Default: (Predeterminada) La capa se mostrará o no dependiendo de la configuración del navegador.
Inherit: usa la propiedad de visibilidad de la capa padre
Visible: muestra el contenido de la capa siempre, independientemente del valor de la capa padre.
Hidden (Oculta) no muestra el contenido de la capa, independientemente del valor de la capa padre.
Im. Fondo: Especifica una imagen de fondo para la capa. Haga clic en el icono de carpeta para localizar y seleccionar un archivo de imagen.
Col. Fondo: Especifica un color de fondo para la capa. Deje esta opción en blanco para especificar un fondo transparente.
115
¿CÓMO FUNCIONAN LAS DESCARGAS DE INTERNET? Las descargas de información se realizan a través de un servidor FTP, este servidor es el encargado de almacenar los archivos que se pueden descargar dentro de una página Web. El servidor FTP se encarga de almacenar los archivos que se podrán descargar dentro del sitio, para que el usuario acceda a la página y puede realizar la descarga del material necesario.
116
ORGANIZACIÓN DE LAS DESCARGAS EN EL SITIO Es necesario que antes de iniciar con la creación del Sitio, genera un esquema de cómo se dividirán las secciones que conformaran al sitio. Este esquema le ayudará a crear una estructura sólida para un sitio más fácil de navegar, para que el usuario este a gusto a la hora de navegar. DISEÑO DE LA PÁGINA PRINCIPAL Para iniciar con el diseño del sitio de descargas, debe de iniciar primero con la recopilación de los archivos para descargar los wallpapers. Pida a su profesor que le proporcione los archivos de los wallpapers, active el tutorial para ver el procedimiento del desarrollo de la página principal.
Tutorial de diseño de lapágina principal
117
ARMADO DE LA PÁGINA DE DESCARGAS CATEGORÍA 2 Ahora creara la sección 2 donde seleccionara el archivo para descarga del sitio Web, dentro del tutorial encontrara los requerimientos que debe cumplir está pagina. ARMADO DE LA PÁGINA DE DESCARGAS CATEGORÍA 3 Casi está a punto de concluir con su sitio de descargas, sin embargo solo falta una sección en la cual el sitio iniciara con la descarga del material de descarga del sitio. Active el tutorial para observar los pasos que debe seguir para realizar esta sección. VÍNCULOS A SITIOS DE INTERNET Ya se cuenta con la estructura del sitio, ahora para culminar con toda la práctica solo necesitamos hacer la vinculación con los archivos a descargar. El tutorial final enlista los pasos para realizar la vinculación de los objetos.
Tutorial de diseño de lacategoría 2 de descargas.
Tutorial de diseño de lacategoría 3 de descargas.
Tutorial de vínculos a sitiosde internet.
118
¿QUÉ QUIERES DAR A CONOCER DE TÚ ESTADO? La planeación del sitio es muy importante, ya que por este método usted conocerá todas las secciones que conformaran su sitio Web. Así es usted debe hacerse la siguiente pregunta ¿qué quiero mostrar en mi página? Es importante que siempre se utilice la información más relevante que se utilizara dentro del sitio Web. Sin embargo la mayoría de los sitios Web sirven de referencia, es decir, solo enlazan a otros sitios Web donde se encuentra la información completa y detallada.
119
Solo uitlice imagenes con formatos JPG o bienGIF.
Las siguientes no deben tener una resoluciónmayor a 96 ppp.
Nunca utilice formatO BMP en una página, yaque es un formato muy pesado para abrir en laWeb.
El formato PNG es aceptado por algunosnavegadores Web.
Se recomienda que las imagenes que cuyaresolución es muy grande, se trabajen enPhotoshop para disminuir la resloción.
BÚSQUEDA DEL MATERIAL PARA LOS CONTENIDOS Para desarrollar esta práctica necesita recopilar la siguiente información:
1. Buscar en Internet las regiones que conforman a su estado. 2. Buscar páginas que ofrezcan información sobre cada región de su estado. 3. Recopilar un abreve sinopsis de cada región de su estado. 4. Buscar imágenes que representen a cada región de su estado. 5. Buscar una imagen del mapa de su estado con su respectiva división política.
TRATADO DE LAS IMÁGENES PARA LOS CONTENIDOS Un sitio Web ilustrado capta mucho mejor la atención de la persona que se encuentra navegando en una página Web. Sin embargo hay que tomar en cuenta algunos tips al trabajar con imágenes dentro de páginas Web.
120
Tomando en cuenta estos consejos verifique seleccione las imágenes que utilizara en su página Web. ARMA LA PÁGINA EN DREAMWEAVER Una vez que se recopilo la información y que ya se tienen las imágenes tratadas que se utilizarán en el sitio Web es hora de iniciar a armar la página Web.
Cree una página que documente la información más relevante de cada zona, que servirá como
vínculo del mapa de imagen. Puede hacer cualquiera de las siguientes opciones:
Observe el ejemplo: VINCULOS A SITIOS DE INTERNET Existe información que no se podrá agregar a su sitio Web como por ejemplo: Tours virtuales Mapas en 3D Vídeos de recorridos Interactivos
Cree una página por cada zona donde agregará un vínculo que regrese a la página principal.
Cree una página que contenga todas las descripciones de las zonas y agregue marcadores de fijación y un vínculo por cada descripción hacia la página principal.
Tutorial de ensamble de lapágina principal.
121
Es por eso que se vincularán algunos enlaces hacia otras páginas donde se encuentran estos elementos. Active el tutorial para realizar este procedimiento.
Tutorial de ensamble de lapágina principal.
122
Uso de las tablas en la Web Las tablas son uno de los elementos más utilizados a la hora de desarrollar una página Web, ya que permiten realizar un mejor ordenamiento del contenido de una página, además ayudan a crear diseños más precisos y estéticos, ya que dentro de una celda es posible colocar texto, imágenes, formularios, listas, hipervínculos e incluso otra tabla. En HTML las tablas no tienen definiciones para crear columnas, en su lugar las filas de una tabla extienden horizontalmente la tabla y las celdas se usan para extenderla verticalmente, entonces la extensión de celdas genera las columnas. Por lo tanto las etiquetas requeridas en HTML para crear una tabla son:
Etiqueta de definición de la tabla: <TABLE></TABLE>
Definición de fila o renglón: <TR></TR>
Definición de cabecera de columna:
<TH></TH>
Definición de la celda: <TD></TD>
Una vez insertada una tabla en una página se pueden modificar muchas de sus propiedades utilizando el inspector de propiedades, como por ejemplo: el ancho y alto de las columnas y filas, añadir y eliminar filas y columnas, cambiarlas de lugar, añadir bordes y colores, etc.
TRABAJO CON LAS TABLAS Para insertar una tabla usando Dreamweaver debe realizar estos pasos:
1. Coloque el punto de inserción en el lugar donde desea insertar la tabla. 2. De clic en el icono Insertar tabla situado en el panel Común de la barra Insertar o escoja el
comando Tabla del menú Insertar. También podrá arrastrar el icono desde la barra Insertar hasta el punto donde desee insertar la tabla.
3. Se muestra el cuadro de diálogo de Insertar tabla, en el que se definen los datos necesarios para realizar el proceso, estos son:
123
Filas: Define el número de filas que va a tener la tabla. Columnas: Establece el número de columnas de la tabla. Ancho: Indica el ancho de la tabla, puede definirse en porcentaje o en pixeles, un valor de 100% haría que la tabla ocupara todo el ancho la página. Borde: Establece el grosor de los bordes de la tabla, si no deseas que la tabla tenga bordes, debes escribir 0 (cero) en este espacio. Relleno de celda: Especifica la distancia que habrá entre el borde de las celdas y su contenido. Espacio entre celdas: Indica el espacio que debe haber entre las celdas. PROPIEDADES PRINCIPALES DE LAS FILAS Y COLUMNAS Si selecciona una celda o un rango de celdas, el Inspector de propiedades le permitirá, realizar las siguientes acciones: Unir celdas Podrá unir dos o más celdas de la misma fila (sentido horizontal) o columna (sentido vertical), convirtiéndola en una sola celda. Por ejemplo, puede unir varias celdas para crear un título que abarque varias columnas. También puede dividir una celda de forma que haya más de una ocupando el mismo espacio. Para unir o combinar dos o más celdas realice los pasos siguientes:
1. Seleccione las celdas que desea unir. 2. De clic con el botón derecho del mouse, seleccione la opción Tabla y active combinar celdas.
124
Para dividir una celda, siga estas instrucciones:
1. Haga clic derecho dentro de la celda que se desea dividir. 2. De clic con el botón derecho del mouse y seleccione Tabla, active al opción Dividir celda.
Alinear el contenido de las celdas
La alineación horizontal establece la posición del contenido de la celda en relación a sus bordes izquierdo y derecho. Por el contrario, la alineación vertical delimita la posición en relación a sus bordes superior e inferior. Puede cambiar la alineación horizontal ejecutando las siguientes acciones:
1. De clic en la celda. 2. Seleccione una opción, Izquierda, Derecha, Centro y Predeterminada, en la lista desplegable
Horiz. Puede cambiar la alineación vertical ejecutando las siguientes acciones:
1. De clic en la celda 2. Seleccione una opción Superior, Medio, Inferior y Línea base (coloca el texto a la altura del
texto del resto de la página) en la lista desplegable Ver
125
Para poder modificar la anchura y la altura de la celda esnecesario que de doble clic sobre la segunda listadesplegable que se encuentra a la derecha del tamaño enlabarra de prpiedades.
Ancho y alto de la celda Los cuadro de texto An y Al, permiten establecer el Ancho y el alto de las filas o columnas seleccionadas en pixeles o en porcentaje del ancho y el total de la tabla. Escriba el número de pixeles o si desea utilizar como porcentaje, introduzca el símbolo de porcentaje después del número. Para que el navegador determine el ancho y el alto en función del contenido de la celda deje al campo de An en blanco. Active la casilla de verificación No aj. Para desactivar la ampliación o reducción de la anchura automática según el contenido. La anchura de las celdas de la columna o columnas seleccionadas será fija excepto si utiliza el mouse para ampliarlas o reducirlas manualmente. Establecer un fondo para las celdas El Inspector de propiedades muestra dos elementos Fnd. El. Cuadro de texto Fnd superior permite escribir el nombre del archivo de la imagen que servirá de fondo. Haga clic en el icono de carpeta para seleccionar la imagen o arrastre desde el icono de señalización de archivos, del cuadro de texto Fnd hasta el panel Sitio señalando la imagen. El icono Fnd y el campo de texto inferior se define el color de fondo de una celda, columna o fila utilizando el selector de color, desde el cual luego de dar un clic se presenta una paleta de colores, desde el cual podrá elegir uno. Puede hacer la misma acción para el borde.
126
No puede ordenar los datos en una tabla que tenga celdascombinadas, ya que la ordenación requiere que los datos sedesplacen entre filas, y las filas deben tener celdas idénticas.
Manejo del contenido de las tablas Puede añadir texto, imágenes, hipervínculos, etc., a las celdas de una tabla del mismo modo que lo haría fuera de ella. Al añadir el contenido de una tabla, ahorrara tiempo si usa el teclado en vez del ratón para desplazarse por la tabla; para ir a la celda siguiente presione la tecla TAB (tabuladora), para ir a la celda anterior presione Shift + TAB; si se encuentra en la última celda de la tabla, al presionar TAB Dreamweaver añadirá una fila nueva al final; también puede usar la flechas del teclado para moverse a donde desee. Puede añadir contenido manualmente, pegando un texto copiado de otro documento o si lo desea importando los datos. Anidar tablas Como se comentaba además de los datos mencionados que se pueden encontrar dentro de las tablas también es posible insertar una tabla dentro de una celda de otra. A esta acción se le como Anidar tablas. Esta acción es bastante sencilla lo único que necesita realizar es colocar el punto de inserción en la celda deseada, dar clic en el botón Insertar Tabla de la barra de herramientas Insertar en la pestaña Común. Ingrese las especificaciones para las dimensiones de la nueva tabla y pulse aceptar. Ordenar datos. Dreamweaver proporciona un comando que le permite ordenar los datos en una tabla basándose en
los datos de una solo columna o en los valores que se encuentran en dos columnas.
127
Para ordenar una tabla, selecciónela y elija Comandos – Ordenar tabla.
En el cuadro de diálogo que aparece, seleccione la columna por la que desea ordenar ya sea
una ordenación alfabética o numérica, y en un orden ascendente o descendente. Opcionalmente, puede elegir los mismos atributos para una segunda columna. Las opciones adicionales son incluir la primera fila en el orden (porque normalmente la
primera fila contiene información de encabezado que o desea que se mueva) y conservar los atributos de TR con las filas ordenadas, esta opción es importante activarla si es que su tabla contiene algún formato especial en algunas filas.
Modificar la tabla Por último ya que ha realizado un recorrido por los procesos indispensables para el manejo de las tablas y lo que le ayudarán en la manipulación de estos tan necesarios objetos Web, es hora de que conozca el menú al que debe recurrir cada vez que desee: Seleccionar la tabla, Dividir o combinar las celdas, Insertar filas, columnas o celdas, Eliminar filas, columnas o celdas, entre otras características de las tablas.
128
Este tipo de tareas podrán ser realizadas empleando el menú Modificar la opción Tabla y cualquiera de las opciones que se muestran en este submenú.
129
DISEÑO DE LA PÁGINA Copie su carpeta misitio en la ruta C:\Inetpub\wwwroot\ en su computadora. De la ubicación que le asigne su profesor copie la carpeta Premios dentro de la carpeta misitio. Al colocar esta carpeta de imágenes en el sitio directamente ya no se presentará el mensaje para agregar las imágenes al sitio, cada vez que asigne una. Observe que el contenido sean una carpeta llamada Plecas otra Tablas y algunas imágenes Gif y JPG además de un archivo de texto. Desde Dreamweaver, active el sitio y cree una página en blanco. Guarde la página con el nombre Premios.html y de cómo nombre a su página “5to Premio Internacional a!”. Abra el archivo de texto llamado Premios a.doc contenido en la carpeta Premio. Active el tutorial para visualizar el proceso.
ESTRUCTURA DEL MENÚ
1. Inserte el diseño de fondo llamado FndPremios.jpg dentro de una capa para que sea más fácil manipularlo.
2. En una capa más inserte una tabla de 3 filas x 8 columnas y acomódela como se observa. 3. Desde el panel Activos abra la carpeta Tabla que se encuentra dentro de Premios. 4. Coloque el puntero en la segunda fila dentro de la celda inicial e inserte la imagen 1logo.jpg
que se encuentra al principio de la lista. 5. Inserte las siguientes dos imágenes dentro de las celdas contiguas, observe el ejemplo. 6. Coloque el putero al inicio de la 4ta fila e inserte las siguientes 3 imágenes. 7. Inserte las siguientes 3 imágenes en la fila 6ta. 8. En la última fila inserte las dos imágenes restantes y en la celda final repita la imagen inicial. 9. Seleccione la tabla como si de un párrafo se tratara, arrastrando el Mouse sobre ella. 10. Desde el Inspector de propiedades asigne el color blanco para que el color del texto que no
interfiera con el fondo de su página.
Tutorial de diseño de lapágina.
130
11. Ahora escriba el nombre de cada categoría en la celda que se encuentra sobre la imagen omitiendo la imagen inicial y final.
12. El nombre de la categoría tiene que ver con el nombre de la imagen. 13. De el formato que desee y guarde los cambios. 14. Adapte el tamaño de la tabla de forma que se vea homogénea en su distribución.
Observe el ejemplo: INCORPORACIÓN DE LOS CONTENIDOS
1. Ahora aplicará la interacción a la página, para ello realice lo siguiente: 2. De clic en la capa donde se encuentra el titulo de la primera categoría. 3. Del menú Insertar active la opción Punto de fijación con nombre. 4. En la ventana que se presenta escriba la palabra que servirá como marcador. Pulse aceptar. 5. Inserte un Punto de fijación en cada título de categoría. 6. En la esquina inferior izquierda de la primera categoría dentro de una capa inserte un botón. 7. Elija el que le guste y vaya con el diseño de la categoría. 8. Escriba el texto Ir a Categorías. 9. Modifique el tipo y el tamaño de letra si lo desea. 10. Asigne el vínculo a la página Premio.html donde contiene la tabla. 11. Asigne el color negro como fondo. 12. Antes de pulsar aceptar verifique que los datos estén correctos. Pulse aceptar. 13. Adapte el tamaño de la capa al botón y acomódelo en la página. 14. Coloque el mismo botón en cada categoría.
Observe el ejemplo.
Tutorial de estrctura delmenú.
Tutorial de incorporación decontenidos.
131
ENLACE DEL MENÚ HACIA LOS CONTENIDOS
1. Regrese a la página Premios donde creó la tabla. 2. Ahora aplicará los hipervínculos hacia la página de los ganadores utilizando las imágenes
insertadas en la tabla. 3. Seleccione la primera imagen de las categorías y desde el Inspector de propiedades, coloqué
el putero dentro de la opción Vínculo. 4. Escriba el nombre de la página que contiene las categorías el símbolo # y el nombre del
marcador. 5. Publique la página y pruebe el vínculo. 6. Realice lo mismo para las demás imágenes. 7. Publique su página y pruébela.
Active el tutorial para seguir los pasos indicados.
Tutorial de enlace de menúhacia los contenidos.
132
¿QUÉ SON LOS FORMULARIOS? Una de las características más importantes de la Web es la posibilidad de recoger información proporcionada por los usuarios, es decir, dota de interactividad las páginas. Mediante la utilización de formularios puede pedir ciertos datos a los usuarios, y en función de lo que respondan efectuar unas acciones u otras. Un formulario puede estar compuesto por los campos o controles principales usados en Windows, campos de texto, campos de contraseñas, menús emergentes, listas desplegables, etc. Para que estos elementos proporcionen la interactividad profesional, necesita programar la tarea que deben ejecutar mediante algún lenguaje de programación, aunque en su caso no es la orientación que tiene conocerá las opciones necesarias para interactuar con su formulario. Añadir un formulario En Dreamweaver puede insertar un formulario de la misma forma que inserta un objeto en la página, activando la pestaña Formularios de la barra Insertar
133
Para añadir un formulario a un documento siga uno de los siguientes procesos:
Sitúe el cursor en el lugar de la página donde desea insertar el formulario. • Seleccione el icono Formulario de la Pestaña Formularios en la barra de herramientas Insertar. • Arrastre el icono hacia el contenido de la página. O bien seleccione del menú Insertar la opción Formulario.
Un dato clave cuando use formularios en su página Web es que, “No debe expandir los formularios mediante la
modificación del tamaño de su delimitador; los formularios se expanden automáticamente cada vez que inserta elementos.
134
Al hacerlo aparece el contorno color rojo de un rectángulo este elemento se denomina Delimitador de Formulario. Ajuste de las propiedades Las propiedades a modificar del formulario son pocas aunque de gran ayuda, a continuación observe la descripción de cada una:
Nombre del formulario Escriba un nombre exclusivo para el formulario. La asignación de nombre al formulario permite hacer referencia a él o controlarlo con un lenguaje de programación como JavaScript o VBScript.
Acción: especifique la ruta del URL en el que se encuentra la aplicación que procesará el formulario. Escriba la dirección o haga clic en la carpeta para seleccionarlo
Método: en esta opción elija la forma en la que lo datos se transfieren al servidor: • Elija POST para enviar los valores del formulario en el cuerpo de un mensaje. • Elija GET para adjuntar los valores del formulario al URL y enviar la información al servidor. No deberá usar el método GET con formularios con contenidos largos. Los URL están limitados a 8, 192 caracteres. Si los datos enviados superan dicha longitud la información se trunca dando lugar a errores imprevistos.
Destino: permite especificar la ventana en la que se muestran los datos devueltos por el programa ejecutado.
Enctype: permite especificar el tipo de codificación MIME de los datos remitidos al servidor para su procesamiento.
135
Objetos de texto para el formulario Una vez insertadas las etiquetas <form> en el documento, puede comenzar a añadir objetos de formulario. Los objetos de formulario se utilizan para solicitar información a los visitantes del sitio y a continuación se conocerán cada uno de ellos.
Campos de texto Los campos de formulario permiten recopilar información del usuario y se cuentan con 3 tipos de campos de texto que son: Campo de texto, Campo oculto y Área de texto. El campo de texto tiene como función recompilar información dentro del formulario. Crear un campo de texto: Coloque el punto de inserción en el interior del contorno y lleve a cabo una de estas operaciones: • Elija Insertar > Objeto de formulario> Campo de texto. • En la categoría Formularios, haga clic en el icono Campo de texto. Aparecerá un campo de texto en el documento.
Cuadro de Texto
136
Propiedades del campo de texto
Campo de texto: escriba un nombre exclusivo para el campo. Asegúrese de que el nombre es exclusivo, ya que no se puede repetir el nombre de un campo de texto en un formulario. No utilice espacios para separar palabras, utilice el carácter de subrayado. Por ejemplo, escriba primer_apellido en lugar de primer apellido.
Ancho car: lleve a cabo una de estas operaciones: • Acepte el valor predeterminado, que establece la longitud del campo de texto aproximadamente a 24 caracteres. • Escriba un número para especificar la longitud del campo de texto.
En Tipo: seleccione el tipo de campo de texto que desea crear: una línea, varias líneas o contraseña. Los campos de texto de una sola línea: Solo permiten escribir en una sola línea. Campos de texto de varias líneas: proporcionan mayor espacio al visitante pata escribir la respuesta solicitada. Los campos de contraseñas: son un campo de texto especial permitiendo sustituir lo escrito en su interior por asteriscos o viñetas.
Car máx: lleve a cabo una de estas operaciones: • Deje el campo vacío para que los usuarios puedan escribir todo el texto que deseen. Si el texto introducido por el usuario supera el ancho de caracteres (longitud) del campo, el texto se desplaza. • Escriba el número máximo de caracteres que el usuario podrá introducir en el campo. Por ejemplo, puede que desee limitar un campo de edad a tres dígitos o un campo de contraseña a ocho caracteres. Si el usuario supera el número máximo de caracteres, el formulario produce un sonido de alerta.
Val inicial: sirve cuando desea establecer un texto predeterminado para el campo. El valor introducido aparecerá en el campo de texto cuando el formulario se cargue por primera vez en el navegador del usuario.
Si lo desea, puede escribir una etiqueta o texto descriptivo junto alobjeto; puede aplicar formato de texto a las etiquetas de los objetosde formulario.
137
Campo oculto Los campos ocultos se pueden usar para información que sea igual en todos los formularios. Este campo se puede usar para información como el número de formulario o la fecha de creación. Normalmente este campo se utiliza para información que no desea se envié con el formulario y que el usuario no tiene la necesidad de ver o cambiar.
Área de texto Botones de opción y casillas de verificación Casillas de verificación Utilice las casillas de verificación cuando desee que el usuario pueda elegir más de una opción. Con las casillas de verificación, los usuarios activan o desactivan respuestas individuales. Cada casilla de verificación es independiente de las restantes.
Área de Texto
138
Para insertar una casilla de verificación: Coloque el punto de inserción en el interior del formulario y lleve a cabo una de estas operaciones: • Elija Insertar > Objeto de formulario> Casilla de verificación. • En la categoría Formularios, haga clic en el icono Casilla de verificación. Propiedades de la casilla de verificación
Nombre de la casilla
•escriba un nombre descriptivo para la casilla de verificación. Cada casilla de verificación es un elemento individual y debe tener un nombre exclusivo en el campo Nombre, para poder trabajar con él.
Estado inicial
•haga clic en Activado para que la opción aparezca marcada cuando el formulario se cargue inicialmente en el navegador, o Desactivado para que la opción se muestre sin marcar.
Valor activo
•escriba un valor para la casilla de verificación. Este dato tiene como función a nivel código especificar la opción seleccionada.
139
Botones de opción Al igual que las casillas de verificación, los botones de opción o botones de radio, pueden estar seleccionados o no seleccionados. Funcionan como un grupo y ofrecen valores de selección mutuamente excluyentes es decir solo se puede seleccionar uno. Utilice los botones de opción cuando el usuario sólo deba seleccionar una de las opciones de un grupo de opciones. Generalmente, los botones de opción se utilizan en grupos. Todos los botones de opción de un grupo deben tener el mismo nombre y contener distintos valores de campo. Para insertar botones de opción: • Elija Insertar > Objeto de formulario> Botón de opción o grupo de opción. • En la categoría Formularios, haga clic en el icono Insertar botón de opción o Grupo de opción. Propiedades de los botones de opción
Botón de opción
Escriba un nombre descriptivo para el grupo deopciones. Si crea varias grupos de botones de opciónen un formulario, asegúrese de que cada uno deellos tenga un nombre exclusivo.
Valor activo
Escriba el valor que deseas enviar a la aplicación del lado delservidor o a la secuencia de comandos de procesamientocuando el usuario seleccione el botón de opción. Por ejemplo,puede escribir esquiar en el campo Valor activado para indicarque el usuario ha elegido esquiar.
Estado inicial
Marque el botón de opción o manténgalosin marcar según lo necesite.
140
Grupo de opción Los botones de opción pueden ser insertados de uno en uno (Botón de opción) o como un grupo (Grupo de opción). Por lo tanto esta opción tiene como fin crear una serie de Botones de opción de una forma mejor estructurada. Para insertar un grupo de opción realice cualquiera de las siguientes opciones: • Elija Insertar > Objeto de formulario> Grupo de opciones. • En la categoría Formularios, haga clic en el icono Insertar Grupo de opción.
En la ventana que se presenta Especifique el nombre para el Grupo de opciones.
En Etiqueta escriba el texto que desea que aparezca en la opción.
En Valor escriba el valor que se tomará cada vez que se active esta opción y de esta forma saber que ha sido seleccionada.
Para agregar más campos utilice el botón son un símbolo + (más) y si desea eliminar elementos utilice el símbolo – (menos)
Para cambiar la posición de los elementos utilice las flechas de dirección.
Disponer utilizando, tiene dos opciones, colocar las opciones en forma de lista tan solo considerando saltos de renglón o bien colocar los elementos en forma de lista dentro de una tabla.
141
Listas y menús Una lista de opciones o un menú sirven para presentar distintas opciones al usuario en un espacio limitado. Las listas y los menús de formulario se crean en el mismo inspector de propiedades, pero proporcionan distinta funcionalidad al usuario.
Utilice una lista cuando el número de opciones sea pequeño y desee controlar el número de opciones que se muestran.
La opción Lista muestra los valores de las opciones en una lista de desplazamiento y permite a los usuarios seleccionar varias opciones.
Utilice un menú cuando el espacio sea muy reducido. Un menú muestra una sola línea e incluye una flecha abajo en la que el usuario hace clic para ver las pociones restantes del menú. El usuario sólo puede seleccionar un elemento del menú.
La opción Menú muestra los valores de las opciones en un menú emergente y permite a los usuarios seleccionar una sola opción.
Para crear una lista de desplazamiento: • En la categoría Formularios, haga clic en el icono Lista/menú.
142
• Elija Insertar > Objeto de formulario > Lista/menú y, si es preciso, seleccione el elemento lista/menú resultante. Propiedades de una lista / menú Valores de lista: se utiliza para añadir las distintas opciones. Al dar clic en este botón aparecerá el cuadro de diálogo Valores de lista. Coloque el punto de inserción en el campo Etiqueta de elemento y escriba el texto que aparecerá en la lista. En el campo Valor, escriba el texto o los datos que deseas enviar al servidor cuando el usuario seleccione el elemento. Para añadir otro elemento, haga clic en el botón con el signo más (+) y repita los pasos anteriores. Una vez añadidos todos los elementos a la lista, haga clic en Aceptar para cerrar el cuadro de diálogo Valores de lista. Seleccionado inicialmente: muestra las opciones disponibles creadas mediante el botón Valores de lista. Desde esta opción podrá activar el valor que se presentará activo al ejecutar el formulario.
Lista/menú: Escriba un nombre exclusivo para la lista.
Tipo: Seleccione Lista (para este ejemplo).
Alto: Escriba el número de líneas que se mostrarán en lalista. Si el número especificado es 1, aparecerán barras dedesplazamiento. 4 líneas es el estándar de opciones para esteobjeto.
Permitir multiples: active esta opción para permitirque los usuarios seleccionen más de una opción de la lista.
143
ARMADO DE LA PÁGINA Para el mejor desarrollo de esta página solicite a su profesor que lo apoye durante la elaboración de esta práctica. Debe generar un sitio Web para poder desarrollar esta práctica ya que el manejo de formularios solo funcionara sin se utiliza un Sitio Web. Recuerde guardar su carpeta de misitio en la dirección C:\Inetpub\wwwroot, de la computadora que esté usando para probar sus prácticas. INSERTAR FORMULARIO
1. Para colocar el formulario dentro del área blanca del diseño de fondo, es indispensable utilizar un poco de programación HTML.
2. Active la vista Código y diseño. 3. Coloque el cursor justo al final de la línea de código <body background="fondo%20uni.jpg"> y
pulse enter. 4. Escriba la etiqueta <br> varias veces seguidas hasta colocar el cursor en la parte deseada del
documento. 5. Puede desactivar la vista Código y Diseño para regresar a la vista de Diseño. 6. Ahora pulse clic en el documento para ubicar la posición cursor. 7. Pulse clic en la pestaña Formulario de la barra de herramientas Insertar. 8. Ahora de clic en el botón Formulario. El marco punteado rojo es el indicador de que tiene un
formulario en la página. 9. Dentro del Formulario aun, de clic en la pestaña Tabla y pulse el botón Insertar tabla. 10. Será una tabla de 7 Filas, 1 columna, ancho 640 pixeles y sin borde.
144
ARMADO DE LA SECCIÓN DE DATOS PERSONALES
1. Coloque el cursor en la fila 6 de la tabla. 2. Active nuevamente la pestaña Formulario y de clic en el botón Juego de campos. 3. Escriba Datos personales dentro del cuadro y pulse aceptar. Observe que el panel de código
se activa. 4. Todo lo que se encuentre entre estas etiquetas se colocará en un marco. 5. Pulse el botón Etiqueta y escriba Nombre completo: 6. De clic en el área de trabajo frente a la etiqueta creada. 7. Seleccione el botón Campo de texto con un clic. 8. Modifique el nombre a nom y para ancho de car de el valor 60 lo mismo que para Cars max. 9. Inserte otra etiqueta y escriba Edad: 10. De un clic en el área de trabajo frente a edad e inserte un Campo de texto. 11. Modifique sus propiedades dando como nombre ed y como ancho de carácter 3 lo mismo
para caracteres máximo. 12. Pulse enter para pasar al siguiente reglón. 13. Inserte una etiqueta y escriba e-mail: 14. Enseguida inserta un Cuadro de texto con el nombre mail y los valores 60 en ancho car y 60
en cars max.
15. Ahora inserte el campo para el teléfono. Establezca los valores que se presentan.
ARMADO DE LA SECCIÓN DE DATOS DE RESIDENCIA Coloque el cursor en el último renglón de la tabla. Inserte un Juego de campos y de cómo etiqueta Otros datos Coloque el cursor debajo de esta etiqueta en el área de diseño. Inserte el campo Domicilio considerando los siguientes datos de configuración. Pulse enter para agregar un renglón nuevo. Ahora inserte la etiqueta Cuidad: Ahora inserte una Lista/Menús selecciónela y modifique sus propiedades como se muestra. Agregue ahora la etiqueta y el campo Localidad y de las siguientes especificaciones.
Tutorial para configurar einsertar el formualrio.
Tutorial para crear la secciónde datos personales
145
ARMADO DE LA SECCIÓN DATOS DE OPCIONES
1. Ahora inserte una fila más en la tabla pulsando la tecla Tab. 2. Inserte un botón con las siguientes características. Observe 3. Inserte un segundo botón con las siguientes características. Observe 4. Para terminar, aplique formato a los elementos del formulario. 5. Publique la página para ver el resultado final del formulario. 6. Respalde su sitio para ocuparlo en a siguiente clase. 7. En la práctica siguiente se conocerá la forma de almacenar los datos del formulario en
Access.
Tutorial para crear la secciónde datos de residencia
Tutorial para crear la secciónde datos de opción
146
Uso de Access para hacer funcional la ficha de inscripción Trabajo con Access Para iniciar deberá activar Access 2007 y crear una base de datos en blanco. Recuerde que necesita guardar la base de datos a la hora de crearla.
Importante: Para el buen desempeño de esta práctica
deberá tener instalado el IIS (Internet Information Server) en la máquina en la que se trabajará o guardar su información en el servidor del instituto en la ruta especificada.
147
Creación de la tabla datos personales Verificando que en la sección de objetos se encuentre activa la opción Tablas, proceda a crear la tabla que contendrá los datos de la sección Datos personales y Otros datos del Formulario. Alta de los campos En la siguiente tabla se describe los campos que se utilizaran en la tabla de datos personales.
Nombre del campo
id
Nom_completo
Edad
Teléfono
Domicilio
Estado
Localidad
Creación de la tabla perfil de orientación Los campos que llevara la tabla son los siguientes:
Nombre del campo
id
Perfil
148
Esta tabla necesita contener las opciones que se agregaron en el formulario, para ello pulse doble clic en la tabla. Ya en la vista tabla comience a capturar los perfiles según se muestra en la siguiente tabla:
Id Nombre del campo
1 e-desing
2 Diseño editorial
3 Diseño de caricaturas
4 Diseño de imagen
5 Diseño de muebles
6 Publicidad
7 Expresión gráfica
8 Modelado en 3D
9 Diseño estilizado
10 Maestría en Diseño Grafico
Creación de la tabla detalles del perfil La siguiente tabla contendrá el registro de los perfiles que seleccione cada usuario que se registre en el formulario. Cree una nueva tabla con los siguientes campos:
Nombre del campo
Iddatos
Idperfil
149
Creación de la tabla auxiliar Para llevar el conteo de los usuarios registrados, es necesario contar con una tabla que administre este único dato, por lo tanto debe crear la siguiente tabla:
Nombre del campo
Id
Abra la tabla a agregue los siguientes datos, esto ayudara a la hora de programar la pagina Web. Permisos de la BD En la ubicación c:\Inetpub\wwwroot\ cree una carpeta llamada Formulario. Copie la bd dentro de esta carpeta. Busque los archivos Formulario .htm y fondo uni.jpg en la carpeta de su sitio web y cópielos dentro de esta misma carpeta. La ruta c:\Inetpub\wwwroot\ también se puede ubicar dentro de la
unidad d, e o f, lo importante es que se coloque en la unidad donde se tenga instalado el IIS.
150
Ahora sí comience con los permisos para la BD, active las propiedades de la BD dando clic derecho en el archivo y activando la opción Propiedades.
De clic en la pestaña Seguridad. (Si esta pestaña no se muestra pídale a su profesor se la active)
Busque en la lista el usuario (Cuenta de invitado para Internet (nombre del equipo\IUSR_........), si ésta opción no se presentará pulse el botón Agregar, luego pulse el botón Avanzadas en la ventana que se muestra.
151
Pulse el botón Buscar ahora y de la lista busque y seleccione el usuario IUSR_...... el nombre que se tenga después del guión bajo puede variar.
Pulse Aceptar en ambas ventanas.
152
Seleccione el usuario y active la casilla Modificar y pulse Aceptar. Aplicación de la programación para vincular el formulario Ya creada la Base de datos y una vez que le ha dado permisos de escritura sin los cuales no le permitirá almacenar los datos, ahora es necesario crear la programación para que los datos ingresados al formulario Web se almacenen en las tablas correspondientes. Abra Dreamweaver y active su sitio Web. Cree una nueva página y de la categoría páginas en blanco y seleccione como tipo de página una ASP, la llamada ASP VBScript.
153
Como puede observar no es más que una hoja en blanco como si fuera una página HTML. Active la vista de código ya que es con la que trabajará. Pero no se preocupe ya que no tendrá que programar ni una sola línea si abre el documento Página asp.doc de la ruta que le asigne su profesor. Copie su contenido y regrese a la página ASP que acaba de crear. Seleccione el código que tiene y elimínelo. Pegue el código copiado del documento Word. Guarde la página con el nombre guardadatos.asp, dentro de la carpeta Formulario creada anteriormente. Ahora busque entre el código la siguiente línea de código:
154
Vincular el formulario
Active la página que contiene el formulario y active la vista Código y diseño. Busque la instrucción que crea su formulario.
En la instrucción action escriba el nombre de la página ASP que se creó. Seleccione el objeto Lista de su formulario y cambie su nombre a est.
Esta instrucción contiene la ruta a la que se hará referencia para buscar su Base de datos.
ruta = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=d:\inetpub\wwwroot\formulario\datos.mdb"
155
Seleccione cada casilla de verificación del área Perfil de orientación y asigne un valor activado según corresponda a la casilla seleccionada.
156
Elementos multimedia Dreamweaver le permite añadir sonidos, películas, botones y texto que proporcionarán más atractivo y complementarán su información. Puede incorporar y editar archivos y objetos multimedia, como películas Flash y Shockwave, Applets de Java, QuickTime Active X y archivos de audio. Debe tener en cuenta que algunos de estos formatos necesitan que el navegador donde se reproduzca el elemento multimedia tenga instalado un plug-in (software) especial. Por ejemplo si añade elementos de Flash el navegador deberá tener instalado el reproductor de Flash.
Flash proporciona un formato grafico vectorial muy conocido para creación personalizada de controles animados, pantallas de inicio, dibujos animados entre otros elementos interactivos de la página.
Shockwave es un formato multimedia interactivo muy versátil, con audio video, animación y texto, y se usa para crear cualquier elemento desde interfaces personalizadas hasta películas, e incluso juegos.
157
¿Cómo insertar películas Flash? Dreamweaver permite la creación de botones y texto Flash de gran calidad partiendo de una lista predefinida de gráficos. De forma transparente para el usuario genera el archivo .swf correspondiente al botón o al texto además integrará el código necesario en la página HTML. Los tres tipos de archivos que existen de Flash para uso en Dreamweaver son:
Archivo Flash (.fla): es el archivo de origen de cualquier proyecto y se crea en el programa de Flash MX, por lo tanto solo puede ser editado en Flash y no en Dreamweaver o en el navegador.
Archivo de película Flash (.swf): es una versión comprimida del archivo fla optimizada para la Web. Este archivo se puede reproducir en navegadores o en Dreamweaver, pero no se puede editar en Flash sin tener el archivo fuente (fla)
Archivo de plantilla Flash (.swt): permite modificar y reemplazar información de un archivo de película Flash. Estos archivos e utilizan en el objeto de botón Flash que permite modificar la plantilla con texto o vínculos propios, para crear un SWF personalizado e insertarlo en el documento.
Para insertar una película Flash en su documento Dreamweaver realice los siguientes pasos:
1. Active el menú Insertar, elija Media y active la opción Flash.
158
2. Del cuadro Seleccionar archivo busque y seleccione el archivo Flash en formato SWF.
3. De esta forma se crea un objeto SWF en su documento. Este tipo de elementos también se puede insertar dentro de las capas para mover el elemento como mejor le convenga.
Puede realizar vistas preliminares de su elemento Flash desde el documento Dreamweaver seleccionando el objeto y activando desde el Inspector de propiedades el botón Reproducir. También puede usar Ctrl + Alt + P.
159
Cuando inserta una película Flash en Dreamweaver se aplica la etiqueta <object> para el control ActiveX de Flash para Internet Explorer y la etiqueta <embed> para el plug- in de Flash para Netscape de esta forma se obtendrán los mejores resultados para ambos exploradores. También se agrega el parámetro de atributo <codebase > para el control ActiveX que le indica a Internet Explorer dónde debe descargarlo automáticamente. Una vez insertada una película Flash en su página, use el Inspector de propiedades para definir las propiedades más comunes.
Nombre: especifica el valor para usarlo en el atributo nombre de HTML. Esta opción permite identificar la película para controlarla en JavaScript.
An y Al: especifica el ancho y el alto del objeto en pixeles.
Archivo: especifica una ruta de acceso al archivo .swf de Flash Puede introducir directamente la ruta o utilizar el botón Examinar.
Editar: le permite iniciar Flash MX para actualizar un archivo FLA. Este botón estará desactivado si no tiene cargado Macromedia Flash MX en el equipo.
Restab. tamaño (Restablecer tamaño): restaura el tamaño original de la película seleccionada.
Bucle: cuando está activado, hace que la película se reproduzca continuamente; cuando está desactivado, la película se reproduce una vez y se detiene.
Rep. autom. (Reproducción automática): reproduce automáticamente la película al cargar la página.
Espacio V (Espacio vertical) y Espacio H (Espacio horizontal): especifican el número de píxeles de espacio en blanco que habrá por encima, por debajo y en ambos lados de la película.
Si lo que desea es ver todas las animaciones SWF que tenga sudocumento, en activo, del menú Ver de clic la opción Plug-inseguido de la opción Reproducir todo. Por teclado se activa estaopción mediante Ctrl + Alt + Shift + P. Para detener alguna de lasanimaciones selecciónela y pulse Ctrl + Alt + X para desactivartodos sería Ctrl + Alt + Shift + X.
160
Calidad: especifica la calidad de presentación que usan los plug-in en la reproducción de una película. Los valores posibles son Baja, Baja automática, Alta, Alta automática. Este campo determina como se van a controlar las películas en máquinas con procesadores lentos.
Una buena opción es usar la opción Alta automática, que intenta ejecutar la mejor reproducción posible, pero escala de nuevo a una devolución de la imagen de calidad inferior, si la máquina del usuario no puede responder a las demandas de la película. Otra buena opción es Baja automática que comienza por una calidad inferior, pero aumenta la calidad si determina que la computadora es capaz de controlarla.
Escala: determina cómo se ajusta la película a las dimensiones establecidas por los campos de ancho y alto. La configuración predeterminada hace que la película se reproduzca entera.
Sin borde ajusta la película a las dimensiones establecidas para que no aparezcan bordes y se mantenga la relación de aspecto original.
Ajuste exacto ajusta la escala de la película a las dimensiones establecidas sin tener en cuenta la relación de aspecto.
Alinear: determina cómo se alineará la película en la página.
Predeterminado suele especificar una alineación con la línea de base. (El valor predeterminado puede variar en función del navegador del visitante del sitio.)
Línea de base e Inferior alinean la línea de base del texto (u otro elemento del mismo párrafo) con la parte inferior del objeto seleccionado.
Superior alinea la parte superior de una imagen con la parte superior del elemento más alto (imagen o texto) de la línea actual.
Medio alinea la parte central de la imagen con la línea de base de la línea actual.
Texto superior alinea la parte superior de la imagen con la parte superior del carácter más alto de la línea de texto.
Medio absoluta alinea la parte central de la imagen con la parte central del texto de la línea actual.
Inferior absoluta alinea la parte inferior de la imagen con la parte inferior de la línea de texto (incluidos los trazos descendentes, como en el caso de la letra g).
Izquierda sitúa la imagen seleccionada en el margen izquierdo, ajustando a la derecha el texto que la rodea. Si hay texto alineado a la izquierda delante del objeto, los objetos alineados a la izquierda suelen pasar a una nueva línea.
Derecha sitúa la imagen en el margen derecho, ajustando a la izquierda el texto que la rodea. Si hay texto alineado a la derecha delante del objeto, los objetos alineados a la derecha suelen pasar a una nueva línea.
Fnd (Fondo): especifica un color de fondo para la zona de la película. Este color también aparecerá cuando la película no se esté reproduciendo (mientras se carga y después de haberse reproducido).
Reproducir: ejecuta la animación en el área de trabajo.
Parámetros: abre un cuadro de diálogo para introducir parámetros adicionales que se transferirán a la película. La película deberá estar diseñada para recibir estos parámetros adicionales.
161
Además de las plantillas proporcionadas con la instalaciónde Dreamweaver, puede encontrar botones adicionalesen Macromedia Exchange para Dreamweaver, enhttp://www.macromedia.com/exchange/dreamweaver/
Los botones multimedia Dreamweaver presenta la ventaja de contar con botones que pueden ser ocupados en sus
desarrollos Web, sin la necesidad de diseñarlos.
Siga estos pasos para insertar un objeto de botón de Flash en su documento:
1. Active del menú Insertar la opción media seguida de la opción Botón Flash.
162
2. Seleccione el estilo del botón deseado de la lista Estilo. El área presenta el aspecto del botón
mientras se desplaza el Mouse sobre él o si se pulsa. 3. Introduzca el texto del botón dentro del campo Texto del botón. 4. Seleccione la fuente y el tamaño en los campos correspondientes. Pulse el botón Aplicar para
observar los cambios. 5. En la casilla Vínculo agregue la dirección o ruta de la página o archivo que se activará al dar
clic en el botón. 6. Seleccione un marco o ventana como destino para el vínculo mediante su elección en la lista
desplegable Destino. 7. Seleccione un color para el fondo usando el botón selector de color 8. La opción Guardar como le permite definir el nombre del archivo SWF con el que se guardará
su botón. 9. Haga clic en Aceptar para ver el botón dentro del documento.
2
3
4
5
6
7
8
9
163
Elementos básicos de Shockwave Las películas Shockwave han sido creadas por Macromedia Director Studio y es uno de los métodos más importantes de contenido de medio interactivo rico para la Web. El software que reproduce las películas Shockwave está disponible como plug –in para Netscape navigator y como formato de control ActiveX para Internet Explorer. El proceso para insertar archivos Shockwave es:
1. Clic en el botón menú Insertar, clic en Media seguido de Shockwave. 2. A continuación deberá buscar el archivo que sea cargar que en este caso deber ser de
Director. El trabajo del audio Los principales formatos de sonido soportados por Dreamweaver son:
MIDI
MP3
WAV
RAM,
RPM,
AIF Ahora existen 2 métodos útiles que le permitirán trabajar con sonido en Dreamweaver. « Insertar un enlace al archivo » para escuchar o ver directamente el archivo o bien que el navegador utilizado presente un cuadro de dialogo solicitando que se desea hacer.
164
Para insertar un sonido o video tendrá que agregar algún elemento en su documento Dreamweaver que llame al sonido o video, en el ejemplo se tiene un botón el cual está vinculado directamente a un sonido. Una vez presionado el botón activa el sonido el cual se reproduce automáticamente en el reproductor de Windows media. « Incrustar un archivo » para que el reproductor del archivo no se abra de forma independiente sino que se mantenga en la página.
165
1. Haga clic en el botón Plug-in del menú Insertar la opción Media y seleccione Plug – in.
2. A continuación se abrirá un cuadro de dialogo donde usted debe seleccionar el archivo de audio que desea utilizar.
El video en la Web Existen varios archivos y formatos de video (avi, mov, mpeg). Los factores que debe tener en cuenta antes de optar por un formato y un método para añadir sonido o video a una página Web son: Su finalidad El tipo de usuarios a los que está destinado El tamaño del archivo. La calidad de audio y video. Las diferencias de los distintos navegadores. Los formatos más conocidos de video son el MOV del sistema QuickTime de Apple y AVI estándar de Windows. Según el navegador, el formato de archivo y el sistema operativo usado, los programas que pueden reproducir los archivos multimedia pueden ser WinAmp, QuickTime o Windows Media Player. Ahora existen 3 métodos útiles que le permitirán trabajar con video en Dreamweaver. « Insertar un enlace al archivo » para escuchar o ver directamente el archivo o bien que el navegador utilizado presente un cuadro de dialogo solicitando que se desea hacer.
166
Para insertar un sonido o video tendrá que agregar algún elemento en su documento Dreamweaver que llame al sonido o video, en el ejemplo se tiene un botón el cual está vinculado directamente a un sonido. Una vez presionado el botón activa el sonido el cual se reproduce automáticamente en el reproductor de Windows media. « Incrustar un archivo » para que el reproductor del archivo no se abra de forma independiente sino que se mantenga en la página.
167
Tome encuenta que esta herramientasolo permite trabajar con vídeo cuyaextensión sea FLV
« Opción Flash Vídeo » Esta opción es una de las novedades que Dreamweaver 8 incorpora a sus herramientas. Flash Vídeo es una opción que le permite colocar video dentro de su página Web, añadiendo botones de control de vídeo parecidos a los reproductores de Flash.
168
¿QUÉ SON LOS MARCOS?
Permiten dividir la ventana de un navegador en varias regiones, cada una las cuales puede mostrar un documento HTML diferente. Por lo general, un marco muestra un documento que contiene controles de navegación, mientras que otro muestra un documento con contenido.
La disposición de marcos, por ejemplo podría incluir tres marcos: un marco estrecho a un lado que contiene una barra de navegación, un marco que se extiende por la parte superior y contiene el encabezado y datos principales de un sitio Web y un marco grande que ocupa el resto de la página y presenta el contenido principal. Cada uno de estos marcos muestra un documento HTML diferente. CREACIÓN DE UN CONJUNTO DE MARCOS En Dreamweaver, puede utilizar cualquiera de los siguientes métodos para crear un conjunto de marcos: > Para crear un conjunto de marcos en uno de los cuales se muestre el documento actual, utilice la categoría Diseño la opción Marcos de la barra Insertar.
MARCO 3
MARCO 1
MARCO 2
169
Un sitio que aparece en un navegador como una sola página compuesta de tres marcos consta realmente de al menos cuatro documentos HTML distintos: el archivo de conjunto de marcos y los tres documentos que albergan el contenido que aparece inicialmente dentro de los marcos.
OPCIÓN DISEÑO OPCIÓN MARCOS
DOCUMENTO
1
DOCUMENTO 2
DOCUMENTO 3
DOCUMENTO
4
170
MANEJO DE LOS DOCUMENTOS CON MARCOS Dividir un marco Para dividir el marco donde se encuentra el punto de inserción, elija un elemento divisor del submenú Modificar > Conjunto de marcos. Para dividir un marco o conjunto de marcos vertical u horizontalmente, arrastre el borde del marco desde el extremo hasta el centro de la vista Diseño.
171
Arrastre el borde del marco fuera de lapágina o hasta el borde del marco padre.
Cuando un documento de un marco que seva a eliminar incluye contenido no guardado,Dreamweaver le pedirá que guarde eldocumento.
No se puede eliminar totalmente un conjuntode marcos arrastrando los bordes. Paraeliminar un conjunto de marcos, cierre laventana de documento que lo muestra.
Si se ha guardado el archivo de conjunto demarcos, elimine el archivo.
Para dividir un marco utilizando un borde de marco que no se encuentra en el extremo de la vista Diseño, arrastre el borde del marco mientras mantiene presionada la tecla Alt. Acerca del manejo de los marcos
172
LAS PROPIEDADES DE LOS MARCOS Utilice el inspector de propiedades para ver y establecer las propiedades de un conjunto de marcos,
las cuales se describen a continuación:
Propiedades de la tabla
1ro
Seleccione el conjunto de marcos haciendo clic en uno de los bordes. 2
do Para ver todas las propiedades del conjunto de marcos, haga clic en la flecha de ampliación que
se encuentra en la esquina inferior derecha del inspector de propiedades.
Bordes determina si los marcos deben aparecer rodeados por bordes cuando se muestra el documento en un navegador.
Ancho especifica el ancho de los bordes en el conjunto de marcos.
Color del borde establece el color de los bordes. Utilice el selector de color para seleccionar un color o especifique el valor hexadecimal del mismo.
Selección FilaCol esta sección es una vista en miniatura de su conjunto de marco, la cual le servirá para establecer el mismo ancho a alto para columna o fila seleccionada en este mapa de la representación de sus marcos.
ALMACENAMIENTO DE UN CONJUNTO DE MARCOS Cuando utiliza herramientas visuales de Dreamweaver para crear un conjunto de marcos, a cada nuevo documento que aparece en un marco se le asigna un nombre de archivo predeterminado. Por ejemplo, el primer archivo de conjunto de marcos se llamará UntitledFrameset-1, mientras que el primer documento en un marco se llamará UntitledFrame-1.
Al seleccionar uno de los comandos guardar, se muestra un cuadro de diálogo que le permite guardar un documento con su nombre de archivo por omisión. Al ser tan parecidos los nombres de archivos predeterminados, puede resultarle difícil determinar el documento que está guardando. Para identificar el marco que muestra el documento que está guardando, mire el contorno de selección del marco en la ventana de documento (vista Diseño).
Untitled Frameset 1 Untitled Frame 1
173
Este proceso lo realizara después se seguir los siguientes pasos: 1. Seleccione el conjunto de marcos en el panel Marcos o en la ventana de documento. 2. Lleve a cabo una de estas operaciones: º Para guardar el archivo de conjunto de marcos, elija Archivo > Guardar conjunto de marcos. º Para guardar el archivo de conjunto de marcos como un archivo nuevo, elija Archivo > Guardar conjunto de marcos como:
VÍNCULOS PARA CONTROLAR LOS CONTENIDOS DE LOS MARCOS Para incluir un vínculo en un marco que abra un documento en otro marco, deberá establecer el destino del vínculo. El atributo target de un vínculo específica el marco o ventana en la que se abrirá el contenido vinculado.
Para guardar todos los archivos asociados a unconjunto de marcos: Elija Archivo > Guardar todo. Seguardarán todos los documentos abiertos en elconjunto de marcos, incluidos el archivo de conjuntode marcos y todos los documentos con marco.
Por ejemplo:
Si la barra de navegación está en el marco de la izquierda y desea que el material vinculado aparezca en el marco de contenido principal de la derecha, deberá especificar el nombre del marco de contenido principal como destino de todos los vínculos de la barra de navegación. Cuando un visitante haga clic en un vínculo de navegación, el contenido especificado se abrirá en el marco principal.
174
Los nombres de marcos sólo se pueden asignar seleccionando lainstrucción que crea el marco en el área de código y desde la ventana depropiedades se activa el nombre para el marco para ser designado
Para seleccionar el marco en el que debe abrirse un archivo, deberá establecer un marco como destino, por lo que deberá realizar lo siguiente:
1. En la vista Diseño, seleccione texto o un objeto.
2. En el campo Vínculo del inspector de propiedades, haga clic en el icono de carpeta y seleccione el archivo con el que debe establecerse el vínculo.
3. Despliegue el menú emergente Destino, y observe que aparecen los marcos así como los nombre de algunos marcos (si ha asignado nombres, aparecerán en este menú) y seleccione un nombre de marco para abrir el documento vinculado en el marco seleccionado.
175
CREACIÓN DEL ÍNDICE DE PÁGINAS El siguiente ejercicio consiste en realizar un listado de vínculos a sitios Web que se encuentran en la red, desglosando las páginas por categorías. Para el mejor desarrollo de esta página solicite a su profesor el documento correspondiente a esta clase. El documento contiene las categorías así como las direcciones Web a utilizar, aunque también puede optar por ocupar direcciones y categorías de su elección. Recuerde guardar su carpeta de misitio en la dirección C:\Inetpub\wwwroot, de la computadora que esté usando para probar sus prácticas.
1. Inicie por la página que servirá de índice para su directorio. Para ello cree un documento nuevo en Dreamweaver.
2. Cree una tabla de 30 filas por 1 columna, con un ancho de 30 % y sin borde. 3. Llena la tabla con el listado de categorías que se tiene en el documento de Word. 4. Deje una celda vacía antes de comenzar con captura de la siguiente categoría. 5. Si faltarán celdas al final de la tabla para completar los datos pulse la tecla Tab para agregar
una fila más. 6. De formato a su tabla. Se siguiere que sea un diseño sencillo. 7. Ahora asigne un fondo para su página, desde el menú Modificar y la opción Propiedades de
la página. 8. Elija una imagen como fondo de su página. 9. Solicite a su profesor le indique la ubicación de la imagen pleca izq.png 10. Pulse aceptar en la ventana para ver el resultado en su página. 11. Seleccione la tabla y modifique el ancho de la columna en un 20%. 12. Guarde su página con el nombre categorias.htm
A continuación active el tutorial para visualizar el ejemplo:
Tutorial de creación deíndice de página.
176
CREA LA PÁGINA DE MARCOS CONTENIDOS Active la opción Archivo Nuevo De la ventana que se presenta elija la opción Conjunto de marcos. En la lista que se encuentra a la derecha elija la opción marco superior fijo, izquierdo animado. Pulse el botón crear. El mismo resultado hubiera sido si en un documento en blanco activará el marco desde la barra Insertar y la opción Marcos. Active el tutorial para ver el procedimiento completo. AJUSTA LAS PROPIEDADES DE LOS MARCOS
1. Para comenzar a trabajar con los marcos es necesario que se modifiquen algunas propiedades que a continuación se mencionan.
2. Seleccione desde el menú Ventana la opción Otros seguido de Marcos. 3. Esto activará un panel llamado Disposición avanzada en la pestaña Marcos. 4. Pulse clic en la opción topFrame y se activarán las propiedades para ese marco. 5. Cambie el nombre de este marco por marcosup. 6. De la opción Origen arrastre el señalador del archivo hasta el panel de Archivos y seleccione
el archivo encabezado.htm. 7. También puede pulsar la carpeta y buscar la ubicación del archivo manualmente. 8. Sabrá que lo hizo correctamente por que ahora su marco superior deberá contener la página
que contiene el encabezado. 9. Adapte el tamaño del marco para apreciar adecuadamente el archivo. 10. Ahora vamos con el marco izquierdo, para ello selecciónelo del panel Marcos. 11. Desde sus propiedades cambie el nombre del marco por marcoizq. 12. De la opción Dezpla. active la opción Si para activar las barras de desplazamiento para este
marco. 13. Adapte el ancho del marco para ver las categorías adecuadamente. 14. Ahora desde el panel seleccione el último marco. 15. Cambie el nombre de este marco por marcocon. 16. Señale la página contenidos.htm. 17. Guarde su conjunto de marcos y cada unos de los marcos que lo compone. 18. Primero se guardara el conjunto de marcos. 19. Luego cada uno de los marcos, por lo que debe tener cuidado de no duplicar nombres de
archivos. 20. Podrá saber que marco se está guardando para la selección activa del marco en el área de
diseño. 21. Publique la página para ver el resultado.
Tutorial de creación demarcos contenidos.
177
El siguiente tutorial mostrara el resultado que se debe de obtener. DISEÑA EL ENCABEZADO DE LA PÁGINA
1. Cree un documento nuevo. 2. Desde el menú Insertar active la opción capa para agregar este elemento en su página. 3. Pulse clic dentro de la capa insertada. 4. De la ubicación que le indique su profesor inserte la imagen pleca sup.png. 5. Recuerde guardar la imagen en si sitio Web. 6. Acomode la capa de tal forma que la imagen quede en la esquina superior izquierda. 7. Guarde su página con el nombre encabezado.htm 8. Cree otro documento en blanco. 9. Desde el menú Modificar y la opción Propiedades de la página, modifique el color de la
página a Blanco. 10. Guarde su página con el nombre de contenidos.htm
Active el tutorial para realizar el procedimiento indicado: CREA LOS VÍNCULOS HACIA LAS PÁGINAS
1. Comience a vincular las opciones de cada categoría basándose en las direcciones Web que tiene el comento.
2. Observe el siguiente ejemplo y ponga atención para que después lo aplique a las opciones restantes.
3. Seleccione la primera opción de la categoría inicial. 4. Valla el documento que tiene las direcciones Web y copie la dirección URL que corresponde
a esta opción.
Tutorial de ajuste depropiedades de los marcos.
Tutorial de diseño deencabezado de la página.
178
5. Regrese a Dreamweaver y pegue esta dirección en la opción Vínculo de las propiedades del texto seleccionado.
6. De la opción Dest, active la lista y seleccione el marcocon para que ese sea el lugar de destino de la página activa por este vínculo.
7. Guarde los cambios y publique la página para probar el vínculo. 8. Como puede ver este proceso es sencillo y la única complicación es aplicar este proceso a
cada opción de su menú. 9. Realice lo mismo para cada opción de su lista de categorías.
Observe los pasos en el siguiente tutorial.
Tutorial de creación devínculos hacia las páginas.
179
COMPROBACIÓN DE LOS SITIOS Cada vez que se encuentra navegando en la red seguramente se ha topado con páginas como las siguientes:
Dreamweaver integra herramientas de control que permiten chequear a fondo como funciona la página Web en su navegador y su respuesta. Estas herramientas le permitirán saber que las páginas tiene la apariencia y el funcionamiento esperado al verlas en los navegadores de los usuarios finales dependiendo de las marcas y versiones de los mismos como Explorer, Navigator, Opera; por poner un ejemplo más gráfico de lo que se busca con la comprobación de un sitio es verificar que no hay vínculos rotos o que el peso de la página es el adecuado, entre otras situaciones. COMPATIBILIDAD DE LOS NAVEGADORES Resulta útil comprobar el funcionamiento de su página Web en caso de que una vez que se encuentre en la red le permita ofrecer a sus visitantes la posibilidad de ver algún tipo de contenido si el navegador no es compatible con el contenido de su página. Es necesario adjuntar un comportamiento a la etiqueta body de la página dado que es la etiqueta compatible prácticamente con cualquier navegador, además no deberá usar ninguna secuencia de JavaScript. De esta manera, los visitantes que entren en la página con JavaScript desactivado podrán ver algo de contenido y no simplemente una página en blanco de error.
Vínculo no disponible Página basada en Linux Un vínculo roto
180
Comprobar el navegador El siguiente proceso explica de manera general el proceso para comprobar un navegador, observe con atención:
1. Desde Dreamweaver abra alguna de las páginas que contenga vínculos a otros documentos.
2. Active el panel Comportamientos utilizando Shift + F4
3. Haga clic en el botón del signo más (+) y elija del menú emergente Acciones la opción Comprobar navegador.
181
4. Determine el criterio de separación que desea aplicar a los visitantes: por tipo de navegador, por versión de navegador o por ambas.
5. Comience por especificar una versión de Netscape Navigator.
6. En los menús emergentes contiguos, elija las opciones sobre lo que debe ocurrir si el navegador corresponde a la versión de Netscape Navigator especificada o posterior y lo que debe ocurrir en caso contrario. Cuenta con las siguientes opciones:
Permanecer en la página Ir a URL Ir a Alt URL
Hay opciones tanto parausuarios de Nestcape (unnavegador basado en textocomo Lynx.), de Explorer uotros navegadores.
Estas opciones permitiránque usted asigne unapágina para aquellosusuarios que no tenga laposibilidad de ver elcontenido de su página.
182
7. En los menús emergentes contiguos, elija las opciones sobre lo que debe ocurrir si el navegador corresponde a la versión de Internet Explorer especificada o posterior y lo que debe ocurrir en caso contrario.
8. Permanecer en esta página es la mejor opción para los navegadores distintos de Navigator e IE porque la mayoría de ellos no son compatibles con JavaScript y, si no pueden leer este comportamiento, permanecerán en la misma página de todos modos.
9. Para las opciones de ir a un URL se deberá especificar las direcciones en los espacios
designados en la ventana. Si introduce un URL remoto, deberá introducir el prefijo http:// además de la dirección www.
10. Haga clic en Aceptar. 11. Compruebe que el evento predeterminado es el que usted desea.
Si no lo es, seleccione otro evento en el menú emergente..
183
PRUEBA DE LOS VÍNCULOS DEL SITIO La reparación de los vínculos rotos (vínculos que no siguen una ruta válida o que señalan a un archivo inexistente) de un sitio grande puede resultar tediosa y laboriosa. Esto se debe a que los sitios grandes pueden llegar a contener cientos de vínculos con documentos internos y a que los vínculos pueden cambiar con el tiempo. Los archivos huérfanos (archivos que siguen existiendo en el sitio pero que ya no están vinculados a ningún vínculo) también pueden ser problemáticos, pues ocupan espacio en el disco duro y pueden confundir a otros miembros del equipo encargado del sitio. Utilice la función Comprobar vínculos para buscar vínculos rotos y archivos sin referencia en archivos abiertos, partes de un sitio local o sitios locales completos. Los únicos vínculos que Dreamweaver verifica, son los establecidos con documentos del sitio. Asimismo, Dreamweaver recopila una lista de vínculos externos que aparecen en el documento o documentos seleccionados, pero no los verifica. Cuando Dreamweaver termina de comprobar los vínculos en los archivos especificados, abre el panel Verificador de vínculos (en el grupo de paneles Resultados). Este cuadro de diálogo muestra una lista de los vínculos rotos, los vínculos externos (vínculos que Dreamweaver no puede comprobar) y los archivos huérfanos. Comprobar los vínculos del documento actual 1. Guarde el archivo en una ubicación dentro del sitio local de Dreamweaver. 2. Elija Archivo > Comprobar página > Vínculos.
184
3. El informe aparecerá en el panel Verificador de vínculos (en el grupo de paneles Resultados).
4. Para guardar el informe, haga clic en el botón Guardar informe del panel Verificador de
vínculos
185
PRUEBAS DEL TIEMPO DE DESCARGA DE UNA PÁGINA Dreamweaver calcula el tamaño basándose en todo el contenido de la página, incluidos los objetos vinculados, como las imágenes y los plug-ins. Dreamweaver realiza una estimación del tiempo de descarga en base a la velocidad de conexión introducida en las preferencias de barra de estado. El tiempo de descarga real dependerá de las condiciones generales de Internet. La regla de los ocho segundos es una buena norma para controlar el tiempo de descarga de una página Web concreta.
Regla de los 8 segundos
• La mayoría de los usuarios noesperarán más de ocho segundos aque la página se cargue.
186
Establecer las preferencias de tiempo y tamaño de descarga 1. Elija Edición > Preferencias 2. Seleccione Barra de estado en la lista Categoría de la izquierda. Aparecerán las opciones de preferencias de Barra de estado. 3. Elija una velocidad de conexión para calcular el tiempo de descarga. Si el diseño se realiza para una intranet, puede seleccionar 1.500.
187
USO DE LOS INFORMES PARA COMPROBAR EL SITIO Cuando pruebe el sitio, puede compilar y generar informes para varios atributos HTML por medio del comando Informes. Este comando permite comprobar los vínculos externos, las etiquetas de fuentes anidadas combinables, el texto alternativo que falta, las etiquetas anidadas repetidas, las etiquetas vacías que pueden borrarse y los documentos sin título. Puede comprobar este tipo de problemas HTML en los documentos seleccionados o en todo el sitio antes de publicarlo. Después de ejecutar un informe, puede guardarlo como archivo XML y posteriormente, importarlo a una instancia de plantilla, una base de datos o un hoja de cálculo e imprimirlo o mostrarlo en un sitio Web. Ejecutar informes de comprobación del sitio
1. Elija Sitio > Informes.
Aparecerá el cuadro de diálogo Informes.
2. Elija una categoría para elaborar el informe y el tipo de informe que desea ejecutar.
188
Seleccione sobre de que realizará el informe (en el ejemplo se aplico a todo el sitio creado en esta materia)
4. Haga clic en Ejecutar para crear el informe.
Dependiendo del tipo de informe elegido, puede que el sistema le pida que guarde el archivo
5. Aparecerá una lista de resultados en la barra de propiedades la ficha Informe de sitios.
Una forma eficaz y práctica para depurar su sitio Webes utilizando el comando Limpiar HTML del menúComandos para corregir los errores notificados002E.
189
Es momento de evaluar los conocimientos obtenidos en la materia.