Projeto Gráfico NT Editora. Capa NT Editora. Ilustração NT Editora

Transcrição

1

2

3 Autor Daniel Lima Daniel Lima iniciou sua carreira na área de desenvolvimento desde muito jovem, antes mesmo de ingressar no curso de Sistemas de Informações da Faculdade de Ciências Sociais e Tecnológicas - FACITEC. É desenvolvedor Apple, Web, Flash, Php e Java, fascinado com o desenvolvimento de aplicativos para Smartphones e Tablets. Na atualidade é especialista no desenvolvimento de aplicativos mobile. Design Instrucional NT Editora Revisão NT Editora Editoração Eletrônica NT Editora Projeto Gráfico NT Editora Capa NT Editora Ilustração NT Editora NT Editora, uma empresa do Grupo NT SCS Quadra 2 Bl. C 4º andar Ed. Cedro II CEP Brasília DF Fone: (61) sac@grupont.com.br e Lima, Daniel. Criação de Websites com Dreamweaver / Daniel Lima 1. ed. Brasília: NT Editora, p. il. ; 21,0 X 29,7 cm. ISBN Dreamweaver. 2. Websites. 3. Layout. I. Título Copyright 2014 por NT editora. Nenhuma parte desta publicação poderá ser reproduzida por qualquer modo ou meio, seja eletrônico, fotográfico, mecânico ou outros, sem autorização prévia e escrita da NT Editora.

4 LEGENDA ÍCONES Prezado(a) aluno(a), Ao longo dos seus estudos, você encontrará alguns ícones na coluna lateral do material didático. A presença desses ícones o(a) ajudará a compreender melhor o conteúdo abordado e a fazer os exercícios propostos. Conheça os ícones logo abaixo: Saiba mais Esse ícone apontará para informações complementares sobre o assunto que você está estudando. Serão curiosidades, temas afins ou exemplos do cotidiano que o ajudarão a fixar o conteúdo estudado. Importante O conteúdo indicado com esse ícone tem bastante importância para seus estudos. Leia com atenção e, tendo dúvida, pergunte ao seu tutor. Dicas Esse ícone apresenta dicas de estudo. Exercícios Toda vez que você vir o ícone de exercícios, responda às questões propostas. Exercícios Ao final das lições, você deverá responder aos exercícios no seu livro. Bons estudos!

5 Sumário 1. UM MUNDO DE POSSIBILIDADES HTML e XHTML CSS JavaScript Imagens Conteúdos em Flash Planejando um website Navegadores web CONHECENDO O DREAMWEAVER E ENTENDENDO SEU ESPAÇO DE TRABA- LHO Iniciar o programa Interfaces e painéis Barras de ferramentas CRIANDO SEU PRIMEIRO SITE COM O DREAMWEAVER CS Configurar site e arquivos do projeto Criando um novo documento Propriedades da página Salvando o documento A ajuda do Dreamweaver CS ELEMENTOS DE LAYOUT Inserindo e editando tabelas Inserindo imagens Edição de imagens no Dreamweaver CS Inserindo texto Recursos de layout do Photoshop Recursos de layout do Fireworks Frame e IFrame Usando o navegador de código e a barra de ferramenta de arquivos relacionados ADICIONANDO MELHORIAS AO SITE Criando menu com imagens Menus com imagens de sobreposição Adicionar menu spry NT Editora

6 5.4 Inserir conteúdos em Flash TRABALHANDO COM CSS, JAVASCRIPT E AJAX Aplicando práticas CSS Camada flutuante Outros elementos Spry LINKS, FORMULÁRIOS E WIDGETS EM AJAX Criando links Inserindo formulários Widget de calendário FINALIZANDO E REVISANDO O SITE Verificação de compatibilidade Procedimentos finais em um projeto de site Localização e substituição de informação PUBLICANDO O SITE Domínio ou URL Servidores e hospedagem Publicando o site com o Dreamweaver TEMPLATES, FÓRUNS E BLOGS Templates Blogs Fóruns Twitter...48 Criação de Websites com Dreamweaver 5

7

8 1. UM MUNDO DE POSSIBILIDADES Reprodução proibida. Copyright NT Editora. Todos os direitos reservados. 1.1 HTML e XHTML HTML é uma linguagem de marcação utilizada para produzir páginas da web. O código HTML é interpretado pelos navegadores, que assim conseguem mostrar o conteúdo na tela. A criação do código HTML é bastante simples, não há a necessidade de programas complexos,pode-se usar um simples editor de texto e em seguida salvar o documento com a extensão HTML e pronto. Se o código estiver correto, já pode ser corretamente exibido em um navegador web. O HTML é composto de elementos de marcação, denominados TAGS, que começam com uma instrução dentro dos sinais de menor e maior. Exemplo: <html>. A TAG é encerrada de forma parecida, diferenciada apenas por uma barra depois do sinal de menor. Exemplo: </html>. Já o XHTML pode ser considerado uma evolução do HTML, pois se trata de uma combinação das TAGS HTML com regras de marcação do XML. Neste curso utilizaremos a versão 1.0 XHTML Transitional. Entenda melhor como funciona um documento HTML. 1. A tag <html> abre o código HTML, as outras Tags de marcação que utilizaremos devem ser colocadas depois de sua abertura e antes de seu fechamento. 2. A tag <head> é a cabeça do código HTML. Se a marcação fosse em português seria: <cabeça>. Dentro desta tag, temos a tag <title>, que é onde definimos o título de nossa página, o que escrevermos aqui aparecerá na barra de título do navegador web. O título da página é encerrado com a tag </title> e em seguida a cabeça do HTML também é encerrada com a tag </head>. 3. A tag <body> é o corpo de nosso documento HTML. É aqui que fica o conteúdo da página. Observe que dentro do corpo há uma tag <p>, que serve para criar um parágrafo na página. A tag <p> está apresentada com a propriedade align e definida para center, isso faz com que o texto de dentro do parágrafo fique alinhado ao centro. Dentro do parágrafo, há ainda a tag <strong>, tudo o que estiver dentro desta tag aparecerá em negrito, como você pode observar na tela do navegador abaixo: 4. Ao concluir o conteúdo interno do site, devemos fechar o corpo do HTML, utilizando a tag </body>, mas como podemos observar pela imagem da mulher, ainda falta algo. 5. Se você imaginou que faltava fechar a tag <html>, acertou. Isto encerra nossa página de exemplo. TAGS: Breve instrução que possui uma marca de início e outra de fim. Ex: <body> e </body>. XML: Linguagem padronizada de marcação genérica. Criação de Websites com Dreamweaver 7

9 1.2 CSS O que é CSS? Você provavelmente já ouviu falar em CSS, mas o que isso significa exatamente? CSS é a abreviatura de Cascading Style Sheets (Folha de Estilos em Cascata); Pra que serve o CSS? CSS é uma linguagem para estilos, com ela você pode definir o layout de documentos HTML. Por exemplo: CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais, tudo isso você verá no decorrer do curso. Qual a vantagem de usar CSS? Simples: você pode facilmente alterar todo o layout de um grande site sem precisar ficar alterando página por página. Com CSS, você tem maior controle do layout e realiza alterações bastante precisas. Atualmente existem técnicas altamente avançadas e sofisticadas de criação de sites, utilizando este recurso. O código CSS: É parecido com o HTML, bastante simples de entender o seu funcionamento. Veja abaixo um modelo de código CSS. Seletor {propriedade: valor} Seletor: aqui você diz em qual tag HTML será aplicada a propriedade. Ex: body (corpo) ou p (parágrafo); Propriedade: a propriedade da tag a ser alterada. Pode ser, por exemplo, a cor de fundo (background-color); Valor: o valor da propriedade a ser alterada. Poderia ser a cor de fundo que você deseja. Exemplo: vermelha (#FF0000). 1.3 JavaScript JavaScript é uma das linguagens de script mais populares na internet, e funciona nos principais navegadores, como Internet Explorer, Firefox, Chrome, Opera e Safari. Para que serve JavaScript? Veja suas principais funções e características: JavaScript foi concebido para adicionar interatividade a páginas HTML. JavaScript é diferente de Java. Java é uma linguagem de programação, enquanto JavaScript é uma linguagem de script. Reprodução proibida. Copyright NT Editora. Todos os direitos reservados. 8 NT Editora

10 JavaScript é uma linguagem interpretada (significa que pode ser executada sem uma compilação preliminar). Todos podem usar o JavaScript sem comprar uma licença. 1.4 Imagens Os formatos de imagens mais utilizados na web são JPEG, PNG e GIF. E são estes os formatos que utilizaremos no decorrer do curso. Conheça as principais características de cada formato: 1. JPEG Joint Photographic Experts Group: é um formato bastante utilizado para exibição de imagens fotográficas, pois oferece uma boa redução do tamanho do arquivo, além de não ser facilmente perceptível a perda de qualidade na imagem. 2. GIF Graphics Interchange Format: um formato de imagens originado em 1987, utilizado para exibição de imagens fixas e animadas, que são conhecidas como Gifs animados. Um GIF possui apenas 8 Bits de cores, o que pode causar perda de qualidade em imagens complexas. 3. PNG: Formato Livre recomendado pela W3C. Oferece melhor qualidade, maior compressão e uso de transparência. 1.5 Conteúdos em Flash A utilização de Flash pode trazer diversas vantagens para um site. Vejamos as principais vantagens presentes neste tipo de conteúdo: Animações: Com o Flash, é possível criar e disponibilizar animações para diversos fins: humorísticos, instrucionais, dentre outros. Recursos de vídeo e áudio: Reprodução proibida. Copyright NT Editora. Todos os direitos reservados. Um recurso interessante do Flash é a possibilidade de trabalhar com vídeos e sons, o que possibilita a disponibilização de clipes musicais, vídeos de curta duração e até mesmo filmes em longa metragem. Um bom exemplo da aplicação deste recurso é o mundialmente conhecido Youtube. Jogos: Se desejar, você também pode disponibilizar jogos em seu site. Jogos em Flash não precisam ser instalados, basta carregar a página e começar a jogar. Criação de Websites com Dreamweaver 9

11 Elementos 3D: O Flash CS4 possibilitou nativamente o trabalho com 3D, as futuras versões do Flash prometem explorar a fundo este recurso. 1.6 Planejando um website Definição de responsabilidades: Na fase inicial de um projeto de site, deve ser decidido quem deverá tomar as decisões finais sobre os aspectos do site, caso contrário, você poderá enfrentar muitos problemas de conflito de interesses. Público-alvo: Estude cuidadosamente o público-alvo do site, isso deve influenciar nas decisões de design para que a mensagem possa chegar bem ao grupo em particular. Descrição de requisitos funcionais: É importante criar um bom documento que descreva as funções do site, mas atenção, este documento deve dizer o que o site faz, e não como ele faz. Preocupação com o usuário: Você deve especificar de que forma o usuário encontrará a informação no site. Possibilidade de crescimento: A estrutura do site deve facilitar as futuras mudanças, que poderão servir para o seu crescimento. Os grandes problemas: Cuidado, seu site pode acabar enfrentando alguns problemas de usabilidade, como: desorganização, violação de convenções, pouca informação, redundância, irrelevância, inadequação e inconsistência. 1.7 Navegadores web Os principais navegadores web utilizados atualmente são: Internet Explorer, Firefox, Opera, Safari e Google Chrome. Internet Explorer O navegador mais utilizado no mundo vem integrado ao Windows desde a versão Windows 95 OSR2. A partir da versão 7, o Microsoft Internet Explorer teve seu nome alterado para Windows Internet Explorer. A versão 7 marcou uma drástica mudança na aparência do navegador e a versão 8 ofereceu alguns novos recursos, tais como: Reprodução proibida. Copyright NT Editora. Todos os direitos reservados. 10 NT Editora

12 Reprodução proibida. Copyright NT Editora. Todos os direitos reservados. Aceleradores; Navegação em modo privativo; Pesquisa instantânea; Novas preferências de segurança; Recuperação automática de falhas; Mozilla Firefox. Navegador multiplataforma desenvolvido pela Fundação Mozilla. O principal objetivo do Firefox é ser um navegador leve, seguro, intuitivo e altamente extensível. Destacou-se como alternativa ao Internet Explorer e reativou a disputa entre os navegadores mais utilizados após o marco de 100 milhões de downloads em 19 de outubro de Um elemento bastante útil deste navegador é a existência de extensões, que possibilitam aos usuários acesso a funcionalidades como: gerenciadores de mensagens, ferramentas para desenvolvedores, gerenciadores de downloads, e muitos outros. Google Chrome Navegador de código-fonte aberto, desenvolvido pela Google. A primeira versão beta foi lançada em 2 de dezembro de A primeira versão do Google Chrome passou nos testes Acid1 e Acid2, mas não no Acid3. No entanto, ele teve uma pontuação de 78%, que é superior, tanto ao Internet Explorer 7 quanto ao Firefox 3, mas inferior ao Opera. Em 21 de maio de 2009, foi lançada a versão final 2.0, com muitos recursos e mais de 300 erros corrigidos. Opera Desenvolvido pela companhia Opera Software, este navegador permite exibir sites, mandar e receber mensagens de , gerir contatos, bate-papo online de IRC, baixar arquivos via BitTorrent e ler feeds. O Opera pode ser utilizado no Microsoft Windows, Mac OS X, GNU/Linux, FreeBSD e Solaris. Este navegador é também bastante difundido em dispositivos móveis como celulares, smartphones, e aparelhos PDA. Versões do Opera estão disponíveis para aparelhos, usando os sistemas operacionais Symbian, Windows Mobile e Java ME. Também é o único navegador disponível para os videogames Nintendo DS e Wii. Safari Navegador padrão dos sistemas operacionais da Apple, também possui uma versão para Windows, possui uma interface bastante simples, o que na verdade é uma característica da maioria dos softwares desta empresa. As principais funções do Safari são: Navegação em abas; Bloqueador de pop-ups; Baixador de arquivos; Leitor de feeds. Acid1, Acid2 e Acid3: Teste de compatibilidade com padrões web. IRC: Protocolo de comunicação bastante utilizado na internet. Utilizado basicamente como bate- -papo e troca de arquivos. BitTorrent: Protocolo de rede que permite a descarga de arquivos, geralmente indexados em websites. Feeds: Distribuidores de informação, geralmente provenientes de sites de notícias e blogs escolhidos pelo usuário. Pop-ups: Uma página extra que se abre no navegador ao visitar uma página ou clicar em um link. Geralmente é utilizado para propaganda. Criação de Websites com Dreamweaver 11

13 Exercícios Parabéns, você finalizou esta lição! Agora responda às questões ao lado. Questão 01 Selecione a opção em que as Tags HTML estão corretas: a) <html></html>, (p)(/p),<body><(body)>; b) <html></html>, <p></p>,<body></body>; c) <html/><html>, <p/><p>,<body/><body>; d) <html></html\>, <p></p\>,<body></body\>. Questão 02 Selecione a opção em que as Tags HTML estão corretas: a) <html></html>,,,,,,,,,,(p)(/p),<body><(body)>; b) <html></html>, <p></p>,<body></body>; c) <html/><html>, <p/><p>,<body/><body>; d) <html></html\>, <p></p\>,<body></body\>. Questão 03 Selecione a opção que define corretamente a funcionalidade do CSS: a) pode ser utilizado para criar sites sem a utilização de HTML ou qualquer outra linguagem; b) não serve para alterar layout de um site; c) controla somente cores, não é possível alterar fontes e outros elementos. d) é uma linguagem para estilos, com ela você pode definir o layout de documentos HTML. Questão 04 Lembra-se da mulher giganta? Supondo que seja possível aplicar CSS em uma pessoa, selecione abaixo o código que colocaria uma máscara verde em nossa amiga. a) quadril{tamanho:5km}. b) pernas{comprimento:3cm}. c) rosto{disfarce:máscara cor: verde}. d) rosto{disfarce:bigode cor:laranja}. Questão 05 Selecione abaixo a opção que melhor descreve a funcionalidade do JavaScript: a) definir layout, fontes e cores de páginas da internet; b) adicionar interatividade a páginas da internet; c) criar músicas, vídeos e jogos; d) reduzir as possibilidades de navegação de um site. Questão 06 Quais das extensões abaixo são extensões de imagens? a) PDF, PHP e SWF. b) DOC, PNG e JPG. Reprodução proibida. Copyright NT Editora. Todos os direitos reservados. 12 NT Editora

14 c) GIF, JPG e HTML. d) PNG, JPG e GIF. Questão 07 Quais das características abaixo melhor descrevem o tipo de imagem GIF? a) Formato para exibição de imagens fotográficas de alta qualidade. b) Oferece melhor qualidade, melhor compressão e o uso de transparência. c) Formato utilizado para exibição de imagens fixas e animadas, que são conhecidas como gifs animados. d) Formato de baixa qualidade sem possibilidade de animação. Questão 08 Que tipo de conteúdo é eficiente para adicionar interatividades de vídeo, áudio, sons, jogos e objetos 3D a um site? a) JavaScript. b) CSS. c) HTML. d) Flash. Questão 09 Quanto à possibilidade de crescimento de um site, é importante: a) facilitar futuras alterações, o que permite um melhor crescimento do site; b) criar um site bagunçado e difícil de atualizar; c) criar um site grande com muito espaço vazio para posteriormente adicionar nestes espaços o conteúdo desejado; d) dificultar ao máximo a atualização do site, para que da próxima vez seja feito um novo da estaca zero. Reprodução proibida. Copyright NT Editora. Todos os direitos reservados. Questão 10 Quanto ao navegador Mozilla Firefox, é correto afirmar: a) criado pela Microsoft e não possui muitos usuários; b) criado pela Fundação Mozilla, objetiva ser um navegador leve, seguro, intuitivo e altamente extensível; c) é um navegador bastante utilizado, mas não possui recursos eficientes como o uso de extensões; d) é o único navegador disponível para uso em computadores da Apple. Criação de Websites com Dreamweaver 13