Cómo proporcionar un esquema de documento con css3
El uso de CSS3 para crear un esquema del documento es útil cuando una página contiene una gran cantidad de material y desea que el usuario navegar fácilmente. El esquema se basa en las distintas etiquetas suministrados por el usuario. El método actual de la creación de un esquema del documento es el uso de la
mediante las etiquetas.
Este enfoque funciona muy bien cuando el material proviene de la misma página o tiene control sobre el formato del contenido. No funciona tan bien cuando el contenido proviene de otro lugar, por lo que los grupos de estándares tenían que llegar a una forma completamente nueva de hacer las cosas.
El siguiente procedimiento demuestra una técnica para añadir un esquema a una página que ya contiene un menú. Se utiliza la navegación como punto de partida.
Abre el archivo navigation.html y añadir el siguiente código al final de la
sección (después del menú existente).Video: 17.Word 2010: Esquemas y Tablas de contenido
- La partida principal 1
- Sub rúbrica 1
- Sub Título 2
- La partida principal 2
- Sub rúbrica 3
- Sub Título 4
Guarde el archivo HTML.
Navigation.CSS abrir y escribe los siguientes estilos al final del archivo.
#DocOutline {font-family: Arial, Helvetica, sans-serif-font-size: 14px; ancho: 145px; altura: 800px;} # DocOutline ul {margin-bottom: 20px; list-style: none; margin-left: -40px;} # DocOutline ul ul {margin-left: -20px;} # DocContent {margin-top: -800px; margin-left: 150px;}El foco principal está en el esquema del documento donde se necesita para proporcionar enlaces con formato al contenido que se encuentra en el resto de la página. Observe que el contorno se ajusta a una altura específica. La razón de esta configuración es que sea más fácil colocar el contenido del documento una vez que se muestran los enlaces.
El ejemplo se establece la propiedad de estilo list-style #DocOutline ul a ninguno. Se podía utilizar la misma facilidad con los números, letras o cualquier otro índice esquematización lo prefiere.
Esta lista media automáticamente guión de la distancia de los elementos individuales del menú que creó anteriormente. Para colocar los enlaces en el lado izquierdo de la página, debe revertir la sangría de la lista estableciendo margen izquierda a -40px, que es la mitad de la anchura de 80px de los elementos de menú individuales.
Cada nivel requerirá alguna cantidad adicional de muesca de modo que el usuario puede ver los niveles relativos de cada entrada. El #DocOutline ul ul cambia la sangría para los encabezados de segundo nivel. Si usted tuvo un tercer nivel de las partidas, te crear un estilo ul ul ul #DocOutline formatearlo.
El contenido del documento se iniciará después de que el esquema del documento a no ser que una de estas dos cosas. En primer lugar, puede utilizar columnas reales. Sin embargo, esta funcionalidad requiere CSS3. En segundo lugar, puede utilizar pseudo-columnas. Se establece el valor de la propiedad margin-top igual a la altura del esquema del documento.
La técnica se muestra en este ejemplo funciona con cualquier navegador que soporte completamente CSS. Tenga en cuenta que también debe establecer el margen izquierdo en un valor que es igual a la anchura del esquema del documento (además de unos pocos píxeles para el espaciado.
Guarde el archivo CSS.
Video: Curso de Microsoft Word 2010. p15 crear esquema
Actualizar el ejemplo de navegación.
Se ve el esquema del documento y el contenido asociado. Este esquema funciona realmente - puede hacer clic en los enlaces para ir a las distintas cabeceras que se presentan en el esquema.
La partida principal 1
material introductorio
Sub rúbrica 1
Artículo
Sub Título 2
Artículo
La partida principal 2
material introductorio
Sub rúbrica 3
Artículo
Sub Título 4
Artículo
Las entradas consisten en un esquema del documento y el contenido asociado. El esquema sigue específicamente el
y Los objetos en este ejemplo. Existen métodos para la generación de este tipo de contenido de forma automática, pero todos ellos requieren codificación
Este es un caso en que el uso de CSS implica un cierto codificación manual que no se tendría que realizar cuando se utiliza otras técnicas, como la inclusión de javascript. Sin embargo, la ventaja es que el ejemplo no tendrán ningún problema con cualquier navegador que soporte CSS.