1. Análise de antecedentes
Para produtores profissionais de páginas da web que desejam criar páginas da web complexas em um ambiente visual, o Dreamweaver emergiu gradualmente como uma ferramenta de edição de páginas da web e se tornou a melhor escolha para profissionais escreverem páginas da web. De acordo com pesquisa da Macromedia, o Dreamweaver conta atualmente com mais de 700 mil usuários, ocupando o primeiro lugar entre as ferramentas de edição web em termos de share, deixando para trás concorrentes como “Adobe GoLive” e “NetObjects Fusion”. Portanto, espera-se que o número de usuários do Dreamweaver continue a aumentar.
Sob esta taxa de popularidade esmagadora, é concebível que as funções integradas do Dreamweaver estejam se tornando cada vez mais abundantes, ricas e completas. Desta vez, em nossa introdução, há alguns novos recursos que fornecem aos criadores de páginas da web um design mais rápido, codificação mais fácil e funções mais integradas. Sem mais delongas, apresentamos aqui como fazer bom uso de algumas funções do Dreamweaver. Abaixo estão doze técnicas secretas, que podem ser divididas em quatro temas. São eles: projetar páginas da Web (o Dreamweaver possui funções flexíveis de design de página), usar o Dreamweaver com outros produtos Macromedia (criar animações e imagens sem pedir ajuda), personalizar a interface do usuário (desfrutar de uma experiência de usuário personalizada) e, finalmente, ingressar nas extensões do Dreamweaver ( carregar recursos avançados estendidos em páginas da web).
2. Dicas para projetar páginas da web
Se você deseja usar a sintaxe HTML original para escrever páginas da web palavra por palavra ou usar janelas padronizadas para design visual de páginas da web, as dicas a seguir podem ser úteis.
Dica 1: Torne o tamanho da página web mais flexível.
Alguns desenvolvedores web chamam a técnica apresentada abaixo de "líquida", mas aqui eles a chamam de "técnica de extensão elástica". Esta é uma técnica que ajusta 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, se a janela for muito pequena, o movimento para cima e para baixo; barras não aparecerão nas bordas. 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 frames de largura fixa e imagens GIF como intervalos para projetar páginas da web. Desta forma, seja usando o Internet Explorer ou o Netscape Navigator, 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 serão ajustadas de forma automática e flexível. Como fazer?
★Método específico: Use o botão na paleta de ferramentas (paleta de objetos) para abrir a página web e mudar para "Visualização de 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. Clique na pequena seta acima da coluna na qual deseja definir a exibição flexível. selecione "Definir coluna como fazer alongamento automático da coluna". (Defina a largura da coluna de ajuste automático para ser limitada 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 uma imagem em branco de layout fixo. Essa imagem em branco é representada por duas longas tabelas em branco acima da coluna. Dessa forma, o layout será preenchido automaticamente e a configuração do layout flexível será concluída. (Quando você adiciona uma imagem em branco pela primeira vez, uma caixa de diálogo aparecerá perguntando se você deseja usar uma imagem incorporada. Para obter o melhor efeito, recomendamos que você deixe o Dreamweaver gerar uma automaticamente, caso contrário você não o fará. precisa usar uma imagem em branco para preencher o layout.)
Dica 2: Crie uma paleta pessoal
O novo "painel de ativos" (painel de controle de propriedades) do Dreamweaver é uma nova ferramenta que pode gerenciar arquivos de acordo com formatos de arquivo, como imagens, estilos, etc. , ao editar um site.
★Método específico: Quando você define um novo site (clique em Site Novo Site), todos os tipos de objetos serão automaticamente adicionados às caixas de tabela apropriadas no "painel Ativos". Este painel de controle de propriedades "Painel de ativos" recém-adicionado também possui uma caixa de cores, que armazena todas as cores usadas em seu site, incluindo cor de texto, cor de fundo e cor de hiperlink. Esta é uma paleta de cores de navegação do site feita sob medida para os usuários. Basta iniciar o "painel Ativos" (selecione "Janela" primeiro e depois clique em "Ativos") e, em seguida, clique no pequeno pergaminho colorido à 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 determinada cor, o valor hexadecimal da densidade da cor e os três códigos de contraste de cores primárias (RGB) aparecerão na tela. Se quiser diminuir a barra de ferramentas da paleta, você pode até adicionar apenas algumas cores aos “favoritos” da paleta. Basta destacar a cor selecionada e clicar no botão “Adicionar aos Favoritos” na janela (o botão inferior direito) e pronto.
Dica 3: Criando um sistema de navegação de menu pop-up
Originalmente, criar um sistema de navegação de menu pop-up exigia muita sintaxe e técnicas de JavaScript, mas se você tiver o Dreamweaver e o Fireworks Studio, poderá fazê-lo facilmente e rapidamente.
★Método específico: Primeiro inicie em "Fireworks", selecione uma imagem e clique em "Inserir menu pop-up" na caixa de diálogo "Definir menu pop-up". Você pode inserir o nome dos itens (itens) e clicar. o botão "Mais" para adicionar o item. Você pode continuar a fazer configurações detalhadas na caixa de informações que aparece, como definir o texto e os hiperlinks a serem usados para o projeto. Claro, você também pode adicionar submenus e reorganizar as configurações para o próximo nível. Quando terminar, clique em “Avançar” para continuar definindo vários valores de parâmetros, como cor, fonte, etc. Depois que o menu for concluído, você poderá visualizar a sintaxe HTML e as imagens. Clique em “Concluir” novamente. Neste momento, quando o mouse se move para a imagem original, uma lista do conteúdo do sistema de menus aparecerá. Então, quando você exportar o arquivo criado, o "Fireworks" produzirá automaticamente todos os arquivos HTML, javascript e de imagem que o Dreamweaver precisa usar.
Dica 4: Faça as fotos se moverem
Se você tiver o Dreamweaver e o Fireworks Studio instalados ao mesmo tempo, ficará surpreso com a combinação perfeita desses dois softwares. Mesmo que você não seja um designer de imagens profissional, você pode querer modificar algumas imagens GIF para torná-las mais vívidas ao criar páginas da web. O Dreamweaver permite criar animações sem pedir ajuda.
★Método específico: Selecione a imagem a ser modificada na janela padrão e clique em "Editar" no "Inspetor de Propriedade". Se você instalou o Dreamweaver com o "Fireworks" incluído, 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 "Editando no Dreamweaver" aparecerão na tela do Fireworks, indicando que você pode editar imagens no Dreamweaver.) Pronto, agora clique na imagem que deseja editar em " Fireworks", selecione "Modificar seleção do Animate". A seguir, preencha 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 e outras configurações. Você também pode clicar na ferramenta “Molduras” para definir a velocidade do movimento e selecionar o painel “Objeto” para alterar as configurações. Quando quiser exportar um arquivo, basta clicar na barra de ferramentas “Otimizar” e selecionar “GIF animado” no tipo de arquivo. Após a conclusão, o "Fireworks" exportará automaticamente a imagem com configurações otimizadas, atualizará automaticamente a imagem GIF e exibirá a imagem atualizada no Dreamweaver. Clique em "Visualizar arquivo no navegador" para poder visualizar a linda imagem que acabou de criar no navegador.
Dica 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 Flashs. O Dreamweaver possui vários objetos de botão Flash integrados, que podem criar diversas formas diferentes de botões.
★Método específico: Clique em "Inserir botão Flash de imagens interativas" para ver os botões integrados. 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 ponteiro do mouse para selecionar o formato do botão a ser usado e, em seguida, insira os parâmetros em sequência, como texto, fonte, cor, hiperlink, etc. no botão ou um nome de arquivo personalizado. Pressione OK. A seguir será gerado um arquivo no formato “SWF” e o arquivo será importado automaticamente para sua página web. Clique no arquivo concluído e você verá as propriedades do arquivo exibidas no "Inspetor de Propriedades". Ao exibir os atributos do arquivo, se você expandir a lista de atributos do arquivo, "Play" aparecerá. Após clicar, você poderá visualizar o efeito intermitente do botão sem abrir o navegador.
Dica 6: Crie texto corrido
Adicionar texto corrido a uma página da web é tão fácil quanto adicionar o botão Flash que acabamos de apresentar. Da mesma forma, sem instalar o Flash, você pode fazer isso facilmente com os novos recursos fornecidos pelo Dreamweaver. 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 facilmente criar texto fluido e compacto na forma de Flash. Este novo recurso pode adicionar alguma interatividade de navegação às páginas da web sem adicionar problemas de compatibilidade. ★Método específico: Clique em "Inserir texto Flash de imagens interativas" e, em seguida, preencha as configurações dos parâmetros um por um (como texto, estilo da fonte, cor da fonte e tamanho da fonte cujo efeito deseja alterar, etc.).
Dica 7: Altere os atalhos do teclado
O Dreamweaver permite que os usuários personalizem a interface e esse design é muito flexível. Por exemplo, os usuários podem alterar o menu escrevendo programas ou adicionando objetos eles próprios. 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".
★Método específico: Basta clicar em "Editar atalhos de teclado" e a caixa de diálogo irá carregar e listar as teclas de atalho que podem ser alteradas, permitindo que você altere as teclas de atalho para as configurações com as quais está acostumado. Para alterar uma tecla de atalho, basta usar o menu suspenso do Conjunto Atual e da barra de Comandos, encontrar o comando que deseja alterar entre os comandos existentes e, em seguida, selecionar a tecla de atalho atual, ela aparecerá na lista de teclas de atalho. na lista. Além disso, se desejar adicionar configurações de teclas de atalho, você pode clicar em "Mais", digitar a nova tecla representativa de atalho que deseja usar no teclado e clicar em "Alterar". Ao mesmo tempo, você também pode selecionar uma tecla de atalho e clicar em “Menos” para remover uma tecla de atalho.
Dica 8: Redefina a coluna da janela do site
★ Método específico: Basta clicar em "Exibir colunas de visualização de arquivos" na "Janela do site" para visualizar o tamanho e a aparência da coluna de visualização do site. Selecione um nome de campo e use as setas para cima e para baixo para redimensioná-lo ou desmarque Mostrar campo para ocultar o campo. Além disso, você também pode adicionar colunas e criar seus próprios nomes de colunas clicando no botão “Mais”. Alternativamente, você pode associar uma coluna a uma "Nota de projeto" selecionando uma "nota" existente no menu suspenso.
Dica 9: Visualize o código original da página da web
★ Método específico: Quando você abre "Reilly Code Reference" (Window Reference) para verificar as propriedades ou compatibilidade do navegador, a janela padrão exibirá "Reference Settings" em letras 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 código original (pequeno a médio e grande). Escolher fontes grandes é menos “abusivo” aos olhos porque você não precisa segurar uma lupa para olhar a tela ao ler o código HTML original.
Dica 10: Adicione um botão Flash
Na Dica 5, apresentamos como usar 20 tipos de botões predefinidos para criar botões Flash no Dreamweaver. Este é um método que não requer a instalação de nenhum arquivo ou programa adicional. Existe outro método abaixo, que é instalar "Botões do Fireworks". Esta extensão tem o mesmo efeito da Dica 5.
★Método específico: Vá para "Exchange for Dreamweaver" (centro de troca de extensões do Dreamweaver), digite a palavra-chave de pesquisa "InstaGraphics Extensions for Dreamweaver" e baixe este arquivo de aproximadamente 577K. Mude para o Dreamweaver, selecione "Commands Manage Extensions" e selecione "File Install Extension" para iniciar a instalação. Depois de reiniciar o "Dreamweaver", haverá seis novos e interessantes formatos de botão, incluindo "Surfboard" e "Bulletbar". Neste momento, basta usar o comando "Insert Interactive Images Fireworks Button" 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 automaticamente o "Fireworks".
Dica 11: Adicione a função "Definir como Favoritos" à página web ★ Método específico: Pesquise em "Exchange" e você encontrará a função estendida de "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, Extensão de instalação de arquivo). Em seguida, reinicie o Dreamweaver. Este arquivo de expansão recém-carregado adicionará um novo recurso ao Dreamweaver. Se você adicionar esta função "Adicionar à minha coleção" à sua página da web, quando o usuário visualizar o seu site, ele poderá facilmente adicioná-lo à "Minha coleção" do navegador com apenas um clique (ou favoritos pessoais). Além disso, o mais legal é que você também pode personalizar o nome de “Meus Favoritos” e o pequeno ícone que aparecerá na frente do nome de “Meus Favoritos” (geralmente o pequeno ícone na frente de “Meus Favoritos” no IE é o valor padrão do IE, se você tiver um pequeno ícone desenhado por você mesmo, será mais deslumbrante). Observe que este recurso oferece suporte apenas a navegadores que usam IE 4.0 e superior. Basta selecionar o painel "Comportamento" no menu "Windows", ir ao menu suspenso de funções do IE e clicar nesta função para ativar facilmente esse recurso interessante.
Dica 12: Gráficos super legais
Se você quiser fazer um formulário, ainda precisa gastar tempo escrevendo o código original da página web literalmente. Não há necessidade, já existe um
método específico: Vá para
!Troque e baixe a “extensão Form Builder”, Existem tabelas prontas que permitem copiar instantaneamente tabelas que incluem: país, sexo, estado civil, faixa etária e outras categorias. Vá para o Exchange para baixar este arquivo pequeno (apenas 11K) e instale-o através do "Gerenciador de extensões" (Comandos Gerenciar extensões, Extensão de instalação de arquivo). Depois é só reiniciar o Dreamweaver, clicar em “Inserir FormBuilder”, e você encontrará a função estendida em (Inserir FormBuilder). Após clicar, aparecerá uma caixa de diálogo que exibirá todos os menus de formato aplicáveis, o que é muito conveniente.