Source: https://www.scribd.com/doc/44485407/Manual-v015
Timestamp: 2017-03-25 06:05:42+00:00

Document:
BrowseInterestsStay InformedCareerPersonal GrowthFiction & BiographiesHealth & FitnessLifestyleCultureBrowse byBooksAudiobooksNews & MagazinesSheet MusicBrowse allUploadSign inJoinAlcántara1
Índice 1. Conceptos Básicos ...................................................................................................... 1 1.1 ¿Qué es una página web? ................................................................................ 1 1.2 Lenguajes.......................................................................................................... 2 1.2.1 Lenguaje HTML ...................................................................................... 2 1.2.2 Lenguaje JavaScript ............................................................................... 3 1.3 Dominios ........................................................................................................... 3 1.4 ¿Cómo publicar un sitio web? ........................................................................... 4 1.5 Acceso a la página web .................................................................................... 4 1.6 Cómo planificar el sitio web............................................................................... 5 1.7 Reglas básicas en el diseño.............................................................................. 9 1.7.1 Lo visual en el proceso creativo ............................................................. 9 1.7.2 Estilo visual........................................................................................... 10 1.8 Formatos gráficos ........................................................................................... 10 1.8.1 ¿Qué son los formatos gráficos?.......................................................... 10 1.8.2 Formatos vectoriales ............................................................................ 11 1.8.3 Formatos bitmap................................................................................... 11 1.8.4 Los formatos gráficos en Web: GIF y JPG ........................................... 11 1.8.5 Velocidad.............................................................................................. 12 1.9 El texto en las páginas .................................................................................... 12 1.10 Tablas ........................................................................................................... 13
2. Etiquetas HTML ......................................................................................................... 14 2.1 Introducción..................................................................................................... 14 2.2 HTML (Hypertext Markup Lenguaje). .............................................................. 15 2.2.1 Editar – Guardar y Visualizar................................................................ 15 2.2.2 Estructura Básica HTML....................................................................... 15 2.3 Pasos a seguir durante el trabajo en Notepad. ............................................... 16 2.4 Ejemplos del Código HTML............................................................................. 17 2.4.1 Fondo (color o imagen) de nuestra página. .......................................... 17
2.4.2 Dando Formato al Texto del Documento. ............................................. 19 2.4.3 Listas. ................................................................................................... 21 2.4.3.1 Lista numerada. ........................................................................... 21 2.4.3.2 Lista con viñeta. ........................................................................... 21 2.4.3.3 Lista de definición. ....................................................................... 22 2.5 Vínculos de Hypertexto. .................................................................................. 23 2.5.1 Vínculos externos hacia páginas lejanas.............................................. 23 2.5.2 Vínculos externos hacia páginas cercanas........................................... 24 2.5.3 Vínculos internos: anclas...................................................................... 24 2.5.4 Vínculos de correo electrónico ............................................................. 24 2.6 Agregando Imágenes a su Página. ................................................................. 28 2.7 Uso de Tablas. ................................................................................................ 29 2.7.1 Estructura básica de las tablas............................................................. 30
3. Dreamweaver ............................................................................................................ 33 3.1 Requisitos del sistema. ................................................................................... 33 3.2 Aspectos básicos de Dreamweaver ................................................................ 33 3.2.1 Área de trabajo. .................................................................................... 33 3.2.2 Diferentes vistas de Dreamweaver. ...................................................... 34 3.2.2.1 Trabajar con la vista de Diseño.................................................... 35 3.2.3 Ventanas de Dreamweaver. ................................................................. 35 3.2.3.1 Barra de herramientas.................................................................. 35 3.2.3.2 Panel de Objetos.......................................................................... 36 3.2.3.3 Inspector de Propiedades ............................................................ 38 3.2.4 Configurar el sitio.................................................................................. 39 3.2.4.1 Planificación y diseño de sitios..................................................... 40 3.2.4.2 Configurar sitios con Dreamweaver ............................................. 40 3.2.4.3 La ventana Sitio ........................................................................... 44 3.3 Trabajando con Dreamweaver. ....................................................................... 45 3.4 Insertar Imagen. .............................................................................................. 47 3.5 Insertar Tabla .................................................................................................. 49
3.6 Importar datos desde Excel............................................................................. 51 3.7 Vínculos .......................................................................................................... 53 3.7.1 Anclas................................................................................................... 54 3.8 Marcos ............................................................................................................ 56 3.8.1 Crear Marcos........................................................................................ 58 3.9 Vistas de Disposición. ..................................................................................... 61 3.10 Añadir sonido a una página........................................................................... 64 3.11 Formularios. .................................................................................................. 66 3.11.1 Objetos de formulario. ........................................................................ 66
4. Fireworks ................................................................................................................... 76 4.1 ¿Qué es la creatividad?. ................................................................................. 76 4.2 Aspectos básicos de Fireworks....................................................................... 76 4.2.1 Área de trabajo. .................................................................................... 76 4.2.2 Herramientas. ....................................................................................... 78 4.2.3 Herramientas de trazado. ..................................................................... 80 4.3 Creación de texto ............................................................................................ 80 4.3.1 Asociación de texto a un trazado.......................................................... 81 4.4 Uso de la herramienta pincel........................................................................... 82 4.4.1 Edición y remodelado de trazados editando los puntos. ...................... 82 4.5 Transformación y distorsión de objetos........................................................... 83 4.6 Insertar imágenes ........................................................................................... 84 4.7 Dibujar rectángulos y círculos ......................................................................... 84 4.8 Efectos y cambio de rellenos .......................................................................... 85 4.8.1 Aplicación de bordes biselados. ........................................................... 85 4.8.2 Aplicación de efectos de relieve. .......................................................... 85 4.8.3 Aplicación de sombras y luces. ............................................................ 86 4.8.4 Efecto Eye Candy................................................................................. 87 4.9 Enmascaramiento de imágenes...................................................................... 89 4.10 Creación de rollovers .................................................................................... 90 4.10.1 Rollover Simple. ................................................................................. 91
..........................10..............................................11........... 101 5....................................................3 Edición de trazados de movimiento de símbolos................................................................................................. 96 4...... 92 4.........................................11............12 Exportación de la animación . Relación Dreamweaver y Fireworks ................................ 105
........................................................... 103 Bibliografía........2 Uso de comportamientos arrastrar y colocar para crear efectos de imagen de intercambio..........................................Alcántara
4......13 Presentación preliminar de ajustes de optimización y comportamientos .......................1 Acerca de las animaciones.. 96 4.....11 Creación de animaciones......11.......... 99 4...................... .............................14 Exportación ................................... 95 4.......................11...............................................................2 Creación de símbolos de animación.............................4 Trabajo con fotogramas............... 99 4... 98 4........................................... 97 4.........................
• Para el “navegante o internauta” una página web es una pantalla en su monitor que le muestra la información que va buscando y enlaces a otros sitios relacionados.
El diseñador define la página web como algo más completo y técnico que el simple “navegante”. una para el “navegante” y otra para el diseñador de páginas web. para lo cual habrían respuestas desde dos perspectivas. Para el diseñador una página web. es un documento que desarrolla para mostrar información en la pantalla de un monitor.html
Unidad 1.Alcántara
Drawing by Feza Balci en: Usability Methods & Tools http://research.edu/usability/index. Estas instrucciones se escriben siguiendo un lenguaje llamado HTML (Hypertext Markup Languaje).vt.Conceptos Básicos 1.cs.. La página web se concreta en un documento con un nombre terminado
.1 ¿Qué es una página web? Podemos preguntarnos ¿qué es una página web?. que contiene además de la información una serie de instrucciones para indicar cómo se ha de mostrar esa información.
. El editor de páginas web utiliza un editor tipo texto. PHP.2 Lenguajes Para el diseño de una página web. los cambios que se realicen se ven sobre la marcha. el mismo objetivo. y últimamente XML que aunque no son excesivamente complejos. una tabla de 3 celdas por 2 filas la vemos visualmente de esa forma. Es importante saber que el HTML es un lenguaje que se escribe en paquetes de modo texto.Alcántara
con la extensión . y no como un código de programación HTML. como son DreamWeaver y Fireworks.html. o uno gráfico. DHTML. Por otro lado si se desea que la página sea dinámica e interactúe como sistema de ventas. básicamente se utiliza el lenguaje HTML así como Java Script si deseamos realizaron algunos efectos en la misma. etc.) forman un sitio web. o en su caso el Netscape. para el desarrollo de este curso se utilizarán dos paquetes de la familia Macromedia.
. Una serie de páginas web interconectas e interrelacionadas de alguna forma (el mismo tema. por lo cual. así como manejadores de bases de datos como SQL. entonces tendríamos que acudir a lenguajes como Perl.
1. Lo anterior ya sería para desarrolladores con capacidad de análisis de sistemas y diseño de bases de datos.2. en el mismo notepad que incorpora Windows.1 Lenguaje HTML El lenguaje HTML es la base estructural en la que están diseñadas las páginas de la World Wide Web (www). pedidos. Son los llamados editores WYSIWYG ("What You See Is What You Get") La forma de crear páginas web con estos programas es de forma visual. Hasta hace muy poco tiempo el diseño de páginas Web exigía el conocimiento de los códigos propios del lenguaje HTML. Así.htm o . Existen en el mercado distintos programas creados específicamente para facilitar el diseño de websites. Al utilizar un editor de texto hay que contemplar la idea de conocer el lenguaje HTML. En este curso sólo mencionaremos HTML y un poco de JavaScript. etc. etc. En cuanto al navegador podrás usar el que viene en los equipos con Windows.
Requisitos para realizar un sitio web Los requisitos para realizar un sitio web son mínimos: una computadora. entre otros. actualmente la utilización de este lenguaje de programación está al alcance de cualquier usuario. por ejemplo. Sin embargo. ASP. MySQL. prácticamente igual que lo verían los usuarios cuando visiten nuestra página.
1. que habitualmente está almacenado en un servidor. de esa manera podrás comprobar que todo lo que hagas funciona en ambos exploradores. Oracle. resultaban confusos y de difícil manejo. que es el Internet Explorer. también se pueden construir las Web en simples editores de texto. un navegador y un editor de texto simple es suficiente.
de que las entradas de los formularios no son válidas o que le faltó información en la captura de datos. y alertar al usuario con una ventana de diálogo. deberás tener un dominio del tipo -por ejemplo'midominio. Además.2 El lenguaje JavaScript JavaScript es un lenguaje de scripts o líneas de código que se puede agregar al código html. Tener un dominio del tipo 'abogados-mexico.com>abogados-mexico.com/mi-empresa/' da una imagen bastante mala.0. Google también te listará dentro de estos resultados si el servidor donde hospedas tus páginas web está físicamente en estos países.2. Originalmente era denominado LiveScript. Por ejemplo.com' te da la opción de que desde otras páginas web te enlacen de la manera: <A href=http://www.
.Alcántara
1. JavaScript permite la realización de aplicaciones de propósito general a través de la www y aunque no está diseñado para el desarrollo de grandes aplicaciones es suficiente para la implementación de aplicaciones www completas o interfaces www hacia otras más complejas. Fue éste el primer cliente en incorporarlo. una aplicación escrita en JavaScript puede ser incrustada en un documento HTML proporcionando un mecanismo para la detección y tratamiento de eventos. Sin existir comunicación a través de la red una página HTML con JavaScript incrustado puede interpretar. si quieres aparecer en los resultados de Google referentes a un determinado país.0.abogados-mexico.ar' (si quieres aparecer en los resultados de Argentina') o 'midominio.sitios-gratis.
1.com. Se ejecuta sobre 16 plataformas diferentes. incluyendo los entornos de Microsoft e incluso el MS Explorer lo incorpora desde su versión 3. esto para dar algo de efectos a una página web.com.com</A> Esto te dará la posibilidad de optimizar tu sitio web para las palabras 'abogados México'. y el precio de un dominio ya no es excusa para que tengas el tuyo propio. como clicks del ratón o validación de entradas realizadas en formularios.3 Dominios ¿Debería tener mi propio dominio? Tener un sitio web en 'paginas.mx' (en los de México). y fue desarrollado por Netscape para su navegador Netscape Navigator 2.
o “web server”. Dentro de DreamWeaver. también se podrá definir un sitio remoto vía FTP para la publicación de archivos. CuteFTP o WS_FTP. dar determinados permisos a los archivos. y de controlar el acceso a los mismos. El servidor de páginas web se encarga de administrar los sitios que estén a su cargo. Con el software FTP será posible la actualización y mantenimiento de la Web. crear subdirectorios.5 Acceso a la página web Para que los usuarios tengan acceso a páginas HTML. El servidor de páginas web se encarga de “servir” las páginas HTML mediante el protocolo http (Hyper Text Transfer Protocol).4 ¿Cómo publicar un sitio Web? Para enviar archivos hacia un servidor.
Proceso de grabar información por parte del webmaster y visualización por los diferentes visitantes al sitio. eliminar o renombrar archivos una vez enviados al servidor. Podrá enviar todos los archivos utilizados en la web a su espacio reservado para ello en el servidor. tipo leechFTP. se requiere contar con un servidor de páginas web.Alcántara
1. Esto se hace indicando el directorio donde está alojada la página y el nombre de la misma. Mediante este protocolo de comunicación. etc. es recomendable usar un programa cliente FTP (File Transfer Protocol). se le especifica al servidor web la página html que deseamos utilizar. Filezilla.
Proceso de solicitud de una página y su posterior visualización en el monitor.
1.6 Cómo planificar el sitio web El primer paso es: “Apagar la Computadora” Sí: para crear un sitio en internet el primer paso es apagar el equipo.net/obra07/menu_fed000.Alcántara
http://www. tomar un papel y lápiz y hacer un esquema que responda a las siguientes preguntas:
¿Qué quiero publicar? ¿A quién va dirigida mi página? ¿Con qué material cuento?
Antes de empezar a editar una página web debemos dedicar un tiempo a planificar nuestro trabajo para asegurarnos de qué vamos a incluir en la web.sctnl. de dónde lo
Protocolo Servidor Ruta Archivo
Ejemplo de una trayectoria para acceder a un archivo en especial o localización del mismo.
vamos a obtener y qué aspecto externo le vamos a dar. Un minucioso trabajo de planificación reducirá los errores que se producen cuando nos ponemos a editar una página. Si queremos evitar borrar y repetir las cosas una y otra vez, convendrá que sigamos los siguientes pasos: A. Definir la audiencia destino: al crear una web desearemos que comunique adecuadamente el mensaje y contenidos que quiere transmitir: publicar los resultados de una investigación, describir una situación o la inclusión de contenidos diversos. En función de la audiencia destino el diseño de la web será diferente. Por ejemplo, si queremos publicar un artículo, los visitantes visitarán la página para leerlo, por lo que todo elemento que adorne excesivamente la página o contenga gráficos muy pesados en tamaño (kbps o mbps) hará lenta la página por lo que nuestros visitantes se cansarán de esperar a que ésta se despliegue completamente y por consiguiente abandonarán nuestro sitio. En una web docente la audiencia destino serán alumnos y profesores de una asignatura, curso o tipo de estudios. El material incluido en la web debe ir dirigido a dicha audiencia para un mejor aprovechamiento. B. Establecer objetivos: debemos pensar cuáles son los objetivos de nuestro sitio web: ¿divulgar información?, ¿promocionar una asociación? ¿comercio electrónico?, ¿educar?, ¿entretenimiento?. Debemos definir los principales objetivos que queremos alcanzar, que junto con la audiencia destino nos permitirán definir los contenidos que debemos incluir en el sitio web. Los objetivos en una web docente pueden ser muy diversos y dependen de si lo que queremos es una web para educación a distancia o una web que sirva de apoyo y complemente a la educación presencial. En el caso de la educación a distancia (teleformación) los objetivos serán que el alumno supere el curso o asignatura a través de los contenidos y procedimientos que se establecen en la web. En estos casos será fundamental el apoyo de una guía de estudio y la elaboración de materiales didácticos de calidad. En el caso de que la web docente nos sirva de apoyo para la clase habitual, se deben incluir contenidos que complementen y amplíen lo visto en clase, con ejercicios, pruebas de auto-evaluación, tutoría on-line y con referencias a webs de donde extraer la información para realizar cualquier actividad relacionada con la asignatura. C. Organización: una vez definidos los objetivos debemos recopilar todo el material gráfico y escrito que incluiremos en la web. Seguramente más adelante nos encontraremos que es necesario crear nuevos contenidos, pero si estamos organizados bastará simplemente con incluirlos donde corresponda. Una vez definidos claramente los objetivos y disponer del material necesario es hora de organizarlo. Cuánto más grande sea el sitio web, más organización necesitaremos. En una web docente incluiremos materiales escritos (apuntes, exámenes, documentación, etc.) que debemos recopilar para organizarlos. Es conveniente que
el material adopte un formato lo más parecido para que se identifique con la web. Igualmente, debemos decidir si el material será visible on-line o habrá que descargarlo previamente (se usan normalmente los formatos ppt, doc, xls, pdf, zip, etc.).
Ejemplo de un mapa de sitio para una página de docentes. Imagen de: http://usuarios.lycos.es/fisikito/mapa%20del%20sitio.htm
D. Crear la estructura de directorios: una vez que hemos organizado nuestras ideas y recopilado el material necesario para la web, es el momento de organizar los contenidos en un sistema de archivos y directorios de forma ordenada. A este proceso se le llama mapeado del sitio web. Este trabajo es una parte esencial en la planificación del sitio web, ya que nos ayudará a especificar las trayectorias correctas de los enlaces, imágenes y documentos que vayamos a incluir en la web. Para ayudarnos a visualizar la estructura de directorios es recomendable dibujar una especie de organigrama en el que vayamos colocando los directorios en función de su importancia desde un nivel superior a otros inferiores. En una web docente se suelen emplear directorios como programación de la asignatura, ejercicios, exámenes, material de consulta, etc.
Ejemplo de estructurar directorios, subdirectorios y archivos. E. Crear un guión: es el momento de hacer un boceto de la página principal y de cada página que esté enlazada a ésta, incluyendo todos los elementos que creamos necesarios (texto, imágenes, botones, hipervínculos,...) sin preocuparnos demasiado por los ajustes, es simplemente un boceto. Es importante recordar que los visitantes de una web no lo van a leer completamente sino que lo que desean es encontrar rápidamente lo que les interesa, por lo que habrá que establecer una estructura adecuada de enlaces entre las páginas. El movimiento de un lado a otro del web debe ser lo más intuitivo posible para facilitar el trabajo del visitante. Un sitio web en el que sea difícil encontrar aquello que buscamos será abandonado rápidamente. F. Desarrollo del aspecto externo: el siguiente paso será la representación visual del sitio web. Es esencial la combinación de color, gráficos, tipos y texto que nos ayuden a expresar lo que queremos comunicar con estilo e impacto. Los editores de páginas web incluyen recursos que ayudarán a los no especialistas en diseño a conseguir una estética adecuada. Cuestiones a tener en cuenta.- Estos son algunos aspectos que debe seguir para conseguir un buen desarrollo de su web. • Espacio y equilibrio: cantidad de espacio que los elementos de la página ocupan, así como la cantidad de espacio vacío y cómo equilibrar todo esto. Normalmente a los diseñadores les gusta ver abundante espacio en blanco entre los elementos, lo cual facilita la legibilidad y no agobia la vista. Color: dependiendo del tipo de web incluiremos colores brillantes o suaves. En el caso de una web docente es preferible colores suaves que faciliten la navegación y lectura de la documentación. Tipo de letra: esta característica añade personalidad al sitio web pero es preferible no incluir muchos tipos de letra en una página web. Formas: en casi todas las páginas webs se emplean rectángulos para colocar las cabeceras de página o titulares. Pero podemos emplear cualquier otra forma geométrica que nos ayudará a crear un sitio con personalidad.
Esta etapa del proceso creativo.
1. descriptivo y preciso. entonces bríndele un enlace.1 Lo Visual en el Proceso Creativo El proceso de composición es el paso más importante en la resolución del problema visual.
. Haga que sus enlaces sean pertinentes al tema que está tratando.7. Tener algo interesante que decir en su Página Principal: Su página deberá ser informativa para mantener vivo el interés. Verifique sus enlaces periódicamente: No deje que expiren sus enlaces durante largos períodos de tiempo. Reconocer el trabajo de los demás: Si algún "Web Site" le ayudó de alguna manera a construir su página. Algunos Browsers pueden no aceptar sus gráficas. Recordar que no en todos los Browser o Navegadores aparece igual: No haga que su página dependa demasiado de ciertos comandos HTML que pueden no aparecer en todos los Browsers. así que proporcione textos alternativos. Consistencia: emplear por todas las partes un mismo esquema de colores que facilite la navegación. Revise su validez. si es posible.
1. Los resultados de las decisiones compositivas marcan el propósito y el significado de la declaración visual y tienen fuertes implicaciones sobre lo que recibe el espectador. No usar gráficas de otros autores si no está autorizado: Hay muchas fuentes de gráficas gratis. También existen graficadores sencillos con los que usted puede crear sus propias gráficas. Esto hará que las personas se motiven a leer su página. formularios de realimentación.7 Reglas básicas en el diseño • • • Colocar un título corto. es donde el comunicador visual ejerce el control más fuerte sobre su trabajo y donde tiene la mayor oportunidad de expresar el estado de ánimo total que se quiere transmita. Sea abierto a comentarios o sugerencias: Especifique vínculos de correo electrónico o. Colocar fecha de la última revisión: Indique cuándo se realizó la última revisión. No será otra lista de listas: Todo el mundo ya conoce las herramientas de búsqueda. en este caso la Web.Alcántara
Textura o gráficos de fondo: hay que asegurarse de que el texto sea claro y fácil de leer.
.. donde el espectador ha de interactuar en mayor o menor grado de libertad. la unificación. la economía. que dan lugar a lenguajes individuales en el uso verbal.. Estas mismas fuerzas.
1.1 ¿Qué son los formatos gráficos? Básicamente. la expresión y la finalidad básica. para la expresión personal. etc. los formatos gráficos son archivos en los cuales se guarda información que conforma una imagen.. político y psicológico. la razón por la que algo se hace: para la supervivencia.
1. entorno que es crucial para todo lo que hacemos o expresamos visualmente. un formato digital presentado en la pantalla de una computadora.Alcántara
No existen reglas absolutas sino cierto grado de comprensión de lo que ocurrirá en términos de significado si disponemos las partes de determinadas maneras para obtener una organización y una orquestación de los medios visuales. se combinan en el modo visual para crear un estilo común de expresión. En primer lugar está la elección del medio y la influencia de ese medio sobre la forma y el contenido. las técnicas. Las posibilidades que ofrece cada formato con respecto a la gama de colores. pero influida principal y profundamente por lo que está ocurriendo en el entorno social. es decir. la integración de numerosas decisiones y grados. El resultado final es una expresión individual (o a veces colectiva) dirigida por todos o la mayor parte de los factores mencionados..2 Estilo Visual El estilo es la síntesis visual de los elementos. La elección visual presenta una serie de opciones: la búsqueda de decisiones compositivas mediante la selección de elementos de carácter elemental. En nuestro caso el medio es la Web. Tenemos también el propósito. a la compatibilidad. a la rapidez de carga.7.8. la sintaxis. La política. físico. Cada formato es independiente. En las artes visuales el estilo es la síntesis última de todas las fuerzas y factores. Resulta complicado y difícil describirlo con claridad.8 Formatos gráficos 1. merece ser explicada para determinar cuál de ellos es el más adecuado para la tarea que estamos realizando. la manipulación de los elementos a través de técnicas apropiadas. la comunicación. el entorno y los esquemas sociales crean juntos una psicología de grupo. la incitación.
2 Formatos vectoriales Son más simples que los bitmap. porque estará menos comprimida. Estos objetos.Alcántara
Con respecto a la estructura. como máximo. nos permitirá elegir el nivel de calidad. Las imágenes bitmap poseen un tamaño natural en el cual se imprimirán perfectamente. la mayoría posee un header que indica al programa que lo solicite las características de la imagen que almacenan. resolución. especialmente para aquellos a los que queremos dotar de mayor calidad. Debido a esto. a diferencia de las vectoriales. curvas. Otro punto en contra de los formatos bitmap es la cantidad de memoria y espacio que ocupan.8. Consisten en una serie de dibujos lineales basados en una lista de objetos gráficos. etc. Recomendable para grandes gráficos y fotografías. En este tipo de formatos las áreas vacías entre las líneas pueden ser llenadas con colores o con "rellenos". Generalmente. por ejemplo su color. y permite la utilización de millones de colores (GIF soporta. forman dibujos lineales complejos. ubicados estratégicamente en la pantalla. rectángulos. pequeños diseños que se repiten una y otra vez sin dejar espacios vacíos hasta llenar el área en cuestión. triángulos. etc. es fácil notar una gran disminución de la calidad.
1.3 Formatos bitmap Contienen imágenes basadas en pixels (por ejemplo una imagen cuya resolución es de 640 x 480 pixels. contiene 640 pixels horizontales y 480 pixels verticales). Cuanto mayor sea la gama de colores. la mayoría de ellos utilizan diversos métodos de compresión de la información que constituye la imagen.
. El tamaño de las imágenes almacenadas en este tipo de formatos puede ser modificado sin notar pérdida alguna de calidad. la herramienta que utilizamos para guardar la imagen como JPG.
1. El formato gráfico JPG. no ofrecen grandes posibilidades con respecto a la variación del tamaño. y muchos más. pero. por ejemplo: líneas. más realismo se consigue con este tipo de formato. y pesará más a la hora de ser descargada. más espacio requerirá la imagen.4 Los formatos gráficos en Web: GIF y JPG Los dos formatos gráficos más utilizados para la Web son el JPG (JPEG) y el GIF.
1. Las imágenes generadas por scanner son de tipo bitmap. Recordemos que cuanto mayor sea la calidad. Gracias a esta característica son muy útiles a la hora de imprimir imágenes.8. Cada formato tiene una organización propia de su estructura. 256 colores). círculos. tipo. Al aumentar el tamaño bruscamente. comprime mucho más las imágenes que el GIF.8. Se pueden dividir en dos grandes grupos: los formatos vectoriales y los formatos bitmap.
9 El texto en las páginas Leer en una pantalla de una computadora no es demasiado cómodo ni recomendable para nuestros ojos. por eso es necesario buscar formas de distribuirlo por la página de forma que no parezca demasiado compacto. El periódico te servirá de ejemplo. en lugar de hacerlo de golpe. Por consiguiente. actualidad. Pero si aún así tienes mucho texto procura distribuirlo con elementos que rompan la continuidad. Y recuerda: párrafos cortos donde destaque claramente la idea que quieras transmitir. Observa que el texto que estás leyendo está distribuido en diferentes páginas web. como: Modificar las imágenes. los temas están agrupados por secciones: deportes. ¿Entonces si necesitamos poner un texto largo que hacemos? De entrada procurar repartirlo en páginas con cierta coherencia.
1. la imagen aparece poco a poco. cuando recibimos en el monitor la imagen. Su versatilidad nos permite crear efectos. Leer en la pantalla de una computadora causa cierto rechazo. no cabe duda que en muchos casos debemos poner textos. elementos que pueden ser simples líneas o pequeños gráficos que tengan relación con lo escrito. compilando varias imágenes.8. dotándolas de fondos transparentes Crear animaciones.5 Velocidad Podemos crear las páginas más atractivas.
. vamos viendo cómo llega. Aunque las páginas que viajan por la red son excelentes plataformas multimedia. Si aún así queda mucha lectura en las páginas plantéate poner una versión pdf (para el visor de adobe) o un archivo de texto descargable por el visitante. En la web las secciones podrían ser páginas o grupos de páginas. los internautas que nos visiten no esperarán a que nuestras maravillas aparezcan en su monitor. será una buena medida para no disuadir a nuestros visitantes.Alcántara
Salvo para grandes gráficos o fotografías. Así. con las imágenes más "elaboradas". y es menos aburrida la espera. y además incluir animaciones.
1. pero si caemos en el error de no controlar su volumen. Intentar que las imágenes no alcancen 30 K. espectáculos. una de nuestras mejores armas para el diseño de páginas Web puede convertirse en nuestro peor enemigo. emplearemos el formato GIF para guardar nuestras imágenes. Si utilizamos el GIF entrelazado (interlaced).
1.10 Tablas Las tablas son quizás el mejor método que tenemos para ordenar el texto, y los demás elementos en una página web. Una tabla básicamente es una colección de celdas organizadas en filas y columnas, pero esta organización tan cuadriculada puede romperse combinando varias celdas en una sola o dividiendo una celda en varias filas o columnas. Esto convierte a la tabla en un elemento tremendamente versátil para repartir texto e imágenes, en la página. En los ejemplos siguientes tienes algunas tablas modificadas en este sentido, se les han puesto bordes para ver como se han combinado o dividido las celdas.
Unidad 2.- Etiquetas HTML 2.1 Introducción La información en la Red necesita viajar de una manera rápida y precisa, para lo cual se creó el protocolo de comunicación HTTP o Hyper Text Transport Protocol, el cual fue desarrollado en un laboratorio de física de partículas del CERN en Suiza con el fin de transferir rápidamente a todos los usuarios lo últimos resultados de sus investigaciones. Inicialmente el WWW (World Wide Web) era poco interactivo, limitándose a desplegar la información en modo texto. Luego el permanente avance de tecnológico surgieron los visualizadores gráficos (browsers) y con ellos el HTML (Hypertext Markup Languaje) lenguaje utilizado para la presentación de la información en la red. La finalidad de los browsers, como Netscape o Internet Explorer es interpretar el código HTML que llega a nuestros computadores por medio del HTTP. Para Norman (1986), existen actividades cognitivas de un usuario en procesos que requieran de una relación entre la actividad física y actividad mental. Al respecto se enumeran las siguientes y se realiza una gráfica del mismo para ver la relación existente entre estas actividades. • • • • • • • Establecer un objetivo. Formar una intención Especificar las secuencias de acciones Ejecutar la acción Percibir el estado del sistema Interpretar el estado Evaluar el estado del sistema con respecto a los objetivos e intenciones
2.2 HTML (Hypertext Markup Languaje) El HTML es más una codificación que un lenguaje de programación. Su estructura básica es tan simple que cualquier persona sin principios en programación puede aprenderlo con gran facilidad. Lo sorprendente de este lenguaje es que proporciona al usuario la información en una manera interactiva, haciendo uso del hypertexto, o texto con enlaces hacia otros lugares del Web, o hacia inserciones de multimedia (videos, sonidos, gráficos, etc.). Además es universal y no depende del sistema operativo que se esté utilizando. Los documentos HTML se escriben en modo ASCII (texto plano), haciendo uso de cualquier procesador de palabras y en cualquier sistema operativo.
2.2.1 Editar - Guardar y Visualizar Para editar o crear un documento HTML se puede hacer uso de cualquier procesador de palabras. Para ello se debe modificar o digitar la estructura completa del documento y guardarlo como texto simple con extensión HTML. Ahora para visualizar nuestros cambios o ver como va quedando nuestra página, antes de cargarla en nuestro servidor, se puede abrir el archivo en cualquier visualizador, y este lo desplegará tal como se vería la página. Las opciones de que disponen los browser más comunes, son: Nestcape: Menu "File", comando "Open file in a browser" (Ctrl O). Para volver a cargar el archivo una vez que este ya esté abierto en el browser, se dispone del comando "Reload" del menú "View". Internet Explorer: comando "Abrir" del menú "Archivo". Para volver a cargar se dispone del comando "Actualizar", del menú "Ver".
2.2.2 Estructura Básica HTML Para comenzar debemos saber que el HTML utiliza una codificación genérica, la cual hace uso de “tags” o etiquetas. Mediante estas etiquetas es posible separar el contenido del documento de su formato. Los “tags” son comandos que se especifican en el cuerpo del programa, con el fin de darle las características deseadas a la información. Toda página Web debe contener la siguiente estructura:
donde TAG puede ser cualquier etiqueta. el título.Realizar la captura de las etiquetas de nuestra página html. La etiqueta <HEAD> indica un encabezado. le debe indicar al visualizador cuando finaliza. el cuerpo y el documento HTML.
. el cual es lo que realmente vemos en el Web. con excepción de unas cuantas.3 Pasos a seguir durante el trabajo en Notepad 1. Recordemos que para esto es que se creó el HTML. dentro del cual se coloca información como el título. toda presentación final debe ser proporcionada mediante las etiquetas. Para comenzar a escribir un documento. el cual debe estar contenido entre la etiqueta <TITLE> Entre la etiqueta <BODY> va el cuerpo del documento. entre otras).
2. es importante tener en cuenta que el lenguaje HTML no distingue más de un espacio entre caracteres y se olvida de cualquier formato que se le de al texto (negrilla.. cursiva. tipo de letra.Abrir el bloc de notas
2. para lo cual se utiliza </TAG>. De esta manera indicamos cuando comienza y termina el encabezado.Alcántara
<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> La etiqueta <HTML> le indica al visualizador que va a comenzar a leer un documento HTML y se debe colocar siempre al comienzo y al fin del texto. Cada etiqueta..
4 Ejemplos de código HTML 2.html. </title> </head> <body> </body> </html> ej002.: Centro de Estudios Universitarios :.. ejemplo1..1 Fondo (color o imagen) de nuestra página ej001. </title> </head> <body bgcolor = “green”> Centro de Estudios Universitarios </body> </html>
.Visualizarlo en el navegador. • Por último dar clic en el botón guardar. • En el área nombre ponerle nombre el archivo con su extensión p.: Centro de Estudios Universitarios :.html <html> <head> <title> . 4.e.html <html> <head> <title> .4. • En el área tipo: elegir Todos de los Archivos.Elegir en el menú Archivo la opción Guardar Como… • En la opción Guardar en: Ubicar la carpeta donde guardará el archivo.Alcántara
pink. ej003.
En la imagen se puede visualiza el título de la página.jpg”> Centro de Estudios Universitarios </body> </html>
. black. el contenido dentro del body o cuerpo de nuestra página. etc. gray. orange.: Centro de Estudios Universitarios :.Alcántara
Colores: yellow. se puede incluir una imagen de fondo de nuestra página. cyan. green. Así mismo.html <html> <head> <title> . blue. </title> </head> <body background = “cerro. purple. a continuación se muestra un ejemplo. así como el color que se utilizó dentro de la etiqueta body con el agregado bgcolor.
el HTML no distingue más de un espacio entre caracteres. Para lograr tales características en el texto del documento HTML (recordemos que el texto va dentro del cuerpo del documento entre las etiquetas <BODY> </BODY>) se debe hacer uso de las etiquetas que explicaremos a continuación. negrilla. cursiva. entre otras. y Preformateado aparece en formato monoespaciado</PRE> Etiquetas para párrafos: Nuevo párrafo (dos espacios)
. Etiquetas de formato: Negrita <B> Texto en negrita</B> Cursiva <I> Texto en cursiva</I> <U> Texto subrayado</U> Subrayado Monoespaciado <TT> Texto como si estuviera escrito en máquina de escribir </TT> <PRE> Texto que conserva todos sus espacios y tabuladores.Alcántara
2.4. saltos de línea. tamaño y tipo de fuente. viñetas.2 Dando Formato al Texto del Documento Como ya habíamos mencionado.
sans-serif">Centro de Estudios Universitarios</font></p> <p><font face="Arial. Donde x es un número entre 1 y 6. siendo 1 el tamaño mas grande y 6 el más pequeño <font> </font> Añade color al texto
ej004. Helvetica.html <html> <head> <title> .: Centro de Estudios Universitarios :.Alcántara
Línea horizontal Salto de línea (un espacio) Tamaño de la fuente Color de la fuente
<HR> <BR> <Hx> </Hx>. Helvetica. sans-serif" size="6" color="#FFFF00"><b><i><font color="#0000FF">Centro de Estudios Universitarios</font></i></b></font></p> </body> </html>
. Helvetica. sans-serif" size="4"><b><font color="#FF0000">Centro de Estudios Universitarios</font></b> </font></p> <p><font face="Arial. Helvetica. </title> </head> <body bgcolor = “green”> FORMATEO DE TEXTO <br><br> <b>Centro de Estudios Universitarios</b> <br> <i>Centro de Estudios Universitarios</i> <br> <u>Centro de Estudios Universitarios</u> <br> <tt>Centro de Estudios Universitarios</tt> <br> <pre>Centro de Estudios Universitarios</pre> <br> <p>Centro de Estudios Universitarios</p> <br> <h1>Centro de Estudios Universitarios</h1> <br> <p><font face="Arial. sans-serif" size="4"><b>Centro de Estudios Universitarios</b></font></p> <p><font face="Arial.
3.2 Lista con viñetas: Inserta un punto negro a los párrafos u objetos que se encuentran dentro de la siguiente estructura:
.4. Etc.1 Lista numerada: Numera los párrafos u objetos que se encuentran dentro de la siguiente estructura: <OL> <LI> Primer párrafo u objeto..4..
2.3.Alcántara
2.4. <LI> Segundo párrafo u objeto. </OL> Útiles para crear tablas de posiciones y enumerar procedimientos. En el lenguaje HTML se pueden construir varios tipos de listas:
2.3 Listas Las listas sirven para desplegar la información que debe ser enumerada o tabulada de una manera organizada.
. <DD> Primera definición. Etc. Etc... La estructura es la siguiente: <DL> <DT> Primer término.. </ul> <dl> <dt> Primer término.3 Lista de definición: Son útiles para las entradas de tipo diccionario o para las secciones de documentos donde un término es el encabezado de la sección y la definición es el texto de aquella.. simplemente agregando la estructura deseada dentro de la etiqueta correspondiente.4. </UL> Son útiles para enumerar por puntos los comentarios de su página.
. <DD> Segunda definición.
2. </title> </head> <body bgcolor = “green”> LISTAS <br><br> <ol> <li> Primer párrafo <li> Segundo párrafo <li> etc. </ol> <ul> <li> Primer párrafo <li> Segundo párrafo <li> etc. <DT> Segundo término. <dd> Primera definición. <dd> Segunda definición. </DL> A cada una de estas listas se les puede crear una lista dentro de ellas.Alcántara
<UL> <LI> Primer párrafo u objeto. ej005..html <html> <head> <title> . <dt> Segundo término.: Centro de Estudios Universitarios :..3. <LI> Segundo párrafo u objeto..
A esta etiqueta se le debe agregar el "URL" con el que se desea vincular. ftp.Alcántara
</dl> </body> </html>
2. es decir. También existen otro tipo de vínculos que llevan al navegador a otras partes como correo. tanto a nivel interno como externo. Las etiquetas HTML que se encargan de generar los vínculos son <A> y </A>. Esto se realiza de la siguiente manera: <A HREF="URL">Texto del vínculo</A> 2.1 Vínculos externos hacia páginas lejanas Este vínculo envía al lector fuera de la página hacia otro site Web. pueden crearse vínculos que lleven hacia una misma parte del documento (interno) o hacia otra parte del mundo Web (externo). entre otras. Generalmente son usados para relacionar al usuario con otros sitios interesantes en el mundo Web.5 Vínculos de Hypertexto El hipertexto son vínculos dentro del texto del documento HTML que permiten al usuario navegar con facilidad a través de la web.
La manera más sencilla de lograr esto es través de un vínculo que lleve al navegador a un cuadro de correo electrónico con la dirección determinada. Para marcar el fin del ancla (a donde debemos llegar) se hace uso de la etiqueta <A NAME="sección"> Texto del ancla </A>. La estructura es la siguiente: <A HREF=”mailto:dirección de correo electrónico" Texto del vínculo </A> Ejemplo:
. Estos vínculos son hacia archivos HTML que.
2.3 Vínculos internos: anclas Cuando una página tiene un gran contenido. Donde "sección" debe coincidir con el nombre designado en el inicio del ancla.2 Vínculos externos hacia páginas cercanas Generalmente las personas que diseñan sus páginas no encuentran cómodo desplegar toda la información en una sola.sct. se encuentran en el mismo directorio de la página principal. es posible hacer que el usuario navegue a través de la página.html y se encuentra en el mismo directorio de la Home Page.4 Vínculos de correo electrónico Por lo general las personas que diseñan sus páginas proporcionan la opción de tener una retroalimentación por parte del visitante.5.gob. Por ejemplo. Ejemplo: http://www. Para marcar el inicio del ancla se utiliza la etiqueta <A HREF="#sección"> Texto que relaciona al ancla </A>. Nótese que lo que sería en los otros casos el URL se ha cambiado por el nombre que se le da al ancla. el URL sería firmas. Si el nombre de documento es firmas.5.5. es común ver una página principal (Home Page) con una tabla de contenido a la cual se le han creado vínculos hacia cada uno de sus temas.html.Alcántara
El URL será entonces la dirección completa de la página a la que se desea crear el vínculo.
2. generalmente. precedido del signo #. El URL será entonces la ruta completa (incluyendo el nombre del archivo) que lleva al visualizador a cargar el documento que se desea desplegar. Por ejemplo si se crea una página para que las personas que visiten al Home Page registren su visita.mx
2. sino que crean varias páginas vinculadas entre sí. Para ello se debe marcar tanto el inicio como el fin del ancla.
html">Regresar a la página anterior</a></p> </body> </html> ej006_2.: Centro de Estudios Universitarios :.mx">Quejas o Sugerencias</a></p> </body> </html> ej006_1.com.google.html <html> <head> <title> . </title> </head> <body bgcolor = “green”> LINKS <br><br> <p><b>Enlaces hacia fuera de nuestro sitio</b></p> <p><a href="http://www.edu.edu.mx">Enlace hacia google</a></p> <p><a href="http://www.html <html> <head> <title> .Alcántara
<A HREF=”mailto:edpq148cronos.yahoo.com.html">Abrir ejemplo006_1</a><br> <a href="ej006_2.html <html> <head> <title> .html">Abrir ejemplo006_2</a></p> <p><b>Enlace hacia correo electrónico</b></p> <p><a href="mailto:joalcant@ceu.eafit. </title> </head> <body bgcolor = “green”> USTED HA ELEGIDO ABRIR EL ARCHIVO EJ006_2<br><br> <p><a href="ej006. </title> </head> <body bgcolor = “green”> USTED HA ELEGIDO ABRIR EL ARCHIVO EJ006_1<br><br> <p><a href="ej006.html">Regresar a la página anterior</a></p> </body>
.co" Sugerencias y comentarios</A> ej006.mx">Enlace hacia yahoo</a></p> <p><b>Enlaces dentro del sitio</b></p> <p><a href="ej006_1.: Centro de Estudios Universitarios :.: Centro de Estudios Universitarios :.
Helvetica. sans-serif"> <a href="#nacional">Nacional</a></font> <li><a href="#deportes"><font face="Arial. sans-serif"><b>Un fuerte terremoto activa la
. Helvetica. Helvetica. sans-serif"><b><a name="internacional"></a>Internacional</b></font></p> <p><font face="Arial.Alcántara
ej007. sans-serif"> Deportes</font></a> </ul> <p>&nbsp. sans-serif"><a name="inicio"></a>NOTICIAS </font> <ul> <li><a href="#internacional"><font face="Arial. sans-serif"> Internacional</font></a> <li><font face="Arial. Helvetica. Helvetica.</p> <p>&nbsp.html ANCLAS <html> <head> <title> .: Centro de Estudios Universitarios :. Helvetica. </title> </head> <body bgcolor = “green”> <font face="Arial.</p> <p><font face="Arial.
detenido esta semana en EE. sans-serif"><b><a name="nacional"></a>Nacional</b></font></p> <p><font face="Arial. 06:27 AM<br> </font></p> <p><font face="Arial.</p>
<p><font face="Arial.. Helvetica. por lavado de dinero y narcotráfico. el aspirante por el Movimiento Ciudadano a la alcaldía del municipio de Boca del Río. 26 jul (EFE). sans-serif"><a href="#inicio">Regresar</a></font></p> <p>&nbsp.6 grados en la escala de Richter. Helvetica. Helvetica. Helvetica. según informó en un mensaje de texto la agencia meteorológica del país. reza el eslogan utilizado por Adrián Ávila. Helvetica.</font></p> <p><font face="Arial. sans-serif"><b><a name="deportes"></a>Deportes</b></font></p> <p><font face="Arial. La agencia dijo que el sismo tuvo una magnitud de 6. sans-serif">jueves 26 de julio. sans-serif"><a href="#inicio">Regresar</a></font><br> </p> <p>&nbsp.. desencadenando una alerta por tsunami. dijo haber recibido de personas cercanas al actual gobierno mexicano para guardar la fortuna que le fue encontrada.Un candidato a alcalde en México aprovechó el alboroto surgido en el país en torno al caso de un empresario chino al que se le hallaron 205 millones de dólares en efectivo en su domicilio. Helvetica.Un fuerte terremoto submarino sacudió el jueves la provincia de Maluku del Norte en Indonesia. sans-serif"><br> El candidato mexicano aprovecha escándalo de empresario chino para su campaña México. sans-serif"><b> Futuro de Nery Castillo en Olympiakos se resolverá en próximos días <br> (miércoles 25 de julio. apodado "el chino". El eslogan de Ávila.</p> <p>&nbsp. Helvetica. al escoger una frase del acusado como lema electoral.Alcántara
alerta de tsunami en Indonesia</b></font></p> <p><font face="Arial.</p>
<p><font face="Arial. parafrasea la amenaza que el empresario chino Zhenli Ye Gon.. Helvetica. sans-serif"><br> YAKARTA (Reuters) . <br> </font></p> <p><font face="Arial.</p> <p>&nbsp. 03:04 PM) </b></font></p>
. en el estado oriental de Veracruz.UU. mientras que el Centro Geológico de Estados Unidos situó la intensidad del temblor en 7.4 grados y dijo que el epicentro estaba a 88 kilómetros de profundidad. votas por el chino o (te corto el) cuello". "Coopelas (cooperas).
luego se debe convertir a cualquiera de los formatos aceptados por el lenguaje HTML (GIF y JPEG).6 Agregando Imágenes a su Página Las páginas en el Web no deben estar llenas de texto por todos lados pues esto hace que los visitantes se cansen de verlas y como resultado obtendrán una página que nunca es visitada. creo que lo entenderán". quien en entrevista con la estación de radio "Estadio W" aseguró que será en los próximos días cuando se decida el futuro del futbolista de 23 años de edad. con el fin de hacer que la página sea lo más entendible posible. por lo que se espera la aprobación del Olympiakos griego para buscar nuevos horizontes. La estructura es la siguiente: <IMG SRC= "Nombre del archivo (incluye extensión)" > ej008.html IMÁGENES <html>
. el delantero Nery Alberto Castillo subió sus bonos y se cotizó en el mercado europeo. se habla de 20 millones de dólares que ofrecerían los ingleses para hacerse de los servicios del jugador. quien señaló que las ofertas concretas son de Ucrania e Inglaterra. El jugador tiene contrato con Olympiakos pero hay ofertas del Manchester City (Liga Premier) y Shakhtar Donetsk (Ucrania).</font></p> </body> </html>
2. Así lo manifestó Nery Castillo.Alcántara
<p><font face="Arial. dijo el ex jugador. Es en este punto donde entra a jugar la creatividad del diseñador.Luego de su extraordinaria actuación con la selección de México. "Este fin de semana se va a decidir. papá y representante del jugador. incluso. Una herramienta muy útil para hacer de las páginas un documento llamativo y amigable es hacer uso de imágenes relacionadas con el texto al que se está haciendo referencia. Helvetica. Lo primero es diseñar el gráfico deseado en cualquier programa de dibujo como el Corel Draw o el Adobe Photoshop. y si están a gusto con él esperemos que lo apoyen. sans-serif"><br> México. 25 Jul (Notimex). Para colocar una imagen en una página basta con llamarla desde el documento HTML (es similar los vínculos hacia páginas cercanas).. ¿Se imaginan una valla publicitaria sin ningún tipo de imagen? También es muy importante una excelente combinación de colores de fondo y de texto. esperemos que Olympiakos entienda la oportunidad de Nery.
7 Uso de Tablas En general las tablas pueden ser sin borde o con borde.jpg" width="453" height="300"> </p> </body> </html>
2. </title> </head> <body bgcolor = “green”> <p align="center"><img src=" cerro. La tabla sin borde es quizás la herramienta más útil en la codificación HTML. pues a través de ellas podemos organizar nuestro documento como lo deseemos.jpg" width="449" height="273"> </p> <p align="center"><img src="cinter2. teniendo en cuenta que el HTML no entiende más de un espacio. Pero ¿por qué no hacerlo usando la etiqueta preformateado para arreglar la distribución de mi documento?
.: Centro de Estudios Universitarios :.Alcántara
<head> <title> . tabulador o salto de línea.
. primera columna</TD> <TD>Primera fila. primera columna</TD> <TD>Segunda fila. primera columna</TD> <TD>Segunda fila....Alcántara
Sencillo: como todos sabemos esta etiqueta despliega el texto en el tipo de letra monoespaciado y no permite cambios ni de forma ni de tamaño.. entre otras.... La tabla con borde es útil para desplegar tablas de contenido... Conclusión. cuadros de atención..7. </TR>fin de fila <TR>inicio de fila <TD>Segunda fila......1 Estructura básica de las tablas <TABLE WIDTH = “100%” BORDER="Número entre 0 y 7"> <TR>inicio de fila <TD>Primera fila. </TABLE> Notas: El número que se designa en la etiqueta <TABLE BORDER="Número entre 0 y 7"> determina el ancho del borde de la tabla.. segunda columna</TD> <TD>Primera fila. el documento se vería horrible... resúmenes.
. </TR>fin de fila etc. tercera columna</TD> .. Este número puede estar entre 0 y 7. primera columna</TD> . Pero ¿qué es una tabla?: es un conjunto rectangular de filas y columnas que aparecen en su pantalla.
</title> </head> <body bgcolor = “green”> <table width="100%" border="2"> <tr bgcolor="ORANGE"> <td colspan="5"> <div align="center"><font face="Arial.: Centro de Estudios Universitarios :. Helvetica. sansserif">MATERIAL TELECOMUNICACIONES</font></div> </td> </tr> <tr> <td>NOMBRE</td> <td>UNIDAD 1</td> <td>UNIDAD 2</td> <td>UNIDAD 3</td> <td>PROMEDIO</td> </tr> <tr> <td>JUAN LUNA GARZA</td> <td>8</td> <td>9</td> <td>7</td> <td>8</td> </tr> <tr> <td>GRISELDA GALINDO</td> <td>9</td> <td>8</td> <td>7</td> <td>8</td> </tr> <tr> <td>LETY VILLANUEVA</td> <td>9</td> <td>8</td> <td>10</td> <td>9</td> </tr> </table> </body> </html>
.html TABLAS <html> <head> <title> .Alcántara
ej009.
2. • 32 MB de memoria de acceso aleatorio (RAM). es preciso disponer del hardware y el software siguientes. Estos son algunos de los componentes que se utilizan más habitualmente:
.1 Área de trabajo El área de trabajo de Dreamweaver puede adaptarse a distintas formas de trabajar y a diversos niveles de experiencia.1 Requisitos del sistema Para ejecutar Dreamweaver. Windows XP. áreas y ventanas que nos ofrece este software.2 Aspectos básicos de Dreamweaver Para empezar a trabajar con Dreamweaver hay que considerar las diferentes herramientas. • Un monitor de 256 colores con capacidad para mostrar una resolución de 800 x 600 píxeles. • Una unidad de CD-ROM. además de 110 MB de espacio libre en el disco duro. Windows 98. Windows 2000. Para Microsoft Windows: • Un procesador Intel Pentium o equivalente a 166 MHz o superior que ejecute Windows 95. entre ellas: • Área de trabajo • Diferentes vistas • Ventanas de Dreamweaver • Configurar el sitio 3.0 o posterior de Netscape Navigator o Microsoft Internet Explorer. Windows Me.Dreamweaver 3.
3.. • La versión 4.Alcántara
Los iconos de la barra del lanzador también aparecen en el lanzador. Para ver un elemento que actualmente no está abierto. situada en la parte inferior derecha de la ventana de documento. contiene botones que permiten abrir y cerrar los inspectores y paneles que utiliza con mayor frecuencia. previsualizar en un navegador. Los menús contextuales permiten acceder rápidamente a comandos útiles pertinentes para la selección o área actual. por ejemplo. utilice uno de los editores de código de Dreamweaver: la vista de Código de la ventana de documento o el inspector de código.
3. Puede cambiar la vista en la que desea trabajar seleccionando una vista en la barra de herramientas de Dreamweaver.Alcántara
La ventana de documento muestra el documento actual mientras lo está creando y editando. inspectores y paneles de Dreamweaver. Una marca de verificación al lado de un elemento de este menú indica que el elemento señalado se encuentra abierto. como imágenes. Trabajar con la vista de Código Conforme diseñe y trabaje con los documentos. un panel flotante que puede elegir del menú Ventana. También puede alternar entre vista Estándar y de Disposición y obtener acceso a las herramientas de dibujo de la vista Disposición. Para abrir ventanas. El inspector de propiedades muestra propiedades del objeto o texto seleccionado y permite modificar dichas propiedades. Para ver un menú contextual.2 Diferentes vistas de Dreamweaver Dreamweaver le permite trabajar en su documento de diferentes formas: utilizando la vista Diseño.
. utilice el menú Ventana. aunque puede estar oculto detrás de otras ventanas. como. El panel Objetos contiene botones para la creación e inserción de diversos tipos de objetos. tablas. • La barra del lanzador. Dreamweaver generará automáticamente el código HTML subyacente. haga clic con el botón derecho del ratón (Windows) o haga clic en un elemento de una ventana mientras presiona la tecla Control (Macintosh). (Las propiedades que aparecen en el inspector dependen del objeto o texto seleccionado). elija el nombre del elemento del menú. capas y marcos. La barra de herramientas contiene botones y menús emergentes que le permiten ver la ventana de documento de diferentes formas. utilizando la vista Código o empleando una vista combinada que muestra el diseño y el código del documento.2. definir opciones de vista y obtener acceso a algunas operaciones comunes. Para examinar o editar este código.
• • • Para ver u ocultar la barra de herramientas. Cuando trabaje en la vista de Diseño. Para ver una vista que contenga las vistas de Código y de Diseño. crear tablas o utilizar otras funciones no disponibles en la vista de Disposición.1 Trabajar con la vista de Diseño La vista de Diseño de Dreamweaver muestra una representación visual del documento. haga clic en el botón Mostrar vistas de código y diseño.3 Ventanas de Dreamweaver 3. se encontrará disponible la opción Vista de diseño arriba del menú Ver.
. haga clic en el botón Mostrar vista de código. la ventana de documento muestra el documento actual aproximadamente igual a como aparecerá en un navegador Web.Alcántara
3. En la vista de Disposición. También puede obtener acceso a estas vistas a través del menú Ver. podrá optar entre dos vistas para realizar el diseño: vista de Disposición o vista Estándar. Para ver sólo la vista de Diseño.2. Para trabajar en la vista Estándar. el nombre del archivo y un asterisco si el archivo contiene cambios no guardados.3. crear documentos de marcos. La barra de título de la ventana de documento muestra el título de la página y. bajo Ver. texto y otros elementos multimedia. haga clic en el botón Mostrar vista de diseño. en lugar del código subyacente.2.2. Para ver código sólo en la ventana de documento. Cuando seleccione esta vista. elija Ver > Barra de herramientas. entre paréntesis. haga clic en el icono Vista estándar del panel Objetos. Utilice esta opción para especificar qué vista debe aparecer en la parte superior de la ventana de documento. 3.1 Barra de herramientas La barra de herramientas contiene algunos comandos comunes relacionados con la selección de vistas y el estado del documento. La ventana de documento En la vista de Diseño. el nombre de la carpeta raíz. Puede seleccionar estas vistas en el panel Objetos.2. Los elementos del menú Opciones (botón situado a la derecha) cambia en función de la vista que seleccione. Trabaje en la vista Estándar para insertar capas. puede diseñar una disposición de página e insertar gráficos.
2. utilice el campo Título. CSS y JavaScript. elija Editar lista de navegadores. elija Ventana > Objetos. Para obtener acceso al panel Referencia. haga clic en el botón Navegación por el código. capas e imágenes.Alcántara
Para introducir un título para el documento. Formularios. Para actualizar la vista de Diseño. Para previsualizar o depurar un documento en un navegador. El panel Referencia contiene información de referencia sobre código HTML. Marcos. haga clic en el botón Referencia. También contiene botones que cambian de vista: Estándar y Disposición. Para desplazarse por el código. Para mostrar u ocultar el panel Objetos.
. Común. haga clic en el botón de menú de estado de archivo.3. Head. Para ver el menú emergente Estado de archivo. haga clic en el botón Actualizar vista de diseño.2 Panel de Objetos El panel Objetos contiene botones para la creación e inserción de diversos tipos de objetos. Si el documento ya tiene título.
3. El panel Objetos contiene siete categorías de forma predeterminada: Caracteres. haga clic en Vista previa/depurar en navegador y elija uno de los navegadores enumerados en el menú emergente. Para agregar o cambiar los navegadores enumerados en el menú. éste aparecerá en dicho campo. como tablas. Invisibles y Especial.
Elija Ver > Ayudas visuales > Elementos invisibles para ver los iconos que marcan la posición de estos objetos. como imágenes. también podrá seleccionar las herramientas de Disposición: Dibujar celda de disposición y Dibujar tabla de disposición. plug-ins y objetos ActiveX. Haga clic en los iconos de elementos invisibles de la ventana de documento para seleccionar los objetos y cambiar sus propiedades. keywords y base. La categoría Marcos contiene estructuras comunes de conjuntos de marcos. como applets Java. La categoría Invisibles contiene botones que permiten crear objetos no visibles en la ventana del navegador.
La sección Ver del panel Objetos permite elegir entre vista Estándar (predeterminada) o de Disposición. La categoría Head contiene botones que permiten añadir diversos elementos de la sección head. Tenga en cuenta que estos símbolos no se muestran correctamente en las versiones anteriores a la 3. como etiquetas meta. de comillas curvas y de marca registrada. como los puntos de fijación con nombre. como los símbolos de copyright. La categoría Formularios contiene botones que permiten crear formularios e insertar elementos de formulario.Alcántara
El panel Caracteres contiene caracteres especiales.
. La categoría Especial contiene botones que permiten insertar elementos especiales. La categoría Común contiene botones para la creación e inserción de los objetos más utilizados. Si está seleccionada la vista de Disposición.0 de los navegadores (Netscape e IE). tablas y capas.
Inspector de propiedades al seleccionar una imagen. elija Ventana > Propiedades. seleccione un elemento en la ventana de documento y.2. el objeto recibe valores de atributo predeterminados. Las preferencias del panel Objetos permiten visualizar el contenido del panel Objetos como texto solamente. a continuación. se presiona Entrar (enter) o se presiona Tab para cambiar a otra propiedad). Después de insertar el objeto. iconos solamente o texto e iconos.3 Inspector de Propiedades El inspector de propiedades permite examinar y editar las propiedades del elemento de página seleccionado en ese momento. (Un elemento de página es un objeto o texto) Puede seleccionar elementos de página en la ventana de documento o en el inspector de código.
La mayoría de los cambios realizados en las propiedades se aplicarán de inmediato en la ventana de documento. secuencias de comandos y elementos head. los cambios no se aplican hasta que se hace clic fuera de los campos de texto de edición de la propiedad. utilice el inspector de propiedades para cambiar sus propiedades. El contenido del inspector de propiedades varía en función del elemento seleccionado.3. tablas. Puede suprimir estos cuadros de diálogo desactivando la opción Mostrar diálogo al insertar objetos o manteniendo presionada la tecla Control mientras crea el objeto. (Para algunas propiedades. haga clic en el icono Ayuda. Para obtener información sobre propiedades concretas. aparecerá un cuadro de diálogo en el que se le solicitará información adicional. Cuando se inserta un objeto con esta opción desactivada.
3. Para mostrar u ocultar el inspector de propiedades.Alcántara
Cuando inserte objetos tales como imágenes.
. situado en la esquina superior derecha del inspector de propiedades.
Si ninguna de ellas está presente.
Espacio entre líneas. Centro y Derecha (Left.
3. el navegador buscará la segunda de la lista y luego la tercera.
Para darle formato al texto. Color de texto (Text Color): Define el color para el texto seleccionado. insertamos un salto de línea (más pequeño). Debemos hacer una carpeta en nuestro disco duro de la computadora para cada sitio que deseemos crear y así poder administrar de una mejor manera todo lo correspondiente en cuanto archivos e imágenes que corresponden a cada uno de ellos. Izquierda. • Cuando pulsamos Enter. Tamaño (Size): Aplica un tamaño de fuente específico en una escala que va de 1 a 7 o un tamaño de fuente relativo al tamaño por defecto del navegador. • Cuando pulsamos Shift Enter. Existen dos tipos de saltos que podemos introducir en nuestro texto: el salto de línea y el salto de párrafo. ingresamos un salto de párrafo. primero debemos seleccionar el texto deseado y luego seleccionar las propiedades para el mismo en el Inspector de Propiedades. Negrita e Itálica (Bold/ltalic): Aplican al texto estos estilos. Las fuentes están agrupadas por familias.4 Configurar el Sitio El desarrollo de un sitio Web con Dreamweaver comienza en la definición de una carpeta local para el sitio. En esta carpeta se guardarán todos los archivos que lo conformen.2. Center. Si el usuario no posee instalada la primera fuente del listado.Alcántara
Inspector de propiedades al seleccionar una tabla o celda de la misma. • • Formato (Format): Aplica un estilo predefinido al texto. En este caso los valores van de + o -1 a+ o -7.
. Right): Aplican alineación al texto. mostrará el texto con el tipo de fuente estándar con el que del navegador. Combinación de Fuentes (Font Combination): Aplica una combinación de fuentes al texto.
los comunicados de prensa de la compañía.
Utilice la misma estructura para sitios locales y remotos. Por ejemplo. Una buena idea es crear una carpeta llamada Sitios y. debe seguir una serie de pasos de planificación para asegurarse de que el sitio sea un éxito.2. Este tipo de organización facilitará el mantenimiento y la navegación por el sitio.
3.Alcántara
3. a continuación. será conveniente planificar el sitio cuidadosamente para asegurarse de que todo el mundo pueda utilizarlo correctamente. posteriormente. el término sitio puede hacer referencia a un sitio Web o un emplazamiento local de almacenamiento de documentos pertenecientes a un sitio Web.1 Planificación y diseño de sitios En Dreamweaver. la información sobre contactos y las ofertas de trabajo pueden colocarse en una carpeta. Cuando comience a pensar en la creación de un sitio Web. Lo más adecuado es configurar el sitio local en Dreamweaver antes de comenzar a crear las páginas.4. carga todo en el sitio remoto. Incluso en el caso de que vaya a crear tan sólo una página principal personal que sólo verán los amigos y la familia. Divida el sitio en categorías. Crear un Sitio Nuevo Para crear un sitio nuevo:
. activos y archivos de un sitio concreto. y las páginas del catálogo en línea pueden ir en otra. Establecer este sitio local en Dreamweaver significa que puede utilizar Dreamweaver con FTP para cargar el sitio en el servidor Web. El sitio local y el sitioWeb remoto deberán tener exactamente la misma estructura.2.2 Configurar sitios con Dreamweaver Una vez que cree la estructura del sitio.4. El sitio local es la estructura del sitio que usted establece en el equipo para que contenga todas las carpetas. Coloque las páginas relacionadas en una misma carpeta. crear carpetas raíz locales dentro de esa carpeta. para controlar y mantener automáticamente los vínculos y para compartir archivos con otras personas que colaboren con usted. La carpeta raíz local del sitio deberá ser específica de ese sitio. una para cada sitio con el que trabaje. Utilice subcarpetas cuando sea necesario. Dreamweaver se asegurará de que la estructura local se duplique con precisión en el entorno remoto. deberá establecer el nuevo sitio en Dreamweaver. Si crea un sitio local utilizando Dreamweaver y.
Si aún no existe la carpeta raíz local.Elija Sitio > Nuevo sitio. créela desde el cuadro de diálogo que permite examinar archivos. elija Ver > Actualizar local en la ventana Sitio (Windows) o Sitio > Ver archivos del sitio > Actualizar local (Macintosh). • En la opción Actualizar lista archivos locales. Posteriormente. Si no selecciona esta opción. 3. Dreamweaver volverá a preguntarle si desea utilizar un caché antes de crear el sitio.. 2. la dirección HTTP absoluta del sitio Web de Macromedia es http://www. Utilice el nombre que desee. Para actualizar manualmente sólo el panel Local.. indique si desea crear un caché local para mejorar la velocidad de las tareas de administración de vínculos y sitios. Haga clic en el icono de carpeta para examinar y seleccionar la carpeta o introduzca una ruta y un nombre de carpeta en el campo de texto. Es recomendable seleccionar esta opción porque el panel Activos sólo funciona cuando se ha creado un caché. En el cuadro de diálogo Definición de sitio que aparece estará seleccionada la categoría Datos locales. El nombre del sitio aparece en la ventana Sitio y en el submenú Sitio > Abrir sitio. • En el campo Dirección HTTP. indique si desea actualizar automáticamente la lista de archivos locales cada vez que copie archivos en el sitio local. Si desactiva esta opción. pero el panel Local de la ventana Sitio no se actualizará automáticamente. Para actualizar manualmente la ventana Sitio. las plantillas y los elementos de biblioteca del sitio.com. Se abrirá la ventana Archivos del sitio. de modo que Dreamweaver pueda verificar los vínculos del sitio que utilicen URL absolutos. cuando esté listo para publicar el sitio en un servidor remoto. lo hace tomando esta carpeta como raíz. Descripción gráfica de la definición o creación del sitio. especifique la carpeta del disco duro en la que desea almacenar los archivos. introduzca el URL que utilizará el sitio Web finalizado.Introduzca las opciones siguientes: • En el campo Nombre del sitio. deberá añadir información adicional sobre el sitio.Alcántara
1. introduzca un nombre para el sitio. ya que no aparecerá en el navegador y sólo le servirá de referencia.
.macromedia. Cuando Dreamweaver resuelve vínculos relativos a la raíz. • En el campo Carpeta raíz local. haga clic en el botón Actualizar de la misma. mejorará la velocidad de Dreamweaver a la hora de copiar esos archivos. • En la opción Caché.Haga clic en Aceptar.. Por ejemplo.
donde aparecerá la siguiente pantalla.Alcántara
A continuación dar clic en la carpeta que aparece a la derecha del cuadro de texto “Carpeta raíz local”.
De ahí. buscar la carpeta que será considerada como carpeta raíz de nuestro sitio.
se pueden configurar los “Datos Remotos”. Los archivos que vayamos realizando podremos subirlos vía FTP. que es donde se introducen los valores del servidor que hospedará nuestro sitio.Alcántara
Pantalla que muestra el sitio local y el sitio remoto. podremos ir actualizando nuestra página en Internet. mediante el tomar los archivos del sitio local y arrastrarlos al sitio remoto.
. abrir y mover archivos. y borrar elementos. al tiempo que puede diseñar la navegación del sitio empleando el mapa del sitio. También puede utilizar la ventana Sitio para transferir archivos entre los sitios local y remoto.3 La ventana Sitio Utilice la ventana Sitio para realizar operaciones de mantenimiento estándar.Alcántara
3. crear carpetas. ver. como crear nuevos documentos HTML.2.4.
vamos a escribir el siguiente contenido:
3. lo que sigue es darle formato modificando el color del fondo de la página.
Elegir el color deseado. o si lo desea una imagen de fondo. Para hacerlo.3 Trabajando con Dreamweaver Para empezar a trabajar con Dreamweaver. hay que seleccionar el menú modificar. elegir opción propiedades de la página y aparecerá la siguiente pantalla.
color del texto.. elegir color del texto. alineación centrada. daremos formato al texto El primer paso. en tamaño elegir 4. F12 para presentación preliminar. Helvetica. • Primer paso sombrear todo y elegir tipo de letra (Arial. • Sombrear “Centro de Estudios Universitarios”. seleccionar letra negrita. etc. imagen de fondo. por ejemplo. A continuación. el título de la página.
Como recomendación usar siempre tipo de fuente Arial. alineación centrada. en tamaño elegir 5. elegir la opción guardar. seleccionar presentación de texto con viñeta. color de fondo. y posteriormente elegir las opciones que deseamos en el panel o inspector de propiedades. • Sombrear “Unidad Loma Larga”. color de los vínculos. • Sombrear “Le ofrece las siguientes carreras” en tamaño elegir 3. elegir color del texto. seleccionar letra negrita.
. • Sombrear todas las carreras de la pantalla.html Listo.Alcántara
En la pantalla anterior podemos elegir atributos o características que deseamos en la página. ponerle el nombre ej010. es seleccionar o sombrear el texto a modificar su apariencia.). En el menú archivo. elegir color del texto. seleccionar letra itálica. elegir color del texto. seleccionar letra negrita. etc. en tamaño elegir 3.
están nuestras imágenes. O bien en el menú insertar opción imagen. mucho mejor. 3.
Para insertar la imagen hay que dar clic en el objeto de insertar imagen. aparecerá la siguiente pantalla. en una carpeta especial dentro del sitio a la que llamaremos imágenes (nombre de los archivos y carpetas sin acentos) o cualquier otro nombre que nos sugiera que. Elegir las imágenes que desees insertar (una por una) y aparecerán en la pantalla. De lo contrario Dreamweaver nos advertirá para que guardemos una copia en la carpeta correspondiente.
La pantalla muestra el resultado del formateo al texto que hemos realizado. del panel de objetos. dentro de esa carpeta.4 Insertar Imagen Para insertar una imagen es conveniente tenerla previamente guardada en la carpeta del sitio. Las imágenes pueden estar sueltas en la carpeta raíz junto con los archivos de cada uno de los documentos o.
Directamente se puede cambiar la dimensión de una imagen. agregarle un borde.Alcántara
Al igual que el texto. a las imágenes se le pueden dar algunas propiedades dentro del inspector de propiedades. y también podemos utilizar la imagen para vincularlo hacia otra página externa o dentro de la misma. o un texto alternativo al acercar el puntero. además de utilizar zonas interactivas que permiten dividir la imagen para algún uso en especial.
Podemos determinar el número de Filas.5 Insertar Tabla Para insertar una tabla se puede realizar desde el menú con la opción insertar tabla o clic en el botón tabla del panel de objetos. el Ancho de la tabla en píxeles o porcentaje. el número de Columnas. El relleno de celda hace referencia al
3. especificar si queremos que la tabla tenga Borde e indicarle el grosor del borde en su caso.
un borde de 2 píxeles y un relleno de celda de 5 píxeles:
Rellenamos las celdas con los siguientes datos…
Vamos a darle formato…
Sombrear todas las celdas y elegir el texto con Arial. o lo que coloquemos en cada una de las celdas. Seleccionar la fila completa donde está el texto de “Ventas de la Semana”. A modo de ejemplo vamos a insertar una tabla con 5 filas y 6 columnas y que ocupe el 100 % del ancho. centrar el texto y ponerlo en formato negritas. helvetica. y su borde.Alcántara
espacio que queremos que exista entre el texto. Ambos se indican en píxeles y se pueden quedar vacíos en el caso de que queramos que tanto el relleno de celda como el espacio de celda sea el mínimo posible. Sombrear el texto restante y elegir la opción de centrar
. elegir el botón de agrupar celdas. si lo desea elegir un color al fondo de la celda. El Espacio celda es el espacio que queremos que haya entre una celda y otra.
Elegir la fila de los días.
Al elegir esta opción le saldrán dos pantallas donde le advierte que solamente se guardará la página activa Elija Aceptar. la otra pantalla le mencionará que si desea mantener los formatos. no es necesario transcribirlo todo. de preferencia que el nombre quede como el original. Dentro de Excel elegir Archivo. elegir datos tabulares o en el botón de la barra de objetos. agregarle fondo a las celdas. tomando la opción de dividir celda.
Añadir filas o columnas se hace mediante el inspector de propiedades. podemos importarlo. abrir el archivo requerido en Excel . elija Si. Menu insertar. guardar como… y en tipo elegir CSV (delimitado por comas).6 Importar datos desde Excel Si tenemos un archivo en Excel y queremos pasarlo a la página html. agregarle fondo a las celdas.
. Elegir la fila de totales.
A continuación elegir insertar datos tabulares. localizar el archivo a ser insertado.
Muestra del archivo insertado
3. Si se agregan imágenes a un lado de los enlaces.7 Vínculos Los vínculos. por lo que podemos dar clic en el fólder para buscar el archivo deseado.Alcántara
Lo que sigue es darle formato a la tabla. ésta se encuentra en nuestro sitio. al igual que en Abrir archivo. En Abrir Página Web.
. En el primer caso el link hacia el CEU es una liga externa a nuestra página. hiperenlaces (todas estas palabras designan el mismo concepto) es uno de los elementos más importantes del lenguaje HTML con el que se construyen las páginas web. y posteriormente insertar imágenes en la primer columna y texto en la siguiente.
Para llevar a cabo la vinculación. por lo que podemos escribir directamente el URL. es necesario crear una tabla de 4 filas con 2 columnas. hipervínculos. Para llevar a cabo nuestro ejemplo. mismo que ya se ha visto en secciones anteriores. a continuación se muestra el ejemplo de cómo debe de quedar. es recomendable incluir los enlaces tanto en la imagen como en el texto. buscar el archivo requerido Podemos elegir destino donde queremos que aparezca la página solicitada. trabajamos en el inspector de propiedades y relacionamos los archivos a donde deseamos enlazar a nuestros visitantes.
después de aquí se abrirá la pantalla de Outlook. Lo hacemos con el comienzo: Situamos el cursor delante del título del documento (delante de vínculos) y elegimos en la barra de menús Insertar > Punto de fijación
. al comienzo de un apartado determinado. . Para ello primeramente hay que hacer marcas en los puntos a los cuales queremos que vaya el vínculo.
3.7. dar clic en insertar opción vínculo de correo electrónico.1 Anclas Se utilizan cuando queremos que al dar clic en el activador se nos coloque al principio de la página..Alcántara
Para el caso de Enviar Correo.. siempre dentro del mismo documento. al final. es decir insertar el ancla con el punto de fijación. mismo que se encuentra en el panel de invisibles. Aparece la siguiente pantalla…
Donde podemos agregar el correo a donde queremos enviar el mensaje.
con nombre o bien en la ventana de objetos. nos posicionamos antes de la palabra internacional (la que contiene información.
. Nacional. Para vincularlo se hace de la siguiente manera: elegir internacional de la lista principal y posteriormente arrastrar el enlace como se muestra en la siguiente figura. por ejemplo. Deportes y también Noticias que será el punto a donde regresamos después de leer una nota de cualquiera de los temas.
Colocarse antes de cada palabra que queremos que sea buscada mediante el enlace. no de la lista) posteriormente Menu insertar. etiquetas invisibles.
Por lo que el ejemplo tendrá puntos de fijación en Internacional. punto de fijación con nombre y aparece la siguiente pantalla. elegir la sección de invisibles y busca el ancla. Se recomienda que el nombre sea acorde al tema buscado.
un marco que se extiende por la parte superior y contiene el logotipo y el título del sitio Web. es decir. Por ejemplo. Estos marcos funcionan coordinadamente en la página gracias al uso de uno o más conjuntos de marcos. por lo que se puede optar por sombrear el texto de la lista por ejemplo Nacional y en el área del vínculo agregar #nacional.8 Marcos Los marcos se utilizan para dividir una página Web en múltiples páginas HTML. el tamaño de los marcos. y un marco grande que ocupa el resto de la página y presenta el contenido principal. es la página que se muestra al utilizar Vista previa en el navegador. La página de conjunto de marcos no se muestra en los navegadores. se complica realizar la unión para la vinculación. y así con cada enlace. de páginas HTML que definen la estructura y las propiedades de la página Web.Alcántara
Cuando el ancla o punto de fijación está más abajo. por lo que hay que agregar un texto por ejemplo Inicio y vincularlo con el punto de fijación que se haya agregado a Noticias (punto de fijación con nombre inicio). el origen de la página cargada en un marco y otras propiedades. Una vez leída la nota.
. una página Web consta de tres marcos: un marco delgado a un lado que contiene un menú de desplazamiento.
3. se limita a almacenar información sobre cómo deben mostrarse los marcos en una página. incluida la información sobre el número de marcos que aparecen en una página. Sin embargo. Cada uno de ellos constituye una página HTML independiente. hay que agregarle un enlace al usuario para que se regrese más rápido al índice de las noticias.
Puede aplicar formato a todos los marcos y conjuntos de marcos de la página a través del inspector de propiedades. simplemente. Una página Web puede utilizar un marco para albergar el menú de navegación y otro marco para el contenido de la página. deberá guardar cada uno de estos cuatro archivos para que la página funcione correctamente en el navegador. Sin embargo. ¿Cuándo utilizar marcos? El uso más común de los marcos es la navegación. incluir la
. De este modo.Alcántara
En este ejemplo. Dado que el menú de navegación se encuentra en un marco. el visitante podrá orientarse perfectamente en el sitio. los marcos pueden ser difíciles de aplicar y a menudo es posible crear una página Web sin marcos que consiga los mismos objetivos que una página con marcos. si desea que la navegación se realice en la parte izquierda de la página. establecer el ancho y el alto. Una página Web que contiene tres marcos consta de cuatro páginas HTML distintas: el archivo de conjunto de marcos y los tres archivos que albergan el contenido que aparece dentro de los marcos. Al diseñar una página utilizando conjuntos de marcos. permanecería estático. puede dividir la página en dos marcos o. Puede activar o desactivar el desplazamiento. los visitantes pueden hacer clic en un elemento del menú y el contenido aparecerá en el marco de contenido sin que cambie el menú de navegación. etc. que cambiaría según el elemento de menú elegido. El menú del marco lateral tendría vínculos que cambiarían el contenido del área del marco principal aunque. asignar un nombre a cada página. El área del marco principal es el área dinámica. Por ejemplo. por lo demás. el marco superior permanecería estático y no cambiaría en las páginas del sitio.
Sólo se pueden crear marcos en la vista Diseño de la ventana de documento. Si decide utilizar marcos en el sitio Web. Ésta es la forma más sencilla de insertar rápidamente un diseño de marcos en la página. lleve a cabo una de estas operaciones: • En la categoría Marcos del panel Objetos. Siga los pasos que se detallan a continuación para conseguir que la página Web funcione correctamente (no necesariamente en un determinado orden): • Cree el conjunto de marcos y los marcos de la página. 2. • Defina las propiedades de cada marco y conjunto de marcos. 3. • Guarde todos los archivos utilizados en el sitio.. Los iconos de conjuntos de marcos predefinidos de la categoría Marcos del panel Objetos proporcionan una representación visual de cada conjunto de marcos al aplicarse a un documento seleccionado. puede hacer clic en un icono o arrastrar un icono directamente al documento. El área azul de un icono de conjunto de marcos predefinido representa la página o el marco seleccionado actualmente en un documento. mientras que el área blanca representa el nuevo o los nuevos marcos. Crear páginas Web basadas en marcos Los marcos pueden ser una excelente herramienta para los diseñadores Web.A continuación. La diferencia radica en que con marcos sólo necesitará crear la navegación una vez. • Compruebe que todos los vínculos incluyen su destino de modo que el contenido vinculado aparezca en el área correcta. pues el establecimiento de vínculos con marcos puede resultar confuso.1 Crear marcos Hay dos formas de crear un conjunto de marcos en Dreamweaver: puede diseñarlo usted mismo o seleccionarlo de una serie de conjuntos de marcos predefinidos. seleccione un conjunto de marcos predefinido. Si elige un conjunto de marcos predefinido se configurarán automáticamente todos los conjuntos de marcos y marcos necesarios para crear la disposición.
. pero deben aplicarse correctamente para que funcionen. incluidos sus nombres. Para insertar el conjunto de marcos.
El conjunto de marcos seleccionado rodea al documento actual (el documento en el que se encuentra el punto de inserción). Insertar un conjunto de marcos predefinido Los conjuntos de marcos predefinidos facilitan la selección del tipo de conjunto de marcos que desea crear. opciones de desplazamiento y no desplazamiento. deberá conocer la relación entre los marcos y los conjuntos de marcos. etc. Recuerde que cada marco y conjunto de marcos es una página HTML independiente y que es necesario guardar cada página.8. Para insertar un conjunto de marcos predefinido: 1.Alcántara
navegación izquierda en todas las páginas del sitio..Sitúe el punto de inserción en el documento.
Para seleccionar un conjunto de marcos predefinido. Superior izquierda. Derecha. Cuando se utiliza Dreamweaver para crear documentos de marcos.
. Arriba. Abajo. Izquierda superior o Dividir. Guardar archivos de marcos y conjuntos de marcos Es preciso guardar un archivo de conjunto de marcos y sus archivos relacionados para poder previsualizar la página en un navegador. en el inspector de propiedades ubicar la opción Dest (destino donde queremos que aparezca lo enlazado.
La siguiente acción a realizar es elegir el texto a vincular y buscar el archivo al cual se va a enlazar. ahí elegir Main Frame (Marco Principal). Puede guardar de forma individual una página del conjunto de marcos o una página de marco. Izquierda y arriba. elija Insertar > Marcos > Izquierda. cada nuevo documento de marco recibe un nombre de archivo temporal (por ejemplo. o bien guardar todos los archivos de marco abiertos y la página de conjunto de marcos.
El nombre de archivo del marco o conjunto de marcos seleccionado también aparece en la barra de título.Lleve a cabo una de estas operaciones: • Para guardar el archivo de conjunto de marcos. Observe las líneas de selección de marcos en la ventana de documento para identificar el documento que se está guardando actualmente. Untitled-1. Untitled-2.
. se abre el cuadro de diálogo Guardar archivo para que pueda guardar el documento con su nombre de archivo temporal. es difícil precisar qué archivo de marco se está guardando. 2.Alcántara
UntitledFrame_1 para la página de conjunto de marcos. elija Archivo > Guardar conjunto de marcos como.
Para guardar un archivo de conjunto de marcos: 1. • Para guardar el archivo de conjunto de marcos como un archivo nuevo.Seleccione el conjunto de marcos en el panel Marcos o en la ventana de documento. Dado que todos los archivos tienen por nombre “untitled” (sin título). para las páginas de marcos). etc... elija Archivo > Guardar conjunto de marcos. El área seleccionada identifica el marco al que se hace referencia actualmente en el cuadro de diálogo Guardar archivo. Al seleccionar alguna de las opciones de almacenamiento.
3.Para guardar un documento que está dentro de un marco: • Haga clic en el marco para seleccionarlo y. • Aparecerá el cuadro de diálogo Introducción a la vista de Disposición. Para llevar a cabo la acción de trabajar con vistas de Disposición deberá realizar las siguientes actividades: 1. en el que se describen las opciones de la vista de Disposición. 3.Revise las opciones y luego haga clic en Aceptar para cerrar el cuadro de diálogo.9 Vistas de Disposición Diseñar una página en la vista de Disposición Dreamweaver cuenta con dos vistas de diseño visual: vista Estándar y vista de Disposición.Alcántara
3. texto u otros elementos multimedia. observe que las opciones de Disposición (Dibujar celda de disposición y Dibujar tabla de disposición) están ahora disponibles. haga clic en el icono de vista de Disposición si no está aún seleccionado. Esta tarea es más fácil de realizar si prepara una muestra de la página que está creando antes de comenzar a establecer el diseño de la página.En el panel Objetos.. Comenzará a trabajar en la vista de Disposición. elija Archivo > Guardar marco o Archivo > Guardar marco como. • Icono de vista de Disposición • Icono Dibujar celda de disposición • Icono Dibujar tabla de disposición 2. debajo de Disposición. Dibuje celdas de disposición En la vista de Disposición. deberá dibujar una tabla que se considerará como el contenedor principal... a continuación. En primer lugar. como imágenes. posteriormente las celdas que ocupará en su diseño
. estas opciones no se encuentran disponibles en la vista Estándar. que le permite dibujar celdas o tablas de disposición en las que podrá añadir contenido. puede dibujar celdas y tablas de disposición para definir las áreas de diseño de un documento.. Deberá dibujar tablas y celdas tantas como considere necesario.En el panel Objetos.
Puede colocar celdas de disposición adicionales en el área gris de la tabla de disposición. lleve a cabo una de estas operaciones: • En el inspector de propiedades para la celda de disposición.Haga clic en el borde de la celda de disposición para seleccionarla..
. • En la parte derecha de la celda de disposición.. 1. Aparecerán selectores alrededor de la celda de disposición seleccionada: 2. Cambie el tamaño de las celdas de disposición Para diseñar una página con precisión.Alcántara
Tabla de Disposición o contenedor principal
La tabla de disposición se amplía para llenar toda la ventana de documento y define el área de disposición de la página. El rectángulo blanco es la celda de disposición que ha dibujado. También puede cambiar de sitio las celdas en la página.Para cambiar el tamaño de esta celda de disposición. se mostrará el ancho de la celda en el área de encabezados de columna situada a lo largo de la parte superior de la tabla de disposición. escriba 510 en el campo Fijo para definir el ancho de la celda en 510 píxeles y luego haga clic en el documento para comprobar el cambio de ancho de la celda. puede definir el tamaño de las celdas que añada al documento. Nota: Si introduce un ancho en píxeles superior al ancho de la tabla de disposición lo que provoca que la celda se superponga a otra celda de una tabla de disposición. Dreamweaver le avisará y ajustará el ancho de la celda con un valor válido. arrastre el selector de cambio de tamaño situado en medio hacia la derecha hasta que la celda adopte el ancho deseado. Cuando suelte el ratón.
A continuación añadirá tres celdas de disposición debajo de la celda que ha creado que acaba de crear. Posteriormente insertará los botones de navegación de la página en estas celdas.
10 Añadir sonido a una página Hay varios tipos de archivos y formatos de sonido. Formatos de archivo de audio La lista siguiente describe los formatos de archivo de audio más común. el tamaño de archivo.
. la calidad de sonido y las diferencias en los navegadores.Alcántara
Es muy importante que al crear las celdas dentro de la tabla de disposición visualicemos el inspector de propiedades para tomar en cuenta las medidas que estamos destinando para la futura incorporación de objetos. el tipo de usuarios a los que está destinado.
3. junto con algunas de sus ventajas y desventajas en relación con el diseño Web. y varias formas de añadir sonido a una página Web. Los factores que hay que tener en cuenta antes de optar por un formato y un método para añadir sonido son: su finalidad.
En el inspector de propiedades.mp3 (Audio del Grupo de Expertos en Imágenes en Movimiento o MPEG-Audio Nivel-3) es un formato comprimido que reduce considerablemente el tamaño de los archivos de sonido. su calidad es equiparable a la de un CD.
Establecer un vínculo con archivos de audio El establecimiento de vínculos con archivos de audio es una forma sencilla y efectiva de añadir sonido a una página Web. haga clic en el icono de carpeta para acceder al archivo de audio o escriba la ruta y el nombre del archivo en el campo Vínculo. y hace que el archivo esté disponible para un mayor número de usuarios. Para establecer un vínculo con un archivo de audio: 1. La nueva tecnología permite reproducir el archivo en flujo (streaming) de modo que el visitante no tenga que esperar a que se descargue todo el archivo para escucharlo. 3.wav (Extensión de Formas de Onda) ofrecen una buena calidad de sonido.mid (Interfaz Digital para Instrumentos Musicales) es un formato de música instrumental.midi o . por tanto.. Puede grabar sus propios archivos WAV desde un CD. Incrustar audio Al incrustar audio se incorpora el reproductor de sonido directamente en la página. los visitantes deberán descargar e instalar una aplicación auxiliar o un plug-in como QuickTime.. el tamaño de archivo es mayor que el de Real Audio.En la vista de Diseño. Sin embargo. 2. Este método de incorporar archivos de sonido permite a los visitantes optar por escuchar el archivo. El formato . no requieren un plug-in. pero el sonido sólo se reproduce si los visitantes del sitio disponen del plug-in adecuado para el archivo de sonido elegido. Algunos navegadores no admiten los archivos de sonido incrustados. Incruste archivos si desea utilizar el sonido como música de fondo o si desea obtener un mayor control sobre la presentación de sonido. Muchos navegadores reconocen los archivos MIDI y. etc.Seleccione el texto o la imagen que desea usar como vínculo con el archivo de audio. La calidad de sonido es excelente: si se graba y comprime correctamente un archivo MP3.Haga clic en el botón Plug-in del panel Objetos o elija Insertar > Medio > Plug-in. el micrófono. puede establecer el volumen. Si bien su calidad de sonido es muy alta. la apariencia del reproductor en la página y los puntos inicial y final del archivo de sonido.. Los archivos MIDI no se pueden grabar y deben sintetizarse en un ordenador con hardware y software especiales. son compatibles con muchos navegadores y no requieren un plug-in. 2. por lo que una canción entera puede tardar bastante en descargarse a través de una conexión telefónica normal. Para incrustar un archivo de audio: 1. puede variar según la tarjeta de sonido del usuario. Un pequeño archivo MIDI puede proporcionar un clip de sonido de larga duración. el gran tamaño de archivo limita considerablemente la duración de los clips de sonido que se pueden utilizar en las páginas Web.En el inspector de propiedades.. Sin embargo. Windows Media Player o RealPlayer.. una cinta. sitúe el punto de inserción en el lugar donde desea incrustar el archivo. Los archivos de formato .
. Por ejemplo.Alcántara
El formato . Para reproducir archivos MP3. haga clic en el icono de carpeta para acceder al archivo de audio o escriba la ruta y el nombre del archivo en el campo Vínculo.
4. los campos. como enviar o restablecer formularios. los tipos de entrada de los formularios se denominan objetos de formulario. deben insertarse entre las etiquetas form para que los datos se procesen correctamente con todos los navegadores. Los campos de texto aceptan todo tipo de texto.11 Formularios Los formularios permiten interactuar con los visitantes del sitio o recopilar información de ellos. Los formularios constan de dos partes: el código HTML que describe el formulario (por ejemplo.11.Especifique el ancho y el alto introduciendo los valores en los campos correspondientes o cambiando el tamaño del marcador de posición del plug-in en la ventana de documento. Puede insertar objetos de formulario por medio de la categoría Formularios del panel Objetos o seleccionando Insertar > Formulario e Insertar > Objetos de formulario. varias líneas o como viñetas y asteriscos (para protección de la contraseña). Insertar botón inserta un botón de texto en un formulario. Insertar campo de texto inserta un campo de texto en un formulario. • Insertar formulario inserta un formulario en el documento. como los campos de texto o los botones. por ejemplo).
3. Los elementos adicionales del formulario. o bien usar una de las etiquetas predefinidas. Por ejemplo.1 Objetos de formulario En Dreamweaver. Dreamweaver inserta etiquetas form de apertura y cierre de formulario en el código HTML. firmen en un libro de invitados o proporcionen comentarios acerca del sitio.
. etiquetas y botones que ve el usuario en la página) y una secuencia de comandos o aplicación que procesa la información enviada (como un guión CGI. puede solicitar el nombre y la dirección de correo electrónico de un usuario o hacer que los visitantes respondan a una encuesta.
3. Enviar o Restablecer. tanto alfabético como numérico. No se puede recopilar datos de formulario sin utilizar una secuencia de comandos de procesamiento. Puede añadir un nombre o una etiqueta personalizada a un botón.. Los botones llevan a cabo tareas cuando se hace clic en ellos. El texto introducido puede mostrarse como una sola línea.
En el documento.. coloque el punto de inserción en el lugar en el que desea que aparezca el formulario y lleve a cabo una de estas operaciones: • En la categoría Formularios del panel Objetos.
Crear un formulario Un formulario contiene propiedades que son invisibles para el usuario. seleccione el icono Insertar formulario. Insertar campo de archivo inserta un cuadro de texto vacío y un botón Examinar en un documento. Los botones de opción representan opciones exclusivas de selección. Los campos de imagen pueden usarse en lugar de los botones Enviar para crear botones Gráficos.Alcántara
Insertar casilla de verificación inserta una casilla de verificación en un formulario.
. Si no ve el contorno. La opción Menú muestra los valores de las opciones en una lista desplegable y permite que los usuarios seleccionen una sola opción. los usuarios pueden seleccionar Sí o No. Los campos de archivo permiten al usuario examinar los archivos de sus discos duros y cargarlos como datos de formulario. Insertar botón de opción inserta un botón de opción en un formulario. compruebe que la opción Ver > Ayudas visuales > Elementos invisibles esté seleccionada. Las propiedades especifican cómo se procesa el formulario Para añadir un formulario a un documento: 1. Cuando se crea un formulario. Las casillas de verificación admiten múltiples respuestas en un solo grupo de opciones y permiten que los usuarios seleccionen tantas opciones como sean necesarias. • Elija Insertar > Formulario. por ejemplo. se anula la selección de los demás botones del grupo. Insertar listas/menús permite crear opciones para el usuario en una lista. Insertar campo de imagen permite insertar una imagen en un formulario. aparece un contorno de línea de puntos de color rojo en la ventana de documento. Cuando se selecciona un botón en un grupo. La opción Lista muestra los valores de las opciones en una lista de desplazamiento y permite que los usuarios seleccionen múltiples opciones.
será similar a ésta: http://www. escriba un nombre exclusivo para el formulario..En el menú emergente Método. especifique la ruta del URL en el que reside la secuencia de comandos o la aplicación que procesará el formulario. lleve a cabo una de estas operaciones: • Haga clic en el icono de la carpeta y acceda a la carpeta correspondiente. haga clic en el contorno para seleccionar el formulario si es que no está ya seleccionado..
. • Elija POST para enviar los valores del formulario en el cuerpo de un mensaje. La asignación de nombre al formulario permite hacer referencia a él o controlarlo con un lenguaje de secuencia de comandos como JavaScript o VBScript. 3... • Elija GET para adjuntar los valores del formulario al URL y enviar la información al servidor.mysite.En el campo Nombre del formulario del inspector de propiedades.com/cgi-bin/process.cgi 5. Para un mejor diseño de los objetos dentro del formulario. elija el método con el que se gestionarán los datos del formulario.Alcántara
2. 4. Si especifica la ruta de una secuencia de comandos CGI.En el campo Acción.En el documento. se puede incluir tablas para distribuir de una mejor manera todos los elementos que se contendrán en él. Para ello. • Escriba la ruta completa de la carpeta.
el número de caracteres que puede introducir el usuario y si se trata de un campo de contraseña. En la barra de propiedades podemos asignarle un nombre al objeto incluido en el formulario. podrá ver la longitud del campo. por ejemplo.Alcántara
Campos de formulario Una vez insertadas las etiquetas form en el documento. Los objetos de formulario se utilizan para solicitar información a los visitantes del sitio. tales como la validación del llenado del texto. el número de líneas que contiene. Utilice campos de formulario cuando desee configurar un formulario para que los visitantes escriban sus respuestas. como su nombre o dirección.
. esto para poder llevar a cabo algunos eventos. Conforme añada un campo a un formulario. puede comenzar a añadir objetos de formulario.
Puede determinar fácilmente el número de caracteres o el número de líneas que puede introducir el visitante. Nota: Las contraseñas enviadas a un servidor por este medio no se cifran y. • Los campos de texto de varias líneas ofrecen mayor espacio al visitante para escribir la respuesta. • Los campos de contraseña son campos de texto especiales. por tanto. Hay tres tipos de campos de texto: • Los campos de texto de una línea se utilizan para proporcionar respuestas compuestas por una sola palabra o una frase corta. los datos que se transfieren no son seguros. Cada objeto de formulario casilla de verificación es un elemento individual y debe tener un nombre exclusivo en el campo Nombre.Alcántara
Crear campos de texto Un campo de texto es un objeto de formulario en el que los usuarios escriben una respuesta. un nombre o una dirección. el texto queda oculto y aparecen asteriscos o viñetas. Para insertar una casilla de verificación:
Insertar una casilla de verificación Las casillas de verificación permiten que el usuario seleccione más de una opción en un grupo de opciones. por ejemplo. Cuando el usuario escribe en ellos.
Utilice un menú cuando el espacio sea muy reducido. Nota: Cada una de las casillas de verificación de un formulario debe tener un nombre único. También puede permitir que el usuario seleccione varios elementos de una lista. pero proporcionan distinta funcionalidad al usuario.. 4. • En la categoría Formularios del panel Objetos. • En la categoría Formularios del panel Objetos..En el campo Casilla del inspector de propiedades. 2. escriba un valor para la casilla de verificación.. escriba un nombre descriptivo para el grupo de opciones. los botones de opción se utilizan en grupos.En el campo Botón opción del inspector de propiedades. El usuario sólo puede seleccionar un elemento de menú de una sola vez. 3. Nota: Si crea varias grupos de botones de opción en un formulario. puede escribir esquiar en el campo Valor activado para indicar que el usuario ha elegido esquiar.Coloque el punto de inserción en el interior del contorno y lleve a cabo una de estas operaciones: • Elija Insertar > Objeto de formulario> Casilla de verificación.En Estado inicial. podría establecer el valor 4 para la opción “Estoy totalmente de acuerdo” y 1 para la respuesta “No estoy de acuerdo”. haga clic en Activado para que la opción aparezca marcada cuando el formulario se cargue inicialmente en el navegador. Insertar un botón de opción Utilice los botones de opción cuando el usuario sólo deba seleccionar una de las opciones de un grupo de opciones. haga clic en el icono Insertar casilla de verificación. aparecerá una barra de desplazamiento con la que el usuario podrá ver todas las opciones. 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ú. Por ejemplo. Utilice una lista cuando desee controlar el número de opciones que se muestran.En el campo Valor activado. Establezca el alto en líneas de la lista. en una encuesta. Generalmente.En Estado inicial. Listas y menús Utilice una lista de opciones o un menú para presentar distintas opciones al usuario en un espacio limitado. cuando el número de opciones de la lista supere su alto en líneas. Por ejemplo. escriba un nombre descriptivo para la casilla de verificación. asegúrese de que cada uno de ellos tiene un nombre exclusivo. Todos los botones de opción de un grupo deben tener el mismo nombre y contener distintos valores de campo.
... Las listas y los menús de formulario se crean en el mismo inspector de propiedades.. 4.Coloque el punto de inserción en el interior del contorno y lleve a cabo una de estas operaciones: • Elija Insertar > Objeto de formulario> Botón de opción. 3.Alcántara
1.. haga clic en Activado para que la opción aparezca marcada cuando el formulario se cargue inicialmente en el navegador.. haga clic en el icono Insertar botón de opción.En el campo Valor activado. escriba el valor que desea enviar a la aplicación del lado del servidor o a la secuencia de comandos de procesamiento cuando el usuario seleccione el botón de opción. 2. Para insertar botones de opción: 1.
Por ejemplo.En el campo Etiqueta del inspector de propiedades. escriba un nombre para el botón. para calcular un total. • Seleccione Restablecer para restablecer el formulario cuando el usuario haga clic en el botón..Coloque el punto de inserción en el interior del contorno y lleve a cabo una de estas operaciones: • Elija Insertar > Objeto de formulario> Botón. por ejemplo. 3. un botón de formulario puede calcular el importe total de un pedido en base a los valores de determinados campos. • Seleccione Ninguna para activar otra acción basada en la secuencia de comandos de procesamiento cuando el usuario haga clic en el botón.En el campo Nombre del botón del inspector de propiedades. por ejemplo. lleve a cabo una de estas operaciones: • Seleccione Enviar para enviar el formulario para su procesamiento cuando el usuario haga clic en el botón. escriba el que desee mostrar en el botón. • En la categoría Formularios del panel Objetos. Restablecer o Calcular pedido.
. Puede utilizar un botón de formulario para enviar los datos introducidos por los usuarios al servidor o para restablecer un formulario. También puede utilizar un botón para llevar a cabo otro tipo de procesos previamente definidos mediante una secuencia de comandos de procesamiento. que restablece el valor original de todos los datos del formulario. 4. Crear botones de formulario de texto Un botón de formulario de texto es un botón predeterminado que utiliza el estilo estándar del navegador y que muestra un texto.Alcántara
Botones de formulario Los botones de formulario controlan las operaciones de los formularios. de forma que los usuarios puedan corregir la información antes de enviarla. y Restablecer....En el campo Acción. Para crear un botón de texto: 1. Nota: Existen dos nombres reservados: Enviar. 2. que envía los datos del formulario para su procesamiento. como Enviar. haga clic en el icono Insertar botón.
A continuación se muestra el código. es necesario validar información que nos ha proporcionado el visitante a nuestra página. Al respecto se agrega un código JavaScript que va a realizar la función de verificar que las casillas de texto no vayan vacías al momento de darle clic en el botón Enviar.
Validar formulario En ocasiones. ya sea el nombre. cabe señalar que va antes de que se cierre la etiqueta </form1> o el nombre que contenga el formulario que se esté desarrollando. correo o algunos campos que se consideren como indispensables en el llenado de la encuesta.
Ejemplo de cómo se ejecutaría en Internet faltando de agregar el campo de correo:
4. si no se usa se atrofia y la posibilidad de que no se desarrolle y quede en pura potencialidad aumenta cuando nos regimos por el ritmo de la rutina y la inercia. ejemplo: creatividad científica. artística. cuando nos dejamos vencer por lo establecido y no nos aventuramos a pensar de una manera diferente.2. de las potencialidades. “La creatividad se manifiesta a veces como el descubrimiento de algo nuevo en un contexto. cuando un niño halla una conexión.Alcántara
Unidad 4.1 Área de trabajo Al entrar a Fireworks nos encontramos con la siguiente pantalla:
. sino también a nivel personal o individual.. literaria. una relación que antes en su experiencia no había obtenido. ya que hablar de descubrimientos no es sólo a nivel social. que está navegando en el terreno del descubrimiento”.1 ¿Qué es la creatividad? Para Rendón Uribe (2007). en éste curso se tocarán los aspectos básicos. y resolver problemas en una forma original en cualquier campo de su actividad. mismos que serán necesarios para poder ir más allá de lo aprendido. realizar algo nuevo y gratificante para sí mismo. podemos decir.2 Aspectos básicos de Fireworks 4. verbal. la creatividad es como un músculo.
4. En efecto. que en su experiencia anterior no estaban todavía relacionadas. etc. Rendón Uribe (2007). al terreno de la energía potencial. Esta categoría nos remite al ámbito educativo y valida la posibilidad de plantear el desarrollo de la capacidad creativa a través de la acción pedagógica. Hablar de capacidad nos remite al mundo de lo que puede ser. práctica. El descubrimiento involucra discontinuidad que no es más que un salto no alcanzable por la vía del pensamiento algorítmico o tradicional. la creatividad es la capacidad del ser humano que le sirve para relacionar cosas.Fireworks Con este software va a ser necesario que el alumno o lector active su creatividad para elaborar objetos con la apariencia deseada.
por ser el sistema más utilizado en medidas para diseño web. que sirve para configurar precisamente el área de trabajo:
En ella se nos dan las opciones para determinar el ancho y el alto del lienzo. Nosotros utilizaremos pixeles. y nos aparece esta ventana. que en este caso llamamos "lienzo" (canvas).
. y el sistema de medidas que queremos utilizar: pixels. se suele determinar en 72 pixels. la resolución (que en el caso de diseño web.Alcántara
Pero aún no tenemos un área de trabajo. pulgadas o centímetros. así que vamos a Archivo > Nuevo.
Selecciona un objeto situado detrás del objeto seleccionado.2 Herramientas Para empezar.2.
4. Una vez definidas las propiedades del lienzo. Pero es de notar que. ya estamos listos para trabajar.
Herramienta Puntero
En el modo de objeto Selecciona y mueve trazados en la pantalla. además. Haga doble click en una imagen para editar los pixeles que la componen. las opciones para determinar el color que llevará el "lienzo" o área de trabajo. o transparente. A continuación daremos una breve explicación de algunas herramientas.
En el modo de edición de imágenes Mueve la imagen o los pixeles agrupados mediante un recuadro. selecciona un objeto de un
Seleccionar en nivel inferior
. aunque definamos un color determinado. aún nos da la opción de utilizarlo de color blanco. fijémonos que a la izquierda o en algún lugar de la pantalla (según se le facilite trabajar con la barra de herramientas). Mueve la imagen o los pixeles agrupados mediante un recuadro. Mueve la imagen o los pixeles agrupados mediante un recuadro. Selecciona y mueve recuadros en la pantalla.Alcántara
En la misma ventana podemos ver. encontramos la siguiente "caja de herramientas":
Esta barra contiene los elementos que podremos utilizar para la creación de nuestros documentos.
Activa el modo de objetos. crea bloques de texto. Activa el modo objetos y dibuja objetos como trazados que se pueden editar.
Pincel Estilo libre
Remodelar area
Activa el modo de objeto.
Línea básicas
Dibuja trazos de lápiz de un Dibuja trazos de lápiz de pixel como trazados de un pixel. Estira o contrae un trazado seleccionado para cambiar la forma del mismo. y abre el editor de texto. estilo libre. Selecciona o mueve un área de pixeles de estilo libre. de color similar. Dibuja pinceladas como trazados. Dibuja objetos como trazados que se pueden editar. Crea y edita bloques de texto y abre el editor de texto.
Lazo o lazo poligonal
Activa el modo de edición Selecciona un área de imágenes y selecciona formada por pixeles de un área formada por pixeles color similar.Alcántara
grupo o un símbolo. Recuadro o recuadro elíptico Activa el modo de edición de imágenes y selecciona un área de pixeles rectangular o elíptica.
. Activa el modo de objeto. Pinta pinceladas de pixeles en un objeto de imagen. Activa el modo de edición de imágenes y selecciona un área de pixeles de estilo libre Selecciona un área de pixeles rectangular o elíptica.
Depurador de trazados Modifica las características de presión y velocidad de un trazado sin modificar su
Activa el modo de objeto. Muestra los puntos de un trazado y selecciona puntos. Dibuja objetos como trazados que se pueden editar. Remodela las partes de un trazado seleccionado que están incluidas en el cursor "remodelar área" Pinta pinceladas como pixeles.
Los nodos resultantes en este trazado.
. 4.Seleccione el color.. 3.
Pluma : Sirve para realizar trazados segmento por segmento. 5. se finaliza en el mismo lugar donde se empezó.. 2. pulse Intro (Windows).Alcántara
forma. En el modo de edición de imágenes esta herramienta se convierte en Borrador. 6. Activa el modo de edición de imágenes y duplica partes de un objeto de imagen. Borra pixeles de una imagen.3 Herramientas de trazado
Lápiz : es para dibujar a mano alzada..
4. la fuente. el tamaño...Para ver el texto en el documento a medida que lo escribe en el Editor de texto: • Elija la opción de aplicación automática en el Editor de texto. poseen sub-nodos que ayudan a la modificación en la curva de alguno de esos segmentos. Corta un trazado seleccionado para crear varios trazados.3 Creación de texto El texto de los documentos de Fireworks va incluido en un rectángulo denominado bloque de texto.2. Cuchillo/borrador > En el modo de objetos esta herramienta se convierte en Cuchillo.
Pincel : La herramienta Pincel permite pintar pinceladas de estilo libre. Para introducir texto: 1.Haga clic en el lugar del documento donde desea que empiece el bloque de texto. El trazo abierto se finaliza normalmente en cualquier lugar. el espaciado y otras características de texto. A la figura resultante se le puede dar relleno.Seleccione el texto en el Editor de texto para asignarle formato después de escribirlo.Escriba el texto.
4.. Duplica partes de un objeto de imagen. El trazo cerrado. Se abre el Editor de texto. Para introducir un salto de línea. mientras que la herramienta Lápiz dibuja trazos de lápiz de un píxel.Elija la herramienta Texto.
Cuando se separa el texto del trazado.3. Un trazado al que se une texto pierde temporalmente sus atributos de trazo.1 Asociación de texto a un trazado Para quitar al texto las limitaciones de los bloques rectangulares.Elija Texto > Separar del trazado. • Elija la herramienta Texto y seleccione el texto que desea editar.. 3... puede dibujar un trazado y unirle texto. relleno y efecto se aplican sólo al texto y no al trazado. vuelva a colocar el texto en el trazado. Para separar el texto del trazado seleccionado: Elija Texto > Separar del trazado. Para cambiar la forma del trazado: 1. el texto sobrante vuelve al principio y repite la forma del trazado. éste recupera sus atributos de trazo. donde podrá darle el formato deseado.Elija Texto > Unir al trazado. Todos los atributos de trazo.
.Mantenga presionada la tecla Shift mientras selecciona un bloque de texto y un trazado.. Para editar el texto anexo a un trazado: • Haga doble clic en el objeto de texto-en-trazado para abrir el Editor de texto. Para colocar texto en un trazado: 1. 4. El texto fluye a lo largo de la forma del trazado y se puede editar.Alcántara
Pantalla de edición de texto.. 2. relleno y efecto.Después de editar el trazado.Edite el trazado. Si un texto anexo a un trazado abierto excede la longitud de éste. 2. relleno y efectos.
4. Aunque los trazos pueden parecer pintura o tinta. ceras o artificial. confeti. bambú. pulverizador. Cuando se dibuja en el modo de objetos con cualquier herramienta de dibujo de Fireworks. óleos. todos ellos tienen puntos como cualquier objeto vectorial. el trazado de resultado se definirá por los puntos especificados al dibujar. hebras. Dentro de cada categoría hay docenas de trazos. Tras remodelar el trazado. 3D.4 Uso de la herramienta Pincel La herramienta Pincel cuenta con varias categorías de trazos: aerógrafo.1 Edición y remodelado de trazados editando los puntos: Los puntos son la estructura de los objetos de trazado en Fireworks. caligráfico.
4. pasta de dientes o pintura viscosa. Ello implica que se puede cambiar la forma de sus trazos moviendo sus puntos.Alcántara
El texto de un trazado vuelve al principio y repite la forma del trazado. El tipo de punto y el aspecto curvo o recto de las líneas adyacentes están relacionados directamente:
. es posible editar una pintura entera sin tener que borrar ni volver a dibujar trazos. De esta forma.4. su trazo vuelve a dibujarse. incluidos rotuladores finos y gruesos.
Pero si queremos cambiar el tamaño conservando las proporciones.
4.Alcántara
. podemos distorsionar el tamaño. tanto vertical como horizontalmente.
.Un punto de esquina indica que al menos uno de los segmentos adyacentes es una línea recta. siempre y cuando los cambios se hagan pinchando en los nodos de las esquinas. reflejar. mientras que el burde punteado que sobresale.5 Transformación y distorsión de objetos Las imágenes aparecen seleccionadas por defecto con una delgada línea azul.
. es la de girar el objeto. Esto se consigue cuando se coloca el mouse entre dos nodos de la figura. muestra el aumento de tamaño que se está ejecutando. este aumento es de modo PROPORCIONAL.
Un objeto o grupo en modo vector se puede escalar. Haciendo clic en cualquiera de sus nodos con la herramienta de Selección . distorsionar o inclinar mediante las herramientas Transformar y los comandos de menú. La imagen azul es la original. Herramientas Transformar Seleccione una herramienta o comando del menú Transformar para visualizar los selectores de transformación alrededor de los objetos seleccionados. y el cursor adopta la forma de una curva de giro. nótese. son las de Pluma y Nivel inferior . aunque no su forma. la imagen aparece seleccionada como muestra la figura. Otra de las opciones que da la herramienta de escalar. debemos utilizar la herramienta Escalar Al utilizarla.Un punto curvo indica que los segmentos adyacentes son curvos y se mantienen transiciones suaves y regulares entre segmentos.
Las dos herramientas más convenientes para realizar la modificación de los trazados mediante la edición de puntos. . rotar. pero.
3. las diferentes figuras pueden ser obtenidas manteniendo oprimido el puntero en la parte inferior de la herramienta rectángulo (en el triángulo pequeño). y no en 72. entre otros... como es común para resolución web.6
1.OK o Aceptar. ya que de esta manera se obtiene inicialmente una imagen de buena calidad. tanto en forma de cuadro. rectángulo o círculo.7 Dibujar rectángulos y círculos Para la creación de botones.
Las imágenes se insertan con su tamaño y peso original. es aconsejable determinar la resolución en 200 dpi.. la que después puede ser optimizada para web. En caso que las imágenes deban ser insertadas desde un Scanner.Seleccionar la imagen que se va a insertar. es necesario utilizar la herramienta rectángulo. 2.
4.Menú Insertar > Imagen.
Edite la configuración del efecto en la ventana emergente de edición. Se puede aplicar un efecto de relieve hundido o relieve elevado. la textura o la transparencia.8. 3.. Se puede crear un bisel interior o exterior. como por ejemplo el color. el borde.
4. Para cambiarle el color al relleno o línea de las figuras o texto se utiliza la tina que se encuentra en la sección de colores. desde colores sólidos hasta otros degradados que recuerdan el satén. en la primer línea imágenes creadas sin efecto. Para aplicar un efecto de relieve:
.Al finalizar. trama o degradados. en la segunda imágenes con efecto Eye Candy > Bevel Boss… (mismo que se verá más adelante).En el panel Efecto. elija la opción Bisel: • Bisel y Relieve > Bisel interior • Bisel y Relieve > Bisel exterior 2.. ondas o pliegues.8.
Bisel interior y bisel exterior 4. También pueden cambiarse atributos de relleno.2 Aplicación de efectos de relieve Utilice el efecto Relieve para que una imagen aparezca elevada o hundida respecto al fondo. 4.1 Aplicación de bordes biselados Al aplicar un borde biselado a un botón le proporciona el aspecto de un botón en relieve. haga clic fuera de la ventana de edición o pulse enter para cerrarla. El relieve hace que los botones aparezcan pulsados o no respecto a su entorno.8 Efectos y cambio de rellenos Los cambios de relleno permiten crear trazados que combinen características de solidez. transparencia.Alcántara
Ejemplo de figuras creadas con la herramienta rectángulo y sus variaciones. Para aplicar un borde biselado a un objeto seleccionado: 1..
. Se puede especificar el ángulo de la sombra para simular el ángulo de la luz brillando sobre el objeto.. 4.. seleccione Mostrar objeto. 2. sombras interiores y luces a objetos.Abra el menú emergente Efecto para obtener una lista de los efectos disponibles.Elija una opción de sombra: • Sombrear e iluminar > Sombra • Sombrear e iluminar > Sombra interior 3..Abra el menú emergente Efecto para obtener una lista de los efectos disponibles.3 Aplicación de sombras y luces Fireworks facilita la aplicación de sombras.Elija un efecto Relieve: • Bisel y Relieve > Relieve hundido • Bisel y Relieve > Relieve elevado 3.
Relieve hundido y relieve elevado sobre un lienzo azul
4.. 4. Si desea que aparezca el objeto original. 2. sombra interior y luz Para aplicar una sombra o una sombra interior: 1.Al finalizar. • Seleccione Sólo sombra para ocultar el objeto y mostrar sólo la sombra.Alcántara
1.. haga clic fuera de la ventana de edición o pulse enter para cerrarla.8.Al finalizar... • Arrastre el control deslizante de opacidad para definir el porcentaje de transparencia en la sombra.Edite la configuración del efecto en la ventana emergente de edición. haga clic fuera de la ventana de edición o pulse enter para cerrarla. Efectos de sombra.Edite la configuración del efecto en la ventana emergente de edición: • Arrastre el control deslizante de distancia para definir la distancia de la sombra respecto al objeto.
.Edite la configuración del efecto en la ventana emergente de edición: • Arrastre el control deslizante Desplazamiento para indicar la distancia del resplandor con respecto al objeto.Abra el menú emergente Efecto para obtener una lista de los efectos disponibles. • Arrastre el control deslizante de opacidad para definir el grado de transparencia del iluminado. posteriormente elegir dentro de la ventana efecto la opción Eye Candy 4000 LE > Bevel Boss… Aparecerá la siguiente pantalla. 2.8. tanto básicos. ver de donde se enfoca la luz y perfiles adicionales. Dibujar un rectángulo en color amarillo.
4.Elija Sombrear e iluminar > Iluminado.. misma donde se podrán realizar algunos efectos especiales. • Seleccione el menú emergente del cuadro de color para definir el color de iluminado.4 Efecto Eye Candy Dentro de Fireworks se pueden crear efectos de botones o imágenes con apariencia especial tipo 3-D.Alcántara
Para aplicar una luz: 1.
A un objeto se le pueden dar todos los efectos que se deseen
. El siguiente paso es incluir texto dentro del rectángulo y darle ya sea efectos de bisel.Alcántara
Configurar el efecto a nuestro gusto y darle aceptar (OK). relieve. iluminado o también bevel boss. para que los cambios tengan efecto sobre el rectángulo previamente dibujado.
• Enmascara el objeto o imagen subyacente con su trazado. La edición de los atributos de trazo y de relleno del objeto de máscara le permitirá crear muchos efectos únicos. posteriormente ya podremos darle el efecto deseado. Como objeto de máscara puede utilizarse un objeto vectorial o un objeto de mapa de bits. Las máscaras son totalmente modificables. en el caso del monitor solamente el efecto en cuestión. Los pixeles de un objeto de máscara pueden afectar a la visibilidad de otro objeto. posteriormente se le agregaron más efectos.9 Enmascaramiento de imágenes Las máscaras se agregan a objetos para crear un efecto de corte en los mismos.
Si queremos que dos objetos tengan la apariencia de ser uno sólo y así el efecto aplique a ambos y no de forma independiente. lo que debemos de hacer es crearlos y posteriormente agruparlos seleccionando ambos objetos clic en el botón derecho de ratón y elegir agrupar.
4. en el primer caso tanto el texto CEU.
. y por último en la caricatura se uso la opción de varita mágica para poder quitar el fondo con el que viene la imagen.Alcántara
Ejemplos de uso del Eye Candy > Bevel Boss. Para enmascarar un objeto existente puede utilizarse una máscara vacía u otro objeto. así como el botón se le agregaron más efectos. Las máscaras tienen dos funciones principales: • El trazado de una máscara de vectores puede perfilar otro objeto o imagen.
Seleccionar ambas imágenes 5. Acerca de los rollovers Los rollovers de JavaScript son elementos gráficos que cambian de aspecto en un navegador Web cuando el puntero del ratón se desplaza sobre ellos o se hace clic en ellos.Insertar una imagen 2. El elemento activador es siempre un objeto Web. es decir... Los objetos Web pueden tener uno o varios comportamientos asociados..Ir al menú Modificar > Agrupar como máscara
4. una división o una zona interactiva. El rollover más sencillo intercambia una imagen en el fotograma 1 con una imagen que se encuentra justo debajo en el fotograma 2. Las imágenes de rollover pueden colocarse en dos o más fotogramas... en ocasiones es necesario que el comportamiento de los rollover sea más complejo de lo que permite el Editor de botones.Realizar el objeto que nos servirá como máscara 3. Los elementos básicos para la creación de rollovers en Fireworks son los objetos de división y de zona interactiva y comportamientos arrastrar y colocar. los rollovers siempre funcionan de la misma forma: un gráfico activa la visualización de otro como respuesta a un clic o al desplazamiento del puntero sobre ellos. Sin embargo. Cualquiera que sea su aspecto. Los comportamientos arrastrar y colocar permiten crear un efecto de rollover y de intercambio de imagen que vincula las divisiones y las zonas interactivas con divisiones destino.Alcántara
Los pasos para crear una imagen con máscara es la siguiente: 1. Por ejemplo. puede desear crear un rollover desunido que muestre una imagen alejada del cursor o un menú emergente personalizado que aparezca cuando el cursor pase sobre el gráfico. Incluyen botones e imágenes intercambiadas.Cubrir la imagen con el objeto 4.10 Creación de rollovers El Editor de botones permite crear botones que utilicen una única división para lograr efectos visuales. Puede crear rollovers más complejos: los rollover de intercambio de imágenes pueden intercambiar una imagen
. si todo quedó correctamente deberá de aparecer el logotipo. ir al menú Insertar > Fotograma 4.Escribir la palabra Nike y darle formato y efectos deseados 3.. La primera etapa implica configurar la división.. Ejemplo Para realizar un rollover simple hay que realizar los siguientes pasos: 1..1 Rollover Simple Es posible crear un rollover simple en dos etapas.
Podemos darle F12 o presentación preliminar para visualizar el comportamiento que tendrá el botón al acercarnos.Alcántara
de cualquier fotograma.Regresar al fotograma 1 e insertar una división que abarque el botón creado.Ir al fotograma 2 y pegar el contenido previamente copiado.
4. Las dos imágenes que conforman el rollover se encuentran en el mismo espacio del lienzo.Quitar la palabra Nike e insertar el su logotipo. 9. y dentro del menú que aparece. las dos imágenes que crean el efecto y los fotogramas en los que residen.10. 6... 8. pero en fotogramas distintos.Regresar al Fotograma 1 y copiar todo lo que tenemos en él.. 7.Seleccione la división.Una vez terminado.. 5..Dé clic derecho sobre el centro de la división. elija añadir comportamiento de rollover simple.. los rollovers desunidos muestran una imagen en un punto alejado del cursor.Crear un rectángulo y darle efectos 2.
Para finalizar la creación de la imagen de intercambio mediante comportamientos arrastrar y colocar: 1.Coloque el puntero sobre el símbolo de comportamiento arrastrar y colocar en el centro del objeto Web.
Asociación de comportamientos arrastrar y colocar La segunda etapa consiste en asociar el comportamiento Intercambiar imagen a la división.Elija Archivo > Presentación preliminar en el navegador o haga clic en la ficha Presentación preliminar para ver el rollover tal como aparecerá en un navegador Ejemplo a desarrollar:
. Fireworks muestra todas sus relaciones de comportamiento. El símbolo de comportamiento arrastrar y colocar es un círculo con una cruz ubicado en el centro de la división.10.En el menú emergente Intercambiar imagen de.. Aparece el cuadro de diálogo Intercambiar imagen. Cuando selecciona un objeto Web de activación. 3 Haga clic y mantenga pulsado el botón del ratón hasta que el puntero cambie a un puño.Arrastre el puño hasta el borde de la división.Seleccione la división que cubre el área de activación. De forma predeterminada. una relación de comportamiento arrastrar y colocar se representa con una línea azul. 2. 5. Los comportamientos arrastrar y colocar constituyen un método más rápido ya que permiten crear rollovers arrastrando el símbolo de comportamiento desde una división de activación o zona interactiva hasta una división de destino. 4.. Nota: Puede seleccionar la división en cualquier fotograma.Alcántara
4..2 Uso de comportamientos arrastrar y colocar para crear efectos de imagen de intercambio Utilice comportamientos arrastrar y colocar para crear rollovers de intercambio de imagen. El puntero cambia a una mano. Los comportamientos arrastrar y colocar constituyen un método fácil y eficaz para especificar lo que sucede a una zona interactiva o división cuando el puntero pasa sobre estos elementos.. Una línea azul de comportamiento arrastrar y colocar describe una trayectoria desde el centro hasta la esquina superior izquierda de la división. seleccione el fotograma en el que reside la imagen de rollover. 6..
Lo nuevo que hay que realizar es aplicar el intercambio de imagen misma donde se relacionará una división con el fotograma donde se almacena la información que corresponda.Alcántara
Fotograma 3 Para realizar el efecto de rollover simple.
. hay que estar en el primer fotograma y darle este comportamiento.
Para generar animaciones en Fireworks se crean símbolos y se modifican sus propiedades en el tiempo.Alcántara
Una vez grabado todo el documento.
. va a ser necesario la exportación del mismo. 4. además también se graban divisiones que se utilizaron para llevar a cabo las operaciones de rollover simple así como intercambio de imagen. Elija el menú Archivo > Exportar
Al exportar el archivo se genera un archivo html mismo que utilizará cuando desee insertarlo en Dreamweaver.11 Creación de animaciones Las imágenes animadas confieren un aspecto más atractivo y sofisticado a los sitios Web. La acción de cada símbolo se almacena en un fotograma. puede hacer que la mascota de su empresa se desplace por la página mientras el logotipo aparece y desaparece de forma paulatina. En Fireworks pueden crearse animaciones con anuncios en titulares. a diferencia de una imagen que se exporta en formato gif o jpg. Un símbolo es como un actor del que se coreografían los movimientos. Por ejemplo. logotipos y viñetas en movimiento. El movimiento se consigue al reproducir todos los fotogramas en secuencia. un documento que contiene divisiones va a ser exportado como documento html. lo que crea la ilusión del movimiento.
Fireworks puede exportar animaciones en forma de archivos GIF Animado o Flash SWF.. 4.11.
Las propiedades del símbolo de animación pueden cambiarse en cualquier momento a través del cuadro de diálogo Animar o desde el panel Objeto..Utilice los controles Demora de fotogramas en el panel Fotogramas establecer la velocidad de movimiento de la animación. La creación de una animación en Fireworks es un proceso de cuatro pasos: 1. Una animación puede contener más de un símbolo y cada ellos puede realizar una acción diferente.Alcántara
Pueden aplicarse distintas configuraciones al símbolo para cambiar de forma gradual el contenido de los fotogramas sucesivos.2 Creación de símbolos de animación Una vez creado un símbolo se pueden establecer propiedades que determinen el número de fotogramas de la animación y el tipo de acción.. escriba un nombre para el símbolo nuevo. como cambio de escala o rotación. Puede definir el grado y la dirección de movimiento.Optimice el documento y expórtelo como una Animación GIF. También se pueden modificar las ilustraciones del símbolo en el editor de símbolos. la escala.
4.1 Acerca de las animaciones En Fireworks las animaciones se crean mediante la asignación de propiedades a objetos llamados símbolos de animación.
. El panel Optimizar permite establecer las opciones de optimización y exportación para controlar el modo de creación del archivo. puede crearlo de cero o convertir uno existente en un símbolo. La animación no se moverá hasta que el símbolo (o la división que lo rodea) se optimice con formato GIF Animado. que determinan el tiempo que tarda el símbolo en terminar el movimiento. Puesto que un solo archivo puede contener varios símbolos. Los distintos símbolos pueden número diferente de fotogramas. o que gire. que aparezca o desaparezca de forma paulatina. cada uno con una demora de 0..11. el símbolo de animación nuevo tiene cinco fotogramas.Cree un símbolo de animación. De forma predeterminada. La animación de un símbolo se divide en fotogramas. 3.Elija Insertar > Nuevo símbolo. 2. También se puede desplazar el trazado de movimiento de un símbolo para cambiar el movimiento. Puede crear un símbolo que atraviese el lienzo. 4. El editor de símbolos permite editar el símbolo sin alterar el resto del documento. La animación termina cuando acaba todos los símbolos. (aparición o desaparición paulatina) y el ángulo y la dirección de rotación.. 2. se pueden crear animaciones complejas en que sucedan varias acciones a la vez.Utilice el cuadro de diálogo Propiedades de símbolo para introducir los símbolos.20 segundos.En el cuadro de diálogo Propiedades de símbolo. que aumente o disminuya de tamaño.. Para crear un símbolo de animación: 1.
Elija Modificar > Animar > Configuración. El valor predeterminado es 0 grados. 6..3 Edición de trazados de movimiento de símbolos Cuando se selecciona un símbolo de animación. 2. El rango de valores es de 0 a 250.En el editor de símbolos. Aunque el control deslizante permite establecer un máximo de 250. El valor predeterminado es 100%.
. • Dirección es la dirección. en que debe moverse el objeto.
Cambie cualquiera de las siguientes propiedades: • Fotogramas es el número de fotogramas que deben incluirse en la animación. desde el principio al final.Alcántara
3.Seleccione un símbolo. • Escala a es el cambio de tamaño. en porcentaje. El valor predeterminado es 72.Pueden añadirse fotogramas nuevos al símbolo con el control deslizante
Para cambiar las propiedades de un símbolo: 1. Se pueden introducir valores más altos si se desea que el símbolo realice más de una rotación. • El rango de valores es de 0 a 100.11. 4. utilice las herramientas de texto o de dibujo para crear un objeto nuevo. de principio a final...Cierre la ventana del editor de símbolos.. en grados. éste cuenta con un recuadro delimitador y un trazado de movimiento que indica la dirección de desplazamiento del símbolo. • Rotar es el giro del símbolo. Derecha equivale al sentido de las agujas del reloj e Izquierda indica el sentido contrario a las agujas del reloj. • Derecha e Izquierda son las direcciones en que rota el objeto. 4.Elija Animación y haga clic en Aceptar. Se pueden dibujar objetos vectoriales o de mapa de bits. El rango de valores es de 0 a 250 píxeles. • Mover es la distancia en píxeles que debe recorrer cada objeto. También puede elegir Ventana > Objeto para abrir el panel Objeto. en grados. El rango de valores es de 0 a 360 grados. El rango de valores es de 0 a 360 grados. El valor predeterminado es 100%. en el cuadro de texto se puede escribir cualquier valor deseado. • Opacidad es el grado de aparición o desaparición paulatina de principio a final. El punto verde del trazado indica el punto de partida y el rojo el fin del recorrido. 5...
El punto verde indica el punto de partida y el rojo el fin del recorrido. Para restringir la dirección de movimiento a incrementos de 45 grados. Se puede asignar un nombre a cada fotograma. La posición del objeto en el trazado indica el fotograma actual. el fotograma actual es el 3..11. mientras que con el valor 300 se muestra durante 3 segundos.4 Trabajo con fotogramas Las animaciones se construyen a partir de la creación de varios fotogramas. Para cambiar la dirección de movimiento se puede modificar el ángulo del trazado. Si el objeto aparece como tercer punto.
Configuración de la demora de fotogramas La demora de fotogramas determina el tiempo durante el que se va a mostrar el fotograma actual. Por ejemplo.Alcántara
Los puntos azules representan los fotogramas. un símbolo con cinco fotogramas debe contar con cinco puntos azules en su trazado. El panel Fotogramas permite crear y organizar los fotogramas.Arrastre alguno de los puntos de animación del símbolo a una posición nueva. reorganizarlos. Se especifica en centésimas de segundo. El contenido de cada uno de ellos puede verse en el panel Fotogramas. mantenga pulsada la tecla Mayús mientras arrastra. establecer de forma manual los tiempos de animación y mover objetos de un fotograma a otro. el valor 50 hace que el fotograma se muestre durante medio segundo.
Para cambiar el movimiento o la dirección: 1.
13 Presentación preliminar de los ajustes de optimización y comportamientos La ventana Presentación preliminar muestra el aspecto de la imagen exportada.Elija Ventana > Fotogramas para abrir el panel Fotogramas.Seleccione uno o varios fotogramas: • Para seleccionar un rango continuo de fotogramas.
4. según los ajustes de optimización actuales. por ejemplo.Elija el número de repeticiones que deben seguir a la primera. Si elige 4. Antes de exportar archivos deben configurarse una serie de valores para simplificar la carga de la animación y facilitar su reproducción. para abrir el cuadro de diálogo de propiedades de fotograma. Para establecer la repetición de un archivo GIF animado... Para mostrar u ocultar los objetos de división y guías en una Presentación preliminar: Haga clic en el botón Mostrar (u Ocultar) zonas interactivas y divisiones del panel Herramientas.. lo que permite minimizar el número de ellos necesario para crear la animación.. situado en la parte inferior del panel.
. como bucles y transparencias.12 Exportación de la animación Una vez definidos los símbolos y los fotogramas que conforman la secuencia animada. puede probar los comportamientos y rollovers antes de exportar mediante la ventana Presentación preliminar. 1.Haga clic en el botón de bucle.Alcántara
Para establecer el valor de demora de fotogramas: 1. o haga doble clic en la columna de demora de fotogramas. 3. 2. los fotogramas se repiten una y otra vez. Nota: El formato de archivo debe ser GIF Animado (en el panel Optimizar) para exportar cualquier tipo de movimiento. 4. Para una ver una presentación preliminar de una imagen según los ajustes de optimización actuales: Haga clic en la ficha Presentación preliminar de la ventana de documento. la animación se reproduce cinco veces en total..Haga clic en el menú emergente Opciones y elija Propiedades. Con la opción Siempre la animación se repite de forma continua. mantenga pulsada la tecla Mayús y haga clic en los nombres del primer y el último fotograma. Además..Pulse Intro o haga clic fuera del panel para cerrar el cuadro de diálogo. y utilizar la optimización para reducir el tamaño del archivo exportado y facilitar su descarga.Introduzca un valor para la demora de fotogramas. en el cuadro de diálogo Presentación preliminar de la exportación. ya se puede exportar el archivo como una animación. • Para seleccionar un rango no continuo de fotogramas. mantenga pulsada la tecla Control (Windows) y haga clic en cada nombre de fotograma. 4. 3. Con esta función.. 2. Configuración de animación repetida El valor de bucle. Puede establecer valores de reproducción. determina el número de veces que se repite la animación.
el hecho de descartar datos es aceptable cuando no se observa una reducción evidente de la calidad. Sin embargo. imágenes con transiciones de color en degradado o cualquier imagen que precise más de 256 colores. o Portable Network Graphic. PNG es el formato de archivo nativo de Fireworks. Nota: Debe estar viendo el Fotograma 1 para ver los botones o rollovers. es el formato de gráfico web más versátil. obtendrá archivos de mayor tamaño. no es un formato de archivo común para la Web. Sin embargo. JPEG siempre produce una calidad más alta para los datos de imágenes fotográficas. lo que reduce la calidad del archivo final. Por tanto.
. Sin embargo. Para cambiar al Fotograma 1. Elección del formato PNG PNG. aunque con menor calidad de imagen. • Utilice un porcentaje bajo para producir un archivo pequeño. Utilice las presentaciones preliminares 2-arriba y 4-arriba para probar y comparar el aspecto y tamaño previsto del archivo con distintos valores de calidad para un archivo JPEG exportado. El formato JPEG admite millones de colores (24 bits). no todos los exploradores web pueden beneficiarse completamente de las ventajas del formato PNG sin utilizar un plug-in. haga clic en el panel Fotogramas. JPEG es el formato óptimo para fotografías digitalizadas. Cuando desee exportar un archivo JPEG. gráficos con colores de alta densidad y gráficos de con colores reducidos y altamente comprimidos. utilice el deslizador emergente Calidad del panel Optimizar para determinar la merma de calidad que se producirá después de comprimir el archivo. el formato GIF sólo admite 256 colores. JPEG es un formato en el que se descartan algunos datos durante la compresión de archivos. como resultado. • Utilice un porcentaje alto para preservar la calidad de la imagen y aplicar menos compresión. imágenes que utilizan texturas.Alcántara
Presentación preliminar de botones y rollovers Mueva el puntero sobre el rollover o botón en la ventana Presentación preliminar para ver como aparecerá en un navegador Web. El formato PNG es adecuado para la creación de complejas transparencias activas.
Elección del formato JPEG JPEG es un formato desarrollado por el Joint Photographic Experts Group específicamente para imágenes fotográficas. en cambio. los archivos PNG de Fireworks contienen información adicional que no se guarda al exportar un archivo PNG para utilizarlo en la Web.
es posible optimizarlos y exportarlos a los formatos más comunes de la Web y a los formatos de las aplicaciones de gráficos vectoriales. Si no está familiarizado con la optimización ni con la exportación de gráficos Web. excepto la compresión JPEG selectivo. utilice el sistente de exportación.14 Exportación Después de crear gráficos en Fireworks. Los ajustes de exportación y optimización no cambian el documento original de Fireworks. el cuadro de diálogo Presentación preliminar de la exportación ofrece todas las opciones de optimización. Este asistente le guía en todo el proceso de exportación y le sugiere diferentes ajustes. pero salvando el espacio o tamaño de la imagen para poder presentarla en Internet de manera rápida y que no tarde demasiado en descargarse. puede optimizar el archivo que desee exportar. y Adobe Illustrator y Photoshop.
. Puede exportar gráficos a otras aplicaciones de gráficos vectoriales como Macromedia FreeHand y Flash. esto con la finalidad de sacrificar un poco la calidad. Además. Si desea optimizar como parte del proceso de exportación. Antes de exportar para la Web.Alcántara
4. También podemos exportar imágenes jpg ya sea en el mismo formato o en otro. puede copiar y pegar los trazados Fireworks en aplicaciones de vectores. La presentación preliminar de la exportación muestra cualquier cambio que realice con lo que puede ver cómo los cambios afectan a la calidad y el tamaño de la imagen.
Para insertar una imagen que hemos realizado en Fireworks y se haya exportado a uno de los formatos gráficos.. hay que elegir el botón Insertar HTML de Fireworks. botones.
. aparecerá una ventana donde nos indicará que seleccionemos la imagen. imágenes interactivas. ahora lo que falta es la integración hacia Dreamweaver. todo con efectos que podemos crear con la ayuda de la aplicación. imágenes. etc. hay que elegir el botón de insertar imagen.Relación Dreamweaver y Fireworks Como se vio.. misma que puede ser una imagen estática o un gif animado.Alcántara
Cuando se quiere importar algún archivo de Fireworks donde se hayan realizado divisiones e intercambio de imagen. en Fireworks podemos diseñar texto. Dreamweaver lo utilizamos para ir insertando imágenes y darle el diseño o apariencia deseada a nuestra página.
Depende del lector. Todo lo anterior se puede realizar mediante los diseños vistos en Dreamweaver. Lo que sigue…. ya sea en Marcos o Vista de Disposición donde asignamos las celdas para insertar objetos. A Diseñar Páginas Web con calidad.Alcántara
Le damos clic en examinar y localizamos el archivo a insertar.
Igual se realiza para insertar botones que contengan rollover simple para que cambie la apariencia cuando el usuario se acerque al botón.
cs.ull.com/curso/vida/estimulacioncreatividadinfantil. Creación de páginas web con Frontpage 2000
http://www.http://www.html Notepad.php Planificar sitio.Alcántara
Referencias Area Moreira Manuel...emagister.com/sitios. http://www. obtenido el 15 de enero del 2008
.http://webpages. MailxMail. Ph.Imagen: Actividades Cognitivas.mailxmail.espaciolatino..vt.htm Página..lycos.es/ obtenido el 20 de diciembre del 2007 Crea tu Web.http://www. ¿Qué es la creatividad? http://www.ucc. Manual de Macromedia. Pasos para crear tu sitio web..http://www.http://www.vt.aula21... Noviembre 2000.http://research..htm Servidor.net/obra07/menu_fed000.php/products_id/431 URL.http://creatuweb.http://www.multimediosbariloche.. Ohio State.com/disenador-programador-web-cursos-2330906.com/product_info. Guía básica del Lenguaje HTML..http://blog.sctnl.htm obtenido el 20 de diciembre del 2007 obtenido el 28 de agosto del 2007 E-Magister. Universidad de Granada.com/guia/preliminar. obtenido el 20 de diciembre del 2007 Hartson Rex. El Factor Humano.htm.htm.¿Que es una Webquest?.http://www.ugr.com.D.haydetodo.htm.es/fisikito/mapa%20del%20sitio.. Cursos Gratuitios.com/ Monitor.html.http://www. obtenido el 20 de diciembre del 2007 Imágenes obtenidas el 15 julio de 2007 Computadoras. obtenido el 15 de enero del 2008
Patxi Iriondo Alberdi.http://usuarios. Professor.com/curso/informatica/frontpage/capitulo1. obtenido el 15 de enero del 2008 Rendón Uribe María Alejandra. Utilización de Dreamweaver.com/2006/10/el_monitor_ lcd_mas_rapido_del .edu/lynch/TRActionPlan2. Usability Methods & Tools.lanix.es/users/manarea/webquest/ obtenido el 25 de noviembre del 2007 Cañas José y otros.net/segunda/recursosweb.mailxmail.pc-actual.edu/usability/index.htm Macromedia Inc.
Sign up to vote on this titleUsefulNot usefulManual v015 by Ramiro Nieto0.0 (0)EmbedDownloadRead on Scribd mobile: iPhone, iPad and Android.Copyright: Attribution Non-Commercial (BY-NC)List price: $0.00Download as PDF, TXT or read online from ScribdFlag for inappropriate contentMore informationShow less

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución