domingo, abril 18, 2010

COMO EDITAR OS ARQUIVOS HTML NO DREAMWEAVER

Abrir o arquivo HTML
Para abrir o arquivo HTML com o editor você deverá selecionar Arquivo/Abrir (File/Open) no menu superior e em seguida procurar na pasta onde os arquivos estão salvos.
Abrir o arquivo HTML

Modo de Edição Visual no Dreamweaver
Modo Normal no FrontPage


Caixa de Inserção de Links


Caixa de Endereços

Barra de Ferramentas de Texto do FrontPage

Painel de Propriedades do Dreamweaver

Propriedades de Imagem do FrontPage


COMO EDITAR OS ARQUIVOS PSD NO PHOTOSHOP

Abrir o arquivo PSD
Um arquivo PSD é composto de camadas onde estão dispostos todos os elementos que compõem o desenho, facilitando desta forma a edição individual de imagens, textos, etc. Para trabalhar com os arquivos PSD, você precisa ter o Adobe Photoshop instalado no computador. É possível fazer qualquer tipo de modificações no seu template com este poderoso editor, o Adobe Photoshop.
Você deve carregar o arquivo PSD no Photoshop para poder editar o seu template. É muito simples. Selecione File/Open no menu superior e procure o arquivo na pasta correspondente. Uma maneira mais simples é arrastar o arquivo do Explorer diretamente para o programa. Se os arquivos PSD estiverem associados ao Photoshop no seu computador, basta um clique duplo no arquivo para abri-lo e iniciar o programa, se este não estiver ativo.

Modificar o Texto
A maior parte dos textos é apresentada em HTML para simplificar a sua edição e ainda permitir que os sites de busca façam a leitura das informações contidas no site. Lembre-se que os sites de busca não reconhecem imagens, flash, java scripts, etc. Por isso é importante ter bom conteúdo em todas as páginas do seu web site, assim você terá mais chances de obter um bom posicionamento nos motores de busca.
Mas para que os visitantes permaneçam e retornem ao site, as suas páginas devem ter além de bom conteúdo, uma boa apresentação. Por isso algumas partes do texto são apresentadas como imagens no arquivo HTML. Estas imagens são editadas no arquivo PSD com o Photoshop. Abaixo serão descritas formas de editar este tipo de texto. Para saber como editar o texto simples em HTML
Depois de ter aberto o arquivo PSD no Adobe Photoshop, pressione a tecla “T” para abrir ferramenta de texto. Clique com o cursor “Type” na porção de texto que deseja editar. Se aparecer a mensagem “The following fonts are missing…” significa que você não instalou todas as fontes que acompanham o pacote do template. Para instruções sobre a instalação das fontes
Se o campo de texto tiver várias linhas você pode iniciar a digitação em uma nova linha pressionando “Shift + Enter”.
Para finalizar o modo de edição do texto, pressione “Ctrl + Enter”. Se quiser finalizar a edição do texto e descartar todas as modificações feitas, pressione a tecla “ESC”.
Se desejar modificar os atributos do texto, como o tipo de fonte, estilo e cor, basta selecionar o texto desejado e editá-lo no painel de opções, que se encontra na parte superior da tela. Se não conseguir visualizar este painel, selecione-o em Window/Options no menu superior.

Painel de Opções
Como alterar imagens no Adobe Photoshop
Um importante passo na criação de um web site único a partir dos nossos templates é inserir o logotipo de sua empresa e suas próprias imagens. Se você está iniciando um novo projeto na internet a ainda não possui um logotipo poderá adquirir um em nossa seção de logos
Para iniciar a edição de imagens, carregue o arquivo PSD no Photoshop.
Antes de inserir a sua imagem no template você deve remover ou esconder a imagem original. Prefira a opção de esconder a imagem se precisar utilizá-la futuramente. Para qualquer das opções, remover ou esconder, primeiro você terá que localizar a camada que contém a imagem. A maneira mais fácil de fazer isto é clicar na imagem pressionando a mesmo tempo a tecla “Ctrl”. Mas se existe alguma camada transparente sobre a camada da imagem você terá que ter um pouco mais de cuidado, pois a camada superior será selecionada ao invés da camada de imagem desejada.
Painel de Camadas:Para verificar o conteúdo da camada atual faça o seguinte. Vá até ao painel de camadas, escolha Window/Layers se este painel não estiver visível. Descubra a camada que está marcada na lista de camadas – esta é a camada atual que está selecionada. No lado esquerdo do nome da camada existe um ícone no formato de um “olho”. Clique algumas vezes neste ícone para mostrar/ocultar a camada e veja qual elemento de imagem desaparece do desenho geral. Se esta é a imagem que deseja remover, você está quase lá! Se a seleção da camada não é a correta, você pode usar outra opção. Clique como o botão direito do mouse sobre a imagem. Com isto serão mostradas todas as camadas que ocupam aquela posição no desenho. Experimente com as diferentes camadas até encontrar a que deseja. Use o procedimento descrito acima para ter a certeza que selecionou a camada correta.
Clique com o Botão Direito do Mouse mostra a lista de camadas Uma vez que você conseguiu selecionar a camada com a imagem que deseja remover. Para ocultar a imagem clique no ícone em forma de olho no lado esquerdo do nome da camada. Se preferir remover definitivamente a imagem clique no ícone da lixeira no canto inferior direito do painel de camadas.
Agora você já pode inserir a sua imagem no arquivo PSD, é muito fácil. Basta arrastar do file browser diretamente para o Photoshop. Ou ainda File/Open… no menu superior. A imagem irá aparecer em uma nova janela. Podem ser feitas modificações prévias na imagem nesta etapa. Por exemplo, você poderá recortá-la com a ferramenta de corte (tecla de atalho “C”) ou efetuar ajustes de cor para que a imagem fique compatível com esquema de cores do template.
O próximo passo é mover a imagem para dentro do template PSD. Para isto selecione a ferramenta Move no painel de ferramentas ou use o atalho “V”. Depois usando esta ferramenta arraste e cole a imagem para dentro do template.
Com a mesma ferramenta, mova a imagem para o local apropriado. Se a imagem que escolheu está sobreposta por outras imagens ou texto você deverá movê-la para a parte superior da lista de camadas. Vá até o painel de camadas e arraste esta camada para a cima, até a sobreposição desaparecer.
Depois de ter feito todas as alterações nas imagens você deve atualizar estas mudanças no template.
Como mudar as cores dos gráficos no Adobe Photoshop
Durante a personalização do seu template talvez seja necessário modificar as cores de alguns elementos de imagem, de maneira a adequá-los às cores de sua empresa. Nesta seção você irá aprender como fazer estas alterações.
Se desejar alterar as cores de um elemento isolado, primeiro você deve localizar a respectiva camada. Siga os passos descritos na etapa anterior.
Quando a camada que deseja editar estiver selecionada, você deverá fazer o seguinte. Escolha Image/Adjustment/Color Balance… no menu superior ou use o atalho
Ctrl + B”. Irá aparecer a janela Color Balance. Nesta janela você verá três controles deslizantes. Experimente com cada um deles até estar satisfeito com o resultado. Agora confirma as alterações de cores com um clique no botão Ok ou cancele as mudanças pressionando o botão Cancel.
Janela Color Balance


New Adjustment Layer

Agora é hora de atualizar as modificações no arquivo HTML com o comando Save For Web. Selecione File/Save For Web… no menu superior ou utilize o atalho “Ctrl+Alt+Shift+S”. A janela Save For Web irá aparecer.
Nesta janela serão feitas as otimizações das imagens que serão exportadas. Na verdade os nossos designers já otimizaram as imagens para a melhor relação qualidade/tamanho do arquivo. Mas se você desejar que o seu web site carregue mais rápido, pode diminuir a qualidade das imagens, reduzindo com o isso o tamanho das mesmas e o conseqüente tempo de download. Selecione com a ferramenta Select Slice o slice correspondente à imagem que deseja otimizar. No lado direito da janela Save For Web existe um painel com as opções de imagem.
Você poderá alterar os valores da caixa de seleção de qualidade para as imagens JPEG ou quantidade de cores para as imagens no formato GIF e PNG.
Agora selecione o slice que deseja atualizar clicando no mesmo com a ferramenta Select Slice. Se desejar atualizar vários slices ao mesmo tempo selecione-os mantendo a tecla “Shift” pressionada.
Opções de Imagens
Janela Save Optimized

Confirmação de Substituição das Imagens