Use o Dreamweaver para editar rapidamente tags de páginas da web
Autor：Eve Cole
Data da Última Atualização：2009-06-01 01:02:43
Gostaria de saber se você tem o hábito de escrever código à mão. Por exemplo: se você deseja inserir um trecho de código CSS ou Javascript em uma célula, como fazer isso de forma rápida e conveniente?
Embora o Dreamweaver tenha nos fornecido a visualização do código, ainda precisamos localizá-lo manualmente e alternar entre eles. Embora você também possa usar a visualização de código e a visualização de edição para coexistir, ela ocupará metade do espaço da tela, tornando a já pequena área de edição ainda mais lotada. Existe uma maneira melhor? A resposta é sim.
Tomemos o Dreamweaver 8 como exemplo, supondo que o layout do painel do Dreamweaver de todos seja o layout padrão. Verifique se há uma linha de pequenos rótulos acima do painel de propriedades. (Se você não estiver usando MX, a tag estará na barra de status) Por exemplo: se você criar um novo documento HTML em branco, a pequena tag acima deverá ser <body>. Por favor, olhe a imagem abaixo:
O local marcado com moldura vermelha na foto é o nosso protagonista hoje. Vamos dar uma olhada em "tags wrap" primeiro. Digite algumas palavras na página, selecione-as, selecione "Wrap Tags" no menu do botão direito, digite "<strong>" (excluindo aspas) na caixa de diálogo pop-up Wrap Tags e pressione Enter. O texto selecionado anteriormente está em negrito? Vá para o código-fonte e dê uma olhada. O texto selecionado está cercado por tags <strong>? Você pode tentar adicionar outras tags, como: <a>, <p>. Você também pode inserir atributos diretamente aqui. Por exemplo: <p style="color:#CC0000">. Aqui está apenas uma explicação geral. Se você tiver alguma dúvida, consulte a ajuda do Dreamweaver.
Vamos falar sobre como aplicar o seletor de tags.
Quando movermos o cursor para o texto em negrito agora, descobriremos que há um <strong> adicional após <body>. Isso significa que há uma tag <strong> fora do texto onde o cursor está localizado e uma tag <body> fora da tag <strong>. A seguir, vamos adicionar outra tabela, mover o cursor até a tabela e ver a estrutura das tags. Acredito que amigos com algum conhecimento básico de HTML devem ser capazes de entendê-lo facilmente.
Suponha que agora queiramos inserir uma tabela e usar CSS para mover a tabela 10 pixels para baixo. Primeiro insira uma tabela e depois mova o cursor para dentro da tabela. Neste momento, você deverá ver as palavras <body><table><tr><td> no seletor de tags. Em seguida, clique com o botão direito no rótulo da tabela e você verá quatro opções. Exclua tags, edite tags, defina classes e defina IDs.
Excluir tag: exclui a tag. (Existem algumas tags especiais que não podem ser excluídas. Por exemplo: <table>, <tr>, <td>, <body>...)
Editar tags: anexe atributos a tags, modifique atributos, etc.
Definir classe: Anexe uma classe a esta tag. (ou seja, categorias de CSS)
Definir ID: Anexe um ID a esta tag. (ou seja, ID CSS)
Aqui, escolhemos editar a tag e, em seguida, adicionamos o atributo style="margin-top:10px" no final, que é igual à forma normal de escrever código-fonte. Em seguida, pressione Enter. A edição está completa. Se você não conseguir ver o efeito no Dreamweaver, use o navegador para visualizar.
Existe outra maneira que você pode gostar. Selecione Janela → Tag Inspector Quando você seleciona uma tag, todos os atributos da tag atualmente selecionada serão exibidos aqui. Você também pode editar rapidamente aqui. Os atributos inseridos aqui não precisam incluir aspas. Pressione Enter após a edição para confirmar.
Aqui apenas informamos o método e esperamos que todos possam se beneficiar dele.
