Creating New HTML Content

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


  

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.
    Example: On a page about scholarships awarded to Nursing students at a ceremony on May 24th, 2012
    Good Metadata: Scholarship Award Ceremony 2013, Nursing Scholarship Awards
    Bad Metadata: Nursing, Scholarships, Awards
    Fort Hays State University, FHSU, or any such variation does not have to be added to the keywords, as it is already within the template for the page. 
  • Title:  The title filled in here is what will appear in the title tab of your page.  It will also appear in search results as the title of the page.
  • Description:  This should be a one to two sentence summary of the contents of the page. It will appear on search results below the page title.
  • 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. 

metadataTitleandDescription
 
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

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:  Tables can be used for tabular data.  Do NOT use tables to format and or align images and pages.  To add a table 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.


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.  To work with our responsive design, images must not have width and/or height set to them from within the CMS via the Image Properties dialog.  Always resize the image to one of the below width's prior to uploading.  Each image will also need to be assigned to a class to work with responsive design.  See step 5 to assign the image class.

    Image Classes and sizes
    Img.Xsmall-150 = 150px wide
    Img.Small-250 = 250px wide
    Img.Small-320 = 320px wide
    Img.Medium-400 = 400px wide
    Img.Large-500 = 500px wide
    Img.Xlarge-700 = 700px wide (full width)
     
  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

  5. Assign a class to your image.  The image class width's are listed above in Step 2.  If your image width falls somewhere between these classes, always use the class that has a width smaller.  If a class is assigned that is larger than your actual image, it will severely diminish the quality of your image.  To assign the class, simply click once on your image and look at the bar at the bottom of the content editor. Choose the appropriate class from the classname dropdown list.
    image classes


Creating Content with the Smart Form

Smart Forms are used to make creating structured pages easier.  We have developed a smartform to be used for listing faculty and staff information.  The instructions to use this smartform can be found here: http://www.fhsu.edu/training/CMS-Training/Faculty-and-Staff-Listings/

 

 

 HTML Content How To Video

13 minutes 3 seconds


Back to top