• Author / Uploaded
• Oscar Elias

• Categories
• Hojas de estilo en cascada
• Hipervínculo
• Point and Click
• Red mundial
• Tecnología

Citation preview

UNIVERSIDAD FRANCISCO GAVIDIA FACULTAD DE INGENIERIA Y ARQUITECTURA TECNOLOGIA DE LA INFORMACION DE LAS COMUNICACIONES III COMO TRABAJAR CON EXPRESSION WEB WEB. Internet y páginas web Internet es una gran red de redes,, también llamada Supercarretera de la información.. Es el resultado de la interconexión de miles de computadoras de todo el mundo. Todas ellas comparten los protocolos de comunicación,, es decir que todos hablan el mismo lenguaje para ponerse en contacto unas con otras. Los servicios básicos ofrecidos ahora por Internet son correo electrónico, electrónico noticias en red, acceso a computadoras remotas y sistemas de adquisición de datos, y la capacidad para transferir información 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 más moderna m de ofrecer información. Ell medio más potente. La información se ofrece en forma de páginas electrónicas. mente Web, permite saltar de un lugar a El World Wide Web, WWW, W3 o simplemente otro en pocos segundos.. Lo más 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 estándar. Barra de direcciones. Menú de la página Web. Imágenes que posee las páginas Web Enlaces a otros sitios Web.

1

2

3

4

5

