Project Objectives Publish to a remote server OVERVIEW Project Objectives Publish to a remote server Download and upload files to and from a remote Web site Use the Dreamweaver Check In/Check Out system Run site reports in Dreamweaver Macromedia Studio Step-by-Step

Project Objectives (continued) OVERVIEW Project Objectives (continued) Check spelling on a Web page Add keywords to a page Check a site for broken links and orphaned files Move or rename a Web file Macromedia Studio Step-by-Step

Overview Project focus is on an existing Web site Three chief tasks Run through a test plan Run site reports Review site structure Dreamweaver features utilized Check In/Check Out Managing a remote site Macromedia Studio Step-by-Step

The Assignment Café Townsend site inherited by team INTRODUCTION The Assignment Café Townsend site inherited by team Test and update Café Townsend site Project tasks Create a site definition Connect to a remote site Check files into and out of a site Run reports on a site Organize files on a site Macromedia Studio Step-by-Step

FIGURE 1 Café Townsend Web Site INTRODUCTION FIGURE 1 Café Townsend Web Site Macromedia Studio Step-by-Step

Web Site Review and Testing INTRODUCTION Web Site Review and Testing Test plans list key site or page items Purpose of test plan Ensure site accommodates best practices Ensure site is technically sound Ensure that site is well organized Dreamweaver as a testing tool Assists, but does not replace, humans Dreamweaver can notify you of a broken link Dreamweaver cannot determine if link is correct Macromedia Studio Step-by-Step

INTRODUCTION Project 3 Lessons Lesson 1: Reviewing, Testing, and Publishing a Web Site Lesson 2: Managing a Site Macromedia Studio Step-by-Step

Lesson 1 Objectives Publish to a remote server Download and upload files to and from a remote Web site Use the Dreamweaver Check In/Check Out system Run site reports in Dreamweaver Check spelling on a Web page Macromedia Studio Step-by-Step

Lesson 1 Introduction Setting up the work environment Simulate remote site on local network Define site to connect to remote server Enable the Check In/Check Out system Run reports as specified by test plan Perform several assessments Check accessibility features Check for broken links and orphaned files Run a spelling check on a Web page Macromedia Studio Step-by-Step

Publishing to a Remote Server LESSON 1 Publishing to a Remote Server Simulations enable safe testing Simulate remote site on local server Copy Web site folders to desktop Top level folder: café_townsend_remote Define local site Top level folder: café_townsend_local Enable site to connect to remote server Choose attributes for remote site Macromedia Studio Step-by-Step

Getting and Putting Files LESSON 1 Getting and Putting Files Move files using FTP Get and Check Out functions Used to download a file Put and Check In functions Used to upload a file Get and Put do not change file status Task for Web development team Get files from simulated remote site Macromedia Studio Step-by-Step

LESSON 1 FIGURE 1-1 Files Panel Macromedia Studio Step-by-Step

FIGURE 1-2 Expanded Files showing the Café Townsend Web site LESSON 1 FIGURE 1-2 Expanded Files showing the Café Townsend Web site Macromedia Studio Step-by-Step

Checking Files In and Out LESSON 1 Checking Files In and Out How Dreamweaver Checks Out a file Displays name of user in Files Panel Places check mark next to file’s icon How Dreamweaver Checks In a file Local version becomes read-only Lock symbol appears beside file Tasks for Web Development team Check out chef_ipsum.html, edit name Check in chef_ipsum.html after edits Macromedia Studio Step-by-Step

Conducting Site Reviews LESSON 1 Conducting Site Reviews Test a site throughout construction Testing guidelines Ensure pages function in target browsers Preview pages in non-target browsers Ascertain differences in display Ensure pages work or “fail gracefully” Check and fix broken links Use a link test report Macromedia Studio Step-by-Step

Conducting Site Reviews (continued) LESSON 1 Conducting Site Reviews (continued) Testing guidelines (continued) Reduce time to download a page Break up large tables or Add some content above large tables Run site reports against entire site Check for untitled documents, empty tags, and redundant nested tags Validate code to locate tag or syntax errors Update and maintain published Web site Define and implement a version-control system Macromedia Studio Step-by-Step

Conducting Usability Tests LESSON 1 Conducting Usability Tests Consider whether your site is usable Questions emphasizing structural issues Is the site structure apparent? What are the elements of the visual layout? How do visual elements pass information? What kind of navigation elements are used? Buttons, hyperlinks, images, something else? Macromedia Studio Step-by-Step

Conducting Usability Tests (continued) LESSON 1 Conducting Usability Tests (continued) Questions emphasizing content issues How clearly are links labeled? Do the images have alternative text? Is the text readable? Is the text uniquely styled? If so, does the styling add value to the message? Do elements other than color convey emphasis? Macromedia Studio Step-by-Step

Using Validation Reports LESSON 1 Using Validation Reports Features that help test your site Preview pages Check for browser compatibility Run variety of reports Test for broken links, workflow, or HTML attributes HTML attributes tested in HTML reports Accessibility, missing Alt text Nested tags, removable empty tags Untitled documents Macromedia Studio Step-by-Step

FIGURE 1- 3 Reports dialog box LESSON 1 FIGURE 1- 3 Reports dialog box Macromedia Studio Step-by-Step

Using Validation Reports (continued) LESSON 1 Using Validation Reports (continued) WCAG: Web Content Accessibility Guidelines Tasks for development team Run accessibility report for Café Townsend Check site compliance with WCAG Priority 1 checkpoints Review results in Site Reports panel Accessibility error marked by a red X against file Use report to go to problem source Fix problems in index.html and menu.html Macromedia Studio Step-by-Step

FIGURE 1- 5 Site Reports Panel LESSON 1 FIGURE 1- 5 Site Reports Panel Macromedia Studio Step-by-Step

FIGURE 1- 6 Index.html open in split view LESSON 1 FIGURE 1- 6 Index.html open in split view Macromedia Studio Step-by-Step

Checking Spelling Accessing the Check Spelling command LESSON 1 Checking Spelling Accessing the Check Spelling command Go to Text menu for open document Open Check Spelling dialog box Scope of Check Spelling command Focuses on text only Ignores HTML tags and other source code Task for Web development team Check and correct spelling in location.html Macromedia Studio Step-by-Step

Lesson 2 Objectives Add keywords to a page Check a site for broken links and orphaned files Move or rename a Web file Macromedia Studio Step-by-Step

Lesson 2 Introduction Inherited sites should be scrutinized Some small details not to be overlooked Whether the file system is well organized Whether all the links work Tasks for Café Townsend site review Ensure the use of well-chosen keywords Review and repair broken links in the site Ensure that the file system is well organized Macromedia Studio Step-by-Step

Adding Meta Tags Keywords help search engines index sites LESSON 2 Adding Meta Tags Keywords help search engines index sites Keywords are contained in meta tags Format can be read by search engine robots Keywords should be well chosen Limit the number of keywords Ensure that keywords are meaningful Task for Web development team Insert well chosen keywords into all pages Macromedia Studio Step-by-Step

FIGURE 2-1: HTML category on the Insert bar LESSON 2 FIGURE 2-1: HTML category on the Insert bar Macromedia Studio Step-by-Step

Managing Broken Links Scope of Dreamweaver link verification LESSON 2 Managing Broken Links Scope of Dreamweaver link verification Only verifies links internal to site External links are compiled, but not verified Check Links searches for broken links Scope: open file, portion of site, entire site Tasks for Web development team Use Check Links Sitewide to find broken link Fix broken link in chef_ipsum.html Macromedia Studio Step-by-Step

FIGURE 2-2: Link Checker panel showing broken links LESSON 2 FIGURE 2-2: Link Checker panel showing broken links Macromedia Studio Step-by-Step

Managing Orphaned Links LESSON 2 Managing Orphaned Links Use the Link Checker panel Orphaned file: not referred to by site links Example: image that is no longer used Be careful when deleting orphaned files Some Flash files post to Orphaned Files List Source files may appear orphaned Task for Web development team Locate and delete orphaned file, untitled.html Macromedia Studio Step-by-Step

FIGURE 2-3: Link Checker panel showing orphaned files LESSON 2 FIGURE 2-3: Link Checker panel showing orphaned files Macromedia Studio Step-by-Step

Renaming and Moving Files LESSON 2 Renaming and Moving Files Change a file’s name on the Files panel Link information is preserved All pages linking to file are updated Renaming task for development team Change sign.jpg to townsend_street_sign.jpg townsend_street_sign.jpg is more descriptive A second problem: image out of place Other images in images or flashContent Macromedia Studio Step-by-Step

FIGURE 2-5: Files panel showing sign.jpg LESSON 2 FIGURE 2-5: Files panel showing sign.jpg Macromedia Studio Step-by-Step

Renaming and Moving Files (continued) LESSON 2 Renaming and Moving Files (continued) Moving files within the Files panel Preserves link information Moving task for development team Drag townsend_street_sign.jpg to images Drop image file into target folder Check in new file Delete old file (sign.jpg) at remote site Macromedia Studio Step-by-Step

FIGURE 2-9: Files in the images folder LESSON 2 FIGURE 2-9: Files in the images folder Macromedia Studio Step-by-Step

FIGURE 2-10: Files in the images folder LESSON 2 FIGURE 2-10: Files in the images folder Macromedia Studio Step-by-Step

Summarizing Project 3 Café Townsend Web site reviewed and cleaned up SUMMARY Summarizing Project 3 Café Townsend Web site reviewed and cleaned up Defined site to connect to remote site Checked files into and out of site Site reports were run Site files were organized Macromedia Studio Step-by-Step