sábado, 15 de setembro de 2012

Lincando o HTML com o CSS

 VOCÊ que tem  uma  base  do  HTML e   quer agora  começar a utilizar o CSS,  para dar  mais qualidade ao  seu  site,  ou  já utiliza mas na  mesma  página que o  HTML, pra  você  não  ficar  misturando  tudo vou dar uma   dica pra você .
   Com  certeza  você  já deve  conhecer o DreamWeaver.  Se  não  tem baixe  ele  está   disponível na  internet.  Ele   será mais que necessário.

  Para começo de conversa:

abra o  DreamWeaver.  e  crie   um documento HTML: 



em  seguida  ja  salve  este  documento mesmo  que não  tenha  nada.   
file>salve (ctrl+s).

Ao  fazer  isso  vamos agora  criar  um documento em CSS  e  lincar  os dois (html com css), para  isso:
file>new(ctrl+s),  abrirá uma  segunda  janela,  selecione "CSS" e  dê "create". como na  imagem abaixo:


assim que você  fizer isso,  abrirá  uma  nova  ala. uma  será deHTML e  a  outra  de CSS . após a criação  elabore o mesmo processo que o  anterior  para  salvar. 

Mãos a obra:

- Na  ala  de  HTML,  ficará  tudo  sobre o  conteudo.  e na ala  de  CSS  vai  ficar digamos a  parte "estética".   lembre-se  disso.
  Vamos  lincar  as  duas  páginas. 

 vá para  a  ala de  HTML,  entre  as  tags de  <head> e </head>, haverão algumas  informações  fornecidas  pelo  prÓprio dreamweaver, não as delete.  entre a tag </title> e </head>  dê um enter, pra  ficar bonitinho u.u e  comece  com:
   <link href="aqui_o_nome_do_seu_documento.css" type="text/css" rel="stylesheet"/> 
 após  isso   dê ctrl+s   para salvar.  pronto   as  duas alas estarão lincadas.

obs:  agora  nada   de  coisas  do  tipo "cor" , "alinhamento",  nada  disso  ficará  mais no html e  sim no  css.   no  html apenas  conteúdo.
 Vamos  para a  ala  css.
Brincaremos  um pouco no css.  para  conhecer melhor os códigos. 


  Eu  coloquei uma  imagem (background-image),  mas  posso  utilizar  apenas  cor,  para  isso>  background-color: #00FF00 (a cor em hexadecimal ) e " ; " .   

dica: não é  recomendável  visualizar o resultado via o  dreamWeaver, pois ele  pode  dar  alguns erros,  então  para  visualizar como está ficando o seu site.   vá para a  ala de html> cliquei no  globinho> e  selecione o navegador.  


Experimente   colocar  algum  texto no html e tente  modificar  a  cor  via css.  
  utilizando o  código:   color: #(cor em HEX) ;  



Nenhum comentário:

Postar um comentário