Creating Web Page Assignments
last updated Wednesday, December 9, 2009 5:49 PM
Sections to this page
College of Architecture and Urban Planning
University Of Michigan
office: 2225C A&AB
There are various ways to create a web page, including
(a) creating the page directly in an html editor (such as Dreamweaver, GoLive, FrontPage, etc.). For a simple tutorial on Dreamweaver, go to the UM Library KNC and their pdf tutorials: http://www.lib.umich.edu/knc/howto/guides-wd.php
(b) copy-and-paste text from a Word Processor program into one of the html editors;
(c) use the "save as web page" function in MS Word, MS Excel, etc. (Note: this may require some further editing and clean-up by an html editor after you do this step, since creating a web page from Word is not without flaws. In particular, this approach may create a lot of extra, non-standard "html junk" that may not work well on other platforms, such as in Netscape and/or on Macs.) for detailed instructions, see below:
(d) writing html code directly (e.g., using a text editor program).
U-M's ITCS (formerly ITD) has a very good site that can walk you through the technical steps needed to set up the space in your IFS area for a web page - all you have to do is have something to put there. http://www.umich.edu/~websvcs/umweb/how-to-homepage.html
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
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.
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/
There are several ways to do this.
Simple steps to improve your web page
* 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.
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
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.)
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.
|Alternative Web Browsers
Mozilla / Firefox
- 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)|
|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|