¿Cómo diseñar una página web dinámica utilizando frames implementada con ASP?
MI estimado experto:
Necesito hacer una pagina que se maneje atravez de un frames y que en uno de esos frames se maneje un menu. El menu dbe contener opciones (botones graficos)cuya informacion sera dezplegada en otro frame.
de antemano agradeceria cualquier informacion que me pudieras dar acerca de como puedo incluir en el menu botones graficos que al hacer click sobre alguno de ellos tenga algun efecto como el de suprimir o poner informacion relacionada al boton en el area de seleccion del mouse.
Necesito hacer una pagina que se maneje atravez de un frames y que en uno de esos frames se maneje un menu. El menu dbe contener opciones (botones graficos)cuya informacion sera dezplegada en otro frame.
de antemano agradeceria cualquier informacion que me pudieras dar acerca de como puedo incluir en el menu botones graficos que al hacer click sobre alguno de ellos tenga algun efecto como el de suprimir o poner informacion relacionada al boton en el area de seleccion del mouse.
1 Respuesta
Respuesta de ayudaasp
1
Necesitaras configurar tu sitio Asi
Carpeta principal
Archivo: index.html
***************************
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="174,595" rows="*">
<frame src="menu.html">
<frame src="mainpage.html" name="main">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>
***************************
Archivo: menu.html
***************************
<html>
<head>
<title>Tree Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="jsmenu/style.css" type="text/css">
<script language='JavaScript' src='jsmenu/jsmenu.js'></script>
<script language='JavaScript'>
//*********************************************
// Tree Menu Copyright Simon Rycroft
// For more scripts go to:
// http://www.d-zineworx.co.uk
//*********************************************
// opens menu section - do not alter
function openMenu(cat) {
this.cat = cat;
document.write('<span class = "level1">');
document.write('<a href = "' + thisPage + '?page=null" target="_self">');
if (lev1img=='yes') {
document.write('<img src="' + imgPath + lev1OpName +'" width="' + lev1OpWidth + '" height="' + lev1OpHeight + '"border="0">');
}
document.write(cat + '</a><span><br>');
for (x=0;x<thisMenu.length;x++){
document.write('<span class = "level2">');
if (lev2img=='yes') {
document.write('<img src="' + imgPath + lev2Name +'" width="' + lev2Width + '" height="' + lev2Height + '">');
}
if (lev2Char=='yes') {
document.write(bullet);
}
document.write('<a href="' + linka + thisMenu[x].linkb + '">' + thisMenu[x].name + '</a><span><br>');
}
}
// closes menu section - do not alter
function closeMenu(cat,pass) {
this.cat = cat;
this.pass = pass;
document.write('<span class = "level1">');
document.write('<a href = "' + thisPage + '?page='+pass+'" target="_self">');
if (lev1img=='yes') {
document.write('<img src="' + imgPath + lev1ClosName +'" width="' + lev1ClosWidth + '" height="' + lev1ClosHeight + '"border="0">');
}
document.write(cat + '</a><span><br>');
}
</script>
</head>
<body bgcolor="#FFCC00" text="#000000">
<script language="JavaScript">
// write Civils & Drainage Menu
if(page=='civ') {
openMenu('Civils & Drainage');
} else {
closeMenu('Civils & Drainage','civ');
}
// write Clothing Menu
if(page=='cloth') {
openMenu('Clothing');
} else {
closeMenu('Clothing','cloth');
}
// write Decorating Menu
if(page=='dec') {
openMenu('Decorating');
} else {
closeMenu('Decorating','dec');
}
</script>
</body>
</html>
***************************
Archivo: mainpage.html
***************************
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFCC" text="#000000">
<b><font face="Arial, Helvetica, sans-serif" size="3">Pages load in this frame<br>
</font></b><font face="Arial, Helvetica, sans-serif" size="2">you can change the
target frame to whatever you like<br>
by changing the 'base' variable in the settings</font>
</body>
</html>
***************************
Carpetas
Carpeta images
Archivo: bullet.gif (puedes usar cualquier viñeta)
Archivo: closed.gif (puedes usar el simbolo '-')
Archivo: closed.gif (puedes usar el simbolo '+')
Carpeta jsmenu
Archivo: jsMenu.js
*****************************
// *****************************************************************************
// ** SETTINGS **
// *****************************************************************************
// 'linka' use this if part of the URL is the same in ALL the links
// In this example all the files are in a subfolder called 'pages'
linka='pages/';
// the filename of the page the menu appears in eg 'menu.html'
thisPage='menu.html';
// Do you want to use images for the category bullets?
// If so then specify the path to your images folder from the menu page
imgPath='images/';
// do you want to use images for the category bullets?
lev1img='yes'; // insert yes or no
// give image names and dimensions
lev1OpName='open.gif'; // open image name
lev1OpHeight='10'; // image height
lev1OpWidth='10'; // image width
lev1ClosName='closed.gif'; // closed image name
lev1ClosHeight='10'; // image height
lev1ClosWidth='10'; // image width
// do you want to use images for the sub-category bullets?
lev2img='yes'; // insert yes or no
// give image names and dimensions
lev2Name='bullet.gif'; // image name
lev2Height='10'; // image height
lev2Width='16'; // image width
// do you want to use a text character for the sub-category bullets?
lev2Char='no'; // insert yes or no
// set bullet character for level 2 bullets
bullet = '› ';
// base target - the frame that the links are targetting
base = 'main';
// *****************************************************************************
// ** END OF SETTINGS **
// *****************************************************************************
// pulls 'page' variable out of URL - do not alter
var x = 0
page = location.search.substr(1).split("?")
for (x=0;x<=page.length;x++) {
eval(page)
}
page = escape(page);
page = page.slice(7);
// do not alter this bit
function subMenu(name,linkb) {
this.name = name;
this.linkb = linkb;
}
document.write('<BASE target="' + base + '">');
// *****************************************************************************
// ** BUILD MENU DATA **
// *****************************************************************************
// Civils & Drainage Menu
if (page=='civ') {
thisMenu = new Array();
thisMenu[0] = new subMenu('Above Ground Plastics','above.html');
thisMenu[1] = new subMenu('Below Ground Plastics','below.html');
thisMenu[2] = new subMenu('Block Paving','paving.html');
}
// Clothing Menu
if (page=='cloth') {
thisMenu = new Array();
thisMenu[0] = new subMenu('Hats','hats.html');
thisMenu[1] = new subMenu('Gloves','gloves.html');
thisMenu[2] = new subMenu('Coats','coats.html');
}
// Decorating Menu
if (page=='dec') {
thisMenu = new Array();
thisMenu[0] = new subMenu('Brushes','brushes.html');
thisMenu[1] = new subMenu('Paint','paint.html');
thisMenu[2] = new subMenu('Rollers','rollers.html');
}
*****************************
Archivo: (de estilo) style.css
*****************************
.level1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal}
.level2 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; clip: rect( )}
a:link { color: #990000; text-decoration: underline}
a:hover { color: #0000FF; text-decoration: none}
a:active { color: #FF0000; text-decoration: none}
a:visited { color: #666666}
*****************************
Carpeta pages
Con tus archivos por ejemplo above.htm, aboutus.htm y todo lo demas
Y eso es todo!
Carpeta principal
Archivo: index.html
***************************
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="174,595" rows="*">
<frame src="menu.html">
<frame src="mainpage.html" name="main">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>
***************************
Archivo: menu.html
***************************
<html>
<head>
<title>Tree Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="jsmenu/style.css" type="text/css">
<script language='JavaScript' src='jsmenu/jsmenu.js'></script>
<script language='JavaScript'>
//*********************************************
// Tree Menu Copyright Simon Rycroft
// For more scripts go to:
// http://www.d-zineworx.co.uk
//*********************************************
// opens menu section - do not alter
function openMenu(cat) {
this.cat = cat;
document.write('<span class = "level1">');
document.write('<a href = "' + thisPage + '?page=null" target="_self">');
if (lev1img=='yes') {
document.write('<img src="' + imgPath + lev1OpName +'" width="' + lev1OpWidth + '" height="' + lev1OpHeight + '"border="0">');
}
document.write(cat + '</a><span><br>');
for (x=0;x<thisMenu.length;x++){
document.write('<span class = "level2">');
if (lev2img=='yes') {
document.write('<img src="' + imgPath + lev2Name +'" width="' + lev2Width + '" height="' + lev2Height + '">');
}
if (lev2Char=='yes') {
document.write(bullet);
}
document.write('<a href="' + linka + thisMenu[x].linkb + '">' + thisMenu[x].name + '</a><span><br>');
}
}
// closes menu section - do not alter
function closeMenu(cat,pass) {
this.cat = cat;
this.pass = pass;
document.write('<span class = "level1">');
document.write('<a href = "' + thisPage + '?page='+pass+'" target="_self">');
if (lev1img=='yes') {
document.write('<img src="' + imgPath + lev1ClosName +'" width="' + lev1ClosWidth + '" height="' + lev1ClosHeight + '"border="0">');
}
document.write(cat + '</a><span><br>');
}
</script>
</head>
<body bgcolor="#FFCC00" text="#000000">
<script language="JavaScript">
// write Civils & Drainage Menu
if(page=='civ') {
openMenu('Civils & Drainage');
} else {
closeMenu('Civils & Drainage','civ');
}
// write Clothing Menu
if(page=='cloth') {
openMenu('Clothing');
} else {
closeMenu('Clothing','cloth');
}
// write Decorating Menu
if(page=='dec') {
openMenu('Decorating');
} else {
closeMenu('Decorating','dec');
}
</script>
</body>
</html>
***************************
Archivo: mainpage.html
***************************
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFCC" text="#000000">
<b><font face="Arial, Helvetica, sans-serif" size="3">Pages load in this frame<br>
</font></b><font face="Arial, Helvetica, sans-serif" size="2">you can change the
target frame to whatever you like<br>
by changing the 'base' variable in the settings</font>
</body>
</html>
***************************
Carpetas
Carpeta images
Archivo: bullet.gif (puedes usar cualquier viñeta)
Archivo: closed.gif (puedes usar el simbolo '-')
Archivo: closed.gif (puedes usar el simbolo '+')
Carpeta jsmenu
Archivo: jsMenu.js
*****************************
// *****************************************************************************
// ** SETTINGS **
// *****************************************************************************
// 'linka' use this if part of the URL is the same in ALL the links
// In this example all the files are in a subfolder called 'pages'
linka='pages/';
// the filename of the page the menu appears in eg 'menu.html'
thisPage='menu.html';
// Do you want to use images for the category bullets?
// If so then specify the path to your images folder from the menu page
imgPath='images/';
// do you want to use images for the category bullets?
lev1img='yes'; // insert yes or no
// give image names and dimensions
lev1OpName='open.gif'; // open image name
lev1OpHeight='10'; // image height
lev1OpWidth='10'; // image width
lev1ClosName='closed.gif'; // closed image name
lev1ClosHeight='10'; // image height
lev1ClosWidth='10'; // image width
// do you want to use images for the sub-category bullets?
lev2img='yes'; // insert yes or no
// give image names and dimensions
lev2Name='bullet.gif'; // image name
lev2Height='10'; // image height
lev2Width='16'; // image width
// do you want to use a text character for the sub-category bullets?
lev2Char='no'; // insert yes or no
// set bullet character for level 2 bullets
bullet = '› ';
// base target - the frame that the links are targetting
base = 'main';
// *****************************************************************************
// ** END OF SETTINGS **
// *****************************************************************************
// pulls 'page' variable out of URL - do not alter
var x = 0
page = location.search.substr(1).split("?")
for (x=0;x<=page.length;x++) {
eval(page)
}
page = escape(page);
page = page.slice(7);
// do not alter this bit
function subMenu(name,linkb) {
this.name = name;
this.linkb = linkb;
}
document.write('<BASE target="' + base + '">');
// *****************************************************************************
// ** BUILD MENU DATA **
// *****************************************************************************
// Civils & Drainage Menu
if (page=='civ') {
thisMenu = new Array();
thisMenu[0] = new subMenu('Above Ground Plastics','above.html');
thisMenu[1] = new subMenu('Below Ground Plastics','below.html');
thisMenu[2] = new subMenu('Block Paving','paving.html');
}
// Clothing Menu
if (page=='cloth') {
thisMenu = new Array();
thisMenu[0] = new subMenu('Hats','hats.html');
thisMenu[1] = new subMenu('Gloves','gloves.html');
thisMenu[2] = new subMenu('Coats','coats.html');
}
// Decorating Menu
if (page=='dec') {
thisMenu = new Array();
thisMenu[0] = new subMenu('Brushes','brushes.html');
thisMenu[1] = new subMenu('Paint','paint.html');
thisMenu[2] = new subMenu('Rollers','rollers.html');
}
*****************************
Archivo: (de estilo) style.css
*****************************
.level1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal}
.level2 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; clip: rect( )}
a:link { color: #990000; text-decoration: underline}
a:hover { color: #0000FF; text-decoration: none}
a:active { color: #FF0000; text-decoration: none}
a:visited { color: #666666}
*****************************
Carpeta pages
Con tus archivos por ejemplo above.htm, aboutus.htm y todo lo demas
Y eso es todo!
