(música animada) Bem-vindo ao curso da KnowledgeCity em folhas de estilo em cascata intermediárias. Meu nome é Cliff Brozo. Eu sou seu professor e hoje vamos explorar o layout das páginas com folhas de estilo em cascata. Veremos como fazer alguns títulos fixos. Vamos descobrir como criar uma barra de navegação. Vamos falar sobre diferentes áreas da página, a janela de conteúdo, os apartes, a janela principal, rodapés, os cabeçalhos. Junte tudo isso na página. Vamos falar sobre artigos e veremos como formatar a página inteira para que tenha a melhor aparência. Vamos começar. A primeira coisa que devemos apontar é que vamos usar um software chamado Atom, ATOM, e você pode encontrá-lo e faça o download em atom.io. A razão pela qual estamos usando Atom isso realmente não importa se você tem uma máquina Windows ou uma máquina Apple, Atom funciona em ambos e isso vai nos permitir para ver o código e os resultados ao mesmo tempo, porque tem um recurso de visualização ao vivo. Então, o que você está olhando é uma página da web que criamos para ilustrar as aulas que vamos aprender nesta sessão. Primeiro, vamos falar sobre cabeçalhos fixos. E por cabeçalhos fixos, queremos dizer um cabeçalho que não se move quando você rola. Então, se eu rolar para baixo, o conteúdo da tela mudará mas o cabeçalho permanecerá onde deveria estar. O que isso nos permite fazer é dar ao usuário uma navegação que permanece na página não importa onde eles estão olhando na página. A outra coisa que acabamos de ver é a barra de navegação e existem várias maneiras diferentes de fazer navegação. Neste caso, tudo o que fizemos foi trocar algumas cores quando o usuário passa o ponteiro do mouse sobre aquele item específico. Vamos dar uma olhada no código que cumpre esta página. O código HTML é bastante simples. Eu tenho um link para minha folha de estilo que está em uma pasta CSS. Então eu começo com meu corpo e eu crio uma seção de cabeçalho que contém uma divisão que governa como o cabeçalho fixo vai olhar e eu crio uma classe chamada stick_top. E também rege a seção de navegação. Então stick_top é algo que declaramos dentro de nosso programa CSS e veremos isso em um segundo. Mas é por isso que, quando escrevemos o código Sticky Headers, vemos o texto em azul aqui. Podemos ver que há algum sublinhado. Temos um fundo laranja. Tudo isso é tratado no arquivo CSS. À medida que avançamos na página, chegamos à nossa seção PRINCIPAL e a seção MAIN contém todos do conteúdo que vamos colocar na página. E mais uma vez, eu declaro uma classe em CSS chamado main_content que está formatando esta área específica. Eu começo com um H1. Isso apenas coloca um título na página, seguido por um parágrafo de texto que espero ser algo interessante de ler. Então eu crio algo chamado de lado e se você nunca usou asides antes, eles são um jeito legal para chamar sua atenção para uma área da tela. Agora, eu formatei isso de lado incluir uma bela barra verde isso tem um fade. Coloquei o texto em itálico e eu defini a largura, e novamente, veremos como isso é feito no código CSS. Então eu continuo com meu tópico e falar sobre outro parágrafo e então chego a algo chamado de artigo onde o texto está sendo mostrado em uma área especialmente formatada. Neste caso, estou analisando os resultados do beisebol. As informações que estão no final deste artigo é apenas uma série de H1 e H2 e o que você vê aqui é o Unicode para imprimir uma pequena bola de beisebol. Continuamos descendo a página e chegamos à seção de rodapé. Na seção de rodapé, coloquei algumas mensagens de informações que paira da mesma maneira que as barras de navegação fazem e neste caso particular, Usei Unicode mais uma vez. A primeira vez para obter um pequeno envelope rápido. E eu sei que envelopes não são a moda de e-mail mas a ideia é que estamos enviando algum tipo de correspondência. E aí coloco outro link para um telefone sim, usei o & telefone, que tem um recurso Unicode nomeado isso me dá um telefone preto que mais uma vez mudará para branco. Por fim, coloquei um aviso de direitos autorais com o © e vou pegar o pequeno c lá. E eu fecho minhas tags HTML na mesma ordem em que foram abertos. Então, vamos dar uma olhada no CSS que acompanha esta página específica. O que eu fiz por você é que coloquei comentários em quase todas as linhas de CSS para que você saiba o que a linha faz. Primeiro, estou configurando a codificação e a formatação de três tags HTML básicas, a tag do corpo, que começa na linha um, a navegação, que começa na linha seis e a régua horizontal, que começa na linha 12. Para o corpo, estou definindo todo o corpo para uma fonte que é um tanto caprichosa e se por algum motivo a Comic Sans MS não estiver disponível no PC do usuário, Vou pegar qualquer fonte sans serif e, novamente, aprendemos sobre serifas há muito tempo na aula de iniciantes. Estou usando MidnightBlue como cor e gosto de usar cores nomeadas sempre que posso. Se for um número hexadecimal, as pessoas então têm que procurar a cor. O que você notará também é que dediquei um tempo para alinhar meu código e eu alinhei todos os meus dois pontos onde eu poderia fazê-los parecer bonitos e limpos. No corpo, tudo que eu precisava fazer para alinhá-los é necessário espaçar para que meus dois pontos fiquem alinhados e, em seguida, espaçar um pouco mais de modo que meus pontos-e-vírgulas fiquem alinhados. O objetivo de fazer isso é que quando o código não funciona, e pode haver momentos em que você cometeu um erro em algum lugar ao longo do caminho e seu código não corre da maneira que você espera, é muito mais fácil resolver o problema quando você está vendo um código bem formatado. E se você puder manter todos os seus dois pontos alinhados e você pode manter todos os seus pontos e vírgulas alinhados, você será uma pessoa muito mais feliz.
