Fluxo de trabalho de alto nível que descreve a criação e o desenvolvimento de sites usando o Dreamweaver

Este artigo ajuda a entender como você pode concluir vários estágios ou fases de desenvolvimento da Web usando o Dreamweaver.

Observação:

Este artigo assume que você tenha um nível de entendimento de iniciante a intermediário do domínio da Web e de HTML, CSS e JavaScript.

  1. O primeiro estágio do processo de desenvolvimento da Web é a fase de planejamento, na qual você analisa as necessidades do público-alvo e as exigências técnicas e de mercado. Você também coleta informações necessárias para desenvolver e publicar seu site e tem respostas para perguntas como estas:

    • Que provedor de serviços devo escolher para hospedar o site? Posso fazer o upload de arquivos no servidor de publicação?
    • Que nome de domínio deve ser usado para o site?
    • Se você estiver migrando sites existentes para o Dreamweaver, onde os arquivos e os ativos estão armazenados no momento? Tenho acesso ao servidor onde essas informações estão armazenadas?
    • Se você quiser um site dinâmico, que servidor posso usar para testar se os dados estão sendo exibidos dinamicamente? Tenho os detalhes do servidor de aplicativo web que desejo usar para fazer upload de dados dinâmicos?
    • Que tipo de ativo é necessário para o site?
    • Eles serão ativos criados do zero? Se os ativos já estiverem disponíveis, tenho acesso a eles?
    • Quais aplicativos desejo usar para desenvolver ativos?
    • Planejo criar um site responsivo? 

    Supondo que você tenha um entendimento claro do site que deseja desenvolver e de como e onde quer hospedá-lo e tenha escolhido o Dreamweaver e a Creative Cloud para o processo de desenvolvimento da Web, prossiga para a próxima etapa.

  2. Verifique se você tem todos os ativos necessários para o seu site. Recolha-os e organize-os em suas pastas locais ou nas Bibliotecas da Creative Cloud da Adobe.

  3. Crie um novo documento no Dreamweaver usando:

    • Um novo documento em branco,
    • Modelos iniciais incluídos no Dreamweaver ou 
    • Os arquivos de modelo (*.dwt) criados por outra pessoa

    Observação:

    Se você não estiver familiarizado com o Dreamweaver ou estiver apenas aprendendo o desenvolvimento da Web, os modelos iniciais servem de grande ajuda para colocar seu desenvolvimento de páginas da Web em ação.

    Mesmo se você estiver planejando começar do zero, recomenda-se dar uma olhada nessas páginas para entender os elementos de um bom design de página da Web.

  4. Reserve alguns minutos para se familiarizar com a área de trabalho do Dreamweaver. Localize uma área de trabalho com a qual você se sinta confortável com e defina um tema de cores. Reorganize os diferentes painéis de uma maneira que atende às suas necessidades.

  5. Configure seu site no Dreamweaver. Defina a criação de uma estrutura de pastas com arquivos e ativos. Depois de organizar suas informações e determinar uma estrutura, você pode começar a criar seu site. (Consulte Sobre sites do Dreamweaver.)

    Neste estágio, recomenda-se configurar também conexões com servidores remotos e configurar servidores de teste (se você tiver conteúdo dinâmico). 

  6. Inicie a codificação de suas páginas da Web na Visualização de código ou as desenvolva na Visualização de design/dinâmica.

    Se você planeja utilizar as composições do Photoshop, poderá extraí-las no Dreamweaver e trabalhar nelas também. Para obter mais informações sobre como trabalhar com composições do Photoshop, consulte Extract no Dreamweaver CC.

    Adicione elementos de design, como texto, imagens, imagens de sobreposição, mapas de imagem, cores, filmes, sons, links HTML, tabelas e muito mais.

  7. Defina a aparência de sua página da Web usando o CSS. 

    Você pode trabalhar com CSS de diferentes maneiras no Dreamweaver:

    • Você pode codificar o CSS. Para obter informações sobre os recursos de codificação do Dreamweaver que ajudam a codificar o CSS, consulte Ambiente de codificação no Dreamweaver.
    • Se você não estiver familiarizado com a criação de páginas CSS, poderá usar o Painel CSS Designer para ajudar a criar seu CSS. Para obter mais informações, consulte Aplicar layout às páginas usando o CSS Designer.
    • Se você preferir trabalhar com arquivos SASS e LESS, o Dreamweaver oferece suporte a essa opção também, permitindo que você traga os arquivos SASS e LESS para dentro do Dreamweaver e trabalhe com eles. O Dreamweaver então compila os arquivos automaticamente (ou você pode optar por compilar manualmente) e mostra os resultados das suas alterações no CSS em tempo real. Para obter informações sobre como usar arquivos SASS e LESS no Dreamweaver, consulte Pré-processadores de CSS.
  8. Configurar um aplicativo da Web para criar conteúdo dinâmico.

    Muitos sites contêm páginas dinâmicas que permitem aos visitantes ver as informações armazenadas nos bancos de dados e que, normalmente, permitem que alguns visitantes adicionem novas informações e editem as informações nos bancos de dados. Para criar tais páginas, você precisa primeiro configurar um servidor da Web e um servidor de aplicativo, criar ou modificar um site do Dreamweaver e conectar-se a um banco de dados. Para obter mais informações, consulte Sites dinâmicos, páginas e formulários da Web.

  9. Criar páginas dinâmicas.

    No Dreamweaver, você pode definir uma variedade de fontes de conteúdo dinâmico, incluindo conjuntos de registros extraídos de bancos de dados, parâmetros de formulário e componentes JavaBeans. Para adicionar o conteúdo dinâmico a uma página, basta arrastá-lo até a página.

    Você pode definir a página para exibir um ou vários registros de uma vez, exibir mais de uma página de registros, adicionar links especiais para passar de uma página de registros para a próxima (e vice-versa) e criar contadores de registro para ajudar os usuários a rastrearem os registros. Para obter mais informações, consulte Sites dinâmicos, páginas e formulários da Web.

  10. Teste, visualize e publique seu site. 

    Ao criar páginas, você precisa visualizá-las para ver se seu site está funcionando de acordo com o design. Você pode codificar na visualização dividida que mantém suas Visualizações de código e dinâmica lado a lado.

    Você também pode visualizar páginas da Web em tempo real em um dispositivo (se você estiver criando páginas da Web responsivas) ou em um navegador da Web.

    Se você não precisa de uma experiência de visualização ao vivo, pode usar a visualização normal no navegador.

    Se você já tiver definido as conexões com servidores remotos, para publicar seu site, você precisará colocar seus arquivos no servidor remoto para ativá-los.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online