Css Básico En Adobe Dreamweaver

html css y en el tutorial básico Adobe Dreamweaver

Este tutorial está diseñado para introducir los conceptos de utiLizar en css Adobe Dreamweaver y html para diseñadores web que no están famiLiarizados con css en diseño web. CSS significa hojas de estilo en cascada y es un sistema para añadir estilo a sus páginas web y contenido de la página web.

Después de leer este tutorial de css, debería tener un sentimiento básico de cómo usar css en Dreamweaver. En este tutorial vamos a crear un documento en blanco, Crear estilo css, Aa div insertar a la página, Insertar una imagen, Y, a continuación, crear un menú de navegación rápida y asignar propiedades CSS a los elementos de la página. El programa utiLizado en este tutorial y capturas de pantalla se Adobe Dreamweaver CS3.

Abraham chaffin CreativeCow.net, Cambria, CaLifornia EE.UU. © 2007 CreativeCow.net. Todos los derechos reservados.

html documentos:
Crear un nuevo documento en blanco y, a continuación, guardarlo para comenzar su trabajo. Yo siempre tienden a guardar los documentos antes de hacer cualquier cosa para que pueda guardar rápidamente de vez en cuando mediante el acceso directo (cntrl + s). Cuando se crea un documento en blanco en Dreamweaver su página web ya cuenta con contenido en él, Usted no puede verlo en modo de diseño. Para ver el contenido que usted puede usar el acceso directo (cntrl + ~) para cambiar entre el modo de diseño y el código o el modo de ir al menú Ver Código de menú o ver diseño.

Lo que debería ver algo parecido a esto:

Este es el comienzo de su marco html documento, sino que se construye con un gran número de etiquetas. El inicio de cada etiqueta se parece Esto y al final de cada etiqueta se parece / este. Todo el documento se compone de la html Etiqueta de arriba que parece html xmlns = " http://www.W3.org / 1999/xhtml " porque tiene un modificador xmlns en el mismo. La etiqueta final se encuentra en la parte inferior del documento / html. Entre el comienzo y el final html Etiqueta hay dos etiquetas de la primaria head y etiquetas Cuerpo. head la etiqueta no se ve, pero que muchas partes esenciales y modificadores de lo que la etiqueta Cuerpo elementos parecen. El contenido de la etiqueta Cuerpo es el contenido que realmente es visible a través de su navegador.

Css elementos:
Antes de insertar todos los elementos vamos a crear un estilo css. Pulsando (SHIFT + F11) cambia el marco de estilos CSS o vaya al menú modificar estilos css. En la parte inferior derecha hay un pequeño icono que se parece . Por ello, el â € € œnew css ruleâ cuadro de diálogo. Para empezar vamos a asignar una regla de CSS para la etiqueta Cuerpo y hacer que el Color de fondo frente a un blanco en lugar de un blanco claro. Seleccione "etiqueta" para el "Selector de tipo" radio. De la "etiqueta" menú desplegable, seleccione el "cuerpo" del Selector. Seleccione "este documento sólo" para el "definir en" la radio y haz cLic en "ok".

Una vez que haya hecho cLic en "ok" Dreamweaver añade código en su html la preparación de archivos para modificar la etiqueta Cuerpo utiLizando css.

Esto también traerá hasta la "regla css definición de organismo de" ventana de diálogo que le permite definir su elegir entre los "antecedentes" de la categoría de la columna y eLija un Color amarillo claro con el Color de fondo o recogedor # tipo de ffffcc y pulse "ok".

Pulsando "ok" ejecutado Dreamweaver para modificar el cuerpo css Selector Mediante la inserción de un Background-Color Propiedad Y una Valor # de ffffcc.

Hay muchas otras propiedades, puede asignar al órgano de selección o se puede modificar utiLizando el marco de estilos css:

Div etiquetas:
Volver a la vista diseño (cntrl + ~) y vamos a insertar una etiqueta div por ir al menú Insertar diseño de objetos etiqueta div, Que lleva hasta la â € € œinsert div Taga cuadro de diálogo. (div etiquetas son las más comúnmente utiLizadas etiqueta para celebrar diferentes elementos en una página web diseñada con css, tales como imágenes, Texto, O videos.)

El primer campo en el "insertar div tag" es el cuadro de diálogo insertar: Campo. Este es el campo donde el que designa div etiqueta se inserta en el html página. Por defecto establece que "en el punto de inserción", que significa la etiqueta div donde se inserta el cursor fue colocado en la página web. También puede elegir "tras el inicio de la etiqueta" o "antes de final de la etiqueta" a su lugar div etiqueta en un lugar diferente.

Próximo a encontrar la "clase:"Ámbito que es un campo que está directamente relacionada con su css normas. Css una clase tiene un Selector con un período en el frente de ella como ".Clase". Las clases se utiLizan para asignar una propiedad o propiedades de muchos elementos de una página web. No tenemos clases aún por definir en este documento así no hay nada que podamos asignar aún. El "id:"Ámbito también se está en blanco porque no hay identificaciones se define en nuestra css. Identificaciones se utiLizan para asignar una propiedad o propiedades a un único tema en una página web y en el código css tiene una almohadilla antes de que como "# id". Ya que tenemos ninguno de estos haz cLick en "nuevo estilo css" y vamos a definir una nueva norma.

Esta vez seleccione "clase" como el Selector de tipo de, Escriba "CoolClase" como la, Seleccione "Sólo este documento" y presione "ok". Vamos a configurar el Color de fondo de esta clase con un fresco Color azul de la selección de "fondo" en las categorías y establecer el "Color de fondo" a algo como # 00ccff. Ahora el Color del borde de una delgada línea negro haciendo cLic en "frontera" como la categoría y luego eLija sóLido como el estilo del menú desplegable y 1 pixel de ancho y como el negro (# 000000) como el Color. O puede ser más creativos si eLige. Ahora vamos a establecer un poco de relleno en nuestro estado haciendo cLic en "caja" en la categoría y el tipo de columna "5" para el "principio: Relleno "se asignará el relleno no sólo para la parte de arriba, pero para todas las partes si sale de la" misma para todos "marcada la casilla. Pulse "ok" y Dreamweaver se creará una nueva clase de estilo css en su etiqueta, con tres propiedades.

Su "etiqueta div insertar" cuadro de diálogo también tiene su campo de la clase de población con "cooltag" - presione "ok" y Dreamweaver a escribir código en su página web con el lugar titular de Textoo dentro de la nueva etiqueta div.

Este div tendrá nuestra clase que hemos creado div asignado a la etiqueta y todos los elementos dentro de la etiqueta.

Imágenes:
Ahora vamos a insertar una imagen de nuestra clase y asignar a la misma.
Poner el cursor fuera del div al hacer cLic en cualquier lugar fuera de él dentro de la página web. En el menú Insertar ir a la imagen (cntrl + alt + I). Elegir cualquier imagen que pueda tener disponible en su ordenador y pulse "ok". Puede omitir el próximo cuadro de diálogo pulsando "ok"; Dreamweaver colocará la imagen en su página web. CLick derecho sobre la imagen y seleccione en el menú css estilos CoolClase. Este asignará la clase anterior se define a la imagen, dándole el Color de fondo, Relleno, Y hemos asignado a la frontera ".CoolClase". Adobe Dreamweaver debe tener insertar un código similar a este:

Poder de css:
Lo que hace css potente es la capacidad de volver atrás y hacer las modificaciones de su estilo y una vez que han sentido todos los elementos que ha asignado el estilo de. En el marco de estilos CSS debería ver "todas las reglas" y su estilo ".CoolClase". Haga cLic en el .CoolClase Selector y, a continuación, sobre el valor para el Background-Color (# 00ccff). UtiLizando el Selector de Colores elegir un Color diferente, Tales como (# 66ffff). Ahora que estás utiLizando con éxito en css Dreamweaver. El único código que se cambió fue en el css y se apLica tanto a la div y la img.

La creación de un menú de navegación rápida
Ahora con el contenido de la etiqueta se div resquebrajarla y convertirlo en una Lista de navegación.

Poner cada palabra en su propia línea pulsando entrar con el cursor inbetween cada palabra. Resaltar todas las palabras a continuación, haga cLic derecho y seleccionar la Lista Lista desordenada. Ahora tiene una Lista de viñetas, pero tenemos que apLicar algunas de estilo a lo que tenemos que crear una regla.

Haga cLic en el botón añadir css Desde el marco de estilos css. Hay muchas maneras de asignar el estilo a la Lista, Podríamos crear una nueva clase llamándola algo así como ".ListClase "y apLicarlo a cada etiqueta Li Li Clase="ListClase" hacer, pero para este ejemplo vamos a crear una regla para todas las etiquetas Li. Seleccione "avanzado" y el tipo de radio "Li" en el Selector de campo. "Li" está Lista para. Seleccione "Sólo este documento" y presione "ok".

Vamos a quitar la bala, Hacer que el Color de fuente blanco y el tipo de letra negrita peso. Con el tipo de categoría, seleccione negritas de elegir el "peso" menú desplegable y seleccione blanco (# ffffff) para el Color. Categoría de la Lista ninguno de elegir el "tipo" menú desplegable y pulse "ok". Adobe Dreamweaver creado en el código CSS que afecta a laLiEtiqueta.

Tener un buen menú de navegación los puntos que usted debe cambiar el mouse por encima de ellos. Para hacer esto tenemos que añadir un comportamiento. Ir al menú de la ventana comportamientos (shift + F4). Mostrar todos los eventos haciendo cLic en el "mostrar todos los eventos" botón . Asegúrese de que el cursor se encuentra en uno de los elementos de la Lista por lo que el comportamiento se apLica al elemento de la Lista y no otra cosa. Onmouseover en el tipo de campo Esto.Clase = 'CoolClase'. "esto" se refiere a la etiqueta "Li" de clase le dice al navegador que desea cambiar a la clase CoolClase. En el tipo de campo onmouseout Esto.Clase ='' (que las dos' marcas no una cita). Esto hace que el navegador devolverá el nombre de clase de la etiqueta Li volver a la nada cuando el ratón se mueve fuera del elemento. Que han apLicado un comportamiento a un elemento de la Lista.

Para obtener el comportamiento que deben apLicarse a todos los elementos que usted debe repetir los pasos anteriores con el cursor en cada elemento de Lista o copiar y pegar el código en la vista de código. El resultado final en la vista de código debe ser similar a este:

Antes de terminar este tutorial, debe establecer el cursor en una mano, ya que va en la Lista como la navegación normal se.
En el marco de estilos css seleccionar Li. En la parte inferior de las "propiedades" Li "hay un aspecto" propiedad "vínculo haga cLic sobre él y elegimos" cursor "en el menú desplegable. Tipo de "puntero" como el valor si no es en los presets.

Conclusión
Pulse F12 y comprobar lo que ha hecho. Que probablemente no va a parecer demasiado bonita, pero debe darle una idea sobre la forma en css Dreamweaver trabaja con html y lo que hace en su navegador.

Jugar y recordar para divertirse!