Hacer una web CSS desde 0

| lunes, 28 de diciembre de 2009

Bueno, lo primero es decir las advertencias para que no sigan con este tuto si piensan que es mucho trabajo:





ADVERTENCIA!=Si tienes una web ya muy avanzada, te sujiero que no lo hagas porque tendras que hacer de nuevo toda, repito, TODA la web.





ADVERTENCIA2!=Una vez iniciado no podras parar de usar esto, no hay atras, no te puedes retractar, ya que hacer una web pro requiere de la modificacion de todas las paginas en todas partes(diseño, texto, efectos, etc...)






ADVERTENCIA3!= una vez hayas hecho tu diseño y quieras cambiarlo, si eres flojo no te lo sujiero, porque cambiarlo seria cambiar absolutamente todas las paginas, sin excepciones.





ADVERTENCIA4!=Una vez hagas esto, no podras usar el editor normal de PWG, si no que tendras que saver los codigos HTML a la perfeccion, ya que o si no se hecha a perder la pagina por completo.








Creo que esas son todas las advertencias, si no edito el tema y los coloco, les sujiero ver este tema seguido para ver cambios.








Ahora si comenzemos:






Ve a "Editar diseño" y selecciona el diseño "CSS-Design" y ahora ve a "configuraciones avanzadas" dentro de la misma pagina. Y en CSS-code sin style tags coloca esto:





Cita:
.nav_element {


display:none;



width: 1px;


heidht: 1px;


}


#title {


display:none;


width: 1px;


height:: 1px;







Y listo, ya puedes hacer tu web desde Cero, ahora las unicas herramientas que tienes son: Editar paginas(aqui tienes que hacer TODA la web desde 0, incluyendo diseño, textos, efectos, etc...) y tu imaginacion.





Aquí os dejo unos templates para posicionar los textos y tablas1(Advertencia, estos templates fueron diseñados por Dreamweaver como web's default, tienen que colocar esto al final "Template by Adobe DreamWeaver CS4", ya bienen incluido en los templates eso si, pero no lo eliminen):











Contenedores: Encabezado, contenido elastico, pie de pagina.





Visualizacion:








Codigo CSS+explicacion adicional para modificacion a gusto(lo colocan debajo de lo del primer codigo que comente):





http://img9.xooimage.com/files/d/d/1/1-9d3ad1.txt






HTML(lo colocan en modo HTML en el editor de paginas, y lo colocan en TODAS las paginas, una vez hecho eso, nunca editen con el editor normal de PWG, usen solo modo HTML o si no se hecha a perder.):





http://img5.xooimage.com/files/8/0/f/1h-9d3c2b.txt








Contenedores template: Encabezado, 2 filas elasticas(pequeña a la izquierda), pie de pagina





Visualizacion:











(Si se dieron cuenta, este es el que uso yo en Noticias PWG...)





CSS+explicacion para modificacion a gusto:





http://img5.xooimage.com/files/4/f/c/2-9d3c8c.txt





HTML+"Template by Dreamweaver CS4"(lo coloco porque en la visualizacion no salio.):





http://img7.xooimage.com/files/0/9/1/2h-9d3cbe.txt








Contenedores template: Encabezado, 2 filas elasticas(pequeña a la derecha), pie de pagina






Visualizacion:








CSS+explicacion para modificaion a gusto:





http://img1.xooimage.com/files/b/7/7/3-9d3d9a.txt





HTML:





http://img1.xooimage.com/files/8/b/7/3h-9d3e0f.txt








Contenedores template: Encabezado, 3 filas elasticas(2 pequeñas a izquierda y otra a derecha),pie de pagina.





Visualizacion:












CSS+explicacion para modificacion a gusto:





http://img9.xooimage.com/files/b/d/e/4-9d3ed2.txt





HTML:






http://img5.xooimage.com/files/0/9/d/4h-9d3ef0.txt








Habian mas, pero eran alrededor de 30 templates...y dudo mucho que ustedes subirian todos.





P.S=al parecer en todos los de CSS se me olvido colocar los sidebar y los maincontent, para editarlo aqui los tienen:





Cita:
.twoColElsRtHdr #sidebar1 { padding-top: 30px; }



.twoColElsRtHdr #mainContent { zoom: 1; padding-top: 15px; }










Post hecho por "noticiaspwg.es.tl"

0 comentarios: