Estilos de formatos en Dreamwaver

En esta sección de Dreamweaver aprenderemos como darle formato a los diferentes herramientas básicas que utilizamos a la hora de crear una pagina web.

Las herramientas que utilizaremos en esta sección son:

• Párrafos
• Tablas
• Enlaces
• Listas

Estas son las herramientas a las cuales les definiremos los diferentes formatos de estilos. Estas nos servirán para que nuestra pagina web nos quede de una manera mas ordenada o simplemente para que a la hora de la realización de esta sea de una manera mas rápida y sencilla.

Estilos para Párrafos.

Para la creación de este estilo haremos un nuevo documento de HTML en Dreamweaver lo seleccionamos y damos crear, una vez hecho esto se nos creara nuestro nuevo documento.

Una vez Ya creado lo guardamos y lo damos un nombre.

Ya esto realizado nos vamos a la opción dividir. Esta opción lo que hace es que nos permite la visualización del diseño de la pagina web y de la codificación de ella.

En la parte del diseño de la pagina escribimos unas cuantas lineas de texto, lo que prefiramos escribir quedándonos asi.

Nos vamos a la ventana de propiedades que se encuentra en la parte inferior de nuestra ventana y seleccionamos la opción CSS.

Esta opción nos permitirá hacer la realización de las diferentes estilos para nuestro párrafo, luego nos dirigimos a la ventana que nos aparece de CSS y ahi seleccionamos la opción

Nueva Regla CSS, cuando seleccionamos esta opcion nos aparecera la ventana de definicion para cada una de las clases de los estilos que deseemos hacer para cada una de las herramientas en nuestra pagina Web.










En esta ventana seleccionaremos una de las opciones que nos parecen, estas nos servirán a la hora de la aplicación de la clase que hagamos, luego de esta seleccionamos el tipo de etiqueta que es, como estamos aplicando un estilo a un párrafo nos aparecera en la seleccion una p o si no es asi colocaremos una p.

Damos aceptar y se nos aparecerá esta ventana. En ella tendremos las opciones de elegir el tipo de letra que deseemos asi también como el color de cada uno de ellos.

Podemos cambiar el tamaño de la letra la cual puede ser de tamaño absoluto que es la que se define por medio de algunas de las palabras clave como : xx-small, x-small, small, etc. Asi tambien como lo puede ser de Tamaño relativo que son las que indican la forma o el tamaño de la letra del texto.

Cuando ya decidimos cada una de las cosas que deseemos hacer todo lo q escribamos en nuestra pagina Web que sea de Formato de párrafo tendrá la misma apariencia, estilo de letra, tamaño y color.
Quedándonos de la siguiente manera.
Teniendo como codigo lo siguiente:

p {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.9em;
color: #03F;
}



Estilos para Enlaces.

Para los enlaces creamos una nueva Regla CSS que valla referida hacia los enlaces hacemos el mismo procedimiento que hicimos para los estilo de los párrafos.



Al igual que en los estilo para los párrafos en los estilos para los enlaces podemos hacer lo misno podemos darle un tamaño de letra, una tipo de letra opciones de subrayados etc.

Teniendo en nuestro código de definición lo siguiente:


a {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.9em;
font-style: normal;
color: #990099;
line-height: normal;
}


<a href="#">Ver opciones</a>
Esta opcion de igual manera afectara a todos los archivos referentes a los enlaces.

Quedándonos de esta manera:









Estilos para listas.

Para el estilo de las listas creamos nuestra lista de opciones, cuando ya hemos terminado de realizar la pasamos a crear una nueva regla CSS, de igual manera que las anteriores siempre una etiqueta y colocamos la letra o letras que nos hagan referente a las listas.

De igual manera para las listas tenemos las mismas opciones para definir los tipos de letra como anteriormente lo vimos, esta vez le colocamos el grosor, la decoración, el estilo y el estilo de la misma de esta manera:
damos aceptar y nos quedara nuestra lista con los formatos que hemos especificado.


Tal como se muestra aquí:

En el caso de las listas tenemos la opción de agregar una imagen en cada una de ellas en vez que se nos aparezca el punto como una viñeta la cual hace referencia a cada una de las opciones.



Para esto lo que hacemos es que nos vamos a la opción lista de nuestra ventana de Definición de reglar Para li , en la opción tipo seleccionaremos ninguno y en la imagen de viñeta nos iremos a buscar la imagen de deseemos colocar y le diremos que su posición sea exterior.


nota la imagen que se deberá colocar tendrá que ser una imagen pequeña. damos aceptar y nuestra lista quedara con imagenes en las viñetas :

Estilos para Tablas.





Para las aplicaciones con tablas primero insertaremos nuestra tabla y pasaremos a definir nuestra regla de CSS para nuestra tabla.

Como estamos trabajando con tablas estas son algo complejas, en ellas se usa los estilos como para la tabla, como para el texto.








Primero definimos lo que sera el texto contenido en el, le damos el color que deseemos, el estilo de letra y el tamaño correspondiente. luego nos vamos a la opción de Borde y ahí escogemos el tipo de borde que queremos, estilo y el color para dicha tabla.




Una vez configurado esto todas las tablas que contengamos en nuestro diseñador tendrán el mismo formato quedándonos así.



Codigo


table {
font-family: "Times New Roman", Times, serif;
font-size: 0.9em;
color: #9966CC;
border: thin solid #9900FF;
}

<table width="301" border="1">
  <tr>
    <th width="62" scope="col">Nombre</th>
    <th width="58" scope="col">Apellido</th>
    <th width="82" scope="col">Puesto</th>
  </tr>
  <tr>
    <td>Carlos</td>
    <td>Benites</td>
    <td>Gerente</td>
  </tr>
  <tr>
    <td>Marta Susana </td>
    <td>Maradiaga</td>
    <td>Secretaria</td>
  </tr>
</table>