Web Development

Print this page | E-mail this page

Web Development Site Information

Web Development Tutorial Updated

For Web Development Site

(http://www.miami.edu/login)

(last updated 6/26/06)

Note: Please e-mail Webmaster@miami.edu with any corrections, suggested edits, or questions.


Table of Contents for Tutorial


Introduction


In order to have consistent, professional navigation and presentation of the University's Web pages, the University's Webmaster has developed online forms using a product called the Web Development Tool that you can use to develop Web pages consistent with the design approved by the University's World Wide Web Committee. (Note that Web policies require that all administrative units follow the design guidelines; academic units are encouraged to use the Web Development Tool and/or to incorporate features from the design guidelines in their Web sites.) These forms allow you to create a Web site using only a Web browser and a word processor, without needing to know HTML. This tutorial is intended to help you understand the Web-development system and to provide step-by-step instructions for creating a Web site.


Web Development Site

 

Some characteristics of Web Development Site are as follows:

  1. Web Development Site does not require you to know HTML or to use FTP. Information for your Web pages is entered into a Web-base form by selecting options from pull-down menus, typing short amounts of text into input boxes, and copying material saved earlier in a word processing document.
  2. The Web Development Site requires the same username and password you were assigned by Information Technology (IT) for the exchange e-mail system. If you do not use it, you will need to obtain a CGCENT account by going to https://www.miami.edu/information-technology/forms/ExchangePrAccessForm.pdf.
  3. The Web Development Site supports "workflow," whereby pages created or edited by one individual must be approved and launched by someone else before they go live. Individuals can also be authorized to launch pages they have created.
  4. Because the Web Development Site allows information to be shared by more than one page, you create content independently of the other portions of the page, using a special form that asks you to indicate departments and audiences for which the content is relevant. Content is later integrated into a "shell" for a given page. As a result, creation of each Web Development Tool page involves two steps: adding content and adding a shell.
  5. The Web Development Site allows your Web page to be customized dynamically for each visitor on the basis of type of page he/she is viewing. For example, a visitor who is viewing a student-related page would see announcements that have been categorized as relevant for a "student" target audience but not one categorized as relevant for "faculty."

 


Workflow

 

The Web Development Tool workflow system allows one person (e.g., a student or staff person) to create a Web page and save his/her work in the Web Development Tool database, and another to approve and launch it. Alternatively, a single individual may be authorized to do all steps. The decision about who has what level of authority is made by a unit head, who submits a form to the University Webmaster indicating whether authorized users have permission to create and edit pages only (production level) or create, edit, approve, and launch (master level). If a department has multiple home directories, a separate workflow is created for each directory.

 

The Web Development Tool dynamically creates a UM Web Development Site Options page that is customized to your level of authority. If you have production authority, you can access only the sections of the UM Development Site Options page that deal with adding and editing/deleting announcements/events, page content, and page shells. If you have master authority, you have access to additional sections that allow you to approve and launch pages and accept or reject announcements/events in addition to being able to add, edit, and delete.

 

In deciding how to set up workflow, remember that a page will not appear on the UM site until it is launched, so masters must be able to launch pages when they are needed (and therefore a department may want to designate more than one master to handle launches when one is out of the office). On the other hand, if there are multiple masters, there should be an understanding about who launches what, and if one master launches a page right away the other master(s) won't find any pages to launch when he/she goes to the site.

 

Important: Although pages will not be viewable on the University of Miami site (or by typing in a URL) until they are launched, they may be viewed by the developers in a "non-live" development environment prior to launch. In addition, if pages are to be accessed from somewhere else in the UM site, a link from that page to the new page must be added. Pages must be launched before a link to them can be created on another page.


Setting up a Web site

 

When you build a Web site, the home page for that site will have an address on the University's main server in the form of a directory for your office/department called your "home directory." For example, someone accessing the home page for the fictional Support Department would point his/her browser to the home directory located at http://www.miami.edu/support/.

 

To set up a home directory, the individual who heads your department/office must fax a completed Site Request Form to the University Webmaster at 305-284-2840 and also designate what type of responsibility each authorized user has by filling out the online Authorized Users Form.

The Web Development site uses user ids and passwords from IT Exchange e-mail system. If you do not have an e-mail account on IT Exchange, you must fax a CGCENT Access Form to the University Webmaster at 305-284-2840. If you become an authorized user after the site has been created, an existing Master for your department must send e-mail to the University Webmaster indicating the home directory you need access to and the access type required.

 

The Site Request Form includes a section where you select four audiences that are most apt to use your Web site. Note that audiences refer to groups of people (e.g., students, faculty, alumni), not topics (e.g., admission, academics & research). Links for these four audiences will appear at the bottom of menu pages (whereas navigation links associated with various topics appear in the light orange sidebar on the left of each page). In particular, these four home-page audiences are as general as possible. Later, when you select target audiences that will be used to filter announcements for each of your Web pages, those audiences may be more specific than the four audiences that appear at bottom of your home page.

 

Currently you can create four distinct types of pages for the UM Web system, each of which has its own section of the tutorial. You can also create announcements and events for your department that are geared toward audiences who would view your Web pages. These announcements and events will also be posted in special boxes on menu and submenu pages for any department that you designate as relevant if that department has selected your department as a "relevant department" for its Web pages.

 

 

Menu Pages (Home Pages)


 

A menu page is the starting page for major segments of the Web site and serves as the home page for your department. Each home directory can have only one home menu page. If other menu pages are created, they will need to be linked from the home menu page, which is always the first menu page created. Menu pages provide the main organizational structure for your site through links to up to 10 other Web pages (usually submenu or Information pages on your site). The Explore UM is an example of a menu page. Note: It is possible, but not supported, to create more than one menu page. If you need multiple menu pages, it is advised to request a second site.

 

Submenu Pages 


 

Submenu pages provide additional structure to your site by displaying links to groups of pages that deal with a common topic. The About UM page is an example of a submenu page that has links to a number of pages that provide general interest information about the University. Submenu pages group related links and become very useful when there are too many links on your site (the maximum number of links from a main menu is 10).

 

Information Pages 


 

Information pages provide most of the content for the Web site. The History page is an example of a content page. 

 

Table of Links Pages


 

Table of Links Pages are information pages with a bulleted list of links.

 

Announcements and Calendar Events


 

Menu and submenu pages have been designed to display announcements (either your own or university-wide announcements) and events for the upcoming week from the online calendar that relate to audiences you have selected as relevant for your Web page. Your department can use forms to create announcements and events that appear on your own Web site, on other department Web sites that accept your announcements and events, and on the University's Web-based calendar. Your pages can display announcements created by other departments if you have selected those departments as "Relevant department(s)" for your Web page.

 

 

Although your menu page can be accessed from a URL using the directory name, normally submenu and information pages have the long complex URLs that result when a Web page is generated from a database. If you will be using the URL for one of these Web pages in a print publication, you can e-mail the University Webmaster to request a short, easy-to-enter URL for that page.


This tutorial

 

 

Using this tutorial online will work best if you have two browsers running at the same time, one browser pointing to this tutorial at http://www.miami.edu/web/tutorial (referred to as the "tutorial browser") and the second browser pointing to the UM Web Development Site at https://www.miami.edu/login , where you follow the steps to build your site (the "development browser"). A link to the tutorial appears at the bottom of each development page.

 

Each section of the tutorial will include an introduction, a list of steps to follow, tips for effective pages, and a "Give it a try" section. When you reach the "Give it a try" section, you should switch to the development browser and follow the steps described for that section of the tutorial. Lists of frequently used instructions (e.g., copy, paste, select all text, open a new browser, switch back to the tutorial browser ) appear at the end of this tutorial.

 

The tutorial is designed to provide sufficient detail for those who may be unfamiliar with different aspects of using a Web browser. If you already know how to carry out one of the steps, you can just skip that portion of the tutorial and move on to the next step. Often there is more than one way to carry out a command (e.g., by using a pull-down menu, right mouse, or keyboard command). For example, you can move to the next text or pull-down option box on a Web-based page-entry form by pressing the Tab key and can move back up by pressing the Shift and Tab keys simultaneously (or by using your mouse). You can select a single option in a pull-down menu used in the development templates three different ways: by typing the first character of the option you want and then using the arrow keys or by using the "Page Down" and arrow keys or by using your mouse. To select multiple items, you will need to use your mouse. Items in pull-down menus are arranged alphabetically. 

 

Labels for menu options on browsers and word processing packages will vary somewhat depending on the version and type of software package you are using. If the options specified in the instructions of this tutorial do not match exactly the options on your package, try the option on your software that seems closest.

 

It is strongly suggested that you build your Web site from bottom to top, starting with information pages, then adding submenu pages, and saving the main menu page (or home page) for last. In addition, you should create menu/submenu content before creating the shell for those pages so that when you view the completed the shell, the content section will be included. If you are unable to finish a page, you can save it and then edit it at a later time to complete it.


Getting started: images and text

 

 

Introduction

 

One thing you should do before creating your Web pages is choose an image. Menu and submenu pages require a single image on each page. Information page forms allow for either a single image or no image. If you wish to include additional images on your information page, you will need to do so by using HTML code. All images selected through the UM Web development forms must reside in the image library on the Web Development Site. If you wish to use your own images, you will need to arrange for them to be added to this library (see below for instructions on how to do this).

 

A second preliminary task is to compose the text that will appear on each page.

 

Steps

  1. Browse the image library at https://www.miami.edu/image-library/ and decide on an image for your menu page, which will appear in the banner of your page. You'll also need another for each submenu page. In addition, if you will be using images on information pages, decide on them as well. For later reference, be sure to note on a sheet of paper the category and location of the images you wish to use.


  2. If you want to use one or more of your own images, go to the Submit Files  to add your images to the server.


    If you would like to add your images to the campus image library (it should be a landscape orientation, 216 x 162 preferred), send an e-mail to Webmaster@miami.edu with the desired image as an attachment in order to have the image The location in the library will match the file name in your e-mail.
  3. Before creating pages, use your word processor to create text for at least one content page, one submenu page, and one menu page (your home page). Save each as a separate document before starting the tutorial.

 

 

Tips:

  1. Before you start developing a Web site, be sure to spend sufficient time planning its structure. Type an outline or sort index cards into groups of related topics to help plan your organization. You may have up to 10 links from your menu page, so you will need to have at most 10 groups of related pages accessed from your home page (each represented by a submenu or information page). Submenus can link to additional submenus if extra levels of information are required.
  2. If your site is very large and complex, consider setting up separate directories for each department or area, each with its own menu page, so as to avoid too many nested subdirectories.
  3. Think carefully about the types of audiences that will access your site and be sure to include the types of information they will want to see (the best way to find out is to ask individuals from each group what they would look for on your Web site). Also, try to determine which pages you want them to visit and be sure to include several links to those pages, perhaps including embedded links on the content for your home page or submenu pages.
  4. Use a different image for each page on your site, rather than repeating images.


 

Give it a try: 

 

If you have not already done so, browse the image library and make notes of images you wish to use on your home page, submenu page(s), and information pages (latter is optional). If you want to use one or more of your own images, go to the Submit Files section to add your images to the server. Create any text you will be using for the tutorial using a word processor and save each set of text as a separate document.


Opening a second browser for the development site

 

 

Introduction

 

The tutorial works best if you open a second browser and point to the UM Web Development Site. 

 

Steps

  1. Open a second browser.
  2. Point the new browser to the Web Development Site by selecting the browser address (by clicking on the address box) and then copying and pasting (or typing) the following URL into the address box and pressing Return key:  https://www.miami.edu/login

Tips:

 

If you don't remember something from this tutorial while you are going through the steps, you can switch back to the tutorial browser to refresh your memory. Alternatively you may wish to print this tutorial from the Web page and use it for reference.

 

 

Give it a try:

 

Open a new browser and point it to the UM Web Development Site by following the steps outlined above. Then switch back to the tutorial browser.


Logging in to the UM Web Development Site

 

 

Introduction

 

To be able to login to the UM Development site, the individual in charge of your office or department must have submitted an authorized user form (or, if the site has already been set up, have verified via an e-mail to the University Webmaster that you are an authorized user). Your user name and password will be the same as the Exchange e-mail user-id and password assigned by IT to utilize the UM Development site. If you have not received a user name and password, contact the University Webmaster.

 

 

 

Steps

  1. If you have not already done so, open a second browser for the UM Web Development Site, which will point you to the login page.
  2. Enter the username and password assigned to you and click on the "Submit" button. Use all lower case. This will take you to the UM Web Development Site Options page.
  3. If your department has more than one home directory, you will need to indicate which one you are working on from the pull-down menu that will appear on your login screen. If you have only one home directory (the norm), no pull-down menu will appear.

 

Tips:

 

Bookmark the UM Web Development Site on your browser for future reference. You also may wish to bookmark this tutorial and the site with announcements (and updates) about Web development.

 

 

Give it a try:

 

At this time, you should login to the UM Web Development Site on the development browser and then switch back to this tutorial.


Personal Preferences

 


Introduction

Personalize the site according to how you would like to handle things such as email, expiration of pages, approval of pages, and the layout of the options page.

Steps:

  1. If you have not already done so, open a second browser for the UM Web Development site and login. Locate the "PERSONAL PREFERENCES" section.


  2. Expiration/Approval: In this section you can select options relating to expiration notices and approval requests. To personalize this option, click the "Go" corresponding to the Expiration/Approval option.



    • Expiration:
      k
      • Select the users you would like to receive a copy of the expiration notice by selecting their username in the drop-down menu. NOTE: Your name will not appear here because you need to send a copy to someone other than yourself on expiration notices. You will receive notices for the pages you created.
      • Select how many notices you would like to receive. If you would like the user you selected to receive copies of any of the notices, check the box to the corresponding to the notice number.
    • Approval:

      • Select the user you would like to request approval from in the drop-down menu. To send a second request to another user, select their name from the drop-down menu.
      • To receive notification of approval of a page, click the circle corresponding to Yes for that option. The default value is No.
      • To receive a summary of pages needing to be approved or launched click the circle corresponding to Yes for that option. The default value is No.
      • If receiving a summary, select when the summary should be sent from the pull down menu.
    • When you have finished updating this option click "Update My Changes" to save changes and return to the options menu. To reset values click "Reset". To disregard any changes you made, click "Return To Options Page Without Saving".
  3. Change My Default E-mail:   This option allows you to choose and change which e-mail the University sends mail to. To personalize this option, click the "Go" corresponding to the Change My Default E-mail option.



    • Your current e-mail address will be displayed.
    • To change, enter the new e-mail address in the box to the right of "Change E-mail to:"
    • When you have finished updating this option click "Update My Changes" to save changes and return to the options menu. To disregard any changes you made, click "Return To Options Page Without Saving".
  4. Default Values:   This option allows you to select default values which will automatically be selected for any pages you may create. To personalize this option, click the "Go" corresponding to the Default Values option.



    • Relevant Department: The relevant departments for your pages indicate departments that might be interested in your content. It is recommended that you select your department and any departments that are closely related to your department.

      To select departments for which your pages are relevant, do the following:

      • Verify your department is selected on the pull-down menu. If not, click on it.
      • Select any additional departments that may be interested in your content by holding down the CTRL key on your keyboard and clicking on that department.
    • Target Audience(s): Target audiences indicate audiences for whom your pages are relevant.
      Select all audiences for whom your pages are relevant. To select more than one hold down the CTRL key on your keyboard and click on the additional audiences.
    • Keyword List: Keywords are very important because they are used by search engines on the UM site and elsewhere.
      Enter a list of words or phrases that describe the content. Use lower case and separate keywords with commas. Be sure to include alternative spellings for key terms (e.g., "theater" and "theatre," "admission" and "admissions") and common abbreviations ("RSMAS" for "Rosenstiel School," "psych" for "psychology").
    • Days Valid: The "days valid" field indicates an update schedule (i.e., the number of days by which the Web page should be updated). Because it is important to keep material up-to-date, the Web development system will send you e-mail after the indicated number of days valid have elapsed to remind you to update your page. The e-mail will explain that the page will disappear from the University Web site after 6 weeks if you do not update the page (at a minimum, by resetting the days valid field). You will receive a second reminder 2 weeks after the first, and a third and fourth reminder during the following 2 weeks. The fourth reminder, which will include a copy to your unit head, will remind you that the Web page will disappear in 2 weeks if it is not updated. Then 2 weeks later (6 weeks after the first notice), you will receive a notice that your Web page is no longer active.
      Note that although the page will no longer be available on the University site, information about the page will still be on the UM Web Development Site until it is explicitly deleted.
      Select the number of days within which material should be updated from the pull-down menu. Maximum is 365 days.
    • Language: The language field indicates the language in which the announcement/event is written (e.g., English, Spanish, French, German, Arabic, Portuguese). Note that selecting a language other than English will not translate the page--this is just a flag to let the system know the language you used to write the page.

      If the page is written in Spanish, French, German, Arabic, or Portuguese, select the appropriate option from pull-down menu. The default is English.
    • Type: This field is used to indicate whether your information should be treated as an announcement only, an event only, or as both.

      To select the type, do the following:

      • Select "announcement only" if the information is not for an event.
      • Select "event only" if the information is for an event that should be included in the calendar and in the event box on submenu pages but does not need to be in announcement boxes on menu pages.
      • Select "both" if the information is for an event that should be included in the calendar, the event box on submenu pages, and also the announcement box on menu pages.
    • Scope: Announcements and events can be limited to users accessing the site from a University of Miami computer.

      If you wish to restrict access to just those visitors with "miami.edu" IP addresses, select the "Local" option. The default is "Global."
    • When you have finished updating this option click "Update My Changes" to save changes and return to the options menu. To reset values click "Reset". To disregard any changes you made, click "Return To Options Page Without Saving".
  5. Update Options Page Layout: This option allows you to select which options you have visible on the options page according to your preferences. To personalize this option, click the "Go" corresponding to the Update Options Page Layout option.



    • All options are selected by default. To deselect click on the box corresponding to the option. The check mark should disappear.
    • When you have finished updating this option click "Update My Changes" to save changes and return to the options menu. To reset values click "Reset". To disregard any changes you made, click "Return To Options Page Without Saving".

Creating an Information Page

Introduction


Unlike menu and submenu pages, which each require two steps to create (one for adding content and the other for adding a shell), the shell for an information page is automatically created for you when you save its content. You must, however, launch it before it can be linked from a menu or submenu page. When you are finished with this section of the tutorial, you will have created an information page that has the following sections:


Steps

  1. If you have not already done so, open a second browser for the UM Web Development Site and login.
  2. On the UM Web Development Site Options page, locate the "ADD" section and the "Information Page" option in this section. Click on the corresponding "ADD" button, which will bring you to the following "Add Content for Information Page":




  1. Headline: The headline normally appears as text between the toolbar and content text and also on the development site in various pull-down menus. Enter a short description of the content (1-5 words), using upper/lower case letters and other ASCII characters (maximum 230 characters). The headline should correspond to the link name you will use to get to this page. If you do not wish the headline (or a portion of it) to display on your page, put a "less than sign" and "exclamation mark" (<!) to the left of the text and a "greater than sign" (>) to the right (e.g., the headline should read <!headline>. If you want only part of the headline to display it should read "headline-to-display<!part you don't want to display>" ). Putting material in the headline between the <! and > will keep it from displaying but you can still differentiate this page on pull-down menus.
  2. Bar Color and Photo:   Selects the color of the headline bar and allows the possibility of placing a photo from our image library.
  3. Internal Page Description: This is optional. The Internal Page Description is a description of your page that helps you to identify it in the drop-down menus in the development site.
    Enter a short description of your page to help you discern multiple pages with the same name.
  4. Keyword List: Keywords are very important because they are used by search engines on the UM site and elsewhere.
    Enter a list of words or phrases that describe the content. Use lower case and separate keywords with commas. Be sure to include alternative spellings for key terms (e.g., "theater" and "theatre," "admission" and "admissions") and common abbreviations ("RSMAS" for "Rosenstiel School," "psych" for "psychology").
  5. Text: The text entered in this box is displayed in the main part of the website and is the content for the page. In this text area you are allowed to enter regular text paragraph as well as HTML (Hypertext Markup Language) to add content to your page.

    To type text directly into the box, if you have installed eWebEditPro do the following:

    • Position your cursor to the beginning of the box and type the text for the paragraph.
    • Use the tool bar to change fonts, colors, add ordered and unordered lists, format paragraphs, and add pictures or tables.

To type text directly: Right click in the box and select "View as HTML" and position your cursor to the beginning of the box and type HTML

To copy HTML code from a word processing document, do the following:

  • Open the word processing document that contains the text for this information page.
  • Select the "Save as HTML..." or "Save as Web Page..." option from the File menu, enter the desired file name and location, and click on the "Save" button (this will create a second file on your computer).
  • Select the "HTML Source" option from the View menu.
  • Select the entire source.
  • Copy the entire source document.
  • Open the development browser and point to the Text box.
  • Right click in the box and select "View as HTML"
  • Paste the text into the box.
  • Switch back to the word processing document and exit the source document. At this point both the original text version and the HTML version will have been saved but will no longer appear in the word processor. Switch back to the development browser and continue the steps.

Alternatively you may copy the HTML source from FrontPage, Communicator, or any other Web authoring package that you have been using to create Web pages. ***You may also copy text directly from Word, keeping the documents formatting without saving the HTML***   Note that all content inside the main body must be less than 500 pixels wide. 

 

  1. Upload an HTML File: This area allows you to upload HTML (Hypertext Markup Language) files to add content to your page. The uploaded file is displayed in the main part of the website and is the content for the page.
    Click "Browse" and locate the file on your hard drive. Select the file by clicking on it, and click on the "Open" button. The location of the file should appear in the textbox. Note: Text in the text box will display above submitted HTML.
  2. Text Border: Gives you the option of putting a border around your text.
  3. Display Announce Box: Decides on whether or not you want to display the announcements box on this web page.
  4. Target Audience(s): Target audiences on content pages indicate audiences for whom this content is relevant. Target audiences for information pages should be as specific as possible. More general audiences can be used on menu and submenu pages.
    Select all audiences for whom this content is relevant and delete any you don't want.
  5. Right-Column Html:   Allows you to put user-defined html in the right hand column of the body. Total content of main page and right-column must be less than 500 pixels.
  6. Scope: Gives you two choices: Global which allows anyone to see it, and local which only allows people with UM IP’s to use it.
  7. Days Valid: The "days valid" field indicates an update schedule (i.e., the number of days by which the Web page should be updated). Because it is important to keep material up-to-date, the Web development system will send you e-mail after the indicated number of days valid have elapsed to remind you to update your page. The e-mail will explain that the page will disappear from the University Web site after 6 weeks if you do not update the page (at a minimum, by resetting the "days valid" field). You will receive a second reminder 2 weeks after the first, and a third and fourth reminder during the following 2 weeks. The third reminder, which will include a copy to a second master for your department, will remind you that the Web page will disappear in 2 weeks if it remains not updated. Then, after 2 weeks, (6 weeks after the first notice), you will receive a notice that your Web page is no longer active. Note that although the page will no longer be available on the University site, information about the page will still be on the UM Web Development Site until it is explicitly deleted.
    Select the number of days within which material should be updated from the pull-down menu. Maximum is 365 days.
  8. Language: The language field indicates the language in which the content is written (e.g., English, Spanish, French, German, Arabic, Portuguese). Note that selecting a language other than English will not translate the page--this is just a flag to let the system know the language you used to write the page.
    If the page is written in Spanish, French, German, Arabic, or Portuguese, select the appropriate option from pull-down menu. The default is English.
  9. Author: This section displays the original author of the information page. In most cases this will have your username.
  10. Dept: This section displays the department the page was created for.
  11. Click on the "Preview Content" button to preview the text and image (unless "no image" was selected). Because the page header for the content depends on the where the page is "located" (i.e., where it's linked from), you will not see a complete content page until after you have linked the content from a menu or submenu page. If the preview looks correct, you should save the information.

    To preview and save (or correct), do the following:

    • Once you entered data for all the required fields, preview the content by clicking the "Preview Content" button located at the very bottom of the page.
    • If the content looks correct, scroll to the bottom of the page and click on the "Save Content" button.


    • Alternatively, if you want to make changes, scroll to the bottom of the page and click on the "Back to Edit" button and make the desired corrections. Then click the "Preview Content" button again, and then the "Save Content" button.**DO NOT USE YOUR BROWSERS "Back" BUTTON.**
  12. Click on the "Save Page" button will bring up a page indicating that you have saved successfully and that a default shell has been created for it (plus a reminder that the page needs to be launched before a link to it can be created).

    Click on the "Back to Edit" button to continue making modifications on the page.

    Click on the "Return to Options Page" link at the bottom of the Save page. If you have master authority, you will also have buttons to "Launch" and "Approve," which will be explained in the next section.



Tips:

  1. If you have producer authority, once a page is complete the master you have specified in your personal preferences will be notified.
  2. Use bold, italics, and other ways of organizing your information.
  3. Consider using bullets on content pages since users tend not to read entire documents.
  4. Embed links if you are referring to other sites.
  5. Avoid using the "Back" option on your browser.

Give it a try:


At this time, go to the development browser, select the option for adding information pages, follow the tutorial steps for creating content, and then return to this tutorial. Remember, if you forget something from the tutorial, you can switch back to the tutorial browser.


Information Page Using Another Department's Content


 

Introduction


Creating an information page using another department's content requires the same set-up for creating a new information page. The shell is automatically created for you when you save its content. You must, however, launch it before it can be linked from a menu or submenu page.


Steps

  1. If you have not already done so, open a second browser for the UM Web Development Site and login.  
  2. On the UM Web Development Site Options page, locate the "ADD" section and the "Information Page Using Another Department's Content" option in this section. Select the department from which you will be creating the page in drop down menu and click on the "ADD" button to the right of the drop down menu, which will bring you to the following "Add Content for Information Page Using Another Department's Content" page:


  1. Other Department's Content: This section contains a drop down menu of Headlines for all of that department's live information pages. Select the content you wish to use from the drop down menu and click the "Preview Content" button. This will bring you to a web page set up by the department you selected, from which you will find content for your information page.


  2. Dept: Displays which department's content you are viewing.

Give it a try:

At this time, go to the development browser, select the option for adding information pages using another department's content, follow the tutorial steps for creating content, and then return to this tutorial. Remember, if you forget something from the tutorial, you can switch back to the tutorial browser.


Adding a Table of Links Page



Introduction


A table of links page is a page of links from your site to other sites. This page can contain content but content for this page is not required.


Steps

  1. If you have not already done so, open a second browser for the UM Web Development Site and login.
  2. On the UM Web Development Site Options page, locate the "ADD" section and the "Table of Links Page" option in this section. In the box to the right of the corresponding "ADD" button, input a number between 0 and 30. This will be the number of links you are adding to your tables of links page.


  3. Clicking the "ADD" button brings you to the following "Add Table of Links Page". If you have not entered a number, you will automatically be given the option of adding 30 links:


  1. Headline: The headline normally appears as text between the toolbar and content text and also on the development site in various pull-down menus. Enter a short description of the content (1-5 words), using upper/lower case letters and other ASCII characters (maximum 230 characters). The headline should correspond to the link name you will use to get to this page. If you do not wish the headline (or a portion of it) to display on your page, put a "less than sign" and "exclamation mark" (<!) to the left of the text and a "greater than sign" (>) to the right (e.g., the headline should read <!headline>. If you want only part of the headline to display it should read "headline-to-display<!part you don't want to display>" ). Putting material in the headline between the <! and > will keep it from displaying but you can still differentiate this page on pull-down menus.
  2. Bar Color and Photo:   Selects the color of the headline bar and allows the possibility of placing a photo from our image library.
  3. Internal Page Description: This is optional. The Internal Page Description is a description of your page that helps you to identify it in the drop-down menus in the development site. Enter a short description of your page to help you discern multiple pages with the same name.
  4. Keyword List: Keywords are very important because they are used by search engines on the UM site and elsewhere. Enter a list of words or phrases that describe the content. Use lower case and separate keywords with commas. Be sure to include alternative spellings for key terms (e.g., "theater" and "theatre," "admission" and "admissions") and common abbreviations ("RSMAS" for "Rosenstiel School," "psych" for "psychology").
  5. Text: The text entered in this box is displayed in the main part of the website and is the content for the page. In this text area you are allowed to enter regular text paragraph as well as HTML (Hypertext Markup Language) to add content to your page.

    To type text directly into the box, if you have installed eWebEditPro do the following:

    • Position your cursor to the beginning of box and type the text for the paragraph.
    • Use the tool bar to change fonts, colors, add ordered and unordered lists, format paragraphs, and add pictures or tables.

To type text directly: Right click in the box and select "View as HTML" and position your cursor to the beginning of the box and type HTML.

To copy HTML code from a word processing document, do the following:

Open the word processing document that contains the text for this information page.

  • Select the "Save as HTML..." or "Save as Web Page..." option from the File menu, enter the desired file name and location, and click on the "Save" button (this will create a second file on your computer).
  • Select the "HTML Source" option from the View menu.
  • Right click in the box and select "View as HTML"
  • Paste the text into the box.
  • Switch back to the word processing document and exit the source document. At this point both the original text version and the HTML version will have been saved but will no longer appear in the word processor. Switch back to the development browser and continue the steps.

Alternatively you may copy the HTML source from FrontPage, Communicator, or any other Web authoring package that you have been using to create Web pages. ***You may also copy text directly from Word, keeping the documents formatting without saving the HTML*** Note that all content inside the main body must be less than 500 pixels wide.


  1. Upload an HTML File: This area allows you to upload HTML (Hypertext Markup Language) files to add content to your page. The uploaded file is displayed in the main part of the website and is the content for the page. Click "Browse" and locate the file on your hard drive. Select the file by clicking on it, and click on the "Open" button. The location of the file should appear in the textbox. Note: Text in the text box will display above submitted HTML.
  2. Text Border: Gives you the option of putting a border around your text.
  3. Display Announce Box: Decides on whether or not you want to display the announcements box on this web page.
  4. Right-Column Html:   Allows you to put user-defined html in the right hand column of the body. Total content of main page, and right-column must be less than 500 pixels.
  5. Scope: Gives you two choices, Global which allows anyone to see it, and local which only allows people with UM IP’s to use it.


  6. Table of Links: This section is where you enter links which will appear on your table of links page. In this section you enter the name of the link as well as the path.
    To create a table of links, do the following:

    • "If you wish to filter the calendar so that only certain departments are displayed, please click here": Clicking on this link allows you to generate a calendar which will contain content for only specified departments. You are supplied with a link which you will add to your "Table of Links".
    • #:This is the link order number, the number itself will not appear on the page.
    • Link Name :A link name should be no longer than 3 words. Note: If you do not enter something in the "Link name" field, the item will not be saved--even if you select a place to link to.
    • Web Development Pages: This allows you to link to different departments or pages within your department. If you do this, do not type anything in the section entitled "External (URL or Other Department Headlines)". If you select a link from another department, the address will automatically show up in the "External" box. If you choose "Select Another Department" a window will pop-up containing a drop-down menu of all of the departments. Select the department you would like to link to and hit "Select". From the drop-down, select the Headline of the page you would like to link to. NOTE: The headline can be found in the title bar of your browser when you view the page. Click "Add". Next, select the path you would like the link to follow and click "Add".
    • External (URL or Other Department Headlines): Choosing not to select a web development tools page, you can manually enter an external link. Also, choosing a link from another department puts the address in this box. Note: When typing in the links, remember to use http://www
    • Printer Friendly: If this option is selected, when the user clicks to go to this page it will load the printer-friendly version of the page (i.e., without the navigation items.)
  7. Days Valid: The "days valid" field indicates an update schedule (i.e., the number of days by which the Web page should be updated). Because it is important to keep material up-to-date, the Web development system will send you e-mail after the indicated number of days valid have elapsed to remind you to update your page. The e-mail will explain that the page will disappear from the University Web site after 6 weeks if you do not update the page (at a minimum, by resetting the "days valid" field). You will receive a second reminder 2 weeks after the first, and a third and fourth reminder during the following 2 weeks. The third reminder, which will include a copy to a second master in your department, will remind you that the Web page will disappear in 2 weeks if it remains not updated. Then, after 2 weeks, ( 6 weeks after the first notice), you will receive a notice that your Web page is no longer active. Note that although the page will no longer be available on the University site, information about the page will still be on the UM Web Development Site until it is explicitly deleted. Select the number of days within which material should be updated from the pull-down menu. Maximum is 365 days.
  8. Language: The language field indicates the language in which the content is written (e.g., English, Spanish, French, German, Arabic, Portuguese). Note that selecting a language other than English will not translate the page--this is just a flag to let the system know the language you used to write the page.
    If the page is written in Spanish, French, German, Arabic, or Portuguese, select the appropriate option from pull-down menu. The default is English.
  9. Author: This section displays the original author of the information page.
  10. Dept: This section displays the department the page was created for.
  11. Click on the "Preview Content" button to preview the text, image (unless "no image" was selected), and links. Because the page header for the content depends on the where the page is "located" (i.e., where it? linked from), you will not see a complete content page until after you have linked the table of links from a menu or submenu page. If the preview looks correct, you should save the information.

    To preview and save (or correct), do the following:

    • Once you entered data for all the required fields, preview the content by clicking the "Preview Content" button located at the very bottom of the page.


    • If the content looks correct, scroll to the bottom of the page and click on the "Save Page" button.
    • Alternatively, if you want to make changes, scroll to the bottom of the page and click on the "Back to Edit" button, and make the desired corrections. Then click the "Preview Content" button again, and then the "Save Page" button.
  12. Click on the "Save Page" button will bring up a page indicating that you have saved successfully and that a default shell has been created for it (plus a reminder that the page needs to be launched before a link to it can be created).



Give it a try:


At this time, go to the development browser, select the option for adding a table of links, follow the tutorial steps for creating content, and then return to this tutorial. Remember, if you forget something from the tutorial, you can switch back to the tutorial browser.


Adding content for a menu/submenu page



Introduction


Adding a submenu page requires two sets of steps: adding content and adding a shell for the page. When you are finished with the two parts of this "Add Menu/Submenu" section of the tutorial, you will have created a submenu page that has the following sections:


Steps

  1. If you have not already done so, create the text you wish to appear on the submenu page and save it as a word processing document.
  2. If you have not already done so, open a second browser for the UM Web Development Site and login. On the UM Web Development Site Options page locate the "ADD" section and the "Content for Menu/Submenu Page" option in this section. Click on the corresponding "ADD" button to the right, which will bring you to the following "Add Content for Menu/Submenu" Page:



  1. Headline: The information entered in this field appears above the text in the upper right corner of the page, in "bread crumbs" that appear in the left side of the top green bar, and in pull-down menus used in development templates. The headline should correspond to the link name you will use to get to this page.
    Enter a short label for the text that follows (1-5 words), using upper/lower case letters and other ASCII characters (maximum 230 characters). Text should correspond to link-names in pages from which this page is linked.
  2. Bar Color and Photo:   Selects the color of the headline bar and allows the possibility of placing a photo from our image library.
  3. Text Border: Gives you the option of putting a border around your text.
  4. Menu Bar Text: Displays in the bar that you defined with bar color and photo.
  5. Internal Page Description: This is optional. The Internal Page Description is a description of your page that helps you to identify it in the drop-down menus in the development site.
    Enter a short description of your page to help you discern multiple pages with the same name.
  6. Keyword List: Keywords are very important because they are used by search engines on the UM site and elsewhere. Enter a list of words or phrases that describe the content. Use lower case and separate keywords (separated by) commas. Be sure to include alternative spellings for key terms (e.g., "theater" and "theatre," "admission" and "admissions") and common abbreviations ("RSMAS" for "Rosenstiel School," "psych" for "psychology").
  7. Text: The text entered in this box is displayed in the main part of the website and is the content for the page. In this text area you are allowed to enter regular text paragraph as well as HTML (Hypertext Markup Language) to add content to your page.

    To type text directly into the box, if you have installed eWebEditPro do the following:

    • Position your cursor to the beginning of box and type the text for the paragraph.
    • Use the tool bar to change fonts, colors, add ordered and unordered lists, format paragraphs, and add pictures or tables.

To type text directly: Right click in the box and select "View as HTML" and position your cursor to the beginning of the box and type HTML

To copy HTML code from a word processing document, do the following:

  • Open the word processing document that contains the text for this information page.
  • Select the "Save as HTML..." or "Save as Web Page..." option from the File menu, enter the desired file name and location, and click on the "Save" button (this will create a second file on your computer).
  • Select the "HTML Source" option from the View menu.
  • Select the entire source.
  • Copy the entire source document.
  • Open the development browser and point to the Text box.
  • Right click in the box and select "View as HTML"
  • Paste the text into the box.
  • Switch back to the word processing document and exit the source document. At this point both the original text version and the HTML version will have been saved but will no longer appear in the word processor. Switch back to the development browser and continue the steps.

Alternatively you may copy the HTML source from FrontPage, Communicator, or any other Web authoring package that you have been using to create Web pages. ***You may also copy text directly from Word, keeping the documents formatting without saving the HTML***   Note that all content inside the main body must be less than 500 pixels wide.

  1. Upload an HTML File: This area allows you to upload HTML (Hypertext Markup Language) files to add content to your page. The uploaded file is displayed in the main part of the website and is the content for the page. Click "Browse" and locate the file on your hard drive. Select the file by clicking on it, and click on the "Open" button. The location of the file should appear in the textbox. Note: Text in the text box will display above submitted HTML.
  2. Text Border: Gives you the option of putting a border around your text.
  3. Display Announce Box: Decides on whether or not you want to display the announcements box on this web page.
  4. Days Valid: The "days valid" field indicates an update schedule (i.e., the number of days by which the Web page should be updated). Because it is important to keep material up-to-date, the Web development system will send you e-mail after the indicated number of days valid have elapsed to remind you to update your page. The e-mail will explain that the page will disappear from the University Web site after 6 weeks if you do not update the page (at a minimum, by resetting the days valid field). You will receive a second reminder 2 weeks after the first, and a third and fourth reminder during the following 2 weeks. The third reminder, which will include a copy to a second master in your department, will remind you that the Web page will disappear in 2 weeks if it is not updated. Then 2 weeks later (6 weeks after the first notice), you will receive a notice that your Web page is no longer active. Note that although the page will no longer be available on the University site, information about the page will still be on the UM Web Development Site until it is explicitly deleted. Select the number of days within which material should be updated from the pull-down menu. Maximum is 365 days.
  5. Right-Column Html:   Allows you to put user-defined html in the right hand column of the body. Total content of main page, and right-column must be less than 500 pixels.
  6. Scope: Gives you two choices, Global which allows anyone to see it, and local which only allows people with UM IP’s to use it.
  7. Language: The language field indicates the language in which the content is written (e.g., English, Spanish, French, German, Arabic, Portuguese). Note that selecting a language other than English will not translate the page--this is just a flag to let the system know the language you used to write the page.
    If the page is written in Spanish, French, German, Arabic, or Portuguese, select the appropriate option from pull-down menu. The default is English.
  8. Click on the "Preview Content" button to preview the page. If the preview looks correct, you should save the information.



    To preview and save or correct, do the following:

    • Once you entered data for all the required fields, preview the content by clicking the "Preview Content" button located at the very bottom of the page.
    • If the content looks correct, click on the "Save Content" button.
    • Alternatively, if you want to make changes, click on the "Back to Edit" button, and make the desired corrections. Then click the "Preview Content" button again, and then the "Save Content" button.
  9. Author: This section displays the original author of the information page.
  10. Dept: This section displays the department the page was created for.
  11. Clicking on the "Save Page" button will bring up a page indicating that you have saved successfully and that you must select the content in a menu/submenu shell. Buttons at the bottom of the page allow you to "Add New Submenu Shell," "Add New Menu Shell," select an existing menu/submenu page from a pull-down menu and click on the corresponding "Edit an existing shell" button, or "Return to Options Page."





Tips:

  1. The content for a submenu page should summarize the underlying theme for the pages being linked. The text should provide an indication of the type of information they will find on the pages in this section of the Web site. It should in effect "market" your site, but the emphasis should be on helping the users find what they want rather than on public relations.
  2. In general, a single paragraph of 50-100 words looks best.
  3. Although you can type text directly into the Text box, this is not a good idea since any text you type will not be spell checked or saved for future edits.
  4. Avoid using the "Back" option on your browser after saving or you may inadvertently save to versions of the page.

Give it a try:


At this time you should go to the development browser, select the option for adding content for menu/submenu page, follow the tutorial steps, click on the "Add Shell for Submenu Page" button at the bottom of the Save page, and then return to this tutorial. Remember, if you forget something from the tutorial, you can switch back to the tutorial browser.


Adding a shell for a submenu page (or menu page)



Introduction


Adding a submenu (or menu) page requires two sets of steps: creating content and creating a shell for the page.


Steps

  1. Complete the "Adding content for a menu/submenu page" section of this tutorial.
  2. If you have not already done so, open a second browser for the UM Web Development Site and login. On the Web Development Site Options page, locate the "ADD" section and the "Shell for a Submenu Page" option in this section. You have the option of specifying how may links (0-30) you will be adding to you site in the box located to the right of the "ADD" button. If nothing is entered, you will automatically be given the option of 30.



    Click on the corresponding "ADD" button to the right, which will bring you to the following "Add a Shell for a Submenu Page":

  1. Banner Image: The image in the header at the top of the page.
  2. Internal Page Description: This is optional. The Internal Page Description is a description of your page that helps you to identify it in the drop-down menus in the development site. Enter a short description of your page to help you discern multiple pages with the same name.
  3. Source of Content: The image and text appearing in the upper right-hand corner of the page should have been created in the "adding content for a menu/submenu page" step but must be selected for the shell in this step (or an error message will appear when you preview.)
  4. Menu Type:   Allows the choice between full banner, site map and default.  Default has a sidebar that lists: submenu’s or information pages.  Site map lists all the links that were created by you in this department in an easy to use map of the web page Full banner is the same as the default setting however the banner goes across the entire page and the sidebar with links gets pushed underneath it. 
  5. Display Footer Links: Allows you to display the standard UM links in the footer of the web page.
  6. Language: The language field indicates the language in which the Web page is written (e.g., English, Spanish, French, German, Arabic, Portuguese). Note that selecting a language other than English will not translate the page--this is just a flag to let the system know the language you used to write the page.
    If the page is written in Spanish, French, German, Arabic, or Portuguese, select the appropriate option from pull-down menu. The default is English.
  7. Menu Links: Navigation links appear in the light-orange sidebar at the left of the page. Links for submenus are indented beneath the navigation option that corresponds to this submenu page and are preceded by black square bullets. "Link Name" is the text that appears in the sidebar. A link name should have the same wording as the page headline of the Web page to which it refers. (Due to space considerations, if the headline is long, a shortened version of one or two words would be preferable for the link name.) These links can be to pages on your site or to pages that are not on your site (either elsewhere on the UM site or outside the UM site).

    To enter links, do the following:

    • Position your cursor to the first "Link name" field and type in the name of the first link. It should be no longer than 3 words. Note: If you do not enter something in the "Link name" field, the item will not be saved--even if you select a place to link to. IMPORTANT: Do not use apostrophes--they will cause errors.
    • If the link is to a Web Development Tool page on your site (either a menu, submenu, or information page), use your mouse to select the headline of the appropriate Web page from the "Select Link" options under the "Your Existing Pages" column.
    • If the link is to a Web page that you did not create using the Web Development tools (either a PDF or other static page on your own site, a page from another UM site even if it was created in the Web Development Tool, or a non-UM site), use your mouse to point to the corresponding box under the "External URL" column. Open a new version of your browser. Point the new browser to the Web page to which you wish to link and copy the URL from the Address box of the browser. Return to the Web Development Site by closing this new browser. Make sure the cursor is positioned on the appropriate box under the "External URL" column and paste the URL into the box.
    • If the link is to an e-mail address, enter "mailto:e-mail_address" in the External URL box, where e-mail address is the address to mail to (a generic address is preferable to an individual address because the Web page does not need to be updated if the person responsible leaves or is on vacation).
    • Using the steps described above, continue to enter information for additional links.
    • To delete a link, delete the link name (you do not need to move up subsequent rows to fill in the blank row--they will move up automatically after the page is saved).
    • To rearrange links, update the sequence number column.
  8. Quick Links: The Jump links appear below the text and image and provide a quick way for audiences to access high interest sites (e.g., calendars, directories, publications.) They should be either information pages (the most common choice) or menu pages.

    To enter quick links, follow the steps above for adding submenu links.


  9. Click on the "Preview Page" button to preview the page. If the preview looks correct, you should save the information.

    To preview and save or correct, do the following:

    • Once you entered data for all the required fields, preview the content by clicking the "Preview Page" button located at the very bottom of the page.


    • If the content looks correct, click on the "Save Page" button. (Note that in Preview mode, the header will always say "Dept. Header" and the menu buttons will not be the same as on the live site).
    • Alternatively, if you want to make additional changes, click the "Back to Edit" button. Then click the "Preview Page" button again and then click the "Save Page" button.
  10. Clicking on the "Save Page" button will bring up a page indicating the shell has been successfully saved and must be launched before it is "live" on the UM site. If you have "master" authority you will see buttons to "Launch" and "Approve." A "Return to Options Page" link is also on the page.


  11. If you have master authority, click the "Launch" button.
  12. Click on the "Return to Options Page" button.

Tips:

  1. The Web Development Tool creates Web pages from a database and therefore the user does not specify a URL where the page resides. As a result, the URLs for submenu and information pages have the long complex URLs that result whenever a Web page is generated from a database. If you want to be able to list a "nice" or more concise URL in a publication, e-mail the University Webmaster requesting it.
  2. It is recommended that links be displayed in order of importance, placing those links people look for most at the top. If all items are of equal importance, place the links in alphabetical order.
  3. The link name should match the headline of the page to which it links.
  4. The system works most effectively when audiences are as specific to each page as possible. For example, a school's main menu might be flagged for "students" and its submenu dealing with admissions information might be flagged for "prospective students."
  5. Note that your preview submenu page will not look exactly like it will look once your site is complete since submenu pages incorporate elements of the menu page (e.g., links in the left-hand navigation sidebar). For example, on the preview page "Dept. Name" is used in place of your department's header.
  6. Avoid using the "Back" option on your browser.
  7. It helps to work from a written list of links so you don't skip any. Use quick links for popular sites, especially those that are to Information pages.

Give it a try:


At this time you should go to the second browser, select the option for adding a shell for a submenu page, follow the tutorial steps, and then return to this tutorial. Remember, if you forget something from the tutorial, you can switch back to the tutorial browser.


Creating a menu page



Introduction

The steps for creating a menu page are the same as those for a submenu page except that you must also select your department's name from a list of page headers, and the number of navigation links is limited to a maximum of 10. Note that you will not be able to view your pages from your directory if you have not created a menu page, which is the "home page" for that directory. To view additional menu pages, add a link to them from the home menu page. When you have added content for a Menu/Submenu page and a shell for a menu page, you will have created a menu page that has the following sections:


Steps

  1. Follow the steps for adding content for a menu/sub-menu page.
  2. After saving, select the option for adding a shell for a menu page.
  3. Use the steps for adding a shell for a submenu page to add the menu shell.
  4. If you have master authority, click the "Launch" button.
  5. Click on the "Return to Options Page" button.

Give it a try:


At this time you should go to the second browser, select the option for adding content for a menu/submenu page, and follow the tutorial steps for that section. Then select the option for adding a shell for a menu page and complete the Web-based form, using the steps for adding a shell for a submenu page as your guide. Then return to this tutorial. Remember, if you forget something from the tutorial, you can switch back to the tutorial browser.


Viewing pages


Introduction

After being launched, pages can be viewed as they will appear on the live site.


Steps

  1. Once your Web page is launched, go to the "View Pages Currently Live" section, select the page and click "View". At the top of the page you could see a URL. Copy that URL into your clipboard.


  2. Open a new browser.
  3. Paste the URL into the address box of your browser and hit enter.

Hints:


Always
look at your new page(s) on the live site to be sure links are working correctly and that pages look correct.


Last Updated Page



Introduction


This button is provided to get you to the last page you updated without having to search through the Edit section for your page.

Steps

  1. If you have not already done so, open a second browser for the UM Web Development Site and login.
  2. On the UM Web Development Site Options page, locate the "EDIT/EXPIRE/DELETE" section. And the "Last Updated Page" section.



    The last page you worked on should appear in on a button with the title you gave it, click the button to resume working on that page.

Editing an information page


Introduction


The steps to edit pages are just like those you used to create the pages, except the information already exists from when the page was created.


Steps

  1. If you have not already done so, open a second browser for the UM Web Development Site and login.
  2. On the UM Web Development Site Options page, locate the "EDIT/EXPIRE/DELETE" section and the "Information Pages" option in this section. Select the Information Page you wish to edit from the pull-down menu and click on the corresponding "EDIT" button.



  3. Headline: The headline normally appears as text between the toolbar and content text and also on the development site in various pull-down menus. Enter a short description of the content (1-5 words), using upper/lower case letters and other ASCII characters (maximum 230 characters). The headline should correspond to the link name you will use to get to this page. If you do not wish the headline (or a portion of it) to display on your page, put a "less than sign" and "exclamation mark" (<!) to the left of the text and a "greater than sign" (>) to the right (e.g., the headline should read <!headline>. If you want only part of the headline to display it should read "headline-to-display<!part you don't want to display>" ). Putting material in the headline between the <! and > will keep it from displaying but you can still differentiate this page on pull-down menus.
  4. Bar Color and Photo:   Selects the color of the headline bar and allows the possibility of placing a photo from our image library.
  5. Internal Page Description: This is optional. The Internal Page Description is a description of your page that helps you to identify it in the drop-down menus in the development site. Enter a short description of your page to help you discern multiple pages with the same name.
  6. Keyword List: Keywords are very important because they are used by search engines on the UM site and elsewhere. Enter a list of words or phrases that describe the content. Use lower case and separate keywords (separated by) commas. Be sure to include alternative spellings for key terms (e.g., "theater" and "theatre," "admission" and "admissions") and common abbreviations ("RSMAS" for "Rosenstiel School," "psych" for "psychology").
  7. Text: The text entered in this box is displayed in the main part of the website and is the content for the page. In this text area you are allowed to enter regular text paragraph as well as HTML (Hypertext Markup Language) to add content to your page.

    To type text directly into the box, if you have installed eWebEditPro do the following:

    • Position your cursor to the beginning of box and type the text for the paragraph.
    • Use the tool bar to change fonts, colors, add ordered and unordered lists, format paragraphs, and add pictures or tables.

To type text directly: Right click in the box and select "View as HTML" and position your cursor to the beginning of the box and type HTML


To copy HTML code from a word processing document, do the following:

  • Open the word processing document that contains the text for this information page.
  • Select the "Save as HTML..." or "Save as Web Page..." option from the File menu, enter the desired file name and location, and click on the "Save" button (this will create a second file on your computer).
  • Select the "HTML Source" option from the View menu.
  • Select the entire source.
  • Copy the entire source document.
  • Open the development browser and point to the Text box.
  • Right click in the box and select "View as HTML"
  • Paste the text into the box.
  • Switch back to the word processing document and exit the source document. At this point both the original text version and the HTML version will have been saved but will no longer appear in the word processor. Switch back to the development browser and continue the steps.

 

Alternatively you may copy the HTML source from FrontPage, Communicator, or any other Web authoring package that you have been using to create Web pages. ***You may also copy text directly from Word, keeping the documents formatting without saving the HTML*** Note that all content inside the main body must be less than 500 pixels wide.

  1. Upload an HTML File: This area allows you to upload HTML (Hypertext Markup Language) files to add content to your page. The uploaded file is displayed in the main part of the website and is the content for the page. Click "Browse" and locate the file on your hard drive. Select the file by clicking on it, and click on the "Open" button. The location of the file should appear in the textbox. Note: Text in the text box will display above submitted HTML.
  2. Text Border: Gives you the option of putting a border around your text.
  3. Display Announce Box: Decides on whether or not you want to display the announcements box on this web page.
  4. Target Audience(s):Target audiences on content pages indicate audiences for whom this content is relevant. Target audiences for information pages should be as specific as possible. More general audiences can be used on menu and submenu pages. Select all audiences for whom this content is relevant and delete any you don't want.
  5. Right-Column Html:   Allows you to put user-defined html in the right hand column of the body. Total content of main page, and right-column must be less than 500 pixels.
  6. Scope: Gives you two choices, Global which allows anyone to see it, and local which only allows people with UM IP’s to use it.
  7. Days Valid: The "days valid" field indicates an update schedule (i.e., the number of days by which the Web page should be updated). Because it is important to keep material up-to-date, the Web development system will send you e-mail after the indicated number of days valid have elapsed to remind you to update your page. The e-mail will explain that the page will disappear from the University Web site after 6 weeks if you do not update the page (at a minimum, by resetting the "days valid" field). You will receive a second reminder 2 weeks after the first, and a third and fourth reminder during the following 2 weeks. The third reminder, which will include a copy to a second master in your department, will remind you that the Web page will disappear in 2 weeks if it remains not updated. Then, after 2 weeks, ( 6 weeks after the first notice), you will receive a notice that your Web page is no longer active. Note that although the page will no longer be available on the University site, information about the page will still be on the UM Web Development Site until it is explicitly deleted. Select the number of days within which material should be updated from the pull-down menu. Maximum is 365 days.
  8. Language: The language field indicates the language in which the content is written (e.g., English, Spanish, French, German, Arabic, Portuguese). Note that selecting a language other than English will not translate the page--this is just a flag to let the system know the language you used to write the page.
    If the page is written in Spanish, French, German, Arabic, or Portuguese, select the appropriate option from pull-down menu. The default is English.
  9. Author: This section displays the original author of the information page.
  10. Dept: This section displays the department the page was created for.
  11. Once you have completed your edits, click on the "Preview Content" button to preview the page. If the preview looks correct, you should save the information.



    To preview and save or correct, do the following:

    • Once you’ve edited all the data, preview the content by clicking the "Preview Content" button located at the very bottom of the page.
    • If the content looks correct, click on the "Save Content" button.
    • Alternatively, if you want to make additional changes, click the "Back to Edit" button and make desired corrections. Then click the "Preview Content" button again, and then click the "Save Content" button.
  12. Clicking on the "Save Content" button will bring up a page indicating that you have saved successfully.



Tips:

  1. Be sure to omit the headline from the text section since it is entered in a separate section.
  2. Be sure to spell check all of your text.

Give it a try:

At this time, go to the development browser, select the option for editing information pages, follow the tutorial steps for creating content, and then return to this tutorial. Remember, if you forget something from the tutorial, you can switch back to the tutorial browser.


Editing content for a menu/submenu page



Introduction


The steps to edit content for menu/submenu pages are just like those you used to create the pages, except the information already exists from when the page was created. For the time being, content for menu/submenu pages launch automatically after being edited.


Steps

  1. If you have not already done so, create the edited text you wish to use and save it as a word processing document.
  2. If you have not already done so, open a second browser for the UM Web Development Site and login. Locate the "EDIT" section and choose a page to edit from the appropriate pull-down menu for the "Content for Menu/Submenu Pages" option and then click on the "Edit" button to the right.





  3. Headline: The information entered in this field appears above the text in the upper right corner of the page, in "bread crumbs" that appear in the left side of the top green bar, and in pull-down menus used in development templates. The headline should correspond to the link name you will use to get to this page.
    Edit the existing headline, using upper/lower case letters and other ASCII characters, to produce a 1-5 word (maximum 230 characters) headline that corresponds to the link name on the page from which this page is accessed.
  4. Bar Color and Photo:   Selects the color of the headline bar and allows the possibility of placing a photo from our image library.
  5. Menu Bar Text: Displays in the bar that you defined with bar color and photo.
  6. Internal Page Description: This is optional. The Internal Page Description is a description of your page that helps you to identify it in the drop-down menus in the development site. Enter a short description of your page to help you discern multiple pages with the same name.
  7. Keyword List: Keywords are very important because they are used by search engines on the UM site and elsewhere. Enter a list of words or phrases that describe the content. Use lower case and separate keywords (separated by) commas. Be sure to include alternative spellings for key terms (e.g., "theater" and "theatre," "admission" and "admissions") and common abbreviations ("RSMAS" for "Rosenstiel School," "psych" for "psychology").
  8. Text: The text entered in this box is displayed in the main part of the website and is the content for the page. In this text area you are allowed to enter regular text paragraph as well as HTML (Hypertext Markup Language) to add content to your page.

    To type text directly into the box, if you have installed eWebEditPro do the following:

    • Position your cursor to the beginning of box and type the text for the paragraph.
    • Use the tool bar to change fonts, colors, add ordered and unordered lists, format paragraphs, and add pictures or tables.

To type text directly: Right click in the box and select "View as HTML" and position your cursor to the beginning of the box and type HTML


To copy HTML code from a word processing document, do the following:

  • Open the word processing document that contains the text for this information page.
  • Select the "Save as HTML..." or "Save as Web Page..." option from the File menu, enter the desired file name and location, and click on the "Save" button (this will create a second file on your computer).
  • Select the "HTML Source" option from the View menu.
  • Select the entire source.
  • Copy the entire source document.
  • Open the development browser and point to the Text box.
  • Right click in the box and select "View as HTML"
  • Paste the text into the box.
  • Switch back to the word processing document and exit the source document. At this point both the original text version and the HTML version will have been saved but will no longer appear in the word processor. Switch back to the development browser and continue the steps.

 

Alternatively you may copy the HTML source from FrontPage, Communicator, or any other Web authoring package that you have been using to create Web pages. ***You may also copy text directly from Word, keeping the documents formatting without saving the HTML*** Note that all content inside the main body must be less than 500 pixels wide.

  1. Upload an HTML File: This area allows you to upload HTML (Hypertext Markup Language) files to add content to your page. The uploaded file is displayed in the main part of the website and is the content for the page. Click "Browse" and locate the file on your hard drive. Select the file by clicking on it, and click on the "Open" button. The location of the file should appear in the textbox. Note: Text in the text box will display above submitted HTML.
  2. Text Border: Gives you the option of putting a border around your text.
  3. Display Announce Box: Decides on whether or not you want to display the announcements box on this web page.
  4. Right-Column Html:   Allows you to put user-defined html in the right hand column of the body. Total content of main page, and right-column must be less than 500 pixels.
  5. Scope: Gives you two choices, Global which allows anyone to see it, and local which only allows people with UM IP’s to use it.
  6. Days Valid: The "days valid" field indicates an update schedule (i.e., the number of days by which the Web page should be updated). Because it is important to keep material up-to-date, the Web development system will send you e-mail after the indicated number of days valid have elapsed to remind you to update your page. The e-mail will explain that the page will disappear from the University Web site after 6 weeks if you do not update the page (at a minimum, by resetting the days valid field). You will receive a second reminder 2 weeks after the first, and a third and fourth reminder during the following 2 weeks. The third reminder, which will include a copy to a second master in your department, will remind you that the Web page will disappear in 2 weeks if it is not updated. Then 2 weeks later (6 weeks after the first notice), you will receive a notice that your Web page is no longer active. Note that although the page will no longer be available on the University site, information about the page will still be on the UM Web Development Site until it is explicitly deleted. Select the number of days within which material should be updated from the pull-down menu. Maximum is 365 days.
  7. Language: The language field indicates the language in which the content is written (e.g., English, Spanish, French, German, Arabic, Portuguese). Note that selecting a language other than English will not translate the page--this is just a flag to let the system know the language you used to write the page.
    If the page is written in Spanish, French, German, Arabic, or Portuguese, select the appropriate option from pull-down menu. The default is English.
  8. Author: This section displays the original author of the information page.
  9. Dept: This section displays the department the page was created for.
  10. Once you have completed your edits, click on the "Preview Content" button to preview the page. If the preview looks correct, you should save the information.



    To preview and save or correct, do the following:

    • Once you’ve edited all the data, preview the content by clicking the "Preview Content" button located at the very bottom of the page.
    • If the content looks correct, click on the "Save Content" button.


    • Alternatively, if you want to make additional changes, click the "Back to Edit" button and make desired corrections. Then click the "Preview Content" button again, and then click the "Save Content" button.
  11. Clicking on the "Save Content" button will bring up a page indicating that you have saved successfully. For the time being updated content does not need to be launched, but that will change in the future.



Tips:

  1. If you edit existing content for a menu or submenu page, your edits will appear automatically when the content is saved (i.e., you don? need to update the corresponding shell).



Give it a try:

At this time, go to the development browser, select the option for editing content for menu/submenu pages, follow the tutorial steps for creating content, and then return to this tutorial. Remember, if you forget something from the tutorial, you can switch back to the tutorial browser.


Editing shells



Introduction


The steps to edit shells are just like those you used to create the pages, except the information already exists from when the page was created. Note that edited submenu and menu shells will not be available for use until after they have been approved and launched.


Steps

  1. If you have not already done so, open a second browser for the UM Web Development Site and login. Locate the "EDIT" section and choose a page to edit from the appropriate pull-down menu for the "Shell for Menu/Submenu Pages" option and then click on the "Edit" button to the right.





  2. Internal Page Description: This is optional. The Internal Page Description is a description of your page that helps you to identify it in the drop-down menus in the development site.
    Enter a short description of your page to help you discern multiple pages with the same name.
  3. Display Footer Links: Allows you to display the standard UM links in the footer of the web page.
  4. Source of Content: The image and text appearing in the upper right-hand corner of the page should have been created in the "adding content for a menu/submenu page" step but must be selected for the shell in this step (or an error message will appear when you preview). Make sure the headline for the submenu (or menu) content you wish to use on this page is selected from the pull-down menu.
  5. Target Audience(s):The target audiences will be used to filter announcements and events to display. Audiences on submenu pages should be as specific as possible for the content.
    Select all audiences for whom you'd like to post announcements and events and delete any you don't want.
  6. Language: The language field indicates the language in which the Web page is written (e.g., English, Spanish, French, German, Arabic, Portuguese). Note that selecting a language other than English will not translate the page--this is just a flag to let the system know the language you used to write the page.
    If the page is written in Spanish, French, German, Arabic, or Portuguese, select the appropriate option from pull-down menu. The default is English.
  7. Menu Links: Navigation links appear in the light-orange sidebar at the left of the page. Links for submenus are indented beneath the navigation option that corresponds to this submenu page and are preceded by black square bullets. "Link Name" is the text that appears in the sidebar. A link name should have the same wording as the page headline of the Web page to which it refers. (Due to space considerations, if the headline is long, a shortened version of one or two words would be preferable for the link name.) These links can be to pages on your site or to pages that are not on your site (either elsewhere on the UM site or outside the UM site).

    To edit links, do the following:

    • If you wish to edit a link name, position your cursor to the desired "Link name" field and edit the field. It should be no longer than 3 words. Note: If you do not enter something in the "Link name" field, the item will not be saved--even if you select a place to link to. IMPORTANT: Do not use apostrophes--they will cause errors.
    • If you wish to change a link to a Web Development Tool page on your site (either a menu, submenu, or information page), use your mouse to select the desired headline of the appropriate Web page from the "Select Link" options under the "Your Existing Pages" column.
    • If you wish to change the link to a Web page that you did not create using the Web Development tools (either a static page on your own site, a page from another UM site even if it was created in the Web Development Tool, or a non-UM site), use your mouse to point to the corresponding box under the "External URL" column. Open a new version of your browser. Point the new browser to the Web page to which you wish to link and copy the URL from the Address box of the browser. Return to the Web Development Site by closing this new browser. Make sure the cursor is positioned on the appropriate box under the "External URL" column, select and delete any text that might be there, and paste the URL into the box.
    • To delete a link, delete the link name (you do not need to move up subsequent rows to fill in the blank row--they will move up automatically after the page is saved).
    • To rearrange links, update the sequence number column.
    • Using the steps described above, continue to edit information for additional links.
  8. Quick Links: The Jump links appear below the text and image and provide a quick way for audiences to access high interest sites (e.g., calendars, directories, publications.) They should be either information pages (the most common choice) or menu pages.
    To edit quick links, follow the steps above for adding submenu links.
  9. Click on the "Preview Page" button to preview the page. If the preview looks correct, you should save the information.

    To preview and save or correct, do the following:

    • Once you've edited all the data, preview the page by clicking the "Preview Page" button located at the very bottom of the page.
    • If the content looks correct, click on the "Save Page" button.
    • Alternatively, if you want to make additional changes, click the "Back to Edit" button and make desired corrections. Then click the "Preview Page" button again, and then click the "Save Page" button.


  10. Clicking on the "Save Page" button will bring up a page indicating the shell has been successfully saved and must be launched before it is "live" on the UM site. If you have "master" authority you will see buttons to "Launch" and "Approve." A "Return to Options Page" link is also on the page.


  11. If you have master authority, click the "Launch" button.

Tips:

  1. The Web Development Tool creates Web pages from a database and therefore the user does not specify a URL where the page resides. As a result, the URLs for submenu and information pages have the long complex URLs that result whenever a Web page is generated from a database. If you want to be able to list a "nice" or more concise URL in a publication, e-mail the University Webmaster requesting it.
  2. If you need to remove a link on a menu/submenu page, just delete the link name and the External URL (if appropriate) and reset the pull-down menu to "Select Link"--subsequent links will "move up" automatically. You can take advantage of this feature when you need to rearrange links.
  3. It is recommended that links be displayed in order of importance, placing those links people look for most at the top. If all items are of equal importance, place the links in alphabetical order.
  4. The link name should match the headline of the page to which it links.
  5. The system works most effectively when audiences are as specific to each page as possible. For example, a school's main menu might be flagged for "students" and its submenu dealing with admissions information might be flagged for "prospective students."
  6. Use quick links for popular sites, especially those that are to Information pages.



Give it a try:


At this time, go to the development browser, select the option for editing shells for menu/submenu pages, follow the tutorial steps for creating content, and then return to this tutorial. Remember, if you forget something from the tutorial, you can switch back to the tutorial browser.


Deleting pages



Introduction


Pages that are no longer of any interest should be deleted so they don't take up unnecessary space. Do not use a delete to change a page since links pointing to the page will no longer work--use the edit option instead.


Steps

  1. If you have not already done so, open a second browser for the UM Web Development Site and login. Locate the "EDIT/EXPIRE/DELETE" section and choose a page to delete from one of the pull-down menus and then click on the "View" button to the right.


  2. The page will be brought up on your screen so you can see which page you are about to delete. Select the "Delete" button at the bottom of the page.


  3. The system will ask for your confirmation that you want a page permanently deleted.
  4. Click the "Confirm Delete" button to confirm.



  5. The system will notify you that the page has been deleted.



Tips:

  1. If you want to change a page, use the edit option rather than deleting it and adding a new page. If an Information page linked from a menu/submenu page that you delete has been referenced as an external URL on another page, the external URL that was entered on that other page will generate a 404 error (because it implicitly references the parent menu/submenu page that you have deleted). It will need to be changed after you have created a replacement page for the one you deleted that links to the Information page.
  2. If you delete a page, be sure to reset any links pointing to that page.
  3. Don't get so carried away with deleting that you remove old pages that may have historical value.

Submitting Files (adding images, PDFs, etc)


Introduction


Files submitted through this method include photos, logos, graphics, PDFs, Word Documents, and others that you would like to include on your site. Images entered in this manner can be used in the image box of adding an information page or adding content for menu/submenus. They can also be used in HTML entered in the text box. Files can be linked to from shells or within your pages.


There are many options on this page. You can preview a file. You can submit a new file. This will add the file to your directory, giving it the filename specified. You can add a new folder. You can change to an existing folder. You can also resubmit a file. This replaces a file that already exists in your directory. You can also delete a file. This removes a file from your directory. You can rename a file. You can save a file. You can get information on a file.


Steps

  1. If you have not already done so, open a second browser for the UM Web Development Site and login. On the Web Development Site Options page, locate the "SUBMIT FILES" section and the "Submit files" option in this section.



    Click on the corresponding "Go" button to the right, which will bring you to the following "Submit Files" page:

  1. Preview existing file

    • Find the file you would like to preview. If it is not on the top level, you may need to click on a folder name to view the contents of that folder.
    • Click on the file name, or on the icon that looks like a magnifying glass. At this time a window will open up to show the file you selected.
  2. Submit new file

    • Click on Upload Files at the top of the page when you are viewing the contents of the folder you would like to the file in.
    • A new window will pop up. Next to the text box, click on "Browse ..." At this time, a "Choose File" window will open up to show files on your computer.
    • Locate the file you would like to add to the system and click "Open."
    • Below the file location is another text box for the remove file name. It will automatically fill in with the name of the file you have just selected. If you would like to change that name, update it now. There are certain characters that are not allowed, including "/". If you would like to put a file in a folder, you will need to change to that folder.
    • Click the "Submit" button.
    • Please make sure that your file has been successfully submitted by back-tracking one step in the folder veiw.
  3. Resubmit file

    • Click on the icon next to the filename of the file you would like to resubmit that looks like an arrow coming out at you.
    • A new window will pop up with a text box and a browse button. Click on "Browse ..." At this time, a "Choose File" window will open up to show files on your computer.
    • Locate the file you would like to add to the system and click "Open."
    • Click the "Resubmit" button.
  4. Delete File

    • Select the file from the list and click on the X icon next to the filename of the file you would like to delete.
    • A window will pop up asking you if you are sure you would like to delete this file. Click the "OK" button.
  5. Renaming Files

    • Find the file you would like to rename and click on the icon with the paper and the arrow next to the file.
    • A window will pop up. Enter the new file name in the text box provided and click "OK."
  6. Moving Files

    • Find the file you would like to move and click on the icon with the folder and the arrow next to the file.
    • A window will pop up with the folder structure for your department. Click on the radio button next to the folder you would like to move the file into and click "Move."

Adding announcements and calendar events



Introduction


Information entered on this page will be displayed in the announcement box on relevant menu pages and submenu pages and/or the event box on submenu pages and the online calendar. An announcement is important and timely information that should be shared with audiences who view your Web pages (e.g., key deadlines, recent awards or other recognition, upcoming deadlines, new services). An event is a function with a specific date, time, and place. If the event is of general interest, it can be flagged as both an announcement and an event, in which case it will appear in the announcement box on menu pages as well as in the event box on submenu pages. All events will also appear in the University-wide calendar accessed from the tool bar at the top of each page.


Another department may display announcements and events you create if you designate that department as one of your "Relevant Department(s)" and if that department has also selected your department as one of the "Relevant Department(s)" for its menu/submenu shells. If your page has more than six announcements (the maximum number for an announcement box) they will be displayed randomly within priority order.


Information flagged as "announcement only" appears on both menu and submenu pages, "event only" appears only in the event box on submenu pages (and in the calendar), and an event that is flagged as "both" appears in announcement boxes on menu pages as well as in event boxes on submenu pages (and in the calendar).


Steps

  1. If you have not already done so, open a second browser for the UM Web Development Site and login. On the Web Development Site Options page, locate the "ANNOUNCEMENTS/ CALENDAR EVENTS" section and the "Add Announcements/Events" option in this section.



    Click on the corresponding "ADD" button to the right, which will bring you to the following "Add Announcement/Calendar Event" page:


  2. Type: This field is used to indicate whether your information should be treated as an announcement only, an event only, or as both.

    To select the type, do the following:

    • Select "announcement only" if the information is not for an event, but does need to be in announcement boxes on menu pages.
    • Select "event only" if the information is for an event that should be included in the calendar and in the event box on submenu pages but does not need to be in announcement boxes on menu pages.
    • Select "both" if the information is for an event that should be included in the calendar, the event box on submenu pages, and also the announcement box on menu pages.
  3. Categories: Sets the category of the event, which will help people search for it.
  4. Scope: Announcements and events can be limited to users accessing the site from a University of Miami computer. If you wish to restrict access to just those visitors with "miami.edu" IP addresses, select the "Local" option. The default is "Global."
  5. Priority: Since a maximum of only 6 announcements and events appear in each box, you must assign priorities to each so that the most important ones appear first. Use a "1" for emergencies, extra important occurrences, and today's events; a "2" for honors, recognitions, and other general-interest announcements; a "3" for events that will be held later in the week; and a "4" for events that will be held later in the month (priorities can be updated later to reflect a closer time frame). Select the appropriate priority, with 1 as the highest or first to rotate in.
  6. Headline: The headline that appears in the announcement or event box on menu and submenu pages and, for events, in the calendar. Enter a short description of the content (1-6 words, maximum 230 characters), using upper/lower case letters and other ASCII characters.


  7. URL or Summary: The headline can either link to an existing information page or to a new Web page with a short description. If an information page for the announcement/event already exists, indicate the URL for this page. Otherwise, you will need to enter a short narrative that will appear on a new Web page (generated automatically for you) to which the headline will link. The text in the box must be HTML code, which can be generated from a word processing document by following the steps outlined below or by typing directly into the box. 

    To enter a Description URL, do the following:

    • Open a new browser.
    • Point the new browser to the Web page that describes your announcement and copy the URL from the Address box of your browser.
    • Return to the Web Development Site by closing this new browser.
    • Make sure the cursor is positioned in the Description URL box and paste the URL into the box.
    • Skip the Description Summary box.

    To type text directly into the box, do the following:

    • Skip the URL box.
    • Position your cursor to the beginning of the box and type the text for the paragraph (maximum length is just over three lines).
  8. To copy HTML code from a word processing document, do the following: 

    • Skip the URL box.
    • Open the word processing document that contains the text for this announcement/event.
    • Select the "Save as HTML..." or "Save as Web Page..." option under the File menu, enter the desired file name and location, and click on the "Save" button (this will create a second file on your computer).
    • Select the "HTML Source" option from the View menu.
    • Select the entire source.
    • Copy the entire source document.
    • Open the development browser and point to the Description Summary box.
    • Paste the text into the box (note: maximum length is just over three lines).



  9. Post Date: This is the date when the announcement will first start appearing.
    Use the pull-down menus to select the desired month, date, and year to begin displaying your announcement. (Default is today.)
  10. Expire date: This is the last date on which the announcement will appear on the Web site. It will display on the date selected.
    Use the pull-down menus to select the last month, date, and year you wish your announcement to appear. (Default is today.)
  11. Language: The language field indicates the language in which the announcement/event is written (e.g., English, Spanish, French, German, Arabic, Portuguese). Note that selecting a language other than English will not translate the page--this is just a flag to let the system know the language you used to write the page.
    If the announcement is written in Spanish, French, German, Arabic, or Portuguese, select the appropriate option from pull-down menu. The default is English.
  12. If you are entering an event, you will need to supply date, time, and location information. If the information you are entering is not for an event, skip the box labeled "For Events Only."

    To enter event information, do the following:

    • Is this a large event? (Default is No.)
    • Select if the event will last all day. (Default is No.)
    • Select if the event is open to the public. (Default is No.)
    • Use the pull-down menus to select the location. Type the room number and, if individuals from off-campus will be attending, the street address in the box to the right of the pull-down menu.
    • For non-recurring events, do the following:

      • Use the pull-down menus to select the correct month, date, and time (including a.m./p.m. indicator) for when the event begins. (Default is today.)
      • Use the pull-down menus to select the correct month, date, and time (including a.m./p.m. indicator) for when the event ends. (Default is today.)
    • For recurring events, do the following:

      • Use the pull-down menus to select the correct month, date, and time for the first day of the event (include a.m./p.m. indicator.) Default is today.
      • Use the pull-down menus to select the correct month, date, and time for the last day of the event (include a.m./p.m. indicator.) Default is today.
    • Select the frequency that the event recurs. Be sure to check boxes for the days the event will occur on.
  13. Click on the "Preview" button, which brings up a page summarizing the announcement/event parameters. If you see a message that says "Summary: *too long*" you should click on the "Back" option on your browser and shorten the Summary. Once the parameters look ok, click on the "Save" button, which will bring up a page indicating that you have saved successfully. Click on the "Return to Options Page" button at the bottom of the page.
  14. You will then be taken to the Special Event Registration page.

1.  Event: This field is used to give the Office of Community Relations a brief description of why the event is being held and/or what will occur. This is filled in with the information from the summary of Event.

To type text directly into the box, position your cursor at the beginning of the box and type the text for the paragraph (maximum length is 500 characters).


 

2.  Sponsoring entity: Sponsoring entity indicates the date, time, and location of the event. All fields are set to values which were entered for the Event and a change here will not change the item in the calendar.

To change any of these fields, do the following:

  • For the Date, click on the month, date, or year and select one from the drop-down list.
  • For the Location, position your cursor in the box, and type the necessary changes (up to 50 characters)
  • For the Estimated Arrival, Start Time and Ending time, click on the time and select a number as well as AM or PM from the drop-down list.


 

3.  Contact information: Contact information indicates who the contact person is for the event and his/her contact information. Person’s name, telephone number, and email address are required.

To enter contact information, click on any of the corresponding text boxes for each field, and position your cursor at the beginning and type the text directly into the box.


 

4.  Attendance: Attendance indicates how many people were invited and the estimated number expected to attend the event. It also indicates the reservation deadline. The required fields are estimated attendance and number expected; both must be over 250 persons.

To enter attendance information, do the following:

  • For Estimated Attendance, Number Invited, and Number Expected, click on any of the corresponding boxes for each field, and position your cursor at the beginning and type the numbers directly into the box.
  • For RSVP’s as of, click on the month, date, or year and select one from the drop-down list.


 

5.  Site Logistics: Site Logistics is an overview of what is needed to put on the event. None of the fields in this section are required.

To enter site logistics, do the following:

  • For Rental Source Vendors, position your cursor in the box, and type the test directly into the box.
  • For UM Approved or Handicap Accessible, click on the corresponding box and select yes or no from the drop-down list.
  • For all other fields such as Music/Entertainment or Permits Completed, check the corresponding box to indicate yes or that it will be present at your event.
  • For all other number fields such as Number of Steps, position your cursor in the box, and type the number directly into the box.
  • Entering a number for any of the number fields will automatically display the item as checked in the “Large Event Calendar Viewer” whether the field is submitted as checked or not.


 

6.  Signage: Signage indicates on-campus advertising and locations. This section is completely optional.

To enter signage information, do the following:

  • For On Campus Signage Description, position your cursor in the box, and type the text that will appear on the campus signs directly into the box.
  • For Locations, position your cursor in the box, and type the locations directly into the box.
  • For Number of Signs, position your cursor in the box, and type the number(s) directly into the box.


 

7.  Parking/Security/Safety Information: Parking/security/safety information is an overview of all relevant event parking/security/safety information. All fields in this section are optional.

To enter this information, do the following:

  • For Valet Parking and any other similar fields such as Parking Plan Approved, check the corresponding box to indicate yes or that it will be present at your event.
  • For Lot Location, position your cursor in the box, and type the location directly into the box.
  • For Off-Duty Coral Gables Police and/or Fire Department, check the corresponding box to indicate that they will be present at your event. Then, position your cursor in the text box, and type the instructions given to law enforcement and fire rescue personnel directly into the box.
  • For Approved by UM Parking and Transportation, click on the corresponding box and select yes or no from the drop-down list.

     
  1. Click “Submit Form.”

Tips:

  1. Entering announcements that are relevant for your site allows you to notify audiences of important current information. Announcements can remind audiences of deadlines, announce positive news about the unit, or notify users about new services or Web sites. Including events in the university-wide calendar and in event boxes helps publicize them and, in turn, increase attendance.
  2. In order to allow the announcement/event information to appear on as many sites as possible, you should select all relevant departments and audiences. For example, select all departments within a school as well as the school itself, and include all relevant subcategories of audiences in addition to the main audience (e.g., "undergraduates" in addition to "students").
  3. If you want another department to post your announcement/event, ask them to select you as a relevant department on their shells.



Give it a try:


At this time you should go to the second browser, select the option for adding an announcement/event, follow the tutorial steps for doing so, and then return to this tutorial. Remember, if you forget something from the tutorial, you can switch back to the tutorial browser.


Submitting Announcements/Events to Home Page



Introduction


If your announcement is of general interest to the University community, you can submit it for posting on the Home page (and all other pages that have retained the University Homepage as a default department.) The Web editor in University Relations must approve it before it goes live.


Steps

  1. If you have not already done so, open a second browser for the UM Web Development Site and login. Locate the "ANNOUNCEMNTS/EVENTS" section and click on the "Add" button.
  2. Add an announcement as normal, but when selecting Relevant Departments, select "University Homepage."
  3. Click on the submit button. This will send an e-mail to the Web Editor to approve the announcement. This will also submit the announcement to your site.

 


Editing announcements and calendar events



Introduction


The steps to edit pages are just like those you used to create announcements/events except that the information already exists.


Steps

  1. If you have not already done so, open a second browser for the UM Web Development Site and login. Locate the "ANNOUNCEMNTS/EVENTS" section and choose an item to edit from the appropriate pull-down menu for the "Edit Announcements/Events" option and then click on the "Edit" button to the right.
  2. To change fields that have been selected with pull-down menus, just select new options.
  3. To change fields that have boxes for text or URLs, delete the original information by selecting the entire box and deleting the selected information and then copy new information into the box. Alternatively you may edit the text in the box.
  4. Once you have completed your edits, click on the "Preview" button, which will bring up a page summarizing the announcement. Click on the "Save" button, which will bring up a page indicating that you have saved successfully. Click on the "Return to Options Page" button at the bottom of the page.
  5. You will then be taken to the Special Event Registration page.

    a. Event: This field is used to give the Office of Community Relations a brief description of why the event is being held and/or what will occur. This is filled in with the information from the summary of the Event.

    To edit this field, delete the original information by selecting the entire box and deleting the selected information and then copy the new information into the box. Alternatively, you may edit the text in the box (maximum length is 500 characters).

 

b. Sponsoring entity: Sponsoring entity indicates the date, time, and location of the event. All fields are set to values which were entered for the Event and a change here will not change the item in the calendar.


To edit any of these fields, do the following:

  • For the Date, click on the month, date, or year and select the new option from the drop-down list.
  • For the Location, select the entire box and delete the selected information and then copy the new information into the box. Alternatively, you may edit the information by positioning your cursor in the box, and then typing the necessary changes (up to 50 characters)
  • For the Estimated Arrival, Start Time and Ending time, click on the time and select the new number as well as AM or PM from the drop-down list.



c. Contact information: Contact information indicates who the contact person is for the event and his/her contact information. Person’s name, telephone number, and email address are required.

To edit contact information, select any of the corresponding text boxes for each field, and delete the original information by selecting the entire box and deleting the selected information and then copy new information into the box. Alternatively, you may edit the information by positioning your cursor in the box, and then typing the necessary changes.



d. Attendance: Attendance indicates how many people were invited and the estimated number expected to attend the event. It also indicates the reservation deadline. The required fields are estimated attendance and number expected; both must be over 250 persons.

To edit attendance information, do the following:

  • For Estimated Attendance, Number Invited, and Number Expected, click on any of the corresponding boxes for each field, and position your cursor at the beginning and type the new numbers directly into the box.
  • For RSVP’s as of, click on the month, date, or year and select the new one from the drop-down list.



e. Site Logistics: Site Logistics is an overview of what is needed to put on the event. None of the fields in this section are required.

To edit site logistics, do the following:

  • For Rental Source Vendors, select the entire box and delete the selected information and then copy the new information into the box. Alternatively, you may edit the information by positioning your cursor in the box, and then typing the necessary changes (up to 50 characters)
  • For UM Approved or Handicap Accessible, click on the corresponding box and select yes or no from the drop-down list.
  • For all other fields such as Music/Entertainment or Permits Completed, check the corresponding box to indicate yes or that it will be present at your event. If a box was checked to indicate yes, click it again to indicate no.
  • For all other number fields such as Number of Steps, select the entire box and delete the selected information and then copy the new information into the box. Alternatively, you may edit the information by positioning your cursor in the box then typing the necessary changes.
  • Editing a number for any of the number fields will automatically display the item as checked in the “Large Event Calendar Viewer” whether the field is submitted as checked or not.



f. Signage: Signage indicates on-campus advertising and locations. This section is completely optional.

 

To edit signage information, do the following:

  • For On Campus Signage Description or Locations, delete the original information by selecting the entire box and deleting the selected information and then copy the new information into the box. Alternatively, you may edit the information by positioning your cursor in the box, and then typing the necessary changes.
  • For Number of Signs, select the entire box and delete the selected information and then copy the new information into the box. Alternatively, you may edit the information by positioning your cursor in the box then typing the necessary changes.

 

 

g. Parking/Security/Safety Information: Parking/security/safety information is an overview of all relevant event parking/security/safety information. All fields in this section are optional.

To edit this information, do the following:

  • For Valet Parking and any other similar fields such as Parking Plan Approved, check the corresponding box to indicate yes or that it will be present at your event. If a box was checked to indicate yes, click it again to indicate no.
  • For Lot Location, select the entire box and delete the selected information and then copy the new information into the box. Alternatively, you may edit the information by positioning your cursor in the box, and then typing the necessary changes (up to 50 characters)
  • For Off-Duty Coral Gables Police and/or Fire Department, check the corresponding box to indicate that they will be present at your event. If the box was checked to indicate yes, click it again to indicate no. Then, to delete the original instructions in the text box, select the entire box and delete the selected information and then copy the new instructions into the box. Alternatively, you may edit the information in the box by positioning your cursor in the box, and then typing the necessary changes (maximum length is 500 characters).
  • For Approved by UM Parking and Transportation, click on the corresponding box and select yes or no from the drop-down list.

 

  1. Click “Submit Form.”

Password Protected pages



Introduction


Restricted pages are pages that only specified users may be allowed to view. Your page must be approved and launched before you are able to password protect it.


Steps:

  1. If you have not already done so, open a second browser for the UM Web Development Site and login. Locate the "PASSWORD PROTECTED PAGES" section.
  2. Add/Delete User:



    Click the corresponding "Go" button to the right of "User manager" which will bring you to the following Add/Delete User page.

    To Add Users:

    • Enter the Username and Password for the User you would like to allow access to your site.
    • Click "Add" button.
    • When a user has been added, confirmation will appear in the upper left hand corner of the screen. Click on the "Return to
    • Options Page" Link at the bottom to return.

    To Delete Users:

    • Select the username from the pull-down menu
    • Click the "Delete" button.
    • When a user has been deleted, confirmation will appear in the upper left corner or the screen. Click on the "Return to Options Page" Link at the bottom to return.
  3. Protect/Unprotect page:

    Click the corresponding "Go" button to the right of "Page manager" which will bring you to the following Protect/Un-protect page.

    To Protect Page:

  • Select the page you want to password protect from the pull-down menu.
  • Select the users you want to allow to view your site from the list on the right of the pull-down menu. To Select more than one user, hold down the CTRL key on the keyboard and click on the additional users names.
  • Click the "Protect" button.
  • Confirmation the page has been protected and the user added will appear in the upper left corner of the page. Click on the "Return to Options Page" Link at the bottom to return.

To Unprotect Page:

  • Select the page you want to unprotect from the pull-down menu under the "Un-Protected Page" section.
  • Click the "UnProtect" button.
  • Confirmation the page has been unprotected will appear in the upper left corner of the page.
  • Click on the "Return to Options Page" Link at the bottom to return.

Site Map



Introduction


View the tree structure of your site.



Steps:

  1. If you have not already done so, open a second browser for the UM Web Development site and login. Locate the "SITE PREFERENCES" section and click "Go" next to Site Map.
  2. A tree structure of your site will display with your Menu Page on top. NOTE: If you have more than one menu page the sitemap may be incorrect.
  3. Click on any of the Headlines to be taken to the View.

To Do List



Introduction


Access to pages nearing expiration, and waiting to be approved or launched.



Steps:

  1. If you have not already done so, open a second browser for the UM Web Development Site and login. Locate the "Site Preferences" section and click the "Go" next to the "To Do List."
  2. Edit Content Nearing Expiration: To update your expiration date click on the headline of the page you want to update. This will bring you to the edit page. From here you can update your content and reset your days valid.
  3. View Pages Awaiting Approval: This is a listing of all pages awaiting approval. Click on the headline in the page you would like to approve. This will take you to the view of that page. From here you can edit, approve, or launch the page.
  4. Launch Pages Awaiting Launch: This is a listing of all pages awaiting launch. Either check the box next to the pages you want to launch and click the launch button or click on the headline to view the page.

Logging out


Once you have completed working on your site, you should log out by clicking the "Logout" button at the bottom of the Options page.


Glossary of Terms

  • ASCII. The predominant character set used by present-day computers. The ASCII character set includes letters spaces and many other commonly used characters (&, /, >, ", #) but does not provide for accented letters or any other letterforms not used in English. ASCII has 187 possible characters.
  • Announcement. Important and timely information that should be shared with audiences who view your Web pages (e.g., key deadlines, recent awards or other recognitions, upcoming deadlines, new services).
  • Browser. A software application that allows users to locate and display information on the World Wide Web.
  • Event. Information describing a function with a specific date, time, and place.
  • Home Directory. When you build pages, they will have an address on the University's main server in the form of a directory for your office/department called your "home directory." For example, someone accessing the home page for the fictional Support Department would point their browser to the home directory located at http://www.miami.edu/support/.
  • HTML. Short for Hypertext Markup Language is a markup language for hypertext, and the language used by the World Wide Web. It is used to create documents on the Web.
  • Information Pages. Information pages provide most of the content for the Web site. The History page is an example of a content page.
  • Keywords. Keywords are words and phrases used by search engines on the UM site and elsewhere to locate information. Using relevant keywords will help users find your page.
  • Menu Pages (Home Pages). Menu pages are the starting pages for major segments of the Web site and serve as the home page for your department. Menu pages provide the main organizational structure for your site through links to up to 10 other Web pages (usually submenu or content pages on your site). The About UM is an example of a menu page.
  • Relative URL. A relative URL is a short alternative to the entire URL that can be used for referencing other pages on the same server. Instead of using the entire URL that includes the server plus sub-directory (e.g., http://www.miami.edu/support/staff.html), the server can be omitted (e.g., /support/staff.html). When using relative URLs in the Web Development Tool environment (either in shells or in embedded links on information pages) you must include the department directory as part of the relative URL even when referencing a page in your own directory (i.e., include everything after the "miami.edu/"). For example, use links of the form /UMH/CDA/UMH_Main/1,1770,2472-1;2543-2;132-3,00.html for links to other Web Development Tool pages, links of the form /support/staff.html for links to static pages outside your site or in your own directory, and links of the form /dept_directory/filename for images on your own directory.
  • Submenu Pages. Submenu pages provide additional structure to your site by displaying links to groups of pages that deal with a common topic. The Prospective Students page is an example of a submenu page that has links to a number of pages that provide general interest information about the University. Submenu pages grouping related pages are useful when there are too many pages on your site to have each linked from the site's menu page (the maximum number of links from a main menu is 10).
  • URL. Uniform Resource Locator. A standard for specifying an object on the Internet, such as a file or a newsgroup. URLs are used extensively on the World Wide Web. They are used in HTML documents to specify the target or location of a hyperlink (e.g., http://www.miami.edu/).

Frequently used instructions

  • Copy text. First select the text you wish to copy by dragging your mouse across the word or longer text. (Alternatively, if you want to select just one word, just double click on that word.) Then, if you are in a Microsoft environment, press the "Ctrl" and "C" keys simultaneously. If you are in a Macintosh environment, press the "Command" and "C" keys simultaneously. Alternatively you can position the mouse over the selected text, click the right mouse button, and then select the "Copy" option to copy the selected text.
  • Copy URL. If you are in a Microsoft environment, click on the address box and press the "Ctrl" and "C" keys simultaneously. If you are in a Macintosh environment, select the address on your browser for the desired page and press the "Command" and "C" keys simultaneously. Alternatively you can position the mouse over the selected text, click the right mouse button, and then select the "Copy" option to copy the selected address.
  • Delete option in pull-down menu. If you are in a Microsoft environment, click on a previously selected option while holding the Ctrl key to "un-select" it. If you are in a Macintosh environment, click on a previously selected option while holding the Command key to "un-select" it.
  • Open a new browser. There are several ways to open a new browser. If your screen displays a program toolbar that includes an icon for your browser, the easiest way is to click on that icon. Alternatively, if you are in a Microsoft environment, click on the screen and then press the "Ctrl" and the "N" keys simultaneously or, if you are in a Macintosh environment, press the "Command" and "N" keys simultaneously. Alternatively, to use the menus, if you are using MS Internet Explorer, select the "New" option from the File menu and then select "Window." If you are using a recent version of Netscape Navigator, select the "New" option from the File menu and then select "Navigator Window." If you are using an older version of Netscape Navigator, the "New Window" option may be directly available on the File menu. This will place you in a new browser that points to the same URL as the browser you were previously using. Next, point the new browser to the desired Web page by selecting the current address (by clicking on the address box) and then copying and pasting (or typing) the new URL you want to use into the address box and pressing Return key. The URL for the UM Web Development Site is https://www.miami.edu/login/.
    If you are in a Microsoft environment, once the second browser is opened, a second button for your browser will appear at the bottom of your screen. You can move between browsers by clicking on the desired button at the bottom of the screen. If you are in a Macintosh environment, you will need to use the Window or Communicator, depending on whether you are using MS Internet Explorer or Netscape, to switch between windows.
  • Paste text. If you are in a Microsoft environment, press the "Ctrl" and "V" keys simultaneously. If you are in a Macintosh environment, press the "Command" and "V" keys simultaneously. Alternatively you can position the mouse where you wish to insert copied text, click the right mouse button and then select the "Paste" option to paste the copied text.
  • Select multiple options on pull-down menus. If you are in a Microsoft environment, hold down the "Ctrl" key while clicking on each desired item in the pull-down menu. If you are in a Macintosh environment, hold down the "Command" key while clicking on each item.
  • Select all text. If you are in a Microsoft environment, press the "Ctrl" and "A" keys simultaneously. If you are in a Macintosh environment, press the "Command" and "A" keys simultaneously.
  • Switch back to the tutorial browser. If you are in a Microsoft environment, you can return to this tutorial by clicking on the first (left-most) browser button at the bottom of the screen and then switch back to the development site by clicking on the second browser button. If you are in a Macintosh environment, you return to this tutorial by selecting the Web Development Tool Tutorial option from the Window or Communicator menu, depending on whether you are using MS Internet Explorer or Netscape, and then switch back to the development site by choosing the University of Miami Web Development Site option in the Window or Communicator menu.

Common error messages and solutions


If you receive an error message at any time while using the system, please email the webmaster with a detailed description of what you were doing at the time the error occurred, and attach the error message.

  • SHOW ACT_LIVE: Go back and login again.
  • Content shifted below sidebar.  Solution: make sure that your content is less than 500 pixels wide.
  • Error Executing: CURL /UMH/CMA/LoginSave (during login): Retype your User Name and Password (make sure they are all lower case). If you still have problems, contact the University Webmaster.
  • DEFAULT_ROW UMH_Sessions (when editing a shell from the Options page): Select a page before clicking on a pull-down menu.
  • Error Trace During Template Execution: Page doesn’t exist. Contact University Webmaster
  • Content looks funny with respect to bullets, indents, etc.: Be sure you saved as HTML and then viewed and copied the source code.
  • You can't find a page you created on a pull-down menu for links on shells--either you've looking under the wrong name or you forgot to launch the new page before building the shell.
  • Headline appears twice on Information page: Select the "Edit/Delete Information Pages" option and edit the headline to start with "<!" and end with ">" (e.g., <! Headline>)
  • Error Executing: LOG SEARCH ERROR in SQL (during preview of: no link set in a shell for a link-name. Edit shell and set link.
  • A link on your site goes to the UM home page on the live site: no link set in a shell for a link-name. Edit shell and set link.
  • Top green bar extends to the right of the top tool bar: If you are using a table, check to be sure that the width is 400 pixels or less. You should also check to see if you might be using a very long URL that is not wrapping.