Docstoc

Kentico CMS 5 Website Development

Document Sample
Kentico CMS 5 Website Development Powered By Docstoc
					Kentico CMS 5 Website Development




Thom Robbins




                Chapter No. 2
        "A Tour of your New Website"
In this package, you will find:
A Biography of the author of the book
A preview chapter from the book, Chapter NO.2 "A Tour of your New Website"
A synopsis of the book’s content
Information on where to buy this book




About the Author
Thom Robbins is the Web Evangelist for Kentico Soft ware LLC and works with
Web developers, designers, and interactive agencies across the world on implementing
Kentico CMS.
Prior to joining Kentico, Mr. Robbins joined Microsoft Corporation in 2000 and served
in a number of executive positions. Most recently, he led the Developer Audience
Marketing group that was responsible for increasing .NET developer satisfaction with
the Microsoft platform. He also led the .NET Platform Product Management group
responsible for customer adoption and implementation of the .NET Framework and
Visual Studio. He was also a Principal Developer Evangelist working with developers
across the world on implementing .NET-based solutions.
He is the author of two books on InfoPath and Sharepoint. He is a regular speaker at
industry events and regularly posts to his blog at http://devnet.kentico.com/
Blogs/Thomas-Robbins.aspx.
He lives with his wife Barbara, and his stepson, Oliver. When not writing code, he enjoys
the Seattle weather and Crossfit.
You can reach him at thomasr@kentico.com.



                             For More Information:
              www.packtpub.com/kentico-cms-5-website-development-
                             beginners-guide/book
Kentico CMS 5 Website Development
In today's digital world, your web presence is an essential part of any business. Kentico
CMS is an ideal solution for dynamic user-friendly enterprise websites. Out of the box,
Kentico CMS includes a browser-based interface for rich content editing, over 200 web
parts, built-in modules, and a highly customizable API.
In this book, we will build an example corporate website. Starting with the installation of
your development environment and then diving into core modules and their features, over
the course of the book, we will look at how we can use page templates, images, themes,
web parts, and other features to provide a personalized experience for site visitors. We
will also extend the site to include e-commerce functionality that manages products and
payment gateways to accept money. Finally, we will extend our site, leveraging the
built-in networking features to build a community for your company and integrate with
external sites like Facebook and Twitter.


What This Book Covers
Chapter 1, Introducing Kent co CMS 5 introduces Kentico CMS 5 and explains the
installation and architecture of your site. Once the Corporate Starter Site is installed into
the development environment, you learn the basic navigation and tasks of the content
editor and management interfaces.
Chapter 2, A Tour of your New Website explores the main components of the CMS
system. You look at the importance of document types and how to build content pages
using either the Portal Engine or ASPX page templates. This includes both the benefits
and drawbacks that you may encounter using each method.
Chapter 3, Managing the Content Process covers site and role-based security. These
security basics are extended to implement a News workflow to publish content to the site.
Chapter 4, Linking and Managing Documents explains how successful sites look at
content as more than just HTML pages. This includes how to link to external sites, and
manage pictures and videos using the media library features of your site.
Chapter 5, Extending the System covers site extensibility using built-in functions to
transform system data and the Kentico API with C# to access Global Events and
automate posting to Twitter.




                             For More Information:
              www.packtpub.com/kentico-cms-5-website-development-
                             beginners-guide/book
Chapter 6, System Integration covers content syndication and integration into external
data sources using APIs commonly available on the web today.
Chapter 7, Adding E-commerce Functionality to your Site explores implementing
common e-commerce functionality that includes product management and shopping
cart functionality.
Chapter 8, Advanced Management explains user personalization, multi -language
options, and site deployment.
Chapter 9, SEO and Web Analytics discusses the usage of Search Engine Optimization
(SEO) to help customers find your website and web analytics to validate and analyze the
success of SEO. This is a combination of analyzing traffic patterns, optimizing pages,
using best practices, and profiling visitors.
Chapter 10, Building a Community Site shows how to join together many of the lessons
and features covered to build a community-driven website.




                             For More Information:
              www.packtpub.com/kentico-cms-5-website-development-
                             beginners-guide/book
                          A Tour of your New Website
                                                                                      2
      In order to be able to develop and extend the corporate starter site, we must
      understand the main components and how they interact.



In this chapter, we will walk through the main components of the website and follow the
exercises given. We will:
        Learn the key components and features of the corporate starter site
        Understand the available page management techniques
        Understand the available document types
        Deepen our understanding of the usage and features of a CMS system


Content is king
A CMS system provides content to site visitors and simplifies the process of managing web
content. The benefit of a CMS system is that it allows us to describe virtually anything we
want as content and display it on our website. This not only includes standard items like text
and images, but can even include application code. This helps both content editors and site
visitors have a consistent viewing and editing experience across a site.

With such a wide range of content possibilities, content is organized into groupings or
structures called documents. Documents are the basic unit of work and storage for site
content. Each document is based on a Document type that defines the fields for storing the
data and transformations, database queries for retrieving, and site display. News, articles,
and blog posts are just a few examples of available document types. When creating a new
article, it's based on the Article Document type that provides an editing form to enter the
data and a set of transformations and queries to control how it is retrieved and displayed.
Even though each Document type describes different types of content, each inherits a
general set of properties, as shown in the following table.

                             For More Information:
              www.packtpub.com/kentico-cms-5-website-development-
                             beginners-guide/book
A Tour of your New Website

General properties of a Document type
 Property Name                  Description
 Document type display name     Name of the site containing the content item displayed to
                                the users
 Document type code name        The internal code name of the content item
 New page URL                   URL of the page used for creating new documents of this type
 Editing page URL               URL of the editing page used for displaying the editing mode
                                using the Page tab
 Editing form URL               The URL of the editing page used for displaying the document in
                                the editing mode using the Form tab
 Preview page URL               URL of the editing page used for displaying the document in the
                                preview mode
 List page URL                  URL of the editing page used for displaying the document in
                                list mode
 Publish from/Publish to        The dates that a document is available for display on the website
 Show template selection        Indicates if the user must select a page template first when
                                creating a new document of this type
 Default page template          The default page template used when the document is created



Time for action – viewing available document types
The system contains a wide variety of pre-built document types. To view the available
document types and the XML structure for the Article Document type, we can follow
these steps.

   1.    Log in to CMS Site Manager, select the Development tab, and then Document
         types, as shown in the following screenshot:




                                              [ 34 ]

                                For More Information:
                 www.packtpub.com/kentico-cms-5-website-development-
                                beginners-guide/book
                                                                               Chapter 2

2.   Select the Export object icon for the CMS Article type, as shown in the
     following screenshot:




3.   Within the Export single object screen, select Export, as shown in the
     following screenshot:




4.   Once the export is completed, select Download object, as shown in the
     following screenshot:




5.   Open the ZIP file in the Objects folder and view the cms_documenttype.xml.
     export file in Notepad.




                                         [ 35 ]

                          For More Information:
           www.packtpub.com/kentico-cms-5-website-development-
                          beginners-guide/book
A Tour of your New Website

   6.    View the properties of this document type using Notepad, as shown in the
         following screenshot:




What just happened?
When we selected Export for the Article document type, this created a ZIP archive
that contains XML files, which describe the Article document type. This includes the
data structure, transformations, and queries that are used to define an Article. The
cms_documenttype.xml.export file that we then opened contains the database
table information. This includes the table name and database fields used to store Article
data. When an Article is displayed, this information is used to retrieve the content data
from the database and then has the appropriate transformations applied, before being
finally displayed.

The list of document types that we saw earlier is an integral part of system modules.
Modules are built-in functions that provide many of the features needed to maintain and
present the documents. The standard modules provided by Kentico CMS are shown in the
following table.




                                            [ 36 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                                              Chapter 2

Kentico CMS standard modules
Module Name                Description
Blogs                      Allows the publishing of a personal or company blog. You can publish
                           multiple blogs at the same site and there can be multiple defined
                           editors.
Booking System             Allows the management of events and their attendees. This module can
                           be used for both online and offline meetings.
Content rating             Allows the rating of any document on the website.
Content staging            Allows the separation of content in development, staging (editing), and
                           production (live) environments. It allows the transfer of documents and
                           object changes to another server.
E-commerce                 Enables e-commerce that includes product and catalog management.
Event calendar             Enables the display of documents ordered by date in a calendar.
Forums                     Enables the creation of pre-defined or ad-hoc forums.
Friends                    Allows site members to maintain relationships with other site members
                           and share personal information with them.
Geomapping                 Allows the display of content on a map using Google Maps.
Groups                     Allows site users to create or join a topic or area of interest. These can
                           include documents, forums, message boards, media libraries, and polls.
Image gallery              Enables the centralized storage of photos and images.
Media library              Enables the centralized storage of files, such as photos, sound, videos,
                           package files, and presentations.
Message board              Enables site visitors to comment on any page content.
Messaging                  Allows site users to send, receive, and manage e-mail messages. It is
                           designed to provide an internal communication method with other
                           users of the website.
Newsletter                 Allows the authoring and sending of static or dynamic newsletters to
                           subscribed users.
On-line forms (Bizforms)   Allows content editors to create and publish online forms.
Polls                      Allows the creation and publication of online polls that contain single or
                           multiple-choice answers.
Reporting                  Allows the creation of reports to view website activity. This includes
                           recently created document and site visits.
Taxonomy                   Allows the tagging and categorization of any site content.
Wiki                       Enables user contribution allowing site visitors to create, edit, and
                           delete site content.
Web farm support           Enables the synchronization of changes made to either site settings or
                           content on all configured servers.
Web analytics              Allows the tracking and analyzing of website visitors, page views, file
                           downloads, and other metrics of the website.


                                               [ 37 ]

                                For More Information:
                 www.packtpub.com/kentico-cms-5-website-development-
                                beginners-guide/book
A Tour of your New Website


Time for action – creating a poll
The Polls module provides a way to gather real-time input from site users. Polls are designed
as a separate document type that once created can be displayed anywhere on the site. In
this exercise, we will add a poll to collect visitors' favorite cell phones and then place it on
our Products page using a web part. Creating a poll is a two step process. The first step is to
create the poll and the second step is to add it to the page.

   1.    Log in to CMS Desk and select the Tools tab, Polls, and then select New poll, as
         shown in the following screenshot:




   2.    In the New poll screen, enter the following information, and then select OK.

                     Field               Value
                     Display name        Cell phone favorite
                     Code name           CellPhoneFavorite
                     Title               Cell Phone Favorite
                     Question            What is your favorite cell phone?




                                              [ 38 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                               Chapter 2

3.   Within the General tab, update the following information and select OK.

                 Field                 Value
                 Message after vote    Thank you for your feedback.

4.   Select the Answers tab and select New answer. Enter Samsung SGH E250, as shown
     in the following screenshot, and select OK.




5.   Select New answer, as shown in the following screenshot, and enter the following
     cell phone names.
             HP IPAQ 114
             Nokia N73




                                        [ 39 ]

                          For More Information:
           www.packtpub.com/kentico-cms-5-website-development-
                          beginners-guide/book
A Tour of your New Website

   6.    Select the Security tab, select All users, and select OK, as shown in the
         following screenshot:




   7.    Select the Sites tab and click the Corporate Site, as shown in the
         following screenshot:




                                              [ 40 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                                Chapter 2

8.   Select the View tab to review the look and feel, as shown in the
     following screenshot:




9.   The poll is ready to be published. Switch to the Content tab, choose the Products
     page, and then the Design tab. Add the web part to the zoneLeft by selecting the +
     icon, as shown in the following screenshot:




                                         [ 41 ]

                          For More Information:
           www.packtpub.com/kentico-cms-5-website-development-
                          beginners-guide/book
A Tour of your New Website

   10.   Select the Poll web part, as shown in the following screenshot, and click OK.




   11.   Update the Web part properties (Poll) with the following values and select OK.

                     Section         Field             Value
                     Default         Web part title    Product Poll
                     Poll Settings   Poll name         Cell Phone Favorite


   12.   The poll is now available in the zoneLeft, as shown in the following screenshot:




                                              [ 42 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                                        Chapter 2

   13.   You can view the Live site, and once you select the Vote button, as shown in the
         following screenshot, you can see the changes.




What just happened?
When we selected New poll, this enabled us to create the name of the poll and the question
to ask. We also provided a message to the user, once they completed the poll. We then
added the choices for the poll. Because this poll will be on the Home page, we enabled
system security to include all users. Then we attached the poll to the Corporate Site.
Finally, we reviewed the look of the poll.

Once the poll is created, the next step is to publish it to the site. Polls are published as web
parts. Web parts are ASP.NET server controls that are used to display data. Web parts are
placed into a web part zone on the Design page. We selected the zoneLeft and then the Poll
web part. We then set up the web part to display our new poll. Finally, we viewed the live
site and took the poll.




                                              [ 43 ]

                              For More Information:
               www.packtpub.com/kentico-cms-5-website-development-
                              beginners-guide/book
A Tour of your New Website


Time for action – using the WYSIWYG editor
The ease of updating content is one of the most important aspects of any content
management system. Kentico CMS leverages the open source FCK editor as the main
interface for updating content within editable areas. Very similar to Word menus, it is
designed to provide a "what you see is what you get" (WYSIWYG) editing experience.

In this exercise, we will update the service description of our Network Administration
services to include a new table that describes our services.

   1.    Log in to CMS Desk, select the Page tab, the Services page, then the Network
         Administration page, and place your cursor in the editable region, as shown in
         the following screenshot:




   2.    Within the editable region, move the cursor below the Network Administration
         Services title and add a horizontal line from the editor, as shown in the
         following screenshot:




                                            [ 44 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                                 Chapter 2




3.   Select add table from the WYSIWYG editor, as shown in the following screenshot:




4.   Within the table Properties, enter the following information and then select OK.

                     Field              Value
                     Rows               3
                     Columns            2
                     Headers            First row
                     Border size        1
                     Caption            Our Network Specialties
                     Width              200 pixels
                     Cell spacing       1
                     Cell padding       1




                                        [ 45 ]

                          For More Information:
           www.packtpub.com/kentico-cms-5-website-development-
                          beginners-guide/book
A Tour of your New Website

   5.    Update the table to include the service descriptions, as shown in the following table,
         and then select Save.

              Service              Description
              Remote Hosting       Application hosting and management
              Network Design       As you business grows so does your network


   6.    Select Live site to view the new table, as shown in the following screenshot:




What just happened?
Once we placed the cursor and selected the add table icon, this allowed us to configure our
table of new service options. The WYSIWYG editor is one of the most common tools available
across the system. The editor is available in many different parts of the system, from web
parts to blogs.




                                             [ 46 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                                     Chapter 2


Time for action – creating a blog entry
Blogs are a standard module included within Kentico. Updating a blog is one of the most
important parts of making sure that your blog is read. In this example, we will update our
product blog to announce the addition of new cellular phones to our product inventory.

   1.   Log in to CMS Desk and select Blogs and My blog. Then select New and Blog post,
        as shown in the following screenshot:




   2.   Update the blog post form with the following information.

            Field              Value
            Post title         Announcing our new phone line up
            Post summary       We are pleased to announce a new line up of
                               phones that will be joining our line over the next
                               few months.
            Post text          We are pleased to announce we will be carrying the
                                        Palm Pixi
                                        LG Lotus Elite
                                        Samsung Elite




                                             [ 47 ]

                             For More Information:
              www.packtpub.com/kentico-cms-5-website-development-
                             beginners-guide/book
A Tour of your New Website

   3.    Select the text Palm Pixi from the Post text and select the add link icon, as shown in
         the following screenshot:




   4.    Within the Insert link dialog, select the Web tab, enter the link to the Palm Pixi site
         (http://www.palm.com/us/products/phones/pixi-family.html) and
         then select Insert, as shown in the following screenshot:




   5.    Complete the blog post by entering the Tags as New Products, select Now for
         Publish from, and select Save, as shown in the following screenshot:




   6.    Select the Live site page tab to view the new blog post, as shown in the
         following screenshot:

                                              [ 48 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                                      Chapter 2




What just happened?
When we selected New blog post, this brought us to the editing form for our blog entry.
We updated our blog entry and then, using the WYSIWYG editor, created a new link to the
Palm Pixi image. We completed the blog entry by entering the appropriate content tags
and publishing the blog entry. Once this was done, we viewed the published entry on
the live site.


Page management
Every CMS page is based on a page template. A page template is the definition of how the
page looks and what is displayed in the context of a specific page. The page template is
responsible for feeding content into the page controls and displaying the content as a live
page. Page templates can be tied to a single page or used across several other pages. A
rendered page is a combination of HTML code, ASP.NET server controls, or user controls.




                                             [ 49 ]

                             For More Information:
              www.packtpub.com/kentico-cms-5-website-development-
                             beginners-guide/book
A Tour of your New Website

Page templates can be created based on two different page models, as shown in the
previous diagram. A direct page control model, using ASPX page templates and a higher-level
abstraction based on the Kentico Portal engine. The direct-control model is an extension of
the ASP.NET Webform module. In extending ASP.NET, this architecture leverages standard
ASP.NET master pages to create a WCMS-enabled .NET application. The second method
is the Kentico CMS Portal Engine. This model is designed to abstract away many of the
programmatic and design complexities and directly empower content managers. This type
of flexible implementation allows the page template selection as a page-based decision. This
enables customers to make their page template decisions based on business requirements.




                                           [ 50 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                                   Chapter 2

Shown in the previous diagram is a comparison of page processing in a typical ASP.NET
application compared to Kentico CMS, regardless of which page template model is used.
When a page is requested, it is first processed by the URL rewriting engine. The engine
identifies the page template and calls the CMSPageManager control based on the alias path
parameter. In turn, this loads the content from the requested page and displays the text
using the appropriate CMSEditableRegion controls. For example, when the /Home.aspx
page is requested, the URL rewriter engine identifies the page to the page template and
automatically rewrites the request to the following:
    •   <template URL>?aliaspath=/Home

With the ASPX page template, the template URL is always a physical page developed
using Visual Studio. However, with the Kentico Portal Engine, the template URL is always
/CMSPages/PortalTempalte.aspx. This page loads the structure of the page template
dynamically from the database and combines the inherited templates. One important
difference between the Portal and ASPX page methodology is that the Kentico Portal
Engine Template doesn't require any physical pages.


Time for action – creating a new ASPX page template
ASPX page templates are based on the standard page templates used with ASP.NET. Like web
forms, this model is implemented using Visual Studio. Page templates with this model are
built as an extension to the .NET Framework. When developing page templates this close to
the ASP.NET framework, the application developer has complete control to define all page
controls and dynamic content using the Kentico CMS API. However, with this control comes
additional site and maintenance work.

Technically, the ASPX page templates are a standard ASPX template that inherits from the
CMS.UIControls namespace. This base class is the Kentico TemplatePage for ASPX pages
and the Kentico TemplateMasterPage for master pages. Including this namespace allows
the page access to the Kentico CMS API. Creating a new ASPX page template is a two step
process. The first step is creating the new page within Visual Studio and the second is
registering it for use with the Kentico CMS.




                                            [ 51 ]

                             For More Information:
              www.packtpub.com/kentico-cms-5-website-development-
                             beginners-guide/book
A Tour of your New Website

Let's create an ASPX page template that contains company contact information to
demonstrate the process of creating an ASPX page template.

   1.    Within the Kentico CMS WebProject, select the CMSTemplates, then the
         CorporateSiteAspx folder, and right-click selecting Add New Item, as shown
         in the following screenshot:




   2.    Select add new Web Form and name it TwoColumnTemplate.aspx. Check Select
         master page and click Add, as shown in the following screenshot:




                                            [ 52 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                              Chapter 2

3.   In the Project folders, select CMSTemplates | CorporateSiteAspx, the Root.master
     page, and click OK, as shown in the following screenshot:




4.   Add the following code above the <asp:Content> element to register the Kentico
     CMS controls.
     <%@ Register Assembly="CMS.Controls" Namespace="CMS.Controls"
     TagPrefix="cc1" %>

5.   Add the following code inside the <asp:Content> element.
     <table width="100%">
       <tr>
         <td width="50%">
         <cc1:CMSEditableRegion ID="txtLeft" runat="server"
     DialogHeight="400"
     RegionType="HtmlEditor" RegionTitle="Left column" />
         </td>
         <td width="50%">
         <cc1:CMSEditableRegion ID="txtText" runat="server"
     DialogHeight="400"
     RegionType="HtmlEditor" RegionTitle="Right column" />
         </td>
       </tr>
     </table>




                                       [ 53 ]

                          For More Information:
           www.packtpub.com/kentico-cms-5-website-development-
                          beginners-guide/book
A Tour of your New Website

   6.    Switch to the code behind and add the following namespace so that the
         CMSEditableRegion can be recognized.
         using CMS.UIControls;

   7.    Change the default page inheritance to the Kentico template. This allows the page to
         be used as a page template in Kentico CMS. Change the following code:
         public partial class CMSTemplates_CorporateSiteAspx_
         TwoColumnTemplate : System.Web.UI.Page

         to the following:
         public partial class CMSTemplates_CorporateSiteAspx_
         TwoColumnTemplate : TemplatePage

         Now that the Visual Studio page has been created and includes the Kentico
         CMS controls, the next step is to register the template within Kentico
         CMS as a page template. This enables the page for use by page editors,
         developers, and designers.
   8.    Sign in to Site Manager, select the Development tab, Page templates, and then
         New category, as shown in the following screenshot:




   9.    In the New category screen, enter the following values and select OK.

                       Field                            Value
                       Category display name            Corporate Site ASPX
                       Category name                    CorporateSiteASPX


   10.   Click the Corporate Site ASPX folder and select New template, as shown in the
         following screenshot:

                                               [ 54 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                                  Chapter 2




11.   Within the new Page templates dialog, enter the following information and
      select OK.

                Field                               Value
                Template display name               Two Column Template
                Template code name                  TwoColumnTemplate


                        Don't forget
                        Code names are used within the SQL Server database,
                        and because of this, spaces are not allowed.


12.   In the File name field, enter ~/CMSTemplates/CorporateSiteASPX/
      twocolumntemplate.aspx and then select Save, as shown in the
      following screenshot:




                                           [ 55 ]

                           For More Information:
            www.packtpub.com/kentico-cms-5-website-development-
                           beginners-guide/book
A Tour of your New Website

   13.   Select the Sites tab and click the Add sites button. Select Corporate Site and click
         OK, as shown in the following screenshot:




At this point, the template has been registered and is available to the site. We can create a
simple page based on this template using the following steps.

   14.   Within CMS Desk, click the site root of the content tree, select New | Page (menu
         item), enter the Page name as Contact Us, select the Corporate Site ASPX folder,
         then select the Two Column Template and select Save, as shown in the following
         screenshot:




                                              [ 56 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                                            Chapter 2




                What is the site root?
                The top level of your content tree is called the root. This is the parent
                page for all inheritance throughout the site. This includes security and
                CSS for the entire website.


15.   The new page is available with two editable regions, as shown in the
      following screenshot:




                                             [ 57 ]

                           For More Information:
            www.packtpub.com/kentico-cms-5-website-development-
                           beginners-guide/book
A Tour of your New Website

What just happened?
Building web pages that directly leverage the .NET Framework provides a familiar
approach for application developers. It also allows content pages to directly integrate
into custom applications.


Time for action – creating a new Portal Engine page
The Kentico Portal Engine is a design-mode UI targeted at .NET developers, designers,
content authors, editors, and publishers. It enables the creation, management, and editing
of CMS pages from a browser-based administration interface. In the Kentico Portal Engine,
the page template doesn't require page setup in Visual Studio. This greatly reduces the
complexity of page setup. This allows content authors, editors, and publishers to focus on
implementing the page and its content based on the parameters defined by the application
developers and designers. For application developers, Portal Pages provide a pla orm for
deploying custom code using Web Parts and reduce the amount of up-front coding needed.

Let's create a simple page template using the Portal Engine that contains company
information to demonstrate the process of creating a new page.

   1.    Select Corporate Site in the content tree and then right-click and select
         New | Page (menu item), as shown in the following screenshot:




   2.    Enter the Page name as Company Information and select Create a blank page using
         the Two columns layout. Ensure that the Copy this layout to my page template box
         is checked. This ensures that your page template can use a modified version of the
         pre-defined layout without modifying other pages. Finally select Save, as shown in
         the following screenshot:
                                             [ 58 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                                   Chapter 2




3.   In order to edit the page, we will need to add an editable region. Switch to the
     Design tab.
4.   Click the Add web part icon (+) in the zoneLeft web part zone and select the Editable
     text web part. Select OK, as shown in the following screenshot:




                                         [ 59 ]

                          For More Information:
           www.packtpub.com/kentico-cms-5-website-development-
                          beginners-guide/book
A Tour of your New Website

   5.    Leave the Web part properties as default and select OK, as shown in the
         following screenshot:




   6.    Switch to the Page tab, add some general company information into the web part,
         and select Save, as shown in the following screenshot:




                                            [ 60 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                                    Chapter 2




What just happened?
One of the key benefits of the portal engine is that it allows the placement of placeholders
to create any number of visual inheritance levels needed for a consistent web page design.
When a PagePlaceHolder web part is added, the template for the child document can be
defined. Within the ASPX mode, this would require the creation of several levels of master
pages and a fair amount of code to maintain and manage. Within the Portal Engine, the only
additional code that may be needed is to handle the layout of the Web Part Zone. If this is
needed, it can be done using the following HTML code.
<cc1:CMSWebPartZone ID="zoneTop" runat="server" />

Once the HTML code is inserted, no additional code is needed and page designers can
work with web part objects without any programming. Web parts are modified using the
properties button, encapsulating them with containers using their properties. In comparison,
this would require additional application code when using the ASPX template mode.




                                            [ 61 ]

                             For More Information:
              www.packtpub.com/kentico-cms-5-website-development-
                             beginners-guide/book
A Tour of your New Website


Time for action – the Design tab
The Design tab provides the ability to modify the site structure visually without having to
write additional code. Often, this may include the ability to change the structure of a page
and move web parts from one side to the other side of a page. Let's go ahead and change
the site structure of the Home page.

   1.    Log in to CMS Desk, select the Content tab, then select Home and the Design tab, as
         shown in the following screenshot:




                                             [ 62 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                                Chapter 2

2.   Select the Poll web part, as shown in the following screenshot:




3.   Drag the web part to zoneRight on the right-hand side of the page, as shown in the
     following screenshot:




                                         [ 63 ]

                          For More Information:
           www.packtpub.com/kentico-cms-5-website-development-
                          beginners-guide/book
A Tour of your New Website

   4.    Select Live site and the Page tab to view the updated page.




                         Don't forget
                         Any changes made to the Design tab are immediately visible
                         to your logged in users.


What just happened?
Pages created with the Portal Engine inherit a special Design tab. The Design tab shows
the visual representation of web parts, a preview of the content, and a drag handle for
onscreen design. The Web Part Zone, which is represented by the orange box, is a special
control that is placed on the Portal Page and used to manage Web Parts. The green box is a
PagePlaceHolder and allows web designers to create a window to the next level of the page
when the next template is inserted.


Time for action – adding web parts
Web parts are often used to display different site sections on pages. They help to customize
areas and connect similar content types. For our website, we will want to update the Web
Development Services page to include the latest site news. This is a way for us to show
different document types on different pages without having to duplicate the content. To add
the latest news to the Web Development Services page, we can perform the following actions.

                                               [ 64 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
                                                                               Chapter 2

1.   Log in to CMS Desk, select the Content tab, and in the content tree, select the
     Services page. We then select the Web Development page and select the Design
     tab, as shown in the following screenshot:




2.   Select the add web part icon (+) in zoneLeft.
3.   Within the Web part name, enter the term Latest news to find the web part and
     then select OK.




4.   Select OK to accept the default Web part properties.


                                         [ 65 ]

                          For More Information:
           www.packtpub.com/kentico-cms-5-website-development-
                          beginners-guide/book
A Tour of your New Website

   5.    Select the Page tab to view the live page and see your web part, as shown in the
         following screenshot:




What just happened?
Web parts are the way that you can display information across pages. They provide the
ability to create windows within a page that allow for the display of data. The default
installation of Kentico CMS provides over 200 different web parts and covers a wide
variety of different areas.


Summary
We learned a lot in this chapter about our corporate starter site and its features. Specifically,
we covered:

         Learning how to view the available Document types
         Learning how to use Modules
         Understanding Web parts and their uses
         Learning how to create content pages

Now that we have learned the basics of content and modules, we're ready to dive deeper
and learn how to manage the content process—which is the topic of our next chapter.


                                              [ 66 ]

                               For More Information:
                www.packtpub.com/kentico-cms-5-website-development-
                               beginners-guide/book
Where to buy this book
You can buy Kentico CMS 5 Website Development from the Packt Publishing website:
https://www.packtpub.com/kentico-cms-5-website-development-
beginners-guide/book
Free shipping to the US, UK, Europe and selected Asian countries. For more information, please
read our shipping policy.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and
most internet book retailers.




                                    www.PacktPub.com



                              For More Information:
               www.packtpub.com/kentico-cms-5-website-development-
                              beginners-guide/book

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:5
posted:3/4/2012
language:English
pages:39