Intermediate Dreamweaver (2007)

762 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
762
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • ADD SLIDES Favicons with link to the creation process ADDITIONAL TOPICS Creating custom commands, page 38 07/02/23 yes the class still needs work, but you did well! ultimately you will want to create your own set of exercises. using the green book, pick out the individual things you would like to demonstrate. try to create a complete start-to-finish project, similar to the intro class. you could even build on the existing site. Make sure that certain slides do not advance initially to give students a chance to express their existing knowledge first, before we start discussing a topic. people want to know more about forms. you'll have to go through the exercises on that one. realistically, how many more times are you going to teach this class?
  • What we are aiming for here is a comprehensive project (set of web pages) from start to finish. (you *could* use the materials on the CD) For the last portion of the class, should the students work on a project of their own?
  • Previously: TO AVOID PROBLEMS: DO NOT move the flash files into a different directory. Try using site-relative hyperlinks for these buttons . When you change the template later in the afternoon, make a simple change to the layout like the page header instead of trying to add an additional flash button? 1) When the page is totally finished, use "save as template" 2) Set the body region of the page as an editable region 3) Create all the other pages for the site based on the template using the "new…" command REPLACE the index.htm page because we want it to also be based on the template 4) At the very end, make a change to the template to show how the entire site has been updated DANGER? you COULD add an additional flash button: "contact" and make it an email link
  • Create a very basic frameset simply to illustrate how they work.
  • Here you could have students create a very simple animation in Flash, publish the .swf file and then include it on an HTML page.
  • Add more here from the original book.
  • For this slide you will want to draw out (illustrate) a typical website directory structure.
  • take a look at the code for the absolute link " for the site-relative links, the root-level link vs. the link inside a directory Reemphasize key point: why is it so important to do your site file management inside the application?
  • Re wikis—you asked me to tell you what I found:   Most of them want to load it on your own server.  Twiki.com ‘s  download failed to open (corrupted file message) so I dropped that one.  I ended up using www.socialtext.net.  Very easy and fast to set up, they will host it on their servers, they offer a 30-day free trial, the interface is easy and it’s free for groups of five or fewer.   I also looked at wikispaces.com, and mediawiki.org, but think I like socialtext the best for my needs.
  • Intermediate Dreamweaver (2007)

    1. 1. Macromedia DreamweaverMacromedia Dreamweaver MX 2004 "Advanced Features" www.freeu.com www.compuskills.com your instructor: matthew wyllyamz m.wyllyamz@gmail.com
    2. 2. 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
    3. 3. Colorado Free UniversityColorado Free University 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?
    4. 4. 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. Colorado Free UniversityColorado Free University
    5. 5. 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
    6. 6. 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 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: how to make this a better classhow to make this a better class
    7. 7. 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 … Colorado Free UniversityColorado Free University how to make this a better classhow to make this a better class
    8. 8. 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
    9. 9. Colorado Free UniversityColorado Free University 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 …
    10. 10. Colorado Free UniversityColorado Free University 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 …
    11. 11. Moving on …Moving on …
    12. 12. Colorado Free UniversityColorado Free University copyright © 2007 by m.wyllyamzcopyright © 2007 by m.wyllyamz
    13. 13. 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
    14. 14. 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 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)
    15. 15. 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)
    16. 16. 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
    17. 17. 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
    18. 18. 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.
    19. 19. 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
    20. 20. 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?
    21. 21. 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
    22. 22. 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.
    23. 23. 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
    24. 24. 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
    25. 25. 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!!!
    26. 26. 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!
    27. 27. 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
    28. 28. 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
    29. 29. 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
    30. 30. 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
    31. 31. 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
    32. 32. Colorado Free UniversityColorado Free University 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)
    33. 33. 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
    34. 34. 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"
    35. 35. 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/200
    36. 36. What is "Web 2.0"?What is "Web 2.0"? Colorado Free UniversityColorado Free University
    37. 37. 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
    38. 38. 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
    39. 39. 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!

    ×