Web Developers' Handbookweb4.uwindsor.ca/units/webdev/documentation/estelle.nsf/0... · Web Developers' Handbook 6 Tab Uses This page will give you a brief explanation of what each

1

Web Developers’ HandbookVersion 1.0October 2004

Estelle RemillardI.T. ServicesUniversity of Windsor

Web Developers' Handbook 2

Why Are You Here?........................................................................................................................................................ 3Lotus Notes....................................................................................................................................................................... 4General Terms .................................................................................................................................................................. 5Tab Uses............................................................................................................................................................................ 6Shortcuts and Helpful Hints........................................................................................................................................... 7Things to be Aware of..................................................................................................................................................... 83rd Level Pages .............................................................................................................................................................. 10Quick Links..................................................................................................................................................................... 12Billboards........................................................................................................................................................................ 13Channels .......................................................................................................................................................................... 16Did You Know................................................................................................................................................................ 17What is a 4th Level Page? ............................................................................................................................................ 18Opening and Closing a Database................................................................................................................................ 19Creating a Website ........................................................................................................................................................ 20Viewing Your Website: ................................................................................................................................................ 23How to Create a Fly-Out............................................................................................................................................... 24Changing Fonts .............................................................................................................................................................. 26Creating Links ................................................................................................................................................................ 27Attaching Documents ................................................................................................................................................... 29Changing Your Banner................................................................................................................................................. 30Changing the Order and Titles..................................................................................................................................... 32Previewing your Website ............................................................................................................................................. 34Bulleted Lists.................................................................................................................................................................. 35Alternative Text (Alt tags)........................................................................................................................................... 36Errors................................................................................................................................................................................ 38Now That Your Website is Done................................................................................................................................ 41


Why Are You Here?

You have been given the role of the Information Officer for your department, and as such, youneed to be online to do that efficiently! By keeping your department website updated, and packedwith information, those who access your website will have less of a need to contact departmentfaculty.

Although speaking live to a person is great, people are finding they would prefer to work online toaccess information.

Some things to keep updated on your site:1. Faculty contact information; this is going to cause a lot of confusion if people are

contacting the wrong persons2. Any news that people should be informed about3. Deadlines, dates that people should be aware of4. Any other information that you feel the public would be benefited by knowing

Keep in mind that people find dozens of websites that they may want to access later on. Insteadof trying to memorize this, people create Bookmarks. They save the link in their settings so theycan access it any time, so keep in mind that you should avoid deleting any web page at alltimes! If someone has your website saved in their bookmarks and you delete this page, they willno longer be able to access it and may not bother to search for the updated page.

Instead of deleting a page:Highlight and delete the body of the page in Lotus Notes, state that the page has been moved,and where it has been moved to, making sure you include the new link to the new site. This waypeople can reach the updated page. Links have their own address, which is affiliated to creationand update times. Once this is deleted, it can not be refreshed in someone’s bookmarks. So keepthis page up – just update the body of the page to reflect where the page has been moved to.


Lotus Notes

This is where you will discover why we are using Lotus Notes and how it is easy and moreefficient to use.

Why are we using Lotus Notes?The reason why we’re using Lotus Notes is because it is part of the infrastructure at theUniversity of Windsor. Since it is paid for, and most staff on campus know how to use some partof it, it is easier to train people on more of Lotus Notes, rather then use an entirely new systemthat people are unfamiliar with. Not only this, but it is also supported at our Help Desk.

Isn’t Lotus Notes just for Email?No! Lotus Notes is very dynamic. It is a database which uses the web as its input/outputmechanism. We use this feature to create Dynamic Web pages. A great feature of Lotus Notes isthat there is no need to use html to create web pages and therefore, no need to train on how touse this. By using Lotus Notes, Information Technology Services can create supplementalservices to help people in managing their web sites.

The Template

What is a template?The term ‘template’ is used pretty much the same way as it is in Microsoft Word or Excel. It is aready-made tool which removes the need for the individual to do a lot of configuring. The usersimply has to enter information which is then reconfigured and displayed (by Lotus Notes) in aform that is consistent with a predefined set of rules we set up. Again, it removes the need for theuser to learn html or other programming languages to create their web page.

Content Management:A very useful feature of the template is the content management. Users can easily manage theirweb sites using this feature, which includes changing the structure of the site.

Corporate Identity:The predefined set of rules that govern the final appearance of the web site is determined by theOffice of Public Affairs and Communications and is formally adopted by the Web ManagementTeam.

Bullet-Proof:The template prevents an IP’er from accidentally changing the appearance of the Web page asdefined by the Office of Public Affairs and Communications.

Inheritance:Changes to the template are automatically transferred to all of the databases that use it.

Getting a Lotus Notes/Domino Database:University of Windsor employees can generate a Lotus Notes/Domino database by visitinghttp://www.uwindsor.ca/quickweb. Anyone can generate a personal database to learn how to usethe template (if you’re serious about learning all there is to know about how to create a website,this can be a very effective learning tool). Faculty can use the Quickweb site to create as manydatabases as they need for teaching purposes.

* Departments must ask the Web Development Team to create databases for any specific needs.


General Terms

Here is where we will try to shed some light on terminology and icons you will find in Lotus Notesas well as this documentation. You may have already come across some of these terms in otherprograms, but they may mean something different in Lotus Notes. If you come across a term, iconetc. that is not found here, but that you feel would be beneficial to include, please let us know!

Cache: this is when you are placing information on your database that is coming from somewhereelse. You must always cache your database when working on 4th level pages so that yourwebsite will be updated with this new information. To do this, go to Actions > Cache The Website

Channels: These are links to other departmental information. You can choose to have these setup on your main page

Fly-out: These are similar to subheadings and are affiliated to the listed items in your TOC

HotSpot: Similar to a bookmark in Word, you can create text in your web page that will act as alink to information found elsewhere

Live: This means that as soon as you close your work on a web page, users can view it on theweb. You can create your web pages within the "Under Development" tab if you do not wish tohave your web pages live just yet.

Table of Contents (TOC): Similar to what you would see in a text book, this is where the maintopics for your website are listed. Throughout your site, this list (on the left-hand side) will alwaysbe visible to the viewer

Under Development: this is where you store web pages that you are working on, but do not wantto be ‘live’

Public Affairs and Communications (PAC): is responsible for defining the University’s image tothe public. PAC is responsible for defining how the University’s web site looks – colours, banners,logos, layout etc.

Web Management Team (WMT): a committee that defines policy and overall direction for theUniversity’s web. Current members are Brian Mazer (Chair), Veronika Mogyorodi, Marilyn Hood,Roger Lauzon and Linda Menard Watt

Web Development Team (WDT): are the staff members in Information Technology Servicesresponsible for developing web services. The team includes Richard Dumala, Sherri Simpsonand Eyob Woldemichael


Tab Uses

This page will give you a brief explanation of what each tab contains and what their purpose is.The two main tabs in Lotus Notes are "Website Manager" and "Title Page (Optional)." Below is alist of all the tabs you will be using and what it is you can accomplish in this area.

Website Manager: Its main purpose is to provide you with all of the tools to create, edit andmaintain your website. The following tabs are included in this section:

Table of Contents (TOC): contains all of the tabs you need to use to create your web pages(except your title page). The tabs included under here are:- Shown In TOC: what is going to appear in your list on the left-hand side of your website- SubCategory (Fly-outs): what is going to appear coming out from a title in the TOC- Not Shown In TOC: pages that are not going to appear in the TOC; this includes Fly-Outs asthey do not directly appear in this list- Pages Under Development: pages that you are working on, but do not want to be ‘live’

Contact Info: contact information for your department

Edit Banner: where you edit the Title, Subtitle and image for your banner

Display Title Page : the main ‘Welcome’ page of your website; do not have to include this

Display Quick Links: recommended that you always choose to show this; these are the most-visited sites for the University of Windsor

Title Page (Optional): This is the tab next to "Website Manager" which provides you with all thetools to create a title page, if you wish to have one. The following tabs are included in this section:

Quick Links: recommended that you always choose to show this; these are the most-visited sitesfor the University of Windsor

Center Billboard: what will appear in the middle of your Welcome Page- On Queue: a page you want to appear during a certain time frame- Off Queue: a page whose time online has expired- Default: what image will appear in the middle of your Welcome Page when there is not anotherone set to appear

Channels: you do not have the authority to update this data

Did You Know: little facts that you wish to enter that appear on the Welcome Page- Show: facts that will appear randomly- Hidden: facts that are hidden until you decide to add them to the “Show” area


Shortcuts and Helpful Hints

This is where you will find tips and shortcuts to make your work more efficient throughout thecreation and maintenance of your website.

Keyboard Quickies:

Paste: Ctrl + VCopy: Ctrl + CCut: Ctrl + XUndo: Ctrl + ZRedo: Ctrl + YSelect All (in a page): Ctrl + ACreating a New Database: Ctrl + NOpening a Database: Ctrl + OSaving Changes: Ctrl + SFind and Replace: Ctrl + F

Highlighting a block of text: You may find when you are trying to highlight a block of text inLotus Notes that it ends up highlighting very quickly and covers too much text. Here’s a trick: clicknext to the line or word you would like to highlight. Holding down the “Shift” key, either click thedown arrow to highlight lines or the back and forth arrows to highlight across and back. If youwould like to highlight until the end or beginning of a line, while holding down the “Shift” key, hitthe “Home” key to get to the beginning of the line or the “End” key to get to the end.


Things to be Aware of

Please read this before you begin! It will provide you with valuable information that can help saveyou time while building your site.

Creating your Web Page:5. Plan: It is always a good idea to plan what you want included in your website first. Outline

what you want included on your website, what the different topics are that you want tocover, as well as what other information should be affiliated to these main topics

6. Create in Microsoft Word first: By creating your web page in Word first, you will be savinganother copy of your pages, which is always a good idea! Not only this, but if you knowWord inside and Out, you may find this easier to use then Lotus Notes.

Deleting a Web Page:If you delete a web page, you may have deleted a bookmark that people had saved to that site. Abookmark has the website address saved, but this is affiliated with your link's modification datesand times. Once you delete this page, the bookmark has been permanently changed on the enduser's side, and this can not be recovered. Avoid deleting web pages at all costs. If you wish tocompletely change a web page, simply delete the body of the page, and let the user know wherethey should go instead (ie. new link) to reach this information!

Creating/Editing Pages:While creating web pages, you may end up with many different tabs across the top and as such,it will become confusing and difficult for you to follow. You may think that some changes haven’tbeen made, when in fact they have – they are in another page you have open! Or, you mayoverwrite information you don’t want to. When you are finished working on a page, simply savethe changes and close that page, before working on another.

