Ao longo da evolução dos últimos anos, o Dreamweaver tem acompanhado o ritmo e tem-se actualizado de acordo com as necessidades actuais. De momento estamos a par com a versão CS5 do Adobe Dreamweaver, e esta versão não fugiu à regra, incluindo novas funcionalidades que irão tornar o desenvolvimento de websites uma tarefa menos complicada. Dreaweaver é um programa completo para o desenvolvimento e gestão de websites, que trabalha com tecnologias como HTML, XHTML, CSS, Javascipt e PHP, entre outros.

Nesta segunda parte do Guia Dreamweaver, vamos-lhe continuar a mostrar como dar os primeiros passos na criação da sua página web. Está pronto? Vamos a isso!

Endereço de Email:

 

Se tiver alguma dúvida, pode consultar os seguintes artigos:

Adobe Dreamweaver CS5

1. COMO ADICIONAR TEXTO AO SEU DOCUMENTO

Uma página web é considerada um documento, e é assim que vamos chamar a cada página que vamos criar – um documento. Para adicionar texto a um documento o processo é bastante simples – No modo Design basta clicar com o cursor onde quer escrever e começar a escrever.

Para formatar o texto adequadamente, poderá utilizar o menu Formatar que se encontra na barra de menus.

Vamos efectuar uma formatação ao título que está seleccionado, criando uma nova classe. Para isso aceda em Formatar -> Estilos CSS -> Novo

Aqui iremos primeiro dar o nome ao nosso selector e de seguida iremos definir as opções de formatação. Para efeitos de demonstração, demos o nome “nome_do_selector”, sinta-se livre para dar um nome ao seu gosto. Clique em OK para continuar.

Agora iremos definir as opções de formatação da classe recém criada “nome_do_selector”. As opções seleccionadas e/ou inseridas foram ao nosso gosto, sinta-se livre para definir as suas próprias opções e explore o programa!

  • Tipo de letra: Arial
  • Tamanho: 24px
  • Estilo: Normal
  • Negrito
  • Transformação: Maiúsculas
  • Cor: Vermelho

Seleccione o texto a aplicar a classe e seleccione a classe no menu de Propriedades.

E o resultado, como esperado!

Este é um processo bastante simples, mas a longo termo e com a criação de vários documentos, com vários estilos você iria ficar perdido no meio de tanta formatação. Então é aqui que entram as folhas de estilo, mais conhecidas como CSS – Cascading Style Sheets. Não se aflija, a criação de uma folha de estilos é simples e poupar-lhe-à imensas dores de cabeça, além de lhe poupar tempo. Como diz o ditado “De pequenino se torce o pepino”, então porque não começar a utilizar as folhas de estilo desde o início?

2. COMO CRIAR UMA FOLHA DE ESTILOS

Como referimos, a criação de uma folha de estilos é um processo simples, quando comparado com a confusão que iria criar ao não criar uma folha de estilos para o ajudar. O primeiro passo é criar um novo documento CSS.

Guarde o documento na pasta do seu website como “style.css”. Depois de criado e guardado, é altura de ligar os documentos. Isso pode ser feito manualmente ou automaticamente. Para fazer manualmente insira o seguinte código dentro da tag <head>:

<link href="style.css" rel="stylesheet" type="text/css" />

Para fazer automaticamente, no painel CSS que se encontra do lado direito da aplicação Adobe Dreamweaver clique com o botão do lado direito e de seguida clique em “Anexar folha de estilos”.

De seguida, clique em procurar, seleccione o ficheiro style.css e clique em OK e novamente OK.

Agora pode verificar que os documentos já se encontram ligados:

Antes de prosseguirmos, no seu documento index remova a formatação inserida no título. Para isso basta ir ao código e apagar o seguinte excerto:

<style type="text/css">
.nome_do_selector {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	color: #F00;
}
</style>

E apagar o seguinte dentro da tag do título:

class="nome_do_selector"

Agora não existem formatações no nosso documento. É altura de as definirmos na nossa folha de estilos!

NOTA: A partir do momento em que os documentos estão ligados, você tem acesso ao style.css apartir de qualquer documento a que ele esteja ligado. É possível alternar entre o código fonte do documento e o ficheiro de estilização apartir de um menu que fica abaixo dos separadores dos documentos:

