UNIVERSIDAD FRANCISCO GAVIDIA FACULTAD DE INGENIERIA Y ARQUITECTURA TECNOLOGIA DE LA INFORMACION DE LAS COMUNICACIONES III COMO TRABAJAR CON EXPRESSION

WEB WEB. Internet y pginas web Internet es una gran red de redes, tambin llamada Supercarretera de la , informacin. Es el resultado de la interconexin de miles de computadoras de todo . el mundo. Todas ellas comparten los protocolos de comunicacin, es decir que , todos hablan el mismo lenguaje para ponerse en contacto unas con otras. Los servicios bsicos ofrecidos ahora por Internet son correo electrnico, noticias electrnico en red, acceso a computadoras remotas y sistemas de adquisicin de datos, y la capacidad para transferir informacin entre computadoras remotas. La World Wide Web consiste en ofrecer una interface simple y consistente para acceder a la inmensidad de los recursos de Internet. Es la forma ms moderna de m ofrecer informacin. El medio ms potente. La informacin se ofrece en forma de l pginas electrnicas. mente El World Wide Web, WWW, W3 o simplemente Web, permite saltar de un lugar a otro en pocos segundos. Lo ms interesante es que con unas pocas ordenes se . puede mover por toda la Internet. Para entender lo que es la Web veremos el siguiente ejemplo:

1. 2. 3. 4. 5.

Barra estndar. Barra de direcciones. Men de la pgina Web. Imgenes que posee las pginas Web Enlaces a otros sitios Web.

Con referencia al concepto del literal No. 5 debemos tener una idea clara de lo que l es un enlace, un hipervnculo e hipertexto. Un enlace o link es texto o imgenes en un sitio web que un usuario puede dar clic para tener acceso o conectar con otro documento. Los enlaces son como la tecnologa que conecta dos sitios web o dos pginas web. En el navegador se ven como palabras subrayadas subrayadas. Un hiperenlace (tambin llamado enlace, vnculo, hipervnculo) es un elemen elemento de un documento electrnico que hace referencia a otro recurso, por ejemplo, otro documento o un punto especfico del mismo o de otro documento. Hipertexto (en ingls hypertext) es un sistema para escribir y mostrar texto que hypertext) enlaza a informacin adicio adicional sobre ese texto. El trmino fue acuado por Ted Nelson para referir a un sistema no lineal de buscar y conseguir informacin basado en enlaces asociativos entre documentos. La World Wide Web utiliza el protocolo de transferencia de hipertexto ( (HTTP) para enlazar pginas web y archivos multimedia.

Pginas Web Las pginas Web son los documentos bsicos del World Wide Web. En Microsoft Expression Web, dispone de varias opciones para crear pginas Web. Puede establecer el tipo de pgina predeterminado que se crear cuando haga clic en el botn Nuevo documento o use el mtodo abreviado de teclado CTRL+N.

Despus de haber creado una pgina, podr configurar las propiedades de la misma, como el ttulo de la pgina. El ttulo de una pgina es el nombre que aparece en la barra de ttulo de la mayora de los exploradores Web, titulares de pgina y barras de vnculos. El ttulo puede ser distinto del nombre de archivo. Muchos motores de bsqueda utilizan palabras clave y descripciones de pgina para indizar los sitios Web. Es importante usar siempre Expression Web al cambiar de nombre archivos y carpetas de manera que los vnculos con origen o destino en el archivo al que se ha cambiado el nombre (o en los archivos de la carpeta a la que se ha cambiado el nombre) se actualicen de forma automtica. Si cambia el nombre de un archivo o carpeta con el Explorador de Microsoft Windows, los hipervnculos con origen y destino en dicho archivo (o archivos de esa carpeta) no se actualizarn. Nota Para garantizar que todos los visitantes del sitio puedan seguir las direcciones URL independientemente del idioma o del sistema operativo del equipo, guarde los archivos con nombres que utilicen slo caracteres ASCII sencillos.

Para crear una nueva pgina Web Siga uno de estos procedimientos:

En el men Archivo, seleccione Nuevo y, a continuacin, haga clic en Pgina. En el cuadro de dilogo Nuevo, seleccione sitio web y haga clic en Aceptar. En el men Archivo, haga clic en Nuevo. En el cuadro de dilogo Nuevo, seleccione el tipo de pgina en la ficha Pgina y haga clic en Aceptar. Presione CTRL+N. En la barra de tareas Comn, haga clic en el botn Nuevo documento .

Luego se abrir el cuadro de dialogo nuevo

GENERAL: Muestra las distintas opciones para crear una pgina web en blanco

PLANTILLAS: Muestra las opciones de formatos de pginas web previamente elaboradas con el formato y una serie de pginas web que las componen ya que son sitios web completos. Las opciones que muestra son de Organizacin, de pequea empresa y personal. Al lado izquierdo muestra una vista previa del formato de la plantilla

Una vez seleccionado el tipo de sitio web es importante determinar la carpeta de ubicacin del sitio ya que en esa carpeta se almacenarn todas las imgenes y paginas que utilicemos.

Cambiar las propiedades de una pgina Web Una vez hemos creado un sitio web podemos modificar algunas propiedades 1. En la vista Diseo, en el panel de tareas Lista de carpetas, haga clic con el botn secundario en el archivo de pgina Web y, a continuacin, haga clic en Propiedades. 2. En el cuadro de dilogo Propiedades de pgina, en la ficha General, haga lo siguiente:

Elemento Ttulo Descripcin

Accin Escriba el ttulo de la pgina. Escriba la descripcin de la pgina.

Palabras clave Escriba las palabras clave de la pgina.

Cambiar el nombre de una pgina o carpeta 1. En el panel de tareas Lista de carpetas, haga clic con el botn secundario en el archivo o la carpeta y, a continuacin, haga clic en Cambiar nombre. 2. En el cuadro Cambiar nombre, escriba el nuevo nombre. Para guardar una pgina Web

Siga uno de estos procedimientos:

En la barra de herramientas Comn, haga clic en el botn Guardar

Haga clic con el botn secundario en la ficha de la parte superior de la ventana de edicin y, a continuacin, haga clic en Guardar. En el men Archivo, haga clic en Guardar. Para guardar una pgina Web en una ubicacin diferente o con otro nombre distinto, haga clic en Guardar como en el men Archivo.

Nota Si se aaden imgenes, archivos de sonido u otros objetos a la pgina, Expression Web le pedir que los guarde al guardar la pgina.

Ventana de edicin En Microsoft Expression Web, las pginas Web se modifican en la ventana de edicin. Cuando abre un sitio Web, Expression Web agrega una ficha Sitio Web a la ventana de edicin. Para obtener ms informacin, vea Vistas de sitio Web. Ventana de edicin
1 2 3

1. Los archivos que ha abierto aparecen como fichas en la parte superior de la ventana de edicin. El archivo que est modificando aparece resaltado. Sugerencia Para pasar de una pgina a otra, presione CTRL+TAB o CTRL+MAYS+TAB. 2. Para cerrar la pgina que est modificando, haga clic en el botn Cerrar .

3. Barra Selector rpido de etiquetas. Las etiquetas HTML aparecen en esta barra en orden de anidamiento. Puede hacer clic en una etiqueta para seleccionarla o en la flecha abajo situada junto a ella para disponer de ms opciones. Para obtener ms informacin, vea Selector rpido de etiquetas. 4. Use los botones Diseo , Dividir y Cdigo para cambiar la vista de la pgina. Para obtener ms informacin, vea Vistas de pgina Cdigo y Dividir. Sugerencia Para pasar de una vista a otra, presione CTRL+RE PG o CTRL+AV PG. Puede modificar las pginas Web en tres vistas. Para obtener ms informacin, vea Vistas de pgina Cdigo y Dividir. Vistas de pgina Diseo Puede disear y modificar pginas Web con las herramientas de diseo de un modo similar a la creacin WYSIWIG (lo que se ve es lo que se imprime). Sugerencia Para mostrar las etiquetas HTML en la vista Diseo, presione CTRL+/. Dividir Puede revisar y modificar el contenido de la pgina Web en un formato de pantalla dividida que ofrece acceso a las vistas Cdigo y Diseo simultneamente. Sugerencia Cuando trabaje en la vista Dividir, para aplicar los cambios que realice en la vista Cdigo a la vista Diseo, presione F5.

Cdigo Puede ver, escribir y modificar las etiquetas HTML directamente. Gracias a las caractersticas de cdigo optimizadas de Expression Web, podr crear cdigo HTML limpio y le resultar ms fcil quitar el cdigo que no desee utilizar.

rea de trabajo El rea de trabajo de Microsoft Expression Web proporciona las herramientas necesarias para editar pginas y sitios Web. El rea de trabajo se puede personalizar, es decir, puede cambiar su aspecto para adaptarlo a su forma de trabajar. A continuacin se muestra el rea de trabajo cuando se instala Expression Web por primera vez. Sugerencia Para restablecer el aspecto predeterminado del rea de trabajo, haga clic en Restablecer diseo del rea de trabajo en el men Paneles de tareas.

Barras:

BARRA DE TITULO

BARRA DE MENU

BARRA DE ESTANDA

BARRA DE FORMATO

Usar las barras de herramientas Microsoft Expression Web personaliza automticamente las barras de herramientas en funcin de la frecuencia con que se usen sus botones. Si no hay sitio suficiente para mostrar todos los botones en una barra de herramientas, se muestran los que se hayan usado ms recientemente. Cuando se usa un botn que no se muestra en la barra de herramientas, ese botn se mueve a la barra de herramientas y otro que no se haya usado recientemente se coloca en la lista Opciones de barra de herramientas. Para buscar un botn de una barra de herramientas

Haga clic en Opciones de barra de herramientas herramientas.

al final de la barra de

Nota Si no encuentra un botn de la barra de herramientas, puede que tenga que habilitar la edicin para el idioma al que se aplica el botn.

Para mostrar todos los botones de una barra de herramientas

Use el controlador de movimiento de la barra de herramientas para arrastrarla a su propia fila. Tambin puede mover la barra de herramientas a una ubicacin distinta del borde de la ventana del programa, de modo que se convierta en flotante.

Nota Puede maximizar la ventana del programa para mostrar ms botones de la barra de herramientas haciendo clic en el botn Maximizar . Para mostrar una barra de herramientas

Haga clic con el botn secundario en una barra de herramientas y seleccione la barra que desee mostrar.

Para ocultar una barra de herramientas Siga uno de estos procedimientos:

Haga clic con el botn secundario en la barra de herramientas y desactive la casilla de verificacin situada a la izquierda de la barra de herramientas que desee ocultar. Si la barra de herramientas es flotante, haga clic en el botn Cerrar barra de herramientas. de la

Para mover una barra de herramientas

Arrastre el controlador de movimiento de una barra de herramientas acoplada o la barra de ttulo de una barra de herramientas flotante a otra ubicacin.

Para acoplar una barra de herramientas

Arrastre la barra de ttulos de una barra de herramientas flotante al borde de la ventana del programa.

Nota Cuando se acopla una barra de herramientas, pueden verse afectados el tamao y la ubicacin de otras barras de herramientas de la misma fila. Para cambiar el tamao de una barra de herramientas

Para cambiar el tamao de una barra de herramientas flotante, mueva el puntero sobre un borde hasta que cambie a una flecha de dos puntas y, despus, arrastre el borde de la barra de herramientas.

Para cambiar el tamao de una barra de herramientas acoplada que est en la misma fila que otra barra de herramientas, arrastre el controlador de movimiento .

Nota No se puede cambiar el tamao de una barra de herramientas acoplada que est en su propia fila. Paneles de tareas Los paneles de tareas de Microsoft Expression Web le ayudan a realizar su trabajo poniendo a su disposicin las herramientas que necesita para ello. En el men Paneles de tareas se encuentran todos los paneles de tareas. Puede tener varios paneles de tareas abiertos a la vez y cambiar la ubicacin y el tamao de cada panel de tareas para adaptarlo a sus necesidades. Si se organizan los paneles de tareas con una distribucin personal, Expression Web usa de forma automtica esa distribucin cada vez que se abre el programa.

Panel de tareas Propiedades de CSS Puede usar el panel de tareas Propiedades de CSS junto con una pgina Web abierta, un archivo CSS externo o con el panel de tareas Administrar estilos para revisar y cambiar las propiedades y los valores de los estilos existentes. Cuando se usa el panel de tareas Propiedades de CSS con una pgina Web, el panel de tareas permite ver con rapidez todos los estilos que se usan en la seleccin actual de la pgina Web, el orden de prioridad de dichos estilos y todas las propiedades y los valores de los mismos. Sugerencia En el panel de tareas Propiedades de CSS, haga clic con el botn secundario en un selector de Reglas aplicadas para mostrar un men contextual que contiene opciones adicionales para trabajar con la CSS.

Panel de tareas Propiedades de CSS

1. El botn Mostrar lista ordenada por categoras organiza la lista de propiedades en categoras, como por ejemplo, Fuente y Bloque. El botn Mostrar lista ordenada alfabticamente propiedades por orden organiza la lista de alfabtico.

El botn Mostrar propiedades definidas encima organiza la lista de propiedades de modo que las propiedades definidas en el estilo seleccionado aparezcan al principio de la lista. 2. El botn Resumen muestra, debajo de la columna Propiedades de CSS, una lista de todas las propiedades que afectan a la seleccin actual, en lugar de mostrar solamente las propiedades del estilo seleccionado. En el modo de resumen, puede hacer clic en una propiedad de Propiedades de CSS para esquematizar la regla asociada en Reglas aplicadas. Para salir del modo de resumen, haga clic de nuevo en Resumen o haga clic en una regla en Reglas aplicadas. 3. Reglas aplicadas muestra el selector de cada estilo que afecta a la

seleccin actual. Los estilos se muestran en orden de prioridad ascendente, desde el estilo de menor prioridad al principio de la lista al estilo de mayor prioridad al final de sta. Seale un selector para ver todo el conjunto de reglas en la informacin en pantalla. Seleccione un selector para mostrar sus propiedades en Propiedades de CSS. Haga doble clic en un selector para ir al cdigo de dicho conjunto de reglas. 4. Esta columna muestra la etiqueta a la que se aplica cada estilo y el selector del estilo. Seale una fila de la columna para ver la regla aplicada. La columna se denomina Pgina actual cuando el estilo seleccionado reside en una CSS interna y, cuando reside en una CSS externa, recibe el nombre del archivo de CSS externa. Si lo desea, puede sealar el nombre de archivo de CSS externa para ver la ruta de acceso del archivo o hacer clic en el nombre del archivo de CSS externa para abrir el archivo. 5. Propiedades de CSS enumera los valores de las propiedades definidas en el estilo seleccionado en Reglas aplicadas, as como todas las propiedades no definidas. Haga doble clic en una propiedad para ir al cdigo de dicho conjunto de reglas. 6. Si se selecciona el botn Mostrar lista ordenada por categoras y el

botn Mostrar propiedades definidas encima , las propiedades del estilo seleccionado se agrupan al principio de la lista de propiedades de cada categora. 7. Para definir el valor de una propiedad, puede escribir un valor en el cuadro que se encuentra junto al nombre de la propiedad, o sealar el cuadro y luego hacer clic en el botn de flecha desplegable , si est disponible, o seleccionar el botn y seleccionar un valor. 8. Las propiedades atravesadas por una lnea roja estn definidas por el estilo seleccionado, pero, o bien la seleccin actual no las hered, o bien otro estilo las anul. Para ver informacin en pantalla ms detallada, seale una propiedad tachada. La informacin en pantalla de las propiedades anuladas identifica la propiedad que las anul.

Panel de tareas Aplicar estilos El panel de tareas Aplicar estilos permite aplicar, quitar, modificar y eliminar estilos y cambiarles el nombre; adjuntar o desasociar hojas de estilos en cascada (CSS) externas; seleccionar todas las apariciones de un estilo e ir al cdigo que contiene el conjunto de reglas de un estilo. El panel de tareas Aplicar estilos muestra cada estilo de acuerdo con las reglas del mismo, para que pueda identificar rpidamente el estilo con el que desea trabajar simplemente por su apariencia visual. Cuando abre una pgina Web, el panel de tareas Aplicar estilos enumera los estilos que estn definidos en todas las hojas de estilos en cascada (CSS) de la pgina, incluidas las CSS externas, internas y en lnea. Los estilos basados en clases e Ids. Aparecen debajo del nombre del archivo .css externo que los contiene o en Pgina actual, si el estilo est en una CSS interna. Los estilos basados en elementos se organizan del mismo modo pero aparecen de un encabezado diferente denominado Selectores contextuales, debajo de la lista de estilos basados en clases o en Ids. Puede configurar el panel de tareas para que muestre todos los estilos o restringirlo de forma que muestre nicamente los que se usen en la pgina Web actual o en la seleccin actual de la pgina. Independientemente de las opciones que haya seleccionado, los estilos basados en elementos y los estilos en lnea slo aparecen en el panel de tareas cuando se coloca el cursor en el contenido que usa ese estilo o se selecciona. Puede ordenar la lista de estilos que aparecen en el panel de tareas Aplicar estilos y tambin restringir la lista para que slo muestre los estilos que se utilizan en la pgina Web actual o en la seleccin actual. Si un estilo concreto es difcil de ver con el fondo blanco del panel de tareas, puede seleccionar un color para que aparezca en el panel de tareas detrs de los estilos que no contengan una propiedad de fondo. Sugerencia Para mostrar temporalmente todas las reglas de un estilo en una ventana flotante al lado del puntero, seale el estilo en el panel de tareas Aplicar estilos.

Panel de tareas Aplicar estilos

1. Borrar estilos quita todos los estilos basados en clases y en lnea de la seleccin actual. 2. Pgina actual muestra los estilos basados en clases e Ids. de los archivos de CSS internas y de CSS externas importadas. 3. Archivo de CSS externa importada en la pgina Web actual. 4. Estilo definido en la CSS interna de la pgina Web actual. 5. Archivo de CSS externa vinculado desde la pgina Web actual. 6. Se muestra un borde rectangular slido alrededor de los estilos que se usan

en la seleccin actual. 7. Selectores contextuales muestra los estilos basados en elementos que se usan en la seleccin actual. 8. Estilos basados en clases e Ids. contenidos en el archivo de CSS externa vinculado (events.css). 9. Cada estilo tiene un men desplegable que permite realizar muchas tareas relacionadas con el estilo. Seale un estilo y haga clic en la flecha o haga clic con el botn secundario en un estilo. Los iconos que aparecen junto a cada estilo en el panel de tareas Aplicar estilos identifican el tipo de estilo y si ste se usa en la pgina Web actual. Iconos del panel de tareas Aplicar estilos Icono Descripcin Se muestra un punto rojo junto a los estilos basados en Ids. Se muestra un punto verde junto a los estilos basados en clases. Se muestra un punto azul junto a los estilos basados en elementos. Se muestra un punto amarillo junto a los estilos en lnea. Se muestra un crculo alrededor de un punto coloreado para marcar los estilos que se usan en la pgina Web actual. Se muestra una arroba junto a las hojas de estilos en cascada externas importadas. Para ordenar la lista de estilos en el panel de tareas Aplicar estilos

En el panel de tareas Aplicar estilos, haga clic en Opciones y realice una de estas acciones:

Para mostrar los estilos de acuerdo con el orden en que aparecen en la CSS, seleccione Clasificar por orden. Para mostrar los estilos alfabticamente y de acuerdo con el tipo de estilo (basados en clases o en Ids.), seleccione Clasificar por tipo.

Para mostrar u ocultar los estilos en el panel de tareas Aplicar estilos

En el panel de tareas Aplicar estilos, haga clic en Opciones y siga uno de estos procedimientos: Para mostrar todos los estilos contenidos en la CSS externa, interna y en lnea de la pgina actual, seleccione Mostrar todos los estilos. Para mostrar slo los estilos que se usan en la pgina Web actual, seleccione Mostrar estilos utilizados en la pgina actual. Para mostrar slo los estilos que se usan en la seleccin actual de la pgina, seleccione Mostrar estilos utilizados en la seleccin.

Nota Los estilos basados en elementos y los estilos en lnea slo aparecen en el panel de tareas Aplicar estilos cuando se coloca el cursor en contenido que usa el estilo o se selecciona contenido que usa el estilo. Panel de tareas cuadro de herramienta El panel de tareas Cuadro de herramientas sirve para arrastrar elementos HTML, controles de formulario y controles ASP.NET a las pginas Web. El cdigo que crea Microsoft Expression Web cuando se arrastra un elemento a la pgina depende de la declaracin de tipo de documento de la misma. Por ejemplo, si el tipo de documento es HTML, cuando arrastre un elemento Break a la pgina, Expression Web crear una etiqueta <br>. Si el tipo de documento es XHTML, Expression Web crear una etiqueta <br />. Para obtener ms informacin acerca de los tipos de documentos, vea Establecer la informacin de tipo de documento.

Panel de tareas Cuadro de herramientas

1. Arrastre elementos HTML desde esta seccin del panel de tareas Cuadro de herramientas a la pgina. 2. Arrastre controles de formulario desde esta seccin del panel de tareas Cuadro de herramientas a la pgina. Para obtener ms informacin, vea Formularios. 3. Arrastre controles ASP.NET desde esta seccin del panel de tareas Cuadro de herramientas a la pgina. Para obtener ms informacin, vea Controles estndar ASP.NET. Para cambiar la presentacin de los elementos en el panel de tareas Cuadro de herramientas

Haga clic con el botn secundario en la ficha del nombre o en la barra de ttulo del panel de tareas Cuadro de herramientas y siga uno de estos procedimientos:

Para mostrar los iconos y nombres, haga clic en Iconos y nombres. Para mostrar slo los iconos, haga clic en Slo iconos. Para mostrar slo los nombres, haga clic en Slo nombres.