Html e CSS - Crie um layout de site

1. Apresentação do curso: bem-vindo a esta série de vídeos onde você vai aprender como você pode facilmente criar seu próprio site usando apenas HTML e CSS. Nesta série, eu realmente estou fazendo um site simples usando apenas HTML e CSS. Não só você aprenderá a fazer um site, mas também aprenderá o site. Projetar fluxo de trabalho que eu acredito que se você seguir, vai definitivamente aumentar a sua produtividade nesta cidade está realmente fazendo este site, embora pareça simples. Mas, construindo isso, você vai aprender o fundamental eo fluxo de trabalho de design Web que são muito cruciais no processo de design web . Primeiro, vou ensiná-lo a criar um layout. Este site é um site de duas colunas com uma estrutura simples. Então eu vou usar HTML e CSS para projetar este layout e depois de projetar o layout, vou adicionar conteúdo nele desta maneira fora, criando um site que é primeiro você projetou a carga, seja no papel ou em qualquer tipo de pintura ou Photoshopped e, em seguida, trazê-lo para a vida usando HTML e CSS e, em seguida, adicionar conteúdo vai tornar o seu processo de desenvolvimento muito mais fácil e bem organizado. Primeiro, deixe-me dizer-lhe, este curso não é destinado a um iniciante completo que não sabe nada sobre HTML e CSS. Eu suponho que você tem uma compreensão muito básica fora HTML e CSS como, digamos, por exemplo, você sabe o que um cabeçalho tags, tags de parágrafo, hotel alvo CSS I D e mudar a cor de fundo em Sitra. Se você quiser aprender sobre as noções básicas sobre HTML e CSS, você pode ir para o site azul três escolas. Eles têm alguma incrível vai organizar conteúdo, modo que sendo dito, vamos começar. 2. Palestra principal: Primeiro, deixe-me mostrar-lhe o layout que eu projetei usando o livre on-line Victor Ordenar para o qual também é chamado Vector V E C P. R. Basta pesquisar no Google e você vai encontrar isso. É um programa incrível para tornar Victor arte online. Aqui eu só usei formas básicas toe construir uma inclinação. Este layout é dividido em diferentes seções. Este fora da caixa preta é o rapper que irá manter todos os nossos elementos dentro da página, o hash ou o sinal libra na frente. Fora deste rapper significa que eu vou declarar isso como um eu d no meu Dave. Depois disso eu tenho o chefe da seção que será um viver com um cabeçalho idéia. E dentro disso eu tenho o logotipo que também será um live com um logotipo I D. Então eu tenho esse bar nunca. Depois disso, eu não tenho outro Div com um recipiente i d que irá conter o nosso conteúdo principal e isso tem a seção esquerda e direita. A seção esquerda tem um pouco fora em torno de pessoa qualificada e a seção direita tem um pouco agora 73%. E na parte inferior Aqui eu tenho o rodapé com eu d foto. Então, espero que a estrutura desta carga seja clara para você. Agora que fizemos um Leo, é hora de citar. Então, nesta série de vídeos, eu vou estar usando Corp em que é uma ferramenta on-line para escrever html, CSS e JavaScript. Você também pode usar um editor de texto como texto sublime ou colchete Mais pacote mais se você gosta fazer este site. Mas aqui vou usar Corp em que será perfeito para este tutorial. Então vamos começar. Ir ao tribunal, renderizado Io e criar um veículo e, em seguida, clique aqui para fazer um novo pino. Este é o General Interferes Off Corp nesta parte esquerda é dividido em três seções para classificar cada código CSS demônio e JavaScript. E na seção direita você verá a saída para este tutorial. Eu não vou exigir Js ou JavaScript, então eu vou minimizá-lo. Não, nós já vamos criar nosso html Marco primeiro. Primeiro farei um direito reparador. Hash it up e peito stub Corbyn irá criar automaticamente o David Idea Rapper todo o nosso conteúdo vai dentro deste rapper Então esta é uma caixa preta que eu mostrei a você em nosso design baixo. Então, dentro deste rapper, vou criar o Dave com o cabeçalho da ideia. E, em seguida, dentro do obstáculo, eu vou criar um acordo com o logotipo da idéia. Estou criando o lucrativo dentro do aditivo da cabeça. Uma vez que o nosso logotipo está presente dentro do mais difícil Não depois da cabeça. Oh, eu vou criar a barra de valete e depois vou criar o recipiente. E se virem o nosso design, tenho de viver dentro deste contentor, a secção esquerda e a secção tardia. Então eu vou criar esses primitivos dentro deste contêiner e finalmente fora do contêiner. Vou criar a seção de fotos. Então isso é tudo o que temos para escrever para marcação HTML. Agora vem a diversão parte dois estilo permitido. Primeiro, vamos redefinir todas as tags usando um estrito e, em seguida, disse que a margem para zero e separação 20 e família estrangeira Ariel, se você escrever FF e pressione guia o tribunal quando vontade ou concluído, então dar uma família estrangeira fora aérea. Depois disso, eu vou mirar o rapper, então deixe-me dar uma borda fora da cor vermelha para que você possa ver todos os elementos que vão dentro deste rapper. Então eu vou apontar o cabeçalho. Vamos dar um pouco fora 100% e altura fora 100 pixels. Veja como um rapper se expandiu para manter este cabeçalho ativo. Agora vamos mudar a cor de fundo para isso. Vou usar um valor de núcleo hexadecimal. Você pode ter qualquer cor que você gosta, mas para este tutorial eu tenho este site que fornecem heck marcado Então eu vou apenas clicar neste elétron azul que irá copiar o X marcado para a área de transferência e agora eu posso colá-lo aqui para obter o cor de fundo. Deixe-me remover este vit porque por padrão é 100% então eu não tenho que escrevê-lo. Agora vamos selecionar o local. Vou dar-lhe uma altura de 50 pixels e idem 100 pixels e vamos dar-lhe uma cor de fundo . G se foi. Deixe-me mudar a altura. 200 pixels. É estúpido. Então vamos escrever 80 pixels. OK, isto é bom. Agora deixe-me dar um rapel principal para criar algum espaço. Certo? Mordendo 20 pixels. Então, isso aplicará preenchimento de 20 pixels na parte superior, inferior esquerdo e lado direito fora. Este rapper birding significa o espaço interno e margem significa espaço exterior. Agora vamos posicionar nosso logotipo primeiro. Vamos aumentar o dedo do pé 200 pixels Agora é bom aqui. Eu vou dar-lhe uma posição relativa e ela é o top 20 pixel ou torná-lo 10 pixels e esquerda 20 pixel. Então isso irá mover o logotipo em relação à cabeça do Deixe-me pouco mais de 2150 pixels. Depois disso, vamos adicionar um número. Dê-lhe um coração off 70 fotos de e eles são cultivados cor fora desta luz três e dar uma margem Top off 10 picaretas em para que ele não ficar com o mais difícil após a barra de nervo, Eu vou mirar o recipiente. Então, primeiro eu vou dar-lhe uma borda verde para ver se a seção esquerda e direita oposição corretamente. Então eu vou mirar na seção esquerda. Então aqui eu vou dar-lhe uma altura de 400 pixels. Veja como Lacandona se expandiu. Significado são seção esquerda foi criado dentro do recipiente. Agora vamos dar mais. Então eu quero que esta seção esquerda ocupe 25% de desconto neste recipiente, então eu vou escrever. Escolheu 25% e finalmente dar-lhe uma cor de fundo. Então vou escolher este azul esverdeado. Veja, nossa seção esquerda ocupou 25% de desconto no espírito dela, que é a diferença com o contêiner. Vamos aumentar a altura deste para 600 imagem. Agora está bom. Agora vou mirar na seção certa. Então aqui vou dar uma altura de 600 pixels e um pouco de 73%. Eu não estou dando um vencedor de 75% porque se eu fizer 75 pessoa, então não haverá espaço entre a seção esquerda e a direita. Então, para ter a margem, estou fazendo 73%. E, finalmente, vou mudar a cor de fundo. Mas esta cor de folha de hortelã pato. Portanto, há uma seção de taxa. Não se preocupe , está aqui no fundo. Então, para ter isso lado a lado, temos que colocá-los no chão. Então primeiro andar, a seção direita dois aqui você vai notar que a seção saiu oferece recipiente que é esta borda verde. Então isso é porque local chão e elemento ele sai do fluxo normal fora do documento. Então o fluxo normal é de cima para baixo. Então é por isso que isso subiu. Para consertar isso, temos que limpar a flauta. Mas primeiro, vamos flutuar nossa seção esquerda. Quem deixou tão direita flutuar esquerda? Não. Você pode ver tanto a nossa posição corretamente, mas o nosso exterior sua cantina, mesmo o principal rapper Container. Então conserte isso. Temos que limpar o flutuador para este nível. Adicione um pseudo seletor no contêiner. Então recipiente direito e, em seguida, para dois pontos. E logo após eles estão dentro deste conteúdo certo Colin, marca de condição dupla, bloco de exibição e limpar ambos. Então este é um truque usado para limpar os pisos e faz com que o elemento chegue ao seu piso normal . Normalidade são seção esquerda e direita está dentro de seu pai, que é o recipiente idéia davit. Então vamos dar alguma margem máxima para o recipiente. Diga margem. Top 10 pixels. Não, finalmente, vamos criar a foto. Então foto à direita encontrado, dar-lhe a altura fora 100 fixador e deixá-lo a cor de fundo para este rio americano. E imagino os 10 melhores pixels. Deixe-me mudar a inteligência da seção certa. 74%. Mas isso parece bom. Então, parabéns, você fez o layout do site com dois pontos usando HTML e CSS. Então agora é hora de adicionar o conteúdo em um layout para torná-lo um funcionamento desse site. Então primeiro vou adicionar um texto dentro da locomotiva. Para isso, eu vou criar sua tag de três cabeçalhos. E dentro disso eu vou escrever o nome da empresa. Você pode escrever qualquer coisa. Você não, vamos fazer essa barra de navegação primeiro. Vou criar a navegação Manu dentro do cabeçalho e, em seguida, vou criar a navegação dentro da barra de valete. Então, primeiro, vamos criá-lo dentro da cabeça da seção. A maneira mais comum de criar uma barra de navegação é usar uma lista Norden. Então vou criar um A nordeste. E dentro disso eu terei itens de lista que conterão um link. Então à direita, você vai, em seguida, abatido dentro e pressione guia Tribunal pode criar o mercado para você. Em seguida, dentro do item da lista direita A e pressionado para cima para fazer o link no X Chef libra direita . Então, se você clicar neste link, ele não vai a lugar nenhum. E então dentro dela uma etiqueta, direita, direita, o nome do item do menu. Então este é o nosso Manu, mas este não parece um menu de navegação. Temos que adicionar um pouco de CS é fazer com que pareça bom. Mas primeiro, deixe-me posicionar este X três elemento dentro da parte inferior para que eles hash logotipo. São três e dentro desta posição certa absoluta. Então eu vou dar um top 20 pixel ou dizer, 30 pixel. É olhar certo. Agora vamos trabalhar com Domino. Primeiro alvo, o elemento U e depois flutuou para a direita. Depois disso, eu vou direcionar o elemento Aliado e fazer a exibição em linha, então isso irá colocar o item lado a lado. Deixe-me dar uma margem máxima para o elemento U primeiro, margem direita, top 30 pixels ou digamos, 40 Dixon. Além disso, vamos dar uma taxa de margem de 40 pixels para criar algum espaço no lado esquerdo. Então eu vou mirar o tipo A tão certo hash A. E dentro disso, eu vou escrever decoração de texto. Nenhum. Isso removerá o subjacente Agora vamos dar uma luta de cores e aplicar o perdão de 20 pixels em todos os lados. Então é assim que fazemos nosso menu de navegação? Não, vamos remover a cor de fundo deste cabeçalho. Quer dizer, espere, hum, em leilão porque eu tenho uma cor branca para ele. Então mude a cor para preto, e agora está errado. Também removerei a cor de fundo do logotipo. Agora eu vou adicionar algumas habitações efeito ho usando a classe pseudo sobre tão direita, cabeçalho U l I um cólon sobre E, em seguida, dentro deste primeiro, deixe-me dar uma borda inferior para ver como ele parece. É uma espécie de olhar bom, mas eu vou adicionar borda em todos os lados tão removido fundo. Não, parece bom. Então esta é a naba dentro da cabeça da seção. Não. Vamos criar este menu no nab nosso live para isso. Vou cortar essa lista e provar dentro do Nath Bharti. Eu tenho que fazer uma pequena mudança no meu CSS. Então, basta remover o cabeçalho hash e substituí-lo por hash. Nunca porque o nosso elemento ul está agora dentro do nervo. O Bardo. Em seguida, remova a margem superior dentro do valor de hash. Bem, porque eu não preciso do espaço negativo que está empurrando o menu para cima e então eu vou dar uma margem top off 20 pixels. Deve haver espaço aqui, deixe-me mudar a margem para 25. Não, é bom. Eu sei que temos um logotipo e navegação criados. Vamos adicionar conteúdo na seção esquerda. Então, dentro da seção esquerda, eu vou criar suas três tags com as notícias de texto, e então eu vou adicionar um parágrafo fora do texto fictício. Então, basta escrever P, então maior do que assinar e escrever. Carregue-o e apertou o envelope Up Corp automaticamente inseri-los. É preciso para você. Vamos copiar e colar isto mais uma vez e mudar a Rua H para o trabalho. Então temos o conteúdo colocado dentro da seção esquerda. É hora de corrigir alguns CS é primeiro. Eu vou direcionar o imposto imobiliário dentro da seção esquerda, então eu vou dar um corte fora 30 pixels e, em seguida, linha central este texto. Vamos diminuir a festa em 20 pixels. Certo, agora vamos mirar na seção esquerda do Peter e P aqui. Vamos ver como se justifica fica fica. Então eu alinho texto. Justifique agora. Não parece bom. Mude para o centro. Ok, então eu vou dar uma margem inferior fora de 10 pixels ou talvez quatro para corrigi-lo. Então agora vamos mudar a cor de fundo desta seção esquerda para algo que parece bom aqui. Eu vou escolher a cor, que eu usei para o nunca. Então eu instalei um Google Chrome Extensão politica. Esta é uma ferramenta incrível para escolher a cor de qualquer site, então clique nesta extensão e agora clique na opção escolher a cor do tom e agora basta levar o seu máximo para a cor que você deseja escolher. E quando você ver a cor nesta caixa quadrada superior, basta clicar. A cor será copiada para a área de transferência. Agora eu vou apenas basear esta cor na propriedade de cor de fundo seção esquerda tão simples quanto isso. Então deixe-me adicionar sublinhado em direção a tag para fazê-lo ficar de pé. Nota um pouco Aqui para este propósito tutorial, Eu adicionei, estão dirigindo e algum tempo parágrafo. Mas você também pode criar menu de lado, se desejar. Então, a próxima é a seção certa. Então vá para dentro da seção de taxas, viva e crie um Jordan tang e direita. Bem-vindo ao meu site. Então eu vou criar uma tag de parágrafo com algum texto fictício. Vamos adicionar mais um melhor. Então, novamente eu vou copiar todo este conteúdo p gêmeo e colar para ter mais algum conteúdo. Vamos mudar o H um dedo sofrido em Gaza. Eles ainda são espaço. Então novamente eu vou copiar e colar mais uma coisa e vamos mudar. Isso é mais 12 conteúdo agora. Acho que tenho conteúdo suficiente. Pode adicionar mais se quiser, mas vou parar aqui agora. Vamos adicionar um pouco. Veja ancestral para o H um e Pitak dentro da seção direita. Primeiro, vou mirar a etiqueta “H 1”. Vamos tentar uma margem esquerda. 20 pixels. Oh, talvez 30 escolhem. Vamos deixar isso por enquanto. Vamos mudar isso ainda mais depois de comer estilo dedo do pé um parágrafo. Próximo alvo, o tipo de parágrafo. Deixe-me dar uma mensagem. A margem do centro da propriedade deixada fora 30 escolhe-o ou talvez 10 escolhe-o. Então, esse parágrafo parece muito próximo um do outro. Então eu vou adicionar uma margem inferior ou 20 pixels para criar algum espaço para sempre. Acho que agora posso mudar o estilo H. One. Vamos movê-lo para o centro usando a propriedade de centro Alinhar texto. Então agora eu não preciso da margem, então remova isso, mas eu vou adicionar uma margem inferior fora de 10 pixels para criar mais espaço na parte inferior. Agora é hora de mudar a cor de fundo. Então eu vou escolher o crítico novamente usando a ferramenta seletor de cores e, em seguida, testá-lo na seção direita. Cor de fundo. Ok, nosso site agora tem algum conteúdo. Eu não preciso dessas bordas verdes, então remova a borda. Deixe-me adicionar um pouco de margem superior do dedo do pé este H uma tag. Então margem falar 20 pixels. Não, é bom. Finalmente, é hora de adicionar conteúdo a uma foto. Vou adicionar um texto muito básico dentro de uma foto, então eu vou usar sua tag quatro. E dentro disso eu avisei um símbolo cópula para isso você pode escrever em porcentagem cópia e então eu coloquei tudo direito reservado do que um símbolo de cachimbo e feito por você. Agora vamos discar este texto. Deixe-me primeiro alinhado isso ao centro e depois Al Gore se separando por 20 pixels ou talvez 30 pixels No. 40 pixels. Não, é bom. E finalmente, vou mudar a cor de fundo desta água para a mesma cor cinza que usamos para toda a nossa seção. Então finalmente são simples. Upside está pronto, e nós fizemos isso usando apenas HTML e CSS. Então, agora que você criou seu site de duas colunas, é hora de expandir as habilidades aprendidas nessas cidades de vídeo. Então tente fazer um site de três colunas ou quatro colunas. Basta pesquisar no Google por três colunas ou quatro colunas. Orelhas é alto. Você vai superar cada e a partir desse namorado projetou o layout para si mesmo e depois o layout é feito, em seguida, adicione o conteúdo. Eu posso apostar se você seguir este princípio que é primeiro projetado o Senhor em papel ou qualquer programa gráfico e, em seguida, implementado usando o HTML e CSS e, em seguida, adicionar conteúdo, você será capaz de suportar qualquer site um. Espero que tenha aprendido algo com a minha série de vídeos. E se o fizer, peço-lhe para gentilmente rever e um polegar para cima. Isso me ajuda imensamente e o mantém motivado para fazer mais controle. Obrigado.