3. CRIANDO ESTILOS NA SUA FOLHA DE ESTILOS

Para definir estilos para os elementos do seu documento irá necessitar de efectuar poucas operações. A primeira é saber qual o elemento que irá estilizar, e neste documento iremos estilizar o h1 e o p, relativos ao título e ao texto que estão no nosso documento. Assim, iremos proceder primeiro à estilização do título, e iremos replicar o estilo que aplicámos anteriormente. No seu documento style.css insira o seguinte código:

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	color: #F00;
}

Agora, no seu documento todos os títulos que estiverem com a tag h1 irão ser formatados de acordo com o especificado na sua folha de estilos – Imagine que em todo o seu website tem 30 títulos h1, utilizando uma folha de estilos só necessitou de especificar a estilização 1vez, de outra forma teria de o fazer 30 vezes, fácil não é?

Adobe Dreamweaver inclusive lhe dá a indicação de quais os estilos existentes na sua folha de estilos, no painel CSS do lado direito da aplicação. De momento podemos já confirmar que existe uma estilização para a tag h1:

É altura de estilizar o nosso parágrafo. Desta vez vamos utilizar uma classe, para estabelecer isso basta por um ponto “.” a seguir a qualquer elemento. Desta forma você não estará a estilizar todos os elementos, mas sim apenas aqueles que quiser, especificando a classe. Vamos nomear a classe como “principal” e inserir alguns itens de estilização:

p.principal {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#009;
	font-weight:bold;

}

O seu ficheiro style.css deverá estar idêntico ao seguinte:

/* Títulos H1 */
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	color: #F00;
}

/* Parágrafo principal */
p.principal {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#009;
	font-weight:bold;

}

Note que inserimos comentários para organizar o documento. Não utilize em demasia os comentários, pois podem tornar confuso o seu documento!

Agora vamos atribuir a estilização ao nosso parágrafo principal. Para isso seleccione o texto, e no menu Propriedades clique no menu drop-down das Classes e seleccione a classe “principal.

E já está a estilização a funcionar!

Aprendeu os passos necessários para criar uma folha de estilos, ligá-la a documentos, criar estilizações para diferentes elementos e criar classes!

ESTÁ A ACOMPANHAR O GUIA DREAMWEAVER?

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:

Endereço 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. Dany
    22 de agosto de 2011

    Olá, Diogo,

    Eu ouço muito dizer/ e tenho amigos que afirmam com firmeza que o Dreamweaver suja o código e torna a navegação do site mais lenta. Gostaria de saber sua opinião a respeito. Obrigada e Parabéns pelo Site!!!

    Um abraço,
    Dany



    • Diogo Espinha
      22 de agosto de 2011

      Sim é verdade que quando você deixa Dreamweaver criar o código por si é possível que ele adicione algum código que não é necessário, e sendo código não necessário irá estar a ser processado sem necessidade, demorando mais tempo. No entanto, penso que os tempos que estamos a falar não são tão significativos como se pensa, e esses “erros” podem ser facilmente detectados e corrigidos pelo programador.
      Aconselho a aprender a programar à mão antes de utilizar um utilitário como Dreamweaver, pois se você souber programar, poderá melhorar o código que Dreamweaver cria. É esta a minha opinião Dany, obrigado pelo seu comentário a este artigo!



      • Dany
        30 de outubro de 2011

        Salve, Diogo! Tenho acompanhado o “GUIA DREAMWEAVER” e adorado ! Muito bem explicado e detalhado, parabéns mesmo.

        Sabe, segui seu conselho e estou lendo sobre xhtml para ter noção do código.

        Mas gostaria de ver o que é o “tal sujar o código” que muitos comentam. Poderia dar um exemplo prático?

        ps: uma ideia para um post o blog: esclarecer essa questão…porque muitos amam DW e outros o odeiam… foi só uma ideia, ok ?

        Abraços! :)
        Dany



  2. Adryelle
    1 de dezembro de 2011

    eu faço web desiner queria saber se dreawer tem como vender paginas feitas por pelo proprio programa



  3. cfdsg
    18 de setembro de 2012

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