Curso de Dreamweaver → Curso de Dreamweaver 2007 (2)

  1. Análisis de una plantilla CSS y adaptación a Dreamweaver


Buscar

Categorías

Histórico



Asociación de Internautas
Navega a la última con Firefox

1) Análisis de una plantilla CSS y adaptación a Dreamweaver
Francisco 09-11-07
Programación : CSS : Curso de Dreamweaver 2007 (2)

Vamos a convertir la plantilla CSS Bright Side of Life de la web stylesshout.com a una plantilla de Dreamweaver. También cambiaremos la hoja de estilos CSS así como las imágenes utilizadas en el CSS. Por último veremos una técnica para que la pestaña que deseemos esté activa.

Plantilla Bright Side of Life

Comprender cómo está organizada la plantilla

  • Lo primero sería bajarnos la plantilla Bright Side of Life y descomprimirla en una carpeta.
  • Renombraremos el fichero index.html a BrightSide.html
  • Instalamos la extensión Web Developer en Mozilla Firefox que nos será útil para ver cómo está realizada la plantilla.
  • Para ver cómo es la plantilla abriremos el fichero BrightSide.html con Firefox y en la barra de herramientas de Web Developer podemos probar las siguientes acciones.
    • Ver cómo queda la página sin estilos: CSS → Disable Styles → All Styles
    • Ver los estilos aplicados en cada parte del documento: CSS → View Style Information
    • Ver el orden de las etiquetas DIV: Information → Display Div Order
    • Ver identificadores y clases: Information → Display Id & Class Details
    • etc.

Resumen del código BrigthSide.html

...
<html ... >
  <head>
  ...
  <link rel="stylesheet" href="images/BrightSide.css" type="text/css" />
  ...
  </head>
  <body>
    <div id="wrap">
      <div id="header"> 
        <h1 id="logo"> ... </h1> 
        <h2 id="slogan"> ... </h2> 
        <form class="searchform" ... > ... </form>
         <!-- Menu Tabs -->
         <ul>
           <li id="current"><a href="index.html"><span>Home</span></a></li>
           <li><a href="index.html"><span>News</span></a></li>
           <li><a href="index.html"><span>Downloads</span></a></li>
           ...
        </ul> 
      </div>    
      <div id="content-wrap"> 
        <img ... />
        <div id="sidebar"> ...  </div>
        <div id="main"> ... </div> 
        <div id="rightbar"> ... </div> 
      </div>
      <div id="footer">
        <div class="footer-left"> ... </div>
        <div class="footer-right"> ... </div>
      </div>   
    </div>
  </body>
</html>

Modelo esquemático de BrigthSide.html

Las etiquetas <div> que organizan la página de la plantilla son las siguientes

  • body
    • wrap (contenedor)
      • header (encabezado)
        • h1#logo (logotipo)
        • h2#slogan (lema)
        • form.search (búsqueda)
        • ul (lista de enlaces en pestañas)
          • li#current (pestaña activa)
          • li (pestaña normal)
      • content-wrap (cuerpo)
        • img.no-border (imagen del campo)
        • sidebar (lateral izquierdo)
        • main (contenido principal)
        • rightbar (lateral derecho)
      • footer (pie)
        • footer-left (pie-izquierdo)
        • footer-right (pie-derecho)

Dar un vistazo a la hoja de estilos BrightSide.css

/********************************************
 AUTHOR: Erwin Aligam 
 WEBSITE: http://www.styleshout.com/
 TEMPLATE NAME: Bright Side of Life
 TEMPLATE CODE: S-0005
 VERSION: 1.0
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 

/* top elements */
* { padding: 0; margin: 0; }

body {
  margin: 0;
  padding: 0;
  font: .70em/1.5em  Verdana, Tahoma, Helvetica, sans-serif;
  color: #666666; 
  background: #A9BAC3 url(bg.gif) repeat-x;
  text-align: center;
}

/* links */
a { 
  color: #4284B0;
  background-color: inherit;
  text-decoration: none;
}
a:hover {
  color: #9EC068;
  background-color: inherit;
}

