Library staff training; web design basics using dreamweaver

“Learn from the mistakes of others. You can't live long enough to make them all yourself.” —Eleanor Roosevelt

Introduction to Dreamweaver

Dreamweaver is an industry visual XHTML editor. Dreamweaver is rooted in HTML. Anything you can do with HTML you can do with Dreamweaver. Anything you can't do with HTML you can't do with Dreamweaver. Dreamweaver creates XHTML pages without having to type code. Dreamweaver takes a site-centric approach to web design—planning the website structure and design before creating the pages.

What you will learn

 

 

 

 

Lynda.com Videos

There are a limited number of free lessons on Dreamweaver at Lynda.com. The video series Dreamweaver CS4 Essential Training, provides short Quicktime video lessons you can watch on your computer, and follow along in your installation of lynda.comDreamweaver. QuickTime 7.5 or newer is required.

You can also check out the full DVD series through the Teaching and Learning Center. The lessons cover everything from site structure, to controlling typography and working with images.

 

 

 

LESSONS

  1. Planning a successful web site
  1. The Dreamweaver workspace
  1. Linking, inserting images, and applying styles

Planning a successful web site

Basic site structure

Content for the site should have a structure that provides the audience easy ways to find information that's grouped logically, and is also visually organized. The site should be cross-browser compatible, pages download quickly, and optimized for a search engine.

You are working with HTML. There are RULES and how you name your files can avoid many problems later on. Many web servers are CaSE sEnSitiVE and users typing a link into a web browser can easily overlook a capital letter and get a file not found message.

TIP: Don't use spaces, avoid capital letters and avoid illegal characters like those listed below:

* Periods [ . ] are reserved for file name extensions such as .gif
* Quotation marks [ " ] are reserved for HTML
* Slashes [ / ]indicate folders
* Colons [ : ] are for script commands
* Exclamation marks [ ! ] are used as comment tags in HTML

Usability and accessibility

[top]

The Dreamweaver workspace

interface

Creating new files and folders

Define your site first

Dreamweaver site management is not optional—you must set up your website folder first, otherwise the program pitches a fit and annoys you with multiple pop-up windows warning you of file misplacement.

To set up FTP options, go to the Site Definition window by clicking on the Site pulldown menu > New Site. Use the Advanced tab to input the settings for you to publish your web pages to the Cabrillo server. For more information on FTP settings, contact the TLC or your system administrator.

 

Adding Text and Typography Tips

Adding and importing text

Once you open the document window, and give your page a Title, you can go ahead and type just like you would in a word processor. If you want to copy/paste from a Word document, paste text only and strip all formating.

For the purposes of this workshop, we will only use "clean" HTML code; code that isn't muddied by Microsoft proprietary code. Although DW CS4 now provides an easier way to import Word or Excel data into Dreamweaver.

From the Edit pulldown menu > select Paste Special > Text Only

Formatting text

Let's put some filler text in a document and begin to format. Copy > Paste Special > Text Only into your document window.

You can use the Page Properties dialog box to set page layout and formatting properties, such as a default font family, font size, font color, and background color.

page properties

In the Category column, set the following properties:

Appearance (CSS)—Page font, Size, Text color, Background color, Left margin and Right margin
Links (CSS)—Link colors and underline style
Headings (CSS)—Headings 2, 3, and 4

Creating a web page with the default font is easy, but you are here to learn something about web DESIGN. The three most important attributes of text to create a readable rhythm to your page are font size, line height, and margin (or padding). Done correctly, it helps the reader's eye move across and down the page. A thoughtfully designed page adds credibility to the content.

You know what font size is, and line height is the vertical space between lines. The margin (or padding, as in table cell padding) is the space between the edge of the window or table and the type.

Using the CSS Rule dialog box, you can create line height for all content within a paragraph tag, or apply to all content in the body of the document. This is what the code looks like when font size and line height are defined as ems.

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.9em;
line-height: 1.4em;

tag selector

If you are obsessed with detail work, here is another resource on line height.
http://www.autisticcuckoo.net/archive.php?id=2005/05/05/line-height

[top]

Linking, inserting images and applying styles

Linking

There are 3 main ways to create links from scratch:

  1. Typing in the Property Inspector
  2. Clicking a folder in Property Inspector
  3. Point to File from Property Inspector

The Target field in the Property Inspector: From the Target pop-up menu, select a location in which to open the document:

_blank loads the linked document in a new, unnamed browser window.

_top takes the viewer to the top of the current page

Inserting images

There are several ways to insert graphics into your webpages. You can:

Let's download some images to work with: [Bob Swenson] [Cabrillo Watsonville]

Image Alt Attributes

A screen reader reads what's called the Alt attribute for the image when visually impaired users access your web page. The Image Tag Accessibility Attributes dialog box appears if you have activated the dialog box in Preferences (Edit > Preferences).

In the Alternate Text box, enter a name or brief description for the image. The screen reader reads the information you enter here. You should limit your entry to around 50 characters.

For longer descriptions, consider providing a link, in the Long Description text box, to a file that gives more information about the image. For example, if you have a diagram or graph to display, the Long Description box allows you to describe in detail what is represented in the image.

Applying a cascading style sheet

Once you've styled up a page, open the CSS panel. In the Option menu of the CSS panel > select Move CSS Rules > select Move rules to A New Style Sheet. The style sheet can now be Linked via the CSS panel to other documents to reuse the styles you created.

css panel

How to validate your document/site

Dreamweaver offers the ability to check individual pages or even an entire site against a customizable set of accessibility guidelines. The Accessibility report in Dreamweaver offers a comprehensive set of tests for accessibility. It points to specific places on the page in need of revision. It also provides further detail of the Section 508 standards and W3C Guidelines in the Reference panel.

validate option To open the Validation tool, go to the Window pulldown menu > select Results > Validation.

 

A panel will open below the Property Inspector. Click on the little green triangle in the Validation window and select either Validate Current Document or Validate Entire Local Site. If there are errors, the Validation window will point to specific pages and lines in the page. From Code View you can go directly to the line in the code where the error exists.

validation window

Dreamweaver Resources

 

Created by Francine Van Meter for the Cabrillo Library Staff
September 30, 2009