parte 1-Vamos lá, começando a trabalhar!

1° passo: Editar as imagens.

Você precisa ter as imagens e hospedá-las em algum servidor na internet. Vou usar os nomes que estão no modelo para te explicar as imagens, mas você pode salvá-las com o nome que quiser, isso não interfere no resultado. Também, você pode usar jpg, png ou gif (incluídos os animados).

* cimaLogo: é a imagem que aparece no topo do seu perfil. Ela deve ter 850 px de largura, a altura você pode usar a que quiser, é livre.(isso você controla mais tarde no css, portanto, se no começo, ao visualizar seu perfil, você estiver vendo sua imagem cortada, ou sobrando espaço, não se preocupe)

* fundoBase: essa imagem, vai ficar embaixo da anterior, dependendo do tamanho que você a fizer, aparecerá embaixo das barras de menu. Nessa imagem você pode criar essa 'sombra' lateral do site (aplicando um efeito degrade em 12px de cada lado). Essa imagem deve ter 872px de largura, altura você define, se quiser que apareça abaixo dos menus, experimente fazê-la com 100px a mais que o 'cimaLogo'.

* fundoDegrade: é essa sombra vertical (de cima para baixo) que aparece do lado de fora da página, na parte superior. O seu tamanho é livre, mas esteticamente fica mais harmônico se tiver a mesma altura do 'cimaLogo' ou do 'fundoBase'. A largura é opcional, se for usar um degrade simples, 2px é suficiente (quanto menor a figura, melhor para carregar), caso queira algo mais elaborado, use o tamanho que precisar. Conselho de amiga, comece com um degrade simples, pois você pode depois alterar apenas isso em seu css se desejar, mas com um simples ficará mais fácil de entender.

* fundoMenu: é a imagem que fica de fundo na barra de menu do site (ANIMESPIRIT-BUSCA-CLANS-COMUNIDADE-FANFICS-FÓRUM-ETC.). Sua altura deve ser de 20px, a largura que você quiser. Use a regrinha do degrade e faça da menor largura possível, e lembre-se que é um fundo, as pessoas deverão ler o que está escrito (não se preocupe com a cor das letras, você poderá mudar a cor da fonte mais tarde para torná-la legível) por isso, não abuse de desenhos nessa imagem.

* fundoMenuHover: é a imagem que fica de fundo na barra de menu do site (ANIMESPIRIT-BUSCA-CLANS-COMUNIDADE-FANFICS-FÓRUM-ETC.) para indicar que a opção está selecionada. Mesmas regras de fundoMenu.

* fundoSombra: é a imagem que será o fundo de sua página. Ela deve ter 872px de largura e a altura que você precisar (conselho de sempre: o menor possível!). Assim como no fundoBase, você pode criar a 'sombra' lateral do site aplicando um efeito degrade em 12px de cada lado. Para dar continuidade estética, use o mesmo degrade do fundoBase, mas pode inventar, ousar o que quiser até encontrar um resultado que lhe satisfaça.

Ufa! Prontas todas as imagens!

Se você as salvar com os mesmos nomes na pasta img dentro de modelo (lá onde estão os originais) poderá visualizar como seu perfil ficará direto do seu pc. Mas para que apareçam no site, terá que fazer o upload delas em algum servidor. Se der outros nomes, ou salvar em outra pasta, terá que editar o css primeiro, para depois visualizar.

§ Imageshack: já usei, é bom e confiável, relativamente fácil de usar e as imagens ficam armazenadas mesmo sem acessos. Precisa de registro.

§ Pix.nofrag: adoro porque é muito rápido e simples de usar, mas tem a desvantagem de remover imagens sem acesso há 90 dias e um pouquinho chato de procurar imagens antigas. Ótimo para quem vive trocando o css. Sem registro.

§ Image Hotel: todas as vantagens do Imageshack, e uma organização por pastas que facilita a vida de quem trabalha muito com isso. É o que estou usando atualmente. Precisa de registro.

Feito o upload, você começará a mexer no código do css. Para isso, precisará do endereço da imagem. Recomendo que vá arquivando-o à medida que faz o upload, para não seperder e nem ter que ficar procurando depois. Eu faço o seguinte, crio um documento no bloco de notas e registro assim:

Barra texto pequena (nome que identifique o que é o arquivo, pois muitos servidores dão um novo nome para seu arquivo que nem lembra aquele que você deu)
http://pix.nofrag.com/02/1d/81d464dc4a61709137269797f3b1.jpeg (endereço, é isso que você vai colocar no css









parte 2-Imagens prontas e hospedadas, hora de mexer no código!

2° passo: Substituir as imagens

Abra o arquivo modelo.css.

* Localize (está no início, vou seguir a ordem em que aparecem)

body {
background:#000000 url(img/fundoSombra.jpg) repeat-Y center center;
}

troque (img/fundoSombra.jpg) por ("endereço da sua imagem") - o endereço começa com http// e tem que terminar com a extensão do arquivo .jpg .gif .png .jpeg


* Localize

#fundo {
background:url(img/fundoDegrade.jpg) repeat-X left top;
}


troque (img/fundoDegrade.jpg) por ("endereço da sua imagem")


* Localize

#base {
background: url(img/fundoBase.jpg) no-repeat center top;
}

troque (img/fundoBase.jpg) por ("endereço da sua imagem")


* Localize

#cima #logo {
height: 120px;
background: url(img/cimaLogo.png);
}

troque 120px pela altura da sua imagem
troque (img/cimaLogo.png) por ("endereço da sua imagem")


* Localize

#nav {
background:url(img/fundoMenu.jpg) repeat-X;
}

troque (img/fundoMenu.jpg) por ("endereço da sua imagem")


* Localize

#nav a:hover {
color: #FFFFFF;
background:#4DA267 url(img/fundoMenuHover.jpg) repeat-X;
}

troque (img/fundoMenuHover.jpg) por ("endereço da sua imagem")


* Localize

#MenuEsquerdo .boxMenuEsquerdo .tituloMenuEsquerdo {
background:url(img/fundoMenu.jpg) repeat-X;
color: #FFFFFF;
}

troque (img/fundoMenu.jpg) por ("endereço da sua imagem")


* Localize

.boxMenuDireito .tituloMenuDireito {
background:url(img/fundoMenu.jpg) repeat-X;
color: #FFFFFF;
}

troque (img/fundoMenu.jpg) por ("endereço da sua imagem")


Prontas as alterações de imagem, abra o arquivo perfil.html e veja como está.


===============================================

Pra alterar as imagens baasta vc criar as suas e depois linkar onde as padrões estão linkadas: ou seja:

- cria a imagem.
- hospeda num lugar.
- copia o link da imagem.
- vai no código do css.
- cola a url no lugar da url do endereçpo da imagem q vc está substituindo.
Comece lá nas imagens, abre a primeira, edita com calma, salva... faz todas, depois é que pensa em hospedá-las no servidor... pra daí mexer no arquivo css
===============================================
Meu primeiro, levei uns 5 dias fazendo (errei de monte! era uma meleca atrás da outra!) até entender...

Boa sorte!



Se não entenderamm


Meu msn e

Bruninho_5souza10@hotmail.com