/* headers */
h1, h2, h3 {
  font: bold 1em 'Trebuchet MS', Arial, Sans-serif;
  color: #333;  
}
h1 { font-size: 1.5em; color: #6297BC; } 
h2 { font-size: 1.4em; text-transform:uppercase; }
h3 { font-size: 1.3em; }

p, h1, h2, h3 {
  margin: 10px 15px;
}
ul, ol {
  margin: 10px 30px;
  padding: 0 15px;
  color: #4284B0;
}
ul span, ol span {
  color: #666666; 
}

/* images */
img {
  border: 2px solid #CCC;
}
img.no-border {
  border: none;
}
img.float-right {
  margin: 5px 0px 5px 15px;  
}
img.float-left {
  margin: 5px 15px 5px 0px;
}
a img {  
  border: 2px solid #568EB6;
}
a:hover img {  
  border: 2px solid #CCC !important; /* IE fix*/
  border: 2px solid #568EB6;
}

code {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
  border-left: 4px solid #4284B0; 
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
  margin: 15px;
  padding: 0 0 0 20px;    
  background: #FAFAFA;
  border: 1px solid #f2f2f2; 
  border-left: 4px solid #4284B0;   
  color: #4284B0;
  font: bold 1.2em/1.5em Georgia, 'Bookman Old Style', Serif; 
}

/* form elements */
form {
  margin:10px; padding: 0;
  border: 1px solid #f2f2f2; 
  background-color: #FAFAFA; 
}
label {
  display:block;
  font-weight:bold;
  margin:5px 0;
}
input {
  padding: 2px;
  border:1px solid #eee;
  font: normal 1em Verdana, sans-serif;
  color:#777;
}
textarea {
  width:300px;
  padding:2px;
  font: normal 1em Verdana, sans-serif;
  border:1px solid #eee;
  height:100px;
  display:block;
  color:#777;
}
input.button { 
  margin: 0; 
  font: bold 1em Arial, Sans-serif; 
  border: 1px solid #CCC;
  background: #FFF; 
  padding: 2px 3px; 
  color: #4284B0;  
}

/* search form */
form.searchform {
  background: transparent;
  border: none;
  margin: 0; padding: 0;
}
form.searchform input.textbox { 
  margin: 0; 
  width: 120px;
  border: 1px solid #9EC630; 
  background: #FFF;
  color: #333; 
  height: 14px;
  vertical-align: top;
}
form.searchform input.button { 
  margin: 0; 
  padding: 2px 3px; 
  font: bold 12px Arial, Sans-serif; 
  background: #FAFAFA;
  border: 1px solid #f2f2f2;
  color: #777;  
  width: 60px;
  vertical-align: top;
}

/***********************
    LAYOUT
************************/
#wrap {
  background: #FFF;
  width: 820px; height: 100%;
  margin: 0 auto;  
  text-align: left;
}
#content-wrap {
  clear: both;
  margin: 0; padding: 0;  
  background: #FFF;
}

/* header */
#header {
  position: relative;
  height: 85px;  
  background: #000 url(headerbg.gif) repeat-x 0% 100%;  
}
#header h1#logo {
  position: absolute;
  margin: 0; padding: 0;
  font: bolder 4.1em 'Trebuchet MS', Arial, Sans-serif;
  letter-spacing: -2px;
  text-transform: lowercase;
  top: 0; left: 5px;  
}
#header h2#slogan {
  position: absolute;   
  top:37px; left: 95px;
  color: #666666;
  text-indent: 0px;
  font: bold 11px Tahoma, 'trebuchet MS', Sans-serif; 
  text-transform: none;  
}
#header form.searchform {
  position: absolute;
  top: 0; right: -12px;  
}

/* main */
#main {
  float: left;
  margin-left: 15px;
  padding: 0;
  width: 50%;    
}

.post-footer {
  background-color: #FAFAFA;
  padding: 5px; margin: 20px 15px 0 15px;
  border: 1px solid #f2f2f2;
  font-size: 95%;  
}
.post-footer .date {
  background: url(clock.gif) no-repeat left center;
  padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
  background: url(comment.gif) no-repeat left center;
  padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
  background: url(page.gif) no-repeat left center;
  padding-left: 20px; margin: 0 10px 0 5px;
}

/* sidebar */
#sidebar {
  float: left;
  width: 23%;
  margin: 0;  padding: 0; 
  display: inline;    
}
#sidebar ul.sidemenu {
  list-style:none;
  margin:10px 0 10px 15px;
  padding:0;    
}
#sidebar ul.sidemenu li {
  margin-bottom:1px;
  border: 1px solid #f2f2f2;
}
#sidebar ul.sidemenu a {
  display:block;
  font-weight:bold;
  color: #333;  
  text-decoration:none;  
  padding:2px 5px 2px 10px;
  background: #f2f2f2;
  border-left:4px solid #CCC;    
  min-height:18px;
}

* html body #sidebar ul.sidemenu a { height: 18px; }

#sidebar ul.sidemenu a:hover {
  padding:2px 5px 2px 10px;
  background: #f2f2f2;
  color: #339900;
  border-left:4px solid #9EC630;
}

/* rightbar */
#rightbar {
  float: right;
  width: 23%;
  padding: 0; margin:0;    
}