Some things to keep in mind when you are creating or editing a web page:1. When you are done working on a page, click on "Save & Close"2. When you are going to work on a page, check to see if that tab is already open3. If you find there are many tabs across the top and it is difficult to follow, close all except

the one you are currently working on

Previewing your Web Page:When previewing your web page online to see what it will look like, the best way to do this is to goto Actions > Preview In Web Browser and choose your browser. You can do this from within theediting page or from the Table of Contents Section. Just make sure you have the correct webpage highlighted.

Spaces at the Bottom of your Web Page:If you feel when previewing your web page that it looks too crammed at the bottom of the page,return to Lotus Notes and go to the page you would like to fix. Click on "Edit Web page" and atthe bottom of the body of the text, place your cursor. Hit Enter a number of times and click"Preview on the Web." Continue changing this until it looks the way you would like it to.

Bulleted Lists from Word to Lotus Notes:Bulleted lists do not carry over from Word to Lotus Notes. If you have carried over a numbered listfrom Word, the numbers will appear along the left-hand side, but the appropriate tabs will not beshown. To fix this in Lotus Notes:

1. Highlight the list you would like to bullet (place the cursor at the beginning of the first lineyou wish to highlight, hold down the Shift key and use the arrows on the keyboard tohighlight everything you would like to be included in the list)

2. Click on the bullet icon in Lotus Notes


3. You will see the bulleted list still looks messy – just delete the unwanted space betweenthe new bullet/number and the old one that was transferred from Word

You may think it would be easier to wait and do this until you are creating your page in LotusNotes. However, by doing this in Word first, you will remember to fix this in Lotus Notes when yousee they are not aligned. When in a rush, you may forget the little things you need to do!

Text boxes:These do not transfer from Microsoft Word to Lotus Notes

Clip Art:The mage sizes you establish in Word are not transferred into Lotus Notes. You can resize theimage once you are in the web page by right-clicking on it, and then clicking on PictureProperties. Test different measurements until you find one that suits you and click on the X in thetop right-hand corner to close and save the changes.


3rd Level Pages

A third level page is basically your department's homepage. This is where most people will startoff when they visit your site. For example, the Human Kinetics department's 3rd level page canbe found at: http://athena.uwindsor.ca/hk

The fly-outs from this section (the list of items that appear when you place the cursor over the link"3rd Level Pages" in the Table of Contents) will provide detailed information on how to build thisarea of your website.

Areas in 3rd Level Pages:Beneath this screen shot are the terms used for each numbered item.

1. Banner: This lets visitors know what department's page this isa. Major Titleb. Minor titlec. Image

2. 4th Level Pages for this department (Table of Contents): These are options the visitor canchoose from to find more information about your department. You have created these based onthe most needed information.


3. Body of main page: This is where you select what information you want visitors who first enteryour site to see. This can include recent news, dates to keep in mind, or any other informationyou may deem useful to the visitor!

4. Quick Links: These are either 'on' or 'off' and the listed items remain the same. It is very usefulto keep these posted at all times, as these were determined to be some of the most visited sitesat the University of Windsor.

5. Contact Information: Information on who a visitor may contact in case they have any questions.


Quick Links

Quick Links are the list of links on the left-hand side of the window that you can have visible toyour user. The listed items cannot be changed, but you can choose whether to have them shownor not. It is recommended that you keep these ‘on’ as they have been determined to be the mostvisited sites at the University of Windsor.

If you wish to change this, go to the "Display Quick Links" tab. Next highlight the Yes or No andselect "Edit." Change your option and click on Save & Close.


Billboards

The Centre Billboard is the section of the main page, which displays the stored image you havechosen. You can choose from numerous options and set this up so that the image will change onspecified dates. If you want, you can keep this page the same for months on end, or have itchange on a weekly basis!

To start, go to the purple "Title Page (Optional)" tab and click on Centre Billboard.

Notes• If you encounter any difficulties – Cache the Website or Refresh! Since most of the

information you are using here is from another source, it needs to bring this information toyour website

• The dates for your billboards in the On Queue section should not overlap. If they do, thenthe billboard that is at the top of the list of overlapping dates will appear

• If an image of your own looks very fuzzy when you Preview it, this is because it is toolarge for the area. The image must be 220 pixels across and should be between 450-500pixels down

Tabs:On Queue: These billboards are the ones currently displayed or set to be displayed at a date you


have specified.Off Queue: This section is for the billboards that you have not set a date for, or ones whose dateshave expired.Default: This is where you set a billboard to be displayed in case there is a time where nobillboard has been set up. It is a good idea to always keep one in here - just in case!

Pre-Designed Billboards:If you would like to use one of the billboards that have been created for the University of Windsor,within either of the above tabs, click on "Select a Billboard."

7. From the categories/pictures listed, click on an image to drill down8. From the images displayed, choose the one you would like to use in your billboard and

click on "Click here to import."9. The "Description" section is used for your own reference so that you will know which

image you chose. If you would like to change this, do so.10. "Start Date" and "End Date" is where you will let the system know when you want this

billboard to be displayed. Edit this.11. Click on "Save"12. Close this window13. Click the "Refresh" button14. Highlight the billboard you want to look at and click on "Preview"

Using your own Image:You can use an image of your own but please remember that it must be 220 pixels across andshould be between 450 and 500 pixels down.

4. Click "New"5. Paste your image into where it says "paste image" (note: you can also enter text here;

type your text, highlight it, and then click on the Text drop-down list from the top menu,edit your font)

6. Set the start and finish dates in the"Shown from" and "Until" boxes7. The "Description" boxes are for your own reference8. Click on "Save & Close"

Editing your Billboard:Simply highlight the Billboard while in the correct tab, and click on "Edit."

Deleting your Billboard:If you would like to delete a billboard, you may notice that this option is not shown as an option.For this to work, it has to say "1document(s) marked for deletion. Press F9 to refresh" in thestatus bar at the bottom.

1. Highlight your billboard2. Hit ‘Delete’ on your keyboard once. If "1document(s) marked for deletion. Press F9 to refresh"does not show in the status bar, continue to hit 'Delete' until it states this. The image below showswhere this message should appear.


3. Hit ‘F9’4. Click Yes

Default:This section is where you would post billboards to be used in case there is a time when abillboard has not been set up to display. This is more of a ‘just-in-case’, but it is a good idea toalways make sure there is a billboard set up here. Setting a date here is not necessary, just usethe default. Please note that if there are two billboards in the Default section, then the top one willtake affect.


Channels

Channels are links you can set up to display on your department home page. These are links toinformation your website may not provide to the user but which you feel the visitor may like tovisit.

To make your selections, go to the purple tab, "Title Page (Optional)" and then click on"Channels."

1. If there is a list already created, highlight this and click "Edit." Note that the list that will appearin your Channels tab read across, not down.2. Next choose the Channels that you would like to display by clicking on the drop-down menuand enter in how many links you would like to appear beneath it in the selection area next to"How many links?"3. Click "Save & Close"

To preview your changes, remember that this information is coming from another source and youtherefore have to cache the website!


Did You Know

This section will appear on your main page under the list of Channels you have chosen and willbe displayed randomly. You can create a list of Did You Know’s so that users can get differentbits of information every time they return to this screen.

Note: it takes a while for these to appear on your site. Do not worry if you do not see them rightaway

Shown tab:This tab is where you will create facts to be visible to the viewer.

15. Click "New"16. In the "Enter fact in field below" section, enter your tidbit between the two brackets.17. Choose "Show" so that this fact will appear to the user18. Click "Save & Close"

Hidden tab:This section is where you would post facts that you may want to use later on, but not immediately.

9. Click "New"10. In the "Enter fact in field below" section, enter your tidbit between the two brackets.11. Choose "Hide" so this fact will not appear to the user12. Click "Save & Close"

Changing Status:If you would like to change the status of a fact, simply highlight it and then click "Edit." You wouldthen change whether you would like it to be "Shown" or "Hidden" and then "Save & Close."


What is a 4th Level Page?

This section is going to explain what 4th level pages are and show the different areas.

4th Level Pages:4th level pages are the specific pages you will create for your department and are accessiblethrough the different links that appear in your Table of Contents. These different pages are wherevisitors will find the information they need regarding your department.

The fly-outs from the 4th Level Pages in the Table of Contents will go into more detail on how tobuild these for your department.

These are the 4th level pages for the Communication Studies department.

Once you click on one of these listed items, you will be brought to the Communication Studiesdepartment's 4th level pages.


Opening and Closing a Database

This section will discuss how to open and close an existing database in Lotus Notes.

Opening a Database19. Double-click on the Lotus Notes 6© icon20. Enter your password21. Go to File > Database > Open22. You may choose from the drop-down menu, but in many cases, it is quicker to type in the

Server name and then hit Enter, or click on Open

To open a file or folder, you can double-click it or high-light it and press Enter, or high-light it andpress Open!

5. Scroll down to the Users folder and double-click on this; or highlight the folder and hit Open6. Scroll down to the letter affiliated to your last name, and double-click on the appropriate letter7. Find your folder, double-click this8. Select your database and double-click this9. You have now opened your database and are ready to go!

Opening a Database While in Another:You can open a database while you are in another database – it’s simple! Just follow the stepsabove. It is recommended that you minimize the number of databases open at one time becauseit can get confusing.

Closing a Database:23. Click on the Disc icon to save everything before closing24. Go to File > Exit Notes, OR click on the X in the corner of the tab of your database

To scroll down a list of files or folders quickly, you can enter the first one to three letters of the fileor folder you are looking for


Creating a Website

This area will discuss how to build your webiste. The first section will discuss building it so it isimmediately visible on your website and further down, you will see the "Under Development"section where it discusses how to create pages that you wish to keep 'off-line' for the time being.

Creating Pages Visible to Viewers:

1. First go to the tab " Website Manager" > "TOC (Table of Contents)" > "Shown In TOC"

2. Click on Create Web page§ The first time you try doing this on a computer, the following may appear. Simply click “Starttrusting the signer to execute this action” and click OK.

3. At the top, you will see: Show this page in the TOC (Table of Contents)? Click Yes if you wouldlike it to appear in this list. If you choose this, anything you create will be live on the web. If youwould like to work offline, then select Under Development. Click No if you would like this page tobe a fly-out instead of listed in the TOC.§ Remember that if you choose No in order to create a FlyOut, this will also be live once youselect that option and have it linked to a listed item in the TOC.

4. Your next option is whether you want to "Make this page a subcategory (fly-out)". Select "No",as we are going to focus on pages in the TOC.

5. "Enter the Order in the TOC" lets you choose which order you would like your pages to appear


