WEB DESIGNINGProf. Jesse A. Role Ph. D TM
UEAB 2010
Section 1.1• Compare the Internet and the Web• Identify Web browser components• Compare Web sites and Web pages• Describe types of Web sites
Section 1.2• Identify parts of a Web page• Summarize the importance of hyperlinks• Use a Web browser
Section 1.3 • Describe Web site development steps• Identify the three categories of Web site design• Discuss Web design careers
Section 1.4 • Identify parts of the FrontPage interface• Use FrontPage to view Web pages
1.1 Introduction to the WebGuide to 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
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
1.1 Introduction to the WebHow the Web Works
A Web site is made up of Web pages.
A home page is generally the first page a user sees when visiting a site.
Hypertext Markup Language (HTML) is the code used to create Web pages.
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)
home page The main page on a Web site which contains general information about the site. (p. 7)
pp. 6-10
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
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
1.2 Elements of a Web PageGuide to Reading
Main Ideas
Web pages are composed of many different elements, including text, graphics, animation, and hyperlinks. Hyperlinks link Web pages together and help a user navigate through a Web site.
Key Terms
text
graphics
multimedia
audio
animation
video
hyperlink
pp. 12-15
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. 12-15
1.2 Elements of a Web PageMultimedia
Multimedia refers to the integration of elements such as graphics, text, audio, video, animation, and interactivity.
audio Live, streamed, or recorder sound. (p. 13)
video Live or recorded moving images. (p. 13)
animation The movement of text and graphics. (p. 13)
pp. 12-15
1.2 Elements of a Web PageHyperlinks
Hyperlinks can be a word, phrase, or graphic.
There are three types of hyperlinks: internal, external, and intrapage.
hyperlink A way to link Web pages together and allow users to move from one online location to another. (p. 14)
pp. 12-15
1.2 Elements of a Web Pagepp. 12-15
• Activity 1A – Viewing a Web Site in a Web Browser (p. 14)
1.3 Web Site DevelopmentGuide to 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. 16-20
1.3 Web Site Development
Step 1: Determining Purpose and Goals
• What is the site’s purpose?• What are the site’s 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 be
using?
The Web Site Development Process
pp. 16-20
1.3 Web Site Developmentpp. 16-20
The Web Site Development Process
Step 2: Designing and Implementing a Web Site
• Interaction Design• Information Design• Presentation Design
Interaction Design Part of Web site design process in which you determine how the user is likely to navigate through the site. (p. 17)
Information Design Part of Web site design process in which you determine the content that will appear on each page. (p. 18)
Presentation Design Part of Web site design process in which you determine the physical appearance of the site’s pages. (p. 18)
1.3 Web Site Development
Step 3: Evaluating and Testing a Web Site
Step 4: Publishing a Web Site
Step 5: Maintaining a Web Site
The Web Site Development Process
pp. 16-20
Step 1Determine the Web Site’s Purpose and Goal(s)
Step 2Design and Implement the Site
Step 3Evaluate and Test the Site
Step 4Publish the Site
Step 5Maintain the Site
1.3 Web Site Development
• Writing – write clearly and concisely• Design – use color effectively and design with the purpose in
mind• Programming – use HTML or a Web development tool
Web Site Development Skills
pp. 16-20
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. 19)
Web designer Person who develops the look and feel of the Web site. (p. 19)
Web developer Person who uses programming skills to develop Web sites. (p. 20)
Webmaster Person who manages and maintains Web sites. (p. 20)
pp. 16-20
pp. 22-261.4
Guide to Reading
Main Ideas
FrontPage is similar to other application programs. FrontPage provides many features, such as task panes, toolbars, and different page views that simplify creating a Web site.
Key Terms
interface
task pane
Folder List
Navigation Pane
An Introduction to FrontPage
pp. 22-261.4
The FrontPage Interface
One of the main features of FrontPage is that it has an easy-to-use interface.
Many of its features are similar to other applications you have used.
interface Means by which a user interacts with a computer or a computer program. (p. 22)
An Introduction to FrontPage
pp. 22-261.4
The FrontPage Interface
Task panes give access to typical tasks
The Folder List displays folders and files that can be accessed in the current Web site
The Navigation Pane displays the page titles of all the files that have been added to the Web site.
task pane Part of FrontPage that provides quick access to the typical tasks performed when creating a Web site. (p. 23)
Folder List Part of FrontPage that displays the folders and files that you can access in the current Web site. (p. 23)
Navigation Pane Part of FrontPage that displays the page titles of all the files that have been added to the navigational structure of the current Web site. (p. 23)
An Introduction to FrontPage
pp. 22-261.4 An Introduction to FrontPage
FrontPage provides different options for viewing an individual Web page.
Viewing Web Pages in FrontPage
In FrontPage 2002
In FrontPage 2003 Function
Normal Design Lets you modify a page
HTML Code
Lets you examine the HTML code for the page and make changes to it, if necessary.
View Not Available in 2002 Split
Shows Code View at the top of the screen and Design View at the bottom.
Preview Preview
Lets you see the page approximately as it will appear in a Web browser.
pp. 22-261.4 An Introduction to FrontPage
• Activity 1B – Opening a Web Site in FrontPage (p. 24)• Activity 1C – Using Different Views and Closing FrontPage
(p. 25)
Chapter 1Resources
For more resources on this chapter, go to the Introduction to Web Design Web site at webdesign.glencoe.com.