Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se ao uso exagerado de tabelas para organização do projeto visual do site. Considera-se esta forma de trabalho, muito lenta. O objetivo das tabelas é apresentar dados de forma matricial. Para fazer a distribuição visual de um site, pode-se usar a estrutura denominada frames existente exclusivamente nas linguagens de marcação HTML 4.01 e XHTML 1.0 no padrão Frameset, ou então usar nas tags <div> e das linguagens HTML 4.01 e XHTML 1.0 e 1.1. O projeto estrutural de uma página baseada em Tableless é a base para o desenvolvimento visual de um site. É necessário ter em mente o que se deseja realmente fazer. Exemplos de layouts de site: Barra Superior
Corpo externo da página Menu esquerdo Corpo externo da página CODIFICAÇÃO DO PROJETO ESTRUTURAL Após o desenvolvido o desenho desejado do projeto, passa-se à fase de codificação da estrutura interna da página. Menu superior Para descrever a estrutura acima, as tags <div> e <\div> após a tag <body> apresentam os nomes de identificação (id) sem nenhum tipo de acentuação: estrutura, cabeçalho, titulo-cabecalho, menu-superior, principal, menu-esquerdo, conteudo e rodapé. A área estrutura é a primeira divisão que acomodará as demais áreas que integram o layout a ser utilizado, pois essa área agrega a estrutura básica do documento a ser utilizada, além de definir por meio do código CSS as características para formatar o fundo de tela. Na área de divisão estrutura constará a definição das áreas de divisão: cabeçalho, titulo-cabecalho, menu-superior, principal, menu-esquerdo, conteudo e rodapé. Verifique o código abaixo. Copie-o para o editor de textos e salve-o como divisao.html. Neste código vemos a estruturação da página em HTML, com suas respectivas divisões. <!DOCTYPE html Public "-//W3C//DTD XHTML1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Exemplos com Tableless </title> <meta http-equiv="content-type" content = "application/xhtml+xml; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="cssdiv.css"> </head> <body> <div id="estrutura"> <div id = "cabecalho"> <div id="titulo-cabecalho">
Linguagens de Programação <div id="menu-superior"> Início Tradutores Interpretadores Compiladores Pseudo-Compiladores Sobre <div id="principal"> <div id="menu-esquerdo"> <ul> Introdução </ul> 1ª Geração 2ª Geração 3ª Geração 4ª Geração <div id="conteudo">
Início - Introdução <p> O termo programação é aqui aplicado no sentido de representar a atividade denominada programação de computadores, a qual é descrita no Dicionário Aurélio como sendo a ciência ou a técnica de elaboração de progamas de computador. </p> Início - Programação Computacional <p> A programação computacional usada atualmente é descrita sob dois aspectos: o aspecto da programação estruturada, onde um programa é desenvolvido de forma modular (sub-rotinas) e hierárquica (normalmente baseado na técnica top-down) buscando independência funcional de cada módulo e maior legibilidade do código fonte;já o aspecto da programação orientada a objetos, osdados e sub-rotinas (métodos) são tratados como um pacote único (objetos). </p> Início - Necessidade de Programação <p> Para se programar um computador é inicialmente necessário escolher uma linguagem de programação e gerar um programa fonte segundo a linguagem a ser usada. Normalmente depois de esscrever o programa fonte é necessário transformá-lo em programa executável e isso é realizado com o uso de um compilador. Mas além dos compiladores existem também os tradutores, os interpretadores e os pseudo-compiladores. </p> <div id="rodape"> 2008 - M2T - Manzano, Toledo & Toledo. </body> </html> Durante a programação HTML repete-se algumas vezes nos links o nome da página divisao.html, para que os links funcionem efetivamente basta substituí-los pelo nome real das páginas. O código a seguir é responsável pela formatação da página. Copie o código abaixo para o editor de textos e salve-o como cssdiv.css. A linha <link rel="stylesheet" type="text/css" href="cssdiv.css"> é que determina a chamada do arquivo abaixo que permitirá formatar a página. /* ==== elementos basicos / corpo externo ==== */ * { body { margin: 0px; padding: 0px; background: silver;
p { h1 { font: normal 12px "Arial", sans-serif; text-align: justify; background: white; color: navy; font-size:12px; padding: 12px 30px 12 px 0px; text-align: justify; background-color: white; font-size: 14px; padding-top: 4px; padding-bottom: 12px; h2, h3 { background-color: white; margin-bottom: 14px; padding-top: 6px; /* ==== elementos basicos / corpo interno ==== */ #estrutura { background: white; margin: 0px auto; width: 780px; /* ==== ==== */ #cabecalho { background: teal; color: aqua; height: 80px; margin: 0px auto; text-align: center; width: 780px; /* ==== Título do ==== */ #titulo-cabecalho { padding-top: 20px; #titulo-cabecalho h1{ background: teal; color: aqua; font-size: 30px;
/* ==== Menu Superior ==== */ #menu-superior { color: yellow; border-top: 1px solid silver; font-weight: bold; font-size: 15px; height: 44px; margin: 0px auto; padding: 0px 18px; #menu-superior a { color: yellow; line-height: 44px; margin-right: 12px; padding: 3px 4px; text-decoration: none; #menu-superior a:houver { color: white; /* ==== Principal ==== */ #principal { display: table; /* ==== Menu Esquerdo ==== */ #menu-esquerdo { float: left; width: 180px; #menu-esquerdo ul { margin: 0px; padding: 0px; #menu-esquerdo li { border-top: 1px solid silver; font-size: 13px; list-style:none; #menu-esquerdo li a { color: white; display: block; padding: 8px 4px 8px 24px; text-decoration: none; #menu-esquerdo li a:houver {
color: aqua; /* ==== ==== */ #conteudo { float: right; margin-left: 20px; padding-left: 12px; padding-top: 12px; width: 565; /* ==== ==== */ #rodape { border-top: 1px solid silver; color: yellow; font-size: 11px; line-height: 40 px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align:center; width: 780px; /*##########################################################*/