DREAMWEAVER CS4 CURSO AVANÇADO

Introdução Planejando Sites Abrir um Documento Estilos

Introdução

O Dreamweaver Cs4 é a versão mais recente de um dos mais conceituados editores de HTML do mercado. O Dreamweaver vem construindo sua reputação desde o final dos anos 90 e é um dos programas mais completos existente no mercado para criação, o desenvolvimento e a manutenção dos sites.

O Dreamweaver é um editor de fácil manuseio, ele pode ser usado por pessoas que não possuem conhecimentos de programação, você pode criar desde sites simples até sistemas complexos usando banco de dados. O Dreamweaver se conecta facilmente ao banco de dados dando toda a facilidade para o desenvolvedor iniciante ou pode ser usado pelo programador mais experiente, podendo digitar os comandos via linha de códigos. Na versão CS4 o programa trás inúmeras novidades, como citado abaixo:

1. Visualização Dinâmica (live View): recurso que permite a visualização do layout da página ao mesmo tempo em que ela está sendo criada, trabalhando em seu código. As alterações do código se refletem na exibição da tela.

2. Navegador de Código: outra novidade da versão CS4 é o navegador de código. Trata-se de uma janela pop-up contendo regras CSS, javascript, entre outros, que estão relacionados com o código.

3. Dicas de código para Estrutura de Ajax e Java Script: outra novidade é a ajuda para escrever códigos de JavaScript, incluído as frameworks mais populares como o jquery, prototype e spry, de uma maneira mais rápida e precisa.

4. Suporte a FLV: recurso melhorado nessa versão, permitindo a incorporação e criação de arquivos flv do adobe flash, inserindo filmes em uma página.

5. Integração entre produtos: suporte melhorado de integração entre os produtos da ADOBE, como Adobe Flash CS4, Adobe Photoshop CS4, Adobe Fireworks CS4 e diversos outros softweares.

No decorrer do curso iremos estudar estas e outra novidades apresentadas pelo programa Dreamweaver CS4.

Abrindo o Programa e página inicial Quando o programa for aberto pela primeira vez , a janela Default Editor será aberta, para definir quais as extensões o Dreamweaver se tornará um editor padrão. Isso significa que todas as vezes que se quiser editar determinados arquivos, eles serão abertos no dreamweaver. Ao abrir o programa, uma tela será aberta com várias opções, como: Abrir novo documento, abrir documento recente , clicando nops itens da tela mostrada abaixo:

Pagina inicial do Dreamweaver CS4 A pagina inicial é dividida em três colunas:

1. Open Recent Item: abre um documento criado ou editado. 2. Create new: cria um novo documento em diversas extensões. 3. Top Feature (vídeos): Acessa na internet, no site da Adobe, alguns

vídeos que ajudam no desenvolvimento de sites, através do Dreamweaver.

Abaixo das três colunas, existem alguns links de acesso à internet (Getting Started, New Features, Resources, Dreamweaver Exchange). Neles você pode acessar informações sobre as novidades do programa, recursos, entre outros. Na parte inferior da página inicial, há uma caixa de seleção chamada Don’t show again. Esta opção não exibe a página inicial quando o Dreamweaver for aberto novamente. Aparece a seguinte mensagem:

Quando marcar essa opção, uma janela é aberta. Essa janela informa como exibir novamente a página Inicial. Clique em OK. Para voltar a exibir novamente a página inicial quando abrir o Dreamweaver CS4, vá em Edit->Preferences. Na categoria General, marque a opção show wlecome Screeen.

Para iniciar um novo arquivo em branco, clique na opção HTML presente na coluna Create New.

Interface do Programa A inteface do Dreamweaver CS4 é mostrado na figura abaixo:

Ela apresenta algumas novidades em relação as versões anteriores do programa. Basicamente é dividida nas seguintes áreas:

1. Barra de Aplicação: Contem todos os comandos do programa. 2. Barra de Ferramenta do documento: define o tipo de visualização do

documento na janela do documento. Nessa barra também pode-se inserir o nome do documento e acionar comandos de visualização, checagem de erros, transferência do arquivo, entre outros.

3. Alternador da área de Trabalho: permite selecionar diversos layouts da área de trabalho. Esses Layouts se adaptam a interface do programa para facilitar o desenvolvimento. O layout padrão e Design.

4. Janela do documento: é a área onde inserimos os elementos de um documento.

