Tablas en Dreamweaver Cs5

I.E. Miguel Grau – Paramonga Adobe Dreamweaver CS5

MANEJO DE TABLAS EN HTML DENTRO DE DREAMWEAVER CS5

En la presente sesión desarrollaremos el tema de Tablas en HTML, conoceremos sus atributos y lo importante de su uso en el diseño de una página web y un sitio web.

ESTRUCTURA:

<table border="1"> <tr> <td>celda 1</td> <td>celda 2</td> </tr></table>

IMPORTANTE Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas

etiquetas habrá que especificar las filas y columnas que formarán la tabla. Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que

compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>.

PROPIEDADES DE UNA TABLA

Align Alinea horizontalmente la tabla con respecto a su entorno. background Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen. bgcolor Da color de fondo a la tabla. border Define el número de pixels del borde principal. bordercolor Define el color del borde. cellpadding Define, en pixels, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre los bordes (en pixels). height Define la altura de la tabla en pixels o porcentaje. width Define la anchura de la tabla en pixels o porcentaje. Rowspan Define una combinación de filas. Colspan Define una combinación de columnas.

EJEMPLOS PRACTICOS

EJEMPLO 01

<table border="1"> <tr> <td>celda 1</td> <td>Celda 2</td> </tr> <tr> <td>celda 3</td> <td>celda 4</td> </tr></table>

1 Prof. Campos Moreno, Williams Julio

Tabla de dos filas por dos columnas, cuatro celdas en total.

Tabla de una fila por dos columnas, dos celdas en total. La tabla tiene un borde de un pixel.


EJEMPLO 02

<table border="1" cellspacing=“10”> <tr> <td>celda 1</td> <td>celda 2</td> </tr></table>

EJEMPLO 03

<table border="1" cellpadding=“10”> <tr> <td>celda 1</td> <td>celda 2</td> </tr></table>

EJEMPLO 04

<table border="1"> <tr> <td>celda 1</td> <td>celda 2</td> </tr> <tr> <td colspan="2">celda combinada</td> </tr></table>

EJEMPLO 05

<table border="1"> <tr> <td>celda 1</td> <td rowspan="2">celda combinada</td> </tr> <tr> <td>celda 3</td> </tr></table>

HOJAS DE ESTILO (CSS) EN HTML Y DREAMWEAVER


Tabla de una fila por dos columnas y un espaciado entre los bordes de la tabla.

Tabla de una fila por dos columnas y un espaciado entre los bordes de la tabla y el contenido.

Tabla de una fila de dos columnas y una fila que ha combinado dos columnas.

Tabla de una columna de dos filas y una columna que ha combinado dos filas.


En este tema vamos a ver qué son las hojas de estilo, y cómo trabajar con ellas.

INTRODUCCIÓN

Los estilos CSS (Cascading Style Sheets) son hojas de estilo de actualización automática.Se usan principalmente para definir estilos que luego se aplicarán a las páginas de nuestro sitio, incluso a veces permiten definir características que no permiten definir los estilos HTML, como el color de fondo para el texto por ejemplo.Las hojas de estilo pueden crearse con cualquier editor de texto, como puede ser el Bloc de notas, y pueden guardarse con la extensión .CSS Vincular una hoja de estilo en un Documento HTML

Para vincular una hoja de estilo a un documento es necesario insertar la etiqueta <link> en el documento, entre las etiquetas <head> y </head>. Esta etiqueta no necesita etiqueta de cierre.

A través del atributo href se especifica la hoja de estilo que se va a vincular al documento. A través del atributo rel se tiene que especificar que se está vinculando una hoja de estilo,

por lo que su valor ha de ser stylesheet. A través del atributo type se tiene que especificar que el archivo es de texto, con sintaxis

CSS, por lo que su valor ha de ser text/css.

Por ejemplo, podríamos vincular una hoja de estilo escribiendo el siguiente código.<link href="estilos.css" rel="stylesheet" type="text/css" >

COMPONENTES DE UN ESTILO CSS BÁSICO

CUERPO DE UN CONTENIDO CSS BÁSICO

#h1{text-align:center;color: #003;font-family:Arial, Helvetica, sans-serif;

}

Para insertar un estilo dentro de una etiqueta DIV tendremos que relacionarlo mediante el atributo ID y el nombre del estilo, o a través del estilo CLASS y el nombre de la clase:<DIV id=“estilo1”>

Contenido del div</DIV>

<DIV class= “clase1”>Contenido del div

</DIV>

LAS PROPIEDADES DE LAS HOJAS DE ESTILOS CSS



Vamos a ver algunas propiedades que pueden especificarse en los estilos, así como los valores que pueden tomar: Familia de la fuente:

La propiedad es font-family. Puede tomar como valor varios nombres de fuentes, separados por comas, como pueden ser Arial, Helvetica, etc.

Grosor del texto:La propiedad es font-weight. Sus valores pueden ser: bold (negrita), bolder (mas negrita), lighter (ligera) o un número del 100 al 900.

Tamaño de la fuente:La propiedad es font-size. Puede tomar como valor un número.

Espacio entre líneas:La propiedad es line-height. Puede tomar como valor un número.

Estilo de la fuente:La propiedad es font-style. Puede tomar como valor italic, cuando se desee que el texto aparezca en cursiva.

Decoración de la fuente:La propiedad es text-decoration. Puede tomar como valor none (ninguno), underline (subrayado), line-through (una línea encima), overline (tachado) o blink (parpadeo). Si se aplica none a los hiperenlaces, puede evitarse que aparezcan subrayados.

Alineación del texto:La propiedad es text-align. Puede tomar como valor center (centrado), left (izquierda), right (derecha) o justify (justificado).

Color:La propiedad es color. Puede tomar como valor un número en hexadecimal.Si se aplica esta propiedad a los hiperenlaces, serán de este color, en lugar de los indicados por los atributos link (vínculo), vlink (vínculo activo), y alink (vínculo visitado) de la etiqueta <body>.

Color de fondo:La propiedad es background-color. Puede tomar como valor un número en hexadecimal.

Imagen de fondo:La propiedad es background-image. La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url.

Márgenes:Las propiedades son margin-top (margen superior), margin-right (margen derecho), margin-bottom (margen inferior), margin-left (margen izquierdo), o margin (los valores de los márgenes superior, derecho, inferior e izquierdo, separados por espacios). Pueden tomar como valor un número (cuatro números separados por espacios en el caso de margin).

Ancho de bordes:La propiedad es border-width. Puede tomar como valor un número.

Color del borde:La propiedad es border-color. Puede tomar como valor un número en hexadecimal.

No hay que olvidar, en el caso de los valores numéricos, especificar la unidad de medida a utilizar: cm (centímetros), pt (puntos), px (píxeles), o % (porcentaje).Existen muchas otras propiedades además de éstas. En el tema de capas puedes consultar las propiedades que se pueden definir sobre ellas en las hojas de estilo (z-index, visibility, etc.).

EJERCICIOS DE HOJAS DE ESTILO



OJO: Antes de comenzar copiar la carpeta Ejercicio 01 a la Carpeta Estilos de tu computadora.

EJERICIO 01Crear un documento HTML en Dreamweaver y copiar el código que se muestra a continuación. Guardar el documento como index.html dentro de la carpeta Ejercicio 01.

<html><head>

<title>Microsoft Access 2010</title><link href="estilos.css" type="text/css" rel="stylesheet" />

</head>

<body><h1>Microsoft Acces 2010</h1><div id="img"></div>

</body></html>

Luego crear un archive CSS en Dreamweaver y copiar el código que se muestra a continuación. Guardar el documento como estilo.css dentro de la carpeta Ejercicio 01.

h1{font-family:Arial, Helvetica, sans-serif;font-size:20;color:#009;border-bottom:#F00;text-align:center;

}

body{background-color:#0CF;

}

#img{background-image:url(acces.jpg);background-repeat:no-repeat;width:360px;height:550px; border: #006 solid 2px;position:absolute;top:50%;left:50%;margin-top:-250px;margin-left:-200px;

}

Estimados estudiantes realizar el ejercicio que se muestra a continuación y que también pueden observarlos en el blog:

ingenieroxls2012.blogspot.com, la tarea es para el día jueves 25.

EJERCICIO DE ESTILOS CSS


Con esta línea de código voy a enlazar mi hoja CSS llamada estilos.css


1. Crear una página web que contenga el siguiente contenido. Aplicarle color al título del contenido y al contenido; la alineación justificada. Definir una familia de fuente. Insertar la imagen de Windows 7. La página debe llevar el título de Windows 7. Realizarlo con Estilos CSS.

MICROSOFT WINDOWS 7

Windows 7 es la versión más reciente de Microsoft Windows, línea de sistemas operativos producida por Microsoft Corporation. Esta versión está diseñada para uso en PC, incluyendo equipos de escritorio en hogares y oficinas, equipos portátiles, tablet PC, netbooks y equipos media center. El desarrollo de Windows 7 se completó el 22 de julio de 2009, siendo entonces confirmada su fecha de venta oficial para el 22 de octubre de 2009 junto a su equivalente para servidores Windows Server 2008 R2.

Compatibilidad:

Las versiones cliente de Windows 7 fueron lanzadas en versiones para arquitectura 32 bits y 64 bits en las ediciones Home Basic, Home Premium, Professional y Ultimate. No obstante, las versiones servidor de este producto fueron lanzadas exclusivamente para arquitectura 64 bits.

Esto significa que las versiones cliente de 32 bits aún soportan programas Windows 16 bits y MS-DOS. Y las versiones 64 bits (incluyendo todas las versiones de servidor) soportan tanto programas de 32 como de 64 bits.

2. Crear una página web nueva que contenga la siguiente tabla. Colocarle color de fondo a la tabla diferente a cada columna de la tabla.

HORARIO DE RECUPERACIÓNI.E. MIGUEL GRAU

