Microsoft Expression Web

Gua de Inicio Rpido

Esta gua ha sido diseada para proveer una introduccin a Microsoft Expression Web y est basada en Microsoft Expression Web Quickstart Guide. Este documento no pretende sustituir esa gua. 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

Expression Web Gua de Inicio Rpido

Bienvenido Expression Web. La primera vez que inicie el programa, encontrar un nmero de paneles de tareas, barras de herramientas y cuadros de dilogo con una amplia gama de caractersticas. Puede personalizar la interfaz de acoplando y desacoplando las barras de herramientas, abriendo y cerrando los paneles de tareas y cambiando la configuracin de preferencias.

Usted encontrar las barras de herramientas diferentes, incluyendo barras de herramientas especializadas para trabajar con imgenes y CSS, en el men Ver cuando elige Barras de herramientas. Usted puede abrir y cerrar los paneles de tareas, seleccionndolos en el men de paneles, usted puede cambiar las preferencias, seleccionando Herramientas | Opciones de la aplicacin o Herramientas Opciones del Editor de pginas, y usted puede especificar las preferencias para un determinado sitio seleccionando Sitio | Configuracin del sitio. Aqu est una vista previa de la pgina que se har en esta gua, adems se muestran las barras de herramientas y opciones de men abiertas. En corto tiempo, explorara las tareas bsicas, tales como, crear un nuevo Sitio Web, paginas HTML, crear hojas de estilo en cascada y pre visualizar una pgina en un navegador.

Creando un nuevo Sitio Web

Antes de de comenzar a crear pginas web, es mejor crear un nuevo Sitio Web primero y luego crear las paginas dentro de este. Un Sitio Web es realmente un simple carpeta, Expression Web crea esta carpeta y la guarda en el disco duro de la computadora, la cual mantendr la totalidad de

las pginas web, imgenes y cualquier otro recurso (archivo) que haya sido utilizado dentro del sitio.

Configurar un sitio web vacio: Hacer clic en el men Sitio y luego seleccionar la opcin Nuevo Sitio

Despus de haber seleccionado Nuevo Sitio, se abrir un cuadro de dialogo. Seleccionar la opcin General en la columna de la parte izquierda. Seleccionar Sitio Web Vacio de la columna de en medio.

Por defecto se establece un nombre, cambie el nombre del sitio web al que usted desea, para nuestro caso MIPrimerSitio. Clic en Aceptar.

Ahora usted ya tiene creado el sitio, esto significa que ya creo la carpeta raz para su contenido web, cuando quiera copiar todo el sitio simplemente copie la carpeta que tenga el nombre del sitio. Hay algunas imgenes que se usaran para este ejemplo que se encuentra dentro junto al archivo del de este manual, se debe copiar la carpeta img y pegarla a nuestro sitio.

Creando una nueva pgina Web HTML

Ahora viene la parte fcil, para crear un documento HTML siga los siguientes pasos: Haga clic en men Archivo y seleccione la opcin Nuevo

Seleccione la opcin Pgina, aparece un cuadro de dialogo y especifique el tipo de pagina que se desea crear. Para este ejemplo se trabajara con un archivo HTML, se puede seleccionar directamente de la opcin Nuevo del men Archivo o desde el icono Nuevo de la Barra de herramientas.

Antes de todo, es de mencionar que una buena prctica es guardar su pgina. Si esta es la pagina principal o pagina de entrada de su sitio deseara llamarle index.html o default.html, dependiendo de la configuracin de su servidor web. Para el caso se llamara index. Para guardar una pgina simplemente hacer clic sobre el icono guardar, tal y como lo hace con las dems aplicaciones. Al resto de las pginas se les puede llamar como quiera, sin embargo es recomendable seguir las convenciones de nombres, tales como, no usar espacios en blanco, caracteres especiales, etc., todo esto porque algunos servidores web siguen estas

convenciones de nombres de manera muy estricta y esto afectara los enlaces de las paginas y no se podran abrir.

Otra buena prctica es ajustar las propiedades de la pagina de inmediato. Estos ajustes se encuentran en la opcin Propiedades de la Pagina del men Formato. Se abrir un cuadro de dialogo. Primero cambie el titulo, Viva Espresso. Este es el texto que aparece en la barra de titulo del navegador y tambin es el nombre con el que se guarda cuando se desea agregar la pagina a favoritos. Bajo la pestaa Formato, usted puede especificar texto, fondo y colores de los enlaces para su pgina. Para este ejercicio se establecer los colores del fondo y texto en negro y blanco. Adems los colores de hipervnculo cmbielo a amarillo.

Bajo la vieta Avanzadas, se pueden establecer los mrgenes. Como recomendacin se debe establecer los mrgenes a cero, ya que los navegadores siempre establecen un margen por defecto alrededor de la pgina cuando esta se muestra.

Diseando la pgina con Capas

Ahora ya tiene su sitio y su nueva pgina creada, ya est listo para comenzar a agregar contenido. Para ello en primer lugar se comenzara diseando y

distribuyendo el contenido de la pgina usando la opcin capas. Las capas en Expression Web son creadas con etiquetas tiv con CSS y posicin absoluta. Esto significa que puede colocarlas en cualquier lugar de la pagina y ajustando el tamao que se desea. Una vez insertada la capa en tu pagina, puede insertar dentro de esta cualquier elemento (grficos, texto, video, etc.).

Las capas son usadas por una gran cantidad de diseadores porque proveen precisin en el control del espacio de trabajo, pero significa que es una de las muchas maneras de crear diseos usando CSS en Expression Web. Para agregar una capa a la pagina, busque en el Cuadro de Herramientas en la seccin de etiquetas ele elemento Capa y arrstrelo dentro de la pagina. La capa automticamente aparecer en la capa superior izquierda de la pgina.

Puede redimensionar la capa haciendo clic y arrastrando en cualquiera de las esquinas de la capa. Tambin puede usar las propiedades CSS del panel de tareas. Para este ejemplo la capa uno se dejara de 100px de alto y 800px de ancho.

Para Insertar una imagen haga clic en men Insertar seleccione la opcin Imagen y luego clic en Desde Archivo. La forma ms fcil es hacer clic en el icono de Insertar imagen desde archivo que se encuentra en la barra de herramientas. Otra forma (y la mas adecuada) es copiando dentro del sitio las imgenes que se van a utilizar dentro de una carpeta img (tal y como se hizo al principio de esta gua) y luego para insertarla simplemente se arrastra la imagen dentro de la capa. La imagen que se usara esta dentro de la carpeta que se ha proporcionado donde se encuentra este manual, la imagen se llama vivaespresso.jpg.

Cuando se inserta la imagen presenta una venta de Propiedades de Accesibilidad, es necesario establecer el texto alternativo. Este aparece cuando por alguna razn la imagen no se puede mostrar.

Para que se vea como el ejemplo es necesario establecer algunas propiedades CSS en el panel de tareas. o Font-size: xx-large o Background-image: seleccionar la imagen cabecera.png que se encuentra en la carpeta img.

Adicionando y Ajustando Capas

Continuando con el diseo de esta pagina, se agregaran unas capas mas, insertando contenido en cada una de ellas y luego paso a paso se estableceran las propiedades CSS adecuadas. Agrege otra capa a la pagina y posicionela en la izquierdo despues de la capa anterior.

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 tamao del texto de la capa a large, la capa se quedara como se muestra en la figura.

Para continuar con el sitio se agregara otra capa en el centro de la pagina. Luego arraste sobre esta capa la imagen llamada cafe1.jpg. Esta imagen tiene 300px de ancho ppor 204px de alto, es necesario dimensionar la capa con esos valores. La pagina quedara similiar a la figura.

Agregue otra capa en la parte derecha de la pagina y agregue el siguiente texto: Ven y prueba un caf de clase mundial...ganamos el 9o lugar en el Campeonato Mundial de Baristas!

Tambin ganamos el Campeonato Salvadoreo de Baristas 2010! siendo esta la 3era vez consecutiva que lo logramos!!!. Como se muestra en la imagen.

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

Creando Hipervnculos
Si se quiere crear enlaces a paginas de su propio sitio o de otro sitio web en Internet, creando enlaces con Expression Web es un proceso facil. Sin embargo para crear un enlace a otra pagina web se debe crear una, asi que sera lo primero que se hara. Seleccione el menu Archivo, opcion Nuevo y luego HTML. Luego guardela como galeria.html Agregue un texto grande que diga Galeria de Imgenes.

Para darle un poco mas de realismo al ejemplo hay que establecer hipervinculos para cada una de las opciones. (Debido a que solo se tienen dos paginas la mayoria de enlaces se haran a la pagina que acabamos de crear galeria.html). Hay que tomar muy en cuenta que esta pagina que acabamos de crear solo es de muestra, y recordar que las paginas de un sitio deben de tener un diseo similar, pero para efecto de practica y no entretenerse se ha hecho asi.

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

Aparece un cuadro de dialogo y seleccin la pagina a la que quiere enlazar, para este caso galeria y luego clic en Aceptar.

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.

Como se menciono anteriormente se pueden crear enlaces a sitios de internet tambien, para esto se usaran las imgenes inferior como enlaces (recuerde que se pueden crear enlaces de texto y de imagen tambien). Seleleccione la imagen a la que quiere hacer el enlace, para este caso seleccin la de plaza futura.

Haga clic en el menu Insertar y luego seleccione la opcion Hipervinculo

Aparece un cuadro de dialogo, en el campo direccion escribir el url del sitio, para este caso http://torrefutura.com y luego clic en Aceptar.

Haga lo mismo con al imagen de la gran via enlazandolo a http://lagranvia.com.sv y la de galerias a http://www.galerias.com.sv .

Probando el Sitio
Una vez hecho lo anterior es necesario probar el sitio, pre visualizar, probar enlaces, etc., de la siguiente manera: Lo primero es asegurar guardar todo el sitio, para ello se hace clic sobre el icono guardar todo.

Luego haga clic sobre la flecha del icono de vista preliminar, aparecer una serie de opciones que son las diferentes formar de ver el sitio de acuerdo al tipo de navegador y a resoluciones.

Seleccione la opcin Microsoft Internet Explorer 8.0 Revise los enlaces que se crearon y puede probar con otras opciones de pre visualizacin tambin.

Felicidades! Usted ya est preparado para crear sitios web bsicos.