Cómo hacer una buena diagramación de la web

[agarsal]

Hola, antes que todo me presento. Soy Alan, de Perú y es la primera vez que participo en este foro. En verdad, pido por ser un novato y haberme quedado en la prehistoria, pero quisiera que me ayuden a poder realizar con éxito el proyecto web que tengo a cargo.

Bien, ahí va, mi meta es hacer una página como [URL="http://www.unav.es/fcom/comunicacionysociedad/es"]esta[/URL], pero en versión HTML. La página de mi universidad es su 'hermana' por ello se parece mucho en cuanto el diseño. A continuación pongo una imagen de lo que he avanzado, es decir, solo el front page.



Esta es la manera cómo se ve el diseño en el Dreamweaver.



Ahora vienen mis interrogantes...

¿Es correcta la manera en la que he diagramando y diseñandoo hay muchas celdas que están de más y se pueden evitar?

He estado leyendo acerca de diagramar con celdas, ¿es mejor ello o es que llego a la misma situación?

Cuando intento escribir un texto largo en el cuadro artículos, se desordena el menú, ¿cómo lo hago independiente?



En verdad, quisiera que ese menú, debido a que se le puede agregar más vínculos, y la mancheta (donde está el logo y los otros vínculos), por la misma razón, sean archivos independientes... He visto acerca de los marcos, pero no me parece una solución inteligente. ¿Hay otra manera de hacer independiente estas dos partes de la web?

Sé que sería mejor hacer la web en PHP, pero no sé manejar las bases de datos... además no sé qué tan difícil es programar... tendría que ser una base de datos de artículos y revistas...

Si quieren les paso el código HTML.

Gracias por su ayuda y díganme qué hago mal. Si es todo, pues todo. Estoy para aprender. Les seguiré molestando. Infinitas gracias.

[agarsal]

¿Nadie me ayuda? :(

[arepavieja]

mmm, Trabajar con tablas puede llegar a ser incomodo, te recomiendo leas más sobre CSS y el trabajo con <div>, que a la larga es mucho más sencillo y te permite trabajar de manera más independiente, además de controlar tanto diseño y estructura de forma separada. :)

[KimboKim]

como dijo arepsavieja, es mejor con los DIV y css, con tablas no vas a avanzar casi nunca y además te saltra un código HTML de la ostia que para leerlo hay que estar a tope de cafeina,

mirate un poco mas de HTML5 y CSS3 y si tienes preguntas estamos encantados de poder ayudarte...

Aqui te dejo unos manuales que pueden ayudarte mejor:

Manual completo de HTML: http://www.desarrolloweb.com/manuales/21/

Manual completo CSS. http://www.desarrolloweb.com/manuale...de-estilo.html

Manual HTML5: http://www.maestrosdelweb.com/guias/#guia-html5

Manual CSS3: http://www.desarrolloweb.com/manuales/css3.html

[MiguelNieva]

Q tal! agarsal, muy buena iniciativa y lo principal es que pruebes varias herramientas y preguntes con toda confianza. Yo también soy nuevo en el foro pero de todas formas trato de ayudar cuando puedo.

Revisa muchísimo la parte de las capas, arepavieja y KimboKim tienen toda la razón; hay muchos detalles con CSS que puedes aprovechar para tener mejor control sobre tu página web, también ya te compartieron manuales, que es muy importante que los leas para crecer como profesional.

Si gustas puedo revisar tu código y apoyarte. Ya sabes que para eso estamos todos.

Suerte y mucho éxito!

[agarsal]

Gracias a todos por su ayuda, en verdad, gracias.

He leído mucho sobre lo que he han dicho, entiendo muchas cosas ya de las CSS, pero creo que aún no me basta... seguiré estudiando...

Arepavieja, sí, resulta muy incómodo, por eso es que me animé a escribirles.

KimboKim, gracias por loa manuales.

Miguel Nieva, gracias por tu apoyo. creo que a partir de hoy será mi instructor :). ¡Cómo puedo contactarlo? Skype?

[agarsal]

Hola de nuevo, después de casi un año...

Les escribo porque estoy terminando esta página y quisiera que tenga un efecto que no sé hacerlo. La página está alojada aquí: http://udep.edu.pe/comunicacion/rcom/

Lo que quisiera es que cuando se acceda a una sección, esta quede marcada para que se indique en cuál está. QUisiera que quede así, como en la imagen (que es photoshopeada solo para ilustrar), ¿me ayudan? ¿cómo se llama ese efecto? ¿me explican detalladamente?



Gracias!!

[masclet]

Esto lo realizas con CSS, en los distintos estados del menú de navegación.
En un menú de navegación existen cuatro estados.

- Link: Es el estado inicial del elemento

- Hover: El estado cuando pasas el ratón por encima.

- Visited: No suelo utilizarlo. Es para indicar que un elemento del menú ya ha sido clicado.

- Active: Ese es el estado en el que debes marcar que es la página en la que te encuentras

[Carlangueitor]

Iniciado por masclet

- Active: Ese es el estado en el que debes marcar que es la página en la que te encuentras

No, ese es uno de los errores más comunes, en librosweb.es lo explican muy bien:

:active, se activa cuando el usuario activa un elemento, por ejemplo cuando pulsa con el ratón sobre un elemento. El estilo se aplica durante un espacio de tiempo prácticamente imperceptible, ya que sólo dura desde que el usuario pulsa el botón del ratón hasta que lo suelta.

Supongo que al final solo fue HTML puro, creo que lo más sencillo sería agregarle una class "active" en cada sección.

Saludos

[agarsal]

Intentaré a ver qué sale, sino puedo, me ayudan por favor :)

[agarsal]

Me doy, alguien me lo explica paso a paso, desde cero...

[web2013]

Una forma facil de aplicar los CSS si recien inicias o por ser prácticos es usar directamente en la cada DIV dentro del HTML.

Código HTML:

<div style="AQUI PROPIEDAD CSS;">
</div>
 

Luego puedes limpiar tu código pasándolos a un archivo CSS (cambiando los respectivos estilos por clases)

Código HTML:

<div class="css_demo">
</div>
 

Código CSS:

.css_demo
{
    AQUI PROPIEDAD CSS;
}
 

[yfmartinez]

hermano a ver si entiendo lo que necesitas pero de todas formas creo qeu lo mejor es que leas un poco en cuanto a css, yo particualmente hace como 6 o 7 años que comence y te puedo decir que mi primer libro fue uno publicado en librosweb.es como dice Carlangueitor y estaba genial para dar los primeros pasos..

un ejemplo de como usar los estados que menciona Masclet es esto

por ejemplo

.css_elemento:hover{
color:red;
}

el resultado de eso es que cuando posiciones el cursor sobre el elemento que tiene la clase css_elemento el texto se tornara de color rojo, eso mismo puedes hacer con imagenes de fondo, cambiar tamaño de letras, en fin cualquier propiedad que quieras modificar cuando ocurra el hover, lo mismo pasa con los otros..

suerte en lo que quieres hacer... pero el mejor concejo que te doy es que estudies un poco y de ahi en lo adelante vas a ver cuan facil es hacer las cosas que te vienen a la cabeza y antes no tenias ni la mas puta idea de como se hacian....

saludos...