Erwin Alexander Uhlmann /02/08-1. Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann

Transcrição

1 Erwin Alexander Uhlmann /02/08-1 Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann

2 Erwin Alexander Uhlmann /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

3 Erwin Alexander Uhlmann /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.

4 Alguns comportamentos. Erwin Alexander Uhlmann /02/08-4 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.

5 Slide Show com Flash Erwin Alexander Uhlmann /02/08-5 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.

6 Erwin Alexander Uhlmann /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.

7 Erwin Alexander Uhlmann /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:

8 Erwin Alexander Uhlmann /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.

9 Erwin Alexander Uhlmann /02/08-9 Veja: 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. 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:

10 Erwin Alexander Uhlmann /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!.

11 E no rodapé o endereço do site. Erwin Alexander Uhlmann /02/08-11 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.

12 O menu. Erwin Alexander Uhlmann /02/08-12

13 Erwin Alexander Uhlmann /02/08-13

14 Erwin Alexander Uhlmann /02/08-14 Texto... Rodapé... Programação de exemplo do CSS. body { #topo { #menu { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #006699; background-color: #CCCCCC; font-family: "Engravers MT", "Eras Light ITC"; color: #CCCCCC; padding: 5px; background-color: #006699; 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 {

15 Erwin Alexander Uhlmann /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 Opera 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.

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 { a:link { 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 Erwin Alexander Uhlmann /02/08-16 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

17 Erwin Alexander Uhlmann /02/08-17 strong { em { ul { li { ol { font-family:arial, Helvetica, sans-serif; font-weight: bold; color: #FFCC99; text-decoration: overline; background-color: #000066; text-align: center; vertical-align: middle; font-family:verdana, Arial, Helvetica, sans-serif; font-style: italic; color: #FFCC99; font-family:geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-stretch:expanded; letter-spacing: 0.5em; - Distância entre as letras text-transform: capitalize; font-family:verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #00CCFF; Uma página sem o estilo CSS.

18 Erwin Alexander Uhlmann /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" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>estilos em cascata</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>título <H1> </h1> <h2>título <H2 > </h2> <p><strong>este é um parágrafo simples utilizando a TAG <p>. </strong></p> <p><em>quando utilizar algum texto em itálico <em> </em></p> <ul> <li>listas desordenadas<ul> </li> <li>cada item da <em>unordinated list<em></em> pode conter itens mesclados </li> <li>e passarão a obedecer as duas ordens. <ol> <li>exemplode lista ordenada<ol> </li> <li><em>ordinated list</em>, com itens mesclados.</li> </ol> </li> </ul> </body> </html> Continua...