Crie seu Layout. pt3

22. E aqui estamos nós de novo... ^__^ Bom, agora que acabamos com todo esse processo de 'enfeites e efeitos' no seu futuro layout, vamos à parte final: Unir todas as Camadas (Layers) em uma só! Você sabe: a camada do seu wallpaper, camadas dos retângulos, dos textos (T), etc... vamos transformá-las em uma só camada (Layer). A isso damos o nome de 'Achatar imagem' (Flatten Image)

---

23. Continuando: Na barra de ferramentas, lá em cima, vá em 'Camada/Achatar imagem' (Layer/Flatten image). Pronto! Agora você só precisa salvar essa imagem, pra depois hospedá-la na internet (Upload)... mas como ficaria muito lerdo pra carregar, aconselho que divida a imagem em 3 partes, pra ficar mais fácil. Mas primeiro crie uma pasta para guardar as imagens do seu layout. Ser organizado de vez em quando é bom, né! ^_^

---

24. Pegue a ferramenta 'Fatia' (K) arraste-a, de modo a desenhar 3 retângulos, como mostro na figura. A letra 'A' mostra uma das linhas dessa ferramenta. Essas serão as 3 partes em que a imagem do layout será dividido. Agora de posse da ferramenta 'Seleção' (M), selecione por cima da ferramenta 'Fatia', como mostra o item 'B'. Após selecionado o retângulo, digite: Ctrl+C depois Ctrl+N. Clike 'OK' na janela que aparece e digite Ctrl+V. Salvando a figura, vá em 'Arquivos/Salvar para a Web' (File/Save for Web) salve como img01.jpg e depois repita o mesmo procedimento com as outras 2 partes do layout restantes. Pronto? Agora selecione pequena faixa no finalzinho da imagem, o 'Tile'. Se lembra? Selecione essa parte com a ferramenta 'Seleção', conforme mostra a letra 'B', digite Ctrl+C e Ctrl+N e depois Ctrl+V. Salve esse documento como tile.gif.

---

25. E aí? Tudo certo? Espero que não tenha se enrolado muito! §=D Pois bem, agora explicando: com Ctrl+C você copia a área selecionada, com Ctrl+N abre um novo documento e com o Ctrl+V você cola. Simples, não? §=} Cansado? É, eu sei... esse tuto é realmente enorme! *__*~

---

26. Agora vamos à 2ª e última aula! (aleluia!) Abra seu FrontPage (que emoção) vá em 'Arquivo/Salvar' e salve esse novo documento (index) na pasta onde está as imagens do seu layout. Agora vamos começar a fazer a página html do seu template!

---

27. Clike com o botão direito na página e depois na opção 'Propriedades da página'. Agora vá na página 'Plano de fundo', marque a opção 'Figura de plano de fundo' e procure pela imagem Tile.gif Continuando, sem fechar essa janela, vá na página 'Margens' e marque as duas opções como 0 pixels. Pronto.

---

28. Como ficou o efeito do seu 'Tile'? Legal? §=D Ah, vamos colocar o resto das imagens né! Vá em 'Inserir/Figura/Do arquivo' e coloque em as imagens... em ordem, viu, uma-a-uma! ^__^

---

29. Agora vamos pôr os espaços onde vão ficar as escritas do Post e Perfil: Observe se no seu painel de ferramentas, tem a ferramenta 'Posicionamento' , caso contrário, vá em 'Exibir/Barra de Ferramentas/Posicionamento' Agora, na página do seu layout, tecle 'Enter', digite Posts e em baixo Perfil.

---

30. Selecione o texto Post e clike no ícone . Apareceu agora uns quadradinhos... passando o mouse em cima, você verá que pode mover o texto de lugar. Faça isso, mas primeiro ajuste as laterais, para que fique na medida certa da largura do retângulo. Posicione e pronto. Agora repita a operação com o texto Perfil.

---

31. Colocando os códigos: Agora vamos substituir os textos Posts e Perfil pelos seus respectivos códigos. §=] Primeiro selecione o texto Post. Agora clike no botão 'Modo HTML' que tem em baixo, na barrinha à esquerda.

32. Substitua o texto selecionado -Post- pelo código abaixo. [*Atenção ao 2º código do Weblog e Blig!*] -BLOGGER- <!--INICIO - TAGS DO BLOGGER --> <blogger> <span style="font-family:Verdana;font-size:78%;"> <blogdateheader> <b> <p align="center">[<$BlogDateHeaderDate$>]</b></span></blogdateheader> <p align="left"> <span style="font-family:Verdana;font-size:78%;"> <$BlogItemBody$><br /><br /> Por <b><a href="">"><$BlogItemAuthorNickname$></a></b> às [<$BlogItemDateTime$>]</span> <br /> <!-- COLOQUE AQUI O CÓDIGO DO SEU SISTEMA DE COMENTÁRIOS --> <p> <hr width="70%"> <p> </blogger> </span> <!--FIM - TAGS DO BLOGGER --> -WEBLOGGER- <!--INICIO - TAGS DO WEBLOGGER --> <weblogger> <weblogcabecalhodata> <b> <span style="font-family:Verdana;font-size:78%;"> <p align="center">[<#weblogDataCabecalho#>]</span></b> </weblogcabecalhodata><p> <span style="font-family:Verdana;font-size:78%;"> <#weblogMensagem#></span> <p><span style="font-family:Verdana;"><span style="font-size:78%;">Por <b><a href="">"><#weblogApelido#></a></b> às <#weblogHora#> <br /> </span> <a href="">)"><span style="font-size:78%;"><b>Comentários: [<#weblogTotalComentarios#>]</b></span></a></span></span><p> <hr width="70%"> <p></weblogger><!-- FIM - TAGS DO WEBLOGGER --> <!-- ATENÇÃO!!! - COLOQUE ESTE CÓDIGO ABAIXO DE [HEAD] --><script language="javascript" src="'http://www.weblogger.com.br/js/weblogger.js'"></script><!-- FIM DO CÓDIGO --> -BLIG- <!--INICIO - POST - TAGS DO BLIG --> <span style="font-family:Verdana;font-size:78%;">[#LISTAGEM#]</span> <p> <hr width="70%"> <br /><br /><br /> <!--FIM - POST - TAGS DO BLIG --> <!-- ATENÇÃO!!! - COLOQUE ESTE CÓDIGO ABAIXO DE [HEAD] --> <script language="JavaScript1.2" src="http://blig.ig.com.br/js/funcoes_templates.js"></script> <!-- FIM DO CÓDIGO -->

| | | | | | | | | | | | | | | |

33. Agora Faça o mesmo com o -Perfil- Aqui vai o código: -BLOGGER- <!--INICIO - BLOGGER - PERSONALIZAÇÃO --> <p align="center"> <span style="font-family:Verdana;font-size:78%;"> <!-- MEU PERFIL --> <b>[Sobre Mim]</b><br /><br /> Nome: <br />Idade: <br />Gosto de: <br />Aproveite para falar tudo sobre você.</p> <p align="center"> <!-- Arquivos --> <b>[Posts passados]</b><br /><br /> <a href="">">[Arquivos]</a><br /> <br /> <b>[Blogs Amigos]</b><br /><br /> <!-- Blogs Favoritos - Modifique links e acrescente quantos quiser --> <a href="http://twosouls.blogger.com.br" target="_blank">TwoSouls</a><br /> <a href="http://endereço" target="_blank">blog1</a> <br /> <a href="http://www.dreamit.blogger.com.br" target="_blank">blog2</a><br /> <a href="http://endereço." target="_blank">blog3</a><br /> <br /> <b>[Links]</b><br /><br /> <!-- Links - Acrescente quantos quiser --> <a href="http://blogger.com.br" target="_blank">Blogger</a><br /> <a href="http://endereço" target="_blank">Link1</a> <br /> <a href="http://endereço" target="_blank">Link2</a><br /> <a href="http://endereço." target="_blank">Link3</a> <br /><br /> <b>[Acessórios]</b><br /><br /> <!-- SEUS ACESSÓRIOS --> Coloque aqui: seu gifs, contador, relógio, etc.. <p align="center"> <b>[Créditos]</b><br /><br /> <!-- Creditos --> <a href="http://www.blogger.com.br" target="_blank">Hosted at Blogger</a> <p align="center"> <!--FIM - BLOGGER - PERSONALIZAÇÃO --> <b>¤ Layout feito por Mim</b> -WEBLOGGER- <!--INICIO - WEBLOGGER - PERSONALIZAÇÃO --> <p align="center"><b><span style="font-family:Verdana;font-size:78%;">[</span></b><span style="font-family:Verdana;font-size:78%;"><b>Sobre Mim]</b><br /><br /> Nome: <br />Idade: <br />Gosto de: <br />Aproveite para falar tudo sobre você. </p> <p align="center"> <!-- Arquivos --> <b>[Posts passados]</b> <br /><br /> <#weblogArquivo#><br /> <br /> <br /> <span style="font-family:Verdana;font-size:78%;"> <b>[Visitas]</b></span><br /><br /> <center><#weblogContador#></center> <p align="center"> <b>[Deixe seu recado]</b> <br /><br /> <a href="">" target="_blank">[My Guest Book]</a> <p align="center"> <b>[Blogs Amigos]</b><br /><br /> <!-- BLOGS AMIGOS - Modifique links e acrescente quantos quiser --> <a href="http://twosouls.blogger.com.br" target="_blank">TwoSouls</a><br /> <a href="http://endereço" target="_blank">blog1</a> <br /> <a href="http://endereço" target="_blank">blog2</a><br /> <a href="http://endereço" target="_blank">blog3</a><br /> <br /> <b>[Links]</b><br /><br /> <!-- LINKS - EDITE E ACRESCENTE QUANTOS QUISER --> <a href="http://weblogger.com.br" target="_blank">Weblogger</a><br /> <a href="http://endereço" target="_blank">Link1</a> <br /> <a href="http://endereço" target="_blank">Link2</a><br /> <a href="http://endereço" target="_blank">Link3</a> <br /><br /> <b>[Acessórios]</b><br /><br /> <!-- SEUS ACESSÓRIOS --> Coloque aqui: seu gifs, contador, relógio, etc.. <p align="center"> <b>[Créditos]</b><br /><br /> <!-- CRÉDITOS - NÃO RETIRE --> <a href="http://www.weblogger.com.br" target="_blank">Hosted at Weblogger</a> <p align="center"> <b>¤ Layout feito por Mim -BLIG- <!--INICIO - PERSONALIZAÇÃO --> <!-- INICIO - MEU PERFIL --> <p align="center"> <span style="font-family:Verdana;font-size:78%;"><b>[Sobre mim]</b><p align="center"> [#BONECO#] <p align="center"> Nome: <br />Idade: <br />Moro em: <br /> Aproveite para falar tudo sobre você. <p align="center"> <b><span style="font-family:Verdana;font-size:85%;"></span></b>*Mais coisas <b><a href="javascript:abrePerfil();">[aqui]</a></b> <!-- fim - sobre mim --> <br /><br /><br /> <!-- INICIO - ARQUIVOS --> <b>[Arquivos]</b><br /> <!--arquivo--><!--/arquivo--> <!-- FIM - ARQUIVOS --> <br /><br /><br /> <b>[Acessórios]</b><br /><br /> <!-- INÍCIO - MEUS ACESSORIOS --> Coloque aqui o que quiseres: suas dolls, gifs, contador, relógio, etc.. <!-- FIM - MEUS ACESSORIOS --> <br /><br /><br /> <span style="font-family:Verdana;font-size:78%;"><b>[Bligs Amigos]</b></span><span style="font-family:Verdana;font-size:78%;"><br /><br /> <!-- BLIG DE AMIGOS --> <!--amigos--><!--/amigos--> <br /><br /><br /> </span> <span style="font-family:Verdana;font-size:78%;"><b>[Blogs Favoritos]</b></span><span style="font-family:Verdana;font-size:78%;"><br /><br /> <!-- BLOGS DE AMIGOS --> <a href="http://www.twosouls.blogger.com.br" target="_blank">TwoSouls</a> <br /> <a href="http://ENDEREcO" target="_blank">Link2</a><br /> <a href="http://ENDEREcO" target="_blank">Link3</a><br /> <a href="http://endereco" target="_blank">Link4</a><br /><br /><br /> <b>[Links]</b><br /><br /> <!-- LINKS - EDITE E ACRESCENTE QNTOS QUISER --> <a href="http://www.blig.com.br" target="_blank">Blig</a> <br /> <a href="http://endereco" target="_blank">Link2</a><br /> <a href="http://endereco" target="_blank">Link3</a><br /> <a href="http://endereco" target="_blank">Link4</a><br /><br /><br /> <!--FIM - PERSONALIZAÇÃO --> <!-- INICIO CRÉDITOS - NAO REMOVER --> <b>[Créditos]</b><br /><br /> <a href="http://www.blig.com.br" target="_blank">Hosted at Blig</a><br /><br /><br /> <b>¤ Layout feito por Mim</span></b><br />

34. Agora selecione todo o código Html e salve num bloco de notas. Tarefa terminada! \o/ Uhú! Ou melhor, quase! Ainda falta você hospedar as imagens no servidor do seu blog (Upload), colocar o endereço das imagens (já hospedadas no servidor do blog/site) no código do seu bloco de notas, (pois antes, o endereço delas era o do seu computador) e passar todo esse Html pra área Template do seu blog! §=D Complicado? Nem tanto! *__*