Interior Example

Project Summary:

Build a Website using TextEdit and Dreamweaver

    ●   Students create a web page about a musician, a hobby, an athlete, classic car, church group, sport, or other school appropriate subject, using TextEdit.

    ●  This teaches the foundations of HTML by asking students to hand-code the following elements: divs, margins, text, widths, heights, floats and how to clear them, tables, opening and closing tags, #id’s and .classes, etc..

    ●   Then, students transfer their pages into Adobe® Dreamweaver® where any invalid code is detected and highlighted for the web author. This helps students learn the basics by fixing their own work in standards compliant format.

    ●  Students continue using Dreamweaver® to build a multiple-page site with at least 3 pages working links, video, written text, images, etc., ultimately uploading their completed site to a public server.


Why Learn Code?

    ●   It's easy to make web sites

  •   Why should I bother learning to build a web page from scratch when I could get a free site up in 20 minutes using Goggle, Wix, or WordPress?

  •   Coding … that's why.

  •   Coders think better!

    ●  Coding Teaches you Critical Thinking Skills

  •   Coders are detailed, deductive, critical, yet creative, expansive and risk taking, like artists … all the adjectives students want applied to themselves.

  •   This project gives the average person a basis to understand what's going on behind the scenes of web pages they so often visit and provides a basic foundation for coding.


The Project Happens in 3 Parts:

Part #1: Create a Site Map ~

Sketch Layout

Research the subject of your website.

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

  •   Create a “site-map” or “Graphic Organizer” outlining the pages of your web site: your links, headlines and sub-pages.

 

A site map is like a road map from your home page to wherever you're going.

 

  •   Create a Graphic Organizer outlining the pages of your web site using PowerPoint, Word, Photoshop, Illustrator, etc.


Part #2: Create an index page ~

Sketch Layout

  •   Then turn your site-map into a real website on the computer using HTML, Illustrator, TextEdit and Dreamweaver.


  •   Your index page design will become the template for at least 3 other linked pages, according to the requirements of the rubric linked here.


Last Part: The Final Product ~

  •   The final product must have 3 or more pages, links, banners, text and images.

  •   Work must be published on a portfolio so it can be publicly reviewed, including zipped folders and files.

  •   Portfolio must include a “Defense of Learning” reflection detailing the project, what was learned, etc.

  •   All content must be 90% modified from the original, essentially unrecognizable, including all text and imagery.

  •  

t least 3 different pages linked together, organizational hierarchy of the web site, verbal presentation skills, technological proficiency, attention to detail, QUALITY!

 

  •  All content must be 90% modified from the original, essentially unrecognizable, including all text and imagery.

  •   The final product must have 3 or more pages, links, banners, text and images. 

  •   It must reflect the nature of the subject in a positive, school appropriate manner.




Other People's Work:

These are examples created by students following this project.


Example 1

Example 2

Example 3

Example 4

Example 5

Example 6

Example 7

Example 8

Example 9

Example 10

Example 11

Example 12

     

New Project "Fan-Tastic Web Design" Begins Today

Digital Art and Design

New Project "Fan Tastic Web Design" Begins Today  ~ 

Introduce this PBL project by reading the Entry Document - What Makes a good Web Page Presentation with the Class …

Reflection Journal (if necessary) Attach the previous project to your portfolio and reflect upon what you have learned from it.

Split into groups, get on the computer & look for web pages with examples of web sites. Be prepared to explain to the class: "Is this a good Web Site?  Why or why not?"

Begin the First Tutorial

Visual Hierarchy in Web Pages.


Day #2: Fan-Tastic Web Design ~

Digital Art and Design

Day #2: Fan-Tastic Web Design  ~ Site Maps

Your First Journal Today! - Begin class with this warm-up writing prompt …

Tutorial #1 - Your First Web Page - Attach by Due Date.

Begin the Site Map Tutorial - Map the Layout of your website in Word or Presentation.

Workshop - Review the Introduction to HTML Presentation.


Day #3: Fan-Tastic Web Design ~

Digital Art and Design

Day #3: Fan-Tastic Web Design  ~ 

Begin class by viewing the Introduction to HTML Presentation.

Daily Journal - HTML Tags Journal - Begin class with this warm-up writing prompt.

Tutorial #1 - Index Page - Attach by Due Date.

Tutorial #2 - Banner in Photoshop - Begin this tutorial - you may not get it done today.

Assignment #1 - Choose your Colors for this Project - NOTHING TO ATTACH - Just Do it!

Finish the Site Map Tutorial - Do a Good Job!  This is going to be your first Critical Thinking Grade. 

Workshop - Site Mapping! You Need at Least 3 Links, Right? Use your Site Map to decide what you need.


Day #4: Fan-Tastic Web Design ~

Digital Art and Design

Day #4: Fan-Tastic Web Design   ~ 

Daily Journal - Fan Sites - Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - Two Tag Parts - Begin class with this warm-up writing prompt. ~ OR ~

Your First Journal Today! Begin class with this warm-up writing prompt …

Tutorial #1 - Special Characters - Attach by Due Date.

Tutorial #2 - Ordered Lists - Attach by Due Date.

Tutorial #3 - Finish your Banner in Photoshop - Attach by Due Date.

Assignment #1 - Choose your Colors for this Project - NOTHING TO ATTACH - Just Do it!

Assignment #2 - Simple Background Colors in HTML - NOTHING TO ATTACH - Just Do it!

Workshop - Review insert_graphic_web_page presentation and learn about Images in Web Pages …

OR

Workshop - Zip Files - What are they?


Day #5: Fan-Tastic Web Design ~

Digital Art and Design

Day #5: Fan-Tastic Web Design  ~ 

Daily Journal - What's Difficult - Begin class with this warm-up writing prompt.

Tutorial #1 - Ordered Lists - Attach by Due Date.

Tutorial #2 - Links - Attach by Due Date.

Assignment #1 - Choose your Colors for this Project - NOTHING TO ATTACH - Just Do it!

Assignment #2 - Simple Background colors in HTML - NOTHING TO ATTACH - Just Do it!

Continue modifying the content of your web site.

Workshop - Review insert_graphic_web_page presentation and learn about Images in Web Pages …

OR

Workshop - Zip Files - What are they?


Day #6: Fan-Tastic Web Design ~

Digital Art and Design

Day #6: Fan-Tastic Web Design   ~ 

Daily Journal - Horizontal Line Tag - Begin class with this warm-up writing prompt.

Tutorial #1 - Links - Attach by Due Date.

Tutorial #2 - Horizontal Nav Bar - Attach by Due Date.

Assignment #1 - Choose your Colors for this Project - NOTHING TO ATTACH - Just Do it!

Assignment #2 - Simple Background colors in HTML - NOTHING TO ATTACH - Just Do it!

Continue modifying the content of your web site.


Day #7: Fan-Tastic Web Design ~

Digital Art and Design

Day #7: Fan-Tastic Web Design   ~ 

Daily Journal - Name an HTML tag from Memory - Begin class with this warm-up writing prompt.

Tutorial #1 - Horizontal Nav Bar - Attach by Due Date.

Tutorial #2 - Background Colors and Images - Attach by Due Date.

Assignment #2 - Choose your Colors for this Project - NOTHING TO ATTACH - Just Do it!

Continue modifying the content of your web site.

Workshop - <h1><i><b>Backwards code</b></i></h1> in HTML …

OR

 • Workshop - Repeating Backgrounds


Day #8: Fan-Tastic Web Design ~

Digital Art and Design

Day #8: Fan-Tastic Web Design   ~ 

Daily Journal - Qualities of Fan Sites - Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - Contrast in Web Text - Begin class with this warm-up writing prompt.

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

Tutorial #2 - Move to Dreamweaver - Attach by Due Date.

Tutorial #3 - Begin setting up your Hosting site.

Continue fixing the code on your website in dreamweaver.

Review Computer Languages Presentation.

Continue customizing EACH Page of your website.  

 • Workshop - <h1><i><b>Backwards code</b></i></h1> in HTML …

OR

 • Workshop - Repeating Backgrounds


Day #9: Fan-Tastic Web Design ~

Digital Art and Design

Day #9: Fan-Tastic Web Design   ~ 

Daily Journal - How does it make you feel? Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - Head vs. Body Tags - Begin class with this warm-up writing prompt.

Tutorial #1 - Upload your site to the Server - Attach by Due Date.

Tutorial #2 - Begin setting up your Hosting site.

Tutorial #3 - Borders on Your Divs - Attach by Due Date.

Review Computer Languages

Continue customizing EACH Page of your website.  

Workshop - Contrast

OR

 • Workshop - Repeating Backgrounds


Day #10: Fan-Tastic Web Design ~

Digital Art and Design

Day #10: Fan-Tastic Web Design   ~ 

Daily Journal - What's the Point? Begin class with this warm-up writing prompt.

Tutorial #1 - Hyperlink Styling - Attach by Due Date.

Tutorial #2 - Borders on Your Divs - Attach by Due Date.

Continue customizing EACH Page of your website.  

 • Workshop - What's the difference between a locally hosted URL and a URL on the internet …

OR

 • Workshop - <h1><i><b>Backwards code</b></i></h1> in HTML …

 


Day #11: Fan-Tastic Web Design ~

Digital Art and Design

