Adobe Dreamweaver CS4 - Illustrated

Transcription

1 Adobe Dreamweaver CS4 - Illustrated Instructor s Manual Page 1 of 8 Adobe Dreamweaver CS4 - Illustrated Unit B: Creating a Web Site A Guide to this Instructor s Manual: We have designed this Instructor s Manual to supplement and enhance your teaching experience through classroom activities and a cohesive chapter summary. This document is organized chronologically, using the same heading in blue that you see in the textbook. Under each heading, you will find (in order): Lecture Notes that summarize the section, Figures and Boxes found in the section, if any, Teacher Tips, Classroom Activities, and Lab Activities. Pay special attention to teaching tips, activities geared towards quizzing students, enhancing their critical thinking skills, and encouraging experimentation within the software. In addition to this Instructor s Manual, our Instructor s Resources CD also contains PowerPoint Presentations, Test Banks, and other supplements to aid in your teaching experience. For students: Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep students up to date with the latest in technology news. Direct students to where they can download the most recent CourseCast onto their MP3 player. Ken Baldauf, host of CourseCasts, is a faculty member of the Florida State University Computer Science Department, where he is responsible for teaching technology classes to thousands of FSU students each year. Ken is an expert in the latest technology and sorts through and aggregates the most pertinent news and information for CourseCasts, so students can spend their time enjoying technology, rather than trying to figure it out. Open or close your lecture with a discussion based on the latest CourseCast. Taabbl lee oof f Coontteenttss Unit Objectives 2 26: Planning a Web Site 2 28:Creating a Folder for Web Site Management 3 30: Defining a Web Site 4 32: Adding a Folder to a Web Site 5 34: Saving a Web Page 5 36: Copying a New Image to a Web Site 6 38: Adding New Pages to a Web Site 7 End of Unit Material 7 Glossary of Key Terms 8

2 Adobe Dreamweaver CS4 - Illustrated Instructor s Manual Page 2 of 8 UNIIT OBJJECTIIVESS Students will have mastered the material in Adobe Dreamweaver CS4 when they can: Plan a Web Site Save a Web page Create a folder for Web site management Copy a new image to a Web site Define a Web site Add new pages to a Web site Add a folder to a Web site 2266: : Plaanni ingg aa Weebb SSi ittee LECTURE NOTES Discuss with students the vital importance of the planning process. A Web site should be planned in as much detail as possible before being created in Dreamweaver. The more time used to plan a Web site, the fewer chances there are for making mistakes that can require considerable time to repair. Discuss the various steps required to plan a Web site. Refer to Figure B-1 to review the steps. Note that the key activity in the planning process is the creation of the storyboard. Make sure students understand how a storyboard is used to provide a visual representation of a Web site and to show how the various pages are related. The storyboard provides the designer with the basis for the entire Web site. The designer should know exactly what pages are required for the Web site before creating them to ensure that relationships are established and the required content is included. Review the storyboard shown in Figure B-2 and below. Note how the Web site consists of a home page related to a page for each of the three main categories of the business Cafe, Spa, and Activities as well as an About Us page. Below the Activities page are two additional pages: one about fishing and another about cruises. Discuss with students how a storyboard for a large Web site can become very complex. Also review what software students could use to create a storyboard. There are a number of programs that are available, including such programs as Inspiration, which is available at Word processing programs such as Microsoft Word or presentation programs such as Microsoft PowerPoint can also be used. In some programs, an organization chart feature is available.

3 Adobe Dreamweaver CS4 - Illustrated Instructor s Manual Page 3 of 8 Review the use of folders to organize the many files required to create a Web site. Students need to understand that a Web site consists of multiple files files for the actual Web documents, files for graphic elements, such as photos, banners, and icons, and files for multimedia elements, such as audio and video. Stress that the creation of an easy-to-use file and folder system is a vital step in the creation of a Web site. A great deal of time is saved during the Web page creation phase of a project if sufficient time is spent organizing an easy-to-use file and folder system. Discuss how students will publish the Web sites they create for this book. Make sure that they understand the definition of a Web server and an IP address. Students need to understand that they cannot access a Web site they create from the Internet until they have published it. Direct students to the appendix for more information about publishing a Web site. FIGURES: B-1, B-2, and B-3 BOXES 1. Quick Tip: This is an opportunity to use a tool such as the Organization Chart in Microsoft PowerPoint or any other software that students have access to. 2. IP addresses and domain names: Using a projection system, demonstrate how using the IP address of will bring students to the same site as This is a good time to review the extensions at the end of a domain name, such as.com,.gov,.net, or.edu. CLASSROOM ACTIVITIES 1. Quick Quiz: 1. How many sections are there in an IP address? (Answer: Four) 2. What is the term for an internal Web site that does not have public access? (Answer: Intranet) 2. Assign a Project: Ask students to find a Web site with broken links to other Web pages or pages that do not display the images they should. What do they think has happened to the linked files? 2288: : Crreeaatti ingg aa FFool lddeerr foorr f Weebb SSi ittee Maanaaggeemeentt LECTURE NOTES: Discuss with students the importance of setting up an easy-to-use folder structure before they start creating the pages for a Web site. This should mirror the storyboard. A Web site can contain many hundreds of files. If the folder structure used to store these files is easy to understand and use, the Web site creation process will generally go much smoother than it would if files are stored in a disorganized fashion. The first folder created for the Web site is called a local root folder. This folder holds all the files and subfolders for the Web site. In this lesson, students create the local root folder and call it striped_umbrella. Advise students that the names of folders and files for Web sites must not contain any spaces or special characters and should generally be typed in all lower case letters. FIGURES: B-4, B-5

