Design de Web rápido e fácil Criando sites do zero | Laurence Svekis | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Design de Web rápido e fácil Criando sites do zero

teacher avatar Laurence Svekis, Best Selling Course Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

22 aulas (2 h 6 min)
    • 1. Design de Web rápido e fácil Criando sites do zero

      1:46
    • 2. 1 Site da introdução de zero

      2:11
    • 3. Design de Web de 2 recursos de curso

      5:05
    • 4. Design de wireframe de planejamento de 3 sites

      6:49
    • 5. 4 Criar elementos pai estrutura HTML

      6:57
    • 6. 5 Adicionar recursos e conteúdo de espaço reservado manequim

      4:33
    • 7. 6 Aplique estilo aos elementos de nível superior HTML

      5:33
    • 8. Configuração e estilo do Navbar 7

      12:00
    • 9. 8 Criando um envoltório de conteúdo

      2:39
    • 10. 9 Como criar um cabeçalho

      3:05
    • 11. 11 Configurando barra lateral de seções e rodapé

      7:03
    • 12. 12 ajustes e correções CSS

      4:51
    • 13. 13 Adicionar consultas de mídia torná-la responsiva

      7:27
    • 14. 14 Adicionar consultas de mídia adicionais

      4:20
    • 15. 16 Barra de navegação responsiva à configuração

      5:11
    • 16. Menu de configuração para alternância de curso

      3:20
    • 17. 19 Adicionar gatilho de evento jQuery

      8:02
    • 18. 21 Como definir cursos em tempo real

      11:46
    • 19. Ajustes e opções da página

      4:54
    • 20. 24 Criar páginas adicionais para o site

      8:18
    • 21. Formulário de contato de atualização 25

      6:19
    • 22. 26 Dicas de prática e recursos

      3:24
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

383

Estudantes

--

Sobre este curso

Criação de sites do
scratchExplore como criar sites usando HTML, CSS e jQuery.
Guia passo a passo para como os sites são criados do
scratchEverything o que você precisa saber para criar um site a partir do zero.

Aprenda a usar HTML e CSS para criar sites do zero. Este curso
abrange os fundamentos de como usar HTML e CSS juntos para criar
sites.


Saiba como identificar diferentes contêineres de núcleo no seu web design e construir seu código HTML para seu estilo.

Comece planejando seu site, como você deseja que ele pareça. Esse é
o guia para desenvolver sua codificação HTML usando esse modelo para construir a estrutura
HTML. Use HTML para criar a estrutura inicial do site.

Aplique CSS para personalizar a maneira como o site é renderizado nos navegadores de
visitantes. Explore CSS e como estilo do seu site. Adicione
conteúdo de espaço reservado e imagens para ter a sensação de seus sites. Construa um menu de
navegação, estilo sua barra de navegação. Crie seções de conteúdo, desenhe-as em estilo de
site moderno.
Adicione estilo aos seus cabeçalhos e rodapés para torná-los destacados. Configure a área de conteúdo para separar as seções de conteúdo, incluindo
configurar uma barra lateral. Melhore seu site, com ajustes especiais e atualizações ajustando
bem seu código-fonte. Em seguida, use CSS para torná-lo responsivo!

Adicione jQuery à funcionalidade adicionada dinâmica. Como adicionar gatilhos de eventos e interações
personalizadas. Detecte URL atual e defina a classe ativa na
sua navbar.

O código-fonte está
includedTop Recursos e links usados para criar
websitesHD de qualidade

websitesHD por um instrutor com mais de 16 anos de experiência no setor resposta
rápida de fórum
pronta para responder a quaisquer perguntas que você possa
haveDevelop uma base sólida no desenvolvimento da web, este curso foi projetado para
criar seus próprios sites. Explore como criar sites.

Após a conclusão bem-sucedida deste curso, os alunos terão uma
base sólida nos princípios fundamentais do web design e desenvolvimento da web.

Conheça seu professor

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Professor

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Design de Web rápido e fácil Criando sites do zero: tudo o que você precisa saber. Para criar um site do zero, saiba como usar HTML e CSS para criar sites do zero. Este curso aborda os fundamentos sobre como usar HTML e CSS em conjunto. Saiba como identificar diferentes contêineres principais em seu Web design e, em seguida, criar seu HTML chamado Preparando para estilo. Comece planejando seu site. Como você quer que ele se pareça? Isto é um guia. Desenvolva sua codificação HTML usando um blueprint para criar a estrutura HTML. Use HTML para criar a estrutura inicial do site e, em seguida, aplique CSS para personalizar a forma como o site é renderizado aos visitantes. Explore CSS e como parar seu anúncio do site Titular da polícia Conteúdo e imagens Para obter a sensação do seu site, crie seu menu de navegação. Empata o teu bar Navid. Crie seções de conteúdo, estilize-as em sites modernos. Styling. Adicione estilos, cabeçalhos e rodapés Para que eles se destacem, configure sua área de conteúdo. Separe suas seções de conteúdo, incluindo a barra lateral. Melhore seu site com ajustes e atualizações especiais. Ajuste seu código-fonte, então você CSS para torná-lo responsivo, em seguida, em Javascript e Bakery para funcionalidade adicional dinâmica, adicionando gatilhos de eventos e interações personalizadas. O código-fonte está incluído. Principais recursos e links usados para criar sites. Instrução passo a passo de vídeo de qualidade HD ministrada pelo instrutor com mais de 16 anos de experiência na indústria. Resposta rápida do fórum. Pronto para Anderson? Responda a qualquer pergunta. Você pode ter desenvolvido uma base sólida de desenvolvimento Web. Este curso é projetado para que você crie seus próprios sites. Explore como você também pode criar sites. Após a conclusão bem-sucedida deste curso, os alunos terão uma base sólida princípios básicos de Web design e Web developer. 2. 1 Site da introdução de zero: Bem-vindo ao nosso curso introdutório para criar Ah, site completo completo a partir do zero. Meu nome é Lawrence, e estou animado para ter a oportunidade de apresentar este projeto para vocês hoje. Então eu sou um desenvolvedor web há mais de 15 anos e eu tenho trabalhado fortemente com HTML, CSS, JavaScript e J Query em uma base regular. E eu estou sempre espantado com todas as coisas realmente legais que você pode fazer quando você aplica essas tecnologias juntos e você pode criar esses sites e realmente não leva muito tempo para criar um site como este e eu vou mostrar a vocês como fazer isso e Isso tudo vai ser feito do zero. Vamos começar com uma página web em branco e vamos começar a construir toda a estrutura começando criando um web design. Então nós vamos ter que estabelecer um esquema do que queremos que o nosso website se pareça e vamos construir em direção a isso e vamos começar a aplicar com a adição em html, seccionando todos os diferentes contêineres dentro do HTML e, em seguida, fazendo o site totalmente funcional e pronto para ser responsivo para que possamos ver aqui como o site vai olhar em telas de tamanhos diferentes e é totalmente responsivo em dispositivos móveis. Pronta. Nós também vamos adicionar em CSS para aplicar estilo e realmente fazer o conteúdo html do site ganhar vida. Em seguida, vamos terminar o site fora aplicando JavaScript e J Query, a fim criar funcionalidade dinâmica. Então vemos aqui que qualquer página que estivesse em vai ficar destacada e isso está ativo. Então eu vou te mostrar como fazer isso dentro do curso. Além disso, como criar este menu responsivo que é totalmente responsivo. Então, mesmo uma vez aberto, vamos para o tamanho maior que voltar para o nosso menu de tela grande padrão. Então eu vou te mostrar como fazer tudo isso e muito mais. Dentro deste curso, todos os código-fonte e recursos que vou usar dentro do curso também são fornecidos. Então vocês dois podem trabalhar ao lado das lições e criar sua própria versão desse código-fonte diferente com o qual estamos trabalhando dentro do curso. Então, quando você estiver pronto, vamos começar a criar um site do zero 3. Design de Web de 2 recursos de curso: dentro desta lição. Quero fornecer uma visão geral dos recursos de conteúdo que vou usar para criar um site do zero dentro deste curso. Aqui do lado esquerdo, tenho meu editor aberto. Vou usar colchetes. Este é um editor de código aberto gratuito. É da Adobe. Se você já tem um editor, você pode ir em frente e usá-lo. Ou se você está procurando um novo, se você quiser experimentar um para fora do que colchetes é um muito bom. E eu vou usá-lo dentro deste curso. E uma das coisas realmente legais sobre colchetes é esta pré-visualização ao vivo. Então, isso realmente me dá a habilidade. Teoh tem uma visualização ao vivo do conteúdo do site, e podemos vê-lo sendo exibido aqui no lado direito como eu entro na codificação aqui no lado esquerdo para que você possa ver que ele exibe automaticamente. Então esta é uma das características dos colchetes, e eu vou estar utilizando isso dentro do curso. Alguns dos outros recursos têm sido para ser usado dentro do curso Eu vou estar usando arame frame cc. Então este é um aplicativo on-line onde podemos rapidamente fazer um site design um plano de site . Para começar a construir nosso site, vamos precisar inicialmente elaborar um plano de como queremos que nosso site se pareça . Então, neste curso vai ser usando arame cc. E também preciso obter algum texto fictício para ter informações de espaço reservado dentro do meu conteúdo da Web. Então eu vou usar o gerador de texto cego eso. Ele me permite gerar um monte de diferentes tipos de texto apenas padrão fictício que eu posso usar este texto de espaço reservado e também como espaços reservados para imagens de espaço reservado que eu vou estar usando lugar Hold it e Laura um pixel. Assim, estes ar para recursos que você pode usar uma onda, a fim de criar conteúdo titular da polícia e conteúdo de espaço reservado é excelente. Se você não tem seus ativos já prontos quando você está projetando seu site para obter a aparência do seu site usando CSS, então é sempre uma boa idéia ter esse conteúdo de espaço reservado de placa no lugar primeiro. Alguns dos outros recursos que vou usar. Eu vou usar o Google Thoughts s. Então este é um serviço do Google que fontes dot google dot com e há mais de 808 famílias lutadas diferentes para escolher. E eu vou estar selecionando algumas dessas fontes realmente legais, a fim de trazê-las para o nosso projeto Web. Além disso, eu vou estar usando Jake Worry neste curso, então eu vou estar usando uma biblioteca hospedado CDN do Google novamente. E como você pode ver aqui nos desenvolvedores dot google dot com, eles têm uma lista completa de diferentes bibliotecas disponíveis que você pode simplesmente copiar o link para e trazê-lo para o seu projeto Web. Então eu vou trazer o Nerd Worry para o meu projeto Web enquanto estamos passando pelas diferentes lições do curso. E por último, quero indicar que vou usar cromo dentro do curso. E a razão pela qual eu estou usando o Chrome é que ele tem ferramentas de desenvolvedor e ferramentas de desenvolvedor está dentro de cada instalação do chrome, e ele nos dá um monte de informações realmente úteis quando estamos construindo nossos sites. Então ele tem o modelo de caixa aqui sob estilos. Assim, para cada elemento dentro da nossa página Web, podemos ver que tipo de que tipo de estilo está disponível podemos desativar pode re habilitá-lo e assim por diante. Então eles têm um monte de opções aqui para obter uma perspectiva visual de como nosso site se parece e nós podemos ajustar o estilo. Também temos informações sobre o amanhecer, então esse é o modelo do objeto do documento. E isso é renderizado pelo navegador quando ele lê o código da página da Web, e cria o que é chamado de dom e um Dom essencialmente é um detalhamento de todos os diferentes elementos dentro do seu site, e podemos ver aqui que temos todos os propriedades diferentes que estão disponíveis nesses elementos. Então nós temos todos esses gatilhos aqui e esses ar alguns dos gatilhos e algumas das informações que vamos estar acessando através de consultas J. Então, essencialmente, J. Corey nos dá acesso fácil ao que está disponível no amanhecer, e isso é algo que está disponível dentro do chrome, onde podemos obter mais informações sobre nosso conteúdo do nosso site, e, em seguida, podemos utilizar isso dentro do nosso script. Então, novamente, este ar apenas sugeriu recursos que eu vou estar usando dentro do curso. Se você já tem seus recursos favoritos ou se você já tem seus ativos no lugar, você pode ir em frente e usá-los também. Eso este ar apenas sugeriu recursos. Se você está procurando tentar algo, você está se você está olhando para seguir ao longo exatamente o que eu estou usando dentro do curso. 4. Design de wireframe de planejamento de 3 sites: no próximo conjunto de lições, queremos construir todo o site do zero. E queremos que este site seja totalmente responsivo, pronto para dispositivos móveis e pronto para qualquer tela lateral. Então a primeira coisa que eu gosto de fazer é me abrir. Ah, aplicação de arame. Agora, isso pode ser literalmente qualquer coisa que você possa usar. Armação de arame ponto cc. Você poderia usar uma loja de fotos. Você poderia usar um pedaço de papel, uma caneta e um pedaço de lápis de papel, pedaço de papel, o que for melhor para você. Então, isso é apenas uma diretriz. Mas, claro, se você está projetando um site para um cliente ou cliente, então você quer ter certeza de que seus projetos são realmente agradáveis e profissionais. Então eu aconselharia usar algo como loja de fotos para realmente ilustrar o que você vai estar projetando para essa planta. Então, como este vai ser um curso na Web, eu vou apenas fazer um esboço rápido de como eu quero apresentar o conteúdo. E em html, eu geralmente gosto de apresentar o conteúdo em diferentes seções. Então maneira que eu penso sobre estrutura HTML é o que são as diferentes seções de conteúdo que eu vou ter representado dentro da minha tela da Web. Então a primeira coisa que eu queria adicionar é que eu quero ter uma barra de navegação por todo o topo aqui. Quero ter apenas uma barra de navegação simples. Vamos fazer isso primeiro. Então eu vou desenhar algo bem no topo aqui e eu vou transformá-lo em apenas um espaço reservado. Eso Temos uma forma retangular aqui e, em seguida, dentro da própria forma retangular, eu vou adicionar em todos os meus itens de menu para que possa ter potencialmente vários itens de menu diferentes lá também. É outra área dentro do site. Então, além disso, eu queria ser essencialmente um site de três chamadas. Então, queremos estruturar nosso site de uma forma que possamos representar três colunas principais dentro de nossa página e uma das outras coisas que quando você está projetando o site, Então você tem a navegação e tipicamente você tem sua seção de cabeçalho. Então isso aqui vai representar minha seção de cabeçalho e eu vou tê-lo apenas flutuando lá. Eu não vou ter uma fronteira em torno dele, então ele vai apenas fluir automaticamente para o resto do conteúdo em. Então este aqui em cima. Isso pode ser potencialmente uma cor sombreada, então se destaca um pouco mais e assim por diante. Então talvez possamos até torná-lo preto. Então realmente distingue que esta é uma seção diferente ou recipiente capturado diferente para nosso conteúdo do que o resto do conteúdo. Então, em seguida, eu quero adicionar em colunas diferentes, então eu quero essencialmente ter um site de três colunas em uma tela cheia. Eso, só estou pensando que talvez pudéssemos fazer. Normalmente, poderíamos diar várias colunas diferentes. Podemos dimensioná-los. O que realmente funciona melhor para nós. Mas neste caso, talvez façamos todos da mesma forma ou enfraquecemos devido ao mesmo um pouco menor, então poderíamos fazer algo como esta seção poderia potencialmente ser, uh, 35 ou 36%. Isso poderia ser também 36% e então podemos ter um menor. Então isso conservar tipo de como um menu lateral e também uma seção de conteúdo. Então vamos dar um lado nisso também, e talvez flutuar este para o centro, centralizar isso um pouco. E, claro, vamos ajustar o espaçamento à medida que o desenvolvemos. O site eso. Finalmente, a última parte da estrutura do nosso site vamos adicionar em uma área de rodapé para que esta área de rodapé possa conter informações de direitos autorais ou apenas informações cruciais sobre o contato do site e assim por diante. Então eu vou apenas adicionar isso lá na parte inferior, e eu vou sombreá-lo um pouco mais tarde do que a barra de navegação para que novamente ele não aguente e então eu vou ter conteúdo lá no meio e assim por diante. É outra coisa que eu queria adicionar é que eu quero amarrado no menu de navegação real. Então eu vou fazer isso aqui, e isso vai representar todo o menu de navegação. Então qualquer Clinton que eu representei e lá dentro e isso provavelmente não vai aguentar, nós provavelmente não vamos tê-lo destacado, mas nós vamos ter algum texto lá, então isso pode ser um pouco mais tarde por agora, ou poderíamos representar formas diferentes para cada um dos itens do menu de navegação. Então isso é novamente até os diferentes tipos de projetos que podemos querer trabalhar com então podemos ter algo onde temos cada item aqui que podemos pagar estado. Então, em nosso menu, nós provavelmente poderíamos usar talvez quatro páginas principais diferentes. Então eu vou simplesmente pagar estas páginas maldosas. Então isso representaria a barra de navegação real. Ok, Faz um esboço áspero da maneira que queremos que o nosso conteúdo apresentado na tela inteira agora porque queremos torná-lo responsivo, podemos. Podemos querer olhar para diferentes designs para diferentes tamanhos de tela. Então vamos nos mover essencialmente, a barra de navegação ficará no topo, e quando cair, teremos aquele ícone de hambúrguer onde temos as 33 linhas retas e isso representará o menu. E então teremos o menu vindo aqui como um menu vertical, então cada item vai ocupar o completo com que está disponível com. Nós também vamos ter que empilhar alguns desses itens aqui algumas dessas áreas de conteúdo. Então, talvez quando reduzirmos para cerca de 800 fotos, podemos soltar essa terceira área de conteúdo abaixo dessas duas e ter uma em áreas de conteúdo. E então quando realmente encolhemos para a tela do celular. Nós vamos ter essas áreas de conteúdo representando total com. Então, essencialmente, ele vai empilhar um em cima do outro e eles vão representar cheio com e essas áreas de conteúdo de ar que vamos utilizar em todo o site eso Eles vão ser essencialmente áreas onde nós vamos ter que colocar alguns tipo de conteúdo , e ele vai fazer ter que fazer sentido dentro de cada página. Claro, podemos fazer alguns ajustes para isso onde podemos ter talvez duas dessas colunas se juntarem e ainda ter o 3º 1 para um formulário de contato. O Eso. Vamos desenvolver todo o processo dentro do próximo conjunto de lições, usando este como nosso guia padrão para desenvolver o site. Então, a próxima lição vamos começar a digitar e criar nosso código HTML e preparar para adicionar CSS mais tarde dentro das lições 5. 4 Criar elementos pai estrutura HTML: na lição anterior, fizemos um esboço rápido de como queremos que nosso dedo do pé do site se pareça. Então é assim que nosso site inicial vai se parecer. E, claro, ele vai parecer diferente em telas de sites diferentes, e nós vamos adicionar isso em um ponto mais tarde. Então, queremos começar olhando para dar uma olhada em nosso design e realmente ter uma idéia melhor de todos os diferentes contêineres e o que eu quero dizer contêineres. É um conjunto de elementos diferentes que se movem juntos sempre que o redimensionamento do site é. Então isto é olhar para isto. Podemos ver imediatamente que temos um aqui em cima, que é uma navegação também, que vai ser o cabeçalho 3, que é a primeira Seção 4, que é a segunda Seção 5, que é a terceira seção e seis, que é o rodapé. Portanto, temos essencialmente seis áreas de conteúdo principais dentro do nosso site. Então vamos projetar isso e criar isso dentro do nosso HTML. E uma coisa que eu queria notar é que eu quero manter a barra de navegação totalmente através do tar com do site. Então isso realmente vai ficar fora das principais áreas de contêiner. Então, essencialmente, precisamos projetar nosso site do corpo para baixo e vamos ter que principais áreas de conteúdo. Então o 1º 1 só vai segurar a barra de navegação aqui no topo. E vai funcionar independentemente do resto do site, que vai ser limitado em largura e vai ter um fixo com e então isso vai conter o outro as outras cinco seções para outros cinco contêineres. Então vamos ter que criar contêineres. Então vamos construí-los em nosso site s. Então temos nosso editor aberto aqui. Nós vinculamos a uma folha de estilos, então estamos todos prontos para usar nosso modelo padrão e agora podemos começar a adicionar em nosso código HTML . Então a primeira coisa que eu quero fazer é adicionar em uma seção para a barra de navegação e, em seguida, em seguida, em seguida, dentro. Aqui é onde vamos adicionar todos os itens de navegação. Então nós vamos ter um monte de itens de lista aqui, então um nordeste e listar itens e dentro de cada item de lista, eu não tenho um h ref Teoh Uma página diferente. Então eu vou fazer indexar html porque vai ser a nossa primeira página que vamos começar com. E este seria o nosso lar. O primeiro item dentro da lista vai ser apenas ir para casa e, em seguida, adicionamos todos os outros itens de lista que estamos adicionando em vai ser outro link dentro da nossa barra de navegação indo para uma página diferente. Normalmente em um site, você vai ter uma seção sobre mim. Então nós vamos apenas criar que esse link lá último é geralmente um contato, e eu estou apenas mantendo-o dentro do mesmo formato. Então eu tenho o nome da página lá, e ele está ligando para o nome aqui s O Este pode ser. Se você está vendendo produtos ou serviços, você pode ter algumas informações sobre os serviços que você oferece. O Eso vai adicionar aquele ali também? Então este é um site de informações sobre serviços para uma pequena empresa típica. Então aqui temos uma navegação e em seguida precisamos criar o outro contêiner pai principal s Oh, isso vai ser uma div, e eu vou dar-lhe um I D. de rapper Essencialmente, este é o lugar onde todos os meus conteúdo principal vai sentar-se. E vamos colocar todas essas seções principais aqui também. A primeira seção que estamos olhando é um cabeçalho. E então dentro desse cabeçalho, eu vou ter talvez em cada um lá e ele terá o nome da empresa e nós podemos até fazer talvez algo sob o slogan deles ou algo assim, dependendo de como queremos representá-lo. Então poderíamos fazer um pequeno elemento aqui. E então coloque um slogan aqui para debaixo do nome da empresa eso A próxima seção que temos , vamos criar seções que fazemos quando olharmos para o nosso design. Então temos o cabeçalho. Temos o valete. Temos todo o pedido nos itens da lista encomendados. Então agora precisamos criar três áreas médias de contêiner. Eso observando que este vai ser a diferença. Nós vamos ter uma duas seções e nós vamos ter de um lado. Então, usando html cinco e com HTML cinco agora, temos semântica para nossos nomes de elementos. Eso chamamos de seções em vez de usar dibs geralmente ao longo antes html cinco estavam usando dibs repetidamente Então, essencialmente, esses novos elementos tags vão ter um nome para representar Que tipo de conteúdo vai ser representado à vista. Então isso pode ser assim, por enquanto, eu vou colocar na primeira seção e então nós vamos adicionar em algum conteúdo oficial da polícia também . Então, uma seção, duas seções. Então esta seria a nossa segunda seção, e então aqui vamos criar um tipo diferente de tag. Então isso vai ser conhecido como fora, porque isso é para barras laterais. E esta última seção essencialmente vai funcionar como uma barra lateral. Então talvez possamos chamá-lo de barra lateral para que possamos distingui-lo das diferentes seções de conteúdo do nosso site. E então aqui dentro vamos ter um monte de conteúdo. E então, por último, olhando para este eso qual estamos perdendo? Temos a cabeça dela. Temos seção de um lado para a barra lateral, e então esta área aqui é o rodapé e observe que está contido dentro dessa média são operacionais. Então vamos manter isso dentro de lá também. Então rodapé E então aqui nós teríamos algumas informações típicas de direitos autorais e assim por diante, então copiar direitos. Então ele é salvo e ver como ele fica agora quando atualizamos nossa página. Então este é o colchetes, viver você aqui e, essencialmente, é alguma coisa que eu estou digitando aqui. Está aparecendo aqui dentro da área de exibição. Mas nós tivemos que atualizá-lo, a fim de nos livrar do resto do conteúdo que estava sentado lá. Então agora, quando você olha para ele, ele realmente não se parece exatamente com um site. Mas nós realmente temos algo sendo apresentado dentro da área de visão. Então, a próxima lição vamos continuar a construir este oito e prepará-lo e começar a adicionar em nosso CSS para anexar estilo a ele para realmente dar vida a este site. Então tudo isso está chegando no próximo conjunto de lições. 6. 5 Adicionar recursos e conteúdo de espaço reservado manequim: esta lição. Eu queria adicionar em algum conteúdo de espaço reservado e realmente começar a ter a nossa estrutura do site realmente sair de nós para que nós precisamos obter algum texto padrão em. Há um texto de espaço reservado. Então eu vou obter algum texto gerado aqui no gerador de texto cego nós. Vamos apenas ver. Talvez nós vamos fazer alguns parágrafos diferentes aqui e apenas gerou algum texto. Então selecione todas as cópias para a área de transferência e voltando para o nosso HTML. E aqui eu vou apenas colocá-la aqui, e eu vou fazer a mesma coisa. Então talvez tenhamos um pouco mais curto um pouco mais. Sua cópia para clipe para frente sobre isso vai me dar algum conteúdo dentro da minha segunda seção na minha primeira seção e talvez a última seção também. E a barra lateral normalmente pode ter algumas imagens. Eso pode ter algum texto, e podemos ter algumas imagens também. Então eu vou usar lugar, segurar lugar, segurar ponto com, e eu vou adicionar uma imagem aqui dentro de dois parágrafos. Vamos dar uma olhada no nosso site agora e podemos ver agora que é com apenas adicionando e não conteúdo lá. Na verdade, parece algo que parece um pouco diferente do que inicialmente fazia sem esse conteúdo. Assim, podemos continuar a adicionar conteúdo adicional conforme necessário. E eu também vou ligar para as diferentes bibliotecas. Então, uma das coisas que eu queria adicionar aqui é eu quero adicionar no ícone. Então eu vou criar um dar separado e eu vou dar a ele a classe do meu ícone. Meu menu eu poderia chamá-lo de “S” Então é isso que vai aparecer sempre que encolhermos o menu de navegação. Então, vamos acrescentar isto. Nós vamos cuidar de tudo isso dentro do estilo. Eso eu queria usar um recurso chamado fonte impressionante. E a maneira como fonte impressionante funciona é que lhe dá acesso a uma água ícones realmente legal vislumbre sobre e você pode realmente trazê-los para seus projetos web. Então nós só temos que fazer um link para fora para a biblioteca no HTML. Então eu vou apenas fazer isso aqui e apenas parar antes do meu CSS para o meu site CSS em seu número de diferentes maneiras de ligar para fora para fonte impressionante. E agora eu posso trazer este FAA barras, que é típico no indicador de um menu suspenso. Então eu posso adicionar esse aqui e agora vamos dar uma olhada em nosso site não vai ver como ele se parece. Então agora temos o nosso indicador de navegação de menu. Então a idéia é que vamos esconder nosso menu sempre que estamos em uma tela menor e esconder o menu de navegação ou o meu ícone quando estamos na tela maior e fazê-lo funcionar dentro dessa maneira. Então lugar de versa também. Então agora vamos para eso uma outra biblioteca que precisamos adicionar em que devemos cuidar também. E esta é a Biblioteca J. Corey. Então, vamos adicionar em nosso javascript e assim por diante, e eu mostro a vocês como criar alguma funcionalidade real com seu site, incluindo adicionar em que qualquer página em que estamos, detectando a página da Web em que estamos e definindo um elemento ativo e assim por diante. Então isso vai ser feito através de consulta G e essencialmente o que consulta G é É uma biblioteca JavaScript , e tem um monte de funcionalidade realmente agradável que torna muito fácil para criar JavaScript ou Jake preocupação que vai interagir com os elementos da página da Web. Então agora nós basicamente configuramos a estrutura e nós vamos ter que ser nós vamos como nós vamos através com o CSS, vamos adicionar em algumas classes e eu ds e identificar os diferentes elementos dentro da nossa estrutura HTML e um Zwick ponto de construção devido. Na verdade, vai começar a parecer mais e mais como um site. Então, essencialmente, é aqui que estamos agora. Temos que ser seis estrutura aqui e estamos prontos para ir com adição e CSS Então isso está chegando no próximo conjunto de lições. 7. 6 Aplique estilo aos elementos de nível superior HTML: Nós já vinculamos CSS estilo dos EUA ao nosso arquivo CSS estilo. Então, agora o que estamos digitando aqui, podemos ver automaticamente que ele vai tomar forma dentro da nossa área de exibição. Então eu só vi que eu adicionei em uma cor de fundo e imediatamente porque este arquivo está vinculado e colchetes está nos mostrando vivos. Você do que está acontecendo? Nossa página web e nós vamos adicionar em todos os nossos CSS agora. E geralmente a maneira que eu gosto de começar com CSS é começar com o primeiro elemento que encontrar eso. Primeiro de tudo que estou encontrando aqui é o corpo, e este é um ótimo lugar para definir sua cor de fundo. Então, se você estiver usando uma cor de fundo, você tem uma imagem de fundo que deseja usar e assim por diante. Este é o lugar para realmente adicionar isso e configurar isso. Então eu vou fazer um tipo de fundo branco. E talvez tenhamos consumido o dedo do pé da fonte também ser preto. E então desta forma, se mudarmos alguma coisa Teoh uma cor preta, então ele deve ficar um pouco do resto do texto. Então isso nos dá a habilidade, Teoh, fazer algum conteúdo adicional que se destaca. Essa é uma das coisas que eu não fiz dentro desses seção padrão é que eu fiz foram adicionados em alguns hiperlinks e hiperlinks, como sabemos, como sabemos, são parte essencial de qualquer site eso tipicamente em sites, você está terá hiperlinks em todo o seu conteúdo e vários lugares diferentes onde os hiperlinks podem estar sentados. Então eu estou apenas adicionando alguns links de espaço reservado e apenas para a direita, adicionando alguns desses conteúdos aleatórios para que nós tenhamos alguns hiperlinks dentro do nosso texto diferente do que está dentro da nossa barra de navegação. Porque nós vamos estar styling que é o que isso não vai mais afetar. É assim que nós vamos direto sobre o estilo do texto âncora, mas por enquanto, então nós temos alguns hiperlinks dentro do corpo e nós queremos cuidar deles também aqui , bem , no topo. Eso Normalmente, para sites modernos, você não vê muito do sublinhado que é feito por padrão com HTML. É um monte desses elementos têm algumas propriedades padrão e para o texto âncora, uma das propriedades padrão como uma decoração de texto. E então eu geralmente gosto de remover essa ajuda e adicionar isso sempre que eles ficam pairados sobre. Eu também gosto de atualizar a cor para que a cor dos links e eu costumo escolher algo que vai junto com o esquema de cores. Mas ainda não decidimos o esquema de cores, então vou fazer algo de cor azulada, e vamos deixar assim. E, claro, sempre que você estiver projetando, apenas certifique-se de que os hiperlinks, todas as cores de fundo e tudo combina com seu esquema de cores. E geralmente quando não tenho certeza sobre quais cores vou usar, eu uso um esquema de grande escala. E assim eu sei que os diferentes tons representam cores diferentes. E quando eu faço, quando eu escolher o esquema de cores que eu posso realmente facilmente fazer essas atualizações. Então vamos adicionar em pairar. Então, sempre que ele está pairado, então decoração de texto e nós vamos adicionar de volta no subjacente. Assim, sempre que ele fica pairado, ele fica subjacente porque os usuários geralmente estão esperando que algo aconteça sempre que você está pairando sobre seus hiperlinks. Teoh realmente Teoh para que eles possam entender que estes realmente são destinados a ser hiperlinks e também às vezes você pode querer atualizar a cor também. Então você pode querer ter uma cor mais escura ou uma cor mais clara, dependendo de qual é o seu esquema de cores. Então vemos que agora estes qualquer usuário que entra deve ser capaz de entender que estes ar agora link e eles se destacam do resto do texto eso estamos prontos para continuar a construir nosso site. Uma outra coisa que eu gosto de acrescentar é que as atualizações para imagens são, como podemos ver aqui. Então esta imagem aqui em baixo , pendura fora do espaço disponível. E sempre que tornamos nosso site responsivo, queremos ter certeza de que nossas imagens são capazes de redimensionar. Então é aqui que eu gosto de definir imagens como batidas com e dar-lhes um máximo com de 100% e a maneira que Max com difere de apenas com Então, qual é a designação padrão dos sinais? Então, se eu apenas mudar este dedo com este 3 50 por 1 50 leva o total disponível com mas Max com obras dentro dos padrões dessa imagem. Então, com Max com, nós só vamos subir até um máximo de 3 50 E isso impede que as imagens sejam pixeladas, distorcidas, desfocadas I, desfocadas I, e também permite que elas redimensionem quando você redimensiona sua página da Web. Então eu só vou mostrar a vocês agora que esta web esta imagem, mesmo que seja de 350 por 150 quando nós a encolhemos e não temos o espaço disponível, ela simplesmente vai e reverte para 100%. Então, a próxima lição vamos mergulhar mais fundo em começar a configurar nossa estrutura. Nós vamos trabalhar com a barra de navegação deles e realmente construir isso para fazer parecer um site real. Então tudo isso está chegando no próximo conjunto de lições. 8. Configuração e estilo do Navbar 7: nesta lição. Quero cobrir como transformar uma lista Norden em uma barra de navegação. Nós também vamos esconder este ícone de poder e tê-lo não aparecer nas páginas maiores porque é irrelevante aqui porque nosso menu já está aberto e visível. Temos imóveis suficientes em nossa tela da Web para exibir nossos itens de menu. Então vamos dar uma olhada no nosso menu de navegação e construir o então Primeiro de tudo, quando olhamos para ele, é em um nordeste, e isso não se parece nada com um menu de navegação típico, como você poderia esperar, dedo do pé. Olha, eu só vou adicionar um pouco de espaçamento aqui para que minha página automaticamente quando eu atualizá-lo, não vá até o fim, e nós podemos ver que a coisa CSS real e estar aplicando mais centrado dentro da página. Eso Now, vamos adicionar um pouco de estilo a isso, e normalmente você pode estar usando valete em um número de lugares dentro do seu site. Eso Normalmente eu gosto de aplicar algum tipo de identificação ou seu eso você pode usar o seu tem. Você pode usar uma idéia que você pode usar uma classe e, como sabemos com I DS, portanto, elementos particulares e para classes, você pode usá-los uma e outra vez em vários elementos. Eso De qualquer forma, o que funciona melhor para você, você pode adicionar isso em uma atualização seu estilo. Então vamos dar uma olhada nisso. E primeiro de tudo, vamos identificar que são valete, e vamos dar em Idea of Valete Bar. Então isso vai nos permitir identificar e distinguir isso de qualquer outro agora que estamos usando dentro de nossas páginas da Web. Então vamos abrir nosso CSS. E a partir daqui podemos começar a selecionar um estilo de atualização dentro não são agora barra, então vamos fazer agora muito identificá-lo. Nós vamos selecionar qualquer uma lista ordenada que está dentro da nossa barra agora, e vamos aplicar alguns dedos estilo que. Então a primeira coisa que queremos fazer com a lista ordenada pela ONU é o que mudou o tipo de lista diferente para o estilo de lista. Então nós temos uma opção aqui dentro CSS Teoh atualizar os diferentes estilos de lista, e eu quero apenas removê-lo aqueles círculos lá há para que possamos facilmente começar a construir isso para fora e torná-lo realmente parecido com uma barra de navegação. Há também alguns valores padrão aqui para a margem. Então eu quero me livrar desse padrão para envasar tão solto. E só para ter certeza e vemos uma vez que nos livramos desses padrões que somos puxados todo o caminho para o lado esquerdo, eu também quero adicionar em excesso. Então, isso é se qualquer conteúdo flui sobre a borda. Quero escondê-lo. Então, se eu tenho uma imagem que flui sobre a borda e assim por diante, eu não quero ter que torná-la visível. Quero definir uma cor de fundo. Então isso é típico de quê? A forma como esboçamos fez a nossa página Web. Então vamos dar uma olhada rápida nisso. Originalmente eu tinha em uma sombra muito escura eso Nós vamos manter isso na linha também, e eu poderia até mesmo ir com a cor preta se eu quisesse. Então eu vou adicionar isso. E também quero que esta barra de navegação fique em cima do resto do conteúdo, e é aqui que usamos esse índice. Assim disse Índice é uma camada de camada de distância do seu conteúdo da página da Web. Então, o índice Zed sempre se sentará em cima do resto do conteúdo. Então, se fizermos esta barra de navegação flutuar ou fazer a sua posição absoluta, vai substituir o resto o conteúdo que vai passar sobre ela. Portanto, nunca vamos perder nossa barra de navegação e mostrá-la abaixo de algum lugar conteúdo para algumas áreas diferentes, porque queremos sempre que o usuário seja capaz de acessar este elemento específico dentro de nossa página da Web. Então agora podemos continuar a construir isso, e podemos identificar itens de lista dentro do agora até listar itens. Então o que eu quero fazer com todos os itens da lista dentro do nav longe, Vamos flutuá-los para a esquerda. E vemos que quando flutuamos para a esquerda, obtemos automaticamente a versão horizontal da nossa barra de navegação. E também queremos adicionar algum estilo adicional a estes porque vemos que há realmente perto juntos, e na verdade não parece muito bom. Então precisamos adicionar um pouco de estilo para esses hiperlinks que também queremos adicionar em algumas ações diferentes e diferentes sempre que passarmos o mouse sobre eles. E nós vamos cuidar disso porque isso fica no nível da âncora. Então vamos criar isso e uma âncora, e queremos que a exibição dele seja em bloco de linha. Então isso está em blocos de linha. Essencialmente, ele vai ocupar, ah, espaçamento de blocos do disponível ou, devo dizer, a quantidade total de espaço que é necessário para o conteúdo dentro do elemento. Então sabemos que se formos com o Block, então vamos. Iria ocupar um espaço maior. Mas o bloco em linha é tipicamente definido para elementos que estão em linha, e isso é realmente vai ser mais visível quando definimos algum preenchimento e assim por diante. Então, quando fazemos estofamento, Weaken disse que talvez cerca de 10 fotos de estofamento no topo e para cada um. Talvez pudéssemos fazer cinco escolhas, então temos algum espaçamento em torno dele. Eso, esquerda e direita são cinco picaretas. Falar fundo é 10 picaretas. Vamos atualizar alguns Vamos. Primeiro de tudo, vamos remover esse eso de decoração de texto, no caso de não termos removido isso aqui. Mas isso é só por precaução. Ah, muitas vezes é um É uma boa idéia para Riyadh estas propriedades, este estilo propriedades porque no caso de você está atualizando seu site e você decidir OK, bem, bem, agora você quer ter decoração de texto sob o Hiperligações? Bem, nós queremos definir. Certifique-se de que os hiperlinks da barra de valete parecem um valete são, então eu queria adicionar isso também. Podemos definir um tamanho de fonte, então vamos fazer um e m. E também vamos atualizar a cor do eso. Eu realmente queria se destacar um pouco mais Eso enfraquecer fazer Alice Azul, que é uma cor branca ish peso azul cor. Talvez também queremos ter certeza de que nosso texto está alinhado dentro do centro do espaço disponível com o elemento. Então nós vamos linha central, mesmo que eu acho que por padrão lá, ele está centrado de qualquer maneira porque estamos usando em bloco de linha. Mas é sempre uma boa ideia. Em caso de dúvida, toe adicionar em que propriedade e apenas certifique-se de que ele não está fazendo algo que você pode não esperar que ele faça. Então agora olhando para isso parece uma barra de navegação, mas não temos essa interação configurada e pronta para ir ainda. Então, sempre que estamos revisando esses elementos, nada está acontecendo. E normalmente dentro de uma barra de navegação, você esperaria que algo estivesse acontecendo. E aqui é onde os pseudo elementos de pairar ou pseudo-classe de pairar e sempre que estamos realmente tomando essa ação, então ele dispara as propriedades para isso, o quê? Para este estilo. Então, sempre que passarmos sobre ele e eu sei que eu disse que ia ficar com a escala de cinza, mas eu vou adicionar um pouco de cor aqui sempre que estamos pairando sobre ele s para que possamos ver que algo está realmente acontecendo aqui. E está realmente se destacando também, talvez queiramos até atualizar a cor, então torná-la uma cor escura. Então eu acho que eu estou indo para mais de um tema de Halloween. Aqui está então nós estamos fazendo como uma cor laranja coral sempre que estamos pairando sobre e eu tenho zoom em. Então, se eu voltar para 100%, ele está começando a parecer cada vez mais como uma barra de navegação real . E isso é algo que você normalmente esperaria quando você está chegando até o site. E isso é algo típico com o qual você estaria esperando para interagir dentro do seu site. Então uma outra coisa que eu queria me livrar dentro desta lição e que é que este aqui, este meu ícone para que eu possa me livrar dele de várias maneiras. Mas eu tenho uma aula para isso. Então eu vou simplesmente acessar isso através da aula. E eu vou fazer uma exibição. Nenhum. Antes de fazer isso, Will, quero definir a cor da fonte. Então eu quero definir uma cor de fundo também. Então eu queria estar em linha com o fundo do valete rul. Então esses elementos diferentes de ar e eu poderia realmente provavelmente apenas colocar a cor de fundo na barra agora. Talvez seja uma ideia melhor. Então nós não estamos realmente repetindo o que estamos fazendo e uma olhada rápida aqui só para ter certeza que não temos nada pendente. E aqui vamos atualizar nossa cor deste para torná-lo o mesmo que foi configurado nossas âncoras lá . Então agora nós temos branco e provavelmente queremos fazer isso maior. Então tamanho da fonte. Eu acho que nós tivemos uma opção dentro lutou incrível. Teoh, obter ícones de tamanho maior Oh, sim, nós temos uma opção aqui para atualizar os diferentes tamanhos. Vou abrir rapidamente o editor aqui e posso ver um seis. Então eu acho que isso realmente é definir os tamanhos diferentes. Alguns nós descemos aqui, este é F cinco s. Então isso nos dá que algumas opções para redimensionar. Nós podemos simplesmente adicionar em apenas como ele é adicionado em para que nós poderíamos fazer f A para que isso deve torná-lo maior. Vamos refrescá-lo e não funciona. Oh, eu tenho os pensamentos de sentar lá. É provavelmente por isso que é tão vamos realmente adicioná-lo como tamanho da fonte então tamanho da fonte e talvez fazer 1,5 p. M. E se livrar disso para que possamos controlá-lo de várias maneiras. Podemos controlá-lo através do nosso estilo. E eu acho que havia alguns estilos padrão que são incorporados com fonte impressionante também. Então, de qualquer maneira, você pode obter esse menu de navegação até o tamanho que você está procurando fazendo um tamanho de fonte ou atualizando dentro do CSS, adicionando uma classe a ele. Vamos adicionar um pouco de estofamento inchado. Então, você sabe, adicione 12. Ou eu poderia apenas fazer 10 todo o caminho em torno de 10 picaretas todo o caminho ao redor. Então ele não está sentado até a borda lá, então ele tem um pouco de preenchimento no espaço em torno dele. E finalmente, agora vamos escondê-lo longe de nossa visão, e vamos olhar para ele novamente quando estamos construindo e adicionando em nossa consulta G, e vamos alternar a exibição de exibição para que possamos ver isso quando abrirmos o menu dela e assim por diante. Então será acionável para abrir o menu dela. Mas, por enquanto, vamos trabalhar no nosso resto do nosso HTML e CSS para realmente fazer o nosso site funcionar, e então vamos adicionar capacidade de resposta nas lições posteriores 9. 8 Criando um envoltório de conteúdo: medida que descemos em nossa estrutura HTML, seguir encontramos rapper. Então o rapper é um dos nossos elementos de nível de conversação aqui, e este foi projetado para conter um monte de conteúdo dentro dele. Um monte de seções dentro dele. E este eu realmente quero definir Max padrão para ele. Eu não quero que ele seja fluido, e eu não quero que ele seja capaz de expandir todo o caminho para fora S o. Eu quero diminuir a nossa página web porque desta forma, nós podemos realmente ver onde o nosso conteúdo está sentado. Então eu o encolhi um pouco, e agora podemos ver os diferentes efeitos que vão acontecer. Então eu vou definir uma largura máxima. Assim como com as imagens, eu não defini uma largura máxima de 10 80 e apenas atualizei isso. Então vemos que agora que eu defini uma largura máxima de 10 80 talvez também vai fazer uma borda rápida em torno dele para que possamos realmente ver onde esse conteúdo está sentado. Então eu nem tive que encolher tanto e fazer um toque maior para 11 80 . Então agora vemos que esta é a nossa área de rapper malvado, e é que vemos que está sendo puxado para o lado esquerdo e este é outro padrão . Eso, vamos cuidar disso. E outra coisa que você deve ter notado é que nós precisamos mudar para baixo porque eu não quero isso. Eu não os quero. Eu quero deixar algum espaçamento para este menu também. Então eu quero uma posição relativa, e eu quero movê-lo para baixo a partir do topo. Assim, relativo e absoluto dar-lhe a capacidade de mover o posicionamento para baixo. Então eu quero fazer o que eu quero fazer é movê-lo ligeiramente para baixo para que eu tenha algum espaço lá dentro da barra agora. Isso pode ser um pouco demais, mas veremos. Vamos actualizar isso. E, em seguida, vamos olhar para centralizar isso pode ser feito através de margens e vamos definir a margem superior e inferior para zero e esquerda e direita. Vamos definir o dedo do pé automático, então isso centrará automaticamente qualquer conteúdo, quaisquer elementos. Mas apenas adicionando em que auto, então Agora temos todo o nosso posicionamento, seu de nosso conteúdo principal e agora podemos construí-lo todas as seções diferentes dentro desse conteúdo. Então, a próxima lição vamos fazer isso e vamos configurar essencialmente cabeçalho as três colunas e rodapé. Então, isso está chegando na próxima das lições. 10. 9 Como criar um cabeçalho: movendo-se para baixo do rapper. A próxima área principal de seção de conteúdo que vemos é Header Então isso vai ocupar um espaçamento completo disponível que está disponível dentro desse elemento. E agora vamos identificá-lo. Temos maneiras diferentes de identificar todos esses espaços diferentes e vamos precisar de uma maneira de separar todas as seções diferentes. Eso precisamos dar alguns identificadores aqui para a seção então eu vou adicionar na primeira seção ou isso pode ser mau E então o 2º 1 pode ser apenas o segundo para que possamos identificar todas essas seções diferentes porque eu tenho que seção elementos aqui que é distinguido entre eles e este pode ser o segundo. Então agora, olhando para isso, eu tenho rapper. Então o pai é rapper. Eu tenho uma tag de cabeçalho dentro desse rapper e talvez em uma cópia, isso remove-o de lá e então podemos realmente ver qual deles estamos trabalhando. Então, vemos que estamos trabalhando nessa seção de cabeçalho e este é o lugar onde nós iria definir todas as nossas informações de cabeçalho. Eso Vamos definir uma altura padrão para ele s Oh, talvez fazer 120 escolhas. Isso nos dá espaçamento suficiente e adicionar alguns vasos lá. Então as palavras não estão apenas penduradas lá, bem na borda. Então eu vou fazer talvez nós pudéssemos fazer uma parte superior e inferior de 10 picaretas e nós podemos fazer uma esquerda e direita de 20 picaretas pode ver como isso parece, então atualizá-lo. E então agora nós temos algo que parece mais da ordem de uma área de cabeçalho, e eu vou remover essa borda porque eles não querem necessariamente ter uma borda lá nós podemos querer até mesmo incluir uma cor de fundo eso Isso pode ser realmente uma luz sombra, por isso distingue o nosso cabeçalho do resto do conteúdo e talvez não tão tarde, Então torná-lo um toque mais escuro para que possamos realmente distinguir onde ele está localizado. Eu também realmente gosto de usar fronteira raio eso que nós não somos tão boxy e isso nos dá ao redor . Bordas estilo como você pode ver aqui podemos fazer esquerda, direita, direita, inferior superior e assim por diante. Mas eu tenho uma volta de todas as fronteiras. Então talvez fazer 20 picaretas arredondamento ou 1 da manhã arredondamento Então vamos ver como isso se parece. Eso ligeiro arredondamento dos cantos. E uma vez que nos livramos disso, parece que agora temos uma área de cabeçalho clara e podemos começar a trabalhar nas diferentes seções. E nós somos Nós temos um peso identificá-los, então nós não precisamos especificar que eles dentro dos rappers principais. Então nós temos uma área principal, então eu vou colocar essa fronteira dentro de seus s para que possamos ver em qual deles estamos trabalhando. Então, a próxima lição, vamos configurar essa seção de fronteira média. 11. 11 Configurando barra lateral de seções e rodapé: Então, a última lição que analisamos, como podemos configurar um cabeçalho claro. E agora vamos olhar para configurar esta seção significa. Vamos voltar, Teoh Original design rapidamente e dar uma olhada nisso. Então temos o nosso cabeçalho lá. Então isso é aparecer. E nós temos nossa primeira seção são segunda seção e nossa barra lateral. Então vemos que agora eles estão todos alinhados. E isso é muito parecido com o que está acontecendo aqui com o menu, porque cada um desses diferentes elementos está se alinhando à esquerda dos outros elementos assim ou à direita do para o elemento na frente dele. E eles estão se alinhando bem. E podemos pegar algumas dicas a partir daí e configurar todas as nossas seções diferentes dentro desse mesmo tipo de formato usando float. Então, vamos abrir a nossa primeira área de conteúdo e ter main por isso já adicionou nossas fronteiras. Podemos ver como é. Agora vamos flutuar para a esquerda e quando você estiver usando float, então eu vou mostrar o que acontece agora para vermos que ele está realmente flutuando. É só ocupar espaço disponível de que precisa e então o que está acontecendo? Essa segunda seção está flutuando ao lado dela. Então isso não é o ideal. Precisamos ser capazes de definir e largura dele. Precisamos ser capazes de adicionar algum preenchimento para que as palavras não fiquem penduradas na borda. Então vamos adicionar em alguns potting cinco picaretas potting e atualizá-lo. Então, a formulação está pagando um pouco melhor, mas ainda precisamos ser capazes de identificá-lo com esposas. E fazer isso vai realmente nos permitir construir este site. É para que possamos olhar para isso e aproximadamente estimar que estão com vai ser o talvez 38% e ver como isso parece. Então, agora que estamos ocupando 38% s Oh, esta é aproximadamente a quantidade de espaço que vamos alocar para esta seção em particular . Então agora podemos fazer o mesmo tipo de coisa para a próxima seção, e você sempre precisa Teoh estar pronto para realmente calcular todas essas seções diferentes porque isso é algo que quando estamos adicionando e batendo leitura e bordas, Então Isto está a ocupar parte dos 100% que são atribuídos a esse elemento ou que esse contentor em particular esteja sempre atento ao facto de que todos estes contam na nossa totalidade com eso. Sempre que estamos fazendo nossos cálculos, certifique-se de que não estamos nós não estamos sobrepondo e que estamos apenas usando um máximo de 100% . Então agora temos nossa segunda seção, então tudo parece muito bom. E agora, sempre que adicionarmos na nossa barra lateral, então eu vou fazer este como um rapper, um lado que eu poderia ter, claro, dado um I D bem eso Há apenas diferentes maneiras de Teoh identificar as diferentes seções, os diferentes elementos. Mas eu acho que eu vou usar o rapper um lado para que eu não tenha que desordenar meu html por ter muitas áreas diferentes que eu estou identificando. Então vamos colocar isso. E o que você acha que vai acontecer aqui sempre que eu adicionar a barra lateral? Porque nós vamos estar bem acima, estão disponíveis com Então o que acontece é que ele cai automaticamente abaixo. Então não queremos que isso aconteça. Nós queremos que ele ainda fique lá em cima para o lado direito, e foi aqui que eu conheci por ter um realmente calculado isso. E muitas vezes eu meio que acho que é um globo ocular só para ter certeza e ver quanto espaço eu tenho disponível. Claro, se você está projetando seu site, você deve realmente trabalhar matematicamente da mesma maneira e ver exatamente quanto espaço você tem disponível para U. S. Então eu gosto de vê-lo também nos lados re. Vou definir alguns pontos de ruptura aqui. Isso realmente não importa que ele está caindo aqui neste momento porque é que eu vou definir o ponto de ruptura. Eso até este tamanho da tela, vamos chegar até 100%. Então este é 100% tamanho. Então você vê que à medida que encolhemos e vamos ter que começar a definir alguns pontos de quebra vai torná-lo responsivo. Então nós vamos ter 2% um ponto de ruptura lá e talvez fazê-lo levar a largura total e, em seguida cada um destes, talvez 50%. Então isso está chegando quando nós configuramos a capacidade de resposta do site. E uma outra coisa que eu queria acrescentar em Vemos que quando estamos empilhando os direitos autorais , não sabe, realmente sei para onde ir. Então este é o rodapé e ele realmente não sabe onde ele quer acabar porque nós realmente não demos nenhuma propriedade e as instruções de como nós queremos que ele para lidar. Então o que realmente aconteceu aqui é que sempre que você faz flutuar, você tem que limpar o carro alegórico. Caso contrário, o próximo elemento vai realmente tentar encaixar esse espaço. Então vamos limpar ambos eso. Isso limpa ambos os carros flutuantes esquerda e direita, e agora, quando atualizamos, vemos que está ocupando o espaçamento total disponível e vamos dar mais algumas propriedades aqui, então dê a ele uma largura de 100%. E também tínhamos uma cor de fundo dentro do nosso design. Então vamos adicionar uma cor de fundo rápida, e eu acredito que estávamos tentando fazer algo fora. Ótima. Então vamos ver como isso se parece agora. Então, agora basta olhar para a nossa página web e nós temos a nossa cópia bem ali. Nós temos todas as três seções e nós também podemos removê-lo as bordas porque essas bordas não parecem realmente grandes. Então nós vamos atualizar isso Refresque-o. E, essencialmente, agora temos nosso site de três colunas. Vamos voltar e olhar para o nosso design. Então, há navegação. Cabeçalho 1 a 3 colunas e rodapé. Então este é o nosso site. E eu sei que o sombreamento está um pouco fora e na verdade deveria ter trazido isso porque este não está flutuando junto com o resto deles. Então talvez atualizar meu design um toque, e assim eles são reais. Então é mais ao longo das linhas de algo assim. E, claro, eu sei que temos cantos arredondados e temos algum espaçamento lá, então você teria que fazer esses tipos de ajustes também. Além disso, se você apresentou um design para um cliente, apenas certifique-se de que sim, ele se parece exatamente com o que o design é. Então certifique-se de fazer as cores da mesma forma que você está apresentando e assim por diante. E se você estiver usando uma barra de navegação, certifique-se de que você também está indicando as cores corretamente. Então, próxima lição. Vamos continuar a construir isso e fazer alguns ajustes, e então vamos introduzir a capacidade de resposta ao site, e isso vai ser um efeito muito bom, e isso vai cuidar disso onde estamos tendo os diferentes seções e não parece muito certo. Então, o responsivo sempre que adicionamos as consultas de mídia, isso vai cuidar disso. E tudo isso está chegando na próxima essência do acordo. 12. 12 ajustes e correções CSS: Eu queria fazer alguns ajustes e ajustes antes de continuarmos e torná-lo responsivo. Então, basta olhar para o site agora, eu quero fazer alguns ajustes na forma como os rodapés apresentados. Então eu quero centralizar esse Clinton e fazer alguns ajustes adicionais nele. Então mande uma mensagem para a linha e vamos alinhar o texto para o centro. Então eu acho que muitas vezes você vai ver rodapés onde o texto está realmente centrado e também vai definir uma cor aqui porque eu não acho que aquele que é muito escuro. Então este é um pouco mais tarde e mais alinhado com o nosso design. Nós provavelmente não queremos ter que é borda sólida em torno de lá e provavelmente quer adicionar em uma altura padrão para ele. Então dê-lhe uma altura de 150 e, em seguida, adicione um pouco de envasamento em torno das palavras. Então é bom e centrado. Faça isso. Então agora temos alguns estofamento bem centrado. Temos muito espaço disponível aqui em baixo dentro da nossa seção de rodapé. Eu também quero atualizar a forma como o nab nosso está sendo apresentado. Eu quero adicionar um pouco mais potting para que esses botões de menu realmente se destacam um pouco melhor. Talvez eu possa até fazer 15 por todo o caminho. Então 15 superior inferior esquerda e direita. Então vamos ver como isso parece. Então isso faz com que seja um pouco mais agradável, um pouco mais notável. Também podemos atualizar nossa barra de navegação onde estamos posicionando agora estão longe. Então nós provavelmente queremos configurar o nosso bar agora e tê-lo taxa de sentar aqui em cima dentro do canto superior . Então eu vou realmente mover isso, mover este para baixo e movê-lo para cima, e nós vamos cuidar de algum estilo lá e a razão pela qual eu estou movendo isso é porque a maneira que está sendo apresentada na ordem está sendo apresentada. Isso vai me poupar um pouco de estilo quando eu torná-lo responsivo. Eso movendo isso lá em cima. E outra coisa que eu quero cuidar é adicionar uma posição para o núcleo de navegação. Então vamos configurá-lo como posição e dar-lhe uma posição absoluta porque eu sempre quero ter certeza de que minha barra de navegação está sentado no topo, certo. É onde deve dizer superior à esquerda. Deve estar em cima à esquerda. Então temos uma opção para você ir para a direita ou para a esquerda. Quero ter certeza de que a exibição é bloqueada. E eu também quero ter certeza que é sempre com 100%. Então, vamos refrescar. Isso é assim que isso nos dá muito melhor apresentação do nosso conteúdo. E também agora vemos por que adicionamos sob o invólucro lá por que precisávamos que 40 picaretas. Porque agora somos parentes. E isso só significa que se fosse zero socialmente, o que zero parece s zero r conteúdo de verão seria sobreposto e assim por diante. E tomando nota disso, eu vou realmente mover este índice Zed para cá também. E eu também vou fazer esse transbordamento aqui fora também. Então tire da lista ordenada e coloque no pai lá. E basicamente, o que isso significa é que sempre que eu redimensioná-lo, aqui está então nós temos que dar uma olhada nele. Podemos ter o nosso menu aqui fixo no topo se quisermos fazer isso também. Então estas são algumas das opções tipicamente você. Provavelmente Você vê estes nos sites de uma página onde estamos flutuando sobre o conteúdo s Oh , esta é uma opção também neste ponto, dependendo do que o nosso design é, e também dependendo de quanto conteúdo estamos apresentando aqui. Então, se nós realmente não temos muito conteúdo, nós não vamos precisar ter nosso menu aqui pegajoso no topo. Se tivermos um monte de conteúdo e talvez queiramos tê-lo pegajoso no topo, então tudo depende e vamos mostrar-lhe as diferentes maneiras de fazer isso uma vez que o tornarmos responsivo . E uma vez que adicionamos as diferentes propriedades dentro do estilo para realmente demonstrar as diferenças no redimensionamento. Então, na próxima lição, nós vamos adicionar em nossas consultas de mídia e eu vou te mostrar para fazer isso. E isso é o que vai tornar seu site responsivo. Vimos que sempre que estamos encolhendo aqui em baixo que a barra lateral não está bem. E sempre que o encolhemos para um tamanho realmente pequeno, nada parece certo. Como essas seções há muito tempo para alguém ler em um dispositivo móvel que eles teriam que rolar para baixo e assim por diante. E então eles teriam que rolar para cima para ver a próxima seção. Então, não é ideal. Vamos cuidar disso nas próximas lições. 13. 13 Adicionar consultas de mídia torná-la responsiva: Este é o nosso site atual e, essencialmente, temos um cabeçalho. Temos três seções rodapé e uma barra de navegação. Eso tudo está vindo junto como design original foi eso agora eu queria adicionar em algumas opções adicionais aqui e ação. Eu também estou olhando para isso e pensando que devemos atualizar o dedo do rapper, ter um fundo de branco, então eu vou adicionar uma cor de fundo fora de branco e apenas atualizá-lo. Então agora o conteúdo vai realmente se destacar um pouco melhor também, eu vou adicionar em alguns potting no rapper 56 Então agora vamos alguns então nós porque eu adicionei no preenchimento, eu tenho que ajustar o rodapé bem, então Vamos cuidar disso. Então, em vez de ter cinco escolhas, vamos fazer 2% e, em seguida, sabendo que o rodapé é 100% eu preciso atualizar isso para ser 96% que ele flutue mais centrado dentro do conteúdo e agora estamos prontos para construir o resto do site e fazer é responsivo. Então, com cromo e uma das razões pelas quais eu gosto de usar cruel é porque ele tem ferramentas surdas. Então eu estou em uma máquina de janelas, então você pode apenas pressionar o botão direito, inspecionar qualquer lugar onde você pode pressionar a mudança de controle. Eu, você pode ir até a lista abaixo e você pode fazer uma seleção para as ferramentas surdas lá também. Então o que Deva ferramentas faz é que nos dá uma visão geral do que está acontecendo nos diferentes elementos para que eu possa ver quanta margem de borda este é o modelo de caixa. Então, em qualquer elemento que eu escolhi, eu posso obter um monte de informações para que eu possa ajustá-lo, removê-lo assim por diante e realmente obter uma sensação melhor para quando eu estou projetando meus sites ele vai parecer tão imediatamente. Quando estou olhando para isso, vejo que isso é descartado. A barra lateral deve estar ocupando em vez de ocupar a porcentagem original quando a tela quebra, eu preciso ocupar até mesmo uma porcentagem diferente. Então vamos ver onde ele quebra na tela. Então eu tenho um tamanho de tela lá em cima e eu também tenho este dispositivo alternar para uma barra, que é uma função muito agradável dentro das ferramentas surdas porque como podemos ver. Agora eu posso fazer minha página da Web parecer como seria em uma tela móvel que era de 3 75 por 6 88 Eu também posso torná-la dinâmica e ajustá-la manualmente para que ele possa ver aqui. Quantas picaretas através, e vemos que aproximadamente cerca de pouco menos de 800. É aqui que ele cai. Então é aqui que idealmente, quero definir a minha primeira consulta de mídia e este é o meu primeiro ponto de interrupção que eu quero trabalhar para . Então é abrir o nosso editor. E agora eu quero adicionar um pouco de estilo personalizado, também. Qualquer conteúdo que esteja por baixo ou caia em ser menor que 800 fotos. Então, Max, com tudo bem, vamos fazer 20 só para ter certeza. Então agora qualquer um dos estilos que eu aqui. Então, se eu fizer algo como cor de fundo do corpo, vamos fazer toda busca, então algo que realmente aparece. Então, agora, quando eu atualizá-lo, vemos que quando nós encolhemos abaixo de 820 picaretas, nós ficamos na cor de fundo aqua. Então isso é algo que podemos ajustar onde podemos levar nosso conteúdo aqui e fazer ajustes nele. Então vamos pegar nosso invólucro e não vamos nos preocupar com o corpo. Mas vamos pegar nosso invólucro e não dar tapinhas. E eu geralmente gosto de copiar e colar s para que eu possa ver quais elementos eu preciso mudar. E tudo o resto parece muito bom. Então eu não preciso fazer nenhuma mudança naqueles. Então só nos aplicamos àqueles que realmente estavam fazendo mudanças. Então vemos que sempre que um encolhe, vamos perder o enchimento que está por aí. Então é exatamente isso que eu quero que aconteça porque eu quero ter a habilidade de realmente isolar esse conteúdo e tê-lo em 100%. Então veja, à medida que ficamos maiores, temos o conteúdo de novamente disponível para nós e assim por diante. Então agora nós o encolhemos, e nesse ponto nós também queremos fazer alguns ajustes. Teoh esses elementos principais. Então nós temos o primeiro segundo e perguntar lado. Queremos que algo diferente aconteça com eles. Então eu faço o mesmo que eu fiz para o rapper, e eu peguei uma cópia e colá-lo para baixo. Então a primeira coisa que queremos fazer é definir um com Então talvez queiramos fazer algo como 45% e ter um pouco de envasamento. Então talvez uma mudança, até mesmo o envasamento para uma porcentagem. E nós vamos nos livrar disso flutuando para a esquerda, então estofamento e com são os que vamos definir. E então o quê? O dedo do pé da esquerda. Temos 45%. Talvez este. Agora queremos flutuar para a direita, modo que vai ter certeza de que ele está no lado direito e colocar o espaçamento no meio entre os dois elementos. E queremos ajustar o estofamento e com também e, em seguida, o lado leste. O que queremos fazer é a mesma coisa que fizemos para o rodapé, onde queremos limpar ambos. Então não queremos nenhum dos carros alegóricos lá, então limpe os dois carros alegóricos e talvez queiramos continuar com 5% então acredite que já era 5%. Então deixe isso. E agora queremos fazer 90% para o todo com. Então vamos dar uma olhada nisso e ver como isso acaba. Então, quando nós redimensioná-lo para que ele não exatamente uma linha lá, então eu estou usando um pouco máximo de espaço em excesso. Então eu preciso fazer alguns ajustes para isso, então eu vou ajustá-los para três e um pouco melhor, mas eu ainda preciso fazer alguns ajustes e este ar porque já há algumas propriedades embutidas neles. Então agora vemos isso quando eu inspeciono. Então eu tenho meu estofamento lá. Então eu tenho algum preenchimento lá, e ele tem que calcular para fora o preenchimento completo disponível. Então você vê que agora ele está se ajustando muito bem, e nós precisamos definir mais um ponto de ruptura lá, e minha barra lateral automaticamente estoca por baixo. Então vamos adicionar mais uma consulta de mídia como vai ser adicionando isso na próxima lição, e isso vai definir o nosso tamanho padrão final, e ele também vai apenas alternar o menu. Então este seria o ponto em que talvez se nós encolher menos de 500 escolhas, este é o lugar onde nós realmente queremos ajustar nosso menu. Então isso está chegando no próximo conjunto de lições. Ok, 14. 14 Adicionar consultas de mídia adicionais: na última lição, olhamos para como podemos definir um ponto de ruptura e uma outra coisa para isso. Eu quero apenas o rodapé lá. Então eu percebi que eu não tinha cuidado do Rodapé corretamente, então vamos fazer nossos ajustes nesse também. Então, porque nós removemos um pouco desse eso estofamento, vamos o nosso potting para zero e talvez nós nem vamos ajustar a altura. Portanto, tudo depende de como queremos lidar com o nosso conteúdo. Mande mensagem para a linha. Não precisamos repetir cores. Não precisamos repetir claro. Não precisamos repetir e talvez queira enviar 100%. Então é dar uma olhada rápida e ver como isso está parecendo. Não é muito melhor, e estou pensando que talvez devêssemos definir nossa consulta de mídia. Nosso ponto de ruptura em 600 picaretas é talvez querer ter mais itens de menu de navegação e assim por diante. Então isso nos dá alguma flexibilidade e espaço para atualizar nosso conteúdo, e eu também quero me livrar da maneira como o cabeçalho está sendo tratado. Eso que arredondou os lados em torno desse cabeçalho. Eso quer se livrar disso também. Então vamos adicionar que em alturas, vamos fazer envasamento de zero raio de borda zero e depois de cor, podemos remover para fora e altura podemos remover para fora. A não ser, é claro, que queiramos definir uma altura diferente. Então agora parece muito mais alinhado, senta-se em um quadrado em um quadrado e bem alinhado nos. Vamos começar a construir para um tamanho mínimo também. Por isso, às vezes, pretende definir um tamanho predefinido do seu conteúdo que poderá não querer deslocar por baixo. Então vamos copiar a nossa consulta de mídia e eu vou rolar para baixo e vamos defini-la em outro ponto de ruptura. Então, estas 1.600 escolhem para que, às vezes, você defina várias consultas de mídia que vi dependendo da personalização e do quanto você realmente deseja que sua tela seja ajustada . Há uma série de opções diferentes aqui para definir suas consultas de mídia. Eso vamos definir nosso wrapper com e apenas vai configurá-lo para auto com, então isso funciona da mesma maneira onde ele centraliza automaticamente. Isso cria um mito automático e assim por diante. Eu não preciso ter nenhum do preenchimento porque eu já removi no último ponto de ruptura. Selecione. Olhe para o cabeçalho dela, então não precisamos incluir isso, porque eu acho que esse está bem. A próxima é a nossa área de conteúdo. Eso são conteúdo pode estar indo para sentar o dedo do pé conteúdo com auto. Remova esse flutuador, então é isso. Flutuar para nenhum e vamos dar-lhe uma margem de zero apenas para ter certeza de que não temos nenhuma margem de atraso lá. Então margem zero e provavelmente o suficiente para fazer a mesma coisa para o lado. Um segundo item de modo que ocupa cheio com automático com remove o flutuante. E para a barra lateral. Então já cuidamos disso. Muito disso pode ser o que queremos fazer é remover o preenchimento também. Já ficou claro ambos, e vamos mudar isso com o auto para que fossem consistentes e rodapé. Vamos fazer isso com o carro também. Então vamos dar uma olhada nisso agora. Sempre que o encolhemos abaixo de 600, vemos que ele se armazena bem e apresenta-lhe o conteúdo de uma forma agradável, arrumada e abastecida. E então, à medida que crescemos, recebemos todas as nossas colunas apresentadas. E à medida que ficamos menores, as duas colunas mais importantes e, em seguida, a barra lateral provavelmente seria algo que não é tão importante. E o conteúdo mais importante que sempre queremos manter no topo. Então, essencialmente, este é o nosso site agora. E na próxima lição, precisamos atualizar este menu de navegação. Então vemos que, à medida que o encolhemos, ele não encolhe muito bem. Então isso é algo que nós definitivamente olhar para e nós vamos cuidar disso na próxima lição. 15. 16 Barra de navegação responsiva à configuração: nesta lição, vamos atualizar nossa barra de navegação. Então, a maneira que queríamos olhar sempre que estivesse em uma tela pequena. Então queremos que um botão lá seja clicável e abra o menu da barra de navegação, e não queremos que ele estoce horizontalmente. Queremos trazer de volta a ordem de empilhamento vertical padrão. Então vamos cuidar disso. E nesta lição, abrindo o editor dela. E queríamos configurá-lo na tela de mídia sempre que fosse menos de 600 escolhas. Então nós temos nossa largura máxima de 600 qualquer coisa que é menor do que isso vai obter essas propriedades adicionadas a ele. Então vamos abrir o editor e também vamos abrir a área de exibição aqui do lado direito . Atualizamos para ver as novas mudanças lá. Eu também posso re ligá-lo. Há O que agora colchetes tem ligado mais uma vez e vamos abrir seu menu de navegação. Então, queremos idealmente fazê-lo em uma tela muito pequena. Então isso abriu isso. E agora está no nosso estilo lá. Então, primeiro de tudo, vamos alguns vamos virar, vamos atualizar os itens da lista. Então vamos voltar aqui como fizemos antes, onde temos todos os nossos itens de navegação lá. E depois o que vamos fazer é escondê-lo. Então eu preciso fazer algumas atualizações para provavelmente alguns desses. Então eu vou apenas copiar e colar, e eu vou colocar um selador de espaço reservado. Então eu sei quais copiaram e colaram. Então primeiro 1 o estilo de lista ordenada apertado, e vemos que este provavelmente não precisa de muitas mudanças. Este é o lugar onde nós vamos realmente adicionar no visor. Nenhum bloco tão exibido por enquanto. E então atualizaremos isso para não ser nenhum quando estivermos prontos e próximos. Ou podemos até mesmo fazê-lo nos itens da lista bem s. Vemos que os itens da lista têm à tona de esquerda. Vamos flutuar para nada. Então, livre-se disso e vemos que imediatamente ele ocupa o espaçamento adequado lá. E vamos atualizar estes para exibir na linha. Nós realmente vamos remover isso na linha porque vamos trazê-lo de volta e mentir. Então vamos deixar isso no bloco agora. Então exibir bloco e rapidamente dar uma olhada e apenas certifique-se de que s então nós temos estes estão em bloco de linha agora, Então vamos nos livrar de exibição na linha e apenas deixá-lo em linha assim e talvez atualizar este de volta e vamos alinhar o texto para a esquerda. Então nos livramos disso na linha, adicionamos alguns vasos adicionais a ele, ou removemos alguns dos estofos porque vamos precisar ocupar menos imóveis neste . Decoração de texto. Podemos nos livrar disso quando podemos nos livrar e quando nos livramos de eso para pairar , nós realmente não precisamos fazer nenhuma mudança para a fome também. Então vamos dar uma olhada nisso. Não. E vemos que é assim que nosso menu está aparecendo. Então, podemos idealmente, realmente precisa adicionar em nossa barra de menu. Então, vamos mostrar este S. Então agora que temos este escondido originalmente, eu estou apenas procurando o Meu ícone. Vamos atualizar isso e adicionar isso lá. E em vez de mostrar nenhum, eu vou exibir bloquear aquele. Então aquele aparece lá em cima. Queremos realmente puxá-lo para o lado direito eso em vez de tê-lo sentado lá à esquerda e, por padrão, sempre queremos tê-lo no lado direito também. E também queremos ocultar essa alteração que não exiba nenhuma. Então a idéia aqui é, uma vez que isso é clicado, em seguida, ele exibe o ícone de menu e novamente, dependendo de quais suas preferências, você pode querer puxá-lo para a direita. Você quer mantê-lo para a esquerda s novamente. Isso depende da preferência. Mas se quisermos puxá-lo para a direita, podemos apenas fazer um texto da linha, e podemos alinhá-lo para a direita para que isso vai cuidar de ter o nosso menu de navegação onde aparece. Então, na próxima lição, nós ainda vamos fazer algumas atualizações e ajustes para prepará-lo e pronto e preparado para adicionar JavaScript para J query toe. Adicione funcionalidades adicionais à nossa página Web. Então tudo isso está chegando na próxima lição 16. Menu de configuração para alternância de curso: Eu queria fazer um ajuste aqui porque nós notamos que eles não estão ocupando o total com. Então nós, idealmente, queremos que eles ocupem o máximo com para que possamos realizar isso adicionando 100%. Então agora temos a nossa barra de navegação olhando apropriadamente algumas coisas que eu também quero . Então eu quero cuidar da altura do cabeçalho. Então, a seção de cabeçalho aqui. Então nós definimos algumas alturas padrão e geralmente nas telas pequenas onde o espaço pode ser limitado, nós podemos querer apenas esta altura também. Nós dissemos isso sobre auto fazer estofamento em zero. Isto é apenas para garantir que nas telas menores, tudo parece da maneira que queremos apresentá-lo. Devia esconder esta outra vez. Então vamos rolar para baixo até onde tínhamos uma lista Norden e exibição blitz. Nenhum. Então, o que precisamos fazer para que isso funcione, precisamos adicionar algumas funcionalidades javascript, então faça isso clicável. E uma vez que é clicado, então vamos mostrar o menu de navegação. Estamos indo Essencialmente alternar que em uma propriedade lista ordenada configurar isso e adicionar em uma classe aqui. Então classe E esta classe na tela menor é assim que isso é para apenas vai ser utilizado dentro do estilo. CSS Então o que eu estou fazendo é eu estou adicionando uma classe aqui na UL, e é aqui que eu vou realmente alternar o valor de exibição s oh, isso vai ser muito mais fácil, realmente adicionando e removendo a classe em vez de atualizá-lo aqui e atualizando e pesquisando para o elemento. Você poderia fazer isso em qualquer guerra. Mas vamos fazer desta forma onde vamos adicionar e remover a turma. Então a aula vai ser só uma tela pequena. E agora, em vez de fazer este aqui, nós vamos fazer tela pequena exibição nenhuma e garantir que na tela cheia nós estamos realmente exibindo, isso vai apenas fazê-lo bem ali embaixo e um livrado daquela tela . Nenhum. E, mas nós nos livramos do errado lá, então certifique-se de que este é exibido bloco. Então vamos apenas atualizar isso e vemos isso nas telas maiores. Eso que está desaparecendo para que as aulas agora efetivas lá e nas telas menores que vão realmente fazê-lo desaparecer. E eu só tinha que guardar isso e refrescá-lo. Então agora vemos que tudo está funcionando corretamente, e tudo o que precisamos fazer é apenas alternar isso. Então, tem este botão clicável ativar e desativar isso e que irá mostrar o menu e ocultá-los em você. Então isso está chegando na próxima lição. 17. 19 Adicionar gatilho de evento jQuery: você está pronto para adicionar em interação dinâmica? Então vamos fazer isso com J Query. Então eu já adicionei na Biblioteca J. Corey. Você pode adicioná-lo em um número de fontes. Você pode até mesmo ir para o site da consulta G, e a partir daqui você pode baixar o arquivo fonte da consulta G, ou você pode vincular a ele, como eu fiz com a biblioteca hospedada. Então a escolha é sua. E essencialmente, o que isso faz é que isso traz em todo esse código JavaScript, e você pode acessar qualquer um desses snippets JavaScript, que é J query e lhe dá um monte de funcionalidade. Isso é realmente útil, e permite que você para mais rapidamente em nesta capacidade dinâmica do que você pode ser capaz de com JavaScript. Então você está certo, Jake se preocupe no mesmo formato que JavaScript. Você trazê-lo para suas páginas da Web do mesmo tipo de maneira em que você digita tags de script e, em seguida, você adicionar em conteúdo entre as tags de script. Então, com o Jake preocupado, a forma como funciona é a interação dentro do Dom. E sempre que vamos para o site aqui, então ele tem algumas informações aqui para como adicionar consulta J e assim por diante. Essencialmente interação. A cúpula é uma Siris de todos os diferentes elementos em seu site. Vemos que dentro do nosso cônsul cromado aqui que temos acesso a qualquer elemento tem todas essas propriedades e valores que podemos acessar facilmente. Então você tem todos esses gatilhos de eventos. Então, o que estamos procurando nesta lição, eu quero adicionar no gatilho de evento para que sempre que este item de menu é clicado, ele dispare uma função. Então nós vemos o sempre que eu vou para ele, eu tenho este eso eu tenho um conjunto inteiro de propriedades aqui, e eu tenho um monte de ouvintes de eventos diferentes. Então eu queria adicionar o ouvinte de evento on click e qual consulta G. Isso é realmente fácil de fazer porque com consulta G, ele torna simples toe adicionar em classes e identificar elementos para suas classes. Com JavaScript, é um pouco mais difícil isolar esses diferentes elementos com as classes. É preciso um pouco mais de tribunal, então vamos nos preparar. R J. Query e Jake são essencialmente carrega quando seu site carrega para que possamos adicionar isso em como uma função e consulta G de s funções dentro do objeto de documento eso Precisamos ter certeza que o nosso documento é carregado para que você possa fazê-lo um número de maneiras diferentes. Você poderia fazê-lo com uma função e adicionado em como este e essencialmente chamar mais para que o J coury iria para aqui. Ou normalmente você pode vê-lo escrito como documento. E este é um método que é executado sempre que o documento real está pronto. Então nós poderíamos fazer o documento pronto e então ter a função lá dentro. Então de qualquer maneira vai realizar a mesma coisa onde estamos adicionando a funcionalidade para Jake preocupação entre estes colchetes aqui e este essencial vai disparar sempre que o amanhecer estiver carregado e pronto para ir. Então, como eu disse, é realmente simples e direto toe Adam J consulta e criar esses eventos. Então, já temos uma classe aqui que distingue esse ícone em particular, e podemos colocar um ouvinte de eventos nessa classe. Então vamos atualizar isso e colocar em Esso, a fim de acessar os diferentes elementos nós fazemos o cifrão e então aqui, assim como fazemos com CSS, nós distinguimos o elemento que queremos criar essa interação e o então manipulador que queremos fazer. A ligação de eventos que queremos fazer é um clique. Então há o nosso clique e função e nós podemos passar sobre os parâmetros em e. Estes são, se você quiser. Se você tivesse uma âncora enviando mensagens de texto e impedindo o padrão e assim por diante, você poderia fazer isso como passar sobre as informações do evento. Mas o que queremos fazer é realmente simples e direto. Então o que eu vou primeiro fazer é um diretório de console que e informações de eventos para que você possa ter uma idéia melhor do que Jake se preocupa fazendo nos bastidores. Então, quando você envia algo para o console, essencialmente, isso é o que está visível aqui dentro da área de exibição. Vou desligar isso, abrir o console. E eu acho que eu tenho que fazer um menor para vê-lo e nunca clicamos neste botão. Vemos que esse evento é acionado, e temos acesso a todas essas informações. Então vemos que já sabemos informações sobre esse elemento em particular que tudo foi passado através do evento em. Podemos utilizar essas informações em Jake Worry, mas nós realmente não precisamos fazer muito com a funcionalidade de consulta J. Tudo o que queremos fazer é realmente alternar esse item de menu. Então, sempre que for clicado, queremos alternar isso e adicionar essa classe e remover essa classe. Então vamos fazer isso também, então nós realmente não precisamos utilizar o objeto de ventilação. Mas eu só quero ilustrar que ele está lá se você quiser utilizá-lo. Então o que queremos fazer é queremos uma alternância, aquela classe que adicionamos. Então essa é a classe de tela pequena, e nós queremos desativá-la. Agora vamos dar uma olhada na nossa barra de navegação. Então, como estamos selecionando e assim como fazemos com nosso JavaScript, podemos fazer nosso processo de seleção no mesmo formato para que possamos identificá-lo que temos barra de valete. Então aqui, do mesmo jeito. Então agora barra e queremos adicionar e remover a classe da lista ordenada da ONU. Então isso é agora Bahr ul e queremos remover a classe e vamos especificar qual classe queremos remover. Então você l seleciona o elemento. Então este é o seletor de elementos, assim como mais de um ano em que adicionamos que o ouvinte de eventos. E o método que queremos fazer é alternar classe. Então, como podemos ver a partir da descrição, adicionar ou remover uma ou mais classes de cada elemento no conjunto de elementos combinados, Então, dependendo, então vamos olhar para este elemento combinado e o que ele vai fazer. Ele está dobrado em um alternar a classe, e agora precisamos especificar qual classe queremos. Otago Então, voltando aqui e queremos especificar que estavam alternando esta tela sm ligado e desligado sempre que ele é clicado. E é isso. Então, vamos voltar para nossa página da Web para atualizá-la. E agora vemos, sempre que estamos alternando, nosso menu está abrindo e fechando, e a coisa realmente precisa de fazer isso desta maneira é que sempre que vamos para o tamanho de tela maior que nós realmente não estamos escondendo e mostrar o menu porque é tudo dependente dessa classe, e sempre que temos o menu aberto, então ele permanece aberto. Então, mesmo quando nós redimensionamos e encolhemos para baixo, que a maioria das pessoas não vai estar redimensionando sua página da Web, mas é sempre bom saber que ele está lá no caso de você precisar It s Então agora temos um menu totalmente funcional tudo pronto para ir. Podemos abri-lo e fechá-lo a qualquer momento e interagir com ele dentro da nossa página web. Então, a próxima lição que eu queria adicionar em algo realmente limpo porque maneira ver que nós não estamos realmente certo em que página estavam. Então, mesmo se formos para o índice dot html, isso deve realmente ser destacado, que nos dará uma idéia melhor em um sentido melhor de qual página estamos sentados. Então eu vou te mostrar como pegar o que você é. Eu estava no Match it em com a barra de navegação você, Earl, e adicionar em uma classe de talvez ativo s para que possamos destacar isso como, além de tê-lo destacar sempre que pairando sobre. E esta é uma experiência de usuário muito boa, porque dá aos usuários de representação visual de qual página lá realmente sentado. Então isso está chegando na próxima lição. 18. 21 Como definir cursos em tempo real: a última lição que mostramos como você pode adicionar J curry e criar um evento totalmente funcional que é acionado quando você interage com sua página da Web. Então isso foi algo que é realmente fácil de adicionar. E também olhamos para o nosso site e olhamos para pensar que o que precisamos adicionar e determinar qual desses itens de menu é a página ativa atual. E poderíamos fazer isso no poço de G. Korea porque, como vimos, temos um monte de informações disponíveis para nós dentro J query e vemos que temos acesso a todas essas informações. Podemos acessar facilmente qualquer parte do nosso conteúdo web. Então o que queremos acontecer é o que quer que o nosso site carregue, precisamos definir um elemento ativo tão ativo, talvez chamá-lo de configuração ativa. Então esta é apenas uma função sempre que o site carrega. Eu quero executar esta função, e apenas aqui em baixo é que vamos configurar a função é essencialmente conjunto de comandos que você pode agrupar e simplesmente chamá-lo de dentro do seu código-fonte. Então esta função vai primeiro de tudo que precisamos para pegar nosso caminho. Então, onde você está l caminho ou assim precisamos saber o que Page estavam em. Queremos ter certeza de que podemos pegar este índice dot html e podemos utilizá-lo dentro da nossa página web. Então vamos fazer o objeto janela. E este é essencialmente outro objeto dom, que nos dá informações. E nós podemos realmente ver o que está dentro desta barra de navegador aqui usando janela e fazendo localização que deve ser adotar sua localização retorna a localização de uma informação de objeto , mas a localização atual e vamos fazer o nome do caminho para o caminho do objeto real. E eu vou simplesmente Cônsul, registrar este valor de caminho URL para fora. Então, essencialmente, você é l caminho está segurando o valor da localização da janela, caminho , nome, e isso nos dá a capacidade de usá-lo. Então vemos que temos este índice de parada html. Então agora tudo o que precisamos fazer é dar uma olhada nisso e realmente combiná-lo dentro de nossos itens de menu aqui e ver qual deles realmente representa está representado lá. Eso uma das coisas aqui também, então às vezes você pode ter conteúdo adicional em sua string e assim por diante. Então este I Isto poderia potencialmente estragar sua corda eso que ele não está realmente agora com neste caso. Mas você tem que ter cuidado para que você esteja realmente combinando com o caminho correto. Eso certifique-se de que sempre console, faça logout para se certificar de que você está chegando ao caminho correto. E isso é a mesma coisa que você tem dentro de seus hiperlinks. Então nós temos esses cortes e assim por diante. Então agora vamos abrir nosso editor e precisamos ver que precisamos olhar através de toda a navegação diferente que você está aqui e ver qual deles corresponde. E se encontrarmos uma correspondência , tudo o que precisamos fazer é adicionar uma aula lá. Então vamos criar esse loop. Então vamos fazer o loop. Podemos simplesmente não ter e fazer um para quaisquer hiperlinks dentro do nav. E eu preciso citar em torno desse dedo, identificá-lo como um elemento eso para cada um e faria o mesmo. Temos uma função aqui, então aqui dentro, o que estamos essencialmente fazendo é percorrer cada um desses elementos. E então vamos retornar de valor. Eso podemos usar o valor. Então talvez o que eu possa fazer primeiro é consolar, encerrar isso e o que é isso. Este é o contentor. Este é o Isso é cada objeto que está captando através da saudação. Então vamos ver o que acontece agora. Então, quando eu olhei através, nós vemos que temos para itens são listados aqui fora porque nós estamos looping através de cada um e nós vamos ver dentro de cada um. Temos um monte de informações para que possamos realmente pegar onde está a localização da URL . Eso enfraquecer dio, descobrir onde o h ref está, então onde ele vai combiná-lo com o atual e salão de beleza. Então vamos dar uma olhada em nossa corte novamente, e como estamos fazendo loop através disso, podemos especificar quais atributos queremos fazer bem, e eu acho que essa é provavelmente a melhor maneira de fazer uma verificação para ver se nosso valor está dentro que atributos. Então vamos talvez colocar isso em uma variável e contê-lo dentro de algo chamado H ref. Então este é um Samos o caminho do euro apenas uma string variável e vamos usar isso, mas vamos ser mais específicos. Eu não quero devolver esse objeto inteiro, então eu vou obter um atributo, e o valor do atributo que eu quero retornar será h áspero. Então pegue o cônsul de novo. E agora posso mostrar-vos os representantes H enquanto olhamos através deles. Então vamos dar uma olhada nisso. Então nós vemos que lembre-se, o 1º 1 aqui vai ser pegar a garota daqui, e depois isso. A próxima linha chamada 71 vê índice sobre serviços e contato. Então ele está realmente recebendo essa informação diretamente da página HTML. Então, se você estiver para atualizar estes, estes também serão atualizados. E isto é ideal. E é aqui que obtemos essa interação dinâmica e essa capacidade com dentro do nosso Jake onde Então agora vamos escrever uma declaração condicional e apenas fazer uma verificação rápida para ver, caso afirmativo, o caminho u R L. E vamos nos certificar de que temos sub string zero é um equivalente cada comprimento áspero essencialmente o que isso irá produzir. Ele irá produzir que h áspero. Então eu poderia apenas mostrar a vocês que o que ele vai fazer, ele vai essencialmente produzir. Esse caminho que temos lá em tudo o que está fazendo é apenas certificar-se de que não estamos realmente tendo nada extra lá que é adicionado e assim por diante. Claro, se você não tem nada extra, se você não está esperando nada extra, você pode simplesmente fazer uma partida e apenas ver se você é todo caminho é igual a H áspero. Poderíamos até fazer um absoluto igual a H áspero. E se for, então talvez nós vamos apenas para um cônsul alergista trancado para fora e apenas tomar muito. Então, agora vamos ver o que acontece quando atualizamos a página. Então nós temos nossas listagens iniciais. Temos a nossa linha 67. Então nos diz o que você é que eu estava fazendo. E aqui é onde estamos fazendo. Os loops estavam fazendo 71 72 encontramos uma correspondência 70 um e 72 Não combinam. Então não há correspondência 71 72 Não corresponda 71 72 não há muito. Então, essencialmente, estamos fazendo todos esses jogos e eu vou manter este NPR apenas comentado para fora caso você quer jogar em torno de experimento com isso s Oh, este é apenas Mawr maneira definida de garantir que você está recebendo isso. Na verdade, você é um caminho com o comprimento e certificando-se de que ele está lá para que você possa removê-lo. Ou você pode fazê-lo de qualquer maneira apenas para garantir que você está realmente recebendo esse caminho. Mas neste momento, são sites muito simples. Temos o índice html dela. Estamos apenas combinando com o H. Se tudo parece bom, então tudo o que precisamos fazer é adicionar classe ativa para esse elemento. E como sabemos já looping através de cada um deles. Por isso, é fácil como atualizar e adicionar classe ativa, e queremos adicionar a classe ativa para o pai. Então é aqui que podemos nos aproximar para encontrar o item da lista mais próximo. Então, o mais próximo obviamente seria o pai, e tudo o que precisamos fazer é adicionar classe. E é aqui que podemos especificar qual classe queremos adicionar e adicionar nessa classe ativa vai nos dar uma cor diferente. Então precisamos saltar para o nosso CSS e fazer uma atualização Adicionar em cores diferentes para o eso classe ativa Nós podemos fazer isso da mesma maneira que temos aqui em baixo. Então talvez eu só vou chamar isso de ativo e vamos descer aqui e adicionar uma classe ativa em nosso CSS principal aqui. Então, vamos para onde temos todos os nossos itens de navegação em ir direto para o topo aqui. Então nós temos todo o nosso item de lista de navegação A. Então nós queremos ver se ele tem uma classe ativa que eu quero definir uma cor de fundo diferente para ele. Copie esse oito. E eu quero fazer onde eu quiser adicionar ativo porque nós vamos adicionar em uma classe ativa. E a partir deste, queremos atualizar qual é a cor de fundo. Então, se é um item da lista de seu hiper Lincoln, se estiver ativo, então vamos atualizar nossa cor de fundo. Então, em vez de azul, vamos fazer vermelho. Então ele realmente se destaca e voltar para nossos sites e atualizá-lo e apareceu de volta em nosso CSS. E agora vamos ver se é agir realmente ativo. Então vamos atualizar esse CSS. Então vamos dar uma olhada e inspecionar nossos elementos. Veja, se temos ativo é adicionado a ele ou não, então precisa atualizar a página, provavelmente para ver se salvar isso e salvar isso. E vemos que agora estamos ficando ativos está sendo adicionado na lista item eso Se tivéssemos se tivéssemos se tivéssemos um barco configurado, isso também estaria ativo. Eso vamos voltar para o nosso CSS e talvez queremos definir o nosso ativo para o mesmo que o nosso pairar possamos fazer isso também. Então talvez isso faça mais sentido. Então basta acorrentá-los junto com o Kama, removê-lo este e ver como isso parece. Então, agora, quando eu atualizá-lo, sabemos qual página onde está ativo. Ele adiciona automaticamente um ativo e agora sempre que passar o mouse sobre eles, podemos ver que ainda podemos mudar para páginas adicionais. Então, o próximo conjunto de lições vamos construir o resto do site adicionando sobre serviços e contato e adicionando e ligando para a consulta CSS e G que temos usado nas últimas lições, então tudo isso está chegando no próximo conjunto de lições. 19. Ajustes e opções da página: agora que terminamos de adicionar em nosso JavaScript, temos um site totalmente funcional pronto para uso. E agora podemos olhar para atualizar nosso conteúdo. Então, uma das coisas que eu queria acrescentar é que eu quero adicionar em outra imagem aqui, então eu vou usar Loren Pixel. E o que Lauren Pixel faz é que nos permite adicionar imagens reais, então, ao invés de colocar, mantenha-a onde temos uma grande área com as dimensões de pixel ou as dimensões da imagem . Lauren Pixel me dá imagens reais. Então vamos atualizar isso e adicionar isso ao nosso código. Então vou adicionar uma imagem. Então talvez tenhamos uma imagem lá ou, na verdade, melhor ainda, não temos imagem entre todo o nosso conteúdo, e vai ser uma imagem grande e branca. Então vamos dar uma olhada em nossa página web. Então parece que agora, agora temos nossa imagem chegando um pouco devagar, mas então as imagens carregando e é um cachorrinho. Então, sim, então isso é essencialmente como podemos criar nosso site, e essa é a coisa com Lauren escolhas. Então você realmente nunca sabe o que você vai obter dentro de suas imagens, então realmente precisa. Mas você tem algumas opções aqui para escolher categorias específicas de imagens. Se você quer eso que é realmente precisa de bom funcionamento necessidade. E isso sempre é, ah, muito mais impressionante para as pessoas entrando e usando sua Web usando seu site, onde eles podem realmente ver algo que, em vez de apenas um monte de conteúdo e esses espaços reservados podem realmente tornar sua página da Web e seu design muito populares e tornar um pouco mais amigável. Outra coisa que eu quero adicionar no ar fundos do Google. Então fontes do Google. Temos muitas opções aqui para fontes. Podemos realmente facilmente ir e escolher qualquer diversão que quisermos e divulgá-lo em nosso site. Então, para este exemplo, talvez nós vamos apenas... eu estou apenas escolhendo algo aqui aleatoriamente. E, claro, quando você é projetado seu site, certifique-se de gastar um pouco mais de tempo nisso porque é importante. Teoh realmente tem essa diversão certa, porque fontes podem realmente fazer uma grande diferença dentro do seu site. Eso talvez pegue esse senso dróide e há diferentes maneiras de trazê-lo para o seu site. Então, há um padrão que você pode vincular à folha de estilo. Mas eu geralmente gosto de usar, importar e importar diretamente para o meu CSS, especialmente para projetos como este. Onde eu estou ligando para, eu vou estar ligando para várias páginas da Web. Então isso me poupa o problema de realmente se eu fizer uma atualização, ter que atualizar cada página, e nós definitivamente não queremos entrar nisso. Então vamos abrir isso e abrir isso. E agora vamos entrar em Family Droid tão cedo quanto nossa culpa e vemos imediatamente nosso site parece bastante diferente com o novo eso font. E, claro, é sempre bom brincar e confira todas as diferentes fontes que você pode adicionar. Eles estão atualizados. Eu quero atualizações é que sempre que nós encolher para baixo, parece que nós temos um monte de conteúdo e nós perdemos nosso menu aqui no topo. É uma série de opções diferentes novamente, dependendo de como você deseja projetar seu site, tornar seu menu de navegação grudento o tempo todo. Então, apenas atualizando isso e alterando-o para corrigir em vez de absoluto foram corrigidos. E agora, sempre que descermos, não importa. Muito conteúdo que temos sempre que rolar para baixo ou menu está aqui na parte superior, ou você pode tê-lo em Lee ouro fixo sempre, onde dentro de um determinado tamanho. Então isto é novamente, qualquer que seja a sua preferência, eu vou apenas deixá-lo como está agora, fixo no topo porque eu acho que ele tem um pouco de conteúdo. E sempre que os usuários rolagem ar, Eu sempre quero que eles apresentados com este menu de navegação para que eles possam realmente facilmente navegar para outras páginas dentro do meu site. E eles nunca estão olhando e tendo que rolar para cima e depois navegar. Então esses ar apenas pequenas coisas que você tem que considerar e novamente, dependendo de quanto conteúdo. E normalmente, se você tem um site de três chamadas, você provavelmente tem um monte de conteúdo que você está planejando. Então, próxima lição eso. Agora que ajustamos um pouco o site e podemos continuar a ajustá-lo, fazer algumas atualizações, batidas, batidas cores de margem e assim por diante para realmente obter a aparência e a sensação que estamos procurando por eso. Claro, há opções ilimitadas aqui um ponto com diferentes propriedades que você pode configurar para realmente obter uma boa aparência e se sentir da maneira que você quer. Mas na próxima lição, vamos mostrar-lhe como completar este site, terminá-lo, terminá-lo, atualizar e criar páginas adicionais para que seja um site totalmente funcional de quatro páginas, tudo construído do zero, compartilhando o mesmo Jake Worry, compartilhando o mesmo estilo. Então isso está chegando na próxima lição. 20. 24 Criar páginas adicionais para o site: esta lição. Vou mostrar-te como completar os teus sites nas últimas lições. Trabalhamos bastante aqui com nosso site e temos nosso site essencial ou funcionando totalmente funcional, totalmente móvel, pronto. E então um eso estamos prontos para ir para fazer nossas etapas finais de nosso processo de criação de site. E isso é apenas atualizar e criar as páginas adicionais. Então, porque estamos fazendo um site estilo HTML precisamos criar sobre o serviço HTML é HTML e contato html e podemos jogar um pouco com algum desse conteúdo. Há uma coisa crucial que devemos fazer antes de fazermos. Qualquer outra coisa será mover nossa consulta Jack J ou um JavaScript para fora de nossa página que tudo o que temos que fazer é vinculado a um arquivo de script e temos acesso total a ele, então precisamos manter o link Jake Worry nessa página. Eu criei um arquivo chamado script dot Js. Então isto vai abrigar o meu javascript e da mesma forma que estamos nos ligando à preocupação dos nerds . Eu só vou ligar para o script Js como a fonte deste arquivo e a mesma coisa aqui. Ele ainda está trazendo toda essa funcionalidade JavaScript ou funcionalidade J Corey em nossa página da Web. E vamos checar duas vezes, ver se tudo ainda está lá. Certifique-se de que o nosso menu sempre que o encolhemos para baixo para que o nosso menu ainda esteja lá. Tudo está totalmente funcional. Então estamos prontos para ir, Teoh, apenas duplicar nossas páginas e então podemos atualizar o conteúdo. Então, mais uma verificação dupla porque às vezes você sabe, você faz essas alterações e quando você antes de criar isso, todas as páginas adicionais que você queria sempre verificar duas vezes porque você não cria todas essas páginas e então tem que fazê-las outra vez. Então tudo parece bom e eu vou criar uma página chamada Boat Got html e tudo o que eu vou fazer é essencialmente duplicar meu índice dot html. Então agora eu tenho um barco dot html. Em seguida, eu preciso Teoh criar serviços dot html. Então, basta salvar como e apenas fazer serviços dot html. E por último, vamos fazer mais um salvar-nos e vamos fazer contato com cada um para saber. E agora vamos ao nosso site e ver como isso está funcionando. Então, agora, se vamos para sobre contato de serviços, vemos que nossa barra de menu está ativa na cor ou na página que estavam em. E, como é claro, você pode ajustar isso também para que você possa separá-lo para que sua página ativa pareça diferente da página irregular e assim por diante. Então vamos fazer alguns ajustes rápidos. Então, na página inicial, eu gosto de ter esta seção de cabeçalho, mas na página sobre, bem, ele realmente não funciona. Então vamos ver que tipo de atualização podemos fazer aqui. Eso Temos o nosso cabeçalho para que possamos remover esse cabeçalho. E aqui podemos usar todas as nossas seções sobre nós e assim por diante apenas ter um monte de conteúdo aqui. Isso é talvez sobre a empresa e assim por diante e, novamente, vamos manter esse conteúdo. Mantenha a barra lateral e eso ligado. Então eu acho que isso é muito bom. Então é um pouco diferente a seção sobre mim porque você geralmente pode não precisar do cabeçalho. Você pode mantê-lo dentro, dependendo novamente do seu design e como você quiser. Apresente o seu conteúdo se você quiser ter em algum lugar onde você tem talvez o cheio com uma cruz. Você poderia fazer alguns ajustes para o seu CSS bem, para que s O. Talvez a necessidade é que você tem estilo diferente de páginas da Web. Eso em vez de ter esses, você pode apenas ter o rapper e ter todo o conteúdo dentro do rapper também. Então, novamente, dependendo de como você deseja apresentar esse conteúdo, você pode ter uma seção ou você apenas tem outra div aqui com todo o conteúdo para que possamos fazer Div e fechar essa div. E então dentro dessa definição, o que vou fazer é me livrar de um pouco disso. E talvez esta seja uma maneira melhor de representar sobre nós. Então ele tem todo esse conteúdo, ainda tem o rodapé, e ainda é Rece. Eyes é muito bom porque nós só temos uma área de contêiner média. Esta é uma maneira rápida de projetar algumas opções diferentes aqui. Você pode até mesmo querer manter o cabeçalho dentro. Então eu só vou voltar para o Index e deveria ter mais algumas opções de apenas coisas diferentes que você pode fazer e muito disso se resume a planejamento também. Eso Você tem que tratar as diferentes áreas que são tratadas dentro do seu site em diferentes formatos. Então, se você quiser criar um conjunto especial de classes ou estilos apenas para a área de contêiner completa , você pode fazer isso também. Então você não pode em alguns potting e assim por diante eso você pode querer usá-lo para serviços também. Ou talvez com os serviços. Você pode ficar feliz com a forma como os serviços estão sendo apresentados. E aqui é onde você não vai querer se livrar do seu cabeçalho. E há alguma flexibilidade como podemos ver sobre como nosso conteúdo é tratado. Então, os serviços e aqui nós potencialmente poderíamos ter um monte de imagens, e eu ia fazer uma quebra de linha rápida lá para ver como isso parece serviços. Então, só para que tenhamos algo diferente representado lá e novamente, há um número ilimitado de opções diferentes que podemos fazer aqui nós podemos fornecer. Então Lauren Pixel às vezes leva um pouco de tempo para carregar essas imagens. É por isso que está levando algum tempo lá seção de contato. Nós provavelmente queremos fazer a mesma coisa que fizemos lá onde nós apenas removemos tudo isso, manter o rodapé e ter nossos mergulhos em vez disso. E neste caso, eso Nós temos feito um pouco de estilo. Então talvez queiramos adicionar um pouco de estilo aqui para o rapper com um div dentro dele. E vamos fazer um descendente direto, definição de rapper e, em seguida, aqui dentro. Vamos sair em alguns potting 15 picaretas e assim por diante. Então podemos ter um pouco de opções lá o que podemos querer fazer. Então agora nós adicionamos em algum preenchimento e queremos fazer o mesmo para a área de contato. Então, entre em contato aqui, que era na verdade o rodapé. Então eu tenho muitos abertos agora. Todos eles parecem muito parecidos. Então é isso que eu estava realmente colocando na página errada lá. Então vamos fazer o div e contato para e este é o lugar onde podemos adicionar em um formulário de contato. Então, agora vamos dar uma olhada rápida no nosso site. Certifique-se de que tudo está bem. Formulário de contato Nome da empresa é seus serviços e assim por diante. E neste aqui, eu vou me livrar do cabeçalho, bem como você normalmente não pode ver isso dentro do formulário de contato. Então você só tem um formulário de contato simples, então algumas variações da maneira que as seções estão sendo produzidas e manuseadas. 21. Formulário de contato de atualização 25: na última lição, analisamos a criação de páginas adicionais. Então agora temos um formulário de contato. Então vamos abrir nossa página html de contato e realmente criar um formulário de contato e, em seguida, aplicar algum estilo para ele. Então talvez até tenha, como, um cabeçalho aqui para indicar formulário de contato e, em seguida, abaixo, Vamos abrir e criar executar e fazê-lo com um monte de dibs aqui para separar os diferentes campos. Então, normalmente, você pode pedir um nome. E então nós temos nosso campo de entrada tão apertado porque texto assim este seria o nosso nome inicial . Nós também queremos coletar e-mail, endereço para e-mail e alterar o tipo de e-mail, e por último, podemos ter um botão para e por último, que possamos fazer botão apertado. Ou poderíamos fazer um elemento botão real. Vamos apenas fazer um elemento botão e digite aqui vai ser enviar para enviar o formulário, então enviar roupas mensagem fora, fechar o botão e salvar isso. E agora, por último, eso fecha o formulário. Vamos dar uma olhada rápida e ver como isso se parece. Então agora temos um formulário de contato, então talvez devêssemos aplicar algum estilo a isso também. Então vamos atualizar um pouco desse estilo. E é por isso que nós realmente gostamos de link para fora para a mesma folha de estilo. Eso que isso nos dá a capacidade de fazer styling em todas as páginas. Então, se víssemos que havia um problema ou um problema, poderíamos facilmente atualizar nosso estilo. Então vamos primeiro dar uma olhada no formulário em. Vamos dar-lhe um máximo com. Então use esse Max com outra vez. E vamos dar-lhe uma largura máxima de pixels de 600 pixels. Eso Isso basicamente significa que ele vai redimensionar. Se for algo menos do que isso. Vamos dar-lhe uma fronteira. Então, um pixel borda sólida borda borda e pegar um raio de borda de cor clara para dar a ele esse efeito arredondado. E então nós temos forma, e nós temos algumas dibs dentro dessa forma. Então ele teve alguns potting por lá, então 15 picaretas em cada def e formulário, então nós temos entradas. Nós poderíamos apenas fazer a entrada, e nós também podemos atualizar algo para Button. Então vamos fazer um com isso com igual a 70% para o formulário para o botão com Então ele pode estar fazendo algo diferente entre os dois. Então é por isso que eu tenho eles separados lá fora e atualizar isso. Então talvez até queiramos centralizá-lo porque é que temos aquele texto lá. Assim, algumas opções diferentes que poderíamos resumir o é devido mesmo mawr criar as entradas em uma nova linha, se quisermos. Então, como vamos chegar a uma nova mentira? Essa entrada e isso é fácil. Podemos fazê-lo com display e fazer bloco de exibição. Então isso fará com que todas essas crianças aqui dos dibs para assumir isso completo com. E nós não temos que nos preocupar com isso porque ele está indo por padrão para ele. Tão refrescante. Agora temos nome, e-mail e a mensagem e talvez queiramos centralizar tudo. Podemos fazer isso como forro central ou podemos trazer isso. Então, dependendo de como queremos abordagem do dedo do pé, este é o número de opções diferentes. Então nós poderíamos fazer aqui em cima no texto pai, align e central. Então veja, se isso realmente resolve centrar esse conteúdo, vemos que ele centraliza isso, mas porque esse ar está sendo tratado como elementos separados. Na verdade, eles não estão se centrando lá. Então, alinhando o texto, eles não estão sendo tratados como texto. E é aqui que precisamos centralizar esses elementos da mesma forma que fizemos com o roqueiro. Então vamos pegar as margens aqui, ir até as entradas e tratá-las como elementos separados. Então agora eles estão no centro aqueles que temos o texto centrado novamente. Dependendo do quê? Suas preferências. Como você gosta, dedo do pé. Olha, eu vou realmente adicionar um pouco de altura a este botão. Acho que é um pouco pequeno lá, então não me escondi também. Apenas veja como isso se parece. Volte para trás tão geralmente gosta de ter botões maiores dio altura deitado e ainda precisa fazer alguns ajustes aqui, porque sua altura de linha é com o preenchimento. Está jogando fora onde não estava, não estava sendo centrado. Então agora para centralizar sexualmente esse texto e nós podemos fazer esse texto maior, bem como nós percebemos que ele é responsivo em. Talvez até queiramos um centro da forma também. Assim como o que fizemos aqui, podemos pegar todo esse elemento no vcenter ou poderíamos. Poderíamos identificar um elemento e fazê-lo dessa forma também. Então, um número de maneiras diferentes. Poderíamos manter isso, criar um contêiner para todo o formulário de contato e, em seguida, centralizar essas informações e movê-los para cima. Então, tudo dependendo de como queremos lidar com este enfraquecimento, centralizá-lo através de preenchimento também. Se quisermos eso. Se quiséssemos nos separar desse conteúdo, poderíamos centralizar isso também. É uma série de opções diferentes disponíveis para criar esses formulários de contato e realmente fazê-lo parecer da maneira que você deseja apresentá-lo. 22. 26 Dicas de prática e recursos: Agora que concluímos o site, temos que olhar e executar da maneira que inicialmente pretendíamos. Temos um formulário de contato e temos um pouco de uma variedade de diferentes tipos de páginas. E, claro, podemos continuar a construí-los e realmente personalizar este site de várias maneiras diferentes. Agora mesmo. Eso Uma das coisas que eu ainda quero cobrir dentro deste curso é como você pode utilizar o código-fonte na prática e torná-lo seu próprio. Agora cabe a você pegar o código-fonte, pegar o que aprendeu nas lições e aplicá-lo. Então, se você não tem um editor ou se você quer apenas fazer isso online, há um recurso muito bom na caneta de código. Eu Oh, então o que você pode fazer é copiar e colar o código-fonte lá, então eu vou apenas usar a página de índice e apenas copiar todo o HTML que está dentro do corpo. Coloque-o dentro da caneta de código dentro da seção HTML com JavaScript. Preciso adicionar na biblioteca da Pedreira J. Então, e isso está usando o suficiente para fazer. Podemos adicionar na biblioteca da GE Quarry. Ele liga automaticamente o CSS, a folha de estilo e o JavaScript para que eu possa pegar este código JavaScript, colocá-lo na seção JavaScript lá e abrir meu arquivo CSS e colocar essa informação no código-fonte CSS. E o que vai fazer é se transformar magicamente no site em que temos trabalhado. E o bom da caneta de código é que ela realmente oferece muitas opções e flexibilidade. Então, se, por exemplo, você quiser mudar a cor do plano de fundo ou se você quiser salvar um pouco da preocupação nerd, está tudo bem aí. Eso se eu quiser atualizar a cor de fundo, e eu vou fazer algo como verde, então realmente se destaca lá fora. Dizemos que vemos imediatamente o site está atualizando e mudando. Claro, os links não vão funcionar porque se você tentar pressionar alguns desses links, você não vai a lugar nenhum porque você está tentando vincular a um arquivo que não existe. Mas o ponto aqui é que esta é uma ótima oportunidade para realmente aplicar algum estilo diferente . Experimente algumas coisas diferentes e veja como ele é apresentado e seja capaz de visualizá-lo. Uma das coisas que estamos perdendo é o pensamento incrível, então podemos trazer isso também, onde podemos trazê-lo para o nosso complacente HTML dentro dessa seção de cabeça. Então isso nos dá a capacidade de trazer na frente incrível para o projeto. Então, vinculando a folha de estilo Teoh salvar e fechar. E então agora e eu também posso mudar a visão para que eu esteja em uma visão lateral aqui, eu possa facilmente redimensionar a forma como o site está sendo apresentado. E lá temos nossa barra de navegação, tudo funcionando e funcionando. Então, tome algum tempo, brincar com ele e obter uma boa sensação de como o site está funcionando e experimentá-lo por si mesmo e ver o que você pode fazer e ver como você pode personalizar este site para realmente torná-lo seu próprio e tomar o que você Aprendi com as lições anteriores e aplicá-lo com construção de sua própria versão personalizada do site