All Articles Dreamweaver
El aprendizaje de CSS en Dreamweaver Parte Tutorial 1: Redefinición de los elementos HTML
Geoff Blake on Tue, February 8th | 0 comments
Learning how to work with CSS is absolutely critical to building contemporary websites. It's one of those things that we, as designers, have to hunker down and learn at some point. And even after you

Aprender a trabajar con CSS es absolutamente fundamental para la construcción de sitios web actuales. Es una de esas cosas que nosotros, como diseñadores, tiene que agacharse y aprender en algún momento. E incluso después de dominar los fundamentos, todavía hay espacio para crecer y expandirse. Usted puede aprender sobre nuevas propiedades o la forma de lograr resultados específicos, y usted puede descubrir las técnicas para mantener el CSS como "magra n significa como sea posible.

In this tutorial post, we'll be taking a look at the fundamentals of working with CSS in Dreamweaver. You'll learn about two primary rule types, how to create them, and how to begin applying them throughout your site.

Entender cómo los estilos de trabajo

En primer lugar, tengo que preguntar, ¿sabe usted acerca de los estilos en algunas de sus otras aplicaciones? InDesign tiene estilos, Illustrator tiene estilos ... diablos, incluso Microsoft Word ha estilos. Un estilo es simplemente una colección de opciones de formato. Por ejemplo, podríamos tener un estilo llamado "énfasis", y el énfasis que hemos establecido un tipo de letra, el tamaño de una, y un color. En este punto, podemos empezar a aplicar énfasis a lo largo de nuestro documento, y por supuesto, donde quiera que lo utilizan, vamos a obtener el mismo tipo de letra, tamaño y color que se utiliza. Si vamos hacia atrás y hacer un cambio en el estilo de cursiva en el original, entonces el formato se irá actualizando cada vez que se ha utilizado en nuestro documento.

Así es como los estilos tradicionales de trabajo. Sin embargo, CSS lleva esta idea aún más lejos. En lugar de trabajar con estilos en una sola página, con CSS se puede aplicar el conjunto de reglas para un grupo de páginas - o para todas las páginas a través de su sitio. Editar una de sus reglas, y que el cambio se propagarán a todo el sitio tan pronto como usted puede elegir la opción "Archivo

Ahora Eso es poder!

Algunos puntos rápidos otro antes de seguir adelante. En primer lugar, el término "estilo" y el término "regla" se utilizan indistintamente en Dreamweaver y CSS. A veces, Dreamweaver utilizará el término "estilo", y otras veces vamos a usar "la regla". Muchos usuarios se confunden con esto y asumir Dreamweaver está hablando de dos cosas diferentes. No lo es! Estilos y las reglas son la misma cosa.

En segundo lugar, una lista de reglas que se conoce como una hoja de estilo. Las hojas de estilo puede ser ubicado dentro de una determinada página HTML (esto se llama una hoja de estilo interna) o guardado como un archivo separado, fuera de sus páginas (denominado hoja de estilos externa). Hay muchas cosas interesantes que puedes hacer con las hojas de estilo, y hablar de ellos con mucho más detalle en Dreamweaver CS5 101: Core Dreamweaver CS5 .

Ahora que entendemos cómo los estilos de trabajo y tener un sentido de lo que las hojas de estilo se trata, debemos discutir los dos primeros tipos de estilos CSS que podemos trabajar con: redefinir los elementos HTML, y reglas de clase. Cada uno es muy poderoso, y tiene usos específicos. Vamos a echar un vistazo.

Una mirada a redefinido elementos HTML

La dirección que vamos a redefinir los elementos HTML en primer lugar. Este es mi tipo favorito de estilo porque lo que hacen es tomar HTML plano, aburrido y se arrastra desde la edad de piedra en el siglo 21, con sólo unas pocas líneas de código. Y por suerte para nosotros, Dreamweaver va a estar haciendo todo el trabajo pesado, así que si no quiere, no tiene que ver ningún código.

