Microsoft Expression Web - Avance

FACULTAD DE CIENCIAS ECONOMICAS

Manual de Microsoft® Expression® Web

INFORMATICA II

Diseño básico en Microsoft® Expression® Web

SAN SALVADOR – EL SALVADOR – CENTROAMERICA – 2010

Microsoft® Expression® Web Pág. 1

Contenido

Descripción Página

1 Introducción 3

2 Conceptos básicos 3

3 Funciones elementales 5

3.1 Operativa básica 5

3.2 Funciones básicas para la creación una Web 7

3.2.1. Propiedades de página 8

3.2.1.1. General 10

3.2.1.2. Formato 11

3.2.1.3. Avanzadas 12

3.2.1.4. Personalizadas 13

3.2.1.5. Idioma 14

3.2.2. Propiedades de fuente 15

3.2.3. Numeración y viñetas 21

3.2.3.1. Propiedades de lista 22

3.2.4. Crear una tabla 24

3.2.4.1. Propiedades de celda 28

3.3 Crear nuevo estilo 35

4 Barra de menú 40

4.1 Menú Archivo 40

4.1.1. Vista previa en el Explorador 42

4.2 Menú Edición 45

4.3 Menú Ver 46

4.4 Menú Insertar 54

4.4.1. Hipervínculos 56

4.5 Formato 57

5 Anexo 1: Publicar sitio en carpeta remota 58


1 INTRODUCCION. El aplicativo Microsoft® Expression® Web es un editor en formato HTML “HyperText Markup Language” con una aplicación para creación de sitos web, utiliza un mecanismo en software llamado wysiwyg “Lo que ve, es lo que obtiene” y su trabajo es sobre el diseño de páginas web. Es una herramienta que está enfocada al cumplimiento de estándares, ya que permite validar un contenido contra el estándar que el usuario desee seguir o navegadores en los que se planea montar la aplicación Web. Además, Microsoft® Expression® Web es compatible con hojas de estilo CSS “Cascading Style Sheets”, las hojas de estilo en cascada es un lenguaje usado para definir la presentación de un documento estructurado escrito en lenguaje HTML o XML “Extensible Markup Language” y con Microsoft Visual Studio, el cual es un entorno integrado de desarrollo que interrelaciona diferentes lenguajes de programación. Asimismo, incluye la capacidad de procesar archivos XML mediante JavaScript el cual es un lenguaje de scripting basado en objetos no tipeado y liviano, utilizado para acceder a objetos en aplicaciones.

2 CONCEPTOS BASICOS. En la parte superior el aplicativo para edición de páginas Web se encuentran localizados la barra de titulo del documento que se está editando, así de manera seguida se encuentra también la barra de menú principal del aplicativo conteniendo las instrucciones de apoyo para el trabajo del usuario en el aplicativo y finalmente la barra de formato del programa que por medio de iconos facilita la actividad del usuario diseñador de páginas Web, estas descripciones se pueden apreciar en el siguiente gráfico que muestra de manera respectiva cada una de las barras determinadas anteriormente.

El aplicativo Microsoft® Expression® Web ofrece una serie de facilidades que permiten a un usuario diseñador de páginas web ambientarse de manera rápida y sencilla al trabajo de diseño, creación y elaboración de páginas web. Los paneles de tareas de Microsoft® Expression® Web ayuda al usuario diseñador a realizar su trabajo poniendo a su disposición las herramientas que necesita para lograr sus ideas en diseños en entorno web. En la barra de menú se encuentran todos los paneles de tareas. Además se pueden tener varios paneles de tareas abiertos a la vez y cambiar la ubicación y el tamaño de cada panel de tareas para que el usuario los adapte a sus necesidades. Estos paneles de tareas pueden ser organizados con una distribución personal, Microsoft® Expression® Web usa de forma automática una distribución principal cada vez que se activa el programa. De esta manera cuando Microsoft® Expression® Web se abre por primera vez, los paneles de tareas: lista de carpetas, propiedades de etiqueta, aplicar estilos y cuadro de herramientas se mostrarán acoplados a los lados de la ventana de edición ó área de trabajo. Los paneles de tareas están organizados en seis grupos, por lo que forma predeterminada, los paneles de tareas de cada grupo aparecen como paneles de tareas combinados la primera vez que se abren. Estos paneles combinados ocupan el mismo espacio y aparecen uno detrás de otro, pero cada panel de tareas estará disponible haciendo clic en la ficha de ese panel. Se puede acoplar un panel de tareas en el borde de la ventana del programa y la ventana de edición cambiará de tamaño para alojar ese panel de tareas acoplado. El panel de tareas se puede acoplar horizontal o verticalmente. Un panel de tareas flotante se puede arrastrar y situar en cualquier parte, incluso en la parte exterior de la ventana del programa.