in the Table of Contents. If you want to create a Welcome page, you will do this under the"Display Title Page" tab. If you are going to create other pages that you will place before this inthe TOC, enter in the order number you think this one will be (ie. 3). Until other pages arecreated, this one will appear as the first in the list.

6. "Enter the name of the link in the TOC" is asking what you like to appear in the Title Bar. Enterthe name of the page (ie. University of Windsor Website Development Training).

7. "Enter the URL of the link (if necessary)" is where you enter a link if you want the visitor to bebrought to a certain website or web page already created. To make sure you enter in the correctURL of the website you would like this link to go to, go to that website (or page) yourself, highlightthe URL and then Copy and Paste this into this section. For the University of Windsor homepage,you would Copy and Paste http://current.uwindsor.ca/. It is not necessary to enter any text in thebody of this page that you are creating (if you choose to make this a link to an already existingwebsite) because when users click on this link in the TOC, they will be brought to the page youentered.

8. The "Comments" section is for your own use. The visitor will not see this, but it gives you aquick reference to what material is on this page.

9. The "Window title for this page", reflects the name of the link in the TOC. This can not bechanged because it is simply picking up the information you have entered in the field above.

10. "External Search Keywords (Meta Tags)" are keywords you enter so that people searching onthe web for this information can find it easily using a search engine. For example, in Google(www.google.ca), they could enter: Website Development AND University of Windsor

11. "The Internal Search (Service) Keyword" are keywords that also help people find this page.The 'internal' part of this is that users visiting the University of Windsor's website would enter thisinformation in the search engine provided on the university's website and be brought to your site.

12. "Services" is to be used if your department provides services of some sort. Users visiting theUniversity of Windsor's website can be more specific about what they are looking for by statingwhether the information they are seeking is affiliated with a services department.

13. Now it is time to "Enter the body of the page here"! You can manually type in yourinformation, or you can create it in Word and then Copy and Paste your text into this area. Wordhas an excellent Spelling and Grammar Checker, so it is recommended that you do your work inWord first. Please be aware that lists and bullet format do not carry into Lotus Notes. You willneed to either enter this data in manually using the bullet/list tools in Lotus notes or copy andpaste this information from Word and then fix it in Lotus Notes.

• If you wish to change the font of your text after you have entered the data, you can do soby doing it in Word and then pasting over the text already in Lotus Notes, or you canhighlight the text (while in Lotus Notes), and then go to Text and choose from the list ofoptions. If you are finding it difficult to highlight the text in Lotus Notes, please visit"Shortcuts and Helpful Hints"

• If you would like to add empty space to the bottom of your page to eliminate a crampedlook, simply press Enter a number of times at the end of your text. Test different amountsof space to see which suits your needs to most.

Show this page in the TOC (Table of Contents)? > Under Development:The Under Development page was created for users who did not want to post their websites rightaway, but wanted to work on it in Lotus Notes. This is an excellent tool for you if you would preferto do your work off-line first.This area works the same way as working on the page live. Keep in mind that when you aretesting it to see what it looks like, you will only see the body of the web page and not the link in


the TOC. Also, when you go searching for this page, keep in mind that it will not be listed withyour other pages under the "Shown in TOC" tab, but rather the "Under Development Tab."

Create your page as you normally would (either within the "Shown in TOC" tab or the"Underdevelopment" tab), making sure that you select "Under Development" when you arecreating your page. To change the status of your page so it is live, you would do the following:

25. Go into Website Manager > TOC (Table of Contents) > Pages Under Development26. Highlight the website you want to make live, and then click on Edit Web Page27. From the top selections, choose Yes to whether you want it to show in the TOC28. Click Save & Resume29. Close this folder by clicking on the X and you will see that it is no longer in the Pages

Under Development tab30. Click on Shown in TOC tab and you will see that it is now listed here to show that it is live


Viewing Your Website:

While you are creating your website, you can easily test it to see what it would look like to thevisitor.

If you are editing your website, you can stay in the same view. Make sure you "Save & Resume"first so that you will see the changes you made. Next you can simply click on "Preview on theWeb". Or you can go to "Actions" > "Preview on the Web". Below shows where these options are:


How to Create a Fly-Out

Fly-Outs are where users will be able to drill down into your site to find more informationregarding a listed item in the TOC. Flyouts are useful when you have a lot of different informationyou would like to be associated to a specific topic in the TOC. Flyouts appear when you place thecursor over a topic listed in theTOC. The more Fly-Outs you create for a selected topic, the largerthe list will be.

The graphic below shows what these are and how they appear to the viewer.

Where you create them:You can create this web page directly under "Website Manager" > "TOC (Table of Contents)" >"SubCategory (Fly-Outs)" or you can create this page as a regular web page under Shown inTOC, ensuring you choose the correct options so it is created as a Fly-Out and not a regularpage.


Creating your Fly-Outs:1. To begin, choose whichever of the above tabs to create your page in and click "Create Webpage."

2. For the option "Show this page in the TOC (Table of Contents)?" make sure you select No

3. Next, for "Make this page a subcategory (fly-out)" choose Yes. Keep in mind that if you select‘Yes,' then it will automatically switch the answer to ‘No’ if you didn’t choose this for "Show thispage in the TOC" above.

1. "Categorize this document under" is asking you which topic you would like to have this flyoutaffiliated with in the TOC. If you do not have any other web pages listed in the TOC up to thispoint, you will not be able to view the flyout in your Internet Browser, but you would be able toview the body of it yourself to see what it looks like. If you do have web pages created, then youcan choose these from the drop-down menu provided.