Redefinido con elementos HTML, vamos a estar tomando elementos, HTML aburrida y ponerlos bajo el control de la CSS. Por ejemplo, podemos controlar las tablas, imágenes, títulos, párrafos, y casi cualquier cosa que pueda aparecer en su página. Lo importante a recordar es que cuando volvamos a definir un elemento HTML, estamos controlando todas las apariciones de ese elemento. Por ejemplo, si crea una regla CSS que redefine

, then all
elements on your page are now under the control of your CSS rule. If your redefined
rule resides in an external style sheet, then all tables across your entire site are now all controlled by a single CSS rule.

Tan impresionante como es, no puede ser lo que quieres. ¿Qué pasa si sólo quería el control de una mesa y dejar las otras como lo eran? Ahí es donde las reglas de clase entran en juego. Vamos a entrar en los de sólo un poco. Por ahora, vamos a tratar de crear una rápida redefinición etiqueta HTML.

Aquí se muestra cómo crear una nueva definición de etiquetas HTML:

Paso 1

En la parte inferior del panel Estilos CSS, haga clic en el icono de Nueva regla CSS.

Paso 2

En el cuadro de diálogo Nueva regla CSS que aparece, seleccione la etiqueta (redefine un elemento HTML) en el menú desplegable Tipo de selección desplegable.

Paso 3

En el campo Nombre de selección, escriba el nombre del elemento HTML que desee controlar.

Al escribir en el nombre del elemento, asegúrese de dejar fuera de los paréntesis angulares. En otras palabras, si usted quiere controlar "

," you'd simply type in "table."

En lugar de escribir el nombre del elemento, se puede elegir entre el menú desplegable en el lado derecho del campo de nombre de selector.

Paso 4

En el menú desplegable Regla definición en la parte inferior del cuadro de diálogo, elija si desea guardar la nueva regla en una hoja de estilo interna (Sólo este documento) o una hoja de estilo externa (Nuevo archivo de hoja de estilo). O, si ya tiene una hoja de estilo externo conectado a su página, puede optar por guardarlo allí seleccionando su nombre.

Haga clic en Aceptar.

Paso 5

In the CSS Rule Definition dialog box that appears, begin applying the CSS formatting that you'd like to use for your new rule.


For example, if you're redefining a table, you may want to apply a background color, a font, margin settings, and so on. As you're working, click Apply in the CSS Rule Definition dialog box to preview your page. Any elements on your page that you've redefined using CSS will update.

Paso 6

Cuando haya terminado, haga clic en Aceptar.

Cuando haya terminado de crear su redefinido elemento HTML, todas las apariciones del elemento HTML en la página llevan ahora el formato que se establece en el cuadro de diálogo Definición de regla CSS. No hay necesidad de aplicar el formato a cualquier cosa, porque usted es la redefinición de algo que ya está siendo utilizado. No sólo eso, sino que debe ir hacia atrás y insertar este elemento HTML en su página en algún punto del camino, sino que también se encuentran bajo el control de la CSS. Es una manera muy potente y muy eficiente para trabajar.

Aunque esto es sólo una breve introducción al trabajo con redefinido los elementos HTML, con suerte se puede ver por qué son una parte tan importante de una caja de herramientas de diseño web. Son muy fáciles de trabajar, también. Sólo el violín un poco con ellos en Dreamweaver durante 10-20 minutos y estoy seguro de que será al día con ellos.

Ahora, estoy ansioso por continuar nuestra mirada a la CSS en Dreamweaver y la discusión sobre los dos tipos de reglas principal, para que me acompañen en la Parte 2, donde vamos a echar un vistazo a trabajar con las reglas de clase. Nos vemos allí!

No puedo esperar para la parte 2? Usted no tiene que hacerlo! Echa un vistazo a este tutorial de Dreamweaver, mientras tanto, con tutoriales más avanzados muy pronto!

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: