Microsoft Expression Web: página web en blanco

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 Vínculo 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.

↰ Previous page Next page ↱