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

De NTI Ajuda - IFSULDEMINAS Campus Inconfidentes
Linha 107: Linha 107:
== Adicionando imagens a página ==
== Adicionando imagens a página ==
<div style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 1em; font-size: 16px;">
<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, conforme indicado na figura:
</p>
<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),  
   <b>Passo 1:</b> Localize a pasta do setor e selecione-a (ela deve ficar destacada em azul para indicar que está selecionada),  

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

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