Se você já teve que montar um layout de um site com css usando tableless, você já deve saber como essa simples tarefa pode se torna um pesadelo para um iniciante.
É comum problemas, uma propriedade funciona na versão 7 do IE outra não.
Com base nisso esta surgindo o idéia de CSS Framework, basicamente eles fornecem toda essa infra-estrutura de CSS para você, como por exemplo definir fontes padrões, e claro montar o layout, ou grid do seu site.
Abaixo irei explicar como utilizar o Blue Print CSS e construir uma estrutura basica de um site, header, footer e menu esquerdo.
1. Faça o download do framework em http://www.blueprintcss.org/
2. Descompacte o arquivo e copie a pasta blueprint para o diretorio raiz do seu site, neste exemplo irei utilizar c:\trabalho\site1
3. Vamos carregar o nosso framework em nosso site
index.html
<!DOCTYPE html PUBLIC "-/W3c/DTD HTML 4.01/EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen,projection"> <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print"> <!--[uf IE]> <link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"> <![endif]--> </head> <body> </body> </html>
pronto o nosso CSS Framework esta instalando agora vamos começar a usa-lo.
4. Definindo o nosso layout completo:
<!DOCTYPE html PUBLIC "-/W3c/DTD HTML 4.01/EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen,projection"> <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print"> <!--[uf IE]> <link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"> <![endif]--> </head> <div id="container"> <h1> Aqui é conteúdo do header. </h1> <hr> <h2 class="alt"> Simples teste </h2> <hr> <div class="span-15 prepend=1 colborder"> <p> Um simples texto para conteúdo </p> </div> <div class="span-7 last"> <ul> <li><a href="#"> MENU 1 </a></li> <li><a href="#"> MENU 2 </a></li> </ul> </div> <hr> <p> Um simples rodapé </p> </div> <body> </body> </html>
é essa uma estrutura basica de um layout em html, bom com isso já é possivel ter uma ideia do framework, mais é necessario um aprofundamento maior para entender toda logica do framework.
Baixe os arquivos utilizados acima junto com framework AQUI.
Neste link Você ira encontrar informações sobre herança em javascript, se você for um programador java irá ficar surpreso com a forma que o javascript trata isso, abaixo segue alguns exemplos de código que você pode encontrar maiores explicações no artigo citado.
function superClass() {
this.bye = superBye;
this.hello = superHello;
}
function subClass() {
this.bye = subBye;
}
subClass.prototype = new superClass; //subClass "herdou" superClass
function superHello() { // metodos da superClass
return "Hello from superClass";
}
function superBye() { // metodos da superClass
return "Bye from superClass";
}
function subBye() { // metodos da classe filha
return "Bye from subClass";
}
var newClass = new subClass();
superClass.prototype.blessyou = superBlessyou; // a super classe agora é filha da superBlessYou
function superBlessyou() {
return "Bless You from superClass";
}
alert(newClass.bye());
alert(newClass.hello());
alert(newClass.blessyou());//lembra isso é a classe filha e herdou a novos propriedades dinamicamente.
Métodos legais :).
function Person() {
this.name = "Rob Roberson";
this.age = 31;
}
function Employee() {
this.dept = "HR";
this.manager = "John Johnson";
}
Employee.prototype = new Person();
var Ken = new Employee();
if (Person.prototype.isPrototypeOf(Ken)) {
alert("Ken is a person");
}
for(property in Ken) {
alert(property);
}
alert(Ken.hasOwnProperty("manager"));