Upload
matteo-wyllyamz
View
487
Download
1
Tags:
Embed Size (px)
Citation preview
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
Colorado Free UniversityColorado Free University
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.
Colorado Free UniversityColorado Free University
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
Colorado Free UniversityColorado Free University
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 …
Colorado Free UniversityColorado Free University
how to make this a better classhow to make this a better class
most importantly …most importantly …
Make it fun! Make it fun!
how to make this a better classhow to make this a better class
Colorado Free UniversityColorado Free University
Colorado Free UniversityColorado Free University
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 …
Colorado Free UniversityColorado Free University
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 …
Colorado Free UniversityColorado Free University
copyright © 2007 by m.wyllyamzcopyright © 2007 by m.wyllyamz
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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)
Colorado Free UniversityColorado Free University
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)
Colorado Free UniversityColorado Free University
(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
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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.
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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?
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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.
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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!!!
Colorado Free UniversityColorado Free University
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!
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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)
Colorado Free UniversityColorado Free University
Utilizing third partiesUtilizing third parties
Blogging tools Message boards / forums Online photo sharing Build your own wiki Scripts and additional functionalities
Colorado Free UniversityColorado Free University
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"
Colorado Free UniversityColorado Free University
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
What is "Web 2.0"?What is "Web 2.0"?
Colorado Free UniversityColorado Free University
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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
Colorado Free UniversityColorado Free University
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!