Intermediate Dreamweaver (2007)

Macromedia DreamweaverMacromedia Dreamweaver MX 2004
"Advanced Features"
www.freeu.com www.compuskills.com
your instructor: matthew wyllyamz
m.wyllyamz@gmail.com

Colorado Free UniversityColorado Free University
getting started todaygetting started today
quick introductions -- customizing this coursequick introductions -- customizing this course
administriviaadministrivia
how to make this a better classhow to make this a better class
menu of possible class topicsmenu of possible class topics

quick introductionsquick introductions
customizing this coursecustomizing this course
who are you and what do you do?who are you and what do you do?
what is your experience with computers,what is your experience with computers,
the Internet, and the World Wide Web?the Internet, and the World Wide Web?
what is your experience with web design,what is your experience with web design,
Dreamweaver, and HTML?Dreamweaver, and HTML?
what are your goals today? what do youwhat are your goals today? what do you
hope to get from this class?hope to get from this class?
what is something interesting about you?what is something interesting about you?

quick introductionsquick introductions
matthew wyllyamz
software instructor since 1993, with an emphasis on multimedia, graphics, and Internet
development.
have created courses for Jefferson County Adult Ed, CCU in Lakewood, Productivity Point, and the
DOD (at Rocky Flats).
taught Apple Macintosh classes exclusively for five years, and have been using the Internet
since 1994.
learned HTML circa 1996. used MS FrontPage exclusively for 10 years. recently converted to
Macromedia Dreamweaver and Flash for web development.
corporate webmaster for two years ('97-'99),
blogmaster for seven years. ('99-'05)
TODAY: independent contractor, technical & creative consultant, artist, amateur photographer, and
author. BA in English writing, and have sold three books.

administriviaadministrivia
class tickets and/or confirmation numbersclass tickets and/or confirmation numbers
facilities …facilities …
– bathrooms, vending, free coffee & water, microwave …bathrooms, vending, free coffee & water, microwave …
– the projection systemthe projection system
course schedule: 9am – 4pmcourse schedule: 9am – 4pm
– Two morning sessions (10-15 min short break)Two morning sessions (10-15 min short break)
– One hour lunch break around 12 or 12:30One hour lunch break around 12 or 12:30
– Two afternoon sessions (10-15 min short break)Two afternoon sessions (10-15 min short break)
class evaluationsclass evaluations

please set pagers and cell phones to silent or turn off.please set pagers and cell phones to silent or turn off.
understand the nature ofunderstand the nature of concentrated computer trainingconcentrated computer training
– class is part discussion, part lecture, part hands-on
– breaks can be short, but effective.
– bathroom visits: anytime is the right time!
– watch me, then try it yourself.
– PARTICIPATE! ask questions. answer questions. take notes.
– this is a cooperative learning environment:
We are here to learn from each other.
keep in mind that this course was designed for akeep in mind that this course was designed for a
particular level of student:particular level of student:

keep in mind that this course was designed for a particularkeep in mind that this course was designed for a particular
level of student:level of student:
Created for
- a semi-experienced computer user with a comfortable working
knowledge of the Windows environment.
- the intermediate Dreamweaver user who knows what the Web and
HTML are, but who is still learning this specific software.
NOT created for
- the beginning computer user.
- the beginning Dreamweaver user.
- the truly advanced Dreamweaver user.
most importantly …most importantly …

most importantly …most importantly …
Make it fun!Make it fun! 

menu of:menu of: possible class topicspossible class topics
Primary discussions
Intro to CSS(Cascading style sheets)
Assets & library items
Utilizing templates
Dreamweaver's JavaScript
"Behaviors"
Working with layers
Frames pages? …
Inserting Flash (.swf) files
Adding forms to your pages
Additional subjects
Understanding RSS tags & feeds
Utilizing third parties
Should your site be a blog?
What is "Web 2.0"?
What is a "wiki"?
Summary of best SEO techniques
Conclusions …

menu of:menu of: possiblepossible reviewreview topicstopics
Utilizing templates
Site management
Underlying website structure
Web server addressing
Publishing your web
Inserting and understanding web graphics
Different image formats
How backgrounds work
Tables to format pages & columns
What you need for a site …

Intro to Cascading Style Sheets (CSS)Intro to Cascading Style Sheets (CSS)
The nature of style sheets
Although it may be useful to think of "cascading" as the way in which your styles flow from
one document to another across your website, the term technically refers to the way in
which styles can build on each other and take precedence over one another.
Why use them?
– Easy application of formatting across pages of an entire site
– More control over a many different page elements
– You can even redefine the properties of common HTML tags (page 208)
Is CSS widely supported? (207, 217, 223)
Location: Inline vs. internal vs. external style sheets
– Understanding the placement of your style sheets
– The rule of proximity and precedence
Terminology: declarations, selectors, properties, and values.
Origins, specificity, and order
http://en.wikipedia.org/wiki/Cascading_Style_Sheets

