Postgraduate Search Site Frontend Development Helper v0.1 Shared Main Components HDR NAV CNT FTR
(Header) (Navigation) (Contents) (Footer)
Shared Content Components SLX SMX SRX ELX ERX
(Standard (Standard (Standard (Extended (Extended
Left Container) Mid Container) Right Container) Left Container) Right Container)
Usage: Case 1: 3 Columns Layout (Es. Results Page) SLX (Standard Left Container), SMX (Standard Mid Container), SRX (Standard Right Container) Case 1 Linear Structure: HDR -> NAV -> CNT (SLX -> SMX -> SRX) -> FTR Case 2: 2 Columns Layout (Extended on the left, Es. Home page) ELX (Extended Left Container), SRX (Standard Right Container) Case 2 Linear Structure: HDR -> NAV -> CNT (ELX -> SRX) -> FTR Case 3: 2 Columns Layout (Extended on the right, Es Features Page) SLX (Standard Left Container) ERX (Extended Right Container) Case 3 Linear Structure: HDR -> NAV -> CNT (SLX -> ERX) -> FTR
Detail Content Components Box used within SLX and SRX (Standard Left and Right Container): - SIDEPICS - SIDEREFINE/SIDEBROWSE - SIDELIST Box used within SMX (Standard Middle Container) - COURSELIST - COURSEDETAIL Box used within ELX (Extended Left Container) - HOMESEARCH Box used within ERX (Extended Right Container) - COURSEFEATURES/STUDENTSTORIES - FEATURESDETAIL/STORIESDETAIL
<div id=”hdr”> content... </div>
HDR
<div id=”nav”> content... </div>
NAV
<div id=”cnt”>
CNT ELX
<div id=”elx”>
content...
</div> <div id=”srx”>
content...
</div> </div> <div id=”ftr”> content... </div>
FTR
SRX
<div id=”hdr”> content... </div> <div id=”nav”> content... </div> <div id=”cnt”> <div id=”slx”>
HDR
NAV CNT SLX
content...
</div> <div id=”smx”>
content...
</div> <div id=”srx”>
content...
</div> </div> <div id=”ftr”> content... </div>
FTR
SMX
SRX
<div id=”hdr”> content... </div> <div id=”nav”> content... </div> <div id=”cnt”> <div id=”slx”>
HDR
NAV CNT SLX
content... </div> <div id=”erx”>
content...
</div> </div> <div id=”ftr”> content... </div>
FTR
ERX
<div id=”hdr”> content... </div> <div id=”nav”> content... </div> <div id=”cnt”> <div id=”slx”>
HDR
NAV CNT SLX
content... </div> <div id=”smx”>
content...
</div> <div id=”srx”> content... </div> </div> <div id=”ftr”> content... </div>
FTR
SMX
SRX
<div id=”hdr”> content... </div>
HDR
<div id=”nav”> content... </div>
NAV
<div id=”cnt”>
CNT SLX
<div id=”slx”> content... </div> <div id=”erx”>
content...
</div> </div> <div id=”ftr”> content... </div>
FTR
ERX
<div id=”hdr”> content... </div> <div id=”nav”> content... </div> <div id=”cnt”> <div id=”slx”>
HDR
NAV CNT SLX ERX
content... </div> <div id=”erx”>
content...
</div> </div> <div id=”ftr”> content... </div>
FTR
<div id=”hdr”> content... </div>
HDR
<div id=”nav”> content... </div> <div id=”cnt”>
NAV
<div id=”slx”>
CNT SLX
content... </div> <div id=”erx”>
content...
</div> </div> <div id=”ftr”> content... </div>
FTR
ERX