Inserir Imagens no Site Pronto

De Suporte
(Diferença entre revisões)
Ir para: navegação, pesquisa
(Criou página com '{| |- | colspan=2 style="border:1px solid #cccccc; vertical-align:top;" | {| cellpadding="2" cellspacing="2" style="width:822px; vertical-align:top; text-align: left;" | '''Pa...')
 
 
(9 edições intermediárias de um usuário não apresentadas)
Linha 1: Linha 1:
 
{|
 
{|
 +
|-
 +
| 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]]
 +
|}
 
|-
 
|-
 
| colspan=2 style="border:1px solid #cccccc; vertical-align:top;" |
 
| colspan=2 style="border:1px solid #cccccc; vertical-align:top;" |
Linha 31: Linha 36:
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
 
| 3. Será aberta a tela de formatação de imagem.
 
| 3. Será aberta a tela de formatação de imagem.
−
4. Clique no botão '''Localizar no Servidor'''.
+
Clique no botão '''Localizar no Servidor'''.
 
|}
 
|}
 
|-
 
|-
Linha 40: Linha 45:
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
−
| 5. Será aberta a tela do '''Gerenciador de Arquivos'''.
+
| 4. Será aberta a tela do '''Gerenciador de Arquivos'''.
−
6. Clique no botão '''Enviar arquivos'''.
+
Clique no botão '''Enviar arquivos'''.
 
|}
 
|}
 
|-
 
|-
Linha 50: Linha 55:
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
−
| 7. Será aberta a opção para envio de imagem ao servidor.
+
| 5. Será aberta a opção para envio de imagem ao servidor.
−
8. Clique no botão '''Procurar...'''.
+
Clique no botão '''Procurar...'''.
 
|}
 
|}
 
|-
 
|-
Linha 60: Linha 65:
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
−
| 9. Procure e selecione o arquivo da imagem em seu computador.
+
| 6. Procure e selecione o arquivo da imagem em seu computador.
−
10. Para transmitir o arquivo para o servidor clique no botão '''Upload'''.
+
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.
+
<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.
−
 
+
−
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>
 
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>
Linha 76: Linha 79:
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
−
| 11. Aguarde o processo de envio do arquivo da imagem para o servidor.
+
| 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.
 
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.
 
|}
 
|}
Linha 86: Linha 89:
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
−
| 12. Após clique no nome do arquivo para selecionar a imagem a ser inserida na página do Site Pronto.
+
| 9. Após clique no nome do arquivo para selecionar a imagem a ser inserida na página do Site Pronto.
 
|}
 
|}
 
|-
 
|-
Linha 95: Linha 98:
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
−
| 13. 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).
+
| 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).
−
14. Clique em '''OK''' para incluir a imagem na página.
+
Clique em '''OK''' para incluir a imagem na página.
 
|}
 
|}
 
|-
 
|-
Linha 105: Linha 108:
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
−
| 15. A imagem será inclusa na página na [[Área de Edição]].
+
| 11. Na [[Área de Edição]], a imagem será inclusa na página, no local em que estava posicionado o cursor "|".
 
|}
 
|}
 
|-
 
|-
 
| style="border:1px solid #cccccc; vertical-align:center;" |
 
| style="border:1px solid #cccccc; vertical-align:center;" |
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
−
| [[Imagem:SitePronto037.jpg|400px|Clique para ampliar]]
+
| [[Imagem:SitePronto037.jpg]]
 
|}
 
|}
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
−
| Se desejar pode ajustar o tamanho da imagem inserida.
+
| 12. Se desejar pode ajustar o tamanho da imagem inserida.
−
16. Para redimensionar uma imagem, clique apenas uma vez na imagem para selecioná-la.
+
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.
 
Note que ao redor da imagem aparecem alguns quadradinhos nos cantos e laterais.
Linha 122: Linha 125:
 
| style="border:1px solid #cccccc; vertical-align:center;" |
 
