Adobe Dreamweaver CS5 - Illustrated · Adobe Dreamweaver CS5 - Illustrated Unit B: Creating a Web Site A Guide to this Instructor’s Manual: We have designed this Instructor’s

Adobe Dreamweaver CS5 - Illustrated Instructor’s Manual Page 1 of 8

Adobe Dreamweaver CS5 - IllustratedUnit 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 experiencethrough classroom activities and a cohesive chapter summary.

This document is organized chronologically, using the same headings in blue that you see in thetextbook. 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 theircritical thinking skills, and encouraging experimentation within the software.

In addition to this Instructor’s Manual, our Instructor’s Resources CD also contains PowerPointPresentations, 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 studentsup to date with the latest in technology news. Direct students to http://coursecasts.course.com,where they can download the most recent CourseCast onto their MP3 player. Ken Baldauf, hostof CourseCasts, is a faculty member of the Florida State University Computer ScienceDepartment, where he is responsible for teaching technology classes to thousands of FSUstudents each year. Ken is an expert in the latest technology and sorts through and aggregatesthe most pertinent news and information for CourseCasts, so students can spend their timeenjoying technology, rather than trying to figure it out. Open or close your lecture with adiscussion based on the latest CourseCast.

TTTaaabbbllleee ooofff CCCooonnnttteeennntttsssUnit Objectives 226: Planning a Web Site 228: Creating a Folder for Web Site Management 330: Defining a Web Site 432: Adding a Folder to a Web Site 534: Saving a Web Page 536: Copying a New Image to a Web Site 638: Adding New Pages to a Web Site 7End of Unit Material 7Glossary of Key Terms 8


UUUNNNIIITTT OOOBBBJJJEEECCCTTTIIIVVVEEESSSStudents will have mastered the material in Unit B when they can: Plan a Web Site Create a folder for Web site management Define a Web site Add a folder to a Web site

Save a Web page Copy a new image to a Web site Add new pages to a Web site

222666::: PPPlllaaannnnnniiinnnggg aaa WWWeeebbb SSSiiittteeeLECTURE 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.Emphasize the importance of the first step of understanding site goals and needs.

Note that a key activity in the planning process is to set up the basic structure. Make sure studentsunderstand how a wireframe is used to provide a visual representation of a Web site and to show howthe various pages are related. The wireframe 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 toensure that relationships are established and the required content is included.

Review the wireframe shown in Figure B-2 and below. Note how the Web site consists of a home pagerelated to a page for each of the three main categories of the business —Cafe, Spa, and Activities —aswell as an About Us page. Below the Activities page are two additional pages: one about fishing andanother about cruises.

Review the use of folders to organize the many files required to create a Web site. Students need tounderstand that a Web site consists of multiple files — files for the actual Web documents, files forgraphic elements, such as photos, banners, and icons, and files for multimedia elements, such as audioand video. Stress that the creation of an organized file and folder system will make it easier to find filesquickly during Web site development.

Discuss how students will publish the Web sites they create for this book. Make sure that theyunderstand the definition of a Web server and an IP address. Students need to understand that theycannot access a Web site they create from the Internet until they have published it. Direct students to theappendix for more information about publishing a Web site.


FIGURES: B-1, B-2, B-3

BOXES1. Quick Tip: This tip box describes some of the software tools available for creating wireframes.

2. Design Matters: IP addresses and domain names. Explain how using the IP address of192.150.18.200 will bring students to the same site as http://adobe.com. This is a good time toreview the extensions at the end of a domain name, such as .com, .gov, .net, or .edu.

CLASSROOM ACTIVITIES1. Quick Quiz:

a) How many sections are there in an IPv4 address? (Answer: Four)b) 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 theimages they should. What do they think has happened to the linked files? What opinion do the studentshave toward the site because of the “broken links?”

222888::: CCCrrreeeaaatttiiinnnggg aaa FFFooollldddeeerrr fffooorrr WWWeeebbb SSSiiittteee MMMaaannnaaagggeeemmmeeennntttLECTURE 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 wireframe. A Web site can contain manyhundreds of files. If the folder structure used to store these files is easy to understand and use, the Website creation process will generally go much more smoothly than if files are stored in a disorganizedfashion.

Describe the first folder created for a Web site, the local site folder, sometimes referred to as the rootfolder. This folder holds all the files and subfolders for the Web site. In this lesson, students create thelocal root folder for The Striped Umbrella web site.

Advise students that the names of folders and files for Web sites must not contain any spaces or specialcharacters and should include only lower case letters.

FIGURES: B-4, B-5

BOXES1. Quick Tip: Choose a location to store the new folders and files.

2. Trouble: Mention that if you see a drive or folder in the list box in the drop down menu, thisindicates a Web site is not open.

3. Design Matters: Managing files. Students need to understand the importance of having a goodnaming scheme for their folders and files. Stress the importance of not using uppercase letters orspaces in the filenames. This is also a good time to remind students that if they change the locationof a file, that will also have to be changed on their Web pages.


CLASSROOM ACTIVITIES1. 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 assublinks. When do students think they might want to create subfolders?

2. Classroom Discussion: Choose a Web site and begin at the home page. Show how the URLs changeas 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.

333000::: DDDeeefffiiinnniiinnnggg aaa WWWeeebbb SSSiiittteeeLECTURE NOTES Review the steps required to define a Web site by specifying the Web site’s local site root folder

location. Defining the site is essential because it ensures that Dreamweaver can keep track of the linksbetween Web pages and supporting files, such as image files and multimedia files.

Discuss the use of the Files panel in Dreamweaver to display the local site root folder for the Web site.Advise students that the Files panel provides Web designers with a quick way to publish their Web sitesto a remote computer.

FIGURES: B-6, B-7, B-8

BOXES1. Quick Tip: Mention that if students have created another new site since opening Dreamweaver,

their Unnamed Site number might be different.

2. Quick Tip: This tip box describes an alternate way to create a new site.

3. Quick Tip: Explain why it is acceptable to use uppercase letters in a site name.

4. Design Matters: Using the Web as your classroom. Discuss the importance of examining real Websites to learn how to use page elements to convey information.

CLASSROOM ACTIVITY1. Class Activity: If possible, have students bring in their laptops or use a computer lab to complete

this step. If you have access to a Mac and a Windows machine, demonstrate using both versions ofDreamweaver.

333222::: AAAddddddiiinnnggg aaa FFFooollldddeeerrr tttooo aaa WWWeeebbb SSSiiittteeeLECTURE NOTES:

Review the use of subfolders to contain all the non-HTML files required for a Web site. Explainthat creating a folder called “assets” or “images” is a good beginning. Note that complex sites willhave organizing subfolders within this folder to contain all of the graphics files and other elements,such as video clip files and sound files.


Students will use Dreamweaver to create a folder called assets for the Striped Umbrella Web site.

FIGURES: B-9, B-10

BOXES1. Trouble: This tip box addresses the issue of expanding folders to see subfolders.

2. Design Matters: Why name the folder “assets?” Make sure students understand that the name is notas important as the concept of separating non-HTML files that are used on a site. Note that manyWeb designers choose the term “images” instead.

3. Using the Files panel for file management: Describe the use of the Files panel to add, delete, moveor rename files and folders in a Web site. Emphasize the importance of using the Files panel ratherthan other means of working with files.

CLASSROOM ACTIVITIES1. Quick Quiz: 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?

333444::: SSSaaavvviiinnnggg aaa WWWeeebbb PPPaaagggeeeLECTURE NOTES: Discuss the importance of frequently saving work, perhaps every five or ten minutes or after completing

a difficult step. Discuss the use of the Save As command for exercises in this book. Students will open a copy of the existing home page from a folder outside the new Web site, rename

it, and save it in the site root folder for The Striped Umbrella Web site.

FIGURES: B-11, B-12

BOXES1. Quick Tip: Note that the file extension php stands for Hypertext Preprocessor.2. Quick Tip: Mention that the program will automatically add the file extension to the filename.

3. Trouble: This tip suggests clicking the refresh button if index.html does not appear in the Filespanel.

