Planejando um site
Primeiro você precisa planejar um site. Este tutorial tomará a figura a seguir como exemplo para construir um site.
Figura 1
é mostrado abaixo:
A Figura 2
consiste principalmente em cinco partes:
1. Barra de navegação principal, com efeitos de botão.
Largura: 760px Altura: 50px
2. Cabeçalho O ícone do cabeçalho do site contém o logotipo e o nome do site.
Largura: 760px Altura: 150px
3. Conteúdo O conteúdo principal do site.
Largura: 480px Altura: Muda dependendo do conteúdo
4. Borda da barra lateral, algumas informações adicionais.
Largura: 280px Altura: Muda dependendo
5. A coluna inferior do site do rodapé contém informações de direitos autorais, etc.
Largura: 760px Altura: 66px
1. Crie modelos HTML e diretórios de arquivos, etc.
O código é o seguinte:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<cabeça>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>NomedaEmpresa - NomePágina</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="descrição" content="Descrição" />
<meta name="palavras-chave" content="palavras-chave" />
<meta name="author" content="Iluminar Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<corpo>
</body>
</html>
Salve-o como index.html e crie pastas css e imagens. A estrutura do site é a seguinte:
Figura 3
2. Crie uma caixa grande para o site :
Crie uma caixa com 760px de largura que conterá todos os elementos do site.
Escreva <div id="page-container"> entre <body> e </body> no arquivo html
Olá mundo.
</div>
Crie um arquivo css, nomeie-o master.css e salve-o na pasta /css/. Escrever:
#page-container {
largura: 760px;
fundo: vermelho;
}
A largura da caixa cujo id é page-container é controlada para ser html é 760px e o fundo é vermelho. O desempenho é o seguinte.
Figura 4
Agora para centralizar a caixa, escreva margin: auto;, para que o arquivo css fique:
#page-container {
largura: 760px;
margem: automático;
fundo: vermelho;
}
Agora você pode ver que há uma lacuna de 8px entre a parte superior da caixa e o navegador. Isso se deve ao preenchimento e às bordas padrão do navegador. Para eliminar essa lacuna, você precisa escrever no arquivo css:
html, corpo {
margem: 0;
preenchimento: 0;
}
Divida o site em cinco divs
1. Coloque as cinco partes mencionadas no “Passo 1” em caixas e escreva no arquivo html:
<div id="page-container">
<div id="main-nav">Navegação principal</div>
<div id="header">Cabeçalho</div>
<div id="sidebar-a">Barra lateral A</div>
<div id="content">Conteúdo</div>
<div id="footer">Rodapé</div>
</div>
se comporta da seguinte forma:
Figura 5
2. Para distinguir as cinco partes, marcamos essas cinco partes com cores de fundo diferentes e escrevemos no arquivo css:
#navegação principal {
fundo: vermelho;
altura: 50px;
}
#cabeçalho {
fundo: azul;
altura: 150px;
}
#barra lateral-a {
fundo: verde escuro;
}
#contente {
fundo: verde;
}
#rodapé {
fundo: laranja;
altura: 66px;
}
O desempenho é o seguinte:
Figura 6
Layout da página Web e div flutuante, etc.
1. Flutuante: Primeiro, deixe a borda flutuar à direita do conteúdo principal. Use css para controlar a flutuação.
#barra lateral-a {
flutuar: certo;
largura: 280px;
fundo: verde escuro;
}
O desempenho é o seguinte:
Figura 7
2. Escreva algum texto na caixa de conteúdo principal. Escreva no arquivo html:
<div id="conteúdo">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, mecenas in lectus.
Donec in sapien in nibh rutrum gravida.
euismod vulputate. Nullam rhoncus mauris ac metus.
Duis scelerisque apenas a pede. Nam augue lorem, sempre at, porta eget, placerat eget,
Purus. Suspendisse mattis nunc vestibulum ligula In hac habitasse platea dictumst.
</div>
O desempenho é o seguinte:
Figura 8
Mas você pode ver que a caixa de conteúdo principal ocupa toda a largura do contêiner da página e precisamos definir a borda direita de #content para 280px. para que não entre em conflito com a fronteira.
O código css é o seguinte:
#contente {
margem direita: 280px;
fundo: verde;
}
Ao mesmo tempo, escreva algum texto na borda. Escreva no arquivo html:
<div id="barra lateral-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, mecenas in lectus.
Donec in sapien in nibh rutrum gravida.
euismod vulputate. Nullam rhoncus mauris ac metus.
Duis scelerisque apenas a pede. Nam augue lorem, sempre at, porta eget, placerat eget,
Purus. Suspendisse mattis nunc vestibulum ligula In hac habitasse platea dictumst.
</div>
se comporta da seguinte forma:
Figura 9
Não é isso que queremos. O quadro inferior do site ficou abaixo da borda. Isso ocorre porque flutuamos a borda para a direita. Como ela está flutuando, pode-se entender que está em outra camada acima de toda a caixa. Portanto, a caixa inferior e a caixa de conteúdo estão alinhadas.
Então escrevemos em css:
#rodapé {
claro: ambos;
fundo: laranja;
altura: 66px;
}
O desempenho é o seguinte:
Figura 10
O layout e apresentação de estruturas adicionais fora do frame principal da página web A apresentação (Layout) de estruturas adicionais fora do frame principal da página web, incluindo as seguintes:
1. Barra de navegação principal;
2. Título, incluindo nome do site e título do conteúdo;
3. Conteúdo;
4. Informações de rodapé, incluindo direitos autorais, certificação e barra de subnavegação (opcional).
Ao adicionar essas estruturas, para não destruir o framework original, precisamos adicionar abaixo da tag “body” (TAG) do arquivo css:
.escondido {
exibição: nenhum;
}
".hidden" é a classe que adicionamos. Esta classe pode fazer com que qualquer elemento da página que pertença à classe oculta não seja exibido. Eles serão usados mais tarde, então esqueça isso por enquanto.
Agora adicionamos o título:
Primeiro volte ao código HTML, <h1> a <h6> são nossos códigos de cabeçalho HTML comumente usados. Por exemplo, geralmente usamos <h1>nome do site</h1>, <h2>legenda do site</h2>, <h3>título principal do conteúdo</h3>, etc. Adicionamos o seguinte à camada Header (Div) do arquivo html:
<div id="cabeçalho">
<h1>Iluminar designs</h1>
</div>
Atualize a página e você poderá ver o título enorme e o espaço em branco ao redor do título. Isso é causado pelo tamanho e margem padrão da tag <h1>>. Para eliminar esses espaços em branco primeiro, você precisa adicionar:
h1 {
margem: 0;
preenchimento: 0;
}
A seguir vem a barra de navegação :
O código CSS que controla o desempenho da barra de navegação é relativamente complicado. Iremos apresentá-lo em detalhes na nona ou décima etapa. Agora adicione o código de navegação ao arquivo html:
<div id="navegação principal">
<ul>
<li id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Sobre</a></li>
<li id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Serviços</a></li>
<li id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Portfólio</a></li>
<li id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Fale Conosco</a></li>
</ul>
</div>
(Nota: O tutorial original usou dl e dt, jorux usa as tags ul e li mais comumente usadas aqui)
Actualmente, o desempenho da barra de navegação é relativamente fraco, mas o seu desempenho especial será introduzido em tutoriais futuros, por isso é necessário ocultar temporariamente a barra de navegação, por isso adicionei:
<div id="navegação principal">
<dl class="oculto">
<dt id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Sobre</a></dt>
<dt id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Serviços</a></dt>
<dt id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Portfólio</a></dt>
<dt id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Fale Conosco</a></dt>
</dl>
</div>