terça-feira, 25 de novembro de 2014

Como eu Descobri o Meu Editor de Texto Preferido

Antigamente quando eu ia programar, sempre ficava na dúvida se o programa de editar texto que eu usava era bom, se era o melhor pra mim, se tinha todas as funcionalidades que um bom programador merece.
Comecei utilizando uma ferramenta grátis, minha lógica era: se tudo que eu precisava para programar era free (mysql, xampp, php, etc.), por que então utilizar uma ferramenta paga?
E foi assim que fui vivendo programando no Codelobster PHP Edition, uma ferramenta para iniciantes, eu considero. Meu primeiro contato com programação eu não sabia de nada, comecei com essa ferramenta.
Não digo que ela é uma ferramenta ruim, ela supria minhas necessidades de iniciante, tinha uma interface (não muito) limpa, de vez em quando dava crash no programa e eu perdia tudo que tava fazendo, mas fora isso fui me acostumando com os prós e contras da ferramenta.
Até que um dia eu comecei a ficar razoavelmente bom na programação, e com isso eu necessitava de mais funcionalidades da ferramenta que eu programava.
Navegando na internet em busca de funcionalidades para programas de edição de texto, descobri um recurso chamado “snippet” que é algo como um conjunto de comandos guardado num comando só.
Por exemplo: você escreve cabeçalho_html, aperta o atalho correspondente e boom! Ele transforma aquela palavra em um cabeçalho de HTML todo! É incrível!
Mas a versão free do Codelobster (nem a versão paga.) não me dava liberdade de utilizar snippets, nem integrar o programa com os frameworks que mais adiante eu iria conhecer.
E foi aí que eu percebi que eu tava errado na minha lógica de achar que se uma coisa era free, tudo tinha de ser.
Primeiro contato com o Sublime Text
 Depois de dar muito crash nos meus projetos utilizando o Codelobster, eu me convenci de que teria de encontrar outra ferramenta para continuar minha programação, uma ferramenta que atendesse a todas as minhas novas necessidades.
Encontrei uma ferramenta chamada Sublime Text, uma ferramenta (paga, infelizmente) que tinha tudo (e mais um pouco) do que eu precisava pra ser feliz.
Contando com uma interface mais limpa, escura, bonita. Várias funcionalidades, integração com FTP, podendo instalar plugins e muito mais recursos, o Sublime Text era o editor perfeito pra mim.
Conclusão
Acho que não é uma má idéia você gastar um pouco de grana quando se trata de uma coisa que você vai utilizar com freqüência (e que seja necessário, claro) e até mesmo ganhar dinheiro com isso.
Na época, eu fazia freelance (ainda faço) de desenvolvimento de sites, então foi algo que agilizou bastante na programação, além de não crashar de repente toda hora (foi daí que aprendi a ficar salvando o tempo todo).



domingo, 23 de novembro de 2014

Criando um Menu Avançado com Bootstrap

Anteriormente nós aprendemos como criar um menu principal para seu site, bem básico, para quem realmente não entende quase nada de programação e está iniciando.
Se você leu o artigo anterior que fala sobre CodeIgniter e Bootstrap, frameworks que mudaram a minha vida como programador, iremos aprender agora como criar um menu principal avançado utilizando essas ferramentas como frameworks.
Utilizaremos alguns conhecimentos do tutorial anterior sobre como criar um menu básico para o seu site, então se você não leu ainda, recomendo que leia antes de prosseguir com esse tutorial.

Como você já sabe, o Bootstrap automaticamente faz com que seu site fique responsivo, utilizando de seus elementos como referencia para posicionamento, tamanho, etc.
Sabendo disso, se a gente for criar um menu utilizando o Bootstrap para front-end, teremos que seguir algumas normas e padrões estabelecidos pelo Bootstrap para fazer com que ele automaticamente estruture os elementos da página para deixar responsivo corretamente.
Primeiramente iremos copiar nosso pacote BootIgniter (um pacote do CodeIgniter e Bootstrap integrados, você pode baixar no artigo Encarando as Frameworks: CodeIgniter e Bootstrap) no nosso diretório, verificamos se ta tudo certo, e começaremos a colocar a mão na massa.
Primeiramente criaremos um novo controlador, nomearemos de “menu.php”, crie esse arquivo na pasta Controllers, e atribua o seguinte conteúdo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Menu extends CI_Controller {
   public function index()
   {
      $this->load->view('header');
      $this->load->view('menu_principal');
      $this->load->view('footer');
   }
}

Novo controlador criado, agora precisamos alterar a rota do site para chamar ele primeiro ao invés do “welcome”, para isso, iremos no seguinte diretório: “application/config/routes.php” e mudaremos a seguinte linha:

Após alterar a rota do site, precisamos agora criar o arquivo view que o controlador chama, esse arquivo se chamará “menu_principal.php” e vai no diretório “application/view” do seu projeto:

Agora é hora de programar mesmo, mão na massa! Iremos utilizar CSS e HTML nesse mesmo arquivo, portando não é necessário linkar nada nos outros arquivos “footer.php” ou “header.php”.
Como já disse anteriormente, nosso menu tem que seguir um padrão para o bootstrap fazer sua parte, portando, iremos criar um menu utilizando o padrão do bootstrap. Abra o arquivo “menu_principal.php” e escreva:

 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
<style type="text/css">

</style>

<br/><br/><br/><br/>

<nav class="navbar navbar-default" role="navigation">
   <div class="container">
                       
   <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">MeuSite</a>
   </div>
                                              
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home <span class="sr-only">(selecionado)</span></a></li>
         <li><a href="#">Contato</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Servicos <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
               <li><a href="#">Design Grafico</a></li>
               <li><a href="#">Desenvolvimento Web</a></li>
               <li><a href="#">Informatica</a></li>
               <li class="divider"></li>
               <li><a href="#">Outros servicos</a></li>
            </ul>
          </li>
          <li><a href="#">Fale Conosco</a></li>
       </ul>
    </div><!-- /.navbar-collapse -->
                                              
    </div>
</nav>


Salve o arquivo em “menu_principal.php”, e perceba que teremos um menu principal, mesmo sem ter feito nada com CSS! Isso por que o Bootstrap tem seu próprio arquivo CSS, que por padrão formata o menu dessa forma.
No final desse artigo você vai descobrir alguns lugares onde você pode customizar esse layout padrão do Bootstrap, mudando cores, fontes e tamanhos. É incrível!
Veja como está ficando nosso menu principal:

Muitos sites feitos com Bootstrap criam menus padrões e deixam com esse visual ai mesmo, o que não é uma má idéia. Mas caso você queira customizar, vamos seguir em frente!

Customizando o menu principal
Como já havíamos criado o espaço para escrever CSS no nosso arquivo “menu_principal.php”, agora iremos utilizar este espaço. Escreva o seguinte código naquele espaço:

 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
<style type="text/css">
/* barra de menu principal */
.navbar-default {
   background: #B3D4E2;
   border: 1px solid #89B0D0;
}

/* elemento que tem o nome "MeuSite" */
.navbar-default .navbar-brand {
   color: #336799;
}

/* item de menu quando tiver selecionado */
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
   color: #5387AD;
   background-color: #F5F5F5;
}

/* item de menu */
.navbar-default .navbar-nav>li>a {
   color: #5387AD;
}

/* mouse over no item de menu */
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
   color: #0C2C4C;
   background-color: transparent;
}

/* item de menu dropdown quando tiver aberto */
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
   color: #5387AD;
   background-color: #FFFFFF;
}
</style>


Pronto! Nem parece que criamos um menu tão bem feito como este programando tão pouco, não é? Esse é o lado bom de utilizar frameworks, elas agilizam bastante o processo de criação.
Você pode explorar os códigos que escrevemos hoje, modificando, testando, indo no site do Bootstrap e procurando saber o que as classes fazem, etc.
Veja abaixo como ficou nosso menu principal:

Clicando em Servicos, o submenu aparece!
No código CSS que escrevemos, você pode modificar o tamanho, cores, altura, estilos, etc.
O Bootstrap é uma ótima framework, tem esse layout padrão que é bonito, mas você pode modificá-lo criando um novo arquivo CSS e sobrescrevendo os códigos, ou alterando o arquivo “bootstrap.css”.
Não é lá uma boa idéia, por que o arquivo tem bastante classes e códigos, e você iria demorar horas para alterar o arquivo e deixá-lo a seu gosto.
Existem alguns arquivos já modificados do “bootstrap.css” que tem a sua interface alterada, estes são chamados de temas.

Existe um site que disponibiliza estes temas grátis para você baixar, o site se chama BootSwatch, e no item “Themes” do site você encontra uma lista de temas que podem ser testados no próprio site, e você pode baixar indo no item “Download” e clicando em “bootstrap.min.css”.


