Interfaz de Dreamweaver CS5

Introduccin En el artculo anterior, vimos como instalar un blog de wordpress, en esta serie de artculos, nos centraremos en cmo crear un sitio web desde cero. Por qu elegir Dreamweaver CS5?, es un diseador web que no requiere conocimientos previos de ningn lenguaje web. Como veremos, trabajando desde la vista de diseador, podremos realizar cualquier trabajo lo que nos facilitar nuestra realizar un sitio web sin amplios conocimientos. Antes de empezar a explicar la interfaz de Dreamweaver, existen algunos conocimientos previos que deberais de saber. No son precisos memorizarlos, pero si conocerlos, al menos que os suenen. Posiblemente hayis odo hablar de HTML, es el lenguaje de programacin que se utiliza en la creacin de una pgina web, iremos explicando las etiquetas ms importantes en los diferentes artculos. En la actualidad, el HTML ha pasado a llamarse XHTML, qu diferencias existe entre ellos?, la mayor diferencia es que en el XHTML el diseo web trabaja de forma separada el estilo, de la estructura. A que llamamos estructura y diseo, estructura son los colores, el tipo de letra, el tamao, el lugar donde lo colocamos, y el diseo los componentes utilizados (tablas, imgenes, flash,). Todo esto lo iremos viendo con mucha ms profundidad en los siguientes artculos. Interfaz de Dreamweaver CS5 Pantalla de Bienvenida

Desde la pantalla de bienvenida, podemos, desde abrir un elemento reciente, en el que estemos trabajando, abrir un documento que queremos aadir, o manipular, crear documentos nuevos en diferentes formatos (html, php, xml, javascript,etc) y elementos destacados. Los elementos destacados, pueden ser muy tiles, ya que son videos de mtodos de trabajo o la utilizacin de algunas herramientas especficas.

Si quisiramos no ver la pantalla de bienvenida al iniciar Dreamweaver CS5, iramos a Edicin->Preferencias->General->Opciones de documento, y deseleccionamos la casilla de Mostrar pantalla de bienvenida, clicamos en aceptar y ya no la veremos al iniciar, si queremos volverla a ver, solo tendremos que hacer la misma operacin a la inversa. Barra insertar Podemos encontrar la barra insertar, que se muestra en la imagen de abajo. Una barra muy til, ya que la mayora de herramientas que utilizaremos, estn en ella o las podemos aadir, esto nos facilita el no tener que ir buscando las herramientas en las diferentes ventanas.

Como en la mayora de barras, pueden ser personalizadas, aunque con limitaciones. Como vemos en la imagen de abajo, vemos que podemos verla como men o como fichas que es, como se encuentra en la imagen de arriba.

Como men, vemos que el aspecto ha cambiado, ya no tenemos las pestaas que nos indicaban las herramientas de otras secciones, como formularios, datos, spry, etc.

Pero si clicamos en el tringulo invertido que se encuentra al lado de comn, veremos que encontramos en forma de men, las pestaas que contena en el modo de fichas.

Barra de herramientas del documento

En la barra de herramientas del documento, se pueden ver aspectos esenciales, que profundizaremos en tutoriales posteriores. Describiremos a groso modo la barra y las herramientas ms significativas. Como vemos, encontramos el botn Diseo seleccionado, est es la vista que normalmente utilizaremos, para personas que controlen el cdigo html, algn lenguaje de programacin o simplemente se quiere ver el cdigo. Existen dos maneras de verlo, una como vemos en la imagen superior, encontramos el botn Dividir, pulsando ese botn, veremos la pantalla dividida, viendo en una parte el diseo y en otra el cdigo. Y la otra, pulsando el botn Cdigo, en el que veremos solamente el cdigo de la pgina y perderemos de vista el diseo. Ms adelante encontramos una bola del mundo donde podemos agregar los diferentes navegadores en los que queremos ver la pgina, aunque normalmente ya nos reconoce los que tenemos instalados. Pulsando sobre el o pulsando la tecla F12, veremos en el navegador el resultado del trabajo que estamos realizando. Tambin vemos una caja de texto donde pone Documento sin ttulo all escribiremos el ttulo que pondremos a la pgina y que al pulsar F12 veremos nos aparece en la pestaa del navegador o en la parte de arriba de la ventana del mismo. Inspector de Propiedades

En el inspector de propiedades como vemos en la imagen de arriba, podemos visualizar y cambiar las propiedades de los estilos CSS, que en posteriores artculos explicaremos.

Tambin podemos apreciar que nos aparecen propiedades de la parte del documento, donde podemos aplicar etiquetas HTML que personalicen nuestro trabajo. El inspector de propiedades es una de las partes que se convertir en imprescindible en el proceso de un diseo web.

Paneles y grupos de paneles

A la derecha de la pantalla, podemos apreciar que nos aparece un grupo de smbolos, eso son los paneles en los que podemos encontrar los documentos que vamos creando, los comportamientos que podemos, o hemos aplicado, los CSS creados.

Para visualizarlo mejor, podemos desplegarlo como vemos en la imagen de arriba, pulsando en las dos flechas situadas en la parte superior derecha del grupo de paneles. As podremos trabajar viendo todo lo que contienen los paneles, si nos molestase para trabajar, mejor dejarlo plegado y pulsar en el icono del panel que necesitemos en cada momento.

Mltiples documentos

Conforme vayamos trabajando, iremos creando diferentes documentos, y en ocasiones, podemos querer tener varios de ellos abiertos, como apreciamos en la imagen de arriba, nos aparecen fichas con los diferentes documento abiertos o creados. Con tan solo pulsar en las diferentes pestaas, podemos navegar por ellos sin ningn problema. Bueno, con esto terminamos en el tutorial dedicado a describir las partes ms esenciales del interfaz de Dreamweaver CS5 para que os familiaricis con l. Para cualquier consulta, podis escribir a: info@asmaponline.com Cuando empecemos a tener diferentes conceptos de diseo web, nos iremos dando cuenta de la importancia de cuidar el diseo, para hacer de nuestro sitio web un escaparate online (escaparates online enlazar), veremos la posibilidad de un negocio y necesitaremos realizar una campaa de marketing online y necesitaremos trabajar el posicionamiento SEO para ser vistos, pero todo esto son cosas que nos iremos encontrando en este mundo tan extenso de internet.

Estructura del sitio web

Antes de empezar a crear un sitio web lo primero que tenemos que plantearnos es su organizacin. Una organizacin muy usual es separar en carpetas los archivos diferentes, es decir, crear una carpeta imgenes, otra para los estilos y en la carpeta raz dejaremos los archivos HTML. Cuando hablo de carpeta raz, me refiero a la carpeta principal donde iremos creando el sitio web.

Con esto conseguiremos crear un orden en nuestro sitio que cuando queramos buscar un archivo ser fcil de localizar. Siempre que quiera cambiar la ubicacin de un archivo es recomendable hacerlo directamente en Dreamweaver por que tiene la posibilidad de actualizar todos los vnculos sin que le ocasione ningn problema. Si lo realiza en la carpeta raz, fuera de Dreamweaver, tendr que actualizar los vnculos manualmente. De ah la importancia de manipular los archivos y las carpetas, solamente en la aplicacin. Otra cosa a tener en cuenta son los nombres de las pginas del sitio. La pgina principal deber llamarse index, siempre en minsculas, ya que los servidores web son sensibles a las maysculas, es decir que diferencia maysculas de minsculas. El resto de pginas mi consejo es que su nombre sea referente al contenido, NUNCA DEJAR ESPACIOS, si el nombre es compuesto, unirlos mediante un guin o un guin bajo. Tambin puede unir simplemente las palabras, creando un nombre simple.

Definir su sitio
Cuando hablamos de definir un sitio nos referimos a agregar la carpeta raz como un proyecto de Dreamweaver, as como los archivos que contenga y as poderlos manipular de forma ms sencilla. En este apartado aprenderemos diferentes formas de definir un sitio desde:

La ventana de bienvenida La ventana Archivos Sitio

En la primera forma de definir un sitio explicaremos de forma sencilla la definicin de un sitio web, y en las formas posteriores solamente nos centraremos en llegar al cuadro de dialogo de definicin del sitio.

Desde la ventana de Bienvenida

En la ventana de bienvenida que al iniciar la aplicacin, encontramos en el apartado Crear nuevo Sitio de Dreamweaver, si pulsamos all, nos llevar al cuadro de dilogo de definicin del sitio, que vemos en la imagen siguiente.

