dreamweaver intro - spring 2005
Philip van Allen - v a n a l l e n @ a r t c e n t e r . e d u
all materials on this web site © copyright 2005, Philip van Allen
people.artcenter.edu/~vanallen/dreamweaver/
dreamweaver seminar - february 26, 2005: page1 - page2 - page3

dreamweaver : 

web page basics. For this seminar, download and extract project0.zip

site class will build: website, files

 
resources : 


Dreamweaver MX 2004 Solutions
by Ethan Watrall
Sybex, Sybex Inc; Bk & CD-Rom edition (March 18, 2004), ISBN: 0782142990

cover
Web Design in a Nutshell by Jennifer Niederst
O'Reilly & Associates; ISBN: 0596001967; 2nd edition (October 15, 2001)

 

  
composition of a : 
web page : 
A web page is composed of the following elements:
  • The HTML file, which describes the page layout, defines links to other web pages, and contains the text for the page
  • Elements that come from the same server where the .HTML files is, or from a different server
    • Image files (.gif, .jpg, .png)
    • Audio files (.mp3, .au, .ram, .mov)
    • Other multimedia objects (QuickTime movies, Flash, Real, etc.)
  • JavaScript

 

  
the windows : 

Document. This window shows you what the web page will look like - more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.

Properties. This window is one of the most important and is used to show and set any properties of the currently selected element (image, table, text, etc.). For example, when you have some text selected, you use this window to set the bold style and font size.

Insert. This small palette is a shortcut menu used to place items into the current web page. For example, in the COMMON section, click on the icon with the tree to place an image in the document (at the current insert location). Each tab in the Insert menu brings up a different set of features for working with your document.

Files. This window servers two main purposes. First, it shows the way files are organized in your web site, and it allows you to open files without using the File>Open dialog. Second, it's an FTP (File Transfer Protocol) client, which enables you to transfer your HTML files from the computer where you create them, to the web server where the files will be visible from the Web.

Behaviors. This window shows where interactive actions are added to text or graphic elements in the page. The most common behavior to add in Dreamweaver is for "rollovers", where an image changes when the user moves the cursor over the image. Two things are defined for each behavior, an event and an action. The event is the situation that causes something to happen. The action is what is activated when the event occurs.

 

  
page properties :  Every web page has global properties that can be set in the menu MODIFY>PAGE PROPERTIES... Important properties to be set are:
  • Title. This text does not appear in the body of the document. It sets the text to be displayed in the top bar of the browser window. You can also set the page title in toolbar of the document window.
  • Background Color. If this property is not set, the background color of the web page is undefined (although most web browsers will display it as white). Set this property to control the color of the background.
  • Background Image. This optional property allows you to use an image as a repeating, tiled background for the entire page.
  • Page margins. There are settings which control the margins around the page. Most designers like to eliminate the margins so they have complete control over the page layout. To do this, set LEFT, RIGHT, TOP, BOTTOM all to zero.

 

  
the document toolbar : 

The Dreamweaver toolbar contains some common commands related to your view selection and your document's status, plus a field for setting the page title. The Options menu items (button located on the right) change depending on the view you select.

Of particular note are the three buttons on the left. They allow you to quickly change the window view:

  • Design View - where you see how the page will appear in a browser
  • Code and Design View - a split page view where you see the code at the top, and the design at the bottom
  • Code View - where you see only the code that describes the page

 

  
text formatting : 

Text formatting in Dreamweaver is similar to the formatting available in a word processor. You select the text you wish to modify, and then apply a style to it. For example, to make a word bold, select the word, then click on the "B" button in the Property Inspector. Alternatively, you can select the text, and use the Text pull-down menu (e.g. Text>Style>Bold).

Text characteristics can be set by Dreamweaver, including bold, italic, color, size, font, and justification. In addition, Dreamweaver has a utility to check the spelling of the selected text or the entire document (TEXT>CHECK SPELLING). Note that the STYLES pull-down will contain any CSS styles you've created for this document.

The text inspector behaves much like the toolbars in a word processor. Experiment with the following:

  • Creating a heading with the Format pull-down
  • Set the font face
  • Set the font size
  • Set the font color
  • Make some text bold and italic
  • Change the justification to left, center, and right
  • Make a link to another web page
  • Create a list
  • Indent some text

Line Breaks--one or two lines: Note that when entering text, if you hit ENTER on the keyboard, a blank line will be inserted between paragraphs. This happens because Dreamweaver inserts a <p> (paragraph) tag at the beginning of the previous paragraph, and a </p> at the end. If you don't want a blank line between paragraphs, the hold the SHIFT KEY down while you hit ENTER. This will insert a <br> (single line break) at the end of the paragraph.

 

  
making links : 

You can create a link to another web page (a page you've made, or one on another web site) so that when a person clicks, the browser will open that new page.

  1. To do this, select the text or image that you want to be the link.
  2. Then, in the Property Inspector, type in the link in the Link section.
  3. If the page you are linking to is on another web site, you must specify the complete URL, including the "http://" part (e.g. http://www.artcenter.edu/mdp/).
  4. If you are linking to another page on your site, you can type in the file name (e.g. file.html), or click on the blue folder icon and select the file from the open dialog.

 

  
working with images : 

Web pages are usually a combination of text and images, and Dreamweaver allows you to place, adjust and to a limited extent, set the layout of images on the page. Keep in mind that HTML is a page MARKUP language, not a page LAYOUT language, so you may find yourself being frustrated at your lack of ability to position images exactly on the page.

A quick way to get images for use in making test web pages is to "steal" the images from other web pages. This approach is only for learning purposes, and you must not use this method for commercial purposes since this would violate the rights of the copyright owner of the image.

To steal an image from a web page, place the cursor over the image, and right-click (pc) or control-click (Mac). A menu will pop-up, and you can select "Save Image As...". Browse to the location on your disk where the web page is, and save the file in the same location as the web page. Here are some images to use for this exercise, one is a JPEG, and one is a GIF file.

gorilla scratchinggorilla.jpg


gorilla.gif

Once you have an image to work with, these are the steps for putting an image in a web page.

  • Placing an image. To place an image on a page, first, place your cursor and CLICK in the location on the page where you want the image to show up. Then, click on the image icon in the Insert palette. It will request the name of the image, which you can use the open dialog to set. Once the image is displayed on the page, you can set it's characteristics in the Property Inspector.
  • Adjusting the size of the image. Click on the image to select it. Then you can change the displayed size by clicking and dragging the small black squares that appear on the edges of the image when you select it.
  • Making an image a link. Click on the image to select it. In the Property Inspector put the link in the Link section. You may also want to put a zero in the Border section to prevent the blue line that will appear around an image to indicate it is a link.
  • Flowing text around an image. By default, text does not flow nicely around images. To enable text flowing, select the image, and then set the Align setting to Left or Right. This will place the image on the left or right of the browser screen, and text will flow around it. You may need to reposition the image to get text to flow around the image at the point you want.
  • Adjusting the margins around an image. When text flows around the image, it "hugs" the image very closely by default. You can increase the margin around the image by adjusting the horizontal and vertical spacing. Select the image, and then put the number of pixels of space you want in the Vspace and Hspace sections of the Property Inspector.

Note that the inspector is taller than in the text example above. You make this happen by clicking on the small triangle in the lower right hand corner of the palette. Experiment with the following:

  • Change the height and width of the image
  • Reset the size of the image to its natural size by clicking on the "W" and "H". When the width or height number is bold, the dimension is different from the natural size.
  • Change the alignment so text wraps around the image
  • Set the alt attribute of an image
  • Make the image a link
  • Change the VSpace and Hspace to change the margin around an image when text if flowing around it

 

  
browser preview prefs : 

Select EDIT>PREFERENCES and select PREVIEW IN BROWSER. This will bring up a dialog box that will enable you to set the browsers you will use for previewing. These previews can be launched using the F12 button.

  1. EDIT>PREFERENCES and select PREVIEW IN BROWSER
  2. Select +
  3. After selecting the application, click on the PRIMARY BROWSER checkbox for one browser, and SECONDARY BROSWER for the other. It is essential that you check your web pages in both Safari, Firefox, and Explorer. The page should also be checked on both Mac and PC.
  4. After putting away this dialog box, you will then be able to use F12 for the primary browser, and Shift F12 for the secondary broswer

 

  

all materials on this web site © copyright 2005, Philip van Allen

 top