Tabla dwcs5

467 visualizaciones

Publicado el

Tema: Tablas (DreamWeaver)

0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
467
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
11
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

Tabla dwcs5

  1. 1. TablasDreamWeaver CS5
  2. 2. Las tablas presentan una serie dedatos de forma clara y organizadadividiéndolas en filas y columnas.Están formadas por un conjunto deceldas, distribuidas en filas ycolumnas.
  3. 3. En DreamWeaver CS5 todos los objetosde las tablas se alinean por defecto a laizquierda de las páginas web, perogracias a ellas es posible distribuir eltexto en columnas; colocar imágenes aun lado del texto, y otra serie de cosasque sin las tablas serían imposibles derealizar.
  4. 4. •Insertar Tabla.Para insertar unatablas, se necesita iral menú insertar, a laopción tabla. En lanueva ventanahabrá queespecificar el numerode filas y columnasque tendrá la tablaasí como el anchode la tabla.
  5. 5. • Ancho: Puede ser definido por píxeles o como porcentaje.• Grosor del borde: Indica el grosor de la tabla de píxeles, pordefecto se le agrega el numero 1.• Relleno de celda: (cellpadding) Indica la distancia entre elcontenido de las celdas y los bordes de estas.• Espacio entre las celdas: (cellspacing) indica la distanciasentre las celdas de la tabla. También se puede establecer si se quiere un encabezado para la tabla, por ejemplo para indicar el contenido de filas o columnas. Aunque podríamos lograr el mismo diseño con celdas normales y estilos CSS, es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla.Nota: Si queremos incluir un título, lo indicamos en texto, el título aparecerá fuerade la tabla.
  6. 6. •Rellenar las celdasLas celdas son cada uno de losrecuadros que forman una tabla,resultan de la inserción entre una filay una columna.
  7. 7. Para insertar algún elemento en una celda, yasea texto o imágenes, simplemente hay quesituar el punto de inserción dentro de la celdahaciendo clic.Si queremos insertar elementos ya existentesen la celdas, tenemos que crear primero latabla vacía, y después seleccionar y arrastrarlos elementos a insertar sobre la celda. Nopodemos seleccionar el texto, y crear la tabla"alrededor", como hacíamos, por ejemplo,con las listas.
  8. 8. •Seleccionar elementos de una tablaExisten varias formas de seleccionar una tabla. Una de ellas es através del menú Modificar estando el punto de inserción en latabla, o desplegando el menú contextual de la tabla al pulsarcon el botón derecho sobre ella. En ambos casos aparece laopción Tabla, a través de la cual se puede elegir laopción Seleccionar tabla.Es posible seleccionaruna pulsando con el ratónsobre el borde exterior quela rodea, opulsando <table> queaparece en la barra deestado de la ventana dedocumento.
  9. 9. Puede seleccionarse una fila o columna de variasformas, lo mejor es que pruebes las distintas formasde hacerlo.• Utilizando la opción Seleccionar columna de varias formas(zonaverde)• Manteniendo pulsando y arrastrando el ratón hasta realizarlaselección completa.• Situando el cursor junto al borde superior izquierdo de la columnao fila respectivamente.Selección de celdas:Para seleccionar varias celdas contiguas, basta con mantenerpulsado el ratón mientras se arrastra sobre las celdas deseadas.Para seleccionar una sola celda o varias celdas no contiguas, hayque mantener pulsada la tecla Control mientras se hace clicsobre las celdas.
  10. 10. • Formato de tablaLas propiedades de la tabla se especifican a través desu inspector de propiedades. Se pueden modificar losvalores que se especificaron al insertar la tabla, también, sepueden indicar otros como el valor alinear, el borde, o losvalores de relleno y espaciado de la celda.
  11. 11. La parte superior del inspector nos permite alternar entre laspropiedades HTML, que sirven para especificar laspropiedades del texto que se insertará en la celda (s)seleccionada, y la propiedad CS5 para definir los estilos. Lainferior sirve para especificar valores propios de la celda,como color, imagen de fondo (preferiblemente definidocon CS5), la alineación del contenido en horizontal yvertical, especificar su tamaño…
  12. 12. •Formato CSSPodemos cambiar elaspecto de la tabladefiniendo propiedades CSS.• Los selectores: Podemos definir una clase y aplicársela a latabla desde el panel propiedades, o si es una tabla enconcreto, asignarle un ID y definir las propiedades de este.•Podemos crear clases u asignarlas a la tabla, a unafila o a una columna. Recuerda que podemosemplear selectores compuestos.Nota: Si al crear una página definimos las propiedades deltexto empleando las Propiedades de la página, DreamWeavercrea una regla con el selector body, td, th. Es decir, aplica elmismo estilo a la página, a las celdas y a los encabezados.• Propiedades: Podemos aplicar la mayoría de propiedadesque ya hemos empleado a las tablas, filas y columnas;fuente, tamaño color imagen de fondo, etc.
  13. 13. •Añadir y eliminar filas o columnas.Existen varias formas de añadir y eliminar filas o columnas.Para insertar una fila o una columna, hay que pulsar sobrelas opciones Insertar fila o Insertar columna.La fila se inserta sobre la celda o el conjunto de celdasseleccionadas, mientras que la columna se inserta a suizquierda.
  14. 14. Existe otra opción “Insertar filas/columnas” al seleccionarlaaparece una nueva ventana, donde es posible determinar silo que se insertarán serán filas o columnas, el número de ellasque se insertará, y la posición donde se insertarán.
  15. 15. Para eliminar una fila o una columna, hay queposicionar el cursor en la fila o columna y elegir laopción eliminar fila o columna del menú Tabla.También se puede seleccionar la fila o columnaa borrar y pulsar la tecla de borrado (Del o Supr).
  16. 16. •Anidar, dividir y combinar celdas.Es posible insertar tablas dentro de las celdas de otras tablas.A esto se le llama anidar tablas. Para anidar tablas sólo tienes que posicionar el cursor en la celda donde quieres insertar la nueva tabla e insertarla como ya se ha visto. • Combinar celdas consiste en convertir 2 o más celdas en una sola por lo que dejará de haber borde de separación entre una celda y otra ya que serán una sola. • Dividir celdas consiste en partir en dos una celda. Una de las formas de dividir y combinar celdas es a través del inspector de propiedades.
  17. 17. Sólo es posible combinar celdas contiguas, cuyacombinación pueda dar como resultado otra celda,es decir, que su combinación dé como resultado unrectángulo. Podemos combinar celdas en vertical y horizontal:Para dividir una celda hay que pulsar sobre elbotón del inspector de propiedades, osobre la opción dividir celda de laopción tabla.En ambos casos, aparece una ventana como ésta, enla que hay que especificar si la celda se va a dividir enfilas o columnas, y el número de éstas.
  18. 18. •Modos de TablasExisten otros modos aparte de estándar, a través delmenú ver opción modo tabla. Dentro de esta opciónpodemos elegir entre el estándar o el modo de tablasexpandidas.El Modo de tablas expandidas añade temporalmente rellenoy espaciado de celda a las tablas de un documento yaumenta los bordes de las tablas para facilitar la edición, sepuede utilizar para seleccionar elementos de las tablas ocolocar el punto de inserción de forma precisa e introducircontenido pero en este modo no vemos la página comoquedará exactamente.
  19. 19. •Adaptar webs a distintas resoluciones En la creación de una página web se tiene que tomar en cuenta que la visitaran usuarios con distintos tamaños y resoluciones en sus monitores. Existen 2 tendencias principales a la hora de distribuir los elementos en nuestra página: • Diseño fijo: Especifica las medidas en píxeles, el contenido siempre se mostrará del mismo tamaño, lo que facilita mucho el diseño. En contra, se desaprovecha mucho espacio en monitores grandes, o puede aparecer el “scroll” horizontal en monitores pequeños. • Diseño elástico: Especifica las medidas en porcentajes, esto hace que el contenido se adapte al tamaño de la ventana en la que se visualiza, lo que permite aprovecharla completamente. En contra, en diseños elaborados, es más complicado hacer que la página no se descuadre, sobre todo cuando es demasiado ancha o estrecha.
  20. 20. El tamaño de las tablas se pueden medir en píxeles y en porcentaje:En píxeles, la tabla se verá del mismo modoindependientemente del tamaño de la ventana delnavegador.En porcentaje, la tabla se ajustará al tamaño delelemento que la contiene, lo cual implica que elcontenido de la tabla se puede descuadrar. No solo puede establecerse el tamaño de la tabla, también es posible establecer el tamaño de las celdas a través del inspector de propiedades.
  21. 21. Jugando con las medidas de las celdasde la tabla, y teniendo en cuenta quecontienen imágenes, texto, etc. Puedeconseguirse que al visualizar la páginaen monitores de distintos tamaños y condistintas resoluciones, la apariencia seabastante similar, o al menos que ladistribución del contenido de la tablano se vea muy afectado por el cambiode tamaño de la ventana delnavegador.

×