-Inserção de tags div
-Edição de tags div
-Visualização e edição das regras aplicadas uma tag div
-Posicionamento do ponto de inserção em uma tag div para adicionar conteúdo
-Alteração do texto do alocador de espaço em uma tag div
-Alterar a cor de realce das tags div
Você pode criar layouts de página inserindo manualmente tags div e aplicando os estilos de posicionamento CSS a elas. Uma tag div é uma tag que define divisões lógicas no conteúdo de uma página da Web. Você pode usar tags div para centralizar blocos de conteúdo, criar efeitos de coluna, criar diferentes áreas de cor e muito mais.
Se não estiver familiarizado com o uso das tags div e folhas de estilos em cascata (CSS) para criar páginas da Web, você poderá criar um layout CSS baseado em um dos layouts predefinidos fornecidos com o Dreamweaver. Se não estiver acostumado a trabalhar com a CSS, mas estiver familiarizado com as tabelas, você deverá também tentar utilizá-las.
Nota: O Dreamweaver trata todas as tags div com posição absoluta como elementos PA (elementos com posição absoluta), mesmo que você não tenha criado essas tags usando a ferramenta de desenho Div PA.
Inserção de tags div
Você pode usar tags div para criar blocos de layout CSS e posicioná-los no documento. Isso será útil se você tiver uma folha de estilos CSS existente com estilos de posicionamento anexados ao documento. O Dreamweaver permite que você insira rapidamente uma tag div e aplique estilos existentes a ela.
Na janela Documento, coloque o ponto de inserção no local em que a tag div deve aparecer.
Siga um destes procedimentos:
Selecione Inserir > Objetos de layout > Tag div.
Na categoria Layout do painel Inserir, clique no botão Inserir tag div .
Defina uma das seguintes opções:
Inserir Permite que você selecione o local da tag div e o nome da tag caso ela não seja nova.
Classe Exibe o estilo de classe atualmente aplicado à tag. Se você anexou uma folha de estilos, as classes definidas nessa folha de estilos aparecerão na lista. Use este menu pop-up para selecionar o estilo que você deseja aplicar à tag.
ID Permite que você altere o nome usado para identificar a tag div. Se você anexou uma folha de estilos, as IDs definidas nessa folha de estilos aparecerão na lista. As IDs dos blocos que já estão no documento não são listadas.
Nota: O Dreamweaver informará se você inserir a mesma ID de outra tag no documento.
Nova regra CSS Abre a caixa de diálogo Nova regra CSS.
Clique em OK.
A tag div aparece como uma caixa no documento com o texto do alocador de espaço. Quando você move o ponteiro sobre a borda da caixa, o Dreamweaver o realça.
Se a tag div tiver uma posição absoluta, ela se tornará um elemento PA. (Você pode editar tags div que não possuem posição absoluta.)
Edição de tags div
Depois que você inserir uma tag div, poderá manipulá-la ou adicionar conteúdo a ela.
Nota: As tags div com posição absoluta se tornam elementos PA.
Quando você atribuir bordas a tags div ou quando a opção Contornos do layout CSS estiver selecionada, elas terão bordas visíveis. (A opção Contornos do layout CSS é selecionada por padrão no menu Exibir > Auxílios visuais.) Quando você move o ponteiro sobre uma tag div, o Dreamweaver realça a tag. É possível alterar a cor do realce ou desativar o realce.
Ao selecionar uma tag div, você poderá visualizar e editar regras para ela no painel Estilos CSS. Também é possível adicionar conteúdo à tag div colocando o ponto de inserção dentro da tag div e adicionando o conteúdo exatamente como faria ao adicionar conteúdo a uma página.
Visualização e edição das regras aplicadas uma tag div
Siga um destes procedimentos para selecionar a tag div:
Clique na borda da tag div.
Procure o realce para ver a borda.
Clique dentro da tag div e pressione Control+A (Windows) ou Command+A (Macintosh) duas vezes.
Clique dentro da tag div e selecione a tag div no seletor de tags na parte inferior da janela Documento.
Selecione Janela > Estilos CSS para abrir o painel Estilos CSS caso ele ainda não esteja aberto.
As regras aplicadas à tag div aparecem no painel.
Faça as edições conforme necessário.
Posicionamento do ponto de inserção em uma tag div para adicionar conteúdo
Clique em qualquer lugar nas bordas da tag.
Alteração do texto do alocador de espaço em uma tag div
Selecione o texto e digite sobre ele ou pressione Delete.
Nota: Você pode adicionar conteúdo à tag div exatamente como faria ao adicionar um conteúdo a uma página.
Alterar a cor de realce das tags div
Quando você move o ponteiro sobre a borda de uma tag div na Visualização de design, o Dreamweaver realça as bordas da tag. Você pode ativar ou desativar o realce quando necessário, ou alterar a cor do realce na caixa de diálogo Preferências.
Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh).
Selecione Realce na lista de categorias à esquerda.
Faça uma das seguintes alterações e clique em OK:
Para alterar a cor de realce das tags div, clique na caixa de cor Passar o mouse, selecione a cor de realce usando o seletor de cores (ou digite o valor hexadecimal da cor de realce na caixa de texto).
Para ativar ou desativar o realce das tags div, marque ou desmarque a caixa de seleção Mostrar de Passar o mouse.
Nota: Essas opções afetam todos os objetos (por exemplo, as tabelas), que o Dreamweaver realça quando você move o ponteiro sobre elas.
Nenhum comentário:
Postar um comentário