Home-theater-designers
Você sempre quis fazer um site? Talvez você tenha lido algum de nosso HTML ( entender HTML ) e tutoriais de CSS, mas não sei como usar essas linguagens em um projeto maior.
Hoje irei orientá-lo no processo de criação de 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). Você não vai fazer nada realmente tecnologia de ponta, portanto, esse código deve funcionar muito bem na maioria dos navegadores modernos.
Se você não tiver certeza de qualquer CSS, dê uma olhada no Guia de CSS no W3Schools.com .
O design
Aqui está o design para este site. Dê uma olhada em uma imagem em alta resolução se quiser ter uma aparência melhor, ou ainda melhor, baixe o projeto completo aqui.
Eu desenvolvi este site para uma empresa fictícia em Adobe Photoshop 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 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 é Fonte incrível , usado para todos os ícones. As outras duas fontes são PT Serif e Myriad Pro (incluído no Photoshop). Se você não tiver certeza de como instalar as fontes, leia nosso guia.
Não se preocupe se você não tem Adobe Photoshop , você não precisa disso para continuar.
Código Inicial
Agora que o design está claro, vamos começar a codificar! Crie um novo arquivo em seu editor de texto favorito (estou usando Sublime Text 3 ) Salvar como index.html . Você pode chamar isso do que quiser, o motivo pelo 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 é servir a página index.html se nenhuma página for especificada.
Se você não quiser saber os detalhes, pegue o código completo no download.
Este é o código de 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 o título da página 'Noise Media'
- Inclui jQuery hospedado no Google CDN (o que é um CDN).
- Inclui Font Awesome hospedado no Google CDN.
- Define um estilo tag para escrever seu CSS.
- Define um roteiro tag para escrever seu JavaScript.
Salve o arquivo novamente e abra-o no navegador da web. Você provavelmente não notará muito e certamente não se parecerá com um site ainda.
Observe como o título da página é Noise Media . Isso é definido pelo texto dentro do título marcação. Esse tem estar dentro do cabeça Tag.
xbox um controlador não liga
O cabeçalho
Vamos criar o cabeçalho. Isso é o que parece:
Vamos começar com aquele pequeno pedaço cinza no topo. É um cinza claro com um leve cinza escuro embaixo. Aqui está um close up:
Adicione este HTML dentro do corpo tag no topo:
Enquanto você está aqui, vamos decompô-lo. UMA div é como um contêiner para colocar outras coisas. Essas 'outras coisas' podem ser mais contêineres, texto, imagens, qualquer coisa, na verdade. Existem algumas restrições sobre o que pode entrar em certas tags, mas divs são coisas bastante genéricas. Tem um Eu iria do Barra superior . Isso será usado para estilizá-lo com CSS e direcioná-lo com JavaScript, se necessário. Certifique-se de ter apenas um elemento com um id específico - eles devem ser únicos. Se você quiser que vários elementos tenham o mesmo nome, use um classe em vez disso - é para isso que foram projetados! Aqui está o CSS que você precisa para estilizá-lo (coloque no topo dentro de seu estilo marcação):
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, sinal de libra) é usado antes do nome. Isso significa que o elemento é um ID. Se você estivesse usando uma classe, em vez disso, usaria um ponto final (.). o html e corpo as tags têm seu preenchimento e margem definidos como zero. Isso evita problemas de espaçamento indesejados.
É hora de passar para o logotipo e a barra de navegação. 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á-la mais tarde), e como isso é não um site responsivo, com 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. Fonte incrível é necessário para o próprio ícone. Font Awesome é um conjunto de ícones empacotados como uma fonte vetorial - incrível! O código inicial acima já configurou o Font Awesome, então está tudo pronto para usar!
Adicione este HTML dentro a invólucro normal div:
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 não combinando com o design - você vai arrumar isso mais tarde. Se você deseja usar ícones diferentes, vá para o Ícones impressionantes de fontes página e, em seguida, mude ab-volume ao nome do ícone que você deseja usar.
Movendo-se para a barra de navegação, você usará uma lista não ordenada ( a ) por esta. Adicione este HTML depois de a logo-container (mas ainda dentro do invólucro normal ):
o href é usado para vincular a outras páginas. O site deste 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 colocá-lo entre 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 um lista não ordenada . Em seguida, remove os pontos de bala usando tipo de estilo de lista: nenhum; . 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 o último link classe. Isso é o que parece:
Tudo o que resta para esta seção é o destaque da cor horizontal vermelha. Adicione este HTML após o invólucro normal :
E aqui está o CSS:
#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}Essa é a seção superior concluída. Aqui está o que parece - bastante semelhante ao design certo?
Área de Conteúdo Principal
Agora é hora de avançar para a área de conteúdo principal - a chamada 'acima da dobra'. Esta é a aparência desta parte:
Esta é uma parte bem simples, algum texto da esquerda com uma imagem à direita. Esta área será vagamente dividido em terços, aproximando-se aproximadamente do Proporção áurea .
Você precisará da imagem de amostra para esta parte. Ele está incluído no download. Esta imagem tem 670 px de largura e é da nossa análise Panasonic Lumix DMC-G80 / G85.
Adicione o HTML depois de a respingo de cor superior elemento:
Welcome!
Noise Media is a technology company specialising in tech reviews.
We’re very good at what we do, but unfortunately, we are not a real company.
Make sure you visit makeuseof.com for the full tutorial on how to build this website.
como aumentar o brilho no windows 10
Alternatively, check out our review of the Panasonic G80 shown on the right!
Observe como o invólucro normal elemento retornou (essa é a alegria de usar classes). Você pode estar se perguntando por que a imagem ( img ) a tag 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 é dimensionamento da caixa: caixa de borda; . Isso garante que os elementos sempre terão 40% ou 60% de largura. O padrão (sem este atributo) é a largura especificada mais qualquer preenchimento, margens e bordas. 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 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. Esta é a aparência de:
Esta é outra área simples. Ele contém um plano de fundo cinza escuro, com texto branco centralizado.
Adicione este HTML depois de o anterior invólucro normal :
makeuseof is the best website ever
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á muito acontecendo aqui. O tamanho é o principal ajuste necessário - tamanho da fonte, espaçamento e assim por diante. Veja como a coisa toda se parece agora - está começando a se parecer com um site!
Área do ícone
Vamos continuar - está quase terminado! Esta é a próxima área que precisa ser criada:
Esta parte utilizará várias classes. Os três ícones são basicamente iguais, com exceção do conteúdo, portanto, faz sentido usar classes em vez de ids. Adicione este HTML depois de o anterior área de cotação :
YouTube
Checkout our YouTube channel for more tech reviews, tutorials and giveaways!
Reviews
If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.
Buying Guides
At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.
Esses três ícones também são Font-Awesome . O HTML está mais uma vez usando o invólucro normal classe. 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;
}Existem algumas coisas novas acontecendo no CSS. Os cantos arredondados estão sendo definidos por raio da borda: 200px; . Definir este valor igual à largura resulta em um círculo perfeito. Você pode reduzir isso se preferir mais um quadrado com cantos arredondados. Observe como as ações de foco são aplicadas aos divs - não está restrito apenas a links. 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 as áreas de ícones ' invólucro normal :
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 pizza
É isso, a codificação está feita! Você pode absolutamente deixar as coisas como estão, é uma página finalizada. Você deve ter notado, no entanto, que não parece exatamente como o design. A principal razão para isso são as fontes usadas. Vamos resolver isso.
A fonte usada para a maioria dos títulos é Myriad Pro . Isso vem com Adobe Crie nuvem, mas não está disponível como uma fonte da web. A fonte atualmente usada na página da web é helvética . Parece bom, 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 , que está disponível como uma fonte da web.
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 é por meio Fontes do Google .
Adicione este CSS para alternar 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 - o padrão será PT-Serif ao invés de PT-Sans .
Como um detalhe final de beleza, vamos usar um pouco de JavaScript para rolar por três imagens diferentes em destaque. Você vai precisar Image_2 e Image_3 para esta parte, e novamente, é opcional. O site está totalmente funcional neste ponto, sem esse recurso. Veja como será (acelerado):
Modifique seu HTML para incluir três imagens em destaque. Observe como dois deles têm uma classe CSS de escondido . Cada imagem recebeu um ID para que o JavaScript possa direcionar cada uma delas de forma independente.
Aqui está o CSS necessário para ocultar as imagens extras em destaque:
.hidden {
display: none;
}Agora que o HTML e o CSS estão resolvidos, vamos mudar para o JavaScript. É útil entender o Document Object Model (DOM) para esta parte, mas não é um requisito.
Encontre o roteiro área na parte inferior da página:
/* JavaScript goes here, at the bottom of the page */
Adicione o seguinte JavaScript dentro do roteiro marcação:
/* 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 dentro $ (document) .ready () . Isso significa que ele será executado assim que seu navegador terminar de renderizar a página - esta é uma boa prática. o setInterval () função é usada para chamar o changeImage () funcionar regularmente em um intervalo predefinido em milissegundos (1000 milissegundos = 1 segundo). Isso é armazenado no Tempo variável. Você pode aumentar ou diminuir isso para acelerar ou desacelerar a rolagem. Finalmente, uma declaração de caso simples é usada para mostrar imagens diferentes e manter o controle da imagem exibida no momento.
Desafio de Codificação
É isso! 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 estas modificações:
Adicione um rodapé: Adicione algum texto ao rodapé (dica: você pode reutilizar o invólucro normal e um terço / dois terços Aulas.).
Melhore a rolagem da imagem: Modifique o JavaScript para animar as mudanças na imagem (dica: olhe para jQuery aparecimento gradual e Animado )
Implemente várias cotações: Modifique as aspas para alternar entre uma das várias diferentes (dica: observe o código de rolagem da imagem para um ponto de partida).
Configure um servidor: Configure um servidor e envie dados entre a página da web e o servidor (dica: leia nosso guia para JSON e Python).
como fazer nenhum identificador de chamadas
Quando estiver confortável com o uso de JavaScript ou se tiver alguma experiência com Ruby, você pode tentar criar um site com um construtor de sites estático como GatsbyJS ou Jekyll.
Compartilhado Compartilhado Tweet O email Como alterar a aparência da área de trabalho do Windows 10Quer saber como melhorar a aparência do Windows 10? Use essas personalizações simples para tornar o Windows 10 seu.
Leia a seguir Tópicos relacionados- Programação
- HTML
- Designer de Web
- CSS
Joe é graduado em Ciência da Computação pela University of Lincoln, no Reino Unido. Ele é um desenvolvedor de software profissional e, quando não está pilotando drones ou escrevendo música, pode ser encontrado tirando fotos ou produzindo vídeos.
Mais de Joe CoburnAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever