Desenvolvimento de WEB I

Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 1
Desenvolvimento de WEB I
HTML Volume 2
Erwin Alexander Uhlmann
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 2
Sumário
Behaviors ou comportamentos.............................................................................................................3
Alguns comportamentos.............................................................................................................4
Slide Show com Flash......................................................................................................................5
Tableless...........................................................................................................................................8
Construção de um CSS.............................................................................................................16
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 3
Behaviors ou comportamentos
Ao adicionar o layer, será adionado uma série de códigos à página e o DW também fará a adição de
um behavior ou comportamento.
Abra a caixa de ferramentas Behaviors dentro de Tag Inspector, ou simplesmente Shift+F4. Para
abrir você também poderá ir até o menu Window > Behaviors.
Note que o comportamento do layer já está lá. Ele se chama “Play Timeline” e sua ação está
“onLoad”.
Existem diversos comportamentos e existem comportamentos diferentes para cada browser e sua
versão.
Ao clicar no botão Add behavior “+”, você deve primeiro escolher o browser desejado, em Show
Events For>.
Nota: Até a presente data, 28/03/08, o Internet Explorer tem dado muito trabalho
aos WebDesigners pois seus comportamentos não são idênticos à outros browsers,
como o Firefox, um dos mais compatíveis do mercado e o Opera, ainda com alguns
problemas de compatibilidade, mas para linguagens muito recentes ou aplicações
muito específicas. A Microsoft informa que o IE8 será totalmente compatível com as
atuais tecnologias.
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 4
Alguns comportamentos.
Tenha em mente o seguinte mantra: Selecione e adicione.
Sempre, antes de adicionar um comportamento, selecione primeiro.
Go to URL
Serve para redirecionar para uma página.
Crie um botão, por exemplo. Na barra de ferramentas superior, na aba Forms, clique no botão
Button.
O DW irá questionar se deverá ser adicionado a partir de um Tag de formulário (Add form Tag?).
Como não será um formulário de contato, responda não.
Selecione o botão e adicione o comportamento Go to URL. Escolha a URL de destino.
Você poderá escolher como o comportamento será acionado. Por padrão ele adiciona como
onClick, mas ao clicar você poderá escolher outra forma.
Os “acionadores” de comportamento são, em geral, auto explicáveis.
Você poderá também trocar o texto do botão, fazer com textos, imagens e áreas específicas.
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 5
Slide Show com Flash
O Slide Show é um comando pouco utilizado no DW, principalmente porque as pessoas tendem
criá-lo no próprio Flash, no entanto se você deseja criar um slide show rapidamente e não ter que se
preocupar com futuras alterações, o DW tem uma ferramenta criada que mistura Flash e JavaScript.
Crie uma nova página, HTML.
Para criar o Slide Show vá até a barra de ferramentas superior, na aba Flash Elements.
Clique no botão Image Viewer. O DW irá abrir uma janela solicitando o local onde o flash será
salvo. Por se tratar de um elemento gráfico, será salvo junto das imagens do site.
O elemento Flash será criado com 400x325 por padrão. Para alterar estas medidas, basta digitar as
novas na barra Properties do DW.
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 6
Note que na barra de ferramentas lateral a guia Flash Element se abriu.
As funções são:
●
Bgcolor: Mudar a cor de fundo.
●
Caption Color: Muda a cor do texto da imagem.
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 7
●
Capition Font: Muda o nome da fonte do texto da imagem.
●
Caption Size: Muda o tamnho da fonte do texto da imagem.
●
Frame Color: Muda a cor da borda do visualizador. Obs.: Só muda a cor se a propriedade
“Frame Show estiver marcada como YES”.
●
Frame Show: Ativa ou Desativa as bordas em torno do visualizador.
●
Frame Thickness: Aumenta ou Diminui o tamanho da espessura.
●
Image Captions: Definir um título para cada imagem.
Quando você clica nessa propriedade, aparece a seguinte tela:
Veja a imagem acima. Adicionei 5 títulos para as minhas imagens.
●
Images Links: Você define links para a imagem, podendo ser para um site ou até mesmo
para abrir a foto no tamanho maior. Veja a imagem abaixo.
●
Image Link Target: Define como vai ser aberto o link. Podendo ser _Blank, _Self, _Top,
_Parent.
●
Image Urls: É a propriedade mais importante, onde você configura quais as imagens que
vão aparecer no slide show. Veja na imagem abaixo:
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 8
●
Show Controls: Você pode adicionar ou remover os controles.
●
Slide Auto Play: Se marcar “YES”, ele já inicia a transição de imagens quando for
carregado. Caso marque “NO”, o usuário terá que clicar em “Play” para iniciar.
●
Slide Loop: Se marcar “YES”, ele fica transitando imagens sem parar. Caso marque “NO”
quando chegar na última imagem ele para.
●
Ttile: Define um título para o slide show.
●
Title Color: Muda a cor do título.
●
Title Font: Muda a fonte do título.
●
Title Size: Muda o tamanho da fonte do título.
●
Transitions Type: Define o tipo de transição do Slide.
Tableless
Tableless é um sistema de construção de design que não se utiliza tabelas.
Sua principal vantagem é por utilizar os padrões da web, segundo o W3C e associação com CSS.
Isto significa fazer bem e uma única vez, pois a correção, mudança ou ajuste é feita e um único
arquivo e não mais no site todo, ou seja, em todas as páginas.
Também é importante salientar que a utilização de tabelas é correta, salutar e recomendável em
muitos casos, ou seja, Tableless não é a substitutição das tabelas, mas sim, uma ferramenta de
auxilio e se agrega às técnicas do W3C, assim como as tabelas.
Para criarmos um sistema Tableless vamos fazer da seguinte forma:
No DW, na barra de ferramentas superior, na aba Layout.
Então, vamos criar um novo arquivo, HTML.
Clique no botão Insert Div Tag.
A janela para se inserir uma Tag Div se abrirá e solicitará os seguintes dados:
Insert: At insertion point – Ou seja, no ponto onde está o cursor.
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 9
Class: - deixe em branco – serve para atribuir uma classe do css
ID: fundo – Este será o nome que iremos dar a este Div e utilizaremos no CSS.
Veja:
Em seguida vamos criar a Div para o cabeçalho.
Agora a Div de navegação ou menu, porém esta deve estar sempre após a Div Topo. Troque de At
insertion point no item Insert para After Tag e escolha a Div, ao lado.
Agora a Div do texto ou conteúdo, após a Div Menu.
E por fim o rodapé, após a Div Texto.
A aparência deverá ser semelhante à esta:
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 10
Então vamos trabalhar um pouco no código.
Selecione no código as linhas inteiras das Divs topo, menu, texto e rodapé.
Recorte e cole no lugar do texto Content for id “fundo” Goes Here da Div fundo. Deverá ficar desta
forma:
<div id="fundo">
<div id="topo">Content for id "topo" Goes Here</div>
<div id="menu">Content for id "menu" Goes Here</div>
<div id="texto">Content for id "texto" Goes Here</div>
<div id="rodape">Content for id "rodape" Goes Here</div>
</div>
Agora vamos inserir um conteúdo dentro das Divs.
Exemplo:
Na Div topo, vamos inserir “UnG”.
Na Div menu, vamos inserir Home, Alunos, Cursos e Contato.
N Div texto,
Bem vindo à Universidade de Guarulhos
Vamos aprender fazer sites profissionais!.
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 11
E no rodapé o endereço do site.
Agora vamos criar um CSS.
Pressione CTRL+N (Novo arquivo), e escolha a tecnologia CSS.
Como determinamos as Divs em Tags específicas, vamos criar o CSS com as mesmas Tags.
Para a Tag <body>.
Para a Div topo, vamos selecionar a opção Advanced.
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 12
O menu.
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 13
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 14
Texto...
Rodapé...
Programação de exemplo do CSS.
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #006699;
background-color: #CCCCCC;
}
#topo {
font-family: "Engravers MT", "Eras Light ITC";
color: #CCCCCC;
padding: 5px;
background-color: #006699;
}
#menu {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #006699;
display: table;
list-style-type: disc;
background-color: #FFFFFF;
float: left;
width: 24.3%;
font-size: 14px;
padding: 5px;
height: 250px;
}
#texto {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #006699;
float: right;
width: 74%;
background-color: #FFFFCC;
padding: 5px;
height: 250px;
}
#rodape {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
clear: both;
height: 50px;
background-color: #006699;
text-align: center;
vertical-align: middle;
}
a:link {
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 15
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #006699;
text-decoration: none;
}
a:visited {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #000066;
text-decoration: none;
}
a:hover {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #009999;
text-decoration: underline;
}
a:active {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #999999;
background-color: #006699;
text-decoration: none;
}
Resultado nos navegadores
Internet Explorer
Firefox
Construção de um CSS
Crie um novo arquivo CSS.
Utilize os nomes das TAGs html para criar seus parâmetros, veja o exemplo:
/* CSS Document */ - Comentário
/* CSSs de TAGs comuns*/ - Comentário
body {} - Especifica tudo sobre a página como, cor de fundo.
a:link {} - Especifica as formas de um link.
a:visited {} - Especifica as formas de um link visitado.
a:hover {} - Especifica as formas ao passar o mouse sobre um link.
a:active {} - Especifica as formas de um link ativo.
h1 {} - Especifica as formas de um texto heading 1(Cabeçalho).
h2 {} - Especifica as formas de um texto heading 2.
p {} - Especifica as formas de um parágrafo.
strong {} - Especifica as formas de um texto em negrito.
em {} - Especifica as formas de um texto em itálico.
ul {} - Especifica as formas de listas desordenadas.
Opera
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 16
li {} - Especifica as formas dos itens da lista.
ol {} - Especifica as formas de listas ordenadas.
Veja um exemplo.
/* CSS Document */
/* CSSs de TAGs comuns*/
body {
margin-left: 0px; - Distância da margem esquerda
margin-top: 0px; - Distância do topo
margin-right: 0px; - Distância da margem direita
margin-bottom: 0px; - Distância da base
background-color:#006699; - cor de fundo
}
a:link {
color: #FFFFFF; - Cor da fonte
text-decoration: none; - Define a decoração do texto, se será sublinhado, se não, etc.
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: underline;
color: #FFFFCC;
}
a:active {
text-decoration: none;
color: #FFFFCC;
}
h1 {
font-family: "Engravers MT", "Eras Light ITC"; - Define a família da fonte
font-size: 36px; - Tamanho da fonte
font-weight: bold; - Fonte em negrito
text-transform: capitalize; - Primeira letra em maísculo
color: #FFFFFF;
text-align: center; - Alinhamento do texto – ATENÇÃO! Somente para a as TEGs h1.
border-top-width: thin; - linha de topo: Fina.
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: double;
border-top-color: #CCCCCC; - Cor da linha
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
border-bottom-style: double; - Tipo de linha
}
h2 {
font-family:"Engravers MT", "Eras Light ITC";
font-size: 24px;
font-weight: bold;
color: #CCCCCC;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
}
p{
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFCC;
word-spacing: 5px; - Espaçamento entre as palavras
margin: 5px; - Margem
padding: 5px; - Distancia entre as células
}
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 17
strong {
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFCC99;
text-decoration: overline;
background-color: #000066;
text-align: center;
vertical-align: middle;
}
em {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
color: #FFCC99;
}
ul {
font-family:Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
li {
font-stretch:expanded;
letter-spacing: 0.5em; - Distância entre as letras
text-transform: capitalize;
}
ol {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #00CCFF;
}
Uma página sem o estilo CSS.
Erwin Alexander Uhlmann – www.institutosiegen.com.br - 15/02/08 - 18
Com o CSS linkado.
Repare como o código da página fica limpo e simples:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estilos em cascata</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>T&iacute;tulo &lt;H1&gt; </h1>
<h2>T&iacute;tulo &lt;H2 &gt; </h2>
<p><strong>Este &eacute; um par&aacute;grafo simples utilizando a TAG &lt;p&gt;. </strong></p>
<p><em>Quando utilizar algum texto em it&aacute;lico &lt;em&gt; </em></p>
<ul>
<li>Listas desordenadas&lt;ul&gt; </li>
<li>Cada item da <em>Unordinated list&lt;em&gt;</em> pode conter itens mesclados </li>
<li>E passar&atilde;o a obedecer as duas ordens.
<ol>
<li>Exemplode lista ordenada&lt;ol&gt; </li>
<li><em>Ordinated list</em>, com itens mesclados.</li>
</ol>
</li>
</ul>
</body>
</html>
Continua...