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!

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


Participe do fórum, é rápido e fácil

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!

Tutorial: Downloads, personalização de Layouts e hospedagem de site Popup10
valefotográfico
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Imagem do Mês
Autor(a):Marcelo Rezende
Últimos assuntos
» Pentax 67II-lente 75mm f 4,5-fime 120 rollei Pan 25
Tutorial: Downloads, personalização de Layouts e hospedagem de site Empty18/3/2014, 22:22 por caires duarte

» Alguns P&B da baixada santista.filmes 35mm e120 MF.
Tutorial: Downloads, personalização de Layouts e hospedagem de site Empty6/1/2014, 19:22 por caires duarte

» "ULTIMO POR DO SOL DE 2013"
Tutorial: Downloads, personalização de Layouts e hospedagem de site Empty6/1/2014, 18:43 por caires duarte

» "Reveillon 2014"
Tutorial: Downloads, personalização de Layouts e hospedagem de site Empty4/1/2014, 20:09 por caires duarte

» Vendo Lente 18-55 , 28-105 e flash 550 EX - Canon
Tutorial: Downloads, personalização de Layouts e hospedagem de site Empty19/3/2011, 18:10 por Marcelo Rezende

» Bordas simples para fotos
Tutorial: Downloads, personalização de Layouts e hospedagem de site Empty23/11/2010, 07:40 por Yuri Cordeiro

» Coruja cuidando ninho
Tutorial: Downloads, personalização de Layouts e hospedagem de site Empty23/11/2010, 07:38 por Yuri Cordeiro

» Vendo Now Bomb - Brazil Militar e flash 550 EX
Tutorial: Downloads, personalização de Layouts e hospedagem de site Empty16/11/2010, 18:19 por Marcelo Rezende

» Tutorial de After Affects em Potuguês
Tutorial: Downloads, personalização de Layouts e hospedagem de site Empty28/10/2010, 18:03 por Marcelo Rezende

Quem está conectado?
4 usuários online :: 0 registrados, 0 invisíveis e 4 visitantes

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 158 em 26/10/2021, 21:26
Entrar

Esqueci-me da senha

Votação

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

Tutorial: Downloads, personalização de Layouts e hospedagem de site Left_bar_bleue26%Tutorial: Downloads, personalização de Layouts e hospedagem de site Right_bar_bleue 26% [ 39 ]
Tutorial: Downloads, personalização de Layouts e hospedagem de site Left_bar_bleue11%Tutorial: Downloads, personalização de Layouts e hospedagem de site Right_bar_bleue 11% [ 16 ]
Tutorial: Downloads, personalização de Layouts e hospedagem de site Left_bar_bleue17%Tutorial: Downloads, personalização de Layouts e hospedagem de site Right_bar_bleue 17% [ 25 ]
Tutorial: Downloads, personalização de Layouts e hospedagem de site Left_bar_bleue13%Tutorial: Downloads, personalização de Layouts e hospedagem de site Right_bar_bleue 13% [ 20 ]
Tutorial: Downloads, personalização de Layouts e hospedagem de site Left_bar_bleue33%Tutorial: Downloads, personalização de Layouts e hospedagem de site Right_bar_bleue 33% [ 49 ]

Total de votos : 149


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

Ir para baixo

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

Mensagem por Marcelo Rezende 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:
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)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

Mensagem por Marcelo Rezende 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:
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)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

Mensagem por Marcelo Rezende 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:
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)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

Mensagem por Marcelo Rezende 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)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

Mensagem por Marcelo Rezende 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:


Última edição por Marcelo Rezende em 12/8/2009, 12:28, editado 2 vez(es)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

Mensagem por Marcelo Rezende 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:
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)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

Mensagem por Marcelo Rezende 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)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

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

Na página index.html vamos retirar texto e a imagem em destaque, vou substituir por texto.
Veja:
Spoiler:
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)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

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

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


Última edição por Marcelo Rezende em 12/8/2009, 12:33, editado 2 vez(es)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

Mensagem por Marcelo Rezende 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:


Última edição por Marcelo Rezende em 12/8/2009, 12:34, editado 3 vez(es)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

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

Código fonte das 12 imagens.
Spoiler:


Última edição por Marcelo Rezende em 12/8/2009, 12:35, editado 2 vez(es)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

Mensagem por Marcelo Rezende 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:
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)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

Mensagem por Marcelo Rezende 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)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

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

Antes de modificar os botões vamos trabalhar com texto, e rever como salvar no Gimp.
Veja:
Spoiler:
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)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

Mensagem por Marcelo Rezende 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)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

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

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


Última edição por Marcelo Rezende em 12/8/2009, 12:41, editado 1 vez(es)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

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

Codigo fonte página social.html
Spoiler:


Última edição por Marcelo Rezende em 12/8/2009, 12:42, editado 1 vez(es)
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

Mensagem por Marcelo Rezende 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:
Agora vamos a analizar o código fonte no Bloco de Notas. Navegador Explorer Exibir>Codigo Fonte.
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

Mensagem por Marcelo Rezende 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:

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

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.
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

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

Veja como ficou organizado as páginas e pastas:
Spoiler:
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.
Marcelo Rezende
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

Ir para o topo Ir para baixo

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

Mensagem por Marcelo Rezende 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:
Marcelo Rezende
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

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos