FACULDADE DO LITORAL SUL PAULISTA – FALS
CHRISTIANE MILANI DAS CHAGAS
FERRAMENTAS DE DESENVOLVIMENTO WEB
PHOTOSHOP E DREAMWEAVER
PRAIA GRANDE
2010
1
CHRISTIANE MILANI DAS CHAGAS
FERRAMENTAS DE DESENVOLVIMENTO WEB
PHOTOSHOP E DREAMWEAVER
Trabalho de conclusão de curso, Faculdade do
Litoral Sul Paulista - FALS, sob orientação do
Prof. Paulo Candido.
PRAIA GRANDE
2010
2
CHRISTIANE MILANI DAS CHAGAS
FERRAMENTAS DE DESENVOLVIMENTO WEB
PHOTOSHOP E DREAMWEAVER
Trabalho de conclusão de curso, Faculdade do
Litoral Sul Paulista - FALS, sob orientação do
Prof. Paulo Candido.
AVALIAÇÃO:_________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
NOTA: ____(____________)
________________, ___de____________de______.
Local
data
3
RESUMO
Photoshop é um software de edição de imagens, é um dos produtos mais famosos
da Adobe. O software é muito utilizado pelas suas ferramentas surpreendentes. HÁ
centenas de pincéis incríveis disponíveis na internet que você pode baixá-los
facilmente. Não só de edição de fotos, você também pode criar imagens e
desenhos utilizando este software. Existem Muitas versões disponíveis e você pode
comprá-los facilmente. Este é o melhor software de edição de fotos. Dreamweaver
é um software de edição de sites. Permite que o desenvolvedor trabalhe com texto,
imagens e outros elementos de página da web. Dreamweaver é mais do que
apenas uma ferramenta para layout de páginas web e desenvolvimento de
aplicativos - também é uma solução completa para a construção de web sites e
manutenção. O Dreamweaver fornece um rico conjunto de recursos em um único
programa capaz de lidar com os mais sofisticados e exigentes web design e
projetos de desenvolvimento - a partir de uma simples página web com um site de
comércio eletrônico de grande porte. Além de tornar mais fácil para criar e editar
páginas web múltiplos, Dreamweaver inclui recursos poderosos para ajudar os
desenvolvedores web gerenciar todos os arquivos relacionados a um site, postar os
sites para um servidor web remoto, e manter os arquivos locais e arquivos no
servidor remoto sincronizado.Você não precisa usar um programa para criação de
páginas web e, em seguida, uma série de utilitários separados para gerenciar
arquivos e transferir arquivos para o servidor web, o Dreamweaver faz tudo.
PALAVRAS CHAVES: Editor de imagem, Editor HTML e Ferramentas de edição.
4
ABSTRACT
Photoshop is an image editing software. It is one of the most famous products from
Adobe. The software is widely used for its amazing features. you can totally
transform your images. There are also resource you can use to add your own
pictures on the picture. There are hundreds of amazing brushes available on the
Internet you can download them easily. Not only photo editing, you can also create
images and designs using this software. There are many versions available and you
can buy them easily.This is the best photo editing software.Dreamweaver is an
editing software sites. Allows the developer to work with text, images and other
elements of web page. Dreamweaver is more than just a tool for page layout and
web application development - is also a complete solution for building and
maintaining web sites. Dreamweaver provides a rich set of features into a single
program that can handle the most demanding and sophisticated web design and
development projects - from a simple web page with an e-commerce site
large.Besides making it easy to create and edit multiple web pages, Dreamweaver
includes powerful features to help web developers to manage all files related to a
site, post the sites to a remote web server, and keep the local files and files on
remote server sincronizado.Você not need to use a program for creating web pages
and then a series of separate utilities for managing files and transferring files to the
web server, Dreamweaver does it all.
KEYWORDS TOOL: Image Edit, HTML Edit, Edit Tool.
5
SUMÁRIO
1.
INTRODUÇÃO ................................................................................................................ 13
2.
PHOTOSHOP................................................................................................................... 14
2.1
INTERFACE ............................................................................................................ 15
2.1.1.
Barra de Menu .................................................................................................... 16
2.1.1.1.
Barra de menus – File.................................................................................. 17
2.1.1.2.
Barra de menus – Edit ................................................................................. 19
2.1.1.3.
Barra de menus – Image .............................................................................. 20
2.1.1.4.
Barra de menus – Layers ............................................................................. 24
2.1.1.5.
Barra de menus – Select .............................................................................. 24
2.1.1.6.
Barra de menus – Filter ............................................................................... 25
2.1.1.7.
Barra de menus – View ............................................................................... 29
2.1.1.8.
Barra de menus – Window .......................................................................... 30
2.1.1.9.
Barra de menus – Help ................................................................................ 31
2.1.2.
Caixa de ferramentas .......................................................................................... 32
2.1.2.1.
Ferramentas de seleção................................................................................ 32
2.1.2.1.1. Rectangular Marquee Tool .................................................................... 32
2.1.2.1.2. Move Tool.............................................................................................. 33
2.1.2.1.3. Polygon Lasso Tool ............................................................................... 33
2.1.2.1.4. Magic Wand Tool .................................................................................. 34
2.1.2.1.5. Crop Tool ............................................................................................... 34
2.1.2.1.6. Slice Tool ............................................................................................... 34
2.1.2.2.
Aprimoramento das ferramentas ................................................................. 35
2.1.2.2.1. Healing Brush Tool ................................................................................ 35
2.1.2.2.2. Brush Tool ............................................................................................. 35
2.1.2.2.3. Clone Stamp Tool .................................................................................. 36
2.1.2.2.4. Ferramenta Pincel História .................................................................... 36
2.1.2.2.5. Eraser Tool ............................................................................................. 36
2.1.2.2.6. Gradiente Tool ....................................................................................... 37
2.1.2.2.7. Blur Tool ................................................................................................ 37
2.1.2.2.8. Dodge Tool ............................................................................................ 37
2.1.2.3.
Ferramentas Vetor ....................................................................................... 38
2.1.2.3.1. Path Seletion Tool .................................................................................. 38
2.1.2.3.3. Pen Tool ................................................................................................. 38
2.1.2.3.4. Retangle Tool ......................................................................................... 39
6
2.1.2.3.5. Notas Tool.............................................................................................. 39
2.1.2.3.6. Eyedropper Tool (I) ............................................................................... 40
2.1.2.4.
Ferramentas de navegação .......................................................................... 40
2.1.2.4.1. Ferramenta Mão ..................................................................................... 40
2.1.2.4.2. Zoom Tool ............................................................................................. 41
2.1.2.5.
Cor Ferramentas .......................................................................................... 41
2.1.3.
Área de imagem .................................................................................................. 42
2.1.4.
Paletas ................................................................................................................. 43
2.2
VERSÕES ................................................................................................................ 45
2.1.5.
Versão 1.0.7 lançado em fevereiro de 1990. ...................................................... 45
2.1.6.
Versão 2.0.1 lançado em dezembro de 1991. ..................................................... 46
2.1.7.
Versão 2.5 lançado em fevereiro de 1993. ......................................................... 46
2.1.8.
Versão 3.0 lançado em Setembro de 1994. ........................................................ 47
2.1.9.
Versão 4.0 lançado em Novembro de 1996. ....................................................... 47
2.1.10.
Versão 5.0 lançado em Maio de 1998. ............................................................ 48
2.1.11.
Versão 5.5 lançado em Julho de 1999. ........................................................... 48
2.1.12.
Versão 6.0 lançado em Outubro de 2000. ....................................................... 49
2.1.13.
Versão 7.0 lançado em Abril de 2002.
2.1.14.
Versão CS 8.0 lançado em Outubro de 2003. ................................................. 50
2.1.15.
Versão CS2 9.0 lançado em Abril de 2005. .................................................... 51
2.1.16.
Versão CS3 10.0 lançado em Dezembro de 2006. ......................................... 52
2.1.17.
Versão CS4 11.0 lançado em Outubro de 2008. ............................................. 53
2.1.18.
Versão CS5 12.0 lançado em Abril de 2010. .................................................. 54
2.3
................................................... 49
MODOS DE COR .................................................................................................... 54
2.1.19.
RGB ................................................................................................................ 55
2.1.20.
CMYK ............................................................................................................ 55
2.1.21.
Lab Color ........................................................................................................ 55
2.1.22.
Bitmap ............................................................................................................. 56
2.4
FORMATOS DE ARQUIVOS ................................................................................ 56
2.1.23.
BMP ................................................................................................................ 56
2.1.24.
GIF .................................................................................................................. 56
2.1.25.
JPG .................................................................................................................. 56
2.1.26.
PNG ................................................................................................................ 56
2.1.27.
PDF ................................................................................................................. 57
2.1.28.
TIFF ................................................................................................................ 57
2.1.29.
EPS.................................................................................................................. 57
7
2.1.30.
PCX ................................................................................................................. 57
2.1.31.
PICT ................................................................................................................ 57
2.1.32.
PIXAR ............................................................................................................ 57
2.1.33.
TGA ................................................................................................................ 58
2.1.34.
DCS ................................................................................................................. 58
2.5
VANTAGEM E DESVANTAGEM DE SE USAR O PHOTOSHOP .................... 58
2.1.35.
Vantagem ........................................................................................................ 58
2.1.36.
Desvantagem ................................................................................................... 58
2.6
3.
TECLAS DE ATALHO DO PHOTOSHOP ............................................................ 59
DREAMWEAVER........................................................................................................... 61
3.1
INTERFACE ............................................................................................................ 62
3.1.1
Interface Inicial ................................................................................................... 62
3.1.2
Área de trabalho.................................................................................................. 63
3.1.2.1
Barra de Ferramentas de Documento .......................................................... 64
3.1.3
Menu Arquivo .................................................................................................... 67
3.1.4
Grupo de Painéis ................................................................................................. 68
3.1.4.1
Painel Design............................................................................................... 69
3.1.4.2
Painel Código .............................................................................................. 69
3.1.4.3
Painel Aplicação .......................................................................................... 70
3.1.4.4
Painel Tag Inspector .................................................................................... 71
3.1.4.5
Painel Arquivos ........................................................................................... 71
3.1.5
Barra de Status .................................................................................................... 72
3.1.6
Barra de Ferramentas Coding ............................................................................. 73
3.1.7
Barra de Ferramentas Estilo processamento ....................................................... 74
3.1.8
Barra Insert ......................................................................................................... 76
3.1.8.1
Guia Common ............................................................................................. 77
3.1.8.2
Guia Layout ................................................................................................. 89
3.1.8.3
Guia Forms .................................................................................................. 90
3.1.8.4
Guia Text ..................................................................................................... 95
3.1.8.5
Guia Favorites ............................................................................................. 98
3.2
PROPRIEDADES .................................................................................................... 99
3.2.1
Propriedades de Texto ........................................................................................ 99
3.2.2
Propriedades de Tabela ....................................................................................... 99
3.2.3
Propriedades de Página ..................................................................................... 100
3.2.4
Propriedades de Imagem .................................................................................. 101
3.2.5
Propriedades do Flash ....................................................................................... 103
3.3
INTEGRAÇÃO ...................................................................................................... 104
8
3.4
VERSÕES .............................................................................................................. 105
3.4.1
Processo de evolução recente ........................................................................... 106
3.4.1.1
Dreamweaver MX ..................................................................................... 106
3.4.1.2
Dreamweaver 8 ......................................................................................... 106
3.4.1.3
Dreamweaver CS3..................................................................................... 106
3.4.1.4
Dreamweaver CS4..................................................................................... 107
3.4.1.5
Dreamweaver CS5..................................................................................... 108
3.5
3.5.1
Auto-completar ................................................................................................. 108
3.5.2
Gerenciamento de sites ..................................................................................... 108
3.5.3
Find/Replace robusto ........................................................................................ 109
3.6
4.
VANTAGENS DE SE USAR O DREAMWEAVER ............................................ 108
EXTENSÕES DO DREAMWEAVER .................................................................. 109
UTILIZAÇÃO DAS FERRAMENTAS PARA WEB EM UM SISTEMA .................. 113
4.1
CADASTRO DE CLIENTES ................................................................................ 113
4.2
Cadastro de Venda .................................................................................................. 114
4.3
Busca de clientes .................................................................................................... 115
4.4
Lista de ordem de serviço ....................................................................................... 116
4.5
Notas fiscais ............................................................................................................ 116
4.6
Débitos em aberto ................................................................................................... 117
4.7
Relatorio de vendas do dia...................................................................................... 117
5.
CONCLUSÃO ................................................................................................................ 119
6.
REFERÊNCIAS BIBLIGRAFICAS .............................................................................. 120
7.
ANEXOS ........................................................................................................................ 123
7.1
CÓDIGO DAS TELAS DO SISTEMA ................................................................. 123
9
LISTA DE ILUSTRAÇÃO
Figura 1 - Área de trabalho do Photoshop ................................................................................ 16
Figura 2 - Barra de Menu ......................................................................................................... 16
Figura 3 - Menu File ................................................................................................................. 17
Figura 4 - continuação do Menu File ....................................................................................... 18
Figura 5 - Menu Edit ................................................................................................................ 19
Figura 7 - Menu Image, parte Adjust ....................................................................................... 21
Figura 8 - Janela de configuração de Brilho e Saturação ......................................................... 23
Figura 9 - Menu Layer .............................................................................................................. 24
Figura 10 - Menu Select ........................................................................................................... 24
Figura 11 - Menu Filter ............................................................................................................ 25
Figura 12 - Menu View ............................................................................................................ 29
Figura 13 - Menu Window ....................................................................................................... 30
Figura 14 - Menu Help ............................................................................................................. 31
Figura 15 - Ferramentas de Seleção ......................................................................................... 32
Figura 16 - Ferramenta Retangular Marquee Tool ................................................................... 33
Figura 17 - Ferramenta Move Tool .......................................................................................... 33
Figura 18 - Ferramenta Polygon Lasso Tool ............................................................................ 33
Figura 19 - Ferramenta Magic Wand Tool ............................................................................... 34
Figura 20 - Ferramenta Crop Tool ............................................................................................ 34
Figura 21 - Ferramenta Slice Tool ............................................................................................ 34
Figura 22 - Ferramentas de Aprimoramento ............................................................................ 35
Figura 23 - Healing Brush Tool................................................................................................ 35
Figura 24 - Brush Tool ............................................................................................................. 35
Figura 25 - Clone Stamp Tool .................................................................................................. 36
Figura 26 - Ferramenta Pincel História .................................................................................... 36
Figura 27 - Eraser Tool ............................................................................................................. 36
Figura 28 - Gradiente Tool ....................................................................................................... 37
Figura 29 - Blur Tool ................................................................................................................ 37
Figura 30 - Dodge Tool ............................................................................................................ 37
Figura 31 - Ferramentas Vetor ................................................................................................. 38
Figura 32 - Ferramenta Seletion Tool....................................................................................... 38
Figura 33 - Horizontal Type Tool............................................................................................. 38
Figura 34 - Ferramenta Pen Tool .............................................................................................. 39
Figura 35 - Ferramenta Retangle Tool ..................................................................................... 39
Figura 36 - Ferramenta de Notas .............................................................................................. 39
Figura 37 - Ferramenta Eyedropper Tool ................................................................................. 40
Figura 38 - Ferramentas de Navegação .................................................................................... 40
Figura 39 - Ferramenta Mão ..................................................................................................... 41
Figura 40 - Ferramenta Zoom Tool .......................................................................................... 41
Figura 41 - Ferramenta de Cor ................................................................................................. 41
Figura 42 - Área de criação de Imagem ................................................................................... 42
Figura 43 - Opção New do Menu File ...................................................................................... 43
Figura 44 - Janela de configuração de um arquivo novo .......................................................... 43
Figura 45 - Paletas .................................................................................................................... 44
Figura 46 - Aspectos das Paletas .............................................................................................. 44
Figura 47 - Tela de Abertura da versão 1.0.7 ........................................................................... 45
Figura 48 - Tela de Abertura da versão 2.0.1 ........................................................................... 46
Figura 49 - Tela de Abertura da versão 2.5 .............................................................................. 46
10
Figura 50 - Tela de Abertura da versão 3.0 .............................................................................. 47
Figura 51 - Tela de Abertura da versão 4.0 .............................................................................. 47
Figura 52 - Tela de Abertura da versão 5.0 .............................................................................. 48
Figura 53 - Tela de Abertura da versão 5.5 .............................................................................. 48
Figura 54 - Tela de Abertura da versão 6.0 .............................................................................. 49
Figura 55 - Tela de Abertura da versão 7.0 .............................................................................. 49
Figura 56 - Tela de Abertura da versão CS 8.0 ........................................................................ 50
Figura 57 - Tela de Abertura da versão CS2 9.0 ...................................................................... 51
Figura 58 - Tela de Abertura da versão CS3 10.0 .................................................................... 52
Figura 59 - Tela de Abertura da versão CS4 11.0 .................................................................... 53
Figura 60 - Tela de Abertura da versão CS5 12.0 .................................................................... 54
Figura 61 - Janela Inicial do Dreamweaver .............................................................................. 62
Figura 62 - Área de trabalho do Dreamweaver ........................................................................ 63
Figura 63 - Barra da área de elaboração do código .................................................................. 64
Figura 64 - Botão Code, mostra apenas o código interno da página ........................................ 64
Figura 65 - Botão Split, mostra os dois modos de visualização, Códigos e Designer ............. 65
Figura 66 - Botão Design, mostra apenas o modo Designer .................................................... 65
Figura 67 - Menu Arquivo ........................................................................................................ 67
Figura 68 - Grupo de Painéis .................................................................................................... 68
Figura 69 - Painel Disign .......................................................................................................... 69
Figura 70 - Painel Código......................................................................................................... 69
Figura 71 - Painel Aplicação .................................................................................................... 70
Figura 72 - Painel Tag .............................................................................................................. 71
Figura 73 - Painel Arquivo ....................................................................................................... 71
Figura 74 - Barra de Status ....................................................................................................... 72
Figura 75 - Barra de Ferramentas Coding ................................................................................ 74
Figura 76 - Barra de Ferramentas Estilo processamento .......................................................... 75
Figura 77 - Barra Insert ............................................................................................................ 76
Figura 78 - Janela de configuração de Hiperlink ...................................................................... 77
Figura 79 - Janela de configuração de Email Link ................................................................... 77
Figura 80 - Janela de configuração de Ancora ......................................................................... 78
Figura 81 - Janela de configuração de Tabela .......................................................................... 78
Figura 82 - Opções da Ferramenta Imagem ............................................................................. 79
Figura 83 - Janela de configuração de Image Placeholder ....................................................... 80
Figura 84 - Janela de configuração de Rollover Image ............................................................ 80
Figura 85 - Janela de configuração de Fireworks HTML ........................................................ 80
Figura 86 - Janela de configuração de Vavigation Bar ............................................................ 81
Figura 87 - Opções da Ferramenta Média ................................................................................ 82
Figura 88 - Janela de configuração de Flash Button. ............................................................... 82
Figura 89 - Janela de configuração de Flash Text .................................................................... 83
Figura 90 - Janela de configuração de Parameter ..................................................................... 83
Figura 91 - Janela de configuração de Data ............................................................................. 84
Figura 92 - Opções da Ferramenta Head .................................................................................. 84
Figura 93 - Janela de configuração de Meta ............................................................................. 85
Figura 94 - Janela de configuração de Keywords..................................................................... 85
Figura 95 - Janela de configuração de Refresh......................................................................... 85
Figura 96 - Janela de configuração de Base ............................................................................. 86
Figura 97 - Janela de configuração de Link ............................................................................. 86
Figura 98 - Opções da Ferramenta Scripts ............................................................................... 86
Figura 99 - Janela de Salvar novo Template ............................................................................ 87
11
Figura 100 - Janela de configuração de Região ........................................................................ 88
Figura 101 - Janela de configuração de Opções de Região ...................................................... 88
Figura 102 - Aba de Ferramentas de Layout ............................................................................ 89
Figura 103 - Figura de divisão de Frames ................................................................................ 90
Figura 104 - Aba de Ferramentas Forms .................................................................................. 90
Figura 105 - Configuração de Propriedades de Forms ............................................................. 91
Figura 106 - Caixa de TextField ............................................................................................... 91
Figura 107 - Configuração de Propriedades de textField ......................................................... 91
Figura 108 - Configuração de Propriedades de HiddenField ................................................... 91
Figura 109 - Caixa de TexArea ................................................................................................ 92
Figura 110 - Configuração de Propriedades de TexArea ......................................................... 92
Figura 111 - Configuração de Propriedades de CheckBox ...................................................... 92
Figura 112 - Configuração de Propriedades de RadioButton ................................................... 92
Figura 113 - Janela de configurações de Radio Group ............................................................. 93
Figura 114 - Caixa de List/menu .............................................................................................. 93
Figura 115 - Configuração de Propriedades de List/Menu – List Values ................................ 93
Figura 116 - Caixa de JumpMenu ............................................................................................ 94
Figura 117 - Caixa de FileField ................................................................................................ 94
Figura 118 - Caixa de Label ..................................................................................................... 94
Figura 119 - Aba de Ferramentas de Texto .............................................................................. 95
Figura 120 - Aba de Ferramentas Favoritos ............................................................................. 98
Figura 121 - Janela de configuração da Ferramenta Favoritos ................................................. 98
Figura 122 - Configuração de Propriedades de Texto .............................................................. 99
Figura 123 - Configuração de Propriedades de Tabela .......................................................... 100
Figura 124 - Configuração de Propriedades de Página .......................................................... 100
Figura 125 - Configuração de Propriedades de Imagem ........................................................ 101
Figura 126 - Ferramentas de Edição de Imagem .................................................................... 102
Figura 127 - Janela de Configuração de Brilho e Contraste ................................................... 102
Figura 128 - Janela de Configuração de Nitidez .................................................................... 103
Figura 129 - Configuração de Propriedades de Flash ............................................................ 103
Figura 130 - Botão de Edição do Fireworks ........................................................................... 104
Figura 131 - Programa de Edição de Imagem Fireworks ....................................................... 105
Figura 132 - Modo de Visualização das Extensões ................................................................ 109
Figura 133 - Tela de Cadastro de Clientes ............................................................................. 114
Figura 134 - Tela com os dados dos Clientes, podendo fazer alterações ............................... 114
Figura 135 - Tela de Cadastro de Vendas .............................................................................. 115
Figura 136 - Ferramenta de Busca .......................................................................................... 115
Figura 137 - Tela de Lista de Ordens de Serviços .................................................................. 116
Figura 138 - Tela de Nota Fiscal ............................................................................................ 117
Figura 139 - Tela de Débitos em Aberto ................................................................................ 117
Figura 140 - Tela de Relatórios de Vendas do Dia................................................................. 118
12
LISTA DE TABELAS
Tabela 1 - Teclas de Atalho do Menu File ............................................................................... 59
Tabela 2 - Teclas de Atalho do Menu Edit ............................................................................... 59
Tabela 3 - Teclas de Atalho do Menu Image............................................................................ 60
Tabela 4 - Teclas de Atalho do Menu Layers ........................................................................... 60
13
1. INTRODUÇÃO
Este trabalho foi elaborado para mostrar as principais funções dos editores
para Web que são: o Photoshop e o Dreamweaver.
O Photoshop é o principal editor de imagem que existe hoje no mercado e o
Dreamweaver é um dos maiores editores de sites para Web. Ambos são programas
pagos que pertencem a empresa Adobe, são de fácil utilização e possuem
ferramentas modernas. Ao longo deste trabalho iremos ver como é a área de
trabalho destes programas, onde ficam localizadas as ferramentas e quais são as
suas utilizações. Embora hoje no mercado existam vários editores free, eles não
possuem a quantidade de tarefas e ferramentas desses dois editores.
14
2. PHOTOSHOP
Photoshop é um software de edição de imagens desenvolvido pela Adobe
Systems. É considerado o líder no mercado dos editores de imagem.
Photoshop foi originalmente criado por dois irmãos Thomas Knoll e John
Knoll. Os dois irmãos tinham interesses comuns, tanto em fotografia e computação.
O seu desenvolvimento começou efetivamente em 1987. O projeto começou como
uma tese de doutorado, e os irmãos suspeitaram que pudessem ter algum retorno
financeiro e procuraram investidores no Vale do Silício, mas só ouviram não como
resposta. No início, os criadores do programa enfrentaram alguns obstáculos para
colocá-lo no mercado.
A tese era sobre o processamento de imagens digitais, e evoluiu primeiro
num pequeno conjunto de rotinas gráficas, e depois em um programa chamado
Display. Este cresceu em uma versão melhor caracterizada ImagePro nomeado em
1988, e finalmente o Photoshop 1.0 em 1989. A Adobe finalmente viu no programa
uma oportunidade e o licenciou em 1989. No dia 10 de fevereiro de 1990 lançou sua
primeira versão.
Bem, como qualquer programa de edição de imagem, você pode usar o
Photoshop para "alterar" as imagens, como fotos, ícones baixados, ou arte
digitalizada.
Alterar uma imagem inclui fazer coisas como mudar cores, alterar o
tamanho e a escala de uma imagem, ou colocar uma imagem "dentro" de outra.
A alteração inclui também as modificações técnicas, tais como alterar o
modo de compressão de imagem de um tipo para outro, ou alterando o número de
bits por pixel.
Mas, além de alterar as imagens, o Photoshop tem uma vasta gama de
ferramentas que ajudam a "criar" imagens a partir do zero.
Na web, muitas vezes você vai precisar fazer ícones personalizados,
botões, linhas, bolas ou a arte em texto. Photoshop faz de tudo isto excessivamente
fácil e divertido.
O Photoshop desenha em pixels e não em vetor.
O Photoshop está disponível em uma ampla variedade de plataformas,
desde o Mac para o Windows para UNIX. O Adobe Photoshop tem a interface mais
15
intuitiva, o mais completo conjunto de ferramentas, e os maiores número de livros de
referência ao redor.
Atualmente, o Photoshop é o software mais popular do mundo no
seguimento.
A sua ultima versão é o Photoshop CS5 (Creative Suite 5) correspondente à
décima segunda edição desde seu lançamento), disponível para os sistemas
operativos Microsoft Windows e Mac OS X. Pode ser rodado também no Linux.
Algumas versões anteriores foram lançadas também para IRIX, mas o suporte a esta
versão foi descontinuado após a versão 3.0.
2.1 INTERFACE
Adobe Photoshop é uma poderosa ferramenta para edição de fotografias e
gráficos. O primeiro passo para aprender a mexer com o Photoshop é se familiarizar
com a interface dela. A área de trabalho é composta por 5 componentes básicos.
São eles:
1) Barra de Menus - contém todas as opções disponíveis de Photoshop ;
2) Caixa de ferramentas - tem várias ferramentas para edição de imagem;
3) Opções Bar - definir as opções para a ferramenta selecionada no
momento;
4) Paletas - são vários painéis para controlar os diferentes aspectos do
projeto. Includes layers, channels, paths, history.;
5) Área de imagem - a imagem aberta no momento.
16
Figura 1 - Área de trabalho do Photoshop
2.1.1. Barra de Menu
Figura 2 - Barra de Menu
File – operações e preferências do programa;
Edit – operações de edição (copiar, cortar, colar...);
Image – opções e controle dos parâmetros de imagem;
Layer – operações com camadas (layers);
Select – operações com seleções definidas;
Filter – aplicação de filtros (transformações) em imagens;
View – opções de visualização;
Window – controle das janelas auxiliares e da barra de ferramentas;
Help – ajuda do Photoshop.
17
2.1.1.1.
Barra de menus – File
Neste menu, encontram-se os comandos que permitem abrir um novo
arquivo ou imagem, salvar, escanear, configurar impressão e preferências do
programa.
Figura 3 - Menu File
1-
New - abre uma nova janela;
Open - abre arquivo que já existe para editar seu conteúdo;
Open As - abre um arquivo cuja extensão está errada ou quando seu
nome não constar na lista apresentada na caixa do comando Open. Utiliza as
mesmas extensões do comando anterior.
2-
Close - fecha o arquivo que estiver ativo, sem encerrar o aplicativo. Se
houverem modificações que não foram salvas, abre-se a opção de salvá-las antes
de fechá-lo;
Save - salva o arquivo em disco atualizando-o caso não o tenha, será
pedido um nome através do mesmo comando Save As;
Save As - salva o arquivo com nome diferente do atual, permitindo
assim obter várias versões de um mesmo trabalho, ou mesmo nome em outro
diretório e/ou driver, ou ainda com extensões diferentes: *.PSD, *.PDD, *.JPG, *.TIF,
*.BMP, etc;
Save a copy - salva uma cópia da imagem exibida;
18
Revert - retorna a imagem ao estado que se encontrava antes de ser
gravada. Atenção ao usar este comando, pois ele é irreversível.
Figura 4 - continuação do Menu File
3-
Place - inserir imagens (EPS file, PDF file);
4-
Import - importar e exportar imagens;
5-
Automate - criar uma folha de contato, processar varias imagens em
lote (simplifição de comandos)
6-
File Info - informações de arquivo;
7-
Page Setup - configura página e imprime;
Print - remete a página para impressão;
8-
Preferences - configura ferramentas e utilitários e direções de cores;
9-
Adobe Online – serviços via on-line pelo site da Adobe;
10 - Aqui temos os últimos arquivos acessados;
11 - Exit - para finalizar o Photoshop.
19
2.1.1.2.
Barra de menus – Edit
Neste menu, estão os comandos que permitem a edição da imagem.
Figura 5 - Menu Edit
1-
Undo All - este comando desfaz a última operação realizada ou refaz a
operação que acabou de ser desfeita.
Atenção: só há um Undo/ Redo por operação.
2-
Cut - corta o item selecionado;
Copy - copia o item selecionado;
Paste - insere a imagem;
Paste Into - cola o objeto selecionado dentro de uma área selecionada;
Clear - Remover, limpar a área selecionada.
3-
Fill - Preenche a área selecionada com a cor, opacidade e modo
escolhido.
Stroke - Permite o preenchimento de uma borda ao redor da área
selecionada, como um contorno ou moldura.
4-
Free transform e Transform - Estes comandos permitem girar, torcer,
escalar e aplicar perspectiva a um objeto ou a uma imagem inteira.
5-
Define Padrão - Definir fundos especiais.
20
Importante: O padrão definido não é salvo automaticamente em nenhum
diretório.
Se você desejar criar uma biblioteca de padrões, crie um diretório e recorte a
área a ser definida como padrão (com o comando Crop ou ferramenta Crop) e salve
seu arquivo no diretório criado utilizando o comando Save As.
6-
Purge - Limpa todas as quatro opções ao mesmo tempo: Undo,
Clipboard, Pattern e Histories.
Está opção têm uma desvantagem, você perde o acesso ao que estiver
eliminado. Portanto, não deve eliminar o conteúdo do Clipbord se for preciso colar
mais tarde o que estiver nele. Além disso, depois de eliminar o buffer Undo, você
não poderá desfazer a ação imediatamente anterior a eliminação.
2.1.1.3.
Barra de menus – Image
6 - Menu Image, parte Mode
1-
Mode
Grayscale - Converte a imagem ativa para escala de cinzas, composta por 8
bits de informações por pixel e utiliza de 0 a 255 tons de cinza para simular a
graduação de cor. Ao pedir este comando surge uma caixa para sua confirmação:
Duotone - Utilizado para converter apenas imagens Grayscale em
monotones, duotones, tritones e quadritones. O monotone mistura a cor cinza
21
utilizando uma tinta que não seja a preta criando uma terceira cor; duotone, tritone e
quadritone fazem o mesmo processo utilizando duas, três ou quatro cores,
respectivamente.
Para escolher a cor, clique sobre a amostra de cor. Ao clicar no gráfico, será
determinada a curva da cor, principalmente a sua máxima. Para cores escuras não
use mais de 75%. O botão Save, salva o duotone utilizado no diretório escolhido;
enquanto o botão Load permite abrir as configurações de um duotone salvo.
RGB color - Converte a imagem para modo RGB, que reproduz 16,7
milhões de cores na tela utilizando apenas essas três cores: Red (vermelho), Green
(verde) e Blue (azul). As imagens RGB possuem três canais e 24 bits por pixel.
Somente os arquivos Bitmap não podem ser convertidos para RGB.
CMYK color - Converte a imagem par o modo CMYK, que utiliza as quatro
cores usadas na separação de cores no processo de impressão: C (cyan/ ciano), M
(mangenta), Y (yellow/ amarelo) e K (black / preto). As imagens CMYK possuem
quatro canais contendo 24 bits por pixel. Somente os arquivos Bitmap e Multichannel
não podem ser convertidos para este modo.
Lab color - Converte a imagem para o modo Lab, que utiliza três
componentes para representar as cores: L (Lightness / brilho), a (controla as cores
entre verde e mangenta) e b (controla as cores entre azul e amarelo). Este modo é
formado por três canais contendo 24 bits por pixel. Somente os arquivos Bitmap não
podem ser convertidos para este modo.
Figura 7 - Menu Image, parte Adjust
22
2-
Adjust - Algumas imagens necessitam de ajustes de brilho, contraste,
intensidade, saturação e etc. Os ajustes existentes são variados e em grande
número, portanto serão esclarecidos no decorrer deste treinamento.
Levels - Ajusta o brilho e o contraste da imagem através dos valores dos
meios tons, sem alterar drasticamente as sombras (pixel escuros) e os hightlights
(áreas claras). Permite especificar qual a área mais escura (conta-gotas preto), o
meio tom (conta-gotas cinza) e a área mais clara (conta gotas-branco).
Com essa caixa de diálogo, você pode ajustar rapidamente todos os tons
dentro de uma imagem, quer seja cores ou escala de cinza.
Para aplicar os mesmos ajustes em múltiplas imagens, dê um clique no
botão Save na caixa de diálogo Levels para salvar um arquivo contendo as
definições feitas. Dê um clique no botão Load para carregar essas definições de
volta para a caixa de diálogo a qualquer hora.
Auto Levels - aplica um ajuste automático.
Ao manter pressionada a tecla ALT, torna-se Options, onde será definida a
proporção de preto (Black Clip) e de branco (White Clip).
Ao pressionar ALT, o botão Cancel transforma-se em Reset, permitindo que
a caixa volte as suas configurações originais. O botão Save, salva as configurações
no diretório desejado e o botão Load, abre as configurações salvas.
Em Output altera-se o contraste da imagem, onde o triângulo preto
representa as áreas escuras; e o branco, as áreas claras.
Em Input Level altera-se o brilho da imagem, onde o triângulo preto
representa as áreas escuras; cinza, os meios tons; e o branco, as claras.
Color Balance - permite a mudança das misturas de cores na imagem,
define a parte da imagem que será alterada: Shadows, áreas escuras. Midtones, os
meios tons. Hightlights, as áreas claras. Movimente a seta em direção à cor que
precisa ser intensificada e afaste-a da que é necessário a redução. Defina também
qual canal de cor será alterado.
Brightness/Contrast - ajusta o brilho e o contraste da imagem ou seleção.
23
Figura 8 - Janela de configuração de Brilho e Saturação
Hue / saturation : ajusta as cores (matrizes), suas saturações e brilho.
Você pode alterar uma cor por vez, conforme o modo de cor da imagem.
Para imagens em RGB, altere R, G e B. Para imagens em CMY, altere C, M e Y. Em
Master, todas as cores são alteradas ao mesmo tempo.
Hue é a cor propriamente dita: Puxe a seta na direção da cor que precisa ser
intensificada, afastando a cor que está sendo reduzida.
Saturation é a saturação da cor, a sua pureza. Para direita, aumenta-se
saturação; para esquerda, diminui-se a saturação.
Lightness é o brilho da cor Clolorize - transforma a imagem em uma escala
da cor especificada em Hue.
Desaturate: tira a saturação das cores da imagem, deixando-a em escala de
cinza.
Replace color: modifica também a cor, a saturação da cor e o brilho da
imagem.
Selective color, Channel Mixer, Invert, Equalize, Treshold, Posterize,
Variations.
O comando Invert é freqüentemente confundido com o comando Inverse, o
qual reverte uma seleção.
O Comando Treshold transforma as imagens em áreas do preto e branco
sólido sem cinza.
O comando Variations permite ajustar imagens baseado em pequenas
miniaturas que mostram exatamente qual o efeito que as alterações terão.
24
2.1.1.4.
Barra de menus – Layers
Nesta caixa de menu, encontra-se opções de criação novas camadas para
imagens elaboradas, duplicar uma camada e até realizar ajustes nas camadas.
Figura 9 - Menu Layer
2.1.1.5.
Barra de menus – Select
As maiorias das Operações iniciam com uma seleção. Este comando
permite selecionar partes da imagem que não se tocam e você pode combinar
seleções de várias maneiras. Você pode também fazer vários modos - tais como
pintar sobre a área selecionada ou usar a ferramenta Pen para desenhar um
contorno preciso da área a ser selecionada. Você também pode salvar as seleções
para o futuro.
Figura 10 - Menu Select
25
1-
(All) - seleciona toda a área da tela;
(Deselect) - remove toda seleção ;
(Reselect) - retorna a seleção removida ;
(Ivert) - inverte a forma de seleção;
2-
(Color Range) - seleciona objetos pela faixa de cor;
3-
(Feather) - seleciona pela característica de área da imagem e
seleciona setores modificados;
4-
(Grow) - aumenta a área selecionada e seleciona áreas idênticas;
5-
(Transform Selection) - transforma uma seleção. Geralmente é difícil
entender o efeito dessas transformações em uma seleção sem experimentá-la.
6-
(Load Selection...) - leva a tela até a área selecionada e grava á área
selecionada.
2.1.1.6.
Barra de menus – Filter
Neste menu contem diversos filtros que permitem acertar a imagem,
encobrindo pequenos defeitos ou aplicar efeitos especiais. Os cincos filtros Blur
permitem suavizar as áreas onde as arestas são agudas, removendo o contraste;
Exemplos:
Figura 11 - Menu Filter
26
Artistic - cria efeitos de aquarela, pastel rugoso, lápis de cor, etc;
Blur - cria um leve efeito de embaçamento que pode ser usado para diminuir
o contraste e eliminar os defeitos em transições de cores;
Blur More - produz um efeito de três a quatro vezes maior que o comando
anterior;
Gaussian Blur - permite controlar o embaçamento desde uma leve
suavização até uma névoa espessa que desfoca totalmente a imagem.
Radius - controla o nível de embaçamento (0 - 255). Quanto maior o número
do embaçamento, maior o efeito;
Motion Blur - cria a ilusão de movimento. Reproduz o efeito de fotografar o
objeto em movimento usando um alto tempo de exposição;
Angle - controla a direção do movimento (-360 a 360). Pode-se arrastar o
raio do circulo ao lado.
Distance - controla a intensidade do embaçamento (1 a 999).
Radial Blur - produz um efeito de movimento na imagem, como se a câmera
estivesse dando um zoom ou girando;
Amount - Controla a intensidade do efeito (1 a 100).
Blur Method - embaçamento em círculos concêntricos, como se a imagem
estivesse girando. Zoom, embaçamento em linhas que se ampliam pelo centro.
Blur Center - preview em forma wireframe (imagem crua) onde é possível
arrastar o centro do efeito clicando e arrastando no ponto central.
27
Quality - draft, mais rápida porém com resultado granulado. Best, resultado
suave, porém demorado. Good, qualidade entre os itens anteriores.
Distort - produz efeitos de distorção geométrica na imagem ou seleção;
Displace - usa uma segunda imagem como um mapa de deslocamento,
respeitando as configurações da caixa;
Horizontal Scale - desloca para a direita ou esquerda, conforme o valor de
cor da segunda imagem (mapa de deslocamento). Valor claro, desloca para
esquerda e valor escuro, para a direita.
Vertical Scale - desloca para a cima ou para baixo, conforme o valor de cor
da segunda imagem (mapa de deslocamento). Valor claro desloca, para cima e valor
escuro, para baixo.
Stretch to Fit - transforma o tamanho da segunda imagem para que ela
corresponda ao tamanho da imagem que estará recebendo o efeito.
Tile - usa a segunda imagem como um padrão de repetição.
Warp around - repete os pixels ao redor da borda da imagem para dentro;
Repeat Edges Pixels - repete os pixels da borda da imagem para fora;
(Pinch) comprime ou expande a área selecionada, amount controla a intensidade do
efeito (-100 a 100), valores negativo expandem a área selecionada e valores
positivos, comprimem;
Polar Coordinates - converte a área selecionada ou imagem de uma forma
para outra.
28
Ripple - Produz um padrão ondulante na seleção, como ondulações na
superfície da imagem, Size define o tamanho da ondulação. Small, ondulações
pequenas.
Median - ondulações médias. Large, ondulações grandes e Amount,
controlam a intensidade do efeito.
Estes são exemplos de alguns filtros existentes neste menu, mais
informações sobre filtros serão abordadas no caderno de exercícios.
Exemplos de filtros:
Artistic - dão outra aparência a imagem, tornando-a com aspecto menos
artificial;
Blur - suavizam uma seleção ou imagem e são úteis no retoque de
fotografias;
Brush Stroke - é usado somente para um perfeito acabamento em seus
trabalhos, usando diferentes tipos de Brush e efeitos;
Distort - são usados para distorcer uma imagem geometricamente, criando
efeitos plásticos e de 3D;
Noise - permitem acrescentar ou retirar ruídos de uma imagem. Podemos
remover problemas em áreas específicas, criar texturas (como as usadas em papel
de parede). Também são úteis em dar uma aspecto mais realístico a áreas
retocadas.
Pixelate - agrupam pixels em células;
Render - permite criar um agrupamento de padrões, variando as cores de
primeiro (Foregroud) e segundo plano(Background);
29
Sharpen - permite melhorar o foco de uma imagem, aumentando o contraste
dos pixels adjacentes;
Sketch - permite criar efeito de arte-final em imagens;
Stylize - permitem criar efeitos exagerados em imagens, deslocando os
pixels;
Texture - permitem acrescentar texturas a imagens;
Other - são úteis para trabalhar com máscaras (modificar)
2.1.1.7.
Barra de menus – View
Os elementos citados nesta página referente a camadas, caminhos, guias e
grades terão no decorrer deste treinamento, referências mais detalhadas.
Figura 12 - Menu View
1-
New View - modifica a visualização do objeto;
2-
CMYK Preview - prévia CMYK e Alarme de Gamut;
3 – Zoom In - aumenta a imagem;
Zoom Out - diminui a imagem;
Fit on Screem - amplia ou reduz a imagem para visualização na tela;
Actual Pixels - amplia para o tamanho dos pixels;
30
Print Size - imprimir no tamanho;
4-
Hide or Show Edges - remover ou exibir bordas;
Hide or Show Paths - remover ou exibir caminhos;
5-
Show or Hide Rullers - exibir ou remover réguas na janela da imagem;
6-
Show or Hide Guides - exibir ou remover guias;
Snap to Guides - prender as guias;
Lock Guides - ver guias;
Clear Guides - limpar guias;
7-
Show ou Hide Grid) - exibir ou remover grade e (Sanap to Grid)
prender a grade.
2.1.1.8.
Barra de menus – Window
Nesta caixa você encontra uma lista de comandos que aparece quando você
clica na Barra de menus. Clique em um nome de menu para exibir uma lista de
comandos utilizados para acessar várias funções.
Figura 13 - Menu Window
1-
(Cascade) - exibe imagens em cascata;
31
(Tile) - exibe imagens de modo recortado;
(Arrange Icons) - organiza os ícones;
(Close All) - fecha todas as janelas de imagens.
2-
(Hide Tools) - remove ou exibe as ferramentas na área de trabalho;
3 - Os itens nestas áreas do menu View são relativos a exibição ou remoção
dos Roll-ups de auxílio que existem na área de trabalho do Photoshop.
4 - Aqui temos também a exibição e informações das imagens abertas no
Photoshop.
5-
(Show Layers) - exibe a palheta de layers (camadas);
(Show Channels) - exibe diversos canais ao mesmo tempo;
(Show Paths) - é uma maneira efetiva para selecionar bordas com
precisão.
6-
(Hide History) - Desfazer mais de um comando;
(Show Actions) - Automatizar u m série de passos.
7-
2.1.1.9.
(Hide Status Bar) - remove ou exibe a barra de status.
Barra de menus – Help
Neste menu o usuário solicita as caixas de Diálogo referentes a auxílio do
Manuseio do software ou informações sobre o mesmo.
Figura 14 - Menu Help
32
2.1.2. Caixa de ferramentas
A caixa de ferramentas tem várias ferramentas para editar uma imagem. A
caixa de ferramentas é dividida em várias seções de ferramentas semelhantes:
Ferramentas de seleção
Aprimoramento das ferramentas
Vetor Ferramentas
Ferramentas de navegação
Cor Ferramentas
A caixa de ferramentas é mostrada à esquerda. Ela contém várias
ferramentas do Photoshop. Além das ferramentas visíveis, as ferramentas com uma
pequena seta preta no canto inferior direito com outras opções de ferramentas
relacionadas.
Para selecionar uma ferramenta devemos ver se ela está visível na caixa de
ferramentas, e clique nele uma vez para ativá-lo.
2.1.2.1.
Ferramentas de seleção
Figura 15 - Ferramentas de Seleção
As ferramentas de seleção permitem usar várias técnicas para selecionar
seções específicas de uma imagem, em vez de todo o gráfico.
Uma vez selecionada, você pode editar e manipular uma seção de uma
imagem, deixando o resto intacto.
2.1.2.1.1. Rectangular Marquee Tool
Use esta ferramenta para fazer seleções em sua imagem, em uma forma
retangular. Isso altera a área da imagem que é afetada por outras ferramentas e
33
ações para estar dentro da forma definida.
Segurando a tecla [Shift] enquanto
arrasta a seleção, restringe a forma de um quadrado perfeito. Segurando a tecla
[Alt] enquanto arrasta define o centro do rectângulo onde o cursor iniciado.
Figura 16 - Ferramenta Retangular Marquee Tool
2.1.2.1.2. Move Tool
Use esta ferramenta para mover as coisas. Segure a tecla [Shift] para limitar
os movimentos para vertical / horizontal.
Figura 17 - Ferramenta Move Tool
2.1.2.1.3. Polygon Lasso Tool
Use para definir seleções em qualquer forma que você gostaria. Para fechar
a seleção, clique sobre o ponto de início (você vai ver a mudança de cursor quando
você está nela), ou simplesmente clique duplo. Ao segurar a tecla [Ctrl], você vai ver
a mudança de cursor, e a próxima vez que você clica, ele irá fechar a sua seleção.
Figura 18 - Ferramenta Polygon Lasso Tool
34
2.1.2.1.4. Magic Wand Tool
Utilize esta opção para selecionar cores. Ela irá selecionar o bloco de cor
ou transparência, com base em onde você clicar. Na Barra de opções no topo, você
pode alterar a tolerância ao fazer suas seleções mais e menos precisos.
Figura 19 - Ferramenta Magic Wand Tool
2.1.2.1.5. Crop Tool
A ferramenta Crop funciona de forma semelhante à ferramenta Retangular
Marquee. A diferença é quando você pressionar a tecla [Enter / Return], ela surge a
sua imagem para o tamanho da caixa. Qualquer informação que estava do lado de
fora da caixa é ido agora. Não é permanente, você ainda pode desfazer.
Figura 20 - Ferramenta Crop Tool
2.1.2.1.6. Slice Tool
É usado principalmente para a construção de sites, ou dividir uma imagem
em partes menores, quando salva.
Figura 21 - Ferramenta Slice Tool
35
2.1.2.2.
Aprimoramento das ferramentas
Figura 22 - Ferramentas de Aprimoramento
As ferramentas de melhoria permite que você clone partes de uma imagem,
borrão ou aumentar os fundos, preencher uma área com uma cor selecionada, ou
ainda enfatizar pontos focais.
2.1.2.2.1. Healing Brush Tool
Você pode usar essa ferramenta para reparar arranhões e especificações e
coisas desse tipo nas imagens.
Ele funciona como a ferramenta Pincel.
Você
escolhe o tamanho do cursor, em seguida, segurando a tecla [Alt], você seleciona
uma área limpa de sua imagem. Deixe de lado a tecla [Alt] e pinte sobre a área de
ruim. É basicamente copia a informação da área da primeira para a segunda, sob a
forma de a ferramenta Pincel. Apenas, no final, ela atinge a informação, de modo
que misturas.
Figura 23 - Healing Brush Tool
2.1.2.2.2. Brush Tool
Ele pinta uma imagem sua, em qualquer cor que você selecionou, e
qualquer que seja o tamanho que você selecionou. Há um monte de opções para
ele.
Figura 24 - Brush Tool
36
2.1.2.2.3. Clone Stamp Tool
Isto é muito semelhante ao Healing Brush Tool. Você usa exatamente da
mesma forma, exceto essa ferramenta não misturar no final. É uma cópia direta da
informação a partir da primeira área selecionada para a segunda.
Figura 25 - Clone Stamp Tool
2.1.2.2.4. Ferramenta Pincel História
Esta ferramenta funciona como a ferramenta Pincel, exceto no que ele
pinta, com é a partir do estado original da imagem. Se você vai em História da
janela, você pode ver a paleta Histórico. A ferramenta Pincel do Histórico pinta com
as informações de qualquer estado histórico é selecionada.
Figura 26 - Ferramenta Pincel História
2.1.2.2.5. Eraser Tool
Esta é a ferramenta anti-Brush. Ele funciona como uma borracha e apaga
todas as informações onde quer que você clicar e arrastar. Se você estiver em uma
camada, ele irá apagar a informação transparente. Se você está na camada de
fundo, ele apaga com qualquer cor secundária que você selecionou.
Figura 27 - Eraser Tool
37
2.1.2.2.6. Gradiente Tool
Você pode usar isso para fazer um gradiente de cores.
Ele cria uma
mistura de sua cor de primeiro plano e cor de fundo quando você clicar e arrastar.
Figura 28 - Gradiente Tool
2.1.2.2.7. Blur Tool
A ferramenta Blur torna as coisas borradas. Clique e arraste para fazer as
coisas borradas.
Figura 29 - Blur Tool
2.1.2.2.8. Dodge Tool
É usado para clarear qualquer área.
Contanto que não seja o preto
absoluto. O preto absoluto não irá clarear.
Figura 30 - Dodge Tool
38
2.1.2.3.
Ferramentas Vetor
Figura 31 - Ferramentas Vetor
O vetor ferramentas permitem aos usuários criar objetos baseados em vetor
no Photoshop.
2.1.2.3.1. Path Seletion Tool
Você pode usar esta ferramenta no trabalho com os caminhos.
Figura 32 - Ferramenta Seletion Tool
2.1.2.3.2. Horizontal Type Tool
Ela faz texto. Você pode clicar em um único ponto, e começar a escrever
imediatamente. Ou você pode clicar e arrastar para fazer uma caixa delimitadora de
onde o seu texto / tipo vai. Há um monte de opções para a ferramenta Type.
Figura 33 - Horizontal Type Tool
2.1.2.3.3. Pen Tool
É para a criação de caminhos, em que você usaria a Path Selection Tool
para selecionar o caminho. Os caminhos podem ser usados em algumas maneiras
39
diferentes, principalmente para criar caminhos de recorte, ou para criar seleções.
Você usa a ferramenta clicando em para adicionar um ponto. Se clicar e arrastar,
ele vai mudar a forma do seu caminho, o que lhe permite dobrar e moldar o caminho
para as seleções precisas e tal.
Figura 34 - Ferramenta Pen Tool
2.1.2.3.4. Retangle Tool
Por padrão, ele desenha uma camada de forma, na forma de um retângulo.
Ele preenche o retângulo com qualquer cor de primeiro plano que você selecionou.
Figura 35 - Ferramenta Retangle Tool
2.1.2.3.5. Notas Tool
Você pode usar essa ferramenta para adicionar pequenas caixas de
pequena nota em sua imagem. Estes são úteis se você está muito esquecido, ou se
você está compartilhando o arquivo de Photoshop com alguém. Só funciona com
arquivos. PSD.
Figura 36 - Ferramenta de Notas
40
2.1.2.3.6. Eyedropper Tool (I)
Esta ferramenta funciona mudando sua cor para qualquer cor que você
clique em. Segurando a tecla [Alt] vai mudar a sua cor de fundo.
Figura 37 - Ferramenta Eyedropper Tool
2.1.2.4.
Ferramentas de navegação
Figura 38 - Ferramentas de Navegação
Ao utilizar as ferramentas de navegação, você pode mover para diferentes
seções de uma imagem, ou ampliação alteração da imagem. A ferramenta Zoom
permite aos usuários ampliar e reduzir áreas de imagens. Clique na ferramenta
Zoom para ampliar, pressione a tecla Alt e clique na ferramenta de zoom para fora.
A ferramenta Mão permite aos usuários a deslizar a imagem ao redor da área da
imagem para visualizar diferentes partes da imagem.
2.1.2.4.1. Ferramenta Mão
É para mudar a sua imagem inteira dentro de uma janela. Então se você
está ampliada e sua área de imagem é maior do que a janela, você pode usar a
ferramenta Mão para navegar em torno de sua imagem. Basta clicar e arrastar.
Você pode obter esta ferramenta a qualquer momento usando qualquer outra
ferramenta ao pressionar e segurar o [Espaço].
41
Figura 39 - Ferramenta Mão
2.1.2.4.2. Zoom Tool
Ele permite que você de zoom na sua imagem. Segure a tecla [Alt] para
diminuir o zoom. Segurando a tecla [Shift] irá ampliar todas as janelas que você tem
aberto, ao mesmo tempo. Dê um clique duplo na ferramenta Zoom na paleta para
voltar à exibição de 100%.
Figura 40 - Ferramenta Zoom Tool
2.1.2.5.
Cor Ferramentas
Figura 41 - Ferramenta de Cor
As ferramentas de controle de cor e cores de fundo. Neste exemplo, o
branco é a cor principal e o vermelho é a cor de fundo. Quando usado em conjunto
com a paleta de cores e da paleta Swatches, os usuários podem selecionar a partir
de milhões de cores diferentes para usar em suas imagens. A ferramenta Contagotas permite que você selecione uma cor em uma imagem existente.
42
2.1.3. Área de imagem
A tela de desenho é a área em que você irá criar e / ou modificação de
imagens. Por padrão, o Photoshop oferece uma tela de desenho para trabalhar, mas
você pode facilmente abrir uma nova usando a "nova" opção de menu a partir do
"item de menu File".
Cada tela de desenho tem uma barra de título com botões de controle de
janela e uma área de desenho.
Figura 42 - Área de criação de Imagem
A barra de título tem várias funções.
Primeiro ela exibe o nome atual da imagem, bem como informações sobre o
modo de cor e escala de zoom. Como você pode ver na figura acima, por padrão, o
nome será "Untitled-1", mas quando você salvar a imagem será alterado para o
nome que você salvou o arquivo.
Outro aspecto da barra de título é que você pode usar a barra de título para
mover a tela de desenho em qualquer lugar dentro da área de trabalho clicando e
segurando o botão do mouse sobre a barra de título e arrastando o mouse.
Finalmente, a barra de título oferece vários botões de controle. Tal como
acontece com outros aplicativos, você pode usar os botões para minimizar,
maximizar ou fechar a tela de desenho.
43
Figura 43 - Opção New do Menu File
Você pode facilmente abrir uma nova tela para desenhar sobre a escolha de
"Novo" do menu "Arquivo".
Quando você fizer isso, o "New Canvas Diálogo" será exibido. Você pode
usar esta janela para criar o seu próprio canvas.
Título lona MyFirstCanavas, defina a altura para 300 pixels e largura de 300
pixels, e OK.
Figura 44 - Janela de configuração de um arquivo novo
2.1.4. Paletas
Paletas são componentes essenciais de seu conjunto de ferramentas. Por
um lado, as paletas ajudam a definir a natureza das suas ferramentas. Ou seja,
paletas personalizam a forma como as ferramentas na caixa de ferramentas se
executam. Paletas também ajudam a executar algumas das tarefas mais complexas,
tais como camadas ou manipulação de esquemas de cores complexas.
Por padrão, há cinco paletas.
44
Figura 45 - Paletas
Embora estas cinco paletas de controle apresentem muitos aspectos
diferentes do seu desenho, elas compartilham diversas propriedades.
Todas as paletas são constituídas por uma barra de título, um conjunto de
guias, e uma lista de opções para cada guia. Além disso, todas as paletas têm um
menu de opções.
Figura 46 - Aspectos das Paletas
45
Outra propriedade genérica de paletas é a capacidade de ajustar
dinamicamente o conteúdo. Ou seja, você pode personalizar as abas em qualquer
paleta simplesmente arrastando separadores entre as paletas. Clique e mantenha
pressionado o botão esquerdo do mouse sobre uma aba em uma paleta e sem
largar o botão do mouse pressionado, arraste a aba para outra paleta e deixar ir.
Agora, arraste a guia para trás.
Finalmente, note que se você fechar uma paleta, você pode facilmente
recuperá-la na tela, escolhendo "Paletas" do "item de menu Window" e selecionar a
paleta que você deseja mostrar.
2.2 VERSÕES
O Photoshop foi criado pela empresa de desenvolvimento Adobe, se
licenciou em 1989 e foi lançada sua primeira versão em fevereiro de 1990 com a
versão 1.0.7.
2.1.5. Versão 1.0.7 lançado em fevereiro de 1990.
Figura 47 - Tela de Abertura da versão 1.0.7
46
2.1.6. Versão 2.0.1 lançado em dezembro de 1991.
Mudanças feitas:
Caminhos;
CMYK Color;
EPS Rasterization.
Figura 48 - Tela de Abertura da versão 2.0.1
2.1.7. Versão 2.5 lançado em fevereiro de 1993.
Mudanças feitas:
16 bits por canal de suporte.
Figura 49 - Tela de Abertura da versão 2.5
47
2.1.8. Versão 3.0 lançado em Setembro de 1994.
Mudanças feitas:
Tabbed Paletas;
Camadas.
Figura 50 - Tela de Abertura da versão 3.0
2.1.9. Versão 4.0 lançado em Novembro de 1996.
Mudanças feitas:
Camadas de Ajuste;
Ações (macros);
Desfazer Múltiplo (Valor definido nas preferências).
Figura 51 - Tela de Abertura da versão 4.0
48
2.1.10.
Versão 5.0 lançado em Maio de 1998.
Mudanças feitas:
Paleta com History;
Gerenciamento de Cores;
Laço Magnético.
Figura 52 - Tela de Abertura da versão 5.0
2.1.11.
Versão 5.5 lançado em Julho de 1999.
Mudanças feitas:
Fornecido com o ImageReady;
Salvar para a Web;
Extrato.
Figura 53 - Tela de Abertura da versão 5.5
49
2.1.12.
Versão 6.0 lançado em Outubro de 2000.
Mudanças feitas:
Vetor Shapes;
Atualizado Interface de Usuário;
"Liquify" filtro;
Estilos de Layer / Blending Options de diálogo.
Figura 54 - Tela de Abertura da versão 6.0
2.1.13.
Versão 7.0 lançado em Abril de 2002.
Mudanças feitas:
Fabricado texto completamente vetor;
Healing Brush;
Novo motor de pintura;
Camera RAW 1.x (opcional plugin).
Figura 55 - Tela de Abertura da versão 7.0
50
2.1.14.
Versão CS 8.0 lançado em Outubro de 2003.
Mudanças feitas:
2.x Câmera RAW;
Altamente modificado "Slice Tool";
Sombra / Realce comando;
Comando Corresponder Cor;
Lens Blur filtro;
Smart Guides;
Histograma em Tempo Real;
Detecção e recusa para imprimir imagens digitalizadas de várias;
Macrovision de proteção de cópia baseada em SafeCast DRM
tecnologia;
Suporte de scripts para JavaScript e outras linguagens;
Camada de grupos hierárquicos;
16 bits por canal de camadas, pintura e ajustes;
Suporte para arquivos maiores que 2 gigabytes;
Documentos até 300.000 pixels em cada dimensão.
Figura 56 - Tela de Abertura da versão CS 8.0
51
2.1.15.
Versão CS2 9.0 lançado em Abril de 2005.
Mudanças feitas:
3.x Câmera RAW;
Smart Objects;
Distorção de Imagem;
Spot Healing Brush;
Ferramenta de olhos vermelhos;
Lens Correction filtro;
Smart Sharpen;
Smart Guides;
Ponto de Fuga;
Melhor gerenciamento de memória em 64 bits PowerPC G5 máquinas
Macintosh rodando Mac OS X 10.4;
Mais opções de manchas, tais como "espalhamento"
Modificado seleção da camada, como a habilidade para selecionar
mais de uma camada.
Figura 57 - Tela de Abertura da versão CS2 9.0
52
2.1.16.
Versão CS3 10.0 lançado em Dezembro de 2006.
Mudanças feitas:
O suporte nativo para a plataforma Macintosh baseados em Intel e
suporte aperfeiçoado para Windows Vista;
Revisado interface de usuário;
Adições de recursos para o Adobe Camera RAW;
Quick ferramenta Selecionar;
Alterações a Curves, Ponto de Fuga, Channel Mixer, brilho e contraste,
e a caixa de diálogo Imprimir;
Ajuste de conversão em preto-e-branco;
Auto Align e Auto Blend;
Smart (não-destrutivos) Filtros;
Mobile dispositivo de otimização gráfica;
Melhorias para clonagem e recuperação;
Mais de 32 bits completo suporte HDR / (camadas, pintura, mais filtros
e ajustes)
Faster lançamento.
Figura 58 - Tela de Abertura da versão CS3 10.0
53
2.1.17.
Versão CS4 11.0 lançado em Outubro de 2008.
Mudanças feitas:
Imagens panorâmicas e zoom mais suaves e livre rotação da tela;
OpenGL aceleração de exibição no Photoshop;
O suporte nativo para 64 bits em Windows Vista x64;
Painel Ajustes;
Mistura automática de imagens;
Painel Máscaras;
Aprimorado do Adobe Photoshop Lightroom;
Dimensionamento sensível ao conteúdo;
Melhor processamento de imagens brutas;
Maior profundidade do campo;
Dramaticamente melhorada correção de cor;
Auto-alinhamento das camadas;
Novo arquivo opções de exibição (exibição do documento com guias e
pontos de vista n-up);
Novo gerenciamento de arquivos e espaços de trabalho com o Adobe
Bridge CS4.
Figura 59 - Tela de Abertura da versão CS4 11.0
54
2.1.18.
Versão CS5 12.0 lançado em Abril de 2010.
Mudanças feitas:
Content Aware Fill;
Puppet Tool Warp;
64 bits para Macintosh;
Mixer Brush;
Correção automática da lente;
Melhoria da Câmara processamento RAW;
Câmera controle grão cru;
Melhoria Ray Tracing (Extended);
Repousse ferramenta de extrusão 3D (Extended);
Imagem baseada luzes (Extended).
Figura 60 - Tela de Abertura da versão CS5 12.0
2.3 MODOS DE COR
Os modos de cor são modos diferentes de definir as cores, tanto vista em
monitores, quanto em uma impressão.
Quando convertemos um tipo de cor para outro tipo podem acontecer
alterações na imagem.
55
O Photoshop trabalha com vários modos de cor. Alguns deles são: RGB,
CMYK, CIE-LAB e Bitmap.
2.1.19.
RGB
RGB é modo de cor luz, tudo o que é visto na tela do Monitor.
É composto por 3 cores primárias R = RED (vermelho), G = GREEN (verde)
e B = BLUE (azul).
A cor RGB tem 256 níveis de intensidade, valor do brilho, um valor de 0 a
255, quanto maior o seu valor mais claro ela fica, sendo o 0 a cor preta.
2.1.20.
CMYK
O CMYK é um modo de cor Substrativo, é um modo de cor específico para
impressão gráfica, pois o CMYK possui os 4 canais de cores: C = CIANO, M =
MAGENTA, Y = AMARELO e K = (Black) PRETO. Ele possui valores que vão de 0 a
100 e quanto maior o seu valor mais escuro fica a cor.
“Ele funciona de uma forma similar à nossa percepção ocular de pigmentos. Quando
uma determinada luz é projetada em um objeto, ela subtrai um pouco dessa luz e
reflete o restante, justamente a cor refletida é a qual o ser humano percebe.”
(MELO,
Filipe.
Modos
de
cor
no
Photoshop.
Em:
<http://imasters.com.br/artigo/6738/photoshop/modos_de_cor_no_photoshop/>.
Acesso em: 06 Novembro 2010).
Tem uma vantagem de já saber qual cor irá sair ao imprimir, pois o CMYK
trabalha com cor pigmento.
2.1.21.
Lab Color
O modo de cor LAB COLOR foi desenvolvido com o objetivo de reproduzir
todas as cores que o olho humano pode perceber.
“O Modo LAB oferece três canais de cores. Um só para luminosidade e outro para
dois intervalos de cores, conhecidos pelas iniciais a e b. Pense nele como um RGB
com dois canais de brilho.” (MELO, Filipe. Modos de cor no Photoshop. Em:
<http://imasters.com.br/artigo/6738/photoshop/modos_de_cor_no_photoshop/
56
>. Acesso em: 03 Novembro 2010).
Possui um extenso numero de cores e por isso é aconselhado para se
aplicar a filtros e efeitos.
2.1.22.
Bitmap
São imagens que apresentam apenas duas cores, normalmente o preto e o
branco. O computador usa somente 1 bit, on=preto e off=branco, para poder definir
cada pixel.
2.4 FORMATOS DE ARQUIVOS
No Photoshop existem diversos tipos de formatos de arquivos para
trabalharmos. São eles: BMP, GIF, JPG, PNG, PDF, TIFF, EPS, PCX, PICT, PIXAR,
TGA e DOCS.
2.1.23.
BMP
O BMP suporta 16 milhoes de cores, e seu principal uso seria para os
famosos "papeis de parede" do windows.
2.1.24.
GIF
Possui 256 cores, tem muita utilidade para web, suporta fundos
transparentes e animações.
2.1.25.
JPG
É o formato mais utilizado na WEB, quanto maior mais perca de qualidade
ele fica, possui milhares de cores.
2.1.26.
PNG
57
O PNG não perde a qualidade quando fica guande, é um formato
que
suportar fundos transparentes e arquivos coloridos de qualidade na Web.
2.1.27.
PDF
É um formato que visualiza páginas com textos, desenhos vetoriais e
imagens. Formato bastante usado em fechamentos de arquivo.
2.1.28.
TIFF
TIFF não tem nenhuma perda quando se compacta, é muito utilizado para
impressão também suporta transparências e camadas.
2.1.29.
EPS
Abri arquivos vetoriais exportados por outros programas, e os transformam
em Pixel. O Arquivo EPS é um dos mais recomendados para formatos de impressão
em OffSet.
2.1.30.
PCX
Suporta até 16 milhões de cores, não possui qualidade para a gráfica.
2.1.31.
PICT
Suporta 16 milhões de cores e 4 canais alpha (para máscaras). O formato
PICT é especialmente eficiente na compactação de imagens com grandes áreas de
cores sólidas
2.1.32.
PIXAR
Formato para trabalhar com imagens em 3D.
58
2.1.33.
TGA
Formato para aplicativos de vídeo e cor de nível profissional em PC.
2.1.34.
DCS
Suporta somente cor CMYK. É exclusivo para impressão gráfica.
2.5 VANTAGEM E DESVANTAGEM DE SE USAR O PHOTOSHOP
2.1.35.
Vantagem
Tem várias ferramentas avançadas de edição de imagem que melhoram
muito a qualidade de uma fotografia.
Na internet encontramos muitos tutoriais que ajudam a trabalhar com este
software.
Quanto mais você aprende a usar as ferramentas do photoshop, mais ele
pode melhorar suas habilidades.
“A vantagem do Photoshop é que com o crescimento das vendas do software é um
incentivo claro para a Adobe reinvestir no programa e aperfeiçoar – ou, em alguns
casos, corrigir – seus recursos, e quem ganha com isso é sempre o usuário.
Enquanto o Photoshop avança numa escalada progressiva, outros fornecedores
apresentam recursos mais limitados para recuperar a desvantagem, perdendo,
assim cada vez mais sua fatia de mercado.” (CULEN, Marcelo. O que é o
Photoshop?.Em:
<http://www.mxstudio.com.br/photoshop/o_que_e_o_photoshop__/>. Acesso em: 01
Novembro 2010).
2.1.36.
Desvantagem
Por ele ser um programa de gráfico ele é pesado e acaba ocupando grande
espaço de mémoria no computador. Fazendo com que ele fique mais lento.
É um software comercial com custo muito alto. A ultima versão CS5 está
saindo em média US$ 700,00.
59
Por existir diversas ferramentas, e elas serem muito diferentes, um usuário
sem prática terá que ter muita paciencia até que consiga usar cada ferramenta
corretamente.
2.6 TECLAS DE ATALHO DO PHOTOSHOP
No Photoshop existem diversas teclas de atalho para abrir as ferramentas,
fazendo com que seu trabalho fique mais ágil e prático. Vamos visualizar algumas
teclas de atalho:
Tabela 1 - Teclas de Atalho do Menu File
Action
New
New Layer
Open
Open As
Close
Close All
Save
Save As
Save a Copy
Save for Web
Page Setup
Print
Exit/Quit
Jump to ImageReady
Help
Fonte: Fabio Lody, 2003.
File Menu
Windows
Mac
Ctrl+N
Ctrl+Shift+N
Ctrl+O
Ctrl+Alt+O
Ctrl+W
Ctrl+Shift+W
Ctrl+S
Ctrl+Shift+S
Ctrl+Alt+S
Ctrl+Alt+Shift+S
Ctrl+Shift+P
Ctrl+P
Ctrl+Q
Ctrl+Shift+M
F1
Cmd+N
Cmd+Shift+N
Cmd+O
n/a
Cmd+W
Cmd+Shift+W
Cmd+S
Cmd+Shift+S
Cmd+Option+S
Cmd+Option+Shift+S
Cmd+Shift+P
Cmd+P
Cmd+Q
Cmd+Shift+M
F1
Tabela 2 - Teclas de Atalho do Menu Edit
Action
Undo
Step Back in History
Step Forward in History
Cut
Copy
Copy Merged
Paste
Paste Into
Free Transform
Paste Into
Fonte: Fabio Lody, 2003.
Edit Menu
Windows
Mac
Ctrl+Z
Ctrl+Alt+Z
Ctrl+Shift+Z
Ctrl+X
Ctrl+C
Ctrl+Shift+C
Ctrl+V
Ctrl+Shift+V
Ctrl+T
Ctrl+Shift+V
Cmd+Z
Cmd+Option+Z
Cmd+Shift+Z
Cmd+X
Cmd+C
Cmd+Shift+C
Cmd+V
Cmd+Shift+V
Cmd+T
Cmd+Shift+V
60
Tabela 3 - Teclas de Atalho do Menu Image
Action
Adjust Levels
Adjust Auto Levels
Adjust Auto Contrast
Adjust Curves
Adjust Color Balance
Adjust Hue/Saturation
Desaturate
Invert
Extract
Fonte: Fabio Lody, 2003.
Image Menu
Windows
Mac
Ctrl+L
Ctrl+Shift+L
Ctrl+Alt+Shift+L
Ctrl+M
Ctrl+B
Ctrl+U
Ctrl+Shift+U
Ctrl+I
Ctrl+Alt+X
Cmd+L
Cmd+Shift+L
Cmd+Option+Shift+L
Cmd+M
Cmd+B
Cmd+U
Cmd+Shift+U
Cmd+I
Cmd+Option+X
Tabela 4 - Teclas de Atalho do Menu Layers
Action
New Layer
Layer via Copy
Layer via Cut
Group with Previous
Ungroup
Bring to Front
Bring Forward
Send Backward
Send Back
Send Backward
Merge Layers
Merge Visible
Fonte: Fabio Lody, 2003.
Layers Menu
Windows
Mac
Ctrl+Shift+N
Ctrl+J
Ctrl+Shift+J
Ctrl+G
Ctrl+Shift+G
Ctrl+Shift+]
Ctrl+]
Ctrl+[
Ctrl+Shift+[
Ctrl+[
Ctrl+E
Ctrl+Shift+E
Cmd+Shift+N
Cmd+J
Cmd+Shift+J
Cmd+G
Cmd+Shift+G
Cmd+Shift+]
Cmd+]
Cmd+[
Cmd+Shift+[
Cmd+[
Cmd+E
Cmd+Shift+E
61
3. DREAMWEAVER
O Dreamweaver é um software de edição de códigos de várias linguagens
voltado para WebSites, foi criado pela empresa de desenvolvimento Macromédia em
Dezembro de 1997 na sua versão 1.0, atualmente está na sua versão CS5 e sendo
atualizada as suas versões, desde a versão CS3, pela empresa de desenvolvimento
Adobe Systens.
Quando foi lançado ele era um simples editor de HTML, com funções
básicas, e hoje ele é um potente editor de códigos que se interage com outros
programas da sua família como: FireWorks, Flash, PhotoShop, e tem suporte para
muitas linguagens de programação como: CSS, JavaScript, Ajax, Asp, PHP, JSP,
entre outras linguagens, e vários scripts de servidor.
Muitos programadores têm preconceito em usar este software por achar que
ele deixa o código maior do que o necessário, mas ele da um praticidade por ter
várias funções já prontas e conforme vai escrevendo o código ele tem a função autocompletar, fazendo com que o desenvolvedor crie seu código com mais rapidez e
praticidade. E ele vem crescendo cada ano mais, e é um dos editores mais
populares do mercado.
O Dreamweaver tem conectividade com o banco de dados MySql, Access
entre outros, ele permite que o usuário filtre e mostre conteúdos sem que ele tenha
muita experiência em programação.
O Dreamweaver permite uma visão previa do site na maioria dos
navegadores, diminuindo erros ao abrir nos diferentes navegadores, possui também
diversas ferramentas para se criar um WebSite. Além de ter uma porção de
extensões que baixamos da internet e instalamos no computador, essas extensões
são pequenos programas que tem as funções prontas que se interage com o
Dreamweave, essas funções são normalmente feitas em JavaScript e HTML.
O Dreamweaver tem em sua interface o modo Design, que em vez do
desenvolvedor colocar códigos ele só vai montando a página pelas guias, menus e
ferramentas, fazendo com que qualquer usuário sem experiencia possa criar uma
página de Web, só que com isso o código fica muito sujo, dificil de visualização.
62
3.1
INTERFACE
O Dreamweaver tem uma interface muito fácil e amigável que
permite ao usuário criar de simples a complexos sites. A característica da
interface do Dreamweaver permite ao usuário criar rapidamente páginas
da
web.
Os elementos podem
ser arrastados diretamente
para
o
documento a partir de um painel de fácil utilização.
O Dreamweaver fornece um layout integrado, onde todas as janelas
e painéis estão em uma única janela.
3.1.1 Interface Inicial
Ao abrir o Dreamweaver a janela inicial possui 3 colunas, na
primeira serve para abrir ficheiros que já exista, a segunda mostra os
tipos de ficheiros que podem ser criados, a terceira permite a criação de
novas páginas ou folhas de estilo a partir de templates que vem no
Dreanweaver.
Figura 61 - Janela Inicial do Dreamweaver
63
3.1.2 Área de trabalho
Figura 62 - Área de trabalho do Dreamweaver
A interface do Dreamweaver é composta pelos menus superiores:
File (Arquivo);
View (Vizualizar);
Insert (Inserir);
Modify (Modificar);
Text (Texto);
Commands (Comandos);
Site (Site);
Window (Janela);
Help (Ajuda).
Abaixo se localiza o painel Insert. Ele permite trabalhar com vários tipos de
objetos como tabelas, imagens, formulários, etc.
64
No meio localiza-se o corpo do documento propriamente dito, onde se irá
criar o layout.
Figura 63 - Barra da área de elaboração do código
3.1.2.1 Barra de Ferramentas de Documento
Code, Split & Desing - São os modos gráficos que podemos criar nossa
página. Esses botões ficam na parte superior da área de trabalho do Dreamweaver.
O primeiro botão Code poderá ver somente códigos da página.
Figura 64 - Botão Code, mostra apenas o código interno da página
65
O segundo botão Split tem as duas visualizações, tanto a de códigos quanto
a de designer.
Figura 65 - Botão Split, mostra os dois modos de visualização, Códigos e Designer
O terceiro botão Design terá somente visualização visual, modo gráfico.
Figura 66 - Botão Design, mostra apenas o modo Designer
Em qualquer das 3 opções podemos montar nossa página de Web.
Título do Documento - Permite especificar um título para a página, que
aparece na barra de título do navegador do espectador.
66
Não Navegador / verificar os erros - Fornece um menu de opções para a
verificação de compatibilidade do navegador com a página.
Validate Markup - permite validar o documento atual ou uma tag
selecionada.
File Management - Fornece um menu de opções de gerenciamento de
arquivo para a página, incluindo um comando para carregar a página no seu servidor
web.
Preview / Debug in Browser - Permite visualizar a página no navegador
que você selecionar.
Refresh Design View - Atualiza o aspecto da página no modo de design
depois de você ter feito alterações na vista Código.
Opções de Visualização - Permite que você especifique configurações
diferentes para a exibição atual.
Visuais - permite utilizar diferentes recursos visuais para desenhar suas
páginas.
Se você não vê a barra de ferramentas do documento, abra o menu Exibir e
selecione Barra de Ferramentas e, em seguida Documento.
67
3.1.3 Menu Arquivo
Figura 67 - Menu Arquivo
Novo - Quando vamos abrir uma nova página do Dreamweaver, clicamos
em arquivo e depois em novo, irá abrir uma janela com opções de linguagens de um
documento novo.
Abrir - é o caminho que utilizaremos para abrir nossos documentos.
Salvar - será utilizado para guardar nossos documentos já criados
anteriormente.
Salvar Como - é utilizado para guardar documentos ainda não existentes,
ou seja, ao salvar-mos o documento pela primeira vez utilizamos o menu SALVAR
COMO, e posteriormente utilizamos o menu salvar.
Salvar Tudo - é muito importante, pois ele salva todas a páginas abertas no
programa, se nós temos 5 páginas modificadas não é necessário salvar essas
páginas individualmente, pode-se salvá-las todas simultaneamente no item salvar
tudo.
68
Visualizar no navegador - este item nos da uma prévia de como está nossa
página diretamente no navegador, geralmente o internet explorer, mas pode-se
configurar outros navegadores, ex: netscape, opera etc.
3.1.4 Grupo de Painéis
No grupo de painéis da direita se localizam as janelas CSS: CSS Styles
(Estilos CSS) e Layers (Camadas); Application (Aplicação) e Tag inspector (Inspetor
de tags) minimizadas e, finalmente, Files (arquivos).
Os Grupos de painéis são exibidos verticalmente no lado direito da janela do
Dreamweaver. Os grupos de painéis são conjunto de painéis e comandos
relacionados você irá usar para desenhar suas páginas e publicar seu site.
Um grupo de painel pode ser exibido juntamente com os outros grupos de
painéis. Um painel aparece numa guia no painel quando o grupo é selecionado.
Os comandos disponíveis nos grupos de painéis são muito mais amplos do
que aqueles que você vai encontrar na barra Insert, que contém os comandos mais
comuns do Dreamweaver.
Figura 68 - Grupo de Painéis
Cada painel inclui um menu de opções no canto superior direito, que contém
opções adicionais no painel.
69
3.1.4.1 Painel Design
Figura 69 - Painel Disign
Há dois painéis no grupo do painel de design: Estilos CSS e camadas.
Os estilos CSS são usados para manter os estilos no documento e criar e
anexar folhas de estilo.
O painel da camada mostra todas as camadas do documento aberto. Ele
pode ser usado para bloquear ou desbloquear, reorganizar e renomear as camadas.
3.1.4.2 Painel Código
Figura 70 - Painel Código
70
Você pode usar o grupo de painéis de código para trabalhar com o código no
documento como HTML, JavaScript e ASP. Você pode gravar trechos de código
usando o painel Snippets, que pode ser reutilizado mais tarde. O painel Referência
contém HTML biblioteca de referência.
3.1.4.3 Painel Aplicação
Figura 71 - Painel Aplicação
O painel do aplicativo contém funções para incluir conteúdo dinâmico em
suas páginas web. Você pode gerenciar as fontes de dados e definir conjuntos de
registros e também adicionar comportamentos de servidor avançado.
71
3.1.4.4 Painel Tag Inspector
Figura 72 - Painel Tag
Todos os atributos de seus elementos de página são exibidos no Inspetor de
tags. Você usa o Inspetor de tags para editar qualquer atributo da entidade HTML
selecionada digitando na caixa do atributo correspondente. Outra maneira de fazer
isso é selecionando a partir de um menu que aparece quando clicado dentro da
caixa.
3.1.4.5 Painel Arquivos
Figura 73 - Painel Arquivo
72
Painéis de Arquivos Ativos fazem parte do Painel de Arquivos do Grupo. O
painel de arquivo é usado para gerenciar os arquivos do site, como fazer o download
e upload de arquivos de e para o servidor web. Este painel também pode ser usado
para definir novos sites e alternar entre vários sites.
3.1.5 Barra de Status
A barra de status contém informação adicional sobre o documento. A barra
de status está localizada na parte inferior da janela do documento.
Figura 74 - Barra de Status
Tag Selector - O seletor de tags mostra a hierarquia das marcas em torno da
seleção. Você pode clicar em qualquer tag na hierarquia para selecionar a tag e todo
seu conteúdo. Clicando no <body> seleciona todo o corpo do documento. Botão
direito do mouse (Windows) ou clique com Control (Macintosh), selecione uma
classe ou identificação entre os itens do menu de contexto para definir a classe ou
atributos id de uma tag no seletor de tags.
Ferramentas manuais - A ferramenta manual é usada para arrastar o
documento. Ao clicar na ferramenta Select desactiva a ferramenta 'Mão'.
Zoom Tool e Definir ampliação menu pop-up - A ferramenta de zoom e
Definir ampliação menu pop-up permitem que você defina um nível de ampliação
73
para o documento. Ele pode ser usado para verificar a exatidão de pixel de gráficos,
para selecionar os itens de pequeno porte mais facilmente, criar páginas com texto
pequeno, criar páginas de grande porte, e assim por diante.
Janela Tamanho menu pop-up - Tamanho da janela do menu pop-up
permite que você redimensione a janela do documento com as dimensões
predeterminado ou personalizado. Este menu só é visível no modo de exibição
Design. A barra de status exibe as dimensões atuais da janela do documento (em
pixels). A fim de criar uma página que parece melhor em um tamanho específico,
você pode ajustar a janela do documento a qualquer um dos tamanhos
predeterminados, editar esses tamanhos predefinidos ou criar novos tamanhos.
Tamanho do Documento e Tempo estimado para download
Isso mostra o tamanho do documento estimado e tempo estimado de
download da página, incluindo todos os arquivos dependentes, como imagens e
outros arquivos de mídia. O tamanho é calculado com base na totalidade do
conteúdo da página, incluindo todos os objetos vinculados, como imagens e plugins. O tempo de download é estimado com base na velocidade de conexão entrou
nas preferências da barra de status.
Além das entidades de interface do usuário mostra a exibição padrão de
interface do usuário, existem mais barras de ferramentas como o Código de Barra A,
Estilo da barra de ferramentas de renderização e ferramentas como relatórios no
Dreamweaver.
3.1.6 Barra de Ferramentas Coding
A barra de ferramentas de codificação os botões são usados para executar
muitas operações padrão de codificação, como destaque de código inválido, o
colapso e a expansão de seleções de código, comentários edição, o recuo do
código, a inserção de trechos de código utilizados recentemente, etc.
74
Figura 75 - Barra de Ferramentas Coding
A barra de ferramentas de codificação é visível apenas na visualização do
código e aparece na vertical no lado esquerdo da janela do documento.
3.1.7 Barra de Ferramentas Estilo processamento
O estilo da barra de ferramentas de processamento está oculta por
padrão. Ela contém botões que permite que você visualize seu projeto para
diferentes tipos de mídia se você estiver usando folhas de estilo dependentes de
mídia.
O Estilo de renderização da barra de ferramentas contém um botão que
permite ativar ou desativar estilos CSS.
Para exibir a barra de ferramentas, selecione Exibir> Barras de ferramentas>
Estilo de processamento.
75
Figura 76 - Barra de Ferramentas Estilo processamento
Por padrão, o Dreamweaver mostra como uma página é processada em
uma tela de computador. Há diferentes acepções tipo de mídia que pode ser visto
clicando em seus respectivos botões dados no processamento Style Toolbar.
Render Screen Media Type - visualizações da página como ela aparece na
tela do computador.
Render Print Media previews - a página como ela aparece em um pedaço
de papel impresso.
Render Handheld Media - visualizações da página como ela aparece em
um dispositivo portátil, como um telefone móvel ou um dispositivo BlackBerry.
Render Projeção Tipo de Mídia - visualizações da página como ela
aparece em um dispositivo de projeção.
Render tipo de mídia TTY - visualizações da página como ela aparece em
uma máquina de teletipo.
Render TV MediaType - visualizações da página como ela aparece na tela
da televisão.
76
Alternar exibição de estilos CSS - é usado para alternar a exibição de
estilos CSS.
Relatórios no Dreamweaver - Relatórios no Dreamweaver pode ser usado
para localizar o conteúdo ea solução de problemas ou testar o conteúdo. Existem
vários tipos de relatórios que podem ser gerados.
A busca pode ser usada para pesquisar marcas e atributos ou um texto
específico dentro das tags.
A validação é utilizada para checagem de erros de código ou de sintaxe.
Target Browser Check é usado para testar o código HTML dos documentos
para verificar se há marcas ou atributos que não são suportadas pelos navegadores
de destino.
Link Checker é usado para localizar e consertar links quebrados.
Site relatórios são utilizados para melhorar o fluxo de trabalho e testes de
atributos HTML no site. Há relatos de fluxo de trabalho que contém o check-out
modificadas recentemente e projetos de informação notas.
FTP log permite que você visualize o log de transferência de arquivos.
3.1.8 Barra Insert
A barra Insert é a barra que carrega as ferramentas básicas e principais para
criar uma página do Dreamweaver. Para encontrá-la clicamos no menu Window,
opção Insert, ela contém guias e cada guia tem várias ferramentas.
Figura 77 - Barra Insert
77
3.1.8.1 Guia Common
A categoria padrão, que contém comandos para a adição de hiperlinks,
tabelas, imagens e objetos multimídia. Vamos ver suas funções:
Hiperlink - inserir link;
Figura 78 - Janela de configuração de Hiperlink
Text - permite a inserção de um texto a ser transformado num link.
Link - deve ser preenchido com o endereço da página a ser mostrada
quando este for clicado.
Target - é um campo opcional que indica o local onde a página será
mostrada.
Title - permite definir um título para o link.
Access Key - permite determinar uma tecla a ser utilizada pelo
visitante para acionar o link.
Tab Index - defini a ordem na qual os campos são selecionados.
Email Link - link para e-mail;
Figura 79 - Janela de configuração de Email Link
78
Text - Preenchido com a palavra ou frase a transformar em link.
E-mail - Preenchido com o endereço de e-mail propriamente dito, a
transformar em link.
Ancora - Link para um lugar específico dentro do próprio documento ou
outro qualquer;
Figura 80 - Janela de configuração de Ancora
Inserir Tabela - Criar novas tabelas a sua página;
Figura 81 - Janela de configuração de Tabela
Rows e Columns - devem ser usados para indicar a quantidade de
linhas e colunas que a tabela terá.
79
Table Width - deve ser usado para especificar a largura da tabela em
pixéis ou percentagem em relação ao contexto onde está inserida.
Border Thickness - permite a definição da largura da borda da tabela
em pixéis.
Cell Padding - deve ser usada para estipular em pixéis, a margem
interna de uma célula da tabela.
Cell Spacing - conterá o valor em pixéis relativo ao espaçamento entre
células adjacentes.
Header - cabeçalho.None (nenhum), Left (esquerda), Top (cimo) e
Both (ambos: esquerda e cimo).
Caption - permite a criação de uma legenda para a tabela.
Align Caption - permite definir o alinhamento da legenda, consoante
as opções default, top,bottom, left e right.
Summary - possibilita a criação de um resumo ou sumário para
explicar a tabela.
Desenhar camada;
Imagem - Inserir uma imagem;
Figura 82 - Opções da Ferramenta Imagem
80
Image placeholder - Permite inserir um contentor na imagem. A sua
finalidade é reservar o espaço no layout para uma imagem que ainda não se têm,
mas que já se sabe o tamanho.
Figura 83 - Janela de configuração de Image Placeholder
Rollover Image - É uma imagem que muda de aspecto à passagem do
mouse.
Figura 84 - Janela de configuração de Rollover Image
Fireworks HTML - FireWorks é um programa de edição de imagem.
Podemos criar alguns efeitos exclusivos para Web.
Figura 85 - Janela de configuração de Fireworks HTML
81
NAVIGATION BAR - Este comando permite criar menus de navegação
interactivos nas suas páginas.
Figura 86 - Janela de configuração de Vavigation Bar
Nav BarElements - permite definir o número de itens totais do menu.
Element Name - deverá definir um nome para representar um item do
Up
menu.
Image, Over Image, Down Imagee Over While Down Image
-
devem ser preenchidas respectivamente com o nº de imagens que criou para
representar os estados de cada um dos itens do menu, ou seja, o estado normal, o
estado over, o estado down (clicado) e o estado overdepois de clicado (over while
down).
Show “DownImage” Initially - faz a imagem down ser a imagem
mostrada, inicialmente, no menu.
Insert - contém duas escolhas:Horizontally e Vertically, que permitem a
criação de menus horizontais ou verticais.
82
Média
Figura 87 - Opções da Ferramenta Média
Flash - insere um objeto em Flash na página.
Flash Button - insere botões em FLASH na sua página HTML sem a
necessidade de ter este programa no seu sistema.
Figura 88 - Janela de configuração de Flash Button.
Flash Text - insere um texto em Flash numa página HTML.
83
Figura 89 - Janela de configuração de Flash Text
Shockwave, Java, ActiveX e Plug-ins - estes quatro botões permitem a
inserção de objetos.
Parameter - Quando insere uma imagem numa página, internamente no
código da página são colocados tags que definem o nome do ficheiro da imagem, o
tamanho e outros parâmetros. Estes parâmetros indicam ao browser de que forma a
imagem deve ser colocada naquele ponto.
Figura 90 - Janela de configuração de Parameter
84
Data - inserimos data na página da Web, podemos escolher o formato da
data;
Figura 91 - Janela de configuração de Data
Server-Side Include - permite incluir no código da página, comandos. Os
comandos desta classe podem executar tarefas e retornar resultados para que
sejam visualizados no browser.
Comentários - escrevemos comentários sobre algo que inserimos na página
da Web.
Head - colocamos no inicio da página em HTML, nela ficam definições do
funcionamento de códigos em JavaScript, estilo da página em CSS, etc.
Figura 92 - Opções da Ferramenta Head
Meta - insere, no código da página, informações sobre o documento, para
que sirvam como ferramenta de classificação ou identificação dos conteúdos.
85
Figura 93 - Janela de configuração de Meta
Keywords - insere o tipo de tag utilizado pelos motores de busca, para
definir as palavras-chave que têm relação com o documento.
Figura 94 - Janela de configuração de Keywords
Description - insere uma descrição sucinta do documento.
Refresh - a função deste parâmetro é fazer com que a página
automaticamente passe para outro endereço.
Figura 95 - Janela de configuração de Refresh
Base - todos os links existentes na página ficam vinculados a um endereço
em particular e a um Target em especial.
86
Figura 96 - Janela de configuração de Base
Link - estabelece uma relação entre o documento atual e outro.
Figura 97 - Janela de configuração de Link
Scripts - permite a inserção de códigos em JavaScript ou VBScript na sua
página HTML.
Figura 98 - Opções da Ferramenta Scripts
No Script - serve para colocar uma mensagem a surgir para browsers que
não possuam suporte a JavaScript ou VBScript.
87
Template
Make Template - cria templates.
Figura 99 - Janela de Salvar novo Template
Site - se refere ao local onde sequer gravar o template.
Existing Templates - mostra todos os templates que porventura
existam definidos para o site em questão.
Save as: permite definir um nome para o template a ser usado na
gravação.
Make Nested Template - é um tipo especial de template feito a partir de
outro.
Editable Region - desbloqueia áreas bloqueadas para que consiga editar e
criar.
Abrirá uma janela a informar que o documento será convertido a template e
outra a seguir a perguntar por um nome a ser dado para a região.
88
Figura 100 - Janela de configuração de Região
Optional Region - é uma região que poderá ser definida num template e
que pode estar visível ou não ao utilizador final, conforme se defina durante a
criação.
Figura 101 - Janela de configuração de Opções de Região
Basic - possui apenas dois campos. Name: nome para região.
Show ByDefault: deixa a região previamente visível ao utilizador.
Advanced - defini regiões opcionais, cuja visibilidade é vinculada a
uma condição controlada por um parâmetro (Enter Expression).
Repeating Region - poderá definir regiões repetitivas, ou seja, regiões que
podem variar de tamanho.
89
Editable Optional Region - é uma região definida pelo criador do template,
a qual pode aparecer ou não na página criada a partir do template, dependendo do
desejo do utilizador, e que também pode ser modificada.
Repeating Tables - uma função para criá-las de raiz, em vez de ter de criar
primeiro uma tabela comum e depois transformá-la.
Tag Chooser - é permitir ver todos os tags disponíveis, não só em HTML,
como em outras opções, que fogem ao escopo deste livro, como CFML, ASP,
ASP.NET, JSP, JRUN, PHP e WML.
3.1.8.2 Guia Layout
É a segunda aba da barra Insert, é usado para projetar o layout da página,
com a ajuda de comandos para tabelas, camadas e quadros.
Figura 102 - Aba de Ferramentas de Layout
Standard, Expanded Layout (normal, expandido e layout) - O primeiro
coloca o Dreamweaver no modo normal. O segundo botão altera as tabelas e cria
espaços adicionais entre as células e margens destas, para facilitar o trabalho de
manipulação. O terceiro botão coloca o Dreamweaver num modo, no qual o
utilizador tem plena liberdade para dispor os diversos elementos da sua página, que
estão intuitivamente a ser ajustados numa tabela.
Table - Criar tabelas no modo layout
Frames - São divisões retangulares que podem ser feitas numa página de
Internet, com a intenção de permitir a colocação de vários ficheiros HTML na mesma
área de visualização.
90
Figura 103 - Figura de divisão de Frames
Layout Table - inserção de linhas acima, abaixo, à esquerda e à direita.
Draw Layout Cell - criar uma célula no modo Layout, inserção de novas
linhas acima e abaixo da célula que se tem seleccionada e colunas à esquerda e à
direita.
3.1.8.3 Guia Forms
Formulários são objetos que inserimos na página que podem conter diversos
tipos de elementos. Os formulários podem ser do tipo de caixa, botões, etc.
Figura 104 - Aba de Ferramentas Forms
Forms - é o contentor que é preciso inserir na página antes de colocar os
outros elementos. Ele se comporta como uma caixa que abrigará todos os outros
elementos do formulário e os isolará de outros possíveis objetos ou formulários que
a página possa ter.
91
Figura 105 - Configuração de Propriedades de Forms
Method e Enctype - estes campos têm relação à maneira que o
formulário deverá codificar e enviar os dados ao servidor e estão vinculadas ao
formato de dados esperado pelo programa relacionado ao formulário.
TextField - é um campo que poderá utilizar para permitir a entrada de dados
na forma de texto comum.
Figura 106 - Caixa de TextField
Figura 107 - Configuração de Propriedades de textField
HiddenField - é um campo que pode ser inserido num formulário e que não
é visível ao utilizador. Serve para armazenar valores e variáveis no interior de um
formulário que deverão passar ao programa vinculado no Action.
Figura 108 - Configuração de Propriedades de HiddenField
92
TextArea: inserção de uma área de textos, e permite ao utilizador inserir
mais informação do que seria possível pelo uso do TextField.
Figura 109 - Caixa de TexArea
.
Figura 110 - Configuração de Propriedades de TexArea
CheckBox - é um tipo especial de campo que permite a escolha de opções.
Cada campo é independente do outro, permitindo ou não a sua marcação.
Um CheckBox possui três propriedades essenciais: nome, valor que será enviado e
o estado inicial.
Figura 111 - Configuração de Propriedades de CheckBox
RadioButton - é muito parecido com o CheckBox, a única diferença é que
somente um RadioButton possa ser selecionado.
Figura 112 - Configuração de Propriedades de RadioButton
93
Checked Value: define o valor que retornará se for o escolhido.
RadioGroup - funcionalidade criada para facilitar a criação de grupos de
RadioButtons.
Figura 113 - Janela de configurações de Radio Group
List/Menu - é uma função que permite inserir dois tipos diferentes de
controles nos formulários: os Dropdown Menus e o List.
Os Dropdown Menus são,
a
exemplo
do RadioButton,
controles
que
permitem apenas a escolha de uma opção, dentre uma lista apresentada. Porém,
em vez de funcionar como uma série de objetos em grupo, já representa o próprio
grupo em si.
Figura 114 - Caixa de List/menu
Figura 115 - Configuração de Propriedades de List/Menu – List Values
94
JumpMenu - é um Dropdown Menu, que contém uma lista de URLs e
permite a escolha direta de uma delas.
Figura 116 - Caixa de JumpMenu
Image Field - permite a escolha de uma imagem para que esta seja o botão
do formulário.
FileField - é um campo especial composto por um TextField e um Botão
com a palavra “browse” que permite procurar e seleccionar um arquivo no
computador.
Figura 117 - Caixa de FileField
Button - são os botões do formulário. Os botões podem ser de dois
tipos: Submit (envia formulário) e Reset Form (limpa as informaçãoes já inseridas).
Label - é um controle que permite associar de forma estrutural um
determinado texto a um campo em específico.
Figura 118 - Caixa de Label
FieldSet - é um campo para a organização do formulário. É uma espécie de
“contentor” para a colocação de elementos do mesmo grupo.
95
3.1.8.4 Guia Text
A palheta de texto possui várias formatações de texto. Para abri-la clicamos
na aba Test da barra Insert.
Figura 119 - Aba de Ferramentas de Texto
Funções das ferramentas de texto:
Bold - Faz com que o texto selecionado apresente o estilo negrito.
Italic - Faz com que o texto selecionado apresente o estilo itálico.
Strong - Faz com que o texto selecionado apresente o estilo strong.
Emphasis - Faz com que o texto selecionado apresente o estilo emphasis.
Paragraph - Insere um parágrafo no texto.
Block Quote - Indenta o texto no documento.
Preformatted Text - Preformata o texto. É usada geralmente em textos que
possuem o tamanho fixo. O estilo de fonte padrão utilizado no texto é o monospace
e o mais importante deste comando é que ele preserva os espaços em branco ( )
que foram especificados no código fonte, sem precisar de utilzar o espaço em
branco .
96
Heading 1 - Formata o texto com o cabeçalho no nível 1 sendo que o
número após a letra h na tag pode variar de 1 a 6, sendo o 1 o cabeçalho de mais
destaque e o número seis o de menor destaque no texto.
Heading 2 - Formata o texto com o cabeçalho no nível 2 sendo que o
número após a letra h na tag pode variar de 1 a 6, sendo o 1 o cabeçalho de mais
destaque e o número seis o de menor destaque no texto.
Heading 3 - Formata o texto com o cabeçalho no nível 3 sendo que o
número após a letra h na tag pode variar de 1 a 6, sendo o 1 o cabeçalho de maior
destaque e o número seis o de menor destaque no texto.
Unordened List - Cria uma lista de elementos sem algum tipo de ordem
estabelecida. Após clicar no ícone, o Dreamweaver se encarrega de indentar e
inserir no texto um marcador. O marcador padrão é um círculo , podendo ser
alterado a qualquer momento no Property Inspector .
Ordened List - Cria uma lista de elementos ordenados. Após clicar no
ícone, o Dreamweaver se encarrega de indentar e inserir no texto um marcador
numerado. O marcador padrão sãos os números radicais, podendo ser alterado a
qualquer momento no Property Inspector .
List Item - Cria mais um elemento pra lista. Se a lista for ordenada( OL ), o
Dreamweaver insere um elemento com o número posterior ao já inserido antes.
Caso contrário se for uma lista sem ordenação definida(UL), ele insere mais um
marcador padrão utilizado podendo ser um círculo, um quadrado, um disco ou até
mesmo uma imagem.
Definition List - Define uma lista a ser utilizada. Este tipo de lista é muito útil
quando se deseja, por exemplo, escrever um parágrafo de texto tabulado para a
direita criando uma apresentação diferente e agradável de se ler!
Definition Term - Define qual será o termo utilizado na lista, como se fosse
um título a ser utilizado.
97
Definition Description - Descrição utilizada para o definir o termo.
Abbreviation - Indica os significados de abreviações, como fax, Corp., Av.,
etc. Esse ícone não modifica a exibição das páginas HTML, mas fornece dados para
mecanismos que interpretam dados em uma página, como sistemas de busca,
corretores ortográficos, sintetizadores de voz e sistemas de tradução.
Acronym - Indica os significados de acrônimos (uma abreviação formada
pelas letras iniciais de uma frase ou grupo de palavras), como WWW, HTML, VB,
SQL, etc.
Line Break - Insere uma quebra de linha no texto. Você pode utilizar um
atalho pressionando Shift+Enter.
Non-Breaking Space - Insere um espaço em branco no texto.
Left Right Quotes -Insere aspas duplas no texto.
Left Right Quotes - Insere aspas duplas no texto.
Em Dash - Insere um travessão no texto.
Pound - Insere o símbolo da libra no texto.
Euro - Insere o símbolo da euro no texto.
Yen - Insere o símbolo do Yen no texto.
Copyright - Insere o símbolo de proteção à cópia.
Registered Trademark - Insere o símbolo de marca registrada no texto.
Trademark - Insere o símbolo de marca registrada no texto.
98
Other Characters - Abre uma janela contendo todos os tipos de caracteres
especiais existentes tais como é, ç e outros. Clique no botão correspondente ao
caracter especial e o Dreaweaver irá apresentar o código na caixa de texto Insert e
em seguida clique no botão ok para inserir no texto
3.1.8.5 Guia Favorites
A aba Favorites é a ultima aba da barra do Insert, nesta ferramenta podemos
inserir os comandos que são mais utilizados pelo desenvolvedor, assim terá acesso
com mais rapidez.
Para configurar a ferramenta Favoritos, clicamos com o botão direito do
mouse em cima da barra de favoritos, e clicamos em Customize Favorites.
Figura 120 - Aba de Ferramentas Favoritos
Na coluna da esquerda temos funções existentes no Dreamweaver, que
podem ser transferidas para a coluna da direita, e assim ficarão fixadas em favoritos.
As ferramentas ficarão fixadas na ordem que forem sendo escolhidas.
Figura 121 - Janela de configuração da Ferramenta Favoritos
99
3.2 PROPRIEDADES
3.2.1 Propriedades de Texto
Figura 122 - Configuração de Propriedades de Texto
Format - Escolha o tipo de formatação para heading, parágrafo, etc.
Font - Escolha a fonte (letra) a ser utilizada.
Style - Estilos Css já prontos.
Size - O tamanho da fonte em points, pixels, cm, mm etc... (na caixa ao
B - Negrito
I - Itálico
O quadrado em baixo do B e do I altera a cor da font.
Ao lado, temos na parte superior o estilo de centralização: left, right,
Na parte inferior, temos a opçao lista, que irá colocar o texto como lista
Link - Adiciona um link ao texto selecionado
Target - Ao clicar no link, ele se abrirá em outra página (_blank), na
lado)
etc..
mesma página e assim por diante.
3.2.2 Propriedades de Tabela
Ao criar uma tabela ao selecionarmos ela ou uma parte dela, podemos fazer
alterações nas propriedades da tabela. Veremos a seguir as funções de suas
ferramentas:
100
Figura 123 - Configuração de Propriedades de Tabela
Table id - O id da tabela (identificação).
Rows - Número de linhas que conterá a tabela.
Cols - Número de colunas.
W - Tamanho da largura da tabela em % ou Pixels.
H - Tamanho da altura da tabela em % ou Pixels.
O Cellpad e Cellspace - irá mexer nas bordas da tabela, distância, etc.
Align - Alinhamento da tabela: esquerda, direita e meio.
Class - Aplicar um Css já pronto na tabela.
Bgcolor - cor do fundo da tabela.
Brdcolor - Cor da borda da tabela.
Bimage - imagem de fundo, como background.
3.2.3 Propriedades de Página
Para acessar as propriedades da página aperte a tecla Ctrl + J. A seguir
veremos suas funções:
Figura 124 - Configuração de Propriedades de Página
101
Page font - Você escolhe uma fonte para ser usada em sua página.
Size - O tamanho dessa fonte.
Text color - Altera a cor da font.
Background color - Cor do fundo da página.
Background image - Escolha uma imagem de fundo para sua página.
Left margin - Altera a distância da margem esquerda.
Topo margin - Altera a distância do topo da página
Right margin - Altera a distância da margem direita.
Bottom margim - Altera a distância do rodapé.
3.2.4 Propriedades de Imagem
Figura 125 - Configuração de Propriedades de Imagem
SRC(source) - indicar o nome e o directório do ficheiro da
imagem.
Link - deverá definir uma página ou endereço de Internet para
vincular à imagem.
Target - escolhe a área da página onde esta será visualizada.
Alt (alternate) - permite definir um texto a ser mostrado
quando a página for vista em browsers quenão suportem a visualização de
imagens.
Vspace e Hspace - permitem definir um valor em pixéis que
corresponderá à distância, horizontal evertical, em relação à qual, a
imagem será inserida.
Lowsrc (LowResolution Source Image) - é um campo no qual
se pode definir uma imagem em baixa resolução a ser mostrada antes da
imagem definida em SRC.
Border - define em pixels a espessura da borda da imagem.
102
Alinhamento - ajusta o alinhamento da imagem, à esquerda,
centro e à direita em relação ao contexto onde está inserida.
Align - dentro desta caixa do tipo dropdown, pode ver as
seguintes opções: Baseline, Top, Middle,Bottom, Text Top, Absolute
Middle, Absolute Bottom, Left e Right. Todas estas opções indicam o tipo
de alinhamento que a imagem terá.
Figura 126 - Ferramentas de Edição de Imagem
EDIT e OPTIMIZE IN FIREWORKS - Estes dois comandos,
equivalentes aos primeiros botões, enviam a imagem para edição e optimização no
programa da Macromedia para este fim, ou seja, Macromedia Fireworks.
Crop - realiza um corte às aparas da imagem.
Resample - transforma o ficheiro original de uma imagem alterada em
tamanho para que corresponda à imagem no novo aspecto.
Brigtness & Contrast - Este botão permite o ajuste do brilho e
contraste.
Figura 127 - Janela de Configuração de Brilho e Contraste
Sharpen - é o processo pelo qual é possível “alterar a nitidez” de uma.
103
Figura 128 - Janela de Configuração de Nitidez
3.2.5 Propriedades do Flash
Para acessar as propriedades do Flash é só selecionar o seu arquivo em
Flash no Dreamweaver.
Figura 129 - Configuração de Propriedades de Flash
Loop e Autoplay - regula a animação repete-se, indefinidamente, e se
começa de forma automática, respectivamente.
Vspace e Hspace - ajusta a distância em pixéis da animação em
relação à vertical e horizontal ao contexto onde está inserida.
Quality - ajusta a qualidade do flash de acordo com a máquina que
pode ser: Low (sempre mostra em baixa qualidade), Autolow (vai aumentando a
qualidade de acordo com a potencia da máquina), Autohigh (vai diminuindo a
qualidades de acorod com a potencia da maquina) e High (a animação sempre é
vista em alta qualidade).
Scale - ajusta as opções de escala do filme em Flash em relação aos
valores definidos em W e H.
Edit - estará visível se tiver o Flash estalado no computador e permite
editar a sua animação.
Reset Size - o objeto voltar ao seu tamanho original.
104
Play - coloca o objeto no modo como será visualizado no browser.
Parameters: permite a criação de parâmetros adicionais ao código
HTML do objeto FLASH.
3.3 INTEGRAÇÃO
Para simplificar o fluxo e poupar tempo do trabalho do desenvolvedor, o
Dreamweaver faz integração com alguns programas de desenvolvimento pra Web
como: Photoshop, Fireworks, Flash, InDesign, etc.
Para que haja uma integração temos que ter os programas instalados no
mesmo computador.
“Você pode inserir facilmente imagens e conteúdo criados com o Adobe Flash
(arquivos SWF e FLV) em um documento do Dreamweaver. Você também pode
editar uma imagem ou arquivo SWF no editor original depois de inseri-los em um
documento do Dreamweaver, e as atualizações dos códigos são transferidas
corretamente.” “Texto.” (Sobre a Integração do Photoshop, Flash e Fireworks. Em:
<http://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda91
10b1f693f21-7ae0a.html>. Acesso em: 08 Novembro 2010).
Uma das funcionalidades mais usadas com este recurso é a edição de
imagem. Para fazermos a utilização dessa propriedade clicamos na imagem que
está inserida no Dreamweaver e logo abaixo em propriedades tem um botão de
Edição do Fireworks.
Figura 130 - Botão de Edição do Fireworks
Após clicar no botão de edição do Fireworks a imagem abrirá
automaticamente dentro do programa Fireworks, para podermos fazer as alterações.
105
Ao terminar de editar no Fireworks a imagem, tem uma ferramenta chamada
Done no Fireworks, que ao clicar nela, o Fireworks devolve a imagem modificada ao
Dreamweaver.
Figura 131 - Programa de Edição de Imagem Fireworks
3.4 VERSÕES
O Dreamweaver possui várias versões, a sua primeira versão foi lançada em
08 de dezembro de 1997 o “Dreamweaver 1.0”. As versões mais antigas eram
fabricadas pela empresa de desenvolvimento Macromédia e as atuais são
fabricadas pela empresa de desenvolvimento Adobe.
“Suas
versões iniciais serviam como um simples editor HTML WYSIWYG ("What
You See Is What You Get", ou "O que você vê é o que você tem"), porém as suas
versões posteriores incorporaram um notável suporte para várias tecnologias web,
tais como XHTML, CSS, JavaScript, Ajax, PHP, ASP, ASP.NET, JSP, ColdFusion e
outras
linguagens
Server-side.”
“Texto.”
(Dreamweaver.
Em:
<http://www.oficinadanet.com.br/apostilas/71/dreamweaver>.
Acesso
em:
10
Novembro 2010).
MACROMÉDIA:
Dreamweaver 1.0 (Dezembro de 1997)
Dreamweaver 1.2 (Março de 1998)
Dreamweaver 3.0 (Dezembro de 1999)
Dreamweaver UltraDev 1.0 (Junho de 2000)
Dreamweaver 4.0 (Dezembro de 2000)
Dreamweaver UltraDev 4.0 (Dezembro de 2000)
Dreamweaver MX (Maio de 2002)
106
Dreamweaver MX 2004 (10 de Setembro de 2003)
Dreamweaver 8 (13 de Setembro de 2005)
ADOBE:
Dreamweaver CS3 (16 de abril de 2007)
Dreamweaver CS4 (23 de Setembro de 2008)
Dreamweaver CS5 (12 de Abril de 2010)
3.4.1 Processo de evolução recente
3.4.1.1 Dreamweaver MX
A versão do Dreamweaver MX foi a ultima versão com tradução para o
português.
Essa versão trouxe ferramentas de criação de conteudo dinamico, fazendo
com que usuarios sem conhecimento em programação consigam se conectar a
banco de dados para filtrar informações.
3.4.1.2 Dreamweaver 8
Ultima versão do Dreamweaver feita pela empresa de desenvolvimento
Macromedia, essa versão teve uma melhora muito grande nas funções já utilizadas
na versão MX e correções de erros em comportamentos de servidores. Sua principal
novidade foi o surgimento da extensão Ajax ToolBox , pois trouxe a ferramenta
suporte a alguns conceitos básicos de Ajax.
3.4.1.3 Dreamweaver CS3
Essa versão traz o framework Spry, que é um framework para
desenvolvimento de Ajax, para a criação de páginas em Ajax, com ele criamos
menus dinâmicos, componentes de validação de formulários, etc.
107
“O framework Spry permite ainda aplicar efeitos como fade e reduzir ou ampliar
imagens. Tudo é feito visualmente, sem a necessidade de lidar diretamente com
código.Passando assim a ser preferência desde simples usuarios da internet que
desejam ter sua Home Page ate a experientes programdores de web sites.” “Texto.”
(GAY, Jonathan. Dreamweaver CS3. Em: <http://institutoweb.com/materias.php>.
Acesso em: 10 Novembro 2010).
Essa versão trouxe uma ferramenta poderosa de verificação de browser
indicando os problemas de compatibilidade entre os navegadores. Também veio
com uma grande quantidade de layouts baseando-se em possiveis erros no código
causado pelos programadores, o erro é mostrado atraves de um aleta com link
direcionando para o site da adobe.
3.4.1.4 Dreamweaver CS4
Essa versão vem com seu layout totalmente modificado, para que os
profissionais possam ter facilidade ao trabalhar com essa ferramenta.
As novidades por default, da versão se destacam:
Dicas de código para estruturas Ajax e JavaScript
Integração do Subversion®
Conjuntos de dados HTML
Práticas recomendadas para CSS
Todo o tipo de formatação e posicionamento agora é feito por CSS
usando id de tags por default
Outras novidades são as novas extensões que fazem a integração com framework
consagrados. Destacando-se:
Integração com JQuery frameworks
Integração com YUI frameworks
Integração com Google Web ToolKit
108
3.4.1.5 Dreamweaver CS5
O Dreamweaver CS5 tem o seu layout muito parecido com a versão anterior
que é o Dreamweaver CS4.
Ao todo são cinco tipos de pacotes disponíveis nessa versão que são elas:
Master Collection, Design Premium, Design Standard, Web Premium e Production
Premium.
A grande novidade dessa versão foi o Flash Player 10.1 e Adobe AIR 2 que
promete a criação de novos conteúdos e aplicativos gráficos para web.
3.5 VANTAGENS DE SE USAR O DREAMWEAVER
Muitas pessoas têm preconceito de usar o Dreamweaver, principalmente os
programadores que já estão acostumados a lidar com outros editores, e acabam
tendo uma visão errada com esta ferramenta. Vamos ver umas vantagens que esse
editor de códigos ajuda os desenvolvedores:
3.5.1 Auto-completar
A funcionalidade de auto-completar faz com que a elaboração dos códigos
fique mais rápido e produtivo, como acontece isso? Começamos a escrever o código
e ele vai dando opções de complementação do que estamos escrevendo e é só
clicar na opção desejada. Vários editores têm essa funcionalidade de autocompletar, o diferencial do Dreamweaver é que ele busca id’s e classes definidas na
folha de estilos linkada ao documento, o que quase sempre é muito útil.
Uma
grande funcionalidade de auto- completar também é no fechamento das tags, logo
quando abrimos uma tag ele já a fecha.
3.5.2 Gerenciamento de sites
Podemos manusear sites através do Dreamweaver, através do Manage
Sites, podemos fazer isso com sites armazenados localmente ou remotamente, tanto
109
em outro computador da rede quanto em um servidor on-line. Também é possível
especificar o modelo de servidor do site, como por exemplo PHP MySQL, ASP.NET,
JSP, etc. também com acesso local ou via FTP.
Outra funcionalidade é que quando fazemos mudanças no nome de algum
arquivo ou pasta, ele pergunta se queremos atualizar os links contidos nos
documentos e ele atualiza automaticamente os links do site inteiro.
3.5.3 Find/Replace robusto
Permitem várias combinações, incluindo uso de expressões regulares, busca
por tags específicas, busca por textos específicos dentro de tags específicas, busca
no documento atual, em todos os arquivos do site atual, todos os arquivos abertos,
todos os arquivos de uma pasta específica, etc.
3.6 EXTENSÕES DO DREAMWEAVER
Extensões
são
funcionalidades
que
acrescentamos
ao
programa,
Dreamweaver, para que seja feito com mais rapidez e com apenas uns cliques
alguns efeitos, estilos, funções, etc. As extensões devem ser instaladas para que
possa ser utilizadas e para instalar é só dar dois cliques nela.
As extensões são em arquivos “.mxp”.
Figura 132 - Modo de Visualização das Extensões
110
Algumas extensões do Dreamweaver e suas funções:
Gradient - coloca um texto gradiente;
Alpha Color Harmony - auxilia no gerenciamento das cores;
Wintimer - fecha uma janela popup depois de um tempo pré-
determinado;
ListO-Rama - cria um menu muito facilmente;
ICQ_Status - determina o status do ICQ;
FormButtonFever - transfiorma qualquer objeto em um botão submit ou
resete em um formulário;
OpacitySuite - faz com uma uma Layer vá desaparecendo aos poucos;
Marquee - cria um efeito marquee;
Hex Converter - converte uma cor #FFFFFF para RGB (255,255,0);
Banner Image Builder - cria efeitos de transição em Imagens;
DWLCounter110 - contador de downloads;
ZeroPageBorders - insere ;
LiveClock2 - insere a hora no site;
DateStamp - insere a hora e a data no site;
DateInsert - insere a data no site;
RandonLink - link sem #;
Layer Transition - diversos efeitos interessantes em Layer;
ClosePopUpWindows - fecha uma popup com um link;
SmartLink - OpenBrowseWindow com mais recursos;
AnimateWindow - abre uma janela com uma animação e tamanhos
definidos;
RomanianCharacteris - insere caracteres em Romano;
MFX_FullScreen - abre uma janela full;
AditionalFramesets - adiciona mais opçõse de Framesets;
ZoomBrowserWindow - abre uma nova janela em zoom + (só funciona
RealNetworks - insere multimidia Real;
Estados - insere em um formulário todos os Estados Brasileiros;
no IE);
111
MenuBuilder - cria um menu de salto com mais opções;
CN_Insert_Greating - insere bom dia , boa tarde e boa noite;
flexXAutoScroll - cria uma scroll;
Simple_Quizer - cria um sistema de pergunta em múltipla escolha;
p7JumpMenu - um jump menu com mais opções;
Scroll_Status_Bar - insere uma scroll na barra de status;
FastLinkStyles123 - insere estilo CSS em Link (cor e sublihando)
facilmente;
OpenPictureWindow - insere uma popup com as dimensões exatas de
uma figura;
MatchSymbols - insere mais símbolos;
Adv_Email_link - cria um link para email com a mensagem editável;
WrithersSymbols - insere mais símbolos;
Abrir_Janela_Popup - igual OpenBrowserWindow acrescentando a
dostancia da marge esquerda e do topo;
UltimateWindow - OpenBrowserWindow com posição ao no centro;
P7_autoHide - menu rollever;
P7_autoLayers - menu rollover;
SimpleVII_menu - menu rollover;
PD_Iframe_object - cria uma iframe com todas as configurações;
advRandImage3 - cria vários efeitos em imagens;
LayerAnimagic – altera o posicionamento de uma Layer com um
CloseChildWindow - cria um texto , botão ou imagem para fechar a
Go_Back_or_Forward - insere um link de adiantar ou de voltar;
flevSlidediv220 - insere movimento a uma layer bem interessante;
adToFavoritesBH - adiciona aos favoritos;
PHP_upload - cria uma opção de upload em PHP;
ChromelessWin - cria uma janela chomeless no IE;
Gradient_Background1 - insere um efeito gradiente;
QuickLinkAnchors - edita as ancoras facilmente;
evento;
janela;
112
Zindex_of_layers – altera os z-index das layers facilmente;
FX_DWLCounter – insere um contador de downloads;
FX_Counter – insere um contador de visitas;
ChangeCase – troca a caixa de seu texto (alta para baixa e vice-versa);
Transition – efeito de transição de páginas (somente IE);
DMXS-01 – remove recordsets duplicados;
Auto
Copyright
–
insere
Copyright
com
o
corrente
ano
automaticamente;
dHTML SlideShow FullSize in Popup – cria thumbnails que são
passados em um click e ao ser clicado abre uma popup com a imagem aumentada;
dHTML SlideShow FullSize in Page – cria thumbnails que são
passados em um click e ao ser clicado abre a imagem aumentada no documento
corrente;
dHTML SlideShow – cria um SlideShow com imagens e um link para
página anterior;
dHTML Scrollable Area – cria uma scroll;
Previous Page Link – cria um link para a página anterior;
Select Layer – seleciona rapidamente uma determinada layer;
Print – cria um link para impressão (texto , botão ou imagem);
FavIcons – insere um link para sua página.
113
4. UTILIZAÇÃO DAS FERRAMENTAS PARA WEB EM UM
SISTEMA
Foi projetado um Sistema de Carimbos para Web, esse sistema foi feito para
controlar as finanças e as vendas da empresa.
O seu Layout foi todo projetado no editor de Imagem Photoshop, após a sua
elaboração suas imagens foi cortada e salva para Web. Essas ferramentas são
muito úteis, pois ele recorta de uma vez só todas as imagens e na hora de salvar, já
salva como página HTML com as tabelas já prontas e as imagens em uma pasta
separada.
Com a página em HTML já pronta com as imagens, fica muito mais fácil de
inserir os códigos ao abrir essa página feita pelo Photoshop no Dreamweaver.
Esse cadastro possui as seguintes telas: Cadastro de Clientes, Dados do
Cliente, Cadastro de Vendas, Ferramenta de Busca, Fornecedores, Financeiro,
Estoque, Nota Fiscal, Relatório de Ordem de Serviço,
4.1
CADASTRO DE CLIENTES
Foi utilizado o formulario textField para inserir os dados e os botões Submit
(Cadastrar) e Reset (Limpar).
A tela de cadastro de clientes recebe os seguintes dados:
Nome da empresa;
Nome do comprador;
Endereço;
Bairro;
Cidade;
Telefone;
E-mail.
114
Figura 133 - Tela de Cadastro de Clientes
Na tela de dados do Cliente, podemos incluir débitos, alterar dados, e excluir
cliente.
Figura 134 - Tela com os dados dos Clientes, podendo fazer alterações
4.2 Cadastro de Venda
Foi utilizado o formulario textField para inserir os dados.
A tela de cadastro de venda recebe os seguintes dados:
Data emissão;
Cliente;
115
Endereço;
Cidade;
Telefone;
Quantidade;
Produto;
Valor Unitário;
Valor Total.
Figura 135 - Tela de Cadastro de Vendas
4.3 Busca de clientes
O site tem uma ferramenta de busca com 3 tipos. Para fazer a busca,
digitamos o que queremos encontrar, selecionamos o circulo correspondente ao tipo
de busca, que pode ser: Financeiro, nova venda e buscar venda e apertar a tecla
enter.
Foi utilizado a ferramenta de TextField e RadioButton no programa
Dreamweaver.
Figura 136 - Ferramenta de Busca
116
4.4 Lista de ordem de serviço
A lista de ordem de serviço em aberto, serve para termos um controle dos
produtos que não foram entregues ainda, e quanto o cliente tem em crédito com a
empresa.
Ela possui um Radio Button para dizer se já foi feita a entrega do produto,
um botão para fazer Alteração e um para Excluir.
Figura 137 - Tela de Lista de Ordens de Serviços
4.5 Notas fiscais
A nota Fiscal já é impressa com os produtos vendidos e os dados do cliente
e da Empresa, temos um botão para Imprimir esta Nota e depois é só carimbar e
assinar ela, como o sistema já preenche ela inteira, facilita muito o trabalho do
funcionário da empresa.
117
Figura 138 - Tela de Nota Fiscal
4.6 Débitos em aberto
Esta Lista mostra quanto os clientes estão devendo para a empresa, mostra
o valor de cada um.
Figura 139 - Tela de Débitos em Aberto
4.7 Relatorio de vendas do dia
Esta Lista mostra todas as vendas feitas em um determinado dia, possui
uma ferramenta para buscar o dia solicitado, e aparecerá a hora da venda, o cliente
que efetuou a compra, quantidades de produtos e o valor total da compra.
118
Figura 140 - Tela de Relatórios de Vendas do Dia
119
5. CONCLUSÃO
Os softwares Photoshop e Dreamweaver facilitam muito a vida dos
designers, desenvolvedores e programadores. Eles possuem ferramentas modernas
com funções já prontas que dão praticidade e agilidade ao seu trabalho.
Esses softwares vêm crescendo a cada ano que passa e se tornaram os
editores com mais números de clientes de suas categorias.
A cada versão que é lançada a Adobe, a atual empresa que desenvolve
estes Softwares, traz inovações e novas ferramentas muito mais modernas e ágeis.
120
6. REFERÊNCIAS BIBLIGRAFICAS
REMOALDO, Pedro. Guia Prático do Dreamweaver CS3 com PHP, JavaScript e
Ajax. 1ª Edição. Nacional: Editora Centro Atlântico, 2008.
AVILA, Renato Nogueira Perez. Dreamweaver MX 2004. 1ª Edição. Nacional:
Editora Brasport, 2004.
POWERS, David. Guia Essencial para Dreamweaver CS4 com CSS, AJAX e
PHP. 1ª Edição. Nacional: Alta Books, 2009.
VIEIRA, Anderson. Macromedia Dreamweaver 8: Guia Prático e Visual. 1ª Edição.
Nacional: Editora Alta Books, 2006.
VECHIO, Gustavo Del. Adobe Illustrator CS4 – O Design em suas mãos. 1ª
Edição. Nacional: Editora Érica, 2009.
AVILA, Renato Nogueira Perez. Adobe Indesign CS3. 1ª Edição. Nacional: Editora
Brasport, 2009.
VIEIRA, Anderson. Photoshop Elements: Guia Prático e Visual - 2. 1ª Edição.
Nacional: Alta Books, 2006.
FITIPALDI, Mario. Photoshop Essencial - 2010. 1ª Edição. Nacional: Editora
Europa, 2009.
167 Extensões para Dreamweaver. Disponível em: Na Faixa, 2008. <
http://www.nafaixa.net/artigos/699/167-extensoes-para-dreamweaver.htm>. Acesso
em: 20 Outubro 2010.
ALVAREZ, Miguel Angel. O que é uma extensão de Dreamweaver. Disponível em:
Criar Web. <http://www.criarweb.com/faq/definicao_dreamweaver.html>. 21 Outubro
2010.
Extensões
no
Dreamweaver.
Disponível
em:
Web
Master
Web.
<http://www.mxstudio.com.br/photoshop/o_que_e_o_photoshop__/>. Acesso em: 20
Outubro 2010.
121
BARBOSA, Damilsom Pereira. Vantagens das Plataformas Educativas. Disponível
em: Monografias.com. < http://br.monografias.com/trabalhos3/desenho-propostaimplementacao-portal-web/desenho-proposta-implementacao-portal-web3.shtml>.
Acesso em: 20 Outubro 2010.
OLIVEIRA, Carlos Eduardo Treméa de. Adobe Dreamweaver CS5. Disponível em:
Blog
Kadunew,
2010.
<http://www.kadunew.com/blog/dreamweaver/adobedreamweaver-cs5>. Acesso em: 21 Outubro 2010.
PAVARIN, Guilherme. Adobe anuncia CS5 com mais de 250 novidades.
Disponível
em:
Abril,
2010.
<http://info.abril.com.br/noticias/tecnologiapessoal/adobe-anuncia-cs5-com-mais-de-250-novidades-12042010-20.shl>. Acesso
em: 22 Outubro 2010.
RUBINI, Jarder. Faça o Dreamweaver trabalhar a seu favor. Disponível em: Blog
do Jarder,2007.<http://www.mxstudio.com.br/photoshop/o_que_e_o_photoshop__/>.
Acesso em: 22 Outubro 2010.
Sobre a integração com Photoshop, Flash e Fireworks. Disponível em: Adobe.
<http://help.adobe.com/pt_BR/dreamweaver/cs/using/WSc78c5058ca073340dcda91
10b1f693f21-7ae0a.html>. Acesso em: 23 Outubro 2010.
FASCINA, André Felipe. Integrando Fireworks com Dreamweaver MX . Disponível
em:
Baboo,
2003.
<http://www.baboo.com.br/conteudo/modelos/IntegrandoFireworks-com-Dreamweaver-MX_a4613_z0.aspx >. Acesso em: 23 Outubro 2010.
“O que é um Plug-In?“. Disponível em: Blog Turma 10B, 2006.
<http://www.mxstudio.com.br/photoshop/o_que_e_o_photoshop__/>. Acesso em: 24
Outubro 2010.
URBANO, Magno. Dreamweaver. Disponível em: Efeitos Visuais, 2007. <
http://www.efeitosvisuais.com/blog/dreamweaver-livro-gratis/dreamweaver-livrocap1/dreamweaver-livro-c1p002/ >. Acesso em: 24 Outubro 2010.
OLIVEIRA, Thiago Campos de. Dreamweaver Básico. Disponível em: Julio Battisti,
2005.
<
http://www.juliobattisti.com.br/tutoriais/tiagooliveira/dwbasico001.asp>.
Acesso em: 24 Outubro 2010.
122
NIN, Inês. Dreamweaver 8 básico. Disponível em: Portal Mídia. <
http://www.uff.br/portalmidia/Dreamweaverbasico.pdf>. Acesso em: 25 Outubro
2010.
Dreamweaver Tutorial – Dreamweaver Interface. Disponível em: Expert Rating<
http://www.expertrating.com/courseware/DreamweaverCourse/DreamweaverInterface-1-1.asp>. Acesso em: 25 Outubro 2010.
MELO, Filipe. Formatos de arquivos no Photoshop. Disponível em: iMasters,
2007.<http://imasters.com.br/artigo/6707/photoshop/formatos_de_arquivos_no_phot
oshop/>. Acesso em: 26 Outubro 2010.
MELO, Filipe. Modos de cor no Photoshop. Disponível em: iMasters, 2007. <
http://imasters.com.br/artigo/6738/photoshop/modos_de_cor_no_photoshop/
>. Acesso em: 26 Outubro 2010.
LODY, Fabio. Teclas de atalho do Photoshop. Disponível em: iMasters, 2003. <
http://imasters.com.br/artigo/964/photoshop/teclas_de_atalho_do_photoshop/>.
Acesso em: 26 Outubro 2010.
CULEN, Marcelo. O que é o Photoshop. Disponível em: MX Studio, 2009. <
http://www.mxstudio.com.br/photoshop/o_que_e_o_photoshop__/>. Acesso em: 27
Outubro 2010.
REDWOOD, Robert. Photoshop History. Disponível em: Easy Elements. <
http://www.easyelements.com/photoshop-history.html>. Acesso em: 27 Outubro
2010.
MELO, Filipe. Photoshop CS3: Smart Filters e Seleção. Disponível em: iMasters,
2007.<http://imasters.com.br/artigo/6762/photoshop/photoshop_cs3_smart_filters_e_
selecao/>. Acesso em: 27 Outubro 2010.
Nicholson, Mary. Photoshop. Disponível em: Virtual Training Help Center<
http://iit.bloomu.edu/vthc/photoshop/basics/interface.htm>. Acesso em: 28 Outubro
2010.
Introducton
to
Adobe
Photoshop.
Disponível
em:
Extropia.
http://www.extropia.com/tutorials/photoshop/menu_bar.html>.
Acesso
em:
Outubro 2010.
<
27
123
7. ANEXOS
7.1 CÓDIGO DAS TELAS DO SISTEMA
cadFornecedor.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
dim nome,tel,email,endereco,bairro,cidade,uf,cnpj,empresa
nome = request("nome")
tel = request("telefone")
email = request("email")
endereco = request("endereco")
bairro = request("bairro")
cidade = request("cidade")
uf = request("uf")
cnpj = request("cnpj")
empresa = request("empresa")
set CMD=Server.CreateObject("ADODB.COMMAND")
CMD.ActiveConnection= "Provider=Microsoft.Jet.OLEDB.4.0;Data
Source="&Server.MapPath("banco/banco.mdb")
CMD.CommandText ="INSERT INTO
fornecedores(nome,telefone,email,endereco,bairro,cidade,uf,cnp
j,empresa)VALUES(?,?,?,?,?,?,?,?,?)"
CMD.Execute
x,Array(nome,tel,email,endereco,bairro,cidade,uf,cnpj,empresa)
set CMD=nothing
CMD=close
response.Write("INCLUIDO COM SUCESSO!")
%>
124
cadNota.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
cliente = request("cliente")
os = request("ordem")
data = request("data")
valor = request("valor")
if((request("recebido"))="")then
recebido = UCase("Atendente")
else
recebido = UCase(request("recebido"))
end if
set conexao=server.CreateObject("ADODB.COMMAND")
conexao.activeconnection="PROVIDER=MICROSOFT.JET.OLEDB.4.0;DAT
A SOURCE="&server.MapPath("banco/banco.mdb")
conexao.commandText = "SELECT * FROM debito where os = "&os&""
set rsConfirma = conexao.execute
if rsConfirma.EOF then
conexao.commandtext="INSERT INTO
debito(idcliente,os,data,valor,recebidopor)VALUES("&cliente&",
'"&os&"','"&data&"','"&valor&"','"&recebido&"')"
set rsdebito=conexao.execute
response.Write("DADOS INSERIDOS COM SUCESSO")
else
response.Write("JA EXISTE CADASTRO PARA ESTA NOTA!")
end if
set conexao=nothing
set rsdebito = nothing
conexao=close
%>
125
clientes.asp
<%@ Language=VBScript
%><%response.ContentType="text/xml"%><?xml version="1.0"
encoding="ISO-8859-1"?>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
pessoas=request("pessoas")
id=request("id")
telefone=request("tel")
set CMD=Server.CreateObject("ADODB.COMMAND")
CMD.ActiveConnection= "Provider=Microsoft.Jet.OLEDB.4.0;Data
Source="&Server.MapPath("banco/banco.mdb")
if(pessoas<>"")then
'busca por empresa
CMD.CommandText ="SELECT TOP 13 * FROM clientes where empresa
LIKE '%"&pessoas&"%' order by empresa"
else
if(telefone<>"")then
'busca por tel
CMD.CommandText ="SELECT TOP 13 * FROM clientes where telefone
LIKE '"&telefone&"%' ORDER BY telefone "
else
CMD.CommandText ="SELECT * FROM clientes where id = "&id&" "
end if
end if
set rsclientes = CMD.Execute %>
<dados>
<%while not rsclientes.eof%>
<cadastro>
<cod><%=rsclientes("id")%></cod>
<nome><%=rsclientes("cliente")%></nome>
<telefone><%=rsclientes("telefone")%></telefone>
<empresa><%=rsclientes("empresa")%></empresa>
<rua><%=rsclientes("rua")%></rua>
<cidade><%=rsclientes("cidade")%></cidade>
<mail><%=rsclientes("email")%></mail>
<foto><%=rsclientes("foto")%></foto>
<bairro><%=rsclientes("bairro")%></bairro>
</cadastro>
<%rsclientes.movenext
wend%>
</dados>
<%
rsclientes.close
set rsclientes=nothing
set conexao=nothing %>
126
debitosDetalhados.asp
<%@ Language=VBScript
%><%response.ContentType="text/xml"%><?xml version="1.0"
encoding="ISO-8859-1"?>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
dim id
id = request("id")
set conexao = server.CreateObject("ADODB.COMMAND")
conexao.ActiveConnection=
"Provider=Microsoft.Jet.OLEDB.4.0;Data
Source="&Server.MapPath("banco/banco.mdb")
conexao.CommandText = "SELECT d.*,c.* FROM debito d INNER JOIN
clientes c ON c.id = d.idcliente WHERE pago = false and
idcliente = ? ORDER BY data"
set rsDetalhes = conexao.execute(,id)
if rsDetalhes.eof then
response.Write("<mensagem>NÃO EXISTE NOTA</mensagem>")
else
%>
<detalhes>
<cabecalho fone='<%=rsDetalhes("telefone")%>'
cod='<%=rsDetalhes("c.id")%>'><%=rsDetalhes("empresa")%></cabe
calho>
<endereco><%=rsDetalhes("rua")&" - "&rsDetalhes("bairro")&" "&rsDetalhes("cidade")%></endereco>
<email><%=rsDetalhes("email")%></email>
<debitos>
<%while not rsDetalhes.eof%>
<nota cod='<%=rsDetalhes("d.id")%>'
data='<%=rsDetalhes("data")%>'
recPor='<%=rsDetalhes("recebidopor")%>'
osN='<%=rsDetalhes("os")%>'><%=FormatCurrency(rsDetalhes("valo
r"))%></nota>
<%
rsDetalhes.movenext
wend %>
</debitos>
</detalhes>
<%
end if
rsDetalhes.close
set rsDetalhes = nothing
set conexao = nothing
%>
127
Default.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
%>
<!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" />
<meta name="author" content="Jean Carlos" />
<meta name="distribution" content="Global" />
<meta name="robots" content="ALL" />
<title>ΞO CarimbeiroΞ</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/relatorios.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/vendas.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/menus.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" language="javascript" src="script/vendas.js"></script>
<script type="text/javascript" language="javascript" src="script/clientes.js"></script>
<script type="text/javascript" language="javascript" src="script/chamadas.js"></script>
<script type="text/javascript" language="javascript" src="script/financeiro.js"></script>
<script type="text/javascript" language="javascript" src="script/uteis.js"></script>
<script type="text/javascript" language="javascript"
src="script/construtorDeBusca.js"></script>
<script type="text/javascript" language="javascript" src="script/relatorios.js"></script>
<script type="text/javascript" language="javascript" src="script/buscaVendas.js"></script>
<script type="text/javascript" language="javascript" src="script/cadFornecedor.js"></script>
<link rel="shortcut icon" href="imagens/favicon.ico" type="image/x-icon" />
</head>
<body>
<center><img src="imagens/logo.jpg" alt="O Carimbeiro" class="logo" /><div id="diaHora"
title=""><script>document.write(new uteis().getDataEscrita());</script></div></center>
<div id="campoBusca">
<form id="formulario" name="formulario" action="">
<span style="margin:0;">Buscar : <span class="tipo">
<input id="nome" name="nome" type="radio" value="radiobutton" checked="checked"
title="Efetuar busca por Empresa"/>
Por Empresa
<input id="tel" name="nome" type="radio" value="radiobutton" title="Efetuar busca por
Telefone" />
Por Telefone </span></span>
<br />
128
<input id="emp" name="emp" type="text" size="50" onkeyup="return
construtorDeBusca(this.value,this.id,'clientes.asp','dados');" ondblclick="this.value = '';"
title="Digite um texto para iniciar a Busca" tabindex="0" /><br />
<span class="tipo"><input id="financeiro" type="radio" name="busca" checked="checked"
title="Financeiro" />Financeiro<input id="radioVendas" type="radio" name="busca"
title="Vendas" onclick="return venda();" />
Nova Venda</span>
<span class="tipo">
<input id="buscaVenda" type="radio" name="busca" title="Vendas" onclick="return
BuscaVendas();" />
</span>
<span class="tipo">Busca Venda</span>
</form>
<div id="fundoPreto" style="display:none;"></div>
<div id="menu">
<ul id="menuTopo">
<li id="menuCliente"><a
href="javascript:formularioDeCadastroDeClientes()">Clientes</a></li>
<li id="menuRelatorio"><a
href="javascript:relatorioDeDebitos()">Relatórios</a></li>
<li id="menuVenda"><a href="javascript:formularioDeVenda();">Vendas</a></li>
<li id="menuEstoque"><a
href="javascript:formularioDeCadastroDeFornecedor();">Estoque</a></li>
</ul>
</div>
<br />
<div id="cont">
</div>
</div>
<div id="selecionados"></div>
<div id="pagina"></div>
<div id="flutuantes"></div>
</body>
</html>
129
gerarOrdemServico
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
dim cliente,hora,data,mensagem
hora = request("hora")
cliente = request("cliente")
data = request("data")
if(hora <15)then
hora = 13
else
hora = 17
end if
set conexao = Server.CreateObject("ADODB.COMMAND")
conexao.ActiveConnection =
"Provider=Microsoft.Jet.OLEDB.4.0;Data
Source="&Server.MapPath("banco/banco.mdb")
conexao.commandText = "SELECT * FROM ordemServico WHERE data
like '%"&data&"%' AND idcliente = "&cliente&" AND hora =
"&hora&""
SET pesquisa = conexao.execute
if pesquisa.eof then
conexao.commandText = "INSERT INTO
ordemServico(idcliente,hora,data)VALUES(?,?,?)"
conexao.execute x,ARRAY(cliente,hora,data)
conexao.commandText = "SELECT * FROM ordemServico WHERE
data like '%"&data&"%' AND idcliente = "&cliente&" AND hora =
"&hora&""
SET pesquisa = conexao.execute
response.Write("ORDEM: "&pesquisa("ordem")&" CADASTRADA
COM SUCESSO!")
else
response.Write("ORDEM: "&pesquisa("ordem")&" POSSUI
CADASTRO!")
end if
%>
130
insereCliente.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
dim cliente,telefone,email,rua,empresa,bairro,cidade,foto
cliente = Ucase(request("cliente"))
telefone = Ucase(request("telefone"))
email = Lcase(request("email"))
empresa = Ucase(request("empresa"))
rua = Ucase(request("rua"))
bairro = Ucase(request("bairro"))
cidade = Ucase(request("cidade"))
foto = "imagens/fundo.jpg"
if(email="")then
email = "não possui"
end if
if(telefone="")then
telefone = "0000-0000"
end if
if(empresa="")then
empresa = cliente
end if
if(cliente="")then
cliente = empresa
end if
set conexao = Server.CreateObject("ADODB.COMMAND")
conexao.ActiveConnection =
"Provider=Microsoft.Jet.OLEDB.4.0;Data
Source="&Server.MapPath("banco/banco.mdb")
conexao.commandText = "INSERT INTO
clientes(cliente,telefone,email,rua,empresa,bairro,cidade,foto
)VALUES(?,?,?,?,?,?,?,?)"
conexao.execute
x,ARRAY(cliente,telefone,email,rua,empresa,bairro,cidade,foto)
%>
DADOS INSERIDOS
131
excluirCliente.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
dim cliente
cliente = request("cliente")
set CMD=Server.CreateObject("ADODB.COMMAND")
CMD.ActiveConnection= "Provider=Microsoft.Jet.OLEDB.4.0;Data
Source="&Server.MapPath("banco/banco.mdb")
CMD.CommandText ="DELETE FROM clientes WHERE id = ?"
set rs = CMD.Execute(,cliente)
set CMD=nothing
CMD=close
set rs = nothing
Response.Write("Cliente Excluido!")
%>
132
insereVenda.asp
<%@ Language=VBScript %>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
dim cliente,quant,produto,valorUnit,valorTotal,data,mensagem
cliente = request("cliente")
quant = request("quant")
produto = request("produto")
valorUnit = request("valorUnit")
valorTotal = request("valorTotal")
data = request("data")
hora = request("hora")
if(hora <15)then
hora = 13
else
hora = 17
end if
set conexao = Server.CreateObject("ADODB.COMMAND")
conexao.activeconnection="PROVIDER=MICROSOFT.JET.OLEDB.4.0;DAT
A SOURCE="&server.MapPath("banco/banco.mdb")
conexao.commandText = "INSERT INTO
venda(cliente,quant,produto,valorUnit,valorTotal,data,hora)VAL
UES("&cliente&","&quant&",'"&Ucase(produto)&"',"&valorUnit&","
&valorTotal&",'"&data&"',"&hora&")"
conexao.execute
response.Write("OK")
%>
133
listaDebitos.asp
<%@ Language=VBScript
%><%response.ContentType="text/xml"%><?xml version="1.0"
encoding="ISO-8859-1"?>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
set CMD=Server.CreateObject("ADODB.COMMAND")
CMD.ActiveConnection= "Provider=Microsoft.Jet.OLEDB.4.0;Data
Source="&Server.MapPath("banco/banco.mdb")
CMD.CommandText ="SELECT count(*) AS notas,(SUM(valor)) AS
subTotal,c.empresa,c.id,(SELECT (sum(valor)) FROM debito WHERE
pago = false) as TOTAL FROM DEBITO d INNER JOIN clientes c ON
c.id = d.idcliente WHERE PAGO = FALSE GROUP BY
c.id,d.idcliente,c.empresa ORDER BY (SUM(valor)) DESC"
set rsDebitos = CMD.Execute
if rsDebitos.EOF then
mensagem = "NÃO EXISTE REGISTRO DE DÉBITOS"
response.Write("<mensagem>"&mensagem&"</mensagem>")
else
%>
<debitos total='<%=FormatCurrency(rsDebitos("total"))%>'
totalGraf='<%=rsDebitos("total")%>'>
<%while not rsDebitos.eof%>
<empresa cod='<%=rsDebitos("id")%>'
debito='<%=FormatCurrency(rsDebitos("subTotal"))%>'
debGrafito='<%=rsDebitos("subTotal")%>'
quantNotas='<%=rsDebitos("notas")%>'><%=rsDebitos("empresa")%>
</empresa>
<%rsDebitos.movenext
wend%>
</debitos>
<%
end if
rsDebitos.close
set rsDebitos=nothing
set CMD=nothing
%>
134
relatorio.asp
<%@ Language=VBScript
%><%response.ContentType="text/xml"%><?xml version="1.0"
encoding="ISO-8859-1"?>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
dim data
data = request("data")
Set conexao = Server.CreateObject("ADODB.COMMAND")
conexao.ActiveConnection =
"Provider=Microsoft.Jet.OLEDB.4.0;Data
Source="&Server.MapPath("banco/banco.mdb")
'RELATÓRIO COMPLETO DO DIA
'CONTENDO = total do dia; total do cliente; data; horario do
pedido; POR DATA
conexao.CommandText = "SELECT c.id AS
cod,c.empresa,sum(v.quant) AS quantidade,sum(v.valorTotal) AS
parcial,v.data,v.hora,(SELECT sum(v.valorTotal) FROM clientes
c INNER JOIN venda v ON c.id = v.cliente WHERE v.data like
'%"&data&"' ) AS total FROM clientes c INNER JOIN venda v ON
c.id = v.cliente WHERE v.data like '%"&data&"' GROUP BY
c.id,v.cliente,c.empresa,v.data,v.hora ORDER BY hora"
Set rsRelatorioFechamento = conexao.execute
%>
<relatorio dia='<%=rsRelatorioFechamento("data")%>'
total='<%=FormatCurrency(rsRelatorioFechamento("total"))%>' >
<%while not rsRelatorioFechamento.eof%>
<empresa cod='<%=rsRelatorioFechamento("cod")%>'
horario='<%=rsRelatorioFechamento("hora")%>'
quant='<%=rsRelatorioFechamento("quantidade")%>'
subTotal='<%=FormatCurrency(rsRelatorioFechamento("parcial"))%
>'><%=rsRelatorioFechamento("empresa")%></empresa>
<%rsRelatorioFechamento.movenext
wend%>
</relatorio>
<%
Set conexao = nothing
%>
135
cadastrarSaldo.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
dim data,valor,obs,debito,mensagem,forma
mensagem = "Cadastrado com Sucesso"
data = request("data")
valor = request("valor")
obs = UCase(request("obs"))
debito = request("debito")
forma = request("forma")
set CMD=Server.CreateObject("ADODB.COMMAND")
CMD.ActiveConnection= "Provider=Microsoft.Jet.OLEDB.4.0;Data
Source="&Server.MapPath("banco/banco.mdb")
CMD.CommandText ="INSERT INTO
credito(datapgto,valor,obs,iddebito,forma)VALUES(?,?,?,?,?)"
CMD.Execute x,Array(data,valor,obs,debito,forma)
set CMD=nothing
CMD=close
response.Write(mensagem)
%>
136
buscaVenda.asp
<%@LANGUAGE="VBSCRIPT"%><%response.ContentType="text/xml"%><?x
ml version="1.0" encoding="ISO-8859-1"?>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
'Abrimos a Conexão com o Banco
Dim caminho,conexao
digitado = request("digitado")
caminho = Server.MapPath("banco/banco.mdb")
Set conexao = Server.CreateObject("ADODB.Connection")
conexao.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data
Source="&caminho&";"
'selecionando todas as fotos da tabela
Set rs = Server.CreateObject("ADODB.Recordset")
Busca = "SELECT
c.*,v.data,v.produto,v.valorUnit,v.quant,v.valortotal,v.hora
FROM venda v INNER JOIN clientes c ON c.id = v.cliente WHERE
v.cliente = "&digitado&" ORDER BY v.data"
rs.open Busca, conexao, 3, 3
'Definimos o Numero de Paginas com a propriedade "PageSize" do
objeto Recordset
rs.PageSize = 10
Session("pag") = rs.PageCount
if rs.eof then
Mensagem = "Nenhum Registro Encontrado"
Response.End
else
'Definimos em qual pagina o visitante está
if Request.QueryString("pagina")="" then
intpagina = 1
else
if cint(Request.QueryString("pagina"))<1 then
intpagina = 1
else
if cint(Request.QueryString("pagina"))>rs.PageCount then
intpagina = rs.PageCount
else
intpagina = Request.QueryString("pagina")
end if
end if
end if
end if
137
%>
<raiz>
<empresa><%=rs("empresa")%></empresa>
<telefone><%=rs("telefone")%></telefone>
<rua><%=rs("rua")%></rua>
<bairro><%=rs("bairro")%></bairro>
<tel><%=rs("telefone")%></tel>
<email><%=rs("email")%></email>
<listagem>
<%
rs.AbsolutePage = intpagina
intrec = 0
While intrec<rs.PageSize and not rs.eof
%>
<venda data='<%=rs("data")%>' quant='<%=rs("quant")%>'
produto='<%=rs("produto")%>'
vUnit='<%=FormatCurrency(rs("valorunit"))%>'
vTotal='<%=FormatCurrency(rs("valortotal"))%>'></venda>
<%
rs.MoveNext
intrec = intrec + 1
cont = not cont
Wend
%>
</listagem>
<paginas><%=rs.pageCount%></paginas>
</raiz>
<%
rs.close
Set rs = Nothing
%>
138
alteraNota.asp
<%@ Language=VBScript %>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
os = request("os")
data = request("data")
valor = request("valor")
recebidopor = UCase(request("ass"))
id = request("cod")
dim saldoAtualizado,mensagem
mensagem = ("Atualizado com Sucesso!")
if(request("saldo")="")then
saldo = 0
else
saldo = request("saldo")
end if
set CMD=Server.CreateObject("ADODB.COMMAND")
CMD.ActiveConnection= "Provider=Microsoft.Jet.OLEDB.4.0;Data
Source="&Server.MapPath("banco/banco.mdb")
CMD.CommandText ="SELECT valor,saldo FROM debito WHERE id =
"&id&""
SET rsSaldo = CMD.execute
saldoAtualizado = (rsSaldo("saldo")+saldo)
if(saldoAtualizado<=rsSaldo("valor"))then
CMD.CommandText ="UPDATE debito set os = ?, data = ?,
valor = ?, recebidopor = ?,saldo= ? WHERE id = ? "
CMD.Execute
x,Array(os,data,valor,recebidopor,saldoAtualizado,id)
else
mensagem = ("Saldo maior que o valor devido")
end if
CMD=close
set CMD=nothing
set rsDebito= nothing
response.Write(mensagem)
%>
139
alteraCliente.asp
<%@ Language=VBScript
%><%response.ContentType="text/xml"%><?xml version="1.0"
encoding="ISO-8859-1"?>
<%
'if(Session("MM_Username")="")then
'response.Redirect("login.asp")
'end if
dim cliente,telefone,email,rua,empresa,bairro,cidade,id
cliente = UCase(request.QueryString("cliente"))
telefone = request.QueryString("telefone")
email
= LCase(request.QueryString("email"))
rua = UCase(request.QueryString("rua"))
empresa
= UCase(request.QueryString("empresa"))
bairro
= UCase(request.QueryString("bairro"))
cidade
= UCase(request.QueryString("cidade"))
id = request.QueryString("id")
set CMD=Server.CreateObject("ADODB.COMMAND")
CMD.ActiveConnection= "Provider=Microsoft.Jet.OLEDB.4.0;Data
Source="&Server.MapPath("banco/banco.mdb")
CMD.CommandText ="UPDATE clientes set
cliente='"&cliente&"',telefone='"&telefone&"',email='"&email&"
',rua='"&rua&"',empresa='"&empresa&"',bairro='"&bairro&"',cida
de='"&cidade&"' WHERE id = "&id&""
set rsclientes = CMD.Execute
%>
<raiz>
<cliente id='<%=id%>'>ATUALIZADO COM SUCESSO</cliente>
</raiz>
<%
set CMD=nothing
set rsclientes= nothing
CMD=close
%>
Download
