Subtitles of the Movie

ÿþ [00:00:00.0] En este tutorial aprenderá cómo crear una barra de navegación CSS, como se puede ver en el ejemplo terminado. [00:00:10.0] Si vemos la página en diseño de vista, vemos que ni siquiera tenemos una imagen cercana del efecto [00:00:17.0] que estamos intentando lograr. Por esta razón, vamos a crear nuestros estilos en el editor CSS externo, Top Style Pro. [00:00:24.0] Con Top Style Pro usted puede poner su código CSS usando el Style Inspector o el Style Insight. Lo último que hacemos [00:00:40.0] antes de empezar, es especificar la página que queremos ver en la ventana de salida. Top Style Pro le brinda flexibilidad de [00:00:48.0] usar Internet Explorer o Netscape Gecko como previsualizador interno. Gecko es el buscador de Netscape basado en prototipos, [00:00:57.0] el cual está incorporado en Netscape 7, Mozilla etc. Así que para especificar la página, voy a hacer clic en este ícono, escojo el archivo y presiono Open. [00:01:08.0] Si volvemos a DreamWeaver MX, vemos que para economizar tiempo, previamente he adicionado el elemento del menú div. [00:01:18.0] Si volvemos a mirar el CSS, vemos que este está dibujado con un fondo gris, tiene un borde inferior fijado en negro, [00:01:27.0] un valor de margen izquierdo y algo de relleno. Históricamente, al crear barras de navegación, muchos desarrolladores Web se han valido de [00:01:35.0] imágenes que son intercambiadas usando código en escritura java. Sin embargo, el uso de CSS nos brinda otra alternativa. Y esta consiste [00:01:43.0] en usar listas. Antes de seguir, me gustaría señalar que esta técnica está basada en el excelente artículo "Taming lists" de Mark Newhouse [00:01:53.0] disponible en <alistapart.com>. Volviendo al documento marcado, podrá ver la lista que he creado previamente. Usando [00:02:02.0] un selector descendiente; vamos a dar estilo a la etiqueta 'ul', la cual es una descendiente de cualquier Div cuya identificación es igual a "menú". [00:02:10.0] Para ahorrar tiempo, previamente he preparado el código, el cual copiaré y pegaré rápidamente. El siguiente paso es colocar [00:02:25.0] otro selector descendiente el cual dará estilo a los ítems de la lista en el menú. Usted ya ha visto con anterioridad el margen, relleno y estilo de lista. [00:02:39.0] Pero lo que usted no ha visto es la propiedad Display ni el valor Inline. Como puede ver en la ventana de vista previa, [00:02:47.0] esto hace que todos los ítems de la lista aparezcan en una línea. Si va a hacer esto en DreamWeaver MX, usted debería seleccionar Inline [00:02:58.0] en la pantalla emergente localizada en el bloque de categoría. Todo lo que tenemos que hacer es crear estilos para cada uno de los [00:03:06.0] diferentes estados de enlace, justo como hicimos al crear enlaces para el panel de enlaces. Todo lo que estamos haciendo aquí es usar algunas de las [00:03:17.0] propiedades de la lista que ha encontrado previamente. Para lograr el efecto rollover, simplemente cambiamos el color de [00:03:28.0] fondo para los ítems en el estado de enlace Hover. [00:03:33.0] [00:03:34.0]