unit j adobe dreamweaver cs6
Post on 14-May-2015
231 Views
Preview:
TRANSCRIPT
Presenting and Publishing a Website
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
Collecting Feedback
• Site usability test• Surveys• Points of contact• Web 2.0 Technology
Adobe Dreamweaver CS6 - Illustrated
Running Site Reports
• Run site reports– Workflow reports– Design Notes– HTML reports
• Check links
Adobe Dreamweaver CS6 - Illustrated
Running Site Reports
Adobe Dreamweaver CS6 - Illustrated
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
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
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
Validating HTML and CSS Markup
Adobe Dreamweaver CS6 - Illustrated
Validating HTML and CSS Markup
Adobe Dreamweaver CS6 - Illustrated
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
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
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
Adobe Dreamweaver CS6 - Illustrated
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
Using Media Queries
Adobe Dreamweaver CS6 - Illustrated
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
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
Adobe Dreamweaver CS6 - Illustrated
Adobe Dreamweaver CS6 - Illustrated
Setting up Remote access
• Local site• Remote site• Using the Site Setup dialog box• Setting up FTP
Adobe Dreamweaver CS6 - Illustrated
Adobe Dreamweaver CS6 - Illustrated
Adobe Dreamweaver CS6 - Illustrated
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
Publishing a Site
• Using Put and Get• Synchronizing files
Adobe Dreamweaver CS6 - Illustrated
Adobe Dreamweaver CS6 - Illustrated
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
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
top related