| Anchor | ||||
|---|---|---|---|---|
|
In This Section
| Table of Contents | ||
|---|---|---|
|
...
Content Management — Website parts
Path
Shows the path beginning with the home page:
...
| Code Block | ||
|---|---|---|
| ||
<div class="block-xxxxxx">
<div class="path-yyyyyy">
<div class="top">
<!-- -->
</div>
<div class="wrapper">
<ul>
<li class="odd first">
<span class="title">
<a href="#" title="home page">home page</a>
</span>
</li>
<li class="even">
<span class="title">
<a href="#" title="second page">second page</a>
</span>
</li>
<li class="last">
<span class="title">
<a href="#" title="last page">last page</a>
</span>
</li>
</ul>
<div class="clearer">
<!-- -->
</div>
</div>
<div class="bottom">
<!-- -->
</div>
</div>
</div>
|
Sitewide Navigation
| Code Block | ||
|---|---|---|
| ||
<div class="block-xxxxxx">
<div class="sitewide-yyyyyy">
<div class="h2-wrapper hide-header-zzzzzz displaynone">
<h2><span><!-- left blank in this case --></span></h2>
</div>
<ul>
<li>
<a class="navigation" title="© 2013 Skylith" href="#">© 2013 Skylith</a>
</li>
<li>
<a class="navigation" title="Disclaimer" href="#">Disclaimer</a>
</li>
<li>
<a class="navigation" title="Privacy policy" href="#">Privacy policy</a>
</li>
</ul>
</div>
</div>
|
the result:
Navigation Level 1 and Farther
The following is a path navigation that allows access to the children of the home page and deeper down in the tree:
...
| Code Block | ||
|---|---|---|
| ||
<div class="block-xxxxxx">
<div class="navigation-yyyyyy">
<div class="top"><!-- --></div>
<div class="h2-wrapper displaynone">
<h2><span><-- left blank in this case --></span></h2>
</div>
<div class="wrapper">
<!--
className can be:
- active
- activehasChild
- hasChild
- <empty>
-->
<ul>
<li id="item1" class="${className}">
<a href="#"><span>Home</span></a>
</li>
<li id="item1" class="item odd first active">
<a href="#"><span>About us</span></a>
<ul>
<li class="item odd first ${className}">
<a href="#"><span>Sub of About us</span></a>
<ul>
<li class="item odd first ${className}">
<a href="#"><span>Sub of sub of About us</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li id="item1" class="item even ${className}">
<a href="#"><span>Consulting</span></a>
</li>
<li id="item1" class="item odd ${className}">
<a href="#"><span>Events</span></a>
</li>
</ul>
<div class="clearer"><!-- --></div>
</div>
<div class="bottom"><!-- --></div>
</div>
</div>
|
The result:
Page Title
The page title is usually placed at the top of the content frame. The <h1> tag used for page titles in XperienCentral. The following is the semantic rendition of the page title in XHTML:
...
| Code Block | ||
|---|---|---|
| ||
<div class="h1-wrapper">
<h1>
<span>About us</span>
</h1>
</div>
|
The result:
...
Content Management — Content Elements
| Anchor | ||||
|---|---|---|---|---|
|
XperienCentral offers the editor a large number of content elements which they can freely place on a page. Each of these elements has several options as described below. Examples of existing design implementations are used for clarification. A key aspect of XperienCentral is that each content element can be represented in one or more different designs, which means that the same content could render a different output based on the chosen design.
...
The following elements are standard in XperienCentral.
Paragraph
The Paragraph content element is the element used most often for text and it includes a title. Important considerations for the design of a paragraph element are:
...
| Code Block | ||
|---|---|---|
| ||
<h1>What do you need to know about us</h1> <p>Skylith delivers products to the national and international market. Skylith offers a wide range, reasonable prices and good service.Skylith is <a href="http://www.cnn.com" class="" title="http://www.cnn.com">headquartered</a> in the Netherlands and hasregional offices across Europe and North America. Hundreds of global and national enterprises in different industries like financial services, media and publishing, alreadyrely on Skylith.</p> <p></p> <p>Skylith supplies products to the national and international market. Skylith offers a varied range of products and services, competitive prices and good service. Skylith is headquartered in the Netherlands, and has regional offices in Europe and North America. Hundreds of global and national companies in the financial, media and publishing industry now rely on Skylith. </p> <p></p> <p>Skylith consultants stem from a huge variety of backgrounds. As we recognize that each of our clients is unique in his needs and inquiries, so is each of our consultants’ expertise. Skylith has always long been very successful in linking the right customers to the right consultants to create game-changing solutions to our customers.</p> <p></p> <p>We have been present in Europe since the second half of the last century and are growing the <a href="http://www.whitehouse.gov" class="" title="http://www.whitehouse.gov">United States</a> offices together with clients. Customer-driven! Our success is characterized by precisely this, the customer first, the result is a logical consequence. </p> |
The result:
Image
An Image content element consists of the image itself, alignment settings and an optional caption. If there are requirements for the size of the image, these can be included in the style guide. For example: Images in the center column cannot exceed a width of 350 pixels, images in the right column should be exactly 140 pixels wide, and so forth. Important considerations for the design of an image are:
...
| Code Block | ||
|---|---|---|
| ||
<div class="block-xxxxxx">
<div class="image-yyyyyy">
<div class="top"><!-- --></div>
<div class="wrapper">
<!--
alignStyle can be:
- center
- right
- left
- clear
-->
<div class="left">
<a href="#">
<img src="#" width="390" height="220" alt="alt text"/>
<em>Subscript text when link around image</em>
</a>
<em>Subscript text when no link around image</em>
</div>
<div class="clearer"><!-- --></div>
</div>
<div class="bottom"><!-- --></div>
</div>
</div>
<div class="clearall"></div>
|
The result:
Download
A Download content element makes it possible for a website visitor to download a file. The file can be downloaded by clicking a hyperlink (text or an image). Besides the actual file to be downloaded, the settings include fields that can be filled in by the editor including name, version, author, and the date it was published. Besides the standard Download content element, downloads can also be offered as links in the content’s text without any other specific information. This does not require a separate design.
...
| Code Block | ||
|---|---|---|
| ||
<div class="block-xxxxxx">
<div class="download-yyyyyy">
<div class="top"><!-- --></div>
<div class="h2-wrapper displaynone">
<h2>
<span><a href="#">This download</a></span>
</h2>
</div>
<div class="wrapper">
<div class="download">
<!-- Classname equals the extension of the file (doc/docx/pdf/zip) -->
<a class="pdf" href="">filename</a>
</div>
<div class="filesize">999999 bytes</div>
<div class="name">some download</div>
<div class="version">1.0.0</div>
<div class="author">Me, myself and I</div>
<div class="date">01/01/2013</div>
<div class="clearer"><!-- --></div>
</div>
<div class="bottom"><!-- --></div>
</div>
</div>
<div class="clearall"></div>
|
List
An HTML-based ordered or unordered list of items can be added to a page using a List content element. A design template for the title of the List and its items can be created although usually that is defined by the default site font settings. If the design of the standard list is not sufficient due to margin indentations or the spacing between the title and the items, other solutions are available.
...
| Code Block | ||
|---|---|---|
| ||
<div class="block-xxxxxx">
<div class="listordered-yyyyyy">
<div class="top"><!-- --></div>
<div class="h2-wrapper displaynone">
<h2>
<span>List title</span>
</h2>
</div>
<div class="wrapper">
<ol>
<li class="normal">item 1]</li>
<li class="normal">item 2</li>
<ol>
<li class="normal">item 2.1</li>
<li class="normal">item 2.2</li>
</ol>
<li class="normal">item 3</li>
<li class="normal">item 4</li>
</ol>
<div class="clearer"><!-- --></div>
</div>
<div class="bottom"><!-- --></div>
</div>
</div>
<div class="clearall"></div> |
Links
XperienCentral allows an editor to create various types of links: internal links (links to pages on your own website), internal links to database content, links to external URLs and so forth. The editor has a lot of flexibility concerning what they link to and in principle, everything can be linked. Within the design, the link color for these variants (links that have not been clicked, visited links, and active links) has to be presented completely through the use of a style sheet and, when necessary, described in the style guide.
...
The following is an example of a link:
Table
In XperienCentral, the editor can chose the table layout he or she wants to use provided there is more than one design template available. Often there are multiple design templates because different table applications require different layouts. These design templates should be available in the design. The variables of the design of tables in XperienCentral are the same as the ones for a normal HTML table:
...
| Code Block | ||
|---|---|---|
| ||
<div class="block-xxxxxx">
<div class="table-yyyyyy">
<div class="top">
<!-- -->
</div>
<div class="wrapper">
<!-- Width can be in px or % -->
<!-- 4 possible table classes -->
<table width="70%" class="[left / right / center / clear]">
<caption>Products</caption>
<thead>
<tr class="odd first">
<th class="odd first" width="30%" scope="row">Product</th>
<th class="even" width="20%" scope="row">Color</th>
<th class="last" width="20%" scope="row">Price</th>
</tr>
</thead>
<tbody>
<tr class="odd first">
<td class="odd first" width="30%">Product A</td>
<td class="even" width="20%">Green</td>
<td class="odd last" width="20%">$ 100,00</td>
</tr>
<tr class="even">
<td class="odd first" width="30%">Product B</td>
<td class="even" width="20%">Blue</td>
<td class="odd last" width="20%">$ 210,00</td>
</tr>
<tr class="even last">
<td class="odd first" width="30%">Product C</td>
<td class="even" width="20%">Yellow</td>
<td class="odd last" width="20%">$ 321,00</td>
</tr>
</tbody>
</table>
<span><a href="#">Link to something more</a></span>
<div class="clearer">
<!-- -->
</div>
</div>
<div class="bottom">
<!-- -->
</div>
</div>
</div>
<div class="clearall"></div>
|
The result:
