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

[ back to top ]

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:


Logging onto your web
(For the rest of this lecture, it is assumed you are using Front Page XP
to develop pages on http://www.csusm.edu/)

[ back to top ]

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 2002 from your "Start" menu
(bottom left corner of your desktop: Start > Applications > Microsoft Front Page).
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.

1sm.gif (7795 bytes)
Select "Open Web..." from the File pull down menu and, in the pop-up, fill in the "Web Name" with the full URL of your web site (or, if it's not your first time opening this web, 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 "Name:" and "Password:" for this web and be sure the "Save this password" check box is not checked, then click "Okay". 3sm.gif (4973 bytes)
Now you will see your web files and folders. 4sm.gif (7263 bytes)
  • Is everyone logged on?  For this class we have created web space for you like:
    http://www.csusm.edu/webpub/[yourlogin]/ (ask your instructor for your login/password)
    Note: if you are looking for your old training container your URL will be something like:
    http://www.csusm.edu/fpclassNov02/[yourlogin]/
  • Explain Front Page "Views" and the three frame structure; note standard Microsoft toolbars.
  • 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).


Saving

[ back to top ]

  1. Use the save icon on the toolbar or the pull-down menu: File > Save
  2. 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.
  3. 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).

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?


Adding and modifying text

[ back to top ]

  1. You may, of course, type text directly into your web page and then format it using Front Page.
  2. You may import text in 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.


Creating links

[ back to top ]

  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.).
    6sm.gif (6458 bytes)
    • "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).
    • You might want to "Link to:" an "Email Address"
    • Or you could type in the full URL for the linked to page in the "Address:" box.
  2. Click "Okay"

Exercise: Create a link to the campus home page.  Create another link so people can send you and email (and set a default subject).  Create a third link to each of the other pages you created in the Saving section of this instruction.  Create a links from the other pages you just linked to, back to your index page.


Creating new users and changing your password

[ back to top ]

  • Give another person access to your web: Use the menu: Tools > Server (Tools > Security for FP 2000 users) > Permissions... then click the "Users" tab and "Add..." "Edit..." or "Remove" buttons
    • Note: Never change your web permissions to "Use same permissions as parent web"  This would deny you access to your web.
    • The "www" web server uses real campus UserIDs and Passwords. Whenever a user updates their password, it is automatically updated here as well. "Other" accounts can still be created, but for security reasons, we do not recommend this.
       
  • Change your password (for "other" accounts that are not real CSUSM UserIDs):  Use the menu: Tools > Server (Tools > Security for FP 2000 users) > Change Password...

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


Exporting from Front Page

[ back to top ]

These directions illustrate saving to your H:\

Exporting a single file:

  1. Open your Front Page web
  2. Single click that file in the "Folder List" and use the menu: File > Export...

Publishing the whole web:

Open your Front Page web
Use the menu: File > Publish Web...
You will see the Publish Web/Publish Destination pop-up.

Click "Browse" to select the publish destination.

Using the "Look in:" menu, select your local disk/destination.

Click "Open" when you are ready.

Verify your publish destination and click "OK."
In all likelihood, a Front Page web will not already exist at the destination and you will see this pop-up; click "OK" if you do.
Verify the "Options" you want when you publish your web.

Click "Publish" when you are ready.

If your web uses advanced components (like we'll learn in Web Publishing III) you will see this pop-up.

Your only choice here is to click "Continue" if you want to publish your web.

When Front Page starts publishing your files you'll see this pop-up indicating file transfer.
If all goes well, you will see this pop-up when your web has been published successfully.

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_f02/fp1.html
maintained by Garrett Collins (garrett@csusm.edu)
for Academic Computing Services, Web Application Support team

Last updated Tuesday, September 07, 2004 10:12:17 AM