sábado, 22 de novembro de 2014

Encarando as Frameworks: Codeigniter e Bootstrap

Quando você cria um site, todo seu conteúdo e imagens, tabelas, botões, formulários, menus, etc. Faz parte do chamado layout.
Layout, também chamado de front-end nada mais é do que o visual do seu site, toda aquela beleza que o usuário vai visualizar.
Antigamente quando não existia ferramentas tão modernas como as de hoje em dia para desenvolver/desenhar o front-end do site, os desenvolvedores o faziam com tabela, criando visuais quadrados e iguais, praticamente.
O que mudava era apenas as cores, por que as tabelas são quadradas, e esse era o limite do desenvolvimento/desenho front-end, não passava de tabelas e imagens montadas umas com as outras para criar o visual final do site.
Como a maioria dos usuários utilizava o Internet Explorer no desktop (computador de casa), eles não tinham que se preocupar com padrões e otimização para outros browsers. O que o usuário criava no IE, não precisava reformular nem melhorar nada para outros browsers, até por que não existiam.
Depois de algum tempo, surgiu o Firefox, que deixou o IE no chinelo. O Firefox tinha uma interface bonita, mais limpa, tinha mais espaço para a tela e não para as barras de favorito, histórico, etc. (como no IE.).
O Firefox tem sua própria engine (motor), isso é, tem seu próprio jeito de interpretar e exibir os comandos HTML e CSS.
Com isso, os desenvolvedores agora tinham algumas preocupações: nem sempre o que era exibido no IE, era exibido exatamente no Firefox, ou vice-versa. Algumas colunas mais para esquerda, outras mais para baixo, etc.
Agora os programadores tinham que lidar com as diferenças de interpretação de cada navegador, criando assim blocos de comandos no HTML e CSS, de modo que fique idêntico em ambos os navegadores.
Depois que o Google Chrome foi lançado, agora eram 3 navegadores principais diferentes para fazer com que o site ficasse igual em todos. A partir daí já não era mais tabelas quadradas e imagens para os sites.
Estávamos quase na ponta do CSS3, já tínhamos muitas tecnologias de programação web. Muitos utilizaram várias artimanhas para fazer com que o que fosse exibido em um, fosse exibido em todos.
É aí que entra as frameworks.
 
Codeigniter é considerado um dos melhores frameworks.

O CodeIgniter mudou a minha vida
A partir de uma época em que era necessário você “formatar” o seu CSS de modo que tudo que você programasse ficasse idêntico em todos os navegadores, foram surgindo os frameworks.
Framework em programação nada mais é do que um conjunto de arquivos HTML,CSS,JS, etc. Que servem de auxílio para nós programadores atribuir um padrão de código, organizar melhor nossos arquivos de programação, e também economizar muitas linhas de código.
Quando eu comecei a programar PHP (há muitos anos atrás) eu não tinha muito conhecimento de frameworks. A maioria dos sites que eu via  eram feitos com tabelas, muitas artimanhas e muitos erros de CSS.
E toda vez que eu ia criar um site novo, era a mesma coisa, pegava o arquivo de configuração no banco de dados e copiava pra pasta do projeto, o arquivo de configuração era responsável por conectar no banco e selecionar o banco correspondente.
E era isso, eu (e mais milhões de pessoas) tinha(mos) muitas brechas de código, fazendo com que se a gente criasse um site importante, ficasse fácil a invasão do mesmo.
E foi pensando em melhorar a segurança, organização de código e agilidade dos códigos que eu procurei aprender sobre frameworks.
De cara eu encontrei o CodeIgniter, foi amor a primeira vista, quando comecei a ler o manual (é, eu sou daqueles que pega a engine, o manual e sai dali sabendo de tudo) eu fiquei impressionado com as funções que ele tinha.
Tinha URL Amigável (eu quebrava a cara pra fazer isso)
Url amigável para quem não sabe, é quando você deixa o endereço atual da página de forma que fique fácil memorizar, que fique amigável para lembrar depois.
seudominioaqui.com/loja.php?cat=canetas&id=10274 - isso aqui não é amigável.
seudominioaqui.com/loja/canetas/caneta-azul-e-verde - isso é uma url bem amigável.
O CodeIgniter por padrão já fazia isso, era uma beleza, meus olhos brilharam quando vi a capacidade dessa framework e o quanto ela iria agilizar meu processo de desenvolvimento.
Ele tinha uma estrutura de arquivos que deixava meu site totalmente bem organizado, a estrutura chamada M.V.C. (Model View Controller).
O conceito MVC faz com que o seu site rode mais rápido, usando o desempenho apenas com o que realmente é necessário.
Na pasta Model, você colocaria os arquivos de modelo que iriam ter funções que retornariam dados vindos do banco de dados. Isso era ótimo, por que você não precisaria ter 1 arquivo, e toda vez que fosse conectar tivesse que carregar tudo daquele arquivo para pegar 1 dado, ou ter que fazer a query no próprio índex.php (o que é uma péssima prática).
Na pasta View, você colocaria os arquivos de front-end (muito mais organizado), arquivos que eram responsáveis apenas por exibir as informações. Ele capturava os dados do Controller, e fazia com que os arquivos se tornassem dinâmicos, exibindo apenas o HTML.

