Manual Prático de Estilização do Subportal Institucional: mudanças entre as edições
| (21 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 13: | Linha 13: | ||
<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> | <p> | ||
Acesse o link: https://portal.ifs.ifsuldeminas.edu.br/ | Acesse o link: https://portal.ifs.ifsuldeminas.edu.br/ role ao final da página, encontre o quadro de <b>"Login"</b>, como mostra a <b>"figura 1"</b> | ||
</p> | </p> | ||
</div> | </div> | ||
| Linha 36: | Linha 36: | ||
<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> | <p> | ||
Será aberta a tela para colocar o <b>"Usuário e senha"</b>, como mostrado na <b>"figura 2"</b> | Será aberta a tela para colocar o <b>"Usuário e senha"</b>, como mostrado na <b>"figura 2".</b> | ||
</p> | </p> | ||
</div> | </div> | ||
| Linha 43: | Linha 43: | ||
<tr> | <tr> | ||
<td valign="top" align='center'> | <td valign="top" align='center'> | ||
<b>Figura 2: | <b>Figura 2: </b>Página de login | ||
</td> | </td> | ||
</tr> | </tr> | ||
| Linha 50: | Linha 50: | ||
<div class="res-img"> | <div class="res-img"> | ||
[[Arquivo: Manual_Prático_de_Estilização_do_Subportal_Institucional_-_2.png]] | [[Arquivo: Manual_Prático_de_Estilização_do_Subportal_Institucional_-_2.png]] | ||
</div> | |||
</td> | |||
</tr> | |||
</table> | |||
<br> | |||
== Acessando a página que será editada == | |||
<div style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 1em; font-size: 16px;"> | |||
<p> | |||
Após realizar o login, acesse a página do setor que deseja editar. No exemplo deste tutorial, utilizamos a <b>Página Teste</b> para demonstrar o processo de edição. | |||
</p> | |||
</div> | |||
<table border='0' style="width:100%;"> | |||
<tr> | |||
<td valign="top" align='center'> | |||
<b>Figura 3: </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_-_3.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> | |||
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. | |||
</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> | |||
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>. | |||
</p> | |||
<p> | |||
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> | |||
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> | |||
<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> | |||
</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_-_6.png]] | |||
</div> | </div> | ||
</td> | </td> | ||
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 |
|
|
