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. LAYOUTS DE PÁGINA

Adobe Dreamweaver fornece alguns layouts CSS pré-definidos que poderá utilizar como guia para criar o seu layout. Este conjunto de layouts contém aqueles que são os layouts mais comuns e mais utilizados no web design, com uma, duas ou três colunas de conteúdo, um cabeçalho para o logótipo e ainda o rodapé – isto é apenas um exemplo.

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

Tenha em atenção que estes layouts pré-definidos não são layouts completos, apenas contêm os elementos chave para criar a base do layout, a disposição dos conteúdos no website, e a boa notícia é que estes layouts já vêm preparados para não terem problemas com qualquer navegador (pelo menos assim o dizem!).

2. TIPOS DE LAYOUTS

Para quem trabalha na área certamente já se sentiu como se estivesse a trabalhar com o desconhecido, sem saber qual o tipo de browser que os visitantes irão utilizar, se terão o flash instalado e atualizado, mas a maior dor de cabeça para os web designers chega na hora de determinar qual o design a utilizar para que seja compatível com pelo menos uma grande parte das resoluções de ecrã utilizadas pelos diversos visitantes.

As dimensões podem variar bastante, desde simples telas de 15″ até telas com 30 ou mais polegadas. Os layouts de posicionamento flutuante oferecem duas soluções para este problema, a largura fixa e o layout fluido. O layout com largura fixa é aquele que oferece maior controle sobre como será o aspecto do design, mas para os visitantes que tiverem um display pequeno, poderá ser um incómodo, uma vez que terão de fazer scroll não só na vertical, como também na horizontal.

Por outro lado, os visitantes que tiverem displays maiores irão ter espaços no seu ecrã sem conteúdo, que poderia muito bem ser aproveitado ao máximo. Pessoalmente penso que os layouts de largura fixa são ainda assim, a melhor opção.

  • Layout de largura fixa: Uma grande parte dos web designers prefere contar com a segurança de definir uma largura para o seu layout, independentemente do tamanho da tela do visitante. Em alguns casos o design é “construído” a partir da esquerda da tela, mas mais frequentemente o design está centrado na tela. Muitos dos designs de largura fixa utilizam uma largura que vai desde os 760px até aos 1000px. No entanto, nos dias de hoje até os pequenos netbooks utilizam uma resolução com 1024 pixeis de largura, pelo que a largura mais utilizada é 960px, sendo conhecido como o sistema de grelha 960, que poderá conhecer melhor aqui http://960.gs/.
    Guia Dreamweaver - Layout de Páginas (Parte VIII)
  • Layout fluido: Como se costuma dizer, normalmente é mais fácil ir com a corrente do que remar contra ela, e um design fluido ajusta-se às dimensões da tela, seja qual for a sua largura. A página irá-se adaptar de acordo com o tamanho da janela do navegador, mesmo que o visitante altere o tamanho, a página irá ser adpatada de acordo com o navegador. No entanto nas telas extremamente grandes, este tipo de designs podem ficar com um aspecto estranho, demasiado largo que não é muito cativante aos olhos dos visitantes.
    Guia Dreamweaver - Layout de Páginas (Parte VIII)

Posto isto, os designs de largura fixa são aqueles que mais são utilizados na web atualmente, pois além de darem segurança no que toca ao display dos conteúdos, tornam muito mais fácil a tarefa dos web designers criarem um layout para uma página web.

3. LAYOUTS FLUTUANTES

Os layouts flutuantes tiram partido da propriedade float em CSS para fazer o posicionamento de elementos lado a lado e criar colunas em uma página. Por exemplo, é possível inserir uma imagem como flutuante e criar um texto envolvendo a imagem. Por outro lado é também uma ferramenta fantástica para fazer a alteração de elementos relacionados com as páginas, movendo-os de um local para outro dentro do mesmo documento. Em termos gerais, a propriedade float pode mover um elemento de um lado para o outro na página, e qualquer elemento HTML que apareça depois dos elementos flutuantes será movido para cima no documento, não obstruíndo o espaço dos elementos flutuantes.

A propriedade float está disponível quando você cria um novo estilo CSS, e está dentro do separador “Caixa”, na caixa de diálogo de definição de estilos CSS (ver imagem abaixo). Se seleccionar a opção left, os elementos seleccionados a estilizar irão estar a flutuar à esquerda, se quiser à direita, escolhe right. A título de exemplo, se pretender inserir uma barra lateral no seu website do lado esquerdo, será ideal definir a property float: left; na barra lateral.

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

A tag <div>

A tag div estará sempre presente, seja qual for o método que utilize para criar as suas páginas web. Com a utilização de CSS, o método mais comum e mais utilizado para fazer a organização do conteúdo é através da utilização da tag <div>, que é um elemento HTML que não herda nenhuma propriedade, que é chamado de uma divisão da página. Basicamente você estará a criar divisões na sua página utilizando a tag <div>.

A utilização da tag deve ser feita com pés e cabeça, você irá utilizar a tag por exemplo para agrupar na mesma divisão um grupo de código HTML que faz parte do mesmo. Por exemplo, é ideal você agrupar dentro de uma div os elementos relacionados com o cabeçalho, em outra div os elementos relacionados com a sidebar, e outra div com os elementos relacionados com a área de conteúdos do site.  (ver imagem abaixo)

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

