• Author / Uploaded
• Diego Virgüez Castañeda

Citation preview

TUTORIAL MICROSOFT EXPRESION WEB 4 Nivel: Básico-Primitivo Por: LANCE LOGAN WOLFSTAIN, Para: Taringa!

Saludo a toda la comunidad, este es mi primer tutorial espero que les sirva de ayuda… Si son nuevos como yo, ya sea en el desarrollo web o simplemente con Microsoft Expression Web 4, creo que esto podría por lo menos orientarlos. Antes que nada quiero advertir que es para la versión 4, nunca he manejado versiones anteriores (Creo que no debería variar mucho), pero de lo que estoy seguro es que tal vez podría estar desactualizado en cuanto a nuevas versiones.

Introducción “Microsoft Expression Web es una herramienta profesional completa para diseñar, desarrollar y publicar sitios web atractivos, con múltiples características y compatibles con los estándares web. Ya sea un diseñador, un programador o un profesional de diseño visual, Expression Web puede serle útil para publicar los diseños en Web.” -Extracto sacado de la ayuda del programa…

Sabemos que Microsoft Expression Web 4, hace parte de una suite de programas llamado Microsoft Expression, que es la competencia de Adobe Creative Suite, de las cuales hay muchos tutoriales en español, y tiene su equivalente con el programa Dreamweaver, que para muchos es más amigable. Les recomiendo utilizar ambas suite, ya que manejan básicamente la misma lógica. Si habéis usado alguna vez programas como Visual Studio (programación), os será familiar el entorno gráfico de Microsoft Expression Web, sino tal vez tengamos problemas en adaptarnos, bueno este es básicamente el entorno:

Bueno eso es todo, adjunto a este archivo encuentran el .chm con la ayuda para las demás pequeñeces visuales. Puesto que creo que la mejor forma de aprender es en la marcha, creamos nuestro primer proyecto: 1- Abrimos el Microsoft Web Expression (si sé que es mas que obvio pero es la rutina) Ahora que estamos en la pantalla inicial, lo mas instintivo es que vayamos a >Archivo>Nuevo>Página Es lo mas natural si manejamos programas de Microsoft, ¡pero no he dicho que lo hagan!, Si hacen esto crearan una pagina suelta, si ya conocen programación web, sabrán que muchas veces manejamos carpetas y subcarpetas, ya que un SITIO WEB, se compone de varias Páginas web, por lo tanto lo que haremos es lo siguiente:

O si prefieren CTRL+SHIFT+N, hecho esto nos aparecerá:

En el circulo amarillo podrán observar una opción que dice: Plantillas, allí hay una serie de plantillas prediseñadas para que no tengamos que hacer nada sino modificar lo que necesitemos. En el circulo rojo esta la ubicación de nuestra carpeta y en el azul el

nombre de nuestra carpeta, en este caso le pondré tutorial, y en cuanto a la ubicación del archivo pueden dejarlo donde esta o elegir uds el que quieran (Examinar…). Ahora hacemos click en “Plantillas”, y elegimos la primera opción “Organización 1”

Damos aceptar, esperamos un momento y… ¡¿Qué es esto?!, espero que al igual que yo os sintáis abrumados por lo que aparece, muchos esperábamos que apareciera simplemente la imagen de la vista previa , pero lo que nos aparece es una especie de explorador con carpetas, vaya recibimiento para un novato…

Aun asi mantengamos la calma, si observamos en el explorador debemos elegir el archivo que dice DEFAULT.HTML le damos doble click y charan!: en una nueva pestaña nos aparece lo que esperábamos:

Y asi hemos creado un primer sitio predefinido con imágenes y otros, aunque a decir verdad no hemos hecho nada, ahora damos “F12” (igual que en dreamweaver) y nos debe aparecer el sitio web, minimo en el Internet Explorer (¿Quién sabrá por que?), bueno interactuamos con la página:

