P. 1
Interfaz de Dreamweaver CS5

Interfaz de Dreamweaver CS5

|Views: 2.604|Likes:
Publicado porZoyly Quiñonez

More info:

Published by: Zoyly Quiñonez on Jun 21, 2012
Copyright:Attribution Non-commercial

Availability:

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

05/01/2013

pdf

text

original

Interfaz de Dreamweaver CS5

Introducción En el artículo anterior, vimos como instalar un blog de wordpress, en esta serie de artículos, nos centraremos en cómo crear un sitio web desde cero. ¿Por qué elegir Dreamweaver CS5?, es un diseñador web que no requiere conocimientos previos de ningún lenguaje web. Como veremos, trabajando desde la vista de diseñador, 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 deberíais de saber. No son precisos memorizarlos, pero si conocerlos, al menos que os suenen. Posiblemente hayáis oído hablar de HTML, es el lenguaje de programación que se utiliza en la creación de una página web, iremos explicando las etiquetas más importantes en los diferentes artículos. En la actualidad, el HTML ha pasado a llamarse XHTML, ¿qué diferencias existe entre ellos?, la mayor diferencia es que en el XHTML el diseño web trabaja de forma separada el estilo, de la estructura. A que llamamos estructura y diseño, estructura son los colores, el tipo de letra, el tamaño, el lugar donde lo colocamos, y el diseño los componentes utilizados (tablas, imágenes, flash,…). Todo esto lo iremos viendo con mucha más profundidad en los siguientes artículos. 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 añadir, 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 métodos de trabajo o la utilización de algunas herramientas específicas.

Si quisiéramos no ver la pantalla de bienvenida al iniciar Dreamweaver CS5, iríamos a Edición->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 operación 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 mayoría de herramientas que utilizaremos, están en ella o las podemos añadir, esto nos facilita el no tener que ir buscando las herramientas en las diferentes ventanas.

Como en la mayoría 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 pestañas que nos indicaban las herramientas de otras secciones, como formularios, datos, spry, etc.

Pero si clicamos en el triángulo invertido que se encuentra al lado de “común“, veremos que encontramos en forma de menú, las pestañas que contenía 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 más significativas. Como vemos, encontramos el botón “Diseño” seleccionado, está es la vista que normalmente utilizaremos, para personas que controlen el código html, algún lenguaje de programación o simplemente se quiere ver el código. Existen dos maneras de verlo, una como vemos en la imagen superior, encontramos el botón “Dividir”, pulsando ese botón, veremos la pantalla dividida, viendo en una parte el diseño y en otra el código. Y la otra, pulsando el botón “Código”, en el que veremos solamente el código de la página y perderemos de vista el diseño. Más adelante encontramos una bola del mundo donde podemos agregar los diferentes navegadores en los que queremos ver la página, 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. También vemos una caja de texto donde pone “Documento sin título” allí escribiremos el título que pondremos a la página y que al pulsar F12 veremos nos aparece en la pestaña 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 artículos explicaremos.

También 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 diseño web.

Paneles y grupos de paneles

A la derecha de la pantalla, podemos apreciar que nos aparece un grupo de símbolos, 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.

