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.

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

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 noordenada (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.

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

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;

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

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.

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

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.

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

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.

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

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.

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

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.

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

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

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

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).

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

Criao e anexao de folhas de estilo

1. No painel Origens do painel CSS Designer, clique em
opes:

e em uma das seguintes

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)

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