Back to Digital Media Home

 Web Design (FrontPage)
Project Guidelines 

Computer monitor displaying WWW
1. Please create an e-portfolio website consisting of at least five web pages -- a home page and four additional pages -- showcasing each of the five digital media projects you created in this course.  The home page will also serve as your FrontPage (Web Design Project) page.

Please design your site so that visitors running 800 x 600 video display resolution can view them without having to scroll horizontally. 

Wherever you use HTML text (plain text), use only sans-serif fonts which are compatible with basic Windows PCs, Macs and Unix computers as we discussed in class.

2. On your project home page, please display:
  • A site identifier, such as a banner or logo.  May be text, graphic, or both.  Site identifiers should always appear in the upper part of a page and should appear in the same location on all pages.
     
  • A page header -- may be text or graphic or both --  that displays the topic of this page. Page headers should always appear in the upper part of a page and should appear in the same location on all pages.
     
  • Your name and your photo. 
     
  • The course name and number, and the date.  You may convey this information via images, HTML text, or both.  Make the name of the course a link to the course home page, and configure that link to open in a new browser window as shown in our in-class tutorial.
     
  • A link by which visitors can send you e-mail.  This link may be an image, HTML text, or both.
     
  • An account of your experience, in your own words:

    • Describe how the information and hands-on skills you have learned in this course are like or unlike anything or any way you have learned before.

    • How do the information and hands-on skills you have learned in this course complement what you have learned in other courses and what you will need to know for the real business world?

    • Describe the process you went through to complete this e-portfolio

    • What did you learn about yourself in the process of completing this course?
       

  • At least one image representing this particular project.  For example, you might display an image of the FrontPage box and/or a screenshot of the FrontPage workspace.
     

  • A table of links allowing visitors to navigate to each of your other four project pages.  Do not configure these links to open in a new window.  You may display plain text links or display images and text. If you display images, they must all be the same height.
     
  • Do not display a "Home" link on this home page.
3. On your Digital Imaging Project (Adobe Photoshop Elements) page, please display:
  • A site identifier, such as a banner or logo.  May be text, graphic, or both.  Site identifiers should always appear in the upper part of a page and should appear in the same location on all pages.
     
  • A page header -- may be text or graphic or both --  that displays the topic of this page. Page headers should always appear in the upper part of a page and should appear in the same location on all pages.
     
  • At least one image representing this particular project.  For example, you might display an image of the Photoshop Elements box and/or a screenshot of the Photoshop workspace.
     
  • An account of your experience, in your own words.

    • Describe the process you went through to complete this Digital Imaging project. 

    • Include where you got ideas, how you explored the subject, what problems you encountered, and what revision strategies you used.

    • What did you learn about yourself in the process of completing this project?

    • What new knowledge did you gain and how did you gain it?

    • What are the key concepts you have learned in the process of completing this project?

    • How can you apply this information?

    • What ability does this sample of your work show?
       

  • A thumbnail image of the JPEG version of your panoramic photo.  Please configure this thumbnail image as a link that displays the full-size JPEG image in a new window when visitors click on it. Next to (or beneath) the thumbnail image, please display some text instructing visitors to click the thumbnail to see the full image.  Also display the file size of the full-size JPEG image that will be displayed. 
  • Please display a table of links to all five pages (including a link to the Home page) as we did in our in-class tutorial.  You may display these links as HTML text, or as both HTML text and images, but NOT simply as images without text.  Please make the link(s) to the page currently being viewed inactive and grayed out

 

4. On your Digital Audio Project (Sound Forge) page, please display:
  • A site identifier, such as a banner or logo.  May be text, graphic, or both.  Site identifiers should always appear in the upper part of a page and should appear in the same location on all pages.
     
  • A page header -- may be text or graphic or both --  that displays the topic of this page. Page headers should always appear in the upper part of a page and should appear in the same location on all pages.
     
  • At least one image representing this particular project.  For example, you might display an image of the Sound Forge box and/or a screenshot of the Sound Forge workspace.
     
  • An account of your experience, in your own words.

    • Describe the process you went through to complete this Digital Audio project. 

    • Include where you got ideas, how you explored the subject, what problems you encountered, and what revision strategies you used.

    • What did you learn about yourself in the process of completing this project?

    • What new knowledge did you gain and how did you gain it?

    • What are the key concepts you have learned in the process of completing this project?

    • How can you apply this information?

    • What ability does this sample of your work show?
       

  • Links (via both image and HTML text) to the Windows Media Audio (*.WMA) version of your commercial and the Macintosh AIFF (*.AIF) version.  Next to (or beneath) each link, please indicate the running length (time) and file size of each file. 
  • Please display a table of links to all five pages (including a link to the Home page) as we did in our in-class tutorial.  You may display these links as HTML text, or as both HTML text and images, but NOT simply as images without text.  Please make the link(s) to the page currently being viewed inactive and grayed out.
     

 

