Fan-Tastic - Build your own Fan Site in Dreamweaver ~
Pick a musician, hobby, athlete, classic car, church group, sport, or other school appropriate subject and make a website about it using NotePad or TextEdit.
• It's easy to make web sites - there are many options available: Goggle, Wix, WordPress.
• Why should I bother coding a web page in Dreamweaver when I could get a free site up in 20 minutes using these relatively simple solutions? Good question …
• Coding ... that's why. Coders think better. They're detailed, deductive, critical, yet creative, expansive and risk taking, like artists... all the adjectives American High Schoolers want applied to themselves.
• This course is intended to give the average person a basis to understand what's going on behind the scenes of web pages and provides a basic coding foundation to start.
Requirements:
• Pick a musician, hobby, athlete, classic car, church group, sport, or other school appropriate subject and make a website about it.
• Research the subject of your website and map your site's buttons, content and navigation.
• Then turn your site-map into a real website on the computer using HTML, Illustrator, and TextEdit or NotePad.
• All content you use to describe the particular issues associated with your subject must be 90% your own, modified into an original composition, including all text and imagery.
• Your site must have a banner, 3 or more main links, text and images.
• Banner, links, text and images must reflect the nature of the subject in a positive manner and must be school appropriate.
The Project Happens in 3 Parts:
Part #1: Site Map ~
• Create a site map of your links, headlines and 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 ~
• Your index page design will become the template for at least 3 other linked pages, according to the rubric.
Last Part: The Final Product ~
3) At least 4 different pages linked together, organizational hierarchy of the web site, verbal presentation skills, technological proficiency, attention to detail, QUALITY!
• All of your work must be an original creation.
• If you trace copied images from the internet they must be modified by at least 90%, meaning that the color, size and name should be changed to be unrecognizable from the original content.
• Present your work to the class!
Other People's Work:
These are examples created by students following this project.
| Early Examples | 1/2 Way Done | Final Examples |
|
Example 12 |
||
Research Resources ~
Web Style Guide: Forward, Preface and Chapter 1: Pages 1-24 Foreword, Preface, Acknowledgements, 1 Process, The site development team, Sidebar: Web teams, Initial planning, A list of reminders, Types of web sites and documents | Why Learn to Code?
New Project "Fan-Tastic Web Design" Begins Today
What Makes a good Web Page PowerPoint - View this introductory PowerPoint with the class …
Split into groups, get on the computer & look for web pages with examples of Visual Hierarchy. Be prepared to explain to the class what tactics the designer used to create Visual Hierarchy in their Web Pages.
Begin the First Tutorial …
Day #2: Fan-Tastic Web Design ~
Your First Journal Today! You have only 10 minutes to complete this task.
Finish Tutorial #1 from Yesterday - Attach by the End of Class.
Begin the Site Map Tutorial - Map the Layout of your website in Word or PowerPoint.
• Workshop - Review the Introduction to HTML Powerpoint.
Day #3: Fan-Tastic Web Design ~
Begin class by viewing the Introduction to HTML Powerpoint.
Daily Journal - HTML Tags Journal - You have only 10 minutes to complete this task.
Tutorial #1 - Index Page - Attach by the End of Class.
Tutorial #2 - Banner in Photoshop - Begin this tutorial - you may not get it done today.
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 ~
Daily Journal - Fan Sites - You have only 10 minutes to complete this task.
Tutorial #1 - Special Characters - Attach by the End of Class.
Tutorial #2 - Ordered Lists - Attach by the End of Class.
Tutorial #3 - Finish your Banner in Photoshop - Attach by the End of Class.
• Workshop - Review insert_graphic_web_page.ppt and learn about Images in Web Pages …
Day #5: Fan-Tastic Web Design ~
Daily Journal - What's Difficult - You have only 10 minutes to complete this task.
Tutorial #1 - Illustrator - Attach by the End of Class.
Tutorial #2 - Links - Attach by the End of Class.
Continue modifying the content of your web site.
• Workshop - Zip Files - What are they?
Day #6: Fan-Tastic Web Design ~
Daily Journal - Horizontal Line Tag - You have only 10 minutes to complete this task.
Tutorial #1 - Horizontal Nav Bar - Attach by the End of Class.
Continue modifying the content of your web site.
Day #7: Fan-Tastic Web Design ~
Daily Journal - Name an HTML tag from Memory - You have only 10 minutes to complete this task.
Tutorial #1 - Background Colors and Images - Attach by the End of Class.
Continue modifying the content of your web site.
• Workshop - <h1><i><b>Backwards code</b></i></h1> in HTML …
Day #8: Fan-Tastic Web Design ~
Daily Journal - Qualities of Fan Sites - You have only 10 minutes to complete this task.
Tutorial #1 - Semi-Transparent Backgrounds for your div - Attach by the End of Class..
Tutorial #2 - Move to Dreamweaver - Attach by the End of Class.
Tutorial #3 - Begin setting up your Hosting site.
Continue fixing the code on your website in dreamweaver.
Review Computer Languages PowerPoint.
Continue customizing EACH Page of your website.
• Workshop - <h1><i><b>Backwards code</b></i></h1> in HTML …
Day #9: Fan-Tastic Web Design ~
Daily Journal - How does it make you feel? You have only 10 minutes to complete this task.
Tutorial #1 - Upload your site to the Server - Attach by the End of Class.
Tutorial #2 - Begin setting up your Hosting site.
Review Computer Languages
Continue customizing EACH Page of your website.
• Workshop - Contrast …
Day #10: Fan-Tastic Web Design ~
Daily Journal - What's the Point? You have only 10 minutes to complete this task.
Tutorial #1 - Hyperlink Styling - Attach by the End of Class.
Continue customizing EACH Page of your website.
• Workshop - What's the difference between a locally hosted URL and a URL on the internet …
Day #11: Fan-Tastic Web Design ~
Daily Journal - Contrast? You have only 10 minutes to complete this task.
OR
Daily Journal - Find a Picture - You have only 10 minutes to complete this task.
Tutorial #1 - Text and Fonts - Attach by the End of Class.
Continue Customizing your Website.
Review PowerPoint - 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 ~
Daily Journal - View this website and comment … You have only 10 minutes to complete this task.
Tutorial #1 - div Padding - Rounded Corners - Attach by the End of Class.
Review PowerPoint - 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 ~
Daily Journal - Consistency. You have only 10 minutes to complete this task.
Tutorial #1 - Insert and Float Images - Attach by the End of Class.
How to put an MP3 Player in your site - Xtra - Do only if you are done with everything else.
Review PowerPoint - Inserting Images and Absolute vs. Relative Links
• Workshop - 90 % Width -
Day #14: Fan-Tastic Web Design ~
Daily Journal - What’s the difference between CSS and HTML? You have only 10 minutes to complete this task.
Tutorial #1 - Absolute Links - Attach by the End of Class.
Tutorial #2 - 100 % Background - Attach by the End of Class.
Review PowerPoint -Inserting Images and Absolute vs. Relative Links
• Workshop - CSS - What is it?
Day #15: Fan-Tastic Web Design ~
Daily Journal - Find Another Site Like Yours … You have only 10 minutes to complete this task.
Tutorial #1 - Container Div - Attach by the End of Class.
Tutorial #2 - Finish 100 % Background - Attach by the End of Class.
How to put an MP3 Player in your site.
• Workshop - The purpose of container divs is so the content of the browser flexes to fit the size of the screen the page is being viewed upon.
Day #16: Fan-Tastic Web Design ~
Daily Journal - Name 1 advantage of Dreamweaver - You have only 10 minutes to complete this task.
Tutorial #1 - Header div - Attach by the End of Class.
Day #17: Fan-Tastic Web Design ~
Daily Journal - What's the Most Important Aspect of your Design? You have only 10 minutes to complete this task.
Tutorial #1 - Navigation - Attach by the End of Class.
Tutorial #2 - first-letter - Attach by the End of Class.
How to put an MP3 Player in your site.
• Workshop - The purpose of container divs is so the content of the browser flexes to fit the size of the screen the page is being viewed upon.
Day #18: Fan-Tastic Web Design ~
Daily Journal - What's the Worst Part? You have only 10 minutes to complete this task.
Tutorial #1 - Contact Page - Attach by the End of Class.
Tutorial #2 - Finish Everything That was Due!
• PROJECT DUE TOMORROW!