/* Footer */
#footer { 
  clear: both; 
  color: #FFF; 
  background: #A9BAC3; 
  border-top: 5px solid #568EB6;
  margin: 0; padding: 0; 
  height: 50px;    
  font-size: 95%;    
}
#footer a { 
  text-decoration: none; 
  font-weight: bold;  
  color: #FFF;
}
#footer .footer-left{
  float: left;
  width: 65%;
}
#footer .footer-right{
  float: right;
  width: 30%;
}

/* menu tabs */
#header ul {
  z-index: 999999;
  position: absolute;
  margin:0; padding: 0;
  list-style:none;
  right: 0; 
  bottom: 6px !important; bottom: 5px;
  font: bold 13px  Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif;  
}
#header li {
   display:inline;
   margin:0; padding:0;
}
#header a {
   float:left;
   background: url(tableft.gif) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header a span {
   float:left;
   display:block;
   background: url(tabright.gif) no-repeat right top;
   padding:6px 15px 3px 8px;
   color: #FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span { float:none; }
/* End IE5-Mac hack */
#header a:hover span {
  color:#FFF;
}
#header a:hover {
   background-position:0% -42px;
}
#header a:hover span {
   background-position:100% -42px;
}
#header #current a {
   background-position:0% -42px;
   color: #FFF;
}
#header #current a span {
   background-position:100% -42px;
   color: #FFF;
}
/* end menu tabs */

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* additional classes */
.clear { clear: both; }
.green { color: #9EC630; }
.gray  { color: #BFBFBF; }

BrigthSide.css

Crear en Dreamweaver plantilla_brillante.dwt

  • Crear un sitio en Dreamweaver llamado Sitio Brillante cuya carpeta raíz local sea dónde hemos descomprimido la plantilla Bright Side of Life.
  • Creamos una nueva Plantilla HTML en Dreamweaver.
  • Guardamos la plantilla con el nombre plantilla_brillante (ignoramos el error de que falta una región editable). El archivo aparecerá dentro de la subcarpeta Templates con el nombre plantilla_brillante.dwt
  • Si observamos el código fuente de la plantilla Dreamweaver veremos que hay dos regiones editables predefinidas:
    • La región editable doctitle se utiliza para poder cambiar el título de la página
    • La región editable head se utiliza para añadir hojas de estilo CSS o código Javascript
      <!-- TemplateBeginEditable name="doctitle" -->
      <title>Plantilla Brillante</title>
      <!-- TemplateEndEditable -->
      <!-- TemplateBeginEditable name="head" -->
      <!-- TemplateEndEditable -->
  • Desde la vista código de Dreamweaver copiamos todo el contenido de la etiqueta <body> de BrightSide.html y lo pegamos en el <body> de nuestra plantilla.
    • Truco: para seleccionar lo que hay dentro del body podemos hacer clic en la etiqueta <div#wrap> que aparece en la barra de estado de Dreamweaver.
  • Mostramos la ventana de Estilos CSS y adjuntamos la hoja de estilos BrightSide.css a nuestra plantilla Dreamweaver.
    <link href="../css/BrightSide.css" rel="stylesheet" type="text/css" />
    </head>
  • La imagen debajo de las pestañas no se visualizará. Para corregir esto seleccionamos la imagen y modificamos apropiadamente la propiedad src en la ventana propiedades.
  • Desde la vista código de Dreamweaver borramos todo el contenido de la etiqueta <div#main> y agregamos dentro una región editable llamada contenido. Tras lo cual quedará así:
    <div id="main">
    <!-- TemplateBeginEditable name="contenido" --><!-- TemplateEndEditable -->
    </div>

Modicando el contenido de plantilla_brillante.dwt

  • Cambiar el título de la web <h1#logo> por SitioBrillante.com. Aplicar las clases .green y .gray como se quiera
  • Cambiar el subtítulo <h2#slogan> por Adaptación de la plantilla Bright Side of Life.
    • Truco: Si Dreamweaver no visualiza bien los cambios realizados entonces cerrar y volver a abrir plantilla_brillante.dwt
    • En la regla #header h2#slogan cambiar posición izquierda de 95 píxeles a 50 píxeles
  • Cambiar los textos de las pestañas por Inicio, Noticias, Descargas, Servicios, Asistencia y Acerca
  • Traducir los dos menús y la cita del panel izquierdo.
  • Eliminar el texto del panel derecho y colocar una region editable llamada enlaces.
    • Precaución: Si la región editable queda dentro de una etiqueta <h1> se ha de borrar dicha etiqueta <h1>.
  • Cambiar el pie izquierdo por © 2007 SitioBrillante.com | XHTML válido | CSS
    y el pie derecho por Inicio | Mapa del sitio | Sindicación RSS
    • En la regla #footer .footer-left cambiar la anchura de 65% a 55%
    • En la regla #footer .footer-right cambiar la anchura de 30% a 40%

Plantilla dreamweaver

Creación de las páginas HTML basadas en plantilla_brillante.dwt

  • Por cada una de las pestañas crearemos una página HTML basada en plantilla_brillante.dwt
  • A cada una de estas páginas agregaremos contenido de prueba que podríamos obtener de la web Lorem Ipsum.
  • En plantilla_brillante.dwt estableceremos los vínculos de las pestañas a las páginas html
  • Probamos el sitio visualizando cualquier página HTML en el navegador web.

Solucionar el problema de las pestañas

Si probamos la web en el navegador observaremos que los vínculos funcionan pero que la pestaña no muestra correctamente la página activa. Para solucionar este problema deberíamos asisgnar el identificador current a las diferentes opciones del menú según la página HTML de la que se tratase. Esto no lo podemos hacer porque está en la parte protegida de la plantilla Dreamweaver.

Veamos una posible solución a este problema:

  • Abriremos plantilla_brillante.dwt y cambiaremos la lista de pestañas:
    <li id="current"><a href="../index.html"><span>Inicio</span></a></li>
    <li><a href="../paginas/noticias.html"><span>Noticias</span></a></li>
    <li><a href="../paginas/descargas.html"><span>Descargas</span></a></li>
    <li><a href="../paginas/servicios.html"><span>Servicios</span></a></li>
    <li><a href="../paginas/asistencia.html"><span>Asistencia</span></a></li>
    <li><a href="../paginas/acerca.html"><span>Acerca</span></a></li>
    </ul>
  • por esta otra lista:
    <ul>
    <li id="inicio"><a href="../index.html"><span>Inicio</span></a></li>
    <li id="noticias"><a href="../paginas/noticias.html"><span>Noticias</span></a></li>
    <li id="descargas"><a href="../paginas/descargas.html"><span>Descargas</span></a></li>
    <li id="servicios"><a href="../paginas/servicios.html"><span>Servicios</span></a></li>
    <li id="asistencia"><a href="../paginas/asistencia.html"><span>Asistencia</span></a></li>
    <li id="acerca"><a href="../paginas/acerca.html"><span>Acerca</span></a></li>
    </ul>
  • Nos copiamos el código que se refiere al identificador current de la hoja de estilos BrightSide.css
    #header #current a {
      background-position:0% -42px;
      color: #FFF;
    }
    #header #current a span {
      background-position:100% -42px;
      color: #FFF;
    }
  • Creamos una nueva hoja de estilos llamada inicio.css y pegamos el código anterior cambiando current por inicio
    #header #inicio a {
      background-position:0% -42px;
      color: #FFF;
    }
    #header #inicio a span {
      background-position:100% -42px;
      color: #FFF;
    }
  • Abrimos la página index.html y le adjuntamos la hoja de estilos inicio.css
    Ejemplo
    • Luego abrimos noticias.html y le adjuntamos la hoja de estilos noticias.css y procedemos de la misma forma en el resto de páginas html.
  • Probamos la web en el navegador y veremos que ahora sí que la pestaña actual queda bien marcada según la página HTML en la que nos encontremos. Lo interesante de este método es que es compatible con las plantillas de Dreamweaver.

