Diseo de Pgina Web

Diseo de Pgina WebTaller de Microsoft Expression WebUniversidad Interamericana de Puerto RicoRecinto de AguadillaProfa. Maritza Quiones VargasADSO 4500Telecomunicaciones en la OficinaIntroduccinSegn avanza la tecnologa y los medios de telecomunicaciones se van creando programas ms avanzados para el diseo de sitios y pgina Web. Se utilizaba programas, como: Microsoft Publisher, Microsoft Front Page y los ms nuevo en el mercado lo es Microsoft Expression Web. Existen un sin nmero de programas utilizados para la preparacin de pginas Web, que se ajustan a las necesidades de los diseadores.Microsoft Front PagePrograma utilizado para crear pginas de Web de forma sencilla y sin tener conocimientos previos en HTML.Creado originalmente por la compaa Vermeer Technologies Inc. y adquirido por Microsoft en 1996.Utiliza la tecnologa WYSYWYG (What you see is what you get). Esto quiere decir que lo que se visualice, lo que ves en pantalla, es lo que se obtiene. Este editor permite crear pginas a travs de un interfaz grfico que simplifica la entrada de texto y grficos directamente en el rea de escritura.Microsoft Expression WebEditor HTML utilizado para crear pginas Web modernas. Creado para sustituir al Programa Front Page 2003. Basada en una poderosa herramienta de diseo que contiene estndares de calidad para el Web. Utiliza el mecanismo WYSIWYG para modificar las pginas Web.Permite disear, desarrollar y publicar sitios web atractivos y con mltiples caractersticas.Expression WebFue lanzado en el mercado para el 2006 y es compatible con CSS, Microsoft Silverlight, entre otros. CSS (Cascading Style Sheets = hojas de estilo en cascada). Es un lenguaje usado para definir la presentacin de un documento estructurado escrito en HTML. Separa los elementos. Microsoft Silverlight es un complemento para varias plataformas y exploradores que ofrece aplicaciones con gran interactividad y vdeo para WebUtiliza la caracterstica de vista previa para ver vistas reales de la pgina con el explorador instalado en el equipo, justo en Expression Web. Cmo inicial el ProgramaDesde el botn de Inicio o Start Luego coloca el cursor sobre Programas o Programs Microsoft ExpressionMicrosoft Expression Web

Desde el icono de Access

Start

Pantalla Inicial3124 2

Partes de la Pantalla InicialMens y Barras de Herramientas Permiten realizar tareas como guardar archivos y sitios, generar informes y cambiar la forma de ver una pgina.Paneles de TareasPermiten realizar tareas comunes, como administrar los archivos de un sitio, agregar etiquetas a una pgina y administrar estilos. Al iniciar el programa se muestran los paneles Lista de carpetas, Propiedades de etiqueta, Aplicar estilos y Cuadro de herramientas, acoplados a los lados de la ventana de edicin.

12Cont. Partes de la Pantalla InicialBajo el men Paneles se encuentran todos los paneles que le ayudar a la edicin de la pgina. Puede tener varios paneles abiertos a la vez.Los paneles estn organizados en seis grupos. Aparecen como paneles combinados y ocupan el mismo espacio, ya que aparecen una detrs del otro y se activan al seleccionar la pestaa.Para devolver los paneles a la apariencia original en el rea de trabajo, tienes que ir al men Paneles, y seleccionar Restablecer diseo del rea de trabajo. Ventana de Edicin Permite editar visualmente las pginas o editar directamente el marcado de la pgina.Barra de estado Me muestra informacin importante sobre los sitios y las pginas.Modo de ediciones Modo de aplicaciones de estilo Modo de representacinModo de tamao de pginaTamao del archivoEsquema HTMLEsquema CSSCont. Partes de la Pantalla Inicial34Ventana de EdicinLa pgina se crea y se edita en la ventana de edicin. Al abrir una pgina Web se crea una pestaa titulada Site View (Vista Sitio).

Crear Pgina WebPara crear sitios Web buscas Archivos (File). Luego en New y te presenta varias opciones para disear la Pgina Web.Page (Pgina en Blanco)Web Site (Provee varios modelos de pginas, entre ellos las Plantillas/Templetes)Otros

Pantalla New Web Page

Esta pantalla contiene dos pestaas. En la primera pestaa Page contiene modelos de pginas en blanco utilizando diferentes estilos.La segunda pestaa Web Site contiene dos seccionesGeneral pginas en blancos que te permite importar o exportar pginasTemplates contiene modelos de diferentes pginas Web o sitios Web. Estos template contiene enlaces a diferentes pginas dentro del sitio Web.En esta misma pantalla provee para que selecciones la localizacin del nuevo sitio Web a Crear. Debes guardar el sitio Web con otro nombre en la carpeta creada.Una vez seleccionado la localizacin, presionas Ok.Ejercicio - TallerCrear una Pgina Web Utilizando Plantillas (Templete)Abra el Programa Expression WebBusca File New Web PageTemplete

En la siguiente pantalla selecciona TempleteEscoge el Templete que ms te guste y que se acople al sitio Web que vas a disear.Especifica el lugar donde guardar tu sitio WebBrowse Pendrive Luego, coloca tu nombre despus de la direccin que aparece en la barra LocationPresiona Ok.

Una vez abra el sitio Web, ve al panel titulado Folder List y selecciona Default.htm para que puedas ver la pgina en la Ventana de Edicin.

Procede a editar la pgina segn la informacin que hayas seleccionado para tu trabajo.

Notars que al pasar el cursor sobre algunas reas de la pgina, como lo es el encabezado, aparece el smbolo . Esto quiere decir que esas reas no pueden ser modificadas mediante la pgina Default.htm.

Desde la pgina master.dwt puedes editar el ttulo y la tabla de contenido y otras reas.

Para editar esas reas debes seleccionar en el panel titulado Folder List y selecciona master.dwt para que puedas ver la pgina en la Ventana de Edicin.Procede a hacer los cambios necesarios en las pginas default.htm y master.dwt.Una vez terminado de hacer los cambios, guardas los cambios.Para ver tu sitio Web creado, ve a la lupa que se encuentra en la barra de herramientas y presiona la misma.

El sitio Web creado abrir en bajo el programa Windows Internet Explorer.

Recuerda que debes guardas los cambios realizados en las pginas default.htm y master.dwt. Para ver tu pgina debes estar en la pgina default.htm antes de presionar la lupa

ReferenciasExpression Web. (2010). Disponible en lnea en http://es.wikipedia.org/wiki/Expression_WebFree CSS Template. (2008). Disponible en lnea en http://www.free-css-templates.com/Lpez, Miguel. (2009). Curso de diseo y autora de sitios con Microsoft Expression Web. Disponible en lnea en http://www.desarrollaconmsdn.com/msdn/CursosOnline/Curso_Expression_Web/index.htmlMicrosoft Expression Web 3. (2009). Disponible en lnea en http://expression.microsoft.com/es-es/library/dd440765.aspxWebquest, Weblog, Front Page y Servidor. (2009). Disponible en lnea en http://grupo8-2deespecial.blogspot.es/i2009-12/