TUTORIAL MICROSOFT EXPRESION WEB 4 Nivel: Bsico-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 podra por lo menos orientarlos. Antes que nada quiero advertir que es para la versin 4, nunca he manejado versiones anteriores (Creo que no debera variar mucho), pero de lo que estoy seguro es que tal vez podra estar desactualizado en cuanto a nuevas versiones.

IntroduccinMicrosoft Expression Web es una herramienta profesional completa para disear, desarrollar y publicar sitios web atractivos, con mltiples caractersticas y compatibles con los estndares web. Ya sea un diseador, un programador o un profesional de diseo visual, Expression Web puede serle til para publicar los diseos 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 espaol, y tiene su equivalente con el programa Dreamweaver, que para muchos es ms amigable. Les recomiendo utilizar ambas suite, ya que manejan bsicamente la misma lgica. Si habis usado alguna vez programas como Visual Studio (programacin), os ser familiar el entorno grfico de Microsoft Expression Web, sino tal vez tengamos problemas en adaptarnos, bueno este es bsicamente el entorno:

Bueno eso es todo, adjunto a este archivo encuentran el .chm con la ayuda para las dems pequeeces 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>Pgina 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 programacin web, sabrn que muchas veces manejamos carpetas y subcarpetas, ya que un SITIO WEB, se compone de varias Pginas web, por lo tanto lo que haremos es lo siguiente:

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

En el circulo amarillo podrn observar una opcin que dice: Plantillas, all hay una serie de plantillas prediseadas para que no tengamos que hacer nada sino modificar lo que necesitemos. En el circulo rojo esta la ubicacin de nuestra carpeta y en el azul el

nombre de nuestra carpeta, en este caso le pondr tutorial, y en cuanto a la ubicacin del archivo pueden dejarlo donde esta o elegir uds el que quieran (Examinar). Ahora hacemos click en Plantillas, y elegimos la primera opcin Organizacin 1

Damos aceptar, esperamos un momento y Qu es esto?!, espero que al igual que yo os sintis abrumados por lo que aparece, muchos esperbamos 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 pestaa nos aparece lo que esperbamos:

Y asi hemos creado un primer sitio predefinido con imgenes 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 (Quin sabr por que?), bueno interactuamos con la pgina:

Y eso es todo, ya hemos aprendido a hacer algo en el expression web (intil?) 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 pgina 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 estis 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 ubicacin que deseen y le dan aceptar.

Nos aparecer el mismo explorador pero esta vez vacio, si miran a la izquierda en LISTA DE CARPETAS veris la ubicacin de tu sitio web.

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

Como vern tambin pueden aadir otro tipo de pginas PHP, ASP, XML, pero utilizaremos HTML,

porque es lo ms fcil, y de todas esas opciones la nica en la que os puedo guiar Despus de dar aceptar:

Ahora si aparece un espacio de trabajo en blanco donde podremos disear nuestros objetos. Circulo Purpura: Pestaa de nuestro sitio Circulo Verde: Pgina Actual Circulo Amarillo: Vista diseo, en ella disearan y agregaran objetos y de cierta forma podrn visualizar como va quedando su trabajo. Crculo Azul: Divide el rea de trabajo en dos ventanas: Diseo y Cdigo Crculo Rojo: Aqu editamos la parte de cdigo.

Bueno esta va a ser nuestra primer pgina 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, pgina principal etc

Ademas podemos hacer click en la opcin 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 algn texto y pgalo, 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 automticamente para que no nos vuelva a aparecer este mensaje y le damos aceptar, y asi me quedo:

Muy fcil no?, si quisiramos hacer esto con bloc de notas, solo veramos cdigo, y el riesgo de equivocarnos sera ms alto. Podis experimentar con las distintas opciones que ofrece el Expression web. Una funcin que me parecio interesante es que el expression web te detecta los estilos que has utilizado en esa pgina, con esto me refiero a:

Como veis escribi cuatro lneas distintas, con distintas propiedades: negrilla, subrayado, cursiva, etc, y en el panel de estilos me aparece cada estilo utilizado en la pgina web, esto es til por que si deseo escribir otra lnea con el mismo formato /estilo de cualquier lnea, simplemente hago click en la lnea 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!