5. Seletor de Tags: barra exibida na parte inferior da janela do documento que exibe o tag utilizando no documento no lugar onde o desenvolvedor estiver editando. Essa barra possui alguns comandos extras de visualização do documento.

6. Inspetor de Propriedades: é um painel na parte inferior do programa que exibe as propriedades, com a possibilidade de alterações das características de um determinado elemento.

7. Painéis: são blocos que contem comandos e ferramentas utilizadas na construção de um documento.

Planejando Sites

O Dremaweaver CS4 possui recursos que auxiliam no planejamento, desenvolvimento e gerenciamento de um site completo. Portanto, a criação e a manutenção de um site são feita de forma prática e estruturada, não havendo necessidade de se utilizar programas extras, facilitando e otimizando o trabalho.

O gerenciamento do site é feito através do painel Files. É possível trabalhar com vários sites no programa, basta adicionar cada um deles neste painel.

O painel Files é dividido em duas partes. A parte superior contem os sites definidos nele, listados em uma caixa de seleção. Se não houver site definido, conterá a estrutura do HD do usuário.

O primeiro passo é adicionar um site no Dreamweaver. Para isso, clique no link Manage Sites presente no painel.

A janela Manage Sites é aberta. Nessa janela estão listados todos os

sites definidos no dreamweaver. Se não houver nenhum site definido no programa esta janela estará vazia.

A janela Manage Sites conte os seguintes comandos:

1. New: Cria um novo Site.

2. Edit: Edita um site já definido no Dreamweaver. 3. Duplicate: Duplica um site já definido no programa. 4. Remove: Remove um site definido no dreamweaver, mas não

apaga os arquivos. 5. Export: Exporta um site definido no programa. 6. Import: importa um site para o dremaweaver. 7. Done: fecha a janela Ménage Sites.

Para incluir um site, deve-se clicar no botão New.Duas opções são exibidas: Site e FTP & RDS Server.

Ao escolher Site, você criará um site em seu computador e possivelmente transferirá os arquivos para o servidor. Escolhendo a segunda opção, você trabalhará diretamente com os arquivos no servidor. Escolha a primeira opção. A janela Site Definition for é aberta. O próximo passo é iniciar a configuração do site. Para isso, clique na aba basic, para usar o assistente de configuração do site.

No campo What is the would you like to name your site?, digite o endereço do site (em nosso caso deixe em branco, logo mais iremos estudar mais sobre isso). Em seguida, clique no botão Next.

Na próxima tela é necessário escolher qual será a linguagem de servidor que seu site utilizará. Se estiver criando um site simples, escolha a opção No i do not want to use a Server technology. Se for utilizar alguma linguagem e, especial, como ASP, PHP entre outros, marque a opção Yes, i want to use a Server technology e em seguida escolha a opção desejada na caixa de seleção. Deixe em nosso marcado a primeira opção.Terminando o procedimento, clique no botão next para continuar.

Em seguida especifique o que o programa deve fazer com os arquivos enquanto estiver desenvolvendo o site. A opção recomendada é a primeira, deixe marcada. Nesta opção, você trabalhará com os arquivos salvos em um diretório em seu computador e só depois efetuará a transferência dos arquivos ao servidor.

O próximo passo é definir se o site deverá se conectar ao

servidor.

No item How do you connect yor remote Server, deve-se escolher a opção de como você deseja se conectar ao servidor remoto. Se você não deseja se conectar a um servidor , escolha a opção None. Se quiser se conectar, escolha uma das opções disponíveis. Geralmente a conexão ocorre através de FTP. Conforme a opção escolhida, algumas propriedades deverão ser configuradas. Após escolher a opção desejada, clique no botão next. A ultima tela é a exibição de um resumo do que foi configurado, como mostra a foto abaixo.

Após ver o resumo, clique em done para concluir a definição do site.

Depois deste processo o site fica listado no painel Files, como mostra a imagem abaixo:

Exercício Vamos neste primeiro exercício cria um novo site, com o nome Curso DREAMCS4. No decorrer de todo nosso curso iremos trabalhar com este site local. O site não terá tecnologia de servidor. Em nosso projeto, está definido que iremos criar dois sites um site simples sem tecnologia de servidor e um usando PHP e MYSQL. Nas próximas páginas usaremos estes arquivos.

Abrir um Documento

Vamos criar a primeira página para o projeto site. O primeiro passo é definir o assunto e a estrutura que o site conterá. Nesse projeto, criaremos um site fictício ecológico chamado Gaia.Esse site conterá 4 seções: Home, Quem somos, Projetos, Contatos e fotos. Textos de cada página.

Home: Projeto Site Gaia é uma Organização Não-Governamental que realiza projeto e atividades ligadas à Ecologia. Desenvolvemos projetos específicos e exclusivos para escolas, comunidades, casas, empresas e organizações.

Convidamos você a conhecer um pouco mais sobre o Projeto Site Gaia visitando as seções do site. Quem somos: ANTÔNIO Pergamines: Nascido em Santana do Acaraú - Ceará, em 1970. Reside em Fortaleza desde 1987, onde obteve sua formação profissional: - Engenheiro Civil pela UFC - Universidade Federal do Ceará. - Pós-graduado em Consultoria Organizacional pela FEAAC – Faculdade de Administração, vinculada à UFC. - Formação em Consultoria Organizacional mediante o Método de Processo - MdP pelo IPF - Instituto Paulo Freire de Estudos Psicossociais do Ceará. Bento Ernandes: Formando em Engenharia Florestal, graduando pela UFRuralRJ, Inglês intermediário, com preservação da vegetação, aproveitamento dos recursos naturais, exploração controlável, organizada e compatível com a ecologia, paisagismo.

Projetos ECOTURISMO Ecoviagem O Ecoviagem possui tópicos de eco-viagens para o Brasil e o exterior com um dos mais vastos conteúdos de dicas e informações sobre os lugares para a realização do turismo ecológico e ainda boletins diários com as últimas notícias em ecoturismo. EcoBrasil Site da Associação Brasileira de Ecoturismo, que visa colaborar para o desenvolvimento do ecoturismo no Brasil, através de troca de informações e realização de projetos de educação ambiental. O site traz vários textos relacionados e links para sites ecológicos em geral. Instituto de Ecoturismo do Brasil Este instituto garante a qualidade do trabalho de empresas de ecoturismo. Fornece também boletim informativo sobre o tema e promove a capacitação do profissional na área. No guia você encontra uma lista de empresas, organizações governamentais e não-governamentais, além de dados de profissionais e instituições de ensino e pesquisa em ecoturismo.

Contato Nome E-mail Comentário

Álbum de Fotos Galeria de projetos ambientais!

Criando a primeira página

Para criar a primeira página, vá ao menu File -> New e Selecione a categoria Blank Page. Em pag Type, selecione HTML. Na coluna layout, selecione a opção none. Clique no botão Create. A janela do documento estará exibindo o documento criado.

Este layout escolhido apresenta uma página totalmente em branco. Ao longo do curso iremos usar este documento, que ganhará forma no decorrer das lições.

O próximo passo é inserir um titulo para o documento. Na barra de ferramentas do documento, em Title, troque Untitled

Document por Gaia - Projeto Ecológico e tecle enter. Em seguida, edite algumas propriedades da página em Page properties.

Precione CRTL+J. Na categoria Links(CSS), em underline styles, selecionea opção para exibir o sublinhado somente quando o ponteiro do mouse passar sobre o Link.

Não altere mais nada, clique em apply e logo após em ok, salve a pagina, como índex.html. A página será salva no site que você definiu anteriormente, para salvar aperte as teclas CRTL+S ou vá em File(arquivo)e aperte save(salvar).

Observe que o site definido mostra um arquivo, índex é nossa pagina incial.

Textos Inspetor de propriedades No inspector Properties você tem os recursos de texto como se

estivesse digitando no Word. No lado esquerdo do painel existem 2 botões:HTML CSS.

Veja os atributos de HTML:

• Format: especifica o formato aplicado ao texto. Cada formato corresponde ao um código HTML.

Paragraf-> tag<p> Heading 1 -> H1 Heading 2 -> H2 Heading 3 -> H3 Heading 4 -> H4 Heading 5 -> H5 Heading 6 -> H6 Preformatted -> <pre>

Alem desses 8 formatos com tamanho predefinidos, pode-se optar por None. Neste caso, o atributo size (tamanho), pode ser definido diretamente no Inspetor de Propriedades do CSS.

• Class: Classifica um elemento. Vários elementos distintos em um mesmo documento podem ter a mesma classe.

• Bold e Itálico: aplica efeito de Negrito e Itálico no texto. • Unodered List: Cria uma lista não ordenada. • Ordered Lista: Cria uma lista ordenada. • Text Outdent: remove o recuo de texto. • Text Indent: cria um recuo no texto.Este recuo é equivalente a

tag <bloquote> do HTML. • Title: define uma breve descrição para um link. Portanto esse

atributo fica ativo somente se o campo link for preenchido.

• ID: identifica um elemento. Cada ID é única, dessa maneira, não poderá existir 2 ou mais elementos com a mesma ID em outro documento.

• Link: define um link para o texto. • Target: se um link for definido, está opção fica ativada. Ela

define o destino que o link será aberto. • Page properties: abre a janela de configuração de

propriedades do documento. • List item: personaliza as listas Unodered List e Ordered

Lista. Fica ativo somente se houver uma lista inserida no documento

Exercícios

• No painel files, abra o arquivo índex.html, dando dois cliques sobre ele, a página índex é a primeira página de um site.

• Digite o seguinte conteúdo no documento:

Projeto site Gaia Clique na Imagem para entrar

• Selecione a frase Projeto site gaia e no inspetor de propriedades, na

parte HTML, troque o formato paragraph pelo heading 2. • Selecione o texto Clique na imagem para entrar e coloque o texto

em Itálico sendo um paragraph também. • Salve o documento, e pressione F12.

Estilos

O HTML é uma linguagem de marcação padronizada. Isso significa que o tipo de efeito, alinhamento, tamanho dos seus elementos é predefinido de acordo com o código (tag) utilizado que é interpretado pelo navegador. Portanto é uma linguagem limitada.

As folhas de estilos permitem expandir esses recursos, gerando maior

flexibilidade do que o HTML na aplicação de propriedades aos elementos. Por ser um recurso posterior às primeiras implementações do HTML, as

folhas de estilo são suportada apenas em navegadores a partir da geração 4.0.

O internet Explorer 3.0 reconhece somente alguns estilos. Os outros navegadores de anteriores simplesmente as ignoram.

No Dreamweaver, as folhas de estilo são criadas e listadas no painel CSS

Style, também podem ser manipuladas no inspetor de propriedades do CSS. Há uma tendência na internet de cada vez mais utilizar as folhas de

estilo. E o dreamweaver tem acompanhado essa tendência, oferecendo maior suporte as folhas de estilo.

O painel CSS Styles pode ser aberto através do menu Windows-> CSS

styles ou \través do atalho SHIFT+F11.

O painel está dividido em duas modalidades que podem ser acionadas através de botões na parte superior do painel.

• ALL: Exibe todas as configurações de folhas de estilo do

documento. É dividido em duas áreas: All Rules: exibe todas as regras definidas na folha de estilo. Properties: exibe a propriedade de um elemento selecionado em All Rules • Current: exibe configurações de folhas de estilo de um

determinado elemento selecionado. Nesta modalidade, o painel passa a ficar dividido em 3 partes:

Summary for selection: exibe informações do código de folha de estilo do elemento. Cada código definido, suas propriedades e valores são exibidos nessa área do painel. About: exibe informações sobre cada código exibido na área Summary for slection. Deve-se selecionar o código desejado e

imediatamente é exibida a informação dele, como por exemplo, onde está definido e em qual arquivo está inserido.

Properties: exibe as propriedades da regra da folha de estilo onde o elemento selecionado faz parte. A figura abaixo mostra os painéis no dois modos.

Esse painel não apenas ilustra os parâmetros e as propriedades, como também permite editá-los. Na área properties, tanto no modo ALL quanto no modo Current, é possível alterar as propriedades de um atributo. Como são exibidas todas as propriedades referentes a um elemento, a edição não poderia ser mais fácil. Os ícones na parte inferior da janela são:

1. Show Category View: exibe a visualização por categoria na área properties for. Todos os atributos são mostrados.

2. Show list View: exibe a visualização por listas na área properties. São exibidos os atributos específicos do elemento selecionado.

3. Show only set properties: exibe na area properties apenas as propriedades que tem valores definidos na regra da folha de estilo.

4. Attach style sheet: anexa um arquivo CSS já existente.

5. New Style sheet: Cria um novo estilo.

6. Edit style: edita uma folha de estilo.

Para criar um novo estilo, clique no ícone New css Rule. Uma janela de mesmo nome é aberta, contendo:

• Selector Type: Especifica o tipo de estilo a ser criado: class (can

aply to any HTML element):estilo personalizado que pode ser aplicado em qualquer tag de HTML.

ID(apply to only one HTMLelement):estilo que pode ser aplicado somente em um elemento de HTML. Tag(redefines na HTML element): estilo definido para um tag especifico. Compound(based on your selection):estilo composto pela combinação de dois ou mais estilos, exibido somente quando um estilo estiver contido em outro. • Selector Name: define um nome para o estilo. Conforme a opção

selecionada, no campode seleção, deve-se especificar o nome para o estilo ou a tag a ser utlizada.

• Rule Definition: especifica se o estilo será vinculado ou não, Se escolher, o item New style sheet File, o estilo será vinculado. Se escolher This Document Only, o estilo será vinculado somente no documento atual.

Após escolher as opções, clique em ok. Se você criar um estilo vinculado (new style sheet file), ao pressionar o botão ok, abrirá a janela para que você salve o estilo como um arquivo externo. Após isso, a janela de definição do estilo é aberta, para configuração do estilo.

Definição do Estilo Na janela CSS Rule Definition For serão definidas as propriedades que o estilo irá ter. As categorias que a janela apresenta são:

• Type: define as configurações da fonte:tipo, cor, tamanho, largura, estilo, decoração, etc.

• Background: define estilos aplicados no fundo, como por exemplo imagens, cores, inserção exata da imagem. Etc.

• Block: define estilos para um bloco, como espaçamento entre palvras, entre letras, alinhamento do texto, etc.

• Box: define estilos de caixa, utilizando para criação de retângulos onde se deve definir altura, largura, entre outros.

• Border: define estilos de bordas. • List: define estilos para serem usados em listas, inclusive pode-se

alterar o tipo de símbolo que antecede cada item de uma lista • Positionig: define estilos de posicionamento. • Extensions: define estilos de extensões, onde se pode aplicar efeitos

aos documentos.

Editando um estilo Para editar um estilo já existente no painel CSS styles e em seguida, clique no ícone Edit Style . A janela de definição do estilo será aberta para a edição. Após a alteração, clique no botão Apply e em ok. Se o estilos estiver em um arquivo externo, este arquivo será aberto no próprio Dreamweaver eo código poderá ser alterado diretamente no código-fonte do estilo, na janela do documento. Outra maneira de editar um estilo é através do painel CSS styles, selecionando e estilo em ALL Rules e alterando o estilo na área properties.

Todas as propriedades aplicadas podem ter suas configurações alteradas. Dependendo da propriedade, uma caixa de seleção é aberta para escolher outra opção, como é mostrado na figura anterior. Outras propriedades podem ter apenas um campo para digitação do novo valor.

Repare no painel a existência de um link chamado ADD property. Ao clicar sobre ele, abre-se uma caixa de seleção para se escolher a

nova propriedade que se quer adicionar ao atributo. Após a seleção, é só inserir o valor correspondente.

Para apagar uma propriedade, é só clicar sobre ela com o botão direito

do mouse dentro do painel. Nas opções de menu que se abrirem clique em Delete.

Anexando um estilo Caso você queira utilizar um estilo já pronto, salvo em um arquivo.css,

clique no ícone attach style sheet presente no painel CSS styles. A janela Attach External style sheet é aberta:

• File/URL: define o caminho da folha de estilo externa. Clique em browse para encontrar o arquivo.

• ADD As: define o tipo de inserção externa. Link: acessa as informações do arquivo .css sem transferi-las para o documento, tornando o estilo do tipo vinculado. Import: insere na página, incorporando ao código-fonte dela, as informações contidas no arquivo .css, tornando o estilo do tipo não vinculado.

• Media: define o tipo de ambiente ou dispositivo onde a folha de estilo será usada. Essa opção está vinculada com barra Style Redering. Dependendo do tipo de ambiente ou dispositivo que o documento é criado, a folha de estilo também deve ser definida. Para páginas da web, escolha o tipo ALL ou screen.

Observe na janela Attach, um link com a inscrição sample Style Sheet. Clicando ali, abrirá a janela Sample Style sheets com alguns estilos predefinidos pelo dreamweaver. Trata-se de algumas amostras prontas que podem ser aplicadas diretamente ao documento de forma automática. Para usar escolha o tipo de estilo na coluna à esquerda. Na parte central da janela é exibida em forma visual algumas propriedades do estilo. Se desejar ter uma visualização prévia no documento, clique no

