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

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, elija el objeto de sitio de *** páginas maestras *** .

  2. En la cinta de opciones de *** páginas maestras *** , elija *** página maestra en blanco ***.

  3. Elija la nueva página maestra y, a continuación, en la cinta de opciones de *** páginas maestras *** , elija Editar archivo.

  4. En la parte inferior de SharePoint Designer, elija la pestaña de Código .

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

  6. Guarde la página, elija la pestaña de *** páginas maestras *** , y el nombre de la página maestra 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 el panel de navegación, elija el objeto de sitio de Todos los archivos y, a continuación, en la vista de árbol, seleccione la carpeta de imágenes .

  2. En la cinta de opciones de Todos los archivos , elija Importar archivos, elija un archivo de su elección, y elija el botón de 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, elija el objeto de *** Busque las páginas *** .

  2. En la cinta de opciones de Páginas , elija el botón de Página , elija el tipo de la página de *** ASPX *** , y llame al nuevo archivo mycontentpage1.aspx.

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

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

    Si aparece un mensaje y indica que esta página no contiene ningún regiones que son modificables en modo seguro y no pregunta si desea abrir esta página en modo avanzado, elija el botón de *** Sí *** .

  4. En la parte inferior de la página, elija el botón de 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 el panel de navegación, elija el objeto de Sitio del equipo y, a continuación, en la cinta de opciones de Sitio , elija Guardar como plantilla.

  2. En el cuadro de diálogo de Guardar como plantilla , escriba un nombre de archivo y de la plantilla, active la casilla de *** incluya el contenido *** , y después elija el botón de Aceptar .

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

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

  4. Abrir el menú contextual para el nuevo archivo .wsp y, a continuación Guardar destino como guardarlo en el sistema.

Importar los elementos a Visual Studio

Importe el archivo .wsp en Visual Studio. Una vez importado el contenido, puede personalizarlo, agregar más elementos, y después se implementan.

Para importar elementos del archivo .wsp a Visual Studio

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

  2. En la página de Seleccione los elementos que desea importar , en Módulo en la columna de Tipo , active las casillas de sólo los archivos en la tabla siguiente 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. Elija el botón de Finalizar para importar los elementos seleccionados.

  4. En Explorador de soluciones, elija el nodo de _catalogsmasterpage_, y establezca el valor de la propiedad de Resolución de conflictos de implementación a Automático.

    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 la barra de menú, elija Compilación, 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

  • Last updated on