Propaganda

Você sempre quis fazer um site? Talvez você tenha lido alguns dos nossos HTML (compreensão HTML 5 passos para compreender código HTML básico 5 etapas para compreender código HTML básico Leia mais) e tutoriais CSS 5 Baby Passos para Aprendizagem CSS e Tornando-se um Kick-Ass CSS Sorcerer 5 Baby Passos para Aprendendo CSS e Tornando-se um Kick-Ass CSS Sorcerer CSS é a mudança mais importante que as páginas da web viram na última década, e abriu o caminho para a separação de estilo e conteúdo. No modo moderno, XHTML define a estrutura semântica ... Leia mais, mas não sabe como usar essas linguagens em um projeto maior.

Hoje estarei orientando você no processo de criar um site completo a partir do zero. Não se preocupe se isso parecer uma tarefa difícil, vou guiá-lo em cada passo do caminho.

Você produzirá este site usando HTML, CSS e JavaScript com um toque de jQuery (guia para jQuery Um Guia Básico para JQuery para Programadores de Javascript Um Guia Básico para JQuery para Programadores de Javascript Se você for um programador de Javascript, este guia para JQuery ajudará você começa a codificar como um ninja. Leia mais). Você não estará fazendo nada realmente sangrento, então este código deve funcionar razoavelmente bem na maioria dos navegadores modernos.

Se você não tem certeza de qualquer CSS, dê uma olhada no guia de CSS em W3Schools.com.

O design

Aqui está o design deste site. Dê uma olhada em uma imagem de alta resolução se você quiser uma aparência melhor ou, melhor ainda, faça o download do projeto completo aqui.

Eu projetei este site para uma empresa fictícia no Adobe Photoshop CC 2017. Se você estiver interessado, certifique-se de pegar o arquivo .PSD do download do pacote. Aqui está o que você obtém no arquivo do photoshop:

Dentro do PSD, você encontrará todas as camadas agrupadas, nomeadas e codificadas por cores:

Você precisará de algumas fontes instaladas para que as coisas pareçam corretas. O primeiro é Font Awesome, usado para todos os ícones. As outras duas fontes são PT Serif e Myriad Pro (incluídas no Photoshop). Se não tiver certeza de como instalar fontes, leia nosso guia Como instalar fontes no Windows, Mac e Linux Como instalar fontes no Windows, Mac e Linux Leia mais.

Não se preocupe se você não tiver o Photoshop, você não precisa continuar.

Código Inicial

Agora que o design está claro, vamos começar a codificar! Crie um novo arquivo no seu editor de texto favorito (estou usando o Sublime Text 3). Salve isso como index.html . Você pode chamar isso do jeito que quiser, a razão pela qual muitas páginas são chamadas de índice é devido à maneira como os servidores da Web funcionam. A configuração padrão para a maioria dos servidores é para servir a página index.html, se nenhuma página for especificada.

Se você não quer aprender os detalhes, pegue o código completo do download.

Aqui está o código que você precisa:

Noise Media /* CSS goes here, at the top of the page */ /* JavaScript goes here, at the bottom of the page */ 

Isso faz várias coisas:

• Define o HTML mínimo necessário.
• Define um título de página de "Noise Media"
• Inclui jQuery hospedado no Google CDN (o que é um CDN O que os CDNs são e por que o armazenamento não é mais um problema Quais CDNs são e por que o armazenamento não é mais um problema CDNs tornam a Internet rápida e os sites acessíveis mesmo quando você é dimensionado para milhões de usuários., a largura de banda custa dinheiro; aqueles de nós em contratos limitados sabem disso muito bem. Não apenas você ... Leia mais).
• Inclui o tipo de fonte Awesome hospedado no Google CDN.
• Define uma tag de estilo para escrever seu CSS.
• Define uma tag de script para escrever seu JavaScript.

Salve seu arquivo novamente e abra-o em seu navegador da web. Você provavelmente não notará muito, e certamente não parecerá um site ainda.

Observe como o título da página é Noise Media . Isso é definido pelo texto dentro da tag de título . Isso tem que estar dentro das tags de cabeça .

O cabeçalho

Vamos criar o cabeçalho. Aqui está o que parece:

Vamos começar com aquele pedacinho cinzento no topo. É um cinza claro com um leve cinza escuro por baixo. Aqui está um close up:

Adicione este HTML dentro da tag body no topo:

Enquanto você está aqui, vamos quebrar isso. Uma div é como um contêiner para colocar outras coisas. Essa “outra coisa” pode ser mais contêineres, texto, imagens, qualquer coisa realmente. Existem algumas restrições sobre o que pode ser usado em determinadas tags, mas as divs são bastante genéricas. Tem um id de top-bar . Isso será usado para estilizá-lo com CSS e segmentá-lo com JavaScript, se necessário. Certifique-se de que você tenha apenas um elemento com um ID específico - eles devem ser exclusivos. Se você quiser que vários elementos tenham o mesmo nome, use uma classe - é para isso que eles são projetados! Aqui está o CSS que você precisa para estilizá-lo (colocar no topo dentro da sua tag de estilo ):

 html, body { margin: 0; padding: 0; font-family: 'Helvetica', 'Arial'; /* initial fonts */ } #top-bar { width: 100%; background: #F1F1F1; /* light gray */ border-bottom: 1px solid #D4D4D4; /* dark gray "underline" */ height: 25px; } 

Observe como o sinal de hash (#, hashtag, pound sign) é usado antes do nome. Isso significa que o elemento é um ID. Se você estivesse usando uma classe, você usaria um ponto final (.). As tags html e body têm seu preenchimento e margem definidos como zero. Isso evita problemas de espaçamento indesejados.

É hora de seguir para o logotipo e navbar. Antes de começar, você precisa de um contêiner para colocar esse conteúdo. Vamos fazer disso uma classe (para que você possa reutilizá-lo mais tarde) e, como esse site não é responsivo, tenha 900 pixels de largura.

HTML:

CSS:

 .normal-wrapper { width: 900px; margin: 0 auto; padding: 15px 40px; background: red; overflow: auto; } 

Pode ser difícil dizer o que está acontecendo até que você termine o código, então pode ser útil adicionar um fundo colorido (temporário) para ver o que está acontecendo:

 background: red; 

É hora de criar o logotipo agora. Font Awesome é necessário para o ícone em si. Font Awesome é um conjunto de ícones empacotados como uma fonte de vetor - incrível! O código inicial acima já está configurado Font Awesome, então está tudo pronto para começar!

Adicione este HTML dentro da div do wrapper normal :

  
 Noise Media 

CSS:

 .logo-icon { color: #000000; font-size: 60pt; float: left; } h1 { float: left; margin: 21px 0 0 25px; } 

Não se preocupe com as outras fontes que não combinam com o design - você vai arrumar isso mais tarde. Se você deseja usar ícones diferentes, vá para a página Ícones de Fonte Incrível e, em seguida, altere o volume para baixo para o nome do ícone que deseja usar.

Movendo-se para a barra de navegação, você usará uma lista não ordenada ( UL ) para isso. Adicione este HTML após o container logo (mas ainda dentro do wrapper normal ):

Casa
Sobre
Rever
Contato

O href é usado para vincular outras páginas. Este site do tutorial não possui outras páginas, mas você pode colocar o nome e o caminho do arquivo (se necessário) aqui, por exemplo, reviews.html . Certifique-se de colocar isso dentro das aspas duplas.

Aqui está o CSS:

 #navbar { list-style-type: none; /* remove bullet points */ margin: 29px 0 0 0; padding: 0; float: right; font-size: 16pt; } #navbar li { display: inline; /* make items horizontal */ } #navbar li a:link, #navbar li a:visited, #navbar li a:active { text-decoration: none; /* remove underline */ color: #000000; padding: 0 16px 0 10px; /* space links apart */ margin: 0; border-right: 2px solid #B4B4B4; /* divider */ } #navbar li a:link.last-link { /* remove divider */ border-right: 0px; } #navbar li a:hover { /* change color on hover (mouseover) */ color: #EB6361; } 

Este CSS começa com uma lista não ordenada . Em seguida, remove os marcadores usando list-style-type: none; . Os links são espaçados um pouco e recebem uma cor quando você passa o mouse sobre eles. O pequeno divisor cinza é uma borda direita em cada elemento, que é então removido para o último elemento usando a última classe de link . Aqui está o que parece:

Tudo o que resta para esta seção é o destaque da cor horizontal vermelha. Adicione este HTML após o wrapper normal :

E aqui está o CSS:

 #top-color-splash { width: 100%; height: 4px; background: #EB6361; } 

Essa é a parte superior feita. Aqui está o que parece - bastante semelhante ao design certo?

Área de Conteúdo Principal

Agora é hora de avançar na área de conteúdo principal - a chamada “acima da dobra”. Veja como esta parte se parece:

Esta é uma parte bem simples, algum texto da esquerda com uma imagem à direita. Esta área será vagamente dividida em terços, aproximando-se aproximadamente da Proporção Áurea Usando a Proporção Áurea na Fotografia para Melhor Composição Usando a Proporção Áurea na Fotografia para Melhor Composição Você luta com a composição da foto? Aqui estão duas técnicas baseadas na proporção áurea que melhorarão drasticamente suas fotos com pouco esforço de sua parte. Consulte Mais informação .

Você precisará da imagem de amostra para esta parte. Está incluído no download. Esta imagem tem uma largura de 670px e é da nossa opinião sobre a Panasonic Lumix DMC-G80 / G85 Revisão da Panasonic Lumix DMC-G80 / G85 Revisão da Panasonic Lumix DMC-G80 / G85 A Lumix G85 é a mais recente câmera sem espelho da Panasonic. o departamento de vídeo, com saída HDMI e gravação 4K - tudo por US $ 1000! Consulte Mais informação .

Adicione o HTML depois do elemento top-color-splash :

Bem vinda! 
A Noise Media é uma empresa de tecnologia especializada em revisões de tecnologia.
Somos muito bons no que fazemos, mas infelizmente não somos uma empresa real.
Certifique-se de visitar o site makeuseof.com para o tutorial completo sobre como criar este site.
Alternativamente, confira nossa análise do Panasonic G80 mostrado à direita!

Observe como o elemento wrapper normal retornou (essa é a alegria de usar classes). Você pode estar se perguntando por que a tag de imagem ( img ) não fecha. Esta é uma tag de fechamento automático. A barra ( /> ) indica isso, pois nem sempre faz sentido ter que fechar uma tag.

CSS:

 .one-third { width: 40%; float: left; box-sizing: border-box; /* ensure padding and borders do not increase the size */ margin-top: 20px; } .two-third { width: 60%; float: left; box-sizing: border-box; /* ensure padding and borders do not increase the size */ padding-left: 40px; text-align: right; margin-top: 20px; } .featured-image { max-width: 500px; /* reduce image size while maintaining aspect ratio */ } .no-margin-top { margin-top: 0; /* remove margin on things like headers */ } 

O atributo mais importante aqui é o dimensionamento de caixa: border-box; . Isso garante que os elementos sempre terão 40% ou 60% de largura. O padrão (sem esse atributo) é sua largura especificada mais qualquer preenchimento, margens e bordas. A classe de imagem ( imagem em destaque ) tem uma largura máxima de 500 px . Se você especificar apenas uma dimensão (uma largura ou altura) e deixar a outra em branco, o css redimensionará a imagem enquanto mantém sua proporção.

Área de cotação

Vamos criar a área de cotação. Aqui está o que isso parece:

Esta é outra área simples. Ele contém um fundo cinza escuro, com texto branco centrado.

Adicione este HTML após o wrapper normal anterior:

“Makeuseof é o melhor site de todos os tempos” 
Joe Coburn 

E então este CSS:

 #quote-area { background: #363636; color: #FFFFFF; text-align: center; padding: 15px 0; } h3 { font-weight: normal; font-size: 20pt; margin-top: 0px; } h4 { font-weight: normal; font-size: 16pt; margin-bottom: 0; } 

Não há muita coisa acontecendo aqui. O dimensionamento é o principal ajuste necessário - tamanho da fonte, espaçamento e assim por diante. Aqui está o que a coisa toda parece agora - está começando a parecer um site!

Área de Ícones

Vamos continuar pressionando - está quase pronto! Aqui está a próxima área que precisa ser criada:

Esta parte utilizará várias classes. Os três ícones são basicamente os mesmos, com exceção do conteúdo, por isso faz sentido usar classes em vez de ids. Adicione este HTML após a área de cotação anterior:

  
 Youtube 
Check-out nosso canal do YouTube para mais revisões de tecnologia, tutoriais e brindes!
 Rever 
Se você planeja comprar um novo gadget, verifique primeiro aqui. Forneceremos análises detalhadas dos dispositivos mais recentes.
 Guias de compra 
Na Buying Guides, nós nos esforçamos para fornecer aos leitores as ferramentas para obter as melhores coisas para a menor quantidade de dinheiro.

Esses três ícones também são impressionantes com a fonte. O HTML está mais uma vez usando a classe normal-wrapper . Aqui está o CSS:

 .icon-outer { box-sizing: border-box; /* ensure padding and borders do not increase the size */ float: left; width: 33.33%; padding: 25px; margin: 0; text-align: center; } .icon-circle { background: #EEEEEE; color: #B4B4B4; width: 200px; height: 200px; border-radius: 200px; /* make rounded corners */ margin: 0 auto; border: 2px solid #D6D6D6; box-sizing: border-box; /* ensure padding and borders do not increase the size */ font-size: 75pt; padding: 30px 0 0 0; cursor: pointer; } .icon-circle:hover { /* change color on hover (mouseover) */ color: #FFFFFF; background: #EB6361; } h5 { margin: 15px 0 10px 0; font-size: 20pt; } 

Há algumas coisas novas acontecendo no CSS. Os cantos arredondados estão sendo definidos por raio de borda: 200px; . Definir este valor da mesma forma que a largura resulta em um círculo perfeito. Você pode reduzir isso se preferir mais de um quadrado com cantos arredondados. Observe como as ações de ajuda instantânea são aplicadas às divs - elas não estão restritas a apenas links. Veja como esta seção se parece agora:

O rodapé

A última coisa a fazer é o rodapé! Isso é muito simples, pois é apenas uma área cinza sem texto. Adicione este HTML após o wrapper normal das áreas de ícones:

Aqui está o CSS:

 #footer { width: 100%; background: #F1F1F1; /* light gray */ border-top: 1px solid #D4D4D4; /* dark gray "topline" */ height: 150px; } 

Veja - coisas realmente simples.

Adicione um pouco de Pizzazz

É isso aí, a codificação está pronta! Você pode absolutamente deixar as coisas como estão, é uma página finalizada. Você pode ter notado, no entanto, que não se parece exatamente com o design. A principal razão para isso é as fontes usadas. Vamos resolver isso.

A fonte usada para a maioria dos títulos é Myriad Pro . Isso vem com o Adobe Create Cloud, mas não está disponível como um webfont. A fonte usada atualmente na página da Web é Helvetica . Isso parece ok, então você pode deixar como está, no entanto PT Sans está disponível como um webfont. A fonte usada para todo o texto é PT Serif, disponível como webfont.

Webfonts são um processo simples. Assim como carregar uma nova fonte em seu computador, as páginas da Web podem carregar fontes sob demanda. Uma das melhores maneiras de fazer isso é através do Google Fonts.

Adicione este CSS para mudar para as melhores fontes:

 @import url('https://fonts.googleapis.com/css?family=PT+Sans'); @import url('https://fonts.googleapis.com/css?family=PT+Serif'); h1, h2, h4, h5, h6 { font-family: 'PT Sans', 'Helvetica', 'Arial'; } 

Agora modifique seus elementos html e body para usar as novas fontes:

 font-family: 'PT Serif', 'Helvetica', 'Arial'; 

Observe como o elemento h3 não está incluído na lista - isso será padronizado para PT-Serif em vez de PT-Sans .

Como um pouquinho final de beleza, vamos usar um pouco de JavaScript para percorrer três imagens diferentes. Você precisará de Image_2 e Image_3 para essa parte e, novamente, é opcional. O site está completamente funcional neste momento sem esse recurso. Aqui está como ficará (acelerado):

Modifique seu HTML para incluir três imagens em destaque. Observe como dois deles têm uma classe CSS oculta . Cada imagem recebeu um ID para que o JavaScript possa segmentar cada uma delas de forma independente.

Aqui está o CSS necessário para esconder as imagens extras em destaque:

 .hidden { display: none; } 

Agora que o HTML e o CSS são resolvidos, vamos para o JavaScript. É útil entender o JavaScript do modelo de objeto de documento e o desenvolvimento da Web: Usando o modelo de objeto de documento JavaScript e desenvolvimento da Web: usando o modelo de objeto de documento Este artigo apresentará o esqueleto do documento com o qual o JavaScript trabalha. Tendo um conhecimento prático deste modelo de objeto de documento abstrato, você pode escrever JavaScript que funciona em qualquer página da web. Leia mais (DOM) para esta parte, mas não é um requisito.

Encontre a área de script na parte inferior da página:

 /* JavaScript goes here, at the bottom of the page */ 

Adicione o seguinte JavaScript dentro da tag de script :

 /* JavaScript goes here, at the bottom of the page */ $(document).ready(function() { // run once the page is ready var time = 2500; // get the image containers $im1 = $('#f-image-1'); $im2 = $('#f-image-2'); $im3 = $('#f-image-3'); setInterval(function(){ // call function every x milliseconds (defined in time variable above) changeImage(); }, time); var currentImage = 1; function changeImage(){ switch(currentImage) { case 1: // show image 2 $im1.hide(); $im2.show(); $im3.hide(); currentImage = 2; break; case 2: // show image 3 $im1.hide(); $im2.hide(); $im3.show(); currentImage = 3; break; default: // show image 1 $im1.show(); $im2.hide(); $im3.hide(); currentImage = 1; } } }); 

Há algumas coisas acontecendo aqui. O código está contido em $ (document) .ready () . Isso significa que ele será executado assim que o navegador terminar de renderizar a página - essa é uma boa prática. A função setInterval () é usada para chamar a função changeImage () regularmente em um intervalo predefinido em milissegundos (1000 milissegundos = 1 segundo). Isso é armazenado na variável de tempo . Você pode aumentar ou diminuir isso para acelerar ou desacelerar a rolagem. Por fim, uma declaração de caso simples é usada para mostrar imagens diferentes e acompanhar a imagem exibida no momento.

Desafio de Codificação

É isso aí! Espero que você tenha aprendido muito durante o processo. Se você gosta de um desafio e quer testar suas novas habilidades, por que não tentar implementar essas modificações:

Adicionar um rodapé: Adicione algum texto no rodapé (dica: você pode reutilizar o wrapper normal e um terço / dois terços das classes).
Melhorar a rolagem da imagem: Modifique o JavaScript para animar as alterações da imagem (dica: olhe para jQuery fadein e animate).
Implementar várias citações: Modifique as aspas para alterar entre uma das várias diferentes (dica: observe o código de rolagem da imagem para um ponto inicial).
Configurar um servidor: Configurar um servidor e enviar dados entre a página da Web eo servidor (sugestão: leia o nosso guia para JSON e Python Como obter Python e JavaScript para comunicar usando JSON Como obter Python e JavaScript para comunicar usando JSON Hoje eu vou mostrarei como usar o JSON para enviar dados do JavaScript para o Python. Estarei cobrindo como configurar um servidor da Web, juntamente com todo o código que você precisa. Leia mais).

Você aprendeu alguma habilidade nova hoje? Como você conseguiu os desafios de codificação? Que modificações você fez para tornar este site seu? Deixe-nos saber nos comentários abaixo, gostaríamos de saber!