Transcript Macromedia 8 PPT Unit 1 Project 3

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