the basics of the web davison web design. introduction to the web main ideas the internet is a...
TRANSCRIPT
THE BASICS OF THE WEBDavison Web Design
Introduction to the Web
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
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.
pp. 6-10
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.
pp. 6-10
1.1 Introduction to the WebHow the Web Works
A home page is generally the first page a user sees when visiting a site.
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 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
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.
pp. 11-14
1.2 Elements of a Web PageMultimedia
Many Web sites have multimedia elements, such as graphics, text, audio, video, animation, and interactivity.
pp. 11-14
1.2 Elements of a Web PageHyperlinks
Hyperlinks can be a word, phrase, or graphic.
There are three types of hyperlinks: • Internal• External• Intrapage
pp. 11-14
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
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
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
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
GETTING STARTED WITH DREAMWEAVER
• What is Dreamweaver?• Web design software for creating a Web page
or a complex Web site
• What is a Web site?• A group of related Web pages that are linked
together and share a common interface and design
USING DREAMWEAVER TOOLS
• What does Dreamweaver offer?• Design tools that don’t require coding• Organizational tools• Site management tools• Graphic site maps
WORKING WITH DREAMWEAVER VIEWS
•Design view
•Code view
•Code and Design view
pp. 21-261.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
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
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
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
1.4 An Introduction to Dreamweaver
• Activity 1B – Open a Web Site in Dreamweaver •Activity 1C – Use Different Views and Close Dreamweaver
pp. 21-26