Visualforce Pages Standard Format

Question

I want all my visualforce pages to follow a standard format...please find the image. Is there any way to achieve this?

Answer 1

If i understand the question correctly i think the following visualforce tags will be helpful

1)Apex:composition

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_composition.htm

2)Apex:define

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_define.htm

3)Apex:insert

You can develop headers separately,footer separately and the side portion separately using different separate templates and then use apex:composition in your main page.

Best examples will be some code that comes in developer org for sample site page .

Assume your template page as below .

Template Page:

<apex:page showHeader="false" id="SiteTemplate">
<apex:stylesheet value="{!URLFOR($Resource.SiteSamples, 'SiteStyles.css')}"/>
 <apex:insert name="header">
  <c:SiteHeader />
   <hr/>
 </apex:insert>
<apex:insert name="body"/>
 <apex:insert name="footer">
<hr/>
<c:SiteFooter />
<site:googleAnalyticsTracking />
 </apex:insert>

observe header and footer are components

Header compoenet:

apex:component id="headerComponent">
  <apex:panelGrid cellpadding="0" cellspacing="0" width="98%" border="0" columns="2" style="text-align: left;" id="theHeader">
<apex:image url="{!$Site.Prefix}/img/sites/force_logo.gif" style="align: left;" alt="Salesforce" width="233" height="55" title="Salesforce"/>
<apex:panelGrid cellpadding="0" cellspacing="0" width="100%" border="0" columns="1" style="text-align: right;" id="Links">
  <apex:panelGroup rendered="{!AND(ISPICKVAL($User.UserType,'Guest'), $Site.LoginEnabled)}">
    <apex:outputLink value="/site/SiteLogin.apexp">{!$Label.site.login_button}</apex:outputLink>
    <apex:outputText value=" | "/>
    <apex:outputLink value="/site/ForgotPassword.apexp">{!$Label.site.forgot_your_password_q}</apex:outputLink>
    <apex:outputText value=" | " rendered="{!$Site.RegistrationEnabled}"/>
    <apex:outputLink value="/site/SiteRegister.apexp" rendered="{!$Site.RegistrationEnabled}">{!$Label.site.new_user_q}</apex:outputLink>
  </apex:panelGroup>
  <apex:outputLink value="{!$Site.Prefix}/secur/logout.jsp" rendered="{!NOT(ISPICKVAL($User.UserType,'Guest'))}">{!$Label.site.logout}</apex:outputLink>
</apex:panelGrid>

Similarly we have footer component

Now here is the main page as how this templates can be used

Main Page:

<apex:page id="loginPage" showHeader="false" title="{!$Label.site.site_login}">
<apex:composition template="{!$Site.Template}">
<apex:define name="body">  
  <center>
    <apex:panelGrid bgcolor="white" columns="1"> 
      <br/>
      <br/>
      <apex:panelGrid width="758" cellpadding="0" cellspacing="0" bgcolor="white" columns="1" styleClass="topPanelContainer"> 
        <br/>
        <apex:outputPanel layout="block" styleClass="topPanel">
          <apex:panelGrid width="758" cellpadding="0" cellspacing="0" bgcolor="white" columns="2"> 
            <apex:image url="{!URLFOR($Resource.SiteSamples, 'img/clock.png')}"/>
            <apex:panelGroup >
              <br/>
              <apex:outputText styleClass="title" value="{!$Label.site.login}"/>
              <br/>
              <c:SiteLogin id="siteLogin"/>
              <br/>
            </apex:panelGroup>
          </apex:panelGrid> 
         </apex:outputPanel>
        <c:SitePoweredBy />
      </apex:panelGrid> 
   </apex:panelGrid>
  </center>
  <br/>
</apex:define>

Observe how template page is used as apex composition in main page

Answer 2

It's an old question but anyone running into this should consider also reading this.

apex:include vs. Visualforce component, when and why?

It basically says to avoid apex:composition and go for components instead.