Home > SharePoint Server > การสร้าง Custom Master Page ใน SharePoint 2007 อย่างง่าย

การสร้าง Custom Master Page ใน SharePoint 2007 อย่างง่าย


ผมได้รับคำถามบ่อยๆ เกี่ยวกับการสร้าง Master Page ใน SharePoint ว่าจะสร้างยังไงดี เพราะว่าค่อนข้างที่จะแตกต่างจากการสร้าง master page ใน asp.net

ในบทความนี้ผมจะแนะนำวิธีการง่ายๆ ในการสร้าง master page ใน sharepoint โดยจะตัดสิ่งที่ซับซ้อนต่างๆ ออกไปให้เหลือสิ่งที่จำเป็นอย่างน้อยที่สุดเท่าที่จะทำได้ครับ โดยมีขั้นตอนง่ายๆ ดังนี้ครับ

 

1. สร้าง master page

<%@ Master Language=”C#” %>
<%@ Register Tagprefix=”SharePoint” Namespace=”Microsoft.SharePoint.WebControls” Assembly=”Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>
<%@ Register Tagprefix=”Utilities” Namespace=”Microsoft.SharePoint.Utilities” Assembly=”Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>
<%@ Import Namespace=”Microsoft.SharePoint” %>
<%@ Register tagprefix=”WebPartPages” namespace=”Microsoft.SharePoint.WebPartPages” assembly=”Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>
<%@ Register tagprefix=”SharePoint” namespace=”Microsoft.SharePoint.WebControls” assembly=”Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>
<%@ Register TagPrefix=”wssuc” TagName=”Welcome” src=”~/_controltemplates/Welcome.ascx” %>
<%@ Register TagPrefix=”PublishingSiteAction” TagName=”SiteActionMenu” src=”~/_controltemplates/PublishingActionMenu.ascx” %>
<html dir=”ltr”>

<head runat=”server”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<SharePoint:RobotsMetaTag runat=”server”></SharePoint:RobotsMetaTag>
<title>Untitled 1</title>
<asp:ContentPlaceHolder id=”head” runat=”server”>
</asp:ContentPlaceHolder>
<link rel=”stylesheet” type=”text/css” href=”/my.css”>
</head>

<body>

<form id=”form1″ runat=”server”>
    <WebPartPages:SPWebPartManager runat=”server” id=”WebPartManager”>
    </WebPartPages:SPWebPartManager>
    <div id=”wrapper”>
        <div id=”header”>
            This is the Header<br/>
            <wssuc:Welcome id=”IdWelcome” runat=”server” EnableViewState=”false”>
            </wssuc:Welcome></div>
        <div id=”navigation”>
            This is the Navigation<br/>
            <PublishingSiteAction:SiteActionMenu runat=”server” /></div>
        <div id=”leftcolumn”>
            <p>Left Column</p>
        </div>
        <div id=”content”>
            <p>This is the main content</p>
            <asp:ContentPlaceHolder id=”PlaceHolderMain” runat=”server”>
    </asp:ContentPlaceHolder>
        </div>
        <div id=”footer”>
            <p>This is the Footer</p>
        </div>
    </div>
</form>

</body>

</html>
 

2. สร้าง CSS file

* { padding: 0; margin: 0; }
 
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
}
 
p {
padding: 10px;
}
 
#wrapper {
margin: 0 auto;
width: 1000px;
}
 
#content {
float: left;
color: #333;
background: #FFFFFF;
height: 350px;
width: 700px;
display: inline;
}
 
#header {
color: #333;
width: 1000px;
float: left;
height: 50px;
background: #888888;
}
 
#footer {
width: 1000px;
height: 25px;
clear: both;
color: #333;
background: #888888;
}
 
#navigation {
float: left;
width: 1000px;
height: 50px;
color: #333;
background: #8AA1B6;
}
 
#leftcolumn {
color: #333;
background: #EBE3CD;
height: 350px;
width: 300px;
float: left;
}
 

3. สร้าง page aspx

<%@ Page Language=”C#” masterpagefile=”My.master” %>
<asp:Content id=”Content1″ runat=”Server” contentplaceholderid=”PlaceHolderMain”>
    <h1>Hello, world</h1>
</asp:Content>

เมื่อรันแล้วก็จะได้ผลลัพธ์ตามรูปครับ

image
 

หลักสูตรอบรม SharePoint (Click)

Categories: SharePoint Server
  1. January 12, 2011 at 15:02

    อาจารย์ครับ
    อยากให้อาจารย์ช่วยเขียนเรื่องเกี่ยวกับการ Customise Theme ใน Moss2007 สักนิดครับ เพื่อเป็นวิทยาทานครับ ..

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: