Intro. to Web Design Dreamweaver MX 2004archives.evergreen.edu/webpages/curricular/2004-2005/... · 2017. 8. 25. · Dreamweaver MX 2004 pg. 9 Web Design The Evergreen State College

pg. 1Dreamweaver MX 2004Intro. to Web Design

The Evergreen State College

Dreamweaver MX 2004Dreamweaver is the premier web editor application used to build professional websites

and applications brought to you by Macromedia.

Handout Outline

Introduction (Overview and Outline)

Servers and File Management

Site Definition and Management

Creating a New File

View Options

Introduction to Text

Page Title

Saving / File Management

Working with Images

Working with Links

Publish and Preview

Table for Data

HTML

CSS (part I)

PDFs and Office Documents

Templates

Includes

CSS (part II)

Further Research

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

pg. 2Dreamweaver MX 2004Servers and File Management


File Management and Server Information

Understanding where your files are, both on your computer and on the Web server, will make Web Development and Dreamweaver much easier for you. When defining where you will be modifying your files, you must specify the folder you will be working in on your local computer. This is also called the Local Site in Dreamweaver. The remote folder on the Web server defines the Web address. This is also called the Remote Site in Dreamweaver.

HTML Pages

Dreamweaver is just one of many software applications that assist in creating HTML. HTML or HyperText Markup Language is the ‘language’ that Web servers use to display Web pages.

You can save any Web page you like from most browsers by selecting File > Save As... . This is an easy way to copy someone else’s color scheme or code. Any HTML page can be opened and edited using Dreamweaver.

Web Page Naming Conventions

While using Evergreen’s webspace, always save your homepage as home.htm. It is essential that you always save your home page as the same name with the same file extension.

To avoid confusion always be consistent in the extensions you use for saving your web pages. At Evergreen, the standard is .htm. That means that ALL your pages’ file names should end in .htm.

Always name your pages in the following manner:

Use only lower case letters. Unix servers are case sensitive and recognize upper and lower case letters as having a different value (e.g., puppy.htm and Puppy.htm would be considered two different files.)

Never leave spaces in the name!

Never use special characters such as periods, #, &, etc.

Stay away from underscores. When made into a link, it is impossible to see the underscore in the filename.

Name files logically. Give your webpages obvious file names that will adequately describe the contents of the page without being too lengthy. It’s a good idea to keep your file names under 30 characters in length.

•

•

•

•

•



Home Page Naming Demystified:

When you first open your web account, your root folder already contains the page home.htm. If you edit that page and then save it as home.html, you will have 2 pages in your root web folder, one called home.htm and one called home.html.

The Evergreen Web server is set to default to home.htm as your home page. Evergreen’s Web server is also configured to default to the following home page file names in order as they appear in this list:

home.htm

home.html

default.htm

default.asp

index.htm

Parts of a Web Address

Web address is technically known as a URL or Uniform Resource Locator. It is an address that points to a specific location on the Internet.

Using the example http://www.evergreen.edu/curricular/wddfsi/home.htm

A. http: // protocol prefix with separators

B. www.evergreen.edu server and domain name

C. curricular/ folder name

D. wddfsi/ subfolder name

E. home.htm file name

Evergreen Web Servers

There is one main Web server that you will probably need to be familiar with. The computer name for the server is Coyote. Coyote is used primarily for Program Web Sites and Individual Web sites. The primary host domain url for Coyote is academic.evergreen.edu.

Note: When you create a Web page, you are working on your LOCAL computer and when you are ready to publish your page to the Web, you must publish (or copy) it to the appropriate Web server.

See the Diagram on the next page for a visual representation of Web Publishing at Evergreen and compare to what you’ve learned so far and the information below the diagram image.



Web Publishing Diagram

Work Locally on your Web files!

Your Curricular Program Web Space

You will be assigned a folder webspace through your Academic Computing liaison.

REMOTE Web Server

LOCAL Computer

in Dreamweaver

on Coyote

Site Folder (local root)

academic.evergreen.edu/curricular/programpage (remote root)

images

home.htm

images

home.htm

pg. 5Dreamweaver MX 2004Window Environment


Window Environment - Your Workspace

As with most contemporary Graphic and Web Design applications, Dreamweaver utilizes panels. Panels are self-contained, themed windows that each have their own sub-menu and can be moved around at your beckoning. Besides the ubiquitous Menu Bar along the very top of the window, there are 3 main panels you will be working with: Insert, Property, and Files.

1. If they are not already visible, open the Insert, Properties, and Files panels by selecting them from the Window menu: Window > Insert/Properties/Files. If they are checked, they should be visible.

These three panels are used the most in Dreamweaver and you can move them where you like by dragging the top of the title bar (or on the left side for the Porperties and Insert Panels).

2. Equally important is the Document Toolbar. If you do not see it, choose View > Toolbars > Document.

DREAMWEAVER WORKSPACE

Properties Panel

New Document Window

Insert Panel

Files Panel

Document Toolbar

Menu Bar

pg. 6Dreamweaver MX 2004Window Environment


Insert PanelThe Insert window is used for inserting objects into your page like images and tables.

Properties Panel

The Property Inspector is used for defining properties of elements of a page like font size and layer background color.

Files Panel

The Files panel allows you to keep track of all your site files and publish them with ease.

Dreamweaver displays your Remote Site files and the Local Site files accessed through the drop-down menu at the top of the panel. The Remote Site files reside on the Web server folder and are viewable via the Internet.

The Local Site files reside on your office computer and are only viewable from that computer.

The icons along the top of the Files Panel can be used to sort the files in either your local or remote site.

One way to copy the Remote Site to your Local Site is to ‘get’ the entire site by using the green arrow toolbar icon.

Note: When you update any file, you must ‘put’ (blue arrow) the file to the remote site for it to be saved on the Web server and accessible on the Internet.

pg. 7Dreamweaver MX 2004Site Definition


Site Definition

This is the first thing you must do once you open Dreamweaver and begin working on a website. Once you have set up a site on a specific (local) computer you do not need to define the site again. If, however, you move to a new (local) computer you will need to define your site for that specific computer.

How to start and define a Site using the Advanced tab:

1. Select Site > Manage Sites > New > Site.

ALERT: Do not select New > FTP & RDS Server!

2. Select the Advanced tab.

3. Define your local and remote settings:

Define Local Info:Enter the name of your site next to Site Name:. For example: “Student Associates”. This name is for your use only.

Choose a Local Root Folder that will contain all of your site’s files.

Click the folder icon to the right of the Local Root Folder field.

Navigate to your Documents folder. You may need to click on the New Folder (Icon on PCs) in Documents and name the new folder.

Click Open.

Click Select.

Define Remote Info: (see image on next page)Select FTP from the Access: drop-down list. For FTP, first be sure you know the full Web address for your web space.

In the FTP Host box, type the IP address or name of the web server (i.e. academic.evergreen.edu).

In the Host Directory box, type the path to your web space folder (i.e. /s/smibet15 OR /curricular/program)

Type your Evergreen Login and Password in the appropriate boxes.

Click the Test button to verify you’ve entered the correct settings.

4. Click OK.

5. Click Done.

1.

2.

•

•

•

•

1.

2.

3.

4.

5.

pg. 8Dreamweaver MX 2004Site Definition


6. From the Files Panel, click the Connect button on the toolbar to connect to the remote host.

Fill out the following form to keep track of your “remote” information.

FTP Host: academic.evergreen.edu

Host Directory: ______________________________________

Login: ________________________________________________

pg. 9Dreamweaver MX 2004Web Design


Site Management

Dreamweaver has built-in file management tools when you define your sites. In addition, developing an understanding of how sites are set up and how to manage (or keep track) of your files and folders within your site is a large part of learning web development. Most of your Site and File Management can be done in the Files Panel.

How to Edit Your Site Information:

1. Select Site > Manage Sites...

2. Click on the Site you want to Edit.

3. Click Edit. You can edit in the Basic or Advanced tab.

4. Click Done when Finished.

5. Click Done once more and changes are applied.

Note: You can delete your site settings by clicking on Remove.

Site Views (Local and Remote)

Use the Site View drop-down menu on the Files Panel to switch between your Local and your Remote.

You can also expand and collapse the Files Panel to access the Site window by clicking the button directly under the drop-down menu.

Understanding Paths

Your Local View should match your Remote View. For instance, the root folder on your Local side should match the root folder and subsequent folder/file structure as your Remote side.

ALERT: All files you are using in your site must reside in your Local root folder.

Manage Sites Window

This drop-down menu toggles between Local and Remote

This button expands and collapses the SIte Window View

Root Folder

pg. 10Dreamweaver MX 2004New File


Creating a New FileAs with most programs there are two or more ways you can create a new file in Dreamweaver. Below are instructions for two ways, first the most common method.

Creating a New File from the File Menu

1. Select File > New...

2. On the “General” tab (shown at the top of the window), select “Basic Page” under the left “Category” column and HTML in the middle column.

3. Check the “Make document XHTML compliant” checkbox on the bottom-right. Then, click Create.

Note: You can also create a CSS stylesheet, or select any of the Page Designs to use a pre-made Dreamweaver HTML webpage file.

Creating a New File from the Files Panel

1. Right-click (Ctrl+click for Mac users) on the folder where you want to create a new file in the Files Panel. This is also how you create a new folder.

Note: You could also select the folder and click on the sub-menu of the Files Panel and select File.

2. Select New File.

3. Type in the name of your new file (or folder) with no spaces and include the extension (for example, home.htm, or style.css), then press Enter/Return.

Make sure this box is checked!

pg. 11Dreamweaver MX 2004View Options


View Options

There are three viewing and editing options in Dreamweaver that allow you either to work on your web document via the HTML code or via what you see on the web browser (WYSIWYG).

Viewing the HTML Code

On the Document Toolbar (or from View on the Menu Bar), click Code.

Viewing Your Page As You Would See It On The Web

On the Document Toolbar (or from View on the Menu Bar), click Design.

View The Code and Display Design in a Horizontal Split Screen

On the Document Toolbar (or from View on the Menu Bar), click Split and view your changes as they happen.

•

•

•

Document Toolbar

code

design

pg. 12Dreamweaver MX 2004Intro to Text


Introduction to Text

Adding text to Dreamweaver is as easy as using a word processor program.

Adding Text to your Document

1. Make sure you have created a new document or opened an existing document.

2. Make sure you are in Design View.

3. Simply click in the document window. A cursor will blink to indicate insertion point.

4. Start typing.

Using Headings There a six Heading styles to choose from: Heading 1 - 6. Heading 1 will provide the largest size font and Heading 6 the smallest.

1. Highlight the block of text you want to change to a Heading.

2. Using the Properties Inspector Panel, click on the Format drop-down menu arrows.

3. Select a Heading you want to use. If you don’t want a Heading, choose None or Paragraph.

Copy / Paste Text

1. Highlight the block of text you want to copy from any application.

2. Select Edit > Copy (or Ctrl/Cmd + C).

3. Go to Dreamweaver and click in the area where you want to paste the text.

4. Select Edit > Paste (or Ctrl/Cmd + V).

New Document Window

Properties Panel

pg. 13Dreamweaver MX 2004Page Titles


Title

First things first, create a title for your page. This title is not actually “seen” on your webpage, other than on your browser title bar and sometimes in the header portion when the webpage printed. You can create a title for each individual page or use the same site title for all your pages in your site. Although the title is acutally located in the “head” portion (between the <head></head> HTML tags) of your webpages, search engines can glean information from it. It also shows up when a page is “bookmarked” or saved as a favorite in a browser. See image examples below.

Creating a Title

1. In the Title text window at the top of your document (i.e. home.htm) on the document toolbar, type a title.

2. Alternately, go to Modify > Page Properties to see the page property options.

3. In the Title field of the Page Properties dialog box, type the title of your choosing to identify your site and the page for your users. Click OK.

Title

Document ToolbarTitle

Dreamweaver

Safari Browser

pg. 14Dreamweaver MX 2004Saving


Saving

Save first and save often! Dreamweaver has been known to crash at times. Like any program that is memory intensive, it’s best to keep your left (or right) hand ready to do the keyboard shortcut for SAVE -- Cmd + S (Ctrl + S for PC user).

In Dreamweaver, on the title bar of your document, notice the asterisk when your document is not saved.

Saving a New File

1. In the document window, choose File > Save.

2. Make sure you save your document in your site folder.

3. Save your document consistently with either an .htm or .html extension. No spaces, you can use the _ underscore if necessary. The shorter the file name the better.

4. Click OK.

Saving a Copy of your File

1. Select File > Save as...

pg. 15Dreamweaver MX 2004Working with Images


Working with Images

Dreamweaver makes inserting images, rollover images and creating image maps easy.

Inserting an Image

1. Click your cursor where you’d like to place an image.

2. Select Insert > Image or use the Image button on the Common Window of the Insert Panel.

3. Locate an image file in the images folder of your site.

4. Click OK.

5. In the Alt field, add an Alt tag to the image by typing in a title for the image. The Alt tag specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud.

Note: Changing the size of an image in the Dreamweaver window does NOT change the file size. To effectively resize and optimize an image, you must use an image editing program like Photoshop.

Rollover Images

A rollover image is an image whose display changes when the pointer is ‘rolled’ over it. A rollover is created by attaching a “behavior” to an image.

1. Click your cursor where you’d like to place a rollover image.

2. From the Common Insert Panel dropdown select Insert Roll-over image

- Type the name of this rollover object in the image name

- Browse to the original image and then the roll-over image

- Give it an Alt text tag and provide the page that this rollover is linked to.

Alt field

pg. 16Dreamweaver MX 2004Working with Images


3. Preview in a browser.

Image Maps

1. Select an image by clicking once on it.

2. In the Properties Panel, select a shape for the image map from the shapes available under the Map name field on the lower left.

3. Draw the area on the image that will become a link. Move the selected area using the arrow keys.

4. With the Image Map area selected, use the Properties Panel to specify the name of the file to link to, the map name, and the Alt tag.

5. You can alternatively click on the folder icon next to the link box or use the point to file icon to specify the local file to link to. If it will be an absolute link, put the entire web address in the link field.

6. Preview in a browser. The cursor should change to a hand over the ‘hot’ spots in your image, indicating a link.

pg. 17Dreamweaver MX 2004Links


Working with Links

A link, or hyperlink, is a reference in a hypertext document to another document or resource. Creating links in your site is an important activity for any web developer. What would HTML be without hypertext?

Absolute versus Relative Links

1. An absolute link uses a complete path name to locate a file.

For example: http://access.wa.gov

An absolute link does not change when the page that links to it moves. (This is like putting a stamp on a letter to your next door neighbor, putting it into the mailbox, having it go downtown to be sorted, and delivered to your neighbor.)

2. A relative link is created in relationship to the referencing document. For example: images/geoduck.gif or links.htm

A relative link can change if you move the referencing document. (This is like walking a letter over to your neighbor’s house.)

This explanation is highly simplified. There are a variety of conventions to learn that will aid you in choosing the correct link.

3. How Do I Know Which to Use?

A rule of thumb for absolute links: Whenever the link is not on the same server, it is absolute.

All files within your site folder should be relative links.

Files on the same server, but not in your site can also be relative links, but will work as absolute links as well. For our purposes, we will use absolute links for all files outside of our personal folders.

How to Create an Absolute Link:

1. Highlight the text or click on the image you want to become the link.

2. Go down to the Properties Panel and click in the Link box and type the address making sure to include http://. Example: http://www.evergreen.edu

•

•

•

Link field

pg. 18Dreamweaver MX 2004Links


How to Create a Relative Link:

1. Highlight the text or image you want to become the link.

2. Use the Properties Window to specify the name of the file to link to. In this case, type ‘syllabus.htm’ in the link box. We will actually create this page later in the workshop.

3. You can also click on the folder icon next to the link box or use the point to file icon to specify the local file to link to.

How to Create a Named Anchor:

Anchors allow you to link to section further down in the current page or to a particular spot on another page.

1. Place the cursor insertion point where you want a named anchor (right in front of Week 1 on the syllabus).

2. Choose Insert > Named Anchor or use the Named Anchor button from the Common Insert Panel.

3. In the Anchor Name field, type a name for the anchor.

4. Go to the place where one will click to link to the anchor and highlight the text or image you want to link.

5. In the Link text box of the Property inspector, type a number sign (#) and the name of the anchor you provided in step 3 above (no spaces).

Note: Anchor names are case sensitive and require no spaces.

pg. 19Dreamweaver MX 2004Preview & Publish


Preview & Publish

Dreamweaver offers the opportunity to both preview your page in a web browser and upload your page for publishing.

How to Preview your Page on a Browser:

1. Select File > Preview in Browser > Firefox. Or, you can choose another browser like Safari or Internet Explorer.

How to Publish Your Page or Site:

1. Select the file(s) in the Files panel, or your Local Root folder at the top of the Files panel.

2. Press the blue Put arrow button on the toolbar.

3. Choose Yes when asked to copy all dependent files. This eliminates the need to publish all images and other files separately from your HTML file.

Moving Files Between Local and Remote There are three methods for moving files between the twin Local and Remote sites: Get, Put and Synchronize (discussed on next page). These are all done in the Files panel.

The green Get arrow button moves files from the Remote to the Local. This command can be applied to an entire site, to a group of selected files within a site or to a single selected file.

The blue Put arrow button moves files from the Local to the Remote site.

Note: The GET and PUT commands can be applied to an entire site, to a group of selected files within a site or to a single selected file.

1. When you select the Get or Put command, Dreamweaver will ask if you want to move all associated files.

If you have made text or formatting changes only, you can safely choose “no.”

•

•

•

Use drop-down menuto change between Local and Remote Views

pg. 20Dreamweaver MX 2004Preview & Publish


However, if you have added images or changed a template, you should choose “yes.” Choosing “yes” in either circumstance will not cause problems.

2. Dreamweaver understands Associated Files to mean:

Images

Templates

Folders used for organizational purposes

Other linked documents (word, pdf, css, js, etc)

3. Use the drop-down menu at the top-right of the panel to change between Local and Remote View to get or put.

Note: Always work and edit your pages in Local View. Get your page files from Remote is needed.

How to Synchronize Your Site:

The Synchronize function examines the time stamp associated with each file and moves the most recent one where needed (remote or local). This command applies to the complete site.

1. In the Files Panel submenu, select Site > Synchronize... command examines the time stamp associated with each file and moves the most recent one where needed.

2. Using the top Synchronize drop-down, select Entire ‘Your Site’ Site.

3. Then, if you only need to ‘Get’ the newest files from the Web server, choose Get newer files from remote next to Direction.

Note: If you want to delete pages from your site, delete them in your Files Panel Local View and then select the option “Delete remote files not on local drive“ when synchronizing.

•

•

•

•

•

pg. 21Dreamweaver MX 2004Tables


Tables for Data

Dreamweaver breaks the use of tables down into three views:Standard View is the most common and primarily used for data tables.Layout View is used for drawing your layout design. Expanded View makes it easier to select and resize elements of your table.

This section of the handout will cover the Standard (Data) view. Keep in mind that code-wise the HTML for all views is the same.

Creating a Table

1. Select Insert > Table, or click on the Insert Table icon on the Insert Panel.

2. In the form that appears, determine the number of rows and columns.

3. Specify the width either by pixels (exact measurement across) or percentage (autostretch -- 100% fills the entire space).

4. Border? Type 0 for no border or pick a number between 1 and whatever you choose.

5. Next, is Cell padding (the amount of space between the content and the cells) and Cell spacing (space between the actual cells), usually numbers between 0 and 6.

6. Click OK.

pg. 22Dreamweaver MX 2004Tables


Selecting Table Elements

Before you apply any formatting to a table, row or cell you must select it. There are two ways to select table elements:

1. Click, hold and drag in the table to select what you’d like. To select the whole table, click on the outside edge of the table. OR

2. Use the tag selector at the bottom of the document window

To Merge Cells

1. Highlight the cells you want to merge by clicking and dragging across the cells in Standard view.

2. In the Properties Inspector Panel, click on the Merge Cells icon. Note: the HTML adds a span element.

To Split Cells

1. Click in the cell you want to split.

2. In the Properties Inspector Panel, click on the Split Cells icon.

Note: the HTML either adds or deletes a span element.

pg. 23Dreamweaver MX 2004Web Design - HTML


HTML

HYPERTEXT MARKUP LANGUAGE (HTML)

A basic web page is written in HTML, this is the mark-up language that takes place behind the scenes, in Code View.

“HTML is just a series of tags that are integrated into a text document. They’re a lot like stage directions - silently telling the web browser what to do, and what props to use.”

Tags are enclosed in <> brackets and usually come in pairs, one indicating the start and one for the end. Whatever is sandwiched in the middle of these tag pairs is defined by the two surrounding selector tags.

Example:

<html><head><title>Hello</title>

</head>

<body>

Hello World!

</body></html>

Every page starts with the <html> tag. So the webpage above would simply say “Hello World!” as defined in between the <body> tags. From here it’s just expanding your vocabulary. Below are some of the most commonly used tags. When in a web browser (like Safari or IE), choose View > Source to see the HTML coding of any page on the web.

Note: This handout include XHTML (Extensible HTML) compliant tags. The changes are mainly reflected in stand-alone container tags.

Basic Page Tags:

<html></html> Creates an HTML document

<head></head> Sets off the title and other information that isn’t displayed on the Web page itself, i.e. css, javascript, meta tags.

<body></body> Sets off the visible portion of the web document



Header Tags: <title></title> Puts the name of the document in the title bar

Other Header Tags would include Meta Tags, Javascript, CSS, Notes, etc.

Text Tags: <hl></hl> Creates the largest headine, and so on to...

<h6></h6> Creates the smallest headline

<strong></strong> Creates bold text

<em></em> Creates italic text

Link Tags:

<a href=”http://URL”></a> Creates a hyperlink

<a href=”mailto:EMAIL”></a> Creates a mailto link, watch that SPAM.

<a name=”NAME”></a> Creates a target location within a document

<a href=”#NAME”></a> Links to that target location from elsewhere in the document

Formatting Tags: <p></p> Creates a new paragraph

<br /> Inserts a line break

<blockquote></blockquote> Indents text from both sides

<dl></dl> Creates a definition list (no bullets)



<dt></dt> Precedes each definition term

<dd></dd> Precedes each definition

<ol></ol> Creates a numbered list

<li></li> Precedes each list item (for both <ol> and <ul>), and adds a number/bullet

<ul></ul> Creates a bulleted list

<div></div> A generic tag used to format large blocks of HTML, also used for stylesheet reference

Tags for Graphical Elements:

<img src=”filename” /> Adds an image

<hr /> Inserts a horizontal rule

<hr noshade /> Creates a rule without a shadow

Table Tags for Tables:

<table> <tr>

<td></td> <td></td> <td></td>

</tr>

</table>

This table has one row and three columns. <tr> </tr> creates a new Table Row and

<td> </td> creates a new cell (column) in that row.

Further Help:

W3C HTML Site < http://www.w3.org/MarkUp/ >

pg. 26Dreamweaver MX 2004CSS Intro


Introduction to Cascading Style Sheets

What is CSS? CSS (Cascading Style Sheets) is a supplementary extension to HTML allowing web designers to style specific elements on their pages and throughout their site. CSS defines the “style” of a website--elements like typography, color, spacing, positioning, etc. HTML can be thought of as the content or structure with an organization of elements (tags) and CSS applies the style or formatting.

Why use CSS:

1. It has become the standard in web design and development: <font> tags are being eliminated and may not be supported by browsers in the future.

2. Faster loading for your webpages: less code and smaller pages

3. Separation of design from content: ability to control an entire site by only modifying a single file. If you decide later to change the font color of all the menus in your site, you can do this in a snap.

How CSS works: CSS is applied to an existing HTML web document--both working in tandem to display of web pages.

h1 { font-family: Arial; text-align: center; }p { font-family: Times; text-align: left; }

<h1>This is Header 1 text.</h1><p>This is Paragraph text.</p>

CSS HTML Web Browser

style structure webpage

+ =

pg. 27Dreamweaver MX 2004CSS : Mechanics


Mechanics of Cascading Style Sheets

“CSS is a simple mechanism for controlling the style of a Web document without compromising its structure.” (Webmonkey)

How to use CSS:

CSS can be applied to an HTML document in three different ways.

1. Using an HTML tag - redefine an existing HTML tag, e.g. <body>. Use the existing HTML tags as selectors to define the elements of your site.

HTML Example:

2. Creating an ID attribute in a tag - create your own selector to define. The created ID can only be used once in a page and typically works with blocks of content (e.g. using a <div> tag to define the navigational “nav” bar/menu). The pound sign (#) indicates an ID selector in your stylesheet.

ID Example:

3. Creating a CLASS attribute in a tag - create your own selector to define. The created CLASS can be re-used throughout your document. Let’s say you want certain words to be bold and larger on your page--create a CLASS, give it a name, and you can apply it as many times as you like on the same page. The CLASS selector name is preceded by a period (.) in your stylesheet.

CLASS Example:

body { font-family: Arial; text-align: center; }

<body>Hello World!</body>

.bold { font-size: 2.0em; font-weight: bold; }

<p class=”bold”>Bold Text</p>

#nav { font-family: Arial; font-size: 0.8em; }

<div id=”nav”><ul><li>Menu</li></ul></div>

+ =CSSHTML Browser

CSS

+ =

HTML Browser

+ =CSSHTML Browser

DEFINITIONS

Elements -->Elements are the specific areas in your web page that you can define with tags. They act like labels that identify and structure the different parts of a web page. Examples:body, paragraph, images, links, sections and areas you define.

Tag -->Tags are the principle elements that make up (X)HTML or web pages. They consist of an opening tag (the element’s name and attributes, if any) and a closing tag (a forward slash, followed by the element’s name) on either side of your content. They are enclosed within <> symbols and they structure and define your content. Example:<p>Paragraph Text </p>



How to Apply CSS to your HTML:

1. LINKED - Linking to an external CSS file in the html header is the most commonly used method -- recommended for use in the overall web site.

Example of standard syntax for linking to an external style sheet:

<link href=”mystyle.css” rel=”stylesheet” type=”text/css” />

2. EMBEDDED - Use the <style></style> tag embedded in the html header of your HTML document. Used internally for individual web pages.

Example of internal style sheet:

<style type=”text/css”> p { font-family: Times; text-align: left; } </style>

3. INLINE - Use the “style” attribute in any tag locally. Use for specific words, phrases, or paragraphs. It is the least used.

Example of applying local style:

<p style=”font-family:Times; text-align:left”></p>

<html> <head> <title>Inline Example</title> </head> <body> <p style=”font-family: Times; text-align: left”> This is Paragraph text.</p> </body> </html>

<html> <head> <title>Embedded Example</title> <style type=”text/css”> p { font-family: Times; text-align: left; } </style> </head> <body> <p>This is Paragraph text.</p> </body> </html>

<html> <head> <title>Linked Example</title> <link href=”mystyle.css” rel=”stylesheet” type=”text/css” /> </head> <body> <p>This is Paragraph text.</p> </body> </html>

p { font-family: Times; text-align: left; }

CS

S

HT

ML

mystyle.css

DEFINITIONS

Tag Attribute -->Attributes are contained within the opening tag and provide more information about an element. An attribute also has a value. The value is usually enclosed within quotation marks.Example:<img src=”green.jpg” />“img” is the element, “src” is an attribute, and “green.jpg” is the value.

CASCADING & OVERRIDING

The later your CSS style appears, the more precedence or importance it has. Locally (inline) applied styles have the most precedence and will override any styles applied earlier in your document. Multiple style sheets can be applied to web pages -- this is where the term cascading comes from.

HT

ML

HT

ML



CSS Anatomy and Syntax:

CSS syntax works in the form of rules (see example below). Rules are composed of selectors and declarations.

A CSS declaration has two parts enclosed within an opening and closing curly bracket {}:

1. a property (i.e. “color”) and

2. a value (i.e. “green”)

Example of the anatomy of a CSS rule:

ADDING COMMENTS TO YOUR STYLE SHEETS

It’s a useful practice to include comments in your style sheets to help you quickly identify and remind yourself of the different elements or specific areas/pages in your site. You can insert a comment between rules in your style sheet by typing /* to begin you comments and */ to signal the end of your comments.

Example:/* applies to the nav bar on home.htm */.redcolor {background:red;font-style:bold}

h1 { color: #800080; font-size: 0.8em; font-family: Arial, Helvetica;}

Selector

Property Value

Declaration

DEFINITIONS

Selector -->The selector is the element to which the CSS will be applied. It is referenced in the HTML by either a tag or a tag attribute. Example:p {color: #FF0;}, the “p” is the selector, referencing all paragraph tags in your web site.

pg. 30Dreamweaver MX 2004New CSS File


New CSS File

When creating a new site we recommend starting your CSS file at the same time.

Creating a New CSS File from the File Menu:

1. Select File > New...

2. On the “General” tab (shown at the top of the window), select “Basic Page” under the left “Category” column and CSS in the middle column. Then click Create.*

3. Select File > Save. Then, save the file in your site folder with a .css ending/ extension.

*Note: You can also select a pre-made CSS Style Sheet (example below).

Now all you need to do is attach the new file (see next page).

pg. 31Dreamweaver MX 2004Attaching a CSS File


Attaching a CSS File

You can attach or link your style sheet in Dreaweaver, or you can switch to code view and attach it manually in the header of you HTML document: <link href=”mystyle.css” rel=”stylesheet” type=”text/css”>. You can attach a new or existing CSS file.

Linking a CSS File in the Design Panel:

1. Make sure the HTML document you want to attach to is open and is the active document.

2. Click the Attach Style Sheet button, located at the bottom of the Design Panel.

3. Click Browse... and navigate to your CSS file. Click Choose.

4. Select Add as a “Link.” Click OK.*

*Note: You should see your CSS file (and rules) displayed in the Design Panel. Also, in Code View take note of the added HTML in your header:

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

pg. 32Dreamweaver MX 2004PDFs & Office Docs


PDFs and Office Documents

There are three ways you can include PDFs or Office documents in your website: Link to them, Copy and Paste in the new HTML document, or link to a converted Office document saved as an HTML file. First, let’s look at PDFs and how to create and link to them.

Creating and Using PDFs PDFs are a Portable Document Format developed by Adobe under the product name Adobe Acrobat. These files maintain the integrity and formatting of any Office document or scanned in document and are viewed easily over the Internet

with no cost to the user.

Converting an Office document to a PDF*:

1. Start the applications that contains the document you’d like to convert and open your document.

2. Check your page setup as if you were going to print.

3. Select File > Print.

4. From the Printer drop-down list at the top of the window choose Adobe PDF.

5. Click Print.

6. From the Save to File Window name your file (no spaces) and choose a location to save.

7. Hit Save.

*Note: If you have Acrobat Pro installed at home you can save any Office Document as a PDF by using the Adobe PDF icon in your Office application. Many other programs like Photoshop and InDesign allow you

to save as a PDF.

Linking to a PDF:

1. Select the text or image you want to show as a link.

2. Type the name/path of the PDF file in the Link field of the Properties panel. Basically, you link to a PDF or Office document in the same manner as you would link to another html file in your site. See the Linking section for further assistance. To assist your users, it would be best to include a note or an Acrobat icon (see the Adobe site for a download link) near the link that indicates the link is a PDF.



Using Office Documents Here are the three methods to choose from when using Office documents in your site. Best practices would be the first copy and paste, especially with the newest version of Dreamweaver which will maintain formattting and even tables once you copy from an Office document. It is the cleanest option and offers consistency and ease of use for the user. It is a good choice if it is important that the text be displayed on a page that maintains a consistent design with the rest of the site or if you are using templates.

Copy and Paste*:

1. Select the text from MS Word or your Office Document (works with any text anywhere).

2. Select Edit > Copy from the menu or use the keyboard shortcut Ctrl + c.

3. Open your Dreamweaver page and put your cursor where you’d the text to begin.

4. Select Edit > Paste from the menu or use the keyboard shortcut Ctrl + v.

5. Use the formatting tools in Dreamweaver (in the Properties Window) to reformat your text with bold, italic, etc. if necessary.

*Note: Excel will paste text only and not in table format.

Link to a Word or Excel Document*:

This technique is useful if you’d like to give your viewers access to the original Word document. Viewers can either save the file to their computer or using Internet Explorer, view it in a browser window in its original layout.

1. Place a copy of the Word or Excel document in your Site folder.

2. Create a link to the Word or Excel file. Highlight the text and in the Properties Panel next to Link click the browse (folder) icon and navigate to the document.

3. Save and Upload all files.

*Note: Viewers using Internet Explorer will need to right-click on your link to download the document, otherwise it will open in a browser window. It is best to warn viewers about what they are downloading.



Link to an HTML Converted Document*:

When to use: you are in a mad rush, you have a PowerPoint presentation you would like to post in its entirety, or you have an Excel document and want to maintain its table and workbook format.

1. In Word/Excel/PowerPoint, open the document you’d like to convert to html. Select File > Save As Web Page...

2. Name the document in the File Name field, make sure it has a .htm extension. Change Title as desired. Navigate to your local site directory and click Save.

3. Link to the page as if it were any other Dreamweaver .htm file.

*Note: This technique uses HTML/XML conversion to create web pages from your Office documents. It is important to keep in mind that the HTML that is generated has quite a bit of extraneous code peculiar to Microsoft and may or may not work well in all browsers.

PowerPoint will save one root file (which you link to) and the rest of the files and all images in a separate folder. Excel will do the same for an entire workbook including links to the sheets, which are made automatically on the bottom of the page. In both cases, you may want to select Publish before you click Save to specify any extra features.

Nice to know: It’s a good idea to open any page that loses the site’s navigational system in a new browser window. Add the Open in Browser Window behavior to the link.

Cleaning up Word HTML:

Since MS Word has a reputation for generating a lot of unnecessary HTML/XML code, Dreamweaver has implemented the Clean Up Word HTML command.

1. Open your converted .htm file in Dreamweaver, File > Open (Ctrl + O).

Note: Make sure you always have a backup .doc file. It is recommended that you make all edits in Word (the .doc file) before converted to .htm or saving as a web page.

2. Select Commands > Clean Up Word HTML. This opens a dialog box.

3. Make sure the Set background color is unchecked on the Basic tab and click OK.

4. A dialog box appears summarizing the modifications in the code made. Click OK.

pg. 35Dreamweaver MX 2004Templates


Dreamweaver Templates

Learn to create a Dreamweaver template from an existing file, create editable regions and update a templated site.

Supplemental Materials

Program templates are located at http://academic.evergreen.edu/curricular/itsi/

Templates are used to create documents that have a common structure and appearance. Templates are useful when you want to make sure that all of the pages in a site share certain characteristics (such as navigation or a logo).

Once you apply a single template to a group of pages, you can change information on the group of pages by editing the template and then reapplying it to those pages.

While elements unique to each page remain unchanged, common template elements (such as navigation bars) are updated on all of the pages that use the template.

How to Create a Template from an Existing Document:

Let’s say you have a .htm file you want to convert to a template.

1. Open a .htm file or create a .htm file.

2. Create a design that you want to use as a template for your site.

3. Select File > Save As Template.

4. In the window that pops up, make sure the site that you want the template to be associated with is selected at the top.

5. In the Save As: field enter a name for the template (no spaces) with a .dwt at the end. Dreamweaver templates end with the 3 letter extension .dwt (which stands for dreamweaver template).

6. Click Save.

7. Create Editable Regions. (see next page)

Note: Templates are stored in a special templates folder in your rooot folder that is automatically generated by Dreamweaver. Simply double-click to open and make changes. Once you update a template you should upload the associated files (or your entire site) to apply the changes.

Choose site



Alert: Do not move your templates out of the Templates folder, or put any non-template files in the Templates folder. Also, do not move the Templates folder out of your local root folder. Doing so causes errors in paths for your site.

How to Create a New Template File:

1. To create a new document from a template, choose File > New.

2. On the “General” tab (shown at the top of the window), select “Template Page” under the left “Category” column and HTML in the middle column.

3. Click Create.

4. Create your Template Design with Editable Regions. (see below)

5. Select File > Save.

6. In the window that pops up, make sure the site that you want the template to be associated with is selected at the top.

7. In the Save As: field enter a name for the template (no spaces) with a .dwt at the end. Dreamweaver templates end with the 3 letter extension .dwt (which stands for dreamweaver template).

8. Click Save.

How to Add Editable Regions:

1. Select the area of your template that will become an editable region. (Select a block of text, image, etc. in the body of your document)

2. Choose Insert > Template Objects > Editable Region.

3. In the New Editable Region window give the editable region a name and select OK.

4. Save the Template. Select File > Save.

Note: To delete a region, click on the title of the region and hit delete on your keyboard.



How to Create a New Document from a Template:

1. Select File > New.

2. On the “Template” tab (shown at the top of the window), select your site under the left “Templates for” column and the template file in the middle column.

3. Add a document title and body copy.

4. Save your .htm document outside the Templates folder in your site, File > Save.

Note: Be sure you are saving the document in the folder designated to store your Local Site. DreamWeaver will warn you if you are about to save your document into a folder that does not contain the template being used.

Saving a Template File

1. Select File > Save.

2. You’ll get a message asking, “Update template in these files?” Notice the files it’s referring to and click Update.

3. You should get an Update Pages window that logs the files that were changed to the updated template. Click Close.

Note: Once you update a template, upload the associated files (or your entire site) to apply the changes.



Server Side Includes (SSI)

What is an include?An include is an html or text file that is a part of or included in another file. When a browser requests a page with an include the server sends back the page but concatonates or adds the text from the included file into the page that was requested.

When would I use an include?If you have portions of your web page that you want to repeat throughout your website (such as navigation) you can point to a single include file. When you want to edit this portion of the page you would only need to edit a single included file versus having to edit every page of your site.

How to use includes in your site:1. Create an .htm or .txt file that has the html you would like to include in other pages.

Note: this is a partial page and most likely does not contain the <html>, <head> and <body> tags.

2. Open the file you’d like to embed the include into.

3. In code view add the include syntax where you’d like the code from the include file to appear 

4. Repeat step 3 for every page in which you’d like the include to appear

<p> Hello </p>

include file:hello.htm

<html><body></body></html>+

home.htm

=

<html><body><p> Hello </p></body></html>

home.htm as seen by browser

pg. 39Dreamweaver MX 2004CSS: Quickstart/Review


CSS Review

Getting Started with CSS

This is assuming you have already created and structured your HTML document and added content.

1. Create a new CSS File and save (File > New).

2. Attach CSS File to your HTML Document(s) using the Attach button in Design Panel.

3. Apply Styles to chosen selectors using the New Style button in Design Panel. Are you redefining an HTML tag, creating a CLASS attribute to use again, or creating an ID attribute for a certain section/area?

4. Edit Styles as needed in the Design (or Tag) Panel and remember to save and upload any changes.

pg. 40Dreamweaver MX 2004Editing CSS


Editing a CSS File

This section will walk you through the process of applying style to your existing HTML document and then editing the style. In general, we refer to this process as “editing a CSS File.”

Once you have used existing HTML tags, created CLASS and/or ID attributes (i.e., applied style to your document), you can go into the Design Panel at any time and conveniently edit them. This is shown below.

But first, however, on the following pages we use the Design Panel to walk through the beginning process of applying style. As mentioned earlier, there are three selector types: using an HTML tag, creating an ID, or creating a CLASS. Dreamweaver automates the application of these selector types for you.

To assist in the process of structuring your HTML document in preparation for easy and clean CSS styling and positioning. Please take a look at the illustration at the end of this section.

Editing an Existing Rule:

Once you have begun to apply style to your document(s), notice how each style/selector is listed under your stylesheet file name in Dreamweaver’s Design Panel (shown at right).

1. Click on the rule/selector you wish to edit in the Design Panel.

2. Click the Edit Style... button, located at the bottom of the Design Panel (second from the right).

3. Edit your style and click OK.

Deleting an Existing Rule:

1. Click on the rule/selector you wish to delete in the Design Panel.

2. Click on the Delete button (the trash can on the bottom-right).

pg. 41Dreamweaver MX 2004Editing CSS: HTML Tags


Editing CSS: HTML Tags Redefining an HTML tag allows you to control the elements of your page. CSS overrides the browser’s default settings for interpreting how tags should be displayed, freeing you up to use any

HTML tag to define your own style.

To Add Style to a Tag:

1. Click the New CSS Style button, located at the bottom of the Design Panel.

2. In the “New CSS Style” window, click Tag under “Selector Type.”

3. Choose your Tag selection

from the pull-down menu.

4. Double-check “Define in” -- shows your .css file. Click OK.

5. Choose from the list on the left what category of style you want to define, for example, Type or Background. Define specifics on the right--only change fields that you want to define, most fields will be left blank. Click Apply to preview and OK when done.

ALERT: Define only what you need to define -- most fields will be left blank.

Use “This document only” for embedding a style in the HTML header

Puts style in a linked external style sheet file

pg. 42Dreamweaver MX 2004Editing CSS: HTML Tags


EXERCISE

Redefine the <h1> tag (Heading 1).

Start with both an HTML document open and a CSS document attached.

1. Type “Heading 1” in your document.

2. Select/Highlight the text “Heading 1”.

3. On the Properties Panel, select “Heading 1” from the Format drop-down menu.


5. In the “New CSS Style” window, click Tag under “Selector Type.”

6. Choose h1 from the Tag drop-down menu.

7. Double-check that “Define in” shows

your .css file. Click OK.

8. Now you’re in the CSS Style Definition window. Choose “Verdana, Arial, Helvetica, sans-serif” from the Font drop-down.

9. Type “1.2” in the Size field and choose ems from the drop=down.

10. Type “#800080” in the Color field.

11. Click OK. The Heading 1 now has a new style!

pg. 43Dreamweaver MX 2004Editing CSS: CLASS


Editing CSS: CLASS

Create a CLASS if you want to add style to one or more specified elements in your page. You can add a “class” attribute to most tags.

Creating a CLASS Style


2. Click Class under “Selector Type” and type in a name, making sure it starts with a period(.). Double-check that “Define in” shows your CSS file... and click OK.

3. Choose from the list on the left what aspect of the style you want to define, for example, Type or Background. Define specifics on the right.

4. Click Apply to preview and OK when done.

Adding a CLASS attribute to an existing tag

1. Select the tag or element (eg. an image) you want to add a “class” attribute to. Make sure is the tag is selected at the bottom of the document window (see example on the right).

2. In the Tag (Inspector) Panel on the Attributes tab under “CSS/Accessibility,” type in a name for your class next to “class” using no spaces, then hit the Return key.

Note: You can also manually type the class=””

attribute into a tag in Code View.

Applying an existing CLASS:

1. Select the tag or element (eg. an image, text, etc.) where you want to apply an existing CLASS style.

2. In the Properties (Inspector) Panel, select your class from the Style drop-down menu.

Tag Panel

Properties Panel

pg. 44Dreamweaver MX 2004Editing CSS: CLASS


EXERCISE

Create a CLASS that will right-align an image within a block of text.

Start with both an HTML document open with a couple paragraphs of text and a CSS document attached.

1. Insert an image at the top of the document (at the beginning of the first paragraph).

2. Click on the image to select it.

3. In the Tag (Inspector) Panel on the Attributes tab under “CSS/Accessibility,” type “rightalign” next to Class, then hit the Return key.

4. Click the New CSS Style button, located at the bottom of the

Design Panel.

5. In the “New CSS Style” window, click Class under “Selector Type.”

6. Next to Name, type “.rightalign”

7. Double-check that “Define in”

shows your .css file. Click OK.

8. Now you’re in the CSS Style Definition window. Click on the Box Category along the left.

9. Under Padding, type “15” next to Top. Notice that “Same for all” is checked. This property adds space around the image in pixels.

10. Under Float (located at the top-right), choose right from the drop-down. This will both align the image to the right and wrap the text around the image.

11. Click OK. The image is now aligned right within the text! And, this class can be applied to any image as long as the image tag has the class=”rightalign” attribute.

pg. 45Dreamweaver MX 2004Editing CSS: ID


Editing CSS: ID

Create an ID if you want to add style to a specified element in your page, particularly a <div> tag. You can add an “id” attribute to most tags. Unlike the CLASS selector, a specific ID selector can only be used once in your HTML document.

Creating an ID Style


2. Click Advanced under “Selector Type” and type in the same name with a “#” symbol before it (no spaces or ““). Double-check that “Define in” shows your CSS file... and click OK.

3. Choose from the list on the left what aspect of the style you want to define, for example, Type or Background. Define specifics on the right.

4. Click Apply and OK.

Adding an ID attribute to an existing tag:

1. Select the tag or element you want to add an “id” attribute to by clicking on the tag/element in Code View or Design view. You can also click in body area then click on the tag at the bottom of the page (example below).

2. In the Tag (Inspector) Panel on the Attributes tab under “CSS/Accessibility,” type in a name for your id next to “id” using no spaces, then hit the Return key.

Note: You can also manually type the id=”” attribute into a tag in Code

View.

EXERCISE

Create an ID that will right-align a block of text next to another block of text and make the background color of the right block a different color.

Start with both an open HTML document containing two paragraphs of text and a CSS document attached. This exercise will define an area of your document with <div> tags, commonly used with IDs.

1. Highlight/Select the first paragraph of text.

2. Select Insert > Layout Objects > Div Tag to add a <div> tag with an ID.

3. In the Insert Div Tag window, type “left” next to ID. The drop-down should show “Wrap around selection if you highlighted the text.

Tag (Inspector) Panel

pg. 46Dreamweaver MX 2004Editing CSS: ID


4. Click OK.


6. In the “New CSS Style” window, click Advanced under “Selector Type.”

7. Next to Selector, type “#left”

8. Double-check that “Define in” shows

your .css file. Click OK.

9. Now you’re in the CSS Style Definition window. Click on the Box Category along the left.

10. Under Padding, uncheck the “Same for all” box and type “20” next to Right. This property adds space to the right of the first paragraph in pixels.

10. Under Float (located at the top-right), choose left from the drop-down. This will both align the first paragraph to the left and move the second paragraph to the right.

11. Type 250 next to Width. This property adds a width (in pixels) to the paragraph and creates a “column.”

12. Click OK. There are now two separate columns of text!

Styling the #left ID

pg. 47Dreamweaver MX 2004CSS Example


HTML Document Structure (using CSS)<body>

<div id=”wrapper”>

</div>

</body>

<div id=”masthead”>

</div>

<div id=”nav”>

<ul> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> </ul>

</div>

<div id=”content”>

<h1>Heading 1</h1>

<p class=”main”>Main Content</p>

</div>

<div id=”footer”>

</div>

pg. 48Dreamweaver MX 2004Further Research


Further Research

Where to go from here...

Links

Dreamweaver

www.macromedia.com

www.uensd.org/manuals/

www.learnthat.com/courses/viewlets/dreamweaver/

General Web Design

www.useit.com

www.lynda.com

www.leafdigital.com/class

www.webstyleguide.com

www.csszengarden.com

www.webmonkey.com

Books Dreamweaver MX QuickStart Guide – PeachPit Press

Eric Meyers on CSS

Macromedia Dreamweaver MX Hands on Training (Lynda.com)

Dreamweaver MX: The Missing Manual