Welcome to Scribd. Sign in or start your free trial to enjoy unlimited e-books, audiobooks & documents.Find out more
Download
Standard view
Full view
of .
Look up keyword
Like this
4Activity
0 of .
Results for:
No results containing your search query
P. 1
Extra Sobre Tablas

Extra Sobre Tablas

Ratings: (0)|Views: 67|Likes:
Published by INFDTIC
Ayuda extra sobre tratamiento de tablas en el editor del sitio web (también aplicable a clases virtuales)
Ayuda extra sobre tratamiento de tablas en el editor del sitio web (también aplicable a clases virtuales)

More info:

Published by: INFDTIC on Jul 13, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

11/19/2012

pdf

text

original

 
Algunas ideas
 sobre tablas
 
Cuando diseñamos una clase o una página Web en el editor del nodo y necesitemos distribuirimágenes y texto, recurrimos a las tablas. En esta clase les vamos a pasar algunos "trucos"para diseñar mejor con tablas.
 
Veamos algunos ejemplos:
 
Tabla 1: Texto con una imagen a la derecha.
En el caso que necesitemos exponer alguna imagen que no ocupe el ancho total del área deedición, nos conviene situarla a un costado del texto para que no quede tanto espacio enblanco.
 
Para hacerlo sólo creamos una tabla de una fila por dos columnas, a la derecha colocamos laimagen y a la izquierda el texto. Noten que en la vista de usuario no se ven los bordes (
Borde:0)
y que entre el borde y el texto, hay un espacio (
Relleno de celda: 3)
. Para que la tablaocupe el máximo ancho de nuestra área de edición fijamos el ancho de la tabla al 100%(
Ancho: 100%).
Al alto no le asignamos ningún valor y entonces se ajustará al contenido de lasceldas.
Vista de usuario
 
Empecemos por los
destacados
: aquellos cuadritos con unaimagen que recomiendan a nuestros visitantes otros sitios webque les pueden servir o que tienen relación con el IFD.
 
El primer destacado que cada uno de uds. debería crear en susitio web es el que lleve
hacia la página oficial del Ministeriode su provincia
, o, aquellas jurisdicciones que lo tengan, al sitioweb de la Dirección de Superior.
 
Pero, para que vean un ejemplo, aquí vamos a crear el link al sitioweb de la Biblioteca Nacional del Maestro.
 
Vista de edición
 
 
 
Tabla 2: Tabla que contiene sólo texto, con espacios entre las celdas.
 
Para armarla creamos una tabla de dos filas por dos columnas y copiamos el texto en cadacelda.
 
Para que en la vista de usuario no se vean los bordes los seteamos en cero (
Borde: 0)
y paradarle entre celda y celda un espacio en blanco, seteamos un espaciado entre celda de 5pixeles
(Espaciado de celda: 5)
. Luego para que quede entre el borde y el texto un espaciofijamos el relleno de celda (
Relleno de celda: 5)
.
 
En este caso el ancho de la tabla lo fijamos en 447 pixeles
(Ancho: 447)
y el alto de la tabla seajusta al contenido.
 
Para darle el color seteamos en las propiedades de la
tabla
, color de fondo blanco
(Color defondo: #ffffff)
y en las propiedades de la
celda
, color de fondo beige
(Color de fondo:#f9f4d1)
 
Vista de usuario
 
En la vista de Usuario
 
En la Administración
 
La
HomePage
(página de inicio)es lo primero que ve un visitantecuando entra a nuestro sitio. Allí,tipicamente, ponemos una foto osecuencia de fotos del IFD y unabreve información.
 
Si aun no tenemos ninguna foto,habrá que “subirla” primero al sitio,para luego poder insertarla. Esteprimer paso se realiza en lasección
Imágenes
dentro de lapestaña
"Sitio Web"
.
 
Vista de edición
 
Tabla 3: Texto con una imagen (icono) a la izquierda.
En este ejemplo, tenemos un icono y queremos añadirle texto a la derecha. En el caso que lonecesitemos, podemos agregar un vínculo a otra página sobre esa imagen.
 
Para hacerlo sólo creamos una tabla de una fila por dos columnas, a la izquierda colocamos laimagen y a la derecha el texto. Noten que en la vista de usuario no se ven los bordes (
Borde:0)
y que entre el borde y el texto, hay un espacio (
Relleno de celda: 3)
. Al alto y al ancho de latabla no le asignamos ningún valor y entonces se ajustara al contenido de las celdas.
 
 
Vista de usuario
 
Haciendo clic en el botón
Insertar/modificar tabla
, nos aparece un cuadro de diálogo endonde podemos especificar las propiedades de la tabla.
 
Vista de edición
 
Tabla 4: Cuadro de texto con una imagen (icono) a la derecha.
Para hacerlo solo creamos una tabla de una fila por dos columnas, a la derecha colocamos laimagen y a la izquierda el texto. En esta tabla solo vamos a asignar un borde para una de lasceldas, entonces a la tabla la definimos
sin bordes
(
Borde: 0).
Luego vamos a laspropiedades avanzadas de la celda a la que queremos asignar un borde y lo definimos solo conasignar un color de borde (azul en este caso)
(Color del borde: #00357d)
. A esta celdatambién le asignamos un color de fondo
(Color de fondo: #f0f8ff)
 
Vista de usuario
 
Esta semana tenemos entonces:
 
 
La lectura de la
segunda parte de la Unidad I
 
 
La lectura del
texto de Bixio
.
 
 
La participación en el foro sobre
Estrategias deenseñanza
.
 
Vista de edición
 
Recordemos cómo modificar las propiedades de una tabla.
 
Haciendo clic en el botón
Insertar/modificar tabla
, nos aparece un cuadro de diálogo endonde podemos especificar las propiedades de la tabla.
 

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->