All Articles Dreamweaver
Aprendizagem CSS no Dreamweaver Parte Tutorial 1: Elementos HTML Redefined
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 trabalhar com CSS é absolutamente crítico para a construção de websites contemporânea. É uma daquelas coisas que nós, como designers, tem que sentar e aprender em algum ponto. E mesmo depois de dominar os fundamentos, ainda há espaço para crescer e expandir. Você pode aprender sobre novas propriedades ou como conseguir resultados específicos, e você pode descobrir técnicas para manter seu CSS como "magra n significa possível.

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.

Entendendo como estilos de trabalho

Primeiro, tenho de lhe perguntar, você sabe sobre estilos em algumas de suas outras aplicações? InDesign tem estilos, Illustrator tem estilos ... heck, mesmo o Microsoft Word tem estilos. Um estilo é simplesmente uma coleção de opções de formatação. Por exemplo, poderíamos ter um estilo chamado "ênfase", e dentro de ênfase que nós definimos uma fonte, um tamanho e uma cor. Neste ponto, podemos começar a aplicar toda a nossa ênfase documento, e, claro, onde sempre usamos, nós vamos chegar a mesma fonte, tamanho e cor a ser usada. Se voltarmos e fazer uma mudança para o estilo Ênfase original, em seguida, a formatação irá atualizar instantaneamente onde sempre tem sido utilizado em nosso documento.

Isto é como estilos tradicionalmente trabalho. No entanto, CSS leva ainda mais esta idéia. Ao invés de trabalhar com estilos em apenas uma página, com CSS você pode aplicar o seu conjunto de regras para um grupo de páginas - ou a todas as páginas no seu site. Editar uma de suas regras, e que a mudança vai ripple em todo o site tão rápido quanto você pode escolher "File

Agora que é poder!

Alguns outros pontos rápida antes de seguir em frente. Primeiro, o "estilo" e as "regra" prazo são usados ​​como sinônimos no Dreamweaver e CSS. Às vezes, o Dreamweaver irá usar o "estilo", termo e outras vezes ele vai usar "regra". Muitos novos usuários se confundem com isso e assumir Dreamweaver está falando sobre duas coisas diferentes. Não é! Estilos e regras são a mesma coisa.

Segundo, uma lista de regras é referido como uma folha de estilo. Folhas de estilo pode ser localizado dentro de uma página HTML específicos (isto é chamado uma folha de estilo interna) ou salva como um arquivo separado, fora de suas páginas (chamados de uma folha de estilo externa). Há muitas coisas legais que você pode fazer com folhas de estilo, e falar sobre eles com muito mais detalhe no Dreamweaver CS5 101: Core Dreamweaver CS5 .

Agora que entendemos como os estilos de trabalho e ter uma noção do que folhas de estilo são tudo, devemos discutir os dois principais tipos de estilos CSS podemos trabalhar com: redefiniu elementos HTML, e regras da classe. Cada um é muito poderoso, e tem usos específicos. Vamos dar uma olhada.

A Look At Redefined Elementos HTML

Endereço vamos redefiniu elementos HTML primeiro. Este é o meu tipo favorito de estilo porque o que eles fazem é pegar HTML, aborrecido e arraste-o da idade da pedra até o século 21 com apenas algumas linhas de código. E felizmente para nós, o Dreamweaver vai estar fazendo todo o trabalho pesado, por isso, se nós não queremos, não temos de ver qualquer código.

Com redefiniu elementos HTML, vamos tomar simples, chato elementos HTML e colocá-los sob o controle de CSS. Por exemplo, poderíamos controlar tabelas, imagens, cabeçalhos, parágrafos, e praticamente qualquer outra coisa que podem aparecer na sua página. O que é importante a lembrar é que quando nós redefinir um elemento HTML, estamos controlando todas as ocorrências desse elemento. Por exemplo, se você criar uma regra 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.

Tão impressionante que seja, pode não ser o que quiser. E se você só queria controlar uma tabela e deixar os outros como eles foram? É aí que as regras da classe entram em jogo. Nós vamos entrar aqueles em apenas um bocado. Por agora, vamos tentar criar um rápido redefiniu tag HTML.

Aqui está Como criar um Redefined Tag HTML:

Passo 1

Na parte inferior do painel Estilos CSS, clique no ícone Nova regra CSS.

Passo 2

Na caixa de diálogo Nova regra CSS que aparece, escolha Tag (Redefine Um elemento HTML) no menu drop down menu Tipo Selector.

Passo 3

No campo Nome do Selector, digite o nome do elemento HTML que você deseja controlar.

Quando você digita o nome do elemento, não se esqueça de deixar de fora os colchetes angulares. Em outras palavras, se você queria controlar "

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

Ao invés de digitar o nome do elemento, você pode escolher a partir do menu fly-out no lado direito do campo Nome Selector.

Passo 4

No menu suspenso Definição de regra na parte inferior da caixa de diálogo, escolha se você gostaria de salvar a sua nova regra em uma folha de estilo interna (Este documento só) ou uma folha de estilo externa (File New Style Sheet). Ou, se você já tiver uma folha de estilo externo conectado a sua página, você pode optar por guardá-lo lá por escolha de seu nome.

Clique em OK.

Passo 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.

Passo 6

Quando estiver pronto, clique em OK.

Quando você terminar de criar o seu redefiniu elemento HTML, todas as ocorrências do elemento HTML em sua página agora proceder a formatação que você definir na caixa de diálogo Definição de regra CSS. Não há necessidade de aplicar a formatação a nada, porque você está redefinindo algo que já está sendo usado. Não só isso, mas você deve ir para trás e inserir este elemento HTML em sua página em algum ponto abaixo da estrada, que também irá estar sob o controle do seu CSS. É uma maneira muito poderosa e muito eficiente para o trabalho.

Embora esta seja apenas uma breve introdução ao trabalho com redefiniu elementos HTML, espero que você pode ver por que eles são uma parte tão importante da caixa de ferramentas é um web designer. Eles são muito fáceis de trabalhar, também. Basta mexer um pouco com eles no Dreamweaver por 10-20 minutos e tenho certeza que você vai ser até a velocidade com eles.

Agora, estou ansioso para continuar o nosso olhar para CSS no Dreamweaver e essa discussão sobre os dois tipos de regra principal, para se juntar a mim na Parte 2, onde nós vamos dar uma olhada no trabalho com regras da classe. Vemo-nos lá!

Não pode esperar para a parte 2? Você não precisa! Confira este tutorial Dreamweaver, entretanto, com tutoriais mais avançados em breve!

Related Videos
Comments (0)

You must be logged in to comment.

Studio Series - Recording Vocals
Logic Pro X 502
Dream It. Do It.
Do you want to learn Studio Series - Recording Vocals?
Yes, I want to learn!
No Thanks, I just want to read the article.
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: