modulestwo中的main.jsp的建構過程
第一步建構頭部區域
<head>
<title><cms:property name="Title" file="search" /></title>
<meta name="description" content="<cms:property name="Description" file="search" />" >
<meta name="keywords" content="<cms:property name="Keywords" file="search" />" >
<meta http-equiv="Content-Type" content="text/html; charset=<cms:property name="content-encoding" file="search" default="<%= OpenCms.getSystemInfo().getDefaultEncoding() %>"/>" >
<meta name="robots" content="index, follow" >
<meta name="revisit-after" content="7 days" >
<!-- insert stylesheets needed for the template -->
<c:forEach items="${cms.stylesheets}" var="cssFile">
<link href="<cms:link>${cssFile}</cms:link>" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css">
</c:forEach>
<link href="<cms:link>../resources/css/style.css?preset=${cms.presetPath}&style=${cms.stylePath}</cms:link>" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css">
<!--[if lte IE 6]>
<link href="<cms:link>%(link.weak:/system/modules/com.bestsoft/resources/css/patch_ie.css:8ffaafcc-e131-11dc-bbcd-3bdd2ea0b1ac)</cms:link>" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css">
<![endif]-->
<!-- insert individual stylesheet -->
<c:set var="stylesheet"><cms:property name="stylesheet" file="search"/></c:set>
<c:if test="${!empty stylesheet}">
<link href="<cms:link>${stylesheet}</cms:link>" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css">
</c:if>
<cms:editable/>
</head>
主要是用CmsTemplateLayout類去讀取樣式表和基本架構的内容
第二步構件body區
1）頭部導航區域
<div id="topnav">
<a href="#content" target="_blank" rel="external nofollow" class="skip">Skip to Main Content</a>
<c:if test="${!cms.options.value['TopNav'].isEmptyOrWhitespaceOnly}">
<c:out value="${cms.options.value['TopNav']}" escapeXml="false" />
</c:if>
</div>
<c:if test="${!cms.options.value['Header'].isEmptyOrWhitespaceOnly}">
<c:out value="${cms.options.value['Header'].resolveMacros}" escapeXml="false" />
</c:if>
</div>
<!-- end: header -->
<!-- begin: main navigation -->
<c:choose>
<c:when test="${!empty cms.styleValue['nav.main']}">
<cms:include file="${cms.styleValue['nav.main']}"/>
</c:when>
<c:otherwise>
<!-- <cms:include file="%(link.weak:/system/modules/com.bestsoft/elements/menu/nav_style2.jsp:ee5498d9-dbe4-11dc-b087-3bdd2ea0b1ac)"/> -->
</c:otherwise>
</c:choose>
<!-- end: main navigation -->
<!-- begin: breadcrumb -->
<div id="breadcrumb">
<cms:include file="%(link.weak:/system/modules/com.bestsoft/elements/breadcrumb.jsp:e72c6f1c-dbb3-11dc-af66-3bdd2ea0b1ac)" />
</div>
<!-- end: breadcrumb -->
讀區站點config檔案中的option設定，主要内容有頭部導航和頭部圖檔和底部的logo；
用resources中的nav_style.jsp與breadstrumb.jsp去動态導航；
第三步建構左部區域
<div id="col1">
<div id="col1_content" class="clearfix">
<c:if test="${cms.presetValue['column.left.visible'] == 'true'}">
<!-- include the left navigation menu -->
<c:if test="${cms.presetValue['nav.left.visible'] == 'true'}">
<cms:include file="%(link.weak:/system/modules/com.bestsoft/elements/menu/nav_left.jsp:ee1ea4f4-d97c-11dc-bc65-3bdd2ea0b1ac)" />
</c:if>
<!-- include the boxes on the left side -->
<cms:include file="%(link.weak:/system/modules/com.bestsoft/elements/boxes.jsp:622548e8-d886-11dc-8ec1-3bdd2ea0b1ac)">
<cms:param name="orientation" value="left" />
<cms:param name="config" value="${cms.configPath}" />
</cms:include>
</c:if>
</div>
</div>
讀取架構檔案，由nav_left.jsp去動态建立左邊的内容
第四步，建構右部區域
<div id="col3">
<div id="col3_content" class="clearfix">
<c:catch>
<c:set var="page" value="${cms:vfs(pageContext).readXml[cms:vfs(pageContext).context.uri]}" />
</c:catch>
<!-- include the boxes on the right side -->
<c:if test="${cms.presetValue['column.right.visible'] == 'true'}">
<cms:include file="%(link.weak:/system/modules/com.bestsoft/elements/boxes.jsp:622548e8-d886-11dc-8ec1-3bdd2ea0b1ac)">
<cms:param name="orientation" value="right" />
<cms:param name="config" value="${cms.configPath}" />
</cms:include>
</c:if>
</div>
</div>
同樣由preset指定，由boxes.jsp來建立内容
第五步，建構中間和底部區域
<div id="col2">
<div id="col2_content" class="clearfix">
<!-- anchor for accessible link to main content -->
<a id="content" name="content"></a>
</cms:template>
<cms:template element="body">
<cms:include element="body" editable="true"/>
</cms:template>
<cms:template element="foot">
<!-- include the second body from an xml page, if available -->
<c:if test="${page.hasValue['body2']}">
<cms:include element="body2" editable="true"/>
</c:if>
<!-- include the boxes in the center -->
<cms:include file="%(link.weak:/system/modules/com.bestsoft/elements/boxes.jsp:622548e8-d886-11dc-8ec1-3bdd2ea0b1ac)">
<cms:param name="orientation" value="center" />
<cms:param name="config" value="${cms.configPath}" />
</cms:include>
</div>
<div class="clear"> </div>
</div>
<!-- end: center column -->
</div>
<!-- end: content area -->
<!-- begin: #footer -->
<div id="footer">
<c:if test="${!cms.options.value['Footer'].isEmptyOrWhitespaceOnly}">
<c:out value="${cms.options.value['Footer'].resolveMacros}" escapeXml="false" />
</c:if>
</div>
<!-- end: #footer -->
</div>
中間是可編輯區域，最後讀取option檔案來配置底部架構
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)