Dreamweaver MX Level 2

[2005-06-07]
Full-day class at the Learning Center with New Horizons instructor Taurus Wright.
Starts class off with "Fast Track Wheels" exercise. Preview in browser: F12. Need graphics editor to create gif images like Photo Shop or Fireworks. With educational discount Adobe Illustrator isn't too bad. Yale is pushing for Adobe Illustrator. Correl tends to have least expensive application.

FIRST unit: Roll-overs and navigation bars. For navigation bars: Insert bar: Common tab; Click navigation bar button: Element name; UP image; over image, down image, oer while down; alternative text; URL; Insert and Table options; Click OK.

SECOND unit: Libraries: let you use same items over and over, changing only one central file ... To get to Library, click "Assets" tab, save altnavbar.htm as "Library" file. Using Library items: Place cursor; Select library item; Click Insert button Assets panel, or Drag and Drop. Similar to templates and Server Side Includes, just change the element once and universal update.

THIRD: Style Sheets: Nice effect when hyperlink hover style different color and bold weight. Class tags can use whatever names one wants. Size: Dreamweaver default is in pixels. Click new CCS Style button ... , e.g., "heading" in bold and dark grey (looks good). After class is defined it must be applied. So highlight text to be formatted, and click "apply styles" mode of styles palette.. Rules of cascading style sheets stipulate that it should take precedence over ad hoc formatting; DreamWeaver does not seem to adhere to this. Possible to export style from original page to make separate css document, here titled "ftwstyles". Link external style sheet as link rather than import, since latter is often not supported by browsers. Small caps effect more dramatic in Firefox than in IE, where subsequent caps are smaller than the initial one. "Internal takes precedence over external", so need to delete internal style sheet if still present in initially modified file.

Recap: (A) Define a style: (1) Design panel --> CSS Styles tab: (a) Click New CSS Styles button, (b) Choose type: (i) HTML [a] Chose Tag; (ii) Custom [a] Type desired name (w/# or .); (iii) CSS Seletor: [a] Link pseudo-classes (i.e., hyperlink states such as 'a:hover'); (c) Choose location for style; (2) CLick OK; (3) Choose formatting options; (4) Click OK. (B) Applying Sytles; (C) Edit a Style [compressed from slide]. For more on CSS, w3.org (more technical),http://www.w3schools.com(better organized for our purposes), and don't forget reference DreamWeaver's own reference tab.

LUNCH BREAK

ANNOUNCEMENTS:
Integrated Learning Manager: Register as new member, fill in starred fields. After account set up, enter key TW99-L9PNC-44Q5, must be entered by 6/14/05 , and account lasts for 6 months. Includes online tutorial, pdf version of manual with tasks included, and exercise files that can be downloaded. Look for Dreamweaver MX Level 2. Need to disable pop-up blocker to use this program.

Also: 6-month free course re-take policy, call 203-375-3370. No more "Dreamweaver 3" (database-driven Web sites), since there was never enough interest expressed.


FOURTH UNIT

Layers. Create a Layer: Insert--> Layer or Insert bar--> Common tab, click Draw layer button, properties inspector--> Spediviy Left, Top. With , Heidgh. Put Item in Layer

Window-->Other-->Layers, to get "Layers panel". Dynamic HTML = CSS, Layers, and HTML.

Hyperlink with just a # sign can invoke java script, even if there's no movement on page or site. Technique used for getting hover over simple text to change image by invoking different layers. Be explicit about showing or hiding layers [F2 for menu] at point of mouse event.

For "browser targetting", sometimes need to create alternative pages (without, say, layers function) and browser switch code. File menu-->Check page-->Check target browsers. Don't go too far back with browser versions since then even such thngs as CSS will be invalidated. File menu-->Convert-->3.0 Browser compatible (should be "Layers to tables")


FIFTH UNIT: FORMS

Client side versus Server side. Focus here is on making a form: Insert bar>Form tab; CL form element button to create form, Name, action

Insert form invokes dotted red box. Put table inside it. Width 100% (% good for flexibility). Click form tag in tag selection area, and name it "feedback". Action: where to send data: database, email address (mailto:feedback@ftw.com). If data is sensitive, than should use method: "Post" (default and most common). "Get" typically sends data as string, and is visible in address bar). Leave target blank. Enctype: blank sends it as string, maybe ok for db; or "application/ ... " or "text/plain" is simplest; Insert menu-->form objects-->text field-->


Column 1 Column 2
Optional
Name [text box ]
Gender [radio group]
Region [drop down]
General Information
Comments/Questions [text area ]
Which topics would you like to learn more about? Check box: Name: topic; value: cycling
[blank] [insert button]

Forms tab on "Insert bar" gives buttons like check box, write in word next to box, then shift+enter

Concentric circles around cursor in Windows XP tied to CNTRL button.