mi proyecto no se ve igual al subirlo al hosting (no se si me explico bien asi)

Hola me encuentro atascada... estoy desesperada,llevo toda la tarde dandole vueltas sin poder avanzar...
he adquirido el hosting gratuito que ofrece "como crear tu web" y he comprado un dominio,www.zentranarock.com
el problema es que he subido la index,la plantilla,la hoja de estilo,la hoja de estilos general y he creado la carpeta objetos y subido dentro de ella las imagenes de fondo,la sonrisa y el buzon, tal y como explicais. al añadir el servidor FTP en Initial Directory puse primero: www
y al abrir mi index o mi plantilla, no se veian bien... (antes de añadir el servidor mi proyecto se veía correctamente)
asi que borre todo y repeti lo mismo,añadi el servidor FTP pero esta segunda vez puse en Initial Directory esto: public_html
y sigue pasando lo mismo... la web no se ve bien... ni siquiera se ve la imagen de fondo que tenia puesta...
no se que mas hacer,no creo que sea un fallo en los codigos html ¿por que si no no se verían bien en el proyecto antes de añadir el servidor no? por favor ayudenme... llevo un dia entero intentandolo...
index:


<html>
<head>
<title>zentraña</title>
<link rel="stylesheet" href="estilos.css"type="text/css" media="all">
</head>
<body>

<p class="centrado">Bienvenidos a la pagina de Zentraña.Muy pronto estara lista ;)</p>
<p><img src="objetos/sonrisa.gif" width="60px" height="60px" alt="Bienvenidos al ejemplo de CCTW" /></p>
<p>pagina web creada por Rosa María</p>

<p><a href="mailto:[correo eliminado]<img alt="pulsa para escribirme un E-mail" src="objetos/buzon.gif" height="32px" width="32px"/><img alt="pulsa para escribirme un E-mail" src="objetos/buzon.gif" height="32px" width="32px"/></a></p>
</body>
</html>




css esta es la hoja de estilos de la index:


body {background-color:#D2B48C; background-image:url(objetos/fondo.png.jpg); background-repeat:no-repeat;background-position:center center;height:100%;;}
img {border-style:none;}
.centrado{text-align:center;}


esta es la plantilla:

<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><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li></ul>
</div>
<h1>Esta será la zona principal de la web</h1>
<p>Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2><p>En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>
<p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
</div>
<div id="pie">Este es el pié de página</div>
</div>
</body>
</html>

y esta es la hoja de estilos de la plantilla:

* {text-indent:0px; margin:0px; padding:0px; border:0px;}
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 {}
p {text-align:justify;}
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;}

Gracias,ojala me puedas ayudar...
tu plantilla

<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>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</div>
<h1>Esta será la zona principal de la web</h1>
<p>Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2>
<p>En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p><p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
</div>
<div id="pie">Este es el pié de página</div>
</div>
</body>
</html>

css

* {
text-indent:0px;
margin:0px;
padding:0px;
border:0px;
}
body {
background-color:#D2B48C;
background-image:url(objetos/fondo.png.jpg);
background-repeat:no-repeat;
background-position:center center;
height:100%;
text-align:center;
}
img {
border-style:none;
}
.centrado {
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 {
}
p {
text-align:justify;
}
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;
}

la plantilla te sirve para crear toda la web
Esa es tu plantilla y css generales con una plantilla se hacen todas las paginas de una web index.html o index.php otra.html etc.html solo debes cambiar el contenido aunque esa plantilla es la de las lecciones y deves seguir con las lecciones coje esa plantilla y css y sigue con el curso un saludo