Hands-on web training

Tips for Libraries web authors

Tip: Downloading vs. using the file on your HD

Always FTP the latest live version of the page you're working on from the server when you want to edit it, instead of assuming the version you have on your HD is the latest one. Someone other than you (eg Nicole) may have had to make an edit - possibly a site-wide one - that has had an effect on your page.

"Save" vs "save-as"

Use "save" if you have edited a page and want to save your edits

Use "save-as" if you want to create a new page based on the style of the old page.

To create a brand-new page:

Tip: how to define the font (the Properties menu)

Note: Now that we're moving to CSS-based pages, this tip is less useful. In most cases, define fonts by using CSS instead of the Properties menu.

To maintain our standard style in a non-CSS page, find and choose the correct font group ("Verdana, Arial", etc) and size (usually "-1") in the "Properties" menu (pictured above).

You can also change other font properties using the same menu. But remember: Red is not an appropriate color for the MIT Libraries site, since it clashes with our color scheme. Use dark orange (#CC6600) for accentuation, or place your note in a table, with

CSS Styles can be applied and edited using the Properties Menu. This includes the option of creating or choosing a style which functions like the yellow table described above:

yellow box

Tip: List of links on each sidebar:

Some directories are so deep that listing every page on every sidebar becomes awkward. In this case, we list the broader categories on each sidebar, and open up into greater detail while in the more specific category, either in the sidebar or in links at the top of the page.

Examples: see solutions used by Architecture, Music, and Political Science Publications

Tip: ...page was last updated

Pages should have a "last updated" statement, so that

• people won't inadvertantly overwrite their own or each others' edits
• old, no longer valid pages won't sit around forever

For example:
                This page was last updated on 07/06/04

An ideal place for the owner and date is near the bottom of the page in small print.

To set up a server-side-include that will display this information automatically, insert the following code in your HTML:

<!--#config timefmt="%D" --> This page was last updated on <!--#echo var="LAST_MODIFIED" -->

More on server-side-includes (SSIs).
SSI instructions page

Tip: How to see and edit the code in Dreamweaver

Choose "Code" in the upper left corner of your Dreamweaver screen. Alternately, choose "Split", so that you can see both the code and the "WYSIWYG" design, and watch your code edits take effect.

How to change Dreamweaver's default file extension from .htm to html

See the Dreamweaver Knowledge Base article posted by Laurie Casolino

Note:

She refers to Windows terminology and code.

Mac users will find the same file in

Applications > Macromedia Dreamweaver MX 2004 > Configuration > DocumentTypes

Open the file, "MMDocumentTypes.xml", using BBEdit or TextEdit

Be sure to edit the code for your own OS - either

"winfileextension=" (for Windows)

or

"macfileextension=" (for the Mac)

 

What is CSS?

Cascading Style Sheets is a way of controlling the design component of web pages separately from the actual content. It actually makes things easier for you by placing certain tasks - e.g., choosing and attaching a font for a paragraph - under the control of a separate file that you rarely need to edit.

How to edit CSS code

In Dreamweaver:

Choose Window > Properties. This shows you Format and Styles.

Format refers to hierarchical styles (like Headings) that relate to the outline of a page.
- Keep the hierarchy clear! Don't use "heading 3" because you think it looks better, when the outline level is really "heading 4." And don't simply use "bold" when you're actually creating a new outline level.

Styles refers to local styles that can be applied where needed. Our new CSS templates use styles like "highlight" and "mitonly", which you can choose by clicking on the Styles box, and apply to paragraphs, headings, table cells, or whatever you like, with varying results -- experiment to see what looks best for your purpose.

Why do some of our styles' names start with Z?

Choose Window > CSS Styles. In this window you can choose either All or Current, to see the qualities of the different styles.

Choose the little + in the lower right corner of the window to add a style.

• For a new Format style, choose "Tag".
• For a Styles style, choose "Class" and start the name of the style with a period - eg, ".mitonly" .
• Make sure you Define the style in the right place: either in your local page or in the correct linked CSS file. Remember that if you're editing a linked CSS file, you'll have to save it and upload it along with the page you're working on.

Choose the little pencil to edit a style. Choose the trash can to delete the style.

Any CSS edits you make will cause the linked CSS file to open, and you'll have to save that independantly of your content file.

NOTE: Do not try to edit styles in the style sheets linked to our Dreamweaver guides templates. These are locked into the templates, and any edits you make will be gone when you upload your page to the server.

<= back to Dreamweaver templates

How to create a local, page-specific CSS style.

Choose Window > CSS Styles. In this window you can choose either All or Current, to see the qualities of the different styles.

Choose the little + in the lower right corner of the window to add a style.

• For a new Format style, choose "Tag"
• For a Styles style, choose "Class" and start the Name of the style with a period - eg, ".mitonly"
• Choose "Define in: this document only"

The new style you define, using the windows that open, will appear in the Styles pull-down menu in your Properties window, and also in the CSS Styles window.

The code for the style will appear in the document head, in the Code view in Dreamweaver - eg:

How to create a Sidebar Server-Side Include (SSI)

See SSI instructions page. Or see the Web Guidelines page on SSIs.

Setting up a new directory

Think in terms of an outline:

I

A
B

i, ii, iii, iv etc

II

A
B
etc

Page last modified February 29, 2008