Intermediate Dreamweaver (2007)

Macromedia Dreamweaver Macromedia Dreamweaver MX 2004"Advanced Features"

www.freeu.com www.compuskills.com

your instructor: matthew [email protected]

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 introductionscustomizing 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 you what 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 wyllyamzsoftware 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 Internetsince 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 of understand 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 aparticular level of student:particular level of student:

how to make this a better classhow to make this a better class

keep in mind that this course was designed for a particular keep 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 topics possible class topics

Primary discussionsIntro 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 subjectsUnderstanding 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: possible possible reviewreview topics topics

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 …

Moving on …Moving on …Moving on …Moving on …


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 styleswhenever 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 & feeds Understanding 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/2005/09/30/what-is-web-20.html

http://en.wikipedia.org/wiki/Web_2.0



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)

Technology

Transcript of Intermediate Dreamweaver (2007)