-
Notifications
You must be signed in to change notification settings - Fork 0
/
mod3(text)_pag11(index).html
139 lines (121 loc) · 9.31 KB
/
mod3(text)_pag11(index).html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -->
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>mod3(text)_pag11(index)</title>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="stylesheets/10_typography.css" media="all" rel="stylesheet" type="text/css" />
<link href="stylesheets/30_color_screen_handheld.css" media="handheld" rel="stylesheet" type="text/css" />
<link href="stylesheets/23_layout_handheld.css" media="handheld" rel="stylesheet" type="text/css" />
<link href="stylesheets/27_layout_iphone.css" media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" />
<link href="stylesheets/25_layout_print.css" media="print" rel="stylesheet" type="text/css" />
<link href="stylesheets/20_layout_screen.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/30_color_screen_handheld.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="stylesheets/40_layout_lteie7.css" media="all" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 6]>
<link href="stylesheets/50_layout_ie6.css" media="all" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body class="text" id="index">
<div id="header">
<p>
<strong id="logo_print">
<img alt="Patricia Figueira" height="1" src="images/logo_print.gif" width="1" />
</strong>
<strong id="logo_screen">
<a href="mod1(pictures)_pag01(index).html">
<img alt="Patricia Figueira" src="images/logo.gif" title="Título do logotipo de tela. Existe também um de impressão." />
</a>
</strong>
</p>
<em id="slogan">A nova cara da fotografia social.</em>
<ul>
<li><a href="mod1(pictures)_pag01(index).html">Fotos</a></li>
<li><a href="mod2(videos)_pag09(index).html">Vídeos</a></li>
<li class="current"><a href="#">Páginas de texto</a></li>
<li><a href="mod7(blog)_pag17(index).html">Blog</a></li>
<li><a href="mod4(contact)_pag12(index)_sit1(initial).html">Contato</a></li>
<li><a href="mod5(rsvp)_pag13(index)_sit1(initial).html">R.S.V.P.</a></li>
<li><a href="mod6(application)_pag14(page_not_found).html">Erros</a></li>
</ul>
</div>
<hr id="header_delimiter" />
<div id="main_content">
<h1>Sobre as páginas de texto</h1>
<!--
<div id="summary">
<p>Este é um #summary escondido. Isso é porque, por padrão, os divs #summary só aparecem no <a href="mod1(pictures)_pag02(gallery).html#summary">interior das galerias</a> e nas <a href="mod1(pictures)_pag03(picture)_sit2(vertical).html#summary">páginas de imagem grande</a>. O #summary só aparece por padrão nas páginas citadas porque é lá que aparecem também os links para a ficha técnica e para a seleção de imagens. Aqui, como não há links, o #summary serve só como um resumo descritivo do que vem abaixo.</p>
<p>Por isso, prepare-se também para esta situação. Experimente "descomentar" este div para fazê-lo aparecer e estilize-o.</p>
</div>
-->
<p>Páginas de texto são bem menos frequentes do que páginas de fotos ou vídeos, e por isso não são o coração do Be on the Net. Mas elas são bem mais <em>versáteis</em> do que as de fotos e vídeos, porque permitem ao cliente pôr todo tipo de conteúdo HTML — até mesmo uma ou outra foto ou vídeo.</p>
<p>Por causa desta versatilidade, as páginas do módulo de texto são também as mais <strong>imprevisíveis</strong>. Ao contrário das dos módulos de <a href="mod1(pictures)_pag01(index).html">imagem</a>, <a href="mod2(videos)_pag09(index).html">vídeo</a>, <a href="mod4(contact)_pag12(index)_sit1(initial).html">contato</a>, <a href="mod5(rsvp)_pag13(index)_sit1(initial).html">R.S.V.P.</a> e <a href="mod6(application)_pag14(page_not_found).html">erros</a>, não há como saber o que o cliente pretende exibir em seu site, em termos de conteúdo escrito. Por isso, neste caso, é preciso fazer um esforço para tentar prever toda espécie aplicação de HTML possível, fazendo um estilo abrangente o suficiente para tornar agradável a leitura e visualização de diversos tipos de conteúdo.</p>
<p>Nesta página, vamos exibir algumas das tags mais usadas em nossa experiência com os 100 primeiros usuários do Be on the Net.</p>
<h2>O que você vai precisar dominar</h2>
<h3>Listas</h3>
<ul>
<li>Você vai precisar dominar listas de texto. Elas são muito usadas no Be on the Net;</li>
<li>
<p>Vai ser muito útil dominar listas com parágrafos dentro.</p>
<p>Apesar de parecer mais interessante usar tags <code><dl></code>, <code><dt></code> e <code><dd></code> nestes casos (as <em>definiton lists</em>), listas com mais de um parágrafo são bem capazes de aparecer;</p>
</li>
<li>Listas dentro de listas:
<ul>
<li>Páginas com listas mais complexas ou páginas de FAQ podem conter listas dentro de listas;</li>
<li>O Be on the Net não dá suporte a listas dentro de listas no menu principal. Todo o menu é uma lista com um único nível. Por isso, não se preocupe em estilizar listas dentro de listas no menu: isso nunca vai acontecer;</li>
<li>A página de <a href="http://beonthe.net/faq/pagina">perguntas frequentes</a> do Be on the Net tem listas dentro de listas! Acontece, não?</li>
</ul>
</li>
</ul>
<ol>
<li>Também vai ser bem útil domar listas numéricas (ou ordenadas). Elas aparecem de vez em quando;</li>
<li>Os tipos de listas são três:
<ol>
<li>As listas de marcadores, ou não ordenadas (unordered). São as da tag <code><ul></code>;</li>
<li>As listas ordenadas, que são estas da tag <code><ol></code>;</li>
<li>E por último as <em>listas de definição</em>, que você vai ver logo abaixo;</li>
</ol>
</li>
<li>Mas isso tudo sobre listas você já sabia, certo? OK, só estou enchendo espaço para termos o que estilizar. Vamos à próxima lista.</li>
</ol>
<dl>
<dt>Listas de definição</dt>
<dd>São listas muito úteis, que dão um <em>termo</em> (tag <code><dt></code>) e logo a seguir sua <em>definição</em> ou <em>descrição</em> (tag <code><dd></code>). Têm aplicabilidade em muitos casos;</dd>
<dt>Exemplos de aplicação</dt>
<dd>Um dicionário. O dicionário é feito de termos e definições, e uma versão online de um dicionário poderia muito bem ser representada através de uma lista de definição. Outro exemplo: um diálogo escrito num roteiro. O nome da pessoa que fala pode ser o termo, e sua fala pode ser a definição. Fica bonitão, até sem CSS;</dd>
</dl>
<h3>Depoimentos e testemunhos</h3>
<blockquote>
<p>Não há conjunto melhor de tags para um depoimento do que um <code><blockquote></code> com alguns parágrafos dentro, seguido por um parágrafo com a tag <code><cite></code>. O <code><blockquote></code> fica sendo o testemunho propriamente dito, e o <code><cite></code> representa a pessoa que o disse. Fica bacana até sem o CSS!</p>
</blockquote>
<p><cite>Equipe Be on the Net</cite></p>
<blockquote>
<p>Há alguns clientes do Be on the Net que usam bastante depoimentos em seus sites. Descubra quem são em nossa <a href="http://beonthe.net/clientes/pagina">página de clientes</a>.</p>
</blockquote>
<p><cite><a href="http://improveit.com.br/empresa/leandro">Leandro Mello</a></cite></p>
</div>
<hr id="footer_delimiter" />
<div id="footer">
<p><strong>© Patricia Figueira</strong> — Niterói e Rio de Janeiro, RJ — Brasil</p>
<p><strong>Telefone:</strong> (21) 2705-0198 — <strong>e-mail:</strong> <a href="#" rel="protected" title="Um title.">contato@patriciafigueira.com.br</a>.</p>
<h2>
<strong><a href="http://beonthe.net" title="Um title.">Criação do site</a></strong>:
<a id="beonthenet" href="http://beonthe.net" title="Um title.">
<img src="images/logo_footer.gif" alt="Be on the Net — fazer um site em 24h é com o Be on the Net. Montar um site agora é fácil. Crie seu site em minutos e tenha espaço ilimitado para imagens, fotos e vídeos. Modelos de sites (templates de sites) prontos para agilizar seu desenvolvimento web" title="Um title." /></a>.
Um <a href="http://beonthe.net" title="Um title.">produto</a> da <a id="improveit" href="http://improveit.com.br" title="Um title.">Improve It</a>.
</h2>
<h3>Design de <a href="http://improveit.com.br/empresa/leandro">Leandro Mello</a> para o <a href="http://beonthe.net" title="Um title.">Be on the Net</a>.</h3>
<h5>Links do projeto Be on the Net estático:</h5>
<h6>
<a href="info/readme.html">Mapa da Mina, o ponto de partida</a> /
<a href="info/instrucoes.html">Instruções para fazer CSS</a> /
<a href="info/faq.html">F.A.Q.</a> /
<a href="info/release-notes.html">Release notes</a> /
<a href="info/fontes-de-material-creative-commons.html">Fontes de material Creative Commons</a> /
<a href="modelo-do-contrato.pdf">Modelo do contrato (.PDF)</a>
</h6>
</div>
</body></html>