Microsoft Expression Web - Guía rápida
Microsoft Expression Web es una herramienta profesional con todas las funciones para diseñar, desarrollar y publicar sitios web ricos en funciones que se ajustan a los estándares web. Puede utilizar Expression Web para crear páginas web y sitios que le permitan transferir archivos entre su computadora y su cuenta de alojamiento.
Expression Web puede diseñar y desarrollar páginas web utilizando HTML5, CSS 3, ASP.NET, PHP, JavaScript, XML + XSLT y XHTML.
Expression Web 4 requiere .NET Framework 4.0 y Silverlight 4.0 para instalarse y ejecutarse.
Microsoft Expression Web: historial
Microsoft Expression Web - Historia Microsoft lanzó la primera versión de Community Technology Preview (CTP) de Expression Web el 14 de mayo de 2006.
Microsoft Expression Web 4 fue lanzado el 7 de junio de 2010.
Agregó la opción de complementos HTML y acceso a una funcionalidad basada en web para probar páginas en navegadores que no se pueden instalar en el sistema del usuario, como los navegadores Mac OS X o Linux.
También proporciona un Comprobador de SEO mediante el cual puede analizar sitios web ya creados con las mejores prácticas para obtener las clasificaciones más altas posibles en los motores de búsqueda.
Paquetes de servicios web de Expression
Expression Web Service Packs Expression Web 4 Service Pack 1 se lanzó en marzo de 2011 y agregó soporte para IntelliSense para HTML5 y CSS.
Expression Web 4 Service Pack 2 se lanzó en julio de 2011. Se solucionó una serie de problemas e introdujo nuevas funciones como:
- Soporte jQuery IntelliSense
- un panel para administrar fragmentos
- Panel de instantáneas interactivo
- funcionalidad de comentar / descomentar en la vista de código, y
- personalización del espacio de trabajo y la barra de herramientas.
En diciembre de 2012, Microsoft anunció que Expression Studio ya no será un producto independiente. Expression Blend se integra en Visual Studio, mientras que Expression Web y Expression Design ahora serán productos gratuitos.
Requisitos del sistema
Para crear un sitio web con Microsoft Expression Web, su computadora debe cumplir con los siguientes requisitos:
- Debe tener al menos Windows XP con Service Pack 3 o los últimos sistemas operativos.
- Debería tener una PC con un procesador de 1 GHz o más rápido.
- Su PC debe tener 1 GB de RAM o más.
- Su PC debe tener 2 GB o más de espacio disponible en el disco duro.
- Debería tener .NET Framework 4.0 y Silverlight 4.0.
- Su PC debe ser compatible con gráficos Microsoft DirectX® 9.0.
- Debería tener una unidad compatible con DVD.
- Debe tener un monitor con una resolución de 1024 × 768 o superior con color de 24 bits.
- Algunas funciones del producto requieren Firefox 3.0 o posterior, Internet Explorer 8. Por lo tanto, debería tener la misma versión.
Los requisitos reales y la funcionalidad del producto pueden variar según la configuración y el sistema operativo de su sistema.
Microsoft proporciona una versión gratuita de Microsoft Expression Web que se puede descargar desde https://www.microsoft.com/en-pk/download/details.aspx?id=36179
Instalación
Step 1 - Antes de que pueda instalar Expression Web, deberá tener instalado .NET Framework 4.0.
Step 2- Una vez completada la descarga, ejecute el instalador. Se mostrará el siguiente cuadro de diálogo.
Step 3 - Haga clic en el botón Aceptar.
Step 4 - Seleccione el botón de opción Sí y luego haga clic en Siguiente.
Step 5- También puede elegir otra ubicación para la instalación. Seleccione la ubicación y haga clic en el botón Instalar.
Comienza el proceso de instalación.
Una vez que se complete la instalación, verá el siguiente cuadro de diálogo.
Step 6 - Haga clic en Finalizar para continuar.
En el capítulo anterior, hemos instalado Microsoft Expression Web y ahora estamos listos para comenzar a trabajar en él. En este capítulo, aprenderemos cómo crear un nuevo sitio web desde cero.
Crear una página web
Para crear un nuevo sitio web, abramos Microsoft Expression Web.
A continuación, debe seguir los pasos que se indican a continuación.
Step 1 - Seleccionar Site → New Site… opción de menú.
Step 2 - Se abrirá el siguiente cuadro de diálogo desde el que puede crear o importar diferentes tipos de sitio web.
Step 3 - Por simplicidad, seleccionemos General → One Page Site.
Especifique la ubicación o puede buscar la ubicación donde desea que se cree el nuevo sitio web.
Escriba el nombre de su web en el campo de nombre y haga clic en Aceptar.
Step 4 - La nueva web se creará con una página denominada default.htm. Cambiemos el nombre aindex.html con un clic derecho en el archivo y haciendo clic en la opción Cambiar nombre.
Step 5 - El predeterminado doctype utilizado en Expression Web es -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">Puede verlo simplemente cambiando al code view.
Puede cambiar el tipo de documento desde Tools → Page Editor Options → Authoring.
Step 6 - Ahora, agreguemos <h1> etiqueta dentro del body etiqueta y algo de texto como se muestra en el siguiente código.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
</head>
<body>
<h1>
This my first Web page
</h1>
</body>
</html>Step 7 - Para ver nuestra web en un navegador, vayamos al menú Archivo y seleccionamos el Preview in Browser → Any browser, digamos, Internet Explorer.
Abrirá nuestra web en Internet Explorer.
Como ya hemos creado nuestro sitio web, ahora necesitaremos crear nuestra página de inicio. En el capítulo anterior, hemos creado un sitio web de una página, y nuestra página de inicio fue creada en ese momento automáticamente por Expression Web. Por lo tanto, si ha creado un sitio web en blanco, deberá crear una página de inicio para su sitio.
Microsoft Expression Web puede crear los siguientes tipos de páginas:
- HTML
- ASPX
- ASP
- PHP
- CSS
- Página principal
- Plantilla web dinámica
- JavaScript
- XML
- Archivo de texto
En este capítulo crearemos una página HTML y su correspondiente hoja de estilo.
Crear una página en blanco
Para crear una página en blanco, simplemente vaya al menú Archivo y seleccione New → Page… opción de menú.
Desde el nuevo cuadro de diálogo, puede crear diferentes tipos de páginas en blanco, como página HTML, página ASPX, página CSS, etc. y hacer clic en Aceptar.
Como puede ver aquí, Microsoft Expression Web ya agregó el código predeterminado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<h1>
This is a blank web page
</h1>
</body>
</html>Como puede ver, su página recién creada tiene el nombre de archivo Untitled_1.html o Untitled_1.htm. Deberá guardar la página presionando Ctrl + S y especificar el nombre.
Como nuestro sitio web ya contiene un index.htmlpágina, no necesitamos otra. Sin embargo, si ha creado un sitio web vacío, asigne un nombre a esta páginaindex.html.
Para ver su web en un navegador, vayamos al menú Archivo y seleccionemos Preview in Browser → Any browser, digamos Internet Explorer.
Crear una página CSS
Veamos el proceso paso a paso para crear una página CSS.
Step 1 - Para crear una página CSS, vaya al menú Archivo y seleccione New → Page… opción de menú.
Step 2 - Seleccionar General → CSS y haga clic en Aceptar.
Step 3 - Guarde la página y escriba un nombre para la hoja de estilo.
Step 4 - Haga clic en el Save botón.
Step 5 - Ahora, vayamos a la página index.html.
Step 6 - En el Manage Styles Panel, haga clic en Attach Style Sheet.
Step 7 - Busque su hoja de estilo y seleccione la página actual de "Adjuntar a" y el enlace de "Adjuntar como" y haga clic en Aceptar.
Step 8 - Ahora, verá que se agrega una nueva línea automáticamente en la página index.html.
<link href = "sample.css" rel = "stylesheet" type = "text/css" />Step 9 - el bodyelemento define el cuerpo del documento. Para estilizar el<body>etiqueta, necesitamos crear un nuevo estilo. Primero, seleccione la etiqueta del cuerpo en la Vista de diseño y luego haga clic en Nuevo estilo ... en el panel Aplicar estilos o en el panel Administrar estilos, que abrirá el cuadro de diálogo Nuevo estilo.
Aquí puedes definir las diferentes opciones para tu estilo. El primer paso es seleccionar el cuerpo de la lista desplegable Selector y luego seleccionar la hoja de estilo existente de la lista desplegable "Definir en".
Step 10 - Desde la URL, seleccione el sample.cssarchivo. En el lado izquierdo, hay una lista de categorías como fuente, fondo, etc. y actualmente la fuente está resaltada. Configure la información relacionada con la fuente según sus requisitos como se muestra en la captura de pantalla anterior y haga clic en Aceptar.
Step 11- Ahora puedes ver en la vista de diseño que el color de fondo y la fuente han cambiado a lo que hemos seleccionado. Ahora, si abre el archivo sample.css, verá que toda la información se almacena automáticamente en el archivo CSS.
Obtengamos una vista previa de nuestra página web en un navegador. Observará que el estilo se aplica desde el archivo CSS.
En este capítulo, cubriremos el diseño básico de sus páginas web. Antes de crear el diseño de nuestra página web, debemos pensar en nuestro contenido y luego diseñar cómo queremos presentar ese contenido, ya que es el contenido que será visible en nuestro sitio web.
Depende de nosotros cómo presentamos nuestro contenido para que nuestros espectadores encuentren nuestro sitio y luego se queden para verlo. El diseño probablemente incluirá el logotipo o el banner de la empresa en la parte superior, el menú de navegación, un área de contenido que puede incluir varias columnas y un pie de página en la parte inferior de la página.
Anteriormente, los desarrolladores usaban tablas para lograr este aspecto. Las tablas crearon un grupo de cajas que se utilizaron para crear filas y columnas. Ahora, los diseñadores web utilizan<div>s para formar los cuadros y CSS para colocar esos cuadros en la página.
etiqueta <div>
A continuación se muestran algunas de las características de la etiqueta <div>.
La etiqueta <div> define una división o una sección en un documento HTML y facilita la administración, el estilo y la manipulación de esas divisiones o secciones.
Se utiliza para agrupar elementos de bloque para formatearlos con CSS.
Los navegadores suelen colocar un salto de línea antes y después del elemento div.
La etiqueta <div> es un elemento a nivel de bloque.
La etiqueta <div> puede contener casi cualquier otro elemento.
La etiqueta <div> no puede estar dentro de una etiqueta <p>.
Ejemplo
Echemos un vistazo a un ejemplo simple en el que usaremos etiquetas <div> </div> para crear los distintos cuadros y reglas de estilo.
Step 1 - Abra Expression Web y luego el index.html página que creamos en el capítulo anterior.
Step 2- Como se ve en la captura de pantalla anterior, la vista de código está resaltada de forma predeterminada. Puedes trabajar enCode View o Design View, pero también puede ver la Vista dividida que abrirá tanto la Vista de código como la Vista de diseño. Así que seleccionemos elSplit View opción.
Step 3 - el bodyelemento define el cuerpo del documento. Para diseñar la etiqueta <body>, necesitamos crear un nuevo estilo. Primero seleccione la etiqueta del cuerpo en la Vista de diseño y luego haga clic en elNew Style…en el panel Aplicar estilos, que abrirá el cuadro de diálogo Nuevo estilo. Aquí puedes definir las diferentes opciones para tu estilo.
Step 4 - El primer paso es seleccionar el body desde el Selectorlista desplegable y luego seleccione la hoja de estilo existente de "Definir en" la lista desplegable. Desde la URL, seleccione el archivo CSS que hemos creado en el capítulo anterior.
En el lado izquierdo, hay un Categorylista como Fuente, Fondo, etc. y la Fuente actual está resaltada. Configure la información relacionada con la fuente según sus requisitos, como se muestra en la captura de pantalla anterior.
Step 5 - Seleccione el Background colorusted quiere. También puede seleccionar la imagen para su fondo usando el botón del navegador. Una vez que haya terminado con el fondo, defina sus bordes si lo desea.
Step 6 - Seleccionemos el double lineopción para el borde y elija el ancho y el color también de las listas desplegables. Una vez que haya terminado con el estilo, haga clic en Aceptar.
Step 7- Ahora puede ver en la vista de diseño que el color de fondo se cambia al que hemos seleccionado. Si abre el archivo sample.css, verá que toda la información se almacena automáticamente en el archivo CSS.
Step 8 - Ir al index.html página de nuevo y arrastre el <div> desde el panel 'Caja de herramientas' y suéltelo en su página abierta.
Step 9 - Por encima del code view, ya verás <body> y <div> etiquetas, haga clic en el <div>y luego en el panel Aplicar estilos, haga clic en Nuevo estilo…. que abrirá el cuadro de diálogo Nuevo estilo.
Escriba "#container" en el campo de selección. La marca de almohadilla # es un selector de ID. En la lista desplegable "Definir en", seleccione la hoja de estilo existente y marque la opción "Aplicar nuevo estilo a la selección de documentos". Vaya a la categoría Fondo.
Step 10 - Seleccione el color de fondo, seleccionemos el color blanco y luego vayamos a la categoría Caja.
Step 11 - Definir padding y margin y luego ir al Position categoría
Step 12- Establezca el ancho al 90%. Sin embargo, no especifique la altura ya que aquí queremos que el contenedor se expanda cuando ingresemos al contenido. Haga clic en el botón Aceptar.
De manera similar, agreguemos estilos para el encabezado, la navegación superior, la navegación izquierda, el contenido principal y el pie de página.
sample.css
A continuación se muestra el código en sample.css hoja de estilo después de agregar todos los estilos mencionados anteriormente.
body {
font-family: Calibri;
font-size: medium;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
color: #0000FF;
background-color: #CCFFFF;
background-image: none;
border: medium double #FF0000;
}
#container {
background-color: #FFFFFF;
padding: 8px;
margin: 8px;
width: 90%;
}
#header {
background-color: #54B431;
background-repeat: no-repeat;
background-position: right center;
height: 170px;
}
#top-nav {
height: 50px;
border-top: solid medium #006600;
border-bottom: solid medium #006600;
background-color: #FFFFFF;
}
#left-nav {
margin: 20px 0px 10px 0px;
width: 180px;
float: left;
border: thin dashed #006600;
}
#main-content {
margin: 20px 10px 10px 200px;
background-color: #CCFFCC;
}
#footer {
border-top: 2px solid #006600;
clear: both;
padding: 10px 0px;
text-align: center;
}index.html
A continuación se muestra el código en el archivo index.html después de agregar todas las etiquetas <div>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<style type = "text/css"></style>
<link href = "sample.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"></div>
<div id = "top-nav"></div>
<div id = "left-nav"></div>
<div id = "main-content"></div>
<div id = "footer"></div>
</div>
</body>
</html>Salida
El diseño de su página en la vista de diseño se verá como se muestra en la siguiente captura de pantalla.
En este capítulo, aprenderemos otra forma de diseñar el diseño de una página. En el último capítulo, usamos la hoja de estilo para aplicar los estilos al encabezado, pie de página, etc. pero también puede especificar los estilos en la página HTML sin usar una hoja de estilo adicional.
Esta no es la forma recomendada de diseñar un diseño, sin embargo, solo para comprender el propósito, cubriremos esta técnica aquí. Intente seguir los pasos que se indican a continuación.
Step 1 - Agreguemos una página HTML y llamémosla layoutdemo.html
Step 2 - Ahora agregue el <div> tag desde la Caja de herramientas.
Step 3 - En el Apply Styles panel, haga clic en el New Style…
Step 4- Cuando seleccione la opción Página actual del menú desplegable "Definir en", el estilo se guardará en la misma página HTML. Configure la Fuente para su página y luego vaya a la categoría Fondo.
Step 5- Establezca el color de su fondo. También puede configurar las categorías Borde, Cuadro y Posición y luego hacer clic en Aceptar.
layoutdemo.html
Puede ver que el estilo se agrega en el mismo archivo HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
<style type = "text/css">
#container {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
color: #800000;
background-color: #C0C0C0;
padding: 8px;
margin: 8px;
width: 90%;
}
</style>
</head>
<body>
<div id = "container"></div>
</body>
</html>Del mismo modo, puede agregar otros estilos como encabezado, pie de página, contenido principal, etc., como se muestra arriba.
En este capítulo, aprenderemos cómo agregar navegación horizontal o menu items al sitio web.
Step 1 - Para crear elementos de menú o navegación horizontal, agreguemos el siguiente código en <div id = “top-nav”> en el archivo index.html, que contiene la lista de elementos del menú.
<div id = "top-nav">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>Step 2- Es una lista simple con viñetas para el menú superior. Para crear un hipervínculo, vaya a ladesign view o code view.
Step 3 - Seleccione el elemento que desea usar como hipervínculo y presione Ctrl + K.
Step 4 - Haga clic en el botón ScreenTip….
Step 5 - Introduzca el texto que desee como sugerencia en pantalla y haga clic en Aceptar.
Step 6 - En el Text to display campo, ingrese Home y seleccione el archivo index.html y luego haga clic en Aceptar.
Step 7 - De manera similar, agregue hipervínculos para otros elementos del menú, como se muestra en el siguiente código.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset=utf-8" http-equiv = "Content-Type" />
<style type = "text/css"></style>
<link href = "sample.css" rel="stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"></div>
<div id = "top-nav">
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
<li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
<li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
</ul>
</div>
<div id = "left-nav"> </div>
<div id = "main-content"> </div>
<div id = "footer"> </div>
</div>
</body>
</html>Step 8 - Para establecer el estilo de la navegación superior, vaya a la Manage Styles panel.
Step 9 - Haga clic derecho en “#top-nav”y seleccione Modificar estilo. Seleccione la categoría 'Borde' y cambie el ancho a delgado.
Step 10 - Seleccione la categoría Cuadro y desmarque el relleno 'Igual para todos' e ingrese 10 en los campos superior e inferior.
Step 11 - Ir al Position categoría.
Step 12 - Retire el 50 de la heightcampo y haga clic en Aceptar. En el panel Aplicar estilos, haga clic en Nuevo estilo ...
Step 13 - Entrar #top-nav ulen el campo Selector y seleccione la hoja de estilo existente en el menú desplegable "Definir en". En la categoría Bloque, seleccione el centro del campo de alineación de prueba y vaya a la categoría Lista.
Step 14 - Seleccionar none desde el list-style-type campo y haga clic en Aceptar.
Step 15 - De nuevo, desde el Apply Styles panel, haga clic en Nuevo estilo ... Entrar #top-nav ul lien el campo Selector. Luego, seleccione la hoja de estilo existente en el menú desplegable "Definir en" y vaya a la categoría Diseño.
Step 16 - Seleccionar inline desde el display campo y haga clic en Aceptar.
Step 17 - Vaya al panel Aplicar estilos, haga clic en Nuevo estilo ... Entrar #top-nav ul li a en el campo Selector y seleccione la hoja de estilo existente en el menú desplegable "Definir en" y seleccione blanco como color de fuente.
Step 18 - Ir al Background categoría.
Step 19 - Seleccionar green como color de fondo y vaya al Box category.
Step 20 - Establecer el padding values y haga clic en Aceptar.
Step 21- Ahora vayamos al panel Aplicar estilos nuevamente y hagamos clic en Nuevo estilo. Entrar#topnav ul li a:hover en el campo Selector y seleccione la hoja de estilo existente en el menú desplegable "Definir en" y seleccione black como el font color.
Step 22 - Ahora ve al Background category.
Step 23 - Seleccione el color de fondo para su opción de menú cuando el mouse esté sobre el elemento del menú y vaya a la categoría Borde.
Step 24- Seleccione el estilo, el ancho y el color del borde y haga clic en Aceptar. Para comprobar cómo se ve, vaya al menú Archivo y seleccione Vista previa en el navegador.
Cuando pasa el mouse sobre cualquier elemento del menú, cambiará el fondo y el color de la fuente.
En este capítulo, aprenderemos cómo agregar navegación vertical o elementos de menú al sitio web. Vayamos paso a paso.
Step 1 - Para crear elementos de menú o navegación vertical, agreguemos el siguiente código en <div id = “left-nav”> en el archivo index.html que contiene la lista de elementos del menú.
<div id = "left-nav">
<p>Site Navigation</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>Step 2- Es una lista simple con viñetas para su menú principal. Para crear un hipervínculo, vaya a ladesign view o code view.
Step 3 - Seleccione el elemento que desea usar como hipervínculo y presione Ctrl + K.
Step 4- Haga clic en el botón Información en pantalla…. Introduzca el texto que desee comoscreentip y haga clic en Aceptar.
Step 5 - En el Text to display campo, ingrese Home y seleccione el archivo index.html y luego haga clic en Aceptar.
En esta etapa, nuestra página index.html tiene el siguiente aspecto:
Step 6 - Agregue más hipervínculos para otros elementos del menú, como se muestra en el siguiente código.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<style type = "text/css"></style>
<link href = "sample.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"></div>
<div id = "top-nav">
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
<li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
<li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
</ul>
</div>
<div id = "left-nav">
<p>Site Navigation</p>
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li>
<li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li>
<li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li>
</ul>
</div>
<div id = "main-content"></div>
<div id = "footer"></div>
</div>
</body>
</html>Step 7- Para configurar el estilo para la navegación superior, vaya al panel Administrar estilos. Haga clic derecho en#left-nav y seleccione Modificar estilo ...
Step 8 - Ingrese el valor 0.9 en el campo de tamaño de fuente y seleccione em de la lista desplegable junto al tamaño de fuente y vaya a la categoría Cuadro.
Step 9- Marque el relleno 'Igual para todos' e ingrese 5 en el campo superior y haga clic en Aceptar. En el panel Aplicar estilos, haga clic en Nuevo estilo ...
Step 10 - Entrar #left-nav ulen el campo Selector. Seleccione la hoja de estilo existente en el menú desplegable "Definir en" y en la categoría Lista, no seleccione ninguna del campo de tipo de estilo de lista y haga clic en Aceptar.
Step 11 - De nuevo, desde el Apply Styles panel, haga clic en New Style. Desmarque el relleno 'Igual para todos'. Ingrese 0.2 en el campo inferior y haga clic en Aceptar.
Step 12 - Entrar #left-nav ul li en el campo Selector y seleccione la hoja de estilo existente en el menú desplegable "Definir en" y vaya a la categoría Cuadro.
Step 13 - Vaya al panel Aplicar estilos y haga clic en Nuevo estilo.
Step 14 - Entrar #left-nav ul li a en el campo Selector y seleccione la hoja de estilo existente en el menú desplegable "Definir en" y seleccione blanco como color de fuente.
Step 15- Vaya a la categoría Fondo. Seleccione el color como color de fondo
Step 16 - Ir al Box categoría y establezca los valores de relleno.
Step 17 - Ir al Layoutcategoría. Seleccioneblock desde el display menú desplegable y haga clic en Aceptar.
Step 18- Ahora vayamos al panel Aplicar estilos nuevamente y hagamos clic en Nuevo estilo. Entrar#left-nav ul li a:hoveren el campo Selector y seleccione la hoja de estilo existente en el menú desplegable "Definir en". Seleccione negro como color de fuente.
Step 19- Ahora ve a la categoría Fondo. Seleccione el color de fondo para su opción de menú cuando el mouse esté sobre el elemento del menú y haga clic en Aceptar.
Step 20 - Para comprobar cómo se ve, vaya al menú Archivo y seleccione Vista previa en su navegador.
Cuando coloca el mouse sobre cualquier elemento del menú, cambiará su fondo y color de fuente.
En este capítulo, aprenderemos cómo asegurarnos de que nuestro código HTML y CSS se valida. Microsoft Expression Web proporciona varias formas de comprobar sus páginas web en busca de errores de código y el código que es incompatible con un esquema HTML y CSS en particular.
La barra de estado y la vista de Código le advierten sobre errores de código e incompatibilidad en una sola página, mientras que el panel de tareas Compatibilidad enumera todos los errores de código e incompatibilidad en una o más páginas, o en un sitio web completo.
Expression Web identifica el código incompatible mediante un esquema de documento que se basa en la declaración DocType en una página.
Si la página no contiene una declaración DocType o no se reconoce el DocType, Expression Web usa una secondary schema.
Cuando crea un sitio y trabaja en sus páginas, debe desarrollar el hábito de validar las páginas. Microsoft Expression Web tiene varias herramientas que pueden ser muy útiles al validar sus páginas web. Hay dos opciones muy útiles en Expression web, así que vayamos al menú Herramientas y seleccionemos la opción Editor de página.
La pestaña General ofrece dos opciones:
Highlight Invalid HTML - Esta opción cuando está marcada, mostrará un HTML no válido en un esquema de color específico y el predeterminado en texto rojo sobre un fondo amarillo.
Highlight Incompatible HTML - Esta opción cuando está marcada, mostrará un subrayado ondulado debajo del código que no es compatible con los estándares HTML.
Barra de estado
Cuando la página web actual y abierta contiene un error de código, puede ver un Code Error Detected icono (resaltado en la siguiente captura de pantalla).
Supongamos que olvidó el símbolo ">" en una etiqueta </div> -
<div id = "footer"></div>En este caso, la barra de estado en la parte inferior de la ventana del programa muestra el icono de Error de código detectado.
Cuando seleccione "Ir a error" en el menú desplegable, lo llevará a la línea donde existe el error y podrá corregir la sintaxis fácilmente.
Cuando la página contiene un código que es incompatible con el DocType especificado, la barra de estado muestra un HTML Incompatibility Detected icono.
Supongamos que ha utilizado "hre" para un hipervínculo en lugar de "href", lo cual es un error.
<li><a href = "index.html" title = "Site Home Page">Home</a></li>La barra de estado muestra el icono de incompatibilidad HTML detectada como se muestra en la siguiente captura de pantalla.
Cuando seleccione "Ir a error" en el menú desplegable, lo llevará a la línea donde existe el error y podrá corregir la sintaxis fácilmente.
Informe de compatibilidad
Un informe de compatibilidad comprueba las páginas y los archivos CSS en busca de errores de código y el código que es incompatible con el DocType y el esquema CSS que especifique. Puede generar un informe que verifique solo archivos particulares o un sitio web completo.
Step 1 - Para generar un informe de compatibilidad, vaya al menú de herramientas y haga clic en la opción Informes de compatibilidad….
Step 2- El cuadro de diálogo Verificador de compatibilidad proporciona diferentes opciones para verificar solo archivos particulares en su sitio, ya sea abrir esos archivos o seleccionarlos en el panel de tareas Lista de carpetas o en la vista Sitio web. Seleccione las opciones según el requisito y haga clic en el botón Verificar.
Step 3- Se abre el panel de tareas Compatibilidad y el estado de la generación del informe aparece en la parte inferior del panel de tareas. Al hacer doble clic en cualquier fila, lo llevará a la ubicación donde existe el error.
Una plantilla web dinámica es una copia maestra basada en HTML de una página web que puede crear para contener configuraciones, formato y elementos de página, como texto, gráficos, diseño de página, estilos y regiones de una página web que se pueden modificar.
Cuando adjunta una plantilla web dinámica a las páginas de un sitio web, esa plantilla define el diseño de esas páginas. Puede utilizar cualquier número de Plantillas web dinámicas en un sitio web y puede adjuntar una Plantilla web dinámica a tantas páginas como desee.
Mediante el uso de plantillas web dinámicas, puede crear páginas HTML que comparten el mismo diseño. Además de proporcionar un diseño compartido, puede hacer que algunas regiones de una plantilla estén disponibles para su edición y al mismo tiempo evitar cambios en otras regiones de esa plantilla.
Esto significa que puede permitir que otros agreguen y editen contenido, y aún así conservar el diseño de las páginas y la plantilla en sí.
La necesidad de plantillas web dinámicas
El concepto más importante del diseño de sitios web es mantener una apariencia coherente para su sitio y con Dynamic Web Template puede lograrlo. La plantilla web dinámica proporciona:
Páginas básicas como un mapa del sitio, contacto, información y páginas de búsqueda. Un visitante debe poder acceder a su página de inicio desde cualquier página del sitio.
Navegación constante en todo su sitio.
Mirada consistente en todo el sitio.
Crear una plantilla web dinámica
Para crear una plantilla web dinámica (DWT), comience con una página HTML vacía y guárdela como *.dwt file. Vayamos paso a paso y aprendamos más al respecto.
Step 1 - Abra el archivo index.html y seleccione File → Save As… opción de menú, que abrirá el cuadro de diálogo Guardar como.
Seleccione la plantilla web dinámica (* .dwt) del menú desplegable Guardar como tipo y cambie el nombre del archivo del índice al master.dwt y haga clic en el botón Guardar.
Step 2- Ahora, verá que se crea un nuevo archivo master.dwt en la lista de carpetas. Creemos un nuevo archivo HTML y llamémoslo index_2.html. Abramos el archivo master.dwt y en la Vista de diseño o la Vista de código, haga clic derecho dentro de las etiquetas <div> del contenido principal.
Step 3 - En el menú, seleccione Administrar regiones editables ... que abrirá el cuadro de diálogo Regiones editables.
Step 4- En el nombre de la región, escriba un nombre para la región editable y luego haga clic en Agregar. Repita para agregar regiones editables adicionales si lo desea.
Step 5- Una vez que haya agregado todas las regiones editables, haga clic en Cerrar. Ahora vaya al archivo index_2.html y selecciónelo también en la lista de Carpetas.
Step 6 - Vaya al menú Formato y seleccione Dynamic Web Template → Attach Dynamic Web Template… que abrirá el cuadro de diálogo Adjuntar plantilla web dinámica.
Step 7 - Seleccione el Dynamic Web Templateque aquí es el archivo master.dwt y haga clic en el botón Abrir. Recibirá un mensaje de advertencia. Haga clic en Sí.
Step 8- Puede ver que se aplica la misma plantilla al archivo index_2.html. Del mismo modo, puede agregar la misma plantilla a tantas páginas HTML como desee en el sitio web.
Step 9- En esta página, puede editar solo la sección de contenido principal. Si mueve el mouse a la otra sección, verá que no es editable y el cursor del mouse también cambia al círculo de la cruz roja.
Step 10 - Para ver cómo se ve, vaya al menú Archivo y seleccione Vista previa en su navegador.
En este capítulo, aprenderemos cómo agregar una opción de búsqueda o un cuadro de búsqueda al sitio web. Si se trata de un sitio grande, deberá tener un cuadro de búsqueda en el sitio para que el usuario pueda encontrar los datos fácilmente. Hay muchos gratuitos disponibles, como Windows Live, Google, etc.
Búsqueda en vivo de Windows
Los siguientes pasos le muestran cómo agregar un cuadro de búsqueda de Windows Live a su página web y luego configurar el formulario de búsqueda para buscar en toda la Web o solo en su sitio web.
Step 1 - Crea una nueva página HTML y llámala SearchPage.
Step 2 - Vaya al menú Formato y seleccione Dynamic Web Template → Attach Dynamic Web Template…opción. Seleccione el archivo master.dwt y haga clic en el botón Abrir.
Step 3 - Agreguemos el siguiente código dentro de la región editable.
<form method = "get" action = "http://search.live.com/results.aspx">
<input type = "hidden" name = "cp" value = "1252"/>
<input type = "hidden" name = "FORM" value = "FREESS"/>
<table style = "background-color: #ffffff;">
<tr>
<td>
<a href = "http://search.live.com/">
<img src = "http://search.live.com/s/affillogoLive.gif"
style = "border:0px;" alt = "Live Search"/>
</a>
</td>
<td>
<input type = "text" name = "q" size = "30" />
<input type = "submit" value = "Search Site"/>
<input type = "hidden" name = "q1"
value = "site:http://www.microsoft.com/expression"/>
</td>
</tr>
</table>
</form>
Step 4- Guarde la página. Vaya al menú Archivo y seleccione Vista previa en el navegador.
Step 5- Verá Windows Live Search en su página web. Ingresemos algo en la búsqueda y hagamos clic en el botón Buscar sitio
Step 6- Como puede ver, buscará en la web. Si desea restringir la búsqueda solo a su sitio web, debe especificar el dominio de su sitio con el siguiente nombre en lugar dehttps://www.microsoft.com/expression
<input type = "hidden" name = "q1" value = "site:http://www.microsoft.com/expression"/>Step 7 - Del mismo modo, puede agregar la opción de búsqueda de Google agregando el siguiente código en la región editable.
<form method = "get" action = "http://www.google.com/search">
<div style = "border: 1px solid black; padding: 4px; width: 20em; margin: 0px auto 0px auto">
<table border = "0" cellpadding = "0">
<tr>
<td class = "center">
<input type = "text" name = "q" size = "25" maxlength = "255" value = "" />
<input type = "submit" value = "Google Search" />
</td>
</tr>
<tr>
<td align = "center" style = "font-size: 75%">
<input type = "checkbox" name = "sitesearch"
value = " http://www.microsoft.com/expression" checked = "checked" />
Only search this website<br />
</td>
</tr>
</table>
</div>
</form>Step 8 - Guarde su página HTML y verá un cuadro de búsqueda, un botón de búsqueda, una casilla de verificación y una etiqueta de casilla de verificación.
Step 9 - Para restringir a los usuarios a buscar solo en su sitio web, seleccione la casilla de verificación y vaya al panel Propiedades de etiqueta y establezca la propiedad Valor en la URL de su sitio web, como https://www.microsoft.com/expression.
Step 10- Guarde su página y obtenga una vista previa en el navegador. Ahora verá la opción de búsqueda de Google en su página web.
Las imágenes se utilizan mucho en las páginas web para que parezcan interesantes y proporcionar una mejor experiencia de usuario. En este capítulo, aprenderemos cómo agregar imágenes al sitio web. Como de costumbre, vayamos paso a paso y aprendamos el proceso en detalle.
Step 1 - Para comenzar a agregar imágenes, creemos un nuevo sitio de una página y cambiemos el nombre del archivo default.html a index.html.
Step 2- Ahora necesitamos incluir imágenes en el sitio web para que podamos usar esas imágenes en la página web. Creemos una nueva carpeta. En la lista de carpetas, haga clic con el botón derecho en el nombre del sitio web.
Step 3- Actualmente, no hay imágenes en esta carpeta. Para agregar imágenes en esta carpeta, simplemente seleccione y arrastre imágenes desde su disco duro y suéltelas sobre la carpeta de imágenes.
Verás que las imágenes se agregan al sitio web images carpeta, como se muestra en la siguiente captura de pantalla.
Step 4- Ahora estas imágenes están incluidas en su sitio web, pero ninguna de ellas se utiliza en una página web. Una forma sencilla de agregar una imagen en la página web es arrastrar la imagen desde la carpeta de imágenes y soltarla en la vista de código donde desea agregar la imagen en la página web.
Supongamos que queremos agregar una imagen debajo del encabezado. Cuando suelte la imagen y suelte el botón del mouse, se mostrará el siguiente cuadro de diálogo.
Aquí puede especificar el texto alternativo y la descripción larga. Luego haga clic en Aceptar y guarde la página web. Ahora puedes ver eso<img> se agrega la etiqueta con el nombre alternativo y la fuente de la imagen.
Step 5 - Siga el mismo proceso y agregue la segunda imagen junto con su nombre alternativo y fuente.
Ahora el index.html El archivo aparecerá de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
</head>
<body>
<h1> Working with images </h1>
<img alt = "Beautiful Birds" src = "images/birds.jpg" />
<img alt = "Other Birds" src = "images/birds2.jpg" />
</body>
</html>Step 6 - el Picture PropertiesEl cuadro de diálogo le da acceso a los atributos de imagen más utilizados. Cuando hace doble clic en una imagen, se mostrará el cuadro Propiedades de imagen.
En Expression Web, el cuadro de diálogo Propiedades de imagen tiene dos pestañas, General y Appearance.
A continuación se muestran las opciones disponibles en el General tab.
Picture - Contiene el nombre de carpeta / archivo de la imagen gráfica.
Alternate Text- Escriba el texto que desea que se muestre para las imágenes cuando el gráfico se esté descargando, cuando no se pueda encontrar o cuando un visitante del sitio mueva el puntero sobre él. Este texto también será utilizado por un lector de pantalla si su espectador está usando uno.
Long Description- En ocasiones, algunas palabras pueden no ser suficientes para describir su imagen. Los cuadros y gráficos son ejemplos. Haga clic en Examinar para seleccionar un archivo que contenga una descripción más larga de la imagen.
Location - Si desea vincular su imagen a una página web o una imagen más grande, inserte el hipervínculo aquí.
Target Frame - Si la página actual es una página de marcos, esta opción indica en qué marco se debe mostrar el enlace O puede elegir que la imagen o la página se abra en una nueva ventana.
Las siguientes opciones están disponibles en el Appearance tab.
Wrapping Style - Especifique cómo flota la imagen en la página, como Ninguna, Izquierda o Derecha.
Layout - En esta sección, puede establecer la alineación, el grosor del borde, los márgenes horizontales y verticales.
Size- Expression Web establece automáticamente las propiedades de ancho y alto de la imagen en función de las dimensiones reales de la imagen. En lugar de cambiar el tamaño de la imagen cambiando estas dimensiones, cambie el tamaño de la imagen con su editor gráfico.
Step 7- Ahora, obtengamos una vista previa de la página web en el navegador; mostrará la siguiente salida.
En este capítulo, aprenderemos a utilizar hipervínculos en su sitio web. Una de las cosas que hace que la web sea tan expansiva es la capacidad de las páginas web para enlazarse con otras páginas web.Hyperlinks o enlaces se encuentran en casi todas las páginas web.
Los hipervínculos también permiten a los usuarios hacer clic e ir a una página diferente, un lugar dentro de una página, una imagen u otra ubicación en Internet por completo. A continuación se muestran algunas de las características importantes del hipervínculo:
Las herramientas y opciones de hipervínculos de Expression Web hacen que sea muy fácil trabajar con hipervínculos.
Las vistas e informes de hipervínculos de Expression Web también facilitan la búsqueda y reparación de enlaces rotos e incorrectos.
Un hipervínculo puede ser una palabra, un grupo de palabras o una imagen que, al hacer clic, lo llevará a un nuevo documento o un lugar dentro del documento actual.
Etiqueta de ancla
En HTML, <a>La etiqueta, que se conoce como etiqueta de anclaje, se usa para crear un enlace a otro documento. Un ancla puede apuntar a otra página html, una imagen, un documento de texto o un archivo pdf, entre otros. Aquí está el código básico de un ancla<a> etiqueta.
<a href = "url">Text to be displayed as link<a>En <a> etiqueta, el atributo "href" se utiliza para dirigir el enlace al documento, y las palabras entre la apertura y el cierre de la etiqueta de anclaje se mostrarán como un hipervínculo.
Cuando mueves el cursor sobre un enlace en una página web, la flecha se convertirá en una pequeña mano.
Una URL es una dirección que especifica un protocolo, un servidor web y una ruta de archivo.
Hay dos tipos de URL, absolute y relative. Unabsolute URL contiene una dirección completa mientras que un relative URLfalta una o más partes de la dirección. Sin embargo, el navegador web obtiene la información que falta de la página que contiene la URL.
Ejemplo
Echemos un vistazo a un ejemplo simple en el que usaremos ambos absolute y relative URLs.
Step 1 - Primero, abra el index.html página y agregue las siguientes líneas en el main content sección.
<div id = "main-content">
<p> Absolute URL Example: </p>
<p> Google </p>
<p> Youtube </p>
<p> Relative URL Example: </p>
<p> Home Page 2 </p>
</div>A continuación se muestra la implementación completa de index.html página.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<style type = "text/css">
#left-nav ul li a:hover {
color: #000000; background-color: #116611;
}
#left-nav ul li a:hover {
color: #000000; background-color: #66FF99;
}
</style>
<link href = "sample.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"> </div>
<div id = "top-nav">
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
<li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
<li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
</ul>
</div>
<div id = "left-nav">
<p>Site Navigation</p>
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li>
<li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li>
<li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li>
</ul>
</div>
<div id = "main-content">
<p> Absolute URL Example: </p>
<p> Google </p>
<p> Youtube </p>
<p> Relative URL Example: </p>
<p> Home Page 2 </p>
</div>
<div id = "footer"> </div>
</div>
</body>
</html>Step 2 - Guardemos la página web y verá el texto en la sección de contenido principal.
Step 3 - En la Vista de diseño, haga clic con el botón derecho en Google y luego seleccione Hipervínculo ... en el menú que abrirá el Insert Hyperlink diálogo.
Step 4- En el campo Dirección, especifique la URL de la página de inicio de Google y haga clic en Aceptar. Del mismo modo, haga clic con el botón derecho en YouTube en la vista de diseño y seleccione Hipervínculo ...
Step 5- En el campo Dirección, especifique la URL de la página de inicio de YouTube y haga clic en Aceptar. Ahora, haga clic con el botón derecho relativo en la "Página de inicio 2" y seleccione Hipervínculo ... en el menú que abrirá el cuadro de diálogo Insertar hipervínculo.
Step 6- Para la ruta relativa, seleccione index_2.html en el campo de dirección y Expression Web obtendrá la ruta restante del archivo index.html, porque ambos archivos están en el mismo directorio. Haga clic en Aceptar.
Como puede verse, estas palabras ahora están subrayadas, lo que significa que se crean hipervínculos.
Step 7- El color de fuente predeterminado es azul y el color de fuente predeterminado para hipervínculos también es azul. Para cambiar el color predeterminado del hipervínculo, seleccione cualquiera de los hipervínculos y vaya alFormat menú y seleccione Background… opción de menú.
Ahora verá el siguiente cuadro de diálogo.
Step 8 - Cambiemos el color del hipervínculo a verde.
En la siguiente captura de pantalla, verá que el color del hipervínculo ha cambiado a verde.
Step 9 - Permítanos ahora obtener una vista previa de esta página web en un navegador.
Si hace clic en el enlace de Google, lo dirigirá a la página de inicio de Google.
Step 10- Del mismo modo, si vuelve a la página de inicio y hace clic en el enlace de YouTube, lo dirigirá a la página de inicio de YouTube. Volvamos a la página de inicio.
Haga clic en el Home Page 2 enlace y verá que abre el index_2.hmtl file.
En este capítulo, aprenderemos cómo agregar videos al sitio web y qué formatos son compatibles con Expression Web. Con la ayuda de videos, puede atraer fácilmente la atención de clientes potenciales hacia los productos o servicios de su empresa.
Microsoft Expression Web es una herramienta de diseño web que simplifica el proceso de agregar videos promocionales, de marketing o de capacitación a las páginas web. Puede insertar fácilmente sus videos en la vista Diseño de Microsoft Expression.
De forma predeterminada, Expression Web admite formatos de codificación de video como Silverlight, Adobe Flash, WMV, ASF, MWA, AVI, WVX y MPEG.
Ejemplo
Tomemos ahora un ejemplo para comprender el proceso de agregar un video paso a paso.
Step 1 - Agrega un nuevo archivo HTML y llámalo videodemo.html.
Step 2- Haga clic con el mouse en la ubicación dentro de la página web donde se insertará el video. Digamos que queremos agregar un video debajo del título.
Step 3 - Ir al Insert menú → Mediaque abrirá el submenú que contiene la lista de formatos de reproductor de video que Expressions admite por defecto. Vamos a seleccionarWindows Media Player.
Step 4- Busque el video que desea utilizar. Seleccione el nombre del archivo de video y haga clic en el botón Insertar para insertarlo en la página web. Guarde el archivo presionando Ctrl + S y verá el cuadro de diálogo Guardar archivos incrustados.
Step 5 - Haga clic en Aceptar y verá que el archivo multimedia se agrega a la carpeta del sitio web.
A continuación se muestra el código en el videodemo.html page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<h1> Video Demo</h1>
<p>
<object id = "media1" height = "200" type = "video/x-ms-wmv" width = "200">
<param name = "filename" value = "logo.wmv" />
</object>
</p>
</body>
</html>Step 6- Permítanos ahora obtener una vista previa de la página web en un navegador. Verá que el video se está reproduciendo.
Expression Web tiene muchas herramientas para trabajar con páginas HTML estáticas, pero también tiene herramientas para crear páginas más dinámicas. Las páginas dinámicas a menudo recuperan datos o contenido de una fuente de datos. En este capítulo, aprenderemos cómo crear una fuente de datos SQL para usar en páginas dinámicas.
Ejemplo
Echemos un vistazo a un ejemplo simple en el que creamos una lista desplegable y completamos la lista recuperando datos de la base de datos usando SQL DataSource.
Step 1 - Comience creando un nuevo sitio web vacío.
Vamos a llamarlo SQLDataSource. Haga clic en Aceptar.
Step 2- Verás que la expresión web ha creado una carpeta para nosotros. Sin embargo, dado que elegimos crear un proyecto vacío, todavía no tenemos ningún archivo.
Expression Web no tiene que usarse solo para crear sitios HTML estáticos; podemos crear sitios dinámicos usando páginas y controles con mucha facilidad.
Step 3- Expression web también nos permite crear mucho contenido dinámico sin tener que ser necesariamente desarrollador. Así que agreguemos un archivo ASPX delFile → New Pageopción de menú. Seleccione ASPX en el modelo del medio y haga clic en Aceptar.
Step 4 - Aquí crearemos un control en nuestro formulario que necesita acceder a los datos de una base de datos para crear un sitio web dinámico.
En este caso particular, crearemos una fuente de datos SQL que recuperará datos de la base de datos.
Step 5 - Vaya a la Caja de herramientas y arrastre el DropDownList y déjalo caer dentro del <form>etiqueta en la vista de código o también puede soltarla en la sección de formulario en la vista de diseño. Verá que Expression Web agrega el código.
Aquí, queremos conectar algunos datos de nuestra base de datos y almacenarlos en nuestra lista desplegable. Entonces, lo primero que necesitamos es la base de datos.
Step 6 - Cree una nueva carpeta en su carpeta de proyecto yendo a la New → Folder opción de menú.
Step 7 - Llamar a esta carpeta App_Data.
Step 8 - Necesitamos importar una base de datos en nuestro proyecto usando el File → Import → File… opción de menú.
Step 9 - Abrirá el Importdiálogo, como se muestra a continuación. Haga clic en el botón Agregar archivo… que abrirá el cuadro de diálogo de archivo abierto.
Step 10 - Navegar a la base de datos (*.mdf file) que desea incluir en el sitio web y haga clic en Abrir.
Step 11- Abra MyTestDatabase.mdf. Mostrará el siguiente diálogo. Haga clic en Aceptar.
Step 12- Ahora puede ver que el archivo de base de datos se agrega en la carpeta App_Data. Cuando tiene un control como una lista desplegable y Expression Web le permite vincular los datos, verá una pequeña flecha en la esquina superior derecha en la vista de diseño.
Step 13- Este es el menú contextual actual que nos puede permitir hacer una tarea muy específica para ese control en particular y una de ellas es elegir una fuente de datos. Así que hagamos clic enChoose Data Source… y eso abrirá el asistente de configuración de la fuente de datos.
Step 14- Actualmente, no tenemos una fuente de datos. Seleccionemos la opción Nueva fuente de datos del menú.
Aquí, importaremos una base de datos SQL. Seleccionemos la base de datos y hagamos clic en Aceptar.
Step 15- Ahora, necesitamos especificar la cadena de conexión. Hagamos clic en el botón Nueva conexión.
Step 16 - Seleccione el archivo de base de datos de Microsoft SQL Server y haga clic en Aceptar.
Step 17 - Haga clic en el botón Examinar para localizar el archivo de base de datos.
Step 18 - Seleccione el archivo de la base de datos y haga clic en el botón Abrir o haga doble clic en el archivo de la base de datos.
Step 19 - Para probar la conexión, haga clic en el botón Probar conexión.
Mostrará la siguiente pantalla. Haga clic en el botón Aceptar.
Step 20- Ahora configuraremos la fuente de datos. Haga clic en Siguiente en la siguiente pantalla.
Marque la casilla de verificación y haga clic en Siguiente nuevamente.
Step 21- Aquí verá todas las tablas de su base de datos. Seleccionemos elStudent mesa.
Step 22- Y verá todas las columnas en el cuadro de lista. SeleccioneID y LastName. En la parte inferior, puede ver que en realidad está creando una consulta. También puede utilizar elWhere o ORDER BY clauses. Una vez que haya terminado con la consulta, haga clic en Siguiente.
Step 23 - Haga clic en el Test Querybotón. Mostrará elquery result Como se muestra abajo.
Step 24- En el siguiente cuadro de diálogo, la fuente de datos está seleccionada de forma predeterminada. El campo "Seleccionar un campo de datos para mostrar en DropDownList" es el campo que realmente se mostrará. Seleccionemos LastName y seleccionemos el ID de "Seleccionar un campo de datos para el valor de DropDownList" y hagamos clic en Aceptar.
Como puede ver en la siguiente captura de pantalla, DataSource se agrega en la vista de diseño.
A continuación se muestra el código completo en el archivo ASPX, creado por Expression Web.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language = "C#" %>
<html dir = "ltr" xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<form id = "form1" runat = "server">
<asp:DropDownList id = "listID" runat = "server" DataSourceID = "SqlDataSource1"
DataTextField = "LastName" DataValueField = "ID">
</asp:DropDownList>
<asp:SqlDataSource ID = "SqlDataSource1" runat = "server"
ConnectionString = "<%$ ConnectionStrings:MyTestDatabaseConnectionString %>"
SelectCommand = "SELECT [ID], [LastName] FROM [Student]">
</asp:SqlDataSource>
</form>
</body>
</html>Step 25 - Guardemos la página web presionando Ctrl + S.
Llamar a esta página SQLDatasource.aspx y haga clic en Guardar.
Step 26- Vamos a obtener una vista previa de esta página en un navegador. Verá una lista desplegable que contiene el apellido de los estudiantes delStudent mesa.
En este capítulo, aprenderemos cómo crear una página web a partir de un documento de Microsoft Word usando Expression Web. En lugar de crear páginas desde cero, también puede usar Microsoft Word para contenido web y luego llevar ese contenido a su página HTML.
Echemos un vistazo a cómo puede obtener resultados óptimos mientras usa el contenido de Microsoft Word.
Crea una nueva página HTML y llámala worddemo.html. Aplique la plantilla web dinámica (* .dwt) a esta página HTML.
Aquí hay una muestra Worddocumento con algunos estilos aplicados y una tabla. Primero, copie todo este documento en el portapapeles y luego cambie a Expression Web. Pegue el documento en una sección de contenido principal de la página web.
Observe que cuando el contenido se pega en Expression Web, aparece un icono. Esto se conoce como elpaste options button. Al hacer clic en él, podemos elegir diferentes formas de pegar el contenido en Expression Web.
La configuración predeterminada Match Destination Formatting significa que Expression Web utilizará cualquier formato que ya esté aplicado en la página web actual.
Por ejemplo, el encabezado del documento en este documento se diseñó utilizando el estilo H1 en Microsoft Word. Cuando se pega en la página, Expression Web aplicará el formato al estilo de Encabezado uno en Expression Web.
Si selecciona el Keep Source Formatting, Expression Web seguirá aplicando el estilo H1 al texto. Sin embargo, creará una nueva clase CSS llamada Estilo uno en este caso que reformatea el texto para que se vea como lo hizo en Word.
Si seleccionamos Remove Formatting, la página tiene un aspecto muy similar al que tenía antes, pero si observa el formato de las tablas, verá que ahora es solo texto normal.
Los estilos proporcionados en Expression Web todavía están vigentes, pero los estilos que eran específicos del documento de Word ya no están.
los keep HTML only optionsolo se aplica cuando se copia código HTML. La última opción en el menú de opciones de pegado esKeep Text onlyy esta es la opción que desea elegir si realmente desea solo el texto de Word. Cuando seleccione esta opción, se abrirá el siguiente cuadro de diálogo Pegar texto.
Desde aquí, podemos elegir exactamente cómo queremos formatear el texto. La primera opción elimina todos los saltos de línea de formato, párrafos, etc. y lo reemplaza con un solo gran bloque de texto.
Puede ver que hemos perdido la tabla en el documento, así como todo el formato. Puedes jugar con opciones en elPaste Textcaja de diálogo. Seleccionamos la opciónMatch Destination Formatting.
Al obtener una vista previa de esta página web en un navegador, se verá como la siguiente captura de pantalla.
El control GridView se usa para mostrar los valores de una fuente de datos en una tabla. Cada columna representa un campo, mientras que cada fila representa un registro. En este capítulo, aprenderemos un proceso muy simple para mostrar datos de una base de datos en una página web en un GridView.
Step 1 - Creemos una nueva página ASPX en el proyecto SQLDataSource y llamémosla gridview.aspx
Step 2- En la Caja de herramientas, verá los controles ASP.NET. Arrastre el control GridView y suéltelo sobre la sección del formulario.
Puede ver que el menú contextual de GridView está abierto. Ahora seleccione el<New data source…>en la lista desplegable Elegir fuente de datos. Mostrará el Asistente de configuración de fuente de datos.
Step 3- Seleccione la Base de datos ya que obtendremos los datos de la base de datos SQL y especificaremos el ID de la fuente de datos. Haga clic en Aceptar.
Step 4- Seleccione la cadena de conexión existente, que hemos creado en el capítulo SQL DataSource, ya que usaremos la misma base de datos en este capítulo. Haga clic en Siguiente.
Step 5 - Con el fin de comprender, seleccionemos la tabla de Estudiantes y hagamos clic en el * checkboxque recuperará todas las columnas de la tabla de estudiantes. Haga clic en Siguiente.
Step 6 - En el siguiente asistente, puede probar la consulta, así que hagamos clic en el Test Query botón.
Al hacer clic Next, mostrará la siguiente pantalla:
La vista de diseño de gridview.aspx tiene el siguiente aspecto:
Step 7- Permítanos obtener una vista previa de la página web en un navegador. Aparecerá de la siguiente manera:
Esta es una tabla simple sin formato.
Step 8 - Puede formatear el GridView desde el GridView Context menú.
Haga clic en el Auto Format…enlace. En el cuadro de diálogo Formato automático, hay muchos esquemas predefinidos. Seleccione un esquema según sus requisitos y haga clic en Aceptar.
Volvamos a obtener una vista previa de la página web en un navegador. Se verá como la siguiente captura de pantalla.
En este capítulo, aprenderemos sobre las páginas maestras de ASP.NET. Cuando creamos una página maestra, podemos diseñarla, aplicar estilos y agregar controles ASP.NET de la misma manera que en otras páginas de Microsoft Expression Web. El diseño y el contenido que creamos en una página maestra se aplican a las páginas adjuntas a la página maestra. Es un concepto similar aDynamic Web Template.
Las plantillas web dinámicas le permiten aplicar una apariencia común a todas las páginas de su sitio web. Como las Plantillas Web Dinámicas se aplican en las páginas a las que están adjuntas en el momento del diseño, la aplicación de cambios a todas las páginas de un sitio puede provocar un retraso mientras el HTML se actualiza en todas las páginas.
Si el servidor ejecuta ASP.NET, las páginas maestras de ASP.NET permiten una funcionalidad similar al definir las áreas editables en la plantilla. Sin embargo, la aplicación de la plantilla al contenido personalizado de las páginas se realiza de forma dinámica en tiempo de ejecución.
Ejemplo
Echemos un vistazo a un ejemplo simple en el que crearemos una página maestra usando una plantilla CSS y usaremos esta página maestra para crear otras páginas.
Step 1 - Abra el index.html página en la que hemos definido diferentes secciones utilizando la hoja de estilo CSS.
Step 2 - Desde el File menú, ir a New → Page y verá el cuadro de diálogo Nueva página.
Step 3 - En el panel izquierdo, seleccione ASP.NET y en la lista del medio, seleccione Página maestra y haga clic en el botón Aceptar.
Step 4 - La pantalla anterior producirá una ventana emergente llamada Untitled1.master. Guarde esta página y asígnele un nombredefault.master.
Step 5- Queremos integrar nuestro diseño en la página maestra que se compartirá en todo nuestro sitio. Así que copiemos el código del contenido que le gustaría tener en cada página del código index.html y peguemos el código en la página default.master.
Step 6- Ahora tenemos un diseño que nos gustaría usar en cada página del sitio. Sin embargo, si tuviéramos que comenzar a construir las páginas de contenido ahora, no podríamos ingresar ningún contenido en este diseño. Por lo tanto, necesitamos crearASPX contentpáginas de la página maestra. Para hacer esto, tenemos que agregar elcontent region también para que podamos agregar contenido a las páginas especificadas.
En la vista de diseño, haga clic con el botón derecho donde desee el contenido de sus páginas. Digamos que queremos agregar contenido en la sección de contenido principal y luego hacer clic en elManage Microsoft ASP.NET Content Regions…
Step 7 - En el asistente Administrar regiones de contenido, ingrese el Region Name y haga clic en Close.
Step 8- Como se puede ver en la siguiente captura de pantalla, Content PlaceHolder se agrega en la sección de contenido principal. Ahora tenemos que agregar la página web ASPX.
Step 9 - Vaya al menú Archivo y seleccione New → Create from Master Page…
Step 10 - Vaya a la página maestra predeterminada y haga clic en Aceptar.
Step 11 - Ahora, se crea una nueva página ASPX y todos los estilos de diseño se aplican desde la página maestra.
Agrega algo de texto en la sección principal.
Step 12 - Guarda esta página y llámala mypage.aspx y luego obtenga una vista previa en un navegador.
En este capítulo, aprenderemos cómo agregar una tabla de datos en su página web. Creemos una nueva página HTML, pero aquí queremos aplicar la Plantilla Web Dinámica también a nuestra página HTML.
Step 1 - Vayamos al menú Archivo y seleccionamos New → Create from Dynamic Web Template…
Abrirá el siguiente cuadro de diálogo como se muestra en la siguiente captura de pantalla.
Step 2 - Seleccione el master.dwt archivo y luego haga clic en el botón Abrir.
Step 3 - Guarda la página web y llámala datatable.html.
Step 4 - En la Vista de diseño, vaya a la sección de contenido principal y elimine el texto.
Step 5 - A continuación, vaya al Table → Insert Table… opción de menú que abrirá el cuadro de diálogo Insertar tabla.
Seleccione el número de filas y columnas. También puede establecer diferentes opciones de diseño como alineación, relleno, tamaño y color del borde y color de fondo, etc. Una vez que haya terminado, haga clic en Aceptar.
Step 6 - La vista de diseño de datatable.html ahora aparecerá de la siguiente manera -
Ahora, si observa la Vista de código de la página, verá que Expression Web agrega el siguiente código.
<table class = "auto-style2" style = "width: 100%">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>Step 7 - En el panel de tareas Administrar estilos, haga clic con el botón derecho “.auto-style2”. Haga clic en Elegir cambiar el nombre de la clase "auto-style2".
Step 8 - En el cuadro de diálogo Cambiar nombre de clase, ingrese mytable en el New namecampo. Asegúrese de que la opción Cambiar nombre de las referencias de clase en esta página esté marcada y luego haga clic en Aceptar.
Ahora, eche un vistazo a su página web en la vista Diseño. Aparecerá de la siguiente manera:
Step 9 - Para formatear esta tabla y aplicarle un estilo, vaya al panel de tareas Administrar estilos y haga clic en New Style…
Step 10- En el cuadro de diálogo Nuevo estilo, establezca la configuración del borde y luego haga clic en Aceptar. Existe otra opción para formatear su tabla de datos. En la Vista de diseño, haga clic con el botón derecho en la tabla y seleccioneModify → Table AutoFormat…
En este cuadro de diálogo, verá los diferentes formatos y otras configuraciones. Seleccionemos el formato Profesional y hagamos clic en Aceptar.
Step 11 - Ahora, la Vista de diseño de su página web tiene el siguiente aspecto:
Agreguemos algunos datos en la vista de diseño.
Step 12- Guarde su página web y obtenga una vista previa en un navegador. Se verá como la siguiente captura de pantalla.
En este capítulo, aprenderemos cómo publicar un sitio web. Microsoft Expression Web es una completa herramienta de desarrollo de sitios web. Puede utilizar Expression Web para crear páginas web y sitios que le permitan transferir archivos entre su computadora y su cuenta de alojamiento.
Step 1 - Echemos un vistazo al sitio que queremos publicar.
En la última versión de Expression Web, se agregan nuevas funciones de publicación como:
- La capacidad de excluir carpetas completas de la publicación en lugar de solo archivos.
- La capacidad de publicar fácilmente la página actual.
Step 2- Si desea que un archivo o carpeta específico no se publique en el sitio, haga clic con el botón derecho en esa carpeta o archivo y excluirlo de la publicación. Digamos que queremos excluir elindex_2.html file.
Como se muestra en la captura de pantalla anterior, haga clic en el Exclude from Publishingbotón. Del mismo modo, también puede excluir otros archivos.
Step 3- Ahora que ha terminado de diseñar el sitio, deberá publicarlo para que todo el mundo lo vea. Expression Web admite varios escenarios de publicación diferentes.
Para publicar el sitio, primero debemos asegurarnos de haber guardado todas las páginas. Se recibirá una advertencia si no lo hemos hecho, una vez que comience el proceso de publicación.
Ahora, vayamos al menú Herramientas.
Selecciona el Recalculate Hyperlinks…opción. Hacer clicYes en la siguiente pantalla.
Step 4 - Ir al Site menú y haga clic en el Publishing opción de menú.
Step 5 - Si es la primera vez que se publica el sitio, recibiremos el mensaje Add a publishing destination, como se muestra en la siguiente captura de pantalla.
Step 6 - Haga clic en el mensaje y lo siguiente Connection Settingsaparecerá el cuadro de diálogo. Ingrese toda la información requerida en el cuadro de diálogo Configuración de conexión y luego haga clic en elAdd botón.
Mostrará el siguiente diálogo. Hacer clicYes.
Step 7 - Si la Configuración de publicación ya está configurada, recibiremos el mensaje Connect to current publishing destination. Haga clic en el mensaje o use elConnect To botón en el Site View lengüeta.
Step 8- Una vez que se inicia el proceso de publicación, se pueden ver los archivos transferidos. Cuando esté completo, recibiremos un mensaje de que el archivo ha terminado de cargarse.
La próxima vez que publiquemos un sitio, este proceso comparará el sitio del servidor con lo que está en la computadora. Si hay archivos en el servidor remoto que hemos eliminado de la web en la computadora, puede aparecer un cuadro de mensaje preguntando si queremos eliminarlos. Si estamos seguros de que ya no son necesarios, haga clic en Aceptar.
En este capítulo, aprenderemos cómo copiar el sitio a una computadora local usando Expression Web. A diferencia del Explorador de Windows, no hay Papelera de reciclaje en Expression Web. Si eliminamos inadvertidamente el sitio web o las páginas dentro del sitio, nos encontraremos en una situación de restauración.
Step 1 - Para realizar una copia de seguridad del sitio web, abramos el sitio en Expression Web.
Step 2 - Vaya al menú Herramientas y haga clic en la opción Recalcular hipervínculos….
Haga clic en Sí, como se muestra en la siguiente captura de pantalla.
Step 3 - A continuación, vaya al Site menú y haga clic en el Publishing opción de menú.
Step 4 - Si es la primera vez que publicamos este sitio, recibiremos un mensaje Add a publishing destination, como se muestra en la siguiente captura de pantalla.
Step 5 - Haga clic en el mensaje y el Connection Settings aparecerá el cuadro de diálogo.
En el Namecampo, ingrese el nombre del sitio. EscogerFile System desde el Connection Typemenú desplegable y luego busque la ubicación donde desea hacer una copia de seguridad de su sitio web. A continuación, haga clic en elAdd botón.
Step 6- Si la carpeta no existe actualmente, se nos pedirá que la creemos. Haga clic en 'Sí' y se creará la web.
Step 7 - Una vez conectado, haga clic en el menú desplegable 'Ver' y seleccione Todos los archivos.
Step 8 - Seleccione todos los archivos del lado izquierdo.
Step 9 - Haga clic en el right arrow Botón (→).
Una vez que comience el proceso de publicación, los archivos se verán como transferidos. Cuando termine, aparecerá un mensaje sugiriendo que los archivos se han cargado.
En este capítulo, aprenderemos cómo instalar complementos en Expression Web. Un complemento de Expression Web es un paquete de software externo que proporciona funcionalidad adicional o mejorada dentro de Expression Web.
Los complementos se pueden descargar desde la siguiente ubicación https://msdn.microsoft.com/en-us/expression/jj873995. Por ejemplo, descarguemos el complemento AddFeed.
Step 1- Abramos Expression Web y vayamos al menú Herramientas. Haga clic en elAdd-Ins…opción de menú.
Step 2- Si es la primera vez que se instala un complemento, habrá una lista vacía en el cuadro de diálogo Administrar complementos. Hagamos clic en elInstall botón.
Step 3 - Seleccione el AddFeeds.xadd archivo y haga clic en el Open botón.
Step 4- Una vez instalado, te mostrará la siguiente pantalla. Nos preguntará si queremos habilitar el complemento. La pantalla dará toda la información sobre el complemento particular que se está instalando. Haga clic en Sí.
Step 5 - Dependiendo de los complementos instalados, estarán disponibles en varias ubicaciones.
Step 6 - A continuación, vaya a Insertmenú. Verás elTwitter or RSS Feed opción que ahora se agrega después de instalar el complemento.
Puede seguir los mismos pasos para instalar más complementos según los requisitos.