Welcome
Set Up
Aids
HTML
XHTML
CSS
Links
Sprys
File Management
TYOTK*
RSS Feed from Blog

Welcome To Dreamweaver

Setting Up Dreamweaver

Note:
The preferences listed on the left below need some attention, now!
The other preferences in Dreamweaver can be attended to as your own needs and style develop and you become more familiar with the Dreamweaver Program.

Preferences > General

AP Elements

File Types Editor

New Document

Preview In Browser

Status Bar

Manage Sites (List Coming Soon)

Page Properties

Setting up A "default" Web Page with Font Family, font size and link colors, of your choice.
- Menu
  - Modify > Page Properties
  - Key Board Short Cut, Command J (Mac) Control J (PC)
  - An Example of a "default" web page Right Click download and Open it in Dreamweaver and check out the Page Properties

Getting Around and Finding How To's...

Visual Aids

Menu
- View > Visual Aids > CSS Layout Backgrounds
- Or you can use this icon Located In the Document Tool Bar. This icon Reveals The DIV Layout showing the "boxes" with different colors.

The O'Reilly References

Menu
- Window > Results > Reference
F7 or Shift (F1) (You can cut and paste the example HTML/CSS etc., directly into the code editor)

The Status Bar

The status bar
A = Tag Selector
Left Click Selects The HTML Tag
Right Click Pops up a menu for further editing.

Applications Bar

In the Windows version of Dreamweaver the Applications bar is always on!

On the Mac the Applications Bar can be switched on / off via...

Menu
- Window > Application Bar
  - Appears at the Top of thePage --Let's you switch workplace settings...

Tool Bars

Menu
- View > Toolbars
  - Style Rendering
  - Document
  - Standard
  - Coding

Other on-line References, code snippet sources, demos

Code Burner
- Currently available for Firefox and Mac OSX Dashboard
- Coming Soon as a Dreamweaver Extension!
- http://tools.sitepoint.com/codeburner/
W3Schools References
- http://www.w3schools.com/sitemap/sitemap_references.asp

Basic HTML

An Example using headings

<h1></h1> is an HTML element

where <h1> is an opening Tag
and </h1> is a closing tag.

The tags surround (enclose) the content that you want to be an h1 heading

Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading.
<h6> defines the smallest heading.

In your text editor it looks like this

<h1>This is an h1 heading</h1>

<h2>This is an h2 heading</h2>

<h3>This is an h3 heading</h3>

<h4>This is an h4 heading</h4>

<h5>This is an h5 heading</h5>

<h6>This is an h6 heading</h6>

In your browser, it looks like this

This is an h1 heading

This is an h2 heading

This is an h3 heading

This is an h4 heading

This is an h5 heading

This is an h6 heading

Note: (Hidden rule)
HTML & XHTML automatically adds an extra blank line after a heading.

Example Paragraphs <p></p>

In your text editor it looks like this

<p>This is a paragraph</p>

<p>This is another paragraph</p>

Which looks like this in a browser...

This is a paragraph

This is another paragraph

Note: (Hidden Rule)
HTML automatically adds an extra blank line after a paragraph.

Other on-line html references.
W3schools.com

Sitepoint.com

Web Page Content ---The XHTML

XHTML, Extensive Hypertext Markup Lanuaguage is a subset of HTML iphone displaing a web page

XHTML (Basic) is a sub-set of XML
and it is fast becoming the standard for cell phone web browsers

IN XHTML (Basic)
    1. Use lower case only for elements in source
    2. All elements must have a closing tag

Single or "empty& elements use & />" for a close
eg

HTML	XHTML
<BR>	<br />
<hr>	<hr />
<img>	<img />
<meta>	<meta />

3. Nesting

Tags must be written in the proper "mirrored" order

Incorrect XHTML nesting example:
<p><strong>This is nested wrong</p></strong>

Correct XHTML nesting example:
<p><strong>This is nested correctly for xhtml </strong></p>

4. Attributes must be writen as name = "value"
With the quote marks!

5. Some characters are "Reserved" and must be replaced with a "coded entity" name

A full list of Reserved Characters and their (x)html replacement name is listed at w3schools.com

Table below lists common characters and their "name entities"...

Character	Entity Number	Entity Name	Description
"	"	"	quotation mark
'	'	' (does not work in IE)	apostrophe
&	&	&	ampersand
<	<	<	less-than
>	>	>	greater-than
(empty space)			non-breaking space

CSS Styles Web Page Content, the HTML

With this button, you can "Turn off" the CCS styling for any page.
It's In the Tool Bar "Style Rendering"
View > Toolbars > Style Rendering

Basic CSS Rules

CSS can style any HTML element, "class", or "id"

id

An id in CSS is unique, and can only be used once on a page/document.

Analogy
id = (ID) is unique to one person. eg. A person's Identification
class = There are many people in a group. eg people in a classroom.
id's must be written as a single word, cannot start with a number and must be enclosed in quote marks...

