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

4. GESTÃO DE ESTILOS

Antigamente, quando CSS surgiu e começou a ser suportado pelos navegadores, os web designers simplesmente criavam uma lista de estilos para formatar os cabeçalhos e o texto, quer isto dizer que manter o controlo dos estilos aplicados num website não era difícil. Nos dias de hoje, com a quantidade massiva de código CSS, estilos e marcação que é utilizada, tornando cada vez mais o CSS uma referência em qualquer website, é bastante comum encontrarmos folhas de estilo com centenas de estilos diferentes.

Adobe Dreamweaver CS5

Uma das práticas que aconselhamos desde já, é ao invés de ter apenas uma folha de estilo enorme, dividi-la em várias pequenas. Isto tem várias vantagens, tornam-se mais leves, mais fáceis de ler e editar e tornam o processo mais rápido. Actualmente uma das melhores práticas que é aplicada é separar os estilos por áreas – por ex. ter uma folha de estilos para a formatação de texto, ter outra para o layout das páginas e ter outra para algo mais que não se enquadre nestas duas áreas. Depois poderá linkar cada uma delas às páginas onde for necessária a sua “presença”.

Na imagem abaixo poderá verificar a existência de 3 folhas de estilo, 1 interna e duas externas:
Adobe Dreamweaver CS5

Ainda que você não tenha uma quantidade significativa de estilos que justifique a criação de várias folhas de estilo, você pode e deve organizar os estilos dentro da própria folha de estilos, criando secções que contêm estilos relacionados. Então aquilo que sugerimos é que você mantenha os estilos básicos da página numa secção, selectores básicos em outra secção e numa outra secção manter os estilos específicos relacionados com imagens ou outro tipo de conteúdo que não se encaixe nas secções anteriores. Você enquanto faz o trabalho, enquanto desenvolve os estilos, está a manter a sua organização, o que lhe permitirá no futuro (em caso de necessidade) alterar o código facilmente sem perder tempo útil à procura de estilos numa imensidão de código. Na imagem abaixo poderá confirmar que é possível mover os estilos de uma folha de estilos para outra, neste caso de uma folha de estilos interna para uma externa, mantendo as regras de estilização relativas aos cabeçalhos todos na mesma folha de estilos (Esta situação foi criada meramente para efeitos de teste!):

Movimentação:

Adobe Dreamweaver CS5

Resultado Final:

Adobe Dreamweaver CS5

Note que apenas irá conseguir ver todos os estilos de uma folha de estilos quando seleccionar o botão “Tudo” no painel de gestão de estilos em Adobe Dreamweaver
Adobe Dreamweaver CS5

E eis que chegamos ao cerne da questão: A gestão de estilos em Adobe Dreamweaver. Este aplicativo fornece um método lógico e eficaz para manusear os estilos, permitindo inclusivamente mover estilos de uma folha de estilos para outra.

Para mover um estilo de um local para outro dentro da mesma folha de estilos, arraste o estilo no painel de estilos CSS. Adobe Dreamweaver lista os estilos pela ordem em que aparecem no código, isto significa que arrastando um estilo abaixo para baixo de outro, irá reposicioná-lo no código dentro da folha de estilos. É possível selecionar e mover mais de um estilo de cada vez, utilizando o shortcut CTRL+Clique do rato que irá seleccionar os elementos que você quiser mover, e de seguida arraste o grupo de estilos que seleccionou para os reposicionar.

Adobe Dreamweaver CS5

Para mover um estilo entre duas folhas de estilos, arraste o estilo de uma folha de estilo para outra através do painel de estilos CSS em Adobe Dreamweaver. Isto funciona tanto para mover um estilo a partir de uma folha de estilo interna para uma folha de estilo externa, ou para mover um estilo a partir de uma folha de estilo externa para outra externa. Imaginando que você criou uma folha de estilos interna para a página actual e anexou também uma folha de estilos externas à mesma página. Se você mover estilos entre as folhas de estilos, adobe Dreamweaver faz a correcta transição entre as folhas de estilos, sejam internas ou externas.

Adobe Dreamweaver CS5

No meio de tantos estilos e várias folhas de estilo, podendo mesmo ser internas ou externas, você pode encontrar alguma dificuldade em manter a orientação. No entanto isto não será problema, pois mesmo que você arraste um estilo para uma folha de estilos onde esse estilo já exista (mesmo que tenha propriedades diferentes) Adobe Dreamweaver consegue perceber que já existe esse estilo e irá avisá-lo que está a tentar criar um estilo que já existe com o mesmo nome. Assim com a notificação dada pelo programa você tem duas opções: Ou cancela a cópia do estilo e o programa não faz nada, ou você decide continuar a o programa move o estilo para a folha de estilos de destino. Tenha em atenção que o programa não irá substituir o estilo existente, nem tão pouco irá fundir os dois estilos em um só – irá ficar com 2 regras de estilo para o mesmo elemento. Isto não é aconselhável, portanto se chegar a esta situação aconselhamos que faça manualmente o estilo que pretende, e não crie dois estilos na mesma folha de estilos.

De acordo com o que é conhecido, Dreamweaver afirma que irá colocar o estilo de forma adjacente ao estilo com o nome que já existe quando se estão a mover estilos para um local onde já existam, mas a verdade é que não o faz – o estilo irá ficar onde você o largar, e não adjacente ao estilo existente com o mesmo nome.

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