|
|
|
En esta
página trataremos de trabajar con archivos vinculados a
páginas creando menús, efectos, acciones, formatos texto,
vínculos, etc...
De
momento vamos a empezar con los archivos de tipo:
[.ico]
[.js] [.css]
Mas adelante iremos añadiendo mas tipos de archivos...
|
Archivos .ico |
|
Los archivos
.ico son archivos de iconos y los vamos a utilizar
para que al guardar la página en favoritos, se vea un
pequeño icono a la izquierda de nuestra URL... ¿A que mola? pues esto es
lo que hay que hacer...:
 Primero selecciona un icono que tenga que ver con el tema de
tu Web y si no encuentras uno así, pones uno que destaque,
que se note al desplegar la lista de favoritos.
Lo guardamos en nuestra carpeta Web, en la carpeta
C:/miweb/iconos por
ejemplo y si el icono se llama icono.ico quedará así C:/miweb/iconos/icono.ico
Abrimos una página y vamos a la vista HTML y buscamos la
etiqueta </head>
que estará al principio del código después
de los datos de la página, en el primer cuerpo y situamos el
cursor a la izquierda de el. Le damos al intro para crear
una nueva línea en blanco y en esa línea ponemos este
código:
Por
supuesto que la URL, la carpeta y el icono son de ejemplo y
debes de reemplazarlos por los tuyos... o no funcionará y
recuerda que debes de subir a tu Server o espacio Web el archivo del
icono junto con la página que creaste.
Ahora cuando guardes esa página en la lista
del Internet Explorer como favoritos, aparecerá el icono que
insertaste al lado de tu dirección Web. Algunas veces no
funciona al crearlo y no se por que, mira a ver si cerrando
el navegador y abriéndolo de nuevo funciona y también dale a
actualizar la página con F5.
Pues eso es todo, si lo insertaste bien, debe
de funcionar aunque en algunos espacios Web de los gratuitos
no funcionan...???
|
|
|
|
Archivos .js |
|
Este
tipo de archivos .js los podemos utilizar para meter varios
códigos en el y que
funcionen en las páginas que estén vinculadas a este
archivo.
Por ejemplo, si
ponemos un código de texto en movimiento en la barra de
título,
las páginas que tengan ese código de vinculación al archivo
.js harán ese efecto... de
este modo si tenemos 50 páginas con dicho vinculo al archivo
.js y queremos cambiar el texto en movimiento como título de
la página, solo tenemos que modificar el archivo .js y sin
tocar nada en las 50 páginas que tienen dicho vínculo. Nos
ahorramos mucho trabajo ¿verdad? je, je, je...
Pues manos a la
obra. Vamos a crear un archivo .js y haremos lo siguiente:
Abrimos un archivo de texto en
el Notepad
(por ejemplo) e insertamos este código...
Guardamos el archivo como
.js
(ejemplo titulo.js)
y lo metemos en nuestra carpeta Web en una subcarpeta
llamada
archivos
(por ejemplo) y la ruta en tu PC sería esta C:/micarpetaweb/archivos/titulo.js
que para que funcione en Internet sería esta:
http://www.tudominio.com/archivos/titulo.js
Abrimos una nueva página htm e insertamos el siguiente
código dentro de las etiquetas <body>.
Guardamos la página con el nombre que queramos y la
visualizamos en tu navegador, podrás comprobar que en el
título de la página (en la parte superior izquierda) aparece
una frase en movimiento.
Pues
esto es todo, así podéis crear varios códigos en un mismo
archivo o en varios y añadirlos a tantas página queráis.
Cuando modifiquéis el archivo .js
se verán los cambios en todas las páginas con este código
sin tener que actualizarlas.
Este
tipo de archivo .js se utilizan mucho en menús o barras de
vínculos que al pasar el ratón se despliegan las listas con
los enlaces.
Ejemplos:
Este archivo hace el efecto de
transición de colores sobre los vínculos de la página.
Ver ejemplo aquí...
Este otro hace que la imagen se
deslice sobre la página con un enlace que abre nueva
ventana: Ver ejemplo
aquí...
|
|
|
|
Archivos .css |
|
Este
tipo de archivos .css los podemos
utilizar para insertar distintos códigos en él y que funcionen en
las páginas que estén vinculadas a este archivo al igual que
los .js
Por ejemplo,
insertamos un código para que el puntero del ratón sea uno
que nosotros elijamos,
las páginas que tengan esa código de vinculación al archivo
.css harán ese efecto... de
este modo si tenemos 50 páginas con dicho vinculo al archivo
.css y queremos cambiar el
cursor, solo tenemos que modificar el archivo .css y sin
tener que modificar las páginas que contengan este código.
Manos a la
obra. Vamos a crear un archivo .css y haremos lo siguiente:
Abrimos un archivo de texto en
el Notepad (por ejemplo) e insertamos este código...
Guardamos el archivo como .css (ejemplo
stylo.css) y lo metemos en
nuestra carpeta Web en una subcarpeta llamada archivos (por ejemplo) y la ruta
en tu PC sería esta C:/mi_web/archivos/stylo.css
Abrimos una nueva página htm e insertamos el siguiente
código dentro de las etiquetas <head> que será la ruta
donde el navegador buscará nuestro archivo. Por su puesto
que deberás de poner tu ruta exacta en vez d este ejemplo...
Guardamos la página con el nombre que queramos y la
visualizamos en tu navegador (conectado a Internet y
habiendo subido los nuevos archivos a tu Server), podrás comprobar que el
puntero del ratón es otro, será el que nosotros elegimos
anteriormente.
Si lo quieres probar sin
conexión, la ruta será sin el http://www.miweb.com/
Pues
esto es todo, así podéis crear varios códigos en un mismo
archivo o en varios y añadirlos a tantas página queráis.
Cuando modifiquéis el archivo .css se verán los cambios en todas las páginas con este código
sin tener que actualizarlas.
Ejemplo aquí
|
|
Más ejemplos de
códigos con archivos:
Link de texto se desplaza para situarse siempre
debajo de página.
Link de texto cambia de colores al posar
el ratón sobre él.
Ventana se centra en
la página con clic en enlace de botón.
Imagen Pop-Up deslizante y opción de cerrar. |
|
|
Bueno, esto es todo de momento... más adelante pondremos
más...
WebMaster de
www.yomaster.com
|
|
|
|
OTROS |
|
 |
|
CÓDIGOS
aquí