138 | Adobe® Dreamweaver® CS6: Part 1

ACTIVITY 9-1
Checking Spelling, Links, and Running Reports

Data Files
events.html
olive_oil.html
history.html
harvest.html

Scenario
In preparation for moving the site files up to the web server, you want to be sure there are no
errors. You decide to take care of spelling first. You have checked most pages already but you
haven’t done so with the Events.html file. Next on the list is to check for problems with links for
the whole site. Then you will run two reports to check if every graphic in the site has alternate text
and that every page has a proper title.

1. Create a new site for this lesson.

a) Select Site→New Site.
b) In the Site Setup for Unnamed Site dialog box, in the Site Name text box, type the site name, 9EE

2. Identify the site root folder.

a) To the right of the Local Site Folder text box, select the Browse for folder icon.
b) In the Choose Root Folder dialog box, navigate to the C:\092001Data\Sending the Website to the
Web Server folder.
c) Select the Open button and select the Select button.

3. Create and identify the graphics folder.

a) In the Site Setup for 8EE dialog box, select Advanced Settings.

b) To the right of the Default Images folder text box, select the Browse for folder icon.
c) Select the graphics folder.
d) Select the Open button.
e) Select the Select button.

4. Save the site and confirm the listing of the site folders.
a) Select the Save button.
b) In the Files panel, note the site root folder Sending the Website to the Web Server and the graphics
folder.

5. Check spelling in the event.html file.

a) Open events.html.
b) Place the insertion point just before the heading “Events.”
c) Select Commands→Check Spelling.
d) In the Check Spelling dialog box, in the Word not found in dictionary text box, the word “relagated" is
spelled incorrectly.
e) The Change to box shows the correct spelling, select the Change button.
f) The word “occuring" is incorrect. The Change to box is correct, so select the Change button.
g) The word “prticipate" is incorrect. The Change to box is correct, so select the Change button.

Lesson 9: Sending the Website to the Web Server | Topic A

 Adobe® Dreamweaver® CS6: Part 1 | 139

h) If necessary, the word “millennia” is correct, so select the Ignore button.

i) In the Dreamweaver dialog box, select OK.

6. Check the site for link errors.

a) Select Site→Check Links Sitewide.
b) The Link Checker panel opens with all Broken Links shown.
c) In the Link Checker panel, to the right of events.html, click the broken link path and select the
Browse for File icon to the right.
d) In the Select File window, browse until you find the correct tuscan_hills.jpg file in the graphics folder.
e) Select the thumbnail then click OK.
f) In the Link Checker panel, click on the whitespace and see the broken link disappear.
g) In the Link Checker panel, double-click olive_oil.html.
h) On the olive_oil.html page, in the upper left, click “History” in the navigation bar.
i) In the Properties panel, in the Link text box, delete the extra S so that “hisstory.html” reads
“history.html” and press Enter.
j) Save olive_oil.html and close the file.
k) Back in events.html, in the Link Checker panel, to the right of olive_oil.html, select the Browse for
File icon to the right of the broken link.
l) In the Select File window, browse until you find the correct history.html file.
m) Select the history.html icon then click OK.
n) In the Link Checker panel, click on the whitespace and see the broken link disappear.
o) Save the events.html file, and preview it in the browser and check the corrected graphic link. Then
close the browser.

7. Check for orphans.

a) On the Link Checker tab, select the Show drop-down arrow and select Orphaned Files.
b) You will find a graphic file that is unused (no page in the site is linked to the graphic).
c) If you were considering a link to this graphic, you would leave it. If not, you would delete it or move it
to another folder.

8. Run the Missing Alt Text and Untitled Documents reports.

a) Select the Site Reports tab.

b) In the Site Reports panel, select the Reports drop-down icon.

c) In the Reports dialog box, from the Report on drop-down list, select Entire Current Local Site.
d) Check the Missing Alt Text and Untitled Documents check boxes and select Run.
e) In the Site Reports panel, double-click events.html.
f) In the Properties panel, in the Alt text box, type Olive Events and Venues and press Enter.
g) In the Document bar, select the Design button and save the file.
h) In the Site Reports panel, double-click the harvest.html file.
i) In the Properties panel, in the Title text box, type Harvesting Olive Crops and press Enter.
j) Select the Design button and save the file.
k) To close the Site Reports panel group, select the Panel Options Menu icon in the upper right and
select Close Tab Group.
l) Close all open files.

Access the Checklist tile on your LogicalCHOICE course screen for reference
information and job aids on How to Check XHTML and HTML

Lesson 9: Sending the Website to the Web Server | Topic A

140 | Adobe® Dreamweaver® CS6: Part 1

ACTIVITY 9-2
Checking XHTML and HTML

Data File
C:\092001Data\Sending the Website to the Web Server\harvest.html

Scenario
The marketing manager was looking over the pages you created and suspects one of the pages may
have some errors. She suggested you check the XHTML/HTML markup and the CSS styling before
you send it to the web server. You noted a strange item on one page and you decide to check it.

Check the suspected page by using the W3C Markup Validation Service.
a) Open the browser and go to the validation site, http://validator.w3.org/
b) In the W3C Markup Validation Service web page, select the Validate by File Upload tab.
c) Select the Browse button.
d) In the Choose File to Upload dialog box, navigate to the C:\092001Data\Sending the Website to the
Web Server directory and select the file harvest.html.
e) Select the Open button.
f) Select the Check button.
g) Scroll down the page and note the errors listed. Note the line number of the first error listed. Keep
the browser open.
h) Switch to Dreamweaver and open harvest.html.
i) Select the Code button and move to line 170 as noted in the error listing.
j) Correct the <bodyy> tag to read <body>.
k) Move to line 175 and move the closing </a> tag to the end of the text Home.

