Your IFS (Institutional File System) space

To have your web page file accessible to the web browsing public, it needs to be inside an "html" directory, which in turn is inside your "Public" directory in your ifs space (which everyone has). Your IFS space has several directories, including "Public", "Private", "mail, and "Shared". See this FAQ on your ifs space. See also this IFS overview.

Where do I put my web pages? Public/html

Everyone at UM with a uniqname should already have a "Public" directory. (If you don't, you should create one.) You may already have an "html" directory already in your Public directory. (If not, you will need to create a new directory with the name "html" (lower case) inside the "Public" directory.) Place all your web page files inside that "html" directory. (You can create subdirectories as well, once your web site gets more complex, but no need for that now.) The file itself needs to have the extension ".html" (or alternatively, .htm) at the end so that it will be recognized as a web page. Using mfile is the easiest way to go for most.

What should the address (url) be for my home page,should I decide to create one? Public/html/index.html

To create a "home page," create a file with the name "index.html" and place it inside your Public/html directory.

(Note: You may find a small file named "index.html" already in your Public/html directory. To quote itd, "this page is just here as a placeholder, you should replace it with your real page.") The default index page should look something like this.

For more info, see http://www.umich.edu/~umweb/how-to/ and http://www.umich.edu/~umweb/faq/homepage.html

How do I upload (transfer) files from my local computer onto my ifs space?

There are several ways to do this.

• Access your "H-Drive" by clicking on the "My IFS Space" icon on campus Windows XP machines. Copy (drag) files into the Public>html directory inside your ifs space.
• use SSH Secure Shell (Windows) or Fugu (Mac OS X). Re SSH: On campus Windows XP machines, this application is located in: Programs>Internet&Email>SSH Secure File Transfer. Your local files will be listed on the left window, and the remote files on the right window. Click on "ITD-Login" to connect to remote host. You can now upload or download files. For more info, see http://www.itd.umich.edu/help/faq/ifs/ifsconnect.html. (Note: for greater security/encryption, the university has shifted from WS_FTP to SSH for Windows, and from Fetch to Fugu for the Mac).
• use the built-in FTP program within Dreamweaver. (Note: this works really well for managing large sites, but is not necessary if you are just creating a few pages.) See Managing Your Site with Dreamweaver 8 (PDF)
• fairly new (and easy): use mfile (afs file management)

Simple steps to improve your web page

1. Change font style, size and/or color. (Best stick to standard fonts, such as Helvetica, Arial or Times)
2. Change background color and/or image. Often it is best to stick with white or a very light shade.
3. In a long document, use anchors (links within a page) to quickly move from one section to another. Here is a link to the bottom of the page.
4. Fix broken links to other web pages.
5. Fix broken links to images (remember that images are stored as separate files, and all these image files need to be in your html directory as well or they won't load properly). A common mistake is to forget to upload your image files into your Public>html directory. Images stored on your hard drive (e.g., your C drive) are NOT accessible to the web. How to double-check? (a) be sure that all links on your page (including images) are to your ifs space and NOT to any local drives; (b) check that your web page works on a machine OTHER THAN your home machine (where the images reside on the local HD).
6. Use tables to organize materials (you can chose the number of rows and columns, widths, cell padding, and whether to have visible or invisible borders). Example: the top of this page uses a 3 column x 1 row table, without borders.
7. Use a table format to create a chronology/timeline of important dates (e.g., history of planning)
8. Insert tables, graphs, images where appropriate (properly and completely cited, of course)
9. you can always insert links within the text itself. For example: "The homeownership policies at the U.S. Department of Housing and Development emphasize a public/private partnership approach."
10. You can also link to other student topics (see #7).
11. List complete sources of all materials used (including, where appropriate, www links).
12. Check spelling (most software programs allow you to do this.)
13. Use bullets and/or numbers to organize some materials
14. insert horizontal lines to separate different sections (see the line above this section.)
15. Start your web page with a nice, concise narrative to help the reader orient to the page. For longer pages, a table of contents (perhaps using anchors) can be effective. You can use frames, but that can be unnecessarily complicated.

More Advice
* Use an index.html file for your home page
* Be consistent about using .html or .htm (so you don’t get confused)
* Set up directories (e.g., a separate directory for each class; subdirectories for image files, etc.). Use a logical site organization.
* Avoid spaces and funny characters in file or directory names
* Separate personal and private content – think of your web page as an extension of your c.v./resume
* Test your pages on various platforms/browsers.
* Check for speed of pages. Avoid excessively large image files. You can reduce the size in Photoshop. (For advanced users: Consider using interlaced .gif images).
* Avoid hard to read backgrounds
* User Dreamweaver’s site management to have a local version of your web page.
* Keep it simple (and avoid using frames)
* Think about screen size/resolution.

Creating a Simple Web Page using MS Word

1. Write your assignment in MS Word and save as a word document. (If you want to add web links to other pages, e.g., to http://www.ncced.org/, you can do this by "Insert Hyperlink" under the "Insert" Menu of Word.).

2. Then save the file as a web page. (This will add the extension of .htm -- which is fine, but you can always add an "l" at the end to make it .html if you like that instead. The page will look exactly the same -- it is just a matter of two different url conventions -- but it is important to give me the right address.) [Note: Office gives you the choice of "save as web page" or "save as web page filtered." The filter removes some (but not all?) of the html code "junk" that Microsoft creates. For more info, see Office 2000 HTML Filter 2.0 (from Microsoft) or Save the File as (Filtered) HTML (from WebAIM). You will generally find that web pages created by MS Office have a lot more (unnecessary) code than those pages created by Dreamweaver. As a result, this apparent "short-cut" may create more problems than it solves. Use cautiously.]

3. You can "preview" the web page (see this command under MS Word's file menu -- at least in the most recent version of MS Office, which if you don't have, you can buy for about $42 at the computer showcase in the basement of the Michigan Union -- a good investment if you are running an older version of Office and your current machine can handle this latest version). Depending on what the default browser is for your computer, you can then preview the page in Netscape, IE, etc.

4. Make changes to the web page so that it looks better (change font size and color, etc.). Do stick with standard fonts, such as Times, Arial, Helvetica. (You can edit the page either in Word, or if you are adventurous, you could try it in Dreamweaver, GoLive, Frontpage, Composer, etc. The older versions of Word used to create rather clumsy web pages requiring lots of cleaning up, but the latest version of Word seems to do a better job, and the on-line help for Word web pages is not too bad.)

Once your web page looks o.k., you are now ready to upload the page onto your ifs space so that the rest of the world can view it.

5. First, be sure to create a new directory named "html" inside your "Public" directory of your ifs space. (The Public directory is already there, but you need to create the "html" directory.)

6. Put a copy of your file in your "html" directory of your ifs space. (Any file inside that directory can be accessed on the web. It needs to have .html as an extension to be read as a web page.)
Use any method that allows you to upload files onto the server. one used to use FTP; now: use SSH Secure Shell (Windows) or Fugu (Mac OS X).

IMPORTANT: Make sure that any image files -- e.g., mypictureofabrownfield.jpg or graph1.gif -- are also copied into your html directory, or they won't load when people access your web page. Remember that web pages store text on the web page file itself, but images are stored as separate files.

7. Test your web page by using a browser. Looks good? You're done! Look's o.k. with some flaws? We can fix it.Good luck! and feel free to share questions, advice and web tips over the class listserv.

Creating a Simple Web Page using MS Excel -- data tables and charts [updated Feb 2008]

Overview: Data tables in web pages are usually stored as tables directly within html. Charts are stored as separate .gif files. (You could also have a data table stored as an image (.gif) file, but that solution is not usually as effective or flexible.) And now the details...

Creating a data table

METHOD 1: copying cells and pasting into Dreamweaver (fast and easy)

1. Select the cells you want in your web page.

2. Copy

3. Paste directly into Dreamweaver.

4. Edit the table: borders, column widths, etc.

METHOD 2: Using Excel's "Save as Web Page":

1. Use the "Save as web Page" option under the File menu.

2. You have a choice of converting either the entire workbook (the file with all the worksheets) or just the individual worksheet. (The latter is simpler and gives you more control over formatting, but the former is a quick way to make an Excel file with many worksheets available on the web.) Excel will then save worksheets as a .htm file. You can also selectively convert part of a worksheet by highlighting those cells and then saving that "selection" as a web page. (NOTE: these options might vary somewhat depending on your version of MS Office and whether you are using a MAC or Windows machine.).

3. You can then use a web editor to edit the resulting html file that contains the data table. Dreamweaver (and other web editors) allow you to add and delete text in the table, change the format of the table, add or delete or merge columns and rows, change font size, style and color, left-justify, etc.

Creating a Chart (graph)

METHOD 1: right-clicking the image (works in Office 2007 -- but not likely in older versions?)

1. In Excel, right-click on the image

2. a dialogue box opens, allowing you to save. Options include

• file format (.gif is fine).
• file size (in pixels). I would recommend about 800 (wide) x 600 (tall). (for pixel sizes, see this demo page.) Remember that screen resolutions vary by physical size of screen and the size of the pixels themselves. (The classroom projector has a lower resolution than most computer monitors.)

METHOD 2: copying to Photoshop

1. In Excel, SELECT the entire chart and COPY.

2. Paste into Photoshop.

3. Save as .gif file. (You might use "Save for Web..."). Be sure to reduce the size of the file: e.g., "Image size" New Size: set width for 800 pixels. (for pixel sizes, see this demo page.)

METHOD 3: Using Excel's "Save as Web Page": Also works, but lower graphic quality and less efficient than the Photoshop Method.

1. Use the "Save as web Page" option under the File menu. Highlight the entire chart that you wish to use. (Be careful not to select just part of the chart, such as the data points or the title.) Choose "selection: chart" (if the chart is an object in an Excel worksheet), or "worksheet" (if the chart is a separate worksheet).

2. Excel generates a web page (.htm file) and a separate folder containing the image files (.gif format). You have several options here: (a) You can use all these files created by Excel, and further edit these files using an html editing program such as Dreamweaver; or (b) you can simply use the image files (.gif format) -- thus using Excel to simply convert the charts to image files. [I tend to use Option (b), and simply delete the html page created, saving only the .gif file. Yes, I know that is sounds like an efficient process, but I find that the html page created by MS Office has some html code "junk" -- I would rather just use Office to create the .gif image files and then write my own html page -- with cleaner formatting -- in Dreamweaver.]

3. For charts: You CANNOT edit the graphs/charts (since they are saved as .gif image files). However, you can specify in your web page where the image will appear, etc.

Notes on alternative paths to get Excel charts into web pages: FrontPage users can simply copy the chart and paste into a FrontPage document. You cannot do this with Dreamweaver. However, you can copy an Excel chart, "paste special" into a word document (as a "Picture" file), and then copy and paste this picture into Dreamweaver (using the word file just as a temporary intermediary). You could also paste the image into a blank page of graphic editing program (such as Photoshop) and then save as a .gif. NOTE: if anyone finds a more direct path between Excel and Dreamweaver, please let me know. Thanks. (Note: There seem to be some VBA-based downloadable utilities out there, such as "Graphics Exporter", that might do the trick for advanced users.)

Image Sizes

As you create your web page and insert images (e.g., as gif or jpg images), be aware of the size of your images and how they will be viewed on different screens.

See this page to view how four images of different pixel sizes (640 x 480; 800 x 600; 1024 x 768; 1280 x 854) look on your display. Use this as a guideline to help size your images.

Other Resources

Web Searching google altavista

Alternative Web Browsers Opera (browser) icab Mozilla / Firefox Safari

Web Design U-M ITCS: Publishing on the Web umweb -- "How To" Web Style Guide (2nd edition) UM KNC > How-to > Web Design

Other World Wide Web Consortium and its Platform for Privacy Preferences (P3P) html code tutorial http://www.w3schools.com/html/ Wikipedia: html • xml • RSS

Selected Glossary - see also http://www.umich.edu/~umweb/how-to/faq.html#glossary
see also: cnet glossary or Matisse Ezner's glossary

html	HyperText Markup Language
css	Cascading Style Sheet (see this UM/KNC pdf handout).
domain name	the name that identifies an internet site, such as: umich.edu
ftp	file transfer protocol (a method for transferring files between different machines)
gif	graphic interchange format - a file format commonly used for image files. These files are typically smaller than jpeg images, but they don't handle to subtle coloration of photographs, etc. Files in this format have the extension .gif
http	hyper text transfer protocol
ifs	institutional file system (a central location to store your files)
IP	internet protocol
ISP	Internet Service Provider
jpeg	Joint Photographic Experts Group -- a file format commonly used for image files (such as photographic images). Files in this format usually have the extension .jpg
SSH	Secure Shell (file transfer), which uses sftp
sftp	secure file transfer protocol
TCP/IP	Transmission Control Protocol/Internet Protocol
url	uniform resource locator - basically the address for a web page, such as http://www.cyburbia.org
www	World Wide Web