Transcript Book cover slide

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
1
Web Basics
YOU WILL LEARN TO…
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
pp.
Section 1.1
Introduction to the Web
Focus on Reading
Main Ideas
Key Terms
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
6-10
pp.
Section 1.1
6-10
Introduction to the Web
The 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.
Internet Hardware, such as
computers, cables, and
telephone wires, that is
connected to create a
massive worldwide network.
(p. 6)
The information on the
Web is stored in individual
files.
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.
Section 1.1
6-10
Introduction to the Web
How 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.
Section 1.1
6-10
Introduction to the Web
How 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.
Section 1.1
6-10
Introduction to the Web
How the Web Works
A Web browser translates the text-based HTML into a
graphical Web page.
Title Bar
Menu
Navigation
Buttons
Viewing
Area
Web
Address
pp.
Section 1.1
Introduction to the Web
Types of Web Sites
• 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
6-10
pp.
Section 1.1
Introduction to the Web
Section Assessment
True/False The Internet
and the World Wide Web
are the same thing.
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.
6-10
pp.
Section 1.2
Elements of a Web Page
Focus on Reading
Main Ideas
Key Terms
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
11-14
pp.
Section 1.2
Elements of a Web Page
11-14
Text 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.
Section 1.2
Elements of a Web Page
11-14
Multimedia
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.
Section 1.2
Elements of a Web Page
11-14
Hyperlinks
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.
Section 1.2
Elements of a Web Page
• Activity 1A – View a Web Site in a Web Browser (p. 13)
11-14
pp.
Section 1.2
Elements of a Web Page
Section Assessment
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
11-14
pp.
Section 1.3
Web Site Development
Focus on Reading
Main Ideas
Key Terms
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
15-19
pp.
Section 1.3
15-19
Web Site Development
The Web Site Development Process
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?
pp.
Section 1.3
15-19
Web Site Development
The 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.
Section 1.3
15-19
Web Site Development
The Web Site Development Process
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.
pp.
Section 1.3
Web Site Development
Web Site Development Careers and Skills
Developing a Web site requires:
• Writing skills
• Design skills
• Programming skills
In most companies, professionals with different abilities
work together to create Web sites.
15-19
pp.
Section 1.3
15-19
Web Site Development
Web 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.
Section 1.3
15-19
Web Site Development
Section Assessment
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.
pp.
Section 1.4
An Introduction to Dreamweaver
Focus on Reading
Main Ideas
Key Terms
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
21-26
pp.
Section 1.4
An Introduction to Dreamweaver
The Dreamweaver Interface
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.
21-26
pp.
Section 1.4
21-26
An Introduction to Dreamweaver
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)
pp.
Section 1.4
21-26
An Introduction to Dreamweaver
Main Dreamweaver Interface Elements
There are seven major
elements in the
Dreamweaver interface:
1. Title bar
2. Menu bar
3. Toolbar
4. Document window
5. Status bar
6. Panel
7. 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)
pp.
Section 1.4
21-26
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.
Section 1.4
An Introduction to Dreamweaver
Section Assessment
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
21-26
1
Web Basics
Chapter Review
Identify ________ is
the code used to
create Web pages.
A.
B.
C.
D.
WYSIWYG
WWW
Interface
HTML
D. HTML
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.
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.