Dreamweaver CC 2018 — introdução ao webdesign responsivo

1. Introdução: Olá, meu nome é Dan Scott, e neste vídeo vamos sintonizar você de Web zero para web hero e olhar para construir sua primeira página web responsiva usando o Dreamweaver. Agora você pode seguir este tutorial perfeitamente e você só precisa baixar os arquivos de exercícios, há um link para baixo na mesa de descrição, livre para baixar, ir e pegar isso, pausar o vídeo, voltar uma vez que você tem os arquivos. O objetivo deste tutorial é expor você ao web design moderno. Vamos olhar para termos como HTML5 responsivo e CSS3. Eles parecem extravagantes, mas eles são realmente muito fáceis quando você os entende. Também vamos ver como o Dreamweaver torna isso super fácil para nós. Mas, na verdade, o que eu realmente quero que você obtenha deste vídeo é chegar a um ponto com sorte e você é como, na verdade, não é tão difícil como eu pensei que era. Estou muito animado para sair e aprender mais e construir meu próprio site. Então esse é o meu objetivo. Vamos falar disso agora e começar a trabalhar. 2. PROCESSO: Então, primeiro, vamos falar sobre o processo. Então, primeiro, você precisará projetar seu site primeiro em algo como Photoshop ou Illustrator. Então você pode ver aqui eu projetei como meu site se parece em um desktop, ele se parece em um tablet e como ele se parece em um celular. Você pode ver que eles são muito semelhantes, mas cada design usa melhor os tamanhos do dispositivo. Portanto, há apenas algumas mudanças no tamanho da fonte e algumas reordenações de caixas para torná-lo estranho nos diferentes dispositivos. Isto é o que chamamos de responsivo. O site vai mudar de forma e mudar de forma um pouco dependendo se é móvel, tablet ou desktop. Então esse é o nosso primeiro grande termo fora do caminho. Web design responsivo significa apenas que o site muda para melhor usar o dispositivo. Então não importa Photoshop ou Illustrator, mas eu projetei o meu aqui no Photoshop. Agora precisamos traduzi-lo para isso. Esta é a versão final do nosso site onde você pode ver que ele corresponde ao meu modelo Photoshop para desktop. Mas quando eu descer, veja isso, assista isso até o tablet, você pode ver que muda lá? Estou arrastando meu navegador para dentro e para fora, porque o tamanho da fonte muda, torna-se centralizado, as colunas vão de três perto para duas. Então esse é o nosso termo responsividade. Nós vamos construir isso e descer para o celular onde ele está apenas esticando um. Também vamos fazer algumas coisas onde você vai notar que há seis no tablet, mas apenas quatro no celular. Então vamos desativar alguns deles. Nós também vamos mudar o menu ao longo do topo aqui você pode ver na minha maquete do Photoshop que eles estão diretamente na área de trabalho, mas eles entram em colapso nesta outra versão nos dispositivos menores. Então, descobrimos o que significa responsivo, e sabemos o que vamos construir. Vamos sair agora e começar a construí-lo. 3. Comece à criação: Certo, a primeira coisa é abrir o Dreamweaver. Muitas vezes, no início, eles faziam algumas perguntas como, que cor você quer no fundo? Se você quer ser um designer ou um desenvolvedor? O que você quer fazer é escolher desenvolvedor para este caso. Se você não escolheu a opção certa, basta continuar passando e, em seguida, você pode alterá-lo novamente e aqui no canto superior direito e apenas escolher desenvolvedor e ele deve se parecer com o meu. A próxima coisa que precisamos fazer é definir um site. Vá para um site e vá para um novo site. Precisamos fazer isso para todos os novos sites. Se você tem apenas um, você só terá que fazer isso uma vez. Mas se você gosta de edifício principal, muitos sites, você terá que definir este site para cada novo. Dê um nome, vou chamar o meu “Roar Cycles”. Está bem. Estamos trabalhando para essa empresa e precisamos decidir onde em um disco rígido manteremos este site. Porque todas as nossas imagens e todos os HTML, todas as coisas que fazemos para este site precisam ser mantidas na mesma pasta. O que vamos fazer é ir para a pasta local do site, clicar neste pequeno botão “Procurar” e você pode fazer o seu próprio. Mas como eu já tenho alguns arquivos de exercícios, você pode baixá-los. Ok, então os que você baixou do link na descrição vão para arquivos de exercícios responsivos e basta escolher esta pasta aqui. Não precisas de ir mais fundo, está bem? A outra coisa que você deve fazer antes de seguir em frente é ir para configurações avançadas e aqui em cima diz pasta de imagens padrão. Vá para isso e escolha a pasta de imagens que criei para você. Se você estiver criando seu site sozinho, você criaria sua própria pasta com sua própria pasta de imagens. Estamos apenas economizando tempo para pular para o material responsivo neste curso, vamos clicar em “Escolher” e clicar em “Salvar”. O que eu fiz foi só para acelerar as coisas, é que eu comecei o site, ok? Apenas nos leve a ir para que possamos saltar para as partes responsivas. Vamos para index1.html e é assim que nossa página se parece em código. Queremos ver como ele se parece em um navegador. Na parte inferior direita aqui é pesar para baixo aqui há um chamado navegador em tempo real anterior este ícone extremo direito. Clique nele e, em seguida, clique em “Google Chrome”. Se você não tem o Chrome instalado, é melhor ir e instalá-lo agora, ok, alguém está chamando o navegador da web e é o que você deve estar fazendo, a maioria dos seus testes, você não pode usar o Safari ou qualquer um dos outros, mas o Chrome é amém. Isto é o que eu fiz por você até agora. É só pré-visualizar localmente no meu navegador, ok? Eu editei um logotipo, adicionei esta navegação e esta caixa rosa grande só para acertar a estrutura, possamos começar a olhar para o que a torna responsiva. Porque no momento, se eu agarrar a borda aqui, não é nada responsivo, assim como se senta lá. Ok, então vamos entrar no Dreamweaver e adicionar nosso primeiro pedaço de HTML. 4. Como criar o HTML: Vamos colocá-lo. Vamos colocar na batida, vamos colocá-lo agora temos nosso cabeçalho aqui, que contém meu logotipo e minha navegação. Veja esses três botõezinhos ali. Então eu tenho esse outro pedaço, que é principal. Principal é a parte do meio do batedor site está fora me dando apenas um logotipo e navegação. Main aqui já tem minha caixa de herói, e que é a grande caixa rosa que já criou. É esse cara aqui. Dentro disto, onde quero a minha batida. Nós vamos estar projetando este ataque aqui. Aqui é RoarX. Pré-encomenda agora. Para colocar em uma batida, precisamos colocar em algo chamado H1. H1 é como bater um e bater um é o bater mais importante em nossa página. A sintaxe funciona assim, assim como dizer este principal aqui, ele diz principal, e está dentro desses suportes angulares, então há barra para a frente feita para fechá-lo. Precisamos fazer o mesmo para H1. Os suportes angulares ficam ao lado da sua tecla in, digite H1 e, em seguida, feche-o. Essa é a parte inicial, assim como a minha aqui. Você pode ver que a segunda parte é da mesma maneira, mas tem uma barra na frente dela. Vamos digitar o tipo de colchetes angulares e barra direta e útil tudo o que o Dreamweaver tem para preenchê-lo para nós, essa é uma das vantagens do Dreamweaver. O texto vai para dentro, ele vai no meio destes dois aqui, pode causar piscar entre as duas etiquetas, e nós vamos digitar RoarX, que é o nome da nossa nova moto que estamos lançando. Vamos dizer pré-encomenda agora. Aperte “Salvar”. Salvar arquivo, e eu quero que você vá e verifique sua visualização em tempo real do navegador. Agora você pode voltar voltando ao Chrome, ele é atualizado automaticamente ou, se quiser, clique aqui e clique no Google Chrome novamente. De qualquer forma, vamos ao nosso navegador. Você pode ver aqui é o meu RoarX H1. Reserve agora e, por padrão, é preto e negrito e um tamanho específico. Que meus amigos, é o nosso primeiro cuspir HTML. Se você é novo no web design bem feito. Este é o nosso primeiro pedaço de codificação, você conseguiu. A próxima coisa que precisamos fazer é mudar essas cores e tamanhos padrão e fontes para algo que corresponda à marcação no Photoshop. Então vamos fazer isso agora aprendendo algo chamado CSS. 5. Como criar o CSS: Aprendemos o que é HTML, editamos um h1 e adicionamos algum gosto a ele. Esse é o HTML. Para estilizar isso, usamos algo chamado CSS. Eu criei uma folha CSS aqui. Você pode vê-lo aqui. Está no arquivo “documentos relacionados”. Vamos clicar nele. Já fiz algumas coisas básicas. Eu disse aquela caixa de herói que fizemos. Dei-lhe uma altura e dei-lhe aquela cor de fundo para pairar sobre ele de rosa. Tenho umas coisas para começarmos. Vamos olhar para criar nosso próprio CSS agora. Debaixo desta chave encaracolada, aperte “Return”. Retornos não importam em CSS ou HTML, você não precisa desse retorno, você pode tê-lo, eu só gosto de espaçá-los um pouco apenas para tornar mais fácil para você ver. Quando se trata de CSS, há alguma sintaxe básica que precisamos seguir. Basicamente você pode copiar o que está aqui em cima, digamos corpo. Há o nome h1 não dois, h1. Há um espaço e você pode ver que há uma cinta encaracolada no início e no fim. É o que vamos fazer. Vamos digitar a primeira chave encaracolada e [inaudível]. Você nunca tem apenas uma abertura sem um fechamento, então ele preenche lá para você. Está colocando o final para nós, vamos colocar “Return”. O “Retorno” apenas nos dá um pouco de espaço para escrever coisas como esta, como a altura e a cor. Primeiro coloca em texto, chaves. Não se esqueça do início e do fim ou não os apague. A próxima coisa que vamos fazer é dar a este pedaço um CSS, o que é chamado de atributo. Um atributo significa apenas, “Eu vou dar a ele uma coisa como uma cor ou pode ser o tamanho da fonte”. Estes são chamados atributos. Você pode ver lá eu digite CO e ele pré-preenchido em cores e eu apertei “Return” e o que ele fez foi preenchê-lo e editar os dois pontos lá. O cólon precisa entrar. A próxima coisa é escolher uma cor. A coisa legal sobre o Dreamweaver é que tem um seletor de cores ou você pode escolher em suas bibliotecas, o que é muito legal. Vamos clicar em “Color picker” e o que queremos fazer, é arrastar este pequeno círculo aqui. Podemos arrastá-lo por aí, podemos brincar com tons, mas o que eu quero é que ele fique no canto superior esquerdo. Isso vai ser branco. Arraste-o até lá e vamos usar o branco. Se der terrivelmente errado, você pode apenas digitar, libra, f, f, f, f, f, f, f, f, esse é o código para branco. A última coisa e a coisa que muitas pessoas esquecem quando são novinhas CSS é que você precisa acertar ponto-e-vírgula no final. Essa é toda a sintaxe que você precisa para CSS. Há chaves encaracoladas, há uma no início, outra no final. Você digita o atributo, no nosso caso, vai ser a cor da fonte, e você coloca dois pontos depois, no nosso caso Dreamweaver fez isso para nós e não se esqueça do ponto-e-vírgula no final. Vamos salvá-lo, mas vamos usar o “Arquivo, Salvar tudo”. Isso é útil porque ele salva o CSS e o HTML ao mesmo tempo. Na verdade, são arquivos separados, então você muda para o código-fonte, que é HTML e este aqui é o meu CSS. Na verdade, são arquivos separados no meu site. Quando você está aprendendo, é melhor ir para “Arquivo e Salvar tudo”, certificar-se de que tudo está salvo e, em seguida, ir para o seu navegador. Você está pronto? Nós adicionamos algum HTML, nosso h1 e nós adicionamos algum texto, então nós fomos em estilo ou h1 usando CSS. Você está prestes a se tornar um web designer. Você está pronto, pronto, vai. Incrível. Você adicionou HTML e tem sido capaz de estilizar esse HTML usando CSS. Esses são os fundamentos de todo o web design. Nós vamos fazer algumas outras coisas apenas para garantir que ele corresponde ao nosso maquete, mas então vamos seguir em frente e começar a olhar para web design responsivo específico. Vamos acabar com isso. 6. Tornando seu site: Para combinar com a nossa maquete, queríamos algumas coisas, então temos a ferramenta de texto aqui no Photoshop, vou clicar. Eu sei que quero 62 pontos para a fonte. Quero empurrá-lo para baixo de cima e para longe da esquerda aqui. Vamos fazer isso agora em CSS. Dreamweaver aqui, vamos colocar um retorno e é tipo de fonte. Você pode ver que ele está me dando algumas opções pré-preenchidas. É todo o tamanho da fonte, e você pode vê-lo colocar a cor lá para nós. Agora, no nosso caso, queremos um 62. Na verdade, mudei de ideia. Eu vou usar 55 pixels, só queria um pouco menor, só porque e eu não esqueci de adicionar o ponto-e-vírgula no final, quando você sabia que isso acontece muito. Mas mantenha-se dentro, vamos fazer algumas outras coisas. Vamos datilografar. Eu digitei em PhD e você pode ver Dreamweaver super útil vai, você quer dizer isso? Eu disse sim, clique em “Top”, e para o topo, vamos fazer 120 pixels, lembre-se de um ponto-e-vírgula no final, e o último vai ser acariciando e eu vou fazer à esquerda. Quero um caminho da esquerda, cerca de 60 pixels. Vamos clicar em “Salvar” e fazer o estábulo, e vamos entrar em um navegador e verificar. É basicamente isso que despejamos em nosso HTML, que é H1, e então passamos muito tempo no estilo CSS para obtê-lo olhando como queremos. Mas agora é a hora de ver o que o design responsivo faz. Agora responsividade é um termo guarda-chuva usado para descrever algumas coisas que fazemos em código para torná-lo ajustado para os diferentes tamanhos de tela. Uma dessas coisas que fazemos em código, e provavelmente a principal é algo chamado de media query. Agora, toda uma consulta de mídia é tão pensar nisso como um gatilho, e ele só sai quando um tamanho de tela é ativado. Vamos dar uma olhada em algo que eu fiz antes. Isto é o que vamos criar algo chamado media query. Ele só diz acionar este H1, quando o tamanho da tela é 768 pixels ou menos, mas se for maior do que isso, não se preocupe em ignorar o material. Isso é o que é, é um gatilho, apenas quando ele é ativado quando a tela é uma largura específica. Você pode ver aqui em baixo que há uma versão móvel também. Acione esse H1 somente se for estranho a pixels ou menos. Vamos criar isso agora na nossa visão, para onde vai? Vamos colocá-lo debaixo do nosso H1. Coloque em algumas rotinas, e esta é a mais quente, mas uma sintaxe que você vai ter que montar, eu prometo. Não é tão difícil, mas vamos ter que digitar e me seguir textualmente, este é o símbolo 'At' e vamos digitar a mídia. Depois disso, vamos digitar um conjunto de colchetes. Dentro desses colchetes, vamos digitar “Mex” hífen “Largura”. Precisamos colocar um cólon em nixed. Certifique-se de que é um ponto e vírgula e não um ponto e vírgula, e agora precisamos decidir qual será o tamanho do tablet. Agora você pode escolher qualquer tamanho aqui, um tamanho realmente comum de tablet ou um tamanho de iPad tem 768 pixels de largura. Estamos apenas dizendo que esta consulta de mídia, aqui vai ser para tablet e isso é o que eu acho que o tamanho é. Agora, com o passar do tempo, este padrão vai mudar e você vai encontrar diferentes sites usam larguras de pixel ligeiramente diferentes para tablet, mas sim, é realmente tamanho comum, então use isso para o momento, mas não, ele não é uma regra absoluta. A última coisa que precisamos fazer depois deste último suporte aqui é colocar uma chave encaracolada. Nós adicionamos uma chave encaracolada, e colocá-lo em um retorno, que é consulta imediata. Agora, acho que é um pouco difícil. Há muita sintaxe que vai para isso, mas o que você pode fazer no futuro é apenas copiar e colar isso como eu faço em todos os outros trabalhos. Agora, o que vai dentro desta consulta de mídia, qualquer coisa que você quer fazer, mas apenas ser acionado no tablet. O que eu gostaria de fazer é mudar o tamanho da fonte. Se você pode ver aqui minha visão, e ele vai de alinhar à esquerda e tamanho de fonte bastante grande para baixo para o menor tamanho e centrado. Isso é o que eu quero fazer em um site quando a largura chegar ao tablet, eu quero que você altere este H1 apenas para mudar o tamanho e o posicionamento. Não quero que você mude a cor, a cor é boa, deixaria que apenas o tamanho e o posicionamento. Vamos ver isso em CSS. Tudo o que fazemos é contanto que esteja entre estas duas chaves. Só aqui vou digitar H1. Assim como fizemos aqui acima, precisamos colocar nossas chaves, colocar o retorno, e agora vamos estilizá-lo. Gostaria de dizer algo como o tamanho da fonte. Onde você está o tamanho da fonte, eu gostaria que ele fosse para baixo em 40 pixels, e eles investem ponto-e-vírgula no final. Verifique se a sintaxe está correta. Você tem chaves de cada lado, e você tem dois pontos e um ponto-e-vírgula aqui. Vamos guardar uma cera. É seguro. Vamos nos preparar, porque estamos prestes a entrar em território inexplorado e responsivo, talvez para você. Vamos verificar isso em um navegador, e a maneira de prová-lo, é que estamos olhando para a visualização de desktop aqui. É bastante largo, mas quando chegarmos a 768 pixels, onde está, continue arrastando até descobrir, mas veja isso, desça. Olhando para esta fonte, estou apontando para ela. Você não pode me ver apontando assim. Que meus amigos é todo web design responsivo é. Há outras coisas, mas essa é a parte principal disso é que as consultas de mídia acionam em certas larguras que entra, mudanças que você verá ajudar seu HTML é exatamente o mesmo. Os tiques não mudaram, apenas alterando o CSS para ele, e isso é acionado sem consulta de mídia. Bem feito você. Eu vou ficar animado, eu estou dentro, mas quando eu descobri isso pela primeira vez, eu estava muito animado. Vamos fazer algumas outras coisas. Volte para o Dreamweaver. O que eu gostaria de fazer também é lembrar que tivemos que fazer algumas coisas. Tivemos que fazer ticks a linha. Em código é texto. Alinhe lá está no topo, e eu vou clicar em “Centro”. Você pode ver que esta é a coisa boa sobre o Dreamweaver é que eu não tenho que digitar ou lembrar a sintaxe. Eu posso apenas clicar sobre isso e tudo que eu tenho que lembrar de fazer, qual é a última coisa que vai no intervalo essas linhas que todo mundo esquece, ponto-e-vírgula. Incrível. Clique em “Salvar”, salve a visualização. Agora centrando. É centralização. [ inaudível] é como caiu sobre o ish centrado. É porque assista isso e H1 aqui. Este H1, é o que é acionado para o meu tablet, mas este H1 no topo aqui está dizendo para fazer pedding lift de 60 pixels. Está usando isso também. Tem centralizado mais 60 pixels na lateral. Podemos anular isso. Diga, na verdade, eu não quero isso. À esquerda, gostaria de ser zero pixels, por favor. vírgula no final, salve, confira. Agora estamos bem. Incrível, então um centrado, é um novo tamanho de fonte, arrastá-lo para fora, ficar impressionado. Agora vamos entrar em mais uma consulta de mídia para dispositivos móveis porque nada muda muito, exceto o tamanho da fonte fica menor. É tudo o que temos que fazer. Vamos entrar no Dreamweaver. Dentro do Dreamweaver, poderíamos digitar isso vai adicionar novamente, ou poderíamos apenas ser preguiçoso e selecionar tudo. consulta de mídia, incluindo a última chave, esquecerá isso o tempo todo. Obtenha 'Copiar' ou edite 'Copiar'. Vou colocar um par de retornos e apertar “Colar”, e o que eu quero fazer são algumas coisas. Um deles é que eu quero mudar essa largura máxima. Eu quero mudá-lo de 768 para tablet para um tamanho móvel genérico real que é 400 pixels. Agora esta mudança é um pouco também. Há tantos tamanhos de telefone celular diferentes que eu acho 400, é uma cobertura muito boa para todos, eu acho que os novos iPhones são 375 pixels de largura, mas alguns dos grandes telefones LG Samsung são um pouco mais largos. Eu só faço um pouco maior só para cobrir todos esses telefones. O que eu preciso sobrar. Não preciso de estofamento à esquerda, e não preciso de Tics Align. Tudo o que eu queria fazer era mudar o tamanho da fonte. Estou excluindo tudo, exceto que quero mudar devido a 20 pixels. Eu deveria salvar. Vamos verificar no navegador, desktop, tablet, celular. Provavelmente é um pouco pequeno. Mas este lado 28 pixels, eu acho que é o que eu queria, um pouco maior. Essas são as nossas consultas de mídia para todos os nossos tamanhos diferentes. Estamos fazendo apenas três nesta classe para mantê-lo simples e muitas vezes para sites menores, isso é tudo que eu faço. Alguns sites vão um pouco mais difícil, porém, descreve sete tamanhos diferentes. Tenho sete consultas de mídia diferentes. Depende de você, mas eu gosto de manter apenas o básico, desktop, tablet e celular. Uma coisa que eu faria em CSS, e antes de continuarmos é vamos adicionar alguns comentários CSS. Tudo isso significa que eu sei porque eu acabei de fazer isso, o que essa coisa faz e o que esse cara faz aqui, mas eu gostaria de adicionar algumas notas a mim mesmo, ao meu futuro eu ordenado para dizer exatamente como eu lembro o que essas coisas fazem. Com o cursor apenas na frente da media query para este aqui, este CSS, é que eu vou no lado esquerdo aqui, clique e mantenha pressionado o que diz “Aplicar comentário. Isso é um comentário em CSS. Clique nele. Nada acontece muito. Você pode ver que há uma barra e duas atrizes, mas dentro daqui, se eu digitar “Tablet” isso significa que isso é ignorado pelo navegador. Ninguém vê isso. É apenas os humanos pesados, é para outros web designers, é para você e para o futuro saber do que você está falando. Eu vou copiá-lo, usá-lo aqui em baixo, e eu vou ligar para este celular. Vamos para o arquivo, Salvar tudo, verificar está funcionando no navegador. Se o seu não estiver indo para tablet e, em seguida, para tamanhos móveis para este H1, você pode simplesmente apertar o botão de reinicialização. Vamos todos fazer isso. Você não precisa, se o seu está funcionando, continue. Eu vou fazer isso. Então você pode fechar o índice 1, e abrir o índice 3 na verdade. Clique naquele ali, pré-visualizar em um navegador, e ele deve parecer exatamente como tivemos um segundo atrás. - Legal. Então, se o seu der errado, abra este aqui e nós reiniciaremos e voltamos a esta parte aqui. Na próxima parte do nosso guarda-chuva responsivo, analisamos as consultas de mídia que são consideradas responsividade. Outra é imagens responsivas. O que significa apenas que, se eu verificar um dos meus exemplos finais aqui, significa que quando eu redimensionar o navegador, ou ele vai para dispositivos diferentes, a imagem é realmente redimensionada para melhor ajuste. Você pode ver esses movimentos de fundo aqui na parte superior, e todos esses inferiores são redimensionados para melhor ajustar o espaço fornecido. Vamos olhar para esta imagem de fundo primeiro, e então vamos olhar para estas imagens no fundo aqui. Ambos são ligeiramente diferentes na forma como abordamos isso. Então volte para o Dreamweaver, abra nossos estilos, e o que estamos procurando é a caixa de heróis. Essa é a caixa grande que eu tenho aqui. Vamos ver o que estamos trabalhando. Você pode ver que essa é a grande caixa rosa que eu já criei para nós. Tudo o que fiz foi dar-lhe uma altura, e dei-lhe uma cor de fundo de rosa. Mas eu também gostaria de fazer para ele é, eu gostaria de dar-lhe um fundo. Estou a escrever em segundo plano. Você pode ir até aqui para a imagem de fundo. O que quero saber é que estou destinado a usar URL, aperte “Return”. Este é o caminho mais longo. Imagens, eu comecei a digitar Im, isso é realmente útil, este pré preencher coisas. Especialmente quando você chega aqui, quando você começa a escolher essas imagens. Você pode começar a passar o mouse acima deles, em seguida, ele irá visualizá-los para você. Há ainda uma maneira mais rápida que o Dreamweaver usa. Vou desfazer tudo isso. Cabe a você. Pode datilografar esse longo caminho. Há uma boa sugestão de emissão de código. Neste caso é BGI, então imagem de fundo. Tudo o que eu preciso fazer, em vez de pressionar “Return”, ou clicar em uma dessas opções, basta pressionar “Tab” no meu teclado. Você pode vê-lo preenchido com dois pontos de imagem de fundo, adicionar o URL que eu precisava, e eu estou pronto para digitar. Se você é novo, você pode estar digitando a coisa toda, só para se acostumar com isso. Mas uma vez que você começar, digitando toda a imagem de fundo da palavra e URL. Lembrar disso também pode ser difícil. Então eu só digitei BGI, e apertei “Tab” no seu teclado. O que queremos fazer é pegar minha imagem de minhas pastas de imagens, então digitei um I. Obrigado, Dreamweaver. Então ele só olha para a minha pasta de imagens e vê as imagens que eu tenho. Quero esta chamada Imagem de Fundo. Passe o mouse sobre ele, e esse é o que eu quero no fundo. Até adicionou o ponto-e-vírgula no final. Vou salvá-lo e verificá-lo no navegador, não vai funcionar. Está lá, mas não responde. Eu queria que ele fosse capaz de se esticar, preencher o fundo. Fazemos isso usando uma propriedade CSS, e é uma propriedade CSS3. Quando as pessoas falam sobre HTML5 e CSS3, o que elas realmente significam são apenas algumas das coisas novas que podemos fazer no CSS que não podíamos fazer antes. Antes disso, era HTML4 e CSS2, por isso é apenas uma versão mais recente. Mas parece muito chique e intimidante, mas na verdade são coisas novas como esta. Então, um dos novos recursos CSS é o plano de fundo, e eu quero o chamado background-size, há lá, e há uma opção chamada cover. Esse é um novo recurso realmente legal CSS3. Adicione o ponto-e-vírgula no final, pressione “Salvar” check no navegador. Agora estamos conversando. Agora é tudo responsivo, e preenche o espaço fornecido, fica todo elástico e é o recurso CSS3 chamado capa e background-size. Então nós revelamos um dos segredos do novo web design moderno e é essa coisa chamada CSS3. Você vê isso em muitas partes, mas realmente são apenas algumas coisas novas que podemos fazer que não poderíamos fazer antes na nova versão do CSS. Agora, se isso deu terrivelmente errado e o seu não funcionar, abra, eu vou salvar e fechar esse. Abra o índice 4, e isso deve levá-lo de volta ao mesmo ponto, apenas como uma pequena verificação de reinicialização no navegador, e sim, está funcionando perfeitamente. Se o seu está funcionando bem, você não precisa redefinir, você pode simplesmente continuar com seu índice 1 ao longo do curso. Se te perderes, podes seguir-me com estas redefinições. A próxima coisa que eu quero fazer é construir essa grade de imagem menor aqui embaixo. Então vamos ter que colocar em uma caixa para essas imagens entrarem. Vamos dar uma olhada no Dreamweaver. Então essas caixas são geralmente chamadas Divs. Já temos um div. Há um chamado div hero-box, que é a coisa que era rosa, mas agora tem os fundos de imagem elástica, então temos que criar um desses para nós mesmos. Então, debaixo da nossa caixa de heróis, coloque um retorno, e nós vamos digitar um div. Então vamos entre colchetes, e digitamos div, e também damos um nome de classe. A classe é apenas o nome único que lhe damos. Toda a sintaxe deve ser pré-preenchida para você. Você pode ver que enquanto eu digito a palavra, enquanto eu digito a classe da palavra, eu posso simplesmente clicar nela com o mouse, e ela preenche a sintaxe, e eu vou dar um nome a ela. Você pode dar a ele qualquer tipo de nome. Você só tem que ter certeza que você não usa letras maiúsculas ou espaços. Vamos chamar o nosso coronel, abreviação de coluna. É muito comum usar esse termo. Terminá-lo, precisamos colocar entre colchetes e, em seguida, abrir os últimos colchetes, e assim como em H1, nós colocamos essa barra para a frente, e ele termina para nós. Então foi exatamente isso que a caixa de heroína foi feita. Acabamos de fazer nossa própria visão chamada Col. Agora, se você adicionar um pouco mais avançado com HTML, e você é tipo, cara, isso é um longo caminho de fazer isso, eu gostaria que houvesse um caminho mais curto. Há, se você apenas digitar ponto col. Dot no início dele apenas se refere a ele ser um nome de classe, e se você apertar “Tab” em vez de retornar, ele apenas assume que você quer dizer uma classe div com col e ele preenche em tudo, e tão super rápido e fácil, ou você pode apenas digite-o no longo caminho se você é novo apenas para se acostumar com a sintaxe. De qualquer forma, Dreamweaver é incrível para ajudar. Dentro disso, eu gostaria de colocar na minha imagem. Então eu fiz a caixa, mas a caixa realmente não faz nada ainda. É só uma caixa vazia. Quero colocar uma imagem dentro dela. A maneira de fazer isso, o caminho mais longo. Não quero que faça assim, porque esse é um longo caminho. Nós digitamos em colchete e digitamos em IMG, então digitamos em SRC. Em seguida, dentro do SRC nós saímos e encontramos nossa imagem então nós adicionamos todos os textos e há todo tipo de outras coisas que precisamos fazer apenas para colocar em uma imagem simples e antiga. Você pode ver lá em cima, eu já fiz isso. Então imagem, SRC, há a imagem então nós temos que colocar em todo o texto. É um pouco longo. Então eu vou desfazer isso, e o que eu vou fazer é usar o nosso super segredo, incrível Dreamweaver e apenas digitar IMG aperte “Tab”, Enter, e você pode ver que ele coloca todas essas coisas lá para mim. Agora, dentro da fonte, onde vem a minha imagem? Escrevo o meu I para a pasta de imagens. Obrigado Dreamweaver. Então ele olha minha pasta de imagens e diz, você quer dizer isso? Eu digo, sim, quero dizer aquele ali, imagem 1, por favor. Vamos apertar “Salvar tudo”, e vamos entrar no nosso navegador, olhada, e ele está lá dentro. Ele ainda não está responsivo, porque acabamos de colocar uma imagem HTML, não fizemos mais nada. Mas essa é a primeira parte. Colocamos a nossa imagem. Agora precisamos torná-lo responsivo, e fazemos isso fazendo isso em CSS. Vamos dar uma olhadinha. Fazemos isso de uma maneira ligeiramente diferente da primeira maneira que fizemos, porque a primeira opção queríamos que fosse uma imagem de fundo. Lembre-se que esse cara aqui, precisa ser um fundo, funciona um pouco diferente. Então o que queremos fazer é saltar para o nosso styles.css, em seguida, para baixo, eu quero colocar no estilo para a visualização de desktop, não em tablets. Então eu coloquei alguns retornos embaixo do meu H1 superior, mas antes do tablet. Espero que estejam prontos, aprenderemos algo chique chamado seletor composto. É um seletor, o nosso H1. Isso foi um seletor também, estes são todos seletores. Então o que eu gostaria de fazer é fazer um seletor composto. Eu gostaria de fazer isso com imagens. Então eu quero tornar todas as imagens responsivas, mas não todas as imagens. Eu quero as imagens que estão apenas dentro de nossas colunas. Então isso é chamado de composto selecionado. Significa apenas imagens, mas não todas as imagens em cada página e em cada site. Apenas as imagens que estão dentro daquela coisa que chamamos de col. Lembre-se que chamamos de aula chamada Col. Agora, em CSS, você se refere a classes por ter um pouco de parada completa no início. As coisas que você mesmo escreve que fez do nada têm um pouco de parada na frente. Os que pré-existem em HTML muitas vezes não existem. Você pode ver este aqui, eu inventei essa coisa chamada caixa de herói, então tem uma parada completa na frente. Mas como H1, eu não inventei, é apenas um seletor de HTML pré-existente, então nós não temos. Então imagens que estão dentro col, o que eu gostaria de fazer com ele. Vou colocar minhas chaves e voltar. Para torná-lo responsivo, o que eu gostaria de fazer é que eu gostaria de torná-lo uma largura. Basta digitar WI, descer, e eu quero fazer uma largura de 100 por cento, não esqueça o ponto-e-vírgula no final. Agora que faz a maior parte, mas há algumas outras coisas para torná-lo um pouco melhor suportado em todos os navegadores, vamos colocar em altura. A altura precisa ser um ponto e vírgula automático. A última coisa que precisamos fazer é algo chamado display, e bloquear ponto e vírgula. Basta fazer isso porque eles vão ajudar todos os navegadores a lidar com imagens responsivas. Esse é o cara que faz a maior parte do trabalho, com 100%. Vamos dar uma olhada em um navegador. Lá está ele. Ele é uma imagem responsiva se eu reduzi-los, você pode ver, ele fica menor com o navegador e fica maior à medida que um navegador fica maior. Não é exatamente o que queremos ainda. Teremos que fazê-lo chegar a uma certa altura e não maior. Mas é assim que as imagens responsivas são feitas. A coisa legal sobre usar um seletor composto, onde dissemos imagens dentro de colunas, não é mexer com esta imagem aqui em cima, que é o meu logotipo ou esta imagem no fundo disso. É só lidar com as imagens que estão dentro da minha coluna. Antes de darmos uma largura para combinar com a nossa maquete, o que vamos fazer é duplicado algumas vezes para obter todas as imagens nelas. Volte para o Dreamweaver e vá para o nosso código-fonte. O código-fonte é HTML. Isso é chamado de código-fonte em vez disso e o que queremos fazer é que queremos duplicar este col, então eu quero que seis deles combinem com minha maquete aqui. Você pode ver cerca de seis dessas caixas. O que vamos fazer é copiar e colar toda a linha. A maneira mais fácil de fazer isso no Dreamweaver é clicar em qualquer lugar da imagem e clicar em “Control D” em um PC ou “Command D” em um Mac. Você pode ver que ele apenas faz uma duplicata, porque o que eu quero não é apenas uma duplicata da imagem, mas também a coluna do lado de fora. Vou clicar aqui, Controle D, queremos seis no total. Então eu quero que você passe pela imagem 1, há uma imagem 2. Aqui em baixo há uma imagem 3, você tem que clicar para fora, clique de volta em 4. Você pode ver que ele está visualizando para mim, ou algo no Dreamweaver 5 e 6. Incrível. Vamos clicar em “Salvar”, visualizá-lo em um navegador. Agora eu tenho a primeira imagem responsiva, mas agora eu tenho todas elas. Estamos prontos para ir. Volte para o Dreamweaver, aperte “Salvar”. Se o seu está funcionando, incrível, continue. Se o seu não estiver, e não estiver funcionando totalmente, feche o que temos aberto, e abra o índice 5. Isso nos levará de volta, pré-visualizá-lo em um navegador, volta para onde estamos agora. 7. Como adicionar resposta: A próxima coisa que precisamos fazer é olhar para a nossa maquete, você pode ver lá na verdade, você pode ver que esta imagem é apenas deste tamanho, mas na nossa maquete atual, é restrição para todo o tamanho. O que precisamos fazer é o contêiner em que ele está, lembre-se que chamamos de classe de col. Precisamos dizer: “Ei, coronel, você precisa ter 33 por cento, não 100 por cento como você é no momento”. 33% compõem nosso bloco, 33,3, então vamos ver como fazer isso agora, voltar ao Dreamweaver. No Dreamweaver, vamos entrar em estilos e o que eu quero fazer na exibição da minha área de trabalho, não no tablet. Encontre o tablet bem na frente dele, vou colocar alguns retornos. Vou colocar A.COL. Eu gostaria de Col aqui, calibraces. Eu gostaria que você fosse uma largura e eu vou usar porcentagem de 33,3 por cento. Em seguida, o ponto-e-vírgula no final. Certifique-se de que você tem a sintaxe correta. Muitas vezes, quando estou ensinando as pessoas, 30 coisas de largura com 33,3 por cento. Apenas certifique-se que parece que o meu apertou “Salvar” que vai funcionar. Vamos tratar disso, navegador. Diz trabalhando, havia 33,3 por cento e muito obrigado, mas por padrão eles empilham um em cima do outro. Eles bloqueiam em cima. Podemos substituir isso por baixo, chamá-lo, colocar um escrito logo abaixo da largura e dizer flutuar meus amigos, flutuar para a esquerda, ponto e vírgula, salvar, visualizar e agora eles estão todos grudando um ao lado do outro. Meu Deus, você é incrível. São 33,3 por cento, não importa em que ponto de vista eu esteja. É isso para a visualização de desktop, vamos adicionar algum preenchimento mais tarde, mas é assim que redimensionar o nosso para a nossa visualização de desktop. Bem feito a seguir que precisamos fazer é que você pode ver na minha maquete aqui, na verdade é 33,3 por cento no desktop em um tablet, leva em 50%, certo? Quando é um celular, tem 100 por cento de diâmetro. É o que vamos fazer agora. No Dreamweaver, o que vamos fazer no tablet aqui, abaixo da direita antes do fechamento porque você pode ver o Dreamweaver destacando-o de forma útil. Você pode ver se eu clicar em qualquer um desses começando de novo e você pode ver que é o rapa, então nós queremos ter certeza de que tudo fique dentro desses dois calibraces abaixo de cada um. Mas antes deste encerramento, vamos dizer que eu gostaria. Col. Calibraces retornam. Eu gostaria que fosse uma largura, porque assim como fizemos lá em cima. Vamos dizer que a largura de no nosso caso é de 50% para o tipo a ponto e vírgula no final. Eu não preciso dizer float esquerda já, porque é um dos top que já diz isso. Só temos que dizer uma vez. Mas quando se trata de largura, queremos dizer realmente tablet substituir o 3.3 e tornar-se 50 por cento. Vamos dar uma olhadinha. 33,3 por cento manifestando que tinha que dizer para baixo para tablet forma 3D. Agora é decking vontade como queríamos no Photoshop e é 50 por cento de diâmetro. Agora, eu quero que você pare isso agora e veja se você pode ir e fazer isso para celular sozinho. Pausa, vai, faz, eu faço aqui. Se você não é oferecido o D é vamos e fazê-lo juntos ou se ele foi terrivelmente errado, com o meu. Se o seu não fez e você fez isso e você posar como um trabalho, tenha muito orgulho de si mesmo, você aprendeu muito web design responsivo em um tempo muito curto. Você é incrível. O que eu vou fazer no celular, eu quero usar o mesmo col e calibraces. Eu só vou dizer com meus amigos de você com 100 por cento. Lembre-se, não se esqueça do ponto-e-vírgula, salve-o e visualize no navegador. Tablet é 50, celular é 100 por cento. Somos web designer responsivo do novo século. Eu fico animado, mas espero que você esteja um pouco animado também porque estamos realmente aprendendo os fundamentos do web design responsivo. Tudo o resto vamos fazer cócegas e vamos dar certo, mas já fizemos as fundações reais e essas fundações são consultas de mídia, ok? Em seguida, olhamos para fundos responsivos. Fizemos isso por aqui, um passado. Lembre-se que fizemos uma imagem de fundo e usamos esta nova opção CSS3 chamada capa. Isso foi incrível. Mas então queríamos usar um pouco diferente não como um fundo, mas apenas como uma imagem antiga regular. O que tínhamos que fazer era aprender um seletor composto. Mas realmente a parte principal foi esta onde dizemos com 100 por cento. A altura do auto e do bloco de exibição, ou seja, imagens responsivas. A última coisa que acabamos de aprender foi que dissemos: “Ei coluna na área de trabalho, queremos que você tenha essa largura. Mas quando eu uso minha consulta midi chique, eu quero que você seja 50 por cento”. Basicamente, todas as outras mudanças responsivas que vamos fazer, eu vou ser apenas iterações em fazer isso. Escolher consulta imediata, escolher o que controla a coisa que queremos mudar e, em seguida, apenas fazer algumas mudanças dependendo se estamos em tablet ou celular. Se o seu ainda não funcionou e não está funcionando. Vamos fazer um reset e seguir em frente. Vamos fechar o índice cinco e abrir o índice seis, chegando perto do fim. Espero que se eu visualizar e um navegador agora, tudo está despertando 100 por cento. Comprimidos, 30 por cento, 33. 3 por cento para desktop. 8. Como completar nosso site: A próxima coisa que eu gostaria de fazer é que eu quero o que está realmente me irritando é que não há lacunas entre aqui enquanto no meu design há lacunas largas agradáveis entre tudo. Vamos editar porque eu estou na margem de um quarto, no Dreamweaver aqui vamos para o nosso styles.css e o que queremos fazer é em torno da coluna. Temos três colunas agora, há esta de cima aqui, que é a minha versão desktop. O topo, também é conhecido como o global, a versão superior, então aqui meu tablet há outra coluna e há outra coluna. O que eu vou fazer é para este top aqui e o que eu vou dizer é que nesta coluna, eu gostaria que você tivesse uma margem para a minúscula, margem de 1%. Vai colocar 1% ao redor do lado de fora de cada coluna e vai nos causar um pequeno problema inicial. Para salvá-lo, certifique-se de que o ponto e vírgula no final, você está ficando cansado de eu dizer isso, não é? Vamos entrar no navegador e funciona. Há uma fronteira em torno do exterior de 1%, mas porque há 1 por cento lá, 33,3 por cento aqui, mais 1 por cento mais 1 por cento mais não há espaço suficiente. Tudo equivale a mais de 100 por cento, o que não podemos fazer. Sempre que você adicionar uma margem de 1%, você precisa retirá-la da largura. Há 1 por cento em cada lado, você pode ver que há 1 por cento lá, 1 por cento lá, então queremos menos 2, para par, então é 31,3 por cento. Vamos bater salvar, verificar e agora ele tem espaço suficiente para caber. Legal. Precisamos fazer o mesmo por todos eles, porque se chegarmos ao tablet, faz a mesma coisa. Não há espaço suficiente, então o que precisamos fazer é menos 2 do nosso tablet. Vamos descer para 48 por cento, verificar, podemos encontrar todos os ajustes. Agora vamos para o celular. celular ainda funciona, não sei por quê. Não deveria. Vamos descer para 98%, então todos se encaixam e podemos ver as bordas ao redor das bordas. Bom trabalho. Agora, se o seu é como o meu e você pode ver 90 lá em cima, eu acho que é só porque eu tenho uma versão melhor do Dreamweaver, aperte o reset e ele se foi. Acontece um pouco comigo no momento, mas tenho certeza que isso é só um bug na minha máquina. Uma outra coisa que você pode estar olhando em bugs me também é porque nós colocamos uma margem em torno disso, não alinha com isso mais e isso fica um pouco maior do topo, então nós só precisamos adicionar uma borda de 1 por cento para esta div etiqueta no topo aqui. Lembra-se do que lhe chamávamos? Chamava-se caixa de herói. Vamos encontrar a caixa de herói aqui, ali está ele e você, meu amigo, obter uma margem também. Uma margem de 1%, ponto e vírgula, salvar. Agora está tudo parecendo um pouco mais agradável, há uma margem em torno dele também. Porque nós não demos a ele uma largura, ele não precisa ser menos fora de tudo que você pode ver ele não tem uma largura em qualquer lugar, então se ele deu, você teria que menos fora como nós fizemos com esses outros mas nós não temos para que ele Está bem. Por último, mas não menos importante, o que eu quero fazer é olhar para a navegação. Você pode ver aqui na minha maquete que está preso lado a lado aqui na área de trabalho, mas em tablet e celular eles estão em cima um do outro. No momento, porém, eles estão todos grudando um em cima do outro. O que eu gostaria de fazer é que eu gostaria de dizer na vista de desktop, minha navegação, eu já fiz uma classe, uma classe composta aqui para armazenar minha navegação apenas para economizar tempo no início. O que eu gostaria de fazer com ele é que você está procurando aquele que diz nav ul li, aqui está a minha lista para a minha navegação. O que eu gostaria de dizer é que eu gostaria que você mostrasse e eu gostaria que você fizesse este chamado inline-block. Isso significa que eles vão ficar ao lado do outro, não se esqueça do ponto-e-vírgula, aperte salvar, confira. Incrível. Agora o problema é que quando ele chega ao tablet, ele também permanece o bloco inline-e ele fica um pouco confuso e não há espaço para ele com um logotipo, então ele fica por baixo, então precisamos trocá-lo de volta quando ele chegar ao tablet, para que empilhados em cima um do outro método que tínhamos. Tudo o que precisamos fazer é encontrar Nav ul Li, aqui em baixo no tablet, que não existe. O que vamos fazer é por baixo da coluna que eu vou colocar neste chamado nav ul li, clique blaces e eu gostaria de dizer quando ele chega aqui embora, Eu gostaria que você para agora exibir bloco e isso significa que eles vão empilhar em cima de cada um. Vamos apertar salvar para visualizar no navegador, incrível. Área de trabalho empilhados na linha e aqui empilhados bloco, mesmo com celular. 9. Conclusão: Meus amigos, isso vai ser o fim desta vez. Nós cobrimos muito em nosso tempo juntos, focando principalmente em web design responsivo. Recapitulando, web design responsivo é um termo guarda-chuva que abrange algumas coisas diferentes que fazemos quando estamos construindo um site. As principais são as consultas de mídia, onde podemos fazê-los acionar em diferentes tamanhos de navegadores. Dentro dessas consultas de mídia, podemos fazer algumas coisas divertidas com coisas como as larguras de coluna, para ajustar para diferentes tamanhos e alterar coisas como os tamanhos de fonte e posicionamento. Também responsivo foi nossas imagens, lembre-se que fizemos uma largura de 100 por cento para as imagens. São imagens responsivas. Fizemos imagens de fundo responsivas, onde fizemos nossa imagem de fundo mais essa capa de tamanho de fundo. Então você pode ver quando se trata de web design responsivo, muito do trabalho é feito em nosso CSS e HTML é mantido agradável e limpo. Há muito pouco que nós realmente adicionamos a ele, mas muita funcionalidade foi feita usando nosso CSS. Tudo bem, te vejo mais tarde. Tenha um ótimo dia.