2. Modifique rapidamente o título do arquivo. Muitas vezes, quando criamos novos arquivos, muitas vezes ignoramos o conteúdo do título do arquivo. Quando precisamos modificá-lo posteriormente, muitas vezes temos que abrir cada arquivo e modificá-lo separadamente. Na verdade, este trabalho pode ser facilmente concluído na janela do site. Abra Mostrar títulos de página no menu Exibir da janela do site para fazer com que os arquivos na janela do site exibam o cabeçalho do arquivo em vez do nome do arquivo original. O cabeçalho do arquivo padrão é Documento sem título. Podemos clicar duas vezes para alterar o texto padrão para o cabeçalho do arquivo que precisamos. Como mostrado na imagem:
3. Gere mapas do site rapidamente. Às vezes precisamos fazer um mapa do site que contenha todas as estruturas de arquivos do site atual e não conseguimos encontrar um método adequado. O próprio Dreamweaver tem esta função. O método é o seguinte: Abra o comando Arquivo – Salvar mapa do site e insira o nome do arquivo salvo na caixa de diálogo pop-up. O Dreamweaver gerará automaticamente um site no formato .bmp ou .png no diretório raiz. da imagem atual do site.
2. Técnicas na fase de layout da página
O Dreamweaver não é apenas uma boa ferramenta de criação de páginas, mas também pode executar composição e layout precisos de páginas. Nesta seção, apresentamos diversas técnicas de layout de páginas.
1. Abra o formulário auxiliar. Amigos que fizeram design especialmente esperam posicionar com precisão os elementos da página da web. Eles gostam que cada elemento possa ser posicionado com precisão de acordo com seus desejos. A função Grid que vem com o Dreamweaver pode ajudar a concretizar essa esperança. Execute o comando Exibir—Editar grade para ativar a assistência de coordenadas. Você pode escolher a exibição de grade ou ponto e ativar Ajustar à grade. Ao inserir ou adicionar novos elementos no futuro, eles serão posicionados com precisão de acordo com suas configurações.
2. Use técnicas de página de layout de tabela. O uso adequado da função de tabela no Dreamweaver pode facilmente atingir o objetivo de embelezar a página. Apresentarei algumas técnicas a seguir.
1) Crie uma borda de 1px. Alguns amigos reclamam que o Dreamweaver não pode criar uma borda de tabela de pixel único. Na verdade, você pode criar uma tabela de pixel único usando cuidadosamente o painel de propriedades da tabela. Primeiro use o painel Objeto para inserir uma tabela e definir a largura, altura, linhas e colunas da tabela. Neste momento, o CellPad, CellSpace e Border padrão da tabela inserida no Dreamweaver são todos 0. Defina a Borda da tabela no painel de propriedades como 0, CellPad como 5 (isso manterá 5 pixels entre o conteúdo da célula e a borda da célula será 1 (isso manterá 1 pixel entre as células) com espaçamento entre elas); Unid). Defina a cor de fundo da tabela para uma cor escura (como #999999) e defina a cor de fundo das células para uma cor clara (como #FFFFFF). Basta navegar e observar o efeito.
2) Importe a tabela de dados. Às vezes, precisamos importar algumas tabelas criadas em arquivos do Excel para o Dreamweaver. Podemos salvar os arquivos originais do Excel como arquivos de texto .txt delimitados por tabulações. A execução de Inserir — Data tabular no Dreamweaver abre a seguinte janela:
Após adicionar cada parâmetro, os dados podem ser importados para uma tabela no Dreamweaver.
3) Formate a tabela. Se você está cansado de definir repetidamente os parâmetros de cada célula, pode usar o comando Formatar tabela para formatar rapidamente a tabela. Este comando está no menu Comando. Este comando vem com vários esquemas de cores da tabela. aplicará automaticamente o esquema de cores à tabela que você selecionou. Como mostrado na imagem:
4. Intercâmbio entre tabelas e camadas. Alguns amigos gostam de organizar o conteúdo de suas páginas livremente, mas não gostam da forma como as tabelas funcionam. Na verdade, você pode usar camadas flexíveis para organizar o conteúdo da página e depois convertê-lo em uma tabela quando estiver satisfeito. Selecione a camada que deseja converter e execute o comando Modificar—Converter—Camadas em Tabela. Como mostrado na imagem:
5. Atualize várias páginas de quadros ao mesmo tempo. É necessário atualizar o conteúdo de duas ou mais páginas de quadro ao mesmo tempo quando um link é clicado. Isso pode ser feito usando o comportamento do Dreamweaver através das etapas a seguir.
1) Selecione o texto ou imagem do link.
2) Abra o painel Comportamentos (Comportamentos) e clique no sinal de mais para adicionar o comportamento Ir para URL.
3) Na caixa de diálogo Ir para URL, todas as janelas de quadro existentes são exibidas. Selecionamos um nome de janela respectivamente e podemos definir individualmente o conteúdo do arquivo a ser atualizado em cada janela. O Dreamweaver adicionará um sinal “*” após a janela onde o arquivo de destino está definido, indicando que o URL foi definido para esta janela de quadro.
4) Clique em OK após a conclusão. Ao clicar neste link, o conteúdo de várias janelas será atualizado ao mesmo tempo.
3. Conteúdo
Como organizar o conteúdo de forma mais rápida e prática é o que todo amigo quer saber. Você pode ou não conhecer as dicas a seguir, mas o importante é que com o uso contínuo você descobrirá suas vantagens.
1. Edição rápida de etiquetas. Para amigos familiarizados com código manuscrito, muitas vezes eles precisam mudar para a janela de código para adicionar algum código manualmente. Na verdade, você pode inserir rapidamente várias tags HTML usando o Quick Tag Editor do Dreamweaver. Uma delas é clicar no painel de propriedades.
Inserção de ícone, outro atalho é Ctrl+T, ambos os métodos abrirão a edição rápida de tags, você pode selecionar diretamente a tag de código-fonte necessária na lista, conforme mostrado abaixo:
2. Adicione bordas de imagem rapidamente. Muitas imagens inseridas em páginas da web não têm bordas. Às vezes, precisamos adicionar bordas às imagens. Não precisamos abrir um software de processamento de imagens para conseguir isso. Um método é selecionar a imagem e definir diretamente a Borda para 1px no painel de propriedades, o que adicionará uma borda de 1 pixel à imagem. O outro método é definir um estilo. com 1px em todos os lados Então todas as imagens inseridas na página web terão a mesma borda. Como mostrado na imagem:
3. Use o recurso de arrastar para adicionar links. O Dreamweaver suporta arrastar links diretamente do documento para outros arquivos do site. Podemos colocar a janela do site e a janela do documento lado a lado, conforme mostrado na figura:
Em seguida, selecione o texto que precisa ser vinculado no documento, abra o painel de propriedades e aponte Apontar para Arquivo após a barra de endereço do link para o arquivo de destino na janela do site, conforme mostrado abaixo:
4. Como adicionar som de fundo. Muitos amigos ficam um pouco confusos sobre a inserção de alguns arquivos de som multimídia no Dreamweaver. Na verdade, é muito simples Clique na aba no canto inferior esquerdo da janela de trabalho do Dreamweaver, abra o painel Comportamento, clique no sinal + no. janela pop-up de comportamento, selecione Reproduzir som e selecione Os arquivos de som necessários podem ser adicionados. Selecione o logotipo do arquivo de som na janela do documento e clique em Parâmetros no painel de propriedades para definir o número de loops da música de fundo, se será reproduzida automaticamente e outras propriedades, conforme mostrado na figura:
4. Embelezamento
Embelezar vários elementos de uma página da web é uma tarefa demorada e nem sempre eficaz. As dicas a seguir podem ajudá-lo um pouco.
1. Crie esquemas de cores rapidamente. Freqüentemente, precisamos definir a cor do texto de cada status do link. Alguns amigos acham que seu senso de cores não é muito bom, por isso sempre procuram alguns manuais de correspondência de cores. Na verdade, o próprio Dreamweaver já vem com alguns esquemas de cores. Abra o comando Commands-Set Color Scheme e podemos ver que existem muitos conjuntos de esquemas de cores, cada um dos quais define a cor de fundo, a cor do texto e a cor de cada link. estado Você só precisa selecionar Apenas um tipo é suficiente, veja a imagem abaixo:
2. Habilidades de estilo de link CSS. Os links de texto geralmente têm quatro estados: link, foco, ativo e visitado. Geralmente, definimos cores e estilos diferentes para cada estado dos links de texto. A principal razão é que existem certos requisitos para a ordem de definição dos links na folha de estilo. A ordem correta é: A:link—A:visited—A:hover. Na verdade, para amigos comuns, muitas vezes eles só querem que o status de foco mude. Um pequeno truque não é definir o estilo do link de acordo com o método acima, mas apenas definir os estilos de a e a:hover status, para que. existe apenas o status de foco. O estilo é diferente de outros estados. O método de modificação é mostrado abaixo;
3. Crie texto de conexão e sublinhados em cores diferentes. O texto do link comum e o sublinhado do link têm a mesma cor. Na verdade, também podemos usar o atributo Border na folha de estilos para substituir o sublinhado dos links comuns. a finalidade pode ser alcançada por diferentes definições de cores de texto. Por exemplo, podemos definir o texto como preto e o sublinhado como vermelho na opção Borda, conforme mostrado abaixo;
5. Técnicas para melhorar a eficiência
O Dreamweaver também contém muitos comandos que podem melhorar significativamente a eficiência do trabalho, incluindo a criação de projetos de biblioteca, o uso de modelos, a função do painel de histórico e a função de pesquisa e substituição. Aqui apresento alguns pequenos truques para demonstrar o poder desses comandos.
1. Dicas para limpar arquivos do Word. Freqüentemente, precisamos converter alguns arquivos do Word em arquivos HTML, mas o resultado dessa conversão é que os arquivos HTML gerados são muito grandes e contêm muito código repetido. O uso de várias funções do Dreamweaver pode facilmente limpar o código inútil. Primeiro, abra o arquivo HTML gerado pelo Word e execute o comando Clean Up Word HTML no menu Comandos. O programa identificará automaticamente a versão original do Word e removerá o código inútil. No entanto, o arquivo neste momento ainda contém muito código repetido, principalmente contendo um grande número de
tags e. Podemos executar o comando Limpar HTML no menu Comandos novamente, selecione a opção Tag(s) Específica(s) no pop-up. caixa de diálogo up e insira as tags span e p, separadas por espaços. Depois de executar o comando, todas as tags span e p serão limpas.
Mas neste momento, cada atributo de imagem no arquivo também contém atributos semelhantes a v:shapes="_x0000_i1025", e ainda precisamos limpar esses atributos. Abra o painel Localizar e Substituir e defina as regras de substituição conforme mostrado abaixo. Após a execução, esses atributos de todas as imagens serão apagados. Conforme mostrado na imagem;
2. Substitua rapidamente os títulos dos arquivos. Anteriormente, apresentei que você pode substituir o título do arquivo na janela do site, mas só pode substituir o título de um arquivo por vez. Podemos tentar usar o comando localizar e substituir introduzido na etapa anterior para substituir os títulos de vários. arquivos de uma vez. Normalmente, os títulos de nossos arquivos recém-criados são Documento sem título. Você pode abrir o comando Editar-Localizar e substituir e fazer as seguintes configurações para substituir todos os arquivos no site atual intitulado Documento sem título por nossos próprios títulos.
3. Defina o formato de documento padrão. Embora o método acima seja rápido, sempre que criamos um novo arquivo, o título padrão do arquivo ainda é Documento sem título. Porque ao criar um novo documento, o Dreamweaver chamará uma página padrão como formato padrão. Este arquivo é Dreamweaver 4ConfigurationTemplatesDefault.html, para que possamos definir alguns formatos unificados em nosso site, como a cor de fundo. , tamanho da fonte, título do arquivo, etc., salve-o substituindo o arquivo Default.html acima. Quando criarmos novos arquivos no futuro, o Dreamweaver aplicará automaticamente o formato que definimos, o que pode melhorar muito a eficiência do trabalho.
6. Pós-manutenção
Ok, depois de tantas apresentações acima, dominamos algumas habilidades de produção de páginas da web, mas sua página finalizada não conterá mais erros? Seus links são todos os links corretos? Sua página tem um bom desempenho em todos os navegadores? Você ainda tem muitos arquivos em seu site que não precisa mais? Muitos problemas semelhantes ainda existem, e estes pertencem à posterior detecção e manutenção do site. Aqui apresentamos mais algumas técnicas de pós-detecção.
1. Detecção de link. Execute o comando Arquivo-Verificar links do menu, o Dreamweaver detectará automaticamente todos os links no site atual e detectará links inválidos, conforme mostrado abaixo:
Clicar duas vezes em um resultado detectado abrirá automaticamente a página correspondente e localizará diretamente o link errado, o que é muito conveniente para modificarmos o erro do link.
2. Detecte rapidamente arquivos inúteis. Executar o comando de menu Site – Verificar links em todo o site pode ativar a função de detecção de arquivo de link. Também podemos usar esta função para verificar arquivos inúteis no site e excluí-los. Basta selecionar Arquivos Órfãos na caixa suspensa superior e todos os arquivos inúteis do site serão listados abaixo. Selecione todos eles e pressione a tecla Delete para excluí-los.
