Exibir código-fonte para Inserir Imagens no Site Pronto

{|
|-
| colspan=2 style="border:1px solid #cccccc; vertical-align:top;" |
{| cellpadding="2" cellspacing="2" style="width:822px; vertical-align:top; text-align: left;"
| '''Para incluir imagens em uma página do Site Pronto, siga o procedimento:'''
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:SitePronto032.jpg|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 1. Na [[Área de Edição]], posicione o cursor "|" no local da página onde deseja que seja inserida a imagem.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:SitePronto033.jpg|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 2. Clique no botão de '''Imagem''' [[Imagem:SitePronto125.png]].
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:SitePronto005.jpg|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 3. Será aberta a tela de formatação de imagem.
Clique no botão '''Localizar no Servidor'''.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:SitePronto006.jpg|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 4. Será aberta a tela do '''Gerenciador de Arquivos'''.
Clique no botão '''Enviar arquivos'''.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:SitePronto007.jpg|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 5. Será aberta a opção para envio de imagem ao servidor.
Clique no botão '''Procurar...'''.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:SitePronto008.jpg|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 6. Procure e selecione o arquivo da imagem em seu computador.
7. Para transmitir o arquivo para o servidor clique no botão '''Upload'''.
----
<font color=red>'''Atenção:''' O Site Pronto tem uma limitação de tamanho máximo de 2Mb para cada arquivo. Sendo necessário reduzir o tamanho dos arquivos para no máximo 2Mb.

No caso de arquivo de imagem/foto o ideal é qua a imagem tenha apenas alguns Kb de tamanho, pois quanto maior o arquivo da imagem, maior o tempo para carregamento da imagem no site, fazendo com que a abertura do site seja lenta e tornando o site desinteressante aos visitantes devido a lentidão.</font>
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:SitePronto009.jpg|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 8. Aguarde o processo de envio do arquivo da imagem para o servidor.
Quando for concluído será exibida uma mensagem informando o sucesso do envio do arquivo e o mesmo aparecerá na listagem de arquivos logo abaixo.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:SitePronto010.jpg|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 9. Após clique no nome do arquivo para selecionar a imagem a ser inserida na página do Site Pronto.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:SitePronto034.jpg|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 10. Será retornado para a tela de formatação de imagem onde já estará preenchido o local da imagem no servidor (URL) e a mesma será exibida no campo de pré-visualização (Preview).
Clique em '''OK''' para incluir a imagem na página.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:SitePronto035.jpg|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 11. A imagem será inclusa na página na [[Área de Edição]], no local em que estava posicionado o cursor "|".
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:SitePronto037.jpg]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 12. Se desejar pode ajustar o tamanho da imagem inserida.
Para redimensionar uma imagem, clique apenas uma vez na imagem para selecioná-la.

Note que ao redor da imagem aparecem alguns quadradinhos nos cantos e laterais.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:SitePronto038.jpg|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 13. Clique com o botão esquerdo do mouse em um dos quadradinhos, mantenha o botão do mouse pressionado, arraste na direção desejada para aumentar ou reduzir a imagem e solte quando a imagem estiver do tamanho desejado.
Utilize os quadadinhos dos cantos para redimensionar altura e largura ao mesmo tempo.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:SitePronto039.jpg|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| Ou apenas um quadradinho de cima, baixo ou lateral para redimensionar somente altura ou largura.
----
<font color=red>'''Atenção:''' Esse ajuste no dimensionamento da imagem pode deformar a imagem o ideal é já inserir a imagem no tamanho adequado.
Consulte: [[Site Pronto#Tamanho da Imagem|Tamanho da Imagem]] e [[Site Pronto#Redimensionar uma Imagem|Redimensionar uma Imagem]]</font>
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:SitePronto036.jpg|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 14. Se desejar repita o procedimento para incluir outras imagens.
15. Quando terminar clique no botão '''Gravar'''.
|}
|-
| colspan=2; style="border:0px solid; vertical-align:top;" |
{| cellpadding="0" cellspacing="2" style="width:822px; vertical-align:top; text-align: right;"
| [[Imagem:Volt.png|link=Site Pronto]]
|}
|}