l) Save the file and recheck the page by performing steps c through f again. (Switch to the web
browser and select the Back button.)
m) Leave the file open for the next activity.

Access the Checklist tile on your LogicalCHOICE course screen for reference
information and job aids on How to Check CSS Style Rules

Lesson 9: Sending the Website to the Web Server | Topic A

 Adobe® Dreamweaver® CS6: Part 1 | 141

ACTIVITY 9-3
Checking CSS Style Rules

Before You Begin

The file harvest.html is open.

Scenario
The marketing manager came by to remind you that the suspected page needed the CSS to be
verified as well. You assured her that you would be doing so very shortly.

Check the CSS on the suspected page by using the W3C CSS Validation Service.
a) Open the browser, if necessary, and go to the validation site, http://jigsaw.w3.org/css-validator/
b) In the W3C CSS Validation Service web page, select the By file upload tab.
c) Select the Browse button.
d) In the Choose File to Upload dialog box, navigate to the C:\092001Data\Sending the Website to the
Web Server directory and select the file harvest.html.
e) Select the Open button.
f) Select the Check button.
g) Scroll down the page and note the errors listed. Note the line number of the errors listed. Keep the
browser open.
h) Switch to Dreamweaver and the harvest.html file.
i) In the Code view, move to line 77 as noted in the error listing.
j) Notice that the three styles under the .content selector have hyphens (-) separating the styles from
their values.
k) There should be colons (:) instead. Remove the hyphens for each of the three styles and type
colons instead. When corrected, they should appear as:

.content {
padding: 10px 0;
width: 80%;
float: left;
}

l) Save the file.

m) Recheck the page.
n) Close the browser and all open files.

Lesson 9: Sending the Website to the Web Server | Topic A

 Adobe® Dreamweaver® CS6: Part 1 | 143

ACTIVITY 9-4
Identifying the Remote Server

Before You Begin

Dreamweaver is open.

Scenario
Both the president and the marketing manager are aware that you are close to completion of the site.
They requested that you send the files up to the web server so the site can be viewed as a visitor will
see it.

1. Create the Remote Server folder.

a) Hold down the Windows key and press D to go to the Desktop.
b) Right-click the Desktop and select New→Folder.
c) Rename the folder by typing My Remote Web Server and press Enter. This folder will represent your
Remote Web Server folder.
d) Switch to Dreamweaver.

2. Identify the Remote Web Server folder for Dreamweaver.

a) Select Site→Manage Sites.

b) Select your 9EE site and select the Edit the currently selected site icon below the listing.
c) In the category listing on the left, select Servers.

d) Below the server list on the right, select the Add new Server icon.

Note: Because you are simulating a remote web server, you will make
selections guiding Dreamweaver to the folder created on your Desktop. It will
represent the web server and all file transfers will simulate uploading your site
files to the server.
e) In the Server Name text box, type My Web Server
f) In the Connect using drop-down list, select Local/Network.

g) To the right of the Server Folder text box, select the Browse icon.
h) In the Choose Folder dialog box, select the Desktop icon in the left column.
i) Select the My Remote Web Server folder and select the Open button.
j) Select the Select button.
k) Select the Save button.
l) In the Site Setup for 9EE dialog box, select the Save button and the Done button.

Lesson 9: Sending the Website to the Web Server | Topic B

144 | Adobe® Dreamweaver® CS6: Part 1

ACTIVITY 9-5
Uploading the Site Files

Before You Begin

Dreamweaver is open.

Scenario
You have set up the Remote Server folder and you are ready to upload the entire website to the
server.

Uploading the website to the web server.

a) In the Files panel, select the Connect to Remote Server icon.

b) Note that the icon appears in color with a green dot when the connection is made.

c) Select the Expand to show local and remote sites icon.

d) The screen displays an empty Remote Server folder on the left and your local site folder on the right.
e) Because you want to upload the entire site, select the Site root folder at the top of the Local Files
listing on the right.

f) Select the Put file(s) to “Remote Server” icon.

g) In the Dreamweaver dialog box, select OK.
h) Note that all of the files from Local Files were transferred to the Remote Server.

i) Select the Collapse to show only local or remote site icon.

j) Select the Disconnect from Remote Server icon.

Access the Checklist tile on your LogicalCHOICE course screen for reference
information and job aids on How to Download a Web Page for Modification

Lesson 9: Sending the Website to the Web Server | Topic B

 Adobe® Dreamweaver® CS6: Part 1 | 145

ACTIVITY 9-6
Downloading a Web Page for Modifications

Before You Begin

Dreamweaver is open.

Data File
C:\092001Data\Sending the Website to the Web Server\products.html

Scenario
A colleague has detected an error on one of the pages and suggested you correct it before too long.
You know it is convenient to download the file and correct the error in Dreamweaver, so you decide
to do that now.

Download the file that requires modification.

a) In the Files panel select the Connect to Remote Server icon.

b) Select the Expand to show local and remote sites icon.

c) In the expanded Remote Server listing, select the products.html file.

d) Select the Get file(s) from "Remote Server" icon.

e) In the Dependent Files window, select Yes.

f) Select the Collapse to show only local or remote site icon.

g) Select the Disconnect from Remote Server icon.

h) In Dreamweaver, open the products.html page and select Design view.
i) In the third sentence of the first paragraph, add the text Ltd. After “Emerald Epicure.”
j) Save and close the file.
k) Reconnect to the Remote Server, expand the view, and upload (Put) the file to the Remote Server.
l) Collapse the view and disconnect from the Remote Server.

Lesson 9: Sending the Website to the Web Server | Topic B