El panel de tareas lista de carpetas muestra las carpetas y páginas de un sitio Web. Puede expandir las

carpetas haciendo clic en el botón + situado a la izquierda del nombre de carpeta y contraer las carpetas

haciendo clic en el botón - situado a la izquierda del nombre de la carpeta. A continuación se muestra dicho

panel.

El panel de tareas propiedades de etiqueta permite a un usuario ver rápidamente todos los atributos y valores establecidos de la etiqueta que está activa en ese momento en la página Web actual. El panel de tareas también permite modificar los atributos establecidos y configurar atributos nuevos para la etiqueta actual. A continuación se puede visualizar dicho panel.

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.

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 <br>. Si el tipo de documento es XHTML, Expression Web creará una etiqueta <br />.

El área de trabajo es el componente donde el usuario diseñador de páginas web desarrolla su creatividad para la fabricación de páginas web, esta zona de edición permite a un usuario diseñador definir los diferentes elementos que estarán formando a la página web, a continuación el siguiente gráfico muestra la zona de edición ó trabajo.


3 FUNCIONES ELEMENTALES. 3.1 OPERATIVA BASICA. El proceso de activación de Microsoft® Expression® Web se realiza desde el menú de inicio del sistema operativo Microsoft Windows.


Una vez activado el aplicativo para el diseño de páginas Web, se presenta la pantalla principal del aplicativo Microsoft® Expression® Web, como es mostrado a continuación:

Desde la barra de menú se puede acceder a todas las opciones que ofrece esta herramienta de diseño web.

Debajo de ésta, se encuentra la barra de formato, donde aparecerán las opciones más utilizadas por los usuarios. Con ello se crea un acceso rápido a las opciones más comunes de la aplicación.


3.2 FUNCIONES BÁSICAS PARA LA CREACIÓN DE UNA PÁGINA WEB. Inicialmente es importante comenzar explicando la manera de como se puede crear una Web apoyado en este herramienta. En primer instancia se debe ubicar el puntero del ratón, en el menú Archivo para que seguidamente se deba seleccionar la opción Nuevo y después la opción Página, esto producirá que aparezca una ventana como la que se muestra en el siguiente gráfico: Así con ayuda del puntero del ratón se debe seleccionar del menú principal la opción Archivo, luego elegir Nuevo y finalmente Página para iniciar la fase de construcción de una página Web, como se muestra en la siguiente grafica:

Una vez elegidas las opciones anteriores se debe desplegar la siguiente pantalla:


Por defecto viene seleccionada la opción HTML, pero el usuario podrá elegir cualquier otro de los diferentes tipos de lenguaje que aparecen. Con ayuda del puntero del ratón se puede seleccionar cualquiera de las opciones y haciendo un clic encima de cada opción, de esta manera aparecerá una breve descripción en la esquina superior derecha, para conocer un poco de cada una de las opciones y de esta manera saber que se va crear en cada momento. Desde aquí se podrán crear estilos y webs con lenguajes diferentes. 3.2.1. PROPIEDADES DE PÁGINA. Una vez creada la página en blanco, se pasará a administrar sus propiedades, para ello se deberá acceder al menú Archivo y después en la opción Propiedades, como se muestra en la siguiente pantalla:


De esta manera todas las propiedades de página aparecerán en una nueva ventana y cada una estas se encuentran separadas en una serie de pestañas.


3.2.1.1. GENERAL. Dentro de la propiedad identificada como General se encuentran las siguientes opciones:

Ubicación. Muestra la dirección donde está guardado el archivo creado. Si aún no se ha guardado el trabajo, la dirección determinada será unsaved:///Sin_título_1.htm.

Título. Muestra el nombre asignado a la página.

Descripción de la página. Muestra una breve descripción de la página web.

