Your Portfolio Website - This is to sell yourself to potential employers!

One of the first steps in the design of a website is to create a basic 'wireframe' layout of the site structure. Adobe have just introduced a new product that will aid you in creatiing this 'wireframe' layout. You are required to create a thumbnail layout with navigation, page names and a footer.

You can use the example image to create your thumbnails, however, in your design you must rename and add addition pages that will enhance your site and impress potential employers.

This task is worth 5 Marks and must be completed and handed in at the start of class in Week 3. You will email your completed muse file to me. The file is to be named as follows - xxxxxmuse. Where xxx represents your name - an example is - moneillmuse.

You will accomplish this by using Adobe Muse.

Download Adobe Muse for Windows XP, Vista, Windows 7 from here.

Download Adobe Muse for MAC from here.

Install this application on your home computer or laptop.

Watch the video on this page ' Layout in Muse', it's the last link on the page. Have Muse open as your watch the video. It will guide you through the steps to complete this task.

Your thumbnail layout should look something like this. Muse layout

Website Requirements - See the bottom of this page for evaluation - 30 Marks

Your website is to be designed using a basic CSS layout, and controlled with a TEMPLATE. You are to have an effective navigation scheme - this can be horizontal or vertical. The navigation bar can be created with a Dreamweaver Spry Menu Bar or Project Seven Pop Menu Magic (PMM is the best). You must demonstrate the use of a Spry Widget. There is to be effective use of colour, text, and images. All images must be positioned on the page with the style sheet. You must have appropriate titles on each page, and propert META tags must be included in the head section of the base template to assist with SEO.

Important

Your website most follow a specifc naming criteria for the menu bar and associated linked web pages. Here is the suggested method that you should follow.

As a minimum your website is to include the following pages.

HOME PAGE - Week 9 - This page must contain an introduction to YOUR program. You are to outline the semester that you are currently in, the length of the program. The skill sets that you presently have and what knowledge you will gain by the time you graduate.

You should say something about how you created the site and the applications that you used. You must have a link to your program site. This web page must include an appropriate image that floats to the right using the .imageright style.

GRAPHICS PAGE -Week 9 -This page will explain how you used Fireworks to create banners and web page mock ups. You need to explain the use of layers when creating the mock-up and proper labels for the main components of the mock-up. You will use snag-it to capture an image of your mockup page. This image must be no wider than 400 px and can float from the left or right using the float style

MEDIA SECTION

Video Page - Week 9 -This page will explain the purpose of your streaming media and how you created the 'info commercial', from design, to video, conversion to flash SWF or FLV. The video will play inside this page. You will create a table to control the placement of the video. The video size cannot be greater than 640 px.

Podcast Page-Week 10 -Podcasting and streaming with 'flash' are now the becoming 'main stream' methods for businesses to communicate with employees, current and potential customers. You are to explain how you created the 'podcast', applications used, and then have your MP3 podcast file embedded in the page so it will play on click.

PDF Page- Week 12 -This page will elaborate on the use of Adobe Acrobat. The advantages, including the ability to set security, passwords, print options, etc. You will style a report, set the required security, print options, etc., and have it linked from an Acrobat logo on the web page.

WEB DESIGN -

CSS -Week 10 - You will explain the method used to create your site. The important of separating content from presentation.

Forms - Week 12 - Design a prescribed form that will send the form by email on submit. Explain the method used to create the form and the importance of proper lables, ID's and overall design of the firm. The form must be styled with CSS.

Mobile -Week 10 - You must also explain the importance of designing for mobile devices. Insert an image or images of a smart phone layout from Device Central. Explain the importance of an application such as Device Central and JQuery Mobile.Create a mobile site from the a prescribed template. Use device central to ensure the mobile site will work on your smartphone.

QR Code -Week 10 - Crreate a QR code that is directed to your mobile site. The QR code must be formated as an image and place onthis page. It is to be large enough so that a person with a smart phone and QR scanning ability can scan the code. You must demonstrate that this works on your mobile phone to receive the marks.

MY PROGRAM - All due week 12

Mastery- Use the Spry Tab Panel to explain a summary of the 3 most important courses you will take in the 5th or 6th semester. For those of you in the 2 year program use 3 courses that you have taken - do not use MRK260.

IMC- Explain the importance of IMC. Include and course information from reports or presentations that you prepared, conducted, etc.

Marketing Plan - Explain the steps required to complete a marketing plan. Include examples of difficulties you faced in completing this task. Include any images of product, etc. that may enhance this page.

OTHER STUFF- All due week 13 - Take this opportunity to say something about yourself, goals, interests, etc. You can create a separate page and drop down menu for each item.

Marks for webpages and weeks they are due:

Page Name	Marks	Page Name	Marks
Home -W9	2	CSS-W10	3
Graphics-W9	2	Forms-W11	2
Video-W9	2	Mobile-W10	3
Podcast-W10	2	QR Code-W10	2
PDF-W12	2	Mastery-W13	4
IMC-W13	2	Marketing Plan-W13	2
Other Stuff -W13	2