Expression Web

Dra. María G. Rosa-Rosario

Tabla de contenido

ObjetivosIntroducciónVentana de “Expression Web” 2007Creación de páginaImágenesFondosMúsicaAlmacenamientoCreación de botones o barras de navegaciónEnlacesReferencias

Objetivos

Después de completar el taller los participantes podrán:Definir Expression Web.Crear páginas sencillas de Web.Almacenar los páginas creadas.Enlazar las páginas trabajadas.Ver sus páginas en el navegador.

Introducción

Expression Web es un editor visual con el cual podemos crear páginas Web de una forma visual.

El programa le permite concentrarse en el diseño de la página de Web.

El usuario tiene la oportunidad de crear sus páginas sin tener conocimiento de programación.

El programa es parte del paquete de Microsoft Office, por lo tanto como estamos familiarizados con un procesador de texto, ejemplo Word, se le hará más fácil aprenderlo.

Permite diseñar y modificar el sitio de Web.Trabajar cada página individualmente y ayuda en

su edición y mantenimiento.

Iniciar Microsoft Expression Web 2007Existen dos formas de inicar el programa:

Haga clic al botón Start situado en la esquina inferior izquierda de la pantalla.

Desde el botón de inicio “ ”.Pulsamos “programs” en el menú que se despliega

buscamos “microsoft office” y en el otro menú que se despliega seleccionamos “Microsoft Expression Web 2007” .

2.También puede acceder el programa desde el escritorio ¨desktop¨ .

Cuando pulsamos este botón o accedemos el programa a través del botón de inicio verá la ventana que aparece en la siguiente diapositiva.

Inicio del programa

Ventana de “Expression Web”

Continuación: Ventana de Expression Web

Barra de títuloIndica el programa y el nombre del documento con el que se está trabajando.

En la esquina superior derecha, se encuentran los botones para minimizar, maximizar y cerrar la aplicación

minimizar cerrar

maximizar o restaurar

Continuación: Ventana de Expression Web

Barra de menúPermite acceder todas las operaciones de

despliegue.

Barra estándarProvee acceso director a opciones de funciones

de uso frecuente.

Continuación: Ventana de Expression Web

Barra de formatoPermite trabajar con el tamaño el estilo, tamaño del texto,

negrilla, itálico, subrayado, alineación y otras funciones que le ayudarán a crear atractivamente el documento.

Modos de Edición de páginadiseño-permite entrar la información.dividir-permite ver el diseño y los códigos.Código-permite ver los códigos de HTML.Vista previa-permite ver la página como la veríamos en el

navegador.

Continuación: Ventana de Expression Web

Selector de etiquetas Permite seleccionar, editar la etiqueta y ver

contenido de la misma.

Pestaña de página Muestra el nombre de la página con la

estamos trabajando.

Área de trabajo

Cuando aparezca la ventana observe que inmediatamente tenemos ante nosotros el área de trabajo y los paneles de ejecución de tareas.

Menús y barras de herramientasUn menú muestra una lista de comandos.

Algunos de estos comandos tienen imágenes junto a ellos para que se pueda asociar rápidamente el comando a la imagen. La mayoría de los menús se encuentran en la barra de menús, que es la barra de herramientas situada en la parte superior de la pantalla. Las barras de herramientas pueden contener botones, menús o una combinación de ambos.

Menús y barras de herramientas

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.

Ventana de ediciónLos 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.

Para cerrar la página que está modificando, haga clic en el botón Cerrar.

Barra Selector rápido de etiquetas. Puede hacer clic en una etiqueta para seleccionarla o en la flecha abajo situada junto a ella para disponer de más opciones.

Puede utilizar los botones Diseño , Dividir y Código para cambiar la vista de la página.

Vistas de páginaDiseñ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).

Vistas de páginaDividir

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.

Vistas de página

Vistas de páginaCó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.

Creación de página

Una vez activamos el programa.Recuerde que puede activar el mismo desde

el icono que aparece en el “desktop” .Si el icono aparece en esta ventana, puedes

presionar el botón de inicio, .Buscas en todos los programas “microsoft

office”, de la lista que aparece selecciona “Expression Web”.

Continuación: Creación de página