Intro to Cascading Style Sheets (CSS)Intro to Cascading Style Sheets (CSS)
(page 206)
Creating and applying styles (210-213)
– By default Dreamweaver creates internal styles
whenever you format text.
Editing styles (214-215)
Creating an external style sheet (218-219)
Linking an external style sheet (220-221)
Editing the external style sheet to update your site (222-223)
Different CSS tags: <class> vs. <span> vs. <div> (pg. 215)
Should you use multiple style sheets within a web? (pg. 213)

Assets & library itemsAssets & library items
(pgs. 260-265)
Reusing site elements with the assets panel:
– images, colors, URLs, multimedia content, etc.
(pg. 186)
How to save time & work with Library items
– A library item can appear on an unlimited number of pages
within your site
– Altering the library item can automatically update all instances
of that item within your site
Creating library items from your work (188-189)
Placing library items on a page (190-191)
Changing a library item to update the site (192-193)

(page 186)
The difference between simple templates & true templates
Creating a template (196-197)
Adding and/or removing editable regions (198-199)
Creating pages from your template (200-201)
Editing the template, updating the site (202-203)
REVIEW+REVIEW+
Utilizing templatesUtilizing templates

Dreamweaver's JavaScript "Behaviors"Dreamweaver's JavaScript "Behaviors"
Rollover images (pages 102-103)
Navigation bars (104-105)
Pop-up / pull-down menus
New (controllable) browser window
Checking the browser type
And more …
Status bar messages, validating forms, etc.
http://www.soita.org/Resources/tips/dreamweaver.html

Working with layersWorking with layers
Understanding what a layer is and does (page 226)
– Think of a layer as a mini HTML window that can display any
type of web page content.
– Individual layers can be customized much in the same way as
table rows, columns, and cells: Background color/image, etc.
– Layers can be placed absolutely on the page and can even
overlap each other within a "stacking order." (pg. 232)
– Layers vs. tables … (pg. 229)
Are layers widely supported?
Creating, naming, and modifying layers (228-231, 234-235)
Nesting layers within layers is possible. (236-237)
Layers can also be converted into standard HTML tables.

REVIEW+REVIEW+
Using tables to format pages & columnsUsing tables to format pages & columns
KEY CONCEPT:
Understand how monitor size and screen resolution
can affect your designs.
Relative vs. absolute size definitions
Methods of creating tables
Making selections within a table
Table and cell properties
Merging and splitting cells
Nesting tables within tables
"Tracing" images

Frames pagesFrames pages
Should you use frames?
Frames can be a very good idea when working with third-party
content holders.
Each frame is an individual HTML page.
A frameset is contained within a master frames page. (page 152)
This master frames page …
– includes title and meta data
– defines the properties of the frameset
Creating, saving, and editing framesets (153-157, 162-163)
Relative vs. absolute size definitions also apply here.
Frame properties (158-159, 163, 166-169)
Adding content to frames, including off-site pages (160-161)
Link targets and frames (164-165)
Web Style Guide: Frames To Frame or Not to Frame?

Frames pagesFrames pages
_self is the same as the default target or no target at all.
_blank always loads the hyperlink into a new window.
_top loads the link into the full browser window, thereby removing all
frames.
_parent is the most complicated one:
"_parent" is used in the situation where a frameset file is nested inside another
frameset file. A link in one of the inner frameset documents which uses "_parent"
will load the new document where the inner frameset file had been. If the current
document's frameset file does not have any "parent", then "_parent" works exactly
like "_top": the new document is loaded in the full window. Note that "_parent"
does not work in a frameset which is merely nested inside another framset in the
same frameset file.
When you have defined frames, other options will appear, such as
_mainframe

Inserting Macromedia Flash files (.SWFs)Inserting Macromedia Flash files (.SWFs)
(page 98)
Dreamweaver utilizes some built-in Flash options by
creating embedded .swf files.
– Having fun with Flash Text
– Flash Buttons
Creating/adding more complex Flash animations
– .swf files can be easily added to a page and are addressed
in the HTML code just like other types of graphics.

Adding forms to your pagesAdding forms to your pages
Creating a form (pages 172-173)
Text fields (174-175)
Check boxes & radio buttons (176-179)
List & menu items (180-181)
Adding buttons (182-183)
Jump menus
Processing forms

Utilization of the files panel
Organizing your site with folders
Site maps, navigation, and hyperlink views
Working with your remote site
Publishing your site, or …
"Putting" and "getting"
Collaborating on a web site
– Checking in and checking out (page 266)
– Using design notes (pg. 268)
– "Contribute"
Sitewide editing (271-272)
REVIEW+REVIEW+
Site managementSite management

REVIEW+REVIEW+
The underlying structure of a websiteThe underlying structure of a website
What is a "home page" really?
Understanding index.htm or default.htm
Folders or "directories"
– Understanding the nature of root levels
How is site/page addressing affected by file and
directory names?
The importance of managing files from within the site
management application!!!

REVIEW+REVIEW+
Understanding web server addressing:Understanding web server addressing:
hyperlinks, images, and other contenthyperlinks, images, and other content
Addressing appears in the HTML code for:
links, images, and other embedded content.
Absolute vs. relative addresses
Understanding paths
The whole / and ../ thing
Let the application do the addressing for you!

REVIEW+REVIEW+
Publishing your webPublishing your web
Working live vs. downloading and uploading
Backing up your site with this method
How to edit existing pages without ruining them
You can publish your site in any "direction."
Defining the local site
Defining the remote site

REVIEW+REVIEW+
Inserting images and understanding graphicsInserting images and understanding graphics
Prefer to use "camera-ready" images
Copy & paste vs. insertion
Picture properties and toolbars
Placeholders, borders, and image margins
The "single-pixel .gif trick" or using "spacer images"
Working with image maps

REVIEW+REVIEW+
Different graphics formats and their usesDifferent graphics formats and their uses
JPGs: good compression can lead to poor quality
GIFs: transparencies and animation
Understanding resolution and "resampling."
The Rule: You can sample down, but not up.The Rule: You can sample down, but not up.
Using image "slices" for faster downloads
How big should a web page be?
– For all files loading on a single page …
– Dial-up: 50k
– Broadband: 100k

REVIEW+REVIEW+
Using images for backgroundsUsing images for backgrounds
Use background images appropriately.
– Page text and background color/image should contrast.
– Readability of online documents is key!
KEY CONCEPT:
Understand how monitor size and screen resolution can
affect your designs.
– You can use this to your design advantage, but it has its
drawbacks also. Be careful!
– Resizing your browser window preview
– Tips & tricks for laying out versatile pages
Utilizing CSS to increase control/options over backgrounds

REVIEW+REVIEW+
What do you need to have your own site?What do you need to have your own site?
An appropriate computer system w/ Internet access
The tools:
– Text editor or HTML editor
– Image editor
– Web browsers for testing
Web "hosting." eg: godaddy.com
http://www.webhostingratings.com
A delivery method: FrontPage, Dreamweaver, web
publishing wizard, or straight FTP
A domain name is optional, but preferred.
Register your domain at networksolutions.com
Register your site all over the web

Understanding RSS tags & feedsUnderstanding RSS tags & feeds
"RSS is a family of XML file formats for web syndication used
by news websites and weblogs. They are used to provide items
containing short descriptions of web content together with a link
to the full version of the content. This information is delivered
as an XML file called RSS feed, webfeed, RSS stream, or RSS
channel."
You can personally subscribe to RSS feeds
You can define content on your site as an RSS feed
You can include/embed RSS feeds from other sites
into your own pages
http://en.wikipedia.org/wiki/RSS_(protocol)

Utilizing third partiesUtilizing third parties
Blogging tools
Message boards / forums
Online photo sharing
Build your own wiki
Scripts and additional functionalities

Should your site be a blog?Should your site be a blog?
Adding interactivity to your site
– Message boards or forums
– Allowing comments
– Posts by multiple authors
– Enlisting your audience
– "Going viral"

What is "Web 2.0"?What is "Web 2.0"?
A relatively new buzz-word indicating:
– A move towards a more social and participatory
World Wide Web
– The anticipated development of companies
moving software applications and even entire
computing platforms (OSs) to the Internet
http://en.wikipedia.org/wiki/Web_2.0
http://www.oreillynet.com/pub/a/oreilly/tim/news/200

What is "Web 2.0"?What is "Web 2.0"?

What is a "wiki"?What is a "wiki"?
A relatively new buzz-word indicating:
– "A type of website that allows users to easily add, remove, or
otherwise edit and change some available content,
sometimes without the need for registration. This ease of
interaction and operation makes a wiki an effective tool for
collaborative authoring."
– Utilizes "group intelligence" or "the wisdom of crowds"
– From a Hawaiian word meaning, "hurry, quick."
http://en.wikipedia.org/wiki/Wiki

Page titles & filenames should use descriptive keywords
– If possible make each page of your web different
Put effort into your key word and description meta tags.
Use "format headings" to highlight important text on the page.
Use alt text tags in images.
More recently updated pages get a better page rank.
Register many (if not all) of your site's pages in as many
places as you can.
Register your site under multiple domain names.
Incoming links are the best way to boost your page rank.
– The more sites the better.
– The better their page rank, the more it helps.
Avoid any and all spamdexing.
REVIEW+REVIEW+
Summary of best SEO techniquesSummary of best SEO techniques

Conclusions …Conclusions …
You cannot learn the violin in a day or two.
Web design is a skill – like any other – that requires
gradual & continual practice & improvement.
Approach everything on a need-to-know basis, and don't
worry about that which you do not yet understand.
Stay upbeat!
… but if you get frustrated, remember:
You can always turn off the machine and walk away. :)
Good luck. Best wishes.
And get in touch if you need more help!

Intermediate Dreamweaver (2007)

Intermediate Dreamweaver (2007)

Recommended

Recommended

More Related Content

Similar to Intermediate Dreamweaver (2007)

Similar to Intermediate Dreamweaver (2007) (20)

More from Matteo Wyllyamz

More from Matteo Wyllyamz (16)

Recently uploaded

Recently uploaded (20)

Intermediate Dreamweaver (2007)

Editor's Notes