2. "Enter the order of the sublink" is used the same way as "Enter the order in the TOC" for themain page. Enter in which order you would like it to appear, taking into consideration other fly-outs you may have associated to the main document in the TOC. Again, if other flyouts are notlisted and you do not want this one to appear as the first one, it will appear as the first one untilothers are created.

3. "Enter the name of the sublink" is where you enter the title of this new page. It will be ‘flyingout’ of the topic you affiliated it with in the TOC.

4. "Enter the URL of the sub link" is where you can enter a link to have this flyout bring the visitorto a specific website. If you would like to do this, make sure you visit this website yourself, copythe URL, and then paste it into this section. If you choose to do this, you do not have to enteranything into the body of the page. If you do, the text will only appear for you when you previewthis flyout page. Once anyone clicks on the flyout, they will be brought to the link you enteredwhile in Edit mode. If you do not want a link here, just leave it blank.

5. "Comments" lets you enter information for your own reference. The visitor will not see this.

6. "The Window title for this page" reflects the name of the link in the TOC. This can not bechanged because it is carrying over information from other fields.

7. "External Search Keywords (Meta Tags)" are keywords you enter so that people searching onthe web for this information can easily find it using a search engine. For example, in Google(www.google.ca), they could enter: Website Development AND University of Windsor.

8. "The Internal Search (Service) Keyword" are keywords that help people visiting the Universityof Windsor's website find you.

9. "Services" is to be used if your department provides services of some sort. Users visiting theUniversity of Windsor's website can be more specific about what they are looking for by statingthat the information they are seeking is affiliated with a services department.

10. "Enter the body of the page here" is where you will enter in the text you would like the visitorto see on your page.

Now test your page to see your hard work come to life!


Changing Fonts

Changing fonts in Lotus Notes is simple! If you know how to do this in Microsoft Word or WordPerfect, then you will be able to apply this knowledge to Lotus Notes. If you would like to testdifferent fonts and see what looks good on the web page, you will need to Save the pages andthen Preview them. Therefore if you would like to revert to previous texts, you will need toremember what this was, or copy this elsewhere to save it – just in case.

Another thing to keep in mind is that the font size you see in Lotus Notes may not be reflected onthe website. Try out different sizes to see which one looks the best.

Changing the Font in Lotus Notes:1. Select the text you want to change2. Go to Text > Text Properties

Make sure that if you are keeping updated Word documents of your webpages, that you changethis in the associated Word page as well.

Changing the Font in Word:You may find it easier to change the font in Word first and then copying and pasting this intoLotus Notes.

1. In Word, change the font to how you would like it to appear in your web page.2. Copy this text (right-click, Copy) and then paste it into the web page you want to change.3. Save this and Preview on the Web

Keep in mind that some fonts from Word are not compatible with Lotus Notes.


Creating Links

This section will explain to you how to create links in your website: hotspots, links to otherwebsites, and links to websites that will open up in another page.

Creating Hotspots:Hotspots are where you link text in a web page to another file in Lotus Notes.

