crisfm escribió:hola
me llamo cris, y deciros que soy muy novata.. pero quiero construir una pagina web, y siguiendo vuestros pasos he llegado a la sexta leccion, aunque tengo que volver a repasarla..
a ver.. tengo dudas.. una vez llegada la leccion sexta. he creado una plantilla similar con lo que quiero poner en la web..pero al darle a las secciones de navegacion como historia, foro,principios,etc.. una me sale de color naranja, (como vuestro ejemplo,ok), otra no se puede mostrar pagina, otra sale de color blanco.. y todas las paginas,les he pegado el mismo enlace.. que es lo que pasa?
despues quiero subirlo a internet, creo una carpeta azul(internet) donde pongo el nombre de las carpetas como foro, principios.beneficios, etc..no se si lo estoy haciendo bien..decirme algo, por favor
otra cosa, he intentado poner musica de fondo, quiero poner una cancion he leido en vuestro foro lo de pegar el codigo con enya. mid..antes justo de <body>pero no hay manera, no se escucha..
en fin.. me gustaria que se viera la web en internet, pero es un desastre.. os agredeceria si me ayudaseis.. muchas gracias y felicidades porque de no ser por vosotros no me hubiera atrevido a crear una web.
Hola:
Acá le pondré mas o menos como debiera de tener sus paginas y la hoja de estilo-general con una pequeña variación de poner en el menu lateral también un enlace a la pagina indice o portada o index.html, Espero le sirva para que vea como funcionan los enlaces de estas paginas
Se supone que tiene la carpeta del escritorio, la que se llama web-ejemplo.cctw, y que dentro de ella está el index.html (anterior plantilla) y la hoja de estilo-general.css, y también está la carpeta objetos, la que lleva todas las imagenes que van de forma general en todas las páginas. por ejemplo
carpeta web-ejemplo-cctw
dentro de ella
La pagina index.html
La hoja de estilo-general.css
La carpeta objetos
Ahora dentro de esa carpeta objetos están las imagenes
curva-superior.gif 800px de ancho x 12px de alto
curva-inferior.gif 800x12px
logotipo.gif 270 x 80px
menu-curva-inferior.gif 150 x 400px
menu-curva-superior.gif 150 x 30px
buzon.gif 32 x 32px
fondo.png o jpg 120 x 74px
............................
Ahora dentro también de la carpeta web-ejemplo-cctw van las seis carpetas con sus respectivas paginas y carpetas objetos dentro de ellas
que serían las
Carpeta historia y dentro la pagina historia.html con una carpeta objetos
Carpeta discografia y dentro la pagina discografia.html con una carpeta objetos
Carpeta descargas y dentro la pagina descargas.html con una carpeta objetos
Carpeta conciertos y dentro la pagina conciertos.html con una carpeta objetos
Carpeta souvenirs y dentro la pagina souvenirs.html con una carpeta objetos
Carpeta foro y dentro la pagina foro.html esta no necesita llevar dentro una carpeta objetos
Por tanto acá dejo los códigos un poco más completos del como "yo lo habría hecho"
..........................................
La hoja estilo-general.css
*{text-indent:0px ; margin:0px ; padding:0px ; border:0px}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body{text-align:center;background-color:#E6E6FA;font-family:Verdana, Arial, Geneva, Helvetica, serif, sans-serif;background-image:url(objetos/fondo024.jpg);background-position:center center;background-repeat:repeat;}
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;background-repeat: no-repeat ;width:800px ;height: 12px ;overflow : hidden }
#cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 15px 0px 15px }
#navegacion ul { margin-left:30px }
#contenido {width:auto;background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px ;background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom ; padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;background-image: url(objetos/menu-parte-superior.gif);}
#pie {background-color:#ffffff;border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 65px }
#pie li {list-style: none ;font-size: 12px }
#pieuno {float:left ; width:150px }
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
........................................
La pagina index.html que era la anterior plantilla
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Página Oficial de la banda</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
[contenido no disponible] </div>
<div id="publicidad">Bienvenidos a mi Web</div></div>
<div id="navegacion"><ul>
PortadaHistoriaDiscografíaConciertosDescargasForoSouvenirs</div>
<div id="contenido">
<h1>Bienvenidos a la página oficial de la banda</h1>
Bienvenido a la página oficial de la banda. En este portal puedes estar informado de todo lo referente al grupo, desde su historia hasta sus próximos conciertos, pasándo por su completa discografía, descarga de cosas interesantes e incluso por nuestra tienda online, en la que puedes encargar tu camiseta del grupo.No olvides visitarnos en el foro y dejar tus comentarios.
Gracias por la visita, esperamos verte pronto!.</p>
[correo eliminado]</p>
</div>
<div id="pie">
<div id="pieuno"><ul>Foro EjemploContactos<a href="#">Nos Enlazan</div>
<div id="piedos">pie dos</div>
<div id="pietres"><ul>DirectorioTopSite<a href="#">Mapa de la Web</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
..............................................................
La pagina historia.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Historia</title>
<link rel="stylesheet" href="../estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion"><ul>PortadaHistoriaDiscografíaConciertosDescargasForoSouvenirs</div>
<div id="contenido">
<div id="menu"><h1>Historia</h1><ul>Portada
OrigenMiembrosFormacion ActualAlbum de fotos</div>
<h1>Pagina de Historia</h1>
En esta pagina hablaremos un poco de la historia de nuestra banda. Lo que hicimos ayer, lo que haremos hoy y lo que posiblemente haremos mañana, desde su historia hasta sus próximos conciertos. .No olvides visitarnos en el foro y dejar tus comentarios.</p>
Tambien haremos un recorrido por las distintas facetas, a las que nos ha llevado todo esto</p>
Gracias por la visita, esperamos verte pronto!.</p>
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii </p>
llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
</div>
<div id="pie">
<div id="pieuno"><ul>Foro EjemploContactos<a href="#">Nos Enlazan</div>
<div id="piedos">pie dos</div>
<div id="pietres"><ul>DirectorioTopSite<a href="#">Mapa de la Web</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
..........................................................
La pagina discografia.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>discografia</title>
<link rel="stylesheet" href="../estilo-general.css" type="text/css" media="all"></head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]
</div>
<div id="publicidad">Bienvenidos a mi Web</div></div>
<div id="navegacion"><ul>PortadaHistoriaDiscografíaConciertosDescargasForoSouvenirs</div>
<div id="contenido">
<div id="menu"><h1>Discografia</h1><ul>Portada
MaquetasCD1CD2CD3</div>
<h1>Pagina Discografia</h1>
Acá estarán todos los discos , canciones y más cosas con sus respectivas anecdotas.</p>
El primer disco que sacamos a la venta fue en el año y bla bla bla y otra vez más bla bla.</p>
El segundo disco fue un poco más tardío porque a uno de nosotros se le ocurrió irse de vacaciones un mes y bli bli bli.</p>
Gracias por la visita, esperamos verte pronto!.</p>
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</p>
lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</p>
</div>
<div id="pie">
<div id="pieuno"><ul>Foro EjemploContactos<a href="#">Nos Enlazan</div>
<div id="piedos">pie dos</div>
<div id="pietres"><ul>DirectorioTopSite<a href="#">Mapa de la Web</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
...................................................................
La pagina descargas.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Descargas</title>
<link rel="stylesheet" href="../estilo-general.css" type="text/css" media="all"></head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]
</div>
<div id="publicidad">Bienvenidos a mi Web</div></div>
<div id="navegacion"><ul>PortadaHistoriaDiscografíaConciertosDescargasForoSouvenirs</div>
<div id="contenido">
<div id="menu"><h1>Descargas</h1><ul>PortadaCanciones Mp3-1
Canciones Mp3-2LetrasPosterImagenesVideo</div>
<h1>Pagina de Descargas</h1>
Esta es la pagina donde podrá descargar musica videos imagenes, letras de canciones etc. Tambien puede descargar su rabia cuando las cosas no salen bien por más empeño que uno le haga.</p>
En realidad hay montones de cosas que queremos compartir con todos.No olvides visitarnos en el foro y dejar tus comentarios.
Gracias por la visita, esperamos verte pronto!.</p>
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</p>
lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</p>
lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
</div>
<div id="pie">
<div id="pieuno"><ul>Foro EjemploContactos<a href="#">Nos Enlazan</div>
<div id="piedos">pie dos</div>
<div id="pietres"><ul>DirectorioTopSite<a href="#">Mapa de la Web</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
....................................................................
La pagina conciertos.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Conciertos</title>
<link rel="stylesheet" href="../estilo-general.css" type="text/css" media="all"></head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]
</div>
<div id="publicidad">Bienvenidos a mi Web</div></div>
<div id="navegacion"><ul>PortadaHistoriaDiscografíaConciertosDescargasForoSouvenirs</div>
<div id="contenido">
<div id="menu"><h1>Conciertos</h1><ul>PortadaConciertos A.
Conciertos B.Próximos conciertos</div>
<h1>Pagina de Conciertos</h1>
Aca hablaremos de los conciertos que haremos por la region de acá y la del más allá y bla bla bla bla bla y otra vez bla. </p>
Si está interesada en compartir y saber donde estaremos , es acá donde puede estar informada de todo .No olvides visitarnos en el foro y dejar tus comentarios.</p>
Gracias por la visita, esperamos verte pronto!.</p>
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</p>
lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
</div>
<div id="pie">
<div id="pieuno"><ul>Foro EjemploContactos<a href="#">Nos Enlazan</div>
<div id="piedos">pie dos</div>
<div id="pietres"><ul>DirectorioTopSite<a href="#">Mapa de la Web</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
................................................................
La pagina souvenirs.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Souvenirs</title>
<link rel="stylesheet" href="../estilo-general.css" type="text/css" media="all"></head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]
</div>
<div id="publicidad">Bienvenidos a mi Web</div></div>
<div id="navegacion"><ul>PortadaHistoriaDiscografíaConciertosDescargasForoSouvenirs</div>
<div id="contenido">
<div id="menu"><h1>Souvenirs</h1><ul>PortadaComo comprar1
Como comprar2CamisetasCd´s</div>
<h1>Pagina de Souvenirs</h1>
Acá lo que mostraremos es una gran variedad de complementos como recuerdo de su paso . Puede comprar desde un alfiler de gancho, pasándo por un coche , hasta llegar a una mansión, con tal de que se lleve un buen recuerdo.No olvides visitarnos en el foro y dejar tus comentarios.</p>
Gracias por la visita, esperamos verte pronto!.</p>
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</p>
lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
</div>
<div id="pie">
<div id="pieuno"><ul>Foro EjemploContactos<a href="#">Nos Enlazan</div>
<div id="piedos">pie dos</div>
<div id="pietres"><ul>DirectorioTopSite<a href="#">Mapa de la Web</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
........................................................
La pagina foro.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Foro</title>
<link rel="stylesheet" href="../estilo-general.css" type="text/css" media="all"></head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]
</div>
<div id="publicidad">Bienvenidos a mi Web</div></div>
<div id="navegacion"><ul>PortadaHistoriaDiscografíaConciertosDescargasForoSouvenirs</div>
<div id="contenido">
<h1>Pagina del Foro</h1>
Esta es la pagina del foro en que se podra mantener informacion de todo lo que acontezca en bla bla bla y bla bla bla y mas bla bla. Puede registrarse y acompañarnos en el viaje al mundo de la musica y bli bli bli.</p>
Gracias por la visita, esperamos verte pronto!.</p>
</div>
<div id="pie">
<div id="pieuno"><ul>Foro EjemploContactos<a href="#">Nos Enlazan</div>
<div id="piedos">pie dos</div>
<div id="pietres"><ul>DirectorioTopSite<a href="#">Mapa de la Web</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
..................................................
En lo que respecta a su carpeta azul, usted cuando configura el programa ftp del programa HTML-KIT, en la casilla que se llama Server Adress solo debe poner el nombre que le dio a su web cuando se registró, por ejemplo si su web se llama http://miscosas.mypressonline.com
Pues lo que debe poner en la casilla Server Adress es solamente :
miscosas.mypressonline.com
En la casilla que se llama Initial directory debe poner lo mismo que se pone en la casilla Server Adress, o sea miscosas.mypressonline.com
(no se ponen ni con http ni con www)
En la casilla que se llama Display Name se debe borrar todo lo que allí aparezca y escribir por ejemplo: miscosas-internet
Lógicamente en las casillas pequeñas deben estar así
Port debe tener la cifra 21
Remember Password debe estar marcada
Pasive Mode debe estar marcada
Luego de todo eso se le pulsa en creo Aceptar y así en unos segundos se le crea la carpeta azul que se llamará miscosas-internet o miscosas-internet-1.
Luego de todo eso, se cierra todo el programa, y se vuelve a abrir
Entonces le hace click derecho a la carpeta azul, y se le abre un desplegable en donde debe pulsar en "Connect", luego que esté conectada esa carpeta azul, le mostrará todos los archivos que tenga esa carpeta azul, que lógicamente será un index.html que es el que pone el servidor para que uno lo elimine y pueda subir el de uno. Así que entonces se pone el cursor sobre ese index y se hace click derecho, y en el desplegable que se abre se pulsa en "Delette" para que elimine.
Luego de eliminado ese index puede hacer otra vez click derecho sobre la carpeta azul y en el desplegable que se abre se pulsa en "upload", entonces se abre una ventana en que debe buscar usted su index.html que tiene en su ordenador (que estará en la carpeta que tiene en el escritorio, cuando lo encuentre, le hace click izquierdo para que quede seleccionado y pulsa en "Abrir", y así sube su index.html.
Luego cierra el programa HTML-KIT y lo vuelve a abrir para subir de la misma forma la hoja de estilo.css la hoja de estilo-general.
Luego cierre el programa HTML-KIT y vaya al curso y vea bien como hay que crear las carpetas dentro de la carpeta azul
Espero le haya resuelto algo de su problema,
si sigue habiéndo más problemas , pues pregunte que alguien habrá para sugerirle arreglos
Saludos