hector daniel escribió:Buenas Noches :
Me gustaria si me pueden explicar con màs detalle,como hacer la carpeta portada(index.html)lecciòn 6..
Desde ya,un fuerte abrazo y mis felicitaciones por las clases de web...
Hola:
Yo no se si le valdrá esta explicación, pero yo haría la web de esta manera.
Cuando ya tenga todas las carpetas y páginas
Lo que haré será eliminar el index de la primera parte del curso, el que era solo de presentación y convertiré la plantilla en index.html
También eliminaré la hoja de estilo que le correspondía a ese index antiguo, la que se llamaba estilo.css
Por tanto, suponiéndo que dentro de la carpeta "web-ejemplo-cctw" ya solo tengo la pagina plantilla o portada, pero que ahora se llama index.html, y la hoja de estilo-general.css, que estará relacionada con ese nuevo index, más una carpeta objetos, y luego las otras carpetas en donde van dentro las páginas correspondientes, y que también llevan dentro una carpeta objetos.
Yo creo que así debiera uno de tener las páginas y las carpetas
Carpeta “web-ejemplo-cctw”
Dentro de ella
Una pagina index.html, la que antes se llamaba plantilla.html, y que servirá de portada, eso no significa que hay que ponerle por nombre portada, sino que servirá como la portada de la web, o como la página principal de donde saldrán los enlaces hacia las demás páginas
Una hoja de estilo llamada estilo-general.css, que es la misma hoja de estilo-general que estaba relacionada cuando la página que ahora se llama index.html, antes se llamaba plantilla.html
Una carpeta objetos, En que dentro van las imagenes que saldrán en todas las páginas, como por ejemplo el logotipo, las curvas , el buzón,
Una carpeta historia, en que dentro irá una carpeta objetos y una pagina llamada historia.html
Una carpeta discografía en que dentro irá una carpeta objetos y una pagina llamada discografía.html
Una carpeta conciertos en que dentro irá una carpeta objetos y una pagina llamada conciertos.html
Una carpeta descargas en que dentro irá una carpeta objetos y una pagina llamada descargas.html
Una carpeta foro, en que dentro irá una pagina llamada foro.html
Una carpeta souvenirs en que dentro irá una carpeta objetos y una pagina llamada souvenirs.html
Como decía, dentro de la carpeta objetos en que estarán las imagenes que saldrán en todas las paginas
La imagen curva-superior
La imagen curva-inferior
La imagen del buzon
La imagen del fondo llamada fondo.png o jpg o la extension que quiera
La imagen menu-curva-superior o parte-superior
La imagen menu-curva-inferior o parte-inferior
Ahora dentro de la carpeta historia
Una carpeta objetos. Dentro de esta irán solo las imagenes que vayan en la página
llamada historia.html
Ahora dentro de la carpeta discografia
Una carpeta objetos. Dentro de esta solo irán las imagenes que vayan en la pagina
llamada discografia.html
Ahora dentro de la carpeta conciertos
Una carpeta conciertos. Dentro de esta solo irán las imagenes que vayan en la pagina
llamada conciertos.html
Ahora dentro de la carpeta descargas
Una carpeta objetos. Dentro de esta solo irán las imagenes que vayan en la pagina
llamada descargas.html
Ahora dentro de la carpeta foro
Una carpeta objetos. Dentro de esta solo irán las imagenes que vayan en la pagina
llamada foro.html
Ahora dentro de la carpeta souvenirs
Una carpeta objetos. Dentro de esta solo irán las imagenes que vayan en la pagina
llamada souvenirs.html
Dicho todo esto
Acá dejo una explicación de como más o menos debiera de tener uno las páginas y las carpetas
Recordar que la plantilla.html la hemos convertido en index.html.
Quiero decir que hemos abierto la pagina plantilla, hemos ido a “Archivo”--”Guardar como”, y en la casilla que dice “nombre”, hemos borrado todo lo que sale allí, y hemos escrito en su lugar index.html, y en la casilla que se llama “tipo” nos hemos preocupado que esté seleccionada lo que dice “Todos los archivos”.
Y hemos salvado o guardado, seguramente nos dirá que ese archivo ya existe, y que si queremos reemplazarlo, pues le decimos que si, y de esa manera nuestra plantilla.html se convierte en index.html, eliminándo el anterior .
Luego ponemos el cursor sobre la hoja de estilo que pertenece al index anterior y hacemos click derecho y elegimos eliminar.
De esa manera nuestro nuevo index.html recibirá las ordenes de la hoja de estilo llamada estilo-general.css
¿Porqué hay que tener por obligación una página llamada index.html?.
Porque cuando alguien escribe una direccion de una web en la barra de direcciones del navegador, el navegador irá directamente a buscar una página que se llame index.html para mostrarla, eso lo hacen por defecto, por eso si uno tiene muchas paginas subidas al servidor, pero no tiene subida una que se llame index.html, el navegador puede que le diga que no encuentra esa direccion, o que le salga error
Acá dejaré los códigos de todas las páginas, los primeros son los de la hoja de estilo-general y los que siguen son los de la plantilla o portada, la que ahora se tiene que llamar index.html.
Luego las otras páginas van dentro de su carpeta correspondiente
..................................................................
Dentro de Carpeta "web-ejemplo-cctw" una carpeta objetos y una
Hoja de estilo que tiene por nombre 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 }
#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 20px 0px 20px }
#navegacion ul { margin-left: 60px }
#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 {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 {}
..........................................................................................
También dentro de Carpeta "web-ejemplo-cctw" una
Página index.html el que era antes la plantilla y que ahora será la que sirva de portada
<!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>
...............................................................................
Ahora esta es la pagina que está dentro de la carpeta historia
Dentro de la Carpeta historia una carpeta objetos y la página
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>
..................................................................................................
Esta es la pagina que está dentro de la carpeta discografia
Dentro de la Carpeta discografia una carpeta objetos y la
Página 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>
...............................................................................................
Esta es la pagina que está dentro de la carpeta conciertos
Dentro de la Carpeta conciertos una carpeta objetos y la
Página 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>Conciertos A.
Conciertos A.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>
...............................................................................................
Esta es la pagina que está dentro de la carpeta descargas
Dentro de la Carpeta descargas una carpeta objetos y la
Página 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>Canciones Mp3
Canciones Mp3LetrasPosterImagenesVideo</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>
..................................................................................................
Esta es la pagina que está dentro de la carpeta foro
Dentro de la Carpeta foro una carpeta objetos y la
Página 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>
.................................................................................................
Esta es la pagina que está dentro de la carpeta souvenirs
Dentro de la Carpeta souvenirs una carpeta objetos y la
Página 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>Como comprar
Como comprarCamisetasCd´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>
...............................................................................................
En la carpeta objetos, (la primera que hicimos, la carpeta que tiene que estar dentro de la carpeta "web-ejemplo-cctw"), allí hay que poner la imagen curva-superior y la curva inferior (las que van arriba y abajo en la página.
también hay que tener en esa carpeta las curvas que creo se llaman menu-parte-superior y menu-parte-inferior (que son las de la capa menu).
También en esa carpeta objetos hay que tener el logotipo.
También hay tener el buzón
También hay que tener la imagen de fondo que aparecerá en todas las páginas
Recordar que los códigos de la imagen de fondo se ponen en la hoja de estilo-general.css allí donde dice body {etc. etc, etc,}
Para poner el email con el buzon basta con que se tenga el buzón en la carpeta objetos y escribir los códigos, en la pagina portada o plantilla
Si uno quiere poner el E-mail en las otras páginas, por ejemplo en la pagina que se llama historia.html, puede hacerse de la misma manera que como se pone en la pagina index o portada, solo que habría que anteponerle los dos puntos más la barra inclinada antes de la palabra objetos. Por ejemplo:
[correo eliminado]</p>
Así es como yo habría hecho las páginas de la web del curso, (si me he confundido en algo, me lo decís)
Saludos