Copyright HébergementWebs.com - License GPL

Microsoft Expression Web - Guía rápida

Tutorial web de Microsoft Expression   2020-11-20 05:51:08

Microsoft Expression Web - Guia rapida Microsoft Expression Web - Descripcion general Microsoft Expression Web es una herramienta profesional completa para disenar, desarrollar y publicar sitios web ricos en funciones que cumplan con los estandares web. Puede utilizar Expression Web para crear paginas web y sitios que le permitan transferir archivos entre su computadora y su cuenta de alojamiento. Expression Web puede disenar y desarrollar paginas web utilizando HTML5, CSS 3, ASP.NET, PHP, JavaScript, XML + XSLT y XHTML. Expression Web 4 requiere la instalacion y ejecucion de .NET Framework 4.0 y Silverlight 4.0. Microsoft Expression Web - Historial Microsoft Expression Web - Historial Microsoft lanzo la primera version Community Technology Preview (CTP) de Expression Web el 14 de mayo de 2006. Microsoft Expression Web 4 lanzado el 7 y 20 de junio10. Se agrego la opcion de complementos HTML y acceso a la funcionalidad web para probar paginas en navegadores que no no se puede instalar en el sistema del usuario, como los navegadores Mac OS X o Linux. Tambien proporciona un verificador de SEO mediante el cual puede analizar sitios web ya creados con las mejores practicas para obtener el motor de busqueda mas alto posible nkings. Expression Web Service Packs Expression Web Service Packs Expression Web 4 Service Pack 1 se lanzo en marzo de 2011 y se agrego soporte para "IntelliSense para HTML5 y CSS. Expression Web 4 Service Pack 2 se lanzo en julio de 2011. Se soluciono una serie de problemas e introdujo nuevas funciones como - Soporte para jQuery IntelliSense un panel de administracion de fragmentose codigo Panel emergente interactivo funcionalidad de comentario / descomposicion en la vista Codigo, y personalizacion del espacio de trabajo y la barra de herramientas "herramientas. En diciembre de 2012, Microsoft anuncio que Expression Studio dejaria de ser un producto independiente. Expression Blend se integrara en Visual Studio, mientras que Expression Web y Expression Design ahora seran productos gratuitos. Requisitos del sistema Para crear un sitio web utilizando Microsoft Expression Web, su computadora debe cumplir con los siguientes requisitos: Debe tener al menos Windows XP con Service Pack 3 o los ultimos sistemas operativos. Debe tener una PC con un procesador de 1 GHz o superior. Su PC debe tener 1 GB de RAM o mas. Su PC debe tener 2 GB o mas de espacio libre en disco. Debe disposing desde .NET Framework 4.0 y Silverlight 4.0. Su computadora debe ser compatible con graficos Microsoft DirectX® 9.0. Debe tener un reproductor de DVD compatible. Debe tener una resolucion de pantalla de 1024 × 768 o superior con color de 24 bits. Algunas funciones del producto requieren Firefox 3.0 o posterior, Internet Explorer 8. Debe tener la misma version. Los requisitos reales y la funcionalidad del producto pueden variar segun la configuracion del sistema y el sistema operativo. Configuracion del entorno Microsoft proporciona una version gratuita de Microsoft Expression Web que se puede descargar desde https: //www.microsoft.com/en-pk/download/ " details.aspx? id = 36179 Instalacion Paso 1 - Antes de que puedaPara instalar Expression Web, debe tener instalado .NET Framework 4.0. Paso 2 : una vez completada la descarga, ejecute el instalador. La siguiente caja de dialogo aparece. Paso 3 - Haga clic en el boton Aceptar. Paso 4 : seleccione el boton de opcion Si, luego haga clic en Siguiente. Paso 5 - Puede elegir otra ubicacion, asi como para la instalacion. Seleccione la ubicacion y haga clic en el boton Instalar. El proceso de instalacion comienza. Una vez completada la instalacion, vera el siguiente cuadro de dialogo. Paso 6 : haga clic en Finalizar para continuar. Microsoft Expression Web - Nuevo sitio web En el capitulo anterior, instalamos Microsoft Expression Web y ahora estamos listos para comenzar a trabajar en el. En este capitulo, aprenderemos como crear un nuevo sitio web desde cero. Crear un sitio web Para crear un nuevo sitio web, abramos Microsoft Expression Web. Entonces debes seguir los pasos a continuacion- abajo. Paso 1 : seleccione la opcion de menu Sitio → Nuevo sitio… . Paso 2 : se abrira el siguiente cuadro de dialogo desde el que puede crear o importar diferentes tipos de sitios web. Paso 3 : para simplificar, seleccionemos General → Sitio de una pagina . Especifique emubicacion o puede navegar hasta la ubicacion donde desea crear el nuevo sitio web. Escriba el nombre de su sitio web en el campo de nombre y haga clic en Aceptar. Paso 4 : el nuevo La web se creara con una pagina llamada default.htm . Cambiemos el nombre a index.html haciendo clic derecho en el archivo y haciendo clic en la opcion Cambiar nombre. . Paso 5 : el doctype predeterminado que se usa en Expression Web es - Puede ver esto simplemente cambiando a la vista de codigo . Puede cambiar el tipo de documento en Herramientas → Opciones del editor de pagina → Diseno . Paso 6 : ahora agreguemos la etiqueta dentro de la etiqueta body y texto como se muestra en t el siguiente codigo. < content = " text / html; charset = utf-8 "http-equiv=" Content-Type "/> Esta es mi primera pagina web Paso 7 - Para ver nuestro sitio web en un navegador, vaya al menu Archivo y seleccione Vista previa en el navegador → Cualquier navegador , digamos Internet Explorer. Esto abrira nuestro sitio web en Internet Explorer. Microsoft Expression Web - Pagina web en blanco Como ya hemos creado nuestro sitio web, ahora necesitamos crear nuestra pagina de inicio. En el capitulo anterior creamos un sitio web de una pagina y nuestra pagina de inicio fue creada automaticamente por Expression Web en ese momento. Entonces, si ha creado un sitio web en blanco, debera crear una pagina de destino para su sitio. Microsoft Expression Web puede crear los siguientes tipos de paginas: HTML ASPX ASP PHP CSS Pagina maestra Plantilla web dinamica JavaScript XML Archivo de texto En este capitulo, crearemos una pagina HTML y su hoja de estilo correspondiente. Crear una pagina en blanco Para crear una pagina en blanco, simplemente vaya al menu Archivo y seleccione Nuevo → Optarelemento de menu Pagina… . En el nuevo cuadro de dialogo puede crear diferentes tipos de paginas en blanco como pagina HTML, pagina ASPX, pagina CSS, etc. y haga clic en Aceptar. Como puede ver aqui , el codigo predeterminado ya es un anuncio de Microsoft Expression Web. < content = " text / html; charset = utf-8 "http-equiv=" Content-Type "/> Sin titulo 1 Esta es una pagina web en blanco Como puede ver, su La pagina recien creada tiene el nombre de archivo Untitled_1.html o Untitled_1.htm . Debera guardar la pagina presionando Ctrl + S yespecificar el nombre. Dado que nuestro sitio web ya tiene una pagina index.html , no necesitamos otra. Sin embargo, si ha creado un sitio web vacio, nombre esta pagina index.html . Para ver su sitio web en un navegador, vaya al menu Feed y seleccione Vista previa en el navegador → Cualquier navegador , diga Internet Explorer. Crear pagina CSS Veamos el proceso paso a paso para crear una pagina CSS. Paso 1 : para crear una pagina CSS, vaya al menu Archivo y seleccione la opcion de menu Nuevo → Pagina… . Paso 2 - Seleccione General → CSS y haga clic en Aceptar. Paso 3 : guarde la pagina e ingrese un nombre para la hoja de estilo. Paso 4 : haga clic en el boton Guardar . Paso 5 - Ahora vayamos a la pagina index.html. Paso 6 : en el panel Administrar estilos , haga clic en Adjuntar hoja de estilo . " > Paso 7 - Vaya a su hoja de estilo y seleccione la pagina actual de "Adjuntar a" y Vinculo a "Adjuntar como" y haga clic en De acuerdo. Paso 8 - Ahora vera que un una nueva linea se agrega automaticamente en la pagina index.html. Paso 9 - El elemento body define el cuerpo del documento. Para disenar la etiqueta , tenemos ques crea un nuevo estilo. Primero, seleccione la etiqueta del cuerpo en la vista Diseno, luego haga clic en Nuevo estilo ... en el panel Aplicar estilos o Administrar estilos, que abrira el cuadro de dialogo Nuevo estilo. Aqui puede configurar el diferentes opciones para su estilo. El primer paso es seleccionar el cuerpo de la lista desplegable Selector, luego seleccionar la hoja de estilo existente de la lista desplegable "Establecer en ". Paso 10 - Desde la URL, seleccione el archivo . En el lado izquierdo hay una lista de categorias como source, fondo, etc. y actualmente la source esta resaltada. Configure la informacion de la source segun sea necesario como se muestra en la captura de pantalla anterior, luego haga clic en Aceptar. Paso 11 : puedesAhora vea en la vista de diseno que el color de fondo y la source han cambiado a lo que hemos seleccionado. Ahora, si abre el archivo, vera que toda la informacion se almacena automaticamente en el archivo CSS. Obtenga una vista previa de nuestra pagina web en un navegador. Observara que el estilo se aplica desde el archivo CSS. Microsoft Expression Web - Diseno de la pagina web En este capitulo cubriremos el diseno base de sus paginas web.Antes de crear el diseno de nuestra pagina web, debemos pensar en nuestro contenido y luego disenar la forma en que queremos presentar ese contenido, porque este es el contenido que sera visible en nuestro sitio Web. Depende de nosotros como presentamos nuestro contenido para que nuestros espectadores encuentren nuestro sitio y permanezcanluego para comprobarlo. El diseno probablemente incluira el logotipo o el banner de la empresa en la parte superior, el menu de navegacion, un area de contenido que puede incluir varias columnas y un pie de pagina en la parte inferior de la pagina. Anteriormente, los desarrolladores usaban matrices para lograr este aspecto. Las tablas crearon un grupo de cajas que se utilizaron para crear filas y columnas. Ahora los disenadores web utilizan s para formar cuadros y CSS para colocar cuadros en la pagina. Etiqueta Estas son algunas de las caracteristicas de la etiqueta. La etiqueta define una Se utiliza para agrupar elementos de bloque para formatearlos con CSS. Los navegadores suelen colocar un salto de linea antes y despues del elemento La etiqueta es un elemento de nivel de bloque. La etiqueta puede contener casi cualquier otro elemento. La etiqueta no puede estar dentro de una etiqueta . Ejemplo Echemos un vistazo a un ejemplo simple en el que usaremos las etiquetas para crear los distintos cuadros de estilo y reglas. Paso 1 - Abra Expression Web, luego la pagina index.html que creamos en el capitulo anterior. Paso 2 : como se muestra en captura de pantalla anterior, la vista Codigo esta resaltada de forma predeterminada. Puede trabajar en Vista Codigo o Vista Diseno , pero tambien puede ver la Shared, que abrira tanto la Vista de codigo como la Vista de diseno. Asi que seleccionemos Vista dividida . Paso 3 : el elemento body define el cuerpo del documento. Para disenar la etiqueta, necesitamos crear un nuevo estilo. Primero, seleccione la etiqueta del cuerpo en la vista Diseno, luego haga clic en Nuevo estilo… en el panel Aplicar estilos, que abrira el cuadro de dialogo Nuevo estilo. Aqui puede configurar las diferentes opciones para su estilo. Paso 4 : el primer paso es seleccionar el cuerpo de la lista desplegable del selector , luego seleccionar la hoja de estilo existente en "Establecer en "Lista desplegable. Desde la URL, seleccione el archivo CSS que creamos en el capitulo anterior. En el lado izquierdo, hay una lista de Categoria como como source, fondo, etc. y la source actual esta resaltada. Configure la informacion de source segun sea necesario como se muestra enns la captura de pantalla de arriba. Paso 5 - Seleccione el Color de fondo deseado. Tambien puede seleccionar su imagen de fondo con el boton del navegador. Una vez que haya terminado con el fondo, configure sus bordes si lo desea. Paso 6 - Elija la opcion linea doble para el borde y tambien elija el width y el color de las listas desplegables. Una vez que haya terminado con el estilo, haga clic en Aceptar. Paso 7 - Ahora puedes ver en la vista de diseno que el color de fondo se cambia al que hemos seleccionado, si abres el archivo, veras que toda la informacion se almacena automaticamente en el fArchivo CSS. Paso 8 : navega hasta el indice. html nuevamente, arrastre desde el panel "Caja de herramientas " y sueltelo en su pagina abierta. Paso 9 - Sobre la vista de codigo vera las etiquetas y , haga clic en la etiqueta luego, en el panel Aplicar estilos, haga clic en el nuevo estilo ... que abrira el cuadro de dialogo Nuevo estilo. Escriba "#container" en el campo Selector. La marca de almohadilla # es un selector de En la lista desplegable "Establecer en", seleccione la hoja de estilo existente y marque la opcion "Aplicar nuevo estilo a la seleccion del documento". Vaya a la categoria Fondo. Paso 10 : seleccione el color de fondo, seleccionemoslocolor blanco luego vayamos a la categoria Caja. Paso 11 : defina relleno y margen , luego navegue hasta Posicion Paso 12 : establezca el width en 90%. Sin embargo, no especifique la height, ya que aqui queremos que el contenedor se expanda cuando ingresemos el contenido. Haga clic en el boton Aceptar. Del mismo modo, agreguemos estilos para el encabezado, navegacion superior , navegacion izquierda, contenido principal y pie de pagina. Aqui esta el codigo en la hoja de estilo despues de agregar todos los estilos mencionados arriba. body {: Calibri; tamano de source: medio; peso de source: normal; estilo de source: normal; variant-font: normal; Texast-transform: ninguna; color: # 0000FF; color de fondo: #CCFFFF; imagen de fondo: ninguna; borde: medio doble # FF0000; } #contenedor {color de fondo: #FFFFFF; relleno: 8px; margen: 8px; width: 90%; } #header {color de fondo: # 54B431; repeticion de fondo: sin repeticion; posicion de fondo: centro derecha; height: 170px; } # top-nav {height: 50px; -top: medio solido # 006600; -fondo: medio solido # 006600; color de fondo: #FFFFFF; } # navegacion-izquierda {margen: 20px 0px 10px 0px; width: 180px; flotador izquierdo; borde: punteado fino # 006600; } # contenido principal {margen: 20px 10px 10px 200px; color de fondo: #CCFFCC; } #footer {-top: 2px solido # 006600; aclarar ambos; relleno: 10px 0px; alineacion de texto: centro; } index.html Aqui esta el codigo en el archivo index.html despues de agregar todas las etiquetas. < content = "text / html; charset = utf-8 " http-equiv= "Content-Type " /> Salida La configuracion La pagina de su pagina en la vista Diseno se vera como la que se muestra en la siguiente captura de pantalla. Microsoft Expression Web - Diseno HTML En este capitulo aprenderemos otra forma de disenar el diseno de una pagina. En el ultimo capitulo usamos una hoja de estilo para aplicar los estilos al encabezado, pie de pagina, etc. pero tambien puedes especificar los estilos en la pagina HTML en si sin usar una hoja de estilo adicional. Esta no es la forma recomendada de disenar un diseno, pero solo para entender, cubriremos esta tecnica aqui. siga los pasos a continuacion. Paso 1 : agreguemos una pagina HTML y asignele el nombre layoutdemo.html Paso 2 : ahora agregue la etiqueta de la caja de herramientas. Paso 3 - En el panel Aplicar estilos , haga clic en Nuevo estilo ... Paso 4 : cuando seleccione la opcion Pagina actual de la lista desplegable "Establecer en", el estilo se guardara en la misma pagina HTML. Configure la source para su pagina, luego vaya a la categoria Fondo. Paso 5 : establece el color de fondo. Tambien puedes configurar las categorias Borde, Cuadro y Posicion y hacer clic en Aceptar. layoutdemo.html Puede ver que el estilo se agrega en el mismo archivo HTML. < content = "text / html; charset = utf-8 "http-equiv="Content-Type " /> Sin titulo 1 tipo = "text / css "> #container {: Arial, Helvetica, sans-serif; tamano de source: mediano; peso de source: normal; estilo de source: normal; variante de source: normal; text-transform: capitalizar; color: # 800000; color de fondo: # C0C0C0; relleno: 8px; margen: 8px; width: 90%; } Asimismo, puede agregar otros estilos como encabezado, pie de pagina, contenido principal, etc. como se indico anteriormente. Navegacion horizontal En este capitulo aprenderemos como agregar navegacion horizontal oes elementos del menu al sitio web. Paso 1 : para crear elementos de menu o navegacion horizontal, agreguemos el siguiente codigo en en el archivo index.html, que contiene el lista de elementos del menu. Paso 2 : esta es una lista simple con vinetas para el menu superior. Para crear un hipervinculo, vaya a la vista de diseno o vista de codigo . Paso 3 : seleccione el elemento que desea utilizar como elemento de hipervinculo y presione Ctrl + K. Paso 4 - Haga clic en el boton Informacion sobre herramientas…. Paso 5 : ingrese el texto deseado como info- burbuja y haga clic en Aceptar. Paso 6 : en el campo Texto para mostrar , ingrese Inicio y seleccione el archivo index.html y luego haga clic en Aceptar. Paso 7 : de manera similar, agregue hipervinculos para otros elementos del menu, como se muestra en el siguiente codigo. < content = "text / html; charset = utf-8 " http-equiv= "Content-Type " /> Inicio Elemento de menu 1 Elemento de menu 2 Elemento de menu 3 Paso 8 : para configurar el estilo de navegacion superior, vaya al panel Administrar estilos . Paso 9 : haga clic con el boton derecho en "# top-nav" y seleccione Editar estilo. Seleccione la categoria "Borde " y cambie el width a delgado. Paso 10 : seleccione la casilla y desmarque la casilla “Lo mismo para todos" e ingrese 10 en los campos superior e inferior. Paso 11 - Vaya a la categoria Posicion . Paso 12 : elimina el 50 del campo height y haga clic en Aceptar. En el panel Aplicar estilos, haga clic en Nuevo estilo ... Paso 13 : ingrese # top-nav ul en el campo Selector y seleccione la hoja de estilo existente en el menu desplegable "Definir en ". En la categoria Bloque , seleccione estoIngrese al campo de alineacion de prueba y vaya a la categoria Lista. Paso 14 : seleccione ninguno en el campo tipo de estilo de lista y haga clic en Aceptar. Paso 15 - Nuevamente, desde el Panel Aplicar estilos , haga clic en Nuevo estilo ... Ingrese # top-nav ul li en el campo Selector, luego seleccione el hoja de estilo existente en la lista desplegable "Establecer en" y navegue hasta la categoria Diseno. Paso 16 : seleccione en linea en la vista y haga clic en Aceptar. Paso 17 - Vaya al panel Aplicar estilos, haga clic en Nuevo estilo ... Introduzca # top -nav ul li a en el selector y el campo Seleccionarione la hoja de estilo existente en la lista desplegable "Establecer en " y seleccione blanco como color de source. Paso 18 : navega a la categoria Fondo . Paso 19 : seleccione verde como color de fondo y navegue hasta la categoria de cuadro . Paso 20 : defina los valores de relleno y haga clic en Aceptar . Paso 21 : ahora regresemos al panel Aplicar estilos y haga clic en Nuevo estilo. Ingrese #topnav ul li a: hover en el campo Selector y seleccione la hoja de estilo existente de la lista desplegable "Establecer en " y seleccione negro como color de source . Paso 22 : ahora vaya a Categoria de fondo . Paso 23 : seleccione el color de fondo para su opcion de menu cuando el mouse este sobre el elemento del menu y navegue hasta la categoria Borde. Paso 24 : seleccione el estilo, el width y el color del borde, luego haga clic en Aceptar. verifique su apariencia, vaya al menu Archivo y seleccione Vista previa en el navegador. Cuando pasa el mouse sobre un elemento del menu, cambiara el fondo y el color de la source. Navegacion vertical En este capitulo, aprenderemos como agregar navegacion vertical o elementos de menu al sitio web. Vayamos paso a paso. Paso 1 : para crear elementos de menuuo una navegacion vertical, agreguemos el siguiente codigo en en el archivo index.html que contiene la lista de elementos del menu. Navegacion del sitio Paso 2 - Esta es una lista simple con vinetas para su menu principal. Para crear un hipervinculo, vaya a la vista de diseno o vista de codigo . Paso 3 : seleccione el elemento que desea usar como elemento de hipervinculo y presione Ctrl + K. Paso 4 - Haga clic en el boton Tooltip…. Ingrese el texto deseado como screentip y haga clic en Aceptar. Paso 5 : en el campo de texto para mostrar , ingrese Inicio y seleccione el archivo index.html y luego haga clic enez en OK. En este punto, nuestra pagina index.html se ve asi: Paso 6 : agregue mas hipervinculos para otros elementos del menu como se muestra en el siguiente codigo . < content = " text / html; charset = utf-8 "http-equiv=" Content-Type "/> Inicio Elemento de menu 1 Elemento de menu 2 Elemento de menu 3 Navegacion en el sitio Inicio NaviElemento de navegacion 1 Elemento de navegacion 2 Elemento de navegacion 3 Paso 7 : para establecer el estilo de la navegacion superior, vaya al panel Administrar estilos. Haga clic con el boton derecho en # navegacion izquierda y seleccione Editar estilo… Paso 8 : ingrese el valor 0.9 en el campo de tamano de source y seleccione em de la lista menu desplegable junto a Tamano de source y navegue hasta la categoria Cuadro. Paso 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… Paso 10 : ingrese # left-nav ul en el campo de seleccion. Seleccione la hojaestilo existente en la lista desplegable "Establecer en " y en la categoria Lista, seleccione ninguno en el campo Tipo de estilo de lista y haga clic en Aceptar. Paso 11 - Nuevamente, desde el panel Aplicar estilos , haga clic en Nuevo estilo . Desmarque el relleno "Igual para todos". Ingrese 0.2 en el campo inferior y haga clic en Aceptar. Paso 12 : ingresa # left-nav ul li en el campo Selector y seleccione la hoja de estilo existente en el campo "Definir en lista desplegable" y vaya a la categoria Cuadro. Paso 13 : vaya al panel Aplicar estilos y haga clic en Nuevo estilo. Paso 14 : ingrese # left-nav ul li a en el campo Selector y seleccione la hoja de estilo existente de la lista desplegable "Establecer en " y seleccione blanco como color de source. Paso 15 - Vaya a la categoria Atras plan. Seleccione el color como color de fondo. Paso 16 : Navega a la categoria Box y establezca los valores de relleno. Paso 17 - Ir a la categoria Diseno . Seleccione bloque de la lista desplegable mostrar y haga clic en Aceptar. Paso 18 - Ahora regresemos al panel Aplicar estilos y haga clic en Nuevo estilo. Ingrese # left-nav ul li a: hover en el campo Selector y Seleccionar.Una vez en la hoja de estilo existente en la lista desplegable "Definir en ". Seleccione negro como color de source. Paso 19 - Ahora ve a la categoria Fondo. Selecciona el color de fondo de tu opcion de menu cuando coloque el mouse sobre el elemento del menu y haga clic en Aceptar. Paso 20 : para comprobar como se ve, vaya al menu Archivo y seleccione Vista previa en su navegador. Cuando pasa el mouse sobre cualquier elemento del menu, cambiara su fondo y color de source. Microsoft Expression Web - Validar paginas En este capitulo, aprenderemos como asegurarnos de que nuestro codigo HTML y CSS sea valido. Microsoft Expression Web ofrece varios metodos para encontraren sus paginas web, errores de codigo y codigo incompatible con un esquema HTML y CSS en particular. La barra de estado y la vista de codigo le alertan de errores de codigo e incompatibilidad en una sola pagina, mientras que el panel de tareas de compatibilidad enumera todos los errores de codigo e incompatibilidad en una o mas paginas, o en un sitio web completo. Expression Web identifica incompatibilidades de codigo utilizando un esquema de documento basado en la declaracion DocType en una pagina. Si la pagina no contiene una declaracion DocType o si no se reconoce el DocType, Expression Web utiliza un esquema secundario . Cuando crea un sitio y trabaja en sus paginas, debe tener el habito de publicar paginas. Microsoft Expression Web dispone de diversas herramientas que pueden resultar de gran utilidad a la hora de validar sus paginas web. hay dos opciones en la expresion web, donemosc en el menu y seleccione la opcion Editor de paginas. L " La pestana General ofrece dos opciones: Resaltar HTML no valido : esta opcion, cuando esta marcada, mostrara HTML no valido en un esquema de color especifico y el texto predeterminado sera rojo sobre un fondo amarillo. Resalte HTML incompatible - Esta opcion, cuando esta marcada, mostrara un subrayado ondulado debajo del codigo que no es compatible con los estandares HTML. Barre d " estado Cuando la pagina web actual y abierta tiene un error de codigo, aparece un icono de Error de codigo detectado (resaltado en la siguiente captura de pantalla) . Suponga que olvido el simbolo ">" en una etiqueta - en esta caso, la barra de estado enLa parte inferior de la ventana del programa muestra el icono de error de codigo detectado. Cuando seleccione "Ir al error " en el menu desplegable, lo llevara a la linea donde existe el error y y Puede corregir facilmente la sintaxis. Cuando el pagina contiene codigo incompatible con el tipo de documento especificado, la barra de estado muestra un icono Se detecto incompatibilidad HTML . Suponga que usa "hre" para un hipervinculo en lugar de " Cuando seleccione " Ir al error "en el menu desplegable, lo llevara a la linea donde existe el error y podra corregir la sintaxis facilmente. Informe de compatibilidad Un informe de compatibilidad comprueba las paginas y los archivos CSS en busca de errores de codigo y el codigo que es incompatible con el esquema DocType y CSS que especifique. Puede generar un informe que solo verifique archivos particulares o un sitio web completo. Paso 1 - Para generar un informe de compatibilidad, vaya al menu de herramientas y haga clic en la opcion Informes de compatibilidad…. Paso 2 - El cuadro de dialogo Comprobador de compatibilidad proporciona varias opciones para verificar solo archivos particulares en su sitio, abrir esos archivos o seleccionarlos en el panel de tareas Lista de carpetas o en la vista Sitio web. Seleccione las opciones segun sea necesario y haga clic en el boton Comprobar. Paso 3 : se abre el panel de tareas Compatibilidad y el estado de generacion del informe aparece en la parte inferior del panel de tareas. . Al hacer doble clic en cualquier linea, lo llevare al lugar donde existe el error. Plantilla web dinamica Una plantilla web dinamica es una copia maestra HTML de una pagina web que puede crear para contener configuraciones, formato y elementos de la pagina, como texto, graficos, el diseno, los estilos y las regiones de una pagina web que se pueden cambiar. Cuando adjunta una plantilla web dinamica a las paginas de un sitio web, esa plantilla define el diseno pagina para estas paginas. Puede utilizar cualquier cantidad de plantillas web dinamicas en un sitio web y puede adjuntar una plantilla web dinamica a tantas paginas como desee. Con plantillas web dinamicas,puede crear paginas HTML que compartan el mismo diseno. Ademas de proporcionar un diseno compartido, puede hacer que ciertas regiones de una plantilla esten disponibles para editar mientras evita cambios en otras regiones de esa plantilla. Esto significa que puede permitir que otros agreguen y editen contenido, pero mantenga el diseno de las paginas y la plantilla en si. La necesidad de plantillas web dinamicas El concepto mas importante en el diseno de sitios web es mantener una apariencia coherente para su sitio y con la plantilla web dinamica puede alcanzar. La plantilla web dinamica proporciona: Paginas basicas como mapa del sitio, contacto, informacion y paginas de busqueda. Un visitante debe poder acceder a su pagina de inicio desde cualquier pagina del sitio. Navegacion constante en todo su sitio. Apariencia coheanualidad en todo el sitio. Crear plantilla web dinamica Para crear una plantilla web dinamica (DWT), comience con una pagina HTML vacia y guardela como ese archivo * .dwt . Vayamos paso a paso y aprendamos mas. Paso 1 : abra el archivo index.html y seleccione la opcion de menu Archivo → Guardar como… , que abrira el cuadro de dialogo Guardar como. Seleccione la plantilla web dinamica (* .dwt) de la lista desplegable Guardar como tipo y cambie el nombre del indice del archivo a master.dwt y haga clic en el boton Guardar. Paso 2 : ahora vera que se crea un nuevo archivo master.dwt en la lista de carpetas Creemos un nuevo archivo HTML y llamemoslo index_2.html Abra el archivo master.dwt y en la vista Diseno o en la vista Codigo haga clic derecho dentro de la bcontenido principal alises. Paso 3 : en , seleccione el comando Administrar regiones editables ... que abrira el cuadro de dialogo Regiones editables. Paso 4 - En el nombre de la region, ingrese un nombre para la region editable, luego haga clic en Agregar. Repita para agregar cambios adicionales a las regiones si lo desea. Paso 5 : una vez que agrego todas las regiones editables, haga clic en Cerrar. Ahora navegue hasta el archivo index_2.html y tambien seleccionelo de la lista de carpetas. Paso 6 : vaya al menu Formato y seleccione Plantilla web dinamico → Adjunte una plantilla web dinamica… que abrira el cuadroCuadro de dialogo Adjuntar plantilla web dinamica. Paso 7 - Seleccione la Plantilla web dinamica que es aqui el archivo master.dwt y haga clic en el boton Abrir. Recibira un mensaje de advertencia. Haga clic en Si. Paso 8 : puede ver que se aplica la misma plantilla al archivo index_2.html. De manera similar, puede agregar la misma plantilla tiene tantas paginas HTML en el sitio web como desee. Paso 9 : en esta pagina solo puede editar la seccion de contenido principal. Si mueve el mouse a la otra seccion, vera que "no es editable y el cursor del mouse tambien se convierte en una cruz roja. Paso 10 -Para ver como se ve, vaya al menu Archivo y seleccione Vista previa en su navegador. Microsoft Expression Web - Pagina de busqueda En este capitulo, vamos a aprender como agregar una opcion de busqueda o un cuadro de busqueda al sitio web. Este es un sitio grande, necesitara un cuadro de busqueda en el sitio para que el usuario pueda encontrar facilmente todos los datos. Hay muchos programas gratuitos disponibles como Windows Live, Google , etc. Windows Live Search Los siguientes pasos le muestran como agregar un campo de Windows Live Search a su pagina web y luego configurar el formulario de busqueda para buscar en toda la web o solo en su sitio web. Paso 1 : cree una nueva pagina HTML y asignele el nombre Pagina de busqueda . Paso 2 : vaya al menu Formato y seleccione la opcion Plantilla web dinamica → Adjuntar plantilla web dinamica… . Seleccione el archivo master.dwt y haga clic en el boton Abrir. Paso 3 - Agreguemos el siguiente codigo en la region editable. Paso 4 : guarde la pagina. Vaya al menu Archivo y seleccione Vista previa en el navegador. Paso 5 - Veras Windows Live Search en tu pagina web. Ingresa algo en la busqueda y haz clic en el boton Buscar en el sitio Paso 6 : como puede ver, buscara en la web. Si Si desea limitar la busqueda solo a su sitio web, debe especificar el dominio de su sitio con el siguiente nombre en lugar de https: //www.microsoft.com/expression " Paso 7 : del mismo modo, puede agregar ele Opcion de busqueda de Google agregando el siguiente codigo en la region editable. Encuentra solo este sitio web Paso 8 : guarde su pagina HTML y vera un cuadro de busqueda, un boton de busqueda, una casilla de verificacion y una etiqueta de casilla de verificacion. Paso 9 : para restringir a los usuarios a buscar solo en su sitio web, marque la casilla y navegue hasta el panel Propiedades de la etiqueta y establezca la propiedad Valor en la URL de su sitio web, por ejemplo https: //www.microsoft.com/expression " ". <-srcsetdatos=Source"https://www.hebergementwebs.com/image/01/resize-01279725a72b1e2de97899a099d74d82.webp/microsoft-expression-web-guide-rapide-443.webp"tipo = "image/webp" alt = "> Paso 10 : guarde su pagina yprevisualizarlo en el navegador. Ahora vera la opcion de busqueda de Google en su pagina web. Microsoft Expression Web - Imagenes Las imagenes se utilizan ampliamente en las paginas web para hacerlas interesantes y brindar una mejor experiencia de usuario. En este capitulo aprenderemos como agregar imagenes al sitio web. Como de costumbre, vayamos paso a paso y aprendamos el proceso en detalle. Paso 1 : para comenzar a agregar imagenes, creemos un nuevo sitio de una pagina y cambie el nombre de default.html en index.html. Paso 2 : debemos ahora incluya imagenes en el sitio web para que podamos usar esas imagenes en la pagina web. Vamos a crear una nueva carpeta. En la lista de carpetas, haga clic con el boton derecho en el nombre del sitio web. Paso 3 : actualmente no hay imagenes en esta carpeta. Para agregar imagenes a esta carpeta, puede simplemente seleccione y arrastre las imagenes desde su disco duro y sueltelas en la carpeta de imagenes. Vera que las imagenes se agregan a la carpeta imagenes del sitio web como se muestra en la siguiente captura de pantalla. Paso 4 : estas imagenes ahora estan incluidas en su sitio web, pero ninguna entre ellos no se usa en una pagina web. Una manera facil de agregar una imagen a la pagina web es arrastrar la imagen desde la carpeta de imagenes y soltarla en la vista de codigo en la ubicacion donde desea agregar la imagen en la pagina web. Suponga que queremos agregar una imagen debajo del titulo. Cuando suelta la imagen y la sueltaboton del raton, aparece el siguiente cuadro de dialogo. Aqui puede especificar el texto alternativo y el deion largo. Luego haga clic en Aceptar y guarde la pagina web. Ahora puede ver que la etiqueta se agrega con el nombre alternativo y la source de la imagen. Paso 5 : sigue el mismo proceso y agregue la segunda imagen con su nombre alternativo y source. El archivo index.html aparecera de la siguiente manera: < ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN " "http: // www " " .w3.org / TR / xhtml1 / DTD / xhtml1-t ransitional. dtd "> < content = "text / html; charset = utf-8 "http-equiv=" Content-Type "/> Trabajar con imagenes Paso 6 : el cuadro de dialogue Propiedades de imagen le da acceso a los atributos de imagen mas utilizados. Cuando hace doble clic en una imagen, aparece el cuadro de dialogo Propiedades de imagen. En Expression Web, cuadro de dialogo Propiedades La imagen tiene dos pestanas, General y Apariencia . Estas son las opciones disponibles en la pestana General . Imagen - Contiene el nombre de la carpeta / archivo de la imagen grafica. Texto alternativo : escriba t El texto que desea mostrar para las imagenes cuando se descarga el grafico, cuando no se puede encontrar o cuando un visitante del sitio mueve el puntero. Este texto tambien lo utilizara un lector de pantalla si el espectador utiliza uno. Long Deion : a veces, algunos las palabras no son suficientes ppara describir tu imagen. Los graficos y graficos son ejemplos. Haga clic en Examinar para seleccionar un archivo que contenga una descripcion mas larga de la imagen. Ubicacion : si desea asociar su imagen con una pagina web o mas imagenes, inserte el hipervinculo aqui. Marco de destino : si la pagina actual es una pagina de marcos, esta opcion indica en que marco se debe mostrar el enlace O puede elegir abre la imagen o pagina en una nueva ventana. Las siguientes opciones estan disponibles en la pestana Apariencia . Estilo de envoltura : especifique como flota la imagen en la pagina, por ejemplo, Ninguna, Izquierda o Derecha. Diseno : en esta seccion puede establecer la alineacion, el grosor del borde y los margenes horizontales.zontal y vertical. Tamano : Expression Web establece automaticamente las propiedades de width y alto de la imagen en funcion de las dimensiones reales de la imagen. . En lugar de cambiar el tamano de su imagen cambiando estas dimensiones, cambie el tamano de la imagen con su editor de graficos. Paso 7 - Ahora veamos una vista previa de la pagina web en el navegador; mostrara la siguiente salida. Microsoft Expression Web - Hipervinculos En este capitulo aprenderemos a utilizar hipervinculos en su sitio web Una de las cosas que hace que la web sea tan vasta es la capacidad de las paginas web para enlazar con otras paginas web. Hipervinculos o enlaces se encuentran en casi cualquier paginas web. Los hipervinculos tambien permiten a los usuarios hacer clic e ir a otra pagina, finalizaro en una pagina, imagen u otra ubicacion en Internet por completo. Estas son algunas de las caracteristicas importantes de los hipervinculos: Las herramientas y las opciones de hipervinculo de Expression Web facilitan el uso de enlaces hipertexto. Las vistas e informes de hipervinculos de Expression Web tambien facilitan la busqueda y reparacion de enlaces rotos y defectuosos. Un hipervinculo puede ser una palabra, un grupo de palabras o una imagen que, cuando se hace clic, lo llevara a un nuevo documento oa un lugar en el documento actual. Etiqueta de anclaje En HTML, la etiqueta conocida como etiqueta d widthr se utiliza para vincular a otro documento. Un ancla puede apuntar a otra pagina html, una imagen, un documento de texto o un archivo pdf, entre otros. Aqui esta el codigo base c de una etiqueta de anclaje . Texto que se mostrara como un enlace En la 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 mostraran como un hipervinculo. Cuando mueves el cursor sobre un enlace en una pagina web, la flecha se convierte en una mano pequena. Una URL es una direccion que especifica un protocolo, un servidor web y una ruta de archivo. Hay dos tipos de URL, absoluta y relativa . Una URL absoluta contiene una direccion completa, mientras que a una URL relativa le falta una o mas partes de la direccion. Sin embargo, el navegador web obtiene la informacion que falta en la pagina que contiene la URL. Ejemplo Echemos un vistazo a un ejemplo sencillo en el que usara ambas URL absoluto y relativo . Paso 1 : comience por abrir el indice. html y agregue las siguientes lineas en la seccion contenido principal . Ejemplo de URL absoluta: Google Youtube Ejemplo de URL relativa: Pagina de inicio 2 Aqui esta la implementacion completa de la pagina index.html . < content = " text / html; charset = utf-8 "http-equiv=" Content-Type "/> type = " text / css "> # left-nav ul li a: hover {color: # 000000; color de fondo: # 116611;} # left-nav ul li a: hover {color: # 000000; color de fondo: # 66FF99;} Inicio Elemento de menu 1 Elemento de menu 2 Elemento de menu 3 Navegacion en el sitio Inicio Elemento de navegacion 1 https://msdn.microsoft.com/en-us/expression/ jj873995 ". Por ejemplo, descarguemos el complemento AddFeed. Paso 1 : abramos Expression Web y vayamos al menu Herramientas. Haga clic en la opcion de menu Complementos ... . Paso 2 : si es la primera vez que se instala un complemento, Habra una lista vacia en el cuadro de dialogo Administrar complementos. Hagamos clic en el boton Instalar . Paso 3 : seleccione el archivo AddFeeds.xadd y haga clic en el boton Abrir . Paso 4 - Una vez instalado te mostrara la siguiente pantalla, te preguntara si queremos activar el complemento. La pantalla dara toda la informacionormaciones sobre el complemento particular que se esta instalando. Haga clic en Si. Paso 5 : segun los complementos instalados, estaran disponibles en varios lugares. Paso 6 - Luego vaya a Insertar menu . Vera la opcion Twitter o RSS Feed que ahora se agrega despues de instalar el complemento. Puede seguir los mismos pasos para instalar mas complementos segun sea necesario.