OBS: Ainda não funciona no Internet Explorer, porém funciona no Mozilla Firefox, Google Chrome e Safari.

Crie um novo documento CSS e insira a seguinte instrução:

Crie um novo documento HTML, insira o código de inclusão do documento CSS e adicione a div borda.

Veja o resultado:

A tag css que define o raio de curvatura das bordas é a border-radius. Contudo, para funcionar no Mozilla Firefox, também adicione -moz e para o Safari -webkit-.

Veja o resultado:

Considerações Finais

Seria inviável utilizar esta maravilhosa ferramenta atualmente pois ainda não funciona no IE. Temos que abrir mão dessa facilidade e continuar a criar bordas arredondadas no Fireworks e inserir dentro do background no css.

Fico feliz por várias iniciativas para a exclusão do IE 6 (Contudo o border-radius também não funciona no 7 e 8). Porém é uma realidade distante pois um usuário pode atualizar seu navegador, mas quando ele formata sua máquina qual navegador ele volta a utilizar?

Veja a diferença de um site com links em HTML puro, e um site com links estilizado em CSS:

Entendendo cada estado:

Inicial: Link em seu estado normal.

Visitado: Link no estado em que seu destino já foi visitado pelo navegador.

“Hover”: Link no estado em que se passa o mouse em cima.

Ativo: Link no estado quando é clicado.

Vamos dar os primeiros passos. Crie um novo documento CSS e salve com o nome de links. Assim como no HTML, para estilizar um link no css, inserimos a tag a. Veja:

Agora veja cada estado:

Agora na sua página HTML, insira dentro da tag head o código de inclusão do documento CSS.

<link href=”links.css” rel=”stylesheet” type=”text/css” />

Pronto! Agora qualquer link em sua página terá os estilos definidos no documento css.

Definição de classes

Agora vamos definir uma classe de link. Será muito interessante, pois através dela podemos definir vários estilos de links em uma mesma página. Veja:

Agora no documento HTML, teremos que definir a classe noticia na tag a.

Simples! Agora você pode criar várias classes no css, e definir vários estilos de links em sua página.

Atributos do link

Veremos agora os mais variados atributos que podemos definir em um link. No seu documento CSS, teste alguns desses e veja o resultado:

- retirar sublinhado do link

- cor de fundo

- como bloco

Vamos inserir vários atributos em um só link:

Viu como podemos fazer efeitos legais em links.

Agora é com sua criatividade!

Porque Tableless?

Table=Tabela

Less=Menos

Menos Tabela

Logo algumas pessoas começam a rotular essa expressão, expondo que páginas não devem conter tabelas.

Semana passada, me deparei com uma grande tabela de preços de uma gráfica, contendo o nome de cada produto e seu peso, preço, tipo… Logo para organizar essa tabela na página, usei uma tabela. Porque não?

As tabelas foram criadas a princípio para organizar dados tabulares. Porém, muitas pessoas começaram a usar para construção do layout. Vamos começar. Está errado? A princípio, não. E seu site vai aparecer bonitinho do jeito que você quer? Sim. Para todas as pessoas? Não. Por quê?

Acessibilidade para todos

Vivemos uma revolução tecnológica e a cada dia são criadas ferramentas para uma melhor percepção e obtenção da informação a todas as pessoas.

Acessibilidade significa não apenas permitir que pessoas com deficiências participem de atividades, mas a inclusão e extensão do uso destes por todas as parcelas presentes em uma determinada população.

Na informática, programas que provêm acessibilidade são ferramentas ou conjuntos de ferramentas que permitem que portadores de deficiências (as mais variadas) se utilizem dos recursos que o computador oferece. Essas ferramentas podem constituir leitores de ecrã para deficientes visuais, teclados virtuais para portadores de deficiência motora ou com dificuldades de coordenação motora, e sintetizadores de voz para pessoas com problemas de fala.

Na Internet o termo acessibilidade refere-se também a recomendações do W3C, que visam permitir que todos possam ter acesso aos websites, independente de terem alguma deficiência ou não. As recomedações abordam desde o tipo de fonte a ser usado, bem como seu tamanho e cor, de acordo com as necesidades do usuário, até a recomendações relativas ao código HTML e CSS. fonte: Wikipédia, a enciclopédia livre

