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.

viernes, 15 de marzo de 2013

Como diseñar una página a dos columnas con CSS


Después de ver una pequeña entrada sobre estilos en cascada css, vamos a comentar como construir un sitio con dos columnas. Ejemplos de esto lo tenemos, por ejemplo, en Studio manchego. En primer lugar dentro de la etiqueta body, vamos a crear varias etiquetas div para crear la estructura de una página con dos columnas. En primer lugar, para poner una introducción, un título o imagen, o una combinación de las mismas crearemos la cabecera o header.
Después vendrá el contenido principal de la página, que lo vamos a dividir en dos partes, contenido principal y un contenido. La página web contiene todos los elementos que queremos que se vean. Para decidir cómo se van a ver, usaremos una hoja de estilos en cascada. Si no la utilizamos la página quedaría muy pobre. Por hacerlo más sencillo, no introduciremos un pie de página. Tampoco vamos a colocar un menú. No obstante, si deseáis ver como se coloca un menú podemos ver está pagina que se enseña como hacerlo.
La estructura de nuestra página debe quedar de la siguiente forma:




Código de la página web

Para crear la página crearemos el siguiente código:




La página la podemos guardar como index.html. Todo lo que se va a ver en la página estará situado dentro de la etiqueta body. El primer elemento es el div header:



Si nos fijamos, dentro del div con id fondo hemos colocado otro dos div (principal y aside):



Lo que queremos es que principal y aside queden colocados uno al lado de otro así:


  

Hoja de estilos

Ahora que tenemos todos los elementos que nos interesan en index.html vamos crear la hoja de estilos. Tal como muestra index, la llamamos estilos.css y la guardamos dentro de la carpeta css. Si a la carpeta la llamamos Mi sitio, su contenido puede ser así:



Esto significa que la carpeta mi sitio tiene dos carpetas (CSS e Imágenes) junto con la página index.html. CSS, a su vez, contiene el archivo estilos.css y la carpeta imágenes podemos decir que tiene dos imágenes.

Vamos a ver el contenido de estilos.css por apartados. Para hacer referencia a cada div usamos su id. Por ejemplo, a header, le aplicamos los distintos estilos poniendo el carácter # antes de su id. Después colocamos las distintas propiedades encerradas entre llaves, y la final de cada propiedad debemos colocar un punto y coma. Podemos recordar que tenemos una referencia de los estilos sobre posicionamiento en librosWeb.

En primer lugar el div con id de valor header queda así:

#header
{
            width: 100%;
            height: 100px;
            background: #fd23;
            font-style: italic;
            font-weight: bold;
            text-align: center;
}

Esto significa que su ancho va a ser el de toda la página, width: 100%. Le damos una altura de 100 pixeles, un color de fondo con la propiedad background. El texto aparece en cursiva gracias a Font-style, Font-weight nos pone en negrita todo el texto y además, estará centrado gracias a text-align.
Al div fondo le aplicamos los siguientes estilos:

#fondo
{
            width: 100%;
            height: 630px;
            background: #ff23;
}

Es decir fondo va a ocupar todo el ancho de la página. Su altura tendrá 630 pixeles.


#principal
{
            float: left;
            width: 65%;
            height: 630px;
            background: blue;
}

Principal y aside van dentro de fondo. Para que principal quede a la izquierda ponemos float: left. La altura es la misma que de fondo y de aside (height: 630 pixeles). Las anchuras las hemos colocado de forma porcentual. Su suma es del 100%. El color de fondo de principal está puesto a azul.

#aside
{
            float: right;
            width: 35%;
            height: 630px;
            background: yellow;
}

Float lo ponemos a right para que quede a la derecha del div principal. Con float hacemos que el resto de la página “fluya” alrededor del elemento. Así conseguimos que aside se coloque al lado de principal, a su misma altura. Color de fondo amarillo.

Si queremos colocar más columnas, lo podemos hacer, las dos primeras columnas la propiedad float tendrá de valor left. En la última su valor será right. La suma de sus anchos no debe superar al ancho del div que los contiene, de lo contrario, una columna podría caer hacia abajo (digamos que tiene que buscar un sitio donde ponerse).
Para ver más ejemplos de maquetación de paginas web podemos ir a la página de desarrolloweb.
Me despido, espero que resulte de ayuda esta entrada para los lectores. Un saludo!!

