From a simple perspective, customizing a SharePoint Internet Publishing Site means creating new page layouts (templates) based on customized master pages. These page layouts and master pages use many resources, such as style sheets, images, …
The Web Designer may start by creating a static HTML storyboard of your site. Then, he will use SharePoint Designer to integrate the static HTML into customized master pages and page layouts, merging the HTML with the server controls required by SharePoint. Some examples of minimal master pages can be found at http://msdn2.microsoft.com/en-us/library/aa660698.aspx . The customized master pages and page layouts created in SharePoint designer will be stored in the site's Master Page Gallery located at /_catalogs/masterpages of the site.
Meanwhile, developers may be busy programming services and components for the site, such as a sophisticated search control, a workflow tracking page or a Virtual Earth mapping web part. Assuming that each development team member (including the designer) has its own stand-alone development environment, there will come a time when the customizations made by the designer must be integrated with those made by the developers.
For the first time "environment synchronization", the designer may just export its Site to a CAB file that should be imported in each developer workstation. But for subsequent synchronizations, it should be far better to just pack the designer's customizations - not the site itself - into a package, and simply deploy that package on each developer workstation. The same approach should be used to publish design updates to a production site.
In fact, the customized design should be seen as a package that could be deployed and applied to any SharePoint site. It should not be just a set of master pages, page layouts, styles and images stored in the libraries (/_catalogs/masterpages, /Style Library, …) of a specific site. Here's when SharePoint Features come in to place.
Like Web Parts, Workflows or just custom Web Forms, SharePoint Web Design Customizations can be packed into SharePoint Feature. Take a look at the C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\FEATURES\PublishingLayouts folder of your SharePoint environment. There you have a good example of a feature created to pack design customizations, including master pages, page layouts, styles and images.
So, to pack your design customization into a SharePoint Feature called MyLayouts, just follow this checklist:
- Create the feature files
Bellow C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\FEATURES, create the following folder tree:
MyLayouts
Images
Styles
MasterPages
PageLayouts
Copy your customized masters pages, page layouts, images and styles to each corresponding folder.
Also copy to MyLayouts folder the Feature.xml and ProvisionedFiles.xml files (use the samples from C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\FEATURES\PublishingLayouts)
- Edit Feature.xml and ProvisionedFiles.xml
Create a new GUID and place it on the Feature.xml file.
Edit the ProvisionedFiles.xml, and reference all your components.
For example, if you have created a GIF file MyImage1.gif, add it to the Images module section. Notice that the GIF should be referenced as "images/MyImage1.gif" in the MyStyleSheet1.css, or as "/StyleLibrary/Images/MyImage1.gif" from the page layouts or master pages.
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="MyMasterPages" Url="_catalogs/masterpage" Path="MasterPages" RootWebOnly="TRUE">
<File Url="My.master" Type="GhostableInLibrary">
<Property Name="ContentType" Value="My Main Master Page" />
<Property Name="MasterPageDescription" Value="My Main Master Page Description" />
</File>
…
</Module>
<Module Name="Images" Url="Style Library/Images" Path="Images" RootWebOnly="TRUE">
<File Url="MyImage1.gif" Name="MyImage1.gif" Type="GhostableInLibrary" />
…
</Module>
<Module Name="Styles" Url="Style Library" Path="Styles" RootWebOnly="TRUE">
<File Url="MyStyleSheet1.css" Type="GhostableInLibrary" />
…
</Module>
</Elements>
- Install and activate the MyLayouts Feature
@set Path=C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\BIN;%PATH%
stsadm -o installfeature -filename MyLayouts\feature.xml
stsadm -o activatefeature -filename MyLayouts\feature.xml –url http://www.yoursite.local
From now on, your design components live in the file system, at C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\FEATURES\MyLayouts, but are also available in the SharePoint site collection http://www.yoursite.local in libraries such as /Style Library and /_catalogs/masterpage. SharePoint "ghosts" those files because of the GhostableInLibrary attribute used in ProvisionedFiles.xml. To update your design components, just edit the files in the file system a do an IIS Recycle.
Finally, to pack and deploy your design customizations to other developer's environment, you just have to copy the folder C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\FEATURES\MyLayouts and install and activate the feature on the target machine. Simple?