Site a partir de Scratch HTML CSS Design responsivo | Laurence Svekis | Skillshare

Velocidade de reprodução


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

Site a partir de Scratch HTML CSS Design responsivo

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

17 aulas (1 h 53 min)
    • 1. VÍDEO PROMOCIONAL

      1:33
    • 2. 1 Introdução de curso de design de site

      2:32
    • 3. 2 ferramentas e recursos do curso

      4:21
    • 4. Plano de Wireframe de 3 sites

      5:57
    • 5. 4 Crie layout de estrutura HTML

      8:40
    • 6. 6 elementos flutuantes

      11:36
    • 7. 7 Elementos de cabeçalho de atualização

      4:56
    • 8. 8 Menu de navegação de compilação

      7:20
    • 9. Atualização de área de logotipo de preenchimento de 10 margens

      9:39
    • 10. 13 atualizações de menu de navegação de estilo

      10:08
    • 11. 14 Conjunto de atualização de embalagem principal item selecionado no menu

      7:02
    • 12. 15 Use o jQuery para obter valor da página URL

      9:00
    • 13. 16 cursos dinâmicos jQuery

      5:18
    • 14. 18 Adicionar fontes da Web Google Fonts ao site

      2:21
    • 15. 19 estilos de página

      10:12
    • 16. 20 produtos de imagens redimensionar

      8:31
    • 17. Resumo de curso 21

      3:58
  • --
  • 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.

255

Estudantes

--

Sobre este curso

Quer aprender a criar um site completo do zero?

Aprendizado passo a passo de um projeto do mundo real, criando um site. No final do curso, você será capaz de expandir seu portfólio com diferentes desenhos de sites. Construa seus próprios sites usando HTML e CSS

  • O curso abrange tudo o que você precisa saber para criar um site do zero
  • Aprenda as ferramentas e recursos usados para criar código da Web
  • Aprenda HTML e quais tags podem fazer
  • planejar seu site, criá-lo de acordo com suas especificações
  • Construa sua estrutura HTML e adicione estilo para torná-lo incrível
  • É fornecido código fonte para que você possa entrar rapidamente para começar com seus próprios projetos
  • HTML e CSS no mundo real apresentado por um instrutor com mais de 15 anos de experiência em desenvolvimento da web.

Crie sites para o mundo real, veja como HTML e CSS se encaixam para criar sites utilizáveis que sejam totalmente responsivos e prontos para o mundo moderno.

Este curso vai apresentar habilidades e usos de visão geral de tags HTML em um design de página da web. Fornecer orientação sobre como aplicar estilos e propriedades de estilo comuns para fazer você site ficar bem.

Descubra o que é preciso para criar seu próprio site, você vai se admirar com o quão fácil ele pode ser.

Estou aqui para ajudar você a aprender desenvolvimento e design da web. Estou pronto para responder a quaisquer perguntas que você possa ter.

Nada a perder, há um reembolso de 100% se você não gostar desse produto