martes, 5 de marzo de 2013

Introducción a CSS

Omar Omar
CSS es un lenguaje que se usa para aplicar estilos a los distintos objetos de una página web. Últimamente es la forma de aplicar un formato a un texto, ubicar un elemento en la página, crear una estructura de dos o tres columnas. Antes se hacía desde la propia página usando distintas etiquetas como font junto con sus distintos atributos (face, size, etc.). CSS permite cargar la página HTML sin utilizar etiquetas como font. Cualquier cambio que se haga en el archivo que contiene el código CSS se aplica inmediatamente en la página. Una buena referencia de estilos en cascada la tenemos en Guía de hojas de estilo. Vamos a ver un poco la sintaxis y los elementos de CSS más usados.

Sintaxis


Para aplicar un estilo, se hace sobre una etiqueta presente en la página. Se escribe la etiqueta y entre llaves damos valor a las distintas propiedades, que acabarán cada una con un punto y coma. La sintaxis es:



Formas de crear estilos

Para aplicar estilos, lo podemos hacer desde la propia página o desde un archivo externo.

En el propio fichero html


Para definir un estilo nos colocamos dentro de la etiqueta head donde insertaremos la etiqueta style. Ponemos un ejemplo que incluye un estilo colocado dentro de la propia página:




    Estilos CSS
   









En un fichero externo

Creamos, en primer lugar, un fichero con un procesador como Sublime o como Notepad++. Su extensión será .css para guardarlo. En él aplicaremos las distintas propiedades a las etiquetas. Basta aplicar la sintaxis explicada a cada una de las etiquetas. Una hoja de estilos tiene esta apariencia.


Solo queda relacionar la página web con la hoja de estilos. Nos colocamos dentro de la etiqueta head y tecleamos la etiqueta link:

Así cualquier propiedad que añadimos o modificamos dentro de estilos.css queda reflejado en la página una vez guardados los cambios y actualizado el archivo html. En el ejemplo, la ruta de acceso a la hoja de estilos está en la carpeta CSS.




Propiedades que podemos aplicar con las hojas de estilos

Para comenzar sin algunos estilos predefinidos usamos el * y le aplicamos propiedades de inicio:

* {
margin: 0;
padding: 0;
}

Así todos los márgenes los dejamos a cero (margin) y con padding: 0 quitamos el desplazamiento del texto con respecto al borde izquierdo de su contenedor (normalmente un div). Podemos ver diez técnicas de reseteo en cssblog.

Para aplicar un color de fondo a un div con id contenedor usaremos la propiedad background. Si queremos que tenga color de fondo rojo en la hoja de estilos escribiremos:


#contenedor {
background: red;
}
Si además, queremos que el texto sea blanco también lo podemos hacer de la siguiente forma:


#contenedor {
background: red;
color: #fff;
}


En vez de escribir directamente el color, lo hemos hecho con código hexadecimal y colocando el carácter # antes y sin dejar espacios.

Una propiedad básica del texto es font-family que nos permite definir que tipo de letra aplicamos a un texto determinado. Podemos hacer referencia a varios tipos de letras separados por comas:

font-family: Arial, Helvetica, sans-serif;

Para modificar el tipo de letra usamos la propiedad font-size:

div { font-size: 1em; }


Aquí hemos utilizado el tamaño de letra del propio elemento como referencia. 1em suele equivaler a un tamaño de letra de 12 ptos. Corresponde al ancho de la letra M. Podemos ver más en unidades de medida y con ejemplos.
Si queremos colocar un texto en negrita, estamos modificando el grosor de letra. necesitamos establecer el valor de la propiedad font-weight a bold:

div { font-weight: 1em; }

Para modificar el estilo de letra usaremos font-style:

#tipo { font-style: italic; }

Para este post es suficiente, todas las variantes de estas propiedades las podéis ver en Introducción a CSS que os va permitir trabajar estos estilos con soltura. También se puede aprender con htmlpoint. Seguiremos trabando con CSS. Un saludo.

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...