Para criadores profissionais de páginas da web que desejam criar páginas da web complexas em um ambiente visual, o Dreamweaver emergiu gradualmente no mercado de ferramentas de edição de páginas da web e se tornou a melhor escolha para profissionais escreverem páginas da web. A julgar pela situação atual, pode-se dizer que as funções integradas do Dreamweaver são cada vez mais abundantes, ricas e completas. Aqui gostaria de apresentar algumas dicas de aplicação na versão 4.0.
1. Torne as páginas da web mais flexíveis. Alguns desenvolvedores da web chamam a técnica apresentada abaixo de líquida, mas eu chamo essa técnica aqui de elástica (técnica de extensão flexível). Esta é uma técnica que pode ajustar o tamanho da página web quando o tamanho da janela do navegador do visitante muda. Portanto, se a janela for muito grande, não haverá espaço em branco, e se a janela for muito pequena, o up e. a barra de movimento para baixo não aparecerá na borda. Na verdade, a maioria das páginas da web simples ajustará automaticamente o tamanho da página de acordo com o tamanho da janela do navegador. No entanto, se muitos quadros e tabelas diferentes forem usados na página da web, será difícil que o tamanho da página da web seja ajustado automaticamente e. ajustado de forma flexível. Normalmente, os web designers usam uma mistura de quadros de largura de coluna fixa e imagens GIF como intervalos para projetar páginas da web. Dessa forma, seja usando o Internet Explorer ou Mac, o tamanho da página será fixo e não desaparecerá. Com o Dreamweaver 4.0, você pode criar facilmente páginas da Web que se ajustam automaticamente e de forma flexível. Como fazer isso?
Abra a página da web usando os botões da paleta de objetos e alterne para a visualização Layout. Neste momento, você pode ver a largura da coluna da caixa de texto. Há uma pequena seta suspensa no meio da caixa acima de cada coluna e selecione a pequena seta acima da coluna na qual deseja definir a exibição flexível. em seguida, selecione "Tornar coluna flexível" Exibir "(Fazer alongamento automático da coluna). (Defina o ajuste automático da largura da coluna para ser limitado a uma coluna) Neste momento, uma linha ondulada aparecerá acima da caixa da coluna em vez do número original indicando a largura da coluna. O Dreamweaver criará automaticamente um arquivo de imagem em branco com layout fixo. Esse arquivo de imagem em branco é representado por duas longas tabelas em branco acima das colunas. Dessa forma, o layout será preenchido automaticamente e a configuração do layout flexível será concluída. (Quando você adiciona um arquivo de imagem em branco pela primeira vez, uma caixa de diálogo aparecerá perguntando se você deseja usar o arquivo de imagem integrado. Para obter o melhor efeito, recomendo que você deixe o Dreamweaver gerar um automaticamente, caso contrário você não é necessário usar um arquivo de imagem em branco para preencher o layout.)
2. Crie uma paleta de cores personalizada O novo painel Ativos do Dreamweaver 4.0 é uma nova ferramenta que pode gerenciar arquivos de acordo com os tipos de arquivo, como imagens, modelos, etc. ., ao editar um site Quando você define um novo site (Selecionar Site · Novo Site), todos os tipos de componentes serão automaticamente adicionados às caixas apropriadas no painel Ativos. Este novo painel Ativos também possui uma caixa de cores no painel de controle de propriedades, que armazena todas as cores usadas em seu site, incluindo cores de texto, cores de fundo e cores de link. Esta é uma paleta de cores orientada para o site e adaptada aos usuários. Basta ativar o painel Ativos (selecione primeiro Janela, depois Ativos) e, em seguida, selecione a pequena barra de rolagem colorida à esquerda e você verá uma variedade de opções de cores para o seu site. Claro que você pode usar essas cores para determinado texto selecionado. Mesmo quando você seleciona uma cor, o valor hexadecimal da cor e o código correspondente de três cores (RGB) aparecerão na tela. Se quiser diminuir a barra de ferramentas da paleta, você pode até adicionar apenas determinadas cores aos Favoritos da paleta. Basta destacar a cor selecionada, selecionar um botão chamado “Adicionar aos Meus Favoritos” na janela (o botão inferior direito) e pronto.
3. Criando um sistema de navegação de menu pop-up Originalmente, criar um sistema de navegação de menu pop-up exigia algumas habilidades de sintaxe JavaScript, mas se você tiver o Dreamweaver/Fireworks Studio instalado, isso pode ser feito rapidamente. Primeiro, inicie no Fireworks, selecione uma imagem e, em seguida, selecione Inserir·Menu pop-up na caixa de diálogo Definir menu pop-up. Você pode inserir o nome dos itens e selecionar o botão Mais para adicionar o projeto. Você pode continuar a fazer configurações detalhadas na caixa de mensagem pop-up, como definir o texto e os links a serem usados para o item. Claro, você também pode adicionar submenus e reorganizar as configurações para o próximo nível. Quando terminar, selecione Próximo para continuar definindo preferências como cores, fontes e muito mais. Após a conclusão do menu, você pode visualizar a sintaxe HTML e a imagem. Em seguida, selecione Concluir. Neste momento, quando o mouse se move para o padrão original, uma lista do conteúdo do sistema de menus aparecerá. Então, quando você exportar o arquivo criado, o Fireworks gerará automaticamente todos os arquivos HTML, JavaScript e de imagem necessários ao Dreamweaver.
4. Faça o arquivo de imagem se mover!
Se você tiver o Dreamweaver/Fireworks Studio instalado ao mesmo tempo, ficará surpreso com a combinação perfeita desses dois produtos. Mesmo que você não seja um designer gráfico profissional, ainda deseja modificar alguns arquivos de imagem GIF para torná-los mais vívidos ao projetar páginas da web. O Dreamweaver permite criar animações sem perguntar a ninguém! Selecione a imagem que deseja modificar na janela padrão e selecione o botão Editar no Inspetor de propriedades. Se o Fireworks estiver incluído na instalação do Dreamweaver, o Fireworks será o editor de imagens padrão do Dreamweaver e as imagens serão carregadas automaticamente no Fireworks. (Se você olhar com atenção, verá que textos e gráficos como Editing From Dreamweaver aparecerão na tela do Fireworks, indicando que você pode editar imagens no Dreamweaver.) Pronto, agora selecione a imagem a ser editada no Fireworks e selecione Modificar· Animar ·Animar Seleção. A seguir, conclua as configurações na caixa de diálogo Animar, selecione o número de quadros da animação, a direção do movimento da animação, a transparência, etc. Você também pode selecionar a barra de ferramentas Molduras para definir a velocidade do movimento e selecionar o painel Objeto para alterar as configurações. Para exportar o arquivo, basta selecionar a barra de ferramentas Otimizar e selecionar GIF animado como tipo de arquivo. Após a conclusão, o Fireworks exportará automaticamente a imagem com configurações otimizadas, atualizará automaticamente o arquivo de imagem GIF e exibirá o arquivo de imagem atualizado no Dreamweaver. Selecione Arquivo·Visualizar no navegador, para que você possa visualizar a linda imagem que acabou de criar no navegador!
5. Faça com que o botão tenha um efeito intermitente No Dreamweaver, você pode criar um objeto de botão Flash com efeito intermitente sem ter um programa Flash. A versão 4.0 possui vários objetos de botão Flash integrados, que podem criar diversas formas diferentes de botões. Selecione Inserir·Imagens interativas·Botão Flash para ver quais botões integrados estão disponíveis. Você pode até usar o mouse para apontar para o formato do botão que deseja usar na caixa de diálogo e ver como ele funciona no navegador. Use o cursor do mouse para selecionar o formato do botão que deseja usar e, em seguida, insira os parâmetros em sequência, como texto, fonte, cor, link, etc. no botão ou um nome de arquivo personalizado. Pressione OK. A seguir, um arquivo SWF será gerado e colocado automaticamente em sua página web. Clique no arquivo concluído e você verá as propriedades do arquivo exibidas no Property Inspector. Ao exibir os atributos do arquivo, se você expandir a lista de atributos do arquivo, um botão Reproduzir aparecerá. Após selecioná-lo, você poderá visualizar o efeito intermitente do botão sem abrir o navegador.
6. Crie texto corrido Adicionar texto corrido a uma página da web é tão fácil quanto adicionar o botão Flash que acabei de apresentar. Da mesma forma, você não precisa instalar o Flash, você pode fazer isso facilmente com os novos recursos fornecidos pelo Dreamweaver 4.0. Os criadores de páginas da Web que normalmente usam a sintaxe HTML para escrever páginas da Web e não têm experiência em mídia interativa podem criar facilmente texto fluido e compacto na forma de Flash. De acordo com a Macromedia, 97% dos usuários da Internet podem visualizar páginas da web com efeitos Flash, portanto, esse novo recurso pode adicionar alguma interatividade à navegação e aos leitores das páginas da web sem adicionar problemas de compatibilidade. Selecione Inserir · Imagens interativas · Texto Flash e, em seguida, preencha as configurações de preferência uma por uma (como texto, estilo da fonte, cor da fonte, tamanho da fonte, etc. cujo efeito deseja alterar).
7. Alterar atalhos de teclado O Dreamweaver permite aos usuários personalizar a interface. Este design é muito flexível. Por exemplo, os usuários podem alterar o menu escrevendo programas ou adicionando objetos. Você não precisa ser um especialista para alterar os atalhos de teclado, porque o Dreamweaver possui uma interface gráfica chamada Editor de atalhos de teclado. Basta selecionar Editar · Atalhos de teclado e a caixa de diálogo carregará e listará uma lista de teclas de atalho que podem ser alteradas. permitindo que você altere rapidamente a chave para o valor de configuração com o qual você está acostumado. Para alterar uma tecla de atalho, basta usar os menus suspensos da lista Conjunto atual e Comando, encontrar o comando que deseja alterar entre os comandos existentes e selecionar a tecla de atalho atual. Ela aparecerá na lista de teclas rápidas. na lista de chaves. Além disso, se desejar adicionar uma configuração de tecla rápida, você pode selecionar o botão Mais, digitar a nova tecla representativa rápida que deseja usar no teclado e selecionar Alterar. Ao mesmo tempo, você também pode selecionar uma tecla de atalho e selecionar a tecla Remover (Menos) para remover uma tecla de atalho.
8. Redefina a largura da coluna da janela do Site. Basta selecionar Exibir·Colunas de visualização de arquivos na janela do Site para personalizar o tamanho e a apresentação da largura da coluna ao visualizar a visualização do Site. Selecione uma coluna de nomes e use as setas para cima e para baixo para redimensionar ou desmarque Mostrar campo para ocultar a coluna. Além disso, você também pode adicionar colunas selecionando o botão Mais e criar seus próprios nomes de colunas. Além disso, você pode associar uma coluna a uma Design Note selecionando uma nota existente no menu suspenso.
9. Leia o arquivo da página da web original Ao abrir o O'Reilly Code Reference (Janela · Referência) para verificar as propriedades ou a compatibilidade do navegador, a janela padrão exibirá as configurações de referência em fontes pequenas. Mas se você pressionar o botão direito no canto superior direito da janela (logo abaixo do botão Fechar), uma linha de menus suspensos aparecerá onde você pode selecionar o tamanho da fonte do documento original (pequeno, médio e grande). . Escolher fontes grandes é menos prejudicial aos olhos porque você não precisa segurar uma lupa para olhar a tela ao visualizar o arquivo HTML original!
10. Adicione um novo botão Flash Acima, ensinei como usar 20 tipos de botões predefinidos para criar botões Flash no Dreamweaver. Este método não requer a instalação de nenhum arquivo ou programa adicional. Há outro método abaixo, que é instalar botões do Fireworks. Esta função estendida tem o mesmo efeito da Dica 5. Vá para Exchange for Dreamweaver (centro de troca de extensões do Dreamweaver), digite a pesquisa por palavra-chave "InstaGraphics Extensions for Dreamweaver" e baixe este arquivo de 577K. Mude para o Dreamweaver, selecione Comandos·Gerenciar extensões e selecione Arquivo·Instalar extensão para iniciar a instalação. Depois que o Dreamweaver for reativado, haverá seis tipos de botões novos e interessantes, incluindo Surfboard e Bulletbar. Neste momento, basta usar o comando Inserir · Imagens interativas · Botão Fireworks para criar um botão legal. Você também pode usar comandos ·Converter marcadores em imagens e comandos ·Converter texto em imagens Ambos os métodos acima podem executar o Fireworks automaticamente.
11. Adicione a função "Definir como Favoritos" à página da web e pesquise no Exchange, você pode encontrar a função de extensão Adicionar aos Favoritos. Este pequeno arquivo ocupa apenas 3K e o tempo de download não demorará muito. Em seguida, siga os mesmos passos para carregá-lo do Gerenciador de extensões (Comandos · Gerenciar extensões, Arquivo · Instalar extensão). Em seguida, reative o Dreamweaver. Este arquivo de extensão recém-carregado adicionará um novo recurso ao Dreamweaver. Se você adicionar esta função "adicionar aos favoritos" à sua página da web, quando um usuário da Internet visitar o seu site, ele poderá facilmente adicionar o seu site aos favoritos do navegador com apenas um clique (ou marcadores pessoais). Além disso, você também pode personalizar o nome do atalho favorito e o pequeno ícone que aparecerá na frente do nome do atalho favorito (geralmente, o pequeno ícone na frente do atalho favorito no IE é o valor padrão do IE. Se você tenha o seu próprio O pequeno ícone projetado é muito mais legal Observe que esta função só suporta navegadores com IE 4.0 e superior. Basta selecionar o painel Comportamento no menu do Windows e selecionar esta opção no menu suspenso de funções do IE.
quer criar um gráficolegal
, você ainda precisa perder tempo digitando o código-fonte da página da web. Já existe um gráfico pronto para baixar no Exchange. A extensão Form Builder possui um formulário pronto que permite que você faça isso! para copiar instantaneamente um formulário contendo campos como país, sexo, estado civil, faixa etária e outras categorias Baixe este pequeno arquivo (apenas 11K) do Exchange e use o Gerenciador de extensões Instale-o (Comandos·Gerenciar extensões, Arquivo. ·Instalar extensão). Em seguida, basta reativar o Dreamweaver e selecionar Inserir·FormBuilder, e você encontrará o arquivo de extensão em (Inserir·FormBuilder). Após selecionar, uma caixa de diálogo aparecerá, todos os menus de formato aplicáveis serão exibidos.