Con referencia all concepto del literal No. 5 debemos tener una idea clara de lo que es un enlace, un hipervínculo e hipertexto. Un enlace o link es texto o imágenes en un sitio web que un usuario puede dar clic para tener acceso o conectar con otro documento. Los enlaces son como la tecnología que conecta dos sitios web o dos páginas web. En el navegador se ven como palabras subrayadas subrayadas. Un hiperenlace (también llamado enlace, vínculo, hipervínculo) es un elemento elemen de un documento electrónico que hace referencia a otro recurso, por ejemplo, otro documento o un punto específico del mismo o de otro documento. Hipertexto (en inglés hypertext hypertext)) es un sistema para escribir y mostrar texto que enlaza a información adicio adicional sobre ese texto. El término fue acuñado por Ted Nelson para referir a un sistema no lineal de buscar y conseguir información basado en enlaces asociativos entre documentos. La World Wide Web utiliza el protocolo de transferencia de hipertexto (HTTP) ( para enlazar páginas web y archivos multimedia.

Páginas Web Las páginas Web son los documentos básicos del World Wide Web. En Microsoft® Expression® Web, dispone de varias opciones para crear páginas Web. Puede establecer el tipo de página predeterminado que se creará cuando haga clic en el botón Nuevo documento

o use el método abreviado de teclado CTRL+N.

Después de haber creado una página, podrá configurar las propiedades de la misma, como el título de la página. El título de una página es el nombre que aparece en la barra de título de la mayoría de los exploradores Web, titulares de página y barras de vínculos. El título puede ser distinto del nombre de archivo. Muchos motores de búsqueda utilizan palabras clave y descripciones de página para indizar los sitios Web. Es importante usar siempre Expression Web al cambiar de nombre archivos y carpetas de manera que los vínculos 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 automática. Si cambia el nombre de un archivo o carpeta con el Explorador de Microsoft Windows, los hipervínculos con origen y destino en dicho archivo (o archivos de esa carpeta) no se actualizarán. 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 sólo caracteres ASCII sencillos.

Para crear una nueva página Web Siga uno de estos procedimientos: •

En el menú Archivo, seleccione Nuevo y, a continuación, haga clic en Página. En el cuadro de diálogo Nuevo, seleccione sitio web y haga clic en Aceptar.

•

En el menú Archivo, haga clic en Nuevo. En el cuadro de diálogo Nuevo, seleccione el tipo de página en la ficha Página y haga clic en Aceptar.

•

Presione CTRL+N.

•

En la barra de tareas Común, haga clic en el botón Nuevo documento

.

Luego se abrirá el cuadro de dialogo nuevo

GENERAL: Muestra las distintas opciones para crear una página web en blanco

PLANTILLAS: Muestra las opciones de formatos de páginas web previamente elaboradas con el formato y una serie de páginas web que las componen ya que son sitios web completos. Las opciones que muestra son de Organización, de pequeña 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 ubicación del sitio ya que en esa carpeta se almacenarán todas las imágenes y paginas que utilicemos.

Cambiar las propiedades de una página Web Una vez hemos creado un sitio web podemos modificar algunas propiedades 1. En la vista Diseño, en el panel de tareas Lista de carpetas, haga clic con el botón secundario en el archivo de página Web y, a continuación, haga clic en Propiedades. 2. En el cuadro de diálogo Propiedades de página, en la ficha General, haga lo siguiente:

Elemento

Acción

Título

Escriba el título de la página.

Descripción

Escriba la descripción de la página.

Palabras clave Escriba las palabras clave de la página.

Cambiar el nombre de una página o carpeta 1. En el panel de tareas Lista de carpetas, haga clic con el botón secundario en el archivo o la carpeta y, a continuación, haga clic en Cambiar nombre. 2. En el cuadro Cambiar nombre, escriba el nuevo nombre. Para guardar una página Web

Siga uno de estos procedimientos: •

En la barra de herramientas Común, haga clic en el botón Guardar

.

•

Haga clic con el botón secundario en la ficha de la parte superior de la ventana de edición y, a continuación, haga clic en Guardar.

•

En el menú Archivo, haga clic en Guardar.

•

Para guardar una página Web en una ubicación diferente o con otro nombre distinto, haga clic en Guardar como en el menú Archivo.

Nota Si se añaden imágenes, archivos de sonido u otros objetos a la página, Expression Web le pedirá que los guarde al guardar la página.

Ventana de edición En Microsoft® Expression® Web, las páginas Web se modifican en la ventana de edición. Cuando abre un sitio Web, Expression Web agrega una ficha Sitio Web a la ventana de edición. Para obtener más información, vea Vistas de sitio Web. Ventana de edición 1 2 3

4

1. Los archivos que ha abierto aparecen como fichas en la parte superior de la ventana de edición. El archivo que está modificando aparece resaltado. Sugerencia Para pasar de una página a otra, presione CTRL+TAB o CTRL+MAYÚS+TAB. 2. Para cerrar la página que está modificando, haga clic en el botón Cerrar

.

3. Barra Selector rápido 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 más opciones. Para obtener más información, vea Selector rápido de etiquetas. 4. Use los botones Diseño , Dividir y Código para cambiar la vista de la página. Para obtener más información, vea Vistas de página Código y Dividir. Sugerencia Para pasar de una vista a otra, presione CTRL+RE PÁG o CTRL+AV PÁG. Puede modificar las páginas Web en tres vistas. Para obtener más información, vea Vistas de página Código y Dividir. Vistas de página Diseño Puede diseñar y modificar páginas Web con las herramientas de diseño de un modo similar a la creación WYSIWIG (lo que se ve es lo que se imprime). Sugerencia Para mostrar las etiquetas HTML en la vista Diseño, presione CTRL+/. Dividir Puede revisar y modificar el contenido de la página Web en un formato de pantalla dividida que ofrece acceso a las vistas Código y Diseño simultáneamente. Sugerencia Cuando trabaje en la vista Dividir, para aplicar los cambios que realice en la vista Código a la vista Diseño, presione F5.

Código Puede ver, escribir y modificar las etiquetas HTML directamente. Gracias a las características de código optimizadas de Expression Web, podrá crear código HTML limpio y le resultará más fácil quitar el código que no desee utilizar.

Área de trabajo El área de trabajo de Microsoft® Expression® Web proporciona las herramientas necesarias para editar páginas y sitios Web. El área de trabajo se puede personalizar, es decir, puede cambiar su aspecto para adaptarlo a su forma de trabajar. A continuación 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 diseño del área de trabajo en el menú Paneles de tareas.

Barras:

BARRA DE TITULO

BARRA DE ESTANDA

BARRA DE MENU

BARRA DE FORMATO

Usar las barras de herramientas Microsoft® Expression® Web personaliza automáticamente las barras de herramientas en función 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 más recientemente. Cuando se usa un botón que no se muestra en la barra de herramientas, ese botón 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 botón 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 botón de la barra de herramientas, puede que tenga que habilitar la edición para el idioma al que se aplica el botón.

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. También puede mover la barra de herramientas a una ubicación distinta del borde de la ventana del programa, de modo que se convierta en flotante.

Nota Puede maximizar la ventana del programa para mostrar más botones de la barra de herramientas haciendo clic en el botón Maximizar . Para mostrar una barra de herramientas •

Haga clic con el botón 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 botón secundario en la barra de herramientas y desactive la casilla de verificación situada a la izquierda de la barra de herramientas que desee ocultar. Si la barra de herramientas es flotante, haga clic en el botón 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 título de una barra de herramientas flotante a otra ubicación.

Para acoplar una barra de herramientas •

Arrastre la barra de títulos 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 tamaño y la ubicación de otras barras de herramientas de la misma fila. Para cambiar el tamaño de una barra de herramientas •

Para cambiar el tamaño de una barra de herramientas flotante, mueva el puntero sobre un borde hasta que cambie a una flecha de dos puntas y, después, arrastre el borde de la barra de herramientas.

•

Para cambiar el tamaño 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 tamaño 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 disposición 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 ubicación y el tamaño de cada panel de tareas para adaptarlo a sus necesidades. Si se organizan los paneles de tareas con una distribución personal, Expression Web usa de forma automática esa distribución 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 página 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 página Web, el panel de tareas permite ver con rapidez todos los estilos que se usan en la selección actual de la página 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 botón 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 botón Mostrar lista ordenada por categorías organiza la lista de propiedades en categorías, como por ejemplo, Fuente y Bloque. El botón Mostrar lista ordenada alfabéticamente propiedades por orden

organiza la lista de alfabético.

El botón 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 botón Resumen muestra, debajo de la columna Propiedades de CSS, una lista de todas las propiedades que afectan a la selección 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

selección 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. Señale un selector para ver todo el conjunto de reglas en la información en pantalla. Seleccione un selector para mostrar sus propiedades en Propiedades de CSS. Haga doble clic en un selector para ir al código de dicho conjunto de reglas. 4. Esta columna muestra la etiqueta a la que se aplica cada estilo y el selector del estilo. Señale una fila de la columna para ver la regla aplicada. La columna se denomina Página 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 señalar 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 código de dicho conjunto de reglas. 6. Si se selecciona el botón Mostrar lista ordenada por categorías

y el

botón Mostrar propiedades definidas encima , las propiedades del estilo seleccionado se agrupan al principio de la lista de propiedades de cada categoría. 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 señalar el cuadro y luego hacer clic en el botón de flecha desplegable , si está disponible, o seleccionar el botón y seleccionar un valor. 8. Las propiedades atravesadas por una línea roja están definidas por el estilo seleccionado, pero, o bien la selección actual no las heredó, o bien otro estilo las anuló. Para ver información en pantalla más detallada, señale una propiedad tachada. La información 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 código 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 rápidamente el estilo con el que desea trabajar simplemente por su apariencia visual. Cuando abre una página Web, el panel de tareas Aplicar estilos enumera los estilos que están definidos en todas las hojas de estilos en cascada (CSS) de la página, incluidas las CSS externas, internas y en línea. Los estilos basados en clases e Ids. Aparecen debajo del nombre del archivo .css externo que los contiene o en Página 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 página Web actual o en la selección actual de la página. Independientemente de las opciones que haya seleccionado, los estilos basados en elementos y los estilos en línea sólo 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 también restringir la lista para que sólo muestre los estilos que se utilizan en la página Web actual o en la selección actual. Si un estilo concreto es difícil de ver con el fondo blanco del panel de tareas, puede seleccionar un color para que aparezca en el panel de tareas detrás 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, señale 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 línea de la selección actual. 2. Página 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 página Web actual. 4. Estilo definido en la CSS interna de la página Web actual. 5. Archivo de CSS externa vinculado desde la página Web actual. 6. Se muestra un borde rectangular sólido alrededor de los estilos que se usan

en la selección actual. 7. Selectores contextuales muestra los estilos basados en elementos que se usan en la selección 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. Señale un estilo y haga clic en la flecha o haga clic con el botón 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 página Web actual. Iconos del panel de tareas Aplicar estilos Icono Descripción 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 línea. Se muestra un círculo alrededor de un punto coloreado para marcar los estilos que se usan en la página 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 alfabéticamente 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 línea de la página actual, seleccione Mostrar todos los estilos.

•

Para mostrar sólo los estilos que se usan en la página Web actual, seleccione Mostrar estilos utilizados en la página actual.

•

Para mostrar sólo los estilos que se usan en la selección actual de la página, seleccione Mostrar estilos utilizados en la selección.

Nota Los estilos basados en elementos y los estilos en línea sólo 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 páginas Web. El código que crea Microsoft® Expression® Web cuando se arrastra un elemento a la página depende de la declaración de tipo de documento de la misma. Por ejemplo, si el tipo de documento es HTML, cuando arrastre un elemento Break a la página, Expression Web creará una etiqueta
. Si el tipo de documento es XHTML, Expression Web creará una etiqueta
. Para obtener más información acerca de los tipos de documentos, vea Establecer la información de tipo de documento.

Panel de tareas Cuadro de herramientas

1. Arrastre elementos HTML desde esta sección del panel de tareas Cuadro de herramientas a la página. 2. Arrastre controles de formulario desde esta sección del panel de tareas Cuadro de herramientas a la página. Para obtener más información, vea Formularios. 3. Arrastre controles ASP.NET desde esta sección del panel de tareas Cuadro de herramientas a la página. Para obtener más información, vea Controles estándar ASP.NET. Para cambiar la presentación de los elementos en el panel de tareas Cuadro de herramientas

•

Haga clic con el botón secundario en la ficha del nombre o en la barra de título 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 sólo los iconos, haga clic en Sólo iconos.

•

Para mostrar sólo los nombres, haga clic en Sólo nombres.