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

De NTI Ajuda - IFSULDEMINAS Campus Inconfidentes
Sem resumo de edição
Linha 154: Linha 154:
</table>
</table>
<br>
<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

Edição das 16h25min de 26 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


Mostrando a imagem adicionada

Após finalizar o processo de inserir imagens.

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