De certa forma, um site formatado na tecnologia tableless corresponderia bem a alguma ferramenta de acessibilidade. Por exemplo, a visualização de um site em um celular em conexão a internet. Provavelmente se seu site tivesse o layout baseado em tabelas, a resposta seria negativa ao usuário.

Finalmente

A proposta é essa. Site em tableless é atual, é intelectual. Abuse da sua criatividade, não seja mais um, se destaque em meio a grande batalha do mercado de trabalho. O webdesign no Brasil ficou muito saturado.

Então se atualize com as novas tendências da informática. Na próxima aula vamos aprender um pouco sobre as recomendações da W3C. A famosa webstandards.

Deus nos abençoe

voltar para a 1ª parte

Criação da Lateral?

Como já virou hábito, abra a estrutura.css. Primeiro vamos criar a div lateral

Vimos uma nova tag (float). Ela tem a função de flutuar a div para a esquerda ou direita. Preste atenção também na largura. Declaramos que ela teria 190px, mais temos os atributos da borda e espaçamento, no qual ela fica no resultado final com 200px. É fundamental observar isso na hora da criação do layout.
Também declaramos que nossa div terá posição relativa. Usei isso para evitar bugs no Internet Explorer em relação aos outros navegadores. Você que daqui em diante trabalhará com CSS em seus projetos, terá que conviver com esses problemas de renderização entre os navegadores.

Criação do Conteudo

Diferente das partes anteriores, vamos continuar a criar as divs restantes no arquivo css, só depois vamos inserir na index.html. Então mãos a obra:

Simples, declaramos os atributos da margem, depois definimos que em cada parágrafo na div conteúdo teremos um recuo da esquerda de 20px. Depois justificamos o texto.
Agora observe, abri a div conteúdo de novo, mas dessa vez coloquei a tag p (parágrafo) na frente. Quer dizer que editaremos o parágrafo somente na div conteúdo.
Com isso declarei que não teremos margem nos parágrafos dentro da div conteúdo. Simples, né?

Criação do Rodape

Continuando:

Opa! O que é clear? Ela serve para limpar os espaçamentos da flutuação das divs anteriores.
Declarei o atributo right pois na div lateral declaramos flutuação a direita. Com isso ela fica abaixo da div lateral e conteúdo.

Inserindo as divs na página

Pronto! Agora vamos inserir as divs na página index.html, na seguinte ordem: lateral, conteudo e rodape. Olha como deve ficar o código-fonte da página:

Veja o resultado:

Estamos terminando galera! Na próxima parte vamos fazer uma conclusão do nosso estudo. Você já pode inserir conteúdo, imagens, filmes em nossa página. Apenas respeite a largura de cada div.
Deus abençoe vocês!!!

ir para a 6ª parte

voltar para a 1ª parte

Estilização do Menu

Agora vamos continuar a editar nossa div menu. Sem dúvida essa é uma das partes mais complicadas no processo da criação do site.

Através dessa estilização, você pode fazer coisas incríveis no menu do seu site! Vai levar em conta sua criatividade.

Agora é simples, na index.html selecione a aba texto no dreamweaver. Dentro da div menu adicione uma lista (ul).

E adicione quantos elementos (li) você desejar. No nosso caso, cada elemento será um link, ou seja, o número de elementos que você adicionar vai variar do número de páginas do seu site.

No meu caso, criei 5 elementos dentro da lista. Olha como ficou o meu:

Agora falta linkar cada elemento.

Por hoje é só. Nas últimas duas partes vamos criar as divs restantes.

Abraços galera! Deus nos abençoe! 

ir para a 5ª parte

voltar para a 1ª parte

Criacão do Topo

Vamos criar a div topo, mas antes precisamos de uma imagem para inserir no nosso topo. Então mãos a obra, crie uma imagem de 700px de largura e 100px de altura e nomeie de topo.jpg. 

Feito isso, abra o estrutura.css e editaremos a div topo. 

Quando a largura da div não é especificada, ela automaticamente fica no tamanho da div pai. No nosso caso a div corpo que tem 700px.

Agora  abra a index.html e apague aquela frase em inglês dentro da div corpo (essa frase sempre é criada quando se insere uma div no dreamweaver, então sempre que inserirmos uma div você deve apagar essa frase).

