31
1 Web Basics 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 YOU WILL LEARN TO…

1 Web Basics 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

Embed Size (px)

Citation preview

Page 1: 1 Web Basics 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 Web Basics

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

YOU WILL LEARN TO…

Page 2: 1 Web Basics 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 Web Basics

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

YOU WILL LEARN TO…

Page 3: 1 Web Basics 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

Section 1.1 Introduction to the WebFocus on Reading

Main Ideas

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.

Key Terms

Internet

World Wide Web

file

Web browser

Web site

Web page

home page

pp. 6-10

Page 4: 1 Web Basics 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

Section 1.1 Introduction to the WebThe Internet and the World Wide Web

The Internet and the World Wide Web are not the same things. The Internet provides access to the World Wide Web.

The information on the Web is stored in individual files.

Internet Hardware, such as computers, cables, and telephone wires, that is connected to create a massive worldwide network. (p. 6)

World Wide Web Software that sends information that is stored in files along the Internet’s hardware. (p. 6)

file Contains information, such as text, graphics, video, or animation, that is stored on computer hardware. (p. 6)

pp. 6-10

Page 5: 1 Web Basics 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

Section 1.1 Introduction to the WebHow the Web Works

A Web browser displays Web sites.

A Web site is made up of Web pages.

Hypertext Markup Language (HTML) is the code used to create Web pages.

Web browser Software application that interprets files to display Web pages on the user’s computer. (p. 7)

Web site A group of related files organized around a common topic. (p. 7)

Web page A single file within a Web site that has a unique name. (p. 7)

pp. 6-10

Page 6: 1 Web Basics 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

Section 1.1 Introduction to the WebHow the Web Works

A home page is generally the first page a user sees when visiting a site.

home page The main page on a Web site that contains general information about the site, such as an introduction and a list of other available pages. (p. 7)

pp. 6-10

Page 7: 1 Web Basics 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

Section 1.1 Introduction to the Web

A Web browser translates the text-based HTML into a graphical Web page.

Menu

Navigation Buttons

Viewing Area

Title Bar

Web Address

How the Web Works

pp. 6-10

Page 8: 1 Web Basics 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

Section 1.1 Introduction to the Web

• Commercial sites E-commerce sites Corporate presence sites

• Portal sites

• Informational sites News sites Government sites Public interest sites

• Educational sites School and university sites Tutorials and distance learning Museums and other institutions

• Personal sites

Types of Web Sites

pp. 6-10

Page 9: 1 Web Basics 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

Section 1.1 Introduction to the Web

Section Assessment

True/False The Internet and the World Wide Web are the same thing.

pp. 6-10

False. The Internet is a worldwide network made up of hardware, such as computers, cables, and telephone wires. The World Wide Web is software that sends and stores information on the Internet.

Page 10: 1 Web Basics 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

Section 1.2 Elements of a Web PageFocus on Reading

Main Ideas

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.

Key Terms

text

graphics

multimedia

audio

video

animation

hyperlink

pp. 11-14

Page 11: 1 Web Basics 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

Section 1.2 Elements of a Web PageText and Graphics

Web designers use text and graphics to add interest to a Web site. The combination of text and graphics are the basics of a Web site.

text Consists of words, letters, numbers, and other symbols. (p. 12)

graphic A drawing, chart, diagram, painting, or photograph stored in a digital format. (p. 12)

pp. 11-14

Page 12: 1 Web Basics 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

Section 1.2 Elements of a Web PageMultimedia

Many Web sites have multimedia elements, such as graphics, text, audio, video, animation, and interactivity.

multimedia The integration of elements such as graphics, text, audio, video, animation, and interactivity by means of computer technology. (p. 12)

audio Live, streamed, or recorded sound. (p. 12)

video Live or recorded moving images. (p. 12)

animation The movement of text and graphics. (p. 12)

pp. 11-14

Page 13: 1 Web Basics 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

Section 1.2 Elements of a Web PageHyperlinks

Hyperlinks can be a word, phrase, or graphic.

There are three types of hyperlinks:

• Internal• External• Intrapage

hyperlink A way to link Web pages together and allow users to move from one online location to another. (p. 13)

pp. 11-14

Page 14: 1 Web Basics 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

Section 1.2 Elements of a Web Page

• Activity 1A – View a Web Site in a Web Browser (p. 13)

pp. 11-14

Page 15: 1 Web Basics 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

Section 1.2 Elements of a Web Page

Identify What two elements do Web designers use to add interest to a Web site?

A. text and graphics

B. graphics and hyperlinks

C. text and portals

D. text and numbers

A. text and graphics

pp. 11-14

Section Assessment

Page 16: 1 Web Basics 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

Section 1.3 Web Site DevelopmentFocus on Reading

Main Ideas

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.

Key Terms

interaction design

information design

presentation design

Web author

Web designer

Web developer

Webmaster

pp. 15-19

Page 17: 1 Web Basics 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

Section 1.3 Web Site Development

Step 1: Determine Purpose and Goals

• What are the site’s purpose and goals?

•What tools do you need to reach your goals?

• Who is your primary (target) audience?

• What kinds of hardware and software are visitors likely to use?

The Web Site Development Process

pp. 15-19

Page 18: 1 Web Basics 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

Section 1.3 Web Site DevelopmentThe Web Site Development Process

Step 2: Design and Develop a Web Site

The design process can be divided into three categories:• Interaction design• Information design• Presentation design

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)

information design Part of Web site design process in which you determine the content that will appear on each page. (p. 16)

presentation design Part of Web site design process in which you determine the physical appearance of the site’s pages. (p. 16)

pp. 15-19

Page 19: 1 Web Basics 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

Section 1.3 Web Site Development

Step 3: Evaluate and Test a Web Site• Make sure your hyperlinks work correctly.

• Use various browsers and different computers to view your site.

Step 4: Implement a Web Site• Publishing a Web site means copying it to a Web server.

• This process is often referred to as “going live.”

Step 5: Maintain the Site• Add, delete, and update content and pages.

• Check that links continue to work properly.

The Web Site Development Process

pp. 15-19

Page 20: 1 Web Basics 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

Section 1.3 Web Site Development

Developing a Web site requires:• Writing skills• Design skills• Programming skills

In most companies, professionals with different abilities work together to create Web sites.

Web Site Development Careers and Skills

pp. 15-19

Page 21: 1 Web Basics 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

Section 1.3 Web Site DevelopmentWeb Site Development Careers

Here are some careers in Web site development:

• Web author • Web designer• Web developer• Webmaster

Web author Person who writes the text that will appear on each Web page. (p. 18)

Web designer Person who focuses on the look and feel of the Web site. (p. 18)

Web developer Person who uses programming skills to develop Web sites. (p. 18)

Webmaster Person who manages and maintains Web sites. (p. 19)

pp. 15-19

Page 22: 1 Web Basics 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

Section 1.3 Web Site Developmentpp. 15-19

True/False The first step of the Web site design process is to implement a Web site.

False. The first step of the Web site design process is to determine the site’s purpose and goals.

Section Assessment

Page 23: 1 Web Basics 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

Sectionpp. 21-26

1.4

Focus on Reading

Main Ideas

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.

Key Terms

interface

panel

inspector

An Introduction to Dreamweaver

Page 24: 1 Web Basics 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

Section 1.4 An Introduction to Dreamweaver

Dreamweaver is a Web site development tool that is sometimes referred to as a visual or WYSIWYG editor.

WYSIWYG stands for What You See Is What You Get.

The Dreamweaver Interface

pp. 21-26

Page 25: 1 Web Basics 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

Section 1.4

Main Dreamweaver Interface Elements

Dreamweaver has an easy-to-use interface.

Many of its features are similar to other software applications you have used.

interface Means by which a user interacts with a computer or a computer program. (p. 22)

An Introduction to Dreamweaverpp. 21-26

Page 26: 1 Web Basics 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

Section 1.4

Main Dreamweaver Interface Elements

There are seven major elements in the Dreamweaver interface:1. Title bar2. Menu bar3. Toolbar4. Document window5. Status bar6. Panel7. Inspector

panel Element of Dreamweaver interface that contains tools and commands that users can use to manipulate their workspace. (p. 22)

inspector Dreamweaver interface element that provides information about Web page items. (p. 22)

An Introduction to Dreamweaverpp. 21-26

Page 27: 1 Web Basics 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

Section 1.4 An Introduction to Dreamweaver

• Activity 1B – Open a Web Site in Dreamweaver (p. 23)• Activity 1C – Use Different Views and Close Dreamweaver

(p. 25)

pp. 21-26

Page 28: 1 Web Basics 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

Section 1.4 An Introduction to Dreamweaver

Examine Which of the following is NOT a major element in the Dreamweaver interface?

A. Toolbar

B. Inspector

C. HTML frame

D. Panel

C. HTML frame

pp. 21-26

Section Assessment

Page 29: 1 Web Basics 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 Web Basics

Chapter Review

Identify ________ is the code used to create Web pages.A. WYSIWYG

B. WWW

C. Interface

D. HTML

D. HTML

Page 30: 1 Web Basics 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 Web Basics

Chapter Review

Evaluate Why would a company hire a team of professionals to create a Web site, rather than just one person?

Web site development requires many varied skills. A person who is good at writing may not be a strong programmer or designer. Also, with more people involved, the project may move more quickly.

Page 31: 1 Web Basics 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 Web Basics

Chapter Resources

For more resources on this chapter, go to the Introduction to Web Design Using Dreamweaver Web site at WebDesignDW.glencoe.com.