|
|
|
Curso de Dreamweaver: diseño web paso a paso - Creación de páginas web, curso webmaster - recursos web
|
|
|
| |
|
| |
| |
* MENÚ DEL CURSO |
|
* OTRA FORMA DE DISEÑAR TU WEB |
|
* TODO ESTO GRATIS PARA TÍ |
|
* Y HAY MUCHO MÁS AÚN |
|
|
* ENLACES PATROCINADOS |
|
| |
|
Puede que penseis que son muchos temas ya tratando sobre Tablas, pero de verdad que son tan importantes que es fundamental el dominar su manejo y para ello nada mejor que insistir una y otra vez sobre las mismas.
Vamos hoy a ver –según habíamos quedado--, como crear tablas con varias celdas y como podemos trabajar sobre ellas para darle el aspecto que queramos; por ejemplo vamos a crear una con una fila y tres columnas, para ello ya sabeis que podemos hacerlo picando en:
-
|
curso dreamweaver, curso diseño web.Tutorial Dreamweaver webmaster
|
o bien podemos picar directamente sobre el icono:
teniendo como veis activada la barra que corresponde a “ Común” ; en ambos casos nos sale el menú Tabla, donde vamos a elegir como he dicho, que nos cree una con 1 Fila, 3 Columnas, un ancho del 90% y el resto a cero: |
y tras picar en “Aceptar” nos deberá aparecer así:
-
|
(si dierais F12 para ver la página con el navegador, no veríais nada, porque al no tener borde, la tabla solo la vemos en diseño).
Bien, ahora vamos a redimensionar las 3 celdas a nuestro gusto (pues no olvideis que dentro de ellas deberemos poner contenido, el cual deberemos predecir donde irá) y por ejemplo voy a dejar la de la izquierda más pequeña para poner un menú, la del centro más amplia para colocar texto (un capítulo de una lección por ejemplo) y la de la derecha también pequeña para lo que tengamos planeado (por ejemplo yo le voy a colocar un pequeñito banner publicitario).-Para redimensionar las celdas, nos colocamos con el cursor sobre la línea que separa una y otra hasta que aparezca un símbolo similar al signo “igual” invertido y dos flechitas (izquierda y derecha), en ese momento pulsamos el botón izquierdo del ratón y sin soltar desplazamos dicha línea a derecha o a izquierda hasta el lugar elegido; tras estas tareas, aparecería así la tabla:
es decir, como veis he dejado del 100% de la tabla, el 25% para la celda izquierda, el 51% para la central y el restante 24% para la celda derecha.
Bueno, ahora podríamos empezar a trabajar dentro de ellas y colocar cosas, pero tened en cuenta UN CONSEJO IMPORTANTE : si lo haceis así unas celdas harán que las otras se abran sin control, de tal manera que colocas texto a la izquierda y cuando coloques algo en el centro, mayor que el tamaño de la izquierda, te lo moverá hacia abajo para ocupar todo el espacio; en definitiva, como suele decirse “no haras carrera” de la tabla.-Pero he aquí la solución: alinear cada celda arriba de tal manera que sea independiente de las demás.-Para ello, te colocas en la primera celda de la izquierda (picando dentro) y te vas a la vista “ Código ” donde te aparecerá esto:
|
|
que como ves no son ni más ni menos que las tres celdas que acabo de crear, a ahora para darles alineación superior, deberemos usar el código: valign=”top” , lo que haremos colocando el cursor delante del signo “ > y dando una vez al espaciador, y o bien tecleamos el código, o más fácil aún, estando en esa posición deberá salir:
-
|
|
entonces pulsamos la tecla “ v ” (porque buscamos la sentencia “ valign ”) y saldrá:
-
debiendo hacer un doble clic sobre ella, para que se coloque automáticamente en su sitio y nos ofrezca a su vez las posibilidades de “valign”, así:
-
y como es lógico, picamos sobre “ top ” (doble clic), para que se coloque así: |
|
|
teniendo ya la celda de la izquierda correctamente; pues ahora debemos realizar la misma operación con las otras dos, para que al final aparezca así:
|
- |
debiendo ahora volver a la vista “ Diseño ” y en apariencia no notaremos nada cambiado, pero internamente las 3 celdas si que tienen cambios (y muy importantes para el futuro del contenido de la tabla).
Ahora será cuando debamos “ Insertar una tabla dentro de una celda ”, y para ello picamos dentro de la primera celda de la izquierda, y nos vamos al icono Tabla, donde creamos una con estos datos (por ejemplo):
- |
- |
es importante sobre todo que tenga el 100% de ancho para que nos ocupe el total de la celda, y el darle un relleno y espaciado de celdas, así el texto y demás tendrán un margen y quedarán más bonitos sobre todo si tienen un color de fondo.
Realizamos la misma operación en la segunda y tercera celdas, y al final aparecerá:
|
|
|
ya no debeis preocuparos, porque cada celda actuará independientemente y no causará problemas a las otras.-Si vamos a F12 seguiremos sin ver nada, pero una vez le demos un borde, o un color de fondo a las celdas ya lo veríamos, por ejemplo le doy a las 3 celdas un color de fondo gris clarito (ya sabeis que para ello, picamos con botón izquierdo dentro de la primera de ellas y vamos abajo a “Color de fondo” y seleccionamos el que deseemos; para las otras dos la misma operación, pero para que el color sea el mismo, cuando demos a color de fondo y salga el “cuentagotas”, picamos sobre el color que dimos a la primera, y así con la tercera), si ahora damos F12 para ver el resultado en el navegador:
-
veis como ya tienen un aspecto agradable.
Seguiremos en el próximo capítulo añadiendo contenido a esta tabla recién creada, hasta entonces, saludos.
|
| |
|
| |
| |
|
|
|
|
|
|
|
|
© deseoaprender.com - Cantabria (España) 2005-2009.-Todo el contenido de esta web está protegido por la Ley de Propiedad Intelectual; por tanto no podrá reproducirse ni copiarse sin el consentimiento por escrito de su autor y propietario. |
|
| |
|
|
