Guia Dreamweaver - Posicionamentos de Conteúdos (Parte IX) | Criatividade, Tutoriais Photoshop e Templates

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 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 VIII deste Guia Dreamweaver vamos fazer a introdução ao layout de páginas web 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.

Guia Dreamweaver - Layout de Páginas (Parte VIII)

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. POSICIONAMENTO ABSOLUTO

Além das técnicas de posicionamento flutuante, a outra grande técnica utilizada em CSS para o posicionamento de elementos numa página web é o posicionamento absoluto. Esta técnica permite-lhe determinar a posição especifica para qualquer elemento dentro de um documento web. Mas não se deixe enganar por esta aparente facilidade em colocar os elementos no seu lugar, há um aspecto que tem de ser levado em conta e que é extremamente importante, a web está inserida num ambiente em que a fluidez, a flexibilidade dos websites estão na ordem do dia e é extremamente difícil ter um controle sobre a posição dos elementos ao nível do pixel.

Se um visitante do seu website aumentar o tipo de letra essa alteração já irá destruir o seu layout por completo se este não for flexível. Esta ressalva não quer dizer que você não deva utilizar o posicionamento absoluto, pois este é o melhor método para posicionar alguns elementos nas páginas web, como conjuntos de linkes, o logo, ou sobrepor um elemento a outro.

2. TIPOS DE POSICIONAMENTO DE CONTEÚDO

Existem várias propriedades CSS relativas ao posicionamento de elementos no documento, que poderão ser encontradas no separadoor Posicionamento na janela de Definição de Estilos CSS.

Por defeito, a apresentação dos elementos de uma página web é feita de acordo com a ordem em que estão inseridas no código HTML. O primeiro elemento aparece no topo da página, o último aparecerá no fundo da página.

Posicionamento absoluto

Guia Dreamweaver - Posicionamentos de Conteúdos (Parte IX)

O posicionamento absoluto é a opção mais utilizada pelos webdesigners, permitindo-lhe posicionar uma tag em qualquer lugar do seu documento. Com o posicionamento absoluto, você pode posicionar qualquer elemento HTML do seu documento em qualquer lugar no mesmo documento, pois o seu posicionamento no código em nada irá afetar a posição do mesmo no documento. Para os restantes elementos do documento, um elemento que esteja com posicionamento absoluto nem é tido em conta pelos restantes elementos no que toca ao layout.

Experimente aplicar este posicionamento a um elemento e observe o seu resultado. Faça isso com todos os posicionamentos e tire as suas próprias conclusões, pratique!

Posicionamento Relativo

Guia Dreamweaver - Posicionamentos de Conteúdos (Parte IX)

O posicionamento relativo permite-lhe determinar a posição de um elemento relativamente à sua posição no código. Quer isto dizer que quando você determina que um elemento terá o posicionamento relativo, esse posicionamento é feito relativamente ao elemento que está acima dele no código. À primeira vista o posicionamento relativo poderá parecer não ser muito útil, ser banal, mas a verdade é que dá imenso jeito quando se pretende posicionar elementos de acordo com a sua natureza e ligação a outros elementos da página, mantendo-os juntos e com o layout estilizado de acordo com o necessário.

Experimente aplicar este posicionamento a um elemento e observe o seu resultado. Faça isso com todos os posicionamentos e tire as suas próprias conclusões, pratique!

Posicionamento Estático

Guia Dreamweaver - Posicionamentos de Conteúdos (Parte IX)

O posicionamento estático é o posicionamento por defeito em HTML. Isto significa que os elementos que estiverem com o posicionamento estático irão ser posicionados de acordo com a ordem em que aparecem no código HTML. você provavelmente estará a perguntar: se é o posicionamento por defeito, quando é que eu vou atribuir o posicionamento estático a um elemento? Provavelmente nunca. Mas é sempre bom saber o que é que faz o quê, e ficar a saber o que é o posicionamento estático.

Experimente aplicar este posicionamento a um elemento e observe o seu resultado. Faça isso com todos os posicionamentos e tire as suas próprias conclusões, pratique!

Posicionamento Fixo

Guia Dreamweaver - Posicionamentos de Conteúdos (Parte IX)

O posicionamento fixo é semelhante ao valor “fixed” utilizado na propriedade attachment que é utilizada para fixar uma imagem de fundo num determinado local. Imagine que quer que um elemento fique fixo no navegador enquanto o visitante faz scroll pela página, este é o seu posicionamento. Você pode utilizar isto de variadíssimas formas para melhorar a usabilidade do seu website e melhorar a interatividade entre o visitante e o seu website, basta dar asas à imaginação.

Experimente aplicar este posicionamento a um elemento e observe o seu resultado. Faça isso com todos os posicionamentos e tire as suas próprias conclusões, pratique!

No próximo artigo iremos terminar o capitulo dos posicionamentos, dando por terminado este capítulo. Não perca!

Abraço!