Roadmap: Setting up the site for the content author

To help content authors reach their goals, a team of developers, administrators, designers, and information architects work together behind the scenes to set up the site. Page creation is a common goal of content authors. The page templates that are included when you install the product are great for exploring site manager and for some scenarios. As content authors add content, new sections of your site might require custom pages. The roadmaps in this section group common tasks that various roles within a technical team complete to implement a design wire frame for a new landing page.

Who should use the roadmaps

Typically, a company or group consults with a design agency or design team to get an HTML prototype of the wire frame, CSS, and other design specifications when a new page template is required. From the design phase, an information architect takes the wire frame and determines what needs to be developed to turn the wire frame into an actual page template that is available from site manager. The information architect sends these design requirements to a team that develops and administers the site to implement the design.

The technical team includes a range of skill levels and focus areas. Your organization might merge these roles or have more roles than described in this section. As you review the requirements that are outlined for a sample landing page later in this section, you might relate to one or multiple tasks. Select the roadmaps that best fit your focus areas on your technical team.

Note: To watch a series of video tutorials or read a set of video transcripts, go to Video Roadmap for creating a site: Using WebSphere Portal to implement a design. The tutorials in the video roadmap are supplemental and complementary to the information presented in this roadmap.

Video Roadmap for creating a site: Using WebSphere Portal to implement a design

Learn how developers and content authors work together to create a site based on HTML prototypes from a design team.

Videos and transcripts

The video tutorials in this series are an extension of the Setting up the site for the content author Roadmap. A full transcript is included for each video. The videos are not translated, but the transcripts are translated. All of the videos are hosted on IBM MediaCenter.

Video and transcript: Identifying design elements in an HTML prototype

Learn how to identify the design elements of an HTML prototype by watching a tutorial video or reading the video transcript.

Video

To watch the video tutorial on IBM MediaCenter, go to Identifying design elements in an HTML prototype.

Note: Identifying design elements in an HTML prototype is the introductory tutorial in the Creating a site: using WebSphere Portal to implement a design series.

Transcript

Note: Caption describes narration. On-screen action describes the content shown in the video.

Caption	On-screen action
The videos in this series show how developers and content authors take an HTML prototype and turn it into a live website.	Welcome animation displays with video title: Identifying design elements in an HTML prototype.
But, before developers and content authors can get to work creating the site, the information architect needs to define the elements that comprise the HTML prototype.	The HTML prototype for the Greenwheels home page and the home page of the live Greenwheels site are displayed.
The first step in bringing a design to life on a website is understanding the behavior	Each individual design element of the HTML prototype is called out.
As an information architect, I have two HTML prototypes: one for a home page, and one for landing pages.	The HTML prototypes for the Greenwheels home page and for the Events landing page are displayed.
Our Events landing page and our Products landing page are based on the same design, except there's no date information for items on the Products landing page.	The HTML prototypes for the Events and Products landing pages are displayed.
Looking across the prototypes, I see some elements that are exactly the same.	The HTML prototypes for the Greenwheels home page and the Events landing page are displayed.
For instance, I see the same header and navigation.	The HTML prototypes for the home page and the landing page merge to show their shared header.
The header and footer are controlled by the website's theme, so I know that my developer needs to create a Simple Theme using Theme Manager and update the company logo within the theme.	In Theme Manager, click Create Theme. Enter `Greenwheels` in theTitle field. In the theme template, locate the code string that includes the SVG tags that control the theme logo and replace it with the following code string: `<img alt="Logo" src="css/images/logo.png">`
When my developer builds a site template in Site Builder,they can customize the site template to use this new theme.	In Site Builder, select Greenwheels from the Portal theme menu.
Then, when my content author creates the new site from the site template and adds pages, the same theme will be used across all of the pages so the headers and footers will match.	The headers of the home page, the Events landing page, and the Products landing page display to show that they are all the same.
I also recognize common design elements that are shared, but customized, across the HTML prototypes.	The HTML prototypes for the Greenwheels home page and the Events landing page are displayed.
For instance, each prototype contains a banner. The banners all consist of a background image and text that varies from page to page.	The banners of the HTML prototypes for the home page and the Events landing page are called out.
Rather than creating different banner page components, my developer can simply create one generic banner page component that a content author can add to any page on the site. The banner page component can be easily generated, since the template is available for immediate use in the Web Content Authoring portlet.	In the Web Content Authoring portlet, select Greenwheels Design. Select Generate > Page Component. From the Template type menu, select Banner. Enter `Greenwheels Banner` in the Page component name field.
After my content author adds the banners from the site toolbar, they can customize the images and text to match the HTML prototypes.	From the site toolbar, drop the banner page component onto the site. In the banner page component, click Add or Select Image. Click Upload. Select the image that you would like to add to the banner.
Similarly, I see that my HTML prototypes appear to contain a common design element that's formatted like a list. However, understanding the overarching goal for each page reveals subtle differences between these seemingly shared design elements.	The HTML prototypes for the Greenwheels home page and the Events landing page are displayed. The list elements on each page are called out.
For instance, the Events HTML prototype displays upcoming events in a defined order, preferably by date. Since the goal of the Events page is to show all events, a dynamic list page component that sorts items by date would satisfy the design requirements.	The dynamic list page component of the Events landing page is called out. The dates in each list item are called out.
My Products page has a similar goal: to show all products in alphabetical order. So, a dynamic list page component that sorts items alphabetically would satisfy the design requirements for the Products page. There is no default list page component, so I know that my developer will have to create these custom list page components for my content author.	The dynamic list page component of the Products landing is called out. The name of each list item is called out.
However, the home page is designed for a different purpose: to highlight certain products and events based on our company's changing promotions, specials, and limited time offers. The home page is not designed to show all products or all events, so my content author needs a little more control over the links on the home page. A content author can achieve this goal by adding references to content items and teaser page components that link to pages.	The HTML prototype for the Greenwheels home page is displayed. References to content items and teaser page components on the home page are called out.
Beginning with content references, I see in the HTML prototype that two content items, an event and a product, are featured on the home page.	The list page component of the home page is displayed. The event content item and the product content item are called out.
Instead of creating a new copy of the content item and pasting it on the home page, my content author can add a reference to the content item from the Context menu. That way, if my content author makes any updates to the original content, the reference to that content on the home page will be updated automatically.	From the Site Manager, select Add Reference to Page for the content item City Bike. From the Site Manager, select Add Reference to Page for the content item Mountain Bike Tour.
The reference to the content item displays on the home page based on the summary presentation template, and links directly to the content item on the landing page. So, developers do not need to create a new page component to feature content items on the home page.	The Greenwheels home page is displayed. When the user clicks Read More for the Mountain Bike Tour link on the home page, the Mountain Bike Tour content item opens.
From the home page HTML prototype, I see links to the Products and Events pages.	The HTML prototype for the Greenwheels home page is displayed. The links to the Products and the Events pages are called out.
My site visitors can use these links to view the rest of my company's products and events that are available for purchase or booking, but not featured on the home page. A teaser page component can be used to guide site visitors to these pages. The teaser page component contains an image along with summary text and link to a page on the site.	The Greenwheels home page is displayed. When the user clicks Read More for the Check Out the Rest of Our Products link, the Products landing page opens. The Greenwheels home page is displayed. The image, summary text, and link for a teaser page component are called out.
The teaser page component can be easily generated since the template is available for immediate use in the Web Content Authoring portlet. My developer can then modify the style of the teaser page component as needed to match the design in the HTML prototype. My developer will need to create a summary presentation template for the teaser page component as well.	In the Web Content Authoring portlet, select Generate > Page Component. From the Template type menu, select Teaser. Enter a name for the teaser page component template in the Page component name field. From the Greenwheels Design Components folder, select Styles. Click Edit. Edit the code as needed to match the HTML prototype.
Unlike the teaser and banner page components, the promotional text page component is not available for immediate use in the Web Content Authoring portlet.	The HTML prototype for the Greenwheels home page is displayed. The promotional text page components are called out.
My developer must create this create this design element from a pre-existing template, similar to how they create the two list page components. For instance, my developer can use the teaser template to create the promotional text page component.	In the Web Content Authoring portlet, select Generate > Page Component. From the Template type menu, select Teaser. Enter a name for the promotional text page component in the Page component name field. Click OK.
Then, my developer can remove the default elements in the authoring template and add a text element named Promotional Text.	From the Greenwheels Design Authoring Templates folder in the Web Content Authoring portlet, select Greenwheels promotional text. Select Edit. From the Element type menu, select Text. In the Name field, enter the name of the promotional text element.
Finally, my developer will need to modify the presentation template to match the design in the HTML prototype.	From the Greenwheels Design Presentation Templates folder, select Greenwheels promotional text. Update the code to match the HTML prototype.
And that's how an information architect could identify the design pieces of a larger HTML prototype.	The HTML prototype of the Greenwheels home page is displayed. Arrows call out each individual design element.
The rest of this series shows you how developers create the design elements as defined by the information architect in this video, and how content authors use those design elements to create a site that matches the HTML prototypes.	Concluding animation displays that shows the titles of each video in the Creating a site: How developers and content authors implement a design series.

Video and transcript: Creating a theme and adding your logo

Theme creation is the first step toward creating a new site. Learn how to create a custom theme with a custom logo by watching a tutorial video or reading the video transcript.

Video

To watch the video tutorial on IBM MediaCenter, go to Creating a theme and adding your logo.

Note: Creating a theme and adding your logo is the first tutorial in the Creating a site: using WebSphere Portal to implement a design series.

Transcript

Note: Caption describes narration. On-screen action describes the content shown in the video.

Table 1. Creating a custom theme.
Caption	On-screen action
Hi, I'm Rachel Amity from IBM's Digital Experience Team. As a developer, I need to create a new Greenwheels theme to customize the site's look and feel. The Greenwheels theme must be finalized before my content author can begin creating the Greenwheels site.	Welcome animation displays with video title: Creating a theme and adding your logo.
I can create a new theme in the Theme Manager, which is accessed from the applications menu.	Click the Applications menu icon. Then, click Theme Development.
Within the Theme Manager, I can view other themes that I've created. I can also create a new theme by clicking on Create Theme.	Click Create Theme.
First, I name the new theme.	Enter the title of the new theme, `Greenwheels`, in the Create Theme dialog.
Then, I choose a theme template. When I choose the Simple Theme, I can customize and copy my theme in minutes with just a few clicks.	Select Simple from the Template menu. Click Create. Click Done.
When my theme is ready, I can modify its properties in the Theme Manager.	Click Manage properties for the new Greenwheels theme.
The Theme Manager includes customization options for general features like layouts and profiles, skins, localization, metadata, and advanced features like the static content root. Our HTML prototype for the Greenwheels home page requires a 1-column layout. To customize my new Greenwheels theme to include this 1-column layout, I select 1Column in the General tab.	Select 1Column from the Default Layout menu in the General tab.
When I'm finished modifying my Greenwheels theme, I click Done.	Click Done.

Table 2. Adding a custom logo.
Caption	On-screen action
I know that the Simple Theme includes a default logo, so now that I've created the Greenwheels theme, I want to change the theme logo to the Greenwheels logo. I already have a Greenwheels logo to use, a PNG image called logo.png. I have also already downloaded my theme files to a folder I called Theme Logo using DXSync.	A computer desktop with a PNG image file titled logo.png and a folder titled Theme Logo on it is displayed.
I upload my new logo to a folder within the theme, such as css/images.	Open the Theme Logo folder. Open to the css folder, then to the images folder. Drag the PNG image file logo.png from the desktop into the css/images folder.
Then, I open the theme template, theme.html, in a text editor.	Browse to the root theme folder. Open the file theme.html in your favorite text editor.
I find the SVG code string that contains the default theme logo and replace it with an IMG ALT code string that references the logo.png file I uploaded.	Locate and delete the `SVG` code string that contains the default theme logo. Replace the deleted `SVG` code string with an `IMG ALT` code string that references the logo.png file you uploaded to the css/images folder.
When I save the page, DXSync uploads my changes, and my new logo is ready to use.	In the text editor, click Save. A message displays that confirms that DXSync uploaded your changes.
Before content authors can begin creating the site, a developer will need to generate page templates, which Tanya will show in our next video.	The title of the next video in the series is displayed: Creating a site template in Site Builder.

Video and transcript: Creating a site template in Site Builder

After the theme is created, a site template can be customized to use the new theme. Learn how to create a site template in Site Builder by watching a video tutorial or reading the video transcript.

Video

To watch the video tutorial on IBM MediaCenter, go to Creating a site template in Site Builder.

Note: Creating a site template in Site Builder is the second tutorial in the Creating a site: using WebSphere Portal to implement a design series.

Transcript

Note: Caption describes narration. On-screen action describes the content shown in the video.

Table 3. Creating a site template in Site Builder.
Caption	On-screen action
Hi, I'm John James from IBM's Digital Experience Team. As a developer, I need to create a new site template using Site Builder. This new site template will be used by my content author to create a top-level home page for their site.	Welcome animation displays with video title: Creating a site template in Site Builder.
Site Builder is accessed from the applications menu.	From the Applications menu, click Site Builder.
The Simple Site Template is used to create a single, empty home page.	The Site Builder application is displayed.
However, I need to create an updated version of this template and modify it to use the new Greenwheels theme, so I'll use the duplicate tool.	Go to the Simple Site Template and click Duplicate.
I'll name this new template `Greenwheels home template`.	The Duplicate Site Template dialog is displayed. Type `Greenwheels home template` in the Name and Title fields. Click OK.
The new template has been added to the list of templates.	The Greenwheels home template is now displayed in the list of Site Builder templates.
Now I'll edit the new template.	Go to the Greenwheels home template and click Edit..
On the Template properties tab, I'll select a preview image. This will make it easier for my content author to identify the Greenwheels home template from the list of site templates.	Go to the Template Properties tab. Click Choose Image and select an image file. Click Open.
On the Site Structure tab, I'll change the name of the existing page template to `Greenwheels`.	Go to the Site Structure tab. Click Edit next to the Simple Site page template. Type `Greenwheels` in the Page title field and the Friendly URL name field. Click OK.
And on the Advanced tab I'll select the Greenwheels theme	Go to the Advanced tab. Select the Greenwheels theme as the Portal theme.
Now I'll publish my changes	Click Publish and Close.
And the template is ready to use.	The Site Builder application is displayed including the updated Greenwheels home template.
Before my content author can begin creating their site, I'll also need to generate a set of author-ready content templates and page components. But before that, I need to create a new library to store these design elements in, and that's what I'll show in the next video.	Closing titles.

Video and transcript: Creating a design library

Learn how to create a design library to contain your design elements by watching a video tutorial or reading a video transcript. Content authors need access to the design library to add design elements, such as page components, to the site.

Video

To watch the video tutorial on IBM MediaCenter, go to Creating a design library.

Note: Creating a design library is the third tutorial in the Creating a site: using WebSphere Portal to implement a design series.

Transcript

Note: Caption describes narration. On-screen action describes the content shown in the video.

Table 4. Creating a design library
Caption	On-screen action
Hi, I'm John James from the IBM Digital Experience Team. As a developer, I need to create a Design library to store my design elements. This will prevent my design elements from being overwritten if I upgrade my server, and also allows me to apply a separate syndication strategy to my design elements. When I create a set of author-ready content templates and page components, I'll save them to this Design library.	Welcome animation displays with video title: Creating a design library.
To create a new library, I'll open the Administration view.	Click the Administration icon from the toolbar.
And then go to the Web Content Libraries view.	Click Portal Settings > Web Content Libraries.
I'll create a new library called `Greenwheels Design`.	Click Create new Library. Type `Greenwheels Design` in the Web content library name field. Click OK.
I'll now edit the library permissions to give my content authors access to the library.	Click the Set Permissions icon next to Greenwheels Design.
To do this, I'll add the Content Authors group as Editors to this library.	Click Edit Role for the Editor role. Click Add. Search for and then select Content Authors.
Now I'll open the web content authoring application by clicking Content from the applications menu, and opening the Web Content Authoring tab.	Click Content from the applications menu in the toolbar. Open the Web Content Authoring tab.
Under Preferences, I'll open the Edit Shared Settings view.	Click Preferences > Edit Shared Settings.
And then I select the new library from the library selection view.	Click Library Selection. Select the Greenwheels Design library and click Add. Click OK.
The Greenwheels Design library is now visible.	The Greenwheels Design library is now visible in the list of libraries.
Now I can create a set of author-ready content templates and page components for my content authors. In the next video, I'll create a pair of author-ready content templates.	Closing titles.

Video and transcript: Creating content templates

Learn how to create content templates so content authors can create content items. As of CF09, content templates are not available for immediate use by content authors. However, developers can use the new generate feature in the Web Content Authoring portlet to quickly create content templates for content authors.

Video

To watch the video tutorial on IBM MediaCenter, go to Creating content templates.

Note: Creating content templates is the fourth tutorial in the Creating a site: using WebSphere Portal to implement a design series.

Transcript

Note: Caption describes narration. On-screen action describes the content shown in the video.

Table 5. Creating content templates
Caption	On-screen action
Hi, I'm John James from IBM's Digital Experience Team. As a developer, I need to create a set of author-ready content templates. My content author will use these to create content for the Greenwheels site.	Opening titles.
To do this, I'll open the web content authoring application and then open the Greenwheels Design library I created in the previous video. This will ensure that the content templates I create are generated in the correct library.	Go to Applications menu > Content > Web Content Authoring. Click Greenwheels Design.
The Generate feature is used to quickly generate author-ready content templates.	Click Generate > Templates.
There are two types of author-ready templates you can choose from: An article, or an event. These are used as the basis for your own templates. For example, the Event template might be modified to create a template for a meeting. In this video, I'll create a new article template called `Greenwheels Products`.	Select Article. Type `Greenwheels Products` in the Template name field. Click OK.
A set of web content items are generated. I can edit these items to match the design in our HTML prototype.	An information message is displayed.
For example, I can edit the Teaser Styles component and change the color of the teaser button. I'll edit the mark-up to change the color of the link button to blue. And then Save and Close the component.	Click Greenwheels Design > Components > Greenwheels Products > Teaser Styles from the information message. Click Edit. Edit the HTML markup. Click Save and Close.
Now, I'll also generate an events template named `Greenwheels Events`.	Click Generate > Templates. Select Event. Type `Greenwheels Events` in the Template name field. Click OK.
In the next video, I'll create a set of Page Components that my content author can use to add different elements to the pages of their website.	Closing titles.

Video and transcript: Creating page components

Learn how to create page components that content authors can add to pages. As of CF09, page components are not available for immediate use by content authors. However, developers can use the new generate feature in the Web Content Authoring portlet to quickly create reusable page components for content authors.

Video

To watch the video tutorial on IBM MediaCenter, go to Creating page components.

Note: Creating page components is the fifth tutorial in the Creating a site: using WebSphere Portal to implement a design series.

Transcript

Note: Caption describes narration. On-screen action describes the content shown in the video.

Table 6. Creating page components
Caption	On-screen action
Hi, I'm John James from IBM's Digital Experience Team. As a developer I have to create a set of Page Components. These will be used by my content authors to add different elements to their pages.	Opening titles
I will need to create these page components for my content authors. A banner, a teaser some promotional text, an alphabetical list, and a list by date.	Two page designs are displayed.
As I did in the previous video, I have opened the Web Content Authoring application and opened the Greenwheels Design library.	Go to Applications menu > Content > Web Content Authoring. Click Greenwheels Design.
The Generate feature is used to quickly generate author-ready page components.	Click Generate > Page Component.
There are there types of author-ready templates you can choose from: A teaser, a banner, or a video. For example, to create the `Greenwheels Teaser`, I select Teaser and complete the form.	Select Teaser. Type `Greenwheels Teaser` in the Page component name field. Click OK.
A set of items are generated. I can edit these items to match the design in our HTML prototypes.	An information message is displayed.
I can preview this page component by switching to the Web Content Preview tab, changing my session to edit mode, and adding the page component to the page.	Go to the Web Content Preview tab. Click Edit Mode from the page toolbar. Open the Page Component palette. Drag the `Greenwheels Teaser` onto the page.
Now I'll return to the Web Content Authoring application and edit the Greenwheels Teaser Styles component and change the button color to blue by editing the CSS stored in this component.	Go to the Web Content Authoring tab. Click Greenwheels Design > Components > Greenwheels Teaser > Styles from the information message. Click Edit. Edit the HTML markup. Click Save and Close.
Now when I preview the page component, the link button is displayed in blue.	Go to the Web Content Preview tab.
I can also use the Generate Feature to create new Page Component types. For example, a `Greenwheels promotional text` Page Component. I'll base this new Page Component on the Teaser template.	Go to the Web Content Authoring tab. Click Generate > Page Component. Select Teaser. Type `Greenwheels promotional text` in the Page Component name field. Click OK.
Now I'll edit the authoring template.	An information message is displayed. Click Greenwheels Design > Authoring Templates > Greenwheels promotional text from the information message.
I'll begin by removing the existing elements.	Click Edit. Click Manage Elements. Click the Delete icon against each element.
And then add a text element named `promotional-text`.	Change the element type to Text. Enter `promotional-text` in the Name Field. Click OK.
The new element is added to the Default content tab.	Go to the Default Content tab.
Now I need to reapply the updated template, so I click Save and Read and then apply the template.	Click Save and Read. Click Apply Authoring Template.
I select the Add new elements and Remove existing elements checkboxes. This will update the content item generated with the Page Component to match the new Authoring Template design.	Select the Add new elements and Remove existing elements check boxes. Click OK.
The authoring template has been reapplied.	A confirmation message is displayed.
Now I need to update the Greenwheels Promotional Text presentation template.	Click Greenwheels Design > Presentation Templates > Greenwheels promotional text from the information message.
And replace the presentation template design with one that matches the design in our HTML prototypes.	Click Edit. Edit the HTML markup. Click Save and Close.
The Promotional Text Page component is now ready to use.	Click Edit Mode from the page toolbar. Open the Page Component palette. The `Greenwheels promotional text` page component is visible.
Now I need to create the other Page Components; the banner, the alphabetical list, and the list by date. But I won't show those in this video.	Two page designs are displayed.
Once I have generated the final page components, I will have setup everything I need for my content authors to create their website. In the next video, Sharmila will show you how a content author uses Site Builder to create a new website.	Closing titles.

Video and transcript: Creating a site with Site Builder

Learn how a content author creates a new site by using Site Builder.

Video

To watch the video tutorial on IBM MediaCenter, go to Creating a site with Site Builder.

Note: Creating a site with Site Builder is the sixth tutorial in the Creating a site: using WebSphere Portal to implement a design series.

Transcript

Note: Caption describes narration. On-screen action describes the content shown in the video.

Caption	On-screen action
Hi, I am Sharmila Govindarajan from IBM's Digital Experience Team.	An introduction slide displays the title of the video series Creating a site: How developers and content authors implement a design and lists the titles of the videos.
As a content author, I can quickly create a website from a site template using Site Builder.	The titles of the videos in the series are listed in numerical order.
Site templates provide an initial structure for my site and can include pages and content.	The first video is Creating a theme and adding a logo. The second video is Creating a site template in Site Builder. The third Creating a design library, fourth Creating content templates, fifth Creating page components. The sixth, seventh, and eight videos are Creating a site with Site Builder, Creating landing pages and content items, and Promoting featured items on the home page.
In this video, I will create a website from a site template that my developer created.	The sixth video title Creating a site with Site Builder is highlighted.
This is the first step toward my goal of creating a site with pages and content that matches the HTML prototype for my site.	The highlighted title Creating a site with Site Builder is the title for the current video.
Site Builder is accessed from the applications menu.	Click Applications menu > Site Builder.
I will show you how to create a website from the Greenwheels site template that my developer created.	Highlight the site template called Green wheels home template.
My developer customized the Greenwheels site template to use the Greenwheels theme.	The site builder displays with the All templates tab selected.
This site template includes a single, empty home page.	Two templates, the Greenwheels home template and the Simple Site Template are displayed.
I create the website by launching the Site Wizard.	Callout and then click Launch Site Wizard .
In the Site Name tab, the Site title and the Friendly URL name initially reflects the site template name.	Highlight the Site Name tab. Highlight the Site title and Friendly URL name entry fields.
Since I want my site to use the same name I will not make any changes.	The Site title and the Friendly URL nameentry fields display the Greenwheels name.
I click the arrow to go to the next tab.	Click the Arrow.
My developer has already selected a content library to use for the Greenwheels site template.	Highlight the Library selection options.
This library will store content items created on my new site.	The Site Builder displays with the Content Library tab open.
Developers select the library setting when they create site templates.	The library option that is selected by the developers is displayed and highlighted.
They select this setting to take into account future library structure and associations built between pages.	A message is displayed at the beginning of the library options that provides information about the selected library.
I click the arrow to move to the next tab.	Click the Arrow.
Then, click Create Site.	Click Create Site. Click OK.
The Greenwheels website is created. I click Go to Site to start working on the website.	Call out and click the Go to Site link.
Before I can add pages and content items to the site, I need to be in a project.	Point to the Open the project menu arrow.
I open the project menu and click New Project.	Click Open the project menu arrow. Click New Project.
I provide a name for the project and click Create.	Enter `GW Project` as the project name. Click Create.
The project is now created and the edit mode automatically turns on when I am in a project.	Callout the project name and the Edit Mode status.
In the next video, Nina will use this project to show how a content author adds pages, and content items to the site.	Highlight the title of the seventh video Creating landing pages and content items.

Video and transcript: Creating landing pages and content items

Learn how content authors create landing pages for the new site and populate them with content.

Video

To watch the video tutorial on IBM MediaCenter, go to Creating landing pages and content items.

Note: Creating landing pages and content items is the seventh tutorial in the Creating a site: using WebSphere Portal to implement a design series.

Transcript

Note: Caption describes narration. On-screen action describes the content shown in the video.

Table 7. Creating landing pages and content items
Caption	On-screen action
Hi, I'm Nina Hawley with IBM's Digital Experience team. After my site is created with Site Builder, my next step is to populate my site with pages, content items, and page components.	Welcome animation displays with video title: Creating landing pages and content items.
I know from the HTML prototype that I'll need to add a banner page component and a list page component to my landing pages. I'll also need to create content items, which I will use to populate my list page component. This video will show you how to create the Products and Events landing pages with content items.	The HTML prototype for the Events landing page displays. The banner page component at the beginning of the page and the list page component at the end of the page are highlighted. Then, each content item in the list page component is individually highlighted.
I need to be in Edit mode in order to make changes to my site. In this video, I'll enter my GW Project, so all of my changes will be published at the same time on the live site.	From the action bar, turn on edit mode. Site Manager opens. From the projects menu, select the GW project.
I need to create two new landing pages for my site - a Products page and an Events page. To make these pages children to the Home page, I open the context menu for the home page and click Create child page...	From Site Manager, click Context menu for the Greenwheels home page. Click Create Child Page. The Create Page menu opens.
I'll create the Products page first using the landing page (2 pages) template.	Enter a name for the new page in the Page title field. The name that you enter automatically fills the Friendly URL name field so that the page title and friendly URL match. From the list of available templates, select the Landing Page (2 pages) template. Click Create Page.
After I create my Products page, I'll access my page components from the site toolbar to add the Greenwheels banner page component that my developer generated.	From the site toolbar, click Page components. From the Page Components menu, add the Greenwheels banner banner page component by dragging it to the GW project.
Before I customize the banner page component, I'll use the context menu to copy the Products page to create my Events page.	In the site manager, open the context menu for the Products page. Click Copy Page.
Then, I open the context menu for the Products page again and select Paste as sibling. The page is created as Products_copy, so I'll rename it to Events. Both the Products page and the Events page require the same banner page component and page template, so copying the Products page is the easiest way to create the Events page.	In the site manager, open the context menu for the Products page. Click Paste as Sibling. In the site manager, open the context menu for the Products_copy page. Click Rename Page. In the Title and Friendly URL name fields, delete `Products_copy` and enter `Events`.
Next, I'll open page components from the site toolbar to add my list page component.	From the site toolbar, click Page components.
I have two lists to choose from. On the Events page, I'll add the list page component that sorts items by date. On the Products page, I'll add the list page component that sorts items by title.	From the Page Components menu, add the Greenwheels list by date list page component by dragging it to the Events page. From the Page Components menu, add the Greenwheels list by title list page component by dragging it to the Products page.
Now, I have my two landing pages. I'll update the banner page component with the image and text that I want to use for each page. I'll also include a banner page component on the home page.	In the banner page component, click Add or select image. A dialog box opens. In the dialog box, click Select. Select the image that you would like to add to the banner page component. In the banner page component, enter `Explore the world` in the banner title field and `Let Greenwheels take you there!` in the banner text field.
My next step is to create content, so I'll select the option to show content items in the tree view. Then, I'll expand the tree view to view all of my pages. The landing page template includes a child Content page. That's where I'll create content for my Products and Events landing pages. Then, I'll modify the dynamic list page components in the products and events pages to reference the correct content. I'll begin by opening the cont ext menu for the Content page and clicking Create Content....	In the site manager, click Show content items in the tree view In the site manager, click Expand the tree view. Open the context menu for the Events content item and click Create Content. .
I will give the content a name, and specify the content template that my developer created. After I create the content item, I'll add an image and text.	In the Content title field, enter a name for the new content. The name that you enter automatically fills the Friendly URL name field so that the page title and friendly URL match. From the templates menu, select Greenwheels Events. Click Create Content. Click the new content item. A dialog box appears. In the dialog box, click Upload to select an image to add. In the event title field, enter `City Bike Tour`, and in the even description field, enter an event description.
I'll create a few content items for both the Products and Events pages. I can also use the context menu of a content item to copy and paste content to create new items, just like when I copied the Products page to create the Events page. I can edit the copied content by opening the content form from the context menu.	In the site manager, click Context menu for the City Bike Tour content item. Click Copy Content. From the context menu, click Paste as Child. From the context menu for the newly copied content item, click Open Content Form. In the Title and Display Title fields, delete `city-bike-tour_copy` and enter `Mountain Bike Tour`.
Now, that I've created my content items, it's time to customize the Greenwheels list page components on the Products and Events pages to list the content items that I want.	On the Events page, click theSelect context field. A dialog box appears. In the dialog box, click Browse. Select Content > Content Root > Greenwheels > Events > Content. Click OK. Click Save.
My Products and Events landing pages are complete. Next, I'll show you how a content author can promote special features on the home page by adding new page components and references to content items.	The complete Products and Events landing pages display. The title of the next video in the series is displayed: Promoting featured items on the home page.