Y eso es todo, ya hemos aprendido a hacer algo en el expression web (¿inútil?) solo con la ambicion de conocer las posibilidades que nos da este programa, ahora buscamos la carpeta en el explorador de Windows en mi caso es : “C:\Users\Wolfstain\Documents\My Web Sites\misitio” Si deseamos trasladar nuestra página web en una memoria usb, o en otro dispositivo es completamente obligatorio copiar toda la carpeta con todos los archivos respectivos. Podeis cerrar el programa…

CREANDO UN SITIO WEB DESDE CEROS:

Ya es hora de aprender desde cero, así que vamos a crear un sitio web desde cero, como ya vimos en el anterior tutorial como hacerlo, espero que estéis ubicados ya en esta pantalla:

En vez de elegir Plantillas como en el anterior tutorial elegimos “Sitio Web Vacio”, le ponen el nombre que quieran, y la ubicación que deseen y le dan aceptar.

Nos aparecerá el mismo explorador pero esta vez vacio, si miran a la izquierda en “LISTA DE CARPETAS” veréis la ubicación de tu sitio web.

Ahora SI vamos a >ARCHIVO > NUEVO >PAGINA y seleccionamos HTML

Como verán también pueden añadir otro tipo de páginas PHP, ASP, XML, pero utilizaremos HTML,

porque es lo más fácil, y de todas esas opciones la única en la que os puedo guiar… Después de dar aceptar:

Ahora si aparece un espacio de trabajo en blanco donde podremos diseñar nuestros objetos. Circulo Purpura: Pestaña de nuestro sitio Circulo Verde: Página Actual Circulo Amarillo: Vista diseño, en ella diseñaran y agregaran objetos y de cierta forma podrán visualizar como va quedando su trabajo. Círculo Azul: Divide el área de trabajo en dos ventanas: Diseño y Código Círculo Rojo: Aquí editamos la parte de código.

Bueno esta va a ser nuestra primer página del sitio por lo tanto tenemos que darle un nombre acorde y guardarlo, esto lo podemos hacer de varias formas:  >Archivo >Guardar  Ctrl + G  Nos aparecerá un miniexplorador, en la carpeta de nuestro sitio web, allí lo guardaremos con un nombre como “inicio”, “página principal” etc…

Ademas podemos hacer click en la opción cambiar titulo y escribir el titulo que queremos que aparesca en nuestro navegador mientras esta activa esta pagina:

Le damos “aceptar” y “guardar”. Ahora oprimimos “F12” y en nuestro navegador aparecerá:

Si, una pagina en blanco, al menos ya aparece en el titulo del explorador el titulo que le dimos a la pagina en mi caso Inicio (si ya han programado en html debo parecer un tonto explicando esto, pero lo hacemos por los nuevos). Ya pueden cerrar el explorador, ahora si os fijais en el panel “lista de carpetas” que espero ya reconozcan:

Alli veremos la pagina que hemos creado en la respectiva carpeta. Ahora para probar el entorno podemos escribir lo que queramos en el área de trabajo, hazlo al mejor estilo de Word, copia algún texto y pégalo, centra el texto etc, esto lo puedes hacer en la barra superior:

Asi me quedo mi texto:

Y ahora le damos F12 y nos puede aparecer este mensaje:

Le damos check donde dice “guardar pagina automáticamente…” para que no nos vuelva a aparecer este mensaje y le damos aceptar, y asi me quedo:

¿Muy fácil no?, si quisiéramos hacer esto con bloc de notas, solo veríamos código, y el riesgo de equivocarnos sería más alto. Podéis experimentar con las distintas opciones que ofrece el Expression web. Una función que me parecio interesante es que el expression web te detecta los estilos que has utilizado en esa página, con esto me refiero a:

Como veis escribi cuatro líneas distintas, con distintas propiedades: negrilla, subrayado, cursiva, etc, y en el panel de estilos me aparece cada estilo utilizado en la página web, esto es útil por que si deseo escribir otra línea con el mismo formato /estilo de cualquier línea, simplemente hago click en la línea donde quiero escribir, luego click en el estilo y ¡listo!

Bueno eso es todo por ahora, espero que les haya servido al menos un poco, cuando inicie el tutorial realmente no sabia nada, ahora que termine la primera parte, he aprendido tanto como ustedes… ¡Gracias!