Ferramenta para design de web site Macromedia Dreamweaver Fábio Fernandes

Transcrição

1 Ferramenta para design de web site Macromedia Dreamweaver Fábio Fernandes Em Abril de 2005, as duas maiores gigantes em desenvolvimento de software de web, gráfico e multimídia design se juntaram: a Adobe Systems adquiriu a Macromedia, sua maior competidora. Com isso, o que antes nos referíamos como produtos da Adobe e produtos da Macromedia, estaremos em breve nos referindo como produtos de uma mesma empresa. Leia mais sobre a fusão das duas empresas no link abaixo: A ferramenta que vem liderando o mercado de web design tem sido o Dreamweaver, criado pela Macromedia. No entanto, os competidores não podiam deixar por menos e, com isso, outros softwares surgiram. Mesmo assim, nenhum deles tem a mesma presença no mercado como o Dreamweaver. Alguns exemplos de softwares criados por grandes competidores são: - GoLive by Adobe. - FrontPage by Microsoft. Há outros menos populares que nunca conseguiram uma presença significativa no mercado, não justificando que sejam aqui explorados. Neste módulo, iremos focar no Dreamweaver. A versão atual é MX 2004, no entanto, a Macromedia já anunciou que o lançamento da versão 8.0 será em breve. Caso você não tenha Dreamweaver instalado em seu computador, pode fazer o download da versão teste gratuitamente, válida por trinta dias, através do link abaixo: Dessa forma, você poderá familiarizar-se com a ferramenta - caso já não a conheça - e acompanhar as imagens incluídas neste módulo, as quais lhe auxiliarão a conhecer o básico do Dreamweaver. Você poderá começar a criação do seu primeiro site de e-learning ou, pelo menos, a sua estrutura básica. 1

2 Um tour do conhecimento básico de Dreamweaver MX Interface A interface do Dreamweaver é composta por cinco áreas principais: - Janela do documento (document window). - Barra de ferramentas (insert bar). - Grupos de painéis (panel groups). - Selecionador de tag (tag selector). - Inspetor de propriedade (property inspector). 2

3 Alterando a visão da interface Você tem a opção de trabalhar com o Dreamweaver através da visão do layout (para os novatos em web design), do código (para os experts em programação) ou uma combinação dos dois (para os usuários já familiarizados com o software). A figura abaixo representa a visão dividida, metade layout (região inferior) e a outra metade código (região superior). Alterando o tamanho da janela Você pode alterar o tamanho da janela de acordo com o tamanho que você espera ser o utilizado pelos seus usuários. Esse comando encontra-se na parte baixa da janela do documento. 3

4 Barra de ferramenta Neste local, você terá acesso às ferramentas mais utilizadas do Dreamweaver. Elas também podem ser acessadas através do menu principal, localizado logo acima da barra de ferramenta. Inspetor de propriedade Esta área demonstra as propriedades de cada ferramenta quando ela está sendo utilizada. Assim, as opções desta janela alteram-se de acordo com o item selecionado pelo usuário. Exemplo: imagem, tabela, texto etc.. Selecionador de tag (HTML): Através desta área, você pode selecionar tags do seu código para editá-lo (copiar, colar e apagar). 4

5 Grupos de painéis O usuário tem a flexibilidade de costumizar os painéis que aparecem nesta área, assim como a ordem em que aparecem. Juntamente com a barra de ferramenta e o inspetor de propriedade, esta é uma das áreas mais acessadas pelo usuário. As setas pretas permitem que você expanda ou comprima os painéis, de forma que somente os itens que estão sendo utilizados fiquem aparentes. Painel de arquivos Nesta janela, você poderá gerenciar os arquivos de seu site. A utilização desse painel é fundamental para que o site não tenha links ou imagens quebradas. Mover arquivos, deletar, copiar ou alterar nomes de arquivos torna-se fácil nesse painel, pois o Dreamweaver encarrega-se de atualizar qualquer link relacionado com o arquivo alterado. 5

6 Painel de histórico O Dreamweaver permite que o usuário volte nas mais recentes mudanças feitas no arquivo em aberto. Esse painel proporciona uma identificação fácil de quais e/ou quantas ações deve-se retornar para que chegue ao ponto desejado. O usuário pode definir quantas ações gostaria que fossem gravadas nesse painel através da janela de preferências. Conclui-se aqui a lista dos elementos básicos necessários para que você tenha um entendimento geral das ferramentas e área de trabalho do Dreamweaver. Após esta breve introdução ao Dreamweaver, iremos explorar algumas das ferramentas mais utilizadas para que você possa construir o seu site de forma apropriada. Tabelas A tabela representa uma das formas mais tradicionais como auxílio à formatação do layout dos elementos na página. Uma outra forma mais recente para o layout dos elementos na página tem sido através do uso de Estilo (Style Sheet), em que o atributo de posicionamento ajuda na criação do layout. Neste módulo, utilizaremos tabelas e tiraremos proveito das facilidades que o Dreamweaver proporciona com esse recurso. 6 Propriedades da tabela - Borda Determina a espessura da borda em volta da tabela e das células. - Cell Padding (Cell Pad) Determina o espaço mínimo entre os elementos dentro da célula e a parede interna da célula. - Cell Spacing (Cell Space) Determina o espaçamento entre as células de uma tabela. - Alinhamento Pode ser horizontal ou vertical. Determina como o conteúdo será alinhado dentro da célula.

7 Criando tabelas Ao clicar no ícone da tabela na barra de ferramenta, aparecerá a janela para criação da tabela em que você determina a sua estrutura. Todos os itens definidos nessa janela podem ser alterados após a criação da tabela através do inspetor de propriedades. Basta selecionar a tabela no documento para que apareçam suas propriedades. Estrutura do design da página Uma das formas de layout mais utilizadas é da navegação na esquerda. O uso de tabela auxilia na estruturação da página, de forma que o design exibido seja o mesmo, independente do browser ou resolução da tela que o usuário utilize. 7

8 Nested tables É definido pela ação de inserir uma tabela dentro da outra. Essa técnica de layout permite maior flexibilidade de posicionamento dos elementos dentro de uma tabela. Desta forma, podemos considerar que em uma página, você terá uma tabela principal que define as áreas principais do layout da página e, dentro de cada célula da tabela principal, podese possivelmente ter outras tabelas trabalhando o layout dos elementos de cada área da página. Tabelas e itens de interface Devemos tirar proveito das várias opções proporcionadas pelo uso de tabela para inserirmos os elementos que compõem a interface do site. Como o exemplo da figura abaixo, na qual três imagens formam uma maneira de navegação através do uso de imagem dentro de uma célula e outra como imagem de fundo da tabela. Permitindo que as palavras sejam inseridas como texto em HTML ao invés de imagens. Baseado nos conceitos de design instrucional, design de interface e com o tour básico do Dreamweaver apresentados, você já pode começar a se aventurar, criando a estrutura básica do seu site de e-learning. 8 Lembre-se de sempre levar em consideração o perfil do usuário de seu site. Baseado nessas informações, você decidirá itens como: dimensão do design (resolução do monitor do usuário), tecnologia a ser utilizada no desenvolvimento do site (HTML, JavaScript, Flash etc.).

9 A Macromedia vem liderando o mercado de web design com o Dreamweaver, lançado como uma ferramenta para auxiliar àqueles que não se julgam programadores, mas têm um grande senso de design e conhecimento suficiente em tecnologia para lidar com um programa que oferece interface WYSIWYG (What You See Is What You Get). Isso tornou-se a grande chamada de marketing para a venda do Dreamweaver. Usuários criariam web sites através da interface, ao invés do back end (código). Com isso, a Macromedia abriu o mercado de web design para um público muito maior. O que de certa forma acabou causando um impacto nos profissionais de web. O exemplo mais comum para ilustrar esta tendência foi o chamado garage shops. Pessoas que nunca tinham criado um site descobriram que com a ajuda do Dreamweaver, em pouco tempo poderiam criar sites com funcionalidades além do HTML básico, mas infelizmente muitas dessas pessoas não tinham o conhecimento e/ou treinamento na parte de design de interface. No entanto, nada as impediu que abrissem micro empresas baseadas na própria casa oferecendo serviços de web design. Isso resultou na criação de web sites que não seguem a nenhum conceito de design, mas que nada podemos fazer para impedir que elas existam! Veja alguns exemplos abaixo: HTML - Sigla para Hypertext Markup Language. Código utilizado para transformar qualquer documento comum em documento accessível a distância pela rede mundial (World Wide Web / WWW) e navegável por meio das ferramentas de busca de informações na Internet (browser). Hipertexto - Texto organizado em forma de rede de itens ou módulos de informação (node) interligados entre si (link), permitindo ao usuário navegar, seguindo sua própria seqüência de estudo (user control). Browser - Software projetado para facilitar a busca, o acesso e a leitura de documentos eletrônicos. Exemplos de browsers muito utilizados incluem: Internet Explorer, FireFox, Netscape e Mozilla. Conecte-se W3C (World Wide Web Consortium) apresenta especificações, guidelines, software e ferramentas para o desenvolvimento de aplicativos para web de forma que utilize o máximo de sua potência. Web Monkey Site com vários tutoriais em desenvolvimento de web sites para níveis de usuários diferentes. 9

10 Palavras-chaves Web Design HTML Internet Layout - Evans, Joyce J. (2004). Dreamweaver MX 2004 Complete Course. Wiley Publishing, Inc. - Mohler, James and Bowen, Kyle (2004). Exploring Dreamweaver MX Delmar Learning. 10

11 11