Na pasta Controller, basicamente você guardaria todas as “pastas” do site, em formato PHP (o CodeIgniter automaticamente faz a estrutura dos arquivos de modo que os arquivos PHP na pasta Controller se tornem pastas e se comuniquem com as bibliotecas, e por ai vai.) e é responsável por dizer o que vai aonde.
Por exemplo, no Controller “principal”, tinha uma função “índex”, essa função seria chamada automaticamente caso o usuário acessasse “seusite.com/principal” ou se esse fosse o Controller principal do site (que pode ser atribuído um controlador para ser exibido no diretório raiz).
Dentro da função índex, você iria poder se comunicar com o model, chamando eles e fazendo verificações no banco, ou chamando views para exibir conteúdo no site, passando parâmetros dinâmicos através do Controller, como por exemplo o título da página, poderia fazer com que o arquivo estático de view mudasse o título vindo do Controller.
Entre outras funcionalidades do CodeIgniter, como biblioteca para gerenciar SESSIONS, biblioteca para auxiliar no gerenciamento de GETS e POSTS de modo seguro, biblioteca para auxiliar em upload de imagens e arquivos de modo seguro e bem automatizado (ao mesmo tempo totalmente personalizável), etc.
Eu percebi que o CodeIgniter era a melhor ferramenta para eu programar o back-end do meu site.
Back-end para quem não sabe, é toda a programação que o usuário final não vê. Como as requisições GET e POST, as validações de formulário, comandos de laço, estruturas condicionais, verificações de sessão, e etc.
Mas faltava algo para terminar de completar minha vida, estava faltando uma framework front-end, para casar logo tudo de uma vez.
O Bootstrap foi o tchan
O Bootstrap era o par perfeito, a colméia da abelha, o nariz do palhaço, a luva da mão (ta, já chega.) que eu precisava para poder completar tudo.
O Bootstrap para quem não sabe, é uma biblioteca (conjunto de arquivos) que auxiliava na programação front-end, já formatava automaticamente seu CSS, fazendo com que ficasse responsivo (dava pra visualizar o site no celular de boa), otimizado e compatível com todos os browsers.
O lado ótimo do Bootstrap é que ele é feito pela equipe do Twitter (sim, Twitter), o que dava pra confiar e reconhecer que era uma ferramenta Ó T I M A!
Pensando nisso, resolvi casar os dois e integrei o Bootstrap no CodeIgniter, fiz um pacote, e eu tinha tudo que precisava na minha vida, framework para auxiliar o back-end do site, e outra framework para auxiliar no front-end do site.
Quando for iniciar seu projeto, coloque os arquivos da pasta BootIgniter no diretório criado no htdocs, ou onde preferir.
Dentro estão o arquivo índex.php (você nunca deve mexer aqui), o diretório Application, System e Assets (é aqui q você vai colocar os arquivos terceiros do site, como CSS, JS, XML e imagens, etc.)
Após colocar os arquivos na pasta do FTP ou na pasta do projeto no Htdocs, já pode ir olhar no browser, está pronto-para-usar.
Caso você ainda não conheça o CodeIgniter ou o Bootstrap, seja ousado, abra os arquivos (só não altere os arquivos índex.php na pasta principal nem os arquivos da pasta system), faça como eu fiz: edite, teste, veja o que acontece, olhe no manual, teste de novo.
Abaixo o endereço das duas frameworks para você conhecer mais e acessar o manual delas.
Site do CodeIgniter: www.codeigniter.com/user_guide/



segunda-feira, 17 de novembro de 2014

