fernando mendoza escribió:ok gracias raulyure ya he corregido las fallas que me hicistes notar y sigo sin ver las mejoras, la vista previa del index no muetra las imagenes, y la vista previa de la plantilla no tiene nada que ver con la que esta en internet, y no me muestra los cambios de los bordes. Gracias raul por tu apoyo sigo esperando que encontremos la falla y de verdad te digo que te estoy agradecido.
Hola:
Si usted tiene algo de tiempo, le daré una idea de como ir solucionando todo esto.
Como yo soy un poco artesanal en las soluciones, es por eso que le digo que requiere algo de tiempo, aunque tampoco es tanto.
Usted para crear sus paginas y sus hojas de estilo está utilizándo el programa HTML-KIT.
La manera que le voy a indicar es utilizándo el bloc de notas de windows
Vamos a crear una carpeta en su escritorio, dentro de esa carpeta va a poner las páginas y las hojas de estilo que creará con el bloc de notas, también dentro de esa carpeta creará una carpeta llamada objetos.
O sea, creará
una carpeta mendoza
una carpeta objetos
una pagina index.html
una pagina plantilla.html
una hoja de estilo estilos.css
una hoja de estilo estilo-general.css
Cree en su escritorio una carpeta, y pongale por nombre
mendozaAhora vaya a la parte inferior izquierda de su pantalla y pulse en "Inicio" -- "Todos los Programas" -- "Accesorios"
cuando ponga el cursor en Accesorios se abrirá un desplegable y pulse en "Bloc de notas".
Creándo el index.htmlSe abrirá una ventana vacía.
Vaya arriba y pulse en "Archivo", en el desplegable pulse en "Guardar como".
Cuando se abra la ventana del "Guardar Como", vaya abajo, y en la casilla que dice "Nombre", borre lo que hay allí y escriba
index.htmlLuego en la casilla "Tipo", pulse en la flecha de la derecha y en el pequeño desplegable elija o pulse en "Todos los Archivos".
Luego vaya arriba y donde dice "Guardar en", asegurese de que se guardará en la carpeta "mendoza".
Luego vaya abajo y pulse en "Guardar".
Creándo la plantilla.htmlAl pulsar en "Guardar", ese index se habrá guardado en la carpeta mendoza, y como sigue estándo abierta la ventana, vuelve a ir a "Archivo" -- "Guardar Como".
Cuando se abra la ventana del "Guardar Como"
En la casilla "Nombre", borre todo lo que hay allí y escriba
plantilla.htmlEn la casilla "Tipo", pulse en la flecha de la derecha y en el pequeño desplegable elija o pulse en "Todos los archivos".
En la casilla "Guardar en", asegúrese de que se guardará en la carpeta mendoza.
Luego pulse en "Guardar".
Hasta ahora ya tiene dentro de la carpeta mendoza una pagina index.html y una página plantilla.html.
Creándo la hoja de estilos.cssComo después de pulsar en "Guardar", se vuelve a quedar esa ventana abierta, entonces vuelve a pulsar en "Archivo" y en "Guardar Como",
Cuando se abra la ventana del "Guardar Como",
vaya a la casilla "Nombre", borre todo lo que hay allí y escriba en ella
estilos.cssLuego en la casilla "Tipo", pulse en la flecha de la derecha y elija o pulse en "Todos los archivos"
Luego arriba donde dice "Guardar en", asegúrese de que se guardará en la carpeta mendoza
Luego abajo pulse en "Guardar".
Hasta ahora tiene dentro de la carpeta mendoza
una pagina llamada index.html
una pagina llamada plantilla.html
una hoja de estilo llamada estilos.css
Creándo la hoja de estilo-general.cssDespués de pulsar en "Guardar", se vuelve a quedar abierta esa ventana, por tanto vuelve a ir arriba y pulsar en "Archivo", y en el desplegable pulsar en "Guardar Como"
Cuando se abra la ventana del "Guardar Como"
Va a la casilla "Nombre", borra todo lo que hay allí y escribe en esa casilla
estilo-general.cssLuego en la casilla "Tipo", pulsa en la flecha de la derecha y elije o pulsa en "Todos los archivos"
Arriba donde dice "Guardar en", asegúrese de que se guardará en la carpeta mendoza.
Luego vaya abajo y pulse en "Guardar".
Ahora cierre esa ventana
Vaya a la carpeta mendoza y vea si están esos cuatro archivos.
Ya estándo en la carpeta mendoza, aproveche de crear dentro de ella una carpeta a la que le pondrá por nombre
objetos.
Luego ponga el cursor sobre la página index.html hágale click derecho y en el desplegable que se abre ponga el cursor sobre "Abrir con" y en el desplegable que se abre pulse en "Bloc de notas".
Así se abrirá esa página index.html (que estará vacía logicamente)
Por tanto usted copie todos estos códigos que le dejo acá, dentro de esa página index.html.
.....................................
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Página Principal de Fernando Mendoza </title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<p class="centrado">Bienvenidos a mi pagina web. Muy pronto estara lista!</p>
[contenido no disponible]</p>
Pagina creada gracias a
CCTW</p>
[correo eliminado]</p>
Plantilla html entrar pulse aqui</p>
<h2><center>Este es el index.</center></h2>
[contenido no disponible]</p>
</body>
</html>
..............................................................
Luego de copiar estos códigos, cierre esa pagina
Luego haga lo mismo con la pagina plantilla.html
Ponga el cursor sobre el archivo, hágale click derecho, ponga el cursor sobre "abrir con" y pulse en "Bloc de notas"
Y pegue en esa pagina plantilla todos estos códigos
.....................................................
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul>
Enlace 1Enlace 2
<a href="#">
Enlace 3</a></div><h1>Esta será la zona principal de la web</h1>
Este es mi segundo párrafo. Acabo de poner un punto y en cambio
sigue siendo un párrafo pues no le he colocado aun la etiqueta de cierre.
Voy a ponersela justo aqui</p>
<h2>Y este es el tercer parrafo.</h2>
En pocas lecciones aprendere a darle margenes
para separarlos unos de otros, incluso hacerles sangrias por la izquierda
a la primera linea, que queda mucho mejor</p>
Anda, fijate! Salen todos centrados, que cosa.
Espero que Jorgens nos enseñe a ponerlos
alineados a la izquierda, o justificados.
Asi esto parece una poesia! je je je.</P>
</div>
<div id="pie">Este es el pie de pagina</div>
</div>
</body>
</html>
...................................................
Luego cierre la pagina
Ahora haga lo mismo con la hoja de estilos.css
Ponga el cursor sobre ella, hagale click derecho, ponga el cursor en "Abrir con" y pulse en "Bloc de notas"
Y pegue en ella todos estos códigos
..................................................
body {background-color:#DAA520;background-image: url(objetos/gato.gif);
background-position: 450px 50px ; background-repeat: no-repeat ; height:100%;}
img {border-style:none}
.centrado {text-align:center}
............................................................
Luego cierre esa hoja
Ahora abra con el Bloc de notas la hoja de estilo que se llama estilo-general.css
De la misma manera de como a abierto las otras
(cursor sobre archivo--click derecho--Abrir con--Bloc de notas)
Y pegue dentro de ella todos estos códigos
............................................
*{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}
p{text-align: justify}
body{text-align:center}
#global{width:800px;margin:4px auto}
#cabecera{background-color: pink }
#navegacion{background-color:gray }
#contenido {background-color: orange ; width: 800px ; float:left;}
#contenido p{padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu{background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px}
#menu li{ list-style:none ; margin: 4px 0px 4px 6px}
#pie{background-color: brown}
a{color: brown ; text-decoration:none ; display:block}
a:link{}
a:visited{}
a:hover{color:red ; text-decoration:underline ; background-color:silver}
a:active{}
...................................................
Luego cierre esa hoja
Luego copie dentro de la carpeta objetos, (la que está dentro de la carpeta mendoza) las imagenes que se supone que tiene por el momento, que me omagino tienen que ser solo la del gato la sonrisa y el buzon.
Como puede ver, le he quitado esos bordes que usted había puesto, ¿Porqué?
Porque, no es llegar y ponerle bordes a una capa, sin que estén complementadas con las otras.
Un poco más adelante en el curso ya se explica como ponerle bordes a las capas para que estén todas complementadas.
Ahora después de todo eso, lo único que quedaría por hacer es reemplazar la carpeta objetos que tendrá en la carpeta "web-ejemplo-cctw" por la que tiene en la carpeta mendoza, y lo mismo con las paginas y hojas de estilo, eliminar las que tiene dentro de la carpeta "web-ejemplo-cctw" y poner las que tiene dentro de la carpeta mendoza.
Luego abrir el programa HTML-KIT, poner el cursor sobre la carpeta amarilla del Workspace, hacerle click derecho, y en el desplegable que se abre ir abajo, poner el cursor sobre Add /Remove FTP/Folder, y pulsar en Remove Server/Folder, para eliminar esa carpeta amarilla.
Luego cierra el programa HTML-KIT
Vuelve a abrir el programa HTML-KIT y va a la pestaña Workspace, pulsa en ella
pone el cursor sobre Añadir Carpeta/Servidor FTP, y en el desplegable pulsar en Añadir Carpeta Local/Red
Se le abrirá la ventana que se llama "Add Folder"
y en la casilla que se llama "Folder Path" busca la carpeta en donde tiene su web, para que en esa casilla quede la ruta completa que seguirá el programa hasta esa carpeta en donde tiene su web.
Luego en la siguiente casilla que se llama "Display name", cuando haga clic en ella, le aparecerá nuevamente la ruta completa, pues borre todo lo que aparece en esa casilla y escriba el nombre de la carpeta en que tiene su web agregándole un guión y local
Por ejemplo si su web está dentro de la carpeta "web-ejemplo-cctw", puede ponerle en esa casilla "Display name" por ejemplo web-ejemplo-cctw-local o mendoza-local o misrecomendaciones-local.
Luego de crear la carpeta amarilla, vaya a su carpeta azul, --click derecho--Connect
cuando le muestre los archivos hacia abjo, le hace click derecho a cualquira de esos archivos (index, plantilla u hojas de estilo) y en el desplegable pulsa en "upload", para que se le abra la ventana en que debe buscar los archivos, y comience a subir todo otra vez
Espero no haberlo liado demasiado, pero tómeselo con calma.
Luego ya eliminará las imagenes grandes que puso en el index, las que están en el servidor dentro de la carpeta objetos
Saludos