• Tweet
• Email

• Tweet
• Email

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.

• Guia Dreamweaver – Como Começar? (Parte I)
• Guia Dreamweaver – Como Começar? (Parte II)
• Guia Dreamweaver – Como Começar? (Parte III)
• Guia Dreamweaver – Como Começar? (Parte IV)
• Guia Dreamweaver – Trabalhando com Tabelas (Parte V)
• Guia Dreamweaver – CSS Avançado (Parte VI)
• Guia Dreamweaver – Gestão de Estilos CSS (Parte VII)
• Guia Dreamweaver – Layout de Páginas (Parte VIII)
• Guia Dreamweaver – Posicionamentos de Conteúdos (Parte IX)

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:

• Programação CSS para iniciantes (Parte I)
• Programação CSS para iniciantes (Parte II)
• Programação CSS para iniciantes (Parte III)
• Programação CSS para iniciantes (Parte IV)
• Programação CSS para iniciantes (Parte V)
• Programação CSS para iniciantes (Parte VI)
• Programação CSS para iniciantes (Parte VII)
• Programação CSS para iniciantes (Parte VIII)
• Programação CSS para iniciantes (Parte IX)
• Programação CSS para iniciantes (Parte X)
• Programação CSS para iniciantes (Parte XI)
• Programação CSS para iniciantes (Parte XII)
• Programação CSS para iniciantes (Parte XIII)
• Programação CSS para iniciantes (Parte XIV)

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:

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

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:

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:

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:

Arrastamos o conteúdo:

CSS final, atualizado automaticamente:

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:

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

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:

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

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:

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