CBIS 327 ~ Introduction
Transcript of CBIS 327 ~ Introduction
Adobe
Dreamweaver CS5
Introduction
Web Site Development and
Adobe Dreamweaver CS5
• Describe the Internet, the Web, and their associated terms
• Specify the difference between a Web page and a Web site
• Define Web browsers and identify their main features
• Identify the 13 types of Web sites
• Discuss how to plan, design, develop, test, publish, and maintain a Web site
Objectives
Web Site Development and Adobe Dreamweaver CS5 2
• Identify the methods and tools for creating a Web page and Web site
• Recognize the basic elements within HTML/XHTML
• Discuss the advantages of using Web page authoring programs such as Dreamweaver
Web Site Development and Adobe Dreamweaver CS5 3
Objectives
• Global network connecting millions of computers
• A network is a group of computers and associated devices that are connected by communications facilities
• The Internet grew out of an experiment that began in the 1960s by the U.S. Department of Defense
– Advanced Research Projects Agency (ARPA)
Web Site Development and Adobe Dreamweaver CS5 4
The Internet
• The World Wide Web is one of the more popular services on the Internet– Web server – Host computer– Client
• Hypertext Transfer Protocol (HTTP)• Users access Web resources through a Web page• Web browsers contain special buttons and other
features to help you navigate through Web sites – Microsoft Internet Explorer, Mozilla Firefox, Google
Chrome, Safari, Opera
Web Site Development and Adobe Dreamweaver CS5 5
The World Wide Web
and Web Browsers
Web Site Development and Adobe Dreamweaver CS5 6
The World Wide Web
and Web Browsers
Web Site Development and Adobe Dreamweaver CS5 7
The World Wide Web
and Web Browsers
• Nearly all Web pages have unique characteristics, but almost every Web page contains some basic elements
• A hyperlink, or link, can link to another place in the same Web page or to an entirely different Web page or site
• Most Web pages are part of a Web site
• A Web site contains a home page, which typically provides information about that Web site’s purpose and content
Web Site Development and Adobe Dreamweaver CS5 8
The World Wide Web
and Web Browsers
• Internet Service Provider (ISP)
– Business that has a permanent Internet connection and provides temporary connections to customers
• Online Service Provider (OSP)
– Similar to an ISP, but provides member-only services
• Wireless Service Provider (WSP)
– Provides Internet access to users with Web-enabled devices or wireless modems
Web Site Development and Adobe Dreamweaver CS5 9
The World Wide Web
and Web Browsers
Web Site Development and Adobe Dreamweaver CS5 10
The World Wide Web
and Web Browsers
• Portal
• News
• Informational
• Business/Marketing
• Blog
• Wiki
• Online social network
Web Site Development and Adobe Dreamweaver CS5 11
Types of Web Sites
• Educational
• Entertainment
• Advocacy
• Web application
• Content aggregator
• Personal
Web Site Development and Adobe Dreamweaver CS5 12
Types of Web Sites
Web Site Development and Adobe Dreamweaver CS5 13
Portal
Web Site Development and Adobe Dreamweaver CS5 14
News
Web Site Development and Adobe Dreamweaver CS5 15
Informational
Web Site Development and Adobe Dreamweaver CS5 16
Business/Marketing
Web Site Development and Adobe Dreamweaver CS5 17
Blog
Web Site Development and Adobe Dreamweaver CS5 18
Wiki
Web Site Development and Adobe Dreamweaver CS5 19
Online Social Network
Web Site Development and Adobe Dreamweaver CS5 20
Educational
Web Site Development and Adobe Dreamweaver CS5 21
Entertainment
Web Site Development and Adobe Dreamweaver CS5 22
Advocacy
Web Site Development and Adobe Dreamweaver CS5 23
Web Application
Web Site Development and Adobe Dreamweaver CS5 24
Content Aggregator
Web Site Development and Adobe Dreamweaver CS5 25
Personal
• Purpose and Goal
• Target Audience
• Web Technologies
– Broadband
• T1 lines, DSL, ISDN, Fiber optics, Cable modems, Baseband, mobile Web technologies
• Web Site Comparison
Web Site Development and Adobe Dreamweaver CS5 26
Planning a Web Site – Purpose
• Value-added Content
• Text
• Images
• Color Palette
• Multimedia
Web Site Development and Adobe Dreamweaver CS5 27
Planning a Web Site – Content
• Structure
– Linear
– Hierarchical
– Web (random)
– Grid
– Hybrid
• Tools
• Navigational Elements
Web Site Development and Adobe Dreamweaver CS5 28
Design Basics –
Navigation Map
Web Site Development and Adobe Dreamweaver CS5 29
Developing a Web Site – Development
Basics
• Typography
– Font
– Typeface
– Web-safe fonts
• Images
• Page Layout
• Color
• Is the Web site free of spelling and/or grammatical errors?
• Is the page layout consistent, and does it generate a sense of balance and order?
• Are any links broken?
• Do multimedia interactivity and forms function correctly?
Web Site Development and Adobe Dreamweaver CS5 30
Reviewing and Testing a Web Site
• Do the more widely used browsers display the Web site properly?
• Does the Web site function properly in different browsers, including older browser versions?
• Have you initiated a group test, in which you have asked other individuals to test your Web site and provide feedback?
Web Site Development and Adobe Dreamweaver CS5 31
Reviewing and Testing a Web Site
• Obtain a domain name– IP address
– Domain Name System
– Internet Corporation for Assigned Names and Numbers
• Acquire server space– Server logs
– Secure Sockets Layer (SSL)
• Publish the Web site– Uploading
Web Site Development and Adobe Dreamweaver CS5 32
Publishing a Web Site – Publishing
Basics
Web Site Development and Adobe Dreamweaver CS5 33
Publishing a Web Site – Publishing
Basics
• Changing content, either by adding new text and images or by deleting obsolete material
• Checking for broken links and adding new links
• Documenting the last change date (even when no revisions have been made)
Web Site Development and Adobe Dreamweaver CS5 34
Maintaining a Web Site
• Text editor
• HTML or XHTML editor
• Software applications
– Microsoft Word
– Microsoft Excel
• WYSIWYG text editor
– Microsoft Expression Web
– Adobe Dreamweaver
Web Site Development and Adobe Dreamweaver CS5 35
Methods and Tools Used to Create Web
Pages
• HTML and XHTML
• Written in plain text and saved in ASCII format
• Source Code
– Elements
• One-sided elements (Self-closing) vs. two-sided elements
• Attribute / Property
• Value modifier
– Document content
Web Site Development and Adobe Dreamweaver CS5 36
Web Site Languages
Web Site Development and Adobe Dreamweaver CS5 37
Web Site Languages
Web Site Development and Adobe Dreamweaver CS5 38
Web Site Languages
Web Site Development and Adobe Dreamweaver CS5 39
Web Site Languages
• WYSIWYG text editor
• Allows you to view a document as it will appear in the final product and to edit the elements directly within that view
• There is no need to know HTML and XHTML, but you can still alter the code, if necessary
Web Site Development and Adobe Dreamweaver CS5 40
Web Page Authoring Programs
• Integrated content management system (CMS) support
• New rendering mode that displays the design like a standard-based browser
• CSS inspection
• Integration with Adobe BrowserLab, PHP custom class code hinting, and Business Catalyst
• Enhanced CSS starter page
Web Site Development and Adobe Dreamweaver CS5 41
Adobe Dreamweaver CS5
Web Site Development and Adobe Dreamweaver CS5 42
Adobe Dreamweaver CS5
Web Site Development and Adobe Dreamweaver CS5 43
Adobe Dreamweaver CS5
• Describe the Internet, the Web, and their associated terms
• Specify the difference between a Web page and a Web site
• Define Web browsers and identify their main features
• Identify the 13 types of Web sites
• Discuss how to plan, design, develop, test, publish, and maintain a Web site
Chapter Summary
Web Site Development and Adobe Dreamweaver CS5 44
• Identify the methods and tools for creating a Web page and Web site
• Recognize the basic elements within HTML/XHTML
• Discuss the advantages of using Web page authoring programs such as Dreamweaver
Web Site Development and Adobe Dreamweaver CS5 45
Chapter Summary
Introduction Complete
Adobe
Dreamweaver CS5