Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Project 3: Local Caterer Web Site 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 3 2 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 Project 3 3 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 Project 3 4 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 Project 3 5 FIGURE 1 Café Townsend Web Site Macromedia Studio Step-by-Step Project 3 6 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 Project 3 7 Project 3 Lessons Lesson 1: Reviewing, Testing, and Publishing a Web Site Lesson 2: Managing a Site Macromedia Studio Step-by-Step Project 3 8 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 Project 3 9 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 Project 3 10 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 Project 3 11 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 Project 3 12 FIGURE 1-1 Files Panel Macromedia Studio Step-by-Step Project 3 13 FIGURE 1-2 Expanded Files showing the Café Townsend Web site Macromedia Studio Step-by-Step Project 3 14 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 Project 3 15 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 Project 3 16 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 Project 3 17 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 Project 3 18 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 Project 3 19 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 Project 3 20 FIGURE 1- 3 Reports dialog box Macromedia Studio Step-by-Step Project 3 21 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 Project 3 22 FIGURE 1- 5 Site Reports Panel Macromedia Studio Step-by-Step Project 3 23 FIGURE 1- 6 Index.html open in split view Macromedia Studio Step-by-Step Project 3 24 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 Project 3 25 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 Project 3 26 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 Project 3 27 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 Project 3 28 FIGURE 2-1: HTML category on the Insert bar Macromedia Studio Step-by-Step Project 3 29 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 Project 3 30 FIGURE 2-2: Link Checker panel showing broken links Macromedia Studio Step-by-Step Project 3 31 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 Project 3 32 FIGURE 2-3: Link Checker panel showing orphaned files Macromedia Studio Step-by-Step Project 3 33 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 Project 3 34 FIGURE 2-5: Files panel showing sign.jpg Macromedia Studio Step-by-Step Project 3 35 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 Project 3 36 FIGURE 2-9: Files in the images folder Macromedia Studio Step-by-Step Project 3 37 FIGURE 2-10: Files in the images folder Macromedia Studio Step-by-Step Project 3 38 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 Project 3 39