Adobe Dreamweaver CS6. classroom in a book The official training workbook from Adobe Systems. Instructor Notes

Transcription

1 Adobe Dreamweaver CS6 classroom in a book The official training workbook from Adobe Systems Instructor Notes

2 Adobe Dreamweaver CS6 Classroom in a Book 2013 Adobe Systems Incorporated and its licensors. All rights reserved. If this guide is distributed with software that includes an end user license agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement. The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide. Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner. All sound examples provided with the lessons are copyright 2013 by Craig Anderton. However, purchasers of this book are granted a non-exclusive, royalty-free license to use any of these loops and samples in their own projects, as part of musical compositions. This license prohibits using them commercially, in loop libraries, or in sound libraries of any kind. The video file used in Lesson 16 is courtesy of Harmony Central Inc., and used with permission. Any references to company names in sample files are for demonstration purposes only and are not intended to refer to any actual organization. Adobe, the Adobe logo, Adobe Reader, Acrobat, Audition, Bridge, Classroom in a Book, Dreamweaver, Fireworks, Flash, Illustrator, InDesign, and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Apple, Mac, Mac OS, and Macintosh are trademarks of Apple, registered in the U.S. and other countries. Microsoft, Windows, Windows XP, Windows 7, and Windows NT are either registered trademarks or trademarks of Microsoft Corporation in the U.S. and/or other countries. All other trademarks are the property of their respective owners. Adobe Systems Incorporated, 345 Park Avenue, San Jose, California , USA Notice to U.S. Government End Users. The Software and Documentation are Commercial Items, as that term is defined at 48 C.F.R , consisting of Commercial Computer Software and Commercial Computer Software Documentation, as such terms are used in 48 C.F.R or 48 C.F.R , as applicable. Consistent with 48 C.F.R or 48 C.F.R through , as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA , USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, , and The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference. Adobe Press books are published by Peachpit, a division of Pearson Education located in Berkeley, California. For the latest on Adobe Press books, go to To report errors, please send a note to errata@peachpit.com. For information on getting permission for reprints and excerpts, contact permissions@peachpit.com. Book: ISBN-13: ISBN-10: Instructor Notes: ISBN-13: ISBN-10:

3 Instructor Notes Getting Started The Adobe Dreamweaver CS6 Classroom in a Book course provides students with techniques, tips, and solutions for using HTML, CSS, and the Adobe Dreamweaver CS6 software. These instructor notes are intended to complement the information in the Adobe Dreamweaver CS6 Classroom in a Book and to provide insights and behind-the-scenes information specifically for classroom instructors. The information in these notes is organized to follow the sequence of instructions in each lesson. About the workbooks It is recommended that each student in the class have an individual copy of Adobe Dreamweaver CS6 Classroom in a Book. Students will use this book as you guide them through the lessons. You can buy copies of the Adobe Dreamweaver CS6 Classroom in a Book for your students, or you can refer them to a local bookseller to purchase the book. For additional information, call Pearson Education at Course strategy This book consists of 15 lessons. If you complete one or two lessons a week, students will have time at the end of the semester to work on their own and construct a complete site using the Dreamweaver tools. The lesson exercises are designed to introduce students to the Dreamweaver tools and functions, as well as important concepts in web design. While performing the exercises, the students create a complete website for a fictitious community association and learn how to use and modify Dreamweaver s built-in CSS layouts. You can evaluate each student based on his or her weekly completion of the lesson exercises. Requiring students to design and build their own original websites is a good culmination activity and could serve as the final exam. Managing student projects One way to simplify file storage and cleanup in the classroom is to instruct students to create a main folder named [Student s Name]-web on their hard disk; this folder will contain their website. Then, create a DW-CS6 folder in this student folder to contain all the lesson content. Keeping all the files in this folder will make cleaning up the files easier when the course is complete. Adobe Dreamweaver CS6 Classroom in a Book 3

4 Two methods for completing the course The course can be completed in two different scenarios. The intended scenario requires the student to build an entire website by completing the lessons in order. In this method, lessons must be completed in sequence to build the necessary files for each subsequent lesson. This method simulates the scenario an actual web designer experiences when building a site from scratch. However, this method can be difficult and prone to error, because it relies on the successful completion of each page, component, and asset as the student builds his or her site. Incomplete or incorrectly built components from one lesson may adversely affect a subsequent lesson or actually cause it to fail. To remedy this issue, a second method for completing the course is offered. It is referred to as the jumpstart method. The jumpstart method treats each lesson folder as if it were a complete website that includes all pages and assets needed to complete the specific requirements or goals of the lesson. This method is also a good way to repeat a specific lesson or topic with which a student may be having difficulty. When following the jumpstart method, pages and assets from one lesson folder should not be used in another, unless so directed by the instructions within the lesson itself. Using the jumpstart method, each lesson folder will be defined in Dreamweaver as a standalone website. Therefore, at the end of the course the student may have defined 15 websites, one for each lesson. Additional resources Instructors and users of Dreamweaver rely on a variety of resources to supplement their knowledge of the program. You may find the following resources useful to exploit. Dreamweaver Help The Help feature of Dreamweaver CS6 uses a new AIR-based application that will provide a richer experience for most users and that includes complete descriptions of all the program s features. Since the contents are hosted online, the contents can be updated live and will feature the latest documentation. If you think you may need to access the Help contents offline, you can download the contents as a PDF document to access the information at any time. The Help client also contains links to movies that showcase new CS6 features and techniques. Application DVD The Adobe Dreamweaver CS6 application DVD contains the Adobe Technical Info folder and Quick Reference Card, demo versions of products by Adobe and other manufacturers, and the Adobe Dreamweaver CS6 Software Development Kit. 4 Instructor Notes

5 Adobe CS6 Video Workshop DVD Included with Dreamweaver, this DVD provides 250 instructional movies on Dreamweaver CS6 and other products in Adobe Creative Suite 6. Adobe website The Adobe website ( contains a variety of Dreamweaver training and support resources, including the Adobe Studio Expert Center for Dreamweaver. Many step-by-step tutorials, galleries, and other resources are available here, and the user-to-user forums are great places for students to learn from more experienced users. The Adobe Developer Center ( provides dozens of tutorials and articles from experts and authors in the Adobe community, as well as thoughtful articles about design and technology. Adobe Certified Expert (ACE) program This program is designed to validate an expert skill level with Adobe Dreamweaver CS6. Testing procedures ensure that each ACE-certified student demonstrates expert product knowledge of the current release of Adobe Dreamweaver, resulting in enhanced marketability and credentials for ACE graduates. ACE program training is available through Adobe Authorized Learning Providers (AALP) and selfstudy. For more information about this program, send an to certification@ adobe.com or visit the Adobe website ( Lesson 1: Customizing Your Workspace In Lesson 1, students are exposed to the Dreamweaver program interface and are familiarized with program commands and conventions. Students experiment with different standard workspaces and are shown how to create a custom keyboard shortcut. If time permits, this lesson can be conducted as a hands-on exercise to familiarize students with the Dreamweaver interface. Review questions 1 Why would you use Code view? 2 What is the difference between grouping and stacking panels? 3 What are the purposes of the HTML and CSS modes in the Property inspector? Adobe Dreamweaver CS6 Classroom in a Book 5

6 Review answers 1 Code view gives you direct access to the HTML code for review and editing. 2 When panels are grouped, only one panel is visible at a time. When panels are stacked, all panels can be seen at the same time. 3 The HTML mode provides access to HTML-based tagging and attributes for page content. The CSS mode enables you to access, create, and edit CSS formatting for page content. Lesson 2: HTML Basics Students explore HTML theory and application, and they review the history and future of HTML. They are shown how to create HTML code and a basic webpage by hand in a text editor, exposing them to the language and to basic coding techniques. The same webpage is then re-created in Dreamweaver. By learning how to write HTML by hand, students can easily compare both methods of code creation and get a better understanding of the productively gains they will experience using Dreamweaver. The lesson also includes a table of the most frequently used HTML tags, as well as important background information. Finally, students are introduced to the latest version of the language: HTML5. The concept of semantic web design is described, and several of the new elements are listed. In fact, the subsequent exercises and examples will be based on these new elements and structures. This lesson is an essential foundation for all web design and development. Review questions 1 What are the advantages of using Dreamweaver over hand-coding? 2 What tag can be used to apply formatting inline, within another element? 3 How is an entity used in HTML? Review answers 1 Dreamweaver provides numerous productivity enhancements over handcoding, such as code hints, a WYSIWYG interface, and debugging features, to mention a few. 2 The <span> tag is intended for applying formatting inline. 3 An entity allows you to enter characters that are not mapped directly to the keyboard, such as,, and. 6 Instructor Notes

7 Lesson 3: CSS Basics Lesson 3 provides an overview of cascading style sheets (CSS). Students should be made aware that a movement was made over 12 years ago to separate the structure and content of webpages from their formatting. CSS was the technology that sprang from that endeavor. This lesson gives students an essential understanding of this important language. HTML vs. CSS formatting Students compare and contrast side-by-side formatting applied via HTML and CSS. This exercise demonstrates the advantages of CSS-based formatting over HTML-based formatting. CSS box model An essential concept to CSS is the box model, for it is the basis for all webpage formatting and construction today. To achieve a successful outcome for page design and development using CSS, students must understand how this model works and is applied. This concept is a difficult one for most people. You may want to create additional exercises to help develop this understanding. HTML defaults It is vital that students appreciate the concept that HTML exists complete and apart from CSS. HTML elements all possess built-in formatting that frequently must be overridden by CSS. This exercise describes how HTML default formatting can impact web design. Formatting text This exercise provides an in-depth exploration of CSS-based text formatting. It defines and describes the proper construction of CSS rules and how CSS formatting is applied and affected by the cascade, inheritance, descendant, and specificity theories. The student is also introduced to the Code Navigator to learn how to check and troubleshoot CSS formatting. Formatting objects In the past, most webpage layouts were built using tables. These techniques have been replaced with layouts based on <div> and other elements formatted by CSS. This hands-on exercise takes the students through this concept step by step, illustrating this important concept. They will learn how CSS can control the width, height, borders, backgrounds, margins, padding, and positioning of HTML elements. Adobe Dreamweaver CS6 Classroom in a Book 7

8 P Note: This concept is continuously reinforced throughout the subsequent lessons. Multiples, classes, and IDs, oh my! CSS rules can be built by combining multiple (compound) tags and custom classes and IDs to target formatting to a specific instance of an HTML tag or to a specific element in context. This concept is essential to a complete understanding of CSS and its pivotal role in web design and development today. Before proceeding to subsequent lessons, you may need to repeat these examples and test the students understanding. Be prepared with your own examples of CSS-based formatting using compound selectors, classes, and IDs. CSS3 overview and support This section introduces the student to the advances that are being incorporated into the new version of CSS. Students are also apprised of the usability of CSS3 today. A sample file illustrates just a few of the amazing new features. Review questions 1 What is a disadvantage of using HTML-based formatting? 2 What theory decides which formatting wins when two CSS rules collide? 3 What s the difference between margins and padding? Review answers 1 HTML-based formatting must be applied to each element and page manually, which decreases productivity. 2 Specificity is the theory that decides which rule wins during a conflict. 3 Margins add space outside of the element border; padding adds space within the element border. Lesson 4: Creating a Page Layout In Lesson 4, students are walked through the various steps needed to develop their own website design from scratch. Basics, thumbnails, and wireframes Students are given a broad overview of all the concepts that must be considered in a comprehensive site design. Reinforce the notion that a website design must consider multiple aspects, including site purpose, customer demographics, and accessibility. Have students choose a basic site theme, such as entertainment, information, sales, or other, and then use Google or Yahoo to conduct a search for two or more sites serving this need. Have them analyze the design and content of each site and 8 Instructor Notes

9 compare and contrast them. Finally, have the students, individually or as a group, rate the sites success or failure at achieving their goal. Give the students blank sheets of paper. First, have them make an inventory of pages and page components they will need for their site. (Note: The list may vary from page to page.) Then, have them sketch out their own design concepts, incorporating the previously listed components. Have each student produce at least two variations on their basic designs. Discuss the advantages and disadvantages of each concept. If there is time, you may want to demonstrate how to use Adobe Fireworks or Adobe Photoshop to create a mockup or proof-of-concept of a student s design. Since the students may not be experienced with these products, you may want to perform this demonstration yourself. Previewing your completed file The student will open a file (saved within the lesson folder) that has been completed according to goals within the lesson or exercise. In many exercises, these completed files are provided as an example of the goal of the lesson or exercise; they are usually saved within the specific lesson folder. Briefly describe the concepts and goals that will be taught in the lesson while the file is open. You may want to leave this file open during the entire lesson so students can refer back to it. In most cases, the completed file should not be used in place of the final page. Modifying an existing CSS layout To save time, students will select and modify a built-in CSS layout. Explain that this is a recommended starting point for all beginning web designers, since the basic structure and CSS is already built and tested. If there is time, explore other CSS layouts and provide suggested uses for some. During this lesson, the student will learn more about the new movement for semantic web design, and about using new HTML5 elements built specifically for certain purposes, like navigation menus and text content. An explanation is also provided on how to substitute HTML5 constructions for equivalent HTML 4 elements for users who desire or require more backward compatibility. P Note: To prevent the completed pages from being reformatted by changes to the CSS or inserted images, these pages may not be linked to the style sheets or other desired assets. Working with content and formatting The student works step by step through the process of building a complete webpage design. They learn how to insert a background graphic and a new HTML5 <nav> element. They modify the basic page structure by changing the width of an existing CSS rule. Refer back to what they learned in Lesson 3 regarding formatting objects with CSS and how it relates to the current layout. Adobe Dreamweaver CS6 Classroom in a Book 9

10 When the students modify the vertical menu, have them switch to Code view or Split view to examine the structure of the code. If necessary, refer them back to Lesson 2, regarding the basic structure of an HTML unordered list and how it relates to the menu structure. Inserting placeholder content Students start to build their site template by inserting placeholder elements for pictures and text. Explain how these elements allow them to structure and style the page even before the content is ready for the site. Modifying the footer Students add copyright information in the footer <div>. This is good moment to discuss copyright, fair use, and other content restrictions. Checking browser compatibility Reinforce the previous concept of browser display differences and incompatibility issues. Refer back to Lessons 2 and 3. Review questions 1 How does Dreamweaver treat AP divs differently than ordinary divs? 2 How can you create a hyperlink placeholder? 3 What is an image placeholder? Review answers 1 When an AP div is inserted, Dreamweaver assigns it a custom ID and creates a corresponding CSS rule. 2 Insert the hash mark (#) in the hyperlink URL field to create a hyperlink placeholder. 3 An image placeholder is an element that Dreamweaver can insert into the layout to hold the spot for an image that may not be available at the moment. Lesson 5: Working with Cascading Style Sheets In Lesson 5, students delve into Dreamweaver s styling tools and explore CSS more deeply. Students learn how to create and apply CSS rules, create descendant selectors and custom classes, attach an external style sheet, and create a separate style sheet for print applications. 10 Instructor Notes

11 Working with the CSS Styles panel Students use the CSS Styles panel to create and edit CSS rules. Students will also learn how to reorder CSS rules within the panel. Reinforce the concepts of the cascade, inheritance, descendant, and specificity theories from Lesson 3, and reinforce that the order of rules within the panel can affect how they format the page content. Creating new CSS rules Students will add new CSS rules throughout the book. Most of the new rules will use descendant selectors. Students will enter specifications for the rules using a variety of methods. Reinforce good technique and careful attention to detail. Be sure that the students identify the proper fields they need to access and that they understand the various units of measurement that are offered in Dreamweaver and supported in HTML and CSS. At the appropriate time, discuss the advantages and disadvantages of using fixed measurements, relative measurements, and both. Building and formatting an interactive menu This exercise is a good opportunity to examine how to use modern CSS techniques to create an interactive navigation bar. Take this moment to examine the interactive nature of the vertical menu and compare it to the horizontal menu as you build and format it. Differentiate the default nature of HTML hyperlinks and the ability to control and modify these behaviors using CSS. Modifying hyperlink behavior Discuss the default hyperlink behavior with the students, and emphasize how these behaviors, and others, can be modified by CSS. Remind the students of the four hyperlink pseudoclasses they just learned. Creating faux columns This exercise is a good opportunity to discuss the limitations of HTML and CSS for creating custom or pixel-perfect layouts, and to discuss how to use different techniques to create advanced web layouts. Creating external style sheets for multiple media The power of CSS is in the ability to format an entire website from one or more external CSS files. Students are shown how to move internal CSS rules to a separate external style sheet and then how to convert a style sheet for screen media to one for print or other applications. Adobe Dreamweaver CS6 Classroom in a Book 11

12 Review questions 1 What three ways can CSS styling be used to format content? 2 What happens if you change the ID assigned to an AP div? 3 How is an AP div different from an ordinary div? 4 What is a pseudoclass? 5 Describe the default behavior of a hyperlink. Review answers 1 CSS styling can be applied as an external linked file, as an embedded style sheet, or inline in the element itself. 2 Dreamweaver will automatically rename the corresponding CSS rule. 3 AP divs are positioned at specific coordinates on a webpage and are assigned a CSS rule as soon as they are created. If you change the ID on an AP div, Dreamweaver will change the name of the CSS rule to match it. 4 A pseudoclass is a predefined state of a specific HTML element that can be formatted using CSS rules, such as a:link, a:visited, a:hover, and a:active. 5 Hyperlinks are formatted in blue and appear with an underscore by default. If you move the mouse cursor over the hyperlink, the browser displays a hand icon. If the page contains a link that has already been visited, it will be displayed in a different color than links that haven t been visited. Lesson 6: Working with Templates In Lesson 6, students learn how to increase productivity by creating and using templates, library items, and server-side includes. Creating a template from an existing layout In this exercise, students save their existing layout as a site template. The template file is automatically moved into a templates folder and given the extension.dwt. Point out that Dreamweaver rewrites any existing hyperlinks since the file is now stored in a subfolder. Reinforce the concept that pages built from this template can be updated automatically by Dreamweaver whenever any changes are made to the file and saved. 12 Instructor Notes

13 Inserting editable regions Review the basic design of the site pages based on the completed file provided in the lesson. Identify the editable regions and the areas that are locked, and the reasons why. Note that only the aside section of the sidebar is editable, and note what limitations, if any, may be imposed by that design. List some alternative ways of designing the page that would accommodate the vertical menu within the template and allow it to be updated on each child page. Producing child pages All pages for the website project will be developed from child pages of this template. Be sure to demonstrate that site templates can be accessed from the Assets panel as well as the New Page dialog box. Updating a template Changes made to both editable and locked regions of the template are compared in this exercise. It is important for students to understand that the template will update only areas within locked regions. Content inserted into editable regions of the child pages will not be altered when templates are updated. Using library items Library items have all the benefits of templates, allowing users to create website components that can be deployed to multiple pages but still be updated automatically. Be sure to explain that library items can be made from any type of content or code and that they do not need to be interactive or based on a Spry widget. It is important to point out that when updating library items site-wide, all affected pages must be saved and uploaded too. Emphasize that the code for the library items is wholly contained in the dependent page and that the library items themselves and their folder do not need to be uploaded to the remote site. Using server-side includes Students will explore the use of server-side includes (SSIs). SSIs are more powerful than library items because they are loaded dynamically when the containing page is called by the browser. That means that to update the content of all instances of the component, only the SSI itself has to be uploaded to the remote site. It should be pointed out that SSIs have a few disadvantages, too: They have to be loaded by a compatible server application that may not be available on your local computer, making testing locally difficult if not impossible. Adobe Dreamweaver CS6 Classroom in a Book 13

14 You have to use a file extension that supports SSIs, such as.asp,.cfm,.php, or.shtml. Loss or damage of the SSI on the server will eliminate the content from all dependent files. Review questions 1 What is an editable region? 2 How many editable regions does a template have automatically? 3 How are child pages updated? 4 Do you have to update child pages each time you save a template? 5 What is the main advantage of a server-side include? Review answers 1 An editable region is a user-designated area of the webpage that is not locked and not updated by the template, where you can insert unique content on child pages. 2 A template starts off with no editable regions. 3 Child pages can be updated automatically each time the template is changed and then saved. Or, you can manually update child pages. 4 No. You don t have to update each time you save changes to a template. 5 Server-side includes are loaded each time a page is called. So to update the entire website, only one file needs to be uploaded. Lesson 7: Working with Text, Lists, and Tables In Lesson 7, students learn how to add text content, including HTML lists and tables, to their child pages. Importing and formatting text Students learn how to import text content from an RTF file and to apply HTML heading and paragraph tags using the Property inspector. Explain to the students the hierarchy of HTML headings (<h1>, <h2>, <h3>, and so on) and how the number and application of these headings can affect page ranking by search engines. 14 Instructor Notes

15 Demonstrate how Dreamweaver s ordered and unordered list buttons actually create and apply specific HTML code markup to the text. Have the students experiment with applying and removing the list formatting and examining the markup in Code view or Split view. You may want to assign an additional activity to make a nested list so students can see how the markup is modified. A goal of this lesson is to indent some text content. There are several methods for doing this. Some web designers would use the <blockquote> tag to indent the text for the contact_us.html page. Discuss how the <blockquote> tag has been used incorrectly to indent text in the past, but how it has a specific semantic value for identifying quoted material. If you want to adhere to web standards, it shouldn t be used simply to indent text. Evaluate the merits of other methods for indenting text, such as using a custom class or a <span> tag, and work the discussion around to web standards and the benefits of or drawbacks to supporting them. Creating and styling tables Students learn how to create and format the size and structure of a table. Explain that CSS styling should be used in most instances, but that HTML specifications are still appropriate in limited applications. This is a good time to point out that Dreamweaver doesn t provide all CSS properties within its dialog boxes, but that you can specify any valid property and value in the CSS Styles panel or directly within the CSS file itself. You may want to mention that Dreamweaver code hints work for all valid properties and values. Spell checking webpages The content imported in this lesson contains several words purposely misspelled. Alert the students to not correct these errors manually in this exercise. Mention that misspelled words detract from the professionalism and credibility of a website and its content. Students will learn how to use Dreamweaver s spell check feature to locate and correct such errors. Finding and replacing text The Find And Replace dialog box is one of the most powerful features of Dreamweaver. It should be stressed that it can be used for more than finding and replacing simple phrases it can perform complex alterations to code and content. Emphasize its ability to search and replace text, code, and even white space differences across a page, selected pages or folders, or the entire site. Adobe Dreamweaver CS6 Classroom in a Book 15

16 Review questions 1 Can Dreamweaver open an RTF file? 2 Why do you need to put extra paragraph returns between paragraphs before copying and pasting text from other programs to Dreamweaver? 3 How many <h1> tags should be used on each page? 4 To create a text indent, would you use the <blockquote> tag? 5 If you want the entire column of a table to display at a specific width, do you need to apply a custom class to the entire column? 6 Can you add custom terms to the Dreamweaver dictionary for spell checking? Review answers 1 No. Dreamweaver can t open RTF files, but it will launch a compatible program when you double-click a file. 2 If you copy single paragraphs from most programs, they will be inserted into Dreamweaver with break characters <br /> instead of paragraph <p> elements. 3 To follow semantic best practices, only one <h1> tag should be used per page. 4 No. The <blockquote> tag has a specific semantic value, so to comply with web standards, it should be used only to format quoted material. 5 No. Since the entire table column must be the same width, a class only needs to be applied to one cell within the column. 6 Yes. Custom terms can be added while spell checking. Lesson 8: Working with Images In Lesson 8, students learn essential information about raster and vector image basics. Then they add images to their pages and learn how to position them using CSS classes. Students are also introduced to Adobe Bridge, Adobe Fireworks, and Adobe Photoshop. Reviewing web image basics This section is devoted to developing an essential understanding of Web images. The most important concept to emphasize is the relationship of image size and resolution to download speed. Explain that increasing image size creates a larger file and that large files take longer to download. You may want demonstrate how selecting different color palettes during optimization can decrease image size but adversely affect quality. 16 Instructor Notes

17 Inserting images Students explore multiple methods for inserting raster images into their layouts. Emphasize the importance of and principles behind writing good Alt text (alternative text). Two helpful resources are Writing good ALT text ( alt-text-tips) and How to Write Good Alt Text for the Images on Your Web Page ( Adjusting image positions with CSS classes This exercise describes the creation and application of CSS positioning with custom classes. Explain that CSS allows you to control the placement of images across the entire site at once. Explain that HTML positioning attributes have been deprecated in HTML5, must be changed one by one directly on the page itself, and don t offer fine control. Working with the Insert panel The Insert panel is a productivity tool that has been available in Dreamweaver for a long time. It gives users instant access to important commands for inserting a variety of code and components using a single click. It provides eight preset categories and one that s customizable. Take time to explore all the categories, and demonstrate how the students can add specific selected tools to the Favorites category as desired. Using Adobe Bridge and working with Photoshop Smart Objects Adobe Bridge is a standalone application (installed automatically with Dreamweaver or the Creative Suite) that enables users to view the contents of various proprietary and open-source file types. It simplifies the workflow between all the Creative Suite applications. In this exercise, students use Bridge to access folders within the site and to choose images to insert into the webpage. Students are walked through the process of using Photoshop Smart Objects. Students learn that Smart Objects maintain a connection to a copy of the original Photoshop image. They allow you to use the same image multiple times at different sizes and configurations and then resize the image live within the layout as desired. Copying and pasting and using drag and drop with images Students explore using copy and paste, as well as drag and drop, to insert images. Copy and paste allows you to move individual layers from a Photoshop file to a Dreamweaver layout. It s probably a good time to discuss the advantages and disadvantages of these workflows. For example, the speed and convenience of these methods may not outweigh the availability of the full toolset of Photoshop or Adobe Dreamweaver CS6 Classroom in a Book 17

18 Fireworks. Students should be cautioned that drag-and-drop placement may insert images in the wrong position in the code. Optimizing images with the Property inspector Dreamweaver has a set of built-in graphics tools that can be accessed via the Property inspector. These tools give the user the ability to perform specific image editing tasks, such as cropping, sharpening, and resampling, among others, directly within Dreamweaver. You may want to review the basic concepts of raster images, described at the beginning of the lesson. Remind the students of the connection between image size, resolution, color space, and display quality. Review questions 1 What vector-based image format is supported on the web? 2 What effect does increasing compression on a JPEG image have? 3 Can you insert a 300 ppi image on your webpage? 4 Can you copy and paste a multi-layer Photoshop file? 5 In the Property inspector, what does it mean if there is a circular arrow by the image Width and Height values? 6 What is a hotspot used for in Dreamweaver? 7 If you reduce the size of an image using the Resample tool, can you restore the image to its original size later? Review answers 1 Scalable Vector Graphics (SVG) is the only vector graphic format supported on the web. 2 In most cases, increasing image compression decreases file size, but it may also decrease image quality. 3 Yes, but the image would be much larger than necessary. The maximum resolution of the web is 72 ppi. 4 You can copy only one layer at a time from Photoshop. 5 A circular arrow indicates that the displayed dimensions of the selected image are not the same as the actual dimensions. 6 A hotspot is used to designate an area on an image as a hyperlink. 7 The Resample feature permanently changes the quality of an image. The image can be resized, but it will probably display at unacceptable quality. 18 Instructor Notes

19 Lesson 9: Working with Navigation In Lesson 9, students work with relative and absolute hyperlinks to create both internal and external site navigation. Students learn how to insert and format a Spry menu bar. Hyperlink basics Students review the basics of hypertext navigation to learn the differences between internal and external links, as well as between absolute and relative links. Students learn how to build links, as well as what attributes and values can be applied to them. Creating text- and image-based hyperlinks Students learn how to apply hyperlinks to both text and images. Emphasize to students that both text- and image-based hyperlinks use the same basic code structure. Setting up links Students learn how to create a link to generate a custom . Be sure to discuss with students the limitations of this method it is not recommended, because it relies on client-side software (which may not be installed) and user-based actions to send the . Targeting page elements The default behavior of a hyperlink is to replace the existing browser content with the targeted selection. Students are shown how to change this default behavior so that a new window can be opened to load a specific webpage. Take time to remind students why they should use this method to open a separate window for external links. Suggest other times when this method would be appropriate. Students will also be shown how to create hyperlink destinations using unique ID attributes, and how to set up links to target this internal destination. Inserting Spry menu bars Navigation menus are now universally created using CSS and various HTML components (typically unordered lists). In this exercise, students are led through the process of inserting and formatting a Spry menu bar that will be used as a main navigation component. The menu inserted in this method replaces the existing menu, which was created by Dreamweaver s CSS layout and is not based on a Spry widget. Take time to review the other available Spry widgets and how they can be used. You may want to demonstrate some of the other components that will not be used within the site. A good suggestion is to show the students the Spry widget gallery at to demonstrate some of the possibilities. Adobe Dreamweaver CS6 Classroom in a Book 19

20 Inserting Spry menus as library items In the current layout, the Spry menu is part of the editable region of the template and will not update automatically when the menu or the rest of the template is changed. Discuss the limitations of keeping the Spry menu in this position. Suggest alternative designs that could address this problem. The fix selected in the exercise is to convert the Spry menu to a library item and re-insert it. This is not an ideal solution, but it allows the student to see firsthand the limitations of editable regions and to contemplate their own fixes. You may want to examine the advantages of re-creating the sidebar to move the menu into a locked area of the template. Discuss the pros and cons of this solution. You may want to compare and contrast the previous method to using a server-side include, and explore the advantages of that method over using a library item or even the locked region of a template. Remind students that server-side includes may not be supported by their browser and so, if that is the case, would be difficult to test. Checking your page This exercise allows you to demonstrate some of the other important features in Dreamweaver that help you maintain a website. For example, Dreamweaver has a full set of features that can check links, browser compatibility, and accessibility, among other attributes that web designers and developers should master. Be sure that students know how to use Adobe Online Help for any errors found in the browser compatibility check. Review questions 1 What does URL stand for? 2 What s the difference between an absolute link and a relative link? 3 Why should links be discouraged? 4 Can you apply hyperlinks to images? 5 How can you create navigation to a specific part of a page? 6 What role do id attributes play in hyperlink navigation? 7 Why are server-side applications better than client-side applications? Review answers 1 URL stands for uniform resource locator. 2 Absolute links spell out the entire URL address of a link. A relative link contains only the name of the file and its path information relative to the current document. 3 links depend on software that is installed on the user s computer. 20 Instructor Notes

21 4 Yes. Just select the image and enter the URL into the Link field in the Property inspector. 5 Insert a named anchor at the position you want to jump to. Then, create the hyperlink using the page name (if necessary) and the name of the anchor with a hash mark (#) in front of it. 6 Since an id attribute should be unique, you can use it in the same way as a named anchor. 7 Server-side applications rely on software and scripting that is provided by your own server. Since you can t control what software and services are installed on users computers, you can be more certain that a specific function will work as desired when using your own server-side application. Lesson 10: Adding Interactivity In Lesson 10, students learn about Dreamweaver behaviors and how to use them along with Spry widgets within a layout. Learning about and working with Dreamweaver behaviors This section gives the student a general background in what behaviors can do and how they work. Behaviors are usually dynamic functions created by predefined JavaScripts inserted automatically by Dreamweaver. These functions allow users to add sophisticated actions to their websites without any prior programming or scripting knowledge. Make sure that students know how to pick an appropriate trigger, such as onclick or onmouseover, and how to edit the parameters of any behavior they use. Working with Spry Accordion widgets Students will insert a Spry Accordion widget to add an interactive element to the site. Discuss the advantages of using Spry Accordions to insert large amounts of contents to a page without requiring users to scroll up and down long pages. Review questions 1 Name two available behaviors. 2 Name two possible triggers for a behavior. 3 When you apply a Swap Image behavior to an item, how do you get the original image to return? 4 What does the Preload Images option do? Adobe Dreamweaver CS6 Classroom in a Book 21

22 Review answers 1 Some of the available behaviors are: opening a browser window, swapping images, fading images, growing or shrinking graphics, and displaying pop-up messages. 2 Behaviors can be triggered by onmouseover, onmouseout, onfocus, and onblur, among others. 3 You need to apply a Swap Image Restore behavior. 4 The Preload Images option downloads the images involved in a behavior when the page is first loaded, so that there is no delay in the performance of the behavior. Lesson 11: Working with Web Animation and Video In Lesson 11, students learn how to incorporate Flash animation and Flash video into their site. Understanding web animation and video Major changes have occurred on the web concerning web animation and video. Apple dropped support for Flash on their new ios devices, including the iphone and ipad. This decision sent shockwaves through the web, which had settled on the use of both Flash animation and Flash video for the last ten years. The introduction of Flash video a few years ago revolutionized the way video was delivered via the web and made services like YouTube a reality. Unfortunately, the burden of supporting Flash on a mobile device was too great, and Apple, as well as other manufacturers, decided on a different course. Work has progressed with various web standards organizations to create non-proprietary methods for delivering HTML5-compatible animation and video. In this lesson, students will be exposed to the current techniques for incorporating HTML5-compatible animation and video into their websites. Make students aware that these methods have not been formally adopted by the industry and may change over time. Adding web animation to a page With the loss of Flash as a major standard, Adobe is quickly working on other methods for delivering high-quality web animation. Adobe Edge is a new application that promises to provide much of the capability of Flash animation using HTML5- compatible files and functionality. But Dreamweaver offers a high degree of integration with Flash components, which are still installed on over 90 percent of desktop systems. Flash animation is saved in a SWF file, which will be inserted as alternate content for devices and older browsers that don t support HTML5 animation. 22 Instructor Notes

23 Adding web video to a page Flash video revolutionized the delivery of video content on the web. Before Flash, web designers had to pick from a list of proprietary video formats. Unfortunately, each video format required a proprietary video player too. Files that worked on Macintosh may not have worked in Windows. Users frequently had to download a new player before they could view the video. Flash video changed this overnight. Almost any type of video could be inserted into Flash, saved in the FLV or F4V format, and inserted within a webpage. The Flash player that supported SWF animation would automatically handle the video too. Services like YouTube sprang up and provided easy ways to distribute and view high-quality video. This ease of use and simplicity vanished with Apple s decision to drop support for Flash on ios devices. Instead, the industry is almost back to square one, with multiple video formats fighting for supremacy in the market. In this lesson, students will be introduced to a method for incorporating several HTML5-compatible video formats into their website. They should be made aware that this method has not been formally adopted by the standards organizations and may change in the future. As with web animation, Flash video can be used as the alternate content for old browsers that do not recognize the new HTML5 <video> element. Make sure students are aware that when Flash video (FLV) is added to a webpage, specific JavaScript files as well as the SWF installer are required and must be uploaded to the remote site along with the webpage and the FLV files themselves. Don t forget to remind the students that they can test the video right inside Dreamweaver. Review questions 1 Why shouldn t users rely on Flash animation for their sites? 2 What type of web animation can be used instead? 3 Can you still use Flash video? Review answers 1 Flash animation files are proprietary file formats that are not supported by ios and other mobile devices. 2 Animation created using native HTML5 elements, JavaScript, and CSS, such as that created by Adobe Edge. 3 Yes, as alternate content for older browsers and desktop systems that still support the Flash player. Otherwise, you can insert video using HTML5- compatible structures and resources. Adobe Dreamweaver CS6 Classroom in a Book 23

24 Lesson 12: Working with Forms In Lesson 13, students learn how to design an accessible form that will allow them to collect useful information from site visitors. Learning about forms This section describes general information that explains the purpose of a webbased form, its constituent elements, and the logistics involved in how data can be collected. Inserting a form and form elements In this series of exercises, the students insert a form and populate it with text fields, checkboxes, radio buttons, and other form elements. Students also insert and configure Spry validation elements and learn how to make forms more accessible. Students insert various types of text fields. Be sure to discuss the differences between text, password, , and validation fields. Point out that some settings are applied using HTML attributes, while others are handled by Spry programming using JavaScript. Remind them that all supporting files must be uploaded to the remote server. Guide students through writing sensible error messages for validation elements so that users clearly understand what data is being requested. Advise students that long forms should be divided into logical structures contained in fieldsets. Encourage students to use Code view and Split view when adding fieldsets to the form to ensure that the correct elements are being selected. Submitting forms Students learn how to create a Submit button and a Reset button and to choose a form action. Discuss the disadvantages of sending the form data via . Explain that many people don t use a locally installed application such as Microsoft Outlook or Apple Mail. Instead, they use Internet-based applications, like Gmail or AOL. A better plan is to use a server-based application. However, these are more difficult to implement and require access to the server and to the installed scripts and services running there. Remind the students that such applications will probably require administrative rights on the remote server and some form of or webmail service. The students are led through the process of creating a server-side PHP-based application in a new page that will transmit the form data to a specified address. 24 Instructor Notes