Dentro da div corpo vamos inserir a div topo.

Veja o resultado:

Criacão do Menu

A div menu será mais trabalhada, com isso exige um pouco mais de atenção. Na estrutura.css vamos adicionar nossa div:

Vamos inserir na index.html. Preste atenção que vamos mudar um campo na hora da inserção:

O que fizemos foi simples. Apenas informamos que a div menu será incluída depois da div topo.

Veja o resultado:

O site tah ficando legal! Na próxima parte vamos estilizar nosso menu. Abraços galera!

ir para a 4ª parte

Estamos aprendendo como montar um site em Tableless. Na parte anterior fizemos a conexão da página HTML com o arquivo CSS, e já definimos alguns atributos da página. Nesta parte iremos criar e posicionar as divs. Ou seja, vamos criar o layout da página.

Vamos dar nomes fáceis de serem identificados posteriormente:

• corpo (a Div principal, que engloba todo o site)
• topo (esta Div será o topo da nossa página)
• menu (nesta Div vamos inserir o menu)
• lateral (Div da barra lateral do site)
• conteúdo (a Div onde colocaremos o conteúdo do nosso site)
• rodapé (esta Div será o rodapé da página)

Definidos os nomes de cada seção da página, vamos criar e editar as divs no estrutura.css e depois inserir na index.html. Então abra o estrutura.css e vamos criar nossa primeira div.

Agora já podemos editar nossa div corpo conforme a imagem abaixo:

Copie o código acima e insira na estrutura.css. Pronto! A div corpo já está estilizada e posicionada corretamente! Basta agora inserirmos na index.html. Então vamos lá, abra a index.html e visualize o ícone Insert Div Tag na barra superior do Dreamweaver. Observe a imagem abaixo:

Clicando nela aparecerá uma janelinha onde vamos inserir a div. No campo ID selecione a div corpo em seguida dê ok. (Posteriormente vamos aprender a diferença de ID para Class)

Simples! A div corpo já está inserida na página, estilizada e posicionada conforme determinamos na estrutura.css.

Por hoje é só! Na próxima parte vamos inserir as demais divs.

Valeu galera! Fiquem com Deus!

ir para a 3ª parte

Veremos neste tutorial como montar um site em Tableless usando as técnicas de CSS. Você que ainda formata página usando tabelas, não sabe o que anda perdendo diante da poderosa linguagem CSS. Vamos deixar bem claro, que a tabela ainda é usada para inserir dados tabulares, mas nunca com o intuito de criar o layout da página.

Além disso, seu site ficará nos padrões da Webstandarts e com um alto nível de acessibilidade. Dividi o tutorial em 6 partes. Então vamos ao que interessa!

Crie um novo documento HTML no Dreamweaver (CTRL+N) e salve-a com o nome de index.html. Em seguida vamos criar um novo documento no Dreamweaver (CTRL+N) no formato CSS. Salve-a no mesmo diretório da index com o nome de
estrutura.css.

Agora vamos adicionar o arquivo CSS na página HTML. Abra a página index.html e visualize a aba CSS na barra lateral direita do Dreamweaver. Observe na parte inferior uma corrente conforme a imagem abaixo:

Clicando nela aparecerá uma janelinha onde você vai procurar o arquivo CSS. No nosso caso estrutura.css. Deixe marcada a opção link. Em seguida dê ok.

Pronto! Agora nossa folha de estilos está ligada ao documento HTML. O que significa que agora podemos definir o layout da página no documento CSS. Observe na seção <head> na página index.html o código que adiciona o estrutura.css a página.

<link href=”estrutura.css” rel=”stylesheet” type=”text/css” />

Agora vamos editar o CSS. Abra o documento estrutura.css e vamos definir os atributos body da index.html conforme a imagem abaixo:

Depois disso abra a página index.html. Você pode observar que a página está com uma cor de fundo azul-clara e o cursor centralizado conforme definimos no documento CSS! Isso quer dizer que está havendo uma conexão da index.html com a estrutura.css.

Por hoje é só! Na próxima parte definiremos o conteúdo da página, bem como o posicionamento dos elementos na página. Valeu galera! Fiquem com Deus!

ir para a 2ª parte