Aqu pondremos el nombre del sitio no tiene por qu coincidir con el nombre de la carpeta y puede llevar espacios y seguidamente, pulsamos en la carpeta que se encuentra debajo y buscamos la carpeta raz del sitio.

Si se encontrase dentro de un servidor web pulsamos en servidores y procedemos a la configuracin para realizar las pruebas desde el servidor. Primero pulsamos en la pestaa Servidores, seguidamente en la + que se encuentra en la imagen, para aadir la configuracin a un servidor.

En esta configuracin que vamos a explicar entenderemos, que se encuentra de forma local y no remota. Al pulsar en el +, se nos abre otra ventana.

Hacemos click en el men desplegable donde pone Conectar usando:.

Y seleccionamos la opcin Local\red, como vemos en la imagen de arriba. Observamos que las opciones de la ventana han cambiado, y nicamente tenemos que indicar el nombre que le vamos a dar al servidor. No tiene por qu coincidir con el nombre de la carpeta. Seleccionamos la carpeta raz, que se encontrar dentro del servidor (dependiendo del servidor web instalado, la carpeta donde guardar los proyectos web se llamar de una formo u otra, en algunos servidores el nombre de la carpeta es www). A continuacin ponemos la URL que utilizaremos para ver el proyecto, ser el nombre del servidor instalado, que de forma predeterminada es localhost. Continuamos poniendo/ y seguidamente el nombre de la carpeta que no debe contener espacios. Con esto, cada vez que pongamos en el navegador http://localhost/miproyecto, veremos el proyecto como si se tratara de un sitio web activo, pero en local.

Con esto terminaramos la definicin del sitio.

Desde la ventana de Archivos

Vamos a la ventana archivos situada en los paneles de la derecha de la aplicacin, pulsamos en el men desplegable de los proyectos y hacemos click en Administra sitios. Se abre una ventana, pulsamos en Nuevo, para definir el nuevo sitio web y nos volver a salir la ventana del principio.

Desde Sitio

En la barra de herramientas encontramos Sitio, pulsamos y se despliega el men de sitios, pulsamos en Nuevo sitio y nos saldr la ventana de definicin del sitio.

Aadir Archivos y Carpetas

Veremos varias formas de aadir archivos y carpetas. Empezaremos viendo como aadir los archivos. Para aadir archivos, podemos o crear uno nuevo, desde el men de archivo o desde el men de bienvenida, pero existen otras dos formas, ya que en los casos anteriores, hay que guardar para que se cree el archivo. Desplegamos la ventana de Archivos de los paneles de la derecha, la primera opcin es hacer click derecho en la carpeta raz o en la carpeta donde queramos crear el archivo, nos sale un men y pulsamos en Nuevo archivo y nos crear un archivo, le ponemos el nombre y la extensin la cambiamos si queremos que el archivo no sea html. Para la segunda forma, pulsamos en el men de la ventana de Archivos, situado en la esquina superior derecha y posamos el ratn encima de Archivo y pulsamos en Nuevo archivo. Para las carpetas, si nos hemos fijado en los dos ltimos pasos, es hacer lo mismo, pero seleccionando Nueva carpeta.

Crear y guardar un documento

En el tutorial anterior, ya vimos cmo crear documento HTML de forma sencilla y rpida, en este tutorial, nos centraremos en la creacin de documentos desde plantillas, con estructuras y CSS. Antes de empezar, tenemos que tener una cosa en cuenta, cuando creamos un documento, partiendo de una plantilla, el CSS puede integrarse en la cabecera del cdigo (<HEAD>) o puede crearse un documento aparte. Para la mejor lectura y comprensin del cdigo, personalmente siempre prefiero tener el CSS en un documento aparte, separando as la estructura y el diseo del contenido. En este apartado veremos las diferencias, para que cada cual elija la mejor forma de trabajar, para l. Veremos las siguientes formas para crear un documento:

Desde la ventana de bienvenida. Desde men archivo.

Desde la ventana de bienvenida

Para crear un documento desde la ventana de bienvenida, pulsamos en Ms, se no abrir la ventana que veremos en la imagen siguiente. En esta serie de tutorial, solo veremos documentos HTML y CSS, por lo que iremos a HTML. Observamos que hay plantillas con columnas de ancho fijo o flexible, Cul es la diferencia entre una y otra?, la diferencia es que la fija, no variar el ancho de las columnas, segn la resolucin de nuestro monitor, y el flexible, si variar, pero podemos poner un ancho mnimo y mximo para que solo sea flexible entre esos rangos. Sabiendo esto, tan solo tenemos que tener muy clara la estructura de nuestro sitio web, y elegir la opcin que ms nos interese. El diseo CSS, es modificable, por lo que los colores y los anchos, podremos modificarlos a nuestro antojo, pero del CSS ya hablaremos en los siguientes tutoriales.

