Manual Prático de Estilização do Subportal Institucional: mudanças entre as edições
| Linha 139: | Linha 139: | ||
<br> | <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 == | == Incorporando link do Google Fotos == | ||
Edição das 17h31min de 25 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 5: 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 5: Página teste |
|
|
Incorporando link do Google Fotos
<a href="https://photos.app.goo.gl/SKuXujGa37G37i5u7">link para o google fotos</a>