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

De NTI Ajuda - IFSULDEMINAS Campus Inconfidentes
Linha 84: Linha 84:
<p>
<p>
   Após ter acesso à edição da página, vamos inserir uma imagem. Neste exemplo, estou adicionando o logo do NTI.  
   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>
 
<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>
</p>


Linha 118: Linha 104:
</table>
</table>
<br>
<br>


== Adicionando imagens a página ==
== Adicionando imagens a página ==

Edição das 18h11min de 22 de setembro 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 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, conforme indicado na figura:

Passo 1: 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.

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

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

Figura 4: Página teste