Como fazer um site: para iniciantes

Você sempre quis fazer um site? Talvez você já leu alguns dos nossos HTML (compreensão HTML

) e tutoriais CSS, mas não sei como usar esses idiomas em um projeto maior.5 passos para compreensão básica Código HTML5 passos para compreensão básica Código HTMLconsulte Mais informação

Hoje eu vou guiá-lo através do processo de fazer um site completo a partir do zero. Não se preocupe se esta parece ser uma tarefa difícil, eu vou guiá-lo em cada passo do caminho.

Você vai produzir este site usando HTML, CSS e javascript com um toque de jQuery (guia para jQuery). Você não vai fazer nada realmente bleeding edge, de modo que 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 CSS no W3Schools.com.

O design

Aqui está o projeto para este site. Dê uma olhada na imagem de alta resolução se você quiser ver melhor, ou melhor ainda, baixar o 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 Pacote de download. Aqui está o que você tem no arquivo photoshop:

Dentro do PSD, você vai encontrar todas as camadas agrupadas, com o nome e código de cores:

Você vai precisar de algumas fontes instaladas para que as coisas parecem corretas. O primeiro é Font Awesome, usado para todos os ícones. As outras duas fontes são PT Serif e Myriad Pro (incluído com Photoshop). Se você não tem certeza de como instalar fontes, em seguida, leia o nosso guia.Como instalar fontes no Windows, Mac & LinuxComo instalar fontes no Windows, Mac & Linuxconsulte Mais informação

Não se preocupe se você não tem Photoshop, você não precisa dele para continuar.

Código inicial

Agora que o projeto é claro, vamos começar a codificação! Criar um novo arquivo no seu editor de texto favorito (estou usando Sublime Texto 3). Salve como index.html. Você pode chamar isso de qualquer coisa que você gosta, a razão que muitas páginas são chamados índice é devido à forma como servidores web trabalho. A configuração padrão para a maioria dos servidores é servir a página index.html se nenhuma página for especificado.

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

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

lt;htmlgt;lt;cabeçagt;lt;meta charset="UTF-8"gt;lt;títulogt;mídia Noisetítulogt;lt;ligação rel="stylesheet" tipo="text / css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"gt;lt;estilogt;/ * CSS vai aqui, no topo da página * /estilogt;cabeçagt;lt;corpogt;lt;roteiro src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" tipo="text / javascript"gt;roteirogt;lt;roteiro tipo="text / javascript"gt;/ * javascript vai aqui, na parte inferior da página * /roteirogt;corpogt;htmlgt;

Isto faz várias coisas:

• Define o HTML mínimo necessário.
• Define um título da página de “ruído de mídia”
• Inclui jQuery hospedada no Google CDN (o que é um CDN).
• Inclui Font impressionante hospedado no Google CDN.
• define um estilo tag para escrever sua CSS no.
• define um roteiro tag para escrever o seu javascript.

Salve o arquivo novamente e abri-lo no seu navegador web. Você provavelmente não vai notar muito, e certamente não será a aparência de um site ainda.

Observe como o título da página é mídia Noise. Isto é definido pelo texto dentro do título tag. este tem para estar dentro do cabeça Tag.

o cabeçalho

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

Vamos começar com um pouco cinza na parte superior. É um cinza claro com um ligeiro cinza escuro por baixo. Aqui está um close-up:

Adicione este HTML dentro do corpo tag no topo:

lt;div identidade="Barra superior"gt;divgt;

Enquanto estiver aqui, vamos decompô-lo. UMA div é como um recipiente para colocar outras coisas. Este “outro material” pode ser mais recipientes, texto, imagens, qualquer coisa realmente. Há algumas restrições sobre o que pode entrar em certos tags, mas divs são coisas bastante genéricos. Tem uma identidade do Barra superior. Este será utilizado para denominá-lo com CSS, e alvejá-lo com javascript, se necessário. Certifique-se que você só tem um elemento com um determinado id - que deve ser único. Se você quiser vários elementos a ter o mesmo nome, use um classe em vez - é o que eles são projetados para! Aqui está o CSS que você precisa para denominá-lo (colocar no topo dentro de seu estilo tag):

html, corpo {margem: 0-preenchimento: 0-família de fontes: `Helvética`, `Arial`- / * Fontes iniciais * /}#Barra superior {largura: 100%-fundo: # F1F1F1- /* cinza claro */-fronteira inferior: 1px solid # d4d4d4- /* cinza escuro "sublinhado" * /altura: 25px-}

Observe como o cardinal (#, hashtag, sinal de libra) é usado antes do nome. Isto significa que o elemento é um ID. Se você estivesse usando um uma classe, você usaria um ponto (.) Em vez. o html e corpo etiquetas têm o seu preenchimento e margem definida para zero. Isso impede que os problemas de espaçamento indesejados.

Video: Programação para iniciantes HTML - Aula 01 (criando pagina , salvando e visualizando projeto)

É hora de passar para o logotipo e barra de navegação. Antes de começar, você precisa de um recipiente para colocar este conteúdo. Vamos fazer este uma classe (para que você possa reutilizá-lo mais tarde), e como este é não um site responsivo, torná-lo 900 pixels de largura.

HTML:

lt;div classe="normal invólucro"gt;divgt;

CSS:

.normal invólucro {largura: 900px-margem: 0 auto-preenchimento: 15px 40px-fundo: vermelho-transbordar: auto-}

Pode ser difícil dizer o que está acontecendo até que você termine o código, por isso pode ser útil para adicionar um fundo (temporária) de cor para ver o que está acontecendo:

fundo: vermelho-

É hora de criar o logotipo agora. Font impressionante é necessário para o próprio ícone. Font impressionante é um conjunto de ícones embalados como uma fonte vetor - incrível! O código inicial acima já Font configuração impressionante, por isso é tudo pronto para ir!

Adicione este HTML dentro a normal invólucro div:

lt;div identidade="logo-contêiner"gt;lt;Eu classe="fa fa-volume-para baixo o logotipo-icon"gt;Eugt; lt;h1gt;mídia Noiseh1gt;divgt;

CSS:

.logo-ícone {cor: # 000000-tamanho da fonte: 60PT-flutuador: esquerda-}h1 {flutuador: esquerda-margem: 21px 0 0 25px-}

Não se preocupe com as outras fontes não combinam com o design - você vai arrumar isso mais tarde. Se você deseja usar ícones diferentes, na cabeça durante a página ícones impressionantes Font, e depois mudança fa-volume-baixo para o nome do ícone que você deseja usar.

Mover-se para a barra de navegação, você vai usar uma lista não ordenada (UL) por esta. Adicione este HTML depois de a logo-contêiner (Mas ainda dentro do normal invólucro):

lt;ul identidade="navbar"gt;lt;ligt;lt;uma href=""gt;Casaumagt;ligt;lt;ligt;lt;uma href=""gt;Sobreumagt;ligt;lt;ligt;lt;uma href=""gt;Reverumagt;ligt;lt;ligt;lt;uma href="" classe="última ligação" gt;Contatoumagt;ligt;ulgt;

o href é usado para conectar-se a outras páginas. Este website tutorial não tem quaisquer outras páginas, mas você pode colocar o nome eo caminho do arquivo (se necessário) aqui, por exemplo, reviews.html. Certifique-se de colocar isso dentro de ambas as aspas duplas.

Aqui está o CSS:

#navbar {list-style-type: Nenhum- / * Remover pontos de bala * /margem: 29px 0 0 0-preenchimento: 0-flutuador: certo-tamanho da fonte: 16pt-}li #navbar {exibição: na linha- / * Fazer itens horizontal * /}#navbar li a: link, #navbar li a: visited, #navbar li a: active {text-decoration: Nenhum- / * Remover sublinhado * /cor: # 000000-preenchimento: 0 16px 0 10px- / * Ligações Space Apart * /margem: 0-border-right: 2px # B4B4B4 sólida- / * * Divisor /}#navbar li a: link.last-link {/ * * Remover divisor /border-right: 0px-}#navbar li a: hover {/ * Mudam de cor em foco (mouseover) * /cor: # EB6361-}

Este CSS começa com uma lista desordenada. Em seguida, ele remove os pontos de bala usando list-style-type: nenhum-. As ligações são espaçadas um pouco, e dada uma cor quando você passar o mouse sobre eles. O pequeno divisor de cinza é uma borda direita de cada elemento, que é então removido para o último elemento usando o última ligação classe. Aqui está o que parece:

Video: Como fazer um site pelo bloco de notas (iniciante)

Tudo o que resta para esta seção é o destaque de cor horizontal vermelho. Adicione este HTML após a normal invólucro:

lt;div identidade="top-cor-splash"gt;divgt;

E aqui está o CSS:

# Top-color-respingo {largura: 100%-altura: 4px-fundo: # EB6361-}

Essa é a seção superior feito. Aqui está o que parece - muito similar ao direito design?

Área de conteúdo principal

Agora é hora de passar a área de conteúdo principal - o chamado “acima da dobra”. Aqui está o que esta parte se parece com:

Esta é uma parte muito simples, algum texto da esquerda com uma imagem à direita. Esta área será folgadamente dividida em três partes, cerca de aproximar a Proporção áurea.Usando o Golden Ratio em Fotografia para melhor composiçãoUsando o Golden Ratio em Fotografia para melhor composiçãoVocê luta com composição foto? Aqui estão duas técnicas baseadas na Golden Ratio, que irá melhorar drasticamente suas fotos com pouco esforço de sua parte.consulte Mais informação

Você terá a imagem de exemplo para esta parte. É incluído no download. Esta imagem é 670 pixels de largura, e é de nossa Panasonic Lumix DMC-G80 / G85 revisão.

Adicione o HTML depois de a top-cor-splash elemento:

lt;div classe="normal invólucro"gt;lt;div classe="um terço"gt;lt;h2 classe="sem margem de topo-"gt;Bem vinda!h2gt;lt;pgt;Noise Media é uma empresa de tecnologia especializada em tecnologia comentários.pgt;lt;pgt;Somos muito bons no que fazemos, mas, infelizmente, não somos uma empresa real.pgt;lt;pgt;Certifique-se de visitar makeuseof.com para o tutorial completo sobre como construir este site.pgt;lt;pgt;Alternativamente, consulte a nossa revisão do G80 Panasonic mostrada à direita!pgt;divgt;lt;div classe="dois terços"gt;lt;img classe="imagem em destaque" src="Image_1.jpg" / Gt;divgt;divgt;

Observe como o normal invólucro elemento voltou (que é a alegria de usar classes). Você pode estar se perguntando por que a imagem (img) Tag não fecha. Esta é uma tag de fecho automático. A barra (/ Gt;) Indica isso, pois nem sempre faz sentido ter de fechar uma tag.

CSS:

.um terço {largura: 40%-flutuador: esquerda-box-sizing: border-box- / * Garantir estofamento e as fronteiras não aumentar o tamanho * /margem superior-: 20px-}.dois terços {largura: 60%-flutuador: esquerda-box-sizing: border-box- / * Garantir estofamento e as fronteiras não aumentar o tamanho * /padding-left: 40px-alinhamento de texto: certo-margem superior-: 20px-}.imagem em destaque {largura máxima: 500px- / * Reduzir o tamanho da imagem, mantendo a relação de aspecto * /}.sem margem de topo- {margem superior-: 0- / * Remover margem sobre coisas como cabeçalhos * /}

O atributo mais importante aqui é caixa-sizing: Beira-caixa-. Isso garante que os elementos são sempre vai ser 40% ou largura de 60%. O padrão (sem este atributo) é a sua largura especificada mais qualquer preenchimento, margens e fronteiras. A classe de imagem (imagem em destaque) tem um largura máxima do 500px. Se você especificar apenas uma dimensão (largura ou altura), e deixar o outro em branco, css irá redimensionar a imagem, mantendo que é relação de aspecto.

Área Citação

Vamos criar a área de citação. Aqui está o que isto se parece com:

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

Adicione este HTML depois de o anterior normal invólucro:

lt;div identidade="Citação-área"gt;lt;div classe="normal invólucro"gt;lt;h3gt;“MakeUseOf é o melhor site de sempre”h3gt;lt;h4gt;Joe Coburnh4gt;divgt;divgt;

E então este CSS:

# Cotação on-área {fundo: # 363636-cor: #FFFFFF-alinhamento de texto: centro-preenchimento: 15px 0-}h3 {espessura da FONTE: normal-tamanho da fonte: 20pt-margem superior-: 0px-}h4 {espessura da FONTE: normal-tamanho da fonte: 16pt--margem inferior: 0-}

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

Área ícone

Vamos continuar pressionando - é quase terminado! Aqui é a próxima área que necessita de criar:

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

lt;div classe="normal invólucro"gt;lt;div classe="icon-exterior"gt;lt;div classe="icon-círculo"gt;lt;Eu classe="fa fa-youtube logo-ícone"gt;Eugt;divgt;lt;h5gt;Youtubeh5gt;lt;pgt;Checkout nosso canal no YouTube para mais tecnologia comentários, tutoriais e brindes!pgt;divgt;lt;div classe="icon-exterior"gt;lt;div classe="icon-círculo"gt;lt;Eu classe="fa logo-ícone fa-câmera retro"gt;Eugt;divgt;lt;h5gt;Reverh5gt;lt;pgt;Se você está planejando comprar um novo gadget, verifique aqui primeiro. Vamos dar-lhe análises aprofundadas dos mais recentes dispositivos.pgt;divgt;lt;div classe="icon-exterior"gt;lt;div classe="icon-círculo"gt;lt;Eu classe="fa fa-dólar logo-ícone"gt;Eugt;divgt;lt;h5gt;Guia de Comprash5gt;lt;pgt;No guias de compra nós nos esforçamos para fornecer leitores com as ferramentas para obter o melhor material para a menor quantidade de dinheiro.pgt;divgt;divgt;

Estes três ícones são também Font-impressionante. O HTML é mais uma vez usando o normal invólucro classe. Aqui está o CSS:

.icon-exterior {box-sizing: border-box- / * Garantir estofamento e as fronteiras não aumentar o tamanho * /flutuador: esquerda-largura: 33,33%-preenchimento: 25px-margem: 0-alinhamento de texto: centro-}.icon-círculo {fundo: #EEEEEE-cor: # B4B4B4-largura: 200px-altura: 200px-fronteira-raio: 200px- / * Fazer cantos arredondados * /margem: 0 auto-fronteira: 2px solid # d6d6d6-box-sizing: border-box- / * Garantir estofamento e as fronteiras não aumentar o tamanho * /tamanho da fonte: 75pt-preenchimento: 30px 0 0 0-cursor: apontador-}.icon-círculo: hover {/ * Mudam de cor em foco (mouseover) * /cor: #FFFFFF-fundo: # EB6361-}h5 {margem: 15px 0 10px 0-tamanho da fonte: 20pt-}

Há algumas coisas novas acontecendo no CSS. Os cantos arredondados estão a ser criadas por fronteira de raio: 200px-. A definição deste valor o mesmo que a largura resulta em um círculo perfeito. Você pode reduzir este se você preferir mais de um quadrado com cantos arredondados. Observe como ações em foco são aplicadas aos divs - não se restringe a apenas links. Aqui está o que esta secção parece agora:

o Rodapé

A última coisa a fazer é rodapé! Isto é realmente simples, como é apenas uma área cinzenta sem texto. Adicione este HTML depois que as áreas ícone normal invólucro:

lt;div identidade="rodapé"gt;divgt;

Aqui está o CSS:

#rodapé {largura: 100%-fundo: # F1F1F1- /* cinza claro */border-top: 1px solid # d4d4d4- /* cinza escuro "linha superior" * /altura: 150px-}

Veja - coisas realmente simples.

Adicione algum pizzazz

É isso, a codificação é feito! Você pode absolutamente deixar as coisas como elas são, é uma página da Web acabado. Você deve ter notado no entanto, que não parece exatamente como o design. A principal razão para isso é as fontes usadas. Vamos resolver isso.

A fonte usada para a maioria dos títulos é Pro Myriad. Isto vem com Adobe Criar Nuvem, mas não é disponível como um WebFont. O tipo de letra usado atualmente na página da Web é helvética. Isso parece ok, então você pode deixá-lo como é, no entanto PT Sans está disponível como um WebFont. A fonte usada para todo o texto é PT Serif, que está disponível como um WebFont.

Webfonts é um processo simples. Assim como o carregamento de um novo tipo de letra para o seu computador, páginas web pode carregar fontes na demanda. Uma das melhores maneiras de fazer isso é através do Google Fonts.

Adicione este CSS para mudar para as fontes melhores:

@importar url ( `https://fonts.googleapis.com/css?family=PT+Sans`)-@importar url ( `https://fonts.googleapis.com/css?family=PT+Serif`)-H1, H2, H4, H5, H6 {família de fontes: `PT Sans`, `Helvética`, `Arial`-}

Agora modifique seu HTML e corporais elementos para usar as novas fontes:

família de fontes: `PT Serif`, `Helvética`, `Arial`-

Observe como o elemento h3 não está incluído na lista - este será o padrão para PT-Serif ao invés de PT-Sans.

Como um bit final de beleza, vamos usar alguns javascript para percorrer três imagens em destaque diferentes. Você vai precisar IMAGE_2 e iMAGE_3 para esta parte, e novamente, é opcional. O site é totalmente funcional neste momento sem esse recurso. Aqui está o que ele vai olhar como (acelerado):

Modifique o seu HTML para incluir três imagens em destaque. Observe como dois deles têm uma classe CSS de escondido. Cada imagem tem sido dada uma identificação para que o javascript pode direcionar cada um deles de forma independente.

lt;div classe="dois terços"gt;lt;img identidade="f-image-1" classe="imagem em destaque" src="Image_1.jpg" / Gt;lt;img identidade="f-image-2" classe="caracterizou-imagem oculta" src="Image_2.jpg" / Gt;lt;img identidade="f-image-3" classe="caracterizou-imagem oculta" src="Image_3.jpg" / Gt;divgt;

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

.escondido {exibição: Nenhum-}

Agora que o HTML e CSS é cuidado, vamos passar para javascript. É útil para entender a Document Object Model (DOM) para esta parte, mas não é uma exig