Web Publishing (with Front Page) I

You may print this page if you feel the need, but we will be updating it as needed so the online copy will always be most up-to-date.

• Types of sites, including policies and the campus template
• Logging onto your web
• Saving
• Adding and modifying text
• Creating links
• Creating new users in your web site
• Layout & Design

Some general definitions of: Server, The Internet, The World Wide Web, HTML, URL, Script, ASP/PHP, "Web Page" vs. "Web Site" & Types of Sites, Browser, ADA

Computer Equipment Access Policy - Faculty & Staff Policy:
http://lynx.csusm.edu/policies/policy_online.asp?ID=36

Interim Accessibility Policy:
http://www.csusm.edu/accessibility/

CSUSM Redesign Requirements and Template:
http://www.csusm.edu/csusmredesign/

To request web space for:

• an official campus site on http://www.csusm.edu/, contact the campus webmaster@csusm.edu
• an unofficial site on http://public.csusm.edu/, use the form at: http://public.csusm.edu/cwis/tools/mkdir.html
• a web site for online course materials, use the form at: http://lynx.csusm.edu/courses/faculty/ 

Front Page is a WYSIWYG application from Microsoft; it will look very familiar (and act similarly) to other Microsoft products.  If you get stuck while trying to do something in Front Page, think of how you would do this task in MS Word.

Open Front Page from your "Start" menu (bottom left corner of your desktop: Start > Applications > Microsoft Office Front Page 2003).
You'll see the default screen if it's the first time you log on. Succeeding times you will simply be prompted for your login/password; Front Page assumes you want to open the last web you had open.  If you do not want to open the last web you worked on, simply "Cancel" the login screen and go on to the next step.
Select "Open Site..." from the File pull down menu and, in the pop-up, fill in the "Site name" with the full URL of your web site (or, if it's not your first time opening this web, you may select the web you'd like to work on from the pop-up window and click "Open") Note: If you are working on a course web your URL will look something like: http://courses.csusm.edu/fren201ec/
Enter your "User name:" and "Password:" for this web and be sure the "Remember my password" check box is not checked, then click "Okay". If you are authoring on the www.csusm.edu server, your username and password is the same as your campus network username and password.  We are working on upgrading the courses.csusm.edu server to allow this too; for now courses web sites use a unique password for authentication.
Now you will see your web files and folders.

• Is everyone logged on?  For this class we have created web space for you like:
  http://www.csusm.edu/webpub/[yourlogin]/
  Note: Your login/password for this class site is the same as your campus network login/password
• Looks like a Microsoft product, doesn't it?  Folder List vs. work pane.
• Go over some cool stuff like:
  • The "tabs" for multiple pages, in page view.
  • The "Type a question for help" in the upper right corner.

