Como trabajar con capas div como esta web

Me gustaria aprender a trabajar con capas para mejorar mi web

como esta misma web es con las etiquedas <div>
pero quiero saber si se puede hacer de forma wyngswyng o como se escriba jeje
o sea hablo de las opciones del dreamweaver para el tema de que una capa quede en el centro o en un lateral etc

tambien es bueno descatar que sepais que suelo hacer las pages con el photoshop que las exporto en css y queda todo en <div>
pero el tema es como alinearlo al centro o cosas asi

bueno es como esta web la pregunta general como hisiteis esta web? con photoshop?

o como ayudadme please

que tengo ganas de aprender!!! :(

Bienvenido Delhorno, siéntete como en casa. :wink:

Realmente, cada vez son más las personas que están pasándo de usar tablas a utilizar estos DIVS.

Yo los descubrí no hace mucho y creé la nueva versión de ComoCrearTuWeb con ellos y realmente me han gustado y ya los domino como para poder explicaros como usarlos, aunque estas expliaciones tardarán un par de semanas aún en aparecer.

Una de las ventajas es que puedes definir tipos de DIVS en la hoja de estilos, dándoles características determinadas con CSS y haciendo, entre muchas otras cosas, que aparezcan centradas, o a uno de los lados, etc. tal y como tú deseas.

Nunca he usado el Photoshop para hacer webs, de modo que desconozco su funcionamiento. Solo he usado el Frontpage en mis inicios y Dreamweaver después, apoyandome mucho en HTML.

Dame unos días para terminar las lecciones de DIVS, plis. Ah y no olvides decirnos cuál es la URL de tu web para poder ayudarte y darte nuestra opinión.

Nos leemos y de nuevo bienvenido.

ok gracias lo esperare impaciente :) no se si mientras me podrias poner algo para ir empezando ... no se o bueno lo que tu veas, es que estoy haciendo la web ahora, tenia una web pero muy fea, ahora la he borrado toda y tengo nuevo diseño pero prefiero sacarla ya con el tema div

bueno lo que prefieras amigo

:wink:

Bueno, realmente es cuestión de probar u probar y ver que sale :)

Por ejemplo, imagina que quieres que en la parte superior de tu web aparezca algo así como lo de arriba des esta misma página del foro.

Se podría hacer con una tabla de una sola fila y dos columnas, una para el logotipo (un poco feo, todo sea dicho) de ComoCrearTuWeb y la otra para esos enlaces azules (FAQ, BUSCAR, etc).

O se puede hacer con un DIV como el siguiente (más o menos):

<DIV id="encabezado">
   <DIV id="logotipo"></DIV>
   <DIV id="enlaces">
      <A class="bloque" href="http://www.comocreartuweb.com">
www.ComoCrearTuWeb.com</A>
      

Todo lo que necesitas par crear, tú mismo, tu propia página web</P>
      <A class="seguido" href"faq.php"><img.....></A>
      <A class="seguido" href"buscar.php"><img.....></A>
       <A class="seguido" href"miembros.php"><img.....></A>
       .........
    </DIV>
</DIV>

Por supuesto, por otro lado debes definir los estilos que hemos usado. Esto lo haremos en una hoja de estilo, por ejemplo "estilos.css", de este modo (también más o menos):

#encabezado {WIDTH: auto; BACKGROUND-COLOR: white; TEXT-ALIGN: center}
#logotipo       {FLOAT: left; WIDTH: 250px; TEXT-ALIGN: center ;BACKGROUND-IMAGE: url(logotipo.gif)}
#enlaces        {FLOAT: left; WIDTH: 400px; TEXT-ALIGN: center;	FONT-SIZE: 12px; COLOR:black}
.bloque          {DISPLAY: block; TEXT-DECORATION: none; }
.seguido        {TEXT-DECORATION: none; }
A IMG	    {BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none}

etc, etc. Lo he hecho de cabezo, de modo que seguro que falla en algo, pero para que te hagas una idea y puedas empezar a hacer experimentos, creo que vale. No dudes en escribir ante cualquier duda, oki?

Nos leemos Delhorno!

ok y la pregunta es, todo esto hay que hacerlo programando? o sea escribiendo el codigo=?

o se puede hacer al igual que se hace con creamweaver y las tablas?

me entiendes?
en dreamweaver metes tabla y le das alineacion, proporciones, imagen de fondo ect


pero con capas se puede hacer? o hay que andar escribiendo codigo? :(

seguro que entiendes lo que te digo :)

si no dime y me explico mas

:) Hola delhorno

Veo que conoces Photoshop y lo manejas bien. Yo trabajo mucho con él, pero, no se me había ocurrido nunca crear una web con él...¡Qué interesante!
:oops: Personalmente, tengo una asignatura pendiente con Photoshop...
Me gustaría aprender a hacer "templetes para web" (plantillas), por poner un ejemplo, como la que utiliza jorgens en su nueva web
:P ¿Te importaría enseñarme?
Un saludo :wink:

Saludos DelHorno,

ok y la pregunta es, todo esto hay que hacerlo programando? o sea escribiendo el codigo=?

Seguro que se puede hacer desde Dreamweaver directamente, sin necesidad de meterte en el código HTML, pero lo cierto es que nunca lo he hehco. Siempre he ido directamente al código para crear mis cosillas. Aunque siempre bajo Dreamweaver, pues me permite gestionar mi sitio muy bien.

Pero como os he dicho,una de mis tareas pendientes ahora mismo es crear explicaciones para crear capas (DIVs) con dreamweaver, de modo que todo estará bien explicado en breve, en las lecciones correspondientes. Eso si, antes he de aprender yo mismo a hacerlo con Dreamweaver y no directamente en código, para poder explicarlo bien.

No obstante, en las explicaciones indicaré ambas formas.

Un saludos y.. paciencia. Gracias.

Hola
Tengo una duda?? porque utilizas algunas veces "Class" y otras veces "id" para aplicar los estilos. No se podría hacer todo con class y el punto en la hoja de estilo??
Muchas gracias, estoy deseando aprender posicionamiento css y abandonar las tablas.
Salu2 :wink:

Que tal Max, la pregunta es muy interesante, pues me hace recordar que no he explicado esta diferencia en ninguna parte. Lo tendré en cuenta para incluirlo en la nueva versión. Gracias.

La respuesta es la siguiente:

Cuando defines con un punto al principio del nombre (por ejemplo .rojo) estás definiendo una clase, por eso en la página HTML pones class="rojo".

Cuando defines con una almuadilla # al principio del nombre (por ejemplo #rojo) estas definiendo un ..... no recuerdo como se llama :oops: , y ene este caso poner en el código HTML esto otro ID="rojo".

Realmente puedes hacerlo como más te plazca, ambas formas funcionan perfectamente, pero el Standar dice que las clases (.rojo) se usan cuando va a haber varios elementos con esas características, mientras que un ID se usará solo cuando el elemento es único.

Por lo tanto, bajo el punto de vista de los Standares, no debe haber dos elementos en la página con el mismo ID. Un ID es único, mientras que si pueden existir varios elementos con la misma clase.

<DIV ID="encabezado">
<P class="rojo">Esto es un párrafo rojo, pero puede haber otros más</p>
De hecho este enlace es tambien rojo y es aceptable para el Standar CSS
</DIV>
<P DIV="encabezado">Pero este otro párrafo está mal según el Standar, aunque funcionar funcionar lo que es funcionar la verdad es que funciona</P>

Hoy en dia todos los navegadores interpretan correctamente dos IDs repetidos, pero puede que mañana no, de modo que te recomiendo que uses los ID solo cuando sean únicos y los Class cuando existan varios elementos que van a usar esa clase.

Por favor, si no ha quedado claro dímelo y lo explico mejor.

Un saludo Max

Hola
Muchísimas gracias Jorgens.
Me parece que voy a utilizar siempre las clases por si algún día tuviera que definir 2 veces.
Salu2 :wink:

podrias poner mas informacion sobre las capas en la web 2006 o en el foro q estoy impaciente :wink:

Me gustaría aprender a hacer "templetes para web" (plantillas), por poner un ejemplo, como la que utiliza jorgens en su nueva web
¿Te importaría enseñarme?


Hola swanyta, yo puedo explicarte como hacer plantillas para web con photoshop, es muy sencillo y mas si como dices manejas el programa.
Lo primero q tendras q hacer es crear el diseño de tu plantilla, te dejo aqui un ejemplo de una q yo estoy creando.

[contenido no disponible]

Una vez q tienes ya creada tu plantilla, lo q tienes q hacer es dividirla en sectores, para ello seleccionas la herramienta sector.

[contenido no disponible]

el siguiente paso es ir dividiendo, tu plantilla en sectores, cada sector q hagas es una imagen q se te creara, y estas te apareceran en tu pagina como tablas. Te dejo un ejemplo para q lo veas mejor.

[contenido no disponible]

Una vez q has optenido el resultado q quieres, solo te queda guardar el documento, para ello te vas a archivo/guardar para web.
En la nueva ventana q se te abre optimizas la imagen a tu gusto, pero q sea en formato jpg y le das a guardar.

[contenido no disponible]

ya por ultimo en la siguiente ventana q se te abre le das el nombre q tu quieras q tenga tu pagina y le dices guardar html e imagenes, de esa manera ya tienes creada tu pagina web, solo te queda abrirla en el dream y trabajar con ella como quieras.
[contenido no disponible]

Bueno expero haberme explicado bien y si tienes alguna duda, me lo comentas.
Saludos

muchas gracias txarika por tu mini tutorial de mini nada me ha servido un monton ademas asi he aprendido algo sobre el photoshop q no tenia ni idea gracias de nuevo para ir tirando no esta nada mal

al alterar desde dreamweavern las tablas el fondo queda mal

Guau Txarika, me ha impresionado tu explicación. :wink:

Nunca he usado ese programa, pero me ha parecido genial para hacer plantillas, si que si. Me gustaría ponerme con él y .... pero ya ves, tengo tantos deberes pendientes con la web, je je je. El que mucho abarca poco consigue :roll: Así que tendré que dejarlo para más adelante.

Eso me da una idea :P Si alguien tiene ganas de crear una nueva lección de algo que domine, lo puede publicar en la sección "Sugerencias" tal y como ha hecho Txarika, con imágenes y todo (mu profesional :D ). Entonces todos podremos aportar nuestro grano de arena para mejorar las explicaciones que aún no hayan quedado suficientemente claras, etc, y cuando todos la veamos lista será incluida en el apartado más acorde de ComoCrearTuWeb, por supuesto, con la firma del autor o autores y algún premio extra por su colaboración, que podremos pensar. Quizás un enlace a su página, .... Voy a poner esto en la sección Sugerencias para que todos puedan leerlo, espero vuestra opinión al respecto.

Un saludete a todos todas.

:) Hola txarika
¡Muchísimas gracias por brindarte a enseñarme!
Me he guardado tu tutorial que está muy bien explicado.
Me pondré a practicarlo y ya te contaré mis resultados... :oops: Cabe la posibilidad que tenga que hacerte alguna consulta al respecto

Un saludo

Hola Jorgens

Me gustaría saber si puedes hacer una sección de capas div, aunque sea en HTML puro y puro HTML.
Yo capto bien esas cosas (de hecho, aunque uso un editor web, NVU, hago mi sitio en la sección del código [contenido no disponible]), y considero que al menos otra persona lo ha de hacer parecido (como tú)

Estoy en ello, pero tengo demasiadas ideas en la cabeza y muy poco tiempo, como vosotros imagino. Paciencia y gracias por participar y colaborar en el foro.

Un saludete :wink: