Webmasters, ¡atención a las Hojas de estilo!
Iniciado por Raúl el 04/07/2006 15:28 · 9 mensajes
Bueno, sé que es un foro gay, pero como algunos estareis haciendo vuestras paginitas, aquí va esto...
Os recomiendo que echeis un ojo al tema de las Hojas de estilo, algo que os ahorrará trabajo tanto a vosotros como a los demás ;) digamos que utilizándolas luego podreis cambiar el aspecto de 200 páginas de un plumazo ;)
No temais, el concepto es muy simple y lo aprendereis enseguida. Usando Dreamweaver y echando un ojo a la Vista código y otro a la Vista Diseño (o mejor aún a la Vista combinada) podreis hacerlo de forma fácil. Un sencillo ejemplo: Si creais un archivo HTML que se llame google.html y que tenga este código (quitadle el espacio de cada línea):
< html>
< head>
< title>Ir a Google < /title>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
< link href="misfuentessaladas.css" rel="stylesheet" type="text/css">
< style type="text/css">
< /style>
< /head>
< body>
< h2>Entrar a Google < /h2>
< a href="http://www.google.es" target="_blank">Google< /a>
< /body>
< /html>
y luego creais un archivo llamado misfuentessaladas.css que sólo contenga
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 60;
color: #FF0000;
text-decoration: blink;
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #00CC00;
background-color: #66FF00;
}
Fijaos que, externamente, al texto (etiqueta h2) le pongo unas propiedades (rojo grande parpadeante), y al enlace (etiqueta a) le pongo otras propiedades (pequeño verde y feo)
y si las alojais dentro de la misma carpeta en vuestro servidor, os saldrá esta mierda :laugh:
http://www40.brinkster.com/eldraku/google.htm
Pero lo bueno de todo este rollo es que después, cualquier HTML al que le añadais la línea
< link href="misfuentessaladas.css" rel="stylesheet" type="text/css">
adoptará el mismo aspecto :wink:
Os paso esta maravillosa guía que está en español :keek: y lo explican todo genial.
www.htmlhelp.com/es
Y más adelante, para casos concretos podreis utilizar su guía de propiedades
www.htmlhelp.com/es/reference/css/properties.html
¡Nos vemos!
Os recomiendo que echeis un ojo al tema de las Hojas de estilo, algo que os ahorrará trabajo tanto a vosotros como a los demás ;) digamos que utilizándolas luego podreis cambiar el aspecto de 200 páginas de un plumazo ;)
No temais, el concepto es muy simple y lo aprendereis enseguida. Usando Dreamweaver y echando un ojo a la Vista código y otro a la Vista Diseño (o mejor aún a la Vista combinada) podreis hacerlo de forma fácil. Un sencillo ejemplo: Si creais un archivo HTML que se llame google.html y que tenga este código (quitadle el espacio de cada línea):
< html>
< head>
< title>Ir a Google < /title>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
< link href="misfuentessaladas.css" rel="stylesheet" type="text/css">
< style type="text/css">
< /style>
< /head>
< body>
< h2>Entrar a Google < /h2>
< a href="http://www.google.es" target="_blank">Google< /a>
< /body>
< /html>
y luego creais un archivo llamado misfuentessaladas.css que sólo contenga
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 60;
color: #FF0000;
text-decoration: blink;
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #00CC00;
background-color: #66FF00;
}
Fijaos que, externamente, al texto (etiqueta h2) le pongo unas propiedades (rojo grande parpadeante), y al enlace (etiqueta a) le pongo otras propiedades (pequeño verde y feo)
y si las alojais dentro de la misma carpeta en vuestro servidor, os saldrá esta mierda :laugh:
http://www40.brinkster.com/eldraku/google.htm
Pero lo bueno de todo este rollo es que después, cualquier HTML al que le añadais la línea
< link href="misfuentessaladas.css" rel="stylesheet" type="text/css">
adoptará el mismo aspecto :wink:
Os paso esta maravillosa guía que está en español :keek: y lo explican todo genial.
www.htmlhelp.com/es
Y más adelante, para casos concretos podreis utilizar su guía de propiedades
www.htmlhelp.com/es/reference/css/properties.html
¡Nos vemos!
Está EXCELENTE, amigo Raul. Tú eres informático ¿Verdad?Raúl escribió:Bueno, sé que es un foro gay, pero como algunos estareis haciendo vuestras paginitas, aquí va esto...
Os recomiendo que echeis un ojo al tema de las Hojas de estilo, algo que os ahorrará trabajo tanto a vosotros como a los demás ;) digamos que utilizándolas luego podreis cambiar el aspecto de 200 páginas de un plumazo ;)
No temais, el concepto es muy simple y lo aprendereis enseguida. Usando Dreamweaver y echando un ojo a la Vista código y otro a la Vista Diseño (o mejor aún a la Vista combinada) podreis hacerlo de forma fácil. Un sencillo ejemplo: Si creais un archivo HTML que se llame google.html y que tenga este código (quitadle el espacio de cada línea):
< html>
< head>
< title>Ir a Google < /title>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
< link href="misfuentessaladas.css" rel="stylesheet" type="text/css">
< style type="text/css">
< /style>
< /head>
< body>
< h2>Entrar a Google < /h2>
< a href="http://www.google.es" target="_blank">Google< /a>
< /body>
< /html>
y luego creais un archivo llamado misfuentessaladas.css que sólo contenga
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 60;
color: #FF0000;
text-decoration: blink;
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #00CC00;
background-color: #66FF00;
}
Fijaos que, externamente, al texto (etiqueta h2) le pongo unas propiedades (rojo grande parpadeante), y al enlace (etiqueta a) le pongo otras propiedades (pequeño verde y feo)
y si las alojais dentro de la misma carpeta en vuestro servidor, os saldrá esta mierda :laugh:
http://www40.brinkster.com/eldraku/google.htm
Pero lo bueno de todo este rollo es que después, cualquier HTML al que le añadais la línea
< link href="misfuentessaladas.css" rel="stylesheet" type="text/css">
adoptará el mismo aspecto :wink:
Os paso esta maravillosa guía que está en español :keek: y lo explican todo genial.
www.htmlhelp.com/es
Y más adelante, para casos concretos podreis utilizar su guía de propiedades
www.htmlhelp.com/es/reference/css/properties.html
¡Nos vemos!
Gracias Soc, bueno hice FPs y ahora llevo un tiempo dando clases de informática básica en un aula, pero no me considero informático, para eso hay que saber mucho de todo ;)Sócrates escribió:Está EXCELENTE, amigo Raul. Tú eres informático ¿Verdad?
Venga, pues como veo que a algunos os agradó el tema, os hablo de un pequeñísimo detalle que me dejé :lol: ¡Dreamweaver te lo hace
automático! :keek:
Tras abrir Dreamweaver creamos y guardamos un HTML, hay que tener un HTML guardado antes de crear un estilo. Luego vamos a Ventana-->Estilos HTML y lo marcamos, nos aparecerá la ventana que pongo abajo. Se puede hacer de varias maneras, pero lo haremos con etiquetas HTML. Pincha en Nuevo estilo:
[imagen]
Deja la ventana como te pongo, y escoge una propiedad, por ejemplo, la del párrafo normal < p>:
[imagen]
Te pide luego un nombre para tu archivo *.css. Pon el que quieras. Te lo creará en el misma carpeta donde tengas tu Sitio/archivo.
Por si no recuerdas las etiquetas de texto, verás algunas propiedades de párrafo te las encontrarás en Propiedades (deja marcado Ventana-Propiedades). Prueba si quieres a ponerte en vista Código y a seleccionarlos para ir viendo qué etiquetas aparecen en el código segun eligas uno u otro :wink: Mira:
[imagen]
Te aparecerá luego una ventana donde poner fácilmente vuestro estilo... poned el formato que querais a esa etiqueta <p> y luego a Aceptar.
Pues ya teneis el 1º formato de etiqueta HTML hecho. ¿Cómo ponemos otro?, pues habrá que hacerlo en ese mismo archivo, por lo tanto, pinchamos de nuevo en el iconcito de Nuevo estilo y elegimos otra etiqueta, por ejemplo los vínculos (< a>)
Cuando tengas tu primer css, échale un ojo al archivo .css para irte mentalizando. Puedes abrirlo con el mismo Dreamweaver o con el bloc de notas
Si en tu web quieres diferentes estilos para diferentes páginas, puedes usar un archivo para cada estilo. Pero recuerda seleccionar en "Definir en" la opción "Nuevo archivo".
[imagen]
Si quieres cambiar algo, pulsa en "Editar estilos" y luego doble click en la etiqueta:
[imagen]
Ah!, y ahora queda enlazar el .HTML con .CSS ¿Recuerdas la línea
< link href="misfuentessaladas.css" rel="stylesheet" type="text/css">
que había que poner en el HTML?, Dreamweaver te la pondrá él solo. Pulsa aquí
[imagen]
y en la ventana que te salga le especificas tu archivo .css
Sólo tendrás que hacer eso en todos tus restantes documentos HTML (eso sí, si usas las mismas etiquetas, claro)
Para cosas sencillitas Dreamweaver te vendrá genial, pero a poco que quieras complicar la cosa deberás echar mano del código, para ello te vendrán bien los links anteriores. Para seguir practicando con los estilos en Dreamweaver, probad con los capítulos css de este link
http://www.arp.jazztel.es/dreamweaver.htm
Ese es el tutorial intermedio, el básico aquí:
http://www.terra.es/personal8/angelpuen/conjunto.htm
¡besotes!
automático! :keek:
Tras abrir Dreamweaver creamos y guardamos un HTML, hay que tener un HTML guardado antes de crear un estilo. Luego vamos a Ventana-->Estilos HTML y lo marcamos, nos aparecerá la ventana que pongo abajo. Se puede hacer de varias maneras, pero lo haremos con etiquetas HTML. Pincha en Nuevo estilo:
[imagen]
Deja la ventana como te pongo, y escoge una propiedad, por ejemplo, la del párrafo normal < p>:
[imagen]
Te pide luego un nombre para tu archivo *.css. Pon el que quieras. Te lo creará en el misma carpeta donde tengas tu Sitio/archivo.
Por si no recuerdas las etiquetas de texto, verás algunas propiedades de párrafo te las encontrarás en Propiedades (deja marcado Ventana-Propiedades). Prueba si quieres a ponerte en vista Código y a seleccionarlos para ir viendo qué etiquetas aparecen en el código segun eligas uno u otro :wink: Mira:
[imagen]
Te aparecerá luego una ventana donde poner fácilmente vuestro estilo... poned el formato que querais a esa etiqueta <p> y luego a Aceptar.
Pues ya teneis el 1º formato de etiqueta HTML hecho. ¿Cómo ponemos otro?, pues habrá que hacerlo en ese mismo archivo, por lo tanto, pinchamos de nuevo en el iconcito de Nuevo estilo y elegimos otra etiqueta, por ejemplo los vínculos (< a>)
Cuando tengas tu primer css, échale un ojo al archivo .css para irte mentalizando. Puedes abrirlo con el mismo Dreamweaver o con el bloc de notas
Si en tu web quieres diferentes estilos para diferentes páginas, puedes usar un archivo para cada estilo. Pero recuerda seleccionar en "Definir en" la opción "Nuevo archivo".
[imagen]
Si quieres cambiar algo, pulsa en "Editar estilos" y luego doble click en la etiqueta:
[imagen]
Ah!, y ahora queda enlazar el .HTML con .CSS ¿Recuerdas la línea
< link href="misfuentessaladas.css" rel="stylesheet" type="text/css">
que había que poner en el HTML?, Dreamweaver te la pondrá él solo. Pulsa aquí
[imagen]
y en la ventana que te salga le especificas tu archivo .css
Sólo tendrás que hacer eso en todos tus restantes documentos HTML (eso sí, si usas las mismas etiquetas, claro)
Para cosas sencillitas Dreamweaver te vendrá genial, pero a poco que quieras complicar la cosa deberás echar mano del código, para ello te vendrán bien los links anteriores. Para seguir practicando con los estilos en Dreamweaver, probad con los capítulos css de este link
http://www.arp.jazztel.es/dreamweaver.htm
Ese es el tutorial intermedio, el básico aquí:
http://www.terra.es/personal8/angelpuen/conjunto.htm
¡besotes!
Ay! Cada vez me doy cuenta de que sé menos!! :erm:
¡Vamos Fe-D, no me seas Sócrates! :D (el filósofo, no el forero)Fe-D escribió:Ay! Cada vez me doy cuenta de que sé menos!! :erm:
Una ultima cosilla, si quereis hacer estilos, hay una manera más sencilla que en la ventana Estilos, que es hacerlo en la de Propiedades. Pinchad en el iconito de fuentes (la F amarilla) y se convertirá en otro azul. Selecciona el texto que quieras formatear y pulsa en Nuevo estilo CSS
[imagen]
Pon las características que quieras y ese texto cogerá ese aspecto. Puedes hacerlo todo desde ese desplegable.
Luego para usar esos estilos creados al redactar tu documento, selecciona el texto y elige el estilo que quieras:
[imagen]
Aunque haciendo copia-pegas desde la ventana de Diseño también se puede :D
Por cierto, el ¡Hola! se ha convertido de pronto en ¡HOLA!, eso es porque en el estilo "texto normal" he activado la opción may/min, que puede ser muy útil...
[imagen]
y lo dejo ya... adeu!
Bueno no... con esto y un huevo lo dejo ya :mak: os paso un ejemplo de diferentes formas de usar clases: enlazando una clase a un archivo css, enlazando una clase dentro del mismo HTML o enlazando una propiedad HTML a un archivo .css :besico:
http://www40.brinkster.com/eldraku/db/clases.htm
http://www40.brinkster.com/eldraku/db/clases.htm
Pues un webmaster muy majete me publicó mi textito! :D
http://www.programacionweb.net/articulos/articulo/?num=422
Por cierto, os recomiendo visitar esta colección de artículos sobre creación web, está bastante bien surtida :wink:
http://www.programacionweb.net/articulos/
http://www.programacionweb.net/articulos/articulo/?num=422
Por cierto, os recomiendo visitar esta colección de artículos sobre creación web, está bastante bien surtida :wink:
http://www.programacionweb.net/articulos/
Wow, Raúl, te felicito :)Raúl escribió:Pues un webmaster muy majete me publicó mi textito! :D
http://www.programacionweb.net/articulos/articulo/?num=422
Por cierto, os recomiendo visitar esta colección de artículos sobre creación web, está bastante bien surtida :wink:
http://www.programacionweb.net/articulos/