This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
1 2 3 4 5 6 7 8 9 079 10 09 08 07 06 05 Macromedia, Dreamweaver, and all other Macromedia names and logos are registered trademarks of Macromedia Corporation and are used with permission. All other brand names and product names are trademarks or registered trademarks of their respective companies. Between the time that Web site information is gathered and published, it is not unusual for some sites to have changed URLs or closed. URLs will be updated in reprints or on the book’s Web site when possible.
About the Authors Mark Evans is a District Instructional Technology Teacher in the Klein Independent School District Educational Technology Department in Houston, Texas. He provides Technology Applications Curricula support for grades K–12. Mark has published articles on professional development, mobile computing, and online learning in journals such as TechLearning.com and Organization for Educational Technology and Curriculum. He is an active member of the Texas Computer Education Association, International Society for Technology in Education, and Computer Science Teachers Association. He holds an MA in Education in Curriculum and Technology from the University of Phoenix, and has over twenty years of experience in the field of education.
Michael Hamm is a Web and graphic designer in Houston, Texas. He has served as a technical editor for the Web design books Illustrator CS Most Wanted: Techniques and Effects & Extreme Photoshop CS. He is an online instructor of Adobe Illustrator and illustration classes at Sessions.edu online school of design. He has been featured in design publications such as Graphic Design Portfolio-Builder: Adobe Photoshop and Adobe Illustrator Projects and Webworks: Typography. He is an active member of the American Institute of Graphic Arts (AIGA) and AIGA’s education committee, and has over a decade of professional experience in the field of interactive design. He holds a diploma in graphic design from the Art Institute of Houston.
Academic Review Board Randy Landry Web Page Design Instructor Oconee County High School Watkinsville, Georgia
Polly White Web Page Design Instructor Wawasee High School Syracuse, Indiana
Linda H. Robinson Web Design and Computer Applications Instructor Winter Haven High School Winter Haven, Florida
Diane Williamson Technology Coordinator and Computer Instructor Raleigh Egypt Middle School Memphis, Tennessee
Douglas M. Bergman Porter-Gaud School Charleston, South Carolina
Sylvia Knapp Phillip O. Berry Academy of Technology Charlotte, North Carolina
Mark Sheinberg Santa Susana High School Simi Valley, California
Steve Feld John F. Kennedy High School Bronx, New York
Michael Perry Chapel Hill High School Douglasville, Georgia
Marilyn Turmelle Booker T. Washington High School Tulsa, Oklahoma
Leslie Keller Fuquay Varina High School Fuquay Varina, North Carolina
Courtney Smith Boise High School Boise, Idaho
Jennifer Wegner Mishicot High School Mishicot, Wisconsin
Marsha Bass, M.S.Ed. Instructor Kaplan University, College of Arts and Sciences Elkhart, Indiana Gordon Howard Business Education Instructor Bonneville High School Idaho Falls, Idaho
Academic Reviewers
Technical Reviewers Charles Robert Paige Visual Communication Designer, Senior Instructor Minnesota School of Business and Globe College Oakdale, Minnesota
Stacy Sherman Business and Technology Instructor Florida Technical Center and Magnet High School Coconut Creek, Florida
iii
Why Study Web Design? Be an Active Reader Take the Web Design Challenge! Hardware and Software Technology Standards Technology Handbook
xv xvi xviii xxi xxii H1
Fundamentals of Web Design
2
Web Basics
4
●
Section 1.1 Introduction to the Web The Internet and the World Wide Web How the Web Works Types of Web Sites Section Assessment
●
Section 1.2 Elements of a Web Page Common Web Elements Text, Graphics, and Multimedia Hyperlinks Section Assessment
●
Section 1.3 Web Site Development The Web Site Development Process Web Site Development Careers and Skills Section Assessment
●
6 6 7 8 10 11 11 12 13 14 15 15 18 19
Section 1.4 An Introduction to Dreamweaver The Dreamweaver Interface Viewing Web Pages in Dreamweaver Section Assessment
21 21 23 26
Chapter 1 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
27 28 30 32 33
iv
Table of Contents
Computer Basics
●
Section 2.1 Computer Hardware and Software Computers and the Computer System Hardware: Processing Components Hardware: Input and Output Devices Hardware: Storage Devices Types of Software Cross-Platform Issues Section Assessment
34 36 36 37 38 39 40 42 42
●
43 43 44 45 46
Section 2.3 Creating a Basic Web Site Creating and Saving a Web Page Adding Text to a Web Page Adding Graphics to a Web Page Creating Subpages Section Assessment
●
48 48 51 52 55 56
Chapter 2 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
57 58 60 62 63
Section 2.2 Networks Types of Networks Types of Connections Network Hardware and Software Section Assessment
Online Basics
●
Section 3.1 The Internet Origins of the Internet How the Internet Works Internet Resources Intranets and Extranets Section Assessment
●
Section 3.2 The Web Uniform Resource Locators (URLs) Using a Web Browser Locating Information Online Section Assessment
●
Section 3.3 Web Site Development Tools Software Needs Hardware and Connectivity Needs Linking to Online Resources Section Assessment
Section 3.4 Social, Ethical, and Legal Issues The Internet and Society Protected Information and the Web Section Assessment
84 84 85 88
Chapter 3 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
89 90 92 94 95
HTML Basics
96
Section 4.1 HTML Coding HTML Tags HTML Guidelines and Standards Section Assessment
●
98 98 100 101
●
102 102 103 104 106 108 108
Section 4.2 Using a Text Editor Organizing Files and Folders Using Notepad Adding Attributes Using HTML Creating Lists Using HTML Viewing an HTML Page Section Assessment
●
Section 4.3 Enhancing and Testing Your Page Adding Images Using HTML Inserting Links Using HTML Testing a Web Page Section Assessment
109 109 110 113 114
●
Section 4.4 Dreamweaver versus Notepad Adding Color and Formatting Text in Dreamweaver Adding Graphics and Links Testing a Web Page Section Assessment
116 116 120 122 122
Chapter 4 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
Table of Contents
123 124 126 128 129
v
Designing Web Sites
132
Planning a Web Site 134
●
Section 5.1 Creating a Mission Statement Determining Purpose and Goals Determining the Audience Writing a Mission Statement Section Assessment
136 136 137 138 139
●
140 140 143 145
Section 5.3 Storyboarding Your Site Storyboarding Drawing a Site’s Navigation Structure Creating Sketches of Individual Pages Web Site Planning Checklist Section Assessment
●
146 146 147 149 150 151
Chapter 5 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
153 154 156 158 159
Section 5.2 Navigation Schemes Types of Navigation Schemes Viewing a Web Site’s Navigation Scheme Section Assessment
Developing Content and Layout 160
●
Section 6.1 Creating Web Site Content 162 Writing for the Web 162 Developing Content for a Web Page 164 Section Assessment 165
●
Section 6.2 Placing Items on a Page Page Layout Guidelines Web Page Dimensions Section Assessment
●
Section 6.3 Creating a Page Template 171 Designing a Template 171 The Language Club Logo 174 Tables 175 Section Assessment 176
●
Section 6.4 Enhancing the Template Navigation Buttons Footer Information Section Assessment
177 177 179 182
Chapter 6 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
183 184 186 188 189
Selecting Design and Color
●
Section 7.1 Principles of Presentation Design Consistency and Repetition Using a Template Section Assessment
●
Section 7.2 Choosing Colors Color Scheme Guidelines Web-Safe Colors Section Assessment vi
Table of Contents
167 167 169 170
190 192 192 193 197 198 198 199 201
●
Section 7.3 Fonts and Typography Formatting Text in a Web Site Formatting Guidelines Formatting Text in Dreamweaver Section Assessment
202 202 206 208 209
Chapter 7 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
211 212 214 216 217
Enhancing a Web Site
Adding Multimedia to a Web Site 250
220
Using Web Graphics 222
●
Section 8.1 Web Graphic Types and File Formats Types of Graphics Graphic File Formats Compression Schemes and Download Times Section Assessment
224 224 225 226 227
●
Section 9.1 Multimedia and Web Design Multimedia Design Guidelines Downloading Multimedia Files Tools for Creating Multimedia Web Sites Evaluating Multimedia Web Sites Section Assessment
●
252 252 254 255 255 256
●
Section 9.2 Adding Audio and Video to a Site Audio and Video Files Creating and Adding Audio Files Creating and Adding Video Files Section Assessment
●
Section 9.3 Adding Animation to a Site Animation Files Incorporating Animation Files into a Site Adding Flash Buttons Section Assessment
265 265 266 267 268
Chapter 9 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
269 270 272 274 275
Section 8.2 Obtaining and Modifying Graphics 228 Obtaining Graphics 228 Inserting Graphics into Dreamweaver 230 Modifying Graphics 231 Section Assessment 235 Section 8.3 Image Maps and Web Albums Image Maps Creating a Web Photo Album Using Fireworks Section Assessment
237 237 240 242
Chapter 8 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
243 245 247 248 249
258 258 260 261 264
●
Table of Contents
vii
Adding Interactivity to a Web Site 276
●
Section 10.1 Scripting and Markup Languages Scripting and Interactivity Scripting Languages Markup Languages Section Assessment
●
Section 10.2 Adding Dynamic Effects Banner Ads Update Information Using DHTML Behaviors Section Assessment
●
278 278 279 280 281 283 283 285 286 291
Section 10.3 Adding a Form to a Web Site Forms and Their Components Form Fields Adding Dynamic Effects to a Form Section Assessment
292 292 292 297 298
Chapter 10 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
299 300 302 304 305
The Web Site Development Process
●
viii
Table of Contents
321 321 322 323 326
Chapter 11 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
327 328 330 332 333
Developing a Web Site
308
Project Planning 310 Section 11.1 The Project Life Cycle Overview of the Project Life Cycle Tasks in the Project Life Cycle Forming a Project Team Evaluating Progress Section Assessment
●
Section 11.2 Determining Project Scope Analysis and Planning The Business of E-commerce Designing an E-commerce Site Section Assessment
312 312 313 314 316 319
●
334
Section 12.1 Examining an E-commerce Web Site 336 Examining the MyDiskDesigns.biz Site 336 Cascading Style Sheets 339 Section Assessment 341
●
Section 12.2 Using Feedback Forms Feedback Forms Adding Preset Choices for Visitors Section Assessment
●
Section 12.3 Web Site Privacy and Security Web Site Privacy Web Site Security Section Assessment
●
342 342 344 346 348 348 351 352
Section 12.4 Web Site Accessibility Web Site Accessibility Validating Accessibility in Dreamweaver Section Assessment
353 353 355 356
Chapter 12 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
357 358 360 362 363
Adding Web Site Functionality 364
●
Section 13.1 Tracking Visitors and Collecting Information Tracking a Web Site’s Visitors Connecting Web Sites and Databases Section Assessment
366 366 368 369
●
Section 13.2 Making Information Easy to Find Search Features Frequently Asked Questions Pages Section Assessment
371 371 373 374
●
Section 13.3 Building a Sense of Community Sharing Information with Visitors Receiving Information from Visitors Section Assessment
Chapter 13 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
385 386 388 390 391
Table of Contents
ix
Publishing a Web Site
●
Section 14.1 Web Servers The Technical Needs of a Web Server Web Hosts Section Assessment
●
Section 14.2 The Publishing Process Naming a Web Site Reviewing Page Files and Folders Transferring Files to a Server Testing a Published Web Site Section Assessment
392 394 394 395 397 398 398 399 401 403 403
●
Section 14.3 Results and Site Reports in Dreamweaver 405 Site Reports 405 Running Reports in a Web Site 406 Section Assessment 409
●
Section 14.4 Promoting a Web Site Publicizing Web Pages Increasing Web Site Traffic Using Cookies for Targeted Marketing Section Assessment
410 410 413 414 414
Chapter 14 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
415 416 418 420 421
x
Table of Contents
Maintaining a Web Site
●
Section 15.1 Web Server Maintenance Maintaining a Web Server The Role of the Webmaster Section Assessment
●
Section 15.2 Updating Information Guidelines for Updating a Site Managing and Archiving Web Pages Section Assessment
●
422 424 424 427 427 429 429 430 432
Section 15.3 Keeping a Web Site Secure Controlling Access to a Site Ethics and Webmastering Section Assessment
433 433 435 436
Chapter 15 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
437 438 440 442 443
Advanced HTML
446
HTML Tables and Frames 448
●
Section 16.1 Creating Tables in HTML Defining a Basic Table Using Table Attributes Section Assessment
●
Section 16.2 Creating Frames in HTML Creating Frame Pages in HTML Creating Links Between Frames Section Assessment
●
450 450 451 454 456 457 460 461
Section 16.3 Cascading Style Sheets CSS and HTML Using CSS for Page Layout Section Assessment
462 462 465 466
Chapter 16 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
467 468 470 472 473
HTML, Scripting, and Interactivity 474
●
Section 17.1 Adding Interactivity Using HTML Adding Multimedia Elements Creating a Registration Form Forms in CSS Section Assessment
Chapter 17 Review Review and Assessment Activities Skills Studio Projects Web Design Projects
487 488 490 492 493
Appendix A Dreamweaver® Reference Guide Appendix B HTML Reference Guide Appendix C Web-Safe Color Reference Guide Appendix D Web Design Rubric Glossary Index Image Credits
496 502
Table of Contents
xi
506 508 510 520 528
1A View a Web Site in a Web Browser 1B Open a Web Site in Dreamweaver 1C Use Different Views and Close Dreamweaver
13 23
2A 2B 2C 2D
Create a One-Page Web Site Insert and Format Text Insert Graphics Create a Subpage
49 51 52 55
3A 3B 3C 3D
Preview a Web Page Perform a Boolean Search Insert External Hyperlinks Add a Copyright Notice
74 76 81 86
4A 4B 4C 4D 4E 4F 4G 4H 4I
Create Folders to Organize a Site Create and Save an HTML Document Add Color and Format Text Using HTML Create an Unordered List Using HTML View HTML in a Browser Insert an Image Using HTML Insert Absolute Links Using HTML Test an HTML Document Create and Format a Page in Dreamweaver 4J Add Headings and Unordered Lists in Dreamweaver 4K Insert a Graphic and Links in Dreamweaver 4L Test a Web Page in Dreamweaver xii
Table of Contents
25
102 104 106 107 108 110 112 113 117 118 120 122
5A 5B 5C 5D 5E
Create a Mission Statement View a Web Site in Map View Chart Navigation Structure Specify File Names Sketch a Web Page
139 143 147 149 150
6A 6B 6C 6D 6E 6F 6G 6H 6I
Create Content for a Web Page View a Page at Various Resolutions Create a Page Template Add a Logo Create a Table Add Navigation Buttons Add Footer Information Add Text Links Add a Link to an E-mail Window
165 169 172 174 175 178 179 180 181
7A 7B 7C 7D 7E
Use a Template to Create New Pages Organize the Site’s File Structure Insert Page Headers Add Content and Color to the Home Page Format Text
193 195 196 199 208
8A 8B 8C 8D 8E
Insert an Inline Graphic Crop, Resize, and Resample an Image Modify a Graphic Create an Image Map with Hotspots Create a Web Photo Album Using Fireworks
230 233 234 238 240
9A 9B 9C 9D
Insert Background Sounds Insert a Video Clip Insert an Animation Create and Insert a Flash Button
260 262 266 267
10A Insert a Banner Ad 10B Add Update Information 10C Remove a Page From a Template 10D Insert Show-Hide Layers Behavior 10E Create a Form with Fields 10F Add a Jump Menu to a Web Page
284 285 286 288 293 297
11A Identify Team Responsibilities 11B Enable Source Control 11C Identify Tasks and Milestones
317 318 325
12A Explore the MyDiskDesigns.biz Web Site 12B Create an Internal Style Sheet 12C Attach an External Style Sheet 12D Edit an External Style Sheet 12E Add a Feedback Form 12F Add Radio Buttons 12G Add Check Boxes 12H Add a Privacy Policy 12I Run an Accessibility Report
13A Add Named Anchors 13B Create a Guest Book 13C Use Frames on a Site
337 338 339 340 343 344 345 349 355
14A Calculate Web Site Size and Bandwidth 14B Publish a Web Site Using FTP 14C Validate a Web Site 14D Check for Broken Links 14E Perform a Target Browser Check 14F Register a Site with a Search Engine 14G Add Meta Tags to a Web Site
396 401 406 407 408 411 412
15A Research Webmaster Jobs 15B Download and Upload Files From a Remote Server 15C Create a Login Screen
427
16A Create a Table Using HTML 16B Create a Frames-Based Web Page 16C Create an External Style Sheet Using HTML 16D Use CSS to Position Page Elements
453 459
430 434
464 465
17A Add an Audio File Using HTML 17B Add Text Boxes Using HTML 17C Add Radio Buttons and Check Boxes Using HTML 17D Add a Pull-down Menu Using HTML 17E Add a Text Area Using HTML 17F Use CSS to Style a Form 17G Create a Rollover Button Using JavaScript
476 477 478 479 480 480 484
373 377 382
Table of Contents
xiii
Features Contents
Verifying Your Sources Respecting Intellectual Property Ethics in the Workgroup Privacy Issues and the Internet
Use Equipment Safely Using the Web for Learning Accessibility on the Web How We Use the Web
xiv
Table of Contents
83 210 320 428
Working on the Web Developing Web Content What Makes a Leader? Starting an E-business What Does a Webmaster Do?
20 152 257 370 482
Web Languages Envisioning the Internet’s Future Security on the Web The Home and Workplace of the Future
115 236 347
47 166 282 404
455
Why Study Web Design? By understanding how the Web works and how we communicate through the Web, you will learn how to create effective Web sites. Introduction to Web Design Using Dreamweaver® is intended to help you develop skills needed to become a Web designer. It can also help you develop skills that will allow you to succeed in any subject area and throughout your life. This textbook was written and designed to help you achieve each of the following goals:
Become a 21st Century Citizen ◆ Understand how to use technology wisely and safely. ◆ Understand how computers and the Internet work. ◆ Evaluate the accuracy and usefulness of information on the Web. ◆ Find and share information quickly, safely, and ethically.
Become an Effective Web Designer ◆ Demonstrate your understanding of fundamental Web design principles. ◆ Become a skilled and creative user of Web design technology. ◆ Create your own unique, functional Web sites that engage your clients and your audience. ◆ Become an expert at evaluating Web sites. ◆ Offer constructive feedback to improve your own and others’ sites.
Develop Learning and Study Skills for All Subjects ◆ Improve reading comprehension with both guided and independent reading strategies. ◆ Develop critical thinking skills. ◆ Build teamwork skills. ◆ Integrate technology skills across the curriculum.
To The Student
xv
When you read this textbook, you will be learning about technology and how it is used in the world around you. This textbook is a good example of nonfiction writing—it describes real-world ideas and facts. It is also an example of technical writing because it gives you specific step-by-step instructions for how to complete different tasks. Below and on the next page are some reading strategies that will help you become an active textbook reader. Choose the strategies that work best for you. If you have trouble as you read your textbook, look back at these strategies for help. If you do not understand the material or need additional help, ask your teacher or a parent.
Before You Read SET A PURPOSE
e W hy am I re ad in g th textbook? own life? to use what I learn in my ◆ How might I be able
◆
PREVIEW
ic will be. le to find out what the top tit ter ap ch the ad Re ◆ t the topic. see what I will learn abou ◆ Read the subtitles to arts, graphs, or maps. defined? ◆ Skim the photos, ch boldfaced. How are they are t tha s rd wo y lar bu ca ◆ Look for vo
DRAW FROM YOUR OWN
BACKGROUND
ow about the topic? ◆ What do I already kn at I already know? mation different from wh or inf w ne the is w Ho ◆
xvi
To The Student
As You Read QUESTION ◆ What is the main idea? ◆ How well do the details support the main idea? ◆ How do the pho tos , cha rts, gra phs , and ma ps sup por t the main idea?
CONNECT ◆
Think about people, places, and eve nts in my own life. Are there any similarities with those in my text book?
PREDICT ◆
Can I predict events or outcomes by using clues and information that I already know?
VISUALIZE ◆
Can I ima gin e the set ting s, act ion s, and peo ple tha t are described? ◆ Can I create graphic organizer s to help me see relationships found in the information?
IF YOU DON’T KNOW WHAT A WORD MEANS... ◆ think about the setting, or context, in which the word is used. ◆ check if prefixes such as un-, non-, or precan help you break down the word. ◆ look up the word’s definition in a dictionary or glossary.
READING DOs Do... 4 establish a purpose for reading. 4 think about how your own experiences relate to the topic. 4 try different reading strategies.
READING DON’Ts Don’t... x ignore how the textbook is organized. x allow yourself to be easily distracted. x hurry to finish the material.
After You Read SUMMARIZE
from this textbook? ◆ What have I learned at I have learned? ◆ How can I apply wh
ASSESS
idea? ◆ What was the main support the main idea? ◆ Did the text clearly ol information in other scho ◆ Can I use this new subjects or at home?
To The Student
xvii
Many features in this text—such as colored headings, illustrations with captions, tables and charts—have been carefully constructed to help you read, understand, and remember key ideas and concepts. Taking advantage of these features can help you improve your reading and study skills.
Get Started The scavenger hunt on these pages highlights features that will help you get the most out of your textbook. Collect points as you complete each step.
1
What are the major topics you expect to learn about in Unit 1? [6 points. Hint: The Table of Contents gives you at-a-glance information about the major divisions and topics in the book.]
2
How many times does the Glencoe Online URL WebDesignDW.glencoe.com appear in Chapter 1? [8 points] What is the purpose of the Think About It on page 3? Why is it important? [6 points]
3 4
7
5
What are two study tips you learned from the Before You Read activity on page 65? [6 points]
6
What type of Reading Strategy graphic organizer is found in the Section 1.2 Focus on Reading? [5 points]
What three key terms are explained on the first page of Section 2.2? [5 points. Hint: They stand out from the rest of the text because they are printed in bold, highlighted letters.]
8
xviii
What is the best way to get an overview of what you will learn in Chapter 1? [6 points]
How many Quick Tip margin features are found in Chapter 1? What topics do they discuss? [6 points]
To The Student
What is the main heading on page 12 and what are the two sub-headings? [6 points]
9
10
What margin feature sends you to the Web to learn more about special topics? [4 points]
11
What kind of Web site will you create in the Building Your Portfolio project on page 131? [4 points] How many steps will it take you to complete You Try It Activity 1C? [4 points. Hint: You Try It activities can be found easily by looking for the bright yellow arrow in the margin.]
12
Which Student Data File will be used in You Try It Activity 4K? [5 points]
13 14
Why is it important to read the Section Assessments before you read the section? [5 points]
15
What are the four different types of full-page feature articles? [4 points. Hint: Each chapter has one full page feature.]
16
On what page of each chapter will you find Reviewing Key Terms, Understanding Main Ideas, and Critical Thinking? [5 points]
What online study tools will help you check your comprehension of key ideas in the chapter? [4 points]
17
18
Which of the Activities on page 126 shows you how standards relate to real-world situations? [4 points]
19
What is the name of the activity that reviews the skills you learned in a You Try It activity? [3 points]
20
Where can you find projects that will allow you to work on Building 21st Century Skills? [4 points]
To The Student
xix
What’s Your Score? POINTS
CHALLENGE RATING
90 to 100
You really know how to let your textbook work for you!
70 to 89
Researching and organizing are skills you possess!
Less than 70
Consider working with your teacher or classmates to learn how to use your book more effectively—you will gain skills you can use your whole life.
Answers to the Scavenger Hunt 1. Web Basics, Computer Basics, Online Basics, and HTML Basics. 2. Twelve times. 3. The importance of planning in advance. Each Think About It helps you connect what you will read to real-world situations. Reading experts have discovered it is easier to understand what you are reading if you first set a purpose for reading. 4. Look at pages 4–5, and note the chapter title, objectives, and activities listed. Or, read the main ideas from the Focus on Reading at the start of each section. 5. Adjust your reading speed to match the difficulty of the text. Re-read the text, if necessary. 6. The graphic organizer is a Venn diagram. 7. Network, local area network (LAN), and wide area network (WAN). 8. Five Quick Tips. They cover Jargon, Caution, two You Should Knows, and Troubleshooting. 9. The main heading is Text, Graphics, and Multimedia. The sub-heads are Text and Graphics and Multimedia. (Did you notice that main headings use a large red font, but sub-headings use a smaller blue font?) 10. Go Online activities direct you to more activities on the Glencoe Web site. 11. Community Web site. 12. Eight steps. 13. The p_border.gif student data file. 14. By reading the questions first, you can focus on what to look for as you read. 15. Real World Technology, Careers and Technology, Emerging Technology, and Ethics and Technology. 16. The Chapter Review and Assessment pages. 17. Study with PowerTeach and Online Self Check. 18. Standards at Work. 19. The You Try It Skills Studio. 20. At the end of a unit.
xx
To The Student
Using Dreamweaver® The hands-on activities in this textbook can be easily completed using Dreamweaver MX or MX 2004. Differences between the two versions are noted in Appendix A.
Recommended Hardware and Software Access to Dreamweaver and an Internet browser are required for this course. While access to the Internet is not required, it will make the course more rewarding. Equipment Needs Required
Recommended
Hardware
Software
Computer Color monitor (Make sure your equipment meets the minimum system requirements of your software.)
Dreamweaver Microsoft Notepad or other text browser Internet browser
CD or DVD drive CD burner or other storage drive Printer Scanner Microphone Video camera Digital camera Audio/video editing equipment
Internet access software Macromedia Flash Macromedia Fireworks Word processing software Presentation software Spreadsheet software Graphics software Multimedia player or editing software
Using Student Data Files Student Data Files are required to complete some activities and projects in this book. ◆ When you see the Student Data File icon, locate needed files before beginning the activity. ◆ Student Data Files are available on the Teacher Resource CD and on the book Web site at WebDesignDW.glencoe.com. ◆ Your teacher will tell you where to find these files.
Saving Your Work You may need to save your projects while working with Dreamweaver or other applications. ◆ Your teacher will let you know where to save your work. ◆ Always double check to make sure you save to the correct location. Otherwise, you may not be able to find your work later. ◆ Do not ever overwrite or delete others’ work. Think about how you would feel if someone did this to you.
Hardware and Software
xxi
Most educators today believe that in order to live, learn, and work successfully in an increasingly complex society, students must be able to use technology effectively.
ISTE and NETS The International Society for Technology in Education (ISTE) has developed National Educational Technology Standards to define educational technology standards for students NETS-S. The activities in this book are designed to meet ISTE standards. For more information about ISTE and the NETS, please visit www.iste.org.
Standards at Work The ISTE standards identify skills that students can practice and master in school, but the skills are also used outside of school, at home, and at work. To reinforce how these standards are related to real-world situations, refer to the Standards at Work activities in each Chapter Review. Each activity emphasizes one of the six NETS student standards. Refer back to these pages for a full listing of all the standards and performance indicators for students.
xxii
Technology Standards
Technology Foundation Standards for Students The NETS are divided into six broad categories that are listed below. Activities in the book are specificially designed to meet the standards within each category.
1. Basic operations and concepts ◆ Students demonstrate a sound understanding of the nature and operation of technology systems. ◆ Students are proficient in the use of technology. 2. Social, ethical, and human issues ◆ Students understand the ethical, cultural, and societal issues related to technology. ◆ Students practice responsible use of technology systems, information, and software. ◆ Students develop positive attitudes toward technology uses that support lifelong learning, collaboration, personal pursuits, and productivity. 3. Technology productivity tools ◆ Students use technology tools to enhance learning, increase productivity, and promote creativity. ◆ Students use productivity tools to collaborate in constructing technologyenhanced models, prepare publications, and produce other creative works. 4. Technology communications tools ◆ Students use telecommunications to collaborate, publish, and interact with peers, experts, and other audiences. ◆ Students use a variety of media and formats to communicate information and ideas effectively to multiple audiences. 5. Technology research tools ◆ Students use technology to locate, evaluate, and collect information from a variety of sources. ◆ Students use technology tools to process data and report results. ◆ Students evaluate and select new information resources and technological innovations based on the appropriateness of specific tasks. 6. Technology problem-solving and decision-making tools ◆ Students use technology resources for solving problems and making informed decisions. ◆ Students employ technology in the development of strategies for solving problems in the real world.
Technology Standards
xxiii
Educational Technology Performance Indicators for Students In this text, all students should have opportunities to demonstrate the following performance indicators for technological literacy. Each performance indicator refers to the NETS Foundation Standards category or categories (listed on previous page) to which the performance is linked.
Tips for Using the Internet for Research H8 How to Evaluate Web Sites
1
Technology Handbook
H1
Ethical Computer Use C
omputers are more common than ever before—almost every office desk in the country has a computer of some sort, and most schools have them in classrooms. The number of computers in the home is growing, too. Computers can be used to do wonderful things, but they can also be misused. Knowing some simple ethical guidelines will ensure that you are always doing the right thing.
Using Computers at School Whether in the classroom or at the library, you likely spend time working at a computer. Remember that the computer is there to help you get your work done. If you instead use the computer to play games, check your personal e-mail, or look at offensive material on the Internet, you are inappropriately using the resource that is being provided for you. Many institutions are taking action to prevent such misuse. Hidden software applications watch everything users do while they are on a machine, including which Web sites they visit, what e-mails they send, even what keystrokes
H2
Technology Handbook
they type. If you are engaging in inappropriate activity on a school computer, you could be suspended from school, or perhaps even prosecuted. A good guideline to keep in mind: Do not do anything on a computer that you would not do if your teacher or parents were standing behind you, watching.
Using Computers at Work While it might seem harmless to do a few small personal tasks while you are at work, the costs really do add up. According to the organization SurfControl, American businesses waste $54 billion every year due to personal use of company computers.
Plagiarism and Copying Plagiarism is the act of taking somebody else’s ideas and passing them off as your own, whether it be one or two sentences or an entire term paper. The “cut-andpaste” feature built into modern operating systems makes a lot of mundane tasks, like moving a paragraph of text, quick and easy—but also makes plagiarism all too easy. Be on guard against falling into this trap. It is acceptable to quote sources in your work, but you must make sure to identify those sources and give them proper credit. Also, some Web sites do not allow you to quote from them. Be sure to check each site or resource you are quoting to make sure you are allowed to use the material.
Using Internet Connections Responsibly Because your school may have a fast Internet connection, you may be tempted to use these connections to download large files. Check with your teacher first, as there may be policies forbidding this. E-mail systems leave a “digital paper trail.” This means that what you type into an e-mail can be found by a system administrator. Be sure not to abuse company or school e-mail systems—it may come back to haunt you! If you download any files or applications, be sure to check with your system administrator before using them. Downloaded files are one of the chief sources of viruses, which cause millions of dollars in damages to computer networks every year. You would not steal office supplies from your office or school, so make sure you do not take home computer-related resources like CD-ROMs or floppy disks.
Copyright Laws A copyright protects someone who creates an original work. When you create something—a book, a play, or a single sentence— you can copyright it, thereby claiming that you created it, and you are the owner. The goal is to prevent unauthorized copying of that work by another party.
Obtaining Permission So what do you do if you want to use a portion of a copyrighted work in your own work? In order to do this, you need to obtain permission from the copyright holder. Obtaining permission depends on the work in question. If you want to use an excerpt from a book, you will need to write a letter to the publisher, since they are the owner of the copyright.
(Sometimes the author, or an organization other than the publisher, owns the copyright. Check the copyright page in the front of the book to make sure.) Each instance is different, but many publishers are willing to grant permissions to individuals for educational purposes. If you want to reproduce information you found on the Web, contact the Webmaster or author of the article to request permission.
Duration and Public Domain So once a copyright is in place, how long before it expires? The answer depends on when the work was created. For all works created since January 1, 1978, copyright lasts until 70 years after the creator’s death. For works created before that date, the answer is considerably more complex. The copyright would last anywhere from 28 to 67 years from the date of creation, with possible options for renewal. Once a work’s copyright has expired, that work is considered to be in the public domain, meaning that nobody owns it and anybody can reprint it as they please. This is why you can find so many different printed versions of classic literature from writers like Dickens, Shakespeare, and the like—the publishers do not have to pay any fees for the right to print those books.
Some Common Misconceptions About Copyrights “If it does not say it is copyrighted, it is not copyrighted.” Original work published after March of 1989 is copyrighted, whether it says so or not. “I found it on the Internet, therefore it is okay for me to copy it.” Most of the text on the Internet is indeed copyrighted. Copying information from the Internet is a serious breach of copyright, and can result in prosecution. “It is okay to put copyrighted material on my Web site, because I do not charge people to look at it.” It does not matter whether you are making a profit from the reuse of copyrighted material—you are distributing it, and that is illegal. “I have changed the material, so it is no longer copyrighted.” Copyright law says that only the owner of the copyright can make “derivative works”— that is, new works based on the existing material. “I can reprint the material, because it is considered fair use.” Be careful! “Fair use” refers to the right to reprint brief excerpts from copyrighted works. However, there are no clear definitions on how much of a work can be used. Some examples of fair use include quoting a book in a book report or parodying a work.
Technology Handbook
H3
Word Processing Tips and Tools
O
ne of the most common types of application software used in both business and school is the word processor. Word processing software allows you to create and edit documents such as reports, term papers, and essays. Many word processing programs will even allow you to create documents in HTML, which can be posted to the Web. To make the most of word processing, you will need to learn some of the features many of these programs offer.
placing a red line underneath the word. Depending on the program, you may have a variety of options—for instance, looking at other words that the program thinks you meant to type, adding the word you typed into the dictionary so the program will recognize it, or telling the program to ignore it. Remember that spell-checkers and grammar-checkers are not perfect.
Checking for Errors
Many programs now also include grammar-checkers. Grammar-checkers compare sentence structures in documents to a file of common errors.
Tracking Changes Sometimes, more than one person will need to work on a single document. Using the Versions feature (or Tracking feature) of a word processing program makes this easy. The program keeps copies of different versions of the document as changes are made, so you can refer back to earlier versions. Another helpful feature is Comments. Comments allow you to make remarks about the document for other group members to see. They can make changes based on your comments, revise the comments, or leave more comments in return.
For instance, if you meant to Many people have come to type the word stay but accidendepend on the spell-checker featally typed sty, the program will ture of word processing programs. not alert you to the error, because Inside each word processor is a sty is a valid word. It is imporlarge file called the dictionary. tant to proofread each of your Unlike the dictionaries that you documents. will find on your bookshelf or online, this file does not contain any information about the meanings or Online Calendars pronunciations of words; eeping track of all the work you need to do can be instead, it knows how to difficult—it is easy to get overwhelmed when you are spell them. faced with a mountain of books and papers and are not sure where to start. In cases like As you type into a this, you might find that using an online calendar will help you get organized and handle word processor, the proyour work efficiently. gram constantly scans Online calendars work much like paper day-planners that you buy at the office supply the dictionary. Every store, but instead of writing out tasks by hand, you type them into your Web browser. time you tap the space The calendar site keeps track of appointments, due dates, and to-do lists. Keeping all bar, the program knows your tasks entered into an online calendar is one way of making certain you are accomyou have just completed plishing them in the smartest order. a word, so it looks up You might also want to use the reminders feature; these are alarms that tell you when something must be done. The reminder might be a sound, a pop-up box, or an e-mail that word in the dictionsent to you by the calendar site. ary. If it cannot find it, Also, since the information is stored online, you can check your calendar from anythe program will let you where—from home, school, or any place that has an Internet connection. know, usually by
K
H4
Technology Handbook
Etiquette N
for Digital Communication
ew rules of etiquette have evolved for the new communication media provided by the Internet—e-mail, chat rooms, and newsgroups. Nicknamed “netiquette,” these basic guidelines are important to keep in mind whenever you are communicating with someone online.
E-mail
✔ Never send or forward chain letters. Even if they seem like a good idea, they are often fraudulent—and will likely anger the people you are sending them to.
Chat Rooms Chat rooms can be useful communication tools, but they can also be raucous free-for-alls. Some things to keep in mind: ✔ Choose the chat room wisely. Some chat rooms are populated with questionable people, so do some research first. ✔ For your safety, always remain anonymous. ✔ Take turns with the conversation. Just like in a real conversation, allow people to finish their thoughts, and do not interrupt. ✔ Be aware of “lurkers,” people who are reading the conversation but not taking part. Try not to say anything that might hurt somebody’s feelings.
Newsgroups The Usenet system is made up of thousands of discussion groups, each on a particular topic. Having a rewarding newsgroup experience requires some basic netiquette, including the following guidelines: ✔ Stay on topic. Most Usenet groups are very specific, and readers do not appreciate posts that do not fit the topic. ✔ Avoid flaming. Newsgroups are particularly ripe for flaming— people tend to get passionate in these conversations. Never type something that you would not want to say out loud. ✔ Know your facts. There is no fact-checking process in Usenet—anybody can say anything he or she wants. Just because somebody says something in a newsgroup does not mean it is true—remember this when quoting or replying to someone.
Of all the conveniences provided by the Internet, e-mail is the most widely used. It has changed how people live, work, and socialize. Letters that used to take days to arrive in the mail now take mere seconds. Business communication has become much more efficient thanks to e-mail. Here are a few things to keep in mind when sending e-mail: ✔ Do not send large attachments, unless the recipient is expecting them. ✔ When forwarding e-mails, be sure to trim off unnecessary information like old headers and General quotes—these can Netiquette Guidelines build up quickly! ✔ Keep your communicaBehave as though you were communicating face-to-face. tion appropriate, and Remember that your words can be misinterpreted, and things like sarcasm, body do not say anything language, and irony may not come across. Do not “flame.” A flame is an aggressive or insulting letter. about someone that Do not “spam.” Spam, or junk e-mail, is a billion-dollar problem, clogging mail you would not want systems and wasting time. Do not add to the problem. them to hear. Even Do not SHOUT. Make sure your Caps Lock key is off. after you click Delete, Do not distribute copyrighted information. Just because something is on the Internet e-mail records stay in does not mean it is free. the system for a long Do not hide behind a screen name. Behave online as you would in the real world— time, and can even be honestly, ethically, and wisely. found years later.
Technology Handbook
H5
Online Resources O
ne of the most useful elements of the Internet is the World Wide Web (also called “the Web”), which allows documents to be viewed by anyone anywhere in the world. This is particularly helpful when it comes to documents that are normally expensive or hard to find. For instance, many families do not own an encyclopedia, so a student who needs to do research would normally have to make a trip to the library. The Web makes it possible for documents like encyclopedias and dictionaries to be accessed by many people.
Encyclopedias Encyclopedias need to be updated often, making them a perfect choice for online delivery. Online encyclopedias are searchable, and many contain photos and illustrations. Brittanica Online The online version of one of the most respected print encyclopedias offers both free and premium access, with more content and fewer ads in the premium version. (www.britannica.com)
Dictionaries There are hundreds of online dictionaries. Some specialize in certain types of information, such as law, medicine, or technology. Dictionary.com The name makes it easy to remember; this site also contains a fully searchable thesaurus. (www.dictionary.com) OneLook Dictionaries A “meta-dictionary,” this site lets you type in a word once to search across more than 840 dictionaries. (www.onelook.com) Merriam-Webster A Web version of one of the best-known print dictionaries, this site includes a “word of the day” feature, a thesaurus, and links to other research sites. (www.m-w.com)
H6
Technology Handbook
World Book Online The online version of World Book does not offer any free information; you have to pay a monthly fee to access the entries, which include all the contents of the print versions dating back to 1922. (www.worldbook.com)
Encarta A popular encyclopedia by Microsoft, the Encarta Web site offers lots of free content, but to access all their information you will need to buy either a subscription or a copy of the CD-ROM. (www.encarta.msn.com)
Other Resources While dictionaries and encyclopedias offer lots of useful information, other specialized resource sites can give you information about other subjects. Roget’s Thesaurus The online version of the definitive thesaurus lets you search for words or browse them alphabetically or by category. The site also offers plug-ins that put dictionary and thesaurus buttons right in your browser window. (www.thesaurus.com) RefDesk A comprehensive site with links to every kind of information imaginable. If you do not know where to start looking for a particular fact or statistic, start here. (www.refdesk.com) Bartleby Bartleby is fully searchable and contains the complete text of Bartlett’s Quotations, Simpson’s Quotations, the Columbia World of Quotations, as well as dozens of biographies, articles, and books. (www.bartleby.com)
Safe Surfing T
he Internet can be a wonderful place. There is much to learn, explore, and discover. You can find the answers to many of your questions on the Internet, often much more quickly than at the local library. And the Internet can put you in touch with people you might never have met—experts, writers, or just other students from around the world. But the Internet can also be a dangerous place. There are Web sites that you can freely visit, and many others that you should avoid.
Privacy and Personal Information Information is valuable. Companies that operate on the Internet are constantly seeking more information about customers, as well as potential customers. By building vast databases of names, addresses, and information about buying habits, those companies can market their products and services with increased efficiency, thereby increasing sales. But in addition to legitimate sites that ask you for information like name, address, or age, there are many questionable sites that are looking for this data as well. Before you type any
information into an online form or in a chat room, be sure to evaluate to whom you are sending that information, and why you are sending it.
Here are some things to keep in mind: ✔ Know to whom you are giving the information. Check the URL in your browser—does it match the domain you visited? Or were you “redirected” to another site without your knowledge?
✔ Why are you giving the information? If, for example, you are ordering something online, you will need to give your address in order for the product to be shipped. There should always be a good reason for all information you provide. Never give out your social security number, your birth date, or your mother’s maiden name without adult consent. These are often used to secure credit reports, and giving these to a dishonest source could ruin your credit. ✔ Never give personal information of any sort to someone you meet in a chat room, including your name, gender, and age. Always remain anonymous. ✔ If you are still unsure whether it is safe to give the information, check with a parent or other trusted adult.
Avoiding Physical Stress at the Computer
I
f you are going to be spending time in front of a computer, it is important that you minimize stress to your body. Here are some important things to keep in mind: Make sure you use a chair that provides strong back support. Be sure to keep your back straight while working, and keep your feet flat on the floor. Keep your wrists straight while you are typing. If your keyboard includes a “wrist rest,” be sure not to use it while typing. Resting your hands while typing causes the wrists to bend, which causes muscle fatigue and can put you at risk for injuries. Position the monitor so that it is just a little below eye level and about two feet away. This will prevent strain on your neck muscles. Make sure there is enough light in the room so that you can easily see the monitor without straining your eyes. Keep your monitor’s resolution set to a comfortable level. The highest possible resolution setting is not necessarily the best. Choose a resolution that displays images and text at a size that is comfortable to view.
Technology Handbook
H7
Tips for Using the Internet for Research ✔ T
he Internet is probably the single most important new tool for research since the public library. However, the advantage provided by the Internet can also be its greatest challenge: There is so much information out there that it is difficult to know where to begin.
Where to Start A good place to begin work regardless of your research topic is Google. Arguably the most useful search engine, Google is an enormous “spider” (an automated piece of software that “crawls” the Web looking for information) that keeps an index of over three billion URLs. Simply type your topic into Google’s search bar. By default, Google looks for sites that contain every word you type. For instance, if you enter the words sports medicine, you will see a list of sites that contain both of those words, not just one or the other. To get better results, here are a few tips: ✔ Place quotes around your topic. Searching for “sports medicine” will find sites where that exact phrase appears. ✔ Use NEAR. Entering sports NEAR medicine will return sites that contain both words, and have the two words close to one another. H8
Technology Handbook
Exclude unwanted results. Simply use a minus sign to indicate the words you do not want: “sports medicine” - baseball.
When conducting a search online, be sure to spell all your search words correctly. Incorrect spellings can prevent you from getting good results.
✔ Stick to a single domain. If you only want to find information from a specific site, just add the domain after the search term along with the “site” tag, and Google will only look for documents on that site: “sports medicine” site: www.espn.com.
Refining the Search Your Google searches will likely give you page after page of hits, each with a brief summary of some of the text from that page. Some things to think about while browsing your Google results: ✔ Links on the right hand side of the page (and sometimes at the top, in a colored box) are sponsored links—this means that the company in question has paid to
have its link show up. This does not necessarily mean that the link is not worth exploring, but it is usually an indicator that the site is selling a product or service, and might not be valuable for pure research. ✔Google displays a few lines of text from each page and shows your search phrase in bold. Read the sentence surrounding the bold information to see if it is appropriate for your work. ✔ After you have entered your search phrase and have finished looking at the results, click on the “News” tab near the top of the page. This will show you recent news stories about your topic from a number of news services and wires.
Unique Online Research Tools iTools This “meta-research” tool lets you search not only the Web, but also discussion groups, dictionaries, and other sources. (www.itools.com) RefDesk This site contains links to hundreds of different Web resources, each designed for a very specific purpose. (www.refdesk.com) The Internet Public Library This site searches the Web for information, offers free content, and includes in-depth guides on finding information both on- and off-line. (www.ipl.org)
How to Evaluate Web Sites W
hile there is a lot of valuable information online, there is also a lot of information that can be deceptive and misleading. The books in your library have been evaluated by scholars and publishers; Web sites, however, are not verified. Learning to evaluate Web sites will make you a more savvy surfer and enable you to gather the information you need quickly and easily. When you are trying to decide whether a Web site provides trustworthy information, there are a number of components to consider.
Authorship When dealing with information from a Web site, the first and most important question to ask is “Who wrote this information?” Once you have found the name of the author (usually located near the top or bottom of the page), do a quick Web search to see what else that author has written. Typing the author’s name into Google will often return not only pages by that author, but also pages about that author, such as reviews of his or her work. Check to see if the author has published in print. Search online for books that he or she has written. All this information will help you decide whether you should consider the person’s information trustworthy.
Sponsorship/Publishing Take a look at the domain that is offering the information. Why have they published this article? Are they trying to sell a product or service, or are they an impartial organization providing unbiased information? Determining sponsorship or the publishing body will help you decide whether the information is biased. For instance, if an article that suggests a certain pesticide is very effective is posted on the Web site of a company that sells that pesticide, it is possibly biased and trying to sell you that pesticide.
Accuracy When you write a term paper, you are expected to provide sources for each of your facts.
Look for Web sites that do the same thing by providing footnotes containing bibliographical information or references. Also, look for clues that the information was written by someone knowledgeable. Spelling errors and grammatical mistakes are warning signs that the information provided may not be accurate.
Timeliness Most articles will contain information about when it was written and when it was last updated. Recent update information normally appears at the very bottom of a Web site’s main page, while date of authorship information usually appears near the title of the specific article. The more recently something was written, the more likely it is to be accurate. An article from 1995 about “Internet trends,” for instance, probably does not contain up-to-date information.
One Final Guideline When using information from a Web site, remember to treat it just as you would print information. Anyone can post information to a Web site; however, not everyone can have a printed article published. Never use information that you cannot verify with another source.
Technology Handbook
1
UNIT
1
Fundamentals of Web Design
Go to this book’s Web site at WebDesignDW.glencoe.com. Click Unit Activities and select Unit 1 Internet Scavenger Hunt. Complete the online scavenger hunt to learn how to use the Internet safely and how to use this Web site.
2
Think About It Be Prepared! When you prepare for a class project, do you plan ahead of time or at the last minute? With careful planning you can make sure you have everything you need for a successful project or presentation. Planning to build a Web site is a lot like preparing for a class project. How do you think Web designers make sure their sites are successful?
Planning Activity List ten things you think Web designers need to do before they begin to create a site. As you read this unit, compare your list to what you learn.
3
CHAPTER
1
Web Basics
YOU WILL LEARN TO… Section 1.1 Compare the Internet and the Web Compare Web sites and Web pages Identify Web browser components Describe types of Web sites Section 1.2 Identify elements of a Web page Summarize the importance of hyperlinks Navigate using a Web browser Section 1.3 Describe Web site development steps Identify the three categories of Web site design Identify Web design careers Section 1.4 Identify parts of the Dreamweaver interface View Web pages with Dreamweaver
4
Chapter 1
WHY IT MATTERS ................................................. Every day, millions of people connect to the Internet to access information they need. Whether they use it to shop, pay bills, or check the local news, many people make the Internet an essential part of their daily routine. As the Internet’s role in communication, entertainment, commerce, and work increases, so does the need for people who have Web skills. The information in this chapter provides the foundation on which you can build these necessary skills. Think about the Web sites you visit most often. What types of sites do you like to visit? Why do you use these sites? Summarize how the Internet is (or is not) an important part of your daily routine.
CHAPTER
1
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 1.1 Categorize Web Sites ....................10 1.2 Identify Hyperlinks .......................14 1.3 Identify Career Skills ....................19 1.4 View Web Pages ............................26 You Try It Activities 1A View a Web Site in a Web Browser .........................................13 1B Open a Web Site in Dreamweaver ................................23 1C Use Different Views and Close Dreamweaver ................................25 Chapter Assessment Making Connections ............................30 Standards at Work ...............................30 Teamwork Skills ...................................31 Challenge Yourself ...............................31
You Try It Skills Studio Use Hyperlinks......................................32 Switch Views and Use the Files Panel .............................................32 Web Design Projects Evaluate Web Site Design.....................33 Research Web Development Careers .................................................33
IN THE WORKBOOK Guided Reading Web Design Projects
ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Survey Before You Read Before starting the chapter, do a quick survey of the content by reading the colored headings and the questions below. Think about what you already know about the topic. Look for the bolded terms and jot down words you do not recognize. Study the pictures and the charts. Do they help you predict what information will appear in the chapter? Finally, read the chapter summary and the review questions. This will help you pay attention to important concepts in the reading.
WebDesignDW.glencoe.com
Web Basics
5
SECTION 1.1 INTRODUCTION TO THE WEB Focus on Reading Read to Find Out The main purpose of this section is to explain various components of the World Wide Web. Read to find out about the different types of Web sites and how these sites are structured.
Main Ideas
Key Terms
Reading Strategy
The Internet is a worldwide network of hardware. The World Wide Web is part of the Internet. Web sites are divided into categories that meet particular needs.
Internet World Wide Web file Web browser Web site Web page home page
Identify and describe the five components of a Web browser. Use a table like the one shown below (also available online). Components
Description
Internet users often do not know how the Internet works. However, when you create Web pages, you need to understand the World Wide Web and the Internet to know how your pages will work best.
The Internet and the World Wide Web How is the World Wide Web different from the Internet? Jargon The Web and the Internet are not the same thing. The World Wide Web provides the information that a user wants to know. The Internet provides access to the World Wide Web.
Web design involves creating a Web site that meets a specific goal. Learning how to achieve that goal requires a basic understanding of the Internet and the World Wide Web.
The Internet Is Hardware The Internet (often called the Net) is hardware connected together to create a massive worldwide network. The Internet’s hardware consists of those components that you can physically touch, such as computers and communication lines. A network is a group of computers that can communicate, or “talk,” with one another. The Internet is thus an inter-linked collection of many smaller networks.
The Web Is Software The World Wide Web, or Web, includes software that sends information along the Internet’s hardware. Individual files on the Web contain information such as text, video, or animation. These files are joined together like a giant spider web. Identify What is a network?
6
Chapter 1
WebDesignDW.glencoe.com
How the Web Works How is a Web page different from a Web site?
The basic component of a Web page is a text document. A text document contains words, letters, numbers, and other unique characters. Special software called a Web browser interprets these files to display Web pages on your computer screen.
Web Sites versus Web Pages The terms Web site and Web page do not refer to the same thing. ◆ A Web site is a group of related files organized around a common topic.
Design The home page is almost always the first page a user sees when visiting a Web site, so it is important for it to give a good first impression.
◆ A Web page is a single file within a Web site, which has a unique name. A Web site’s main page is typically called the home page. The home page usually contains general information about the Web site.
Browser Functions
Figure 1.1
A Web browser has two important functions. ◆ It translates the text-based Hypertext Markup Language (HTML) used to create Web pages into a graphical Web page. ◆ It lets the user move (or navigate) from one Web page to another. Figure 1.1 shows the Microsoft Internet Explorer browser with some of its main components labeled. Title bar gives name of current Web page
Web browsers such as Internet Explorer make it easy to move from one Web site to another. How can you determine the address of the Web page shown here?
Web address displays the current Web page Navigation buttons help you move between pages
Menus allow you to select from lists of commands
Viewing area displays the current Web page
Identify What is a Web page?
Web Basics
7
Types of Web Sites How can I categorize Web sites?
Most Web sites can be placed into particular categories based on their main purpose. The five major types of Web sites and their primary purposes are shown in Figure 1.2.
Figure 1.2
Portal Sites Provide a variety of services that people use every day
Different types of Web sites have different purposes. What is the purpose of an educational site? Commercial Sites Sell or promote a company’s products or services
Informational Sites Provide people with useful information
Types of Web Sites
Educational Sites Provide information about a school or university
Personal Sites Used by individuals to share information
Commercial Sites The primary purpose of a commercial site is to sell or promote a company’s products or services. There are two main types of commercial sites.
E-commerce Sites Buying and selling goods and services over the Internet is called electronic commerce, or e-commerce. Shopping at an e-commerce site is different from going to a traditional store. For example: ◆ consumers expect a complete description of the items being sold. ◆ photographs are often used to show consumers the items being sold. ◆ photographs and other visuals are also used to encourage the consumer to buy the item.
Corporate Presence Sites Some commercial Web sites do not sell anything. These types of sites are often referred to as corporate presence Web sites. Their job is to: ◆ provide information about the company’s products or services. ◆ illustrate the company’s history. ◆ promote a positive image for the company. For example, a pharmaceutical (drug) company would probably not sell any medications on its Web site. However, it might discuss the research it is doing to improve the treatment of people with certain diseases.
8
Chapter 1
Figure 1.3 Many Web portals let users search the Web for information. What are three features that you find useful in a Web portal?
Portal Sites A Web portal is a Web site that provides a variety of services that people use every day. As shown in Figure 1.3 above, most portals provide general news and business information. Portals make it easy for people to access a variety of information from one single location.
Informational Sites Informational sites serve one purpose—to provide people with useful information. One advantage that Web sites have over other informational sources such as magazines and books is that they are relatively easy to update. Three types of informational sites are shown in Table 1.1.
Table 1.1
Types of Informational Sites Site
Purpose
Example
News sites
Provide up-to-theminute local, national, and international news.
CNN Web site
Government sites
Provide information about federal, state, and local government activities and regulations.
U.S. Senate Web site
Public Interest sites
Focus on certain problems or situations and suggest how individuals might respond.
Make-A-Wish Foundation Web site
Different types of informational sites provide specific kinds of information. Which site would you use to locate information about how to apply for a driver’s license?
Web Basics
9
Educational Sites Educational sites often provide information about a school or university. ◆ School and university sites provide general information such as class schedules and courses offered. Activity 1.1 Identify Web Sites Visit various categories of Web sites by connecting to the links available at WebDesignDW.glencoe.com.
◆ Distance learning sites offer Web-based interactive tutorials. ◆ Museum sites provide information about exhibits and events.
Personal Sites Personal Web sites allow people to share their interests or news with others. All individuals should be careful when posting personal information on the Internet. Online information is available to anyone with an Internet connection, and posting personal information can be dangerous. Follow these guidelines when creating a personal site. Use a personal site to: ◆ share news with your family and friends. ◆ share your interests and hobbies. ◆ display a portfolio or résumé. On your personal site: ◆ do not post personal contact information. ◆ do not describe how you look or where you live. ◆ do not post personal information about other people. Evaluate What type of Web site would you use to learn more about a local news story?
Section 1.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Web design focuses on creating Web sites that meet specific goals.
1. Define Internet, World Wide Web, file, Web browser, Web site, Web page, home page.
4. Compare and Contrast How is a portal site different from an educational site?
• The World Wide Web is the software that allows users to access information stored on the Internet.
2. Summarize the difference between the Internet and the World Wide Web.
5. Draw Conclusions What are the advantages and disadvantages of personal Web sites? Why should you be careful when posting personal information?
• Web browsers interpret and display information found on Web sites. • Web sites can be placed into particular categories based on their main purpose.
10
Chapter 1
3. Explain the functions of a Web browser.
Apply It! Categorize Web Sites Make a list of five Web sites that you have visited recently. Beside each site, write the category to which you think this site belongs.
WebDesignDW.glencoe.com
SECTION 1.2 ELEMENTS OF A WEB PAGE Focus on Reading Read to Find Out This section discusses the different elements that are used to present information on a Web page. Read to find out how Web designers use these elements to create Web pages that are eye-catching and easy to read.
Main Ideas
Key Terms
Reading Strategy
Web pages can be composed of many different elements: text, graphics, multimedia, and hyperlinks. Hyperlinks link Web pages together and help a user navigate through a Web site.
text graphics multimedia audio video animation hyperlink
Identify the similarities and differences between internal and external hyperlinks. Use a Venn diagram like the one below (also available online). Internal Links
Web pages are made up of individual parts, or elements. Every element on a Web page is used to communicate different types of information to the user.
Common Web Elements How are Web elements used to create a Web page?
Common Web page elements include text, graphics, multimedia, and hyperlinks. Each element is created indiGraphics vidually when a Web page is developed. The separate elements are then combined to form a completed Web page as shown in Figure 1.4.
External Links
Figure 1.4 This Web page contains many different elements. What elements are most likely to attract your attention when you visit a site?
Text Hyperlinks Multimedia
Identify What are four common Web page elements?
WebDesignDW.glencoe.com
Web Basics
11
Text, Graphics, and Multimedia Why would I include text, graphics, and multimedia on a Web page?
The three most common elements found on the Web are text, graphics, and multimedia.
Text and Graphics Text and graphics provide the foundation of most Web sites. ◆ Text consists of words, letters, numbers, and other symbols. ◆ Graphics include drawings, charts, diagrams, paintings, photographs, and navigational buttons. Table 1.2 outlines the purpose of these two major Web page elements.
Table 1.2
Using Text and Graphics
Text and graphics perform different functions on a Web site. Why is it important to include graphics on a Web site?
Element
Purpose
Text
• • • •
Provides information Labels pictures Describes navigation buttons Provides links
Graphics
• • • •
Illustrate information Attract viewers’ attention Provide visual interest Act as navigation buttons
Multimedia Many Web sites have multimedia elements. The term multimedia refers to the integration of elements such as graphics, text, audio, video, animation, and interactivity by means of computer technology. Audio, video, and animation are three important multimedia elements. ◆ Audio is live or recorded sound. ◆ Video is live or recorded moving images. ◆ Animation refers to the movement of text or graphics. Examples of each element are shown in Figure 1.5.
Figure 1.5 Multimedia elements help add interest to a Web site. How might a news site use audio elements?
Multimedia
Audio • Speech • Music • Sound effects
Video • News clips • Movie clips
Animation • Scrolling text • Bouncing text • Cartoons
Compare How are graphics different from video?
12
Chapter 1
Hyperlinks How are hyperlinks used in a Web site?
A Web page is connected to other Web pages through a hyperlink, which allows you to move from one online page to another. A hyperlink, or link, can be a word, phrase, or graphic. Most text links are underlined and are a different color from the rest of the text. Graphic links are often in the shape of buttons, graphics, or photographs. There are three kinds of links. ◆ Internal links take you to another page on the same Web site. ◆ External links take you to a page on a different Web site. ◆ Intrapage links move you to a different spot on the same page. In the following You Try It activity, you will use internal links to move around a Web site.
Caution Be sure to ask your teacher how to locate the Student Data Files needed to complete the activities.
ACTIVITY 1A View a Web Site in a Web Browser 1 Open your Web browser. 2 Select the File menu. Click Open or Open File (or press Ctrl + O). 3 In the Open dialog box, click the Browse button. Navigate to and open the DataFiles folder. Open the Examples folder. Select the MusicDept folder and click the Open button. The files and folders for this Web site appear in the dialog box. 4 Select index.html and click the Open button. In the Open dialog box, click OK. The site’s home page appears in the browser window (see Figure 1.6). (If you have difficulty with this step, ask your teacher for further instruction.) Read the page’s text to learn about the Music Department.
Figure 1.6 The Century High School Music Department home page.
Web Basics
13
5 The left side of the page contains internal links to other pages in the site. Click the Performances link. 6 At the top of the Performances page, click the Century High School logo (see Figure 1.7). You will return to the home page.
Figure 1.7 Clicking a site’s logo will usually return you to the site’s home page.
School logo
7 Continue navigating to different areas of the site until you feel comfortable with its structure. Close the Web browser.
Each element on your Web page should have a purpose: whether providing information, attracting the user’s attention, or guiding the viewer to other locations. Summarize What is the function of an internal hyperlink?
Section 1.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Text consists of words, letters, numbers, and symbols.
4. Analyze What elements might be used on a doctor’s Web site? An attorney’s? An educator’s?
• Graphics can be used to attract a viewer’s attention.
2. Identify the basic elements of a Web page.
• Multimedia elements add interactivity to a Web site.
3. Describe how to use a Web browser to navigate around a Web site.
5. Draw Conclusions Both Web sites and books have pages. How do hyperlinks make using the Web different from reading a book?
• Hyperlinks tell the Web browser to move to a different location.
Apply It! Identify Hyperlinks Visit a Web site and identify an example of an internal link and an external link. Write down the text that serves as each link. Beside each link, write the Web address, or URL, to which it takes you.
14
Chapter 1
SECTION 1.3 WEB SITE DEVELOPMENT Focus on Reading Read to Find Out The main purpose of this section is to explain the basic steps of the Web site development process. Read to find out the roles different Web professionals play in creating and maintaining a Web site.
Main Ideas
Key Terms
Reading Strategy
The Web site development process has five basic steps. There are three categories of Web site design. Specific skills are needed to develop and design Web sites.
interaction design information design presentation design Web author Web designer Web developer Webmaster
Identify the main tasks performed by each individual during the Web site development process. Use a diagram like the one below (also available online). Web Site Development Careers
Web author
Web designer
Web developer
Webmaster
Web site development offers a variety of career opportunities. Companies and organizations develop Web sites, add features to existing Web sites, and maintain their sites to keep information current. Each new Web site goes through a similar development process. Software tools aid the people who design, create, and maintain Web sites.
The Web Site Development Process How many steps are there in the Web site development process?
Developing a Web site is a complex task. Web developers use a series of steps to break the task into manageable parts. There are five basic steps in the Web site development process. 1. 2. 3. 4. 5.
Determine the purpose and goals of the Web site. Design and develop the Web site. Evaluate and test the Web site. Implement the Web site. Maintain the Web site.
Figure 1.8
These steps are illustrated in Figure 1.8. We will take a brief look at these steps here. You will learn more about each step throughout the book.
Determine the Web Site’s Purpose and Goal(s)
➠
WebDesignDW.glencoe.com
Design and Develop the Site
➠
Evaluate and Test the Site
➠
Implement the Site
There are five steps in Web site development. How might you divide a task such as studying for a final exam into smaller steps?
➠ Web Basics
Maintain the Site
15
Step 1: Determine Purpose and Goals It is important to determine your Web site’s purpose and goals before beginning to design it. Questions you will want to ask include: ◆ What is the site’s purpose? What do you want your site to do? Your site’s purpose may be to educate visitors, or it may be to sell a product. ◆ What are the site’s goals? What impact do you want your site to have on visitors? You may want your site to increase sales of your products, or to teach the viewer how to throw a curve ball. Also think about how you expect the site’s content to change over time. As your site grows, you may plan to add more interactive features, or to make it possible for visitors to submit information that can be stored and processed. ◆ What tools do you need to reach your goals? For example, if you want to use video to teach people how to throw a curve ball, you will need special hardware and software to create and edit the video. ◆ What is your primary (target) audience? Who will visit the site? A site about Washington, D.C., for elementary students will probably be quite different than one targeted toward retired adults. ◆ What kinds of hardware and software are the site’s visitors likely to be using? You should think about the capabilities of the typical visitor’s computer system as you create your site. For example, not all computer systems are capable of producing audio and video output. As you continue to work on developing your site, always keep your site’s purpose and goals in mind.
Step 2: Design and Develop a Web Site Once you have determined your Web site’s purpose, you can draw a rough diagram of the pages you will need. For example, Figure 1.9 shows the pages for a simple commercial site.
Figure 1.9 When developing a Web site, begin by creating a basic plan. How is this chart similar to an outline you might create before writing a history report?
The Design Process After you have a rough sketch of your site, you are ready to move to the design process. In this phase, you determine what the Web pages will look like, as well as how they will interact with each other. The design process can be divided into three categories: interaction design, information design, and presentation design. Table 1.3 on page 17 shows the main purpose of these three design categories. Welcome to Our Site
Products
16
Ordering Information
Chapter 1
Press Releases
Contact Us
Questions and Answers
Specials
Design Categories Category
Purpose
Questions to Consider
Interaction design
To determine how hyperlinks will help the user navigate through a site.
• Where will the user need to go? • In what order will the user move through the site? • Is each link’s purpose clear to the user?
Information design
To determine the content that will appear on each page.
• What text will I include on each page? • What graphics will I include on each page? • How will my text and graphics support the site’s purpose?
Presentation design
To determine the physical appearance of the site’s pages.
• What look and feel will the site have? • What color scheme will I use? • How will I position my hyperlinks?
Implement the Design When you implement your design, you use your design plan to create an actual Web site. A software application is used to implement your plans. For most of the activities in this book, you will use the Web development tool Macromedia® Dreamweaver® . Other popular development tools include Adobe® GoLive® and Microsoft® FrontPage® .
Step 3: Evaluate and Test a Web Site
Table 1.3 The design process has three main categories. During which category would you decide that you want your site to feature the color red?
When you evaluate a site, you confirm that your completed site meets your intended purpose and goals. Then, you test your site to make sure that everything works and displays correctly. When testing, you should: ◆ make sure all your hyperlinks work correctly. ◆ use various browsers and different computers (preferably both a Macintosh and a Windows computer) to view your site.
Step 4: Implement a Web Site After a site has been evaluated and tested, it is ready to be implemented, or published. Publishing a Web site means copying it to a Web server. This process is often referred to as “going live.” Make sure you test your links after publishing to make sure they work. Anyone with Internet access can use a Web browser to view a site once it is published.
Step 5: Maintain the Site Once you publish a site, you must keep it current and working properly. Web site maintenance includes: ◆ adding, deleting, and updating content and pages. ◆ checking that links continue to work properly.
You Should Know For many companies, the time and cost of maintaining a Web site exceeds that of creating a new site.
Identify What tool do you need to use to implement a design? Web Basics
17
Web Site Development Careers and Skills What kinds of skills do I need to pursue a career in Web site development?
Activity 1.2 View Professional Web Pages View examples of Web portfolios and good Web design by connecting to the links available at WebDesignDW.glencoe.com.
Developing a Web site requires writing skills, design skills, and programming skills. In most companies, professionals with different abilities work together to create Web sites (see Figure 1.10).
Web Authors The Web author writes the actual text that will appear on each page of a Web site. A Web author must be able to write clearly and concisely. Viewers quickly lose interest in a page that is too wordy or boring. You will learn more about writing good Web content in Chapter 6.
Web Designers A Web designer focuses on the look and feel of the Web site. He or she determines such things as a site’s page layout, color scheme, and graphic elements. The Web designer makes certain that pages are visually engaging, and that they present information in an easy-to-use format. Designers must be able to use color effectively and layout text and graphics attractively. In a well-designed page: ◆ the viewer’s eye is attracted to important elements. ◆ the page’s purpose is clear. ◆ links are well-marked and easy to use.
Figure 1.10 It often takes a team of people with diverse skills to create a Web site. What types of careers are available to people interested in Web site development?
Some Web designers also learn the programming skills needed to develop portions of a Web site. However, they generally leave complex programming tasks to Web developers.
Web Developers A Web developer uses programming skills to create entire Web sites and make sure that the site functions properly. The developer knows how to program HTML, which is the code used to create Web pages. (HTML will be discussed in more detail in Chapter 4). Web professionals often use the terms Web development and Web design interchangeably. However, these terms are not identical. ◆ Web development refers to the entire process of determining a site’s goals, and designing, publishing, and maintaining a site. ◆ Web design refers specifically to the process of determining a site’s content, appearance, and navigational scheme.
18
Chapter 1
WebDesignDW.glencoe.com
Webmasters The Webmaster manages and maintains the Web site. Some Webmasters develop Web sites, while others maintain sites that were developed by other professionals. Webmasters are responsible for the overall quality and usefulness of Web sites. For example, a Webmaster makes sure that: ◆ the site is useful to visitors. ◆ the site functions properly. ◆ the site is up-to-date. Many Web sites allow you to e-mail the Webmaster. You may want to e-mail the Webmaster if: ◆ a site is not working properly ◆ some of the site’s content is outdated. The technology that makes the World Wide Web and Web pages work is constantly changing. Advances in computing power and software applications allow for more complex Web sites that include audio, video, and high-quality animation. Because this is a constantly changing industry, Web development professionals must continually improve their existing skills and learn new ones. Summarize What skills should a Web designer have?
Section 1.3 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Web site development consists of five steps.
1. Define interaction design, information design, presentation design, Web author, Web designer, Web developer, Webmaster.
4. Compare and Contrast How are these three jobs different from one another: Web author, Web designer, and Webmaster?
• The specific purpose of a Web site should be determined before the site is designed. • Publishing a Web site means copying the site files to a Web server. • Careers in Web site development include Web designer, Web developer, Web author, and Webmaster.
2. Summarize the three categories of the Web design process. 3. Describe the tasks involved in the five basic steps of Web development.
5. Synthesize How do interaction design, information design, and presentation design work together to create a functional Web site?
Apply It! Identify Career Skills Make a list of skills that each of the following professionals would need to perform his or her job: Web designer, Web developer, Web author, and Webmaster. Identify which of those skills you have, and which you would need to develop.
Web Basics
19
Working on the Web
T
here is a vast market for talented Web designers who create the look of a site, its content, and the user interaction.
Identify Web Design Jobs To understand career opportunities for Web designers, surf through different Web sites. Some are designed to entertain and feature brilliant graphics and interactive elements. Others provide training and educational content. There are e-commerce sites for complex businesses and search engines for filtering information.
Map a Career Path Even if you are uncertain of your goals, it is helpful to map out a career path. Identify your short- and long-term expectations. Where would you like your career to begin and end? What jobs do you hope to have during your career? There are many resources for finding Web-related jobs, including college job centers, newspapers, and specialized Online classified ads are a good place to look for job opportunities Web sites where companies on the World Wide Web. post job openings. Job descriptions will help you determine what type of education and experience you will need for various types of Web careers. When you start looking for work, try to find entry-level positions (including internships) that can help you gain experience. Often, people obtain credentials with a particular career in mind, only to discover that on-the-job experience may lead them to new, unexpected career paths.
1. Research Careers Research and evaluate Web career opportunities posted online. Identify your career goals and create a career plan. Then, use the Web to research educational institutions that could help you reach your career goals. 20
Chapter 1
2. Write a Report Participate in a career-related activity. For example, interview someone who works in an area of interest to you. In a short report, describe the activity and what you learned.
SECTION 1.4 AN INTRODUCTION TO DREAMWEAVER Focus on Reading Read to Find Out This section presents some of Dreamweaver’s basic features. As you read, compare Dreamweaver’s features to those of other application programs with which you are familiar.
Main Ideas
Key Terms
Reading Strategy
Dreamweaver is similar to other application programs. Dreamweaver provides many features, such as toolbars, menu bars, and different page views that simplify creating a Web site.
interface panel inspector
Identify the seven major elements of the Dreamweaver interface. Use a diagram like the one below (also available online).
Elements of the Dreamweaver Interface
Macromedia Dreamweaver is a Web site development tool. This type of tool is sometimes referred to as a visual or WYSIWYG (pronounced Whizzy Wig) editor: What You See Is What You Get. Because Dreamweaver is a visual editor, you can create pages that contain text, graphics, links, and multimedia elements without having to view or edit HTML code.
The Dreamweaver Interface What are the main elements of the Dreamweaver interface?
Many of Dreamweaver’s features are similar to other applications you have used. For example, it contains elements such as drop-down menus and toolbars with buttons.
Figure 1.11 The Start page from Dreamweaver. What three options are available on the Start page?
The Start Page When you first open Dreamweaver or do not have any documents open, the Start page appears (see Figure 1.11). You can use this page to open recently used files, to add to or modify existing Web sites, or to create new Web site files.
WebDesignDW.glencoe.com
Web Basics
21
Main Dreamweaver Interface Elements You Should Know In Dreamweaver, the Insert and Document toolbars open automatically when you open the program. Choose View>Toolbars> Standard to open the Standard toolbar.
An interface is the means by which a user interacts with either a computer or a computer program. Figure 1.12 shows the seven major elements of the Dreamweaver interface, which are described below. ◆ Title bar—displays information such as the name of the current document shown in the document window. ◆ Menu bar—features drop-down menus that contain related options. For example, the File menu has options that allow you to open, save, and close documents. ◆ Toolbar—allows you to select options by clicking a button. There are three toolbars available in Dreamweaver: Insert, Document, and Standard. The Insert toolbar has different views that display different button options. ◆ Document window—displays the document you are working on.
Figure 1.12 The Dreamweaver interface contains many elements found in other application programs. Which of the elements are similar to those you have used in other applications?
◆ Status bar—provides information such as the estimated download size of the current page. ◆ Panel—contains tools and commands that you can use to manipulate your workspace. For example, the Files panel helps you manage and navigate the files and folders in a Web site. ◆ Inspector—provides information about elements of a Web page. The inspector changes depending on what element is selected on the page. Title bar
Insert toolbar
Menu bar
Standard toolbar
Document toolbar Document window Panels
Status bar
Inspector
Identify What information is displayed in the Files panel?
22
Chapter 1
Viewing Web Pages in Dreamweaver How can I open a site’s home page in Dreamweaver?
A Web site’s home page should be named either index.html or default.html. You can identify a site’s home page in the Files panel by looking for these names. Double-click a file’s name in the Files panel to open other pages in a site. The name of each open page is listed on a tab at the top of the window.
Viewing a Home Page In the following activity, you will open the Music Department Web site’s home page in Dreamweaver.
ACTIVITY 1B Open a Web Site in Dreamweaver 1 From your desktop, click the Start button at the bottom-left of your screen. Choose Programs or All Programs, and select Macromedia Dreamweaver MX 2004. The program opens with the Start page displayed. (Your classroom computer may work differently. See your teacher if you have difficulty launching Dreamweaver.) 2 From the menu bar, choose Site and click Manage Sites (Site>Manage Sites). 3 In the Manage Sites dialog box, click the New button and select Site. 4 In the Site Definition dialog box, make sure the Basic tab is selected. Under What would you like to name your site?, key: Music Department. Your dialog box should look like Figure 1.13. Click the Next button.
Figure 1.13 The site’s name has been keyed into the Site Definition dialog box. Basic tab
Site name
5 Under Do you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP?, choose No, I do not want to use a server technology. Click the Next button. 6 Under How do you want to work with your files during development?, click Edit local copies on my machine, then upload to server when ready (recommended). Under Where on your computer do you want to store your files?, click the Folder icon.
Troubleshooting The illustrations and activities in this book use the Dreamweaver MX 2004 interface. If you are using a different version of Dreamweaver and have difficulty completing an activity, ask your teacher for help.
Web Basics
23
7 Ask your teacher where to locate the DataFiles\Examples\MusicDept folder. Ask your teacher how and where to save the Music Department Web site. In the Site Definition dialog box, click Next. 8 Under How do you connect to your remote server?, click the dropdown arrow and select None. Click the Next button. 9 A summary of the settings you selected is displayed. Click the Done button. 10 Click the Done button again to close the open dialog box. The Files panel on your screen should look similar to Figure 1.14.
Figure 1.14 The files of the site you just opened are listed in the Files panel.
Site files
11 In the Files panel, double-click index.html. Your screen should look like Figure 1.15.
Figure 1.15 Select index.html to open a site’s home page.
24
Chapter 1
Using Different Views Dreamweaver allows you to view the same page in different ways. There are three different view buttons: Code, Split, and Design (the default view). In the following activity, you will look at the Music Department home page in different views.
ACTIVITY 1C Use Different Views and Close Dreamweaver 1 Check that your Music Department Web site is open and the home page is displayed. 2 On the Document toolbar, click the Code button. Your screen should look like Figure 1.16.
Figure 1.16 The HTML code used to create a Web page is displayed in Code view.
Code button
3 On the Document toolbar, click the Split button. Your screen should look similar to Figure 1.17.
Figure 1.17 Split button
In Split view, the top half of the screen shows the HTML code while the bottom half shows the page in Design view.
Pull bar to adjust pane sizes
Web Basics
25
4 Click the Design button to return to the default view. Your screen should look like Figure 1.18.
Figure 1.18 The Web page in Design view.
Click to close Dreamweaver
5 Practice switching among the different views. When you are done, return to Design view. 6 Press F12 to preview the site in a Web browser. Close the Web browser. 7 In Dreamweaver, choose File>Close (or press Ctrl + W). The page you are viewing closes. 8 To close Dreamweaver, click the Close button in the top-right corner of the window (see Figure 1.18).
You will use all of the views described in this section as you create Web pages. Identify What does the file name index.html signify in a Web site?
Section 1.4 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• The Dreamweaver interface is similar to other software applications.
1. Define interface, panel, inspector.
4. Analyze Why might an individual need to use Code view when creating a Web site?
• The Files panel displays the Web site’s folders and files. • You can view a page in Code, Split, or Design view.
26
Chapter 1
2. Identify the parts of the Dreamweaver interface. 3. Explain how to open the Files panel.
5. Draw Conclusions Why do you think Web developers need to view Web pages in different views?
Apply It! View Web Pages Use Code view to view three pages of the Music Department Web site. Locate each Web page’s title in the HTML code. Write the title of each page on a separate piece of paper.
CHAPTER 1
Reading Review
SECTION 1.1 Introduction to the Web Key Terms Internet, 6 World Wide Web, 6 file, 6 Web browser, 7
SECTION 1.3 Web Site Development Key Terms
Web site, 7 Web page, 7 home page, 7
interaction design, 16 information design, 16 presentation design, 16 Web author, 18
Web designer, 18 Web developer, 18 Webmaster, 19
Main Ideas
Main Ideas
■ Web design focuses on creating Web sites that meet
■ The specific purpose and goals for a Web site
■ ■
■ ■ ■
specific goals. The Internet consists of all the hardware that connects computers around the world. The World Wide Web (the Web) is the software that allows users to access information stored on the Internet. Web browsers interpret and display information found on Web pages and Web sites. Web sites are composed of Web pages. The major types of Web sites are commercial sites, portal sites, informational sites, educational sites, and personal sites.
SECTION 1.2 Elements of a Web Page Key Terms text, 12 graphic, 12 multimedia, 12 audio, 12
video, 12 animation, 12 hyperlink, 13
Main Ideas ■ Text consists of words, letters, numbers, and symbols. ■ Graphics can be used to attract a viewer’s attention
and to explain difficult concepts. ■ Multimedia elements capture viewers’ attention and add interactivity to a Web site. ■ Hyperlinks tell the Web browser to move to a different location on the page, on the site, or on the Web. ■ A Web browser can be used to view and navigate around a Web site.
■ ■ ■ ■ ■ ■
should be determined before the site is designed. Web site development consists of five steps. Interaction design focuses on how the user will navigate through the site. Information design concentrates on the specific content that will appear on the site. Presentation design focuses on the physical appearance of the Web site. Publishing a Web site means copying the site files to a Web server. Careers in Web site development include Web designer, Web developer, Web author, and Webmaster.
SECTION 1.4 An Introduction to Dreamweaver Key Terms interface, 22 panel, 22
inspector, 22
Main Ideas ■ The Dreamweaver interface is similar to other
software applications. ■ You can use the Start page to open existing files or to create new Web site files. ■ The Files panel displays the folders and files that can be accessed in the current Web site. ■ You can view a page in Code, Split, or Design view.
Web Basics
27
CHAPTER 1
Review and Assessment
AFTER YOU READ
Understanding Main Ideas 8. Identify the types of multimedia elements that may be featured on Web pages. 9. List the three types of hyperlinks. 10. Describe the two steps that should be used to evaluate a Web site. 11. Summarize how a Webmaster differs from a Web author. 12. Explain how Dreamweaver is similar to other software applications. 13. Summarize each of the parts of the Dreamweaver interface. 14. Describe how a Web site is different from a Web page.
28
Chapter 1
➠
1. What type of software is used to view Web pages on a computer screen? 2. Which Dreamweaver interface element would you use to display a Web site’s folders and files? 3. What is the purpose of presentation design? 4. Which page in a Web site do viewers usually see first? 5. WWW is an abbreviation for what term? 6. Which Web page element allows users to move from one online page to another? 7. What is a group of computers that communicate together called?
Designing a Web Site
➠
Reviewing Key Terms
15. Identify three things that you must determine when designing a Web site.
➠
Survey Skills Develop a personal study tool by modifying the survey strategy introduced on page 5. Use the section and paragraph headings to create a topic outline, leaving enough room between topics to add key items. Then close your textbook and fill in as much information as you can remember about these topics. This is a good way to help you determine which topics you understand and which topics need the most additional review.
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
To Determine
To Determine
To Determine
16. Summarize the three categories of the design and development process for a Web site. Design Category
Critical Thinking 17. Describe the purpose of the following Dreamweaver page views: Design view, Code view, and Split view. Why does Dreamweaver allow Web site developers to view their Web pages in different views? Explain your reasoning. 18. Make Predictions Your school is preparing to build a Web site. The site will contain the following items: a calendar of upcoming events, pictures of recent school events, links to scholarship offerings, information about courses, and information about school clubs. What parts of the site do you think will require the most maintenance? What parts of the site will be the easiest to maintain? Explain your reasoning.
CHAPTER 1
Review and Assessment
19. Compare and Contrast You are planning to buy a new pair of skis. Only one retailer in your community sells the brand of skis you want. You locate two e-commerce sites that sell the same brand. What factors should you consider when deciding whether to buy skis from a local retailer or from an e-commerce site? On your own sheet of paper, complete the table below. Then explain your decision. Retailers
Price
Delivery
Service
Local Retailer E-Commerce Site
20. Make Inferences Which of the two sentences below would be easier to read on a Web page? Explain your reasoning. A multitude of skiers escape from the everyday world by visiting the sunny slopes of Mt. Snow. Special discounts and other details are available through inquiry. Skiers love Mt. Snow slopes! Contact us now for details and vacation packages and deals.
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below.
21.
+
22. 23.
Result Result
+
WebDesignDW.glencoe.com
Result
Reading & Writing Read the paragraph below and then answer the question.
There are four main types of Web design professionals. A Web author writes the text that will appear on a Web site. Web authors must be able to write concisely, because viewers lose interest in wordy pages. Web designers focus on the look and feel of a Web site. Web developers use programming skills to create Web sites and make sure the sites function properly. Webmasters manage and maintain Web sites. Some Webmasters develop Web sites, while others maintain sites that were developed by others. According to the paragraph, which of the following statements is true? A Web page should mainly contain text. Part of a Web designer’s job is to determine how a Web site will look. Webmasters only maintain sites that they have created. Web designers must have programming skills.
WebDesignDW.glencoe.com Study with PowerTeach Go to the book Web site shown above. To review the main points in this chapter select e-Review>PowerTeach Outlines>Chapter 1.
Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 1.
Web Basics
29
CHAPTER 1
Activities
1. MAKING CONNECTIONS Math—Create a Graph When preparing to design a Web site, remember that you will need to think about various factors. One of these factors is the audience. Users want to spend as little time as possible reading, and want more information in a short viewing time. With this in mind: ◆ Find five different news organization home pages that you think are well designed. ◆ Count the number of words you can see on the opening screen (without scrolling) of each site. ◆ Calculate the average number of words that are used for each of the five sites. ◆ Plot your results for each site on a bar graph. What is the average number of words used on all five sites? ◆ Write a brief report noting the patterns you noticed and how they can help you plan what text to use.
2. STANDARDS AT WORK Students use technology tools to enhance learning, increase productivity, and promote creativity. (NETS-S 3)
Use Productivity Tools Dreamweaver is a productivity tool for creating Web pages and managing Web site development. Although beginners can use it immediately, it also contains many advanced features for professionals. If you design a site for a business, you may have to use Dreamweaver in more complex ways. One of the most useful (and underused) tools in computer applications is the Help feature. Using the Help feature can provide you with instructions on how to get the most out of the software you are using. The Help feature can also guide you through tasks you may be expected to do on the job. Explore the features available to you in Dreamweaver by accessing its Help Contents (select Help>Using Dreamweaver). Choose five topics that relate to features you learned about in the chapter. Make a chart that describes each feature, how to access it, and why you would want to use it. 30
Chapter 1
CHAPTER 1
Activities
3. TEAMWORK SKILLS Group Planning Working in a small group, plan a Web page about a ski resort. You have only one Web page to work with, but you may include links to other relevant Web sites about the resort. As your team plans the page, answer the following questions: 1. 2. 3. 4. 5. 6.
What are the purpose and goals of the page? What information will the page include? What Web page elements will best convey the information? What hyperlinks will we include? What look and feel should the page have? What color scheme will we use?
Write a summary of your answers to the questions. Draw a sketch of the page’s layout. The sketch should show the placement of elements on the page and the basic look and feel that your team envisions.
4. CHALLENGE YOURSELF Identify Web Sites Although many types of Web sites exist, most fall into one of five major categories: commercial, portal, informational, educational, or personal. Choose one site category and surf the Web to find examples. Try to find two sites that are different from each other even though they fit into this same category. For example, e-Bay and Macromedia’s Web sites are both commercial, but one is a retail site and the other is a corporate site. Print out the home page for each Web site you choose. Evaluate the two Web sites and draw a four-column table like the one below. Fill in the following information: ◆ What category do the Web sites fit into? ◆ What subcategory can they be classified as? ◆ What Web elements do the sites contain?
WEB SITE
CATEGORY
SUBCATEGORY
ELEMENTS
Site #1 Site #2
Write a few sentences describing the differences and similarities between the Web sites. Be sure to cite your URL for each site and the date you retrieved the information from the site. See page 88 for information on how to cite online sources. Web Basics
31
CHAPTER 1
Projects
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Use Hyperlinks
Explore the hyperlinks at a major online newspaper such as USA Today, the New York Times, the Chicago Tribune, or the Los Angeles Times. Write the name and Web address of the newspaper you have chosen. Use a hyperlink to find the travel or vacation listings on the site. Write the Web address of the page to which the link takes you. On that page, find a hyperlink on the page that takes you to travel news or interests. Describe the information you find. Search to find information about ski vacations and resorts. (Hint: On some sites you may have to scroll through a Select Region list to find the category, then click Search.) Write down three different places listed where you could go on your ski vacation. Return to the home page, using either the logo or a home page link.
2. Switch Views and Use the Files Panel
32
Display a Web page using different Dreamweaver views. Open Dreamweaver. In the Files panel, select your Music Department Site from the Files drop-down menu. The folders and files for this site will appear in the Files panel. Double-click index.html to open the home page. The Web site automatically opens in Design view. Examine the page carefully. Click the Code button. What differences did you notice between Design and Code view? Click the Split button. What happens to the view? How does the text “Welcome” appear in the two different views that you see? Close Dreamweaver without saving your changes.
Chapter 1
CHAPTER 1
Projects
Read the projects described below. Then follow the directions to complete each project.
1. Evaluate Web Site Design Locate five different Web sites and write down the URL for each. Evaluate the five sites and make a table like the one shown below that identifies: ◆ The site’s category (e.g., commercial, informational, personal) ◆ The purpose of the site ◆ The target audience (consider age, gender, interests, economic levels) ◆ Key elements that “jump out at you” on the home page With your teacher’s permission, print out each Web site’s home page.
SITE
CATEGORY
The Museum of Educational Modern Art in New York (www.moma.org)
PURPOSE Educate viewers about art and the museum’s collection
AUDIENCE General population including teenagers and adults
KEY ELEMENTS Events, artwork, and online exhibits
2. Research Web Development Careers Select one of the following career opportunities: Web developer, Web designer, or Webmaster. Then, conduct research to answer the following questions: What types of specialized skills does the job require? What types of leadership skills does the job require? How do you prepare or train for the job? What are some of the job responsibilities? Organize your information and write a one-page report about the career.
Web Basics
33
CHAPTER
2
Computer Basics
YOU WILL LEARN TO… Section 2.1 Identify hardware Describe processing components Compare and contrast input and output devices Compare and contrast storage devices Identify and describe operating system software Identify and describe application software Summarize crossplatform issues Section 2.2 Identify types of networks Examine types of network connections Identify network hardware and software Section 2.3 Create a new Web site Save a Web page Format text Insert a graphic Create subpages
34
Chapter 2
WHY IT MATTERS ................................................. It is almost impossible to imagine a world without computers. When you use a card to purchase an item, or pump gas at the gas station, you are using a computer. Computers are the visible—and invisible—helpers that have become an integral part of our daily lives. Think about ten tasks you perform every day. Then note which of these tasks involve a computer. Write a brief paragraph that answers the following questions. Which tasks could you not complete without a computer? How would your daily routine be different if computers did not exist?
CHAPTER
2
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 2.1 Research Computer Systems ..... 42 2.2 Research Network Connections ................................. 46 2.3 Format Text .................................. 56 You Try It Activities 2A Create a One-Page Web Site........ 49 2B Insert and Format Text ................ 51 2C Insert Graphics ............................ 52 2D Create a Subpage .........................55 Chapter Assessment Making Connections ........................... Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................
60 60 61 61
You Try It Skills Studio Format Text .......................................... 62 Add Graphics and a List to a Web Site ............................................ 62 Web Design Projects Create Inventory Sheets ..................... 63 Prepare a Presentation ...................... 63
IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects
ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Key Terms Knowing the dictionary definition of a word does not always help you understand the word’s full meaning. The ability to understand the meaning of a word in the context of the material will help you with your reading comprehension. To gain a more complete understanding and to help you recall the meaning, create a Key Term Journal. Divide a piece of paper into four columns. Label the first column Key Term. Then, label the other columns: What is it? What else is it like? and What are some examples? Write down each key term and answer the questions as you read the chapter.
WebDesignDW.glencoe.com
Computer Basics
35
SECTION 2.1 COMPUTER HARDWARE AND SOFTWARE Focus on Reading Read to Find Out In this section, you will learn about various types of computer hardware and software. Read to find out which hardware and software will help you create a Web site.
Main Ideas
Key Terms
Reading Strategy
Computer systems are composed of users, hardware, software, and data. Hardware is a computer’s physical components. Software gives hardware instructions to make it work.
hardware input device output device software operating system (OS) graphical user interface (GUI) application software
Categorize the four types of computer hardware. Use a diagram like the one below (also available online).
Computer Hardware
When you create a Web site for the first time, the task may seem overwhelming. Understanding the tools you will be using can make the task more manageable.
Computers and the Computer System What are the parts of a computer system?
A computer is an electronic device that processes data. Computers are categorized as either PCs or Macs. A PC is a computer that runs the Windows operating system (OS). A Mac is a computer that runs the Macintosh OS. As shown in Figure 2.1, a computer system consists of four parts.
Figure 2.1 A computer system is made up of four parts: users, hardware, software, and data. What is the function of software?
Software The instructions that tell the computer what to do.
Data The individual bits of information.
Computer System Hardware The physical components of the computer.
User The person working on the computer.
Describe How is the user an essential part of the computer system?
36
Chapter 2
WebDesignDW.glencoe.com
Figure 2.2 Power supply
The CPU is usually located on the motherboard, which is a computer’s main circuit board. What is the function of the CPU?
Storage devices
Hard drive
CPU
RAM
Motherboard
Hardware: Processing Components What is the difference between the CPU and RAM?
Hardware is the physical components of the computer. The purpose of hardware is to get data into the computer, to process the data, and to produce results. Processing components convert raw data into information.
Central Processing Unit Inside every computer is a central processing unit (CPU), or processor. The CPU is like the “brain” of the computer. For example, the CPU can: ◆ add groups of numbers. ◆ change the color of graphics.
Caution Remember to save your work frequently to avoid losing important data.
In most computers, the CPU is a single chip, called a microprocessor. This chip is usually located on the computer’s motherboard (see Figure 2.2).
Memory The computer stores data it is currently processing in random-access memory, or RAM. The more RAM a computer has, the faster it can process data. RAM is also called primary storage because it is where the computer first processes data. However, RAM only stores data temporarily. When the computer is turned off, or the power is interrupted, anything stored in RAM is lost. Explain Why is RAM also called primary storage?
Computer Basics
37
Hardware: Input and Output Devices How many ways are there to input data into a computer?
Data must be entered into a computer to be processed. You use an input device to enter data into a computer. Different kinds of input devices allow you to enter text, commands, images, or audio. An output device lets users examine the results of processed data. Most Web designers and developers use a few standard input and output devices when creating a Web site. Commonly used input and output devices are shown in Table 2.1.
Table 2.1
Types of Input and Output Devices
Computer users rely on input devices to enter data and output devices to examine processed data. Which device would you use to input audio files into your computer?
Example
Description A keyboard is used to input text and numbers and to send commands to a computer.
Input Devices
A mouse is used to click on icons and buttons, highlight text, and drag and drop images, text, files, and folders. Joysticks and controllers control movements on the screen during computer games. A scanner lets you convert printed images or documents into digital files. Many digital cameras connect with computers so you can download, edit, and e-mail the photos you take. A microphone lets you save audio right to your hard drive.
Interactive Tutorials Go to the book’s Web site at WebDesignDW.glencoe.com for an interactive tutorial about system settings.
Output Devices
A monitor displays the text and graphics that you input or download into your computer.
A printer takes electronic information from the computer and produces a paper copy, which is also called a hard copy. Speakers allow you to hear audio, such as music, speech, and sound effects, on your computer.
Identify What are three common output devices?
38
Chapter 2
WebDesignDW.glencoe.com
Hardware: Storage Devices What is the best way to store data long term?
While RAM is the computer’s primary storage, it only saves data temporarily. You need to use a secondary storage device to save your data for the long term. Applications and frequently used files are usually stored on your computer’s hard drive. Removable storage devices such as CDs are used to transfer files between computers. They also are used to install new software applications on a computer’s hard drive. A device’s storage capacity is usually measured either in megabytes (MB) or gigabytes (GB). A byte is the amount of storage space required to store a single character, such as the letter “d.” A megabyte is about one thousand bytes, while a gigabyte is about one million bytes. The storage capacity of different storage devices is shown in Table 2.2.
Activity 2.1 Investigate Storage Devices Explore the characteristics of common types of storage devices at WebDesignDW.glencoe.com.
Table 2.2
Types of Storage Devices Storage Device
What It Does
Storage Capacity
Hard Drive
The hard drive (also called the hard disk) is the major storage device inside your computer. This is where all your programs, files, and folders are permanently stored.
40 GB to 100 GB or more
Floppy Disk
A floppy disk is a portable device that stores smaller files such as text documents.
1.44 MB
Zip Disk
A zip disk is a portable device that can store a greater amount of data than a floppy disk.
100 MB to 750 MB
CDs and DVDs
CDs and DVDs are portable devices that can store very large amounts of information, such as video. They are often categorized as read only, recordable, or rewritable.
CD = 700 MB DVD = 4.7 GB to 17 GB
Flash Drives
Flash drives (sometimes called pen or thumb drives) plug directly into a computer’s USB (Universal Serial Bus) port. Some are as small as a pen or a keychain.
32 MB to 512 MB or more
Users rely on storage devices to save data. What is an example of a removable storage device?
You Should Know If the letter “D” is equal to one byte, then 1 MB is about one thousand “Ds,” a 1 GB disk could store about one million “Ds,” and a 1 KB disk could store about one billion “Ds.”
Analyze How is a hard drive different from a removable storage device?
WebDesignDW.glencoe.com
Computer Basics
39
Types of Software How is an operating system essential to the computer? You Should Know UNIX and Linux are two other flexible operating systems that are found primarily on networks.
Computer software gives instructions to the computer’s hardware to make it work. There are three main categories of software: operating system, application, and utility software.
Operating System Software
Figure 2.3 A GUI desktop displays the files, folders, menus, and programs available on the computer. How does a GUI make a computer easy to use?
An operating system (OS) controls all of the other software programs on a computer. The two most common OSs are: Microsoft® Windows® (for PCs) and Macintosh OS (for Apple Computers). An OS is responsible for keeping track of everything the computer does (task management), and moving data between RAM and other storage devices (memory management). A computer’s OS also keeps track of input devices, and sends output to the appropriate hardware. An OS provides an interface through which a user gives commands to the computer. A graphical user interface, or GUI (pronounced “goo-ee”), allows users to select words, symbols, or graphics from a desktop. Both the Windows and the Mac OS desktops shown in Figure 2.3 use a GUI.
Mac OS
Windows OS
40
Chapter 2
Application Software You use application software (commonly referred to as applications) to perform different tasks on your computer. Common application software includes word processing, spreadsheet, database, and presentation applications. Web browsers and e-mail programs are also types of application software. Examples of application software are shown in Table 2.3.
Table 2.3
Types of Application Software Type of Software
Function
Examples
Web browsers
Use to visit Web sites on the Internet.
Microsoft Internet Explorer®, Apple Safari®, Netscape®, Mozilla Firefox™
E-mail
Use to exchange messages and files with other computers.
Microsoft Outlook®, Eudora®, Outlook Express™
Word processing
Use to create documents such as letters, reports, and newsletters.
Microsoft Word®, Corel WordPerfect®
Spreadsheet
Use to work with numbers and calculations to create tables, charts, and graphs.
Microsoft Excel®, Lotus 1-2-3®
Database
Use to organize and retrieve large amounts of information.
Microsoft Access®, FileMaker Pro®, Oracle®
Presentation
Use to create a slide presentation.
Microsoft PowerPoint®, Apple Keynote®, MS Producer
You use application software to perform specific tasks. What kind of application would you use to create a newsletter?
Often, customers purchase suites of programs, rather than individual programs. Examples of suites are Microsoft® Office™ Professional and Macromedia® CS Suite. Today’s operating systems are capable of multitasking. This allows you to work with more than one application or document at a time.
Utility Software Utility software helps you control your computer and keep it in good running condition. Examples of utility software include antivirus programs and other security programs that keep a computer safe from outside threats. McAfee® and Symantec™ both manufacture popular antivirus and security utility programs. Contrast What is the difference between operating system and application software?
Computer Basics
41
Cross-Platform Issues Why must your computer components be compatible?
Your computer’s hardware, operating system, and application programs must all work together in order for your computer to function properly.
Compatibility When computer components work together properly, they are said to be compatible. The Windows and Macintosh operating systems are generally incompatible. This means that you cannot run the Windows XP operating system on a Macintosh computer, nor can you run the Mac OS on a Windows computer. Windows and Macintosh computers sometimes cannot even share hardware without the help of other devices or software. In addition, applications must be compatible with both the computer hardware and the OS. Some applications come in several versions, while others are designed for only one OS specifically.
Saving Files Some programs create files that can be opened on either a Mac or a Windows OS. Other applications let you save your document in a format that a different operating system or a different version of the program can use. For example, if you create a Word document in Windows, you can save it in many formats—in a Microsoft Word format, in earlier versions of Word, or even in a format for another program, such as Corel WordPerfect. Summarize How are the Windows and Macintosh operating systems incompatible?
Section 2.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Computer systems consist of hardware, software, one or more users, and data.
1. Define hardware, input device, output device, software, operating system (OS), graphical user interface (GUI), application software.
4. Compare and Contrast List the capacity and general uses for primary and secondary storage devices.
• Application software performs specific tasks, such as word processing and Web page creation. • A graphical user interface (GUI) allows users to interact with software by selecting words, symbols, or graphics from the screen.
2. Compare and Contrast the input devices discussed in this section. 3. Describe the six types of application software mentioned in this section.
5. Evaluate Create a list of input, output, and storage devices and software that you would include in a computer system for Web designers. Explain why you chose specific devices.
Apply It! Research Computer Systems Research the current prices for computer systems. Find at least three quotes from online or retail sources. Evaluate each quote and recommend the system that offers the most value. Explain why you chose the system.
42
Chapter 2
SECTION 2.2 NETWORKS Focus on Reading Read to Find Out This section explains the different types of networks, how networks work, and the available types of network connections. Read to find out how networks allow people to communicate with each other over the Internet.
Main Ideas
Key Terms
Reading Strategy
Networks allow computers to share information, messages, and software. Dial-up, broadband, and wireless are three types of network connections.
network local area network (LAN) wide area network (WAN) server client
List facts about the three types of network connections. Use a table like the one below (also available online). Dial-Up
Broadband
Wireless
In a network, communication lines or wireless connections are used to connect computers together. Once connected to each other, computers can easily share information, communications such as e-mail, and resources such as software. Networks also allow users to access the Internet.
Types of Networks What are the two main types of network configurations?
A configuration refers to how a system of computers is arranged or set up. Networks come in two main configurations. A local area network (LAN) connects computers in a single location. A wide area network (WAN) connects computers across a wider geographical area. The major difference between a LAN and a WAN is the size of the area that the network covers, as shown in Figure 2.4.
Activity 2.2 Explore Networks Learn more about various types of networks at WebDesignDW.glencoe.com.
Figure 2.4
LAN Restricted to a small geographic location such as a company, department, building, or complex of buildings.
Contain two or more computers connected together.
WAN Can include computers in a wide geographical area such as multiple blocks, cities, states, or continents.
There are two types of networks: local area networks (LANs) and wide area networks (WANs). What is the major difference between LANs and WANs?
Identify Is the Internet a LAN or a WAN?
WebDesignDW.glencoe.com
Computer Basics
43
Table 2.4
Types of Internet Connections
Cost, speed, and convenience are three of the factors that many people consider when choosing an Internet connection. What are the advantages of using a broadband connection over a dial-up connection?
Type of Connection
How It Connects to the Internet
Advantages
Disadvantages
Dial-up
• Modem • Standard telephone line
• Inexpensive • Requires no additional hardware
• Slow transmission rate • Can disconnect suddenly
Broadband
• Hardware provided by Internet service provider (ISP) • Cable television equipment, satellite dish, or dedicated telephone line
• Computer always connected to the Internet so access is instantaneous • Faster transmission rate
• Transmission rates vary • Typically more expensive than dial-up • Continuous Internet connection makes computer more vulnerable to viruses, spyware, and hackers
Wireless
• Infrared waves, radio waves, or microwaves
• Very mobile and convenient since no cables or cords are used • Internet can be portable
• Not every location has wireless accessibility • Suited to small areas • Not as reliable as traditional connections
Types of Connections How do computers connect to the Internet?
Web designers need to understand the different options available for connecting a computer to the Internet. The three main types of Internet connections are shown in Table 2.4. Many people use broadband connections. The three main types of broadband connections include: ◆ Cable Uses cable equipment to transmit data. ◆ DSL (Digital Subscriber Line) Uses high-capacity telephone lines to transmit data. ◆ ISDN (Integrated Services Digital Network), T1, and T3 Lines Use high-capacity telephone lines and provide multiple channels to transmit data. Bandwidth determines the amount of data that can be transmitted to your computer via the Internet. The higher the bandwidth, the faster the data can be transmitted. Cable transmits data one hundred times faster than dial-up, and a T3 line can transmit data about one thousand times faster than dial-up. People who tend to use Web sites that contain large files such as high-quality images and multimedia elements often prefer higher bandwidth connections since they allow files to be transferred faster over the Internet. List What are the three main types of Internet connections? 44
Chapter 2
The server sends the requested file to Client C.
Figure 2.5 In a client/server network, the server responds to the requests of client computers. What is a server?
Server Client A Client B Client C Client C requests a file from the server.
Printer
Network Hardware and Software Why must network hardware components be compatible?
Network hardware consists of the physical components that connect computers to one another. For a network to function properly, all the hardware components must be compatible.
Client/Server Networks Most LANs used by businesses today are client/server networks. These networks have a powerful central computer called a server. The job of the server is to respond to requests from individual computers, called clients. For example, a user may need information that is stored on the server. As shown in Figure 2.5, the client computer requests this information from the server, which locates the information and sends it to the client.
Modems
You Should Know Client/server networks are important to large companies because they efficiently share the processing and storage workloads among the server and the individual clients.
A modem is a hardware component that enables a computer to send and receive signals through telephone wires or cable. To establish a dial-up connection, your computer must have a modem. The modem translates the digital computer signals into analog, or voice, signals that can be transmitted over standard telephone lines. The speed of a modem is important, especially when working on the Web. Many sites contain large multimedia files with video, sound, and animation. At slow transmission speeds, a page can take a long time to load. Most dial-up modems are capable of transmitting data at 56 K (kilobytes) per second. To use a cable connection, you need a cable modem. Cable modems connect computers to the Internet through the cable television system. Much faster than dial-up connections, cable modems can transmit at speeds measured in megabytes per second, such as 2 MB. Computer Basics
45
Network Interface Cards To connect to the network, the client computer needs a network interface card, or NIC. The NIC provides the place to plug the network cable into the computer, and it creates and sends the signal from one network component to another. The NIC allows the computer to “talk” the same language as the other hardware devices on the network. One popular type of NIC, the Ethernet card, is widely used on LANs.
Routers You Should Know While a server runs a network operating system, each client computer on the network runs its own operating system. For example, a server might run Windows 2000 Server while the client computers run Windows XP.
Companies often want to connect two or more LANs so that employees using different networks can share e-mail and data. A special hardware device called a router is used to join LANs. Computers on a LAN can also access the Internet using routers.
Network Software Networks are controlled by a specific type of software called a network operating system, or NOS. The NOS is responsible for managing network resources, controlling who can access different network components, and keeping the network running smoothly. Some popular network operating systems are Novell® NetWare®, Microsoft® Windows 2000 Server™, Microsoft® Windows 2003 Server™, and Linux. List What are the different types of network hardware?
Section 2.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• LANs and WANs are two basic types of networks.
1. Define network, local area network (LAN), wide area network (WAN), server, client.
4. Compare and Contrast What are the primary differences between dial-up and broadband connections?
• Dial-up connections use modems and standard telephone lines. • Broadband connections can use cable television lines, DSLs, and ISDN, T1, and T3 lines. • Wireless connections use infrared waves, radio waves, or microwaves to transmit data.
46
Chapter 2
2. Identify the basic hardware components needed to connect a computer to the Internet. 3. Describe the difference between a client and a server.
5. Predict Outcomes Your job provides you a computer with wireless connection capability. What advantages and disadvantages do you see in having this technology?
Apply It! Research Network Connections Use the Internet or other resources to learn more about wireless network connections. Write a paragraph describing current wireless network availability. Compare one paid service with one free means of accessing a wireless connection.
Use Equipment Safely
A
ny school or workplace can pose potential dangers. To keep yourself and others safe, learn to recognize and avoid these hazards.
Avoid Computer Injury To avoid computer-use problems such as Repetitive Strain Injury (RSI), eyestrain, or backache, make sure your workstation is ergonomically correct. Always adjust your seat to keep your feet flat on the floor and your wrists straight. The monitor should be about two feet away, at a height that lets you look at it without bending or twisting your neck. Take periodic breaks to stretch and rest your eyes.
Safety-Conscious Attitude Common-sense can lead to a safer work environment. Make sure you know how to use equipment properly and stay alert for safety hazards, such as loose cords that cause tripping. Store equipment securely and avoid horseplay that can cause accidents and damage equipment. Always turn off equipment before repairing it. Never stick your hand into an open piece of equipment. Always make sure wiring is not broken before handling it. If you touch electrical components or damaged wiring, you can get shocked!
Fire Safety
Good posture and an ergonomically correct workstation will help you avoid common computer-related injuries.
Electrical fires are possible where a lot of computer equipment is in use. Circuits can overload or wiring can be faulty or outdated. Learn the location of fire alarms in your school or workplace. Make sure you know what procedures to follow in case a fire occurs.
1. Develop a Plan If an emergency occurred, would 2. Research Safety Identify common school or you know what to do? Make a presentation about work place injuries and their causes. Then, your school’s emergency evacuation plan or select one common injury and research it more create one with the other students in your class. in-depth. Demonstrate ways to avoid such an injury, including proper use of equipment. Computer Basics
47
SECTION 2.3 CREATING A BASIC WEB SITE Focus on Reading Read to Find Out The main purpose of this section is to explain how to create a basic Web site in Dreamweaver. Read to find out how Dreamweaver’s tools enable you to create a basic Web site quickly.
Main Ideas
Key Terms
Reading Strategy
When creating a Web site, you must organize and name your files so they are easy to find. The main content of most Web sites is text and graphics.
folder subfolder root folder format font subpage
To remember the nine main buttons on the Properties inspector text formatting toolbar, list each button and its purpose. Use a table like the one below (also available online). Button
Purpose
In Chapter 1, you opened a Web site in Dreamweaver and examined several of its pages. Now you will get a chance to create your own Web page.
Creating and Saving a Web Page Interactive Tutorials Go to the book’s Web site at WebDesignDW.glencoe.com for an interactive tutorial about file management.
Why is it important to stay organized when saving Web pages?
One of the most important things to learn is how and where to save your files. A folder helps you organize files in a single place. A subfolder further organizes files. Develop a system of folders and subfolders to organize your files so that you can locate your Web pages easily. When you save a new Web site using Dreamweaver, it saves the site to the location, or path, that you specify. The path identifies the drive, folder, and subfolder where the site is being saved. A Web site’s root folder is the main folder that contains all of the site’s other files and folders. In Figure 2.6, the Hardware_Devices folder is the root folder of the Hardware Devices Web site. Always select meaningful names for your folders. For instance, if your initials are MPB, you can name your general Web site folder MPB_Web_Sites. Names may include letters, numbers, and some symbols. The following symbols may not be used: ? \ * “ < > / | .
Figure 2.6 A file path identifies where you have saved items on your computer. Why is it important to know where you have saved items?
48
Chapter 2
Drive
Folder
Subfolder
WebDesignDW.glencoe.com
In the following activity, you will define a new one-page Web site. When you define a Web site, you give that site a name and assign the location where the site will be stored. The site’s name and the files and folders associated with the site appear in the Files panel once the site is defined.
ACTIVITY 2A Create a One-Page Web Site 1 Start Dreamweaver. On the Start page, under Create New, select Dreamweaver Site. 2 In the Site Definition dialog box, under What would you like to name your site?, key: Hardware Devices (see Figure 2.7).
Figure 2.7 Use the Site Definition dialog box to name your site.
Caution While this textbook provides general information about storing files, you must always check with your teacher for specific instructions on saving and storing any files you create.
3 In the dialog box, click the Next button. Select No, I do not want to use a server technology. 4 Click Next again. Select Edit local copies on my machine, then upload to server when ready (recommended). Under Where on your computer do you want to store your files?, ask your teacher which location to choose for your site’s root folder. 5 Click Next. Under How do you connect to your remote server?, click the drop-down arrow. Choose None. 6 Click Next. The Summary screen displays the site’s name and root folder location. Click Done.
Maintenance Defining a Web site in Dreamweaver makes updating and keeping track of files easier and quicker than undefined sites or pages.
7 On the Start page, under Create New, click HTML. Select View>Toolbars>Standard to display the Standard toolbar, if necessary. Computer Basics
49
8 To name your Web page, key Hardware Devices in the Title field of the Document toolbar (see Figure 2.8). This name will appear in the Web browser. 9 In the Properties inspector, click the Page Properties button (see Figure 2.8). In the Page Properties dialog box, click the Page font drop-down arrow. Choose Verdana, Arial, Helvetica, sans-serif. Troubleshooting Always make sure your site’s folders and files are saved in the root folder. Otherwise, the site will not function properly.
10 In the Background color box, key: #FFFFCC. Click OK. 11 Choose File>Save As (or press Ctrl + Shift + S). In the Save As dialog box, in the File name box, key: index.html. Make sure the Save in box displays the location of your root folder. In the dialog box, click Save. 12 In the Files panel, select Site – Hardware Devices and right-click to display the options menu. Choose New Folder and name the folder: images. This folder will hold all of your Web site’s images. Deselect the folder.
Figure 2.8 New one-page Web site with background color applied.
13 Drag the left edge of the Files panel to the left to see your site’s full file path. Confirm that both the index.html file and the images folder are stored in your site’s root folder. Your screen should look similar to Figure 2.8.
Title field
Web site path index.html page Subfolder
Page Properties
Describe What are some strategies for saving and organizing your folders?
50
Chapter 2
Adding Text to a Web Page How can I format Web text?
You are now ready to insert and format text. When you format text, you specify how text characters will look on your page. Formatting text also involves choosing a font. A font is a family of letters, numbers, and other symbols that share a consistent style (for instance, Times New Roman, Arial, and Verdana).
ACTIVITY 2B Insert and Format Text 1 In your Hardware Devices site, in the Files panel, double-click the index.html file. On the Document toolbar, make sure the Design button is selected. Drag the left edge of the Files panel to the right as needed to increase the Document window’s size. 2 Position your insertion point in the page’s upper-left corner. Key: Hardware Devices Used in My Web Pages. 3 Select the text. In the Properties inspector, click the Format drop-down arrow. Select Heading 2. 4 Click after the title and press Enter once. Key: by and then your name (for example, by Christopher Marshall ). 5 Select the text by [your name]. In the Properties inspector, click the Size drop-down arrow. Choose 16. 6 With the text still selected, in the Properties inspector, click the Italic button (or press Ctrl + I). Deselect the text. Your page should look similar to Figure 2.9.
Figure 2.9
Asterisk
Web page with formatted text.
Save
Caution An asterisk indicates that changes need to be saved. Use Ctrl + S to quickly save your work.
7 Notice that an asterisk appears in the tab of the file you are editing (see Figure 2.9). On the Standard toolbar, click the Save button or press Ctrl + S. The asterisk disappears.
Explain What does it mean to format text?
Computer Basics
51
Adding Graphics to a Web Page How do graphics enhance a Web page?
One easy way to add graphics to a Web page is to use a premade graphic. As noted in Chapter 1, the Insert toolbar contains different views. When you insert premade graphics into your Web site, the Insert toolbar needs to be in Common view. In the following activity, you will use graphics files that can be found in the Student Data Files. Ask your teacher how to store and use the Student Data Files for this book.
ACTIVITY 2C Insert Graphics 1 In your Hardware Devices site, double-click index.html to display it in the Document window. Position the insertion point after your name and press Enter. 2 On the Insert toolbar, make sure the Common view is selected (see Figure 2.10). On the Insert toolbar, click the Images button.
Figure 2.10 The Images button is displayed when the Insert toolbar is in Common view.
Common view selected Images button
3 In the Select Image Source dialog box, click the Look in drop-down arrow. With your teacher’s permission, navigate to the DataFiles\Ch02\ Images folder. In this folder, select the file named camera.gif (see Figure 2.11). Click OK.
Figure 2.11 Image files in the Select Image Source dialog box.
52
Chapter 2
4 Save the image file in your site’s images folder. If a message appears asking if you wish to copy the image to your site’s root folder, click Yes. In the Copy File As dialog box, double-click the images folder to open it. In the dialog box, click Save. 5 The file has been saved in your site’s images folder and the image appears on your Web page (see Figure 2.12).
Figure 2.12 Graphic inserted into the Hardware Devices Web site.
Shortcut Press Shift + Enter to move to the next line. Press Enter to move down two lines.
6 Click after the image and press Shift + Enter (hold down the Shift key while pressing the Enter key) to move to the line just below the image. Key: This is a digital camera. I can download pictures from my camera to my computer and insert them into my Web pages. If necessary, select the text and click the Italic button to change the font from italic to normal. 7 Click at the end of the text and press Enter. Click the Images button. Navigate to the DataFiles\Ch02\Images folder. Select cd-rom.gif and click OK. Repeat Step 4 to save the file in your site’s images folder. 8 Press Shift + Enter. Key: This is a CD-ROM. I can copy text, pictures, sound, and video stored on CD-ROMs into my Web pages. If necessary, unitalicize the text. Your screen should look similar to Figure 2.13.
Figure 2.13 Web page with two graphics and text inserted.
Computer Basics
53
9 Place the insertion point after the text. Press Enter. Click the Images button. Navigate to the DataFiles\Ch02\Images folder. Select scanner.gif and click OK. 10 Repeat Step 4 to save the file in your site’s images folder. 11 Press Shift + Enter. Key: This is a scanner. The scanner creates digital files of the images it scans. I can insert these files into my Web pages. If necessary, unitalicize the text. All the changes you made appear on the page. 12 Click the Save button on the Standard toolbar. Your page should look similar to Figure 2.14.
Figure 2.14 The Hardware Devices Web site with all of its text and graphics inserted.
You have now added text and graphics to a Web page. These two skills are the basic skills needed to create any Web site. Identify The Insert toolbar must be in which view for the Images button to appear?
54
Chapter 2
Creating Subpages How can I add pages to a Web site?
Most Web sites contain more than one Web page. In sites with multiple pages, the index.html file is the site’s main page. Other pages or subpages are inserted below this page in the site’s navigation (you will learn more about site navigation in Chapter 5). In the following activity, you will add a subpage to the Hardware Devices site’s home page.
ACTIVITY 2D Create a Subpage 1 In your Hardware Devices Web site, in the Files panel, select the project name Site – Hardware Devices . Click the panel’s option menu icon in the panel’s upper-right corner. Select File>New Folder. Name the folder: pages. 2 Open the index.html file in Design view. Position the insertion point before the page title Hardware Devices Used in My Pages. Press Enter. Click in the line above the title that you just created. 3 Key: HARDWARE | SOFTWARE. Select the text. In the Properties inspector, click the Size drop-down arrow and select 14. 4 Select the word HARDWARE. In the Properties inspector, in the Link box, key: index.html. Select the word SOFTWARE. In the Link box, key: pages/software.html. 5 Your screen should look similar to Figure 2.15. These links will help users navigate your site. Save the index.html file.
Figure 2.15 Users can use the text links to access the site’s subpages. Navigation links
Pages folder
Link box
6 Select File>Save As. In the Save As dialog box, double-click the pages folder. In the File name box, key: software.html. Click Save. When prompted to Update Links?, click Yes. 7 In the new software.html subpage, in the Properties inspector, click Page Properties. In the Page Properties dialog box, under Category, select Title/Encoding. Click OK. In the page’s Title box, delete Hardware Devices and key: Software Applications. Computer Basics
55
8 Select the page title at the top of the page and key: Software Applications Used in My Web Pages. Delete the remaining text and graphics on the page. Your screen should look similar to Figure 2.16.
Figure 2.16 The Software Applications subpage has been added to the Hardware Devices Web site.
Subpage
9 Save your work. Choose File>Exit (or press Ctrl + Q) to close the Web site and exit Dreamweaver.
You have created your first Web site using Dreamweaver. In the next few chapters, you will use many tools and techniques that will help you build on the basic skills that you learned in this chapter. Identify What is a subpage?
Section 2.3 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• You should use a consistent plan for saving the files associated with Web sites.
1. Define folder, subfolder, root folder, format, font, subpage.
4. Draw Conclusions Why do you need a plan when saving Web site files?
• A root folder is where a Web site’s folders and files are stored. • The main content of most Web sites is text and graphics. • A font is a family of letters, numbers, and symbols that share a consistent style.
56
Chapter 2
2. Describe how to add a subpage to a Web site. 3. Explain what a Web site’s root folder is.
5. Analyze Text Why is it helpful to use different fonts and sizes for text headings?
Apply It! Format Text Add text to the Software Applications subpage. Apply different formatting to the page. Evaluate if the differences enhance or detract from the readability of the text.
CHAPTER 2
Reading Review
SECTION 2.1 Computer Hardware and Software Key Terms
Main Ideas ■ LANs and WANs are two basic types of networks. ■ Dial-up connections use modems and standard
Main Ideas ■ A computer is an electronic device that converts
■ ■ ■ ■ ■ ■
■
Key Terms network, 43 local area network (LAN), 43 wide area network (WAN), 43 server, 45 client, 45
raw data into useful information. Computer systems consist of hardware, software, one or more users, and data. Input devices include keyboards, mice, digital cameras, scanners, and microphones. Common output devices are monitors, printers, projection systems, and speakers. An operating system acts as an interface between a user and the computer hardware. Commonly used operating systems include Microsoft Windows, Mac OS, Unix, and Linux. Application software performs specific tasks, such as word processing and Web page creation. A graphical user interface (GUI) allow users to interact with software by selecting words, symbols, or graphics from the screen. For a computer system to function properly, all parts of the system must be compatible. Data
Software
■ ■ ■ ■ ■
telephone lines. Bandwidth determines the amount of data that can be transmitted over a broadband connection. Broadband connections can use cable television lines, DSLs, and ISDN, T1, and T3 lines. Wireless connections use infrared waves, radio waves, or microwaves to transmit data. Client/server networks have a powerful central computer known as a server. Network hardware components include servers, network interface cards, modems, and routers.
SECTION 2.3 Creating a Basic Web Site Key Terms folder, 48 subfolder, 48 root folder, 48
format, 51 font, 51 subpage, 55
Main Ideas ■ You should use a consistent plan for saving the files
Computer System
Hardware
User
associated with Web sites. ■ A root folder is where a Web site’s folders and files are stored. ■ A font is a family of letters, numbers, and symbols that share a consistent style. ■ The main content of most Web sites is text and graphics.
Computer Basics
57
CHAPTER 2
Review and Assessment
AFTER YOU READ Key Term Journal Working in pairs or in small groups, compare entries in your Key Term Journal with those of the other students. How are the answers in the What else is it like? column similar or different? Note in your own journal examples suggested by other students that you find helpful.
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
16. Identify the four main parts of all computer systems. Computer System
Reviewing Key Terms 1. What are the physical components of the computer? 2. A monitor is an example of what type of device? 3. What types of networks do the abbreviations LAN and WAN stand for? 4. What type of network is the Internet considered to be? 5. What type of interface allows users to interact with software by selecting words, symbols, or graphics from the screen? 6. What do you use to perform different tasks on the computer? 7. What is the purpose of a server? 8. What is the relationship between a folder and a subfolder?
Understanding Main Ideas 9. Describe the two main processing components. 10. Explain the difference between hardware and software. 11. Describe how a user interacts with a GUI (graphical user interface). 12. Identify the two basic categories of networks. 13. Describe the different ways you can connect to the Internet. 14. Summarize the primary responsibilities of the network operating system (NOS). 15. Explain why it is very important to save your work frequently. 58
Chapter 2
17. Describe three types of application software. Three Types of Application Software Software #1 Software #2 Software #3
Critical Thinking 18. Analyze Software Why was the invention of a graphical user interface a major innovation in computer technology? 19. Make Recommendations Your neighbor’s family is deciding to upgrade from dial-up modem to a faster Internet connection, and they have asked you for your advice. Both parents work at home from four to eight hours a day. They have two young children who use the Internet occasionally, but will need it more as they get older. What type of Internet connection would you recommend? Why? Copy and complete the table shown below on your own paper. Identify the benefits and drawbacks of the different connections for your neighbors. Type of Connection Cable DSL ISDN, T1, T3 lines Wireless
Pro
Con
Review and Assessment
CHAPTER 2
20. Research Information Use the Internet or catalogs to find computer product descriptions. These are available at many retail stores or online computer stores. Identify the operating systems currently available for different computer systems. Using a spreadsheet application, make a chart that lists the features of each system. Can you find one system you can get for free? Compare the features to the operating systems available for purchase. Which one would you prefer? Why? 21. Identify Graphics Your school district is planning a new Web site that will be used as a way to communicate with parents, students, and the community. Each school in the district will be featured. What type of graphics, audio, and video do you think the site should include? Use a problem-solution chart like the one shown below to help you determine your answer. Problem
➠
Reading Tables Read the paragraph and table below and then answer the question.
Your teacher has asked you to research and write a report about immigration patterns in the United States during the twentieth century. Include a graph to illustrate your findings. Type of Software
Function
Web browsers
Use to visit Web sites online.
E-mail
Use to exchange messages and files with other computer users.
Word processing
Use to create letters, reports, and newsletters.
Spreadsheet
Use to work with numbers and calculations to create tables, charts, and graphs.
Database
Use to organize and retrieve large amounts of information.
Solution
Based on the table above, which three types of software would best help you to complete your assignment? Web browser, e-mail, and spreadsheet Spreadsheet, word processing, and database Database, Web browser, and spreadsheet
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below.
22.
+
23.
+
24.
+
Result
+
Result Result
Spreadsheet, Web browser, and word processing
WebDesignDW.glencoe.com Study with PowerTeach Go to the book Web site shown above. To review the main points in this chapter select e-Review>PowerTeach Outlines>Chapter 2.
Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 2. WebDesignDW.glencoe.com
Computer Basics
59
CHAPTER 2
Activities
1. MAKING CONNECTIONS Language Arts—Write a Report Linux is an operating system used on many Web servers. The Linux system is available without charge. Research the interesting story of the development of Linux. As you research, look for the answers to the following questions: ◆ Who developed the Linux operating system? ◆ When was Linux developed and why? ◆ How has Linux evolved since it was first developed? ◆ How might Linux be used in the future? Write a two-page report summarizing your findings. For tips on using online resources, refer to the Technology Handbook in the front of this book.
2. STANDARDS AT WORK Students evaluate and select new information resources and technological innovations based on the appropriateness of specific tasks. (NETS-S 5)
Evaluate Scanners Many Web developers use scanners. A scanner converts a printed image into a digital image. Images can be scanned with different resolution capabilities, which are measured in dots per inch (dpi). The higher the dpi, the better the image will be. However, when an image is scanned at a higher dpi, the resulting digital file is larger than that of an image scanned at a lower dpi. On a site, larger files can take longer to download, especially if visitors do not have high-speed connections. Scan resolution capability is a primary factor in the price of scanners. Other features that contribute to the cost factor are whether the scanner is a flatbed or upright model, whether the scanner scans one page only or includes a multi-page feeder, and whether the scanner can also function as a printer, copier, and FAX machine. Your school’s Web site committee has agreed to purchase a scanner for your class. You must research scanners and write a proposal. In your proposal, include information for three scanners. Explain your reasons for including these three scanners in your proposal. Use a table like the one shown here to document the data you obtain about each scanner.
SCANNERS #1 #2 #3
60
Chapter 2
TYPE OF SCANNER
FEATURES (INCLUDING DPI OPTIONS)
WHERE TO PURCHASE
PRICE
CHAPTER 2
Activities
3. TEAMWORK SKILLS Understand Computer Terms Form small groups following your teacher’s instructions. As a group, develop a dictionary of computer terms. This dictionary will be used by individuals who are new to using technology. First, make a master list of terms. Divide the terms among group members. Have each group member find definitions of the terms using dictionaries and online reference resources. Use word processing software to list the terms and definitions. Place the terms in alphabetical order. All group members should: 1. 2. 3. 4. 5.
Read the terms and definitions. Mark any errors for correction. Make sure all terms are in alphabetical order. Suggest improvements to the definitions. List any additional terms that should be added.
Have the group continue reviewing the dictionary until all corrections have been made and all terms and definitions have been added.
4. CHALLENGE YOURSELF Explore Networks Client/server networks are widely used in businesses and schools. They allow many people to access information stored on a server. With your teacher’s permission, interview the network administrator at your school or for your district to learn about the network used in the school or district. Before the interview, write the questions that you want to ask. The questions should help you learn about the network components, how the components work together, what network operating system is used, and what safeguards the network components from power surges and viruses. Be sure to find out what you can do as an end user to safeguard the network, as you will want to share this information with your class. Write a summary of your interview.
QUESTION
ANSWER
Which network operating system is used? What kind of network server do we have? How extensive are our network components?
Computer Basics
61
CHAPTER 2
Projects
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Format Text
Create a new one-page Web site to advertise an International Festival. Create a new one-page Web site named International Festival. Use your teacher’s instructions to store the site’s files in the proper location. Create a new HTML page called index.html for the site. Change the page’s background color to light blue. The color value is #99CCFF. Add the text in the figure on this page. Follow the spacing shown in the figure. (Press Enter to move down two lines and Shift + Enter to move down one line.) Format the name of the fair as Heading 1. Format the date and time information as Heading 3 and italicize the text. Format the remaining text as an 18 pixel size font.
2. Add Graphics and a List to a Web Site
62
Enhance the Web site by adding a graphic and a list of restaurants to the page. Open the index.html page of the International Festival Web site. Move the insertion point to the top of the page in front of the word International. Insert the festival.gif image from the DataFiles\Ch02\ Images folder. Click once after the image and press Enter. Position the insertion point after the text Dozens of food vendors... Press Enter. Key a list of local restaurants into the page. Select the entire list and choose Text>List>Unordered List from the menu bar. Save the Web site and close Dreamweaver.
Chapter 2
Projects
CHAPTER 2
Read the projects described below. Then follow the directions to complete each project.
1. Create Inventory Sheets With your teacher’s approval, take a survey of the hardware and software being using in your classroom. The table below shows some of the information you may want to gather about the computer hardware.
COMPUTER HARDWARE Computer ID Lab01
Type of Computer PC
Input Devices Mouse, keyboard
Storage Devices ZIP250
Network Connection (Yes or No) Yes
The table below shows some information you can gather about software.
COMPUTER SOFTWARE Software Name Word
Vendor Microsoft
Type (Application or OS)
Version
Application
2002
Primary Use Word processing
After you have completed your survey, sketch a Web page design for a site that will be used to teach parents and the school board about the equipment (hardware and software) in your classroom.
2. Prepare a Presentation You have been asked by the school board to create a presentation for the school board and parents. They want you to teach them about the equipment (hardware and software) you have available in class. If possible, create this presentation using a productivity tool, such as word processing or presentation software. Your audience will be the school board and parents. Your presentation should explain what hardware and software is available, and what you use to create Web pages. Use illustrations to add interest. If possible, have a computer system available so that you can point to items as you talk about them. Give your presentation to two classmates. Have them recommend ways to improve it. If possible, give your presentation to other students in your school.
Computer Basics
63
CHAPTER
3
Online Basics
YOU WILL LEARN TO… Section 3.1 Describe Internet hardware and software Explain Internet protocols Compare intranets, extranets, and the Internet Section 3.2 Identify URL components Compare Web browsers Use search engines Section 3.3 Describe Web development applications and hardware Describe connectivity components Insert external hyperlinks Section 3.4 Explain how to download files responsibly Summarize copyright and fair use laws Cite digital sources Evaluate online information
64
Chapter 3
WHY IT MATTERS ................................................. The Internet has changed the way we research topics, play games, get our news, and buy products. The ease with which users can obtain information from the Internet has led to unique online social, ethical, and legal issues. For example, anyone with a computer and Internet access can easily download music files. Many people do not know that copying music from the Internet often violates copyright law. Users need to be aware of ethical, legal, and social issues when using online materials. Write a paragraph describing how you use materials that you download from the Web on a regular basis (pictures, music, information, etc.). Note any ethical or legal issues that you think you need to consider when using these online resources.
CHAPTER
3
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 3.1 Communicate on the Internet ......................................... 3.2 Perform a Keyword Search ........ 3.3 Identify Hardware ........................ 3.4 Cite Digital Sources ..................... You Try It Activities 3A Preview a Web Page .................... 3B Perform a Boolean Search ......... 3C Insert External Hyperlinks .......... 3D Add a Copyright Notice................
70 77 82 88
You Try It Skills Studio Search for Information Online ........... 94 Create a Web Page with External Links ..................................................... 94 Web Design Projects Use Online Resources ......................... 95 Evaluate Software ............................... 95
IN THE WORKBOOK 74 76 81 86
Optional Activities and Projects Guided Reading Web Design Projects
ON THE WEB Chapter Assessment Making Connections ........................... Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................
92 92 93 93
Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Adjust Reading Speed Effective readers not only think about what they are reading, they think about the process of reading. One action you can take to improve your comprehension is to adjust your speed of reading to match the difficulty of the text. As you read this chapter, slow down your reading speed when you have difficulty understanding a concept. If needed, re-read the text to give yourself enough time to absorb the material. It may take longer to read the assignment, but you will understand and remember more.
WebDesignDW.glencoe.com
Online Basics
65
SECTION 3.1 THE INTERNET Focus on Reading Read to Find Out This section explains how the Internet works. Pay close attention to the key term protocol. Read to find out how protocols enable people to use the Internet.
Main Ideas
Key Terms
Reading Strategy
Protocols allow computers to communicate. People often use the Internet to communicate with other users. Intranets and extranets are networks that are protected from unauthorized access.
Internet service provider (ISP) protocol Transmission Control Protocol/Internet Protocol (TCP/IP) Hypertext Transfer Protocol (HTTP) intranet extranet
List important dates in Internet history. Use a time line like the one below (also available online). Date/ Event
Date/ Event
Date/ Event
Date/ Event
Date/ Event
The Internet originated in the late 1960s. It is only since the early 1990s, however, that the Internet has been commonly used in homes, schools, and businesses.
Origins of the Internet What was the early purpose of the Internet?
Activity 3.1 Explore Online History Find out more about the history of the Internet and the Web by visiting WebDesignDW.glencoe.com.
The first version of the Internet was created in 1969 as a way for the government to develop a network of computers with various universities and defense contractors. This network was called ARPANET, after its developer, the Advanced Research Projects Agency of the U.S. Department of Defense. Some other important dates in the Internet’s development are shown below. ◆ 1980s—The National Science Foundation (NSF) adds to ARPANET and calls it the Internet. ◆ 1990—Tim Berners-Lee creates first GUI (graphical user interface) and names it the World Wide Web. ◆ 1994—Web’s governing body, the World Wide Web Consortium (W3C) is founded. ◆ 1995—Private networks are joined to the Internet. Identify Tim Berners-Lee created the first GUI in what year?
66
Chapter 3
WebDesignDW.glencoe.com
How the Internet Works What is an Internet service provider?
While the terms are often used interchangeably, the Internet and the Web are two separate things. ◆ The Internet is a large collection of networks. ◆ The Web is just one part of this larger network.
Hardware and Software Components
You Should Know Every time you are on the Web, you are also on the Internet. However, you can use the Internet without being connected to the Web.
Internet hardware consists of the computers and servers connected to the Internet and the communication lines over which files are transmitted. The files are stored on servers that send the files to individual computers. Software applications allow you to use these files after your computer receives them from a particular server. For example, a Web browser allows you to view multimedia files stored on Web servers. (Web servers are discussed further in Chapter 14).
Internet Service Providers You must be connected to the Internet to use its resources. To do this, most people use a communication line, such as a telephone line or a cable connection, to access an Internet service provider. An Internet service provider (ISP) is a business that allows its customers’ computers to access the Internet through its own network. An ISP typically charges its customers a monthly fee for ongoing Internet access. Some examples of ISPs include AOL®, EarthLink®, AT&T®, and Time-Warner®. ISPs have one or more Internet servers that link together local and regional networks and control the way data is routed over the Internet. Most LANs and WANs use a gateway to access the Internet, as shown in Figure 3.1. A gateway is an Internet server that allows the network to communicate with the Internet.
Figure 3.1
Communication line using TCP/IP protocol
Most networks use gateways to access the Internet. What is a gateway?
Internet Gateway
Network LAN
Online Basics
67
Internet Protocols All of the different computers on the Internet must communicate with each other to share information and resources. A protocol is a set of rules and procedures specifying how data need to be formatted and transmitted between computer systems. Computers must follow the same protocol in order to “talk” to each other.
Figure 3.2 You can access Web pages by keying in an IP address. What does IP stand for?
TCP/IP The basic Internet protocol is Transmission Control Protocol/ Internet Protocol, or TCP/IP. TCP/IP protocol contains the specific information that allows computers to identify each other and exchange data on the Internet. Each computer on the Internet has a numeric Internet protocol, or IP, address. A Web site’s IP address and its domain name address are the same. Keying either 216.109.118.70 or www.yahoo.com will send you to the Yahoo site (see Figure 3.2). Most IP Address people find the domain name address easier to remember than the IP address. A Domain Name Server (DNS) is used to transfer a numeric IP address into a domain name address.
Other Internet Protocols TCP/IP is the main Internet protocol. Other protocols are often used with this basic protocol to accomplish specific tasks. The list below describes some commonly used protocols.
◆ HTTP The Web uses Hypertext Transfer Protocol or HTTP to transfer files from a Web server to a Web browser. HTTP also interprets hyperlinks and jumps to the specified location. ◆ FTP The File Transfer Protocol (FTP) provides a standardized method of uploading and downloading files on the Internet. Files for FTP sites are stored on FTP servers. ◆ Telnet The Telnet protocol allows a computer to access another computer from a remote location. Telnet allows users to connect to databases, library catalogs, and similar information resources around the world. ◆ Gopher The Gopher protocol uses the software applications Veronica and Jughead to let users search indices of text-based resources. ◆ WAIS Wide area information servers (WAIS) use their own protocols to access servers that store specialized databases organized by subject. All WAIS documents are text based. Describe What does a protocol allow computers to do?
68
Chapter 3
Internet Resources What are a few examples of Internet Resources?
Internet protocols allow users to access specific Internet resources, such as FTP, Telnet, Gopher, or the Web. The Web is probably the bestknown Internet resource. However, there are many other Internet resources available. Table 3.1 lists some popular Internet resources. Types of Internet Resources Resource
Function
Electronic Mail (E-mail)
Users send messages directly to one or more people over the Internet.
Listserv
Users post group messages. Users can access and respond to messages at their convenience.
FTP Site
A site often used in businesses where people need to use and share large files. Can also be used to upload Web site files to a Web server.
Newsgroups or Forums
Users post articles on a topic that other subscribers to the newsgroups can read. Many newsgroups reside on USENET, a worldwide bulletin board system.
Chat Rooms
A group of users talk in real time about particular subjects such as hobbies. No special software is required to access a chat room.
Internet Relay Chat (IRC)
Users communicate with one another in real time by keying messages back and forth. Conversations may be public or private.
Instant Messaging (IM)
Works like IRC communication. Unlike IRC, many private companies have developed IM applications.
Online Gaming
Users play games in real time with people in other locations. Multiuser domain games (MUDs) and MUD object-oriented games (MOOs) let users experience a virtual universe where they interact with other users.
Many people use e-mail to communicate every day. To receive e-mail messages, you need a unique e-mail address that will route your messages directly to you. In order to actually key, send, and receive e-mail messages, you need an e-mail application, such as Microsoft® Outlook®, Netscape® Messenger, and Eudora®. You typically access an e-mail application through a Web browser. List What are two examples of Internet resources?
Table 3.1 The Internet is commonly used for communication. Why is the Internet a useful tool for communicating with others?
Interactive Tutorials Go to the book’s Web site at WebDesignDW.glencoe.com for an interactive tutorial about e-mail.
Online Basics
69
Intranets and Extranets What is the purpose of other networks?
The Internet is accessible to everyone. Other types of networks such as intranets and extranets allow users to control access to their content. The Internet, intranets, and extranets all use TCP/IP and require the same hardware, including communication lines, servers, and routers. The difference between the three networks lies in how they are used, who owns them, and who is allowed to access them. While the Internet is public, intranets and extranets are privately owned by the organizations that create and maintain them. The similarities and differences between intranets and extranets are shown in Figure 3.3.
Figure 3.3 Both intranets and extranets help companies protect their resources. How are these two networks different from the Internet?
Intranet Can only be accessed by employees of an organization.
A LAN or WAN that allows users to share information within an organization while protecting this information from outsiders.
Extranet Can be accessed by outside or remote users who have authorization.
Compare What are the similarities and differences between an intranet and an extranet?
Section 3.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Tim Berners-Lee created the first GUI browser, leading to the development of the Web.
1. Define Internet service provider (ISP), protocol, Transmission Control Protocol/Internet Protocol (TCP/IP), Hypertext Transfer Protocol (HTTP), intranet, extranet.
4. Draw Conclusions Why do you think the development of protocols has been so important in the history of the Internet?
• The main Internet protocol, TCP/IP, provides a common language for all computers. • The Web uses HTTP protocol. Other Internet protocols include FTP, Telnet, Gopher, and WAIS. • Intranets and extranets are privately owned networks.
70
Chapter 3
2. Describe six types of Internet protocols. 3. Identify what a MUD is.
5. Compare and Contrast How are the Internet, intranets, and extranets the same and how do they differ?
Apply It! Communicate on the Internet List the six types of Internet communication discussed in this section. Identify which of these methods are available in your classroom or lab. With your teacher’s supervision, try using one or more methods to communicate with other students.
SECTION 3.2 THE WEB Focus on Reading Read to Find Out The main purpose of this section is to explain how the Web works. Read to find out about the many different parts of the Web. As you read, consider how you use the Web.
Main Ideas
Key Terms
Reading Strategy
A URL is an address that identifies a specific Web page. Web browsers have varying capabilities. Search engines help locate sites containing specific information. Users should carefully evaluate all information found online.
uniform resource locator (URL) domain name domain name extension accessibility option search engine keyword Boolean search
List the steps involved in retrieving a Web page from a server. Use a chart like the one below (also available online)
➠
➠
➠
The Web is probably the Internet’s most widely used component. As you learned, the Web uses HTTP (Hypertext Transfer Protocol), which allows pages to be interlinked. This interlinking lets users move easily from page to page. It is this ability to browse through pages that sets the Web apart from other Internet components, such as FTP sites and newsgroups.
Uniform Resource Locators (URLs) How do URLs work with browsers?
Every Web page has a unique address known as a uniform resource locator or URL. Like IP addresses, URLs enable a browser to locate specific page files on the Web.
URL Components HTTP requires Web page URLs to be in a standard format that browsers know how to interpret. Most URLs consist of four main parts: protocol://address/directory path/retrieved file. ◆ The protocol indicates the type of server where the file is stored. ◆ The address is the server’s address. ◆ The directory path is the file’s location within the file structure of that particular server. ◆ The retrieved file is the name of the specific Web page file being accessed. Together, these four components form a URL that specifies a single page on the Web. Each Web page in a site has its own address, just like every page in a book has its own page number. WebDesignDW.glencoe.com
Online Basics
71
Figure 3.4 shows the URL for the corporate history page on the McGraw-Hill Web site: http://www.mcgraw-hill.com/about/history.html. ◆ The “http” specifies that this page is stored on an HTTP, or Web, server.
Figure 3.4 Each component of a URL has a specific meaning. How can you tell that this URL specifies a file on the World Wide Web?
Protocol
◆ The address (“www.mcgraw-hill.com”) is the Web server’s address. The “www” indicates that the server is part of the World Wide Web. The “mcgraw-hill.com” is the site’s domain name. A domain name identifies the entity (such as a university, individual, or business) that sponsors the site. This URL tells users that McGraw-Hill owns the site. ◆ The “about” tells users the directory path they need to follow to find a specific page. ◆ The “history.html” is the name of the file that contains the Web page the user is viewing. The “html” indicates that this page is written in HTML code. World Wide Web
Domain name extension
http://www.mcgraw-hill.com/about/history.html Domain name
Directory path
Retrieved file
Domain Name Extensions A domain name typically ends with a dot followed by letters. These letters identify the URL’s domain name extension. A domain name extension tells users what type of organization uses the address. For example, the extension “.com” in the McGraw-Hill URL indicates that this is a commercial site. Table 3.2 lists some commonly used domain name extensions.
Table 3.2
Common Domain Name Extensions
URLs contain domain name extensions. What information can you learn from a domain name extension?
Extension
Description of Site
Example
.com
Commercial or for-profit business
www.dell.com
.edu
Educational site
www.harvard.edu
.gov
U.S. government organization
www.firstgov.gov
.org
Professional or nonprofit organization
www.redcross.org
.mil
Military site
www.army.mil
.net
Network site
http://eelink.net
.biz
Commercial business
www.dgmi.biz
.info
Information site
www.eclipses.info
List What are the components of a URL?
72
Chapter 3
Using a Web Browser How is a Web browser essential to viewing Web pages?
You need a Web browser to request, retrieve, and view Web pages. A browser is a software application that you can install and customize.
Platform Differences Not all Web browsers interpret and display HTML identically. Some common browser issues include the following. ◆ Design Issues Margin spacing around the edges of a page often varies in different browsers. Text may wrap at different places. Font sizes and colors may vary, as may the appearance of hyperlinks. ◆ Browser Restrictions Not every browser will support all of the features that you may want to use in your Web pages. Also, some older operating systems may not be able to run newer browsers. ◆ Browsers and Accessibility Many browsers include accessibility options. An accessibility option is a feature that allows differently abled individuals to access and use Web pages. For example, most browsers let users increase the size of text on the screen. This option helps users with impaired vision read text more easily.
Design Since pages may look different in different browsers, think about what type of browsers your audience may be using when you design your pages.
Retrieving a Web Page The Web is based on the client/server model. When you key a URL into your browser and press Enter, a specific Web page is retrieved through the process shown in Figure 3.5. Your browser (the client) sends the URL to an Internet domain name server. The domain name server determines the IP address of the Web server that maintains the requested page.
Figure 3.5
➠
The process of retrieving a Web page. What client is used to request a Web page?
Your browser uses this IP address to locate the needed Web server.
➠ Your browser requests the specific page you want, and the Web server sends that page to your computer.
➠ Your browser interprets the HTML code and displays the page in your browser window.
Online Basics
73
Previewing a Web Page Because pages can look different, you must preview your Web pages in as many different browsers as you can. Most Web designers make certain that their pages display properly in Microsoft Internet Explorer and Netscape Navigator®. You should also preview pages using browsers that you know your audience will use. Most people use the browsers Microsoft Internet Explorer, Netscape Navigator, or Mozilla™ Firefox™. Other available browsers include Opera™, Lynx, Safari™, and America Online®. Dreamweaver allows you to preview your pages in several different browsers.
ACTIVITY 3A Preview a Web Page 1 Start Dreamweaver. 2 On the menu bar, choose File>Open. 3 In the dialog box, browse to the DataFiles\Examples\MusicDept folder. Double-click the index.html file to open the home page.
Figure 3.6 The page viewed in the Microsoft Internet Explorer 6.0 Web browser.
4 On the menu bar, choose File>Preview in Browser. Choose a browser for viewing the page. There may be more than one browser depending on which browsers are installed on your computer. In Figure 3.6, the home page of the Music Department Web site is shown in Internet Explorer 6.0.
Web browser
Web page viewed in Web browser
5 Leave the browser window open. In Dreamweaver, choose File>Preview in Browser again. If possible, select a browser option different from the one you selected in Step 4, such as Netscape Navigator 6 (as shown in Figure 3.7 on page 75) or Mozilla Firefox. 74
Chapter 3
6 Compare how the two screens look in the different browsers. Preview the page in as many different browsers as you can. There is little, if any, difference if a page has been designed correctly.
Figure 3.7 The page viewed in the Netscape Navigator 6 Web browser.
7 Close each browser. 8 Exit Dreamweaver.
Locating Information Online How can search tools help users locate online information?
The vast number of pages on the Web can make it hard to find specific resources. Using search tools can help you locate online information.
Search Tools A search engine is an application that locates information about Web pages and then stores this information in searchable databases that you can access from your browser. You search for specific information by entering one or more words related to your topic into the search engine. The search engine then displays a list of Web pages that are relevant to these selected words. Popular search engines include Google™, AltaVista™, and Excite®. Search engines catalog individual Web pages. Sometimes, in addition to receiving a list of Web pages about your topic, you may also get a link to a Web directory. A Web directory catalogs Web sites (not pages) by topic or category. After you choose the category, the directory displays a list of sites related to that category. Since databases tend to contain different information, it can be a good idea to use at least two search tools when attempting to locate online information. Online Basics
75
Using Search Tools To use a search engine, you make a search query. Keyword and Boolean searches are two types of search queries.
Keyword Searches A search query is one or more keywords that you enter into the search engine. A keyword is an important word related to the specific topic you are trying to locate. For example, if you are looking for a Web site that contains information on HTTP, you would enter the keyword “HTTP.” When you enter a keyword into the search engine, the engine searches Web sites for possible matches. The search engine then returns the results or hits to you. You need to be careful when selecting a keyword. A keyword that is too general will return too many results. Boolean Searches When you want a more precise search than a keyword search, you may want to perform a Boolean search. A Boolean search specifies how the search engine should use keywords to locate specific pages. You perform a Boolean search by entering keywords that are separated by Boolean operators. The commonly used Boolean operators and their function are listed in Table 3.3. Table 3.3
Boolean Operators
Using Boolean operators will help you perform a more precise search. What are the three most commonly used Boolean operators?
Operator
Function
AND
The search engine locates only those pages containing both keywords. Many search engines use the plus sign (+) in place of AND.
OR
The search engine locates pages containing one or both of the keywords. An OR search generally produces more “hits” than an AND search.
NOT
The search engine locates pages that contain the first keyword but not the keyword after the NOT operator. Many search engines use the minus sign (-) in place of NOT.
ACTIVITY 3B Perform a Boolean Search 1 Open your Web browser. 2 With your teacher’s permission, key the following URL into the address box at the top of the browser window: www.google.com. Press Enter. The Google search engine appears. 3 Start with a simple keyword search. Key squash into the search box and press Enter. Write down the number of results (displayed on the blue bar near the top of the page). 4 Key the phrase squash+vegetable into the search box (see Figure 3.8). (Note: Most search engines require that there be no space between the symbol [+ or -] and the keyword). Press Enter. Write down the number of results you receive.
76
Chapter 3
Figure 3.8 Searching for results using an AND search. Use the Help feature if you encounter problems.
Key your keywords in the search box.
Click the search button after you enter your keyword.
5 Key squash OR vegetable and press Enter. Write down the number of results. 6 Key: squash-game. Again, write down the number of results. 7 Compare the number of results that you received for each of these four searches. Note which search produced the most results and which search produced the fewest results.
List What are two types of searches?
Section 3.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Most URLs consist of a protocol, an address, a directory path, and a retrieved file.
4. Apply Knowledge What domain name extension would be used for the official site of the U.S. Supreme Court?
• The exact appearance of a Web page depends on the browser that displays it. • If you enter keywords or phrases into a search engine, it will return a list of related Web pages.
2. Identify three different types of Web browsers. 3. Explain ways in which Web pages may vary when viewed in different browsers.
5. Compare and Contrast Give an example where it would be better to use the Boolean operator AND rather than OR when querying a search engine. Explain your answer.
Apply It! Perform a Keyword Search Use three search engines to conduct a keyword search for the population of the town where you live. Identify which search engine helped you to locate the information the quickest and write a summary of your findings.
Online Basics
77
SECTION 3.3 WEB SITE DEVELOPMENT TOOLS Focus on Reading Read to Find Out This section explains what you need to develop and publish a Web site. Read to find out how Web site development applications make it easy to create Web sites.
Main Ideas
Key Terms
Reading Strategy
The hardware and software needed to develop a Web site depends on the site’s size and complexity. You must have access to a Web server to publish a site. External links let users move between sites.
text editor Web site development application WYSIWYG Web hosting service external hyperlink
List the software, hardware, and connectivity tools needed to create a Web site. Use a chart like the one below (also available online). Web Site Development Tools
Software
Hardware
Connectivity
You need certain hardware and software tools to create a Web site. Hardware requirements often depend on your chosen software.
Software Needs What kinds of software tools are needed to create Web pages?
The software tools you need to create Web sites can be divided into two categories: 1. The applications required to create Web pages themselves. 2. The applications required to create individual Web page components.
Applications for Creating Web Pages You Should Know When using a text editor, you need to view your HTML document in a Web browser to see how your page will look.
Two types of applications are used to create Web pages: text editors (or HTML editors) and WYSIWYG editors. ◆ A text editor allows you to manually key HTML commands into a blank document. While text editors are inexpensive, you must know HTML to create a Web page. Examples of text editors include Microsoft Notepad and WordPad, Macromedia® HomeSite®, HotDog Professional™, Simpletext™, and BBEdit®. ◆ A Web site development application allows you to use a GUI to create a Web page. What you see on the screen is similar to the page’s final appearance. This feature is known as WYSIWYG, which stands for “what you see is what you get.” While they can be expensive and difficult to learn, applications such as Macromedia® Dreamweaver®, and Microsoft FrontPage® make it easy to create complex Web sites without the need to know HTML.
78
Chapter 3
WebDesignDW.glencoe.com
Web Page Component Applications Besides HTML code, Web pages often contain graphics, video, and audio. The Web designer’s toolbox should include applications for creating and modifying all of these components.
Text Applications You can enter text into a Web page by simply typing it in with your keyboard. You can also use a word processing program, such as Microsoft® Word or Corel® WordPerfect®, to create text for a site. You can then paste the document file into your Web page, or save it as a Web file and post it online. Graphics Applications Graphics are vital to most Web pages. Although you may often use premade graphics, you will also want to create your own original graphics or edit existing ones. To accomplish these tasks, you will need a graphics application. Graphics packages let you resize, crop, and change the color of an image. Popular graphics applications include Microsoft® Paint, Microsoft® Photo Editor, Macromedia® Fireworks®, Corel Paint Shop™ Pro®, Mac® iPhoto®, and Adobe® Photoshop®, which is shown in Figure 3.9. Video and Audio Applications You need special applications to manipulate, edit, and play video and audio files. Most recent versions of the Windows and Mac operating systems provide applications, such as Windows Media Player, that you can use to play video and audio files. You can download other players from the Internet. Video editing software includes Adobe® Premiere®, Quicktime®, iMovie®, and Apple® Final Cut Pro®. Audio applications, such as SoundEdit, allow you to edit audio files, increase speed and volume, and filter out background noise.
Figure 3.9 Adobe Photoshop is one popular graphics application. Why do Web designers use graphics applications?
Explain What is a text editor?
Online Basics
79
Table 3.4
Hardware and Connectivity Needs
When you use Dreamweaver or any other software, make sure that your computer meets that software’s minimum system requirements. Why is it important in Web design to have enough video RAM?
What are the basic hardware and connectivity needs of every user?
A computer, a monitor, and a mouse are the basic hardware that you need to create any Web site. Your other hardware needs depend on the types of software tools you use and the complexity of your site.
General System Requirements Table 3.4 shows the general system requirements that a computer needs to run the graphics software typically used to create Web sites.
Overview of General System Requirements Component
Minimum Requirements
Description
Processor
PC: Pentium III 600 MHz chip or faster Mac: Power PC G3 processor 500 MHz
Determines how quickly your computer system can carry out commands.
Enables your computer to perform high-level graphics tasks.
Hard Drive
PC: 275 MB of free space Mac: 275 MB available disk space
Provides extra storage space if RAM gets low.
Video Capabilities
PC: 32 MB of video RAM Mac: 32 MB of video RAM
Determines the speed at which your monitor displays images.
Input and Output Devices Most Web developers use the following input and output devices: ◆ A monitor with a resolution of at least 800 x 600 that is capable of displaying at least 256 colors ◆ A color printer to produce hard copies of Web pages ◆ A scanner and digital camera for graphics ◆ A camcorder, microphone, and speakers for multimedia
Connectivity Needs You Should Know Web hosting services sell server space, usually for a monthly fee.
When you publish a site, you must copy the site’s files from your local hard drive or network server to a Web server. Many people use a Web hosting service to gain access to a Web server. When choosing a Web host, be sure: ◆ It has high-speed lines to upload your Web files. ◆ You are given enough storage space to hold all your Web site files. ◆ There is technical support in case you run into problems. List What input and output devices are usually used when creating a Web site?
80
Chapter 3
Linking to Online Resources How do hyperlinks help users navigate the Web?
Because they allow users to quickly jump from page to page, hyperlinks make it easy to access the Web’s varied resources. In this activity, you will add external hyperlinks to your Hardware Devices site. An external hyperlink takes users to a page on a different Web site.
ACTIVITY 3C Insert External Hyperlinks 1 Open your Hardware Devices site home page in Design view. 2 Locate the text below the digital camera image. Position the insertion point at the end of the text. Press Shift + Enter. 3 Key: Learn more about digital cameras. Select the words digital cameras. Choose Insert>Hyperlink. The Hyperlink dialog box appears. If you do not see the words digital cameras in the Text box, then key them in manually. 4 In the Link box, key the URL: http://www.dpreview.com. 5 Click the Target drop-down arrow. Choose _blank. When a user clicks the link, the www.dpreview.com page will appear in a new browser window. Your dialog box should look like Figure 3.10. Click OK.
Figure 3.10 When users click the selected text, they will go to the link shown in the Link box.
Web page URL Text for link
6 Click at the end of the text under the CD-ROM image. Press Shift + Enter and key: Learn more about CD-ROMs. Select CD-ROMs. With the Insert toolbar in Common view, click Hyperlink. In the Link box, key: http://www.cdrom-guide.com. Under Target, choose _self. When a user clicks the link, the www.cdrom-guide.com page will appear in the same window as the link they clicked. Click OK. 7 Click at the end of the text under the scanner image. Press Shift + Enter and key: Learn more about scanners.. Select scanners and click Hyperlink. In the Link box, key: http://www.imaging-resource.com. Under Target, choose _self. Click OK. 8 Click Save. Choose File>Preview in Browser and select a browser from the available list.
Online Basics
81
9 Test your subpage and external hyperlinks by clicking on them. Note the links change color after they are clicked (see Figure 3.11). Close your browser and any open windows when finished. 10 If the links do not work, close your browser and repeat the actions described in Steps 3 through 5 for each link.
Figure 3.11 The text links appear in color and underlined.
Troubleshooting Since you chose _blank as the target for the digital cameras hyperlink, you should see the Web page in a new browser window. Make sure you close this additional window after viewing the Web site.
Always check to make sure that every external link you add to your Web site is active and current. Explain What is an external hyperlink?
Section 3.3 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Text editors allow you to enter and edit HTML code.
1. Define text editor, Web site development application, WYSIWYG, Web hosting service, external hyperlink.
4. Compare and Contrast Explain the differences between a text editor and a Web site development application.
2. Describe some of the hardware needs for creating a Web site.
5. Evaluate Resources If you created a Web site about Japan, what three external hyperlinks would you include on your home page?
• Web site development applications provide a WYSIWYG environment. • Web hosting services allow you to publish your site to their Web servers. • External links allow users to jump from one Web site to a different Web site.
3. List the steps you would follow in Dreamweaver to insert a hyperlink into a Web page.
Apply It! Identify Hardware With your teacher’s help, explore your computer’s System Properties to identify the hardware available on your computer. Make a list of your computer’s major hardware devices.
82
Chapter 3
Verifying Your Sources
T
he Internet is a rich resource of information. Unfortunately, you cannot trust everything you read online.
Misinformation on the Web You cannot always be sure that information posted on the Web is trustworthy. For example, the Securities and Exchange Commission has sued individual chatroom participants for lying about various companies in order to drive stock prices up or down. Investors who believe the misstatements often lose money.
Verify Information Online Follow these guidelines to evaluate online information: ◆ Remember facts do not always get checked online. This is especially true in informal settings such as chat rooms or “Web logs.” Check to see when the site was last updated and be prepared to check facts yourself. ◆ Look for reputable sources. Start with the Web sites of major news organizations, encyclopedias, government, and professional organizations.
Look for reputable online sources that check facts, identify authors and sources, and post unbiased information.
◆ Learn to evaluate. View online information with a critical eye, and ask questions. Is the author identified? Could the site be sponsored by someone who is biased? Can you find the same information elsewhere? Trust your instincts. If you feel uncomfortable with any information you find online, discard it and keep digging until you find reliable facts.
1. Evaluate Sources Select a historical event. Locate two online sources that discuss this event. Compare the two sources and evaluate their reliability. What are the positive and negative consequences of easily accessing this type of information on the Web?
2. Identify Bias Much of the information online has a specific bias. Search the Internet to find one example of bias-based information. Report your findings.
Online Basics
83
SECTION 3.4 SOCIAL, ETHICAL, AND LEGAL ISSUES Focus on Reading Read to Find Out This section focuses on social, ethical, and legal uses of material from the Internet. As you read, pay close attention to the key terms Acceptable Use Policy (AUP) and copyright.
Main Ideas
Key Terms
Reading Strategy
Ethical, social, and legal guidelines govern the use of online resources. Users must respect copyright law and trademark rules when using digital resources and cite their sources whenever possible.
Acceptable Use Policy (AUP) Internet Use Agreement Netiquette commercial software shareware freeware copyright trademark
Identify how the software listed can be used. Use a table like the one below (also available online). Commercial Software
Shareware
Freeware
The Internet has influenced the way we communicate, learn, do business, and lead our daily lives. While the Internet offers many benefits to society, it has also created many new ethical and legal issues.
The Internet and Society Activity 3.2 Use Online Resources Ethically Examine the ethics of using online information by visiting WebDesignDW.glencoe.com.
Why are Internet ethics important?
Through the Internet, you can stay in touch with friends and relatives and meet new friends who share your interests. While the Internet helps communications, spending a lot of time at computers can also isolate people. It is important to balance the time you spend online with other activities. The Internet is widely used in personal, school, and business settings. In each of these settings, there is a set of formal and informal rules that online users must follow.
Acceptable Use Policies Many organizations, such as schools and businesses, have an Acceptable Use Policy or AUP (also called an Internet Use Agreement) that regulates online use. Always read such an agreement carefully before signing it. Some common rules include: ◆ Always check with an authorized individual, such as your teacher, before downloading files. ◆ Do not abuse an organization’s e-mail system. Understand which Web sites you are allowed to access. Do not access forbidden sites. ◆ Do not use the Internet for personal reasons if the organization forbids this practice. 84
Chapter 3
WebDesignDW.glencoe.com
Netiquette While there is no fixed set of rules for interacting over the Internet, general guidelines, called Netiquette, have developed over the years. Netiquette encourages users to respect each other when interacting online. This involves treating other online users with courtesy and respecting their privacy. For more Netiquette guidelines, read Etiquette for Digital Communication in the Technology Handbook at the front of this book.
Protecting Your Privacy You cannot always be sure who you are dealing with when you are online. When online, remember that people may not be who they seem. Make sure to follow some guidelines to keep your personal identity private: ◆ Do not tell others your name. ◆ Do not tell others where you live. ◆ If an individual is making you uncomfortable for any reason, tell a parent or other trusted adult. Identify What are some common rules in Acceptable Use Policies?
Protected Information and the Web
Content Many TOUs grant permission to use graphics for personal use (e.g., in a personal Web site). Under this agreement, it is illegal to sell documents that contain these graphics. Always check site rules before downloading graphic files.
What is the purpose of a copyright?
Many Web sites allow you to copy or download text, graphics, and multimedia files or even software to your computer. While it may be easy to copy material from a Web site, it is not always legal. Many files are protected and can only be used under specific circumstances.
Legal Software Use
Table 3.5
Laws govern what you can legally download and how you can use these files. Many Web sites have Terms of Use (TOU) agreements that you must follow when downloading files. Always check these rules before you download and use files from a site. Most software can be categorized as commercial software, shareware, or freeware. These three types of software and their different types of permissions are described in Table 3.5.
Most software can be categorized into one of these three types of software. What is the difference between shareware and freeware?
Software
Usage Guidelines
Examples
Commercial
Copyrighted and intended to be sold for a profit. Cannot be copied or sold to others.
• Microsoft® Office • Macromedia® Dreamweaver® • Most video games
Shareware
Can be downloaded or copied if you pay a small fee to the copyright holder.
• WinZip® • Many online games
Freeware
Can be freely downloaded, copied, and used for any legal purpose.
Copyright and Fair Use Laws Copyrights exist to protect creators of original work. A copyright asserts that only the copyright’s owner has the right to sell his or her work or to allow someone else to sell it. You cannot claim a copyrighted work as your own or use it without permission in a Web site. Copyright laws extend to the Internet, as in the following guidelines: ◆ Intellectual Property Authors, software developers, and musicians all “own” their creative works, which are often referred to as intellectual property.
You Should Know Just because an item does not display a copyright notice does not mean that it is not copyrighted. A work is automatically copyrighted as soon as it is created.
ACTIVITY 3D Add a Copyright Notice 1 Make certain that your Hardware Devices site home page is open in Design view. 2 Press Ctrl + End to move to the bottom of the page. Press Enter. 3 From the Insert menu, choose HTML>Special Characters>Copyright. A copyright symbol is inserted into your page (see Figure 3.12).
Figure 3.12 The copyright symbol is selected after you insert it.
6 Make certain the line is still selected. In the Properties inspector, click the Size drop-down arrow and select 10. 7 If your copyright line is in italics, click Italic to turn off the italics. Your Web site should look similar to Figure 3.13. Save and close the Web site. Press Ctrl + Q to exit Dreamweaver.
Figure 3.13 The copyright notice appears at the bottom of the Web page.
The Hardware Devices Web page includes the basic elements that most Web pages contain—text, graphics, and hyperlinks. In future chapters, you will learn how to enhance a basic page such as this to produce professionallooking sites.
Reliability of Online Resources Anyone with the proper skills and equipment can publish a Web site. Many Web sites contain incorrect, misleading, and out-of-date information. To evaluate the quality of a Web site’s information, ask yourself the questions shown in Table 3.6.
Table 3.6 You should always evaluate the online sources that you use. Why is it important to identify a site’s purpose?
Question
Research
Who are the site’s authors?
Find out who wrote the information on a site. Then use a search engine to see what other works they have written and organizations they belong to.
What is the site’s purpose?
Knowing a site’s purpose can help you to detect bias in the site’s content. Is it maintained by a company that is trying to sell something? Is it sponsored by a particular organization?
Is the Web site current?
Check to see when the site was last updated. If the site contains information that changes over time, then it should be updated frequently.
Is the Web site accurate?
Web sites should cite sources to support their content. Verify a site’s accuracy by looking at other reliable resources, including print books or related Web sites. Online Basics
87
Figure 3.14
Digital Source Citations
Citing sources allows your readers to know that your information is reliable. Why do you think it is important to include the date you visited the site?
When you use information from a Web site, you must cite the source of the information. To use an author’s work without giving that person credit is known as plagiarism, which is illegal. The Modern Language Association (MLA) has guidelines indicating what information you should include when citing online sources. According to MLA style, you should include as many of the items shown in Figure 3.14 as you can.
Author’s name (last name first)
Complete title of the Web site (underlined)
Title of the article or Web page (in quotes)
Date of Internet publication or copyright date
Montoya, Chris. “Citing Sources.” Fairlawn Library Information. May 10, 2005. Fairlawn University. July 8, 2005 <www.flu.edu/library>. Name of the organization
Date you visited the site
Site’s URL (in angle brackets)
Check with your teacher to see if your school requires you to use specific guidelines for documenting your sites. Some schools require students to follow guidelines either by the Modern Language Association (MLA) or the American Psychological Association (APA). Define What does fair use mean?
Section 3.4 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Many organizations require individuals to sign an Acceptable Use Policy.
1. Define Acceptable Use Policy, Internet Use Agreement, Netiquette, commercial software, shareware, freeware, copyright, trademark.
4. Analyze Issues Describe at least two negative issues connected to Internet use.
• Software can be categorized as commercial software, shareware, or freeware. • Copyright law protects intellectual property. • Always cite the source of online information.
2. Explain the differences among commercial software, shareware, and freeware. 3. Describe an example of a fair use of a commercial Web site.
5. Evaluate Ethics A friend says it is not illegal to download online music. She argues that, if it were illegal, music would not be available for free online. Why do you agree or disagree with your friend?
Apply It! Cite Digital Sources Imagine you are doing a written report on Antarctica. Locate three Web sites that you would use to write this report. Write the citations for each of the sites. Include as much information as you can and cite your sources using established methods.
88
Chapter 3
CHAPTER 3
Reading Review
SECTION 3.1 The Internet Key Terms Internet service provider (ISP), 67 protocol, 68 Transmission Control Protocol/Internet Protocol (TCP/IP), 68 Hypertext Transfer Protocol (HTTP), 68 intranet, 70 extranet, 70
■ Tim Berners-Lee created the first GUI browser,
■ ■
■
leading to the development of the Web. The main Internet protocol, TCP/IP, provides a common language for all computers. The Web uses HTTP protocol. Other Internet protocols include FTP, Telnet, Gopher, and WAIS. E-mail, listservs, newsgroups or forums, chat rooms, Internet relay chat, and instant messaging are forms of Internet communication. Intranets and extranets are privately-owned networks.
text editor, 78 Web site development application, 78 WYSIWYG, 78 Web hosting service, 80 external hyperlink, 81
■ Text editors allow you to enter and edit HTML code. ■ Web site development applications provide a
WYSIWYG environment. ■ Word processors, graphics applications, and audio and video applications are used to create Web page elements. ■ Web hosting services allow you to publish your site to their Web servers. ■ External links allow users to jump from one Web site to a different Web site.
SECTION 3.4 Social, Ethical, and Legal Issues
SECTION 3.2 The Web Key Terms uniform resource locator (URL), 71 domain name, 72 domain name extension, 72
Main Ideas ■ Most URLs consist of a protocol, an address, a
directory path, and a retrieved file. ■ The exact appearance of a Web page depends on the browser that displays it. ■ Examples of Web browsers include Microsoft Internet Explorer, Netscape Navigator, America Online, Opera, Mozilla, Lynx, and Safari. ■ If you enter keywords or phrases into a search engine, it will return a list of related Web pages.
Key Terms Acceptable Use Policy, 84 Internet Use Agreement, 84 Netiquette, 85 commercial software, 85
Main Ideas ■ Businesses, schools, and organizations may require
individuals to sign an Acceptable Use Policy (or an Internet Use Agreement). ■ Software can be categorized as commercial software, shareware, or freeware. ■ Copyright law protects intellectual property from being used without author compensation. ■ Always cite the source of online information.
Online Basics
89
CHAPTER 3
Review and Assessment
AFTER YOU READ Reading Speed Turn back to Section 3.1. Make a note on a separate piece of paper of those sections or paragraphs that took you longer to read or that you read twice. Make brief notes about the content. As you study for a quiz or test, give the noted sections extra attention. If you still feel you do not understand the material, ask your teacher or a classmate for more explanation.
Reviewing Key Terms 1. Which of these is NOT a protocol used on the Internet: TCP/IP, FTP, HTML, Telnet? 2. What is the difference between the Internet, an intranet, and the World Wide Web? 3. What does the abbreviation “URL” stand for? 4. Rewrite the following sentence to make it true: In the URL www.uiowa.edu, the .edu portion of the domain name is the domain name index. 5. Explain how a search engine differs from a Web directory. 6. What two categories of application software are used in developing Web sites? 7. What is a Boolean search? 8. What does WYSIWYG stand for?
Understanding Main Ideas 9. Summarize how the TCP/IP protocol works on the Internet. 10. Describe situations in which each of the following might be useful: an FTP site, a listserv, a newsgroup. 11. Compare and contrast domain name addresses and IP addresses. 12. Summarize why it is important to test a Web page in different browsers. 13. Explain the function of the Boolean operators AND, OR, and NOT. 14. Identify at least three ways you can protect your privacy while you are online. 90
Chapter 3
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
15. Identify each component of the following URL and explain each one’s purpose: http://www.redcross.org
16. List the seven essential elements to be documented when you cite the use of a Web site. When applicable, note how that element should be formatted. Element
Formatting
(example)
(example)
1. Author’s name
1. Last name first
Critical Thinking 17. Describe intellectual property and its relationship to copyright laws and fair use laws. What is the difference between a copyright and a trademark? 18. Evaluate Information Why is it important to include the date on which you accessed a Web site in the site’s citation? 19. Draw Conclusions If the URL http:// www.noaa.gov/satellites takes you to the National Oceanic and Atmospheric Administration’s Satellite page, where do you suppose the URL http://www.noaa. gov/ takes you? Explain your answer. 20. Make Predictions Do you think the illegal downloading of music without paying for it will increase or decrease over the next few years? Explain your answer. 21. Analyze Identify the general system requirements that a computer needs to run graphics software. Describe why each requirement is important.
Review and Assessment
CHAPTER 3
22. Cause and Effect What difficulties might you have creating a Web site if you had a slow processor, low RAM, or limited hard drive space? Use a graphic organizer like the one shown below to explain your answer for each cause. Cause
Effect
(example) Slow Processor
➠
23. Analyze Information When might you want to use a text editor instead of a Web site development application? 24. Evaluate Information How can identifying the author and/or sponsor of a site help you determine whether or not information on that site is biased? 25. Draw Conclusions Why might some users prefer to use shareware instead of commercial software? Use the diagram below to explain your answer.
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below.
26.
+
+ +
The Internet, intranets, and extranets all use TCP/IP and require the same hardware, including communication lines, servers, and routers. All three networks can also be accessed using standard Web browsers. The differences between the three networks lie in how they are used, who owns them, and who is allowed to access them. While the Internet is accessible to everyone, intranets and extranets are owned by the organizations that create and maintain them. According to the paragraph, which of the following statements is true? Intranets are private, while extranets are public. Intranets require different servers than extranets. People can use the same browsers to access an extranet as they use to access the Internet.
WebDesignDW.glencoe.com Study with PowerTeach Go to the book Web site shown above. To review the main points in this chapter, select e-Review>PowerTeach Outlines>Chapter 3.
Result
Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 3.
27.
+
Result
28.
+
Result
WebDesignDW.glencoe.com
Read the paragraph below and then answer the question.
The Internet uses public communication lines, but intranets and extranets use private communication lines.
Commercial Software
Shareware
Reading & Writing
Online Basics
91
CHAPTER 3
Activities
1. MAKING CONNECTIONS Social Studies—Perform an Online Search Use the Internet to research the history of a telecommunications technology that is an important part of your life (the Internet, the Web, cell phones, personal computers, e-mail, etc.) ◆ Describe the history of the technology. ◆ Begin with how and why it was created. ◆ End with a description of the product and its importance today. ◆ Include at least six significant dates. You can create your history as a timeline or a short chronological essay. To locate information, use a keyword or Boolean search on at least two different search engines. Evaluate and cite your sources.
2. STANDARDS AT WORK Students practice responsible use of technology systems, information, and software. (NETS-S 2)
Understand Copyrights and Trademarks The software you use is protected by both trademarks and copyrights. A trademark protects the brand name of the product. For example, Macromedia is a trademarked name and if you use it for commercial reasons, you must get permission. Macromedia also has copyrights on its software and software code. When you purchase a program like Dreamweaver, you are getting permission to use the software, but you do not actually own it. Read the Terms of Use Web page from the sites of three large software companies such as Macromedia or Microsoft. ◆ Use a table to compare the Terms of Use listed on the three sites. In your table, list what is similar on all three sites and what is different. Are the terms for each site the same, or are they different? ◆ Select one term of use that is found on all three sites. Explain why you think this one term is important to all three companies.
92
Chapter 3
CHAPTER 3
Activities
3. TEAMWORK SKILLS Evaluate Internet Service Providers Working in a small group, research three Internet service providers (ISPs) to learn about the services that they offer to individuals and businesses and the prices they charge for these services. If possible: ◆ Research an ISP in your local community so that you can compare their services to larger regional or national services. ◆ Ask you teacher which ISP your school/district uses. Research that ISP to learn about its various services and prices. Create a chart based on the information that you learn. The chart should be similar to the one shown below.
ISP NAME
SERVICES FOR INDIVIDUALS
SERVICES FOR BUSINESS
PRICES FOR SERVICES
After you have completed the chart, analyze your information. Identify the ISP that your group believes offers the most value for individuals. Then, using the information that your group has gathered, compare the ISP you selected to what is offered to your school or district. Is the ISP you selected the same one used by your school, or is it different? If different, what services are the same for both ISPs, and what are different? Why do you think you chose one ISP, and your school chose a different ISP? Explain your reasoning.
4. CHALLENGE YOURSELF Internet Puzzle Use Boolean and keyword searches to find the answers to the following clues. Then, use the first letter of each answer to solve the riddle below. 1. This era of human history is usually divided into the Paleolithic, the Mesolithic, and the Neolithic periods. 2. This country in South America is bordered by Colombia, Peru, and the Pacific Ocean. 3. This is the Spanish word for the color red. 4. A peace treaty ending World War I was signed in this French castle. 5. The land between this river and the Tigris River is often referred to as “the cradle of civilization.” 6. The lead singer of this popular sixties rock group is Mick Jagger. RIDDLE: What is the name of a type of powerful computer? Online Basics
93
CHAPTER 3
Projects
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Search for Information Online Find information about a famous person. With your teacher’s permission, perform a Boolean search to identify the person who your school, town, or county is named after. Or, perform a search to identify a famous person who is from your town or local area. Perform another Boolean or keyword search to find an informative Web site about this person. Make a list of the URLs that you have located. For each URL, cite your digital source using established guidelines.
2. Create a Web Page with External Links
94
Use the information gathered in Exercise #1 to create a Web page about your famous person. Start Dreamweaver. On the Start page, choose HTML from the Create New column. Create a new site named Famous Person. In the Properties inspector, select Page Properties. In the dialog box, select an appropriate background color. Key the appropriate heading for your subject. The example here shows My School’s Name. Format the heading using the Heading 1 option from the Text Format list. Key an introduction and the name of the person you researched. Format the name using Heading 3. Key three to five facts about your person. Format these facts as an unordered list. Use the URLs you located in Step C of You Try It Skills Studio Exercise #1 to create external hyperlinks on your page. Link the name of your famous person to an external Web site that provides additional information about that person. Add a copyright notice to the bottom of the page. Proofread your work to find and correct any errors. View your page in at least two browsers to make sure it displays properly in both.
Chapter 3
CHAPTER 3
Projects
Read the projects described below. Then follow the directions to complete each project.
1. Use Online Resources Research the history of the Internet and of the Web. Write a short report or create a presentation based on your findings. In your report or presentation: ◆ Summarize how the Internet and the Web have evolved. ◆ Then, identify one current issue related to the use of online resources (for example, the issue of online privacy). ◆ Evaluate how your chosen issue has affected society either positively or negatively. Provide two or three examples to support and illustrate your evaluation. ◆ Describe potential solutions to reduce the negative effects of the issue.
2. Evaluate Software Research the Web site development applications that are currently available. For example, use the Web or software catalogs to learn more about the following software: ◆ Macromedia Dreamweaver ◆ Microsoft FrontPage ◆ Adobe GoLive ◆ HoTMetaL Pro Create a table like the one below to compare and contrast these different applications. In your table, note the system requirements, features, and price for each specific application. Compare and contrast your findings. Finally, predict which individuals or organizations might choose to use each application to complete specific tasks.
WEB SITE DEVELOPMENT APPLICATION
SYSTEM REQUIREMENTS
FEATURES
PRICE
Online Basics
95
CHAPTER
4
HTML Basics
YOU WILL LEARN TO… Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create lists using HTML View an HTML document Section 4.3 Insert images using HTML Insert links using HTML Debug and test a Web page Section 4.4 Re-create an existing HTML document in Dreamweaver Test a Web page in Dreamweaver
WHY IT MATTERS ................................................. Many people drive their cars every day without knowing exactly how the car works. While you can drive a car without understanding its mechanics, it is useful to understand what is happening under the hood—especially if the car breaks down. Likewise, while HTML code is the basis of all Web pages, you can create a Web site without knowing any HTML at all. Still, knowing HTML is useful— especially if you need to correct or modify the code used to create your page. Think about a mechanical object that you use every day. Do you understand how it works? If so, summarize how it works and explain how this understanding helps you use the object. If you do not understand how the object works, then evaluate how developing this understanding could help you use it.
96
Chapter 4
CHAPTER
4
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 4.1 Write HTML Code ........................ 4.2 Create an Ordered List .............. 4.3 Insert an Image ......................... 4.4 Change Colors ............................ You Try It Activities HTML Activities 4A Create Folders to Organize a Site ........................................... 4B Create and Save an HTML Document ................................... 4C Add Color and Format Text ....... 4D Create an Unordered List ......... 4E View HTML in a Browser............ 4F Insert an Image ......................... 4G Insert Absolute Links ................ 4H Test an HTML Document ............ Dreamweaver Activities 4I Create and Format a Page ........ 4J Add Headings and Unordered Lists ......................... 4K Insert a Graphic and Links ....... 4L Test a Web Page .........................
101 108 114 122
102 104 106 107 108 110 112 113
117 118 120 122
Chapter Assessment Making Connections ......................... Standards at Work ............................ Teamwork Skills ................................ Challenge Yourself ............................
126 126 127 127
You Try It Skills Studio Create a Home Page Using HTML ..... 128 Create a Links Page Using HTML ...... 128 Web Design Projects Create a Home Page Using HTML ..... Add Pages in Dreamweaver ............. Evaluate Technology Resources ....... Create a Web Page Using HTML........ Create a Community Web Site ..........
129 129 130 130 131
IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects
ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Create Memory Tools Successful readers use “mind tricks” to help them remember. An old but proven strategy is to make associations with new ideas you are learning. For example, the term WYSIWYG (wiz-zee-wig) stands for “What You See Is What You Get” and illustrates the concept of a computer application that lets you see on the monitor exactly what appears when the document is printed. As you read the chapter, look for opportunities to make up your own memory tools.
WebDesignDW.glencoe.com
HTML Basics
97
SECTION 4.1 HTML CODING Focus on Reading Read to Find Out The main purpose of this section is to explain Hypertext Markup Language (HTML), which is the code that is used to create Web pages. As you read, pay close attention to how HTML tags work.
Main Ideas
Key Terms
Reading Strategy
An HTML document is composed of instructions, or tags. These tags tell Web browsers how to display the content contained in a Web page. The World Wide Web Consortium establishes guidelines and standards for using HTML.
Hypertext Markup Language (HTML) HTML tag starting tag ending tag nested tag empty tag source code
List four types of tags and give examples of each. Use a table like the one below (also available online). Types of Tags
Example
Hypertext Markup Language, or HTML, is the code used to create Web pages. Knowing HTML will help you understand how Web site development applications like Dreamweaver work. And it will help you customize pages created in Dreamweaver.
HTML Tags How can I use HTML code to create a Web page?
You create Web page documents by inserting HTML tags into a text document. An HTML tag consists of text that appears between two angle brackets (< >). This text tells the Web browser how to display a page’s content. You can use a text editor to enter HTML code into a text document, or you can use a Web site development application like Dreamweaver to automatically create the HTML code for you. See Appendix B for a complete list of the HTML tags and their functions.
Tag Sets HTML tags often come in pairs that are called tag sets. Each pair includes a starting tag (also called an opening tag) and an ending tag (also called a closing tag). These tag sets tell a browser where formatting should start and end. A forward slash in the brackets indicates an ending tag. This example shows a tag set that makes text bold. <STRONG>very Starting tag
98
Chapter 4
Ending tag
WebDesignDW.glencoe.com
The HTML tags below format the sentence as a paragraph, display the word “very” in italics, and format the word “HTML” in bold:
It is <EM>very important to carefully proofread your <STRONG>HTML code.
If the above code were placed in an HTML document and displayed in a Web browser, it would appear as shown in Figure. 4.1. Notice that you do not see the HTML tags in the browser. The tags tell the browser how to display the information between the tags, but they themselves are not shown.
Figure 4.1 This example shows text that was formatted using several HTML tags. How would you alter the code to make the word “very” bold?
Nested Tags Nesting refers to the order in which HTML tags appear. A nested tag is a tag enclosed inside another set of tags. In the example above, the italic tag set (<EM>) and the boldface tag set (<STRONG>) are nested within the paragraph tag set (). When you nest tags, make sure you close the tag when you want that formatting to stop. In the example below, the Web browser will keep formatting text as bold <STRONG> until it comes to an end tag that tells it to stop . Tags should close in reverse order of how they were opened, so the last tag you open will be the first tag to be closed.
<STRONG>very
Empty Tags While most HTML tags are used in pairs, some are not. A tag that requires only an opening tag is called an empty tag (sometimes referred to as an orphan tag). Some common empty tags include: ◆ the tag (used to add a line break). ◆ the tag (used to insert a horizontal line). ◆ the tag (used to insert an image). For example, to add a line break, enter . Or insert a horizontal line with the tag. Both of these tags are empty and have no closing tag. Identify What are tag sets?
HTML Basics
99
HTML Guidelines and Standards Why is it important to follow W3C specifications?
Activity 4.1 Use HTML Tutorials Learn more about HTML guidelines by accessing online tutorials at WebDesignDW.glencoe.com.
The World Wide Web Consortium (W3C) releases specifications, called recommendations, on HTML and other languages used on the Internet. At the W3C Web site, you can read the complete specifications for the most recent version of HTML (at the time of writing, this version was HTML 4.01). The specifications developed by the W3C help ensure that Web designers create pages that can be displayed by any browser or browsing device that also follows these specifications. You should therefore follow these specifications when creating HTML code so that your Web pages can be viewed by as many people as possible.
HTML and Spacing Understanding basic guidelines for using HTML code will help you see the relationship between the code you write and what you see in the Web browser. For example, HTML documents display a single space between words. If you use the space bar, Tab key, or Enter key to add spaces between words, you will not necessarily see those spaces in your Web page in your browser. Look at the following lines of HTML code. <STRONG>HTML code <STRONG>HTML <STRONG>
code HTML code
Notice how the space between the words “HTML” and “code” is different in each line. However, when displayed in a browser, each line of text looks the same, as shown in Figure 4.2.
Figure 4.2 Extra spaces between elements in an HTML document will not display in a Web browser. How would the text in the third line of code display if you reduced space between the <STRONG> tag and HTML in the code?
HTML and Case Sensitivity HTML tags are not case sensitive. This means that browsers do not care whether a tag is in uppercase or lowercase letters (see below). A browser will read the tag <STRONG> and <strong> the same way. The W3C’s specifications for HTML 4.01 state that all tags should be uppercase. 100
Chapter 4
WebDesignDW.glencoe.com
Viewing Source Code You can see the HTML commands used to create any Web page by viewing its source code. A Web page’s source code is the text and HTML elements used to create that page. In most browsers, you can see the source code by selecting either Source or Page Source from the View menu. In Dreamweaver you can see the source code by selecting the Code view button in the Document toolbar. Dreamweaver also offers Split view, which allows you to see both the Web page and its source code on the same screen.
XHTML Extensible Hypertext Markup Language (XHTML) will soon replace HTML as the Web’s main markup language. Developed by the W3C, XHTML is a hybrid of HTML and Extensible Markup Language (XML). The advantage of XHTML is that pages written in the language can be read by many different platforms. While XHTML is very similar to HTML, it does follow some different specifications. ◆ XHTML documents must start with a Document Type Definition or DTD (you will learn more about DTDs in the next section). ◆ XHTML is case sensitive and all tags and attributes must be lowercase. Mixing uppercase and lowercase tags could lead to errors. ◆ In XHTML, all attributes must be in quotes and include values. ◆ In XHTML, ending tags are required with a few exceptions. Explain How can you see the HTML tags of any Web page?
Section 4.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• HTML tags tell the Web browser how to display a Web page’s content.
1. Define Hypertext Markup Language (HTML), HTML tag, starting tag, ending tag, nested tag, empty tag, source code.
4. Evaluate Why is a basic understanding of HTML an important skill for a Web designer?
2. Name four types of HTML tags and explain each one’s purpose.
5. Analyze Why must you be careful to include all end tags when using HTML? What would happen if you forget to include an end tag in your code?
• You can use tags such as <STRONG>, <EM>, and
to format text. • You can nest tags within one another. • While most tags are used in pairs, some tags are empty tags. • The World Wide Web Consortium (W3C) provides specifications for HTML.
3. Explain how to view the source code of a Web page in Dreamweaver.
Apply It! Write HTML Code Write the HTML code to display the following sentence in a Web browser. Be sure your code formats the sentence as shown: HTML code allows information to be displayed in a Web browser.
HTML Basics
101
SECTION 4.2 USING A TEXT EDITOR Focus on Reading Read to Find Out This section discusses how to use a text editor to create a Web site. Read to find out how Web designers use HTML tags to format text and create lists on Web pages.
Main Ideas
Key Terms
Reading Strategy
You can use a text editor to create text documents that can be displayed in a Web browser. These documents must contain HTML commands. Always organize your folders and files carefully when creating a Web site.
file name extension attribute ordered list unordered list
Compare and contrast ordered and unordered lists. Use a Venn diagram like the one below (also available online). Ordered List
Unordered List
In this section, you will use the text editor Microsoft Notepad to create an HTML document. (Notepad is part of the Microsoft Windows OS) Structure It is good practice to create a folder for your Web site before you define the site. You can then create subfolders for the site’s images and pages within this main folder.
Organizing Files and Folders Why is it important to organize a Web site’s files?
Every Web site is composed of folders and files. When you define a new Web site in Dreamweaver, the program can automatically create a folder for you if one does not exist. When you use a text editor, you must manually create all of the folders that will hold your Web site’s components. It is essential that you keep your Web site’s files organized. When you add graphics and create hyperlinks in an HTML document, you must include instructions that tell the Web browser which file to access and where to find it. Having well-organized files makes it easier to add this information to your HTML document.
ACTIVITY 4A Create Folders to Organize a Site 1 Identify the location where you are storing your Web sites. Ask your teacher for help if needed. 2 In your general folder, create a new root folder named MySkills1. 3 In the MySkills1 folder, create a folder named images. You will store the images for the MySkills1 Web site in this folder. 4 Locate the DataFiles\Ch04\Images folder. Copy the data file p_border.gif into the images folder you just created.
Describe What do you store in a Web site’s images folder? 102
Chapter 4
WebDesignDW.glencoe.com
Using Notepad What are the three main parts of an HTML document?
Using Notepad is like using a word processing application. However, unlike word processors, Notepad does not contain toolbars and other features.
Creating an HTML Document in Notepad An HTML document has three main parts: the Document Type Definition (DTD), the header, and the body. These three parts are shown in Figure 4.3. Document Type Definition (DTD)
Start HTML
Header
Figure 4.3 Most HTML documents have a basic structure similar to the one shown here. What is the function of the tag?
<TITLE>DOCUMENT TITLE
Body
CONTENT
End HTML
A DTD specifies what version of HTML is used in your page. The tag tells the browser to interpret every tag as HTML code until it reaches the tag. The tag set, or header, provides information to the browser about your page, such as its title and author. This information is used to catalog the page and does not appear in the browser. The page’s title is displayed in the browser’s title bar, and not on the Web page itself. The tag set encloses the code for the content you see displayed in the browser’s window. Most HTML documents only contain one header tag set, and one body tag set.
Saving an HTML Document in Notepad There are some guidelines you should follow when naming and saving your Web site’s files.
Naming Files Keep your file names descriptive but relatively short. Use the underscore character to indicate a blank space between words in a file name. For example, name a file contact_us.html, rather than contact us.html. It is also a good idea to use only lowercase letters when naming files. Choosing File Extensions A file name extension tells the computer what type of file it is reading. Notepad automatically saves all files as text files with the extension .txt. Since Web browsers cannot read this extension, you must change it to an .html extension when you save an HTML document.
You Should Know While you can also save an HTML file with an .htm extension, it is recommended that you use .html instead. This is because some older computers will not recognize .htm, while .html is recognized by almost every server operating system.
HTML Basics
103
ACTIVITY 4B Create and Save an HTML Document 1 From the Start menu, select All Programs (or Programs)> Accessories>Notepad. 2 In Notepad, key the text shown in Figure 4.4. Leave blank lines as indicated so you can add more HTML code later. 3 Choose File>Save. In the Save As dialog box, browse to the MySkills1 folder and open it.
Figure 4.4 These tags form the basic structure of an HTML document.
4 In the File name box, key: skills1.html. Click the Save as type dropdown arrow and select All Files (this allows you to save an .html file in Notepad). Your dialog box should look like Figure 4.5. Click the Save button to save your file.
The file will be stored in the MySkills1 folder.
Figure 4.5 Always verify that you are saving the file to the correct folder and as the correct type of file.
The file extension must be .html or .htm.
Identify What is the function of a DTD?
Adding Attributes Using HTML How can attributes enhance a Web page? Shortcut To enter a left angle bracket (), press Shift + the period key.
104
Chapter 4
Some HTML tags can contain properties, or attributes. An attribute is an instruction that further specifies a tag’s characteristics. Attributes allow you to assign colors, styles, and alignment to a page. You place attributes in opening tags. The attribute has a name, an equal sign (=), and a descriptor that must appear in quotes to conform to HTML specifications. The attribute must also be lowercase to meet specifications.
Font Color Attributes In HTML, you use the attribute color to change the text’s color. The descriptor then specifies which color to use. In the following example, the attribute color=“green” will make the word grass appear green in a Web browser. When viewed in a browser, the code will look like Figure 4.6.
They say the grass is greener over there.
Figure 4.6 The browser interprets the HTML code and places the word “grass” in green. What would happen if the tag were moved and placed after the word “greener”?
The easiest way to specify a color is to use one of 16 named colors, such as red, blue, white, or green. You can also use one of the 216 hexadecimal colors (see Appendix C for a complete list of named and hexadecimal colors). In this system, each color is represented by a six-character number/letter combination. In the current HTML standards (the standards followed in this chapter), the letters in a hexadecimal color are capitalized, while in XHTML coding, they are lowercased.
Background Color Attributes You can use one of the 16 named colors or a hexadecimal color to specify a page’s background color by adding attributes to the tag. The following tag uses the attribute bgcolor to make the background color green. Attribute name
Hexadecimal color
Heading Tags and Alignment Attributes Headings break text into short, readable sections. In this book, you will notice different sized headings. In HTML coding, you can define six heading levels by using the tag sets for the largest heading, for the next largest heading, and so on to . All text on a Web page automatically aligns to the left margin. To change the alignment of your text or headings, you can add the align attribute, as follows:
You Should Know The align attribute does not work with the tags or <STRONG>. This is because those tags change the style of the text, but not the alignment.
HTML Basics
105
ACTIVITY 4C Add Color and Format Text Using HTML 1 To open your skills1.html document, open Notepad and choose File>Open. Under Files of type, select All Files.
Troubleshooting When opening an HTML file in Notepad, make sure you select All Files. Otherwise, files with an .html or .htm file extension may not appear in the dialog box.
2 To add the background color yellow to the page, edit the opening tag so that it appears as follows: . 3 Move the insertion point to the line below the body tag. To create the blue heading for the page, key: Web Design Skills. 4 Press Enter twice. To create the first dark blue subheading, key: Skills I Already Have. 5 Press Enter twice. To create the second dark blue subheading, key: Skills That I Will Learn. 6 Select File>Save to save your document.
Define What is an attribute?
Creating Lists Using HTML What is the difference between an ordered and an unordered list?
Lists help make text easier to read and add visual interest to a page. Lists can also help readers identify key points on a page more quickly.
Types of Lists There are two types of lists (see Figure 4.7): ◆ An ordered list displays items that must appear in a particular sequence, such as the steps required to complete a task. Use the tags to create an ordered list. ◆ An unordered list contains items that can appear in any order. Use the tags
to create an unordered list. When you create either an ordered or an unordered list, each item in the list is contained within the tags .
Figure 4.7 Because numbers precede each item in an ordered list, these lists are often called numbered lists. A bulleted list is an example of which type of list?
106
Chapter 4
Ordered List
Unordered List
1. Open Notepad.
■
Starting tags
2. Enter HTML code.
■
Ending tags
3. Save the file.
■
Nested tags
ACTIVITY 4D Create an Unordered List Using HTML 1 Open your skills1.html document in Notepad. Position the insertion point at the end of the line that includes the text Skills I Already Have. Press Enter. Key:
. Press Enter. 2 Enter the code for the first unordered list (see Figure 4.8). Press Enter after keying each item. 3 Key
to indicate the end of the first unordered list. 4 Position the insertion point at the end of the line that includes the text Skills That I Will Learn. Press Enter. Key:
. Press Enter. Key the code for the second unordered list (see Figure 4.8). Press Enter after keying each item.
Troubleshooting As you enter code into Notepad, be sure to proofread your work carefully. Missing elements or misspelled HTML tags can cause your Web page to display incorrectly.
5 Key:
to indicate the end of the second unordered list. Select File>Save. Your document should look like Figure 4.8. 6 With your teacher’s permission, select File>Print. In the Print dialog box, click Print. Carefully proofread the printed document. Make needed corrections and save again. Ask your teacher how you should include your name in the document. Save and close your document.
Figure 4.8 Make sure that each item in the unordered list has an opening and ending tag.
First unordered list
Second unordered list
Identify What are the tags for the two types of lists?
HTML Basics
107
Viewing an HTML Page How can you view a Web page created in a text editor?
When you use a text editor, you cannot see how your page will appear in a Web browser while you are creating it. Instead, you must save the HTML document and then view it in a browser. If you need to make changes, reopen the page in Notepad, make corrections, resave it, and then reopen the file in the browser.
ACTIVITY 4E View HTML in a Browser 1 Start your Web browser. Select File>Open (or Open File). Browse to your MySkills1 folder. Select skills1.html and click Open. 2 Click OK. Your code is translated into a Web page (see Figure 4.9). Select View>Source to view your page’s source code. Close your browser.
Summarize Why do you have to view a page created by a text editor in a browser?
Figure 4.9 HTML document viewed in a Web browser.
Section 4.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• When creating a Web site, organize its files and folders so that you can easily locate various page components.
1. Define file name extension, attribute, ordered list, unordered list.
4. Analyze Why should you have a specific plan when organizing your Web site’s files and folders?
2. Discuss two guidelines for naming files.
5. Compare and Contrast When is it better to use an unordered list? An ordered list? Give examples and explain your choices.
• Attributes within HTML tags specify characteristics such as font colors. • To view the Web page you created in a text editor, you must open it in a Web browser.
108
Chapter 4
3. Explain why an HTML file must have an .html extension.
Apply It! Create an Ordered List Using Notepad, create an ordered list of your five favorite books with your most favorite book listed first. With your teacher’s permission, print your Notepad document and then print the page from a browser.
SECTION 4.3 ENHANCING AND TESTING YOUR HTML PAGE Focus on Reading Read to Find Out This section explains how to enhance a Web page by using HTML to insert graphics and links. Pay close attention to the HTML tags that are used to create these links.
Main Ideas
Key Terms
Reading Strategy
Use image tags to insert graphics using HTML. You can create links by using an anchor tag to specify the clickable area. A link can be absolute or relative. Web pages must be tested.
anchor tag text link graphic link relative link absolute link debugging testing
Compare and contrast absolute and relative links. Use a chart like the one below (also available online). Absolute Links
Relative Links
You create Web pages in stages. Adding new components one at a time allows you to correct errors as you go.
Adding Images Using HTML How does an image tag work?
You use the image tag to insert an image into a Web page. When a browser loads the page, the tag locates the image and displays it in the browser. An image tag contains five common attributes: ◆ src: specifies the source location of the image. ◆ alt: gives the browser an alternative text message to display if the image is missing.
You Should Know When creating an image tag, you should always use the src and alt attributes. The align, border, width, and height attributes are optional.
◆ align: wraps text around the image. ◆ border: places a border around an image. ◆ width and height: specifies the image’s width and height. src
alt
align
border
WebDesignDW.glencoe.com
width and height
HTML Basics
109
ACTIVITY 4F Insert an Image Using HTML 1 Open your skills1.html page in Notepad. 2 Position the insertion point at the end of the heading and press Enter. The insertion point should be positioned as shown in Figure 4.10.
Figure 4.10 Position your insertion point as shown in the figure.
Insert image tag here
3 Key the following to insert the border graphic stored in your Web site’s images subfolder: . Save your document.
List What are the five common image tag attributes?
Inserting Links Using HTML What type of links can be inserted into a Web page?
Hyperlinks can be categorized as external, internal, or intrapage, depending on where they send the user. You use anchor tags to insert links into an HTML document.
Using Anchor Tags An anchor tag identifies what is clicked on and where the link takes the user. The tag set is used to create all links. This tag set uses the href attribute (short for Hypertext Reference) to tell the Web browser where it needs to link to. The attribute contains hyperlink information that directs a Web browser to a new file or Web site.
Text and Graphic Links Hyperlinks can also be categorized according to how users activate the link. For example, you can make any text or image into a hyperlink. In Figure 4.11 on the next page, both the text link and the graphic link will take you to the Century Public Library home page.
110
Chapter 4
Figure 4.11 HTML allows you to create links that have text or graphic anchors. Why would you use a graphic link instead of a text link?
Text link Graphic link
Text Links A text link is text a user clicks to activate a hyperlink. For example, the following code tells the browser to display the text “Century Public Library” as a hyperlink: Century Public Library
Graphic Links A graphic link is an image a user clicks to activate a link. The anchor tag for a graphic link identifies the image users must click to activate the link. For example, in the code below, users must click the book.gif graphic to activate the link to the Century Public Library. The anchor tag for this link contains a nested image tag:
Relative versus Absolute Links Text and graphic links can be categorized as either relative or absolute.
Relative Links The code used to create a relative link contains the name of the file being linked to. For example, in the relative link below, users must click the text More Design Tips to go to the Web page file design_tips.html. A relative link only works if the document being linked to is in the same Web site folder as the document containing the link. The link is relative because it links pages within the same Web site. As long as the Web site’s file structure does not change, the relative links will work. It is a good idea to use relative links when linking to files within a Web site. More Design Tips
WebDesignDW.glencoe.com
Activity 4.2 Identify Absolute and Relative Links Learn more about absolute and relative links by visiting WebDesignDW.glencoe.com.
HTML Basics
111
Absolute Links The code used to create an absolute link contains the complete URL or path of the file being linked to. For example, the links to the Century Public Library are absolute links because they contain the complete URL for the library’s Web site. An absolute link requires the full file path because it absolutely must follow this path to link to the file. External links (links to objects outside a Web site) are often absolute links.
ACTIVITY 4G Insert Absolute Links Using HTML 1 Open your skills1.html page in Notepad. 2 Place the insertion point at the beginning of the closing tag. Press Enter twice. Place the insertion point above the tag. 3 Key:
<STRONG>Here are some additional links on Web design and related topics:
. 4 Press Enter. Insert this link: World Wide Web Consortium .
Figure 4.12 The links appear at the bottom of the Web page.
5 Press Enter. Insert this link: Indiana University Webmaster. 6 Save your Web page. It should look similar to Figure 4.12.
Links inserted here
Describe What is the difference between absolute and relative links?
112
Chapter 4
Testing a Web Page Why is it important to test Web pages?
Debugging refers to locating and correcting any obvious errors in your code. You should try to debug your work regularly as you build your sites. A number of applications have been developed to debug HTML code. These applications are called HTML validators. With an HTML validator, you submit your HTML file and, if the code contains errors, the validator generates an error list. The World Wide Web Consortium Web site offers a validator for checking Web page code. With your teacher’s permission, you can use this validator to check your own HTML documents. Testing involves checking the page to make certain that it displays as designed. Test your site in both Internet Explorer and Netscape Navigator and in any other browser you think your audience may use. Always double check that links work properly. External links are particularly important to check because sometimes pages get removed from the Web or their URLs change.
ACTIVITY 4H Test an HTML Document 1 Open your skills1.html file in your browser. Your screen should look similar to Figure 4.13.
Figure 4.13 The finished Web Design Skills page as displayed in Microsoft Internet Explorer.
HTML Basics
113
2 Check the following items: ◆ Does the text contain any spelling errors? ◆ Do the headings display properly? ◆ Does the image appear in the correct location? ◆ Do bullets appear in front of each item in the unordered lists? ◆ Does each link work properly?
3 If you need to make corrections, first close your browser, then open the page’s file in Notepad. Analyze the source code to locate the errors. Fix any errors that you identify. Save the file. 4 Test the page again in a Web browser. Open your page in other browsers if possible. Check the items in Step 2. Make any corrections. 5 Save the file, and test the page again. 6 Be sure to view the page in as many browsers as possible. Also try to view the page on different operating systems.
You have used a text editor to create a simple Web page. When you know HTML code, using a text editor can be an inexpensive way to develop a basic Web site. Summarize What does it mean to debug code?
Section 4.3 Assessment Reading Summary • The tag inserts
a graphic into a page. Always include the src and alt attributes.
• The tag inserts a link. The href attribute specifies the location (or object) being linked to. • An absolute link lists the complete URL or path of the linked file. A relative link contains only a partial URL or folder location. • You must test a newly created Web page in several browsers to make certain it works properly.
4. Analyze Links Does the following HTML statement contain an absolute link or a relative link? Explain.
2. List and describe the two attributes that you should use with every tag. 3. Describe the process of testing a Web site.
Product List
5. Evaluate Links When should you use an absolute link? A relative link? Give examples and explain your choices.
Apply It! Insert an Image Write the HTML code to insert an image named frame.gif into a Web page. The image file is stored in the site’s images folder. Center the image and include an alternate text message to display.
Web Languages
W
eb designers who wish to do more than simply display text and graphics need tools beyond HTML. Newer Web languages are enabling designers to create Web pages that can perform complicated and meaningful tasks.
Extensible Markup Language (XML) Whereas HTML tags only format documents, XML uses tags that let the computer identify what the information is. In this way, XML documents function more like databases than like traditional documents. For example, if you are searching HTML pages for someone named “Bill,” you might also find pages on congressional bills, electricity bills, duck bills, etc. Searching XML documents for tags that contain the word Bill would give you better results.
XML tags can be used to make text readable across many applications and platforms.
XML is changing the way business is done on the Web. Multiple computers are more easily able to connect and work from different locations. Because XML-tagged documents can identify each piece of information, Internet searches are also smarter.
JavaScript (Java) JavaScript is a computer programming code that is read by a built-in interpreter inside an Internet browser. This means it can be used to manipulate and interact with elements on a Web page. While JavaScript is currently used for simple tasks, such as checking form data for validity, or serving as the connector between different technologies, its crossplatform design is changing the world of technology. Integrated cell phones, PDAs, and portable computer systems will be better able to communicate over separate, and different, operating systems.
1. Research Languages Research new or emerging languages used for Web site development. Compare and contrast at least two of these new languages with HTML.
2. Evaluate Why do you think new markup and scripting languages and methods are always being developed? Why is HTML alone not enough to develop the kinds of Web sites people now demand? HTML Basics
115
SECTION 4.4 DREAMWEAVER VERSUS NOTEPAD Focus on Reading Read to Find Out The main purpose of this section is to show the advantages of using a Web site development application instead of a text editor. As you read about adding features in Dreamweaver, remember how you added these same features using Notepad. Read to find out how Dreamweaver makes many of these tasks easier and more efficient.
Main Ideas
Key Terms
Reading Strategy
A Web site development application allows you to create Web sites by clicking buttons instead of typing HTML commands into a text document.
color palette border
Identify the steps involved in testing a Web page. Use an organizer like the one below (also available online).
➠
➠
In the previous section, you used Notepad to create a single Web page named Web Design Skills. In this section, you will re-create this page using Dreamweaver. While both versions are composed of HTML commands, you will see that creating the page in Dreamweaver is much different from creating it in Notepad.
Adding Color and Formatting Text in Dreamweaver How is applying formatting different in Dreamweaver than in Notepad?
A major advantage of using Dreamweaver is that you can see approximately how your final page will appear while you are working on it. This allows you to make adjustments, such as changing font size or background color as you go.
Selecting a Background Color in Dreamweaver Dreamweaver provides different ways to select background colors for Web pages. To select a color, you can: ◆ enter hexadecimal numbers into the Background color box in the Page Properties dialog box. ◆ choose a color from a color palette, which is a menu of colors available in the Dreamweaver program. In the next activity, you will create a Web site and set the background color of a page in that site. This will provide the basic framework in which to build your Web site. 116
Chapter 4
WebDesignDW.glencoe.com
ACTIVITY 4I Create and Format a Page in Dreamweaver 1 Start Dreamweaver. On the Start page, in the Create New column, click Dreamweaver Site. Name the new site MySkills2. Follow the steps to define a new Web site (see You Try It activity 2A for a review of these steps). 2 In the Create New column, click HTML. Make certain you are viewing the new file in Design view. Choose File>Save As (or press Ctrl + Shift + S). In the Save As dialog box, save your HTML file as skills2.html. 3 On the Properties inspector, click the Page Properties button. In the Page Properties dialog box, click the Page font drop-down arrow and select Georgia, Times New Roman, Times, serif. 4 Click inside the Background color box. Key #FFFFCC or select light yellow from the palette (see Figure 4.14).
Figure 4.14 Key your background color into the Background color box.
5 Under the Category column, click Title/Encoding. In the Title box, key My Web Design Skills. The dialog box should look like Figure 4.15. Click OK. Click the Save button.
Figure 4.15 The options in the Page Properties dialog box change when a different category is selected.
HTML Basics
117
Creating Headings and Lists in Dreamweaver In this activity, you will add both headings and unordered lists to your Web page. To create an unordered list, select the text and click the Unordered List button on the Properties inspector. To create an ordered list, click the Ordered List button instead.
ACTIVITY 4J Add Headings and Unordered Lists in Dreamweaver 1 Make certain that your skills2.html page is open in Design view. With the insertion point at the top of the page, key: Web Design Skills. 2 Select the heading Web Design Skills. In the Properties inspector, click the Format drop-down arrow and choose Heading 1. 3 In the Properties inspector, click the Align Center button to center the heading. 4 On the Properties inspector, click in the Text color box and key: #6666FF. Your screen should look like Figure 4.16. Press Enter.
Text color
5 In the Document window, position the insertion point at the end of the heading and press Enter. Key the subheading: Skills I Already Have.
Figure 4.16 Key a hexadecimal value into the Text color box to change a font’s color in Dreamweaver.
6 Select the subheading and click the Align Left button on the Properties inspector. The subheading moves to the left margin. 7 With the subheading still selected, click the Format drop-down arrow and choose Heading 2. 8 In the Text color box, replace the hexadecimal value of #6666FF with #000099. Make sure the subheading is still selected and press Enter. 9 Position the insertion point at the end of the subheading and press Enter. On the Properties inspector, click the Unordered List button. 10 Key the first bulleted item in the list below. Press Enter to create the next bulleted item. Continue until you have entered all the items. I can operate my computer’s hardware. I can use Dreamweaver to create simple Web sites. I can insert previously made graphics into my Web pages. I can insert links into my Web pages.
118
Chapter 4
11 Press Enter twice to move the insertion point down two lines. This will also end the unordered list. Key: Skills That I Will Learn. 12 Select the second subheading and format it Heading 2. In the empty Text Color box, key the hexadecimal value of #000099. Make sure the second subheading is still selected and press Enter. 13 Position the insertion point after the subheading and press Enter. 14 On the Properties inspector, click the Unordered List button. 15 Key the first item in the list below. Press Enter to create the next bulleted item. Continue until you have entered all the items. I will learn to use Notepad to create HTML documents. I will learn to create Web pages that are well designed. I will learn to use color and images appropriately. I will learn to create and modify graphics. 16 Proofread your text. Your Web page should resemble Figure 4.17. 17 Save your Web page.
Figure 4.17 You use the Unordered List button to create a bulleted list in Dreamweaver.
Summarize How can you select background colors in Dreamweaver? HTML Basics
119
Adding Graphics and Links How does a border enhance a Web site?
In the following activity, you will add a border to your page. A border is a visual break on the page. It adds visual interest and helps separate items on a page.
ACTIVITY 4K Insert a Graphic and Links in Dreamweaver 1 Open the general folder that contains your MySkills2 folder. Open your MySkills2 folder. Inside this folder, create a new folder named images. Troubleshooting If you have trouble opening the graphics file, check with your teacher to make sure a graphics editor has been selected.
2 Open the DataFiles\Ch04\Images folder. Select the file p_border.gif. Copy this file to the images folder in your MySkills2 folder. 3 In Dreamweaver, make certain that your skills2.html page is open in Design view. Position the insertion point at the end of the Web Design Skills heading. Press Enter. 4 On the Insert toolbar, click the Images button (make sure the toolbar is in Common view). In the Select Image Source dialog box, click the Look in drop-down arrow and browse to your MySkills2 folder. Open the images folder and select the p_border.gif file. Click OK. The border image is inserted into your Web page. 5 Position the insertion point at the end of the last bulleted item on your page. Press Enter two times. This will move the cursor down two lines and end the bulleted list. 6 On the Properties inspector, click the Bold button. Click the Size drop-down arrow and select 16. Key the following: Here are some additional links on Web design and related topics: 7 Press Enter. Click the Bold button to deselect it. Make sure the Size is still set to 16. 8 With the Insert toolbar in Common view, click the Hyperlink button. In the Hyperlink dialog box, in the Text box, key: World Wide Web Consortium. In the Link box, key http://www.w3.org. Your dialog box should look like Figure 4.18. Click OK.
Figure 4.18 In the Hyperlink dialog box, enter both the text for the text link and the link’s URL.
120
Chapter 4
9 Position the insertion point after the link. Press Enter. 10 Click the Hyperlink button. In the Text box, key: Indiana University Webmaster. In the Link box, key: http://webmaster.indiana.edu. Click OK. Click once after the hyperlink to deselect it. If necessary, select the text and change its text size to 16. Your page should look similar to Figure 4.19.
Figure 4.19 Final page created using Dreamweaver.
11 To view the source code for your Web page, switch from Design view to Code view. Dreamweaver automatically enters the HTML code for you, as shown in Figure 4.20. Switch back to Design view. Save your work.
Figure 4.20 Use Code view to view the source code for your Web page.
Define What is a border?
HTML Basics
121
Testing a Web Page Why is it important to test a Web page?
Whether you use Notepad or Dreamweaver to create your HTML document, you must test your page. Visitors will not trust a page that contains errors or broken links. Carefully proofread and spell check your Web page. Always examine your page in more than one browser to make sure each line works properly and check all of your hyperlinks.
ACTIVITY 4L Test a Web Page in Dreamweaver 1 Open your skills2.html page in Design view. Position the insertion point before the Web Design Skills heading. 2 From the Text menu, select Check Spelling. The Check Spelling dialog box opens if spell check detects an error. Key the correct spelling in the Change to box. You can also select the correctly spelled word from the Suggestions list, if available. Select Change when finished. 3 With your teacher’s permission, select File>Print. Proofread and correct your page. Save your corrections. 4 Choose File>Preview in Browser. View your page in the Web browsers available on your computer. Test your hyperlinks to be sure they take you to the correct Web pages. Make certain the page components, such as headings, bullets, and hyperlinks, display properly. Close your browser(s) when finished. Save your Web page. Exit Dreamweaver.
Identify What menu do you use to check spelling in Dreamweaver?
Section 4.4 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• A Web page that was created using Notepad can also be created using Dreamweaver.
1. Define color palette, border.
4. Analyze What are the advantages of using hexadecimal numbers for colors rather than using the Dreamweaver color palette?
• Because Dreamweaver provides a WYSIWYG editor, you do not need to enter HTML tags. • Careful proofreading and testing are a vital part of creating a Web page.
122
Chapter 4
2. Describe each alignment button available in Dreamweaver. 3. Explain how you would create an unordered list in Dreamweaver.
5. Compare and Contrast How was creating hyperlinks in Dreamweaver different from creating them in Notepad?
Apply It! Change Colors In Dreamweaver, open your MySkills2 site. Find three colors in the hexadecimal chart in Appendix C. Enter each color in the background color field of the Page Properties dialog box. Which background color looks best? Why? Do not save your changes.
CHAPTER 4
Reading Review
SECTION 4.1 HTML Coding Key Terms Hypertext Markup Language (HTML), 98 HTML tag, 98 starting tag, 98
SECTION 4.3 Enhancing and Testing Your Page Key Terms anchor tag, 110 text link, 111 graphic link, 111 relative link, 111
absolute link, 112 debugging, 113 testing, 113
Main Ideas ■ HTML tags tell the Web browser how to display a ■ ■ ■
■
Web page’s content. You can use tags such as <STRONG>, <EM>, and
to format text. You can nest tags within one another. While most tags, such as and , are used in pairs, some tags, such as and , are empty tags. The World Wide Web Consortium provides specifications for various Web-based technologies, including HTML.
Main Ideas ■ The tag inserts a graphic into a page. The
■ ■ ■
■
SECTION 4.2 Using a Text Editor
src attribute specifies the graphic’s file location, and alt provides an alternative text message to display. The tag inserts a link. The href attribute specifies the location (or object) being linked to. A link’s anchor can be either text or an image. An absolute link lists the complete URL or path of the linked file. A relative link is used with local files and contains only a partial URL or folder location. You must test a newly created Web page in several browsers to make certain it displays properly and all of its links work correctly.
Key Terms file name extension, 103 attribute, 104
ordered list, 106 unordered list, 106
SECTION 4.4 Dreamweaver Versus Notepad
Main Ideas
Key Terms
■ When creating a Web site, organize its files and
color palette, 116
■
■ ■
■
folders so that you can easily locate various page components. You must save a Web page file with an .html or .htm extension so that browsers can identify it as an HTML document. Attributes within HTML tags specify characteristics such as background and font color and font size. Ordered (or numbered) lists contain sequential items, while unordered (or bulleted) lists contain items that can appear in any order. To view the Web page you created in a text editor, you must open it in a Web browser.
border, 120
Main Ideas ■ A Web page that was created using Notepad can ■ ■ ■ ■
also be created using Dreamweaver. Because Dreamweaver provides a WYSIWYG editor, you do not need to enter HTML tags. You can apply styles to text, such as font color and font size, to change its appearance. You can insert graphics and links by entering the Web page or file location into a dialog box. Careful proofreading and testing are a vital part of creating a Web page.
HTML Basics
123
CHAPTER 4
Review and Assessment
AFTER YOU READ Exchange Memory Tools Work with three other students to create a poster or handout that illustrates or explains four of the most helpful memory aides developed by the group. These memory aides will help the group to remember important steps or concepts. Ask your teacher for permission to display the posters in the classroom.
Reviewing Key Terms 1. Which of the following is NOT an HTML tag: a. b.
c. d. 2. Explain how nested tags are different from empty tags. 3. What does it mean to view a Web site’s source code? 4. What is the purpose of an attribute? 5. Describe the tag sets that are used to create ordered and unordered lists. 6. What is the purpose of an anchor tag? 7. Rewrite this statement to make it true: When a link statement contains the complete URL of the site being linked to, it will create a relative link. 8. What does it mean to test a Web site?
Understanding Main Ideas 9. Explain the need for starting and ending tags. 10. Describe why it is important that your files and folders be organized. 11. Discuss the purpose of the <TITLE> tag. 12. Explain the difference between an unordered list and an ordered list. 13. Describe how to view a Web page you created in a text editor. 14. Discuss why you should always include the alt attribute in an image tag. 124
Chapter 4
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
15. Describe the three basic parts of an HTML document and summarize their function. Part
DTD
Header
Body
Function
➠ ➠ ➠
16. Explain the difference between testing a Web page and debugging it.
Testing
Debugging
Critical Thinking 17. Analyze HTML The W3C Web site states that “HTML is the common language for publishing on the World Wide Web.” What does this statement mean? 18. Write HTML Write the HTML code to display the following sentences: The American flag is red, white, and blue. It has thirteen stripes and fifty stars. When you are finished, view your HTML code in a Web browser. Make sure your sentences are formatted as shown. Reopen your HTML document in Notepad and add a background color to your page so all of the text will display properly.
CHAPTER 4
Review and Assessment
19. Evaluate Applications Create a table like the one below with two columns labeled Notepad and Dreamweaver. In the first column, list any advantages you found when creating a Web page in Notepad. In the second column, list any advantages you found when creating the same Web page in Dreamweaver. Below the table, write a few sentences summarizing what you discovered.
Read the paragraph and table below and then answer the question.
An HTML document is composed of instructions, or tags. These tags tell Web browsers how to display the content contained in a Web page. HTML Terminology
Notepad
Dreamweaver
Advantage
Advantage
Advantage
Advantage
20. Predict Outcomes A Web site’s image files are stored in the images folder. What would happen if you created a link to an image file that was not stored in the images folder? 21. Compare and Contrast relative links and absolute links. Why are internal links usually relative links? Why are external links usually absolute links? Explain your answer and provide examples, if possible.
starting tag
Tag that tells browser when formatting should start
ending tag
Tag that tells browser when formatting should end
nested tag
Tag enclosed within another set of tags
empty tag
Starting tag that does not require an ending tag
According to the table, which of the following statements is true? HTML coding always requires a starting tag, but it does not always require an ending tag. You use an empty tag to tell the browser when formatting should end. If you want to be sure your tag will format the text properly, you need to nest the tag.
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below.
22.
+
Result
23.
+
Result
24.
+
+
Result
A nested tag has no text between the brackets.
WebDesignDW.glencoe.com Study with PowerTeach Go to the book Web site shown above. To review the main points in this chapter select e-Review>PowerTeach Outlines>Chapter 4.
Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 4. WebDesignDW.glencoe.com
HTML Basics
125
CHAPTER 4
Activities
1. MAKING CONNECTIONS Social Studies—Perform an Online Search Tim Berners-Lee was the individual who created HTML. Time Magazine Online voted Tim Berners-Lee into the category of the top 100 Thinkers and Scientists. Learn more about this individual. ◆ Use the Internet or other sources to research the contributions that Berners-Lee has made to the development of the Web. ◆ Then, write a two-page paper on how his work has changed the world we live in. As part of your paper, include your ideas about what the world would be like now if Berners-Lee had never made his contributions to Web development. Use a Cause-Effect chart like the one below to organize the possibilities. Internet search engines do not exist
➠
Information difficult to find on Internet
2. STANDARDS AT WORK Students use a variety of media and formats to communicate information and ideas effectively to multiple audiences. (NETS-S 4)
Create an HTML Quick Reference Table Create a quick reference guide for your computer lab or classroom. The guide should describe common HTML tags and should include an example showing how each tag is used. Make of list of tags to be included. Organize the tags into the following categories: ◆ Structure
◆ Lists (both ordered and unordered)
◆ Headings (assume six levels of headings)
◆ Links (absolute and relative)
◆ Paragraph and character formats
◆ Images
Create a table similar to the one below. Proofread your work carefully. With your teacher’s permission, prepare copies of the reference table for your computer lab or classroom.
TAG NAME Structure ...
126
Chapter 4
DESCRIPTION
EXAMPLE
CHAPTER 4
Activities
3. TEAMWORK SKILLS Create Web Design Biographies With your teacher’s permission, gather the names of each member in your team along with a short biography. As a team, use HTML to create a Web page that includes this information. Separate each team member’s information with a horizontal rule. Use the empty tag to add this line. As your team develops the page, write a specification sheet describing the formats you have chosen. Use a table to record the background color, fonts, font colors, and font sizes that you have selected for your Web page.
4. CHALLENGE YOURSELF Create a Table Using HTML Key the following code in Notepad. Add a DTD, tags, and header to your HTML document. Provide the page title Challenge Yourself Table.
<STRONG>Width 100 x Height 200
Width 350 x Height 200
Save the file and view the results in a browser. Then, perform the following steps.
1 Reopen your source code. 2 Change the text in the first and third cells. 3 View the changes in a browser.
HTML Basics
127
CHAPTER 4
Projects
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Create a Home Page Using HTML
Create a home page using HTML that lists three movies you have seen and would recommend to others. Create a folder named Movies_Seen. Use Notepad to create a basic HTML document. The page’s main head will be Movies I Recommend. Save the file as index.html in the Movies_Seen folder. Use an image tag to insert the data file movies.gif (located in Data Files/Ch04/Images). Save the page in an images folder in your Movies_Seen folder. Adjust the image’s height and width as needed and add alternative text. Select appropriate colors for the background and fonts. Change fonts as needed. Save your page. View the results in a browser. Make any necessary changes. View the results after making the changes.
2. Create a Links Page Using HTML Create a second page that will link to your home page. Use Notepad to create a second page titled Movie Summaries. Save the file as summaries.html in the Movies_Seen folder. List each movie’s title as a heading. Key a brief paragraph summarizing each movie (but do not give away the ending!). Select appropriate colors for the background and fonts. Change fonts as needed. Save your page. Open the index.html page. Add relative links from the home page to the summaries.html page. Make the title of each movie you are recommending into a text link that takes the user to the Movie Summaries page. Use the following format to add your links: File linking to
Text link
movie title
Open the index.html page in your Web browser. Test all links. Make changes as needed and retest your page if necessary.
128
Chapter 4
CHAPTER 4
Projects
Read the projects described below. Then follow the directions to complete each project.
1. Create a Home Page Using HTML You have been assigned to develop a Web site for a cross-cultural travel club. You decide that the club’s home page will have a light yellow background with a large red heading that reads: Cross-Cultural Travel Club. You plan to add a travel-related image to the page. The page will also contain a short sentence describing the club’s purpose and an unordered list highlighting the following upcoming events: ◆ Meeting: Wednesday, October 5 from 3:30 to 5:00 p.m., Xavier Jiminez as guest speaker ◆ Meeting: Wednesday, October 19 from 3:30 to 5:00 p.m., Barbara Lin to show slides of her trip to Taiwan Create the page using HTML (you can use Dreamweaver as your text editor). Make sure you format the sentences as seen above. Test the page in a browser and make any changes to improve the look of the page. Also print the final HTML code for your page.
2. Add Pages in Dreamweaver Use Dreamweaver to add a Meetings page to your cross-cultural travel club Web site. The Meetings page should have a light green background. On the Meetings page: ◆ Add a large heading in red: CROSS-CULTURAL TRAVEL CLUB CALENDAR. ◆ Find an appropriate graphic for this page and insert it below the main heading. ◆ Add the subheading: Meeting: Wednesday, October 5 from 3:30 to 5:00 p.m. Xavier Jiminez will talk about a conversation he had with his grandmother who is from Guatemala. He will describe the village where she was born, the life of the people there, and her experiences after moving to a large city in the United States. ◆ Add the subheading: Meeting: Wednesday, October 19 from 3:30 to 5:00 p.m. Barbara Lin will present a slide show on Taiwan. She will talk about her experiences on this trip and her visit with her parents’ relatives. She will show slides of the major cities as well as the countryside. Add a link from each event on the Cross-Cultural Travel Club home page to the Meetings page. On the Meetings page, add a link to the government sites for Guatemala and Taiwan. Test the site in a browser and make any necessary changes.
HTML Basics
129
Critical Thinking: Evaluate Technology Resources A friend is starting a graphic design business. She asks you to recommend a computer that she can use for her business. In particular, she needs a computer that: ◆ is portable, so she can take it on client visits. ◆ has a lot of memory to support graphics software and other programs. ◆ has a hard drive with a large capacity. ◆ can function without wires. ◆ is made by a well-known, reliable manufacturer. 1. Use the Web or catalogs to research products that meet your friend’s requirements. 2. Prepare a table like the one below to organize your research. List the information for three computers, each from a different manufacturer. MANFACTURER
MODEL #
PRICE
FEATURES
OPTIONAL FEATURES
3. Recommend one computer to your friend and give reasons for your choice.
Use Technology Tools: Create a Web Page Using HTML Use HTML to create a Web page called Reference Web Sites for Online Research. Include the following elements on your page: ◆ A page title ◆ A graphic ◆ An unordered list of three Web sites that you frequently use to research school projects online When planning and creating your Web page, follow these steps: 1. Choose colors for your page, including the background color and the font colors. Choose appropriate font sizes. Select a graphic element such as a border that will work on your page. 2. Plan the content for your page. Write a short description of each research site you have chosen. Note why you think each site is a reliable resource. 3. Write the HTML code for the page. Include a link to each research site. 4. View your completed page in a browser. Check spelling and proofread your page. Test your links. Revise the HTML code to correct errors as needed. 5. Have a peer review your finished Web page, and revise your page as needed. 130
Chapter 4
Create a Community Web Site The Internet can be a powerful tool for social change. In 1997, Jody Williams won a Nobel Prize for her work to outlaw land mines. Using e-mails and the World Wide Web, she organized citizen’s groups around the world and helped forge a coalition among the world’s nations. Select a community or national issue that is important to you. Create a one page Web site that tells other teens about this issue, and lets them know what actions they can take to become more involved. When creating your Web site, follow these steps: 1. Plan the site’s content. Research the issue using reliable resources. Try to locate different perspectives on the issue and identify possible solutions. 2. Summarize your research. Describe the issue and how it affects your community, the nation, or the world. 3. Include a list of steps that your audience can take to address the issue. You will include this information on your Web site, so be brief. 4. Write down the URLs of links where people can learn more about the issue. 5. Use Dreamweaver to create a one-page Web site about your issue. On this site, include:
◆ the summary of your research. ◆ the list of steps needed to address the issue. ◆ links to sites related to the issue. 6. Select appropriate background and font colors for your site. Add a graphic such as a border to the site. 7. Test your site in a browser. Be sure to test all the hyperlinks. Spell check and proofread the site and make changes as needed. 8. Optional (with your teacher’s permission)—publish the finished Web site on your school or class Web site. 9. For your portfolio, include a screen shot and an electronic copy of your finished product.
HTML Basics
131
UNIT
2
Designing Web Sites
Go to this book’s Web site at WebDesignDW.glencoe.com. Click Unit Activities and select Unit 2 Internet Research Tips. Practice skills and strategies that will help you quickly find what you are looking for on the Internet.
132
Think About It Know Your Strengths! Building a Web site requires many different talents and strengths. You will find that some aspects of Web design are easy for you while others may be hard. Knowing what you enjoy doing can help focus your learning of new and difficult tasks.
Evaluate Yourself Activity Write down the top two tasks you have enjoyed most during your study of Web design so far. Then, write down your two least favorite tasks. What characteristics do the tasks you enjoy have in common? How are these different from your least favorite tasks?
133
CHAPTER
5
Planning a Web Site
YOU WILL LEARN TO… Section 5.1 Determine the purpose of your Web site Define the target audience for your Web site Write a mission statement Section 5.2 Describe three types of navigation schemes State the advantages and disadvantages of each scheme Choose the appropriate navigation scheme for a particular site Section 5.3 Discuss the advantages of storyboarding a site Draw the navigation structure of a site Create sketches of a site’s pages
WHY IT MATTERS ................................................. Benjamin Franklin wrote, “By failing to prepare, you are preparing to fail.” Planning—thinking about your goals and the steps you need to take to reach these goals—is always the first step in any successful project. Failing to plan can lead to wasted time, wasted resources, and wasted energy. Developing a Web site is a lot like planning a road trip. Where do you want to “go” first? What is your final destination? How many stops along the way can you afford? President Dwight Eisenhower once said, “Plans are nothing, but planning is everything.” What do you think he meant by that? In what way is the process of planning a Web site more important than the actual plan for the Web site?
134
Chapter 5
CHAPTER
5
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 5.1 Write a Mission Statement ....... 139 5.2 Create a Hierarchical Chart ..... 145 5.3 Create a File Name List ............. 151 You Try It Activities 5A Create a Mission Statement ..... 5B View a Web Site in Map View .... 5C Chart Navigation Structure ...... 5D Specify File Names..................... 5E Sketch a Web Page ....................
139 143 147 149 150
You Try It Skills Studio Create a Mission Statement............. 158 Plan a Web Site .................................. 158 Web Design Projects Create a Storyboard ......................... 159 Create Sketches ................................ 159
IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects
ON THE WEB Chapter Assessment Making Connections ......................... Standards at Work ............................ Teamwork Skills ................................ Challenge Yourself ............................
156 156 157 157
Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Reading for a Purpose Just as an author’s purpose helps him or her determine what content to put in and what to leave out, your purpose for reading helps you decide what is most important to remember. Write down and complete this sentence for each section before you read: My purpose for reading this section is to _________. (Hint: You may want to use each section’s Focus on Reading and the colored headings to help you finish the sentence.)
WebDesignDW.glencoe.com
Planning a Web Site
135
SECTION 5.1 CREATING A MISSION STATEMENT Focus on Reading Read to Find Out The main purpose of this section is to explain how to write a mission statement. As you read, ask yourself how a mission statement can help you create a Web site that fits your goals.
Main Ideas
Key Terms
Reading Strategy
Before you create a Web site, you should identify the purpose and audience of the site. Once these are known, you will be able to write a mission statement for your site.
mission statement target audience
Identify the steps in planning a Web site. Use a flowchart like the one below (also available online).
Determine Purpose and Goals
➠
➠
How you design your Web site depends upon your purpose and your audience. To clarify the reason you are creating a Web site, you should create a mission statement, a brief statement that describes the purpose and audience of your Web site.
Determining Purpose and Goals What are some possible goals of a Web site?
Content When planning your site, think about how your long-term goals may vary from your immediate goals.
Before you create a Web site, consider the site’s purpose and goals. The purpose of your Web site is what you want your site to do. The goals of your Web site outline the way you will fulfill your purpose. It is important to first determine the type of site you plan to create. Your site may inform, entertain, serve as a Web portal (such as a search site or a directory of links), address a particular group of people, provide a personality profile (such as a personal page or résumé), or fulfill another specific purpose. Identifying a site’s purpose will help you determine goals that you can work toward. To determine the purpose of your site, ask yourself: ◆ What are my immediate goals for the Web site? ◆ What are my long-term goals for the Web site? ◆ What is my budget? ◆ What is my time line? After you define the overall goal of your site, consider whether the goal is achievable. For example, you decide to create a site about pets. You could narrow your goal by providing information about the care of pet lizards. Explain Why is it important to identify a site’s purpose?
136
Chapter 5
WebDesignDW.glencoe.com
Determining the Audience What is the best way to determine a Web site’s audience?
After you have outlined the goals for your site, determine who will be your target audience. Your target audience includes all of the people that you want to visit your Web site. You need to consider your target audience early in the planning process because the content and design should appeal to them. To help analyze your audience, answer the questions presented in Table 5.1.
Table 5.1
Identifying a Target Audience Question
Purpose
Who is my target audience?
• Be as specific as possible when defining your audience. • Consider your target age group, so you can determine the information you will include on your Web site.
Who am I?
• Determine how you want to present yourself to your target audience. Choosing how you want to communicate can prevent inappropriate content or design decisions.
What does my target audience already know about my topic?
• If the audience knows nothing about a topic, then you need to provide introductory information. • If most of your audience knows a lot about your topic, then consider what specific information you can provide that they will find useful and interesting.
What does my target audience want to learn from my site?
• Consider what your target audience wants or needs to know about your topic. • If possible, try to talk to potential visitors and include information that meets their needs.
How will my target audience access my site?
• Think about how a typical person within your audience will access your site. Does your intended audience use high-bandwidth networks, dial-up connections, or a combination of both? • Consider how you can create a site that everyone in your audience can access and use easily.
Identifying your target audience can help you determine your site’s content. Why is it important to consider how people will access your site?
Summarize Why is it important to identify a site’s target audience?
Planning a Web Site
137
Writing a Mission Statement Figure 5.1
What is the purpose of a mission statement?
A mission statement helps you remember the purpose of the site as you develop it. How might the mission statement differ if the Music Department were developing a site to invite other schools to participate in contests?
Once you have determined your Web site’s purpose and target audience, you are ready to write your mission statement. Creating a mission statement helps you determine what content is essential to your Web site. Refer to your mission statement frequently as you continue the planning and development process. This will encourage you to stay “on target.” For example, the Music Department Web site provides information about the Department’s performances. Assume that this Web site has not yet been developed and it is our job to build it. To create a mission statement, ask yourself a series of questions like those listed in Figure 5.1. Problem
What is the site’s purpose?
Solution
➠
• To provide general information about the Music Department
• To provide specific information about performances and programs
What are the site’s immediate goals?
What are the site’s long-term goals?
➠ ➠
• To supply general music program information
• To provide performance information
• To expand awareness of the Music Department
• To encourage people to participate in programs
Who is the target audience?
➠
• Students, parents, school employees, and community members
• Most people will access the site from home.
Mission Statement The Music Department Web site will promote the awareness of the Century High School Music Department by providing performance and program information.
138
Chapter 5
In this unit, you will work on a Language Club Web site. In the following activity, you will develop the mission statement for this site.
ACTIVITY 5A Create a Mission Statement 1 At the top of a new document, write: Language Club Mission Statement. Use the information in Table 5.2 to write a mission statement below the title. The statement should be relatively short (less than 50 words).
Table 5.2
Language Club Purpose and Audience
The Language Club Web site is being developed for high school students.
Question
Answer
Who is the audience?
High school students, members, and nonmembers of the club.
What does the audience already know about this topic?
The level of knowledge varies. Some individuals are new to the subject.
What does the audience want to find out from the site?
Meeting times, locations, and topics. Upcoming events and fundraisers.
How will the audience access the site?
The site will be accessed from the school’s high-speed Internet connection, or from home, where most students have a dial-up connection.
2 Proofread the mission statement. Name the document Language Club Mission. Ask your teacher where and how to save your work.
Describe How does a mission statement help you create your Web site?
Section 5.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Before building a Web site, you must spend some time planning it.
1. Define mission statement, target audience.
4. Analyze How might the immediate and long-term goals of the Language Club site be different?
• It is important to determine the purpose of your Web site before building it. • You must identify the characteristics of your site’s audience. • A mission statement describes the purpose and audience of the Web site.
2. Explain why it is often necessary to refine a Web site’s topic when planning a site. 3. List four things you should know about the audience to write a mission statement.
5. Compare and Contrast How would a clothing Web site for very young children differ from a clothing site for teenagers?
Apply It! Write a Mission Statement Write a mission statement for a Web site you would like to develop for one of your hobbies. Describe the purpose of your Web site and your target audience.
Planning a Web Site
139
SECTION 5.2 NAVIGATION SCHEMES Focus on Reading Read to Find Out This section describes the different navigation schemes used by Web sites. As you read, note how different navigation schemes serve different purposes.
Main Ideas
Key Terms
Reading Strategy
Navigation schemes define the structure for Web sites. The navigation scheme should enhance the purpose of the site and help visitors find the information they seek.
Compare and contrast the hierarchical and linear navigation schemes. Use a Venn diagram like the one below (also available online).
Hierarchical
Linear
In the early days of Web design, designers often created the individual Web pages that they needed, then linked them together. As sites became larger and more complex, they often became disorganized and difficult to navigate. Web designers soon realized that they needed to plan the structure and the relationships among a site’s pages before building the site. Activity 5.1 Explore Navigation Schemes Learn more about different navigation schemes by visiting the book’s Web site at WebDesignDW.glencoe.com.
You Should Know Developing a site’s navigation scheme is part of interaction design.
Types of Navigation Schemes What should I consider when choosing a navigation scheme for my site?
A navigation scheme is the plan that determines how Web pages will relate to each other. A Web site’s structure should support the site’s mission statement and appeal to its target audience. When choosing a navigation scheme, think about how visitors will interact with your site. Will your visitors go directly to specific topics or will they access the pages sequentially? Viewing your site from the audience’s perspective can help you develop a site visitors will enjoy. There are three main types of navigation schemes. ◆ The hierarchical navigation scheme is used by the majority of Web sites. ◆ The linear navigation scheme is often used with a hierarchical scheme. ◆ The random-access navigation scheme is rarely used.
140
Chapter 5
WebDesignDW.glencoe.com
Hierarchical Navigation Scheme In a hierarchical navigation scheme, pages are arranged in levels from top to bottom. A site can contain multiple page levels depending on its content. Pages at lower levels typically contain specific information about the Web site’s topic. Figure 5.2 illustrates how the Web pages in a hierarchical site can be organized. ◆ At the top level is the Web site’s home page. The home page is often referred to as a top-level page because it is at the highest level in the structure. ◆ The home page contains links to the second-level pages below it. Pages that are all on the same level are often referred to as same-level pages. ◆ The second-level pages contain links to third-level pages. As shown in Figure 5.2, you can access any of the second-level pages from the home page. However, you can only access third-level pages from a second-level page.
Relationships in the Hierarchical Scheme A page that is connected to a page one level below has a parent-child relationship with that page. In this relationship, the page that is on the level above is the parent, and the page that is on the level below is the child. A parent may have many children, but in a hierarchical scheme, each child may have only one parent. Two or more child pages with the same parent have a peer-to-peer relationship, also called a “sibling” relationship. These relationships are shown in Figure 5.2. This page is the parent of the three pages below it.
SecondLevel Page A
Third-Level Page
These three pages are children of second-level page A.
Third-Level Page
The home page is the parent of the four pages below it.
Home Page
SecondLevel Page B
Third-Level Page
Figure 5.2 Web pages in a hierarchical scheme are arranged in levels. Which page is always at the top level in a hierarchical navigation scheme?
SecondLevel Page C
Third-Level Page
SecondLevel Page D
All pages at this level are children of the home page.
Third-Level Page
These pages have a peerto-peer relationship.
Planning a Web Site
141
Advantages of a Hierarchical Site The hierarchical navigation scheme has specific advantages. ◆ Visitors can get a site overview quickly by examining the home page (index.html). ◆ Visitors can then go directly to the pages that interest them and skip pages that do not interest them. ◆ The freedom to “click around” prevents visitors from becoming overwhelmed by information they do not want. ◆ Visitors can keep track of where they are on the site.
Linear Navigation Scheme In a linear navigation scheme, every page exists at the same level. Each Web page in this scheme is accessed from the previous page and then is linked to the next page. A visitor navigates a linear site by moving through a line of pages, one after another—the same way you read a book.
Figure 5.3 The linear navigational scheme directs visitors to view the site page by page. What page do visitors view first when they use a linear site?
Advantages of a Linear Site As with hierarchical schemes, sites that use a linear scheme usually have a single home page that the visitor must access first (see Figure 5.3). However, unlike the hierarchical scheme, the visitor must then access each page in a specific order. A linear scheme is useful in sites that step visitors through a process, such as making cinnamon rolls. To make the rolls, visitors must start with the first step and continue on until the last step is reached.
Home Page
Combination Schemes Many Web sites use both hierarchical and linear navigation schemes. For example, a Web site containing photographs from a vacation might let the visitor go directly to a specific photo (hierarchical), or it may let the visitor see the photos in the order in which they were taken (linear).
Random-Access Navigation Scheme In a random-access navigation scheme, the pages are not organized in any particular order, but are linked randomly to each other. This scheme makes it difficult for visitors to locate what they need quickly, or at all. The random-access scheme can be used for an experimental site that is intended to give users access to random sites. However, this type of navigation scheme is almost never used by professional Web designers. List What are the three different types of navigation schemes? 142
Chapter 5
Viewing a Web Site’s Navigation Scheme How do you view a navigation scheme in Dreamweaver?
The Music Department’s Web site uses a hierarchical structure. In the following activity, you will use Dreamweaver’s Map view to examine the site’s navigation structure.
ACTIVITY 5B View a Web Site in Map View 1 Start Dreamweaver. Open your Music Department Web site (if necessary, open and define the site located in the DataFiles\Examples\MusicDept folder). 2 In the Files panel, right-click the index.html file. In the options menu that opens, select Set as Home Page. Click the view drop-down arrow and select Map view (see Figure 5.4).
Figure 5.4 Select Map view to display the site’s map in the Files panel. Map view Expand/Collapse
3 In the Files panel, click the Expand/Collapse button to display the site map at full size in the Document window (see Figure 5.5).
Figure 5.5 Click the Expand/Collapse button to view the site’s navigation scheme in the Document window.
Planning a Web Site
143
4 Locate the performances.html page in the site map. You will either see a plus (+) or a minus (−) sign to the left of the file icon. Clicking the plus sign will display pages linked to the selected page (see Figure 5.6). Practice opening and closing the page list of each file.
Figure 5.6 Click the plus sign to see which pages are linked to the selected page.
Pages linked to performances page
5 In the toolbar, click the Site Map button. Click Map and Files to display the Web site’s file structure in the Files panel. Your screen should look like Figure 5.7.
Figure 5.7 Select Map and Files to view both the site map and the site’s file structure.
Site Map button
You Should Know Text that is displayed in red in the Site Map indicates a broken link (a link that does not work).
6 Press F8 to view only the site’s file structure. Press Alt + F8 to display the site map and the file structure again. 7 On the toolbar, click the Expand/Collapse button to collapse the expanded Map view.
144
Chapter 5
8 In the Files panel, click the view drop-down arrow and select Local view. Your screen should look similar to Figure 5.8. Close the Web site and exit Dreamweaver.
Figure 5.8 The Music Department home page in Local view.
Describe What kind of navigation scheme does the Music Department Web site use?
Section 5.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• A navigation scheme specifies the organization of a site and how its pages relate to one another.
3. Draw Conclusions Can a Web page be both a parent page and a child page? Explain your answer.
• Examples of navigation schemes include hierarchical, linear, and random-access. • A Web site’s home page is a top-level page in a hierarchical site.
2. List two factors to consider when choosing a navigation scheme.
4. Compare and Contrast Explain the similarities and differences between a hierarchical and a linear navigation scheme.
Apply It! Create a Hierarchical Chart Assume you have seen seven movies in the past month. Four were action-adventures and three were comedies. Create a chart that places the movies you have seen into a hierarchical structure. Include the titles of all seven movies in your chart.
Planning a Web Site
145
SECTION 5.3 STORYBOARDING YOUR SITE Focus on Reading Read to Find Out This section illustrates how to plan a site’s navigational structure. As you read, pay attention to the difference between a page title and a file name.
Main Ideas
Key Terms
Reading Strategy
When you storyboard your site, you draw a chart illustrating the site’s navigation structure and create sketches of what content the main pages will include. These graphics provide a basic overview of the site you will create.
storyboard page title file name
Identify the two processes involved in storyboarding. Under each process, list one fact about the process. Use a diagram like the one below (also available online). Storyboarding
Storyboarding How can storyboarding help you to avoid mistakes when creating a site?
Activity 5.2 Storyboarding a Web Site Learn more about various storyboarding methods by visiting WebDesignDW.glencoe.com.
Many Web design professionals use storyboarding when they design a Web site. A storyboard is a visual representation of the Web site. Storyboarding involves illustrating your organizational ideas by roughly sketching the relationships among elements on each page, as well as the relationships among the Web site’s pages. Storyboarding has a number of advantages. ◆ It helps you visualize the basic structure of the Web site. ◆ It graphically illustrates the links between individual Web pages. ◆ It provides an overall look at the contents of each Web page. ◆ It helps you to see whether your ideas will work well before you begin creating the actual pages. Not everyone approaches storyboarding in the same way. Some use formal drawing tools to create their storyboards. Others use presentation software to create a working model of the site. Many Web designers, however, find it most helpful to sketch their concepts with paper and pencil. Two tasks need to be accomplished during the storyboarding process. One is to identify the navigation structure of the site using one of the navigational schemes discussed in Section 5.2. The other is to create a brief summary of each page’s contents. List What are three different ways to approach storyboarding?
146
Chapter 5
WebDesignDW.glencoe.com
Table 5.3
Language Club Web Site Pages Page Title
Brief Description
The Language Club
Welcomes the visitor and serves as a jumping-off point to other pages.
About Us
Describes the purpose of the club.
Events
Lists events sponsored by the club such as fundraisers, meetings, and cultural events. Includes a maximum of five events, with a separate subpage for each event.
Contact Us
Includes membership information and contact information for club officers.
Using tables and charts is a good way to gather the information needed to plan a Web site. Which pages will likely be parent pages?
Drawing a Site’s Navigation Structure Why is it helpful to chart a Web site’s structure?
To develop the navigation structure of the Language Club Web site, start with a list of its major pages (see Table 5.3). At this point in the process, you are merely trying to get a basic idea of the pages the Web site will contain. As you continue, you may find it necessary to add additional pages, or combine two pages into one.
Charting the Language Club Web Site The Language Club Web site will have a hierarchical structure. In the following activity, you will chart this hierarchical structure and assign pages to levels.
ACTIVITY 5C Chart Navigation Structure 1 Open a blank word processing document, or take out a piece of paper At the top of the page, write or key Language Club Site Navigation Structure. This is the title of your chart. 2 Using the information provided in Table 5.3, create a chart that shows the navigation structure of the proposed Language Club site. It should use a hierarchical structure with the home page at the top. Figure 5.9 shows part of this chart. Be sure to include each page’s title in the corresponding box and to draw lines showing the relationships among the pages.
Language ClubHome
3 Add five lower level pages (subpages) under the Events page. Write appropriate page titles for these subpages (see page 148 for naming guidelines). 4 Proofread your chart. Name your document Language Chart and save it according to your teacher’s instructions.
Figure 5.9
Language ClubAbout Us
A hierarchical structure makes it easy for visitors to locate information available at the site.
Planning a Web Site
147
Page Titles versus File Names You have now determined the major pages for the Language Club site. At this point, it is a good idea to think of appropriate names for your files. In your navigation chart, you specified the title of each page. However, the file in which each page is stored must also be specified.
Choosing a Page Title A page title is not the same thing as a file name. A Web page’s page title (sometimes called a page name) appears in the title bar when the page is displayed in a browser. Follow these guidelines when choosing a page title. Jargon A Web page’s title appears in the Web browser when users view the page. A Web page’s file name, on the other hand, is the name of the HTML document that makes up the Web page.
◆ Choose logical names that visitors will understand. A title such as Change Password suggests that users should go to this page to change their password. ◆ Page titles should be short and descriptive. ◆ Page titles should be consistent with your naming scheme. On a Web site about Shakespeare’s plays, where one page is titled Hamlet, another page should be titled Macbeth (not Tragedy2 or ScottishPlay).
Choosing a File Name A file name is the name of the HTML document that makes up the Web page itself. Follow these guidelines when choosing a file name. ◆ Select names that make sense and are consistent and easy to remember. For example, imagine that you are creating a library’s site that will eventually contain thousands of pages. It would be difficult to find the file that corresponds to the book Emma if that book’s Web file were named x52h61aw.html. A file named emma.html would make it much easier to locate that book’s file. ◆ Use Save As instead of Save when you first save your Web page, and enter a good file name into the File name box. ◆ Each file name must have either the standard .html extension or the less common .htm extension so Web browsers will recognize that the file as an HTML page. ◆ Keep file names short and omit blanks. Use the underscore character (_) as a substitute for a blank space. ◆ Use lowercase letters instead of uppercase letters. Page titles and file names are often not the same. For example, in the Language Club Web site, the home page will have the page title Language Club-Home and the file name index.html. Table 5.4 contains a list of the file names for the individual pages in this Web site.
Table 5.4 Specify the file names for your Web pages so that you can keep track of file names used in the site. How is a page title different from a file name? 148
Chapter 5
Language Club Page Titles and File Names Page Title File Name Language Club-Home index.html Language Club-About Us about_us.html Language Club-Events events.html Language Club-Contact Us contact_us.html
ACTIVITY 5D Specify File Names 1 Open or take out the Language Club navigation chart that you created in You Try It activity 5C. Using the information in Table 5.4 on page 148, write the file name for each page under that page’s title, as shown in Figure 5.10. If the page is not included in Table 5.4, create your own file name (be sure to follow the guidelines for naming files!).
Figure 5.10
Language ClubHome
You can keep track of file names by recording them in your navigation chart.
(index.html)
Language ClubAbout Us (about_us.html) 2 Proofread the file names, verifying that each name is used only once and that there are no spaces in the file names. 3 If you are using a word processing application, with your teacher’s permission, print a copy of the chart. Save the revised version of your document.
Describe What is a file name?
Creating Sketches of Individual Pages Why should I sketch my Web pages before creating a site?
After you chart the overall scheme for your site, you should create a basic sketch of each Web page. This sketch identifies the text and graphics you plan to use on a page, and roughly shows where you plan to place these elements. Sketches serve several purposes. ◆ They help make certain that all the goals of the Web site are met. ◆ They provide guidelines for developing Web page content. ◆ They are useful when you create the page template. At this point, you need not worry about the exact text or graphics that will appear on each page—just focus on the page’s overall purpose. In You Try It activity 5E, you will create a sketch for the About Us page in the Language Club Web site.
Shortcut To view individual page titles in Dreamweaver’s Map view, press Ctrl + Shift + T. Press this combination of keys again to display the page’s file name.
Planning a Web Site
149
ACTIVITY 5E Sketch a Web Page 1 Create a sketch for the About Us page. Identify the content you want to include. For this page, you want to state the purpose of the club, and a list of the individuals who run the club. 2 Sketch the content for this page. Estimate where you would place the elements you want to include. Also estimate the space needed for the different elements. 3 Review your work to make sure the sketch contains the needed elements. Your sketch should look similar to Figure 5.11. If you are using application software to create sketches, save the document as Language Sketches.
Figure 5.11 A sketch like this shows how elements will appear on the page.
About Us Text Text Office
Name
President
Xxx Xxxxxx
Statement of club’s purpose
4 Create a second sketch for the same Web page. Keep the same content, but create a different arrangement for your items. Save your document as before. 5 Compare your sketches with those of other students. Explain why you decided to place items where you did. Evaluate which sketches you prefer and explain why.
List What items should you include on a Web page sketch?
Web Site Planning Checklist How can a checklist help me plan a Web site?
You have a lot to think about before you start creating your Web pages. That is why you should always use a checklist to help you keep track of your planning tasks. Determining a Web site’s purpose and audience is always the first step to creating a successful site, as shown in Figure 5.12 on page 151. 150
Chapter 5
Figure 5.12
Web Site Planning Checklist STEP COMPLETED
✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑
A planning checklist helps you manage the details of creating Web sites. Why do you think planning should be completed before the storyboarding begins?
STEP The site’s purpose is clearly stated. Both immediate and long-term goals are specified. The audience for the site is specified. A clear and specific mission statement is written. An appropriate navigation scheme is chosen. An appropriate page title and file name are chosen for each page. A chart is created showing the navigation scheme, including each page’s title and file name. The major content and graphics are chosen for each page. Sketches of each page are drawn. Sketches focus on each page’s overall purpose.
We have completed the steps for planning the Language Club Web site. The planning process will help you determine goals that you can work toward. Planning also helps you identify any potential problems before you actually begin to build your site. It is much easier to correct problems at this stage than later on, when you may have to alter an existing Web page or change the structure of a Web site. Describe Why is it important to follow all the planning steps when creating a Web site?
Section 5.3 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Storyboarding involves drawing a site’s navigation structure and creating sketches of the major pages.
1. Define storyboard, page title, file name.
4. Analyze What might be an advantage of using a linear navigation scheme for a Web site? What might be an advantage of using a hierarchical scheme?
• A sketch of a Web page outlines the major content and graphics that will be included on that page. • A page title is not the same as a file name. • A checklist can help you determine whether you have completed every step in the planning process.
2. Discuss three advantages of storyboarding a Web site. 3. List the items that should be included in a Web page sketch. Explain the importance of each item.
5. Draw Conclusions What problems could be avoided by completing a Web site planning checklist before creating a site?
Apply It! Create a File Name List Create a table that lists appropriate file names for the following pages that are part of the Music Department Web site: Home, Band, Choir, Performances, and Contact Us.
Planning a Web Site
151
Developing Web Content
T
he World Wide Web would be meaningless without the words, pictures, video, and other content you find on a Web site. After all, people do not go online simply to use a browser. They go online to find information, to be entertained, or to do business.
Writers and Editors Most Web sites use text in some manner. Often, professional writers and editors create the online text. Web-based writers need to be able to write content that is easy to read on a monitor and appropriate for a site’s target audience. They often work with subject matter experts, instructional designers, and programmers. This teamwork allows writers to see how their content fits into the overall design of the Web site.
Graphic Designers Web sites are often designed by teams of people, many Graphic designers give Web sites their of whom focus on the site’s content rather than on its appeal by creating icons, backgrounds, technical elements. illustrations, and other graphic elements. Graphic artists may work with photographs or use sophisticated programs to create original art. These designers use a wide range of tools, such as Adobe® Photoshop®, CorelDRAW®, and many others.
Instructional Designers Instructional designers create effective computer-based teaching materials for computerbased training (CBT) and distance-learning programs. These professionals may be teachers, trainers, or curriculum specialists. They create the curriculum and teaching strategies for an online or CBT course. This can include developing the content and creating teaching tools, such as tests, presentations, and record-keeping tools.
1. Create a Résumé Search a Web site for job openings related to providing content. Create a résumé you would use to apply for one of those positions. In your résumé, note the education, training, and experience that you would need for this job. 152
Chapter 5
2. Compare Content Write a brief essay that compares and contrasts the content requirements of different types of Web sites. In your essay, include examples from at least four different sites.
SECTION 5.3 Storyboarding Your Site Key Terms storyboard, 146 page title, 148
file name, 148
Main Ideas
Main Ideas
■ Before building a Web site, you must spend some
■ Storyboarding involves drawing a site’s navigation
time planning it. ■ It is important to determine the purpose of your Web site before building it. ■ You must identify the characteristics of your site’s audience, such as how much the audience already knows about the site’s topic and what the audience wants to learn from the site. ■ A mission statement describes the purpose and audience of the Web site.
■ ■ ■ ■
■
SECTION 5.2 Navigation Schemes
structure and creating sketches of the major pages. A storyboard graphically illustrates the links between individual Web pages. A sketch of a Web page outlines the major content and graphics that will be included on that page. A page title is not the same as a file name. A page title appears in the title bar when the page is displayed in a browser. A file name is the name of the HTML document that makes up the Web page. A Web site planning checklist can help you determine whether you have completed every step in the planning process.
■ A navigation scheme specifies the organization of a ■ ■ ■ ■
site and how its pages relate to one another. Examples of navigation schemes include hierarchical, linear, and random-access. A Web site’s home page is a top-level page in a hierarchical site. A page that is connected to a page one level below it has a parent-child relationship with that page. Children of the same parent have a peer-to-peer relationship.
ThirdLevel Page
ThirdLevel Page
ThirdLevel Page
Planning a Web Site
ThirdLevel Page
153
CHAPTER 5
Review and Assessment
AFTER YOU READ Review the Purpose Go back to the Reading for a Purpose sentences you completed before you read each section. Did you succeed in your stated purpose? Use your Key Term Journal, class notes, and your memory to write down a brief explanation for each purpose sentence. This exercise will help you determine what you need to review.
Reviewing Key Terms 1. What is a mission statement? 2. Define target audience. 3. Which of the following is NOT a type of navigation scheme: hierarchical, oval, linear, random-access. 4. What is a top-level page? 5. Rewrite this statement to make it true: Each child page can only have a single parent whereas a parent page can only have up to three child pages. 6. In Web design, what is the formal name of a sibling relationship where two or more child pages have the same parent page? 7. What are the two main items that are created when storyboarding a site?
Understanding Main Ideas 8. Summarize the differences and similarities between the immediate and the long-term goals of a Web site you might develop. 9. Discuss why it is important to be familiar with what your audience already knows about a particular topic when you are developing a mission statement. 10. Describe how a linear navigation scheme is different from and similar to a hierarchical navigational scheme. 11. Discuss the purpose of creating sketches of Web pages. 12. Summarize the advantages of using a Web site planning checklist. 154
Chapter 5
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
13. Explain the difference between a page title and a file name. Page Title
File Name
14. Evaluate why most Web designers use a hierarchical navigation scheme when creating Web sites. Advantages of a Hierarchical Scheme
Critical Thinking 15. Evaluate Navigation Schemes The Department of Education has created a Web site using a hierarchical scheme. The director wants to include a slideshow to be viewed in sequence within the Events section of the Web site. What type of navigation scheme would you use for this slideshow? Explain your answer. 16. Draw Conclusions In the Language Club Web site, what would happen if the Events page were removed, and all of the pages under it linked directly to the home page? How would this affect how visitors accessed these pages? Do you think this would be a good change? Explain your answer. 17. Analyze Navigational Schemes Why is a drawing of a hierarchical navigation scheme sometimes called a tree diagram? How can the image of a tree help you understand how a hierarchical site’s pages are related?
CHAPTER 5
Review and Assessment
18. Analyze Target Audiences Some Web sites try to appeal to a broad range of visitors. For example, the NASA site’s audience could include people who know a lot about the space program and those who do not. How might a Web site address the needs of a broad audience? Use a Web diagram like the one below to organize your answers and specific suggestions. Use Table 5.1 on page 137 to identify ways to reach a target audience.
Target Audience
Reading & Writing Read the paragraph below and then answer the question.
The two most popular Web site navigation schemes are the hierarchical and linear schemes. In a hierarchical scheme, pages are arranged in levels from top to bottom. The home page is at the top and contains links to the secondlevel pages below it. The second-level pages contain links to third-level pages, and so on. In a linear scheme, every page is at the same level. The home page is first and then each page must be accessed in a specific order, one after another. According to the paragraph, which of the following statements is true?
19. Create Navigation Schemes In the Language Club Web site, explain how you might make the About Us page a parent page. Use a drawing like the one below to illustrate your response.
Home
In a linear scheme, pages are linked randomly to each other. In a linear scheme, all pages on the site can be accessed directly from the home page. In a hierarchical scheme, you can access any secondlevel page from the home page. In a hierarchical scheme, all pages on the site can be accessed directly from the home page.
About Us
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items.
WebDesignDW.glencoe.com
On your own paper, copy and complete the chart shown below.
Go to the book’s Web site shown above. Select e-Review>PowerTeach Outlines>Chapter 5 to review the main points in this chapter.
20.
Study with PowerTeach
Result
Online Self Check
21.
+
22.
+
WebDesignDW.glencoe.com
+
Result
Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 5.
Result
Planning a Web Site
155
CHAPTER 5
Activities
1. MAKING CONNECTIONS Social Studies—Create a Time Line From the printing press in the fifteenth century to today’s cell phones and handheld devices, innovations in technology have revolutionized how we communicate. 1. Use the Internet or other resources to research the history of different forms of communication such as the printing press, radio, and television.
3. Place your five dates into a time line. In your time line, include dates for when the printing press and the Internet were invented. 4. Finally, create a storyboard that places the dates from your time line into a linear navigational scheme like the one shown below.
2. Identify five important dates in the history of communications.
Home Page
Date #2
Date #3
Date #4
Date #5
2. STANDARDS AT WORK Students use technology to locate, evaluate, and collect information from a variety of sources. (NETS-S 5)
Analyze Web Sites Locate two Web sites in one of the following categories: corporate presence, portal, informational, or educational. Try to find two Web sites that are very different from each other. For each site, answer the following questions: 1. What is the purpose of the Web site? 2. What is the goal of the Web site? 3. Who is the Web site’s target audience? 4. What is the target audience seeking from the site? 5. Is the content of the site easy to scan? 6. What type of navigation scheme does the site use?
Use your answers to develop a chart that compares and contrasts the two Web sites. If possible, use either a word processing application or a spreadsheet to create your chart. Your chart should look similar to the matrix shown above. 156
Chapter 5
WEB SITE #2
CHAPTER 5
Activities
3. TEAMWORK SKILLS Create a Storyboard You have been asked to create a Web site for Services for Seniors, a local group serving senior citizens in your community. This group provides seniors with information about health care, adult education programs, and other services. 1. Work as a team to research similar sites. Conduct interviews with the site’s potential audience (your grandparents, other family members, friends, etc.). 2. Based on your research, prepare a mission statement and site goals. 3. Brainstorm a list of pages to include in the site such as housing, medical information, legal issues, and education. 4. Create an index card for each page showing the page titles and file names. Organize the index cards on a piece of paper and draw lines to indicate the navigation scheme that you will use. This will serve as your storyboard for the site. 5. Explain to the class the reasoning behind your navigation scheme.
4. CHALLENGE YOURSELF Plan a Web Site Assume you have been hired to create a Web site for your local aquarium. The aquarium is a major attraction in your town, and it wants a site that will highlight its many activities and exhibitions. Based on planning you have done with the client, you determine that: ◆ the site will have 20 pages arranged in four levels. ◆ it will use a hierarchical navigation scheme. ◆ the following topics need to be covered: general information, types of exhibitions, special attractions, and gift shop merchandise. Create a storyboard for the aquarium Web site that fits the noted requirements. The first and second level are supplied in the graphic organizer below. Brainstorm the remaining third-level pages that need to be included in the site. Determine how you want visitors to navigate the site. When you have completed your storyboard, create a sketch for the Web site’s home page. Home Page
General Information
Types of Exhibitions
Special Attractions
Gift Shop Merchandise
Planning a Web Site
157
Projects
CHAPTER 5
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Create a Mission Statement Create a mission statement for a group or club to which you belong. At the top of a page, write or key the name of the group, organization, or club you will be using for this exercise. Add the words Mission Statement after the group’s name. Answer the questions shown below to identify your target audience. IDENTIFYING YOUR TARGET AUDIENCE • Who is the audience? • What does the audience already know about this topic? • What does the audience want to learn from the site? • How will the audience access the site?
Use your answers and your knowledge of what belongs in a mission statement to write or key a mission statement for the group’s Web site. Proofread your mission statement. If you are using word processing software, use the spell check feature. Save your document for future use.
2. Plan a Web Site Create a storyboard for your chosen organization’s Web site. Brainstorm a list of pages to include in your site. Write down your ideas. Create a chart showing the site’s hierarchical structure. Include each page’s title and draw lines showing parent-child and peer-to-peer relationships. Under each page title, add the file name. Proofread your chart. Save your document for later use. Create a sketch of the home page and one other page planned for your site. Estimate where you would place the content you want to include. Review your work to make sure the sketches contain the necessary elements. Save your sketches for later use.
158
Chapter 5
CHAPTER 5
Projects
Read the projects described below. Then follow the directions to complete each project.
1. Create a Storyboard Imagine that a local band has hired you to create its Web site. The band wants its site to include a home page and pages that provide concert schedules, band member biographies and hobbies, and photographs and descriptions of the band’s national tour. One member of the band is an avid outdoor photographer and plans to post photographs of the locations in which the band has performed. She would like to include historical and geographical information about the locations as well. Create a storyboard for the band’s Web site. Your storyboard should include: ◆ A home page ◆ Pages for two locations in which the band has performed. The location pages should include photographs and location descriptions. Keep in mind that the number of photographs will grow over time, so you will want to design these pages as a photo gallery. Add a general set-up page for the photo gallery to introduce the feature, and then add a child page for each location, each of which should be connected to the introductory parent page. ◆ A band member hobbies page, with links to items that promote the band’s various interests.
2. Create Sketches Use the information from Web Design Project #1 and the information below to create sketches of the general photo gallery page and the first two locations pages. Parent Page: Introduction to Photo Gallery a. What is a photo gallery? b. How do I navigate through a photo gallery? c. Where will these photographs go? Child Page 1: San Francisco, California a. Location: California map b. Points of interest ◆ San Francisco Cable Cars, the only moving national historic landmark. ◆ The Golden Gate Bridge, a famous landmark Child Page 2: Grand Canyon a. Location: Park map of Grand Canyon b. Points of Interest: The South Rim
Planning a Web Site
159
CHAPTER
6
Developing Content and Layout
YOU WILL LEARN TO… Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines Determine content placement Evaluate page layouts Section 6.3 Create a custom page template Insert a logo Create a table Section 6.4 Create navigation buttons Add footer information Add text links Create an e-mail window
160
Chapter 6
photo TK
WHY IT MATTERS ................................................. People today are surrounded by information. We see billboards on our streets, listen to radios in our cars, and watch TV or access the World Wide Web at home. Various media are always competing to capture an audience’s attention. In this chapter, you will learn how to create content for a Web page that will catch—and hold—your viewers’ interest. Think about all the different ways you get information throughout the day. Write down everything you can think of and compare your results with the rest of the class. Which medium (magazine, Web site, etc.) best captures your attention, and which do you find easiest to ignore? Write a short paragraph identifying the features of the medium that best captures your attention and explain why.
CHAPTER
6
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 6.1 Determine Content .................... 6.2 Compare Web Designs .............. 6.3 Create a Table ............................ 6.4 Create a Footer ..........................
165 170 176 182
You Try It Skills Studio Create Web Content .......................... 188 Create a Template ............................. 188 Web Design Projects Develop Content for a Template ...... 189 Create a Personal Web Site .............. 189
IN THE WORKBOOK
You Try It Activities 6A Create Content for a Web Page ............................................ 6B View a Page at Various Resolutions ................................ 6C Create a Page Template ............ 6D Add a Logo .................................. 6E Create a Table ............................ 6F Add Navigation Buttons ............. 6G Add Footer Information ............. 6H Add Text Links ............................ 6I Add a Link to an E-mail Window .......................................
181
Chapter Assessment Making Connections ......................... Standards at Work ............................ Teamwork Skills ................................ Challenge Yourself ............................
186 186 187 187
165 169 172 174 175 178 179 180
Optional Activities and Projects Guided Reading Web Design Projects
ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Stay Engaged You are an active reader when you stay engaged in the material. One way to stay engaged is to turn each of the colored section heads into questions, then read the section to find the answers. When you can think of a good question and find complete answers, you will be engaged in learning.
WebDesignDW.glencoe.com
Developing Content and Layout
161
SECTION 6.1 CREATING WEB SITE CONTENT Focus on Reading Read to Find Out The main purpose of this section is to learn how to write material for Web pages. Read to find out how Web developers use the inverted pyramid to emphasize a site’s most important material.
Main Ideas
Key Terms
Reading Strategy
Many specific strategies can help you write interesting content for the Web. You must write your Web content clearly and concisely.
content inverted pyramid
Identify the steps you use to generate and organize ideas for the content of your Web pages. Use a flow diagram like the one below (also available online).
Brainstorm Ideas
➠
➠
➠
As you learned in Chapter 1, the Web design process can be divided into three categories. ◆ Interaction design ◆ Information design ◆ Presentation design In Chapter 5, you completed some interaction design by creating a navigation chart for the Language Club Web site. We will now look more closely at information design.
Writing for the Web Content When planning content, remember to keep your text as brief and informative as possible.
How do visitors read online text?
Information design involves determining a Web page’s content, or the text and graphics included on the page. A successful Web page uses words and images to capture the viewers’ attention and provide information. When creating content, you should think as much about what the page will look like as what it will say. ◆ Text should be short and easy to read. It must also stand out from the graphics, animation, navigation buttons, and other elements on the page. ◆ Graphics should be both visually appealing and informative. For example, you could include a photograph of an airplane on a Web page about travel. Including a map of a country discussed on the page, however, would provide visual interest and help viewers understand where that country is located.
162
Chapter 6
WebDesignDW.glencoe.com
Table 6.1
Guidelines for Online Text Element
Guideline
Formatting
Paragraphs
• Introduce only one idea per paragraph. • Limit paragraphs to about 75 words or fewer. • Keep sentences short and use simple sentence structures.
• Use bulleted lists to help summarize key points. • Use numbered lists only when presenting a series of steps.
Headings
• Use headings and subheadings to break up text. • Make sure headings and subheadings highlight key points so readers can locate information quickly.
• Format main headings larger than subheadings. • Use different colors and typefaces for headings and subheadings.
Including key words and headings helps users locate information quickly on a page. How do bulleted lists help readers process information on a Web page?
Online Text Users do not generally read through Web pages as they would a novel or other printed item. Instead, they scan a page, read some snippets of text that interest them, click a link to check out a photograph, and click again to move to another page or site. To capture the user’s attention, you need to include key words or phrases. If you bury your information, users will probably move on to another page or site. Table 6.1 summarizes guidelines for writing effective online text. Figure 6.1 shows a screen that follows the guidelines for writing online text. Notice how information is displayed in short sections, and headings help the reader identify the main topics.
Figure 6.1 Text should be broken into small pieces on a Web page. Why are the headings and subheadings different sizes?
Heading Subheading
Bulleted list
Developing Content and Layout
163
Organizing Web Text Many professional Web designers agree that Web text should be organized like an inverted pyramid. An inverted pyramid structure places the most important information at the beginning of a story, where it will best catch an online reader’s attention. Like a good newspaper story, good online content answers the questions Who? What? Where? When? Why? and How? as briefly as possible in order of importance. Key points, then, should appear at the beginning of the story. The remainder of the article fills in the details, with the least important information at the end, as shown in Figure 6.2.
Figure 6.2 An inverted pyramid structure places the most important information first. Why should important information appear first on a Web page?
Using the Mission Statement Most Important Information
Next Most Important Information
As you develop content, remember to refer back to your mission statement so you do not forget your site’s purpose and audience. Use both the mission statement and your storyboarding items to keep yourself “on target.”
Revising Your Text Less Important Information Least Important Information
You have not completed the writing process until you have revised your text. On Web pages, conciseness—saying exactly what you mean in as few words as possible—is key. Take time to review your text to include strong verbs and nouns, eliminate the passive voice and wordiness, and check your spelling and grammar. Identify What are the guidelines for writing effective online text?
Developing Content for a Web Page What is the purpose of brainstorming?
Now that you have learned some guidelines for writing online text, you are ready to look at some practical ideas to get you started writing. Activity 6.1 Evaluate Writing Styles Learn more about writing for the Web at WebDesignDW.glencoe.com.
164
Chapter 6
Generating and Organizing Ideas Brainstorming is a technique that can help you generate ideas. Write down every topic you want to include in your Web page, then write a keyword next to each one. Each keyword should be a word or phrase that identifies the topic’s core content. For example, if you were developing a Web page about Germany, you could use keywords like primary language, geographic location, attractions, and foods. After you create your list, review your keywords and determine which ones you want to use in headings. Identifying your headings will help you group your information on the page. WebDesignDW.glencoe.com
Developing a Web Page In the next activity, you will develop content for a Foods of the World fundraiser page on the Language Club Web site. When writing, be sure to follow the guidelines for creating online content.
ACTIVITY 6A Create Content for a Web Page 1 Start a word processing application or take out a sheet of paper. Place the title Foods of the World Fundraiser at the top of your page. The purpose of the event is to raise money for the Language Club’s annual trip. The audience for your Web page is parents and faculty. Write a brief paragraph (no more than 200 words) with more details about the purpose and audience of the Foods of the World Fundraiser page. 2 Brainstorm ideas for your content. Make a list of the text and graphics you want to include on your page. 3 Write keywords next to your list of ideas. Determine which keywords to use in headings. 4 Use the inverted pyramid structure to organize your ideas. Place the topic you want to emphasize at the top of your page. Then list the rest of your topics in order of decreasing importance. The least important topic should be at the bottom of your page. 5 In a word processing application or on a sheet of paper, create the content of the Fundraiser page. Refer back to your notes as you write. 6 Proofread and spell check the document. Correct the errors. 7 If using a word processing application, save your work as fundraiser.doc. You will use this document in a later activity.
Explain Why is it important to identify keywords when creating a Web page?
Section 6.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Users typically scan text for keywords.
1. Define content, inverted pyramid.
4. Draw Conclusions Why might a reader not want to read a Web page that contains too much content?
• Group online text into short chunks with concise heads. • Use bulleted lists to make text easy to read. • Use an inverted pyramid to organize Web text.
2. Summarize how reading a Web page is different from reading a printed page. 3. Identify the initial factors you need to consider when planning a Web page’s content.
5. Analyze What factors determine which keywords you will use as headings in a Web site?
Apply It! Determine Content Write a mission statement for a Web site about classes at your school. Determine the content you would include on one page of this site.
Developing Content and Layout
165
Using the Web for Learning
P
eople have been studying at home for decades by using mail, educational television, audiotapes, and videotapes. The term “distance learning,” however, has only recently become commonplace, thanks to the growth of the Internet.
Uses for Distance Learning Reputable online educational institutions offer single courses, college degrees, and technical certifications to people who cannot easily attend classes. This online option is especially helpful for people who live in rural areas or are homebound due to health or transportation problems. Many companies use computer-based training (CBT) and Web-based training (WBT) to teach employees. This option allows busy professionals to study at their own pace.
Many companies use distance learning to train their employees.
Distance-Learning Technologies There are several common technologies used for distance learning. ◆
The Internet allows students to register for a class, to view prerecorded or live lectures, interact with teachers and students, complete assignments, and take tests.
◆
Videoconferences use microphones, video cameras, and software, so that students and teachers can see and hear each other in real-time.
◆
E-mail is one way students can receive and deliver homework assignments.
◆
Web-based chat rooms allow students and teachers to engage in real-time instant message sharing.
◆
Disks like compact disks (CD-ROMs) or digital video disks (DVDs) can offer customized study for each student, feedback on student performance, and online tests.
1. Research Technology Research how people 2. Compare and Contrast Use the Internet to find around the world benefit from distance-learning two schools that offer classes through distance technologies. What cultures and circumstances do learning. Compare the courses, costs, and types of they live in? Prepare a report about your findings. technologies used by each school.
166
Chapter 6
SECTION 6.2 PLACING ITEMS ON A PAGE Focus on Reading Read to Find Out This section presents basic Web design guidelines that you should follow so that your Web pages are eye-catching and easy to understand. Read to find out how to design Web pages that will be clear and attractive for all of a site’s users.
Main Ideas
Key Terms
Reading Strategy
The best Web pages have clear, attractive layouts, which you can achieve by understanding simple Web design guidelines.
white space proximity pixel safe area screen resolution
Identify and summarize three guidelines for Web page layout. Use a table like the one below (also available online). Layout/Design Guidelines
How It Helps
Visitors find it easier to use Web sites that contain short segments of text. Similarly, visitors are attracted to pages that look uncluttered and are consistent from one page to the next.
Page Layout Guidelines What are the advantages of eliminating clutter on a Web page?
Some common design principles can guide you in laying out Web pages. Following these principles will help you create a site that is userfriendly.
Eliminate Clutter Do not place too much content on a page. Too much content can confuse a visitor and cause him or her to surf to a different site.
Activity 6.2 Evaluate Page Layouts Learn more about layout guidelines at WebDesignDW.glencoe.com.
◆ Remove Unnecessary Content Only include information that you really need. If you still have too much information, expand your page into a Web site. Divide information into logical sections and place each section on a separate subpage linked to your home page. ◆ Update Information Instead of including everything at once, update and modify information on a regular basis. ◆ Choose Function over Form Keep only elements that you need and discard elements that just add visual interest. ◆ Avoid Overkill Avoid using too many different elements such as links, colors, or scrolling text. Avoid blinking text and unnecessary animation.
WebDesignDW.glencoe.com
Developing Content and Layout
167
Use White Space
Figure 6.3 This page’s layout makes information easy to find. Why should the title be the largest item on the page?
White space is an area without content—an area where the eye can take a break as it scans the page. Use white space to create visual breaks between and around images and body text. Using white space in this manner helps frame and draw attention to your content.
Emphasize Content Size elements on your page in proportion to their importance.
Title is largest item on page
◆ A bigger design indicates more important information. ◆ A smaller design indicates that an item is less important.
Popular links are easily accessible
Top links mean users do not have to scroll
Most users look first at the largest or boldest element on the page, so make your important content larger than your less important content. Format main headings larger than subheadings or place them in a unique color or typeface.
Group Related Items The proximity (closeness) of elements on a page can cause readers to make assumptions about how elements relate to each other. If items are grouped closely together, people will assume that these items are related. Try not to create false impressions by placing items that are not related close to each other.
Align Text Consistently When laying out your page, line up items with each other. Text can be aligned to the left, to the right, or in the center. Try not to mix alignments on a page. Having to switch from right-aligned to left-aligned text can confuse your reader. Since English speakers read from left to right, paragraphs of text should be left-aligned, which is the default alignment in HTML.
Keep Download Time Short Content When designing your Web site, make sure you consider download time. If a page takes too long to download, the user might move on to another site.
168
Chapter 6
Every text or graphic item that you add to a page increases that page’s download time. This makes it even more important to avoid cramming too much content into a single page. You only have a few seconds to catch a viewer’s attention, so make sure your page downloads as quickly as possible. Figure 6.3 shows how a well-designed page follows the guidelines discussed in this section. Explain How can you emphasize important content?
Web Page Dimensions How can monitors affect how people view my Web pages?
When creating Web pages, you want to make sure that people see your important content first. To do this, you need to know how your audience’s monitors will affect how your site is viewed. A monitor’s viewing area is measured in pixels. A pixel (short for picture element) is a single point in a graphic image.
Page Dimension Guidelines Computer monitors typically have a screen area of 800 pixels wide by 600 pixels high (referred to as 800 x 600) or higher. This area is called the safe area because it displays on every Web browser/system combination. Place your most important and eye-catching information in this area because it is the space that viewers will see first.
Screen Resolution Users can also make content appear smaller or larger by changing their screen resolution, which is the amount of pixels that a monitor can display. Lower resolutions make the screen’s content appear larger, so less content is visible onscreen. Higher resolutions make the screen’s content appear smaller, so more content appears onscreen.
ACTIVITY 6B View a Page at Various Resolutions 1 Start Dreamweaver. Open your Music Department home page (index.html) in Design view (if necessary, browse to the DataFiles\ Examples\MusicDept folder in the student data files to access this site). 2 Click the Restore Down button on the document’s window. In the document’s status bar, click the Window Size drop-down arrow (see Figure 6.4). Select 760 x 420 (800 x 600, Maximized). 3 Select View>Visual Aids>Hide All to hide table borders and other Dreamweaver elements. Your screen should look similar to Figure 6.4.
Figure 6.4 The Music Department home page as it would appear on a monitor with a screen resolution of 800 x 600.
Window Size drop-down arrow
Troubleshooting If you have trouble with Step 2, be sure that you have clicked the Restore Down button rather than the Minimize button.
Developing Content and Layout
169
4 Click the Window Size drop-down arrow. Select the highest screen resolution available. For this activity, we selected 955 x 600 (1024 x 768, Maximized), as shown in Figure 6.5. If necessary, press F4 to hide the Files panel and Properties inspector.
Figure 6.5 The home page at a screen resolution of 955 x 600 (1024 x 768, Maximized).
Maximize button Design You should always preview your pages in the lowest and highest resolutions available on your computer system to see how your page looks at each extreme.
5 Select View>Visual Aids>Hide All. Click the Maximize button in the window. Press F4. Close the site when finished.
Define What does safe area mean?
Section 6.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Do not place too much content on a Web page.
1. Define white space, proximity, pixel, safe area, screen resolution.
4. Analyze Why might some viewers use a resolution of 800 x 600, while others use 1024 x 768?
• Place important content in a screen’s safe area. • View your Web pages in various browsers and at various screen resolutions. • Onscreen content appears larger at lower resolutions and smaller at higher resolutions.
170
Chapter 6
2. Identify where important content should be placed on a Web page. 3. Explain why it is important to include white space on a page.
5. Cause and Effect Why might too much clutter cause a visitor to leave the Web site quickly?
Apply It! Compare Web Designs Find two Web sites. Compare the two layouts and determine which one you believe is more effective. Explain your reasoning.
SECTION 6.3 CREATING A PAGE TEMPLATE Focus on Reading Read to Find Out The main purpose of this section is to explain how to create a custom template. Read to find out how to create custom templates when premade templates do not meet your needs.
Main Ideas
Key Terms
Reading Strategy
Creating a custom template provides consistency among the pages on a site and simplifies producing individual pages. The template can contain the elements that will appear on every page.
template logo title graphic table column row cell
Describe the following parts of a table: column, row, cell, header row, and header column. Use a table similar to the one below (also available online). Part
Description
A template is a reusable pattern that you can use to lay out elements on a Web page. Templates make it easy to create a new Web page or site.
Designing a Template What common elements are found in most templates?
Most Web pages contain the elements shown in Figure 6.6. Some Web development applications provide premade templates with placeholders for these basic elements. Dreamweaver provides premade page designs (accessible from the Start page) but these are not templates. A template is a predesigned pattern for a Web page. Page designs are designs for part of a Web page, that you put together to create a custom template. Using a custom template helps you meet the specific needs of your site.
Logo
Graphic
The Language Club
Figure 6.6 Each page in the Language Club site will follow a similar format. What is a template?
Title graphic
Home Navigation links
About Us Events
Body
Contact Us
E-mail Webmaster Copyright info
WebDesignDW.glencoe.com
Footer
Developing Content and Layout
171
In the following activity, you will begin creating the Language Club site’s basic template. You will also insert the site’s background graphic. This graphic will give the pages a standard appearance throughout the Web site.
ACTIVITY 6C Create a Page Template 1 Start Dreamweaver. On the Start page, in the Create New column, select Dreamweaver Site. In the Site Definition dialog box, name your site Language Club. Click the Next button. Select No, I do not want to use a server technology. Click Next. 2 Under How do you want to work with your files during development?, choose Edit local copies on my machine, then upload to server when ready (recommended). When you see Where on your computer do you want to store your files?, ask your teacher for the location. Either browse to the location on the hard drive by clicking on the folder icon or key the path directly. Click the Next button. 3 Click the How do you connect to your remote server? drop-down arrow and select None. Click Next. A summary of your settings will appear. Click Done. The site has been defined. On the Start page, under Create New, select HTML. (If necessary, select Design view.) 4 Right-click in the Document window and select Page Properties. 5 In the Page Properties dialog box, under Category, make sure Appearance is selected. Change the Page font as shown in Figure 6.7. Key the hexadecimal values for Text color and Background color into the boxes as shown. Change Left margin and Top margin to 0.
Figure 6.7 In the Appearance section of the Page Properties dialog box, you can modify font, color, and margin settings.
6 Next to Background image, click the Browse button. In the Select Image Source dialog box, click the Look in: drop-down arrow and browse to the DataFiles\Ch06\Images folder. Double-click the background_stripes.gif file. 7 If you see a dialog box with To make a document-relative path, your document should be saved first, click OK. In the second dialog box, click Yes to have Dreamweaver copy the image file to the site folder. 172
Chapter 6
8 In the Copy File As dialog box, click the Create New Folder icon. Name the new folder images. Double-click the images folder and then click the Save button to save the image file in this folder. Under Category, click Title/Encoding. In the Title box, key: Language Main. Click OK to close the Page Properties dialog box. 9 Choose File>Save as Template. In the dialog box, key: Language_Main in the Save as box (see Figure 6.8).
Figure 6.8 The name of your template will be Language_Main.
10 Click Save. Your screen should look like Figure 6.9. In the Document window, notice the file tab displays Language_Main.dwt. The file extension .dwt stands for Dreamweaver Template.
Figure 6.9 The finished template.
Explain Why would you want to create a custom template? Developing Content and Layout
173
The Language Club Logo What is the function of a logo on a Web page? Caution Include alternative text with graphics. Accessibility guidelines require all graphics to have alternative text.
A logo is a symbol used to represent a business or an organization. On many Web sites, clicking the logo will return users to the site’s home page. A title graphic, also called a page header, is an image that appears at the top of every page on a Web site. In the following activity, you will add the Language Club logo to the site’s template. You will also add alternative text to the graphic. Alternative text is text that appears on the screen if the image is not available.
ACTIVITY 6D Add a Logo 1 If necessary, open your Language_Main.dwt file. Open the Insert toolbar. On the Insert toolbar, click the Images button. 2 In the Select Image Source dialog box, browse to the DataFile\Ch06\ Images folder. Double-click the lc_logo.jpg file. If necessary, in the dialog box, click Yes. Double-click the images folder and then click the Save button to save the image file to this folder. 3 Select the logo graphic. If necessary, press Ctrl + F3 to open your Properties inspector. In the Alt box, key: The Language Club. In the Link box, key: index.html. 4 Your template should look like Figure 6.10. Save your template file. In the dialog box that says This template doesn’t have any editable regions. Are you sure you want to continue?, click OK.
Figure 6.10 You have created a template in which the logo on each page is linked to the site’s home page.
Alt Link
Explain In many Web sites, what happens when the user clicks the site’s logo? 174
Chapter 6
Tables
Figure 6.11
How are tables a useful organization tool?
Many designers use tables to organize and lay out text and graphics on a Web page. A table consists of vertical columns and horizontal rows. Each individual square within a table is called a cell (see Figure 6.11). Columns
CLUB MEETINGS
DATE
TIME
French Club
Mondays
6:00 p.m.–9:00 p.m.
German Club
Wednesdays
6:00 p.m.–8:00 p.m.
Spanish Club
Saturdays
12 :00 p.m.–2:00 p.m.
A table consists of vertical columns and horizontal rows. How could you quickly determine the number of cells in this table?
Header row
Rows
Cell
ACTIVITY 6E Create a Table 1 Open your Language_Main.dwt file in Design view. Click after the logo. Press Shift + Enter to move the insertion point below the graphic. 2 On the Insert toolbar, click the Table button. 3 In the Table dialog box, key the settings shown in Figure 6.12. Click OK.
Figure 6.12 You can enter the table settings you want in the Table dialog box.
4 Move the mouse pointer over the downward-pointing arrow in the table’s first column. Click and choose Select Column. In the Properties inspector, click the Merges selected cells using spans button. The three cells merge into one cell. 5 In the Properties inspector, click the Horz drop-down arrow. Choose Left. Click the Vert drop-down arrow and choose Top. This changes the horizontal and vertical alignment of objects in the cell. 6 In the Properties inspector, in the W box, key 180 to modify the column’s width. Press Enter. Click inside the top cell in the right-hand column. In the Properties inspector, in the H box, key 25 to modify the cell’s height. Press Enter. Developing Content and Layout
175
7 Click in the table’s top-right cell. On the Insert toolbar, click the Templates drop-down arrow and choose Editable Region. In the New Editable Region dialog box, in the Name box, key: header. Click OK. 8 Click in the middle cell of the right-hand column. Click Templates and choose Editable Region. In the Name box, key: content. Click OK. 9 Your template should now look like Figure 6.13. Save your work.
Figure 6.13 The editable header region allows you to customize each page’s header.
Compare What is the difference between a column and a row?
Section 6.3 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Templates help designers organize common Web page elements.
1. Define template, logo, title graphic, table, column, row, cell.
• Designers can create custom templates to meet the needs of a specific site.
2. Explain how a custom template differs from a premade template.
4. Compare and Contrast Describe two situations in which it would be better to enter text in a table rather than in paragraph form.
• Logos and title graphics help give each Web page in a site a consistent visual appearance. • Tables help organize a page’s content into rows and columns.
176
Chapter 6
3. List three properties of a table data cell that can be set in the Properties inspector. Explain the function of these three properties.
5. Draw Conclusions What would a user see on the screen if the graphic were not available and no alternative text had been included?
Apply It! Create a Table Review the notes you took in one of your classes. Organize some of the information you learned into a table. If possible, use a technology tool to create your table.
SECTION 6.4 ENHANCING THE TEMPLATE Focus on Reading Read to Find Out In this section, you will learn how to add elements to a template. Read to find out how to create navigation buttons and text links.
Main Ideas
Key Terms
Reading Strategy
You can insert navigation buttons into a template so that when you create each page, the links will already be established. Page footers typically include text links, an e-mail link to the Webmaster, and copyright information.
navigation button hover button interactive button active button link bar footer
Compare and contrast navigation buttons and text links. Use a Venn diagram like the one below (also available online). Buttons
Text Links
The Language Club template is almost complete. In this section, you will add navigation buttons and insert the template’s footer information.
Navigation Buttons What is the purpose of navigation buttons?
A navigation button is a button that users click to locate additional information and to navigate to other Web pages. There are different types of navigation buttons. ◆ A hover button, also called a rollover button, is a navigation button that changes appearance when touched or clicked by a mouse pointer. A hover button is a type of interactive button (sometimes called a dynamic button). An interactive button lets users know that an action has taken place, which increases the site’s user-friendliness.
You Should Know You can add premade button graphics to your Web pages and Dreamweaver will add the hover (or rollover) scripting automatically.
◆ A clicked button is referred to as an active button, because it is in the process of doing something, such as transferring the user to another Web page. Navigation buttons in the Language Club Web site will be vertically aligned at the left side of the template. A related group of horizontally or vertically aligned links is called a link bar (also referred to as a navigation bar). Placing a link bar in a Web page template helps users in several ways. ◆ The bar is easy to locate because it is always in the same position. ◆ Links are easy to find because they are always in the same order.
WebDesignDW.glencoe.com
Developing Content and Layout
177
ACTIVITY 6F Add Navigation Buttons 1 Open your Language_Main.dwt file in Design view. Click in the table’s left-hand column. 2 On the Insert toolbar, click the Images drop-down arrow. Choose Rollover Image. In the Insert Rollover Images dialog box, in the Image name box, key: Home.
Table 6.2 Change the information in the Insert Rollover Image dialog box to create each new button. Double check the URL for each image. They must be entered exactly as shown.
3 Next to the Original image box, click Browse. Browse to the DataFiles\Ch06\Images folder. Double-click nav_home_blue.gif. When asked if you would like to save the file, click Yes. Save the file in your images folder. 4 Next to the Rollover image box, click Browse. Browse to the DataFiles\Ch06\Images folder. Select the nav_home_red.gif file and save it in your images folder. 5 In the Alternate text box, key: Home. In the When clicked, Go to URL box, key: index.html. Click OK. 6 Repeat Steps 2 through 5 to create the About Us, Events, and Contact Us navigation buttons. Use Table 6.2 to create the buttons.
Navigation Buttons Image Name
Original Image
Rollover Image
Alternate Text
When Clicked, Go to URL
About Us
nav_about_blue.gif.
nav_about_red.gif
About Us
about_us.html
Events
nav_events_blue.gif
nav_events_red.gif
Events
events.html
Contact Us
nav_contact_blue.gif
nav_contact_red.gif
Contact Us
contact_us.html
7 Your link bar should look like Figure 6.14. Save your work. Preview your page in a browser. (Click OK if This template doesn’t have any editable regions. Are you sure you want to move? appears.) Move your mouse pointer over the buttons to see each one turn from blue to red.
Figure 6.14 The template contains a link bar with four rollover buttons.
Link bar
8 Close your browser. Click the Images drop-down arrow. Choose Image. Close the Select Image Source dialog box. Close the Language_Main.dwt file.
Describe What is the purpose of a navigation button?
178
Chapter 6
Footer Information Why is footer information important on a Web site?
A Web page’s footer usually contains copyright information, dates, contact information, and text links. The footer for the Language Club Web pages will have the following: ◆ Text links
You Should Know In Dreamweaver, if a footer is part of a template, then it can only be edited in the template file.
◆ E-mail address for the Webmaster ◆ Copyright information You will center each of these items horizontally on a separate line at the bottom of the template.
ACTIVITY 6G Add Footer Information 1 Open your Language_Main.dwt file in Design view. Click in the bottom cell of the right-hand column. 2 In the Properties inspector, click the Size drop-down arrow and select 12. 3 Key the text below, including the vertical line between each link. (To create the vertical line, press Shift + \). Place a space between each item you key: Home | About Us | Events | Contact Us 4 In the Properties inspector, click the Horz drop-down arrow and select Center. Any text or objects placed in this cell will be centered.
Shortcut To center text, you can also choose the Center Align button in the Properties inspector.
5 Press Shift + Enter and then key: Questions or comments about the Web site?. 6 Press Shift + Enter and key: Copyright 2008 – Language Club. 7 Your screen should look like Figure 6.15. Proofread your work and make any needed corrections. Save your work.
Figure 6.15 The template’s footer with footer information added.
Developing Content and Layout
179
Text Links You should always include text links in your footer. Like interactive buttons, text links often change colors to show whether the link has been clicked. Even if you use Dreamweaver’s default settings, you should always set your hyperlink colors to make sure that they work well with your site and do not blend into the background. Also confirm that the colors assigned to nonvisited, visited, and active links are consistent throughout your site.
ACTIVITY 6H Add Text Links 1 If necessary, open the Language_Main.dwt file in Design view. 2 In the page’s footer, select the word Home. In the Properties inspector, in the Link box, key: index.html. Press Enter. The text changes color to indicate it is a link. 3 Repeat Step 2 for the remaining About Us, Events, and Contact Us links. Use the information shown in Table 6.3.
Table 6.3 Each text link connects to a specific URL. Key the link exactly as shown.
Text
Link
About Us
about_us.html
Events
events.html
Contact Us
contact_us.html
4 Right-click a blank area of the page and select Page Properties. In the Page Properties dialog box, under Categories, select Links.
Figure 6.16 Use the Page Properties dialog box to set the color of links on your Web page.
180
Text Links
Chapter 6
5 Use the values shown in Figure 6.16 to key in the hexadecimal colors for Link color, Rollover links, Visited links, and Active links. Note that it is standard to have links be blue, rollover links red, visited links purple, and active links red. Click OK and save your work.
Links to E-mail Windows The last step in creating the Language Club template is to create a link to an e-mail window (also referred to as an e-mail hyperlink). When visitors click the Webmaster link at the bottom of the page, an e-mail window will pop up that contains the Webmaster’s e-mail address. This feature allows visitors to send messages to the Webmaster.
ACTIVITY 6I Add a Link to an E-mail Window 1 If necessary, open the Language_Main.dwt file in Design view. Position the insertion point after Questions or comments about this Web site? Press the spacebar once. 2 Choose Insert>Email Link. In the Email Link dialog box, in the Text box, key: E-mail the Webmaster. 3 In the E-Mail box, key your e-mail address (or another address, as instructed by your teacher). Click OK.
Figure 6.17
4 Your screen should look similar to Figure 6.17. Look at the Link text box in the Properties inspector. Notice that the text “mailto:” is automatically inserted at the beginning of the e-mail address you keyed.
A link to the Webmaster is inserted into the template’s footer.
E-mail to Webmaster link
Mailto automatically inserted
5 Spell check and proofread your template. Since you will build your Web pages on this template, you want to make certain everything is correct. If you make any changes, be sure to resave the page. Developing Content and Layout
181
6 Preview your template in several different browsers, and at several resolutions. Your screen should look similar to Figure 6.18. Close your browser(s). Make any needed corrections and resave your work. Close the Web site and exit Dreamweaver.
Figure 6.18 The finished template as viewed in a browser.
You have now created a template that will be the basis for each Language Club Web page. In the next chapter, you will use this template to create pages for the Web site. Describe What information does a Web page’s footer usually contain?
Section 6.4 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• A hover button changes appearance when touched by a mouse pointer.
1. Define navigation link, hover button, interactive button, active button, link bar, footer.
• A related group of horizontally or vertically aligned links is called a link bar.
2. Identify at least two ways that you can control a navigation button’s appearance.
4. Analyze What are the primary advantages of interactive buttons on Web pages? What are the advantages of text links?
• Including a link to an e-mail window helps users contact the site’s Webmaster or owner.
182
Chapter 6
3. Explain the purpose of an e-mail window.
5. Synthesize Besides using interactive buttons, how else can a Web designer make a site more user-friendly?
Apply It! Create a Footer Open the MySkills page you created in Chapter 4. Add a footer to the page that contains an e-mail contact and a copyright notice.
CHAPTER 6
Reading Review
SECTION 6.1 Creating Web Site Content
SECTION 6.3 Creating a Page Template
Key Terms
Key Terms
content, 162 inverted pyramid, 164
template, 171 logo, 174 title graphic, 174 table, 175
Main Ideas ■ Users typically scan text for keywords. ■ Group online text into short chunks with concise ■ ■
■ ■
heads. Use bulleted lists to make text easy to read. Format main headings larger than subheadings and use different colors and typefaces to help main headings stand out. Use an inverted pyramid to organize Web text. Brainstorming is a useful technique for generating and organizing online content.
SECTION 6.2 Placing Items on a Page Key Terms white space, 168 proximity, 168 pixel, 169
safe area, 169 screen resolution, 169
Main Ideas ■ Do not place too much content on a Web page.
■ ■ ■
■
Include white space to keep the page from looking too cluttered. Place important content in a screen’s safe area. Make sure you consider a page’s download time when adding text and graphics. View your Web pages in various browsers and at various screen resolutions to see how they will appear to different users. On-screen content appears larger at lower resolutions, and smaller at higher resolutions.
column, 175 row, 175 cell, 175
Main Ideas ■ Templates help designers organize common
Web page elements such as logos, title graphics, navigation links, and footers. ■ Designers can create custom templates to meet the needs of a specific site. ■ Logos and title graphics help give each Web page in a site a consistent visual appearance. ■ Tables help organize a page’s content into rows and columns.
Main Ideas ■ A hover button changes appearance when touched ■ ■ ■ ■
by a mouse pointer. A related group of horizontally or vertically aligned links is called a link bar. Including both text links and graphic navigation links makes a site more user-friendly. Visited text links are typically a different color from nonvisited and active links. Including a link to an e-mail window helps users contact the site’s Webmaster or owner.
Developing Content and Layout
183
CHAPTER 6
Review and Assessment
AFTER YOU READ Create a Study Guide Go back to the questions you created from the colored headings in the text. Use these questions to create a study guide for reviewing the chapter content. If your teacher agrees, you might want to form a small group to share your questions as a review activity.
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
15. Identify how you can use headings to create a well-organized Web site.
Reviewing Key Terms 1. What elements make up a Web page’s content? 2. What should you use to create visual space between images and body text? 3. What is a pixel? 4. Which of the following items should be placed in a page’s safe area: footer, logo, text link? 5. What is the standard screen resolution that most Web designers target? 6. Why is it helpful to use a template when creating a Web page? 7. True or false: A table consists of vertical rows and horizontal columns. 8. Rewrite this statement to make it true: A navigation button is a symbol used to identify a business or an organization.
Understanding Main Ideas 9. Describe how the size of an element affects a user’s perception of content. 10. Discuss how you can use an inverted pyramid to organize your ideas. 11. Explain why it is necessary to keep important elements within certain areas of the Web page. 12. Discuss why Web designers use tables in the design of a Web page. 13. Explain how table rows, columns, and cells are related to one another. 14. Discuss ways in which link bars make Web pages more user-friendly. 184
Chapter 6
Headings
16. List four properties that you can modify for a table within the Properties inspector, and what the modification would change. Property
Result of Modification
Property #1
Critical Thinking 17. Describe three situations in which an interactive button’s appearance might change. 18. Identify two situations in which you might want to include links to an e-mail window. Then give two reasons a site might use text links and graphic navigation links. Explain your answer. 19. Compare and Contrast Do you prefer reading a magazine in print or online form? Why do you prefer one over the other? Analyze how online magazines present their articles compared to the print editions. How do these magazines adapt their content to suit online readers? What online magazine do you read? Use that online magazine to illustrate your answers.
CHAPTER 6
Review and Assessment
20. Analyze Content Imagine designing a Web site for your favorite movie. Following the rule of function over form, identify the elements that you would include on your home page and those you would resist including. Explain your answers. 21. Evaluate Layout You are a professional Web designer. Evaluate how you might use premade templates, custom templates (that you have created), or custom-designed sites in your business. Use a matrix like the one below to organize your ideas. Premade Templates
Custom Templates
Custom-Designed Sites
Charts & Graphs Read the paragraph and chart below and then answer the question.
The chart below shows the results of a survey in which students from 72 schools, grades K–12, described how they participated in distance learning. Participation in Distance Learning 50% 40% Classes Shared with Other Schools
30%
Research Projects Science Fair Projects
20%
E-mail Communication
22. Analyze Design Describe ways in which a well-designed Web page provides visual cues to help users navigate the site. Explain how these visual cues help make a site more user-friendly. 23. Evaluate a Web Site Choose a Web site and analyze the site’s home page. Then, describe the visual cues that help users navigate that site. Is the site userfriendly? Are the visual cues working? Use examples to support your ideas.
10% 0%
According to the chart, which of the following statements is true? Over 50% of the students shared classes with other schools. Only 5% of the students used distance learning for research projects. At least 18% of the students used e-mail. Fewer than 5% of the students participated in science fair projects.
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items.
WebDesignDW.glencoe.com
On your own paper, copy and complete the chart shown below.
Study with PowerTeach
24. 25. 26.
Result
+
Result
+
WebDesignDW.glencoe.com
Go to the book Web site shown above. To review the main points in this chapter select e-Review>PowerTeach Outlines>Chapter 6.
Online Self Check Result
Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 6. Developing Content and Layout
185
CHAPTER 6
Activities
1. MAKING CONNECTIONS Language Arts—Write Web Text Rewrite the following text for use on a Web page. Use headings and bulleted lists to break the text into smaller sections. Then, create a basic Web page using your revised text. Cape Cod, Massachusetts, is a popular vacation destination. In the summer, you can swim in the ocean, go on a whale-watching expedition, or walk the beach on Cape Cod Bay. In the fall, you can take nature walks at the National Seashore, attend cranberry harvest festivals, or visit Plymouth Plantation to learn how the pilgrims lived. Many people also visit Cape Cod in the winter to enjoy the snow and to attend the holiday festivals. If you are planning a visit to Cape Cod in the spring, plan to spend time visiting the many museums, parks, and other historical monuments.
2. STANDARDS AT WORK Students use telecommunications to collaborate, publish, and interact with peers, experts, and other audiences. (NETS-S 4)
Evaluate Layout You have been hired by a Web design company to evaluate Web sites of the company’s designers. Go to the home page of a Web site you visit often. Assume this site was designed by one of the company’s designers. Evaluate the page’s layout and prepare an evaluation that you could send to the Web designer. 1. Create an evaluation. In your evaluation, consider whether important content is emphasized. Where does your eye go first? Are related items grouped together? Use a table like the one shown below to evaluate the page’s layout. PAGE TRAIT
EVALUATION
Important Content White Space Proximity Alignment
2. Write an e-mail that summarizes your evaluation. Be sure to include the link to the page you reviewed. With your teacher’s permission, exchange e-mails with another student or exchange printouts of your evaluations. Review each other’s evaluations. Reply to the other student’s evaluation explaining why you agree or disagree. 186
Chapter 6
CHAPTER 6
Activities
3. TEAMWORK SKILLS Evaluate Content Select one Web page you have created and have it reviewed by your peers. Following your teacher’s instructions, form a team with three other students. Make sure that no one in the team has seen each other’s pages. Look at the first Web page for ten seconds. As a group, discuss the following: 1. Look at the whole Web page. What is the Web page about? 2. Is information easy to see and understand? Why or why not? 3. Compare the use of text and graphics to convey information. Did the author choose form over function? Explain your answers to your team. 4. What theme or scheme do you see? (What are the coordinating colors, text enhancements, graphic enhancements, people enhancements?) 5. Describe how the site is user-friendly. 6. How can the page be improved? The team must agree on how the page should be revised. Repeat this for each member’s Web page. Make any needed changes to your page, and share the pages again as a group. Point out how you improved your page and see if your team members agree.
4. CHALLENGE YOURSELF Create a Template Use Dreamweaver to design a template based on the diagram below. This template can be used to create a photo gallery. Include placeholder text as appropriate. The text can describe the expected content for the page. Save the template and give it an appropriate name. Logo and title graphic
Short paragraph introducing photos
Table with six cells Navigation buttons Text links
After you have created the template, create a second photo gallery template. Use the same information from the diagram, but redesign the template so that it is different from the first. On your own paper, sketch a diagram of the new template. Then, use Dreamweaver to create it. Developing Content and Layout
187
CHAPTER 6
Projects
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Create Web Content Family friends have just opened an Italian restaurant. They want you to design a Web site that contains their menu, phone number, and e-mail so that customers can make reservations or call in take-out orders. Make a list of keywords that apply to the restaurant. Use the information from their advertisement (shown right) to write the content for the site’s Featuring the best pasta in town, outstanding home page. pizza, and terrific panini sandwiches! Write the content for the restaurant’s menu page.
2. Create a Template
At Giovanni’s, we offer the finest food at reasonable prices! Our chef brings his authentic family recipes direct from Italy.
Create a template for the restaurant site in You Try It Come dine with us at 1234 Riverview Avenue. Skills Studio #1. Call in advance for reservations or takeout orders. Sketch a layout for the home We also deliver. page that uses a two-column table. The template must also Reach us by phone 323-555-5555 or e-mail at include a logo, a title, a footer, [email protected] and navigation buttons. Place the navigation buttons in the table’s left column and the page’s content in the right column. Create a template in Dreamweaver for the site’s home page based on your sketch. Add the home page content you wrote in You Try It Skills Studio #1. Add navigation buttons for other pages in the site. ◆ Menu page ◆ Restaurant Events page ◆ Employee of the Month page
Add text links and E-mail the Webmaster in the footer. Add a link from E-mail the Webmaster to an e-mail window. Save your work.
188
Chapter 6
CHAPTER 6
Projects
Read the projects described below. Then follow the directions to complete each project.
1. Develop Content for a Template In Chapter 5, you created a storyboard and thumbnails for a Web site about a local band. Use the storyboard and thumbnails to plan the content for the home page and create the Web site. First, write the content for the home page. Then, create a template for the site. The template should include a title bar, navigation buttons, and a footer. Plan a table for the template that places navigation links and content in appropriate places. Enter the content information for the home page. As you create the page, evaluate whether or not you should break the information into pieces and place it on multiple Web pages. Determine which information would belong on which page in your site. Then, create the additional pages in the Web site, but do not add content to them. Link all pages using the navigation structure shown in your storyboard.
2. Create a Personal Web Site Plan and create a personal Web site template. First, sketch a storyboard for your template. The template should include a title area, a navigation menu, a graphic placeholder, a text placeholder, and a footer. Your personal Web site will include at least three other pages. As you design your template, think about what pages you will have in your site. Ideas for pages include a portfolio page showing work you are proud of, an interests page describing your hobbies, pages for one or more of the classes you are taking, a creativity page for ideas you want to explore further or use later, or a résumé page. Based on your sketch, use Dreamweaver to create the template for your site. Be sure to include a link bar and text links. Use appropriate colors on your template page. Save your work.
My Web Site My Hobbies My Classes
All About Me
Image
My Portfolio P Text ext Links Copyright Information E-mail the Webmaster
Developing Content and Layout
189
CHAPTER
7
Selecting Design and Color
YOU WILL LEARN TO… Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Use color scheme guidelines Add colors to a Web site Identify Web-safe colors Section 7.3 Adjust text properties Summarize formatting guidelines Format text in Dreamweaver
WHY IT MATTERS ................................................. Imagine traveling to another state and finding that the road signs look different from place to place. To avoid confusion, roads and highways in the United States have standardized designs. For instance, an octagon shape is always a stop sign. Consistency in Web design is just as essential. In this chapter, you will learn the skills and concepts to design consistent Web sites. Think about a tool that you use every day (a pen, television set, computer, etc.). Write a short paragraph identifying the features or controls that make this tool easy to use. What would happen if you used a similar tool that did not have these features? How easy or hard would it be to relearn how to use this tool if it were redesigned?
190
Chapter 7
CHAPTER
7
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 7.1 Compare and Contrast Graphics ..................................... 197 7.2 Explore Background Colors ...... 201 7.3 Evaluate Fonts ............................ 209 You Try It Activities 7A Use a Template to Create New Pages .................................. 7B Organize the Site’s File Structure .................................... 7C Insert Page Headers .................. 7D Add Content and Color to the Home Page.................................. 7E Format Text ................................
193 195 196 199 208
You Try It Skills Studio Format Text in Tables ........................ 216 Add a Contact Us Page ...................... 216 Web Design Projects Add Text to a Web Page ..................... Refine Your Personal Web Site ........ Write for a Web Audience ................. Create a Web Site About Your Community ......................................... Create a Food Festival Web Page .....
217 217 218 218 219
IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects
ON THE WEB Chapter Assessment Making Connections ......................... Standards at Work ............................ Teamwork Skills ................................ Challenge Yourself ............................
214 214 215 215
Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Get Creative An excellent way to stay engaged in your reading is to make associations while you read. For example, drawing an image of a piece of computer hardware and labeling it helps you remember it. Thinking of an easy-to-remember rhyme or setting a series of short steps to music is another way to help your brain make associations for easier recall. Your memory trick does not have to be beautiful or impressive—it only has to mean something to you.
WebDesignDW.glencoe.com
Selecting Design and Color
191
SECTION 7.1 PRINCIPLES OF PRESENTATION DESIGN Focus on Reading Read to Find Out The main purpose of this section is to explain the core principles of good Web design. Pay close attention to the key terms consistency and repetition. Read to find out how Web designers use the principles of consistency and repetition to develop well-designed sites.
Main Ideas
Key Terms
Reading Strategy
Well-designed Web pages follow the principles of consistency and repetition. Using consistent visual elements and placing key items in the same place from page to page help make a site user-friendly.
consistency repetition page header
Identify five presentation design principles. Use a web diagram similar to the one below (also available online).
Presentation Principles
A user-friendly Web site is a site that visitors feel comfortable navigating. Two features that make Web sites user-friendly are consistency and repetition. These are important elements of presentation design.
Consistency and Repetition Activity 7.1 Explore Presentation Design Find out more about presentation design by visiting WebDesignDW.glencoe.com.
How do Web designers use consistency and repetition to develop well-designed Web sites?
To make a visitor to your site feel at ease and comfortable, you will want to establish a consistent design theme throughout your Web site. Consistency is a similarity among the parts of a whole. From its home page to its subpages, your Web site should have the same look throughout, from the graphics to the layout to the writing style. For example, every page should have the same logo, header graphics, navigation, and footer information. A consistent design: ◆ helps users become familiar with the site quickly. ◆ puts users at ease. ◆ makes it easier for users to find information quickly. Another characteristic that users expect in Web sites is repetition. Repetition is the duplication of specific elements on all (or most) of a site’s pages. Repeating elements on your Web pages allows users to become familiar and comfortable with your site quickly. Elements that every Web page should have are shown in Figure 7.1 on page 193.
192
Chapter 7
WebDesignDW.glencoe.com
Figure 7.1
Title of the page and where it is in the site
A logo or name of the site
Repeating elements helps users learn where items are located quickly. Why is it important that users are comfortable with a Web site?
Web Page Elements Navigation options
A link back to the home page
Following the principles of consistency and repetition on your Web pages will make users more comfortable with your site. This, in turn, will encourage users to visit the site more often. Summarize What four elements should be the same on every page in a Web site?
Jargon The term experience design refers to creating an environment that customers can relate to on an emotional level.
Using a Template How can using a template help me create a well-designed Web site?
Using a template is a good way to create a user-friendly Web site. Templates help you build consistency and repetition into your Web site and give the site a unified design from page to page.
Assigning Page Titles and File Names In the following activity, you will use the page template you developed in Chapter 6 to create a home page and three subpages for the Language Club Web site. You will then assign page titles and file names to each of these pages.
Shortcut To display the files for a Web site, press F8.
ACTIVITY 7A Use a Template to Create New Pages 1 Start Dreamweaver or, if necessary, close any open sites to see the Dreamweaver Start page. 2 In the Start page, under Create New, click the More folder. 3 In the New Document dialog box, click the Templates tab. Under Templates for, select your Language Club site. Under Site, select Language_Main. Click Create to open the template. 4 At the top of the page, in the Title box, select Language Main (see Figure 7.2). Key: Language Club – Home Page. Press Enter.
Figure 7.2 Enter the title of the home page in the Title box.
5 Choose File>Save As. Name the file index.html. Click Save. Selecting Design and Color
193
6 Choose File>New (or press Ctrl + N) to display the New from Template dialog box. Follow steps 3 through 5 to create three additional Web pages. Use the page titles and file names shown in Table 7.1 to create these new pages.
Table 7.1
Page Titles and File Names
Assign each page the page title and file name shown here.
Page Title
File Name
Language Club – About Us
about_us.html
Language Club – Events
events.html
Language Club – Contact Us
contact_us.html
7 When complete, your file list should resemble the list shown in Figure 7.3. Save your work.
Figure 7.3 Four pages have been created using the Language_Main template.
Troubleshooting Your file names must match Table 7.1 exactly in order for the links created in Chapter 6 to work properly. Double check the names before saving the file.
Pages and Navigation Structure Now that you have set up the pages for the Language Club site, you will need to create a folder in which to put the subpages. One way is to make an individual folder for each section. For example, the About Us section would appear in the browser as: http://www.myschool.com/ about_us/about_us.html. Another way is to create a single “pages” folder and place all the subpages into it. The About Us section would then appear as http://www.myschool.com/pages/about_us.html. In the following activity, you will create a pages folder to store your Language Club Web site pages. 194
Chapter 7
ACTIVITY 7B Organize the Site’s File Structure 1 In the Files panel, right-click your Language Club Web site’s index_html file. In the options menu, select Set as Home Page. Right-click Site – Language Club and choose New Folder from the menu (see Figure 7.4). Name the new folder: pages.
Figure 7.4 Files panel menu with New Folder option selected.
You Should Know To create a third-level page, follow the steps to create a new page based on the template. On the page you would like to link to it, create a button or hyperlink to the new page.
2 Select the about_us page, then hold the Ctrl key down and select the contact_us and events pages. Drag the files into the pages folder. In the Update Links dialog box, click Update. 3 Your Files panel should look like Figure 7.5. In the Files panel, select Map view and click Expand/Collapse to view the site’s navigation map. Click Expand/Collapse again and return to Local view.
Figure 7.5 The three subpages added to the pages folder.
4 Preview your site in a browser. If you have any broken links, ask your teacher how to fix them.
Selecting Design and Color
195
Page Headers In Chapter 6, you created sections in the Language Club template for both page headers and footers. Page headers, also known as page banners, are typically graphics that appear at the top of a page. These graphics identify: ◆ the site. ◆ the section you are currently in. ◆ the site’s primary navigation (possibly). In the next activity, you will add a page header to each section of the Language Club site.
ACTIVITY 7C Insert Page Headers 1 In the Files panel, double-click index.html to open it. 2 Double-click the header editable region. Press Delete to remove any text that may be in the section. 3 Choose Insert>Image (or press Ctrl + Alt + I). In the Look in box, browse to the DataFiles\Ch07\Images folder. 4 Double-click the file hdr_welcome.gif. If necessary, click Yes. Save the file in your Web site’s images folder. 5 The header graphic is inserted into the home page, as shown in Figure 7.6.
Figure 7.6 The page header inserted into the home page.
Design Headers should be similar in appearance on both home and subpages to add consistency to a site.
Page header
6 Make sure the image is still selected. In the Properties inspector, in the Alt box, key: Language Club Web Site. Press Enter. 7 Choose File>Save to save the page. 196
Chapter 7
8 Repeat steps 1 through 7 for the subpages about_us.html, events.html, and contact_us.html. For each page, insert the header graphic and alternative text shown in Table 7.2. Make sure you save each page’s graphic file in your Web site’s images folder. Be careful to insert the correct graphic file into each page.
Table 7.2
Page Header Information File Name
Graphic
Alternative Text
about_us.html
hdr_aboutus.gif
About Us
events.html
hdr_events.gif
Events
contact_us.html
hdr_contactus.gif
Contact Us
Insert the graphic and alternative text for the remaining three pages.
9 When finished, select File>Close All. Save your changes if prompted to do so.
You have now completed the basic framework of the Language Club site. You can use the skills learned in this section to create a simple site or a site with multiple pages. In the next sections, you will develop the site by adding content and text formatting. Describe What is the purpose of a page header?
Section 7.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Two characteristics of most well-designed Web pages are consistency and repetition.
1. Define consistency, repetition, page header. 2. Explain why consistency and repetition are important design principles.
4. Analyze How does a template help to make a site consistent? How may templates both help and hurt the development of a site?
3. List three items that are typically repeated on a Web site’s main pages. Why are these three items typically repeated?
5. Synthesize Discuss several ways in which you rely on consistency and repetition in your daily life. Provide examples.
• Elements such as page headers, logos, and link bars should be repeated on the site’s main pages in order to make a site easier to navigate. • A page header (banner) helps users identify where they are in a Web site. • A template helps Web designers make a Web site consistent.
Apply It! Compare and Contrast Graphics Each Language Club Web page has a graphic that identifies the entire site and a graphic that identifies each individual page. How are these two graphics different from one another? How are they alike?
Selecting Design and Color
197
SECTION 7.2 CHOOSING COLORS Focus on Reading Read to Find Out Ask yourself why choosing appropriate colors is an important part of designing a Web site. How does choosing colors relate to the two design goals of consistency and repetition? Read to find out why selecting a color scheme plays a crucial role in Web site development.
Main Ideas
Key Terms
Reading Strategy
A Web site’s color scheme should both appeal to visitors and create a sense of continuity throughout the pages. Using hexadecimal values for colors ensures that the colors will appear the same to all users.
color scheme Web-safe color
Identify four color scheme guidelines. Use a web diagram similar to the one below (also available online).
Color Scheme Guidelines
Color adds impact and visual interest to Web pages. As the designer, you decide what colors to use and how to apply them to each page. You should, however, keep certain guidelines in mind when choosing colors.
Color Scheme Guidelines Activity 7.2 Select Color Schemes Find out more about using color in your Web pages by visiting WebDesignDW.glencoe.com.
What do I need to consider when choosing a color scheme?
A color scheme, also known as a color palette, is the selection of colors you use throughout your Web site. As you choose a color scheme, limit the number of colors to no more than three. Select colors that complement the site’s theme and purpose. Color scheme guidelines are shown in Figure 7.7.
Figure 7.7 Selecting a color scheme is an important part of designing a Web site. Why should you try to choose contrasting colors when selecting a color scheme?
Color Scheme
Bold colors
Limiting colors
Excessive color and use of color on color
➠ ➠ ➠ ➠
Reinforces consistency and repetition
Highlight important information
Creates unified look and feel
Makes it difficult to read content
Evaluate Why is it important to choose a color scheme that supports a Web site’s theme? 198
Chapter 7
WebDesignDW.glencoe.com
Web-Safe Colors How can using Web-safe colors help me create a user-friendly site?
In the mid 1990s, many computer systems were capable of displaying only 256 colors. Of these, only 216 displayed the same on the Macintosh and Windows operating system. At the time, many designers adopted this limited color palette, known as Web-safe colors, to provide reliable color within their pages. Today, many computer systems can display thousands or millions of colors. Choosing Web-safe colors has thus lost some of its importance, although most Web designers still reference the palette when choosing colors. Most graphics and development applications, including Dreamweaver, also make use of Web-safe colors. To identify a Web-safe color, examine the hexadecimal value pairs. If the hexadecimal value contains 00, 33, 66, 99, CC or FF in any combination, it falls within the Web-safe color palette (see Appendix C for an overview of the palette). As you choose colors for your site in the following activity, watch the Text Color box in the Properties inspector to see the color’s corresponding hexadecimal number.
You Should Know Dreamweaver’s Command>Set Color Scheme option provides examples of how various link colors interact with background colors.
ACTIVITY 7D Add Content and Color to the Home Page 1 In the Language Club Web site, expand the Templates folder and double-click Language_Main.dwt to open the template. 2 Click in the word content in the content editable region. In the Properties inspector, click the Bg drop-down arrow and select white. The hexadecimal value #FFFFFF displays in the box. In the Properties inspector, click the Vert drop-down arrow and select Top. Your screen should look similar to Figure 7.8.
Figure 7.8 The content region with a white background and vertical alignment set to Top.
Content region with new background color
Vertical alignment Background color
Selecting Design and Color
199
3 With the insertion point still in the content region, choose Modify>Table>Split Cell. In the Split Cell dialog box, under Split cell into, select Columns. Set the Number of columns to 2. Click OK. 4 Click inside the new table cell and choose Insert>Template Objects>Editable Region. In the dialog box, in the Name box, key: bodytext. Click OK. 5 Save your template file. When asked to update all the files dependent on this template, click Update. Click Close. Close the template file. 6 Open index.html and double-click on the content editable region. Press Delete to remove any text. 7 Choose Insert>Image. Browse to the DataFiles\Ch07\Images folder and double-click photo_members.jpg. Save the file in the images folder. 8 In the Properties inspector, click Align Center. In the Alt box, key: Club Members. Your screen should look like Figure 7.9.
Figure 7.9 Photo center aligned using the Align Center option in the Properties inspector.
Align Center
9 Place the insertion point to the left of the photo. Press Shift + Enter to insert space above the photo. 10 Position the insertion point in the space above the photo and key: Hello! Hola! Bonjour! 11 Double-click the bodytext editable region. Press Delete to remove any text. Key: Here is a group photo of our club members at this year’s kick-off meeting. It is never too late to join in and explore new languages and cultures from around the world! 200
Chapter 7
Figure 7.10 Your Language Club home page now includes a photo and text.
12 Your page should look similar to Figure 7.10. Select Text>Check Spelling to check for errors (or press Shift + F7). If you receive spelling errors for “Hola” and “Bonjour” choose Ignore. Save your file.
Design As you design, think about users who are color blind. Avoid using red or green to emphasize important information.
In this section, you learned that there is more to selecting color than just being creative. Selecting color requires you to consider many different aspects of the site including the purpose of the site, the site’s intended audience, and the reason color is needed. Keeping these items in mind will help you to use color like a professional. Analyze Why did Web designers originally decide to use Web-safe colors when creating sites?
Section 7.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• A Web site’s color scheme is a set of selected colors that should create a sense of continuity.
1. Define color scheme, Web-safe color.
4. Evaluate Describe a color scheme from a Web site that you believe is well designed. Defend your opinion with examples from the Web site.
• You can use different colors to emphasize important content. • Using Web-safe colors will ensure that the colors will look the same in a variety of browsers.
2. List the steps you follow to change an editable region’s background color. 3. Summarize four guidelines that you should follow when selecting colors and describe why these guidelines are important.
5. Analyze Select three news sites and determine what dominant colors appear on each. Why do you think these colors were selected?
Apply It! Explore Background Colors Experiment with three different background colors for the Language Club home page. What effect do these changes have on the look of the page? (Do not save your changes.)
Selecting Design and Color
201
SECTION 7.3 FONTS AND TYPOGRAPHY Focus on Reading Read to Find Out Think about how the fonts or text styles you use in a Web site can influence your audience. Read to find out how you can use different styles and formatting to make your Web site’s message clear.
Main Ideas
Key Terms
Reading Strategy
Text can be formatted with font type, size, and color, as well as by line alignment and spacing. Format your site so your pages are readable, consistent, and attractive.
typography formatting font pixel alignment serif sans serif
Compare and contrast serif and sans serif fonts. Use a Venn diagram like the one below (also available online).
Serif
Sans Serif
Typography is the style, arrangement, and appearance of text. On the Web, the use of fonts and good typography can influence how clearly you communicate with your audience. In this section, we will discuss how to choose fonts and formatting so your message is clear. Content Many word processors have textediting features that are not available in Dreamweaver. It is often easier to create a document in a word processor before inserting it into a Web page.
Formatting Text in a Web Site How does formatting influence how a user views your Web site?
When creating Web pages, you need to consider what font sizes, colors, styles, typefaces, and alignments you want to use. Determining these text properties is referred to as formatting.
Font Types A font is a set of characters with a specific shape and style. Times New Roman, Courier, and Arial are examples of frequently used fonts. Dreamweaver features a predefined list of fonts commonly installed on most computer systems (see Figure 7.11). Less common fonts might not be available on all computers. Using these predefined fonts will allow you to maintain some control over the appearance of text in your pages.
Figure 7.11 Dreamweaver’s list of standard fonts. What are some of the fonts available on your computer system?
202
Chapter 7
WebDesignDW.glencoe.com
Font Size To specify font size in Dreamweaver, you can either enter your own numerical value in the Size box on the Properties inspector, or you can select a size from the Size drop-down menu shown in Figure 7.12. The default, and most common, unit of measurement for fonts on the Web is the pixel. The larger the pixel value, the larger the text on your pages will be. When selecting font sizes, bear in mind that various operating systems, platforms, and browsers may all display the same font size differently.
Figure 7.12 Use the Size menu to select a font’s size. Why would you want fonts to be different sizes on a page?
Font Style You can apply bold, italic, or underlined styles to the text on Web pages. Of these three styles, you will use bold and italic most often. The use of underlined text in a Web page generally indicates a hyperlink. Avoid using underlined text so you do not mislead visitors. In Figure 7.13, you will notice that Dreamweaver has left out the underline style to discourage you from using it on your pages. If necessary, you can access this style from the Text>Style menu. Bold
Figure 7.13 Style buttons are found on the Properties inspector. Why do Web designers avoid underlining text on Web pages?
Italic
Selecting Design and Color
203
Text Alignment Alignment is the position of text on a page. Figure 7.14 shows the four text alignment styles. Most text on the Web is left-aligned. The three other alignment styles are rarely used, since they tend to distract visitors and make it more difficult to read text.
Figure 7.14 Text can be left-aligned, centered, right-aligned, or justified. Which alignment is most often used in Web design?
Left-aligned text is positioned flush with the left edge of the page. Text is usually left-aligned automatically when you enter it on a page.
Centered text is positioned in the middle of the page.
Right-aligned text is positioned flush with the page’s right edge.
Justified text is positioned so that all lines have the same left and right margins.
Font Color Using color on text can help highlight important words on pages. Use color sparingly to increase the impact. Many Web designers use a single color for most text, and then use one or two additional colors to attract attention to key content. Use the Text Color menu on the Properties inspector to select and apply color to text, as shown in Figure 7.15.
Figure 7.15 Use the Text Color menu to make your fonts different colors. Why might you make a font a different color on a page?
204
Chapter 7
Formatting Style Menu The Format drop-down menu on the Properties inspector contains a number of different heading and paragraph options to choose from. The heading settings range from Heading 1 to Heading 6. The higher the number, the smaller your text will be. Heading 1 displays text in a large size, while Heading 6 displays text in a much smaller size. The six different headings and examples of how they display text are shown in Figure 7.16.
Figure 7.16 Use the Format menu to select predefined heading styles. What is the advantage of using these heading styles?
When you apply a heading style to text, the browser then displays that text as bold. You should therefore use headings to help important text stand out on your Web page. Use the heading settings to format items such as: ◆ Titles ◆ Subtitles ◆ Sections within documents Use the higher level headings (Headings 1 and 2) to make titles and subtitles stand out on your page. Use the lower level headings (Heading 3 and up) to format sections and subsections within documents. Using the predefined styles in the Format menu allows you to format text quickly. If you want more control over the scale of your text, use the Size option in the Properties inspector instead. Identify Why is the underline style not featured on the Dreamweaver Properties menu? Selecting Design and Color
205
Formatting Guidelines How can I format text to make my Web site more user-friendly?
Text on your Web pages should be readable, formatted consistently, and attractive in presentation.
Readability Of the three factors mentioned above, the most important is readability. If your text is difficult to read, users will not be able to understand the information you want to communicate. Ensure that your text is as readable as possible by applying some of the following formatting guidelines.
Use Sans Serif Fonts Two of the most commonly used font categories are serif and sans-serif. ◆ Serif fonts have additional lines or curves on certain letters and numbers. ◆ Sans serif fonts are “clean” with no additional lines. Examples of both fonts are shown in Figure 7.17. The titles and headings used in this book are sans serif fonts, while the body text is a serif font. Most Web designers use sans serif fonts such as Arial since people generally find it easier to read sans serif fonts on the screen.
Figure 7.17 Most people find sans serif fonts easier to read on the screen than serif fonts. How is a serif font different from a sans serif font?
Figure 7.18 Make sure there is enough contrast between your text color and your background color. Which example do you find easier to read?
Serif Fonts
Sans Serif Fonts
Times New Roman
Arial
Courier New
Futura
Garamond
Verdana
Choose High-Contrast Fonts and Backgrounds Both the color of text and a page’s background can affect readability. Choose colors that strongly contrast with one another. Black text on a white background is generally the best combination. However, this combination may not always fit your site’s design. Think light and dark as you select colors and be sure to look at the page in your browser to preview the results. You may even want to invite other people to view your page to determine its effectiveness.
POOR CONTRAST
SHARP CONTRAST
Text is easier to read when it is used with an appropriate background. The color and size of the text as well as the color and pattern of the background influence readability. Is this text easy to read?
Text is easier to read when it is used with an appropriate background. The color and size of the text as well as the color and pattern of the background influence readability. Is this text easy to read?
206
Chapter 7
Consistency As with the colors and graphics in your Web site, keep the formatting of text consistent throughout as well. This aids users in finding information on new pages and puts them at ease by using a format they are already familiar with. Table 7.3 contains some guidelines for making text consistent.
Table 7.3
Font Consistency Guidelines Guideline
Purpose
Use styles and colors sparingly
Too much formatting can overwhelm users. Also try to avoid formatting text in all uppercase.
Align text consistently
Uneven alignment can be confusing. Titles, subheadings, and the main body text should appear the same across all your pages.
Limit the number of fonts
Using too many fonts can distract users. Try to use no more than three different fonts.
Formatting fonts consistently can help make a site more readable. Why is it important that a site be readable?
Appearance As with your color scheme, the fonts you use should visually support the message of your site and page.
Use Formatting to Emphasize Text The formatting you use should also reflect the item’s importance. Use a larger font size, a different color, or other formatting options to highlight important elements. Generally, the more important the page element, the larger its size should be. Items such as titles are often larger than body text, as shown in Figure 7.19.
Figure 7.19 The size of text reflects the item’s importance. What is the most important element on this page?
Title: 36px
Author: 18px
Body: 16px
Copyright: 12px
Selecting Design and Color
207
Use Standard Fonts As mentioned earlier, Dreamweaver includes a predefined list of fonts commonly installed on most users’ computers. Use these fonts (shown in Table 7.4) to avoid difficulties such as text reflowing or reformatting differently when viewed in a user’s browser. Table 7.4 Different computers have different fonts installed on their hard drives. Which of the fonts below are serif fonts?
Mac OS and Windows Font Substitutions Mac OS System Font
Windows System Font
Courier
Courier New
Helvetica
Arial
Times
Times New Roman
Use Standard Font Sizes The type of browser, operating system, and computer can all influence how a font looks. This is also true for the size of the font. Think about what type of computer systems your target audience will have and select standard fonts that will work on their systems. Summarize What three factors must you consider when deciding how to format text on your Web pages?
Formatting Text in Dreamweaver What menus should I use to format text in Dreamweaver?
In this activity, you will format text using size, color, alignment, style, and font type.
ACTIVITY 7E Format Text 1 Open the Language Club Web site’s index.html page. 2 Select the Hello! Hola! Bonjour! text above the photo. In the Properties inspector, click the Font drop-down arrow and select Arial, Helvetica, sans-serif. 3 In the Size box, key: 20. Click the Bold style option. 4 In the Text Color box, key #3300FF to change the Hello! Hola! Bonjour! text’s color to blue. 5 Select the text in the bodytext editable region. Change the Font to Verdana, Arial, Helvetica, sans-serif. 6 Change the font Size to 18 pixels. 7 If necessary, click Align Center to center the text. 8 Press F4 to hide the panels. Your home page should look similar to Figure 7.20 on page 209. Press F4 again to open the panels. 9 Save your file. Select File>Close All (or press Ctrl + Shift + W) to close all of the files in the Web site. Exit Dreamweaver. 208
Chapter 7
Figure 7.20 The Language Club’s home page with modified style and alignment of elements.
In this unit, you learned the basic principles of information and presentation design, including how to add a color scheme and format text in Dreamweaver, and the importance of consistency and repetition. As you continue to create Web sites, keep these principles in mind to create sites that are both attractive and user-friendly. Identify Which menu do you use to select a font size?
Section 7.3 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Text properties include font type, style, alignment, and color.
1. Define typography, formatting, font, pixel, alignment, serif, sans serif.
4. Evaluate Select a Web site and describe how the text is formatted. What is emphasized by the formatting used?
• A font is a set of characters that have a specific shape and style.
2. Discuss two reasons why the on-screen size of a font can vary from one computer system to another.
• Centered, right-aligned, and justified text are rarely used on Web pages.
3. Identify the three most common ways for specifying a font size in a Web site.
• Text should be readable, consistently formatted, and attractive.
5. Draw Conclusions Imagine that the colors of a company’s logo clash with the background color of its Web pages. How should this conflict be handled?
Apply It! Evaluate Fonts Apply three different types of fonts to the photo caption on the Language Club home page. Evaluate each font for readability and appearance. (Close the site without saving your changes.)
Selecting Design and Color
209
Respecting Intellectual Property
M
any people do not understand that online resources are protected by copyright and trademark laws.
Understanding Intellectual Property The term intellectual property refers to an idea that is a product of a person’s intellect and creativity, such as: ◆
Text (books, plays, and articles)
◆
Songs
◆
Photographs and illustrations
◆
Software programs
Copyright laws guarantee a work’s creator the right to determine where and how the work is used. Similarly, trademark laws protect “marks,” such as company and product names and logos. If you download a copyrighted work or use a trademark without permission, you may be breaking the law.
Using Resources Ethically Avoid violating someone’s copyright or trademark by following these guidelines: ◆
Never copy text or graphics from a Web site without getting permission. If you use the material, cite the source.
◆
Only download music from legal services that compensate the songs’ creators.
◆
Never copy software programs to give away or sell. Distributing copied software is piracy, and is illegal.
◆
The Department of Justice’s Cybercrime Web site is full of Never use a company’s name or information about intellectual property. trademark to misrepresent the source of a product or site’s content.
1. Compare and Contrast Use a Venn diagram to examine the similarities and differences between copyright and trademarks. 210
Chapter 7
2. Research Use the Cybercrime Web site or other sources to identify real-world examples of copyright and trademark violations and their consequences.
Main Ideas ■ Two characteristics of most well-designed Web sites ■
■
■ ■ ■
are consistency and repetition. Using consistent visual elements and placing key items in the same place from page to page make a site user-friendly. Elements such as page headers, logos, and link bars should be repeated on the site’s main pages in order to make a site easier to navigate. A universal color scheme contributes to consistency across the site. A page header (banner) helps users identify where they are in a Web site. A template helps Web designers make a Web site consistent.
Main Ideas ■ Text properties include font type, size, style, ■ ■
■ ■ ■ ■
SECTION 7.2 Choosing Colors color scheme, 198
Web-safe color, 199
Main Ideas ■ A Web site’s color scheme is a set of selected colors ■
■ ■ ■
■ ■
Key Terms
that should create a sense of continuity. The color scheme of a Web site should be used consistently in elements such as title graphics, navigation buttons, and backgrounds. The color scheme should be compatible with the Web site’s purpose. You can use different colors to emphasize important content. Using Web-safe colors will ensure that the colors will look the same in a variety of browsers.
alignment, 204 serif, 206 sans serif, 206
alignment, and color. A font is a set of characters that have a specific shape and style. Do not underline text for emphasis on a Web page. Users might think that underlined words are hyperlinks. The most common type of text alignment on Web pages is left-aligned because it is easiest to read. Centered, right-aligned, and justified text are rarely used on Web pages. Limit the number of fonts you use on a Web page to no more than three. Best practice is to use standard fonts that are found on most computer systems. Most people find it easier to read sans serif font online. Text should be readable, consistently formatted, and attractive.
Left-aligned text is positioned flush with the left edge of the page. Text is usually left-aligned automatically when you enter it on a page.
Centered text is positioned in the middle of the page.
Right-aligned text is positioned flush with the page’s right edge.
Selecting Design and Color
Justified text is positioned so that all lines have the same left and right margins.
211
CHAPTER 7
Review and Assessment
AFTER YOU READ Using Creative Study Tools Choose a topic from the chapter and create some artwork or compose a brief song based on the content to help you remember it. Exchange your study tool with a friend. Does your friend’s study tool mean as much to you as the one you developed yourself? Evaluate how this study tool helps you remember the topic.
Reviewing Key Terms 1. Give three examples of ways in which repetition is commonly used in Web sites. 2. What is the difference between consistency and repetition in Web site design? 3. What is a page header? Describe how it is used in a Web site. 4. How many Web-safe colors were available and used in the past? 5. Why is it important to consider typography when designing a Web site? 6. What is a pixel? 7. Give examples of three standard fonts. 8. What is an example of a serif font?
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
14. Discuss the factors that influence the type of font a Web designer uses on a particular page. Factor
Choice of Font
(Example) Body Text
Factor
Factor
➠ ➠ ➠
(Example) Sans serif font
Font
Font
15. Identify the four types of alignment. Highlight the alignment that is used most often in Web design. Alignment
Alignment
Alignment
Alignment
Most Common Alignment
Understanding Main Ideas
Critical Thinking
9. Discuss ways in which the Language Club Web site exhibits the characteristics of consistency and repetition. 10. Identify the factors that you should consider when choosing a color scheme. 11. Explain the meaning of the term standard font. Discuss the main reason you should use standard fonts on a Web site. 12. List five ways in which text can be formatted. 13. Describe the difference between serif and sans serif fonts. Which type of font is considered most readable in printed text? Which type of font is considered most readable on a computer screen?
16. Make Predictions This chapter discusses why you should design your site to be readable. Do you think readability guidelines will change as people increasingly use online materials? Explain your answer. 17. Analyze Copy and complete the graphic organizer shown below on your own paper. Discuss two ways that the hardware and software used by Web site visitors can affect the decisions made by the Web designer.
212
Chapter 7
Hardware
Software
1. (example) Default fonts
1. Software element
2. Hardware element
2. Software element
Review and Assessment
CHAPTER 7
18. Draw Conclusions Which font would you use in a site about a children’s theater? Which font would you use in a site about mountain climbing in the Swiss Alps? Explain your answers. 19. Synthesize Select another communication device with which you are familiar, such as television or mobile phone. Are principles such as consistency and repetition applied in this method? How are the ways in which they are applied similar to Web design principles? How are they different? Copy the Venn diagram shown below and use it to illustrate your answer. Television
Mobile Phone
Reading & Writing Read the paragraph below and then answer the question.
Well-designed Web pages follow the principles of consistency and repetition. Consistency means maintaining a similarity among the parts of a whole. From its home page to its subpages, your Web site should have the same look throughout, from the graphics to the layout to the writing style. Repetition is the duplication of specific elements on all (or most) of a site’s pages. Repeating elements on your Web pages allows users to become familiar and comfortable with your site quickly. According to the paragraph, which of the following statements is true?
20. Analyze Which formatting features would you use to create titles? Which would you use to emphasize important passages of text? 21. Compare and Contrast Identify five valid reasons a Web site might use many colors and unusual fonts. Then give five reasons a site would use limited colors and traditional fonts. Think of examples for both types of sites.
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below.
22.
+
23.
+
24.
+
WebDesignDW.glencoe.com
+
+
When it comes to Web design, consistency and repetition are basically the same thing. Repetition means making sure the layout is the same on every page. Using a different logo on each page of a Web site is a sign of consistency. If you use an entirely new look on a subpage of your site, you are not using consistency.
WebDesignDW.glencoe.com Study with PowerTeach
Result
Go to the book Web site shown above. To review the main points in this chapter select e-Review>PowerTeach Outlines>Chapter 7.
Result
Online Self Check
Result
Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 7.
Selecting Design and Color
213
CHAPTER 7
Activities
1. MAKING CONNECTIONS Science—Demonstrate Color Differences The human eye views differences in color based on their wavelengths. Colors with a long wavelength, such as blue, indigo, and violet, appear to come forward when viewed on a computer screen. Colors with a shorter wave length, such as red and orange, appear to recede or go backward when viewed on a computer screen. Create a Web page that demonstrates this concept. Use the figure on the right as a model. Notice the color differences. Use red text on a blue background and blue text on a red background. Compare the printed screen to the Web page you create. Compare and contrast the two color combinations. Do the colors appear to have the same effect in print as they do online? Identify which combination is easier to read and explain why. Then, explain whether or not people who are color-blind would be able to read this combination of colors.
Making Connections
Making Connections
2. STANDARDS AT WORK Students use technology tools to enhance learning, increase productivity, and promote creativity. (NETS-S 3)
Analyze Text Styles and Color Create a Web page in Dreamweaver that contains a two-column table with four rows. Color the rows from top to bottom as follows: white, black, light blue, and dark red. Use hexadecimal values to create the colors. Key the following text in the top left cell: This is a Heading 1. This is a Heading 2. This is a Heading 3. This is a paragraph size 2. This is a paragraph size 3. Style each line of text as described by the text. For example, use the Heading 1 style for “This is a Heading 1.” Use a serif font for all lines of text. All text should be black. Copy the text into all the other rows in both columns. Change the text color so that the text is legible and easy to read. In the left column change all text to a serif font. In the right column change all text to a sans serif font. Compare the two columns. Write a paragraph that compares and contrasts the legibility of text in each cell of the table. 214
Chapter 7
CHAPTER 7
Activities
3. TEAMWORK SKILLS Create Web Content Your team is creating a “Web Design Tips and Resources” page for your school’s online handbook. You plan to include the following pages: Home Page, Dreamweaver Tips and Tricks, Graphic Resources, Reviews, and Equipment Information. 1. Write the content for the site home page, including a short descriptive paragraph about the site and a bulleted list with details of the site. 2. Research Web sites that could be used as sources of images. You will use this research to create links on the Graphic Resources page. Write the content for the Graphic Resources page, including a short paragraph for each link describing what the site contains, the type of images available, and terms of use (if any). 3. Write a brief content summary for each of the other pages in the site.
4. CHALLENGE YOURSELF Create a Color Scheme It is often easier to design a color scheme using colors in an existing object or image. In this activity, you will create a color scheme for a store specializing in holiday decorations. Use Dreamweaver to create a new page template. Add elements like those shown in the figure below. Then, locate a graphic that best represents the products and images of the store. The graphic you choose will be the starting point for your color scheme. Select Web-safe colors that coordinate with the graphic for each of the following page elements: ◆ Background ◆ Logo ◆ Bulleted list ◆ Buttons ◆ Heading 1 ◆ Heading 2 ◆ Visited links ◆ Unvisited links Update your template to reflect your new color scheme. Refine your choices as needed until you are satisfied with your overall color scheme. Selecting Design and Color
215
Projects
CHAPTER 7
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Format Text in Tables In this activity, you will add information to the Language Club’s About Us page. In your Language Club site, double-click in the content editable region. Change the Font color to #3300FF. Key: The Language Club is dedicated to expanding an awareness of world nationalities and cultural diversity. Format the text Verdana, Arial, Helvetica, sansserif font, size 18 pixels. Use Insert>Table to insert a table with 5 rows and 2 columns into the bodytext editable region. In the Table width box, key 100 and change pixels to percent. Key the text shown below into the table. Make the column headings (Office and Name) bold and add a header row named Language Club Officers. Proofread and save your work. LANGUAGE CLUB OFFICERS Office
Name
President
Camisha Roberts
Vice President
Hoang Pho
Secretary
Darryl Nevels
Treasurer
Bo Hernandez
2. Add a Contact Us Page In this activity, you will add information to the Language Club’s Contact Us page. Open your Contact Us page. In the content editable region, key the subhead How to Reach Us and below that key the subhead How to Become a Member. Format each subhead Verdana, Arial, Helvetica, sans-serif, Size 18, Font Color #3300FF. Below the first subhead, key your teacher’s name, the school’s address, and the school’s phone number. Press Enter after each item. Below the second subhead, key one or two sentences about who to contact to become a member. Format the text under each subhead Verdana, Arial, Helvetica, sans-serif, Size 16, Font color #3300FF. In the bodytext editable region, key and format the subhead Upcoming Meetings. Below the subhead, create a table with 4 rows and 3 columns, Table width 100%. Label the columns Meetings, Date, and Time. Bold the column heads and enter information about three upcoming meetings. Format the table text Size 16, Font color #3300FF. Proofread and save your work.
216
Chapter 7
CHAPTER 7
Projects
Read the projects described below. Then follow the directions to complete the project.
1. Add Text to a Web Page
In this activity, you will add text to the Language Club’s Events page and create a Fundraiser subpage. Use your Language_Main.dwt file to create a new fundraiser.html subpage in your pages folder. Insert the hdr_fundraiser.gif file from the DataFiles\Ch07\Images folder into the page’s header editable region. Save the file in your images folder. In the content editable region, copy and paste or key the content you created in You Try It Activity 6A, page 165. Change the font style and size of the text to be consistent with the Web site. Save and close the Fundraiser page. Open the Events page. Navigate to the DataFiles\Ch07\Text folder and select the file Events.doc. Open this file in a word processing program. Copy the text into the content editable region. Modify the text to be consistent with the site. In the first paragraph, select the word Fundraiser. Create a hyperlink that links to your fundraiser.html page, as shown below. Proofread and save your work.
2. Refine Your Personal Web Site
In Chapter 6 you created a template for a personal Web site. Now you will create a color scheme for the entire Web site, decide what fonts and styles you want to use, and create content for the site’s pages. Use fonts and colors to create a header for the home page and a smaller header for other pages. Add content and a photo to your home page layout. Add a caption such as More about who I am to the photo. Apply your selected color scheme and styles to the home page. Use your template to create the other pages for your site and save them in a pages folder. Add content to these pages and apply your color scheme and styles to each page, so the entire site has a consistent look.
Selecting Design and Color
217
Communication Skills: Write for a Web Audience Locate a short printed document such as a company flyer, brochure, or advertisement. Then, adapt the material for a Web page. You do not need to worry about copyright and trademark laws, unless you plan to publish the site on the Web. 1. Draw a sketch of the Web page. 2. Consider the Web audience, and rewrite the content if necessary. Use bulleted lists, headings, subheadings, or links to secondary pages if needed. 3. Use Dreamweaver to create or design your page. 4. Have classmates review your work. 5. If you agree with their assessment, revise your Web page. Good Web designers continually assess and review their sites, even after they are up and running.
Teamwork: Create a Web Site About Your Community Work with a team to create a Web site about one specific feature in your community, such as a favorite place to meet, a well-known site, or a famous resident. 1. As a team, decide on a purpose and target audience for the Web site. 2. Brainstorm content and sketch a diagram of how the home page and subpages should look. Determine the layout and color scheme. 3. Divide the following tasks among your team members: writing the text, finding graphics, finding sites for hyperlinks, and creating the page in Dreamweaver. 4. Present the site to the class.
218
Chapter 7
Create a Food Festival Web Page For this project, you will create a Web page for the Language Club’s International Food Festival. Choose one of the following topics for your page: A profile of one of the teachers or administrators in your school who will represent another country as a guest speaker. A restaurant in the area that will be donating food for one of the booths representing a particular nationality. A writing contest offered by the Language Club about Diversity and Cultural Awareness. When creating your Web page, follow these steps: 1. Determine your mission statement and audience.
Web Page Checklist
✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑
2. Determine how visitors will navigate to your page from the Web site’s home page. 3. Determine the elements to include on the page, including:
✓ ❑
◆ title
◆ navigation elements
✓ ❑
◆ text
◆ themes
✓ ❑
◆ visuals
◆ colors
✓ ❑
4. Locate any images you might need (remember copyright and fair use). 5. Create a sketch showing how the page will be laid out to include all the necessary elements.
✓ ❑ ✓ ❑
6. Use Dreamweaver to create or design your Web page. 7. Add hyperlinks to other pages on the Language Club Web site or to other relevant Web sites. 8. Use the checklist (shown on the right) to evaluate the items on your site. 9. Present your finished page to your teacher and peers for their review. Have them evaluate it based on the checklist. 10. Review your Web page based on the evaluations. 11. For your portfolio, include a screen shot or printed copy and an electronic copy of your finished product.
✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑
OVERALL APPEARANCE & CONTENT The subject of the Web page is clearly identified. The design is consistent and uncluttered. Most important elements are visible on the screen without scrolling. Images and links relate to the text on the page. ORGANIZING TEXT Content is organized logically. Text is broken into small sections. The fonts are easy to read. Key points are highlighted effectively. Headings and subheadings follow a logical hierarchy. Paragraphs or text blocks are separated by white space. LANGUAGE Sentences are short and simple. Bulleted or numbered lists are used effectively. Grammar, punctuation, and spelling are correct. Language is concise. Text uses effective style such as active voice, strong verbs and nouns, etc.
Selecting Design and Color
219
UNIT
3
Enhancing a Web Site
Go to this book’s Web site at WebDesignDW.glencoe.com. Click Unit Activities and select Unit 3 Evaluating Web Sites. Learn how to evaluate Web sites to make sure the information is reliable.
220
Think About It Hooking the Audience Books and magazines often use images and color to attract readers. These visual elements help make the publication interesting and exciting.
Design Evaluation Activity Look at some books or magazines. Jot down the visual elements that attract you and those that make you want to put the publication down. Then describe how some of the same design principles might apply to Web pages.
221
CHAPTER
8
Using Web Graphics
YOU WILL LEARN TO… Section 8.1 Identify types of graphics Identify and compare graphic formats Describe compression schemes Section 8.2 Identify image sources Use graphics ethically Insert an inline graphic Crop, resize, and resample a graphic Modify a graphic Section 8.3 Create an image map with hotspots Create a Web photo album Create a thumbnail
WHY IT MATTERS ................................................. Images can convey feelings and meaning in ways that words cannot. Have you ever seen a person in a painting or photo and imagined what he or she must have felt? Images are evocative—they make us react intensely and immediately. Using images effectively can help you create a powerful Web site. Think of a powerful image you have seen in the last few weeks. It could have been a piece of artwork, a newspaper photograph, or an image on television or in a movie. How did you react to that image? Write a paragraph about how that image made you feel. Describe the characteristics of the image that you think caused this emotional reaction.
222
Chapter 8
CHAPTER
8
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 8.1 Convert File Formats ................. 227 8.2 Create a Logo ............................. 235 8.3 Create a Web Photo Album ....... 242 You Try It Activities 8A Insert an Inline Graphic ............ 8B Crop, Resize, and Resample a Graphic ....................................... 8C Modify a Graphic........................ 8D Create an Image Map with Hotspots ..................................... 8E Create a Web Photo Album Using Fireworks ......................... Chapter Assessment Making Connections ......................... Standards at Work ............................ Teamwork Skills ................................ Challenge Yourself ............................
230 233 234 238
You Try It Skills Studio Add Graphics to a Web Page ............ 248 Use Hotspots...................................... 248 Web Design Projects Create a Virtual Field Trip Web Site ............................................. 249 Create an Art Styles Web Site .......... 249
IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects
ON THE WEB 240
246 246 247 247
Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Prior Knowledge Imagine some friends are talking about a new movie you have not seen. You soon lose interest. However, when they talk about your favorite movie, you become interested. Reading works much the same way. The more you know about a subject, the more you understand. That makes it easier to be an active, interested participant. Look over the “You Will Learn To” at the beginning of the chapter. Write down what you already know about each objective and what you want to find out by reading the chapter. As you read, find examples for both categories.
WebDesignDW.glencoe.com
Using Web Graphics
223
SECTION 8.1 WEB GRAPHIC TYPES AND FILE FORMATS Focus on Reading Read to Find Out The main purpose of this section is to explain the different types of Web graphics. Read to find out how Web designers determine which type of graphic to use in their Web pages.
Main Ideas
Key Terms
Reading Strategy
The two basic types of graphics are raster and vector. The two most common graphic file formats are GIF and JPEG. Compression schemes reduce an image’s download time but also diminish its quality.
Compare and contrast the characteristics of the GIF and JPEG file formats. Use a Venn diagram like the one below (also available online).
GIF File
JPEG File
Graphics are an important part of Web pages. Creating a good graphic presentation greatly enhances the design of a site. Web designers have two major concerns when they use graphics on a Web site. The first concern is how good the image will look on the screen. The second concern is how quickly the image will download. In this section, you will learn how Web designers must constantly balance these two concerns when choosing graphic file formats.
You Should Know Software programs can automatically calculate the equations used to produce a vector graphic.
Types of Graphics What are the two basic types of graphics?
How a graphic is created determines its type. There are two basic types of graphics: raster graphics and vector graphics. ◆ A raster graphic is made up of pixels. Pixels are tiny squares of color arranged on a rectangular grid like tiles in a mosaic. The human eye reads collections of pixels as a seamless image. ◆ A vector graphic is composed of simple lines defined by mathematical equations. Logos, text banners, and 3D Web buttons are often vector graphics. Summarize What is the difference between a raster and a vector graphic?
224
Chapter 8
WebDesignDW.glencoe.com
Graphic File Formats What is the difference between a GIF file and a JPEG file?
Once you create a graphic, you must save it in a graphic file format. The two most popular file formats used in Web design are: ◆ Graphic Interchange Format (GIF) ◆ Joint Photographic Experts Group (JPEG) format The fact that most Web browsers only display images saved in these file formats is what makes them popular. However, some Web designers also save graphics with file formats such as: ◆ bitmap (BMP) ◆ Portable Network Graphics (PNG) A comparison of the four different graphic file formats is shown in Table 8.1.
Table 8.1
Graphic File Formats File Format
File Extension Advantages
Disadvantages
GIF
.gif
• Small file size downloads quickly • Good for line drawings and simple graphics • Used to create transparent GIFs and images with animation effects
• Only supports a maximum of 256 colors • Limited number of colors makes it not appropriate for saving photographs
JPEG
.jpg or .jpeg
• Supports millions of colors • Color support makes it good for saving photographs
• Because files have a higher quality, they are often large and download slowly
BMP
.bmp
• Supports millions of colors
• Very large files download slowly • Generally not used for Web pages
PNG
.png
• Supports more colors than GIF files but still downloads quickly • Features better support of transparency than GIF files
• Not supported by many browsers (but may become increasingly popular as more new browsers accept format)
The format in which you choose to save a graphic affects both the graphic’s quality and download time. Which two formats download quickly?
You Should Know GIF is pronounced with a hard “g” as in the word “graphic”. JPEG is pronounced “jay-peg.” Both formats are based on pixels, so most images on the Web are raster graphics. If you save a vector graphic as a GIF or JPEG file, it also gets converted into pixels.
Evaluate Which graphic file format is better for saving photographs?
Using Web Graphics
225
Compression Schemes and Download Times Why do Web designers compress image files?
The more pixels an image contains, the higher its resolution and quality. However, an image that contains more pixels also has a larger file size. As an image’s file size increases, so does its download time. Download time is usually measured in Kilobytes per second (Kbps). Web designers usually compress image files so they download more quickly in a user’s browser. Compression is a process that reduces an image’s file size by removing some color information. However, while compression makes files smaller, it can also reduce an image’s quality.
Lossless and Lossy Compression Schemes Graphics are compressed using either lossless or lossy compression schemes. ◆ A lossless compression scheme means that a graphic file loses no data when it is compressed. However, compressing a file using lossless compression does not gain you any significant download time. GIF (and PNG) files automatically use lossless compression. ◆ A lossy compression scheme removes data from a graphic file so the file is significantly smaller and downloads more quickly in a Web browser. However, decompressing the image does not restore the data. For this reason, the restored image has a reduced image quality on the screen. JPEG files use lossy compression.
Adjusting Files and Calculating Download Times To help you manage download times, Dreamweaver displays the approximate modem download time on the status bar, in the lower-right corner of a document’s window (see Figure 8.1). You can use this estimate to determine how adding images, such as photographs, affects your page download speed.
Figure 8.1 The status bar for a Web page indicates 57K/9 sec which means the page will require 9 seconds to download on a 56Kbps modem (the default connection speed setting specified in Dreamweaver). What does Kbps stand for?
226
Chapter 8
Download time
Low-Bandwidth Alternatives To reduce download times, you can also use an image editing program to create two versions of an image, one in full color and the other with a reduced color palette. The Web browser can then display the reduced-color image as a placeholder until the full-color version downloads.
Converting Graphic Formats Many graphic applications allow you to open a graphic and save it in another format. For example, you can open a JPEG file in Photoshop and then save the image as a GIF file. Use this method if you want to create an animation, since only GIF files can be animated. When you convert a file from one format to another, the converted image may not look like the original. For example, if you convert a JPEG photograph to a GIF, the resulting image will not have as many colors and may look distinctly different, as shown in Figure 8.2.
Figure 8.2 The left photo is a full-color JPEG image, while the right image shows the same photo saved in GIF format with 256 colors. When is it better to use a GIF format?
Contrast What is the difference between lossless and lossy compression?
Section 8.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• There are two basic types of graphics: raster and vector.
3. Evaluate Why should you consider an image’s download time when creating Web pages?
• The GIF graphic file format works best for line art and simple drawings. • The JPEG graphic file format works best for photographs. • Compression schemes reduce an image’s download time but also diminish its quality.
2. Compare and Contrast raster graphics and vector graphics.
4. Make Decisions You are creating a Web site for a new art gallery. What issues will you need to consider when choosing graphic file formats for this site?
Apply It! Convert File Formats Open a graphics application, such as Macromedia Fireworks. Open a JPEG image such as bike.jpg. Save the image as a GIF file. Compare the quality of the two images and the sizes of the two files.
Using Web Graphics
227
SECTION 8.2 OBTAINING AND MODIFYING GRAPHICS Focus on Reading Read to Find Out The main purpose of this section is to explain how to obtain and modify graphics. As you read, stop and make sure you understand the key terms cropping, resizing, and resampling. Read to find out how and why Web designers make changes to graphics.
Main Ideas
Key Terms
Reading Strategy
You can insert pre-made graphics or use tools to create images for your Web pages. Always check the terms of use before downloading pre-made graphics. You must use image editing programs to make substantial changes to graphics.
dots per inch (dpi) image editing program draw program inline graphic cropping resizing aspect ratio resampling
Identify five ways in which you can obtain or create graphics. Use a web diagram like the one below (also available online).
Ways to Obtain or Create Graphics
Images on Web sites come from many sources. In this section, you will learn about tools and resources you can use to create and modify graphics.
Obtaining Graphics What are the two main ways of acquiring graphics?
Activity 8.1 Locate Graphics Online Get more ideas for locating images for your Web pages by visiting WebDesignDW.glencoe.com.
Troubleshooting Some sites spell “Clip Art” as one word: “Clipart.” Try both variations when using a search tool to look for Clip Art on the Web.
228
Chapter 8
There are two main ways that you can acquire the graphics you need for your Web pages. You can obtain premade graphics and insert them directly into your Web pages. Or, you can use tools to create your own graphic files.
Using Premade Graphics One of the easiest ways to add images to your Web pages is to use premade graphics. Premade graphics are readily available both online and from other sources.
Locating Graphics Online The Web is an excellent source of premade graphics. You can use a search engine to locate the exact image you want. Most sites organize their images by categories such as nature, travel, sports, and work. When you find an image that you want, right-click it and select Save Picture As from the menu to save the image to your hard drive. Using Clip Art Many software applications include large image collections that you can insert on your pages. You can also purchase commercial image packages. These packages provide both general image collections and collections built around specific themes or events. Clip collections may include illustrations, photos, sound effects, and short video clips. WebDesignDW.glencoe.com
Creating Graphic Files To use graphics from print sources, such as photographs or magazines, you must first use an input device to convert them into digital images. You can also use software applications to create digital images.
Using Input Devices A scanner is an example of an input device that converts a printed image into a digital format that can be used, for instance, on a Web page (see Figure 8.3). A scanner converts an image into a grid of dots, or pixels. The size of the grid a scanner can create defines its resolution, which is stated in dots per inch or dpi. A scanner with a 600 dpi resolution will give you 600 pixels for every linear inch of the original image. While input devices can capture details in high-resolution, most monitors generally display images at a resolution of 72 dpi or 96 dpi. With a digital camera, you can take a picture and then download the image to your computer. Digital camera prices and capabilities vary widely. A resolution of 640 x 480 pixels is acceptable for photographs for use on the Web.
Figure 8.3 Flatbed scanners enable you to convert a printed image to digital format. Why do you need a scanner if you want to insert a photograph into a Web page?
Using Software Applications Web designers use different software applications to create raster graphics and vector graphics for their sites. ◆ Raster graphics are created with image editing programs, or graphic applications, such as Adobe® Photoshop® , Macromedia® Fireworks® , Mac® iPhoto® , and Corel® Paint Shop™ Pro® . ◆ Vector graphics are created with draw programs, such as Adobe Illustrator, PhotoDraw, and Macromedia Freehand. Graphics can also be created in word processing applications such as Microsoft Word. Once created, the graphic must be copied into a draw or paint program and saved as a GIF file before insertion into a Web page.
Using Graphics Ethically Whether you are using premade images, or converting existing images into graphic files, you need to make sure you are using graphics ethically. Unless you have specific permission to use someone else’s images, downloading graphics violates copyright laws. These laws apply whether or not you see a copyright statement on the Web site. You also need the owner’s consent to use images with a registered trademark. Most Web sites that provide graphics also include instructions for legally using their images. Some sites may indicate that specific images are “royalty free.” This, however, does not mean that you are free to use the images in any way you want. Follow the site’s rules carefully and identify your source. Explain How can you make sure you are using a graphic ethically?
Troubleshooting If you are unsure about how you can use an image, send the site’s owners an e-mail. Ask for clarification of the policy or for permission to use the selected image.
Using Web Graphics
229
Inserting Graphics into Dreamweaver What is an inline graphic? You Should Know Sometimes a broken image icon will appear on a Web page. This icon indicates that the image is missing or damaged and cannot be displayed.
When you insert a graphic file into a Web page, the actual image is not inserted into the page’s HTML code. If you look at the page’s HTML code, you will see that only the picture’s file name appears. An tag tells the browser where to locate the stored file. The browser must request the graphic file and insert it onto the page. This type of picture is called an inline graphic. In this unit, you will create the Centerville Community Center Fundraiser Web site, which will promote the annual Bike and Hike event. In the following activity, you will add a photograph to the Web site’s Scrapbook page.
ACTIVITY 8A Insert an Inline Graphic 1 Start Dreamweaver. Browse to the DataFiles\Ch08\WebExamples folder. Use the Site>Manage Sites option to define the example site. Name it Bike and Hike Web site and save it in your Web site folder. If necessary, review the steps in You Try It activity 1B in Chapter 1. Open the Scrapbook page (scrapbook.html) in Design view. 2 Position the insertion point just after the View Video Page button and press Enter once. 3 If necessary, press Ctrl + F2 to open the Insert toolbar. On the Insert toolbar, in Common view, click the Images drop-down arrow and select Image. In the Select Image Source dialog box, browse to the DataFiles\Ch08\Images folder. Double-click bike.jpg and save it in your site’s images folder. 4 With the image selected, in the Properties inspector, in the Alt text box, key: Bike Photo. Select the photo, and switch to Split view. Notice how the image is inserted with the tag (see Figure 8.4). Return to Design view. Save your file.
Figure 8.4 An tag is used to insert the photograph into the Web page.
Image tag
Identify What tag does Dreamweaver use to insert graphic files into a Web page?
230
Chapter 8
Modifying Graphics How can I use Dreamweaver to modify graphics?
After you have obtained or created an image, you will probably have to modify the graphic to make it work on your Web page. You can edit images using either image editing software or basic Dreamweaver tools.
Image Editing Programs
Figure 8.5
To make major changes to images, use a graphic or image editing program. Popular image editing programs include Adobe® Photoshop® , Macromedia® Fireworks® , Corel® Paint Shop™ Pro® , and Mac® iPhoto® . The more sophisticated and relatively expensive applications, such as Photoshop, allow you to modify images in a variety of ways. Special tools, called filters, can change an image’s appearance, such as making it look like an oil painting. Figure 8.5 shows some examples of filters.
Original
Paint Daubs
Image editing programs, such as Adobe® Photoshop®, allow you to manipulate an image in different ways. When might these filters be useful?
Twirl
Using Fireworks to Modify Images in Dreamweaver Macromedia Fireworks is an image editing program that is used to create and modify graphics. Select Fireworks tools are incorporated into Dreamweaver. You can, for example, crop, resize, and resample an image in Dreamweaver. These tools behave the same way in Dreamweaver as they do in Fireworks, and they allow Dreamweaver users to make minor edits to images without needing a separate program.
Cropping and Resizing Graphics When you insert an image into Dreamweaver, the picture appears at the exact pixel dimensions in which it was originally stored. You will usually need to either crop or resize the image to make it the size you want. ◆ Cropping an image involves removing portions of the image that you do not want to use. This process can significantly reduce the size of a file. ◆ Resizing an image refers to changing the size that the image appears to be on the screen. You can resize the image by selecting it and then dragging its sizing handles to the desired size. Sizing handles are located on the right, bottom, and lower-right corner of the selection box. Dragging a corner handle while pressing the Shift key keeps the image’s aspect ratio (the relationship between the image’s height and width) constant and in proportion.
Navigation You can customize your own Dreamweaver toolbar. With your teacher’s permission, right-click the Insert toolbar and select Customize Favorites. Click and choose the commands you want. Then, display your Favorites toolbar by selecting Favorites on the Insert toolbar.
Using Web Graphics
231
Figure 8.6 The Properties inspector allows you to modify an image in a variety of ways. What three ways can you use to change an image’s size?
Width
Height
Crop
Resample
Sharpen
Brightness/Contrast
You also can use the Properties inspector’s width and height box to resize an image (see Figure 8.6). Specify the image’s width and height in pixels to increase or decrease the image’s size. Sometimes the numeric values in the width or height box are bold and sometimes they are normal. The bold values indicate the width or height is larger or smaller than the saved size of the image. To quickly restore the image to its original width or height, click the W or H to the left of the numeric value boxes. When you are resizing an image, it is best to use a dedicated image editor rather than rely on Dreamweaver. If you resize an image in Dreamweaver, the quality will be lower because the file size remains the same as the original. Your image may look distorted.
Resampling Graphics Resizing a graphic changes its appearance but does not change the actual number of pixels in the graphic’s file. Resampling changes the number of pixels in a graphic’s file to match the new screen area occupied by the image’s altered size. For example, if you enlarge a 100 x 100 pixel image so that it occupies a 200 pixel square area, resampling adjusts the image so that it is 200 pixels wide and 200 pixels high. Caution: When you resize an image, you do not change the image’s file. While the image may look smaller on screen, its file size has not changed. Resampling makes an image’s file smaller so that it downloads more quickly. However, resampling also permanently changes your graphic file by changing the number of pixels in that file. Many of the actions you perform in this section’s activities can permanently alter your graphic file. For example, to undo changes, you can use: ◆ Edit>Undo ◆ click the Restore button, or ◆ press Ctrl + Z. However, once a change is saved, it cannot be undone. It is a good idea to keep copies of all your graphic files in case you perform an action that you cannot undo and need to return to the original file. 232
Chapter 8
In the following activity, you will use the Properties inspector to edit the photo you added to the Scrapbook page.
ACTIVITY 8B Crop, Resize, and Resample a Graphic 1 In the Bike and Hike Web site, open the Scrapbook page in Design view. Select the photograph. 2 In the Properties inspector, click the Crop button. A warning box appears telling you that this action will permanently alter your graphic file. In the warning box, with your teacher’s permission, select Don’t show me this message again and click OK. A dashed outline box with eight square handles appears over the image. 3 Click and drag the handles to adjust the crop marks until they look similar to Figure 8.7. Note that a double arrow appears when the insertion point is directly over a handle. 4 Click the Crop button a second time to finalize cropping the image. Your screen should look similar to Figure 8.8.
Figure 8.7 Adjust the crop marks to indicate the areas you want to remove from the image.
Handles
Crop lines
Figure 8.8 Crop marks are finalized.
Shortcut Instead of clicking the Crop button a second time, you can simply double-click the image to complete the crop.
Using Web Graphics
233
5 Make sure the image is selected. Click and drag the handle in the image’s lower-right corner. As you drag the handle, hold down the Shift key to maintain the image’s proportions. Resize the image so, in the Properties inspector, its width (W) is 370. 6 In the Properties inspector, click the Resample button once. Note that you must resize an image before the Resample button becomes active. 7 Make sure the image is selected. In the Properties inspector, click Align Center. Your screen should look similar to Figure 8.9. Save and close your file.
Figure 8.9 The photograph has been cropped, resized, resampled, and center aligned.
Adjusting Brightness, Contrast, and Pixel Definition In the following activity, you will use the Properties inspector to finetune and format an image. You can use the Brightness and Contrast button to increase and decrease the brightness and contrast of the selected image. and the Sharpen button to increase the sharpness, or pixel definition, of the selected image.
ACTIVITY 8C Modify a Graphic 1 In the Bike and Hike Web site, open the Scrapbook page in Design view. Select the photograph. On the Properties inspector, click the Brightness and Contrast button. 2 In the Brightness/Contrast dialog box, make sure the Preview box is checked. Under Brightness, key: -10. Under Contrast, key: 10. Your dialog box should look like Figure 8.10. Click OK.
Figure 8.10 You can key values into the dialog box, or move the slider to adjust an image’s brightness and contrast. 234
Chapter 8
3 In the Properties inspector, click the Sharpen button. In the Sharpen dialog box, key: 3. 4 Click OK. Your screen should look similar to Figure 8.11. Save the file.
Figure 8.11 The photograph with its brightness, contrast, and pixel definition adjusted.
Summarize What four buttons in the Properties inspector can you use to edit and format an image?
Section 8.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• You can use the Web to locate pre-made graphics, such as Clip Art.
1. Define dots per inch (dpi), image editing program, draw program, inline graphic, cropping, resizing, aspect ratio, resampling.
4. Compare and Contrast Discuss the difference between cropping a photo and resizing a photo.
• Always make certain you have permission to use a pre-made graphic before placing it on your Web page. • You can crop an image to remove areas that you do not want to use.
2. Describe how you can resize an image in Dreamweaver. 3. Explain the purpose of resampling an image.
5. Make Decisions You are designing a Web site for your community theater. Make a list of how you might use each of the following: a digital camera, a scanner, Clip Art, an image editing program.
Apply It! Create a Logo Select a small business in your community. Use a software application such as Microsoft Word or Adobe Photoshop to create a new logo for this business. If possible, use an image editing program to save the file for use on a Web page.
Using Web Graphics
235
Envisioning the Internet’s Future
W
hile Tim Berners-Lee is credited with creating the Web, no one entity is responsible for running it. The Web “runs itself” using standardized technologies, protocols, and rules. But who creates these standards?
What is the W3C? The World Wide Web Consortium (W3C) is a global organization started by Tim Berners-Lee to oversee the development of new technologies and standards that keep the Web functional and open to everyone. So far, the W3C has published more than 50 specifications for Web technologies, including Hypertext Markup Language (HTML), Cascading Style Sheets The World Wide Web Consortium strives to keep the Web vibrant (CSS), and Extensible Markup and open to everyone. Language (XML). Developers rely on these specifications to create Web-based or Web-enabled products that are fully compatible with one another.
Shaping the Web’s Future The W3C is also focusing on a number of emerging technologies that will change the way the Web works. ◆
The semantic Web will use deductive tools that give search agents artificial “reasoning” abilities, which will make it even easier for users to find information.
◆
The talking Web will allow people to navigate the Web using voice commands by enabling voice input and audio output.
◆
The multimodal Web will accept input from every type of source including keyboards, mice, voice, and even gestures such as eye movements.
1. Research Technology Research either the 2. Give Examples Find out how to become a member semantic, talking, or multimodal Web. How is that of the W3C. What would you have to do once you technology being developed, how will it be used on become a member? the Web, and what is its importance? 236
Chapter 8
SECTION 8.3 IMAGE MAPS AND WEB ALBUMS Focus on Reading Read to Find Out Graphics can be used to create links to external or internal Web pages. Read to find out how you can use Dreamweaver and other applications to add advanced graphic features to your Web site.
Main Ideas
Key Terms
Reading Strategy
Image maps let users click hotspots that link to related pages or information. A Web photo album is a collection of images. Thumbnails are small images that link to full-size versions of the same image.
image map hotspot photo album thumbnail
Identify the four steps involved in creating a hot spot. Use a flow chart like the one below (also available online).
➠
➠
➠
Not only can graphics help make Web pages more attractive and interesting, they can also perform various functions, such as linking to external and internal pages or allowing users to click a small version of an image to open a larger version of the same image. In this section, you will learn how to add these advanced features to a Web site.
Image Maps What is the relationship between an image map and a hotspot?
An image map is a graphic with clickable areas called hotspots. A hotspot provides a graphic link to related pages or other areas on the current page. For example, an image map of the United States might contain fifty hotspots, one for each state. If you clicked on Texas, you would be taken to a page containing additional information on that state. To create an image map in Dreamweaver, you draw outlines to define the clickable hotspots. Hotspots can be rectangular, circular, or polygonal, as described in Table 8.2.
Table 8.2 Dreamweaver contains three tools that you can use to create hotspots. Why do you need hotspots that are different shapes?
Hotspot Tools Properties Inspector Button
Name
Description
Rectangular Hotspot Tool
Drag the mouse pointer over the portion of the image that you want to be a rectangular hotspot.
Oval Hotspot Tool
Drag the mouse pointer over the portion of the image that you want to be a circular hotspot.
Polygon Hotspot Tool
Drag the mouse pointer around the edges of the shape you want and click the starting point for a polygon hotspot.
WebDesignDW.glencoe.com
Using Web Graphics
237
The Bike and Hike’s home page will contain an image map. When users click an image, they will be taken to different pages in the Web site. In the following activity, you will insert the graphic that will be used for the image map and assign hotspots to it.
ACTIVITY 8D Create an Image Map with Hotspots 1 In the Bike and Hike Web site, open the home page (index.html) in Design view. Position the insertion point at the end of the paragraph, and press Enter once. 2 On the Insert toolbar, click Image. Browse to the DataFiles\Ch08\ Images folder. Double-click the image_map.gif file. Save the file in the Web site’s images folder. Make sure the image is inserted correctly on the page (the word Register should be at the bottom of the image). Select the image and center it. 3 On the Properties inspector, in the Map box, key: home. This will assign a name to the image map.
Figure 8.12
4 In the Properties inspector, click the Polygon Hotspot Tool. Click in the upper-left corner of the image, and click around the Contact Us wedge. Be sure to cover as much of the logo as possible without overlapping any of the wedges for the other four pages (see Figure 8.12).
Use the Polygon Hotspot Tool to create a hotspot on the image.
5 In the Properties inspector, in the Link box, key: pages/contact.html. If you see the number symbol (#) in the Link box, be sure to delete this before you key the text. Note that the Link box only becomes active after the hotspot is created. In the Alt text box, key: Contact Us Page.
Area turns blue to indicate a hotspot is present
6 Repeat Steps 4 and 5 for the remaining logos. Use the link and alternate text information from Table 8.3.
Map box Polygon Hotspot Tool
Table 8.3
Hotspot Information
Use the information in the table to create four more hotspots.
238
Chapter 8
Logo
Link
Alternate Text
Donate
pages/donate.html
Donate Page
Register
pages/register.html
Register Page
Scrapbook
pages/scrapbook.html
Scrapbook Page
Sponsors
pages/sponsors.html
Sponsor Page
7 When complete, save your changes. Preview the page in a browser. When you click the Scrapbook hotspot, you should be sent to the Scrapbook page, as shown in Figure 8.13.
Figure 8.13 Use hotspots to create links between pages.
Activity 8.2 Explore Image Editing Programs Find out more about newer image editing applications and the advanced features they provide at WebDesignDW. glencoe.com. Click the Scrapbook hotspot and the Scrapbook page opens.
Explain What happens when you click a hotspot?
WebDesignDW.glencoe.com
Using Web Graphics
239
Troubleshooting To get more information about how this process works, press F1 to access Dreamweaver help. Key Create Web Photo Album or Fireworks into the Search For box in the Help task pane.
Creating a Web Photo Album Using Fireworks How can other software applications add advanced Web features?
A photo album (also referred to as a photo gallery) is a collection of photographs, typically with a brief description of each image. A combination of Dreamweaver and Fireworks makes it easy to create such a photo album. When you create a photo album, Dreamweaver creates a thumbnail of each image automatically. A thumbnail is a small image that links to a larger version of the same image. Thumbnails enable users to decide whether they want to view a larger version of the image (which typically takes extra time to download). In the following activity, you will create a photo album that showcases some of the scenery from last year’s Bike and Hike fundraiser.
ACTIVITY 8E Create a Web Photo Album Using Fireworks 1 In your Bike and Hike Web site, open the Scrapbook page in Design view. Choose Commands>Create Web Photo Album. In the Create Web Photo Album dialog box, in the Photo album title box, key: Bike and Hike Photos.
Figure 8.14 Use the Create Web Photo Album dialog box to specify the characteristics of your Web album.
2 To the right of the Source images folder box, click the Browse button. Browse to the DataFiles\Ch08\Images folder. Double-click the Photos folder, and click Select. 3 To the right of the Destination folder box, click the Browse button. Double-click the Bike and Hike Web site’s images folder, and click Select. 4 Click the Thumbnail size drop-down arrow and select 72 x 72. In the Columns box, key 3. Do not change the other options. Your dialog box should look similar to Figure 8.14. Click OK. 5 Macromedia Fireworks opens and processes the images. If you receive an error message, Fireworks may not be installed on your computer. Talk to your teacher if you receive an error message.
240
Chapter 8
6 When Fireworks completes the image processing, close Fireworks. A message saying Album created appears. Click OK. Your screen should look like Figure 8.15.
Figure 8.15 The index page of the album is displayed after Fireworks processes the photos.
7 In Dreamweaver, open the scrapbook.html page. Click the View Web Photo Album button. In the Properties inspector, to the right of the Link box, click the folder icon. In the Select File dialog box, double-click the images folder. In the folder, select the index.htm file and click OK. (Caution: Do NOT select the index.html page). 8 Open the index.htm file. Click on the first thumbnail, in the Properties inspector in the Alt box, key: Cactus Flowers. Add descriptive text to the Alt box for all of the other images. 9 Save your work. Preview the Scrapbook page in a browser by clicking the View Web Photo Album button. Your screen should look similar to Figure 8.16.
Figure 8.16 The Web Photo Album’s index as viewed in a browser.
Using Web Graphics
241
10 Each photo in this index is a thumbnail of a larger photo. Click the photo_landscape.jpg thumbnail to view the larger photo, as shown in Figure 8.17. Close the browser. Save and close all open documents in Dreamweaver.
Figure 8.17 Click the thumbnail to open the larger photo in the Web Photo Album.
In this chapter, you added graphics to the Bike and Hike Web site. These graphics enhanced your pages and provided different ways for users to view the site’s content. In the next chapter, you will further enhance the site by adding multimedia elements to its pages. Identify What is a thumbnail?
Section 8.3 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• You can use graphics to link to either external or internal Web pages.
1. Define image map, hotspot, photo album, thumbnail.
4. Evaluate Why might a Web designer decide to use an image map as opposed to a navigation button or a text link?
• An image map has areas called hotspots that, when clicked, take the user to another location. • When using Dreamweaver, you need to use other software applications such as Macromedia Fireworks to add certain advanced features to a Web page.
242
Chapter 8
2. Compare and Contrast How is a hotspot similar to and different from a thumbnail? 3. Identify What special software application do you need to create a photo album in Dreamweaver?
5. Describe two situations in which thumbnails would be particularly useful on a Web page.
Apply It! Create a Web Photo Album Obtain at least six digital images of family members or friends. Create a Web page that displays these pictures in a photo gallery. Include one interesting fact about each person pictured.
CHAPTER 8
Reading Review
SECTION 8.1 Web Graphic Types and File Formats Key Terms raster graphic, 224 vector graphic, 224 Graphic Interchange Format (GIF), 225 Joint Photographic Experts Group (JPEG), 225
■ There are two basic types of graphics: raster and
■ ■ ■
image map, 237 hotspot, 237 photo album, 240 thumbnail, 240
Main Ideas ■ You can use graphics to link to either external or
Main Ideas ■
SECTION 8.3 Image Maps and Web Albums
vector. Raster graphics are more common on the Web than vector graphics. The GIF graphic file format works best for line art and simple drawings. The JPEG graphic file format works best for photographs. Compression schemes reduce an image’s download time but also diminish its quality.
■ ■ ■
■ ■
internal Web pages. An image map has areas called hotspots that, when clicked, take the user to another location. Hotspots can be rectangular, circular, or polygonal. When using Dreamweaver, you need to use other software applications such as Macromedia Fireworks to add certain advanced features to a Web page. A photo album consists of a collection of photos. A thumbnail is a smaller version of a larger image.
SECTION 8.2 Obtaining and Modifying Graphics Key Terms dots per inch (dpi), 229 image editing program, 229 draw program, 229 inline graphic, 230
Main Ideas ■ You can use the Web to locate premade graphics,
such as Clip Art. ■ Always make certain you have permission to use a premade graphic before placing it on your Web page. ■ You can crop an image to remove areas that you do not want to use.
Using Web Graphics
243
CHAPTER 8
Review and Assessment
AFTER YOU READ Add to Your Knowledge Look over the Main Ideas listed in the Reading Review on page 243. Which main ideas did you know before you read the chapter? Which did you learn more about as you read? What did you learn that is not listed? Write down any topics that you want to know more about but were not covered in the chapter. Use these as follow-up questions for your teacher or a class discussion.
Reviewing Key Terms 1. What is the difference between a raster graphic and a vector graphic? 2. Which of the following is NOT a graphic file type: PAINT, GIF, JPEG, BMP? 3. What does the abbreviation “dpi” stand for? 4. Identify two input devices that you can use to create images for your Web pages. 5. Rewrite the following sentence to make it true: Image maps contain fonts that you click to go to related topics. 6. How do you resize a graphic in Dreamweaver?
Understanding Main Ideas 7. Explain how you can determine the format of a graphic file by looking at the file’s name. 8. List five ways you can obtain images to use on your Web pages. 9. Identify two programs used to create raster graphics and two programs used to create vector graphics. 10. Explain why it is important to maintain a picture’s aspect ratio when you are resizing it. 11. Summarize how resizing an image differs from resampling it. 12. Describe an advantage of an image map over text-based links.
244
Chapter 8
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
13. Compare and contrast resizing and cropping.
Resizing
Cropping
14. Summarize the similarities and differences of GIF, JPG, and PNG files. GIF
JPG
PNG
Critical Thinking 15. Evaluate Ethics A friend is creating a Web site to buy and sell trading cards. While making the site, she copies graphics from other Web sites and inserts them on her Web pages. What would you tell your friend to explain why her actions violate copyright laws? 16. Make Decisions You have been hired to create a Web site for a local business. The site will include photographs. Which compression scheme will you use to save the graphic files? Visitors to the site will use high speed Internet connections, so download time is not an issue. What kind of compression scheme will you use? Explain your answer. 17. Understand Graphic File Formats You have been asked to create an animation for the Bike and Hike Web site. This animation will be based on a cartoon drawing of a bicycle, which is in the JPEG format. What do you have to do to the file and why?
Review and Assessment
CHAPTER 8
18. Troubleshoot Graphics You are testing a site and realize that when you click a graphic link you see a rectangular framed outline but no picture. What is wrong with the link and what can you do to correct it? 19. Explain a Process Your uncle has sent you a photograph that he wants you to scan and then post to your family’s Reunion Web site. Use a graphic like the one below to outline the process for converting the photograph to a digital format. In the final step, identify the type of graphic file format you would use.
➠
➠
➠
20. Make Decisions You have created the Bike and Hike graphics in Macromedia Fireworks. Would you save the graphics in JPEG or GIF format? Explain your answer. 21. Analyze Graphics Summarize the relationship between a graphic’s quality, its file size, and its download time. Explain how this relationship might influence you when choosing graphics to include on a Web page.
Tables A comparison of the graphic file formats is shown below. Graphic File Formats Format
Advantages
Disadvantages
• • •
Small file size Quick download Good for simple graphics
• •
Not appropriate for saving photos Only supports 256 colors
JPEG
• •
Good for photos Supports millions of colors
• •
Large file size Slow download
BMP
•
Supports millions of colors
• •
Large file size Slow download
PNG
•
Supports more colors than GIF Quick download
•
Not supported by many browsers
GIF
•
According to the table, which of the following statements is true? PNG files are similar to JPEG files because they support millions of colors. The GIF format is a good choice for photos. The BMP format supports millions of colors, so it is great for Web graphics. For speed of file download, the PNG format is superior to the BMP format.
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below.
WebDesignDW.glencoe.com
22.
+
Result
Study with PowerTeach
23.
+ [Z]
Result
To review the main points in this chapter select e-Review>PowerTeach Outlines>Chapter 8.
24.
Result
Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 8.
WebDesignDW.glencoe.com
Using Web Graphics
245
CHAPTER 8
Activities
1. MAKING CONNECTIONS Math—Compare Download Times Locate five graphics. At least one should be a GIF (e.g., Clip Art), and at least one should be a JPEG (e.g., digital photograph). Insert each graphic into a blank Dreamweaver page (one image per page). Create a line graph. Place each graphic’s type and file size (if known) on the x-axis and the download time of its page on the y-axis. Analyze your findings. Then, resave one of your JPEG files as a GIF file, and insert it into a new blank page. Compare the quality and download time of the GIF file to the original JPEG file. Finally, save one of your five graphic files as either a BMP or a PNG file. Compare the quality and download time of that file compared to the other four files. Analyze your findings. Use a pyramid table like the one to the right to report your findings for the slowest to the fastest (bottom to top) downloading file based on your research.
2. STANDARDS AT WORK Students practice responsible use of technology systems, information, and software. (NETS-S 2)
Copyrights and Permissions for Use A copyright is the exclusive legal right to reproduce, publish, and sell literary or artistic works. The creator of the work owns the copyright regardless of whether it is filed with the government. Visit two sites that contain Clip Art or other visual images. Locate the page that discusses the site’s terms of use or licensing agreements. Report the information you find using a table. Based on your findings, summarize how each site’s images may be used in the following types of media: 1. 2. 3. 4.
A report for one of your classes A Web site for a non-profit organization A brochure for a new business in your community A Web site for your school
List the projects that would need permission from the source. Describe how you would obtain permission to use the work. 246
Chapter 8
Fastest download time
Slowest download time
CHAPTER 8
Activities
3. TEAMWORK SKILLS Create Images and a Web Site As a team, select a topic for a Web site. For example, you could select a Web site that features highlights from a class trip or event, or a Photo Club Web site. After you have selected your topic, plan and design a site that has: ◆ A home page ◆ Two additional pages Use graphics acquired from at least two different sources to create a common look among the pages. Find or create images such as photographs, Clip Art, and drawings to enhance your site. Once all the images have been selected, add them to the site. Use all of the following tools in the Properties inspector as you create the pages for the site: ◆ resize
◆ contrast
◆ crop
◆ brightness
◆ resample
◆ sharpen
Have another team review the site and give you suggestions for improvements. As a team, evaluate these suggestions and make changes that will improve the site.
4. CHALLENGE YOURSELF Compare Graphic File Types Use a draw or image editing program to create a simple line drawing. Save the file in each of the formats available in the program. Name each file with the type of format being used. Create a table similar to the one below that compares the file types and sizes. If you are using word processing software, you may add a column to display the graphic files in the table.
FILE TYPE
FILE EXTENSION
SIZE
24-bit bitmap
.bmp
3,165 KB
JPEG
.jpeg
22 KB
Compare your results. Then, answer the following questions: 1. What quality difference can you see among the different files? 2. How do the download times for the various formats compare? 3. Do these results match your expectations? Explain why or why not. Using Web Graphics
247
CHAPTER 8
Projects
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Add Graphics to a Web Page
Create a Web page for an event in your community. Select an event that will occur in your community in the next three months. Plan a Web page to announce the event. Gather the information you will need for the page’s content. Sketch a storyboard that shows where you will place text and graphics. The page should include a logo for the event and at least two other graphics. Plan your page’s color scheme. Locate or create graphics that will work on the page. Use Clip Art, graphics inserted from a digital camera or scanner, or graphics created in a draw or image editing program. Be sure the graphics work with your page’s color scheme. Use Dreamweaver to create your page. Add your text and modify fonts as needed. Insert the graphics into your Web page (use the Insert option to insert files created using different programs or devices). Add alternate text. Crop, resize, and modify the images as needed to suit your page. If possible, add a photo album to your page. Supply permission information as needed for all content. Save the file. View the page in a browser.
2. Use Hotspots Add hotspots to the community event page. Assign a hotspot to the logo. Assume the hotspot will link to a page in your site where visitors can learn more about how to volunteer for the event. Create hotspots for the two other graphics on the Web page. Link the graphics to other pages in the site (imagine it has more than one page), to other community Web sites, or to other appropriate sites. Create a table similar to the one shown below to record the graphic’s name, the page to which it links, and the link’s alternate text. GRAPHIC Logo Graphic #1 Graphic #2
Proofread and save your work.
248
Chapter 8
LINK
ALTERNATE TEXT
CHAPTER 8
Projects
Read the projects described below. Then follow the directions to complete each project.
1. Create a Virtual Field Trip Web Site Create a Web site that features virtual trips to the following events or eras: ◆ The American Civil War
◆ The Middle Ages in Europe
◆ The Ming Dynasty in China
◆ The French Revolution
◆ The building of the pyramids in Egypt
◆ World War II
Use the Internet to acquire a graphic for each of the virtual field trips listed above. Edit the images you select so that they are suitable for use on the Web. Create a site that has a home page and six additional pages (one for each trip). Place a title graphic at the top of the page and a navigation bar on the left side. Layout the home page as illustrated: Content area Navigation bar
Nested table with six equally sized cells. An image will be placed in each cell. Each image will link to a page in the Web site.
Use your graphics to create an image map on the home page. Each image should link to its corresponding trip page. Add title graphics with the page title (the name of the trip) to each page. Do not add content to the trip pages at this time.
2. Create an Art Styles Web Site You have been asked to create a Web site illustrating different artistic styles from the 19th and 20th centuries. The site will have a home page that links to a page for each of the following styles: Realism, Impressionism, Modernism, and Symbolism. Select one of the styles and find representative images on the Web or scan them from print sources. Obtain permissions for their use as needed. In Dreamweaver, create the home page and a page for each period. Add the navigation from the home page to each of the styles pages. Then build the style page that you have selected, placing the images that you have located. Manipulate the images as needed. Provide alternative text for each image. View the Web site in a browser.
Using Web Graphics
249
CHAPTER
9
Adding Multimedia to a Web Site
YOU WILL LEARN TO… Section 9.1 Identify multimedia design guidelines Identify sources of multimedia files Explain the ethical use of multimedia files Describe multimedia authoring tools Evaluate multimedia Web sites Section 9.2 Identify audio file formats Identify video file formats Insert audio files into a Web page Insert video files into a Web page Describe the equipment needed to create audio and video Section 9.3 Identify animation file formats Insert animation into a Web page
250
Chapter 9
WHY IT MATTERS ................................................. People absorb information through all their senses. Sounds and smells make us aware of what is happening in our environment in ways that words cannot. Many recreational activities, such as concerts and video games, use light, images, and sound to enhance the audience’s experience. Using sound, video, and animation in your Web site can help to both engage your visitors and to provide information in multiple ways. Think of a site with which you are familiar that uses components such as sound, animation, and video. Do you think you enjoy the site more because of these components? Do they make you want to stay longer? Write several sentences explaining your answers to these questions. Explain why you think these components may be important to a Web site.
CHAPTER
9
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 9.1 Define Ethical Use ...................... 256 9.2 Evaluate Multimedia Components ............................... 264 9.3 Evaluate Animations .................. 268 You Try It Activities 9A Insert Background Sounds ....... 9B Insert a Video Clip ..................... 9C Insert an Animation ................... 9D Create and Insert a Flash Button .........................................
267
Chapter Assessment Making Connections ......................... Standards at Work ............................ Teamwork Skills ................................ Challenge Yourself ............................
272 272 273 273
260 262 266
You Try It Skills Studio Add Sound to a Web Page ................. 274 Use Animation on a Web Page .......... 274 Web Design Projects Create a Web Design Class History ................................................ 275 Add Multimedia to the Virtual Field Trips Web Site .................................... 275
IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects
ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Prepare with a Partner You might find it easier to work with a partner as you read through a chapter. Before you read, you and your partner can ask each other questions about the topics that will be discussed in the chapter. (Use the section headings or the “You Will Learn To” objectives to identify the topics.) What do you both think is important to know after reading the section? Write down the questions you both have about each section. Keep these questions in mind as you read.
WebDesignDW.glencoe.com
Adding Multimedia to a Web Site
251
SECTION 9.1 MULTIMEDIA AND WEB DESIGN Focus on Reading Read to Find Out The main purpose of this section is to explain how to use multimedia effectively and ethically. Read to find out more about the design guidelines for using audio, video, and animation.
Main Ideas
Key Terms
Reading Strategy
Multimedia elements should never distract visitors from your page’s main purpose. Always use multimedia files ethically and legally.
multimedia audio video animation streaming media codec multimedia authoring tool
Identify six multimedia design guidelines. Use a web diagram like the one below (also available online).
Multimedia Design Guidelines
Multimedia is the combined use of different media forms, such as text, graphics, audio, video, and animation. Since most people like to visit sites that contain multimedia, adding these elements is a good way to attract visitors.
Multimedia Design Guidelines Caution Some audio formats use compression to reduce file size and help the audio download more quickly. However, compression generally reduces a file’s quality.
Why is it important to consider file size when adding multimedia features to a Web site?
Multimedia only benefits a Web site when it helps meet the site’s goals and purpose. As you plan a site, consider each type of multimedia element and define how you can use it effectively to enhance the user’s experience.
Audio Guidelines Audio, which consists of live or recorded sound, can attract visitors’ interest and impart information. For example, a Web site for a movie could play that movie’s theme song. A travel site could include essential phrases for different countries. When using audio: ◆ Before you insert any audio file on a Web page, listen to it and make certain that the quality is acceptable. ◆ Make sure the audio supports your content. ◆ Try to limit the audio’s playing time. Audio that plays continuously can distract visitors and may cause them to move to another site. Instead, have the audio play for only a short time when the site first loads, or have visitors click a button to hear it.
252
Chapter 9
WebDesignDW.glencoe.com
Video Guidelines Video, which consists of live or recorded moving pictures, can inform, teach, and entertain. When including video: ◆ Remember that video files are large. Use them to enhance your site and not to convey your main message. ◆ Consider the type of connection your target audience will have. Videos that take too long to download can frustrate visitors. Well-designed multimedia sites allow visitors to specify the type of connection they are using and supply a lower-resolution presentation for those with slower connections.
Design Not all hosting services will allow you to use streamed data. It is a good idea to check with your service if you plan to stream media on your site.
Animation Guidelines Animation uses graphics or text to represent motion. When including animations: ◆ Use them to draw the visitor’s attention to important content. ◆ Limit the number of animations you use. Too many animations can distract visitors and make it difficult for them to read text or locate needed information.
File Size Guidelines
Figure 9.1 Streaming technology works by breaking a media file into pieces and then delivering them in order to the user’s computer. How can streaming technology make a site more userfriendly?
When using multimedia files, remember that the larger the file, the longer it will take to download. Streaming media, whether audio or video, reduces the user’s waiting time. To stream media, the Web server breaks the transmission Part 6 into pieces. The user’s media player starts playing the first piece of the file as soon as it Part 5 downloads. As the player receives Part 4 the remaining pieces, it stores them and plays them in order. Part 3 The result is a continuous stream of content, where each downPart 2 The server sends multimedia loaded piece plays as the rest of content in pieces to be the file arrives (see Figure 9.1). buffered by the client PC. Streaming requires the use of a codec (compression/ The first piece of streaming decompression scheme) to content is buffered, then first compress and then decomplayed as the next piece press the data. arrives.
Explain How does streaming media work?
Adding Multimedia to a Web Site
253
Downloading Multimedia Files How can I use multimedia files ethically?
It is easy to locate and download online multimedia files. However, you must be careful to always use downloaded files ethically.
Figure 9.2 The Dogpile® search engine lets you request audio files. What other kinds of files can you search for with Dogpile?
Locating Multimedia Files You can use search engines to locate online multimedia files. For example, the Dogpile® search engine lets you search for specific file types (see Figure 9.2). Many Web sites that contain Clip Art collections also offer short audio and animation files.
Select Audio to instruct the search engine to locate only audio files.
Using Multimedia Files Ethically Regardless of how you obtain multimedia files, you must have permission to use them. While many Clip Art collections allow you to use their files on personal sites, they may set limits on their use. If you download a file from the Web: Activity 9.1 Evaluate Multimedia Web Sites Find out more about evaluating multimedia Web sites by visiting WebDesignDW.glencoe.com.
◆ Read and follow any rules stated on that Web site about how to use the files legally. ◆ Give credit to a file’s author if you use someone else’s work on your Web site. Sites that allow you to download music files for personal use may not allow you to include these same files on a Web site without paying a fee. If the site has usage rules, read and follow them for downloading music. These same rules apply to downloading and using video files on your Web pages. Define What are usage rules?
254
Chapter 9
WebDesignDW.glencoe.com
Tools for Creating Multimedia Web Sites What is the most popular multimedia authoring tool?
Designers who create multimedia Web sites use special software packages called multimedia authoring tools. Multimedia authoring tools help you integrate media components, such as audio, video, animation, and images, into a seamless whole. The most widely used authoring tool is Macromedia® Director®. Authoring tools are expensive and require experience to use successfully. Numerous applications are available for acquiring and editing audio and video files. ◆ Audio Applications You can use applications such as GoldWave®, Sound Forge®, and Audacity to create and edit high-quality audio files. Microsoft® Windows contains an application called Sound Recorder that lets you create and save audio files. While Sound Recorder allows you to make some changes, it does not provide the sophisticated features of commercial audio applications.
You Should Know Some authoring tools have been developed for special purposes. For example, Macromedia® Authorware® is designed for creating multimedia training programs, such as interactive tutorials.
◆ Video Applications Many versions of Windows come with Windows Movie Maker, an application that allows you to perform some basic editing tasks with video clips. However, Windows Movie Maker does not allow you to perform sophisticated frame-by-frame editing and it supports only one format, Windows Media Video® (WMV). Adobe Premiere Pro provides full control over every frame within a video clip and supports a variety of formats. Identify What is the purpose of a multimedia authoring tool?
Evaluating Multimedia Web Sites Which criteria can you use to evaluate multimedia Web sites?
One of the most important rules to remember when using multimedia is to use it sparingly. Too much noise or movement will distract and annoy visitors. When you evaluate or plan a multimedia Web site, ask yourself the questions shown in Figure 9.3.
Figure 9.3
Multimedia Evaluation Checklist
✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑
Do the audio, video, and/or animations support each page’s goals? Are the pages cluttered? Do any media components distract visitors (for example, do they flash on and off)? Does the site give you the option to skip lengthy audio or video clips? Do components such as sound and video work properly? Do audio or video files take too long to download? Do the media components add to your enjoyment of the site?
A Web site that uses multimedia effectively should follow these guidelines. Why should you avoid using too many multimedia elements on a Web page?
Adding Multimedia to a Web Site
255
Figure 9.4 This site uses animation and sound to attract the visitor’s attention. How might sound be used effectively on a page such as this?
The Web page shown in Figure 9.4 follows good multimedia design principles. The page contains numerous items, yet it still provides considerable “white space” where the eye can rest. Animated buttons reveal new information when clicked and let users know when items have been selected. Visitors also have the option to turn the site’s audio on or off. List Name an effective use of audio, video, and animation.
Section 9.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Effective audio, video, and animation on a Web page can attract visitors’ attention and present useful information.
4. Analyze A friend’s page contains a flashing banner that makes it hard to read the page’s text, as well as a video with a long download time. How should your friend improve her site?
• You can obtain multimedia files from a variety of sources.
2. Identify guidelines for using audio, video, and animation effectively in a Web site.
• To use multimedia files ethically, always read and follow a Web site’s usage rules.
3. Summarize the features of a well-designed multimedia Web site.
• Multimedia authoring tools help you integrate media components, such as video, audio, and animation, into a seamless whole.
256
Chapter 9
5. Make Decisions Discuss how audio could be used to enhance an educational site about World War II.
Apply It! Define Ethical Use Visit two sites that have Clip Art, audio, and/or video clips. Print their license and usage pages. Review the printouts and write a summary of how files from these sites may be used on Web sites.
What Makes a Leader?
Y
our future plans may not involve managing the people and resources it takes to complete business projects. Yet, the leadership skills used by managers will help you on the job and off.
Qualities of a Leader Effective leaders share certain characteristics: ◆ Communication Good managers are diplomatic but straightforward when giving directions and making evaluations. ◆ Decision-Making Skills Managers often have to make unpopular choices. Decision-making is easier when you understand as much as possible about the project, its mission, and resources.
Effective leaders communicate well and understand the value of their co-workers.
◆ Trustworthiness Managing people means motivating and directing them. For this to happen, people must believe they can trust you. Good leaders deliver on promises, keep confidences, and are honest.
◆ Accountability A manager may have to justify decisions and explain failures. Good leaders accept responsibility and give credit to those who deserve it. ◆ Relationship Skills Good leaders learn as much as they can about the responsibilities of others. This knowledge increases their ability to give appropriate instructions and feedback to colleagues.
Building Leadership Skills You can do many things to build leadership qualities. Get involved in classroom or community projects and activities. Take business, communications, and management courses. These studies will give you insights into leadership. Many organizations can help you develop leadership skills. Consider joining the Business Professionals of America and Future Business Leaders of America.
1. Identify Skills Make a list of effective leadership qualities. Use the list to identify and assess your own leadership skills. Why are these skills valuable?
2. Research Leadership Form a team. Each team member will research a different leadership skill and be prepared to present their own research to the class. Adding Multimedia to a Web Site
257
SECTION 9.2 ADDING AUDIO AND VIDEO TO A SITE Focus on Reading Read to Find Out This section explains how to insert audio and video files into a Web site. As you read, make sure you understand the differences between each audio and video file format. Read to find out the advantages and disadvantages of each format.
Main Ideas
Key Terms
Reading Strategy
You can insert both audio and video into your Web pages. Audio and video files come in a variety of formats.
plug-in analog video recorder video capture card digital video recorder
Identify two ways to incorporate audio into a Web site. Use a tree diagram like the one below (also available online). Ways to Incorporate Audio Files
Many Web sites make extensive use of audio and video. Each audio or video segment used on a Web page is stored in a separate file.
Audio and Video Files Why is the sampling rate of an audio file important?
Table 9.1
Every file has a specific format that enables the Web browser to interpret and properly display or play the file’s content.
The file name extension identifies the audio file format. What type of file would you create using a digital piano?
Audio File Formats Table 9.1 lists the most common audio file formats. Not every OS or browser supports every format. Always test pages containing audio.
Common Audio File Formats Format
File Extension
Description
Wave®
.wav
Developed jointly by Microsoft® and IBM®. Mainly used for very short audio clips.
Midi
.mid
Used by synthesizers and electronic instruments.
RealAudio®
.ram, .ra
Developed by RealNetworks®, Inc.
AIFF
.aif, .aifc, .aiff
Developed specifically for the Macintosh®.
AU, SND
.au, .snd
Early formats that are no longer widely used.
MPEG Audio-Player 3
.mp3
Developed by the Moving Picture Experts Group. Can create very small, highly compressed audio files.
Shockwave® Flash Object
.swf
Developed by Macromedia®. Used to create cross-platform multimedia files. Users need the Macromedia Flash plug-in to hear .swf files.
258
Chapter 9
WebDesignDW.glencoe.com
Video File Formats You can insert video as well as audio files into your Web pages. Table 9.2 lists the video file formats commonly used on the Web. Again, not every OS or browser supports every format, so you should always test pages containing video. Many audio and video files also require a plug-in, which is an application that works with the Web browser to play a particular file format.
Table 9.2
Common Video File Formats Format
File Extension
Description
AVI (Audio Visual Interleaved)
.avi
Used with Windows Media Player®. Entire file must be downloaded before it can play.
MPEG (Moving Picture Experts Group)
.mpg
Compressed format that can be used for streaming.
QuickTime®
.mov, .qt
Developed by Apple® Computer, Inc., can be used for streaming video. Also known as MOV (Movie) format.
RAM RealVideo®
.ram, .ra
From RealNetworks®, Inc., can be used for streaming audio and video. Good for low-speed connections.
WMV (Windows Media® Video)
.wmv, .asf
Used with Windows Media® Player. Can be used for streaming audio and video.
Shockwave® Flash Object
.swf
Developed by Macromedia®. Used to create cross-platform multimedia files. Users need the Macromedia Flash plug-in to view .swf files.
Video files usually require a browser plug-in to play. Which format would you use if your target audience had low-speed connections?
Audio and Video File Quality Digital recording devices capture sound by sampling (recording fragments of) a sound wave. When played together, these fragments reproduce the entire sound. ◆ The sampling rate is the number of times per second a recording device samples sound waves. ◆ The higher the sampling rate, the better the audio clip’s sound quality. Each single image in a video clip is called a frame. Frames appear on the screen at a rate measured in frames per second (FPS). A slow frame rate can result in jerky video. Internet video generally varies from 10 to 30 FPS, but a rate of at least 15 FPS is recommended. A faster FPS results in better video quality, but it also means the video file will be larger and more difficult to download.
You Should Know Common plug-ins include Macromedia Shockwave, as well as RealNetwork’s RealOne Player, Apple QuickTime, and Microsoft Windows Media Player. You can download most plug-ins for free from the company’s Web site.
Define What is a plug-in?
Adding Multimedia to a Web Site
259
Creating and Adding Audio Files What equipment and software do you need to create a sound file? Caution When using an audio clip as a background sound, it is best to allow it to play for only a short period of time, such as a few seconds.
To play audio, your computer needs a sound card (or sound capabilities) and speakers. To record audio and save it in a file, you also need a microphone and an audio application. Once you store the sound file on your hard disk, you can use audio editing software to modify it. You can incorporate sound into your Web pages in two basic ways. 1. You can link an audio file to a button that a user can click in order to play the sound. This gives visitors control of the audio file. 2. You can set the sound file to play automatically when the page loads. The file can be set-up to play once or loop repeatedly. Remember that some browsers and operating systems may not play the sound file or play it correctly. If your site relies heavily on sound, you can insert a short note explaining the purpose of the sound for users who do not have a sound card or who have their volume turned down or off. In the following activity, you will insert a sound file into a Web site.
ACTIVITY 9A Insert Background Sounds 1 Start Dreamweaver. Open your Bike and Hike home page (index.html) in Design view. Position the insertion point after the image map graphic. 2 Select Insert>Media>Flash. In the Source File dialog box, click the Look in drop-down arrow. Browse to the DataFiles\Ch09\Multimedia folder. In the folder, select sound.swf and click OK. If necessary, in the warning box, click Yes. 3 In the Copy File As dialog box, click Create New Folder. Name the folder multimedia and click Open. Click Save. The sound file is embedded into the page in Flash format. 4 In the Properties inspector, uncheck the Loop box (see Figure 9.5). The sound file will now play only once.
Figure 9.5 The Properties inspector allows you to specify how many times the sound file plays.
File saved in multimedia folder Loop
5 Save your work. Preview the page in several browsers to determine whether the sound file plays correctly. Close your browser(s).
List Identify two ways you can incorporate sound into Web pages. 260
Chapter 9
Creating and Adding Video Files What tools do I need to create video files?
You need a video recorder to create your own video. There are two types of video recorders, analog and digital. ◆ When you create video with an analog video recorder (or with a VCR), the data must be translated into digital format before a computer can use it. A special circuit board called a video capture card can perform this conversion. ◆ A digital video recorder, such as the one shown in Figure 9.6, creates video that a computer can use directly. Digital video recorders include cables that connect the video recorder to the computer. You can then transfer the video to the computer’s hard disk, where it is saved in a file. Video editing software can be used to edit this file. The file is then ready to insert into a Web page. There are many reasons it can be challenging to include video on a Web site. ◆ Video clips can require significant download time.
Activity 9.2 Locate Clips Online Learn more about finding audio, video, and animation clips online at WebDesignDW.glencoe.com.
◆ Different file formats require different codecs to compress and decompress the file’s data. ◆ The Web browser must be able to understand both the file’s format and its codec. Because of these challenges, most Web designers do not insert clips directly into Web pages. Instead, they provide a link to the video clip. That way, visitors who have the necessary plug-in can decide whether or not they want to access the video and wait for it to download.
Figure 9.6 Video recorders can capture video and sound that you can transfer to a computer. How might video contribute to a Web site for a high school art class?
WebDesignDW.glencoe.com
Adding Multimedia to a Web Site
261
In the following activity, you will insert a video clip directly into the Bike and Hike site’s Scrapbook video page. Since visitors will need the Flash Player plug-in (or another plug-in capable of playing video in MPEG format) to view this clip, you will include a link to this plug-in in case they do not already have it installed on their computers.
ACTIVITY 9B Insert a Video Clip 1 In your Bike and Hike Web site, open the video.html page in Design view. In the Content area, double-click the word video. Press Delete. 2 Choose Insert>Media>Flash. In the Select File dialog box, browse to DataFiles\Ch09\Multimedia. Select the bike.swf file and click OK. If necessary, in the warning box, click Yes. Save the file in the Web site’s multimedia folder. 3 A gray box with a Flash plug-in icon appears. With the gray box still selected, in the Properties inspector, next to Loop, uncheck the check box. In the W box, change the number to 240. In the H box, change the number to 180. Your screen should look similar to Figure 9.7.
Figure 9.7 In Design view, the video is represented by a plug-in icon.
Plug-in icon You Should Know The plug-in icon will not display in the Web site when you preview or view the page.
4 Position the insertion point after the Flash plug-in icon and press Enter once. 5 Key the following text: To view this video, you may need to download the latest Macromedia Flash Player plug-in. Click here to go to the player. 262
Chapter 9
6 Select the words Click here. In the Properties inspector, in the Link text box, key the following URL: http://www.macromedia.com/go/ getflashplayer. Your screen should look similar to Figure 9.8.
Figure 9.8 Some of your users might need the Flash Player plug-in to view your video. Providing a link will help your users download the plug-in quickly.
7 Save your work. Preview the page in several browsers to determine whether the video file plays correctly (see Figure 9.9).
Figure 9.9 The video clip plays when you view the Scrapbook video page in a browser.
Adding Multimedia to a Web Site
263
8 With your teacher’s permission, click the Flash Player link in a browser (see Figure 9.10). The Macromedia Flash Player Download Center site should open in the browser window.
Figure 9.10 Test the link to the Flash Player plug-in to make sure that it works properly.
9 Click your browser’s Back button to return to your Bike and Hike Web site. 10 Close your browser(s). Save the file.
Explain What three factors make it difficult to include video on a Web page?
Section 9.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Audio and video files come in a variety of formats.
1. Define plug-in, analog video recorder, video capture card, digital video recorder.
• A file’s extension identifies its format.
2. Identify three audio file formats and three video file formats.
4. Analyze Multimedia You are creating a Web site that presents the history of your school. Discuss how the site might ethically use audio and video.
• You can incorporate sound into a Web page by linking the file to a button or setting it to play in the background.
3. Summarize the relationship between a video’s FPS, its quality, and its file size.
• To create video, you need a video recorder and hardware and software that lets you transfer the video from the recorder to the computer’s hard disk.
264
Chapter 9
5. Compare and Contrast How is a microphone different from a video recorder? How are they similar?
Apply It! Evaluate Multimedia Components Visit a site that advertises a movie you have seen in the last few months. Write an evaluation of the multimedia components of the site, using the checklist shown on page 255.
SECTION 9.3 ADDING ANIMATION TO A SITE Focus on Reading Read to Find Out The main purpose of this section is to explain how to add animation to Web pages. As you read, make sure you understand the difference between GIF and Flash animations. Read to find out what factors Web designers consider when choosing which animation to use.
Main Ideas
Key Terms
Reading Strategy
Animation provides the appearance of motion. One way of creating animations is to use a series of GIF images, which you can incorporate into a Web page in the same way as a graphic.
GIF animation Macromedia Flash
Compare and contrast GIF and Flash animations. Use a Venn diagram like the one below (also available online). GIF
Flash
Animation creates the appearance of motion. You can animate both graphics and text to add interest and interactivity to your pages.
Table 9.3
Animation Files What is the difference between GIF and Flash animation files?
There are two main types of animation files. GIF animation files are the simplest type of animation file. Macromedia Flash animations are more sophisticated and interactive than GIF animations. The two types of animation files are compared in Table 9.3.
The two main types of animation files are GIF animations and Flash animations. A GIF animation’s file contains what information?
GIF versus Flash Animation Files Characteristics
GIF
Flash
Description
Individual GIF images are displayed one after the other. All the images that make up the animation are stored in a single GIF file.
More sophisticated files that can include interactivity and download more quickly than GIF animations.
How Created
Can be created using graphic applications such as Macromedia Fireworks, Adobe ImageReady, and Microsoft PhotoDraw.
Must be created using Macromedia Flash or a similar application that supports this format.
How Inserted and Viewed
Inserted into page like GIF image. GIF file contains instructions that tell the browser the order in which the images should load, the position where each image should appear, and how long each image should appear on the screen.
Inserted into page like other files. To view Flash files, users must have the Flash plug-in, available free at the Macromedia Web site.
File Extension
.gif
.swf
Contrast Describe the differences between Flash and GIF animations. WebDesignDW.glencoe.com
Adding Multimedia to a Web Site
265
Incorporating Animation Files into a Site How do you use Dreamweaver to add animation to a Web page?
Dreamweaver provides a number of ways to incorporate animation into your Web pages. In the following activity, you will insert an animated GIF into the Bike and Hike Register page. You can insert and resize these animation files as you would a static GIF.
ACTIVITY 9C Insert an Animation 1 In the Bike and Hike Web site, open the Register page (register.html) in Design view. 2 Double-click the word Content. Press Delete. 3 On the Insert toolbar, click the Images button. Click the Look in dropdown arrow and browse to the DataFiles\Ch09\Multimedia folder. Select title_animate.gif and click OK. Save the file in the Web site’s multimedia folder. 4 On the Properties inspector, in the Alt text box, key: Register Today. 5 Save your work. Preview the page. The words Register Today should appear from behind the trees and move up to a stopped position (see Figure 9.11).
Figure 9.11 A GIF animation is inserted into a Web page in the same way as a static (nonanimated) GIF.
You Should Know Animation files created with Macromedia Flash can include interactivity. Flash is therefore a useful tool for creating tutorials and similar teaching materials.
6 Close your browser. Save your file.
Summarize How can you resize the dimensions of an animated GIF in Dreamweaver?
266
Chapter 9
Adding Flash Buttons How can Flash buttons make my pages more user-friendly?
Using Dreamweaver, you can create and insert animated Flash buttons for use in a Web site. A Flash button reacts to the mouse pointer, changing as the mouse pointer moves over or clicks it. Animated buttons can liven up a site and add a sense of interactivity to a page. They can also make a site more user-friendly because they let users know when a button has been used or clicked. In the following activity, you will create a Flash button that links to a Word document.
You Should Know If you want to include text in a non-standard font, you can use Flash Text. To access Flash Text, select Insert> Media>Flash Text.
ACTIVITY 9D Create and Insert a Flash Button 1 Browse to the DataFiles\Ch09\Text folder. Select and copy (press Ctrl + C) the registration.doc file. Browse to the location of your Bike and Hike root folder. In the folder, create a text folder. Paste (press Ctrl + V) the registration.doc file into the new text folder. 2 In the Bike and Hike Web site, open the Register page. Position the insertion point after the animated GIF file and press Enter once. 3 Select Insert>Media>Flash Button. In the Insert Flash Button dialog box, in the Style box, scroll down and select the Diamond Spinner style. 4 In the Button text box, key: Registration. Click the Browse button to the right of the Link text box. In the Select File dialog box, browse to the text folder in your Bike and Hike site. Select the registration.doc file. In the Relative to box, make sure Document is selected. Click OK. The Flash button will now link to this document.
Troubleshooting If an error message appears after you click OK, check the file pane to be sure that the text folder was saved properly. If the text folder does not appear, redo Step 1.
5 In the Save as box, delete button1.swf. Key: registration.swf. Your dialog box should look similar to Figure 9.12. Click OK.
Figure 9.12 Use the Insert Flash Button dialog box to create a Flash button in Dreamweaver.
Adding Multimedia to a Web Site
267
6 Save your file and preview it in a browser. When you position the mouse pointer over the Flash button, the diamond should spin (see Figure 9.13). Click the button to go to the registration.doc file. With your teacher’s permission, in the warning box click Open. Close the file. Close your browser. Save and close your Web site.
Figure 9.13 Your Flash button is animated when the mouse pointer is positioned over it.
Troubleshooting To edit a Flash button, select it and click the Edit button in the Properties inspector.
Describe What does a Flash button do when you place the insertion point over it?
Section 9.3 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• A GIF animation consists of individual GIF images, displayed on the screen one after the other.
1. Define GIF animation, Macromedia Flash.
4. Compare and Contrast Explain the differences between Flash and GIF animation.
• Macromedia Flash can create more sophisticated animations than GIFs. • Flash files often have faster download times than GIF animations. • You can use Dreamweaver to create and insert animated Flash buttons into a Web page.
268
Chapter 9
2. Identify the applications used to create GIF and Flash animation files. 3. Explain how animation differs from video.
5. Analyze Animation Television weather forecasters use radar to generate animated images of weather movement. What does this technique add to the viewer’s knowledge?
Apply It! Evaluate Animations Visit a Web portal and locate three examples of animations. What purpose does each animation serve? Why is your eye attracted to this animation? Explain how you would use each animation on a Web page.
CHAPTER 9
Reading Review
SECTION 9.1 Multimedia and Web Design Key Terms multimedia, 252 audio, 252 video, 253 animation, 253
■ Effective audio, video, and animation on a Web page
■ ■
■
Key Terms GIF animation, 265
Macromedia Flash, 265
Main Ideas ■ The two main types of animation files are GIF
Main Ideas
■
SECTION 9.3 Adding Animation to a Site
can attract visitors’ attention and present useful information. You can obtain multimedia files from a variety of sources. To use multimedia files ethically, always read and follow a Web site’s usage rules. Multimedia authoring tools help you integrate media components, such as video, audio, and animation, into a seamless whole. To evaluate a multimedia site, determine whether the media elements support rather than distract from the site’s goals, work properly and play for an appropriate length of time, and add to the viewer’s enjoyment without creating clutter.
■ ■
■ ■ ■ ■
animations and Flash animations. A GIF animation consists of individual GIF images, displayed on the screen one after the other. All images that make up a GIF animation are stored in one file, along with instructions that tell the browser the order in which to load the images as well as where and how long to display them. Macromedia Flash can create more sophisticated animations than GIFs. Flash files often have faster download times than GIF animations. You can use Dreamweaver to incorporate animation into your Web pages. You can use Dreamweaver to create and insert animated Flash buttons into a Web page.
SECTION 9.2 Adding Audio and Video to a Site Key Terms plug-in, 259 analog video recorder, 261 video capture card, 261
digital video recorder, 261
Main Ideas ■ Audio and video come in a variety of formats. ■ A file’s extension identifies its format. ■ You can incorporate sound into a Web page by
linking the file to a button or by setting it to play in the background. ■ To create video, you need a video recorder and hardware and software that lets you transfer the video from the recorder to the computer’s hard disk. Adding Multimedia to a Web Site
269
CHAPTER 9
Review and Assessment
AFTER YOU READ Compare Notes with Your Partner After you read each section, team up with your partner again. Discuss the content of the section. See which of your questions were answered. Together, see if you can find out the answers to questions that may still be unclear.
Understanding Main Ideas 8. Summarize some of the ways in which you can make certain you are using audio, video, and animation files ethically. 9. Describe the purpose of a multimedia authoring tool, and give an example of one. 10. Identify some of the tools used to create audio and video files. 11. Explain the difference between an analog video recorder and a digital video recorder. 12. List the hardware needed to listen to audio. List the hardware needed to create audio. 13. Describe two ways that an audio file can be inserted into a Web page. 14. Discuss some reasons why animation is a common feature on the Web. 15. Explain how an animated GIF file is different from a static (nonanimated) GIF file. 270
Chapter 9
How to Use Multimedia Files Ethically
➠
1. Identify the different media forms that can be combined to produce multimedia. 2. What is animation? 3. How does a codec help to stream media? 4. Rewrite the following sentence to make it true: Using multimedia authoring tools can help reduce a file’s download time. 5. What is the purpose of a plug-in? 6. What is the purpose of a video capture card? 7. Rewrite the following sentence to make it true: A GIF animation is made up of individual JPG files.
16. Summarize two guidelines that will help you use multimedia files ethically.
➠
Reviewing Key Terms
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
17. Identify three problems that using audio or video clips on Web pages can create. For each problem, also identify a possible solution. (example) Need plug-in to play
➠ ➠ ➠
(example) Provide link to plug-in
Critical Thinking 18. Cause and Effect Some Web sites contain numerous animated advertisements. How might the animations affect your behavior? For example, would you be more likely to click on an animated advertisement than on a nonanimated one? Why? 19. Make Decisions You want to take video of your family’s summer vacation and place it on your personal Web site. Use a table like the one below to identify what hardware and software you will need to create and insert your video. Hardware/Software Needed
Why Needed
Review and Assessment
CHAPTER 9
20. Evaluate Animations You are creating a Web site for a local physical fitness center. The manager wants the site to have animated images of people lifting weights. Because she wants these images to be abstract, you cannot use video. Which application do you think would work best for creating these animations? Why? 21. Analyze Do you think the saying “If in doubt, leave it out” is appropriate when adding audio, video, and animation to Web pages? Give specific examples in your answer. Then, locate a Web site that you think contains too many multimedia items. Use a problem-solution chart similar to the one below to identify three of the site’s multimedia problems and propose how you think those problems could be solved. Multimedia Problem
➠
Proposed Solution
22. Synthesize Information Search the Web for sites that provide free audio, video, and animation files for downloading. Create a list of these Web sites. In general, how would you cite one of these files? How would you cite a file that was not free?
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below.
23.
+
24.
+
Result
25.
+
Result
WebDesignDW.glencoe.com
+
Result
Reading & Writing Read the paragraph below and then answer the question.
When using multimedia, remember that the larger the file, the longer it will take to download. Streaming media, whether audio or video, reduces the download time. To stream media, the Web server breaks the transmission into pieces. The media player starts playing the first piece of the file as soon as it downloads. As the player receives the remaining pieces, it stores them and plays them in order. The result is a continuous stream of content, where each downloaded piece plays as the rest of the file arrives. According to the paragraph, which of the following statements is true? You can use streaming media for audio files, but you should not use it for video. When media is streamed, the media player downloads an entire file before playing that file. Streaming media breaks up large files so they can be transmitted more quickly. When using multimedia, the smaller the file, the longer it will take to download.
WebDesignDW.glencoe.com Study with PowerTeach Go to the book Web site shown above. To review the main points in this chapter select e-Review>PowerTeach Outlines>Chapter 9.
Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 9.
Adding Multimedia to a Web Site
271
CHAPTER 9
Activities
1. MAKING CONNECTIONS Language Arts—Summarize a Book or Story Select a book or story that you have read recently. After you have selected your book or story, make an audio file by following these steps: 1. Write a summary of the plot and make a list of the characters. 2. Read the summary aloud and record it. 3. Listen to the recording and re-record it until you are satisfied with the quality of the recording. Then, use Dreamweaver to create a Web page. The purpose of this Web page is to recommend your book or story to another reader. On your page, include: ◆ The book’s title ◆ An appropriate graphic or visual element(s) ◆ The list of characters in the book ◆ The sound recording of your summary With your teacher’s permission, team up with a partner and review each other’s sites. Use a table to list the multimedia elements used in the site. In your table, also identify whether the use of multimedia is effective or ineffective and explain your reasoning.
2. STANDARDS AT WORK Students are proficient in the use of technology. (NETS-S 1)
Use Technology Tools Assume you are planning a Web site about an upcoming event at your school. 1. Plan and sketch the pages for your site. 2. Identify the multimedia elements you would like to include on each page. 3. Make a list of the technology tools (scanner, digital camera, video recorder, voice/sound recorder, and so forth) available to you. Then, consider how you can use the technology tools available to you to create your Web site. On a separate piece of paper, create a three-column chart like the one shown below. List the Web site’s pages, the multimedia elements to be included on the page, and the technology tool you will use to create the multimedia element. Using your chart as a reference, create your multimedia elements and save them in one folder.
WEB PAGE
272
Chapter 9
MULTIMEDIA ELEMENT
TECHNOLOGY TOOL
CHAPTER 9
Activities
3. TEAMWORK SKILLS Create a Presidential Web Page You and your team need to create a Web page about a modern president. As a team, select one of the American presidents who served during the last half of the twentieth century. 1. Visit his presidential library online and explore the audiovisual resources available. 2. Identify resources that could be used in a Web page honoring the president. 3. Conduct other research as necessary to learn more about the president. Plan and create a Web page about the president. The page should include: ◆ A picture of the president ◆ Reference to at least one well-known statement he made ◆ Audiovisual resources that note important events in the president’s life or career Either download audio or video resources from the library or create links to the resources you want to use in your page. Get your teacher’s permission before downloading any files. Carefully review the site’s usage guidelines before downloading and using its materials and cite your sources on your page.
4. CHALLENGE YOURSELF Compare and Contrast Plug-ins Research Windows Media Player and QuickTime Player, two plug-ins for streaming audio and video elements. Your research should focus on answering the following questions: 1. 2. 3. 4. 5.
What video file formats will each plug-in read? Besides video, what other types of multimedia does the plug-in play? What is the current version of the plug-in? What company supplies the plug-in? What features does the supplier highlight?
Summarize your findings in a list. Based on your findings, create a Venn diagram like the one below to compare and contrast the two plug-ins.
Windows Media Player
QuickTime Player
Adding Multimedia to a Web Site
273
CHAPTER 9
Projects
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Add Sound to a Web Page
Add sound or sound effects to the community event page you created in the Chapter 8 You Try It Skills Studio Activities (see page 248). Review the Web page you created in the Chapter 8 You Try It Skills Studio. Decide how you could add sound or sound effects to the page. Either create the sound or sound effect or search the Web for an appropriate sound. For example, you may choose to use a voice recording of people who attended last year’s event, or you may add a sound effect related to the event. Review all usage agreements and get your teacher’s permission before downloading any files. Using Dreamweaver, add the sound to the page. Save the file in a multimedia folder. Set the file so it only loops once when the page is opened. Save the page and preview it in a browser to make sure the sound is working properly.
2. Use Animation on a Web Page
274
Build a Web page to display an animation. Locate an animation file. You can use an animation file from the student data files, or find animations online. Review all usage agreements and get your teacher’s permission before downloading any files. Create a new Web page in Dreamweaver. Insert the animation file and save it in a multimedia folder. Save the page. Preview the animation in a Web browser to see what movement occurs. Write one or two sentences describing the movement. Add this text in Dreamweaver and make any adjustments needed to display the text attractively. Proofread and save your work. View your completed page in a browser to make sure that it works properly. If possible, view the page in different browsers to see if it displays the same way in each browser.
Chapter 9
CHAPTER 9
Projects
Read the projects described below. Then follow the directions to complete each project.
1. Create a Web Design Class History Plan and create a two-page Web site that presents an oral history of your class. ◆ The home page should display information about the class and at least one multimedia element. ◆ Title the second page “A Typical Day in Class.” Plan to include several multimedia components in your site. Consider the technology tools available to you. Then, if possible: ◆ Interview either your teacher about his or her goals for the class, or other class members about important things they have learned. Record your interviews as digital audio or video files. ◆ Edit your audio and video clips so that they are no more than 15 to 30 seconds long. Select an appropriate quality for the clips to minimize file size. Create the site in Dreamweaver. Create and insert multimedia elements as appropriate. If you have time, create a third page titled “Projects I Have Completed.” On this page, briefly describe your projects and include hyperlinks to your work. Preview your site in a browser.
2. Add Multimedia to the Virtual Field Trips Web Site In Chapter 8, Web Design Project #1, you created the home page and navigation structure for a Web site that lets visitors explore past events or eras (see page 249). ◆ Research one event or era listed in the site. ◆ Develop content based on your research. Your content should identify the event or era and summarize it in one or two paragraphs. ◆ If possible, add hyperlinks to additional information about the event or era. As you research the topic, consider how to build a multimedia element into the page. Create or obtain the multimedia and place it on the page. Cite your sources as needed. Save your work. Preview the site in a browser to make sure that it works properly.
Adding Multimedia to a Web Site
275
CHAPTER
10
Adding Interactivity to a Web Site
YOU WILL LEARN TO… Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common scripting languages Identify markup languages Section 10.2 Apply DHTML effects Create a banner ad Add update information Remove a page from a template Insert layers Section 10.3 Create a form Identify different field types Place fields and labels into forms Add a jump menu
WHY IT MATTERS ................................................. Interactivity is a basic component of the Web—users move from one page to another by sending messages to the browser. It is natural to expand on these capabilities to communicate in more sophisticated ways, such as playing online games, using interactive tutorials, and generating online maps. This chapter looks at some ways of creating interactivity. List five ways in which you have interacted with Web pages in the past week. Then write down how these interactions were useful to you. For example, did they save you time? Did they make the site more interesting or entertaining? Did they make you want to stay longer?
276
Chapter 10
CHAPTER
10
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 10.1 Identify Scripting ....................... 281 10.2 Apply Dynamic Effects ............... 291 10.3 Identify Form Fields ................... 298 You Try It Activities 10A Insert a Banner Ad .................... 10B Add Update Information............ 10C Remove a Page From a Template ..................................... 10D Insert Show-Hide Layers Behavior ..................................... 10E Create a Form with Fields ......... 10F Add a Jump Menu to a Web Page ............................................
284 285 286 288 293 297
You Try It Skills Studio Create a Drama Club Web Site ........... 304 Add an Order Form to a Web Site ...... 304 Web Design Projects Create a Sandwich Takeout Site ........ Create a Form to Collect Survey Data ...................................................... Create a Web Site for Voters .............. Create a Web Photo Album ................. Create an Educational Web Site ........
305 305 306 306 307
IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects
ON THE WEB Chapter Assessment Making Connections ............................ Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................
302 302 303 303
Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Managing Time How much time should you take to read a chapter? The answer depends on many factors. The more difficult the material, the longer it will take to read the chapter. Illustrations can make material easier to understand, but they can also be distracting. Use the main ideas, chapter headings, and section assessment questions to focus your reading. Also, do your reading at a time and in a place where you can concentrate on the material without interruptions. This will increase your speed and comprehension of the material.
WebDesignDW.glencoe.com
Adding Interactivity to a Web Site
277
SECTION 10.1 SCRIPTING AND MARKUP LANGUAGES Focus on Reading Read to Find Out The main purpose of this section is to explain the uses of different scripting and markup languages. Read to find out how Web designers use these languages to make their Web pages interactive.
Main Ideas
Key Terms
Reading Strategy
Scripting languages make Web pages dynamic and interactive. Examples of scripting languages include JavaScript, Java applets, CGI, and DHTML. XML and XHTML are types of markup languages.
script interactivity JavaScript Java applet Common Gateway Interface (CGI) markup languages Extensible Markup Language (XML) Extensible Hypertext Markup Language (XHTML)
Identify four types of scripting languages and a use for each. Use a table like the one below (also available online). Types of Scripting
Use
Dreamweaver makes it easy to insert dynamic elements such as rollover buttons and image maps into Web sites. In this chapter, you will learn about the scripting needed to create interactive elements on Web pages.
Scripting and Interactivity Activity 10.1 Compare Scripting Languages Learn more about the purposes of different scripting languages at WebDesignDW.glencoe.com.
What is a script?
A script is a short program that you can insert into a Web page’s HTML code in order to make your pages dynamic. A Web page is dynamic when it: ◆ contains information that changes regularly. ◆ allows interactivity, meaning that the user can perform an action that the Web page responds to.
Using Interactivity in Web Sites Interactivity on a Web site makes communication a two-way process: you give your visitors information and your visitors send information back to you. This is one way in which the Web is different from books or newspapers. You can attract repeat traffic by ensuring that your site is timely and easy to find. You can solicit information from your visitors by asking them for feedback. Summarize When is a Web page dynamic?
278
Chapter 10
WebDesignDW.glencoe.com
Scripting Languages For which type of interactivity is Common Gateway Interface used?
Scripting languages can be used to create interactive elements, such as rollover buttons, banner displays, clocks, forms, and games, within Web pages (see Figure 10.1). Often, the script’s code can be inserted directly into a Web page’s HTML code. Some scripts or programs run on the user’s machine, and others run on a Web server. ◆ JavaScript is a scripting language that works as a part of an HTML document. As the Web page loads onto a user’s computer, the browser reads the JavaScript and completes the operation. Dreamweaver includes different snippets of JavaScript that you can insert into a page to make it dynamic and interactive. A number of sites offer free JavaScript code samples that you can copy and paste into your HTML documents. ◆ A Java applet is a small, cross-platform Java application that is designed to be executed within another application. Although it may appear with other elements on a Web page, it operates separately from the overall page. An applet would appear as a link within the HTML code for a Web page. Java applets are used by companies in a number of ways. For example, travel companies may use a Java date picker applet that allows users to select travel dates by clicking on a calendar. ◆ Common Gateway Interface (CGI) is a program that creates a link, or interface, between a user’s computer and the Web server. This link allows information to transfer back and forth in real-time between the two computers. CGI programs make it possible to search online databases and to fill out, submit, and process forms over the Internet.
Content Not all browsers fully support JavaScript. Internet Explorer, for example, supports only a subset of JavaScript. Think about your audience before you add scripts to a site.
Figure 10.1 In this game, the player must react quickly to onscreen images. How is this game interactive?
◆ Dynamic HTML (DHTML) is an extension of HTML. This scripting language combines HTML with Cascading Style Sheets (CSS) and JavaScript to create interactive Web sites. Remember, do not go overboard when adding interactive elements to a Web site. If every item on your page is moving, visitors will quickly become annoyed.
Summarize What types of interactivity can you create using scripting languages? Adding Interactivity to a Web Site
279
Markup Languages What is the difference between HTML and XML?
A markup language uses tags, or special sequences of characters, to tell a program how to interpret a text file. HTML, XML, and XHTML are three types of markup languages.
HTML versus XML Caution XML requires sophisticated programming. To use XML, the site must reside on a Web server that provides special services supporting this feature.
Figure 10.2 XML tags allow users to perform a targeted search of a site’s database. How is XML different from HTML?
HTML is a markup language that defines the appearance of data. The tags tell a browser how and where to display text and images on a Web page. For example, the code <STRONG>Shakespeare will display the name Shakespeare in bold letters. HTML cannot, however, tell you who or what Shakespeare is. Unlike HTML, Extensible Markup Language (XML) is a markup language that defines the meaning, and not the appearance, of Web elements. XML allows you to label or classify different Web elements according to what each item represents and how it relates to other items. This classification system allows information to become searchable based on whichever characteristics you define. For example, you could use XML to code the name Shakespeare as Shakespeare. A search for all items classified as would produce Shakespeare among the results. XML coding also allows users to search for information across multiple platforms. For example, if a site such as that shown in Figure 10.2 uses XML tags, then a user can access and search this site’s information using many different tools such as a Web browser, cell phone, or PDA.
XHTML The Extensible Hypertext Markup Language (XHTML) is designed to combine the different functions of HTML and XML. XHTML uses the same structure and tags as HTML, but it is designed to be far more versatile. As more XML tags are added to XHTML pages, search engines and browsers will be able to interpret a Web page’s content more precisely. This will, for example, allow a user to identify every bookstore within a certain radius that has a copy of Shakespeare’s play Hamlet currently in stock.
Identify What does XHTML stand for?
280
Chapter 10
Interactivity Design Guidelines How can interactivity enhance my Web site?
Using interactivity requires careful planning. Figure 10.3 shows some design guidelines to consider when using interactivity. In general, interactive elements should perform a function. For example, having a button change color when clicked tells the user that something is happening.
Figure 10.3
Interactivity Guidelines
✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑
Use interactivity only when it enhances the site. For example, having a button change color when clicked tells the user that something is happening. Keep it simple. Too much movement is distracting and may annoy users. Make sure that users understand the response expected of them. If the user needs to fill out and submit a form, clearly label each field. Check interactive components in all the browsers your visitors are likely to use. Supply alternative text that will appear if a particular component does not function properly.
Follow these guidelines when adding interactive elements to a Web page. Why do you want to avoid using too many interactive elements on your site?
It is easy to go overboard when adding interactivity to Web pages. Using restraint will help you create Web pages that people will enjoy visiting. List Name two design guidelines related to interactivity.
Section 10.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• You can use scripts to make your Web pages dynamic and interactive.
1. Define script, interactivity, JavaScript, Java applet, Common Gateway Interface (CGI), markup language, Extensible Markup Language (XML), and Extensible Hypertext Markup Language (XHTML).
3. Analyze Scripting Why was the development of CGI an important step in the development of interactive Web pages?
• Interactivity enables a Web site and a user to send information back and forth. • Limit the amount of interactivity you include on your Web site and keep it simple and easy to understand. • Scripting languages include JavaScript, Java applets, CGI, and DHTML. • Markup languages include HTML, XML, and XHTML.
2. Discuss how XML code is similar to HTML code. How is it different? Identify examples of how XML code is both similar to and different from HTML code.
4. Compare and Contrast How does interactivity make Web pages different from other sources of information, such as books, newspapers, and television shows?
Apply It! Identify Scripting View the source code of your favorite entertainment Web site. Identify one or two examples of scripting used in the site. Explain what function the scripting performs on the site.
Adding Interactivity to a Web Site
281
Accessibility on the Web
W
eb sites often include elements that can limit their usability for many people.
Designing for Different Needs When the Web first became popular, many developers did not consider the needs of differently-abled users. Yet these individuals make up an important part of the online community. People may not be able to access the information on a Web site for many reasons, including: ◆
physical disabilities or environments that make it difficult to see, hear, or understand graphic or audio elements.
◆
limited movement that restricts the use of input devices.
◆
poor language or technology skills.
◆
old technology and software or slow Internet connections.
Operating systems such as Windows provide tools that make computers more accessible.
Accessibility Guidelines Successful Web sites allow all visitors to get information quickly and easily. The World Wide Web Consortium (W3C) and Section 508 of the United States Rehabilitation Act provide accessibility guidelines to create accessible sites. Some guidelines include the following. ◆
Text Options Provide text versions of graphics or audio, including navigation buttons. For example, if a photo of chili can be clicked to display a recipe, then the text version might read “Recipe for making chili.”
◆
Cascading Style Sheets Pages designed with CSS allow users to easily change settings such as colors, text size, etc.
◆
Multiple Technologies Web sites should be accessible to individuals using any major browser, as well as older technologies.
1. Identify Find out what accessibility tools are 2. Research Guidelines Learn more about the available on your word processor, operating accessibility guidelines issued by the W3C or system, or authoring software. Make a chart listing Section 508 of the Rehabilitation Act. Create a at least five tools, the disabilities they address, checklist to make your site accessible to their functions, and how to activate them. everyone. 282
Chapter 10
SECTION 10.2 ADDING DYNAMIC EFFECTS Focus on Reading Read to Find Out This section explains how to add dynamic effects to your Web pages. Read to find out how Web designers use effects, such as banner ads, update information, and layers, to make their Web pages dynamic.
Main Ideas
Key Terms
Reading Strategy
Dreamweaver makes it easy to apply dynamic effects to your pages. Dynamic effects include banner ads, automatic date insertion, and layers. Using dynamic effects makes your Web site interesting.
rollover button banner ad layer
Identify the purpose of dynamic effects, such as banner ads, update information, and layers. Use a web diagram like the one below (also available online).
Dynamic Effects
Adding dynamic effects helps make Web pages interesting. Dreamweaver makes it easy to add dynamic effects such as banner ads and update information.
Banner Ads How do banner ads work?
As discussed in Chapter 6, a rollover button is a button that changes appearance in response to a user’s action. Dreamweaver uses DHTML to create rollover buttons. You can create a rollover effect by inserting interactive buttons on a site. The rollover behavior seen in a rollover button works on any type of image whether it is a JPEG, GIF, or PNG. When you create a rollover button, you can specify whether the image will change or “rollover” when: ◆ a user clicks the image. ◆ a user positions the mouse pointer over the image. Rollover buttons are often used to create banner ads. A banner ad is an advertisement that, when clicked, takes the visitor to the sponsor’s home page. Banner ads, which are usually rectangular, make it easy for interested consumers to go to the sponsor’s Web site. In the following You Try It activity, you will create a simple banner ad with a rollover effect for the Centuryville Bike Shop Web site. You will specify which image should appear initially on the screen, and which image should appear when the user positions their mouse over the banner ad.
WebDesignDW.glencoe.com
Adding Interactivity to a Web Site
283
ACTIVITY 10A Insert a Banner Ad 1 In your Bike and Hike Web site, open the Sponsors page (sponsors.html) in Design view. Position the insertion point to the right of the video store logo. Press Enter. 2 If necessary, change the Insert toolbar to Common view. Click the Images drop-down arrow and select Rollover Image. In the Insert Rollover Image dialog box, in the Image name box, key: bike_ad. 3 Click the Browse button next to the Original image box. Browse to the DataFiles\Ch10\Images folder. Select banner_01.gif and save it in the site’s images folder.
Troubleshooting For a review of how to insert rollover buttons, see You Try It activity 6F on page 178.
4 Click the Browse button next to the Rollover image box. Browse to the DataFiles\Ch10\Images folder. Select banner_02.gif and save it in the site’s images folder. 5 In the Alternate text box, key: Centuryville Bike Shop. 6 In the When clicked, Go to URL box, key the following: http://www.centuryvillebike.com/. Click OK. 7 Save your file. Preview the page in a browser. When you position the mouse pointer over the rollover banner ad, it should look like Figure 10.4. Test the link (note that this link does not connect to an active page). Close your browser and save your work.
Figure 10.4 When you position your mouse pointer over the banner ad, the text changes.
Identify What is a banner ad?
284
Chapter 10
Update Information Why do news sites usually display update information?
Many Web sites display the date when the site was last updated. News sites usually display the current date to let you know that the site’s content is up-to-date. Dreamweaver’s Insert Date feature provides two options. If you check the Update automatically on save check box, then your site’s date will change whenever you make and save changes to the site. If you do not check this box, then the date displayed will always be the date that you originally created the page.
ACTIVITY 10B Add Update Information 1 Open the Bike and Hike template (Bike_Main.dwt) in Design view. In the template’s footer, position the insertion point after the copyright text. Press Enter. 2 Choose Insert>Date. In the Insert Date dialog box, click the Day format drop-down arrow. Select Thursday,. 3 In the Date format list, make sure March 7, 1974 is selected. 4 Click the Time format drop-down arrow and select 10:18 PM. 5 Make sure the Update automatically on save check box is checked. Your dialog box should look like Figure 10.5. Click OK.
Figure 10.5 When you select Update automatically on save, the page displays the date when the page was last updated.
Figure 10.6 6 Save your file. Update all template files and close the Update Pages dialog box. Preview the page in a browser. It should look similar to Figure 10.6. Close your browser.
The update information appears in the page’s footer.
Explain How do you insert update information in Dreamweaver? Adding Interactivity to a Web Site
285
Using DHTML Behaviors Which Dreamweaver feature can you use to create custom effects? You Should Know Dreamweaver’s Behaviors panel contains several predefined behaviors. Go to the Macromedia Web site to browse for additional behaviors, commands, and components.
DHTML scripts help make Web pages dynamic. You can use the Behaviors panel in Dreamweaver to add predefined DHTML scripts to Web sites. To use many of the behaviors, you must first select a Web page object such as text, an image, or a plug-in. You can then use the Behaviors panel to apply a variety of effects to the selected object. For example, you can have a pop-up menu appear when an image is clicked, or allow users to activate a Flash movie by moving the mouse pointer over a word. Depending on what browser version(s) you are designing your site for, some items may be unavailable. Always consider your target audience when adding behaviors to a site.
Inserting Behaviors into a Web Site As you already know, templates can save you time in developing a multi-page Web site. Occasionally, however, you may need to create a unique page that does not rely on template information. Examples of this situation might be when you want to use DHTML effects on a page or when you have complex scripting on a page. The Donate page of the Bike and Hike Web site will use DHTML behaviors. You must remove the Donate page from the site’s template in order to use DHTML effectively and without errors.
ACTIVITY 10C Remove a Page From a Template Figure 10.7
1 In your Bike and Hike Web site, open the Donate.html file in Design view.
Add a title to the page.
2 In the Title box, key: Bike and Hike – Donate (see Figure 10.7).
286
Chapter 10
3 Choose Modify>Templates>Detach from Template (see Figure 10.8). The donate.html page is no longer defined by the template.
Figure 10.8 Select Detach from Template to remove a page from the Web site’s template.
Caution If you update navigation links, footer information, or other content in the Bike and Hike template, you will need to apply the changes to the Donate page separately as it is no longer controlled by the template.
4 Choose File>Save As. If necessary, in the warning box, click OK. In the Save As dialog box, click the Save in drop-down arrow and navigate to your Bike and Hike Web site’s root folder. Select and open the pages folder. 5 If the file name does not appear in the Save As dialog box, key donate.html into the File name box. Click Save. If necessary, in the warning box, click Yes. Your screen should look like Figure 10.9.
Figure 10.9 The Donate page is now a unique page that no longer relies on a template.
Adding Interactivity to a Web Site
287
Inserting Behaviors into a Web Site A layer is a container within an HTML page that can include objects such as text, images, and forms. Web designers often use layers instead of tables when they want to position objects precisely on a page. Like tables, layers allow you to stack or “layer” information on a page, but they are easier to update than static tables. There is no limit to how many layers you can include on a Web page. However, including a lot of layers can cause a page to download very slowly. It is best to avoid using too many layers on a single page. In the following activity, you will create two layers that appear and disappear as the user moves the mouse pointer over navigation buttons.
ACTIVITY 10D Insert Show-Hide Layers Behavior 1 With the Donate page open in Design view, click after the word Donations. Press Enter. Key: Select the buttons below to learn how to donate to the Centuryville Community Center. Format the text size 20px, Black, Unbold, Align Left. Deselect the text. Press Enter. 2 On the Insert toolbar, click Images and select Image. Browse to the DataFiles\Ch10\Images folder. Select the button_funds.gif file. Insert the file and save it in the site’s images folder. In the Alt text box, key: Funds. 3 Click to the right of the image. On the Insert toolbar, click Images. Browse to the DataFiles\Ch10\Images folder. Insert the button_resale.gif file and save it in the site’s images folder. In the Alt box, key: Resale. Press Enter. Your buttons should look like Figure 10.10. 4 Click to the right of the Resale button. Press Enter once. On the Insert toolbar, click the Common drop-down arrow and select Layout. Make sure Standard mode is selected. Click the Draw Layer button. Click and drag a layer box as shown in Figure 10.10.
Figure 10.10 Use the Draw Layer button to create a layer box.
Standard Mode
Layer box
288
Chapter 10
5 Click inside the layer and key the text shown in Figure 10.11. Resize the layer to fit the text in the box. Format the text Arial, 20px. 6 Click the layer’s top-left handle. The Properties inspector’s view changes (see Figure 10.11). In the L box, key: 272px. In the T box, key: 290px. Click the Vis drop-down arrow and select hidden. Under Layer ID, in the box, key: funds. Your screen should look similar to Figure 10.11. Click in an empty area of the Web page to deselect the layer (it will become invisible).
Troubleshooting In Step 6, be sure to key the px after the numeric values. The L moves the layer 272 pixels from the left of a browser window. The T value moves the layer 290 pixels from the top of a browser window.
Figure 10.11 First layer created on Donate page.
Visibility option
7 Click Draw Layer again to create a second layer that is roughly the same size as the first. Inside the layer, key the text shown in Figure 10.12. 8 Repeat Steps 5 and 6 except, under Layer ID, key: resale.
Figure 10.12 Second layer created on Donate page.
Adding Interactivity to a Web Site
289
9 Select the Funds graphic. In the Properties inspector, in the Link box, key the number sign (#). This creates a link around the graphic that does not have to link to a file or to a Web page. 10 Choose Window>Behaviors (or press Shift + F4) to open the Behaviors panel. In the panel, click the plus sign (+) drop-down arrow. Select Show-Hide Layers. 11 In the Show-Hide Layers dialog box, in the Named layers box, select layer “funds” and click Show. Select layer “resale” and click Hide. Your dialog box should look like Figure 10.13. Click OK.
Figure 10.13 Use the dialog box to select how layers will display when viewed in a browser.
12 In the Behaviors panel, click the plus sign (+). Select Show-Hide Layers. In the dialog box, select layer “funds” and click Hide. Select layer “resale” and click Hide. Click OK. 13 In the Behaviors panel, in the first line, click directly on the word onLoad. Click the drop-down arrow that appears and select onMouseOver (see Figure 10.14). In the second line, click directly on the word onLoad and select onMouseOut.
Figure 10.14 Click directly on the text onLoad to make the dropdown arrow appear.
Troubleshooting In Step 13, you can resize the menu by selecting the divider line and dragging it to the right.
14 Select the Resale graphic. In the Properties inspector, in the Link box, key the number sign (#). 15 In the Behaviors panel, click the plus sign (+) drop-down arrow. Select Show-Hide Layers. In the dialog box, select layer “funds” and click Hide. Select layer “resale” and click Show. Click OK. Select Show-Hide Layers again. In the dialog box, select layer “funds” and click Hide. Select layer “resale” and click Hide. Click OK. 16 In the Behaviors panel, in the first line, click directly on the word onLoad. Click the drop-down arrow that appears and select onMouseOver. In the second line, click directly on the word onLoad and select onMouseOut.
290
Chapter 10
17 Save your file. Preview the page in a browser. When you position the mouse pointer over the Funds button, the Funds layer appears (see Figure 10.15). When you position the mouse pointer over the Resale button, the Resale layer appears. The layers disappear as soon as you move the pointer off the buttons. Close your browser and save your work.
Figure 10.15 When you position the mouse pointer over one of the buttons, the layer it is linked to appears.
When designing your own Web sites, carefully evaluate the effects you add to a page. Remember that adding too many effects will only distract, and potentially annoy, your visitors.
You Should Know To review the layers you have created, select Window>Layers or press F2 to open the Layers panel. You can select a layer to view it on screen, or delete layers that you no longer need.
Explain Why is it important not to include too many layers on a Web page?
Section 10.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• You can use Dreamweaver to insert dynamic effects into your Web pages.
1. Define rollover button, banner ad, layer.
4. Analyze Your Web design business specializes in banner ads. How might you convince clients to invest in a banner ad rather than a static ad?
• Clicking a banner ad takes you to the sponsor’s Web site. • Update information lets visitors know when you last made changes to your site. • You may need to remove a page from a template to add dynamic effects. • You can use the Behaviors panel to add DHTML scripts to a Web site.
2. Explain how to use the Behaviors panel to apply effects to page components. 3. List three types of dynamic effects and how they are used to make Web pages interesting.
5. Draw Conclusions Why is update information important when you are evaluating a Web site’s reliability?
Apply It! Apply Dynamic Effects Use the Behaviors panel to apply various effects to text on a Web page. Identify how different effects change the text. Evaluate why you would or would not want to apply these effects to a Web page.
Adding Interactivity to a Web Site
291
SECTION 10.3 ADDING A FORM TO A WEB SITE Focus on Reading Read to Find Out The main purpose of this section is to explain how to add a form, which is a Web page that collects data from a site’s users. As you read, make sure you understand the components of a well-designed form.
Main Ideas
Key Terms
Reading Strategy
Forms make Web sites interactive by letting users submit data. Users enter each data item in a field identified by a label. Different types of fields fulfill different purposes.
form field label jump menu
Identify five common field types found on forms. Use a table like the one below (also available online). Field Type
Description
Web sites often need to obtain data from visitors. Whenever you order an item online, for example, you must enter information such as the item’s number, the shipping address, and payment information. Web programmers and designers create forms to allow users to enter and submit this information. Activity 10.2 Create WellDesigned Forms Learn more about designing forms at WebDesignDW.glencoe.com.
Forms and Their Components Which buttons do most forms include?
A form is a structure for collecting data from visitors. Every form contains two main components: fields and labels. ◆ A field allows a user to enter information into the form. ◆ A label is used to identify each field. The label tells the user what information (name, address, etc.) should be entered into a field.
Form Fields What is the difference between a text box and a text area?
A form can contain different types of fields. Each field type has a specific purpose. For example: ◆ A text box lets users enter a relatively small amount of text (such as an address) into a form. ◆ A text area allows users to enter larger amounts of text, such as comments and suggestions. ◆ Limited-option fields, such as radio buttons, check boxes, and drop-down lists, allow users to select predefined choices.
292
Chapter 10
WebDesignDW.glencoe.com
Table 10.1
Common Form Fields Field Type
Button
Each type of form field has a specific purpose. How would you use a radio button on a form?
Description
Text Field
Allows user to enter a line of text.
Text Area
Allows user to enter many lines of text, such as comments or suggestions. Also called a scroll box.
Radio Button
Allows user to select only one option from multiple options, such as Yes/No/Maybe, True/False, or Male/Female. Also called an option button.
Check Box
Allows user to select one or more options from a list.
List/Menu
Allows user to select from a list of choices. Also called a drop-down list or menu. A user can select one, some, none, or all of the items in the list.
Submit/Reset Buttons
Allows user to submit a completed form and to erase the form’s content.
Using limited-option fields helps prevent users from entering invalid data. Including predefined choices also allows the form creator to specify exactly what type of information he or she wants from users. Most forms also contain a Submit and a Reset button. After filling out the fields, visitors click the Submit button to submit the form’s contents. They use the Reset button to erase the form’s content. Table 10.1 shows commonly used form fields and the Dreamweaver button used to create each field.
Creating a Form Using Dreamweaver In the next activity, you will create a form that lets users send contact information to the organizers of the Bike and Hike Web site. This form will include text fields, a pull-down menu, and a check box.
ACTIVITY 10E Create a Form with Fields 1 In your Bike and Hike Web site, open the Contact Us page (contact.html) in Design view. 2 Click after the word Center. Press Enter. On the Insert toolbar, click the Layout drop-down arrow and select Forms to change the toolbar to Forms view. Click the Form button to declare a form area on the Web page. 3 Click in the form area and select Insert>Table (Ctrl + Alt + T). In the Table dialog box, create a table with 7 rows and 2 columns. If necessary, set the Table width to 760 pixels. Click OK. Adding Interactivity to a Web Site
293
Figure 10.16 Resize the table so the first column is 150px wide and the second column is approximately 339px wide.
Click to resize table columns
4 In the Properties inspector, set the height (H) to 250px. In the table, click the column divider (see Figure 10.16). Drag the divider to the left until the first column is 150px wide. If necessary, set the alignment in the first column to Left. 5 Click in the table’s first cell. Key the label: First Name:. Press Tab. On the Forms toolbar, click the Text Field button. If necessary, switch the Insert toolbar to Forms view. 6 Make sure the white text box that appears in the right cell is selected. In the Properties inspector, in the text box below TextField, key the title: first_name. In the Char width text box, enter a value of 40. 7 Click in the cell under the label you just keyed. Repeat Steps 4 and 5 to create five more fields. Use the information shown in Table 10.2.
Table 10.2 Enter the labels in the table’s left column and enter titles in the Properties inspector. Note that all field labels end with a colon.
Field Labels, Titles, and Character Widths Label
Title
Character Width
Last Name:
last_name
40
Address:
address
40
City:
city
40
State:
state
2
ZIP Code:
zip_code
10
E-mail Address:
e_mail
40
8 When you are finished, your screen should look like Figure 10.17 on page 295. 294
Chapter 10
Figure 10.17 The table with all of the form’s text fields entered.
9 Click in the cell below the E-mail Address: label, key: Age:. Press Tab. 10 On the Forms toolbar, click the List/Menu button. In the Properties inspector, under List/Menu, delete select and key: age. Click the List Values button located in the right-hand side of the Properties inspector. 11 In the List Values dialog box, in the field under Item Label, key: Under 12. Leave the value empty. Click the plus sign (+) to add another value. 12 Repeat Step 10 for the following choices: 12 to 17 and Over 17. Your dialog box should look like Figure 10.18. Click OK. Deselect the Age box.
Figure 10.18 You can use the List Values dialog box to enter the options you want to appear in the text box.
13 Outside the table, click under the Age label. On the Forms toolbar, click the Checkbox button. If necessary, click Yes in the warning box. Position the insertion point after the check box. Press the spacebar. Key: Send me more information about the Bike and Hike fundraiser. Select the check box. In the Properties inspector, under Checkbox name, key: more_info. Adding Interactivity to a Web Site
295
14 Position the insertion point at the end of the checkbox line. Press Enter. On the Forms toolbar, click Button to insert a Submit button. 15 Click Button again. In the Properties inspector, next to Action, select Reset form to create a Reset button. 16 Deselect the buttons and click next to the Reset button. In the Properties inspector, click Align Center to center the buttons (see Figure 10.19). Save your file. Preview your page in a browser. Practice entering data into the form as shown in Figure 10.19. Click Submit. In some browsers, an error message may appear when you click Submit. The Web site must be published and other actions taken before the form can be processed. Click Reset to remove any data that you have entered into the form. Close your browser. Save the page.
Figure 10.19 The finished form as viewed in a Web browser.
You have now created a simple form. However, this form does not do anything with the data that the user enters. To function, a form must be published on a Web server that has the capabilities needed to manage the resulting data. In a case such as the Bike and Hike Web site, the form would generate only a small amount of data that would simply be e-mailed to the individual in charge of handling site communications. In cases where forms generate large amounts of data, the server would typically insert the data into databases to be stored and manipulated as necessary. You will learn more about forms in the next unit. Describe What does a well-designed form include?
296
Chapter 10
Adding Dynamic Effects to a Form How can adding a jump menu make a form more dynamic?
Dynamic effects can also be applied to forms to make entering and working with data easier. For example, some forms are smart enough to recognize when a user enters an invalidly formatted e-mail address. Other effects can automatically change or update entered data so it supports or reflects any new data entered by a user. In the following activity, you will create a jump menu. A jump menu is a dynamic menu that allows users to access hyperlinks from a single drop-down menu.
ACTIVITY 10F Add a Jump Menu to a Web Page 1 In your Bike and Hike Web site, open the Sponsors page (sponsors.html) in Design view. 2 Position the insertion point to the right of the text Use the menu below to visit our sponsors. Press Shift + Enter. 3 If necessary, change the Insert toolbar to Forms view. On the toolbar, click the Jump Menu button. 4 In the Insert Jump Menu dialog box, in the Text box, key: Centuryville Bike Shop. 5 In the When selected, go to URL box, key: http://www.centuryvillebike.com. Your dialog box should look like Figure 10.20. Press the Add item button (button with the plus sign) to create a new menu item.
Figure 10.20 The Centuryville Bike Shop will be the first item in the jump menu.
Add item
6 Repeat Steps 4 and 5 using the text and link information shown in Table 10.3.
Table 10.3
Jump Menu Links
Enter the information in the table into the Insert Jump Menu dialog box.
Text
URL
New Wave Music
http://www.newwavemusicsite.com
1st Video Store
http://www.1stvideostore.com
Standard Auto Repair
http://www.standardautorepair.com
Adding Interactivity to a Web Site
297
7 When finished entering the text and links, click OK. Save the file. Preview the page in a browser. 8 Click the jump menu’s drop-down arrow. Your screen should look similar to Figure 10.21. When you select an item from the jump menu, the browser will take you to the URL. Because the jump menu’s URLs are not real, you will get an error message. Ask your teacher for permission to enter real URLs. Close your browser. Save and close your Web site. Exit Dreamweaver.
Figure 10.21 In your jump menu, each button is linked to the sponsor’s Web site.
In this unit, you learned how to work with graphics and multimedia elements, and how to add interactivity to your Web pages. All of these items help make Web sites more enjoyable and interesting. When adding these items to your pages, always follow good design guidelines. Remember that a busy page that is filled with images and motion may overwhelm visitors and cause them to surf elsewhere. List What are examples of limited-option fields?
Section 10.3 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Use forms to let visitors submit information.
1. Define form, field, label, jump menu.
• Forms consist of fields for entering specific pieces of information.
2. Explain why it is important to clearly label each field in a form.
4. Analyze Fields Could you use a drop-down list to allow users to enter their last names? Explain your answer.
• Labels tell users what information to enter into each field.
3. Summarize how a radio button is different from and similar to a check box.
• Different field types are used to request different types of information. • A jump menu allows users to access multiple links from a single menu.
298
Chapter 10
5. Make Decisions What kind of form would be needed to register for classes online? List possible names and field types for five fields on this form.
Apply It! Identify Form Fields Select five fields on a printed form that you have used. If you were to create this form for a Web site, identify the type of field you would use for each field you selected.
CHAPTER 10
Reading Review
SECTION 10.1 Scripting and Markup Languages Key Terms script, 278 interactivity, 278 JavaScript, 279 Java applet, 279 Common Gateway Interface (CGI), 279 markup language, 280 Extensible Markup Language (XML), 280 Extensible Hypertext Markup Language (XHTML), 280
Main Ideas ■ You can use Dreamweaver to insert dynamic effects
■ ■
Main Ideas
■
■ You can use scripts to make your Web pages ■ ■
■ ■
dynamic and interactive. Interactivity enables a Web site and a user to send information back and forth. Limit the amount of interactivity you include on your Web site and keep it simple and easy to understand. Scripting languages include JavaScript, Java applets, CGI, and DHTML. Markup languages include HTML, XML, and XHTML.
layer, 288
■ ■ ■
such as rollover buttons and update information into your Web pages. Clicking a banner ad takes you to the sponsor’s Web site. Rollover buttons are often used to create banner ads. Update information lets visitors know when you last made changes to your site. You may need to remove, or break, a page from a template to add dynamic effects. You can use the Behaviors panel to add DHTML scripts to a Web site. Layers are containers in an HTML page that can contain objects such as text, images, and forms.
SECTION 10.3 Adding a Form to a Web Site Key Terms form, 292 field, 292
label, 292 jump menu, 297
Main Ideas ■ Use forms to let visitors submit information. ■ Forms consist of fields for entering specific pieces ■ ■ ■ ■
of information. Labels tell users what information to enter into each field. Different field types are used to request different types of information. Always make certain to clearly label each field. A jump menu allows users to access multiple links from a single menu. Adding Interactivity to a Web Site
299
CHAPTER 10
Review and Assessment
AFTER YOU READ Reading Without Distractions When you look through this chapter, you will see illustrations, tables, features, and questions. Determine which are most important to the content you are reading. Which can wait until later? Share your list with your classmates. Are their listed items the same as yours? Come up with a reading strategy. Determine the elements that need to be included the first time you read through a chapter.
Reviewing Key Terms 1. Give three examples of interactive Web sites that you have visited. What makes each site interactive? 2. Why is scripting widely used on Web pages? 3. List three scripting languages. 4. List three markup languages. 5. CGI stands for which one of the following: Common Gateway Internet, Common Gateway Interface, or Common Graphic Interface? 6. Change the following sentence to make it true: A banner ad keeps track of the number of visitors to a site. 7. What is the purpose of a form? 8. How are form fields and labels related to one another?
Understanding Main Ideas 9. Summarize interactivity design guidelines. 10. List three types of tasks that can be performed with JavaScript. 11. Describe some advantages that DHTML has over HTML. 12. Identify a situation in which a visitor might want to know when a site was last updated. 13. Explain how adding a form can make a Web site interactive. 300
Chapter 10
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
14. Summarize the advantages and disadvantages of using layers in a Web page. Using Layers
Advantages
Disadvantages
15. List the different types of fields that you used on the Bike and Hike registration form. Identify why each field type was appropriate. Field Type
Why Appropriate
1.
1.
2.
2.
Critical Thinking 16. Evaluate why it is important to provide clearly written labels for your fields. Explain your answer. 17. Analyze You often visit a Web site that sells books. Each time you visit, the site displays a list of books in which you might be interested. The site personalizes this list to your reading habits. Briefly discuss how a site might use scripting languages to generate this list. 18. Make Predictions Do you think the use of interactive Web sites in education will increase or decrease over the next decade? Explain your answer. 19. Compare and Contrast In a previous chapter, you inserted business logos into the Sponsors Web page. In this chapter, you inserted a banner ad. What advantages does this banner ad have over the business logos? Can you think of a disadvantage?
Review and Assessment
CHAPTER 10
20. Analyze Field Types What are two advantages to using limited option fields? Can you think of a disadvantage? 21. Evaluate Why are scripting languages necessary tools for developing dynamic Web pages? How have scripting languages influenced the evolution of the Internet and the way people use Web sites? 22. Evaluate Interactivity Design Imagine you are planning a Web site that will feature your Web design portfolio. Identify the types of interactivity you would include on your site. Using a cause-effect chart like the one below, explain what function each interactive element would perform on your site. Then, with your teacher’s permission, trade plans with a partner and use the Interactivity Design Guidelines shown on page 281 to evaluate each other’s plan.
➠ ➠ ➠
Interactive Element
Function
+
25.
WebDesignDW.glencoe.com
Many different scripting languages can be used with Web pages. Each language is designed for specific types of interactivity. Here is a sample survey in which 676 programmers reported the scripting languages they use most often. Popularity of Scripting Languages Ruby TCL Rexx Python Perl PHP 0%
10%
20%
30%
40%
50%
According to the chart, which of the following statements is true? PHP is twice as popular as Python. Perl is three times as popular as TCL. The three most popular languages are PHP, Perl, and Ruby.
On your own paper, copy and complete the chart shown below.
24.
Read the paragraph and chart below and then answer the question.
Ruby is half as popular as PHP.
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items.
23. When in a table, press
Charts & Graphs
WebDesignDW.glencoe.com Study with PowerTeach
Result
Go to the book Web site shown above. To review the main points in this chapter select e-Review>PowerTeach Outlines>Chapter 10.
Result
Online Self Check
Result
Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 10.
Adding Interactivity to a Web Site
301
CHAPTER 10
Activities
1. MAKING CONNECTIONS Social Studies—Analyze Your Environment Elements such as banner ads and jump menus are designed to catch a viewer’s attention. Over the course of one day, note the items in your environment that catch your attention. These may include: ◆ Billboards
◆ Television commercials
◆ Print ads
◆ Non-commercial items
Make a list of at least three items that you have noticed. Then, analyze why these items caught your attention. Next, create a table like the one below. In the first column, list the items that caught your attention. In the second column, identify a similar object that you could insert into a Web site. In the third column, summarize how including this element in your site would make your site more appealing to visitors.
ATTENTION-GETTING ITEM
WEB SITE EQUIVALENT
EVALUATION
2. STANDARDS AT WORK Students employ technology in the development of strategies for solving problems in the real world. (NETS-S 6)
Plan Interactivity You have a friend who owns a clothing store. The store has a Web site that receives about 3,000 hits each month. Your friend is planning a large sales event for next month and would like to use the Web to advertise the event. You recommend adding interactivity to the site. Your friend asks what that means. Make specific recommendations about what interactive elements you would add to your friend’s Web site to advertise the upcoming sale. Assume your friend likes your ideas for interactivity, but would like to see a sample before making a final decision. In Dreamweaver: ◆ Create a banner ad that advertises the sale. With your teacher’s permission, go online to locate images, use tools to create images, or use images from data files if appropriate. ◆ Display the banner ad in a browser. 302
Chapter 10
CHAPTER 10
Activities
3. TEAMWORK SKILLS Add Interactive Elements to a Web Site As a team, review the presidential Web site you created in Chapter 9 (see page 273). Look for opportunities to add interactivity. Select two types of interactive elements to add to the site. These elements may include: ◆ Rollover buttons ◆ Update information ◆ Forms ◆ Jump menus Use a web diagram like the one below to brainstorm which elements you will add and the purpose that each element will serve on the Web page.
Interactive Element and Purpose
Interactive Elements
Interactive Element and Purpose
After you have decided which elements to include: 1. Use the Dreamweaver tools that you have learned about in this chapter to add the interactive elements to the site. 2. Test each element in at least two Web browsers. Do they work the same way in both browsers? If they work differently, describe the differences.
4. CHALLENGE YOURSELF Research JavaScripts Many Web sites offer free JavaScripts that anyone can use in their Web sites. 1. Locate two sites that offer free JavaScripts. 2. Review the options that are available. What categories of scripts are available at each site? What are the copyright and fair use policies of the site? 3. On the Web sites you have chosen, locate two different JavaScripts for clocks. 4. View and print the source code for each JavaScript. 5. Compare the two source codes. What similarities do they share? What are the primary differences between the two scripts? Why do you think the two scripts are both similar and different? 6. Create a Web page. Insert the JavaScripts into the page. Do the scripts function as you thought they would? 7. Evaluate the advantages of using JavaScripts that others have written. Are there any drawbacks? Adding Interactivity to a Web Site
303
CHAPTER 10
Projects
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Create a Drama Club Web Site
The drama club at your school wants to provide a way to order tickets online. In this activity, you will create a Web page for the drama club. Create a Dreamweaver Web page for the drama club. Use the Language Club template as your site template. Add a banner ad that reads: Buy Your Tickets Now! Add text to the page announcing an upcoming show. If your school is not planning a play or musical, use the following text: Our new show is “Our Town” by Thornton Wilder. Performances start at 7 p.m. on Friday, Saturday, and Sunday. Use the easy order form below to buy your tickets early! Add a short applause sound that will play upon loading the page. If necessary, cite your sources on your page. Add update information to the page. Save the page. Preview it in a browser to test the banner ad and the sound.
2. Add an Order Form to a Web Site
304
Add an order form to the Drama Club Web site you created in Activity #1. Open your Drama Club Web page in Dreamweaver. Insert a form onto the page. Use the Forms toolbar to define a form area. Key the form’s title and introductory text as shown on this page into the form area. Insert a table with 2 columns and 5 rows into the form area. Add the form fields and labels shown on this page into the table. Adjust the table as needed to make the form display correctly. Proofread and save your work. View your completed page in a browser.
Chapter 10
CHAPTER 10
Projects
Read the projects described below. Then follow the directions to complete each project.
1. Create a Sandwich Takeout Site Create a one-page Web site in Dreamweaver for a sandwich restaurant that takes orders online. ◆ Add text to the page that includes the date and time and announces delivery hours of 11 a.m. to 11 p.m. Add other text that advertises the food and guarantees on-time delivery. ◆ Create a banner ad that reads: Sandwiches To Go: 555-5555. ◆ Create an order form that asks for the customer’s name, address, telephone number, and e-mail address. Also include where and when items should be delivered. ◆ In the form, include a menu that lists several sizes of sandwiches and the toppings available. For each item, select the best way to make choices (radio buttons, check boxes, pull-down menus, and so on). ◆ Proofread and save your work. View the page in a browser and test the order form. Reset the options when finished. (Note: The Submit button will not work until the site has been published. You will not publish the site at this time.)
2. Create a Form to Collect Survey Data You are conducting research to see which books on a school reading list were most popular. Obtain a list of recommended fiction books for 5th and 6th graders from a school librarian or a public library. Then, decide what items you need to complete your research. For example, you may want to know which books were most popular with boys and which were most popular with girls. ◆ Based on what you want to learn, create a form in Dreamweaver for students to use. Lay out the form so it is easy for young readers to understand and follow. ◆ Add fields to the form, but only include fields that will help you with your research and that do not violate personal privacy guidelines. For example, you do not need students’ addresses or phone numbers. ◆ Proofread and save your work. Preview the site in a browser.
Adding Interactivity to a Web Site
305
Civic Responsibility: Create a Web Site for Voters Create a Web site that encourages people 18 and older to vote. 1. Plan a Web site that includes a home page and two other pages.
◆ The home page should include introductory text. You will also insert a JavaScript file that displays famous presidential quotes and slogans. ◆ The other two pages should contain information about registering to vote and reasons why it is important to vote. 2. Develop the content for the three pages. Locate a graphic to include on each page. Identify links you can include to send visitors to related sites. 3. Link the home page to the other two pages. 4. Add the text and graphics to the three pages. 5. Change to Code view, select all of the text. Click Delete. Browse to the DataFiles\Ch10\Multimedia folder. Copy the quotes.html file’s source code. Paste it in the home page’s source code. You can change the background color by editing the code, if you wish. 6. Preview your site in a browser. Test all navigation and hyperlinks. Spell check and proofread your work. Make any needed changes or improvements to the site.
Use Technology Tools: Create a Web Photo Album Create a Web photo album about a topic that interests you, such as nature, music, sports, literature, or movies. 1. Plan a Web page with a Web photo album to display your images. 2. Gather the images for your gallery. Use as many of the technology tools you have available, such as the Internet or scanners and cameras, to gather the images. You may use drawings, Clip Art, photos, and animations. 3. Place the images in the album. Crop, resize, and resample the images as needed. Add captions to each image. 4. Create a form in which visitor’s can submit names and e-mail addresses so you can let them know when you have updated the gallery. 5. Evaluate your photo album in a browser. Make changes as needed.
306
Chapter 10
Create an Educational Web Site Create an eight-page Web site that provides information about the the seven continents. The Web site is targeted to elementary school children. The home page will introduce the site and provide a link to facts about the seven continents.
Web Page Checklist
✓ ❑
Africa Antarctica
✓ ❑
Asia Australia
✓ ❑
Europe
✓ ❑
North America South America When creating your Web site, follow these steps: 1. Conduct research about the seven continents to develop the content for the site. 2. Gather or create multimedia components such as sound, video, and animations to include in the site. For example, you could use an animation of a spinning globe. 3. Remember to use all multimedia images in an ethical manner. Follow copyright guidelines and any Terms of Use agreements from the copyright holder. 4. Use Dreamweaver to create a Web site that has a home page and seven additional pages (one for each continent). Create the navigation structure for the site. Apply a color scheme and text styles to the site. 5. Build the pages by adding the content and multimedia elements you have developed.
✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑
✓ ❑ ✓ ❑
6. Create hyperlinks between the pages. 7. Use the Web page checklist shown on this page to evaluate your site.
✓ ❑
8. Ask a peer to review your finished site and make any needed changes.
✓ ❑
9. For your portfolio, include a screen shot and an electronic copy of your finished product.
✓ ❑
INFORMATION DESIGN The subject of the Web site is clearly identified. Information is accurate and organized logically. Text is broken into small blocks. All content supports the site’s purpose and goals. LAYOUT AND PRESENTATION DESIGN The design is consistent, uncluttered, and supports the site’s goals. The fonts are easy to read. Related items are grouped. Text blocks are separated by white space. Images are cropped and resized to work well on the Web page. MULTIMEDIA COMPONENTS Multimedia elements enhance the content of the page. All multimedia elements function properly in a variety of Web browsers. All multimedia elements are properly cited. Alternative text has been added as needed. Users understand how to use all multimedia elements.
Adding Interactivity to a Web Site
307
UNIT
4
The Web Site Development Process
Go to this book’s Web site at WebDesignDW.glencoe.com. Click Unit Activities and select Unit 4 Copyright and Fair Use. Recognize the importance of understanding copyright policies, and learn what information you can and cannot use legally.
308
Think About It It Takes Teamwork It often takes a team of people to create a large Web site. Besides using tools such as Dreamweaver or HTML, project teams also need to use “soft skills” such as communication and problem-solving skills to get the job done.
Discover Soft Skills Activity What other soft skills (also called “people skills”) do you think you need to have to create a Web site? Name as many as you can think of and explain why the skill is important.
309
CHAPTER
11
Project Planning
YOU WILL LEARN TO… Section 11.1 Identify the stages of the Web site development life cycle Identify the responsibilities of project team members Use a checklist to evaluate progress Explain the use of source control Section 11.2 Explain project scope Define e-commerce Identify types of e-commerce Summarize guidelines for developing e-commerce Web sites
WHY IT MATTERS ................................................. Each member of a sports team has a specific assignment. Some members focus on defense while others take shots to score points. Teams win when all members work together. Complex Web sites are often created by teams. Web site development teams create winning sites when all team members contribute their best effort to their assigned tasks. Think about the qualities that you admire about good teams and team members. In a short paragraph, identify two characteristics of good teams and two characteristics of good team members. Explain why you think these characteristics help create a winning team.
310
Chapter 11
CHAPTER
11
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 11.1 Research Team Jobs ................. 319 11.2 Compare E-commerce Sites ..... 326 You Try It Activities 11A Identify Team Responsibilities ... 317 11B Enable Source Control .............. 318 11C Identify Tasks and Milestones ... 325 Chapter Assessment Making Connections ............................ Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................
330 330 331 331
You Try It Skills Studio Evaluate Web Sites .............................. 332 Compare Evaluations .......................... 332 Web Design Projects Identify Client Goals ............................ 333 Create a Schedule ............................... 333
IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects
ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Use Notes When you are reading, you may not want to stop to look up a word or review a difficult concept. To avoid interruptions, keep a note pad handy. Whenever you come upon a section or term you want to go back to, write the word or your question on the note paper and mark the place. After you have finished the chapter, go back to the places you marked. Look up the terms or try to answer your questions based on what you have read.
WebDesignDW.glencoe.com
Project Planning
311
SECTION 11.1 THE PROJECT LIFE CYCLE Focus on Reading Read to Find Out The main purpose of this section is to explain how every Web development project follows the same basic development cycle. You will learn about the roles and responsibilities of project team members.
Main Ideas
Key Terms
Reading Strategy
A project team usually develops a Web site for the client. Each team member has specific responsibilities and works with other team members to create a site that meets the client’s goals and expectations.
client client liaison representative milestone project manager source control remote server
Identify one responsibility of six different project team members. Use a table similar to the one below (also available online).
Figure 11.1 Every Web development project follows the same basic life cycle. Why do you think a circle is used to illustrate the Web development process?
Team Member
Responsibility
Client Liaison Representative
Web sites are often developed by project teams. Project teams follow the same steps that you have used to create Web sites in the first three units of this book. The primary difference is that, in a team, different people are responsible for different tasks.
Overview of the Project Life Cycle What are the basic stages of the Web development life cycle?
Stage 5 Evaluation and Maintenance
Stage 1 Analysis and Planning
Stage 2 Design and Development
Stage 4 Implementation
Stage 3 Testing
312
Chapter 11
Web sites developed by teams follow a basic life cycle model, as shown in Figure 11.1. During each stage of the life cycle, team members must complete certain steps before they can start other steps. Each project team member must understand their specific responsibilities, and the timelines needed to complete the project. The amount of time assigned to each stage of the life cycle varies by project, and stages may overlap. For example, people may begin designing the site’s navigation scheme before all of the site’s content has been determined. The key is to remember that every Web development project follows this basic pattern. Analyze Why may life cycle stages overlap?
WebDesignDW.glencoe.com
Tasks in the Project Life Cycle How does my role fit into the life cycle model of Web site development?
The number of people involved on a Web site development team varies by project. Typical team members include a client liaison representative, project manager, Web author, Web designer, Web developer, and Webmaster. Different team members participate in different stages of the project. For example, as shown in Table 11.1, the Webmaster usually becomes involved during the project’s testing phase, while the client liaison representative and project manager are involved in every stage. It is important for every team member to understand the project’s life cycle and know how his or her role fits into the model.
Activity 11.1 Explore Web Programming Identify the resources available to Web developers by visiting WebDesignDW.glencoe.com.
Table 11.1
Project Life Cycle Life Cycle Stage
Purpose
Team Members Actively Participating
Analysis and Planning
• Meet with client to determine site’s goals, budget, and scope • Research site’s audience • Set project milestones
• Client liaison representative • Project manager
Design and Development
• Determine navigation scheme • Develop content • Plan site’s layout and visual appearance
• Client liaison representative • Project manager • Web author • Web designer • Web developer
Testing
• Finalize site’s beta (final test) version • Evaluate beta version
• Client liaison representative • Project manager • Web author • Web designer • Web developer • Webmaster
Implementation
• Transfer site to Web server • Publicize Web site
Team members work through a basic life cycle as they create a Web site. Why do certain team members participate throughout the life cycle?
You Should Know Every team member must be able to work well with others. Use your team projects in this course and other courses as an opportunity to learn teamwork.
Identify Which Web development project team members take part in all stages of a project?
WebDesignDW.glencoe.com
Project Planning
313
Forming a Project Team What team members are essential to the Web development process?
Most Web sites are developed for a client. The client is the person or organization who pays for the work. Examples of clients include: ◆ a corporation that wants to develop a corporate presence site. ◆ an organization that needs a convenient way to stay in touch with its members. ◆ a retail store that wants to develop an e-commerce site.
Client Liaison Representative The client liaison representative maintains contact with the client throughout the Web site development process. Other team members may talk with the client. The client liaison representative, however, is the person responsible for understanding the client’s needs and keeping all other team members working toward the client’s goals. The client liaison representative asks many questions, including: ◆ What are the specific goals for the site? ◆ Who is the target audience? ◆ What is the budget? ◆ When does the site need to be published? ◆ Who will approve the site? ◆ How often does the client want a status report? During the analysis and planning stage, the client liaison representative defines the deliverables, which are the actual work that the team will submit. Since a Web site development project may last for many months, the client liaison representative works with the client to set milestones. A milestone is a specific step in the Web site development process and a date for its completion. Examples of milestones are shown in Figure 11.2.
Figure 11.2
Select images
Establishing deliverables and milestones is an important part of a Web development project. What milestones might need to be set for a Web development project?
Determine basic design
Web Site Development Milestones Develop content
Determine navigation
Project Manager The project manager oversees the work of all the team members and ensures that team members work together. He or she assigns responsibilities and specific tasks to team members and tracks their progress to make sure the completed Web site is delivered on time and on budget. The project manager also provides resources and help as needed to achieve this goal, as shown in Figure 11.3 on page 315. 314
Chapter 11
Figure 11.3 Project managers are problem solvers. What part of project management would you find most interesting?
Web Author The Web author, also known as the content developer, writes the material that appears on the Web site. Web authors may also select images that support or complement a site’s text. Large projects may require several Web authors. When a project has multiple Web authors, a content editor may work with the team of Web authors to gather all the material that will appear on the site. Web authors use outlines to explain their ideas about the content for each page. As the team decides on the specific pages to include in the site, the Web author begins writing the words. Web site text should: ◆ support the site’s purpose and goals. ◆ be presented in an easy-to-read format. ◆ be appealing.
Figure 11.4 Web designers create animations and other visual elements for Web sites. Why do you think Web authors and Web designers must work together?
◆ be accurate and grammatically correct.
Web Designer The Web designer provides visual direction for the Web site (see Figure 11.4). Based on the site’s goals and content, the Web designer selects a color palette, gives shape and definition to each page, and provides a consistent look to the site. The Web designer then makes sketches or creates storyboards for the site. After the team has approved the prototypes, the Web designer: ◆ creates the graphics, including navigation buttons, animations, interface layout, and charts. ◆ creates or obtains photographs, maps, and other visuals to enhance the site. Project Planning
315
Web Developer
Figure 11.5 Many Web developers use storyboards to map a Web site. Why should you consider how visitors move between a Web site’s pages?
Storyboards • Model site • Determine navigation
➠
Web developers use software applications, such as Dreamweaver, and authoring languages, such as HTML, to develop or program the Web site. The Web developer’s goal is to enable visitors to successfully load the Web site in their browser, to navigate within the site, and to navigate to external links. To meet this goal, the Web developer explores the Web server that will host the site to learn the technical requirements. He or she also works with the client to identify the types of browsers that the audience will be using. As shown in Figure 11.5, Web developers often use storyboards to determine a Web site’s design and navigation. They focus on the interactivity of the site, determining how visitors will move between pages. They then use the storyboards to create an alpha, or first, version of the Web site. After the team and client review this site, the Web developer creates a beta, or final test, version of the site. The site is then reviewed, tested, and published. Alpha Site Includes • Placeholder text and graphics • Basic navigation
➠
Beta Site Includes • Final text and graphics • Final navigation
➠
Final Site • Test Beta site • Resolve issues • Publish site
Webmaster The Webmaster implements and maintains the completed site. He or she posts the site on the Web server, keeps the site updated, and answers questions from visitors. The Webmaster also adds new content as provided by the project team, tests links on a regular basis, and updates external links as needed. Contrast What is the difference between a Web developer and a Web designer? Project Management Software programs such as Microsoft Project are available to help manage schedules and assign tasks. It is a good idea to track the status and priority of your tasks, including when they were last modified and whether or not they have been completed.
316
Chapter 11
Evaluating Progress How can a Web site checklist help me to evaluate a Web site’s progress?
When a project starts, the project manager holds a meeting to explain the project and to define team members’ roles and responsibilities. Between team meetings, each team member completes specific assignments. Assignments are completed either by individuals or by groups. During the design and development stage, the team meets periodically to assess team members’ progress and resolve outstanding issues. Teams function best when each team member takes responsibility for completing assigned tasks. The project manager holds team members accountable for their work.
Using Web Site Development Checklists Throughout this unit, you will be creating a Web site for an online company that sells pre-designed blank DVD and CDR disks called MyDiskDesigns.biz. The company has decided to target its products to individuals who purchase CDs and DVDs in quantity, such as teens, tech-savvy consumers, and businesses. In the following activity, you will use a checklist to identify the team members responsible for performing specific tasks during the site’s development.
ACTIVITY 11A Identify Team Responsibilities 1 Create a Web site development checklist like the one in Figure 11.6. This checklist contains a series of questions designed to help you evaluate the interaction, information, and presentation design of the MyDiskDesigns.biz Web site. 2 Add two columns to the right of your checklist. 3 Label the left column: Team Member(s). 4 In the left column, next to each question on your checklist, identify the project team member who is responsible for that step. For example, the Web author is responsible for ensuring the accuracy of the site’s information. 5 If more than one team member is responsible for evaluating a particular item, identify all the team members responsible for completing that task. 6 Label the right column: Project Stage(s). 7 In the right column, next to each question on your checklist, identify the stage of the development cycle in which this evaluation step is completed. Again, note that specific items may need to be evaluated at more than one stage of the life cycle. For example, links should be tested in the development, testing, and maintenance stages.
Figure 11.6 Checklists enable team members to use consistent criteria for evaluating sites.
Web Site Development Checklist INFORMATION DESIGN ✓ Is the information accurate? ❑ ✓ Is the information concise, clear, and spelled correctly? ❑ ✓ Does the content support the site’s purpose and goals? ❑ LAYOUT ✓ Does the site have enough white space? ❑ ✓ Is important content emphasized? ❑ ✓ Are related items grouped? ❑ ✓ Is text aligned consistently? ❑ ✓ Are all links clearly labeled? ❑ NAVIGATION SCHEME ✓ Can you move easily between pages? ❑ ✓ Can you locate specific information quickly? ❑ ✓ Do all internal and external hyperlinks work? ❑ ✓ Can you easily return to the home page? ❑ USER-FRIENDLINESS ✓ Does the site download quickly? ❑ ✓ Is the text easy to read? ❑ ✓ Are both graphic and text links used? ❑ ✓ Is important information displayed in the safe area? ❑ ✓ Does the site include accessibility features? ❑ PRESENTATION DESIGN ✓ Is the color palette consistent? ❑ ✓ Does the design support the site’s purpose and goals? ❑ ✓ Are graphics and multimedia used effectively? ❑ ✓ Do all multimedia features work properly? ❑
Project Planning
317
Using Check In/Check Out Caution To complete You Try It activity 11B, you must have access to files both on a server and on your computer. In addition, you must have the Web site you are working on already defined in Dreamweaver.
When many people are working on a Web site, it is important that different team members do not work on the same page at the same time. Dreamweaver’s Check In/Check Out feature, also referred to as source control, protects a site’s files by ensuring that only one person at a time can edit a particular file. When you check out a file for editing, a green checkmark appears next to the file. If another team member has a file checked out, a red checkmark appears instead. A file must be checked back in before others can make any additional changes. This control avoids the frustration of having one person overwrite another’s changes. The following activity will show you how to enable the Check In/Check Out feature in Dreamweaver. While you will enable the feature, it will not work completely. To make the feature fully functional, your Web site files must be uploaded from your computer (the location where the Web site was created) to a remote server, such as an FTP server, that is connected to the Web (you will learn more about this subject in Chapter 14). Because computer systems work differently, ask for your teacher’s permission before enabling the Check In/Check Out feature.
ACTIVITY 11B Enable Source Control 1 Open your Language Club Web site in Dreamweaver. 2 Choose Site>Manage Sites from the menu bar. In the Manage Sites dialog box, select your Language Club Web site and click Edit.
Figure 11.7
3 In the Site Definition for Language Club dialog box, click the Advanced tab and select Remote Info from the Category list.
The Site Definition for Language Club dialog box.
4 Click the Access drop-down arrow and select the FTP server connection. Select the local folder where your Web documents are stored. Click the Enable file check in and check out option. 5 In the Check Out name text box under the Check out files when opening check box, key your name. 6 In the Email address text box, enter your e-mail address or an address provided by your teacher. Your screen should look similar to Figure 11.7. 7 Click OK and select Done on the Manage Sites dialog box.
Enable file check in and check out Check out files when opening
318
Chapter 11
Check out name
Email address
8 If you are connected to a remote server, you can click Check Out to lock the file so that only you can edit it (see Figure 11.8).
Figure 11.8 Green checkmarks show that you have checked out the file. Red checkmarks show that someone else has the file checked out.
Check In Check Out Green checkmarks indicate that this computer has checked out these two files.
Red checkmarks appear when files are checked out by another user.
9 To disable the source control feature, repeat Steps 1 and 2. In the Site Definition for index dialog box, select Remote Info from the Category list and click in the Check Out name text box. Press Control + A to select all the text. Press Delete to remove your name. 10 Click in the Email address text box. Press Control + A to select all. Press Delete to remove your e-mail address. Deselect the Enable file check in and check out check box. Click OK. Click Done.
Explain How does Dreamweaver’s source control feature protect a Web site’s files?
Section 11.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Web site development follows a basic life cycle.
4. Analyze Options Two team members prefer a hi-tech look for a Web site, while two prefer a classic look. How can they reach an agreement?
• The client liaison works with the client to define variables and establish milestones. • Project teams use Web site checklists to evaluate the effectiveness of the site’s interaction, information, and presentation design.
2. Explain why it is important to have a project manager when developing a Web site. 3. Describe how project team members use checklists.
5. Draw Conclusions Why do you think testing happens before implementation in the life cycle of Web site development?
Apply It! Research Team Jobs Select one of the following jobs: project manager, Web author, Web designer, or Web developer. Research the job requirements for this position and write a paragraph summarizing your findings.
Project Planning
319
Ethics in the Workgroup
T
o be a successful member of a team, you need to understand how to share information and resolve conflicts.
Sharing Sharing ideas, or collaborating, is an important part of being a team member. If you have a great idea, a group can help you develop it. You can work out any potential problems or improvements with your group before you put your idea in action. When workgroups do not share resources and ideas, the group becomes less productive. Each member needs to appreciate the diverse skills and backgrounds of other members. Combining individual talents can create a strong team.
Reaching Common Goals It is a constant challenge to balance one’s own wishes with those of the group. Imagine you are designing the interface of a new Web site. Your work will look good if the new site includes a lot of graphics. The project manager, however, is worried about budget and time restrictions. The group votes to reduce the number of graphics so that the site can “go live” sooner. Although your personal interests are different from those of the group as a whole, you accept the majority vote.
Effective teamwork requires communication skills and the ability to compromise.
Negotiating When you negotiate, you participate with the other group members in considering different points of view. Look at your preferences from a business perspective, not a personal one, and use logic to support your position. Then the team can reach a compromise that is most acceptable to the whole group.
1. Evaluate Why is it useful to work in a team with 2. Describe Processes In a group, work out the people from diverse backgrounds? What are some purpose, audience, and elements of a Web page of the benefits and problems that might occur about a popular tourist destination. Describe the when working as a team? processes your group used to resolve conflicts.
320
Chapter 11
SECTION 11.2 DETERMINING PROJECT SCOPE Focus on Reading Read to Find Out The main focus of this section is to help you to determine the amount of time, money, resources, and people needed to develop an e-commerce Web site. Read to find out why knowing your target market is essential to the development of an e-commerce Web site.
Main Ideas
Key Terms
Reading Strategy
The amount of time, money, resources, and people needed to complete a Web site helps to determine the project’s scope. E-commerce sites often require significant amounts of time, money, and people to complete.
Identify three items to be considered when designing an e-commerce Web site. Use an organizer like the one below (also available online). Designing an E-commerce Web site
One of the first steps in starting a new Web development project is determining how many pages and features a site will include. Identifying the size and complexity of a site helps determine the amount of resources needed to complete that site.
Analysis and Planning What elements should I consider when planning a Web site?
The first stage in the Web site development life cycle involves analysis and planning. During this stage, the client liaison representative meets with the client to identify the site’s purpose, goals, and audience. The Web site’s mission statement helps determine that site’s content. A list is usually made of all the content and features that people want to include on the Web site. This list of desired items is then balanced against the amount of time, money, and resources available for the project. This balancing act defines the project’s scope, which is the set of features and content that can be provided given the time and resources available. It is often necessary to omit some content or features to stay within the project’s budget and schedule. The project team then reviews the project’s scope during this initial stage to determine what is and is not essential to the site.
Activity 11.2 Explore E-Commerce Identify the growing importance of e-commerce to businesses by visiting WebDesignDW.glencoe.com.
Define What is a project’s scope?
WebDesignDW.glencoe.com
Project Planning
321
The Business of E-commerce Figure 11.9
What are some of the advantages of running an e-commerce site?
Some businesses only exist online. What challenges do online businesses face?
E-commerce is the electronic buying and selling of goods and services. The growth of e-commerce sites has transformed the Internet into a worldwide marketplace.
The Role of E-commerce Although e-commerce includes all forms of electronic transactions, including access to bank accounts through ATMs, this unit will focus on online exchanges. Online e-commerce exchanges include: ◆ customers ordering products online and receiving them through the mail. ◆ businesses providing online technical product support for a fee. ◆ educational institutions offering online courses for a fee. ◆ government agencies allowing citizens to renew their license plates online.
Table 11.3 Consumers can often buy the same products in retail stores and online. Which advantage of online shopping is most helpful to you?
Some businesses offer online services in addition to a more traditional brick-and-mortar (i.e., an actual physical store) shopping experience. Other businesses, such as ebay.com, only do business online (see Figure 11.9). E-commerce sites provide an alternative to retail shopping. Table 11.3 lists the advantages and disadvantages of traditional and online shopping.
Traditional versus Online Shopping Traditional Retail Shopping
Online Shopping
Advantages
• You can examine the merchandise. • You can pay with cash, checks, credit cards, or debit cards. • You can take the merchandise home immediately.
• You can shop from home, 24 hours a day, 7 days a week. • You can easily compare prices among different online sources. • You can purchase merchandise that is not available in your local community.
Disadvantages
• You must travel to the store. • You cannot easily compare prices. • Your local stores may not carry the merchandise.
• You cannot examine the merchandise closely. • You usually must pay with a debit or credit card. • You must wait for the merchandise to be delivered. • You may have to pay shipping and handling charges.
322
Chapter 11
Types of E-commerce E-commerce Web sites offer a variety of goods and services to individuals and businesses. The online marketplace can be divided into two main categories: business-to-business (B2B) and business-to-consumer (B2C). The two types of e-commerce are compared in Figure 11.10.
Figure 11.10
Business-to-Business (B2B) Businesses sell goods and services to other businesses.
E-commerce Sites
Business-to-Consumer (B2C) Businesses sell goods and services to individual consumers.
E-commerce is the electronic buying and selling of goods and services. What are the two main categories of e-commerce Web sites?
Summarize What is the difference between a businessto-business and business-to-consumer e-commerce site?
Designing an E-commerce Web Site How should I design an e-commerce Web site?
In the early days of e-commerce, some people thought that simply making products available online would bring success. However, businesses soon realized that they must market their e-commerce Web sites for people to visit them.
Determining the Target Market When you plan an e-commerce site, you must know your target market. Your target market is the group of potential customers for the product or service that you are selling. Businesses often consider the characteristics of market segments when defining their target market. A market segment is a group of people who share common traits or interests and who have money to spend. Businesses use images, sound, colors, and text on Web sites to appeal to particular age groups, as shown in Figure 11.11. Other characteristics used to define a target market include income, educational background, interests, and activities.
Figure 11.11 Businesses target their products to people in specific age groups. How does this Web site target a specific age group?
Project Planning
323
Creating the Schedule You Should Know The amount of time assigned to each stage of the Web development process varies by project.
It is important to set a realistic schedule when developing a Web site. Project managers are responsible for determining a Web site development project’s schedule. The schedule identifies the project’s milestones. Project managers often determine these due dates by working backwards from the date the site is scheduled to go live (be published). Creating a detailed schedule makes it easier to determine how long particular stages of the project will take to complete. As shown in Figure 11.12, some tasks can only begin after other tasks are completed. Other tasks can occur at the same time. For example, content development can begin while planning for the site’s interaction and presentation is still taking place. Other tasks in the Web development process that can overlap include: ◆ testing, design, and development. ◆ implementation and testing. ◆ evaluation, maintenance, and implementation.
Figure 11.12
The Project Life Cycle
Stages in the development process often overlap. Why does testing overlap with design and development?
Stage 1
Project Stage
Stage 2
Stage 3 Stage 4
Stage 5 1
2
3
4
5
6
7
8
9 10 11 12 13 14 15 16 17 18 19 20
Development Time in Weeks Analysis and Planning
Implementation
Design and Development
Evaluation and Maintenance
Testing
In the following You Try It activity, you will identify the tasks and milestones that the MyDiskDesigns.biz Web development team will need to complete in order to stay on task. 324
Chapter 11
ACTIVITY 11C Identify Tasks and Milestones 1 Read the proposal from MyDiskDesigns.biz found in the DataFiles\Ch11\Text folder (click proposal.doc). MyDiskDesigns.biz has prepared this proposal to define the scope of its new Web development project. 2 As you read the proposal, list the tasks that people on the Web site development team will need to complete in each stage of the project. 3 Then list the team members who will be responsible for completing each task. 4 Create a list of the milestones that the project team will need to meet in order for the site to go live in three months. 5 Develop a schedule for the Web development project. 6 Use the information in Table 11.4 to help you determine how long particular stages of the project will take to complete.
Table 11.4
Web Site Development Schedule Time Frame
Stage
Sample Tasks
4 to 6 weeks
Analysis and Planning
• Research client’s needs. • Define the target market. • Determine what equipment the site will need to function properly. • Identify available resources and set a realistic budget. • Set milestones for the project.
8 to 10 weeks
Design and Developmment
• Design interaction. • Design presentation. • Gather information and write content. • Gather visual elements. • Program site.
4 to 5 weeks
Testing
• Debug HTML code as needed. • Test all elements of the site in two browsers. • Fix all problems and retest as needed.
1 week
Implementation
• Transfer all files in the site to the Web server hosting the site. • Test the site after moving it and before going live. • Go live.
Ongoing
Evaluation and Maintenance
• Respond to customer feedback. • Test internal and external links regularly. • Communicate ideas for improvement to project team.
Schedules help team members stay on task.
Shortcut A quick way to undo or remove a change is to press Control + Z. To restore the change, press Control + Shift + Z.
Project Planning
325
Considering Budget and Human Resources Caution When determining a budget for an e-commerce site, businesses must also ensure that the servers and telecommunications lines are able to handle the amount of customer traffic that the business thinks their site will receive.
As businesses seek to establish or expand their presence online, they must determine what resources they are willing to commit to a project.
Determining Budget A budget defines the total financial resources available for site development. Budgets help to define the scope of the project. For example, MyDiskDesigns.biz would like to develop an electronic store for its products. However, after considering all the options available, it decides that the budget is only sufficient to provide product information online and to accept e-mail orders. Determining Human Resources When businesses decide that e-commerce will be a primary way to sell to customers, they must decide whether to use in-house employees to develop and maintain the site. The in-house solution brings together people who already have knowledge of the existing business. There are potential drawbacks to an in-house solution, however, including a lack of computer expertise among existing employees or employees who cannot commit time to developing the site, and the cost to purchase and deploy the software needed to maintain an e-commerce site. Businesses that do not expect significant sales from e-commerce may choose less costly solutions, such as instant storefronts. An instant storefront is a portal site that helps businesses create their own e-commerce Web sites in a few hours. Some instant storefronts, such as Microsoft’s bCentral, help businesses market their sites. Others also help businesses through the maze of privacy and security issues that can be difficult for small businesses to handle on their own. List How can businesses with limited resources set up an online presence?
Section 11.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• E-commerce is the electronic buying and selling of goods and services.
3. Predict Outcomes What effect do you think e-commerce will have in the next ten years on traditional retail stores?
• Project managers determine the schedule for all aspects of the site’s life cycle. • Businesses with limited resources may use instant storefronts to quickly set up an online presence.
326
Chapter 11
2. Explain the difference between an in-house solution and an instant storefront.
4. Draw Conclusions Why do you think you need to consider a budget before you begin working on an e-commerce Web site?
Apply It! Compare E-commerce Sites Find two e-commerce sites on the World Wide Web that sell similar products. Compare and contrast the two sites and write two paragraphs summarizing your findings.
Main Ideas ■ Project teams often develop Web sites. ■ Web site development follows a basic life cycle. ■ Teams vary in size, but often include a client liaison
■ ■
■
■
■ During analysis and planning, the client liaison
■ ■
■ ■ ■ ■
representative works with the client to identify the site’s purpose, goals, and audience. E-commerce is the electronic buying and selling of goods and services. Business-to-business (B2B) e-commerce involves transactions between businesses, while businessto-consumer (B2C) e-commerce involves businesses selling to individual consumers. E-commerce businesses must know their target markets. Project managers determine the schedule for all aspects of the site’s life cycle. Web site developers base their choices on the budget and resources available. Businesses with limited resources may use instant storefronts to quickly set up an online presence.
The Project Life Cycle Analysis and Planning
Stage 1 Design and Development Testing
Stage 2 Project Stage
■
representative, project manager, Web author, Web designer, Web developer, and Webmaster. Team members have specific assignments that help the team achieve the goal of developing a Web site that meets the client’s expectations. The client liaison works with the client to define deliverables and establish milestones. The project manager holds team members accountable for their work and for the team’s progress. Project teams use Web site checklists to evaluate the effectiveness of the site’s interaction, information, and presentation design. Source control helps teams manage the files they are creating for a Web site.
Main Ideas
Implementation
Stage 3
Evaluation and Maintenance
Stage 4
Stage 5 1
2
3
4
5
6
7
8
9 10 11 12 13 14 15 16 17 18 19 20
Development Time in Weeks
Project Planning
327
CHAPTER 11
Review and Assessment
AFTER YOU READ Revisit Your Notes Go back to the sections of the chapter where you have notes. Look up any words you recorded. Review illustrations or reread sections to help understand complicated ideas. If you still are having trouble, ask your teacher to review any concepts that you still have questions about.
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
15. Identify the phases in the Web site development life cycle. Explain why some overlap may occur within stages of the process. Phase 1
➠
Phase 2
➠
Phase 3
➠
Phase 4
➠
Phase 5
Reviewing Key Terms
328
Chapter 11
➠
9. Summarize the ways both project managers and Web developers contribute to Web site development teams. 10. Explain the major tasks that a Web designer performs. How do these differ from the responsibilities of a Web developer? What are the similarities? 11. Describe how Web site checklists help team members evaluate and track their performance. 12. Discuss the factors to consider when identifying a project’s scope. 13. Explain the difference between B2B and B2C e-commerce. 14. Explain why businesses must market their e-commerce sites.
E-commerce Transactions
➠
Understanding Main Ideas
16. Identify three types of e-commerce transactions.
➠
1. Who are typical team members for a Web site development project? 2. Who are typical clients for Web site development teams? 3. How does the role of a client liaison differ from that of a project manager? 4. What are the advantages of setting milestones for a project? 5. What is source control? 6. What is e-commerce? 7. What are the two main categories of e-commerce Web sites? 8. What type of portal site enables small businesses to easily and quickly begin selling products on the Web?
Type 1
Type 2
Type 3
Critical Thinking 17. Summarize This chapter discusses why knowing your target market is essential to the development of an e-commerce Web site. What characteristics do businesses use to define a market segment? 18. Make Decisions The Web designer and Web developer on a project team disagree about who should create the animations for the site. Each thinks the other person should perform this task. As the project manager, what would you do to resolve the disagreement so that the project can move ahead? What other tasks will they perform? How will they work together? Copy the Venn diagram shown below and use it to illustrate your answer.
Web Designer
Web Developer
Review and Assessment
CHAPTER 11
19. Analyze Project Scope An e-commerce site’s mission statement is as follows: “The instant storefront will provide easy access to all products in our catalog. Our products, targeted to buyers from the ages of 15 to 25, will ship within 48 hours of the order.” Make a list of factors to consider when defining the scope of this e-commerce site. 20. Sequence Steps During which parts of the development cycle is it important to test your Web site? Explain your answer. 21. Identify Milestones You are the client liaison representative for a local Web development company wanting to do more business with companies catering to teens. You plan to meet with the client’s marketing director about a new Web site for the 24 Cinema Theater. What milestones will need to be established and what kinds of deliverables will need to be defined? Use a table like the one shown below to illustrate your answer. Milestones
•
Deliverable
Milestone 2
•
Deliverable
On your own paper, copy and complete the chart of general Dreamweaver editing commands shown below.
+
23.
+
24.
+
The Web author, also known as the content developer, writes the material that appears on the Web site. Web authors may also select images for the Web site that support or complement the site’s text. Large projects may require several Web authors. When a project has multiple Web authors, a content editor may work with the team of Web authors to gather all the material that will appear on the site. Web authors use outlines to describe their ideas for each page. According to the paragraph, which of the following statements is true? The sole job of Web authors is to write text for Web sites. A content developer may choose images that will appear on the Web site.
A project may have several content editors, but there is only one Web author.
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items.
22.
Read the paragraph below and then answer the question.
Outlines created by content editors are used to describe their ideas for the site.
Deliverables
Milestone 1
Reading & Writing
WebDesignDW.glencoe.com Study with PowerTeach Go to the book Web site shown above. To review the main points in this chapter, select e-Review>PowerTeach Outlines>Chapter 11.
Result
Online Self Check
WebDesignDW.glencoe.com
+
Result
Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 11.
Result
Project Planning
329
CHAPTER 11
Activities
1. MAKING CONNECTIONS Math—Conduct a Salary Survey Research online to find salary ranges for the following jobs: ◆ Webmaster ◆ Web designer (may also be called graphic designer) ◆ Web developer (may also be called information architect or information engineer) ◆ Project manager If possible, find a survey that lists salary ranges from low to high. Then, make a bar chart based on the data you collect. Plot your results for each job on the bar chart. Give the chart an appropriate title and label it so that others can easily understand the information you have included. Be sure to document your sources. After you have completed your bar chart, create a two-column table that lists the highest to lowest paid jobs, and then compare your table with a partner. Compare and contrast the two tables and write two paragraphs summarizing your findings. As a project manager for MyDiskDesigns.biz, why might this information be important?
JOB
SALARY RANGE
Highest Paid Job
Lowest Paid Job
2. STANDARDS AT WORK Students understand the ethical, cultural, and societal issues related to technology. (NETS-S 2)
List Confidential Items When clients hire companies to create Web sites, they share information about the company that must be kept confidential. Often each member of the project team is required to sign a confidentiality agreement. This agreement tells signers not to discuss any aspects of the project with people outside the project team. Assume you are assigned to a project team that is designing an e-commerce site for a toy store. You sign a confidentiality agreement that states that you may not disclose any information about the company, its employees, or its products. ◆ Make a list of things that the team would need to know about the company to develop the site. ◆ Place a check mark beside each item that you should not disclose to people who are not on the team. 330
Chapter 11
CHAPTER 11
Activities
3. TEAMWORK SKILLS Identify Project Team Strengths Compare the intelligences listed in the table shown below to the skills needed by a project team. Then, create a table like the one below that lists each intelligence and the project team members who should be strong in it. Can you think of any other intelligences to add to the list? PROJECT TEAM STRENGTHS Intelligence
Project Team Member
• Works well with spoken and written language • Works well with numbers and understand the relationship between objects • Understands how something drawn on paper will look when created • Coordinates the body effectively (for example, dancers and athletes) • Works well with music • Deals well with the behavior, emotions, and motivations of other people • Deals well with one’s own emotions and motivations • Works well with one’s physical surroundings
4. CHALLENGE YOURSELF Compare Storefront Solutions Sites that sell instant storefront solutions explain the services the site offers, the steps you need to take to set up a storefront, and the prices for the services. Some sites also offer a demonstration (demo) of how the storefront works. ◆ Find two instant storefront sites that offer a demo. As you view each demo, make a list of the features that the site offers. Use your lists to create a chart comparing the two storefronts. ◆ Based on your chart, write a one-page proposal identifying which storefront you would recommend to a friend who wants to sell video games. Explain your reasoning. Project Planning
331
CHAPTER 11
Projects
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Evaluate Web Sites Many project teams rely on reviewers to evaluate the usability of a Web site as they develop it. All the reviewers should use the same criteria to evaluate the site. This helps the project team develop sites that most people will find useful. With a partner, select three different sites: one e-commerce site, one entertainment-oriented site, and one college or university site. With your partner, decide what criteria a site has to meet to be rated 1 (poor), 2 (good), or 3 (excellent). Use the checklist shown in Figure 11.6 (see page 317) to help determine your criteria and evaluate the sites. Evaluate each site separately. Use a chart like the one on this page to rate each aspect of the three sites.
Site URL: Name of Site: Type of Site: Aspect Being Rated
1 (poor)
2 (good)
3 (excellent)
Information Design Layout Navigation Scheme UserFriendliness Presentation Design Overall Rating
2. Compare Evaluations When reviewers evaluate sites, they bring their personal backgrounds and preferences into the evaluation. Therefore, different reviewers may have very different evaluations of the same site. Ask two classmates to evaluate the same sites you reviewed in You Try It Skills Studio Activity #1. They should use the same evaluation tool as in the activity above. Compare the similarities and differences among the evaluations. Note any evaluation items that differ by two points from your evaluation. Ask your classmates to explain their reasoning for these ratings. Write a summary of the evaluations and explain what you learned about evaluating Web sites.
332
Chapter 11
CHAPTER 11
Projects
Read the projects described below. Then follow the directions to complete each project.
1. Identify Client Goals Your company has assigned a new client to you. The client, Outdoor Excursions, sells camping equipment. The client’s budget is limited, so it has decided to develop a corporate presence site. Eventually, it plans to develop an e-commerce site to market its products. At your first meeting with the client, you learn the following: ◆ Its customers include people of all ages. ◆ Families often visit the store together to select gear. ◆ The company advertises at local campgrounds and in the telephone book. ◆ Many of its customers recommend the store to their friends. ◆ Their staff members are experienced campers. Based on this information, prepare a list of pages for the site. You have determined that the budget will support development of eight to ten pages. Prepare a list of follow-up questions that you need to ask the client so that the Web author can begin developing content.
2. Create a Schedule Carol has been making candles that commemorate a theme or an occasion for friends and family members. Her work has met with great success, and she has decided to broaden her business with an e-commerce site—Candles by Carol. The site will allow people to select a candle that is accompanied by a poem related to the occasion. Identify the tasks and milestones needed to create a site for Candles by Carol. Create a Web site development schedule (for help, refer to Table 11.1 shown on page 313). Assume that Carol would like the site completed within three months.
LIFE CYCLE STAGE
SCHEDULE (TIME TO COMPLETE)
TASK LIST (THINGS TO DO)
MILESTONES (DELIVERABLES)
Analysis and Planning Design and Development Testing Implementation Evaluation and Maintenance
Project Planning
333
CHAPTER
12
Developing a Web Site
YOU WILL LEARN TO… Section 12.1 Discuss the functions of a Web site Compare and contrast style sheets Apply cascading style sheets (CSS) to a Web site Section 12.2 Create a feedback form Compare and contrast radio buttons and check boxes Section 12.3 Explain the use of privacy policies Compare and contrast Web site privacy and security Discuss security measures used by e-commerce sites Section 12.4 Identify and describe accessibility issues Identify strategies for maximizing site accessibility Validate accessibility
334
Chapter 12
WHY IT MATTERS ................................................. Blueprints help builders and contractors know how to construct a building. As you build sites in Dreamweaver, your planning serves as the blueprint for your site. Like buildings, many Web sites start small and grow over time. Before a Web site can grow, however, it must be built on a solid foundation. Creating a good foundation greatly enhances the design of your Web site. Review what you have learned about designing Web sites to this point. Write a list of steps you would take to build the home page for a personal Web site. Then compare your list with a classmate’s list to see if you both created similar “blueprints.” In a short paragraph, describe the similarities and differences between the two lists.
CHAPTER
12
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 12.1 Edit CSS ...................................... 341 12.2 Develop a Form ...........................346 12.3 Research Digital Certificates.... 352 12.4 Add Alternative Text................... 356
You Try It Skills Studio Create an Order Form ......................... 362 Add a Privacy Policy ............................ 362 Web Design Projects Create a Feedback Form ..................... 363 Plan a Web Site with Feedback .......... 363
IN THE WORKBOOK
You Try It Activities 12A Explore the MyDiskDesigns.biz Web Site ...................................... 12B Create an Internal Style Sheet... 12C Attach an External Style Sheet... 12D Edit an External Style Sheet...... 12E Add a Feedback Form ................ 12F Add Radio Buttons ..................... 12G Add Check Boxes ........................ 12H Add a Privacy Policy................... 12I Run an Accessibility Report ......
337 338 339 340 343 344 345 349 355
Chapter Assessment Making Connections ............................ Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................
360 360 361 361
Optional Activities and Projects Guided Reading Web Design Projects
ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Check Your Understanding Stop often and think about what you are reading. Are you following along with the ideas? Have you immediately forgotten what you just read? Reread parts when necessary. On a note pad, draw pictures or diagrams to summarize the information. As you complete a section, see if you can connect the ideas. Write down the main idea on your note pad. Then write down supporting information or examples around the main idea. Draw lines or arrows to show the connections.
WebDesignDW.glencoe.com
Developing a Web Site
335
SECTION 12.1 EXAMINING AN E-COMMERCE WEB SITE Focus on Reading Read to Find Out In this section, you will learn how businesses use Web sites to present information about their products and services. As you read, pay close attention to the main pages commonly found in e-commerce sites.
Main Ideas
Key Terms
Reading Strategy
Many e-commerce sites exist to provide information about a company and its products. You can use a cascading style sheet to format an e-commerce or other Web site.
Compare and contrast internal and external style sheets. Use a Venn diagram like the one below (also available online).
Internal Style Sheet
External Style Sheet
Many businesses use Web sites to present information about their products and services. While these Web sites may give visitors a chance to place orders and give feedback, their main function is to provide the business with an online presence.
Examining the MyDiskDesigns.biz Site How do businesses use Web sites?
Content A company’s contact page should provide e-mail addresses to general locations or departments, such as the customer service department. That way, the addresses do not have to change when company personnel changes.
The Web site featured in this unit, MyDiskDesigns.biz, is a B2C e-commerce site. The business sells pre-designed blank DVDs and CDRs directly to consumers. The Web site targets consumers who are tech-savvy and buy multiple quantities of disks at full price from retailers. The average age of these consumers ranges from 15 to 25. The company also targets designers, small- to medium-size businesses, and individuals looking for hip, new products. Each page of the MyDiskDesigns.biz site helps to promote the company and its products. These types of pages are common on e-commerce Web sites. ◆ The Home page introduces visitors to the business. ◆ The Products page provides an overview of the business’s products and services and a link to an order form. ◆ The FAQ (Frequently Asked Questions) page answers common questions about the business and its services. ◆ The News page announces what is new in the company. ◆ The Contact Us page provides contact information to visitors.
336
Chapter 12
WebDesignDW.glencoe.com
In the following activity, you will define the MyDiskDesigns.biz Web site and become familiar with its pages and features. As you navigate through the site, pay close attention to the function of each page and how MyDiskDesigns showcases its products and services.
ACTIVITY 12A Explore the MyDiskDesigns.biz Web Site 1 Start Dreamweaver. Use the Site>Manage Sites option to define the MyDiskDesigns Web site, which you can find by browsing to the DataFiles\Ch12\WebExamples\MyDiskDesigns folder. Save it in your Web site folder. 2 Open the pages folder to see the site’s pages. In the Files panel, right-click index.html and select Set as Home Page. Click Expand/Collapse. In Map view, click Site Map and select Map and Files (see Figure 12.1). Review the site’s structure. Click Expand/Collapse to return to Local view.
Figure 12.1 Use Map view to review the site’s structure. Expand/ Collapse Site Map
3 Preview the home page (index.html) in a Web browser. Use the navigation bar at the top of the page to navigate to each page in the site (see Figure 12.2). Identify the purpose of each page and describe how the page contributes to the site. Close your browser when finished. Save and close the site.
Figure 12.2 Use the navigation bar to view the pages in the MyDiskDesigns.biz site.
Navigation bar
Summarize What is the purpose of a FAQ page?
Developing a Web Site
337
Cascading Style Sheets How can I use CSS to format a Web site?
Accessibility Some browsers do not support CSS. Double check whether your target audience’s browsers will support the style sheets that you may use. To disable Dreamweaver’s default CSS feature, choose Edit> Preferences. In the General category view, uncheck Use CSS instead of HTML tags.
Developed in 1996 by the World Wide Web Consortium (W3C), cascading style sheets, or CSS, allow Web designers to separate presentation information (how items look) from content information. The term “cascading” refers to the fact that multiple style sheets can be attached to one Web page. Because it helps make items consistent, many Web designers use CSS to control an entire Web site’s text color, background colors, borders, spacing, and positioning of elements.
Using CSS in Dreamweaver Dreamweaver uses CSS to style HTML elements by default. This makes it easy to create and modify CSS information. A CSS Styles panel allows you to attach, edit, and delete style sheets. In addition, you can define new CSS styles for use in your Web pages or use the sample sheets included in Dreamweaver. The two main types of style sheets that you can use in a Web site are internal and external style sheets.
Internal Style Sheets An internal style sheet embeds CSS information within an individual Web page’s header HTML code. In the following activity, you will create a simple Web page that uses an internal style sheet.
ACTIVITY 12B Create an Internal Style Sheet 1 In Dreamweaver, create a new HTML document named: css_style.html. Open the page in Design view. Title the page: Internal Style Sheet. In the page, key: This sentence uses cascading style sheet information to change its appearance. 2 Choose Window>CSS Styles (or press Shift + F11) to open the CSS Styles panel. In the panel, click the New CSS Style button. In the New CSS Style dialog box, in the Name box, key: .mystyle. For Selector Type, choose Class (can apply to any tag). For Define in, choose This document only. Click OK. 3 In the CSS Style definition for .mystyle dialog box, adjust the settings to match those shown in Figure 12.3. When done, click OK.
Figure 12.3 Use the CSS Style definition dialog box to define a new style in a style sheet.
338
Chapter 12
4 In your Web page, select the words cascading style sheet. In the Properties inspector, click the Style drop-down arrow and select mystyle to apply the new CSS style. 5 On the Document toolbar, click Split view. Note that the .mystyle style information is contained in the document’s header code (see Figure 12.4). Return to Design view. Save and close the page.
Figure 12.4 The style you defined and applied is displayed in the page’s HTML header code.
You Should Know An external style sheet always uses a .css file extension.
External Style Sheet An external style sheet is a separate file that contains CSS information. Unlike internal style sheets, this file is not embedded in a single Web page but can instead be linked to multiple Web pages. Any changes made to an external style sheet are reflected in every Web page to which the CSS file is linked. Using an external style sheet thus makes it quick and easy to change an entire Web site.
ACTIVITY 12C Attach an External Style Sheet 1 In your MyDiskDesigns.biz Web site, open the index.html page in Design view. On your hard drive or network, browse to your MyDiskDesigns.biz site’s root folder. In the root folder, create a new folder named: css. 2 Browse to the DataFiles\Ch12\CSS folder. Copy the mydiskdesigns.css file and place the copy in your MyDiskDesigns site’s css folder. 3 In Dreamweaver, open the CSS Styles panel if necessary. Click the Attach Style Sheet button. In the Attach External Style Sheet dialog box, click the Browse button. In the Select Style Sheet File dialog box, navigate to and select the mydiskdesigns.css file in your site’s css folder. Click OK.
Figure 12.5 Use the Attach External Style Sheet dialog box to link an external style sheet to your Web page.
4 In the Attach External Style Sheet dialog box, next to Add as, select Link. Your dialog box should look like Figure 12.5. Click OK.
Developing a Web Site
339
5 The site changes to reflect the new styles (see Figure 12.6). Repeat Steps 3 and 4 to attach the style sheet to the site’s other five pages. Save the files. Preview the Web site in a Web browser. Close the browser when finished.
Figure 12.6 Click the plus sign next to mydiskdesigns.css to view the style information contained in the css file.
Inline CSS Unlike the CSS information provided by an internal style sheet, inline CSS is included directly in the HTML tags used to create individual Web page elements. Inline CSS thus only applies style information to unique elements on a page. Because it is much less flexible than either internal or external style sheets, the use of inline CSS is discouraged. To use inline CSS in Dreamweaver, you must edit the HTML code yourself in either Code or Split view.
Modifying CSS in Dreamweaver You can modify the style information in a CSS file to further customize a site’s appearance. In Dreamweaver, the same steps are used to edit either an internal or an external style sheet.
ACTIVITY 12D Edit an External Style Sheet 1 Open the index.html file of your MyDiskDesigns.biz site in Design view. 2 In the CSS Styles panel, double-click mydiskdesigns.css to open the file in the Document window. 3 In the CSS Styles panel, open the mydiskdesigns.css file. Scroll down and click the .copyright selector. Click the Edit Style button. In the CSS Style definition for .copyright dialog box, increase the font Size to 14 pixels. Set Weight to bold and Color to value #3300FF. 340
Chapter 12
4 Click OK. Notice the .copyright style definition in the Document window changes to reflect your edits (see Figure 12.7).
Figure 12.7 Changes made in the CSS Style definition dialog box are reflected in the style sheet file.
Figure 12.8 The Web page’s formatting changes to reflect the edited style sheet.
5 Save and close the mydiskdesigns.css file. Click the index.html tab to view the home page. The information is now blue, bold and 14 pixels in size (see Figure 12.8). Save your file. Summarize What two main types of style sheets can you apply to a Web site?
Section 12.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Many e-commerce sites exist to provide an online presence for the company and to showcase that company’s products.
4. Synthesize Information How does CSS make it easy to create a consistent Web site?
2. Summarize the purpose of the five main pages in the MyDiskDesigns.biz site.
5. Make a Decision You are creating a Web site with multiple pages. Why would you decide to use an external style sheet when creating your site?
• You can use cascading style sheets to format an entire Web site. • There are two main types of style sheets: internal and external.
3. Explain the difference between internal and external style sheets.
Apply It! Edit CSS In your MyDiskDesigns site, open the mydiskdesigns.css file. Select three styles and use the CSS panel to modify them. View the site in a browser to see your changes. Do not save the changes.
Developing a Web Site
341
SECTION 12.2 USING FEEDBACK FORMS Focus on Reading Read to Find Out In this section, you will learn how Web sites use feedback forms to gather information from visitors. Read to find out how to create a feedback form.
Main Ideas
Key Terms
Reading Strategy
Feedback forms allow visitors to share their thoughts about the business, the products, and the site. Radio buttons and check boxes allow you to provide preset options for visitors.
feedback form text area radio button check box
Compare and contrast radio buttons and check boxes. Use a Venn diagram like the one below (also available online).
Radio Button
Check Box
Feedback Forms How can a feedback form enhance an e-commerce site? Shortcut A quick way to preview a Web page in your primary browser is to press F12.
The MyDiskDesigns.biz site has limited e-commerce functionality. The company processes orders once a day by telephone, fax, and e-mail. The plan for the Web site is to expand its e-commerce capabilities gradually until it can process credit card orders electronically. An important step in improving an e-commerce site’s capabilities is to establish and maintain relationships with its customers. In this section, you will focus on adding more ways for a customer to communicate with MyDiskDesigns.biz.
Creating a Feedback Form A feedback form provides customers with a way to voice opinions, comments, and suggestions. E-commerce sites especially encourage feedback because it helps cement the relationship between the customer and the business. Customers who take the time to contact the business are also likely to return to the business’s Web site. In the next You Try It activity, you will add a feedback form to the MyDiskDesigns.biz Contact Us page. The form will include a text area, also known as a scroll box, in which visitors can type specific comments to the company. The form will not actually process data until the site is published to a server. Once the site is published, information is sent to the server when a visitor clicks Submit. A server-side script such as ColdFusion, ASP, or PHP then processes the information and responds by either sending requested information back to the user, or by performing some other action required by the form’s contents.
342
Chapter 12
WebDesignDW.glencoe.com
ACTIVITY 12E Add a Feedback Form 1 In your MyDiskDesigns.biz site, open the Contact Us page (contact.html) in Design view. Click after [email protected] and press Enter. Select Insert>Form>Form. In the dashed box, key: Send us your comments! Format the text Bold. Press Enter. 2 On the Insert toolbar, change the view to Forms. On the toolbar, click Text Field. In the form, make sure the text field is selected. In the Properties inspector, in the TextField box, key: Customer_name. Press Tab. In the Char width box, key: 40. Press Tab. In the Init val box, key: Your name. Press Tab. Deselect the text field and position the insertion point after it. Press Enter. 3 On the Insert toolbar, click Text Field. In the Properties inspector, in the TextField box, key: Customer_email. In the Char width box, key: 40. In the Init val box, key: Your e-mail address and press Tab. 4 In the form, position the insertion point after the text field. Press Enter. Key: Enter your comments, questions, and suggestions below. Format the text Bold, if necessary. Press Shift + Enter. 5 On the Insert toolbar, click Textarea. With the text area selected, in the Properties inspector, in the TextField box, key: Feedback. In the Char width box, key: 40. Press Tab. In the Num Lines box, key: 5. Press Tab. Leave the Init val box empty. Position the insertion point after the Textarea box. Press Enter. 6 On the Insert toolbar, click Button to create a Submit button. In the form, position the insertion point after the button. Click Button again. In the Properties inspector, select Reset form to insert a Reset button. Deselect the button. Your form should appear as shown in Figure 12.9. Save your work.
Figure 12.9 Adding words in the form’s text fields lets customers know what data to enter in the field.
Text boxes
Text area
Evaluate Why might a company add a feedback form to its Web site?
Developing a Web Site
343
Adding Preset Choices for Visitors How do preset choices make it easy for visitors to provide feedback?
To encourage visitors to provide site feedback, you can include various types of response mechanisms on your forms, such as radio buttons and check boxes. A radio button gives visitors the chance to select one, and only one, choice from a list. A check box allows visitors to select multiple items from a list.
Radio Buttons In the next activity, you will add a feedback question that uses radio buttons as preset choices for visitors.
ACTIVITY 12F Add Radio Buttons
Figure 12.10 Key the values shown into the Properties inspector to create a radio button.
1 If necessary, open your MyDiskDesigns.biz site’s Contact Us page (contact.html) in Design view. Click after the text area and press Enter. Make sure the insertion point is left aligned. Key: Which one element on the MyDiskDesigns.biz site do you like the most? Format the text Bold, if necessary. Press Shift + Enter. 2 With the Insert toolbar in Forms view, click Radio Button. Make sure the radio button field is selected. In the Properties inspector, in the box under Radio Button, delete the placeholder text and key: Feedback. Press Tab. In the Checked value box, key: logo (see Figure 12.10). 3 In the form, click after the radio button. Key the label: Logo. Press Shift + Enter. 4 Repeat Steps 2 and 3 to create three more radio buttons. Use the information in Table 12.1 to create the radio buttons. Do not press Shift + Enter after you create the last radio button.
Table 12.1
Radio Button Information
Use this information to create three more radio buttons in the form.
Radio Button text field
Checked value
Label
Feedback
Products_page
Products page
Feedback
Feedback_form
Feedback form
Feedback
Order_form
Order form
5 Your form should appear similar to Figure 12.11. Save your work.
Figure 12.11 Visitors can choose one of the options to provide feedback about the usefulness of the MyDiskDesign.biz site.
344
Chapter 12
Check Boxes MyDiskDesigns.biz would like to gather information from visitors about ways to improve the site. Since the business wants visitors to select all items that apply, it will use check boxes rather than radio buttons. In the next activity, you will add a question with check boxes to the feedback form.
ACTIVITY 12G Add Check Boxes 1 If necessary, open the MyDiskDesigns.biz Contact Us page in Design view. Position the insertion point after the Order form radio button. Press Enter. Key: What can we improve about the MyDiskDesigns.biz site? Select all answers that apply. Press Shift + Enter. 2 With the Insert toolbar in Forms view, click the Checkbox button. In the Properties inspector, in the Checkbox name box, key: Order_ease. Press Tab. In the Checked value box, key: ON (see Figure 12.12).
Figure 12.12 Key the values shown into the Properties inspector to create a check box.
3 In the form, position the insertion point after the check box and key the label: Ease of ordering. Press Shift + Enter to start a new line. 4 Repeat steps 2 and 3 to create three more check boxes. Use the information in Table 12.2 to create the remaining check boxes. Do not press Shift + Enter after you create the last check box.
Table 12.2
Names and Values CheckBox name text field
Checked value
Check box label
Navigation_ease
ON
Ease of navigation
Info_use
ON
Usefulness of information
Contact_us
ON
Ability to contact us
Assign each check box a unique name.
5 Your check boxes should look like Figure 12.13. Save your work.
Figure 12.13 Check boxes allow visitors to select as many choices as they desire.
Developing a Web Site
345
6 Preview the form in a browser. Test all the areas of the form. You should be able to select only one radio button and multiple check boxes (see Figure 12.14). The Submit button will not work until you publish the site. However, you can use the Reset button to erase all your selections and return the form to its original state. Close your browser. Save your work.
Figure 12.14 Visitors can select one radio button and multiple check boxes.
List What are two types of Web site feedback response mechanisms?
Section 12.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Feedback forms enable visitors to communicate comments, questions, and suggestions to the site owner.
1. Define feedback form, text area, radio button, check box.
4. Synthesize Why might a small business choose to create a limited e-commerce site?
• Radio buttons allow visitors to choose only one of the options listed. • Check boxes allow visitors to select as many choices from the list as they desire.
346
Chapter 12
2. Summarize the functions of a feedback form. 3. Explain the difference between radio buttons and check boxes.
5. Make a Decision What type of form component would work best for a business that wants to gather data about its visitors’ hobbies?
Apply It! Develop a Form Expand the feedback form to ask for additional information from visitors. Determine the questions you want to ask. Then select the best type of form component to get feedback. Add the information to the MyDiskDesigns.biz site in Dreamweaver.
Security on the Web
S
ecurity is a constant concern for e-commerce sites or sites that transfer sensitive data, such as credit information. Sites that are not secure risk losing customers, reputations, and money.
Threats to Web Sites and Web Site Users Hackers can target Web sites and Web site users by attacking either the server itself or the user’s computer. A server-side attack can expose information about the customers of the Web site. A client-side attack allows the hacker direct access to an individual user’s computer. Firewalls, password schemes, and antivirus programs must constantly evolve to keep up with new threats from hackers and viruses.
Blended Attacks An attack that combines hacking and viruses is called a blended attack. These attacks are carried out by first hacking into a system and then spreading a virus. Fighting blended attacks requires integrated security measures such as firewalls, AV software, intrusion detection software, and packet sniffers. Coordinating the work of these different technologies further protects networks against attacks.
Wireless Threats The wireless trend is creating a new layer of threats. Wireless security may improve Different security measures are being developed to when the industry adopts the new protect wireless technology. Wi-Fi Protected Access (WPA) encryption standard. This standard features strong data-encryption techniques and user-validation measures. These features will make it more difficult for intruders to access a wireless LAN or to use its data.
1. Research Technology Research current or emerging security measures used to protect e-commerce Web sites. Identify the capabilities and limitations of these systems.
2. Analyze Procedures Create a presentation about a corporate or e-commerce site that was hacked or had a virus. Assess the security the site used and the results of the attack.
Developing a Web Site
347
SECTION 12.3 WEB SITE PRIVACY AND SECURITY Focus on Reading Read to Find Out The main focus of this section is to learn more about Web site privacy and security. Read to find out how businesses prevent unauthorized access to data contained on their Web servers.
Main Ideas
Key Terms
Reading Strategy
E-commerce sites work to maintain the privacy of their customers. They must also try to ensure that business conducted over the Internet is secure.
privacy cookie privacy policy security data encryption Secure Socket Layer (SSL) digital certificate
Identify ways to protect privacy and ensure security. Use a table similar to the one below (also available online). Protecting Privacy
Ensuring Security
E-commerce sites depend on information they gather from their customers. To protect this data and maintain customer trust, e-commerce sites spend a lot of time and resources on privacy and security.
Web Site Privacy How do e-commerce sites gather customer data?
Privacy on the Web is the ethical collection and use of visitors’ personal information. Many Web sites use cookies to gather information about visitors.
Cookies A cookie is a small data file that a Web site writes to your hard drive when you visit that site. Cookies contain personal information about you, including your preferences and login/registration information. E-commerce sites use cookies extensively. Some sites use the information they have gathered and stored in cookies to welcome customers by name and to display items similar to those the customer purchased in the past. While cookies can make buying online easier and faster, they also pose a potential privacy threat. Cookies can gather data about visitors without their knowledge, and visitors cannot control the use of this data.
Legal Protection of Privacy You Should Know Web sites that are likely to attract children must make a reasonable effort to identify the visitor’s age.
348
Chapter 12
Some federal and state laws regulate the information a Web site can collect. For example, the Children’s Online Privacy Protection Act (COPPA) regulates the business practices of gathering personal data online from children under age 13. If a Web site knows that a visitor is under age 13, that site must obtain parental consent before it collects any personal data from that visitor. WebDesignDW.glencoe.com
Privacy Policies Many Web sites post privacy policies, or privacy statements. A privacy policy is a written statement that outlines the information the site is collecting and explains how the organization will use that information. Most privacy policies also explain: Activity 12.1 Explore Web Site Privacy Learn more about Web site privacy at WebDesignDW.glencoe.com.
◆ how visitors can control the amount of information they provide to the site. ◆ how customers can review and correct any information the site collects. MyDiskDesigns.biz does not use cookies or gather information about its customers. However, the company wrote a privacy policy in anticipation of adding these features in the near future. In the next activity, you will add a privacy policy to the MyDiskDesigns.biz site.
ACTIVITY 12H Add a Privacy Policy 1 Open your MyDiskDesigns.biz site in Dreamweaver. 2 In the Files panel, open the pages folder, and right-click blank.html. On the shortcut menu, choose Edit>Duplicate (or press Ctrl + D). 3 Right-click the Copy of blank.html file and choose Edit>Rename (or press F2). Rename the file privacy.html. 4 In the Files panel, double-click privacy.html to open the page. Click in the page’s right content area (see Figure 12.15).
Figure 12.15 Click in the page’s right content area.
Insertion point
5 On the Insert toolbar, in Common view, click the Images button. Insert the hdr_privacy.gif file located in the DataFiles\Ch12\Images folder. Save the file in your site’s images folder. Select the page header and, in the Alt box, key: Privacy Policy. In the Title box, delete the text and key: MyDiskDesigns – Privacy Policy. WebDesignDW.glencoe.com
Developing a Web Site
349
6 Position the insertion point under the page header. Choose File>Import>Word Document. Browse to the DataFiles\Ch12\Text folder. Select the privacy.doc file. Click Open. 7 Make sure the text is formatted Georgia, Times New Roman, Times, serif, size 14 pixels. Proofread and spell check (or press Shift + F7) the text. Your page should look similar to 12.16. Save and close the file.
Figure 12.16 The privacy policy outlines how MyDiskDesigns.biz will use customer information.
8 Open the site’s home page in Design view. Click in the white space under the bulleted list in the Why shop with us? box. A large blinking cursor appears to the right of the bulleted list. Press Enter. Key: OUR PRIVACY POLICY. Format the text Bold, 14 pixels. 9 Select the text. In the Properties inspector, move the mouse pointer over the Point to File icon. Click and drag from the icon to the privacy.html file in the Files panel (see Figure 12.17). The highlighted text will now link to the Privacy Policy page.
Figure 12.17 You can use the Point to File icon in the Properties inspector to create links between files.
Point to File
10 Save your file. View the home page in a Web browser and test the links. Close your browser.
Analyze Why do Web sites post privacy policies?
350
Chapter 12
Web Site Security Why is security an important issue for e-commerce Web sites?
Security is the protection of data from unauthorized access, both on the Web server and during transmission over the Web. Web businesses try to prevent intruders from stealing or altering sensitive information contained on their Web servers. Much of the information available on the Web is open to the public. However, as e-commerce continues to develop, an increasing amount of information is sent and received without proper authority. Security audits can identify gaps or problems with security. One type of audit attempts to access information that should not be available without proper authority. Businesses also use other methods to protect sensitive information.
Activity 12.2 Investigate Web Site Security Learn more about data encryption at WebDesignDW.glencoe.com.
Data Encryption One way to protect sensitive information, such as credit card numbers, is data encryption. Data encryption is the process of encoding and decoding information for security. It uses an algorithm, or set of instructions, that alters the appearance of information before it is transmitted. The receiving computer then applies a decryption algorithm to restore the information to its original state. A common data encryption method among Web site publishers is Secure Socket Layer (SSL). SSL uses an encryption algorithm specifically designed to protect data transmitted across the Internet. Because SSL transmits encrypted data, it ensures that only the intended receiver with the proper decryption algorithm can read the information. E-commerce sites, such as the one shown in Figure 12.18, rely heavily on SSL to safeguard financial transactions on their sites.
Figure 12.18 The security padlock in the lower corner of the screen indicates that the site uses SSL to protect transmitted data. How does data encryption provide security to an e-commerce site?
Security padlock
WebDesignDW.glencoe.com
Developing a Web Site
351
Digital Certificates Many Web sites purchase digital certificates to ensure visitors that the site is authentic and to prevent unauthorized access to its online information. A digital certificate is a document issued by an independent certification authority that confirms a business’s credentials. For example, the digital certificate shown in Figure 12.19 confirms that you are visiting the real circuitcity.com, and not another site that is using that name. A digital certificate also confirms that an online business is genuine and not fake. Digital certificates contain encrypted data such as: ◆ Authorized names ◆ The certificate serial number ◆ Expiration dates ◆ A copy of the certificate holder’s public key ◆ The digital signature of the certificate-issuing authority
Figure 12.19 Double-clicking on the SSL padlock allows you to view a site’s digital certificate. Who issued this digital certificate?
Once a business has purchased a digital certificate, it is authorized to display the logo of the company that issued the certificate on its Web site. VeriSign, TRUSTe, and Thawte are examples of businesses that issue digital certificates. Identify What is a commonly used data encryption method among Web site publishers?
Section 12.3 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Web sites use cookies to gather and store information about their visitors.
1. Define privacy, cookie, privacy policy, security, data encryption, Secure Socket Layer (SSL), digital certificate.
4. Analyze Information Why is legislation necessary to protect Internet users?
• A privacy policy describes the data a site gathers and the way the site owner will use it.
2. Summarize the difference between privacy and security.
• Security is the protection of information from unauthorized access.
352
Chapter 12
3. Explain the importance of privacy policies for e-commerce sites.
5. Make Predictions If counterfeiters found a way to forge digital certificates, what effect would this have on e-commerce?
Apply It! Research Digital Certificates Visit the site of a company that issues digital certificates, such as VeriSign, TRUSTe, and Thawte. Make a checklist of the kinds of information that a business must provide to receive a digital certificate.
SECTION 12.4 WEB SITE ACCESSIBILITY Focus on Reading Read to Find Out Think about all the different people who use the Internet. How do people with different needs and abilities locate and use online information? Read to find out how Web designers can make sites accessible to all users.
Main Ideas
Key Terms
Reading Strategy
An accessible Web site is one that people with different needs and abilities can access and use. Dreamweaver includes tools that can be used to test a site’s accessibility.
accessibility accessibility standards alternative text
Identify four Web page elements that should always include alternative text. Use a graphic organizer similar to the one below (also available online). Alternative Text
➠
➠
➠
➠
Dynamic Content
Graphics and Charts
Images
Multimedia Elements
Making a Web site accessible involves making sure that all types of people can access and use its content. E-commerce sites, in particular, need to create accessible Web sites that can be used by a broad market.
Web Site Accessibility Why is accessibility important to Web design?
Many Web users have visual, hearing, learning, or other disabilities that make it difficult to use the Internet. Accessibility enables individuals with different needs to access and receive online information more efficiently. To make your site accessible, you should try to present information in as many different ways as you can. For example, providing text that describes your site’s audio elements allows people who have difficulty hearing to understand how you are using audio on your page. Voice-enabled Web sites and screen readers can make the Web’s content more accessible to people who have difficulty seeing.
You Should Know As much as 10 percent of all Web users have a disability that limits them from accessing online information effectively.
Accessibility Standards Section 508, a 1998 amendment to the U.S. Rehabilitation Act, states that Federal agencies must make their Web sites accessible to all visitors, including those with disabilities. The amendment provides a number of accessibility standards that can be incorporated into a Web site’s design. Many of these standards encourage designers to make it easier for all users to understand, scan, and respond to elements included in the site. The World Wide Web Consortium’s Web Accessibility Initiative also outlines guidelines and recommendations that support many of the Section 508 standards. WebDesignDW.glencoe.com
Developing a Web Site
353
Making a Site Accessible It is important to think about how you can make your online content accessible to all users. Table 12.3 outlines some techniques for making Web pages accessible. For example, including alternative text is an important part of making a site accessible.
Table 12.3 Follow the guidelines shown in the table to make your Web site accessible. Why is it important to include alternative text in a Web site?
Caution When selecting alternative text, be very specific. For example, using “Blue button” to describe a blue Submit button will not make as much sense to a visitor as the alternative text “Submit button.”
Web Site Accessibility Guidelines Component
Accessibility Feature
Dynamic Content
Provide alternative text and content for information contained in scripts, plug-ins, and applets.
Forms
Make sure individuals can complete and submit forms when using assistive technology.
Frames
Provide text that describes the purpose of each frame. Use the tag so people with browsers that do not support frames can still view the site.
Graphs and Charts
Include alternative text that summarizes the graph or chart’s content. Use the longdesc attribute to link to long descriptions, when necessary.
Images
Include alternative text or the alt attribute for every image element in a Web site. Use the longdesc attribute, when necessary.
Links
Use linking text that is descriptive and makes sense when read out of context.
Multimedia Elements
Provide alternative text for all animations, videos, and audio items, along with descriptions of video content and transcripts of presentations. Provide controls to pause and continue playback.
Page Layout
Use CSS for page layout but make sure your pages are readable without it.
Tables
Use appropriate headers to identify rows and columns. The headers should make sense when read aloud by a screen reader.
Text/Objects
Use colors that provide a high contrast between a site’s content and its background.
Text-Only Page
If you cannot follow accessibility guidelines, provide a text-only page that contains the same information as your site, but uses only words. Describe What is the purpose of accessibility standards?
354
Chapter 12
Validating Accessibility in Dreamweaver How can I use Dreamweaver to test a site’s accessibility?
Dreamweaver provides a built-in validation tool to check the accessibility of a Web site or document. When you run an Accessibility report, Dreamweaver lists accessibility errors and identifies what part of Section 508 the error violates. You can use the Reference panel to learn more about the identified error. In the following activity, you will check the accessibility of the home page in the MyDiskDesigns.biz site.
ACTIVITY 12I Run an Accessibility Report 1 If necessary, open home page (index.html) of you MyDiskDesigns.biz site in Design view. 2 From the menu bar, choose Site>Reports. In the Reports dialog box, click the Report on drop-down arrow and select Current Document. In the Select reports box, check the Accessibility box. Click the Run button.
Figure 12.20 The Results panel displays accessibility problems identified in the site.
3 A Results panel opens beneath the Properties inspector. This panel displays any accessibility issues that should be addressed as well as a brief description of the problem (see Figure 12.20).
More Info
4 Highlight the first line in the Results panel and click the More Info button in the panel’s left-hand column. A detailed description of the problem appears in the Reference panel. 5 Close the Reference panel (press Shift + F1). Close the Results panel (press F7). Save your work and close the Web site.
Aside from using Dreamweaver’s validation tool, you can also use a number of Web sites to check your site or pages. Useful Web sites include Watchfire WebXACT, Cynthia Says™ Portal, and the Section 508 Web site. Developing a Web Site
355
Figure 12.21 Use the checklist to test a Web site’s accessibility. Why might an individual need to increase a page’s font size to view its content?
Accessibility Checklist
✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑
Browse pages without images turned on. Check for appropriate ALT text. Turn the volume on the computer off. Check that audio content is available through other sources such as a text equivalent. Change the font size on the browser. Verify the page is still usable with larger font sizes. View the site at different screen resolutions or resize the browser window. Verify that horizontal scrolling is not required. Change the monitor’s color display to grayscale or print out the Web page in grayscale or black and white. Observe whether contrast of text, images, and other elements is adequate. Navigate through the site with keyboard and Tab key. Verify you can access all links and form elements.
If you have access to only a Web browser, you can use the checklist shown in Figure 12.21 to test some of the standards and guidelines. Ask your teacher for permission before testing the checklist items. After you have completed the checklist, consider what problems you encountered. If testing an outside site, what recommendations could you make to the site’s owner about how to overcome accessibility obstacles? How can you make your own sites more accessible? Explain What is an Accessibility report?
Section 12.4 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• An accessible Web site is one that people with different needs and abilities can access and use.
1. Define accessibility, accessibility standards, alternative text.
4. Evaluate Why does the U.S. government require all Federal agencies to create accessible Web sites?
• Section 508 of the U.S. Rehabilitation Act requires Federal agency Web sites to be accessible to all visitors, including those with disabilities. • Including alternative text is an important part of making a site accessible.
356
Chapter 12
2. Summarize What does it mean for a Web site to be accessible to all visitors? 3. Explain Why is it important to include alternative text for a site’s multimedia elements?
5. Analyze Accessibility You are creating a Web site that will contain images, video, and dynamic content. What three things can you do to make your site more accessible to all users?
Apply It! Add Alternative Text Open the Hardware Devices Web site that you created in Unit 1. Add alternative text to the three images included in that site.
data encryption, 351 Secure Socket Layer (SSL), 351 digital certificate, 352
Main Ideas ■ Many e-commerce sites mainly exist to provide an
Main Ideas
online presence for the company and to showcase that company’s products. ■ You can use cascading style sheets to format an entire Web site. ■ There are two main types of style sheets: internal and external. ■ External style sheets make it easy to change a site’s formatting.
■ Many Web sites use cookies to gather and store
SECTION 12.2 Using Feedback Forms Key Terms feedback form, 342 text area, 342 radio button, 344 check box, 344
Main Ideas ■ Web sites use feedback forms to gather information ■
■
■ ■
from visitors. Feedback forms enable visitors to communicate comments, questions, and suggestions to the site owner. Forms provide various ways for visitors to respond, including text areas, text boxes, radio buttons, and check boxes. Radio buttons allow visitors to choose only one of the options listed. Check boxes allow visitors to select as many choices from the list as they desire.
■ ■
■
■
information about their visitors. A privacy policy describes the information the site gathers and the way the site owner will use it. Security is the protection of data from unauthorized access, both on the Web server and during transmission over the Web. Data encryption alters the appearance of information before transmission so that only the intended receiver with the proper decryption program can restore it to readable form. Digital certificates confirm the validity of online businesses.
SECTION 12.4 Web Site Accessibility Key Terms accessibility, 353 accessibility standards, 353 alternative text, 354
Main Ideas ■ An accessible Web site is one that people with
different needs and abilities can access and use. ■ Section 508 of the U.S. Rehabilitation Act requires Federal agency Web sites to be accessible to all visitors, including those with disabilities. ■ Including alternative text is an important part of making a site accessible. ■ Dreamweaver includes tools that can be used to test a site’s accessibility. Developing a Web Site
357
CHAPTER 12
Review and Assessment
AFTER YOU READ Use Diagrams to Help Understanding Review a section in this chapter that you found difficult. Write down the main idea. (Often, the section heading will be the main idea.) On a note pad, write down any facts, explanations, or examples you find in the section. Start at the main idea and draw arrows to the information that directly supports it. Then draw arrows from these examples to any information that supports them.
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers. 13. Summarize What information is available when a user double-clicks the padlock icon in the lower-right corner of a Web site?
Digital Certificate
Reviewing Key Terms 1. What is the purpose of a cascading style sheet? 2. What purpose does a feedback form serve on an e-commerce site? 3. Rewrite this statement to make it true: Radio buttons allow visitors to select as many choices from a list as they desire. 4. What is the name of a small data file that a Web site writes to a person’s hard drive when he or she visits the site? 5. What does a digital certificate tell a visitor about a Web site? 6. How can e-commerce sites benefit from Web accessibility?
Understanding Main Ideas
15. Make Recommendations You are part of a Web site development team hired to develop an e-commerce site. Your client sells custom-designed calendars to individuals and businesses. In addition to the home page, what pages would you recommend for this site? Use a storyboard like the one below to show the pages you would add. Explain your reasoning. Home Page
➠
➠
Chapter 12
Text Area
Critical Thinking
➠
358
Text Box
➠
7. Explain how you can use an external style sheet to format a Web site. 8. Identify the types of information that are typically included in a Web site’s privacy policy. 9. Evaluate how cookies can present a potential security concern. 10. Analyze the reasons why solid Web site security is important for e-commerce businesses. 11. Explain how data encryption helps ensure Web site security. 12. List five ways in which accessibility can be designed into Web pages.
14. Distinguish between a text box and a text area.
16. Make Predictions As the amount of business conducted online continues to increase, how important will Web site privacy and security issues be in the future?
Review and Assessment
17. Evaluate Information The marketing director would like to gather information from site visitors, including visitor’s name, visitor’s e-mail address, visitor’s age range, products used (assume the company sells six different products), and suggestions for product improvements. What form features would you use for each of these pieces of information? 18. Analyze How does Web site privacy and security give visitors confidence to make online purchases? 19. Make Decisions Assume you are responsible for creating a new privacy policy for the MyDiskDesigns.biz Web site. What elements would you keep, and what would you change? Explain the reasons behind the changes you want to make. Create a table similar to the one below to record the elements for the new policy. Element
Keep/Change
Reason
Charts & Graphs Read the paragraph and chart below and then answer the question.
Security is a constant concern for sites that transfer sensitive data, such as credit information. The chart below shows the number of Internet security attacks in different countries during one year. Countries Suffering Digital Attacks 35,000 Number of Attacks
CHAPTER 12
United States
30,000
United Kingdom
25,000
Denmark
20,000
China
15,000
Brazil
10,000 5,000 0
According to the chart, which of the following statements is true? Brazil and Denmark suffered the fewest attacks. The United States suffered three times as many attacks as Brazil. Brazil suffered more than 5,000 attacks. The United States and the United Kingdom suffered the most attacks.
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart of general Dreamwaver editing commands shown below.
20.
WebDesignDW.glencoe.com Study with PowerTeach
+
Result
21.
+
Result
22.
+
Result
Go to the book Web site shown above. To review the main points in this chapter, select e-Review>PowerTeach Outlines>Chapter 12.
Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 12.
WebDesignDW.glencoe.com
Developing a Web Site
359
CHAPTER 12
Activities
1. MAKING CONNECTIONS Social Studies—Debate an Issue Find three examples of American companies that use the Internet to conduct global business. Research the following questions: ◆ How have these companies benefited from the Internet? Be sure to review the history of the company before the Internet became available for business. ◆ What economic impact do these businesses have on the countries where they operate? ◆ What impact do they have on the U.S. economy? Business Using Internet
➠ Impact of Internet on Business
Impact on U.S. Economy
➠
➠
Use the information you find to argue for or against the following statement: The Internet has made it possible for international companies to improve the lives of people in developing countries. Use a Chain of Events flow chart to document your findings.
Impact on Global Economy
2. STANDARDS AT WORK Students understand the ethical, cultural, and societal issues related to technology. (NETS-S 2)
Evaluate Home Pages Select three different e-commerce Web sites in one of the following industries: clothing, entertainment, computer equipment, or travel. Evaluate the home pages of each company. Rate each company’s home page based on the following factors: 1. 2. 3. 4.
Ease of navigating to product and service information Ease of locating contact information Prominence of special offers Attractiveness of home page
Rate each home page as poor, good, or excellent. Create a chart that contains each home page’s URL, its rating, and your explanation for why it received this rating. Then, evaluate each site’s security features. Identify which security features (if any) are present on each site. Are any SSL protected? Do you see any patterns from those sites that are protected versus those that are not? Share your findings with a classmate in a brief report. 360
Chapter 12
CHAPTER 12
Activities
3. TEAMWORK SKILLS Plan a Web Site A local CD store wants to redo its Web site. The existing site has a random navigation structure. In researching the site’s needs, the team learns that people are most likely to search for CDs in one of three ways: ◆ By artist ◆ By CD title ◆ By musical category The store’s owner wants to further update the Web site by including a space where customers can rate CDs and submit requests for hard-to-find items. The store owner also wants to build a list of contacts and to get feedback on the company’s products. Divide the team into two groups. One group should revise the Web site’s navigation structure. Research other Web sites that sell CDs to see how they structure their sites. The other group should determine what additional features need to be added to the site. Research other Web sites that sell CDs to see what features they offer. Determine what privacy and security features and information need to be incorporated into the site. Then, create a storyboard for the revised site. The storyboard should reflect both the store owner’s goals and the team’s research.
4. CHALLENGE YOURSELF Research Web Site Security The local florist has an e-commerce site and would like to add a digital certificate to the site to ensure protection for its customer order form and e-mail. The florist has asked you to research how the digital certificate would work, and how to obtain a demonstration version to try out the process. Use the Internet or other sources to locate three companies that issue digital certificates. Prepare a table like the one below that shows the requirements and costs to obtain digital certificates from each company and the benefits each company offers. Then, locate a company that offers a free download version for personal use (which may be one of the three companies you have researched). With your teacher’s permission, download the demonstration to see how it works. Based on your research, recommend a digital certificate company to the florist. Explain the reasoning behind your recommendation.
DIGITAL CERTIFICATE
FEATURES
REQUIREMENTS
COSTS
Company #1 Company #2 Company #3 Developing a Web Site
361
CHAPTER 12
Projects
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Create an Order Form You design and produce mouse pads. Create an order form for your Web site’s Products page. Create a new Web site in Dreamweaver. You can use the Language Club template or you can create a new basic site. Create an Order Form page that contains a form similar to the one below. Save your page. Preview the page in a browser and test to see that the form works as intended. Make changes as needed.
2. Add a Privacy Policy
362
Add a privacy policy to your mouse pad Web site. Locate several privacy policies at ecommerce sites on the Web. Identify the key elements to include in a privacy policy. Create a Privacy Policy page. If necessary, you can copy the MyDiskDesigns.biz Privacy Policy page and paste the page into the Web site you created in You Try It Skills Studio #1. Format the text to make it consistent with the font and sizes used on your Web site. If you have copied the text, modify the content as needed to reflect the mouse pad company. Add a link to the Order Form page that you created in You Try It Skills Studio #1 that directs visitors to the privacy policy. Save your work. Preview your site in a browser. Test the link to the Privacy Policy page.
Chapter 12
CHAPTER 12
Projects
Read the projects described below. Then follow the directions to complete each project.
1. Create a Feedback Form Outdoor Excursions, a retailer that sells camping equipment, has teamed up with a travel agency to offer exciting camping adventures for families. During the initial planning phase of this venture, Outdoor Excursions wants to build its customer list and to get feedback about the type of trips people most want to take. Create a feedback form in Dreamweaver. This form will be used to gather relevant contact information, to find out what trips will be most popular, and to help determine the optimum length for these trips. Possible trips are listed in the table below.
POSSIBLE CAMPING TRIPS Domestic Trips
International Trips
Badlands National Park
Argentina Tour
Cape Cod National Seashore
Australia Tour
Everglades National Park
Kenya Tour
Grand Canyon National Park
Brazil Tour
Hawaii Volcanoes National Park
Canada Tour
Indiana Dunes National Lakeshore
Germany Tour
2. Plan a Web Site with Feedback You are a member of a band called The Speckled Band. The band’s flyer reads: “We play live music for parties, weddings, and other events. If cost is an issue, we also offer a oneperson DJ service. You choose the type of music you want played. We work in two-hour time blocks at $250 per hour, plus travel costs. To schedule your event, contact us at 555-5555.” The band wants to develop a Web site that provides information about its services and gathers feedback about the range of services it should offer. Create a site in Dreamweaver for the band. The site will have two pages: a home page and a feedback page. Use the information provided in the flyer to create the home page. For the feedback page, write ten short “what we do” sentences that describe services the band does or could offer. Create a feedback form asking each visitor to rate these services as extremely interesting, very interesting, of neutral interest, of little interest, or of no interest. Use option buttons for each of the five ratings. Add basic contact information to the form and a text area for additional feedback.
Developing a Web Site
363
CHAPTER
13
Adding Web Site Functionality
YOU WILL LEARN TO… Section 13.1 Identify the limitations of hit counters Monitor Web site traffic Describe the information gathered by tracking systems Identify database interface pages Section 13.2 Identify Web site search features Add named anchors to a Web page Section 13.3 Identify tools used to share news Identify tools used to collect visitor information Create a guest book Section 13.4 Explain how frames work Identify guidelines for frames pages Create a framesbased page Use frames on a site
364
Chapter 13
WHY IT MATTERS ................................................. When selling a car, sellers emphasize the car’s best features. These features transform a basic mode of transportation into a vehicle that people want to drive. Adding features can also turn a basic Web site into something much more interesting and useful. Guest books, search capabilities, and databases help visitors interact with the site while also collecting useful information for site owners. Books, such as textbooks, include features that make them more user-friendly. For example, an index helps you locate topics that you want to find. What other features increase a book’s usability? What features do Web sites have to make them more user-friendly? How do these features compare to those found in books?
CHAPTER
13
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 13.1 Explore Tracking Software ....... 13.2 Identify Search Features .......... 13.3 Write a Proposal ........................ 13.4 Evaluate Frames ........................
369 374 379 384
You Try It Activities 13A Add Named Anchors .................. 373 13B Create a Guest Book .................. 377 13C Use Frames on a Site ................ 382 Chapter Assessment Making Connections ............................ Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................
388 388 389 389
You Try It Skills Studio Add a Guest Book ................................ 390 Create a Frames-Based Page ............. 390 Web Design Projects Create Named Anchors for a Résumé................................................. 391 Create an Investing for Teens Web Site................................................ 391
IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects
ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Organize Information If you were told to remember the names of everyone in your class on the first day, you would probably find the task difficult. However, what if you grouped people in ways that made it easier? You could remember the names of one row at a time. Grouping information also helps when you have to remember material that you have read. When you take notes, think about how topics relate to each other. Organizing them as a group makes them easier to remember.
WebDesignDW.glencoe.com
Adding Web Site Functionality
365
SECTION 13.1 TRACKING VISITORS AND COLLECTING INFORMATION Focus on Reading Read to Find Out In this section, you will learn how organizations measure the effectiveness of their Web sites. Read to find out how Web sites track visitors and use databases to store and process data.
Main Ideas
Key Terms
Reading Strategy
Hit counters and tracking software tally the number of visitors to a Web site. Databases collect, store, and organize information gathered from a site’s visitors.
hit counter tracking software database record database driven database interface page
Identify the information provided by hit counters and tracking software. Use a table like the one below (also available online). Information Provided by Hit Counters
Information Provided by Tracking Software
Organizations that conduct business online need ways to measure the success of their efforts. For e-commerce sites, the total amount sold online is a good indicator of success. However, organizations can measure their site’s effectiveness in other ways as well.
Tracking a Web Site’s Visitors How do Web developers measure Web traffic?
Web developers often use dynamic components to keep track of Web site traffic. Hit counters, page views, and unique visits are three types of dynamic components that are used to track a site’s visitors.
Hit Counters, Page Views, and Unique Visits You Should Know People who use search engines often jump directly to the page they want. This visit will not count as a hit unless a hit counter exists on the exact page the visitor downloads.
366
Chapter 13
A hit counter records the number of times that a Web browser requests a file from the Web server (one request equals one “hit”). A file is requested when a user first accesses a page, as well as when a graphic or other element is displayed on a page. Web developers may incorporate either public or hidden hit counters on any of a site’s pages. Public hit counters show the hit tally to anyone who views the page. Hidden hit counters show the hit tally only to people with access to the site’s private data, such as the Webmaster or Web site administrator. Instead of using a hit counter, many companies use page views and unique visits to measure a site’s traffic. Hit counters, page views, and unique visits are compared in Table 13.1 on page 367.
WebDesignDW.glencoe.com
Table 13.1
Dynamic Tracking Components Tracker
Function
Example
Pro/Con
Hit Counter
Records how often a file is accessed from a Web server. Each file on a Web page counts as one hit.
If an individual views a Web page that contains three graphics, this would count as four hits: one hit for the Web page itself, and three hits for each graphic.
Does not measure: • length of visit • whether visitor goes to other site pages • whether visitor has previously accessed the site
Page View
Records how many times a Web page was visited.
If an individual views a Web page that contains three graphics, this would count as one page view.
Useful for determining how many people visit certain pages.
Unique Visit
Records how many people visit a site overall.
If 100 people visit a site, this would count as 100 unique visits even if each person visited every page in the site.
Useful for determining how many people visit a site in total.
Hit counters, page views, and unique visits track different types of hits. Why are page views and unique visits more accurate ways to track visitors than a hit counter?
Tracking Software Many sites use tracking software to gather information about the site’s users. Tracking software records information such as: ◆ What country visitors are from ◆ How they navigated to your site ◆ What browser they used Tracking software can help individuals and companies decide where and how to advertise their sites. Tracking software can also help you identify the most popular pages on your Web site. You can then improve the site’s structure by making these pages readily available in the site’s navigation.
Activity 13.1 Explore Tracking Software Learn more about tracking software at WebDesignDW.glencoe.com.
Hosting Company Statistics Hosting companies rent space on their Web servers to other businesses, organizations, and individuals to use for their Web sites. Most hosting companies provide Web statistic software as part of a hosting package. The amount of information the statistics provide depends on the software used. Most statistics show the number of visitors to a site in a given time range, their country of origin, what Web pages were viewed and for how long, as well as what Web browsers and operating systems the visitors used to access a site. Common statistics software includes WebSTAT, AWStats, and Urchin. Identify What information does tracking software record?
WebDesignDW.glencoe.com
Adding Web Site Functionality
367
Connecting Web Sites and Databases How can I use a database to collect information? You Should Know MySQL (pronounced “my ess cue el”) is an open-source database primarily used for Web applications. MySQL databases are easily accessed through programming languages such as PHP, Perl, Java, and C++.
When visitors place online orders or provide feedback, the company must have a way to collect, organize, and store this information. Many companies use databases to maintain the information they receive.
Using Databases A database is a collection of information that is organized by fields and records. A field is one piece of information, such as a first name or last name. A record is a group of related fields that contains the information gathered about a particular person or item. For example, a record could include fields for a product’s item number, type, quantity, and price. Using fields and records makes it easier to retrieve and use stored information.
Linking to a Database Figure 13.1
You can link your Web site to databases created with a variety of applications, such as Microsoft Access and MySQL. You must publish the database with your Web site to enable visitors to access its information. Once you make the database accessible, you can create your Web pages to either display information from the connected database or to request information from visitors that is then stored in the database (see Figure 13.1).
A database can send information to users or receive information from users. How does a database organize information?
Database
Database sends information to users.
Users submit information to the database.
Static versus Dynamic Pages Web site developers often use the terms “static” and “dynamic” to distinguish between pages that contain fixed information and those capable of change. On a static page, the information is embedded in the HTML code that makes up the page. It cannot change without changing the code. Dynamic pages, on the other hand, are shells that contain changing information. The information that changes comes from an external source. When the external source is a database, the Web site is said to be database driven.
Types of Dynamic Pages A database interface page is a dynamic Web page that connects to and interacts with a database. There are two important types of database interface pages: ◆ An order form is a database interface page that allows visitors to send order information to a database. ◆ A results page is a database interface page that records orders that have been placed. Dreamweaver provides options and settings for defining database connections when you define a Web site. Although the database information comes from an external source, you can format the information displayed in these forms to reflect your site’s design. 368
Chapter 13
Before it can interact with a database, an order form must be saved as an active server page (.asp), a java server page (.jsp), a cold fusion page (.cfm), or a PHP: Hypertext Preprocessor page (.php). The Web server software will dictate the scripting language used to define a database connection. For example, Microsoft typically uses .asp with Microsoft server software, Linux uses the .php extension, Sun uses .jsp, and ColdFusion server software uses .cfm language. The page shown in Figure 13.2 has a .jsp extension. Some sites contain dynamic pages so that they can be updated easily. This page interacts with a database that stores and updates information about new products.
You Should Know Restricting access to the results page helps to keep personal customer information secure.
Figure 13.2 A file must be saved as a dynamic page to interact with a database. What function does this page perform in the Web site?
Identify What are the two main reasons for connecting a database to a Web site?
Section 13.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Hit counters, page views, and unique visits are used to track a site’s visitors.
4. Draw Conclusions What information can a tracking system provide to help you decide where to place banner ads?
2. Summarize the advantages of using tracking systems to learn about the visitors to a Web site.
5. Make Decisions You are the Webmaster for a teen entertainment site. Will you set up the results page for your order forms as public or private? Why?
• Tracking software can identify the countries where visitors live, how they navigated to your site, and the browsers they used. • Pages can be made static or dynamic. Dynamic pages rely on database driven information.
3. Explain the difference between static and dynamic pages.
Apply It! Explore Tracking Software Conduct Internet research to locate a tracking software application. Search the site to learn what information the tracking software will gather. Categorize the information in list form.
Adding Web Site Functionality
369
Starting an E-business
L
ike any business, a commercial Web site has to attract customers. A good business plan can help attract visitors.
Start with a Plan A business plan should outline the company’s mission and issues for running the business, including: ◆
The product or service you sell
◆
The type of customers you expect
◆
The methods you will use to advertise, market, and sell
◆
The expenses you expect to have and the income you expect to receive
Business Functions Remember that a Web site should provide many of the same functions you find in a traditional store, such as ways to: ◆
Advertise, like a newspaper or radio ad
◆
Market, like a printed brochure or coupon
◆
Browse, like a printed catalog or a store’s shelves
◆
Order, like a customer service counter or toll-free number
◆
Pay, like a check-out counter
If your site’s message is clear and the design is appealing, potential customers are more likely to become real customers.
Your Web site’s main mission is to deliver your company’s message to potential clients or customers. Create your site’s marketing message as if you were a first-time customer. Your site should clearly describe the products or services you offer, prices and availability, ordering and shipping instructions, and so on. Most important, the site should make visitors feel there is an advantage to doing business with you.
2. Create a Business Plan Suppose you have 1. Evaluate Create a checklist to evaluate how well started a business that provides a service, such a commercial Web site works as a marketing tool. as gardening or photography. Create a plan that Compile your checklist with the rest of the class. explains how you would use a Web site to market Then use this group checklist to evaluate three that business. Web sites. 370
Chapter 13
SECTION 13.2 MAKING INFORMATION EASY TO FIND Focus on Reading Read to Find Out The main purpose of this section is to identify the tools Web developers use to make a site’s information easy to find. As you read, note how each feature makes a site more user-friendly.
Main Ideas
Key Terms
Reading Strategy
Web developers use tools such as site maps, tables of contents, and bookmarks to help visitors locate information on the site. Site search components enable visitors to find specific words or phrases on the site.
site map table of contents search capabilities frequently asked questions (FAQ) named anchor
Identify four ways to make information easy to find on a Web site. Use a web diagram like the one below (also available online).
Ways to Make Information Easy to Find
The Web sites you have created in this textbook do not have many pages. Visitors to these sites will be able to locate the information they need by simply clicking the links on the navigation bar. However, Web sites that contain hundreds or thousands of pages often add features that make information easier for visitors to locate. Such features include site maps, tables of contents, frequently asked questions pages, and search capabilities.
Search Features How can I make it easier for users to find information on my site?
Tables of contents and indexes make it easy for readers to locate the information contained in printed magazines and books. Large Web sites often contain similar features that individuals can use to locate online information.
Site Maps A site map organizes a Web site’s pages into logical categories. Visitors can target their search by identifying the categories that may contain the information they need. The Web developer must carefully consider how to organize the pages so the groupings make sense to visitors. While Dreamweaver does not have tools to generate a site map that visitors can see, you can download extensions from the Macromedia Exchange site to incorporate this functionality. Many extensions require dynamic pages (those with file extensions ending in .php, .asp, or .cfm rather than .html) in order to function properly. WebDesignDW.glencoe.com
Adding Web Site Functionality
371
Tables of Contents A table of contents on a Web site functions in much the same way as a table of contents in a book. It allows visitors to see the contents and organization of the site in one glance. As shown in Figure 13.3, a table of contents generally lists each main page on the site. Subpage lists then appear beneath these main pages. This makes it easy for visitors to jump quickly to the page that they want to see. A link bar is often called a table of contents because it provides an overview of the site’s content.
Figure 13.3 Each item in the table of contents links to a page on the Web site. Why is a table of contents a good way to access books published online?
Search Capabilities
Activity 13.2 Identify Search Features Learn more about search features at WebDesignDW.glencoe.com.
Most e-commerce sites, portals, and corporate Web sites use search capabilities to help visitors quickly find information and products. It would be very time-consuming to try to find specific information, such as a particular word or phrase, if search capabilities on such sites did not exist. Search functionality is a dynamic feature that often requires adding scripting language to a Web page so it can work with a Web server. Most companies and businesses rely on programmers to integrate proprietary search capabilities within a Web site. Others rely on search engine technology from companies such as Yahoo and Google. For instance, the Google search box shown in Figure 13.3 allows visitors to search within the selected Web site for a specific topic. The search box also gives visitors the option of searching the entire Web. In either case, once a search engine is in place, the pages of a Web site must be indexed in order to show up in search results. Describe What is the difference between a site map and a table of contents?
372
Chapter 13
WebDesignDW.glencoe.com
Frequently Asked Questions Pages How can I use named anchors if my site has long pages?
A frequently asked questions (FAQ) page answers common questions that visitors are likely to have about the site. Many FAQ pages include named anchors. A named anchor is a hyperlink to a specific place in another document or to a specific place within a document. Intrapage (within the same page) named anchors are useful when you have long pages, or when you want to jump from a central list of links to multiple locations on the page.
ACTIVITY 13A Add Named Anchors 1 In Dreamweaver, open your MyDiskDesigns.biz faq.html page in Design view. Position the insertion point before the text How can I get a custom design made? Make sure you click before the question that does NOT have a bullet point in front of it. 2 With the Insert toolbar in Common view, click the Named Anchor button (or press Ctrl + Alt + A). In the Named Anchor dialog box, in the Anchor name box, key: custom. Click OK. An anchor icon appears in front of the sentence (see Figure 13.4).
Troubleshooting If you do not see the anchor icon after you complete Step 2, choose View>Visual Aids> Invisible Elements.
3 At the top of the page, select the bulleted question How can I get a custom design made? In the Properties inspector, in the Link box, key: #custom. Press Tab. Deselect the question. Your screen should look similar to Figure 13.4.
Figure 13.4 Each question in the list will link to a named anchor.
Anchor
Table 13.2 Make your named anchor names logical and unique.
4 Repeat Steps 1 through 3 to create named anchors for the remaining four questions on the FAQ page. Use the information in Table 13.2 to complete the steps.
Question
Anchor Name
Link
What if the design I want is temporarily sold out?
soldout
#soldout
How can I use my blank DVDs and CDRs?
use
#use
What is the return policy?
policy
#policy
How long will it take to get my disks?
disks
#disks
Adding Web Site Functionality
373
5 Save your work. Test the named anchors in a Web browser. When you click the last question in the bulleted list, you should go to the end of the page, as shown in Figure 13.5.
Figure 13.5 The hyperlink connects the question at the top of the page to the answer.
Define What is a named anchor?
Section 13.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• A site map enables visitors to search for information by category.
1. Define site map, table of contents, search capabilities, frequently asked questions (FAQ), named anchor.
4. Analyze What types of information should be easy to locate on an e-commerce site? Explain your reasoning.
2. Explain why it is useful to include search features on a large Web site.
5. Evaluate Identify two Web sites in which you have used a search form. Explain how this search feature helped you locate information on the site.
• Search capabilities allow visitors to access site information by searching for a word or phrase. • A FAQ page provides answers to common questions about the site. • Named anchors enable visitors to jump to marked locations within a page or in a separate document.
374
Chapter 13
3. Summarize why Web sites post FAQ pages.
Apply It! Identify Search Features Visit the Web site of your local newspaper or the site of an “e-zine” that you like to read. Which of the features described in this section are available? Write a paragraph describing each feature.
SECTION 13.3 BUILDING A SENSE OF COMMUNITY Focus on Reading Read to Find Out This section explains the tools that are often used to communicate with a Web site’s visitors. As you read, focus on the methods Web sites use to motivate visitors to return to their sites.
Main Ideas
Key Terms
Reading Strategy
Web sites use newsletters, blogs, and syndicated content to share information with visitors. Bulletin boards and guest books allow visitors to share information with other online users.
newsletter blog RSS bulletin board guest book
Identify five tools that a Web site can use to either share or receive information. Use a table like the one below (also available online). Share Information
Receive Information
The Web is an important online community. When you create a Web site, you want to include features that will help your visitors feel that your site is part of this community. Providing communication tools such as newsletters, blogs, syndicated content, bulletin boards, and guest books can help build a sense of community that will keep visitors coming back to your site.
Sharing Information with Visitors What tools can I use to share information with my site’s visitors?
The growing popularity of communication tools has led to their adoption by many businesses and companies as a way to share news and information with Web visitors. Tools such as newsletters, Web blogs, and syndicated content allow you to share information with your site’s visitors. When deciding which tool to use, you should consider how you want to distribute your information and how often you plan to update your news.
Newsletters Many Web sites use an e-mail newsletter to share news, information, and ideas about a particular topic. Newsletters provide a convenient method to stay in touch with users and to motivate them to visit a site again. Visitors subscribe to a newsletter by completing an online form. Newsletters are usually published either monthly or quarterly. When creating a newsletter, you must determine how you will send it to users. You can use an e-mail program to send out your newsletter or you can purchase specialized software to help you distribute it. Some companies, such as Constant Contact, provide newsletter distribution and management through a Web-based interface.
WebDesignDW.glencoe.com
Content When using a newsletter, you need to consider how you will manage subscribers who change their e-mail address or cancel their subscription. Linking your subscription form to an online database can help subscribers to update their information when necessary.
Adding Web Site Functionality
375
Blogs
Jargon The abbreviation RSS can also stand for Rich Site Summary or RDF (Resource Description Framework) Site Summary. All of these terms refer to content syndication.
A blog, short for Web log, is a public journal in which one or more individuals share their thoughts on a variety of subjects. While a newsletter is sent to visitors, a blog is a Web page that visitors access to read what is posted. Most blogs are updated on a daily basis. To create a blog, users need specialized publishing software they can install on their computers or control through an online blogging service. Popular online blogging services include Blogger™, TypePad™, and Movable Type™. These services provide a number of blog publishing options as well as templates that users can modify to match their site’s design.
Syndicated Content (RSS) An increasingly popular way to build a following for a Web site is through content syndication or RSS feeds. The acronym RSS is short for Really Simple Syndication. Syndicated content can include items such as news feeds, headlines, blog entries, company news, and event listings. Once it is created, syndicated Web content can be published on a number of different Web sites. Anytime the RSS feed is updated, the new information shows up on any site that syndicates the content. In Figure 13.6, the My Yahoo!® Web site allows users to include RSS feeds from thousands of content sources to create a highly customizable and personal page.
Figure 13.6 Yahoo allows individuals to use RSS feeds to create customized Web pages. What does the abbreviation RSS stand for?
To create an RSS feed, you need to save your content in a specialized XML format that can be read by RSS aware programs called news aggregators or readers. Some Web browsers have built-in RSS news aggregators. RSS readers can also be downloaded from the Web. Popular RSS readers include WinRSS and FeedDemon. Describe What is a blog?
376
Chapter 13
Receiving Information from Visitors What tools can I use to receive information from my site’s visitors?
Tools such as bulletin boards and guest books allow you to receive information from your site’s visitors.
Bulletin Boards A bulletin board is where people can exchange messages with other online users. Users can post items such as questions, photos, news, thoughts, or artwork for others to discuss or comment on. Most bulletin boards require users to register before they can read or respond to posts. Different Web sites use bulletin boards in different ways: ◆ Software companies sometimes use bulletin boards to provide technical support for their customers. ◆ Schools use bulletin boards to allow students to post questions to teachers or other students.
Caution When collecting information from visitors, you should always consider how to protect the privacy and safety of the people who are submitting information.
Guest Books A guest book gives visitors a place to record their experiences with the Web site. Unlike a feedback form, a guest book is a public record of comments made by the site’s visitors. Many guest books gather visitors’ names, e-mail addresses, and comments. This information is then stored in a log file that other visitors can read.
ACTIVITY 13B Create a Guest Book 1 In your MyDiskDesigns.biz Web site, in the Files panel, right-click blank.html. On the shortcut menu, choose Edit>Duplicate. Right-click the Copy of blank.html file and choose Edit>Rename. Rename the file: guestbook.html. Open the guestbook.html page. In the Title box, delete the text and key: MyDiskDesigns – Guest Book. 2 Click in the header graphic area (top-right box). With the Insert toolbar in Common view, click the Images button. Browse to the DataFiles\Ch13\Images folder. Select the hdr_guestbook.gif file and save it in your site’s images folder. With the graphic selected, in the Alt box, key: Guest Book.
Figure 13.7 Text added to guest book page.
3 Click under the graphic header and key: How do you like our Web site? Please sign our public guest book so we can share your thoughts with other visitors. (Return to the Contact Us page.). Format the text bold. Your page should look like Figure 13.7.
Adding Web Site Functionality
377
4 Select the text Contact Us. In the Properties inspector, move the mouse pointer over the Point to File icon. Click and drag from the icon to the contact.html file in the Files panel. The highlighted text will now link to the Contact Us page. Click after the sentence and press Enter. Your screen should look like Figure 13.8.
Figure 13.8 A link is created so visitors can return to the Contact Us page.
Figure 13.9 Visitors will use the text area to enter their comments into the guest book.
5 Key: Add Your Comments. Select the text. In the Properties inspector, click the Format drop-down arrow and select Heading 3. Click after the text and press Enter. 6 Change the Insert toolbar to Forms view and click the Textarea button. In the Add form tag? dialog box, click Yes. 7 Select the Textarea element. In the Properties inspector, under TextField, delete the text and key: comments. In the Char width box, key: 40. In the Num Lines box, key: 5. Leave the Init val box blank. Your page should look like Figure 13.9.
Text area
378
Chapter 13
8 In the Document window, position the insertion point after the Textarea box. Press Enter. On the Forms toolbar, click Button to create a Submit button. Click after the Submit button and click Button again. In the Properties inspector, under Action, select Reset form to insert a Reset button.
9 Save your work. Preview the page and test the Contact Us link. Your completed form should look similar to Figure 13.10. Close your browser.
Figure 13.10 Finished guest book as viewed in a Web browser.
10 In Dreamweaver, open contact.html. In the Get In Touch box, select the text guest book. In the Properties inspector, click and drag from the Point to File icon to the guestbook.html file in the Files panel. The highlighted text will now link to the Guest Book page. Save your work and test the link in a browser. Close your browser. Close your MyDiskDesigns Web site.
Troubleshooting For the guest book to function, you would have to make the Web page dynamic by inserting scripting code. When you publish the page to a server that recognizes the code, the guest book would be active.
Describe What is the difference between a guest book and a feedback form?
Section 13.3 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Newsletters, blogs, and syndicated content are used to share information with a site’s visitors.
4. Analyze If you created a Web site about a local softball team, what types of syndicated content would you include on the site? Explain your reasoning.
• Syndicated content (RSS) is content that is distributed to multiple Web sites. • Bulletin boards and guest books are used to receive information from a site’s visitors.
2. List the steps you would follow to create a guestbook in Dreamweaver. 3. Explain how Web sites use periodic e-mail newsletters.
5. Evaluate Identify two Web sites in which you have used a bulletin board. Explain how you used this feature.
Apply It! Write a Proposal Your school district is creating a new Web site. Write a short proposal that identifies three communication tools that you think should be included in your school’s site. Explain your reasoning.
Adding Web Site Functionality
379
SECTION 13.4 FRAMES Focus on Reading Read to Find Out Web designers use frames to control a Web site’s layout. As you read, make sure you understand the difference between a frame and a frameset.
Main Ideas
Key Terms
Reading Strategy
Frames allow designers to control how individual areas of a site display and scroll. Dreamweaver provides predefined framesets that make it easy to create frames-based sites.
frame frameset
Compare and contrast a Web page that uses frames and one that does not. Use a Venn diagram like the one below (also available online). Frames
No Frames
The MyDiskDesigns.biz subpages currently use one HTML document to display content. The top of the page contains the company’s logo and navigation bar. The middle of the page contains the page’s main content. The bottom of the page contains text links and copyright information. Some sites use frames to display this information.
Creating Frames-Based Pages How many files are usually in a frames-based page?
A frame is a separate region on a Web page that contains its own Web document. With frames, different parts of the screen can scroll independently. Frames are designed to make navigation easier by keeping part of a site constant. For example, many frames-based sites place the navigation bar in a frame on the left side of the page. When a visitor selects any item on the navigation bar, the frame on the right displays the selected page. The navigation bar frame itself, however, remains unchanged.
Files in a Frames-Based Page Caution Many older browsers do not support frames. When creating a frames-based site, be sure to consider your target audience. If this audience mainly uses older browsers, you may not want to create a site with frames.
380
Chapter 13
A basic frames-based page usually consists of three separate files (see Figure 13.11 on page 381). ◆ One file defines the Web page that will display in frame one. This Web page is usually the site’s link bar. ◆ A second file defines the Web page that will display in frame one. This second page usually contains the Web site’s main content. ◆ A third file defines how the separate frames files will display on the Web page (their size, settings, and placement). This file is like a shell that contains the other files, and is sometimes referred to as a container page. In Dreamweaver, you can identify the container page by looking for the label frameset. WebDesignDW.glencoe.com
Figure 13.11 The container page directs the browser how to display the two frames files. How many files would be needed to create a Web page with three frames?
Container Page
Frame 1
Frame 2
Guidelines for Frames-Based Pages While useful, frames-based pages can also cause problems for some viewers. Following certain guidelines will help make your frames-based pages more user-friendly.
Size Guidelines In theory, you can create an unlimited number of frames on a page. However, dividing the pages into many small segments can confuse visitors. As you design your site, you should consider the number, placement, and size of the frames. ◆ On a site that contains a left and right frame, the Web designer usually defines the pixel width of the left frame. The right frame takes up the remaining space on the page. It is best not to define the pixel width of the right frame since monitor sizes and resolution vary. ◆ On a site that contains a top and bottom frame, the designer assigns a pixel width to the top frame. The bottom frame then fills the remaining space on the page.
Usability Guidelines Frames can make a site more difficult to navigate for visitors with accessibility issues. People with sight limitations, for example, use devices called screen readers that read aloud the contents of Web pages. These devices have difficulty making sense of pages with frames. For frames to meet the requirements of the Americans with Disabilities Act, you must assign each frame a logical title. You may also choose to reproduce each frames page as a non-frames page to increase your site’s accessibility.
Design Before you create a framesbased site, think about how your site will be used. Using frames in a Web site often inhibits search engines from indexing the contents of the site. This makes it difficult for people to find the site if they use search engines to browse the Web.
Identify What is a frameset?
Adding Web Site Functionality
381
Creating Frames Using Dreamweaver You Should Know Use the Frames panel to edit options for a particular frame. Use the Document window to edit the HTML page within the frame just as you would with an unframed Web page.
How can I use a predefined frameset as a template for my Web site?
It is easy to create a frames-based page using Dreamweaver. For instance, you can select one of the predefined framesets in Dreamweaver’s Start page or you can create your own. You can also convert a non-frames-based site into a frames-based site. When you save a frames-based Web page, the frameset file must be saved along with each frame page’s file. For example, if you have a page that contains two frames, you will save three files: the frameset page and the two frame pages. In the following activity, you will use a predefined frameset template to create a frames-based Web page.
ACTIVITY 13C Use Frames on a Site 1 Create a root folder named: My Frames Site. In the root folder, create a folder named: images. 2 Open Dreamweaver. In the Start page, in the Create from Samples column, select Framesets. In the New Document dialog box, in the Framesets list, select the Fixed Top frameset (see Figure 13.12). Click Create.
Figure 13.12 Dreamweaver provides predefined framesets for frames-based pages.
3 The Document window shows the two frames that make up the frameset Web page. In the Title box, delete the text and key: My Frameset. 4 The Properties inspector displays properties for the frameset that controls the two frames. Modifying the frameset will change how the frames display on the page. Click the Borders drop-down arrow and choose Yes. In the Border width box, key: 5. In the Border color box, key: #FF0000. Under Value, in the Row box, key: 20. Press Enter. The top frame resizes to 120 pixels. 382
Chapter 13
5 Choose File>Save All. In the dialog box, in the File name box, name the frameset file index.html and save it in your root folder. 6 You are then prompted to save either the top or bottom frame. Look in the page’s Document window. The frame that is outlined is the frame you are about to save. Name the bottom frame bottomframe.html and save it in your root folder. Name the top frame topframe.html and save it in your root folder. Use Site>Manage Sites to define your My Frames site in Dreamweaver. 7 Choose Window>Frames (or press Shift + F2) to open the Frames panel. A model of the two frames appears in the Frames panel. In the model, click inside the frame labeled topFrame. The Properties inspector changes to show the options for the top frame (see Figure 13.13). 8 In the Properties inspector, click the Scroll drop-down arrow and select Yes. Uncheck the No resize option (see Figure 13.13). This will allow users to resize the top frame within their Web browser if they wish.
Figure 13.13 When you select a frame, the Properties inspector changes to display that frame’s options.
Top frame
Bottom frame
Name of frame that is selected
9 In the Document window, click inside the top frame. In the Title box, key: Top Frame. In the Properties inspector, click the Page Properties button. In the Background color box, key: #FFCC00. Click OK. 10 With the Insert toolbar in Common view, click Images. Browse to the DataFiles\Ch13\Images folder. Select logo_mydiskdesigns.gif and save it in the site’s images folder. Provide the Alt text MyDiskDesigns logo. 11 In the Frames panel, in the frames model, click in the frame labeled mainFrame. In the Properties inspector, click the Scroll drop-down arrow and select Yes. Uncheck the No resize option, if necessary. In the Document window, click inside the bottom frame. In the Title box, key: Bottom Frame. In the Properties inspector, click the Page Properties button. Set the Font Size to 18. In the Background color box, key: #99CCFF. Click OK. Adding Web Site Functionality
383
12 In Dreamweaver, click in the bottom frame. Select File>Import>Word Document. In the Open dialog box, browse to the DataFiles\Ch13\Text folder and open the frames_privacy.doc file. Format the text Privacy Policy font size 36 pixels, Bold. Your screen should look like Figure 13.14.
Figure 13.14 When you scroll one frame in the page, the other frame remains constant.
13 Save all three files and preview your framed page in a browser. Resize the top frame by clicking and dragging up or down on the red border that separates the two frames.
Identify How many files are contained in a site with two frames?
Section 13.4 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Frames enable different parts of the screen to scroll independently.
1. Define frame, frameset.
4. Compare and Contrast How are sites with frames similar to sites without frames? How are they different?
• A frameset contains information about the size and placement of all frames within a Web page. • The Framesets category in the New Document dialog box displays the Dreamweaver predefined framesets for creating a frames-based Web site.
384
Chapter 13
2. Describe the information contained in a frameset. 3. Identify three problems with using frames on a Web site.
5. Make Predictions Do you think the number of new sites created with frames will increase in the future? Explain your reasoning.
Apply It! Evaluate Frames You want to publish a book online. You plan to list the table of contents on the left and the text on the right. The table of contents will list the book’s 12 chapters. The text is one long document. Is this book a good candidate for a frames-based site?
CHAPTER 13
Reading Review
SECTION 13.1 Tracking Visitors and Collecting Information
Main Ideas ■ Hit counters, page views, and unique visits are used
to track a site’s visitors. ■ Tracking software can identify the countries where
visitors live, how they navigated to your site, and the browsers they used. ■ Pages can be made static or dynamic. Dynamic pages rely on database driven information.
SECTION 13.2 Making Information Easy to Find Key Terms site map, 371 table of contents, 372 search capabilities, 372 frequently asked questions (FAQ), 373 named anchor, 373
Main Ideas ■ A site map enables visitors to search for
information by category. ■ Search capabilities allow visitors to access site information by searching for a word or phrase. ■ A FAQ page provides answers to common questions about the site. ■ Named anchors enable visitors to jump to marked locations within a page or a separate document.
Main Ideas ■ Newsletters, blogs, and syndicated content are used
to share information with a site’s visitors. ■ Newsletters are sent to users, while blogs are Web pages that users access online. ■ Syndicated content (RSS) is content that is distributed to multiple Web sites. ■ Bulletin boards and guest books are used to receive information from a site’s visitors.
Main Ideas ■ A frame is a separate region on a Web page that ■ ■ ■
■
contains its own Web document. Frames enable different parts of the screen to scroll independently. A frameset contains information about the size and placement of all frames within a Web page. The Framesets category in the New Document dialog box displays the Dreamweaver predefined framesets for creating a frames-based Web site. You must save the frameset file and each individual frame file when creating a frames-based page.
Adding Web Site Functionality
385
CHAPTER 13
Review and Assessment
AFTER YOU READ Organize to Remember Review the chapter by looking over headings and subheadings. Notice how topics are organized. Are they grouped together in helpful ways? Would you regroup some topics to make the information easier to remember? Find a section that you think is particularly well organized. Read it through once. Then write down all the information you can remember. Did you hit all the main points? How many smaller details did you remember?
Reviewing Key Terms 1. Change the following sentence to make it true: A record is one piece of information, such as a last name or telephone number. 2. What do search capabilities allow a visitor to do? 3. What is a named anchor? 4. What is a blog? 5. How is a newsletter different from a bulletin board? 6. What element provides a space for visitors to submit comments about a Web site? 7. On a frames-based site, what is the name of the shell page that includes the information about the size and shape of each frame on the page?
Understanding Main Ideas 8. Describe the limitations of hit counters. 9. Identify the types of decisions that tracking software can help companies make. 10. Explain how databases are organized. 11. Summarize the purpose of a database interface page. 12. Evaluate how search capabilities make a site more user-friendly. 13. Describe how intrapage named anchors can be useful on long pages. 14. Explain how a guest book is different from a feedback form. 386
Chapter 13
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
15. Compare and Contrast static and dynamic pages.
Static Pages
Dynamic Pages
16. Summarize how each of the following communication tools is distributed: newsletter, blog, RSS content. Communication Tools
Newsletter
Blog
RSS
Critical Thinking 17. Draw Conclusions Six of your ancestors were writers. Their writings include short stories, poems, and one novel. You have collected all these works and plan to post them online. What techniques can you use to help visitors find the work of a particular person or a specific genre? 18. Make Recommendations You are working on a team that is developing a Web site examining the opposing points of view on a community issue. One team member has suggested using a frames-based site with four frames. The top frame would contain the navigation. The rest of the page would be divided into three equal frames, each containing information about one of the three viewpoints being expressed. What problems, if any, do you see with this approach? Explain your reasoning.
Review and Assessment
CHAPTER 13
19. Categorize A hosting company is offering your school’s yearbook staff the choice of three different Web site packages to supplement this year’s yearbook. As a bonus with the package, you get to select one free service: blog, newsletter, or bulletin board. Which one service would you choose for the yearbook staff and yearbook site? Why would you choose this service? Write a paragraph to illustrate your answer. 20. Evaluate Your community library is planning to update the library Web site. The librarian has decided to create a frames-based site with a left frame and a right frame. If the librarian asked you to help create the site, what content would you place in the left frame and why? What content would you place in the right frame and why? Use a table like the one below to organize your ideas. Explain your reasoning. Left Frame
Right Frame
Content/Purpose
Reading & Writing Read the paragraph below and then answer the question.
Web site developers often use the terms static and dynamic to distinguish between pages that contain fixed information and those capable of change. On a static page, the information is embedded in the HTML code that makes up the page. It cannot change without changing the code. Dynamic pages, on the other hand, are shells that contain changing information. The information that changes comes from an external source. When the external source is a database, the Web site is said to be database driven. According to the paragraph, which of the following statements is true? Dynamic pages may be database driven. The information on a static page comes from an external source. Static pages are composed of information that is constantly changing.
Content/Purpose
Both static and dynamic pages are composed of embedded information.
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart of general Dreamwaver editing commands shown below.
21.
+
+
Study with PowerTeach Go to the book Web site listed above. To review the main points in this chapter, select e-Review>PowerTeach Outlines>Chapter 13.
Online Self Check
22. 23.
Result
WebDesignDW.glencoe.com
Result
+
WebDesignDW.glencoe.com
Result
Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 13.
Adding Web Site Functionality
387
CHAPTER 13
Activities
1. MAKING CONNECTIONS Language Arts—Design a Table of Contents Imagine you are planning to post your class notes from all the classes you are currently taking to a Web site. Review your notes from the last month. Then write a table of contents that organizes the material: ◆ By class ◆ By appropriate subcategories within that class Use the fishbone diagram shown on this page as a model for each class. Make certain that the subcategories you use will be helpful to people visiting the site. For example, you could use the date the notes were taken as a subcategory. Classmates who missed a particular class could use this subcategory to search for your notes.
Subcategory Class
Subcategory Subcategory
Then, consider whether it would be beneficial to distribute your class notes in a blog or a newsletter. Which one would be better? Explain your answer.
2. STANDARDS AT WORK Students demonstrate a sound understanding of the nature and operation of technology systems. (NETS-S 1)
Evaluate Guest Books Locate a Web site that includes a guest book. Navigate through the site and evaluate the design and content of each page. 1. As you navigate the site, identify its strengths and weaknesses. Create a table comparing the strengths and weaknesses. 2. When finished, review your table. What do you think is the greatest strength of the site? How would you improve one of the weaknesses? 3. With your teacher’s permission, make an entry in the site’s guest book. Compliment the site on its specific strengths. In a positive way, suggest an improvement or an additional feature for the site. Visit the site after you have posted your guest book entry to see how the entry appears. Remember not to include any personal contact information in your entry. If your school does not allow posting to a guest book, key your entry into a word processing document. Share your entry with a classmate. 4. Compare the site you selected with that of a classmate. How are the guest books similar? How are they different? Discuss these similarities and differences with your classmate.
388
Chapter 13
CHAPTER 13
Activities
3. TEAMWORK SKILLS Design a Database Interface Your school is developing a Web site where students and faculty can post book reviews. The site will also allow students to buy or trade books. Your team is planning and designing the databases and forms needed to support the site. 1. Plan the book review form. Research sites that include book reviews. Note what information is gathered from people posting reviews (titles of books for sale, book costs, purchase information, etc.). 2. Choose the database fields needed to manage the book buying and trading. Make a list of all the information needed about the person offering the book for sale or trade. Then list the book information (title, author, price, etc.) that someone would need to make a decision to buy or trade the book. Create a list of field names for the database. Use a table like the one below to list what information you need to include in the form, the field name you will use to label this information, and what element you plan to include in the form to collect the necessary information.
FORM INFORMATION NEEDED (example) Title of book for sale
FIELD NAME Sale book title
FORM ELEMENT Text field
3. Use Dreamweaver to create the buying and trading form. Name the fields on the form to match the field names in the database.
4. CHALLENGE YOURSELF Research Tracking Software Use a search engine to locate three businesses that sell tracking software. Navigate each of these sites. Make a list of the types of information that the tracking software can gather. Also note how much these services cost. Some sites offer online demonstrations of the software. Do not sign up for free trials unless you have your teacher’s permission to do so. Based on your research, create a chart that compares the types of information that can be gathered by each of the tracking software applications. Then write a short report that explains what types of Web sites would find tracking software useful. Using this information, make a recommendation as to which tracking software should be acquired for your school’s Web site. Be sure to include in your recommendation the tracking software features, the purpose and benefit to the school, the company and site in which you found the best deal, and the cost.
Adding Web Site Functionality
389
CHAPTER 13
Projects
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Add a Guest Book
Add a guest book to the mouse pad e-commerce site. Open the site you created in the Chapter 12 You Try It Skills Studio #1 (see page 362). Select a name for the business. Design a simple logo for the site. Add a home page to the site (make the Order Form page a subpage of the home page). Place the logo on the home page. Add content describing the custom mouse pads offered by your company. Add a guest book page. Make the page another subpage of the home page. Save your work. Preview the site in a browser.
2. Create a Frames-Based Page
390
Change a page from the MyDiskDesigns Web site into a frames-based page. In Dreamweaver, use Framesets to create a new Fixed Top frames-based Web page. Name the frameset file: My Second Frameset. Adjust the file so it has a red border with a Border width of 5 and a Row value of 120. Save all of the site’s files to a new root folder named: My Second Frames Site. Open the Frames panel. Set the topFrame to scroll and resize. Give it a Title of Top Frame and a yellow background color. Open the FAQ page in your MyDiskDesigns Web site. Copy and paste the bulleted list from the FAQ page into the new site’s top frame. Set the mainFrame to scroll and resize. Give it a Title of Bottom Frame and a blue background color. Copy and paste the unbulleted list of questions from your MyDiskDesigns FAQ page to the new site’s bottom frame. Save your work. Preview your frames-page in a browser. Make sure that the frames work properly and practice resizing them.
Chapter 13
CHAPTER 13
Projects
Read the projects described below. Then follow the directions to complete each project.
1. Create Named Anchors for a Résumé Gather the information you need to create a résumé that includes the following sections: ◆ Contact Information ◆ Career Objective ◆ Education ◆ Software Proficiency ◆ Experience ◆ References Under software proficiency, you will list specific software applications that you know well enough to use on the job. For your reference section, list the teacher of your Dreamweaver class and one other teacher or an employer who knows you well. Create the résumé in Dreamweaver (Hint: with the Insert toolbar in Text view, use the Characters: Other Characters button to add the é to your page). Add named anchors that allow visitors to quickly move to each section of the résumé. Proofread the résumé carefully and make changes as needed. Preview the résumé in a browser. Test the named anchors to make certain they work properly.
2. Create an Investing for Teens Web Site Your school has formed a new club called Investing for Teens. The club explores the basics of financial investments and helps students plan future investments. Develop a Web site that contains the following four pages: ◆ A home page that introduces the club and gives the list of upcoming meetings. ◆ A membership form page that gathers e-mail addresses from visitors who want to receive a monthly online newsletter. ◆ An informational page that describes basic financial tips for savings and investing money. The page includes links to other investing sites aimed at teens. ◆ A glossary page that lists common investing terms and their definitions. Create the site in Dreamweaver. Add named anchors to the glossary page so that visitors can move quickly to the terms. Preview the site in a browser and make changes as needed.
Adding Web Site Functionality
391
CHAPTER
14
Publishing a Web Site
YOU WILL LEARN TO… Section 14.1 Identify the technical needs of a Web server Evaluate Web hosts Compare and contrast internal and external Web hosting Section 14.2 Select a Web site name Register a domain name Maintain a site’s directory structure Publish and test a Web site Section 14.3 Validate a Web site against W3C standards Check for broken links Check your Web site against target browsers Section 14.4 Identify techniques for publicizing Web sites Insert meta tags Evaluate the use of cookies for targeted marketing
392
Chapter 14
WHY IT MATTERS ................................................. Publishing a Web site is similar to publishing a book. Publishing a book involves converting an author’s manuscript into a finished print product that can be distributed to readers. Publishing a Web site involves moving Web page files from the computer where they were developed to a Web server. The last piece of the process is making your audience aware that the product is available. Think about an item that you purchased recently. Write a short paragraph explaining why you decided to purchase this item. How did this item first come to your attention? Did you see it advertised on television or the Internet? Did you hear about it from friends? Evaluate how important advertising was in your decision to buy this item.
CHAPTER
14
WHAT YOU WILL DO .......................................................................... You Try It Skills Studio Calculate Web Site Size ....................... 420 Add Meta Tags and Publish a Site...... 420
ACTIVITIES AND PROJECTS Apply It! 14.1 Evaluate Web-Hosting Services ...................................... 14.2 Create a Directory Structure ... 14.3 Check Links ................................ 14.4 Promote a Web Site ................... You Try It Activities 14A Calculate Web Site Size and Bandwidth .................................. 14B Publish a Web Site Using FTP.... 14C Validate a Web Site .................... 14D Check for Broken Links ............. 14E Perform a Target Browser Check .......................................... 14F Register a Site with a Search Engine ......................................... 14G Add Meta Tags to a Web Site..... Chapter Assessment Making Connections ............................ Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................
397 403 409 414
396 401 406 407 408 411 412
Web Design Projects Organize Web Site Structure .............. 421 Publish a Site ....................................... 421
IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects
ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
418 418 419 419
BEFORE YOU READ Take Good Notes The chapters in this book are organized so that main headings describe main ideas and subheadings introduce supporting details. You can organize your notes by this method. Think of main ideas as Level 1 ideas. Supporting details can be Level 2, 3, or 4. Every time you read a main idea, write down a brief Level 1 note. Under that, write down the Level 2 supporting details. Level 2 may also have its own supporting information. Those are Level 3 details. Note those details beneath Level 2. Continue this method as you read through the chapter.
WebDesignDW.glencoe.com
Publishing a Web Site
393
SECTION 14.1 WEB SERVERS Focus on Reading Read to Find Out This section explains how to publish a Web site. As you read, make sure you understand how Web-hosting services work.
Main Ideas
Key Terms
Reading Strategy
Publishing a Web site involves transferring the site’s page files from a local computer to a Web server. Web hosts give customers access to Web servers in return for a fee.
publish Web server Web host host Web server clusters internal Web hosting external Web hosting
Compare and contrast internal and external Web hosting. Use a Venn diagram like the one below (also available online).
Internal
External
To publish a Web site, you transfer that site’s Web page files from the local computer where you created them to a remote Web server. Knowing how to publish a Web site is crucial in the Web site development process.
The Technical Needs of a Web Server How do I evaluate a Web server’s hardware?
As shown in Figure 14.1, a Web server is a powerful computer that maintains a constant connection to the Internet. A server’s power and efficiency is largely determined by its hardware. Understanding this hardware can help you select an appropriate server when you publish your Web site.
Figure 14.1 Web servers are constantly connected to the Internet. What factors affect a Web server’s efficiency?
394
Chapter 14
WebDesignDW.glencoe.com
When choosing a Web server, evaluate the following items: ◆ CPU Power A Web server’s CPU power determines the number of instructions it can process in a given time period. The maximum processing capability of a server is determined by the number of central processing units (CPUs) it has and the running speed (frequency) of those processors. A high-performance Web server is generally able to process about 16 times more instructions per second than a typical desktop computer. ◆ Hard Drive Speed and Capacity Many high-capacity Web servers support multiple hard drives. The hard drives in Web servers usually retrieve data at a substantially higher rate than the drives in common desktop systems.
Jargon Throughput, or “bandwidth,” is measured in kilobytes per second (Kbps), Megabytes per second (Mbps), or Gigabytes per second (Gbps). Bandwidth refers to the amount of data that can be transferred in a fixed amount of time.
◆ Communications Channel Bandwidth Fast and powerful CPUs and fast hard drives will not accomplish much if the Web server has a limited communication channel. High-speed digital communication lines such as DSL or T1/T3 lines transfer data quickly between computers. ◆ Scalability The term “scalability” refers to a Web server’s ability to meet response time and to handle increasing Web traffic. A server that can be easily upgraded to handle a dramatic increase in traffic is said to be highly scalable. ◆ Reliability Some servers are more reliable than others. For instance, some servers incorporate dual power supplies so that if one burns out, the other will continue running the system. Other servers will continue to operate if the computer’s CPUs malfunction. Define What is scalability?
Web Hosts How do Web-hosting services work?
Figure 14.2 Companies such as BlueHost offer Web-hosting services. What is a Web host?
Instead of purchasing their own Web server, many individuals and small companies pay Webhosting services to store their Web site files for them. A Web host is a company that provides Web server space to customers for a fee (see Figure 14.2), so that they can post their Web site on the server. Customers post, or transfer, their files to a host. A host is the name of the Web server on which a particular Web site resides. Publishing a Web Site
395
Choosing a Web Host You should consider several factors when choosing a service to host your Web site, including:
Activity 14.1 Explore Web Hosts Find out more about Web hosts and the services they provide by visiting WebDesignDW.glencoe.com.
◆ Cost Some Web hosts charge customers an initial setup fee while others charge a monthly fee. Large hosting companies generally charge higher monthly fees than smaller companies but often can provide superior benefits. ◆ Performance Large Web-hosting companies typically offer much better performance, or bandwidth. Their servers have faster CPUs, bigger and faster hard drives, and higher capacity communication lines. ◆ Reliability One Web server might be more reliable than another. For example, many large Web hosts provide Web server clusters that store a given Web site on multiple computers acting as a single virtual host. If one computer in the cluster should fail, the other computers in the cluster can continue without interruption. ◆ Tech Support Different Web hosts offer different levels of support. If you do not want to troubleshoot your site’s problems, you may want to use a Web host that offers a higher level of support. ◆ Storage Space and Bandwidth Make sure the host server or hosting plan you choose has enough room for all your Web files, and has enough bandwidth to handle your site’s traffic.
ACTIVITY 14A Calculate Web Site Size and Bandwidth 1 Locate your MyDiskDesigns.biz site’s root folder. In Windows, right-click the folder and choose Properties. Note the size option (see Figure 14.3). This indicates how large the Web site is in kilobytes. 2 Divide this number by your target audience’s lowest likely connection speed in Kbps (kilobytes per second). This will tell you how many seconds it will take your Web site to download at the slowest connection.
Figure 14.3 Use the Properties dialog box to determine the size of your Web site.
Size Content To estimate how much space the site’s images will occupy, go to the site’s root folder. Select only the site’s images folder and calculate its size by using the method described in the You Try It activity.
396
Chapter 14
3 Estimate how many visitors you think will access your site in a month. For example, suppose that the MyDiskDesigns.biz site will receive approximately 100 visits a month.
4 Multiply the estimated number of visits per month (Step 3) by the site’s size (Step 1). The result is the site’s approximate transfer bandwidth. This is the minimum amount of bandwidth that a Web host should have to effectively administer your site.
WebDesignDW.glencoe.com
Internal Versus External Hosting When companies use their own Web server to host their site, they are using internal Web hosting. When companies pay someone else to host their site, they are using external Web hosting. Cost, performance, and reliability are important factors in the decision to use either internal or external hosting. Figure 14.4 explains some of the differences between the two options.
Figure 14.4 Web Hosting
Internal
Most companies that own or operate one or more Web servers use internal Web hosting. What are some advantages of external Web hosting? External
• Company has greater control over content and functionality of Web site • Better suited for hosting Web applications that access large databases or conduct financial transactions
• More cost effective than buying a Web server • Can provide more up-todate computer hardware and communications equipment • Provide benefits such as Internet and backup services
List In what three ways is bandwidth measured?
Section 14.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Consider your site’s technical needs when selecting a Web server.
1. Define publish, Web server, Web host, host, Web server clusters, internal Web hosting, external Web hosting.
3. Compare and Contrast Explain how internal Web hosting differs from external Web hosting.
• Consider costs and benefits when selecting a Web host. • Internal hosting is when a company hosts its own sites. External hosting is when a company uses a hosting service.
2. Identify five factors that an individual should consider when choosing a Web host.
4. Draw Conclusions How might a Web server that an individual buys differ from a server that a large company buys?
Apply It! Evaluate Web-Hosting Services Research two Web hosting companies. Determine their setup costs, monthly fees, and performance and reliability safeguards. Create a chart comparing the two companies.
Publishing a Web Site
397
SECTION 14.2 THE PUBLISHING PROCESS Focus on Reading Read to Find Out The main focus of this section is to explain the Web site publishing process. Read to find out how to transfer Web files to a Web server.
Main Ideas
Key Terms
Reading Strategy
HTTP and FTP are the two main protocols used to transfer Web files to a Web server. Test your published site on different hardware and in different browsers.
InterNIC case sensitive directory structure download upload File Transfer Protocol (FTP) cross-platform testing
Identify three guidelines for selecting a Web site name. Use a diagram similar to the one below (also available online). Guidelines for Choosing a Web Site Name
The process of publishing a Web site involves more than transferring Web files to a Web server. You also need to determine your site’s name and make sure that your files and folders are properly named and organized. In particular, always make sure that your graphic files are saved in the site’s images folder.
Naming a Web Site Publishing Remember that the domain name extension you choose is an important part of the Web site name. The extension tells users what type of organization uses the URL. For a list of common domain name extensions, see Chapter 3.
How do I select a name for my Web site?
Choosing your Web site’s name is an important part of the Web development process. Visitors will see your site’s name before they see any pages, so the name you choose should make a good first impression. In many cases, the Web site name is the same as the site’s URL.
Selecting a Name The name you give your site determines how easily visitors can locate and access the site. Consider the following when selecting a name: ◆ Choose a logical name. Pick a Web site name that has a logical relationship with the company, institution, product, or individual it represents. Good examples include ibm.com or ucla.edu. ◆ Keep your name short. Keep your Web site name as short as possible without losing clarity. For example, NBA.com is easier to enter into a Web browser than NationalBasketballAssociation.com. ◆ Choose a unique name. Select a name that will attract users to your site and set your site apart from similar ones.
398
Chapter 14
WebDesignDW.glencoe.com
Registering a Domain Name You can register a domain name so that no one else can use it. The Internet Corporation for Assigned Names and Numbers (ICANN) assigns Web site names and IP addresses. ICANN provides a Web site called InterNIC. This site contains information about the Web name registration process and maintains a list of domain registration services and Web hosts. Before you can register a domain name, you must first make sure that the name you want is available. As shown in Figure 14.5, you can access a database of registered names through the InterNIC site. You generally pay a small yearly fee to use domain names that you have registered.
You Should Know Newer domain names include .info, .name, .museum, and .coop.
Figure 14.5
Reviewing Page Files and Folders How can I ensure that my Web site is ready to be published?
After you have chosen a server or a Web-hosting service and have selected your site’s name, you are ready to publish your Web site. However, you need to consider some issues regarding page file and folder names before you actually transfer your site’s files to your chosen Web server.
Maintaining Web Page File Names
You can key your selected domain name into the WHOIS registration database to see if it is already registered. Why can you not use a domain name that is already registered?
When transferring files to a server, use their exact names. Many servers are case sensitive—they distinguish between file names that contain uppercase and lowercase letters and those that contain only lowercase letters. For example, suppose your home page contains an internal hyperlink to a page called OliverTwist.htm. You, however, mistakenly publish this page as olivertwist.htm. If your Web host uses a case-sensitive server, then users will receive an error message when they click on this link (see Figure 14.6 shown on page 400). This error occurs because the link target name does not exactly match the actual file name. Publishing a Web Site
399
Figure 14.6 Users may receive an error message such as this if you do not publish your Web pages exactly as they are named. What does it mean to be case sensitive?
You can easily correct case-sensitive errors if you publish a Web page incorrectly. Use either of the two following methods to correct casesensitive errors. ◆ Change the hyperlink reference in the first Web page to match the actual name of the target page. ◆ Rename the target Web page so that it matches the hyperlink reference in the first page.
Maintaining a Site’s Directory Structure Jargon The terms “directory” and “folder” are often used interchangeably. “Folder” is the preferred name on the Windows OS, and “directory” is used on most other platforms. Both terms refer to the organizational structure of the platform’s file management system.
Publishing a small Web site typically does not require great organizational skills. However, suppose you create a Web site that contains more than 30 Web pages. If you stored every Web page in its own folder, you would need a plan to organize those folders. A directory structure, sometimes called a folder structure, is a hierarchy used to organize folders and the files the folders contain.
Creating a Directory It is difficult to manage many files if they all reside in a single directory or folder. Users will experience slow download times if the server has to scan hundreds of files every time they click a hyperlink on your site. You should instead create multiple folders to contain your Web pages, and then be sure to organize these folders in a logical fashion. A Web site’s directory structure should divide Web page files into groups of approximately the same size (see Figure 14.7). For example, you can divide a group of 900 files into 30 groups of 30 folders.
Figure 14.7 To keep track of all the files that may be included in a Web site, you should set up a logical structure for the files and folders on the site. Why do you think such organization is important?
400
Chapter 14
Root Directory File File
File
File
File
File
File
File
File
File
File
Publishing a Directory When you publish your site, you must maintain its directory structure on the Web server exactly as it is on the computer used to develop the site. All of the folders must be named exactly the same on the server as on the local computer, and they must maintain the same relative position in the directory hierarchy. If you fail to do this, many of the hyperlinks on your Web site will cease to function correctly when you publish the site. When you publish a Web site with Dreamweaver, you must specify only the document root, or top-level, directory on the target Web server. Dreamweaver will create and name all other folders on the site appropriately during the transfer process, so you do not need to do this manually. Explain Why should you avoid keeping many files in a single directory?
Transferring Files to a Server How can I transfer my Web files to a Web server?
When it is time to upload your files to a server, you can choose from several transfer methods. If you are using a Web hosting service, they will tell you which transfer method you should use.
Transferring Files Using HTTP Hypertext Transfer Protocol (HTTP) is the main protocol used to download files over the Internet. The term download means to transfer data from a file server to a client (user) machine. Virtually all Web browsers use this protocol to access Web pages. However, HTTP is a two-way protocol, so it can also be used to upload, or transfer, data from a client’s computer system to a server as well.
Activity 14.2 Explore File Transfers Find out more about transferring files to a server by visiting WebDesignDW.glencoe.com.
Transferring Files Using FTP Many people use File Transfer Protocol (FTP) to publish or upload files to a Web server. To use FTP, you need the name of the designated FTP server and a valid user name and password. In the following activity, you will use Dreamweaver’s built-in FTP tool to publish your MyDiskDesigns.biz site. Your teacher will need to supply the remote Web site location, FTP address, user name, and password.
ACTIVITY 14B Publish a Web Site Using FTP Get permission from your teacher before starting this activity!
1 Open your MyDiskDesigns.biz Web site in Dreamweaver. Select Sites>Manage Sites. Select the MyDiskDesigns.biz site and click Edit. 2 In the Site Definition dialog box, click the Advanced tab. Under Category, choose Remote Info. 3 From the Access drop-down menu, select FTP. In the FTP host text box, key the FTP address supplied by your teacher. An example of an FTP address would be ftp.thissamplesite.com. WebDesignDW.glencoe.com
Publishing a Web Site
401
4 In the Host directory box, key the path on the server to the folder to which you will be publishing your site. An example of this would be \public_html\mydiskdesigns\. In the Login box, key the user name provided by your teacher. In the Password box, key a password. 5 Click the Test button to see if Dreamweaver is able to connect to the FTP address you specified. 6 Ask your teacher if you need to modify any other settings. Do NOT change any more settings without your teacher’s permission! Your dialog box should look similar to Figure 14.8. Click OK. In the Manage Sites dialog box, click Done.
Figure 14.8 You transfer files from your computer to the remote location. Test button
You Should Know A number of FTP programs are available for purchase or download on the Web for those who do not wish to use Dreamweaver’s built-in FTP program.
Figure 14.9 The FTP log helps you track your file transfers.
7 To publish your site, open the Files panel, if necessary. Click the Put File(s) button. When you see Are you sure you wish to put the entire site?, click OK. The file transfer will initiate. 8 Once the transfer is complete, open a browser to view your published Web site. To view a log of files transferred, click Window>Results. In the Results panel, click the FTP Log tab (see Figure 14.9). The log displays what files were successfully uploaded or downloaded. After viewing the log, in the Files panel, click the Disconnects from remote host button to disconnect from the remote server.
Summarize Why is HTTP a two-way protocol?
402
Chapter 14
Testing a Published Web Site Why is it important to test my site on a variety of platforms?
It is important to test a Web site after you publish it to ensure that it displays and functions properly on a variety of Web platforms. The process of testing sites on a variety of computer hardware and software configurations is known as cross-platform testing.
Testing on Various Hardware Personal computers running Microsoft Windows are currently the most common hardware/software configuration in use. However, many individuals and businesses choose to run the Linux operating system on PCs, while others prefer to run the Apple Macintosh. Many large Web hosts use highend servers manufactured by IBM, Sun, or Hewlett-Packard. These systems typically run a version of the Unix operating system: AIX, Solaris, and HP-UX, respectively.
Testing on Different Browsers
Troubleshooting Any Web developer who wishes to provide a truly cross-platform Web site should ensure that the site’s software operates consistently and correctly on all the Internet platforms listed in this section.
As you know, most Web surfers use either Microsoft Internet Explorer or Netscape Navigator to access Web sites. After you publish a site, you must test it in various browsers. Web developers use the most current HTML standards in order to achieve maximum success with different hardware, software, and browser configurations. Pages created in Dreamweaver comply with most current Web coding standards. Define What is cross-platform testing?
Section 14.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• When you publish your site, you must keep its directory structure exactly the same on the server as it was on the computer used to develop the site.
1. Define InterNIC, case sensitive, directory structure, download, upload, File Transfer Protocol (FTP), cross-platform testing.
4. Draw Conclusions Why is it important to register a domain name?
• HTTP is the most common protocol used to download files. • FTP is the most common protocol used to upload files to a Web server.
2. Explain the importance of developing a logical directory structure for a large Web site. 3. Summarize how HTTP and FTP are similar and different.
5. Compare and Contrast How are the guidelines for choosing a Web site name similar to and different from the guidelines for choosing a Web page name?
Apply It! Create a Directory Structure A music store asks you to create a site that describes and organizes their CDs by genre (Pop/Rock, Classical, Country). Artists are arranged alphabetically within each genre. Create a directory structure that mirrors this organization.
Publishing a Web Site
403
How We Use the Web
F
or many people, the Internet has become the place to go in order to accomplish a wide variety of tasks. Besides providing access to amazing amounts of information, the Internet offers a range of services that has changed the way the world operates.
Online Services Here are just a few of the services provided online: ◆
Job Hunting Many job hunters use online career services to find a job.
◆
Banking Most banks offer online services that allow customers to manage their accounts, pay bills online, and apply for loans.
◆
Real Estate House hunters can find a realtor on the Web and compare interest rates through online mortgage brokers.
Some Web sites offer free publications and news and media updates.
You can find information about many online services at the Federal Citizen Information Center’s Web site.
◆
Insurance Most major insurance companies can give online quotes for car, home, or life insurance policies.
◆
Taxes Taxpayers can fill out and file their tax forms online through the Internal Revenue Service (IRS) site. Companies such as H&R Block offer online tax preparation services.
The Future of the Web As new technologies emerge, new possibilities open up for online services: ◆
Communications In a few years, people may routinely use the Internet for telephone calls and wireless PDAs for live, real-time videoconferences.
◆
Health Care Surgeons will be able to use virtual reality systems and cameras to control surgical robots and perform surgeries remotely.
1. Compare Web Sites Use the Internet to locate a bank with online services. What services does it offer? Create a two-column table that compares the personal and business services available on the site. 404
Chapter 14
2. Make Predictions Research developments in one area of Internet services. What will it be like in five, ten, or twenty years? Write an essay predicting whether the developments will have positive or negative consequences.
SECTION 14.3 RESULTS AND SITE REPORTS IN DREAMWEAVER Focus on Reading Read to Find Out This section explains how to use maintenance tools to validate HTML and check for target browsers, broken links, and orphaned files. Read to find out how reports can help you maintain an efficient and effective Web site.
Main Ideas
Key Terms
Reading Strategy
Dreamweaver’s site reports are used for effective and efficient site maintenance. Dreamweaver has features to validate HTML, check against browser requirements, and to check links.
Describe three reports that you can run to check your Dreamweaver site. Use a table like the one below (also available online). Report
Reports are useful tools that help you to spot errors or make maintenance easier. Web developers use reports and validations to be sure their Web sites are ready to run smoothly before being published.
Function
Figure 14.10 Dreamweaver allows you to run workflow reports. How can a report showing workflow information be helpful to a Web developer?
Site Reports What types of reports are available in Dreamweaver?
Dreamweaver allows you to generate a variety of reports that can help you monitor the condition of files, folders, and entire Web sites. To access the Dreamweaver reports, choose Site>Reports. The Reports dialog box allows you to select Workflow or HTML reports (see Figure 14.10). Use the Workflow reports to track a Web site’s files when several people are working on the same project. Use the HTML reports to spot code errors such as missing alternative text and empty tags. Note that some of these reports cannot be generated until the Web site is published and transferred to a Web server.
Identify What two main types of reports are available in the Reports dialog box? WebDesignDW.glencoe.com
Publishing a Web Site
405
Running Reports in a Web Site How can I use reports to ensure that my Web site is running smoothly?
A variety of reports are also available in the Dreamweaver Results panel. You can use these reports to validate a site’s code, to check for broken hyperlinks, and to confirm that your site will display correctly in your target audience’s Web browsers.
Validation The Validation report in Dreamweaver checks a site’s files to ensure they meet the established W3C (World Wide Web Consortium) standards (see Chapter 4 for an overview of these standards). You can validate documents written in HTML, XHTML, Synchronized Multimedia Integration Language (SMIL), and Wireless Markup Language (WML). In the following activity, you will validate the MyDiskDesigns.biz site against the HTML 4.0 standards.
ACTIVITY 14C Validate a Web Site 1 In your MyDiskDesigns.biz site, select Window>Results (or press F7) to open the Results panel. You Should Know The name of the green arrow in the Results panel changes to match the tab you currently have selected. For example, when the Validation tab is open, the green arrow is called the Validate button.
Figure 14.11 The validation report shows that the MyDiskDesigns.biz site does not have any errors.
Validate button
406
Chapter 14
2 In the Results panel, click the Validation tab. On the panel’s left side, click the Validate button and select Settings. 3 In the Preferences dialog box, under If no DOCTYPE is detected, validate against:, click the HTML 4.0 option. Uncheck any other options that might be checked. Click OK. 4 Click the Validate button again. Select Validate Entire Site. Any validation errors will appear in the Results panel (see Figure 14.11). The File column displays the file where the problem exists. The Line column displays the HTML code line where the problem occurs. The Description column displays information about the problem.
5 Double-click an item in the Results panel. The selected file opens. If there are any errors, they will be highlighted in the page’s HTML code (see Figure 14.12). Correct any errors you find in the Web site.
Figure 14.12 Double-click an error to view the selected code.
Shortcut You can also use the Link Checker report by opening the Results panel, clicking the green arrow in the panel and choosing a report to run from the list of options.
6 With your teacher’s permission, in the Results panel, click Save Report. Ask your teacher where to save the report.
Link Checker Updating hyperlinks is an essential part of Web site maintenance. The Link Checker report identifies broken links in your site or within a particular file. Only broken links will show up in the report. You can also use the report to check your site’s external links. The Link Checker also identifies orphaned files. An orphaned file is a file that does not link to other files in the site. For example, if you replace one image with another image but keep the original image’s file in your site, that file is an orphaned file.
ACTIVITY 14D Check for Broken Links 1 In your MyDiskDesigns.biz Web site, choose Site>Check Links Sitewide (or press Ctrl + F8). 2 In the Results panel, the bottom of the Link Checker tab displays the results of the link check (see Figure 14.13).
Figure 14.13 The Link Checker report shows that the MyDiskDesigns.biz site does not have any broken links.
Publishing a Web Site
407
3 The status bar displays the number of links in the site, the number of HTML files checked, and the number of orphaned links. It also displays how many of those links are OK, Broken, or External. Near the top of the Results panel, click the Show drop-down arrow and select External Links. The site’s external links are displayed (see Figure 14.14). Double-click a link to go to that link in the site.
Figure 14.14 Use the Link Checker report to check your site’s external links.
Troubleshooting You should periodically check for and delete unnecessary orphaned files to keep your site’s overall size down.
4 With your teacher’s permission, in the Results panel, click Save Report. Ask your teacher where and how to save your report.
Target Browser Check It can be difficult to create pages that work effectively in all the different Web browsers currently available. Dreamweaver provides a Target Browser Check that allows you to specify which types and versions of browsers you want to check your site against. In the next activity, you will check the MyDiskDesigns.biz site against some common browsers.
ACTIVITY 14E Perform a Target Browser Check 1 In your MyDiskDesigns.biz site, open the Results panel, if necessary. Click the Target Browser Check tab. In the panel, click the Check Target Browsers button and select Settings. 2 In the Target Browsers dialog box, under Minimum browser versions, select Microsoft Internet Explorer and set the browser version to 6.0. Select Mozilla, version 1.0. Select Netscape Navigator, version 7.0. Your dialog box should look like Figure 14.15. Click OK.
Figure 14.15 Use the Target Browsers dialog box to select different types and versions of Web browsers.
408
Chapter 14
3 In the Results panel, click the Check Target Browsers button again. Choose Check Target Browsers for Entire Site. 4 Any target browser errors will appear in the Results panel (See Figure 14.16). The panel again displays the File and Line where the error appears, and a Description of the error. Double-click an item to display the file that contains the problem. The item in question will be highlighted. If possible, correct any identified errors.
Figure 14.16 The Target Browser Check report shows that the MyDiskDesigns.biz site should have no problems when viewed in the selected browsers.
If there are any HTML tags the Target Browser Check should avoid, you can specify these by clicking the green arrow and selecting Edit Ignored Error List. A file called Exceptions.xml will open to which you can add any tags you do not want to have checked. Ask your teacher for permission before editing this file. Summarize A Link Checker report provides what types of information about a site’s links?
Section 14.3 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Dreamweaver provides reports to help you locate errors.
3. Draw Conclusions Why should you do a Target Browser Check?
• Validation reports ensure your site meets the W3C standards.
2. Explain how reports can help you maintain a more efficient and effective Web site.
• The Link Checker report displays information about internal and external links and orphaned files. • Use the Target Browser Check to check your site against different browsers.
4. Compare and Contrast How are a Target Browser Check and a Link Checker report similar and different from each other?
Apply It! Check Links Your favorite radio station has asked you to help them determine why their Web site has reached its maximum file size. Explain orphaned files to the radio station owners. Then describe how to locate orphaned files in Dreamweaver.
Publishing a Web Site
409
SECTION 14.4 PROMOTING A WEB SITE Focus on Reading Read to Find Out The main purpose of this section is to learn how to publicize your Web site. Pay close attention to how meta tags are used to influence how a search tool categorizes a Web page.
Main Ideas
Key Terms
Reading Strategy
A published Web site serves little purpose if few people know about it. You can use different methods to promote your Web site.
publicize spam link trading meta tag
Summarize the pros and cons of various Web site publicizing methods. Use a table like the one below (also available online). Publicizing Method
Pros
Cons
Once you have published your site to a Web server, you need to publicize that site. Publicizing a site involves letting the general public know about your site and how to access it.
Publicizing Web Pages How can I publicize my Web site?
You can publicize your Web site through a variety of methods. Each technique has advantages and disadvantages.
Advertising a Site People need to know that a site exists before they can use it. E-mail, print media, and link trading are often used to let people know that a site exists.
E-Mail Advertising Some Web site publishers use e-mail messages to promote their sites or sell products or services. Many publishers also include a hyperlink embedded in the e-mail’s body to launch the site. This approach can be cost effective since many Internet accounts allow users to send an unlimited number of e-mail messages for no additional cost. However, many ISPs use message filtering technologies to eliminate unsolicited e-mail messages, commonly known as spam, from their users’ e-mail boxes. Some ISPs have even adopted no-spam policies, and they will terminate the accounts of users who violate these rules. In addition, some legislators are drafting laws that would fine the senders of spam. Print Advertising Some Web site publishers send printed ads through regular mail to promote their site. A print ad can reach individuals who do not use e-mail services. However, it costs money to print and mail advertisements and to obtain mailing lists. A printed ad also lacks the immediacy of an e-mail promotion since recipients cannot click a hyperlink to visit the Web site. 410
Chapter 14
WebDesignDW.glencoe.com
Link Trading Web sites that share common goals may agree to display a link to each other’s site, an arrangement referred to as link trading. Trading links can increase a Web site’s traffic and attract new visitors who are interested in the site’s subject matter. It also costs very little to trade links.
Registering with Search Tools Perhaps the most effective way to publicize a Web site is to register it with an Internet search engine or directory service. Registering your site exposes it to millions of Internet users who frequently use search tools to locate products, services, or information on the Web. There are two main disadvantages to registering a site with a search tool:
You Should Know While link trading is cost effective, it does not always make sense. For example, a company will not want to link its Web site to a competitor’s Web site.
◆ Users generally receive many hits when making a search request. Depending on the number of hits received, users may or may not visit your site. ◆ Search engines process so many registration requests that it often takes several days or weeks to include a site in their database. Even with these drawbacks, however, registering a site is an important way to publicize it. In the following activity, you will learn how to register a Web site with a search engine.
ACTIVITY 14F Register a Site with a Search Engine 1 With your teacher’s permission, open your Web browser. Go to a search engine such as AltaVista, Google, or Dogpile. 2 Locate the engine’s site submission page. For example, on Dogpile, select Submit Your Site. 3 To register your Web site, you would key the site’s URL into the engine’s form and then submit it (see Figure 14.17). Note: Do not enter a URL at this time. Close the submission page.
Figure 14.17 You can help attract visitors to your Web site by registering it with a search engine.
Publishing a Web Site
411
Using Meta Tags You Should Know You can see meta tags by viewing a page’s source code. Select View and then Source (or Page Source) from your browser to open a page’s source code in Notepad (meta tags are located near the top of the HTML document).
Description tag
Keywords tag
A meta tag is a piece of HTML code that the Web author places in a page’s file. Meta tags do not affect how the page displays in a Web browser. Instead, they influence how a search tool categorizes the page. Meta tags provide information about the Web site. The “description” meta tag describes the site’s purpose. This description usually displays in a search tool’s search results. The “keywords” meta tag contains words or phrases that describe the site’s content. Search engines use these keywords to create their databases. Adding the right meta tags to your Web pages can improve how your site displays on a search tool’s hit list. The description and keywords meta tags for the Smithsonian Institution are shown below. <meta name=“description” content=“America’s national educational facility with 16 museums, 9 research centers and 120 affiliates around the world.”> <meta name=“keywords” content=“Smithsonian, Smithsonian Institution, education, educational institution, learning, museum, museums, study, research, fieldwork, United States, USA, America, America institution”>
ACTIVITY 14G Add Meta Tags to a Web Site 1 Open your MyDiskDesigns.biz home page (index.html) in Dreamweaver. Select View>Head Content. On the Head Content toolbar, click the Description button.
Figure 14.18 Use the Head Content toolbar to enter meta tags into your Web site.
Head Content toolbar Keywords Description
Description text box
2 The Properties inspector changes views to display a Description text box (see Figure 14.18). 412
Chapter 14
3 Key a description of the products and services that the MyDiskDesigns.biz site will offer into the box. Press Tab to insert the information into the page. On the toolbar, click the Keywords button. Enter the keywords for the site in the text box. Press Tab to insert the information. 4 View the page in Code view. The meta tags have been added to the site’s source code. Save and close the site. Close Dreamweaver.
Shortcut Press Ctrl + ` to change views.
Explain What information does the description meta tag provide about a Web site?
Increasing Web Site Traffic How do Web site publishers expand their user base?
Once a site has established an initial base of visitors, most Web site publishers will want to expand that base over time. Some techniques for increasing Web site traffic include: ◆ Offer periodic sales and promotions. E-commerce sites often use sales to attract repeat customers. Many sites also offer other types of promotions, such as gift certificates, referral bonuses or discounts, or free shipping (see Figure 14.19). ◆ Give away prizes. Some Web publishers sponsor drawings in which Web surfers can win a prize just by visiting the site. ◆ Offer recognition. To some people, the opportunity to win recognition is almost irresistible. For this reason, many Web sites solicit information, suggestions, and articles from their user base, and then publish the names of the contributors.
Figure 14.19 Periodic sales help attract visitors to Dell’s Web site. How do you think limited time offers help an e-commerce site increase its sales?
Identify List three types of promotions that Web sites often use to increase Web traffic. Publishing a Web Site
413
Figure 14.20 Privacy settings can be adjusted to control cookies. How are cookies useful? How might they be harmful?
Using Cookies for Targeted Marketing How can I learn more about my target audience?
Advertising is most effective when it is aimed at a highly focused target audience. Many Web publishers use cookies to gather information about their target audience. A cookie is a small file stored on the user’s computer that contains specific information about the user. Cookies often contain information regarding what sites the user has visited, the products the user has purchased, how much time and money the user has spent online, and the user’s credit card or checking account information. Businesses use cookies to target users that they think will want to know about a particular promotion or product. However, dishonest people can also use cookies to invade a user’s privacy, or they could even use personal information illegally. For this reason, all Web browsers give users the ability to prevent certain types of cookies from being stored on their computer (as shown in Figure 14.20).
Define What is a cookie?
Section 14.4 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Techniques for publicizing Web pages include e-mail, printed ads, link trading, and registering with search tools.
1. Define publicize, spam, link trading, meta tag.
4. Draw Conclusions Why do you suppose Web sites depend so heavily on repeat visitors?
• Some search engines use meta tag information to associate a site with a particular topic. • Businesses often use cookie information to target potential customers.
414
Chapter 14
2. Describe the methods commonly used to publicize Web sites. 3. Explain what a cookie is and what it contains.
5. Compare and Contrast What similarities and differences do you see in promoting a Web site via e-mail and promoting it with printed media?
Apply It! Promote a Web Site Write a proposal for publicizing an e-commerce Web site that sells extreme sports gear. First, define the objective of the site. Then determine the most effective ways to market the site.
CHAPTER 14
Reading Review
SECTION 14.1 Web Servers Key Terms publish, 394 Web server, 394 Web host, 395 host, 395
Web server clusters, 396 internal Web hosting, 397 external Web hosting, 397
SECTION 14.3 Results and Site Reports in Dreamweaver Key Terms reports, 405 Validation report, 406 Link Checker report, 407
orphaned file, 407 Target Browser Check, 408
Main Ideas
Main Ideas
■ Consider your site’s technical needs when selecting
■ Dreamweaver provides reports to help you locate
a Web server. ■ Consider costs and benefits when selecting a Web host. ■ Internal hosting is when a company hosts its own sites. External hosting is when a company uses a hosting service.
■ ■ ■ ■
SECTION 14.2 The Publishing Process
errors. Validation reports ensure your site meets the W3C standards. The Link Checker report displays information about internal and external links and orphaned files. An orphaned file is a file without any links to other files in the site. Use the Target Browser Check to check your site against different browsers.
SECTION 14.4 Promoting a Web Site Key Terms publicize, 410 spam, 410
Main Ideas ■ Techniques for publicizing Web pages include e-mail,
■ Web site names should be as unique, logical, and ■
■ ■ ■
short as possible. When you publish your site, you must keep its directory structure exactly the same on the server as it was on the computer used to develop the site. HTTP is the most common protocol used to download files. FTP is the most common protocol used to upload files to a Web server. You should test your published site on a variety of hardware configurations and browsers to make sure that it displays properly.
link trading, 411 meta tag, 412
■
■ ■
■
printed ads, link trading, and registering with search tools. Meta tags provide additional information about the Web page, including keywords indicating the site’s purpose and content. Some search engines use meta tag information to associate a site with a particular topic. Sites can increase traffic by offering sales and promotions, giving away prizes, or offering recognition. Businesses often use cookie information to target potential customers.
Publishing a Web Site
415
CHAPTER 14
Review and Assessment
AFTER YOU READ
16. Explain how to register a domain name. Step
➠ ➠
Create an Outline Use the headings in this chapter to create an outline. Use red headings as Level 1 main ideas. Blue headings are Level 2. Use the information under the blue headings to fill in Level 3 and Level 4 details. Keywords and green headings might also be included as supporting details.
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
Step
Reviewing Key Terms 1. What is a Web server? 2. What is the difference between internal Web hosting and external Web hosting? 3. Change the following sentence to make it true: When you download files, you transfer them from a client computer system to a server. 4. What is InterNIC? 5. What is the most common protocol for downloading files? 6. Why is cross-platform testing important? 7. List three reports that you can run in Dreamweaver. 8. What is spam?
Understanding Main Ideas 9. Explain why a Web site must be published before visitors can view the site in their browsers. 10. Summarize five factors that affect a Web server’s efficiency. 11. Discuss the reasons that a site’s directory structure should be well organized. 12. Summarize the importance of case sensitivity when transferring Web page files to a server. 13. Identify five methods that can be used to publicize and promote a new Web page. 14. Evaluate the advantages and disadvantages of e-mail advertising. 15. Describe three ways to increase traffic to a Web site. 416
Chapter 14
Step
17. Identify five factors you need to consider when selecting a Web host.
Web host
Critical Thinking 18. Analyze Imagine you are helping a small company choose an external Web host. What factors would you tell the company to consider when making its choice? Why would the level of technical support provided by the Web host be a factor in determining which Web host to use? 19. Compare and Contrast Scalability and reliability are two important factors in a Web server’s efficiency. Distinguish between these two factors and create a table showing their characteristics. Scalability
Reliability
CHAPTER 14
Review and Assessment
20. Draw Conclusions You are responsible for publishing a Web site that has several hundred pages organized into about twenty folders. How would a log of publishing events be useful to you? 21. Evaluate You are in charge of marketing for a small Web site and you want to expand the site’s user base. Do you promote the use of cookie information, spam, or link trading as a first choice? Use a pyramid chart to put your preferences in a hierarchy, and explain your rationale.
Tables Read the paragraph and chart below and then answer the question.
Companies who provide their own Web server are using internal Web hosting. Companies who pay someone else to host their site are using external Web hosting. Internal Hosting Advantages • Company has greater control over content and functionality of Web site • Better suited for hosting Web applications that access large databases or conduct financial transactions
Choice 1
External Hosting Advantages • More cost effective than buying a Web server • Can provide more up-to-date computer hardware and equipment
Choice 2
According to the table, which of the following statements is true?
Choice 3
It is more cost effective to buy a Web server.
22. Analyze Your Web site is getting fewer hits now than it did when it was first published. What might be some reasons for this decline and how might you help your site receive more hits?
Companies who own Web servers have greater control over their Web sites. Companies who buy their own server have more up-to-date computer equipment. Companies who conduct a lot of financial transactions find it is better to pay someone to host their site.
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items.
WebDesignDW.glencoe.com
On your own paper, copy and complete the chart shown below.
Study with PowerTeach
Result
23. 24.
+
Result
25.
+
Result
WebDesignDW.glencoe.com
Go to the book Web site shown above. To review the main points in this chapter, select e-Review>PowerTeach Outlines>Chapter 14.
Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 14. Publishing a Web Site
417
CHAPTER 14
Activities
1. MAKING CONNECTIONS Language Arts—Conduct a Debate Conduct a classroom debate on the following topic: Cookies should not be allowed because using cookies to collect information is an invasion of a user’s privacy. With your teacher’s permission, organize into two teams. One team will argue for the use of cookies, while the other will argue against the use of cookies. Research the issues involved and be prepared to argue your assigned point of view. As part of your research, review privacy policies at two different Web sites that you frequent. Are cookies mentioned? Does the information support your side? Identify three examples that you can use to support your argument. Use a main idea chart like the one shown below to help organize your evidence. Cookies
➠
➠
➠
Supporting Evidence
Supporting Evidence
Supporting Evidence
2. STANDARDS AT WORK Students use productivity tools to collaborate in constructing technology-enhanced models, prepare publications, and produce other creative works. (NETS-S 3)
Create a Web Page with Meta Tags Create a one-page Web page in Dreamweaver. This page is targeted at families in your community who have children under the age of five. The purpose of the page is to provide an overview of services available to these young children and their families. These services could include health care centers, preschools, day care centers, and local parks, recreation areas, and businesses that cater to children. List four services or businesses on your page. To keep the amount of text on the page to a minimum, you decide: ◆ To include a one-sentence description for each service or business ◆ To provide a link to the Web site for each service or business You want to provide the right meta tags to improve how your community service site displays on a search tools hit list. Consider what meta tags you need to include to make this happen. Add these meta tags to your page. 418
Chapter 14
CHAPTER 14
Activities
3. TEAMWORK SKILLS Publicize a Web Site Your team is creating a Web site for a business that offers classes in English as a second language. Your intended audience is recent immigrants to the United States who have limited English skills. 1. Select a name for the business. 2. Select a domain name for the Web site. 3. Explain why this is a good domain name for your site. 4. Research the domain name to see if it is available. If it is not available, select another domain name. 5. Write an advertising plan that describes how you will let people know about the site. Identify and describe at least three ways to advertise the site. 6. List your three choices. Place the method that you think would be most effective at the top of your list. Explain why you think this method would be an effective way to advertise your site. Create a matrix like the one below showing your choices, reasons, and results.
Method
POSSIBLE ADVERTISING PLANS Reason
Results
1. 2. 3.
4. CHALLENGE YOURSELF Recommend a “Pay-per-click Service” You are helping a local bed and breakfast launch their Web site. The owners are interested in the “pay-per-click” service available from some search engines. With this service, a search engine will list your site as a link, a banner, or at the top of the search list for a small fee. Charges are based on the number of people who actually click on your URL. Research the “pay-per-click” services available from three search engines. Locate their pricing structures and other important information about their programs. Based on your research, create a chart that compares pricing structures. Write a paragraph recommending one of the services. State the reasons for your choice. Publishing a Web Site
419
CHAPTER 14
Projects
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Calculate Web Site Size
You are ready to publish the Language Club Web site. In this activity, you will calculate the size of the Web site and estimate the minimum amount of bandwidth that a Web host will need to host your site. Locate your Language Club site’s root folder. Open the folder’s Properties dialog box and write down the Web site’s size. Estimate the number of visitors you expect to access your site in a month. Assume that 15 percent of the students in your school will visit the site each month. In addition, you expect about 50 people outside the school to access the site monthly. Calculate the site’s approximate transfer bandwidth by multiplying the estimated number of visitors per month by the Web site’s size.
2. Add Meta Tags and Publish a Site
Select a site you have created in this course, but have not yet published. Add meta tags to the source code and publish the site. Find at least two sites on the Web covering the same topic as your site. View the source code for these sites. Identify any meta tags used by these sites. Based on your research of other sites, as well as your own ideas, create a list of meta tags for your site. Use a table like the one shown here to organize your meta tags. Open the site you want to publish in Dreamweaver. Add your meta tags to your site. Publish your site using the instructions your teacher supplies. Be sure to ask for your teacher’s permission before publishing the site! View the site in a browser. View the site’s source code to check the meta tags you created. DESCRIPTION
420
Chapter 14
KEYWORDS
CHAPTER 14
Projects
Read the projects described below. Then follow the directions to complete each project.
1. Organize Web Site Structure The Tools for Home and Business Company wants to offer its products online. Use Dreamweaver to create the Tools for Home and Business Web site. Use placeholder text for graphics. Use a diagram like the one shown here to organize the site’s files. Then use that information to create the directory structure in Dreamweaver. Select a consistent naming structure and use lowercase for all file and folder names. If you were to choose a Web host that required case sensitive file names, how would using all lowercase make a difference? ◆ The home page should contain a company overview and a table of contents with links to all the site’s pages. ◆ The Tools for Home page should include information and photos about small power tools, gardening tools, plumbing tools, and first aid kits. ◆ The Tools for Business page should include information and photos about large tools such as table saws, electric sanders, and routers. ◆ Add an order form that allows customers to place an order and e-mail it to the business. Home Page
Contact Us
About Us
FAQ
Tools for Home
Products
Tools for Business
Order Form
Products
Order Form
2. Publish a Site With your teacher’s permission, upload the Tools for Home and Business Company site to a server. ◆ Run reports to test the site before you publish it. Check for code validation and broken links. Also run a Target Browser Check using different browsers. ◆ Add meta tags to your site. ◆ With your teacher’s permission, publish the site and test the site in two browsers to make sure that the site structure has transferred properly. If possible, test the site on different hardware configurations.
Publishing a Web Site
421
CHAPTER
15
Maintaining a Web Site
YOU WILL LEARN TO… Section 15.1 Identify Webmastering tasks Identify Web server maintenance techniques Describe the importance of backups Section 15.2 Identify guidelines for updating a site Explain the purpose of archiving a Web site Edit and update a Web page Section 15.3 Identify Web site access controls Create a login screen
WHY IT MATTERS ................................................. Most people would welcome the opportunity to live in a beautiful home. Even the grandest house, however, loses its appeal if the roof leaks or the walls are falling down. Most objects require maintenance to keep them attractive and useful. Web sites are no exception. You must repair and update your sites on a regular basis if you want your visitors to return. Think about the Web sites you have created. What items on these sites might need maintenance? What would happen if you failed to maintain these items? What impact could this have on people who visit your site? How does maintenance make a Web site more useful or attractive to visitors?
422
Chapter 15
CHAPTER
15
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 15.1 Choose a Data Backup Utility.... 427 15.2 Plan Updates to a Site ............... 432 15.3 Analyze Security......................... 436 You Try It Activities 15A Research Webmaster Jobs ....... 427 15B Download and Upload Files from a Remote Server ............... 430 15C Create a Login Screen ............... 434 Chapter Assessment Making Connections ............................ Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................
440 440 441 441
You Try It Skills Studio Update a Web Site ............................... 442 Create a Job Description .................... 442 Web Design Projects Document a Procedure ....................... Plan and Develop a Web Site .............. Develop a Commercial Web Site ........ Create an Online Portfolio ..................
443 443 444 445
IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects
ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Two-Column Notes Two-column notes are a useful way to organize and study what you have read. Divide a piece of paper into two columns. In the left column, write down main ideas. They can be written as a word, phrase, or question. In the right column, write down supporting details. Use short phrases rather than sentences. For example, a main idea could be types of monitors, and the details could be: 1) CRT (cathode ray tubes) are less expensive. Take lots of power and space. 2) Flat screens use LCD (liquid crystal display). Images may not be as clear as CRT.
WebDesignDW.glencoe.com
Maintaining a Web Site
423
SECTION 15.1 WEB SERVER MAINTENANCE Focus on Reading Read to Find Out This section focuses on Web server maintenance. Read to find out how to back up critical system data.
Main Ideas
Key Terms
Reading Strategy
A Webmaster’s primary responsibility is Web server maintenance. Maintenance includes diagnosing and repairing a server’s hardware and software, and backing up critical system data.
hot-swappable hard drives hard drive mirroring backup incremental backup
Identify three important tasks required to maintain a Web server. Use a table like the one below (also available online). Maintenance Task
Purpose of Task
Web server maintenance involves several kinds of tasks. Webmasters must monitor both the Web server’s hardware and its software to make sure that they are working correctly. In addition, Webmasters must back up Web server data to preserve the data in case of a malfunction. Activity 15.1 Explore Web Server Maintenance Find out more about maintaining a Web server by visiting WebDesignDW.glencoe.com.
Maintaining a Web Server How does a Webmaster monitor a server’s hardware and software?
The Webmaster is responsible for ensuring the uninterrupted operation of the company’s Web servers. Although some Webmasters develop and publish Web sites, most primarily focus on making sure the servers can properly upload, download, store, and back up Web site files.
Uploading and Downloading Capabilities A Web server’s primary function is to upload and download Web site files. The server’s ability to do this depends on two basic components.
Communication Hardware The first component is the communication lines and equipment that allow the server to “talk” to the outside world. This equipment includes hardware such as network adapters, routers, load balancers, and firewalls. The Webmaster must diagnose and repair this hardware should it fail. However, individual Webmasters or businesses have little or no control over other types of communication failures. Large telecommunications companies, such as AT&T, Verizon, BellSouth, SBC, and Sprint, own and operate most transmission lines (see Figure 15.1 on page 425). If these channels fail, the Web site host will not be able to fix the problem. For this reason, some Web hosts lease high-speed data lines from two or more telecommunications vendors so that they can still service customers if one network goes down. 424
Chapter 15
WebDesignDW.glencoe.com
Figure 15.1 Telecommunications companies customize services for businesses and individuals. What type of customer would be most likely to use high-speed data lines?
Communication Software The second component that determines a server’s ability to upload and download files is the protocol software that controls the flow of data across the communication lines. The HTTP and FTP software that a Web server uses to transfer data may crash or malfunction as the result of a program bug or a power failure. The Webmaster must quickly address any software glitch that causes the server to stop responding to requests. In some cases, the Webmaster can stop and restart the offending server without affecting other programs. However, sometimes the Webmaster may have to reboot the entire server to recover from such an error.
Storage Capabilities
You Should Know Web servers use ports to connect to the Internet. The Web server that connects to the World Wide Web is typically port 80 and the FTP server is typically port 21. Clients connect to services at a specific IP address and port.
Web hosting services that allow their users to upload files must prepare for the possibility that their storage space will fill up. Once this happens, the Web server itself may crash because the operating system can no longer create files. To prevent problems, a Webmaster must delete unused or outdated files when possible, or upgrade the server’s storage capacity before problems occur. Webmasters use different techniques for maintaining a Web server’s storage devices. Some Web servers use a system of between two and six hot-swappable hard drives to store information. Each drive has a small indicator that glows green when the drive is operating correctly and red when it fails. If a failure occurs, the Webmaster can easily remove the damaged drive from the server and replace it without having to turn off the server. Some Web servers use a technique called hard drive mirroring to maintain storage. With this option, data written to a primary drive are automatically written onto one or more secondary drives in a parallel operation. If the primary drive fails, a secondary drive takes over. This switch occurs automatically, without requiring any manual intervention, so the Web server remains fully functional. Maintaining a Web Site
425
Table 15.1
Storage Option Pros and Cons
Web server storage maintenance options vary significantly in complexity and cost. Which storage option would a small business probably choose to maintain its server’s storage?
Storage Option
Pro(s)
Con(s)
Hot Swappable Hard-Drive
Damaged drives can be replaced quickly without having to power down the server.
Substantially more expensive than standard hard drives.
Hard Drive Mirroring
No down time (the computer works without interruption). Inexpensive to replace drives in system.
Speed at which data are stored may not be as fast as other storage options.
As shown in Table 15.1, each storage option has pros and cons. The Webmaster must assess the company’s needs when deciding which option to choose.
Backing Up Data The loss of critical information can potentially drive a company out of business. For example, an e-commerce business that loses its customer information database will not be able to fulfill orders and will lose money. Webmasters protect the company’s valuable information by making backups. A backup is a copy of a specific set of data. Webmasters can store backups on: ◆ Tapes ◆ CD-ROMs ◆ Hard drives ◆ Floppy disks Some backup systems can transmit data over the Internet to a remote location, thereby protecting the data from any disaster that might occur at the source location. Sometimes the backup is an exact copy of the original data. Other times, the files are compressed so that they occupy less disk space on the backup device. Nearly all backup devices give users the option of doing a complete system backup or an incremental backup. An incremental backup only stores data on the backup device that have changed since the last full backup was performed. When evaluating various backup solutions, Webmasters must consider factors such as performance, convenience, and cost. Many Webmasters will choose a simple, low-cost backup strategy, while others will opt for extra performance and extra data protection at a higher cost. Explain Why must a Webmaster regularly delete a site’s unused or outdated files?
426
Chapter 15
The Role of the Webmaster What skills do I need to become a Webmaster?
A Webmaster’s primary role is to maintain a Web site. In the next activity, you will examine the skills required to become a Webmaster.
Figure 15.2 The America’s Job Bank site provides information about the job market and the skills needed for a specific career.
Section 15.1 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• The Webmaster maintains the uninterrupted operation of the company’s Web servers.
1. Define hot-swappable hard drives, hard drive mirroring, backup, incremental backup.
4. Compare and Contrast Explain the similarities and differences between a complete backup and an incremental backup.
• Webmasters protect the company’s data by making backups. • A Webmaster’s primary role is to maintain a Web site.
2. Summarize the important aspects of maintaining a Web server. 3. Identify various strategies for data storage maintenance.
5. Draw Conclusions What can you conclude about the value a skilled Webmaster brings to a large company?
Apply It! Choose a Data Backup Utility Use the Web to locate information on three backup utilities. Determine the features and cost of each one. Then, recommend the one that you believe provides the best overall value.
Maintaining a Web Site
427
Privacy Issues and the Internet
W
hen you voluntarily give out personal information over the Internet, you may unknowingly let someone track your online activities.
Site Registration Many Web sites ask visitors to register in order to purchase from an online store, enter a sweepstakes, or join a chat room. While many Web sites use this information to improve services, some sites sell or share users’ personal information. To avoid this problem, check the site’s privacy statement to see how it will handle your information.
Cookies and Web Bugs Cookies are text files that a Web site can Some operating systems provide tools for blocking place on your computer. A Web bug is a cookies. GIF-format file used to gather information from your system. Web bugs are harder to track than cookies. For example, you can easily find a collection of cookies on your hard drive. To find Web bugs, you need to view a Web page’s underlying code.
Taking Precautions Here are some other steps you can take to guard your privacy online: ◆
To avoid spam, some users get a second address (such as a free Web-based e-mail account) to access sites that require registration.
◆
You are not anonymous in newsgroups and chat rooms! If you post a message, a user can track you by your IP address, so be careful what you post.
◆
Use a cookie management program with Web bug controls to keep Web bugs off your system and reject the cookies you do not want.
1. Make Recommendations Research a potential problem between employees and employers regarding individual privacy and the Internet. What measures can users or organizations take to overcome this problem? Share your findings with the class. 428
Chapter 15
2. Analyze an Issue Using the Internet can give you access to information about a variety of topics. It can also give others access to information about you. Is it worth giving up your privacy for the convenience of using the Internet? Write an essay that analyzes this conflict.
SECTION 15.2 UPDATING INFORMATION Focus on Reading Read to Find Out It is important to update the information on a Web site to fix errors and keep the site useful to visitors. Read to find out how to update and archive Web pages.
Main Ideas
Key Terms
Reading Strategy
Published Web sites require regular updating. Webmasters often archive rather than discard the elements they remove. Preparing technical documentation is an important part of Web site maintenance.
file management direct server update local client update archiving
Compare and contrast direct server updates and local client updates. Use a Venn diagram similar to the one below (also available online). Direct Server
Local Client
Webmasters are responsible for updating information on the site and fixing errors. As the Webmaster of the sites you create, you should plan to update your sites regularly.
Figure 15.3
Guidelines for Updating a Site What factors should I consider when updating my site?
Some sites require constant updating to remain useful. Companies must update their sites to display new merchandise and offers (see Figure 15.3). When updating a site, consider the following guidelines:
Merchandise displays on e-commerce sites change frequently. What other types of sites should be updated frequently?
Explain Why do some sites require constant updating to remain useful? WebDesignDW.glencoe.com
Maintaining a Web Site
429
Managing and Archiving Web Files How can file management help me maintain my site? Caution If you update a live site, viewers may see your half-completed changes as you work on the page. You should only update a live site if you need to make an emergency fix, such as correcting important information or replacing broken links.
You Should Know When you switch from Local to Remote view, the folders in the Files panel change colors. This can help you know what view you are currently seeing in Dreamweaver.
A comprehensive Web site maintenance plan should include a strategy for file management. File management refers to creating, naming, moving, updating, deleting, and archiving files on a computer system.
Editing and Updating Files Webmasters can update a Web page in one of two ways. They can either perform direct server updates or local client updates.
Direct Server Updates A direct server update involves updating the file directly on the Web server where it resides. The Webmaster opens a text editor, such as Notepad, on the server, loads the Web page for editing, makes the desired changes, and saves the file back to the server. This process allows updates to become visible to visitors immediately. Local Client Updates You can make a local client update by downloading a Web page and modifying it on a client workstation (for example, on the computer you used to create the Web site). You can then upload the revised page to the server. Web surfers will not see the new version until you upload the file to the server. In the following activity, you will use the Dreamweaver FTP tool to download and edit a file from your published MyDiskDesigns.biz Web site. You will not be able to complete this activity if you have not already published this site using FTP (see You Try It activity 14B on page 401). If necessary, talk to your teacher about publishing this site before starting this activity.
ACTIVITY 15B Download and Upload Files from a Remote Server Figure 15.4 The news.html file downloaded from the remote site to the local site.
Get permission from your teacher before starting this activity!
1 Open your MyDiskDesigns.biz Web site in Dreamweaver. In the Files panel toolbar, click the Connects to remote host button to connect to the server where your site is published. After you are connected, select Remote view in the Files panel. Get File(s)
430
Chapter 15
2 In the Files panel, open the pages folder and open the news.html file. On the Files panel toolbar, click Get File(s) (or press Ctrl + Shift + D) to download the file. In the Dependent files dialog box, click No. The news.html file has been downloaded to the local site (see Figure 15.4).
3 In the Files panel, click the Disconnects from remote host button to disconnect from the server. Switch to Local view. 4 Open the news.html file. Press Ctrl + F. In the Find and Replace dialog box, in the Find box, key: 1000th. In the Replace box, key: 2000th. Click the Replace button. After you have updated the file, save your changes. If possible, browse to your published site and open the News page. Note that your changes do not appear in the page on the remote server. 5 To upload the edited file, in the Files panel, select the news.html file. Click the Put File(s) button (or press Ctrl + Shift + U) to upload the file to the remote site. If necessary, in the Dependent Files dialog box, click No. 6 Browse to your published site and open the News page to view your changes. In Dreamweaver, you can also switch to Remote view to view pages located on your remote server. If you are connected to the server, you should see your changes (see Figure 15.5). In Dreamweaver, disconnect from the remote server and close the Web site.
Figure 15.5 Modified page viewed in Remote view.
Put File(s)
Text change
You can synchronize local and remote files by using the Synchronize command on the Files panel option menu. Synchronizing allows you to replace older files with newer files, so your published site is always up-to-date. You can use the Synchronize command to synchronize your entire Web site or selected files.
Automated Updates Any Web site that requires frequent changes must use an automated update process. This allows multiple people to generate new Web content on their local workstations, test those pages to ensure that they look right and function correctly, and then submit them for inclusion in the next regular Web site update. An automated tool can then connect to the server (or servers) via HTTP or FTP and post all of the new content files in a single operation. This allows many people to perform updates, while protecting the live Web site from mistakes and/or tampering.
Caution When you save a file while working in Remote view, you only save a copy to your local client. To save the file to the server, select File>Save to Remote Server or press Ctrl + Shift + U.
Maintaining a Web Site
431
Archiving Web Pages When you update a site, do not immediately discard old Web elements. Instead, keep old pages and graphics for at least six months to a year. Old pages and graphics can be reused. The process of saving old pages is called archiving. You can store archived information in several ways. The easiest way is to create a folder named “Archive” and copy old Web page elements into subfolders within that folder. You can store an archive folder on a local computer, a removable storage device, or your Web host’s server. When archiving an HTML document, remember to archive the document’s associated graphics files and folders. Store the graphics in a folder with the same name as the original graphics folder so that your archived page’s links will work properly.
Developing Technical Documentation Many Web site publishers provide various forms of technical documentation to accompany their software. Such documentation might be intended for Web site users, Webmasters, or even Web developers. Regardless of its intended readership, documentation is an essential part of a Web site. Web site user documentation is usually limited to online help files or downloadable PDF files that users can print or view electronically. Documentation intended for Web site content developers contains instructions for creating content in a form that will flow easily into the Web page design. Other people, such as Webmasters and system administrators, may require documentation to learn how to execute automated publishing tools and to verify that an update runs smoothly. Define What is a local client update?
Section 15.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• A Web site requires regular updating to keep it useful and attractive to visitors.
1. Define file management, direct server update, local client update, archiving.
4. Compare and Contrast How are direct server updates similar to and different from local client updates?
• To make a local client update, download the page from the remote site, change it on your computer, and upload the modified page to the server. • After you update a site, archive rather than discard old Web elements.
432
Chapter 15
2. Explain the importance of archiving Web pages. 3. Summarize why it is useful to develop technical documentation.
5. Summarize Describe the steps you would use to download a file from an FTP site.
Apply It! Plan Updates to a Site The MyDiskDesigns business plans to add disk cases to their product line. Describe your plan to update the site to include these cases. Explain the reasons for your planned updates.
SECTION 15.3 KEEPING A WEB SITE SECURE Focus on Reading Read to Find Out Ask yourself why safeguarding the confidentiality of users’ personal data is important to e-commerce sites. Read to find out how Webmasters keep a site secure.
Main Ideas
Key Terms
Reading Strategy
Many Web sites collect valuable information about the Web surfers who visit them. Part of a Webmaster’s job is keeping this personal data secure from unauthorized access.
access control password user authentication global access control
Describe three ways to control access to a Web site. Use a web diagram similar to the one below (also available online). Access Control
Web servers often contain important information such as individuals’ names, addresses, phone numbers, e-mail addresses, credit card information, and other personal data. Safeguarding this data must be a primary concern for any Web site publisher who collects and stores such information.
Controlling Access to a Site How can Webmasters control access to data on a site?
Webmasters are usually responsible for setting up a system that will allow access to a site for users with permission and keep out users without permission. Restricting the availability of a site to a specific set of authorized users is known as access control.
Password Controls Passwords are a common form of access control. A password is a set of letters or numbers that a user enters to gain access to a site. Almost every Web site that restricts access to a specific group of authorized users requires a user ID and a password. The system checks the password entered by the user to make sure it matches the one assigned to the identified user. This process is known as user authentication. Some sites encourage users to improve the security of their passwords by enforcing various password rules. For example, one site might require that passwords contain a minimum number of characters, while another site might reject all passwords that do not include at least one number. Other sites require users to change their password every 30, 60, or 90 days. All of these rules make it harder for hackers to use other people’s passwords. WebDesignDW.glencoe.com
Jargon People skilled at fooling computer systems into granting access to restricted information or performing unauthorized operations are commonly known as hackers.
Maintaining a Web Site
433
To enter a protected Web site, users must typically enter their user ID and password into the site’s login screen. In the following activity, you will use Dreamweaver to create a login screen.
ACTIVITY 15C Create a Login Screen 1 Open Dreamweaver. Create a new HTML page in Design view. Title the page: Login Screen. 2 With the Insert toolbar in Forms view, click the Form button to add a form tag and outline to the document. 3 In the form outline, key: User name:. Press the spacebar once. On the Forms toolbar, click the Text Field button. With the text field selected, in the Properties inspector, under TextField, key: username. In the Char width box, key: 40. Press Enter. In the form, click after the text field and press Enter once. 4 Key: Password:. Press the spacebar. Click Text Field again. In the Properties inspector, under TextField, key: password. In the Char width box, key: 40. Next to Type, select Password. 5 Ask your teacher where to save the file. Save the file as: login.html. Preview the file. Your screen should look similar to Figure 15.6.
Figure 15.6 The login screen requires the user to enter a username and password.
6 Key some text in the User name box. Enter the same text into the Password box. Note that the text does not display the same way in both boxes (see Figure 15.7). Close your browser. Save and close your Web page.
Figure 15.7 The password is automatically obscured.
When you key text into the Password field, dots or asterisks replace the text. Obscuring text in the Password field helps promote Web site security by keeping the password a secret from other users. 434
Chapter 15
Global Access Controls Once the site authorizes a user to enter, it may use additional access control mechanisms to safeguard valuable data. Granting or denying access to system data for multiple users is known as global access control. Users are assigned to groups, and different groups are given different levels of access to the system. For example, one group of users may be granted rights to view system data but denied the right to change any data. Another group may be given rights to enter new data records into the central database but not to delete an existing record from it. The administrator group typically has rights to perform any operation to the system. Only a small number of people, such as the Webmaster and the system administrators, have this high level of access. Potential user groups and their levels of access are shown in Figure 15.8. User Group 1
• •
Activity 15.2 Explore Global Access Controls Find out more about global access controls by visiting WebDesignDW.glencoe.com.
Figure 15.8
User Group 2
View system data Denied the right to change any system data
Global Access Controls
• •
Using global access control can substantially enhance a Web site’s security. Which user group is probably the administrator group?
Enter new data records Denied the right to delete data records
User Group 3
• • • •
View system data Change system data Enter new data records into central database Delete data records
Describe What is a password?
Ethics and Webmastering What ethical decisions must a Webmaster address?
The need for Web site security is well established, as is the technology to implement such security. However, the question still remains as to how much security any given Web site publisher should be required to provide. For instance, a public school district that provides information about its students’ grades should take steps to ensure that such information is not made available to everyone. However, should that district be required to implement passwords, global access controls, and other measures to keep that information as secure as possible? These questions do not yet have a clear legal answer. Webmasters often must make ethical decisions when monitoring Web sites. For instance, some Web sites allow users to upload images to the server. Web hosting services often store image files in a “holding” directory until a moderator, who may be the Webmaster, can preview them. Once approved, the files are then moved to a “live” directory. During this process, the Webmaster must make choices regarding what is and is not appropriate material. These ethical choices are sometimes part of the Webmaster’s job. WebDesignDW.glencoe.com
Maintaining a Web Site
435
In this unit, you learned about some of the Web site features that give businesses a strong online presence. Whether you are developing a Web site for a major corporation, or creating a site for your own personal use, many of the same basic steps need to be followed, as shown in Figure 15.9.
Figure 15.9 Use a checklist like the one shown here to answer some of the basic questions for Web site development.
Development Checklist
✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑
Establish team members and assign tasks Maximize site accessibility Include tools to collect visitor information Apply privacy and security policies Evaluate Web host options Select and register domain name Publish and test Web site Identify techniques for publicizing site Identify maintenance techniques Protect the company’s data by making backups Make ethical choices about what is and is not appropriate material for the Web site
The projects you have completed throughout this book have given you the fundamental skills needed to create interesting, user-friendly Web sites. In the next unit, you can enhance these skills by learning more about how to use HTML code. As you develop as a Web designer, you will continue to build upon the basic skills learned in this book. Identify What is one ethical decision that a Webmaster must make when monitoring a site?
Section 15.3 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Passwords are a common form of access control.
1. Define access control, password, user authentication, global access control.
4. Draw Conclusions How do global access control mechanisms enhance the security provided by user passwords?
• Global access control mechanisms enable different levels of system access to different groups of users.
2. Explain the need for Web site security. 3. Summarize the ethical questions Webmasters encounter.
• Webmasters often need to make ethical as well as technical decisions.
5. Compare and Contrast How are access control mechanisms similar to data encryption techniques (see page 351)? How do they differ?
Apply It! Analyze Security Visit three online shopping, auction, or banking sites. Identify the means they employ to keep customer data secure.
436
Chapter 15
CHAPTER 15
Reading Review
SECTION 15.1 Web Server Maintenance Key Terms hot-swappable hard drives, 425 hard drive mirroring, 425 backup, 426 incremental backup, 426
Main Ideas ■ The Webmaster maintains the uninterrupted ■
■ ■ ■ ■
operation of the company’s Web servers. A server’s ability to upload and download files depends on the communication lines and other hardware and on the protocol software that controls the flow of data. Some servers use two to six hot-swappable hard drives with indicator lights to report drive failure. Webmasters protect the company’s data by making backups. Incremental backups copy only the data that changed since the last full backup. A Webmaster’s primary role is to maintain a Web site.
SECTION 15.3 Keeping a Web Site Secure Key Terms access control, 433 password, 433 user authentication, 433 global access control, 435
Main Ideas ■ Passwords are a common form of access control. ■ Many Web sites collect valuable information about ■
■ ■ ■
the Web surfers who visit them. Safeguarding the confidentiality of users’ personal data must be a primary concern for any Web site publisher who collects and stores such information. Using global access controls can substantially enhance a Web site’s security. Global access control mechanisms enable different levels of system access to different groups of users. Webmasters often need to make ethical as well as technical decisions.
SECTION 15.2 Updating Information Key Terms file management, 430 direct server update, 430 local client update, 430 archiving, 432
User Group 1
Global Access Controls
User Group 2
Main Ideas ■ A Web site requires regular updating to keep it
useful and attractive to visitors. ■ A direct server update is quick and easy, but visitors can see your half-completed changes. ■ To make a local client update, download the page from the remote site, change it on your computer, and upload the modified page to the server. ■ After you update a site, archive rather than discard old Web elements.
User Group 3
Maintaining a Web Site
437
CHAPTER 15
Review and Assessment
AFTER YOU READ Study with Two-Column Notes Two-column notes are helpful study tools when you need to review material on your own. To use this method, cover the right column with a piece of paper. After looking at the idea on the left, test yourself by coming up with as much information about the topic as you can. Slide the paper down to see if your response was correct. Take notes on one section of this chapter to try out this technique.
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
15. Summarize what factors a Webmaster must consider when maintaining a site’s hardware, software, and storage capabilities. Hardware
Site Maintenance
Software
Storage
Reviewing Key Terms
Understanding Main Ideas 8. Describe the primary tasks of Webmasters. 9. List two techniques Webmasters use to maintain Web server storage devices. 10. Summarize the guidelines for updating a Web site. 11. Explain why some Web sites use an automated update process. 12. Identify two ways in which documentation may be provided to Web site users. 13. Describe the most common way for Web sites to implement access control. 14. Discuss how Webmasters can use Web tracking systems. 438
Chapter 15
Step 1
➠ ➠
1. How do hot-swappable hard drives help reduce down time for Web servers? 2. What is hard drive mirroring? 3. What do Webmasters use to make backups? 4. How is a direct server update different from a local client update? 5. What does it mean when a site has access controls? 6. Change the following sentence to make it true: The process of saving old Web pages is called file management. 7. What is the name of the process that compares the password entered by the user with the password assigned to the identified user?
16. List the steps you must follow to update a Web page locally in Dreamweaver.
Critical Thinking 17. Draw Conclusions You work for a Web hosting company. A customer contacts you because her Web site contains a graphic that she did not authorize. Why might her site contain content that she did not authorize? How should you resolve the problem? 18. Analyze Maintenance Contact your school district or campus Webmaster to find out what the school’s policy or procedure is regarding archiving old Web pages. For example, how long must files be maintained in an archive folder? Is the Webmaster required to maintain printed versions of each page? Create a table like the one below to list each requirement and its purpose. Policy or Procedure
Purpose
CHAPTER 15
Review and Assessment
19. Assess Practices What is the best practice for updating a Web site: local client update or direct server update? Review the policies for the Web hosting company you used for previous activities. Does that company allow direct server updates? Explain why you think the service does or does not allow direct server updates. 20. Evaluate Security You are setting global access controls for a large e-commerce site and its customer and product information. You are assigning access to the following groups: salespeople, product managers, customers, warehouse personnel, and top-level managers. What level of access should each group be given? Use the pyramid chart below to explain your reasoning.
Reading & Writing Read the paragraph below and then answer the question.
Many Web development teams use an automated update process to apply changes to their sites. This process allows multiple people to generate new Web content on their local workstations, test those pages to ensure that they look right and function correctly, and then submit them for inclusion in the next regular Web site update. An automated tool can then connect to the server (or servers) via HTTP or FTP and post all of the new content files in a single operation. According to the paragraph, which of the following statements is true? Automated updates can only be made on one workstation.
High Access
An individual must upload the new information to the server. Automated updates make it possible for several people to make changes to a Web site. Automated updates appear immediately on the Web site.
Low Access
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items.
WebDesignDW.glencoe.com
On your own paper, copy and complete the chart shown below.
Go to the book Web site shown above. To review the main points in this chapter, select e-Review>PowerTeach Outlines>Chapter 15.
21.
+
22.
+
+
Result
23.
+
+
Result
Study with PowerTeach
Result
Online Self Check
WebDesignDW.glencoe.com
Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 15.
Maintaining a Web Site
439
Activities
CHAPTER 15
1. MAKING CONNECTIONS Create an Oral Presentation Assume that you work for a company that sells hardware solutions for Web server storage devices. The company offers each of the storage solutions discussed in the chapter to its customers. Prepare an oral presentation that you can use on sales calls to businesses. Assume that your customers include both large companies and Web hosting businesses. Your presentation should focus on the features and benefits of each storage device offered by your company and the cost of each option (research options as needed). Be prepared to answer questions at the end of your presentation. Use a table like the one shown below to help organize your research. Web Server Storage Devices Storage Option
Benefit
Cost
2. STANDARDS AT WORK Students use a variety of media and formats to communicate information and ideas effectively to multiple audiences. (NETS-S 4)
Create Technical Documentation You are the Webmaster for your company’s Web site. You are currently completing a round of local client updates to the site, which will be posted to the Web server. However, you have been assigned to a special project team and will not be able to complete the next round of updates to the Web site. You must therefore document your tasks so they can be completed by another person. ◆ Write a set of procedures for the person who will be doing the updates. ◆ Explain in words, drawings, or screen shots the updating process. Test your procedures by updating your MyDiskDesigns.biz site. Update the product prices on the Products page using the information contained in the table below. Old Product Price
440
Chapter 15
New Product Price
$4.99
$6.99
$10.99
$11.99
$22.99
$24.99
CHAPTER 15
Activities
3. TEAMWORK SKILLS Update a Web Site As a team, select a Web site that you have created in this course but have not yet published. With your teacher’s permission, publish the site to a Web server. Check with your teacher to learn how and where you should publish the site. After it is published, review the site to identify at least three improvements the team can make to the site. Use a tree diagram like the one below to identify and record the changes you want to make to the site. Update a Web site
Change 1
Change 2
Change 3
Once you have identified three changes, complete the following tasks. You may want to have different members of the team complete different tasks. ◆ Make the changes as a local client update. ◆ Preview the site in a browser to test your changes. ◆ Publish the site again to the same location. ◆ View the published site in a browser and verify that your changes appear and work as expected.
4. CHALLENGE YOURSELF Identify Security Procedures Conduct an interview with a Webmaster from your school, school district, or local business. Before the interview, write a series of questions that you would like to ask about the types of security procedures he or she uses to manage access to Web sites. Write down the Webmaster’s answers to your questions and ask additional follow-up questions as needed. Security Procedures
Compare the Webmaster’s answers with the security procedures and services from the hosting company you have been using in previous activities. What is similar? What is different? Use a Venn diagram to compare and contrast the two. Based on these similarities and differences, write a two-page report that explains how the Webmaster controls access to all the information contained on the Web site, and your findings from the hosting company.
Webmaster
Hosting Company
Maintaining a Web Site
441
CHAPTER 15
Projects
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Update a Web Site
Add an additional question and answer to the MyDiskDesigns.biz FAQ page. Open your MyDiskDesigns.biz faq.htm1 page in Dreamweaver. Add the following question to the page: How much data can I store on a CDR? Research CDR media and provide an easy-to-understand answer for users. Emphasize how much more data a CDR can hold as compared to a traditional 3.5 inch floppy disk. Include this question in the list at the top of the page. Add a bookmark to the question. Proofread your work and save the site. With your teacher’s permission publish the site. Check the FAQ page carefully to make sure it has been updated.
2. Create a Job Description Create a job description for the MyDiskDesigns site’s Webmaster. MyDiskDesigns.biz has decided to hire a new Webmaster, and they have asked you to create the job description. Use the Internet to research the training, skills, and salaries associated with this job. You can also use the information you have learned in past activities. Use your information to create a job description for the position. Make sure the training and skills you include in your description are tailored to meet the needs of the MyDiskDesigns Web site. You also need to help the company determine the salary for the position. Create a table like the one below that shows the salary range an individual can expect based upon how many years they have worked as a Webmaster. YEARS EXPERIENCE 0–1 year 2–5 years 6+ years
442
Chapter 15
SALARY RANGE
CHAPTER 15
Projects
Read the projects described below. Then follow the directions to complete each project.
1. Document a Procedure You are the Webmaster for a Web hosting service. The hosting service allows clients to select the backup method for their sites. The least expensive method is incremental backup. The mid-range option is daily incremental backups and monthly complete backups. The most expensive option is a daily complete backup. The service has several clients who have chosen each option. You will be on vacation next week. The person filling in for you knows little about your job. Write a set of procedures for each of the backup options available. With your procedures, provide a schedule of when backups are done. Let the schedule reflect the fact that you process incremental backups in the early afternoon. You schedule complete backups to run overnight and you check the results the following morning.
2. Plan and Develop a Web Site Imagine you have been helping companies to develop effective e-commerce sites. As a consultant, you have: ◆ helped to hire Webmasters. ◆ designed and created an e-commerce Web site. ◆ helped determine the best hosting company for a company to use. You are now starting your own business. This company will provide the services listed above, and will also sell Web hosting services. ◆ Plan your business’s Web site. The site will include pages that feature the various services offered by the company. ◆ Use Dreamweaver to create your commercial site. Use the information you have learned in various activities to create the content for the different pages in the site. ◆ Add graphics and multimedia elements to the site as needed. Be sure to include all necessary copyright information.
Maintaining a Web Site
443
Problem Solving: Develop a Commercial Web Site You are working on the Web site for a furniture store that has just added computer furniture to their inventory. The store owners have decided that they need a new Web site that features the new computer furniture line. 1. Write a mission statement and goals for the site and determine the target market. The computer furniture is high quality and ergonomic, meaning that it is specifically designed for physical comfort and safety. The company plans to sell this line of products for home-office use. As part of your planning process, determine a name for the site. 2. Create a storyboard for the site. The site should include information about the business and its products.
◆ The home page should explain the benefits of an improved working environment. ◆ Each type of product should have its own page. Include pages for Desks, Chairs, Accessories, and Storage Units. ◆ Include a Frequently Asked Questions (FAQ) page. The page will include named anchors to help visitors locate answers quickly. 3. Create the Web site in Dreamweaver. Test the site in a browser after each page has been added. 4. Add an order form that can be accessed from each of the product pages. Design the order form so that it includes all the information the business would need to fill the order. You may want to look at similar product catalogs to see what types of styles, sizes, finishes, and other features you should include in your form. You also may want to research order forms online for ideas on how to structure the form. 5. Add a privacy policy to the site. 6. Run reports on your site to test for broken links and HTML validation. 7. Make sure your site includes alternative text and other needed accessibility features. 8. With your teacher’s permission, publish the site. Test the site. Make corrections as needed. 444
Chapter 15
Create an Online Portfolio In this project, you will create a frames-based site to house an online portfolio. An online portfolio is a great way to display your best Web site designs. 1. Create a Web site in Dreamweaver that uses a Fixed Left frameset.
◆ The narrow left frame will contain links to the content pages. ◆ The right frame will display content pages. The content pages will contain your best Web pages. 2. Review the sites that you have created during this class. Select pages to include in your portfolio. Try to include pages that demonstrate the various Dreamweaver skills that you have learned. Aim to include six to eight samples. 3. Create a home page that introduces you and your portfolio. Assume that the visitors to your site will be potential employers. 4. Create blank content pages for each of the Web pages or sites you plan to add to your portfolio. 5. Open the Web pages that you want to include in your portfolio. In Split view, copy the code from each page and paste it into one of the blank content pages of your portfolio Web site. 6. Create links from the left frame to each of the content pages. 7. Add a copyright statement to the left frame that identifies you as the copyright holder of your work. 8. Add a guest book to the site to invite visitors to comment on your portfolio. 9. Preview your site in a b r ow s e r, m a k i n g changes as appropriate. 10. With your teacher’s permission, publish the finished Web site on your school or class Web site. 11. For your por tfolio, include a screen shot and an electronic copy of your finished product. 12. Ask three classmates to review your portfolio. Have each of them add an entry in the guest book.
Maintaining a Web Site
445
UNIT
5
Advanced HTML
Go to this book’s Web site at WebDesignDW.glencoe.com. Click Unit Activities and select Unit 5 Cyber Manners and Netiquette. Take a quiz to check your knowledge of safe and effective online communication.
446
Think About It Technology of Tomorrow Even though you may not know exactly how they work, computers and the Internet are part of our daily lives. From telephone networks to bank networks to the Internet, we are connected to the world at home, at school, and at work.
Predict the Future Activity For many years, telephones affected more people than any other type of communication. Do you think in the next ten years more people will communicate with each other using the telephone, the Internet, or another new kind of technology? Explain your answer.
447
CHAPTER
16
HTML Tables and Frames
YOU WILL LEARN TO… Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a framesbased Web page using HTML Create a link bar page Create a content page Create a container page Control Web page layout with frames Create links between frames Section 16.3 Identify inline CSS Identify internal style sheet code Create an external style sheet Use CSS for Page Layout
IMAGE TO COME
WHY IT MATTERS ................................................. Businesses use tables and grids to track inventory, organize annual reports, and create sales summaries. Organizing this information in vertical columns and horizontal rows enables people to find information quickly and easily. An HTML table on a Web page functions in a similar way. It both organizes the layout space and allows Web designers to carefully evaluate the content that they add to a Web page. Examine the notes you have taken for one of your other classes. Select one day’s notes and organize the information into a table. How does a table help you organize and interact with information?
448
Chapter 16
CHAPTER
16
WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 16.1 Merge Cells ................................ 454 16.2 Explain Frame Placement ......... 461 16.3 Use CSS ....................................... 466 You Try It Activities 16A Create a Table Using HTML ....... 16B Create a Frames-Based Web Page .................................... 16C Create an External Style Sheet Using HTML ................................. 16D Use CSS to Position Page Elements .....................................
453 459
You Try It Skills Studio Create a Table ...................................... 472 Create Frames ..................................... 472 Web Design Projects Create an Inventory Table ...................473 Create a Frames-Based Recipe Index ..................................................... 473
IN THE WORKBOOK
464
Optional Activities and Projects Guided Reading Web Design Projects
465
ON THE WEB
Chapter Assessment Making Connections ............................ 470 Standards at Work .............................. 470 Teamwork Skills ..................................471 Challenge Yourself .............................. 471
Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments
BEFORE YOU READ Study with a Partner It can be difficult to review your own notes and quiz yourself on what you have read. According to research, studying with a partner for just 12 minutes can help you study better. Two-column notes are particularly useful for studying with a friend. One person reads one main idea from the left column of the notes. The other person tries to recite all the supporting details in the right column. The first person provides any information missed by the second person. When you have gone through all the main ideas, switch roles.
WebDesignDW.glencoe.com
HTML Tables and Frames
449
SECTION 16.1 CREATING TABLES IN HTML Focus on Reading Read to Find Out In this section, you will learn how to define and modify a table using HTML coding. Read to find out how to merge cells and control table alignment.
Main Ideas
Key Terms
Reading Strategy
HTML tables give Web page designers a great deal of control over page layout and the formatting of information. There are many HTML tags and attributes available for this purpose.
Identify three tag sets you need to create a basic table. Use a table similar to the one below (also available online). HTML Table Tags
What Tag Set Defines
In this chapter, you will learn how to build a table using HTML tags.
Defining a Basic Table How do Web designers use HTML tags to define a table?
Three sets of HTML tags define a table. ◆ The
tag set marks the beginning and end of the table area.
Figure 16.1 Notice that you cannot see the boundaries of the cell in the browser. How many rows and columns are in a single table cell?
◆ The
tag set marks the beginning and end of a row. ◆ The
tag set marks the beginning and end of a column. The simplest table is one that defines a single table cell—that is, a table with one row and one column. Figure 16.1 shows the HTML source code that defines such a table, and illustrates how it will look in a Web browser.
Identify What tag set marks the beginning and end of a table row? 450
Chapter 16
WebDesignDW.glencoe.com
Using Table Attributes How can I use attributes to modify a table’s appearance?
It is easy to modify a table’s characteristics by using table attributes. The HTML table code defines an area on the Web page where you can place items within a grid. As shown in Figure 16.1 on page 450, this grid is invisible.
Creating Table Borders To outline a table grid and make it visible on the screen you need to use the border attribute, which defines the width of the border. In addition, you can use the bordercolor attribute to specify the table border’s color. Figure 16.2 shows the HTML code used to create a blue border. The bordercolor attribute uses a hexadecimal number or one of the 16 named colors to define the border color (see Appendix C for a listing of hexadecimal and named colors).
The border attribute creates a boundary around the cell. What defines the width of the border?
Notice that two blue rectangles actually appear around the table cell in Figure 16.2. The browser draws a border around each cell in the table, and then another border around the entire table. The space between the outer border and the cell border is the cell spacing. You can adjust this spacing with the cellspacing attribute. The space between a cell border and the cell’s content is the cell padding. You use the cellpadding attribute to adjust this spacing. Figure 16.3 shows the Figure 16.2 table with cell padding and only one border.
Set the cell spacing to zero if you only want to see one border. What does a cell padding of 5 do?
Figure 16.2
Figure 16.3
HTML Tables and Frames
451
Merging Cells Figure 16.4 You add the colspan attribute within the
tag. What information often appears in a header row?
Most tables contain more than one cell. The code used to create a cell is also used to create a table with multiple rows and columns—you just add additional row and column tags. You can combine, or merge, two or more table cells to make one larger cell. You can merge cells horizontally by grouping multiple columns in a row. By merging columns, you create a header row. A header row contains titles for each column in a table. As shown in Figure 16.4, you place the colspan attribute within a
tag to merge cells horizontally.
The number after the attribute (2) indicates the number of columns to be merged.
Code
Code shown in browser
You can also merge cells vertically by grouping multiple rows in a column. By merging rows, you can create a header column. A header column contains titles for each row in the table. You use the rowspan attribute to merge cells vertically. Activity 16.1 Explore Table Attributes Learn more about table attributes at WebDesignDW.glencoe.com.
Controlling Table Alignment You can use the align attribute to: ◆ align a table on a page. ◆ align items in a cell. The possible values for the align attribute are left, center, and right. When used in the
tag, the align attribute affects the horizontal alignment of the entire table. When used in the
tag, the align attribute will align the contents of all the cells in that row. When used in the
tag, the align attribute defines how the contents of one particular table cell will align. If the align attribute is not present, the default alignment for tables and table cells is left.
452
Chapter 16
WebDesignDW.glencoe.com
Figure 16.5 Using the align attribute in the
tag centers the entire table on the Web page. How would right alignment in the
tag affect the appearance of the table in the browser? Code
Figure 16.5 illustrates the use of the align attribute in both the
tag and the
tag. The attributes cause the Web browser both to center the entire table on the Web page and to center the table heading within the first row of the table.
Creating a Table In the following activity, you will create a table using HTML. You will add a border to the table and adjust its cell spacing and cell padding. Remember to use Code view when entering HTML in Dreamweaver.
Code shown in browser
ACTIVITY 16A Create a Table Using HTML 1 Open a text editor such as Notepad or use Dreamweaver as an HTML editor. Enter the HTML source code shown in Figure 16.6. Save the file as table.html.
Figure 16.6 Enter the source code to create an HTML table.
Troubleshooting For information about how to create and save an HTML document in Notepad, go to You Try It activity 4B on page 104.
HTML Tables and Frames
453
2 With your teacher’s permission, print the file (press Ctrl + P to print). Proofread your code and make any necessary corrections. Re-save the file. 3 Launch your Web browser. 4 Open the file that you just created in the browser. Your results should look like Figure 16.7.
Figure 16.7 Using rowspan creates a header column.
As you can see, it is easy to create a basic table using HTML. By defining a sufficient number of table cells within a given Web page, a Web designer can organize a Web page’s content and position elements on the user’s screen very precisely. Define What is a header row?
4. Compare and Contrast Explain how using the align attribute in the
tag is different from using the align attribute in the
tag.
• Table attributes define the table grid, the alignment of the table on the page, and the alignment of text in the cells. • You can combine, or merge, cells to make larger cells.
2. Summarize the ways in which tables can be used for page layout. 3. Identify the HTML tags and attributes that define tables.
5. Draw Conclusions Identify a scenario where you would need to use a header column.
Apply It! Merge Cells Review the HTML source code in Figure 16.5. Revise the table structure so that the table heading appears on the left side of the table rather than on the top. Make the table cell that holds the header text two rows high.
454
Chapter 16
The Home and Workplace of the Future
D
reams of “intelligent homes” with appliances that fix themselves have largely remained science fiction. But smart houses and workplaces are becoming real.
Smart Houses Today’s smart homes have networks that automatically adjust lights, temperature, and TV or stereo volume. Emerging home technologies include: ◆
Internet-enabled appliances.
◆
next-generation refrigerators to warn when milk will expire, order more eggs, or schedule their own repair service when a repair is needed.
◆
kitchen computers that can manage recipes and oven timers.
Imagine a home for an elderly or disabled resident with doors that open automatically or motion sensors to track movement. Such a house could call for help if it detects no motion for a certain amount of time, in case the person has fallen or lost consciousness. Programmable appliances and fixtures can be controlled automatically. Others can be voice or breath controlled rather than hand controlled so that an occupant can lead a more independent life.
Smart Workplaces
Today, many workers carry a laptop PC, a cell phone, and a PDA. Some companies have even started advertising a single small device that does the work of all three.
1. Evaluate Technology Research current and emerging smart-house technologies. Discuss the positive or negative impact of smart houses on individuals and on society.
With the advent of wireless networks and widespread, broadband Internet access, workers in the future will not be tethered to a desk. In fact, the “office of tomorrow” may be anyplace you want—the kitchen table, a park bench, or a lounge chair by a hotel pool. As workers gain mobility, they will demand more integrated devices.
2. Analyze an Issue Consider the ways in which people have become reliant on technology, both at home and work. In your view, what are the key advantages and disadvantages of this reliance? Share your opinion with the class. HTML Tables and Frames
455
SECTION 16.2 CREATING FRAMES IN HTML Focus on Reading Read to Find Out The main purpose of this section is to explain how HTML frames are used to display two or more Web pages on the screen at the same time. Read to find out how to create hyperlinks between frames.
Main Ideas
Key Terms
Reading Strategy
HTML frames give you the ability to display more than one Web page on the screen at the same time. You can customize hyperlinks to support frames.
frame container page left-hand navigation content page top navigation
Compare and contrast content pages and container pages. Use a Venn diagram similar to the one below (also available online).
Content
Figure 16.8 In this Web page, the frame on the right moves independently of the frame on the left. What advantage is there to creating a Web page with frames?
456
Chapter 16
Container
As you learned in Chapter 13, some Web designers find it useful to divide Web pages into two or more frames. Each frame contains its own Web page, and each Web page can operate completely independent of the others, or interact with the others. For example, Figure 16.8 shows a Web page that contains two frames. The link bar in the left frame does not change. The content in the right frame changes whenever a user clicks a hyperlink in the link bar. The frames behave independently of each other.
WebDesignDW.glencoe.com
Creating Frame Pages in HTML How many HTML documents do I need to create a frames-based page?
A Web page with two frames is composed of three separate HTML documents (see Figure 16.9). ◆ One document defines the Web page that will display in frame 1. This Web page is usually the site’s link bar. ◆ The second document contains the code for the page that will display in frame 2. This second page usually contains the Web site’s content. ◆ The third HTML document, called a container page, defines the characteristics of the frames that contain the other two documents. This page directs the browser to display the other two HTML documents in frames.
Shortcut To access Notepad’s Help feature, press F1.
All of these documents together are referred to as a frame set.
Figure 16.9
Container Page
Frame 1
The container page directs the browser to display the other two HTML documents in frames. What document usually displays in frame 1?
Frame 2
Figure 16.10 The file name for this page is linkbar.html. What type of list is created in this document?
Creating a Link Bar Page Most HTML frame sets contain a link bar (also called a navigation bar). As you learned earlier, a link bar is a set of buttons containing hyperlinks to other Web pages on the site. The HTML code shown in Figure 16.10 uses different levels of heads and a bulleted list to create a very simple link bar. A link bar can appear virtually anywhere on the screen. Most Web designers place it on the left side. A frames-based Web site with a link bar on the left is often said to have left-hand navigation. HTML Tables and Frames
457
Creating a Content Page Figure 16.11 The file name for this page is welcome.html. How do you know that this page is a complete HTML document?
The link bar page is usually designed to occupy as little screen space as possible. This is to save room for the content page, which should capture the user’s attention and fulfill the primary purpose of the Web site. In many frames-based sites, clicking the link bar will cause the main content page to change to present new information, a new message, or a new product. Figure 16.11 contains HTML code that displays a simple content page.
Creating a Container Page Once you create the link bar page and the content page, you can tie them together with a container page. The container page has the responsibility of telling the Web browser where to position the page’s frames, how big to make them, and what HTML files to display in them. A container page is composed of three main commands: ◆ The tag set defines the container page. ◆ The tag defines each frame on the container page. Code
◆ The src attribute identifies the file name that will display in the frame. The code in Figure 16.12 creates a container page. This page contains two frames as defined by the two tags. Each frame tag contains an src attribute. This attribute identifies the file name that will display in the frame. As shown in Figure 16.12, the first frame displays the linkbar.html file, while the second frame displays the welcome.html file.
Code shown in browser
Figure 16.12 The code shown above creates a left frame that displays a link bar and a right frame that displays the content page. How is the src attribute similar to the src attribute you used in Chapter 4? 458
Chapter 16
Laying Out Frames Vertically While the tag set supports a variety of attributes, one of the most important is the cols attribute. This attribute instructs the browser to place the frames in columns, giving the page a vertical layout. The cols attribute also specifies the width of each column. In a twocolumn site, the width of the first column is usually defined with a number, and the width of the second column is usually defined with an asterisk. The asterisk character ( * ) represents the remaining space on the screen. In the code in Figure 16.12, the first column is 200 pixels wide, and the second column covers the remaining width of the screen.
You Should Know The noresize attribute can be used to prevent users from dragging a frame’s border and changing the size of the frame.
Laying Out Frames Horizontally The frame set shown in Figure 16.11 uses left-hand navigation. Some Web sites, however, place link bars along the top of the page (also called top navigation). The rows attribute defines a Web page that is organized in rows instead of columns. The number assigned to the attribute defines the height, rather than the width, of the frames. Web developers usually specify the height of the top frame and use an asterisk ( * ) for the bottom frame. In the following activity, you will use HTML to create a frames-based page with a horizontal layout.
ACTIVITY 16B Create a Frames-Based Web Page 1 Open your text editor. Enter the HTML code listed below. If using Dreamweaver, be sure to use Code view when entering HTML. When finished, save the file as header.html. Header Frame 2 Enter the HTML code listed below. Save the file as content.html. Save it in the same folder as header.html. Main Content Frame 3 Enter the HTML code listed below. Save the file as footer.html. Save it in the same folder as the other two files. Footer Frame
Design The Americans with Disabilities Act (ADA) discourages the use of frames because they are difficult for people with various disabilities to navigate. Think about who will be visiting your site before you decide to use frames.
HTML Tables and Frames
459
Activity 16.2 Explore Frames Learn more about frames at WebDesignDW.glencoe.com.
4 Enter the HTML code listed below. Save the file as frameset.html. Save it in the same folder as the other three files. <TITLE>Three Row Frameset 5 Launch your Web browser. Open frameset.html in the browser. Your results should look like Figure 16.13.
Figure 16.13 The three frames display in rows across the page.
You Should Know To remove scrollbars from a frame, include the attribute
scrolling=no within the frame tag.
Explain What does the asterisk character ( * ) represent?
Creating Links between Frames How can I tell a browser to load a page into a specified frame?
Whenever a user clicks a hyperlink, the Web browser’s default behavior is to load the page to which the hyperlink points. When using frames, a Web designer may want the browser to behave differently. For example, when the user clicks a hyperlink in the link bar, the designer may want the content page to change, while the link bar itself remains unchanged.
Figure 16.14 The target attribute is added to a hyperlink’s anchor tag. What is the purpose of the target attribute? 460
Chapter 16
WebDesignDW.glencoe.com
Figure 16.15 Both the Welcome and About Me pages are loaded into the content frame when their link is clicked in the link bar. What is the purpose of the name attribute?
Code
Code shown in browser
To keep the link bar from changing, include the target attribute in the link’s anchor tag. This attribute tells the browser to load the target Web page into a specified frame (the content frame) rather than into the current frame. For example, the target attributes shown in Figure 16.14 on page 460 tell the browser to load both the welcome.html and the about_me.html pages into the content frame when a user clicks the corresponding link on the link bar. For the target attribute to work, you must also add the name attribute to the tag found on the container page (see Figure 16.15). If you do not include this attribute, then the browser will not know which frame you want a page to load in. Summarize How can a Web designer change the content page, while the link bar remains unchanged?
Section 16.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Frames-based sites use at least three separate HTML documents to display a Web page.
4. Draw Conclusions Why do you think left-hand navigation is more common on frames-based sites than top navigation?
• Common pages in a frame set include the link bar page, the content page, and the container page. • You can use the target and name attributes to tell the browser to load the target Web page into a specified frame.
2. Explain the purpose of a container page. 3. Summarize the attributes needed to change the behavior of hyperlinks on a frames-based page.
5. Analyze Links Why is it common for the link bar on a frames-based page to remain constant as the content page changes?
Apply It! Explain Frame Placement A friend is building a Web site using frames and has decided to place the navigation bar on the right. Explain to your friend why you think it would be better to place the navigation bar on the left.
HTML Tables and Frames
461
SECTION 16.3 CASCADING STYLE SHEETS Focus on Reading Read to Find Out When creating HTML documents, you need to use tags to specify how your document will look in a browser. Read to find out how to use CSS to format HTML documents.
Main Ideas
Key Terms
Reading Strategy
Cascading Style Sheets provide Web designers more control over the appearance of elements within a Web page. CSS can also be used for page layout.
selector class selector id selector
Compare and contrast how you use internal and external style sheets in an HTML document. Use a Venn diagram similar to the one below (also available online).
Internal
External
You are already familiar with how using Cascading Style Sheets (CSS) in Dreamweaver can change the appearance of fonts, tables, paragraphs, and more. In this section, you will discover how to integrate CSS into HTML code.
CSS and HTML How can I use CSS in an HTML document?
Maintenance For effective site organization, place any CSS files within a separate CSS folder when creating a Web site.
There are three different ways you can apply CSS to an HTML document: ◆ Inline ◆ Internal Style Sheets ◆ External Style Sheets
Inline CSS Inline CSS is integrated within tags in an HTML page. For example:
This is a paragraph.
The CSS style attributes are applied to the paragraph tag. They specify that the text color should be blue and that the first line be indented 25 pixels. As noted in Chapter 12, the use of inline CSS is not recommended because it does not separate content from presentation information. 462
Chapter 16
WebDesignDW.glencoe.com
Internal Style Sheets An internal style sheet specifies style attributes within the section of an HTML document. An example of how to declare an internal style sheet within a document is shown in Figure 16.16. Notice the style sheet is contained within <STYLE> tags. Older browsers (versions 3 and lower) will ignore the <STYLE> tags so it is necessary to include all style information between tags in your code tells browsers that cannot read JavaScript to skip the code. Browsers that can read JavaScript will still process the code.
HTML, Scripting, and Interactivity
483
◆ An event is something that causes an effect to occur. An event may be triggered by a user action or by the computer system itself. Jargon When discussing what a script does, Web developers usually state what an object “knows,” as though the object were living. For example, a graphic object may know its height and width.
◆ The JavaScript event handler defines the action that will occur when an event takes place. ◆ A function is code that performs the specific action defined by the event handler code. ◆ JavaScript uses variables to identify values that will change when the script is executed. ◆ Conditional statements are commonly used in JavaScript to allow the script to react differently depending on the user’s actions. Web developers can use JavaScript for a variety of programming tasks. In the next activity, you will use JavaScript to create a rollover button.
ACTIVITY 17G Create a Rollover Button Using JavaScript 1 Copy the button1.gif and button2.gif files from the DataFiles\Ch17\ Images folder into the images folder. 2 Open a text editor, such as Notepad. Enter the source code listed in Figure 17.9. Name the file rollover.html and save it in the rollover folder.
Figure 17.9 Enter this JavaScript code to create a rollover button.
Variable Objects
484
Function
Conditional Statement
Event
Event Handler
Chapter 17
3 View rollover.html in a Web browser. The results should look like Figure 17.10. Test the button by touching it with your mouse.
Figure 17.10 The button image changes when the user’s mouse touches it.
Figure 17.11 The <APPLET> tag directs the HTML code to locate the programming code. What is the name of the applet embedded in this code?
Java Applets Java applets are small programs written in the Java programming language. These client-side programs can also be embedded in a Web page. However, unlike JavaScript, the actual Java source code is not included with the HTML file. Instead, the Web developer may simply include an <APPLET> tag that tells the Web browser where to locate the applet program. The applet then downloads over the Internet and executes within a specified area on the Web page. Figure 17.11 shows the code used to insert a small applet into a Web page. Define What is an event handler?
Server-Side Scripts How can a Web page interact with server-side scripts?
Other scripting languages execute on the Web server and transfer the output to the user’s computer as a Web page. A program such as this is called a server-side script.
Common Gateway Interface (CGI) The Common Gateway Interface (CGI) is a standard set of rules that allows Web pages to interact with server-side scripts. Web developers often use CGI to create Web-based forms that users fill out and then submit to the server. The information the users provide passes through the CGI to a server-side script that then processes the information. The script typically saves such information in a database and sometimes generates a confirmation or notification e-mail message as well.
Content CGI scripts can be written in a variety of languages including Java, C, or C++. On Linux Web servers, the Perl scripting language is one of the most popular choices for implementing CGI scripts.
HTML, Scripting, and Interactivity
485
Dynamic Content Troubleshooting Several shortcuts can help you fix a lengthy Notepad document. Use Ctrl + F to open the Find dialog box. Press F3 to find the term again. If you need to replace faulty code throughout the document, press Ctrl + H to open the Find and Replace dialog box.
HTML pages are generally static. Once a server has transferred an HTML page to a user’s browser, the information on that page does not change. Server-side scripts, however, can be used to change static content into dynamic content. “Dynamic content” is a generic term that refers to information that changes based on a user’s action. For example, some forms will offer different options depending on the information submitted by the user. Server-side scripts help make this feature possible. A server-side script retrieves data based on the user’s input and then generates a Web page that displays in the user’s browser. While it looks like a typical HTML document, the information on this page has been changed to suit that particular user. Identify What does CGI stand for?
Debugging Code How can I identify potential problems in my coding?
As discussed in Chapter 4, you can use an HTML validator to debug HTML code. Another way to identify potential problems is to include an alert statement in your code. An alert statement tells you when a particular action is not occurring as specified. Alert statements are useful to Web developers during the testing phase. They are not helpful, however, to visitors to the Web site. Therefore, alert statements should be removed before the site is published. Error messages can also help you locate and fix code errors. Explain When is an alert statement most useful to a Web developer?
Section 17.2 Assessment Reading Summary
What Did You Learn?
Critical Thinking
• Scripts executed by a user’s browser are known as client-side scripts.
4. Draw Conclusions Why do many Web developers copy scripts written by other people into their own pages?
2. Explain the difference between client-side scripts and serverside scripts.
5. Make Recommendations What types of dynamic content would you recommend adding to a site that provides historical information about your city?
• JavaScript is widely used for client-side scripting applications. • Server-side scripts execute on a Web server and transfer the results to the user’s browser.
3. List the HTML tags used to create interactive elements.
Apply It! Explore HTML Web Sites Under appropriate teacher supervision, search the Internet to locate one or more Web sites that contain JavaScript tutorials. Review the information and write a paragraph summarizing one new fact or technique you have learned.
486
Chapter 17
CHAPTER 17
Reading Review
SECTION 17.1 Adding Interactivity Using HTML
SECTION 17.2 Adding Interactivity Using Scripting
Key Terms
Key Terms
animated GIF, 477 radio button, 478 pull-down menu, 479 text area, 479
an audio or video file. An animated GIF is a sequence of GIF images stored together in one file along with an image transition delay value. The tag has a type attribute that takes different values, depending on the type of element you are creating. The type attribute for a text box should equal “text”. For a radio button, it should equal “radio”. For a check box, it should equal “checkbox”. The <SELECT> tag set defines a pull-down menu. The tag set defines a text area.
Main Ideas ■ Scripts executed by a user’s browser are known as ■ ■ ■ ■ ■
■ ■
■ ■ ■
client-side scripts. JavaScript is widely used for client-side scripting applications. JavaScript events are triggered by user action or by the computer system. A JavaScript event handler responds to events. Web developers can use JavaScript for a variety of common programming tasks. Java applets are client-side programs that download and execute when browsers encounter their reference tag in the HTML code. Server-side scripts execute on a Web server and transfer the results to the user’s browser. CGI is a server-side scripting language used to process information, often saving the information in a database. CGI enables Web pages to interact with server-side scripts. Dynamic content is customized information generated by a Web server. An alert statement in your code tells you when an action is not occurring as specified.
HTML, Scripting, and Interactivity
487
CHAPTER 17
Review and Assessment
AFTER YOU READ Find Your Study Method Consider your reading weaknesses and strengths. Think about recurring problems you have when you study and take tests. Then go back over the Read to Succeed features at the beginning of each chapter in this book. Determine which suggestions would be most useful to you. Try using one or more Read to Succeed methods when you read through this chapter and review the material.
On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.
13. List the HTML tag and type attribute used for radio buttons, check boxes, and pull-down menus. Form Field
HTML Tag
Type Attribute
radio buttons check boxes pull-down menus
Reviewing Key Terms 1. Which interactive element allows users to select only one item from a list, where all the items in the list are viewed at the same time? 2. What is another term for option buttons? 3. What are the similarities and differences between check boxes and radio buttons? 4. Which interactive element uses the <SELECT> tag set? 5. How does a text area allows users to move up and down to review what they have typed? 6. Rewrite this statement to make it true: Objects are triggered by a user’s action or by the computer system. 7. What scripting language do Web developers use to develop client-side scripts? 8. Which types of scripts are transferred to the user’s Web browser with the HTML code?
Understanding Main Ideas 9. Describe the benefits of having interactive elements in a Web site. 10. Explain how an animated GIF works. 11. Identify the tag used to insert both audio and video files. 12. List the tag and type attribute used for text boxes. 488
Chapter 17
14. Explain the similarities and differences between a JavaScript and a Java applet.
JavaScript
Java Applet
Critical Thinking 15. Distinguish between an event and an event handler. 16. Describe a common use of CGI scripts. 17. Analyze Multimedia You are planning a Web site to announce a new soft drink. What types of sound files might you use? Also, describe an animated GIF that could be used in the site. 18. Make Decisions You are creating an online form. One of the questions that users must answer is “Which conference will you attend?” The conference will be held in 10 cities. What type of interactive control would you use? Explain your decision. 19. Draw Conclusions Some e-commerce sites include wish lists that allow visitors to select items that they may want to purchase in the future. Is the script that supports the wish list feature a client-side script or a server-side script? Explain the reasons for your choice.
CHAPTER 17
Review and Assessment
20. Analyze Languages Identify ways in which scripting languages are similar to and different from HTML or other markup languages. How has the development of scripting languages changed how users interact with the Internet? 21. Make Recommendations A client wants a specific effect for her Web site, and she has asked you to explain how JavaScript works. Complete a flow chart like the one below to show your client how an object is affected. Include five boxes in your chart. Begin with what triggers an event, and include variables and conditional statements in your process. JavaScript Code Element
Reading & Writing Read the paragraph below and then answer the question.
HTML pages are generally static. Once a server has transferred an HTML page to a user’s browser, the information on that page does not change. Server-side scripts, however, can be used to change static content into dynamic content. “Dynamic content” is information that changes based on a user’s action. A server-side script retrieves data based on the user’s input and then generates a Web page that displays in the user’s browser. The information on this page has been changed to suit that particular user.
➠ ➠ ➠ ➠
According to the paragraph, which of the following statements is true?
Element
Dynamic pages change based on a user’s action. Static pages utilize a server-side script to retrieve data.
Element
Both static and dynamic pages change based on a user’s action.
Element
HTML pages are usually dynamic.
Element
You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below.
22.
+
23. 24.
Result Result
+
WebDesignDW.glencoe.com
WebDesignDW.glencoe.com Study with PowerTeach Go to the book Web site shown above. To review the main points in this chapter, select e-Review>PowerTeach Outlines>Chapter 17.
Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 17.
Result
HTML, Scripting, and Interactivity
489
CHAPTER 17
Activities
1. MAKING CONNECTIONS Social Studies—Create a Survey Form Your psychology class is exploring birth order and personality traits. Use a psychology textbook, library book, or the Internet to find a list of personality traits. Then create a survey form that asks people to identify their birth order (oldest, middle, or youngest) and select the traits that apply best to them. Create the survey form using HTML and test it in a browser.
2. STANDARDS AT WORK Students use productivity tools to collaborate in constructing technologyenhanced models, prepare publications, and produce other creative works. (NETS-S 3)
Debug Scripts Select a partner. You and your partner should then use Dreamweaver to create separate Web pages that contain JavaScript code. You may download the JavaScript code from a Web site (ask for your teacher’s permission before downloading anything from the Web!). 1. Test the page in a browser to make sure that the JavaScript code works correctly. 2. Replace one line of the script by keying the following: code replaced. Be sure to write down the exact script replaced. 3. Have your partner debug the JavaScript code by opening the page in a browser. See if your partner identifies the correct place where the JavaScript code has been removed. 490
Chapter 17
CHAPTER 17
Activities
3. TEAMWORK SKILLS Convert a Printed Form into an Electronic Form With your teacher’s permission, form a team. Have the team members find three printed forms that they have seen or used. As a team, select one form. Then, plan how to convert the printed form into an electronic form. Beside each element on the printed form, write the type of field that should be used. Use text areas only when the information truly cannot be selected in some other way. For example, many printed forms include a line or box to list the state. However, the list of states is known, and therefore should be included as a pull-down menu. Create the form in HTML. Test it in a browser and make changes and modifications as needed.
4. CHALLENGE YOURSELF Create a Dictionary of Terms The World Wide Web Consortium provides an HTML validator that can check HTML code and report errors. This tool is free of charge, but the results are not always easy to understand. ◆ With your teacher’s permission, go to the World Wide Web Consortium’s Web site at www.w3.org. Review the documentation provided about the HTML validator. ◆ As you read the material, write down at least five words or phrases that you do not clearly understand. For example, the word parse is used frequently in the documentation. Create a table with two columns and five rows. List each word or phrase in the left column of the table. ◆ Find a definition or description of each word or phrase you have written down, including the word parse. Use the information to complete the table. ◆ Use your table to create a Web page using HTML code that displays these words or phrases and definitions or descriptions. ◆ With your teacher’s permission, use the HTML validator to check the page you have created. Save your work and test it in a browser. Make changes or modifications, as needed, to the HTML code to improve the look of the table. HTML, Scripting, and Interactivity
491
CHAPTER 17
Projects
These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.
1. Create a Web Page with Audio in HTML
Build a Web page in HTML that contains two audio files. Locate two audio files that are related in some way. Write a short story or poem that incorporates these two audio files. Create a folder named Skills_17. In this folder, create a second folder named multimedia. Copy the two audio files into the multimedia folder. Open Notepad or another text editor. Create an HTML document that includes links to the two audio files within the text you have written. Use HTML to format the document. Proofread your work carefully. Save the file as an .html document in the Skills_17 folder. Open the file in a Web browser. Test the links to the audio files. Make any changes or improvements needed and test the file in the browser again.
2. Create a Ticket Order Form
492
To reduce long lines at tickets counters, the local sports team has placed order booths around the city. On paper, plan the order form. The form should include game dates, type of payment information, customer information, and the number of tickets desired (use the form on this page as a model). Open Notepad or another text editor. Use HTML to create the form. Save the form as an .html document. Open the file in a Web browser and test the form. Make any changes or improvements needed and test the form in the browser again.
Chapter 17
CHAPTER 17
Projects
Read the projects described below. Then follow the direction to complete each project.
1. Create a Survey Form A summer day camp staff is planning programs for next summer. They want to survey parents about what programs they would like to see offered. The possible types of programs include: art camp, soccer camp, baseball camp, bird watching camp, animal care camp, music camp, mystery adventure camp, swimming camp, and gardening camp. The staff is also open to ideas from the parents about other types of camp experiences. Use HTML to create a form that parents can complete online. You want to gather contact information from the parents, as well as their preferences for camp types. Test the form in a browser, making any changes or improvements as needed.
2. Use JavaScript to Add a Submit Button You will now add a Submit button to the form you created in Project 1 above. This Submit button will include a JavaScript function that will allow people to verify their information. ◆ Add the HTML code below to create the Submit button. Place this code after the last row in the community form.
HTML Code JavaScript
◆ Add the JavaScript shown at right to the head of your form code. This script will add interactivity to the Submit button. ◆ Carefully proofread your code. Test the HTML code in at least two browsers. Make corrections as needed.
HTML, Scripting, and Interactivity
493
Problem Solving: Use HTML and JavaScript You are part of a customer service group. People who need help may call or e-mail questions to your company. A representative is available 24 hours a day, seven days a week to respond. Create a Web page that advertises these services. 1. Create an HTML document that includes the JavaScript code (shown below) in its section. 2. Customize the script by replacing INSERT text here. with your own messages. 3. Write HTML code for the section of the page. The page should list the services you are offering in an unordered list. 4. Create a table that contains three answers to common customer problems. 5. Carefully proof your code. Test your site in at least two browsers. Make any needed changes.
Communication Skills: Create a Community Services Web Site Create a frames-based Web site that provides information about services available in your community, such as libraries, parks, hospitals, and community events. 1. Use a text editor to create the link bar page that will display in the left frame. The list of pages will include the home page, a community services page, a community connections page, and a parks and recreation page. 2. Create the content page for the home page (content pages will display in the right frame). Use WordArt or drawing tools to create a simple community logo. The page should also welcome visitors and describe what can be found at the site. 3. Create the container page that describes how the link bar page and the content page will display. 4. Create the links between the link bar and each of the content pages. 5. Create content pages for the remaining pages. The other content pages should contain brief descriptions of services available in your community, including contact information. 6. Proofread your HTML code carefully. Test your site in a browser. Make changes as needed. 494
Chapter 17
Create a Feedback Form Select a Web site that you have created for your Web design class and add a feedback form to the site. In this project, you will use your HTML skills to create the feedback form. 1. Create a feedback form page that will link to the home page of the site you have selected. Use Dreamweaver to create the new page and to add it to the site’s navigation scheme. 2. Switch to Code view. Create the form using HTML coding. Title the form Help Me Improve the Web Site. 3. Create the following statements and check boxes for responses:
What did you like about this Web site? ❏ Site design ❏ Color scheme ❏ Navigation ❏ Ease of use ❏ Hyperlinks
❏ ❏
Information structure
What did you NOT like about this Web site? ❏ Site design ❏ Color scheme ❏ Navigation ❏ Ease of use ❏ Hyperlinks
❏ ❏
Information structure
Content
Content
4. Create the following statement with radio (option) buttons for the response:
Rate my site: Excellent
Good
Needs improvement
5. Create a text area labeled Comments that people can use to write specific suggestions and ideas. 6. Include a statement at the bottom of the form that thanks visitors for responding. 7. Add code to make the form page consistent with the rest of the Web site. For example, you may want to add a background color or specify a particular font. 8. Test the form in a browser. Make sure that you can navigate to the form from the site’s home page. 9. Optional (with your teacher’s permission)—publish the finished Web site on your school or class Web site. 10. For your portfolio, include a screen shot and an electronic copy of your finished product.
HTML, Scripting, and Interactivity
495
Dreamweaver® Reference Guide Activities in this book can be completed using Dreamweaver MX 2004 and, with some modifications, Dreamweaver MX. The following guide identifies differences between the versions and lists which activities these differences might influence.
Dreamweaver MX versus Dreamweaver MX 2004 1. Page View Options View buttons function the same way in MX and MX 2004. However, the buttons are labeled Design, Code, and Split in MX 2004, and are not labeled in MX.
VIEW
DESCRIPTION
Design View
Lets you edit a page in a What You See Is What You Get environment.
Code View
Lets you examine and edit the HTML code for the page.
Split View
Shows Code view on the top of the screen and Design view at the bottom. Click on an element in Design view to highlight the corresponding HTML code.
2. Dreamweaver Interface There are some important differences between the MX and MX 2004 interfaces.
CATEGORY
DREAMWEAVER MX
DREAMWEAVER MX 2004
TEXTBOOK ACTIVITY
The Insert toolbar has been redesigned in MX 2004.
Insert toolbar has tabs allowing you to select different views.
Insert toolbar has drop-down arrow allowing you to select different views.
Used throughout activities.
The Insert toolbar allows users to customize a Favorites view in MX 2004.
Favorites view not available.
Can customize Favorites view with most often used buttons.
Used throughout activities.
Position of Document tabs that allow users to switch between open pages has changed in MX 2004.
Tabs that allow you to jump between open pages are located below document at bottom of screen.
Tabs that allow you to jump between open pages are located above document at top of screen.
Used throughout activities.
496
Appendix A Dreamweaver Reference Guide
3. Creating, Defining, and Publishing Sites In Dreamweaver MX, you use menus or panels to create or open Web site files. In MX 2004, you use the Start page to open existing sites, to create new sites, or to edit definitions.
Opens new blank HTML page
Opens more options, including templates
Allows user to define new site or edit an existing one
The differences between creating, defining, and publishing sites in Dreamweaver MX and MX 2004 are outlined in the table below.
CATEGORY
DREAMWEAVER MX
DREAMWEAVER MX 2004
TEXTBOOK ACTIVITY
To create a new blank page.
Choose File>New, select Basic Page from the Catalog list and HTML from the Basic Page list.
On Start page, under Create New, click HTML.
You Try It (YTI) Activity 2A, p. 49
To define a new site.
Choose Window>Site. On Site menu toolbar, select Site>New Site
On Start page, under Create New. Select Dreamweaver Site. OR click Site>Manage Sites and click New.
YTI Activity 2A, p. 49 YTI Activity 8A, p. 230 YTI Activity 12A, p. 337
To use a template to create a new page.
Choose File>New, select Templates tab.
On Start page, under Create New, click More. Select the Templates tab.
YTI Activity 7A, p. 193
To edit the site definition of an existing site.
Select Site>Edit Sites.
Select Site>Manage Sites.
YTI Activity 1B, p. 23 YTI Activity 11B, p. 318
To publish a site using FTP.
Can publish using passive FTP only.
Offers option to publish using passive or secure FTP.
Appendix A Dreamweaver Reference Guide
497
4. Formatting There are differences between MX and MX 2004 that influence how you copy and paste text between applications and how you format font sizes on a Web page.
CATEGORY
DREAMWEAVER MX
DREAMWEAVER MX 2004
TEXTBOOK ACTIVITY
To copy and paste text from Microsoft Word and Excel.
Pasted text does not retain fonts, colors, or formatting.
Pasted text and data retain fonts, colors, and formatting, using CSS.
Chapter 12, Skills Studio #2, p. 362
To change the font size in the Properties inspector.
In the Font Size drop-down menu, font sizes range from 1 to 7 and +1 to +7.
Font size choices range from 9 to 36 pixels and from xxsmall to larger.
YTI Activity 3D, p. 86
5. Images Dreamweaver MX 2004 contains limited Macromedia Fireworks capabilities that allow you to manipulate images. These capabilities are not present in Dreamweaver MX. Resample
Brightness and Contrast
Crop
Sharpen
The image capabilities available in MX and MX 2004 are outlined in the table below.
CATEGORY
DREAMWEAVER MX
DREAMWEAVER MX 2004
TEXTBOOK ACTIVITY
To crop or resample an image in Dreamweaver.
Cropping and resampling must be done in an external image editor.
Crop and Resample buttons appear in the Properties inspector when an image is selected (see above).
YTI Activity 8B, p. 233
To change the brightness, contrast and sharpness of an image.
The brightness, contrast, and sharpness of an image must be adjusted in an external image editor.
Brightness and Contrast and Sharpen buttons appear in the Properties inspector when an image is selected (see above).
YTI Activity 8C, p. 234
498
Appendix A Dreamweaver Reference Guide
6. Page Properties Dialog Box You use the Page Properties dialog box to specify a Web page’s layout, formatting, and other characteristics.
Categories
The table below outlines how the dialog box is different in MX and MX 2004.
CATEGORY
DREAMWEAVER MX
DREAMWEAVER MX 2004
TEXTBOOK ACTIVITY
To change the category on the Page Properties dialog box.
Does not contain separate box labeled Category. Enter title into Title text box at top of dialog box.
Under Category, select Title/Encoding to find the Title text box.
YTI Activity 4I, p. 117
To change the color of a Rollover link in the Page Properties dialog box.
Enter values for Links, Visited links, and Active links.
In Links category, includes Rollover links option.
YTI Activity 6H, p. 180
7. CSS While Dreamweaver MX automatically uses tables to lay out pages, MX 2004 uses CSS by default for page layout. Some of the CSS features available in MX 2004 are outlined below.
CATEGORY
DREAMWEAVER MX
DREAMWEAVER MX 2004
To see which CSS rules apply to a page.
Not available.
Relevant CSS tab in Tag Inspector panel shows which CSS rules apply to the current selection.
To create new CSS files.
In the New CSS Style dialog box, next to Type, choose Make Custom Style (Class).
In the New CSS Style dialog box, for Selector type, choose Class (can apply to any tag).
Browser validation (used to confirm that pages can be viewed by specific browsers).
Not available.
Documents are checked for CSS rules and tags compatibility. Click the Check Browser Support button on the Document toolbar to view any problems.
TEXTBOOK ACTIVITY
YTI Activity 12B, p. 338
Appendix A Dreamweaver Reference Guide
499
Windows versus Macintosh Commands The following table outlines some of the more frequently used Windows commands (and the corresponding Mac shortcuts) covered in this book.
ACTION
WINDOWS SHORTCUT
MACINTOSH SHORTCUT
Align>Center
Ctrl + Alt + Shift + C
Cmd + Option + Shift + C
Align>Justify
Ctrl + Alt + Shift + J
Cmd + Option + Shift + J
Align>Left
Ctrl + Alt + Shift + L
Cmd + Option + Shift + L
Align>Right
Ctrl + Alt + Shift + R
Cmd + Option + Shift + R
Bold
Ctrl + B
Cmd + B
Check links in the entire site
Ctrl + F8
Cmd + F8
Check selected links
Shift + F8
Shift + F8
Check spelling
Shift + F7
Shift + F7
Clear
Delete
Delete
Close
Ctrl + W
Cmd + W
Close All
Ctrl + Shift + W
Cmd + Shift + W
Close Window
Ctrl + F4
No shortcut
Copy
Ctrl + C or Ctrl + Insert
Cmd + C
Create new file
Ctrl + Shift + N
Cmd + Shift + N
Create new folder
Ctrl + Alt + Shift + N
Cmd + Option + Shift + N
Ctrl + X or Shift + Delete Ctrl + Q or Alt + F4
Cmd + X or Shift + Delete Cmd + Q or Option + F4
Find and Replace
Ctrl + F
Cmd + F
Get selected files or folders from remote site
Ctrl + Shift + D
Cmd + Shift + D
Insert Flash Files
Ctrl + Alt + F
Cmd + Option + F
Insert Image
Ctrl + Alt + I
Cmd + Option + I
Insert Named anchor
Ctrl + Alt + A
Cmd + Option + A
Insert Table
Ctrl + Alt + T
Cmd + Option + T
Italic
Ctrl + I
Cmd + I
Move to end of code
Ctrl + End
Cmd + End
Cut Exit/Quit
500
Appendix A Dreamweaver Reference Guide
ACTION
WINDOWS SHORTCUT
MACINTOSH SHORTCUT
Move to the next cell
Tab
Tab
New document
Ctrl + N
Cmd + N
Open an HTML file
Ctrl + O
Cmd + O
Open/close CSS Styles panel Shift + F11
Shift + F11
Open/close Files panel
F8
F8
Open/close Frames panel
Shift + F2
Shift + F2
Open/close Insert toolbar
Ctrl + F2
Cmd + F2
Open/close Layers panel
F2
F2
Open/close Properties inspector
Ctrl + F3
Cmd + F3
Open/close Results panel
F7
F7
Page properties
Ctrl + J
Cmd + J
Paste
Ctrl + V or Shift + Insert
Cmd + V or Shift + Insert
Preview in primary browser
F12
F12
Put selected files or folders to remote site
Ctrl + Shift + U
Cmd + Shift + U
Redo
Ctrl + Y
Cmd + Y
Reference
Shift + F1
Shift + F1
Replace
Ctrl + H
Cmd + H
Save
Ctrl + S
Cmd + S
Save as
Ctrl + Shift + S
Cmd + Shift + S
Select All
Ctrl + A
Cmd + A
Show/Hide panels
F4
F4
Show Rulers
Ctrl + Alt + R
Cmd + Option + R
Switch between Design and Code views
Ctrl + `
Cmd + `
Switch to Design view
Ctrl + `
Option + `
Undo
Ctrl + Z
Cmd + Z or Option + Backspace
Using Dreamweaver Help Topics
F1
F1
View site files
F8
F8
View site map
Alt + F8
Option + F8
Appendix A Dreamweaver Reference Guide
501
HTML Reference Guide The tables in this appendix contain common HTML tags (as used in Chapter 4) and advanced HTML tags (as used in Chapters 16 and 17).
How to Use the Tables ◆ Attributes associated with a tag are listed under the tag. ◆ “Italic text” that appears between quotes represents values such as numbers and colors that are selected by the programmer. ◆ “Non-italic text” that appears between quotes indicates specific values that the programmer cannot change. Common HTML Tags and Attributes
TAGS AND ATTRIBUTES
DESCRIPTION Tag set that marks the anchor, or clickable, portion of a hyperlink. Anchor content is specified between the anchor tags and can include text or an image.
href=“URL or file name”
Attribute that specifies the URL or file being linked to. Can also be used to create links to audio and video files.
target=“name of frame”
Attribute that tells the browser to load the target Web page into a specified frame (see advanced HTML table).
Tag set that offsets a paragraph from the regular body text, usually by indenting the paragraph’s left and right margins. Useful when formatting quotes or citations.
Tag set that marks the start and end of the Web page’s displayable content.
bgcolor=“selected color”
Attribute that specifies a page’s background color.
text=“selected color”
Attribute that specifies the text color for an entire Web page.
Empty tag that inserts a line break.
<EM>
Tag set used to display text between tags in italics.
Tag set that lets you specify the enclosed text’s characteristics.
502
color=“selected color”
Attribute that defines the font color used.
face=“selected font type”
Attribute that defines the font type (e.g., Arial) used.
size=“selected font size”
Attribute that defines the font size used. Possible numbers range from 1 to 7, where 1 is the smallest font size.
Appendix B HTML Reference Guide
Common HTML Tags and Attributes (cont.)
TAGS AND ATTRIBUTES align=“selected alignment”
DESCRIPTION Specifies heading level. 1 () is the largest heading and 6 () is the smallest heading.
Attribute used to define a heading’s alignment. Alignment values include: left, right, or center.
Tag set that defines the header area of an HTML document. Header information is not displayed on the Web page.
Empty tag that inserts a horizontal line.
Tag set that marks the start and end of an HTML document.
Empty tag that displays an image on a Web page.
src=“image file name”
Attribute that specifies the image’s source location. This attribute must be included in all image tags.
alt=“alternative text”
Attribute that gives the browser an alternative text message to display in place of a missing image. This attribute should be included in all image tags to make a site accessible.
align=“selected alignment”
Attribute used to wrap text around an image or to align an image on the page.
border=“selected number”
Attribute that specifies the pixel size of an image’s border.
width=“selected width”
Attribute that specifies an image’s width in pixels.
height=“selected height”
Attribute that specifies an image’s height in pixels.
Tag set that identifies a list item within an unordered (bulleted) or an ordered (numbered) list.
Tag set used to specify an ordered, or numbered, list.
Tag set that indicates the start and end of a paragraph.
align=“selected alignment”
Attribute used to define a paragraph’s alignment. Alignment values include: left, right, or center.
<STRONG>
Tag set used to display text between tags in boldface.
<TITLE>
Tag set that defines the Web page’s title, which is displayed in the Web browser’s title bar.
Tag set used to specify an unordered, or bulleted, list.
type=“selected bullet type”
Attribute used to specify the type of bullet used to display each list item. Types include disc, square, and circle.
Appendix B HTML Reference Guide
503
Advanced HTML Tags and Attributes
TABLE TAGS AND ATTRIBUTES
DESCRIPTION Tag set that marks the beginning and end of the table area.
align=“selected alignment”
Attribute that defines the horizontal alignment of the entire table. Alignments include: left, right, or center.
border=“selected width”
Attribute that creates a table border. The higher the border width number, the thicker the border.
bordercolor= “selected color”
Attribute that specifies the table border’s color.
cellpadding= “selected number”
Attribute that adjusts the space between a cell’s border and the cell’s content.
cellspacing= “selected number”
Attribute that adjusts the space between the outer border and a cell’s border.
width=“selected number”
Attribute that specifies a table’s width. Number can be in pixels or a percentage of the document’s width.
Tag set that marks the start and end of a table column.
colspan= “selected number”
Attribute used to merge cells horizontally. The number indicates the number of columns to be merged.
rowspan= “selected number”
Attribute used to merge cells vertically. The number indicates the number of rows to be merged.
align=“selected alignment”
Attribute that defines how the contents of a particular table cell will align. Alignments include: left, right, or center.
Tag set that defines a table header.
Tag set that marks the start and end of a table row.
align=“selected alignment”
Attribute that aligns the contents of all the cells in a selected row. Alignments include: left, center, and right.
FRAME TAGS AND ATTRIBUTES
Empty tag that defines each frame on a container page.
noresize
Attribute used to prevent users from resizing the frame.
src=“name of document”
Attribute that specifies file name that will display in the frame.
name=“name of frame”
Attribute on the container page that works with the target attribute to tell the browser which frame to open a page in.
504
DESCRIPTION
Tag set that defines the container page.
cols=“selected sizes”
Attribute that defines a frame page organized in columns. Number specifies the width of each column in pixels or as percentages. An asterisk (*) can be used to represent the remaining space on screen (e.g., cols=“45, *”).
rows=“selected number”
Attribute that defines a frame page organized in rows. Number specifies the height of each row in the page.
Appendix B HTML Reference Guide
Advanced HTML Tags and Attributes (cont.)
FRAME TAGS AND ATTRIBUTES
FORM TAGS AND ATTRIBUTES
DESCRIPTION Tag set that establishes an alternative layout for browsers incapable of supporting frames.
DESCRIPTION
Tag set that defines start and end of form.
Empty tag that defines a form element.
name=“selected name”
Attribute that defines the name of the form element.
type=“checkbox”
Attribute that defines a check box.
type=“radio”
Attribute that defines a radio button.
type=“text”
Attribute that defines a text box.
type=“submit”
Attribute that defines a Submit button.
type=“reset”
Attribute that defines a Reset button.
size=“number”
Attribute used to define the size of a text field.
Tag set that creates individual options in a form menu. Must be placed within the <SELECT> tag set. Attribute that specifies the initial value of a menu option. Tag set that defines a pull-down menu. Attribute that defines the menu’s name. Tag set that defines a text area.
cols=“selected number”
Attribute that defines a text area’s width.
name=“selected name”
Attribute that defines the text area’s name.
rows=“selected number”
Attribute that defines a text area’s height.
SCRIPT TAGS AND ATTRIBUTES <APPLET>
DESCRIPTION Tags that tell browsers that cannot read JavaScript to skip the code. Empty tag that inserts an applet into an HTML document.
height=“selected number”
Attribute used to define the applet’s height.
src=“name of program”
Attribute used to define location of applet.
width=“selected number”
Attribute used to define the applet’s width.
<SCRIPT>
Tag set that inserts a script into an HTML document.
Appendix B HTML Reference Guide
505
Web-Safe Color Reference Guide Using Colors on the Web As discussed in Chapter 7, not every monitor displays color in the same way. To avoid complications, you should select colors from the 216-color Web-safe color palette when formatting text, choosing backgrounds, and creating basic graphics for your site. Using this limited color palette (shown on the next page) helps ensure that colors will display properly no matter what computer system, monitor settings, or Web browser people use to view your pages.
The 16 Named Colors You can also use the World Wide Web Consortium’s 16 named colors to maintain color consistency across various platforms, monitors, and Web browsers. These 16 colors can be used by name in an HTML tag in place of a hexadecimal number. For example, both the tag and the tag can be used to define a green font color. The 16 named colors and their corresponding hexadecimal values are shown in the table below. 16 Named Colors Color Name
506
Hexadecimal Value
Aqua
#00FFFF
Black
#000000
Blue
#0000FF
Fuchsia
#FF00FF
Gray
#808080
Green
#008000
Lime
#00FF00
Maroon
#800000
Navy
#000080
Olive
#808000
Purple
#800080
Red
#FF0000
Silver
#C0C0C0
Teal
#008080
White
#FFFFFF
Yellow
#FFFF00
Appendix C Web-Safe Color Reference Guide
Example
The Web-Safe Color Palette Colors in the chart are notated in both their hexadecimal values for use in Web design programs and their RGB (red, green, blue) values for use in graphics programs. ◆ The first number/letter combination shown represents the color’s hexadecimal value. You can use hexadecimal values to select colors when creating HTML documents or when using Dreamweaver. ◆ The second set of numbers shown represents the color’s RGB value. Each of these numbers correlates to an intensity value of red, green, and blue as displayed on a monitor. For example, an orange color would have the RGB color designation of: red 255, green 102, and blue 51. FFFFFF R=255 G=255 B=255 FFCCFF R=255 G=204 B=255 FF99FF R=255 G=153 B=255 FF66FF R=255 G=102 B=255 FF33FF R=255 G=51 B=255 FF00FF R=255 G=0 B=255 CCFFFF R=204 G=255 B=255 CCCCFF R=204 G=204 B=255 CC99FF R=204 G=153 B=255 CC66FF R=204 G=102 B=255 CC33FF R=204 G=51 B=255 CC00FF R=204 G=0 B=255 99FFFF R=153 G=255 B=255 99CCFF R=153 G=204 B=255 9999FF R=153 G=153 B=255 9966FF R=153 G=102 B=255 9933FF R=153 G=51 B=255 9900FF R=153 G=0 B=255
These colors may appear differently on your monitor than they do here in print.
Appendix C Web-Safe Color Reference Guide
507
Web Design Rubric A rubric is a tool that you can use to evaluate Web pages and Web sites. The rubric in this appendix lists criteria that you can use to assess various aspects of Web site design. You can use the rubric to evaluate existing sites, or to evaluate your own sites. As you create a site, ask yourself the questions listed in the rubric. Then determine if your site rates as excellent, good, or poor. Revise your site as needed to improve its rating.
Web Site Evaluation Rubric CRITERIA
EXCELLENT (3)
GOOD (2)
POOR (1)
Information Design Is the site’s purpose clearly stated?
The site’s purpose is clearly stated.
The site’s purpose is understood but not strongly stated.
The site’s purpose is unclear.
Is all content current, accurate, and properly cited?
All content is current, accurate, and properly cited.
Some content is current, accurate, and properly cited.
None of the content is current, accurate, and properly cited.
Is the text logically organized and presented in short sections?
Text is presented in short sections and is logically organized.
Some text is presented in short sections and is logically organized.
Text is presented in long sections and its organization is unclear.
Has all the content been proofread and spell checked?
All content is proofread and spell checked.
There are minor problems with grammar and spelling.
Problems with grammar and spelling are strongly noticeable.
Does the site’s content, formatting, and color scheme support its purpose?
The site’s content, formatting, and color scheme supports its purpose.
Some of the site’s content, formatting, and color scheme supports its purpose.
None of the site’s content, formatting, and color scheme supports its purpose.
Is the site’s color scheme, layout, and formatting consistent?
The site’s color scheme, layout, and formatting is consistent.
The site’s color scheme, layout, and formatting is inconsistent in some pages.
The site’s color scheme, layout, and formatting is inconsistent in every page.
Does the page contain sufficient white space?
The page contains sufficient white space.
The page contains some white space.
The page contains insufficient white space.
Is text readable against the background?
Text is readable against the background.
Text is difficult to read against the background.
Text is unreadable against the background.
Is formatting used to emphasize important text?
Formatting is used to emphasize important text.
Formatting is sometimes used to emphasize important text.
Formatting is not used to emphasize important text.
Is important information displayed in the safe area?
Important information is displayed in the safe area.
Some of the important information is displayed in the safe area.
None of the important information is displayed in the safe area.
Presentation Design
508
Appendix D Web Design Rubric
CRITERIA
EXCELLENT (3)
GOOD (2)
POOR (1)
Interaction Design Do all internal and external hyperlinks work properly?
All internal and external hyperlinks work properly.
Not all internal and external hyperlinks work.
None of the internal and external hyperlinks work.
Can users move easily between pages?
Users can move easily between all pages.
Users can move easily between some pages.
Users cannot move easily between pages.
Can users locate specific information quickly?
Users can locate specific information quickly.
Users can locate specific information with some searching.
Users cannot locate specific information.
Can users easily return to the Web site’s home page?
Users can easily return to the Web site’s home page.
Users can easily return to the Web site’s home page from some pages.
Users cannot easily return to the Web site’s home page from any page.
Multimedia and Interactivity Does every element enhance the site and promote usability (i.e., buttons change colors to let users know when something is clicked)?
All elements enhance the site and promote usability.
Some elements enhance the site and promote usability.
None of the elements enhance the site and promote usability.
Do users clearly know how to use all interactive elements?
Users clearly know how to use all interactive elements.
Users know how to use most interactive elements.
Users do not know how to use any interactive elements.
Are all form elements and links clearly labeled?
All form elements and links are clearly labeled.
Some form elements and links are clearly labeled.
None of the form elements or links are clearly labeled.
Does every multimedia and interactive element work properly in a variety of browsers?
All multimedia and interactive elements work properly in a variety of browsers.
Some multimedia and interactive elements work properly in a variety of browsers.
None of the multimedia and interactive elements work properly in a variety of browsers.
Does the site display properly in a variety of different browsers at different resolutions?
Site displays properly in a variety of different browsers at different resolutions.
Site displays properly in some different browsers at different resolutions.
Site does not display properly in different browsers at different resolutions.
Are both graphic and text links included?
Both graphic and text links are included.
Some text links are included.
No text links are included.
Does a frames site offer alternatives to help users whose browsers do not support frames?
Frames site offers the option to help users whose browsers do not support frames.
Frames site offers some alternative to help users whose browsers do not support frames.
Frames site does not offer any alternative to help users whose browsers do not support frames.
Does every frame in a frames-based site have a logical title?
All frames in a frames-based site have a logical title.
Some frames in a framesbased site have a logical title.
None of the frames in a frames-based site have a logical title.
Is alternative text provided for all non-text items?
Alternative text is provided for all non-text items.
Alternative text is provided for some non-text items.
Alternative text is not provided for any non-text items.
Does every page download quickly for the target audience?
All pages download quickly for the target audience.
Some pages download quickly for the target audience.
None of the pages download quickly for the target audience.
Usability and Accessibility
Appendix D Web Design Rubric
509
A absolute link A type of link that contains the complete URL or path of the file being linked to. (p. 112) Acceptable Use Policy (AUP) See Internet Use Agreement. (p. 84) access control A security measure in which a site’s availability is restricted to a specific set of authorized users. (p. 433) accessibility Hardware and software options that allow differently abled individuals to access and use Web pages. (p. 353) accessibility option A feature that allows differently abled individuals to access and use Web pages. (p. 73) accessibility standards A series of accessibility features that make it easier for users to understand, scan, and respond to elements in a Web site. (p. 353)
applications See application software. (p. 41) archiving The process of saving and storing old Web pages and their components. (p. 432) aspect ratio The relationship between an image’s height and width. (p. 231) attribute An HTML instruction that is included in an HTML tag to specify a characteristic of a Web page element. (p. 104) audio Live, streamed, or recorded sound; often used on Web pages to attract visitors’ interest and to impart information. (pp. 12, 252)
B backup A copy of a specific set of data, usually stored in a different place such as a tape, CD-ROM, or another hard drive. (p. 426) banner ad An advertisement that, when clicked, takes the visitor to the sponsor’s home page. (p. 283)
active button A clicked button that is in the process of doing something such as transferring the user to another Web page. (p. 177)
bitmap (BMP) A graphic file format that supports millions of colors and tends to download slowly. (p. 225)
alignment The position of text on a page, such as left, right, or center. (p. 204)
blog A public journal in which one or more individuals share their thoughts on a variety of subjects. (p. 376)
alternative text Text used in place or in addition to audio, video, and graphic Web elements to assist differently abled individuals. (p. 354) analog video recorder A device that creates analog video. This video must be translated into a digital format before a computer can use it. (p. 261) anchor tag An HTML tag used to create hyperlinks. The tag identifies what is clicked on and where it links to. (p. 110) animated GIF A sequence of GIF images that are all stored in a single file along with an image transition delay value that controls the amount of time each image will stay on the screen. (p. 477)
Boolean search A type of search that combines keywords in specific ways to locate specific pages. (p. 76) border A visual break on the page that is used to add visual interest and to separate elements. (p. 120) budget The total financial resources available for a Web site’s development. (p. 326) bulleted list See unordered list. (p. 106) bulletin board An online area where users can exchange messages. (p. 377)
animation The movement of text and graphics; a common feature on the Web. (pp. 12, 253)
business-to-business (B2B) e-commerce Electronic exchanges in which both parties are businesses. (p. 323)
application software Computer programs that allow users to perform a specific task on the computer; also referred to as applications. (p. 41)
business-to-consumer (B2C) e-commerce Electronic exchanges between businesses and individual consumers. (p. 323)
510
Glossary
C cascading style sheet (CSS) A style sheet that consists of code that defines formatting and layout settings for HTML tags in a single location. (p. 338) case sensitive Distinguishing between file names that contain uppercase and lowercase letters and those that contain only lowercase letters. (p. 399) cell Each individual square within a table; the intersection of a column and a row. (p. 175) cell padding The space between a table cell’s border and its content. (p. 451) cell spacing The space between the outer border of a table and the cell border. (p. 451) check box A form field option that allows visitors to choose as many items from a list as they desire. (p. 344) class selector A selector that applies the same attribute to any HTML element that references it. Can be used multiple times in an HTML document. (p. 463) client In a network, the individual computers that are part of that network. (p. 45) In a Web site development team, the person or organization that contracts and pays for the work. (p. 314) client liaison representative The project team member who maintains contact with the client throughout the Web site development process. (p. 314) client-side script A script that is executed by the user’s Web browser. (p. 483) closing tag See ending tag. (p. 98) codec Compression and decompression scheme used with streaming media; the Web server breaks the transmission into pieces allowing the media to display more quickly on the user’s screen. (p. 253) color palette A menu of colors available in the Dreamweaver program. (p. 116) color scheme A set of selected colors used consistently for a Web site’s interface elements, such as title graphics, navigation buttons, and background. (p. 198) column Cells in a table that are arranged vertically. (p. 175)
commercial software Software that is developed and distributed with the intention of making a profit. (p. 85) Common Gateway Interface (CGI) A type of script that provides a link, or interface, between an external application and a Web server. This link allows the Web server to pass a user’s request to an application program and then return information to the user. (p. 279) conditional statement A type of code that allows a script to respond differently depending on the action taken by the user. (p. 484) consistency A similarity among parts of a whole; a rule that encourages designers to use similar design elements throughout a site. (p. 192) container page Page that defines the characteristics of each page in a frames-based site. (p. 457) content The text and graphics included on a Web page. (p. 162) content page The page that contains the main information on a frames-based site and fulfills the site’s main purpose. (p. 458) cookie A small data file that a Web site writes to a visitor’s hard drive containing personal information such as login or registration information. (p. 348) copyright A law that asserts that only the copyright’s owner has the right to sell his or her work or to allow someone else to sell it. (p. 86) cropping To remove portions of an image that you do not want to use. (p. 231) cross-platform testing The process of testing Web sites on a variety of computer hardware and software configurations to make sure that the site will function properly for different users. (p. 403)
D data encryption Security measure in which sensitive information is encoded and decoded as it is transferred across the Internet. (p. 351) database A collection of information that is organized by fields and records for easy retrieval. (p. 368) database driven Dynamic page that uses a database for its source of information. (p. 368) database interface page A Web page that connects to and interacts with a database. (p. 368) Glossary
511
debugging The process of locating and correcting any obvious errors in a Web site’s HTML code. (p. 113)
event handler The part of the script that responds to an event and defines the action that will occur when the event takes place. (p. 484)
digital camera A photographic device that saves images in a digital format so they can be easily used on the Web. (p. 229)
Extensible Hypertext Markup Language (XHTML) A markup language that is designed to bridge the differences between HTML and XML. (p. 280)
digital certificate A document issued by an independent certification authority that confirms a business’s credentials. (p. 352)
Extensible Markup Language (XML) A markup language whose tags impose a specific structure and meaning on data without providing any information about how the data should be displayed. (p. 280)
digital video recorder A device that creates digital video that a computer can use directly. (p. 261) direct server update The act of updating or revising a Web site’s files directly on the Web server where the site resides. (p. 430) directory structure A hierarchy used to organize folders and the files contained in the folders; also called folder structure. (p. 400) Document window Interface element that displays the user’s current document. (p. 22) domain name Part of a URL that identifies the entity (such as a university, individual, or business) that sponsors the Web site. (p. 72)
external hyperlink A hyperlink that takes a user to a page on a different Web site. (p. 81) external style sheet A style sheet containing format and layout settings that is stored in a separate file. (p. 339) external Web hosting When a company pays another business to host its Web sites. (p. 397) extranet A type of network that can be accessed by outside or remote users who are authorized to use the network. (p. 70)
F
domain name extension Part of the URL that tells users what type of organization uses the address. (p. 72)
fair use Allows for small portions of a copyrighted work to be used for educational purposes. (p. 86)
dots per inch (dpi) A definition of resolution that defines the number of pixels created for every linear inch of an image, such as 600 dpi. (p. 229)
feedback form A form that allows customers to voice their opinions, comments, and suggestions, and can help to cement a relationship between the customer and the business. (p. 342)
download To transfer data from a file server to a client (user) machine. (p. 401) draw program A type of software application such as PhotoDraw that is used to create vector graphics. (p. 229)
E e-commerce The electronic buying and selling of goods and services. (p. 322) empty tag An HTML tag that requires only an opening tag; also known as an orphan tag. (p. 99) ending tag The last of a pair of HTML tags; also known as a closing tag. (p. 98) event Anything that causes an effect to occur; often triggered by user action. (p. 484)
512
Glossary
field A form component that allows the user to enter information into the form. A form field often corresponds to a field database. (p. 292) file Contains information, such as text, graphics, video, or animation, that is stored on computer hardware. (p. 6) file management The process of creating, naming, moving, updating, and deleting files on a computer system. (p. 430) file name The name of the HTML document that makes up the Web page itself. (p. 148) file name extension The three or four characters after a period in a file name that tell the computer system what type of file it is reading. (p. 103) File Transfer Protocol (FTP) Provides a standardized method of uploading and downloading files on the Internet. (pp. 68, 401)
Files panel A Dreamweaver interface element that enables users to manage and navigate the files and folders in a Web site. (p. 22) folder An item that helps the user organize files. (p. 48) folder structure See directory structure. (p. 400) font A family of letters, numbers, and other symbols that share a consistent style. (pp. 51, 202) footer The bottom portion of a Web page; usually contains date information, copyright information, contact information, and text links. (p. 179) form A structure that includes fields for collecting data from visitors to a Web site. (p. 292) format The way text characters look on a page. (p. 51) formatting Determining the font sizes, colors, styles, typefaces, and alignments to use on a page. (p. 202) frame A separate region on a Web page that contains its own HTML document. (pp. 380, 486) frameset A shell page in a frames site that contains information about the size and placement of the frames within the site. (p. 381) freeware Software that can be freely copied and used for any legal purpose. (p. 85) frequently asked questions (FAQ) A list of questions and answers to questions that visitors are likely to have about the Web site, the business, or a company’s products. (p. 373) FTP See also File Transfer Protocol. (pp. 68, 401) function In JavaScript, code that performs a specific task or action. (p. 484)
G GIF (Graphic Interchange Format) A graphic file format that can save only a maximum of 256 colors. (p. 225) GIF animation A simple type of animation file in which individual GIF images are displayed one after the other. (p. 265) global access control A security measure in which groups of users are granted or denied access to computer system data; different groups of users are often given different levels of access to system data. (p. 435)
graphic A drawing, chart, diagram, painting, or photograph stored in a digital format. (p. 12) graphic link A type of link in which users click an image to activate the link. (p. 111) graphical user interface (GUI) Type of interface that allows users to interact with software by selecting words, symbols, or graphics from a desktop. (p. 40) guest book A public record of comments from visitors to a Web site. (p. 377) GUI See graphical user interface. (p. 40)
H hard drive mirroring Writing data to more than one hard drive at the same time; ensures reliability and keeps Web servers fully functional at all times. (p. 425) hardware The physical components of the computer. (p. 6) header column Column in a table that contains the titles for each row. (p. 452) header row Row in a table that contains the titles for each column. (p. 452) hierarchical navigation scheme Type of navigation plan in which pages are arranged in levels from top to bottom, with the topmost level being the Web site’s home page. (p. 141) hit counter A dynamic Web component that records how often a file is accessed from a Web server. Each file on a Web page counts as one hit. (p. 366) home page The main page on a Web site that contains general information about the site, such as an introduction and a list of the other available pages; generally the first page a visitor sees. (p. 7) host The name of the Web server on which a particular Web site resides. (p. 395) hotspot A graphic link to a related page or another area on the current page. (p. 237) hot-swappable hard drives System used by some Web servers that contains multiple hard drives; allows a Webmaster to replace one drive for another in case of failure of the drive. (p. 425) hover button A navigation button that changes appearance when touched by a mouse pointer. (p. 177) Glossary
513
HTML See also Hypertext Markup Language. (p. 98) HTML editor See text editor. (p. 78) HTML tag Text contained between two angle brackets (< >) that tells the Web browser how to display a page’s content. (p. 98) HTTP See also Hypertext Transfer Protocol. (p. 68) hyperlink A way to link Web pages together and allow users to move from one online location to another. Link may consist of text or a graphic. (p. 13)
intellectual property Creative works created and owned by individuals such as authors, software developers, and musicians. (p. 86) interaction design Part of the Web site design process in which you determine how the user is likely to navigate through the site. (p. 16) interactive button Type of button that changes to let users know that an action has taken place; also called a dynamic button. (p. 177)
Hypertext Markup Language (HTML) The code used to create Web pages. (p. 98)
interactivity Allows communication between the visitor and the Web page; the user can perform an action that the Web page responds to. (p. 278)
Hypertext Transfer Protocol (HTTP) Used to transfer files from a Web server to a Web browser. (p. 68)
interface Means by which a user interacts with a computer or a computer program. (p. 22)
I id selector A selector that identifies only one element within an HTML document. Always preceded by a # sign. (p. 463) image editing program A type of software application such as Fireworks used to create raster graphics. (p. 229) image map A graphic with clickable areas called hotspots that link to another page or to another area on the same page. (p. 237) incremental backup Copies only the data that has changed since the last full backup to the backup device. (p. 426)
internal style sheet A style sheet that embeds CSS information within an individual Web page. (p. 338) internal Web hosting When a company uses its own Web server to host its Web site. (p. 397) Internet Hardware, such as computers, cables, and telephone wires, that is connected to create a massive worldwide network. (p. 6) Internet service provider (ISP) A business that provides a network to customers that they use to access the Internet. (p. 67) Internet Use Agreement Used by organizations such as schools and businesses to regulate online use. Also called Acceptable Use Policy or AUP. (p. 84)
information design Part of the Web site design process in which you determine the content that will appear on each page. (p. 16)
InterNIC A Web site providing information about the Web name registration process; it is hosted by the Internet Corporation for Assigned Names and Numbers (ICANN), which assigns Web site names and IP addresses. (p. 399)
inline graphic Created by storing a picture in an electronic format on a hard drive and inserting the graphic into a Web page. (p. 230)
intranet A LAN or WAN that is designed to make it easy to share information within an organization, such as a business or a school. (p. 70)
input device Tool used to enter data into a computer, such as the keyboard and mouse. (p. 38)
inverted pyramid A type of narrative structure that places the most important information at the beginning of a story, where it will best catch the reader’s attention. (p. 164)
inspector Dreamweaver interface element that provides information about Web page items. The Properties inspector is a commonly used type of inspector. (p. 22) instant storefront A portal site that provides easy-to-use screens that walk businesses through the process of creating their own Web sites. (p. 326)
514
Glossary
J Java applet A short Java code program that runs in a browser. (p. 279)
JavaScript A scripting language used to enhance the capabilities of Web programming by allowing the creation of special effects such as fading backgrounds and button rollovers. (p. 279) JPEG (Joint Photographic Experts Group) A graphic file format that can support millions of colors; preferred format for saving photographs. (p. 225) jump menu A dynamic menu that allows the user to access hyperlinks from a single drop-down menu. (p. 297)
K keyword An important word related to the specific topic you are trying to locate. (p. 76)
L
lossless compression A compression scheme in which a graphic file loses no data when it is compressed. (p. 226) lossy compression A compression scheme that removes data from a graphic file so that the file is significantly smaller and downloads more quickly in a Web browser than one saved with lossless compression. (p. 226)
M Macromedia Flash A sophisticated animation formation, usually carrying a .swf extension. (p. 265) Map view Dreamweaver view used to examine a Web site’s navigation structure. (p. 143) markup language A text file that contains special sequences of characters that function as tags, such as HTML, XML, and XHTML. (p. 280)
label Text that tells the user what type of information to enter into a form’s field. (p. 292)
menu bar Interface element that features dropdown menus that contain related options. (p. 22)
layer A container within an HTML page that can include objects such as text, images, and forms. (p. 288)
meta tag A piece of HTML code that the Web author places in the page document to help search engines categorize the page; does not affect how the site is displayed. (p. 412)
left-hand navigation A frames-based Web site with a link bar on the left side of the screen. (p. 457) linear navigation scheme Type of navigation plan in which every page exists at the same level; each page in the site is accessed from the one before it. (p. 142) link bar A related group of horizontally or vertically aligned links; also known as a navigation bar or table of contents. (p. 177) Link Checker report A tool that identifies broken links within a site or particular file. (p. 407) link trading An agreement between Web site publishers to display a link to each other’s sites; inexpensive way to publicize Web sites. (p. 411) local area network (LAN) Type of network that connects computers in a single location, such as a single department within a company. (p. 43) local client update The process of revising Web pages by copying the files from the Web server to a local (client) workstation, updating the files on the local workstation, and uploading the revised files to the Web server. (p. 430) logo A symbol used to represent a business or an organization. (p. 174)
milestone A specific step in the Web site development process and the date for its completion. (p. 314) mission statement A brief statement that describes the purpose and audience of a Web site. (p. 136) multimedia The integration of elements such as graphics, text, audio, video, animation, and interactivity by means of computer technology. (p. 252) multimedia authoring tool Special software applications used by Web site designers and developers to create multimedia Web sites. (p. 255)
N named anchor A hyperlink to a specific place in another document or to a specific place within a document. (p. 373) navigation button A button that users click to locate additional information and to navigate to other Web pages. (p. 177) navigation scheme The plan that determines how Web pages will relate to each other within a Web site. (p. 140) Glossary
515
nested tag An HTML tag that is enclosed within another set of tags. (p. 99) netiquette General guidelines that have developed over the years to guide Internet interactions. (p. 85) network A system in which communication lines or wireless connections are used to connect computers together. (p. 43) newsletter A method of staying in touch with a Web site’s users, usually includes news, information, and updates about a particular topic. (p. 375)
O
parent-child relationship In a hierarchical navigation scheme, a page that is connected to another page; the page that is on the level above is the parent, and the page that is on the level below is the child. (p. 141) password A set of letters or numbers that a user enters to gain access to a Web site. (p. 433) peer-to-peer relationship In a hierarchical navigation scheme, two or more child pages with the same parent page. (p. 141) photo album A collection of photographs with brief descriptions. (p. 240)
object In JavaScript, an element in a browser window; it can have properties that define it. (p. 483)
pixel A single point in a graphic image; short for picture element. (pp. 169, 203)
opening tag See starting tag. (p. 98)
plug-in An application that works with a Web browser to play a particular file format, such as an audio or video file. (p. 259)
operating system (OS) Program that specifies how the computer receives and processes input; acts as an interface between a user and the computer hardware. (p. 40) ordered list A type of list that contains items, usually numbered, that must appear in a particular sequence. (p. 106)
Portable Network Graphics (PNG) A graphic file format that supports more colors and transparency than GIF files, and is currently becoming a more popular format. (p. 225)
orphan tag See empty tag. (p. 99)
presentation design Part of the Web site design process in which the user determines the physical appearance of the site’s pages. (p. 16)
orphaned file A file that does not link to other files on a site. (p. 407)
privacy The ethical online collection and use of visitors’ personal information. (p. 348)
output device Tool that lets users examine the results of processed data, such as a monitor, printer, or speakers. (p. 38)
privacy policy A written statement that outlines what information the site collects about visitors and explains how that information will be used. (p. 349)
P page header Page element that contains graphics and/or text, such as a site’s logo and title graphic, and helps users identify where they are in a Web site. Also called page banners. (p. 196)
project manager The project team member who oversees the work of all the team members and ensures that team members work together. (p. 314) protocol A set of rules and procedures that specify how data are formatted and transmitted between computer systems. (p. 68)
page title The name that appears in the title bar when the Web page is displayed in a browser. Also called page name. (p. 148)
proximity The closeness of elements on a page that can cause readers to make assumptions about how elements relate to each other. (p. 168)
page view Records how many times a Web page was visited. (p. 366)
publicize The process of letting the general public know that your Web site exists and telling them how to access it. (p. 410)
panel Element of Dreamweaver interface that contains tools and commands that users can use to manipulate their workspace. (p. 22)
516
Glossary
publish To transfer files from a local computer to a remote Web server so that the Web site can be viewed over the Internet. (p. 394)
pull-down menu An interactive element that looks like a text field, but operates like a set of option buttons in that users can choose only one item from a list of options; also known as a drop-down menu. (p. 479)
R radio button An interactive control that allows a user to select only one option from a list of options; also known as an option button. (pp. 344, 478) random-access navigation scheme A type of navigation plan in which a site’s pages are not organized in any particular order. (p. 142) raster graphic A graphic made up of pixels; also known as a bitmap. (p. 224) record A group of related fields in a database that contain all the information gathered about a particular person or product. (p. 368) relative link A type of link that is used when linking to a local file, such as one within the same Web site. (p. 111) repetition Design rule that encourages designers to duplicate specific elements on all (or most) of a site’s pages to make the site more user-friendly. (p. 192) reports Tools that help Web developers find errors and maintain their Web sites more easily. (p. 405) resampling Changing the number of pixels in a graphic file to match the new screen area occupied by the image; this changes the size of the graphic file. (p. 232) resizing Changing the size of the image as it appears on the screen without changing the file size of the graphic. (p. 231) rollover button A button that changes appearance when the mouse pointer passes over it. (p. 283) root folder The main folder on a Web site that contains all of the site’s other files and folders. (p. 48) row Cells in a table that are arranged horizontally. (p. 175) RSS (Really Simple Syndication) A content feed that allows syndicated Web content to be published on several different Web sites. (p. 376)
S safe area Amount of space available on every Web browser and system combination; generally defined as 640 x 480 pixels, the size of the smallest monitor available. (p. 169) sans serif A font that does not have special adornment at the end of letters or numbers. (p. 206) scanner A piece of hardware that converts a printed image into a digital format that can be used on a Web page. (p. 229) scope In a Web site development project, the features and content on a Web site that can be provided with the time and resources available. (p. 321) screen resolution The amount of pixels that a monitor can display; measured by width and height such as 640 x 480. (p. 169) script A short program that you can insert into HTML code using special tags; expands the capabilities of HTML to create dynamic Web pages. (p. 278) search capabilities A Web site feature that allows visitors to find specific words or phrases in the site’s content. (p. 372) search engine An application that locates information about Web pages and then stores this information in searchable databases that you can access from your browser. (p. 75) security The protection of data from unauthorized access, both on the Web server and during transmission over the Web. (p. 351) selector Part of HTML code that contains properties and corresponding values within curly braces that control the appearance of HTML elements. (p. 463) serif Font that has an extra line or curve on the ends of certain letters or numbers. (p. 206) server A powerful central computer that manages files and services for a network. (p. 45) server-side script A script that is executed on the Web server, with the output transferred to the user’s computer as a Web page. (p. 485) shareware Copyrighted software that an author allows to be freely distributed. (p. 85) site map A list of categories that organizes the content of large Web sites. (p. 371)
Glossary
517
software The set of instructions that tells the computer what to do. (p. 40) source code The text and HTML commands used to create the Web page. (p. 101) source control A Dreamweaver feature that protects the integrity of the Web site’s files by ensuring that only one person at a time can edit a particular file. (p. 318) spam Unsolicited e-mail messages. (p. 410) SSL (Secure Socket Layer) Data encryption method commonly used by Web site publishers because its algorithm is specifically designed to protect data transmitted across the Internet. (p. 351) starting tag The first of a pair of HTML tags; also known as an opening tag. (p. 98) status bar Interface element that provides information such as the estimated download time of the current page. (p. 22) storyboard A visual representation of a Web site and its pages. (p. 146) streaming media A downloading process that shortens the user’s wait time by breaking the transmission into small pieces. (p. 253)
template A reusable pattern that helps you place information quickly and efficiently on a Web page. (p. 171) testing The process of repeatedly checking the Web page and site to make certain that elements display as designed. (p. 113) text Consists of words, letters, numbers, and other symbols. (p. 12) text area A form field that will expand to allow visitors to enter any length comment; also known as a scroll box. (pp. 342, 479) text editor An application used to enter and edit the HTML code in a Web page. (p. 78) text link A type of link in which users click text to activate the link. (pp. 111, 180) thumbnail A small image that links to a larger version of the same image; lets users decide if they want to view the larger image, which takes longer to download. (p. 240) title bar Interface element that displays information such as the name of the current document in the Document window. (p. 22) title graphic An image that appears at the top of every page on a Web site. (p. 174)
subfolder A folder contained within a folder, used to further organize files. (p. 48)
toolbar Interface element that allows the user to select options by clicking a button. (p. 22)
subpage A page that is a child of another page. (p. 55)
top navigation A frames-based Web site with a link bar at the top of the screen. (p. 459)
T table An item consisting of columns and rows that is used to organize a Web page’s content. (p. 175) table of contents A Web site element that allows visitors to see the contents and organization of the site in one glance; similar to the table of contents of a book. (p. 372) target audience The main group of people that you want to visit your Web site. (p. 137) Target Browser Check A Dreamweaver feature that allows users to specify which types and versions of browsers they can check their site against. (p. 408) target market The potential customers for the product or service that you are selling; often defined by characteristics such as age, income, and interests. (p. 323) 518
Glossary
top-level page The highest level in a hierarchical navigation structure; usually the home page. (p. 141) tracking software Records information about Web site visitors such as what browser they used, how they navigated to the site, and what country they are from. (p. 367) trademark A name, symbol, or other feature that identifies a product with a specific owner. (p. 86) Transmission Control Protocol/Internet Protocol (TCP/IP) Basic Internet protocol that contains the specific information that allows computers to identify each other and exchange data. (p. 68) typography The style, arrangement, and appearance of text. (p. 202)
U uniform resource locator (URL) A unique address that enables a browser to locate specific page files on the Web. (p. 71)
Web server A powerful computer that maintains a constant connection to the Internet; stores Web pages and makes them available on the Internet. (p. 394)
unique visit Records how many people visit a Web site overall. (p. 367)
Web server cluster System that stores a Web site on multiple physical computers that act as a single virtual host. (p. 396)
unordered list A list that contains items that can appear in any order; also known as a bulleted list. (p. 106)
Web site A group of related files organized around a common topic; the files may include Web pages, graphics, audio, and video. (p. 7)
upload To transfer data from a client computer (user) to a server. (p. 401)
Web site development application Sophisticated application package that some Web developers use to create Web sites. (p. 78)
URL See uniform resource locator. (p. 71) user authentication The process of checking the password the user enters against the one assigned to the user. (p. 433)
V Validation report A tool that checks a site’s files to ensure they meet the W3C standards. (p. 406) variables Used by scripts to identify a value that will change when the script is executed. (p. 484) vector graphic A graphic composed of simple lines defined by mathematical equations. (p. 224) video Live or recorded moving images. (p. 12) video capture card A circuit board that can convert analog video to digital video. (p. 261)
W Web author Person who writes the text that will appear on each Web page. (p. 18) Web browser Software application that interprets files to display Web pages on the user’s computer. (p. 7) Web designer Person who focuses on the look and feel of the Web site. (p. 18)
Webmaster Person who manages and maintains Web sites. (p. 19) Web-safe colors The 216 colors that display consistently from computer to computer giving Web designers some control over their pages’ appearance. (p. 199) white space An area on a Web page without any content. (p. 168) wide area network (WAN) Network that connects computers across a wide geographical area, such as a region of the United States. (p. 43) World Wide Web Software that sends information that is stored in files along the Internet’s hardware. (p. 6) WYSIWYG Applications that allow you to create Web pages so that what you see on the screen is very similar to the appearance of the final page; stands for “what you see is what you get.” (p. 78)
X XHTML See Extensible Hypertext Markup Language. (p. 280) XML See Extensible Markup Language. (p. 280)
Web developer Person who uses programming skills to develop Web sites. (p. 18) Web host A business that provides Web server space to customers for a fee. (p. 395) Web hosting service Service that sells Web server space, usually for a monthly fee. (p. 80) Web page A single file within a Web site that has a unique name. (p. 7)
Glossary
519
A Absolute link, 112 using HTML to insert, 112 Absolute positioning, 465 Acceptable Use Policy (AUP), 84. See also Internet Use Agreement Access control, 433 global, 435 Accessibility, 73, 353 and alternative text, 354 and guidelines, 282, 354 and online content, 354 validating, in Dreamweaver, 355 Accessibility Standards, 353 Accountability, leadership and, 257 Active button, 177 Active server page (.asp), 369 Adobe Photoshop, 79, 231 Aligning text, 168 Alignment, 204 in tables, 452–453 Alternative text, accessibility and, 354 Analog video recorder, 261 Anchor, named, 373–374 Animated GIF, 477 Animation, 12, 253 adding, to a Web site, 265–268 design guidelines, 253 Animation file creating and using, 265–268 incorporating, in a Web site, 266 Antivirus program, 347 Apple QuickTime, 79, 259 Application software, 41 audio, 79 graphics, 79 text, 79 video, 79 Web page component, 79 Archiving (for Web pages), 432 ARPANET, 66 Aspect ratio, 231 Attribute, 104 adding, 104–106 alignment, 105 background, 105 font color, 105 heading, 105 HTML reference guide, 502–505 image, 109 table, 451–454
520
Index
Audio, 12, 252 design guidelines, 252 forms of, 12 input devices, 38 Audio file adding using HTML, 476 background sound, 260 creating and adding, to a Web site, 260–262 editing applications, 79, 255 formats, 258 playing, 79 using HTML to add, 476 AUP. See Acceptable Use Policy Automated updates, 431
B B2B. See Business-to-business e-commerce B2C. See Business-to-consumer e-commerce Background color adding, in Dreamweaver, 116 adding, in HTML, 105 Backup, 426 incremental, 426 Bandwidth, 44 alternatives, 227 calculating, 396 Banner ad, 283 inserting, 284 Behaviors panel, 286 Berners-Lee, Tim, 66, 236 Blended attacks, 347 Blogs, 376 Boolean operator, 76 Boolean search, 76–77 Border, 120 Broadband connection, 44 Broken links, checking for, 407–408 Browsers. See Web browsers Budget, 326 Bulletin boards, 377 Business plan, 370 Business-to-business e-commerce, 323 Business-to-consumer e-commerce, 323, 336 Buttons view of, 496
C Cable connection, 44 Careers mapping a path for, 20 Web site development, 18–19 Cascading style sheet (CSS), 282, 338, 499 modifying, in Dreamweaver, 340 page layout using, 465 use of, in HTML document, 462–466 using to modify a form element, 480 Case sensitivity, 399 and HTML, 100 and publishing Web files, 399–400 Cell(s), 175 merging, in HTML, 452 split into Dreamweaver, 200 Cell padding, 451 Cell spacing, 451 Central processing unit (CPU), 37 CGI. See Common Gateway Interface Character widths, 294 Chat room, 69 Check box, 293 adding, in Dreamweaver, 344–345 adding, in HTML, 478 Checklists, 317 Children’s Online Privacy Protection Act (COPPA), 348 Citing online sources, 88 Class selector, 463 Client in a client/server network, 45 in Web development project team, 314 Client liaison representative, 314 Client-server network, 45 Client-side script, 483–486 Clip Art, 228 Codec, 253 Collaborating as sharing ideas, 320 Color adding, in Dreamweaver, 116 choosing a color scheme, 198 selecting background, 116 Web-safe, 199, 506–507 Column, 175 Common Gateway Interface (CGI), 279, 485
Communication and good managers, 257 hardware, 424 software, 425 Community, building a sense of, 375–379 Compression scheme and download times, 226–227 lossless, 226 lossy, 226 Compression/decompression scheme. See Codec Computer avoiding physical injuries, H7, 47 and the computer system, 36 hardware, 37–39 input devices, 38, 80 memory, 37 output devices, 38, 80 processing components, 37 safe use of equipment, 47 software, 40–41 storage devices, 39 system requirements, 80 Computer hardware, 37–39 Computer software, 40–41 application, 41 operating system, 40 Connectivity needs, 80 Web hosting service, 80, 394–396 Consumer privacy. See Privacy Contact information form, using Dreamweaver to create, 293–296 Container page, 457 creating, 458 Content, 162 developing, 164–165 Content page creating, 458 Cookies, 348 blocking, 428 for targeted marketing, 414 COPPA (Children’s Online Privacy Protection Act), 348 Copying files, 85 Copyright, 86 adding, to a Web site, 86–87 importance of, H3, 210 Copyrighted work, obtaining permission to use, H3 CPU (central processing unit), 37 Creating subpages, 55–56 Cropping, 231–232 Cross-platform issues, 42 Cross-platform testing, 403 CSS. See Cascading style sheet (CSS)
D Data encryption, 351 and digital certificates, 352 Database, 368–369 linking to, 368 setting up connection to, 368–369 Database driven, 368 Database interface page, 368 Debugging code, 113, 486 Decision-making skills, 257 Designing a Web site information design, 16–17 interaction design, 16–17 presentation design, 16–17 Developing Web content, 152 DHTML (Dynamic Hypertext Markup Language), 279 using, in Dreamweaver, 286 Dial-up connection, 44 Digital camera, 38 Digital certificate, 352 Digital recording, 259 Digital subscriber line. See DSL connection Digital video recorder, 261 Direct server update, 430 Directory structure, 400 Disks, and distance-learning technology, 166 Distance learning, 10, 166 Domain name, 72 registering, 399 Domain name extensions, 72 Donate page, 286 Download, 401 Download time, 168 calculating, 226 and compression schemes, 226–227 low bandwidth alternatives, 227 Downloading files, 85 commercial software, 85 freeware, 85 shareware, 85 Dreamweaver, 17 adding animation to a Web page, 266 adding audio, 260 adding color in, 116 adding feedback form in, 343 adding graphics in, 120–121 adding links in, 120–121 adding meta tags in, 412–413 adding named anchors in, 373–374 adding privacy policy in, 349–350 adding Update Information, 285 adding video, 261–264 closing, 25–26
Code view, 25 creating a login screen in, 434 creating a one-page Web site, 49–50 creating a table using HTML, 453 creating banner ad in, 283–284 creating form in, 293–296 creating frames in, 382–384 creating guest book in, 377–379 creating headings in, 118 creating lists in, 118–119 Design view, 25 DHTML, creating rollover buttons in, 283 and Flash button, 267 formatting text in, 116 inserting graphics into, 230 inserting page banners/headers in, 196–197 interface, 21–22, 496 introduction to, 21–26 modifying CSS in, 340 MX versus MX 2004, versions of, 496–499 versus Notepad, 116–122 opening a Web site, 23–24 results in, 405–409 saving a Web page in, 48 site reports in, 405–409 source control, 318–319 split view, 25 template, 171–182 testing a Web page in, 122 toolbars, 22 using cascading style sheets in, 338–339 using DHTML Behaviors in, 286 using different views, 25–26 using Fireworks to modify images, 231–233 using frames, 382–384 using spell check, 122 viewing home pages in, 23 DSL connection, 44 Dynamic content, 486 Dynamic effects adding, 283–291 adding, to form, 297 Dynamic Hypertext Markup Language. See DHTML Dynamic Web page, 368
E E-commerce, 322–323 designing Web site for, 323–326 role of, 322 starting an e-business, 370 versus traditional shopping, 322 Index
521
types of, 323 Web sites, 8, 336–341 Editors and web content, 152 E-mail, 69 advertising, 410 as distance-learning tool, 166 link to, 181–182 Error message, 486 Ethernet card, 46 Ethical Internet use, H2, 84–85 Internet use agreement, 84 of multimedia files, 254 netiquette, H5, 85 obtaining graphics, 229 protecting privacy online, H7, 85, 428 and respecting intellectual property, H3, 210 Ethics in the workgroup, 320 Evaluating Web sites, H9, 17, 508–509 Event, 484 Extensible Hypertext Markup Language (XHTML), 280 Extensible Markup Language (XML), 115, 280 External style sheets, 339, 464 using HTML to create, 464 Extranet, 70
F Fair use laws, 86 FAQ (frequently asked questions), 373 Feedback form, 342–343 Field labels, 294 File, 6 animation, 265 audio, 258 organizing, in folders, 102 saving, 42 size guidelines, 253 video, 259 File format types of audio, 258 types of video, 259 File name, 148 assigning, 103, 193 relationship to page title, 148 specifying, 148–149 File name extension, 103 File Transfer Protocol. See FTP Files frames-based pages in, 380 transferring to a Web server, 401–402 and Web site management, 430 Firewall, 347 Fireworks creating photo album in, 240–242 522
Index
as image modifier in Dreamweaver, 231–233 toolbar in, 232 and Web Photo Album, 240–242 Flash. See Macromedia Flash Flash button, 267 Floppy disk, 39 Folder, 48 creating to organize a site, 102 organizing, 102 subfolder, 48 Folder structure. See Directory structure Font, 51, 202–209 alignment, 204 appearance, 207–208 bold, 203 color, 204, 207 consistency, 207 contrast with background, 206 italic, 203 limit number of, 207 sans serif, 206 serif, 206 size, 203, 208 standard, 208 styles, 207 substitutions, 208 system, 208 types, 202 underline, 203 Footer, 179 Form adding, to Web site, 292–298 components of, 292 creating, using Dreamweaver, 293–296 Form fields, 292–293 Format, 51 Formatting text for appearance, 207–208 for consistency, 207 in Dreamweaver, 116, 208–209 guidelines, 206–209 for readability, 206 using Style menu, 205 Formatting toolbar, 203 FPS (frames per second), 259 Frames, 380–384 creating, in Dreamweaver, 382–384 creating, in HTML, 456–461 creating links between, 460 guidelines for, 381 horizontal layout of, 459 selecting frame templates, 382 vertical layout of, 459 Frames per second (FPS), 259 Frameset, 380
Frequently asked questions (FAQ), 373 FrontPage. See Microsoft FrontPage FTP (File Transfer Protocol), 68 transferring files using, 401
G Gateway, 67 GIF, 225 adding, using HTML, 477 animated, 477 GIF animations, 265 Goals of Web site determining, 16, 136 immediate, 138 long-term, 138 target audience and, 138 Gopher, 68 Graphic designer(s), 152. See also Web designer Graphic file formats BMP, 225 converting, 227 GIF, 225 JPEG, 225 PNG, 225 Graphic Interchange Format. See GIF Graphic link, 111 Graphical user interface (GUI), 40, 66 Graphics, 12. See also Image adding, in Dreamweaver, 120–121 adding, to Web page, 52 cropping, 231–232 download times, 226–227 editing and formatting, 231–235 ethical use of, 229 and file compression, 226–227 inserting, 52–54 modifying, 231–235 obtaining pre-made, 228 raster, 224 resampling, 232 resizing, 231–232 types of, 224 vector, 224 Graphics application, 79 Guest book, 377 GUI. See Graphical user interface
H Hackers, 347 Hard disk (hard drive), 39 hot-swappable, 425 Hard drive mirroring, 425 Hardware, 37–39 components, 67 Internet is, 6
Heading, 118 creating, in Dreamweaver, 118–119 creating, in HTML, 105 Hexadecimal number, 199, 451 Hit, 366 Hit counter, 366–367 Home page, 7 Hosting company statistics, 367 Hotspot, 237 creating an image map with, 238–239 tools, 237 Hot-swappable hard drives, 425 Hover button, 177. See also Interactive button HTML (Hypertext Markup Language), 7, 98 adding animated GIFs using, 477 adding audio file using, 476 adding check boxes using, 478 adding images in, 109–110 adding interactivity using, 476–481 adding pull-down menu using, 479 adding radio buttons using, 478 adding text area using, 480 adding text boxes using, 477 and case sensitivity, 100 coding, 98–101 creating frames in, 456–461 creating lists using, 106–107 creating registration form using, 477–480 creating tables in, 450–454 entering, in text editor, 102–108 guidelines, 100–101 inserting image using, 110 inserting links using, 110–112 new Web languages versus, 115 and spacing, 100 viewing code, 101 and W3C, 100 HTML document adding attributes to, 104–106 creating, 104 and CSS, 462–464 enhancing, 109–114 parts of, 103 saving, in Notepad, 103–104 testing, 113–114 viewing, in browser, 108 HTML tag, 98 anchor, 110 attributes with, 104–106, 109 creating lists using, 106–107 empty, 99 ending tag, 98 image, 109 nested, 99
starting tag, 98 tag sets, 98 HTTP (Hypertext Transfer Protocol), 68 requirements of, 71 transferring files using, 401 Hyperlink, 13 absolute, 112 adding, in Dreamweaver, 81–82, 120–121 appearance in different browsers, 73 external, 13, 81 between frames, 460 graphic, 110 internal, 13 intrapage, 13 relative, 111 text, 81–82, 110 using HTML to insert, 110–112 Hypertext Markup Language. See HTML Hypertext Transfer Protocol. See HTTP
I ICANN (Internet Corporation for Assigned Names and Numbers), 399 Id selector, 463 IM (instant messaging), 69 Image. See also Graphics adding, in HTML, 109–110 cropping, 231–232 manipulating with Fireworks toolbar, 231–232 Image editing programs, 231 Image maps, 237–239 Image tag, 109 Images, 498 Implementing a Web site, 17 Information design, 16–17 Information sharing, 375 Inline CSS, 340 Inline graphic, 230 Input devices, 38 audio, 38 graphic, 38 used by Web developers, 80 video, 38 Insert toolbar, 22 Instant messaging (IM), 69 Instant storefront, 326 Instructional designers, 152 Integrated Services Digital Network (ISDN), 44 Intellectual property, 86, 210 Intelligent homes, 455 Interaction design, 16–17
Interactive button, 177 Interactivity, 278 design guidelines, 281 and scripting, 278 using scripting to add, 483–486 Interface, 21–22 Internal style sheets, 338, 463 Internet, 6, 66–70 citing digital sources, H2, 88 communication on, 69 and copyright protection, H3 distance learning and, 166 effects on society, 84 entertainment on, 69 ethical issues related to, 84–85 future of, 236 hardware components, 67 how it works, 67–68 how we use the Web, 404 online resources, reliability of, 87 origins of, 66 protecting your privacy online, H7, 10, 85, 348–349 software components, 67 using online resources, H6 using search tools for, H8, 76–77 verify online information, 1, 83 Internet browser, 115 Internet connection broadband, 44 dial-up, 44 types of, 44 wireless, 44 Internet Corporation for Assigned Names and Numbers (ICANN), 399 Internet protocol, 68 Internet protocol address (IP address), 68 Internet relay chat (IRC), 69 Internet service provider (ISP), 67 Internet Use Agreement, 84. See also Acceptable Use Policy (AUP) InterNIC, 399 Intranet, 70 Inverted pyramid, 164 IP address. See Internet protocol address IRC (Internet relay chat), 69 ISDN (Integrated Services Digital Network), 44 ISP (Internet service provider), 67
J Java applet, 279 client-side script, 485 JavaScript, 115 browser support of, 279 client-side script, 483 Index
523
conditional statements, 484 creating rollover button using, 484–485 event, 484 event handler, 484 function, 484 and integrated cell phones, 115 object, 483 and PDAs, 115 and portable computer systems, 115 variable, 484 JPEG (Joint Photographic Experts Group), 225 Jump menu adding to Web page, 297
K Keyboard, 38 Keyword search, 76 Kitchen computers, 455
L Label, 292 LAN (local area network), 43 Layer, 288 inserting show-hide behavior, 288–291 Leadership qualities, 257 Left-hand navigation, 457 Link. See Hyperlink Link bar, 177 creating frame page for, 457 Link checker, 407 Link trading, 411 Linking to online resources, 81–82 Lists creating, in Dreamweaver, 118–119 creating, in HTML, 107 ordered, 106 types of, 106 unordered, 106 using HTML to create, 106–107 Listserv, 69 Local area network (LAN), 43 Local client update, 430 Logo, 174
M Macromedia Director, 255 Macromedia Dreamweaver. See Dreamweaver Macromedia Flash, 265 Maintaining a Web server, 424–427 uploading and downloading capabilities, 424–425 524
Index
Maintaining a Web site, 17 updating information, 429–432 Markup language, 280 Menu, 7 Menu bar, 22 Meta tag, 412 Microphone, 38 Microsoft FrontPage, 17 Microsoft Internet Explorer browser, 7 main components, 7 Microsoft PhotoDraw, 265 Microsoft Windows Media Player, 79, 259 operating system, 40 Microsoft Word, 79 word processing tools, H4 Milestone, 314 Mission statement, 136 determining purpose and goals, 136 writing, 138–139 Modems, 45 Monitors, 38 Mouse, 38 Multimedia, 12, 252 adding using HTML, 476 design guidelines, 252–253 Web design, 252–256 Multimedia authoring tools, 255 Multimedia files downloading, 254 locating, 254 size guidelines, 253 using ethically, 254 Multimedia Web sites evaluating, 255–256, 508–509 tools for creating, 255–256 Multimodal Web, 236 Multiple technologies (Web accessibility), 282
N Named anchor, 373–374 Navigation bar. See Link bar Navigation button, 7 adding, 178 hover button, 177 interactive button, 177 Navigation buttons, 177–178, 288 Navigation link, 177 Navigation scheme, 140 charting, 147 combination, 142 hierarchical, 141 linear, 142 random-access, 142 storyboarding, 146–147
types of, 140–142 viewing, 143–145 Navigation structure, adding Web pages to, 194–195 Navigation toolbar, 143–145 Negotiation and workgroup members, 320 Netiquette, H5, 85 Network, 6, 43–46 client/server, 45 comparing, 70 hardware, 45–46 local area, 43 modem, 45 operating system, 46 provide access to Internet, 43 router, 46 software, 46 types of, 43 wide area, 43 Network interface card (NIC), 46 New Web languages, 115 News group or forum, 69 Newsletters, 375 NIC (network interface card), 46 Notepad creating HTML document in, 103–104 versus Dreamweaver, 116–122 saving HTML document in, 103–104 using, 103–104
O Online privacy, taking precautions for, 428 Online services, 404 Operating system software, 40 commonly used, 40 compatibility of, 42 graphical user interface, 40 Macintosh OS, 40 Microsoft Windows, 40 responsibilities of, 40 Operating systems (OS), 40 Ordered list, 106 Orphaned file, 407 OS (operating system), 40 Output device, 38
P Page header or banner, 196 inserting, 196–197 Page layout guidelines for, 167–168 using CSS for, 465 Page Properties dialog box, 499 Page template. See Template
Page title, 148 assigning, 193 relationship to file name, 148 Page view, 367 Page view options, 25 Parent-child relationship, 141 Password, 433 Password controls, 433 Peer-to-peer relationship, 141 Photo album, 240 creating, with thumbnails, 240–242 Photoshop. See Adobe Photoshop Picture cropping, 231 resampling, 232 resizing, 231 Pixel, 169 and font size, 203 Pixel definition and brightness, 234 and contrast, 234 Planning checklist, 150–151 Plug-in, 259 adding, to a Web page, 259 Positioning absolute, 465 relative, 465 static, 465 Presentation design, 16–17 consistency in, 192 navigation structure in, 194–195 principles of, 192–197 repetition in, 192 Printer, 38 Privacy, 348 cookies and, 428 legal protection of, 348 protecting, H7, 10, 85 site registration for, 428 Web bugs and, 428 Privacy policy, 349 adding, in Dreamweaver, 349–350 Project life cycle analysis and planning, 321 budget considerations, 326 creating the schedule, 324 determining target market, 323 human resource considerations, 326 overview of, 312 stages of, 313 tasks in, 313 Project manager, 314 Project scope, determining, 321–326 Project team evaluating progress, 316–318 forming a Web design, 314–316
identifying responsibilities of, 317–318 Protocol, 68 Publicizing a Web site, 410–413 Publishing a Web site, 394, 398–403 choosing a Web host, 396 Pull-down menu, 479
Q QuickTime. See Apple QuickTime
R Radio button, 293, 478 adding, 344 Random-access memory (RAM), 39 Readability, 206 Really Simple Syndication (RSS), 376 Refrigerators, next generation of, 455 Registration form, using HTML to create, 477–480 Relationship skills, and leadership qualities, 257 Relative link, 111 Relative positioning, 465 Reliability of Web host, 396 of Web server, 395 Remote server downloading files, 430–431 uploading files, 430–431 Removable storage devices, 39 Reports, 405 Resampling, 232 Resizing, 231–232 Rollover button creating, 283 using JavaScript to create, 484–485 Router, 46 Row, 175 RSS (Really Simple Syndication), 376 Rubric and Web design, 508–509
S Safe area, 169 Saving files, 42 Scalability, 395 Scanners, 38 Screen resolution, 169–170 viewing Web page at different, 169–170 Script, 278 client-side, 483–486 server-side, 485 Scripting adding interactivity using, 483–486 and interactivity, 278
Scripting languages, 279 Scroll box, 342 Search capabilities, 372 Search engine, 75 registering a Web site with, 411 Search tools, H8, 75–76 Secure Socket Layer (SSL), 351 Securities and Exchange Commission, 83 Security, 351–352 concern for e-commerce sites, 347 data encryption, 351 digital certificate, 352 Selector, 463 Semantic Web, 236 Server, 45 Server-side scripts, 485–486 Site map, 371 Site registration, 428 Site Reports, 405 Sites creating, 497 defining, 497 publishing, 497 Smart houses, 455 Smart workplaces, 455 Software, 40–41. See also Application software applications for creating Web page, 78–79 components, 67 graphics application, 79 text application, 79 text editor, 78 Web site development application, 78 Sound. See Audio Source code, 101 Source control, 318–319 Spam, 410 Speakers, 38 SSL (Secure Socket Layer), 351 Starting an E-business, 370 Static positioning, 465 Static Web page, 368 Storage capacity, 39 Storage device, 39 hard drive, 39 removable storage devices, 39 Storyboard, 146 Storyboarding creating sketches of individual pages, 149–150 drawing navigation structure, 147 Web site, 146–151 Streaming media, 253 Subpages, 55–56
Index
525
T T1 connection, 44 T3 connection, 44 Table, 175 controlling alignment in, 452–453 creating, in Dreamweaver, 175–176 creating, in HTML, 450–454 creating table border in HTML, 451 merging cells in HTML, 452 spliting cells in Dreamweaver, 200 Table of contents, 372 Talking Web, 236 Target audience, 137–138 Target browser check, 408–409 Target market, 323 Targeted marketing, 414 TCP/IP protocol, 68 Technical documentation, 432 Telnet, 68 Template creating, 171–176 designing, 171–173 enhancing, 177–182 tables in, 175–176 Testing a Web site, 17, 113 in different browser, 17, 403 in Dreamweaver, 122 published Web site, 403 with various hardware, 403 Text, 12 aligning, 168, 204 formatting, 51 formatting, in Dreamweaver, 208–209 inserting, 51 Text applications, 79 Text area, 292–293, 342, 479 creating, in HTML, 480 Text box, 292, 477 creating, in HTML, 477 Text editor, 78 entering HTML code in, 102–108 Notepad, 103 Text field, 293 Text link, 111, 180 adding, in Dreamweaver, 81–82, 180 adding, in HTML, 110–111 Text options, 282 Thumbnail, 240 Title bar, 7, 22 Title grapic, 174 Titles, 294 Toolbars, 22 Top-level page, 141 Tracking software, 367 Tracking visitors, 366–367 526
Index
Trademark, 210 Transmission Control Protocol/ Internet Protocol. See TCP/IP protocol Trustworthiness, as management skill, 257 Typography, 202–209
U Uniform Resource Locator (URL), 71–72 Unique visit, 367 Unordered list, 106 creating, in Dreamweaver, 118–119 creating, in HTML, 107 Update Information, 285 Updates, automated, 431 Updating a Web site, 429–432 Upload, 401 URL. See Uniform Resource Locator User authentication, 433 Utility software, 41
V Validating accessibility, 355–356 Validation report, 406 Video, 12, 253 design guidelines, 253 Video capture card, 261 Video file adding, to a site, 261–264 creating, 261 editing software, 79, 255 formats, 259 Videoconference, 166 Visitors, sharing information with, 375
W W3C. See World Wide Web Consortium WAIS (Wide area information servers), 68 WAN (wide area network), 43 Web. See World Wide Web Web author, 18, 315 Web browsers, 7 and accessibility, 73 functions, 7 menus of, 7 Microsoft Internet Explorer as a, 7 navigating to Web pages, 7 platform differences, 73 previewing, 74 restrictions, 73
retrieving a Web page, 73 testing Web sites in different, 17, 403 title bar of, 7 using, 73–75 viewing area of, 7 viewing HTML page in, 108 viewing Web site in, 13–14 Web bugs, 428 Web content developing of, 152 and editors, 152 Web design forming project team for, 314–316 multimedia and, 252–256 Web designer, 18, 20, 315 Web developer, 18 Web development, 15–19 analysis and planing, 321 careers, 18–19 designing and implementing a Web site, 16–17 determining purpose and goals, 16 evaluating and testing a Web site, 17 maintaining a Web site, 17 project life cycle of, 312 project schedule, 325 publishing a Web site, 17, 398–403 skills, 18 software, 78–79 steps in process, 15–17 tools, 78–82 Web directory, 75 Web graphic formats, 224–227 types, 224–227 Web host, 395–396 bandwidth of, 396 choosing, 396 cost of, 396 performance of, 396 reliability of, 396 storage space of, 396 technical support from, 396 Web hosting external, 397 internal, 397 Web hosting service, 80 Web logs, 83 Web pages, 7 adding graphics to, 52–54 adding jump menu to, 297–298 adding text to, 51 animation on, 12 application for creating, 78–79 archiving, 432 audio on, 12 compared to Web site, 7
component application, 79 content, 164 creating, 48–56, 193–194 creating content for, 165 creating frames-based, 459–460 developing, 165 dimensions, 169 dynamic, 368 elements of, 11–14 footer, 179 frames-based, 380 graphics on, 12 hyperlinks on, 13 layout guidelines, 167–168 maintaining file names for, 399–400 multimedia on, 12 naming, 193–194 previewing, in different browsers, 74 retrieving, in browser, 73 saving, 48 static, 368 testing, 113–114 testing, in Dreamweaver, 122 text on, 12 uniform resource locator for, 71–72 video on, 12 viewing at various screen resolutions, 169–170 Web Photo Album (using Fireworks), 240–242 Web server, 394–395 communication channel bandwidth, 395 CPU power, 395 hard drive speed and capacity, 395 maintenance, 424–427 reliability, 395 scalability, 395 storage options, 425–426 technical needs of, 394–395 transferring files to, 401–402 Web server clusters, 396 Web site accessibility, 353–356 Web site checklists, 317 Web site design, and workgroup common goals, 320 Web site development application, 78 design categories, 17 graphical user interface, 78 Web site users, threats to, 347 Web sites, 7 adding animation to, 265–268 adding audio files to, 260 adding form to, 292–296 adding meta tags to, 412–413 adding video files to, 261–264
and blended attacks, 347 calculating size of, 396 commercial, 8 compared to Web page, 7 controlling access to, 433–434 corporate presence, 8 creating content for, 162–165 determining purpose, 16, 136 development, 15–19, 312–318 e-commerce, 8, 323–324, 336–341 educational, 10 evaluation of, H9 goals, 136, 138 and graphic designers, 152 increasing traffic on, 413 informational, 9 inserting behaviors into, 286–289 linking to database, 368–369 maintaining directory structure of, 400 mission statement, 136 multimedia, 255–256 naming, 398 navigation scheme, 143–145 personal, 10 planning, 136–152 planning checklist, 150–151 portal, 9 privacy, 348–349 promoting, 410–414 publicizing, 410–413 reliability of, 87 running reports in, 406 security, 351–352 templates, 171–182 testing published, 403 threats to, 347 tracking visitors, 366–367 types of, 8–10 update information in, 285 updating, 429–432 validating, 406–407 viewing, in a browser, 13–14 Web text developing, 164–165 guidelines, 163 mission statement in, 164 organizing, 164 reading online, 163 revising, 164 Web writer. See Web author Web-based chat rooms, 166 Web-based writers, 152 Webmaster, 19 becoming a, 482 ethics and, 435–436 implementing access controls, 433 knowledge and skills, 316, 482 role of, 424, 427
Web-safe color, 199 chart, 507 choosing, 198–199 16 named colors, 506 using, 198–201 White space, 168 Wide area information servers. See WAIS Wide area network (WAN), 43 Wi-Fi Protected Access (WPA), 347 Windows versus Macintosh commands, 500–501 Wireless, 44 Wireless trend, threats of, 347 Word. See Microsoft Word Workgroup ethics in, 320 and negotiation, 320 World Wide Web (WWW), 6 accessibility on, 282 created, 66 downloading multimedia files from, 254 finding a job using, 20 future of, 404 how it works, 6 and protected information, 85–88 security threats to, 347 writing for, 162–164 World Wide Web Consortium (W3C), 66, 236, 338 and HTML, 100 WPA (Wi-Fi Protected Access), 347 Writers, web-based, 152 WWW. See World Wide Web WYSIWYG, 78
X XHTML (Extensible Hypertext Markup Language), 280 XML (Extensible Markup Language), 115, 280
