Está en la página 1de 16

Microsoft Expression Web

®

Guía de Inicio Rápido

Esta guía ha sido diseñada para proveer una introducción a Microsoft Expression Web y está basada en Microsoft Expression Web – Quickstart Guide. Este documento no pretende sustituir esa guía. Microsoft, Expression Web y Viva Espresso son marcas registradas, el uso es estrictamente educativo y no se pretende hacer uso comercial de ellas. Autor: Ing. David Jonathan Rivas Mendez

paginas HTML. usted puede cambiar las preferencias.Expression Web – Guía de Inicio Rápido Bienvenido Expression Web. encontrará un número de paneles de tareas. y usted puede especificar las preferencias para un determinado sitio seleccionando Sitio | Configuración del sitio. incluyendo barras de herramientas especializadas para trabajar con imágenes y CSS. Puede personalizar la interfaz de acoplando y desacoplando las barras de herramientas. crear un nuevo Sitio Web. seleccionando Herramientas | Opciones de la aplicación o Herramientas Opciones del Editor de páginas. es mejor crear un nuevo Sitio Web primero y luego crear las paginas dentro de este. Creando un nuevo Sitio Web Antes de de comenzar a crear páginas web. Un Sitio Web es realmente un simple carpeta. además se muestran las barras de herramientas y opciones de menú abiertas. la cual mantendrá la totalidad de . abriendo y cerrando los paneles de tareas y cambiando la configuración de preferencias. La primera vez que inicie el programa. Usted puede abrir y cerrar los paneles de tareas. Expression Web crea esta carpeta y la guarda en el disco duro de la computadora. barras de herramientas y cuadros de diálogo con una amplia gama de características. explorara las tareas básicas. seleccionándolos en el menú de paneles. en el menú Ver cuando elige Barras de herramientas. Usted encontrará las barras de herramientas diferentes. En corto tiempo. Aquí está una vista previa de la página que se hará en esta guía. tales como. crear hojas de estilo en cascada y pre visualizar una página en un navegador.

se abrirá un cuadro de dialogo. Configurar un sitio web vacio:  Hacer clic en el menú Sitio y luego seleccionar la opción Nuevo Sitio    Después de haber seleccionado Nuevo Sitio.las páginas web. . Seleccionar la opción General en la columna de la parte izquierda. imágenes y cualquier otro recurso (archivo) que haya sido utilizado dentro del sitio. Seleccionar Sitio Web Vacio de la columna de en medio.

Ahora usted ya tiene creado el sitio. Hay algunas imágenes que se usaran para este ejemplo que se encuentra dentro junto al archivo del de este manual. cuando quiera copiar todo el sitio simplemente copie la carpeta que tenga el nombre del sitio. esto significa que ya creo la carpeta raíz para su contenido web. para nuestro caso MIPrimerSitio. se debe copiar la carpeta img y pegarla a nuestro sitio. cambie el nombre del sitio web al que usted desea.  Por defecto se establece un nombre. para crear un documento HTML siga los siguientes pasos:  Haga clic en menú Archivo y seleccione la opción Nuevo . Clic en Aceptar. Creando una nueva página Web HTML Ahora viene la parte fácil.

tal y como lo hace con las demás aplicaciones. caracteres especiales. Antes de todo. dependiendo de la configuración de su servidor web. aparece un cuadro de dialogo y especifique el tipo de pagina que se desea crear. etc. todo esto porque algunos servidores web siguen estas . Para el caso se llamara index.html o default. Para guardar una página simplemente hacer clic sobre el icono guardar. no usar espacios en blanco. tales como. Si esta es la pagina principal o pagina de entrada de su sitio deseara llamarle index.  Seleccione la opción Página. Para este ejemplo se trabajara con un archivo HTML. es de mencionar que una buena práctica es guardar su página.. se puede seleccionar directamente de la opción Nuevo del menú Archivo o desde el icono Nuevo de la Barra de herramientas.html. Al resto de las páginas se les puede llamar como quiera. sin embargo es recomendable seguir las convenciones de nombres.

Para este ejercicio se establecerá los colores del fondo y texto en negro y blanco. . Se abrirá un cuadro de dialogo. usted puede especificar texto. Viva Espresso. Primero cambie el titulo. Además los colores de hipervínculo cámbielo a amarillo.convenciones de nombres de manera muy estricta y esto afectaría los enlaces de las paginas y no se podrían abrir. Bajo la pestaña Formato. Este es el texto que aparece en la barra de titulo del navegador y también es el nombre con el que se guarda cuando se desea agregar la pagina a favoritos. fondo y colores de los enlaces para su página. Otra buena práctica es ajustar las propiedades de la pagina de inmediato. Estos ajustes se encuentran en la opción Propiedades de la Pagina del menú Formato.

video. Para ello en primer lugar se comenzara diseñando y distribuyendo el contenido de la página usando la opción capas. Como recomendación se debe establecer los márgenes a cero. se pueden establecer los márgenes. Las capas en Expression Web son creadas con etiquetas tiv con CSS y posición absoluta. ya está listo para comenzar a agregar contenido. texto. etc. Diseñando la página con Capas Ahora ya tiene su sitio y su nueva página creada.Bajo la viñeta Avanzadas. puede insertar dentro de esta cualquier elemento (gráficos. Una vez insertada la capa en tu pagina. Esto significa que puede colocarlas en cualquier lugar de la pagina y ajustando el tamaño que se desea. ya que los navegadores siempre establecen un margen por defecto alrededor de la página cuando esta se muestra.). .

