31. Tablas

<< 30. Colocar los contenidos                               32. Capas DIV >>

http://cursodw.papelyweb.com/31_Tablas/tablas.html

Para practicar con las tablas, vamos a crear una estructura web con tablas, muy parecida a la que genera automáticamente PH cuando guardamos para la web. Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas y se utilizan con frecuencia para maquetar las páginas webs, aunque recomiendo utilizar las capas DIV y estilos CSS. Como de costumbre seguimos el paso a paso.

 

papel y web

01. Abrir Pág en Blanco

Partimos de un documento de página en blanco.

papel y web

02. Crear Tabla

En el nuevo documento insertamos un tabla en Insertar / Tabla de 1 fila y 1 columna, con un ancho de 1024 px con 0 (cero) en el grosor de borde.

papel y web

03. Guardar

Archivo / Guardar  y creamos una carpeta en C:/.. / Mi_Sitio / 31_Tablas / para alojar el documento tablas.html

papel y web

04. Insertar Fila y cabecera

Posicionamos el cursor dentro de la tabla y vamos a Insertar / Objetos de tabla / Insertar fila arriba, con la intención de incluir en la fila la imagen de la cabecera que tenemos en ../13_Boceto_Plantilla/imagenes /Cabecera.png

papel y web

05. Cabecera

Volcamos Cabecera.png hasta la fila de arriba y la dejamos en un tamaño de 1024 x 150 px, aprovechamos para alinear al centro la tabla y le damos un relleno y espacio de celda de 0 (cero).

papel y web

06. Barra_Navega

Insertamos otra fila para incluir en ella .. / 13_Boceto_Plantilla / imagenes Navega_Inicio.png, y le damos un tamaño de 1024 x 25 px.

papel y web

07. Filas y columnas con Ratón

Nos situamos con el cursor dentro de la celda y ahora con el botón derecho del ratón vamos a Tabla / Insertar filas o columnas y en la ventana Insertar filas o columnas, seleccionamos fila y en Numero de filas: 1, seleccionando Bajo la selección.

papel y web

08. Pie

Arrastramos ../13_Boceto_Plantilla/imagenes/Pie.png, con un tamaño de celda de 1024 x 25 px. Aprovechamos para titular la página como Tablas.

papel y web

09. Dividir Celda

Nos situamos con el cursor dentro de la celda y ahora con el botón derecho del ratón vamos a Tabla / Dividir celda y en la ventana Dividir celda, seleccionamos Columnas y en Número de columnas: 2.

papel y web

10. Propiedades

Seleccionamos la celda de la derecha y le damos un fondo #cccccc. Vamos a Propiedades de página y en la categoría apariencia dejamos todos los márgenes a 0 (cero).

papel y web

11. Adjuntar CSS

En el panel de estilos CSS vinculamos a …/CSS/Mis_Hojas_Estilo.css. Copiamos el texto para pegar en la celda de la izquierda en C:/.. /Mi_Sitio / Guiones / 31.Tablas.txt. 

Le damos formato al texto con las hojas de estilo CSS y enlazamos con galeria.html

papel y web

12. Convertimos en plantilla

Ya tenemos hecho el diseño de nuestra web con tablas, ahora tendríamos que repetir los mismos pasos que hicimos en los capítulo 16. Plantilla con el diseño con capas DIV y estilos CSS, guardamos como plantilla (Plantilla_Tablas), Creamos la región editable, vinculamos nuestro email al píe de la página, hacemos editable la cabecera, pasamos a crear después la barra de navegación como hicimos en el capítulo 17. Plantilla Navegación.

Crear las carpetas del curso

C: … / Cursos / Curso_Dreamweaver /  Curso_Final. Contiene los archivos finalizados que vamos a necesitar para completar las prácticas de curso.

C: … / Cursos / Curso_Dreamweaver /  Mi_Sitio. Es donde realizaremos las prácticas.

Si es necesario crea las carpetas que necesites. Es muy importante mantener la estructura de carpetas que recomendamos en estos apuntes, para seguir el curso sin perdidas de tiempo adicionales.

Envia un comentario

Debes ser Conectado Para publicar un comentario.