Palabras clave. También conocidas como keywords, serán las palabras más significativas de la página web. La adecuada selección de estas palabras propiciará un mejor posicionamiento en los buscadores cuando los usuarios realicen búsquedas.

Ubicación de base. Mostrará la página principal de página Web. Se podrá añadir la dirección que el usuario desea asignar.

Marco de destino predeterminado. Ofrece la opción de predeterminar el marco donde se abrirán las páginas, como se puede apreciar en la siguiente imagen, se podrán elegir varias opciones:

Sonido de fondo. Esta opción, como su propio nombre indica, permite la elección de añadir un sonido alojado en el disco local, de manera que se reproduzca durante la visita a la página. Se puede seleccionar la opción de añadir un bucle para que se repita el sonido las veces deseadas.


3.2.1.2. FORMATO. Dentro de la pestaña Formato se encuentran las siguientes opciones:

Imagen de fondo. Esta opción permite al usuario añadir una imagen para establecerla ó determinarla como fondo en la página Web.

Convertir en marca de agua. Esta opción permite mostrar la imagen de fondo menos marcada para que no contraste con el contenido de la página Web.

Colores. Opción que permite al usuario diseñador de la página Web, elegir los diversos colores para el fondo, el texto e hipervínculos.

3.2.1.3. AVANZADAS. Dentro de la pestaña identificada como Avanzadas aparecerán las opciones que permiten establecer los márgenes de la página, como se puede observar en la siguiente gráfica.

3.2.1.4. PERSONALIZADAS. Dentro de la pestaña identificada como Personalizadas se pueden visualizar las siguientes opciones que permitirán a un usuario diseñador de páginas Web añadir variables a dicha página Web.


3.2.1.5. IDIOMA. Dentro de la pestaña identificada como Idioma se encuentran varias opciones que permiten a un usuario diseñador de páginas Web guardar el documento en otro idioma y codificar el código HTML.

3.2.2. PROPIEDADES DE FUENTE. Otro aspecto importante dentro del diseño de una página Web es de elegir el tipo de letra ó los tipos de letras adecuados al diseño a desarrollar ó dibujar; de esta manera el siguiente paso será elegir la fuente ó tipo de letra apropiada para dicha página Web. Esto se puede acceder desde la opción Formato del menú principal del programa Microsoft® Expression® Web, como se muestra a continuación:


Otra manera de acceder es ubicar el cursor en la zona de diseño de página Web, como se muestra en la siguiente gráfica:

Seguidamente presionar el botón derecho del ratón para que se despliegue el siguiente menú de opciones, como se muestra a continuación:


Así de esta manera, elegir la opción Fuente…, como se muestra a continuación:

Luego seleccionando la opción Fuente del menú antes mostrado se accede a la ventana mostrada en el siguiente grafico:

Este menú presenta todas las posibles opciones que permiten al usuario diseñador de páginas Web cambiar ó acomodar todas las diversas propiedades de la fuente ó tipo de letra, de esta forma pudiendo modificar cuando sea necesario. Se podrá cambiar la fuente, el estilo y el tamaño, así como también se podrá seleccionar el color de la letra, para que no contraste con el fondo, por ejemplo. Incluso se podrán elegir diferentes efectos para la fuente ó letra, que conseguirán que estas letras tengan otro formato.


La siguiente pestaña identificada como Espaciado entre caracteres, como su propio nombre indica tiene como función de elegir el espacio entre cada letra. Se podrá seleccionar mediante la lista desplegable o también se podrá optar por escribir la distancia. Con el desplegable Ubicación se pueden colocar las letras en la posición preferida de esta forma el usuario diseñador de páginas Web puede elegir las opciones mostradas en la imagen siguiente:

Todas estas opciones podrán ver visualizada en un apartado identificado como vista previa el cual se encuentra situado en la parte inferior de la ventana de opción Fuente como es mostrado en el siguiente gráfico.

Es importante describir que a medida que se van realizando cambios en las opciones, la vista previa se modifica de manera casi simultánea, para que el usuario diagramador de la página Web pueda visualizar los cambios y cómo estos quedarán el documento que está trabajando. 3.2.3. NUMERACION Y VIÑETAS. El siguiente componente de diseño es el identificado como numeración y viñetas. Este se podrá acceder mediante el menú Formato o mediante los iconos de acceso directo en la barra de formato.

El primero hace referencia a la numeración y el segundo icono corresponde a las viñetas. A continuación se muestra un ejemplo de cada uno de ellos. NUMERACION VIÑETAS


Con la primera opción el diseñador consigue ordenar la lista con números y en el orden que elegido. Por defecto empezará desde el uno, pero el usuario diseñador podría indicar que se inicie la cuenta desde cualquier otro número. La segunda opción son las viñetas, con las que se presentará la lista con iconos en lugar de la numeración de la anterior opción. Con las dos alternativas se podrá cambiar la numeración 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 botón encima de la misma y elegir la opción propiedades de lista. Una vez dentro se podrá modificar la configuración de la lista mediante una ventana como la que se muestra en la siguiente imagen:

En esta ventana, Microsoft® Expression® Web permite la opción de elegir una imagen alojada en el disco local para colocarla como viñeta. Para lograr esta acción se elige la opción Especificar imagen y luego se digita directamente en el espacio indicado, la ubicación física del archivo conteniendo el nombre del archivo imagen ó por medio de la presión del botón examinar… para activar la navegación y localizar la imagen. La siguiente pestaña identificada como Viñetas muestra las diferentes alternativas de viñetas prediseñadas de las que el usuario diseñador de páginas Web pueden elegir para la elaboración de la página Web, en la siguiente figura se puede visualizar la manera en la cual se muestran esta serie de opciones.


La siguiente viñeta identificada como Numeración, permite la elección números o incluso letras para mostrar una lista de datos, de manera similar que el caso de la opción viñetas existe diferentes formatos y estos pueden ser mediante números ó letras que muestran la información de manera ordenada. La única diferencia es que el usuario constructor de la página Web tiene la opción de poder elegir el número con el que puede empezar la numeración.

3.2.4. CREAR UNA TABLA. Otra opción importante de la que dispone esta aplicación de diseño de páginas Web, es la que permite a un usuario diseñador de páginas Web la creación de tablas, para ello se hará clic en el menú desplegable Tabla y a continuación clic sobre Insertar Tabla, como se muestra en la siguiente grafica.


Una vez se selecciona y elige la opción llamada Insertar tabla… se despliega la siguiente pantalla de configuración de la tabla.

Primero, se definirá el número de columnas y filas que se van a contener en la tabla, seguidamente se elegirá la alineación que la tabla tendrá y esta puede ser ajustada a la izquierda, a la derecha o al centro; además se podrá añadir el porcentaje de separación que tendrá con respecto a los bordes de la página que se está diseñando. También aparece la opción identificada como Margen de celdas, la cual está en función del valor seleccionado para el margen interno de las celdas variarán las dimensiones de la tabla como se puede apreciar en la siguiente gráfica:

La siguiente opción es la que se identifica como: Espaciado entre celdas, la que determina la separación entre las celdas que conforman la tabla. Se puede apreciar en la siguiente grafica en qué consiste el valor de la diferencia de espacios.


El siguiente grupo de opciones permitirán a un usuario diseñador de páginas Web, configurar los bordes de la tabla en cuanto a grosor, tamaño y color, incluso se puede seleccionar una imagen de fondo, para que finalmente, se proceda a guardar los diferentes valores ó parámetros establecidos en el proceso. En cualquier caso, todas estas opciones antes definidas se podrán modificar más adelante seleccionando en el menú principal de Microsoft® Expression® Web la opción Tabla y después elegir la opción identificada como: Propiedades de la tabla. Al seleccionar el botón aceptar de la opción llamada Insertar tabla se desplegará en la zona de edición de Microsoft® Expression® Web, se insertara una tabla como la mostrada en la siguiente grafica:


3.2.4.1. PROPIEDADES DE CELDA. Pare elegir las propiedades de una celda con ayuda del cursor del ratón se elige la opción Tabla del menú principal, luego la opción Propiedades de tabla y finalmente la opción celda… como se muestra a continuación en la siguiente gráfica:

De la misma manera que desarrollan acciones de creación y configuración de tablas, lo mismo se efectuar con cada una de las celdas, modificando sus propiedades, así una vez seleccionada esta opción, se presentará la ventana mostrada en el siguiente gráfico:

Microsoft Expression Web - Avance

Documents

Transcript of Microsoft Expression Web - Avance