Redes sociais

Facebook hot tutorial YouTube hot tutorial Rss feed hot tutorial

Criando Site: Layout com HTML e CSS

13 fevereiro 2013


Trataremos nesse primeiro artigo como fazer uma Estrutura para um site de Três colunas. Esta estrutura inicial é o inicio de um web site, onde a estrutura inicial é definida, com esta estrutura criada pode-se visualizar como ficará o site nos variados browsers, nesta primeira parte nos preocuparemos com a Estrutura , não vamos nos preocupar com as cores e detalhes para deixar o site bonito, apenas queremos garantir que o site vai abri sem quebras nos navegadores mais usados. Quando estamos fazendo um site temos que garantir que este site não vai ficar quebrado em alguns browsers, sabemos que Internet Explorer se comporta diferente do Firefox e Google Crome, nesta primeira etapa pode garantir que o “Esqueleto do site” abrirá sem quebras.
CSS
Teremos dois arquivos que vão compor nosso site, a marcação HTML o CSS que fará a estrutura HTML ganhar forma. A nossa estrutura do CSS terá algumas parte que fixarão nosso HTML no lugar correto.
Container
Header
Menu
Menu
Lateral
Content
SideBar
Footer 
Esta é uma estrutura básica que a maioria dos sites tem que desenvolver, basicamente com isto podemos fazer um site simples e funcional. Falaremos das principais partes do site: Começaremos nossa estrutura com o Container ele e quem ira envolver toda nossa estrutura, o container é quem centralizará nosso layout no centro da pagina
Container

Este container terá uma largura de 1000px, assim o site não terá barra de rolagem na Horizontal em monitores de 15 polegadas a propriedade margin: 0 auto , deixa o site alinhado no centro da pagina.
1
2
3
4
5
6
#container
{
            margin: 0 auto;
            width: 1000px;
            background: #fff;
}
Header

O header fica Topo da página, neste local normalmente inserimos o logo do site e as principais informações referentes ao site.
1
2
3
4
5
6
7
8
9
#header
{
            background: #ccc;
            padding: 20px;
}
  
#header h1 {
margin: 0;
 }
Menu

O menu superior é onde fica os principais links para  navegação do site, através do menu é possível chegar em todas as seções do site, menus poder ser dos mais variado tipos, neste exemplo  teremos um menu na posição horizontal.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#menuSuperior
{
            float: left;
            width: 1000px;
            background: #333;
}
  
#menuSuperior ul
{
            margin: 0;
            padding: 0;
}
  
#menuSuperior ul li
{
            list-style-type: none;
display: inline;
}
  
#menuSuperior li a
{
            display: block;
            float: left;
            padding: 5px 10px;
            color: #fff;
            text-decoration: none;
            border-right: 1px solid #fff;
}
  
#menuSuperior li a:hover
{
 background: #383]
 }
#content-container
{
float: left;
width: 1000px;
background: #fff ;
}
#section-menuSuperior
{
            float: left;
            width: 160px;
            padding: 20px 0;
            margin: 0 20px;
            display: inline;
}
  
#section-menuSuperior ul
{
            margin: 0;
            padding: 0;
}
  
#section-menuSuperior ul li
{
            margin: 0 0 1em;
            padding: 0;
            list-style-type: none;
}


Leia mais em: Criando Site: Layout com HTML e CSS - Parte 1 http://www.devmedia.com.br/criando-site-layout-com-html-e-css-parte-1/22207#ixzz2KnvVleiw

Nenhum comentário:

Postar um comentário

Atenção!
-Comentários ofensivos não serão publicados.
-Antes de pedir ajuda veja se a dica já não está no índice do blog.