Crear estilos para el editor HTML

Importante:  Este artículo se ha traducido con traducción automática; vea la declinación de responsabilidades. Para su referencia, puede encontrar la versión en inglés de este artículo aquí.

Con un sitio de configuración de Microsoft Office SharePoint Server 2007, los propietarios de contenido pueden crear y actualizar las páginas Web del sitio usando únicamente un explorador Web. Por ejemplo, un jefe de departamento puede usar un explorador para exponer directamente en el sitio Web anuncios y otro tipo de información como la que se muestra en la siguiente ilustración.

Página de publicación en el explorador

El desarrollador o diseñador de un sitio Web puede ayudar a los autores de contenido a mejorar la apariencia de las páginas que creen mediante la creación de estilos que se pueden aplicar a determinadas partes de las páginas creadas a partir de diseños de página. La creación de estilos personalizados también ayuda a estandarizar la apariencia y el estilo de esas páginas. En este artículo se muestra cómo un desarrollador o diseñador Web puede usar Microsoft Office SharePoint Designer 2007 para crear estilos personalizados que se pueden aplicar a las páginas de publicación creadas o modificadas en el explorador.

Importante: Este artículo se aplica únicamente a los sitios ubicados en un servidor que ejecute Office SharePoint Server 2007. Además, debe estar activada la publicación en el sitio de nivel superior de la colección de sitios. Asimismo, debe disponer de permisos de edición para el sitio de nivel superior para poder abrir y modificar los diseños de página.

En este artículo

¿Cómo se usa el Editor HTML en un sitio de publicación?

Crear estilos para el Editor HTML

¿Cómo se usa el editor HTML en un sitio de publicación?

Para poder crear estilos personalizados que se van a aplicar a las páginas de publicación, es preciso comprender algunos conceptos clave de Office SharePoint Server 2007, que se resumen a continuación.

¿Cuál es la relación entre las páginas de publicación y los diseños de página?

Los diseños de página son plantillas de página que controlan la apariencia de una página, qué campos de página y de contenido están disponibles, y exactamente qué elementos (como listas y bibliotecas) deben estar presentes en la página. Por ejemplo, se puede configurar un diseño de página para informes de viajes, otro diseño de página para artículos de boletines y un tercer diseño de página para actualizaciones de planes. Los usuarios autorizados podrán crear nuevas páginas de publicación basadas en estos diseños de página. Cada página que creen tendrá un formato coherente según el tipo de contenido. Los usuarios podrán crear páginas de publicación en los exploradores, donde podrán seleccionar un diseño de página cada vez que creen la página.

Cuadro de diálogo que muestra una lista de los diseños de páginas de publicación

Diseños de página se pueden modificar en Office SharePoint Designer 2007. Para obtener más información, vea el artículo Personalizar un diseño de página de publicación.

¿De dónde procede el formato de los diseños de página?

El formato de los diseños de página procede de las páginas maestras, que son plantillas de página que definen las áreas de contenido compartido (como encabezados, pies de página y exploración izquierda) y que usan hojas de estilos para controlar el formato de texto, hipervínculos, celdas, tablas y otros muchos elementos. El formato de los diseños de página también puede proceder de las hojas de estilos aplicadas directamente a los diseños. Por ejemplo, un diseño de página puede obtener las reglas de formato iniciales de una página maestra, pero siempre se pueden adjuntar otras hojas de estilos al diseño de página para definir con mayor precisión el formato de las páginas creadas a partir de ese diseño de página. Por ejemplo, puede que la página maestra en la que se basa un diseño de página especifique que todo el texto normal tenga la fuente Verdana, pero se puede adjuntar una hoja de estilos al diseño de página que especifique que todas las páginas asociadas tengan Arial como fuente de texto normal. Todos los formatos y marcas de una página de publicación, salvo en el caso de los campos de contenido, proceden directamente del diseño de página a partir del cual se creó.

¿Cómo se modifica el contenido en las páginas de publicación?

Las páginas de publicación se crean en el explorador. Tras su creación, se pueden modificar las páginas. Para ello, vaya a la página en cuestión, haga clic en el menú Acciones del sitio y, a continuación, haga clic en Editar página.

Menú Acciones del sitio con el comando Editar página

Cuando se abra la página, haga clic en Editar contenido para abrir el editor HTML y modificar los campos de texto enriquecido.

Comando Editar contenido en una página abierta

Nota: Los campos sin texto enriquecido tienen editores propios; por ejemplo, un campo de fecha tiene su propio editor.

Se abre el editor HTML de modo que puede agregar o modificar contenido, cambiar manualmente las fuentes y el formato, o bien, seleccionar otras muchas opciones. Para aplicar un estilo a un texto, seleccione el texto, haga clic en Estilos y, a continuación, haga clic en el estilo que desee aplicar.

Editor HTML en el que se muestra la lista Estilos

¿De dónde proceden los estilos del editor HTML?

Los estilos disponibles en el editor HTML proceden de dos hojas de estilos ubicadas en el directorio _layouts del sitio o subsitio:

  • HtmlEditorCustomStyles.css define el formato de los estilos personalizados y está ubicada en:

    http://your_site/_layouts/1033/styles/HtmlEditorCustomStyles.CSS

  • HtmlEditorTableFormats.css define el formato de las tablas y está ubicada en:

    http://your_site/_layouts/1033/styles/HtmlEditorTableFormats.CSS

Dado que estas hojas de estilos están ubicadas en el directorio protegido _layouts del sitio, no se pueden modificar en Office SharePoint Designer 2007. Sin embargo, se pueden reemplazar los estilos de estas hojas de estilos aplicando estilos adicionales al diseño de página usado para crear las páginas de publicación.

Volver al principio

Crear estilos para el editor HTML

Si desea crear nuevos estilos para el editor HTML, abra el sitio en Office SharePoint Designer 2007 y siga los procedimientos que se describen a continuación.

Buscar y abrir el diseño de página

Si ya ha creado un diseño de página y ahora desea crear nuevos estilos de modo que estén disponibles para su uso en el editor HTML en el explorador, busque y abra el diseño de página. Para abrirlo, haga doble clic en el diseño de página o en cualquier página de publicación creada a partir de ese diseño de página.

  1. En Office SharePoint Designer 2007, abra el sitio que contenga el diseño de página que desee modificar.

  2. En la Lista de carpetas, busque una página que use el diseño de página al que desee aplicar un nuevo estilo y, a continuación, haga doble clic en la página.

    Nota: Las páginas de publicación se almacenan en la biblioteca de documentos Páginas del sitio. Haga doble clic en una página de publicación para buscar y abrir rápidamente el diseño de página al que está asociada la página de publicación. Si conoce el nombre del diseño de página para el que desea crear un nuevo estilo, haga doble clic en ese diseño de página en vez de la página.

    Lista de carpetas con mensaje sobre la edición de la página o del diseño de página subyacente

    Dado que las páginas de publicación se pueden modificar únicamente en el explorador, aparece un mensaje en el que se pregunta si desea modificar la página en el explorador o modificar el diseño de página subyacente.

  3. Haga clic en Editar diseño de página.

    Se abrirá el diseño de página.

Reemplazar un estilo existente

Si desea reemplazar un estilo existente, puede copiarlo desde HtmlEditorCustomStyles.css o HtmlEditorTableFormats.css a otra hoja de estilos utilizada por la página y, a continuación, modificar el estilo. Dado que las hojas de estilos ubicadas en el directorio _layouts se aplican en primer lugar, los estilos de cualquier otra hoja de estilos usada por el diseño de página reemplazan los estilos de HtmlEditorCustomStyles.css o HtmlEditorTableFormats.css.

  1. En el explorador Web, vaya a la hoja de estilos de la que desea copiar uno o varios estilos escribiendo una de las siguientes ubicaciones en la barra Dirección del explorador:

    http://your_site/_layouts/1033/styles/HtmlEditorCustomStyles.CSS

    —O BIEN—

    http://your_site/_layouts/1033/styles/HtmlEditorTableFormats.CSS

  2. Cuando reciba un mensaje en el que se pregunta qué desea hacer con el archivo, haga clic en Abrir.

    Se abrirá la hoja de estilos en Office SharePoint Designer 2007.

  3. Seleccione el estilo que desee modificar, haga clic en él con el botón secundario del mouse (ratón) y, a continuación, haga clic en Copiar en el menú contextual.

    Hoja de estilos con el menú contextual y el comando Copiar

  4. En Office SharePoint Designer 2007, abra el (o vuelva al) diseño de página para el que desea reemplazar el estilo y, a continuación, haga clic en Opciones en el panel de tareas Administrar estilos.

    Nota: Si no ve el panel de tareas Administrar estilos, en el menú Paneles de tareas, haga clic en Administrar estilos.

  5. Asegúrese de que está seleccionada la opción Mostrar estilos utilizados en la página actual.

    Menú Opciones con el comando Mostrar estilos utilizados en la página actual seleccionado

  6. En el panel de tareas Administrar estilos, haga doble clic en una de las hojas de estilos utilizadas en esta página, como pageLayout.css, para abrirla y modificarla.

    Cada hoja de estilos aplicada a la página actual aparece como un encabezado de sección en la lista Estilos CSS del panel de tareas Administrar estilos. Puede hacer doble clic en el encabezado de cualquier hoja de estilos para modificar esa hoja de estilos.

  7. Vaya a la parte inferior de la hoja de estilos, haga clic con el botón secundario del mouse en el lugar donde desee pegar el estilo y, a continuación, haga clic en Pegar en el menú contextual.

  8. Modifique el estilo.

    Nota: El panel de tareas Propiedades de CSS ofrece un enfoque más visual para modificar el estilo. Si no ve este panel de tareas, en el menú Paneles de tareas, haga clic en Propiedades de CSS.

  9. Para guardar la hoja de estilos, en el menú Archivo, haga clic en Guardar.

