28
Presenting and Publishing a Website

Unit j adobe dreamweaver cs6

Embed Size (px)

Citation preview

Page 1: Unit j adobe dreamweaver cs6

Presenting and Publishing a Website

Page 2: Unit j adobe dreamweaver cs6

Unit Objectives

• Collect feedback • Run site reports • Validate HTML and CSS markup • Test for browser compatibility• Use media queries • Evaluate and present a website to a client • Set up remote access • Publish a site

Adobe Dreamweaver CS6 - Illustrated

Page 3: Unit j adobe dreamweaver cs6

Collecting Feedback

• Site usability test• Surveys• Points of contact• Web 2.0 Technology

Adobe Dreamweaver CS6 - Illustrated

Page 4: Unit j adobe dreamweaver cs6

Running Site Reports

• Run site reports– Workflow reports– Design Notes– HTML reports

• Check links

Adobe Dreamweaver CS6 - Illustrated

Page 5: Unit j adobe dreamweaver cs6

Running Site Reports

Adobe Dreamweaver CS6 - Illustrated

Page 6: Unit j adobe dreamweaver cs6

Validating HTML and CSS Markup

1. Open the index page

2. Click the W3C Validation button on the Document toolbar, click Validate Current Document (W3C), as shown in Figure J-8, then click OK to close the W3C Validator Notification dialog box

3. Repeat steps 1 and 2 to check each page in the site. If you find errors, evaluate and correct them

Adobe Dreamweaver CS6 - Illustrated

Page 7: Unit j adobe dreamweaver cs6

Validating HTML and CSS Markup

4. Open your browser, go to jigsaw.w3.org/css-validator– Click the By file upload tab, click the Browse

button, browse to the striped Umbrella local site root folder, then double-click su_styles.css

5. Click More Options, click the Profile list arrow, click CSS level 3 if necessary, then click the Check button, as shown in Figure J-10

6. Close the browser

Adobe Dreamweaver CS6 - Illustrated

Page 8: Unit j adobe dreamweaver cs6

Clues to Use

• The evolution of HTML5– HTML has been in existence since the early

1990s– HTML4 became a W3C recommendation in

1997– HTML5 introduced new ways to add

interactivity and tags that support semantic markup

Adobe Dreamweaver CS6 - Illustrated

Page 9: Unit j adobe dreamweaver cs6

Validating HTML and CSS Markup

Adobe Dreamweaver CS6 - Illustrated

Page 10: Unit j adobe dreamweaver cs6

Validating HTML and CSS Markup

Adobe Dreamweaver CS6 - Illustrated

Page 11: Unit j adobe dreamweaver cs6

Testing for Browser Compatibility

1. With the index page open, click File, point to Check Page, then click Browser Compatibility

2. Close the Results Tab Group, then click the Adobe Browser Lab panel tab to expand the panel

3. Click the Preview button

Adobe Dreamweaver CS6 - Illustrated

Page 12: Unit j adobe dreamweaver cs6

Testing for Browser Compatibility

4. Type your Adobe ID and password, then click Sign In

5. Click the Browser list arrow, as shown in Figure J-14, point to All Browsers, then choose another browser

6. Close the browser to close Adobe BrowserLab

Adobe Dreamweaver CS6 - Illustrated

Page 13: Unit j adobe dreamweaver cs6

Clues to Use

• Using the browser compatibility check to manage styles

– There are several tools available to assist you in defining, modifying, and checking CSS rules

• Code Navigator• Live view• Browser Compatibility check feature

Adobe Dreamweaver CS6 - Illustrated

Page 14: Unit j adobe dreamweaver cs6

Adobe Dreamweaver CS6 - Illustrated

Page 15: Unit j adobe dreamweaver cs6

Using Media Queries

• Using Media Queries– Specify a different style sheet for each device

– Desktop monitor– Tablet– Smart phone

– Adaptive websites adjust or modify page content to fit the user’s needs and device type

Adobe Dreamweaver CS6 - Illustrated

Page 16: Unit j adobe dreamweaver cs6

Using Media Queries

Adobe Dreamweaver CS6 - Illustrated

Page 17: Unit j adobe dreamweaver cs6

Evaluating and Presenting a Website to a Client

• Are you ready to present your work?• Did you follow your wireframe?• How should you present your work?

Adobe Dreamweaver CS6 - Illustrated

Page 18: Unit j adobe dreamweaver cs6

Design Matters

• Using wireframes for planning, development, and presentation

– Select your tool based on the size and complexity of the website, the budget, and your personal preferences

• Microsoft PowerPoint• Adobe Photoshop• OverSight• Protoshare• Adobe Proto• Basecamp

Adobe Dreamweaver CS6 - Illustrated

Page 19: Unit j adobe dreamweaver cs6

Adobe Dreamweaver CS6 - Illustrated

Page 20: Unit j adobe dreamweaver cs6

Adobe Dreamweaver CS6 - Illustrated

Page 21: Unit j adobe dreamweaver cs6

Setting up Remote access

• Local site• Remote site• Using the Site Setup dialog box• Setting up FTP

Adobe Dreamweaver CS6 - Illustrated

Page 22: Unit j adobe dreamweaver cs6

Adobe Dreamweaver CS6 - Illustrated

Page 23: Unit j adobe dreamweaver cs6

Adobe Dreamweaver CS6 - Illustrated

Page 24: Unit j adobe dreamweaver cs6

Clues to Use

• Choosing remote access options– Local/Network refers to publishing a website on either

the local drive or a local network drive– WebDAV is used with servers such as the Microsoft

Internet Information Server and Apache Web server– RDS is used with a remote folder running ColdFusion– Microsoft Visual SourceSafe is available under the

Windows platform using Microsoft Visual SourceSafe Client

– Secure FTP is an FTP option which lets you encrypt file transfers to protect your files, user names, and passwords

Adobe Dreamweaver CS6 - Illustrated

Page 25: Unit j adobe dreamweaver cs6

Publishing a Site

• Using Put and Get• Synchronizing files

Adobe Dreamweaver CS6 - Illustrated

Page 26: Unit j adobe dreamweaver cs6

Adobe Dreamweaver CS6 - Illustrated

Page 27: Unit j adobe dreamweaver cs6

Clues to Use

• Cloaking files to exclude them from being uploaded to a server

– Cloaking is the process of marking a file or files for exclusion when the commands Put, Get, Synchronize, Check In, and Check Out are used

• Managing a website with a team– The Check Out feature enables only one person at a

time to work on a file– Subversion control: A remote SVN (Apache Subversion)

repository is used to maintain current and historical versions of your website files

– Protect files from being accessed using the svn:ignore property to create a list of files that are to be ignored in a directory

Adobe Dreamweaver CS6 - Illustrated

Page 28: Unit j adobe dreamweaver cs6

Unit Summary

• Collect feedback • Run site reports • Validate HTML and CSS markup • Test for browser compatibility• Use media queries • Evaluate and present a website to a client • Set up remote access • Publish a site

Adobe Dreamweaver CS6 - Illustrated