| style="border:1px solid #cccccc; vertical-align:center;" |
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
−
| [[Imagem:SitePronto038.jpg]]
+
| [[Imagem:SitePronto038.jpg|400px|Clique para ampliar]]
 
|}
 
|}
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
−
| 17. Clique em um dos quadradinhos, mantenha pressionado o botão do mouse, arraste na direção desejada para aumentar ou reduzir a imagem e solte quando a imagem estiver do tamanho desejado.
+
| 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.
+
Utilize os quadradinhos dos cantos para redimensionar altura e largura ao mesmo tempo.
 
|}
 
|}
 
|-
 
|-
Linha 136: Linha 139:
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
−
| 18. ou apenas um quadradinho de cima, baixo ou lateral para redimensionar somente altura ou largura.
+
| Ou clique em apenas um quadradinho de cima, baixo ou lateral para redimensionar somente altura ou largura.
 +
----
 +
<font color=red>'''Atenção:''' Esse ajuste no dimensionamento pode deformar a imagem, o ideal é já inserir a imagem no tamanho adequado.
 +
Consulte: [[Tamanho da Imagem]] e [[Redimensionar uma Imagem]]</font>
 
|}
 
|}
 
|-
 
|-
Linha 145: Linha 151:
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
 
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
−
| <font color=red>'''Atenção:''' Esse ajuste no dimensionamento da imagem pode deformar a imagem o ideal é já inserir a imagem no tamanho adequado.
+
| 14. Se desejar repita o procedimento para incluir outras imagens.
−
Consulte [[Site Pronto#Tamanho da Imagem|Tamanho da Imagem]] e [[Site Pronto#Redimensionar uma Imagem|Redimensionar uma Imagem]]</font>
+
15. Quando terminar clique no botão '''Gravar'''.
−
 
+
−
19. Se desejar repita o procedimento para incluir outras imagens.
+
−
 
+
−
20. Quando terminar clique no botão '''Gravar'''.
+
 
|}
 
|}
 
|-
 
|-

Edição atual tal como às 15h05min de 17 de maio de 2016

Volt.png
Para incluir imagens em uma página do Site Pronto, siga o procedimento:
Clique para ampliar
1. Na Área de Edição, posicione o cursor "|" no local da página onde deseja que seja inserida a imagem.
Clique para ampliar
2. Clique no botão de Imagem SitePronto125.png.
Clique para ampliar
3. Será aberta a tela de formatação de imagem.

Clique no botão Localizar no Servidor.

Clique para ampliar
4. Será aberta a tela do Gerenciador de Arquivos.

Clique no botão Enviar arquivos.

Clique para ampliar
5. Será aberta a opção para envio de imagem ao servidor.

Clique no botão Procurar....

Clique para ampliar
6. Procure e selecione o arquivo da imagem em seu computador.

7. Para transmitir o arquivo para o servidor clique no botão Upload.

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.

Clique para ampliar
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.

Clique para ampliar
9. Após clique no nome do arquivo para selecionar a imagem a ser inserida na página do Site Pronto.
Clique para ampliar
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.

Clique para ampliar
11. Na Área de Edição, a imagem será inclusa na página, no local em que estava posicionado o cursor "|".
SitePronto037.jpg
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.

Clique para ampliar
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 quadradinhos dos cantos para redimensionar altura e largura ao mesmo tempo.

Clique para ampliar
Ou clique em apenas um quadradinho de cima, baixo ou lateral para redimensionar somente altura ou largura.

Atenção: Esse ajuste no dimensionamento pode deformar a imagem, o ideal é já inserir a imagem no tamanho adequado. Consulte: Tamanho da Imagem e Redimensionar uma Imagem

Clique para ampliar
14. Se desejar repita o procedimento para incluir outras imagens.

15. Quando terminar clique no botão Gravar.

Volt.png
Disponível em "http://wiki.splicenet.com.br/suporte/index.php?title=Inserir_Imagens_no_Site_Pronto&oldid=29796"
Ferramentas pessoais
Espaços nominais

Variantes
Ações
Navegação
Ferramentas