eg id = "banner"

id's are named between <body><body> on a web page

eg
<div id="banner"> </div>

eg ) id="easytorememberdescription" (the decriptions commonly used are header, banner, body, container, navigation, leftcolumn, rightcolumn, header, footer, sidebar... )
id helps you keep track of all your div elements or layers. Makes it easy to have different style attributes and positions for each <div></div> or html element. You can also overlap <div></div> layers ... so it helps to know what <div></div> element might be getting in the way.

class

The name you give for class must be written as a single word, cannot start with a number and must be enclosed in quotes
class ="redheadings"
Generally, class can be any HTML element, like h1 (headings), p, pre, ul, img, or even div's

A class is named between <body> and </body> on a web page

The External Style Sheet

An external style sheet is a text file that must have the extension .css

eg) "mystylesheet.css"

The HTML page using the style sheet must link to the style sheet with a link written

between <head>and </head>

How to write CSS

selector {property: value;}

To select the styling for an ID, use the "#" symbol plus name

#banner {width: 960px;
                  height: 100px;
                  background-color:silver;
                 }

To select the styling for a class, use the "." (dot) symbol plus name

.redheadings {color: red;}

To select an html element just write the element

p {font-size: Arial; }

The Embedded Style Sheet

CSS can also be embedded on the same page as the html
The styles must be btween <head> and </head>
and between
<style type= "txt/css" >
</style>

In-line styles

CSS can also be written "in-line" in between the <body> and </body>

CSS Priority ---The Order of Interpretation

#1 Priority is the Browser's default value...
#2 The External Style sheet
#3 The embedded Style Sheet
#4 The in-line styles

A few more rules

Grouping

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6 {
color:green
}

CSS Comments

Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:

/*This is a comment*/
p {
     text-align:center;
/*This is another comment*/
     color:black;
     font-family:arial
    }

Pseudo-Class

a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */

Must be written in the above order to work correctly...

Descendant Selectors

Allow you to target a specific element and not affect similar elements used elswhere on the page

#subject h1 {color: red;}
all h1's in the div with ID "subject" are colored red
other h1's on the page, not in the div "subject" are not affected

Daisy chaining descendants

#subject p em {color: blue;}

#leftcol .navigation li {color: red:}

Practice, practice, practice The good news is the CSS STYLE Panel

Adobe CSS Advisor

http://www.adobe.com/cfusion/communityengine/index.cfm?event=homepage&productId=1&loc=en_US

Try This...

An Experiment "Styling some links to make a simple CSS Menu"

Download the files (Right Click, unzip the folder and load into Dreamweaver)

The CSS Properties Panel

Read Chapters 8 & 9

Links and Navigation

Links [For detailed information read Chapter 7 in your text book ]

For working samples of how web page Links work go here...
examples and notes

Types of Web Page Links

Hyperlink
e-mail Link
- To avoid Spam encrypt (encode) your e-mail address
  - http://www.wbwip.com/wbw/emailencoder.html
  - add to snippets
    - Menu (Insert > Recent Snippets)
Named Anchors (book marks)
Hot Spots

How to change a web pages defaut link properties
Use the Dreamweaver Menu

Modify > Page Properties select: CSS Links
- See details in your text book on page 83

For a tutorial on how to add styles to change the appearence of default links
How to Style the default Links

The pseudo elements
- a:link
- a:visited
- a:hover
- a:active

For an Alternative menu style you can cut and paste into the code editor...

Simple Styled Menu Links

A simple horizontal or vertical menu bar with current page indicator

The Navigation Bar - Has been Removed in Dreamweaver CS5

Insert > Images > in CS4 Navigation Bar CS4

Insert > Images in CS5 Images menu CS5

Preparing the graphics for the Navigation Bar
- download graphics buttons-1 (Right click and save as (pc) Mac Command Click)
- try these on-line button makers
  - http://cooltext.com/Buttons
  - http://www.buttonator.com/
Inserting the Navigation Bar
- Insert Palette
  - Insert > Common > Images: Navigation Bar
    - Use popout menu to select Navigation Bar (not avialable in CS5)

The Spry Menu Bar [pp384 -385]

Insert > Spry Menu Bar

The Spry Menu Bar has been improved, instead use

The Widget Extensions to access Spry Menu Bar V 2.0

Spry menus

AJax Coded by Adobe so you don't have to...

Server Side XML/Java Effects for your Web Page

New Spry Theme Sets

Right click (PC) Control Click (Mac) to download the sets...

Video Instructions

Editing The Designer Spry Theme Set

How to add MORE tabs, panels and content.

To aid you I have made some snippets...You can download them here

Read your Text Book pp-405 to find out how to install the snippets

Using the snippets (they work on either horizontal or vertical displays)

NewAccordianTab

Open Spry_Accordian.html on a new page

and add a new "middle" tab as the tabs on the end have rounded corners

This is the properties for a spryacciordian Tab

The Code that you created looks like this

<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 5
</div>
<div class="AccordionPanelContent">Content
</div>
</div>

Find it in the code panel by highlighting "Label 5" in the Design View

Find the above HTML in Code View, Highligh it and replace it with the snippet "NewAccordianTab" from the Snippet Panel.

You should see this when you 'Insert" the "NewAccordianTab" in Code View

<div class="AccordionPanel">
<div class="AccordionPanelTab middleTab">New Tab
</div>
<div class="AccordionPanelContent">
   <div class="accordion_content">
<p>This</p>
<p>Is</p>
<p>New Content</p>
   </div>
   </div>
</div>

In Design view you'll see a new panel in your accordian spry with the correct graphics inserted. If you don't, press F5 to update the Code Change

Either save the new accordian in you Library

or copy the code that makes your spry and save it as a "snippet"

Or save it as template or cut and paste the new codea along with the related files. to manually add the css script and Java script to the page where you paste your new Accordian Spry on a new web page...

The Tabbed Panel

because of the way the graphics were created you can only add one additional panel...

Open Spry_TabbedPanelshorizontal.html (or vertical) on a blank page in Dreamweaver

and add a new "middle" tab as seen above.... again in design view highlight Tab 5 and in the code view look for this

<li class="TabbedPanelsTab" tabindex="0">Tab 5</li>

Replace it with the snippet "AddMiddleTablistHorzPanl" (works in the vertical panel too...)

It looks like this...

<li class="TabbedPanelsTab middleTab">NEW TAB</li>

Then in the design view hightlight "Content 5" and in the code view look for

<div class="TabbedPanelsContent">Content 5</div>

and replace it with the snippet "AddTabbedPanelContent"

Which looks like this

<div class="TabbedPanelsContent">
<div class="content">
<p>This</p>
<p>IS</p>
<p>Your</p>
<p>New Panel Content</p>
</div>
</div>

Save, etc...

The Spry Menu Bar

Open either Spry_MenuBar_horizontal (or Vertical) on a blank Dreamweaver Page

and create just a single new "middle menu" item and Name it "New Menu"

In the Design view highlight New Menu and look for it in the Code View

Replace the following...

<li><a href="#">New Menu</a></li>

With either "NewHorizontalMenuSingle" or if you want a multiple menu structure "HorizontalMenumultilinks"

The replacement looks like this for multi menus

<li class="middleItem"><div class="topLevel"><a href="#">NewMulti-Level Link</a></div>

<ul>
<li class="firstItem"><a href="#">New Link.1.1</a>
<ul>
<li class="firstItem"><a href="#">New Link.1.1</a></li>
<li class="middleItem"><a href="#">New Link.1.2</a></li>
<li class="lastItem"><a href="#">New Link.1.3</a></li>
</ul>
</li>
<li class="middleItem"><a href="#">New Link2.2</a>
<ul>
<li class="firstItem"><a href="#">New Link.2.1</a></li>
<li class="middleItem"><a href="#">New Link.2.2</a></li>
<li class="lastItem"><a href="#">New Link.2.3</a></li>
</ul>
</li>
<li class="lastItem"><a href="#">New Link 3.3</a>
<ul>
<li class="firstItem"><a href="#">New Link.3.1</a></li>
<li class="middleItem"><a href="#">New Link.3.2</a></li>
<li class="lastItem"><a href="#">New Link.3.3</a></li>
</ul>
</li>
</ul>
</li>

Save, etc....

That's it... practice, practice, practice

Managing your Local and Remote Files

There are many video tutorials available for free from Adobe's TV web site... This is just one of them.

*No, It's not Klingon...

Things You Ought To Know

<!Doctype> and Doctype Switching

If your web page doesn't include a doctype or uses one with out a URI (a Uniform Resource Identifier, a string of characters used to identify or name a resource on the Internet.) Internet Explorer will switch or revert to "Quirk's Mode" and emulate IE 5. If your web page uses the box model, the boxes will then render or display incorrectly. Internet Explorer 4 and 5, the first browsers to support CSS got some of the details wrong. The problem was corrected in IE 6, but to ensure that web pages that use IE 4 or 5 rules don't break MicroSoft invented document switching... a double edged sword...

Triggers Standard Mode

<!Doctype html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Triggers an Almost Standards Mode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

In this "strict" mode (Almost Standard) tables are less likely to fall apart in Internet Explorer --The layout of images inside table cells is handled the same way "quirks" mode operates, instead, which is fairly consistent with legacy browsers such as Internet Explorer 7 (and earlier). This Almost Standard "doctype" is recommended for all your web pages.

For more <!Doctype> information about document switching and Quirks mode

http://www.ericmeyeroncss.com/bonus/render-mode.html

http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx

https://developer.mozilla.org/en/Mozilla's_DOCTYPE_sniffing

The latest News From The Class Blog

Dream Possibilities, Weave Reality

A posse ad esse, from possibilty to actuality with Dreamweaver