Manual Prático de Estilização do Subportal Institucional: mudanças entre as edições

Edição atual tal como às 17h17min de 2 de outubro de 2025

Considerações Iniciais

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, ( como cores, fontes, margens ) e demais elementos de identidade visual, visando garantir padronização e melhor apresentação das páginas.

Passo a passo para fazer login no subportal

Acesse o link: https://portal.ifs.ifsuldeminas.edu.br/ role ao final da página, encontre o quadro de "Login", como mostra a "figura 1"

Figura 1: Acessando o subportal.

Fazendo o login para ter acesso a página do setor

Será aberta a tela para colocar o "Usuário e senha", como mostrado na "figura 2".

Figura 2: Página de login

Acessando a página que será editada

Após realizar o login, acesse a página do setor que deseja editar. No exemplo deste tutorial, utilizamos a Página Teste para demonstrar o processo de edição.

Figura 3: Página teste

Adicionando imagens a página

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.

Figura 4: Página teste

Adicionando imagens

Após clicar no ícone de adicionar imagem, no canto inferior esquerdo estará o menu "Folders (pastas)", clique em "Home" ache a pasta do seu setor, e adicione a imagem na pasta selecionada. Caso não tenha a pasta do setor ainda criada, crie com o nome do seu setor, cuidado ao criar, a pasta deve estar dentro Home.

Após adicionar a imagem na pasta do setor, clique em cima da imagem e depois em "Insert", para inserir ela na página.

Figura 5: Página teste

Adicionando imagens a página

Nesta parte do tutorial será mostrado como trabalhar com textos na página. A edição textual funciona de forma semelhante ao que encontramos em editores como Word ou LibreOffice, com ferramentas familiares de formatação.

No entanto, é importante destacar que, caso seja necessário aplicar algo diferente ou mais específico, será preciso utilizar o modo de edição por código, onde é possível inserir recursos avançados de programação.

Figura 5: Página teste

@@ Linha 84: / Linha 84: @@
 <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, conforme indicado na figura:
+   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 ==
+<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),
+   Após clicar no ícone de adicionar imagem, no canto inferior esquerdo estará o menu <b>"Folders (pastas)"</b>, clique em <b>"Home"</b> ache a pasta do seu setor, e adicione a imagem na pasta selecionada. Caso não tenha a pasta do setor ainda criada, crie com o nome do seu setor, <b>cuidado ao criar, a pasta deve estar dentro Home</b>.
-  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.
+   Após adicionar a imagem na pasta do setor, <b>clique em cima da imagem e depois em "Insert"</b>, para inserir ela na página.
 </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 3:</b> Na próxima tela que aparecer, clique em <b>"Browse"</b>, escolha a imagem que deseja adicionar à página
+Nesta parte do tutorial será mostrado como trabalhar com textos na página. A edição textual funciona de forma semelhante ao que encontramos em editores como Word ou LibreOffice, com ferramentas familiares de formatação.</p>
-  e, em seguida, clique em <b>"Upload"</b>.
+<p>No entanto, é importante destacar que, caso seja necessário aplicar algo diferente ou mais específico, será preciso utilizar o modo de edição por código, onde é possível inserir recursos avançados de programação.
 </p>
@@ Linha 106: / Linha 146: @@
 <tr>
 <td valign="top" align='center'>
-<b>Figura 4: </b>Página teste
+<b>Figura 5: </b>Página teste
 </td>
 </tr>
@@ Linha 112: / Linha 152: @@
 <td valign="top" align='center'>
 <div class="res-img">
-[[Arquivo: Manual_Prático_de_Estilização_do_Subportal_Institucional_-_4.png]]
+[[Arquivo: Manual_Prático_de_Estilização_do_Subportal_Institucional_-_6.png]]
 </div>
 </td>