Universidad Interamericana de Puerto Rico

Recinto de Aguadilla

Diseo de Pgina Web

Taller de Microsoft Expression Web

Profa. Maritza Quiones Vargas

ADSO 4500
Telecomunicaciones en la Oficina

Introduccin

Segn avanza la tecnologa y los medios

de telecomunicaciones se van creando
programas ms avanzados para el diseo
de sitios y pgina Web.
Se utilizaba programas, como: Microsoft
Publisher, Microsoft Front Page y los ms
nuevo en el mercado lo es Microsoft
Expression Web.

Existen un sin nmero de programas utilizados

para la preparacin de pginas Web, que se
ajustan a las necesidades de los diseadores.

Microsoft Front Page

Programa utilizado para crear pginas de Web

de forma sencilla y sin tener conocimientos
previos en HTML.
Creado originalmente por la compaa
Vermeer Technologies Inc. y adquirido por
Microsoft en 1996.
Utiliza la tecnologa WYSYWYG (What you see
is what you get).
Esto quiere decir que lo que se visualice, lo
que ves en pantalla, es lo que se obtiene.
Este editor permite crear pginas a travs
de un interfaz grfico que simplifica la
entrada de texto y grficos directamente
en el rea de escritura.

Microsoft Expression
Web

Editor HTML utilizado para crear pginas Web

modernas.
Creado para sustituir al Programa Front Page
2003.
Basada en una poderosa herramienta de
diseo que contiene estndares de calidad
para el Web. Utiliza el mecanismo WYSIWYG
para modificar las pginas Web.
Permite disear, desarrollar y publicar sitios
web atractivos y con mltiples
caractersticas.

Expression Web

Fue lanzado en el mercado para el 2006 y es

compatible con CSS, Microsoft Silverlight, entre
otros.

CSS (Cascading Style Sheets = hojas de estilo en

cascada). Es un lenguaje usado para definir la
presentacin de un documento estructurado escrito
en HTML. Separa los elementos.
Microsoft Silverlight es un complemento para varias
plataformas y exploradores que ofrece aplicaciones
con gran interactividad y vdeo para Web

Utiliza la caracterstica de vista previa para ver

vistas reales de la pgina con el explorador
instalado en el equipo, justo en Expression Web.

Cmo inicial el Programa

Desde el botn de Inicio

o Start Luego coloca
el cursor sobre
Programas o
Programs

Microsoft Expression

Microsoft
Expression Web
Desde el icono de
Access

Start

Pantalla Inicial
1

2
2

Partes de la Pantalla
Inicial
1

Mens y Barras de Herramientas

Permiten realizar tareas como guardar archivos y

sitios, generar informes y cambiar la forma de
ver una pgina.

Paneles de Tareas

Permiten realizar tareas comunes, como

administrar los archivos de un sitio, agregar
etiquetas a una pgina y administrar estilos.
Al iniciar el programa se muestran los paneles
Lista de carpetas, Propiedades de etiqueta,
Aplicar estilos y Cuadro de herramientas,
acoplados a los lados de la ventana de edicin.

Cont. Partes de la Pantalla

Inicial

Bajo el men Paneles se encuentran todos los

paneles que le ayudar a la edicin de la pgina.
Puede tener varios paneles abiertos a la vez.
Los paneles estn organizados en seis grupos.
Aparecen como paneles combinados y ocupan el
mismo espacio, ya que aparecen una detrs del
otro y se activan al seleccionar la pestaa.
Para devolver los paneles a la apariencia original
en el rea de trabajo, tienes que ir al men
Paneles, y seleccionar Restablecer diseo
del rea de trabajo.

Cont. Partes de la Pantalla Inicial

3

Ventana de Edicin

Permite editar visualmente las pginas o editar

directamente el marcado de la pgina.

Barra de estado

Me muestra informacin importante sobre los

sitios y las pginas.

Modo de ediciones

Modo de aplicaciones de estilo

Modo de representacin
Modo de tamao de pgina

Tamao del archivo

Esquema HTML
Esquema CSS

Ventana de Edicin

La pgina se crea y se edita en la ventana de

edicin. Al abrir una pgina Web se crea una
pestaa titulada Site View (Vista Sitio).

Crear Pgina Web

Para crear sitios Web

buscas Archivos (File).
Luego en New y te
presenta varias opciones
para disear la Pgina
Web.
Page (Pgina en Blanco)
Web Site (Provee varios
modelos de pginas, entre
ellos las
Plantillas/Templetes)
Otros

Pantalla New Web Page

Esta pantalla contiene dos pestaas.

En la primera pestaa Page contiene modelos
de pginas en blanco utilizando diferentes estilos.
La segunda pestaa Web Site contiene dos
secciones

General pginas en blancos que te permite importar o

exportar pginas
Templates contiene modelos de diferentes pginas
Web o sitios Web. Estos template contiene enlaces a
diferentes pginas dentro del sitio Web.

En esta misma pantalla provee para que

selecciones la localizacin del nuevo sitio Web a
Crear. Debes guardar el sitio Web con otro nombre
en la carpeta creada.
Una vez seleccionado la localizacin, presionas Ok.

Ejercicio - Taller
Crear una Pgina Web Utilizando
Plantillas (Templete)
Abra el Programa Expression Web
Busca File

New
Web Page
Templete

En la siguiente pantalla selecciona

Templete

Escoge el Templete que ms te guste y

que se acople al sitio Web que vas a
disear.
Especifica el lugar donde guardar tu
sitio Web

Browse Pendrive

Luego, coloca tu nombre despus de

la direccin que aparece en la barra
Location
Presiona Ok.

Una vez abra el sitio Web, ve al panel

titulado Folder List y selecciona
Default.htm para que puedas ver la
pgina en la Ventana de Edicin.

Procede a editar la pgina segn la

informacin que hayas seleccionado
para tu trabajo.

Notars que al pasar el cursor sobre

algunas reas de la pgina, como lo
es el encabezado, aparece el smbolo
. Esto quiere decir que esas
reas no pueden ser modificadas
mediante la pgina Default.htm.

Para editar esas reas debes seleccionar

en el panel titulado Folder List y
selecciona master.dwt para que puedas
ver la pgina en la Ventana de Edicin.
Desde la pgina
master.dwt
puedes editar el
ttulo y la tabla de
contenido y otras
reas.

Procede a hacer los cambios

necesarios en las pginas
default.htm y master.dwt.
Una vez terminado de hacer los
cambios, guardas los cambios.
Para ver tu sitio Web creado, ve a la
lupa que se encuentra en la barra de
herramientas y presiona la misma.

El sitio Web creado abrir en bajo el

programa Windows Internet Explorer.

Recuerda que debes guardas los cambios

realizados en las pginas default.htm y
master.dwt. Para ver tu pgina debes estar
en la pgina default.htm antes de
presionar la lupa

Referencias

Expression Web. (2010). Disponible en lnea en

http://es.wikipedia.org/wiki/Expression_Web
Free CSS Template. (2008). Disponible en lnea en
http://www.free-css-templates.com/
Lpez, Miguel. (2009). Curso de diseo y autora de
sitios con Microsoft Expression Web. Disponible en
lnea en
http://www.desarrollaconmsdn.com/msdn/CursosOnl
ine/Curso_Expression_Web/index.html
Microsoft Expression Web 3. (2009). Disponible en
lnea en
http://expression.microsoft.com/es-es/library/dd440
765.aspx
Webquest, Weblog, Front Page y Servidor. (2009).
Disponible en lnea en