De salientar que também é possível inserir div’s dentro de div’s, aumentando assim o leque de possibilidades de estilização. Por exemplo, dentro da tag body, normalmente cria-se uma div global, dentro da qual estarão todas as outras div’s e restantes elementos, com isto você poderá aplicar a todo o conteúdo algumas propriedades básicas, aplicando a estilização a essa div global. (Por exemplo, largura da página, margens, etc)

Depois de definidas as tags div, é hora de atribuir um ID ou uma Class a cada uma delas, de forma a que possam ser distinguidas e possamos, através da folha de estilos, atribuir regras de estilização diferentes a cada uma delas. Vamos exemplificar com as 3 div’s que mencionámos acima (cabeçalho, sidebar e area de conteúdos):

Div Cabeçalho:

<div class="header"><a href="#"><img src="teste.png" alt="Inserir o logotipo aqui" name="Insert_logo" width="560" height="90" id="Insert_logo" style="background: #C6D580; display:block;" /></a></div>

 Demos o nome header à Class do cabeçalho. É boa prática utilizar os termos estrangeiros na programação, uma vez que a linguagem universal utilizada é o Inglês, deverá manter isso.

Div Sidebar:

<div class="sidebar">
    <ul class="nav">
      <li><a href="#">Link um</a></li>
      <li><a href="#">Link dois</a></li>
      <li><a href="#">Link três</a></li>
      <li><a href="#">Link quatro</a></li>
    </ul>
    <p> Os links acima demonstram uma estrutura básica de navegação usando uma lista não ordenada com estilo CSS. </p>
</div>

 Como poderá verificar, também atribuímos uma class á div, neste caso sidebar. Na sidebar pode também introduzir texto, imagens, o que quiser.

Div Conteúdos:

<div class="content">
    <h1>Instruções</h1>
    <p>Saiba que o CSS para esses layouts é altamente comentado. Se fizer a maior parte do seu trabalho na visualização Design, olhe o código para obter dicas sobre como trabalhar com o CSS para os layouts fixos. Você pode remover esses comentários, antes de lançar o site. Para saber mais sobre as técnicas usadas nesses layouts de CSS, leia este artigo no Centro do Desenvolvedor da Adobe - <a href=http://www.adobe.com/go/adc_css_layouts"></div>

Esta div tinha muito mais código, mas para simplificar apenas colocámos um heading e um parágrafo. A class atribuída a esta div foi content.

O que fazer agora com as class’s atribuídas às div’s?

Cada div poderá agora ser estilizada individualmente, de acordo com o necessário e com as suas preferências. Uma vez que estamos a utilizar um dos layouts pré-definidos fornecidos pelo Adobe Dreamweaver, vamos dar uma espreitadela no código CSS e observar o que existe.

Cabeçalho:

.header {
	background: #ADB96E;
}

Para o header simplesmente está definida a cor de fundo. Naturalmente, neste exemplo não há muito mais para definir.

Sidebar:

.sidebar1 {
	float: left;
	width: 180px;
	background: #EADCAE;
	padding-bottom: 10px;
}

No caso da sidebar as coias são um pouco diferentes. Tal como referenciamos no segundo parágrafo do ponto 3, a sidebar está com o float: left;. De seguida está definida a sua largura em pixeis, que por exemplo, também poderia estar definida em percentagem % (que neste caso seria cerca de 19%, uma vez que a largura está definida em 960px). O background é o mesmo do cabeçalho, mantendo as cores do website. Tem um padding no fundo que faz com que a sidebar não vá até ao rodapé.

Área de conteúdos:

.content {

	padding: 10px 0;
	width: 780px;
	float: left;
}

A área de conteúdos também tem um float left, encostando assim à sidebar e ocupado o restante espaço da largura do website, fixada em 960px. Apenas com estas 3 div’s você tem um layout de um website praticamente montado e minimamente estilizado.

E VOCÊ, QUAL O TIPO DE LAYOUT QUE PREFERE?

Se você é um web designer, gostaríamos imenso de poder contar com a sua opinião! Diga-nos qual o tipo de layout que prefere, participe no artigo e na comunidade criativa!

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. Almy Fróes
    22 de maio de 2012

    Nossa, ainda me lembro com saudade quando abri o dreamweaver a primeira vez na vida…la por 2004 hehehe



  2. Geraldo Darling
    17 de fevereiro de 2014

    Diogo. Parabéns por todos estes links oferecidos. Sou Designer e professor de Montagem & Manutenção, aqui no Rio de Janeiro. Estou montando um DVD no Dreamweaver CS3, e estou em dificultada de manter as minhas tabelas sempre com o mesmo layout. Razão esta que pesquisei na Internet sobre Layout no Dreamweaver. Comecei pesquisando a sua matéria, fui me aprofundando com seu links disponibilizados e quando dei por conta, já tinha mais de duzentas páginas. RESOLVI MONTAR UM ÚNICO ARQUIVO, todo diagramado, paginado com todas as sua imagens capturadas manipuladas em Photoshop e outros. REULTADO, FICOU LINDO, principalmente com a inserção de um Sumário Eletrônico. Tenho 72 anos, estou desempregado, pela idade. Sou professor de informática. Eu gostrai de lhe enviar, já que o artigo é seu para você ver como ficou bem diagramado. MAIS UMA VEZ, PARABÉNS. Atenciosamente, Geraldo Darling


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