Manual Microsoft Expression Web

Control de documentacin
Ttulo de documento: Microsoft Expression Web
Histrico de versiones
Cdigo: Versin: Fecha: 1.0 18/09/2007
Resumen de cambios:
Cambios producidos desde la ltima versin

Primera versin.
Control de difusin
Responsable: Aprobado por: Firma: Distribucin: Fecha:
Referencias de archivo
Autor: Consultora de reas de conocimiento Nombre archivo: Localizacin: Microsoft Expression Web. Manual Rpido De Usuario.doc
Microsoft Expression Web. Manual rpido de usuario
1 /39
Contenido
Captulo/seccin Pgina
1 2 3 3.1 3.2
Introduccin Conceptos bsicos Funciones elementales Operativa bsica Creando una Web
3 3 3 3 5 5 6 7 7 8 9 9 11 11 13 15 18 22 22 24 25 26 30 31 32 32
3.2.1. Propiedades de pgina 3.2.1.1. 3.2.1.2. 3.2.1.3. 3.2.1.4. 3.2.1.5. General Formato Avanzadas Personalizadas Idioma
3.2.2. Propiedades de fuente 3.2.3. Numeracin y Vietas 3.2.3.1. Propiedades de lista
3.2.4. Crear una tabla 3.2.4.1. 3.3 4 4.1 Propiedades de Celda
Crear nuevo estilo Barra de men Men Archivo
4.1.1. Vista previa en el Explorador 4.2 4.3 4.4 Men Edicin Men Ver Men Insertar
4.4.1. Hipervnculos 4.5 5 Formato Anexo 1: Publicar sitio en carpeta remota
2 /39
Introduccin
El presente documento describe cules son las tareas bsicas que se pueden ejecutar en la explotacin de la herramienta Microsoft Expression Web.
Conceptos bsicos
Microsoft Expression Web es una herramienta de diseo basada en estndares XHTML para la creacin de sitios web y aplicaciones que utilicen ASP.NET 2.0. Expression Web proporciona a los usuarios todo lo necesario para crear sitios web de calidad, para ello utiliza lenguajes diferentes, como pueden ser HTML, DHTML, CSS y XHTML. Esta herramienta nos permitir desarrollar, disear y mantener nuestra Web de forma muy rpida y eficaz, integrando fcilmente cdigo de ASP.NET 2.0 y Visual Studio 2005. Expression Web combina lo mejor de FrontPage y Visual Studio en una interfaz totalmente renovada con la que podremos crear XHTML, CSS, XML, XSLT y ASP.NET 2.0. Para obtener informacin adicional sobre el producto acceder a su sitio Web: http://www.microsoft.com/expression/products/overview.aspx?key=web
3
3.1
Funciones elementales
Operativa bsica
3 /39
Dada su sencillez de uso no resultar en ningn momento complicada su utilizacin ya que posee una interfaz con botones de acceso rpido a las diferentes funcionalidades que se ofrecen. Su ventana principal presenta el siguiente aspecto:
Desde la barra de men se acceder a todas las opciones que nos ofrece esta herramienta.
Debajo de sta, se encuentra la barra de formato, donde aparecern las opciones ms utilizadas por los usuarios. Con ello se crea un acceso rpido a las opciones ms comunes de la aplicacin.
4 /39
3.2
Creando una Web
Vamos a comenzar explicando como crear una Web. El primer paso ser, ir al men Archivo y seleccionar Nuevo y despus Pagina, aparecer una ventana como la siguiente:
Por defecto viene seleccionada la opcin HTML, pero se podrn elegir diferentes tipos de lenguaje. Haciendo un clic encima de cada opcin, aparecer una breve descripcin en la esquina superior derecha, para saber que se va crear en cada momento. Desde aqu se podrn crear estilos y webs con lenguajes diferentes.
3.2.1.
Propiedades de pgina
Una vez creada la pgina en blanco, se pasar a administrar sus propiedades, para ello se deber entrar en el men Archivo y despus en Propiedades. Todas las propiedades aparecern en una nueva ventana y separadas por pestaas.
5 /39
3.2.1.1. General
Dentro de General se encuentran las siguientes opciones:
Ubicacin muestra la direccin donde est guardado el archivo creado. Si an no se ha guardado el trabajo, la direccin determinada ser unsaved:///Sin_ttulo_1.htm. Ttulo muestra el nombre asignado a la pgina. Descripcin de la pgina es una breve descripcin de la pgina web. Palabras clave tambin conocidas como keywords, sern las palabras ms significativas de la web. La adecuada seleccin de estas palabras propiciar un mejor posicionamiento en los buscadores cuando los usuarios realicen sus bsquedas. Ubicacin de base mostrar la pgina principal de nuestra Web. Se podr aadir la direccin deseada. Marco de destino predeterminado da la opcin de predeterminar el marco donde se abrirn las paginas, como se aprecia en la siguiente imagen, se podrn elegir varias opciones:
6 /39
Sonido de fondo, como su propio nombre indica, da la opcin de aadir un sonido alojado en nuestro disco local, de manera que se reproduzca durante al visita a la pgina. Se puede aadir un bucle para que se repita el sonido las veces deseadas.
3.2.1.2. Formato
Dentro de Formato encontramos las siguientes opciones:
Imagen de fondo permite aadir una imagen para establecerla de fondo en la Web. Convertir en marca de agua mostrar la imagen de fondo menos marcada para que no contraste con el contenido de la pgina. Colores permite elegir los colores para el fondo, texto e hipervnculos.
3.2.1.3. Avanzadas
Dentro de Avanzadas aparecern las opciones para establecer los mrgenes de la pgina.
7 /39
3.2.1.4. Personalizadas
Dentro de Personalizadas podremos encontrar las siguientes opciones que nos permitirn aadir variables a la Web. Se trata de marcas avanzadas que para nuestros prototipos no sern interesantes.
8 /39
3.2.1.5. Idioma
Dentro de Idioma se encuentran varias opciones para guardar el documento en otro idioma y codificar el cdigo HTML.
3.2.2.
Propiedades de fuente
El siguiente paso ser elegir la fuente adecuada para la pgina. Mediante el uso del botn derecho del ratn aparecer el siguiente desplegable:
9 /39
Seleccionando la opcin Fuente se accede a la siguiente ventana, que da la opcin de cambiar todas las propiedades de la fuente, pudindola modificar cuando sea necesario.
Se podr cambiar la fuente, el estilo y el tamao. Tambin se podr seleccionar el color de la letra, para que no contraste con el fondo, por ejemplo. Incluso se podrn elegir diferentes efectos para la fuente, que conseguirn que las letras tengan otro formato. Pasando a la siguiente pestaa aparece Espaciado entre caracteres, que como su propio nombre indica servir para elegir el espacio entre cada letra. Se podr seleccionar mediante la lista desplegable o tambin se podr optar por escribir la distancia. Con el desplegable Ubicacin podremos colocar las letras en la posicin preferida pudiendo elegir las opciones mostradas en la imagen.
Todas estas opciones se podrn ver en una vista previa situada en la parte baja de la ventana que tendr este aspecto.
10 /39
Esto es un ejemplo de la opcin subrayado. A medida que se van cambiando las opciones, la vista previa se modifica para que el usuario pueda ver cmo quedar el documento.
3.2.3.
Numeracin y Vietas
El siguiente punto es numeracin y vietas. Se podr acceder a estas opciones mediante el men Formato o mediante los iconos de acceso directo en la barra de formato.
El primero hace referencia a la numeracin y el segundo icono corresponde a las vietas. Aqu se muestra un ejemplo de cada uno de ellos para poder ver la diferencia.
NUMERACION
VIETAS
Con el primero de ellos conseguimos ordenar la lista con nmeros y en el orden que elijamos. Por defecto empezar desde el uno, pero se podra poner que se iniciara la cuenta desde cualquier otro nmero. La segunda opcin son las vietas, con las que se presentar la lista con iconos en lugar de la numeracin de la anterior opcin. Con las dos alternativas se podr cambiar la numeracin e iconos respectivamente para darle otra imagen al proyecto.
3.2.3.1. Propiedades de lista
Una vez creada la lista, se puede seleccionar con el botn encima de la misma y elegir la opcin propiedades de lista. Una vez dentro se podr modificar la configuracin de la lista mediante una ventana como la de la imagen:
11 /39
En esta ventana, Expression Web da la opcin de elegir una imagen alojada en nuestro disco local para ponerla como vieta. Para ello se elige la opcin Especificar imagen y seguido examinar para localizar la imagen. La siguiente pestaa mostrar las diferentes alternativas de vietas prediseadas de las que se dispone.
La eleccin en la siguiente pestaa es la misma que en la anterior pero con nmeros o incluso letras. La nica diferencia es que tenemos la opcin de elegir el nmero con el que empezar la numeracin.
12 /39
3.2.4.
Crear una tabla
La siguiente opcin que dispone esta aplicacin, es para la creacin de Tablas, para ello se har clic en el men desplegable Tabla y a continuacin clic sobre Insertar Tabla.
13 /39
Primero, se seleccionar el nmero de columnas y filas que se van a aadir a la tabla. Despus se elegir la alineacin de la tabla ajustndola a la izquierda, derecha o el centro. Incluso se podr aadir el porcentaje de separacin que tendr con respecto a los bordes de la pgina. Seguido aparece la opcin del margen de celdas. En funcin del valor seleccionado para el margen interno de las celdas variarn las dimensiones de la tabla como se puede apreciar en la siguiente imagen:
La siguiente opcin es el Espaciado Entre Celdas, mediante la que se dar un margen de separacin a las celdas de la tabla. Se puede apreciar en la imagen la diferencia de espacios.
14 /39
El siguiente grupo de opciones permitirn configurar los bordes de la tabla en cuanto a grosor, tamao y color, incluso se podra seleccionar una imagen de fondo. Por ultimo, se podr guardar la parametrizacin de la tabla creada para que las siguientes tablas que se generen tengan las mismas caractersticas. En cualquier caso, todas estas opciones podrn ser modificadas mas adelante presionando en el men Tabla y despus Propiedades de la tabla.
3.2.4.1. Propiedades de Celda
Vistas las posibilidades en la creacin y configuracin de tablas, lo mismo se podr hacer con cada una de las celdas modificando sus Propiedades de Celda. Una vez seleccionada esta opcin, aparecer la siguiente ventana:
15 /39
Las elecciones que dispone esta herramienta son muy parecidas a las propiedades de la tabla, con la diferencia de que los cambios realizados aqu, solo tendrn efecto en las celdas seleccionadas.
Una vez creada la tabla tambin podr modificarse mediante el men desplegable Tabla. La eleccin Insertar permitir aadir; filas, columnas, celdas y un titulo para la tabla creada.
La siguiente eleccin ser Modificar, que se encuentra en el mismo men Tabla.
16 /39
Se podrn combinar y dividir las celdas de una tabla e incluso dividir la propia tabla previa seleccin de las celdas o la tabla a modificar. Autoformato de tablas mostrar una nueva ventana con muchos diseos de diferentes tablas pudiendo elegir el que ms se adecue a la presentacin que se quiera dar.
El panel de vista previa permite ver cmo queda la tabla segn el formato seleccionado (el que aparece en la imagen corresponde al formato estndar).
17 /39
Siguiendo con el men Tabla aparece otra opcin llamada Tablas de diseo, al hacer clic sobre esta opcin se desplegar un men a la izquierda de la aplicacin con tablas completas ya diseadas y con varias opciones de tabla. Se puede apreciar en la siguiente imagen los diseos que podremos utilizar.
Por ltimo en este men, se podr transformar una tabla anteriormente creada en texto plano. Para ello se acceder al men Convertir y elegiremos la opcin deseada. Las opciones de esta seccin nos muestran que se podr convertir fcilmente un texto en tabla o viceversa. 3.3 Crear nuevo estilo
Una de las opciones de las que dispone es crear un Nuevo estilo. Aparecer una nueva ventana con multitud de opciones, como la que aparecen en la imagen.
18 /39
Selector: Sirve para darle un nombre al estilo. Definir En: Con esta opcin se definir en qu documento o parte del documento, se va a aplicar el estilo. Se podr hacer en una hoja nueva, en la actual o podremos abrir una pgina existente para aplicar el estilo elegido. Seleccionando la opcin de abrir una pgina existente, el cuadro de dilogo de la derecha se activar para que el usuario pueda buscar el documento adecuado.
Seguiremos definiendo las opciones de cada pestaa, comenzando por la Fuente, en ella aparecen opciones de todo tipo para modificar la fuente en todos sus aspectos: estilo, color, tamao de letra. Se podrn cambiar todas las letras a maysculas y al revs.
Pasando a la siguiente pestaa aparecern las opciones para el Bloque. Se podrn configurar opciones del texto, pudiendo elegir el alineado horizontal y vertical del texto, incluso se podr aadir la separacin entre las letras y las palabras.
19 /39
La eleccin Fondo permitir cambiar las caractersticas del fondo. Se podr colocar en las coordenadas deseadas, aadirle un color o directamente una imagen de fondo.
La siguiente pestaa muestra las caractersticas de los Bordes. Se podr modificar la anchura, el estilo y el color del borde, seleccionar que la opcin elegida se aplique a todos los bordes o solo a uno en concreto.
La opcin Cuadro permite definir los mrgenes entre celdas pudiendo asignar un espacio entre los caracteres y el borde de la celda.
20 /39
Otra de las pestaas que se encuentran en esta seccin es Ubicacin, con ella se elegir la posicin concreta en la que aparecern las imgenes insertadas.
Continuando con las pestaas aparece Diseo, que nos permitir aadir opciones de diseo como cambiar la forma del cursor y funciones del mismo estilo.
Cuando se crea una lista, se puede modificar y configurar a gusto del usuario. Pero la opcin Lista permite predefinir los elementos que se mostrarn y con ello todas ellas aparecern con el mismo formato mientras sean del mismo estilo. Se puede apreciar en la imagen las alternativas que nos ofrece esta pestaa.
21 /39
Lo mismo ocurre con la opcin Tabla. Con esta, se podr definir el estilo de una tabla, antes de crearla. Adems todas las tablas creadas posteriormente tendrn el mismo formato, a no ser que se altere esta seccin.
4
4.1
Barra de men
Men Archivo
Observando el men Archivo, se podrn apreciar las opciones tpicas de nuevo, apertura, guardar, imprimir, cerrar. Pero hay opciones propias de la herramienta para previsualizar en el explorador, publicar el sitio desarrollado, importar archivos e incluso pginas completas.
22 /39
La opcin Importar mostrar un cuadro como el que se ve en la imagen. Permitir importar pginas generadas con otras aplicaciones y/o que se encuentran publicadas en otros sitios: FrontPage, WebDAV, FTP, HTTP e incluso se podr importar una pgina alojada en el propio disco local, para mas adelante publicarla en el dominio creado.
23 /39
4.1.1.
Vista previa en el Explorador
La opcin Vista previa en el explorador permitir al desarrollador ver el progreso de la web en cualquier momento y casi en cualquier explorador, ya que permite aadir navegadores a la lista que la aplicacin trae por defecto. En la imagen se pueden apreciar las configuraciones de navegador que incluye la herramienta.
Escogiendo la opcin Editar lista de exploradores, Expression Web mostrar la lista de navegadores en los que el usuario podr previsualizar la pgina. Haciendo clic sobre el botn Agregar, podremos aadir uno nuevo a la lista buscando en el equipo local el ejecutable del navegador. Despus se podr seleccionar los tamaos de ventana en los que se realizar la vista previa de la pgina desarrollada.
24 /39
En esta misma ventana tambin podremos marcar la ltima opcin, que nos guardara automticamente el trabajo realizado antes de que hagamos una vista previa del mismo. 4.2 Men Edicin
Siguiendo con la barra de men, aparece el desplegable Edicin.
Este men contiene las herramientas ms comunes de la aplicacin, pudiendo copiar, pegar, eliminar, reemplazar y buscar entre otros. En este mismo men en la parte inferior encontramos Vista Cdigo, esta opcin ayudar a organizar los comandos HTML, para una mejor comprensin del cdigo. Incluso podremos buscar comandos que coincidan e insertar etiquetas y comentarios.
25 /39
4.3
Men Ver El siguiente punto del men es Ver.
Como primera opcin aparece Pgina, con la que podremos elegir los diferentes tipos de vista para ver nuestro trabajo: diseo mostrar la pgina como si estuviera publicada y cdigo mostrar el cdigo HTML correspondiente. La vista de cdigo HTML aparecer por defecto al empezar a crear una pgina (como se ve en la siguiente imagen). En el caso de que hubiera algo escrito en la vista diseo, aparecera reflejado en la vista cdigo.
26 /39
La tercera opcin es la divisin: aparecern la vista de diseo y la de cdigo y a medida que se realicen cambios se reflejarn en ambas vistas. Siguiendo con el men Ver otra opcin es Ayudas visuales. En la imagen se muestran los diferentes objetos sobre los que el usuario puede obtener ayuda a la hora de crear la pgina.
El siguiente men Marcas de formato por defecto aparece desactivado, pero puede activarse pulsando sobre la opcin Mostrar. Una vez activado ayudar en las tareas de mantener todo el documento bien organizado haciendo marcas en el documento para poder utilizarlas de gua.
27 /39
La siguiente opcin llamada Regla y Cuadricula permite aadir opciones de alineamiento y ajustes visuales de los objetos que incluye la pgina en desarrollo.
La opcin Mostrar la regla, aade una regla a los bordes de la hoja para calcular las medidas deseadas de los objetos que se colocan en la pgina. Tambin se pueden mostrar la cuadrcula para que el trabajo sea ms sencillo de alinear. As quedara una muestra de la cuadricula y la regla aadidas en la hoja de trabajo.
28 /39
La siguiente opcin es Imagen maqueta. Con esta opcin aparecer una imagen de fondo que podremos usar como plantilla para un proyecto nuevo. Se podr esconder la imagen a peticin del usuario y volver a mostrarla con un solo clic. Aparecer un men como el de la figura siguiente para aadir la plantilla seleccionada y darle la opacidad y coordenadas deseadas.
En la opcin Barra de herramientas, Expression Web da la posibilidad de aadir barras de herramientas al men para un acceso ms rpido a las utilidades que facilita (por ejemplo, Formato permite acceder a la modificacin del tipo, tamao y color de la tipografa). En la imagen se aprecian las diferentes barras que se pueden seleccionar.
29 /39
4.4
Men Insertar
Pasando al siguiente men desplegable se encuentra Insertar. Aqu la primera opcin que encontramos es HTML.
Esta opcin permite aadir etiquetas HTML al documento de una manera ms sencilla, incluso puede ayudar con algunas etiquetas que el usuario no conozca. Lo mismo pasa con Controles de ASP.NET, que permitir al usuario agregar multitud de iconos o botones.
30 /39
4.4.1.
Hipervnculos
Siguiendo con las opciones del men Insertar se encuentra Hipervnculo. Como su propio nombre indica esta opcin sirve para aadir un enlace a otra pgina de nuestro proyecto o de una web alojada en Internet. Adems mediante el botn Marcador se podr crear un enlace al punto donde se quiera hacer referencia dentro del propio documento. La siguiente figura muestra la ventana de insercin de hipervnculos:
En el ejemplo se puede apreciar que se va a aadir el texto http://www.wikipedia.es con la direccin http://www.wikipedia.es. Una vez se acepten los cambios, en la pgina que se est creando aparecer el texto
31 /39
con el enlace a la direccin indicada, en este caso http://www.wikipedia.es. El resto de las opciones del men desplegable Insertar nos darn opcin a aadir imgenes, archivos, botones interactivos y smbolos de una manera muy parecida a la anterior.
4.5
Formato
El siguiente men desplegable, llamado Formato, est relacionado con los estilos de la pgina, ya que una de las opciones que tiene es crear y administrar los estilos CSS. Se encontrarn otras opciones ya vistas anteriormente.
Anexo 1: Publicar sitio en carpeta remota
Se va a proceder a publicar un sitio Web pero sin subirlo a Internet. Es decir, se guardar en una carpeta de nuestro ordenador publicndolo de forma local. Lo primero es crear una Pgina en blanco escribiendo cualquier cosa para hacer la prueba.
32 /39
Una vez creada, se pulsar en el men Archivo y despus Publicar.
Aparecer la siguiente pantalla, para avisar que hay que guardar el trabajo realizado antes de publicarlo.
33 /39
Tras aceptar, dar a elegir la ubicacin donde guardar el trabajo.
Una vez guardado, aparecer la siguiente pantalla donde se seleccionar Sistema de Archivos para posteriormente aadirle la direccin donde se va a guardar la publicacin.
34 /39
Aceptado lo anterior, la pantalla principal de la aplicacin dar las opciones para sincronizar los cambios entre el directorio local de desarrollo y el sitio de publicacin de las pginas.
35 /39
Tras pulsar el botn Publicar el sitio Web, el programa comienza el proceso de publicacin. Terminado ste, todo archivo publicado, aparecer en el lado derecho de la aplicacin, como se puede observar en esta ltima imagen y se podr acceder a l mediante un navegador.
36 /39
37 /39

Manual Microsoft Expression Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual Microsoft Expression Web

Uploaded by

Copyright:

Available Formats

Control de documentacin

Ttulo de documento: Microsoft Expression Web

Cambios producidos desde la ltima versin

Microsoft Expression Web. Manual rpido de usuario

3.2.2. Propiedades de fuente 3.2.3. Numeracin y Vietas 3.2.3.1. Propiedades de lista

3.2.4. Crear una tabla 3.2.4.1. 3.3 4 4.1 Propiedades de Celda

Crear nuevo estilo Barra de men Men Archivo

4.4.1. Hipervnculos 4.5 5 Formato Anexo 1: Publicar sitio en carpeta remota

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Creando una Web

Microsoft Expression Web. Manual rpido de usuario

Dentro de General se encuentran las siguientes opciones:

Microsoft Expression Web. Manual rpido de usuario

Dentro de Formato encontramos las siguientes opciones:

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

3.2.3.1. Propiedades de lista

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Crear una tabla

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

3.2.4.1. Propiedades de Celda

Microsoft Expression Web. Manual rpido de usuario

La siguiente eleccin ser Modificar, que se encuentra en el mismo men Tabla.

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Vista previa en el Explorador

Microsoft Expression Web. Manual rpido de usuario

Siguiendo con la barra de men, aparece el desplegable Edicin.

Microsoft Expression Web. Manual rpido de usuario

Men Ver El siguiente punto del men es Ver.

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Anexo 1: Publicar sitio en carpeta remota

Microsoft Expression Web. Manual rpido de usuario

Una vez creada, se pulsar en el men Archivo y despus Publicar.

Microsoft Expression Web. Manual rpido de usuario

Tras aceptar, dar a elegir la ubicacin donde guardar el trabajo.

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

Microsoft Expression Web. Manual rpido de usuario

You might also like