1. First go to the file, document or text that you would like the text to be linked to. (You canalways create a hidden page for documents that are saved locally on your computer but that youdon't want everyone looking at - go to Attaching Documents)

2. Highligh this document or text

3. Go to Edit > Copy as Link > Document Link

4. Next, go to the text that you would like to act as the link. Highlight this.

5. Go to Create > Hotspot > Link Hotspot

You will see that the box has the document's file path already in there. Just close this box. Pleasenote that when creating a hotspot, you must do it in this order.

If you see that you can not go to Create > Hotspot > Link Hotspot, this is because you may havealready created a hotspot for this text. To remove the old hotspot, click within the text, and go toHotspot (in theMenu Bar) > Remove hotspot.

Moving the Page/File that the Hotspot is Linked to:If you change the location or destination file of a hotspot, make sure you update this in the linkedtext. Simply remove the hotspot in the text and then re-add it following the steps above. If your


link is to a page, your hotspot will not be affected if you make changes within this document. Aslong as you are not moving the location of the file, then you do not have to update the hotspot.

Creating Links to other Websites:To create links to other websites, it is quite simple. Follow the following steps:

• First you need the address of the other website that you want a link to. Open the websitein your browser and copy the address.

• within the document go to the field show in Toc - Yes• Make this document a subcategory? NO• Enter the order of the TOC• Enter the name of the TOC• Enter the url (if necessary): paste the address

That's all there is to it. Save your work and preview the document to see the change.

Creating Links to Websites That Will Open Up in Another Page:To create links so the website opens in another window, you will have to do some coding. Butdon't worry - we will give that to you! Please note that this does not work for fly-outs.

When you are in the Edit Mode, you will enter the link in the section where it states "Enter thename of the link in the TOC."

If you enter:

Another window will open up and you will see the University of Windsor's main page. To changethis so the user will be brought to a different site, you will change the University of Windsorinformation to reflect the new information.

* Note: if you have extra spaces between the end of the coding and the bracket, you will getScript Errors. Erase these extra spaces.

Removing Hotspot:If you would like to remove a hotspot, you can simply click within the text that acts as the link(when in Edit mode) and go to Hotspot > Remove Hotspot.


Attaching Documents

This section will discuss your options when it comes to attaching documents to your website.

Creating an Icon- Link to a Document:You may want to do this if you have documents that you would like to be made available topeople so the user can open it in Word and manipulate the body of it (if you want them to havethis capability), and open it and print it off.

1. In your web page, click where you would like the document icon to be located.2. Then go to File > Attach3. Browse to the file you would like the user to have access to and select it.4. Click Create

You will see that the file is now within your page. Note that in order for the user to be able to openthis, they must have the same application installed on their machine. It is a good idea to providelinks to sites where they can download the application legally.

Importing Document Directly into Web Page:This is where you will learn how to import the body of a document directly into your web page.This tends to look messy (especially with Excel) and it may be best if you copy and paste thebody of text directly into your web page.

1. Go to the web page you wish to import the document into2. Go to File > Import and select the document you would like to have imported3. Click on Import


Changing Your Banner

In this section, we will discuss where your banner is and how you can and cannot change it.

The background colour can not be changed in your banner. The schema was chosen by yourdepartment head and these colours were based on the graduation hood colours for yourdepartment. If these colours were not thought to be acceptable, the Dean of your faculty chosewhat you see. If you have any questions or concerns regarding this, you will need to contact yourDean or department head. Information Services does not have the authority to change this in theweb development process.

The banner colours that you see will maintain its format throughout your pages, but you do havethe ability to change the title and subtitle, as well as the image depicted for your pages. Pleasenote that different wording or images can not be applied to different pages of your website - thewording will remain constant throughout your site. You can update this information whenever youwish, but anything you type into the banner will be applied to all of the pages of your website.

Editing Your Banner:31. Go to Website Manager > Edit Banner32. Highlight the existing banner and click on Edit33. Enter your main title in the Major Title field34. Enter in your subtitle in the Minor Title field35. To use a different image then the one shown, click on Import New Image at the top of the

page, next to Save & Close36. Choose From Image Library37. Some of the pictures shown have other images for you to view once you click on them

(once you drill-down). Click on one of the images shown to view all of the images storedunder that picture.

38. Make your selection and click on the disc icon. This will save this as your new image inthe banner of your pages.

39. Close this window40. You will not see this image reflected immediately! Just close this window and click on Yes

to save the changes13. Return to Lotus Notes and test to make sure your new image was imported, by previewing awebpage you have created. The new image should be depicted where the old one was.14. The Department field can not be updated in the Banner editing section. It is linked to


whicheverdepartment you are building the website for, and as such, is linked to the banner chosen by yourdepartment head or Dean.

* If you are only changing text, then click on Save & Close. If you are changing the image andanything else, then simply click on the X at the top to close this window and choose Yes to savethe changes.


Changing the Order and Titles

This section will explain how you can change the order of your pages (listed in the TOC or as partof a list of fly-outs) and titles of these documents.

Changing the Order in the TOC or Fly-Outs:You can easily change the order of your topics in the TOC of Fly-Outs if you decide to changewhat you set up previously. Just remember that you must have different numbers associated todifferent topics. If you do not, then the following error will appear when you try to preview it.

Changing the Order in the TOC:To change the order in the TOC, make sure you are in the right window: Website Manager > TOC(Table of Contents) > Shown In TOC

1. Look at the page you wish to change the order for, and look at it in relation to others2. Determine where in the list you wish to move it to and what number is associated to the pagebefore and after it under the heading "Order"3. Highlight the page you wish to change the order for and click "Edit Web page"4. Next to "Enter the order in the TOC," enter in the number which will move it to the spot youwould like it to be

For Example: If you would like to move the page “General Information” so it is positioned between“Our Department” and “Directory,” you will need to know where these other two pages are listedin the TOC. If “Our Department” has a 1 next to it under Order and “Directory” has a 2, then youwould have to assign “General Information” the number 1.5.

Changing the Order in the Subcategory (Fly-outs):This is performed the same way as above. The only change is that you make sure you are in theSubcategory (Fly-outs) page and that you change the order in the "Enter the order of the sublink"field when you go to the Edit mode.

Cleaning up the Order of pages:If later on, you feel that the numbers for your topics are getting confusing in Lotus Notes, then goto the last page in the list, and move it up to the next rounded-up number. You would then gothrough each page after that and move it up one page number at a time so that every pagenumber is an even number.

This is more for your own visibility and user-friendliness, but if it means it will help you managethings better – go ahead!

For Example: If you had the following web pages in the TOC with these "Order" numbers- “Our Department” 1- “General Information” 1.5- “Directory” 2- “Class Listings” 2.5- “Potential Careers” 3


You would figure out what number “Potential Careers” would be in the entire list. For thisexample, it would be placed 5th. So we would change this in "Enter the order in the TOC" for thispage, and then change “Class Listings” to 4 and continue on until all the pages have the numbersassociated to it that you would like it to. If there is some overlapping (ie. Two pages have thesame number), one page will be invisible to the user until you change it to a number that no otherpage has. So as long as you do this quickly, users should not have any trouble accessing yourdata.

Changing the Name of Pages:When doing this, it is important that you look to see what page you are changing. If you arechanging a sub-category (Fly-Out) name, then you would do so by going into the Edit mode. Ifyou are changing the name of a category in the TOC, there are some steps you will have toperform to make sure any Fly-Outs affiliated with this page remains visible on the web.

After you have changed the name of the title of a listed item in the TOC, do the following:41. Go into the "Subcategory (Fly-Out)" tab42. Find the topic whose name you just changed. You will note that the name is not reflected

in this tab. The reason is because that page with the new name technically does not haveany Fly-Outs. The users therefore will be unable to view these on the website. You mustgo and update the Fly-Out’s information so the users can see them and access them.Click on the arrow next to the old topic heading.

43. High-light the Fly-Out and click on "Edit Web Page"44. Click on the drop-down arrow next to "Categorize this Document Under"45. Select the new heading in the window and click "OK"46. "Save & Resume" this window and "Preview" it to make sure the links are working

properly.


Previewing your Website

It is always a good idea to preview your website whenever you make changes to your pages. Thiswill let you know if there are any errors occurring, or whether it just doesn’t look the way you wantit to. Note that you will need to "Save" your changes before you can preview them. Therefore youcan not revert to previous settings once this is saved. A good idea is to save the original text in anopen Word document – just in case you don't like your changes as you see them online.

If you are within the TOC tab, highlight the page you wish to view and either

1. Click on "Preview on the Web" OR2. Go to "Actions > Preview in Web Browser" and choose your browser

If you are editing your web page, you can follow either of the above steps from within the Editmode.

Keeping a Browser Open:By keeping a browser window open, you can "Save" these changes within Lotus Notes, and thensimply refresh the Internet window. You should be able to see the changes (unless you need tocache your site in Lotus Notes first!) Keeping a browser open also allows for easy access topreviewing your pages in the same environment your viewers will.


Bulleted Lists

When creating bulleted lists, keep in mind that the tabs between numbers and text are notreflected when transferring this from Word into Lotus Notes, and Lotus Notes does not allow extraspacing in between bulleted information. If you try placing more spaces between two bulleteditems, a number will appear in that new space.

Creating Bulleted Lists:To create a bulleted list, you do so similiarly as you would in Word. Simply click the bullet iconsand start typing in your information. You can also do this by clicking Text > List and then choosingwhat type of bullet you want.

Transferring Lists From Word:If you’ve already created your bulleted list in Word, simply highlight the text and Copy this. ThenPaste this into the body of the page in Lotus Notes.

47. Highlight this text that you just transferred into Lotus Notes48. Click on the “Numbers” or"Bullets" icon in Lotus Notes – it looks similar to the bulleted list

icon in Microsoft Word49. You will notice that it still looks pretty messy. Go to each line and delete the extra

spacing. It is best to just continue clicking the “Backspace” or “Delete” button, rather thenhighlighting a chunk of space and deleting it.

To finish the bulleted list, click on the bullet icon again to dis-engage it.


Alternative Text (Alt tags)

What is the importance of alternative text?

Computers cannot interpret images and present them in a meaningful alternate format; alternativetext gives the computer something to present to the user. This is important for users who haveturned off image-loading in their Web browsers, those using text-based browsers like Lynx, andpeople who are blind and require the use of a screen reader like JAWS to read the contents ofthe screen.

As information provider or website author what am I required to do?

Ensure you provide appropriate alternative text to all of your images.

What is an appropriate alternative text?

When creating alternative text, aim for a functional label based on the context in which it is usedrather than a visual description.A good test to determine if alternative text is useful is to imagine reading the document aloud overthe telephone. What would you say upon encountering this image to make the pagecomprehensible to the listener?

Creating alternate text on UofW web authoring template :

After you copy and paste or import your image into a document:

Right click on the image and click on the Picture Properties from the popup menu.


Portion of this document was taken from BobbyTM


Errors

This page is devoted to helping you when you encounter errors. If you do not find the error youare experiencing, please contact us so we can help you as well as post it to help others.

1.

This error means that you are trying to perform changes on a document that is not considered adocument under this tab. This often happens when users have highlighted a listed item in theSub-Category tab to edit, when it is an item really saved in the TOC. You must expand this list tothen select a document under it (a sub-category/fly-out)For example: If you wish to edit a page that is in the TOC, make sure you are in this tab, and thenhighlight and edit that page.

2. Web page not showingIf you created another page before this one with the same order number, then it will not work. Youhave to change the order for both of them to reappear.

3.

You will receive this error when you go to preview a page that shares a name with anotherdocument in this area or when you have assigned the same number to two different headings inthe same area (ie. In the TOC).

You will need to go to the correct tab, highlight one of the pages and change the name of it, or itsorder.

4.


This message occurs after you have entered an image. Instead of clicking Save & Close afterentering a picture, click on the ‘X’ to close this tab.

5.

This happens when text is entered where data should have been. Double check the data youentered in the order of a page and correct this. Press Enter after entering the order of a page

6.

This also happens when entering in text data where there should be numerical data. Doublecheck the data you entered in the order of a page and correct this. Pressing Enter after enteringthe order of a page

7.


When this happen, click Yes. You may see that your list in the TOC is not visible. This may behappening because somewhere in your list of headings (in the TOC or Fly-Outs), there arequotation marks or other symbols that do not belong in a heading. Double-Check all your LinkNames to make sure that there are no other symbols there except for text. If there is, you will notbe able to see any of the listed items.You may also be trying to give a page name with a link (so it opens in a new page), when it is aFly-Out.


Now That Your Website is Done

Now that your website is done, there are a few things you should keep in mind:• keep this information up to date! People are relying on the web more than ever to find

information, and this is no different for students and faculty• remember to avoid deleting web pages at all costs! An alternative is to create a folder for

copies of your pages in Word format and to provide a link on the page to direct visitors tothe new location of this information

• keep your website clear, concise and easy to read

Happy web developing!