Create and Customize Web Pages

In this article, you'll learn how to create, edit and delete web pages. You will also lean about the settings you can enter in these fields to control the page's URL, name, the template applied to the page, and much more.

Creating web pages

Creating a Web Page via the Admin panel

Web pages are HTML files that are created in this system by first logging into the Admin console and then choosing Site Manager > Pages > Add Page

You will now be taken to the Web Page details screen which you can start populating the contents of the web page using the online editor either in Design view or HTML view. You will also be presented with the settings for the page which is covered later in this article.

 

Creating a Web Page via Dreamweaver

In order to create Web Pages via Dreamweaver, you will first need to Install the extension for Dreamweaver. Once you have installed the extension you can then create Web Pages by referring to the Dreamweaver article.

 

Working with Web Page Settings

When creating or editing a web page, the web page details screen appears. You can use these fields to enter the details for your new page and specify where it lives in the directory structure. You can also click the More Options link for additional settings. The following list of options are displayed:

  • Page Name: Enter the page title for this web page. The name you enter here will be displayed in the top of the browser window, breadcrumbs and bookmarks.
  • Page Title: This field is used to enter the page's title. This will appear at the top of the browser window, as well as in tabs. It is also the text used when a visitor bookmarks this page and when a search engine indexes the page for search results.
  • Page URL: Enter the file name of the page as it will appear in the web address, such as about.html. You can use either the .html or .html file extension, however it is a best practice to always use the same file extension, to keep links consistent across your site.
  • Folder: Use this menu to define where the new page will be saved in the hierarchy of site pages. If you’d like to create a new folder, click the button next to the menu.
  • Template: Use this menu to select the template you want to apply to this page.
        Since you set the Primary template as the default, you can choose the selection: Use default template.. Later, if you create multiple templates for your site, you can also choose the name of the template from the list
  • 301 Redirect field: Usually, you'll leave this blank. However, you can redirect this page to display a different page in your site. Click the box to the right of the 301 Redirect field and browse to select a different page from your site. In this example, if the visitor enters http://milan.com/landing.html, if a 301 Redirect was set, the browser would display that web page instead of this landing.html page. Applying 301 redirects (rather than simply deleting an existing web page) is a good idea, because the URL retains the search engine rating. That means that even if you update your site and the resource is moved, it will adversely affect your site's search engine optimization (SEO).
  • Release Date and Expiration Date: If desired, you can schedule a date to publish this web page in the future. You can also set an expiration date, which will remove the web page content once it is no longer valid. This set and forget approach allows you to queue up web pages in advance and have them automatically appear and then disappear from your website.
  • Enabled: When you need to take a web page offline temporarily, uncheck the Enabled option to make the page temporarily inaccessible.
  • Exclude From Search Results: Only check the checkbox if you do not want search engines to index this page and display it in the search results. Normally, you will want your site pages to be indexed, so you'll only enable this option in the rare case that you want to hide the contents of this page. (And usually, you'll place the page inside a Secure Zone, to make it password protected, if you do not want the general public to view it).

 

Editing the Roles and Workflow settings 

At the very top of the Page Details panel, there are a couple of links that you can use to set the role (a group of one or more admin users of the site) and specify a Workflow for the editing of this web page.

Click the Edit link next to either the Role Responsible or Workflow sections to apply an existing workflow or assign the page to a user that belongs to a specific role.

In order to view the workflow assigned to a specific page use the More Actions button > View Workflow Process:

To learn more about roles and setting permissions for admin users, see Creating roles and assigning them to users to add permissions

To get more details about configuring workflows, read Setting up and managing workflow notifications.

In both cases, you'll first need to set up the roles and add users, as well as create the workflows, before you can use the Edit links shown above to select the workflow or assign the role responsible for this web page. If you've set a specific role, the users that are assigned to this role are notified one week before the web page is set to expire. 

 

Archiving and rolling back a web page

Every time you publish a web page, a copy of the web page is archived automatically. This enables you to rollback (revert) to any previous version of the page. This feature is extremely useful if you've made a mistake and want to display a previous version of the page, before you made changes to it.

To use this feature, click the Archive and Rollback option in the top menu.  

The list of archived copies for the web page are displayed. You can preview the previous versions of the page. When you find the version that you want to display on the live site, click Rollback. This feature is also available when you are editing templates. Please remember that this system stores archives for 90 days only. After that time, the versions of the page are deleted from the system.

Adding a Web Page to a Secure Zone

To make a web page secure, click the option Make Item Secure under More Actions.

In the interface that appears, move the name of the web page from left to right by assigning it to one or more Secure Zones. You can create an unlimited number of Secure Zones and manage visitor’s subscription to each Secure Zone. 

 

Generating thumbnails based on uploaded image files

If you access the code for a web page, you can enter the parameters to make a thumbnail (smaller image) of a larger image. 

  1. Choose Site Manager > Pages. Select the page from the list of pages, to edit it. 
     
  2. The Web Page Details page appears. By default, the page is displayed using the Design tab. Scroll down and select the HTML tab, to access the page code. 
      
  3. Locate the area of the page where you want to insert the thumbnail image. For example, you could click inside a div container (<div> tag) or a table cell (<td> tag), although you can also insert images inside paragraphs (<p> tags) or by themselves (outside a container).
     
  4. Type the following code to set the dimensions of the thumbnail and the path to the image you want to display:
<img src="/folder_name/image_file_name.jpg?Action=thumbnail&Width=80&Height=80" />

The first part of source path above:

<img src="/folder_name/image_file_name.jpg

 provides the path to the image file that will be converted into a thumbnail. 

For example, the following code will use a file named tophat.jpg that is uploaded to the site's images folder: 

<img src="/images/tophat.jpg?Action=thumbnail&Width=80&Height=80" />

		

As shown in the examples above, enter the numeric values for width and height to define the dimensions of the thumbnail image. 

Please note that the values for Width=80 and Height=80 refer to the image's width and height in pixels.

 

Defining DOCTYPEs in Web Pages

In general you have complete control over your web pages and hence the DOCTYPE you choose to use. However here is some points to help you streamline the use of DOCTYPEs throughout your website.

  • If a given web page has a DOCTYPE defined, and it uses a template, then the DOCTYPE of the web page takes precedence over any DOCTYPE in the template
  • If a web page does NOT have a DOCTYPE and it uses a template which has a DOCTYPE, then the template DOCTYPE is used for the web page
  • If no DOCTYPE is defined in either your web pages or their respective templates then the system will automatically append the following DOCTYPE to your web pages: HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN

 

The example below shows a Login link rendered by {module_whoisloggedin}, but you can use the same strategy to replace almost any text link on your site with a linked image.

By default, the {module_whoisloggedin} module tag outputs code similar to the following:

<div id="placeholder-whosloggedin" class="whoslogged">
No one logged in.
<a href="/MembersOnly.htm">Log in</a>
</div>

		

First, ensure that the <div> tag container is set to a specific width and height, by adding the following CSS code in the <head> of the document:

.placeholder-whosloggedin div {width:200px;height:200px;}

		

And then, paste this code (also in the <head> portion of the web page), to add the CSS rules that format the link and display the image: 

.placeholder-whosloggedin a{
display:block;
width:100px; //This line sets the width of the image
height:50px; //this line sets the height of the image
background-image:url('/images/button.jpg')  //This line specifies the path to the image
text-indent: -9999px;	                    //This line hides the existing linked text
}


		

 

Embedding media on web pages

In this section, you’ll learn how to add Flash content to your online business.

 

Using Adobe Dreamweaver to insert Flash content

Follow these steps to insert Flash content using Dreamweaver:

  1. Select Insert > Media > Flash. In the Select File dialog box, select the SWF file that you want to insert.
     
  2. Click OK. The SWF file is inserted into the web page.
     
  3. (Optional) While the SWF file is selected in the document window, click the play button in the Property inspector. This enables you to view the Flash animation.
     
  4. Select File > Preview in Browser and then select the desired browser from the list. This causes the browser to launch and display the page, so that you can see how the Flash content will look in relation to the rest of the page.
     
  5. Use the Files panel to Put the file. This uploads a copy of the page to the remote server via FTP.

To learn more about using Dreamweaver to insert Flash content, see the section on Inserting and previewing SWF files in the online Adobe Dreamweaver documentation.

Also see Adding video to a web page in the Video Learning Guide for Flash.

 

Inserting Flash content on a web page

When you insert Flash media on a web page, the actual HTML code looks like this:

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
width="550" height="400">  
  <param name="movie" value="/swf/flash_content.swf" />  
  <param name="quality" value="high" />  
  <param name="wmode" value="opaque" />  
  <param name="swfversion" value="8.0.35.0" />  
  <param name="expressinstall" value="/Scripts/expressInstall.swf" />  
     <!--[if !IE]>-->  
       <object type="application/x-shockwave-flash" data="/swf/flash_content.swf" width="550" height="400">    
     <!--<![endif]-->    
  <param name="quality" value="high" />    
  <param name="wmode" value="opaque" />    
  <param name="swfversion" value="8.0.35.0" />    
  <param name="expressinstall" value="/Scripts/expressInstall.swf" />    
     <div>      
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>      
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" />
</a>
</p>
    </div>   
 <!--[if !IE]>-->  
     </object>  
<!--<![endif]-->
</object>

Note: The code highlighted in red above will use the file name and ID name that matches your Flash content.

The object tag is used to embed an object within the document. The Classid parameter is used to specify the location of the object’s data. Microsoft Internet Explorer versions 3.0 and later use the codebase attribute to detect which version of the Adobe Flash Player ActiveX Control is installed on a user's computer. If the user's version is earlier than the version specified by codebase, Internet Explorer can automatically download and install the newer version of the Flash Player from the location specified in codebase.

 

Embedding a YouTube video on your site

To embed a YouTube video on your site, follow these steps:

  1. Visit the page on YouTube that contains the video you want to display.
     
  2. Click the link below the video to Get video embed code, as shown in the screenshot below:

  3. This copies the source code for the video to your clipboard. Return to the Admin Console and choose Site Manger > Pages. Select the page that you want to add the video, to see the Page Details page appear.
     
  4. Click the HTML tab to view the source code for the web page. Place your cursor at the desired location, and paste the source code into the HTML code. 
     
  5. Scroll to the bottom and click Update to push the updated page live. 

Note: The video content is still hosted on the YouTube site servers. You are simply adding a link to the video, so that it will display in your site a specific page. Since you are not actually hosting the video, it is a good idea to check periodically and ensure that the video content has not been removed from YouTube site, because if it has, it will not longer display on your website either. 

 

Working with Flash content and web forms 

You can use Flash content to create front end interfaces web forms hosted on this service. There are many ways to accomplish this, and you can use Flash animations to make forms more visual and interactive.

To learn more about creating Flash content, visit the Adobe Flash Developer Center.

The following example illustrates how to use variables from the Webform module in ActionScript (the programming language that controls Flash content).

In this example, the web form contains three fields with corresponding values: [FirstName, LastName, EmailAddress]. Adobe Flash was used to create a FLA file that contains Input text fields. The text fields were assigned the following instance names:

FullName
EmailAddress

In the Script window of the Actions Panel, the ActionScript code that ties the Flash movie to the database values is shown below:

	FullName = FullName.text;
	EmailAddress = EmailAddress.text;
	loadVariables("/FormProcessv2.aspx?WebFormID=10090&OID={module_oid}&OTYPE={module_otype}&EID=
	{module_eid}&CID={module_cid}", this, "POST");When working with media on your web pages, you may want to consider using Literature items, to learn more about creating and publishing Literature items, read Create and Customize Literature.