HORA MAÑANA TARDEPRIMERA 7:00 – 7:45 1:00 – 1:45SEGUNDA 7:45 – 8:30 1:45 – 2:30TERCERA 8:30 – 9:15 2:30 – 3:15CUARTA 9:15 – 10:00 3:15 – 4:00

RECREO 10:00 – 10:15 4:00 – 4:15

QUINTA 10:15 – 10:55 4:15 – 4:55SEXTA 10:55 – 11:35 4:55 – 5:35SETIMA 11:35 – 12:15 5:35 – 6:15OCTAVA 12:15 – 12:55 6:15 – 6:55

LISTAS ORDENADAS Y DESORDENADAS EN DREAMWEAVER CS5


La imagen debe tener un ancho y alto de 390px.


El lenguaje HTML proporciona un modo sencillo de representar elementos en forma de lista. Dentro de una lista de puede incluir cualquiera de los elementos HTML, e igualmente una lista puede incluirse dentro de formularios, tablas, etc.

Existen principalmente tres tipos de listas: las listas no ordenadas, las listas ordenadas y las listas de definiciones. En esta clase veremos las listas no ordenadas y listas ordenadas.

LISTA DESORDENADAS <ul>

Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>. A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square (cuadrado).

Por ejemplo, para insertar la siguiente lista: Perro Gato Periquito

Habría que escribir:<ul type="circle">

<li>Perro</li><li>Gato</li><li>Periquito</li>

</ul>

LISTAS ORDENADAS <ol>

Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>. A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras minúsculas), A (letras mayúsculas), i (números romanos en minúsculas) o I (números romanos en mayúsculas).Por ejemplo, para insertar la siguiente lista:

1. Perro2. Gato3. Periquito

Habría que escribir:<ol type="1">

<li>Perro</li><li>Gato</li><li>Periquito</li>

</ol>

LISTAS ANIDADASEs posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas.Por ejemplo, para insertar la siguiente lista:

1. Lunes Ingles Frances

Habría que escribir:<ol type=“1”>

<li>Lunes<ul type="circle">

<li>Ingles</li><li>Frances</li>

</ul></li>

</ol>

PRACTICA SOBRE FORMATEO DE TEXTO Y LISTAS EN DREAMWEAVER


Cada uno de los elementos de una lista ha de insertarse entre las

etiquetas <li> y </li>.

Cada uno de los elementos de una lista ha de insertarse entre las

etiquetas <li> y </li>.

A. Martes1. Matemática2. Comunicación

Habría que escribir:<ol type=“A”>

<li>Lunes<ol type="1">

<li>Matemática</li><li>Comunicación</li>

</ol></li>

</ol>


1. Digite el siguiente texto teniendo en cuenta los formatos, las alineaciones, modifique el tamaño y tipo de fuente, los colores e inserción de imágenes.

MICROSOFT WINDOWS 8

Windows 8 es la versión actual del sistema operativo de Microsoft Windows, producido por Microsoft para su uso en computadoras personales, incluidas computadoras de escritorio en casa y de negocios,

computadoras portátiles, netbooks, tabletas, servidores y centros multimedia. Añade soporte para microprocesadores ARM, además de los microprocesadores tradicionales x86 de Intel y AMD. Su interfaz de usuario ha sido modificada para hacerla más adecuada para su uso con pantallas táctiles,

además de los tradicionales ratón y teclado. Microsoft también anunció que Aero Glass no estará presente en la versión final de Windows 8. Microsoft anunció que el lanzamiento de la

versión final de Windows 8 y esta se efectuó el 26 de octubre de 2012, 3 años después del lanzamiento de su predecesor Windows 7.

Características nuevas en el sistema

Windows To Go USB

Compatibilidad con USB 3.0

Interfaz Ribbon en el Explorador de Windows

Nueva tienda de Aplicaciones

Sistema de ficheros Protogon

Windows To Go

2. Realizar las siguientes listas respetando los formatos.


REQUISITOS DEL HARDWARE

Los requisitos del sistema de Windows 8 son similares a los de Windows 7:

Arquitectura x86 (32 bits) y x86-64 (64 bits) Procesador: 1 gigahercio (GHz) o más rápido,

compatible con PAE, NX y SSE2 Memoria RAM: 1 Gb (32 bits) y 2 Gb (64 bits) Gráficos: GPU DirectX 9 con Windows Display

Driver Model (WDDM) 1.0 (No es necesario, solo se requiere para Windows Aero)

Disco duro: 16 Gb (32 bits) y 20 Gb (64 bits) de espacio libre

Una pantalla capacitiva (opcional) para aprovechar la entrada táctil.

1. LA VIDA FANTÁSTICA Aventuras, inventos y mixtificaciones de Silvestre

Paradox Camino de perfección Paradox, rey

2. LA LUCHA POR LA VIDA La busca Mala hierba Aurora roja

3. EL PASADOi. La feria de los discretos

ii. Los últimos romáticosiii. Las tragedias grotescas

4. LA RAZAA. La dama erranteB. La ciudad de la nieblaC. El árbol de la ciencia

Tablas en Dreamweaver Cs5

Documents

Transcript of Tablas en Dreamweaver Cs5