Presione el menú desplegable de “File”, seleccione “New” y luego “Page”.

Este proceso le permitirá seleccionar el formato de su página.

Continuación: Creación de página

El recuadro de la izquierda nos permite seleccionar diferentes formatos.

Pulsaremos la pestaña de marcos de página, “Frames Pages”.

Al pulsar “Frame Page”, vemos un recuadro como el que aparece a la izquierda.

En la columna del centro podemos analizar cual de los marcos utilizaremos para nuestra primera página.

La misma nos servirá de tabla de contenido para nuestra página de Web.

Continuación: Creación de página

Luego de haber seleccionado el formato deseado, estamos listas para comenzar para entrar la información.

Insertar gráfico En la ventana que trabajamos

anteriormente pulse “new page”. Esto creará un área donde se nos

permite trabajar. Ahora vamos a insertar un gráfico. En la barra de menú seleccione

“Insert”, observe que al hace la selección verá un menú desplegable, busque “picture” y luego “from file”.

Esto le permitirá buscar su foto o “clip art”.

Haga su selección presione el botón de “insert” y ubique la foto en el lugar que desee.

Con el botón derecho del “mouse”seleccione “picture properties” para facilitar el manejo de la ubicación de la foto.

Añadir fondos Para insertar un fondo

“background” en la página seguiremos el siguiente proceso:En la barra de menús

desplegables pulsamos “Format”, verá el recuadro que se presenta a la derecha.

Mueva el apuntador hacia abajo y seleccione “background”, verá un recuadro como el que aparece a la derecha, activamos “background”, presionando “browse”, buscamos los mismos en la carpeta donde los tenga almaceneado.

Además, puede ir al menú desplegable de “File” , seleccionar “properties”, luego “formatting”. Esto le permitirá trabajar con el “background”.

Continuación: Añadir fondos

Cuando seleccionamos “browse” aparecerá el recuadro que aparece a la derecha, aquí buscamos el directorio donde tenemos almacenado nuestra foto.

Pulse dos veces encima de la carpeta imágenes y selecciona el que deseo.

Luego pulsa abrir “open”.

Música

Puede encontrar formatos de música midi gratis en la Internet.

Para insertar una música en la página seguiremos el siguiente proceso:En la barra de menús

desplegables pulsamos “File”, verá el recuadro que se presenta a la derecha.

Mueva el apuntador hacia abajo y seleccione propiedades “Properties”, verá un recuadro como el que aparece a su derecha, busque en el mismo “background sound”, en el espacio al lado de “Location”, seleccione “browse”, ya que tenemos la música en una carpeta que llamamos música.

Continuación: Música

Cuando seleccionamos “browse” aparecerá el recuadro que aparece a la derecha, aquí buscamos el directorio donde tenemos almacenado nuestra foto.

Pulse dos veces encima de la carpeta música y selecciona la música deseada.

Luego pulsa abrir “open”.

Continuación: Música

Cuando presiona abrir ”open” verá el recuadro de la derecha, presione “OK”.

Si su equipo tiene activado el sonido, disfrute de la música.

AlmacenamientoPara almacenar la

primera página, seleccionamos archivo, “File”, almacenar como, “save as”.

Elija donde almacenará almacenar en, “save in”, puede utilizar disco “pendrive” o el lugar que usted tenga destinado con este fin.

A esta primera página se le asignará el nombre de “index”,de donde se parte para navegar.

En el nombre de archivo “file name”, escriba “index”.

Luego presione almacenar, “Save”.

Continuación: Almacenamiento

Para la página de la dos en adelante, sigue el mismo proceso anterior, pero seleccionará un nombre corto para almacenar.

Es importante que los nombres sean fáciles de recordar, de manera que cuando se trabajen los enlaces entre página los recordemos.

Creación de botones o barras de navegación

Para insertar botón o barra de navegación en la página seguiremos el siguiente proceso:En la barra de menús

desplegables pulsamos “Insert”, verá el recuadro que se presenta a la derecha.

Mueva el apuntador hacia abajo y seleccione “Web Componet”, un recuadro como el que aparece a la derecha, seleccione “Interactive button”.

Creación de botones o barras de navegación