Para este ejemplo la capa uno se dejara de 100px de alto y 800px de ancho. Otra forma (y la mas adecuada) es copiando dentro del sitio las imágenes que se van a utilizar dentro de una carpeta img (tal y como se hizo al principio de esta guía) y luego para insertarla simplemente se arrastra la imagen dentro de la capa. La forma más fácil es hacer clic en el icono de Insertar imagen desde archivo que se encuentra en la barra de herramientas.jpg. busque en el Cuadro de Herramientas en la sección de etiquetas ele elemento Capa y arrástrelo dentro de la pagina.  Para agregar una capa a la pagina. También puede usar las propiedades CSS del panel de tareas.  Para Insertar una imagen haga clic en menú Insertar seleccione la opción Imagen y luego clic en Desde Archivo.  Puede redimensionar la capa haciendo clic y arrastrando en cualquiera de las esquinas de la capa. La capa automáticamente aparecerá en la capa superior izquierda de la página. .Las capas son usadas por una gran cantidad de diseñadores porque proveen precisión en el control del espacio de trabajo. la imagen se llama vivaespresso. La imagen que se usara esta dentro de la carpeta que se ha proporcionado donde se encuentra este manual. pero significa que es una de las muchas maneras de crear diseños usando CSS en Expression Web.

o Font-size: xx-large o Background-image: seleccionar la imagen cabecera. se agregaran unas capas mas. Este aparece cuando por alguna razón la imagen no se puede mostrar. insertando contenido en cada una de ellas y luego paso a paso se estableceran las propiedades CSS adecuadas. Adicionando y Ajustando Capas Continuando con el diseño de esta pagina.  Agrege otra capa a la pagina y posicionela en la izquierdo despues de la capa anterior. .png que se encuentra en la carpeta img. Cuando se inserta la imagen presenta una venta de Propiedades de Accesibilidad.  Para que se vea como el ejemplo es necesario establecer algunas propiedades CSS en el panel de tareas. es necesario establecer el texto alternativo.

. Coloque el cursor sobre la capa que acaba de crear y escriba el siguiente texto: Inicio Especialidad Menu Eventos Galeria Quienes Somos Contactenos  Luego de establecer la posicion y el tamaño del texto de la capa a large. es necesario dimensionar la capa con esos valores.   Para continuar con el sitio se agregara otra capa en el centro de la pagina. La pagina quedara similiar a la figura. Luego arraste sobre esta capa la imagen llamada cafe1. la capa se quedara como se muestra en la figura. Esta imagen tiene 300px de ancho ppor 204px de alto.jpg.

.ganamos el 9o lugar en el Campeonato Mundial de Baristas! También ganamos el Campeonato Salvadoreño de Baristas 2010! siendo esta la 3era vez consecutiva que lo logramos!!!. . Agregue otra capa en la parte derecha de la pagina y agregue el siguiente texto: Ven y prueba un café de clase mundial. Como se muestra en la imagen..

   Agregue otra capa en la parte inferior con el texto Visitenos en: en color amarillo.jpg.jpg.jpg y plazafutura. con la siguiente imagen de muestra. . Finalmente en la parte inferior agregue otra capa de 100px de alto y 900px de ancho y arrastre las imágenes granvia. galerias. Verifiquemos hasta el momento que se ha seguido el ejemplo.

Para darle un poco mas de realismo al ejemplo hay que establecer hipervinculos para cada una de las opciones. Una vez hecho la pagina procedermos con los enlaces:  Primero seleccione de la capa de navegacion el texto que dice Galeria  Haga clic en el menu Insertar y luego seleccione la opcion Hipervinculo . opcion Nuevo y luego HTML.html). asi que sera lo primero que se hara. creando enlaces con Expression Web es un proceso facil. Luego guardela como galeria. Hay que tomar muy en cuenta que esta pagina que acabamos de crear solo es de muestra. Sin embargo para crear un enlace a otra pagina web se debe crear una.Creando Hipervínculos Si se quiere crear enlaces a paginas de su propio sitio o de otro sitio web en Internet. (Debido a que solo se tienen dos paginas la mayoria de enlaces se haran a la pagina que acabamos de crear galeria. y recordar que las paginas de un sitio deben de tener un diseño similar.html Agregue un texto grande que diga Galeria de Imágenes. pero para efecto de practica y no entretenerse se ha hecho asi.    Seleccione el menu Archivo.

 Seleleccione la imagen a la que quiere hacer el enlace. para esto se usaran las imágenes inferior como enlaces (recuerde que se pueden crear enlaces de texto y de imagen tambien).  Luego aparecera el enlace tal y como se muestra en la figura  Haga el mismo proceso para las demas opciones. considerando que el enlace de inicio debe ser a la misma pagina index. Aparece un cuadro de dialogo y selección la pagina a la que quiere enlazar. para este caso selección la de plaza futura. Como se menciono anteriormente se pueden crear enlaces a sitios de internet tambien. para este caso galeria y luego clic en Aceptar. .

 Luego haga clic sobre la flecha del icono de vista preliminar.sv y la de galerias a http://www. probar enlaces. . para este caso http://torrefutura. Haga clic en el menu Insertar y luego seleccione la opcion Hipervinculo  Aparece un cuadro de dialogo. pre visualizar.com. aparecerá una serie de opciones que son las diferentes formar de ver el sitio de acuerdo al tipo de navegador y a resoluciones. para ello se hace clic sobre el icono guardar todo.sv . de la siguiente manera:  Lo primero es asegurar guardar todo el sitio.. etc. en el campo direccion escribir el url del sitio.  Haga lo mismo con al imagen de la gran via enlazandolo a http://lagranvia. Probando el Sitio Una vez hecho lo anterior es necesario probar el sitio.com.com y luego clic en Aceptar.galerias.

. Felicidades! Usted ya está preparado para crear sitios web básicos.0 Revise los enlaces que se crearon y puede probar con otras opciones de pre visualización también.  Seleccione la opción Microsoft Internet Explorer 8.