Como se hace esto en web?

XÑA · 01 de Octubre de 2008, 09:32:11 AM

Programo un poco en Web, y hay ciertas páginas que tienen unas cositas que no sé como narices se puede hacer:

Por ejemplo, la de http://www.3djuegos.com/

Se nota que la página está centrada y con una resolución de 800 de ancho, pero luego tienen por los lados un degradado chulísimo, que se ajusta al tamaño del navegador.

¿Cómo se hace esto?

Gracias ;)

[EX3] · 01 de Octubre de 2008, 09:56:51 AM

Pues por lo que he podido ver se trata de una imagen de fondo (http://www.3djuegos.com/img2/piezas/backgrounds/bg_0.gif) que seguramente centren como fondo de la pagina a modo de tile o en una tabla o capa. No deberia ser muy complicado pero tampoco lo he probado (yo tampoco estoy muy puesto en desarrollo web).

Salu2...

Capiflash · 01 de Octubre de 2008, 10:18:23 AM

Como dice EX3 es una imagen de fondo

Código [Seleccionar]


<body style='background-image: url(/img2/piezas/backgrounds/bg_0.gif);'  >

Saludos!

XÑA · 01 de Octubre de 2008, 10:37:53 AM

vaya, pues que simple parece. Gracias :D

Buffon · 01 de Octubre de 2008, 12:13:06 PM

Cita de: Capiflash en 01 de Octubre de 2008, 10:18:23 AM
Como dice EX3 es una imagen de fondo
Código [Seleccionar] Expand
<body style='background-image: url(/img2/piezas/backgrounds/bg_0.gif);' >

Saludos!

faltaría ver el css del background-image

zwiTTeR · 01 de Octubre de 2008, 12:47:17 PM

Hola,

Tu post no será una forma de hacer spam de la web de 3djuegos?.

En fin. Es un fondo, con background position "center" y background repeat y. No tiene más. No se adapta al navegador... simplemente es una imagen centrada en la pantalla y ya está.

Saludos.

XÑA · 01 de Octubre de 2008, 01:36:24 PM

Gracias, es que programa en ASP, pero me doy cuenta de que de diseño de páginas no tengo ni idea. De hecho con ASP no puedo 'colocar' los divs, así que... Oo

Otra cosa que me gustaría encontrar es un buen tutorial para aprender los divs. Porque por ejemplo la página de Ajax: http://www.asp.net/ajax/ajaxcontroltoolkit/samples/

¿Cómo se consigue que haya una cabecera, una sección izquierda y otra central ?

¿Cómo consiguen que las secciones sean redondeadas y tengan una cabecera? ¿Es esto standard o se necesita un control especial?

Gracias

Capiflash · 01 de Octubre de 2008, 03:09:42 PM

Yo para cualquier duda que tengo con CSS siempre voy a http://www.w3schools.com/css/default.asp , investiga ahi un poco y veras como sacias tus dudas.
Lo de las secciones y tal lo puedes conseguir creando un div para cada "zona" que quieras definir y darle una posicion ( el tema del posicionamiento en DIV es "divertido" de cojones :P )

Saludos!

[EX3] · 01 de Octubre de 2008, 03:20:19 PM

Cita de: XÑA en 01 de Octubre de 2008, 01:36:24 PM
¿Cómo se consigue que haya una cabecera, una sección izquierda y otra central ?

A mi me enseñaron en su dia (y no lo hizo un profesor de diseño web si no un programador) hacer esas cosas mediante tablas, que ya se que hay mala opinion (o eso tengo oido) acerca de usar este metodo teniendo los div's pero era lo mas facil de usar en el diseñador de Visual Studio con ASP.NET :P Vas montando una tabla principal centrada que contenga una fila como cabecera, una segunda fila con una o dos celdas segun apartados quieras meter en el cuerpo de la pagina, y si lo necesitas otra fila al final para el pie de pagina. Luego en cada celda puedes meter mas tablas para hacer las secciones del menu con sus propias cabeceras y demas. Mi web sin ir mas lejos, de la dx_lib32, toda la disposicion y cabeceras esta hecha a base de tablas y celdas en Frontpage.

Cita de: XÑA en 01 de Octubre de 2008, 01:36:24 PM
¿Cómo consiguen que las secciones sean redondeadas y tengan una cabecera? ¿Es esto standard o se necesita un control especial?

Lo de los bordes rendondeados que mencionas no son mas que imagenes con transparencia aplicada en las esquinas redondeadas y o bien estan en la celda de una tabla o en un div.

En verdad esto son cosillas muy sencillas que puedes experimentar con el diseñador de tablas del VisualStudio en ASP.NET.

Salu2...

XÑA · 01 de Octubre de 2008, 03:30:26 PM

Gracias por la info. Muy útil!!!

SiPoX · 02 de Octubre de 2008, 11:51:31 AM

Aunque sea algo casero, intenta diseñar sin tablas (es una aberración hoy en día). La página que comenta Capiflash está genial para ver propiedades y elementos de CSS. :P

[EX3] · 02 de Octubre de 2008, 01:54:34 PM

El tema es que si esta programando, que no diseñando, en ASP.NET con el Visual Studio, este te da mas facilidad de modelar la pagina mediante tablas en plan como lo hace el Word de Office. Se podra meter sin problema CSS y demas historias pero no se que tal sera en cuanto a comodidad para el programador en el diseñador con los componenetes de ASP.NET, nunca lo he probado (hace eones que no he vuelto a tocar el Visual Web Developer o ASP.NET Express).

Aun asi, no veo sentido a que sea una aberracion usar tablas para organizar el contenido de la pagina. Dan peor rendimiento a la pagina? Lo pregunto por que no tengo ni idea de por se desaconseja tanto (no soy programador web). Yo al menos me estan funcionando de lujo en los diseños que hice en mi web a parte de rapido y sencillo de hacer.

Salu2...

SiPoX · 02 de Octubre de 2008, 02:47:57 PM

Hum.. desde el punto de vista organizativo y semántico (y tecnológico), está mal estructurado. Es decir, una tabla se usa para presentar información, no para maquetar la página. Cuando decía diseñar, me refería a eso, maquetar. Da igual con qué programa maquetes, el caso es que si quieres hacer una web mínimamente interesante (que cumpla estándares, w3c y los nuevos caminos de la web), lo suyo es maquetar con xhtml y css, usando las tablas sólo cuando el tipo de información que vas a meter lo requiera (por ejemplo, un cuadro de salarios / empleado)).

Y en cuanto a buscadores y demás, sí, dan peores resultados. :P Aparte de tener un código más limpio, más rápido de carga...

pd.- para ejemplos concretos, hay muchos sitios con plantillas gratuitas que cumplen los estándares. Es bajarse los archivos y adaptarlos al gusto. ;) :P

XÑA · 02 de Octubre de 2008, 04:42:14 PM

Puedes decirme uno de estos sitios donde haya plantillas gratuitas? :P

SiPoX · 02 de Octubre de 2008, 04:51:27 PM

Hum.. pues buscando por google y alguna que tenía chascada a favoritos..

http://www.sarkis-webdesign.com/plantillas-web-gratis.html
http://www.templateworld.com/free_templates.html
http://www.styleshout.com/
http://www.freewebtemplates.com/templates/xhtml-css
http://www.freecsstemplatessource.com/

;) :P

Foros

Como se hace esto en web?