Sua primeira página de HTML e CSS — Dreamweaver

1. Introdução — programação para designers: Oi, meu nome é Dan, e você meu amigo criativo vai codificar seu primeiro site. Agora, vamos fazer isso curto, vamos torná-lo super fácil, e você tem que pensar em todo o dinheiro extra que você vai ganhar com suas loucas novas habilidades de codificação web design. Eu construí este curso para designers que sabem como projetar um site, mas fica assustado quando se trata do lado do código das coisas. Não mais. Este curso vai permitir que você faça o que eu faço. Você poderá criar algo no Photoshop ou no Illustrator e, em seguida, dar vida a ele em um site usando o Dreamweaver. Não se trata de aprender a hackear a matriz, mas sim de garantir que suas ideias sejam honradas com precisão quando se trata do site finalizado. Usando as cores certas, a quantidade certa de espaçamento entre linhas, o peso perfeito da fonte, o peso perfeito da fonte, e apenas certificando-se de que tudo se alinha perfeitamente. Vamos criar este website de portfólio aqui juntos, e vamos levá-lo de maquete, todo o caminho até realmente tê-lo publicado online. Vamos lá. Sabe que quer fazer isso há muito tempo. Cadastre-se para o curso e você, tipo criativo, e eu, careca com sotaque e óculos, vamos codificar nosso primeiro site. 2. O que construiremos e recursos: Ei, ali. Neste vídeo, vamos ver o que vamos criar em todo o site, bem como todos os recursos que eu tenho para você ajudar com esta série de vídeos. Aqui está o site que vamos construir. É um site de portfólio para criativos, e estou feliz por você usar esse layout exatamente para si mesmo, basta trocar todas as imagens CB e o logotipo. Você provavelmente não vai usar uma foto minha, encontrar sua própria foto de seu adorável eu de pé ao lado de um poste. É um site realmente fácil de construir para si mesmo quando você está construindo um portfólio. Agora, as grandes coisas a notar antes de começarmos a construir isso é que ele é responsivo e isso só significa que ele profundidades para telas de tablet, telas celular e, obviamente, a área de trabalho aqui. A área de trabalho aqui tem algum preenchimento nas laterais e há um grupo de imagens na parte inferior aqui de três por três. O que queremos fazer é dar uma olhada quando eu redimensioná-lo. Eu vou redimensioná-lo e ele vem responsivo quando chegar ao tamanho, você pode ver? Na verdade, está se esticando, as imagens estão se alongando, o texto está sendo moldado e a navegação aqui no canto superior direito está se ajustando. Agora, quando chegar ao tablet, veja isto. Consegue ver a mudança aí? Entre lá, isso é para a minha vista de área de trabalho meio apertado para baixo e, em seguida, ele muda para tablet. Agora as grandes mudanças aqui são provavelmente a mais óbvia aqui em baixo é que ele pára de empilhar três por três e é dois por dois. Vamos empilhar em cima de cada unidade, mas aqui. A outra coisa é trazer o menu de navegação aqui. É empilhado um em cima do outro no tablet, mas quando é um desktop, ele tem um pouco mais de espaço, então está espalhado dessa maneira. Agora, quando eu descer ainda mais para celular, eu procuro minha visão móvel, você pode ver a grande mudança aqui é a navegação. Ele se transforma neste menu de hambúrguer ou nav sanduíche, ou três linhas listradas. Eu amo essas descrições deste pequeno ícone aqui. Isso vai ser uma grande coisa para nós começarmos é mudar isso para aqui. Nós vamos usar um pouco de JavaScript, e na parte inferior aqui as mudanças são essas imagens empilhadas em cima umas das outras agora uma por uma. O que eu também fiz foi, você pode ver que só há quatro aqui, um, dois, três, quatro. Eu desliguei alguns deles apenas para que não é tudo realmente página longa, só que nós podemos ligar e desligar as coisas para as diferentes telas para que você tenha uma idéia de como ele funciona. Essa é a última coisa. Vamos construir isso juntos. O que eu vou fazer é, haverá um link na tela aqui agora, bing, onde você pode ir e ver o site ao vivo. Ele vai estar sempre lá em tempo real e ele vai apenas ajudá-lo enquanto você está construindo para ir e verificar a minha versão para ver como o seu comparar porque o seu pode não estar funcionando como você pensou e você pode sair e verificar a minha versão. Outra coisa que vamos fazer como parte do curso é, no final de cada vídeo, o que eu vou fazer é salvar os arquivos onde eu estou fazendo e isso significa que se você está trabalhando e você ficar um pouco perdido, e Você pode apenas verificar minha versão dele no momento em que você está apenas para comparar a sua com a minha, só para ver onde você pode ter errado. Essa é a versão final. O que vamos criar, e como você normalmente trabalhará, é seu trabalho de uma composição do Photoshop. Então isso é o que usaremos como referência. Voltaremos a esta maquete do Photoshop só para conferir. Agora, se você quiser criar sua própria maquete no Photoshop antes de começar a projetar no Dreamweaver, é muito comum fazer isso. É muito difícil ser criativo no Dreamweaver, você está apenas construindo o site baseado em uma maquete que você fez em algum lugar e é tradicionalmente feito em algo como o Photoshop. Se você quiser começar mais em design no Photoshop, eu tenho um outro curso para isso, então vá verificar esse, é projetar sites usando o Photoshop. Este arquivo aqui será parte dos arquivos de exercícios baixados que fazem parte deste curso, então haverá um link na tela aqui e haverá também um link em algum lugar nesta página para que você possa ir e baixar os arquivos de exercícios. Ele inclui todas as imagens que precisamos, todos os arquivos acabados, todos os arquivos de produção, e este PSD para que você possa tê-lo aberto e trabalhar apenas para que você possa trabalhar perfeitamente com o curso. Os outros recursos que fazem parte deste curso são os arquivos de exercícios, que serão o HTML e CSS, todas as imagens que usamos neste curso, qualquer um dos JavaScript que usamos para fazer o menu, esses tipos das coisas. Além disso, os arquivos de produção, lembre-se, no final de cada vídeo, eu vou salvar meu arquivo do Dreamweaver com todo o código que está ali para que você possa fazer o download e verificar caso você se perca um pouco. A outra coisa que você pode fazer se você é um professor ou um treinador e você quer transformar isso em seu próprio curso, eu tenho recursos para professores. Haverá um link na descrição aqui ou haverá um link na página aqui, e o que isso fará é levá-lo a uma página onde você pode encomendar pastas de trabalho e o que você faz é assistir a este curso, melhorar suas habilidades, e, em seguida, você pode usar essa pasta de trabalho para trabalhar que através da classe. A questão é, eu adoraria que você postasse seus projetos. Você vai ajustá-lo para sua própria coisa, mesmo que não esteja terminado, e exatamente onde você precisa. Eu adoraria ver um link ou uma captura de tela de onde você está. Postar nos comentários nesta página, seria incrível. Outra coisa é que uma vez que você chega a um ponto, você está assistindo este curso e você está pensando, “Este é um curso muito bom”, ou “Este é um curso muito terrível ”, eu quero que você pule e me dê uma crítica. Comentários em qualquer fase são realmente úteis para mim para desenvolver meu curso e em um monte de plataformas, é a maneira que eu classifico bem e eu treinei e eu adoraria uma revisão porque quanto melhor este curso faz, mais alunos eu obter e quanto melhor eu sou pago por meus esforços. Então salte para fora, me dê um comentário quando estiver pronto. A última coisa que fiz foi criar uma folha de truques para você. Há um PDF que você pode baixar, imprimir e colocá-lo ao lado de seu computador com todas as dicas úteis truques e coisas enquanto você está criando um site no Dreamweaver. Há também uma versão em vídeo dessa folha de truques no final deste curso, ou haverá um link na página aqui. Isso é o que vamos fazer. Esses são os recursos disponíveis. Vamos sair, adorável designer, e construir seu primeiro site usando um código assustador. 3. Nossa primeira página em HTML e CSS: Ei, nesta página vamos criar nosso primeiro pedaço de HTML e CSS. Vamos fazer alguma codificação, mas não se preocupe, vai ser bem fácil codificar. Vamos entrar nisso. Eu abri o Dreamweaver, primeira coisa que precisamos fazer é criar algo chamado um site, então vá até o site ao longo do topo aqui, vá para o novo site, dê um nome ao seu site, você pode chamá-lo do que quiser. Vou ligar para este portfólio do Dan, e aqui em baixo, esta é a parte importante, a pasta local do site e tudo o que isso faz é dizer ao Dreamweaver que você vai manter seu site em seu computador. Agora você precisa manter todos os seus arquivos nesta pasta. Você não pode tê-los espalhados por todo o lugar como você pode fazer como um designer gráfico, você tem que tê-los todos em seu laptop. Vamos criar uma nova pasta, então vamos clicar neste pequeno botão de navegação. Vou colocar o meu na minha área de trabalho para este caso, e eu faço uma nova pasta, eu vou chamá-lo de Dans-portfolio. Você pode ver a convenção de nomenclatura aqui, apenas não use espaços, tente usar sublinhados e porque agora você vai ser um codificador hardcore, você precisa usar letras minúsculas em vez de maiúsculas ou maiúsculas, só porque, nenhuma razão real. vamos clicar em “Criar”, vamos clicar em “Escolher”. Uma última coisa que faremos antes de irmos é, apenas para facilitar nossas vidas, ir para configurações avançadas e ir para a pasta de imagem padrão, clicar nesta, e clicar em “Nova pasta”, e digitar ot images e clicar em “Criar”. O que é feito é que acabou de ser feito, vamos clicar em “Escolher”, eu vou mostrar a minha área de trabalho. Você pode ver aqui é a minha pasta que eu fiz e dentro há a minha pasta de imagens, e essa pasta de imagens aqui em avançado só vai nos ajudar quando estamos reunindo imagens de todos os tipos de lugares. Ele garantirá que o Dreamweaver os pegue e os coloque dentro dessa pasta local do site. Lembre-se de tudo nesta página, incluindo o nosso texto ou os nossos ficheiros, quaisquer imagens e vídeos, todos têm de ir para esta pasta na minha área de trabalho chamada dans-portfolio. Vamos clicar em “Salvar”. Primeiramente, vamos criar uma página HTML 5. Agora o seu pode parecer um pouco diferente, você pode estar em arquivos recentes ou arquivos CC, apenas certifique-se de que você está no início rápido. Vamos clicar em “Documento HTML 5”. Durante este curso o que vamos fazer é, há algumas opções. Há padrão, e desenvolvedor, há ao vivo e dividido em todos esses tipos de coisas. Vamos estar no modo de desenvolvedor. Eu sei que não somos desenvolvedores, somos designers, mas vamos aprender a codificar, podemos muito bem usá-lo com as melhores ferramentas que pudermos e este modo de desenvolvedor tem as melhores ferramentas e também é muito leve e realmente rápido, enquanto a visualização padrão pode ser um pouco lenta e eu acho que é um pouco difícil de usar, então certifique-se de mudar para desenvolvedor. O seu pode parecer um pouco diferente, o seu provavelmente está em arquivos aqui então eu vou trocar o meu lá. A primeira coisa que devemos fazer é salvar nossa página. Então vamos para Arquivo, vamos para Salvar. Agora, para nossa primeira página, precisamos chamá-la de index.html, e isso é verdade para cada site, você precisa de pelo menos uma página chamada index.html exatamente assim, e essa será sua página inicial, e você não pode chamá-lo de qualquer outra coisa apenas para esta página, todas as páginas anteriores, digamos na página do portfólio ou quaisquer outros serviços ou contacte-nos, eles podem ser chamados de qualquer coisa que gostamos, mas a página inicial precisa ser chamada index.html. Onde é que a vai pôr? Ele vai colocá-lo dentro do portfólio de dans, eu só vou fazer isso um pouco maior, e eu vou clicar em “Salvar”. A próxima coisa que devemos fazer quando estamos fazendo novas páginas adicionar um título de página, no momento é chamado de documento sem título, e isso só significa que se eu visualizar no navegador, assistir isso, vamos para o arquivo, vamos para a visualização em tempo real e clique em “Chrome”. Ele vai abrir em um navegador, e você pode ver o título no topo aqui diz “ documento sem título ” que o pequeno título da página lá e que aparece em todas as páginas e que aparece tanto aqui nessa pequena aba e quando as pessoas marcam sua página como favorito, mas também quando o Google faz uma pesquisa. Se eu fizer uma pesquisa no Google, digamos tutoriais do Dreamweaver. Veja estes pequenos, aqueles ao longo do topo aqui, estes pedaços azuis, que é onde a página termina totalmente. Se você tem documento sem título, isso é o que será em azul e Google, e você realmente nunca vai classificar. É muito importante quando você está fazendo páginas para entrar no título da página, então vamos fazer isso agora. Aqui no Dreamweaver sem título, este será chamado Daniel Scotts Design Portfolio. A próxima coisa que vamos fazer é adicionar nosso primeiro pedaço de código. Vamos tocar “Safe”. Para colocar qualquer coisa em sua página, você precisa colocá-lo entre essas duas tags chamado corpo. Há um aberto e um fechamento, você pode ver que o fechamento aqui tem a barra dianteira na frente dele. Se eu colocar um par de retornos aqui, então qualquer coisa que apareça aqui, vai aparecer na minha página, qualquer coisa que apareça no topo aqui, nesta cabeça, é tipo coisas no fundo, como, este título da página aqui é o tipo de coisa que o navegador usa para coisas estranhas. Em termos do corpo aqui, é aqui que vamos colocar o nosso código. Agora vamos colocar em nosso primeiro pedaço de código HTML. Você está pronto? Pronto para se tornar um codificador? A primeira coisa que vamos fazer é colocar um colchete angular, e vamos digitar h1, então h1 é considerado o título mais importante em sua página. Para fechar o título, precisamos colocar em um ângulo apertado colchetes. Essa é a abertura da cabeça e então vamos colocar “Olá mundo”. Você tem que escrever “Olá Mundo “para o seu primeiro pedaço de codificação só porque essa é a linha de passagem para todos. Se você é um programador e você já vai para a escola de codificação, essa é a primeira coisa que você vai produzir, é algo que vai fazer uma página que tem Olá mundo nele. Bem-vindo, então vamos realmente fazer isso funcionar para nós. Temos h1, a abertura, depois temos Hello World, agora para fechá-lo, precisamos colocar um suporte angular, e depois barra para frente. Dreamweaver é muito inteligente e termina para nós, mas você pode ver aqui há o aberto, no meu h1, e aqui está o meu encerramento. A única diferença é que é a mesma coisa, exceto que tem uma barra direta, então ela envolve essa palavra, e isso vai estar indo, então nós fizemos isso, mas precisamos ver isso. Vamos usar a pré-visualização do navegador em tempo real. Agora você pode ir até o arquivo ou há uma maneira mais rápida para baixo aqui, selecione visualização, eu vou clicar em “Google Chrome”, e lá meus amigos, temos Olá mundo em um belo grande cabeçalho. Você, meu amigo, agora é um programador. Desde que as pessoas queiram um site que só tem títulos nele. Mas nós fizemos isso, nós temos um h1 e ele tem alguns textos lá, ele está em uma página, nós até codificamos nosso cabeçalho ao longo do título da página IPRL. Vamos voltar e fazer um pouco mais de codificação. Aqui no Dreamweaver, criamos nosso primeiro pedaço de HTML. A próxima coisa que precisamos fazer é criar algo chamado CSS. Agora HTML são coisas como as palavras e as imagens que vão para a página eles são bastante físicos e eles aparecem na página, o CSS é o que nós os estilizamos com porque isso é o que nós queremos fazer agora é este cabeçalho é grande, negrito em Times New Roman e preto. O que queremos fazer é ir e começar a estilizá-lo, e vamos fazer isso em nosso CSS. Você está pronto? Vamos arquivo, vamos para novo, vamos mudá-lo para CSS, clique em “Criar”, e isso é uma folha CSS. Não é particularmente excitante, pois não? tem um pouco de textos lá, então vamos salvá-lo. Arquivo, vamos salvar, você pode chamar isso de qualquer coisa que você gosta, mas é realmente comum chamá-lo styles.css. Agora a próxima coisa é que precisamos vincular os dois porque estes são dois arquivos separados no momento, eles ainda estão na mesma pasta, mas eles não estão conectados, então vamos fechar os estilos aqui e precisamos conecte-os. Você faz isso ligando a ele nesta cabeça e nosso corpo é tudo o que aparece na página e a cabeça é tudo o que está no fundo que faz essas coisas por trás da cena, e é isso que vamos fazer aqui em cima. Vamos colocar um retorno depois, vamos colocar outro link para o nosso CSS. Agora, na verdade é bastante longo, mas de código, então há muitos truques que o Dreamweaver tem para tornar as coisas um pouco mais fáceis para nós, e essa é a razão pela qual pessoas como eu, vêm de um fundo de design, pode realmente fazer desenvolvimento web front-end é por causa de todas essas coisas úteis que o Dreamweaver nos permite fazer. Vamos fazer isso, vamos digitar o link da palavra e o que você quer fazer é que você quer apertar Tab não retornar, retornar não faz nada. Nós só temos essa palavra estranha chamada link, mas se nós temos link e apertamos Tab no nosso teclado, olha o que acontece. Ei, mágica, ele coloca links para uma folha de estilo e tem essa coisa href aqui e se começarmos a digitar, s, você pode ver Dreamweaver é ainda mais útil, ok, e você pode ver o styles.css. Ele olhou na minha pasta e diz, “Você provavelmente quer dizer este Dan”, e eu digo sim, e eu apenas apertei Return no meu teclado e ele coloca lá dentro. Eles agora estão conectados, se eu apertar Salvar, Arquivo Salvar, você pode ver esta pequena barra de documentos aparece no topo aqui, então o código-fonte faz referência ao HTML que eu estou olhando, todo esse mundo Olá. Aqui em cima, os estilos, ok, é quando eu estou mudando para o estilo, e eles estão conectados agora, então o que eu posso fazer é eu posso estilizar este h1 no meu styles.css. Entra aqui. O que podemos estilizar? Podemos estilizar cargas. Mas vamos ao básico feito. Vamos digitar h1, e CSS tem sua própria sintaxe, não é particularmente difícil, CSS é o mais fácil de todos os bits de codificação que você vai estar fazendo, então é h1 para referenciar a coisa de volta em nosso HTML e então nós colocamos em uma cinta encaracolada e, em seguida, um proto retornando, e você pode vê-lo automaticamente colocar em uma cinta encaracolada no topo aqui e na parte inferior. Nosso estilo só precisa ir a qualquer lugar entre eles. Não os apague, ou, o de cima, tudo aqui dentro. Agora vamos começar a digitar. Vamos fazer a cor da fonte, então basta digitar col e você pode ver que o Dreamweaver é bastante útil e tenta pré-preenchê-lo com potenciais propriedades CSS e, neste caso, a cor está no topo, é realmente comum. Se você usar a palavra cor, ela faz referência à cor da fonte, e você vê que eu não digitei tudo, basta clicar em “Retornar” e preenchê-lo. Vamos fazer isso de novo, então você digita col e então eu posso usar minhas teclas para ir para cima e para baixo, eu aperto retorno no meu teclado e ele preenche com a sintaxe correta. Você pode ver que ponto-e-vírgula precisa ir lá. A próxima coisa que você precisa fazer é, se eu souber o número hexadecimal, eu poderia ir ao Photoshop e pegá-lo, ou eu poderia apenas usar o seletor de cores aqui. Você pode arrastar esta rodada e os controles deslizantes de matiz e vincular uma grade, pressione enter. A grande coisa a lembrar quando você está fazendo qualquer propriedade CSS é que para terminá-la, dizer ao Dreamweaver, você está acabado, é colocar um ponto-e-vírgula. Isso é um pouco de sintaxe. Curly chaves é um vizinho de dois pontos que automaticamente conseguiu, colocá-lo lá, e o ponto-e-vírgula no final aqui. Isso é o que você sempre precisa fazer, e quando você está aprendendo é o que você vai esquecer, e as coisas não vão funcionar, verifique novamente se você tem um ponto-e-vírgula lá dentro. Esse código ali é #FF0000 é o código para vermelho. Agora, vamos verificar o nosso navegador e o que vou fazer antes de partirmos é que eu vou salvar. Eu uso este salvando todos, o tempo todo. Eu vou fazer isso durante todo o curso, então salve tudo, para que ele salve meu HTML e meus CSSs. Vamos procurar o navegador. Você está pronto? Eu estou pronto. É um h1, mas é vermelho, olhe para nós fazendo web design. Vamos voltar ao Dreamweaver. O que mais podemos fazer? Diversão. Vamos fazer o tipo de letra. Você pode ver que há muita fonte, vamos fazer a família de fontes. Apertei a tecla de seta para baixo, apertei a tecla Return e aqui estão algumas básicas, vou escolher Gill Sans. Lembre-se bem no final desta coisa aqui nós vamos colocar um ponto-e-vírgula. Agora vamos clicar em Salvar e então vamos pular para o meu navegador, temos um grande mundo de olá vermelho gigante. Digamos que não gostamos do tamanho, então font-s e você pode ver o tamanho e eu vou colocar, vamos colocá-lo em realmente grande, então um 160 pixels, lembre-se de terminá-lo em um ponto-e-vírgula hit salvar, saltar para fora, gigante “Olá Mundo”. Aqui atrás, isso deve ser um pouco grande. Vamos descer para talvez 60 pixels, salve-o. Vamos olhar para uma das coisas, a fonte branca, porque por padrão é que grande fonte negrito branco é usado para, digamos esta fonte branca, e 100 é realmente fina e considerada, 400 é um regular, 600 é sobre um semi negrito e 800 é preto. Você gosta das fontes grandes e grossas, então eu vou fazer 100, lembrar o ponto e vírgula final, salvar, saltar para fora. Está começando a parecer legal. Gill Sans é uma daquelas fontes estranhas onde eu amo muito pequeno, mas eu odeio em negrito, eu não sei por quê. Ódio é uma palavra forte. De qualquer forma, vamos voltar ao Dreamweaver e que meu amigo é basicamente o que vamos fazer para construir um site. Você coloca as coisas em seu HTML aqui, neste caso é um h1, mas pode ser uma imagem ou pode ser um link e então você pula para o seu styles.css, você faz referência a ele pelo nome, e então você dá algum propriedades, e há muitas propriedades diferentes, mas não é tão difícil. As pessoas pensam que codificar um site é super difícil e pode ser assim que você entrar nos sites Java dinâmicos realmente grandes e hardcore. Mas em termos de web design front-end e o que você espera fazer, você deve saber muito sobre como colocar coisas em HTML e, em seguida, como estilizá-lo em CSS e não muito mais, então não se assuste com isso. Isso é tudo para este vídeo, abordamos como iniciar um site, definir um site local e, em seguida, criamos nossa primeira página HTML. Nós colocamos um h1 E lá, nós criamos nossa folha de estilo, nós o estilizamos, nós fizemos algum web design. Isso vai ser para este vídeo, vamos para o próximo e o que vamos fazer no próximo é começar a olhar para algo chamado media queries, e isso apenas nos ajuda a aprender sobre a capacidade de resposta. 4. Tornando o seu site responsivo: Ei, bem-vindo a este vídeo. Neste, vamos aprender o que é web design responsivo e como fazê-lo usando algo chamado media query. O que gostaríamos de fazer é, quando a tela se ajusta a tamanhos diferentes, eu só vou arrastar isso como um exemplo, mas o que estamos tentando fazer é obtê-lo assim quando ele olha no tablet, parece algo, e quando é um móvel, ele parece diferente, e quando em um desktop, tudo parece diferente, e isso é responsivo. Estava respondendo ao tamanho da tela. É o que vamos fazer neste vídeo. Então vamos entrar no Dreamweaver. Em nosso último vídeo, nós apenas colocar em algum h1 básico real no HTML, e então nós o estilizamos em nosso CSS. Agora, quando você olha para a capacidade de resposta, o que vamos fazer é fazer algo chamado Desktop-first no CSS. Agora, muitas pessoas fazem Mobile-first, então eles vão começar a estilizar suas telas móveis primeiro porque pode ser a tela mais difícil de projetar porque é tão pequena. O que estamos fazendo neste curso, e eu acho que o que a maioria das pessoas começa e com o que eu começo, é que eu começo com o design do meu desktop e, em seguida, eu o reduzo para o meu celular. Portanto, cabe a você se você começar a projetar seu celular primeiro ou seu desktop primeiro. Apenas saiba que é fácil ir e fazer celular primeiro, as pessoas adoram fazer celular primeiro. Eu, eu balanço o barco um pouco fazendo desktop primeiro. Mas não se preocupe, não faz diferença para o seu site e como ele funciona em dispositivos móveis ou tablets. Então o que vamos fazer é Desktop-first. Isso só significa que este h1 vai ser desktop. Só para tornar as coisas um pouco mais fáceis, o que vamos dizer é que vamos fazer um comentário. Os comentários são este aqui, e este cara aqui com uma barra e, em seguida, o asterisco, que é comentar em CSS. Você pode ver um lá em cima. Significa que qualquer coisa que eu coloquei aqui é só para as pessoas, é ignorado pelo navegador. Então você pode escrever qualquer coisa aqui apenas para ajudar a si mesmo, então você finalmente corrigir algo e você quer deixar uma nota para si mesmo, você faz isso nesses colchetes aqui ou neste pequeno trecho de código aqui. O que eu quero fazer é que este vai ser o meu Desktop View. Em seguida, o que eu quero fazer é copiar e colar isso. Estou aqui em baixo. Agora retém que qualquer coisa em código. Esta vai ser a minha visão do tablet. Então o que eu quero fazer é aprender a mudar isso usando algo chamado consulta de mídia. Agora, para escrever em uma consulta de mídia, é o símbolo @, em seguida, você digita mídia, em seguida, você coloca entre colchetes, em seguida, você digita “max-width”. Agora, em termos de consultas de mídia, essa é a única coisa no momento em que o Dreamweaver não ajuda muito. É o único pedaço de coisa que você vai ter que escrever para fora praticamente toda a sintaxe para. Isto é o mais difícil possível. Então, se você estiver acompanhando, você pode copiar e colar com os arquivos de exercícios. Você pode baixá-los e jogar junto, e apenas copiar e colar, ou como eu, você pode escrever. Vamos escolher um tamanho de tablet agora. Agora, uma largura máxima, isso significa apenas que estamos tentando dizer que tamanho este site deve mudar e que tamanho é o tamanho do tablet. Agora, o mais comum no momento é em 768 pixels. Agora isso vai se ajustar ao longo do tempo, e algumas pessoas usam alguns ligeiramente diferentes, mas esse é o tamanho mais comum do tablet no momento. Então eu vou colocar um aparelho encaracolado. Existe a sua consulta de mídia, e isso só significa que qualquer coisa dentro dessas duas chaves agora será acionada quando o navegador chegar a uma largura disso. Então vamos fazer isso, vamos fazer h1 como fizemos acima. O que vamos dizer é, não se esqueça de suas chaves em h1, colchetes retornam, e o que vamos fazer é forçar a cor a mudar. Então vamos usar a cor como fizemos acima. Vou usar o seletor de cores, e escolho verde. Não se esqueça do ponto-e-vírgula no final. Vamos colocar um pouco de espaçamento para que pareça um pouco mais agradável. Isso só significa que a visualização da área de trabalho, vai ser essa cor, mas então, se o navegador acontecer de ser uma largura deste ou menos, ele vai mudá-lo para a cor da tela. Vamos testá-lo assim que estiver salvo. Vamos voltar para o nosso navegador. Aqui está. Então, na visualização da área de trabalho, é vermelho. Mas olha para isso, então na largura de 768, ele vai mudar a cor e isso, meus amigos, é como web design responsivo é feito. Não tão difícil. As pessoas ficam um pouco assustadas com isso, e isso significa que, desse tamanho, faça outra coisa. Pode ser, como no nosso caso, vamos empilhar em navegações ligeiramente diferentes. Ok, então nós vamos empilhar esses caras lá, e colocá-lo lá. Estas caixas no fundo aqui, em vez de empilhá-las três por três na área de trabalho, vai ser dois por dois no tablet. Legal. Vamos fazer isso para celular também. Porque vamos usar todas essas coisas novamente, agradável e fácil, vamos para a visualização móvel e uma largura máxima para celular. Os telemóveis continuam a mudar. Eles continuam lançando novos modelos de iPhone. Então 400 parece ser realmente um bom tamanho. Acho que é muito útil. Ele amarra alguns dos telefones maiores, os phablety, e também muito tradicional. Quão grande são os iPhones no máximo? Acho que o 375 ou algo assim. Então eu torná-lo apenas um pouco maior para cobrir em alguns dos grandes telefones LG, Samsung. Faça 400, vai ser divertido. O que queremos fazer é mudar a cor. Então eu vou apagar tudo isso. Se eu digitar ponto-e-vírgula, deve me dar meu pequeno seletor novamente. Ótima. Escolho rosa, magenta ou roxo, seja qual for a cor. Lembre-se no final, ponto e vírgula, não se esqueça dele. Salve isso. Vamos saltar para o nosso navegador. Navegador Chrome. Este aqui. Então, desktop vermelho, você está pronto? Tábua, verde. Aqui vamos nós. Móvel, é uma cor púrpura e malvada. Vou contestar essa cor. Isso é web design responsivo. Então aqui, meu CSS, você pode ver a coisa boa sobre isso. Meu HTML é super limpo e claro. Há muito pouco nesta página. Há apenas uma nova linha que adicionamos. Mas em nossos estilos, parece bastante complicado, mas porque você construiu comigo, na verdade, eu sei o que isso faz. Na verdade, não é tão difícil. Codificar não é tão difícil quanto parece. Então vamos para h1, essa é a minha vista de área de trabalho. Você pode ver o que aconteceu aqui? Esse fluxo, é chamado de folha de estilo em cascata ou CSS. Então isso significa que esta coisa aqui, digamos a família de fontes, ela flui para baixo, e porque o tablet não discute com ela, e o celular não discute com ela, ela permanece Gill Sans por todo o caminho, seja tablet móvel ou desktop. Mas a cor, há um pouco de luta acontecendo. O que acontece é que é desktop a menos que essa pequena consulta de mídia seja acionada e faça isso. Então ele vai fluir até aqui, e essa pequena consulta de mídia diz, “Ei, quando eu chegar ao tamanho móvel, eu quero ser essa cor mindinho, púrpura e malvada.” Então isso é uma consulta de mídia. O que precisamos fazer agora, porém, é trocar o nosso h1 particularmente coxo e fazê-lo com a nossa navegação onde temos que nunca sanduíche e as coisas não funcionam. Então vamos pular e começar a fazer isso agora. 5. Criando um menu de hambúrguer de navegação: Oi lá. Neste vídeo, vamos olhar para fazer uma navegação responsiva. No topo aqui à direita, na minha área de trabalho, a navegação é três botões e uma pilha como esta. Mas tablet, tudo bem, ele cai para baixo e o grande é que quando é um celular, ele se transforma em um menu maior. Vamos olhar para fazer isso. Agora, o que não vamos fazer é, não vamos abrir um arquivo JavaScript, e começar a codificar tudo. O que vamos fazer é alavancar muito, em particular, uma coisa específica que já foi feita. Há muitas pessoas diferentes que criaram pedaços de código legais, pequenos e reutilizáveis que podemos usar e reinstilar. Porque apesar de ser bom fazer tudo do zero, se eu for honesto, se eu fizer um sanduíche de navegação sozinho, não, eu não fiz. Está bem. Eu saio e fico sobre os ombros de gigantes e encontro trechos que posso usar e dou o estilo deles. Mas, estou usando a base subjacente do trabalho deles. Agora, há um monte de diferentes. A linguagem para usar, digamos que você não gosta do que eu uso aqui, você quer começar com algo diferente. Estou procurando um sanduíche jQuery Nav. Se você for procurar por isso, você vai encontrar muitos. Eu encontrei este, é um que eu uso cargas. É muito simples, é muito fácil. É muito fácil de estilizar. Eu gosto disso. É este aqui, deixe-me tirar isso. Está bem. É este aqui chamado SlickNav, de Josh Cope. Graças a Deus pelo Josh. Ele fez um super fácil, sanduíche Nav que começamos a usar e estilo e tem muito boa documentação. Primeiro de tudo, você pode fazer uma de duas coisas é se você baixou os arquivos de exercícios. Eu tenho os pedaços que você precisa lá dentro. Mas se você está apenas assistindo o vídeo. Você pode baixar os arquivos que você precisa, colá-lo em sua área de trabalho, ou colá-los em algum lugar e abri-los, pode ter olhado lá. Há um arquivo zip, abre-os e aqui estão pedaços de documentação e as coisas que você precisa. Esta é provavelmente a única parte que é um pouco difícil para as pessoas que são novinhas em folha. Se sabe o que está fazendo, isso é ótimo. Mas se não o fizeres, há muita coisa aqui. Na verdade, tudo o que você realmente precisa é, se você abrir a distribuição aqui, você precisa dessa coisa e dessa coisa principalmente. Esses dois arquivos e um pouco de texto daqui. Vamos passar e fazer isso nós mesmos. Se você está acompanhando meus arquivos, abra o, “Como codificar arquivos de exercícios” e o que estamos procurando é que eu quero que você pegue isso, isso, isso. Estes três ficheiros vão ajudar a fazê-lo funcionar. Vamos clicar em “Copiar” e lembrar que vamos para o nosso desktop, abrir o portfólio de dans. Lembre-se de tudo para o nosso site todos os arquivos, imagens, este bit de código incluído precisa estar dentro desta pasta. Vou empurrá-lo aqui para dentro da raiz da pasta aqui. Se você está indo para ser realmente bom sobre isso, você deve ter uma pasta CSS e uma pasta JavaScript e colocar tudo CSS para isso e JavaScript para isso. Nós não vamos para este ia manter isso super simples e apenas colocar todos eles no fundo aqui. Porque não vai ser particularmente grandes sites. Isso é parte disso, nós temos esse slicknav e nós temos essa coisa aqui. Este pouco de jQuery que Josh escreveu e esta é a biblioteca que ele se refere. Você precisa dos três para fazer funcionar. Vamos pegar o código que precisamos para fazer funcionar. Se você acessar o site sliknav.com, ele tem aqui. Eu também salvei no arquivo de exercícios, então vamos conferir. Arquivos de exercícios, área de trabalho, código. Há um aqui chamado código de navegação. Se abrirmos isso, há esta parte e esta parte. Vamos pegar isso, mas primeiro, copie-o e vamos colocá-lo no Dreamweaver. Vamos substituir o “Olá Mundo”. Isso foi ótimo. Nós adoramos. Foi útil, mas não um site inteiro. Vamos colocar isso e só para ser bonita, vamos bater nele uma vez. Isso é lá dentro. Use essas guias para mostrar quem está dentro do quê. Vamos salvá-lo. Não está funcionando ainda, não se empolgue demais ou muito chateado quando não funciona. Vamos evitar um navegador, vamos ver o que temos aqui. Aqui está o meu site aqui. Isso é tudo o que é, alguns desses itens e você pode ver se eu mudar esses itens da lista. Agora, se eu mudar isso para portfólio, aperte “Salvar” aqui para ver que é isso que estamos fazendo. Está bem. Então isso vai ser na navegação. Essa é a primeira parte é que copiamos este pedaço de código. próximo pedaço de código para colar, é este material aqui. Este pouco de JavaScript aqui, vamos copiá-lo e vamos colocá-lo e para onde isso vai? Isso vai antes do fechamento do corpo, certo? Todo o JavaScript vai para baixo aqui. Sabe o que é JavaScript? Bem, você não sabe o que é JavaScript. Mas geralmente se há uma tag chamada script, eles significam JavaScript e ele sempre vai para baixo aqui e você tem apenas empurrá-lo para baixo do lado inferior não excluí-lo. Fique aí embaixo, isso é fechar minha etiqueta corporal. retornos não significam nada no código, mas apenas os mantêm separados. Agora, o que vamos descobrir é que nada está realmente funcionando ainda. Vamos pular e dar uma olhada. Nada está funcionando ainda. Isso é parte das coisas em que colamos isso, nós colamos isso. A próxima coisa que precisamos fazer é ligar esses arquivos. Está bem. Copiamo-los para o nosso disco rígido. O CSS e o JavaScript, nós não nos vinculamos a eles. Vamos fazer isso. Primeiro de tudo, vamos ligar para o CSS que Josh fez. Link, em seguida, guia. Então, se eu começar a usar, como se chamava? SlickNav lá é lá CSS. Está bem. Ótima. Essa é uma parte e, em seguida preciso vincular a esses dois arquivos JavaScript e vamos fazer isso aqui. Lembre-se JavaScript, ele vai para baixo. Vamos guiar e, neste caso, vamos à fonte e vamos, lá está. - Legal. Obrigado Dreamweaver. Há dois deles. Eu precisava fazer isso primeiro e vou fechar isso. Então precisamos colocar o fechamento para ele lá. Está bem. Temos a nossa fonte de script para que jQuery para slicknav.js e agora precisamos fazer a mesma coisa para eu estava indo para copiar e colar isso. Cole aí. Certifique-se de que as abas se alinham. Eu vou fazer tudo isso se alinhar bem, só porque não há nenhuma razão real, mas parece muito melhor quando tudo está alinhado torna mais fácil, para uma pessoa visual como eu ver. Ok, então vamos excluir este e vamos colocar no outro que era jQuery. Ali está ele. Ok, então aqueles dois. Os dois precisam estar lá. Vamos apertar “Salvar” e agora vamos dar uma olhada. Dedos cruzados. Não funciona. Parece exatamente como antes. Eu sei porquê. Vamos voltar ao Dreamweaver. Quando você estiver colocando este JavaScript na parte inferior, certifique-se de que este aqui, o jquery-1.11.3.min está no topo. Esta coisa aqui é a coisa que Josh criou, e faz referência a esta biblioteca acima dela. Se esta coisa aparecer primeiro, não pode ler abaixo de si mesma. Isso precisa estar acima e encadernado por baixo. Então isso deve funcionar agora. Vamos salvar, vamos saltar para fora e ter. Isso não está funcionando, pode não parecer, mas esse é o tipo de ossos grandes aqui. Então, a instalação do SlickNav, isto é, se você começa a ouvir, você ganhou. Vamos sair com estilo, obviamente, para fazer parecer que queremos. Se você quiser começar com algo diferente, se você der uma olhada no SlickNav, há muitas maneiras diferentes de começar. Começamos com esta Demonstração Básica que você vê aqui. Mas há maneiras de usar, acabamos de usar o código básico e você pode ver aqui há um bom saltitante com todos os tipos de outros dropdown, então se você quiser ir um pouco mais hardcore este K comece com este HTML e este JavaScript em vez do que o que eu lhe dei. Vamos passar e dar uma olhadela. Considerando que temos? Então ele faz menu suspenso e essas coisas estão dizendo agora, o que precisamos fazer em seguida é que queremos ver a navegação somente quando ele está para baixo na visualização móvel e esta coisa aqui nós queremos ver um tablet e desktop assim como eu vou mostrar aqui . Então esta é essa linha estilizada, este cara aqui, e nós o vemos aqui desktop, nós vemos aqui tablet, e não o vemos na navegação. O que acontece é que só vemos isso [inaudível], que é esse cara. Vamos excluir o menu de palavras, mas só vemos isso e celular, e vemos isso um tablet e desktop. Então vamos fazer isso com o ALCI diz. O que precisamos fazer é brincar com a forma como as consultas de mídia. Então vamos dar uma olhada, primeiro de tudo, vamos olhar para o SlickNav agora, eu dei uma olhada nisso para você e é, muito boas instruções, mas eles são realmente, para alguém que realmente nerd sabe o que está fazendo, Bom para mim, mas se você realmente novo, e você é um designer gráfico, deve ser um pouco difícil. Mas o que funcionou é que eu preciso desse cara aqui, essa coisa chamada SlickNav_Menu, e essa coisa aqui, vamos copiá-lo. Você pode simplesmente tocar o seu, eu vou para o Dreamweaver e o que nós vamos fazer é ir para os nossos estilos e vamos dizer na área de trabalho, eu gostaria que essa coisa chamada menu seletivo, e eu apenas jogado em torno e eu trabalhei para fora que menu SlickNav é o nome dado a esta caixa aqui, que pequena linha listrada. Então os três, que são técnicas para o outro são apenas chamados Menu. Então esse é o nome para estes são chamados menu e isso é chamado menu SlickNav. Então menu SlickNav, o que eu gostaria de fazer é colocar em chaves, e eu gostaria de fazer algo chamado display e eu gostaria de dizer bloco Wheatley. Eu gostaria de dizer nenhuma. Isso foi, me pegou quando eu comecei bloco se sente como o mesmo que nenhum como bloco não estar aqui. Mas bloquear significa exibi-lo como um grande bloco de madeira, é assim que eu me lembro de qualquer maneira. Então eu quero dizer quando eu estou na área de trabalho, Eu gostaria de menu listrado aqui, para exibir nenhum. Não quero que apareça, por favor, ponto-e-vírgula. Save, vamos dar uma olhada no nosso menu. Vamos olhar para a direita, vamos para aqui. Então, na área de trabalho, ele não exibe. No momento, embora ele não exiba um tablet, ou seja um celular, vamos ignorar esse cara no momento. Mas é tipo de trabalho, está fazendo o que dissemos, não exibir na área de trabalho e o que acontece é que este aqui flui para baixo e porque nada o contradiz em tablet ou celular, e ele permanece nenhum o tempo todo. Então o que precisamos fazer é realmente o que vamos fazer apenas para arrumar isso. Este h1 está aqui, usamos esse tipo de apenas para testar mais cedo, então, nós apenas o usamos para mudar a cor da minha batida apenas entendêssemos o que essas consultas de mídia onde e como eles funcionavam. No momento, vamos ter apenas um muito bom arrumado, há desktop e também eu quero ser um desktop barra global. As pessoas chamarão isso de global, esse top e qualquer coisa que o substitua, será no nosso caso, tablet e celular. Mas global é, se alguém diz colocá-lo em Global, eles significam a parte superior, pode não ser Desktop, você pode estar lidando com o que é chamado mobile [inaudível] .Então pode ser Mobile em vez de Desktop na parte superior, mas Isso é chamado de global no topo e eu me perdi um pouco. Mas o que precisamos fazer é aqui, vamos copiar todo esse pedaço. Então, neste topo, não exibir e modelo embora, eu gostaria de exibir, bloquear e vamos verificar. Na verdade, eu não quero fazer isso, não é? Eu quero que ele seja muitas vezes tablet porque meu pequeno menu, na verdade meu maquete e Photoshop tem lá fora também, e é apenas um celular, ou eu chego aqui e eu bloqueio. Vamos apertar “Salvar”. Vamos dar uma olhada. Então Desktop não está lá, Tablet não lá, Olá móvel e é tão fácil, tipo de. Acabamos de desligá-lo. A última coisa sobre este pouco de menu que SlickNav construiu é que estes são amarrados juntos, quando eu mudar, você pode ver aqui eu não tenho apenas como um portfólio. Se eu mudar este aqui e eu entrar em contato comigo aqui, você vê que está conectado a este aqui eles são todos iguais, mas exibidos duas vezes, e tudo o que precisamos fazer é decidir qual exibição será exibido. Então nós fizemos isso para o celular e isso funciona. Então é, bem que o menu maior, menu tão maior para celular não para tablet não para desktop, vamos lidar com este. Eu queria [inaudível] Desktop, Eu gostaria que ele aparecesse para o tablet, mas quando ele entra no celular, Eu quero que você vá embora porque isso vai ler o menu e este menu é chamado, menu. Então nós vamos para os meus estilos, e o que eu gostaria de fazer é quando eu chegar ao mobile view, eu gostaria de dizer menu div. Você deve ter notado que estamos usando paradas completas para essas coisas, para descrevê-las e às vezes não, às vezes temos hashes. Estamos apenas seguindo a pista da pessoa que fez o SlickNav. Isso é chamado de classe e isso é aqui é chamado de ID e classes têm períodos na frente deles, paradas completas, e IDs têm hashes. Como sei que é uma identificação? Um par de coisas. A maneira mais fácil estava nas instruções dele. Há lá diz menu de hash, e eu posso vê-lo lá, onde eu vi isso? Posso ver que tem o ID do menu. Então, este lado do menu, eu gostaria de colocar nossas chaves e eu gostaria que você fizesse algo chamado display e este aqui vai ser um bloco, não non. Acho que pode ser usado. Então eu não quero que o menu apareça no celular. Vamos tipo de olhar. Vá para pré-visualizar este aqui. Então desktop, tablet, celular e aquela pequena linha desliga-se e ele liga. Então, no celular, todo o trabalho acontece. menu do SlickNav desliga, bem, liga e o menu desliga. Fazendo-os alinhar, por isso é seguro. Então é isso para obter um tipo de básico real acontecendo agora, nós vamos sair e estilo porque ele está parecendo um pouco simples Jane, queremos fazer com que pareça com o nosso design móvel. Então vamos fazer isso no próximo vídeo. 6. Estilizando nosso menu de navegação responsivo: Oi lá. Neste vídeo, vamos olhar para o estilo do nosso menu de blogueiros ao longo do topo aqui porque no momento ele está um pouco parecido com isso. Precisamos fazer com que pareça assim. Há algumas fontes para fazer, há algum estilo com o menu do blogueiro, há algum texto para adicionar e remover, e torná-lo bonito. Vamos fazer isso agora no Dreamweaver. Primeiro, temos que arrumar um pouco. Acabamos de juntar isso, o que tem sido ótimo, mas precisamos adicionar alguma estrutura central. Temos nossa etiqueta corporal, ótimo, e dentro disso temos nosso menu e isso está acima dela. Há algum JavaScript escondido no fundo. O que eu gostaria de fazer é que nós precisamos colocar em um framework e para começar, é essa coisa chamada de cabeçalho, então eu escolhi cabeçalho, fechei-o fora, eu vou abrir os colchetes angulares e colocar a barra dentro, e você vê-lo automaticamente preenchido que fora, ótimo, então esse é o meu cabeçalho e tudo para o seu título vai entrar lá. Se eu olhar para a minha zombada, esta coisa aqui. Este pedaço aqui vai ser considerado o meu cabeçalho. Eu acho que logo e navegação, isso é praticamente tudo o que vai lá em cima, e talvez o número de telefone. Essa vai ser a minha cabeça, então lá dentro está esse cara. É uma das minhas navegações, então ele vai para dentro do cabeçalho. Isto é muito bom. Isso é muito comum fazer isso. Existem algumas vantagens, mas é principalmente apenas muito bom HTML5. Sintaxe, atravessou. Ótimo, então temos um cabeçalho, então tudo o resto no meio do seu conteúdo principal é chamado de principal. Fechá-lo, colchetes angulares, e barra frontal e isso vai ser tudo o que está neste site, isto é, vai ser praticamente todo o site, então vai ser esta caixa de herói aqui e estes seis. Agora, nós não tínhamos um rodapé e este design, puramente apenas para acelerar este tutorial, mas você teria um rodapé aqui também. Tudo iria em rodapé e muitas vezes que é a estrutura básica para grande parte dos sites. Nós não vamos ter um rodapé, então vamos deixá-lo fora. Nós vamos trabalhar neste cabeçalho e no meu design lá, há um logo primeiro, então precisamos colocar isso dentro É antes da minha lista ou do nosso menu, então vou colocá-lo acima dela. Eu coloco muitos retornos, algumas pessoas fazem, outras não. Vou colocar uma imagem. Agora, uma tag de imagem é bastante longa para digitar, então a imagem e você tem que colocar SRC e há muitas coisas que entram nela, então vamos usar nossos atalhos sorrateiros do Dreamweaver. Basta digitar IMG e clicar em “Tab”. Ei, presto. Agora vamos começar a digitar IMG para nossa pasta de imagens, hey presto, bom trabalho no Dreamweaver, clique em “Enter”, e não há nada lá porque temos uma pasta vazia. O que vamos fazer é; vamos clicar em “Procurar” e vamos encontrar os arquivos que você baixou, os arquivos de exercícios, se você não tiver , confira, há um link em algum lugar aqui. No meu arquivo de exercícios eu tenho uma pasta de imagens e nesta pasta de imagens eu tenho que ser o logotipo do nosso laptop. Clique em “Abrir”. Legal. Vamos clicar em “Salvar”. A última coisa que fazemos quando adicionamos qualquer imagem é que precisamos adicionar este texto alternativo ou texto alternativo. É apenas o texto que aparece se a imagem não carregar. Ele é usado para muitas coisas, leitores de tela, e também, Google usa para identificar o que está na página, por isso é realmente importante adicionar texto alt. Este é o logotipo do seu próprio laptop. Onde é que está? Vamos dar uma olhada na nossa prévia. Agora está lá, bom, apenas sentado no canto. Isso é ótimo. Temos a nossa imagem lá dentro. Vamos agora passar para o estilo deste menu. Primeiro, vamos fazer com que seja o botão três, então eu vou me livrar daquele cara. Minhas coisas diferentes aqui serão; portfólio, haverá sobre mim e entre em contato comigo. Ótimo, trocando. Legal, perfeito. A próxima coisa que vamos fazer é fazê-lo flutuar para a direita porque no momento em que ele está sentado aqui embaixo, precisamos colocá-lo sobre este lado direito. Isso é muito fácil, vamos para o nosso CSS e já fizemos isso antes. Lembra do nosso cardápio? Vemo-lo no fundo. Lembre-se, este menu é aquelas linhas azuis no momento, então nós vamos dizer aqui em cima na minha área de trabalho, eu vou colocar em muitos retornos, eu amo meus retornos apenas para manter tudo separado, e eu vou dizer aqui em cima , “Menu raiz, eu gostaria que você, chaves, flutuasse, e eu gostaria que você flutuasse para a direita, por favor.” Lembre-se, ponto-e-vírgula, “Salvar”. Vamos dar uma olhada. Bingo. Em seguida, eu quero que ele empilhe lado a lado. Se você olhar para a versão final, eu quero que ela se empilhe ao lado do outro em vez do padrão por baixo, então vamos lá e fazer isso. Para fazer isso, o que precisamos fazer é dar uma olhada no nosso código-fonte aqui, nós temos esses itens da lista. Uma UL é uma lista não ordenada, que é uma lista de pontos de bala, e aqui estão os aliados nessa lista, então esta é a lista geral e estes são os diferentes atributos nesta lista, então pontos de bala diferentes, então isso é os itens da lista. O que eu preciso fazer neste caso é que eu preciso dizer, nós vamos fazer o que é chamado de um seletor composto. Nós vamos dizer, “Eu quero encontrar uma lista de itens.” Os aliados estão dentro dos menus. Eu quero esses caras, se eles estão dentro deste menu aqui. Eu gostaria que você fizesse essa coisa chamada display, e nós usamos bloco e nenhum antes, nós vamos usar este chamado inline-block. Lembre-se, o bloqueio é aqui em cima e inline significa que eles entram em uma bela linha lá. Ei, ei, incrível. Legal. A próxima coisa que eu quero fazer é que eu gostaria estilizá-los porque eles estão parecendo um pouco tristes, com os sublinhados azuis e coisas assim. Vamos fazer isso. Para fazer esta parte, o que precisamos fazer é ser um pouco mais específicos. Precisamos fazer o estilo dessas tags, que são meus hiperlinks, que estão dentro das listas, que estão dentro do meu menu. Vamos fazer isso. Outro seletor composto. Menus, então aqui vamos nós. Estas etiquetas estão dentro das listas, acaso estão dentro deste menu. Eu gostaria que você, um aparelho encaracolado, fizesse algumas coisas. O primeiro é a decoração de texto.” Vamos nos livrar disso. Decoração de texto é o sublinhado. Nós não vamos para nenhum. Você pode ver, você pode adicionar linhas através e overline e sublinhado, então vamos para nenhum, ponto-e-vírgula, pressione “Salvar”, vá verificar. Ei, os sublinhados se foram. - Legal. A próxima coisa é, vamos mudar a cor. Vamos ter convosco. Eu gostaria de dizer, você, e se você digitar cor apenas por si só isso significa a cor da fonte. Você pode usar seu seletor de cores, mas eu vou digitar 4e4e4e. Apenas um cinza escuro. Lembre-se no final, certifique-se de que há um ponto-e-vírgula, “Salvar”. Vamos dar uma olhada. Ótima. O que eu poderia fazer só para tornar as coisas um pouco mais fáceis enquanto estamos estilizando? Sim, só para poder ver os dois. Ótima. A próxima coisa que eu preciso fazer é dar-lhes algum preenchimento, então eu vou para o preenchimento, e se eu for preencher oito pixels, você vê se você deixar oito você pode ver que ele vai fazer a parte superior, direita, inferior e esquerda todo o caminho em torno dele, que é Ótimo para mim. É o que eu quero. O que eu quero fazer é ir e mudar as fontes. Agora, eu definitivamente poderia ir e mudar esta fonte. Eu poderia digitar família de fontes e ir e fazer isso aqui, e escolher um. Você pode ver que mudou no fundo lá. Mas eu vou ter que fazer isso, dizer que eu quero escolher uma fonte para o meu site e vamos dizer que é Arial ou Times New Roman ou algo assim, eu vou ter que reiterar isso toda vez que eu colocar um texto. O que vamos fazer é fazer algo sorrateiro, é dizer “para global” sobre desktop. Eu coloquei no topo aqui porque é uma grande coisa geral. Vamos usar essa coisa chamada etiqueta de corpo. Agora, se olharmos para o nosso CSS HTML, corpo é tudo na página, então o que vamos dizer é todas as fontes que estão dentro desta tag body, eu quero que você seja essa fonte e isso significa tudo. Este A-tag, qualquer cabeçalho que coloquemos, vai tudo vir junto para o passeio. Podemos substituí-la mais tarde, mas eu quero dizer “Corpo, eu gostaria que você tivesse uma família de fontes, e eu usarei no momento em Gotham, Helvetica, Arial, Sans-Serif.” Falaremos sobre fontes um pouco mais tarde porque essas fontes básicas não são muito legais. Queremos usar nossas próprias fontes, mas vamos guardar isso para o vídeo depois deste. Font-family, vamos usar isso, e há minhas fontes pequenas no fundo. Ótima. Você pode ver aqui que é muito mais fácil do que tentar escrevê-lo toda vez que colocamos em qualquer texto e vamos apenas ignorá-lo para o global geral. Podemos fazer aqui agora, bem como com o tamanho da fonte. Tamanho da fonte, vamos fazê-lo, e eu estou puxando esses tamanhos do Photoshop. Tenho a minha maquete e estou a entrar e a verificar, por isso vou fazer 18 píxeis. Ótimo, é um pouco maior. Lindo, diga “Salve”. Vamos dar uma olhada. A próxima coisa que eu poderia fazer é que não precisa haver um pouco de preenchimento em torno deste cabeçalho ou esta tag cabeçalho. Eu poderia colocar isso um pouco mais e a imagem fora separadamente, mas porque eles estão todos dentro disso, vamos dar uma olhada, eles estão dentro dessa coisa chamada cabeçalho. Eu posso apenas adicionar um pouco de código e um CSS para este cabeçalho apenas para preenchê-lo para fora para que tudo dentro dele obter algum preenchimento. O que eu vou fazer aqui é, no fundo aqui, eu vou dizer, “Cabeçalho e chaves encaracoladas”, e eu vou dizer, “Eu gostaria de um pouco de preenchimento, por favor.” Então fazemos preenchimento, topo, e talvez o topo seja 10 pixels. Eu digo que talvez, eu já escolhi isso. Já se passaram séculos e decidem o quão grande e pequeno, então você passará um pouco mais de tempo aqui voltando para a doca do Photoshop e decidindo o que parece bom. Eu tenho estofamento, superior esquerdo 20 pixels. Agora, estou fazendo o caminho mais longo, eu sei. Vamos ver isto. Estamos fazendo assim, 20 pixels. Ótima. O que você vai descobrir é que muitas pessoas fazem isso. Fizemos de cima, de baixo, de esquerda e de direita e é ótimo quando você está aprendendo porque é agradável e fácil. Mas veja isso, vamos ser espertos. Se fizermos o preenchimento, e ele assume o topo primeiro, então se eu colocar 10 pixels e colocar um espaço dentro, você pode ver o pequeno interferir? Ele vai ao redor no sentido horário, então o próximo é o direito e todo o resto é 20, então 20, 20, 20. Está fazendo exatamente a mesma coisa, ponto e vírgula no final. Ele só vai em cima, direita, baixo, esquerda. Vamos dar uma olhada. Sim, tem um pouco de estofamento em torno dele agora. Adorável. A próxima coisa é que precisamos consertar nossa visão do tablet, então veja isso. Chegamos ao tablet e ele fica todo empilhado lá, então o que eu fiz na maquete, lembre-se, é que eu tenho que fazer isso e então ele se resume àquela linda empilhada em cima, então vamos fazer isso. O que eu quero fazer é quando você começa a tablet meu amigo, eu gostaria que você para selecionar o menu. Fizemo-lo aqui em cima. Fomos inline-block, que os empilha ao lado do outro. O que estamos fazendo é voltar ao que era. Eu vou usar você, venha aqui. É só aquele que diz “bloquear”. Salve isso. Vamos verificar no navegador. Você, e boom. Ótima. Poderíamos adicionar um pouco de preenchimento por baixo, mas como ainda não temos a nossa fonte perfeita, ainda não vamos fazer isso. Faremos isso um pouco mais tarde. Legal. Uma das coisas que eu queria fazer é que eu queria que ele se alinhasse direito. Vou enviar SMS, alinhar, e quero que esteja certo. Quando ele descer tablet, vamos verificar, ele está alinhando com o lado direito. Agora, a grande coisa a mudar é um menu grande, porque ele está aqui em baixo e hey, eu estou juntado em cinza e eu tenho este menu de palavras você, mesmo que eu sinto que todos sabem que essa é a palavra para menu, mas eu amo isso é Deixou as coisas aqui, se você precisar, é fácil de tirar, é mais difícil de colocar. Vamos antes de tudo nos livrar do menu de palavras. Nós vamos usar isso apenas em três linhas aqui, então nós vamos fazer isso. Onde é que o menu de palavras? Demorou um pouco para encontrar também. Não está no HTML, não está, o CSS, não está no Slicknav.CSS é não está no júri, é neste aqui chamado jquery.slicknav.js, e há algumas coisas aqui. Você não vai mudar um monte de coisas aqui, há alguns valores que você pode brincar com, mas este é o rótulo que eu quero. Eu só vou deixar o meu, mas você pode ver que eu posso ajustar este se eu colocar meu nome, você vai ver que é este cara aqui. Vou me livrar disso e deixar toda a prisão. Ótimo, vamos voltar ao código-fonte, vamos verificar aqui. Ótimo, nada aqui, a seguir, e vamos nos livrar desse gigante gigante, uma caixa cinza. O que eu também vou fazer, é eu vou colocar isso aqui porque eu estou trabalhando no meu Byol aqui e eu posso encaixá-lo. Legal, eu posso fazer alguns ajustes, agora, esta grande caixa cinza aqui, como você sabe o que essas grandes caixas cinzentas são? Em nosso HTML, há apenas algumas coisas em nossos estilos e poucas coisas. Há um outro CSS chamado Slicknav e vai estar aqui. Estes são os estilos que Josh fez para começar todos estes bits, precisamos mudá-los. Eles estão todos aqui agora. Primeiro de tudo, só porque a forma como isso foi criado, ele não está realmente olhando tão bom como eu gosto e as coisas em abbed in, e não há espaço entre eles, um pequeno recurso agradável em sonho com, se você fizer um seleto todo o texto, e há uma opção aqui que diz Formatar Código Fonte. Clique nele e diz “Aplicar formatação de código-fonte ” e ele apenas arrumar as coisas, você pode ver? Torna um pouco mais fácil para mim descobrir onde estou, e tudo bem, você não tem que fazer isso, e eu tenho isso agora, quero descobrir o que é essa barra cinza, e o que você vai fazer como um web designer é você vai entrar, que usamos no Chrome para exibi-lo e visualizar o navegador, e o que você faz é clicar com o botão direito do mouse nele, há opções para a mesma coisa no Firefox e no Safari e no Edge Explorer, mas use o Chrome e mouse qualquer coisa e ir para Inspecionar, e o que eu vou fazer é você pode ver que está destacado e ele me disse que é este código div, tudo bem, clique nele novamente, diga Inspecionar, esta é a grade div.slicknav_menu, e está me dizendo algumas coisas, e o que eu estou procurando é, é um pouco difícil porque estamos no tamanho pequeno. Fica um pouco maior se você quiser arrastá-lo para lá. Mas você pode ver aqui e você pode ver que há cor de fundo? Se eu virar isso, eu realmente tenho que ir para baixo de novo, sim, é esse cara aqui. Ele é, essa cor de fundo e que há slicknav.css, e está me dizendo que é uma linha na linha 64 do CSS está controlando isso. Se eu entrar aqui e ir para Slicknav e descer para a fila, é 64? Eu posso estar mentindo, não 64, desculpe 94, e fazer este aqui e diz 94 startmenu, e você pode ver que há a cor cinza, adorável. Você usa e gastou um pouco você gosta que diabos é isso? O que o controla? Você pode olhar aqui e ele diz o que forro o CSS ele faz. Eu vou pegar essa linha inteira e apenas girar, estava funcionando, a barra de caixas cinza, a cor desapareceu, mas ele ainda está empurrando este logotipo para baixo I você deslizar lá em cima. O que podemos fazer é este menu aqui é dizer flutuar para a direita, por favor, soletrar direito? Você pode ver quando ele vira para a direita, abre um espaço para esse cara deslizar, ótimo, isso é seguro entrar lá. Em seguida vamos mudar isso para as cores estão aqui nós temos este adorável, onde está? Redbox, e você notará que não há cantos arredondados e não há cantos arredondados nas linhas. Eu sei que é realmente um detalhe de menu, mas eu não estou no material arredondado. Ninguém não é o momento, é tudo sobre bordas quadradas. Vamos para isso, em seguida, fechar Inspect, e vamos voltar para o nosso CSS. Não vou continuar tentando usar o Inspect para descobrir quais classes estão sendo usadas. Eu já fiz isso, você pode mexer com ele. Eu sei que é algo por aqui, é que eu combinar aqui é, esta coisa aqui chamada botão slicknav, e tem essa coisa chamada border-raio. Eu não preciso de todos os raios de fronteira, adeus, Poupe isso, você vê, Ei, se foi. Há tomar sombra que foi para talvez nós tivemos o menu de palavras você não precisa estar lá, decoração de carrapatos é o subjacente, nós não precisamos disso também, esta cor de fundo eu quero mudar o um para o meu arquivo flash, agora é bom e ler, “Salvar”. A última coisa que eu quero fazer é se livrar do meu, é difícil dizer que essas pequenas linhas brancas têm cantos arredondados na borda. É por isso que gosto tanto deles, e é essa coisa aqui. Todos vocês aqui, então slick.nav.slicknav_icon-bar, se você fez isso está na linha 43. Houve um let não precisa de nenhum de vocês cara adorável, aperte “Salvar”, e olhar bonito botões quadrados, ótimo. A última coisa que preciso fazer é estar funcionando. Mas meu cardápio aqui é, eu me livrei da cor de fundo, mas você pode ver esses caras copiando o mesmo quando eles estão caindo, porque eu removi essa cor de fundo. O que precisamos fazer é eu preciso parar esses botões um pouco melhor, vamos e fazer isso, e eu encontrei um amiguinho é a linha 1, 3, 4, slicknav_nav a, e neste aqui, não há cor de fundo, então colorir significa que nós estilo a fonte, e é uma fonte branca em um fundo branco sem cor de fundo. Precisamos adicionar uma cor de fundo, cor de fundo, aqui vamos nós e eu tenho uma cor que eu quero usar F1474c adorável ponto e vírgula, vamos Salvar, e agora, indo aqui poderia obter hey, você tem uma cor de fundo. Agora, o que eu realmente quero fazer é torta com o preenchimento, a fonte e o pairar, mas nós não vamos nos preocupar com isso, que você pode passar algum tempo, você apenas ir para a mesma classe, brincar por aí, mas você ver o estofamento aqui e aumentá-lo e nós queremos fazê-lo, mas eu vou economizar algum tempo em algum lugar. A única coisa que você quer fazer é que você pode girar, ele apenas brincando com um pairar, mas não guarde porque imagine que você está em um telefone, há nenhuma maneira de pairar, ninguém nunca vê esses pairar, Não se incomode a pairar, você não pode se quiser, e vamos fechá-lo novamente. Adorável dizer Salvar, e que meus amigos é como fazemos um menu responsivo. Versão grande, em um desktop, mas quando ele fica menor para tablet, fechar e linhas brilhantes e pilhas em cima do outro. Eu sei que as fontes não exigem um ainda, e então ele fica para baixo para desktop, Sinto muito móvel, e é apenas o grande menu. Agora, estes são provavelmente muito pequenos, em seguida, o seu preenchimento, você tem que ter certeza de que uma das coisas a fazer apenas quando você está fazendo coisas móveis é que especialmente o Google. Google vai verificar o seu site para ver se esses botões são clicáveis, eles têm métodos de ver se esses pontos de contato podem realmente ser tocados depois de muito pequeno, como meu pai com dedos gigantes, e você bate como quatro deles ao mesmo tempo. Você tem que ter certeza de que há preenchimento suficiente, todos os botões são grandes o suficiente para que as pessoas possam claramente atingi-los, como parte de algumas das coisas de classificação que o Google faz, mas um bom trabalho. Nós o elegemos, você pode estilizá-lo como quiser. Você pode adicionar e remover, e cores e fontes e coisas de estilo, mas algum bom trabalho homem, nós usamos slicknav de outra pessoa Lovely Josh para fazer um monte de trabalho duro. É principalmente apenas o JavaScript, e sim, nós passamos e tornamos nossa própria equipe de cinco pessoas. Em seguida, o que vamos fazer é olhar para levar a sério nossa pré-visualização em tempo real e prevalecer em um telefone celular porque é um pouco difícil, fazer essa coisa de slide aqui. Vamos fazer isso no próximo vídeo. 7. Pré-visualização em tempo real em dispositivos móveis: Ei, bem-vindo de volta, e até agora o que temos feito é que temos vivido com toda a alternância entre o Dreamweaver, volta ao navegador e deslizando coisas em torno do celular, e este funciona bem para celular, mas não é um telemóvel. Não é do mesmo tamanho. É mais longo do que deveria ser. Então, o que você precisa fazer é realmente visualizar em seus dispositivos reais, e é muito fácil com o Dreamweaver. Dreamweaver tem alguns truques sorrateiros para fazer isso. Então, quando eu estou trabalhando, é assim que eu normalmente trabalho, é que eu tenho duas telas. Eu obviamente não posso para este tutorial porque você só pode ver um deles. Mas o que vou fazer é ter isto sentado como uma secretária aqui em cima. Eu tenho uma grande tela de Mac aqui, e então eu tenho Dreamweaver nesta tela e isso significa que quando eu estou editando isso, isso se ajusta. Vemos que acontece ao mesmo tempo. Então, se eu fizer alterações, elas aparecem instantaneamente no navegador, o que é ótimo. Então isso dá-me a minha área de trabalho sempre lá, que eu não tenha que alternar para frente e para trás. Agora, para os dispositivos, digamos que seu tablet e seu celular, o que você pode fazer é, eu vou te mostrar aqui embaixo. Eu vou fazer isso em tela cheia. Veja esta coisa aqui em baixo, este pequeno leitor de código QR, código QR, e o que você precisa fazer é saltar para o seu telefone e usar o seu leitor de código QR. Então vamos, deixe-me pegar meu telefone agora. Então eu tenho meu leitor de código QR aqui. Vou abri-la aqui, no fundo do Dreamweaver. Eu estou indo para ir aqui, clique e obter meu leitor de código QR perto dele. Vou eliminar o ângulo da minha área de trabalho. Bom telefone de trabalho, salta para fora. Pode pedir-lhe o seu nome de utilizador e palavra-passe. Ele faz. Consegue ver enquanto estou digitando? Você pode totalmente. Então você sabe que começa com T. Mas eu vou cortar isso para que você não possa ver o resto. Olhe para nós. Temos no telefone. Legal e agradável, você só tira uma foto com leitor de código QR. Você tem que baixar um leitor de código QR, eles são livres da Apple Store ou do Android como o meu e então você apenas senta isso ao seu lado, e eu vou sentar lá e assistir isso, enquanto eu faço mudanças. Então vamos para o nosso styles.css, e o que podemos ver no celular? Não muito no momento. Então deixe-me decidir, o que podemos ver? Eu tenho uma imagem aqui então eu vou fazer o quê com essa imagem? Vou torná-lo menor. Então eu vou dar-lhe uma largura. Aqui, vou dar a esse cara uma largura de 100 pixels. Você pode ver que ele ficou menor. Se eu fizer 50 pixels, ele é pequeno. Você entendeu a idéia, 10 pixels. Então isso significa que enquanto você está trabalhando e você está tipo, digamos que você está fazendo algo na exibição de desktop, você realmente não percebe que isso afeta algo no tablet ou dispositivo móvel. Se você os tem em torno de você enquanto você está trabalhando, isso só significa que como você está fazendo mudanças você é como “Oh, não percebeu as ramificações disso”, provavelmente a melhor razão para tê-los acordado é que você vai impressionar o inferno fora de qualquer um andando passado. Se trabalhares em casa, os teus amigos ou a tua mulher vão olhar para ti e vais parecer que estás no Minority Report. Muitos dispositivos ao redor, e no trabalho você vai parecer um Coda hardcore com todas as coisas voando ao redor. Então, isso é visualização do navegador em tempo real, e você pode fazê-lo em seu dispositivo também. 8. Trabalhando com tipografia em um site: Bem-vindos de volta, amigos. Este, nós vamos olhar para fontes. Fontes são super importantes para nós designers. Mais cedo, nós só usamos Arial e os básicos. Então vamos dar uma olhada em fazer uma fonte adequada. Agora, você tem algumas opções para fazer isso e as duas grandes são o Typekit da Adobe ou o Google Fonts. Ambos são ótimos. Vou usar o Google Fonts agora. Por quê? Porque eles são mais rápidos e fáceis e [inaudíveis] Vá para o Google Fonts, então é fonts.google.com, escolha uma fonte que você gosta. No nosso caso, vamos usar o Open Sans. Por quê? É uma boa fonte. É a nova Arial. Você vai encontrar, se você abrir 100 sites, Eu aposto que 90 deles são Open Sans. Por quê? Porque tem pesos muito bons. Há muitos outros, Roboto eu uso muito, é a fonte do YouTube. Há muita coisa aqui e a coisa legal sobre eles é que eles são livres. Então dê uma olhada em volta, encontre aqueles que você gosta e diga que você está nas peças de design onde você está no Photoshop, você pode entrar e dizer, “Eu gosto de Open Sans.” Há uma opção de botão aqui que diz: selecione esta fonte. Existe uma opção de download? Clique na fonte, então você vai, você editou aqui para sua coleção. Então há esta opção aqui que diz download. Isso não vai fazer nada para o seu site, mas isso significa que você vai tê-los em sua máquina. Então, se você baixá-los para o seu PC ou Mac e você pode usá-los apenas em seus modelos do Photoshop e no InDesign e ilustrar que essas são fontes que você pode usar, adorável. Mas você usá-los em seu site, é um pouco diferente. Eles dizem-te o que fazer aqui em baixo. Você precisa fazer duas coisas, você precisa colocar isso na cabeça do seu documento. Ele diz o que fazer, colocar isso na sua cabeça e este é o estilo que usamos. Então pegue isso. Bem, na verdade, antes de o fazermos, eu quero personalizá-lo porque eu quero usar no meu design, eu usei luz, regular e ousado. O que você vai notar é o tempo de carregamento, quanto mais fontes você incluir, lenta a página é carregada e isso é realmente importante para classificações de pesquisa. Você quer que sua página carregue muito rapidamente. Mas não consigo evitar. Eu quero extra ousado, quero dizer moderado e é muito comum para mim ir devagar. Por quê? Porque eu quero todo o caminho alguém itálico e eu quero isso e eu quero aquilo. Então eu vou usar 300 luz, 400 regular, e 800 para extra negrito. Vamos voltar para Incorporar e o que vamos fazer é clicar sobre isso, copiar, entrar no Dreamweaver e agora código-fonte. Digamos que você coloque dentro da cabeça. Então saiba o nosso cabeçalho, a linguagem é muito importante. Esta é a nossa cabeça. Então, o nosso corpo, vou descer. Lembrem-se que o corpo é tudo na página, cabeça é a coisa de fundo. Isso é tudo que eu quero e diz para colocar em qualquer lugar aqui. Então aí está você em qualquer lugar. Ele só diz que vai ligar para o Google Fonts e vai procurar este tribunal de família fonte, Open Sans com estes três pesos. Não precisa voltar, diga que quer usar 600 mais tarde. Você pode apenas digitá-lo corretamente, mas apenas digitá-lo lá e você terá acesso a ele. Lembre-se que vai abrandar suas fontes. Então, isso é metade. Então ele está procurando por essa fonte, você precisa agora realmente usá-lo em seu CSS. Então vamos voltar para as fontes do Google. Então disse fazer isso, em seguida, ele disse usar esta família de fonte de Open Sans termina aqui, copiá-lo. O que vamos fazer é, fizemos isso mais cedo sob styles.css e dissemos no corpo, então tudo no corpo é essa família de fontes de Gotham. Todos esses, vamos fazer isso. Então, basta alterná-lo e ele apenas diz usar Open Sans em vez disso. Vamos salvá-lo, vamos dar uma olhada. Olha, é a minha adorável fonte. Você pode estar dizendo, “Não parece muito diferente.” Sim, não é muito diferente da Arial, mas é muito melhor. Sim, está sendo padrão no momento para 400. Eu poderia entrar e mudá-lo. Você pode ver aqui, vamos até, onde aquela coisa estava controlando isso? Ali está, ali. Está digitando o peso da fonte e eu poderia dizer, 800, salvar. Fiz uma sintaxe ruim lá dentro. Oh, isso parece bom, poupe, pule para fora. As coisas parecem quebradas, perdi minhas fontes, perdi tudo. Vou para o arquivo, salvar tudo. Há um pouco de sintaxe errado, eu quebrei e não consigo ver. Não, eu não fiz, apenas salve tudo. Às vezes, isso acontece no Dreamweaver, basta ir arquivo, salvar tudo e salvar todos esses arquivos separados com os quais você pode estar trabalhando. Ei, fonte gigantesca. Então eu vou desligar isso, voltar para o padrão 400, salvar. Bom trabalho, temos uma fonte. Você pode ter mais de uma fonte? Claro que pode, mas os tempos de carga são agravados. Então você está indo para o Google Fonts e você vai encontrar outro, você vai ter que colocá-lo novamente na cabeça e colocá-lo novamente em algum lugar. Você terá que usá-lo para o corpo ou talvez você queira usá-lo apenas para este menu. Então você pode usar muitas fontes, mas lembre-se, ele começa a ficar um pouco lento. Agora, por que estamos usando o Typekit? Só porque demora um pouco mais e você precisa de uma assinatura paga para fazê-lo. Você tem uma assinatura paga do Typekit porque tem nuvem de crédito, porque está usando o novo Dreamweaver. Então você pode totalmente usar isso, só preciso de alguns passos extras para me preparar. Existem fontes diferentes sobre eles, há muitas das mesmas fontes. Então vá e dê uma olhada no Typekit versus Google Fonts e encontre a fonte que funcionará para o seu design. 9. Criando nossa caixa de herói: Ei, bem-vindo de volta. Neste vídeo, vamos olhar para criar essas caixas no fundo aqui. Vamos começar com esta coisa aqui. Isso é geralmente chamado de caixa de herói, às vezes o jumbotron. A primeira coisa que precisamos fazer é adicionar um pouco de estrutura à nossa parte principal, algo chamado linhas e colunas. Agora, o que é uma linha e coluna? É a estrutura subjacente de praticamente todos os sites responsivos e precisamos dele, é muito fácil embora. Assim como o Excel, pense no Excel. Esta coisa aqui é uma linha, uma coluna. Esta coisa aqui é uma linha, três colunas. Isso é o que precisamos saber. O que vamos fazer, é saltar para o nosso Dreamweaver e colocar as linhas e colunas. Vamos saltar para o nosso código-fonte, e temos o nosso cabeçalho, lá está o lá, e depois há o nosso principal. Vamos colocar alguns retentores entre ele e algum espaçamento lá dentro. Eu estou indo para guia através, eo que eu quero fazer é colocar em algumas linhas. Vamos usar essa coisa chamada tag div. Agora, tags div são divisões de espaço. É uma maneira fácil de lembrar deles. O que precisamos fazer é criar uma tag div. Vamos criar algo chamado classe div, vamos dar um nome a isso e vamos chamar essa linha. Então vamos fechá-lo. Então vamos fechar esta tag div por colchetes angulares. Assim como fizemos para o nosso H1, nós o fechamos com os suportes angulares e, em seguida, a barra invertida. Eu tenho uma fila. Dentro dessa fila, eu gostaria de uma coluna. Eu vou, exatamente a mesma coisa de novo. Eu vou colocar em uma aula de div, ótimo, eu vou chamar este de col. Feche isso. Abra a barra invertida do bit final e ele termina fora, e essa vai ser a minha coluna dentro. Este é o primeiro. Vamos nos certificar de que fazemos os outros. Vou te mostrar algumas coisas legais agora. Em vez de ter que digitar div class iguais e tudo o que ordenado de coisas, é muito bom com Code ajuda lá para torná-lo mais fácil. Mas eles tornam ainda mais fácil usar essa coisa no código de fundo ima. Tudo o que faz é assistir isso, se eu colocar dentro, lembre-se de um ponto na frente do que significa que é algo chamado uma classe. Se é um hash na frente dele, aprendemos mais cedo, é uma identificação. Vamos fazer uma aula. Você acabou de colocar isso em e dizer em troca, retorno não faz nada, bater membro Tab de mais cedo, e olha, apenas adivinha porque é uma coisa tão comum. Ele sabe que se você colocá-lo em uma classe e uma guia, ele apenas assume que você quer uma tag div. Fila de classe Div, incrível, devolva isso e temos um, dois, três. Agora, neste caso, o que vamos fazer é só por causa do layout que eu quero fazer. Eu quero que este seja um, dois, três aqui, então há duas linhas de três colunas. Mas o que eu vou fazer é quando chegar até aqui, tablet, se eu tivesse duas filas separadas, isso significa que eu tenho uma, duas, três aqui e então eu teria um, dois, três, e isso parecia muito estranho. O que vamos fazer é, na verdade, colocarmos em apenas uma fileira. Vamos colocar seis colunas. Só significa que estes desmoronam bem. Significa que se eu chegar até aqui, todas as técnicas, cada uma delas fluem para a caixa porque são todas parte da mesma fila e flutuam um ao lado do outro. Você terá que experimentar seu projeto. Se você tem quatro e quatro, você poderia definitivamente ter duas linhas com quatro colunas que funcionariam. Mas tinha que brincar com ele. Eu sei quando você tem esses múltiplos de três e você quer que ele faça isso. Caso contrário, esse cara está em uma fila separada e é empurrado para baixo e você tem essa quebra de onda. Eles vão ser todos o mesmo cara, confie em mim. Quantas colunas eu quero? Quero dois ou três. Vai levar uma eternidade, não para sempre. Eu poderia ligar e copiar e colar, e ficar ainda mais claro. Eu vou apenas digitar em chamada e antes de eu bater Tab, eu vou bater n vezes, e eu vou colocar em seis, então os tempos são apenas os asteriscos. Agora aperte Tab. Ei, entra. Estes são os truques que fazem você ficar rápido quando você está trazendo isso do web designer. Vamos acertar salvar, então temos nossas linhas, temos uma linha com uma coluna. Tenho outra fila com seis colunas. Essa vai ser a minha pilha porque eu quero que este herói entre nesta aqui. Vamos fazer isso. Para criar um herói, o que vamos fazer é colocar um retorno aqui. Dentro desta coluna, vamos fazer outro co-herói, e vamos bater Tab, mas neste caso, assim como fizemos para fileira e col, este aqui, nós realmente vamos em grande estilo agora. No momento, estas são apenas a nossa estrutura geral que não queríamos instalá-las. Mas esse cara aqui, entramos em estilo. O que vamos fazer é ir para os nossos estilos CSS. Vamos fazer isso para o nosso aquecimento, bem global e mais latas. Vamos dizer “herói”. As aulas têm um período à frente. Você pode colchetes, e nós vamos fazer um par de coisas. Vamos fazer a imagem de fundo. Imagem de fundo. Sua URL quando você está lidando com imagens de fundo, e navegar. Agora este é um membro olhando para os meus arquivos que eu baixei. Para os arquivos de exercícios, você pode usar o seu próprio. Esse é o meu passado de herói. Essa coisa de fundo, eu tenho Photoshop e eu acabei de virar o seu [inaudível] para baixo para que pareça apagado. Estou colocando carrapatos no topo. Ótimo, pressione Salvar e lembre-se de fechá-lo no final, ponto-e-vírgula para terminá-lo. Vamos verificar no navegador. Nada acontece. Por quê? Porque ele está lá. Mas como ele não tem substância, há uma imagem de fundo. A imagem de fundo não a mantém aberta. O que precisamos fazer é dar um pouco de altura. Agora, é muito incomum dar altura, por quê? Porque queremos que o conteúdo dentro dele defina a altura. Quando você está trabalhando, muitas vezes adicionamos preenchimento de soma na parte superior e inferior apenas para fazer as coisas funcionarem. Estofamento, vai ser 52 pixels por zero pixels. Zero pixels para a direita e 72 para a parte inferior e 72 para a esquerda. Aperte Salvar, e vamos dar uma olhada nele. Você vai ver agora, ele só tem algum preenchimento de cima e de baixo e a esquerda, e eu deixei à direita apenas para zero, e é por isso que podemos ver a imagem agora. A imagem não está fazendo o que queríamos que fizesse. Se eu expandir isso, está se repetindo. Você pode ver a repetição lá dentro. Mas queremos que seja responsivo basicamente. O que vamos fazer é ir para ouvir e vamos usar essa coisa. Nós vamos usar fundo, e vai ser tamanho, e vamos usar este aqui como cobertura. A capa é muito útil, se eu apertar Salvar, confira. É o que se estende, se encaixa, veja isso. Fica menor, vai funcionar em todos os tamanhos. Não parece perfeito agora porque está tudo apertado, mas à medida que adicionamos conteúdo, ele vai ficar bonito. Muitas vezes, a capa de fundo é a que você deseja tornar o plano de fundo das caixas responsivo. Em seguida, vamos colocar um texto agora e estilizá-lo. Sim, tendo a ver com isso. O que vamos fazer é passar para o nosso código-fonte e dentro da caixa de heróis, eu coloquei 10. O primeiro colocar um texto lá é este ima, e depois designer digital. Obviamente, não vai mudar para o que você vai fazer. Vamos jogar junto para ter a idéia disso. Carrapatos normais do corpo, nós não aquecedores antes de mover H1 que são importantes e você só deve realmente ter um bater um H1 um por página. Todos os riscos que leva muitas vezes como uma tag p ou parágrafo. Só vamos usar uma etiqueta p. O que era isso? Foi a Ima. Vou fechar a etiqueta p com uma barra pré-preenchida, guarde-a. Vamos verificar no navegador, e olhar para o caminho certo. Há uma pequena IMA. Vamos instalar essa. Agora, eu poderia estilizar o p tag. O problema é se eu estilo uma tag p e eu vou usar isso e muitas páginas diferentes. Se eu fizer como se fosse a minha maquilha que é grande e ousada, todos me pegam grande e ousado. O que vamos fazer é fazer uma aula específica para esse cara. Tudo o que você faz aqui é que vamos criar uma classe, e vamos chamar essa classe, e vamos dar um nome a ela. Vou chamar meu submarino bater, entendido. Agora, eu vou para definir essa classe, submarino batendo tantos estilos. Vou para na minha vista de ambiente de trabalho. Vou entrar aqui. Agora, o que os caras investem antes de uma aula, é isso mesmo. Parada idiota ou um período, e eu vou estilizá-lo. Agora o que eu quero estilizá-lo como ele é. Primeiro de tudo eu quero a cor ea cor apenas comprar estilos a fonte. Agora, há muito poucos [inaudíveis] neste número que eu me lembro, e #fff é o quê? É o único que conheço. Font White, vai ser aquela cor grande e arrojada. Você vai, isso vai ser 800 pixels a menos. O que eu poderia fazer é mudar o tamanho da fonte e eu estou apenas puxando esses tamanhos de fonte da minha maquiagem do Photoshop. Você pode brincar, tentativa e erro. Eu sei que a margem na parte inferior aqui precisa ser jogada. Na verdade, podemos deixar isso para depois, para podermos ver todas as fontes. Vamos deixar isso fora, ótimo. Verificando o navegador. Ei, você tem uma fonte. Não é grande e ousado. Por que não? Pixels, não são pixels. Este é apenas o peso 800. Obrigado. Vamos colocar e por baixo, e é esse cara aqui, o designer digital. Vamos colocar isso e essa será a palavra mais importante. Este vai ser o meu H1 em vez de um p tag. Por quê? Você precisa de pelo menos um ódio por página para dizer ao Google nos mecanismos de busca sobre o que essas páginas se referem. Se eu tivesse o H1 como ima, Google viria dois nesta página e diria : “Seu site é tudo sobre essa coisa chamada ima. Mas eu quero que seja sobre designer digital. Vamos entrar aqui. Voltar ao meu código-fonte. Debaixo dele, vamos colocá-lo em H1. Vou fechá-lo. Como é que lhe vou chamar? É designer digital. Vou fechá-lo com os meus suportes angulares para a barra. Este é o meu H1. Eu vou usar uma aula porque por quê? Eu vou ter este H1 é, cada página vai usar o mesmo título. Vou usar o H1. Vamos empatar o H1 e o aparelho. Você vai notar que nós não colocamos um ponto na frente dele ou um haxixe. Há apenas algumas coisas que são pré-feitas como tags p, H1s, tags de imagem, eles não acertam tags. O pré-fabricado em HTML, não precisamos adicionar nada a eles. São as coisas que inventamos sozinhos. O material que nunca existiu antes na vida ou tem um período à frente ou um haxixe. O que vamos fazer é dar-lhe uma cor. Lembre-se, a única cor que conheço, tipo branco. Este vai ser o magro. Font white vai ser 300 dipole px, e vamos colocar em um tamanho de fonte. Este é um bom, grande saudável 52 pixels e salve-o. Vamos dar uma olhada no navegador. Há algumas coisas, há alguns padrões acontecendo, h1s têm por padrão apenas sair da caixa. Alguém decidiu há muitos dias que eles têm uma grande lacuna na frente deles e, p tag tem um pouco de espaço por baixo. Juntos, eles têm liderança gigante. Então vamos usar margens na parte inferior e menos elas. Vamos fazer isso. A subposição. O que vamos fazer. Você poderia fazer a margem do topo de h1, ou eu gosto de fazer este espaço fora depois, então nós vamos fazer h1. Vamos remarcar com o fundo. Você vai ter menos 54 pixels. Isto vai brincar com o nosso espaçamento. Lá vai você. Legal. Próximo bit será código-fonte, e temos o pixel de parágrafo por baixo. Agora eu vou colocá-lo aqui e eu vou colocar o meu p tag. Agora, eu quero colocar uma nova classe porque eu não quero usar a mesma aqui, então o que eu vou fazer é usar o meu truque. Eu estou no p. Se eu apertar Tab ele vai colocá-lo dentro Mas eu podia datilografar na aula P. Ser realmente inteligente Dreamweaver faz isso, lembre-se. da minha classe e eu vou chamar este um heading-corpo-cópia e bater Tab. Ele criou a minha tag p e adicionar a classe a ela com esta coisa aqui chamada cabeça-corpo-cópia. Vamos adicionar a tag p no texto do meu parágrafo. Vamos verificar em um navegador. Whoop. Faz isso às vezes. Às vezes, você precisa voltar ao Dreamweaver e clicar em “Salvar tudo”. De volta aqui que é [inaudível] ótimo. Agora precisamos aplicar alguns estilos a essa tag p. Vamos para os nossos estilos CSS. Aqui no meu global ou na minha área de trabalho, eu vou digitar a classe que era cabeçalho, cabeçalho. Não consigo me lembrar. Só adivinhando. Vamos ver se funciona. Na verdade, cor, lembre-se que a cor por si só é para a fonte. Lembre-se que fff é para branco. Na verdade, é sobre a nossa fonte. Vamos verificar, dar uma olhada. O que podemos fazer é brincar com isso porque o espaçamento depois disso não é ótimo. Agora, você percebe que eu não coloquei um tamanho de fonte. Se você deixar um tamanho de fonte sozinho, ele escolherá 16 pixels por padrão. É um tamanho muito comum. Tente não ficar muito pequeno. Essas são as penalidades do Google por ter fontes que são realmente difíceis de ler para pessoas com deficiência. De qualquer forma. O que vamos fazer é brincar com a margem para este. Vamos fazer margin-bottom menos cinco pixels. Vamos dar uma olhada. Sim, está a chegar ao que eu queria. É [inaudível] um pouco grande. Uma das coisas que você pode ver aqui é que, eu não coloquei nenhum estofamento no lado direito aqui. Por quê? Porque há algo que eu quero fazer. É um pouco complicado, mas não é tão difícil. É esse cara aqui que eu quero colocar uma margem direita nele. Uma margem para a direita. Vamos usar uma porcentagem em vez de um número fixo. Isso só significa que a porcentagem pode ser boa e grande quando está em um tamanho grande. Então, se usarmos um 20 por cento é bastante amplo quando é 20 por cento de uma tela tão ampla. Mas quando ele fica menor, ele começa progressivamente ficando menor como uma porcentagem também. Você poderia simplesmente usar real, eles chamam um tamanho absoluto quando você usa pixels, mas este aqui é um tamanho relativo. Estofamento certifique-se margin- direita e vai ser 20 por cento. Isso é relativo ao tamanho da caixa que está dentro. Ótimo. Vou colocar um estofamento aqui. Você vai notar que é bem grande aqui. Queremos chegar aos tamanhos menores. Ele fica progressivamente menor, então não está sendo muito destrutivo quando desce. Ótimo. São as fontes. Vamos dar uma olhada em adicionar nosso botão. É esse cara aqui. Este botão vamos falar. Você pode clicar nele e vai para talvez a nossa página de contato conosco. Vamos fazer isso. Agora, quando estamos colocando um botão, realmente o que está acontecendo é que vamos colocar algum texto, vamos colocar algum preenchimento em torno dele e preencher esse preenchimento com uma cor, e ele vai parecer um botão. Vamos fazer isso. No meu código-fonte. Nós vamos descer aqui e debaixo da minha etiqueta p aqui eu vou colocar um link. Agora, então eu quero que ele seja um link bem assim eu quero que ele seja clicável. Vamos começar com uma etiqueta. Agora nós olhamos um tags, mas nós não criamos um dos nossos próprios. Agora escrever uma etiqueta leva uma eternidade. É um href e então você coloca onde você quer que ele vá. É um processo bastante longo. Quando você está fazendo qualquer link, uma tag também é normalmente chamada apenas de hiperlinks. A, coloque-o em uma guia, e coloca o href e todo o lixo lá dentro. Nós vamos ser capazes de [inaudível] e nós vamos fazer um e adicionar uma classe a ele ao mesmo tempo. Vamos chamar este, vamos falar. Pressione Tab. Consegues ver todas aquelas coisas adoráveis feitas por nós? Temos um hiperlink que tem uma classe já aplicada a ela chamada “vamos falar e vamos colocar aqui, vamos falar. Salve isso. Agora precisamos ir e estilizar esse cara aqui, então pule em nosso CSS. Vamos colocar algumas rotinas e vamos fazer e vamos conversar, vamos conversar, chaves. Primeiro, vamos colocar em uma cor de fundo porque podemos começar a cor de fundo. Este é hash e é uma cor de fundo de f147 é o que eu usei a cor de pêssego vermelho. Vamos dar uma olhadinha. Está ali. Dá para ver para onde vamos a partir daqui. Precisamos de um pouco de enchimento. Vamos fazer isso. Vamos fazer preenchimento e eu vou para oito pixels. Você vê aqui que é padrão para oito ao redor. Em cima, em baixo, à esquerda e à direita, se eu deixar assim. Se eu colocá-lo em um segundo, que vai ser, o que é, 30 pixels. Você pode ver que ele é feito em cima e baixo em oito pixels, mas esquerda e direita em 30? CSS inteligente. Você pode preenchê-los todos. Mas somos sorrateiros em fazer exatamente o que precisamos fazer. Ótimo. Temos um botão. É clicável. Não vai a lugar nenhum. Você pode ver aqui? Temos este href. Eu realmente não mencionei o link. O que você escreveria aqui, é que você escreveria talvez vá para a página de contato conosco, contact-us.html. Essa será a página. Ainda não temos essa página. Você clica nele e vem com um erro. Muitas vezes, quando você está trabalhando em vez de deixar um espaço em branco colocar isso em um sinal de libra ou uma chave de hash. Significa que funciona. Mas não há erros que vomitem. Porque se você está enviando para um cliente e eles estão testando e você está apenas dizendo, “Ei, dê uma olhada no site.” O olhar e sentir, mas não o real. Ainda não está totalmente construído. Se clicarem nele, voltarão para você e dirão. “ Ei, a ligação está quebrada e não está funcionando.” Então você apenas colocar em um hash apenas como um suporte de lugar e certifique-se de que você mudar isso mais tarde. Ótimo. A próxima coisa que queremos fazer de volta aos nossos estilos,. O que vamos fazer, vamos fazer com você. Decoração de texto. Esse é o sublinhado. Vamos nos livrar disso. Vamos colocar isso em nenhum. Vamos escolher uma fonte. Não é fonte, é apenas cor por si só, fff. É haxixe. Tenho que colocar essa sintaxe lá. Você pode colocar maiúsculas ou minúsculas. Cabe a você. Chegando lá. Tenho um botão. Precisa de um pouco de enchimento, talvez. Mas vamos deixar isso para o momento. O que esse olha aqui? Sim. Estamos chegando lá [inaudível] caixa. Olhando bem. Uma coisa que faremos antes de irmos é que está se estendendo para sempre. Tudo bem nos tamanhos do MacBook Pro. É grande o suficiente. Mas se você tem uma tela gigante como a minha outra aqui ou um iMac, tela realmente grande, isso vai se esticar e seu próprio menu vai estar todo o caminho até lá e o sinal do logotipo ali, e não vai ser ótimo. Vamos ter alguns limites em termos da largura das marcas. Quão grande queremos que ele fique. O que vamos fazer é saltar para o nosso Dreamweaver, e o que vamos dizer é que eu gostaria que ele não chegasse aqui. Há algo chamado largura máxima. Com o que você pode fazer isso? Você pode fazer isso ao nosso corpo, porque lembre-se que nosso corpo é tudo o que está na página. Eu quero dizer corpo que está em torno da página, eu gostaria que ele tivesse uma largura máxima por favor e não obter qualquer grande do que dizer 1024 pixels. Esse é o tamanho que eu tinha projetado no Photoshop, 1024 é um tamanho comum. Você tem que dizer 1024 não 1.024. Se disseres 1.024, vão saber que és novato e não sabes o que estás a fazer. Então, 1024. Ou ainda maior do que isso. Você pode fazer de qualquer tamanho. Vamos dar uma olhada. Quando está aqui embaixo, está se esticando e fazendo coisas legais. Mas então ele chega a um tamanho de tela, ele não fica maior. Veja o cólon de 1024 ou digamos 1200, é outro muito legal. Vou deixar um aqui. A uma das coisas, porém, você notou que por padrão ele deixou alinha. O que precisamos fazer é quando você está alinhando qualquer coisa, você precisa fazer algo chamado margin-left auto e margin-right auto, então eles chamam isso. Ele vai fazer as margens automáticas esquerda e direita e ele apenas fica no meio lá. Olhe para nós. Legal. Chega a um tamanho mais gerenciável, e você, meu amigo, começou a construir o conteúdo. Agora, muitas das outras coisas que vamos fazer é apenas repetição disso. Você vai ser um monte de tags div, mas recipiente, estilo, e você vai ter um pequeno site bonito. Vamos fazer nossas caixas que estão aqui embaixo no próximo vídeo. 10. Adicionando nossa diagrama de imagens: Está bem. Neste vídeo, o que vamos fazer é, vamos adicionar essas grades no fundo aqui. Vamos fazer isso, vamos voltar para Dreamweaver. Eles vão entrar nestas colunas aqui. O que vamos fazer é dentro desta coluna, vamos colocar um “Img”, como fizemos antes e depois clicar em “Tab”, e então vamos clicar em “Imagens”, ir para a pasta “Imagens”. Agora ainda não os temos na pasta, então vamos clicar em “Procurar”. Vamos ao meu “Desktop”, encontrar os arquivos de exercícios baixados e “Imagens”. Aqui vamos nós “Miniatura 1". - Legal. Certifique-se sempre que você colocar uma imagem e colocar os ticks “Alt” lembre-se, é para deficientes visuais, é para pessoas que usam leitores de tela e também para o Google. Não me lembro o que é essa imagem, “Imagem do amor”, eles são excitantes. O que queremos fazer é, vamos verificar no navegador. Verifique a direita. Lá está ele ali. Eu fiz o meu um pouco maior. Por quê? Porque eu acabei de ouvir que eles podem redimensionar quando eles chegam para baixo, você pode ver quando eles chegam para baixo para celular ele realmente fica bem grande? Quando você estiver estilizando esses, certifique-se de usar, porque nós vamos usar a mesma imagem em todos os três tamanhos e apenas torná-la responsiva. Então, apenas certifique-se de que sua imagem é grande o suficiente, para o tamanho que ela vai ser. Em seguida, o que podemos fazer é apenas duplicar essa. Vamos apagar todos esses caras. Tenha o meu cursor, você pode copiar e colá-lo, que funciona. Mas um atalho legal é, colocar o cursor em qualquer lugar aqui vá “Command D” ou se você estiver em um PC, vá “Control D”. Basta ir “Controle D, D, D, D”. Temos todos os nossos pequeninos. O que precisamos fazer é trocar isso. Agora, eu não posso simplesmente ir e mudar o texto aqui. Por quê? Porque se lembra quando estávamos aqui, estávamos em “Procurar” e copiamos para a minha pasta? Preciso ir e movê-los. Vamos checar isso. Em algum lugar apenas superior há, este é o site. Há as imagens, e o cara que foi copiado. Esta é a minha pasta de arquivos de exercícios. Deixe-me pegar todos esses caras. Venham aqui rapazes, oops, não consigo ver vocês. Odeio isso sobre um Mac. Eles estão lá em algum lugar. Preciso ir para a pasta “Imagens”. Entra ali. Ótima. Há todas as minhas imagens. Agora eu deveria ser capaz de entrar aqui, então aqui vai ser “miniatura”, na verdade, esta é a miniatura. Porque eu acabei de copiá-lo em segundo plano lá, eu poderia ter que, uma vez que ele não está aparecendo, então eu vou apertar “Salvar” e há uma atualização, é [inaudível] em um Mac e um PC. [ inaudível]. Chegando lá, estamos chegando lá. Agora, uma coisa que você precisa fazer é, eu estou apenas copiando isso, apenas colocando-os lá dentro. Você deve mudar o texto antigo para tudo isso, é realmente importante. Importante o suficiente para que eu não vou fazer isso agora, porque eu estou apenas fazendo um tutorial. Não é o meu site de verdade. Tenho todos vocês, vamos checá-los no navegador. Eles estão todos dentro Por padrão, eles serão empilhados um em cima do outro. O que precisamos fazer é fazê-los entrar em colapso um ao lado do outro, para que se acumulem. Nós vamos fazer isso. Vamos ao Dreamweaver e fazer isso agora. Certo, então, para fazer isso, temos uma coluna de classe ilegal. Mas vamos apenas dizer, se virarmos todos esses cols para a esquerda, e eles se enfiarão um no outro. Fizemos flutuadores mais cedo e flutuamos o membro de navegação para a direita, ele flutua por aqui. Se você flutuar para a esquerda, eles vão continuar empilhando um ao lado do outro, porque por padrão, eles empilham um abaixo do outro na linha. Vamos entrar na web styles.css em algum lugar no topo aqui. Não importa para onde vai. Gosto de colocar essas coisas grandes no topo. Lembra-te que isto é uma aula, por isso esqueci-me de pôr o ponto, de desligar o aparelho, vamos flutuar, e vamos à esquerda na tua imagem, olha. Ok, então eles flutuam. Não há espaço suficiente para todos entrarem lá, mas eles ficam quase lá. Então o que vamos fazer agora é criar outra classe, vamos dividir isso em três partes. Vamos fazer isso. Agora, esta parte que vamos fazer agora é trabalhar com algo chamado grade, que é o termo bruto de lidar com esse posicionamento onde nós levá-los a empilhar de uma maneira no desktop, e outra maneira no tablet, e então novamente no celular. Estamos lidando com essa coisa chamada grade. O que vamos fazer para fazer essa coisa funcionar é, vamos criar uma classe e vamos chamar essa de “col-lg”, grande. É realmente típico chamar desktop grande, tablet médio, e você tem pequeno, e então você pode ter extra pequeno também. Vamos usar esse cara. O que vamos dizer, vai ser muito fácil. Vamos dizer que você tem uma largura de, agora podemos fazer 33,3 por cento e economizar. Acho que vai funcionar. Nós criamos, mas não aplicamos. Nós criamos essa coisa, agora vá até aqui, e vamos aplicá-la a essa classe. Temos uma classe chamada “col”. Vamos aplicar a segunda classe. Você acabou de colocá-lo lá. Coloque-os um ao lado do outro. É assim que você aplica mais de uma classe. Você não tem que escrever classe novamente, você pode, mas você apenas colocá-los entre essas aspas com o espaço no meio. Ótima. Agora, eu quero fazer isso por todos eles. Há um truque legal que o Dreamweaver faz. Se eu clicar aqui e manter pressionada a tecla “Opção” em um Mac ou a tecla “Alt” em um PC, e clicar e arrastar, você pode ver que eu tenho um cursor, vários cursores? Lá se vai isso. Ei, eu amo isso, Col-G, ok, e vamos aplicá-los a todos. Ótima. Agora vamos checar. Está a funcionar. As colunas têm toda a largura certa. Mas essas imagens não estão sendo responsivas. Então, por padrão, essas imagens estão sendo seu tamanho exato, as colunas são as larguras certas, mas a imagem é quadrada sobre as bordas. Vamos corrigir as imagens para que elas sejam 100 por cento. Para tornar nossas imagens responsivas, vamos para o nosso styles.css. Vou criar uma classe onde, contanto que esteja na batida global. Onde é que eu vou colocá-lo? Vou colocá-lo com as colunas que eu fiz. Vamos fazer outro seletor composto. Nós vamos dizer, “Imagens que estão dentro do meu col-lg.” Eu vou fazer isso, e nós vamos dizer, esses caras vão ter uma largura de 100 por cento. Ótima. O que precisamos apenas para tornar as coisas responsivas é que precisamos adicionar uma altura a ele, bem como colocá-lo automaticamente, e isso vai poupar alguns problemas mais tarde. Escolheu automaticamente a altura. A outra coisa que o torna útil é o bloco de exibição. Por quê? Só porque... Imagens responsivas fazem com que a largura 100 por cento faça sentido. Coloque a altura em exibição, no entanto, lá dentro. Vai fazer com que funcione. Vamos dar uma olhada no navegador, entrar lá. - Legal. Então as larguras estão certas. Sim, então as larguras são 33,3 por cento. Todos eles ficam ao lado do outro, e as imagens estão respondendo. O que precisamos fazer agora, porque você pode ver, como ver, 33 por cento é ótimo, porque ele se agita quando chega à mesa. A próxima coisa que quero fazer é, na verdade, meu Mockup tem preenchimento entre estes. Vamos adicionar um pouco de preenchimento a ele. Como eu fiz o preenchimento neste caso, em vez de usar este 33, não há espaço suficiente para acolchoamentos. Precisamos abaixar um pouco isso. Então eu tirei dois por cento de desconto no tamanho total. O que eu vou fazer é eu vou usá-lo para aqui e eu vou fazer um pouco de estofamento. Vamos colocar estofamento todo o caminho, e vamos fazer um por cento. Usamos essa percentagem por aqui. Sim, vamos dar uma olhada, há um por cento em torno dele. Ótima. Um por cento de cada lado, ok, esquerda, direita, cima e para baixo em torno destas colunas e o resto. Eu acho que só para deixar meu ponto aqui é que se você deixar em 33, não há espaço suficiente, então 33 mais 1 por cento no meio, empurra esse cara para fora. O que queremos fazer é ter certeza de que há espaço suficiente aqui. Quando você está fazendo o seu, o seu pode ser tamanho 4. Você vai usar 25 por cento se você tem quatro por aqui. Você vai jogar com diferentes porcentagens, o que funciona para você. Você vai ter que menos isso. O que quer que você tenha usado para preenchimento, menos fora do carimbo de largura e sim, fazer um pouco de jogar para frente e para trás. Ótima. Fizemos uma grade responsiva. Parece bom lá. No entanto, quando chegarmos ao tablet, o que eu gostaria que você fizesse é que eu queria mudar deste aqui. Esta é a nossa versão de trabalho. Quando ele for enviado tablet, eu quero mudar para essas duas colunas aqui. No momento em que o faz, fica assim. O que vamos fazer é criar outra classe. Vamos fazê-lo, mas em vez de colocá-lo na cabeça aqui, vamos criá-lo para que ele só seja acionado quando estamos na visualização tablet. Qualquer coisa nesta consulta de mídia só é ativado no momento e estamos no máximo dentro desta largura aqui. O que vamos fazer é criar uma nova classe chamada “Col-MD” para médio. Este aqui vai ser 25 por cento. Quando digo 25%, o que quero dizer é 50%. Mas vamos ter um pequeno problema. Por alguma razão eu apenas digitei 50 por si só, então vamos digitar a coisa toda. Isto vai ser uma largura de 50%. Mas porque temos esse estofamento aplicando, vamos dar uma olhada. Não está funcionando. Por que não está funcionando? É porque a criámos aqui, criámos esta col-midd, mas não a aplicámos a nada. Vou fingir que fiz isso de propósito, mas esqueci completamente. Vamos aqui, temos essa coisa chamada “Col-G”, mas também precisamos de um aqui chamado “Col-Medium”. Lembre-se do nosso truque, clique aqui, mantenha pressionada a opção para a tecla “Alt”, “Espaço” e vamos digitar “Col-MD”. Ok, então nós criamos, nós fizemos isso. Vamos verificar, e não funciona. Lembre-se de 50%, mas como temos enchimento lá, precisamos ser um pouco menores. Aqui é onde você pode entrar e brincar, eu sei que são 48 porque eu já fiz isso. Ótima. Então cabe lá dentro. O que é isto? Então, na área de trabalho, é de três lados. Quando chega até aqui, é de dois lados. Agora, o último que precisamos fazer é quando entrarmos em dispositivos móveis, eu gostaria que tivesse 100% de diâmetro. Vamos fazer isso agora. Vamos fazer duas coisas, nosso Mockup tem a visão móvel, todos eles têm 100% de diâmetro. Vamos deslizar aqui para baixo, vamos criar uma classe chamada “Col-small”. Este vai ser uma largura da nossa janela, vamos ter uma largura de 100 por cento. A sintaxe está ficando um pouco longe. Ok, vamos aplicá-lo. Aqui está o nosso truque legal. Ok, nós vamos ser “Col-small”. Ótima. Vamos checar o navegador, e ele vai ficar um pouco quebrado. Bem, não está quebrado, mas eu quero me livrar desse estofamento no meio. Meu Mockup tem todos eles se intrometendo um ao lado do outro. Então o que nós vamos fazer é, aqui, vamos para nossos estilos, e acima do topo aqui nós dissemos que col tem um preenchimento de um por cento. O que nós vamos fazer aqui é dizer, que a mesma classe, nós vamos dizer que você, Col tem um preenchimento de zero. Pixels ou por cento, não importa, 00. Ótima. Eles estão todos se intrometendo um ao lado do outro. Incrível. Olhe para nós. Você pode começar a ver que estamos fazendo coisas responsivas. Quando olhas para os CSEs de outra pessoa e olhas para isto pela primeira vez, dizes: “Uau, está bem. Isso é bem complicado.” Você entra aqui. Isso não é tão ruim, especialmente com as guias e todos os retornos. Tem muita coisa acontecendo aqui. Mas você pode começar a ver se você começa a perder essa coisa uma pequena classe de cada vez, na verdade, eu acho bem simples. Ótima. O que mais precisamos fazer? A última coisa que penso é apenas uma cor de fundo. Eu não sei. Não é grande coisa, eu acho. Vamos fazer isso com o corpo, vamos fazer a cor de fundo. Vamos “Cor de Fundo”. Eu só vou escolher um cinza claro porque era isso que estava no meu Mockup. “ D, d, d”, “Salvar”. Ok, então cor de fundo, você pode ver que é apenas um ligeiro cinza lá dentro. Legal. Tudo bem. Bem feito. Nós, eu e você, fizemos um site. A grande coisa é que esta navegação aqui, ela responde. Uma vez que aprendemos esse tipo de coisa responsiva sem consultas de mídia, na verdade tornou-se muito fácil fazer isso. Aqui está a vista do nosso tablet, até ao desktop, um lindo sanduíche de navegação, e temos nossas pequenas imagens em andamento. Bravo. Pequenas coisas que eu faria para retocar isso, você pode ver em hits móveis, o estofamento provavelmente é um pouco grande para este. Então o que você faz é encontrar a classe que faz sua caixa de herói. Ele está no topo aqui em algum lugar, há algo chamado herói. Você faz outra aula e você apenas muda o preenchimento e substitui e faz menor. Você vai e finesse todas essas coisas, talvez as fontes também. É um pouco porque quebra em duas linhas. Então você apenas obter o seu H1, fazer outro H1 aqui em baixo na visualização móvel e substituir o tamanho da fonte. Muitos desses pequenos ajustes é estranho. Eu acho que você como designer gráfico realmente brilha. Todas essas pequenas finalidades em termos de espaçamento depois e o espaço entre linhas, e todos os tamanhos de fonte e coisas. Legal. Tudo bem, sem mais brincadeira. Vamos para o próximo vídeo. 11. Publicando seu site na internet: Ótimo, então criamos um site, agora queremos colocá-lo online. Você precisa de um host e um nome de domínio. Você só compraria isso juntos, eu tenho um curso inteiro de compra de nomes de domínio e hospedagem. Ia fazer a versão rápida aqui para te ajudar. Faça login na sua conta. Vou usar o GoDaddy, é a maior e mais popular hospedagem do mundo. Se você tem algo mais, não é muito longe há pequenos quarks. O que vamos fazer é, eu vou entrar na minha conta. O que eu quero fazer é obter uma hospedagem na web. Nós já compramos nossa hospedagem na web e pagamos por um nome de domínio. Temos a hospedagem básica. Vou fundi-lo. Espere que ele carregue. Você está procurando por uma coisa chamada contas FTP. Portanto, protocolos de transferência de arquivos é assim que você carrega seu site para seus servidores de hospedagem. Você cria um, você coloca aqui, você vai chamar este teste. Você dá o seu nome, mas não importa. Não precisa ser um endereço de e-mail, parece que sim, mas não. Inventem qualquer coisa aqui. Dê-lhe uma senha, certifique-se de que é uma muito boa, não como a minha aqui, muito simples. Vou apagar esta conta só por precaução, logo depois disto. A grande coisa ao usar GoDaddy é que, você pode vê-lo, colocar em nosso nome de usuário aqui. Vai fazer uma subpasta, não o que eu quero. Ele precisa entrar em public_html. É tradicionalmente onde as coisas vão. Se você estiver usando outra pessoa hospedando, eles dirão que às vezes ele tem htdocs e alguns nomes e público. Quase sempre tem public_html, é como a raiz de tudo o que entra. Clique em Criar conta. A única coisa que precisamos saber agora é, bem, precisamos lembrar nosso nome de usuário e senha. Vamos entrar no Dreamweaver, abrir nosso Site e acessar Gerenciar sites. Aqui está o Portfólio do Dan. Fizemos isto bem no início. Esse é o que nós e aqui lembramos que fizemos a pasta local em nosso disco rígido e dissemos para onde as imagens foram. Agora, o que nós vamos fazer é ir a este chamado Servidores e, em seguida, aperte “Plus” e, em seguida, aqui, vamos chamá-lo de GoDaddy. Não importa o que você chama, aqui endereço FTP. Se você não estiver usando GoDaddy isso pode ser diferente, bringyourownlaptop.com. Às vezes, ele não precisa do FTP para alguns hosts, neste caso ele precisa. O nome de usuário estava testando @bringyourownlaptop. Novamente às vezes, alguns hospedagem só precisam do nome de usuário, eles não precisam de todo esse lixo. Senha, coloque isso. Agora você vai apertar “Teste” e você vai cruzar os dedos. Conectado com sucesso. Agora isso funciona para mim, porque eu sei o que estou fazendo. Hospedagem é, de longe, a parte mais difícil de se configurar. Não tenha medo se ainda não estiver funcionando você o testou, você já tentou sem o FTP, sem este nome de usuário. Outras coisas que você pode tentar é não bater no diretório raiz, às vezes você precisa colocar em um public_html\. Aqui, às vezes, em Mais opções, você precisa desativar o FTP passivo. Há algumas pequenas coisas que você pode brincar com, mas meu conselho é, mas meu conselho é, não se estresse muito ou muito tempo basta enviar e-mail para a empresa de hospedagem, enviar-lhes a captura de tela deste aqui e dizer que estes são os detalhes que eu preciso, o que É isso? Depois, eles te enviarão os detalhes e você os coloca. Agora o que você faz é clicar em “Salvar” e clicar em “Concluído”. Ótima. Clique em “OK”. Ótima. Agora o que você faz é, você vai até o Site, então ele está conectado agora, mas nada realmente aconteceu. Você tem essa coisa chamada Local, e você tem esse outro agora chamado Remoto. Isso é o que queremos, Local está em nossa máquina, Remote é GoDaddy, é o serviço de hospedagem. Vamos ao Site e temos que colocar e você aperta “Put”. Vai passar e se conectar. Em seguida, ele vai perguntar, você gostaria de colocar as pastas dependentes e você clicar em “Sim”. Ele vai colocar o html para cima, mas então ele precisa colocar o CSS para cima, este outro CSS e JavaScript. Ele passa e coloca todas as imagens. Vou apertar “Cancelar” neste caso. Por quê? Porque no momento eu iria enviar este estranho, não estranho, mas este portfólio sobre o topo do meu ciclo web bringyourownlaptop.com. Eu não quero fazer isso, mas o que você faz é, que ele percorra então você iria para bringyourownlaptop.com ou seu URL e seu portfólio deve estar lá. Se não acontecer, me dê uma linha nos comentários e eu te dou uma mão. Definitivamente conectar o servidor é a parte mais difícil para qualquer um, porque mesmo assim é difícil para mim. Eu não quero obter um novo host ou alguém usando o novo host de um cliente e eu tenho que trabalhar fora todas as configurações diferentes. É assim que se conecta um site usando GoDaddy. Isso é tudo para este vídeo. 12. Últimas considerações agora que você é um programador: Tudo bem, então para encerrar, a última coisa que você precisa fazer, eu acho que para completar um site é criar outras páginas. Deixe-me apenas rapidamente, brevemente entrar nele, porque é literalmente que nós apenas criaríamos outra página como fizemos esta. Digamos que vamos começar com a base da nossa página inicial. Há o nosso índice para o nosso HTML. Eu só vou começar com isso, então nós vamos duplicá-lo, obtê-lo duplicado. Há uma cópia legal, então eu não quero chamá-la e renomeá-la, editar, renomear e chamarei essa de “página Meu_contact_me”. Ótimo, não há espaços, basta usar hífens ou sublinhados. Então nós temos isso, clique duas vezes nele para abrir, minha página de índice, minha página inicial e agora esta página contact_us. O que vamos fazer neste enquanto você passa e começa alterá-lo dependendo do seu design, digamos, Photoshop. Então eu vou mudar isso para talvez contact_me. Vou me livrar disso e você começa a estilizar esta página. Vamos dar uma olhada no navegador. Aí está, então você pode ver que esta é a minha página de contato comigo. Vou ver a página de cima. Ainda tenho a minha página inicial. Se eu mudar de volta para este e mas aqui está, esta é a minha página inicial e minha página contact_us parece muito semelhante. Eu acho que até agora, eu decido quantas colunas eu quero, o que vai para essas colunas e toma um tipo, provavelmente uma forma neste. Agora, para conectar os dois, vamos para o índice, e eu quero conectá-los porque lembre-se que usamos hashes antes. Então aqui em cima nós usamos haxixe. Então o que eu vou fazer é apagar o hash e eu vou chamá-lo do contato. Você pode ver pré-preenchê-lo, bom. Então meu menu agora quando eu clicar em contact_me deve saltar para mais um para evitar um navegador. Então, página inicial, eu clico em “Contact_me”. Ele vai para a minha página contact_me. É isso, então, vá e construa algumas páginas e conecte-as neste. Agora a outra coisa que você pode fazer é eu tenho um monte de outros cursos, adicionar este para o Photoshop. Acabamos de fazer uma maquete no início. Há um Photoshop para web design e curso que eu tenho. Há também um curso maior, este aqui é eu acho que um curto. São alguns vídeos aqui para Responsive Web Design. Eu tenho um longo que tem cerca de 50 vídeos e tem a ver com algo chamado Bootstrap, está em Dream Weaver e é um próximo passo depois disso. Temos algumas das mesmas características, mas é muito mais detalhadamente. Você pode entrar nessa. Há um curso UX, tornando-se um designer de UX. Essas coisas sobre nomes de domínio, outras coisas que você pode fazer se você é um treinador e você está indo para ensinar este aqui, eu tenho Recursos de Professores, você tem um olhar para o lado aqui para ser um link para os Recursos do Professor e há notas que você pode colocar suas mãos em e você pode usar essas quedas de exercícios para ensinar. O que mais? Projetos de cartazes. Então você pode ter seguido isso ao longo, mas trocou as imagens para as suas, eu adoraria vê-lo. Escolheu uma fonte diferente, adoraria vê-la. Eu gosto muito de ver essas coisas. Então links ou capturas de tela, qualquer coisa que você puder, ficar nos comentários. Há muitas maneiras diferentes nos slides diferentes para me mostrar o que você fez, eu adoraria vê-los. Também dê um comentário, se você gostou, você gostou do meu estilo de ensino ou se você não gostou. Trabalhar um comentário lá e dar-lhe um comentário e para que eu possa torná-lo melhor. O que mais? A última coisa é sobre ser pago, e eu tenho uma série inteira de vídeos sobre isso também. Sobre como executar um resumo, como garantir que você seja pago a tempo, quais custos você deve cobrar? vez, há um curso completo sobre isso, vá verificar em meus outros cursos. Ok, meus amigos, percorremos um longo caminho. Nós construímos nosso site portfólio, nós levamos um media queries onde, nós fizemos uma navegação responsiva legal. Agora é hora de você sair e construir seu próprio site. Esconda as pessoas boas e verei vocês de novo em outra série de vídeos. 13. Folha de consulta do Dreamweaver: Olá, adoráveis pessoas. Neste tutorial, vamos olhar para a nossa folha de truques. Esta coisa aqui é a versão de vídeo, haverá um PDF, haverá um link na tela aqui, todo o PDF imprimível para download, então assista, imprima o PDF, e coloque-o ao lado da sua mesa e se torne mais incrível em Dreamweaver. Então, primeiro de tudo, estamos olhando para algo chamado QuickEdit, eu amo QuickEdit. Ele é novo no Dreamweaver 2017, portanto, se você estiver usando uma versão anterior, ela não funcionará. Agora, QuickEdit é uma maneira de editar o CSS muito rapidamente. Neste caso, eu tenho este botão e é muito perto desta tag p, está sendo irritante me toda esta série tutorial. Então eu quero empurrar isso para baixo, então há uma tag p aqui. Então vamos entrar no Dreamweaver. Dreamweaver, aqui está o meu cabeçalho, na verdade, considerando? Então cabeçalho, há o meu conteúdo principal e há a tag p, a tag p ofensiva, e há o botão embaixo, então há o botão Vamos conversar, há a tag p e tem uma classe chamada heading-body. Eu vou replicar, eu posso ir para QuickEdit ou eu posso usar o comando qualquer atalho, atalho ainda mais curto. A codificação é ruim, como você pode ver, é como um pequeno buraco de minhoca, passa e encontra meu style.CSS. São narizes na linha 75, e esta é a minha cópia do corpo, encontrei. Eu vou colocar em padding-bottom, e nós vamos colocar em 20 pixels. Vou fechar aquele buraco de minhoca. Apenas verificando o navegador, alguma distância entre os dois. Por que é bom? É apenas diferente de entrar em estilos e tentar descobrir qual é o estilo. Há lá, mas se é um CSS longo, vá via Facebook. Pode ser muito poderoso. Acelerar isso. O próximo que vamos olhar é algo chamado Emmet. Se você já fez os vídeos tutoriais, nós fizemos um pouco. Basta recapitular, digamos que eu quero adicionar uma tag div, e eu quero adicionar uma classe a esta tag div. Então eu quero uma tag div e eu quero adicionar uma classe chamada coluna. Ou uma aula chamada “Incrível”. Quero que haja quantos deles? Gostaria que fossem seis, por favor. Se eu acertar, não coloque Return, pressione Tab. Olhe para isso. As aulas, seis delas com o nome da classe “Incrível”. Digamos que precisamos de outra coisa, digamos que precisamos de uma lista não ordenada com um monte de itens da lista. Então vamos lá e vamos lá, e vamos dizer que queremos 20 deles porque isso levaria muito tempo. Hit Tab, olha para a lista desordenada, com 20 deles. Fica ainda melhor se eu quiser ter uma aula aplicada a eles de balas de Dans-Bullets. Então vá aqui, aperte Tab. Olhe para mim com Emmet. Há um monte de outras coisas que Emmet pode fazer. Cargas e cargas e cargas. Vá verificar, Emmet, é E-M-M-E-T. Há um site e todas as coisas e você pode ver e descobrir o que ele faz. Um par de outros rápidos é img, Tab, que lhe dá imagem e a fonte e é tudo tag. Outro que eu sei e posso lembrar é link, Tab, dá-lhe o link de folha de estilo, tudo com a sintaxe certa, e é rápido. Obrigado. Dica Número 3 vai ser multi-cursor. Nós adicionamos uma classe a este grupo de divs que eu tenho aleatoriamente aqui, mas vamos dizer que eu preciso adicionar outra classe. Digamos que eu queira adicionar uma classe a todos eles, pode ser difícil, então eu posso colocar vários cursores. Então, o que eu posso fazer é manter pressionada a tecla Alt ou a tecla Option no Mac e eu posso arrastar através de todos eles. Olha, todos os cursores. Eu posso colocar outra classe e esta pode ser a minha eu posso mover qualquer classe, eu tenho uma classe ousada. Você pode apenas ter as aulas indo. Agora, nós fizemos a série de tutoriais Emmet. Mas digamos que queremos fazer isso em lugares aleatórios. Isso é ótimo quando eles são todos, porque você pode Alt arrastar através, mas digamos que eu preciso de um lá que também eu preciso editar aqui também. Alt não funciona. Você precisa arrastar Alt. O que você pode fazer é começar aqui, manter pressionado o Comando, eu quero colocar um lá e eu quero colocar um lá, tantas classes em todos esses lugares. Consegues ver os meus cursores? Um ali, um ali, outro ali, todo piscando. Eu posso dizer outra classe, eu não sei como essa classe é chamada, mas incrível. Então multi cursores, mas ainda melhor quando eles não estão apenas em um lugar, você pode tê-los em toda a loja. Esse é o multi-cursor incrível folha de fraude tempo show. Este pode ser o meu favorito. Aqui é o Número 4. Isso é algo chamado Aplicar formatação de código-fonte e ele apenas limpa seu código. Ele não faz nada para ele, apenas alinha e separa-lo, faz com que pareça bonito. Eu estava trabalhando com isso, baixei do slicknav.CSS. É incrível, mas sou muito visual. Então eu preciso de tudo para alinhar e para fora e você pode ver que há uma aula lá e meu instinto natural é apenas movê-lo para baixo e ter certeza que ele está longe disso, não sei o porquê, mas eu sinto que isso precisa estar lá em baixo e pode ter corridas. Então o que vamos fazer é, eu vou até aqui e é um chamado Format Source Code, clique nele e vá Aplicar Source Formatation. Você faz isso para uma seleção, você pode fazer isso para a coisa toda e assistir isso se transformar em, olha para isso, tão bonito. Faço isso com todas as minhas coisas, estou pegando esse CSS aqui porque não é meu, mas minhas coisas acabam parecendo tão ruins quanto. Bem, nada mal, mas o meu é acaba parecendo muito pior e apenas arrumar tudo, fazer com que pareça agradável. Eu sou como eu estou visualmente ver tudo bem. Se você estiver em versões anteriores, há uma opção aqui em 2017. Se você se juntar a mim com versões anteriores, há sob Editar para que o Código e há um diz Aplicar Formatação Fonte. Isso é Aplicar formatação de código-fonte e esse é o número 4. Número 5 nesta linda lista de folhas de fraude é algo chamado Code Folding. Veja estas pequenas flechas aqui, significa que posso dobrar todo o meu corpo e toda a minha cabeça. Por que é útil é apenas arrumar as coisas, seu faz particularmente estressante olhando um pouco de HTML e retorna em coisas separadas para fora. Eu quero dobrar o título e o meu principal, apenas mantém tudo junto. Eu acho que provavelmente o mais útil, dizer que eu tenho um pedaço que eu preciso excluir em vez de tentar, especialmente quando ele está fora de página. Odeio quando é uma etiqueta muito longa e começa aqui e termina em algum lugar fora da tela. Vamos fingir aqui, é bem ali em baixo. Então Main e eu queremos tentar selecioná-lo, e eu quero tentar descobrir onde é o fim, e eu estou tentando encontrá-lo. Então o que você pode fazer é apenas, alternar para cima e o que eu faço é pegar tudo isso e, em seguida, excluí-lo. É uma boa maneira de agarrar todas essas coisas. Quando ele é alternar seu não foi embora, alternar de volta para fora, dobrar código pessoas, eu amo isso. próximo na nossa lista de cheat sheet está apenas duplicando. Apenas um atalho agradável e muito fácil no Dreamweaver. Diga que preciso de mais um desses botões, tem um aqui, mas se eu precisar de outro, eu posso. Selecione a linha, copie-a, corte-a e cole-a, coloque as guias à direita. Acho que é o maior problema, mas tudo o que faz parecer bonito. O que posso fazer é desfazer. Em vez de fazer todo esse drama, veja isso, cursor piscando Comando D. Se você está em um PC, é Controle D, mas em um Mac, é Command D e assista. A menos que haja duplicação, temos uma etiqueta que ela está dentro, ela vai estender a mão e duplicá-la. Esse é o número seis. O próximo no super fantabulous uma folha de truques para Dreamweaver funciona bem para todos os números. Obviamente, vamos trabalhar um pouco em CSS para as propriedades. Digamos que o espaçamento de linha entre este H1 aqui, meu H1, lá é minha altura de linha. Se eu tiver meu cursor piscando dentro de qualquer um dos dígitos e eu pressionar Command e Alt, se você estiver em um PC, é Control e Alt. Em um Mac é realmente Command and Option e basta usar seus cursores para cima e para baixo, então suas teclas de seta. Veja isso, eu subo, e lá vai 80, desce, tem um 70. Para baixo, para baixo, para baixo. Você pode ver com a combinação desse navegador em tempo real aqui, que fica no fundo à direita e é um navegador em tempo real, novo no Dreamweaver 2017. Ajusta exatamente ao mesmo tempo. Então, qualquer um desses campos, qualquer coisa que você encontrar, tamanho da fonte aqui, suba, suba e desça. Que pessoas encantadoras tem ajustar qualquer um dos números, mantendo pressionada a opção Command ou Control option, e usar suas teclas de seta. A próxima folha de batota, grandiosidade em nossa adorável lista é o número sete. Não é, é o número oito e é uma maneira de embrulhar uma etiqueta que existe. Digamos que você tem essas etiquetas que estão aqui, mas eu não quero que elas estejam dentro do meu rodapé. Eu não escrevi a etiqueta do rodapé e eu poderia ir e escrever o rodapé aqui em cima e K para o fechamento e digitá-lo aqui em baixo, e isso vai funcionar, mas é um pouco longo. Então o que eu quero fazer é pegar todos esses caras. Então eu vou dizer você e todos vocês, e eu vou apertar Command T no meu Mac ou Control T em um PC e você pode ver lá, tag wrap. Quão bom é isto? Vou embrulhá-lo. Pressione Return. Você tem que apertar Return duas vezes. Não é possível mostrar o porquê. Você pode ver lá, aí está minha etiqueta de embrulho. Então pegue qualquer coisa, selecione Command T e ele vai encerrá-lo. Esse é o número oito. Então vamos passar para o número nove e ele está selecionando a tag pai. Digamos que estou dentro de algumas camadas. Essa coisa que estou usando como exercício, bem, não é boa. Não é particularmente confuso, mas digamos que é um pouco confuso. Há muitas crianças dentro desses pais. Então, o que você pode fazer é eu quero selecionar o, Eu não tenho certeza de quem o wrap uma tag é ou a tag pai é. Então, em qualquer lugar aqui dentro, mantenha pressionada a tecla Command ou Control em um PC e use seus colchetes. Eu vou usar o lado esquerdo, o aberto e você pode ver que ele agarra a etiqueta do buraco e ir de novo, agarra o pai, vai de novo, pega alguma coluna, vai de novo. Você pode ver, uma bela maneira de agarrar o pai, o cara do lado de fora. É realmente ótimo, especialmente quando este pai se estende por mais de uma página. Você não pode ver bem qual é o final, então você pode selecioná-lo. Então isso é Command e use colchetes abertos e essa é a maneira de selecionar a tag pai. Legal. Número 10 é uma variação no número nove, selecionando as tags pai. Vamos usar este seletor de tags na parte inferior. As pessoas ignoram essa coisa aqui e é incrível. Então, se eu estou dentro daqui e é realmente útil ao usar seletores compostos e você não tem certeza do que colocar. Então, digamos que eu queira, você tem navegação aqui em cima, e coloque-a lá dentro. Você pode ver esse meu “A”. Esta é a minha etiqueta selecionada na parte inferior aqui. Essa é a minha tag A e está dentro do item da minha lista, que está dentro do meu menu, que tem, desculpe , minha UL, que tem um ID do menu que está dentro do cabeçalho, que está dentro do corpo, apenas me dá uma idéia de onde Eu estou no no mundo veio. Digamos que eu queira cortar a UL, ver isso, clicar em toda a UL. Pegue o cabeçalho. É uma maneira de selecionar e usar este pai, usando esta tag selecionada na parte inferior para saber onde você está no mundo. Eu adoro isso. Certo, vamos fazer o próximo. O último nesta lista incrível de folhas de truques coisas, nós vamos olhar para trechos. Então eu estou aqui. Estou olhando para o painel de trechos. Estou no meu CSS aqui. Então vamos começar com trechos CSS. Tem muita coisa aqui. Vamos começar com os grandões. Então vamos dizer que eu preciso de um rodapé e eu preciso que ele seja fixado no fundo para que ele não se mova, então ele está sempre lá na parte inferior. Eu poderia ir descobrir ou assistir isso, consertar rodapé, clicar duas vezes. Olhe para isso. É todo o código para fixar o rodapé para baixo. Legal. Outra pode ser, você está começando um novo projeto e você precisa colocar algum zero em código e apenas para limpar tudo. É muito útil para fazer. Snippets CSS, há dois aqui. Há uma redefinição de estilo HTML, veja isto. Essa coisa que eu faço. Isso é um bom, impressionante estilo reset. Tudo ficará igual em navegadores diferentes. Dias felizes. Vou olhar para aquele. Há outro aqui chamado Eric Meyer. Qual eu gosto mais? Acho que gosto do Eric, é bom e simples. Apenas limpa tudo fora acariciando como há dias felizes recebe que uma compilação de um site, trechos fica ainda melhor. Veja isto. Se eu entrar em trechos HTML, olhe aqui. Vamos encontrar HTML. Preciso adicionar agora uma barra de navegação. Vou entrar em algo, criar uma barra de navegação. Ali está ele. Temos uma barra de navegação, nomear a turma para ele, definir o cara da liga está dentro dele. Os itens da lista estão todos vinculados prontos para uso. Há aulas. Posso duplicá-los. Trechos, incrível. Em seguida, um pouco é vamos fazer meta tags. Preciso adicioná-los. Consegues lembrar-te do que são todos? Meto-me em sarilhos quando não os adiciono. Ouço eu ir, e eu os encontro aqui e é meta tag geral. Aquele ou contra aquele, nem todos os versos meta tags para SEO. Eu provavelmente preciso de alguns desses, mas sim o nome lá dentro, a sintaxe direita, eu não tenho que ir e tentar lembrar o que eles são, trechos. O último, e este vem com um duplo banger. É o último, o final das folhas de batota. É esta adorável aqui. Imagine, então eu tenho uma etiqueta P, diz P e eu quero colocar um pouco de Lorem Ipsum nele, eu vou para aquele Lipsum.com e há a xícara de café lá, e você vai e copiá-lo, mas tem lixo anexado a ele. Você tem que limpá-lo. Mas veja isso. Acrescente Lorem Ipsum, oh meu Deus. Lorem Ipsum, construído lá e eu disse que este era o duplo estrondo para o final. Então Lorem Ipsum é incrível, mas imagine você fazendo isso um pouco. Imagine se houvesse um atalho que você possa fazer. Você pode. Você pode ver aqui este diz Lipsum. Vou me livrar desse e colocar no Lor e você pode ver embaixo do gatilho aqui, eu posso inventar o que eu quiser. Mailpara outro bom. Então só Lor. Agora, eu estou aqui, eu tenho minha etiqueta P e eu quero colocar em L-O-R e apertar Tab. Estou a fazer o meu próprio material. Como isso é bom. Mailto é outro. Tab para fora. Quem se lembra como vai o mailto? Eu recebo a maior parte do tempo e consigo escrever. Mas todo o tempo eu tenho que ir verificar, é cólon, como é um trabalho? Snippets, eles estão lá, eles trabalham e que o meu amigo é o fim da sua linda folha de truques. Agora lembre-se, se você está apenas assistindo este curso, este é o fim de um curso mais longo. Foram 12 vídeos de criar seus próprios sites responsivos. Vá verificar isso. Caso contrário, há um PDF que você pode baixar. O link estará na tela novamente aqui, e vá em quarto lugar. Seja rápido, seja incrível no Dreamweaver. Muito obrigado.