4 Adobe Dreamweaver CS4 - Illustrated Instructor s Manual Page 4 of 8 BOXES 1. Design Matters: Students need to understand the importance of having a good naming scheme for their folders and files. Discuss why Web designers use characters such as the underscore. If students do not seem to be facile with this, you might want to spend some time reviewing file management. This is also a good time to remind them that if they change the location of a file, that will also have to be changed on their Web pages. CLASSROOM ACTIVITIES 1. Classroom Discussion: Create a folder within the Striped Umbrella site, such as the cruise folder, and discuss good naming conventions. Create a list of files that might be used in this folder as sublinks. When do students think they might want to create subfolders? 2. Classroom Discussion: Go to a Web site such as that of your school and begin at the home page. Show how the URLs change as you go to subpages. Right click on an image and select Save As. You will see the file name. Notice that the same naming conventions apply to images. 3300: : Deef finingg aa Weebb SSi ittee LECTURE NOTES Review the steps required to define a Web site by specifying the Web site s local root folder location. Defining the site is essential because it ensures that Dreamweaver can keep track of the links between Web pages and supporting files, such as image files and multimedia files. Discuss the use of the Files panel in Dreamweaver to store the local root folder for the Web site, along with a listing of all the files and folders required for the Web site. Advise students that the Files panel provides Web designers with a quick way to publish their Web sites to the Internet. FIGURES: B-6, B-7, and B-8 BOXES 1. Quick Tip: The first Quick Tip gives an alternate way to create a new site. Demonstrate how either method works. 2. Quick Tip: The second Quick Tip explains why the site name can have upper case. Explain that the site name is different than the local root folder. 3. Design Matters: Using a projection system, create a simple Web page (you can use the data files provided in the Independent Challenges) with the same material, but different presentation. Have students evaluate which is most effective. CLASSROOM ACTIVITY 1. Class Activity: If possible, have students bring in their laptops or use a computer lab to complete this important step. If you have access to a Mac and a Windows machine, demonstrate using both versions of Dreamweaver.

5 Adobe Dreamweaver CS4 - Illustrated Instructor s Manual Page 5 of : : Addddi ingg aa FFool lddeerr ttoo aa Weebb SSi ittee LECTURE NOTES: Review the use of subfolders to contain all the non-html files required for a Web site. Remind students that this subfolder is called Assets and will contain all of the graphics files and other elements, such as video clip files and sound files. The text files (HTML files) are stored in the local root folder. Advise students that they will work in the Files panel in Dreamweaver to create a subfolder for the Striped Umbrella Web site. FIGURES: B-9, B-10 BOXES 1. Trouble: This is a good time to review the display between a Mac and Windows machine. 2. Quick Tip: Make sure that students know how to navigate through the Files panel in Dreamweaver. 3. Design Matters: Why name the folder Assets? Make sure students understand that the name is a good term for class purposes to separate non-html files that will be used on your site. CLASSROOM ACTIVITIES 1. Quick Quiz: 1. What Dreamweaver feature should you use to add, delete, move, or rename files and folders? (Answer: Files panel) 2. Critical Thinking: What subfolders might be in the Assets folder? 3344: : SSaavvi ingg aa Weebb Paaggee LECTURE NOTES: Review the steps required to open a data file and then to save the file. Make sure students understand that they must save the data file called dwb_1.html under the new name index.html in the striped_umbrella folder they created in an earlier lesson. Students need to understand the crucial importance of saving files to the correct location when creating a Web site. Discuss the use of index.html as the file name for the home page of the Web site. You can also reinforce this by your display of other Web sites. Remind students that they must not include any spaces, special characters, or punctuation in any file name of a file that will be used as part of a Web site. This rule includes file names for all files, including text, audio, video, and graphic. If a space is included in the file name of a Web page, the Web browser will not load the file correctly. FIGURES: B-11, B-12 BOXES 1. Quick Tip: All pages created in Dreamweaver will be HTML pages (also saved as HTM). Movie, graphic, and audio files must be created in other applications.

6 Adobe Dreamweaver CS4 - Illustrated Instructor s Manual Page 6 of 8 2. Design Matters: Students should understand that different types of servers may access Web files differently. To make sure that you will not encounter problems, use lower case letters and do not begin a file name with a numeric digit. Numbers can be used after the first alphabetical letter in a file name, and using numbers can be very useful. For example, using file names such as flower1, flower2, flower3, and so on can be a very useful naming convention. CLASSROOM ACTIVITY 1. Class Discussion: Ask students how they should proceed in ensuring they have backups of important files, and review the View as Details option to make sure they understand whether or not they are using the latest version of their files. Review the difference between Save and Save As. 3366: : Cooppyyi ingg aa Neew IImaaggee ttoo aa Weebb SSi ittee LECTURE NOTES: Review the definition of the home page as the first page that viewers usually see when they visit a Web site. Some sites have included welcome pages that precede their home pages. Discuss how most Web sites include many other pages that connect back to the home page. In Dreamweaver, the home page is used as the starting point for the site map. In this lesson, students set the index page as the home page of the Striped Umbrella Web site, and then designate the correct location to store the graphics file containing the banner that appears at the top of the home page. Make sure students understand why they need to identify the source of the banner image (so that it is copied to the Assets folder in the striped_umbrella folder). Students need to understand that the path in the Property inspector for the banner image should be assets/striped_umbrella_banner.gif after Step 3 is completed. If this path does not appear, the Web page will appear with a broken link symbol instead of the banner image when the page is viewed in the Web browser. FIGURE: B-13 BOXES 1. Trouble: Using the Refresh button is very helpful in many situations. This will also apply as students make changes in their Web pages. They should understand that if they do not see the changes, they should use the Refresh button. Using the [F5] key also works. 2. Quick Tip: Explain that file is a reserved word to designate a computer element and therefore cannot be used in the path for an image or a link. 3. Design Matters: This Design Matters box gives reminders about the importance of creating design elements that will be appealing and meaningful to your target audience. Taking time to select fonts that are readable and other elements that are appealing will be a good investment of the creator s time. This will be discussed in much greater depth in the next chapter, but encourage students to notice what they find appealing and useful in Web page design. 4. Design Matters: A Web site should be geared to a specific client or audience. Take time to make a good impression. Use language that is grammatically correct and on an appropriate reading level. Make sure that your navigation flows in an organized manner.

7 Adobe Dreamweaver CS4 - Illustrated Instructor s Manual Page 7 of 8 CLASSROOM ACTIVITY 1. Classroom Discussion: How can you test the effectiveness of your Web site? Encourage students to discuss ways they can selftest their sites and how they might find a good target audience to look at their sites. If they don t bring up these checks, they should be reminded to use spell and grammar checks, check all links (including ones to outside sites), and bring up their page in different browsers. 3388: : Addddi ingg Neew Paaggeess ttoo aa Weebb SSi ittee LECTURE NOTES: Discuss with students how most Web sites consist of more than one page. In fact, many Web sites contain hundreds of pages. Each of these pages is saved as an HTML file with the.htm or.html extension. Review the steps required to add new pages to a Web site. Note that students work in the Files panel to add new pages. In this lesson, students add six new pages to the Web site. When they have finished the lesson, the Web site will contain seven pages: the index.html page, which is the home page, and six new pages: about_us.html, spa.html, cafe.html, activities.html, cruises.html, and fishing.html. FIGURES: B-14, B-15 BOXES 1. Quick Tip: When typing in the extension on new pages you create, either.html or.htm may be used. Web servers treat these files the same way, so Web authors can choose either extension. 2. Trouble: Demonstrate the Recreate Site Cache feature. You might also want to take this opportunity to show the Help feature. CLASSROOM ACTIVITY 1. Assign a Project: Preparation for the Independent Challenges If you have access to a lab, or if students bring their own laptops to class, have them Define a Web site, create an Assets folder, and add at least four pages (make sure one is the index). Enndd ooff Unni itt Maatteerri iaal l Concepts Review Includes screen identification, multiple choice, and matching questions. Skills Review Provides additional hands-on exercises that mirror the progressive style of the lesson material. Independent Challenges 1, 2, 3, and 4 Case projects that require critical thinking and application of the unit skills. Independent Challenges 1 and 2 use the data files provided for students. They are both guided. Independent Challenge 3 is a critical thinking exercise that requires students to evaluate the effectiveness of a commercial Web site. Challenge 4 is similar to 1 and 2 except that it requires more independent work. Please note that Challenges 1, 2, and 4 have continued activities in the next units, so if you pick one, you might want to be consistent in succeeding units.