botão preview. No campo save to deve-se indicar o local onde o arquivo que contem o arquivo .css será salvo.

Tipos de Estilos Nesse capítulo já foi mencionado que existem quatro tipos de estilos que podem ser criados: Class, ID, tag, Compound. O Estilo class pode ser aplicado em qualquer tag. Assim, um mesmo tag, em momentos distintos no documento, pode receber estilos diferentes. O estilo ID é um estilo específico e exclusivo para um único elemento na página. O estilo tag como o próprio nome diz, é definido para um tag especifico. Todas as vezes que o tag for usado no documento, automaticamente será atribuído estilo definido. E o estilo compound permite uma combinação de estilos. Independentemente desses quatro tipos, existem duas maneiras de se escrever uma folha de estilo: através do modo vinculado ou do modo incorporado (não vinculado). CSS vinculado nada mais é do que um arquivo a parte com extensão .css contendo a definição do estilo. Esse arquivo é anexado ao documento usando tags HTML. No modo incorporado, o estilo é escrito dentro do próprio documento. Seus códigos são escritos junto com o tag HTML. Portanto, ao criar um estilo deve-se configurar o tipo (Seletor Type)e, em seguida, se será vinculado ou não ao documento(Rule Definition na janela New CSS Rule).

Estilo Class

Ao criar um novo estilo, na janela New CSS Rule, selecione a opção Class. N a caixa Name, digite um nome para esse estilo. Lembre-se que para esse tipo de estilo, o nome deverá ter um ponto na sua frente, exemplo:estilo.css, texto.css, rodape.css etc. Se você esquecer de inserir o ponto, o Dreamweaver se encarregará de preencher automaticamente o ponto no nome. Se você criar um estilo vinculado(new style sheet file), ao pressionar o botão ok, abrirá a janela para que você salve o estilo como um arquivo externo .css. Após salvar o arquivo, a janela de definição do Estilo é aberta. Se você criar um estilo não vinculado, marque a opção This Document Only e clique no botão ok.

Na acima foi aplicado um estilo do tipo class, na janela que abrir faça a seguinte configuração: Na Categoria Type:

Na categoria background:

Na Categoria Block marque as seguintes configurações:

Na categoria position:

Clique em OK, e veja o resultado do nosso estilo aplicado a frase abaixo: “Esta Frase ainda não tem um estilo definido e frase de baixo sim”.

Para aplicar o estilo, selecione o texto e escolha o estilo no campo Class no Inspetor de Propriedades. Pode que ao aplicar o estilo em apenas uma palavra, ele aplique no <body>, caso isso aconteça dele o estilo do tag <body> e aplique um <span> ou <p>, na palavra. Veja:

<html > <head> <title>Untitled Document</title> <style type="text/css"> <!-- .estudo { font-family: Arial, Helvetica, sans-serif;

font-size: 14px; color: #096; background-color: #F96; letter-spacing: 1em; text-align: center; display: block; width: 350px; } --> </style> </head> <body > <span class="estudo">Texto</span> </body> </html> Digite no dreanweaver o texto abaixo, e aplique o estilo recém criado: “Ao criar um novo estilo, na janela New CSS Rule, selecione a opção Class. N a caixa Name, digite um nome para esse estilo. Lembre-se que para esse tipo de estilo, o nome deverá ter um ponto na sua frente, exemplo:estilo.css, texto.css, rodape.css etc. Se você esquecer de inserir o ponto, o Dreamweaver se encarregará de preencher automaticamente o ponto no nome. “ Aplique o estilo no segundo parágrafo, e veja o resultado.

O código css foi alterado veja: Original .estudo { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #096; background-color: #F96; letter-spacing: 1em; text-align: center; display: block; width: 350px; }

Codigo modificado .estudo { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #096; background-color: #F96; text-align: center; display: block; width: 550px; } Você conhecendo o css, pode editar o código na linha de comando ou acessar o ícone de edição Edit Rule é um lápis , veja a figura abaixo:

A janela de estilos abrirá e você poderá alterar, veja:

Abra o painel CSS e em style selecione no ícone com o formato de mais, na lista dos estilos, selecione o estilo .estudo e clique no lápis.

Estilo ID Para criar um estilo ID, é necessário primeiramente colocar uma identificação, abra o painel properties em HTML no item ID coloque um nome para atribuir a um cabeçalho <h1> por exemplo. Veja a foto abaixo:

Em seguida, no painel CSS style, crie um novo estilo veja como irá ficar, na foto abaixo:

Note que o painel já vem configurado e antes do nome não é mais o ponto mas sim um sinal de # + o nome, em nosso caso aparece o nome que definimos no inspector #h1edit. Em choose você define se o estilo será aplicado só ao documento ou se será um estilo vinculado. Clique em ok. Se for um estilo vinculado irá abrir uma janela para salvar o estilo, mas neste caso aplique só para esta página. Em Type

Em Background:

Em block:

Clique em ok. Foi alterado o código veja como ficou:

Veja como fica o nosso código, a área marcada foi onde fiz a alteração.

Acrescentei width e alterei o heigth. Teste mais, altere outros atributos você pode usar o painel CSS para editar sua folha de estilo.

Estilo TAG

Para criar um estilo tag, na janela New Style, no item Selector Type, clique na opção Tag.

Em selector name, selecione a tag HTML em que quer aplicar o estilo. Em seguida escolha se quer criar um estilo vinculado ou não. Clique em ok.

Surgirá a seguinte janela, caso seja aplicado no mesmo documento:

Este estilo será aplicado em todos os cabeçalhos h3 automaticamente, se você

quer perssonalizar algum estilo h3 crie um estilo do tipo ID, como visto na sessão de IDs.

Estilo Compound (composto) Para Criar um estilo composto, selecione a opção compound Selector Type. Escolha a tag que quer aplicar no item seletor e se o estilo deverá ser vinculado ou não. Clique no botão ok. Caso o estilo seja vinculado, vocês deverá salvar o arquivo com extensão .css antes. A janela de definição do estilo será aberta.

Criamos o estilo em a:link, ou seja iremos criar a mudanças de estado em um link, veja as configurações:

Em Type:

Em Background:

Em Box:

Aperte ok.

Definimos apena o estado normal do link, vamos definir os outros estado, vá novamente em new CSS Rulles e agora defina as configurações para a:visited.

Clique em ok, e defina como mostram as imagens: Type:

Em background:

Em border:

Vamos definir os outros dois estados Active e Hover: Em hover defina conforme a imagem. Em Type:

Em background:

Defina também Box e border a seu gosto. Defina também o estado active da mesma maneira que você definiu até agora, lembre sempre de combinar as cores, as que usamos foram apenas para exercitar. Veja como deve ficar o painel CSS:

O seletor a:hover é acionado quando o ponteiro do mouse passa sobre o link no documento. Este estilo, portanto, mudará o ponteiro, dê dois clique no estado hover no painel CSS Styles e vá em extenssions, localize: cursor e marque: crosshair, nessa configuração quando você colocar o ponteiro do mouse sobre o link ele mudar o formato de ponteiro para uma cruz.

Inspetor de propriedades do estilo Uma forma de editar ou criar uma folha de estilos é utilizando o Inspetor de propriedades do estilo. Para acionar, clique no botão na lateral esquerda do inspetor de propriedades com a inscrição CSS. Se um estilo já estiver aplicado, o inspetor de Propriedades exibirá as propriedades do estilo. Se não houver nenhum, é possível criar um novo estilo no item Target rule, que passa a exibir a inscrição <New CSS Rule>. Quando selecionamos qualquer atributo para essa nova regra a ser criada, automaticamente a janela new CSS Rule é aberta. Em seguida, escolha um dos quatro tipos de estilos e crie seu estilo como abordado anteriormente.

Para aplicar qualquer estilo definido no documento de forma vinculada ou não, selecione o conteúdo na janela do documento e em seguida escolha o estilo desejado na caixa de seleção Target Rule. O inspetor de propriedade do estilo é uma novidade presente na versão CS 4 do Dreamweaver que facilita bastante a utilização de estilos, acompanhando a tendência da web. Os comandos do Inspetor são:

• Target Rule: permite a edição de um estilo criado. • Css Panel: abre o painel CSS • Font: define o tipo de fonte a ser usado.

Design – Time O design – time é um recurso presente no Dreamweaver que permite visualizar um documento com um arquivos de folha de estilo vinculados. Esse recurso é útil , pois você pode estar criando o seu documento usando uma configuração de folha de estilo se desejar visualizar o mesmo CONTINUA ENTRE EM CONTATO COM: CURSOWEBSM@GMAIL.COM