Mostrando entradas con la etiqueta Dreamweaver. Mostrar todas las entradas
Mostrando entradas con la etiqueta Dreamweaver. Mostrar todas las entradas

martes, 28 de mayo de 2013

Como añadir nuevas fuentes a tu página web


En esta entrada vamos a ver el proceso de añadir una nueva fuente para nuestra página. Usando Google Fonts (www.google.com/webfonts) podemos utilizar más estilos de fuente de los que nos ofrece Dreamweaver por defecto. En pocos pasos vamos a tener una nueva fuente a nuestra disposición para utilizarla.
Photo Credit: Inti via Compfight cc 
Por ejemplo, para incorporar el estilo de fuente Aclonica procedemos a través de unos pocos pasos.
En Internet vamos a google.com/webfonts. La página tiene la siguiente apariencia:


Debajo de font families shown  empezamos a escribir el nombre de la fuente, al teclear a ya nos salen todas las fuentes que su nombre empieza igual hasta que queda la que nos interesa, aclonica:



Pulsamos en el botón azul Add to Collection. En la parte inferior de la pantalla tenemos una nueva sección donde tenemos que pulsar en el botón Use:

Que nos lleva a la siguiente pantalla:

Donde no tenemos más que desplazarnos a la parte inferior de la pantalla para copiar el código:
Para disponer del mismo sin problemas, lo copiamos en la sección head debajo del link a la página de estilos css de nuestra página.
Solo queda un paso. Si lo aplicamos a los botones de navegación del ejemplo anterior, nos quedará así:

Guardamos los cambios y ya tenemos incorporada la nueva fuente en nuestra página.
Como se observa, añadir una fuente a una página web requiere pocos pasos y en poco tiempo podemos disponer de más fuentes de las que nos suministra Dreamweaver por defecto. Un saludo!!

viernes, 22 de marzo de 2013

Como insertar una barra de navegación con Dreamweaver


Toda página que se precie dispone de una  barra de navegación que permite navegar a otras páginas con un simple clic. En esta entrada nos proponemos crear una barra de navegación. Vamos a trabajar con Dreamweaver CS5. Utilizando html y CSS podemos hacerlo también. En EstiloCSS también podemos ver un buen ejemplo de como crear una. Nos da una estimación del tiempo que puede costar.
Crearemos un div en primer lugar. Lo haremos de la siguiente manera:

Dreamweaver

Automáticamente tendremos en nuestra hoja la ventana Insertar etiqueta div que nos pide un id o un class. Rellenamos el id:

Pulsamos en aceptar. Automáticamente tenemos el div creado:
Vamos a utilizarlo para introducir en él la barra de navegación. Usaremos una lista con viñetas. Primero borramos la frase que ha aparecido por defecto en el wrapper. A continuación procedemos. En el inspector de propiedades, parte inferior de la pantalla, hacemos clic en el botón lista sin ordenar:

Ahora escribimos los distintos elementos de la lista. Por ejemplo podemos dejarla así:

Le vamos a poner como id navegación. Pulsamos en dividir para ver el código de la página y escribimos dentro de la etiqueta ul lo siguiente:

A cada elemento de la lista le ponemos un enlace a cada página con la etiqueta a. Hacemos clic en el primer elemento de la lista, inicio. En el inspector de propiedades nos colocamos en vínculo y escribimos la dirección de la página a la que nos debe llevar el enlace. Procedemos con el resto de puntos de la lista del mismo modo. Con inicio hemos hecho referencia a index.html, la página de entrada del sitio que estamos construyendo.

Si queremos que la página destino del enlace aparezca en otra ventana podemos elegirlo dentro de destino seleccionando _blank:

Lo dejamos en blanco. Creamos los enlaces del resto de la lista. Seleccionamos cada uno y en vínculo escribimos la página correspondiente. La lista queda ahora así:

Dentro del código, nos colocamos en el id navegación con un clic. Ahora vamos al panel de CSS para insertar una nueva regla pulsando en la parte inferior del mismo tal como muestra la imagen:

Que nos lleva  a la ventana:

Damos a aceptar, y estamos en condiciones de establecer los valores que nos interesan. Vamos a cuadro dentro de categoría:


En float seleccionamos left para que flote a la izquierda, que hará que se coloque en la izquierda de la pantalla.
Avanzamos, en la vista código hacemos clic en el li de inicio e insertamos una nueva regla css.


Seleccionamos ahora la categoría lista donde modificaremos la propiedad list-style a none para quitar las viñetas.
Nuestra lista se muestra ahora  así, con los cambios realizados:

Además, rompe la estructura lista sin ordenar. Para quitar el subrayado pondremos la propiedad text-decoration a none. Colocamos en el código el cursor en la primera etiqueta a de la lista navegación. Añadimos una nueva regla css:

Pulsamos en aceptar.

Pero los enlaces todavía siguen juntos. En la categoría bloque le aplicamos el valor block a la propiedad Display. El resultado en la página es el siguiente:

Contacto ha quedado debajo de Inicio. Debemos reducir la anchura. Cambiamos los 400 pixeles que hemos puesto por 300 pixeles. Guardamos el cambio y refrescamos la página. Ya tenemos lo que queríamos:

Resumiendo, los estilos aplicados para la barra de navegación son los siguientes:

Para cambiar de color el texto y el fondo de los enlaces añadimos un efecto hover. Nos colocamos en a, añadimos una nueva regla css, y en la ventana añadimos dos puntos y escribimos la palabra hover:

Modificamos las propiedades del color de fondo y color del texto para obtener un resultado cuando colocamos el cursor, por ejemplo, en portfolio:
Al código css le hemos añadido las siguientes propiedades:
#navegación li a:hover {
            color: #fff;
            background-color: #333;
}
Si queremos saber un poco más sobre hover librosweb nos puede ayudar a realizarlo con soltura. Para que se quede esto bien, es interesante practicar. En desarrolloweb tenemos otro ejemplo para practicar  la creación de otro tipo de barra de navegación.

Actualizar tablas en Excel

En el siguiente ejercicio vamos a ver como actualizar tablas en excel. Nos centraremos en modificar unos precios con código VBA. Modificare...