Microsoft Expression Web: diseño de página web

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.

↰ Previous page Next page ↱