Múltiples 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 pestañas, podemos navegar por ellos sin ningún problema. Bueno, con esto terminamos en el tutorial dedicado a describir las partes más esenciales del interfaz de Dreamweaver CS5 para que os familiaricéis con él. Para cualquier consulta, podéis escribir a: info@asmaponline.com Cuando empecemos a tener diferentes conceptos de diseño web, nos iremos dando cuenta de la importancia de cuidar el diseño, para hacer de nuestro sitio web un escaparate online (escaparates online enlazar), veremos la posibilidad de un negocio y necesitaremos realizar una campaña 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 organización. Una organización muy usual es separar en carpetas los archivos diferentes, es decir, crear una carpeta imágenes, otra para los estilos y en la carpeta raíz dejaremos los archivos HTML. Cuando hablo de carpeta raíz, 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á fácil de localizar. Siempre que quiera cambiar la ubicación de un archivo es recomendable hacerlo directamente en Dreamweaver por que tiene la posibilidad de actualizar todos los vínculos sin que le ocasione ningún problema. Si lo realiza en la carpeta raíz, fuera de Dreamweaver, tendrá que actualizar los vínculos manualmente. De ahí la importancia de manipular los archivos y las carpetas, solamente en la aplicación. Otra cosa a tener en cuenta son los nombres de las páginas del sitio. La página principal deberá llamarse index, siempre en minúsculas, ya que los servidores web son sensibles a las mayúsculas, es decir que diferencia mayúsculas de minúsculas. El resto de páginas mi consejo es que su nombre sea referente al contenido, NUNCA DEJAR ESPACIOS, si el nombre es compuesto, unirlos mediante un guión o un guión bajo. También puede unir simplemente las palabras, creando un nombre simple.

Definir su sitio
Cuando hablamos de definir un sitio nos referimos a agregar la carpeta raíz como un proyecto de Dreamweaver, así como los archivos que contenga y así poderlos manipular de forma más 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 definición de un sitio web, y en las formas posteriores solamente nos centraremos en llegar al cuadro de dialogo de definición del sitio.

Desde la ventana de Bienvenida

En la ventana de bienvenida que al iniciar la aplicación, encontramos en el apartado “Crear nuevo” “Sitio de Dreamweaver…”, si pulsamos allí, nos llevará al cuadro de diálogo de definición 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 raíz del sitio.

Si se encontrase dentro de un servidor web pulsamos en servidores y procedemos a la configuración para realizar las pruebas desde el servidor. Primero pulsamos en la pestaña “Servidores”, seguidamente en la “+” que se encuentra en la imagen, para añadir la configuración a un servidor.

En esta configuración 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 opción 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 raíz, 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 continuación 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 terminaríamos la definición del sitio.

Desde la ventana de Archivos

Vamos a la ventana archivos situada en los paneles de la derecha de la aplicación, 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 definición del sitio.

Añadir Archivos y Carpetas
Veremos varias formas de añadir archivos y carpetas. Empezaremos viendo como añadir los archivos. Para añadir 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 opción es hacer click derecho en la carpeta raíz 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 extensión 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 ratón 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 cómo crear documento HTML de forma sencilla y rápida, en este tutorial, nos centraremos en la creación 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 código (<HEAD>) o puede crearse un documento aparte. Para la mejor lectura y comprensión del código, personalmente siempre prefiero tener el CSS en un documento aparte, separando así la estructura y el diseño 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 “Más…”, 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, ¿Cuál es la diferencia entre una y otra?, la diferencia es que la fija, no variará el ancho de las columnas, según la resolución de nuestro monitor, y el flexible, si variará, pero podemos poner un ancho mínimo y máximo 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 opción que más nos interese. El diseño 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 pestaña “Página de muestra”, encontramos otro tipo de estructura diferente. Importante, seleccionar “Hojas de estilo CSS”, no “Conjunto de marcos” ya que los marcos están obsoletos, es un tipo de diseño que no se utiliza y el hecho de utilizarlo, os podría perjudicar en la indexación de nuestro sitio en los buscadores.

Desde el menú archivo

Aquí solo veremos cómo llegar a la ventana para seleccionar la plantilla, ya que el proceso de elección ya lo vimos en el apartado anterior. Pulsamos “Archivo” en el menú, después “Nuevo” y llegamos a la ventana de selección de la plantilla.

Diferencias de localización del CSS en la creación del documento

En el documento que hemos creado con CSS en un documento aparte, vemos que no genera una línea de código vinculando el CSS al documento, indicando la localización del mismo.

En el documento generado con el CSS en el HEAD, vemos que el código CSS se encuentra entre las etiquetas HEAD, lo que nos hace tener muchas líneas de código en un solo documento, siendo, a mi parecer, más complicado detectar errores ya que deberemos mirar línea por línea. Si trabajamos tan solo desde la vista de diseño, esto no nos afecta, y pasa a ser una simple forma de organizar el código del sitio. En sitio simples, no es muy importante, pero en proyectos más grandes, pasa a ser algo primordial, he incluso llegaremos a trabajar con diferentes archivos CSS para diferenciar los CSS según su utilidad.

Títulos de página

Como vemos en la imagen superior, los títulos de las páginas son aquellos que aparecen en las pestañas del navegador y en la parte superior del mismo. Esto personaliza nuestra página y el poner un título diferente a cada página de nuestro sitio, se convierte en importante, ya que es una manera fácil de diferenciar cada una de ellas. Conviene que el título sea descriptivo al contenido de la página ya que si es descriptivo y fácil de recordar, es muy probable que los visitantes del sitio no lo olviden con mucha facilidad.

Para poner el título, vemos en la barra del diseñador, que nos aparece una caja de texto que en su parte izquierda pone “Titulo:”, como vemos en la imagen superior. Allí ponemos el título de la página, pulsamos “Intro” , guardamos y pulsamos F12, y veremos el resultado en nuestro navegador.

Insertar imágenes

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 diseño web, nos iremos dando cuenta que también nos agiliza el trabajo.

La otra forma de insertar imágenes es desde el menú insertar, vemos que hay señalado en la imagen superior un botón con un círculo rojo, ese es el botón de insertar imágenes, se nos abre una ventana para seleccionar la imagen y la copiamos. Tenemos que tratar de tener siempre las imágenes 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 raíz, las imágenes no se verán cuando subamos el sitio al servidor web.

Creación de enlaces

La creación de enlaces, os daréis cuenta de que es muy sencilla, lo primero que tenemos que hacer es seleccionar el texto que queremos que contenga el enlace. Después en la ventana “Propiedades”, en el apartado “HTML”, en “Vínculo” añadimos de forma manual el nombre y extensión 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 vínculo 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 imágenes creamos vínculos 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, indicándonos que la imagen contiene un enlace. Con esto terminamos los conceptos básicos, son cosas muy sencillas y más adelante veréis que todo se puede cambiar e incluso complicar si utilizamos los estilos CSS que veremos más adelante.

INTRODUCCIÓN AL CSS
CSS es un lenguaje de hojas de estilos creado para controlar el diseño de la estructura. CSS es la mejor forma de separar los contenidos y su diseño siendo necesario para crear páginas web complejas. Separar la estructura de los contenidos y la estructura del diseño presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos. Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, 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, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.

Soporte de CSS en los navegadores

El trabajo del diseñador web siempre está limitado por las posibilidades de los navegadores que utilizan los usuarios para acceder a sus páginas. Por este motivo es imprescindible conocer el soporte de CSS en cada uno de los navegadores más utilizados del mercado. Internamente los navegadores están divididos en varios componentes. La parte del navegador que se encarga de interpretar el código HTML y CSS para mostrar las páginas se denomina motor. Desde el punto de vista del diseñador CSS, la versión de un motor es mucho más importante que la versión del propio navegador. La siguiente tabla muestra el soporte de CSS 1, CSS 2.1 y CSS 3 de los cinco navegadores más utilizados por los usuarios: Los navegadores Safari y Opera son los más avanzados en el soporte de CSS, ya que incluyen muchos elementos de la futura versión CSS 3 y un soporte casi perfecto de la actual versión 2.1. El navegador Firefox no tiene un soporte tan avanzado de CSS 3 pero las últimas versiones están alcanzando rápidamente a Safari y Opera.

Funcionamiento básico de CSS
Antes de la adopción de CSS, los diseñadores de páginas web debían definir el aspecto de cada elemento dentro de las etiquetas HTML de la página. El siguiente ejemplo muestra una página 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 página</font></h1> <p><font color=”gray” face=”Verdana” size=”2″>Un párrafo de texto no muy Introducción a CSS Capítulo 1. Introducción largo.</font></p> </body>

</html> El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, la tipografía y el tamaño 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 página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas <font>. Si el sitio web entero se compone de 10.000 páginas diferentes, habría que definir 500.000 etiquetas <font>. Como cada etiqueta <font> tiene 3 atributos, habría que definir 1.5 millones de atributos. Por otra parte, el diseño de los sitios web está en constante evolución y es habitual modificar cada cierto tiempo los colores principales de las páginas o la tipografía utilizada para el texto. Si se emplea la etiqueta <font>, habría que modificar el valor de 1.5 millones de atributos para modificar el diseño general del sitio web. La solución 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 página</h1> <p>Un párrafo de texto no muy largo.</p>

</body> </html> CSS permite separar los contenidos de la página y su aspecto o presentación. En el ejemplo anterior, dentro de la propia página HTML se reserva una zona en la que se incluye toda la información relacionada con los estilos de la página. Utilizando CSS, en esa zona reservada se indica que todas las etiquetas <h1> de la página se deben ver de color rojo, con un tipo de letra Arial y con un tamaño de letra grande. Además, las etiquetas <p> de la página se deben ver de color gris, con un tipo de letra Verdana y con un tamaño de letra medio. Definiendo los estilos de esta forma, no importa el número de elementos <p> que existan en la página, ya que todos tendrán el mismo aspecto establecido mediante CSS. Como se verá a continuación, esta forma de trabajar con CSS no es ideal, ya que si el sitio web dispone de 10.000 páginas, habría que definir 10.000 veces el mismo estilo CSS. Bibliografía: http://www.librosweb.es/css/index.html

Diseño web con CSS
En el tutorial anterior, vimos algo de teoría del CSS, en este tutorial, nos centraremos en enseñaros las propiedades a través del panel de CSS. Si habéis leído el tutorial anterior, habéis visto su evolución y la importancia dentro del diseño web hoy en día. El CSS se ha convertido en algo imprescindible dentro del diseño web para cumplir con la normativa W3C y para una mejor interpretación del código HTML.

Panel de Propiedades de la página

Si hacemos click con el botón derecho del ratón sobre la página en blanco, vamos a propiedades de la página, nos aparece está ventana, desde la cual empezamos a dar forma al sitio web, no solamente creando las apariencias de los códigos CSS y HTML, si no que también, eligiendo el estilo de los encabezados (h1, h2, h3,…), si navegamos por la ventana, nos daremos cuenta de que es muy intuitivo y fácil. No voy a profundizar en este apartado, ya que es mucho más importante llegar a entender los apartados siguientes, ya que son imprescindibles para un buen diseño web.

Panel Estilos CSS

Si observamos el panel de Estilos CSS, tenemos dos partes, Tabla de reglas, donde aparecerán todas las reglas CSS que vayamos creando en nuestro diseño 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 diseño web que estamos realizando. Si creamos una regla CSS, nos aparecerá la siguiente ventana:

Encontramos Clase, podemos crear reglas CSS genéricas y aplicarlas en el momento que queramos, aplicando la clase al objeto o texto al que queremos aplicar el estilo. También 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 diseño web mucho más personalizado.

Definición de Regla CSS
Aquí es donde más nos vamos a detener, para explicar las diferentes opciones, al menos las más usadas dentro de nuestro diseño web.

En la categoría “Tipo”, podemos cambiar el tipo de la fuente, el tamaño, el color de la misma, su estilo (negrita, cursiva,…), dando un estilo más personal en nuestro diseño web no utilizando fuentes comunes o estilos comunes en nuestros textos. Si la regla fuera para un enlace, podríamos 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 categoría “Fondo”, encontramos las propiedades para modificar el fondo de la página, 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, también podemos añadir 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), también podemos indicarle la posición 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 diseño web.

You're Reading a Free Preview

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