Hint: When designing web pages, keep Front Page open as well as a web browser (so you can see the pages you're saving on the server, to be sure that everything looks/works as you want it).

1. First, open a new page:
   1. Use the new page icon on the toolbar or the pull-down menu: File > New... > and select "Blank Page" from the right-hand-toolbar that appears.
2. Use the save icon on the toolbar or the pull-down menu: File > Save
3. Name your files something descriptive but short (names affect URL lengths and users' typing time); never use spaces or non-alphanumeric characters in file names.
   • syll.html, syllabus.html, syllabusfall00.html, syllabus_fall00.html, syllabus_fall_00.html, etc.
   • htm vs. html suffix
   • The "index.html" file is your first or "top" page in the hierarchic structure of your web site.
   • File name vs. Page Title vs. Title within the page
   • Special characters: alpha-numeric characters are always fine; other than that, only dash and underscore are recommended.
4. Use the "Change title..." button to give your pages informative titles that are used by search engines and browser history lists.
5. Be sure you know where you saved your page (and, using your web browser, double check that everything looks/work right).  Be aware of the default "Save in:" location and remember where you left your file(s).

Note: There is a "Save All" option that will save all your open, modified files at one time.

Exercise: Save an index and two additional pages on the web server.

Troubleshooting: What if you save a change to your page and it doesn't appear when you look using your web browser?

1. You may, of course, type text directly into your web page and then format it using Front Page.
2. You may import text from any document, web page, or application that allows you to: Select, Copy, place cursor, and Paste.
   • Be aware of spacing inconstancies.
   • Format as you like, using the toolbar and "Format" pull-down menu.
3. In Front Page, you may open an existing file that you have stored on a local disk by using the pull-down menu: File > Open...
   • Be sure you are looking for "Files of type" "All Files" or you will only see "Web Pages" by default.

Note: When using copy & paste (especially from any Microsoft application) you may be plagued with formatting/translation issues (your pasted text may look/behave strange/ly).  So, we recommend authoring your web documents in Front Page and  formatting after you have the content; or, if you want to keep the formatting of an existing Word document, save the Word file as type "Rich Text Format (RTF)" and then copy and paste your rich text into Front Page.  See the Web Publishing II Notes for more details.

Exercise: Type some text on your "index" page; now go to a web page and copy & paste some text into your index page (try and get a hyperlink); note the formatting of your pasted text.

1. Select the object (image or text) that you want to become the hyperlink and then use the toolbar shortcut to open the "Insert Hyperlink" popup window to select the file you want to link to (remember you can link to an external web page, an image, a sound, a movie, an internal HTML page, or even a document from Word, Power Point, Excel, etc.).
   
   • "Look in:" Current Folder vs. Browsed Pages vs. Recent Files
     • Be sure you note the default "Look in:" location and remember where you left your file(s).
   • Or you could type in a full URL in the "Address:" box (to link to pages outside your site).
2. Click "OK"

Note: Your file/folder structure can be different from the logical structure you give to your pages. <draw example on board>

Exercise: Create a link to the campus home page.  Create a third and fourth link to each of the other pages you created in the Saving section of this instruction.  Create a links from your other pages, back to your index page.

There are two kinds of links that don't link to a whole new page: Bookmarks and Email links.  

A bookmark link (also called target links) is a link to a specific place in a page (often the same page that the link is on), like the links at the top of this page that jump users down to a specific topic lower on this page.  Creating bookmark links:

1. Create the bookmark.
   1. Select the text (or insert your cursor) where you want the link to jump to.
   2. Insert > Bookmark... (ctrl+g)
   3. Make sure the "Bookmark name" is as you want it and click "OK"
      Note: If you selected text to be the bookmark, it has broken underlining now.
2. Create the link to the bookmark.
   1. Select the text that will be the link (to the bookmark you just made).
   2. Insert > Hyperlink... (ctrl+k)
   3. Single click to select the page where the bookmark is (or type the full URL in the Address: field), and click the "Bookmark..." button (on the right side of the Insert Hyperlink pop-up window).
      Note: If the bookmark is on the same page as your link, you can just click the "Bookmark..." button.
   4. Select the bookmark from the list on the "Select Place in Document" pop-up window.
   5. Click OK; click OK again.

Note: The decision to make one long page with a table of contents and bookmarks or many smaller pages that are linked from a table of contents page depends on your intentions for the site and the needs of your users.

Email links link, not to a page or file, but open an email window (using the end-user's default mail application) to the email address you specify.  Creating email links:

1. Select the text that will be the link.
2. Insert > Hyperlink... (ctrl+k)
3. Under the "Link to:" section in the Insert Hyperlink pop-up window, select E-mail Address.
4. Type the address you want to be emailed if this link is used in the "E-mail address:" field.
   Note: You can also type a default subject for the email in the "Subject:" field.

Exercise: Open a new page and make a table of contents and bookmarks and add an email link (and set a default subject) at the bottom for contact information. 

Note: There are reasons to type the full email address on the page, like printability.

To give another person access to your web:

1. Use the menu: Tools > Server > Administration Home...
2. Login using your campus login and password (unless you are authoring on another server besides www)
   Note: This only works using Internet Explorer.
   Note: This opens Internet Explorer and provides a series of pages to administer to your web.
3. Click the "Manage users" link.
4. Click the "Add a user" link.
5. For the "User name" field, if you use a person's campus login, they will be able to use their campus network password to access your web site (this is preferred); in this case, it does not matter what you type in the Password and Confirm Password fields (but you must type something consistent in these fields).  For non-campus users, you may assign any User name and Password you like.
6. Select a User Role
7. Click Add User
   Note: You will be returned to the Manage Users screen; to return to the Admin Site, click the "Administration" link (top left).

Note: Never change your subweb permissions to "Use same permissions as parent web"  This may deny you access to your web.

Exercise: Give "gcollins" "Author" access to your web.

In general:

• Always consider you users when designing a page/site. 
  • Consider accessibility issues, download times, printability, etc.
• The most important screen-real-estate is in the top left of the page, and as we approach the bottom right of the screen, less weight is placed on content (Why?  Because we were taught to read left to right, top to bottom).
• Browsers expect to find navigation links, vertically, along the left side of the page or horizontally, along the top of the page.
• Blank index pages can be used to restrict browser access to certain folders (this is no longer needed on our www server, but may be needed on other sites you maintain).

There are some excellent guides on Layout & Design online (here are just a few I Googled):

• http://www.npgoodpractice.org/PDF/Article37.PDF
• http://webhelp.ucs.ed.ac.uk/docs/goodpractice.html
  (okay... two is enough... these are good ones)

Please fill out the evaluation for this course.

[ Web Publishing I Notes ] [ Web Publishing II Notes ] [ Web Publishing III Notes ]
[ Using the Campus Template and/or META tags ]

This page http://www.csusm.edu/garrett/electures/fp_classes_f05/fp1.html
maintained by Garrett Collins (garrett@csusm.edu)
for Academic Technology Services, Web Application Support team

Last updated Thursday, November 16, 2006 01:15:17 PM