Adobe Dreamweaver CC: web design usando réplicas do Adobe Illustrator

1. Introdução: Ei, meu nome é Dan e nesta série de vídeos, vamos fazer este site de portfólio responsivo usando o Dreamweaver Agora vamos passar por este curso passo a passo aprendendo tudo o que precisamos saber para criar um site. Também usaremos algumas das ferramentas de modelos do Dreamweaver para que possamos fazer alterações em todo o site em nossos sites grandes de forma super rápida e fácil. Também faremos este menu suspenso responsivo aqui do zero. Vamos ter que deixar um pouco de JavaScript e jQuery. Agora eu sou um instrutor certificado pela Adobe, eu também posso ajudar a Adobe a criar muitos dos tutoriais do Dreamweaver para seu site. Também sou palestrante do Dreamweaver na Conferência Adobe MAX em Las Vegas e, melhor ainda, estou dentro da sua cópia do Dreamweaver agora. Vá e abra. Abra o Dreamweaver, vá para ajudar, vá para o tutorial rápido, e lá estou eu dentro da máquina. Este curso é para iniciantes, você não precisa de nenhum conhecimento prévio do Dreamweaver ou da experiência de web design. Vamos usar a visualização dividida do Dreamweaver para que você possa usar todas as boas ferramentas visuais, bem como fazer algumas amines simples aqui no código também. Nesta série terá este design estático aqui que vamos começar com do Illustrator e juntos, passo a passo construir tudo em HTML, CSS e JavaScript. Vamos fazer nossa própria navegação usando jQuery. Faremos ajustes no site para que tudo fique bem em todos os diferentes dispositivos. Trabalharemos com belas fontes e cores e até adicionaremos Google Analytics ao nosso site para que possamos obter informações incríveis sobre quem visita nosso site. Agora web design pode ser bastante complicado, se você nunca se perder, eu estou por perto para ajudar, basta usar qualquer um dos comentários em qualquer uma das páginas. Além disso, você obtém arquivos de exercícios para que você possa jogar junto comigo na série de vídeos, eu também salvar algo chamado os arquivos concluídos. No final de cada vídeo, eu salvo um ou cerca de dois, que você pode comparar o seu com o meu, caso o seu fique um pouco perdido. Confira o link aqui para o site que vamos construir juntos e eu quero que você fique super animado sobre a construção de um site como um profissional. Vejo vocês na aula. Obrigado, pessoal. [ inaudível] [MÚSICA] 2. Arquivos de exercício: Oi, o que vamos fazer neste curso e quais são os recursos? Vamos ter um design que fizemos em uma classe anterior completamente diferente. Foi projeto completo da Web e da interface do usuário usando o Illustrator. Você não precisa ter feito esse curso. É muito útil se você quiser fazer o processo de design, bem como a compilação para que possa ir fazer isso. Mas vamos pegar esse design e transformá-lo em um site totalmente responsivo usando o Dreamweaver. Vamos usar muito a visualização ao vivo neste curso. Em nossos tutoriais anteriores, usei a visualização de código. Tudo bem usando a visualização de código. Vamos usar a versão mais tátil [inaudível] ao vivo do Dreamweaver. Acho que é isso que faz corda. Temos um bastante exclusivo de outros editores de código é que é uma espécie de arrastar e soltar, clique e jogar tipo coisas. Vamos nos concentrar nisso neste curso, um pouco de código. A outra coisa são arquivos de exercícios e recursos, esse tipo de coisa. Há arquivos de exercícios que você pode baixar. Eles vão ser um link na tela que faz um pouco de barulho pop aqui. Vá baixá-los e você pode jogar junto. Há também algo chamado arquivos concluídos. No final de cada vídeo, eu salvo o site onde eu estou fazendo. Só para que se você está se perdendo ou como resolver isso, você pode baixar minha versão e apenas verificar o código e apenas ver onde você pode ter errado. Também para este vídeo, vamos falar sobre comentários e comentários. Eles serão uma seção de comentários em cada página. Se você está tendo problemas e ele simplesmente não está funcionando para você, me deixe um e-mail ou melhor ainda há os comentários na página, então faça isso. Se você chegar a um ponto neste curso, onde você é como, há um muito bom deixar-me um comentário. Esses tipos de comentários são as coisas que realmente ajudam meus cursos a fazer bem e me ajuda a ser uma pessoa do tipo treinador on-line em tempo integral. Se você gosta do curso, deixe um comentário. Sim, acho que é isso. Vamos começar o curso corretamente. 3. Configurando sites: Oi lá. Neste vídeo vamos configurar nosso espaço de trabalho que possamos criar sites incríveis. Agora, este curso em particular vai se concentrar principalmente na visualização ao vivo ou nesse tipo de lado visual de design do uso do Dreamweaver. Você pode fazer este curso totalmente no lado do código, se preferir, mas se você quiser seguir exatamente, nós vamos fazer isso na visão visual. Para fazê-lo, em primeiro lugar, você precisa ter certeza de que você não está no desenvolvedor. Desenvolvedor está bem, mas vamos trabalhar em padrão. Em padrão, vamos abrir um novo documento apenas temporariamente. Ok, arquivo, novo. novo documento, HTML, nenhum, clique em “criar”. Vamos fechar isso em um segundo. Realmente tudo o que queremos fazer é ser capaz de ver isso. Você pode trabalhar na visualização de código aqui, ou dividir, ou viver. Nós vamos trabalhar em split, o que significa que é parte live view e parte code. A outra coisa é que eu dividi o meu horizontalmente. Algumas pessoas preferem verticalmente. Eu não tenho certeza para o que o seu está definido. Então vá para a vista, há o modo de visualização e então há este aqui chamado split. Você pode dividir verticalmente, para que você possa ver seu site desse lado e o código desse lado, qualquer maneira que você gosta. Mas se você vai me seguir, vamos trabalhar na divisão horizontalmente. A outra coisa é que vamos mudar para o painel CSS Designer. Vamos passar muito tempo aqui. O único problema com ele, é bem pequeno por padrão, então vamos fazer duas coisas. Então o painel DOM aqui em baixo, o painel de ativos, e o painel de trechos lá [inaudível] mas eles ocupam um monte de imóveis de tela. Vamos clicar duas vezes na palavra DOM. Ainda está lá em baixo, se precisares. Mas é agradável e pequeno, pois expandiu a visão do designer CSS. Outra coisa que vamos fazer é, se eu pegar meu mouse e passar o mouse, apenas lá. Veja essas camadas, eu vou clicar e arrastá-los para fora e assistir isso. Vai de uma coluna para duas colunas. Acho que esta é a melhor maneira de aprender. Tem tudo agradável e aberto. Mesmo quando você não está aprendendo e quando eu estou fazendo coisas ao vivo, é assim que eu prefiro trabalhar. Agora, se você tem uma tela muito pequena, como um laptop de 13 polegadas ou 11, e você pode ter que colocá-la de volta aqui porque não vai funcionar. Mas eu vou começar aqui, eu tenho o MacBook Pro de 15 polegadas e ele funciona muito bem assim. Você meio que fez algumas configurações. Temos que funcionar perfeitamente. O que vamos fazer é salvar isso. Então, se estragarmos tudo mais tarde, podemos reiniciá-lo, ou se você ligá-lo a monitores diferentes, esse tipo de coisa. Para fazer isso, aqui em cima onde diz padrão, solte isso, digamos que eu gostaria de ter um novo espaço de trabalho. Vou chamar isso de “Dan é incrível” espaço de trabalho. Chame o seu do que quiser. Só significa que se mais tarde você arrastar isso e ele se junta lá e acaba se conectando a isso e você acidentalmente fechar isso e isso, ficou tudo estranho, o que você pode fazer é vir para Dan é incrível e clicar em “Reset Dan is Awesome “e ele o redefine, tudo exceto isso, ao que parece. Eu pensei que iria. Pelo menos leva tudo de volta ao normal, é expandido para fora do lado da mesma largura. Para que meu amigo é como obter seu espaço de trabalho olhar super doce e como salvá-lo e mais tarde redefiní-lo, se você precisar. Tudo bem, vamos começar a fazer um site. 4. Como criar um novo site no Dreamweaver: Ei, ali. Neste vídeo, vamos criar nossa definição de site. Precisamos fazer isso para cada novo site que vamos criar no Dreamweaver, é super fácil, você pode vê-lo aqui, eu tenho uma pasta e dentro dela, tem uma pasta de imagens, que é tudo o que precisamos fazer. Vamos fazer isso agora. Se você estiver seguindo o último tutorial, vamos apenas fechar aquilo que fizemos, vamos configurar o nosso site. Você precisa fazer isso no início de cada novo site. Se você é um web designer, e você tem 10 clientes diferentes, você vai ter que fazer isso 10 vezes diferentes. Se você está trabalhando em seu próprio site, e você só tem um deles, você só terá que fazer isso uma vez. Vamos até Site, Novo Site, dar um nome ao seu site, vou chamar o nosso Portefólio Awesome do Dan. Onde vamos colocá-la? Na verdade, o nome do site não tem nenhuma repercussão além da que você usa no Dreamweaver para localizar todos os seus arquivos. Foi o que pensei para sempre. Pensei que não havia repercussões nisso, pode chamá-lo do que quiser. Agora, estou voltando do futuro. Sou Dan do Video 22. Seu vídeo 4, e eu voltei para lhe dizer, não coloque o apóstrofo em porque web encontrar toda a vida colocando qualquer coisa aqui, eu pensei. Mas eu nunca pensei em colocar um apóstrofo neste pequeno nome de site. Eu não tenho certeza se é um nome de site que tem o problema, ou é o nome da pasta, um deles é o problema. Agora, em vez de voltar e regravar os dois dias com um vídeo em que eu tenho com o apóstrofo aqui, eu acabei de voltar a tempo para dizer, “Não faça isso, não coloque.” Então, para os próximos 22 vídeos, você vai ver esse apóstrofo e olhar para ele novamente. Não ponham apóstrofos aí. Ficar longe de quaisquer chaves estrangeiras como extrínseca, entusiasmados, apenas ter superiores e baixos regulares, e isso não vai causar quaisquer problemas quando chegarmos mais tarde quando fazemos um modelo. Continue e faça tudo, exceto colocar apóstrofos na pasta local do site e no nome do site. De volta aos seus vídeos regulares, e espero não me encontrar com o meu eu passado. Todos viram “De Volta para o Futuro”? Espero que você não seja tão jovem. Certamente todos viram “De Volta para o Futuro”. Suficiente. De volta para ele. Pasta local, isto é apenas onde em seu laptop isso vai ser mantido, eu vou colocar o meu no meu desktop, eu vou colocar o meu em uma nova pasta aqui, e eu vou chamá-lo de Dan Awesome Portfolio. Legal. Além disso, esse nome físico para a pasta não tem nenhuma repercussão. Algumas coisas fazem, obviamente, mas isso não acontece. Clique em “Escolher”. A última coisa que queremos fazer aqui é ir para configurações avançadas, e vamos para a pasta de imagens padrão. Clique no pequeno navegador, você pode ver que ele é colocado dentro daquela nova pasta que eu acabei de fazer, vamos fazer uma nova pasta aqui, e chamá-lo de imagens minúsculas. Isto é algo específico. Chame de imagens com minúsculas ou sem espaços, vamos clicar em “Criar” e clicar em “Escolher”. O que isso faz é apenas nos ajudar mais tarde quando estamos arrastando imagens de todo o nosso computador, Dreamweaver sabe onde colocá-las. É isso. Clique em “Salvar” e que meu amigo é tudo o que precisamos fazer. Se você não pode vê-lo, deixe mudar os arquivos ao longo do topo aqui. Se você não pode ver arquivos, vá para arquivos do Windows, você verá que há minha pequena pasta. Também na minha área de trabalho, há um Portfólio Awesome do Dan. Não há nada aqui, exceto que há uma pasta que tem imagens, e não há nada nela. Mas só para você saber, você cria seu site localmente em seu próprio computador primeiro, e quando você terminar, você empurra para o seu host, alguém como GoDaddy ou Bluehost, e eles servirão para o Window World. Então é isso para configurar o nosso site. Você precisa fazer isso para cada site. Você vai ver todo o meu aqui, eu tenho muitos sites em que eu trabalho. Se você fez isso errado, você pode ir para o site, ir para Gerenciar sites, e você os verá aqui, há o incrível portfólio do Dan, clique duas vezes nele, e você pode voltar para a mesma tela. Vamos entrar no próximo tutorial. 5. Como criar uma nova página HTML no Dreamweaver: Tudo bem, neste tutorial vamos criar uma nova página, vamos chamá-la de índice, vamos trazer um logotipo, vamos vinculá-lo à nossa página inicial, vamos adicionar algum texto alternativo, todas as coisas boas para iniciar qualquer bom site. Vamos começar e fazer isso agora, então cinco vídeos e ainda não temos nada então vamos realmente fazer uma página. Se você for para Arquivo Novo, ou eu vou usar este aqui. Agora a parte essencial como qualquer site é um caso de documento HTML, eu tenho um novo documento, vamos usar HTML e quando se trata de Bootstrap ou None, vamos usar None. Se você está interessado em Bootstrap, eu tenho outro curso completo sobre como usar Bootstrap, mas este aqui vamos criar nossa própria capacidade de resposta em vez de usar o modelo Bootstrap. Então None, certifique-se de que é HTML5, vamos dar o título do nosso documento. Título é realmente importante, você pode usar qualquer texto que você gosta, então eu vou usar Daniel Walter Scott portfólio web design. Por que estou colocando tudo o que leva lá? É porque o que você colocar neste título aqui aparece aqui no Google. Se eu fizer uma busca por mim mesmo, você verá que selar as coisas em azul aqui isso é realmente puxado do título da página então aqui em sonho leaver, vê isso aqui? É daí que vem a escrita azul, por isso é realmente importante, não deixe sem título, porque você nunca vai classificar em qualquer tipo de pesquisa para que você possa ver aqui, é onde ele aparece. Ele também aparece se eu clicar em trazer um laptop.com pode ver no topo aqui, ok, é aí que ele aparece também. É este pequeno nome aqui. Você pode ver aqui eu fiz um monte de boas palavras-chave, materiais da Adobe, mas qualquer um que tem que trazê-la e terminou. Então é também onde ele aparece tanto o azul e Google terminam na pequena guia no topo lá. Então não se esqueça, ele precisa ser exclusivo para cada página que você faz, então, se você tem um 100 páginas em seu site, você precisa de um 100 títulos separados que não é divertido ir e tentar criar, mas tem que ser feito. Depois de fazer isso, vamos clicar em “Criar” e você terá sua primeira página. Agora vamos salvar esta primeira página então vamos para “File Save”, vamos dar um nome a este e esta é uma das poucas páginas onde temos que dar um nome muito específico, temos que chamá-lo index.html. Se alguém vai para o seu site, eles vão para um Daniel é awesome.com, ele vai vir até site não encontrado, ele precisa pelo menos esta página. Isso é considerado sua página inicial e ele tem que ser jorrado exatamente como este ou index.html minúsculo. Outras páginas que temos um pouco mais de liberdade com, mas este definitivamente index.html. Então você vai ver aqui no meu painel de arquivos lá está, eu tenho meu primeiro pedaço de HTML sentado lá e isso é gerado para nós, você pode ver a tag, o título para que você possa atualizar isso ele agora, na visualização de código e não quebrar nada mais excluindo, deixe tudo lá. A primeira coisa que vamos fazer antes de irmos é realmente adicionar algo à nossa página, então vamos clicar aqui em cima na visualização ao vivo no topo aqui e vamos para “Inserir” e acima do topo aqui vamos escolher HTML e vamos para clicar neste chamado a imagem e vamos trazer agora logotipo. Agora, se você ainda não, vá para o link na tela e baixe os arquivos de exercícios, eles são gratuitos para baixar. Já baixei o meu, eles estão no meu desktop e eu vou abrir minha pasta de imagens e aqui eu quero o logotipo chamado, eu vou usar o PNG assim logotipo hífen Daniel hífen, Walter, hífen Scott. Vamos clicar em “Abrir” e, em seguida, meus amigos é o nosso logotipo em nossa página, é um pouco fora de branco, mas nós vamos colocar isso em um fundo escuro mais tarde e é quase isso. Sempre que você colocar em uma imagem, você pode ver aqui embaixo isso é o que parece na visualização de código, o que precisamos fazer é adicionar algo chamado texto alternativo ou texto alternativo para cada imagem. Ele é usado pelo Google para ajudar a referenciar o site e um site que tem muitos bons textos alt vai ajudar com seus rankings, nosso site que não tem texto alt tão propensos a fazer muito mal nos resultados da pesquisa. Para atualizar o texto alt, clique no logotipo aqui, clique no menu pequeno maior novo e pressione o texto “Alt” aqui, dê-lhe um bom nome de palavra-chave, então eu vou colocar no meu nome. Isso pode ter espaços e não precisa de nenhuma sintaxe especial real, mas apenas boas palavras-chave então eu chamo de web design, portfólio, logotipo. Eu poderia chamá-lo logo, mas o único problema com isso é que não boas palavras-chave e eu estaria competindo com todas as outras pessoas que tinham um site com o logotipo da palavra-chave, eu quero competir com um nicho muito específico, Meu nome, web, logotipo projetado. O que também vamos fazer antes de sair daqui também e isso é específico apenas para o logotipo da página inicial e é muito comum clicar no logotipo para voltar para a página inicial, as pessoas vão ouvir listas têm um botão na navegação esta é casa, eu vai apenas assumir que você pode clicar no logotipo e ele irá levá-lo de volta para a casa. Agora isso já é uma casa, o que é estranho, mas vamos usar esta página como nosso modelo para fazer outras páginas. Então, o que vamos fazer e onde ele diz link aqui, vamos clicar em navegar para arquivo. Nós vamos dizer isso quando clicado ele volta para index.html, o que significa algo estranho no momento, porque ele apenas volta para si mesmo, mas mais tarde, quando copiamos e colamos sua página e ela se torna a página Sobre Nós, ela se tornará mais útil. Você pode ver aqui em cima, ver pequena estrela significa que esta página não é salvo, “Arquivo”, “Salvar”, para se certificar de que é tudo agradável e limpo. Tudo bem, então nós fizemos uma página, nós colocamos um logotipo nela com editar pequenos ticks com editar um link para ela e nós estamos começando. Certo, vamos para o próximo tutorial. 6. Como visualizar seu site da melhor forma no Adobe Dreamweaver: Ei, estamos na versão super extrema close-up para que eu possa mostrar a você como melhor visualizar seu site usando o Dreamweaver e a visualização do navegador em tempo real. Vamos dar uma olhada. Então, enquanto você está trabalhando, você tem em split view, podemos ver o código e podemos ver a visualização ao vivo do topo aqui, e isso é totalmente bom para visualizar seu site. O único problema é que há linhas azuis por todo o lado. Você pode arrastar esta borda aqui para redimensioná-la. Para ver o que parece em diferentes pontos de vista. Meu único problema é, clique duas vezes para torná-lo caber de volta para fora novamente, é que ele nem sempre atualizar perfeitamente aqui e é melhor do que nunca foi, mas eu sempre gosto de pré-visualizar no navegador. A primeira coisa que você precisa fazer é certificar-se de que você tem o Google Chrome instalado. Se estiver a trabalhar num Mac e tiver o Safari, mas não o Google Chrome, tem de o transferir e instalá-lo. Por quê? Como todo mundo usa o Google Chrome e, se ele funciona no Google Chrome, é mais do que provável que funcione em muitos outros navegadores. Então teste nesse. É incrível a porcentagem de pessoas que realmente usam o Chrome em comparação com qualquer outro navegador, incluindo o Internet Explorer ou Safari ou Firefox ou qualquer outra coisa que você usa. Você também pode testar lá, mas certifique-se de que você instalou o Google Chrome. Depois de instalá-lo, ele deve aparecer em, em Arquivo, Visualização do navegador em tempo real. Deve aparecer aqui como o meu. Se isso não acontecer, você pode ir para Editar lista de navegadores e ir e encontrá-lo. Então, uma vez instalado, você volta exatamente onde estávamos, ou, mais facilmente, há um pequeno ícone na parte inferior aqui, e você pode ver aqui Visualização no Chrome. O navegador aparece e você pode vê-lo aqui. Aí está o meu logotipo e eu posso clicar nele e está tudo bem. A coisa legal sobre a nova versão do Dreamweaver é que isso é chamado de Visualização do navegador em tempo real. Tudo o que realmente significa é que quando eu atualizar o código aqui em, eu vou mover isso para que você possa ver os dois. Quando eu atualizar isso e dizer que realmente eu quero que o meu logotipo para ser um 131 pixels de largura, você pode vê-lo apenas atualizado perfeitamente sem eu ter que sair e reiniciá-lo ou salvá-lo. É dinâmico. Significa que não sei se quero esse tamanho. Quando eu excluo, ele apenas atualiza enquanto eu estou trabalhando. Agora, durante este curso, estamos limitados à tela que você pode ver, mas eu realmente tenho dois monitores aqui no meu computador. Então eu tenho este em outra tela. O que você não pode ver agora. Então eu tenho isso em todo o barulho aqui, e isso só significa que quando eu atualizar este neste monitor aqui que você não pode ver, ele está atualizando visualmente para que eu possa vê-lo. Então, se eu estiver me escondendo na Visualização de código fazendo algumas coisas, eu posso ver os ajustes acontecerem no caso de eu cometer um erro ou apenas para visualizá-lo como ele está indo. Estamos indo para a vida real falando com Dan para te mostrar. Enquanto estou trabalhando, tenho duas telas para cima. Eu tenho o Dreamweaver neste e minha tela grande mostrando o Google Chrome com uma visualização do navegador em tempo real. Então eu clico nisso e depois clique em “Mostrar em Real-Time Browser Preview”, assistindo lá. Deixe-me fazer uma grande mudança para que você possa ver facilmente na câmera. Então eu vou pegar aqui imagem, eu apenas desligá-lo. Veja isto. Bom, foi-se embora. Então eu faço uma mudança aqui e ela aparece instantaneamente aqui. É realmente útil se eu estou trabalhando aqui e parece tudo bem, eles eu sou como oh, algo mudou por aqui. Então, sim, é uma maneira muito comum de trabalhar como um web designer. Duas telas, elas parecem incríveis. Então, obrigado, Dan verdadeiro. É assim que você visualiza no seu navegador. Você pode fazer o check-in aqui, mas certifique-se de verificar novamente no navegador real. Vamos olhar para verificar em celulares e tablets mais tarde quando realmente temos algo para verificar sobre eles. Então é isso. Vamos para o próximo tutorial. Vejo você lá. 7. Movendo tags no Dreamweaver: Neste vídeo, vamos colocar tags e configurar as tags e apresentá-lo a este painel DOM. Vamos fazer isso agora. A primeira coisa que precisamos fazer é colocar uma etiqueta de cabeçalho. Agora, aqui, em Inserir um HTML, seu site terá três partes principais para ele. Vai ter um cabeçalho. Vai ter uma seção principal. Vai ter um rodapé. Isso é o topo, o meio e o fundo. O cabeçalho e rodapé são geralmente vai ser o mesmo em cada página e vamos transformá-lo em um modelo mais tarde. O principal é onde tudo vai mudar para a sua página real. Colocamos o logo em primeiro lugar, o que é um pouco estranho. Você provavelmente coloca seu cabeçalho em primeiro lugar e depois o logotipo dentro dele. Eu fiz isso porque eu queria ser capaz de mostrar a você como reordenar etiquetas se você colocá-los no lugar errado. O que vamos fazer, realmente não importa onde você foi clicado aqui na visualização ao vivo. Clique no botão Inserir HTML no cabeçalho, e ele aparecerá em algum lugar. Não importa se está abaixo ou acima do logotipo aqui. Agora, o que o Dreamweaver também faz é que ele adiciona alguns ticks pré-existentes a ele. Basta colocar carrapatos do suporte porque se este tick não aparecer aqui, você não pode vê-lo porque ele não tem altura, largura, dimensões. O cabeçalho entra e você não pode vê-lo, então é um pouco estúpido. Eles adicionam alguns carrapatos aqui para ser útil. Este carrapatos é excluído praticamente imediatamente depois que você começou a usá-lo. A primeira coisa que queremos fazer é colocar meu logotipo dentro do meu cabeçalho. Você vê aqui em baixo na minha visualização de código, lá está o meu cabeçalho. Começando e terminando, aqui está o logotipo com hiperlinks e você pode ver os carrapatos antigos e o tamanho dele. Essa coisa eu gostaria de ir dentro do cabeçalho. Há duas maneiras principais de fazer isso. Na verdade, há alguns, cabe a você se você prefere aderir às ferramentas k ou você gosta de trabalhar na visualização de código, é totalmente com você. Vamos usar a maneira oficial que a Adobe recomenda. Eu abri meu painel DOM aqui, se você não pode ver que ele está em Window DOM, e aqui está o chefe do meu site. É tudo o que o computador vê. Você pode ver como meu título aqui me diz qual teclado estou usando. Mas o usuário não vê nada dessa cabeça. Ele vê as coisas que acabaram no corpo. O corpo contém o meu cabeçalho, contém a minha imagem, e é sobre isso no momento. Aqui no meu painel DOM, você pode ver que há o meu corpo, eu tenho que segurar isso. Há o meu cabeçalho separado do meu a tag, que é este link com a minha imagem nele. Você pode apenas clicar e arrastar o a dentro do cabeçalho e eles vão para dentro e eles se tornam uma família feliz. Então eu posso passar e excluir esse texto de espaço reservado. Você pode fazer isso daqui de cima, porque ele vai ficar fazendo isso aqui na visualização ao vivo. Cortar, e agora é isso. Temos um cabeçalho que tem a minha imagem dentro dele com minha etiqueta que é como colocar as coisas no lugar errado. Você vai ter que arrastá-los para o DOM. Basta arrastá-los para a tag direita ou eu vou excluir tudo isso, é que aqui está o meu texto de cabeçalho e, em seguida, excluir o texto aqui. Pegue tudo isso, então de uma etiqueta para uma etiqueta, corte-a. Põe o meu curser ali e cola-o. Realmente não importa como você gosta de fazê-lo, arrastá-lo através do DOM, ou apenas copiá-lo e colá-lo aqui. Há muitas vezes em que é mais fácil fazer um e outro. Estou a dar-vos as duas técnicas para que possam trabalhar neste curso. Vamos clicar em Salvar, Arquivo Salvar. Vamos seguir em frente para começar a estilizar nosso cabeçalho. 8. Como criar, editar e estilizar sua primeira folha de estilo de CSS usando o Dreamweaver: Oi lá. Neste tutorial vamos criar nossa primeira folha CSS você pode vê-lo lá. Na verdade, vamos estilizar o nosso cabeçalho. Não se preocupe, não vai ficar sempre tão verde. Nós vamos adicionar um pouco de preenchimento e alguns CSS impressionante. Prepare-se para fazer sua primeira folha CSS. Até agora criamos uma página HTML. É index.html. Livrou-se de HTML indo não muito. Agora, precisamos ir, e estilizar seu cabeçalho. Nós o estilizamos usando CSS ou folhas de estilo em cascata. Para criar uma folha de estilo, vamos para o nosso painel de designer CSS. Eu vou fechar o DOM do último tutorial e aqui, se você não pode ver o seu CSS Designer, lá está ele. Se o seu não se parece com o meu, você tem que arrastá-lo para mais ou menos sobre lá, e o que queremos fazer é em Fontes, vamos clicar no botão “Mais”, e vamos para Criar um Novo Arquivo CSS. Você pode dar o nome que quiser, mas todos chamam de styles.css, e vamos clicar em “Ok”. Algumas coisas acontecem. Em primeiro lugar, na minha área de trabalho, no meu Portfólio Awesome do Dan que eu fui criado, é apenas uma folha de estilo separada, há o arquivo HTML de índice que fizemos, e há um outro cara. Não há nada lá dentro. É onde colocamos todos os nossos estilos. Nós os mantemos separados. Então de volta ao Dreamweaver. A outra coisa que você vai notar é que meu HTML atualizado um pouco. Você pode ver que o Dreamweaver vinculou os dois? Então é assim que o arquivo Index sabe que styles.css existe porque no momento eles são arquivos separados, e aqui na cabeça, o Dreamweaver diz vinculado à folha de estilos, por favor, e é isso que ele faz. Também uma coisa útil para o Dreamweaver é essa coisa chamada o botão de documentos relacionados que você pode ver na parte superior aqui. Ele vincula a ele porque é uma folha separada que diz que eu posso clicar nele, e lá está ela. Há que styles.css listado na parte inferior. Está a mostrar-te no topo do meu índice, mas no fundo está a mostrar-te aquela folha separada. Isso é o que os codificadores de código fonte, eles devem apenas chamar isso de HTML. Então pense quando você vê o código-fonte, pense em HTML, e isso aqui é outro documento. Voltar ao HTML. É assim que você cria e vincula uma folha de estilo para ser fácil. Agora nós estamos indo para ir, e estilo são cabeçalho. Para fazer isso, temos que ter certeza de que você pode estar definido como Current. Atual é incrível quando você sabe o que está fazendo, e vamos fazê-lo um pouco mais tarde no curso, mas manter o velho. O velho torna a vida mais fácil. O que vamos fazer é clicar aqui. Realmente não importa onde você clica na verdade, mas nós vamos criar nosso primeiro estilo. Trabalhamos nesses procedimentos aqui. Trabalhamos em todas essas caixas. Primeiro de tudo, dizemos, eu quero que o estilo entre no styles.css. É muito incomum ter mais de uma folha de estilo. Ocasionalmente você pode ter dois se você estiver usando como um modelo, como Bootstrap, mas nós vamos ter apenas um CSS para todo este documento. Consultas de mídia, vamos entrar mais tarde quando olharmos para celular e tablet. Vamos pular isso no momento. Vamos enfiá-lo em algo chamado Global, e vamos criar essa coisa chamada Seletor. Vamos fazer muitos seletores, e isso seleciona a coisa que queremos estilizar. Vou tocar “Plus”. Aqui, é padrão para o que eu selecionei. Mas eu não quero a imagem que está dentro da etiqueta de adição, que está dentro do hit. Eu só quero estilizar meu cabeçalho. Você pode apenas digitar. Cabe a você se você obtê-lo por padrão ou se você apenas tem que digitar no cabeçalho. Estou começando essa coisa aqui chamada cabeçalho. O que eu quero fazer com este cabeçalho? Eu vou clicar em “Cabeçalho” aqui, e o que eu gostaria de fazer é antes de tudo, vamos apenas mudar a cor de fundo, muito simples. Tenho essa longa linha de coisas que podemos estilizar com CSS. O que o Dreamweaver faz é junto com o topo aqui, ele coloca em pequenos grupos. Este aqui é Layout, você pode vê-lo lá, e este Tipo, digita isso. O que eu faço é clicar neles para saltar pela lista. Você pode deslizar para cima e para baixo, totalmente até você. Vou saltar para este chamado Fundo, porque é cor de fundo, vamos pegar verde grande o suficiente. Para escolher cores usando este slide esta coisa para cima e para baixo até obter a tonalidade direita, clique, segure e arraste o pequeno círculo ao redor até encontrar uma cor que você gosta. Há a versão escura e clara ou apenas movê-la por aqui, e isso é o quão transparente é. Vamos escolher um verde grande o suficiente para o momento. Vou mudá-lo em um minuto. Vou clicar em “Retornar” para o meu teclado. Agora, temos um cabeçalho que tem algum CSS, e que meus amigos é tudo CSS é. É uma folha separada à qual você adiciona alguns estilos, e você apenas certifique-se de usar a nomeação correta. Nós combinamos o cabeçalho da palavra aqui, meu HTML com o estilo aqui e meus seletores, e você acabou de colori-lo. Agora, vamos dar uma olhada em nossa folha CSS. Vamos para styles.css, lá está. É assim que uma folha CSS se parece. Em termos de codificação para a internet, as folhas CSS são as mais simples de olhar. Aí está o cabeçalho da palavra. Ele corresponde completamente na palavra e na sintaxe aqui no meu HTML, e diz background-color: hash é igual, e essa é a cor. Se você passar o mouse sobre ele, há a cor lá, e ela sempre termina em um ponto-e-vírgula. Também está embrulhado nessas chaves. Essas são as coisas da sintaxe. Você pode digitar CSS perfeitamente bem. Muitos web designers fazem. O que estamos fazendo no Dreamweaver é que estamos usando o painel de design CSS para fazer o trabalho pesado. Este conjunto de caracteres no topo aqui só diz que eu estou usando um teclado Inglês. Vamos voltar ao código-fonte. O que eu quero fazer é colocar um pouco de espaço no topo e à esquerda deste logos para que não seja apenas encravado contra o lado. Eu me certifico de trabalhar no meu styles.css na versão Global do meu cabeçalho. Você pode ver aqui que temos estofamento e margem. Acolchoamento e margem é uma boa explicação agora. O estofamento é o interior da caixa. Veja isso, se eu clicar em segurar e arrastar isso para a direita, ele me dá preenchimento, então ele move o logotipo para baixo no momento 36 pixels. Se eu desfizer isso, a margem faz uma coisa semelhante. Ele empurra para baixo de cima, mas empurra do lado de fora da caixa. Se eu não tivesse uma caixa colorida aqui, se não fosse verde, você não notaria a diferença. O logotipo ainda se move para baixo nessa certa quantidade de pixels. Às vezes, realmente não importa se usar margens ou estofamento. Às vezes, obviamente, no nosso caso, é porque eu quero o estofamento dentro da caixa verde. Agora, de onde posso obter minhas medidas? Agora, se você está trabalhando com um designer, eles deveriam ter enviado algumas especificações. Quão detalhadas são essas especificações? Provavelmente não vai ter o quão longe o logotipo está do topo, mas você vai ter um visual, e nós podemos medi-lo. Agora, se você é o designer do lado visual e da codificação, vai ser ainda mais fácil porque você vai ser capaz de saltar para o seu arquivo. Agora, realmente não importa se você projetou isso no Photoshop ou no Adobe Illustrator. Ambos têm ferramentas de web design muito boas. Tenho cursos sobre os dois. Se você quiser fazer o estágio de design, vá conferir isso. Nesse caso, estamos projetando algo que projetamos em outra série de tutoriais em vídeo no Illustrator. Vamos abrir o design final a partir disso. Agora, está nos seus arquivos de exercícios. Abra o layout do Illustrator e abra esse chamado Portfolio Website.ai. Eu abri. Aqui está. Este é o meu projeto. Agora, eu quero começar a tirar medidas a partir dele. Vou dar um zoom, dar uma olhada nesse cara. Quero a altura e os lados aqui. Agora, a maneira oficial é que há uma ferramenta de régua, então eu solto uma ferramenta, ferramenta de medição, e você clica uma vez lá, você clica uma vez lá, e isso lhe dá a largura. São 19 do lado. Você pode clicar uma vez aqui, você clicar uma vez lá, e você pode ver que são 10 da altura. Cerca de 20 e 10, nunca é exato. Basta manter os pixels inteiros, as pequenas medidas de qualquer maneira, então apenas coloque os pixels inteiros. Essa é a maneira oficial. O que eu costumo fazer é pegar a ferramenta de retângulo, e usar isso. Por quê? Porque ele se encaixa, o que é muito legal, você pode ver, ele apenas se junta, e realmente quer encaixar na idade das coisas. Se o seu não for para Exibir e verifique se o guia inteligente está ativado. Aquele ali, que vai ficar nas bordas. A outra coisa boa é assistir isso se eu puder clicar aqui, e ele corta direto para o canto, e você pode ver que há minha altura, e você pode ver que há interseção. Então eu sei a minha altura e largura de uma só vez. Você pode ver que é 19 do lado, e tem uma altura de 10 pixels. É o que vou usar para traduzir para o Dreamweaver. Quando estou construindo um site, e eu tenho meu design aqui no Photoshop ou no Illustrator, isso realmente não importa. Eu puxei minhas medidas de, eu estou indo e voltando entre esses dois programas. Dreamweaver e ilustrador no nosso caso. O que eu quero fazer é que eu gostaria de ter uma altura de 10, e eu gostaria deste lado esquerdo de 19. Você pode ver, empurrou 10 para baixo, 19 para a frente. Eu vou fazer do lado direito também porque nós vamos ter alguma navegação nesse lado eventualmente. O mesmo para o fundo. Eu quero 10 na parte inferior só para que haja uma lacuna que combine com o topo. Meus amigos, é assim que se cria uma folha CSS. Nosso styles.css, e nós fizemos alguns estilos básicos usando nosso painel CSS Designer. Se você estiver usando uma versão do Dreamweaver como CYST ou anterior, não terá o painel Designer. Isso é uma droga porque este curso é baseado em torno do painel CSS Designer, e é incrível. Você pode ter que olhar para atualizar. Você pode entrar neste curso sem ele, provavelmente não. Você pode querer conferir minha versão de codificação do curso Dreamweaver. Vá verificar isso. Vamos entrar no próximo tutorial onde olhamos para a edição de regras CSS. 9. Como alterar ou ajustar os estilos de CSS no seu site do Dreamweaver: Ei, gente incrível. Neste vídeo vamos transformar esta caixa verde feia e editar nosso CSS nesta linda caixa cinza. Então agora vamos para ir e ajustar nossa folha CSS. Digamos que não temos nada selecionado. Vamos clicar em algumas coisas aleatórias. Um tipo de fazer isso não funcionar legal. Então, haverá muitas vezes neste curso que vamos fazer um estilo e então você diz, “Eu preciso mudar esse estoque.” Então o que vamos fazer é ir e ajustá-lo. A maneira mais fácil é não importa o que você tem selecionado aqui e basta clicar em estilos CSS são globais. Em seguida, clique no estilo que você deseja. Mais tarde neste curso vai ficar mais tempo dos estilos no momento é super fácil porque temos apenas um seletor, e pressione enter. Agora vamos fazer um ajuste. Agora há muitos ajustes aqui. O que você pode fazer para tornar a vida um pouco mais fácil de ver esta opção, isso é mostrá-lo, eu amo isso. Também pode ser uma verdadeira dor quando você é novo nisso, que ele está apenas mostrando as coisas que você definiu e você está, “Quais foram as outras coisas?” Foram os tamanhos de fonte e outras coisas. Você vai se lembrar que você pode ativar e desativar isso durante este curso. Tudo o que faz é certamente que as únicas coisas que mostram são as coisas que você realmente fez. Fizemos o preenchimento e a cor de fundo. Então o que eu quero fazer é mudar a cor de fundo para preto. No nosso caso, vamos usar por padrão a maior parte do tempo que vamos usar números hexadecimais é numeração hash. Você pode movê-lo? Você pode ver esses números correspondem à cor. Agora o que queremos fazer é eu quero diminuir a capacidade deste fundo, então temos que usar este RGBA. É o formato mais novo. Não há verdadeiros feitiços certos ou errados que uma versão ligeiramente mais antiga. RGBA é a versão mais recente. A razão pela qual é legal é porque tem um no final, o que significa alfa, transparência, o que significa isso. Esses números hexadecimais não têm. Você pode ver que eu posso fazer uma leitura ligeiramente transparente. Vou arrastá-lo para o preto. Você pode ver agora que está meio cinza. Mas mais tarde, quando tivermos algumas imagens por trás dela, vai ser um pouco transparente. Cabe a você se você quer fazer isso agora ou mais tarde, quão escuro? Vai ser difícil saber até termos as nossas imagens por trás dele e podermos ajustá-las mais tarde. Outra coisa que você pode fazer é dizer que este painel aqui está apenas deixando você louco, você não pode simplesmente saltar para estilos CSS. Você pode ver que há meus estilos. Você pode ver que o mesquinho precisa mudar. Posso mudar isto para 12 no topo e no fundo. Realmente não importa se você deseja usar a visualização de código ou se deseja usar o painel CSS Designer. Mas neste curso nós vamos estar aderindo principalmente ao CSS Designer. Então, de volta ao código-fonte. Uma última coisa antes de irmos é salvar tudo. Então, sempre que eu faço um ajuste para o meu CSS, mudanças rodada enter, Você vai notar que o styles.css nos leva pequenos astricks aqui. Eu quero ser salvo. Mas porque eu estou no meu código-fonte visualizando meu HTML ir “Arquivo”, “Salvar”. Nada acontece em como, então eu preciso ir e fazer o algo chamado Arquivo Salvar tudo. O único problema com o salvar tudo é que é um longo caminho e o seu não terá um atalho. Eu fiz um atalho para o meu porque é algo que você deve fazer antes visualizar qualquer coisa em sua visualização do navegador em tempo real ou mais no caso do Chrome, você vai salvar tudo, e isso significa que ele salva isso mais a folha CSS ou talvez alguns JavaScript que você tem aberto. Então, salve tudo para fazer o atalho em um Mac, vá para o Dreamweaver ou atalhos de teclado no PC. Acho que é menos de um minuto e anote o fundo. Há um aqui em algum lugar. Estes são atalhos de teclado, você pode encontrá-lo. A primeira coisa é que vamos fazer isso para comandos de menu. Vamos encontrar o arquivo, salvar todos vieram aqui. Vamos adicionar mais o atalho. Ele vai dizer que você não pode modificar o padrão sit tomou. Vamos criar o nosso próprio. Pode chamar isso do que quiser. atalhos do Dan Dream Weaver. Alta qualquer metade. Entenda. Então vá para o arquivo e vamos clicar em Salvar tudo agora, mais e podemos escolher qualquer coisa que gostamos. Estou usando o comando Shift A. de um PC na nave de controle A. Você pode usar o que quiser. Isso não importa. O que você acha que vai se lembrar de Ots e sim, é assim que vamos fazer. Pode mudar muito bem. Clique em “Ok”. Agora, sempre que eu vou, eu posso apenas apertar Command Shift a e ele salva tudo. Então, quando você vai e pré-visualização e seu navegador fazer o turno de comando Um primeiro tudo tem arquivo salvar todo o caminho, apenas para que tudo esteja atualizado porque às vezes você pode estar visualizando algo no Chrome e ir, ele não está funcionando. Pensei que tinha mudado isso e é só porque você não guardou os documentos. Tudo bem, isso é como editar CSS e como criar um pequeno atalho desativar no próximo tutorial. 10. Como centralizar seu site no Dreamweaver usando um contêiner: Ei, neste vídeo vamos levar nosso site, que atualmente se estende até o infinito. Nós vamos fazer isso com ele; onde agora está tudo centrado e tem apenas uma largura máxima de cerca de 1200 pixels. Quando eu o redimensiono, e está sempre no centro. Vamos fazer isso agora usando o Adobe Dreamweaver. Atualmente, se eu visualizar em um navegador essa coisa meu cabeçalho continua para sempre. O que eu gostaria que você fizesse é ficar aqui no meio quando chegar a uma certa largura, largura máxima de cerca de 1200 pixels. Caso contrário, fica bem no meu laptop aqui. Mas se você não estiver, em uma tela muito grande, como um iMac. Eu sou um dos grandes caras de 27 polegadas, você vai ter seu logotipo no lado e sua navegação vai ser como um quilômetro para a direita, no entanto, este lado. Precisamos de algum tipo de limites máximos e queremos que seja centrado, esquerdo ou direito. Vamos fazer isso no Dreamweaver usando um contêiner. É bem fácil. De volta ao Dreamweaver. Aqui no Dreamweaver, eu preciso embrulhar tudo o que posso ver na minha página em um contêiner. Isso inclui, meu cabeçalho no momento e é sobre isso. Então o corpo é tudo o que vejo na página, então eu quero o cabeçalho aqui embaixo. Quero que todos eles estejam dentro de um recipiente que eu possa centralizar. Em seguida, o cabeçalho virá junto para o passeio, com todo o site dentro deste recipiente. Para fazer isso aqui na minha visualização ao vivo você pode simplesmente clicar no seu “Cabeçalho”. Quero ver este cabeçalho aqui. Se você encontrar você clicando na imagem e você não pode realmente encontrá-lo, o que você pode fazer, você vê aqui em baixo, isso é chamado de seu seletor de tags. Eu tenho minha imagem selecionada lá, ela está lá. Há uma etiqueta à volta dele e depois há um esconderijo em torno disso e há um corpo em volta disso. Esta é uma boa maneira de selecionar sobre essas coisas. Clique no “Cabeçalho” ou clique aqui no lado. Vamos para a Insert. Em HTML vamos fazer essa coisa chamada div. Divs são super comuns em web design; eles são divisões de espaço. O que vamos fazer é clicar sobre isso e vamos obter essas opções aqui. O que está me perguntando é, se eu quero que esta div seja colocada antes da coisa que eu tenho selecionado, que é um cabeçalho. Eu quero depois disso? Eu quero embrulhá-lo por aí? Enrole o lado de fora ou eu quero aninhá-lo? O que significa que eu quero um atolamento dentro do cabeçalho? Como as nossas imagens. No nosso caso é rep, ok, eu tenho o cabeçalho selecionado. Eu gostaria que este recipiente para envolver em torno do exterior para que o cabeçalho está dentro. Vamos clicar em “Rep”. Provavelmente é melhor ver aqui em baixo na visualização de código, você pode ver que esta div é enrolada em torno do cabeçalho. Incrível. Agora div é um nome genérico real para contêiner. Vamos usar muitas etiquetas div por todo o site. Precisamos dar um nome para que possamos dizer a ele para fazer uma coisa específica. Porque se eu disser div, quero que você seja centrada. Cada div em todo este site vai ser centrado e isso não vai ser o que queremos. O que fazemos é para pods, definimos o nome aqui e o que ele faz, e então vamos aplicá-lo aqui na visualização ao vivo. Para definir o nome, fazemos aqui no meu design CSS um painel, clicamos em “Estilos”. Nós dissemos como ficar global e vamos dar-lhe um nome, para o seletor clique no botão “Plus”. Agora, até agora nós definimos coisas que já existem em nosso HTML. Você pode ver aqui nós definimos cabeçalho. Você pode ver aqui quer definir o corpo. Coisas que já existem. O que eu gostaria de fazer é dar a este um novo nome; um que não existe na página agora, um nome realmente único, porque se eu começar o estilo do div, lembre-se que ele vai se aplicar a todos eles. A forma como fazemos estes únicos é adicionar um nome a eles e estes são chamados classes. Pense que um seletor de classe é apenas um nome que eu estou dando a ele e a maneira como você define classes é você colocar uma parada completa ou um ponto no início do seu nome. Isso diz à Internet que isso é algo específico que eu inventei e eu vou chamar meu contêiner. Você chamaria qualquer coisa. Você poderia chamá-lo de sanduíche de banana e ainda funcionaria. Estamos ligando para o nosso contêiner. Se você vai usar sanduíche de banana, você pode usar espaços. Você precisa ter certeza se você vai fazer sanduíche de banana, você tem que usar um sanduíche espacial. Então você teria que explicar para quem trabalha no seu site e explicar por que chamou seu recipiente de sanduíche de banana. Mas de qualquer forma, estamos dando um nome para garantir que tenha uma parada completa no início. Dê um nome, use letras minúsculas. Na maioria das vezes ele vai funcionar com superiores e baixos, mas não funciona. Agora aqui você vê onde diz “show SIT”. Vamos desligar isso. Tivemos isso em um tutorial anterior. Mostra-te tudo o que se aplica a este contentor até agora e não há nada. Nós vamos ganhar bilhete para que possamos vê-los todos. A primeira coisa que vamos fazer para centralizar nosso site é que vamos dar uma largura máxima. Vamos dizer, em vez de ficar tão grande quanto você quiser para sempre, vamos dizer que eu gostaria de uma largura máxima e vamos usar, vamos realmente combinar com o que fizemos aqui no Illustrator. No Illustrator, decidimos que nossa maior largura para a qual projetamos é de 1200 pixels. Agora este não é um tamanho específico absoluto que precisa ser, você pode estar acordando para 1024, que era um tamanho realmente comum. Doze centenas é mais comum agora; isso continua mudando. Depende do que você quer que o maior tamanho seja. Siga-me. Faça 1200, funciona bem. menor para o maior tamanho que você precisa ser é provavelmente estanho. Estanho 24 ou 1.024. Não vá menor do que isso. Volte para o Dreamweaver. Eu quero dizer é que você pode chegar a uma largura máxima de pixels e você só pode ter 1200 de largura. Por alguma razão Dreamweaver no momento, duplamente digita muitas das minhas cartas. Você verá isso ao longo deste curso. Eu não posso fazer isso parar. De qualquer forma, 1200 pixels é a largura que vai ser. Vou pré-visualizar em um navegador. Quando eu esticá-lo, vou movê-lo para cá e esticá-lo para fora por peça. Não funciona. Por quê? É porque o criamos no Dreamweaver, mas ainda não o aplicamos. Vamos entrar no Dreamweaver. O que eu quero dizer com isso é que nós criamos aqui em baixo e nós o instalamos e dissemos que é largura máxima. Mas aqui não aplicamos na minha div, então precisamos adicioná-la a ela. O que você precisa fazer é selecionar a div. Se você não pode selecioná-lo e dizer que você tem isso clicado, lembre-se que a Tag selecionada aqui é realmente útil e ele agarrou a div. Aqui você pode adicionar uma classe ou um ID, e nós vamos digitar nossa classe. Agora, o que se passa no início de uma aula? Isso mesmo, um ponto final ou uma parada completa. Você pode vê-lo lá porque o Dreamweaver é super útil, ele na verdade adicionou o contêiner de palavras lá para mim. Eu poderia digitá-lo, mas ele pré-selecionou para mim, havia 10. Agora vou obter uma pré-visualização em um navegador. Mas eu vou primeiro fazer é desativar um atalho legal, lembre-se. Caso contrário, o arquivo salvar tudo. Agora vamos verificá-lo em um navegador. Agora que div chamado contêiner diz para não ser nada maior que 1200. A razão pela qual eu digo para não ser algo maior é porque eu realmente quero que ele seja menor; porque nós vamos descer para o tablet e coisas móveis. Em vez de usar apenas largura use max-width, então vá não mais do que isso, mas embaixo disso, faça o que quiser. Nosso próximo problema é que não está centrado. Ele está fazendo a largura certa, mas não está centrando na minha página. É que eu não sei, passamos por uma transformação no web design; onde todo mundo queria para a esquerda, ninguém queria para a direita, e então todo mundo quer isso centrado agora. Vamos fazer isso. Para fazer isso. É bem fácil. Certifique-se de styles.css global, certifique-se de contêiner selecionado e tudo o que você faz na margem é onde diz este pequeno pixels, mudar que para auto, pixels auto para tornar as margens esquerda e direita auto. Clique em “Salvar tudo” no navegador. Temos um site centrado. Desde que tudo vá dentro daquele recipiente div, tudo ficará centralizado assim. Vamos saltar de volta. Isso vai ser tudo para centralizar nosso site. Agora vamos sair e criar uma media queries porque no momento temos uma largura máxima para como vista de desktop. Gostaria de fazer algumas alterações e adicionar algumas consultas de mídia para tablet e celular. Isto é o que consideramos web design responsivo. Vamos fazer isso no próximo vídeo. 11. Como criar um site que se adapte para dispositivos móveis usando o Dreamweaver: Ei, ali. Neste tutorial, vamos olhar para ajustar nosso site para os diferentes tamanhos de tablet e tamanhos telefone celular e a mídia chamada criando e vê-los no topo aqui. Vou esperar além de um desktop, o hit aqui é cinza. Se eu chegar a um tamanho de tablet, muito mais rápido. É vermelho e eu desço de novo para o celular e é verde. Eu sei que há cores feias que só lá como espaços reservados para testar nossas consultas de mídia. Vamos fazer isso agora no Dreamweaver. Então é hora de superar responsivo e fácil para dispositivos móveis, e é realmente muito fácil. Então o que precisamos fazer é olhar para algo chamado consulta de mídia. A primeira coisa que precisamos fazer é olhar para esta barra de consultas de mídia. Se você não pode ver o seu é um pequeno ícone aqui. Você pode ligar e desligar. Se você não tiver essa barra ou esse ícone, isso pode significar que você está usando uma versão anterior do Dreamweaver, talvez veja um conjunto que não tenha essa opção. Infelizmente, você não pode seguir este tutorial em particular. Você ainda pode fazer consultas de mídia, mas você tem que codificá-las manualmente. Você não pode usar essa coisa boa e diretriz aqui em cima. Então, vamos usar essa coisa, e ele diz o que fazer é clicar neste ícone para adicionar consulta imediata. Esse ícone está aqui e outro ali. Então, vamos clicar nele. Vamos dizer que nosso primeiro será tablet, porque já fizemos desktop. Desktop é considerado global no nosso caso, algumas pessoas projetam seus sites em torno de dispositivos móveis primeiro. Eles viraram o celular primeiro significa que eu vou projetá-lo para o celular. Então eu vou fazer consulta imediata que substitui o celular com tablet. Depois, por cima disso e na área de trabalho, desenhei os meus sites ao contrário. Sempre acho que meus alunos acham isso mais fácil. Nós projetamos a versão desktop principalmente porque muitas vezes há mais do que esse lado e é como a maioria das pessoas vê nosso site depende do seu tipo de site, mas definitivamente minhas coisas, 80 por cento das visualizações são de desktop. Então eu estou usando uma primeira abordagem de desktop. Vamos clicar neste pequeno botão mais novamente, e vamos trabalhar no tablet primeiro. Então, vamos dizer que uma placa vai estar entre estes dois. Vai ter um mínimo de um determinado tamanho e um máximo de outro tamanho e isso vai ser considerado tablet. Agora é um pouco difícil obter as medidas exatas porque estes são muitos tablets lá fora e tantos tamanhos diferentes. Então o que dizemos que é um mínimo de cerca de 401 é o menor, qualquer coisa menor do que isso vamos considerar um telefone celular e vamos fazer uma consulta de mídia separada para isso. Quão grande deve ficar? É 768 é a largura de um iPad, com alguns retratos. Então usamos esse tamanho. Não há nenhuma razão para você não usar 770 ou dizer que isso é em um futuro distante quando há muitos tamanhos diferentes, você pode decidir que, que é muito pequeno ou tamanho diferente. É apenas um ginásio depende de tamanho por enquanto, mas seria um tamanho realmente típico de usar. Para onde é que ele vai? Vai entrar no meu “Styles.css”. Vou clicar em “OK”. Você pode ver aqui, ali está a minha pequena barra azul, que é “min-max”. Ele tem um mínimo e um máximo e nós vamos ter as coisas disparando quando chegar a esse tamanho lá. Vamos dar uma olhada no nosso “Styles.css”. Clique em documentos relacionados por aqui. Você pode ver que é o que consulta imediata parece. Essa é a sintaxe. Agora, novamente, se você estiver usando uma versão do Dreamweaver que não tem este pequeno arco agradável. Você pode digitar aqui. Então isso é considerado o meu tablet. O que vamos fazer é provar menos dezenas e um pouco acima. Vamos adicionar alguns comentários apenas para que mais tarde saibamos o que estamos falando e o que fazer para adicionar comentários no Dreamweaver é como opção aqui, Css aplicar comentário. Css aplicar comentários olhar como este. É uma barra e, em seguida, um extracto e tem de ir entre aqui. Podemos dizer que este pode ser o meu tablet. Agora isso é ignorado pelo navegador e é apenas aqui para os humanos. Então você não precisa escrever isso como apenas significa que mais tarde, eu posso dizer que tenho uma visão de tablet e você sabe para onde ir. Então, a próxima coisa que vamos fazer é colocar em nossa visão móvel. Vamos clicar neste pouco mais de novo. Vamos usar um máximo, então uma “largura máxima” de 400, ele vai para styles.css. Vamos clicar em “OK” e ver aqui em cima. Então, em qualquer lugar até um máximo de 400 será a minha visão móvel. Então eles tendem a ver assume o controle e isso é apenas um pixel a mais do que a minha visão móvel. Se as coisas estavam acima de 400, Eu não tenho idéia do que vai acontecer que provavelmente apenas lutar contra isso no sangue e Css em todos os lugares, mas então apenas certifique-se 400 e, em seguida, 401 é quando o próximo começa. Agora neste tutorial, vamos apenas fazer; um celular, tablet e desktop. Você vai encontrar muitos outros sites que têm cinco visualizações ou quatro visualizações ou sete visualizações. Nós vamos apenas fazer três e profissionalmente isso é normalmente tudo o que eu ataque é pequeno para de tablets móveis, de tamanho médio e um tamanho grande e os desktops antigos. Você pode ver aqui em baixo meu Css, Eu vou adicionar esse comentário novamente, então eu estou realmente apenas indo para copiar este e colá-lo aqui em cima. Esta vai ser a minha visão móvel. O que também vou fazer para tornar as coisas um pouco mais fáceis é colocarmos aqui em cima, por baixo disso. Vamos colocar, esta vai ser a minha visão global e vista global /desktop. Você só diz que quando você está trabalhando você pode saber coisas. Agora nada acontece a não ser que temos caixas de cores aqui em cima. Agora precisamos fazer alguns pequenos ajustes. Então o que nós vamos fazer é voltar para “Código Fonte”, e vamos para “CSS Designer” e vamos dizer meu menu de estilos, nós temos esses caras antes de nós apenas continuamos clicando em “GLOBAL” e esses dois não existiam. Agora podemos dizer que eu gosto de um global eu digo “GLOBAL” tem meus dois estilos que temos o “cabeçalho” e o “contêiner”. Então o que eu gostaria de fazer é ajustar a cor de fundo deste cabeçalho. Eu queria fazer isso para tablets quinto, que é este min-max um, que é 4012-768 e você pode ver que não há seletores aqui. Então, nada específico para o modelo e eu vou dizer que há sempre vai ser agora, cabeçalho. Temos um para o cabeçalho. Você vai notar que temos mais de um “GLOBAL”, “cabeçalho” agora e um para tablet. Agora este aqui e tablet não faz nada ainda. Eu só vou para a cor de fundo, escolher uma grande cor óbvia como vermelho e reter. Vou arrastar isto para dentro O que você vai notar é que nada acontece e, em seguida, pressione salvar tudo ainda não muda. É por isso que eu não gosto de usar essa visão ao vivo aqui no topo. São apenas algumas coisinhas que não se atualizam. Mas se eu verificar no meu navegador, aqui está ele, e eu arrastá-lo para baixo e eu chegar ao meu 768 em algum lugar aqui. Ei, e então meus amigos é todas as consultas de mídia são, você está apenas dizendo entre esses dois pixels, fazer algo diferente e nós estamos dizendo para substituir a batida e torná-lo vermelho em vez de cinza. Podemos fazer o mesmo por saltos móveis aqui. Eu vou dizer styles.css no meu máximo de 400 lembre-se que é a minha visão móvel. Eu vou dizer que você cabeçalho, digitando e retornar novamente. Eu vou dizer cor de fundo de verde. Nós não vamos manter isso mais como um exemplo, cinza salvar, e eu verifico no meu navegador. Um tablet tão grande, móvel. Coisa incrível e isso é tudo que as consultas de mídia são. Então vamos passar e fazer coisas como eu gostaria que a fonte fosse maior. Eu gostaria que esta caixa empilhasse de forma diferente. É assim que vamos conseguir todas essas coisas diferentes. Você pode ver que a fonte se tornará centralizada quando for móvel ou estiver alinhada à esquerda, mas está no tablet. É menor quando é um celular e é isso que vamos fazer. Nós vamos dizer que eu quero que este título seja menor, por favor, apenas dentro desta consulta de mídia. Isso é tudo web design responsivo é. Como mostrado de volta no Dreamweaver. Você pode ver aqui que um está atualizado. Agora em silêncio, ainda não. Salve tudo o que puder se quiser continuar usando isso, você pode obter um “Exibir" e ir para “Atualizar Exibição”, ou um “F5". Isso deve começar a funcionar. Legal. Então vou clicar duas vezes nesta área cinzenta para voltar completamente. Vamos ver o próximo vídeo. Vamos ver a pré-visualização através do seu telefone ou tablet. Há um recurso muito legal usando a visualização ao vivo, vamos fazer isso no próximo tutorial. 12. Como testar seu site do Dreamweaver em um dispositivo móvel: Oi lá. Neste tutorial, vamos ver a pré-visualização do nosso site do Dreamweaver diretamente para o nosso celular e ele aparecerá aqui, ver o fundo verde e, em seguida, assistir a isso. É fundo vermelho. O bom disso é que não precisamos hospedá-lo em um site e podemos apenas fazer ajustes diretamente no Dreamweaver e atualizar automaticamente em um celular. É muito fixe. Por que estou segurando perto do meu rosto? É porque minha câmera não faz zoom quando eu chegar perto da câmera assim. Diga, eu mantenho aqui. Certo, vamos entrar no tutorial. A primeira coisa que precisamos fazer se vamos testar em um telefone celular é precisamos de um site real que tenha algumas diferenças quando ele está no celular. A vista da área de trabalho, é cinza, se eu descer para o tablet, ele fica vermelho e para baixo para o celular fica verde. Fizemos isso em um tutorial anterior. Agora, o que eu quero fazer é aqui embaixo com visualização do navegador em tempo real. Clique nisso e antes de usar o Chrome, agora vamos usar este. Eu vou ter que girá-lo até porque por algum motivo minha tela cai fora do fundo. Você precisa ser capaz de ver isso. Você vai fazer duas coisas que faremos na vida real. Você pode usar um leitor de código QR para digitalizar isso ou você pode digitar esse URL, e-mail para você mesmo. Vou mudar para o Dan humano da vida real, e ele vai te mostrar o resto. Hora da demonstração. O que você faz é baixar um leitor de código QR. Há um monte de grátis online, por toda a App Store. Tenho um em um andróide aqui. Praticamente você apenas aponta para o pequeno código QR que nós geramos e esperamos chegar perto o suficiente. Faz um pouco de ruído sonoro e leva você ao site. Agora você vai colocar sua senha para sua Adobe ID e, eventualmente, espero que eu vá carregar. Aí está, é a versão verde. Será que a câmera se concentrar nele, talvez, e assistir esta horizontal. É a versão vermelha para tablet, versão verde para celular. É porque ele faz largura da tela em vez dos dispositivos reais muito difícil de tentar e escolher dispositivos, eles mudam muito, então você acaba apenas fazendo larguras de tela. Sim, a coisa boa sobre isso é que você começa a então, coloque isso ao lado do seu computador e conecte-o à energia e apenas esteja desenvolvendo no Dreamweaver e atualiza instantaneamente o tempo todo em seu dispositivo móvel, você pode ter um tablet lá e pressione o inferno para as pessoas andando passado, você parece um profissional. Vamos voltar para a versão de captura de tela de mim mesmo. Antes de irmos, o que queremos é adicionar essas cores loucas para aprovar que as consultas de mídia funcionem. Não é o que queremos para o site de longo prazo. Nós vamos embora e apenas removê-los. Estilos que vamos colocar para tablet primeiro cabeçalho. Na verdade, vamos apagar todo o seletor. Você poderia apenas remover a cor de fundo, mas na verdade eu não acho que eu preciso do cabeçalho para qualquer outra coisa. Últimas palavras famosas, mas eu estou indo cabeçalho menos adeus lá, o que está no cabeçalho do telefone celular menos, adeus. Agora, a capacidade de resposta realmente não faz nada, mas pelo menos nossas consultas de mídia ainda estão aqui para nosso trabalho futuro, tablet e visualização móvel, para frente e para cima. 13. Como criar um menu suspenso de hambúrguer no Dreamweaver — parte 1: Neste vídeo, vamos criar nosso menu de área de trabalho feio, que vamos estilizar no próximo vídeo. Mas quando chega a tablet e celular, ele se transforma em um [inaudível]. Vamos fazer isso agora no Dreamweaver. A primeira coisa que vamos fazer é que vamos neste vídeo colocar como os componentes principais e ligá-los e desativá-los para as diferentes visualizações. Depois disso, no próximo vídeo, veremos fazer o JavaScript que faz com que a ação de clique aconteça quando você clica no menu suspenso. No último vídeo, ou pelo menos o terço deste pequeno pedaço aqui será o styling e apenas para torná-lo bonito. A primeira coisa que precisamos fazer é adicionar nossa navegação e é esta tag de navegação aqui. Eu quero que seja logo após essa imagem e eu clique nessa imagem e lembre-se que há uma imagem, mas a imagem está dentro dela uma tag, que é o link que colocamos em torno dela. Clique aqui em cima, clique na imagem, e nós vamos clicar para baixo ele e dizer a tag que está realmente em torno do lado de fora desta imagem, nós queremos apenas falar com você por favor e dizer navegação. Clique nele. Eu gostaria depois da coisa que selecionei e lá está. A primeira coisa que eu quero fazer com a navegação é em um estilo para ele, para fazê-lo virar para a direita porque eu não quero embaixo aqui, eu quero isso no topo bem aqui. Vá para CSS designer e styles.css. Eu gostaria que fosse na Global. Eu gostaria seletor chamado nav e eu vou usar a seta para cima. Lembre-se da especificidade. Só significa que eu estou dizendo a etiqueta de navegação que está dentro da cabeça [inaudível] dentro do recipiente. Eu não preciso me preocupar com isso porque eu só tenho uma etiqueta de navegação para todo este documento e então eu não preciso ser específico. Eu não vou mais dizer especificidade neste curso porque é realmente difícil dizer. Quero a etiqueta de navegação, por favor, para flutuar para a direita, flutuar como esta aqui. Vou dizer que voou para a direita e ele salta para o lado direito da página. Incrível! Agora a próxima coisa que eu quero fazer é colocar duas tags div dentro desta navegação. Uma tag div vai ser para o meu menu móvel, que vai ser o meu menu maior aquela coisa de linha listrada. A visualização da área de trabalho vai ser aqueles botões coloridos que diz sobre nós e entre em contato conosco. Basicamente, o que acontece é que você tem que separar tags div, uma com o menu móvel e outra com o menu desktop e você apenas diz desligar uma visão móvel e, em seguida, a outra ligada, e alternar em torno de sua área de trabalho. Vamos sentar as etiquetas div sobre o nav selecionado. Eu vou para Inserir e eu clicar em div sobre isso para dentro, por favor. Temos uma nova etiqueta div. Você pode vê-lo. Aí está o meu nav, e o cara que está lá dentro. Precisamos mais desse tiques? Nós não. Eu gosto de excluir o texto aqui na visualização de código. Excluí-lo na visualização ao vivo funciona a maior parte do tempo, mas acho que é um pouco mais fácil de fazer na visualização de código. Você pode ver que há minha etiqueta de navegação abrindo e fechando e há a tag div dentro dela. Preciso de dois destes. O que eu posso fazer é aqui eu posso escorregar na etiqueta div. Posso dizer outra, por favor. Logo depois dele. Eu tenho dois. Vamos colocar os diferentes componentes e este primeiro aqui eu gostaria de inserir uma imagem que vai se aninhar dentro. Eu gostaria que fosse meu menu de hambúrguer, que está sob arquivos de exercícios, imagens, e vamos usar o menu de hambúrguer versão SVG. Você pode usar PNG. SVG é a versão mais recente de gráficos vetoriais escaláveis. Vamos clicar em abrir. Ele vai dizer que você selecionou algo lá fora, você gostaria de colocá-lo lá para você? Você diz sim, por favor, coloque com minhas imagens. Lá, por favor, porque eu já pratiquei este, para torná-lo super liso para este vídeo. Eu já tenho o meu, [inaudível], você não terá que clicar em substituir. Você vai notar que é muito grande. Com isso selecionado, posso dizer que no [inaudível] você mãos realmente queria ser vinte pixels. Você decide o quão grande você quer que o seu seja. Incrível. A próxima coisa que eu quero fazer é me livrar desse texto e como eu digo, eu gosto de excluir o texto aqui na visualização de código. Não preciso mais disso. Tenho uma etiqueta div e tem a minha imagem dentro. Vamos colocar na versão desktop. Dentro desse cara, posso clicar neles há aquela etiqueta div. Vou colocar uma coisa chamada lista desordenada. É assim que descrevemos listas, e navegação é apenas uma lista de opções que você pode ir em uma página, para selecionar nesta div, e eu vou dizer HTML, Eu vou encontrar este chamado lista desordenada. uma lista ordenada é uma lista numerada e uma lista não ordenada é uma lista com marcadores. Você pode ver pontos de bala. Vamos removê-los do estilo um pouco mais tarde. O que eu quero fazer é eu quero mudar este texto. Quero dizer que este vai ser sobre nós. Vou usar maiúsculas. Você não tem que voltar, e entre em contato conosco. Pode ser eu, contacte-me sobre mim porque é só o meu portfólio de qualquer maneira. Clique para fora e você pode ver que eu tenho dois pontos de bala. Vamos dar uma olhada na forma como estes são construídos. Há uma etiqueta div. Dentro dela está a minha lista de honra. Você pode ver o início e o final e dentro desta lista não ordenada ou os itens da lista, estes são os diferentes marcadores. É assim que ele é construído e vai ser importante para quando mais tarde e começarmos a estilizá-los. O que eu gostaria de fazer enquanto batemos é dar-lhes hiperligação. Vou clicar duas vezes sobre nós, sobre mim, e clicar neste que ele tem, ele fica laranja, clique no hiperlink. Para onde é que ele vai? Vai para haxixe. Hash é apenas, eu não sei ainda. Isso é o que esse ícone significa, ou o sinal de libra, você poderia colocar about-us.html e minúsculas, mas eu realmente não sei o que ele vai ser chamado. Se você não sabe, basta colocar em hash e isso permite que ele seja um link, mas isso não causa um erro. Você pode mudar isso mais tarde, dizendo que nós entramos em contato comigo, ambos estão indo para hash no momento, não sei. A próxima coisa que eu gostaria de fazer é ligá-los e desativá-los em diferentes pontos de vista, porque o momento em que você pode vê-los todo o caminho através do tablet móvel desktop. O que eu vou fazer é fazer o celular primeiro, tentando clicar duas vezes nisso. Lá vamos nós. Quero que desligues, quando fores uma vista de ambiente de trabalho. O que eu gostaria de fazer é ir para o meu design CSS um painel e meu styles.css e minha visualização de área de trabalho, que é global. Eu quero dizer, e eu crio um novo seletor e este vai ser dot mobile. Esta vai ser uma visão móvel de classe. O que eu gostaria de fazer é quando é uma visão móvel. Esta é a coisa que vai controlar isso, visão móvel e eu gostaria que você não mostrasse nada. Nenhum quer dizer sim, não posso te ver. Nada acontece por causa do que eu preciso fazer é encontrar a tag div que está envolvendo o exterior desta imagem e aplicá-la. O que eu faço isso? Eu posso fazer isso aqui embaixo, imagem selecionada. Agora eu tenho minha tag div selecionada e há div significa que ponto móvel indo para lá, ele se foi. Legal. Esta tag div agora é chamada de tag div vista móvel. O que estamos dizendo é que, quando é um global que é desktop, eu gostaria que você não mostrasse nenhum. O problema é que ele não exibe nenhum o tempo todo. É por isso que eles chamam isso de global e não apenas especificamente desktop. Porque o que significa é que significa tudo. Significa global, significa tudo. A menos que a guia da UC seja fazer algo diferente. Mas no momento em que eu vou para o meu CSS e eu olho para a minha exibição de tabela, minha visualização de tabela não diz nada. Ele não substitui a visualização móvel. É uma folha de estilo em cascata, então ela flui para baixo e flui sobre todos eles, menos que eles digam algo diferente e eles não dizem, eles dizem visão móvel. Nós não dissemos nada. É o que vamos fazer. Vamos dizer sobre estilos, CSS, quando eu chegar a vista de tabela, selecione um ponto de vista móvel nomeado. Novamente, ele vai, em vez de dizer nenhum agora, nós vamos dizer que você aplicar bloco, como um pesado. Soa como nenhum. Acho que bloco de madeira, bloco de concreto, algo sólido. Eu posso ver agora. Funciona para mim de qualquer maneira. Vamos verificar em um navegador. Visualizações ao vivo não é ótimo. Lembre-se, salvar todos verificar um navegador. O meu menu móvel e a vista de ambiente de trabalho podem ser vistos. Não é nenhum. Agora, quando ele fica para baixo para exibição de tabela [inaudível], seu bloco. blogueiro madeira, e quando ele fica para baixo para visão móvel, ele desaparece novamente. O que precisamos dizer é estilos, CSS quando está na visualização móvel, que é meu máximo de 400 pixels. Como se eu fizesse outro seletor chamado dot minha visão móvel. Eu gostaria de dizer que você é bloco de exibição também. Posso te ver em ambos. Diga, bem, teste lá. Sim. Ele não está alinhado. Isso está tudo bem. Vamos fazer styling mais tarde na mecânica aqui no momento para que possamos vê-lo, incrível. O que eu quero fazer agora é criar uma nova classe chamada área de trabalho e eu quero aplicá-la a esses botões aqui, e eu quero ativá-la e desativá-la dependendo da exibição. Vamos criar um novo estilo, e eu não quero fazer isso na Global. Eu poderia, e eu poderia dizer, eu gostaria que você fosse bloqueado, mas já está bloqueado. Você sempre pode vê-lo que represa na vista de desktop. Não preciso reafirmar isso. O que eu preciso dizer é que o tablet está desligado. Eu vou para a minha exibição de tabela e clique em minha seleção, e eu chamo este, visualização de área de trabalho. Eu não chamei isso de vista de desktop em tudo e um par de vezes, é absorvente. Visualização da área de trabalho e eu vou dizer display, nenhum vai. Agora eu preciso aplicá-lo a ele. Eu seleciono nele. Vamos clicar nessa tag div que é enrolado ao redor do lado de fora e clique aqui, clique em parada completa para desktop não tem aplicá-lo e não está aparecendo. Isso acontece um pouco se você precisar pressionar desativar e, em seguida, voltar e desfazer isso e espero que ele esteja lá. Salve uma área de trabalho [inaudível], ainda não fazendo isso. Eu vou deixar isso no vídeo só porque todo mundo, eu vou apenas digitá-lo fisicamente, hit return. Ele vai dizer, você gostaria de criar algo novo? Basta manter pressionando retorno em seu teclado até que ele vá embora, e ele é aplicado. Se eu clicar nesse cara, você pode ver que tem minha etiqueta div e tem essa classe aplicada. Isso acontece comigo um pouco no Dreamweaver. Só que é. Digamos, bem, vamos pré-visualizar e um navegador. Você pode ver a exibição da área de trabalho. Posso vê-lo, mas quando chega ao tablet, adeus, ele não é nenhum. Mas está de volta em que ele está imóvel. Vamos fazer a mesma coisa, styles.css e visualização móvel. Eu gostaria de criar um seletor chamado ponto desktop. Incrível. Gostaria de dizer que gostaria que não mostrasse nada. Por favor, vá embora, salve antigo, evite um navegador. Foi embora. Eles são legais. É tudo o que fazemos. O que duas tags div, um é chamado de dispositivos móveis chamados Desktop, e vamos apenas ativá-los usando display nas diferentes consultas de mídia. O problema agora é que isto ainda não funciona. Vamos passar por agora e usar em JavaScript para fazer isso um pequeno botão suspenso e fazer isso funcionar. Você está pronto para o seu primeiro bit de JavaScript. Vamos fazer isso no próximo vídeo. 14. Usando o jQuery do Javascript para criar um menu suspenso de hambúrguer para dispositivos móveis no Dreamweaver: Oi lá. Neste vídeo, vamos olhar para adicionar alguns JavaScript para tomar este menu de área de trabalho feio. Quando ele muda para celular e, em seguida, quando você clica no celular, ele mostra a versão de desktop feia. Este pequeno clique de alternância ligar e desligar. Eu percebo que o estilo não é ótimo e há alguns pequenos problemas com layout, vamos fazer isso no vídeo depois deste. O que você realmente precisa fazer é prestar atenção ao clique mágico mostrando o que vamos fazer em JavaScript. Vamos fazer isso agora. A primeira coisa antes de começarmos a fazê-lo, é o que é JavaScript? Há três componentes em um site, há HTML, CSS e JavaScript. HTML é fácil, pense nele como o substantivo. São as coisas que aparecem na página, os objetos, é este botão aqui, é esta imagem, é este texto. Tudo isso está no meu HTML, e essas são coisas. Então você tem seu CSS, e este CSS apenas descreve o estilo das coisas. Esta é a minha cor de fundo, esta é a quantidade de estofamento que ele tem, é a coisa bonita, é o adjetivo. Eu os considero, HTML como substantivos, CSS como adjetivos, as palavras que descrevem, e então você tem o verbo, que é JavaScript. O que acontece quando o usuário clica nisso? É fazer as coisas. Pode ser que o usuário clique em um botão, como no nosso caso aqui, este menu cai, ou talvez quando um usuário clica no botão “Reproduzir” no vídeo, ou arrasta um controle deslizante, ou realinha as coisas em uma página, por isso é geralmente o usuário interagindo de alguma forma com o seu site, JavaScript acontece. Quando eu digo que vamos estar aprendendo JavaScript, nós realmente vamos estar usando algo chamado jQuery. JavaScript é muito mais complicado. O que algumas pessoas inteligentes fizeram é que eles criaram essa coisa chamada jQuery, e o que ele faz é que é uma biblioteca construída em cima do JavaScript para tornar mais fácil para pessoas como nós. Em vez de ter que escrever muita e muita sintaxe fora, podemos usar muita linguagem simples que torna as coisas melhores para os seres humanos, e ele faz praticamente tudo o que precisamos fazer em termos de web design front-end. Não estamos aprendendo JavaScript essencial, estamos aprendendo algo chamado jQuery, que é apenas uma linguagem mais fácil usada em cima do JavaScript. Vamos fazer isso agora. Este pequeno trecho aqui vai ajudar a explicar o que estamos fazendo. Eu não tinha certeza se eu deveria deixá-lo na série tutorial ou não. Vou deixá-lo e provavelmente só para explicar em vez de apenas me seguir cegamente. Vamos descobrir o que estamos fazendo aqui. Basicamente, o que estamos fazendo é que eu estou vendo isso no Chrome, e eu só tenho algumas coisas nerds aqui para ajudar a mostrar a você. Basicamente, o que eu gostaria de fazer é esta pequena navegação aqui, quando o usuário clica em seu celular, eu gostaria de usar JavaScript. Quando o usuário faz algo, eu gostaria que o JavaScript adicionasse uma classe a este pequeno menu listrado chamado Expandir, e isso irá expandir o menu para fora. Porque no momento, lá está lá menu desktop, tem uma classe eu provavelmente vou chamar menu desktop, nenhuma outra classe. O que eu gostaria de dizer é quando é clicado para usar magicamente JavaScript para injetar uma classe aqui para fazê-la se expandir. Veja isto. Fique de olho nessa coisa aqui. Quando eu clico nele, eu sou um usuário, usando meu celular, eu clico nele, e magicamente, esta classe extra, lá escapar que é adicionado. Então aquela pequena classe lá vamos definir em nosso CSS para dizer, torná-lo agradável e grande e nos mostrar o menu lá. Isso é o que precisamos que o JavaScript faça. Vamos aprender como fazer isso usando JavaScript e jQuery. A primeira coisa que vamos fazer é criar aquela classe Expandir. Nós vamos colocá-lo em nosso styles.css. Nós vamos colocá-lo em Global, e nós vamos dizer, e eu vou selecionar isso, nós vamos criá-lo. Vai parecer tudo pontual. Lembre-se, é uma aula que estamos inventando. Vai chamar-se Expandir. O que gostaríamos que essa coisa fizesse é exibir, e vamos dizer bloco de exibição. Seu pequeno trabalho como classe é quando você é aplicado a qualquer coisa é mostrar as coisas. Mas o que vamos fazer é fazer com que isso se aplique com JavaScript, não codificado como temos para todo o resto. A próxima coisa que precisamos fazer é criar nosso arquivo JavaScript e conectá-lo à nossa página de índice. Agora, quando fizemos isso com, lembre-se, nosso styles.css aconteceu automaticamente porque temos este pequeno painel de designer CSS legal. Para fazer isso com JavaScript, nós fazemos isso um pouco o longo caminho. Vamos para Arquivo, Novo, e vamos para Novo Documento, vamos clicar em “JavaScript” e vamos clicar em “Criar”. Chama-se sem título. Vamos salvá-lo. Onde vamos salvá-lo? Vamos colocá-lo dentro da nossa área de trabalho, dentro dos meus arquivos aqui chamado Dan Awesome Portfolio. Eu poderia salvá-lo com o resto dos arquivos, mas é muito comum criar uma pasta chamada js. Dentro dessa pasta, vou colocar neste arquivo chamado, é muito comum chamá-lo de Scripts. Você pode chamar o que quiser, mas a maioria das pessoas o chama de script.js. Vamos clicar em “Salvar”. Agora vamos fechá-lo. Nós acabamos de conseguir. Nós o fechamos porque agora precisamos vinculá-lo a este arquivo index.html. Você pode configurar aqui meu índice e código-fonte. Você pode ver aqui, lembre-se do styles.css, isso foi feito automaticamente para nós. Precisamos fazer isso manualmente, então precisamos colocar um retorno, e precisamos ir para Inserir e precisamos ir para Scripts. Chame de Scripts novamente. Ele sabe que vai para o arquivo JS. Encontre Scripts, clique em “Abrir” e lá vai você. Esses estão ligados entre si. Aperte “Salvar”, e você pode ver que há o meu styles.css e agora meu novo pequeno arquivo de scripts. Este menu de hambúrguer aqui é porque é um SVG. Se você usar a versão PNG do nosso pequeno menu antes, isso não aparecerá lá. Ignore-os pelo resto do curso. Vá para script.js, e agora nós começamos a adicionar o JavaScript, ou, no nosso caso, jQuery que controla que ligar e desligar. Eu menti totalmente. Ainda não estamos prontos para escrever JavaScript. O que acontece é que seu computador, ou pelo menos o navegador em que as pessoas assistem seu site, vai entender JavaScript muito bem, mas ele vai chegar ao jQuery, que é basicamente abreviação para JavaScript e ir, “ O enforcamento de que estás a falar? Isso não é JavaScript.” O que precisamos fazer em nosso código-fonte é que precisamos até o topo aqui dizer onde procurar, para as definições de jQuery, e você faz isso usando algo chamado CDN ou uma rede de entrega de conteúdo. Há alguns online. Nós estamos indo para ir para o Google, e eu vou digitar em jQuery CDN. Há um monte de lugares que você pode se conectar. Você pode ir para JQuery.com. Eu uso o Google. Onde é que está? Aqui em baixo. Onde está o Google? developers.google.com. Aqui diz que este é o pequeno link para jQuery. Vou pegar tudo isso. Na verdade, começa lá em cima, agarra todo aquele pedaço. O que eu fiz por você é que eu coloquei em seus arquivos de exercícios e esse código é algo chamado jQuery CDN. Você não tem que vir aqui. Você pode copiar e colar o meu. Vou copiá-lo, e tudo o que fazemos é jogá-lo aqui. Olá a todos. Meu nome é Taylor e trabalho para Daniel. Eu só quero pular aqui e deixar vocês saberem que Daniel cometeu um pequeno erro quando ele importou a biblioteca jQuery para este arquivo. Na verdade, vai ser ao contrário do que Daniel tem. Atualmente, ele chama o arquivo de scripts primeiro e, em seguida, o jQuery. O arquivo de scripts realmente depende do jQuery para que ele seja executado corretamente. Se você não tiver isso no caminho certo, sua navegação pode não funcionar. É importante que você apenas troque por aí. Você pega o jQuery e você colocá-lo acima dos scripts. Isso deve eliminar a maioria dos problemas que você pode ter com sua barra de navegação, com ele talvez não funcionando. Além disso, os arquivos concluídos deste tutorial conterão a ordem correta do arquivo para este código. Isso só nos diz onde fica a biblioteca. Por que simplesmente não tê-lo localmente como temos script.js e nosso CSS na minha máquina? A razão é porque esta é uma biblioteca realmente grande, e o benefício de usar, digamos, a hospedada pelo Google, isso significa que, digamos, um usuário está navegando na internet e eles vão para 10 sites que todos usam jQuery porque um monte de sites usá-lo. Quando eles chegam ao seu site e o navegador diz, “Nós vamos ter que carregar jQuery”, e diz, “Não se preocupe com isso. Eu não vou carregá-lo porque eu já carregá-lo deste outro site que eu estava finalmente.” É por isso que usamos uma CDN e um link para um site em vez de tê-lo na sua máquina. Isso só significa que o Google vai tê-lo online o tempo todo. Muitas pessoas o usam e que você não precisa baixá-lo como uma milionésima vez quando eles chegam ao seu site porque é apenas o mesmo antigo que tem sido vinculado a lá novamente, então o navegador do usuário não se incomoda em ir e aprendendo toda essa nova língua novamente. Já está lá. Ele já sabe disso. Resumindo, basta copiar e colar isso, colocá-lo no topo, e isso vai ajudar. Vamos para script.js. Aqui, vamos aprender um pouco de jQuery. Só para que você saiba, quando você está projetando sites, nove em cada 10 você vai estar usando jQuery em vez de puro JavaScript. A primeira coisa que precisamos fazer é dizer que estamos usando jQuery. Você pode ver a pequena dica de codificação ajudando lá. O que vamos dizer é que vamos colocar muitos colchetes e muitas chaves. Vamos nos preparar para eles. A primeira parte é que vamos colocá-la em nossos suportes. Dentro deste colchete vamos escrever o documento da palavra. Obrigado por ajudar em código. Depois dos colchetes vamos digitar pronto. Tudo isso só significa que jQuery e não carregar até que o documento esteja pronto. Porque o que pode acontecer é jQuery pode começar a fazer sua coisa antes que o documento é mesmo carregado ou toda a página é carregada, e isso só causa muitos erros. O que dissemos foi esperar que o documento carregue e, em seguida, faça a sua coisa, e você vai descobrir que você não recebe nenhum erro. A próxima coisa que precisamos fazer é dizer a ele para fazer algo. Entre parênteses dizemos: “Faça alguma coisa, por favor.” Mas não chamamos isso, faça algo, por favor. Chamamos isso de função. Apenas pense, eu gostaria que você fizesse algo, mas linguagem de código é chamada de função. Agora colocamos um conjunto de suportes, conjunto de chaves encaracoladas e, no final, colocamos um ponto e vírgula. Estas coisas aqui, eu nunca realmente faço nada com estes primeiros suportes. Estes são atributos que normalmente são deixados em branco. Estas chaves são as partes realmente importantes. Vamos colocar todas as coisas que queremos fazer dentro disto. Este último ponto-e-vírgula significa que acabou aqui. Eu estou feito. Eu terminei de escrever meu jQuery. Não vá mais longe. Todas as coisas boas vão para dentro destas chaves. Eu poderia datilografá-los aqui, mas vai parecer um pouco confuso. Eu vou desfazer, e o que vamos fazer é colocar um retorno no meio, e nós vamos apenas digitá-los aqui. Agora eu quero dizer novamente, eu gostaria de dizer que estou usando jQuery. Mas em vez de dizer que jQuery é uma palavra longa e que a abreviação é $. Então $ só acho que é a abreviação para a palavra jQuery. Nós vamos substituir este aqui em cima, porque você seria estranho se você estiver usando a palavra jQuery se um usa $. Estamos dizendo, “jQuery, eu gostaria de fazer algo.” Neste caso, vamos usar colchetes novamente. Dentro desses colchetes, gostaria de adicionar apóstrofos. Não citações, apóstrofos. Porque o que eu gostaria de fazer é que eu gostaria que você fizesse algo com a turma, lembrar período para aula, algo com a visão móvel. O que gostaríamos de fazer com eles? Eu gostaria de olhar para fora para um clique. Quando você for clicado, eu gostaria que você parênteses, faça alguma coisa. Lembre-se, nós não usamos a palavra fazer algo, nós usamos a palavra função. O mesmo, mas uma sintaxe maluca. Colchetes sem nada, ponto-e-vírgula onde as coisas boas vão e no final, colocamos um ponto-e-vírgula para dizer não vá e poste por favor. Com as coisas boas vai colocar um retorno. O mesmo que acima, $ para jQuery. A mesma coisa com a turma. Vamos colocar um apóstrofo, um ponto, vista de área de trabalho. O que gostaríamos de fazer com essa exibição de área de trabalho? Gostaria de acrescentar esta coisa. Em vez de um clique, este vai ter uma classe de alternância. Essa classe de alternância vai alternar essa coisa chamada apóstrofo expandir. Lembre-se da aula que fizemos mais cedo. Estranhamente, nós não escrevemos no ponto final para este em particular. Apenas deixe isso fora. Caso contrário, não funciona. Chegue ao fim aqui e diga para não ler mais. Isso vai fazer com que o nosso menu funcione. Vamos retrodatá-lo. Nós vamos dizer que há uma classe expandida que eu tenho. Gostaria de ativá-lo e desativá-lo, visualização de desktop quando a visualização móvel é clicada. Se isso foi um dobrador mental e há vírgulas e apóstrofos voando por todo o lado, criei um código. Você pode copiar e colar em seus arquivos de exercícios. Você pode baixar aqueles que são de graça. Isso é escrever algum jQuery. Vamos ver se funciona é o principal. Lembre-se, salve tudo, entre em nosso navegador encolhe-o, clique no botão, e ele não funciona. Tenho que pausar isso e descobrir por que não está funcionando. Eu já volto. Estou de volta e descobri. Acontece com o melhor de nós. Eu realmente quero regravar o vídeo e me fazer parecer super incrível, mas eu também quero que você saiba que isso sempre acontece. Acontece a toda a gente. O que eu fiz foi sob o styles.css, ele está realmente funcionando, eu testei, e a classe de expansão está sendo adicionada. Não há nada de errado com o jQuery, é o styles.css. O que está acontecendo, eu coloquei isso, eu queria expandir no desktop, mas eu realmente não precisava disso porque ele está no Global. Preciso que isso esteja no tablet e na visualização móvel. Eu vou pegar isso, você está no lugar errado, corte-os. Eu quero que você esteja dentro. Você pode ver minha consulta de mídia aqui. Isto é para o meu maxmin para tablet. Então, logo antes do final do colchete, veja há a abertura, e há o fechamento lá. Vou colocá-los lá dentro. Preciso de uma cópia lá dentro e até a visualização móvel. Precisava de uma cópia lá. Agora, vamos testar. Agora, clique nele. Ainda não está funcionando, aperte a atualização. Agora, está funcionando. Clique em nossos trabalhos jQuery. Ainda parece feio, eu sei, e há algum layout a ser feito, mas vamos transformar isso em outro vídeo porque este, caramba, pode ser o vídeo mais longo que fiz na minha carreira de vídeo. - Sim. Essa é a nossa coisa de menu suspenso jQuery, clicky, móvel e desktop. Agora vamos fazer este menu parecer bonito. 15. Estilizando nosso menu de hambúrguer fazendo com que nosso menu fique lado a lado: Olá, adoráveis Weaver dos Sonhos. Neste tutorial, vamos transformar esses botões de navegação de ponto bala feios em vermelho e verde de boa aparência. Ignore a fonte, a fonte ainda é feia. Mas faremos isso no vídeo a seguir. Mas vamos fazer os botões agora. A primeira coisa que vamos fazer é nos livrar desses pontos de bala feios. Fazemos isso estilizando essa coisa aqui. Que coisa estamos estilizando? Vamos estilizar o Li, que está na ul, que está na minha vista de área de trabalho. Vamos fazer isso. Agora o painel CSS Designer, faça o meu style.css, eu gostaria que isso aparecesse globalmente. Vamos clicar nos seletores. Porque eu tinha essa coisa selecionada, é meio que pré-preenchido, mas ele se encaixa e é meio que o que eu quero. Mas se eu subir e descer, torná-lo mais específico, eu disse que não diria mais especificidade, mas lá você vai, então para baixo significa que você começa mais específico fica menos específico. O que eu gostaria de fazer porque se eu deixá-lo lá e disse que eu só quero estilizar os li dentro ul de que se aplicaria em todo o site a qualquer momento há uma lista desordenada. Posso ter pontos nas cópias normais das balas. O que eu quero dizer está na seta para baixo no meu teclado e dizer que eu quero os li que aparecem dentro de ul que aparecem dentro desta classe chamada vista de desktop. Preciso desta etiqueta “A “aqui? Eu não sei. Por quê? Porque eu só estou brincando com os li's, não me preocupando com o “A”. É o Li que lhe dá o ponto de bala. Clique em Retornar. É o meu primeiro estilo e eu gostaria de dizer e texto. Eu gostaria de descer e tentar encontrar decoração de texto. Eu gostaria de encontrar lista -style -type: undefined. Eu quero definir para nenhum. Você vê que os pontos desapareceram. Ótima. Vamos trabalhar lentamente vendendo diferentes, o que é chamado de seletores compostos. Lembre-se que os seletores que já lidamos com classes antes têm os pontos na frente deles. Estes são chamados compostos porque são bits. Há um pouco de classe lá, e há pedaços dessas etiquetas regulares aqui. Então o composto é tudo meio que combinado. Você não precisa se lembrar da palavra composta de qualquer maneira. No momento, estes são empilhados um em cima do outro. Este é o seu estado padrão para li's, e que pilha em cima um do outro é chamado bloco. O padrão estes estão em um display chamado bloco, o que significa que eles empilham em cima do outro. Queremos mudar isso. Gostaríamos de ir até o topo aqui, para o layout. Gostaríamos de encontrar exibição. E em vez de bloco, nós vamos escolher inline-block e isso empilha-los lado a lado. Fácil. Se estivéssemos estilizando estes todos da mesma cor, eu poderia ir para a minha cor de fundo e mudar a cor de fundo. Meu problema é que eu quero que eles sejam diferentes. Vamos checar meu arquivo ilustrativo. Você pode ver um ilustrador, eu queria que fosse duas cores diferentes. Se eu empatar o li, significa que ambos vão ficar vermelhos ou verdes. Não é isso que eu quero, quero que sejam cores diferentes. Vamos voltar para Dream Weaver. Vamos criar duas classes. Vamos criar um chamado botão vermelho e botão verde e aplicá-los a eles. A razão pela qual estamos fazendo isso é que podemos re -usar esse botão verde ou botão vermelho porque haverá outros botões em nosso site que vamos usar isso para. Aqui em baixo, não importa o que você tem selecionado, mas ele vai para styles.css, global e, em seguida, selecione isso então ok plus, esqueça o que está lá dentro. Nós vamos criar nossa própria classe e chamá-la btn - e nós vamos chamar o primeiro vermelho. Por que chamamos de btn-red e não vermelho btn? Isso só significa que eles vão ficar presos um ao lado do outro no CSS aqui botão verde, botão vermelho. Poderíamos ter um botão azul e é mais fácil encontrá-los assim. Clique no botão vermelho e eu vou obter um terreno traseiro, e eu vou escolher uma cor. Se você fez meu curso de ilustrador, você saberia como exportar o CSS. Vamos olhar rapidamente para isto agora. No ilustrador aqui, vou clicar neste fundo aqui. Eu vou para a janela, nós vamos para CSS onde eu uso propriedades CSS. Vai me dizer o que as cores do fundo. Isso é o que eu quero aqui. Vou clicar duas vezes nele, clicar botão direito e clicar em Copiar. Se você fez o curso ilustrado, você pode ter exportado isso como um documento de texto. Mas como somos o designer e o desenvolvedor web front-end, vamos apenas copiar e colar diretamente do arquivo do Illustrator. Eu copiei. Volte para Dream Weaver, então aqui eu vou clicar na cor de fundo. Vamos voltar aos nossos números hexadecimais. Você pode ver no ilustrador, havia realmente ambas as opções. Eu só acho isso mais fácil só porque eles são códigos mais simples para copiar e colar. Na cor de fundo aqui, vamos voltar para Hex e vamos ter certeza de que temos o haxixe na frente dele. Não copiei isso do Illustrator. Em troca, essa é a minha pequena cor de fundo. Vou aplicá-lo. A que aplicamos? Aplicamos à etiqueta a? Eu não acho que isso importe. Provavelmente teremos problemas mais tarde. Vamos esperar que não. Nós vamos entrar aqui e ir btn e ali está vermelho, adorável. Vamos voltar na cor vermelha, não no estofamento que precisamos, mas vamos fazer isso em um segundo. Faremos esse cara em seguida. Vamos criar um novo seletor, tudo está selecionado corretamente. Vamos chamar isso de um ponto btn. Vamos chamar isso de verde. Mesma coisa. Vou saltar para o Illustrator. Aqui na ilustração eu clico sobre este cara agarrou aquele cara. Copiar, por algum motivo eu não posso fazer comando c para cópia irá controlar c em um PC. Não sei porquê. Você pode ser capaz, mas aqui eu vou fazer este. Vou para os meus números hexadecimais, deixar hash aí. Esse é o meu verde e aplique-o a este. Aqui vamos nós. BTN. Essa é a outra razão pela qual chamamos de btn porque eles estavam todos agrupados lá quando digitamos b. Adorável. Queremos adicionar um pouco de preenchimento na parte superior e inferior desses botões. Este é o lugar onde é um pouco de tentativa e erro, eu prometo a você, eu não sabia de cor, eu apenas tentei ambas as opções de styling tanto este aqui porque você é como eu ainda posso estilizá-lo li e adicionar um pouco de preenchimento a este. Eu fiz isso sabendo que não funcionou, então tivemos que usar um método diferente. Vamos para o método quebrado. Sempre um ótimo para começar. Eu tenho esses li que estão dentro dos meus ul, que estão especificamente dentro da minha vista de área de trabalho, o que é ótimo. Eles são muito específicos. Eu vou dizer que eu gostaria de um pouco de estofamento. Vou arrastá-lo para cima. Você pode ver que não está realmente adicionando preenchimento, é apenas empurrá-lo de cima. Foi quando eu fui, nada mal. Veja esta lata de lixo aqui desligar isso. O que eu decidi foi que eu cliquei nesse cara e eu fiz novo estilo e eu vou torná-lo mais específico. Eu pressiono minha seta para baixo. Ele precisa ser a visualização da área de trabalho li e o que eu precisava fazer é esta uma tag. Aqui embaixo você pode ver que há uma etiqueta dentro de um li, dentro de um ul. Eu deixo isso aqui também porque eu adoraria te dizer a resposta, mas confie em mim, essas coisas nós pensamos definitivamente que eu estou 100% certo de que vai funcionar, então não funciona no final. Você tem que olhar para as etiquetas e dizer, ok, o que mais eu poderia tentar? No nosso caso, o link ativo, o hiperlink, que está dentro do li, que está dentro do ul, que está dentro da visualização da área de trabalho. Este vai funcionar. Espero que funcione. Eu vou para o layout do topo. Vou adicionar um pouco de estofamento para isso e apenas arrastá-lo para cima. Lá vai você. Aquele está funcionando. O que é isso? É 13 na parte superior e inferior 13 e é 43 na esquerda e direita. 43, novamente, meu teclado parece estar digitando quatro, 13 para baixo, e 43 para o lado. Você pode ver isso nos meus botões funcionando. Incrível. A próxima coisa que eu quero fazer é, eu preciso tipo de mover isso um pouco para cima e você pode usar desvantagens. Então, dependendo deste, usamos margens de menos e não funciona. Acerte a lata de lixo. É um pouco estranho às vezes como o trabalho fora é na etiqueta dentro do li que está dentro da ul. Se ficar frustrado, não se preocupe. É uma frustração geral em toda a indústria. Talvez eu possa fazer isso com este. O li ul e eu vamos menos aqui. Isso também não funciona e então eu percebo que eu preciso ir para a exibição real da área de trabalho. Vamos seletor, há um que eu já tenho é chamado vista de área de trabalho. Se eu fizer isso com este aqui, você pode ver que começa a funcionar. Eu vou clicar e arrastar porque eu não tinha certeza sobre como isso funcionava, legal quando eu fechar para aquele, menos cinco pixels que sobe. Às vezes você gosta, é este, é este, por que não é? Você acaba tendo que criar um monte de classes e excluí-las apenas para descobrir quais as que controlam isso. Vamos fazer é um single. A próxima coisa que eu quero fazer é remover os sublinhados. Os sublinhados são controlados por, você pode brincar com todos estes, mas na verdade é o, uma tag porque isso é específico para hiperlinks. Nós vamos para aquele, nós vamos pegar um tipo, e nós vamos descer aqui para pegar a decoração de texto e escolher nenhum. Ok, por padrão está no subjacente. Legal. Vamos para a cor da fonte antes de ir para o mesmo, espero que e a cor da fonte vem do ilustrador. Eu clico neste texto aqui e ali está. Há a fonte e a cor, e eu clique com o botão direito, clique em copiar, volta para Dream Weaver e nós vamos para a cor da fonte. Hash deixe lá. É como se fosse apenas um esbranquiçado. A próxima coisa que eu quero fazer, e para fazer esses botões funcionarem, é querer aplicá-lo à fonte. Neste momento, há Times New Roman, que não vai funcionar para mim. Eu queria olhar para o uso de fontes, algo um pouco diferente de Arial e Times New Roman e as fontes embutidas. Vamos olhar para isso em um tutorial separado, que é logo após este. 16. Como adicionar diferentes fontes a um site no Dreamweaver: Oi lá. Neste vídeo vamos mudar esta fonte feia do Times New Roman para esta adorável fonte Open Sans Condensada. Nós também vamos ter que mudar a ortografia disso. Acabei de notar isso. Você provavelmente esteve em todo este curso dizendo, “Uh, mudá-lo?” Vou mudá-lo antes do final deste curso, prometo. Vamos adicionar fontes usando o Dreamweaver. Então o que eu quero fazer agora é mudar a fonte que está aqui. Agora, eu poderia encontrar, digamos a minha vista de área de trabalho e você pode ver ul li e a tag. Isso é o que eu quero mudar. Como eu sei que é aquele que eu quero mudar? Eu tenho que digitar aqui e eu digo font-family e eu apenas escolher outro. Eu sei que isso muda. Eu não quero nenhuma dessas fontes que estão nos padrões, ok, então eu vou excluí-las, mas foi assim que eu descobri qual delas precisa ser mudada. Mas eu poderia mudar este e isso funcionaria. Eu poderia instalar minha nova fonte, que vai ser Open Sans Condensed. Mas o problema de fazer isso é que vai ter que fazê-lo por isso. Todo mundo que levar para todo o meu documento, vai ter que passar e eu tenho que encontrar a família de fontes para eles. O que os designers fazem, especialmente no início, é definir a fonte globalmente. Nós diremos tudo neste documento, tudo será Open Sans Condensado. Então você escolhe o tipo de letra do corpo. Vou ver o meu ficheiro do Illustrator. Esse é um caso de uso especial, ele está lá para o topo, mas eu uso a fonte condensada aqui para o tipo e para baixo aqui, e eu usá-lo em páginas anteriores aqui. É o Open Sans Condensado. Decidi que essa é a minha fonte principal. Agora vou passar e definir isso como o meu padrão. Você faz isso no Dreamweaver. Então, no Dreamweaver, o que precisamos fazer é definir o estilo da tag body. A etiqueta de corpo é, lembre-se se eu clicar dentro de qualquer maneira aqui, o navegador, eu estou dentro do cabeçalho, que está dentro do recipiente, que está tudo dentro do corpo. O corpo é tudo o que vejo na minha página. Lembre-se que o cabeçalho é tudo o que o computador vê e o corpo é tudo o que o usuário vê. Se eu empatar isso, tudo aqui vai ser “Open Sans”. Para fazer isso, eu vou estar em todas as fontes... Não, eu não vou ser um todo de fontes. Eu vou estar em styles.CSS. Eu vou fazer isso globalmente e eu vou clicar - nós não temos uma etiqueta corporal ainda. Temos que selecionar isso e escolher um corpo. Body é uma dessas tags que já existe e não precisa de uma parada completa na frente dele. Apenas aqueles que criamos, há classes que precisam disso. Body, nós vamos para digitar ou texto e nós vamos para a font-family e nós poderíamos escolher um desses. O único problema em usar, digamos que você gosta de Gill Sans você diz: “Sim, Gill Sans é bom.” Você pode ver que ele vem junto para o passeio porque tudo está sendo mudado para Gill Sans. Mas o que realmente está acontecendo é dizer, “Ei, sua pessoa que está visitando meu site, você tem Gill Sans em sua máquina?” “ Não.” “Bem, você tem Gill Sans MT?” “ Não.” Então teremos Myriad Pro? Ele funciona assim na lista até encontrar um e normalmente acaba em Arial. Você não quer isso. Você quer mais controle. Você quer realmente dizer, “Use a fonte, quero dizer, não apenas adivinhe algumas coisas.” É muito incomum usá-los agora. Então o que vamos fazer é ir para bin Gill Sans, adeus. Certo, e vamos colocar uma nova fonte. Vamos para a família de fontes e vamos para este chamado Gerenciar Fontes. Agora, isso carrega algo chamado Adobe Edge Web Fonts. Tudo isso, é que uma fonte da Adobe que eles nos deram para usar comercialmente de graça. Tem algumas opções úteis de busca lá em cima. Nós vamos usar coisas que nós projetamos fora do ilustrador. Você pode ver aqui no ilustrador. Eu me certifiquei de que escolhi fontes da Web quando estou projetando. Se você estiver no Illustrator, não desligue e escolha uma fonte aleatória da sua máquina, verifique se você está usando fontes da Web. Eu já fiz isso. Ambas as fontes estão disponíveis como fontes da Web. Mas se não tiver, posso passar por aqui e dizer : “Quero ver algumas fontes de título.” Isso me dá mais fontes de cabeçalho. Digamos que você quer algumas fontes de cópia corporal, que é este aqui. É mais como fontes padronizadas. Vou desligar os dois. Você pode escolher uma fonte de script, você pode escolher serifas. Você pode decidir apenas para ajudá-lo a escolher um estilo. Vou desligá-los. Vou procurar uma fonte. Estamos usando Open Sans e estamos usando a versão condensada. Por quê? Só porque ele é realmente bom para cabeçalhos, especialmente porque como uma fonte de cópia corporal, porque é magro, você pode colocar um monte de caracteres em, então títulos realmente longos são mais propensos a terminar em uma linha em vez de quebrar em duas. Mas isso é totalmente uma escolha de design de estilo também. O que eu vou fazer é que eu escolhi isso, aperte o pequeno tique no canto, e você clica em Concluído e nada acontece. Você ativá-lo, em seguida, ir para font-family e ele aparecerá aqui em baixo. “ Alô?” Agora, clique nele, e então ele aparecerá, legal. Um pequeno aviso aparecerá provavelmente, o meu foi desativado. Desativado não é uma palavra, desativado. Ele só diz que adicionamos algumas coisas, bem como um aviso, Ele apenas diz, que tivemos que ativar o normal e o peso da fonte é 300. É apenas dito - como normalmente aqueles não viriam por padrão, mas é feito isso para você fazer esta fonte funcionar. A outra coisa que aconteceu é, e tipo, é isso, como se tivéssemos uma fonte funcionando. Você não tem que se preocupar mais com isso. Mas só para você saber que você tem essa coisa aqui em cima, então no meu índice e no meu código-fonte, e no topo aqui. Lembre-se que colocamos no link para JavaScript e no link para o CVN e nossa folha de estilo. Esta coisa acabou de ser injetada pela Dreamweaver para nós fazê-la funcionar. Basicamente, o que está fazendo é descarregar a fonte. Você pode ver fontes de borda, Open Sans Condensed está sendo carregado para nós, então não precisamos fazer nada com ele. Só temos que deixá-lo lá. Vamos fazer um salvar tudo, é apenas carrapato. Funciona no nosso navegador. Incrível, lá está ele. “ Alô?” Venha para o fundo aqui. Isso não está muito certo. Bem, isso não é totalmente, certo, mas não se preocupe se o seu ainda está quebrado assim, nós vamos consertar isso no próximo vídeo também. Há algumas coisinhas que precisamos fazer para dar certo. Tudo bem, vamos para o próximo vídeo. 17. Corrigindo o estilo do menu suspenso de hambúrguer no Dreamweaver: A primeira coisa que vamos fazer é um desktop parece bem, um tablet que precisa de algum trabalho, que tem alguns problemas reais aqui em baixo [inaudível]. A maior delas é que você pode ver que não há espaço físico suficiente para caber. Tudo bem na pasta, mas você pode ver que quando ele chega perto daqui, acabou tentando ocupar o mesmo espaço. O que eu vou fazer é tentar encolher esse logotipo. Para fazer isso, vou clicar no logotipo. Vou às minhas fontes. Agora, você vai notar que essas coisas acabaram de aparecer, ou elas entraram lá antes. Isso é da fonte que adicionamos a partir das fontes de borda de chicote da Adobe. Ignoramos isto para o resto da turma. Diversão. O que eu quero é em estilos dot css, e nós vamos colocá-lo em nosso celular. Vamos criar um seletor que adivinhou exatamente o que eu quero. Eu quero estilizar esta imagem que está dentro de uma tag. A tag a dá seu link para, volta para a página inicial e dentro do cabeçalho, que é especificamente aqui. Se você tiver mais de uma imagem nesses dados, ela não funcionará. Você pode ter que adicionar uma classe a ele, realmente específica, talvez a classe de logotipo e instalar isso, mas porque eu só tenho uma imagem dentro do cabeçalho. Isso vai funcionar bem escrito. O que eu vou dizer é largura, ficando associado à porcentagem. Eu disse para talvez 80. Continue colocando dois dígitos para mim, e eu reclamei disso durante todo o curso. Oito e três por cento. Por que seria 83 dígitos duplos? Porque eu já notei isso. O que isso significa é que qualquer que seja a largura inteira não é uma garantia de 80% do seu tamanho original. A coisa legal sobre isso, como você pode ver quando ele chegar aqui em baixo, ele vai continuar escalando. Agora, a maioria dos telefones celulares, vai ser menor do que cerca de 320. Se você tem telefones celulares menores que isso, vai ficar muito pequeno. Vou desenvolver uma solução especial para eles? Eu não sou. Eu só vou dizer que 300 e acima que funciona e que é a maioria dos celulares do mundo. A próxima coisa a fazer é fazer um tablet primeiro. É que quando eu clicar nisso, o nulo grudando um em cima do outro lado a lado. Você pode deixá-lo se você gosta deles lado a lado, mas eu quero colocar o meu em cima um do outro. O que fazemos é sob estilos dot css e agora tablet, dizemos provavelmente este item aqui, esta vista superior UL, LI. Podemos dizer que eu gostaria que você mostrasse. Lembra que dissemos B bloco inline-block, que conseguiu, bloco lado a lado. Vamos colocá-lo em cima um do outro. Vamos adicionar apenas um carinho só para que eles não se sentem em cima um do outro. Legal, isso é estúpido para tablet. O que vamos fazer é, você pode ver que não temos essa classe aqui na visão móvel, então vamos apenas duplicá-la. Você pode duplicá-lo, duplicar, fazer media query e vamos colocá-lo no celular também. É, e os dois. Nozes. A próxima coisa é a bigamia e você acaba empurrando para a esquerda aqui. Eu brinquei com passeios flutuantes e passeios de forro e não funcionou. O que eu descobri é que estes dois estão dentro deste nav visão móvel e classes de visualização desktop dentro deste nav. Eles não podem estar dentro do mesmo navegador, que vai ocupar o mesmo espaço. O que precisamos fazer é pegar o celular, estamos fazendo codificação vista aqui estava indo para pegar o div móvel, toda essa linha, cortá-la.. Acima, eu nunca vou colá-lo. Há, eles vão excluir alguns espaços vazios para que se alinhe. Claro que perdeu um pouco dele começando, perdeu seu vôo. O que vamos fazer é ir para estilos dot css e vamos dizer, sob a vista, vai fazer um, há visão móvel e vamos dizer virado para a direita, por favor. Me dê um segundo. Aquele trabalho em metal. Botões pop para fora o que eu poderia fazer e uma visão móvel aqui, eu poderia obter todo o texto, para alinhar para a direita também. Mas eu também posso fazer, não sei, é irritante que esses caras não estejam alinhados à direita. Quero aquela vista de cima do disco. Na visualização do tablet e da área de trabalho, gostaria que você se alinhe à direita. Parece um pouco melhor. Já fiz vista de mesa. Agora temos que fazer isso para a visualização móvel. Aqui em baixo. Todas essas coisas não funcionam mais. Vamos fazer as mesmas coisas no celular. Eu gostaria que a visualização móvel alinhasse à direita, ou realmente flutuasse para a direita e para a área de trabalho, eu gostaria que você para obter o texto para alinhar à direita. Legal. Estamos chegando lá. Uma das últimas coisas que eu poderia fazer é que o estofamento no topo disso está me deixando um pouco louco. O que é isso? Essa coisa ele dá a imagem que está dentro da minha visão móvel no tablet. Se eu tenho algo um pouco de trabalho, posso envolvê-lo? Isso provavelmente vai funcionar. Vamos dar uma chance. Ele só adiciona uma margem para a montagem de arrasto superior e faz alinhar. Agora eu estou arrastando para frente e para trás um píxeis co, então para baixo no celular e provavelmente tenho que fazer a mesma coisa. Ocasionalmente, os estilos fluem através desse tablet para o celular. Eu vou salvar todos provado o navegador para se certificar de que é realmente verdade. Parece bom lá. Incrível. Eu diria que estamos lá e isso é uma vitória. É assim que criamos nosso menu suspenso j-query, tudo por nossas lições. No próximo vídeo, mostraremos como copiá-lo e colá-lo e fazer um pouco de trapaça. Mas e você se orgulha de si mesmo, você fez funcionar? Se você não se lembra disso no final de cada vídeo, eu salvo uma versão de onde estou. Dependendo de onde você ficou preso, você pode olhar na tela aqui em algum lugar no canto inferior esquerdo ou nos comentários. Serão um link para o arquivo completo do vídeo. Você pode comparar o seu com este aqui, apenas ver o que pode ter corrido mal. Mas se você fez isso e você consertou e você tem um piscar de olhos. Estou muito impressionado, porque é muito quente, mas grande coisa é que da próxima vez que você fizer isso, você pode copiar e colar o código que você mesmo fez. Meus amigos, vamos passar para o próximo tutorial onde nós apenas copiamos e colamos para as pessoas que têm trapaça. 18. Planejando nosso modelo do Dreamweaver: Oi lá. Neste vídeo vamos falar sobre modelos. Nós não vamos realmente projetar o modelo neste vídeo em particular. Vamos fazer isso um pouco mais tarde, mas é sobre esse tempo que realmente precisamos considerar o que vai ser parte do modelo e o que não é. Vejamos nosso design no Illustrator. Olhando para o design, existem alguns bits que vão fazer parte do modelo. Geralmente, ele vai ser sempre o cabeçalho eo rodapé e isso é verdade para o nosso caso. Isto vai ser o mesmo em cada página e é a parte central aqui que vai ser única para cada página. Esta é a minha página inicial. Você pode ver aqui embaixo, mesmo cabeçalho, mesmo rodapé, mas é essa parte do meio que é diferente. Eu vou ter certeza de que ele é parte do modelo, certifique-se de que o rodapé é parte do modelo. Vou projetar agora no Dreamweaver primeiro e depois transformá-lo em um modelo e não até então antes de começar a projetar essas partes internas. Nós projetamos essas partes internas. Primeiro, vamos ter que retirá-los, fazer um modelo e tentar colocá-los de volta e apenas fazer um trabalho extra para nós. As outras coisas que farão parte do modelo é esta pequena caixa verde aqui. Não quero que esta imagem mude. Vai ser assim em todas as páginas. Eu vou fazer essa parte do modelo. Se você quer que isso mude em cada página, você vai ter que fazer disso uma parte do que é chamado de área editável, como esses caras. Basta identificar a partir do seu design o que é parte do modelo, projetar que primeiro, e, em seguida, mais tarde, vamos fazer áreas editáveis. A outra coisa a considerar é se eu realmente preciso de um modelo? Os modelos adicionam um nível de complexidade a um site. Os bônus é que quando eu faço uma alteração no meu modelo, digamos que eu adicionar um item de menu extra, ele passa por cada página e atualiza-o automaticamente. Super bom se você tem um site que diz 50 páginas ou mais. Mas se você tem como um site de 10 páginas, eu poderia pensar duas vezes sobre adicionar um modelo. Por quê? Porque em acrescenta essa complexidade para um pouco mais de velocidade. Mais complexidade, um pouco mais rápido, talvez não valha a pena para um site realmente pequeno. Mas vamos fazê-lo por este, porque queremos ser todos eficientes e oficiais. Vamos dar uma olhada no que vai ser criado neste modelo. Este é o que estamos fazendo. Vamos trabalhar para isso. Vamos para a visão completa ao vivo, isso é o que vai parecer. Ele vai ter o nosso cabeçalho que temos feito, ele vai ter esta grande imagem de fundo e não vai haver nada, nada, nada e, em seguida, um rodapé na parte inferior. Vamos criar isso antes de transformá-lo em um modelo. 19. Adicione uma imagem de fundo que esteja fora do nosso contêiner principal no Dreamweaver: Tudo bem. Neste vídeo, vamos editar esta imagem de fundo e ela fica toda elástica e tem uma altura específica e, em seguida, fica um pouco menor e passa a ser móvel. Vamos fazer isso neste vídeo. Primeira coisa, vamos mudar a cor de fundo. Atualmente é branco. No Illustrator deve ser com o selecionado, vá para propriedades CSS, e vai ser yay, yay, yay. De volta ao Dreamweaver e o que faremos é mudar tudo, certo? Lembre-se que a etiqueta “tudo” é a etiqueta de corpo. Corpo é tudo o que vemos. Então vamos mudar isso, podemos mudar toda a cor de fundo. Legal. Em estilos sob GLOBAL, nós realmente temos um corpo que fizemos anteriormente, nós fizemos isso com a fonte para tudo. Agora podemos fazer o plano de fundo para tudo. Salte para fundo, cor de fundo, deixe o hash lá, coloque uma cor, retorne, e agora tudo é tipo de cor cinza. A próxima coisa que eu quero fazer é, eu quero fazer esta grande imagem no fundo aqui. Muito bem, então, quão alto é? É assim tão alto aqui. Você pode ver que meu CSS me deu a altura da imagem real, mas ele é realmente cortado dentro de lá. Essa é a altura real que eu quero, então eu vou pegar isso. Onde é que isto vai parar? No design aqui, você pode ver que ele está realmente enrolando em torno do meu cabeçalho, então tecnicamente, eu deveria ter feito isso primeiro bem no início do curso e, em seguida, colocar minha navegação lá dentro. Acho que se começarmos com as coisas de fundo reais para o curso, vamos entrar em muitas complexidades, é muito cedo, então vamos fazer isso mais tarde. Vai nos mostrar como reajustar uma tag div que deveríamos ter feito antes. É muito fácil, só precisamos de embrulhar este tipo. Vamos dar uma olhada. Ele vai para as bordas e eu quero que essa coisa tipo de ir para o fundo inteiro, dependendo de quão grande é o tamanho da tela. Vamos fazer isso no Dreamweaver. Vamos clicar no meu “Cabeçalho”, certifique-se de que você tem o cabeçalho selecionado, e na verdade se eu envolvê-lo em torno do cabeçalho, ele ainda vai estar dentro deste recipiente. Este tamanho do contêiner tem, eu acho, 1200 pixels de largura. Eu não quero que ele seja contido lá também porque isso é praticamente o que mantém o cabeçalho no lugar. O que eu quero fazer é, eu quero colocá-lo fora deste contêiner, então precisamos coletar o contêiner. O contêiner está selecionado, então clique aqui, clique no contêiner, e eu quero ir para inserir uma div, e eu quero envolvê-lo em torno do contêiner. Legal. Agora você pode ver aqui em baixo é div, ele não tem nome ainda, então vamos criar uma classe CSS, e então vamos adicioná-la a ela depois. CSS Designer, Styles, vamos fazê-lo em GLOBAL, vamos criar um seletor. Vamos chamar esta imagem de herói. Legal. Vamos dar um estilo básico para que possamos vê-lo. Primeiro de tudo, ele precisa de uma altura porque no momento em que isso envolve o lado de fora deste cabeçalho porque não há nada acontecendo aqui. Basta dar-lhe uma altura para que possamos vê-lo. A altura que conseguimos do Illustrator era aquela, 653. Vamos adicionar uma imagem de fundo. Aqui em baixo nas imagens, é aqui que fazemos a cor de fundo. Logo abaixo, há um caminho. Clique em “Procurar a imagem”. Vá para os nossos arquivos de exercícios, encontre imagens, este é um aqui chamado “hero-background”. Agora, nada está acontecendo aqui porque lembre-se que acabamos de criar o estilo e não o aplicamos. Ali está, ali. Clique no botão “div”, se você tiver clicado fora dele, você precisa clicar de volta neste “div” que está bem no início aqui e aplicar essa classe a ele para que você hero-imagem. Incrível. Vamos pré-visualizar no navegador. Talvez salvar tudo primeiro, verificar no navegador. Meio que funciona. Está enrolando o lado de fora e é a altura certa. Só está repetindo. Se você tiver uma tela menor, você pode não ver a repetição, mas se você tiver uma tela realmente grande eventualmente ela irá repetir uma e outra vez. Isso é o que as imagens de fundo fazem por padrão. Vamos desligar isso primeiro e verificar. Está de volta ao Dreamweaver e vamos encontrar nossa imagem de fundo. Aqui, fundo da imagem, há esta opção aqui que diz repetição. Background-repita, clique em “Nenhum”. Não repita e salve tudo. Teste no navegador. Incrível. Diz “não repetir”. A outra coisa que eu gostaria que você fizesse é esticar para cobrir as bordas aqui. Quero manter a mesma altura. Eu quero esticá-lo para fora e há um recurso legal aqui chamado capa que vai ajudá-lo quando ele se ajusta. Ele vai esticar para qualquer tamanho da tela. Vamos ver isso no Dreamweaver. Aqui, é uma opção que diz o tamanho do plano de fundo, clique na palavra “Auto” e escolha a capa. Se eu desativar e saltar de volta para o meu navegador, incrível. O que ele vai fazer agora, como você pode ver, ele meio que se estende para caber e quando ele chega à sua altura, altura máxima, ele permanece lá. Vai ser sempre agradável proporcionalmente ao fundo. O problema com isso é que você pode ver um pouco dele cortado fora quando ele chega ao maior, no topo lá. Legal. Esse é o nosso disfarce. O que eu também gostaria de fazer é, você pode ver, eu gostaria que a imagem fosse centrada. No momento, é meio que apenas usando que esquerda como um padrão e eu gostaria de me livrar do estofamento no topo. Primeiro de tudo, vamos levá-lo ao centro. Retorne ao Dreamweaver, no que chamamos de posição em segundo plano, Clique no sinal de porcentagem e clique em “Centralizar”. Salve tudo. Cheque. Agora deve ser. Você vê? Isso funciona a partir do centro agora, em vez de ficar na esquerda. Vamos nos livrar disso. Considere a borda do lado de fora, isso é verdade para cada site que é criado por padrão porque a tag body, lembre-se, nós bloqueamos a cor de fundo e adicionamos uma fonte a ele. Por padrão, ele vem com algum preenchimento. Na verdade, alguma margem que vai ao redor do lado de fora. Isso só está lá por padrão. Só precisamos substituir isso no Dreamweaver. Encontre nossa etiqueta corporal. Aqui está ali. Escolha “corpo GLOBAL” e diga aqui em cima, em “Layout”, diga “margens”. Tem isso todo o caminho ao redor. Vamos ligar isto e apenas dizer, basta digitar manualmente zero pixels. Você pode ver que tudo desapareceu. Você acha que porque diz zero lá, você pensaria que está definido como zero, mas não é. Só significa que você não fez nada. Estou começando em algum lugar e começando em zero. Você tem que realmente digitar zero e clicar em “Enter”. Agora ele fará parte do CSS. Salve tudo. Verifique no navegador. Você pode vê-lo agora [inaudível] ao lado das bordas. Uma última coisa que vou fazer é eu queria que isso fosse um pouco fora do topo. O que nós vamos fazer é, há um casal para pegar, nós temos o cabeçalho para ter preenchimento no topo, ou porque nós temos esta imagem heróica já selecionada, nós podemos colocar algum preenchimento sobre isso. Vamos fazer essa. Vamos para a imagem heróica e vamos ter um monte de estofamento. Eu só estou atrapalhando. Quanto? Eu não tenho certeza. Salvar. Verifica isso. Sim, está tudo bem. Meu único problema é que a imagem de fundo é um pouco escura. Eu poderia ir e iluminar isso mais tarde, mas está funcionando. Parece bom. Uma última coisa que eu preciso fazer é se eu olhar para o meu arquivo de exemplo, você pode ver aqui, este foi na verdade apenas a minha versão tablet, a mesma altura. Mas meu celular, eu realmente encurtei um pouco porque as fontes ficaram menores e a última é um pouco diferente. Este é desta altura, 526. Vamos lá e colocar isso. Nossa imagem de herói está em GLOBAL. O que eu quero fazer é fazer outro no celular. Altura máxima é 400, selecione como imagem heróica, você pode ter que digitá-lo e a altura para este, ele vai substituir o que temos atualmente e colocá-lo em. - Legal. Salve tudo. Verifique no navegador. Navegador mesmo, depois para baixo, para baixo, para baixo e, em seguida, fica um pouco menor. - Legal. Você não tem que ajustar isso. Você o desenha no Illustrator e nas melhores intenções isso vai ser incrível. Então você pode ter que fazer alguns ajustes de altura, mas o nosso está funcionando bem no momento. A próxima coisa que precisamos fazer é adicionar nossa caixa de conteúdo principal. Vamos fazer isso no próximo vídeo. 20. Como usar a tag principal de HTML5 no Dreamweaver: [ MÚSICA] Oi lá. Neste tutorial, vamos adicionar esta tag HTML5 principal aqui. É onde a maior parte da cópia vai para o site. Vamos torná-lo agradável e grande, vamos dar-lhe uma altura mínima, e vamos torná-lo verde apenas para que você possa vê-lo. Não gosto desse verde. Não vai ficar por aqui. Vamos começar e fazer isso. Há três partes principais em nosso site. Há um cabeçalho, o que fizemos, depois há uma tag principal que vai no meio, e isso é tudo sobre o conteúdo principal, e há um rodapé. Fizemos cabeçalho. Precisamos colocar no principal agora, e nós estamos indo apenas para colocar uma caixa principal vazia porque nós vamos fazer essa caixa a coisa editável em nosso site para que ele possa gerar novas páginas e colocar conteúdo único dentro dessa caixa principal, mas precisamos do contêiner primeiro. Vamos colocá-lo após o cabeçalho. Vou clicar no meu cabeçalho, certificar-me de que desliza para lá em baixo e vamos para Inserir. Você pode ver aqui, estas são a minha estrutura principal para o meu site. Cabeçalho, navegação, já fizemos. Vamos fazer o principal e o rodapé em um segundo. Vamos colocar o principal. Vai ser depois da minha cabeça, e lá está a minha caixa principal. Vamos deixar aquela mensagem ali. Vai ajudar-me a identificar onde está a caixa. Agora eu deveria passar e colocar meu pé, porque ele deveria estar bem embaixo. O único problema é que se eu olhar para o meu design aqui e ilustrador, meu rodapé está bem na parte inferior aqui e é projetado contra um fundo branco. Vai ser um pouco difícil para mim no Dreamweaver projetar essa coisa contra este fundo verde. O que eu poderia fazer é adicionar um pouco de altura para a caixa principal. Eu posso dizer que você pode ter 100 pixels de altura apenas para que ele empurre para baixo e me permite projetar na parte inferior aqui. O único problema com a altura, é que é uma figura absoluta. Se eu disser que seria 800 pixels de altura, e meu design mais tarde tenta ir grande, digamos 800 incorpora isso muito bem, mas em outra página que eu estou projetando, 800 quando se trata de cerca de aqui, mas há da imagem quer ir montes maiores e isso causa muitos problemas. Isso diz: “Bem, eu quero ter 800 anos.” e a imagem diz, “Bem, eu quero ser maior. e há uma grande luta e as coisas começam a espalhar-se por todo o lado. A maneira de contornar isso, é usar algo chamado altura mínima. O que você diz é eu quero que você tenha um mínimo de 800 mas você pode ser um pouco maior se você gosta. Seja tão grande quanto quiser, na verdade. Vai definir um mínimo de 800 pelo máximo de infinito. Essa é uma maneira muito boa de sentar alturas quando você está projetando modelos. Você não tem certeza de quão grande uma caixa precisa ser, mas definitivamente não precisa ser tão pequena. Precisa ser um pouco maior do que isso. Vamos fazer isso sob o painel CSS Designer e, em seguida, clique em estilos e GLOBAL e nada está realmente clicando. Por que isso está acontecendo? É porque entre fazer esses vídeos, eu estava fazendo outro trabalho e troquei o meu para Current. Eu gosto do Current. Significa que tudo é como temos trabalhado neste curso. Atual significa que se eu mudá-lo para Atual e eu clicar em dizer que, ele muda para o estilo que eu selecionei atualmente. Mas vamos voltar para Todos. Atual é ótimo quando você realmente tem um site e ele está acabado e você está realmente ficando muito bom nisso, mas nós vamos clicar de volta para Tudo para o momento. style.css, vamos colocá-lo em GLOBAL. Vamos criar um estilo para o principal. Não preencheu previamente. Lembre-se, temos paradas completas na frente das coisas que fazemos. As coisas que já existem, como esta tag main, nós não o nomeamos. Só que já existia. Nós adicionámo-lo. Você não coloca o período na frente lá, apenas o velho principal. Nós vamos dizer principal, eu gostaria que você tivesse uma altura, não aquela, nós fomos para a altura mínima de 800 pixels. Isso só significa que vai ser bom e grande todo o caminho até o fundo aqui, então meu rodapé depois vai ter espaço para entrar lá. O que eu poderia fazer apenas para torná-lo óbvio para você neste tutorial, é dar-lhe uma cor de fundo de verde suficiente. Só porque eu vou usar, na verdade, o RGBA para que eu possa usar um pouco de transparência. Por que estou fazendo isso? É só para que você possa vê-lo quando eu visualizo em um navegador e você pode ver com o principal vai. Vamos pré-visualizar um novo navegador. Você pode ver que esta é a minha caixa principal e vai até aqui. Vamos remover isso em um segundo. Eu disse que faço isso por você, mas, muitas vezes, faço isso quando estou construindo um site. Ele realmente tinha que saber quais tags começam e terminam. Se você adicionar uma cor de fundo, às vezes você gosta, é onde aquele cara vai. Vamos removê-los em um segundo. A próxima coisa que queremos fazer é adicionar o rodapé, e vamos fazer isso no próximo vídeo. 21. Como adicionar a tag de rodapé de HTML5 a um site usando o Adobe Dreamweaver: Oi lá. Neste tutorial, vamos adicionar nosso rodapé. Este é o nosso top, este é o nosso rodapé bonito. Vai ter dois pequenos divs dentro dele para flutuar nossos ícones sociais para o lado. Vamos fazer nossos direitos autorais irem para o lado direito. Nós também vamos adicionar links para todos esses, e este vai ser legal, quando você clicar nele, ele vai abrir sua conta de e-mail. Vendo isso no e-mail. Vamos fazer isso agora no Dreamweaver. A primeira coisa é, onde vou colocar minha foto. Vou colocá-lo apenas, eu cliquei em “My Main Tag”, e eu vou colocá-lo logo depois disso. Vamos clicar em “Inserir”, e abaixo aqui há um chamado rodapé, e eu vou colocá-lo depois, e lá está no fundo aqui. Você pode ver, há a minha etiqueta principal, e depois há o rodapé lá também. Vamos dar-lhe uma altura e remover este texto. Vamos para o painel “CSS Designer”, “Styles.css”, “Global”, vamos criar um “Seletor”, e apenas para o rodapé, por favor. Eu vou fazer você ter uma altura. Agora, quando eu digo para não colocar alturas, porque nós queremos que o conteúdo se alongue cada vez mais, isso não faz exatamente, não é o mesmo para o rodapé. Você pode ver aqui que é desta altura. É sempre desta altura. Eu poderia colocar uma altura mínima, mas eu sou apenas, não importa, porque eu vou colocá-lo em uma altura normal. Forçá-lo a ser. Eu já verifiquei que é, 120 pixels. Legal. É ele, vou pegar esse texto, selecionar tudo, excluir, salvar tudo. Um dos problemas, quando você está excluindo essa opção, é que muitas vezes ele deixa esse espaço livre aqui. Basicamente, isso é como uma barra de espaço. Isso é bom. Eles deixam lá porque, caso contrário, você pode ver a tag fecha, e você não pode realmente clicar nela. Eles deixam isso aí. Vou apagá-lo da minha co-view. Eu não preciso dele. Meu rodapé é composto de duas partes. Há um, vamos dar uma olhada, há um pote de ícones sociais, e há um pote à direita aqui com este copyright. Vou fazer duas etiquetas div, uma flutuar para a esquerda, e outra para flutuar para a direita. Vamos fazer isso. Vamos jogá-los. No rodapé vamos “Inserir”, vamos inserir uma tag div, e vamos colá-la, tenho meu rodapé selecionado, então vamos aninhar. Agora com este selecionado, vamos colocar em outra tag div e será logo após a que eu selecionei. Tenho dois deles. Você vai ver, eles estão dentro do rodapé. Tenho duas etiquetas div. Vamos criar duas classes. Vou flutuar um para a esquerda e outro para a direita. Painel CSS Designer, Estilos. CSS, Global, Seletor. Vou dar um nome a estas, está bem? Então eu vou chamar este, os ícones sociais. Eu vou fazê-lo flutuar para a esquerda, e eu vou fazer outro chamado, e por período para a frente, eu vou chamar este um copyright. Direitos autorais, até. Vou dar-lhes uma inclinação, um flutuador para a direita. Agora, nada está acontecendo porque eu preciso aplicá-los. Esta primeira tag div selecionada. Vou fazer de vocês os ícones sociais. Este aqui, é estranho. Este flutua para a esquerda, ícone social, e este tipo escorregou atrás deles. O texto fica espremido para o lado. É por isso que quando eu clico aqui, eu tenho o div selecionado, mas ele seleciona tudo. Flutuar faz coisas estranhas para div tag, então... Conseguimos este. Vamos colocar em direitos autorais, e lá vamos nós. Incrível. Flutua para a esquerda, flutua para a direita. Agora vamos colocar em parte do nosso conteúdo. Vamos fazer este primeiro. Vou ter esta tag div selecionada. Eu vou para Inserir. Vou inserir uma imagem. Eu vou inserir um aninhado dentro, e eu vou sair para meus arquivos de exercícios, imagens, e eu tenho ícones sociais. Tenho tudo isso para acrescentar. Adicione-os na ordem que preferir. Vou colocá-los em ordem alfabética. Legal. Vamos adicionar coisas à nossa imagem. Clique no “Menu Hamburger”. Alt-text é o que você coloca em torno de cada imagem, e é uma maneira de descrever a imagem, e o Google adora quando você a descreve usando boas palavras-chave. Traga seu próprio laptop. Facebook. Toda imagem precisa de um texto antigo. Ele diz aos motores de busca o que a sua página é tudo sobre e para onde o link vai. O que vamos fazer é, eu já tenho uma página construída para todas as minhas coisas sociais. Vá se inscrever, me siga em todas essas coisas. Se você é uma pessoa do Facebook, do LinkedIn, do Twitter, vá me ver. Eu vou pegar este aqui, no link e este pedaço aqui em cima, definir o seu alvo. Vamos dizer em branco. O que isso significa é que, por padrão, se eu clicar nesta imagem, vamos salvá-la realmente [inaudível] navegador. Por padrão, se eu levantar isso, o alvo é nenhum. Por padrão, se eu levantei o alvo em si e isso significa que quando eu clicar nele, ele substitui esta página pelo Facebook. Mas porque eu mudei para branco, se eu clicar nele e você pode vê-lo muda para a nossa página real do Facebook. Vamos colocar o resto destes. O que podemos fazer para salvar indo para, Inserir e Imagem, cada vez, basta clicar com o botão direito do mouse nele e ir para duplicar. Quando estiver selecionado, solte isso. Vamos escolher uma nova fonte. Que é apenas a nossa imagem. De volta aos nossos arquivos de exercícios. Onde você está? Imagens, ícone social. Vou fazer o LinkedIn em seguida. Troque isso para fora. Tudo isso, texto alt, precisa ser único. Linkedin, vá nos ver lá também. Ele vai, continuar fazendo em branco, mas eu quero mudar o URL, para este aqui, “Traga seu laptop”. Legal. Vou fazer a rotação da tabela do editor virar um pouco à frente. Até chegarmos ao último. Espere por isso, porque o e-mail é um pouco interessante. Você está de volta. A razão pela qual o e-mail é um pouco diferente é que não é um link. Não há um site que você possa acessar por e-mail. O que você faz no link aqui é mudar isso para, enviar e-mail para, e, em seguida, dois pontos, ele precisa ser soletrado dessa maneira. Em minúsculas e, em seguida, coloque o seu endereço de e-mail. O meu é Daniel no B-Y-O-L dot IE. Se quiser me enviar um e-mail, mande-o para lá. ele vai [inaudível] em branco. O que vai acontecer agora é que eu vou clicar em “Off” e eu vou clicar em Browser, salvar tudo. Olha, quando eu clico nisso, o que acontece, é que ele carrega seu navegador de e-mail padrão. O meu está usando o Mac Mail. Apenas certifique-se que você tem o, correio para, na frente disso e que vai funcionar. De volta ao Dreamweaver. Há um pouco de limpeza. Livre-se deste texto aqui. Adeus, não preciso mais de você. A próxima coisa que faremos é este aqui. É bem fácil. Isto é principalmente apenas texto. Vou roubá-lo do Illustrator. Portfólio denso, continue clicando na coisa errada. Ali está ele. Agarrar você, e você. Eu quero estilizar isso? Estou realmente feliz com o texto padrão. O que você poderia fazer, você poderia criar uma classe especial para isso. Estilize a fonte desejada e o tamanho desejado. Estou feliz com o jeito que está. A próxima coisa que eu gostaria de fazer é que ele precisa de um pouco de empurrar para longe das bordas aqui. A altura e os lados. Para fazer isso, eu vou para CSS Designer, Styles.css, Global, Rodapé. Eu posso usar margem ou preenchimento neste caso porque não há nenhuma caixa colorida para rodapé. Só está vazio. O que eu preciso fazer é, eu vou empurrar para baixo sobre isso. O único problema com isso é que a caixa realmente ficou mais alta, por isso. Começou em 120, agora é 120 mais 33. Quando você adiciona margens a coisas que têm alturas, elas simplesmente se combinam. Agora é como um 153. O que eu preciso fazer é menos a desta altura. Minha matemática é terrível. Posso fazer isso? É 97. Oh, eu vou adivinhar que é 97. É assim que minha matemática é ruim. Eu teria tirado a calculadora, mas eu não sei. Senti-me atordoado e senti que devia fazê-lo. As margens da esquerda e da direita. Como não definimos nossa largura a partir disso, não definimos uma largura, então não precisamos de menos ela. Podemos adicioná-los a ele. O que vai ser? Vai ser cerca de 20 pixels desse lado, 20 pixels daquele lado. Incrível. Agora você pode ser como, uau, posso colocá-lo no centro horizontalmente? Não, você não pode. Centralizar horizontalmente é surpreendentemente muito difícil. O que você precisa fazer é fingir. Esse cara aqui. Digamos que você quer a altura e você pode adicionar um pouco de altura a este. O que ele é? Seu ícone social. Posso encontrar um ícone social. Onde você está? Lá e adicionar um pouco de preenchimento para ele, porque estes têm que ser diferentes. É por isso que não vou fazer isso no rodapé. Vou adicionar um pouco de margem ao topo e fazer com que pareça que está no centro. Há maneiras de fazer isso, mas é super complicado. Direitos autorais. A mesma. Vou adicionar altura a ele. Faça-o parecer que está no centro. A próxima coisa que quero fazer é adicionar espaçamento entre todos esses caras. Correspondendo aproximadamente. Isso, ok, não precisa ser exato, mas eu não vou fazer isso na tela. Vou fazê-lo secretamente em segundo plano. O que eu quero que você faça é ver se você pode espaçar esses caras fora, sem empurrá-lo para fora do lado daqui e tudo caindo em pedaços. Mas veja se consegue colocar um pouco de espaçamento. Até você, quanto. Mas eu gostaria de ver se você pode criar uma classe ou apenas uma classe ou trabalhar em algo para fazer com que eles fiquem um pouco mais espaço. Muito boa sorte. Eu sei que você pode fazer isso, e se você não fizer e quebrá-lo, apenas desfaça e deixe. Eles parecem bem sozinhos. Mas eu gostaria que você parasse comigo, e ver se você pode adicionar um pouco de enchimento. Vamos para o próximo vídeo onde começamos realmente a adicionar nosso modelo. Na verdade, uma última coisa antes de irmos é esta grande caixa verde. Vamos nos livrar da grande caixa verde. Vamos encontrar o fundo principal e verde aqui. Esta pequena lata de lixo. Salve tudo. Veja no navegador. Incrível, tem o meu rodapé lá embaixo. Tem isso e agora vá embora, deixe esses caras espaçados. Você pode fazer isso. 22. Como criar um modelo no Adobe Dreamweaver: Olá, adoráveis pessoas do Dreamweaver. É hora de fazer um modelo. Neste vídeo, vamos fazer esta coisa aqui. Parece exatamente o mesmo que o último vídeo, mas agora chama-se a.dwt e temos uma coisa chamada “Região Editável”. O que isso significa é, eu posso fazer um monte de páginas e atualizar o modelo, que tem meu cabeçalho e meu rodapé e ele vai derramar através e atualizar todas as páginas em uma grande swoop falta. Vamos aprender a fazer isso no Dreamweaver. A primeira coisa que eu quero fazer antes de eu fazer o meu modelo realmente é, há um pouco de textos aqui que eu quero me livrar de. Você pode fazer isso na visualização de código ou na visualização ao vivo, não importa, eu prefiro na visualização de código, então o texto desapareceu. Agora vamos salvá-lo como um modelo. Se eu tiver alguma coisa selecionada aqui na minha visualização ao vivo, e eu for para “Arquivo”, salve este modelo. Está acinzentado por alguma razão. Mas se eu clicar aqui em baixo na visualização de código, e depois ir para a mesma opção, ganha vida, não sei por quê. Descrição, eu nunca lhe dei uma descrição. Mas em termos de “Salvar como”, isso é muito importante. Índice é um nome ruim para ele e nós vamos chamar como portfólio-templates, e sem espaços, não use nenhum personagem louco e clique em “Salvar”. Atualizar links, clique em “Sim”. Um dos problemas que eu tive quando eu estava fazendo este curso é de volta no vídeo quatro, eu em “Site”, eu entrei em sites, sob meu “Nome do Site”, quando nomeamos isso, eu coloquei um apóstrofo s, tanto no nome do site quanto na pasta que está na minha área de trabalho e que causou problemas para nada, exceto para este modelo. Foi um pouco sobre abridor de olhos para mim. Apenas certifique-se se você está tendo problemas com seu modelo, que você não tem nenhum caractere engraçado no do site ou no nome da pasta local. Tenho certeza que era o nome da pasta local que estava me causando problemas. Cancele tudo isso, “Concluído”, para que ele seja salvo o modelo. Incrível. Agora o que realmente aconteceu, um par de coisas é, um pouco de código que foi adicionado que não estava lá antes, você pode ver modelo começar em título duplo doc. Há um monte disso sendo adicionado. A outra coisa é, você pode ver aqui em cima a extensão dwt foi adicionada. Esse é o modelo do Dreamweaver. Você também vai notar em nossos arquivos do site, você pode ver aqui que é uma nova pasta que está sendo feita e dentro dela, há o meu portfólio. Além disso, quando você está trabalhando com modelos, e você vai notar que a visualização ao vivo não funciona tão bem como costumava, ainda funcionando e funciona tipo de, mas é um pouco mais difícil de usar do que era quando não é um modelo, isso não é problema e eu também acho que quando eu gerá-lo pela primeira vez, se eu fechá-lo e reabri-lo, ele vai dizer, “Aviso”, você não tem nenhuma área editável, e eu sou como, “Legal”, eu preciso corrigir isso. Vamos fechá-lo e reabrir um backup, [inaudível] realmente funciona muito melhor, rápido o Dreamweaver, adorável, nós os amamos. Agora o que eu quero fazer é, eu preciso da região editável porque no momento em que tudo faz parte do modelo, e se eu criar novas páginas com base nesse modelo, não haverá nada que eu possa fazer porque eles estão todos bloqueados. O que eu quero fazer é clicar onde eu vou, lembrar que nossa caixa de conteúdo principal estava aqui. Você notou que eu não destacava como costumava : “Ei, é uma das peculiaridades.” Foi destacado aqui em baixo. Mas se eu for para “Inserir”, “Modelo” em uma região, lembre-se que ele não funciona mais para trabalhar nessa visualização ao vivo, então temos que usar um pouco mais de visualização de código. Vou destacar esses caras, principal porque essa é a parte que eu quero ser editável. Vá para “Inserir”, vá para “Modelo” e eu vou tornar essa minha “Região Editável”. Como é que lhe vamos chamar? Região editável três”, vou chamar isso de conteúdo principal. Clique em “Ok”. Você verá que ele fica embrulhado nesta tag e isso vai permitir que ele seja editável. Vamos clicar em “Salvar”, e é assim que você cria um modelo. No próximo vídeo, mostramos como gerar uma página a partir deste modelo. Tudo bem. Vamos fazer isso agora. 23. Como criar novas páginas com base em um modelo do Dreamweaver: Ei aí. Neste tutorial, vamos criar uma nova página com base no nosso modelo que fizemos e quando vamos fazer uma mudança como esta, olha, ele vai atualizar todas as outras páginas conectadas ao modelo e nosso modelo incrível está completo. Então, para fazer uma página do nosso modelo, vamos fechar o DWT que tínhamos aberto, então vamos para “Arquivo”, “Novo”. Vamos clicar neste botão aqui. Nós estamos indo para ir para Modelos de Site e nós vamos escolher Modelo de Portfólio. Sim, queremos atualizá-lo. É por isso que criamos você e você pode ver aqui nós temos nosso documento sem título e você pode ver todos os códigos escondidos exceto o principal. Você pode ver que há um pouco de cor lá e há algumas outras coisas. O título deve ser editável para cada página. Então é automaticamente feito isso para nós e sim. Você pode ver aqui em cima, isso voltou à vida. Mas esses caras estão acinzentados. Apenas o conteúdo principal é editável. Então agora precisamos salvá-lo. É aqui que fica um pouco dobrando a mente. Vamos ver os nossos ficheiros. Criamos este arquivo de índice. Isso é o que nós fizemos para todo este tutorial, nós fizemos nossa página inicial. Então dissemos que vamos transformá-los em um modelo. O problema é que o modelo não está conectado a esta página de índice. Esse cara aqui é inútil agora. Nós o usamos, ele gerou isso, mas eles não estão conectados. Então precisamos deletá-lo, porque ele não está conectado ao nosso modelo. Então o que vamos fazer é eu não quero deletá-lo. Eu vou fazer uma pasta chamada Zold, que é antiga com um Z e eu vou apenas clicar em segurar e arrastá-los para lá. Não quero apagá-lo no caso de as coisas correrem mal. Aqui está na minha pasta antiga do Zold. O que precisamos fazer agora é salvar este novo arquivo, vamos chamá-lo de Index, e salvá-lo. Legal. Estranho, certo? Nós geramos um arquivo de índice para começar, então precisamos excluí-lo e recriá-lo apenas para que ele esteja conectado ao modelo e a qualquer arquivo novo agora que precisamos fazer. A página Fale Conosco, a página Sobre Nós, tudo que você precisa é ir arquivo novo e precisamos gerar a partir do nosso modelo para que todos estejam conectados. Então agora no resto do tutorial vamos passar pelo material para o principal. Vamos construir isto. Vamos ter os carrapatos, todos os botões e todas as imagens. Mas o que eu realmente queria fazer antes de irmos é dar um pequeno aviso sobre como trabalhar com modelos e como ter certeza de que você não se mete em nenhum problema. O mais fácil é ter certeza, digamos que você precisa atualizar esses botões aqui, adicionar um terceiro, ou brincar com algo. Claro que precisamos atualizar o modelo, o que é uma boa idéia. Então, “Arquivo”, “Abrir”. Você vai encontrar essa pasta Modelos e aqui está o meu modelo. Sempre que estiver atualizando o modelo, feche qualquer outra página. Eu descobri na minha experiência que se eu tiver Index aberto e eu tentar e fazer alterações no modelo, ele atualizá-lo na maior parte do tempo, mas eu tive alguns problemas, então eu apenas me certifico de que nada mais está aberto, apenas o modelo. Então eu entro aqui e digo que você, meu amigo, esta imagem aqui, eu quero fazê-la. Eu não sei. Não sei por que estou fazendo isso. Apenas, por exemplo, “Arquivo”, “Salvar”. Ele vai dizer que eu vou atualizar essas páginas porque eles são baseados no modelo. Esta é a parte legal. Esta é a parte que você é como oh cara, isso vai economizar muito tempo, especialmente quando há uma longa lista. Tem umas 500 páginas e você diz atualizá-las todas, por favor. Eu clico em “Fechar” e ele se foi e os atualizou. Então eu vou fechar o modelo e abrir meu Índice. Você vai ver com sorte, ele está atualizado. Incrível. Vou voltar atrás, fechar isto. Abra o modelo, para que ele abra sozinho. Aqui em baixo ele tinha 803 anos. Salvar, atualizar, todos esses caras fechá-lo. Feito. Você sabe o que vai acontecer. Está atualizado. Então fizemos um modelo. Vamos enchê-lo de grandiosidade. Vejo você no próximo vídeo. 24. Como criar uma caixa de herói responsiva para nosso site no Dreameaver: Oi lá, Neste vídeo vamos começar a nossa caixa de herói responsivo que está dentro do nosso modelo. Você pode estar olhando e dizendo, “Eu só posso ver duas coisas.” Sim, só criamos duas coisas neste, mas há um pouco de estrutura subjacente que precisamos criar. Precisamos criar nossa caixa de conteúdo de herói, e vamos criar algumas classes flutuantes reutilizáveis, todos os tipos de outras maravilhas, então vamos fazer isso agora. Eu tenho meu index.html aberto, então eu vou começar a preencher minha página. Isso está conectado a um modelo, então você pode ver tudo isso está esmaecido, e eu posso trabalhar dentro desta tag principal aqui. É muito fácil, basta clicar dentro de qualquer lugar, e essa é a única caixa editável nesta página. Nós vamos estar trabalhando nesta parte aqui, então ele vai ser chamado de conteúdo de herói. Temos esta imagem de herói nos fundos. Não precisamos nos preocupar com ele. Já o fizemos no tutorial anterior. Nós só precisamos nos preocupar com as coisas aqui, e vai ser universal, então ele vai estar nesta página aqui. Ele vai atualizar as tomadas dependendo do tipo de página que é. Vamos começar colocando nossa tag de div de conteúdo de herói, e então vamos parar de colocar as imagens e o texto, então vamos começar. Com o selecionado, eu vou para Inserir, nós vamos inserir uma div, eu estou indo aninhado dentro, e eu vou deixá-lo para o momento. Vou criar um estilo CSS. Vai estar em styles.CSS. Vai ser global e o seleto vai ser uma classe. Lembre-se disso ponto final no início, e este vai ser chamado de conteúdo de herói. O que é que vai fazer, vai fazer muito. Você pode ver que é empurrado para baixo de cima e para longe da esquerda. Eu já medi-lo, então eu vou fazer uma margem no topo aqui de três pixels, e neste lado esquerdo aqui, 100 pixels. Espero que se eu bater em salvar tudo, nada acontece. Por que isso não acontece? É porque eu ainda não apliquei. Criei a classe e criei uma div, mas não as conectei. Vou fazer isso aqui. Este é realmente chamado de conteúdo de herói. Legal, então ele empurra para baixo e empurra para fora. Adorável. A próxima coisa que eu quero fazer é com meu conteúdo de herói selecionado, eu vou inserir essa imagem. Vou fazer o ninho lá dentro. Obrigado. Eu vou para meus arquivos de exercícios, imagens, e encontrar na parte inferior igual tick. Não está no lugar certo. Copie, sim, por favor. Isso vai para as imagens. Muito obrigado. Está salvo. - Legal. Agora, sempre que você colocar em uma nova imagem, certifique-se de que você colocar no texto alt. Isso vai ser algo amigável palavra-chave sem encher seu site cheio de palavras-chave, eu acho. Este vai ser freelance, e web design disponível. Ficando sem palavra-chave pensando coisas de qualquer maneira. O link, este não vai ter um link como ele não vai ir de qualquer maneira, legal. Vamos clicar fora, clique no menu de hambúrguer, e a próxima coisa que vamos colocar em algum texto. Agora você pode começar a usar este espaço reservado leva aqui, mas isso vai nos dar um pouco de drama. É melhor usar tags P em vez de ver este texto aqui não tem tag em torno dele, então você é melhor trabalhar com uma tag P. Eu clico nesta imagem, Eu vou inserir HTML, Eu vou descer aqui para encontrar P tag. Eu não vou descer lá, lá está ele, e eu vou conseguir que seja logo depois, legal. Dentro deste P tags, eu vou clicar ele vai laranja ao redor do lado de fora, e na verdade apenas indo para copiar e colar o texto a partir daqui. Legal. Este texto para baixo ele não é mais tão útil, então eu vou selecionar tudo isso e excluí-lo. Era o lugar de texto automático para aquele div original, o pouco que é preciso. Lembro-me que há um espaço que não quebra, ele é levantado, mantém a etiqueta aberta. Eu não preciso disso. Eles estão empilhando um debaixo do outro. Vamos estilizar a cor em um segundo porque é preto e eu acho que tinha que ver. Mas você pode ver por padrão que eles querem empilhar um sobre o outro, que acontece o tempo todo. Agora vamos consertar isso como fizemos aqui embaixo para o rodapé. Enquanto um pé um membro, flutuamos para a esquerda e para a direita. Agora, o que fizemos lá embaixo é que tínhamos algumas tags específicas para usar. Nós tínhamos ícones sociais em nossos direitos autorais, e nós flutuamos essas tags para a esquerda e para a direita. O problema é que temos que fazer isso de novo agora, e nós pensamos : “Não seria bom criar apenas como uma tag universal que poderíamos aplicar a esta tag P.” Porque você pode adicionar mais de uma classe. Esta imagem aqui, eu gostaria de aplicar uma classe de elevador flutuante e esta uma de flutuação direita. Vamos criar isso como uma coisa reutilizável, vez de codificar duro nessas classes, o que foi bom, mas não muito reutilizável. Vamos criar uma classe primeiro. Nós vamos para CSS designer, ter certeza de que estamos em todos os estilos CSS, ter certeza que eu sou global, selecionar isso e nós vamos chamar isso de um ponto flutuante, hífen lift, e seu trabalho vai ser elevador flutuante. Então vamos criar outro chamado float. Ele vai flutuar direito que vai ser o trabalho dele. Legal. Agora só precisamos aplicá-lo, então vamos pegar o carrapato aqui, e vamos dizer você meu amigo, onde ele está? Aquele ali, não. Você é meu amigo. Vamos clicar no “plus “, e vamos dizer “float”. Você pode ver que é apenas preguiçoso, e agora podemos reutilizar essa coisa, colocar elevador. Essa coisa se esmaga por baixo, mas está um pouco presa. Agora, se você está assistindo, você pode ser como, “Por que ele flutuaria direito?” Eu não tenho idéia. Eu não quero isso flutuando direito, eu quero aquela etiqueta universal, então eu vou deixá-la lá, mas isso é totalmente minha culpa. O que eu realmente quero é que ambos flutuem para a esquerda. O bom disso é que se eles flutuarem para a esquerda, eles vão bater ao lado do outro lado a lado. Você pode ver o que acontece é que se você flutuar ambos para a esquerda, eles sentam-se lado a lado. Se você virar um, o outro tenta entrar por baixo, e isso causa muitos problemas. Certifique-se de virar os dois para a esquerda e depois para a direita. A próxima coisa que eu quero fazer é eu quero estilizar este texto aqui. Agora eu provavelmente poderia fazer um composto selecionar e dizer P tags que estão dentro caixa herói. Mas vamos olhar para o design. Eu poderia usar tags P de novo de forma diferente, e este aqui, é onde você se depara com problemas. Você vai ficar bem e você diz, “Oh, eu não vou fazer uma nova aula com isso porque só tem uma etiqueta P aqui.” Mas mais tarde no design você pensa : “Oh, vai ser duas tags P diferentes, e precisamos de um pouco mais de especificidade. O que vamos fazer é criar uma classe, vamos clicar estilos, vamos chutar global, vamos clicar seletor, e vamos colocar em uma parada completa, e vamos colocar em disponibilidade, e vamos fazer um par de coisas. Vamos roubar a cor do ilustrador, então o texto selecionado. Poderíamos usar nossas propriedades CSS janela. Não sei se fui por aqui. É outra maneira de ver isso. Vamos clicar duas vezes na cor, copiá-la, de volta para o Dreamweaver, e eu quero que minha cor de texto para este aqui seja hash de Hicks, e que agora retorne e vamos aplicá-la. Aqui a minha etiqueta P, vai ter flutuação esquerda, mas nós também vamos ter, vamos adicionar outro frio.availability. Você pode ter mais de uma tag aplicada. A próxima coisa que eu vou fazer é brincar com as margens porque ele não está realmente sentado corretamente. O que vamos fazer é ir para este primeiro, ir para margens agora. Este aqui vai ser cerca de sete. Você vai notar que subiu. caverna sete a partir do topo, por padrão está alinhando para baixo na linha de base lá. Às vezes você brinca e diz: “Ei, sim, bater de cima faz sentido.” Mas então ele sobe como fez lá. Mas não se preocupe com isso. À esquerda deste lado, vamos fazer 15. Eu também medi estes do ilustrador. Estamos chegando lá. Salve isso. Vamos apenas visualizar e um navegador. Verifique duas vezes, está tudo funcionando, com bom aspecto. Vamos colocar este H1, que é este grande pedaço aqui. Eu só vou pegar a mensagem enquanto eu estou aqui e ele vai colocar isso dentro Na verdade, antes de continuarmos, vamos cortar este vídeo aqui porque vamos olhar para limpar o carro alegórico. Eu quero transformar isso em seu vídeo separado porque você provavelmente vai ter que voltar para ele para fazer isso mais tarde. Porque limpar o flutuador é fácil de entender, mas difícil de lembrar a sintaxe então vamos manter isso como um bom vídeo de pacote no próximo, vamos fazer isso. 25. Corrigindo problemas com tags div quando você usa float no Dreamweaver, ou seja, como limpar o float: Oi lá. Este vídeo está aqui para salvar o dia. Você tem um site onde você usou float e é aplicado a algo. Agora o objeto embaixo está tentando esgueirar-se por baixo dele e geralmente apenas se comportar mal. Vamos consertar isso usando algo chamado limpar o carro alegórico e magicamente empurrará o H1 para baixo assim. Vamos aprender a fazer isso agora no Dreamweaver. A primeira coisa é colocar [inaudível] H1. Vou clicar na minha tag p aqui. Eu realmente gosto de clicar nesses seletores de tags na parte inferior aqui, então ele agarra o início e o final. Acho que é sempre fácil quando você começa a inserir coisas usando a visualização ao vivo do design. Inserir painel, Vamos para o cabeçalho H1. Clique nele novamente, e eu quero logo depois por favor e você pode ver que este é o problema. O H1 realmente quer se esgueirar por baixo desses dois elementos que colocamos lá. A razão é porque nós flutuamos esses dois caras e a maneira que eu penso nisso é, pense em flutuar puxando-o da página em nossa direção e o H1 esgueira-se por baixo porque não está mais ciente desses caras porque eles estão sendo flutuados. Para corrigi-lo, fazemos algo chamado limpar o carro alegórico. Só significa, ei, quero que olhes para cima e que há uns tipos a flutuar por cima de ti. Eu não quero que você os ignore como você está atualmente. Ótimo exemplo, não, eu não poderia pensar em uma maneira melhor de explicar isso, mas, então, vamos adicionar uma classe a este H1 para dizer, hey, há algum flutuador acontecendo e ser normal. A primeira coisa é fazer a aula. É chamado de CSS Designer, styles.CSS, nada está funcionando. Vá para All styles.CSS GLOBAL e vamos criar um seletor. Chame o que quiser. Vamos chamá-lo de flutuador claro. Seu principal trabalho é limpar o flutuador em ambos. Agora precisamos aplicá-lo nosso H1. Vou entrar aqui, Clearfloat. Sempre que você tem flutuar logo abaixo dele, você precisa limpar o carro alegórico. Agora esta é uma etiqueta razoável. Podemos usar isto uma e outra vez. Agora, se eu colocar algo debaixo do H1, eu não preciso limpar o carro alegórico. Isto é como um “hit”. Sempre que há um flutuador claro logo abaixo dele, precisamos limpá-lo. Então não precisamos fazer isso de novo até pararmos de flertar de novo. Saberá quando precisar fazer isso porque coisas que gostaríamos que nosso H1 fizesse. Vamos entrar em alguns outros detalhes. A próxima coisa vai colocar isso leva aqui, e vamos começar, eu gosto de colocar o texto por algum motivo na visualização de código, melhor. Você também sabe que nós usamos um comercial aqui. Codificação comercial normalmente é bom. Você pode ver que ele está exibindo bem, mas alguns navegadores mais antigos, não vai ter um bom dia. Você pode ver que Dreamweaver, se eu digitar lá, está dizendo como se fosse vermelho ruim. A versão de código de [inaudível] ok, o [inaudível] é realmente e amp, então AMP e, em seguida, um ponto-e-vírgula. Eu sei que é estranho. Mas na vida você ainda tem o seu [inaudível] Mas isso não vai quebrar o navegador de ninguém. Mas se você tem um site e você está colocando em muitos e muitos de texto. Já fiz isso antes e nunca tive problemas. É por isso que foi escrito de qualquer maneira. Uma das coisas que eu quero fazer no entanto, é atingido no Illustrator. Eu dividi-o em três linhas. Agora eu tenho duas maneiras de fazer isso. Um bom caminho no mau caminho. A má maneira é que se eu for para o que eu quebraria quebrou cruz Kiwi. Se eu for para a interface do usuário, clique duas vezes e eu vou pressionar “Return”, a diferença e outro é baseado em designer. Vou colocar um retorno e aqui, escreva o código. Isso funciona. Mas você pode ver aqui meu código, eu realmente tenho agora três H1. Isso não é um bom plano. Por quê? Porque agora eu vou ter que ir e instalar estes antigos separadamente. Não foi um grande negócio, mas também quando se trata de motores de busca, ele vê, então digamos que o motor de busca do Google vem até mim e diz, “Ei, há um título chamado Eu sou um Kiwi”. Ele diz UI e UX design up. Eles os vêem como blocos separados, então é bom e fácil de colocar em vez de devoluções, eu vou desfazer todos juntos. Volte para aqui. Logo na frente da interface do usuário, vou manter pressionada a tecla “Shift” no meu teclado e pressionar o botão return no meu teclado de teclas. O que você vai ver é que eu vou fazê-lo lá, e então eu vou clicar aqui em baixo e você vai ver você obter esses personagens brilhantes. Eu mostro-lhes por um par de razões, é que você vai copiar e colar coisas de pedaços e você seria como “O que diabos é um BI?” É como se você é um designer gráfico, é um turno para dez, ok, ou um suave para dez, ou eles chamam de todo tipo de coisas diferentes. Na web land, é um trimestre de BI ou break. Só significa que ainda está vermelho como um H1 completo apenas com algumas quebras de linha lá dentro. A próxima coisa que eu vou fazer é eu quero estilizar este HI aqui eu vou ir para Styles global select, e eu estou indo apenas para digitar H1. Lembre-se de tags pré-existentes que não escrevemos como o H1 e a tag de imagem, será que o BI, não tem paradas completas na frente deles quando você pedir estilizá-los. H1, eu gostaria de fazer algumas coisas. Provavelmente o mais fácil vai ser a cor vai ser branco. Acho que é branco. O que eu também gostaria de fazer é atualizar a fonte. Agora, na verdade vamos fazer o tamanho primeiro, porque esse é um bom, fácil. Então vamos olhar para alguns dos problemas quando se trata de pensar que é cerca de 80. Continua colocando em dois dígitos. Qual é o tamanho certo? Quero usar esta fonte aqui, e é algo chamado Playfair. Eu vou usar isso. Agora, eu posso passar, e nós tínhamos feito isso mais cedo no curso lembre-se. Fomos para digitar, e fomos para a família de fontes, e fomos gerenciar fontes, e fizemos isso. Agora, isso não vai funcionar neste caso porque tem que lidar com muito da etiqueta principal. Lembre-se aqui em cima, ele precisa adicionar todas essas coisas aqui onde diz, aqui estão as fontes era web, então ele precisa ser capaz de editar essas coisas. Vamos fechar nenhuma página de índice e abrir o modelo. Salvar, sim. Vou abrir o meu modelo. É isso, e faça-o aqui. Há apenas algumas coisas que vão acontecer em toda a sua compilação web, agora que você tem um modelo, você vai ter que voltar para a pasta de modelos. Faça isso e se você tiver problemas e você gostar, “Talvez se eu fizer isso no modelo”, volte para o modelo tentado no ar, você pode achar que ele corrige o problema que você tem. Modelo, eu estou indo para inserir realmente bibliotecas CC. Note que vamos acertar um piano e eu tenho um H1? Eu ainda não, então eu estou indo eu tenho um H1, H3 está lá, eu minto. Tipo. Acabamos de torná-los família de fontes e ele vai gerenciar fontes. Esse é um aqui chamado Playfair display. Vou marcá-los, clique em “Concluído”. Nada realmente acontece. Então eu vou sair e clicar no “Playfair”. Incrível. Ele adiciona algumas propriedades para você fazê-lo funcionar. Está dizendo aqui que adicionou aqueles indo e eu apertei “Salve tudo”. Vai atualizar a atualização do índice, por favor. Sim, por favor. Você pode alterar o código simulado como não integral. Você diz que sim. Clique em “Fechar”, fechar no modelo, e espero que agora quando abrirmos nosso índice. É a nossa feira de diversões. Lembre-se, se algo não estiver funcionando, talvez seja necessário fazê-lo no modelo. A razão pela qual eu conheço esse problema em particular é porque quando eu estava projetando este curso, eu tentei fazê-lo aqui, minha página de índice, e ele não funcionou. Eu saltar de volta para o modelo e ele fez. A última coisa que vou fazer antes de irmos é e ele vai brincar como espaçamento de linha. Não devia preocupar-me, mas há uma grande lacuna entre estes. Lembre-se mais cedo nós colocamos e se eu clicar aqui, nós colocamos ele personagens brilhantes. O espaçamento entre linhas vai funcionar neste caso, se houvesse H1 separados, eu tenho que usar a margem entre esses H1s. Nós usamos a coisa atual agora porque eu quero eu acho, fazer você usar isso porque à medida que você melhorar, isso vai se tornar mais e mais útil do Dreamweaver é que eu tenho o selecionado aqui e se eu clicar em “Atual” aqui em baixo, ele reduz para os computados, que significa que tudo o que está afetando o que você tem selecionado está disponível para reduzir os quadrats menos depois de um tempo você acaba com um 3D. Eu tenho sites e, em seguida, basta selecionar como lista é juntado enorme. A corrente torna-se super útil. Nós gostamos realmente clique sobre isso e ele apenas lhe dá o material que está se aplicando a ele. No meu caso Clearfix está aplicando, mas não é o que eu quero. H1 está aplicando, Awesome. O que eu quero fazer é começar a digitar, e eu quero brincar com a altura da linha. Vou usar pixels, zero pixels. Eu ia clicar em “Segure” e arrastar. É uma das outras coisas legais que o Dreamweaver é que, em vez de ter que digitar todas as vezes, você pode clicar e arrastar coisas para ser um pouco mais de um designer aqui. Sim, talvez com isso. Salve tudo. Isso é tudo para este vídeo. É muito longa e epicamente, e vamos começar a construir o resto desta página. Vejo você no próximo vídeo. 26. Como adicionar e alterar o estilo de uma regra horizontal (HR) no Dreamweaver: Oi, aí. Neste tutorial, vamos fazer esta linha branca. Chama-se estradas horizontais. Não é difícil, mas há algum estilo padrão que queremos mudar depois. Vamos fazer isso agora no Dreamweaver. Primeiro de tudo, vamos colocar na regra horizontal, então é chamado de tag hr. É assim que lhe chamam. Vou enfiar o meu H1, que é o meu acerto, porque quero parar com isto. Eu estou indo para ir para “Inserir um HTML” e todo o caminho para baixo, direita para baixo é chamado linha horizontal. Vamos clicar nisso, deslize lá embaixo. Na verdade, o meu acabou bem no meio da minha mensagem, eu vou desfazer. Isso acontece com você. Clique no botão “H_1". Certifique-se de que ele está selecionado aqui no seletor de tags e, em seguida, clique em linha horizontal. Eu quero ir embora para agradar, e depois há lá, é a minha regra horizontal. Agora eu vou pré-visualizar isso em um navegador, porque por padrão a linha horizontal vem com alguma feiúra, então vamos verificar em um navegador. Agora, é um pouco difícil de ver, mas na verdade é o que é chamado de Inset ou Bivalent Emboss para as pessoas do Photoshop. Se eu aumentar o zoom em cargas, você vai começar a ver o estilo nele. Então, aqui em baixo, ali está ele. Você pode ver que é metade branca, metade cinza, e tem isso como um pequeno cinzel aqui. Eu não gosto disso. Você pode ver isso. Você pode economizar tempo e passar para o próximo tutorial. Eu não gosto disso e eu quero estilizá-lo. Vamos começar este RH. Isso é o que é considerado uma regra horizontal. Uma das poucas tags que não tem um começo e um final como um h1 tem um aberto e um close e HR não gosta desta tag br como alguns que não gostam. Vamos em frente e estilizá-lo sob CSS Designer: estilos, seleção global é, ele vai ser chamado de HR. Porque é um daqueles pré-existentes onde não escrevemos como o h1, algo já preexistente em HTML. Não temos que colocar o período na frente. Tem tudo a ver com fronteira. Com borda, vamos dizer estilo por padrão, é inserida. Vamos dizer isso, por favor, pinte. Acho que é como um esbranquiçado. Por padrão eu vou torná-lo branco e, em seguida, eu vou salvar tudo bonito no meu navegador e ver o que eu gosto aqui. É fino o suficiente? Você pode brincar com largura aqui. Eu coloquei para 1.2, jogo com os pixels. Estou feliz com o jeito que está. É assim que se cria uma linha. É um longo tutorial para apenas uma linha, mas queremos que seja uma linha bonita. Então vamos para o próximo tutorial. 27. Como criar um botão no Adobe Dreamweaver CC: Oi lá. Neste tutorial, vamos fazer este botão vermelho. Nós vamos fazer coisas legais onde nós emprestamos CSS existente de outras classes e nós reutilizamos algumas classes, não nos ofendemos. Vamos fazer isso agora. Então, a primeira coisa é colocar um botão. Agora, eu queria estar logo após essa regra horizontal, então clique nisso. Não há botão de inserção. Então é apenas um hiperlink que nós estilizamos com algum preenchimento e algumas cores de fundo que se parecem com um botão. O botão é esse cara aqui. Então é muito parecido com este aqui em cima que usamos para o nosso nav. Então nós vamos realmente pedir emprestado, CSS a partir disso para economizar algum tempo. Então, nossa regra horizontal selecionada aqui na minha visualização ao vivo e eu vou ter Inserir, Hyperlink, ele vai dizer depois, e então eu vou chamar essa de Vamos Conversar. Legal, ligando. Lembre-se que ainda não temos o nome para a página, então eu vou apenas usar hash, target Eu quero que ele seja auto, então nós deixamos em branco, qual self é o padrão e o título, isso é bom para os motores de busca. Então, ele vê este botão e “Vamos falar” não é particularmente útil para saber o que está acontecendo, então nós damos mais informações a ele. Garantimos que seja amigável a palavra-chave. Então este vai ser Daniel Walter Scott, porque eu vou ser o designer UX UI que eu estou tentando classificar para no Google, entre em contato conosco. Por que está em maiúsculas? Porque deixei as tampas fechadas, provavelmente deveria ser o caso do título, mas estou bem com isso. Ninguém vê isso em segundo plano sobre os motores de busca. Então agora nós estamos indo para ir e estilo e a coisa legal sobre isso é que nós, se você se lembra, fizemos uma aula chamada botão vermelho e botão verde. Então temos que reutilizar isso. Então eu chegar a [inaudível] tag. Aqui é onde começamos a reutilizar as coisas, e isso é bom quando você chega a esse ponto do site onde, tipo, muito do trabalho duro é feito, você começa a reutilizar as coisas em vez de sempre tentar criar novas classes. Então agora temos que ir ponto e este, lembre-se que chamamos btn no início para torná-lo mais fácil de encontrar, ler botão. Legal. Então ele tem um fundo vermelho. Agora aquele botão vermelho não veio junto com todo o estofamento. Fizemos isso separadamente, se você se lembra. Então eu vou roubar o CSS deste botão. Agora, não podemos fazer isso aqui na página de índice porque é parte do modelo e ele simplesmente não permite. Se eu clicar nele, você obtém um CSS projetar um painel. Deixe-me desligar tudo isso. Então, sim, bom para nós e simplesmente não funciona. Então nós temos que ir abrir esse modelo e, em seguida, aqui, eu vou mudar para atual. Lembre-se Current me permite clicar em algo e ele realmente me dá as classes que podem ser aplicadas e acontece a ser este top um. Eu sei porque se eu clicar em Mostrar conjunto, ele vai me mostrar as coisas que são aplicadas a essa classe particular e não tudo e sim, você pode ver o preenchimento e a cor do texto e remover o sublinhado. Então isso é tudo o que precisamos. Então, há uma característica legal. Podemos clicar com o botão direito e dizer copiar todos os estilos. Havia uma opção aqui, também este é apenas os estilos de texto que acabamos de permitir dependendo do que você quer, mas eu quero todos os estilos. Legal. Obrigado modelo. Agora vou aplicá-lo a isso. Agora eu poderia entrar aqui e criar outra classe, e estilizá-la com isso. Vou ser um pouco mais engenhoso e usar um seletor composto. Então o que eu vou dizer é que se há um botão vermelho dentro desta caixa peluda então aplique este texto. Então talvez vá de Current para All. Há estilos, global, faça um seletor. Ele pegou pedaços dele. Então, o que eu quero? Você vai notar que não colocou na etiqueta “A”. Então vamos colocá-lo no botão vermelho e conteúdo heróico, mas não na tag a. Vamos verificar um trabalho. Às vezes fazem, às vezes não. Então, com ele selecionado, vou clicar com o botão direito do mouse e dizer estilos de colar, uma mágica. Então está funcionando. Então agora é hora de colocar um pouco de espaço entre esta regra horizontal porque ela está ao lado dela. Então eu gostaria que você fosse para o botão de pausa agora, aperte pausa e eu quero que você pense em como você faz isso. Você pode ir e tentar. Isso é o que eu faço e ver se você pode dar uma chance. Você pode desfazer se não funcionar. Aperte desfazer, e você pode assistir o resto deste vídeo. Mas venha aqui onde quer que esteja, pause o botão e pense. Vá agora. Você não está pausando nenhum. O que eu faria, na verdade há algumas coisas que você poderia fazer. Poderíamos fazer essa aula aqui, e era uma margem no topo, ou poderíamos usar essa regra horizontal aqui. Eu vou fazer a regra horizontal principalmente porque eu estou olhando para um movimento, na verdade eu quero fazer o espaço entre lá e por baixo. Então, em vez de tentar fazê-los separadamente, eu também estou apenas através da linha horizontal aqui. Ir para atual, há o meu hr e eu desligo show set então eu vejo todos eles e eu vou para o layout e eu quero talvez menos uma margem do topo, apenas clicando, segurando e arrastando e colocando uma carga na parte inferior lá. De qualquer forma teria funcionado, aquela classe composta que usamos, você poderia ter criado uma nova classe que fizesse espaçamento, tão estranho, mas funcionaria. Mas o que eu fiz foi, eu fiz uma regra horizontal para jogar com os dois lados. Entra e vamos salvar tudo. 28. Alterar o espaçamento de fonte de um site para dispositivos móveis usando o Dreamweaver: Ok, neste vídeo, queremos ver nossa visão de desktop, que temos aqui. Mas quando chegar ao tablet, vamos ajustar este conteúdo de herói aqui. Então vamos brincar com o preenchimento, mudar o tamanho da fonte para baixo móvel ainda mais. Ok, vamos mudar o tamanho da fonte ainda menor. Ajuste a altura da linha e vamos tornar tudo centrado fresco, tão centrado não centrado no texto grande. Agora queremos ir e fazer algumas atualizações para o nosso design responsivo e nós projetamos este tipo de caixa de herói para desktop. Quando chega ao tablet, há algumas mudanças, uma delas está acariciando do lado aqui muda, torna-se meio plana e o tamanho da fonte fica menor. tamanho da fonte fica ainda menor do que um celular e se torna centralizado e eu desativei esta linha aqui no celular. Só não gostei da aparência dele quando fui para o celular porque tudo isso estava centrado. Vamos fazer isso agora no Dreamweaver. Tudo bem, primeiro passo vamos enfrentar o estofamento. Temos o conteúdo de herói único que encerra, bem meu conteúdo de herói e então vamos adicionar o preenchimento a isso. Desktop, está tudo bem. Agora vamos para o tablet. Nós vamos clicar na pequena linha colorida que precisamos saltar ou você pode apenas arrastar isso, lembre-se. Estamos em tablets e eu quero levar isso para a borda agora no meu design e ilustrar adiante um pouco de flush contra esta caixa preta, mas quando eu estou aqui no Dreamweaver e eu estava praticando isso para vocês. Eu quero meio que ter fora cerca de 25 pixels que tipo de linhas com o logotipo dele toupeira. Essa é uma das liberdades criativas de ser o designer e, o desenvolvedor. Ok? Se eu estava projetando isso para outra pessoa e eles me deram um Photoshop ou ilustrar uma maquete. Faço exatamente como eles gostaram. O que vamos fazer é estilos CSS vai fazê-lo para tablet e vamos criar não há nenhum seleto no momento para aqui são conteúdo. Vamos dizer conteúdo de herói ponto. Sim, por favor. Gostaria que tivesse uma margem de 25 pixels. Mas para obter esse lado, e novamente nos outros lados, 25 pixels bom. Vamos fazer o espaçamento, para o celular também. Aqui em baixo, está de volta a 100 pixels, que era a minha área de trabalho. Vou dizer Styles, Setor Móvel. Aqui conteúdo e vamos dizer que você meu amigo, mesmo que este é zero aqui. Mas talvez você tenha um tipo de como digitá-lo novamente porque zero apenas significa realmente que temos levantado no padrão eo padrão é sob pixels como para as áreas de trabalho. Zero esse lado, zero aquele lado. Bom, incrível como a fonte, obviamente, é que grande problema próximo, especialmente se ele é top. Vamos fazer o tablet primeiro, e o que vamos fazer é em uma visualização de tablet, vamos começar o H1. Ok, então o H1 quando estiver no tableview, eu gostaria que você fosse um tamanho de fonte ou tamanho de fonte e agora eu deveria ir e verificar no Illustrator. Acho que sim. Isso parece bem, talvez um pouco pequeno. A outra coisa que eu preciso fazer é jogar com meu espaçamento de linha, ok, bem, minha altura de linha e pixels zero, e eu vou fazer isso ser algo. Tudo bem, vamos fazer isso pelo celular. Há algumas coisas que precisamos fazer uma é torná-la muito menor. Estilos móvel, intervalo seletor um e vamos fazer algumas coisas que vamos fazer, primeiro lugar, tamanho do telefone ok. Na verdade, vou ver o que tem aqui. Eu deveria checar isso. Você está em 46. Tamanho da fonte, pixels 446. Lembre-se que é o meu teclado por alguma razão, digita dois dígitos lá dentro. Tudo bem, então esse é o tamanho e eu vou substituí-lo assim que eu fizer isso, eu ouço isso também. Vamos fazer sentado no centro. Certo, agora está alinhando todo o texto ao centro. Ok, você pode ver aqui, mas você pode ver aqui em baixo que não está feito esses outros atributos. O que vamos fazer é em vez de iniciar o H1 para centrado e temos uma curva que e porque ele não fez esse texto, tudo era texto e eles estavam centrados, mas eu realmente quero que outras partes precisam ser selecionadas também porque Isso foi apenas o H1. O que vamos dizer é de volta ao conteúdo do herói e dizer que eu quero que tudo de lado U seja centrado. Ok, agora a linha, esta imagem aqui, este cara aqui não sou eu tipo, “Ei, você acabou de dizer isso.” É porque este está flutuado. O que vamos fazer neste caso, vamos criar uma classe especial só para empurrá-lo um pouco mais. Nós vamos fazer o quanto nós odiamos eles presos lá, eu posso esconder os itens, nós vamos fazer isso em seguida é ir instalá-lo fora. Mas antes de fazer isso, vamos salvar tudo e visualizar o navegador. Ok, então tablets desktop menores e o preenchimento é diferente, que é incrível um celular recuado fica menor e nós temos que fazer o espaçamento entre linhas, que nós não fizemos, foi o H1. Espaçamento de linha H1 móvel, textos, altura da linha, pixels maiores. Isso é sobre bom, salvar tudo apenas no navegador, melhor. Talvez eu precisasse ser um pouco mais alto. Se você não tem nenhuma coisa canelada como nós fizemos aqui, isso vai ser tudo que você precisa fazer. A próxima parte, vamos guardá-lo para o próximo vídeo, e vamos desativar esta linha aqui e vamos ter algumas aulas especiais para empurrá-lo para fora e não é nada extravagante que você está indo apenas para aplicar classe a ele e dizer ter pendente no celular, que meio que fica centrado. Pode ser muito difícil ver corretamente as coisas quando flutuou. Só vamos trapacear. Tudo bem, para o próximo vídeo. 29. Como desativar partes de um site em diferentes exibições, como dispositivo móvel ou desktop: Neste vídeo, vamos desativar esta régua aqui quando chegar ao celular, porque foi isso que eu fiz no meu design. Vamos fazer isso. O que vamos fazer é fazer um seletor composto, mas vamos fazê-lo dentro do Mobile porque esta é a única vez que quero que esta coisa ative. Em styles.css quando estou no celular, não tenho nada que controle a régua ainda. Eu poderia apenas ter HR e transformá-lo para desativar e se eu usar uma régua em qualquer outro lugar, ele vai desligar bem, então eu vou ser um pouco mais específico. Eu vou dizer conteúdo de herói. Sim, se há uma regra horizontal dentro de um conteúdo, então eu quero desativá-lo. Às vezes eu provavelmente me safo com apenas HR. Eu vou usar outra regra horizontal em sua casa no site? Eu acho que eu sei. Sim, eu não quero desligar. Esta régua específica que está dentro desta caixa de conteúdo aqui vai ser desativada quando, certifique-se show set está desativado para que você possa ver tudo. Eu quero ir para exibição e ir para nenhum, legal. Salve tudo, verificando o navegador. Você pode ver aqui tablet ainda lá, mas no celular ido, fácil. Algumas coisas que eu quero arrumar é que talvez haja algum enchimento aqui embaixo. No tutorial anterior eu era muito inteligente e eu disse vamos usar a regra horizontal para o preenchimento. Usamos esse estilo para dar essa lacuna entre isso e o botão, mas porque entre essa régua desligada, desta vez desaparece. Eu quero adicionar um pouco mais a ele, além disso eu quero empurrar isso fora de lado. Vamos fazer isso agora no Dreamweaver, vamos até essa exibição para que eu possa vê-la, tão móvel e ela está lá e ele fica desativado. Agora, ele foi incapacitado? Por alguma razão ele não está desativando aqui na visualização ao vivo e é por isso que eu prefiro testar no navegador. Há apenas algumas coisinhas peculiares que não acontecem na visualização ao vivo. É útil para selecionar coisas, mas não usá-lo como sua visão de trabalho de conclusão absoluta de 100%. Use o navegador para isso. O que vou fazer é fazer um seletor composto. Quando há um h1 e ele está para baixo no celular, eu gostaria de adicionar um pouco de preenchimento para a parte inferior. Eu tenho um h1, que já está no celular. Eu posso usar sorrateiramente este seletor já porque eu estou em styles.css, eu estou em meus estilos móveis e já há um h1, eu posso dizer, hey, você quer entrar em h1 você pode um pouco de margem para baixo? Lá vai ele, desapareceu. Pode ser só o meu programa. Eu acabo tendo realmente testando versões do Dreamweaver, como corrigir bugs e fazer vídeos para a Adobe, mas às vezes o meu vai um pouco estrondo. Vamos ficar no navegador, sim, parece bom. O que eu estou esperando é que com pequenas coisas como essa, eu amo aquelas dessas pequenas guloseimas que você tem e você gosta, “Eu gostaria de poder, já tem uma etiqueta, e eu posso apenas ajustar essa.” Você parar de criar classes para fazer tudo, você começa a reutilizar classes. Outra coisa que eu quero fazer é esse cara no topo aqui, eu preciso empurrar um pouco de estofamento para a esquerda para falso centro porque ele é um flutuado para a esquerda, é realmente difícil como naturalmente levá-los para centro como fizemos com este texto em um botão. Na verdade, vamos dizer essa coisa aqui chamada elevação flutuante de imagem, que está dentro do conteúdo do herói. Vamos escolher sobre ele. Vamos criar estilos CSS do painel de designer, styles.css. Vamos fazer isso globalmente, em seguida, você sabe que estamos fazendo celular e vamos apenas verificar se não temos nada. Temos alguma coisa que diga, encabeçar uma imagem? Não, não há nada aqui. Vamos criar um. É assim. Isso não é bom o suficiente. Tudo o que tem float deixado aplicado a ele dentro de nosso conteúdo de herói vai adicionar este preenchimento e no momento em que é apenas esta imagem, na verdade ambas as imagens, não vai funcionar porque ambos vão ter algum preenchimento no lado esquerdo. Teremos que ser um pouco mais específicos. Agora bem-vindo à esquisita manejar a teia é que se eu disser img aqui, isso não vai funcionar. Não é a forma como isto é construído. Vamos editar, vamos até aqui e alguma margem, apenas adivinhe uma margem para o momento, mas obviamente nada está mudando. Que tem flutuador que está dentro da nossa caixa de conteúdo. Talvez seja o contrário, talvez seja a imagem img que tem um flutuador claro aplicado a ele e ainda não funciona. É por causa dessas coisas estarem presas juntas. Este flutuador do penhasco está ligado a esta imagem, por isso não pode haver espaço entre aqui. Isto vai apanhar-te, apanha-me. É uma daquelas coisas divertidas onde a imagem e, em seguida, um ponto, isso significa que aqueles dois eu realmente me juntei e conectei um ao outro agora ele vai se aplicar. Com isso, vou arrastá-los um pouco mais. Sim, nós aprendemos algumas coisas e eu tenho uma tendência quando eu estou fazendo os cursos apenas para mantê-lo agradável e simples e ter certeza de que não há nada muito difícil como essas coisas estranhas onde há um exemplo em que nós juntar esses dois e não temos sido capazes de centralizar porque o flutuou, mas eu estou deixando este em particular porque é tempos com coisas que significam trabalhar não funcionam e você acha que soluções alternativas para fazê-los ir acontece a cada web designer. O que eu deveria fazer é potencialmente voltar ao início e reestruturar a forma como eu faço este lado para que eu não tenha particularmente este problema, mas ninguém faz isso. Você chega a um ponto, você é como se eu voltasse só para consertar uma coisa ou eu faço uma coisa pequena hacky para consertar isso? Isso não é particularmente hacky, mas só para que você saiba que há momentos em que gostamos, na verdade eu vou apenas adicionar uma classe para fudge, porque muitas vezes não há repercussões. Parece bom para o usuário. A experiência do usuário é ótima, a interface do usuário parece boa, todo mundo está feliz, mas se alguém olhar para o seu código, eles podem olhar para ele novamente e dizer, “Droga, isso é uma maneira feia de fazer isso”, e eu definitivamente dizer que se você é um desenvolvedor e você está olhando para o meu código, você ficaria horrorizado ao ver a palavra conteúdo herói tudo escrito com hífens. Eles provavelmente apenas colocar hc, mantê-lo agradável e simples. Mantenha o código muito leve. Eu gosto de escrever pequenas notas para mim mesmo com minhas aulas como imagem herói e visão móvel. Mas esse é o meu estilo e eu acho que vindo de um fundo mais visual, eu preciso ver essas coisas no código para me ajudar. É isso para este vídeo, vamos para o próximo em que começamos a olhar para colunas de imagem. Incrível. 30. Como criar um diagrama de imagens responsivo no Dreamweaver: Oi lá. Neste tutorial, vamos tomar o nosso design ilustrado aqui onde temos três colunas de seis imagens e este só tem duas colunas. Quando chega ao tablet e depois ao celular, que tem uma coluna e desligamos algumas imagens, então seis para apenas quatro delas. Vou acabar parecendo algo assim. Aqui está a minha vista de área de trabalho, até tablets e, em seguida, até a minha parede com o seu apenas quatro mais ele vai fazer isso porque coisa elástica onde eles tomam mais uso do espaço. Vamos aprender a fazer isso agora no Dreamweaver. Na verdade, estamos de volta aqui no ilustrador porque eu quero explicar como a estrutura funciona. O que vamos fazer é criar essas colunas aqui e nosso design as faz mudar. Você pode ver que ele tem três colunas, eles baixam para duas, e depois para baixo para uma. O que eu preciso fazer ou eu preciso explicar para vocês é que vamos criar uma caixa, então uma coluna aqui, e nós vamos fazer com que 33 por cento da largura. Isso vai ficar atrás um do outro e porque nós salvamos nova imagem, ou coluna de parede ser 33 por cento, a próxima imagem vai caber, a próxima imagem vai caber, mas a próxima é apenas quadro, é apenas 100 por cento para escolher, então ele vai empurrar para baixo para a próxima linha. A razão pela qual isso é útil é que quando você está no tablet, é que você pode dizer exatamente a mesma imagem, mas agora você ocupa 50% do espaço, então 30 por cento e, em seguida, tenta caber no próximo, mas não é tão firme, então Ele quebra. mesmo quando chegamos ao celular, mesma imagem, mas vamos dizer que quando você está imóvel, você é um amigo 100%, então os outros 100 por cento não cabem, então se estiver embaixo e eles continuam empilhando. Essencialmente estes vai uma pilha um em cima do outro, mas nós apenas dar-lhe percentagens diferentes. É assim que funciona um ladrilhos responsivos como este. Vamos fazer isso agora no Dreamweaver, prometo, desta vez é o Dreamweaver. Antes de colocarmos essas colunas, precisávamos de um recipiente para colocar ao redor. No topo aqui temos um recipiente chamado conteúdo herói e lembre-se que são as pilhas no topo que ele vai levar cada um nós temos mantido em uma pequena caixa agradável. Entramos o mesmo para as nossas imagens de modo que principalmente para que possamos colocar algum preenchimento entre este e o conteúdo de herói porque cinco conteúdo de herói selecionado, então clique aqui em algum lugar, clique no conteúdo de herói, e depois indo para inserir HTML Div e eu vou colocá-lo depois, por favor, você vai ver que no fundo aqui, ele está realmente bateu-se bem abaixo do botão superior da lista, não esta imagem no fundo, principalmente porque esta é uma imagem de fundo e nós dissemos você está em segundo plano e ninguém pode realmente afetá-lo. É por isso que podemos colocar nossas varas no topo. Precisamos adicionar alguma ferramenta de preenchimento, então vamos criar uma classe para fazer isso. CSS Designer, vamos fazer isso globalmente e vamos dizer que vamos fazer uma grade de imagens de citação, qualquer coisa que você gosta, e vamos adicionar alguma margem ao topo. Nada se aplicando assim por aqui, vamos aplicar uma primeira imagem de classe. Há um pouco de estofamento homem e disse um pouco mais até que eu estou grosseiramente feliz com ele. Agora vamos colocar em nossas colunas, então com nossa imagem Div bem selecionada, vamos inserir, vamos inserir outra divisão do espaço. Eu vou dizer dentro daqui, por favor eu gostaria de coluna, eu vou colá-lo, é um pouco difícil quando você começa a ter isso agora, há dois, eu vou colocar em um Div e então o Div dentro dele e você é como, Com qual eu estou perdendo? Vamos rapidamente adicionar uma classe a ela, então o que vamos fazer é CSS Designer, e vamos fazer uma classe. Vamos chamar este coronel como coluna deles. Isso é apenas um padrão da indústria que você chama coluna e muitas vezes eu faço porque é fácil para mim entender, mas eu quero me acostumar com algumas dessas sintaxe ou nomes comumente usados para que quando você começar a trabalhar no projeto de outra pessoa ou outro site, você pode reconhecê-los. Esta coluna aqui, vamos primeiro dar-lhes uma cor de fundo, nós realmente não precisamos da cor de fundo, eu só queria aqui para que eu possa descrever o que estou fazendo. Vou aplicá-lo aqui para dizer ponto col. Às vezes é fácil olhar para baixo na visualização de código, você pode ver que eu tenho uma Div chamada grade de imagem, e dentro de lá você pode ver que há o início e há a abertura, dentro disso é a minha cor, e há também este texto aleatório, que eu vou excluir da visão colateral. Você não precisa mais, um pouco mais útil. Poderíamos agora entrar e clicar neste, pode estar com o botão direito do mouse ainda, e ir para duplicar, e ter seis deles, Comando D em um Mac é o atalho, vamos controlar D o em um PC, então temos seis deles Agora. Mas antes de fazermos isso, e você pode ver que são empilhados um após o outro, eu vou desfazer, que é Command Z controles automáticos em um PC. O que eu quero fazer é adicionar uma classe específica para desktop, porque se olharmos para o ilustrador, você pode ver desktop é 33%, isso é 50%, e isso é 100%, então vamos criar três classes e apenas acioná-los em diferentes consultas de mídia. Vamos dizer quando seu desktop for 33%, 40%, 100%, então crie o festival de versão para desktop. Primeiro que vamos criar um seletor, vamos colá-lo, colocar em estilos globais, e vamos chamar este ume.col e vou usar lg. Agora, lg não é apenas uma outra maneira comum de resfriamento vista de desktop, você poderia colcolumn-desktop para torná-lo mais fácil para si mesmo, mas você verá em outros sites as pessoas usando col-lg em vez disso. Nós vamos colá-lo assim, nós vamos dizer que eu gostaria que você fosse uma largura de porcentagem, ter certeza que é porcentagem e 33%. Muitas vezes ele vai mudar de volta para pixels, então se você está tendo problemas você, como o meu não está funcionando, provavelmente por padrão, ele realmente quer ser pixel para que você vá para forçar porcentagens lá dentro. Isso está funcionando, precisamos aplicá-lo agora, então você col, grande, como eu faço 33 por cento enquanto de alguma forma. Agora vamos criar listas duplicadas, então vamos duplicar e eles podem empilhar um sobre o outro. Eles não estão grudando um ao lado do outro como precisamos ainda, mas isso vai ser o básico. Nós vamos ter subsídios e total, mas vamos voltar e consertar o primeiro, eu vou desfazer algumas vezes, lá está. O que eu quero fazer é colocá-los em float esquerda, então o que eu vou fazer é minha pequena classe flutuante reutilizável esquerda. Agora vou duplicá-los, então o Comando D, sem sinal, e eu tenho seis. Se você precisar de outra linha, basta dizer Command D em um Mac ou Control D em um PC, e ele continua duplicando. Vamos dar uma olhada no navegador, então salve tudo, pule no navegador. Você pode ver aqui, agradável e responsivo, bem como, porque é 33 por cento, talvez eles não obter maior do que a nossa largura máxima que nós economizamos para o nosso desktop, mas eles ficam agradáveis e lulas você aqui em baixo. Uma das coisas que eu quero do meu design é um pouco de espaço no meio, então nós vamos entrar no Dreamweaver e o que nós vamos fazer é, para a coluna grande, ou eu quero fazê-lo para um col, eu vou fazê-lo para a coluna, então cada coluna em cada visão única não apenas um grande, apenas vai ter um pouco de preenchimento, que é verdade para o meu design. O que eu vou fazer é col, eu vou dizer que eu gostaria um pouco, nós podemos usar porcentagens, então eu quero colocar 1 por cento deste lado, 1 por cento deste lado, e 1 por cento deste lado. Você vai notar que meu design lá foi e quebrou, é porque isso acrescenta aos meus 33,3 por cento que eu adicionei à minha caixa, então 33,3 por cento vezes três mais o pendente no lado destrói tudo. O que nós vamos ter que fazer é saltar para o meu LG, col meu lg, e nossos 33 por cento vai ser como 31,3 por cento. Não é isso que está pulando para pixels. Lembre-se que eu disse que ele tenta fazê-lo, faz isso comigo também, então agora todos eles se encaixam, então o que você tem que adicionar em termos de preenchimento você vai ter menos fora da largura que você está usando, e a última coisa é que eu realmente quer estofamento na parte inferior também. Imagine que vamos fazê-lo de volta à nossa coluna, coluna lg, e 1 por cento também. Você pode ver o meu, o espaçamento real é um pouco diferente porque este é 1%, mas é de ambos os lados. Eu tenho 1 por cento mais 1 por cento, na verdade há 2 por cento aqui, então no fundo aqui eu vou adicionar 2 por cento. Agora está empatado, vou deixar esse tutorial aqui, e no próximo vamos adicionar imagens a eles. Há algumas coisinhas que precisamos fazer para torná-los responsivos, mas a coragem está aqui. Vamos para o próximo tutorial. 31. Como tornar suas imagens responsivas no Dreamweaver para combinar com o tamanho da página: Olá, neste tutorial vamos tirar tags div vazias e preenchê-los com respostas de imagens. Ei, presto, assim. A coisa legal sobre eles é que eles são redimensionados bem, capacidade de resposta. Vamos fazer isso agora no Dreamweaver. Primeiro passo, eu quero adicionar uma imagem a esta primeira tag div aqui. Vou para Inserir, HTML, imagem. Eu quero [inaudível] dentro da tag div. Eu vou para meus arquivos de exercícios, imagens. Se você não tem os arquivos de exercícios, haverá um link na página em algum lugar, se não, mensagem para mim e eu vou te ligar com eles. Vamos verificá-lo em um navegador, você vai notar que ele está lá, mas não é responsivo. Você pode ver que está sendo ele mesmo. A outra coisa a notar é que é um pouco maior do que eu preciso. Por quê? Porque, na verdade, nesta vista de cima, vamos ver o meu exemplo aqui. Na verdade, é o tamanho, mas quando ele sai para o tamanho móvel, é um pouco maior, então eu meio que permitiu que o tamanho maior fosse exportado para fora daqui para o Illustrator. Não o torne muito grande, porque as velocidades de carregamento da página são realmente importantes para o Google em suas classificações. Apenas algo um pouco maior do que você precisa está bom, então para torná-lo responsivo, vamos criar uma classe. Vamos criar no CSS Designer, styles.css global. Vamos criar um seletor. Este vai ser chamado de imagem responsiva. Você pode chamá-lo de algo um pouco menor e menos descritivo. Mas há três coisas que você precisa fazer. Precisamos dizer que a largura é uma porcentagem, ok? Tem que ser 100 por cento Apenas certifique-se se você está tendo problemas, é um 100 por cento e não pixels. Como este painel designer usa pixels como padrão, ele acaba por estar lá um pouco, então isso é um bit. Precisamos ter certeza de que a altura está ajustada para auto e precisamos do conjunto de exibição para bloquear e precisamos aplicá-lo. Tenho a minha imagem seleccionada. Eu tenho a coisa IMG aqui e então eu digo que minha imagem é agora imagem responsiva. Vamos verificar no navegador agora, salve tudo. Espero que veja, esse cara aqui redimensiona, incrível. Basicamente agora, é apenas duplicar este div original aqui, vamos apagar estes. Nós também vamos excluir esses, nós também vamos excluir este texto aqui em baixo. Você pode ver que este é o texto que foi originalmente antes de colocarmos a imagem aqui. É apenas uma espécie de squidged na parte inferior, apague estes, apague estas colunas. Vamos fazer isso agora. Vamos nos livrar do texto primeiro na parte inferior aqui. Eu tenho minha tag div aqui, começando e terminando e tem esse texto esguichado aqui. Não preciso mais deles. Acho que é sempre mais fácil fazê-lo na visualização de código. Não preciso de nenhum desses caras. Vou apenas excluí-los no CodeView, é por isso que adoramos dividir a visualização no Dreamweaver. A próxima coisa que quero fazer é duplicar esta coisa aqui. Não quero duplicar apenas a imagem. Eu quero duplicar tudo porque no momento ele só tem a imagem selecionada visto lá. Eu quero a aula de div circundante, então essa é a minha coluna. É isso aí, então col-lg flutuante à esquerda. Vou apertar o comando D ou replicar e ir para duplicar ou Ctrl+D em um PC e olhar para nós voando agora. Temos seis deles. Obviamente você pode fazer nove. Vai continuar. O que queremos fazer agora é passar e trocar essas imagens aqui. Não vai ser um processo particularmente sexy e nós não vamos fazer nada além disso, então você pode pular junto se quiser. Mas se você quiser me seguir, vamos clicar nesta imagem, clicar nas pequenas linhas de tiras e aqui, vamos pegar o arquivo do navegador, arquivos de tamanho de exercício, imagens. Desça, miniatura, ótimo. Agora, você definitivamente deve estar adicionando todos os textos aqui. Este é o projeto. Ele lhe dá um nome de projeto como o projeto. Foi um projeto UI e adicionar todos os detalhes que você pode, porque você quer que ele seja bom e motor de busca amigável. Não vou, porque agora sou preguiçoso. Mas se este é o meu próprio site, eu iria 100 por cento e fazê-lo. Mas neste tutorial eu estou apenas tentando acelerar as coisas. O que também vou fazer para acelerar as coisas é, eu estou indo para ir para minhas imagens de arquivos de exercícios, e pegar todos esses caras. Na verdade, eu tenho esses dois primeiros, então eu vou copiá-los, colocá-los na minha área de trabalho dentro da minha pasta de imagens. Só para que agora, eu possa entrar aqui e não ter que copiar e colar todas as vezes. Eu posso entrar aqui e realmente apenas mudar o nome para thumbnail3. Mude o texto inteiro, não se esqueça. Este aqui, coisas excitantes. Outras coisas que eu poderia fazer é quando eu clicar neles, para onde eles vão? Porque isso vai acontecer mais tarde. Eu posso fazer isso agora e eu posso apenas colocar em haxixe? Cabe a mim se eu quiser fazer isso agora ou mais tarde. Fiz aquele. Mas sim, vamos falar disso mais tarde quando realmente construirmos essas segundas páginas, então teste isso em um navegador para ver o quão bom ele fica. Salve tudo, verifique no navegador e olhe para isso. Eu adoro isso. Especialmente com todas as novas imagens coloridas aqui ele começa a parecer um site completo agora. A próxima coisa que teremos que fazer, é descobrir o que acontece quando chegar a um tablet como este. Porque, no momento, continua a cair naquelas três fileiras. Quero mudá-lo quando chegar a um tablet e celular e faremos isso no próximo vídeo. 32. Como fazer colunas diferentes para sites em dispositivos móveis ou desktop no Dreamweaver: Oi lá. Neste tutorial, vamos levar a nossa vista de área de trabalho que tem três colunas, em seguida, vamos obtê-lo para baixo para duas colunas, quando ele fica para baixo para tablet e, em seguida, vamos para baixo para celular, apenas uma coluna. Super fácil de fazer, vamos fazê-lo neste tutorial. Atualmente temos uma classe dizendo para ser este terceiro, lembre-se de 30 por cento. Vamos clicar nele, esse cara aqui. Não é a imagem, é a div que está ao redor do lado de fora. Lembre-se que a coluna faz com que ele flutue para a esquerda. Mas há coluna grande ou LG é o que diz ser 33 por cento. Precisamos de mais dois aplicados a ele. Vamos fazer o primeiro. CSS Designer, estilos CSS, Eu vou colocar este no tablet. Vamos fazer uma nova turma chamada Col e eu vou fazer em profundidade para médio, ok? Este vai ter uma largura de porcentagem e esta porcentagem vai ser, agora deve ser 50 por cento para ir igual, mas eu tenho um preenchimento em torno dele para 48 por cento. Porque eu quero as margens percentuais de cada lado, eu vou mudar para porcentagens. Na verdade, eu poderia fazer isso todo o caminho. Escolher porcentagens sem aquele pequeno ícone de bloqueio significa que eu vou todo o caminho ao redor. Todo o caminho ao redor. Nada acontece porque como estamos olhando para uma visualização de área de trabalho e não aplicamos a classe, vamos editar. Ok, então eu vou clicar sobre isso e eu tinha um chamado col-MD. Se ele está fazendo o que eu não vim, não reconhece que não foi feito, ok? Eu vou começar e eu vou fazer um salvar tudo e, em seguida, tentar e aplicá-lo a você. Pegue a classe externa. Desligue isso. Ligá-lo e espero agora.col-md. Lá está ele ali. Às vezes você precisa salvar tudo. Isso é aplicado, ele vai tipo de trabalho. Vamos dar uma olhada em um navegador. Vá configurar o tamanho do meu desktop, então você pega o tablet e você pode ver que ele quer ocupar isso. Precisamos fazer o estofamento também, para que possamos. Mas podemos brincar com ele um pouco, vamos começar as imagens. Mas você pode ver que ele é cerca de metade. Certo, então precisamos fazer isso por todos eles. Podíamos passar a etiqueta exterior no centro comercial, por isso vou mostrar-te um pequeno truque. Eu quero-os. Você pode ver como as classes são aplicadas aqui em baixo na visualização de código? Ok, então ele vai div como uma classe é igual e dentro dessas aspas, todas as classes col, col-lg, levantamento invertido e nosso col-midd ser adicionado. Vou mostrar-te um truque fixe. Meu específico ou Dreamweaver. Se eu clicar aqui e, em seguida, mantenha pressionada a tecla de comando e clique lá também. Você pode ver que existem vários cursores. Isso é realmente útil quando você deseja adicionar uma classe col-md. Você não atinge o período no início porque não precisamos porque aqui diz classe. Parece um pouco diferente na visualização de código e essa é uma maneira de adicioná-los todos ao mesmo tempo. Salve tudo, agora vamos para o navegador, [inaudível]. Visualização da área de trabalho e visualização móvel. Eu acho esses tipos de passos no curso bastante satisfatório, eu realmente acho. Vamos fazer a versão móvel ou fazer o preenchimento e um pouco. Queremos criar uma nova classe, então estilos, vamos colocá-la no celular. Vamos criar uma nova turma aqui chamada, pequena, certo? Vamos chamá-lo de extra pequeno. Por quê? Porque estou tentando te acostumar com um pouco da linguagem de estilo que acontece na web web de web design. É M é muitas vezes usado para tablets, esse tipo de grandes sinais de telefone como o iPhone Plus, ok? Então temos os telefones plus size. Poderíamos chamar um pequeno e tudo bem. Mas normalmente as pessoas chamam de extra pequeno para seus celulares menores com cerca de 300 pixels de largura, como um telefone padrão. Legal. O que queremos dizer é que queremos que você tenha 100 anos, então não vamos bem 100. Vamos adicionar um pouco de estofamento por fora, mas eu vou fazer 98. Certifica-te de que é a percentagem. Esses caras vão trancar todo o caminho e dizer que eu gostaria que todos vocês fossem uma porcentagem de um. Coloca em todos eles. Legal. Agora vamos salvar tudo apenas em um navegador. Vamos descer pronto. Boom, isso não funcionou. Eu não apliquei. Está bem. Você tem que ter certeza que você provavelmente está olhando para mim assistindo este vídeo indo, não vai funcionar. Então você precisa fazer seus múltiplos truques de cursor. Poderíamos adicionar o membro manualmente, mas vamos ser rápidos e pequenos. Nem é pequeno, é extra pequeno. Salve tudo, verifique aqui. Agora estamos trabalhando desktop, tablet e, em seguida, para baixo e mover para cima. Boom, todos eles se acumulam. Há um pouco de um espaço ao redor do lado de fora parecendo muito legal. Há algumas coisinhas para trabalhar. Mas acho que foi um sucesso. Você aprendeu a fazer colunas responsivas no Dreamweaver. Tudo bem. Vamos arrumar algumas coisas no próximo vídeo, mas então todo mundo, estamos chegando perto de ter todas as técnicas que precisamos para construir qualquer site. Tudo bem. Para o próximo vídeo. 33. Como criar um pseudo clearfix após a classe no Adobe Dreamweaver: Olá, e bem-vindo a este vídeo intitulado assustador, é tudo sobre correções claras e pseudoclasses. Parece assustador, não é tão difícil. Nós estamos fazendo isso. Por que razão? É porque eu quero adicionar um pouco de preenchimento entre esta caixa aqui, que é chamada de grade de imagem, então esta é a tag div e meu rodapé. Mas eu não posso, porque esses caras estão todos flutuados à esquerda e isso causa problemas quando há caixas embaixo do flutuador como este rodapé aqui. Mas se usarmos uma pseudo-classe, isso significa que posso adicionar preenchimento na parte inferior da minha grade de imagens e ele realmente começa a se mover. Se você está seguindo ao longo do tutorial, você não pode fazer isso. Vamos aprender como fazer isso neste tutorial. Nós temos que fazer isso porque esses caras estão flutuando para a esquerda e nós sabemos de um tutorial anterior que se nós pés qualquer coisa para a esquerda, a próxima tag div precisa ter fluxo claro aplicado e nós fizemos isso com uma pequena classe especial. O problema aqui é a estrutura. Esta é a minha última div, é a minha última pequena coluna, então a tag div por baixo deve ter flutuação clara, mas eu não tenho uma tag div por baixo. Eu fecho a grade da imagem e depois fecho o principal e depois o rodapé começa bem aqui. O problema de adicionar float claro a um rodapé, ele simplesmente não funciona, é muito longe do fluxo aqui. Então um truque é que eu poderia clicar aqui e apenas inserir uma tag div, dar-lhe nenhum nome, remover o texto do espaço reservado e apenas dar-lhe flutuação clara e isso funcionaria totalmente. Isso é o que eu fiz por anos e é isso que muitas pessoas ainda fazem e tudo bem, você pode fazer isso, por quê? Porque é fácil, mas estamos mais adiante neste curso e você veio aqui para aprender e é hora de aprender algumas coisas legais. Pseudo-classes são particularmente difíceis de fazer ou usar, então eu vou fazer isso. O que precisamos fazer é fazer isso aqui no nosso CSS Designer. Clique em algum lugar aqui, estilos CSS, faça isso globalmente e nós temos um aqui chamado imagem, onde você está? Encontre-os, grade de imagens. O que precisamos é de outro que ainda diga grade de imagens, mas antes de fechá-la, vamos adicionar dois pontos lá, que os dois pontos indicam que é uma pseudo-classe. Então é como aquela classe, mas um pouco diferente e nossa pseudo-classe vai dizer depois. Então, vamos adicionar alguns atributos que só são aplicados após a grade de imagem. Isso é uma pseudo-classe, super fácil. Bem, o principal é claro flutuador. Algumas das vezes você pode escapar apenas com flutuação clara, mas nós vamos fazer algo chamado correção clara. É um nome dado a uma maneira um pouco mais complicada, não complicada, um pouco mais robusta de limpar o carro alegórico. Limpar o flutuador por si só funciona a maior parte do tempo, mas não em todos os navegadores o tempo todo. Então, para fazer uma mais robusta, tudo o que precisamos fazer é clicar em exibição, mudá-la para bloquear, e precisamos adicionar algo chamado conteúdo. Na verdade, não há conteúdo aqui no painel CSS Designer. Mas as pessoas úteis adicionam Dream Weaver disse que há um pouco mais de borda [inaudível] no fundo aqui. Então eu vou bater conteúdo, lá está ele e praticamente eu não quero nada para o conteúdo, então são duas aspas marcadas com nada no meio. Não pergunte por que, mas isso nos ajuda em muitos navegadores. Então isso é um substituto para apenas colocar em um div vazio por baixo com aquele flutuador claro aplicado e se formos todos honestos, não é tão difícil, fizemos este carvão e um depois, e isso nos faz sentir como super-duper desenvolvedores quando você está fazendo clara correção pseudo-classes. Parece que está falando outra língua. Pelo menos sinto-me assim quando falo sobre isso. Vamos fazer o que queríamos fazer, qual era? Era grade de imagem, eu queria adicionar um pouco de preenchimento depois. Sim. Então ele salta ao redor, mas lá vai você, preenchimento adicionado. Legal. Antes de ir apenas um pouco de limpeza, e quando eu ir do desktop para baixo para tablet, o preenchimento no topo aqui não é bom. Então é bom no desktop e está tudo bem no celular, vamos fazer isso também, mas é muito ruim no tablet. Para fazer isso, o que vamos fazer é fazer styles.css no tablet e não vamos para a grade de imagens. Nós não temos grade de imagem aqui no momento, então vamos dizer quando a grade de imagem aparece no tablet, ela tem, eu vou clicar nisso, rolar para baixo, só precisa de mais margem para cima. Essa coisa continua pulando, porque estamos substituindo agora você pode ver como ele pulou, eu vou bater um mais baixo, então nós não estamos adicionando em cima da área de trabalho, nós estamos substituindo-o. Então estamos dizendo, em vez disso, faça isso. Agora só um pouco de teste entre aqui. Parece bom, também parece bom aqui, é um pouco de brincar. Uma coisa que podemos ter que fazer é, você pode ver aqui esta palavra rompe essas linhas diferentes e mexe com a gente? É muito difícil trabalhar com tantos tamanhos diferentes, então há um ponto em que você é um web designer, você vai ter que viver com algumas visualizações que não são perfeitas. Acho que não precisa ser perfeito, tem que ser utilizável, mas não precisa ser perfeito. O que você faz é apontar para os dispositivos principais e se alguém aparecer com um tamanho louco, você pode ter que voltar e ajustá-lo. Você não quer ser pego na criação de dez consultas de mídia diferentes. Só para você saber, três é o mínimo, então desktop, tablet e celular, isso é o que temos. Mas muitos sites mais sofisticados terão cinco, então eu vou ter como um muito pequeno, como nós temos, eles vão ter um tamanho fablet, esse tipo de iPhone plus size. Eles também olham para tablets horizontais e horizontais e, em seguida, os desktops maiores, então eu vou ter cinco. Já vi sites com sete. Assim, você pode continuar fazendo essas consultas de mídia e fazendo ajustes, isso depende de quanto controle você deseja sobre cada exibição. Mas saiba que quanto mais consultas de mídia você tiver, eu acho que quanto mais trabalho precisa ser feito e você pode ficar bem com isso. Para este site aqui nós estamos mantendo-o simples, principalmente para o tamanho da classe e, se eu for honesto, eu só faço três consultas de mídia para meus sites pessoalmente. Tudo bem. Devemos fazer o celular? Você pode criar um para dispositivos móveis. Na verdade, quando ele fica para baixo para celular, eu estou feliz com o preenchimento, mas você só ir para a largura máxima aqui para celular e adicionar nossa classe para grade de imagem e mudar o preenchimento. Mas você poderia fazer isso, eu tenho fé. Tudo bem. Próximo tutorial. 34. Como criar e linkar novas páginas no Dreamweaver usando modelos: Oi lá. Neste vídeo vamos passar e começar a construir nossa segunda página, que é a nossa página do portfólio. Isso será indicativo de como criar novas páginas. Nós vamos mudar o título aqui e estes pedaços de imagem no fundo. Sim, vamos fazer isso agora no Dreamweaver. Primeiro, há duas maneiras de fazer isso. Podemos ir para Arquivo, Novo como fizemos anteriormente e dissemos procurar algum modelo e este é o modelo que criamos anteriormente na série. - Sim. Carregue em “Criar”. O único problema é que temos uma página em branco. O que eu faço normalmente é clicar em “Cancelar”, pois eu apenas faço um Salvar como desta página. Agora tivemos que chamar nossa primeira página index.html. Essa é a página inicial, não há como contornar essa. Agora, todas as outras páginas nós vamos começar a nomear por conta própria. As únicas regras são, não use maiúsculas e não use espaços ou personagens malucos como este. Vamos chamar nosso portfólio de design, e o nome do cliente para este, digamos que é byol. Queremos boas palavras-chave em nossos URLs também. Isto é muito bom para os motores de busca. Eu vou apertar “Salvar” e arrastá-los para cima e salvar. Ele ainda está conectado ao modelo. Uma coisa que eu tive problemas com o uso de modelos no passado é que às vezes você faz uma atualização para o modelo, agora e esse cara não atualiza, se esse evento acontecer, acontece como uma vez em uma lua azul, mas você pode ir para Ferramentas, Modelos, se ele já estiver esmaecido, basta clicar na visão de código abaixo aqui. Por algum motivo, clicar na visualização dinâmica faz com que isso não funcione. Legal. Modelos, e este aqui você pode dizer, “Aplicar modelo à página”. Você pode simplesmente clicar em seu modelo novamente. Não tenho de o fazer agora porque está a funcionar muito bem. Mas se isso acontecer, tente isso. A outra coisa que você pode tentar, se mais tarde na estrada seu quebra, você pode dizer “Atualizar página atual” e isso vai apenas voltar e verificar o modelo novamente apenas para ter certeza no caso de ele não ficar conectado. Vou encaixar este desenho aqui. Há algumas coisas que preciso me livrar. Vou clicar neles na visualização ao vivo. Havia essa etiqueta, você se foi. Clicando sobre isso. Eu gosto de clicar aqui para ter certeza, porque eu não quero ouvir um conteúdo que é a caixa grande, mas esta imagem flutuante esquerda é tudo o que eu quero me livrar. Eu vou reutilizar este texto e eu vou mudar o texto para o que eu tinha aqui, design de interface do usuário. Fique por aí. Vamos apenas fazer alguns, obviamente entrando em alguns detalhes, mas haverá alguns truques extras que aprenderemos enquanto construímos. Este vai ser o meu design de interface do usuário para BYOL. Excluir U. Legal. Quando estiver laranja, eu quero inserir em uma tag p e ele vai representar este texto aqui. O que eu não quero fazer, eu estou copiando e colando, é quando você está neste modo laranja ele não deixa você fazer muitas coisas. Você tem que clicar fora e clicar nele na sua visualização de tag, essa é a visão azul. Laranja é a única coisa de edição de texto. Com isso selecionado, eu vou para Inserir, eu vou para baixo para p tag, onde você está? Ali, parágrafo. Vou atrás do meu H1. Vou substituir este texto. Eu não sei por que eu gosto de fazer isso aqui em baixo na visualização de código melhor, colar. Aqui vamos nós. Legal. Nós vamos ter que fazer um pouco de estilo para ele. Agora eu poderia criar um seletor composto para dizer tags p que estão dentro do conteúdo herói. O problema com isso é que eu poderia usar outra tag p para fazer outra coisa. Vou ser um pouco mais específico aqui. Eu vou criar uma classe especificamente para estilizar este texto apenas aqui, em vez de todas as tags p que estão dentro desta caixa superior. Porque talvez na página de contato conosco ou na página sobre nós, queremos fazer coisas diferentes com a tag p. Vamos criar um designer CSS classe, o meu não está olhando, então eu vou redefinir Dan é incrível. Legal. Styles.css, eu vou fazer isso globalmente. Vou criar uma classe aqui, e vou chamá-la de texto no início. Sempre que você começar a fazer textos, basta chamá-lo de texto no início para que seja fácil de encontrar mais tarde. Este vai ser texto branco, e vamos chamar isso de uma descrição. O que eu vou fazer com ele? Eu vou fazer isso, eu vou pegar texto, eu vou torná-lo uma cor de fonte de branco e eu vou torná-lo um tamanho de fonte de 30. que eu tirei do meu, oh cara, está ficando irritante aquele duplo 3 não sei por que faz isso. Eu datilografo três uma vez e coloca em dois. Legal. Agora vamos aplicar isso aqui. Este vai ser chamado de texto. Você pode começar a ver por que usar texto no início é útil. Você pode passar por todas as diferentes opções de texto. A próxima coisa que quero fazer é, este é o tipo de coisa nova e única. O resto das coisas que fizemos até agora, fizemos no curso. Mas esta parte aqui agora em laranja. O problema é que só podemos aplicar classes a esta tag p inteira. O problema é que quero que esta pequena parte da etiqueta p seja vermelha. Agora o que eu poderia fazer é criar duas tags p e em seguida, flutuá-las ao lado do outro e isso é muito drama, então nós vamos olhar para algo chamado tag span. Uma tag span é que, se você for do mundo do InDesign, é esse estilo de caractere. Posso usá-lo como parte do meu parágrafo, apenas atualizando um pouco. Se você nunca ouviu falar de um estilo de personagem, não se preocupe.. Uma tag span, veja isso, você tem que fazer isso aqui no CodeView. É uma maneira de aplicar uma classe, em vez da tag pai que normalmente acontece, podemos aplicá-la ao nosso pouco dentro da tag p e é apenas chamado de tag span. Primeiro de tudo, vamos criar essa tag. Styles.css, GLOBAL, crie este aqui. Vou ligar para este. Texto, vamos com vermelho. Vou chamá-lo de vermelho só porque é reutilizável. Eu deveria ter chamado essa mensagem de branco também. Mas text-vermelho, eu vou dizer que você é vermelho. Vou puxá-lo, com a cor do texto. Eu deveria ir e encontrar a cor adequada do Illustrate ou usar a ferramenta conta-gotas, que está lá e roubar a cor. Eu não vou fazer mais nada porque o tamanho da fonte vem do texto-branco subjacente que vamos aplicar a toda a tag. Para aplicar uma tag span, destacamos aqui no CodeView, em seguida, apertamos “Command T” em um Mac ou “Control T” em um PC e essa tag de quebra aparece. Digite em extensão. Isso é o que queremos. Mas queremos adicionar uma classe também. Span, espaço e, em seguida, digite cl e você pode ver, Dreamweaver útil, ele tem uma classe lá e adicionou toda a sintaxe para nós também, que é o igual e as aspas. Aqui vamos digitar sem parar. Muitas vezes, quando você está trabalhando no CodeView, você não coloca o sinal de parada completa. Este é texto e texto vermelho. - Legal. Volto novamente, e esperançoso Dreamweaver envolveu o cliente na tag span e é chamada de classe span, que é texto vermelho, e lá vai você, como estilo in-line. A próxima coisa que quero fazer é este pedaço de texto aqui embaixo para o resumo. Isso é exatamente o mesmo que isso. Certifique-se de clicar na tag pai, que é a tag p, pressionar “Command D” em um Mac ou “Control D” em um PC, duplica essa tag. Incrível. Vamos mudar isso para breve. Agora os tiques adaptados alguns que eu poderia copiar e colar ilustrador diferente, mas eu quero mostrar-lhe um truque legal. Agora, isso só funciona aqui em baixo na visualização de código e que misturam palavras latinas chamadas Lorem ipsum, apenas coloque carrapatos do titular. O que podemos digitar aqui em baixo na visualização de código é alarme e, em seguida, colocar em quantas palavras você quer e, em seguida, pressione “Tab” não digite guia no seu teclado assim. Tenho 20 larguras de alguma forma. Isso é algo chamado imagem. Se você não está usando imagem e você quer obter mais na visualização de código, eu tenho outro colas que é tipo de mais projetado para fazer um monte do que nós fizemos aqui, mas codificar visualizações, que pode ser um próximo passo para você, mas é muito legal. Você quer Google isso e dar uma olhada ou olhar para alguns dos meus outros vídeos. Agora vamos olhar para se livrar de... Vou deixar as coisas do “vamos conversar” e depois deixo as coisas do “vamos falar” lá dentro. Está bem. Ainda está nos meus desenhos. Vou deixar lá dentro. A próxima coisa que eu preciso fazer é essas folhas Pergamon, uma grande imagem que vai representar que desenhos que fizeram. Quando eu clico em, digamos, um desses ícones aqui, ele carrega esta página então eu preciso passar e excluir todas essas colunas. Vou clicar nesses caras. Agora, vamos deixar a caixa da grade da imagem. Eu provavelmente não deveria chamá-lo de grade de imagem e provavelmente deveria ter chamado isso de secundário, principal ou algo assim porque ele só vai ter um imagine e agora não uma grade. Confuso. Preciso que tudo saia daqui. É mais fácil fazê-lo na visualização de código. Você pode fazer isso ao vivo, se preferir, mas eu vou pegar todos vocês, ter certeza de pegar o começo no final. Como você sabe se é o começo ou o fim na visualização de código? Clique na grade da imagem e você pode vê-lo destacado aqui em baixo. Esse é o fechamento como a abertura. Tudo o que estiver entre aqui, eu vou me livrar e adeus. Agora com meus casos ainda estão piscando lá dentro. Vamos colocar a nossa imagem. Nós vamos para “Inserir imagem” e nós vamos trazer de nossos arquivos de exercícios imagens e eu tenho portfólio um. É um cara grande, um pouco diferente do meu design e vamos salvar tudo, testar no navegador. A imagem é muito grande e simplesmente não responsiva, mas não se preocupe, lembre-se que criamos uma tag de código, chamada responsiva. Vamos editar a esta imagem Código ponto responsivo da imagem e salvamos tudo, abrir no navegador e agora deixe-me encolher. Ei, olha para isto tudo a ser responsivo. Você pode decidir se você quer preenchimento em torno dele também. Eu não fiz isso. Você pode adicionar algum preenchimento para a grade de imagem ou você pode criar uma classe de preenchimento especial, mas eu estou feliz por ele para bater ao lado das bordas aqui, editar preenchimento falso com a imagem real em si. Mas isso é o que eu preciso fazer olhando para isso quando chegar até a visualização móvel. É apenas texto muito grande, então, eu posso passar por agora e ajustar o composto talvez selecionado para dizer tags p que estão dentro da imagem fazer menor. Eles são 30 pixels no momento. Vamos tentar isso. Vamos para estilos de designer CSS, móvel. Vamos criar um seletor composto que diz, na verdade, nada está lá, eu estou indo para fora e realmente clique em aderido espero, espero que economize algum tempo. Vou clicar nele, depois fazer um seletor. Aqui uma tag que eu quero, Eu não preciso desta descrição de imagem de texto. P tags que estão dentro aqui, nosso conteúdo vai funcionar com sorte e nós vamos agarrar. Na verdade, vamos baixá-lo, vamos ao texto e dizer, vamos ao tamanho da fonte e vamos torná-lo pixels de 220. Estamos a apanhá-los fantásticos. Uma coisa que eu não fiz é que eu não tinha nenhum estofamento nos lados quando ele chegou até a minha bola porque realmente não importava quando eu tinha aqueles carrapatos originais dele, mas agora eu estou pensando que ele provavelmente precisa dele, então aqui há um frio aqui ou conteúdo e feito um celular. Diz alguma coisa? Vou mostrá-lo. Então ele fica zeros. Na verdade, vou aumentá-lo para 10 pixels. Então 10 pixels desse lado só me dão um pouco de espaço para respirar nas laterais. Sempre que você faz coisas assim, você vai ter que voltar e apenas verificar se eu estraguei a página de índice. Sinto que não, mas vamos provar de qualquer maneira. Com isso aberto no meu navegador, parece bom lá. Nada deu errado, exceto lembrar aquele estofamento que colocamos naquele lado e fingimos estar no meio. Nós terminamos adicionando um pixel extra de equipe. Então nós vamos ter que ir e ajustar esse seletor composto. Mas tudo o resto parece bem o seletor composto que usamos. Eu poderia ir para o índice, ir para o celular, ir para essa coisa aqui e era imagem dentro do conteúdo de herói. Vamos verificar. Imagem do cabeçalho. Foi esse cara aqui, imagem de conteúdo de herói à esquerda. Vamos abrandar um pouco. Esse tipo de coisa acontece o tempo todo. Você vai mais longe no curso e você faz um pequeno ajuste, você precisa ir e verificar novamente. Não tem ramificações. Se isso acontecer, você pode ter criado sua própria classe especial, mas você não quer ter o hábito de criar muitos deles porque sua folha de estilo CSS pode ficar louco olhando para o momento. O nosso é agradável e limpo e nós não ganharíamos nenhum prêmio de desenvolvimento, principalmente porque a minha visão de desktop nomes longos realmente estúpidos. Mas está indo muito bem. A última coisa que faremos é conectar essas duas páginas. Na minha página de índice aqui, vou sair para a vista completa. Isso vai clicar nele. Eu vou dizer quando este botão é clicado, esta imagem, nós vamos para as linhas listradas e dizer link. Se você tinha um hash aqui como vimos anteriormente, podemos excluir hash e realmente clicar em “procurar arquivo” e dizer uma interface do usuário do portfólio, clique em “Abrir”. Agora é padrão para si mesmo, que é alvo nenhum. Antigos tiques, este vai ser o meu design de interface para trazer o site do seu laptop. Não é, isso é coisa que eu tenho como material de espaço reservado templado então este não é o meu trabalho, este é trabalho de biblioteca estocado. Vamos clicar fora em segundo plano e vamos testá-lo em um navegador. Agora esta imagem aqui espero que possamos clicar nela e salta para essa página. Para voltar, vamos usar clicar na imagem aqui como logotipo. Isto remonta à página inicial. Fizemos isso em um tutorial anterior, mas é exatamente a mesma mão que fizemos para esta imagem, exceto que em vez de vincular à página da interface do usuário, ele vincula de volta ao índice. Tudo bem. Agora você iria passar por duplicar essa página e fazer tudo isso. O legal sobre isso é que você vai notar que, à medida que passamos por este curso, a produção fica cada vez mais rápida porque nós podemos confiar em coisas que fizemos no passado, e essa duplicação vai ser super fácil, porque de um modelo e baías porque já fizemos o layout para esta página. Só fazemos um “Salvar como” e vamos trocar tudo. É isso para este tutorial. Vamos para o próximo. 35. Como fazer upload do seu site para uma hospedagem na internet via Dreamweaver: Tudo bem, neste vídeo, vamos nos inscrever para um anfitrião. No nosso caso, vamos usar Bluehost porque eles são incríveis. Mas você pode se inscrever para qualquer hospedagem aqui, o que você preferir, e então saltar para o próximo vídeo depois disso, onde nós realmente conectamos downs FTPD ao Dreamweaver e carregamos nosso site. Então, se você estiver procurando hospedar, tudo bem, vá para bluehost.com/track/byol. Algumas coisas acontecem é que você recebe um desconto e eu recebo uma comissão sobre a venda, não custa nada extra, você economiza dinheiro. Mas se você não quer fazer isso, você pode simplesmente ir direto para bluehost.com e ir em torno do meu pequeno link. Independentemente de como você faz isso, você acaba aqui, você clica em “Get Started”. O que você quer é essa primeira opção. Tenha uma leitura, uma olhada, mas da maioria das pequenas e médias empresas, você só precisa de um plano básico simples. Ele disse 395, mas na verdade acaba sendo cerca de 595 depois de colocar todas as coisas que você precisa. Portanto, se você já tiver um nome de domínio, digite-o aqui. Se você não tiver um, eu vou me inscrever por agora. Traga seu laptop é awesome.com. Tudo bem, então preencha os campos aqui, e esta parte aqui é muito importante. Então seu preço por 395 é por três anos. Se você quiser manter o custo baixo e cumprir 12 meses, você paga mais. Mas você só precisa tossir um ano. Coisas que você não precisa. privacidade do domínio realmente não mantém o seu privado, apenas o mantém privado de pessoas que não sabem o que estão fazendo. Backup do local. Se você está apenas trabalhando em seu próprio site, você não precisa disso porque você sempre terá uma cópia em seu laptop. Mas se você estiver trabalhando com várias pessoas, isso pode ser muito útil porque eles destroem seu site. Você não tem uma cópia do novo site. Sim. Você quer ir a esse backup. Não preciso disso para este caso, porque sou só eu a trabalhar. O arranque do motor de busca nunca funciona. “ Bloqueio do site” Isso também não funciona. Só permite que você coloque um crachá em seu site para dizer que protegemos contra malware, não vamos usá-lo, então não vamos editar e certificados SSL um pouco complicados para o que estamos fazendo agora, mas definitivamente algo em seu futuro, ele faz o seu site de HTTP, www.bringyourlaptopisawesome para HTTPS, que é mais seguro. Mas há alguns outros aros para saltar. Então vamos desligar isso e mantê-lo simples. Então, insira seus detalhes de pagamento e eu o verei na próxima tela. Ok. Parabéns, nós nos inscrevemos. Eu quero pagamentos de tarifa e outra coisa; imprensa palavra, não obrigado. Ok. Ele pedirá que você se inscreva para obter uma senha. Eu já fiz isso. Faça login. Ok, então é aqui que acabamos e o que estamos procurando que realmente precisamos é algo chamado de detalhes de FTP. Eles são pequenos botões aqui. Ou você receberá um e-mail como eu recebi. Ok, bem-vindo ao Bluehost e eles vão te enviar a informação FTP. Então dê uma olhada no seu e-mail e essas coisas aqui são muito importantes. Então anote em algum lugar onde guarde todos os cadernos, guarde todos os seus arquivos ou o Google Doc. Então coloque-os todos lá, porque este FTP detalhes você vai usar uma vez e esquecer. Então, em alguns anos, quando você precisar atualizar as coisas, você esquecerá, especialmente sua senha. Se você esquecer, você pode realmente encontrar este material aqui no bluehost clique no FTP e anote o fundo será a mesma informação. Eu não quero clicar agora só porque tem alguns detalhes pessoais lá que eu não quero que você veja. Então vamos entrar no Dreamweaver agora e colocar esses detalhes de FTP. Portanto, não importa realmente qual página você abriu. Não importa nada. Vamos para o site e gerenciar o site. Este é o que estamos trabalhando em todo esse curso, certo, portfólio incrível do Dan. Vamos clicar duas vezes. Estes são os detalhes que começamos a colocar, mas agora precisamos inserir algo chamado servidor. Isso é o que Bluehost está nos dando, eles estão nos permitindo usar seus servidores. Então vamos bater mais. Dê a ele um nome no topo aqui que não importa, “Bluehost. Ok, se você estiver usando Go Daddy ou qualquer outra empresa de hospedagem de domínio, você pode simplesmente digitar os detalhes de FTP aqui. É praticamente a mesma coisa. Então, naquele e-mail que você viu eu tinha o nome do host, que é na verdade o endereço FTP. Vamos, na verdade, puxar isto ao lado dele. Então esse é o nome de usuário. O que mais temos? Temos a senha, que vou cortar. Senha. Incrível, e o diretório raiz precisa ser colocado. No nosso caso, é HTML sublinhado público, que é super comum. Legal. Agora, no momento da verdade, vamos bater 'Teste 'Hit 'Teste' e os dedos cruzados funciona. Incrível. Se não funcionar, às vezes, quando você está configurando uma nova conta de hospedagem, pode demorar um pouco para preencher, então dê uma hora, talvez duas antes de começar a gritar com o bluehost ou comigo. Às vezes, pode demorar um pouco para começar a trabalhar. Outra coisa que você pode fazer é que seu nome de domínio pode não estar registrado e funcionando ainda. Então byolisawesome.com pode não ter preenchido ainda. O que eles fizeram é que lhe deram uma senha temporária. Vê esta URL temporária? Ok, este é um que você pode usar entretanto até que seus nomes de domínio reais funcionem. Vamos clicar em 'Okay'. Agora, se você está tendo problemas com um FTP, algumas das coisas que podem acontecer é que você pode desligar isso e em FTP passivo que às vezes pode corrigir as coisas. A outra coisa que pode acontecer se você estiver usando um host diferente, ele pode não ser chamado de sublinhado público Html, ele pode ter um URL diferente. Então, entre em contato com sua empresa de hospedagem se você estiver tendo problemas antes de aborrecê-los, verifique as perguntas frequentes. Muitas vezes, eles terão como configurar no Dreamweaver e dirão qual parte vai para onde se você ainda estiver tendo problemas, contato com a empresa de hospedagem. É para isso que você os pagou. Muitas vezes, o chat online é uma maneira fácil de fazê-lo ou deixar um comentário aqui nesta página. Verei o que posso fazer para ajudar. Vamos bater, 'Salvar' e está feito e você está pronto. Então, você carrega páginas individualmente em geral. Eu tenho index.html aberto. Aqui estamos no painel de arquivos. Este é o site que está na minha unidade local. Você pode ver a exibição local. É só a minha máquina. Agora o que eu quero fazer é colocá-lo. Então site colocar e isso vai conectá-lo ao bluehost. Demora muito tempo. Certo, conectando ao servidor. Gostaria de colocar arquivos dependentes? Certo, isso é importante por alguma razão, há um temporizador nisso. Não sei porquê, mas tenho 22 segundos para explicar. Arquivos dependentes no momento estamos apenas colocando HTML. Mas nós construímos uma folha CSS e alguns JavaScript e algumas outras coisas e algumas imagens que não fazem parte disso. Arquivos dependentes são todos esses bits extras. Então, se você quiser apenas colocar o arquivo de índice, você clica em 'Não'. Se você quiser como eu, coloque o arquivo de índice mais todas as imagens mais todo o JavaScript, e todo o CSS. Certo, isso é o que precisamos fazer. A razão pela qual eles mantêm isso separado é que, digamos que são muitas imagens e elas são grandes imagens longas; veja as imagens demorarem mais. Html leva segundos para atualizar, enquanto Jpegs pode ser bastante grande. Então o que você faz é dizer apenas fazendo isso mudar de texto aqui. Você altera o texto e basta carregar o HTML. Então você diz arquivos dependentes, 'Não'. Porque todas as imagens não mudaram. São todos iguais. Tudo bem, então nós carregamos em tudo, e agora nós vamos verificar, trazer seu próprio laptop é incrível. Vamos dar uma olhada em um navegador. Tudo bem, aqui estamos, www.byolisawesome.com. Ei ho, nós temos um site e o resto do planeta pode vê-lo. Não está mais testando localmente ou testando em nosso controle remoto. Tudo parece incrível e tudo funciona. Se você chegou a este ponto, você provavelmente está super feliz consigo mesmo. Eu já fiz isso um milhão de vezes, e eu só estou fazendo isso para um teste e eu ainda estou muito animado. Não sei por que sinto que é diferente quando o mundo pode ver. Vamos dar uma olhada no que mais precisamos fazer só para ter certeza que está tudo certo. Então de volta ao Dreamweaver. Então o que precisamos fazer agora é ter certeza de que todas as páginas estão atualizadas para que pudéssemos agora, porque nós só temos uma página, e a página do portfólio, nós podemos simplesmente abri-la e ir para o site e ir para colocar. Isso vai carregá-lo para a hospedagem. Se você tem muitas páginas, digamos que você atualizou e você tem 20 páginas, você pode ter que fechar, não importa. Você pode selecionar em todas as páginas diferentes aqui ou selecionar todo o site. Na verdade, não há necessidade de aqueles dois irem para cima. Os modelos é apenas para você localmente todos os outros podem subir. Então, você poderia gostar deste manter pressionado Command em um PC, desculpe, comando em um Mac ou Control em um PC e clique em dois deles. Então aqui em cima, há outra maneira de colocar as coisas em ordem. Perguntará novamente sobre os arquivos dependentes. Desejo arquivos dependentes? Eu vou ter que dizer sim, porque essa interface do usuário do portfólio tem algumas imagens extras. O problema é que ele vai carregar os do índice novamente. Então pode ser um processo um pouco longo. Vamos verificar agora. Ei ho, e vamos clicar em um botão. Lá está ele. Aí está nossa grande imagem do portfólio e diz: “Ei, há pedaços aqui escritos em latim, você não gostaria de traduzi-lo?” Isso é porque eu tenho este texto de espaço reservado aqui. Então isso vai desaparecer quando eu realmente colocar um texto apropriado lá. Obrigado. Google Chrome. Muito bem, meus amigos, é o fim de colocar as coisas online. Agora que eu sei de fato dá a muitos dos meus alunos um monte de problemas. Então me dê uma linha, deixe uma mensagem dizendo, eu não consegui fazer funcionar, o que há de errado? Certifique-se de salvar minhas capturas de tela. Eu não preciso necessariamente da sua senha, mas é bom ver qual é o seu nome de FTP e nome de usuário para que eu possa diagnosticar o problema. Esse é o fim deste. Vamos para o próximo tutorial. 36. Como adicionar o Google Analytics ao seu site do Dreamweaver: >Ok, neste vídeo, vamos se inscrever no Google Analytics. Por quê? Porque ele fornece todas essas informações sobre quem vem ao seu site. É de graça. Você pode ver o meu caso. Quantas pessoas pagaram por cursos para trazer seu laptop.com nos últimos sete dias, quantas pessoas estão atualmente no site? Seis de vocês. Em que horas do dia eles estão? De que países são? Todos os tipos de bondade. Ok, então nós vamos passar e mostrar-lhe como instalá-lo. É praticamente copiar e colar. Super fácil, ótimo valor. Vamos fazer isso agora. Ok, então inscreva-se no Google Analytics, vá para o Analytics. Google.com. Terá de iniciar sessão com uma conta do G-mail. Se você não tem um, eles são livres para obter, mas você vai ter que usar um desses para este processo. Crie uma conta do G-mail se ainda não tiver uma. Você passa pelo processo de inscrição. É grátis, você vai acabar em algum lugar como aqui. Isso muda com bastante frequência. Portanto, se a tela parecer um pouco diferente, não se preocupe, é muito fácil. Basta seguir os passos que o Google lhe dá. Eventualmente, o que você quer chegar é ter o código de rastreamento. Ok, então vamos seguir-me só porque estamos a tentar fazê-lo funcionar. Nós vamos para BYOL é incrível. Sítio Web. Ok. O nome da minha conta e o nome do meu site são os mesmos. A URL é www.byol é incrível. Vá indústria, escolha um. Eu estou na educação, empregos e educação vai servir. Ok. Zonas de relatório, isso não pode ser alterado mais tarde para se certificar de que está no país do qual você deseja que os relatórios sejam enviados. Então eu moro na Irlanda, mas se eu estou estudando um site para os EUA, eu quero que ele seja EUA porque eu quero lá dia e noite porque vai ser estranho estar checando sobre eles. Eles são como, “Ei, por que eles estão tão ativos às 4:00 da manhã? Quando ele realmente está lá como 19h dependendo de onde você está no mundo. Então escolha a zona de relatório de não onde você está, mas com o site ou a maioria das pessoas que têm o site, vai ser. Então vou deixar o meu nos Estados Unidos. Legal. Eu queria um contrato de arrendamento? Eu faço. Pode obter identificação de rastreamento. Eu concordo. Porque o que eu quero é isto aqui, esta é a parte principal que eu quero. Nós clicamos aqui e copiamos e então saltamos para o Dreamweaver. Então aqui no Dreamweaver, e eu não vou abrir essas páginas porque eu quero que elas sejam parte dos modelos. Vou abrir o meu modelo. Agora, estou nesta guia de arquivos aqui. Você pode abrir seu template a partir daqui. Legal, porque o que eu quero é que eu quero em todas as páginas. Agora o usuário não vê. As coisas que o usuário não vê é nesta tag head, body tag é a nossa página que todo mundo vê e a tag head é apenas o código em segundo plano e colocá-lo onde ele nos diz. No nosso caso diz-nos para colocá-la em todas as páginas. Costumava ter um espaço específico para o qual precisava entrar. Então, onde vou colocar o meu? Vou colocar o meu lá dentro. Talvez quem eu quisesse carregar logo após esses roteiros aqui. Acerte a pasta e você tem esse grande feio pedaço de JavaScript. A coisa boa sobre isso, porém, é que se eu salvá-lo e atualizar essas páginas, incrível, fechá-lo. Vamos verificar se está nessas páginas. Vou abrir o índice, verificar se está escondido em algum lugar. Vai ficar acinzentado. Ali. É lá agradável. Página do portfólio. Lá está ele. Ótimo. Eles estão atualizando. Agora tudo o que preciso é carregar estas duas páginas. Eu vou fechá-los e apenas enviá-los ao mesmo tempo segurando o comando para selecioná-los ambos. Vamos controlar em um PC e ir para colocar. Gostaria de colocar domínio e arquivos? Eu não preciso, neste caso, porque não é nada realmente mudou, exceto para as páginas HTML. Sem alterações CSS, sem imagens. Então isso vai ser super rápido. Agora a parte decepcionante. Vamos dar uma olhada, é que a cocaína de beber e tomar um pouco selvagem ir. Nenhum dado recebido nas últimas 24 horas, tudo bem. Vamos ver se temos algum código de rastreamento imediatamente. Onde você quer ir agora é voltar para este botão de Início, ok, e apenas certifique-se de que você está dentro, você vai trazer seu laptop é incrível ou o que quer que seja quando você estiver usando. Ok. Aqui em baixo, há pessoas no meu site? Existe algum código de rastreamento funcionando? Vamos testá-lo. Vamos para BYOL é incrível. Legal. Volte para a análise e nada está funcionando. Vamos, Google Analytics. Agora, estamos todos desapontados. Isso está tudo bem. O let analytics pode demorar um pouco para começar, dar um dia. Se não sabe trabalhar até então você tem um problema e talvez fale comigo e diga: “Ei Dan, não está funcionando.” Vamos verificar as perguntas frequentes sobre análises e ver se você pode corrigi-lo. Mas eu nunca tive que falhar realmente. É uma coisa muito sólida e fácil de fazer desde que você coloque na etiqueta da cabeça. Agora vamos ver algumas das outras análises. Vamos ver um dos meus outros sites. Vamos olhar para trazer o seu próprio laptop.com. Ok. Eu tenho isso frio. BYOL online. Você pode ter vários sites gratuitos. Legal um no momento há cinco pessoas no site. Olhando para páginas diferentes e não vamos nos aprofundar muito nesses detalhes porque eu não sei. Sinto que há detalhes pessoais. Não me importo de partilhar. Você pode começar a ver todos os detalhes que eu estou recebendo das pessoas, onde as pessoas vêm, as páginas que eles estão mais. Estes são os últimos sete dias. Então eu posso ver coisas como o tempo naquele dia que a maioria dos usuários estão online, todos os tipos de bondade. Isto não vai ser o curso de análise, está bem? Vamos ficar com a análise a funcionar. Sim, isso vai ser nossa análise super fácil de fazer, super legal informação sobre quem está no seu site. Não fique desapontado no início. Isto pode parecer impressionante. Não é. Ok se cinco pessoas nos sites são muito legais. É um dos maiores sites que já fiz. Mas quando você tem um site pela primeira vez, você será a única pessoa visitando depois sua mãe e depois sua avó. Então amigo do seu irmão. Você pode ter nos primeiros meses você pode ter apenas um par de pessoas. Mas à medida que você cresce seu negócio ou seu site de portfólio, você começa a classificar melhor. Todo esse tipo de bondade. Você vai começar a obter detalhes aqui. Tudo bem, eu estou babando. Vamos passar para o próximo vídeo. 37. Exercício do curso de Dreamweaver: Tudo bem, é hora de exercícios de aula. Portanto, há duas opções a primeira é continuar com este curso e construir-nos ou contactar-nos e sobre nós página. Então coloque o conteúdo lá, vincule-o à página inicial e,em vincule-o à página inicial e, seguida, carregue-o para um host para que eu possa vê-lo ou testá-lo localmente e envie-me capturas de tela que eu gostaria de ver o que você fez com ele. A próxima coisa a fazer é e a maior opção é realmente construir seu próprio portfólio. Estou totalmente feliz por você usar a estrutura que construímos neste curso. Eu só quero que você saia e mude, talvez escolha uma fonte diferente. Você pode usar a mesma fonte. Você pode usar suas próprias imagens de portfólio. Eu adoraria ver isso. Esse é um exercício muito grande eu sei, mas se você é como maioria das pessoas que você tem evitado fazer o seu portfólio este poderia ser o momento perfeito, e eu adoraria vê-lo examiná-lo se você pedir conselhos eu vou te dar alguns que vai ser Construtivo, eu prometo. Tudo bem, vamos para o próximo vídeo.