Otro tipo de plantilla que podemos encontrar, lo vemos en la pestaa Pgina de muestra, encontramos otro tipo de estructura diferente. Importante, seleccionar Hojas de estilo CSS, no Conjunto de marcos ya que los marcos estn obsoletos, es un tipo de diseo que no se utiliza y el hecho de utilizarlo, os podra perjudicar en la indexacin de nuestro sitio en los buscadores.

Desde el men archivo

Aqu solo veremos cmo llegar a la ventana para seleccionar la plantilla, ya que el proceso de eleccin ya lo vimos en el apartado anterior. Pulsamos Archivo en el men, despus Nuevo y llegamos a la ventana de seleccin de la plantilla.

Diferencias de localizacin del CSS en la creacin del documento

En el documento que hemos creado con CSS en un documento aparte, vemos que no genera una lnea de cdigo vinculando el CSS al documento, indicando la localizacin del mismo.

En el documento generado con el CSS en el HEAD, vemos que el cdigo CSS se encuentra entre las etiquetas HEAD, lo que nos hace tener muchas lneas de cdigo en un solo documento, siendo, a mi parecer, ms complicado detectar errores ya que deberemos mirar lnea por lnea. Si trabajamos tan solo desde la vista de diseo, esto no nos afecta, y pasa a ser una simple forma de organizar el cdigo del sitio. En sitio simples, no es muy importante, pero en proyectos ms grandes, pasa a ser algo primordial, he incluso llegaremos a trabajar con diferentes archivos CSS para diferenciar los CSS segn su utilidad.

Ttulos de pgina

Como vemos en la imagen superior, los ttulos de las pginas son aquellos que aparecen en las pestaas del navegador y en la parte superior del mismo. Esto personaliza nuestra pgina y el poner un ttulo diferente a cada pgina de nuestro sitio, se convierte en importante, ya que es una manera fcil de diferenciar cada una de ellas. Conviene que el ttulo sea descriptivo al contenido de la pgina ya que si es descriptivo y fcil de recordar, es muy probable que los visitantes del sitio no lo olviden con mucha facilidad.

Para poner el ttulo, vemos en la barra del diseador, que nos aparece una caja de texto que en su parte izquierda pone Titulo:, como vemos en la imagen superior. All ponemos el ttulo de la pgina, pulsamos Intro , guardamos y pulsamos F12, y veremos el resultado en nuestro navegador.

Insertar imgenes

Para insertar veremos dos formas muy sencillas de hacerlo, la primera desde la ventana de archivos, abrimos la carpeta de images y arrastramos la imagen, en la imagen inferior, vemos la imagen que hemos arrastrado. A partir de ahora, empezaremos a utilizar formas

de hacer las cosas que si tenemos una buena estructura de carpetas y de archivos en nuestro diseo web, nos iremos dando cuenta que tambin nos agiliza el trabajo.

La otra forma de insertar imgenes es desde el men insertar, vemos que hay sealado en la imagen superior un botn con un crculo rojo, ese es el botn de insertar imgenes, se nos abre una ventana para seleccionar la imagen y la copiamos. Tenemos que tratar de tener siempre las imgenes en nuestra carpeta del sitio, ya que si cuando lo estamos creando cogemos una imagen de otra carpeta de nuestro ordenador y no la guardamos dentro de la carpeta raz, las imgenes no se vern cuando subamos el sitio al servidor web.

Creacin de enlaces

La creacin de enlaces, os daris cuenta de que es muy sencilla, lo primero que tenemos que hacer es seleccionar el texto que queremos que contenga el enlace. Despus en la ventana Propiedades, en el apartado HTML, en Vnculo aadimos de forma manual el nombre y extensin del archivo a enlazar, en caso de ser otro sitio web, solo tenemos que poner la URL del sitio. Si observamos el texto que hemos seleccionado, vemos que nos ha

cambiado de color y se nos ha subrayado, eso no sindica que es un texto enlazado.

Otra forma de hacerlo, si observamos en la parte derecha de la caja de texto del vnculo en propiedades, vemos como un punto de mira, hacemos click y arrastramos hasta la ventana Archivo, donde soltaremos encima del archivo que queremos enlazar. Y si observamos el texto, en el mismo caso de antes, nos ha cambiado de la misma forma.

Y otra forma de hacerlo, es en la parte derecha del punto de mira, nos aparece una carpeta, hacemos click y se nos abre una ventana como la imagen superior. Elegimos el archivo y aceptamos.

Para las imgenes creamos vnculos de la misma forma, salvo que seleccionamos la imagen en vez del texto y como vemos en la imagen superior, se nos forma un borde de color azul, indicndonos que la imagen contiene un enlace. Con esto terminamos los conceptos bsicos, son cosas muy sencillas y ms adelante veris que todo se puede cambiar e incluso complicar si utilizamos los estilos CSS que veremos ms adelante.

INTRODUCCIN AL CSS
CSS es un lenguaje de hojas de estilos creado para controlar el diseo de la estructura. CSS es la mejor forma de separar los contenidos y su diseo siendo necesario para crear pginas web complejas. Separar la estructura de los contenidos y la estructura del diseo presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos. Al crear una pgina web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la funcin de cada elemento dentro de la pgina: prrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamao y tipo de letra del texto, separacin horizontal y vertical entre elementos, posicin de cada elemento dentro de la pgina, etc.

Soporte de CSS en los navegadores

El trabajo del diseador web siempre est limitado por las posibilidades de los navegadores que utilizan los usuarios para acceder a sus pginas. Por este motivo es imprescindible conocer el soporte de CSS en cada uno de los navegadores ms utilizados del mercado. Internamente los navegadores estn divididos en varios componentes. La parte del navegador que se encarga de interpretar el cdigo HTML y CSS para mostrar las pginas se denomina motor. Desde el punto de vista del diseador CSS, la versin de un motor es mucho ms importante que la versin del propio navegador. La siguiente tabla muestra el soporte de CSS 1, CSS 2.1 y CSS 3 de los cinco navegadores ms utilizados por los usuarios: Los navegadores Safari y Opera son los ms avanzados en el soporte de CSS, ya que incluyen muchos elementos de la futura versin CSS 3 y un soporte casi perfecto de la actual versin 2.1. El navegador Firefox no tiene un soporte tan avanzado de CSS 3 pero las ltimas versiones estn alcanzando rpidamente a Safari y Opera.

Funcionamiento bsico de CSS

Antes de la adopcin de CSS, los diseadores de pginas web deban definir el aspecto de cada elemento dentro de las etiquetas HTML de la pgina. El siguiente ejemplo muestra una pgina HTML con estilos definidos sin utilizar CSS: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /> <title>Ejemplo de estilos sin CSS</title> </head> <body> <h1><font color=red face=Arial size=5>Titular de la pgina</font></h1> <p><font color=gray face=Verdana size=2>Un prrafo de texto no muy Introduccin a CSS Captulo 1. Introduccin largo.</font></p> </body>

</html> El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, la tipografa y el tamao del texto de cada elemento del documento. El principal problema de esta forma de definir el aspecto de los elementos se puede ver claramente con el siguiente ejemplo: si la pgina tuviera 50 elementos diferentes, habra que insertar 50 etiquetas <font>. Si el sitio web entero se compone de 10.000 pginas diferentes, habra que definir 500.000 etiquetas <font>. Como cada etiqueta <font> tiene 3 atributos, habra que definir 1.5 millones de atributos. Por otra parte, el diseo de los sitios web est en constante evolucin y es habitual modificar cada cierto tiempo los colores principales de las pginas o la tipografa utilizada para el texto. Si se emplea la etiqueta <font>, habra que modificar el valor de 1.5 millones de atributos para modificar el diseo general del sitio web. La solucin que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /> <title>Ejemplo de estilos con CSS</title> <style> h1 { color: red; font-family: Arial; font-size: large; } p { color: gray; font-family: Verdana; font-size: medium; } </style> </head> <body> <h1>Titular de la pgina</h1> <p>Un prrafo de texto no muy largo.</p>

</body> </html> CSS permite separar los contenidos de la pgina y su aspecto o presentacin. En el ejemplo anterior, dentro de la propia pgina HTML se reserva una zona en la que se incluye toda la informacin relacionada con los estilos de la pgina. Utilizando CSS, en esa zona reservada se indica que todas las etiquetas <h1> de la pgina se deben ver de color rojo, con un tipo de letra Arial y con un tamao de letra grande. Adems, las etiquetas <p> de la pgina se deben ver de color gris, con un tipo de letra Verdana y con un tamao de letra medio. Definiendo los estilos de esta forma, no importa el nmero de elementos <p> que existan en la pgina, ya que todos tendrn el mismo aspecto establecido mediante CSS. Como se ver a continuacin, esta forma de trabajar con CSS no es ideal, ya que si el sitio web dispone de 10.000 pginas, habra que definir 10.000 veces el mismo estilo CSS. Bibliografa: http://www.librosweb.es/css/index.html

Diseo web con CSS

En el tutorial anterior, vimos algo de teora del CSS, en este tutorial, nos centraremos en ensearos las propiedades a travs del panel de CSS. Si habis ledo el tutorial anterior, habis visto su evolucin y la importancia dentro del diseo web hoy en da. El CSS se ha convertido en algo imprescindible dentro del diseo web para cumplir con la normativa W3C y para una mejor interpretacin del cdigo HTML.

Panel de Propiedades de la pgina

Si hacemos click con el botn derecho del ratn sobre la pgina en blanco, vamos a propiedades de la pgina, nos aparece est ventana, desde la cual empezamos a dar forma al sitio web, no solamente creando las apariencias de los cdigos CSS y HTML, si no que tambin, eligiendo el estilo de los encabezados (h1, h2, h3,), si navegamos por la ventana, nos daremos cuenta de que es muy intuitivo y fcil. No voy a profundizar en este apartado, ya que es mucho ms importante llegar a entender los apartados siguientes, ya que son imprescindibles para un buen diseo web.

Panel Estilos CSS

Si observamos el panel de Estilos CSS, tenemos dos partes, Tabla de reglas, donde aparecern todas las reglas CSS que vayamos creando en nuestro diseo web y debajo las Propiedades de las mismas.

Lo primero que tenemos que hacer es crear un nuevo documento CSS y guardarlo, lo enlazamos y ya podemos trabajar con un documento CSS a parte del diseo web que estamos realizando. Si creamos una regla CSS, nos aparecer la siguiente ventana:

Encontramos Clase, podemos crear reglas CSS genricas y aplicarlas en el momento que queramos, aplicando la clase al objeto o texto al que queremos aplicar el estilo. Tambin nos encontramos ID las etiquetas HTML pueden contener un identificador nico para diferenciarlas del resto, para ese identificador, se pueden crear estilos propios. Nos encontramos con Etiquetas, aqu si desplegamos el combobox de abajo, vemos que nos aparecen las etiquetas HTML a las que podemos aplicar un estilo, esto nos servir para crear estilos para que cada vez que se utilice dicha etiqueta HTML, contenga ese estilo. Y finalmente vemos Compuesto, en este apartado podremos utilizar reglas para etiquetas HTML de un identificador en concreto creando un diseo web mucho ms personalizado.

Definicin de Regla CSS

Aqu es donde ms nos vamos a detener, para explicar las diferentes opciones, al menos las ms usadas dentro de nuestro diseo web.

En la categora Tipo, podemos cambiar el tipo de la fuente, el tamao, el color de la misma, su estilo (negrita, cursiva,), dando un estilo ms personal en nuestro diseo web no utilizando fuentes comunes o estilos comunes en nuestros textos. Si la regla fuera para un enlace, podramos decir si queremos que el enlace est subrayado como podemos encontrar en muchos sitios o por lo contrario queremos que no est subrayado.

En la categora Fondo, encontramos las propiedades para modificar el fondo de la pgina, el div, una celda de una tabla, etc. Si nos fijamos encontramos el background-color, propiedad desde el que podemos modificar el color de fondo, tambin podemos aadir una

imagen de fondo, pudiendo escribir o situar otros elementos encima. A esta imagen, podemos decir que se pueda o no repetir hasta rellenar el hueco y en que ejes de coordenadas (X Y), tambin podemos indicarle la posicin que queremos que tenga la imagen. Bueno, hasta aqu para este tutorial, seguiremos explicando las siguientes propiedades en un segundo tutorial, espero que os parezca importante lo que se est explicando sobre diseo web.