Creating New HTML Content

There are many concepts covered in this section. Here is a summary list of the topics found below:

Add the Content Item Line Spacing
Tabs Paste from Word
Metadata Linking
Aliases Bookmarks
Scheduling Temporary Markers
Templates Common Editing Features
Create the Content Tables
Styles & Headings Inserting Images

Content is added in the workarea under the content tab.  The most common content item is HTML content.  The procedure to add HTML content is described below. 
  

Add the Content Item:

The Content Area is at the bottom and there is also a row of tabs above the Content Area.  Each of these areas will be described in detail in the steps below.

  1. From the Content tab, navigate to the folder where you will be adding content
  2. Click on New on the top menu and then click HTML Content
  3.  htmlcontent
     

  4. The Edit Content window displays. 
  5. Fill in the Title for your page
  6. Be sure that Content Searchable is checked
  7. editor

  8. Fill in the required information for each tab


  tabs

 

 
Content Tab: This tab is where you will enter the actual content for your page. 
 
Summary Tab:  This tab can be left blank, or you can create a custom summary for your page.  If left blank, the Summary will be the first few sentences of your page

Metadata:  Metadata is descriptive information about your content.  Search engines use this information to index your page, so it is very important that the metadata is descriptive for the content of the page. 
Three key pieces of metadata are required for every page created on the FHSU site.  Keywords, Description, and Title.  You will not be able to save your page unless you have filled in this information.

  • Keywords:  Think of terms that are relevant to your page.  These should be short two to three word descriptions of your page.  You should add at least 2 to 3 keywords per page.  Example Keywords for this page:  Add HTML Content,  HTML Content, Add Content Item.  You want to choose keywords that a typical person searching to find the information on your page, might search.  To add the keywords, type in the text box, and then click the + sign next to the box to add each keyword.  The keywords should be added one keyword phrase at a time.
  • Description:  This should be a one to two sentence summary of the contents of the page
  • Title:  The title filled in here is what will appear in the title tab of your page.  See image.
  • Department-image: The department image is optional.  This is the banner image that is shown on your page.  The banner image should be sized 730px x 175px.  To update the image, simply click Edit, and browse to your image and select it.  Note: prior to selecting the image for your page, you will need to have uploaded the image into your library.  Refer to “adding Images” for instructions. 

metadata
 
Aliases: 
An alias is the name that is used for the website address.  For example, www.fhsu.edu/cmstraining.  “cmstraining” is the alias that is assigned to that particular page.  Every page created, is assigned an automatic alias.  Using the automatic alias, the name will just be the full title of the page.  However, sometimes it is more convenient to have a web address that is short and concise to make it easier for users to navigate to and remember.  This is when a manual alias should be used.  Leave blank if you want it to be automatically created.  To create a manual alias follow these steps:

  1. On the Aliases tab of your content item there will be an “Add Manual Alias” dialog
  2. Type in the name you want to give your page starting with what comes after “www.fhsu.edu/”  For example, to create a page with the website address of www.fhsu.edu/cmstraing/newcontent the box should be filled in with cmstraining/newcontent.  The preceding www.fhsu.edu/ is already known, and does not need to be included.  Be sure to put a checkbox in Active and Primary to make this the default address for the page.
    alias 

Schedule:  If a page is created that should only be “live” for a predefined period of time, then the schedule tab can be used to set up the page to automatically be removed on a certain date.  In the same sense, a page can be created and set to go live on a particular start date.  To set up a specific schedule for a page, fill in the corresponding date information with the date boxes on the right. 

  • Fill in the Action on End date radio button that corresponds to your needs. 
  • The Schedule tab is also used to archive old pages.  Users can remove old or unwanted content by using the Schedule tab to archive the content.  The instructions to archive content are as follows:  To remove a page from your content folder, you should schedule an end date of today, and choose archive and remove from site (expire).  The items will be removed from your content folder, but will still remain in the archived content.  Should the need arise, any content archived and expired can be easily restored. 
      Schedule

Comment:  Can make comments on changes made when editing content.  This information will not show up live on the website. 
 
Templates:  Each department/administrative unit is assigned one or more templates to be used in designing web pages.  Choose the template that should be used for the new content.


Once all necessary tabs are filled in, the content can be created.


Create the Content:


  1. Click in the Content editor area to begin building a page
  2. Start typing the content.  *NOTE: The editor is a WYSIWYG (What you see is what you get).  This means that content that is on screen as you edit, should appear in a form that will closely represent the final result on the live website.  Keep in mind that the final result will not be identical to what is shown in the editor, so adjustments to get the desired end result will likely be necessary.

The editor provides many features to help with designing pages.  Many of these features are very similar to the features used in Microsoft Word or other Word processing suites.  For example, the editor has the following features:

  • Cutting and Pasting
  • Find and Replace
  • Undo & Redo
  • Spell Check
  • Hyperlinking and Bookmarking
  • Add images
  • Translation features
  • Insert Symbols
  • Apply Heading Styles
  • Bold, Italicize, etc.
  • Lists and Bullets
  • Alignment Options
  • Insert Tables


Customized Fonts, sizes, and colors are not included in the editor.  A style sheet was created with type specifications and background colors that cannot be changed.  They provide much flexibility as far as size of type and use of bold and italicized type. The style chosen is very clean and readable on any browser or platform. This adds to the consistency throughout the site. It also ensures that viewers can see your pages correctly as the Web only supports a select group of fonts.

Creating the Content


Headings:  As previously mentioned, the font size, style, etc. are predefined.  You have the options to select a Heading style.  All pages should contain a Heading 1 Title.  If you have a subtitle, it should be in Heading 2.  Try to use the Headings in order to organize your page.  Search engines look for the heading tags to index your content. 
 headings

Line Spacing:
  To start a new paragraph, press enter.  This will move you down 2 lines.  If you just want to move down one line, press Shift + Enter and this will insert a line break.
 
Pasting from External Editor:  Do not use the paste from Word feature.  Microsoft Word attaches its own coding to your content that is not fully compatible with Ektron and will cause problems.  If you want to prepare text outside of the Ektron editor, use Notepad or another plain text editor.  You can paste from notepad into the CMS editor without issue.
 
Linking:  You can create links to internal pages, documents, images, bookmarks, emails, or external sites.  Follow these instructions to create a link:

  1. Highlight the text that you want to use to create the link
  2. Click on the Hyperlink Manager icon.  hyperlinkiconThe Link Manager dialog will pop up
      Link Manager
  3. In the URL text box, type in the external URL, or click the “…” to select an internal page or document.
  4. The library dialog box appears so you can choose the source of your internal link.
  5. By Default, the library pulls up the images library.  If you want to link to an image just navigate to the image file.  However, if you need to link to an internal page, or document, you will need to change the pull down at the top from “images” to “quicklinks.”  You will notice you could also link to a form by selecting Forms instead of Quicklinks.
      quicklink
  6. Choose the document or html item that you want to link to.
  7. If the item has a manual alias assigned to it, then a box will pop up and ask which address you want to link to .  Choose the assigned manual alias, and click OK.
  8. The Link Manager dialog box will now be active.  The Link Text box should contain the text that was highlighted previously.  This is what will show on the page for users to click
  9. The Target dropdown needs to be updated as follows: Leave as target for all internal links or change to New Window for any links that point to external sites. 
  10. The tooltip needs to be filled in for accessibility guidelines.  The highlighted text will be pre-filled here. 
  11. Leave style as no class
  12. Click Ok. 

Create a Bookmark Link:  A link can be created that will direct the user to a certain paragraph within a page.  This is useful for FAQ’s, or other pages that contain a lot of content. 

  1. Select the part of the page where you want the user to be directed.  Usually this would be the title of the paragraph you are linking to.
  2. Click on the Bookmarks icon bookmark
  3. The Bookmarks dialog pops up.  Fill in the Name and click Ok.
  4. This will create a bookmark that can be linked to.
  5. To link to the bookmark, follow the instructions in linking above, but use the Existing Bookmark area of the Link manager dialog
  6. Your newly created bookmark will be listed as a dropdown option in the Existing Bookmark section.  Select it and click OK.  The link will now be added.
      bookmarklink

Temporary Markers:  The temporary markers icon will toggle the temporary markers on and off.  It will be on by default.  Temporary Marker toggle button: temporarymark
 
Clear Formatting:  Highlight the area that you want to clear formats and click the clear formatting icon. clearformat
 
Common Editing Features:  The editor contains the basic editing functions like Bold, Italic, Underline, Lists, and alignment options.  These function as they would any other word processor.
   basicedits
 
Tables:  Adding tables is easy with the CMS.  Click the table icon and draw your table.  Add your content to each cell by clicking inside the cell.  Right click anywhere within the table to bring up the list of formatting options.  You can make the table border lines invisible by following the below instructions.


IMPORTANT:  To make the table border/grid lines invisible on the website, follow these instructions:

  1. Right click within the table area and choose Table Properties
  2. The Table Wizard dialog pops up.  Choose the Table Properties tab at the top
  3. Scroll to the bottom in the Table Style area.  Change the style from “Clear Style” to  #ct100_PageBody_ContentBlock1 tablelayout. 
    tablewizardtablestyle
      



Insert an Image

  1. To insert an image, click the library icon. 
  2. The Library Manager dialog will pop up.  For images that have already been added to the library, navigate to the folder, and scroll to find your image.
  3. The image can be inserted by selecting the image and clicking Add Library
  4. To insert a thumbnail version of an image click the thumbnail button next to the image.  ThumbnailThis will place a small version of the image that can be clicked to display the full size image.

Sample Thumbnail: librarydialog


Creating Content with the Smart Form

Smart forms are currently being designed to make layout, and standard pages easier to accomplish.  When these forms have been completed, the instructions for each form will be added to the training.

 

 

 HTML Content How To Video

13 minutes 3 seconds