Usando o Premiere Pro & Dreamweaver 2017 para criar um site com um vídeo de fundo

1. 01 Introdução: Oi, meu nome é Dan, e neste curso, o que vamos fazer é criar um vídeo, então vamos construir um site, e adicionar um vídeo como plano de fundo. Parece muito chique, mas é muito fácil de fazer. Construí este curso para iniciantes. Não há necessidade de saber como codificar ou trabalhar com vídeo antes, vou começar logo no super básico. Este pode ser o seu primeiro site. Seria um ótimo primeiro site. Vamos passar por todo o processo. Mostrarei como encontrar algum vídeo veremos como editar no Premiere Pro. Faremos efeitos de vídeo interessantes, como desfoques, matizes e transições. Vou mostrar-lhe como exportar o vídeo para que você possa obter o tamanho do arquivo super pequeno. Depois de criarmos nosso vídeo, iremos criar um site básico juntos, e fazer com que nosso vídeo pareça legal e completo. Também criaremos uma segunda opção com as escolhas de vídeo através de uma pequena caixa específica em desenvolvedores. Também estou feliz em ajudar. Eu sou muito útil em responder aos comentários que estão nas diferentes páginas. Estenda a mão, eu vou te dar uma mão. Há também uma folha de truques que você pode imprimir, continuar indo, e se você é um professor, há alguns recursos de ensino disponíveis também. A melhor coisa sobre isso? É realmente não é tão difícil, mas o resultado final é bastante impressionante. Então, que tal isso? Eu, você e alguns vídeos e vamos fazer magia na internet juntos. Sim, mas eu acho que eu disse legal e incrível umas 100 vezes nesta introdução, que ganha um novo recorde. 2. 02 Recursos e o que é coberto no curso: Oi, aí. Vamos falar sobre o que estamos fazendo e os recursos que eu tenho. Primeiro, o que estamos fazendo é que vai ser um fundo de vídeo com texto e imagens, basicamente um site inteiro acima do topo. Não vai ser como aqueles pequenos vídeos incorporados como YouTube ou Udemy com botões de reprodução e esse tipo de coisas como parte de um site, é definitivamente como um fundo abstrato, como um grande efeito no fundo e no site por cima. Também faremos o vídeo real, em vez de simplesmente pular para criar o site, mostraremos como obter esse vídeo agradável e pequeno edição, correção, tudo isso e o Premiere Pro. As mesmas técnicas funcionam no After Effects, mas usaremos o Premiere Pro neste, então faremos isso e eu pularei para o final do site. Agora, há arquivos de exercícios, então você pode jogar junto. Haverá um link nesta página, você pode baixá-los e jogar junto com os vídeos. Há também algo chamado os arquivos concluídos. Isso só significa que quando eu chegar ao final de cada vídeo, há cerca de 15 estranhos nesta série, mas no final do vídeo, o que eu vou fazer é, eu vou salvar meu projeto, eu vou programar que eu estou pronto para escrever, que se você está tendo problemas para tentar acompanhar ou algo não está funcionando da mesma forma que o meu, você pode baixar esse arquivo completo e apenas verificar o seu versus o meu, e vamos ver onde você pode ter dado errado, então haverá um nesta página também. Quando terminar, pode postar seu projeto? Apenas em um link em algum lugar da página, alguma maneira de entrar em contato comigo, ou capturas de tela. Não precisa ser um local de trabalho completo. Eu só quero ver o que você fez. Eu mencionei que você vai ficar muito orgulhoso disso, porque quando você é novo nisso, é muito mais difícil, mas eu gosto de vê-lo como um professor. Eu gosto de ver o que você fez e apenas é bom para outras pessoas verem como você fez isso e se adaptar ao curso, então publique seus projetos. A outra coisa que eu realmente gostaria que você fizesse é me dar uma crítica. É um pouco cedo no vídeo para estar me dizendo, me dê um comentário, mas dependendo de diferentes sites, eles vão aparecer cedo, às vezes tarde no final, sobre oferecer uma revisão. Só para você saber, essas críticas são como eles medem o sucesso de um curso, você pode chegar ao fim, muitas pessoas chegam ao fim e, melhor, [inaudível] eu prefiro rever, e isso é bom também. Mas se você postar uma crítica, honestamente, eu não quero nada sobre honestidade, mas esse tipo de coisas ajudou meus rankings e meu curso pode fazer um pouco e me trazer um pouco mais de receita para mim como professor. Neste curso, eu fiz uma folha de truques também. Haverá uma versão em vídeo e uma versão em PDF para impressão. Haverá um link na página também, essas folhas de trapaças. Então você pode sair e imprimi-los e colocá-lo ao lado do seu computador apenas para que você possa, quando você é novo, se acostumar com as coisas, compartilhar essas coisas também e fazê-las compartilhar por aí. Então publique-os e compartilhe-os se você gosta deles. A última coisa é, se você é um professor, assistindo isso para ensiná-lo, você tem uma aula amanhã e você tem que ensinar fundos de vídeo, eu tenho uma página de recursos para professores onde você pode obter notas impressas, assistir esses cursos, fazer as notas impressas, confira isso também, haverá um link na página, há muitos links nesta página. Isso é tudo para recursos e coisas que vamos fazer neste curso. 3. 03 cool exemplos de: Oi, aí. Neste vídeo, vamos olhar para lugares legais para obter exemplos de vídeos de fundo em tela cheia e este é provavelmente o melhor site que eu uso. Chama-se Awwwards, mas tem dub-dub-dub, por isso são os prémios dub-dub-dub. Tem muita coisa aqui e a inspiração da Kenten. A maneira mais fácil é ver esta busca no canto superior esquerdo? Você pode apenas digitar o vídeo, colocar em segundo plano e ele vai procurar através de seus cofres para todos aqueles. Então o que você faz é abrir um monte deles, dar uma olhada. Para abri-los. Se você pairar acima, você pode ver esta pequena flecha aqui? Isso vai abrir o site? Ok, eu sei. O que você pode fazer é clicar nele e ele salta para essa página. [ inaudível] Se você manter pressionada a tecla Command em um Mac ou a tecla Control em um PC, antes de clicar nela com o mouse, assista a isso. Você pode ver que eles se abrem em uma guia separada. Eu gosto de fazer isso, eu gosto apenas de passar, ir e clicar, clicar. Apenas abrindo um monte deles. Certo. Sim, só passando e veja o que você gosta e usa procurando, eu acho, vídeos inspiradores, estilos, como eles os fizeram lavar ou efeitos diferentes. Sim, só para que seus sucos criativos fluam. Agora cuidado para ver esse cara aqui, ver a coisinha que fala aqui. Ele está tocando música, Northy. Nunca faça isso. Ok. Não tem som indo por padrão. Ok. Porque você é punido por ser desligado e não vigiado. Sim. Então você só está procurando por ele agora. A coisa é que alguns deles são um pouco velhos. Você pode ver que isso não parece ter mais o vídeo sendo reproduzido. Ok, então paga, isso não é. Oh, outro com som. Vai-te embora. Tudo bem, então feche esses, é isso. É assim que encontrar vídeos de fundo muito legais. Agora, o site aqui, não só obviamente faz sites de vídeo. Eu amo o site, ele só tem coisas muito legal e ele recebe sites do dia e apenas belo web design acaba neste lugar. Então você não tem que usá-lo apenas para nossas coisas de vídeo. Eu uso isso para todo tipo de coisas. Tudo bem. Vejo você no próximo vídeo. 4. 04 Onde obter vídeo para seu plano de fundo: Agora vamos começar a fazer os vídeos antes de começarmos a codificar. Se você quiser entrar diretamente na codificação, você pode pular esta seção. Agora, se você receber seus vídeos de, obviamente, você pode atirar em si mesmo. Está vindo mais e mais fácil. Eu tiro muitas das minhas coisas. Mas também faço o que está à nossa frente aqui e uso coisas como filmagens pré-fabricadas da Biblioteca de Estoque. Esse é o que eu vou usar para este tutorial. Bem, é uma filmagem que foi feita por outra pessoa e podemos comprá-la. Os custos são realmente muito bons, como obter um vídeo daqui, seja este site, Adobe Stock ou da iStock. Eles parecem ser um dos mais populares. Eles vão custar-lhe entre $50 e $200, dependendo do vídeo. O que fiz foi escolher um do Adobe Stock. É como um designário, é mais uma fotografia, mas eu gosto muito das antigas unidades de design sobre ele. Depois de selecioná-lo, você pode clicar com o botão direito do mouse e salvá-lo. Ou, se você estiver usando as Bibliotecas da Adobe, que são incríveis, você pode clicar sobre isso e baixá-lo para sua biblioteca ou baixá-lo para seu computador. Existem algumas opções se você souber como usar bibliotecas, caso contrário, basta clicar em baixar e salvá-lo em sua área de trabalho. Esse é o vídeo que vamos usar. Agora, se você nunca usou o Adobe Stock e quer, e você vai tentar, vou colocar um link na tela aqui. Lá está ele. Vou colocar um link nas anotações lá embaixo. Não é nada mais do que, se você acessar o site usando meu link, eu recebo uma pequena comissão de bebê para enviá-lo para eles. Você pode ir diretamente para o site, é stock.adobe.com. Mas se quiser me ajudar, clique nisso antes de ir. Não te custa mais. Ótimo. Agora que temos algum vídeo para trabalhar, vamos fazer algumas edições básicas e prepará-lo para o nosso site. Vamos usar o Adobe Premier. Então vamos carregar essa. 5. 05 Configurando seu fundo de vídeo e edição básica no Premiere Pro: Tudo bem. Olá a todos. Neste vídeo, o que vamos fazer é fazer algumas edições básicas no Premiere Pro. Nós vamos fazer isso. No início da minha linha do tempo, aperte “Barra de espaço”. Vai desvanecer-se. Vou virar isso de cabeça para baixo. Essa coisa toca, vai por cerca de 15 segundos. Ele toca, e mergulha para preto. Vamos fazer isso. Certo, agora é hora de fazer nosso vídeo. O que fizemos foi abrir o Premiere Pro. Agora você pode fazer sua edição de vídeo e qualquer coisa que você gosta. Especialmente para fundos de vídeo, não estamos fazendo um monte de coisas. No nosso caso, vamos apenas obter algo que faça loops, então vamos usar o Premiere Pro. Se você estiver mais em casa com o After Effects, ele fará exatamente o mesmo trabalho para o que precisamos agora. O que vamos fazer é criar um novo projeto. esta janela se abrir, vamos dar-lhe um nome. Na parte de cima, vou chamar os meus Designers Background. Localização, vamos dar-lhe um lugar para viver. Vou colocar o meu na minha área de trabalho. Vou colocá-lo em uma nova pasta. Vou ligar para o meu, Premiere Pro-Designer Background. Ótima. Clique em “Escolher” e não se preocupe com essas outras coisas. Vamos clicar em “Ok”. Ótima. Estamos no Premier Pro. Agora, para que você acompanhe, certifique-se de que você está em Janela, Espaços de trabalho, você está em Edição. Se o seu ainda parece diferente do meu, vá até um que diz Redefinir Salvar espaço de trabalho, e ele vai rejeitar e se parecer com o meu. Agora, a Premiere parece assustadora. Quando você abre, as pessoas ficam assustadas. Na verdade, não é tão difícil. Parece que deveria ser, mas não é. Vamos importar o nosso vídeo. Vamos para Importação de Arquivo. Importar. Agora, este não será um tutorial completo sobre como fazer tudo no Premiere Pro. Tenho outro curso para isso. É como uma edição de vídeo corporativo, então vá assistir se quiser fazer um conjunto completo. Esta será apenas a versão rápida para fazer nossos vídeos, torná-los agradáveis e pequenos, e depois levá-los para o nosso site. Arquivo Importar e confira os arquivos de exercícios se você ainda não os baixou. Eu os baixei. Estes são os arquivos do Exercício. Então aqui o que estou procurando é um vídeo, e vamos usar este aqui. Vou importá-lo para dentro É o que pegamos do Adobe Stock. Vamos clicar em “Importar”. Ótimo, então importamos nosso vídeo. A primeira coisa que precisamos fazer é criar algo chamado sequência. Uma sequência é exatamente como a página no documento. Você não pode simplesmente ter um vídeo sentado por aí. Ele precisa ir em algo ou em algo, um recipiente, e isso é chamado de sequência. Como uma página em um documento, precisamos dessa página para colocar nossas palavras. Você meu vídeo são as palavras, tipo. Para fazer uma sequência, File, New, e você poderia ir para seqüência, mas é muito fácil porque então você tem que tentar adivinhar qual deve ser a sequência. Tens uma sequência e dizes : “Santo Deus, qual destas definições devo usar para a minha sequência? Fica um pouco confuso.” A maneira mais fácil é clicar com o botão direito do mouse e dizer, você pode ver aqui? Diz “Nova Sequência do Clip”. A coisa legal sobre isso é, ele vai usar todas as configurações que vieram desse vídeo e criar a sequência, e despejá-la na minha linha do tempo. Este pequeno ícone aqui, vê este aqui? Essa é a minha sequência. Este é o vídeo que eu importei. O que está acontecendo é, eles têm o mesmo nome que pode ser um pouco confuso quando você está começando, que é o suporte, e esse é o vídeo que está preso na linha do tempo. Aí está a minha sequência, e esse é o vídeo que está lá. Agora eu posso ter uma sequência, e eu posso continuar importando muitos vídeos e continuar adicionando-os a esta linha do tempo. Eu poderia ter 10 vídeos em uma sequência. Lembre-se, este é o básico. Aperte “Barra de espaço”, ele vai começar a tocar. Você pode ver meu pequeno guia lá. Você vai notar que o meu tem o Adobe Stock no meio aqui, é porque eu não paguei por isso ainda, principalmente porque se eu comprá-lo e ver isso fora com esses arquivos de classe, eu tenho certeza que estou quebrando um monte de leis e eu vou conseguir em apuros. Eu só vou usar o espaço reservado, e é fácil de ir e obviamente pagar por isso, e você pode estar trabalhando da mesma forma. Você pode estar trabalhando com um cliente, você pode passar e zombar talvez três fundos diferentes usando esta versão simulada com o Adobe Stock, e quando um cliente escolhe um, então você pode ir e pagar por ele. É muito fácil atualizar aqui no Premiere depois. Aí está o meu vídeo. Dura cerca de quanto tempo? Dura cerca de 15 segundos. Agora, digamos que eu queira apará-lo, é muito fácil, seja no início ou no final, tudo o que você faz é passar o mouse acima do mouse. Você pode ver que eu posso arrastar isso para dentro, e ele corta para cima. Não deletou. É meio que aparado. Ainda está aqui, olha. Olá. Mas eu posso apenas cortar as pontas aqui, e eu poderia cortar no início, e mover isso para o início. O que eu fiz foi, eu cortei em alguns segundos. Cabe a você e ao seu clipe. Agora, quanto tempo deve ser? É totalmente com você, mas quanto mais tempo for, o tamanho do arquivo fica maior. Talvez você possa fazer uma corrida rápida e ver o quão maiores são os tamanhos dos arquivos. Os tamanhos dos arquivos estão ficando grandes quando chegam perto de 10 megabytes. Eles são pequenos quando são um megabyte. Se você tem algo com 30 segundos de duração, ele vai chegar lá em termos do tamanho do arquivo. Vou usar este pequeno e agradável. A coisa legal sobre este aqui é, eu vou apertar “Desfazer” algumas vezes, é que, desfazer um pouco mais, não muitos, é que ele tem um bom tipo de loop. Não preciso de todos os últimos segundos, porque as mãos dele disparam. Esta parte aqui, eu poderia cortar fora só porque eu não posso mais ver a mão, então realmente não importa. A postura vai ao redor, loops. Ótima. Diga que você quer se livrar da parte onde ele começou a escrever. Só quero chegar ao ponto em que ele começa a se mover. Vou cortar esse pedaço para fora. O que eu posso fazer é que você vai usar esta ferramenta aqui. Sua barra de ferramentas está neste pedaço do meio aqui, e a que você vai usar é essa coisa chamada Ferramenta Navalha. O trabalho dele é assistir isso. Minha cabeça de jogo lá, eu cliquei nele, e eu meio que cortei em duas partes. Eu vou voltar para a minha ferramenta de seleção, e você pode ver que são dois pedaços. Na verdade, não cortei o vídeo. Ainda está tudo aí, veja. Olá. Eu meio que fiz uma pequena edição. Vou voltar para o meu Razor Tool aqui, e vou deslizar até que ele termine de escrever. Bem ali, eu vou cortar esse pedaço para fora. Então peguei minha ferramenta de seleção. Posso clicar nisso, apertar “Excluir”. Eu posso arrastá-lo através ou um bom truque no Premiere, é que eu posso clicar sobre isso. Você vê que fica branco e eu apertei “Excluir” no meu teclado e ele corta tudo. Agora, eu tenho essa coisa, ele lugar através. Começa a escrever, mas na verdade ele apenas salta para a parte em que ele terminou de escrever. É meio estranho na verdade, então vou desfazer isso. Foi mais um exemplo. Vou desfazer, desfazer, até ter esta boa parte aqui. Lembre-se, aparando, basta puxar estes prós e a Ferramenta Navalha para cortar pedaços. Se você tem um segundo vídeo, assista a isso. Vou para a Importação de Arquivos. Este vídeo, eu vou importar. Você pode ver aqui embaixo, eu tenho outro vídeo. Você pode ver a diferença entre esses dois ícones? Este aqui tem ambos, vamos ampliar um pouco aqui, é este tem vídeo, mas nenhum áudio, este tem vídeo e áudio. Você pode ver os dois pequenos ícones lá. Não importa, mas o que vou fazer é arrastar este aqui. Agora, eu tenho este e ele vai meio que se misturar com este. Se você tem mais de um vídeo, você quer juntá-los porque há muitos cortes diferentes, basta continuar importando-os e continuar arrastando-os nesta linha de tempo. Não consigo ver o fim, por isso vou diminuir um pouco. Basta pressionar “Menos” no seu teclado. Agora você pode ver esta linha azul aqui fora? Isso só significa que este é o bit que está ativo, e se eu apertar “Menos”, você pode ver que ele diminui o zoom. Se eu clicar aqui em cima, posso ver que a linha azul está em torno disso, é chamada de janela do programa. Isto é apenas o que vai exportar. Se eu apertar “Menos” aqui, posso ampliar a linha do tempo neste. Você só tem que ter certeza quando você está aqui, mais e menos trabalho. Quando você está aqui em cima, mais e menos amplia dentro e fora deste. Agora que posso ver mais, posso continuar adicionando vídeos. Agora, em termos de edição, vamos apenas cobrir mais uma ou duas coisas. O próximo é transições. No momento, isso é apenas um corte de salto. Ele só vai e salta para o outro. Tudo bem, só um corte velho. O que queremos fazer é olhar para talvez fazer uma cruz dissolver ou misturar. O que você vai fazer é você vai encontrar sua janela Efeitos. Vá para Janela, vá para Efeitos. Ele abre no fundo aqui, e você está procurando Transições de Vídeo. Pule para baixo, e há alguns deles. Para ser honesto, se você usar Page Peel, eu vou te encontrar, te caçar, e tirar sua estréia de você. Uau, é um pouco duro. Você pode ver aqui, há um monte de transições diferentes. Para ser honesto, são todos um pouco o suficiente. Cross Dissolver é um bom ou um mergulho para preto é um bom. Em termos de dissolução, este aqui Cross Dissolver vai funcionar bem. Vou clicar, segurar e arrastar e assistir isso. Você pode ver entre estas duas linhas aqui, esta pequena lacuna aqui em cima é? Vou ampliar um pouco, lembre-se mais, e isso é Cross Dissolver, é como uma coisinha de bebê no meio. Não se preocupe se o seu acabar de um lado ou de outro ou no meio, não importa. O efeito, o fim termina o mesmo. Vou tocar no “Space Bar” aqui. Você pode ver a bela cruz se dissolver. Digamos que você quer que seja um pouco mais [inaudível], você pode estender todas essas transições, qualquer uma delas, você pode ver, eu seguro meu ícone sobre isso e eu arrastá-lo para fora. Isso vai ser o dobro do tempo agora, então vai ser um pouco mais de dias de nossas vidas. Há um monte de outros aqui. Page Peel, eu disse que nunca faria isso. Aqui vamos nós. Preparar a casca da página. Ok para Page Peel. Outras transições, você pode passar por todas elas. O que eu vou fazer é, na verdade vou diminuir um pouco, vou deletar este porque, na verdade, meu pequeno loop vai ser este pedaço aqui, e eu vou entrar nesse loop para sempre. Mas agora, em vez de saltar, consegues ver que o início começa com este bloco de notas aqui? Desejava que a mão dele estivesse fora, porque então o que aconteceria é que iria até o fim e também estaria fora. Não, não seria. De qualquer forma, o que eu quero fazer é que eu quero fazer um loop um pouco mais agradável em vez de apenas chegar no final e saltar para trás. Quero adicionar um pouco de desvanecimento no início e no fim, e isso irá mascarar um pouco a transição. Para fazer isso, está em Dissolver. Este tem é Dip to Black, apenas significa desvanecer-se para preto. Se eu pairar sobre essa extremidade, agarrá-la nessa extremidade também, você pode ver apenas um tipo de fechaduras nas extremidades aqui. Veja isso agora, barra espacial, começa preto, desaparece, e vai passar por tudo. Vou pular, barra de espaço, e vai desaparecer de novo. Porque vou forçar isso a entrar no meu site, talvez seja um pouco menos óbvio. Você pode preferir o corte do salto. Está tudo bem. Assim como as outras transições, se eu ampliar, posso estender esses mergulhos para negros, só para torná-los um pouco mais longos. Vai achar muito difícil trabalhar com isso, a menos que amplie o zoom. Certo, mais um pouco. A última edição que faremos para essa edição em particular antes de começarmos a fazer mais pontos de estilo para o Premiere Pro é, quero virar a minha de cabeça para baixo. Por quê? Porque isso no topo aqui está interagindo com o meu menu, então eu quero que isso seja meio que no fundo. Vou virar isso de cabeça para baixo. O que você faz é clicar nele. Então eu o selecionei na minha linha do tempo e aqui, há algo chamado Controles de Efeitos. Se você não consegue encontrar isso, essas pequenas abas são realmente difíceis de usar. Se você não pode encontrá-lo, você perdê-lo, ele se foi para sempre, ir para Janela, subir aqui, e ir para Effects Controls, e ele tipo de saltar para cima novamente. Você vai ver, se eu usar tudo isso, eu tenho movimento, opacidade, algumas coisas aqui que podem ser realmente úteis para você. O que vamos fazer é sob Motion, eu vou desativá-lo. Tem um aqui chamado Rotação, e eu vou virar o meu 180. Significa que vai estar no fundo da minha coisa e vai parecer um pouco mais legal, e pelo menos eu acho. Você pode ver alguns dos conceitos básicos lá, como dimensionamento, digamos que você deseja cortar bits. Posso escalar isso clicando, segurando e arrastando para a direita. Acho que é mais fácil usá-los, do que na verdade é na janela do programa, agarrando as imagens. Não sei porquê. É apenas o programa funciona, mas desajeitadamente dessa maneira ao tentar trabalhar no vídeo, é mais fácil fazê-lo aqui com os números. Tudo bem, vamos fechar isso. Vamos abrir isso de volta e colocar a Escala de volta para 100. Aperte “Salvar”. Agora vamos começar a adicionar algumas texturas legais e fundo, cores e coisas. 6. 06 adicionar a de textura ao seu vídeo de fundo no Premiere: Oi lá. Neste vídeo, vamos dar uma olhada em adicionar um fundo texturizado, algumas caixas coloridas, alguns borrões em nossos vídeos, e vamos criar duas versões. Um com tela cheia e o outro com formato de caixa de correio onde isso vai ser colocado dentro de uma div. Segure seus chapéus, vamos fazer nossos vídeos parecerem super incríveis. Então, por que adicionamos todos esses detalhes? Por que vamos sair e colorir e adicionar fundos lavados, borrados? Por que vamos fazer essas coisas? Por algumas razões. Um deles é que ele só parece legal. A outra razão é que estamos fazendo isso para que possamos ocultar parte da má qualidade e manter o tamanho do arquivo baixo. Você diminui a quantidade de cores usadas, como esta aqui, ele vai e diminui o tamanho do arquivo. Há uma conexão direta lá, e na verdade é bastante substancial. Desfocar é bom quando você passa, é só para se esconder. Veja quando você quer usar uma imagem de resolução muito baixa e você precisa desfocá-la um pouco como esta, você pode desfocá-la. É muito difícil ver a pixelização e esse tipo de coisas. Agora, você pode ou não saber que você pode fazer muito disso com CSS, mas você não deve fazer com CSS. Por quê? Há um recurso de desfoque, ele não é realmente bem suportado, mas isso é fora do ponto. O que acontece é, se eu costumava dizer a escala de cinza, mas um CSS, e eu usei o recurso de desfoque sobre isso e eu faço isso em código. O que vai acontecer é que eu tenho que trazer esse tamanho de arquivo realmente grande em termos de vídeo, e então eu vou aplicar o CSS sobre o topo dele. Enquanto que se eu fizer isso agora no Premiere ou no After Effects, isso significa que eu posso fazer isso de antemão e remover todas as cores diminui o tamanho do arquivo. Desfocá-lo, reduz o tamanho do arquivo. Talvez desfocando não tanto. Mas fazer isso mais tarde, especialmente coisas como silenciar e essas coisas, pode ser feito em código, mas não faça isso porque se fizermos isso agora no vídeo, o vídeo será menor e carregar mais rápido e todos ficarão felizes. Vamos dar uma olhada nisso no Premiere. Na Premiere, o que eu vou fazer é arrastar os meus hits de jogo, está no meio para que eu possa ver as coisas acontecendo. Eu vou abrir meu painel fixo, se você não pode vê-lo, ele está em Janela, pule para baixo para Efeitos. Os que vou usar estarão sob efeitos de vídeo. Vamos começar com o borrão. Sob o borrão aqui, há alguns diferentes. Vamos usar o borrão gaussiano. Por quê? Porque toda a gente usa essa. Você vai ver aqui, foi adicionado, borrão gaussiano. O que eu vou fazer só para torná-lo um pouco menos confuso como eu vou girar o movimento e apenas ver o borrão gaussiano. Tudo o que vamos fazer é clicar em segurar e arrastar isto para a direita. O que acontece no Premiere é que muitas coisas são limpáveis, então você clica em segurar e arrastá-lo para a direita. Você vai ver meu vídeo ficando um pouco desfocado. Super embaçado, um pouco embaçado. Você decide, e então você sai e exporta. Você tem um passado legal. Agora, o desfoque é usado para ocultar pixels ruins. Se você tiver uma imagem de resolução muito baixa na qual você obtém a compactação muito baixa, desfocagem é menos provável que mostre esses artefatos. A outra razão é, digamos que você pode ter pessoas nele, dizer que é um café dizendo que você não quer ver Bob, Ginny e Norm, Norm é, mas se você vir essas pessoas que são realmente pessoas reconhecíveis, se você borrá-lo, eles se tornam como em a notícia quando eles estão falando sobre pessoas genéricas. Eles borram fundo ou filmam apenas seus pés, só para se livrar dessa sensação pessoal para isso. Só se tornou o povo. Está desfocando. Vou clicar na palavra Borrão Gaussiano e apagá-la. Outra coisa a fazer em termos de esconder pixels é usar um pouco de grão de filme. Só aquele barulho que passa por cima. Você vai descobrir que aqui há uma opção que diz barulho e grão. Eu vou rolar para baixo e eu vou usar o que diz ruído e eu vou editar clicando, segurando, e arrastando-o aqui para a linha do tempo. Você pode ver lá, há barulho. Quantidade de ruído, aumentá-lo como o borrão. Cabe a você o quão longe você vai. Você usa ruído de cor, eu desliguei isso, eu gosto um pouco mais preto e branco. Vou dar zoom aqui. No momento está em ajuste, para que você possa ampliar. Basta ter uma noção disso, isso é demais. Vai depender do seu filme, mas se você adicionar esse ruído, ele lhe dá a qualidade do grão do filme e também que esconde parte da pixelização ruim que pode acontecer se você estiver usando um vídeo de resolução muito baixa, como nós Chegou aqui. Está adicionando um pouco de barulho, então eu vou me livrar do barulho, adeus. A próxima coisa que vamos olhar é torná-lo preto e branco e jogar com alguns deles, talvez a colorização, filtros do Instagram que você pode fazer para torná-lo legal. Eu vou voltar a encaixar e eu vou abrir algo chamado cor Lumetri. Agora, você pode encontrá-lo aqui, mas há uma maneira melhor de usar essa coisa chamada cor Lumetri, e está sob a janela. Há uma chamada cor Lumetri. Eles são os mesmos, exceto que você tem esse grande painel aqui. Em vez de tentar lutar com ele neste pequeno painel de efeitos, você tem este grande aqui. O que vamos fazer é a correção básica é que se você precisar corrigir seu vídeo, não vamos passar pela calibração escolar quando você está consertando o vídeo. Nós não vamos passar por isso neste caso, mas é muito fácil se você fez qualquer projeto de fotografia, isso não vai ser muito difícil de fazer, mas o que queremos fazer é feito aqui em saturação. Você pode ver que eu posso puxá-lo para baixo, eu posso ficar preto e branco. Ou posso ficar com ele para que seja um pouco como se tivesse saído. Agora, o que eu quero fazer é renderizar duas versões ou renderizar esta versão que está totalmente saturada. Isso está saturado agora e então eu vou fazer um preto e branco. Vou pular para essa parte e mostrar o resultado final. Faremos renderização em seu próprio vídeo. Eu não quero fazer este vídeo muito longo. Magia. Eu fui e renderizei esses dois e você pode ver que há uma versão cinza e uma versão não-cinza. Você pode ver aqui, esta é uma diferença significativa de tamanho de arquivo. Agora, você pode ser como, “Isso é apenas como dois megabytes em um pouco.” Quando se trata de vídeo de fundo, pouco tempo é o nosso inimigo. Se você vai em tons de cinza, obviamente você não vai em escala de cinza apenas por causa do tamanho do arquivo, mas sabe que há uma ramificação. Se você diminuir as cores, o tamanho do arquivo se tornará menor. Ótima. De volta à Premiere, vou colocar minha saturação de volta para 100 e vou fechar a correção básica. Este é um chamado criativo, e isso pode ser interessante. Consegue ver criativo? Veja esta pequena flecha aqui. Eu posso clicar nisso e ele vai passar e me dar uma pequena idéia do que isso vai fazer. O que posso fazer é clicar nele. Você verá isso aplicado ao meu vídeo. Isso lhe dá aquele visual de verão solarizado. Parece coisas de estilo Instagram, ou apenas mencionou perfis de câmera. Tem algumas coisas legais aqui. Vou voltar e desligar meus olhares. Não vamos passar por tudo aqui. Se você quiser passar por muito mais vídeo de correção, eu tenho um vídeo sobre os efeitos após e Premiere para calibração. Mas neste caso, a última coisa que quero mostrar que é muito legal, todo mundo ama, é um pouco de uma vinheta. vinheta é a coisa gelada do lado de fora, claro que isto. Temos que abaixá-lo. Se você levantá-lo, você ganha uma vinheta branca e ninguém quer uma vinheta branca. Vou abaixar isso e você pode ver essa cobertura do lado de fora. Isso só faz parecer um filme especial aqui. Você pode brincar com um monte de coisas diferentes para torná-lo mais ou menos aparente, mas vinhetas são muito legal. Sim, está tudo bem. Ligue e desligue o carrapato aqui, você pode ver o que ele fez? Legal. Isso é uma vinheta. A última coisa interessante que podemos fazer é queremos assistir isso porque se eu tiver digitado acima disso, você pode imaginar como, vamos dar uma olhada em alguns desses outros vídeos. Este aqui, Barrel funciona o suficiente. Você pode ver que está se perdendo um pouco no fundo, mas não o suficiente. Eu diria que está tudo bem, mas você começa a olhar para este aqui. Isso parece bom apenas porque a imagem de fundo, onde o vídeo de fundo neste caso foi embotada de volta, os brancos foram removidos. O mesmo com este aqui é um pouco diferente. Ainda está sendo embotada, mas não uma quantidade enorme, mas esse tipo aqui é um pouco ilegível, você poderia argumentar. Este aqui foi definitivamente encolhido de volta. Vamos entrar em um presente. O mesmo para este aqui, mas eles fizeram isso, em vez de preto, eles fizeram isso com amarelo. Vamos fazer isso. O que eu vou fazer é fechar, vou clicar mouse em Lumetri e dizer fechar painel. Adeus. O que eu gostaria de fazer é, eu vou arrastar isso para cima. Na verdade, eu não sei por que isso está preso lá. A maneira mais fácil de fazer isso é criar algo chamado um arquivo, novo e vamos usar essa coisa chamada um fosco de cor. Agora, uma cor fosca é apenas uma grande caixa colorida. Vai coincidir com as configurações de vídeo. No nosso caso, é 1080 por 1920. Ele vai adivinhar exatamente o tamanho do seu vídeo para que você não precise alterá-lo. Vamos clicar em “ok”. Não importa se os seus são diferentes. Vamos alterar os tamanhos dos arquivos mais tarde. Clique em OK. Escolha uma fonte de cor. No nosso caso, faremos a versão preta. Clique em OK. Vou dar-lhe um nome. A cor fosca não faz muito sentido. Vamos chamar isso de capa preta. Cobrir. Clique em “Ok” e nada acontece. Acaba em seu projeto. No momento, estamos em efeitos. Você pode alternar entre essas coisas. É um pouco difícil de conseguir, sobre este projeto. Se não conseguir chegar lá facilmente, pule a janela. Há aquele projeto que vai ligar e desligar. Estes são os meus vídeos. Você pode ver aqui, aqui está minha capa preta, e o que você faz é arrastá-los para fora. Vou enfiá-los bem no início. No momento, cobre tudo, e depois vou estendê-los. Ele cobre a coisa toda e, em seguida, apenas diminui a opacidade, e é assim que lavamos o fundo. Vamos selecionar na sua linha do tempo aqui em cima em Opacidade, mais baixo para baixo. Então você só tem que decidir o quão escuro precisa ser. Dependerá da sua imagem e do que passar por cima, se você estiver usando sombras no texto e no HTML. Você pode ter que voltar e experimentar um pouco com isso, mas é assim que você faz com que ele seja colorido como este. Agora, se você quer que ele seja amarelo como este aqui, nós fazemos a mesma coisa. Mas em vez de ser um negro, você vê o globo ocular aqui? Isso desliga a camada preta. Eu poderia apagá-lo, mas eu vou usar isso em um segundo então eu vou deixá-lo lá. Então o que queremos fazer é fazer outro, Arquivo, Novo, e vamos para Comentário, mesmo tamanho. Agora você pode obviamente adivinhá-los. Tenho uma cor específica que estou usando para o meu site. Deixe-me mostrar-lhe um pequeno truque. O que eu tenho é que eu tenho meu photoshop Mockup que eu usei para criar o design para isso e assistir isso. Posso mudar a Premiere para o outro lado e ver isto. Vê este conta-gotas? Esta é uma das amostras que eu tenho usado, ou eu poderia movê-lo para o outro lado. Na verdade, eu posso usar o conta-gotas aqui e passar e dizer para escolher o vermelho e escolher todas essas cores. Essa é a amostra que eu quero usar. Clique em “Ok”, truque sorrateiro. Vou chamar esta de capa verde, e posso trazê-la de volta. Você pode ter o logotipo no fundo ou algo assim, ou você pode saber o número hexadecimal, você apenas digitá-lo. Lembre-se, está aqui, capa verde. Vou enfiá-los por cima, e vou esticá-los para fora. Vai cobri-lo completamente, depois vou diminuir a opacidade. Agora o que você vai notar é que está tudo bem e parece meio que como eu quero, e é provavelmente o que eu fiz aqui, apenas despejá-lo por cima. Mas para torná-lo um pouco mais rico e mais de uma coisa tonal, eu quero fazer duas coisas. Quero usar o preto e o verde, e acho que fica melhor. Você pode discordar, mas eu vou ligar este. Você pode ver dentro e fora? Ainda está verde, mas é achatado um pouco mais, então você pode usar um deles. Gosto de usar dois deles. Quão escuro deve ser? Novamente, depende do que você quer fazer. Ótima. Comece pelo início, joga e, eventualmente, chega ao fim. Você pode ver em vez de mergulhar para preto, ele está mergulhando para aquele verde. Se eu quisesse que fosse preto, eu poderia pegar esses caras, copiá-los e colá-los, e colocá-los nesta parte de cima estava aqui, e então nós vamos mergulhar em preto real, mas eu estou feliz que ele mergulhe naquele verde. Acho que o preto pode ser uma grande mudança óbvia. Ótima. Então vai ser isso em termos de colorir e texturizar. O que eu vou fazer neste tutorial é eu vou estar fazendo um fundo completo como este, mas eu também vou fazer mais de um estilo letterbox onde é apenas uma fatia, que vai ser apenas para uma caixa de herói ou apenas um dos div. Vou te mostrar rápido. É isto aqui. Você pode ver que eu estou usando esta caixa de herói de um tutorial anterior, e eu colocá-lo aqui. Preciso fazer algumas coisas um pouco diferente. Uma delas é que vou usar o preto em vez do verde. Ele vai mergulhar até as extremidades, e também vai ser um pouco embaçado no fundo para que eu pudesse colocar o tipo sobre o topo. Se você quiser apenas fazer o plano de fundo completo, você pode pular para o resto deste tutorial. Para o resto de nós, vamos voltar para a Premiere. Para fazer isso, o que vamos fazer é que vocês podem ver que essas são as minhas capas, este é o vídeo em que estamos. Este é o exemplo de vídeo que eu trouxe para você, eu vou apagar esse. O que vou fazer para deixar mais claro é que vou mudar o nome deste. Eles têm o mesmo nome, então eu vou clicar duas vezes nele, e eu vou chamar este de minha sequência completa. Na verdade, quando você está nomeando estes, nós vamos nomeá-los corretamente aqui porque quando ele exporta, vai usar este nome da sequência para dar-lhe o nome do arquivo. Porque estamos usando coisas do site, vamos ter que usar coisas especiais. Então vamos chamar isso de um designer de fundo completo. Adorável. O que vamos fazer é que ainda é um vídeo que vai dentro dele. Então eu vou duplicá-lo, você pode clicar com o botão direito e ir até Duplicar. Eu tenho dois deles agora. O segundo aqui, vou mudar o nome. Este vai ser chamado ainda designer-, e este vai ser caixa de correio. Vamos chamá-lo de caixa de herói. Letterbox só porque vai ser uma coisa longa e fina. [ inaudível] deixar passar, você provavelmente entendeu isso. Em termos de caixa de heróis, no momento, eles são exatamente os mesmos. Veja isto, este meu designer cheio. Pouco antes de começarmos a nomear, coloquei hífens aqui. Se você colocar espaços, você causará problemas ao tentar vincular a ele em seu site. Então fique longe dos espaços. Use sublinhados ou hífens. Eu tenho esse histórico completo. Você pode ver que esta é a minha sequência aqui chamada fundo completo. Se eu clicar duas vezes neste aqui, você pode ver que eu tenho uma caixa de herói 1. Tem aquele cara, tem aquele cara, e tem aquele cara, e tem aquele cara. Eles são exatamente os mesmos no momento, mas eu posso fazer mudanças em um. Vou trabalhar nesta caixa de heróis agora, e em particular, vou diminuir o tamanho. Primeiro de tudo, vou apagar esta capa verde. Agora será mais fácil saber que é esse, e esse é aquele. Então o que acontece no Premiere é que se você estiver trabalhando em muitos arquivos, digamos que você precisa de três ou quatro versões diferentes, é que você pode continuar duplicando a sequência e no final, você pode dizer exportar todas as minhas sequências para mim e ele irá renderizar todos ao mesmo tempo. Mas eles são como pequenos trabalhos separados agora. Eu quero que ele seja preto, eu quero que ele esteja embaçado, então eu vou selecionar no meu vídeo. Vou encontrar Lumetri Color. Chega de Lumetri Color. Na verdade, não os usei. Vou ao meu “Effects”. Onde estão os Efeitos? Temos os efeitos da janela. Vou encontrar o Borrão, lembre-se que usamos o Borrão Gaussiano. Aumente, quanto? Não tenho certeza. Há uma capa preta aqui, vou torná-la um pouco mais escura. Legal. Agora eu quero cortar isso, e você faz isso aqui, volta ao seu painel de projeto. Lá está ele no projeto da janela, e eu posso clicar com o botão direito do mouse nesse cara, caixa de herói. Entre aqui e na parte inferior aqui, Configurações de Sequência. Agora, ignore este aqui em baixo. Ele parece o óbvio. Não toque nele. É este aqui, o tamanho do quadro. Não se preocupe com sua saída final agora vamos fazer isso mais tarde, é apenas sobre a relação agora. Você só está olhando para a altura versus largura. Podemos escalar para cima e para baixo e jogar com tamanhos de arquivos no processo de exportação. Então mantenha-o o mais alto que puder no momento e nós o tornaremos fisicamente menor mais tarde, exceto pelo corte. Então horizontal é 1080 em todo o topo aqui. Se estamos lidando com vídeo, você não pode chamá-lo de 1.080 por algum motivo, tem que ser 1080 só porque é legal. Quão alto vai ser, 500? Vamos experimentar. Tenho uma noção de como vai parecer, lembre-se, nesta coisa aqui. Mas o que você quer fazer é não torná-lo perfeito, não tirar uma captura de tela e tentar calcular a proporção porque, veja isso, ele vai ser responsivo. Isso vai mudar dependendo de muitas coisas, então você só vai chegar perto do que você quer. Vou clicar em “Ok” no 500. Vai apagar todos os meus ficheiros de pré-visualização, tudo bem. Você pode ver aqui agora é que um pouco de um surto, mas é muito mais o meu tipo de estilo. Você pode ver que eu cortei todas as boas filmagens. Então o que eu gostaria de fazer é eu gostaria de selecioná-lo, e arrastá-lo pela janela, surpreendentemente difícil. É mais fácil fazê-lo aqui em posição de movimento neste aqui. Você pode ver que eu posso continuar arrastando até que eu possa ver o fundo disso. Agora, uma das coisas com o Borrão Gaussiano, que eu não mencionei antes, você pode ver que ele está fazendo isso até as bordas e eles estão ficando todo gelado, apenas coloca como uma gosma em torno das bordas e geada e desfocá-lo. Há um aqui sob o Borrão Gaussiano, ele diz repetir pixels de borda, e ele vai ficar direto na borda lá e isso é mais o que eu quero. Então eu vou abaixá-los. Aí está, ele está machucado. Agora, quando eu jogo, você pode ver que eu posso passar. Espere um momento. Consegues ver isto? Você vai notar que o meu vai para cima e para baixo e você pode ter sido verificando isso antes e vendo, eu não notei isso até agora, é que sob minha opacidade, se eu girar isso para baixo, há realmente este pequeno cronômetro, foi iniciado. Agora, quando estou movendo minha cabeça de reprodução, significa que posso levantá-la. Você pode ver que começamos lá, vamos junto e então talvez torná-lo totalmente preto lá. Estes pequenos quadros-chave, não é o que eu quero fazer. Isso só significa que agora, é que você acabou de ter a pior introdução ao keyframe. Não vamos fazer isso neste curso porque há muito o que fazer. Vou apagar esses caras e desligar isso por padrão. Agora o que significa é que quando eu selecionar na capa preta, eu posso apenas selecioná-lo e dizer que você é aquela cor lá. Os quadros-chave são confusos e não o que precisamos no momento. Ótima. Ele joga junto, embaçado, preto, e é a forma certa. Por que cortamos o topo e o fundo? Um par de razões é que ele vai tornar mais fácil posicionar naquela tag div. A outra razão é que muitas vezes este topo e este fundo nunca vão ser vistos no vídeo. É apenas desperdiçar muito bom tamanho de arquivo, então você quer cortá-los fora. Temos duas versões, temos o fundo completo do designer, e temos esta aqui. Vamos passar para o próximo vídeo e provavelmente a parte mais importante desta edição de vídeo, é obter o tamanho do arquivo tão boa qualidade quanto pudermos para alguns tamanhos de arquivo super pequenos. 7. 07 como fazer seu tamanho de arquivo de fundo de: Oi lá. Neste vídeo, é tudo sobre escolher o formato certo para o nosso vídeo e obter o tamanho do arquivo super-duper pequeno. O que vamos fazer neste vídeo é fazer um grupo de vídeos como este, muitas versões diferentes para que possamos ver as diferenças no tamanho do arquivo, e vamos olhar para este. Este, 10 megabytes, e então cai de um penhasco para 1,7 e ainda parece bom, prometo. Vamos fazer isso agora. Quão grande é grande? Um megabyte é realmente pequeno e bom, e 10 megabytes está ficando muito grande. Qualquer coisa sobre isso, você teria que ter uma boa explicação para me convencer que você precisava de um vídeo de fundo tão longo. A menos que seja o seu produto real e ele realmente está fazendo coisas principalmente esses vídeos de fundo são gráficos de suporte e um tamanho de arquivo realmente grande vai fazer esse site carregar muito lentamente e que em termos de experiência do usuário é ruim. Tente obter o mais pequeno que puder. Eu tento mantê-lo em torno do nível de dois megabytes. Eu vi coisas como se você pulasse para o site do PayPal, como aqui, você pode ver seu plano de fundo é, eles estão usando um tamanho de arquivo grande e é muito longo e se você escolher através de seu site, você pode ver que é cerca de 10 megabytes. Eles decidiram que esta página em particular vale 10 megabytes para eles. Aqui no Premiere, vamos começar a exportar essa coisa agora, e precisamos exportar alguns formatos de arquivo diferentes. Os principais são ou o grande é um MP4, é o mais utilizável, facilmente compartilhado. Os outros que você vai ter que fazer é um chamado WebM. É W-E-B e M, então WebM. O Google fez esse, e no momento é o formato de vídeo de fallback mais comum. Há outros como o Ogg, O-G-G ou OGV. Isso era para ser o padrão, mas no momento, ninguém está usando. Todo mundo está usando WebM em vez disso. Meu conselho para você no momento em 2017 é que MP4s seguido por um WebM, os dois formatos que vamos precisar. O que vamos fazer é exportar esta versão completa em segundo plano e vamos fazer esta também, mas vamos focar este vídeo em fazer a versão em segundo plano. As mesmas regras se aplicam a ambos. Quando exportamos um vídeo, precisamos acessar seu ControlM ou CommandM em um Mac. É o File, onde está? Exportação e seus meios de comunicação. Isto irá exportá-lo a partir deste documento. Agora, se está acinzentado e você não pode ver, é apagado como estes significa que você teria um selecionado porque não podemos ter sequências diferentes. Se você tem algo selecionado aqui em cima, ele não sabe qual deles você quer dizer. Você vai para Arquivo, Exportar e você vai, porque ele não sabe qual deles você quer dizer, então você vai clicar aqui e você pode dizer que você clicou nele, ver a linha azul ao redor do lado de fora que indica, quero dizer este cara ou você pode selecioná-los na janela do projeto também. No CommandM, isso abrirá. Agora você pode usar esta janela aqui, está tudo bem. O que vamos fazer é clicar em “Q”, e podemos chegar exatamente à mesma tela no Adobe Media Encoder. Se eu clicar em “Exportar”, esse pequeno botão lá, ele vai sair e exportá-lo e eu vou ter um MP4 quando eu terminar, mas o que eu gosto de fazer é passá-lo para enfileirá-lo e isso apenas o coloca em fila em algo chamado Adobe Media Encoder. Ele vai ter a mesma coisa, que é se eu clicar na fonte WebM eu estou de volta exatamente à mesma tela. Realmente não importa se você ajustá-lo diretamente do Premiere ou você faz isso aqui no Media Encoder, mas você verá algumas fotos para este, ele vai cancelar. O que acontece é que o Adobe Media Encoder se parece isso e o adiciona a essa fila aqui e o que acontece é que eu posso enfileirar muitas versões diferentes. Minha versão de caixa de lixo, e eu tenho 10 tamanhos diferentes que eu quero fazer, é que eles podem enfileirá-los aqui e você pode continuar trabalhando no Premiere. Essa é a coisa legal do Media Encoder é que se você clicar em “Exportar diretamente do Premiere”, Premiere não poderá ser usado até que esteja concluído. Este aqui, isto funciona bem no fundo. O que vamos fazer é começar a olhar para tamanhos de arquivos versus comparações. O que vamos fazer é olhar os formatos primeiro. Você quer um MP4, e naturalmente você quer ir para este MPEG4. Se você clicar sobre ele, o que você vai encontrar é, consiste um 3gp. Eu acho que como um telefone antigo e formatos de arquivo. Esse não é o que queremos. Você quer este chamado H.264. Isso você pode ver aqui? Dá-te um MP4 e este é o codec que temos de usar quando colocamos coisas online. Agora, as grandes coisas que precisamos mudar é essa fonte de correspondência vai ser exatamente como você baixou, e vai nos dar um tamanho de arquivo realmente grande, mas vamos usá-lo em termos de comparação. Se você baixou algo do Adobe stock e seu 4K, que é apenas quatro vezes o padrão HD, igual 4K é, ele tem que ser enorme. Precisamos fazer algumas mudanças. Agora, se você está assistindo a este vídeo porque você tem um trabalho a fazer e seu vencimento em cerca de 10 minutos, pule este vídeo, clique em “Corresponder fonte”, vá para onde ele diz predefinições, e vá para este que diz predefinição de importação, e, em seguida, vá e encontre os que eu fiz para você. Em seus arquivos de exercícios e há um aqui chamado de predefinições de codificação. O primeiro que você tem que trazer é neste caso, ele vai ser MP4, clique nele, clique em “Abrir”, eu já tenho um, então eu vou clicar em “Cancelar” e ele vai aparecer, você pode ver que isso é predefinido? Ele aparecerá nesta pequena lista aqui, clique nela, clique em “Ok”, clique em “Jogar”, e você terá algo bem pequeno e funcionará para o seu trabalho. Essa é a minha predefinição de trapaça, mas para o resto de nós, precisamos aprender um pouco sobre isso apenas para que possamos ajustar nossos tamanhos de arquivo de acordo com nosso vídeo. Vamos deixar este como principal. Alta taxa de bits. O que vamos fazer é selecioná-lo e você vê que esta é uma opção que diz duplicar, esta é uma boa maneira. Isso vai exportar o mesmo vídeo, mas em configurações diferentes. O que eu vou fazer é clicar onde ele diz “Match Source” e obter esta grande janela aqui, e o que eu vou mostrar agora é como obter o tamanho do arquivo super pequeno. O primeiro e mais fácil é o áudio. Se eu desligar o áudio, ele vai diminuir o tamanho do arquivo e vai nos impedir de ter que fazê-lo mais tarde quando se trata de nossa codificação, nós vamos ter que apertar o botão mudo, há uma opção mudo no código para torná-lo mudo, mas não precisaremos porque não haveria áudio de exportação. Para ser honesto, você realmente não quer áudio em segundo plano. Odeio quando um site é iniciado com áudio reproduzido automaticamente em segundo plano. Estou procurando o botão de pausa. Se não houver um botão de pausa, é um site de adeus. O que vamos fazer é apenas fazer alguns exemplos. Vamos chamar este, é o mesmo nome. Onde vou colocá-la? Eu vou colocá-lo na minha área de trabalho, sob meus vídeos de exemplo, e este vai ser desenhador de fundo completo e este vai ser chamado, sem áudio. Apenas como uma comparação, e eu vou clicar em “Ok” então eu vou selecioná-los, duplicá-los, e nós vamos fazer alguns outros bits. Clique em “Personalizado”. Não temos áudio. Vamos ver o grande. O maior para reduzir o tamanho do arquivo está aqui embaixo na guia de vídeo, role para baixo, role para baixo. Este baixinho aqui, as configurações de taxa de bits vai devastar os tamanhos dos arquivos. No momento, é tudo o que é chamado de alta qualidade. Está definido para 10 e 12. Quanto mais baixo você for, menor a qualidade, mas quanto menor o tamanho do arquivo, e o que você vai descobrir é que é realmente difícil dizer a diferença entre digamos 10 e para baixo em algo como um. Não é HD full K, qualidade incrível mais, mas um pouco show. Na tela do seu laptop, você não notará a diferença. O tamanho do arquivo é de 15 megabytes. Esta é uma estimativa. Às vezes pode ser descontroladamente, então não use isso como seu medidor absoluto, mas vamos olhar para isso. A primeira coisa que precisamos fazer é definir uma taxa de bits variável de 1 passagem. Apenas significa, taxa de bits constante significa que tudo vai ser definido como 10. Não verifica, não vai para cima e para baixo. Você clica na taxa de bits personalizada e você apenas configurá-lo para um e ele não se importa, ele vai ser um todo o caminho através, mas se você vai para taxa de bits variável, ele vai passar por e dizer, é padrão para este antes de lembrar que foi às 10 e 12. Significa que vai subir e descer dependendo do que está na tela. Pedaços de vídeo muito detalhados. Eu vou usar a taxa de bits mais alta, alta qualidade, e as coisas que não estão se movendo apenas obter a taxa de bits mais baixa porque ele não precisa dele e que pode reduzir drasticamente o tamanho do seu arquivo. Em termos dessa codificação, 1 passe significa que passa uma vez e verifica tudo e diz : “Sim, você está alto, você está baixo.” Esta coisa aqui diz 2 passes, faz isso uma vez, ele volta, e faz de novo, e o que você acaba com tamanhos de arquivo menores e melhor qualidade. Eu não sei por que você padrão para 1 passe. Demora mais tempo, essa é a grande coisa. Se você queimar essa coisa bem rápido, você pode colocá-lo em uma passagem, mas não há nenhum ponto realmente. Agora a taxa de bits alvo, o que deveria ser? É o mais baixo que você pode ir e você pode fazer alguns testes com o seu vídeo. Se você tem vídeo super incrível de um site da biblioteca de ações, ele provavelmente vai ficar muito baixo e olhar muito bom ainda. Se você mesmo filmou no seu celular ruim, quanto mais baixo você fizer, vai parecer muito ruim. No nosso caso, eu praticamente sempre digitar um e 1,5. Vai atingir um, mas se precisar, vai subir para 1,5. As alturas vertiginosas. Só lhe dá um pouco de espaço de manobra. Você pode ver no fundo aqui um megabyte, que é números mágicos, e é tudo a ver com esta taxa de bits. Vamos clicar, dê-lhe um nome. Não há áudio e este não vai ser nenhum áudio e o que é este? Taxa de bits baixa. Ótima. Vamos clicar em “Ok”. A maior parte desse trabalho é feito na taxa de bits. O que eu vou fazer é mostrar algumas outras coisinhas só para ir mais longe. Você pode estar lidando com aquele vídeo de dois minutos realmente grande e longo e você vai ter que tentar e obter o máximo que puder fora disso, então eu vou duplicá-lo novamente. Você clica em “Personalizado”. Neste caso, o áudio está desligado, minha taxa de bits já está baixa, vou fazer algumas coisas. Um deles é a taxa de quadros. O que é taxa de quadros? Seu vídeo é, na verdade, apenas uma pilha de imagens estáticas e se eles piscam na sua frente rápido o suficiente, o olho humano e o cérebro humano acreditam que eles são uma ação ao vivo, mas eles não são. Eles não são coisas do mundo real, são apenas um monte de imagens como um flip book. Vinte e cinco quadros para o segundo, estamos todos em linha de gancho e [inaudível] convencidos de que são imagens em movimento, mas são apenas muitos flashes de quadros separados. Quanto mais baixo você for, mais salta fica. Quanto mais alto você vai, mais suave fica. Digamos, meu GoPro filma, eu acho, em 50 ou 60 quadros por segundo, e você pode obter 1.000 quadros por segundo matriz de tempo de bala olhando as coisas fora do escopo deste, obviamente, mas 25 quadros por segundo é o que isso foi definido como. Você pode ir mais baixo. Agora, se você descer para 10, é razoavelmente perceptível. Eu acho um bom compromisso aos 15. No meu caso, o nosso vídeo é bastante básico. Tão grande e verde, veja isso. Devia ter tido isto há muito tempo. Você pode ver que eu deslizei isso junto porque ele realmente me dá uma pequena visualização de onde eu estou no meu vídeo. O que acontece é que quando eu mudo coisas em, digamos, minhas configurações de taxa de bits, isso será atualizado. É uma explicação razoavelmente boa disso. Vou definir isto para Fit para poder ver tudo. Quinze quadros por segundo, duvido que você perceba isso muito, especialmente se for de fundo e estiver desfocado, tudo bem. Você pode descer para 10, dar um cheque. Vou clicar neste. Este não vai ser áudio, baixa taxa de bits, vai ser um nome de arquivo muito longo. Este vai ser taxa de quadros 15. Ótima. Vamos clicar em “Ok”. O que mais podemos fazer? Vamos clicar neste, então duplique-os, clique nesse cara. O próximo que vamos fazer é brincar com a nossa altura e largura. Vamos talvez mudar a altura deste. Faremos 500 pixels de altura. O que eu quero dizer com isso é sob a aba Vídeo, no topo aqui, ele está realmente exportando qualidade HD, e isso não é o que precisamos neste caso. Você poderia, não há nada realmente errado com isso, o único problema com isso é que a maneira que nós vamos fazer isso em código, há algo que nós vamos usar chamado a altura mínima e a largura mínima, e apenas significa que não vai ser tão sensível, vai parecer um pouco estranho. Precisa ser um pouco menor. Meu conselho aqui seria não ir Full HD. Por quê? Porque você vai ter pessoas olhando para isso em diferentes dispositivos e eles não vão ser capazes de ver este HD, por isso é tamanho de arquivo desperdiçado, página vai levar um longo tempo para carregar. O mais alto que você provavelmente quer ir é 720, que é a alta definição original, mais como definição padrão. Sete vinte de altura e essa é a largura. O que vamos fazer é descer ainda mais baixo, e você pode ver que vai caber. Vamos para 100 por cento, dá-lhe uma ideia do tamanho. Você ainda pode ver, no 720 de alta, ainda é um vídeo muito grande. Então eu vou pegar isso aqui e eu vou mudar isso para 500. Agora, é em um tamanho pequeno, mas ele vai ser capaz de esticar e expandir para caber no fundo, e eu acho que para fundo completo funciona para mim. O tamanho dos arquivos, é bastante vago aqui, ainda é um megabyte. Quanto é que perdemos? Veremos quando formos exportar este. Alterar o tamanho aqui não é apenas tornar o tamanho do arquivo menor, é apenas a técnica que temos que usar no momento em código. Alturas mínimas e larguras para cima 100 por cento. Vamos olhar para ele mais tarde, mas você precisa torná-lo pequeno o suficiente para ser capaz de ser usado. Agora, há algumas outras coisas que você pode começar a fazer aqui. Você pode começar a brincar com enquadramento chave e há algumas outras coisas, e eles estão ficando muito nerds, e você pode jogá-los em torno de perfis, níveis e ordem de campo. Agora, isso vai ser em termos de como obter o tamanho do arquivo menor. Há outras coisas lá em baixo, como taxas de quadros, carregamento progressivo. Isso é entrar naquela minúcia super nerd, e nós não vamos passar por isso neste curso porque você não vai ver muita diferença. Haveria pessoas de vídeo lá fora zombando de mim dizendo como eu ouso, mas para mim, eu descobri que esses são os grandes, esses são os bons. Vamos clicar em “Ok”. Agora, temos todos esses vídeos diferentes. O que você provavelmente vai fazer é pular para este último. Isto é o que a minha predefinição definiu. Então, se você quiser usar minha predefinição, ele vai saltar para este 500, 15 quadros, taxa de bits baixa. Trabalho feito. Eu coloquei todas essas na fila apenas para nos mostrar tamanho de arquivo e comparação de qualidade. É por isso que eu amo ser mais difícil propina. Aperte o botão “Play” e ele simplesmente escolhe através de todos eles. Na verdade, está tentando renderizá-los todos ao mesmo tempo. Se eu estava fazendo isso em premium e eu apertei o botão “Exportar”, Eu tenho que fazer todos eles um de cada vez que não é um grande negócio, eles não são super longo, mas você pode ver este benefício. Se você está trabalhando em um vídeo muito longo, eu amo [inaudível] você pode sair, tomar um café, voltar. Se é super longo e você tem um computador realmente ruim, você pode ter que voltar, você pode ter que ir para a cama e acordar de manhã e o avaliador ainda pode estar funcionando. Aconteceu-me muito. Pelo poder da Internet, vamos fazer isso ampliar. Pronta? Um, dois, três, vá, zoom. Isso provavelmente levou cerca de dois minutos do meu lado. Agora, vamos ver quais arquivos foram criados. Vamos esquecer esses dois no fundo aqui, eu vou realmente abri-los. Estas são as coisas que foram feitas. Vamos encomendá-los em tamanho de arquivo. Na verdade, vou trazer esses caras de volta porque era o original. Este sou eu a torná-lo cinzento. Este é um bom teste. Sim, esse é o vídeo original. Dezoito megabytes, tornando-o cinza, estamos removendo parte da cor, 16. Então fizemos isso sem áudio. Agora, o áudio não faz esse grande salto. Uma das outras coisas que fizemos foi torná-la bastante verde escuro. Essa foi uma das coisas que fizemos, então perdemos um pouco do tamanho do arquivo lá. São algumas coisas extras. Mas depois baixamos a taxa de bits e essa é a grande mudança. Você pode ver aqui? Você pode mexer com taxas de quadros e outras coisas, mas realmente, é tudo sobre essa taxa de bits indo de 10 e 12 para 1 e 1,5. Você pode ver um tamanho de arquivo super gerenciável agora. Agora, em termos de qualidade, vamos dar uma olhada. Na verdade, o que vamos fazer é abrir os dois, vou enfiá-los lado a lado. Não é um exemplo super científico, mas você vai ter uma noção desses dois. Por aqui, vamos colocar este aqui no topo. Este é o de alta qualidade sem áudio. Vamos dar uma olhadinha. Eu sei que nós ampliamos um pouco e não é um exemplo justo, mas você vai ter que confiar em mim, eles parecem bem, especialmente para uma imagem de fundo e especialmente porque nós não estamos procurando super alta definição, nós estamos procurando para o tempo de carregamento da página. Hey, ele tem que olhar bom, não terrível, mas é tudo sobre o tamanho do arquivo e você pode ver taxa de bits é bom. Taxa de quadros, baixou um pouco mais. Então, a taxa de quadros baixou para 15 segundos. Vamos dar uma olhada entre esses dois. Apenas dê uma olhada. Você pode dizer que é um pouco mais nervoso, mas meu caso, porque meu vídeo, não há muita coisa acontecendo, a garota está apenas escrevendo um pouco no bloco de notas. Então são 15, está tudo bem para mim. Além disso, às vezes, esse olhar pode ser muito legal. Você pode chegar a 10 quadros, e ele tem aquela coisa turva de grão de filme agitado, então você obtém economia de tamanho de arquivo e parece legal. Você pode ver aqui embaixo, os pixels reais tornando os pixels muito menores, também não fez muito para o tamanho do arquivo. Então, por que vamos tão pequeno? É para que possamos torná-lo responsivo mais tarde. Mais tarde, em alguns anos, há um novo pedaço de tag que sai e eu vou falar sobre isso mais tarde, que vai torná-lo totalmente responsivo, mas no momento, estamos presos com min-height, min-width, então precisamos para torná-lo um pouco menor que possamos realmente querer. Legal. Estamos quase terminando. Nós fizemos nossos MP4s, o que vamos fazer é cortar este vídeo aqui e vamos saltar para o próximo usando o formato WebM. Não muito tempo, mas vou cortar isso aqui para que este vídeo não seja epicamente longo. Muito bem, vemo-nos na próxima. 8. 08 Como fazer um arquivo de vídeo de WebM no Adobe Media Encoder e Premiere Pro e After Effects: Ei caras. Neste vídeo, o que vamos fazer é olhar para mostrar como instalar este formato WebM. Você provavelmente vai notar que ele não está realmente instalado por padrão, então nós vamos instalar um plugin e nós vamos fazê-lo, passar pelas configurações para torná-lo realmente pequeno e explorá-lo, e nós vamos acabar com este cara adorável; .webm e veja como ele é pequeno. Vamos fazer isso. Por que precisamos de um formato WebM? MP4s cobrem praticamente todos os navegadores, exceto alguns casos de uso, e esses casos de uso podem ser preenchidos pelo formato WebM. Agora, se você tivesse me perguntado alguns anos atrás, que formato de vídeo deveríamos usar? Teria sido OGG; o formato OGG. Agora, isso mudou. Agora o WebM é o formato a ser usado, então, se você estiver assistindo a este vídeo, é 2017 agora. Se for 2024, obviamente haverá um formato de vídeo diferente, mas então basta ir e verificar o que é comum, mas agora o formato WebM é bom para o de volta. O Google faz ou pelo menos patrocina o desenvolvimento do mesmo. É um formato de código aberto, então precisamos ir e torná-lo, mas a Adobe tornou isso um pouco difícil de fazer. Tornei isso um pouco mais fácil para você, então vamos lá e fazer isso. Por que é difícil? É porque o formato real não está incorporado ao Adobe Media Encoder ou ao Dreamweaver ou ao After Effects, não o instalamos. A coisa legal sobre isso é que há um plugin gratuito. Haverá um link na tela aqui. Aqui está. Ir para os links é ainda mais fácil. É um lugar aqui em Fnord e então eu ganho um WebM. Transferir a versão do Mac ou do Windows. Agora eu incluí o plugin. Você pode vê-lo aqui, está em seus arquivos de exercícios, é o plugin WebM. Pode estar ficando um pouco velho. Você pode querer ir para o site e baixá-lo caso há uma versão mais recente, mas eu incluí lá apenas para torná-lo útil para você. O que você precisa fazer é baixá-lo ou clicar aqui, e você apenas executá-lo. Você pode ver aqui é a minha versão DMG, e você executar isso, esse é o meu Mac. Esta versão MSI é para o seu PC. Clique duas vezes neles e eles serão instalados. O que acontecerá magicamente é que você terá que reiniciar o Premiere, After Effects ou o Media Encoder ou o que quer que esteja usando, reiniciá-lo. O que vai acontecer é que, agora, se eu for para Arquivo, Exportação, e eu for para Mídia, em Formato, há agora um chamado WebM que não estava lá antes. Clique em “WebM”. A coisa legal sobre isso é que ele é apenas um formato de arquivo diferente. Ele usa muitas das mesmas coisas. Tem altura e largura, e tem uma variável ligeiramente diferente, mas bem abaixo aqui, mas essencialmente as mesmas coisas. Agora, se você quiser chip, eu tenho uma predefinição, você pode instalar. Lembre-se a partir daqui, você vai para este dizer Import Preset e há um chamado Dans Web Video WebM Preset, então traga esse. Em vez de passar por tudo e explicar tudo de novo, é exatamente o mesmo no vídeo anterior. Se você não fez o vídeo anterior, é a versão MP4 deste. É exatamente o mesmo. Não vamos passar por tudo de novo porque era um vídeo epicamente mais longo. O que vamos fazer é, o seu provavelmente começará a ser padrão. Terá áudio, você desliga isso, muda a altura e a largura. Altere a taxa de quadros para 15 e defina a codificação. Esta é a única coisa que é um pouco diferente é o codec. Este é o novo, esse é o antigo. Eu acho que o novo é muito bom na maioria dos navegadores. Eu vou usar o mais antigo porque ele funciona em mais navegadores e o tamanho do arquivo parece muito semelhante, e a qualidade parece tão boa quanto. Agora, em termos de taxa de bits, coloque isso em mil. Foi o que descobri ser bom. Você pode ir mais baixo, você pode ir mais alto, mas aumenta ou diminui os tamanhos dos arquivos de acordo. Aqui em baixo, codificação 2-Pass muito semelhante ao MP4, e é isso. Vamos adicionar fila, vamos mudar o nome do arquivo aqui. Vou colocar este aqui. Vai entrar nos meus vídeos. Está me dando exatamente a mesma coisa, exceto que tem a extensão WebM. Clique em “Salvar”, pressione “Reproduzir”. Você pode ver que estes estão acabados, então eu vou correr de novo. Este aqui agora toca, passa e codifica. Agora o WebM leva uma eternidade para codificar. Demorou o mesmo tempo para codificar como cinco versões do MP4 como um WebM, então vamos acelerar isso novamente. Pronto, pronto, vai. Está feito. Vamos verificar o arquivo. Você pode vê-lo aqui. É ainda menor do que a nossa versão MP4. Muitas vezes você pode brincar com as configurações em MP4 e WebM. Não é como se fosse um formato de arquivo menor, são apenas as configurações que eu peguei acabaram se tornando um pequeno vídeo. O que eu descobri é que eu posso mexer com o MP4 e obtê-lo tão pequeno quanto um WebM, e tão boa qualidade. Essas pessoas que argumentariam esse ponto no entanto, mas sabem que não é apenas metade do tamanho usando WebM, é porque minhas configurações eram diferentes do que eram como paraleladas. Agora instalar o plugin é uma dor no bumbum, porque ele se sente como Adobe Media Encoder ou Premiere ou After Effects, todos eles devem ter esse recurso. O que você pode fazer é pular para este aqui e me ajudar. Vá para este é chamado Adobe.com produtos/formulário de desejos, vá para aqui e o que você pode fazer é escolher seu produto, escolher Premiere e você escrever uma pequena lista e dizer, por favor, coloque WebM. O que acontece é que os desenvolvedores obter essas listas e quem mais gritar, o topo da lista recebe esses recursos e isso é um recurso que eu quero, então vamos para a equipe. A última coisa que vamos fazer é eu vou dar a vocês, porque este é um vídeo um pouco mais curto do que os outros desta série, eu vou preenchê-lo com alguma maravilha. No Adobe Media Encoder, apenas uma pequena coisa que eu acho bastante útil é dizer que eu quero este WebM e eu vou enviá-lo para o meu site. O que acontece é que vou duplicá-lo. Quando eu entrar em Custom, nós fizemos isso antes, nós jogamos por aqui, mas veja esta opção aqui que diz Publicar. Isso pode ser muito útil. Você pode publicá-lo sua conta da Creative Cloud se estiver usando isso. Você pode simplesmente despejá-lo em sua unidade compartilhada com as pessoas e ele fica instantaneamente lá em cima assim que ele sair. Isso é muito útil quando se diz que você vai para a cama, e você renderiza tudo isso e depois eles passam horas de renderização, mas quando terminarem, eles começarão a fazer upload para a Creative Cloud. Você pode ver que ele pode carregar para sua conta Behance, ele pode ir para o Facebook. Há tantos e este é o que eu uso. FTP vai para o meu servidor web onde eu hospedo meu site, e eu apenas joguei-os em uma pasta de vídeo lá. Coloque-os no caminho remoto, no vídeo. Dias felizes, Vimeo, YouTube, que eu quero usar um pouco também. Se eu estiver enviando diretamente para o YouTube, traga isso direto para o YouTube, dias felizes. Tudo bem, é isso. Agora vamos começar a construir um site real, e realmente adicionar este material de vídeo a ele. Vamos fazer isso. 9. 09 Como obter nosso site do Dreamweaver: Olá a todos. Neste vídeo, vamos analisar e definir nossas configurações do Dreamweaver para que possamos começar a criar nosso site. Então, a primeira coisa que precisamos fazer é deixar nossos espaços de trabalho iguais, para que você possa acompanhar. Você pode trabalhar no padrão, tudo bem. Vou trabalhar num novo chamado “desenvolvedor”. Só vou clicar nisso. É só uma versão mais limpa. Nós vamos trabalhar mais em código neste vídeo, em tutoriais anteriores eu trabalho muito mais no padrão e isso é bom, mas este aqui, vamos mudar para desenvolvedor e trabalhar neste. Agora, antes de começarmos qualquer projeto, precisávamos encontrar nosso site. Então vá para o site, vá para um novo site. Tudo o que isso faz é dizer ao Dreamweaver onde você manterá os arquivos desse projeto. Ok, então o nome do meu site, ok, eu vou dar um nome a ele. Este vai ser chamado “Traga o Seu Laptop Design Agency”. Onde vou guardá-lo? É aqui que fica o local. Vamos clicar em “Procurar”. Vou colocar o meu na minha área de trabalho. Vou fazer uma nova pasta e vou chamar isso de BYOL. Este vai ser o site. Clique em Criar. Vamos clicar em Escolher. Uma coisa que você pode fazer quando você está definindo um site, é realmente útil, você vai para configurações avançadas e, em seguida, onde ele diz pasta imagens padrão, clique em navegar. Você pode ver que é padrão para dentro daquela pasta que acabamos de fazer, e dentro daqui vamos colocar imagens. Só significa que se eu clicar em escolher, significa que sempre que eu pegar uma imagem, digamos, a partir dos arquivos de exercícios nesta classe, vai pegá-lo fora do ar e colocá-lo na pasta certa e não tem que me perguntar o tempo todo. Ele só sabe fazendo isso. Agora não vamos passar por servidores sentados agora e conectar-se à rede. Faremos isso no vídeo final quando formos publicar. Mas, por enquanto, isto é tudo o que precisamos fazer para nos prepararmos. Vamos clicar em Salvar. Na minha área de trabalho aqui, se eu tiver uma olhada rápida, há minha área de trabalho, há a pasta que eu criei. Dentro dela não há nada, exceto uma pasta vazia para imagens. Ótima. 10. 10 Como adicionar um vídeo de fundo completo para um site usando o Dreamweaver: Olá a todos. Neste vídeo, vamos colocar um vídeo e fazê-lo fazer isso. Olhe para ele. Esse é o objetivo deste vídeo. Vamos entrar no Dreamweaver e começar. A primeira coisa a fazer é criar uma página. Vamos até Arquivo, vamos para Novo, e clique em “HTML. Não vamos usar o Bootstrap neste caso, vamos configurá-lo como Nenhum. Vamos dar um título ao nosso documento. Esta vai ser a Agência de Design de Laptop Traga Seu Próprio. HTML5. Vamos clicar em “Criar”. A próxima coisa a fazer é salvar o arquivo, então vamos para o arquivo e salvar. É definido como padrão para a pasta direita. Esta minha pasta do site BYOL e isso vai ser homepage, então ele tem que ser chamado de índice, minúsculas i, sem espaços. Lembre-se, nossa página inicial tem que ser chamada de índice e essa é a página que é carregada primeiro em qualquer site ou páginas subsequentes pode ser chamado de qualquer coisa que você gosta, desde que não haja espaços, você tem que usar hífens ou sublinhados. Clique em “Salvar”. Você verá aqui, esta é a minha estrutura de pastas. Se você não tem, você pode ter que trabalhar para baixo. Há as minhas imagens e há o meu documento HTML. Uma olhada rápida na área de trabalho, lá está lá, minha pasta de imagens com nada nele, e lá está minha página de índice. Ótima. Atualmente, nossa página de índice não tem um lote inteiro. Vamos adicionar nosso vídeo a ele. Para adicionar uma tag de vídeo, precisamos fazê-lo ao corpo e não à cabeça. Tudo o que os usuários não vêem, mas é o que o Google usa e o navegador usa. Como este título na parte superior aqui, não vemos, ele é usado apenas na guia superior do navegador e o Google também o usa para listar seu site. Isso apenas diz que teclado e caracteres você está usando, estamos usando letras latinas. Corpo é tudo o que o usuário vê, no momento em que não há nada lá. O que vamos fazer é colocar um retorno entre os dois. Nós vamos guiá-lo junto. Nenhuma razão para a aba além de que faz com que pareça agradável e equilibra-o e torna um pouco fácil de trabalhar com. Vamos colocar um vídeo tag. Minha tag de vídeo é colchetes angulares abertos, digite vídeo. Você pode ver que tem um monte de pintura. Você pode ver Dreamweaver vai, eu digitei vídeo, e pronto, você quer dizer isso? Muitas vezes você pode apenas pressionar Return no seu teclado e ele irá preenchê-lo. Aqui vamos fechá-lo com colchetes angulares. Então cada etiqueta precisa de uma abertura e um fechamento. O corpo tem um aberto e, em seguida, tem uma barra para a frente perto. A cabeça tem um aberto e um close. O HTML tem um aberto e, em seguida, lá em baixo há um fechamento. Então, o vídeo é o mesmo. Para fechá-lo, precisamos de um ângulo de colchetes e, em seguida, esta barra para a frente. Você pode ver isso nesses caras aqui. Quer falar barra direta, Dreamweaver é inteligente ele diz, você provavelmente quer dizer para fechar a tag fora e ele só termina lá para você. É assim que se adiciona uma tag de vídeo. Agora, você precisa dizer a tag de vídeo qual vídeo reproduzir. Você faz isso adicionando uma fonte. Logo após a palavra vídeo aqui, nós colocamos em src. Você pode ver o padrão dele. Se você pressionar Return, ele preenche o resto dos iguais e os sinais de aspas. Incrível. Você também vê que você obtém este navegador. Vou clicar em Procurar. No momento, eu só tenho minha pasta de imagens e eu tenho este índice. Ignore isto. DS, é uma coisa de marca. O que vamos fazer é encontrá-lo nos arquivos de exercícios. Está na minha área de trabalho. Há os arquivos de exercícios de fundo de vídeo. Há um aqui chamado vídeo, e este é o que estou usando para o fundo completo. Há este, fundo completo, e depois há a versão da caixa de dados. Vou usar este, esse é o original. Vamos clicar em “Ok”. Ele vai dizer, este arquivo não está no meu site local atual. Isso significa apenas, lembre-se que temos apenas imagens e índice e o Dreamweaver sabe que para um site funcionar, todos os arquivos precisam estar na mesma pasta. Eu vou passar, você gostaria que eu copiasse para lá agora? Você diz que sim, por favor. Incrível. Você poderia simplesmente despejá-lo aqui com seu arquivo de índice, mas seria muito comum ir para Nova pasta, colocar vídeos, clicar em “Criar”, e eu vou colocá-lo lá. Agora, seu formato de arquivo está sendo feito nos vídeos anteriores. Uma coisa que não cobrimos muito é ter certeza de que você não poderia ter isso. Você não poderia ter designers de fundo de espaço completo. Você vai acabar com erros e o navegador não consegue encontrá-lo. Você precisa usar hífens ou sublinhados, não importa qual. Os superiores e baixos estão bem, mas apenas uma sintaxe básica lá. Ótima. Editamos um vídeo e vamos verificar. O que vamos fazer é pré-visualizar no navegador. Vamos usar a visualização do navegador em tempo real na parte inferior aqui. É assim que você chega a ele, e você pode visualizar em todos os navegadores diferentes, Google Chrome é de longe o mais comum. Se você não tiver instalado em seu computador, vá e instale-o e ele aparecerá nesta lista. Se você estiver em um Mac, Safari, se estiver em um PC, provavelmente você tem o Edge ou o Internet Explorer. Mas definitivamente testar o Chrome que será sua base porque muitas pessoas têm o Chrome em comparação com todos os outros. Guarde isso, por favor. O que acontece é que, no meu, ele se abriu na outra tela. Trabalho em duas telas aqui no escritório. Antes de olharmos para o vídeo, e o que acabar acontecendo é, veja este vídeo aqui. Vamos alternar nesta classe entre isso, de volta entre o vídeo, de volta entre isso, e para trás e para frente, só porque estamos presos a uma tela para este vídeo. Mas quando eu estou trabalhando, o que eu faço é que eu tenho este aplicativo em outra tela, e eu estou testando no final. Atualiza ao vivo, então significa que não preciso alternar entre as duas bordas. Eu só atualizo o código e ele é atualizado nesta outra tela lá. Mas dá-lhe uma boa desculpa para sair e comprar um monitor novo. Você fica incrível com duas telas para cima. Este é o nosso vídeo, está lá, eu posso vê-lo. Mas nada está acontecendo. Há um pouco de sintaxe que precisamos adicionar a este vídeo para que ele faça as coisas. Há um monte de coisas diferentes que você pode fazer, nós não vamos cobrir cada uma delas. Vá em frente e dê uma olhada e veja o que outras coisas você pode fazer com o vídeo. Mas o básico que queremos é, você pode ver se eu colocar um espaço logo após o vídeo? Dreamweaver é muito útil, ele oferece todas as coisas que potencialmente podem ser aplicadas ao vídeo. Alguns deles fazem sentido. Há coisas como autoplay, é o que eu quero a seguir. Mas também há coisas aqui como controles. Se eu ativar isso e, em seguida, eu salvá-lo e eu verificar no meu navegador. Eu coloquei esses controles, e estes são apenas controles HTML5 padrão. Vai-te embora. Controles não é o que eu quero porque eu não quero isso para o vídeo de fundo. Quero autoplay. Voltar para, colocar um O, colocar em um espaço, e isso me dá isso, autoplay. Adorável. Agora, se eu salvar, visualizar meu navegador, olhar para ele. É autoplay. Legal. O vídeo HTML5 é muito fácil. Não há plug-ins, ele só funciona com quase todos os navegadores modernos. Você pode ver, neste caso, ele chega aqui e depois pára e espera para sempre. Isso pode ser o que você quer, então você não precisa adicionar nenhuma outra sintaxe a ele. Você pode querer que ele só jogue uma vez e fique lá para o resto do vídeo. Esta é apenas a moldura final. Pode ser um call-to-action ou você está feliz por isso fazer isso. Não me importarei de fazer um loop. Você provavelmente vai adivinhar. Você diz o loop da palavra. Muito fácil. Agora, esta coisa vai voltar para sempre. Você só tem que confiar em mim, nós não vamos assistir novamente. Aquela coisa vai continuar em loop. Mais alguma coisa útil aí? Há mudo. Se você tem som em seu silenciado, meu conselho é ir e re-renderizar o vídeo, codificá-lo novamente com o áudio desligado, ele vai economizar um pouco do tamanho do arquivo. Se você é preguiçoso ou você não quer fazer isso ou você apenas entrou neste tutorial apenas para fazer vídeos e você quer silenciá-lo, basta clicar em Silenciar, está tudo bem. Não precisamos dele porque não temos áudio em nossa faixa ou em nosso vídeo, então não precisamos dele. Dê uma olhada na outra coisa. Esses são os principais que queremos. Há algumas outras coisas que vamos fazer mais tarde, mas isso é o básico para colocá-lo no HTML. Agora precisamos torná-lo em tela cheia. Isso é feito não aqui no HTML, mas em um CSS. Vou apertar “Salvar”. Vamos criar outro documento CSS. Agora, não vamos cobrir uma enorme quantidade de CSS neste curso. Se você é novo e diz: “Cara, eu nem sei o que é um CSS”, vá até um dos meus outros cursos, há muitos detalhes em CSS. Mas vamos ser rápidos neste caso. Primeiro de tudo é criar um documento CSS. Vamos para New, e HTML, CSS. HTMLs eles recebem as coisas, os principais conceitos na página, eles digitam as imagens, os vídeos. O CSS é o que você faz para estilizá-los, dizer-lhes o que fazer. Vamos dizer ao CSS para esticá-lo. Bem, vamos usar CSS para dizer a um vídeo o que fazer. Vamos dizer para ser tela cheia. Clique em “CSS”, clique em “Criar”. Com um arquivo Zipper aqui, vou salvá-lo. Vai para o meu mesmo arquivo. Algumas pessoas colocam em uma pasta chamada CSS, eu não. Coloque-o aqui. Chame o que quiser, mas praticamente todos chamam de styles.css. Isso é o que um documento CSS parece novo. Eu vou fechá-lo porque o que nós vamos fazer é quando fecharmos, lembre-se que eles são dois arquivos separados. Você pode vê-los lá, esse cara e esse cara, eles não sabem que existe um ao outro. O que precisamos fazer é conectar os dois e fazemos isso por neste HTML, na cabeça. Lembre-se cabeça é onde as instruções para a página ir eo corpo é as coisas que realmente aparecem na página. Aqui no título, dizemos, vamos adicionar o link para o CSS. Esta é longa. O que vamos fazer é usar um pequeno truque. Em vez de colocar toda a sintaxe para vincular um documento CSS, vamos usar um pequeno atalho no Dreamweaver, e se você pressionar Return, ele não fará nada, mas se você clicar em Tab, veja isso, incrível. Em vez de ter que digitar colchetes angulares link rel é igual a folha de estilo, href é igual, tudo isso pode ser feito apenas com guia, mesmo com esta tag de vídeo. Fizemos isso mais cedo, onde escrevemos no início e no fim. Vou colocar outro apenas por baixo, apenas para dar um exemplo, eu nunca digitaria fonte de vídeo igual a igual, eu escrevo vídeo, aperto Tab e você vê que ele coloca tudo lá para você. Vou desfazer isso. Aprenda alguns atalhos, incrível. Para onde é que vai ligar? Está nesta referência H, esta é a referência do hiperlink, e para onde vai? Vamos começar a datilografar. Se eu apagar isso e colocá-lo de volta, por algumas razões, às vezes quando você está usando esse pequeno truque, ele não carrega esses pequenos pré-carregadores. Às vezes, o que faço é apagar a primeira citação, colocá-la de volta, e então isso volta à vida. Tenho a certeza que é um insecto, tenho a certeza que vai desaparecer. O que eu vou fazer é, eu vou digitar styles.css. Esse é o arquivo que estava se ligando. Você pode ver no topo aqui, isso mudou. Esta é a barra de documentos relacionados. Em vez de ter duas abas abertas, você tem como duas guias diferentes aqui e está ligado a ela. Agora HTML e CSS são casados, eles estão conectados. Legal, isso é o que precisamos fazer, para conectá-los pelo menos, agora precisamos ir e adicionar alguns CSS para estilizar este vídeo. Vamos e estilizá-lo em nosso CSS, clique em styles.css no topo. Agora vamos colocar em nosso primeiro pedaço de CSS. O que poderíamos fazer é entrar aqui e estilizar o vídeo tag, esse era o nome dado a ele aqui, então é exatamente o mesmo vídeo e aqui eu poderia começar a estilizá-lo e colocar minhas chaves encaracoladas, e então eu começo a estilizar -lo e isso é bom, contanto que você só tem um vídeo por site inteiro, que é improvável, bem, pode não ser. Como para os meus sites de tutoriais em vídeo, há milhões de vídeos, então o estilo dessa tag afetará todos eles. Todos os vídeos em cada página tem que ser essa coisa de tela cheia e isso não é o que eu quero, então o que eu vou fazer é eu vou ser um pouco mais específico. O que eu quero dizer com isso é que eu vou adicionar uma classe, e uma classe é algo que eu posso criar e eu posso editar as coisas que eu quero que ela se aplique. Uma aula é algo que eu tenho que escrever, eu só preciso ter certeza que tem um período no início ou uma parada completa. Vou chamar minha tela cheia, você pode chamá-la do que quiser, mas sem espaços. Eu vou copiar as palavras porque minha ortografia é terrível, e então eu preciso ir e insinuar isso. Vou colocar isso e colocar meu aparelho encaracolado. Apenas para começar, todas as propriedades do CSS precisam entrar nessas chaves. Para conectar esses dois, eu preciso ir para a fonte porque no momento é apenas chamada de vídeo e ele não tem conexão com aquela coisa de tela cheia que eu acabei de fazer. O que você faz, logo após a palavra vídeo, coloca no espaço, você começa a digitar cl para a classe, aperta Return, coloca um pouco de sintaxe para você. Lembre-se de que iguais e aspas têm que estar lá e você pode ver até mesmo útil do Dreamweaver diz: “Você quis dizer tela cheia?” Eu disse: “Sim, por favor.” Você vai notar, você não colocar no período aqui. Mesmo que eu copiei o meu para entrar e colá-lo, eu não precisava porque Dreamweaver foi super útil hoje. Isso conecta os dois, então eles estão fazendo coisas juntos. Agora preciso dizer a ela o que fazer, e para fazer isso funcionar, precisamos fazer algumas coisas. Os principais são altura mínima e largura mínima. Eu digitei min e, em seguida, hífen, você pode ver que me dá todas as coisas dentro da minha internet. Vou fazer uma altura mínima e o cólon vai lá automaticamente e colocamos 100%, não é surpreendente. Sempre terminamos nossas propriedades CSS com ponto-e-vírgula. Faremos a largura mínima também. Estou apenas digitando e usando minhas teclas de seta para descer, aperte Return, 100%, ponto e vírgula. Vamos ver onde isso nos leva, ainda não está terminado, mas vamos dar uma olhada. Legal. É um vídeo elástico. Uma das coisas com largura mínima é que, você pode ver, chega ao mínimo. Esses são os 500 pixels originais que eu tenho, e isso é apenas uma das coisas que precisamos viver no momento com a coisa de fundo elástico. Se este é o futuro, o que você quer fazer é, digamos que daqui a um ano ou dois, você quer ir e verificar algo chamado o objeto ajuste e a coisa é chamada de capa e ele faz um muito legal, coisa fácil onde ele se estende para o fundo, você não tem que fazer essa coisa largura mínima. O problema é que ele não é usado por muitos navegadores no momento, então não é tão prático. Será em alguns anos, então vá e verifique que, você pode encontrar algo como ajuste de objeto versus largura mínima e apenas verificar se ele funciona. Legal e elástico, incrível. Mas há algumas coisas como estas barras de rolagem aqui e há algumas lacunas brancas nas bordas. Vamos consertar isso no Dreamweaver. Uma coisa que eu não expliquei, apenas pensando, é que na largura mínima é, se eu fiz isso como um filme de cuidados completos, na verdade vai ser enorme. O mínimo vai ser 100% e provavelmente além da tela, então ele nunca vai ser redimensionado, ele só vai estar lá em tela cheia e tudo bem, se você quiser isso, você pode terminar apenas com o canto superior esquerdo, porque sua imagem é tão grande, ele está fora da tela e não vai ficar menor do que o mínimo. No nosso caso, eu fiz o meu 500 pixels, então é um pouco de dar, e ele mantém um tamanho de arquivo menor. Espero que isso explique melhor. Em termos de largura mínima, há algumas outras coisas que preciso fazer. A primeira é, eu vou fazer a largura e altura auto. Por quê? Só porque... Há casos em que não vai fazer diferença. No nosso caso, o vídeo vai parecer exatamente o mesmo, mas há casos em que isso é necessário, então basta adicioná-lo, ele não causa nenhum dano e irá ajudá-lo em determinadas circunstâncias. Outra coisa que podemos fazer é nos livrar dessas barras de rolagem, ver essas barras de rolagem aqui? Nós terminamos. Vejamos algo chamado posição. Você pode ver as opções aqui. Vamos olhar para dois deles. Vamos olhar para absoluto e fixo. Vamos olhar para o fixo primeiro e o que eu vou fazer é mostrar-lhe alguns exemplos que eu tenho. Eu acabei de fazer. Este é o local acabado. Obviamente não estamos aqui ainda, mas este aqui está definido para consertado. Falamos sobre fixo e o outro vai ser absoluto. Corrigido nos permite fazer isso. Eu adicionei algumas cópias aqui, apenas uma cópia em branco. Você pode ver que o vídeo é fixo ao fundo, ele não vai a lugar nenhum. Onde está absoluto? Existe, mas veja isso, quando eu rolar para baixo, você pode ver que ele fica onde está e há usos para ambos os casos, por isso é fácil de mudar. Neste caso com a gente, se eu ir para fixo e eu pré-visualizar no navegador, e eu vou fechar esses dois que eu fiz como exemplos, realmente não importa porque eu não tenho nenhum conteúdo na minha página, então eu descobri Te mostrar desse jeito. Vamos deixar o nosso como está consertado. A próxima coisa que vamos fazer é colocar em uma posição superior de zero pixels e uma posição esquerda de zero pixels. Ele dá um ponto de referência para mais tarde quando precisamos colocar tipo e imagens sobre o topo dele. Se você não tem, não vai funcionar, não vai notar nenhuma mudança agora. Enfia só porque eu disse que sim. Vamos dar uma olhada nisso. Salve, vamos dar uma olhadinha. Quando eu disse, não fez nenhuma diferença, é na verdade, você pode ver no topo aqui, há um pouco de padrão que vem junto com a tag body, que empurra para baixo a partir do topo e um pouco fora de a esquerda por isso é esclarecido a pequena borda branca que estava lá. Nós não dissemos isso antes, eu provavelmente disse, mas eu só quero deixar claro. Vê uma borda branca? Você pode não ter notado. Mas ele está lá. Isto obriga-o a subir para o canto superior esquerdo. Adorável. Isso, meus amigos é uma coisa de fundo de vídeo rodo que é realmente pequeno e tamanho de aves. Isso te faz parte do caminho. Vamos deixar este vídeo aqui, próximo vídeo, vamos olhar para adicionar tipo sobre o topo dele, porque isso é outra coisa. É fácil o suficiente, mas vamos fazê-lo juntos no próximo vídeo. 11. 11 de texto e imagens básicas na parte de fundo de vídeo: Neste vídeo, vamos acabar com algo assim, onde temos algumas coisas por cima. Tem um pouco de navegação e um logotipo no topo. Não parece muito. Se você olhar para quanto tempo este vídeo vai durar, mas não se preocupe, se você apenas olhar para as coisas grossas acima do topo, que serão os primeiros 10 segundos e o resto do tempo nós estamos entrando em algum HTML básico, e nós vai construir o nosso site, que você pode ignorar se quiser. Vamos começar. Para adicionar texto a um documento, isso é obviamente muito fácil, logo abaixo do vídeo, vamos realmente adicionar nosso logotipo. Quero colocar o logotipo por cima. Aqui está o meu exemplo acabado que eu quero fazer. Isso é o que eu quero. Eu quero que você traga seu laptop para cima e esta navegação, e este texto e este botão. Vamos começar. Então o que eu quero fazer é colocá-lo em uma imagem. Agora, colocar uma imagem pode levar uma eternidade. É img espaço src então você tem que colocar em texto alt, há muito a fazer. Mas lembre-se do nosso truque, img, em seguida, clique tabulação. Ei, preenche, e obrigado Dreamweaver. A fonte, onde eu quero obter meu logotipo, eu vou digitar i, para imagens. Você pode ver que vai para imagens, ótimo, clique sobre isso. Agora não há nada na minha pasta de imagens. Acabamos de chegar a procurar, então eu vou usar isso. Vou procurar os arquivos de exercícios que baixamos. Se você não consegue encontrar os Arquivos de Exercício, você provavelmente já tem, mas haverá um link em algum lugar, nesta página. Vamos ao Video Background e vamos para as imagens abaixo, e eu tenho um SVG aqui, poderia ser png, jpeg. Use SVGs se você souber como fazê-los, do Photoshop e do Illustrator os faça. Eles são gráficos vetoriais escaláveis e são incríveis para redimensionamento. Agradável e crocante. Não está dentro do meu site no momento. Está dizendo “aviso”. Gostaria que eu copiasse lá? Você diz: “Sim, por favor.” Onde você gostaria que eu colocasse? As imagens, por favor. mesmo com os arquivos de imagem. Eles precisam ter hífens, sem espaços. Aperte “Salvar”, aí está. O texto alt precisa entrar sempre que você colocar uma imagem. Isso é usado por leitores de tela para deficientes visuais, e também é usado para, Google usa isso. Você já fez uma pesquisa de imagens no Google, é assim que ele sabe do que você está falando. Isso vai me levar onde eu trazer nosso logotipo de topo. Ótimo, vamos checar o navegador. Não está lá. Onde é que está? Na verdade, está ali, na verdade, por baixo daqui. O que acontece é que quando você coloca as coisas quando a posição é corrigida, eles estão todos fora de sincronia e eles não sabem quem está no topo, e todos eles aparecem para lutar contra isso. Às vezes os logotipos em cima e às vezes os vídeos em cima. É praticamente quem for o primeiro nesta pequena lista aqui. O que precisamos fazer é ir ao nosso CSS e realmente dizer ao nosso vídeo para fazer algo chamado índice Z. Z índice, e por padrão tudo é zero. Você sabe que a imagem vai ser zero então qualquer coisa abaixo de zero vai deslizar por baixo. Algumas pessoas colocam 100 e outras são 999. Não importa, seja lá qual for o flash. Agora vamos verificar o navegador. Lá está ele. Olá, aí está, meu logotipo no topo. Essencialmente, é isso. Se você já sabe como entrar e posicionar as coisas, faça sites responsivos e coloque um cabeçalho e o logotipo dentro. Você pode pular para o próximo vídeo agora, porque nesse vídeo o que faremos é cobrir coisas como dispositivos móveis e responsivos. Mas neste vídeo eu vou arar, nós vamos construir nosso site. É bem básico. Se você é novo ou está apenas começando, siga, vamos construí-lo, melhore suas habilidades. Então, no Dreamweaver, o que vamos fazer é ir para código-fonte e vamos construir isso agora. Este logotipo aqui, na verdade, eu quero que o vídeo esteja no fundo. Só porque eu queria, não importa para onde vai. Chega de tela cheia, pelo menos. Então eu vou cortá-lo e colocá-lo debaixo desse cara e principalmente, porque eu quero que meu site carregue acima dele e o vídeo seja a última coisa a carregar, só para que este tique na tela primeiro e então essa coisa possa carregar no final. Se você tem um vídeo muito longo, pode levar um longo tempo e, em seguida, ele vai esperar para este para carregar antes que as coisas por baixo dele. Ótima. Então o que vamos fazer é construir uma estrutura HTML5 áspera. Dentro do nosso corpo, a primeira coisa que precisamos é de um cabeçalho. Então eu estou colocando na guia cabeçalho, e isso é tudo o que vai no topo da minha página. Neste caso, vai ser, vamos chamá-lo de minha maquete. Só vai ser o logotipo que vai dentro dele e minha navegação. Se você quiser chamá-lo de BYOL no topo aqui, isso seria considerado seu cabeçalho. Dentro, cabeça vou colocar meu logotipo, pegamos ele, lá vai você, e dentro você vai. Você pode ver que ele recua as coisas bem para ver onde você está. Vou colocar alguns retornos. devoluções não fazem nada no código. Continue checando, eu quebrei? Não, ainda parece bem. Vou colocar a minha navegação. Então a navegação entra em uma tag chamada nav, pressione tab. Agora vamos colocar essas três palavras que eu tinha no meu exemplo aqui. Você pode vê-los lá, eles vão para dentro. Construindo um navegador, você constrói assim. Você colocou o ul, que é uma lista desordenada. Isso é como uma lista de bala apontada e vamos remover que listas de balas apontadas estava instalando em um segundo. Não coloque, empurre a aba. Coloque um ul, e dentro disso, porque o ul é exatamente como o invólucro, dentro dele há Li. Esses lis são os diferentes pontos de bala aqui, e eu preciso de alguns deles. Então eu poderia fazer isso, e então eu preciso de alguns itens da lista. Dentro desse item da lista, precisamos de um link clicável. Isso é chamado de “tag”. Se um enter para, um href é o que lhe dá um hiperlink. Para onde é que ele vai? Eu coloquei um haxixe porque eu não tenho nenhuma maneira para ele ir ainda. Isso seria, poderíamos escrever nosso contato conosco page.html, mas não temos isso, então vamos deixá-lo como hash. Você colocou, eu não consigo lembrar qual é a nossa fase 1, qual era a fase 1? Portfólio. Portfólio, salve. Vamos verificar no navegador. Você pode ver que é o meu primeiro nav. É um pouco feio, mas é assim que as navegações são construídas. Eles são construídos com URLs. Mas removemos os pontos de bala e o azul, e o subjacente e os torna clicáveis. Isso faz um bom nav. De volta ao Dreamweaver. O que você pode fazer é, você pode ter suas chaves dentro disso, uma duplicata, que é Command+D em um Mac ou Control D em um PC, ou você pode copiar e colar, isso depende de você. Pode continuar fazendo isso. Vou mostrar-te uma maneira super fixe, vou tentar impressionar-te com as minhas super capacidades. Veja isto. Estamos usando isso, e apertando “Tab”, e eu sou como, “é muito legal, poupa um pouco de tempo”, especialmente para um navegador. O que eu quero é uma ul. Dentro dessa ul, então eu vou usar o símbolo maior que, e dentro disso, ul, dentro disso em um li. Quantos li's eu gostaria? Gostaria de cinco deles, por favor. Dentro do li, eu gostaria de um “A”. Sei que parece um pouco estranho. Se você é novo, não faça assim, você só faz o caminho mais longo. Mas se você tem certeza agora, você fez alguns dos tutoriais, e você está começando a ficar bem legal, você pode fazer isso. Chama-se imagem. Então é como dicas de código e só significa talvez uma aba de sucesso. Construiu todo esse sistema para nós. Constrói um li com um monte deles. Eu disse cinco, eu realmente só queria três deles. Apenas joga fora e eles são bem legais. Adoro quando podes poupar tempo assim. A outra coisa é que podemos fazer é, e é uma coisa legal para o Dreamweaver, são vários cursores. Quero colocar um haxixe, para tudo isso. Lembre-se quando não temos como ir, colocamos o sinal de haxixe ou libra, mas não é tão difícil. Eu poderia colocar em haxixe para baixo. Está bem, está tudo bem. Mas o que eu posso fazer é manter pressionado o comando no meu teclado e clicar algumas vezes e você obtém esse cursor múltiplo. Veja um cursor gigante. Só significa que quando eu taco, eu posso fazer isso. Vai um de cada vez. Você pode ter esses cursores em todos os lugares, que podem ser cursores que eu posso ter. Até que você esteja dando descarga. Isso não é particularmente útil, mas é ótimo quando você está adicionando classes para tags diferentes. De qualquer forma, dicas e truques. Então este aqui precisa ir para dentro da etiqueta A. Lembrem-se, este é o portfólio. Quais eram os outros? Preços e entre em contato conosco. Então PREÇOS e CONTATO NOS Verificando o navegador. Lá estão eles, grandes e feios. Agora o que queremos fazer é levá-los até o topo aqui. Bem, vamos colocá-los lado a lado e nos livrar de toda essa formatação feia. Isso é feito sempre CSS. Então vamos deixar esse cara aqui. Vamos saltar para o nosso styles.css. A primeira coisa que fazemos é empurrá-los para o canto superior direito. Então vamos estilizar o navegador. Lembrem-se das etiquetas que não o fazem, lembrem-se que são as que nomeamos, estas são as pré-fabricadas. Então, nada de parada na frente. Colocamos nossas chaves encaracoladas e para fazê-los ir no canto superior direito, é algo chamado flutuar. Vamos dizer, “Flutua para a direita, meu amigo”, ponto-e-vírgula. Salve, verifique no navegador. Boom, olha para ele. Todo o caminho até aqui. Ele flutuou para a direita. Vamos olhar para nós o que precisamos fazer. Em seguida, quero estilizar minhas ul's. Então o que fazemos é dizer, não só todos os ul's na página. Quero fazer os que estão dentro deste navegador. Porque se eu fizer tudo, posso ter uma lista em outra página e vai fazer coisas estranhas que eu não quero. Só os ul's que estão dentro do navegador, por favor. Eu gostaria que você, meu amigo, se livrasse dos pontos de bala. Essa é a primeira coisa mais feia. Então eu digitei na lista e há um aqui, chamado list-style-type. Agora, se você não tem certeza do que alguns deles fazem, você pode ver aqui em baixo, Dreamweaver é bastante útil. Isso me diz o que essa coisa faz. Vou clicar em você. Depois dá-me alguns exemplos do que pode fazer. No nosso caso, você pode colocar um ponto decimal, você pode colocar em um disco. Eu vou colocar, nenhum. Certo, e depois ponto-e-vírgula, guarde. Então olhe, legal, os pontos de bala se foram. Quem vai continuar passando por isso e continuar removendo alguns dos estilos. Então, a próxima coisa que quero fazer é fazer com os itens da lista. Então eu quero fazer isso com esses aliados, mas eu só queria fazer com os aliados que estavam dentro de URLs que estão dentro do n-av. Ok? Então, pessoal, eu quero que vocês sejam um tamanho de fonte? Tamanho da fonte de 0,8 em-es. Ok, se você nunca usou em-es antes, você pode usar Pixels.It não é, não é uma boa prática. EM-ES é responsivo e erro de bit e muitas maneiras, tudo o que significa é, e por padrão, um site é definido como 16 em-es e o usuário pode sair e alterar esse padrão se necessário. Então, se você ocultar pixels de código, isso permitirá que eles façam isso. Então precisamos deixá-los escolher a fonte, ninguém o altera. Não somos muitas pessoas, pelo menos, mas precisamos seguir as regras para as pessoas que precisam de um pouco mais de ajuda usando um navegador. Então, se eu colocar em um em-e, ok, eu obteria 16 pixels. Então eu quero 14 em-es, que é cerca de 14 pixels, que é cerca de 0,8 em-es, ok, então use 16 base de usuário e nós obtemos alguns casos difíceis a partir daí, muitas vezes você tem que ir e testar e verificar. Então, esse será o tamanho da fonte. O que mais devemos fazer? Eu brinquei com algum espaçamento de letras, só para separá-los entre as letras. Então eu vou usar em-es de ponto zero. Salve isso. Vamos dar uma olhada. Você pode ver que está espaçado as letras. E o que mais eu fiz para o tamanho da fonte ou um pouco menor do que o normal, mas eu quero sublinhar sobre ele, para eu possa fazer uma linha e eu quero ir para ticks a linha. Marque a linha e vá para a direita. Ponto-e-vírgula, então o alinhamento desta forma, você pode gostar do seu estilo dessa maneira. O que eu quero fazer é colocá-los lado a lado, e é algo chamado “display”. E há algumas opções. Bloqueio inline-. No momento eles estão usando inerente, salvar o trabalho na mão. Você pode ver “inline-block”, isso significa que eles vão estar em uma linha. E eu quero colocar um pouco de espaçamento entre eles. Então eu vou colocar um pouco de estofamento e colocar um pouco de enchimento na esquerda. Se eu colocar à direita, vai parecer um pouco estranho. Vou te mostrar o que quero dizer no meio. Decidi que 50 pixels parece bom. Coloquei no lado esquerdo. Então isso tem, isso tem, então entre em contato comigo à esquerda. Analisando à esquerda. Esta à esquerda, você não percebe. Você coloca à direita, vai afastar o contato da borda. Você pode querer isso. Vamos lá. Vamos mover as cores e os sublinhados. Agora nós não podemos ir e remover a cor e sublinhados deste pequeno grupo aqui, apenas não funciona. O item da lista é o tipo de lista, mas não as fontes reais em si. Então precisamos descer um pouco mais baixo. E no nosso caso, é o “A”. E se você não tem certeza de quais tags ser styling frequentemente, ele pode ser muito útil, se eu clicar dentro daqui, você pode ver que há a minha tag que está dentro de um aliado, que está dentro de uma URL, que está dentro de adicionar widgets dentro da minha cabeça, que está dentro do meu corpo. Você poderia escrever tudo isso. Então acabamos de fazer o aliado. Você poderia escrever tudo isso, mas não há nenhum ponto real. E isso é único o suficiente como navegação, então ele pára por aí. E então eu quero começar minha etiqueta, que está dentro disso e dentro disso. Então vamos fazer isso. Então eu gostaria de estilizar, meu amigo, coisas que um tags, que estão dentro dos aliados, que dentro dos URLs, que estão dentro de um n-av, e chaves. Eu quero fazer uma decoração de texto como a primeira, e você pode ver que você pode colocar um overline, sublinhado, linha através. Eu quero ir para nenhum porque por padrão tem um sublinhado. Ninguém gosta. E o próximo vai ser a cor, colorida apenas por si só, faz a fonte? Você pode usar seu seletor de cores. Escolha qualquer cor que você gostaria. Se você souber o número hexadecimal. Estou usando RGB aqui, porque você pode usar transparência e é novo e é incrível e funciona em pequenos browses.You poderia usar Hicks se você está acostumado a usar essas pequenas hashtags. Não há nada de errado com isso. Não é muito velha escola. Você pode até fazer isso quando realmente, você pode escrever branco. Isso funciona também. Tudo bem, então, agora eu tenho alguns links que são clicáveis, não ir a lugar nenhum porque eu tenho esses pequenos hashes dentro de.There não há nenhum erro como se, algum espaçamento porque este é o espaçamento entre linhas. Vamos olhar para fazer a fonte. Agora podemos empatar a fonte aqui. Então eu poderia entrar aqui e dizer “família da fonte “, e eu posso dizer o que ser. Agora, o único problema com isso é que a próxima coisa que eu faço, que vai ser este pedaço de texto em bloco aqui, vai ser a mesma fonte. Então eu teria que dizer de novo. Então esta tag p dizendo “botão fonte, mesma fonte”. Todo o site vai usar o Aerial. Então o que fazemos, é dizer, em vez de estilizar cada tag individual, está no topo aqui. E temos uma etiqueta de corpo. Nós dizemos que você meu corpo, eu gosto de tudo que está dentro deste body tag, que é tudo na minha página. Lembre-se, eu vou ter uma família de fontes, e o que vamos escolher, há um monte de grupos aqui. Não gosto destes pequenos grupos. Prefiro apenas ter Aerial, colocar uma vírgula e então eu vou ter uma parte traseira cheia de Sans Serif, ponto-e-vírgula, legal. Agora, se você quiser usar outras fontes, Mao Open Sans, Solo Sands, como a Nova Aérea. Você pode usar as fontes do Doby ou você pode desligar e usar fontes do Google. E nós não vamos cobrir isso aqui porque ele tem que ser bem apicamente longo de qualquer maneira. Mas confira qualquer um dos meus outros cursos, especialmente o Bootstrap um para Dream-Weaver, que vai cobrir fontes e muito mais detalhes. Então é assim que as fontes são feitas. Para tudo o que aparece no documento. Então, a próxima coisa que vamos fazer é eu gostaria que meu exemplo de Cs o escondesse de polegada. As crianças gostam de uma largura fixa e o meio e o lado de fora elástico . Isso é o que eu quero fazer no momento. Meu exemplo aqui é, ele tipo de disfarce disparando todo o caminho para a direita e todo o caminho para a esquerda. Não é bem o que eu quero. Então eu quero colocar algumas fronteiras falsas aqui. Então vamos fazer isso. É bem fácil. Podemos fazer isso apenas o corpo. O corpo é o meio de tudo. Dizemos “seu corpo, eu gostaria de ter uma largura máxima de ”, é até você o que você coloca, e eu vou colocá-lo em 1024 pixels. Ou é isso ou 1200, como realmente, tamanhos comuns. E assim, 1024 é a largura máxima que a caixa pode ser. E vamos dar uma olhada. Vai ser uma espécie de trabalho. Então ele é fixado para esse tipo de tamanho, mas como padrão para a esquerda, então nós queremos colá-lo para que seja estritamente no meio. Então, ele ainda pode ver max-width é realmente bom para sites responsivos. Então não colocá-lo na largura, porque isso vai fisicamente dizer para cima para sempre ser 1024, enquanto max-width diz ser qualquer coisa até uma largura máxima obter 1024. Responsabilidade. Então, e para obtê-lo para ser centrado, é algo chamado “Ordem de margem”. Então você pode colocar em margem esquerda e você colocar em ordem, e você colocar em margem direita, colocar em ordem, e isso só significa que eu vou ser centrado. Certo, então o que vamos fazer é deixar isso aqui. Eu sei que ainda não terminamos, mas o que eu vou fazer é quebrar isso em dois potes, então não é tão longo. Então seremos nós no momento em que vamos passar, e fazer o resto do site. Se você se sentir como “Eu não sei o que estou fazendo agora”, pule para o próximo novamente, e um depois disso, e você pode olhar para o material móvel responsivo do vídeo. Porque agora estamos apenas entrando em web design básico, o que é legal, e aumentando nossas escalas. Mas você pode pular junto, se quiser. Muito bem, vejo-te na próxima. 12. 12 Produção: Olá a todos. Neste vídeo vamos terminar construindo nosso site, apenas adicionando alguns textos, algumas linhas horizontais, fazer um pequeno botão, e vai ser tudo responsivo e video-ey. Vamos fazer isso agora. A primeira coisa que vamos fazer é ter o nosso cabeçalho, temos o nosso nav lá dentro, e ali está o nosso logotipo da imagem. O que vamos fazer agora é adicionar a parte principal do site. Felizmente, a tag HTML é chamada principal. Este é o lugar onde todas as suas coisas principais vão. Agora, nossa seção principal, se você olhar para a nossa maquete aqui no Photoshop, é bem básico. Este site é provavelmente um pouco irrealista. Você vai ter um pouco mais de conteúdo aqui. Muitas vezes você quebra o seu principal em diferentes seções. A nossa secção principal, aqui vamos nós, vai ser esta. Então você pode ter duas seções. Você pode ter a seção para a imagem do herói e por baixo pode haver algumas miniaturas e eles podem ser alguns depoimentos. Todos eles podem estar em diferentes seções. Você também pode chamá-los de tags div. Estamos apenas usando uma linguagem HTML mais padronizada aqui, mas div é bom também. Dentro disto vai ser o meu grande título. Onde está a grande direção? Esta coisa aqui, “a criatividade é uma mente selvagem e um olho disciplinado.” O que eu vou fazer é digitar h1. Adicionar guias. Então o nosso h1 é o nosso título 1, nosso título mais importante na página. Você precisa ter um h1. Ali está ele. Vamos verificar no navegador. Aí está ele. Isso é o que um h1 parece sem estilo. Normalmente ele é Times New Roman. Mas ele é Arial porque lembre-se que colocamos Arial no corpo, então tudo dentro é Arial, mas há um bom pedaço de estilo que precisamos fazer. Ele precisa ser maiúsculo e branco. Ele precisa ser empurrado do topo. Vamos empurrá-lo do topo primeiro. Vamos olhar para isso. No Dreamweaver, o que queremos fazer é colocar algum preenchimento no topo do h1, o único problema com isso é que cada página precisa de um h1 e nem todas elas, novamente, precisam desse preenchimento. O que podemos fazer é, na verdade, podemos dizer a seção, podemos dar-lhe um pouco de classe e dizer a essa seção para ter algum preenchimento, apenas para empurrar o h1 para baixo. Vamos fazer isso. Eu poderia estilizar uma seção, mas lembre-se provavelmente as páginas vão ter mais de uma seção, então queremos dar-lhe um pouco de especificidade. Não importa se você criar a classe aqui e, em seguida, construí-lo no CSS depois ou construí-lo neste CSS e aplicá-lo aqui em segundo lugar. Vou dar uma aula a isto, talvez possamos nomeá-los nós mesmos. Vou chamar este de minha caixa de herói. Ok, eu só vou colocar herói. Tem um nome de classe aqui, e eu tenho meus estilos. Vou fazer uma aula lá embaixo. Agora, o que vai na frente de uma aula? Isso mesmo, parada total ou ponto final. Vou chamá-lo de herói, aparelho encaracolado. Empurre reter, separa-os para fora. O que eu gostaria de fazer é fazer um estofamento em cima. Quanto? Eu já trabalhei para fora jogando um pouco, e isso vai ter um preenchimento de 80 pixels. Salvar. Vamos dar uma olhada. Aqui vamos nós. Empurre-os de cima para baixo. Vamos e estilo h1 agora. Em seguida, o meu CSS para baixo aqui, e colocar no meu h1. Como um h1 é uma tag existente, não é classe que criamos, apenas não temos ponto na frente. Nós vamos adicionar algumas coisas para o h1. O que vamos fazer é ir para o tamanho da fonte, fontes, lá está ele, tamanho de 4,6em ponto e vírgula. Ótimo. O que mais? Vamos dar-lhe uma cor de branco, é #FFF. Podemos usar o seletor de cores lá, vamos digitar em branco. Vou fazer com que seja maiúscula. Então é a transformação de texto que eu quero. Você pode ver lá, eu posso torná-lo em minúsculas. Vou forçar tudo a ser maiúscula. Legal. No meu caso, quero a margem logo abaixo dela. Uma pequena margem abaixo dela para ser um pouco maior de 20 pixels. Isso me permitirá, o que eu posso fazer. Há um pouco de um espaço por baixo Eu quero empurrá-lo para baixo onde esta régua horizontal entra. Entre no navegador. Legal. Estamos meio que lá. É grande, é ousado, é exatamente o que eu queria fazer. A única coisa é que eu quero esmagar para cima neste lado esquerdo. Vamos dar uma olhada no Photoshop. Eu queria me alinhar com isso. Vou adicionar um pouco de estofamento à caixa. Fizemo-lo antes de adicioná-lo ao topo da nossa caixa de heróis para empurrá-lo para baixo. Podemos fazer o mesmo para o estofamento do lado direito para empurrá-lo. Dreamweaver. Fizemo-lo aqui na minha caixa de heróis. Eu só vou adicionar um pouco de preenchimento à direita, e vai ser 250 pixels. Eu também vou adicionar algum preenchimento para a parte inferior apenas para empurrá-lo para fora na parte inferior, porque caso contrário todo o texto que esmagou na parte inferior lá. Eu quero que ele seja retirado um pouco. Vamos dar uma olhada. Incrível. Uma curva de 50 pixels ali, e o que era? 80 ao longo do topo, e há um pouco aqui em baixo, só para manter tudo fora do fundo. De volta ao Dreamweaver. A próxima coisa é a régua horizontal. Quero colocar uma linha logo abaixo dela. Há algumas maneiras de fazer isso. A maneira mais fácil é apenas por baixo deste h1. Coloque algo chamado “guia de RH”. O estranho sobre um HR é que tudo o resto tem uma abertura e um fim, o HR não tem. É só por si só. Vamos verificar no navegador. Lá está ele. Aí está a minha régua horizontal. Ela se estende por todo o caminho. O que podemos fazer é estilizá-lo um pouco. Agora vamos usar um truque novo e prático. Temos andado a saltar entre isto, isto, e isto, e isto. O Dreamweaver 2017 tem pelo menos esse novo recurso. Se eu clicar com o botão direito nele e ir a essa coisa chamada “Edição rápida”, é incrível. O que ele faz é abrir esse pequeno capricho para o seu CSS. O que ele faz é dizer: “No momento, não há estilo para este RH. Gostaria de fazer um?” Você diz: “Sim, por favor, Nova Regra.” Você pode ver que eu estou na minha folha CSS na linha 55. Na verdade, é colocado na sintaxe que eu preciso nas chaves prontas para ir. Legal, hein? Eu vou colocar em uma altura disso. No momento era apenas um pixel, eu vou colocar em 10 pixels, isso é um pouco mais grosso. Vamos guardar isso e ver como é. Você vê isso é o que nossa horizontal parece com uma altura. Há algumas coisas que precisamos fazer para que pareça bom. Precisamos colocar uma cor de fundo. Cor de fundo de branco ou FFF com um hash, ponto-e-vírgula. O único problema é que você pode não ser capaz de vê-lo, mesmo que nós ampliemos o zoom. Há uma fronteira estranha ao redor do lado de fora. É apenas padrão em uma régua horizontal. O que vamos fazer é definir a borda para zero pixels. Agora, pode não parecer muito diferente, mas isso me incomoda. De qualquer forma, é isso. Você pode dar-lhe uma largura, bem como se você quisesse. No momento, nós demos uma altura, mas nenhuma largura, eu estou deixando ele ir para aquele estofamento que foi para o lado aqui, você pode dobrá-lo em ser pequeno, se você quiser, apenas dando-lhe uma largura, eu vou deixar o meu. Em seguida, é o texto que vai por baixo. Vamos adicionar isso. Na verdade, antes de fazermos isso, vamos fechar isto. Vamos verificar os estilos e você pode ver a parte inferior aqui é a minha regra horizontal. Só te poupa de ir lá para mudá-lo. Vamos criá-lo pelo menos, vamos voltar ao código-fonte e vamos colocar em nosso pedaço de texto. Agora, o texto, Jimly, está contido em uma tag p. Esse é o texto da cópia de uma página. decapitações de H1 e praticamente tudo o resto, mas não é um H1, 2 ou 3, títulos importantes, é uma tag p. O que vamos fazer é dentro desta tag p, vamos colocar um monte de texto. Você poderia esmagar o teclado e colocar texto falso, que funcionaria. Mas há uma maneira melhor de fazer isso usando Lorem ipsum. Se você é um designer e você é tipo, ótimo, eu vou para lá, é no lipsum.com e ir buscar aquele texto de lá. Não é uma ótima maneira de fazê-lo, porque copiar e colar desse site pode trazer através de código que não queremos em nosso site. O que vamos fazer é embutido no Dreamweaver. Se eu digitar Lorem e bater tab, olhe para isso, é um built-in Lorem ipsum. Legal. Eu sei quantas palavras, digamos que você está trabalhando com um copyright e o copyright está escrevendo para um cronograma de escrita, então ele está escrevendo 200 palavras para a página inicial e essas muitas palavras para esta página. Então você tem uma idéia áspera quando você está projetando, bem, quantas palavras vai ser. Digamos que sei que minhas palavras são 52. Eu não sei. É bastante preciso. Você nunca vai ser tão preciso. Mas a coisa legal sobre este pequeno atalho no Dreamweaver é Lorem e você coloca 52, aperte tab, isso é exatamente 52 palavras, muito útil. Vamos guardá-lo, verificar no navegador, lá vai você, aí está a minha etiqueta p. Por padrão, é preto, 16 pixels ou um em. Vamos consertar isso agora. Usaremos o nosso truque sorrateiro. Clique com o botão direito do mouse nele, edição rápida, não há regra, crie-o com uma tag p, e eu vou fazer cor. Cor por si só, lembre-se, é este branco, fff faz. A única coisa que eu quero mudar é provavelmente a altura da linha e vai ser 1,5 em, então um espaçamento de linha e meio. O padrão é um em e eu estou feliz com isso com a cópia do corpo, é um bom tamanho, mas eu estou colocando a altura da linha, o espaço entre linhas, todo o [inaudível], vamos verificar. Legal. Agora, uma coisa que eu notei no topo aqui é esta, que é a sintaxe a partir disso, eu não tenho idéia por que isso está aqui. Vamos verificar. Primeiro de tudo, vou atualizar esta página. Desapareceu. Isso é bom. Então minha pequena prévia aqui tinha um pequeno inseto, eu acho. Não faço ideia de como isso veio. Vou fechá-lo. Incrível. Eu acho que é aquela coisa de edição rápida, que talvez haja um pequeno bug com isso, mas tudo correu bem agora. Adorável, então vamos colocar um botão de coruja por baixo. Parece isso na minha maquete. É apenas um texto com algumas coisas em torno dele, mas é clicável, e como você constrói um botão como esse. Tudo o que é é uma etiqueta, como fizemos para um hiperlink, o que fizemos aqui em cima. Lembre-se da nossa etiqueta, então um, e aperte “Tab”. Para onde é que ele vai? Vamos colocar em nosso sinal de libra. Qual é o texto? Diz para verificar o nosso portfólio. Isso vai nos dar algumas coisas, vamos dar uma olhada. Grande e azul. Vamos fazer a mesma coisa que fizemos aqui em cima e apenas remover o estilo, adicionaremos algumas bordas em torno dele. Para fazer isso acontecer, eu preciso adicionar uma classe, porque se eu começar todas as tags a, cada tag em cada página vai ficar parado e eu não quero isso. Lembre-se que vamos adicionar uma aula. Ótimo. Vou dar-lhe um nome, vou chamar este de minha aula de botões. Às vezes, chamar um botão não é uma boa ideia se você estiver usando, digamos, bootstrap porque eles usam essa sintaxe. Você pode chamá-lo de outra coisa, você pode chamá-lo de meu chamado à ação. É um nome meio longo. Essa é a minha aula. Eu vou entrar aqui em meus estilos, no fundo, fazer uma aula, e então as aulas têm uma parada completa na frente dela. Depois, coloque agora chaves encaracoladas. O que eu vou fazer com ele é, primeiro lugar, cor de fundo, cor de fundo. Estamos fazendo isso com um link, mas o que nos permitirá fazer é adicionar a borda vermelha. Você poderia fazer uma caixa e colocar o texto dentro dela, mas é fácil usar o texto e fazer uma borda em torno dela, se você entende o que quero dizer. Eu sei que estou usando f1474c, ponto e vírgula isso, aquela cor vermelha. Uma coisa legal em CSS agora no Dreamweaver, se você passar o mouse acima, ele, deve dar-lhe um pequeno ícone. Handy. Outras coisas que eu quero fazer, na verdade, vamos verificar no navegador, você pode ver, há aquela cor vermelha, mas, para torná-lo mais como um botão, precisamos adicionar um pouco de preenchimento em torno dele. Você pode passar por cima e dizer estofamento superior, preenchimento esquerdo, preenchimento direito, preenchimento inferior. Eu misturei esses, mas você pode editar todas as quatro propriedades, mas agora em CSS, o que você pode fazer é adicionar preenchimento, e o que acontece é, ele assume, você pode colocá-los em ordem, eu vou mostrar você, então eu quero que o topo seja 18 pixels. Você pode ver esse pequeno popup aqui. Você pode ver se eu deixar assim, ele vai se aplicar a todos os quatro, então eu vou ter estofamento todo o caminho ao redor. Coloquei meu ponto-e-vírgula, guarde, dê uma olhada. Você pode ver este 18 todo o caminho ao redor, em vez de ter que definir todos os quatro. Você pode realmente ficar um pouco mais inteligente porque eu quero que o tamanho seja para que o topo seja 18, mas eu quero o direito de ser 30, quase o dobro. Você pode ver aqui, agora ele diz que superior direito é 30, inferior é 18 e 30 ele duplica isso. Essencialmente, ele vai no sentido horário, começa no topo, vai para a direita, vai da esquerda para baixo. O que eu poderia fazer agora é ir 18 pixels e 30 pixels, só para torná-lo talvez mais claro para você, em vez de escrever em cima, esquerda, inferior. De qualquer forma, vamos salvá-lo. Vamos verificar. Incrível. Eu quero colocar um pouco de espaçamento entre essas linhas, então o que eu vou fazer é colocar em uma linha de altura, Às vezes você pode colocar um preenchimento acima, mas neste caso, a altura da linha vai funcionar melhor para nós. Quatro EMS, guarde. Legal. Empurre para longe de lá. Vamos mudar a cor dele, para fff, e se livrar do sublinhado, e fizemos cedo, lembre-se. Decoração de texto e não vamos fazer nada, por favor. Livre-se desse sublinhado. Vamos dar uma olhada. Olhando bem. Click, é clicável. É um botãozinho bonito. Muito simples de fazer, um pouco de CSS em seu HTML, código agradável e limpo. Acabou de conseguir uma etiqueta com a turma ao redor. Legal. Tudo bem, meus amigos. Fizemos um pequeno site legal. Esse é o fim, porque praticamente tudo o resto se você quiser adicionar mais, você pode adicionar outra seção. Nós não vamos entrar em grandes detalhes sobre isso, apenas um pouco de um exercício para construir esse site. Então já fizemos isso agora. próximo passo é olhar para algumas coisas responsivas. O que é que nós fizemos? Fizemos este site. É uma fonte velha e chata, Arial, eu sei , mas temos um vídeo legal no fundo. Se eu redimensionar, ele vai para o fundo, tem um link clicável. É muito legal. Uma coisa antes de eu ir, eu não consigo evitar, você vê estofamento aqui em cima, é muito perto. O que podemos fazer é adicionar algum preenchimento ao cabeçalho. Aqui, meu styles.css, eu estou indo para baixo e eu vou criar cabeçalho, e dentro daqui, eu vou dizer preenchimento. Eu só vou fazer o topo neste caso e eu quero adicionar 30 pixels, por favor. Está fora do topo. Adorável. Tudo bem. Vamos ser nós. Sim, vamos saltar para o próximo vídeo. 13. 13 Faça uma fundo de vídeo completo para o de a pessoa de a pessoa de de a pessoa de a de vídeo e responsivo: Olá a todos. Neste vídeo, vamos olhar para tornar nosso vídeo de fundo pronto para dispositivos móveis. O que vamos fazer é, você pode ver que o vídeo está sendo reproduzido no fundo aqui, mas quando eu reduzi-lo para simulação móvel ou móvel, então você pode ver o vídeo real desligado apenas com o fundo colorido lá. Agora, por que estamos apenas fazendo um vídeo pronto para celular? Principalmente porque os fabricantes de dispositivos móveis ou pelo menos seus sistemas operacionais não deixam os vídeos reproduzidos. Eles não deixam a reprodução automática, você ainda pode ter vídeos em seu site e com seu host e você mesmo ou YouTube. Eles ainda estão bem porque eles permitem que os usuários pressionem “Play” e digam, “Sim, eu vou usar isso reproduzindo este vídeo.” Enquanto vídeos de fundo automáticos, eles começam a reproduzir sem controles. Então eles não querem por um par de razões, um deles é dados. Você pode estar viajando e simplesmente não perceber que você está mastigando muitos dados de vídeo porque este site está jogando este grande vídeo longo em segundo plano, então essa é uma das razões. O outro motivo é o uso da CPU. Se você já assistiu um monte de vídeos em média olhando laptop, ele pode queimar através do poder de processamento e a bateria muito rápido de um laptop, e em um telefone, obviamente, é muito mais de um negócio. Na verdade, é muito fácil fazer versões móveis ou versões responsivas deste fundo de vídeo, porque estamos apenas desativá-lo realmente, e substituí-lo por uma cor de fundo. Vamos fazer isso agora. Vamos entrar no Dreamweaver. O que precisamos fazer é saltar para o nosso styles.css e vamos colocar em nossa primeira consulta de mídia para este trabalho. Agora, se você não está familiarizado com consultas de mídia, nós só vamos realmente cobri-las basicamente aqui. Se você quiser entrar em um site responsivo, esse é o trabalho para outro tutorial. Para obter minha codificação para designers com o Dreamweaver 2017, cobrimos totalmente as versões de desktop para tablets móveis [inaudíveis], mas a versão skinny é, como você coloca em algo chamado @media, e isso é uma consulta imediata. Colocamos algo chamado largura máxima, e no nosso caso vamos escolher 400 pixels. Agora eles vão colocar meu aparelho encaracolado. O que uma media query faz é que o navegador irá verificar para ver a largura do navegador, e se esse navegador tem 400 pixels ou menos, ele vai ativar o código que está aqui. Para nós, isso significa vamos dizer a um vídeo para desligar aquela coisa. Isso é todas as consultas de mídia são e que é re-trimestre web design responsivo, é que você tem um muito rígido consultas imediatas que dizem coisas para ligar e desligar dependendo do tamanho da tela. Então o que eu gostaria de fazer é adicionar essa tag de vídeo, então eu estou de volta aqui no código-fonte. Há ali, aquele vídeo tag aqui. O que eu gostaria que você fizesse é desligar quando chegar no celular. Se você fizer isso dessa maneira, se desligarmos toda a tag do vídeo, isso significa que cada vídeo em nosso site, ele vai desligar um celular e isso pode não ser necessário para o que queremos, então vamos inibir essa classe que editamos anteriormente chamado de tela cheia, vamos adicioná-lo também para torná-lo um pouco mais específico. Vídeo e, em seguida, colocar em uma parada completa e colocar em uma tela cheia, mais chaves, e o que vamos dizer é exibir meu amigo de? Nenhum, ponto-e-vírgula. Agora o que deve acontecer é que, quando ele chegar a uma largura de tela de 400 pixels ou menos, ele vai ativar este bit de código apenas naquele momento e ele vai virar a tela para nenhum para esta pequena coisa específica Aqui, esse vídeo.tela cheia. Vamos verificar. Então aqui está o desktop, indo para baixo, e vai ser uma tela móvel por dia, ele se foi. Bem, funciona. Meu texto é branco, embora em um fundo branco. Você pode ver o texto que está um pouco confuso aqui, então devemos entrar em um site totalmente responsivo, mas vamos manter isso focado mais em fundos de vídeo. Se você quer um site completo, há um monte de tutoriais que eu tenho para fazer sites completos, mas vamos tentar e mudar isso para ter uma cor. Tão agradável e fácil. O que faremos é o corpo aqui, diremos que você tem uma cor de fundo. De que cor? Tenho um aqui nas minhas bibliotecas CC. Não estamos usando bibliotecas CC. Você não precisa, eles são incríveis, mas essa é a cor que eu quero. Se eu passar o mouse acima, você pode ver que essa é a cor, então vamos verificar no navegador. Então aqui em cima para vídeo, vamos entrar no celular, um plano de fundo colorido rápido e rápido. Ignore o texto, tudo isso, eu estraguei um pouco. É assim que você lida com vídeos que estão no celular. Pode ser uma cor de fundo, você pode procurá-la para uma imagem de fundo, se quiser, até você. Então, somos nós adoráveis pessoas de web design, temos nosso vídeo indo em segundo plano, e ele muda para um fundo colorido quando ele chega até a tela do celular. 14. 14 Adicione vídeo de fundo a uma caixa de tag de divisor específica em seu site: Oi lá. Neste vídeo, vamos fazer um fundo de vídeo, mas dentro da tag div contendo aqui. Você pode ver este aqui em vez de ser totalmente de fundo, está dentro desta pequena forma de caixa de areia leve agradável aqui. O que você pode ver aqui é quando eu redimensioná-lo, você pode ver o vídeo fica menor e muda. Agora, este vídeo existente é de um tutorial anterior em que criamos um site no Dreamweaver usando o Bootstrap. Vamos saltar para o final e enfiar este vídeo no fundo. A coisa legal sobre isso é que se você já fez os tutoriais anteriores, é praticamente o mesmo, mas um par de pequenas mudanças. É muito mais importante para onde isto vai. Precisamos descobrir em que div tag ele vai entrar, e nós olhamos para isso, eles são como caixa de herói. Este site que eu estou olhando aqui apenas pulou em um tutorial antigo que eu fiz, se você fez meu tutorial Dreamweaver Bootstrap, aqui que nós acabamos. Então o que queremos fazer é eu quero encontrar a caixa do herói, e é aí que eu quero ficar neste vídeo. Para onde é que vai? Você pode ter que brincar com isso, depende de como você formatou seu site. Se você me seguiu exatamente, ele vai entre a fila e esta coluna grande aqui 12. Mas se você fez algo diferente com seu design, o que provavelmente fez, você pode ter que copiar e colar isso. Pode ser que ele vai no recipiente, logo abaixo do recipiente, ou logo abaixo da linha, ou dentro da coluna, ou dentro de outra seção div que você tem, então apenas brincar com ele. É como era antes. Nós vamos colocar em vídeo mesmo e depois SRC para a fonte. Vamos pegar este vídeo daqui e clicar em “Procurar”. Eu não tenho um no site, mas eu tenho meus arquivos de exercícios, minha área de trabalho em vídeo, e esse é o que eu fiz anteriormente na estréia profissional. Desenhe uma caixa de herói, clique em “Abrir”. Não está no meu site atual. Gostaria de copiá-lo? Sim, por favor, onde eu gostaria de colocá-lo? Vou fazer uma pasta chamada vídeos. Ótima. Salvar, legal quase pronto. Queremos como antes, queremos que este seja reproduzido automaticamente e gostaríamos que ele fizesse um loop, por favor. Ok, e vamos fechar essa etiqueta de vídeo. Vamos verificar como isso se parece em um navegador. Ei, funciona. Isso é apenas um corte adicionar um vídeo a uma página. Não como um fundo, então vamos fazer isso a seguir, mas com um fundo melhor. Agora, para fazer isso acontecer, vamos entrar no Dreamweaver, o que precisamos fazer é configurá-lo como um plano de fundo e precisamos dar a ele, poderíamos usar a tag de vídeo. Mas novamente, se usarmos a tag de vídeo em outros lugares do meu site, podemos acabar configurando cada vídeo neste site para um plano de fundo e não queremos fazer isso. Então o que você vai fazer é dar uma aula, lembrar de nossas aulas, algo que podemos adicionar e nomear que podemos escolher. Podemos chamar isso do que quisermos. Coisa de fundo elástico. Nunca uma coluna tanto tempo, não há nada de errado com ele, exceto como eu, Eu desenvolvi um amigo que acaba abrindo meu site e quer rir ou chorar de quanto tempo algumas das minhas aulas são. Estou em main.css. O que eu vou fazer é colocar o meu perto da minha caixa de heróis aqui. Então, logo abaixo, temos um ponto no início, e depois colá-lo para uma classe, calibraces. Dentro daqui, é aqui que vamos adicionar algumas das coisas. Isso precisa ser definido em primeiro lugar. Então a posição vai ser onde usamos fixo até agora e os outros exercícios. Então vamos dar uma olhada em fixo. Significa que sempre estará lá, o que é um pouco estranho para o que queremos. Nós queremos sentar dentro deste div aqui, então vamos usar o outro chamado absoluto. Agora, se rolarmos, ele vai subir e descer com a página. Você pode ver posicionando absoluto, na verdade já está escondido por trás disso. Não está bem nos cantos e elástico ainda, então vamos fazer isso. Isso é como fizemos o vídeo de fundo completo, colocamos uma largura mínima de 100 por cento e vírgula, e uma altura mínima de 100 por cento e vírgula e, em seguida, colocamos a largura e altura lembrar apenas por causa de auto. Isso não vai nos causar nenhum problema neste, mas há momentos em que isso acontece, então basta colocá-lo dentro. Então altura e largura, são auto, auto. Vamos dar uma olhada e está funcionando, estamos chegando lá. Está esticando toda a altura. Há algumas coisas que precisamos fazer. Primeiro de tudo, vamos precisar dele preso neste canto, porque está perdendo. Está a usar este estofamento nesta caixa aqui, por isso precisamos de uma configuração completa no canto. Você pode não precisar para o seu. Então isso é opcional. O meu definitivamente precisa disso. Então, à esquerda, eu gostaria que você fosse zero pixels, então ele vai ser todo o caminho à esquerda. Então vamos definir o topo, para o mesmo, zero pixels. Há borda acabar no topo. Agora o que precisamos fazer é pegá-lo, ele está fazendo tudo o que queremos, ele está redimensionando, ele está responsivo, mas ele precisa ser preso e saber o que a tag div que ele está dentro está fazendo. Precisamos fazer isso pela div do contêiner. O recipiente div é esta banda de herói. Se eu olhar aqui, o seu pode ser diferente. Este é o que eu estou enfiando dentro dele. Então o que eu quero fazer é dizer a esta coisa aqui, “Você meu amigo precisa ter uma posição de parente.” Dizem que ele é parente, esse cara usa isso como base. Temos uma coisa de fundo responsiva. É isso, se você quiser ir de um fundo completo para apenas um dentro daqui. Agora, para nós, uma coisa que não precisávamos fazer, e muitos exemplos você vai fazer é que você deve brincar com o índice C. Você pode ter que definir isso, realmente depende de como você deseja trabalhar, mas dizer que o fundo elástico pode ser tem que ser definido para o índice Z de talvez menos um ou menos 100 não importa, desde que seja abaixo de zero e você pode precisar fazer isso. O que acontece no meu caso é que ele está sentado atrás do cara aqui, o herói da banda está agora no zero, então esse cara está por trás disso. A banda aqui tem uma imagem, então não podemos ver o vídeo. Então o que temos que fazer no nosso caso é, eu provavelmente apenas exclui o índice Z porque parece que não preciso dele. Mas eu poderia fazer menos dois. Então, por trás disso, se o vídeo não carregar em telas móveis, ele carregará a imagem de fundo. Isso é muito legal e muito simples. Você, meu amigo, agora é especialista em vídeo de fundo. É aí que vamos deixar este vídeo, encabeçado. 15. 15 folha de de de: Dica número 1 para adicionar vídeos de fundo em tela cheia ao site, você não pode fazê-lo a partir de dispositivos móveis. É uma droga, mas os fabricantes de dispositivos móveis não gostam que você tenha vídeos de reprodução automática por causa de dados, vai desperdiçar isso, e queima a duração da bateria. A CPU enlouquece quando tenta reproduzir vídeos. Basicamente, desligamos o vídeo quando chegamos ao celular, trocamos com uma imagem, e vivemos com ele. Essa é a gorjeta número 1. Dica número 2 para fazer vídeos de fundo em tela cheia é o tamanho do arquivo, e como obtê-lo super duper pequeno. A única coisa que você realmente precisa fazer é pegar seu vídeo colocá-lo no Adobe Media Encoder. Vá para Personalizar, role para baixo e a coisa com que você quer brincar é algo chamado de taxa de bits. Coloque-o na taxa de bits variável 2, e há opções, há dois pequenos controles deslizantes que conectam 1 e 1,51, e exportam. Você passará de um arquivo de 20 megabytes para um arquivo de um megabyte. É muito bom, e a qualidade é muito boa. Essa é a dica número 2 para fazer vídeos de fundo em tela cheia. Dica número 3 para fazer vídeos como fundo em um site. Isto é para usar especificamente a pequena versão letterbox, onde você tem pequena caixa, e você coloca o vídeo em segundo plano. Ao editar seu vídeo em algo como o Premiere Pro ou o Media Encoder, você precisa cortar as partes superiores e inferiores. Não adianta esticá-lo, então só cobre. Você terá todas essas bandas que um desperdício e que é o tamanho do arquivo, e que é o nosso inimigo quando se trata de vídeos de fundo. Corte-os usando o recurso de corte ou, no Premier Pro, vá para configurações de composição, até configurações de seqüência, e apenas altere a altura para algo menor. Você pode fazer isso no Media Encoder no final também, então essa é a dica número 3 de Eu acho que nós temos oito provavelmente. Dica número 4 todos os oito para fazer vídeos de tela cheia em um site. Este é o que formatos são usados. Praticamente, você precisa MP4, que é o mais compartilhável utilizável lá, e então você precisa de um fallback. Esqueça os OGG OGG agora. É tudo sobre WebM com um M, que é o próximo fallback. Você só precisa de dois arquivos de vídeo. Esses são os dois que você precisa. Dica número 5 para adicionar vídeos de fundo em tela cheia a um site é adicionar todo aquele grão legal, ou desfocagem, ou lavá-lo um pouco. Fazemos isso por duas razões. Um é que parece muito legal, e podemos obter carrapatos de até o topo dele se você escurecê-lo. Mas a outra razão é que temos que usar tamanhos de arquivo muito pequenos, e ele fica um pouco pixelado. O que fazemos é borrá-lo, ou adicionar os pontos, ou o grão do filme por cima para esconder isso. Isso torna menos óbvio que nós propositadamente sujamos em vez de que é apenas um pouco ruim porque nós tivemos que usar baixa qualidade. Temos duas razões: legal e esconder os pixels ruins. Então essa é a gorjeta número 5 de 8, eu acho. Vamos fazer o próximo. Dica número 6 para adicionar vídeos de fundo a um site, os de tela cheia, é que nem todos os vídeos são iguais. Se você tem um vídeo com muitas coisas diferentes acontecendo, sua ação, e há coisas voando ao redor, muitas cores, muitos gráficos em movimento, que vai ter tamanhos de arquivo maiores. É só mais cores, mais coisas acontecendo. As cores estão se movendo, mais dados, arquivos maiores. O que eu fiz neste exercício de aula aqui é que tem um pouco da mão se movendo, e por isso fica muito, muito pequeno. Nem todos os vídeos são criados iguais quando se trata de tamanho do arquivo. Estamos até 5, 6, 7. Eu contei minhas mãos antes do filme começar a correr porque eu nunca tenho certeza de que dica eu estou fazendo, e parece que eu pulei a dica número 6, então nós vamos direto para o 7. Esta dica é fácil. Você pega seu vídeo, e deixa o fundo um pouco mais escuro. Parece bastante legal e temperamental , também reduz o tamanho do arquivo. Isso significa que você pode colocar o tipo por cima. Alguns brancos assumem o topo se você baixou uma cor escura. Essa é a dica número 7 para colocar vídeos de fundo em tela cheia em um site. Estamos até a gorjeta número 8, já contei. Dica número 8, este é o último de como adicionar vídeo a um plano de fundo do site. Ou seja, você pode fazer algumas coisas em CSS, coisas como desfocar, você pode silenciar o vídeo. Não faça nada disso em CSS. Por quê? Como alguns deles não são suportados em todos os navegadores, é assim que [inaudível] da nossa vida. Mas também a grande razão é que se você tem um vídeo e ele tem áudio, esse tamanho do arquivo vai carregar. O fato de você silenciá-lo mais tarde, ele não altera o tamanho do arquivo. Ele faz silenciá-lo e isso vai funcionar, nada de errado com isso. Mas o tamanho do arquivo, todo esse áudio está incluído no tamanho do arquivo. O mesmo com coisas como borrar. Você o desfoca, que na verdade diminui o tamanho do arquivo porque você obtém menos detalhes, a menos que se misture com pixels. Faça todo esse tipo de coisas no vídeo primeiro e algo como Premiere, After Effects ou Media Encoder antes de acessar CSS.