Al seleccionar “Interactive button”, pulse ”finish”, verá el siguiente recuadro.

De las alternativas que se le presentan seleccione la que usted desee utilizar.

En el espacio provisto para entrar texto, “Text”, teclee el nombre a la barra.

Creación de botones o barras de navegación

En este momento podemos enlazar esta barra o botón con el documento deseado.

El proceso es el siguiente: Presione “browse” y busque

la carpeta donde tiene el documento que desea enlazar.

Pulse dos veces encima de la carpeta deseada.

Seleccione el documento.

Creación de botones o barras de navegación

Antes de salir del recuadro, indique al programa como desea que los demás vean la página.

Seleccione “Target Frame”, le programa le provee alternativas, las cuales puede ver en el recuadro de la derecha.

Seleccione la deseada, presione “OK” en el recuadro y luego “OK” en los recuadros anteriores.

Ya tiene su barra o botón creado enlazado a un documento.

Puede verlo funcionando presionando los botones de “preview”; en la barra de estado

o en la barra de botones estándar .

Enlaces

En el tema anterior trabajamos con enlaces utilizando botones de navegación.

Para crear enlaces puede utilizar texto e imágenes.

A continuación trabajaremos con diferentes tipos de enlaces.con un documentoentre páginascon direcciones de Webcon correos electrónicosentre páginas (enlaces internos)entre páginas utilizando una imagen.con correos electrónicos

Continuación: Enlaces

Con un documento o presentación (el proceso es igual).Para efectos del ejemplo

escribiremos un texto, luego lo sombreas pasando el apuntador por encima, luego presionas el botón de la esfera del mundo con el eslabón, buscas el documento que deseas enlazar en la carpeta que lo tiene almacenado, lo seleciona dando un click encima del nombre, luego decide como deseas que se vea; ”target frame” y presionas “OK”.

Continuación: Enlaces

Entre páginas (enlaces internos)Para efectos del ejemplo

escribiremos un texto, luego lo sombreas pasando el apuntador por encima, luego presionas el botón de la esfera del mundo con el eslabón, buscas la página que deseas enlazar, seleccionas como deseas que se vea; ”target frame” y presionas “OK”.

Continuación: Enlaces Entre páginas utilizando una imagen.

Esta vez utilizaremos una imagen.Selecciona la imagen que utilizarás, la pones en el lugar deseado. Activa la imagen, dando un click encimas, podrás ver unas puntos en las

esquinas de la imagen y otros lugares, luego presionas el botón de la esfera del mundo con el eslabón, buscas la página con la que deseas hacer el enlace, luego decide como deseas que se vea; ”target frame” y presionas “OK”.

Continuación: Enlaces

Con direcciones electrónicas.Con direcciones electrónicas.Para efectos del ejemplo

escribiremos un texto, El Nuevo Día, luego lo sombreas pasando el apuntador por encima, luego presionas el botón de la esfera del mundo con el eslabón, escribe la dirección electrónica en la línea de “address”, luego decide como deseas que se vea; ”target frame” y presionas “OK”.

Continuación: Enlaces

Con correos electrónicos.Esta vez utilizaremos una

imagen.Selecciona la imagen que

utilizarás, la pones en el lugar deseado.

Activa la imagen, dando un click encimas, podrás ver unas puntos en las esquinas de la imagen y otros lugares, luego presionas el botón de la esfera del mundo con el eslabón, escribe la dirección de correo electrónico en la línea de “address”, luego decide como deseas que se vea; ”target frame” y presionas “OK”.

Espacios gratuitos en la Web

Los siguientes sitios Web ofrecen espacio gratuito para colocar páginas Web.Tripod http://www.tripod.com/Angelfire http://www.angelfire.com/Xoom http://www.xoom.com/home/

Referencias

Shelly, G. B., Campbell, J. T., Rivers, O. (2010). MicrosoftExpression Web 2. Comprehensive Concepts and Techniques. Course Tecnology, Cengage Learning.

Manuales en español. Accedida el 21 de octubre de 2010, en http://www.manualespdf.es/manual-microsoft-expression-

web-designer/Cómo hacer una página Web Accedida el 21 de

octubre de2010, en http://www.duiops.net/curso/comohacer.htm