Exibir código-fonte para Manual Prático de Estilização do Subportal Institucional

== Considerações Iniciais ==
<div style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 1em; font-size: 16px;">
  <p>
    Este material de apoio tem como objetivo orientar servidores e colaboradores 
    quanto ao processo de estilização do subportal do site institucional. 
    O guia apresenta instruções práticas para aplicação de ajustes visuais, 
    <span style="color: red;">( como cores, fontes, margens ) </span>e demais elementos de identidade visual, 
    visando garantir padronização e melhor apresentação das páginas.
  </p>
</div>

== Passo a passo para fazer login no subportal ==
<div style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 1em; font-size: 16px;">
  <p>
     Acesse o link: https://portal.ifs.ifsuldeminas.edu.br/ role ao final da página, encontre o quadro de <b>"Login"</b>, como mostra a <b>"figura 1"</b>
  </p>
</div>

<table border='0' style="width:100%;">
<tr>
<td valign="top" align='center'>
<b>Figura 1:</b> Acessando o subportal.
</td>
</tr>
<tr>
<td valign="top" align='center'>
<div class="res-img">
[[Arquivo: Manual_Prático_de_Estilização_do_Subportal_Institucional_-_1.png]]
</div>
</td>
</tr>
</table>
<br>

== Fazendo o login para ter acesso a página do setor ==
<div style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 1em; font-size: 16px;">
  <p>
     Será aberta a tela para colocar o <b>"Usuário e senha"</b>, como mostrado na <b>"figura 2".</b>
  </p>
</div>

<table border='0' style="width:100%;">
<tr>
<td valign="top" align='center'>
<b>Figura 2: </b>Página de login 
</td>
</tr>
<tr>
<td valign="top" align='center'>
<div class="res-img">
[[Arquivo: Manual_Prático_de_Estilização_do_Subportal_Institucional_-_2.png]]
</div>
</td>
</tr>
</table>
<br>

== Acessando a página que será editada ==
<div style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 1em; font-size: 16px;">
<p>
    Após realizar o login, acesse a página do setor que deseja editar. No exemplo deste tutorial, utilizamos a <b>Página Teste</b> para demonstrar o processo de edição.
</p>

</div>

<table border='0' style="width:100%;">
<tr>
<td valign="top" align='center'>
<b>Figura 3: </b>Página teste 
</td>
</tr>
<tr>
<td valign="top" align='center'>
<div class="res-img">
[[Arquivo: Manual_Prático_de_Estilização_do_Subportal_Institucional_-_3.png]]
</div>
</td>
</tr>
</table>
<br>

== Adicionando imagens a página ==
<div style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 1em; font-size: 16px;">
<p>
  Após ter acesso à edição da página, vamos inserir uma imagem. Neste exemplo, estou adicionando o logo do NTI. 
  Para isso, será necessário carregar a imagem primeiro. Clique no ícone em destaque e siga as orientações apresentadas na figura 5.
</p>

</div>

<table border='0' style="width:100%;">
<tr>
<td valign="top" align='center'>
<b>Figura 4: </b>Página teste 
</td>
</tr>
<tr>
<td valign="top" align='center'>
<div class="res-img">
[[Arquivo: Manual_Prático_de_Estilização_do_Subportal_Institucional_-_4.png]]
</div>
</td>
</tr>
</table>
<br>

== Adicionando imagens a página ==
<div style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 1em; font-size: 16px;">
<p>
  <b>Passo 1:</b> Localize a pasta do setor e selecione-a (ela deve ficar destacada em azul para indicar que está selecionada), 
  como mostra o balão em destaque 1.
</p>

<p>
  <b>Passo 2:</b> Após selecionar a pasta, clique em <b>"Upload"</b>, conforme mostra o balão em destaque 2.
</p>

<p>
  <b>Passo 3:</b> Na próxima tela que aparecer, clique em <b>"Browse"</b>, escolha a imagem que deseja adicionar à página 
  e, em seguida, clique em <b>"Upload"</b>.
</p>

</div>

<table border='0' style="width:100%;">
<tr>
<td valign="top" align='center'>
<b>Figura 5: </b>Página teste 
</td>
</tr>
<tr>
<td valign="top" align='center'>
<div class="res-img">
[[Arquivo: Manual_Prático_de_Estilização_do_Subportal_Institucional_-_5.png]]
</div>
</td>
</tr>
</table>
<br>


== Adicionando imagens a página ==
<div style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 1em; font-size: 16px;">
<p>
  <b>Passo 1:</b> Localize a pasta do setor e selecione-a (ela deve ficar destacada em azul para indicar que está selecionada), 
  como mostra o balão em destaque 1.
</p>

<p>
  <b>Passo 2:</b> Após selecionar a pasta, clique em <b>"Upload"</b>, conforme mostra o balão em destaque 2.
</p>

<p>
  <b>Passo 3:</b> Na próxima tela que aparecer, clique em <b>"Browse"</b>, escolha a imagem que deseja adicionar à página 
  e, em seguida, clique em <b>"Upload"</b>.
</p>

</div>

<table border='0' style="width:100%;">
<tr>
<td valign="top" align='center'>
<b>Figura 5: </b>Página teste 
</td>
</tr>
<tr>
<td valign="top" align='center'>
<div class="res-img">
[[Arquivo: Manual_Prático_de_Estilização_do_Subportal_Institucional_-_5.png]]
</div>
</td>
</tr>
</table>
<br>

== Incorporando link do Google Fotos  ==
<div style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 1em; font-size: 16px;">
<p>
<a href="https://photos.app.goo.gl/SKuXujGa37G37i5u7">link para o google fotos</a>
</p>

https://photos.app.goo.gl/SKuXujGa37G37i5u7