Instalando e Configurando o XAMPP



O XAMPP é sem dúvidas um dos melhores servidores independentes de plataforma que existem. E como muitos de vocês ainda têm dúvida sobre qual servidor utilizar, hoje iremos falar sobre ele.
O XAMPP é um pacote, e o nome provém da abreviação de X (indicando que pode ser utilizado em qualquer sistema operacional), Apache, MySQL, PHP, Perl.
Desenvolvido inicialmente com a pretensão de usá-lo como uma ferramenta de desenvolvimento para que os programadores pudessem testar seus trabalhos em seus próprios computadores, hoje o XAMPP é utilizado tanto para isso, quanto para servir sites na rede mundial de computadores.
Modificando algumas coisas ele acaba ficando bem seguro para utilizar como servidor público, existem ferramentas que auxiliam isso. O XAMPP possui muitos aplicativos, incluindo o Apache, Mysql, PHPMyAdmin, FileZilla, FTP Server, OpenSSL, etc.
Interface padrão do XAMPP
Para baixar o XAMPP você deve visitar o site responsável pelo download do mesmo, que se encontra neste link.
Baixa a versão que corresponde ao seu sistema operacional, que pode ser Windows, Linus ou Mac OS X. O XAMPP é um pouco pesado (cerca de 140mb), mas é tudo que você precisa para rodar todos os seus projetos PHP, HTML, Perl, e tudo mais.
Depois de baixar o arquivo, execute e prossiga com a instalação.
Caso essa janela venha a surgir, clique em Yes.

Clique em OK. Para que não haja erros futuros, instale o XAMPP em um diretório como C:

Desmarque as caixas que você não irá utilizar.

Isso é muito importante. Recomendo deixar como está.

Nesta tela, clique em Next para avançar, ele irá iniciar a instalação que pode levar alguns minutos. Após isso, você verá a tela a seguir.
Caso ele peça alguma liberação de firewall, clique em “Permitir Acesso”.
No término da instalação, execute ele. A interface dele é muito simples, e na verdade tem tudo que você precisa:
Clique nos dois botões “Start” para ele iniciar o servidor local ativando o Apache e o MySQL. Assim você instalou o XAMPP com sucesso.
Na próxima sexta você vai descobrir Como Criar o Seu Primeiro Projeto no XAMPP.


quinta-feira, 13 de novembro de 2014

Guia de como criar um menu básico para o seu site!

Todo website bom que se preze, tem o seu menu principal, que normalmente fica localizado na parte superior, como uma barra horizontal que vai de um lado a outro do site.



Existe também um outro tipo de menu: o menu vertical, a diferença do menu vertical é que este fica em um dos lados do site, apresentando os itens do menu um abaixo do outro, como mostra a imagem ao lado.
Esse menu é responsável por fazer com que haja uma boa navegação entre as páginas do site, prevenindo que o usuário tenha que digitar ou descobrir o endereço daquela página para ter acesso a ela.
Abaixo teremos algumas dicas, e aprenderemos como criar um menu básico utilizando HTML e CSS


Escolhendo referência para o seu menu
Antes de começarmos a criar, precisamos ter em mente o que pretendemos fazer. É um menu arredondado? Vai ter uma barra de fundo? Vai ser largura fixa? Qual fonte ficaria melhor?
Geralmente quando eu vou fazer um novo menu principal, eu procuro algumas referências do que eu poderia criar.
Colocando algumas palavras-chave no buscador de imagem como “menu horizontal” ou “menu vertical”, a gente já pode visualizar alguns exemplos e começar a ter ideia do que faremos.
Pesquisando o termo relativo, você vai encontrar muitas referências.

Após encontrar a referência perfeita para o menu que você pretende criar, é hora de decidir algumas coisas.
É um menu arredondado? Existe um problema de compatibilidade entre os navegadores, alguns interpretam alguns comandos especiais, enquanto outros não. Por isso tome cuidado ao utilizar muitos comandos de CSS que você não conhece. Visualize seu projeto em todos os navegadores que tiver.
Menu arredondado nem sempre fica bom e compativel com todos os navegadores.

Vai ter barra de fundo? Barra de fundo nada mais é do que um “contêiner” decorado, onde todos os itens do menu ficam dentro.
Vai ser largura fixa? Os itens do menu terão largura fixa? Ou serão de largura dinâmica (dependendo da quantidade dos caracteres do item)?
Qual fonte ficaria melhor? Tome cuidado com as fontes que escolhe. Nem todos os browsers e sistemas operacionais as reconhecem, por isso utilize o comando “font-family” quando for escrever seu CSS. Confira aqui uma lista de fontes seguras e veja qual se adequa melhor ao seu novo menu.

