Summary: This project is still under construction! Please forgive spelling errors, broken links and other formatting problems.

"Home Sweet Home" Portfolio Project in Dreamweaver

    ●  Students design and build a “home” page linking all their web sites together.  They must include a “Defense of Learning” reflection on this index page, detailing the projects so far, what was accomplished, introducing themselves to the professor with a personalized greeting and professional photos.

    ●   Students create an index page at the root of their sites and learn basic folder-management skills, keeping all their sites relative to the “home” page.  Included on the “homepage” are interactive images such as .gifs, Java slideshows,  navigation rollovers using both images and pure CSS.  

    ●   This “homepage” is intended to showcase everything students have gained from their experience in web design thus far, like CSS gradients, CSS borders, and responsive elements, etc.  They must portray themselves in a positive and professional manner to obtain the approval of the professor in order to receive credit.   

    ●   This is the student’s introduction, their chance to make a good first impression and entice the viewer to explore deeper into their websites, appreciating what hard work was completed.

    ●   This is the “capstone” project encompassing everything students have learned in web design.

    ●   Students make a professional presence on the web showcasing themselves and promoting their web design work, whether they choose to be professional web designers or not.


    ●   The page must be an original creation, linking all their sites together, be technologically sophisticated and visually appealing.


The Project Happens in 3 Parts:

Part #1: Sketch a Site-Map - Design Always Begins with Paper and Pencil! ~

  •   Map your site's buttons, content and navigation.

The site-map helps students understand file management and reinforce good structural practices they have already learned.

All required links are accounted for and the role of the “homepage” is emphasised.

 


Part #2: Create an index page at the Root Level of your sites ~

  •   Students build the foundations of their index page in Dreamweaver, making sure it's at the root level of all the sites.


  •   CSS, HTML and JavaScript is used to style everything:


Favicons Floated Images CSS Borders Google Fonts CSS Background Colors Semi-Transparent Backgrounds
Pseudo Tags CSS Generated Rounded Divs Gradient Text Absolute Links Relative Links Slideshows
Background Images


  •   The index page design will be graded, according to the Rubric.


Last Part: The Final Product ~

The final product must link to all other sites

and showcase your skills appropriately.

  •  All content you use to describe your work must be 90% your own, modified into an original composition, including all text and imagery.

  •   Your site must have a banner, links, text and images. 

  •   Everything must reflect the subject in a positive manner and must be school appropriate.


Other People's Work:

These are examples created by students following this project.


Example 1

Example 2

Example 3

Example 7

Example 8

Example 9

   

Example 4

Example 5

Example 6

 

 

 


New Project Begins Today …

portfolio-digital-art-example.png

New Portfolio Project "Home Sweet Home" Begins Today ~  

Introduce this PBL project by reading the Entry Document with the Class …

Reflection Journal - Attach your previous project to your portfolio and reflect upon what you have learned from the previous project.

Tutorial #1 - Create a Site Map for your Entire Site including all the subpages and sites - Not Due Today - Get Started Now.

Tutorial #2 - Create a New index Page at the Root Level of your sites In Dreamweaver - NOTHING TO ATTACH - Just Do it!

Tutorial #3 - Begin your style sheet - Attach by Due Date.


Home Sweet Home - Day 2

image

"Home Sweet Home" Portfolio Project - Day 2 ~  

Journal - Create your Home Page and Comment - Begin class with this warm-up writing prompt … ~OR~

Journal - Constructive Criticism - Begin class with this warm-up writing prompt.

Tutorial #1 - Site Map - Attach by Due Date.

Tutorial #2 - Finish your Background - Attach by Due Date.

Tutorial #3 - Finish your style sheet - Attach by Due Date.

Workshop - Where does your new index page go?


Home Sweet Home - Day 3

bosch-small.jpg

"Home Sweet Home" Portfolio Project - Day 3 ~  

Journal - Background Scroll - Begin class with this warm-up writing prompt … ~OR~

Journal - What is Good About Me? Begin class with this warm-up writing prompt …

Tutorial #1 - Rounded Divs with Drop Shadow - Attach by Due Date.

Tutorial #2 - Buttons in AI - Attach by Due Date.

Workshop - Create your new CSS rules - you need the 5 basic parts of every web page.


