aula 01 - texto, listas, tabelas e css com o dreamweaver

Servio Nacional de Aprendizagem Comercial - Departamento Regional de Pernambuco

Avenida Visconde de Suassuna, 500 Santo Amaro CEP 50.050-540

Recife / PE Tel.: 0800 081 1688 www.pe.senac.br

Texto, listas, tabelas e CSS com o Dreamweaver

Ttulos e subttulos

Use o menu pop-up Formatar, no Inspetor de Propriedades HTML para aplicar as tags padro de

pargrafo (p) e cabealho (h1, h2,...,h6).

1. Coloque o ponto de insero na posio de deseja o ttulo, subttulo ou pargrafo e digite o mesmo;

2. Selecione o texto que ser o ttulo, subttulo ou pargrafo.

3. Usando o submenu Formatar > Formato do pargrafo ou o menu pop-up Formatar, no Inspetor

de propriedades;

4. Selecione um formato de cabealho (ttulo e subttulo - por exemplo, Cabealho 1, Cabealho 2, etc),

ou a opo de Pargrafo, para definir as tag HTML associada ao estilo selecionado (por exemplo, h1

para Cabealho 1, h2 para Cabealho 2,...h6 e p) aplicada ao texto inteiro.

Obs.: Quando voc aplicar uma tag de cabealho a um pargrafo, o Dreamweaver

adicionar automaticamente a prxima linha de texto como um pargrafo padro.




Criao de uma nova lista numerada ou com marcador

Para criar listas numeradas ou com marcado, siga os passos abaixo:

1. No documento do Dreamweaver, coloque o ponto de insero onde deseja adicionar uma lista e digite

os itens da lista um a baixo do outro;

2. No Inspetor de propriedades HTML, clique no boto Lista ordenada (numerada) ou em Lista no-

ordenada (com marcador).

Criao de uma lista com sublista

Para criar uma sublista, siga os passos:

1. Digite, aps o item que ter os subitem, os subiten, um abaixo do outro;

2. Selecione os itens de lista que voc deseja transformar em sublista;

3. No Inspetor de propriedades HTML, clique no boto Citao em bloco.

Obs.: O Dreamweaver recua o texto e cria uma sublista separada com os atributos HTML da

lista original.




Tabelas

Quando pensamos numa tabela, a primeira coisa que vem a nossa cabea so dados tabulares, uma tabela como mostrado abaixo:

Numa pgina web o uso de uma tabela muito mais abrangente, usamos tabelas tambm para exibir dados tabulares. Veja na imagem abaixo, temos um layout de um site que teve sua rea de contedo dividida em duas colunas usando uma tabela:

Neste site, a rea de contedo foi organizada partir de uma tabela

Para criarmos a tabela, siga os passo abaixo:

1. Posicione o cursor no local que deseja a tabela;

2. Clique no Menu Inserir / Tabela - Insert/Table;




3. Aps configurar os dados para criao da tabela, clique em OK.

Mesclando clulas

Vamos criar uma tabela como a do exemplo abaixo:

1. Crie uma tabela com 4 linhas e 4 colunas, 500 pixels de largura.

2. Selecione as 4 clulas da primeira linha.

3. Clique no boto Mesclar clulas selecionadas usando extenso- Merge

selected cells using spans, como mostrado na prxima figura.

4. Selecione a primeira e a segunda clula da segunda linha e mescle-as tambm.

5. Faa a mesma coisa com a terceira e a quarta clulas da segunda linha.

6. Preencha os dados e use os botes de alinhamento da barra de propriedades para fazer o mesmo alinhamento do exemplo.




Modificando a altura e largura das clulas

Para modificar a altura de uma linha selecione-a toda, posicionando o mouse a

esquerda da linha como mostrado na figura abaixo e digite o valor 40 em A - H no lugar apontado pela seta vermelha na prxima imagem.

Para modificar a largura de uma clula, selecione-a toda, posicionando o mouse no

topo da clula como mostra a figura abaixo e digite 20% no lugar apontado pela seta

vermelha.




Alterando a margem interna da clula e o espaamento entre as clulas.

Podemos configurar o espaamento entre clulas (cellspacing) e a margem interna da

clula (cellpadding) quando criamos inserimos a tabela e depois da tabela pronta usando a barra de propriedades.

Para configurar estes dois valores depois de inserida a tabela, devemos selecionar a

tabela clicando na linha de borda como mostrado abaixo. No exemplo vou configurar o

espaamento entre clulas para 5 (o valor default 2) e a margem interna da cela para 5 tambm.

Insero de vdeo HTML5

1. Certifique-se de que seu cursor esteja no local em que voc deseja inserir o vdeo.

2. Selecione o menu Inserir> Mdia> Vdeo HTML5. O elemento de vdeo HTML5 (tag

VIDEO) inserido no local especificado.




3. No painel Propriedades, especifique valores de vrias opes.

Origem / Origem de Alt 1 / Origem de Alt 2: na Origem, insira o local do

arquivo de vdeo. Como alternativa, voc pode clicar no cone da pasta para

selecionar um arquivo de vdeo no sistema de arquivos local. O suporte de

formato do vdeo varia em navegadores diferentes. Se o formato do vdeo

na Origem no for suportado em um navegador, o formato do vdeo

especificado em Origem de Alt 1 ou Origem de Alt 2 ser usado. O

navegador seleciona o primeiro formato reconhecido para exibir o vdeo.

Obs.: Consulte a tabela abaixo para obter mais informaes sobre o navegador e

formato do vdeo suportado. Para obter as ltimas informaes, consulte HTML5 Vdeo.

Ttulo: especifique um ttulo para o vdeo.

Largura (L): insira a largura em pixel do vdeo.

Altura (A): insira a altura em pixel do vdeo.

Controles: selecione se desejar exibir os controles de vdeo como Reproduzir,

Pausar e Mudo na pgina HTML.

AutoPlay: selecione se desejar que a reproduo do vdeo seja iniciada assim

que ela for carregada na pgina da Web.

Imagem do Poster: insira o local da imagem que ser exibida at que o

download do vdeo seja concludo ou at que o usurio clique em Reproduzir.

Os valores de Altura e Largura so preenchidos automaticamente quando a

imagem inserida.

Loop: selecione esta opo se desejar que o vdeo seja reproduzido

continuamente at que o usurio o interrompa.

Muted: selecione esta opo se desejar silenciar o udio do vdeo.

Fallback do Flash: selecione um arquivo SWF para navegadores que no

suportam vdeo HTML5.

Texto de emergncia: fornea o texto a ser exibido se o navegador no

suportar HTML5.




Preload: especifique as preferncias do autor em relao a como o vdeo deve

ser carregado quando a pgina carregada. Se voc selecionar Automtico, o

download ser feito durante o carregamento da pgina. Se voc

selecionar Metadados, o download s ser feito aps a concluso do download

da pgina.

Painel Propriedades de vdeo HTML5

Insero de udio HTML5

1. Certifique-se de que seu cursor esteja no local em que voc deseja inserir o udio.

2. Selecione o menu Inserir > Mdia > udio HTML5. O arquivo de udio inserido

no local especificado.

3. No painel Propriedades, insira as informaes a seguir:

Origem / Origem de Alt 1 / Origem de Alt 2: em Origem, insira o local do

arquivo de udio. Como alternativa, clique no cone da pasta para selecionar

um arquivo de udio em seu computador. O suporte para formatos de udio

varia em navegadores diferentes. Se o formato de udio na Origem no for

suportado, o formato especificado em Origem de Alt 1 ou Origem de Alt

2 ser usado. O navegador seleciona o primeiro formato reconhecido para

exibir o udio.

Obs.: Consulte a tabela abaixo para obter mais informaes sobre o navegador e

formato do udio suportado. Para obter as ltimas informaes, consulte HTML5 udio.




Ttulo: insira um ttulo para o arquivo de udio.

Texto de emergncia: insira o texto a ser exibido em navegadores que no

fornecem suporte ao HTML5.

Controles: selecione se voc deseja exibir os controles de udio como

Reproduzir, Pausar e Mudo na pgina HTML.

AutoPlay: selecione se quiser que a reproduo do udio seja iniciada assim

que ela for carregada na pgina da Web.

Loop: selecione esta opo se desejar que o udio seja reproduzido

continuamente at que o usurio interrompa a reproduo.

Muted: selecione esta opo se desejar silenciar o udio depois do download.

Preload: selecione Automtico para carregar o arquivo de udio inteiro no

download da pgina. Se voc selecionar Metadados, o download dos metadados

s ser feito aps a concluso do download da pgina.

Painel Propriedades do udio HTML5




CSS na rea de Design

Painel da CSS Designer (Janela > CSS Designer) um Inspetor de

propriedade da CSS que permite criar visualmente estilos e arquivos da CSS e definir propriedades, junto com consultas de mdia.

Painel CSS Designer

Obs.: Voc pode usar Ctrl + Z para desfazer ou Ctrl + Y para refazer todas as

aes executadas na CSS Designer. As alteraes so automaticamente

refletidas na Visualizao dinmica, e o arquivo relevante da CSS tambm

atualizado. Para informar a voc que o arquivo relacionado foi alterado, a guia

do arquivo afetado destacada por um tempo (aproximadamente 8 segundos).




Criao e anexao de folhas de estilo

1. No painel Origens do painel CSS Designer, clique em e em uma das seguintes

opes:

Criar um novo arquivo CSS: para criar e anexar um novo arquivo CSS ao

documento;

Anexar arquivo CSS existente: para anexar um arquivo CSS existente ao

documento;

Definir na pgina: para definir uma CSS no documento.

Com base na opo selecionada, as caixas de dilogo Criar um novo arquivo

CSS ou Anexar arquivo CSS existente so exibidas.

2. Clique em no boto Procurar para especificar o nome do arquivo CSS e, se voc

estiver criando um novo arquivo CSS, o local para salvar o novo arquivo.

3. Siga um destes procedimentos:

Clique em Vincular para vincular o documento do Dreamweaver ao arquivo

CSS.

Clique em Importar para importar o arquivo CSS no documento.

Definio dos seletores da CSS

1. No painel CSS Designer, selecione uma origem CSS no painel Origens.

2. No painel Seletores, clique em . Com base no elemento selecionado no

documento, a CSS Designer identifica de forma inteligente.

3. Se o seletor que deseja formatar estiver correto, basta confirmar com um Enter, caso

contrrio altere o seletor, digitando o correto e pressione o Enter.

Definio de propriedades do CSS

As propriedades so agrupadas nas seguintes categorias e representadas por cones

diferentes na parte superior do painel Propriedades:

Layout

Texto

Borda

Fundo

Outros (lista de propriedades somente texto e no propriedades com controles

visuais)

aula 01 - texto, listas, tabelas e css com o dreamweaver

Documents