4. Design Matters: Choosing filenames. Discuss the importance of choosing a descriptive name thatreflects the file’s contents. Describe some general rules used for naming Web pages.

CLASSROOM ACTIVITY1. 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 theyare using the latest version of their files. Review the difference between “Save” and “Save As.”


333666::: CCCooopppyyyiiinnnggg aaa NNNeeewww IIImmmaaagggeee tttooo aaa WWWeeebbb SSSiiittteeeLECTURE NOTES: Discuss the importance of copying each image from the original folder to the new folder when

saving a copy of a Web page in a different folder. Describe broken links that will result if this is notdone.

In this lesson, students identify The Striped Umbrella banner source file and copy it to the Website’s assets folder.

FIGURE: B-13

BOXES1. 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, theyshould use the Refresh button.

2. Trouble: Explain that “file” is a reserved word to designate a computer element and thereforecannot be used in the path for an image or a link.

3. Design Matters: This Design Matters box gives reminders about the importance of making a goodfirst impression. Taking time to select fonts that are readable and other elements that are appealingwill be a good investment of the creator’s time. This will be discussed in much greater depth in thenext chapter, but encourage students to notice what they find appealing and useful in Web pagedesign.

4. Design Matters: Planning the page layout. Discuss the importance of targeting a specific client oraudience when designing page layout. Use language that is grammatically correct and on anappropriate reading level. Discuss the use of templates for creating a consistent look and feel.

CLASSROOM ACTIVITY1. Classroom Discussion: How can you test the effectiveness of your Web site? Encourage students to

discuss ways they can self-test their sites and how they might find a good target audience to look attheir sites. If they don’t bring up these checks, they should be reminded to use spell and grammarchecks, check all links (including ones to outside sites), and bring up their page in differentbrowsers and screen resolutions.

333888::: AAAddddddiiinnnggg NNNeeewww PPPaaagggeeesss tttooo aaa WWWeeebbb SSSiiittteeeLECTURE NOTES: Discuss with students how most Web sites consist of more than one page. In fact, many Web sites

contain hundreds of pages. 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 isthe 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

BOXES1. Trouble: This tip box advises care not to delete the file extension when naming or renaming a file.

2. Trouble: This tip box discusses what to do if you accidentally create your new files in the assetsfolder instead of the site root folder.

3. Managing a project with a team. Discuss the importance of defining clear goals and establishingdeliverables, such as a delivery timeline. Explain what is meant by scope creep.

CLASSROOM ACTIVITY1. 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 Website, create an Assets folder, and add at least four pages (make sure one is the index).

EEEnnnddd ooofff UUUnnniiittt MMMaaattteeerrriiiaaalll

Concepts Review – Includes screen identification, multiple choice, and matching questions.

Skills Review – Provides additional hands-on exercises that mirror the progressive style of thelesson material.

Independent Challenges – Case projects that require critical thinking and application of the unitskills.

Independent Challenges 1 and 2 each involve the creation of a new Web site for aparticular company and audience.

Independent Challenge 3 is a critical thinking exercise that requires students use aWeb site to search for information and evaluate the site’s ease of use.

The Real Life Independent Challenge is involves creating a personal Web site. Thestudent must provide his or her own data files, and the Independent Challenge willbuild from unit to unit.

Visual Workshop – This project involves creating a Website to match the layout shown in the text.


GGGlllooossssssaaarrryyy ooofff KKKeeeyyy TTTeeerrrmmmsss wireframe (26) Web server (26) intranet (26) Web server (26) IP (Internet Protocol) address (27) domain name (27) root (28) local site folder (28) Files panel (28) define (a Web site) (30) path (34) templates (37) deliverables(38) scope creep (38)

Top of Document

Adobe Dreamweaver CS5 - Illustrated 1Extra Independent Challenges Unit B

UNIT BCreating a Web Site

EEXXTTRRAA IInnddeeppeennddeenntt CChhaalllleennggee 11Examine the Web site of your school or company. Use Microsoft PowerPoint or another application at yourdisposal to draw a sketch of the wireframe that would have been used in the planning phase to create that Website. How does creating a wireframe help in the planning phase of a Web site?

EEXXTTRRAA IInnddeeppeennddeenntt CChhaalllleennggee 22Two of the most common browsers are Microsoft Internet Explorer and Mozilla Firefox. Using your favoritesearch engine, find two other browsers that may be used to test a Web site. Why is it important to use differentbrowsers to test a site? What are some other factors you should consider when testing a Web site?

Adobe Dreamweaver CS5 – IllustratedSolutions to Adobe Dreamweaver CS5 Unit B EOU Exercises

Unit BCreating a Web SiteTTaabbllee ooff CCoonntteennttss

Skills Review.......................................................................................................................................................................... 3Independent Challenges ...................................................................................................................................................... 4Independent Challenge 1 .................................................................................................................................................... 4Independent Challenge 2 .................................................................................................................................................... 5Independent Challenge 3 .................................................................................................................................................... 6Real Life Independent Challenge....................................................................................................................................... 6Visual Workshop.................................................................................................................................................................. 6


UUnniitt BB:: CCrreeaattiinngg aa WWeebb ssiittee

CCoonncceeppttss RReevviieewwScreen Labeling Matching Items Multiple Choice1. Browse for File icon 8. i 17. b2. Window size drop-down menu 9. h 18. c3. Site home page 10. g 19. b4. assets folder 11. a 20. a5. Local Site folder 12. b6. Refresh button 13. e7. Banner 14. c

15. f16. d


SSkkiillllss RReevviieeww1a. A possible wire frame is shown below.

blooms folderThe completed solution file is shown here.

0index

1Plants

2Workshops

3Newsletter

4Tips


IInnddeeppeennddeenntt CChhaalllleennggeessBecause students may tackle the independent challenges in different ways, it is important to stress that for someIndependent Challenges, there is not just one correct solution.

IInnddeeppeennddeenntt CChhaalllleennggee 11rapids folder

Step a: Possible solution is shown below.

The solution is shown below.

0index

1Our Guides

2Rates

3Lodging

4Before You

Go


IInnddeeppeennddeenntt CChhaalllleennggee 22tripsmart folder

Step a: Possible solution is shown below.

The solution is shown below.

0index

1Newsletter

2Services

3Tour

4Catalog


IInnddeeppeennddeenntt CChhaalllleennggee 33Solutions will vary based on the Web site's content and students’ opinions.Step d: Students should discuss the Search text box.

RReeaall LLiiffee IInnddeeppeennddeenntt CChhaalllleennggeeSolutions will vary based on students’ design ideas.

VViissuuaall WWoorrkksshhooppIn this exercise, students create a Web site using files dwb_5.html for the index (home) page and cc_banner.jpgfor the banner, and adding the files catering.html, classes.html, recipes.html, and shop.html to the site rootfolder, as shown on page Dreamweaver 46. Students’ solutions should match the one shown below.

Adobe Dreamweaver CS5 - Illustrated 1Extra Independent Challenges Unit B Solutions

UNIT BCreating a Web Site

SSoolluuttiioonn –– EEXXTTRRAA IInnddeeppeennddeenntt CChhaalllleennggee 11Students should create a sketch of their school or company’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 shouldexplain that wireframes are helpful in the planning phase of a Web site because they aid visualization ofrelationships between site pages. Wireframes make it easier to generate a logical, organized structure for a Website.

SSoolluuttiioonn –– EEXXTTRRAA IInnddeeppeennddeenntt CChhaalllleennggee 22Students’ answers will vary, but they should identify two browsers other than Microsoft Internet Explorer andMozilla Firefox. Students should explain the importance of testing their site in multiple browsers to ensure thesame look and tone of the Web site across different browsers, and to make sure all elements of the site are easilyviewed. Students should also mention that Web sites should be tested for different screen resolutions and fordifferent connection speeds.

Documents

Adobe Dreamweaver CS5 - Illustrated · Adobe Dreamweaver CS5 - Illustrated Unit B: Creating a Web Site A Guide to this Instructor’s Manual: We have designed this Instructor’s