Home Sweet Home - Day 4

face-small.jpg

"Home Sweet Home" Portfolio Project - Day 4 ~  

Journal - 2 New Tools - You have only 10 min's. to complete this task … ~OR~

Journal - What stands out? - You have only 10 min's. to complete this task … ~OR~

Journal - Check out these two sites - Begin class with this warm-up writing prompt … ~OR~

Journal - What is this Student Saying? Begin class with this warm-up writing prompt …

Tutorial #1 - Choose your Colors for this Project - Attach by Due Date.

Tutorial #2 - Borders in CSS - Attach by Due Date.

Tutorial #3 - Favicon - Attach by Due Date.

Tutorial #5 - CSS Header - Attach by Due Date.

Workshop - Demonstrate what ../ means by showing Dreamweaver’s files structure  ../ means up one level.


Home Sweet Home - Day 5

Kaboom.jpg

"Home Sweet Home" Portfolio Project - Day 5 ~  

Journal - Pick a site like yours - Begin class with this warm-up writing prompt … ~OR~

Journal - Do You Like this Example? - Begin class with this warm-up writing prompt …

Tutorial #1 - Buttons using AI - Attach by Due Date.

Tutorial #2 - Scrolling Div - Attach by Due Date.

Tutorial #3 - Favicon - Attach by Due Date.

Tutorial #4 - CSS Header - Attach by Due Date.

Workshop - Target Blank - What does it mean?


Home Sweet Home - Day 6

Digital Art and Design

"Home Sweet Home" Portfolio Project - Day 6 ~  

Journal - Was the Person Happy? Begin class with this warm-up writing prompt … ~OR~

Journal - Check out this portfolio page - Begin class with this warm-up writing prompt … ~OR~

Journal - Who is this guy? Begin class with this warm-up writing prompt … ~OR~

 Tutorial #1 - Java Slider - Attach by Due Date.

Tutorial #2 - Scrolling Div - Attach by Due Date.

Tutorial #3 - Favicon - Attach by Due Date.

Tutorial #4 - CSS Header - Attach by Due Date.

•  Finish and upload your pages.

  •   workshop - Peer Edit Critiques.


Home Sweet Home - Day 7

clone-stamp-example6.jpg

"Home Sweet Home" Portfolio Project - Day 7 ~  

Journal - Marilyn - Begin class with this warm-up writing prompt … ~OR~

Journal - What 2 Things - Begin class with this warm-up writing prompt … ~OR~

Journal - What is this Student Saying? Begin class with this warm-up writing prompt … ~OR~

Journal - What stands out? - Begin class with this warm-up writing prompt …

Tutorial #1 - Target _blank tutorial - Attach by Due Date.

Tutorial #2 - First Letter Pseudo Tags - Attach by Due Date.

Tutorial #3 - CSS Header - Attach by Due Date.

Workshop - Copy your project reflections and combine them …


Home Sweet Home - Day 8

Digital Art and Design

"The Eyes are the Windows to the Soul"  ~   Cicero - 106-43 B.C.

Journal - Portfolio Page - Begin class with this warm-up writing prompt … ~OR~

Journal - Review the Rubric and grade this site - Begin class with this warm-up writing prompt … ~OR~

Journal - Your Design - Begin class with this warm-up writing prompt …

Add EVERYTHING you've learned so far to your portfolio page.

Tutorial #1 - Rollover Image in Ps - Attach by Due Date.

Tutorial #2 - CSS Header - Attach by Due Date.

  •   workshop - Peer Edit Critiques.


Home Sweet Home - Day 9

Digital Art and Design

"Home Sweet Home" Portfolio Project - Day 9 ~

Journal - Name 3 Things - Begin class with this warm-up writing prompt … ~OR~

Journal - Best Work - Begin class with this warm-up writing prompt … ~OR~

Add EVERYTHING you've learned so far to your portfolio page.

Tutorial #1 - Scrolling Div - Attach by Due Date.

Tutorial #2 - Animated GIF in Ps - Attach by Due Date.

Tutorial #3 - CSS Header - Attach by Due Date.

Workshop - Project Due Soon!


Home Sweet Home - Day 10

Digital Art and Design

"Home Sweet Home" Portfolio Project - Day 10 ~

Journal - Could you be Friends? - Begin class with this warm-up writing prompt … ~OR~

Journal - What Did You Learn? - Begin class with this warm-up writing prompt … ~OR~

Add EVERYTHING you've learned so far to your portfolio page.

Tutorial #1 - Rollover Image - Attach by Due Date.

Tutorial #2 - Text Size - Attach by Due Date.

Tutorial #3 - Signature in Ps - Attach by Due Date.

  •   workshop - Peer Edit Critiques.


Home Sweet Home - Day 11

Digital Art and Design

"Home Sweet Home" Portfolio Project - Day 11 ~

Journal - Why should you get a Good Grade? - Begin class with this warm-up writing prompt … ~OR~

Journal - Agency - Begin class with this warm-up writing prompt…

Tutorial #1 - Rollover Image - Attach by Due Date.

Tutorial #2 - Internal Links - Attach by Due Date.

Tutorial #3 - Absolute _blank Links - Attach by Due Date.

Tutorial #4 - Responsive Media Query - Attach by Due Date.

  •   workshop - Media Query Example #1 and #2


Home Sweet Home - Day 12

Digital Art and Design

"Home Sweet Home" Portfolio Project - Day 12 ~

Journal - Why Learn Code? - Begin class with this warm-up writing prompt … ~OR~

Journal - 1 New Thing Video - Begin class with this warm-up writing prompt.

Tutorial #1 - Responsive Java Script Slider - Attach by Due Date.

Tutorial #2 - Contact Forms - Attach by Due Date.

Tutorial #3 - Responsive Media Query - Attach by Due Date.

Add EVERYTHING you've learned so far to your portfolio page.

  •   workshop - Media Query Example #1 and #2


Home Sweet Home - Day 13

Digital Art and Design

"Home Sweet Home" Portfolio Project - Day 13 ~

Journal - What are your Strengths - Begin class with this warm-up writing prompt … ~OR~

Journal - What is this student saying? - Begin class with this warm-up writing prompt.

Add EVERYTHING you've learned so far to your portfolio page.

Tutorial #1 - Rollover Image - Attach by Due Date.

Tutorial #2 - Untitled Documents - Nothing to Attach - Just Do It because the Rubric says ...

Tutorial #3 - Responsive Media Query - Attach by Due Date.

Add EVERYTHING you've learned so far to your portfolio page.

  •   workshop - Media Query Example #1 and #2


Home Sweet Home - Day 14

Digital Art and Design

"Home Sweet Home" Portfolio Project - Day 14 ~

Journal - Tools Video - Begin class with this warm-up writing prompt … ~OR~

Journal - First Impressions - Begin class with this warm-up writing prompt …

Add EVERYTHING you've learned so far to your portfolio page.

Tutorial #1 - Semi-Transparent Backgrounds - Attach by Due Date.

Tutorial #2 - Untitled Documents - Nothing to Attach - Just Do It because the Rubric says ...

Tutorial #3 - Responsive Media Query - Attach by Due Date.

Add EVERYTHING you've learned so far to your portfolio page.

Workshop - Review Each Other's Welcome Messages!


Home Sweet Home - Day 15

Digital Art and Design

"Home Sweet Home" Portfolio Project - Day 15 ~

Journal - What are your Strengths - Begin class with this warm-up writing prompt …

Add EVERYTHING you've learned so far to your portfolio page.

Tutorial #1 - Animated Sunburst with Portrait - Attach by Due Date.

Tutorial #2 - Untitled Documents - Nothing to Attach - Just Do It because the Rubric says ...

Tutorial #3 - Responsive Media Query - Attach by Due Date.

Add EVERYTHING you've learned so far to your portfolio page.

  •   workshop - Media Query Example #1 and #2



Home Sweet Home - Day 16

Digital Art and Design

"Home Sweet Home" Portfolio Project - Day 16 ~

Journal - What are your Strengths - Begin class with this warm-up writing prompt…

Tutorial #1 - Animated Sunburst with Portrait - Attach by Due Date.

Tutorial #2 - Untitled Documents - Nothing to Attach - Just Do It because the Rubric says ...

Add EVERYTHING you've learned so far to your portfolio page.

  •   workshop - Peer Edit Critiques.