valefotográfico
Divirta-se e aguarde todas nossas atualizações, se este Fórum te ajudou, registra-se, e venha fazer parte do Vale Fotográfico.
E o mais importante, seja bem-vindo ao fórum!

Imagem do Mês
Autor(a):Marcelo Rezende
Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 29 em 21/10/2013, 20:07
Conectar-se

Esqueci minha senha

Votação

O fórum deve ser melhorado? Deixe sua opinião!

 
 
 
 
 

Exibir resultados


Tutorial: Downloads, personalização de Layouts e hospedagem de site

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 9/8/2009, 18:16

1ª Parte

Nosso objetivo com este tutorial e fazer Downloads de Templates e Layouts prontos e personalizar, fazer teste de funcionamento e hospedar de forma grátis ou paga, mas de preferência em Templates e Layouts HTML, Java escript e CSS básico, conforme vamos passando por cada processo vou disponobilizar link para downloads, mas por enquanto pesso a todos que queiram acompanhar este tutorial que faça downloads de algumas apostilas que vão ser util para consulta, todos os downloads deste tutorial estão disponivel no fórum>geral>downloads.

1) Apostila para Webdesign iniciantes: Aqui - Curso Webdesigner para iniciantes



2) Guia de Hospedagem Grátis :Aqui - Guia de Hospedagem

Vamos precisar de alguns programas, mas conforme for necessário vamos postando.

Para baixar Templates e Layouts e bem simples, mas estão compactados em Zip, caso não tenha instalados um descompactador Zip instale este que estou usando atualmente Zip Genius.
Aqui - Zip Genius

ZipGenius6.1.0.1010
Compactador e descompactador ZIP com recursos especiais, como criptografia para proteção dos arquivos gerados etc.
Spoiler:

Eu opitei por este Templates, caso queira baixar o mesmo
Click Aqui!


Ou se preferir escolha outro Aqui - Templates e Layouts

Quando Baixar o templates tera que descompactar com um descompactador, exemplo do Zip Genius, atenção selecione todo o conteúdo e salve em uma pasta para que fique de forma mais organizada, no menu do Zip genius click em Estract para salvar.
Veja:

Se for necessário vamos reeditar para melhor compreensão de todos os interessados.


Última edição por Marcelo Rezende em 12/8/2009, 18:58, editado 5 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 9/8/2009, 20:26

2ª Parte
Após fazer downloads do layouts vamos excluir pastas que não vamos utilizar, vamos usar apenas a pasta HTML, duplicar esta pasta como HTML_copia, nesta pasta contém uma página html e uma pasta com image, eu criei mais uma pasta com nome de social, não podemos usar letras maiúsculas nem espaços ou acentos!

Exemplo:

Errado: Social - Certo: social

Errado: social 2 - Certo: social_2
Spoiler:

Veja esta imagem:


Este Layouts esta com as imagens fora do padrão para as imagens que vou utilizar, neste caso vou usar Navegador Explorer e Bloco de notas para fazer modificações nas medidas da foto.
Vamos então no menu Exibir>Código Fonte, no bloco de notas veja:


Vamos modificar as medidas mas com o máximo de cuidado, para quem nunca tentou duplique a pasta HTML que contém todas as imagens e página para se tiver algum problema possa voltar a fazer novamente.
Veja:


Nesta seleção estamos mostrando as medidas da foto central da página, foto em destaque, Largura de 200 e Altura de 230, mas não quero esta medida, então mudo para Largura de 300 e Altura de 200.
Veja:


Na pasta social todas as fotos estão nomeadas sem letras maiúsculas e espaços, como exemplo acima. Atenção com o código. Selecionei uma foto para destaque na pasta social, então veja:


Estamos vendo no código img src:"images/photo1.jpg vamos mudar para
src:"social/1.jpg .

Pasta: social
Imagem dentro da pasta: 1.jpg
Veja:

Mantenha o Navegador Explorer e bloco de notas abertos, assim que fizer as modificações salve! e no Explorer F5 para atualizar e veja o resultado:


Última edição por Marcelo Rezende em 12/8/2009, 18:59, editado 4 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 9/8/2009, 21:15

Nas imagens em miniatura, vamos fazer o mesmo, mas com atenção, nesta parte teremos que auterar em dois lugares, o primeiro o código do link onde amplia a imagem e outro que nos podemos visualizar na página veja:
Spoiler:




Neste exemplo estou substituindo medidas das imagens e pasta onde se encontra, pasta social. As imagens estão organizadas em ordem numérica 1,2,3,4,5....em .jpg , neste momento tera que ter paciência, este trabalho todo esta sendo feito com Bloco de notas por ser algo repetitivo vai exigir atenção.

Reparem que na primeira imagem a medida da largura e de 50, altura de 70, mas na segunda imagem esta modificada, largura de 75 é altura de 50. No Bloco de Notas depois de fazer as modificações não esqueça sempre de Salvar e depois no navegador Explorer F5 para atualizar.
Veja:


Click na foto que estão em miniatura para ampliar.
Veja:

Note que este modo de exibição e padrão do site que baixamos.
Esta é a primeira página, vamos salvar como social.html


Última edição por Marcelo Rezende em 12/8/2009, 12:26, editado 2 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 9/8/2009, 22:16

