SharePoint 2010 Step By Step : Customize Master Page(1)

SharePoint Design, which including Master Page,Page Layout and CSS and so on. Next we'll begin our trip to create Site. Let's take a look on the SharePoint 2010's Master Page Layout. Picture below will show you the different elements in Master Page:

 

Label	Function	Description
A	Server  ribbon	The top area of the page is a part Ribbon, whether the content is visible or not is decided by user.
B	Site  Actions	The main menu to manage SharePoint, Only user have permission could operate it.
C	Global  breadcrumbs control	Breadcrumb control on the page
D	Page  State Action button	Edit button on the current page
E	Ribbon  contextual tabs	Display the sites tree view according to the page user is operating.
F	Welcome  menu	Display the Welcome message,view user's information, sign in , sign out. sign in different user, current site setting, and so on.
G	Developer  Dashboard button	When you start using the Dashboard, the page will show the button.
H	Title  logo	Site Logo.
I	Breadcrumb	Including the site title and the position of the user
J	Social  buttons	Tags and notes.
K	Global  navigation	Top link bar, i.e horizontal navigation bar.
L	Search  area	The search input
M	Help  button	SharePoint 2010 come with the link of help
N	Quick  Launch	vertical navigation bar.
O	Tree  View	DIsplay all site contents and level relationships in the current site..
P	Recycle  Bin	Recycle Bin.
Q	All  Site Content	View all site content, you can select the content type throw the dropdown list
R	Body  area	Page content.

If you are able to grasp the above page layout as a whole and relevantly understand the page's elements, next step is to put the element on the different position. Then you can create your own Mater Page. But we can not open the master page in SharePoint Designer, copy and paste the elements.We should design the whole page layout like architectural disign. So the direct way is designing the Master Page in Vsio.

 

After complete the,overall architecture, we need to display the architecture throw HTML.

Open SharePoint 2010 Designer, use DIV  and Table and CSS to realize the Visio drawing. I use the different colors to differ the different functional area.

Then we have completed the basical work of designing Master Page. Next we just put the control on the relrvant position.