Description: During this class you will use Notepad, then later a web editor, such as Dreamweaver or Expression Web, to build at least a 5-page "portfolio" Personal or Business website for yourself or for a real or perspective client. At minimum, by the end of the semester, your website will have a Home page with Navigation links to a Resume page, a Portfolio page (often with a collection of images and short descriptions showcasing things you have done or services you offer), a Newsletter (or an About our Services page), and a working "Server Side" Contact Form.

Try to use this as an opportunity to have a professionally prepared online resume and also a place to show off your talents and creativity and skills so that you can be ready to apply for any potential employment opportunity or promotion that may open in the future. Note: if you build a business site for someone else, you still must create and submit an online resume, even if it is not part of the overall navigation.
(Do NOT build your site by filling in the blanks of one of the online Template forms that are provided by hosting companies for users without web skills.)

This first project is the very important Design Phase of your website Development. It will include a site Design Mockup, sometimes called a WireFrame (a page schematic or visual guide that may only use boxes to represent the skeletal framework of how a website in organized, but not necessarily how it looks), and a sitemap flowchart or Story Board. It will show where the masthead is located, if the navigation is horizontal or vertical, how many columns will be on the page... This document will also include phased delivery Deadlines (clearly describing the features and maximum number of pages - to avoid scope creep), with an area for Client Sign-off. At the bottom you will include Guideline hints. The entire Mockup will be saved as a .PDF document. You can use Microsoft Word (choose Save as Type: PDF) or an Adobe product or another software package to create this project.

If you are doing a website for someone's business, try to learn about their business before your first meeting. When you meet your client for the first time, ask relevant questions, such as:

1. What does the company do?
2. Who will give final authorization for this project?
3. Who are the company's clients or web site visitors or target market?
4. What is the goal of the website?
5. Does the company have a logo and/or color theme?
6. What is the project budget for building the site?
7. Will your site need future updates?
8. What is the project budget for maintaining the site?
9. What is the project deadline?
10. Do you have the original or legally authorized graphics (that do not infringe on copyrights) that will be needed for this site?
11. Do you have text content (that will not violate copyright laws) for the website?
12. Will this site connect to an online database?
13. What are potential problems that might arise during the development of this site?

For accessibility (allowing individuals with motor and visual limitations to easily navigate your site) and with plain old logic in mind, try to organize your site's navigation in a left-to-right and/or top-to-bottom manner. This is important because screen readers, such as JAWS for Windows and Dragon Naturally Speaking, start reading from the upper-left corner of the Document window.

Keep your page layout, header, logo, and navigation consistent to ensure a good user experience. Design your site so any user can click through the pages in your site without getting confused.

For an online Dreamweaver tutorial on Planning your website design, see:
http://www.adobe.com/support/dreamweaver/layout/site_planning/

For Web Authoring Rules see (it may take a little while to load):
http://www.studiobast.com/sb_students/content/WABC_Book.pdf Web Authoring Rules Chapter 3
For Planning Your Website see:
http://www.studiobast.com/sb_students/content/WABC_Book.pdf Planning Your Work Chapter 5

Click here for Creating a Flowchart in Microsoft Word (5:20 min. YouTube video) (It may take a few moments to load)
I realize you are not doing a programming flowchart for this process, but this video does show how to use Shapes in Word

It is simply the Design Phase Mockup. It is NOT supposed to work   : -)

Save Mockup, Deadlines, Guidelines as a single document .pdf file.

Note 1: .pdf files can be opened on the Web more readily than .doc files.

Note 2: .pdf files are less likely to have a virus.

Note 3: .pdf proposals are harder for someone else to modify or falsify.

All of the above should be neatly typed and laid out as a single document on a Word Processor or in Adobe. If you used a Word Processing document save the final project as a PDF. If you used Adobe, save the final mockup project as a PDF.

Note: In Microsoft Word choose "Save As" a PDF Page which will automatically add a .pdf extension. (Do not use spaces in filenames that will be put on the web.)