3ª Parte
Vamos utilizar programa de edição de imagem, para quem tem instalado não precisa instalar, vamos utilizar o
Aqui - Gimp Portable Este programa grátis oferece muitos recursos.
Spoiler:




Obs: Código fonte das páginas: index.html é social.html serão postado para conferencia do código fonte logo abaixo, podera ser editado em caso de erro!


Última edição por Marcelo Rezende em 12/8/2009, 18:58, editado 3 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 9/8/2009, 23:48

Vamos usar o Gimp para cobrir aquelas partes que não nos interessa, vamos usar ferramenta conta gotas para copiar cores e ferramenta Lapís para pintar, procure escolher o diâmetro adequado e cores que corespondam ao local que for pintar ou carimbar, geralmente pode dar uma diferença de cor, atenção, mesmo assim e bom corrigir alguns detalhes depois de visualizar o Layouts.
Veja:
Spoiler:

Aqui podemos usar diâmetros maiores.

O resultado final vai depender da prática, se fizer com mais cuidado não vai ter que refazer detalhes.




Note que depois teremos que retocar, separados a chance de errar e grande.


Última edição por Marcelo Rezende em 12/8/2009, 12:28, editado 2 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 10/8/2009, 12:53

Correção na barra menu.
Para facilitar vamos abrir no Gimp a imagem que esta dentro da pasta images buttons_middle e copiar parte da barra usando a ferramenta seleção retangular.
Veja:
Spoiler:


Click aqui! http://img36.imageshack.us/img36/4738/imagem23.png
Usando a ferramenta de seleção retangular, vamos copiar (Ctrl + C) e abrir na mesma pasta image logo_left e logo_right depois colar (Ctrl + V) para colar.
Veja:

Click aqui! http://img504.imageshack.us/img504/7460/imagem24.png
Agora acenda a ferramenta move para posicionar a barra no inicio da imagem no em cima cobrindo a barra. Acenda à ferramenta Ferramenta de redimencionar no Gimp e araste ate o final da barra.
Veja:

Click aqui! http://img200.imageshack.us/img200/9638/imagem25.png

Aplicar transformação nas duas images veja o resultado:

Click aqui! http://img29.imageshack.us/img29/1433/imagem27.png
Tem um pequeno defeito, mas podemos esconder depois com o texto que vamos digitar.


Última edição por Marcelo Rezende em 12/8/2009, 12:29, editado 2 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 10/8/2009, 18:15

Temos duas páginas, a principal index.html é social.html.
Veja:
Spoiler:


Vamos reorganizar o texto e as imagens na página.


Última edição por Marcelo Rezende em 12/8/2009, 12:30, editado 2 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 10/8/2009, 21:32

Na página index.html vamos retirar texto e a imagem em destaque, vou substituir por texto.
Veja:
Spoiler:


Note que esta seqüência de text, text, text, text... não vamos usar, mas temos que tomar cuidado ao selecionar e excluir, se salvar (Ctrl + S) é voltar para página index.html e F5 para atualizar a página, caso encontre algo de errado volte ate o Bloco de Notas e Ctrl + Z.
Agora que selecionamos os textos text,text,text... exclua, todos os que não vão usar, mas o tome cuidado pois vamos inserir texto, vamos precisar de uma parte do código, acompanhe e exclua somente o necessário.
Veja:
Agora vamos localizar onde esta todo o código que vamos excluir, selecione imagem slogam.gif que esta em azul.

Depois de localizado o local no Bloco de notas, vamos no final da página e selecionamos logohead_mini1.gif, esta localizado no canto esquerdo da página imagem igual ao destaque em miniatura, veja:

Temos que localizar estas imagens no código fonte, usando bloco de notas, entre as duas imagens vamos excluir somente o código sem utilidade, vai ficar somente o código que vai ser útil para inserir o texto.
Veja:

Atenção, com os detalhe <center que esta solitário ena imagem de cima e no final da página na imagem de baixo</center </body </html
Veja:

Agora podemos adicionar o texto.

Obs: O código da página index.html e social.html vamos postar para conferir em caso de erro.


Última edição por Marcelo Rezende em 12/8/2009, 12:32, editado 4 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 10/8/2009, 21:40

O texto ficou organizado desta forma visualizado no Bloco de Notas, veja:
Spoiler:

[url=http://www.servimg.com/image_preview.php?
i=108&u=13816357][/url]
Note a tag <br

A página Index, veja:


Última edição por Marcelo Rezende em 12/8/2009, 12:33, editado 2 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 10/8/2009, 23:21

Agora vamos personalizar a página social.html. Veja o código fonte das 12 imagens foram modificados, veja imagens anteriores se tiver dúvidas.
Spoiler:



Resultado final da página social.html.
Veja:


Última edição por Marcelo Rezende em 12/8/2009, 12:34, editado 3 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 10/8/2009, 23:23

Código fonte das 12 imagens.
Spoiler:

<p align="center"><a href="social/6.jpg"><img src="social/6.jpg" width="210" height="150" border="0" alt="Text about this thumbnail
or the link"></a><a href="social/7.jpg"><img src="social/7.jpg" width="210" height="150" border="0" alt="Text about this thumbnail or the
link"></a><a href="social/8.jpg"><img src="social/8.jpg" width="210" height="150" border="0" alt="Text about this thumbnail or the link"></a>
<a href="social/11.jpg"><img src="social/11.jpg" width="210" height="150" border="0" alt="Text about this thumbnail
or the link"></a></p>

<p align="center"><a href="social/16.jpg"><img src="social/16.jpg" width="210" height="150" border="0" alt="Text about this thumbnail
or the link"></a><a href="social/24.jpg"><img src="social/24.jpg" width="210" height="150" border="0" alt="Text about this thumbnail or the
link"></a><a href="social/27.jpg"><img src="social/27.jpg" width="210" height="150" border="0" alt="Text about this thumbnail or the link"></a>
<a href="social/30.jpg"><img src="social/30.jpg" width="210" height="150" border="0" alt="Text about this thumbnail
or the link"></a></p>


<p align="center"><a href="social/34.jpg"><img src="social/34.jpg" width="210" height="150" border="0" alt="Text about this thumbnail
or the link"></a><a href="social/40.jpg"><img src="social/40.jpg" width="210" height="150" border="0" alt="Text about this thumbnail or the
link"></a><a href="social/45.jpg"><img src="social/45.jpg" width="210" height="150" border="0" alt="Text about this thumbnail or the link"></a>
<a href="social/146.jpg"><img src="social/46.jpg" width="210" height="150" border="0" alt="Text about this thumbnail
or the link"></a></p>


Última edição por Marcelo Rezende em 12/8/2009, 12:35, editado 2 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 10/8/2009, 23:32

Páginas index.html e a social.html foram modificadas, podemos salvar outras páginas. mas antes temos de colocar um titulo nas 2 páginas, vou nomear de Fotografia, no inicio da página.
Veja:
Spoiler:

<HTML>
<HEAD>
<TITLE>Fotografia</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (logo1.psd) -->
<SCRIPT LANGUAGE="JavaScript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
Esta em vermelho, vamos colocar titulo nas páginas index.html e social.html e depois vamos salvar outras páginas.


Última edição por Marcelo Rezende em 12/8/2009, 12:36, editado 2 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 11/8/2009, 00:06

Agora podemos abrir a página index.html e salvar usando o código fonte outras páginas, abra com Navegador Explorer menu exibir>código fonte. No Bloco de Notas Arquivo>salvar como. Veja:
Spoiler:


Salve as páginas na mesma pasta, com o código fonte da página index.html vamos salvar 3 novas páginas:

1º - contato.html
2º - parceiros.html
3º - outros.html

Agora feche a página index.html e vamos abrir página social.html e salvar da mesma forma, mais 3 páginas, veja;

4º - jornalismo.html
5º - shows.html
6º - Institucional.html

No menu temos 8 links, um para cada página.
Na próxima parte vamos personalizar os botões.


Última edição por Marcelo Rezende em 12/8/2009, 12:37, editado 2 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 11/8/2009, 19:08

Antes de modificar os botões vamos trabalhar com texto, e rever como salvar no Gimp.
Veja:
Spoiler:



Mas antes vamos abrir pasta>image>slogan.gif e acender a ferramenta lápis e pintar o antigo texto, agora podemos salvar, note que a extensão do arquivo .gif , no caso de trabalharmos com camada temos que prestar atenção na extenção, se não corresponder a imagem original do site vai dar erro, se necessário certifique sobre a extensão e digite .gif .jpg .png etc... de acordo com a extensão da imagem.

Ao acender ferramenta texto note o editor de texto Gimp, apos digitar o texto selecione Usar fonte selecinada e click em fechar.

Note que logo abaixo da fonte temos tamanho e cor.
Veja:

Depois de editar o texto, vamos ate menu arquivo>salvar, note que por se tratar de camada teremos que exportar, sempre com muita atenção na extensão!


Salvar como: certifique-se da extensão do arquivo, depois de optar por achatar imagem e substituir e exportar, click em salvar.


Última edição por Marcelo Rezende em 12/8/2009, 12:39, editado 3 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 11/8/2009, 19:21

OBS:
Note que no menu temos 8 botões, são os principais links de navegação do site, cada botão vai coresponder por cada página, logo teremos que digitar nos botões nome de cada página, mas antes vamos ter que apagar, pintar ou carimbar o texto antigo, note que temos 8 botões, 2 de cada botão, (veja: pasta>image) Texto em Preto e Branca, total: 16. Vamos selecionar a cor e digitar o texto, respeite a ordem, (exemplo: botão home: pasta>image>button8 testo em branco. pasta>image>button8_over)muito cuidado com o posicinamento do texto nos botões, manter sempre centralizado.


Última edição por Marcelo Rezende em 12/8/2009, 12:17, editado 1 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 12/8/2009, 00:04

Código Fonte página index.html
Spoiler:

<HTML>
<HEAD>
<TITLE>Fotografia</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (logo1.psd) -->
<SCRIPT LANGUAGE="JavaScript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
button1_over = newImage("images/button1_over.gif");
button2_over = newImage("images/button2_over.gif");
button3_over = newImage("images/button3_over.gif");
button4_over = newImage("images/button4_over.gif");
button5_over = newImage("images/button5_over.gif");
button6_over = newImage("images/button6_over.gif");
button7_over = newImage("images/button7_over.gif");
button8_over = newImage("images/button8_over.gif");
preloadFlag = true;
}
}

// -->
</SCRIPT>
<!-- End Preload Script -->
<script language="JavaScript">
<!--

<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
//-->
</script>
</HEAD>
<BODY BGCOLOR=#000000 ONLOAD="preloadImages();" leftmargin="0" topmargin="0">
<!-- ImageReady Slices (logo1.psd) -->
<!-- End ImageReady Slices -->
<div align="center">
<TABLE WIDTH=730 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ROWSPAN=5> <IMG SRC="images/logo_left.gif" WIDTH=183 HEIGHT=120 alt="Text about this website"></TD>
<TD ROWSPAN=5> <IMG SRC="images/logo_right.gif" WIDTH=193 HEIGHT=120 alt="Text about this website"></TD>
<TD COLSPAN=4> <IMG SRC="images/buttons_upper.gif" WIDTH=354 HEIGHT=18 alt="Text about this website"></TD>
</TR>
<TR>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button1', 'images/button1_over.gif'); return true;"
ONMOUSEOUT="changeImages('button1', 'images/button1.gif'); return true;">
<IMG NAME="button1" SRC="images/button1.gif" WIDTH=89 HEIGHT=28 BORDER=0 alt="Text about this link"></A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button2', 'images/button2_over.gif'); return true;"
ONMOUSEOUT="changeImages('button2', 'images/button2.gif'); return true;">
<IMG NAME="button2" SRC="images/button2.gif" WIDTH=88 HEIGHT=28 BORDER=0 alt="Text about this link"></A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button3', 'images/button3_over.gif'); return true;"
ONMOUSEOUT="changeImages('button3', 'images/button3.gif'); return true;">
<IMG NAME="button3" SRC="images/button3.gif" WIDTH=89 HEIGHT=28 BORDER=0 alt="Text about this link"></A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button4', 'images/button4_over.gif'); return true;"
ONMOUSEOUT="changeImages('button4', 'images/button4.gif'); return true;">
<IMG NAME="button4" SRC="images/button4.gif" WIDTH=88 HEIGHT=28 BORDER=0 alt="Text about this link"></A></TD>
</TR>
<TR>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button5', 'images/button5_over.gif'); return true;"
ONMOUSEOUT="changeImages('button5', 'images/button5.gif'); return true;">
<IMG NAME="button5" SRC="images/button5.gif" WIDTH=89 HEIGHT=29 BORDER=0 alt="Text about this link"></A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button6', 'images/button6_over.gif'); return true;"
ONMOUSEOUT="changeImages('button6', 'images/button6.gif'); return true;">
<IMG NAME="button6" SRC="images/button6.gif" WIDTH=88 HEIGHT=29 BORDER=0 alt="Text about this link"></A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button7', 'images/button7_over.gif'); return true;"
ONMOUSEOUT="changeImages('button7', 'images/button7.gif'); return true;">
<IMG NAME="button7" SRC="images/button7.gif" WIDTH=89 HEIGHT=29 BORDER=0 alt="Text about this link"></A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button8', 'images/button8_over.gif'); return true;"
ONMOUSEOUT="changeImages('button8', 'images/button8.gif'); return true;">
<IMG NAME="button8" SRC="images/button8.gif" WIDTH=88 HEIGHT=29 BORDER=0 alt="Text about this link"></A></TD>
</TR>
<TR>
<TD COLSPAN=4> <IMG SRC="images/buttons_middle.gif" WIDTH=354 HEIGHT=14></TD>
</TR>
<TR>
<TD COLSPAN=4> <IMG SRC="images/slogan.gif" WIDTH=354 HEIGHT=31 alt="Text about this website or
something about your services"></TD>
</TR>
</TABLE>
<center>

<font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF"><br><br>O Imaginário Segundo a
Realidade<br><br>

A fotografia não mudou desde a sua origem, salvo em certos<br>
aspectos técnicos,o que não constitui uma preocupação maior.<br>
A fotografia parece ser uma atividade fácil mas é uma operação<br>
diversificada e ambígua, onde o único denominador comum dos<br>
que praticam é o instrumento de trabalho. tudo que sai deste <br>
objeto de captação de imagens não foge das restrições ecôno<br>
micas de um mundo de desperdícios, das tensões cada vez mais<br>
intensas, das insensatas conseqüencias ecológicas. <br>
A fotografia "fabricada" ou encenada não está na minha prática; e<br>
todo julgamento que pudesse fazer, só poderia ser de ordem psi<br>
cológica e sociológica. Existem os que preparam e encenam suas<br>
fotografias e outros que vão a sua descoberta, conseguindo captá-la.<br>
A câmara fotográfica é para min um caderno de croquis, o instrumento <br>
de intuição e de espontaneidade, o mestre do instante que,de uma<br>
só vez, questiona e decide em termos visuais. Para se dar um "signi<br>
ficado" ao mundo é necessário sentir-se implicado no que se vê <br>
através do visor. Este ato exige concentração, disciplina da mente,<br>
sensibilidade aguçada e um certo senso geométrico.<br>
É atrvés de uma grande economia dos meios que se chega à <br>
simplicidade da expressão.<br>
Deve-se sempre fotografar com o maior respeito ao tema e a si próprio.<br>
Fotografar é reter a respiração, enquanto todas as faculdades se con<br>
jugam diante de uma realidade fugitiva; é neste instante que o ato de<br>
captar uma imagem trasforma-se numa grande satisfação física e <br>
intelectual.<br>
Fotografar é num mesmo instante, numa mesma fração de segun<br>
dos, poder reconhecer um fato e a rigorosa organização das formas<br>
percebidas visualmente para poder exprimir e significar este fato. É<br>
colocar numa mesma mira a cabeça, o olho e o coração.<br>
Quando a min, fotografar é um meio de compreender que não se pode<br>
separar dos outros meios de expessão visual. É uma maneira de <br>
gritar, de se liberar e não de provar e nem de afirmar a sua própria<br>
originalidade.<br>
É uma maneira de viver.<br><br>
<center>
Henri-Cartier Bresson<br>
<br><br>
</font><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">
</font><font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF"><br>
</font>

<table width="700" border="0" bordercolor="#FFFFFF">
<tr>
<td>
<div align="center"><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">Text
Header Or Something Special About The Thumbnails Below</font></div>
</td>
</tr>
</table>
<table width="369" border="0">
<tr align="center" valign="middle">
<td width="100"><a href="images/photo2.jpg"><img src="images/thumb1.jpg" width="50" height="70" border="0" alt="Text about this thumbnail or the link"></a></td>
<td width="100"><a href="images/photo2.jpg"><img src="images/thumb2.jpg" width="50" height="70" border="0" alt="Text about this thumbnail or the link"></a></td>
<td width="100"><a href="images/photo2.jpg"><img src="images/thumb3.jpg" width="50" height="70" border="0" alt="Text about this thumbnail or the link"></a></td>
<td width="100"><a href="images/photo2.jpg"><img src="images/thumb4.jpg" width="50" height="70" border="0" alt="Text about this thumbnail or the link"></a></td>
<td width="100"><a href="images/photo2.jpg"><img src="images/thumb5.jpg" width="50" height="70" border="0" alt="Text about this thumbnail or the link"></a></td>
<td width="100"><a href="images/photo2.jpg"><img src="images/thumb6.jpg" width="50" height="70" border="0" alt="Text about this thumbnail or the link"></a></td>
<td width="100"><a href="images/photo2.jpg"><img src="images/thumb7.jpg" width="50" height="70" border="0" alt="Text about this thumbnail or the link"></a></td>
<td width="100"><a href="images/photo2.jpg"><img src="images/thumb8.jpg" width="50" height="70" border="0" alt="Text about this thumbnail or the link"></a></td>
<td width="100"><a href="images/photo2.jpg"><img src="images/thumb9.jpg" width="50" height="70" border="0" alt="Text about this thumbnail or the link"></a></td>
<td width="100"><a href="images/photo2.jpg"><img src="images/thumb10.jpg" width="50" height="70" border="0" alt="Text about this thumbnail or the link"></a></td>
<td width="100"><a href="images/photo2.jpg"><img src="images/thumb11.jpg" width="50" height="70" border="0" alt="Text about this thumbnail or the link"></a></td>
<td width="100"><a href="images/photo2.jpg"><img src="images/thumb12.jpg" width="50" height="70" border="0" alt="Text about this thumbnail or the link"></a></td>
</tr>
</table>
<table width="703" border="0">
<tr>
<td>
<div align="center"><font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">Text,
text, text, text, text, text, text,</font><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">
text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text.</font></div>
</td>
</tr>
</table>

<img src="images/logohead_mini1.jpg" width="50" height="50" alt="Text about this website"><font face="Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"><br>
&copy; Copyright 2001 - YourWebsite.com - All Rights Reserved</font></div>
</center>
</BODY>
</HTML>


Última edição por Marcelo Rezende em 12/8/2009, 12:41, editado 1 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 12/8/2009, 00:08

Codigo fonte página social.html
Spoiler:

<HTML>
<HEAD>
<TITLE>Fotografia</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (logo1.psd) -->
<SCRIPT LANGUAGE="JavaScript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
button1_over = newImage("images/button1_over.gif");
button2_over = newImage("images/button2_over.gif");
button3_over = newImage("images/button3_over.gif");
button4_over = newImage("images/button4_over.gif");
button5_over = newImage("images/button5_over.gif");
button6_over = newImage("images/button6_over.gif");
button7_over = newImage("images/button7_over.gif");
button8_over = newImage("images/button8_over.gif");
preloadFlag = true;
}
}

// -->
</SCRIPT>
<!-- End Preload Script -->
<script language="JavaScript">
<!--

<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
//-->
</script>
</HEAD>
<BODY BGCOLOR=#000000 ONLOAD="preloadImages();" leftmargin="0" topmargin="0">
<!-- ImageReady Slices (logo1.psd) -->
<!-- End ImageReady Slices -->
<div align="center">
<TABLE WIDTH=730 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ROWSPAN=5> <IMG SRC="images/logo_left.gif" WIDTH=183 HEIGHT=120 alt="Text about this website"></TD>
<TD ROWSPAN=5> <IMG SRC="images/logo_right.gif" WIDTH=193 HEIGHT=120 alt="Text about this website"></TD>
<TD COLSPAN=4> <IMG SRC="images/buttons_upper.gif" WIDTH=354 HEIGHT=18 alt="Text about this website"></TD>
</TR>
<TR>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button1', 'images/button1_over.gif'); return true;"
ONMOUSEOUT="changeImages('button1', 'images/button1.gif'); return true;">
<IMG NAME="button1" SRC="images/button1.gif" WIDTH=89 HEIGHT=28 BORDER=0 alt="Text about this link"></A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button2', 'images/button2_over.gif'); return true;"
ONMOUSEOUT="changeImages('button2', 'images/button2.gif'); return true;">
<IMG NAME="button2" SRC="images/button2.gif" WIDTH=88 HEIGHT=28 BORDER=0 alt="Text about this link"></A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button3', 'images/button3_over.gif'); return true;"
ONMOUSEOUT="changeImages('button3', 'images/button3.gif'); return true;">
<IMG NAME="button3" SRC="images/button3.gif" WIDTH=89 HEIGHT=28 BORDER=0 alt="Text about this link"></A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button4', 'images/button4_over.gif'); return true;"
ONMOUSEOUT="changeImages('button4', 'images/button4.gif'); return true;">
<IMG NAME="button4" SRC="images/button4.gif" WIDTH=88 HEIGHT=28 BORDER=0 alt="Text about this link"></A></TD>
</TR>
<TR>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button5', 'images/button5_over.gif'); return true;"
ONMOUSEOUT="changeImages('button5', 'images/button5.gif'); return true;">
<IMG NAME="button5" SRC="images/button5.gif" WIDTH=89 HEIGHT=29 BORDER=0 alt="Text about this link"></A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button6', 'images/button6_over.gif'); return true;"
ONMOUSEOUT="changeImages('button6', 'images/button6.gif'); return true;">
<IMG NAME="button6" SRC="images/button6.gif" WIDTH=88 HEIGHT=29 BORDER=0 alt="Text about this link"></A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button7', 'images/button7_over.gif'); return true;"
ONMOUSEOUT="changeImages('button7', 'images/button7.gif'); return true;">
<IMG NAME="button7" SRC="images/button7.gif" WIDTH=89 HEIGHT=29 BORDER=0 alt="Text about this link"></A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button8', 'images/button8_over.gif'); return true;"
ONMOUSEOUT="changeImages('button8', 'images/button8.gif'); return true;">
<IMG NAME="button8" SRC="images/button8.gif" WIDTH=88 HEIGHT=29 BORDER=0 alt="Text about this link"></A></TD>
</TR>
<TR>
<TD COLSPAN=4> <IMG SRC="images/buttons_middle.gif" WIDTH=354 HEIGHT=14></TD>
</TR>
<TR>
<TD COLSPAN=4> <IMG SRC="images/slogan.gif" WIDTH=354 HEIGHT=31 alt="Text about this website or something about your services"></TD>
</TR>
</TABLE>
<br>
<table width="720" border="0" height="175">
<tr>
<td width="250" height="44" nowrap align="center" valign="middle"><font face="Arial, Helvetica, sans-serif" size="5" color="#FFFFFF">Header
Text</font> </td>
<td width="183" height="233" valign="top" nowrap align="center" rowspan="3">
<div align="center">
<table width="150" border="4" cellspacing="0" cellpadding="0">
<tr>
<td>
<div align="center"><img src="social/1.jpg" width="300" height="200" alt="Text about this image"></div>
</td>
</tr>
</table>
</div>
</td>
<td height="44" align="center" valign="middle"><font face="Arial, Helvetica, sans-serif" size="5" color="#FFFFFF">Header
Text</font> </td>
</tr>
<tr>
<td width="250" height="116" nowrap align="center" valign="middle">
<hr width="250">
<font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">Text,
text, text, text, text, text, text,</font><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">
text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text.<br>
</font>
<hr width="250">
</td>
<td height="-1" align="center" valign="middle">
<hr width="250">
<font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">Text,
text, text, text, text, text, text,</font><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">
text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text.</font><font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF"><br>
</font>
<hr width="250">
</td>
</tr>
<tr>
<td width="250" height="55" nowrap align="center" valign="middle"><font color="#FFFF00" face="Arial, Helvetica, sans-serif" size="1"><u>LINK</u></font><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="1">
To Special Pages or Items </font> </td>
<td height="55" align="center" valign="middle"><font color="#FFFF00" face="Arial, Helvetica, sans-serif" size="1"><u>LINK</u></font><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="1">
To Special Pages or Items </font></td>
</tr>
</table>
<table width="700" border="0" bordercolor="#FFFFFF">
<tr>
<td>
<div align="center"><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">Text
Header Or Something Special About The Thumbnails Below</font></div>
</td>
</tr>
</table>

<p align="center"><a href="social/6.jpg"><img src="social/6.jpg" width="210" height="150" border="0" alt="Text about this thumbnail
or the link"></a><a href="social/7.jpg"><img src="social/7.jpg" width="210" height="150" border="0" alt="Text about this thumbnail or the
link"></a><a href="social/8.jpg"><img src="social/8.jpg" width="210" height="150" border="0" alt="Text about this thumbnail or the link"></a>
<a href="social/11.jpg"><img src="social/11.jpg" width="210" height="150" border="0" alt="Text about this thumbnail
or the link"></a></p>

<p align="center"><a href="social/16.jpg"><img src="social/16.jpg" width="210" height="150" border="0" alt="Text about this thumbnail
or the link"></a><a href="social/24.jpg"><img src="social/24.jpg" width="210" height="150" border="0" alt="Text about this thumbnail or the
link"></a><a href="social/27.jpg"><img src="social/27.jpg" width="210" height="150" border="0" alt="Text about this thumbnail or the link"></a>
<a href="social/30.jpg"><img src="social/30.jpg" width="210" height="150" border="0" alt="Text about this thumbnail
or the link"></a></p>


<p align="center"><a href="social/34.jpg"><img src="social/34.jpg" width="210" height="150" border="0" alt="Text about this thumbnail
or the link"></a><a href="social/40.jpg"><img src="social/40.jpg" width="210" height="150" border="0" alt="Text about this thumbnail or the
link"></a><a href="social/45.jpg"><img src="social/45.jpg" width="210" height="150" border="0" alt="Text about this thumbnail or the link"></a>
<a href="social/146.jpg"><img src="social/46.jpg" width="210" height="150" border="0" alt="Text about this thumbnail
or the link"></a></p>




<div align="center"><font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">Text,
text, text, text, text, text, text,</font><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">
text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text.</font></div>
</td>
</tr>
</table>
<img src="images/logohead_mini1.jpg" width="50" height="50" alt="Text about this website"><font face="Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"><br>
&copy; Copyright 2001 - YourWebsite.com - All Rights Reserved</font></div>
</BODY>
</HTML>


Última edição por Marcelo Rezende em 12/8/2009, 12:42, editado 1 vez(es)
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 12/8/2009, 18:38

4ª Parte - Link
Os 8 botões são nosso link de navegação principal do site, mas antes temos que localizar no código fonte (Bloco de Notas) a localização de cada botão, abra a página social.html com o navegador Explorer e posicione com o mouse em cima do botão Home e click no botão do mouse lado direito e depois em propriedades. note que na propriedade o botão home esta nomeado como button8_over e o botão product como button1_over, vamos observar bem o código.
Veja:
Spoiler:

Note que o botão que esta em preto, esta selecionado, botão Home, home e a página principal do site, que coresponde a página index.html
Agora vamos a analizar o código fonte no Bloco de Notas. Navegador Explorer Exibir>Codigo Fonte.
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 12/8/2009, 18:54

Atenção! Código Fonte da Página social.html, selecionei parte do código, que vamos usar no momento, links.

Spoiler:
<TD> <A HREF="AQUI VAMOS DIGITAR jornalismo.html"
ONMOUSEOVER="changeImages('button1', 'images/button1_over.gif'); return true;"
ONMOUSEOUT="changeImages('button1', 'images/button1.gif'); return true;">
<IMG NAME="button1" SRC="images/button1.gif" WIDTH=89 HEIGHT=28 BORDER=0 alt=":arrow:AQUI VAMOS DIGITAR jornalismo.html "></A></TD>

<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button2', 'images/button2_over.gif'); return true;"
ONMOUSEOUT="changeImages('button2', 'images/button2.gif'); return true;">
<IMG NAME="button2" SRC="images/button2.gif" WIDTH=88 HEIGHT=28 BORDER=0 alt="Text about this link"></A></TD>

<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button3', 'images/button3_over.gif'); return true;"
ONMOUSEOUT="changeImages('button3', 'images/button3.gif'); return true;">
<IMG NAME="button3" SRC="images/button3.gif" WIDTH=89 HEIGHT=28 BORDER=0 alt="Text about this link"></A></TD>

<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button4', 'images/button4_over.gif'); return true;"
ONMOUSEOUT="changeImages('button4', 'images/button4.gif'); return true;">
<IMG NAME="button4" SRC="images/button4.gif" WIDTH=88 HEIGHT=28 BORDER=0 alt="Text about this link"></A></TD>
</TR>
<TR>

<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button5', 'images/button5_over.gif'); return true;"
ONMOUSEOUT="changeImages('button5', 'images/button5.gif'); return true;">
<IMG NAME="button5" SRC="images/button5.gif" WIDTH=89 HEIGHT=29 BORDER=0 alt="Text about this link"></A></TD>

<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button6', 'images/button6_over.gif'); return true;"
ONMOUSEOUT="changeImages('button6', 'images/button6.gif'); return true;">
<IMG NAME="button6" SRC="images/button6.gif" WIDTH=88 HEIGHT=29 BORDER=0 alt="Text about this link"></A></TD>

<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button7', 'images/button7_over.gif'); return true;"
ONMOUSEOUT="changeImages('button7', 'images/button7.gif'); return true;">
<IMG NAME="button7" SRC="images/button7.gif" WIDTH=89 HEIGHT=29 BORDER=0 alt="Text about this link"></A></TD>

<TD> <A HREF="#"
ONMOUSEOVER="changeImages('button8', 'images/button8_over.gif'); return true;"
ONMOUSEOUT="changeImages('button8', 'images/button8.gif'); return true;">
<IMG NAME="button8" SRC="images/button8.gif" WIDTH=88 HEIGHT=29 BORDER=0 alt="Text about this link"></A></TD>
</TR>

Atenção! Código Fonte da Página jornalismo.html, selecionei parte do código, que vamos usar no momento, links.
Spoiler:

<TD> <A HREF="jornalismo.html"
ONMOUSEOVER="changeImages('button1', 'images/button1_over.gif'); return true;"
ONMOUSEOUT="changeImages('button1', 'images/button1.gif'); return true;">
<IMG NAME="button1" SRC="images/button1.gif" WIDTH=89 HEIGHT=28 BORDER=0 alt="jornalismo.html"></A></TD>

<TD> <A HREF="social.htm"
ONMOUSEOVER="changeImages('button2', 'images/button2_over.gif'); return true;"
ONMOUSEOUT="changeImages('button2', 'images/button2.gif'); return true;">
<IMG NAME="button2" SRC="images/button2.gif" WIDTH=88 HEIGHT=28 BORDER=0 alt="social.html"></A></TD>

<TD> <A HREF="institucional.html"
ONMOUSEOVER="changeImages('button3', 'images/button3_over.gif'); return true;"
ONMOUSEOUT="changeImages('button3', 'images/button3.gif'); return true;">
<IMG NAME="button3" SRC="images/button3.gif" WIDTH=89 HEIGHT=28 BORDER=0 alt="institucional.html"></A></TD>

<TD> <A HREF="contato.html"
ONMOUSEOVER="changeImages('button4', 'images/button4_over.gif'); return true;"
ONMOUSEOUT="changeImages('button4', 'images/button4.gif'); return true;">
<IMG NAME="button4" SRC="images/button4.gif" WIDTH=88 HEIGHT=28 BORDER=0 alt="contato.html"></A></TD>
</TR>
<TR>

<TD> <A HREF="shows.html"
ONMOUSEOVER="changeImages('button5', 'images/button5_over.gif'); return true;"
ONMOUSEOUT="changeImages('button5', 'images/button5.gif'); return true;">
<IMG NAME="button5" SRC="images/button5.gif" WIDTH=89 HEIGHT=29 BORDER=0 alt="shows.html"></A></TD>

<TD> <A HREF="outros.html"
ONMOUSEOVER="changeImages('button6', 'images/button6_over.gif'); return true;"
ONMOUSEOUT="changeImages('button6', 'images/button6.gif'); return true;">
<IMG NAME="button6" SRC="images/button6.gif" WIDTH=88 HEIGHT=29 BORDER=0 alt="outros.html"></A></TD>

<TD> <A HREF="parceiros.html"
ONMOUSEOVER="changeImages('button7', 'images/button7_over.gif'); return true;"
ONMOUSEOUT="changeImages('button7', 'images/button7.gif'); return true;">
<IMG NAME="button7" SRC="images/button7.gif" WIDTH=89 HEIGHT=29 BORDER=0 alt=""></A></TD>

<TD> <A HREF="index.html"
ONMOUSEOVER="changeImages('button8', 'images/button8_over.gif'); return true;"
ONMOUSEOUT="changeImages('button8', 'images/button8.gif'); return true;">
<IMG NAME="button8" SRC="images/button8.gif" WIDTH=88 HEIGHT=29 BORDER=0 alt="index.html"></A></TD>

Agora podemos digitar no no Bloco de Notas os links corespondentes para cada página, como exemplo acima, em todas as páginas, mas com muita atenção, em Salvar no bloco de notas e depois atualizar no navegador Explorer ou F5.
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 15/8/2009, 22:44

Veja como ficou organizado as páginas e pastas:
Spoiler:


para ampliar click aqui=> http://img269.imageshack.us/img269/2017/imagem60.png

Criei pastas para facilitar atualização do site no futuro, as fotos foram nomeadas em uma sequência, quando precisar atualizar e só selecionar a foto que queira substituir, e a nova foto deve ser nomear com mesmo nome e enviar para a pasta.
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Marcelo Rezende em 16/8/2009, 22:33

Para nomear os botões no Gimp e bem fácil, depois de cobrir o antigo texto selecione a cor branco e digite o texto, com o mouse em cima da camada texto, click com o botão direito do mause e duplicar a camada, após duplicada selecione a segunda camada e mude a cor para preto e selecione o texto, deixe o texto em preto descentralizado, como uma sombra, temos que criar dois botões, um branco com sombra em preto e outro com sombra em branco.
Veja:
Spoiler:


Para trocar a cor na palheta texto no Gimp, selecione a cor e arraste ate a palheta de cor texto.


Após digitar o texto no botão vamos salvar como, no Gimp temos que exportar, em alguns computadores demora para visualizar,após substituir, exportar e salvar.

Note as posições da camada texto, branco esta em baixo e preto em cima, para substituir o botão antigo.

Veja o resultado do botões no menu, pode ficar melhor, depende da sua criatividade.
avatar
Marcelo Rezende
Admin
Admin

Mensagens : 312
Data de inscrição : 24/03/2009
Localização : Vale do Paraíba - SP

http://www.valefotografico.forumeiros.com

Voltar ao Topo Ir em baixo

Re: Tutorial: Downloads, personalização de Layouts e hospedagem de site

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum