RCC Fall 2009 CIS/CAT-76B Dreamweaver
Dreamweaver CS4 Version
Lateness is determined by the latest date on your submitted files. For example, if you modify one file and submit it 2 days late, your whole final project is 2 days late. Send email to your instructor (see syllabus for email address) to let him know that your site is ready to be graded. Failure to do so will result in loss of points. Also, the email you send to your instructor must follow the guidelines indicated in part 3 of this handout to avoid loss of points.
To avoid unnecessary point loss, make sure that you upload all of the necessary files and turn in all of the required printouts and/or disks. Test everything after uploading or copying to a disk so that you know what it will look like to the instructor when graded.
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.
You are also required to have read and understood the "Terms of Use" section of the given "Read Me" page from your RCC server account, and then signed the "Pledge" section of this page and turned it in (as required in assignment #8.) If you have not done so, you must do so prior to using this account. You will not receive credit for this final project without turning in this document.
Congratulations, you are the proud owner of a new company -- your company! And it is named after you! Your company is very successful! The only things it needs are an exact name, an interesting history, some more products to sell, and, you guessed it, a Web site.
Your company is going to sell the same kind of products that are in your collection table from assignment 5. Just imagine that you are turning your personal collection into a business. Based on that, you should think of a name for your company. It must include your first or last name. For example, if your name is Bob Smith and you had a CD collection page in your personal site, your business could be named "Bob's Burnin' Hot CDs", "Smith's Sound Center", or whatever. Just make sure it is based on your original collection items and contains your own first or last name. (If you never did assignment 5, you'll have to think of a collection of items and create a table to use as needed in this assignment.)
Create a new root folder, for example named "dwfp" (standing Dreamweaver Final Project), in which to place these separate company Web site files on your local disk area (such as flash drive). Then in Dreamweaver define your company site to point to that folder and to your remote RCC server account for later uploading. Refer to assignment 8 as needed for the FTP details of your RCC server account. (If you already have a site defined that works for your RCC server account from a previous assignment, you can just edit that site definition's name and root folder to make it more appropriate for this final project and avoid having to re-type all those FTP details again.)
Here are the requirements for each of the company Web site's pages. Later instructions will also indicate how to format these pages and how to link them together. For now, create them as unformatted pages without any navigation. Make sure your company name (which includes your own name) appears as part of the "title" of each page. Each page should take up most of a 1024x768 layout using normal sized text and images. There will be point deductions for lack of appropriate content on pages.
You are required to create a logo containing your company's name (which includes your own name) and may include other items. It should be designed to go well with the rest of your site design. It may be created using any graphics program or Web-based tool you have access to. If you don't have any other way of doing so, you can use one of the Web-based tools described in the handout "Creating Logos and Buttons (Free and Easy!)" which you can also access from the Dreamweaver course Web site's "handouts" menu. The logo will end up being placed within the main page template (see section below.) Although it is listed first here in these instructions and will go at the top of your pages, the actual logo image can be added into your main template and updated to your site at any point during the process of developing your site.
Above is an example of what a logo could look like, assuming the person making it is named Joe. This one was made in about 5 minutes at one of the Web sites mentioned in the "Creating Logos and Buttons" handout. It is not a thing of beauty, but since the products are comic books, the font, colors, and style of the logo are perfectly appropriate. If you have graphics skills, you could probably do much better, but the point here is that it is not necessary.
You will be creating a page template to use for creating your main pages (home page, products page, feedback and confirmation pages, etc.) The logo you create will be part of this template. The template should be a CSS-based layout that has either 2 or 3 columns -- one column should be a thinner sidebar content area and one a wider main content area. If your navigation links are going to go horizontally across the top part of the page, your layout can be just 2 columns (see layout pictured below on the left.) If your navigation links are going to go vertically down one of the sidebar columns then it can take up one column itself and then your layout should be 3 columns wide so you can still have 2 content columns (see layout pictured below on the right). This layout decision is your personal choice and has no impact on the points you will earn.
As you can see below, no matter which layout you choose, you will end up with two columns (one a sidebar and one a main column) that will need to be filled with up appropriate page content for your company.
Once you've decided which layout you are going to use, you'll have another choice to make between two different ways of creating this layout. You can either create this layout yourself from scratch by using AP Divs for each area shown above (like you did in assignment #4 from lesson #5 in your textbook.) or you can create the layout by using one of the available CSS layouts built in to Dreamweaver. The advantage of using AP Divs is that since you create it, you are best able to modify it and get it to look the way you want it. The disadvantage is that it takes more planning and work to get the layout put together. Using a built-in layout is quicker to get it going but may be more difficult to work with later as you need to modify and customize it for the particular needs of your project. For more on this choice, see below.
To use Dreamweaver's built-in CSS layouts, use Dreamweaver's File menu, choose New, then create a page using any one of the 2 or 3 column layout choices presented in the middle of that dialog box. The differences between the choices of layouts is primarily how the columns will grow and shrink with the browser width but there is no impact on points so just choose whatever you like. Make sure "Layout CSS" is set to "Create New File" and then hit "Create" to begin the process of creating your page (whose layout will be controlled by an external style sheet.)
To use Dreamweaver's AP Divs approach to create your own layout, just create a new blank page and then, possibly after using guides to help plan out the layout, draw your AP Divs one at a time using that "Draw AP Div" toolbar button. It is recommended that you rename the id's of each div to match its purpose within the layout. Keep in mind you'll be adding more CSS to these areas later, so meaningful names will help you.
Whether you created your layout with your own AP Divs or with Dreamweaver's built-in CSS layouts, your next task is to save this starter page as a template and then begin to insert some content that will be common to all pages as well as define your editable regions. Whether you chose a 2 or 3 column layout, you'll have a top part that will contain your company logo (see logo requirement section above) and below it you'll have 2 columns that need to be filled with company related content. The main column should consist of at least one editable region which will hold the main content of each page. The sidebar content column should consist of a combination of some non-editable content (which will be the same for every page) and at least one editable region (to be customized for each page). The sidebar area could contain company related news, product promotions, advertising, customer testimonials, or whatever else makes sense for your company.
As far as the navigation bar goes, regardless of whether it is going to be horizontal or vertical, for now just create standard text-based links to "index.html" (Home), "feedback.html" (Feedback), and "products.html" (Products). Later there will be two more links and some more specific navigation bar requirements that you can use to help you adjust this nav area accordingly.
On the main page template, in a non-editable (locked) area at the bottom of the page, create some copyright text for use on this site. Include your company name in it (which should include your own name). Then create a library item out of it.
Once you have all of the above areas of the page set up, you will be ready to create some appropriate styles to control the formatting. See the section below for CSS guidelines.
Your company pages will be formatted completely with Cascading Style Sheets (CSS). If you created your layout with AP Divs, make sure your general page formatting styles are going into a separate style sheet file. This file should be named "main.css" If you created your layout using a built-in layout style sheet, some page formatting may have to be placed in that same style sheet file to adjust the given margins, colors, etc., but anything new should be placed in your own separate "main.css" file as well. (I will not go searching through any Dreamweaver created built-in style sheet trying to find a few styles that you added into that large file.) Regardless, you must have a "main.css" style sheet file that your pages attach to and that file must be supplying some basic formatting for your pages. That file will be used for CSS basic format grading purposes.
This "main.css" style sheet should make use of classes and id's that you set up on the template page for these styling purposes. If you created your layout using the built-in layouts, you will have to familiarize yourself with the id's and/or classes that were created for you already. Either way, the main style sheet should control some of the following kinds of formatting: margins, padding, fonts, text and background colors (and/or images), heading styles, link styles for your navigation, etc.
You should try to avoid placing styles within the main pages. Keep your style rules in external style sheet files. If you created your layout by creating your own AP Divs, these styles probably ended up in your template page. You should export them to an external style sheet using the method introduced in your textbook in Chapter 4. In this case, use a style sheet named "layout.css" and keep those styles separate from your general page formatting styles if possible.
Using the main page template, create a "My Company" home page, filename "index.html". When creating this page, use Dreamweaver's "File" -> "New" -> "Page From Template" menu commands so that the page will be created properly and future changes to the template will automatically update this page.
In the editable regions of the page, add content to introduce your company, give company history, and a general introduction to your products and/or services. Use headings, paragraph text, and at least one appropriate image.
Using the main page template, create a form page for collecting feedback from customers about your products. When creating this page, use Dreamweaver's "File" -> "New" -> "Page From Template" menu commands so that the page will be created properly and future changes to the template will automatically update this page. Since this page's content will be very similar to that of the product feedback form that you built from assignment 9, you can copy/paste the form itself and make some modifications as follows.
After pasting the main content of your assignment 9 form page into your new page's main content editable region, you are ready to complete the page. If there were any form related problems in your graded assignment 9, you should fix those problems so you don't get marked down a second time for them. You should also fill in the other editable regions of the page. Save and test your form page in the browser. Because of the way templates and form validation and copy/paste works, your previous validation may not be working in the browser (try submitting the form without filling in any required fields and see what happens.) If it is not working like it once did (in assignment 9), you'll have to return to Dreamweaver to fix this. To do so, select the form, open the Behaviors panel, delete the "Validate Form" behavior, then recreate it. Refer back to assignment 9 as needed for a reminder on what needs to be validated.
Use CSS to format the form nicely, and tailor it to your current design (which may vary from the original assignment 9 design.) Use the "get" method instead of the default "post" method on your form -- you'll know it is working if the browser's address area shows the form values selected after submission. To set this, click on the form itself and use the property inspector to choose "get" in the "method box." (This also helps me to grade your form.)
After the form is successfully submitted, it should display a feedback confirmation page (also created from the main page template). This confirmation page should contain at least a few sentences of typical confirmation information. Connect your form to this confirmation page via the form's "action" property in the property inspector (select the form first.)
Using the main page template, create another 2 company pages of your choice. When creating these pages, use Dreamweaver's "File" -> "New" -> "Page From Template" menu commands so that the pages will be created properly and future changes to the template will automatically update these pages. Like other pages, they must contain enough content to fill most of the page when viewed at 1024x768 and be appropriate for a company page intended for the general public to read. The main page template's navigation bar should be modified to include links to these two new pages and then all other pages should be updated so you end up with a properly working nav bar on all pages.
Using the main page template, create a blank page and then build a products page on it. When creating this page, use Dreamweaver's "File" -> "New" -> "Page From Template" menu commands so that the page will be created properly and future changes to the template will automatically update this page.
In the main content area of the page, you'll need to display a table of product info with at least 10 products. To do so, you are encouraged to copy and paste your collection table from assignment 5. (If you never did that one, refer to that assignment's instructions to create that table.)
Once you have this collection table on the page, save it as products.html. Then you'll be ready to make the following enhancements.
Above the product (collection) table, there should be an appropriate (new) paragraph to introduce these items as products for sale (instead of just items you personally collect.) A few sentences explaining why everyone should find these items a must-have for the home and/or office would do nicely.
One column of your table must display prices, so add/modify your original table as needed to provide for this. Enter prices as you see fit (no relation to actual market value of items need exist.)
Identify at least 3 products out of the 10 in your collection table that will end up being featured (as on sale) items at your company. In the next section below, you'll be creating a separate little detail product page for each of these 3.
Note that the 10 points indicated for this page also includes the 3 detail product links and "open browser window" behaviors that are discussed below.
Create a second template that will be used to display a small detailed product information page for a single product. The template will then be used to create 3 of these detailed product pages (as discussed in the previous step). These will be small partial pages that will display in a small pop-up window when the product is clicked on from within the main products page. When creating the template, use only the upper left portion of the page to hold the information so it can fit in a small browser pop-up window.
In the template, include separate editable regions for the name of the product, an image of the product, a description of the product, and its price. Locked areas (non editable regions) of the template must also be used to include generic information about your company or products (logo, text, etc.). No navigation is required. You may style this template by using a new separate style sheet, by using styles within the template file itself, by attaching to your main page style sheet(s), or by some combination of these (up to you.)
From that completed template create your 3 product detail pages. The detail pages must include a picture of the product (can be borrowed from the Internet). Each of these little product detail pages should be made to fit in a small pop-up window. So don't bother trying to fill them up with a lot of content. Further, try to keep the amount of detail content about the same on each of the 3 pages so that the same size browser window can be used to display them.
When these 3 detail product pages are done, return to your Main "products" page, and create the 3 links from within your "collection" table's items to these 3 detail product pages. When the links are in place, add the necessary "open browser window" behaviors on those links so that they respond to clicks by creating a new (pop-up) browser window that is just big enough to fit the typical content of your 3 detail pages. Set the "open browser window" behavior dialog box options so that these pop-up windows do not include any toolbars, menu bars, or status bars (but should allow resizing and scroll bars if needed).
Make use of the Spry framework in one of the following ways (for 5 extra credit points, do both.)
Note that you can also use Spry for the navigation bar (as detailed below), but that does not count here -- this is a separate use of Spry.
On the main page template, create html meta tags (in the head section of the document) for "description" and "keywords" for search engine purposes and enter a short description and a thoughtful list of keywords for your company. The goal is to have your site's pages be ranked highly by search engines for the specific keywords you are choosing. Your score will be partially based on how well you keep the following guidelines in mind.
Keywords should reflect what a person would actually type into a search engine's search box when trying to find your site. Keywords are most effective when these words also appear in the page title, headings, description meta tag, links, alternative text of images, and within the regular text of the page. Don't stuff too many keywords into your list or search engines (and instructors) can penalize you, especially for keywords you list that don't even appear on your page. The description should accurately reflect the unique content that is within your site. Descriptions are shown by search engines when your site is displayed as a search result. The early part of the keyword list and description text is more important than the ending part, so put the more important items earlier -- both can be truncated by search engines if they are too long. Assume that the name of your company is not well known and is unlikely to be typed into a search engine's search box directly. Keywords relating to your products are more likely.
Your navigation bar can be based on one of the choices indicated below. Either way there should be 5 main links visible on the navigation bar initially -- Home, Products, Feedback, and 2 more for the 2 pages of your choice. However you decide to create your link effects, there must be some obvious button-like changes taking place when the user hovers over the nav bar links with their mouse.
Your navigation bar styles should be separate and unique from the styles that other links have within the main content area of your pages -- the navigation link styles should be more dramatic and the main content link styles should be more subtle.
You may obtain your images from any source you like, but you may not use any images that have already been used on any assignments or class demonstrations. This is true for product images, logos, background images, etc. Feel free to use Google image search, microsoft office clip art online, or any other source you have for images. Logos and button images can be created yourself quickly easily and freely online (see the link in the logo requirement section toward the top of part 1 above.)
As you complete each part of this project, you should use Dreamweaver to upload your work to your own RCC server account for testing and backup purposes. But before you upload anything, use Dreamweaver's FTP capabilities to create a folder on your RCC account server called "dwfp". You should then upload all of your final project files and folders into that "dwfp" folder. That way, any previously submitted assignment 8, 9, or 10 files and folders can stay there without interfering with your final project's files and folders. The procedures to do so are the same as for assignment 10 when you created the "a10" folder. (If you have not uploaded before, consult the assignment 8 for an introduction.) In addition to having your site stored on a portable flash drive, it is also a good idea to maintain a second (backup) copy of your site on a second storage medium. Upload your work into your server account often so that it can play the roll of your backup.
Note that if you are unsuccessful in uploading your site for any reason, you will lose the points for this part and you also must submit a disk version of your site to obtain full credit for the other parts of this assignment (so your site can be tested and graded properly). Feel free to email your instructor if you are experiencing any problems with uploading your files or viewing them in the browser after uploading them.
As you are uploading your files, keep the following in mind. You should upload all of the files and folders in your local root folder, but not the root folder itself. Always upload into the "dwfp" folder on the server. Within that "dwfp" folder, your "Library", "Templates", and "SpryAssets" folders (and files) should all get uploaded. They are needed for grading purposes even if your site might appear to work fine if you test it in the browser without them.
After uploading your files, be sure to test your site using the URL
http://209.129.8.3/~smcleod/dwjstudent/dwfp
where you use your own first initial and last name instead of jstudent, as specified in assignment 8. Make sure that everything was uploaded properly and that all of your pages, links, CSS, images, etc. are functioning correctly from within the browser. Your home page should be named index.html.
After you have uploaded and tested your site, send an email to your instructor so it can be graded. Failure to email in a timely fashion will result in a loss of 5 points.
Email your instructor with the following information:
Suggestion: send it to yourself first to make sure the link works. If so, then forward the message to me.
This message must be sent or it will result in lateness points taken. After you send this email, you cannot make any further changes to your online site or they either won't be graded or they will result in additional points deducted for lateness.
These print screens can be turned in at the final exam without any lateness but they cannot differ from what you uploaded to the server or they will lose points. They can be submitted earlier than this either in class or in the MLK lab.
Modify your cover sheet document from a previous assignment (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", the assignment number "Final Project", and the URL for your uploaded site, each on its own line in a large font, centered across the page (just make it look decent, not fancy).
Then turn in the following items, stapled together in this order. Note that you can lose points for any missing printouts -- the points would be deducted from the particular final project feature that the printscreen covers (template, extension, etc.)