Dreaweaver é um programa completo para o desenvolvimento e gestão de websites, que trabalha com tecnologias como HTMLXHTMLCSSJavascriptPHP, entre outros. Um detalhe importantíssimo que Dreamweaver tem, é que se você começou a fazer o seu website em um outro programa qualquer, não terá de começar de novo se pretender mudar para Dreamweaver – O programa não irá destruir/alterar o código que você criou! Nesta quinta parte do Guia Dreamweaver, vamos-lhe mostrar como perceber e trabalhar com tabelas dentro desta aplicação. Está pronto para começar?

Na parte VI deste Guia Dreamweaver vamos-lhe mostrar como tirar partido das funcionalidades para a utilização de CSS no Adobe Dreamweaver. As técnicas e métodos que lhe vamos apresentar neste capítulo permitir-lhe-ão ser um perito no web design, juntamente com as funcionalidades oferecidas pela ferramenta da Adobe que o vão tornar um profissional eficiente e competente.

Adobe Dreamweaver CS5

É relativamente fácil utilizar selectores CSS como tag, class e ID. Os selectores são como instruções que dizem aos navegadores quais as regras de estilização que devem ser aplicadas, e onde devem ser aplicadas. Por exemplo, um selector tag informa o navegador para aplicar a estilização a qualquer instância “tag” na página. Assim a título de exemplo, o navegador irá aplicar a regra de estilização definida para <h1> a todos os <h1> presentes na página. Por outro lado, são aplicados os selectores por “class” quando o nome de uma classe está agregada a um elemento de uma página. Assim, os navegadores aplicarão os estilos de um selector ID a uma tag com o nome correspondente. Tag, class e ID são apenas 3 dos muitos selectores existentes em CSS, e se está realmente interessado em aprender esta matéria, sugerimos uma leitura cuidada aos nossos artigos:

1. DESCENDENT SELECTORS

Enquanto que uma estilização para a tag <p> executa a estilização para todos os parágrafos existentes na página, você pode não querer fazê-lo. Imaginemos que no seu blog tem uma barra lateral e a área de conteúdo, e na sidebar quer que o tamanho do texto seja menor. Ao alterar a estilização da tag <p> e diminuir o tamanho do texto, este será alterado também na área de conteúdos do seu blog. A primeira ideia que certamente lhe surgirá é criar duas classes diferentes para aplicar estilos diferentes à mesma tag, como <p class=”conteudo”> e <p class=”barralateral”>, mas e se lhe dissermos que pode poupar tempo e evitar fazê-lo? Aquilo que procura é uma tag “inteligente” que aplique a estilização adequada dependendo da localização na página – isto são os descendent selectors. Em termos básicos, você utiliza os descendent selectors para estilizar qualquer tag de uma maneira idêntica, tal como os selectores por tag, mas desta feita a estilização irá ser feita de acordo com a localização na página. Esta diferenciação é feita de acordo com a relação existente com outras tags no documento.

Abra a ferramenta de criação de novo estilo CSS no Adobe Dreamweaver:

Guia Dreamweaver - CSS Avançado (Parte V)

E de seguida faça alguns testes para perceber como funciona realmente a diferenciação e como é feita a relação entre as tags:

Guia Dreamweaver - CSS Avançado (Parte V)

Note que alterámos o tipo de selector para Composição (com base na sua selecção) e no nome do selector introduzimos algumas tags para testarmos a ferramenta. Mais abaixo podemos confirmar que os estilos daquele selector irão ser aplicados a todos os elementos <a> que estejam dentro de qualquer tag <li>, <ul> ou <body>. Desta forma você poderá poupar imenso tempo evitando criar classes desnecessáriamente para aplicar a estilização em certas áreas dos seus documentos.

Uma particularidade desta ferramenta prende-se com o facto de que se você estiver seleccionado no documento. Imagine que tem uma frase seleccionada no documento e abre esta ferramenta: a ferramenta irá sugerir-lhe um descendent selector para você utilizar. Extremamente útil!

2. ESTILIZAR GRUPOS DE TAGS

Por vezes existe a necessidade de aplicar a mesma estilização a diferentes elementos no documento. Imaginemos que você quer aplicar a mesma estilização aos cabeçalhos existentes nos documentos, utilizando o mesmo tipo de letra e cor. Criar uma regra de estilização para todos os cabeçalhos é trabalho desnecessário e em vão, e além disso se mais tarde você quiser alterar o estilo dos cabeçalhos, teria de os alterar todos um a um. Então utilizamos a estilização por grupos de tags, que permite aplicar a mesma estilização a diferentes tags, ao longo dos documentos. Para criar uma regra de estilização, siga os passos utilizados para criar uma nova regra de estilização utilizados no ponto 1. deste artigo, e de seguida no campo Nome do selector, insira os cabeçalhos que deseja estilizar:

Guia Dreamweaver - CSS Avançado (Parte VI)

A partir deste ponto você terá um selector para estilizar todos os cabeçalhos do seu website, em apenas um sítio, evitando trabalho desnecessário de criar múltiplas regras de estilo iguais, para elementos diferentes.

3. EDIÇÃO RÁPIDA DE ESTILOS

A janela de criação de regras de estilo pode por um lado ser um método chato de criar e editar estilos, embora seja fácil de utilizar, mas por outro lado oferece a possibilidade de termos acesso ás propriedades das regras de estilo num só sitio. Aqui, você tem acesso ás propriedades do elemento seleccionado, bem como uma lista de outras propriedades que nada têm a ver com CSS,

Guia Dreamweaver - CSS Avançado (Parte VI)

Para editar uma propriedade de um elemento basta seleccioná-lo a partir da lista de regras e em baixo alterar, remover ou adicionar propriedades à regra de estilização através dos ícones presentes no fundo da caixa:

Guia Dreamweaver - CSS Avançado (Parte VI)

No entanto esta funcionalidade do Adobe Dreamweaver nao cobre todas as propriedades CSS, que para os utilizadores avançados é uma necessidade. Ainda assim, certamente que quem necessita de ir ao background introduzir regras de estilização CSS à mão no ficheiro de estilos irá reconhecer esta funcionalidade muito útil e interessante, pois é capaz de poupar imenso tempo e trabalho durante a criação de um website inteiro. Assim podemos concluir que Adobe Dreamweaver prova ser cada vez mais uma ferramenta completa para todos os utilizadores, sejam eles novatos ou experientes na área. Para os novatos a introdução a esta ferramenta pode ser um pouco confusa, mas com o tempo e com a prática todos podem tirar todo o proveito das funcionalidades oferecidas por Adobe Dreamweaver!

ESTÁ A ACOMPANHAR?

Não perca a continuação deste artigo, deixe o seu feedback com um comentário, subscreva a nossa newsletter gratuita e receba os próximos conteúdos diretamente na sua caixa de email.

Abraço e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Gilmar Coimbra
    29 de maio de 2012

    Parabéns, uma vez mais, pelas excelentes postagens!
    (Tinha fechado todas as guias dos tutorais, mas fiz questão de abri-las novamente para agradecer-te).

    Não vi referência de um possível livro teu, sobre o DreamWeaver, existe? Se existir, quero comprar um!

    Obrigado.


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz