4ª aula - Parte 1 - Como Linkar Menu

Como linkar menu

-Veja o video:

-Espero que tenham percebido

Até à proxima aula.
Prof, MissPipa13

3ª aula - Parte 4- Como colocar contorno nas imagens

Como colocar contorno nas imagens.

-Abre o Pixlr.com
-Clica em "Abrir imagem do computador"
-Abre uma imagem que queira por contorno

-De seguida clica em Camada>Estilos de Camada...

-De seguida, clica em Brilho Exterior, coloca o certo no quadrado, e acerta as coisas como estão no print:

-Eu usei a cor roxa, mas pode usar a cor que quiser.

-Para colocar contorno tipo sombra, siga o print:

-E é assim que colocamos contorno nas imagens, até à próxima aula que é sexta-feira, dia 9 à mesma hora, hoje tive de postar mais cedo a aula, porque não podia estar cá mais tarde.

Não faltem, porque a próxima aula já vai ser mais avançada!

Prof, MissPipa13

3ª aula - Parte 3 - Como fazer Marca d'agua

Como fazer marca d'agua

Antes eu já tinha explicado como fazer marca d'agua, mas desta forma que vou ensinar hoje, a marca d'agua fica muito melhor.
Para não haver muitas complicações eu fiz um video:



Só tem de abrir o pixlr.com e o resto explica no video.
Já a seguir vou postar a quarta parte da terceira aula.
Prof, MissPipa13

3ª aula - Parte 2 - Básicos de HTML

Básicos de HTML

Hoje na 2ª parte da aula, eu vou falar sobre HTML, na primeira parte eu já passei alguns códigos de HTML, para os botões de topo.

-Primeiro que tudo, vou passar o código para colocar o banner no blog:

<div align="center"><img src="LINK DO BANNER" border="0" /><br><textarea onFocus="this.select()" onMouseOver="this.focus()" rows="3" cols="15" name="textarea"><a href="LINK DO BLOG/SITE" target="_blank"><img src="LINK DO BANNER" border="0" /></a></textarea></div>

-Tem de hospedar ao banner no tinypic.com , e substituir LINK DO BANNER pelo diret link, substitui LINK DO BLOG/SITE , pelo link do seu blog ou site.
-Depois cria um gadget, e procura por HTML/JavaScript, e cola lá o código do banner já modificado por você.

-Agora vou falar sobre algumas coisas básicas do HTML.

-Para colocar alguma coisa no centro (por exemplo, chat, banner, etc.), usamos estes trechos:

<center> 
AQUI COLOCAMOS O CÓDIGO DO CHAT, BANNER, ETC
</center>

-Para colocar alguma coisa à esquerda, usamos estes trechos:

<left>
AQUI COLOCAMOS O CÓDIGO
</left>

-Para colocar alguma coisa à direita, usamos estes treschos:

<right>
AQUI COLOCAMOS O CÓDIGO
</right>

E esses são os Básicos de HTML.

Espere pela terceira parte da aula.

Prof, MissPipa13

3ª aula -Parte 1- Fazer botões de SUBIR e DESCER

Como fazer botões de subida e descida

-Abra o Paint.net ou o pixlr.com
-Faça um botão de subir e outro botão de descer (eu fiz os meus no pixlr.com)

Veja os meus botões:

 -Agora para aplicar os botões no seu blog, vai ter de hospedar as imagens no tinypic.com

Botão de descer:

<div style="position:fixed; bottom:0px; right:0px;"><a href="#footer"><img src="LINK DA IMAGEM" border="0" /></a></div>

Botão de subir:

<div style="position:fixed; bottom:0px; right:0px;"><a href="#"><img src="LINK DA IMAGEM" border="0" /></a></div>

-Onde diz, LINK DA IMAGEM , você substitui pelo link direto ou diret link de quando faz hospedagem no tinypic.com.
-Depois cria um gadget, procura por: HTML/JavaScript , e cola lá um dos codigos, depois faz a mesma coisa e cola lá o outro codigo.

E terminamos, se o código não ficou bem, diga, que eu digo uma forma de ajustar o botão.

Esperem pela segunda parte da aula de hoje.

Prof, MissPipa13

2ª aula -Parte 4- Como deixar imagens com boa qualidade

Como deixar imagens com boa qualidade

Quando por exemplo, nós fazemos um print, e colamos no paint, a imagem não fica com muito boa qualidade, então eu hoje vou ensinar a deixar as imagens com qualidade.

-Faça a imagem e guarde.
-Na altura de guardar, mude o tipo de imagem, para PNG:

-Clique em guardar e já está.

É assim que as imagens ficam com melhor qualidade.

A 2ª aula acabou, e na quarta-feira as 2h da tarde de br / 6h da tarde de pt, estaremos de novo aqui, para aprender a fazer coisas novas.

Prof, MissPipa13

2ª aula -Parte 3- Como fazer um MARCA D'AGUA

Como fazer Marca d'agua

-Abra o Paint.net ou o Pixlr.com
-Crie uma imagem com 400x400 de dimensão
-Coloque o fundo transparente usando a varinha mágica

-Guarde a imagem
-Abra a imagem no PhotoScape
-E comece a escrever Club e Penguin:

-Escreva Club com a cor branca e contorno preto

-E Penguin com a cor laranja claro e contorno preto (por baixo de club)

-Escreva o nome do seu blog por cima ou por baixo.
-Exemplo: Praia do Club Penguin:

-Guarde a imagem.

Veja a maca d'agua (apenas pus Club Penguin):

Mas ainda não terminamos.
-Vá ao pixlr.com e abra a imagem da marca d'agua.
-De seguida vá a Camada>Estilos de camada>Brilho Exterior

-Acerte as coisas, como estão na imagem:

-No final é só guardar a imagem.

Olhe a minha marca d'agua:

E já está terminada a nossa marca d'agua, esta marca d'agua não é a melhor, mas fica bonita para aplicar nos templates.

E terminamos a 3ª parte da aula de hoje, já a seguir vou postar a 4ª e ultima parte da 2ª aula.
A ultima parte vai ser mais fácil, e não vou precisar que me enviem o que fizerem para dar nota.

Prof, MissPipa13

2ª aula - Parte 2 - Como fazer FUNDO DE CHAT

Como fazer fundo de chat

-Abra o link: http://i.imm.io/mJVN.png
-Guarde a imagem
-Abra a imagem com o paint.net ou pixlr.com
-Decore

Explicações de como decorar no Paint.net:

Este é o meu fundo de chat:

-Abra o fundo de chat com o PhotoScape.
-NA PARTE OBJECTO
-Decore com penguins, puffles, etc, escreva o que queira.
-Para adicionar fotografias clique (no icon contornado a verde):

-Para adicionar texto clique (no icon contornado a azul):

-Guarde o fundo de chat.

E já esta.
Este é o meu fundo:

-Agora para aplicar o fundo de chat, tem de hospedar a imagem no TinyPic: http://tinypic.com/
-Copiar o diret link
-Vá no seu chat, e clique em Edit Your Chat ou Edite Seu Chat
-Clique em Change Backgroud ou Alterar Plano de Fundo
-À frente de Backgroud coloque o diret link, e de seguida clique em Get Images
-Espere que o fundo apareça nas imagens, e quando aparecer, clique nele.
-Já está!

E terminamos a parte 2 da aula.
Quando terminarem o vosso fundo de chat, avançamos para a 3º parte da aula.

Prof, MissPipa13

2ª aula -Parte 1- Como fazer um BANNER

Como fazer banner

-Primeiro entramos no site: http://jirox.net/AsButtonGen/
-NA PARTE COLOR/FORM
-Fazemos uma imagem com: width: 200 / height: 200

-Arredondamos o retângulo

-Escolhemos a cor (eu pus de cor azul)
-NA PARTE GRADATION TYPE
-Escolhemos o tipo de gradiação (eu escolhi o Type1)
-NA PARTE STRIPE
-Escolhemos se queremos usar riscas (eu usei)

-Por fim salvamos, clicando em SAVE, mas não mudamos o nome que aparece

Este é o meu banner:

-Agora abrimos o PhotoScape e decoramos.

-Abrimos o PhotoScape na PARTE EDITOR DE FOTOGRAFIAS.
-NA PARTE OBJECTO
-Colocamos as imagens, e escrevemos

E pronto terminamos o nosso banner.

Vejam o meu banner:

Eu escrevi, venham, mas podemos escrever, entre, acesse, etc.

Quando todos acabarem eu vou postar a 2ª parte da aula.

Prof MissPipa

1ª aula -Parte 1- Como fazer um BY

Como fazer um By

-Abra o site: http://jirox.net/AsButtonGen/
-NA PARTE COLOR/FORM
-Faça um retângulo com: widht: 300 / height: 200

-Arredonde os cantos (veja a imagem):

-Escolha a cor que quiser (eu escolhi rosa, antes estava vermelho).
-NA PARTE GRADATION TYPE
-Escolha o tipo que você quiser (eu escolhi o Type2)
-NA PARTE STRIPE
-Escolha se quer riscas ou não, e a se quer horizontais, verticais ou diagonais (eu escolhi sem riscas)

-DEPOIS SO TEM DE CLICAR EM SAVE (não mude o nome que tiver)

Este é meu by:

-Agora abrimos o PhotoScape
-NA PARTE EDITOR DE VARIAS FOTOGRAFIAS
-Abrimos o by.
-Depois NA PARTE OBJETO
-Adicionamos as fotografias, e escrevemos
-Clicamos em Guardar

Este é meu by:

Terminamos!
Depois só têm de abrir Paint.net, Fw, ou pixlr.com e tirar o fundo ao by.
Espero que toda a turma tenha percebido, se não perceberam falem no xat!
Até a proxima aula que é na segunda-feira, as 2h da tarde br e as 6h da tarde de pt.

Prof, MissPipa13