Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
HTML e CSS para inciante criando layout
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
HTML /CSS
Criando um layout de site básico com HTML E CSS
• Este vai ser um tutorial curto e básico destinado especialmente para
iniciantes. Vamos criar um layout básico de site com HTML CSS. Quase todos
os sites consistem neste layout básico que inclui um cabeçalho, barra lateral,
área de conteúdo e rodapé.
•
• Vamos usar a tag DIV do HTML, pois esse será um design baseado em DIV e
estamos usando apenas HTML e CSS. Os designs baseados em DIV são muito
eficientes e resultam em código muito mais limpo em comparação aos designs
baseados em tabelas. Em projetos baseados em tabelas, usamos a tag <table>
e suas colunas / linhas para criar o layout que não é considerado de maneira
adequada.
Vamos começar
• No começo, você terá o design criado por você ou fornecido por outro
designer ou cliente. Você pode ver o desenho na figura abaixo.
•
Como este é apenas um projeto de demonstração vazio, existem apenas
quatro seções. Obviamente, o design do website completo terá mais seções e,
assim que você aprender a criar esse layout básico, poderá criar mais seções
com facilidade.
SEÇAO HEAD
<!DOCTYPE HTML>
<html>
<head>
<meta charset=“UTF-8” >
<title>Demo layout</title>
<link rel=“stylesheet” type=“text/css” href=“css/style.css” >
</head>
Nesta seção, fornecemos um título de página "Demo Layout" para esta página
e vinculamos um arquivo de estilo style.css no diretório css. Se você não
conhece essas noções básicas, saiba mais sobre isso .
Seção body
<body>
<div class=“wrap”>
<div class=“header” >
</div> <!--.header-->
<div class=“ content”>
</div> <!--.content-->
<div class=“ sidebar”>
</div> <!--.sidebar-->
<div class=“ clear”> </div>
<div class=“ footer”>
</div> <!--.footer-->
</div> <!--.wrap-->
</body>
</html>
css
Como você pode ver, estamos usando tags DIV e atribuímos classes a cada
uma delas. Usaremos essas classes posteriormente no arquivo de folhas
de estilo, chamando os nomes de cada classe atribuída. Também
adicionamos comentários como o mesmo nome de cada classe atribuída
após cada DIV de fechamento. Adicionando comentários considerados
como boa prática e isso também torna o código amigável para outros
usuários que possam estar editando ou lendo seu código.
Antes de estilizar cada seção, você precisará conhecer as medidas, como
largura e altura de cada seção. Essas medições obviamente diferem de
design para design. Eu uso a ferramenta "Régua" no Adobe Photoshop
para obter as medidas, clicando e arrastando de um ponto para outro.
Medições para este layout básico podem ser vistas na figura acima. Você
também pode baixar o design de PSD em branco anexado.
.wrap{
width: 980px;
margin: 0 auto;
}
Como proeminente pelo nome “.wrap”, isso é chamado de quebra DIV que
contém todos os outros DIVs. Você pode, obviamente, atribuir qualquer
outro nome, como invólucro, container ou main_div etc. mas eu prefiro
chamá-lo. O wrap parece limpo e curto.
Demos uma largura de 980 pixels de largura e adicionamos margem superior
/ inferior como 0 e margem direita / esquerda como auto. Essa margem
automática em ambos os lados faz com que nosso site esteja alinhado
horizontalmente.
Body{
margin: 0; padding: 0; }
↑ Apenas redefinindo a margem padrão e o preenchimento do corpo.
.header{
height: 140px;
margin-bottom: 15px;
background-color: #0d7963;
}
Espero que isso seja bem simples e explicado pelos nomes das
propriedades CSS que nós damos a ele com altura de 140px, margem
inferior de 15 pixels e cor de fundo “# 0d7963;” usando código de cores.
Eu usei a ferramenta de seleção de cores para obter o código de cores no
Adobe Photoshop.
.content{
width: 690px;
height: 450px;
background-color: #0d7963;
float: right;
}
.sidebar{
width: 275px;
height: 450px;
background-color: #0d7963;
float: left;
}
• Nós adicionamos a propriedade float: para fazer este DIVs flutuar. Dessa
forma, podemos fazer esses DIVs ficarem lado a lado. Sem a propriedade
float: , o DIV tomaria toda a largura da página e o novo DIV “.sidebar”
começaria com o DIV “.content”. Você pode trocar os valores de float para
alterar a posição da barra lateral para o lado esquerdo ou direito.
.clear{
clear: both;
}
Como você percebeu, usamos DIV claro, que provavelmente será como em
todos os outros designs, sem qualquer texto ou conteúdo. O propósito
deste DIV é limpar o espaço para elementos flutuantes acima de outro
modo o rodapé DIV ignoraria DIVs flutuantes acima e se encaixaria no
cabeçalho DIV
.footer{
height: 70px;
margin-top: 15px;
background-color: #0d7963;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset=“UTF-8” >
<title>Demo layout</title>
<link rel=“stylesheet” type=“text/css” href=“css/style.css” >
</head>
<body>
<div class=“wrap”>
<div class=“header” >
</div> <!--.header-->
<div class=“ content”>
</div> <!--.content-->
<div class=“ sidebar”>
</div> <!--.sidebar-->
<div class=“ clear”> </div>
<div class=“ footer”>
</div> <!--.footer-->
</div> <!--.wrap-->
</body>
</html>
.footer{
height: 70px;
margin-top: 15px;
background-color: #0d7963;
}
.clear{
clear: both;
Criar layout básico de site com HTML CSS é um tutorial básico para iniciantes.
FACEBOOK
ANUNCIO AQUIMateriais relacionados
Perguntas relacionadas
Compartilhar