Video and transcript: Promoting featured items on the home page

Learn how content authors finalize the home page of a new site by watching a tutorial video or reading the video transcript.

Video

To watch the video tutorial on IBM MediaCenter, go to Promoting featured items on the home page.

Note: Promoting featured items on the home page is the eighth tutorial in the Creating a site: using WebSphere Portal to implement a design series.

Transcript

Note: Caption describes narration. On-screen action describes the content shown in the video.

Table 8. Promoting featured items on the home page
Caption	On-screen action
Hi, I'm Nina Hawley with IBM's Digital Experience team. I just finished adding my Events and Products landing pages, along with content items and page components. My final step, as a content author, is to highlight featured content on the home page by adding page components and references to content items.	Welcome animation displays with video title: Promoting featured items on the home page.
Our HTML prototype for the home page includes a banner page component, which I added to the home page in the previous video, along with promotional text page components, and teaser page components to link to my two landing pages. I'll also add references to content items on the home page as well. Then, my site will match the HTML prototypes in the original designs.	The HTML prototype for the Greenwheels site displays. The banner page component is highlighted, followed by the two promotional text page components and the two teaser page components. References to content items are also highlighted.
Picking up where the previous video ended, I am still in edit mode, and I am still in the project that I entered in the previous video. The drafts in Site Manager have not been published yet. I'll click on the homepage in site manager to load it in the view frame.	Open the site manager. Click the home page, Greenwheels.
To begin, I'll open page components from the site toolbar, and add two promotional text page components. From the same palette in the site toolbar, I'll add two teaser page components.	From the site toolbar, click Page components. From the page components menu, click the Greenwheels promotional text page component and drag it to the project. From the page components menu, click the Greenwheels Teaser page component and drag it to the project.
Promotional text page components can be customized with text, and can span the entire width of the page. Teaser page components create links to other pages. In this case, one teaser page component will link to the Products page, and one will link to the Events page.	Enter text into the teaser page components. In the newly added teaser page component, click Select Link. A dialog box appears. Select Web Content. Then, click Browse to define the path to content that the teaser should link to. Enter `Read More` in the Link text field. Click Save. In the teaser page component, enter `Check out the rest of our bikes` in the Teaser Title field and enter a description of the linked content in the Teaser Text field. In the teaser page component, click Add or select image to select an image for the teaser.
Finally, I'll add references to two content items on the home page. This is similar to adding teaser page components - except the links point to content items instead of pages. To do this, I'll keep the home page loaded in the view frame, and click the context menu for a content item in site manager. Then, I'll click Add Reference to Page. As final clean up, I'll rearrange my content items and page components to match the HTML prototype.	From the site manager, click Context menu for the City Bike content item. Click Add Reference to Page. From the site manager, click Context menu for the Mountain Bike Tour content item. Click Add Reference to Page. On the draft page, hover over the Check out the rest of our bikes teaser page component. A menu bar appears. From the menu, select Move up.
My site is complete, so my project is ready to be published on the live site. For more details about the process of setting up a site and implementing a design, check out our roadmap in Knowledge Center. Don't forget to subscribe to the IBM digital experience channel for up to date videos from the digital experience team.	The finished home page displays. The titles of all of the videos in the series displays.