Day #11: Fan-Tastic Web Design  ~ 

Daily Journal - Contrast? Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - Find a Picture - Begin class with this warm-up writing prompt.

Tutorial #1 - Hyperlink Styling - Attach by Due Date.

Tutorial #2 - Text and Fonts - Attach by Due Date.

Tutorial #3 - Borders on Your Divs - Attach by Due Date.

Continue Customizing your Website.  

Review Presentation - Inserting Images and Absolute vs. Relative Links

Workshop - Adding to existing lines of code: <p style="font-size: xx-large; color:#990000; 'Trebuchet MS', Arial, Helvetica, sans-serif">Welcome to my Site.</p>

  - View our Sites


Day #12: Fan-Tastic Web Design ~

Digital Art and Design

Day #12: Fan-Tastic Web Design   ~ 

Daily Journal - View this website and comment … Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - Content for your Fan Site … Begin class with this warm-up writing prompt.

Tutorial #1 - div Padding - Rounded Corners - Attach by Due Date.

Tutorial #2 - Borders on Your Divs - Attach by Due Date.

Review Presentation - Inserting Images and Absolute vs. Relative Links.

Workshop - Padding - Why does Word have margins? What do you call that in HTML?


Day #13: Fan-Tastic Web Design ~

Digital Art and Design

Day #13: Fan-Tastic Web Design   ~ 

Daily Journal - Consistency. Begin class with this warm-up writing prompt.

Tutorial #1 - Insert and Float Images - Attach by Due Date.

Tutorial #2 - Borders on Your Divs - Attach by Due Date.

How to put an MP3 Player in your site - Xtra - Do only if you are done with everything else.

Review Presentation - Inserting Images and Absolute vs. Relative Links

Workshop - 90 % Width - Single Sided Tags like <br/> and <hr/>

OR

  •   workshop - Peer Edit Critiques.


Day #14: Fan-Tastic Web Design ~

Digital Art and Design

Day #14: Fan-Tastic Web Design  ~ 

Daily Journal - What’s the difference between CSS and HTML? Begin class with this warm-up writing prompt.

Tutorial #1 - Hyperlink Styling - Attach by Due Date.

Tutorial #2 - Absolute Links - Nothing to Attach. Just Do It Because the Rubric Requires it.

Tutorial #3 - Contact Page - Attach by Due Date.

Review Presentation - Inserting Images and Absolute vs. Relative Links

Workshop - CSS - Transfer your CSS code to an external document - Highlight your CSS code

OR

  •   workshop - Peer Edit Critiques.


Day #15: Fan-Tastic Web Design ~

Digital Art and Design

Day #15: Fan-Tastic Web Design   ~ 

Final Product due SOON!

Daily Journal - Find Another Site Like Yours … Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - Beginning Website … Begin class with this warm-up writing prompt.

Assignment #1 - Make Sure Your Relative Links are working!

How to put an MP3 Player in your site.

  •   workshop - Peer Edit Critiques.


Day #16: Fan-Tastic Web Design ~

Digital Art and Design

Day #16: Fan-Tastic Web Design   ~ 

Final Product due Tomorrow!

Daily Journal - Name 1 advantage of Dreamweaver - Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - CSS vs. HTML in Dreamweaver - Begin class with this warm-up writing prompt.

Tutorial #1 - Contact Page - Attach by Due Date.

Tutorial #2 - Image Padding - Attach by Due Date.

Workshop - CSS - Transfer your CSS code to an external document - Highlight your CSS code.


Day #17: Fan-Tastic Web Design ~

Digital Art and Design

Day #17: Fan-Tastic Web Design   ~ 

Final Product due Now!

Daily Journal - What's the Most Important Aspect of your Design? Begin class with this warm-up writing prompt.

Tutorial #1 - Favicon - Attach by Due Date.

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

Tutorial #3 - img Resize - Attach by Due Date.

Assignment #1 - Make Sure Your Relative Links are working!

How to put an MP3 Player in your site.

•   workshop - CSS - Transfer your CSS code to an external document - Link All Your Pages to that CSS document.

OR

  •   workshop - Peer Edit Critiques.


Day #18: Fan-Tastic Web Design ~

Digital Art and Design

Day #18: Fan-Tastic Web Design  ~ 

Final Product due Now!

Daily Journal - What's the Worst Part? Begin class with this warm-up writing prompt. ~ OR ~

Daily Journal - CSS - Begin class with this warm-up writing prompt.

Tutorial #1 - Contact Page - Attach by Due Date.

Tutorial #2 - img Resize - Attach by Due Date.

Tutorial #3 - 100 % Background - Attach by Due Date.

Finish Everything That was Due!

  •   PROJECT DUE NOW!