2. Introdução ao template HTML/CSS padrão da SGI
Os códigos sugeridos para aplicação do template são compatíveis com DocType 'XHTML 1.0 Transitional', framework 960gs e jQuery.
2.1. Implementação
Sua página deve conter na tag <head></head> as seguintes linhas:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1" />
<title>Governo do Estado de Mato Grosso do Sul</title>
<script type="text/javascript" src="https://servicos.efazenda.ms.gov.br/templates/js/jquery.js"></script>
<script type="text/javascript" src="https://servicos.efazenda.ms.gov.br/templates/js/jquery-ui.js"></script>
<script type="text/javascript" src="https://servicos.efazenda.ms.gov.br/templates/js/mod.js"></script>
<script type="text/javascript" src="https://servicos.efazenda.ms.gov.br/templates/js/modernizr.js"></script>
<script type="text/javascript" src="https://servicos.efazenda.ms.gov.br/templates/js/tipsy-0.1.7/javascripts/jquery.tipsy.js"></script>
<link rel="stylesheet" type="text/css" href="https://servicos.efazenda.ms.gov.br/templates/Styles/default-v2.css" />
<link rel="shortcut icon" type="text/css" href="https://servicos.efazenda.ms.gov.br/templates/images/favicon.jpg" />
<!--[if IE]>
<script src="https://servicos.efazenda.ms.gov.br/templates/js/html5.js"></script>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="https://servicos.efazenda.ms.gov.br/templates/css/ie.css">
<link rel="stylesheet" href="https://servicos.efazenda.ms.gov.br/templates/css/ie7.css">
<![endif]-->
Lembre-se de referenciar os arquivos css e js de acordo com a sua localização dentro da aplicação.
2.2. Página Template
A página de template contém o modelo lógico da página HTML que a aplicação deve seguir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1" />
<title>Governo do Estado de Mato Grosso do Sul</title>
<script type="text/javascript" src="https://servicos.efazenda.ms.gov.br/templates/js/jquery.js"></script>
<script type="text/javascript" src="https://servicos.efazenda.ms.gov.br/templates/js/jquery-ui.js"></script>
<script type="text/javascript" src="https://servicos.efazenda.ms.gov.br/templates/js/mod.js"></script>
<script type="text/javascript" src="https://servicos.efazenda.ms.gov.br/templates/js/modernizr.js"></script>
<script type="text/javascript" src="https://servicos.efazenda.ms.gov.br/templates/js/tipsy-0.1.7/javascripts/jquery.tipsy.js"></script>
<link rel="stylesheet" type="text/css" href="https://servicos.efazenda.ms.gov.br/templates/Styles/default-v2.css" />
<link rel="shortcut icon" type="text/css" href="https://servicos.efazenda.ms.gov.br/templates/images/favicon.jpg" />
<!--[if IE]>
<script src="https://servicos.efazenda.ms.gov.br/templates/js/html5.js"></script>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="https://servicos.efazenda.ms.gov.br/templates/css/ie.css">
<link rel="stylesheet" href="https://servicos.efazenda.ms.gov.br/templates/css/ie7.css">
<![endif]-->
</head>
<body class="no-js">
<script language="javascript">
var el = document.getElementsByTagName("body")[0];
el.className = "";
</script>
<noscript>
<!--[if IE]>
<link rel="stylesheet" href="https://servicos.efazenda.ms.gov.br/templates/css/ie.css">
<![endif]-->
</noscript>
<div id="header" class="container_12 clearfix">
<div class="grid_12" >
<div id="header-wrapper">
<ul>
<h1><a class="logo" href="#">x</a></h1>
<li class="grid_5"><a href="index.html" title="Painel">Título do Sistema</a></li>
</ul>
<div class="user signed-in" ><a href="#">nome do usuário</a>
<ul>
<li> <a href="#">Nome do Usuário</a></li>
<li> <a href="#">Matrícula: 9999999</a></li>
<li class="signout"> <a id="logoff" href="javascript:sair();">Sair </a></li>
</ul>
</div>
</div>
<div class="grid_12" >
<div id="toolbar" class="ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ops1" class="ui-buttonset">
<div class="ui-button ui-widget ui-button-text-only ui-button-text"><a href="exemplos.html">Principal</a></div>
<div class="ui-button ui-widget ui-button-text-only ui-button-text"><a href="menu1.html">Menu 1</a></div>
<div class="ui-button ui-widget ui-button-text-only ui-button-text"><a href="menu2.html">Menu 2</a></div>
<div class="ui-button ui-widget ui-button-text-only ui-button-text"><a href="menu3.html">Menu 3</a></div>
</span>
</div>
</div>
</div>
</div>
</div>
<div id="content" class="container_12 clearfix"> <br />
<div class="grid_12" ></div>
</div>
<div id="footer" class="container-12 clearfix">
<div class="footer-logo-sgi"></div>
</div>
</body>
</html>
Página template SGI
2.4. Nomenclaturas de botões
Visando padronizar o nome dos botões e garantir que o código de uma página seja familiar para qualquer leitor. Seguem as seguintes sugestões de nomenclatura de botões:
- Criar: Ação de gerar uma nova informação;
- Editar: Ação de selecionar uma informação para alteração;
- Ver: Ação de mostrar/visualizar uma informação sem campos de edição;
- Salvar: Ação de gravar alterações em informações já existentes;
- Excluir: Ação de apagar definitivamente uma informação;
- Cancelar: Ação de abandonar uma determinada operação e/ou mudança de status de uma informação;
- Adicionar: Ação de adição de uma informação em uma lista;
- Remover: Ação de remoção de uma informação em uma lista;
- Ok: Ação de confirmação de uma determinada operação;
- Avançar: Seguir em frente com a ação;
- Voltar: Voltar uma ação;
2.3. Na prática
O template é baseado no framework 960gs este é aplicado em um container. Sendo assim, é necessário uma div dentro da sua página que conterá todas as demais e isto já está definido no template, não é recomendado alterar os nomes das div’s, pois são nomes padrões do framework 960gs, para saber mais sobre o 960gs acesse o site http://960.gs/ :
<div id="content" class="container_12 clearfix">
<div class="grid_12">Seu conteúdo</div>
</div>