Exemplo básico de html com css – Parte 3

Olá pessoal, tudo certo?

Bom, no post passado colocamos um topo no nosso site, reparem que nele tem um menu certo? Hoje vamos montar esse menu para poder completar o topo do site.

Abaixo da div topo vamos inserir nosso menu:

<html>
<head>
<title>Exemplo 01</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
 <body>
 <div id="topo">
 <img src="imagens/logomarca.jpg">
 </div>

 <div id="menu">
 <!-- vamos colocar nosso menu aqui -->
 </div>

 <h1>O meu nome é?</h1>
 <p>Rafael Fagundes</p>
 <h1>Qual módulo estou estudando?</h1>
 <p>HTML e CSS</p>
 </body>
</html>

Então para montar as opções do menu, vamos usar uma lista.

Obs:
<ul> é a nossa lista
<li> são as opções que tem dentro da lista

Vamos a lista:

<ul>
<li>Opção 1</li>
<li>Opção 2</li>
<li>Opção 3</li>
<li>Opção 4</li>
<li>Opção 5</li>
</ul>

Montado nossa lista, vamos salvar a index.html.

No css, temos que definir como esse menu será apresentado o menu no navegador.

/* Definimos o div onde vai aparecer o menu */
#menu{
height:30px;
background:#ddd;
line-height:30px;
}

/* aqui definimos como cada li deve se comportar */
#menu ul li{
float:left;
list-style:none;
padding:0 20px;
border-right:1px solid #999;
}

Salve o estilo.css.

Pronto, nosso menu agora já esta com uma formatação legal.

Veja como deve ficar o exemplo. Clique aqui.

Qualquer dúvida ou sugestão, manda um email para rafael2802@gmail.com.

Abraço pessoal.

Colocado em Geral a 26 março 2010. Sem Comentários.

Exemplo básico de html com css – Parte 2

Olá pessoal,  vamos continuar com o nosso layout em  css que estamos montando. Logo estarei postando um review do meu novo celular (Motorola Dext) vai ser bem legal, to gostando do aparelho.
Bom, vamos então criar um topo para o nosso layout que começamos no post passado.
No nosso arquivo índex.html, vamos criar um topo para deixar mais apresentável o conteúdo do nosso site.
Vamos adicionar então um div para fazer o nosso topo. O id do topo vai ser chamar “topo”, como no exemplo.


<html>
<head>
<title>Exemplo 01</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
 <body>
 <div id="topo"></div>
 <h1>O meu nome é?</h1>
 <p>Rafael Fagundes</p>
 <h1>Qual módulo estou estudando?</h1>
 <p>HTML e CSS</p>
 </body>
</html>

Salve o arquivo índex.html.
Vamos agora ao nosso css para definir como o topo deve se comportar.  Abra o arquivo estilo.css
Como definimos “id=topo” devemos usar # para que o elemento possa adquirir o estilo.
Adicionamos o seguinte código.


#topo{
 height:70px;  /* ALTURA DO TOPO */
 background:#690; /* FUNDO DO TOPO */
}

Salve o arquivo estilo.css.

Repare que existe uma pequena margem em volta de todo nosso site. Vamos retirar ela para que o mesmo fique junto à margem do navegador.
Vamos adicionar em nosso css a propriedade magin e padding:

*{
 font-family: arial; /*Definir a fonte padrão*/
 font-size:12px;     /*Definir o tamanha da fonte padrão*/
 margin:0; /* Margem externa de qualquer elemento dentro do html */
 padding:0; /* Margem interna de qualquer elemento dentro do html */
}

Salve o estilo.css.

Agora vamos adicionar uma logomarca em nosso topo, vamos pegar uma imagem qualquer,  caso ela tenha fundo decor diferentes, é ideal usar ela em formato png transparente.

No meu caso vou adicionar uma imagem como se fosse uma logomarca.
Voltando ao arquivo índex.html, dentro do div onde esta definido o topo, vamos  adicionar a tag da nossa imagem.
Então em nossa pasta onde estamos salvando nosso site, vamos criar uma pasta chamada “imagens”, dentro dela vamos salvar nossa logomarca.

Salvei uma imagem jpg com o nome de logomarca.jpg.
Vamos então chamar nossa imagem:


<div id="topo">
 <img src="imagens/logomarca.jpg">
</div>

Como definimos que todo elemento ai ficar sem margem, a logomarca ficou colada com o navegador, vamos ajustar para que ela fique em um posição legal dentro do topo.
No nosso arquivo css vamos adicionar:


#topo img{
 margin:5px
}

Agora estamos trabalhando com um elemento dentro do outro.
Então dentro do elemento #topo, estamos definindo que o elemento img(padrão de imagem) vai receber uma margem.

Salve seu css.

Veja o exemplo aqui de como deve ficar o nosso topo.
Agora temos um topo com a imagem na posição certa, vamos partir agora para um menu dentro do nosso site no próximo post.

Colocado em Geral a 13 março 2010. Sem Comentários.

Olá, mundo! (Velha frase)

Primeiro post é sempre assim, você fica pensando em que escrever, e já esta pensando no segundo post, hehe. Então resolvi criar este blog com a intenção de ajudar a aplicar os padrões web, fazer com que possamos melhorar o desenvolvimento de um site.

Obs.: Estarei também mostrando como trabalhar layout (CSS) junto com o código fonte da programação, para isto estarei integrando estes posts com o blog no meu amigo e programador PHP Nivaldo Arruda.

Também vou procurar falar sobre usabilidade e espero também receber dicas do pessoal, isto é um assunto que acho bem importante a ser falado.

E como não poderia faltar, sou viciado em celular, vou postar também materiais relacionados a dispositivos móveis. Pretendo seguir a linha de desenvolvimento de sites para estes dispositivos.

É isso aí, espero poder colaborar, e também poder ser ajudado.

Abraço.

Colocado em Geral a 16 dezembro 2009. 1 Comentário.