Dreaweaver é um programa completo para o desenvolvimento e gestão de websites, que trabalha com tecnologias como HTML, CSS, Javascript e PHP, 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 décima parte do Guia Dreamweaver, vamos-lhe mostrar como introduzir divs com posicionamento absoluto dentro desta aplicação. Está pronto para começar?

Na parte X deste Guia Dreamweaver vamos fazer a introdução de div’s com posicionamento absoluto e mostrar-lhe como tirar partido das funcionalidades de Adobe Dreamweaver para realizar as tarefas necessárias. 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

Muitos dirão “infelizmente” o web design não se pode comparar com outros tipos de design gráfico. Por exemplo, para revistas e livros, existe software como o InDesign que permite colocar textos e imagens exatamente onde quiser, tendo ainda a liberdade de os poder mover de sítio quando quiser. Os Web Designers estão agarrados à tecnologia HTML que basicamente funciona a partir do topo para baixo, como uma longa coluna. Para colocar os conteúdos onde se pretendia, os web designers utilizavam as tabelas para criar um layout e controlar a localização dos elementos das páginas. Esta não é a melhor prática existente atualmente, e estamos obviamente a falar de CSS.

Atualmente os navegadores como Internet Explorer, Mozilla Firefox, Google Chrome, Safari ou Opera dominam o mercado e estão em conformidade com a utilização dos mais recentes avanços no mundo CSS, dando assim a possibilidade aos web designers de poderem criar os seus layouts de páginas através de uma folha de estilos em cascata, conhecidas como CSS (Cascade Styling Sheets). Se achava que CSS era apenas para formatação de texto, ou imagens, está enganado – CSS permite a criação de designs sofisticados e brilhantes, que facilitam a usabilidade e tornam as suas páginas mais rápidas que nunca.

CSS faculta dois métodos para fazer o layout de uma página, o posicionamento absoluto e o flutuante. O posicionamento absoluto permite-lhe posicionar um elemento em qualquer parte do documento, controlando a sua posição ao máximo, ao nível dos pixeis. Este tipo de controle é fantástico, mas bastante dificil de se alcançar os 100% de pontaria na hora de colocar os elementos num determinado local. É por isto que a grande maioria das páginas web hoje em dia utilizam o posicionamento flutuante, um método que permite criar layouts incríveis que chamarão a atenção dos seus visitantes. Se gostaria de aprender mais sobre CSS, aconselhamos uma leitura cuidada aos nossos tutoriais sobre CSS:

1. ADICIONAR UMA DIV COM POSICIONAMENTO ABSOLUTO

Na grande maioria dos casos você irá utilizar uma div que têm uma variedade de elementos HTML, nomeadamente imagens, paragrafos, cabeçalhos e por aí adiante. A título de exemplo, para posicionaruma série de links no topo de uma página, você poderá inseri-los dentro de uma div com uma determinada tag e posicionar essa div de acordo com o que pretender. Adobe Dreamweaver fornece-lhe vários métodos de posicionamento de contéudos de forma absoluta. Pode inserir uma tag no conteúdo, bastando para isso seleccionar conteúdo, ir ao menu Inserir -> Objectos de Layout e de seguida clicas em Tag Div:

Guia Dreamweaver – Posicionamentos de Conteúdos (Parte X)

De seguida irá ser apresentada uma janela onde irá definir alguns elementos:

Guia Dreamweaver – Posicionamentos de Conteúdos (Parte X)

Além desta possibilidade, poderá também utilizar uma DIV de posicionamento absoluto direta, através do menu Inserir -> Objectos de Layout e clicando de seguida em AP DIV:

Guia Dreamweaver – Posicionamentos de Conteúdos (Parte X)

Ao aplicar esta técnica a um conteúdo seleccionado, o conteúdo será automaticamente posicionado de forma absoluta dentro do documento e ser-lhe-á atribuido um id automaticamente, que neste caso foi “apDiv1″. Além disso, será introduzido dentro da tag <head> do documento o CSS relativo à estilização da div, contando obviamente com o position:absolute:

Guia Dreamweaver – Posicionamentos de Conteúdos (Parte X)

Guia Dreamweaver – Posicionamentos de Conteúdos (Parte X)

Estas são as técnicas mais comuns e utilizadas mais frequentemente por aqueles que gostam de utilizar o editor visual do aplicativo, e não somente o editor de código. Devido ao seu posicionamento, Adobe Dreamweaver permite que você arraste a div para onde você pretender e as suas propriedades CSS serão automaticamente atualizadas de acordo com o posicionamento da div:

CSS original:

Guia Dreamweaver – Posicionamentos de Conteúdos (Parte X)

Arrastamos o conteúdo:

Guia Dreamweaver – Posicionamentos de Conteúdos (Parte X)

CSS final, atualizado automaticamente:

Guia Dreamweaver – Posicionamentos de Conteúdos (Parte X)

Além de mover o elemento de sítio, poderá também alterar o seu tamanho, arrastando um dos lados ou um canto na direção que pretender:

Guia Dreamweaver – Posicionamentos de Conteúdos (Parte X)

Mais uma vez, o código CSS irá ser atualizado automaticamente:

Guia Dreamweaver – Posicionamentos de Conteúdos (Parte X)

2. PAINEL DE CONTROLO DE ELEMENTOS POSICIONADOS DE FORMA ABSOLUTA

O painel de controlo de elementos PA é onde você poderá controlar todos os elementos ligados de forma direta ao painel, através do posicionamento absoluto. Para aceder a este painel clique em Janela -> Elementos PA ou simplesmente clique em F2:

Guia Dreamweaver – Posicionamentos de Conteúdos (Parte X)

De seguida no painel irá aparecer o painel de controlo dos elementos PA:

Guia Dreamweaver – Posicionamentos de Conteúdos (Parte X)

Aqui poderá aceder a todos os elementos PA existentes no documento, fazer alterações, alterando o seu nome, o z-index  ou mesmo alterar a sua visibilidade.

Além das alterações à própria div, poderá também aceder ás propriedades da mesma (mais uma vez se não utilizar o editor de código e sim o visual) através do painel de controlo de estilos. Aqui terá acesso a todas as id’s e classes utilizados na sua folha de estilos, podendo fazer as alterações necessárias:

Guia Dreamweaver – Posicionamentos de Conteúdos (Parte X)

No próximo artigo iremos fazer um tutorial completo de como criar um layout CSS nesta ferramenta da Adobe, tirando partido de algumas técnicas que temos vindo a abordar nesta série de artigos. Se procura saber como criar um layout em Adobe Dreamweaver, não perca o próximo artigo!

Abraço

 

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
    4 de julho de 2012

    Impossível não vir aqui para agradecer-te pela continuidade da ALTA qualidade de suas postagens.
    Tem que virar EPUB…..rs!
    Comprarei com muito prazer!!!

    Obrigado e cada vez mais sucesso pra ti!



    • Diogo Espinha
      18 de julho de 2012

      Olá Gilmar, obrigado pelas suas palavras, são uma fonte de motivação para continuar a desenvolver o trabalho na Escola Criatividade!

      Abraço!



  2. Wellington
    13 de janeiro de 2013

    Obrigado Professor você é um mestre de didatica, clara direta e inteligente. Demorou mas encontrei Material na web, que realmente nos ensina.
    Um abraço Diogo!



  3. Rodrigo Coutinho
    12 de março de 2013

    NO site mencionado acima (www.expressao.com.br/2013) como faço para as apDivs (layers do menu principal) ficarem sempre no mesmo posicionamento, independente do navegador, resolução e tamanho da tela, uma vez que o layout é centralizado? Veja que há uma pequena diferença no crome (perfeito) e no IE (uns dois pixels para direita), em uma tela de 17 polegadas na resolução 1024 por 768. E também há uma mudança nos dois browsers quando se troca a resolução por exemplo para 800 x 600. Grato pela colaboração!



  4. anjovante
    26 de janeiro de 2015

    Adorei conhecer o vosso site. Viva ai mais forca, aprendo muito convosco. Amo web design.


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