Web design responsivo com Adobe Dreamweaver
A course by Arturo ServínWeb designer
A course by Arturo Servín, Web designer
Aprenda HTML e CSS para criar um site responsivo com uma interface visual
Ao projetar um site, você deve levar em consideração que ele será visto através de um computador, mas também por um smartphone ou iPad. O uso do smartphone está ganhando cada vez mais peso e coloca um desafio para os designers, que precisam criar para vários formatos, sempre pensando no conforto do usuário em diferentes dispositivos.
Neste curso, o web designer Arturo Servín - também conhecido como Monky Lab - ensinará como criar um site responsivo com o Adobe Dreamweaver, usando uma interface gráfica com ferramentas de construção e escrita, código HTML e CSS. Ao combinar programação e design básicos, você obterá maior controle na elaboração de qualquer arquivo da web.
Este já é o quarto curso de Arturo Servín e, para potencializar o seu conhecimento, poderá complementá-lo com o Adobe Photoshop para Web Design, no qual aprenderá, de maneira simples, os principais aspectos do design e layout responsivos.
O que você aprenderá neste curso online?
31 aulas & 39 downloads
O que faremos no curso?
4 minutos, 44 segundos
O que são UX e UI?
9 minutos, 11 segundos
Direção da arte
11 minutos, 32 segundos
A vantagem de padronizar
9 minutos, 2 segundos
Por que usar o Dreamweaver?
7 minutos, 33 segundos
Visão geral da área de trabalho
9 minutos, 39 segundos
O que está incluído neste curso?
Arturo Servín iniciará o curso explicando seu começo no web design e como tem enfrentado várias mudanças e avanços tecnológicos. Ele falará sobre suas influências e mostrará referências funcionais de web design.
Em seguida, você conhecerá os princípios básicos do web design e aprenderá a diferenciar UX de UI. Arturo também lhe dará alguns conselhos sobre direção de arte, construção do site e seus padrões.
Na etapa seguinte, você aprenderá a usar as ferramentas que o Adobe Dreamweaver oferece para criar um site, no qual juntará as base tags com linguagem HTML e estabelecerá parâmetros. Você experimentará adicionar textos e imagens, além de links para diferentes tipos de arquivos.
Você também complementará a estrutura visual usando janelas CSS, aprenderá a gerar seletores e valores e, em seguida, estabelecerá o modelo de caixa orientado a parâmetros responsivos e, por meio de elementos CSS, estilizará sua página: fontes, design de caixa, aplicação de posição, exibição e flutuadores. Além disso, aplicará imagens de fundo, bordas ou listas, classes e outros elementos.
Como tornar seu site responsivo? Você estabelecerá os parâmetros de construção do site usando as consultas de mídia para as diferentes medidas necessárias, criará um menu simples que funciona para smartphones e computadores e verá como analisá-lo e corrigi-lo antes de fazer upload.
Agora tudo está pronto para a publicação! Você usará a janela FTP do programa e sincronizará as pastas locais do site com as pastas do site remoto. Dessa forma, poderá fazer alterações imediatas em seu site.
Recommended software & tools for this course
What is this course's project?
Você desenvolverá um site responsivo básico, de uma página, com entregas funcionais tanto para clientes quanto para equipes de programação mais avançadas.
Projetos de alunos do curso
Who is this online course for?
Designers gráficos que não fizeram a transição para web design, web designers iniciantes, UI Designers iniciantes e qualquer pessoa que queira aprender como criar sua página web responsiva.
Requirements and materials
Para este curso, não é necessário nenhum conhecimento prévio em web design, pois você aprenderá HTML e CSS do zero. Apesar disso, fazer o curso 'Adobe Photoshop para Web Design’, também de Arturo Servín, pode ser útil.
Quanto às ferramentas, você precisará de um computador com o Adobe Dreamweaver CC 2019 ou superior instalado.
Avaliações
- há 5 meses
bien
- há 9 meses
muy bien explicado
- rmmarinacePLUShá 1 ano
I've programmed for the web for almost 20 years, but never designed with Dream Weaver. I teach Graphic Design with Phtoshop and Illustrator so it was time to learn DW--so this is a fantastic start.
- há 1 ano
Excelente, muy completo lo sentí como un basics, sin ser basics!
- há 1 ano
Buen curso
Atualmente é diretor geral da La Constelación, um estúdio focado em marketing digital, e-commerce e web design.
Conteúdo
- U1
Introdução
- Apresentação
- Influências
- O que faremos no curso?
- U2
Princípios de web design
- O que são UX e UI?
- Direção da arte
- A vantagem de padronizar
- U3
Perder o medo do Dreamweaver: construindo uma página da Web básica
- Por que usar o Dreamweaver?
- Visão geral da área de trabalho
- Criação de pastas de trabalho
- Sintaxe HTML usando tags, atributos e valores
- Estrutura geral de uma página da web
- Colocando texto e imagens
- Ligações
- U4
Adicionando estilo a uma página da web
- Vinculando um arquivo CSS e sua sintaxe
- Seletores e valores
- O modelo da caixa e redefinindo uma folha de estilos
- Estilos tipográficos
- Estilos para projetar caixas P1
- Estilos para o design de caixas P2
- Aplicação de posição, display e flutuadores P1
- Aplicação de posição, display e flutuadores P2
- Decoração CSS
- U5
Um site responsivo
- Criando consultas de mídia
- Celular primeiro
- Simplificando um menu responsivo P1
- Simplificando um menu responsivo P2
- Usando visualizações
- Verifique e corrija
- U6
Publicação de sites
- Definindo um site remoto no Dreamweaver
- Carregando o site
- Sincronizar o site local e o site remoto
- PF
Projeto final
- Introdução ao design responsivo da web com o Adobe Dreamweaver
O que esperar de um curso da Domestika
Aprenda no seu ritmo
Aproveite para aprender desde casa, sem um horário fixo e no seu ritmo. É você quem define sua disponibilidade.
Aprenda com os melhores profissionais
Aprenda métodos e técnicas fundamentais com os melhores profissionais do setor criativo.
Conheça os maiores especialistas
Cada professor compartilha seus conhecimentos com entusiasmo e explicações claras, oferecendo uma perspectiva profissional em cada aula.
Certificates
PLUSIf you're a Plus member, get a certificado personalizado signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Sente-se na primeira fila
Com vídeos da melhor qualidade, você não perderá nenhum detalhe! Graças ao acesso ilimitado, você pode assistir às aulas todas as vezes que precisar para aperfeiçoar sua técnica.
Compartilhe conhecimentos e ideias
Pergunte, peça opiniões e ofereça soluções. Compartilhe sua experiência de aprendizagem com outros alunos da comunidade tão criativos como você.
Conecte-se a uma comunidade criativa global
Esta comunidade acolhe milhões de pessoas do mundo todo, curiosas e apaixonadas por descobrir e expressar sua criatividade.
Assista a cursos produzidos de maneira profissional
A Domestika seleciona cuidadosamente seus professores e produz cada curso internamente para garantir uma experiência de aprendizagem online excelente.
Perguntas frequentes
Você vai aprender a criar, estruturar e desenhar sites responsivos usando Dreamweaver, HTML e CSS, otimizando a experiência do usuário e a interface, além de gerenciar recursos visuais, tipografia, cores e fluxos de trabalho colaborativos.
O curso é indicado para quem tem conhecimentos básicos em design ou desenvolvimento web, ideal para quem está no nível intermediário e quer aprofundar na criação de sites responsivos e no uso eficiente do Dreamweaver.
É recomendável ter noções básicas de HTML e CSS, embora o curso revise os conceitos fundamentais e te guie na aplicação prática dentro do Dreamweaver.
Você precisa de um computador com Adobe Dreamweaver instalado, acesso à internet e conhecimentos básicos de navegação em sistemas de arquivos. Não é necessária experiência avançada em programação.
Você vai aprender a usar Media Queries, estruturas adaptativas e o princípio mobile first para que seus sites funcionem e fiquem bonitos em qualquer dispositivo, melhorando a experiência do usuário.
Sim, o curso ensina a escolher, combinar e integrar tipografias e paletas de cores usando ferramentas como Google Fonts, Adobe Fonts e Adobe Color para criar uma identidade visual consistente.
Sim, você vai aprender a criar formulários acessíveis, botões padrão e personalizá-los com CSS, garantindo usabilidade e acessibilidade nos seus projetos web.