Webmaster Webdesigner + + Builder proyectos

Aquí es un método de programación que uso para organizar mi CSS en un archivo externo. Este método le permitirá encontrar rápidamente y se ahorrará tiempo.

Supongo que un archivo fue creado xhtml y un archivo CSS y que se adjunta como @ import o un enlace. Vamos a empezar con el "cuerpo" de la página XHTML: En primer lugar, codificar un claro y sencillo. Utilizar una estructura de DIV. Aquí está a su izquierda, una visión típica de un sitio web muy simple: Todo va a estar en un div por lo general llamado "contenedor" y te darás cuenta de que no voy a usar letras mayúsculas para el nombre de mi etiquetas. En términos de la inversión se destina sólo para una mejor visibilidad.

Bueno, ahora aquí está el código XHTML de este pequeño diseño:

 <div id="myContainer">
 <div id="cabecera"> </ div>
 <div id="middle">
 <div id="left"> </ div>
 <div id="content"> </ div>
 </ Div>
 <div id="footer"> </ div>
 </ Div>

Por supuesto, este código se encuentra en la etiqueta BODY. A continuación, iniciar el truco que uso para mejorar su trabajo. Copie el código dentro de su cuerpo de la etiqueta y pegarla en el archivo CSS. Esto es lo que sucede:

 <div id= "myContainer">
 <div id= "header"> </ div>
 <div id= "middle">
 <div id= "left"> </ div>
 <div id= "content"> </ div>
 </ Div>
 <div id= "footer"> </ div>
 </ Div>

Ahora (con Dreamweaver) utilizar la función de búsqueda (o Ctrl-F). Buscar los siguientes códigos

 <Div id = "
 </ Pre>
 <p> reemplazarlos con <strong> símbolos # </ strong>.  A continuación, busque los siguientes códigos: </ p>
 <pre lang=">
 /> </ Div>

Y sustituirlos por llaves de apertura y cierre {}. Para el resto se puede buscar para el cierre de las etiquetas div y sustituirlos por nada. Esto le dará la siguiente:

  MyContainer # {}
    Header # {}
    # {} Medio
       # Izquierda {}
       # Contenido {}
   Pie de página # {} 

Finalmente, sólo tiene que poner su anchura y la altura y otras propiedades de las etiquetas DIV. Personalmente, puedo añadir una línea de comentario por encima de todas las líneas de mis secciones (cabecera, medio pie de página). Aquí está el código que se obtiene:

  # {MyContainer
 ancho: 760px;
 height: auto;
 }

 / * Cabecera * /
    # Header {
    ancho: 760px;
    height: 250px;
    ; background-color: # 666;
    }

 / * MEDIO * /
    # {Medio
    ancho: 760px;
    height: 500px;
    }
       # Izquierda {
	   ancho: 160px;
	   height: 500px;
	   ; background-color: # ccc;
	   float: left;
	   }
       # Contenido {
	   ancho: 600px;
	   height: 500px;
	   ; background-color: # FFF;
	   float: left;
	   }

 / * PIE * /
    Pie de página # {
    ancho: 760px;
    height: 70px;
    ; background-color: # 000;
    } 

Para el resto del código, se inserta dentro de las etiquetas y guión de su código como este en tu XHTML, verá, esto acelerará su velocidad.

Tags: Código , CSS , integración , programación , web

Este artículo fue publicado Viernes, 08 de febrero 2008 a las 8:00 am y está guardada bajo Tutoriales . Puedes seguir las respuestas a través del RSS 2.0 feed . Puede dejar un comentario , o trackback desde tu propio sitio.