Compartir a través de

Tutorial: Importar una página maestra personalizada y una página de sitio con una imagen

  • Artículo

En este tutorial se demuestra cómo importar una página maestra personalizada de SharePoint y una página de sitio que contiene una imagen a un proyecto de SharePoint para Visual Studio.

En este tutorial se muestra cómo llevar a cabo las tareas siguientes:

  • Crear una página maestra personalizada y una página de sitio utilizando una imagen en SharePoint Designer.

  • Exportar una página maestra personalizada, una imagen y una página de sitio a un archivo de solución de SharePoint (.wsp).

  • Importar el archivo .wsp a un proyecto de SharePoint para Visual Studio e implementarlo mediante el proyecto Paquete de importación de la solución de SharePoint.

Nota

Es posible que su equipo muestre nombres o ubicaciones diferentes para algunos de los elementos de la interfaz de usuario de Visual Studio incluidos en las instrucciones siguientes. La edición de Visual Studio que se tenga y la configuración que se utilice determinan estos elementos. Para obtener más información, vea Valores de configuración de Visual Studio.

Requisitos previos

Para completar este tutorial, debe tener los componentes siguientes:

Crear elementos en SharePoint Designer

En este ejemplo se muestra cómo crear tres elementos en SharePoint Designer para la exportación: una página maestra personalizada, una página de sitio que hace referencia a la página maestra personalizada y un archivo de imagen que aparecerá en la página de sitio. La imagen se agrega a la carpeta /images/ de SharePoint.

Para crear una página maestra personalizada en SharePoint Designer

  1. En SharePoint Designer, en el panel de navegación, haga clic en Páginas maestras.

  2. En la cinta de opciones, haga clic en Página principal en blanco.

  3. En la parte inferior de SharePoint Designer, haga clic en la pestaña Código.

  4. Reemplace el marcado existente con el siguiente.

    <%@ Master Language="C#" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html dir="ltr">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<SharePoint:RobotsMetaTag runat="server" __designer:Preview="" __designer:Values="&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl00' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"></SharePoint:RobotsMetaTag>
<title>Web Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder id="ContentPlaceHolderMain" 
        runat="server">
      </asp:ContentPlaceHolder>
</form>
</body>
</html>

  5. Guarde la página como mybasic1.master.

Agregar una imagen a la base de datos de contenido en SharePoint Designer

A continuación puede agregar una imagen para mostrar en la página de sitio. La imagen se implementa en la base de datos de contenido de SharePoint.

Para agregar una imagen a la base de datos de contenido en SharePoint Designer

  1. En la cinta de opciones, haga clic en Todos los archivos y a continuación, en la vista de árbol, seleccione Imágenes.

  2. En la cinta de opciones, haga clic en Importar archivos, seleccione un archivo de su elección y, a continuación, haga clic en Aceptar. En este ejemplo, el archivo se denomina myimg1.png.

    Opcionalmente, puede crear una subcarpeta para ayudar a organizar las imágenes.

  3. Cierre el cuadro de diálogo Importar.

Crear una página de sitio

Esta página de sitio básica usa la página maestra personalizada y muestra la imagen que agregó en el paso anterior.

Para crear una página de sitio

  1. En el panel de navegación, haga clic en Páginas del sitio.

  2. En la cinta de opciones, haga clic en el botón Página y en ASPX. Denomine mycontentpage1.aspx al nuevo archivo.

    Opcionalmente, puede crear una subcarpeta para ayudar a organizar las páginas del sitio.

  3. En la lista, haga clic en MyContentPage1.aspx para abrir la página de propiedades y, a continuación, en la parte inferior de la página, haga clic en el vínculo Editar.

  4. En la parte inferior de la página, haga clic en el botón Código.

  5. Reemplace el marcado existente con el siguiente.

    <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" Inherits="Microsoft.SharePoint.WebControls.LayoutsPageBase" MasterPageFile="../_catalogs/masterpage/mybasic1.master" meta:progid="SharePoint.WebPartPage.Document" %>

<asp:Content ID="Main" ContentPlaceHolderID="ContentPlaceHolderMain" runat="server">
<img alt="My Image" longdesc="My image from images folder" src="../images/myimg1.png" />
</asp:Content>

  6. Guarde la página de sitio actualizada.

Exportar los elementos de SharePoint

Exporte los elementos de SharePoint a un archivo de solución de SharePoint (.wsp).

Para exportar los elementos de SharePoint Designer

  1. En SharePoint Designer, en la barra de navegación, haga clic en Sitio del equipo y, a continuación, en la cinta de opciones, haga clic en Guardar como plantilla.

  2. En el cuadro de diálogo Guardar como plantilla, escriba un nombre de archivo y nombre de plantilla, active la casilla Incluir contenido y, a continuación, haga clic en Finalizar.

    Esto guarda el contenido del sitio en el archivo .wsp.

  3. Una vez exportada la solución, haga clic en el vínculo Galería de soluciones para mostrar la lista de archivos de solución disponibles.

  4. Haga clic en el nuevo archivo .wsp y guárdelo en el sistema.

Importar los elementos a Visual Studio

Importe el archivo .wsp a Visual Studio. Una vez importado el contenido, puede personalizarlo, agregar más elementos y, a continuación, implementarlo.

Para importar elementos del archivo .wsp a Visual Studio

  1. En Visual Studio, cree un proyecto Paquete de importación de la solución de SharePoint.

  2. En la página Seleccione los elementos que desea importar, bajo Módulo en la columna Tipo, seleccione solo los archivos que se muestran en la siguiente tabla para importarlos.

    Nombre de archivo

    Descripción

    _catalogsmasterpage_

    Página maestra personalizada.

    images_

    Archivo de imagen del sistema de archivos de SharePoint.

    SitePages_

    Página de sitio.

  3. Haga clic en Finalizar para importar los elementos seleccionados.

  4. En el Explorador de soluciones, haga clic en la página maestra personalizada y establezca su propiedad Resolución de conflictos de implementación en Automática.

    Esto ayuda a asegurarse de que los conflictos de implementación se resuelvan automáticamente.

  5. Si la nueva página maestra tiene el mismo nombre que una página existente, asegúrese de que la página existente no está marcada como página maestra predeterminada o página maestra personalizada en SharePoint Designer.

    Si una página maestra existente está marcada como página maestra predeterminada o página maestra personalizada, recibirá un error de implementación que indica que no se puede eliminar la página maestra. Para evitar este problema, haga lo siguiente:

    • Si la página maestra existente está establecida como página maestra predeterminada, establezca temporalmente otra página maestra como página maestra predeterminada. Después de implementar los archivos en SharePoint, establezca la nueva página maestra como página maestra predeterminada.

    • Si la página maestra existente está establecida como página maestra personalizada, establezca temporalmente otra página maestra como página maestra personalizada. Después de implementar los archivos en SharePoint, establezca la nueva página maestra como página maestra personalizada.

  6. En el menú Generar, haga clic en Implementar solución.

  7. Abra el sitio de SharePoint para ver los elementos implementados.

Una manera alternativa de importar los archivos a Visual Studio e implementarlos en SharePoint consiste en agregar los archivos a los módulos de Visual Studio. Para obtener más información, vea Cómo: Importar un tema o página maestra y Utilizar módulos para incluir archivos en la solución.

Vea también

Conceptos

Importar elementos de un sitio de SharePoint existente

Otros recursos

Desarrollar soluciones de SharePoint

Crear controles reutilizables para elementos web o páginas de aplicación