8 Adobe Dreamweaver CS4 - Illustrated Instructor s Manual Page 8 of 8 Visual Workshop A practical project that requires independent problem solving using data files that are provided. Gloossssaarryy oof f Keeyy Teerrmss storyboard (26) assets (26) publish (26) Intranet (26) Web server (26) IP (Internet Protocol) address (26) domain name (27) local root folder (28) Files panel (28) Define (a Web site) (30) Cache (30) File names (34) home page (34) index page (36) templates (36) refresh button (38) Top of Document

9 Adobe Dreamweaver CS4 Illustrated Solutions to Unit B EOU Exercises DW-1 UNIT B: Creating a Web site Table of Contents Unit B: Creating a Web site...2 Concepts Review...2 Skills Review...2 Independent Challenge Independent Challenge Independent Challenge 3 (Design Quest)...3 Independent Challenge 4 (Real Life Independent Challenge)...3 Visual Workshop...3

10 Adobe Dreamweaver CS4 Illustrated Solutions to Unit B EOU Exercises DW-2 Unit B: Creating a Web site Concepts Review Screen Labeling Matching Items Multiple Choice 1 Banner image 8 i 17 b 2 Browse for File icon 9 h 18 c 3 Graphic file in Assets folder 10 g 19 b 4 Assets folder 11 a 20 a 5 Root folder 12 b 6 Refresh button 13 e 7 Panel Options menu button 14 c 15 f 16 d Skills Review Step 1: Students are asked to create a storyboard for the Blooms and Bulbs Web site. Their sketches should resemble the following: Independent Challenges Because students will solve the independent challenges in different ways, it is important to stress there is not just one correct solution. Note also that all Skills Reviews and Independent Challenges in this book are cumulative. If you assign a Skills Review or Independent Challenge in a later unit and the students haven t been doing them all along, you will need to supply the previous unit s solution. This is explained in a paragraph like this one at before every unit s Independent Challenges from Unit B onward:

11 Adobe Dreamweaver CS4 Illustrated Solutions to Unit B EOU Exercises DW-2 Important: If you did not create the following Web sites in Unit and maintain them in Unit(s), you will need to create a root folder for the Web sites in the following exercises and define the Web sites using files your instructor will provide. See the Read This Before You Begin section for more detailed instructions. The Read This Before You Begin section in the text s front matter provides more details on this. Independent Challenge 1 Filename: index.html plus associated structure found in the rapids folder in the solution files Students are asked to create a storyboard for the Rapids Transit Web site. Their sketch should resemble this figure: Their Rapids Transit index page and Files panel should resemble those in Figure B-18 of the text. Independent Challenge 2 Filename: index.html plus associated structure found in the tripsmart folder in the solution files Students are asked to create a storyboard for the TripSmart Web site. Their sketch should resemble this figure:

12 Adobe Dreamweaver CS4 Illustrated Solutions to Unit B EOU Exercises DW-3 Their TripSmart index page and Files panel should resemble those in Figure B-19 of the text. Independent Challenge 3 (Design Quest) In this Independent Challenge, students explore the Audi Web site ( They explore how the information is organized. Independent Challenge 4 (Real Life Independent Challenge) In this Real Life Independent Challenge, students begin to develop an original Web site idea that they work on throughout the units in this text. The site will build from unit to unit. They should turn in a storyboard for their site. It should resemble the storyboard in the previous Independent Challenges but should contain the page names for their site, including an index page and all the pages that they intend to link from it. Their Web site folder should reflect a logical structure, with a root folder, and assets folder, and HTML file for pages. As mentioned in step h, they should also create a paper folder that contains information that they want to use in their sites, such as text and graphics. Visual Workshop Students create the site for Carolyne s Creations Web site, as shown in Figure B-21. The banner icon should be visible, indicating that they have correctly set the path. The folder structure should reflect that shown on the Files panel in the figure.

13 Adobe Dreamweaver CS4 Illustrated Solutions to Unit B EOU Exercises DW-4

14 Adobe Dreamweaver CS4 - Illustrated Introductory 1 Extra Independent Challenges Unit B Solutions UNIT B Creating a Web Site Solution EXTRA Independent Challenge 1 Students should create a sketch of your institution s Web site similar to the one in Figure B-2 in Unit B. The sketch should represent the pages and their relationships to one another within the Web site. Students should understand that storyboards are helpful in that they allow you to visualize the relationships between pages in the site. Solution EXTRA Independent Challenge 2 Students answers will vary. Students should explain the importance of testing their site in multiple browsers to ensure the same look and feel of the Web site across different browsers. Students should also mention that Web sites should be tested for different screen resolutions and for different connection speeds.