I was excited to see a great turnout this weekend for Indy Code Camp (and even more for my presentation :) ). In my presentation, "Designing for SharePoint", I talked about taking a Graphic Design and converting it into a Master Page, Page Layouts and Web Parts to get the vision of the company. Below are some notes and links to sites that should be useful for those looking to follow the same pattern.
Graphic Designs
If you're a designer, you probably already have a graphics program that you use for your designs, but if you are not, then you probably would like some guidance in this area. My preference is Adobe Fireworks which I have used for many years, back when the product was owned by Macromedia. Fireworks is geared for developing graphics for web sites, and can also be used for dealing with photo images, etc. Adobe Photoshop is another graphics program that is more powerful and more expensive than Fireworks. This program is more useful for photo editing and effects, than being geared for the web.
Master Pages
Master Pages: Love them, hate them -- either way they are an intregal part of SharePoint. You need to develop these bad boys so that the top Internet Browsers will show the SharePoint site the same way (for the most part). So, either start with the default.master (can be found by connecting to the SharePoint site via SharePoint Designer, then navigate to _catalogs/masterpages/ directory). WSS will just have the one master page "default.master" and MOSS will have multiple master pages.
Heather Solomon (SharePoint Design Guru) has created a minimal master page. You can download it to start out your new master page. Remember that you will want to keep a hold of all the Content Place Holders of the master page. If you are not going to use them, just put them in a hidden ASP:Panel.
Other parts of the master page that you will want to pay attention to are:
Page Layouts
Page Layouts can also be found in the folder _catalogs/masterpages and are identified by the .ASPX file extension. Page Layouts inherit from a master page, and control structure of Web Part Zones AND are tied to a specific Content Type (Welcome, Article, etc., or a Custom Content Type). These are pretty straight forward as they are a mix of HTML and Sharepoint controls. You can create many page layouts for your SharePoint sites.
Modifying Out of the Box (OOTB) Web Parts
This is one of those things that gets debated by SharePoint developers as to the true use of OOTB Web Parts. Some purists believe that custom web parts should be left to only .NET web parts. Depending on the needs of the web part, .NET could be the way to do. However, if you are looking to extend a web part that can be mostly handled by modifying a DataFormWebPart in SharePoint Designer, this can cut way down on time and frustration from NOT having to develop a .NET web part.
Here is a quick list of how you create and modify an OOTB Web Part to do your bidding on SharePoint.
1) Open SharePoint Designer and connect to your SharePoint site
2) Click on File > New and create a new .ASPX page that inherits from your Master Page
3) In the new page, go into the code view and create a new <DIV> tag (for Table)
4) (In Design View) Click in the center of your new tag so the cursor is within your tag
5) Click on Insert > SharePoint > Web Part Zone (must be in Design View)
6) Click on DataFormWebPart > Insert to insert a new DataFormWebPart
... Follow the instructions on connecting to the datasource in SharePoint Designer
7) If you want to add columns, you can by right-clicking on any of the column headers you want, and choosing to insert a column to the right or left
8) At this point, before you do anything else, you should hop in the code and look for "ListID" and replace this with "ListName". Also, you will want to find the corresponding "ListID" "Guid" and replace this with the actual list name. Doing this will ensure that this web part can be deployed across different environment whereas a ListID and Guid would fail.
9) Click in the header of the web part so it's all highlighted
10) Click on File > Export > Save Web Part > To Site Gallery (this will import the current web part into the Site Gallery on your SharePoint server -- it puts it in the "Miscellaneous" category by the way)
That's it. If you have any questions, feel free to contact me.
:)
