Quiero usar CSS para pulir un código. Alguna recomendación?

ghosthead-nebula · #1 (**permalink**) 17/07/2007, 15:13

Estoy usando Marcomedia Dreamweaver para codificar el site de mi proyecto.

Este código es el de la página principal (aún no está lista pero tiene lo básico, y quizás sufra algún cambio):

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Inscripciones por Departamento</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
<!-- 
body { 
    background-color: #CCCCCC; 
} 
.style1 { 
    color: #FFFFFF; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 10px; 
} 
.style2 {color: #000066} 
a:link { 
    text-decoration: none; 
} 
a:visited { 
    text-decoration: none; 
    color: #000066; 
} 
a:hover { 
    text-decoration: none; 
    color: #0000FF; 
} 
a:active { 
    text-decoration: none; 
    color: #000066; 
} 
.style3 { 
    font-size: xx-large; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
} 
.style7 { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: small; 
} 
.style10 {font-size: small} 
.style20 {color: #000066; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: small; } 
--> 
</style></head> 
 
<body> 
<div align="center"> 
  <table width="1000" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
      <td height="125" colspan="3"><div align="center"><img src="../Images/Banner-Sup.png" width="1000" height="125"></div></td> 
    </tr> 
    <tr> 
      <td height="89" colspan="3"><div align="center"> 
        <table width="1000" height="89" border="0" cellpadding="0" cellspacing="0"> 
          <tr> 
            <td width="496" height="89" background="../Images/Banner-Dwn1.PNG"><div align="left"></div></td> 
            <td width="468" background="../Images/Banner-Dwn2.PNG"><div align="center"> 
              <form name="form1" method="post" action="../CGI/ident.php"> 
                <div align="right"> 
                  <p><span class="style1">Iniciar Sesi&oacute;n</span> 
                      <input name="ced" type="text" maxlength="8"> 
                    &nbsp;&nbsp;&nbsp; 
                      <input type="submit" name="Submit" value="Aceptar"> 
                  </p> 
                  <p>&nbsp;</p> 
                </div> 
              </form> 
            </div></td> 
            <td width="36" background="../Images/Banner-Dwn3.PNG">&nbsp;</td> 
          </tr> 
        </table> 
          </div></td> 
    </tr> 
    <tr> 
      <td width="206" height="529" background="../Images/Left-Side.png"><div align="center"> 
          <table width="130" border="0" cellspacing="0" cellpadding="0"> 
            <tr> 
              <td height="39" background="../Images/Button.png"><div align="center" class="style2 style7 style10"><strong><a href="news.htm">Noticias</a></strong></div></td> 
            </tr> 
            <tr> 
              <td>&nbsp;</td> 
            </tr> 
            <tr> 
              <td height="39" background="../Images/Button.png"><div align="center" class="style20"><a href="interes.htm">De inter&eacute;s</a> </div></td> 
            </tr> 
            <tr> 
              <td>&nbsp;</td> 
            </tr> 
            <tr> 
              <td height="39" background="../Images/Button.png"><div align="center" class="style20"><a href="coments.htm">Comentarios</a></div></td> 
            </tr> 
            <tr> 
              <td>&nbsp;</td> 
            </tr> 
            <tr> 
              <td height="39" background="../Images/Button.png"><div align="center" class="style20"><a href="ayuda.htm">Ayuda</a></div></td> 
            </tr> 
          </table> 
          <p>&nbsp;</p> 
          <p>&nbsp;</p> 
          <p>&nbsp;</p> 
          <p>&nbsp;</p> 
          <p>&nbsp;</p> 
          <p>&nbsp;</p> 
      </div></td> 
      <td width="758" bgcolor="#FFFFFF"><div align="center"> 
          <p class="style2 style3"><strong>P&Aacute;GINA PRINCIPAL </strong></p> 
          <p class="style7"><strong>P&aacute;gina de Prueba (Prototipo) </strong></p> 
          <p class="style7"><strong>Trabajo de Grado:</strong></p> 
          <p class="style7"><strong>&quot;Desarrollar un Software que permita automatizar las Inscripciones por Departamento de</strong></p> 
          <p class="style7"><strong>Computaci&oacute;n y Sistemas, v&iacute;a Internet&quot;</strong></p> 
          <p><img src="../Images/construct.png" width="100" height="100"></p> 
          <p>&nbsp;</p> 
      </div></td> 
      <td width="36" background="../Images/Right-Side.png">&nbsp;</td> 
    </tr> 
    <tr> 
      <td height="28" colspan="3"><div align="center"><img src="../Images/Botton.png" width="1000" height="28"></div></td> 
    </tr> 
  </table> 
</div> 
</body> 
</html>

La página resultante es esta:

Click Aqui

Estoy planeando en mejorar el diseño físico (quizás un cambio en los botones, el banner y los colores) pero ese mismo diseño lo tengo en otros ficheros y me da lata tener que cambiar todo en todos, por eso quiero usar el CSS.

Mi pregunta es: Quñe parte del código que mostré puede ser llevada al archivo CSS (aparte del estilo). Puedo poner en ese archivo las tablas? Hacer algo como un template donde sólo tenga que meter la info.

Cualquier ayuda se las agradecería =)

Roly · #2 (**permalink**) 17/07/2007, 15:51

en CSS podes hacer todo lo que tiene tu pagina y la verdad se puede mejorar mucho, podes empezar por hacer la diagramacion de nuevo con divs, el codigo se reduce muchisimo, cualquier problema que tengas postealo aca, te aconsejo que miras esta pagina:
http://www.csszengarden.com/
podes ir cambiando el archivo css e ir viendo como cambia la pagina, esto es sin tocar el html

ghosthead-nebula · #3 (**permalink**) 17/07/2007, 15:54

O sea que en el campo "body" tendría que poner todas las "divs" de las tablas? O.o?

Roly · #4 (**permalink**) 17/07/2007, 16:02

si, dentro del campo body, algo asi:

.principal{
width:640px;
height:600px;
}
.menuizquierda{
width:200px;
height:500px;
background-color:#CCCCCC;
float:left;
}
.Centro{
float:left;
width:440px;
height:500px;
background-color:#003399;
}

<div class="principal">
<div>Encabezado</div>
<div class="menuizquierda">Menu de la izquierda
</div>
<div class="Centro">Centro
</div>
</div>

fijate como se reduce el codigo html y ya casi tenes la diagramacion que necesitas

hCanté · #5 (**permalink**) 17/07/2007, 16:18

Hola..

Si, es que lo que deberias de hacer es poner tus etiquetas css en un archivo independiente, y tu codigo html va a estar mas limpio y ordenado, eso es gran parte ( si no es que todo ) la gracia de hacerlo con css.

En tu html solo tendrias que llamar a los divs y a tus etiquetas no definirlos en el html.

Saludos
hCanté

buzu · #6 (**permalink**) 17/07/2007, 20:29

ya... eso lo puedes reducir a menos de la mitad, solo hazlo semantico y listo... en cuanto al CSS es muy poderoso pero hay que saver como usarlo... no toma tiempo aprender a usarlo como te dige en otro post, solo esfuerzo.
Pero si estas usando el DW como WYSIWYG no lograras lo que te digo... es pasarse a desarollar el codigo por ti misma, es entrar a un nuevo mundo pensar de otra manera....

ghosthead-nebula · #7 (**permalink**) 17/07/2007, 20:48

Gracias Roly. Lo intentaré.

Una duda: Para qué los "float"?

Cita:

Pero si estas usando el DW como WYSIWYG no lograras lo que te digo...

WYSIWYG? Qué es eso? O.o?

ikarush · #8 (**permalink**) 17/07/2007, 21:38

WYSIWYG?-> es un editor, mira en google.
float-> para poner un div "flotando" a un lado u otro de la pagina, es decir para maquetar.

buzu no estoy de acuerdo DW, es de lo mejor que hay, adobe en general, tiene las mejores herramientas del mercado.

ghosthead-nebula · #9 (**permalink**) 17/07/2007, 21:42

Cita:

float-> para poner un div "flotando" a un lado u otro de la pagina, es decir para maquetar.

O.o?

Flotando?

>.>

Perdonen mi ignorancia pero... qué se gana con esto? o.O?