Cambiar los colores de la web

Cambiremos el color verde de la web por un color fucsia. Además aprovecharemos para intercambiar los colores de la pestaña seleccionada por el de la pestaña activa. De esta forma fundiremos el color de la pestaña activa con la línea horizontal inferior que va de lado a lado de la web.

Para ello tenemos que modificar la hoja de estilos BrightSide.css y algunas de las imágenes de fondo que utiliza. Utilizaremos el programa GIMP para realizar los cambios sobre las imágenes. Las imágenes .gif tienen colores indexados, por la tanto utilizaremos la opción Mapa de colores del GIMP para cambiar los colores.

Mapa de colores
Indice de color tableft.gif y tabright.gif Significado
0 c689c6 fucsia oscuro
1 83acca azul oscuro
2 90b4cf azul claro
3 c6a1c6 fucsia claro

Imágenes cambiadas
Nombre de archivo Antes Después

tableft.gif (4×84 píxeles) y
tabright.gif (175×84 píxeles)

headerbg.gif (1×85 píxeles)
(repetida horizontalmente)

    
bg.gif (1×255 píxeles)
(repetida horizontalmente)		    

Estilos CSS cambiados
Regla Estilo
a:hover color: #c689c6
#sidebar ul.sidemenu a:hover color: #c689c6
border-left: 4px solid #c6a1c6
.green color: #c689c6

La imagen

ha sido cambiada por

Aspecto final de la web

Plantilla Bright Side of Life

Ver la web




Añade tu comentario:

(El correo no será publicado)