|
|
|
|
|
|
|
|
Dicas
|
|
|
ASP - Active Server Page (Miscelâneas)
|
|
 |
Título da Dica: Manipular estilos CSS por meio da linguagem ASP.
|
 |
|
|
|
Postada em 27/10/2003 por ^HEAVY-METAL^
Muitas vezes, gostaríamos de disponibilizar algumas opções (diferentes fontes, cores de fundo, de fonte e de borda etc.) para que os internautas possam ter um certo poder de escolha na definição de alguns parâmetros do layout de uma página da Web que, basicamente, é a mesma para qualquer um que a acesse!
A solução mais comum, geralmente na qual pensamos ao nos deparar com este problema, é a de fazer vários ficheiros com diferentes estilos! Mas podemos utilizar a linguagem ASP para disponibilizar, em uma mesma página, diferentes estilos CSS de acordo com a opção do internauta, faciltando, assim, nosso trabalho!
A idéia é disponibilizar, inicialmente, um determinado número de opções para o internauta que, após selecionar o layout que lhe agrada, tem a página exibida com as fontes e cores escolhidas.
Este exemplo, apesar de simples, pode ser utilizado como base para formatações mais complexas e personalizadas. O ficheiro em questão submete informações para si mesmo, permitindo a seleção do layout e também sua exibição!
(Cores: ASP HTML )
ficheiro : escolher-layout.asp
<html>
<head>
<%
'Aqui verificamos se já existe uma opção de estilo selecionada. Se não houver (quando o ficheiro é acedido pela primeira vez) serão exibidas as opções disponíveis.
modelo=request.form("modelo")
if modelo="" then modelo=0
%>
<title>Escolha o layout</title>
<style type="text/css">
<!--
<%
' Utilizamos o comando Select Case para selecionar o estilo CSS de acordo com a opção do internauta.
Select Case modelo
Case 1
%>
<!-- Aqui definimos os estilos CSS disponíveis.-->
.tal { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: oblique; background-color: #CCffcc; font-weight: normal; color: #000000; border: solid 0px;}
.lin { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-style: normal; text-align: left; vertical-align: middle; font-weight: bold; border: solid 1px;}
.lin3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-style: normal; text-align: left; vertical-align: middle; font-weight: bold; border: solid 0px;}
.te { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-style: normal; font-weight: normal; text-align: justify; vertical-align: middle; border: solid 1px;}
.tal2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-style: italic; font-weight: normal; background-color: #ccffcc; text-align: center; vertical-align: middle; color: #000000; border: solid 0px;}
.lin2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-style: oblique; text-align: left; vertical-align: middle; font-weight: 500; border-color: black black #CCCCCC; background-color: #E9E9E9; border: black; border: solid 0px;}
.tit { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 28pt; font-style: italic; color: #808080; font-weight: normal; text-align: center; background-color: #ffffff; border: solid 0px;}
}
-->
<% Case 2 %>
.tal { font-family: "Comic Sans MS", Tahoma; font-size: 11pt; font-style: bold; background-color: #72DEFE; font-weight: normal; color: #000000; border: solid 2px;}
.lin { font-family: "Comic Sans MS", Tahoma; font-size: 9pt; font-style: ob;ique; text-align: center; vertical-align: middle; font-weight: bold; border: solid 2px;}
.lin3 { font-family: "Comic Sans MS", Tahoma; font-size: 9pt; font-style: oblique; text-align: center; vertical-align: middle; font-weight: bold; border: solid 2px;}
.te { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-style: normal; font-weight: normal; vertical-align: middle; border: solid 2px;}
.tal2 { font-family: "Comic Sans MS", Tahoma; font-size: 10pt; font-style: oblique; font-weight: normal; background-color: #72DEFE; text-align: center; vertical-align: middle; color: #000000; border: solid 2px;}
.lin2 { font-family: "Courier New", Courier, mono; font-size: 9pt; font-style: bold; font-color: white; text-align: left; vertical-align: middle; font-weight: 500; border-color: black black #0000FF; background-color: #E9E9E9; border: black; border: solid 2px;}
.tit { font-family: "Comic Sans MS", Tahoma; font-size: 28pt; font-style: italic; color: #FFFFFF; font-weight: normal; text-align: center; background-color: #0000ff; border: solid 2px;}
}
-->
<% Case 3 %>
.tal { font-family: "Courier New", Courier, mono; font-size: 10pt; font-style: oblique; background-color: red; font-weight: bold; color: #ffffff; border: solid 2px;}
.lin { font-family: "Courier New", Courier, mono; font-size: 9pt; font-style: normal; text-align: left; vertical-align: middle; font-weight: bold; background-color: #FFFFFF; border: solid 2px;}
.lin3 { font-family: "Courier New", Courier, mono; font-size: 9pt; font-style: normal; text-align: RIGHT; vertical-align: middle; font-weight: bold; background-color: #E9E9E9; border: solid 2px;}
.te { font-family: "Courier New", Courier, mono; font-size: 9pt; font-style: normal; font-weight: normal; color: blue; text-align: justify; vertical-align: middle; border: solid 2px;}
.tal2 { font-family: "Courier New", Courier, mono; font-size: 9pt; font-style: italic; font-weight: normal; background-color: #ffffff; text-align: center; vertical-align: middle; color: #0000ff; border: solid 2px;}
.lin2 { font-family: "Courier New", Courier, mono; font-size: 9pt; font-style: oblique; color: red; text-align: left; vertical-align: middle; font-weight: 500; border-color: black black #CCCCCC; background-color: #E9E9E9; border: black; border: solid 2px;}
.tit { font-family: "Courier New", Courier, mono; font-size: 28pt; font-style: italic; color: #0000ff; font-weight: bold; text-align: left; background-color: #ffffff; border: solid 2px;}
}
-->
<% Case 4 %>
.tal { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: oblique; background-color: #FFFFFF; font-weight: bold; color: #000000; text-decoration: underline; border: solid 1px;}
.lin { font-family: "Courier New", Courier, mono; font-size: 9pt; font-style: normal; text-align: left; vertical-align: middle; font-weight: bold; background-color: #FFFFFF; border: solid 1px;}
.lin3 { font-family: "Courier New", Courier, mono; font-size: 9pt; font-style: normal; text-align: left; vertical-align: middle; font-weight: bold; background-color: #FFFFFF; border: solid 1px;}
.te { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-style: normal; font-weight: normal; color: #808080; text-align: justify; vertical-align: middle; border: solid 1px;}
.tal2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-style: italic; font-weight: normal; text-decoration: underline; background-color: #cccccc; text-align: center; vertical-align: middle; color: #000000 border: solid 4px; border: solid 1px;}
.lin2 { font-family: "Courier New", Courier, mono; font-size: 9pt; font-style: oblique; color: #000000; text-align: left; vertical-align: middle; text-decoration: underline; font-weight: 500; border-color: black black #CCCCCC; background-color: #FFFFFF; border: black border: solid 1px;}
.tit { font-family: "Comic Sans MS", Tahoma; font-size: 28pt; font-style: italic; color: #000000; font-weight: bold; text-align: left; background-color: #ffffff; border: solid 1px;}
}
-->
<% end select %>
</style>
</head>
<body>
<%
'Quando o ficheiro é acedido pela primeira vez.
if modelo=0 then
%>
<table width="100%" border="0" cellspacing="2" cellpadding="2" align="center">
<tr>
<td colspan="2" height="66" align="center">
<br><br><br><br><br>
<form name="form1" method="post" action="escolhe-layout.asp" >
Selecione o <select name="modelo" size="1" onchange="submit();">
<option value="0"> --== layout ==-- </option>
<option value="1">Elegante</option>
<option value="2">Moderno</option>
<option value="3">Arrojado</option>
<option value="4">Clássico</option>
</select> que mais lhe agrada!
</form>
</td>
</tr>
<tr>
<td colspan="2" height="66" align="center">
<p> </font></p>
</td>
</tr>
</table>
<%
'Se já houver uma opção selecionada, o estilo CSS escolhido é aplicado à página. As informações exibidas na página podem ou não ser obtidas a partir de uma banco de dados.
else
%>
<br>
<table width="90%" border=1 cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="lin3"><br>
<blockquote><font size=+1>Informações do banco de dados!</font><br><br> Informações do banco de dados!<br>Informações do banco de dados!<br>Informações do banco de dados!<br>
</blockquote>
</td>
</tr>
<tr>
<td colspan="2" height="54" class="lin3" width="39%">Informações do banco de dados!</td>
</tr>
</table>
<br>
<table align=center border=1><tr> <td height="54" class="tit" align=center>
<p>Informações do banco de dados!</p>
</td>
</tr>
</table>
<br><br>
<table width="90%" cellspacing="2" cellpadding="2" align="center" border=1>
<tr valign="bottom">
<td colspan="4" class="tal">Informações do banco de dados!</td>
</tr>
<tr>
<td class="lin2 width="36%" valign="bottom">Informações do banco de dados!</td>
<td colspan="3" class="tal2" width="64%">Informações do banco de dados!</td>
</tr>
<tr>
<td width="36%" class="lin" valign="bottom">Informações do banco de dados!
</td>
<td colspan="3" class="te" width="64%">Informações do banco de dados!</td>
</tr>
<tr>
<td width="36%" class="lin3" valign="bottom">Informações do banco de dados!</td>
<td colspan="3" class="te" width="64%">Informações do banco de dados!</td>
</tr>
<tr>
<td width="36%" class="lin" valign="bottom">Informações do banco de dados!</td>
<td colspan="3" class="te" width="64%">Informações do banco de dados!</td>
</tr>
<tr>
<td width="36%" class="lin3" valign="bottom">Informações do banco de dados!</td>
<td colspan="3" class="te" width="64%">Informações do banco de dados!</td>
</tr>
<tr>
<td width="36%" class="lin" valign="bottom">Informações do banco de dados!</td>
<td colspan="3" class="te" width="64%">Informações do banco de dados!</td>
</tr>
</table>
<br><br>
<div align="center">
<a href="escolhe-layout.asp">voltar</a>
</div>
<% end if %>
</body>
</html>
T+,
|
|
|
|
|