La próxima vez que use el editor HTML para modificar un artículo creado a partir de este diseño de página, el estilo modificado estará disponible y aparecerá en la lista Estilos.

Lista de estilos en la que aparece el estilo modificado

Crear un estilo nuevo

También puede crear un nuevo estilo e incluirlo en la lista Estilos en el editor HTML. Dado que es más fácil usar como punto de partida un estilo existente que escribir un estilo nuevo, en esta sección se muestra cómo hacerlo copiando un estilo existente y, a continuación, cambiando su nombre.

  1. En el explorador Web, vaya a la hoja de estilos de la que desea copiar estilos escribiendo una de las siguientes ubicaciones en la barra Dirección del explorador:

    http://your_site/_layouts/1033/styles/HtmlEditorCustomStyles.CSS

    —O BIEN—

    http://your_site/_layouts/1033/styles/HtmlEditorTableFormats.CSS

  2. Cuando reciba un mensaje en el que se pregunta qué desea hacer con el archivo, haga clic en Abrir. Se abrirá la hoja de estilos en Office SharePoint Designer 2007.

  3. Seleccione el estilo que desee modificar, haga clic en él con el botón secundario del mouse (ratón) y, a continuación, haga clic en Copiar en el menú contextual.

    Hoja de estilos con el menú contextual y el comando Copiar

  4. En Office SharePoint Designer 2007, abra el (o vuelva al) diseño de página al que desee agregar el nuevo estilo y, a continuación, haga clic en Opciones en el panel de tareas Administrar estilos.

    Nota: Si no ve el panel de tareas Administrar estilos, haga clic en Paneles de tareas y, a continuación, haga clic en Administrar estilos.

  5. Asegúrese de que está seleccionada la opción Mostrar estilos utilizados en la página actual.

    Menú Opciones con el comando Mostrar estilos utilizados en la página actual seleccionado

  6. En el panel de tareas Administrar estilos, haga doble clic en una de las hojas de estilos utilizadas en esta página, como pageLayout.css, para abrirla y modificarla.

    Cada hoja de estilos aplicada a la página actual aparece como un encabezado de sección en la lista Estilos CSS del panel de tareas Administrar estilos. Puede hacer doble clic en el encabezado de cualquier hoja de estilos para modificar esa hoja de estilos.

  7. Vaya a la parte inferior de la hoja de estilos, haga clic con el botón secundario del mouse en el lugar donde desee pegar el estilo y, a continuación, haga clic en Pegar en el menú contextual.

  8. Modifique el estilo.

    Debe cambiar el nombre del estilo si no desea reemplazar el estilo existente que ha copiado. Por ejemplo, si desea que el nuevo estilo se denomine redHeadline, cambie el siguiente código CSS.

.ms-rteCustom-ArticleTitle, .ArticleTitle{font-weight: bold;font-family: Arial;font-size: 14pt;color: #8C0000;text-transform: capitalize;}

Al siguiente código.

.ms-rteCustom-redHeadline, .redHeadline{font-weight: bold;font-family: Arial;font-size: 14pt;color: #8C0000;text-transform: capitalize;}

Nota: El panel de tareas Propiedades de CSS ofrece un enfoque más visual para modificar el estilo. Si no ve este panel de tareas, en el menú Paneles de tareas, haga clic en Propiedades de CSS.

  1. Para guardar la hoja de estilos, en el menú Archivo, haga clic en Guardar.

    La próxima vez que use el editor HTML para modificar un artículo creado a partir de este diseño de página, el estilo modificado estará disponible y aparecerá en la lista Estilos.

    Lista de estilos en la que aparece el estilo modificado

Volver al principio

Nota: Declinación de responsabilidades de traducción automática: Este artículo se ha traducido con un sistema informático sin intervención humana. Microsoft ofrece estas traducciones automáticas para que los hablantes de otros idiomas distintos del inglés puedan disfrutar del contenido sobre los productos, los servicios y las tecnologías de Microsoft. Puesto que este artículo se ha traducido con traducción automática, es posible que contenga errores de vocabulario, sintaxis o gramática.

Ampliar sus conocimientos
Explorar los cursos
Obtener nuevas características primero
Únase a los participantes de Office Insider

¿Le ha sido útil esta información?

¡Gracias por sus comentarios!

Gracias por sus comentarios. Quizá le interese ponerse en contacto con uno de nuestros agentes de soporte de Office.

×