Assignment #8

RCC Fall 2009 CIS/CAT-76B Dreamweaver
Dreamweaver CS4

50 Points
Due TuE Nov 10 at start of class

Before you attempt this assignment, you are required to have read and understood the information contained within the Assignment #0 document, which is available from the class web site. To avoid unnecessary point loss, make sure that you turn in all of the required printouts and staple them together in the order indicated within this document.

Part 1: "Lesson 10: Working In Code View"

Follow the steps below to learn about "XHTML" and the wonders of "Code View" from lesson 10 of our textbook, following the guidance below.

  1. Read pages 239 - 257 and perform all lesson steps on those pages. This will give you a good background on the code capabilities built into Dreamweaver.
  2. After completing the entire lesson, you are ready to continue on to the next part of this assignment. There are no printouts for this part.

Part 2: "More Code View"

For this part, you are asked to make some code modifications to a starter page that you are given.

  1. Download the following zip file, unzip it, launch Dreamweaver, and define your site to use that site's main folder. Use the link below:

    a8p2.zip
  2. Open the file "brewingtea.htm" from within the main "a8p2" folder, and then display this file in code view. Make sure the the line numbers for the code are showing up along the left-hand side as usual.
  3. Locate the "title" tags on line 5 of this document. Between the opening and closing "title" tags, replace the word "Teacloud" with your own full name.
  4. Collapse the first 4 lines of the document (so that the "title" tag is the first full tag displayed.)
  5. Notice the script code on lines 7 through 42. Collapse that section of code so it is no taking up so much space. Do the same for the "style" section of code that begins on line 43.
  6. There is a table that begins on line 50. Collapse just the first row of that table.
  7. Turn the "word wrap" option off.
  8. Use the "Format source code" button to activate the "Code format settings" dialog box. In that dialog box's "Code format" category, set the indenting to 3 spaces and the tabbing to 3 spaces. Then "ok" those settings.
  9. Then use that same "Format source code" button to apply source formatting to the entire page's code. After doing so, you may have to use the horizontal scroll bar to return the code display to the left edge. You should notice the 3 space indentations.
  10. Display the "snippets" panel (use the "Window" menu as needed.)
  11. On line 62, place your cursor right between the closing "p" tag and the closing "td" tag. At that code location, insert the "Footers" snippet named "Basic: Text Block". Notice that the snippet code contains a surrounding "div" tag that takes up several lines of text and includes some blank lines within it.
  12. After the snippet code is in place, switch to design view to see the affects of the snippet code. Toward the bottom of the page, notice the new box containing all the Latin text and links. This is what the snippet added. You could now modify the Latin text with text appropriate for this site but this is not required here.
  13. Return to code view and notice that the snippet's code indenting does not match the rest of the page's indenting. Use the "Format source code" button to apply source formatting to the entire page's code again. After doing so, you may have to use the horizontal scroll bar to return the code display to the left edge and confirm the new consistent indentation the snippet has. If your snippet code still contains blank lines within it, delete those blank lines.
  14. Return to design view. Toward the bottom-right hand side of the page, locate and click somewhere within the "send us your thoughts" text. Then use the tag selector to select "<tr>" so that the whole table row surrounding this text is selected. With that table row selected in design view, switch back to code view. The table row's code should be highlighted in code view. (If not, try the above steps again.)
  15. When in code view with all of the table row code selected, apply an "HTML comment" around that table row code (to deactivate it.) That code should turn light gray in code view. If you switch to design view, that table row should no longer display toward the bottom of the page. After confirming this, return to code view.
  16. Turn on the option that highlights any invalid code. If you did the above steps properly, nothing should highlight. (If something does highlight, figure out what you did wrong and fix it or start over to avoid point loss.) Leave this option turned on.
  17. Compare your code to the code showing in the sample printscreen shown below and make any adjustments as needed. For example, if any of the four originally collapsed code areas are not still collapsed, you should fix that.
  18. Save your page.
  19. As shown in the sample printscreen below, scroll your code up to the top (as needed), and close down the property inspector to allow more code to display. Then arrange your snippets panel (on right-hand side of the Dreamweaver interface) so that "Basic: Text Block" snippet is selected and displaying in its entirety without scroll bars (adjust panel heights as needed).
  20. Within the title tags (line 5 below), select your full name (enter it in now if it isn't already there.)
  21. Compare your screen with the sample printscreen below. Fix any differences to obtain a close match.

    code printscreen
  22. Printout #1: When your work is complete, and your code and interface looks as close as possible to the sample printscreen shown above, obtain a printscreen printout of your page displaying in code view.
  23. After it prints, circle or highlight both the snippet code and the commented out table row code.

Part 3: "Uploading To RCC's Server"

For this part you are going to work with managing files using your own account on the RCC server. Follow the directions below to obtain the correct printout. If you are doing this assignment early (before assignment 7 is due), double-check with your instructor to make sure that the accounts have been set up on the RCC server first.

  1. First you'll need to verify that your account has been set up and that a sample home page has been created for you. Using a browser, enter in the URL below into your browser's address area, replacing the "jstudent" part with your own first initial and last name (in lowercase letters as it appears on the class roster), but keeping every other character exactly as shown:

    http://209.129.8.3/~smcleod/dwjstudent
  2. If you successfully entered your own URL you should see a "Joe Student's Read Me" page display in the browser. If not, double check that your URL has the exact same characters in it as the one above except for your first initial and last name instead of "jstudent". You might try carefully copying and pasting the above URL and then making the changes to the "jstudent" part within the browser's address area.
  3. Read all of the information on the "Read Me" page. In particular, be sure that you read and understand all of the items in the "Terms of Use" section. It is important that you understand that use of this account is strictly for work that is directly related to the assignments of this course. When you have finished reading this page, minimize your browser (don't close it, you'll need it in a later step.)
  4. Next create a folder on your own working storage area and name the folder the same name as your account name, such as "dwjstudent". The folder's name should start with "dw" and then be followed by your first initial and then last name (to match that part of the URL you used earlier.)
  5. Next launch Dreamweaver. Define your site as follows. Name the site using your own account name (same as the folder name above), such as "dwjstudent". Use your recently created folder (from the previous step) as your site's root folder. When you get to the question about "How do you connect to your remote server", answer "FTP". As a result of entering "FTP", the dialog box should open up several other questions, as shown in the screen shot below. (Make sure the "Basic" tab is selected, not the "Advanced" tab, or you will see a more complicated dialog box). Read the next directions and enter the information carefully to make sure you can successfully connect to the RCC server.

    For the hostname or FTP address, enter exactly and in the screen shot -- or better yet, copy and paste what is shown here:
    209.129.8.3:10000

    For the folder on the server, leave it blank as shown in the screen shot.

    For your FTP login, enter your own account name, which starts with dw and then is followed by the first letter of your first name and then by your last name (all characters are lowercase letters). In the screen shot, it is assuming your name is Joe (or Jane) Student, so the login is dwjstudent.

    For your password, use your 7 digit student ID number.

    Make sure the "Save" and "Use Secure FTP (SFTP)" boxes are both checked, as shown in the screen shot.

    When all of that information has been carefully entered, click the "Test" button to see if you can successfully connect to the server. If so, then continue on to complete the site definition process as usual (click "next"). If not, carefully compare your entered information to the screen shot below and repeat this step by carefully rereading each detail until you do have success. All accounts have been created and double-checked, so it is much more likely that you are not entering the information correctly than anything else. But if all else fails, you can try the "Advanced" tab which has a few more options. Of those, "Passive FTP" should be tried first. If that fails too, and you are behind a firewall, try the "firewall" settings.

    screen shot of site definition dialog box for remote settings of RCC server


  6. Once you have successfully completed the connection test and have completed the site definition process, open up the "Files" panel on the right-hand side of the Dreamweaver interface.
  7. Click the "Expand / Collapse" button Expand button on the right-hand side of the Files panel toolbar to expand your files panel. As a result you will see your local files displayed on the right-hand side and an empty area on the left-hand side for viewing your remote files (from the server.)
  8. Click the "Connect" button Connect button on the toolbar to connect to the RCC server. After a brief delay, you should see your remote file(s) from the RCC server display in that left-hand side.
  9. Within the left-hand side, locate a file named "index.html". (That is the page you were looking at in the browser earlier.) Select that file and drag it from that left-hand side across to the right-hand side and drop it on your own local root folder (the folder named after your account name.) As a result, your file should download and display in the local files area.
  10. With the index.html page downloaded to your local site, click the "Expand / Collapse" button to collapse your files panel back to its normal appearance. Open the "index.html" file to display it in "design" view. Replace the name "Joe Student" with your own full name within the document's title, within the page's main "h1" heading, and within the "h2" pledge subheading.
  11. Save these changes to the file.
  12. Click the "Expand / Collapse" button to expand your files panel to see your local and remote files again. Drag your changed local copy of "index.html" over to the left-hand side and drop it on the original one on the RCC server. (If you are asked about "dependent files" just answer "no".) Your updated copy will replace the old one on the server.
  13. With your changed file uploaded successfully, return to the browser that you minimized in step 3 above. Maximize your browser and refresh it to see your updated "Read Me" file displaying from the RCC server. It should now display your name in the browser's title bar area, in its page heading, and in the page's last "pledge" subheading. Make sure that the entire page can be seen in the browser (use a screen resolution of at least 1024x768.) Your browser's address area (showing your RCC server account URL) must be visible too.
  14. Printout #2: With your own "Read Me" page displaying in the browser as described above, obtain a printscreen printout of your page.
  15. After obtaining your printout, be sure you fully understand the "Terms of Use" section of the page and then, at the bottom of the "Pledge" section, sign your full name on the line provided to get full credit.
  16. Return to Dreamweaver, and get to the expanded files interface where you can see both your remote files on the left and your local files on the right. Locate your "index.html" file on the remote server (left hand side). Rename this file from "index.html" to "readme.html". One way to do so is by right-clicking the file and choosing "Edit" --> "Rename". The purpose of this renaming is so that you can you use your account to upload another site that will have its own home page, index.html, without overwriting this Pledge (read me) page.
  17. After successfully renaming your read me page, disconnect from the RCC server and exit Dreamweaver.

Part 4: "Lesson 13: Managing Your Web Site"

Follow the steps below to learn about "managing your Web site" including "reports", "optimization", and "maintenance". It involves lesson 13 of our textbook. Following the guidance below.

  1. Read pages 321 - 350 and perform all lesson steps on those pages. This will give you a good background on issues surrounding the management of a live Web site using Dreamweaver. When you reach page 346 and the section entitled "Uploading your site", upload the McKnight Center of Science & Technology site in its entirety (all folders and files). Make sure that all of the changes you made to the site's pages during this lesson are included in what you upload.
  2. After successfully uploading the site, use a browser, and the same address as in the previous part to make sure your site is working properly:
    http://209.129.8.3/~smcleod/dwjstudent
    where you replace jstudent with your own first initial and last name.
  3. After successfully testing your site in the browser, minimize the browser and return to Dreamweaver. Open the home page. Locate and change the word "McKnight" (in the first welcome paragraph) to your own last name. Then use Dreamweaver's "Find and Replace" feature to make a site-wide replacement of all occurrences of "MKI" to your own 2 or 3 initials depending on how your full name shows up on the course roster. For example, if your name is Joe Frank Student, then you'd change all "MKI" to "JFS". Save all affected pages that might be open.
  4. Then upload all the changed pages (or just upload all pages.) Use the browser to refresh pages and confirm your changes did make it to the server. Once your site checks out ok in the browser with your name on the home page and initials replacing MKI everywhere it appeared, your work is done.
  5. As indicated in the "What to turn in" section below, you should create a cover sheet and then write on the printed cover sheet either ""part 4 is ready for grading on the RCC server" or "part 4 not yet ready for grading on the RCC server -- expected date is ..." where you fill in when you expect to complete it.

    Note that the McKnight Center of Science & Technology site is not complete and you are not expected to do anything beyond what was asked of you in the book or within this part's instructions.

    Note that your work for this part will be graded online and there is nothing to print for this part. However, keep in mind that when it is graded, the dates on the files will be checked to determine when they were last changed (uploaded). You should not make any further changes to this site after the due date and time or there will be lateness points applied to your score.

What To Turn In

Note that in your later work, you will be uploading other sites into this RCC server account. To do so, you will rename this "index.html" (read me) file to "readme.html" so you can keep that file around without losing the ability to use the "index.html" file name as your site's home page.

Modify your cover sheet document from assignment 7 (or create a new one) as follows. Use either Dreamweaver or a word processor to create a document that contains the following information: Your full name, the class "CIS/CAT 76B Dreamweaver", your instructor "Scott McLeod", and the assignment number "Assignment #8", each on its own line in a large font, centered across the page (make it look decent). Then turn in the following items, stapled together in this order:

  1. The cover sheet (as indicated above)
  2. Printout #1, a printscreen printout of your "brewingtea.html" page displaying within code view of Dreamweaver as shown in the sample printscreen above, with the indicated code areas selected and marked.
  3. Printout #2, a printscreen printout of your own customized "readme" page displaying within the browser from the RCC server. Your name should appear in 3 places and you must read and sign the printout to get full credit.
  4. Make a note on your cover sheet indicating that "part 4 is ready for grading on the RCC server" or "part 4 not yet ready for grading on the RCC server -- expected date is ...". This will help the instructor carry out the online grading of this part.

Back-Up Your Work

Don't forget that it is important to back-up all of your work from this assignment. Some of these files may end up being needed on a later assignment, so copy them all onto a second disk, just in case. The easiest thing to do is just copy the local root folders for the two sites you worked on in this assignment.