duda sobre la hoja de estilos

mi preugnta es la siguiente:
me pierdo en la plantilla porque no entiendo bien los pasos.
creo una plantilla a partir de webejemplocctwlocal no?
ahora creo una hoja de estilos-general.css
pero cuando me dice Jorgens ésto:
//////////////////////////////////////////////////////////


Creando las capas contenido y pie
Ya que estamos, vamos a crear dos capas más. La primera se llamará contenido y en ella pondremos luego un menú lateral y los textos de nuestra web, la parte principal. También vamos a crear otra capa para la parte más baja de la web que llamaremos pie en la que más tarde tendremos algunos enlaces, un mensaje de copyright y puede que otro espacio para publicidad, ya veremos.

Siguiendo las mismas instrucciones que antes, definimos estas otras dos capas en la Hoja de Estilo:

#contenido {background-color: orange}

#pie {background-color: brown}

Y tras guardas la Hoja de Estilo, abrimos la plantilla.html y ponemos estas otras dos líneas después de la de la capa navegacion:

<div id="contenido">Esta será la zona principal de la web</div>

<div id="pie">Este es el pié de página</div>

Y el resultado es...
Tras guardar todo, en la Hoja de Estilo tendrás esto:

#cabecera {background-color: pink }
#navegacion {background-color: gray }
#contenido {background-color: orange }
#pie {background-color: brown }
En la plantilla.html esto otro
////////////////////////////////////////////////

ya no sési éso debe estar en la hoja estilosgeneralcss o abrir una hoja de estiloscss normal

pues no sé si la plantilla lleva las dos hojas de estilos o sólo una la general.
Hola,

veo que estás solo un poquitito confundida pero, no te preocupes que todos pasamos por lo mismo al aprender.

Según el curso de Jorgens, tenemos por un lado, las hojas de estilo o css y por otro lado, las hojas o códigos html. Una hoja html debe estar relacionada con una hoja de estilos. Esta relación se establece con una línea de cógigo en la parte superior del html.

Ahora, tenemos por un lado, la hoja html llamada INDEX que está relacionada con la hoja de estilos llamada ESTILOS.CSS.

Por otro lado, tenemos otra hoja html llamada PLANTILLA que está relacionada con la hoja de estilkos llamada ESTILO-GENERAL.CSS

Las instrucciones de css a las que te refieres, van en la hoja de ESTILO-GEERAL.CSS. Una hoja html solo puede trabajar con una hoja de estilos, no con dos.

Espero haberme explicado bien, sino, cualquier pregunta o duda, por aquí andamos. saludos, :wink:

P. D.: yo ya no me tomo la vida tan en serio, no vale la pena y he aprendido a disfrutar y a reir más gracias a Dios.
ATRÉVETE A VIVIR SIN VIOLENCIA
entonces,cuando yo hice el index htm porqué tuve que hacer dos hojas de estilos?una css y otro general?
vamos a ver es que he borrado y empezado de nuevo...loazul lo tengo bien creo...

y hay dos hojas de estilos generales y una css
[contenido no disponible]
en la primera demásarriba tengo ésto:
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#contenido {background-color: orange }
#menu {background-color: yellow; width: 150px ; float:left }
#pie {background-color: brown }


en la segunda ésto
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
body {text-align: center }
#global {width:auto;margin:4px auto }
#cabecera {background-color: pink;border-left: black 1px solid ; border-right: black 1px solid }
#navegacion {background-color: gray;border: black 1px solid }
#contenido {background-color: orange ; width: 800px ; float:left; border-left: black 1px solid ; border-right: black 1px solid }

#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin-right: 10px margin:3px 10px 3px 3px}

#menu li {list-style:none ; margin: 4px 0px 4px 6px }
#pie {background-color: brown;border: black 1px solid }
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}
#curva-superior{ background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width:800px ;
height: 12px;
overflow : hidden}

en la estilos.css tengo ésto
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#contenido {background-color: orange}

#pie {background-color: brown}



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

y si pico en la tercera o sea la última de ésa lista , la que ponee estilo-general.css.css
que no séporquéserepite, le pico y se abre un cuadrado para algo que no sé qué es...[contenido no disponible]

pero el caso es que ése index está en el aire ya o sea, en la red y está bien, creo...

y yo ahora voy a eliminar todolo que empecé en la plantilla lección 2 y empiexzo de cero vale?
porque es que me estaba saliendo divinamente bien, pero me he perdido con el arco de arriba el borde superior, lo he querido arreglar y ahora no me sale nada bien, todo sin colores, así que eliminio de lo azul para arriba todo o será malo para loq ue ya hay en la red?
Vamos por partes y cucharadas,

1. Las palabras que decimos tiene mucho poder por lo tanto, deja de decirte torpe, torpe, torpe. Si realmente lo fueras, no habrías llegado hasta este nivel.

2. Es mejor y más sano tener un mismo contenido y diseño en la carpeta local e internet porque así, no nos confundiremos. Una vez hecha las actualizaciones en la local, las subimos a la de internet y nos evitaremos un montón de líos.

3. Cuando creas un archivo en esa ventana (cuya imagen subiste) que se te abre: DOWNLOAD AND SAFE FILE AS..., tienes que poner simplemente el nombre pero sin la extensión del archivo, ejm: estilos pero no estilos.css porque el sistema le crea automáticamente la extensión .css Por eso también tienes buzon.gif.gif, imagen.gif.gif. y estilos.css.css, o sea, con doble extensión.

4. El index debe estar relacionada solo con una hoja de estilos (o css) que se llama estilos.css. Verifica cuál es la que está demás y elimínala.

5. Respecto a eliminar lo de la carpeta azul y preguntas si será malo para la red. Pienso que no debes de preocuparte por la red. Es preferible que
tú te sientas segura sobre lo que estás haciendo y eso, solo lo lograrás practicando. No quieras ir tan rápido, es preferible un poco más lento pero, seguro y si tienes que retroceder 1 o 2 capítulos del curso para afianzar tus conocimientos, hazlo!!! Créeme que todos lo hemos hecho!!!

Cualquier pregunta, por aquí andamos, saludos :D
ATRÉVETE A VIVIR SIN VIOLENCIA
ea!!
ya me perdí..
he llegado ala lección 3 y me he perdido..
me he hecho un líoo, que digo yo que ya ni sé que estoy haciendo ni que he de hacer que no me entero, que no quiero dejar mi index que tengo subido pero ahora ya no sé lo que lo que lo que que quée?
es que ni sé expilicar lo que quiero decir, tengo hasta taquicardias...
si yo ya tengo mi web funcionando, como voy a subir un index otra vez?
y qué hago si la plantilla no está acabada subirla?para que se rían demí quienes la vean?porque le doy pero me dice que existing..esperad, a ver lo que me dice...a file namedplantilla.html already existts.Unloap anyway?
y a mi me tiemblan las piernas por que no sé si decir anyway si o anywey no....uffffffff....qué difícil con lo bien que iba otra vez, todo ordenadito, los enlaces 1, 2, 3, se ponen plateados...todo bonito pero para qué sirve si no sé qué es?
Siento ser tan pesada y entiendo si no me responden porque total me responden y nome entero de nada...gracias y disculpen.un saludo.
por cosas así, tengo miedo
veamos.....
primero que nada tranquis, tranquis ok???

ahora... entrè a tu pàgina... y la veo muuy bien
hasta con videos y todo jejeje

ahora... al ver tu plantilla, veo que aun no la terminas, pero vas muy bien

por lo que veo, estàs siguiendo el curso paso a paso
siguelo hasta el final
que pronto te daràs cuenta para que te sirve la plantilla

supongo que querràs ordenar todo en varias pàginas verdad????

mira mi web
www.reparacionderines.com
como veràs, en el index tengo algunos enlaces, que me llevan a otros documentos, en los cuales explico mi trabajo

supongo tambien que tu pàgina tendràs varios apartados o temas
entonces, necesitaràs ordenarlos tambien jejejeje

todos los documentos son exactamente iguales... en diseño
para eso es la plantilla

es como..... imagina... tu index, es el jardìn de tu casa
muy bonito verdad??? bueno... entras a la casa, y tienes
la plantilla, lo que viene siendo
una sala, un comedor, cocina, recamaras etc etc
en algunas casas, todo lleva un patron
en otras... la sala es roja, la cocina azul etc etc
es cuestion de gustos

no te desanimes,... que aqui estamos para ayudarte

saludios
nunca lograré hacer éso...lo sabes.
Rines, que gracia me ha hecho, yo pensaba que éso era algo del ordenador y son las llantas de los coches, aquí en España, las ruedas se componen del neumático que lleva la cubierta que es la goma negra dura, la cámara que el lo que lleva el aire y parece un flotaador, y las llantas que son los discos donde se alojan los tornillos que van cogidos al tambor de los ejes..

has visto mi plantilla?pero si no la he hecho..qué líooooo,ja ajaja
bueno, pues a ver éste jardín cuando lo pongo en orden porque la casa está derrumbada sin habitaciones ni nada, y las pinturas y demás cosas no sé cuando las pondré....gracias, espero que me guies a ver ahora que he de hacer, gracias de nuevo.,
jajajaja

y crees que eso me tomò dias, o semanas????

noooooo, me tomò meses enteroooos

pero al final, valiò la pena, el resultado jeje

saludos
Ya ves, mujer, estás empezando a querer intentar nuevamente y eso es positivo, piensa y cree realmente que si puedes!!!

Yaneth es realmente una gran maestra, así que ÁNIMO Y ADELANTE!!! Ya has avanzado bastante, màs de la mitad del camino. Solo te falta apuntalar unos conocimientos para eso, también anda haciendo tu we-ejemplo-cctw-local y aparte tu web de ecijas y otra con prácticas. Todos lo hemos hecho, es la única manera de lograrlo (a mí también me tomó meeeeeeses, jajaja.

Y ya sabes, lenguaje positivo, saludos a ambas :D :D :D
ATRÉVETE A VIVIR SIN VIOLENCIA
cuando llegué al borde de arriba, no me slía, y deshice todo, empecé de nueo y tampoco ésta vez ha salido, estoy muy enojada conmigo porque como no coja un rotulador y pinte el borde en la pantalla..........es que no saldrá, ya ni sé que más hacerle...aquí estoy atrancada.
<!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="curva-superior.gif"></div>
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul>
  • Enlace, 1
  • Enlace, 2
  • Enlace, 3
    </div>
    <h1>Esta será la zona principal de la web</h1>


    me parece que ésto funciona</p>
    <h2>espero no tener que regresar de nuevo y hacerlo todo otra vez
    porqu enetonces creo que no voy a seguir haciendo la plantilla,
    que de todas maneras, no séni para lo que sirve, así que hasta
    cuándo voy a tener que escribir dios mio?ya me estoy cansando si
    total esto no sé si funcionará</h2>
    </div>

    <div id="pie">Este es el pié de página</div>

    </div>


    </body>
    </html>
    ----------------------------------------------------------------------------------
    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    body {text-align: center }
    #global {width:800px ; margin:4px auto }
    #cabecera {background-color: pink;border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }
    #navegacion {background-color: gray; border: black 1px solid}
    #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin-right: 10px; margin:10px 10px 10px 10px }
    #menu li {list-style:none ; margin: 4px 0px 4px 6px }
    #pie {background-color: brown; border: black 1px solid }
    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}

    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px ;
    overflow : hidden}
    ----------------------------------------------------------
    ilumíname dios mío....
  • lo logréee.....ya tengo la curvaaaaaa........
    sabéis el fallo dónde estaba? pues os lo digo para que ayuden a alguien si les ocurre igual:
    a ver si me acuerdo:en éste trocito de la plantilla.......
    yo ponía ésto, pero ponía "curva-superior.gif".......y el gif, sólo debe estar en la hoja de estilos no en la plantilla, así que le añadía más gif y nada, selos quitaba de objertos y nada, eliminé de objetos las curvas y nada las puse de nuevo y nada, repasé todo......y .eureka¡¡

    NO SE PONE GIF en la plantilla. por éso no salíaaaaaaaaaaa.biennnnnn
    gracias...
    :?: :roll: bueno, a ver tanta euforia, tanto madrugon y ahora qué?

    a ver si me entero de una vez como hacer mi reparación de rines para mi web..jeje..que cosa más bonita Yaneth...yo quiero una así.... :(
    <div id="global"><div id="curva-superior"></div>
    <div id="cabecera">Bienvenidos a mi Web</div>
    <div id="navegacion">Barra de Navegación</div>
    <div id="contenido">
    <div id="menu">
    yas ves mujer..... solo es cosa de mirar un poco mas
    y cuando algo no te salga bien....

    dejalo por un rato, y entretente con algo adicional...
    veràs como sale jeeje

    :wink:
    ya me he entretenido, he pintado el techo del cuarto de baño, he limpiado, hecho la comida..ayer salí a ver a mis padres...y no logro acabar ésto, nunca he llevado gafas y me pongo hasta las de mi marido, y no me sale el logotipo ni nada, sale torcido y las líneas rosa y gris no están bien...además Jorgens me ha liado porque en la parte de los bordes dice aasí:es la 3ª lección parte donde dice más bordes:DICE
    -------------------------------------------------------------------------------------

    A la capa o div llamada navegacion le vamos a poner borde por lo cuatro costados (por arriba, abajo , izquierda y derecha), que como ya sabemos, se hace añadiendo esto de abajo entre los corchetes de la Hoja de Estilo estilo-general.css:

    border: black 1px solid

    quedando esa línea así en la Hoja de Estilo:

    #navegacion {background-color: pink ; border: black 1px solid }

    Si ahora le pusieramos borde a la capa de arriba del todo (cabecera) por los cuatro costados, nos aparecería un borde de 2 pixeles entre esa capa y la capa navegacion, (1 pixel definido en la capa navegacion más otro pixel definido para la capa cabecera). Por tanto y para no tener unos bordes más gruesos que otros, a la capa cabecera le vamos a definir el borde solamente por ariba y por los lados. Esto, como ya sabes, se hace así:

    #cabecera { background-color: pink ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }

    ---------------------------------------------

    entonces en qué quedamos, la navegación no era gray y la cabecera pink?o es que ya no hay gray nada más pinks??

    voy a por una aspirina a ver si alguien me saca del dilema mientras tanto...