Download Apostila.de.Webdesign.idepac PDF

TitleApostila.de.Webdesign.idepac
File Size3.5 MB
Total Pages122
Document Text Contents
Page 2

ÍNDICE


HTML
1. DEFINIÇÃO..........................................................................................................01


2. CRIANDO DOCUMENTOS HTML.......................................................................03

2.1 - ELEMENTOS BÁSICOS.........................................................................05
2.1.1 - TÍTULOS..............................................................................................05
2.1.2 - CABEÇALHO.......................................................................................06
2.1.3 - PARÁGRAFO.......................................................................................07
2.1.4 - QUEBRA DE LINHA.............................................................................08
2.1.5 - COMENTÁRIOS...................................................................................09
2.1.6 - LISTA DE ELEMENTOS BÁSICOS......................................................09
2.1.7 - DICAS...................................................................................................10


3. FORMATAÇÃO DE TEXTO.................................................................................11
3.1 - DEFININDO FONTES.............................................................................11

3.2 - ESTILO DE TEXTOS..............................................................................12
3.3 - FORMATANDO BLOCO DE TEXTOS....................................................13
3.3.1 - TAG DIV...............................................................................................13


4. CONTROLE DE CORES E GRÁFICOS DE FUNDO...........................................15
4.1 - CORES E ELEMENTOS GRÁFICOS DE FUNDO..................................15
4.1.1 - BACKGROUND (IMAGEM DE FUNDO)..............................................15
4.1.2 - BGCOLOR............................................................................................16
4.2 - CORES DE LETRAS E LINKS................................................................18
4.2.1 - ATRIBUTO TEXT..................................................................................18
4.2.2 - ATRIBUTO LINK, VLINK E ALINK........................................................19


5. LINKS.....................................................................................................................21
5.1 - ÂNCORAS..............................................................................................21
5.2 - INTERLIGANDO DOCUMENTOS EM OUTROS DIRETÓRIOS...........22
5.3 - INTERLIGANDO URL'S.........................................................................25
5.4 - LINKS PARA E-MAILS...........................................................................25


6. LISTAS..................................................................................................................26

6.1 - LISTAS NÃO NUMERADAS.....................................................................26
6.2 - LISTAS NUMERADAS..............................................................................28
6.3 - LISTA DE DEFINIÇÕES...........................................................................30
6.4 - LISTA INTERCALADAS............................................................................33


7. IMAGENS...............................................................................................................35
7.1 - INSERINDO IMAGENS NA PÁGINA.......................................................36
7.2 - DIMENSIONANDO IMAGENS.................................................................37
7.3 - ALINHANDO IMAGENS...........................................................................38
7.3.1 - ALINHAMENTO EM RELAÇÃO AO NAVEGADOR...............................38
7.3.2 - ALINHAMENTO EM RELAÇÃO AO TEXTO... ......................................39

7.4 - OUTROS ATRIBUTOS..............................................................................40


8.TABELAS................................................................................................................42
8.1 - MARCAÇÕES BÁSICAS...........................................................................42
8.2 - DESENVOLVENDO UMA TABELA SIMPLES..........................................43
8.3 - ATRIBUTOS DE CONTROLE DE TABELAS............................................45
8.4 - CORES E IMAGEM NA TABELA..............................................................56

8.4.1 - CORES NA TABELA..............................................................................56
8.5 - IMAGEM DE FUNDO NAS TABELAS.......................................................57

Page 61

____________________________________________________________ Página - 51 -


<html>
<head>
<title>Tabelas</title>
</head>
<body>
<h1>Atributo COLSPAN</h1><BR>
<table width="300" border="2" align="center" cellspacing="2" cellpadding="2">
<tr>
<td align="center" colspan="2">1</td>
<td align="center">2</td>
</tr>
<tr>
<td align="center" >3</td>
<td align="center" >4</td>
<td align="center" >5</td>
</tr>
</table>
</body>

</html>


ROWSPAN


O atributo ROWSPAN é aplicado nas tags <TH> e <TD>, pois define quantas colunas uma

célula pode abranger. Por padrão, na maioria dos navegadores cada célula corresponde a uma coluna na

tabela.

Fígura 8.11 Modelo de uso do atributo ROWSPAN

Page 62

____________________________________________________________ Página - 52 -


Modelo de uso do atributo ROWSPAN

<html>
<head>
<title>Tabelas</title>
</head>
<body>
<h1>Atributo ROWSPAN</h1><BR>
<table width="300" border="2" align="center" cellspacing="2" cellpadding="2">
<tr>
<td align="center" rowspan="2">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center" >4</td>
<td align="center" >5</td>
</tr>
</table>
</body>
</html>


8.4 CORES E IMAGEM NA TABELA


8.4.1 CORES NA TABELA
O atributo BGCOLOR é utilizado para aplicar cor de fundo a célula ou a tabela. Este atributo

pode ser inserido nas tags <TABLE> , <TD> e <TH>.

Fígura 8.12 Modelo de uso de cores de fundo

Page 121

._____________________________________________________________ Página - 110 -

25. DICAS PARA A CRIAÇÃO DE UM SITE


• Crie um esboço, desenhe as várias páginas imaginando como seria o seu visual em tela,

posição das fotos, textos, títulos etc.

• Faça um estudo prévio: marque reuniões com o seu cliente, converse e discuta soluções

com a equipe de cliente, converse e discuta soluções com a equipe de desenvolvimento,

pesquise outras fontes de informações, formule perguntas e obtenha as respostas

necessárias para construção do site.

• Apresente uma resposta com o projeto que pretende executar, tempo e custo.

• Faça um contrato, ele é um instrumento legal de comum acordo entre ambas as partes.

• Cronograma, através dele será possível definir as etapas e períodos de desenvolvimento

do site.

• Defina o objetivo do site. É formal ou informal? Usa cores fortes ou discretas? Veicula em

outros meios de comunicação?

• Público Alvo: quem visitará seu site?



25.1 - DEFINIR O CONTEÚDO, O QUE SERÁ DIVULGADO NO SITE


• Informações pessoais: informações sobre você;

• Publicações como jornais, revistas;

• Perfis da empresa; segmento da empresa; clientes, parceiros, etc.



25.2 - ESTABELECER OBJETIVOS

• Você deve perguntar-se o que os usuários vão estar procurando no site;

• Qual é o objetivo do site;

• Antes de começar entrar com códigos ou imagens você deve pensar o que você quer

colocar em sua página;

• Como será estruturada? Ela está adequada ou não ao meu público alvo?

• Ao Desenvolver um site para uma empresa ou pessoas, é importante que você colha junto

ao seu cliente seus objetivos, idéias, a forma que imagina sua página, etc;

• Assim ficará bem mais fácil de começar seu trabalho.

Page 122

._____________________________________________________________ Página - 111 -



25.3 - DIVIDA O SEU CONTEÚDO EM TÓPICOS


Crie uma lista com os principais tópicos, a princípio não importa a ordem. Esta forma

de começar a se organizar. Sua lista poderá ter quantos tópicos desejar, mas cuidado, o seu leitor

poderá se cansar e se perder em meio a tantas opções.



25.4 - QUAIS AS QUESTÕES QUE DEVO LEVANTAR COM RELAÇÃO À ORGANIZAÇÃO E
NAVEGAÇÃO DE UM SITE


• Será que os usuários conseguem navegar pelo conteúdo de cada tipo de estrutura para

encontrar as informações de que precisam.

• Como ter certeza de que os usuários conseguem se localizar nos meus documentos

(contexto) e achar o caminho de volta até uma posição conhecida.



25.5 - PRÓXIMA ETAPA DO PLANEJAMENTO


Sua apresentação da Web consiste em determinar o conteúdo que será apresentado

em cada uma das páginas e criar alguns vínculos (links) simples que possibilitem a navegação por

essas páginas.

• Coloque cada tópico em uma página, mas se tiver um grande número de tópicos, a

manutenção e vinculação podem se tornar maçante.

• Defina bem a forma de navegação entre as páginas. Se houver formas alternativas, torne a

navegação para os leitores a mais intuitiva possível.

• Tome cuidado com o que será incluído na home page, lembre-se que ela será a porta da

sua apresentação.

• Tenha sempre em mente seus objetivos. Procure não se distanciar deles.



NOTA: A disposição de imagens, textos, vídeos, etc. Tudo que você desejar colocar em sua
página precisa ser colocado de forma agradável ao leitor. Abordamos, de forma geral, a

diagramação. Esta palavra vem do mundo dos impressos. Trata-se da disposição de elementos

que compõem uma página, deve ser observado o tamanho das fontes, disposição das imagens,

forma como o texto será apresentado, etc. Uma boa diagramação também garante o retorno do

usuário.

Similer Documents