Assignment #1

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

50 Points
Due Tue Sept 15 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.

To do this assignment, you must have access to a computer with a working installation of Dreamweaver CS3 or CS4, the textbook, and the files that come with the textbook. For information about obtaining the files, the software, or getting access to RCC's computer lab, see the Assignment #0 document.

Part 1: "Planning Your Web Site Design"

In this part, you are asked to read an article from the Macromedia web site and answer a few questions about it to show that you have done so. Your answers will end up being formatted into a Web page, printed out, and turned in. Your score will be a combination of having correct answers and having created a proper Web page containing them. The article is entitled "Planning your Web site design". Please note that you may need to download the most recent version of the Flash player to be able to see all of the required elements on Macromedia's Web site.

Begin by clicking this link to the article which will open up in a separate browser window.
Read through each of the 5 pages of this article and then answer the following questions regarding the content of the article. The article has some good design ideas, so please read it through rather than just trying to search for the answers! The questions below are not necessarily in the order in which you will encounter them within the article. For the moment, just make a note of the right answers on paper. Later you will be instructed about what you will need to turn in.
1. When designing pages, each page of your site should...
  - have its own unique look
  - have the same general look
2. When should you use "templates" in your site?
  - when many pages have the same content, but different layouts
  - when many pages have the same layout, but different content
  - when you are creating your home page
  - when you are combining several assets on a single page
3. What is meant by the term "assets"?
  - the skills of the web designer
  - all of the html files used in the web site
  - the software used to create the web site
  - all of the non-html files used in the web site
4. A Web site is typically made up of...
  - one main folder
  - several main folders
  - one main folder and several subfolders
  - several main folders and several subfolders
5. When creating a web site, the first step should always be to...
  - set up the folders and files for the site
  - collect all of the assets for the site
  - decide on the goals for the site
  - draw a sketch of the page layout for the site
6. When designing your site's navigation, what does the article suggest?
  - users should always be able to get back to the top-level page
  - place the navigation bar in the same place on each page
  - think about navigating the site from the user's point of view
  - all of the above
Once you have read the article and answered the above questions, keep this web page open in your browser while doing the following steps in Dreamweaver.
In Dreamweaver, create a new (blank) html page (set the document type to "XHTML 1.0 Transitional".) At the top of the page insert 2 headings -- an "h1" heading to indicate your full name and an "h2" heading to indicate "Assignment #1, Part 1". Then give the page an appropriate title that also includes your name and the assignment and part #'s (this title should end up displaying in the title bar of the browser). Hit enter at the end of the 2nd heading to begin a new paragraph.
In your browser with these assignment #1 directions displaying, copy the whole section of 6 questions and answers (from above), and paste them below the existing headings in your Dreamweaver document (which should be in "Design" view, not "Code" view.) The existing numbers (1 through 6) on the questions should remain intact (add the numbers back in if necessary.) The answers should still have bullets, but they may not be the same style of bullets displayed on this page. (Note: if you are using a Mac, your formatting may be different and you may not get any bullets, that is ok.)
Next, delete all incorrect answers so that each question has only the correct answer below it. No extra lines should be left over from the deleted incorrect answers.
Printout #1: When the page is done, save it and then preview it in the browser. Then use the browser's "File" menu to print the resulting page. Your name, assignment number, and part number should be visible on the resulting printout.

Part 2: Lesson 1

Read through the textbook material in Lesson 1, pages 7-33 and then answer the following questions relating to it. The questions and answers will be prepared in a Web page using Dreamweaver in the same fashion as in part 1.

After (or as) you read this textbook material, look over the questions below. Try to answer each question correctly. Then refer to the instructions below the questions for guidelines on what to do to create the required printout.
1. Does Dreamweaver have FTP capabilities?
  - Yes it does
  - No it does not
2. Dreamweaver CS4 has an interface that is different from Dreamweaver CS3.
  - True
  - False
3. What are the 3 different possible views that Dreamweaver provides you with when editing a Web page?
  - Pre-View, Design View, and Live View
  - Design View, Edit View, and Pre-View
  - Design View, Split View, and Code View
  - Design View, Pre-View, and Edit View
  - Design View, Debug View, and Live View
4. What role does CSS play in the displaying of Web pages?
  - CSS is used to indicate what detailed information will be displayed on the page
  - CSS is used to help control how a page's information will be formatted when displayed
  - CSS is used to edit the images and prepare them for display on the page
  - CSS used to play a bigger role, but now XHTML does it all, so CSS has no real role
5. When creating a new Web page, is it better to create it as an HTML document type or an XHTML document type?
  - HTML because it is not so strict about the code
  - HTML because that is the default type for Dreamweaver
  - XHTML because it is more compatible with newer and older platforms.
  - XHTML because it allows you to add multimedia to your pages
6. Using the Dreamweaver interface, what are the two different ways of indicating that you want to create a new Web page?
  - By using the "Insert" menu, and by using "Create" toolbar command
  - By using the "File" menu, and by using the "New" toolbar command
  - By using the "File" menu, and by using the "Welcome Screen"
  - By using the "Edit" menu and by using the "Insert" toolbar
7. Safari is a(n)...
  - ISP
  - DNS server
  - IP address
  - Browser
8. The symbol #CC00FF is an example of a(n)...
  - IP address
  - HTML Color
  - URL
  - ISP
9. Which of the following is true about "Live View"?
  - It is basically the same feature in Dreamweaver CS4 as it was in CS3
  - The feature has been improved in Dreamweaver CS4
  - The feature is new to Dreamweaver CS4
  - The feature is planned for CS5 but does not yet exist in CS4
When you are finished reading lesson 1 and know the answers to the above questions, follow the same procedure as with the previous questions and answers -- create a new document in Dreamweaver, create the headings and title, copy and paste the questions and answers below the headings, delete all wrong answers, save, preview the page in the browser. Then you are ready to create your printout.
Printout #2: With your completed page displaying in the browser, use your browser's File menu to print your document. Make sure that your name and assignment number and part number (part 2) shows up in the page's heading.

Part 3: "Lesson 2: Setting Up a New Site"

Follow the steps given below to learn about creating new sites in dreamweaver (from lesson 2 of our textbook) and to produce the correct printout to turn in.

Read page 35 and follow its suggestions for resetting your Dreamweaver workspace and setting up your lesson files. You will need to have the lesson files that come with the book's CD (see page 3's "Loading Lesson Files" section as needed to get things set up properly).
With your lesson 2 files in place, read pages 36-64 and perform all the indicated steps using Dreamweaver. Keep the notes below in mind as you do so.
When you reach page 60 and have a page displaying in Dreamweaver as shown at the bottom of the page, make the following changes. Change the document's title from "Museum Home" to "Joe Student's Museum Home", where you insert your own first and last name instead of "Joe Student". Then change the line that reads "Exhibit 3" to "Exhibit 3 by Joe Student", where again you insert your own full name. Then save your page. You are now ready to produce your printout.
Printout #3: With all the Web page's information displaying within Dreamweaver (not within the browser), including the changes suggested in the previous step, obtain a printscreen printout (screen shot) of this Dreamweaver screen. It should include not only the Web page (on the left side of the screen) but also Dreamweaver's Files panel (example shown on page 59) showing the museum site's list of files (on the right side of the screen) as well as the rest of the Dreamweaver interface (menus, toolbars, etc.) If you are unsure about how to create such a printout, refer to the appropriate section of the Assignment #0 document (available on the course Web site). The sample printscreen below is what a printscreen from within Dreamweaver might look like (although yours will have a different Web page displaying.)
After obtaining printout #3, continue on to finish the rest of the exercise steps on pages 61-64.

Part 4: "A Site of Your Own"

Based on what you learned from doing the previous part (lesson 2 from the book), you are asked to create something similar.

From the textbook CD, copy the folder "practice_files" from within the "dwlessons02" folder over to your desktop (or other work area of choice.) Rename this folder to "A1P4 practice_files" (standing for assignment 1, part 4.)
There does appear to be a problem with the apostrophes not showing up correctly in the "sticky.txt" file (one of the practice files needed for this part of the assignment), so I have corrected the problem for you. You can download this small text file from the link below and save it and replace the original flawed one with this corrected one.

Download the corrected sticky.txt file and replace the original.
Find a light colored suitable background image and place it within this new practice_files folder. It should be light enough so that normal sized black text will be easily readable over it. For example, you could use http://www.grsites.com/archive/textures/ to search for an image of your choice, then right-click the image and save it directly into your folder. You don't have to find one that will look great, just one that will tile nicely without obvious seams and one that allows the text to be read easily over it.
In Dreamweaver, create a new site. During this site definition process, set the site's name to "A1P4 Your Fullname", where you insert your own actual first and last name. Set the place where your files will be to your "A1P4 practice files" folder. Fill out the rest of the site definition as was done in the lesson.
With your site defined, create a new HTML page for your site, create an "h1" heading that has "A1P4" followed by your full name. Set the document's title to that same wording. Save the new page as "test.html" within your site folder.
Below your h1 heading, display the "tubes.jpg" image (which was one of the original "practice_files"). Resize that image so that it is about the same size as the image in the lesson (see printscreen below for a sample.) Below that image, insert the text from the text file "sticky.txt" (also one of the practice files.) Save the page. Preview it in the browser to make sure it works ok so far.
Back in Dreamweaver, set page properties for your page. Make your light colored background image (that you saved into your site's folder earlier) display as a tiled background image (should repeat all over the background of the page.) Set the page font to be "Arial, Helvetica, sans-serif" and set your heading font to be "Georgia, Times New Roman, serif" (or something as close to that as you can.) See the sample printscreen below as an example of what your page could end up looking like.
Printout #4: With your page displaying within Dreamweaver and the Files panel showing all 4 files on the right-hand side, obtain a printscreen printout (screen shot) of this screen. Do not use the browser's file menu to obtain this printout. It should look very similar to the sample printscreen below except for your own name, your own background image, and your own filename for the background image file in the files panel. (Note that the sample printscreen was done in Dreamweaver CS3 on Windows -- if you are using CS4 and/or a Mac, there will be additional differences due to the interface changes.)
After obtaining printout #4, close your file and exit Dreamweaver.
That concludes your work for this assignment.

What To Turn In

Create a cover sheet document 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 #1", each on its own line in a large font, centered across the page (make it look nice). Then turn in the following items, stapled together in this order:

The cover sheet (as indicated above)
Printout #1, a browser file menu printout of 6 questions & answers from the online article.
Printout #2, a browser file menu printout of 9 questions & answers from lesson #1 of your textbook.
Printout #3, a printscreen printout from within Dreamweaver after doing lesson #2 up to page 60.
Printout #4, a printscreen printout from within Dreamweaver, similar to sample printscreen above.

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. It is recommended to use MyComputer or Windows Explorer to just copy the folders that contain all the files you created in this assignment.