5. On your Digital Video Project (Windows Movie Maker) page, please display:
  • A site identifier, such as a banner or logo.  May be text, graphic, or both.  Site identifiers should always appear in the upper part of a page and should appear in the same location on all pages.
     
  • A page header -- may be text or graphic or both --  that displays the topic of this page. Page headers should always appear in the upper part of a page and should appear in the same location on all pages.
     
  • At least one image representing this particular project.  For example, you might display an image of the Movie Maker box and/or a screenshot of the Movie Maker workspace.
     
  • An account of your experience, in your own words.

    • Describe the process you went through to complete this Digital Video project. 

    • Include where you got ideas, how you explored the subject, what problems you encountered, and what revision strategies you used.

    • What did you learn about yourself in the process of completing this project?

    • What new knowledge did you gain and how did you gain it?

    • What are the key concepts you have learned in the process of completing this project?

    • How can you apply this information?

    • What ability does this sample of your work show?
       

  • Links (via both image and HTML text) to the Windows Media Video (WMV) for Broadband (512 Kbps) version of your video.  Nearby, please indicate the running length (time) and file size of your video. 

  • Please display a table of links to all five pages (including a link to the Home page) as we did in our in-class tutorial.  You may display these links as HTML text, or as both HTML text and images, but NOT simply as images without text.  Please make the link(s) to the page currently being viewed inactive and grayed out.

 

6. On your Multimedia Presentation Project (Microsoft PowerPoint) page, please display:
  • A site identifier, such as a banner or logo.  May be text, graphic, or both.  Site identifiers should always appear in the upper part of a page and should appear in the same location on all pages.
     
  • A page header -- may be text or graphic or both --  that displays the topic of this page. Page headers should always appear in the upper part of a page and should appear in the same location on all pages.
     
  • At least one image representing this particular project.  For example, you might display an image of the PowerPoint box and/or a screenshot of the PowerPoint workspace
     
  • An account of your experience, in your own words.

    • Describe the process you went through to complete this Multimedia Presentation project. 

    • Include where you got ideas, how you explored the subject, what problems you encountered, and what revision strategies you used.

    • What did you learn about yourself in the process of completing this project?

    • What new knowledge did you gain and how did you gain it?

    • What are the key concepts you have learned in the process of completing this project?

    • How can you apply this information?

    • What ability does this sample of your work show?
       

  • A statement explaining that the PowerPoint file itself is too large to post to the web and that you are instead displaying only images of your slides.  
     
  • Thumbnail images of each of your PowerPoint project slides.  Please configure each thumbnail slide image as a link that displays the full-size JPEG image in a new window when visitors click on it.  

Next to (or beneath) each thumbnail image, please indicate the filename and file size of the full-size JPEG image that will be displayed. 

It is okay if visitors have to scroll horizontally and/or vertically when viewing the full-size JPEG images of your slides.

  • Please display a table of links to all five pages (including a link to the Home page) as we did in our in-class tutorial.  You may display these links as HTML text, or as both HTML text and images, but NOT simply as images without text.  Please make the link(s) to the page currently being viewed inactive and grayed out.   

 

7. Use photo quality images throughout.  Do not use clip art nor illustrations. 

Use Photoshop to optimize all graphic images in order to minimize page download time.

Always resize large images down to your desired display dimensions before inserting them into your web pages.  Never resize images after inserting them into web pages (except for thumbnails created via the Auto Thumbnail feature).

Avoid pixelated images.  

If your web pages are in a background color other than white, then make the background of all images match that color or be transparent.  See example.

Assign appropriate ALT tags to all images as we discussed in class.  Make sure all ALT tags communicate the function or purpose of the graphic as explained in the online readings. 

If you use the Auto Thumbnail feature, bevels and borders are optional.  However, if you decide to apply a bevel or a border for your thumbnail, you must choose one or the other, NOT BOTH.  In other words, do not apply a bevel and a border to the same thumbnail.  In addition, if you apply a bevel or a border to ANY thumbnail on a page, you must apply the same bevel or border to ALL thumbnails on that page.

8. As we did in our in-class tutorial, assign a unique page title to each page that clearly identifies the topic of that page, followed by your name and then the course name and number.
9. Use correct grammar, punctuation, spelling and capitalization throughout this e-portfolio.
10.

When saving your web pages, make each filename a descriptive name that indicates that page's topic.  For example: photoshop.html or digital_imaging.html

Omit spaces from all filenames.  (You may use an underscore instead of a space if you wish.)  

Please post your files to a web server, then send me an e-mail message with a link to (the URL of) your project home page.  Deadline for sending me this message is 5:00 p.m. on the date this assignment is due.

In addition, please submit your files on disk.  If you have other files stored on that disk, then please place your Web Design (FrontPage) Project files into a folder named either Web Design Project or FrontPage Project.  Organize your images, sounds, and videos into sub-folders beneath the directory where your HTML pages are stored.  For example, all images should be stored in a sub-folder named images, all videos should be in a folder called videos, etc.  

HINT:  Organize your resources into sub-folders before you create your web pages.  

I must be able to view your pages -- on disk as well as via the web -- without any error messages or missing files.


Home Home