Escolar Documentos
Profissional Documentos
Cultura Documentos
PDF Livro
PDF Livro
Ferramentas bsicas
de desenvolvimento
1.1 Introduo
Para desenvolver um site, voc no precisa adquirir ferramentas de edio sofisticadas e dispendiosas. Particularmente, os editores do tipo WYSIWYG, que so
to bem-aceitos, procurados e usados, so uma ferramenta de desenvolvimento
no-recomendada para o incio do aprendizado. Tais ferramentas devem ser usadas
apenas quando o desenvolvedor tiver total conhecimento e controle da maneira
como geram o cdigo.
A sigla WYSIWYG para a expresso What You See Is What You Get empregada
para designar interfaces de produo em que o resultado final do desenvolvimento
semelhante quele mostrado na interface do software durante a sua criao. A maioria
dos editores de texto desse tipo, como, por exemplo, o Microsoft Word. Nesses editores
os textos, paginao, formatao e apresentao do documento so mostrados na tela
durante a fase de criao, de maneira idntica ao resultado final, quando o documento for
impresso ou apresentado nas mdias para as quais as criaes do editor se destina.
21
53
A sintaxe da regra CSS no sensvel ao tamanho de caixa da fonte (voc pode usar
letras minsculas ou maisculas, indiferentemente) e mltiplos espaos so tratados
como espao simples. Usar ou no espaos entre os componentes da regra CSS fica a
critrio do desenvolvedor. Todas as regras CSS mostradas a seguir so vlidas:
h1 { border: 1px solid red; }
h1 {border:1px solid red;}
h1{ border:
1px
solid
red;}
Bloco de comentrio:
/* Este um bloco de comentrio em linhas
75
margin-right: 30px;
margin-bottom: 5px
margin-left: 10px;
captulo 5
Seletores
5.1 Definies
Em [C3 S3.1.4.3] e [C3 S3.1.4.4], definimos seletor classe e seletor id. Caso voc no
se lembre destes seletores, volte quelas sees e faa uma reviso antes de prosseguir. Os seletores se classificam em dois grandes grupos: simples e compostos.
82
96
105
O uso mais comum para a propriedade vertical-align o controle do posicionamento vertical de imagens inline. Na Figura 6.13 o efeito da aplicao das regras
de estilo j mostradas quando aplicadas s imagens.
120
Observe que cada um dos pares que representam RGB formado por nmeros
iguais. Neste caso, a sintaxe CSS permite abreviar a grafia para:
h1 {color: #69F;}
Temos, ento, uma forma alternativa com trs caracteres hexadecimais para
representar uma cor. de boa prtica adotar esta forma abreviada sempre que o
formato do nmero hexadecimal para a cor permitir (os trs pares com nmeros
iguais entre si).
Esteja ciente de que no se pode abreviar para trs caracteres cores como:
#808080 e #FFCC63.
ou:
h4 {color: rgb(30%, 25%, 70%);}
130
142
Flutuado
h1 {
width: 6em;
background-color: #daf6d1;
height: 2.5em;
float: left;
margin: 0 0.5em 0 0;
text-align: center;
}
156
</ol>
<dt>Baixo custo</dt>
<dt>Fcil de usar</dt>
<dt>Segurana</dt>
</dl>
192
#nav a:hover {
text-decoration: none;
color:#69c;
background: #c7daec;
}
position: absolute;
width: 10em;
left: -1000em;
margin: 0;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.over ul, #nav li li.over ul {
}
left: auto;
A declarao de largura (10em) e altura (2em) para o elemento a permitir posicionar os submenus.
A classe over inserida por JavaScript, pois esta verso usa o mesmo cdigo
JavaScript da verso vertical.
ul ul
posicionam os submenus.
211
Captulo 10 Formulrios
Pode enviar o dado contido no controle para processamento quando o formulrio for enviado.
<label>Dica:
</label>
</form>
Notar que em HTML basta escrever o atributo readonly, mas em XHTML obrigatrio indicar o seu valor, escrevendo readonly ="readonly" [C2 S2.2.3.6].
A Figura 10.14 mostra a renderizao-padro do cdigo. Notar que os navegadores Internet Explorer 6 e Firefox estilizam de maneira diferente o controle
desabilitado. Podemos obter estilizao idntica nos dois navegadores com uso
das CSS, conforme veremos.
captulo 11
Criando tabelas
Web Standards
267
tfoot tr td {
text-align: center;
tr td, tr th {
font-size: 1.1em;
}
tr th {
A Figura 11.16 mostra o efeito desta nova folha de estilo aplicando as imagens
de fundo nos elementos table e caption.
Para inserir cones nos cabealhos da tabela atribumos uma classe para cada cabealho e definimos a imagem do cone como fundo. As alteraes na marcao so:
...
<thead>
<tr>
<td></td>
...
</tr>
</thead>
289
ou
img {float: right;}
Observar que para elementos inline o comportamento diferente daquele de blocos flutuados. A imagem flutuada foi deslocada para uma posio at tocar a borda
do seu elemento container, no exemplo um pargrafo, e tanto o texto contedo do
container quanto o elemento bloco que se segue no fluxo do documento, o segundo
pargrafo, ocuparam uma posio em volta da imagem. Na prtica, tal comportamento usado para alinhar imagens esquerda ou direita de um texto.
326
#navegacao {
width: 23%;
float: left;
background: #a2daec;
#rodape {
clear: both;
background: #ffecd1;
height: 25px;
}
A Figura 13.8 mostra a rende rizao do nosso layout lquido nas trs resolues
mais usadas.
343
356
383
Captulo 15 Miscelnea
pessoal, e a opo por uma delas deve ser fundamentada nas peculiaridades de
cada projeto.
A imagem uma gif transparente que foi gravada com o nome cabecalhos.gif.
Notar que colocamos os cabealhos afastados verticalmente um do outro de um
valos igual a 40px. importante adotar um espaamento constante e preferencialmente mltiplos de 5 ou de 10, pois sero as coordenadas verticais para posicionar
a imagem de fundo com a propriedade CSS background.
apndice C
A tabela constante deste apndice foi extrada do site do W3C e descreve as propriedades CSS 2.1 e seus valores possveis. Informa ainda o valor inicial de cada
propriedade, se herdada ou no e a qual mdia aplica.
Na coluna dos valores das propriedades, o W3C adota uma notao que explicada a seguir:
Notao
Significado
<>
[]
agrupamento
||
0 ou mais
1 ou mais
0 ou 1
{x y}
Exemplos:
scroll
431