Assignment #7

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

50 Points
Due TUE Nov 3 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 9: Maximizing Site Design"

Follow the steps below to learn about "Designing for devices" (from lesson 9 of our textbook) and to produce the correct printouts. Be careful to read all of the steps below before you begin your work.

  1. Read pages 219 - 234 and perform all lesson steps on those pages, with the exceptions indicated below.
  2. After completing step 5 on page 234, enter your full name into the beginning of the title of the "beets.html" document. Then you'll be ready to create your printout, as described below.
  3. Printout #1: With your "beets.html" page displaying within Dreamweaver's design view, and with all editable regions of the template completed and displaying along with your name in the document's title area, obtain a printscreen printout from within Dreamweaver (this should not be a printout from within the browser.)
  4. After obtaining your printout, continue on to complete the lesson. When you have completed step 4 on page 237, enter your full name into the beginning of title of the "category_chocolate.html" document. Notice also that if you compare your page to the one shown on page 236, yours is probably missing the "Site Map | Login" nav bar in the upper right portion of the page. You can either add that in or leave it off, your choice, no worries. At this point you'll be ready to create your next printout, as described below.
  5. Printout #2: With your "category_chocolate.html" page displaying within Dreamweaver's design view, and with all editable regions of the template completed and (at least partially) displaying along with your name in the document's title area, obtain a printscreen printout. This should not be a printout from the browser, it must be a printscreen from within Dreamweaver. It should resemble the screen shot shown on page 236 except yours will have 4 products instead of 2 and yours will be all filled in with information (the second row of products does not have to show completely.)

Part 2: "Using Templates & Libraries"

Follow the steps below to gain some further experience with libraries and templates.

  1. Begin by obtaining the starter files for your site, using the link provided below:

    Link to starter files: a7p2.zip
  2. After downloading the zip file and unzipping, you should find several files and folders that make up the site. Make sure that the "Templates", "Library", and "images" folders are directly under the "a7p2" main folder (depending on your unzipping tool and how you unzipped it, sometimes an extra main folder may be created.) Begin by launching Dreamweaver and defining your site to point to the main "a7p2" root folder that directly contains these "Library", "Templates", and "images" folders and files. If these folders are not at the very next level below the root, Dreamweaver will not treat them as actual templates and libraries so this is why we need to be careful here.
  3. Once the site is properly defined, use the Files panel to open the "contacts.html" page. Then notice at the bottom of the page that the copyright paragraph is based on a library item. Then close this contacts page. Next locate the two library items that have been set up for use on this site. You can find them in the "Library" folder or use the "assets" tab. One is called "links" and is used to standardize the navigation bar for all pages and the other is called "copyright" and is used to standardize the copyright paragraph at the bottom of all pages. Open each one to take a look at its contents and then close it without changing anything.
  4. Now open up the copyright library again with the intention of making some changes. Modify this copyright area as follows. Change the final year given to be the current year instead of 2008. Also insert your full name into this copyright area instead of the words "Black and White". When you save your changes to this library item, you should have it update all pages. Close the library item. Reopen the contacts page and confirm the change has been made to the copyright area. Then preview this page in the browser and use the navigation bar links to confirm that this copyright change appears at the bottom of all pages in the site (the "artists" page doesn't exist yet so that link isn't expected to work yet.) After confirming the changes, return to Dreamweaver to work with templates.
  5. Two templates have been set up for you to use as you build more pages for this site. Use the files panel to explore the "Templates" folder. You should see the two template files. One is called "page_layout" is used to standardize the look of all of the main pages (contacts page, locations page, occupations page, etc.) and the other template is called "artists" and will later be used to standardize the look of the individual artist pages.
  6. First we will use the main page layout template to create a new "artists.html" page. To create this new page, use Dreamweaver's "File" -> "New" menu commands, and then choose "Page From Template" in the "New Document" dialog box that results. Next choose the appropriate template to use and click the "Create" button to create your new page. This process is also described on page 233 of your textbook. Save the page as "artists.html" so that the navigation links to this page will work.

    When displayed in the browser, the completed page should look like the sample shown below (except for the changes to the copyright area.) The page features 3 local artists: James Boarder, Jane Spacey, and Fred Garcia. Those 3 artists' links should be to "boarder.html", "spacey.html", and "garcia.html". Although those 3 artists' pages don't exist at this point, they soon will. Enter a brief description of each artist to the right of the name link, as shown below -- you can use the descriptions below (if you can read them) or just make up something appropriate. Save your work when you are done and move on to the next step, where you will create the artist's pages.

    screen shot of new artists page

  7. Printout #3: With your "artists.html" page displaying within Dreamweaver's design view (not in the browser), and with all editable regions of the template completed and displaying along with your name in the document's title area and the copyright (library item) area, obtain a printscreen printout. This should not be a printout from the browser, it must be a printscreen from within Dreamweaver showing the editable regions.
  8. Next, using the artist template, and the same procedure given above for creating pages from a template, you will create the 3 new pages for the 3 artists. As you create the pages, save them as "boarder.html", "spacey.html", and "garcia.html" so that the 3 artist links you just made on the "artists" page will work and bring users to these new pages when clicked in the browser. The screen shots below give you a good idea of what the individual artist pages should look like. Note that the images are available within the given site's files, in the "images" folder and the filenames include the artist's last name, such as "spacey1", "spacey2", etc.

    Jane Spacey's page, "spacey.html", shown below within Dreamweaver (but with Dreamweaver's surrounding panels removed), involves filling in the "artist name" and other "artist links" into the two editable regions on the left-hand sidebar, then using the repeated region to create 2 rows of sample photographs and descriptions of Jane Spacey's work. Use the given 2 images found within the site's "images" folder to replace the given empty image placeholders in the "Photo" editable region. But feel free to create your own descriptions for the photographs instead of those given in the sample screen shot below. Either way, the descriptions should include a title for the photo in quotes on the top line, the date it was supposedly taken on the second line, and then a description of the photo on the next few lines, as shown in the description regions below.

    Screenshot of Spacey artist page

    After completing the Jane Spacey page, create the James Boarder page, "boarder.html", shown below within Dreamweaver (but with Dreamweaver's surrounding panels removed), which involves 3 images and 3 descriptions. Again, use the given images, but feel free to create your own descriptions for the photographs instead of those given in the sample below.

    Screen shot of "Boarder" artist page

    Lastly, create the "Fred Garcia" featured artist page ("garcia.html") using the same process as you did for the previous 2 pages. There is no screen shot for this one, so just make up descriptions for each of the 2 photos you see within the site's "images" folder, using the same description format as in the other 2 pages.
  9. Printout #4: With your "boarder.html" page displaying within the browser, use your browser's "File" menu to obtain a printout of the page. Your name should show up in the document's copyright (library item) area. Note that this is not a printscreen printout.
  10. Printout #5: With your "garcia.html" page displaying within Dreamweaver's design view, and with all editable regions of the template completed and displaying along with your name in the document's title and copyright areas, obtain a printscreen printout. This should not be a printout from the browser, it must be a printscreen from within Dreamweaver.
  11. Important note: you may be needing this web site for work in a later assignment, so make sure all the pages are built properly and are part of the site (even the ones that are not part of the printouts). And make a back-up copy as always.

 

What To Turn In

Modify your cover sheet document from assignment 6 (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 #7", 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 of your "beets.html" page displaying within Dreamweaver's design view with editable regions showing and your name in the title area.
  3. Printout #2, a printscreen of your "category_chocolate.html" page displaying within Dreamweaver's design view with editable regions showing and your name in the title area.
  4. Printout #3, a printscreen printout of your "artists.html" page from within Dreamweaver showing all editable regions and with your name in the title and copyright areas.
  5. Printout #4, a browser "File" menu printout of your "boarder.html" page with your name in the copyright area.
  6. Printout #5, a printscreen printout of your "garcia.html" page from within Dreamweaver showing all editable regions and with your name in the title and copyright areas.

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.