Quer saber mais, o que você está esperando dar o primeiro passo. Junte-se agora para começar a aprender a criar sites hoje.

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. VÍDEO PROMOCIONAL: Você quer aprender a criar um site completo do zero? Aprendizagem passo a passo de projetos do mundo real, criando um site Até lá para o curso, você será capaz de expandir seu portfólio com diferentes projetos Web. Crie seus sites usando HTML e CSS. Curso cobre tudo o que você precisa saber. A fim de construir um site a partir do zero, aprender as ferramentas e recursos usados para criar Web court. Aprenda HTML e o que as tags podem fazer. Planeje seu site criado de acordo com suas próprias especificações. Construa seu site. Sua estrutura HTML adiciona estilo e torná-lo incrível. O código-fonte é fornecido para que você possa entrar rapidamente e começar com seus próprios projetos. HTML e CSS no Mundo Real, apresentado pelo instrutor com mais de 15 anos de experiência em desenvolvimento Web, constroem sites para o mundo real. Veja como usar HTML e CSS e como eles se encaixam para criar sites utilizáveis que são totalmente responsivos e prontos para o mundo moderno. Este curso apresenta as habilidades e visões gerais. Os usos de tags HTML e um design de página da Web fornecem orientações sobre como aplicar estilo e uma visão geral das propriedades de estilo comuns para tornar seu site ótimo. Descubra o que é preciso para construir seu próprio site. Você ficará surpreso com a facilidade de criar sites. Estou aqui para ajudá-lo a aprender desenvolvimento Web e Web design. Estou pronto para responder a qualquer pergunta que possa ter. Você não tem nada a perder. Quero saber mais. O que você está esperando? Dê o primeiro passo. Juntou-se agora e comece a aprender a criar sites hoje mesmo. 2. 1 Introdução de curso de design de site: bem-vindo ao nosso curso sobre como projetar e criar um site a partir do zero. Dentro deste curso, vamos ter uma página HTML em branco e criar um site a partir dela. Meu nome é Lawrence, e serei seu instrutor para este curso. Eu sou um desenvolvedor Web, Web designer há mais de 15 anos. Eu realmente gosto de trabalhar em sites e realmente gosto de ver o que pode acontecer quando você aplica algum código CSS trazer tudo junto e fazer um site ao vivo. Então isso é algo que estou muito feliz por ter a oportunidade de compartilhar com vocês hoje . Vamos construir um site a partir do zero. Vamos usar alguns dos recursos, como um editor da Web criando nosso código HTML, criando três páginas HTML separadas, uma página CSS, bem como uma página de script Java. E depois vamos quebrar. Reúna tudo isso para criar um site como este, e a idéia para este curso é construir um site com o primeiro pensamento móvel. Então, vamos aplicar consultas de mídia, a fim de estilizar nosso site a partir das telas mais pequenas . Então isso é apenas cromo aqui e isso me permite simular diferentes tamanhos de tela, então nós temos em um iPhone. É assim que nosso site vai parecer, então você pode ver que é diferente do que parece sempre que nós redimensionamos. Nosso site tem tamanho de tela para os tamanhos maiores, mas tudo e todo o conteúdo fica agradável e bem apresentado de uma forma uniforme muito legível que é responsivo e amigável para usuários móveis, bem como usuários de desktop. Assim, qualquer pessoa de qualquer tamanho de tela será capaz de interagir com este site e utilizar todo o conteúdo que está no site. Ser capaz de digeri-lo, vê-lo realmente facilmente, eo conteúdo é apresentado de uma forma que os usuários podem interagir com muito facilidade. Então, uma das principais coisas aqui é que os menus de navegação. Portanto, este é sempre um desafio em eso móvel. Neste curso, vamos mostrar-lhe como criar um menu de navegação, e podemos ver que está realmente mudando de posição como na alteração do tamanho da tela. E temos diferentes variações de como apresentamos nosso menu de navegação, e tudo isso depende do que queremos e do que queríamos parecer, dependendo do tamanho da tela. Então, quando você estiver pronto, vamos começar a criar este site do zero 3. 2 ferramentas e recursos do curso: nesta lição. Eu quero rever algumas das ferramentas que eu vou estar usando garganta o curso, a fim construir este site. Então, uma das ferramentas principais algo e estar usando e uma das ferramentas que você precisa ter para criar sites é um bom editor. Então, se você já tem um bom editor, você pode ir em frente e usar esse. Se você está procurando tentar algo, você ou se você quiser tentar, aquele que eu vou estar usando dentro do curso, eu vou estar usando colchetes. Colchetes está disponível na Adobe. Tenha colchetes de site que eu devo você pode ir em frente e baixá-lo. É livre, código aberto, editor de texto, e é realmente muito útil do lado. Grande editor. Ele tem um monte de grandes extensões e adições que você pode adicionar a ele. Ele também tem essa visualização de vida que você pode fazer na edição de linha. É um monte de funcionalidade realmente elegante disponível entre parênteses. Então este é o que eu vou estar usando dentro deste curso alguns outros recursos que eu estou usando no curso também. Então eu vou usar o Chrome como meu navegador. E a coisa realmente legal sobre o cromo é que ele tem suas ferramentas Web surdas embutidas em cada instalação cromada eso Tudo o que você tem a fazer é fazer e inspecionar aqui e você tem este realmente agradável console surdo web se abrindo. E a coisa realmente legal sobre isso é que ele tem todas as informações, claro, do site o código-fonte CSS. Mas você também pode alternar os diferentes dispositivos para que você possa dar uma olhada em um site ou qualquer site e ver como ele seria parecido em diferentes dispositivos. Então aqui eu posso ver como vai ficar em um iPhone 6. Este é o site de colchetes que você pode rolar para baixo. Vemos que ele redimensionar é a página. Nós temos uma opção para atualizá-lo. Podemos invertê-lo também. Então, um monte de opções realmente legais e cromo, e este é um dos meus favoritos porque ele lhe dá tanta informação e realmente fácil de construir sites para dispositivos móveis para que você não precisa realmente ajustar o tamanho da tela. Você pode simplesmente ajustá-lo e alternar os diferentes momentos do dispositivo e realmente útil quando você está construindo sites. E, claro, hoje em dia, quando você está construindo sites, você tem que estar construindo e ciente do fato de que muitas pessoas vão estar acessando seu site via celular, então eles precisam ser amigáveis para dispositivos móveis e também para fins Seo, é outro recurso que vamos usar. Então vamos usar Loren Pixel. Este é um site onde podemos criar algumas imagens fictícias, algumas imagens de espaço reservado de preenchimento. Então, quando você está construindo sites, você pode não necessariamente ter todas as ferramentas, todas as imagens e gráficos e os projetos já feitos. Então você quer construir o seu site e você não tem estes s O. Aqui é onde nós usamos espaços reservados e outro espaço reservado que vamos usar neste curso é gerador de texto cego. Então nos permite gerar alguma Laura agradável, um, texto que poderíamos usar novamente para informações de espaço reservado, e isso nos permite construir um site devido com os pontos de conteúdo mesmo antes de termos o conteúdo. E um último recurso que vamos usar vai ser defeituoso. Canhotos Eso são ferramenta realmente puro que você pode projetar gráficos com para que você possa usá-lo para projetar seu quadro de fio para o seu site. Então eu vou rapidamente elaborar algo aqui para uma armação de arame antes de começarmos a construir nosso site. E tem muita necessidade. Construído em formas pré-construídas e conteúdo que você pode simplesmente arrastar e soltar em sua área de tela principal . Você pode adicionar algum texto. Você pode mudar a aparência e assim por diante. É uma ferramenta muito útil e útil. Tenha tudo o que você quer construir maquetes ou quer ter um gráfico ou gráfico rápido de como seu site vai fluir, como os usuários vão ser capazes de navegar pelo seu site. Então todos esses recursos serão usados dentro do curso. E novamente, eu encorajo você Teoh a verificar isso e trabalhar ao lado quando estamos passando pelas lições, a fim de aprender o conteúdo que estamos fornecendo e fomos ensinados discutindo durante as aulas. Então, a próxima lição vamos olhar para começar a construir nosso site do zero 4. Plano de Wireframe de 3 sites: Neste momento, nossa página Web está em branco. Então vamos abrir o editor dela e começar a criar algum conteúdo. Então eu tenho um modelo padrão aqui e apenas para executar rapidamente tenho o tipo de doc especificado sua abertura HTML fechamento tinha abertura, tinha fechamento corpo aberto e corpo fechado. Eso eu tenho tudo isso como modelo padrão. E então eu tenho minha porta de visualização aqui, então isso é essencial para dispositivos móveis. Tenho meus olhos de borda do Internet Explorer para torná-lo mais compatível. E o meu oito UTF. Então este é o conjunto de personagens que vou usar. Então vamos começar a digitar alguns de nosso código HTML. Então a primeira coisa que eu queria fazer é realmente vincular a uma folha de estilo porque eu vou estar usando uma folha de estilo separada. Então eu já criei estilo dot CSS. Então nós vamos estar trabalhando fora de dois arquivos separados dentro deste curso, e o primeiro 1 vai indexar dot html. Então este é, é claro, o ponto de partida para qualquer servidor. Quando é apenas ir, este é o domínio principal aqui é onde eu vou estar ligando para fora para uma folha de estilo, e os benefícios de vincular a uma folha de estilo são o fato de que você é capaz de manter o código CSS, bem como seu HTML separado. E isso realmente ajuda quando você está criando sites de várias páginas, especialmente porque você pode criar links para essa mesma folha de estilo e, em seguida, acessar as mesmas informações de estilo. Então, essencialmente, você tem que escrever uma vez e ligar para ele, também, quantas páginas quiser. Teoh utilizar essa folha de estilo eso alguns dos primeiros passos que vamos estar usando. Então eu vou saltar rapidamente para a folha de estilo, e eu posso começar a criar alguns que eu posso começar com o corpo e indicar o que eu quero minha família de fontes Teoh usar qual família de fontes que eu quero usar. E então, por enquanto, nós vamos apenas configurá-lo como um padrão aqui e nós vamos estar atualizando isso dentro deste curso também. Então, agora que temos nossa estrutura básica pronta para ir, vamos começar a planejar como queremos que nosso site seja parecido. E é aqui que usamos ferramentas como Cliffy porque isso nos dá a capacidade de realmente criar um quadro de arame e nos dar uma idéia melhor do que queremos fazer e como queremos criá-lo. Então eu só estou limpando o último e há um monte de realmente legal. Há muitas opções muito boas aqui. Eso O que eu queria fazer dentro deste curso é criar um site de duas colunas. Então, essencialmente, vamos ter a nossa área de topo. Então isso vai ser um pouco boxe do jeito que eu vou estar projetando. Então eu vou fazer isso a área de cabeçalho, e então eu vou ter que colunas tão em vista completa, porque, lembre-se, nós estamos fazendo um site que vai ser totalmente responsivo. Eso Vamos ter várias apresentações diferentes do mesmo conteúdo. Vai ser um site de duas colunas. Então nós vamos ter algo assim e então talvez até mesmo como um rodapé aqui em baixo , e vamos manter esse rodapé em linha com o conteúdo principal. Então fez área de duas colunas. Então vamos ter algo assim quando começarmos e, em seguida, aqui em cima, um top. Você pode ter talvez um local, uma área local. Então eu vou usar as caixas novamente para que você possa ter uma área aqui que contenha suas informações de cabeçalho local. Então eu vou apenas digitar o logotipo e, em seguida, sobre estas mãos deste lado. Aqui é onde podemos colocar nosso menu de navegação. Então eu vou apenas criar apenas outro quadrado lá para que possamos entender que este é o titular do lugar. Então eu acho que isso foi na verdade um quadrado. Então deixe-me me livrar disso, e eu vou fazer o retângulo. E então este vai ser o conteúdo do nosso menu de navegação, e isto é o que vai parecer no tamanho normal. E por isso aqui, vamos ter a nossa navegação. Agora, eso Nós vamos ter apenas algumas mensagens aqui, Cem ou texto aqui. E é para aqui que o nosso rodapé vai. Rodapé dolorido, informações de contato da empresa, direitos autorais e assim por diante. Então, essencialmente, isso é o que queremos fazer o site parecer. Então isso vai ser em uma área de trabalho. E então, quando ele diminui para um tamanho móvel, queremos mover este menu de navegação para dentro, talvez redimensioná-lo, manter as informações da empresa no topo e, claro, queremos que estas sejam armazenadas. Queremos área de texto, talvez área de texto um e texto para. Então queremos o texto um para ocupar completo com para ocupar completo com. Mas queremos empilhar sob o texto Área um. E esta é essencialmente a maneira que queríamos nos mover ao redimensionar a tela e ser capaz de apresentá-la aos nossos visitantes da Web. Então vamos começar a construir a estrutura HTML de seu site e, em seguida, vamos adicionar em CSS para estilizá-lo para torná-lo parecido e para obtê-lo para executar a maneira que queríamos executar quando o redimensionamento do usuário é seu navegador. Então isso está chegando no próximo acordo Lições 5. 4 Crie layout de estrutura HTML: agora está olhando para a nossa armação de arame. Podemos visualizar nosso HTML e como ele deve ser colocado em nossa página web. Então vamos abrir nosso editor e eu vou, uh, uh, fazer os estilos um pouco menores para que possamos saltar para o nosso editor e começar a criar nossa estrutura HTML. Então olhamos para a nossa armação de arame. Temos uma boa idéia de onde queremos começar e como queremos construir nosso site. Então percebemos que é essencial. Nós temos três seções separadas, então nós temos ah, seção de cabeçalho e talvez eu chame essa. Então a área do meio vai ser chamada de seção, e então este é o lugar onde nosso conteúdo iria e, em seguida, finalmente, nós temos uma área de rodapé, então eu vou criar todas as três áreas principais primeiro, e então eu vou construir dentro dessas áreas como nós tanto como nós trabalhamos através das diferentes lições e dentro desta seção. Então o que eu queria fazer é realmente querer ter que separar seções dentro daqui e com HTML cinco, há diferentes semânticas que poderíamos usar para indicar diferentes partes do nosso site. Então nós queremos ter um site de duas colunas. Nós queremos ter que separar áreas ou dois separadores separados aqui dentro também. Então podemos usar a seção. Podemos usar o artigo, talvez do que eu vou fazer é usar a seção e o site dele. Vou embrulhar as seções dentro de um div. Então, apenas assim, Então nós teríamos a seção um que eu vou dar um i d, a fim de ser capaz diferenciar e selecioná-lo fora do meu código HTML. Então talvez chamemos isso de primário. Então esta é a nossa área de conteúdo principal e então esta vai ser chamada. Então, como devemos chamá-lo? Secundário S. Então agora temos que limpar áreas de conteúdo. Nós temos nossa área de cabeçalho e dentro desta área de cabeçalho, nós realmente temos duas seções diferentes também. Então nós temos um que vai conter a navegação e esta navegação vai ter que se mover. Então nós vamos precisar separar isso também em um elemento diferente e bem como a empresa, informação e local e assim por diante. Então, uma série de maneiras diferentes de fazer isso. Mas vamos usar o padrão HTML cinco valete e, em seguida, dentro do Agora, é aqui que vamos criar nossa área de navegação. E então, novamente, talvez aqui nós vamos apenas usar um div em ordem separada. E, em seguida, dentro deste div terá são cada um e esta será informação da empresa. Então algo sobre a empresa e então talvez abaixo dela temos eu estava Esta é a melhor empresa. Então agora nós temos algum conteúdo lá, e aqui, eu vou fazer em H dois, então isso vai ser talvez algum tipo de introdução para a própria empresa, e então aqui vai ser sub-menu. São anúncios, links para qualquer coisa que queremos destacar em relação ao nosso conteúdo. Então vamos voltar para o nosso site, dar uma olhada rápida nisso e realmente não parece muito porque nós não aplicamos nenhum dos estilos ainda. Mas lembre-se, isso é apenas construindo a estrutura inicial e como queremos que nosso site se pareça . Vamos voltar ao nosso editor e terminar algumas das estruturas básicas que vamos precisar quando construirmos nosso site. Assim, dentro do rodapé eso podemos adicionar algumas informações de direitos autorais. Você pode definir o ícone de direitos autorais lá onde você poderia usar o seu próprio para empresa assim empresa, nome, endereço, endereço, entre em contato conosco para mais na íntegra e talvez algumas dessas informações de contato e menu de navegação . Então, normalmente, quando estamos construindo menus de navegação, você verá as listas ordenadas da ONU sendo usadas. Então vamos manter que vamos fazer isso também. Então vamos fazer como um menu de navegação realmente padrão. E quando você está aplicando CSS, realmente não importa o que tags ar usando, mas o quê? A razão pela qual usamos em listas ordenadas é porque ele apresenta o conteúdo de forma amore legível. Então, quando você está passando por aqui e você está olhando para o menu de navegação, então, sem o estilo, ele vai ser apenas em um nordeste, e isso vai apresentar talvez os três diferentes ou nós vamos realmente ter três peças diferentes, três páginas de conteúdo principais diferentes para o nosso site. Então vamos ter nossa página inicial, então aqui dentro deve colocar um caminhão, e isso vai ligar para nossa página inicial. Por isso, neste momento, vou deixar aquele haxixe ali, a fim de indicar que é um espaço reservado za. E então ele vai primeiro ligar para a página inicial, e eu vou copiar isso e duplicar. É o próximo link para fora talvez um sobre ou contato e talvez colocar alguns produtos terão uma galeria de produtos. Então talvez este seja, ah, site que o objetivo do site é destacar alguns produtos que a empresa está fazendo alguns. Talvez possamos ter uma galeria desses produtos e mostrar a eles. Então, vai ser muito simples página inicial da Web. Então página inicial que o usuário vem em produtos ou informações sobre a empresa, ou, ou, se você tem serviços, você pode listá-los lá ou até mesmo um portfólio. Se você tivesse um portfólio de diferentes seu Web designer e ainda um portfólio de sites diferentes , você poderia fazer isso lá e, em seguida, é claro, informações de contato. Então nós vamos manter nosso menu realmente minimizado porque nós não vamos realmente mudar o ícone quando a força do site. Então você pode ver que muitas vezes sempre que o site encolhe para baixo, nós temos este ícone de menu e, em seguida, há um menu suspenso, e nós podemos esses tipos de menus ar Bom se você tem um monte de páginas. Mas se você tem um site muito simples onde você tem três páginas do que às vezes é melhor apenas encolher isso e realmente só talvez ocupar 1/3 do espaço disponível cada um para cada um destes cada um desses itens de menu e nunca realmente ocultar o menu no redimensionamento. E vamos mostrar-vos como fazer isto à medida que progredimos através do curso. Oi. Vamos terminar isso e adicionar algum conteúdo fictício. Então esta vai ser a minha maldade. Eu ia chamá-lo de rapper porque é isso que eu quero envolver em minha área de conteúdo principal . E eu quero que o conteúdo fique sentado. Então vamos chamar isso de rapper. E se eu quiser que o rodapé caia em linha com as seções de texto, como fizemos em nosso design, eu preciso mover meu pé er realmente dentro do meu invólucro. E isso vai se tornar mais evidente à medida que adicionarmos em nosso CSS eso. Vamos gerar algum texto fictício. Então talvez tenhamos vários parágrafos. Traga os caracteres para baixo eso Talvez algo como três parágrafos selecionar todos e notar eu marquei fora que as tags de parágrafo HTML é isso só torna mais fácil para copiar e colar dentro de meu conteúdo web web. E acho que não vou mais separar isso. E talvez aqui vamos ter um texto fictício um pouco mais curto, talvez apenas alguns pontos destacados ou algo assim. Então vamos dar uma olhada nisso e colocar isso no conteúdo. Então agora novamente, voltando para o nosso site, realmente não parece muito. Tudo está meio empilhado lá. Nós não temos nenhum estilo aplicado, mas eu prometo a você que vamos chegar ao estilo e é aí que realmente a magia vai acontecer. Então tudo isso está chegando no próximo conjunto de lições. 6. 6 elementos flutuantes: Então, agora que construímos nossa estrutura HTML, estamos prontos para implementar algum estilo. E estilo é onde toda a magia acontece. Então, com apenas o HTML simples, a página da Web realmente não parece muito. Parece apenas um documento de texto normal. Não há layout, e certamente não se parece com o que nossos designers, mas podemos ver que nós realmente temos o conteúdo médio e as áreas de contêiner que podemos realmente começar a mudar e movê-los usando CSS para para apresentá-lo ao usuário mais de acordo com o nosso design original. Então a maneira que vamos fazer este site é porque vamos olhar para ele de uma primeira perspectiva móvel. E a idéia aqui é que nós queremos começar com a consulta de mídia, e o que as consultas de mídia fazem é que eles permitem que você apresente seu site em diferentes pontos de quebra e apresentado de diferentes modas. E quando estamos projetando a partir de uma primeira perspectiva móvel, então isso seria apenas ajustar isso para ser um celular. Primeiro, vamos desenhá-lo como o que vai parecer a partir de talvez um iPhone ou talvez um ecrã um pouco maior lá. Então vamos dar uma olhada no nosso site e é assim que ele vai ficar no iPhone. Então, quando estamos pensando em dispositivos móveis primeiro é que vamos definir esses pontos de ruptura. Então, sempre que o site fica um pouco maior, então talvez nós apenas dissemos que é responsivo, para que possamos ajustar dinamicamente o tamanho. Então queríamos apresentar diferente. Queremos apresentar de forma diferente, dependendo do tamanho da tela que os usuários estão entrando. Então, também podemos ajustá-lo para frente e para trás e esses diferentes pontos de ajuste. Estes ar os pontos de ruptura reais que precisamos olhar para quando estamos redimensionando nosso site e realinhando alguns dos elementos em nosso site para serem apresentados de forma diferente em telas diferentes . Então, a idéia é que em uma tela pequena, queremos ocupar que completo disponível com dessa coluna e em uma tela maior que realmente queremos usar para empilhar como dois separados nos chamou para separar colunas. Então vamos cuidar disso dentro do nosso estilo, e já temos ligado ao estilo dot CSS. Então agora eu posso abrir style dot CSS e Aiken começar a trabalhar com isso. Então, primeiro de tudo nós criamos em I d primário, nós criamos um 2º 1 secundário. Assim, somos capazes de identificar facilmente esses contêineres e acessar e aplicar alguns CSS a eles. Então nós temos primário, e depois aqui, eu posso aplicar isso ao secundário e vamos definir algumas larguras padrão. Então, o que eu quero fazer é criar a partir de um tamanho pequeno e, uma vez que o tamanho é realmente maior, é quando eu quero que minha tela de mídia atualize, altere e aplique estilos diferentes. Então, basicamente, o que isso está dizendo é que se nós temos um mínimo com off para 80 então para 80 provavelmente seria o menor com que nós trabalharíamos para celular e neste ponto de ruptura. Então, se for maior do que 4 80 ou se for maior do que a nossa menor tela do que eu quero que este CSS seja aplicado ao resto da página. Então vamos construir nosso CSS padrão aqui e, em seguida, dentro da consulta de mídia. Este é o lugar onde vamos cuidar dessa personalização para os diferentes tamanhos e porque estamos começando com uma primeira perspectiva móvel é que vamos começar a construir e definir nosso estilo como ele parece quando ele ultrapassar 80. E isso é diferente do que com consultas de mídia. Você tem a opção de fazer homens com e Max com. E a diferença aqui é que quando atingimos o máximo com o que temos algo aplicado nos homens com leva do outro lado onde os homens com tem que ser para 80. Então vamos dar uma olhada nisso e talvez eu possa aplicar uma cor de fundo no início para que possamos realmente ver algumas mudanças realmente agradáveis e provavelmente o suficiente para remover essas porque isso vai realmente fazer o nosso site meio que parecia muito ruim com esses cores. Mas isso é apenas para ilustrar o ponto de ruptura. Então talvez eu possa fazer isso Red para que ele realmente se destaque quando ele quebra. Então vamos atualizar isso e vemos isso com os homens com sempre que nossa página da Web é maior do que o 4 80 então nós temos esse estilo aplicando, e eu só vou rapidamente virar para Max com para que possamos ter uma melhor noção do que é vai parecer do outro lado. Então o que você acha que vai acontecer aqui com o máximo quando eu atualizá-lo, vemos que nosso estilo se foi. Mas quando o encolhemos, é quando o nosso estilo volta. Então essa é a diferença real entre minuto e Max com ele depende da perspectiva e como o seu edifício. E porque neste caso eu quero começar jogando todo esse estilo para o menor tamanho e ter os pontos de quebra no tamanho maior, eu vou começar com os homens com ele faz algum tempo se acostumar a trabalhar com os diferentes homens sábio e bate juízo. Você também pode fazê-lo no meio daqui, onde você tem ele em um máximo e você pode fazer várias combinações para que ele pode realmente ficar bastante complexo também. Se a necessidade está lá, uh, então vamos definir alguns básicos com assim por diante quando é menor que 4 80 nós só queremos tomar o 100% completo e 100% é o padrão na div, então não temos que nos preocupar com isso, mas temos que nos preocupar com isso quando ele tira quando o tamanho é realmente maior do que para 80. Então é aqui que, onde e por que precisamos adicionar aqueles com. Então vamos ocupar 60% do com. E quando você está projetando de forma responsável, você precisa sempre considerar que geralmente é melhor trabalhar com MAWR sem tamanhos realmente fixos com esses tamanhos fluidos estavam usando porcentagens apenas por causa do fato que ele dá você mais flexibilidade na apresentação desse conteúdo. Eso eu vou realmente definir isso para 35 porque nós vamos ter um pouco de espaçamento no meio. Há para que não queiramos ocupar esse espaço completo e disponível. Vou definir para 60 e 35. Vou manter as cores por enquanto até adicionarmos algum conteúdo. E então nós realmente aplicamos esse olhar e sentir o que queremos, porque isso vai nos ajudar a ilustrar onde é esse ponto de freio e vamos ver a mudança de inteligência. Então uma outra coisa que eu preciso incluir, e porque isso vai ser isso vai ser um site de duas colunas. Então vamos dar uma olhada nisso e eu vou realmente torná-lo maior porque nós não somos capazes ver nada. Então vemos que agora nós temos os 60% nós temos os 35%, mas eles não estão realmente alinhando. E é aqui que outra parte importante da propriedade que precisamos adicionar usando CSS e esses flutuadores de ar nos permitem especificar onde esse contêiner em particular vai ficar. E com as duas colunas, é muito fácil e simples. Então nós temos as primárias flutuando para a esquerda e lembre-se, volta ao nosso diagrama aqui que o primário ou ele deve realmente ser um pouco maior, e nós queremos fazer este um pouco menor. Isto não vai ter tanto conteúdo. Então temos este no lado esquerdo, este no lado direito. Então, se as primárias flutuam à esquerda, onde acha que o secundário vai flutuar? E se você disse certo, você está certo. Então vamos dar uma olhada nisso e ver como ele se parece. Então, veja, agora estamos forçando o conteúdo a se alinhar corretamente e há uma coisa que apareceu aqui que vemos que nosso rodapé está realmente sendo exibido entre nosso conteúdo aqui. E isso é porque a maneira como esse conteúdo é tratado, que ele automaticamente tenta se alinhar no espaço disponível e especialmente se você estiver empurrando para a esquerda e para a direita do que ele vai dizer, que ele automaticamente tenta se alinhar no espaço disponível e especialmente se você estiver empurrando para a esquerda e para a direita do que ele vai dizer, Há um pouco de espaço disponível aqui. Deixe-me mudar-me para lá porque parece estar disponível. E então é aqui que precisamos fazer uma clara no rodapé ou no flutuador, esquerdas e taxas. E, às vezes, esta é uma daquelas coisas que as pessoas são apanhadas onde flutuaram esquerda, flutuam para a direita. Mas eles sempre esquecem de adicionar o claro e o claro é parte essencial da estruturação da página Web porque você não quer isso. Então, eu não me identifiquei. Só vou usar o elemento rodapé. Mas se você re usar rodapé dentro do seu código, em seguida, apenas ter cuidado para que você é capaz de identificá-lo corretamente, então eu provavelmente poderia apenas fazer I d rodapé em vez disso também. Por isso, precisamos de esclarecer. Precisamos de limpar estes carros alegóricos para apresentarmos o nosso conteúdo forma adequada. Então vamos dar a este uma cor de fundo também, para que possamos realmente ver onde estão os contêineres. E isso é realmente útil quando você está construindo sites que você é capaz de colorir e ver onde o conteúdo real está sentado onde seus limites do contêiner estão, especialmente se você não estiver usando nenhum tipo de espaços reservados, porque isso então é realmente difícil descobrir onde seus limites estão e assim por diante. Então você pode até mesmo às vezes você vai encontrar pessoas Adam como uma fronteira ou algo assim. Então talvez eu possa adicionar ponto no bloco sólido para que você possa realmente ver onde seu conteúdo está caindo. Então eu estou saindo em um monte de fronteiras e nós vamos realmente remover essas fronteiras. Então, é atualizar isso, e podemos ver onde nosso conteúdo está sentado. E, na verdade, tenho uma ideia melhor com a fronteira. Então talvez eu possa adicionar usando uma classe, então eu vou apenas criar uma borda um, e eu vou adicionar isso como uma classe porque isso realmente vai tornar mais fácil para nós remover essas fronteiras mais tarde. Então aqui pode aplicar classe e eu posso aplicar classe para cada uma dessas seções também. Para que tenhamos essa fronteira que possamos ver. E também eu posso aplicar um Teoh o snap e aplicar vai t aqui e ali e apenas rapidamente dando uma olhada e eu não acho que eu tenho todos eles. Então vamos atualizar isso e ver como ele se parece para que possamos ver que a forma como nosso site é estruturado e definido, estamos recebendo esse tipo de estrutura semelhante a aqui. Ele está realmente começando a olhar e apresentar-se Mawr em linha com o nosso design. Então, a próxima lição vamos continuar a trabalhar sobre isso e realmente construir a maneira que queremos nosso website toe Olhe, vamos adicionar um pouco de preenchimento para estruturar este texto um pouco melhor e algumas outras coisas que estamos vai adicionar para torná-lo mais apresentável. E claro, vamos estilizar este menu de navegação. Portanto, não é mais uma nova lista ordenada e realmente se apresenta ao usuário como um menu de navegação. Então tudo isso e muito mais está chegando 7. 7 Elementos de cabeçalho de atualização: Uma das minhas partes favoritas de design e desenvolvimento de sites é a parte em que, na verdade, as coisas começam a se unir e parecer com o que meu design original era. Então, está na última lição com que facilidade podemos criar as áreas de contêiner e movê-las pela página e posicioná-las onde queremos que elas aterrem. Então eu vou fazer isso aqui para a área de cabeçalho porque esta é na verdade a parte que menos se parece com o nosso design real. E então esta é a parte em que eu quero realmente me concentrar e trabalhar um pouco mais. Então vamos abrir o nosso editor e saltar para a nossa folha de estilos e fazer algumas atualizações para a área de cabeçalho. Então o cabeçalho que talvez a primeira coisa que precisamos fazer é apenas quebrar, que as duas seções, temos nosso primeiro 1 aqui e então temos nosso 2º 1 Então talvez a melhor idéia agora é realmente quebrar isso e apresentá-los em diferentes áreas dentro desse conteúdo. Então nós sempre queremos esta seção dispersa fez aqui para flutuar para a esquerda porque esta vai ser a área de cabeçalho principal e também queremos talvez alinhar o centro de texto. Então vamos usar o mesmo truque que usamos aqui quando dividimos nossas seções primárias e secundárias. Em vez disso, vamos nos certificar de que atualizamos nossa área de cabeçalho aqui. Então vamos dar uma olhada no nosso código e como estamos identificando este. Eso, temos o cabeçalho. Temos um def, então não temos um def chamado. Então talvez seja melhor atualizarmos isso e adicionarmos um nome. Então talvez eu possa adicionar em algo como logotipo eram nome da empresa ou algo assim que poderíamos identificar esta seção com e também queremos identificar são agora. Então talvez até mesmo a melhor idéia aqui é dar cabeçalho em I d de cabeçalho e, em seguida, identificá-los dessa forma. Então agora sabemos que estamos trabalhando com Header e nós só temos uma morte dentro deles e às vezes você quer ter muito cuidado com a identificação de elementos porque se você adicionar mais alguma doença e você vai aplicar estes estilo para que mergulhe também, então tenha cuidado com a maneira que você realmente apresentar seu CSS e você está fazendo sua seleção. Mas porque eu só tenho aquele Devyn lá, eu posso me safar apenas fazendo mergulho de cabeçalho também. E então eu também posso apenas sair com o Header Nav porque este é o meu agora que está dentro da minha área principal. Então vamos usar o mesmo formato que fizemos aqui em cima, onde podemos puxar as coisas, do lado esquerdo, puxar as coisas para a direita conforme necessário. Então precisamos de primeira coisa que precisávamos fazer era realmente especificar o seu disponível com e lembre-se novamente, estamos aqui na consulta de mídia porque eu quero ocupar talvez o espaço total disponível quando nós re tamanho e nós re encolhê-lo. E o que isso vai fazer é isso realmente vai mover a navegação do menu de volta para a posição aqui. Então, sempre que o reduzirmos, teremos nossa área de navegação onde você tem uma empresa, informação e nosso local, mas temos mais imóveis. Temos muito espaço em branco aqui, e é por isso que queremos puxar essa navegação para o site da mão direita. Então vamos dar-lhe um com e apenas rapidamente olhar para ele e dizer que você está com Talvez nós podemos fazer 50% ou podemos fazer um 45% para a div. E não sei se talvez possamos adicionar uma cor lá também. Ou talvez possamos simplesmente deixá-lo sem a cor, porque nós temos aquele estilo lá e este vai ser flutuante. Então, de que lado é que isto vai flutuar? Isto vai flutuar à esquerda e depois a navegação é. Vamos manter este em 45 também . Então note que não precisamos fazer o 100% completo se quiser ter algum espaçamento entre lá . Então, é refrescar isso. Então eu só tinha que voltar a salvar lá. E agora, quando o atualizamos, vemos que temos nosso local aqui no lado esquerdo, nossa navegação no lado direito. E quando nós redimensioná-lo, vemos que ele realmente cai no lugar e no celular. Isto é o que queremos fazer. Queremos ocupar muito dos nossos imóveis disponíveis quanto possível, e a única coisa que agora precisamos atualizar também será este menu de navegação porque não queremos que ele seja apresentado ou verticalmente. Queremos apresentá-lo horizontalmente para que ele ocupe menos imóveis. E este também é o caso para sempre que é em uma tela grande que queríamos ser apresentados horizontalmente em vez de este tipo de lista moda, então eu vou cuidar disso na próxima lição. 8. 8 Menu de navegação de compilação: nesta lição. Vamos refazer nossa navegação para ser um bloco em linha e para se exibir horizontalmente para realmente fazer parecer mais como um menu. Então vamos até aqui para a nossa área de estilo principal. Então, fora da media query, porque queremos este estilo, os valores horizontais realmente ser adicionados também quando ele está em uma tela pequena, porque nós só temos três itens dentro do nosso menu de navegação, então nós queremos apresentá-lo dentro dessa forma, eso pode ser uma das primeiras coisas que queremos dar uma olhada é atualizar o preenchimento porque quer ter algum preenchimento em torno do menu de navegação que não está sentado exatamente no canto superior. Vamos dar 20 picaretas, e talvez só queiramos ter aquele estofamento no topo. Mas queremos puxá-lo todo o caminho para a esquerda e para a direita. Eso enfraquecer, configurar o preenchimento dessa forma, e isso vai nos dar um pouco mais de espaçamento lá para ver essencialmente, acabamos de mover esse menu de navegação para baixo e vamos realmente entrar na parte mágica realmente agradável de barcos. CSS é a maneira que podemos facilmente transformar esses tipos de menus. Eso uma lista Norden. Então, qualquer valete que contenha uma lista A Norden s precisamos nos livrar desse padrão em listas ordenadas estilo, e isso está contido na UL. Então nós precisamos definir nossa separação 20 e eu realmente vou encolher isso e abrir uma pré-visualização de vida e para que possamos realmente ver o que está acontecendo aqui. Esta é uma das coisas legais sobre colchetes é que nós temos essa capacidade de fazer uma visualização de vida e você realmente não precisa ter nenhum servidor em execução. Então você pode ver aqui que, como nós vamos estar atualizando e salvando, você vai vê-lo mudando aqui, ou espero vê-lo mudando aqui do lado direito para sobre isso em preenchimento zero. Lá sobre isso é automaticamente já movido sobre esses pontos de bala. Eso vemos que temos nossa fronteira original aqui para aquele contêiner, e os pontos de bala já saíram. Então, se eu fosse me livrar disso, eles se mudaram de volta. Então é isso que estamos fazendo quando estamos atualizando e removendo esse padrão na lista ordenada . Eso outro. Há para se livrar completamente desses pontos de bala e nós vamos apenas definir isso para nenhum . Assim que fizermos isso , perdemos os pontos de bala. Então nós nos livramos da maior parte do que potting, e nós também podemos fazer margem e definir margem para zero também. Portanto, isto é apenas para o caso de haver algumas questões de margem lá. E assim que salvarmos isso, isso se atualiza. Então vamos fazer uma transformação dos itens da lista NAV. Então, agora que estamos selecionando esses itens elevadores e nós apenas exibimos, há várias maneiras diferentes de exibi-lo. Por padrão, é bloco. Mas quando fazemos na linha e vemos que muda automaticamente para aquela horizontal. Então o estoque todo um após o outro. E se eu exibir no bloco de linha, então isso vai me dar alguns dos que bloco as características do bloco, mas também me dá e apresenta esse item de lista na linha, e então, por último, vamos atualizar nosso amor. Então, qualquer um que tem uma âncora lá e nós podemos adicionar em algum preenchimento em torno de lá que eles se destacam um pouco mais então vamos tentar adicionar e preenchimento de 15 talvez adicionar um preenchimento de 10. Podemos ver isso agora. Eles já estão ocupando o espaço alocado disponível. E se fizermos algo como cor de fundo para que possamos realmente vê-los um pouco melhor, podemos ver que todos esses itens são apresentados. E agora vamos adicionar algum estilo adequado aqui. Então estúdio e nós vamos fazer este em pairar. Então, agora passe o mouse e faria uma cor de fundo diferente, talvez quando estiver pairada, ou talvez apenas uma cor diferente. Então, talvez, quando pairarmos, mude para chocolate. Então agora vemos quem pairamos e uma das outras coisas para querer se livrar disso sublinhado para que a decoração do texto mudou isso para nenhum que se livra desses sublinhados. Então, uma das principais coisas que os usuários sempre gostam é essa mudança de cor de fundo, então você pode fazer como uma mudança sutil ou algo assim. Então vamos, uh, vamos mostrar a vocês como isso parece agora. Então, sempre que passar o mouse sobre ele e talvez isso deve ser esperar, então fazer mais de uma escala de cinza sentir dedo do pé nosso design eso agora sempre que passar o mouse sobre ele estavam sendo apresentados com o seu conteúdo dessa forma, Sempre que eu passar por cima para este outro exemplo que Eu tinha aqui s nós vamos ver que isso é assim sempre que nós passarmos sobre ele iria ver o efeito acontecendo. E então, é claro, mesmo nas telas menores. Então vamos beber. Então ele ainda tem esse efeito da mudança de cor de fundo eso sempre que eles são selecionados eso com celular é um pouco diferente porque ele não leva o pairar da mesma maneira porque você não quer ser capaz de selecionar as coisas como você está se movendo isso é considerado um arrasto sobre ele s assim, em vez disso, o pairar é quando você clica. E essa é a seleção dele. Então é um pouco diferente, mas funciona de maneiras diferentes na diferença. Dispositivos diferentes. Então, novamente, dependendo do seu dispositivo, ele pode ser apresentado de maneiras diferentes. Então nos livramos disso que agora podemos pairar sobre ele. Então, na próxima lição, vamos continuar a construir nossa aparência do nosso site, talvez voltar ao design original e olhar para o local e ver como podemos apresentar o logotipo um pouco melhor. E também precisamos puxar este para este lado direito, porque dentro do nosso design original, são novatos aqui à direita, e precisamos manter isso em linha com nosso layout original e plantas. Vou adicionar ponto rapidamente. Assim são agora e sua principal área de navegação. Então é aqui que podemos puxar isso para o lado direito e nós realmente precisamos deste Onley dentro da consulta de mídia. Então este é outro daqueles que são específicos para os diferentes tamanhos. Então vamos fazer uma linha de texto, e nós somos apenas uma linha de texto para o lado direito. Então isso é apenas nas telas maiores. E, na verdade, você pode copiar isso aqui também, para que não estejamos usando uma propriedade separada lá. Então texto a linha, nós temos ela flutuou para a direita e com, dê uma olhada rápida nisso e veja como ela se parece. Então agora ele está puxando o texto para o lado direito, e uma vez que nós nos livramos dessas fronteiras, ele vai ficar muito melhor em inchar 9. Atualização de área de logotipo de preenchimento de 10 margens: nesta lição. Quero apresentar outro ponto de ruptura. Então temos trabalhado no menor ponto de ruptura aqui. Então, sempre que temos em 4 80 isto é ou 4 80 A menos que seja assim que queremos que o nosso conteúdo apresente alguém passe por lá, então obtemos as duas colunas e assim por diante. Então, normalmente você pode ter mais do que apenas um ponto de quebra que eu quero adicionar em um segundo ponto de interrupção e talvez nós vamos definir isso mais para tablets. Então eu vou seguir as mesmas linhas aqui onde eu tinha minha tela de mídia em 480 e eu vou levá-lo para talvez 700 apenas vou criar isso aqui em baixo. Então, no mínimo, com 700. E aqui é onde o que eu quiser acontecer. Quero que aconteça às 700. E uma das coisas que eu quero mover e fazer isso acontecer é sempre que são assim a nossa barra de navegação e no menu de navegação. Então vamos dar uma olhada nisso de novo. Então, agora, sempre que atingimos 700, vemos que o temos movendo-se mais. Então isso nos dá a capacidade, um pouco mais de flexibilidade em nosso design, e nós podemos realmente adicionar em algum estilo adicional, dependendo do tamanho da tela que ISS. Então nós podemos querer ter o nosso menu lá no lado esquerdo e em vez de puxado para a direita porque se nós temos uma tela de 700 nós podemos querer mantê-lo mais centrado e apresentado ao usuário. E então, é claro, nós encolhemos todo o caminho para baixo. Então nós vamos ter o nosso são com o ano de todos esses ícones disponíveis. Então também podemos acrescentar algo aqui onde queremos ter talvez um homem com ou algo assim . Então vamos ter um mínimo com 4 80 ver como isso acaba, porque antes, quando estamos encolhendo, eso eles estão estocando. Então agora temos um homem com adição lá dentro. Então vamos voltar para a nossa área de logotipo e trabalhar um pouco mais sobre como queremos que isso seja apresentado. Então este é o nosso site até agora, e nós temos o ponto de ruptura em 480 então às vezes você pode querer ter outro ponto de ruptura para talvez tablet dispositivo móvel ou algo assim. Então você pode querer ter para uma tela um pouco maior outro ponto de ruptura. Então talvez onde o menu fica posicionado e assim por diante. Então vamos dar uma olhada nisso e adicionar outro ponto de ruptura. E isso vai ser feito da mesma maneira que nós adicionamos em nosso 1º 1 onde nós tivemos nossos homens com nossa tela de mídia. Então eu vou copiar esta parte aqui e adicionar isso em baixo. E por este tempo, vamos definir nosso ponto de ruptura em 720 Então este seria mawr projetado ao longo das linhas do nosso agora nosso tamanho talvez poderia ser como um tablet ou algo assim. Então nós temos a capacidade de Adam cores diferentes e mudanças também. Então vamos descer aqui, e talvez eu queira me livrar desses 45%. Este flutuador direito, e eu quero adicionar isso aqui. Então vamos fazer assim e ver o que acontece agora, seja lá o que for que atingimos o ponto de ruptura. Este é o lugar onde ele vai se reajustar naquele ponto 700. Então qualquer coisa menos que 700 e, em seguida, sempre que superamos esse ponto de ruptura de 720 Vemos que agora ele está ocupando esse tamanho real até aquele ponto. E então sempre que temos 7 20 ocupa menos espaço. Então vemos aqui que temos este flutuador direito. Mas agora uma das coisas que precisamos fazer também é atualizar este aqui também para coincidir porque agora que eu o movi para fora daquela área flutuante, precisamos mantê-lo consistente porque é aí que temos esse estouro dos dois elementos diferentes. Então, agora, quando eu encolho, eu posso ver que eu estou apresentando muito melhor de uma forma muito melhor. E esta linha têxtil, certo? Também não parece certo. Então talvez possamos fazer texto, alinhar, centralizar, e novamente, dependendo do que seu design é, você pode querer ter algo diferente para esses diferentes pontos de quebra e assim por diante. Então isso é o que temos agora sobre os diferentes pontos de ruptura. Ainda mantemos a informação da empresa dela aqui no topo e a nossa mensagem. Então vamos trabalhar nisso um pouco e aplicar um pouco de estilo para que pareça um pouco mais apresentável. E eu também quero adicionar, ah, margem na parte inferior desse cabeçalho inteiro. Então vamos atualizar isso, porque isso não parece exatamente certo agora. Então vamos fazer Cabeçalho e só vamos adicionar, uh, margem na parte inferior, submerso fundo. E vamos fazer 45 picaretas no fundo. Então vamos ver como isso se parece agora. Então não é o site certo. Então vamos saltar para este exemplo e podemos ver isso de volta para o nosso código. Vemos que ele realmente não está movendo nada disso para baixo, e isso é porque nós o temos flutuando. Então, a fim de criar esse espaçamento abaixo, provavelmente deve adicioná-lo aqui no topo na outra tela de mídia. Então vemos que agora, sempre que adicionar isso, ele cria o espaçamento, e ele é realmente encontrar nos dando esse espaço e que nós precisávamos para o nosso menu. Então é um pequeno truque lá. Quando eu atualizo isso agora está espaçado um pouco melhor. Veja lá. Ele é adicionado em nossa margem na parte inferior, e isso realmente vai funcionar e parecer muito melhor apresentado muito melhor que nós estamos movendo esse conteúdo para baixo. E, claro, sempre que chegarmos ao tamanho maior, não precisamos mais nos preocupar com as margens porque há esse espaçamento já construído. E se quiséssemos ter espaçamento entre a área local e a área de conteúdo principal, poderíamos adicionar isso também. Vamos voltar para nossas atualizações CSS. Alguns dos que eso local que tinha dado em I D ou nós apenas chamá-lo cabeçalho e informações da empresa . Então vamos acessar aquele ali e adicionar um pouco de estilo a ele. E podemos fazer isso aqui um top porque não estamos sendo muito específicos. Queremos que pareça, talvez preenchendo e estilizando informações por lá como nós fazemos. Então vamos pegar o contêiner principal, o cabeçalho parentis, e então vamos selecionar a div que está lá embaixo. E agora Adam, alguns vasos por lá. Então talvez 10 picaretas e eu deva levantar esta de volta. Então agora podemos ver um pouco mais do que está acontecendo. Claro, este é um ser aplicado a qualquer tamanho porque este é qualquer tamanho, vamos aplicar o mesmo estilo. E aqui é onde você aplicaria cores e assim por diante, dependendo de como você quer que ele pareça, é aqui que você pode aplicar toda essa informação. Então nós também poderíamos ser mais específicos sobre a quantidade de altura da linha que temos no H um e assim por diante. E é aqui que acrescentamos toda essa informação. Então eu não gosto do fato de que o pequeno texto há tanto espaçamento Eso No, este é um padrão aqui, então nós podemos querer ajustar isso também. E queremos talvez um pouco de espaçamento à esquerda. Queremos ser muito específicos naqueles H. Então talvez eu pudesse ir lá e eu poderia para que pudéssemos trazê-lo um pouco mais apertado. Poderíamos fazer algo como mentir. Assim, a altura da linha nos permitiria especificar a altura da linha que está disponível. Então nós os vemos. O que? Quanto maior a altura da linha, mais o espaçamento é criado. Há para que pudéssemos movê-lo, Teoh, o que quisermos que pareça para que possamos realmente encolhê-lo lá em baixo e fazer com que pareça exatamente da maneira que queremos apresentá-lo aos usuários. Então, quando eu atualizar isso, isso parece um pouco mais melhor e apresentado. Tem um pouco de espaço no lado esquerdo. Então, na próxima lição, vamos continuar a trabalhar nisso e obtê-lo, Teoh, Teoh, parecer mais com o que nosso conteúdo está sendo apresentado. Então notamos aqui que nossa área principal de rapper aqui para as duas colunas é menor, os rodapés menores. Então isso é algo que precisamos adicionar na próxima lição e, em seguida, fazer com que ela pareça e apresente da maneira que descrevemos no início. Então tudo isso está chegando na próxima seção. 10. 13 atualizações de menu de navegação de estilo: Então, agora que construímos nossa estrutura básica do nosso site para que possamos ver que ele re tamanhos e o menu se move e tudo parece bastante bom s e eu posso remover todas as fronteiras que eu tinha anteriormente que estávamos usando mais cedo. E eu poderia me livrar de algumas dessas cores que temos usado para o estilo, a fim de torná-lo um pouco melhor. Então talvez o que eu quero fazer é simplesmente removido que faria. E podemos sempre trazer isso de volta se precisarmos. Se queremos adicionar em guerra ao nosso design uma das coisas quando você está projetando seu site , é sempre uma boa idéia usar, como grandes cores de escala, eso talvez em vez de ter este laranja vermelho brilhante e abelhas, queremos atualizá-las para serem mais de uma cor acinzentada muito semelhante ao que estamos fazendo aqui. Então eu vou me livrar das primárias. Eu vou apenas atualizar que para ser branco porque na maioria das vezes você quer que seu conteúdo principal seja em um branco com texto preto. É atualizar que para Gray e, em seguida, talvez o nosso rodapé onde talvez fazer o nosso rodapé realmente escuro para um fundo de bloco e um texto branco faz esse bloco e faria o nosso texto mudou que esperar se destaca. Talvez nem tenhamos uma altura mínima. Então talvez uma altura mínima de 200 fotos que pode ser um pouco demais. Assim, 100 fotos adicionarão algum preenchimento para o texto. Então talvez 45 picaretas para dar tapinhas. Então é bom e centrado lá, e nos dá um pouco de espaço. Então eu vou trazer este aqui para baixo também para que possamos ver aqui no lado esquerdo como ele está sendo apresentado. Eso também quer se livrar deste azul padrão no nav e talvez apenas adicionar mais de uma grande escala novamente. Isso nos dará uma idéia melhor das cores que queremos usar antes de apresentarmosas cores. Isso nos dará uma idéia melhor das cores que queremos usar antes de apresentarmos E talvez isso seja bom. Então sabemos que queremos ter uma cor clara, e sempre que passarmos por cima dela uma cor mais escura, queremos inverter as cores da fonte, então talvez outra coisa. Por padrão, queremos nos livrar desse padrão de azul e talvez até mesmo apenas fazer preto por enquanto e talvez atualizar o esperado lutado para ser ousado. Então isso dará à fonte um pouco mais. Então ele se destaca um pouco melhor e também quer ir saltar para o cabeçalho e atualizar isso também para que tenhamos uma cor de fundo para ser capaz de diferenciar nosso cabeçalho, então talvez, uh, uh, cor mais clara para o fundo do cabeçalho. E esta é uma cor que vai se aplicar a toda essa seleção. Então, às vezes, você pode querer dividi-los em vez de tê-los nas consultas de mídia . Você pode querer ter as cores diferentes, as cores padrão, que vai usar direito dentro desta parte superior e talvez até mesmo criar uma seção separada para cores Eso Para esta parte, eu só vou fazer cabeçalho e eles são vai adicionar uma cor de fundo lá e vamos fazer um fundo. Vamos fazer uma cor de fundo para mantê-la dentro desta escala de cinza, e talvez também queira adicionar uma cor de borda também. E talvez possamos fazer isso como preto e agora percebemos que esses itens de navegação então sempre que devemos redimensioná-los eram OK, mas porque temos essa cor de cabeçalho aqui s então isso está realmente jogando fora eso precisamos fazer uma atualização para isso também. Então vamos suspirar Vamos atualizar nosso cabeçalho e eu vou flutuar o cabeçalho por padrão. Então esta é toda a área de cabeçalho. Vou flutuar para a esquerda. Vou dar-lhe uma largura de 100% move totalmente para trás, e agora podemos ver que ele está preso naquela parte de navegação. Então, agora, sempre que eu atualizá-lo, podemos ver que nós temos isso tão parece muito melhor, mas ainda estamos tendo alguns problemas aqui no dimensionamento. Então, precisamos atualizar alguns dos que essas margens e Dings pa, a fim de melhor acomodá-lo . Então vamos tentar adicionar uma margem. Então estas são as margens curtas que vamos adicionar em uma margem aqui na parte inferior de talvez 30 picaretas. Talvez pudéssemos até fazer 40 e zero. Então isso cuida de algumas dessas sobreposições que estávamos vendo talvez precisemos fazer um pouco mais lá. Eso talvez até adicione um pouco de envasamento em torno dele. Então talvez se você quiser ter tapinhas na palestra então só no topo vai fazer 10 picaretas tapando no topo. E isso deve ajudar um pouco com quando estávamos fazendo o re dimensionamento aqui para que ele não está pendurado lá e nós ainda temos um problema aqui sempre que nós encolhemos para baixo. Então, talvez sempre que o encolhemos, queremos adicionar algo diferente acontecendo com a barra de navegação. Então talvez queiramos começar com o cabeçalho agora do que queremos. Talvez até fazer uma cor de fundo. Então, um dos problemas em fazer isso é que não ver como isso parece em outra tela. Pop isso sobre atualização, e nós podemos ver que agora Nós temos este fundo lá, então ele só está aparecendo nos tamanhos maiores, então eu acho que colocou no lugar errado lá. Então vamos dar uma olhada nisso e atualizar aquela coisa. Há o problema lá com o estilo. Vou usar a altura da linha aqui para especificar. Talvez pudéssemos fazer 60 escolhas ou algo assim para especificar a altura da linha. Então bife uma olhada e veja o que isso parece. Agora tudo está bom, exceto quando nós reduzimos para o menor tamanho que nós ainda temos esta sobreposição sobre isso . Então, há algumas coisas que podemos fazer aqui para atualizar e mudar este eso que temos onde estamos adicionando em que potting. Então talvez nós queiramos nos livrar desse preenchimento que temos aqui e realmente cortar isso e não utilizá-lo dentro da mesma maneira. Então, se eu me livrar do potting e eu vou trazer o potting mais para talvez para este aqui então agora, sempre que tivermos maior. Então isto deve trazer o nosso estofamento de volta. Então veja o que está acontecendo aqui. Coloque no errado aqui. Então vamos tentar aqui. Salvar abrir nosso site e vamos apenas verificar o que ele parece agora. Então, sempre que o encolhemos para baixo, então nos livramos desse preenchimento, então precisamos adicionar, provavelmente, um pouco de separação. Então agora temos um menu claro lá. Sempre que ficarmos ainda maiores. Então agora temos uma área de menu claramente definida, então parece mais com o que tínhamos planejado originalmente onde temos esse tipo de fundo. Claro, podemos nos livrar desse fundo preto, se quisermos, e só mostrá-lo no redimensionamento. E uma outra área que precisamos consertar é apenas o tapinha padrão porque eu a removi daqui. Mas parece que ainda precisamos de um tem um pouco de estofamento lá dentro dessas âncoras. Então vamos fazer algo como nós vamos fazer cinco e vamos fazer 10 e ver como isso parece. Assim, nas telas menores sempre que re dimensioná-lo. Então agora ainda temos mais de um formato de tipo de menu aqui. Nós encolhemos. Vamos dar uma olhada, e ainda temos um pouco de uma saliência. Então, este é o lugar onde nós poderíamos adicionar em um fundo de margem para adicionar uma margem na parte inferior, talvez 10 picaretas, e isso deve cuidar de qualquer um desses balanços que tivemos lá antes. Então, agora vamos voltar a este. Refresque-o e agora vemos que temos um menu agradável, bem apresentado lá. Temos tudo que está dimensionando corretamente anunciar mais de uma área em tons de cinza. Então, a próxima lição vamos continuar a construir isso e vamos construí-lo. Como podemos utilizar isso quando temos várias páginas. Eso temos agora, temos a nossa página principal. Não há nada no menu que indique que esta é a área selecionada. Então eu vou te mostrar como fazer isso. Adicione uma classe selecionada para o item selecionado e alguns outros truques, a fim de apresentar melhor nosso site. Então está chegando na próxima lição. 11. 14 Conjunto de atualização de embalagem principal item selecionado no menu: Então, esta lição. Vamos fazer algumas atualizações adicionais para o conteúdo do nosso site. E uma das coisas que queremos fazer é adicionar uma classe de selecionados para que saibamos realmente onde estamos dentro do site. Então, quando entramos aqui, temos três páginas principais produtos para casa e contato. Mas não sabemos se estamos em produtos domésticos ou em contato. Então vamos cuidar disso primeiro. E a maneira que nós vamos fazer isso é nós vamos adicionar em uma classe separada aqui, então isso vai ser classe e nós vamos apenas chamá-lo de selecionado. Então guarde isso. E agora temos a nossa vida, tu aqui. E então nós temos uma classe de selecionado que vai remover. Isso é lá que estava pendurado lá, uh, voltando para a nossa área de conteúdo. Então isso tem a ver com as cores de nossa navegação para que eu possa ver que eu tenho esse pairar aqui. Então talvez o que eu quero fazer é adicionar em um 2º 1 que será apenas um selecionado e apenas separado por vírgula para que nós realmente não temos que criar um segundo conjunto de propriedades aqui porque qualquer que seja selecionado, nós só queremos que eles sejam destacado neste tipo de forma. Então é assim que você adiciona o selecionado e, em seguida , é claro , para cada página web, vamos precisar especificar qual deles é o selecionado. Então, há um JavaScript, Ajay Kori truque também para fazer isso, então eu vou mostrar a vocês como fazer isso na próxima lição. E, claro, se você não quiser usar JavaScript, pedir uma consulta do que você pode simplesmente ir em frente e cada página para que possamos criar em vez de indexar pato html, podemos salvá-lo olhos, e então podemos ter outra página e podemos chamar esta sobre ponto o html e salvar esta. Olhos pensam que tínhamos produtos assim e agora podemos realmente ligar a ele. Então eu deveria ter chamado esse contato, mas vamos fazer assim. Então nós temos sobre nós temos produtos dot html e temos o nosso médico índice. Vamos a nossa página principal. Então, agora, sempre que passarmos por eles, isso deveria ter feito isso primeiro. Mas sempre que passarmos por eles, podemos ver que os selecionados devem mudar os produtos da seção. O selecionado deve ser este aqui em baixo. Então deixe-me fazer uma atualização rápida sobre isso. Então eu tenho meu índice lá, então eu vou fazer uma atualização sobre os itens da lista e notar que estamos compartilhando nossa página html s. Então esta é uma das coisas que somos capazes de fazer aqui é que somos capazes de compartilhar realmente facilmente compartilhar esse estilo CSS. E eu deveria realmente atualizar esta página inteira com links também. Então eu não tinha isso em um barco e depois atualizei. Então este é sobre então eu apenas usei sobre para contato selecionado verificação sobre produtos apenas para certeza de que temos o caminho certo e nós não temos produtos selecionados. Então agora e vamos voltar para o nosso site e apenas tentar isso realmente vai se livrar dessa capacidade de resposta. Então produtos, produtos domésticos contatam, e vemos que o selecionado é o selecionado certo. E mesmo quando voltarmos ao nosso código, vou esconder isto porque não preciso de ver isto no momento, e vamos entrar no nosso CSS e perceber que tínhamos rapper aqui. Então, uma vez pequeno ajuste rápido que eu preciso fazer para o rapper. Então, entrando em nosso projeto principal, originalmente tivemos nosso rapper. Ele estava sentado em um fixo com Então eu só preciso adicionar isso também. Então rapper e este é o lugar onde fazemos um máximo com e a diferença entre mocks sagacidade e fixo com é que bate com este uso para responsivo. Então qualquer coisa sob este Max com talvez 11 80 será automaticamente definido para 100%. Então notaremos aqui que sempre que definirmos esse Max, mas agora temos outro problema onde nossas principais áreas de rapper pararam para o lado esquerdo. Então precisamos fazer alguns ajustes, a fim de centralizar algo e CSS Então removemos a margem e definimos para auto para esquerda e direita e, em seguida, potting. Então isso basicamente remove na parte superior e inferior, mas a esquerda e a direita vão para o dedo do pé automático, e nós vamos para o preenchimento e vamos adicionar um pouco de preenchimento, então talvez você possa fazer uma porcentagem sábia de 4% e voltar rapidamente para o nosso site e ver como isso vai ser. Então agora temos Mawr novamente em linha com o que tínhamos projetado originalmente. Onde temos nossa navegação principal é 100%. E então, à medida que redimensionamos e atingimos esse ponto de ruptura, percebemos que esse conteúdo aqui tem um máximo com, então sempre será menor. E sempre que continuarmos a descer, vai encolher porque adicionamos aquele preenchimento. Então, talvez em um certo ponto, nós queremos soltar esse preenchimento do rapper completamente e talvez definir para zero e centralizar isso realmente não vai importar uma vez que atingimos esses tamanhos menores porque ele vai ser um relevante nos tamanhos menores s Então isso é algo de novo em que poderíamos trabalhar? Eso não sabemos certamente precisa adicionar que a despedida aqui no topo. Talvez queiramos adicionar essa separação e tudo isso mais tarde nas áreas inferiores. Então eu vou apenas copiar tudo isso para fora e eu tenho potting aqui pode ser adicionado neste ponto aqui vamos ver que diferença isso faz. Então você vê que agora temos 100% nas telas menores e, em seguida, à medida que ficamos maiores à medida temos esses pontos de quebra, então começamos a adicionar o preenchimento que realmente precisávamos, e podemos continuar a expandir a maneira que nosso conteúdo é apresentado. 12. 15 Use o jQuery para obter valor da página URL: nesta lição. Eu quero adicionar em um pouco de consulta G e que consulta G vai ser capaz de lidar com a determinação de qual página estavam em usando o U. R. R. I e, em seguida, finalmente, atualizar o elemento adequado com o real com o real selecionado parte. Então nós não, então isso faz com que seja um pouco mais dinâmico. E, claro, se você tem apenas três páginas da Web e você está bem com o passeio e selecionado manualmente, então você pode ir em frente e fazer isso. Isto vai ser apenas uma funcionalidade de preocupação nerd, a fim de fazer a mesma coisa. E vai ser apenas uma introdução muito rápida para adicionar na consulta J. Então, o que eu quero fazer é abrir minha visão completa lá e eu vou ter que adicionar. Essa é a consulta G e o JavaScript em cada uma dessas páginas. Nós, infelizmente, já os salvamos e os copiamos antes disso. Isso é oh, isso vai estar tentando fazer isso relativamente rápido. Eso com preocupação nerd. Então, o que Jake se preocupa é, se você não está familiarizado, J. Coury é uma biblioteca JavaScript e essencialmente apenas torna as coisas interagir com os elementos HTML em sua página web um pouco mais fácil. E é um formato condensado tão simples e fácil de usar. Eso temos aqui. Eu não sou desenvolvedores dot google dot com, e este é um ótimo lugar para obter algumas bibliotecas eso, CD termina, bibliotecas compartilhadas e onde eu poderia trazer em que biblioteca G. Cray que está localizado no Ajax Google ap eyes dot com E este é o caminho para onde a Biblioteca J. Coury está localizada. Então, se você realmente pegou essa página de coisa e se você inseriu em seu navegador, você poderia ver que você tem aquele nerd ou uma biblioteca. Então tudo o que você está fazendo é se vincular à Biblioteca J. Corey e trazê-lo para sua página da Web. E também, se você quiser utilizar isso, você tem que ter certeza de que você colocar o link antes de você realmente está tentando acessar e classificar Jake preocupado. Então, se você fizer isso depois e obter alguns erros, porque a biblioteca J Coury ainda não será carregada, eso esta é a fonte dele, e nós vamos estar fazendo a mesma coisa onde vamos vincular a um javascript compartilhado arquivo. Então, a idéia é semelhante ao que fazemos com CSS onde temos aquele arquivo que contém o CSS inteiro para a página da Web ou site. Então nós vamos apenas ligar Teoh script dot Js e eu posso realmente ir lá e remover as partes selecionadas. Então isso vai ser uma atualização rápida sobre criar uma nova página. Então, este vai ser o lugar onde R.J. Cory vai. Então, a fim de acessar Geico ou E J, Coury espera até que o Dom real carregue. Isso é todos os elementos na página da Web e tem algumas funcionalidades aqui onde vamos usar console, log, toe out, toe out, colocar algum conteúdo, e você vai ser capaz de ver isso com Jake. Fomos realmente capazes de pegar esse caminho da janela para que possamos ter um objeto chamado Window. E estou a tentar explicar isto rapidamente. Então, é claro que eu não vou ser capaz de explicar J query isso rapidamente dentro deste dentro desta lição, mas s Então este é o script dot html para script Js e este é o arquivo que estamos ligando para. Eso observe aqui que este é o arquivo real que ligamos Teoh. Então eu vou para os produtos. Eu acredito que ele fez isso. Vá ver onde eu fiz isso e eu vou apenas pisar, ter que ir a todas as páginas e copiar o mesmo. Mas isso é só uma vez porque uma vez que eu tenho esta pedreira G funcionando, então tudo funcionará automaticamente. E, em seguida, o último, esta página sobre deficiência seção página. E eu quero adicionar na mesma consulta G lá e ver. Então vamos dar uma olhada em nossa página da Web e ver o que está acontecendo agora. Então, sempre que eu clico Então eu me livrei da seleção real de qual página estava realmente em assim por diante , e nós vamos estar fazendo isso dinamicamente dentro de uma consulta em um dos motivos que eu gosto de usar o console. Esse navegador Chrome é porque a facilidade de comunicação para frente e para trás do JavaScript temos o que é chamado de console. E quando eu digito neste comando JavaScript aqui, trabalho era registro do cônsul. Está pegando o objeto da janela, o local e o h ref, e apenas colocando isso no registro do cônsul. E isso foi apenas para mostrar a vocês que podemos realmente utilizar isso para obter qual página estava em. Então notei que na página de índice está apenas pegando isso. Você é eu aqui e vou para a próxima coisa mesma. Então nós colocamos isso em um valor, e então este valor. Agora podemos tornar utilizável dentro do nosso JavaScript. Então vamos dar uma olhada nisso e ver como podemos realmente extrair a página da Web. Então, queremos fazer anúncios. Aplicar alguma lógica simples onde queremos adicionar uma classe ativa ou a classe selecionada para a página da Web. Se o U. R I coincidir com o que está dentro do atual. Então nós queremos verificar se o atual é sobre, e se é, então este produto deve realmente ser o que é destacado. Então vamos abrir isso de novo, e eu vou te mostrar como fazer isso. Então temos eso agora que somos capazes de obter esse valor. Poderíamos facilmente colocar isso em uma variável e utilizar isso, mas ainda não terminamos porque não temos barra de host local sobre. Não vai corresponder ao nosso caminho, a menos que estejamos usando esse nome de domínio e assim por diante . Então, em maio ou não pode funcionar, dependendo de como sua estruturação do seu site. Mas certamente não vai funcionar agora dentro deste host local, porque este valor ainda não vai ser o valor correto que vai coincidir com no meu HTML. Então eu preciso adicionar mais uma atualização aqui, e o que eu quero fazer é retornar o índice fora e o que isso vai fazer. Isto vai voltar com a posição dos cortes. Então vamos dar uma olhada nisso agora e ver o que está sendo devolvido para que eu possa ver que ele está sendo devolvido de volta. 16 têm um valor numérico, e essencialmente, o que está acontecendo aqui é que ele está me dizendo que esta barra está localizada na string de 16 a 16ª posição, e que o que quer que seja depois, então se eu pudesse tirar isso, então eu brincava em em então eu poderia fazer uma verificação de que usando outra função em Jake preocupa-se que vai ser semelhante e nós fazemos sub string e o que sub string faz é que nos permite selecionar através dessa posição de onde essa barra está localizado e tomar o resto do conteúdo restante. Então eu só estou vendo se eu tenho todos os meus suportes corretamente. Preciso de mais um Brockett aqui. Então, agora o que estamos fazendo é pegar uma substring e adicionar em está pegando a substring e nós vamos tomar essa posição. Então vamos dar uma olhada no que está sendo devolvido agora. Então nós temos produtos que temos sobre e nós temos Index para ficar melhor. Mas uma outra coisa que precisamos adicionar porque está tomando a posição da barra e queremos tomar a posição inicial de mais um, que é logo após a barra. Então agora lado positivo há um problema lá, então vamos rapidamente dar uma olhada na barra colocá-lo no lugar errado e isso é uma das coisas aqui que trabalhar com todos esses colchetes de fechamento às vezes é um pouco difícil quando você estão olhando rapidamente, mas agora somos capazes de retornar o valor de fora da página, então basta obter esse valor de uma página, e agora tudo o que precisamos fazer é atualizar e adicionar as classes ativas e consultas G. Tem uma função muito agradável, e é uma função limpa para isso também. Então, dentro da próxima lição, eu vou rapidamente passar por isso. Como eu sei, eu tenho ido muito rapidamente através de Jake Worry, mas não é essencial para configurar o seu site. Mas é bom saber. E é apenas bom saber como usar Jake se preocupar no caso de você estar fazendo um site maior e você quer ter um pouco mais de capacidade dinâmica dentro de seu tribunal HTML. Então, na próxima lição, eu vou terminar esta consulta J parte do curso e atualizar como podemos adicionar nesta classe selecionada dinamicamente usando J query. Então está chegando 13. 16 cursos dinâmicos jQuery: na lição anterior. Estávamos olhando para Jake Weary e como podemos adicionar. J. Coury tinha alguma funcionalidade dinâmica em um site, então vi que consulta G pode selecionar as informações da sua janela e nós poderíamos ver que poderíamos obter a localização h jangada e que poderíamos encontrar a posição de onde a barra estava e aparar o resto do conteúdo do domínio e utilizar Onley que retornando as informações da página . Então vamos dar um passo adiante. E com consulta G, você tem acesso a qualquer coisa que está disponível dentro da página. Então, se temos um Siris de I I DS ou temos um classes SYRIZA, podemos realmente facilmente acessar esses e fazer interações usando J Query. Então este aqui vai ser localizado, então é muito ele funciona da mesma maneira que CSS, e este é um dos benefícios reais de Jake Worry porque eles fizeram muito semelhante ao CSS. Então, agora que sabemos que temos cabeçalho nav u l l I, podemos fazer uma seleção desse elemento em particular. Então cabeçalho e talvez não precisamos ser tão específico eso talvez vamos apenas fazer ul aliado A. E vamos usar um seletor muito parecido com o que fazemos quando usamos CSS. Vamos fazer um treff e vamos descobrir onde h ref é igual. E então vamos usar esse valor que estamos tirando aqui. Então talvez possamos colocá-lo em uma variável para um pouco melhor. Legibilidade. Então eu chamo de algo como caminho de página e isso é apenas uma loja que o valor vai ser a mesma coisa que eu colocá-lo lá. E agora vamos adicionar isso aqui. Então vamos adicionar isso como o caminho da página. Então, se é igual a e este é o lugar onde nós adicionamos o caminho da página em Então, se este valor é igual ao valor do caminho da página do que o que queremos fazer é simplesmente adicionar uma classe e eles têm construído em funcionalidade para isso também. Então nós vamos adicionar classe e, em seguida, nós só precisamos selecionar o nome da classe. Então eu acredito que ele foi selecionado, e você percebe aqui que ele não está adicionando uma segunda citação, e isso é porque eu não tenho ele citado corretamente aqui, então eu não tenho ele fechado corretamente porque eu tenho este título aberto aqui e eu preciso adicionar mais um. Aqui está então vamos atualizar essas citações aqui. Então nós adicionamos o caminho e abrimos e fechamos. Precisamos de um suporte e precisamos de outra citação. Por isso, penso que isto deveria agora encerrar isto. E essa é uma das coisas que eu gosto nos colchetes é que podemos ver onde estamos abrindo e fechando, então às vezes isso fica um pouco confuso. Há muitos fechos de abertura e fechamento, então vamos tentar isso e ver se isso realmente funciona e ou ver se ele lança os erros para que possamos ver isso agora sempre que vamos para a página que ele está adicionando na classe. E esta é a beleza da preocupação dos nerds. Quando olhamos para o nosso código HTML e abrimos aquele que estava na página correta, que ele tem que selecionado e isso vai ser a mesma coisa quando vamos para ouvir isso, ele realmente atualiza que anúncios de código html em classe, e podemos ver os resultados aqui quando navegamos pelo nosso site. Então este é um dedo do pé rápido. Adicione uma classe selecionada de atualização dinâmica dentro de sua página da Web, e isso funcionará se você tiver vários itens de menu aqui. E se você não quer passar pelo trabalho de realmente atualizar todos e cada um que você quer adicionar isso e dinamicamente, esta é uma ótima maneira de fazê-lo. E sei que passei por Jake Preocupações rapidamente. Mas Jake Worry é realmente utilizável, e há muito com G query eso. Se você quiser saber mais sobre J. Query, há ajay kori dot com, onde você poderia definitivamente encontrá-lo muito mais informações sobre como utilizar Jake cansado e realmente o benefício de J Query é que é apenas realmente fácil de usar. Só faz sentido. E como você pode ver, o que passamos aqui, é sério, semelhante ao CSS, onde fazemos nosso seletor e podemos adicionar nessas classes e assim por diante. Então, tudo o que fizemos aqui é colocar em uma condição essencialmente aqui e poderíamos fazer isso dentro do nosso CSS também, onde poderíamos selecionar partes específicas do HTML e, em seguida, adicionar algum estilo. Mas neste caso, estamos usando Jake Preocupações para adicionar nessa classe. 14. 18 Adicionar fontes da Web Google Fonts ao site: esta lição. Quero acrescentar alguns pensamentos mais agradáveis. Então temos nossas fontes padrão da Web que estamos usando. E há outra opção, na verdade para adicionar algumas fontes mais dinâmicas e muito fácil de adicionar forints do. Então o Google realmente tem pensamentos do Google, então fontes dot google dot com e isso lhe dá a capacidade de selecionar entre mais de 804 famílias de fontes diferentes. E você pode realmente facilmente trazê-los para seus projetos da Web. E eu vou mostrar a vocês como fazer isso dentro desta lição. Então é só uma questão de ir até aqui e escolher a frente que você quer. E eles têm a capacidade de fazer a triagem realmente bem desenvolvida interface aqui para essas classificações, podemos ver quais são as tendências que são populares e assim por diante. Podemos ver os diferentes estilos enfraquecer. Traga aqueles para baixo para que possamos ver um monte de informações realmente fácil de tipo de percorrer e selecionou as fontes que você deseja usar. Então eu vou escolher algo aqui de forma aleatória. Então talvez eu queira selecionar este, uh, este aqui como a frente que eu quero usar. Então agora eu escolhi que lutou com a família e eles apenas recentemente mudaram isso. Então agora tem um pop-up aqui e eu posso trazer essa fonte em Esso. Há duas maneiras de trazer fontes para seus projetos da Web. Pontos ligados eso podemos ligar para fora para o pensamento que você é l dentro do meu HTML assim como fizemos com a folha de estilo ou o que eu poderia fazer é importado diretamente para a folha de estilo. Então eu vou escolher essa opção porque eu acho que uma vai funcionar um pouco melhor para mim. Então eu não tenho que ir em cada uma dessas páginas HTML e adicionar esse estilo. E então eu vou apenas colocar isso no topo aqui, adicionado ao meu CSS. E agora eu tenho a capacidade de usar esta família de fontes para que eu possa usá-la onde eu quiser. Eu tenho que colocá-lo no corpo, e agora podemos ir até a nossa página da Web e verificar o terno eso. Agora que fizemos essa mudança, fizemos essa adição. Vemos que a fonte mudou automaticamente em atualizações para todo o site, então realmente precisa de um dedo fácil. Adicione fontes adicionais e alguns toques agradáveis em seu site e seu projeto Web 15. 19 estilos de página: esta lição. Eu quero adicionar um pouco de estilo adicional no site. Então, apenas algumas ou coisas padrão, como você pode ver aqui, foram relativamente concluídas. Com o nosso projeto. Tudo está redimensionando s tudo parece muito bom. Podemos precisar adicionar algum preenchimento em torno do sub-menu aqui porque ele não parece muito certo. Eso eu vou apenas ir até aqui e eu quero adicionar no estofamento em qualquer coisa sobre os 480 s. Este foi o secundário. Então vamos apenas adicionar um pouco de estofamento aqui, talvez cinco picaretas, então torná-lo um pouco mais apresentável. Eso o conteúdo não está certo até que o menu lateral e borda. Temos nossas páginas diferentes e tudo está funcionando corretamente. Então, nós adicionamos na seção de navegação de consulta G que seleciona automaticamente a que estamos. Então vamos apenas passar pelo nosso casaco CSS h r em apenas para ter certeza de que nós realmente acertamos em todos os diferentes pontos que estávamos olhando para eso Normalmente quando você começou com o seu CSS, você quer obter as partes principais de conteúdo para dentro, Talvez eu queira adicionar em algumas imagens na minha página da Web e uma das coisas com imagens tornando-os responsivos. Você quer ter certeza de que eles não estão indo acima do tamanho, você quer ter certeza de que eles estão se encaixando na página e assim por diante. E às vezes isso é difícil com o seu com o seu conteúdo quando você está redimensionando. Então, por exemplo, deixe-me voltar para aqui e eu vou usar um site chamado Loren Pixel, a fim de obter algumas imagens fictícias. Eso eles têm a capacidade de selecionar uma imagem aqui. Eu posso selecioná-lo um monte de diferentes tipos de imagens aqui. Poderia ser mais específico. Essencialmente, este é o com, e então essa é a altura da imagem. Então, se eu só pegar isso e ver que imagem aleatória eles vão nos permitir jogar em nossa página de índice. Então Gorman e aqui talvez, se eu quiser colocar uma imagem aqui, então 400 por 200 vamos dar uma olhada na nossa página web. Então você vê que temos esta imagem colocada aqui. Mas um dos problemas aqui é que ele está tentando ocupar muito imobiliário, e está ficando escondido debaixo daquele submenu. Então, isso é definitivamente um problema e algo que realmente devemos abordar dentro de nosso design responsivo, porque queremos estar olhando para responsivo e entregar nosso conteúdo de forma de respostas . Então vamos atualizar o nosso com para ser 100% e podemos ver o que acontece aqui é que isso nos dá um máximo com, mas estamos realmente pedindo Max com de espaço disponível. Então, sempre que temos mais de 100 fotos, então vemos que ele tamanhos e se empilha dentro que dentro do resto do código. Mas vemos que sempre que não temos os imóveis disponíveis, não vai ficar por baixo ou fora do espaço disponível, e por isso só vai ocupar 100%. Então esta é uma das coisas realmente importantes que devemos adicionar ao nosso site. Esta é a forma de lidar com imagens? Então, além disso, muitas vezes você vai ver como o ar de cada um manipulou como h dois zehr lidou com eso. Às vezes você pode querer definir a altura da fonte e salão de beleza. Então você vê algo como tamanho da fonte e, em seguida, queremos torná-lo responsivo. Então 1.5 e assim é realmente quero quente foi como em cada um. Este é aqui em cima? Eso Você pode ou não querer fazer isso. Você pode querer ficar com os dois H. Então eu acredito que eu tinha esses como h dois. Escuta, estas vão ficar mais afectadas. Então vamos ficar com os htwos. Talvez queiramos atualizar essas margens. Queremos mudar o que queremos mudar. Talvez o sim. Já fiz o tamanho da fonte. Devemos sempre fazer essa altura da linha também, modo a acomodar os diferentes tamanhos. Então vamos tentar um pouco abaixo do então talvez possamos fazer uma 21h. Então isso nos dá um pouco um pouco menor altura da linha que normalmente, por padrão, teríamos. Também podemos fazer uma fonte, espera, enfraquecer, fazer uma margem nessa fonte. Também podemos mudar a família que lutou para que pudéssemos fazer isso também. Se quiséssemos fazer algo diferente que se destaca. Então vamos voltar para um navegador aqui. E vamos escolher outra frente do Google que queremos usar essa série que um para baixo e vamos tentar algo. Então, talvez este. Então eu vou realmente isolar aquele que nós já tínhamos selecionado e abrir este aqui, então eu poderia facilmente utilizá-lo aqui. Então agora eu tenho este selecionado e eu posso trazer este aqui para a importação para fazer algo parecido com o que nós não perdemos um e depois lutamos com a família. E é cada um para uma janela superior. Confira isso. Então agora nós temos para nossos títulos Nós temos uma fonte diferente em. Nós também podemos fazer um monte de coisas diferentes aqui, bem como necessário dentro do nosso estilo lutado principal . Eso Às vezes você pode ver também que temos algum estilo personalizado para uma determinada página. Eso Temos três páginas diferentes aqui, mas estamos usando relativamente esse mesmo estilo. Mas talvez na seção sobre temos algumas informações específicas que queremos exibir de uma maneira diferente. Então vamos abrir isso. Então agora isso vamos para a área de contato e então talvez queiramos apresentar isso de uma maneira que temos. Talvez nós se temos um formulário aqui e queremos apresentar o nosso conteúdo formulário. Então talvez tivéssemos alguns tipos de tipos aqui em salões, alguns tipos diferentes de entradas e assim por diante. Então talvez queiramos apresentar isso em um formato diferente como faríamos com qualquer outra entrada dentro da nossa página web. Então eu quero ser muito específico com isso então há um número de maneiras diferentes de fazermos isso. Podíamos fazer um rapper e acrescentar uma aula. Então talvez esta seja a página sobre ou algo assim, e então isso nos permite identificá-la dentro do CSS. Então não precisamos fazer um CSS específico para essa página, e podemos reutilizá-la se quisermos. E só podemos esperar que só tenhamos que abrir uma página CSS para fornecer esse estilo. Então vamos fazer algo como se nós temos uma entrada e isso vai ser apenas algumas coisas realmente básicas. Então, com 100 porque, é claro, todos precisam estilizar seu conteúdo da maneira que eles querem estilizá-lo. Então agora nós temos cheio de através e quando nós poderíamos apenas construir a partir daqui como precisamos . Por isso, também podemos ser específicos se quisermos fazê-lo apenas para tipos específicos. Vamos voltar ao CSS. Acho que sim. Infelizmente, eu tenho aquele lá embaixo que está levando a um pouco de confusão. Mas podemos ser específicos se quisermos com nosso CSS. Então, finalmente queria tipo é igual a texto e salvar isso. Então agora sempre que eu vou lá para que o nosso botão de enviar volta ao normal do tamanho normal, nós podemos fazer algo como nós podemos adicionar a ele uma borda aqui. Então, se eu quiser fazer uma escolha sólida e talvez por padrão quando eu comecei com uma borda azul e talvez queira fazer raio de borda, então torná-lo arredondado ligeiramente. Cinco picaretas, raio. Veja isso, veja o que parece agora não parece tão bom, mas ódio. Estamos apenas experimentando diferentes opções de estilo aqui. Então, talvez seja assim que você deseja apresentar seu formulário de contato e assim por diante Então, um monte de opções diferentes aqui. Poderíamos também atualizar os fundos e assim por diante, tão fundo. Então talvez eu queira que seja cinza escuro. E talvez também não atualizemos a cor da fonte também. Então talvez queira fazer isso formado branco e assim por diante um monte de opções diferentes. E é assim que podemos ser mais específica página sobre o particular o estilo particular por página. Então nós não podemos mantê-lo dentro de uma folha de estilo, e nós podemos ir tê-lo em todo o site, mas ser mais específico para as partes específicas de conteúdo que queremos atualizar e trabalhar com. 16. 20 produtos de imagens redimensionar: esta lição. Quero fazer uma atualização rápida na página de produtos. Então a primeira coisa que devemos fazer é atualizar nosso HTML. Então eu vou trazer este aqui no topo porque nós vamos estar usando atualizar cada um para Mel aqui, a página de produtos para ficar diferente da nossa principal área da empresa. Então isso seria produtos, então ele pode ter uma lista de diferentes produtos que queremos ser capazes de exibir na vitrine . Então aqui eu vou criar um diff como o contêiner principal. E íamos usar uma lista Nord Erred e listar nossos produtos. Então, isso será agradável e bem apresentado produtos e dentro daqui, talvez tenhamos algumas imagens de produto que queremos destacar. Então vamos voltar para Lauren Pixel e selecionar alguns produtos. Então temos nossos produtos de origem animal, alimentos e salão de beleza. Então vamos experimentar e ver quais diferentes podemos ter aqui. Se tivéssemos comida aqui, talvez tivéssemos um restaurante ou algo no endereço de uma cópia para que eu pudesse ter a Siris de imagens diferentes. Então eu sou fonte G e adicionou essa fonte para essa imagem. E eu vou fazer isso. Talvez um tenha seis diferentes, então não vou ter um número par. Então, no número desigual de imagens aqui e na verdade isso não saiu tão grande porque eu esqueci de fechar isso fora. Então vamos correr tudo isso e tentar aquilo de novo. Então agora eu tenho um sério de imagens. Então talvez eu queira ajustá-lo e fazer uma escolha em tons de cinza ou algo assim. Então temos alguma variedade ou outra imagem. Vamos ver o que carrega aqui. Talvez eu devesse fazer isso. É cor. Então eles realmente dão imagens aleatórias aqui, então eu realmente não tenho idéia. Mas quando estamos nos ligando a uma imagem específica, ela vai nos dar mais, ah,imagem de ah, forno. É uma imagem normal. Então deixe isso ser essencialmente A razão pela qual eu estou fazendo isso dessa maneira é que eu realmente não tenho as mesmas imagens, então eu acho que talvez seja apenas alterá-lo por números vai tentar isso e ver o que podemos fazer acontecer aqui. Vamos sair para o nosso exemplo e ver se fazemos produtos de modo que temos primeiro eu quero ver se temos imagens que estão carregando como um pouco de um tempo de carregamento lento. Talvez esta não seja a melhor maneira de o fazer, porque temos a Siris de imagens. Não parece que todos estão aparecendo. Tão pouco a pouco, eles estão entrando. Eso o quê? O problema aqui é que nós temos um Norden Liston estavam exibindo-o como uma lista desprotegida e, claro, nós poderíamos cuidar disso dentro do estilo. Então agora que eu concebo essa área de produtos e talvez nós queiramos identificar isso como iguais Então esta é a principal lista de um Norden. E então eu preciso remover o padrão de uma lista Norden. Então estes são os meus itens ou algo assim. Então isso é o que está disponível nos itens. Talvez eu poderia ter chamado de meu menu ou algo assim. Eso Now vamos voltar para o nosso CSS e fazer uma atualização para torná-lo mais apresentável. Como se fosse dentro de qualquer tipo de galeria. Teríamos uma Siris de itens, então vamos dar meus itens. E a primeira coisa que eu queria fazer era me livrar desses padrões dentro disso, uma nova lista ordenada. Alguma margem. Harding definiu todos para zero estilo lista e defina isso como nenhum. E assim isso vai apresentá-lo muito melhor. E agora precisamos atualizar foi item da lista. Então vamos fazer isso. Meus itens para listar itens para aliados e até mesmo não vai fazer. Flutuou para a esquerda. Dê um padrão com desligado. Dado um padrão com de vontade fazer 30% e eu não fiz uma margem. Nós vamos ter algumas margens agradáveis em torno dele. Então 5%. Então talvez todos atualizem este 40 para que tenhamos um total de 50. E vamos dar uma olhada nisso agora e ver como se é estoque um pouco melhor aqui dentro de produtos, Então, parece que essas imagens ar tomando um pouco de um pouco de tempo para carregar dentro. Então talvez haja outro recurso que eu possa usar no lugar nós é outro chamado lugar. Coloque-o para espaços reservados de imagens chamadas place hold. Então isso vai me dar algumas imagens de espaço reservado. E a coisa aqui também, é que eu não queria que todos fossem do mesmo tamanho. Não sei por que está levando tanto tempo, Senhor dos Toes, mas vamos atualizar Thies para nos poupar tempo. Claro, teria ficado melhor se tivéssemos aquelas imagens reais do menu. Mas acho que se estamos escolhendo imagens particulares, talvez seja difícil encontrar algumas delas. O Eso vai fazer isto 1500? Porque nem todas as vezes você sabe, você quer ter suas imagens nas mesmas dimensões. Mas você sabe, nem sempre vai ser o caso, então você precisa ser capaz de acomodar isso quando você está trabalhando com seu CSS. Vamos dar uma olhada nisso agora. Então, agora temos uma Siris de imagens diferentes, e está tudo preparado de forma agradável e ordenada, e uma das coisas que queremos fazer é sempre que o encolhemos, talvez queiramos ocupar esse completo disponível com que está disponível para nós eso por padrão. Queremos que seja assim, mas sempre que redimensionamos a página, talvez queiramos ocupar um espaçamento diferente ou algo assim. Então vamos atualizar o CSS para isso e, em seguida, é claro, precisamos também fazê-lo claro para o último para o último elemento também. Então poderíamos fazer isso também dentro do CSS. Então vamos até aqui. E então eu tinha meus itens e itens da lista para que pudéssemos nos livrar do carro alegórico esquerdo. Então talvez nós queremos apenas adicionar este fim quando, onde redimensionado sobre o 4 80 E então isso significa que aqui precisa atualizar isso para ser e 100% para ver se isso parece melhor. Então agora nós temos as imagens ocupando o total disponível 100%. E geralmente isso é um pouco melhor. Talvez até precisemos definir a imagem padrão com para ser 100%, não importa o que aconteça. Eso de novo. Dependendo de como você quer estilo, é oh, desta forma. São dimensões não vão ser confusas. Vemos que os únicos que foram realmente redimensionados são aqueles que estão acima do 4 80 ponto eso novamente, dependendo de como você deseja apresentá-lo. Eso Esta é uma das coisas que quando você está escolhendo seus tamanhos de imagem certifique-se de que ele pode acomodar a tela diferentes tamanhos de tela. Então, se você tem imagens que são realmente pequenas imagens como esta três anos cinquenta, você tem que dar uma olhada nisso e se perguntar como você quer apresentar esta imagem se você quer ele retamanho para um tamanho maior e você vai pixelado um pouco se um 3 50 vai para 4 80 Então isso é algo a considerar quando você está projetando seu site e nós antes de você obter seus ativos e para determinar quais são as dimensões com o tamanho mínimo de inteligência são para suas imagens que você vai apresentar em seu site. 17. Resumo de curso 21: olhando para o nosso design original. Então nós temos um design muito bom tipo semelhante aqui para o site. E, claro, ainda poderíamos aplicar alguns ajustes e correções para realmente personalizá-lo e torná-lo do jeito que queremos que ele pareça. Mas essencialmente, o que fizemos foi criar um site de três páginas, e temos a capacidade de personalizar cada uma dessas páginas. Estamos usando um arquivo CSS compartilhado para fornecer todo o estilo para o site. E o bom disso é que isso nos permite manter um uniforme. Então vamos dizer que queremos mudar nosso rodapé para ler. Nós poderíamos facilmente fazer isso atualizar nosso CSS estilo CS dot e que seria atualizado em todo o nosso site web eso. Nós o personalizamos para estar pronto para dispositivos móveis, e podemos atualizar o tamanho dele. Então isso é para que possamos atualizar o tamanho dele e podemos ver como ele vai ficar em diferentes dispositivos. Eso você vê que ele é totalmente responsivo, e quando estávamos, nós redimensioná-lo, o menu é apresentado de maneiras diferentes e assim por diante. Portanto, temos alguns olhares e sentimentos diferentes para o site, dependendo do tamanho da tela. E então, é claro, isso novamente pode ser personalizado e ajustá-lo conforme necessário. E vemos que todas as páginas diferentes eles são apresentados de forma diferente no totalmente funcional dentro móvel e dispostos, e eles funcionam corretamente e obter exibição que corretamente. Então temos uma área de contato aqui, 100% atravessando 100% quando temos um submenu. Então ainda parece bom e arrumado. Temos as nossas imagens. Sempre que encolhemos que para baixo, o que quer que encolhemos para baixo são espaço disponível em nossa página do que eles reabastecem realmente agradável e ordenadamente em ordem também. E sempre que temos mais imóveis disponíveis para nós do que eles armazenam em um formato de duas colunas e assim por diante. E isso poderia até ser ajustado se quiséssemos ir para três colunas e assim por diante. Então tudo isso depende do tamanho das imagens que queremos utilizar dentro do nosso site. O Eso. Normalmente, o que eu gosto de fazer é ficar com uma coluna de duas, porque você geralmente quando você chega ao tamanho maior, então algumas dessas imagens estão ficando em tamanho real, e porque nós tínhamos imagens que eram 3 50 nós realmente não temos tanto espaço para brincar . Então, todas as imagens eram tamanhos diferentes, e então tivemos que acomodar isso quando estávamos fazendo nossa compilação na Web. E, essencialmente, este é um site de duas colunas, e se quiséssemos que nosso rodapé saia de lá, poderíamos apenas mover isso para fora daquela área de rapper que tínhamos que está definindo esse padrão com tamanho e assim por diante. Temos o nosso logótipo aqui em cima. Fizemos alguns ajustes trazidos em alguns fundos do Google, e está praticamente pronto para continuar. Claro, você pode pegar o código-fonte, personalizá-lo você mesmo e ver o que você pode fazer acontecer dentro do seu próprio. CSS personalizar ações, adicionando que no site o modelo Web, e continuar a construir diferentes estilos e diferentes versões fora deste site e a parte de preocupação geek do curso. Então nós passamos por isso muito rapidamente, e não é uma necessidade, a fim de entender consulta G, a fim de utilizar este menu ou se você tem um site realmente pequeno, e se você não se importa de atualizá-lo você mesmo dentro do código-fonte, definir essas classes selecionadas dependendo da página em que você está, isso é sempre uma opção também. Então, não é uma necessidade. Mas Jake Worry realmente fornece que realmente precisa de funcionalidades adicionais e muito. Você consegue, Jake se preocupe. Então, se você está procurando Teoh dedo do pé, aprender mais sobre Jake Worry. É sempre um ótimo recurso para ter e ser capaz de utilizar sempre que você está fazendo o desenvolvimento do seu site.