Web Design Specialist. Lesson 1: Overview of Web Design Concepts.
-
Upload
audrey-stephens -
Category
Documents
-
view
214 -
download
0
Transcript of Web Design Specialist. Lesson 1: Overview of Web Design Concepts.
![Page 1: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/1.jpg)
Web Design Specialist
![Page 2: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/2.jpg)
Lesson 1:Overview of Web Design
Concepts
![Page 3: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/5.jpg)
Web Design Concepts
• Push technology
• Multimedia
• Interactivity
![Page 6: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/7.jpg)
SummaryBalance 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 multimediaWrite 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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/8.jpg)
Lesson 2:Web Development Teams
![Page 9: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/11.jpg)
Skills Contributing toWeb Design Teams
Management Technical
Creative
Web Design Team
![Page 12: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/12.jpg)
Web Project Collaboration
• Intranets
• Wiki sites
• Online conferencing
• Instant messaging (IM)
![Page 13: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/13.jpg)
Your Web Design Portfolio
• Web portfolio contents
• Updating your portfolio
![Page 14: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/16.jpg)
Lesson 3:Web Project Management
Fundamentals
![Page 17: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/20.jpg)
Project Documentationand Communication
• Scope creep
• Adjusting the project plan
• Paper trail
• Project tracking report– Issues log
![Page 21: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/21.jpg)
SummaryDetermine 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 planCreate a project tracking report Conduct a project evaluation
![Page 22: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/22.jpg)
Lesson 4:Web Site Development Process
![Page 23: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/24.jpg)
Understandingthe 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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/25.jpg)
Defining a Web Site Vision
• Vision statement– Value– Measurable goal
![Page 26: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/26.jpg)
From Vision to Strategy
• Defining the Web site strategy
• Defining the Web site tactics
![Page 27: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/27.jpg)
Web Site Specifications
• Functionality
• Content
• Architecture
• Design
![Page 28: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/31.jpg)
Mindmapping a Web Site
![Page 32: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/35.jpg)
Lesson 5:Web Page Layout and Elements
![Page 36: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/38.jpg)
Web Users and Site Design
• Design restrictions
• Site characteristics– Navigation– Interactivity– Database integration
![Page 39: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/40.jpg)
Color and Web Design
• Cultural perceptions
• Additive color display
• Color formats– RGB– Hexadecimal
![Page 41: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/41.jpg)
Color and Web Design (cont’d)
• Color on computer monitors
![Page 42: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/42.jpg)
Color and Web Design (cont’d)
• Browser-safe colors– Dithering
• Color combinations
• Color transitions
![Page 43: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/43.jpg)
Fonts and Web Design
• Limitations
• Typography– Serif fonts
– Sans-serif fonts
A F s t
A F s t
![Page 44: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/47.jpg)
Lesson 6:Web Site Usabilityand Accessibility
![Page 48: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/49.jpg)
Audience Usabilityand Accessibility
• Know your audience– Demographics– Technology capabilities– Disabilities
![Page 50: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/50.jpg)
Defining Usability
• Elements of usability
• Software technology
![Page 51: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/52.jpg)
Web Page Accessibility
• WAI conformance
• Section 508 of the Rehabilitation Act
![Page 53: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/54.jpg)
Lesson 7:Browsers
![Page 55: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/56.jpg)
Browsers and Navigation
• Components of browser functionality– Internet access layer– Navigation layer– Presentation layer
![Page 57: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/58.jpg)
Major, Minor and Alternative Browsers
• Mozilla Firefox
• Microsoft Internet Explorer
• Opera
• Apple Safari
• Google Chrome
![Page 59: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/62.jpg)
Lesson 8:Navigation Concepts
![Page 63: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/65.jpg)
Navigation Hierarchy
• Positional awareness
• Navigation depth, icons and controls
• Beyond the browser
![Page 66: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/66.jpg)
Site Structure, URLsand 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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/67.jpg)
Familiar Navigation Conventions
• Labels
• Corporate logos
• Branding images
![Page 68: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/70.jpg)
Lesson 9:Web Graphics
![Page 71: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/73.jpg)
Web Site Images
• Stock photography
• Photosharing
• Adding metadata to images
![Page 74: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/74.jpg)
Digital Imaging Concepts
• Pixels
• Color depth
• Image resolution
• Palettes– Dithering
![Page 75: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/76.jpg)
Graphics Applications
• Vector-based drawing programs
• Paint programs
![Page 77: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/77.jpg)
Image File Formats
![Page 78: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/78.jpg)
Creating and Optimizing Images
• Web images and accessibility
• Image optimization
• Image slicing and splicing
![Page 79: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/79.jpg)
Essential Graphic Design Concepts
• Composition
• Grid-based layout
• Typography
![Page 80: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/80.jpg)
SummaryDistinguish 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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/82.jpg)
Lesson 10:Multimedia and the Web
![Page 83: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/84.jpg)
Current Multimedia Capabilities
• Limitations– Bandwidth– Browser support technology
• Time factor
![Page 85: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/85.jpg)
Multimedia Types
• Animation
• Audio
• Video
![Page 86: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/88.jpg)
Video and the Web
• Downloaded or streamed
• Internet TV
![Page 89: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/89.jpg)
Goals of a Multimedia Site
• Audience
• Message
• Interface
• Elements
![Page 90: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/90.jpg)
Multimedia Site Design Basics
• Scene and setting
![Page 91: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/91.jpg)
User Interaction
• “Spiral” concept– Interest– Activity– Resolution
![Page 92: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/93.jpg)
SummaryUse 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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/94.jpg)
Lesson 11:Ethical and Legal Issues
in Web Development
![Page 95: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/96.jpg)
Ethical Issues and the Web
• Spam
• Privacy and trust
![Page 97: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/98.jpg)
SummaryDefine 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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/99.jpg)
Lesson 12:HTML and the
Evolution of Markup
![Page 100: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/101.jpg)
Function of Markup Languages
• Tags
• Presentational / procedural markup– Describes appearance
• Logical / structural markup– Describes context
![Page 102: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/102.jpg)
SGML
• Standard Generalized Markup Language (SGML)
• A metalanguage– Language used for creating other languages
![Page 103: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/104.jpg)
The HTML Standard
• Who controls HTML?– World Wide Web Consortium (W3C)
![Page 105: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/106.jpg)
Separating Format fromStructure in HTML
• CSS2
• Deprecated tags
![Page 107: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/107.jpg)
XHTML
• Extensible HTML (HTML)
• Reformulation of HTML 4.01
![Page 108: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/110.jpg)
Lesson 13:XML and XHTML
![Page 111: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/112.jpg)
What Is XML?
• XML: A subset of SGML
• XML: Addressing HTML limitations
![Page 113: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/113.jpg)
XML Goals
• Ten goals of the XML Recommendation
![Page 114: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/120.jpg)
Lesson 14:Web Page Structure –Tables and Framesets
![Page 121: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/122.jpg)
Creating Structure with X/HTML Tables
• Page layout and tables
• Tabular format for content
![Page 123: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/123.jpg)
Diagramming a BasicX/HTML Table
![Page 124: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/126.jpg)
The X/HTML <frameset> Tag
• Relative sizing– Percentage
• Absolute sizing– Pixels
![Page 127: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/127.jpg)
The X/HTML <frame> Tag
• Placement of <frameset> tags
• Creating a navigation frame
![Page 128: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/128.jpg)
Targeting Hyperlinksin X/HTML
• Frame relationships
• Adding a frameset to a frameset
![Page 129: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/129.jpg)
The X/HTML <noframes> Tag
• Alternative text appears to users whose browsers cannot support frames
![Page 130: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/131.jpg)
Lesson 15:Cascading Style Sheets
![Page 132: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/133.jpg)
Style Sheets
• Typographical control elements
• Defines style instructions for one or more X/HTML documents
![Page 134: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/134.jpg)
Cascading Style Sheets
• Multiple style definitions in a single document
• Inheritance of style definitions
![Page 135: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/139.jpg)
Page Layout with CSS
• CSS box model
![Page 140: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/140.jpg)
Page Layout with CSS (cont’d)
• Block and inline boxes• Positioning schemes
![Page 141: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/143.jpg)
Lesson 16:Site Content and Metadata
![Page 144: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/149.jpg)
Metadata
• Data about data
• The <!DOCTYPE> tag
• The <meta> tag
![Page 150: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/150.jpg)
The <meta> Tag andDocument Identification
• The name attribute
• The http-equiv attribute
• The content attribute
• Using <meta> tags
![Page 151: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/151.jpg)
The <meta> Tagand 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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/152.jpg)
The <meta> Tag and Delayed File Change
• Refreshes a page automatically
• Dublin Core metadata initiative
![Page 153: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/153.jpg)
SummaryConsider 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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/155.jpg)
Lesson 17:Site Development with MicrosoftExpression Web 3 – Introduction
![Page 156: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/158.jpg)
Microsoft Expression Web 3
• Site management
• Page layout and design
• Data connection
![Page 159: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/160.jpg)
Expression Web Menu Bar and Common Toolbar
![Page 161: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/161.jpg)
Opening Web Sites and Filesin Expression Web
• Increased universality as an X/HTML editor
• Can be opened locally or remotely over a network
![Page 162: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/162.jpg)
Developing W3C-Compliant Code with Expression Web
• Default settings
• Validating source code
• Accessibility standards
![Page 163: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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 GUIsite development applications
Use GUI site development applications to enforce compliance with accessibility standards
![Page 164: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/164.jpg)
Lesson 18:Site Development with
Expression Web 3 – Basic Features
![Page 165: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/166.jpg)
Page Layout Options in Expression Web
• CSS positioning
• X/HTML tables
• X/HTML framesets
![Page 167: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/177.jpg)
SummaryCreate 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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/178.jpg)
Lesson 19:Site Development with Expression Web 3 – Advanced Features
![Page 179: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/179.jpg)
Objectives
• Create Web forms using GUIsite 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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/186.jpg)
Options for Replacing Old Webbots
• Web Search component
• Themes and shared borders
• Link bars
![Page 187: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/188.jpg)
Lesson 20:Site Development
with Adobe Dreamweaver CS5 – Introduction
![Page 189: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/193.jpg)
Lesson 21:Site Development with
Dreamweaver CS5 – Basic Features
![Page 194: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/196.jpg)
Creating Image Maps in Dreamweaver
• Three shapes for image map hotspots– Rectangle– Circle– Polygon
![Page 197: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/197.jpg)
Creating Templates in Dreamweaver
• Locked template areas
• Editable and non-editable regions
![Page 198: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/198.jpg)
Importing Contentin Dreamweaver
• X/HTML
• Word document
• RTF
![Page 199: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/199.jpg)
SummaryCreate 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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/200.jpg)
Lesson 22:Site Development with Dreamweaver CS5 –Advanced Features
![Page 201: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/202.jpg)
Rollover Imagesin 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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/204.jpg)
Dreamweaver Behaviors
• Applying behaviors to AP elements in Dreamweaver
• Dragging AP elements in Dreamweaver
![Page 205: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/206.jpg)
Editing X/HTMLin Dreamweaver
• GUI
• HTML Code view
![Page 207: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/210.jpg)
Summary
Create Web forms using GUIsite development applications
Create rollover images on a Web page using scripting technology
Add search capability to a Web site
![Page 211: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/211.jpg)
Lesson 23:Creating Web Pages Using
Open-Source Tools
![Page 212: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/214.jpg)
GUI HTML Editors vs. Text Editors
• KompoZer
• OpenWebSuite
• Firefox add-ons– Firebug– Web Developer
![Page 215: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/215.jpg)
Open-Source Text Editors
• jEdit
• Notepad++
![Page 216: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/220.jpg)
Lesson 24:Image Editing with
Adobe Fireworks CS5
![Page 221: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/222.jpg)
Adobe Fireworks CS5
• Fireworks interface
• Creating an image document
• Adding text to images
• Cropping images
![Page 223: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/225.jpg)
Lesson 25:Multimedia with
Adobe Flash Professional CS5
![Page 226: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/230.jpg)
Flash Shapes
• Lines
• Ovals/circles
• Squares/rectangles
![Page 231: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/231.jpg)
Flash Drawing Modes
• Merge drawing mode (default)
• Object drawing mode
![Page 232: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/232.jpg)
Color and Fills in Flash
• Fills– Solid colors– Gradients– Patterns
![Page 233: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/234.jpg)
Lesson 26:Multimedia with
Flash Professional CS5 – Timeline, Layers, Symbols
and Buttons
![Page 235: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/236.jpg)
Flash Timeline
• Flash frame types– (Normal) frame– Keyframe– Blank keyframe
![Page 237: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/237.jpg)
Flash Layers
• Used to run multiple timelines independently
![Page 238: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/242.jpg)
Lesson 27:Multimedia with
Flash Professional CS5 – Tweens
![Page 243: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/244.jpg)
Flash Tweens
• Motion tweens
• Shape tweens– Morphing
![Page 245: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/252.jpg)
Lesson 28:Multimedia with
Flash Professional CS5 – Movie Clips
![Page 253: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/256.jpg)
Adding Flash Moviesto X/HTML Files
• Flash can create the required HTML code, which can be inserted into the X/HTML page
![Page 257: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/258.jpg)
Summary
Configure site development applications to developW3C-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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/259.jpg)
Lesson 29:Multimedia with
Flash Professional CS5 –ActionScript, Masks and
Practical Uses
![Page 260: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/261.jpg)
Flash ActionScript
• Language used to write actions in Flash
• Flash ActionScript and basic programming concepts
![Page 262: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/263.jpg)
Using SWF and SVG Fileson 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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/266.jpg)
Lesson 30:JavaScript and DHTML
Fundamentals
![Page 267: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/270.jpg)
JavaScript vs. Other Languages
• JavaScript vs. Java
• JavaScript vs. VBScript
• JavaScript vs. JScript– ECMA Script
![Page 271: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/271.jpg)
Embedding JavaScriptinto X/HTML
• The <script> tag
• Document <head> or <body> section
• Dot notation
![Page 272: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/274.jpg)
Using JavaScriptfor Browser Detection
• The navigator object
• Sniffers and redirections
• Image preloading
![Page 275: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/277.jpg)
Lesson 31:Plug-Ins and Java Applets
![Page 278: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/280.jpg)
Plug-In Installation
• Online installation
• Offline installation
• Pre-installation
![Page 281: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/282.jpg)
Adobe Reader
• Portable Document Format (PDF) files– Can be transferred across platforms and retain
formatting
![Page 283: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/283.jpg)
RealNetworks RealPlayer
• Streaming audio
• Streaming video
![Page 284: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/284.jpg)
Rich Media Content
• Creating rich media ads
• Rich media ads vs. conventional ads
![Page 285: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/286.jpg)
Introduction to Java
• Strengths of Java– Programming language– Platform-neutral– Mini-applications called applets
![Page 287: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/288.jpg)
Applets and Animation
• Many forms of animation can be executed with Java
![Page 289: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/290.jpg)
SummaryApply 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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/291.jpg)
Lesson 32:HTTP Servers andWeb Applications
![Page 292: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/293.jpg)
What Is an HTTP Server?
• Microsoft Internet Information Services (IIS)– Personal Web Server
• Apache server
![Page 294: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/296.jpg)
Server-Side Technologies
• JavaServer Pages (JSP)
• Active Server Pages (ASP)
• Common Gateway Interface (CGI)
![Page 297: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/299.jpg)
Setting Cookie Files
• Using JavaScript to set cookies on a visitor’s system
![Page 300: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/300.jpg)
XML and Web Applications
• Secure XML
![Page 301: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/303.jpg)
Lesson 33:Databases
![Page 304: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/306.jpg)
Database Anatomy• Schema• Table
– Field (column)– Record (row)– File
![Page 307: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/307.jpg)
Database Anatomy (cont’d)
Name E-Mail Phone Number
Jeff Brown [email protected] (213) 555-3359
Salma Lopez [email protected] (512) 555-1431
Martina Heltai [email protected] (909) 555-2743
Korin Svengt [email protected] (904) 555-9969
Field Name
Record
Field
![Page 308: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/308.jpg)
Database Queries
• Menu query
• Query by example
• Query language– Structured Query Language (SQL)
![Page 309: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/309.jpg)
Database ManagementSystem (DBMS)
• Flat-file DBMS
• Relational DBMS (RDBMS)
• Multidimensional DBMS
![Page 310: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/310.jpg)
DBMS Technologies
• ODBC
• JDBC
• COLD
• BLOB
• VSAM
• ISAM
• OLAP
• RPG
• ADO
![Page 311: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/314.jpg)
Lesson 34:Web Site Publishing
and Maintenance
![Page 315: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/319.jpg)
Web Publishing withan FTP Client
• WS_FTP Professional client– Generic FTP client– Not associated with a site-authoring tool
![Page 320: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/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. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/326.jpg)
SummaryUse 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 themSecure a server Maintain the Web site Document changes to the site
![Page 327: Web Design Specialist. Lesson 1: Overview of Web Design Concepts.](https://reader038.fdocuments.net/reader038/viewer/2022110209/56649e0b5503460f94af3067/html5/thumbnails/327.jpg)
Web Design Specialist
• For information about the CIW Web Design Specialist exam and CIW certifications, visit www.CIWcertified.com