EconDev home

New Formatting Guidelines for Fall 2005

Scott Campbell (sdcamp@umich.edu)

last modified: Sunday, December 4, 2005 7:23 PM

Resources (links to other pages):
citation formatting
web page design (including an overview of terminology and specific instructions)
Nancy Sims' resource page for UP538
a prototype of a handbook entry page

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


1. Create a Subdirectory within ~econdev

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:
" Shared services and the economies of scale they provide local governments" (Timothy Davis)

directory: http://www.umich.edu/~econdev/jointservice/
file name: http://www.umich.edu/~econdev/jointservice/index.html
[plus image files located within ../jointservice]

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.


2. Create a web page (that is, a file in html format) that contains your entry contents

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:

  • templates
    This will provide a common look at the top of the page: letterhead and graphics, "last modified" date, etc. This template file is called "econdevtemplate.dwt" and is located in the "Templates" folder. The template has "editable regions" (where you will insert your text) and "uneditable regions" (don't worry about those areas: they contain the letterhead, etc., common to all pages -- this part of the page is controlled from the template). Specifically, there are TWO editable regions:
    • EditRegion - title, author, email
      As the title suggests, enter your topic title, your name and your email address. (If possible, use "insert email link" function here.)
    • EditRegion-your text
      Insert your handbook entry text here. Any illustrations or links will also go here. Note: there is no limit to the size of your entry.
    Here is an example of a test page. Here is a UM-KNC handout on templates.
  • cascading style sheets
    This will provide a common font style and size for all the web page. The style sheet (classstyle.css) is located at: http://www.umich.edu/~econdev/classstyle.css. Since the template (see below) already contains css information, you will likely not have to worry about css. It will be linked automatically. There should be only ONE style sheet for the whole web site; you do NOT need to have your own style sheet in your own subdirectory. Also: if you want to preview your web page locally, you might download a copy of the css style sheet file into your local hard drive (optional, but useful if you like the preview in browser function).

 


3. Edit your web page

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:

 


4. Upload your web page to the server (/afs/umich.edu/class/econdev/Public/html)

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.)

File structure:

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)
[subdirectory folder name for entry 1] (one subdirectory per handbook entry -- 21 students * 2 entries/student = 42 folders, not counting those from last semester)
    - index.html (this file contains the text for the entry)
    - [image files] (each entry might contain one or more images; such as image1.jpg or map.gif)
[subdirectory folder name for entry 2]
    - index.html
    - [image files]
[subdirectory folder name for entry 3]
    - index.html
    - [image files]

etc.

NOTE: don't confuse the various index.html files:
../~econdev/index.html
is the handbook's home page. Don't change or copy over this one. (Prof. Campbell will take care of this one.)
../~econdev/[subdirectoryname]/index.html -- each handbook entry will have its own index.html file. (Why use index.html files? Because it is the default "home" for each directory. You can just enter, for example, www.umich.edu/~econdev, and the web browser will automatically go to the index.html file within that directory.)

 


5. Test and edit your page

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:


6. Have your handbook entry added to the list on the home page:

http://www.umich.edu/~econdev/

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.)

More instructions:

  1. The default web page TITLE is "UP 538 - Economic Development Planning Resource Page". You can modify this under "page properties" > title.
  2. Be sure the main page for your entry is in the format "index.html": (NOT ".htm"). So, include that letter "l". Copy this file into the appropriate subdirectory, such as "~econdev/landbank". Do NOT copy that index file just into "~econdev"; that will copy over our main table of contents page.

Regarding our Style Sheet:

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 Heading 1

This is Heading 2

This is Heading 3

This is heading 4

This is heading 5
This is heading 6
This is preformatted

 

Formatting to Use

Item

Format

Title of Entry

Heading 1

your name

Heading 2

section headers

Heading 2 or 3 (or some other -- your choice)

body text paragraph

 


How to insert an image around text

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 ....

 

To resize an image

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.


ADDITIONAL FORMATTING & STYLISTIC GUIDELINES