Programando menu básico com HTML e CSS
O primeiro passo é organizar os arquivos no diretório FTP ou no seu diretório de servidor local (Xampp, WMServerTools, etc.), como nosso exemplo é apenas HTML e CSS, não necessitamos de servidor.
Primeiramente criaremos um diretório para guardar os arquivos do nosso projeto.
Agora criaremos dois arquivos, um será chamado de “menu.html” e o outro será chamado de “estilo.css”.
Agora prepare-se para colocarmos a mão na massa. Utilizando o seu editor de texto favorito, vamos escrever a estrutura básica – cabeçalho e rodapé - do nosso arquivo “menu.html”:

1
2
3
4
5
6
7
8
<link rel="stylesheet" type="text/css" href="estilo.css"/>

<ul class="menu_principal">
  <li><a href="menu.html">Home</a></li>
  <li><a href="#">Downloads</a></li>
  <li><a href="#">Contato</a></li>
  <li><a href="#">Sobre Nós</a></li>
</ul>
Salve o código acima e execute o arquivo dando um duplo clique sobre ele:
Sim, eu sei que isso não parece nem um pouco com um menu principal, mas o que acabamos de escrever foi a estrutura HTML, essa estrutura é responsável por criar os elementos no browser, nós ainda precisamos estilizar estes elementos para que pareçam um menu, e é aí que entra o CSS!
Na nossa folha de estilos, utilizaremos comandos do CSS1 e CSS2, que é compatível com todos os navegadores modernos. Mão na massa!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.menu_principal
{
   display:list-item;
   background: #0BDDFF;
}

.menu_principal li
{
   float: left;
   list-style-type: none;
}
E vamos ver como está ficando...
Particularmente eu adoro a cor azul claro, você pode colocar a cor que você quiser no parâmetro do comando “background-color”. Mas isso ainda não se parece com um menu, precisamos estilizar mais algumas coisas ainda! Veja só:

 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
.menu_principal
{
   /* removeremos todas as formatações da classe menu_principal */
}

.menu_principal li
{
   float: left;
   list-style-type: none;
}


/* decoraremos os links */

.menu_principal li>a
{
   background-color: #49D7FE;
   display: block;
   padding: 8px 8px;
   text-decoration: none;
   color: #fff;
}

.menu_principal li>a:hover
{
   background-color: #39C0FF;
}
E teremos isso:
Sim, eu sei, não é lá o menu mais sofisticado do mundo, mas com base neste simples modelo, você vai poder criar muitos outros, por que na verdade o que vai mudar muito é o CSS, o HTML será o mesmo. vamos alterar um pouco o CSS.
Primeiramente iremos retirar a propriedade “background-color” do nosso link, modificaremos a nossa UL principal, colocaremos o background nela, e teremos uma barra horizontal, veja!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/* adicionaremos o display, padding, background-color e width */
/* na nossa UL principal */
.menu_principal
{
   display: table;
   padding: 0;
   background-color: #0BDDFF;
   width: 100%;
}

/* e removeremos o background-color daqui */
.menu_principal li>a
{
   display: block;
   padding: 8px 8px;
   text-decoration: none;
   color: #fff;
}
Agora é só fazer o que a sua imaginação permitir!

Isso é um menu básico, a partir daí você poderá fazer outros menus, com borda, sem borda, hover, sublinhado, e por aí vai. Na próxima semana você vai aprender como fazer menus avançados com HTML e CSS, que incluem imagens, efeitos modernos, e etc.

Outras maneiras de ter um menu
Caso você ache que não leva jeito pra essas coisas – o que leva tempo, dedicação e paciência pra fazer algo “espetacular” – existem algumas ferramentas online que auxiliam na criação de menus.
 Os menus criados nesses sites ficam com uma cara bem profissional, ideal para quem não tem muita experiência em criar os menus complexos utilizando código, nesses sites, você escolhe o modelo, as cores, e depois salva os arquivos necessários, aí é só incluir o CSS e colocar o HTML do menu no seu site que fica perfeito!
Confira dois sites que são ótimos para ter o seu menu pronto de dar inveja!
·         Menucool
·         CSS Menu Maker