Final Website and Portfolio Artifact

For your final project, you will be creating a Website that includes a homepage and at least 4 other related pages. You will be designing, developing, and publishing your Website using the Dreamweaver features covered this term. This project is also the required "Course Portfolio Artifact" to be included in your Website Development and Design Portfolio if your are pursuing the CAS/OS Website Development and Design Associate of Applied Studies (AAS) degree.  Ask your instructor or a CAS/OS program advisor if you have questions regarding the porfolio.

You will be working on this website throughout the term. You will be submitting updates that will allow your instructor to provide feedback on your progress. It is important to submit these updates when they are due so that you will have time to make changes to your project before the next due date. The project is broken done into 5 submissions:

• Update #1: Planning with flowchart & sitemap (due Week 3)
• Update #2: Wireframe layout, homepage design & images (due Week 5)
• Update #3: Page layout, navigation bar, page design, content, and logo (due Week 7)
• Update #4: Adding more pages and components to the website (due Week 8)
• Final Submission: Due Finals Week

Consult your Course Calendar for exact due dates for each of these submissions.

Project Requirements

The requirements for your final project site are listed below:

• A "site definition" using Dreamweaver's "Manage Sites" feature.
• All the folders and files must be stored in the finalsite folder in SWS. Folder and file structure is organized and logical. No duplicate folders or files. Folder and file names follow the naming convention (lowercase, no space, no weird character).
• A main home page introducing your Website. This page should be named index.html.
• At least 4 additional related web pages (total of 5 pages including your homepage index). They have to be consistent and have relevant file names.
• All pages should have appropriate page titles using the <title> tag. For example: My website | Contact.
• You should have a consistent navigation bar on all pages. Do not use Spry menu. Visitor needs to know where they are on the page from the navigation bar.
• Your layout must be designed using CSS. The layout must be your own creation.You are not allowed to use a pre-built Dreamweaver CSS layouts or templates from internet or other sources, or copied from assignments.
• Do not use Tables for your layout.
• Your pages should have a consistent color and font theme. You may use a background color or an image.
• All CSS should be on an external style sheet. No embedded style, and no inline style. Save in the assets folder. If you have multiple stylesheets files, create a stylesheets folder inside the assets folder.
• At least 5 images on your site and all with alt text attribute on all of them. The images used for a picture rollover or disjointed rollovers do not count as the 5 images.
• All images should have been resampled or optimized for the web properly using image editing software, such as Photoshop. Provide an actual text to describe the image for the alt text, not just using a generic term like image1, image2, etc.
• Hyperlinks should have properties set for their different states: Link, Visited, Hover, Active.
• Multiple external hyperlinks to relevant websites on as many pages where they are appropriate. The external links should mostly be included directly within the body of your text (when appropriate) as opposed to just having a list of links. Links need to work and not just a dummy link.
• The following items should be included on at least one of your pages:
  • One e-mail hyperlink (see example in Project 1 - about-spiffy.html).
  • A form (complete the design of the form only – do not worry about the script to make the form work). Minimum 3 form fields and include at least one form validation.
  • A table with related data for tabular data and not layout.
  • Appropriate images with alternate text, including at least one rollover image and at least one disjointed rollover images
  • One or more lists – either ordered (numbered) or unordered (bullets), outside of the navigation bar.
  • Do not use Spry menu bar

Your project will be evaluated for efficient design, creativity, inclusion of all above items, and correct use of Dreamweaver features. All files must be organized in appropriate folders.  In addition, all links should work and all graphics should display properly. It is not recommended to include advanced features that have not been learned in this beginning course. 

You can upload your site to your finalsite directory on the SWS at anytime to preview it and test it out. Your project will not be formally graded until you notify your instructor that it is complete. Feel free to ask your instructor for assistance if something does not work correctly.

Back to the top

 

Update #1

Due with Week 3 Assignments

Planning a website is a crucial step in the design process. While it might seem like a lot of work when you really want to just start creating pages, planning can save you considerable time in the long run. It will help you avoid having to rework site elements and recreate your work. For this first update, you will be planning your site.

Carefully read our "Planning and Designing a Website" lecture notes. You should also visit the following websites and read through the information about planning and designing successful websites. This is required reading.

What you need to do to prepare for your final project Update #1:

Part 1

1. Create a flowchart (also known as a sitemap) for the proposed MySite using concepts used in your reading, or in the Useful Tips - Flowchart/Sitemap section. You only have to include a maximum of 10 pages (minimum of 5 pages) in the sitemap.
   
   You can use any drawing/design program you prefer to make the sitemap. Good choices include Word, PowerPoint, or Photoshop.
2. Save the file with the name my-sitemap into the finalsite folder, inside the assets/planning subfolder.

Part 2

1. Create a file (with html5 doctype) called "mysite-planning.html" (no quotes) and save it in the finalsite folder.
2. Give it a title page of "Planning | My Site" (no quotes).
3. Put a Header 1 (h1) as the first line with the text "Planning Guide for My Site" (no quotes).
4. Put a regular paragraph (p tag) under the h1 with your byline -- "by Your Name" (no quotes and where Your Name is your actual name).
5. Enter a name for your website and set it as Heading 2 (h2).
6. Answer the following questions in a numbered list (ordered list or ol) under the h2 tag:
1. What is the topic of your Website?
2. What are the goals and objectives of your website?
3. Who is the target audience? Create a user profile for your website.
4. Find one or two existing similar sites and make a few notes about your observations of these sites.
5. List the title of each page in your site. (These may change once you start working on the site.)
7. Put a Header (h2) under the ol you created above called "Color Palette" (no quotes).
8. Based on your vision and research, bullet list the parts of the page you plan to apply the color to, followed by a text description of the color, followed by the hexadecimal color number that is the exact color choice. For example, it would look something like "background color - light blue - #64FFFF (be sure to include the # sign with your hexadecimal color numbers). You'll place the bulleted, unordered list (ul) under the h2. Address each of the following parts of the page:
• background color -
• header font color -
• paragraph text font color -
• link font color -
• visited link font color -
9. Once you've completed the last ul, press the Enter key twice to create a paragraph tag and type "Sitemap" (no quotes).
10. Either insert your sitemap image or create a link to your "my-sitemap" file from the assets folder that you created in Part 1.
11. Save the file.
12. Upload both files (mysite-planning.html and your sitemap that is inside the assets folder) to the SWS under finalsite.
13. Mail your instructor using PCC email with a subject like CAS 111d Finalsite-Update 1 Uploaded Your Name (where Your Name is your actual name)

Instructor Note:
Be sure to use a browser (or more than one browser) to check your Web pages (or document) is on the SWS.

Back to the top

 

Update #2

Due with Week 5 Assignments

Requirements for this update:

Part 1

• Draw a wireframe of what your homepage going to look like. You can draw on a paper and turn it in or send me a file.
  
  You can use any drawing/design program you prefer to make the wireframe. Good choices include Word, PowerPoint, or Photoshop. If you use a drawing/design program, save your file inside the assets/planning folder.
• Collect images that you will use for your final website. You are required to have a minimum of 5 images. Save and upload them inside the finalsite/assets folder.

Part 2

Create the home page for your site. The home page should have sufficient content to let your instructor know what the site is about. It should also include a navigation menu (even if all the other pages aren't created yet!) This is also a good time to determine what colors, fonts, etc. you will be using on your site.
Remember: the home page of a website should be saved as index.html.

1. Create a new HTML5 page that will be a draft home page for your site. Name it "index.html" .  Make sure the new page is an HTML5 doctype. 
2. Add an appropriate "Page Title"
3. Add an appropriate "Heading 1" text to the top of your page. 
4. Under the Heading 1 text, add a draft navigation bar with links to the other 4 pages for your site (Remember - the requirement for this project is to have a home page PLUS 4 additional pages.) Note: the links for your navigation bar will not work because you are only creating the home page at this point. 
5. Add some minimal content to your home page under the navigation bar.
6. Create a link to your wireframe file.
7. Create styles for your text. These can be class or tag styles.
8. Set properties for your links - you can use the Page Properties to do this, however, you may change these later if you want to differentiate menu links from links within your content.

Working with a Logo Image:

1. We would like you to practice with optimizing an image for the web. You will be inserting and resampling a draft logo onto your home page. This logo will eventually be replaced with an actual logo for your project.
2. Download and save the following image to your finalsite/images folder:
   
   To download this image, click the link to open the image in your browser, then right-click the image and select "Save Image as". Save it as draft_logo.jpg in your finalsite/images folder.
   
   
3. Insert the image at the top of your home page above your Heading 1 text.
4. Resize the image to approximately 200px wide.  It is important to optimize all images that are inserted into your web pages.  Do do this, click the "Resample" button in the Property Inspector to optimize your logo image.  Follow the pop-up prompts to permanently save your optimized image.  
5. Make sure you also include appropriate alternate text for the image to comply with accessibility requirements.
6. Upload your home page to the Final project folder on the SWS. Remember to include any files that go with the home page, such as images and/or a CSS external file.
   
   Here is a sample of what is expected for this Update - your content, colors, menu items WILL BE DIFFERENT!
   
   Final Website Sample
7. Mail your instructor using PCC email with a subject like CAS 111d Finalsite-Update 2 Uploaded Your Name (where Your Name is your actual name)

Instructor Note:
Be sure to use a browser (or more than one browser) to check your Web pages (or document) is on the SWS.

Back to the top

 

Update #3

Due with Week 7 Assignments

Requirements for this update:

• Page Layout - Using skills learned in Modules 6 and 7, construct the layout for your pages using Divs and CSS. You can modify the Home page you submitted for Update #2 - or you can start from scratch. 
• Menu Bar (Navigation) - Construct the Menu Bar for your site. Make sure that each menu item correctly links to the corresponding page.
• Page Design - select colors, graphics, fonts for your site.
• Content - There should be considerable content on your home page so that it is obvious what your site is about. This should include text and images where appropriate.
• Logo - Each page on your site should include an image that serves as a "logo".  DO NOT submit this update with the Draft Logo you used for Update #2. You should have your own logo image for your website.
  • The "logo" image should include a link back to your Home page.  
  • The logo image should be saved inside an "images" folder.  
• All styles should be contained in an external CSS stylesheet. 
• Upload your updated final project website to the finalsite folder on the SWS.  Remember to include all supporting files and folders such as graphics, stylesheets, etc.
• Mail your instructor using PCC email with a subject like CAS 111d Finalsite-Update 3 Uploaded Your Name (where Your Name is your actual name)

Instructor Note:
Be sure to use a browser (or more than one browser) to check your Web pages (or document) is on the SWS.

Your instructors are aware that your website is currently in a draft "state".  You can continue to make changes to your content, navigation structure, images, etc. 

Back to the top

 

Update #4

Due with Week 8 Assignments

Requirements for this update:

• If not yet completed, create the remaining 4 pages for your site. If you successfully created the Home Page for Update #3, you should be able to duplicate it and simply change the content. Make sure every page has an appropriate page title.
• Make sure that every link works on every page.
• Add a table with a tabular data to at least one of your web pages.
• All pages should include a consistent layout based on the information covered in Chapter 9 of your textbook.
• Add at least 1 rollover images and 1 disjointed rollover images.
• On your home page, add a statement at the top of the page that clearly states to which page your table, rollover, and disjointed rollover images were added. (You should remove this statement after your Update #4 has been scored.)
• Continue to add relevant content to your pages and include links to external websites directly within your text where appropriate.
• Upload your updated final project website to the finalsite folder on the SWS. Remember to include all supporting files and folders such as images, stylesheets, etc.
• Mail your instructor using PCC email with a subject like CAS 111d Finalsite-Update 4 Uploaded Your Name (where Your Name is your actual name)

This is your final required update before the final submission during Week 11.  Please review the information regarding planning and designing your website from the "Module 2" material and continue to update, enhance, and develop your final project website.

Use the Web Design Best Practices as a checklist for your site design.

Please keep in mind this is a beginning web design course.  Your final project website should include the items listed at the beginning of this document.  Feel free to include enhancements that are within your skill-set but do not try to include features and code that you are not able to troubleshoot if something does not work as expected.

Instructor Note:
Be sure to use a browser (or more than one browser) to check your Web pages (or document) is on the SWS.

Back to the top

 

Final Submission

Due Finals Week

• Finished your final website project and make sure you meet all the project requirements.
• Upload your finished Website to the SWS. Be sure to upload all pages and graphics files. Once you've uploaded your site, use your browser to go to sws.pcc.edu and verify that all links work and all graphics display correctly.
• When you are finished and your site is ready to be graded, mail your instructor using PCC email with a subject like CAS 111d Finalsite Completed Your Name (where Your Name is your actual name)

Instructor Note:
Be sure to use a browser (or more than one browser) to check your Web pages (or document) is on the SWS.