New Formatting Guidelines for Fall 2005
Scott Campbell (firstname.lastname@example.org)
last modified: Sunday, December 4, 2005 7:23 PM
Resources (links to other pages):
The process of creating online handbook entries involves several steps: creating an html file (i.e., web page); defining a place to put the file (i.e., creating a subdirectory within ~econdev); and uploading the file into the subdirectory (so that it can be accessed on the public www).
CONTENTS OF THIS PAGE (links within this page):
1. Create a subdirectory within ~econdev
2. Create a web page (that is, a file in html format) that contains your entry contents
3. Edit your web page
4. Upload your web page to the server (/afs/umich.edu/class/econdev/Public/html)
5. Test and edit your page
6. Have your handbook entry added to the list on the home page
Information on Formats, Style Sheet, Images
We have created a special location for the economic development handbook: (/afs/umich.edu/class/econdev/Public/html). I have granted access permission to all the students in the course. You need to authenticate to access the site.
To make sure that the file structure for the web pages is logic and simple, you are to create a subdirectory (folder) for each handbook entry. (That is, since each student is writing two handbook entries, each student will create two separate folders within econdev.) All the files for each handbook entry will then go into that subdirectory. The main page for each entry will be in the form of "index.html".
A few guidelines for picking a subdirectory name: keep it short and simple; use lowercase letters; avoid spaces or punctuation (e.g., "jointservice", or "tif").
Example from last semester:
There are several ways to create a subdirectory (folder) within ~econdev. I will describe three. Use the one that is easiest for you.
a. Use mfile (afs file management). You can then navigate to the url for the econdev web site: (/afs/umich.edu/class/econdev/Public/html). For a direct link to this site, click here: https://mfile.umich.edu/?path=/afs/umich.edu/class/econdev/Public/html (You will be prompted to authenticate if necessary.) On the left side of this page (under "Actions"), click on "Create a New Folder" and type in your subdirectory (folder name). You can also use mfile to look at the contents of the various web pages within the econdev site. (NOTE: Each student in UP538 has access to the ENTIRE econdev site, not just their own subdirectories, so BE CAREFUL to not accidentally disturb, delete or copy over contents in other students' subdirectories. It is a very good idea to have a backup copy of your files somewhere outside the econdev site.) [Note: when you open mfile, the default location is your own personal ifs space linked to your uniqname. The class project site is located in a different area of the server.]
b. Use an FTP (file transfer protocol) program, such as SSH Secure File Transfer(click for instructions).
c. Create a new folder within a web page editor, such as Dreamweaver.
There are several ways to create an html document:
NOTE: we are using templates to insure a standard look for each web page (more on templates below and also in this UM-KNC handout). As a result, you will need to create your web pages based on an existing template that I have created for the handbook (econdevtemplate.dwt). The method to connect your page to the class template depends on whether you are creating a new blank html file or creating an html file from Microsoft Word.
a. Creating a web page from a blank html document (based on a template):
Within Dreamweaver, Select File > New. Click the Templates tab. Select the template (econdevtemplate.dwt). (NOTE: you may need to copy this file into your local directory first.)
You should now see a file that has the handbook header at the top, space to enter your name, title and email address, and then space at the bottom to enter the text of your handbook entry. You can either directly type in this space, or copy-and-paste from your Word file into this space. (Note: if your Word document has footnotes and other non-standard text, this method will not pick up your footnotes. See Option b. below.)
b. Create a web page by using MS Word's "save as html" command.
Use the "save as web page" function in MS Word, MS Excel, etc. This will create a new file with the .html extension. (If it creates a file with .htm rather than .html, just change it to html -- there is no difference in the page itself, but we will use the 4-character .html extension to be consistent.)
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 this link.
Once you have an html document, you need to apply the template to this document. Select Modify > Templates > Apply Template to Page. Select the template (econdevtemplate.dwt). (NOTE: you may need to copy this file into your local directory first.
Your final version of this file will have the name "index.html" and be located in the subdirectory that you create within econdev. Be sure you upload it into the right subdirectory, and don't accidentally copy over someone else's file!
c. Hybrid Approach (Combining a and b):
Use the "save as html" in MS Word to generate html from your original Word document (from "b" above). Open this html file in Dreamweaver. Also within Dreamweaver, create a blank document based on the template (from "a" above). Select the relevant text you want to copy from the handbook entry and paste into the blank document.
TEMPLATES AND CASCADING STYLE SHEETS
To ensure a common look to all the pages, each page will use the same font sizes and styles and also have the same letterhead/logo at top. To do so, we will use these two features:
Before you upload your page to ~econdev (Step 4), now is a good time to edit your page. Best to do this in Dreamweaver. A few tasks to consider:
There are several ways to upload (transfer) your file from your local computer to the server. (To be read on the public www, the file needs to be located within an "html" folder within a publicly accessible space -- hence the /econdev/Public/html address). Pick the one that works best. (I use the Dreamweaver for this step, but mfile maybe the easiest way. Let me know your experiences with these methods.)
The web site will have the following structure (You can view this structure via mfile):
index.html (the home page -- Prof. Campbell will edit and update)
NOTE: don't confuse the various index.html files:
The url for your page will be http://www.umich.edu/~econdev/[subdirectoryname]. For example, http://www.umich.edu/~econdev/riverrouge.
Common problems to fix:
Once you have created a subdirectory and have a final title for your entry, please send me an email with the subdirectory name and the title. I will then add them to the main page. (Please do NOT edit the main econdev home page index file; I will take care of that.)
The default font is Trebuchet MS, Verdana, Arial, sans-serif
Here are the current settings for FORMAT (we can change these, such as size, color, font, background). I am open to suggestions about more effective font styles, etc.
this is paragraph
This is preformatted
Title of Entry
Heading 2 or 3 (or some other -- your choice)
To have the text "wrap" around the image, insert the image at some pointwithin the text. Then, click on the image and look at the "properties" window for that image. In this case, I have selected "Left" from the "Align" menu. This places the image on the left, and the text wraps around the image, etc. and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on .... and so on ....
One can ostensibly resize an image within Dreamweaver, but that can leads
to problems. A far better solution is to resize the image in another program,
such as Photoshop. A simple strategy: open the image (e.g., a .jpg) in Photoshop.
Select "Save for Web". Under "Image size", reduce the size
of the image (either by entering a smaller pixel size, or a percent of original;
e.g., 25% of original size). Save this as a new file. Then use this new file
in your web page.