web design specialist - · pdf filecreate a site metaphor ! ... • explain how the...
TRANSCRIPT
![Page 1: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/1.jpg)
Web Design Specialist
![Page 2: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/2.jpg)
Lesson 1: Overview of Web Design
Concepts
![Page 3: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/3.jpg)
Objectives • Balance customer needs and usability with site
design principles and aesthetics • Identify Web site characteristics and strategies to
enable them, including interactivity, navigation, database integration
• Identify purpose and usefulness of multimedia • Write X/HTML code to create a static Web page
with text and images • Identify multimedia Web design principles, and
choose appropriate multimedia technologies for a site based on usability criteria
![Page 4: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/4.jpg)
The Nature of the Web
• Current Web development direction • Tools and technology
– Graphical user interface (GUI) – What You See Is What You Get (WYSIWYG)
![Page 5: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/5.jpg)
Web Design Concepts
• Push technology • Multimedia • Interactivity
![Page 6: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/6.jpg)
Newer Technologies
• Dynamic HTML (DHTML) • Alternative browsers • Cascading Style Sheets (CSS) • Extensible Markup Language (XML) • JavaScript
![Page 7: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/7.jpg)
Summary ! Balance customer needs and usability with site
design principles and aesthetics ! Identify Web site characteristics and strategies to
enable them, including interactivity, navigation, database integration
! Identify purpose and usefulness of multimedia ! Write X/HTML code to create a static Web page
with text and images ! Identify multimedia Web design principles, and
choose appropriate multimedia technologies for a site based on usability criteria
![Page 8: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/8.jpg)
Lesson 2: Web Development Teams
![Page 9: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/9.jpg)
Objectives
• Identify job responsibilities and tasks of a Web designer or Web development team member
• Develop and update your Web design portfolio with demonstration pages and sites
• Define the collaborative nature of a Web development project
• Identify Web site characteristics and the project resources they require
• Identify elements of a successful Web marketing campaign
![Page 10: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/10.jpg)
Web Teams and Tasks
• Nature of Web teams • Composition of Web teams
– Project management – Information architecture – Graphic design – Information technology – Marketing – Writing and editing
![Page 11: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/11.jpg)
Skills Contributing to Web Design Teams
![Page 12: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/12.jpg)
Web Project Collaboration
• Intranets • Wiki sites • Online conferencing • Instant messaging (IM)
![Page 13: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/13.jpg)
Your Web Design Portfolio
• Web portfolio contents • Updating your portfolio
![Page 14: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/14.jpg)
Your Web Design Business
• Business sense • The good, the bad and the ugly • Writing • Keeping your skills up to date
![Page 15: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/15.jpg)
Summary
! Identify job responsibilities and tasks of a Web designer or Web development team member
! Develop and update your Web design portfolio with demonstration pages and sites
! Define the collaborative nature of a Web development project
! Identify Web site characteristics and the project resources they require
! Identify elements of a successful Web marketing campaign
![Page 16: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/16.jpg)
Lesson 3: Web Project Management
Fundamentals
![Page 17: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/17.jpg)
Objectives • Determine site project implementation factors • Create a Web project plan • Document customer expectations and feedback • Communicate plans and progress regularly to
ensure that completed project meets stakeholder/ customer expectations
• Identify and manage changes in project scope • Document changes in development plan • Create a project tracking report • Conduct a project evaluation
![Page 18: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/18.jpg)
Web Project Management Phases
• Initiating phase – Scope – Needs analysis – Goals, assumptions and restraints – Statement of Work (SOW)
• Planning phase – Project schedule
![Page 19: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/19.jpg)
Web Project Management Phases (cont’d)
• Executing and controlling phases – Conceptualization – Structure – Design and analysis – Production and testing – Evolution
• Closing phase
![Page 20: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/20.jpg)
Project Documentation and Communication
• Scope creep • Adjusting the project plan • Paper trail • Project tracking report
– Issues log
![Page 21: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/21.jpg)
Summary ! Determine site project implementation factors ! Create a Web project plan ! Document customer expectations and feedback ! Communicate plans and progress regularly to
ensure that completed project meets stakeholder/ customer expectations
! Identify and manage changes in project scope ! Document changes in development plan ! Create a project tracking report ! Conduct a project evaluation
![Page 22: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/22.jpg)
Lesson 4: Web Site Development Process
![Page 23: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/23.jpg)
Objectives • Determine the audience for the site • Develop a Web site vision statement • Develop a site strategy and identify strategy implementation tactics • Use the mindmapping process to structure a Web site • Set design goals appropriate for the business/organization represented
by the site and the site’s intended audience • Create a site metaphor • Develop site design and architecture specifications • Use flowcharts and Web wireframes to determine page layout • Create Web page and site templates that fulfill design specifications • Identify challenges involved in designing Web pages for PDA-based
versus traditional browsers
![Page 24: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/24.jpg)
Understanding the Business Process
• Sites that deliver products intrinsically dependent on the Internet
• Sites that deliver existing products and services to a global market via the Internet
![Page 25: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/25.jpg)
Defining a Web Site Vision
• Vision statement – Value – Measurable goal
![Page 26: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/26.jpg)
From Vision to Strategy
• Defining the Web site strategy • Defining the Web site tactics
![Page 27: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/27.jpg)
Web Site Specifications
• Functionality • Content • Architecture • Design
![Page 28: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/28.jpg)
The Metaphor
• A Web site can be presented as a particular object or experience – Metaphor guidelines – Metaphor examples
![Page 29: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/29.jpg)
Mystery Meat Navigation
• Makes it difficult for the user to determine the destination of hyperlinks or to find hyperlinks on the page
• Makes your site less accessible • Makes your site less useful
![Page 30: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/30.jpg)
The Mindmapping Process
• Allows you to structure ideas on paper in the order your brain follows, rather than the linear process normally used when documenting ideas
![Page 31: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/31.jpg)
Mindmapping a Web Site
![Page 32: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/32.jpg)
Web Site Wireframe
• A skeletal view of a Web site’s architecture – Hierarchical format describes the relationship
between the pages • A finalized representation of the site • Used to:
– Set customer expectations for site – Describe the need for specific programming
![Page 33: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/33.jpg)
Web Page Wireframe
• Focuses on the flow of content on an individual Web page
• Can help you think through each element
![Page 34: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/34.jpg)
Summary ! Determine the audience for the site ! Develop a Web site vision statement ! Develop a site strategy and identify strategy implementation tactics ! Use the mindmapping process to structure a Web site ! Set design goals appropriate for the business/organization represented
by the site and the site’s intended audience ! Create a site metaphor ! Develop site design and architecture specifications ! Use flowcharts and Web wireframes to determine page layout ! Create Web page and site templates that fulfill design specifications ! Identify challenges involved in designing Web pages for PDA-based
versus traditional browsers
![Page 35: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/35.jpg)
Lesson 5: Web Page Layout and Elements
![Page 36: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/36.jpg)
Objectives • Apply branding to a Web site • Define and use common Web page design and layout
elements • Determine ways that design helps and hinders audience
participation • Manipulate space and content to create a visually balanced
page/site • Use color and contrast • Use design strategies to control a user’s focus on a page • Apply strategies and tools for visual consistency to Web
pages and site
![Page 37: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/37.jpg)
Objectives (cont’d)
• Convey a site’s message, culture and tone • Eliminate unnecessary elements • Design for typographical issues in printable content • Design for screen resolution issues • Identify Web site characteristics and strategies to enable
them • Identify audience and end-user capabilities • Use hexadecimal values to specify colors in X/HTML • Evaluate image colors
![Page 38: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/38.jpg)
Web Users and Site Design
• Design restrictions • Site characteristics
– Navigation – Interactivity – Database integration
![Page 39: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/39.jpg)
Effective Web Page Layout
• Web page layout elements • Common layout formats • Visual consistency • White space • Visual balance • Speed and scrolling • Screen resolution
![Page 40: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/40.jpg)
Color and Web Design
• Cultural perceptions • Additive color display • Color formats
– RGB – Hexadecimal
![Page 41: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/41.jpg)
Color and Web Design (cont’d)
• Color on computer monitors
![Page 42: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/42.jpg)
Color and Web Design (cont’d)
• Browser-safe colors – Dithering
• Color combinations • Color transitions
![Page 43: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/43.jpg)
Fonts and Web Design
• Limitations • Typography
– Serif fonts
– Sans-serif fonts
![Page 44: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/44.jpg)
Fonts and Web Design (cont’d)
– Font size – TrueType – Anti-aliasing – Horizontal line length – Typographical issues in printable content
![Page 45: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/45.jpg)
Summary ! Apply branding to a Web site ! Define and use common Web page design and layout
elements ! Determine ways that design helps and hinders audience
participation ! Manipulate space and content to create a visually balanced
page/site ! Use color and contrast ! Use design strategies to control a user’s focus on a page ! Apply strategies and tools for visual consistency to Web
pages and site
![Page 46: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/46.jpg)
Summary (cont’d)
! Convey a site’s message, culture and tone ! Eliminate unnecessary elements ! Design for typographical issues in printable content ! Design for screen resolution issues ! Identify Web site characteristics and strategies to enable
them ! Identify audience and end-user capabilities ! Use hexadecimal values to specify colors in X/HTML ! Evaluate image colors
![Page 47: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/47.jpg)
Lesson 6: Web Site Usability and Accessibility
![Page 48: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/48.jpg)
Objectives
• Determine the audience for the site • Conduct audience usability tests • Identify and apply user-accessibility
standards and laws • Identify common user-accessibility
challenges and solutions • Perform site testing
![Page 49: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/49.jpg)
Audience Usability and Accessibility
• Know your audience – Demographics – Technology capabilities – Disabilities
![Page 50: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/50.jpg)
Defining Usability
• Elements of usability • Software technology
![Page 51: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/51.jpg)
Web Usability Testing
• Before the test • Who should test usability? • Usability tasks • Results • Applying the results
![Page 52: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/52.jpg)
Web Page Accessibility
• WAI conformance • Section 508 of the Rehabilitation Act
![Page 53: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/53.jpg)
Summary
! Determine the audience for the site ! Conduct audience usability tests ! Identify and apply user-accessibility
standards and laws ! Identify common user-accessibility
challenges and solutions ! Perform site testing
![Page 54: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/54.jpg)
Lesson 7: Browsers
![Page 55: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/55.jpg)
Objectives • Identify challenges involved in designing Web pages for
PDA-based versus traditional browsers • Identify site strategies and technologies to avoid, including
pop-up windows, single-browser sites, spam • Perform site testing • Identify accessibility issues and solutions related to Web
images and animation • Identify the functionality of pop-up/
pop-under windows • Define CAPTCHA and create a CAPTCHA for a Web site • Explain how the TinyURL service works
![Page 56: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/56.jpg)
Browsers and Navigation
• Components of browser functionality – Internet access layer – Navigation layer – Presentation layer
![Page 57: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/57.jpg)
Browsers and Design Considerations
• Designs / technologies to avoid – Single-browser technologies – Reliance on browser navigation – Pop-up and pop-under windows – Spam
• Blacklist
![Page 58: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/58.jpg)
Major, Minor and Alternative Browsers
• Mozilla Firefox • Microsoft Internet Explorer • Opera • Apple Safari • Google Chrome
![Page 59: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/59.jpg)
TinyURL
• Free Web service that provides aliases for long URLS – Short URLs are useful because they are easy to
remember and easy to type – However, they are subject to linkrot
• Visit http://tinyurl.com/
![Page 60: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/60.jpg)
CAPTCHA
• Automatically generated graphic presented to a user
• Ensures that a user is a real person and not a computer
• Typical application is to protect Web site registration
![Page 61: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/61.jpg)
Summary ! Identify challenges involved in designing Web pages for
PDA-based versus traditional browsers ! Identify site strategies and technologies to avoid, including
pop-up windows, single-browser sites, spam ! Perform site testing ! Identify accessibility issues and solutions related to Web
images and animation ! Identify the functionality of pop-up/
pop-under windows ! Define CAPTCHA and create a CAPTCHA for a Web site ! Explain how the TinyURL service works
![Page 62: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/62.jpg)
Lesson 8: Navigation Concepts
![Page 63: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/63.jpg)
Objectives
• Identify Web site hierarchy/architecture concepts
• Identify common navigation conventions • Develop and apply a navigation action plan
![Page 64: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/64.jpg)
Primary and Secondary Navigation
• Primary – Navigation elements are accessible from most
locations within site • Secondary
– Navigation elements allow user to navigate within specific location
![Page 65: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/65.jpg)
Navigation Hierarchy
• Positional awareness • Navigation depth, icons and controls • Beyond the browser
![Page 66: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/66.jpg)
Site Structure, URLs and File Names
• Site structure – Describes how Web site is stored on Web
server • URLs
– Can be used to determine location and depth
• File names – Helpful as directory names
![Page 67: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/67.jpg)
Familiar Navigation Conventions
• Labels • Corporate logos • Branding images
![Page 68: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/68.jpg)
Navigation Action Plan
• Determine users’ goals and needs • Learn from navigation that works • Go deeper than the home page • Provide quick links • Design for various user preferences
![Page 69: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/69.jpg)
Summary
! Identify Web site hierarchy/architecture concepts
! Identify common navigation conventions ! Develop and apply a navigation action plan
![Page 70: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/70.jpg)
Lesson 9: Web Graphics
![Page 71: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/71.jpg)
Objectives • Distinguish between vector and raster
graphic types • Identify and choose appropriate image file
formats, including browser-compatibility issues and lowest common denominator in audience usability
• Insert metadata into images to ensure accessibility and to ensure higher page ranking in search engine result pages
![Page 72: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/72.jpg)
Objectives (cont’d) • Identify the benefits and drawbacks of using
stock photography when developing a site • Identify accessibility issues and solutions
related to Web images and animation • Identify Scalable Vector Graphics (SVG)
characteristics
![Page 73: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/73.jpg)
Web Site Images
• Stock photography • Photosharing • Adding metadata to images
![Page 74: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/74.jpg)
Digital Imaging Concepts
• Pixels • Color depth • Image resolution • Palettes
– Dithering
![Page 75: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/75.jpg)
Raster vs.Vector Graphics • Raster graphics
– Also known as bitmap graphics – Use small dots to create images and colors – Best for photographs and realistic graphics
• Vector graphics – Store information about image in mathematical
instructions that are interpreted and displayed – Best for line art, shapes and illustrations
![Page 76: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/76.jpg)
Graphics Applications
• Vector-based drawing programs • Paint programs
![Page 77: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/77.jpg)
Image File Formats
![Page 78: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/78.jpg)
Creating and Optimizing Images
• Web images and accessibility • Image optimization • Image slicing and splicing
![Page 79: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/79.jpg)
Essential Graphic Design Concepts
• Composition • Grid-based layout • Typography
![Page 80: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/80.jpg)
Summary ! Distinguish between vector and raster
graphic types ! Identify and choose appropriate image file
formats, including browser-compatibility issues and lowest common denominator in audience usability
! Insert metadata into images to ensure accessibility and to ensure higher page ranking in search engine result pages
![Page 81: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/81.jpg)
Summary (cont’d)
! Identify the benefits and drawbacks of using stock photography when developing a site
! Identify accessibility issues and solutions related to Web images and animation
! Identify Scalable Vector Graphics (SVG) characteristics
![Page 82: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/82.jpg)
Lesson 10: Multimedia and the Web
![Page 83: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/83.jpg)
Objectives • Use Web content properly, including original
content, misleading/inaccurate information, copyrighted content, licensing, avoiding infringement
• Identify purpose and usefulness of multimedia • Identify audience and end-user capabilities • Identify multimedia Web design principles, and
choose appropriate multimedia technologies for a site based on usability criteria
• Identify accessibility issues and solutions related to Web images and animation
![Page 84: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/84.jpg)
Current Multimedia Capabilities
• Limitations – Bandwidth – Browser support technology
• Time factor
![Page 85: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/85.jpg)
Multimedia Types
• Animation • Audio • Video
![Page 86: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/86.jpg)
Animation and the Web
• Animated GIFs • Rollovers • Flash files • Microsoft Silverlight • Animation to avoid
– Scrolling text
![Page 87: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/87.jpg)
Audio and the Web • Downloaded audio • Audio file types
– AIFF – AU – MID – MOV – MP3 – SWF – WAV
• Streaming audio
![Page 88: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/88.jpg)
Video and the Web
• Downloaded or streamed • Internet TV
![Page 89: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/89.jpg)
Goals of a Multimedia Site
• Audience • Message • Interface • Elements
![Page 90: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/90.jpg)
Multimedia Site Design Basics
• Scene and setting
![Page 91: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/91.jpg)
User Interaction
• “Spiral” concept – Interest – Activity – Resolution
![Page 92: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/92.jpg)
Selecting Multimedia Elements
• Function and purpose • Multimedia authoring • Copyright infringement • Java vs. plug-in • Visualize and understand the user • Performance
![Page 93: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/93.jpg)
Summary ! Use Web content properly, including original
content, misleading/inaccurate information, copyrighted content, licensing, avoiding infringement
! Identify purpose and usefulness of multimedia ! Identify audience and end-user capabilities ! Identify multimedia Web design principles, and
choose appropriate multimedia technologies for a site based on usability criteria
! Identify accessibility issues and solutions related to Web images and animation
![Page 94: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/94.jpg)
Lesson 11: Ethical and Legal Issues
in Web Development
![Page 95: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/95.jpg)
Objectives • Define ethics, and distinguish between legal and
ethical issues • Use Web content properly, including original
content, misleading/inaccurate information, copyrighted content, licensing, avoiding infringement
• Use strategies to avoid violating end-user privacy and trust
• Develop privacy disclaimers appropriate to site purpose and audience
• Identify international legal issues, including fair use, trademarks, contracts
![Page 96: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/96.jpg)
Ethical Issues and the Web
• Spam • Privacy and trust
![Page 97: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/97.jpg)
Legal Issues and the Web
• Spam and the law • Intellectual property
– Copyright – Trademarks – Trade secrets
• Licensing content for your site – Public domain
• International legal issues
![Page 98: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/98.jpg)
Summary ! Define ethics, and distinguish between legal and
ethical issues ! Use Web content properly, including original
content, misleading/inaccurate information, copyrighted content, licensing, avoiding infringement
! Use strategies to avoid violating end-user privacy and trust
! Develop privacy disclaimers appropriate to site purpose and audience
! Identify international legal issues, including fair use, trademarks, contracts
![Page 99: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/99.jpg)
Lesson 12: HTML and the
Evolution of Markup
![Page 100: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/100.jpg)
Objectives
• Explain the origins of HTML and XHTML, define the X/HTML standards, and distinguish among X/HTML versions
• Use X/HTML to apply design principles and layout elements
• Identify non-standard X/HTML code and the ways that proprietary code affects Web development
![Page 101: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/101.jpg)
Function of Markup Languages
• Tags • Presentational / procedural markup
– Describes appearance
• Logical / structural markup – Describes context
![Page 102: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/102.jpg)
SGML
• Standard Generalized Markup Language (SGML)
• A metalanguage – Language used for creating other languages
![Page 103: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/103.jpg)
What Is HTML?
• Hypertext Markup Language (HTML) • HTML as a markup language • HTML tags • HTML interpreters
![Page 104: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/104.jpg)
The HTML Standard
• Who controls HTML? – World Wide Web Consortium (W3C)
![Page 105: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/105.jpg)
HTML 4.0 and 4.01
• HTML 4.0 Transitional • HTML 4.0 Strict • HTML 4.0 Frameset • HTML 4.01 • Extensions to HTML
![Page 106: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/106.jpg)
Separating Format from Structure in HTML
• CSS2 • Deprecated tags
![Page 107: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/107.jpg)
XHTML
• Extensible HTML (HTML) • Reformulation of HTML 4.01
![Page 108: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/108.jpg)
Reference Sites for Web Developers
• World Wide Web Consortium (www.w3.org) • W3Schools (www.w3schools.com) • SitePoint (www.sitepoint.com) • WebReference (www.webreference.com) • Open Web Design (www.openwebdesign.org)
![Page 109: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/109.jpg)
Summary
! Explain the origins of HTML and XHTML, define the X/HTML standards, and distinguish among X/HTML versions
! Use X/HTML to apply design principles and layout elements
! Identify non-standard X/HTML code and the ways that proprietary code affects Web development
![Page 110: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/110.jpg)
Lesson 13: XML and XHTML
![Page 111: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/111.jpg)
Objectives
• Explain the importance of applying a single CSS and HTML standard consistently throughout a site
• Explain the origins of HTML and XHTML, define the X/HTML standards, and distinguish among X/HTML versions
• Define Extensible Markup Language (XML), and distinguish XML from HTML and XHTML
• Define and create a “well-formed” XML document
![Page 112: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/112.jpg)
What Is XML?
• XML: A subset of SGML • XML: Addressing HTML limitations
![Page 113: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/113.jpg)
XML Goals
• Ten goals of the XML Recommendation
![Page 114: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/114.jpg)
What Is an XML Document?
• HTML: The lazy developer’s dream • XML: The lazy developer’s nightmare
![Page 115: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/115.jpg)
Rules for Well-Formed XML
• Tags must be explicit • Empty tags must be closed • Attribute values need quotation marks • Root element is required • Tags must be properly nested • Tags are letter case-sensitive
![Page 116: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/116.jpg)
HTML Transition to XML
• Uses of XML beyond the Web • What can I do with XML today? • Will XML replace HTML?
![Page 117: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/117.jpg)
What Is XHTML?
• XHTML combines HTML and XML • XHTML flavors and <!DOCTYPE>
declarations – XHTML Transitional – XHTML Strict – XHTML Frameset
• Creating XHTML-compliant Web pages
![Page 118: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/118.jpg)
Applying a Single Standard Consistently
• Select one standard and apply it consistently throughout your Web site
![Page 119: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/119.jpg)
Summary
! Explain the importance of applying a single CSS and HTML standard consistently throughout a site
! Explain the origins of HTML and XHTML, define the X/HTML standards, and distinguish among X/HTML versions
! Define Extensible Markup Language (XML), and distinguish XML from HTML and XHTML
! Define and create a “well-formed” XML document
![Page 120: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/120.jpg)
Lesson 14: Web Page Structure – Tables and Framesets
![Page 121: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/121.jpg)
Objectives
• Identify common user-accessibility challenges and solutions
• Design and develop X/HTML tables to appropriately format data
• Develop X/HTML framesets, and target frames correctly
![Page 122: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/122.jpg)
Creating Structure with X/HTML Tables
• Page layout and tables • Tabular format for content
![Page 123: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/123.jpg)
Diagramming a Basic X/HTML Table
![Page 124: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/124.jpg)
Borderless Web Page Structure
• Web page margins • Table tag <table> • Table row tag <tr> • Table data tag <td>
![Page 125: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/125.jpg)
X/HTML Frames and Framesets
• Using frames – Static and dynamic information can be
combined on a page
![Page 126: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/126.jpg)
The X/HTML <frameset> Tag
• Relative sizing – Percentage
• Absolute sizing – Pixels
![Page 127: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/127.jpg)
The X/HTML <frame> Tag
• Placement of <frameset> tags • Creating a navigation frame
![Page 128: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/128.jpg)
Targeting Hyperlinks in X/HTML
• Frame relationships • Adding a frameset to a frameset
![Page 129: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/129.jpg)
The X/HTML <noframes> Tag
• Alternative text appears to users whose browsers cannot support frames
![Page 130: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/130.jpg)
Summary
! Identify common user-accessibility challenges and solutions
! Design and develop X/HTML tables to appropriately format data
! Develop X/HTML framesets, and target frames correctly
![Page 131: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/131.jpg)
Lesson 15: Cascading Style Sheets
![Page 132: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/132.jpg)
Objectives
• Apply strategies and tools for visual consistency to Web pages and site
• Identify ways to apply Web page formatting with Cascading Style Sheets using various methods, and use style sheets to simplify Web design
• Create an external style sheet and link it to an X/HTML document
![Page 133: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/133.jpg)
Style Sheets
• Typographical control elements • Defines style instructions for one or more
X/HTML documents
![Page 134: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/134.jpg)
Cascading Style Sheets
• Multiple style definitions in a single document
• Inheritance of style definitions
![Page 135: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/135.jpg)
Defining and Using Styles
• Linking to style sheets from an X/HTML file
• Importing style information • Embedding style information • Using an inline style
![Page 136: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/136.jpg)
Changeable Style Attributes
• Color • Background • Font • Font family • Font size • Font style • Font weight
• Text decoration • Line height • Text indent • Margin left • Margin top • Text align
![Page 137: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/137.jpg)
Other Style Issues
• Style inheritance • CSS selector types
– Tag selectors – Class selectors – ID selectors – Descendant selectors
![Page 138: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/138.jpg)
Style Guides
• Establishes a set of conventions for publishing – Editorial style – Usage – Typography – Styles
• Tool for ensuring a site’s visual consistency
![Page 139: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/139.jpg)
Page Layout with CSS
• CSS box model
![Page 140: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/140.jpg)
Page Layout with CSS (cont’d)
• Block and inline boxes • Positioning schemes
![Page 141: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/141.jpg)
Document Flow and Positioning
• Normal flow • Static positioning • Relative positioning • Absolute positioning • Fixed positioning • Float • Z-index
![Page 142: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/142.jpg)
Summary
! Apply strategies and tools for visual consistency to Web pages and site
! Identify ways to apply Web page formatting with Cascading Style Sheets using various methods, and use style sheets to simplify Web design
! Create an external style sheet and link it to an X/HTML document
![Page 143: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/143.jpg)
Lesson 16: Site Content and Metadata
![Page 144: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/144.jpg)
Objectives • Consider nature and purpose of site content • Develop or obtain written content that conveys the
site’s message, including clear and concise writing, professional editing, style guides, consistency, jargon, voice and tone
• Add metadata tags and content to X/HTML documents to influence search engine placement
• Discuss organic and non-organic strategies for improving hit rates and search engine ranking
![Page 145: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/145.jpg)
Objectives (cont’d)
• Define common search engine optimization (SEO) terms
• Identify common valid SEO techniques • Define Web analytics, including discussing key
events to review on a Web server • Identify ways that search engines generate revenue
by processing search entries from users • Create a blog-writing strategy to support a brand,
including key elements of a successful blog entry
![Page 146: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/146.jpg)
Written Web Site Content
• Developing content for the Web • Professional writing and editing • Nature and purpose of site content
– Audience and site message • Content to retain and content to exclude • Presenting content in various formats
![Page 147: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/147.jpg)
Internet Marketing and Search Engine Optimization (SEO)
• Search engine optimization (SEO) – Common SEO terms – Common SEO techniques
• Choosing keywords – Keyword stuffing – Writing high-quality Web copy
• SEO vs. pay per click (PPC)
![Page 148: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/148.jpg)
Internet Marketing and Search Engine Optimization (SEO) [cont’d]
• Web analytics – On-site – Off-site
• Blogging • How search engines generate revenue • Complete Internet marketing
![Page 149: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/149.jpg)
Metadata
• Data about data • The <!DOCTYPE> tag • The <meta> tag
![Page 150: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/150.jpg)
The <meta> Tag and Document Identification
• The name attribute • The http-equiv attribute • The content attribute • Using <meta> tags
![Page 151: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/151.jpg)
The <meta> Tag and Search Engines
• Keywords • Description • Robots • Search engines vs. information portals • Which search engine or directory? • Ranking and relevance
– Keyword development and placement
![Page 152: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/152.jpg)
The <meta> Tag and Delayed File Change
• Refreshes a page automatically • Dublin Core metadata initiative
![Page 153: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/153.jpg)
Summary ! Consider nature and purpose of site content ! Develop or obtain written content that conveys the
site’s message, including clear and concise writing, professional editing, style guides, consistency, jargon, voice and tone
! Add metadata tags and content to X/HTML documents to influence search engine placement
! Discuss organic and non-organic strategies for improving hit rates and search engine ranking
![Page 154: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/154.jpg)
Summary (cont’d)
! Define common search engine optimization (SEO) terms
! Identify common valid SEO techniques ! Define Web analytics, including discussing key
events to review on a Web server ! Identify ways that search engines generate revenue
by processing search entries from users ! Create a blog-writing strategy to support a brand,
including key elements of a successful blog entry
![Page 155: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/155.jpg)
Lesson 17: Site Development with Microsoft Expression Web 3 – Introduction
![Page 156: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/156.jpg)
Objectives • Compare site development using X/HTML text
editors to using GUI site management applications • Configure site development applications to
develop W3C-compliant code, including XHTML 1.0 Transitional
• View and validate source code using GUI site development applications
• Use GUI site development applications to enforce compliance with accessibility standards
![Page 157: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/157.jpg)
The Transition from FrontPage • Expression Web generates XHTML 1.0 Transitional code
by default • Used for designing CSS Web sites • Dynamic content through ASP.Net 2.0 • No Preview pane • No Navigation view • No DHTML toolbar • Expression Web relies on the Microsoft .NET Framework
Version 2.0 Redistributable Package • No components that require proprietary sever extensions
![Page 158: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/158.jpg)
Microsoft Expression Web 3
• Site management • Page layout and design • Data connection
![Page 159: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/159.jpg)
Expression Web Views
• Page view – Design view – Split view – Code view
• Folders view • Publishing view • Reports view • Hyperlinks view
![Page 160: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/160.jpg)
Expression Web Menu Bar and Common Toolbar
![Page 161: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/161.jpg)
Opening Web Sites and Files in Expression Web
• Increased universality as an X/HTML editor • Can be opened locally or remotely over a
network
![Page 162: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/162.jpg)
Developing W3C-Compliant Code with Expression Web
• Default settings • Validating source code • Accessibility standards
![Page 163: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/163.jpg)
Summary
! Compare site development using X/HTML text editors to using GUI site management applications
! Configure site development applications to develop W3C-compliant code, including XHTML 1.0 Transitional
! View and validate source code using GUI site development applications
! Use GUI site development applications to enforce compliance with accessibility standards
![Page 164: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/164.jpg)
Lesson 18: Site Development with
Expression Web 3 – Basic Features
![Page 165: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/165.jpg)
Objectives • Create Web page and site templates that fulfill
design specifications • Add images to Web pages and create image maps
using GUI site development applications • Add text, tables and hyperlinks to Web pages
using GUI site development applications • Create page and site templates using GUI
site development applications • Apply page and site templates to new pages using
GUI site development applications
![Page 166: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/166.jpg)
Page Layout Options in Expression Web
• CSS positioning • X/HTML tables • X/HTML framesets
![Page 167: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/167.jpg)
Creating a New Site Using Expression Web
• Use the Site | New Site command – Empty Web site – One page Web site
• Home page automatically named default.html
• Can import image folders using File | Import | File command
![Page 168: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/168.jpg)
Page Layout with CSS
• CSS positioning accomplished using <div> tags that will contain content – Position property: absolute, fixed, relative,
static, inherent – It is preferable to use relative positioning – In Expression Web, a layer is a <div> with an
absolute, fixed or relative position
![Page 169: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/169.jpg)
Page Layout with CSS (cont’d)
• Statically positioned divisions – Are part of the normal flow and allow for flexible page
layouts – Have no set properties when added to a page – Can be nested to create complex layouts, and a child
division inherits properties from its parent division – Setting the margin-left and margin-right properties to
auto will center a division within its containing division or within the browser window
![Page 170: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/170.jpg)
Inserting Images with Expression Web
• Insert images located: – On Internet – On your computer – Already used in site
• Use the Insert Picture From File button • Provide alternative text to adhere to
accessibility standards
![Page 171: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/171.jpg)
Creating Hyperlinks with Expression Web
• Requires: – Content from which to link – Destination for link to point
• Use the Insert Hyperlink button
![Page 172: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/172.jpg)
Creating Image Maps with Expression Web
• Specify a portion of an image to act as hyperlink
• Use the Pictures toolbar • Choose a hotspot shape
– Rectangle – Circle – Polygon
![Page 173: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/173.jpg)
Creating Navigation Bars Using CSS
• Navigation bars in CSS – Are based on an unordered list – List can be styled – List elements can be styled – Links can be styled
![Page 174: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/174.jpg)
Expression Web’s Dynamic Web Templates
• Specify default settings or attributes • Reduce development time • Adhere consistently to site design
specifications
![Page 175: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/175.jpg)
Using Dynamic Web Templates
• Save a page as a dynamic Web template • Define editable regions in the template • Attach the dynamic Web template to
existing pages or create new pages from the template
• Detach a page from a template to access all regions of the page
![Page 176: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/176.jpg)
Pasting Content into Expression Web
• You can paste ready-made content – Word documents – XHTML documents
• Use the Edit | Paste command • You can specify to match destination
formatting, keep source formatting, remove formatting, keep HTML only or keep text only
![Page 177: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/177.jpg)
Summary
! Create Web page and site templates that fulfill design specifications
! Add images to Web pages and create image maps using GUI site development applications
! Add text, tables and hyperlinks to Web pages using GUI site development applications
! Create page and site templates using GUI site development applications
! Apply page and site templates to new pages using GUI site development applications
![Page 178: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/178.jpg)
Lesson 19: Site Development with
Expression Web 3 – Advanced Features
![Page 179: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/179.jpg)
Objectives
• Create Web forms using GUI site development applications
• Apply CSS to page and site templates using GUI site development applications
• Connect a Web page to a database using various methods
![Page 180: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/180.jpg)
Expression Web Styles
• Three ways to apply styles in Expression Web – Linked (external style sheet) – Embedded (internal style sheet) – Inline
• Three types of styles – Class-based – Element-based – ID-based
![Page 181: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/181.jpg)
Expression Web Styles (cont’d)
• Style precedence • Generated cascading style sheets • Using external styles • Using internal styles • Using inline styles • Attaching multiple style sheets
![Page 182: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/182.jpg)
Adding Interactivity to Web Pages
• Expression Web behaviors add interactivity and increased functionality to Web page elements
• A behavior is a combination of an event and an action – An event is a condition that causes a browser to trigger
a script – An action is an instruction that executes when an event
occurs • When you add a behavior to an element in a Web page,
Expression Web writes JavaScript code to manage the behavior
![Page 183: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/183.jpg)
Creating Web Forms with Expression Web
• Use the Form controls in the Toolbox to add form elements to a Web page
• To create a user-input form, add a Form control onto a page and drag the specific elements you want from the Toolbox into the form
• Forms data must be processed in some way • Expression Web can write code for form handling
if you specify that you are using FrontPage Server Extensions
![Page 184: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/184.jpg)
Connecting to Databases
• Use ASP.NET pages to integrate data from a database
• Drag ASP.NET controls from Toolbox onto the page – Data source controls connect to data source – Data-bound controls display data
• Set properties to control the appearance and behavior of retrieved data
![Page 185: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/185.jpg)
Expression Web Reports
• Expression Web offers a series of reports that you can run and monitor through Reports view
• The Reports view also offers an automated link checker
• Reports view is used mostly for site management
![Page 186: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/186.jpg)
Options for Replacing Old Webbots
• Web Search component • Themes and shared borders • Link bars
![Page 187: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/187.jpg)
Summary
! Create Web forms using GUI site development applications
! Apply CSS to page and site templates using GUI site development applications
! Connect a Web page to a database using various methods
![Page 188: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/188.jpg)
Lesson 20: Site Development
with Adobe Dreamweaver CS5 – Introduction
![Page 189: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/189.jpg)
Objectives
• Configure site development applications to develop W3C-compliant code, including XHTML 1.0 Transitional
• Add text, tables and hyperlinks to Web pages using GUI site development applications
• Apply CSS to page and site templates using GUI site development applications
![Page 190: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/190.jpg)
Adobe Dreamweaver CS5
• GUI Web page development application • Creates advanced Web page layout designs • Allows you to import X/HTML content without
reformatting code • Workspaces:
– App Developer and App Developer Plus – Classic – Coder and Coder Plus – Designer and Designer Compact
![Page 191: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/191.jpg)
Dreamweaver Layout Options
• AP elements (called “layers” in previous versions of Dreamweaver) – Absolute positioning
• X/HTML tables • Converting AP elements into tables • Converting tables into AP elements
![Page 192: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/192.jpg)
Summary
! Configure site development applications to develop W3C-compliant code, including XHTML 1.0 Transitional
! Add text, tables and hyperlinks to Web pages using GUI site development applications
! Apply CSS to page and site templates using GUI site development applications
![Page 193: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/193.jpg)
Lesson 21: Site Development with
Dreamweaver CS5 – Basic Features
![Page 194: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/194.jpg)
Objectives • Create Web page and site templates that fulfill
design specifications • Add images to Web pages and create image maps
using GUI site development applications • Add text, tables and hyperlinks to Web pages
using GUI site development applications • Create page and site templates using GUI site
development applications • Apply page and site templates to new pages using
GUI site development applications
![Page 195: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/195.jpg)
Page Layout in Dreamweaver
• The ability to manually position elements simplifies page layout
• AP elements were called “layers” in previous versions of Dreamweaver
![Page 196: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/196.jpg)
Creating Image Maps in Dreamweaver
• Three shapes for image map hotspots – Rectangle – Circle – Polygon
![Page 197: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/197.jpg)
Creating Templates in Dreamweaver
• Locked template areas • Editable and non-editable regions
![Page 198: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/198.jpg)
Importing Content in Dreamweaver
• X/HTML • Word document • RTF
![Page 199: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/199.jpg)
Summary
! Create Web page and site templates that fulfill design specifications
! Add images to Web pages and create image maps using GUI site development applications
! Add text, tables and hyperlinks to Web pages using GUI site development applications
! Create page and site templates using GUI site development applications
! Apply page and site templates to new pages using GUI site development applications
![Page 200: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/200.jpg)
Lesson 22: Site Development with Dreamweaver CS5 – Advanced Features
![Page 201: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/201.jpg)
Objectives
• Create Web forms using GUI site development applications
• Create rollover images on a Web page using scripting technology
• Add search capability to a Web site
![Page 202: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/202.jpg)
Rollover Images in Dreamweaver
• Use the Insert | Image Objects | Rollover Image command for rollover creation
• Dreamweaver writes DHTML code to create the rollover function
![Page 203: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/203.jpg)
Dreamweaver Web Forms
• Create forms without knowing X/HTML – You must implement server-side script to
process the form data online
![Page 204: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/204.jpg)
Dreamweaver Behaviors
• Applying behaviors to AP elements in Dreamweaver
• Dragging AP elements in Dreamweaver
![Page 205: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/205.jpg)
Dreamweaver Assets and Library
• Tools to store objects and files that will be used repeatedly during development
![Page 206: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/206.jpg)
Editing X/HTML in Dreamweaver
• GUI • HTML Code view
![Page 207: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/207.jpg)
Jump Menus in Dreamweaver
• Drop-down menu that automatically links to a specified URL when the user makes a selection
![Page 208: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/208.jpg)
Site Search Forms in Dreamweaver
• Add search form by using a server-side scripting language such as ColdFusion, ASP, JSP, PHP or Perl
• Tools on the World Wide Web – Google’s Custom Search Engine (CSE) – Wrensoft’s Zoom Search Engine
![Page 209: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/209.jpg)
Adobe Exchange
• Provides Dreamweaver developers with a place to download and submit Dreamweaver extensions
• Visit www.adobe.com/cfusion/exchange/
![Page 210: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/210.jpg)
Summary
! Create Web forms using GUI site development applications
! Create rollover images on a Web page using scripting technology
! Add search capability to a Web site
![Page 211: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/211.jpg)
Lesson 23: Creating Web Pages Using
Open-Source Tools
![Page 212: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/212.jpg)
Objectives • Write X/HTML code to create a static Web page
with text and images • Insert image files in Web pages using X/HTML • Compare site development using X/HTML text
editors to using GUI site management applications • Configure site development applications to
develop W3C-compliant code, including XHTML 1.0 Transitional
![Page 213: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/213.jpg)
Open-Source GUI Editors
• Common features • Drawbacks of open-source applications
– Limited features – Lack of group editing support – Developer issues – Transient support
![Page 214: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/214.jpg)
GUI HTML Editors vs. Text Editors
• KompoZer • OpenWebSuite • Firefox add-ons
– Firebug – Web Developer
![Page 215: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/215.jpg)
Open-Source Text Editors
• jEdit • Notepad++
![Page 216: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/216.jpg)
Creating a Static Web Page
• Choosing a version of HTML • Using images in an acceptable way • Conforming to customer expectations • Using comments
![Page 217: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/217.jpg)
Using Templates
• Basic template – little more than a raw XHTML code file
• More sophisticated templates can be found on the Web: – Open Web Design (www.openwebdesign.org) – OpenDesigns (www.opendesigns.org) – Themebot (http://themebot.com)
• Make sure template comes from a trusted source
![Page 218: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/218.jpg)
Checking Spelling
• A well-constructed page is composed of: – Properly validated code – Concise narrative that is written clearly, and
which quickly conveys a central message – Pages that use clear, descriptive titles – Narrative that uses proper grammar and
spelling
![Page 219: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/219.jpg)
Summary
! Write X/HTML code to create a static Web page with text and images
! Insert image files in Web pages using X/HTML ! Compare site development using X/HTML text
editors to using GUI site management applications ! Configure site development applications to
develop W3C-compliant code, including XHTML 1.0 Transitional
![Page 220: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/220.jpg)
Lesson 24: Image Editing with
Adobe Fireworks CS5
![Page 221: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/221.jpg)
Objectives
• Use image-editing software to create functional images that complement your page/site
• Perform common image manipulation functions • Create transparent and animated images, including
GIF, PNG • Create image layers using image-editing software
![Page 222: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/222.jpg)
Adobe Fireworks CS5 • Fireworks interface • Creating an image document • Adding text to images • Cropping images
![Page 223: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/223.jpg)
Adobe Fireworks CS5 (cont’d)
• Image layers in Fireworks • Image states in Fireworks
– Creates animation
• Transparent images in Fireworks • Image slices in Fireworks
– Speeds perceived download time for larger images
![Page 224: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/224.jpg)
Summary
! Use image-editing software to create functional images that complement your page/site
! Perform common image manipulation functions ! Create transparent and animated images, including
GIF, PNG ! Create image layers using image-editing software
![Page 225: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/225.jpg)
Lesson 25: Multimedia with
Adobe Flash Professional CS5
![Page 226: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/226.jpg)
Objectives
• Identify multimedia Web design principles, and choose appropriate multimedia technologies for a site based on usability criteria
• Identify Shockwave-Flash (SWF) technology features and authoring software
• Add SWF animation files and SVG files to X/HTML pages
![Page 227: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/227.jpg)
The History of Flash
• Influential media type • Media-rich content and fast download times • Three Flash applications in the new Adobe
Creative Suite 5 (CS5) – Adobe Flash Catalyst CS5 – Adobe Flash Builder 4 Standard – Adobe Flash Professional CS5
![Page 228: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/228.jpg)
Flash Technology Features
• Vector graphics • Streaming capability • Timeline • Layers • Flash and browsers • Flash and X/HTML
![Page 229: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/229.jpg)
Developing with Flash
• Flash application is both development tool and testing tool
• Total Flash? – Creating Flash movies can be time-consuming – Common uses for Flash generally serve the
purpose of rich multimedia design – Flash can also provide effective navigation
elements that offer an enhanced experience while users are navigating the site
![Page 230: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/230.jpg)
Flash Shapes
• Lines • Ovals/circles • Squares/rectangles
![Page 231: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/231.jpg)
Flash Drawing Modes
• Merge drawing mode (default) • Object drawing mode
![Page 232: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/232.jpg)
Color and Fills in Flash
• Fills – Solid colors – Gradients – Patterns
![Page 233: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/233.jpg)
Summary
! Identify multimedia Web design principles, and choose appropriate multimedia technologies for a site based on usability criteria
! Identify Shockwave-Flash (SWF) technology features and authoring software
! Add SWF animation files and SVG files to X/HTML pages
![Page 234: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/234.jpg)
Lesson 26: Multimedia with
Flash Professional CS5 – Timeline, Layers, Symbols
and Buttons
![Page 235: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/235.jpg)
Objectives • Identify Shockwave-Flash (SWF)
technology features and authoring software • Use SWF-authoring software to create
animations, add buttons, perform “tweening,” create movie clips, apply masks
• Add SWF animation files and SVG files to X/HTML pages
• Define and contrast client-side and server-side technologies used to create dynamic content for Web pages
![Page 236: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/236.jpg)
Flash Timeline
• Flash frame types – (Normal) frame – Keyframe – Blank keyframe
![Page 237: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/237.jpg)
Flash Layers
• Used to run multiple timelines independently
![Page 238: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/238.jpg)
Saving and Publishing Flash Movies
• Publish a saved file when it is complete and ready to display on the Web
• When a file is published, three files are created: – FLA file: the Flash file you created that opens in the
Flash application – SWF file: the movie that will open in the Web page – HTML file: the page automatically generated to load
the file in the browser
![Page 239: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/239.jpg)
Flash Symbols and Buttons
• Symbols are graphics, buttons or movie clips that are stored in a Flash movie’s library
• Buttons are triggered by mouse events
![Page 240: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/240.jpg)
Customizing the Flash Library
• Library allows you to customize and organize your stored items into folders
![Page 241: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/241.jpg)
Summary
! Identify Shockwave-Flash (SWF) technology features and authoring software
! Use SWF-authoring software to create animations, add buttons, perform “tweening,” create movie clips, apply masks
! Add SWF animation files and SVG files to X/HTML pages
! Define and contrast client-side and server-side technologies used to create dynamic content for Web pages
![Page 242: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/242.jpg)
Lesson 27: Multimedia with
Flash Professional CS5 – Tweens
![Page 243: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/243.jpg)
Objectives
• Identify Shockwave-Flash (SWF) technology features and authoring software
• Use SWF-authoring software to create animations, add buttons, perform “tweening,” create movie clips, apply masks
![Page 244: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/244.jpg)
Flash Tweens
• Motion tweens • Shape tweens
– Morphing
![Page 245: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/245.jpg)
Flash Tweens (cont’d)
• Tweening rules – Only one tween can exist in a layer at a time – Motion tweens require symbols – Shape tweens cannot use symbols
• Tweening and layers – A movie with many tweens necessarily consists
of many layers
![Page 246: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/246.jpg)
Motion Tweens in Flash
• Classic tween – Keyframe-based: consists of a group of
individually selectable frames in the timeline • Motion tween
– Object-based: consists of one target object over the entire tween span
![Page 247: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/247.jpg)
About Tweened Animation
• 2-D X and Y position • 3-D Z position (movie
clips only) • 2-D rotation (around
Z-axis) • 3-D X, Y and Z
rotation (movie clips only)
• Skew X and Y • Scale X and Y • Color effects • Filter properties
The properties of an object that can be tweened include:
![Page 248: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/248.jpg)
Modifying the Motion Path
• You can modify a motion path by dragging points along the path, or adjusting curves of the path
• Flash includes the Motion Editor, which offers more granular animation control
![Page 249: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/249.jpg)
Shape Tweens in Flash
• You can use a shape tween to transform one shape into another shape
• You cannot use symbols when creating shape tweens
![Page 250: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/250.jpg)
Tweening Text in Flash
• Text is a tweenable object type • You can tween text that has not been
converted to a symbol • You can also tween text that has been
converted to a symbol (motion tween only)
![Page 251: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/251.jpg)
Summary
! Identify Shockwave-Flash (SWF) technology features and authoring software
! Use SWF-authoring software to create animations, add buttons, perform “tweening,” create movie clips, apply masks
![Page 252: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/252.jpg)
Lesson 28: Multimedia with
Flash Professional CS5 – Movie Clips
![Page 253: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/253.jpg)
Objectives • Configure site development applications to develop
W3C-compliant code, including XHTML 1.0 Transitional • Use SWF-authoring software to create animations, add
buttons, perform “tweening,” create movie clips, apply masks
• Add SWF animation files and SVG files to X/HTML pages
• Apply plug-in/viewer technology to Web pages to support various file types
• Use JavaScript to detect browsers, redirect pages, preload pages and confirm user choices
![Page 254: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/254.jpg)
Flash Movie Clips
• Animation that is embedded into a Flash movie yet runs independently of the movie
![Page 255: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/255.jpg)
Adding Sound to Flash Files
• Flash supports – AIFF files (Macintosh) – WAV files (PC) – MP3 files (all systems)
• Event sounds • Streamed sounds
![Page 256: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/256.jpg)
Adding Flash Movies to X/HTML Files
• Flash can create the required HTML code, which can be inserted into the X/HTML page
![Page 257: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/257.jpg)
Testing for the Flash Player Plug-In
• Use JavaScript to test the user’s browser for the Flash Player plug-in
![Page 258: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/258.jpg)
Summary
! Configure site development applications to develop W3C-compliant code, including XHTML 1.0 Transitional
! Use SWF-authoring software to create animations, add buttons, perform “tweening,” create movie clips, apply masks
! Add SWF animation files and SVG files to X/HTML pages
! Apply plug-in/viewer technology to Web pages to support various file types
! Use JavaScript to detect browsers, redirect pages, preload pages and confirm user choices
![Page 259: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/259.jpg)
Lesson 29: Multimedia with
Flash Professional CS5 – ActionScript, Masks and
Practical Uses
![Page 260: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/260.jpg)
Objectives • Identify accessibility issues and solutions related
to images and animation • Use SWF-authoring software to create animations,
add buttons, perform “tweening,” create movie clips, apply masks
• Add SWF animation files and SVG files to X/HTML pages
• Identify strategies and benefits of using SWF and SVG technologies in training industry/ instructional design to facilitate learning
![Page 261: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/261.jpg)
Flash ActionScript
• Language used to write actions in Flash • Flash ActionScript and basic programming
concepts
![Page 262: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/262.jpg)
Mask Layers in Flash
• Mask – special type of layer that covers an area of the stage, allowing a part you specify to show through
• Effect similar to a searching light moving over text, highlighting some text in passing
![Page 263: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/263.jpg)
Using SWF and SVG Files on the Web
• Embedding SWF and SVG files in X/HTML pages
• Instructional design with SWF and SVG – Benefits of using SWF and SVG for e-learning
![Page 264: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/264.jpg)
Flash and Accessibility
• Flash is a widely supported format for vector animation and rich Web content
• Advise your site users that your site uses Flash content
• Check your users’ browsers for the correct version of the Flash Player plug-in
• Provide a link for users to easily download and install the correct plug-in
![Page 265: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/265.jpg)
Summary
! Identify accessibility issues and solutions related to images and animation
! Use SWF-authoring software to create animations, add buttons, perform “tweening,” create movie clips, apply masks
! Add SWF animation files and SVG files to X/HTML pages
! Identify strategies and benefits of using SWF and SVG technologies in training industry/ instructional design to facilitate learning
![Page 266: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/266.jpg)
Lesson 30: JavaScript and DHTML
Fundamentals
![Page 267: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/267.jpg)
Objectives • Define and contrast client-side and server-side
technologies used to create dynamic content for Web pages • Identify common JavaScript objects, properties and
methods • Use JavaScript to detect browsers, redirect pages, preload
pages and confirm user choices • Use JavaScript dot notation to access X/HTML objects • Create rollover images on a Web page using scripting
technology • Define Dynamic HTML (DHTML) and the technologies it
requires, and write browser-specific DHTML code for use with Firefox, Internet Explorer and other browsers
• Identify the functionality of pop-up/pop-under windows
![Page 268: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/268.jpg)
JavaScript and Common Programming Concepts
• Scripting languages – Subsets of larger languages
• Objects – Encapsulate predetermined attributes or
behaviors • Properties
– Represent various attributes of the object • Methods
– Actions an object can be made to perform
![Page 269: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/269.jpg)
What Is JavaScript?
• Scripting language • Object-based, not object-oriented • Event-driven • Strengths of JavaScript
– Quick development – Easy to learn – Platform independence
![Page 270: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/270.jpg)
JavaScript vs. Other Languages
• JavaScript vs. Java • JavaScript vs. VBScript • JavaScript vs. JScript
– ECMA Script
![Page 271: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/271.jpg)
Embedding JavaScript into X/HTML
• The <script> tag • Document <head> or <body> section • Dot notation
![Page 272: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/272.jpg)
Using JavaScript to Communicate with the User
• The alert() method • The prompt() method
– Concatenation
• The open() method
![Page 273: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/273.jpg)
JavaScript Functions
• JavaScript uses functions to call multiple commands
• A function is like a container that allows you to give a common name to a series of commands so that they can be executed as a single unit
• The commands are enclosed within curly braces { }, which group them to the function name declared prior to the opening curly brace
![Page 274: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/274.jpg)
Using JavaScript for Browser Detection
• The navigator object • Sniffers and redirections • Image preloading
![Page 275: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/275.jpg)
Dynamic HTML (DHTML)
• DHTML and the Document Object Model (DOM)
• DHTML limitations • CSS and DHTML • Scripting languages and DHTML • DHTML implementation • Cross-browser DHTML
![Page 276: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/276.jpg)
Summary
! Define and contrast client-side and server-side technologies used to create dynamic content for Web pages
! Identify common JavaScript objects, properties and methods
! Use JavaScript to detect browsers, redirect pages, preload pages and confirm user choices
! Use JavaScript dot notation to access X/HTML objects ! Create rollover images on a Web page using scripting
technology ! Define Dynamic HTML (DHTML) and the technologies it
requires, and write browser-specific DHTML code for use with Firefox, Internet Explorer and other browsers
! Identify the functionality of pop-up/pop-under windows
![Page 277: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/277.jpg)
Lesson 31: Plug-Ins and Java Applets
![Page 278: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/278.jpg)
Objectives • Apply plug-in/viewer technology to Web
pages to support various file types • Create an X/HTML link to a downloadable
file • Create rich media streaming ads and
compare them to conventional online ads • Define Java applet functionality, and create
an animated applet for display on a Web site
![Page 279: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/279.jpg)
Plug-In Technology
• What are plug-ins? • How do plug-ins work? • How do plug-ins affect a Web developer?
![Page 280: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/280.jpg)
Plug-In Installation
• Online installation • Offline installation • Pre-installation
![Page 281: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/281.jpg)
Adobe Shockwave and Flash Players
• Plug-ins that display and play multimedia content
• SWF files (Shockwave-Flash)
![Page 282: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/282.jpg)
Adobe Reader
• Portable Document Format (PDF) files – Can be transferred across platforms and retain
formatting
![Page 283: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/283.jpg)
RealNetworks RealPlayer
• Streaming audio • Streaming video
![Page 284: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/284.jpg)
Rich Media Content
• Creating rich media ads • Rich media ads vs. conventional ads
![Page 285: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/285.jpg)
Creating a Downloadable File
• Why files download • Linking to files • Providing links to plug-ins • Identifying downloads to users
![Page 286: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/286.jpg)
Introduction to Java
• Strengths of Java – Programming language – Platform-neutral – Mini-applications called applets
![Page 287: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/287.jpg)
Java Applets
• Small in file size • Secure • Fast • Cross-platform compatible • Multi-threaded • Client-side programs
![Page 288: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/288.jpg)
Applets and Animation
• Many forms of animation can be executed with Java
![Page 289: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/289.jpg)
Applet Authoring Tools and Resources
• Java applet tools make it possible for more developers to create Java applets and add them to Web pages
• Applet resources – Sun Developer Network — Applets page (http://
java.sun.com/applets) – Java Boutique (www.javaboutique.internet.com) – Gamelan.com (www.developer.com/java/)
![Page 290: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/290.jpg)
Summary ! Apply plug-in/viewer technology to Web
pages to support various file types ! Create an X/HTML link to a downloadable
file ! Create rich media streaming ads and
compare them to conventional online ads ! Define Java applet functionality, and create
an animated applet for display on a Web site
![Page 291: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/291.jpg)
Lesson 32: HTTP Servers and Web Applications
![Page 292: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/292.jpg)
Objectives • Create and configure Domain Name System (DNS) entries • Define and contrast client-side and server-side
technologies used to create dynamic content for Web pages • Define Secure XML • Use Common Gateway Interface (CGI) to process Web
forms • Use cookies to enhance Web site functionality • Define syndication • Use RSS and Atom to create a news feed • Describe the purpose of an aggregator in a feed • Identify the benefit of RSS to e-mail conversion, including
push-based and pull-based technologies
![Page 293: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/293.jpg)
What Is an HTTP Server?
• Microsoft Internet Information Services (IIS) – Personal Web Server
• Apache server
![Page 294: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/294.jpg)
Accessing Servers and Services
• Domain Name System (DNS) – Translates word-based domain names into
numerical IP addresses • Creating DNS entries • Ports
![Page 295: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/295.jpg)
Basic HTTP Server Administration
• Administration through browser interface • Administration using applications that run
on the server
![Page 296: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/296.jpg)
Server-Side Technologies
• JavaServer Pages (JSP) • Active Server Pages (ASP) • Common Gateway Interface (CGI)
![Page 297: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/297.jpg)
Web Servers and Cookies
• Small text files sent from Web site to user’s browsers
• State maintenance with cookies • Cookie facts and myths
![Page 298: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/298.jpg)
Enabling, Disabling and Deleting Cookies
• Choose which cookies to accept • Delete cookies from your system manually • New technology
![Page 299: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/299.jpg)
Setting Cookie Files
• Using JavaScript to set cookies on a visitor’s system
![Page 300: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/300.jpg)
XML and Web Applications
• Secure XML
![Page 301: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/301.jpg)
Syndicated Feeds
• Benefits of syndication • Feed formats
– RSS 2.0 – Atom
• Feed-burning services – RSS in e-mail conversion
![Page 302: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/302.jpg)
Summary
! Create and configure Domain Name System (DNS) entries ! Define and contrast client-side and server-side
technologies used to create dynamic content for Web pages ! Define Secure XML ! Use Common Gateway Interface (CGI) to process Web
forms ! Use cookies to enhance Web site functionality ! Define syndication ! Use RSS and Atom to create a news feed ! Describe the purpose of an aggregator in a feed ! Identify the benefit of RSS to e-mail conversion, including
push-based and pull-based technologies
![Page 303: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/303.jpg)
Lesson 33: Databases
![Page 304: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/304.jpg)
Objectives • Define elements of a database and their
functionality • Identify general database query types • Define the three Database Management System
(DBMS) types • Identify information types that can be contained in
a database, including X/HTML, images, XML, inventories
• Connect a Web page to a database using various methods
![Page 305: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/305.jpg)
Web Design and Databases
• Databases provide information storage • Traditional databases store and organize
information in fields, records and files • Hypertext databases store information as
objects
![Page 306: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/306.jpg)
Database Anatomy
• Schema • Table
– Field (column) – Record (row) – File
![Page 307: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/307.jpg)
Database Anatomy (cont’d)
![Page 308: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/308.jpg)
Database Queries
• Menu query • Query by example • Query language
– Structured Query Language (SQL)
![Page 309: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/309.jpg)
Database Management System (DBMS)
• Flat-file DBMS • Relational DBMS (RDBMS) • Multidimensional DBMS
![Page 310: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/310.jpg)
DBMS Technologies
• ODBC • JDBC • COLD • BLOB • VSAM
• ISAM • OLAP • RPG • ADO
![Page 311: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/311.jpg)
Connecting Web Pages to Databases
• Data-driven Web sites use a server-side program to combine data from a database with page templates to generate the X/HTML pages that a Web site visitor sees
• Data-driven Web sites typically use SQL queries to manipulate a database
![Page 312: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/312.jpg)
Database Tools, Products and Programs
• Oracle • DB2 • Microsoft SQL Server • FileMaker Pro • Lotus Domino • Microsoft Visual
FoxPro • Microsoft Visual
InterDev
• CGI/Perl • ASP.NET • ColdFusion • Dreamweaver • Primasoft DB-HTML
Converter Pro • Sybase PowerBuilder • Sybase SQL
Anywhere
![Page 313: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/313.jpg)
Summary ! Define elements of a database and their
functionality ! Identify general database query types ! Define the three Database Management System
(DBMS) types ! Identify information types that can be contained in
a database, including X/HTML, images, XML, inventories
! Connect a Web page to a database using various methods
![Page 314: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/314.jpg)
Lesson 34: Web Site Publishing
and Maintenance
![Page 315: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/315.jpg)
Objectives • Use a staging/mockup server to test a site • Perform site testing • Compare in-house Web site hosting to hosting
with an Internet Service Provider (ISP) or Application Service Provider (ASP)
• Publish a Web site using an FTP client • Identify site security issues, including attacks and
ways to thwart them • Secure a server • Maintain the Web site • Document changes to the site
![Page 316: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/316.jpg)
Web Site Testing
• Staging server – Staging server vs. production or “live” server – Developing and testing on staging server – Staging server elements
• Final testing
![Page 317: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/317.jpg)
Web Site Publishing
• The final step in Web site development is to publish your site to the World Wide Web
• Use File Transfer Protocol (FTP) to transfer files over the Internet
![Page 318: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/318.jpg)
Web Site Hosting
• Hosting in-house • Hosting by Internet Service Provider (ISP)
or Application Service Provider (ASP) • Advantages and disadvantages of hosting
– Cost – Speed – Reliability
![Page 319: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/319.jpg)
Web Publishing with an FTP Client
• WS_FTP Professional client – Generic FTP client – Not associated with a site-authoring tool
![Page 320: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/320.jpg)
Web Publishing with Expression Web
• Easy publishing of sites created with Expression Web • Uses FTP or HTTP
– HTTP to publish to Web server that has FrontPage Server Extensions installed
• Offers the ability to work on a remote staging server and publish your changes to a remote production Web server or to work directly on a remote production Web server
• Designed to simplify task of publishing Web site
![Page 321: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/321.jpg)
Web Publishing with Dreamweaver
• Easy publishing of sites created with Dreamweaver
• Uses FTP to publish Web site files
![Page 322: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/322.jpg)
Comparing Web Publishing Tools
• Choosing the tool with which to publish Web site pages depends on the tools or methods used to develop your site
• If you used a GUI site development tool to create your site, use the same tool to publish your site
• If you manually coded your Web pages, you need only an FTP client for publishing
![Page 323: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/323.jpg)
Maintaining Web Sites
• User feedback – Direct (e-mails, survey forms) – Indirect (server logs)
• Revising site features • Link checking
– Manual – Automatic
• Documenting Web site changes
![Page 324: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/324.jpg)
Web Server and Web Site Security
• Security principles – Use strong passwords – Disable unnecessary services – Apply patches – Restrict access
![Page 325: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/325.jpg)
Web Server and Web Site Security (cont’d)
• Common Web site security issues – Social engineering – Denial-of-service (DOS) attacks – Brute-force attacks
![Page 326: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/326.jpg)
Summary ! Use a staging/mockup server to test a site ! Perform site testing ! Compare in-house Web site hosting to hosting
with an Internet Service Provider (ISP) or Application Service Provider (ASP)
! Publish a Web site using an FTP client ! Identify site security issues, including attacks and
ways to thwart them ! Secure a server ! Maintain the Web site ! Document changes to the site
![Page 327: Web Design Specialist - · PDF fileCreate a site metaphor ! ... • Explain how the TinyURL service works . Browsers and Navigation • Components of browser functionality](https://reader031.vdocuments.mx/reader031/viewer/2022021817/5a9dffa07f8b9ada718c4da1/html5/thumbnails/327.jpg)
Web Design Specialist
• For information about the CIW Web Design Specialist exam and CIW certifications, visit www.CIWcertified.com