Logo

Home | Audio | DIY | Guitar | iPods | Music | Brain/Problem Solving | Links| Site Map

This work is licensed under a Creative Commons License.

Web Design Index

Current Lesson

Software Used: Fireworks, Dreamweaver, Bridge, various browsers, and iTunes .

Behavior: No Food, No Hats, No Cell Phones, and you many drink only pure water...no sugar, no color. Good manners always apply, and you need to come to class prepared to work with at least some paper, and something to write with. Respect property, use common sense, and do your work. We use the honor system in this lab. We always show respect for the property of others. If you find a USB stick, an iPod, or some other form of personal propert bring it to me and I will make sure it gets back to its owner. You are working around a lot of expensive equipment and must respect it. I don't even want to get into the consequences of damaging anything in the lab, because I cannot think of why anyone would want to.

Lectures: Anytime there is a lecture you will be asked to move to the center of the classroom. When you move to the center of the classroom you are not sitting by a computer. Hence, you are expected to move out of the computer "hot zone," and into the "lecture zone." There are no exceptions. You may not have any ear buds in while a lecture is taking place. You will be told in what direction to face.

Papers: When writing papers in this class we will use the 'block format.' The block format is where paragraphs are separated by a space. We use the block format since we will be converting our pages to Web pages. All of your sources should be cited using the MLA format except for page formatting and types of fonts used. You should also spell check and use good grammar.

This link will tell you how to write your papers.

Only at the mercy of the instructor will late work be accepted. Generally, late work will not be accepted unless you are excused from that day of class. If late work is accepted, then do not expect the instructor to work overtime to get a grade in for you. Your grade will be posted, but please do not expect expedient treatment in getting your late grade posted.

The Important Stuff

How to Write a Paper

Lessons

Dreamweaver Projects IBMYP and Web Design: some projects we will work through. Intern students will do these in a week as a review. Each project must be defined as a new site... Proj_l_Site is a nice site name. You must use proper naming conventions with all sites, folders, and files.
Mac OS X Keyboard Shortcuts Know and grow.

This link tells you what I would like with a few excep How to write your paper will tell you the format that I want...yes, single spacing. after Labor Day. Mac OS has some good links.

Entertaining Sites for Browsing
Try a majority of the links in the sites below:
Good Examples of Web Sites Spend some time looking at these to get some ideas.
Flash 3D Animation

OS and File Management
File Management and Naming Protocol
It is important that you learn proper file naming.
Mac OS X Keyboard Shortcuts

Want to Get Ahead?
Graphic Design Index page Start from the beginning and read all of the pages...we will cover this in due time.

Fireworks Begin Tutorials and do only the tutorials with * by them.
Mac OS Read some of the pages so that you can become the master of your computer.

Several non-computer activities will take place this week. We will begin the week by learning simple Truth Tables (TT.) You will need to understand conjunctions, disjunctions, and conditionals when you program. Only by learning TT's will you understand such. During the week you will have a quiz on base 2 material, and a TT quiz.

Truth Table Lesson and Problems PDF

Getting Started

Firefox Tutorial Answer questions.
Six Essential Firefox Extensions for Web Designers Install
File Management Answer questions.
Good Examples of Web Sites Spend some time looking at these to get some ideas.

FYI:
Mac OS X Keyboard Shortcuts
Naming Protocol
Learn Mac OS X

**********
Binary Review
Collect Site List
Get Ahead and visit all sites:
Good Examples of Web Sites Spend some time looking at these to get some ideas.
Flash 3D Animation
Mac OS X Keyboard Shortcuts

**********
File Management Objective: Use proper naming protocol. Create Folders on server, and locally. Save work locally until notified. Create Passwords. Read and answer questions at end of the lesson.
Fireworks Begin Tutorials. Objective: Make Backgrounds.
Mac OS Learn to use the OS. Go over.

**********
Fireworks Tutorials. Explore Filters.

Know 10 Hot Keys: cut, copy, paste, save, undo, redo, quit, select all, forward delete, zoom in, and zoom out. Mac OS X Keyboard Shortcuts Note: for Windows use the Ctrl key in place of the Command key.

Quiz on filenames, and grade folder.

You are to write a one page paper on: How the Internet Came to Be This article will provide you with all of the information that you need. How to write your paper will tell you the format that I want...yes, single spacing.

**********

For grading you need to open the Finder, use the Column view and go to where your FW images are. You also need to have the first three buttons open in FW, and stacked so that I can see all of them at once. Arrange your desktop so that I can see both Finder and FW images.

Friday: Grade: file structure (10), filenames (10), and 3 buttons. 50 points.

10 Hot Keys: (Note: for Windows use the Ctrl key in place of the Command key.) cut (cmd x), copy (cmd c), paste (cmd v), save (cmd- s), undo (cmd- x), redo (cmd z), quit (cmd q), select all (cmd a), forward delete (fn-delete), zoom in (cmd + or cmd- =), and zoom out (cmd -). Mac OS X Keyboard Shortcuts

Paper: How the Internet Came to Be The paper only needs to be 250 words in length...about 1 1/2 pages. Below is how I want you to format and present your paper:

  1. Title Page
    1. Title <18 point, bold, centered...any type of font.)
    2. Name <14 point, centered>
    3. Period <14 point, centered>
    4. Date <14 point, centered>
  2. Content
    1. 12 point, Times New Roman, 1" margins, double spaced
    2. Spell Check

Paper Due

Fireworks Continue tutorials.

This paper will be due the Friday after Memorial Day. Any diagrams must be drawn on a seperate piece of paper.

Week of...

Obj: DW, Hotkey review, Prototype...should be finishing up, and paper is due.

Mac OS You must perform the task in the Finder page.

Dreamweaver Goals for the Novice:

  1. Preferences
  2. Define Site
  3. Create Folders: Images, etc.
  4. Links, images, formatting with tables, etc.
  5. Preview in browser

Begin working on DW Projects. You need to pace yourself so that you finish a project a day.

This week you will only work on the Dream Weaver Projects. You will not be doing anything with Fireworks, that being said you should begin applying your new knowledge of color and color schemes to your pages. All of the tools that you will learn this week will be fair game when it comes to grading. This includes, but is not limited to: Apply Source Formatting, Clean-up XHTML, headings, anchors, search and replace, spell check, etc. You will come to a Linear Gradient Project, and though you have done one already you are required to do it again...mix things up this time!

DW Big Project I:

Linear Gradient Site

Week...

Next site to build: Linear gradient background
For this project you need to:

  1. Create a new folder within your "Sites" folder called Linear_Grad_Site and create an images folder within it
  2. Move all of the FW projects to be used in this project to the above images folder
  3. Define new site...call it Linear_Grad_Site
  4. The homepage will have a linear gradient background and will link to three external sites: co-bw.com, apple.com, bing.com and it will link to the page that contains your FW images. Note: to link to external site you must use the entire URL...http://www.co-bw.com
  5. The second page will contain a layout table--2 rows and 3 cols. Each cell will contain a FW image and the background of the cell will be color coordinated with the image contained within it. This page must link back to your home page.
  6. Modify the page properties for both pages. Do not use any default values for Appearance or Links.
  7. Commands -> Apply Source Formatting to both pages, Titles, etc.

FYI:
Mac OS X Keyboard Shortcuts
Naming Protocol
Learn Mac OS X

**********

Learn Mac OS Do the Finder page.
File Naming Strategies for DW

**********

Things have been crazy lately, but things should normalize by the end of the week. For this week you need to complete the Linear Gradient site, and link to the buttons listed below. You also need to start reading about the fundamentals of Graphic Design. I will lecture on this October 7, but I want you to read the material prior to the lecture. You also will need to submit a paper on the material the day of the lecture.

Here are the 3 things you are to do this week:

  1. Complete all of the buttons below
  2. Complete the Linear Gradient site
  3. Write a short paper on graphic design
1) The Buttons: Once your computer is on the network then you are to create a new site, use a Linear Gradient Background, and link to the pages you build that contain the buttons: AppleAqua Button, The Ultimate Aqua Button, Creating Roll Over Buttons, and Professional Navigation Bar, About Button and Navigation. Use the links below to guide you. NOTE: Do not worry about the Roll Over Buttons...they will not work as we currently import them. This will be graded ...

2) Create Linear Gradient Site:

How to create a site

  1. Preferences
  2. Define Site...call it FW_Bttns
  3. Create Folders: Images
  4. Move FW Buttons into new folders
  5. Create a Home page and link to 3 of your FW buttons.
  6. Each button must be created on a "new" page as and image. Center it, and link each page back to home.
  7. All images must be in the Images folder

Important Links:

3) Graphic Design

You are to read the 4 graphic design concepts below, and write a summary of each subject. You may do this in class on Thursday and Friday. The paper will be due Wednesday, 8Oct09, when we review the subjects as a class.

Graphic design basics
Clarity in web page design
Colour
Contrast
Readabilty

Know 18 Hot Keys: cut (cmd x), copy (cmd c), paste (cmd v), save (cmd s), undo (cmd z), redo(cmd y), quit(cmd q), select all (cmd a), forward delete (fn-delete), zoom in(cmd + or cmd =), and zoom out(cmd -). screen shot (cmd-shft-3), crop screen shot (cmd-shft-4), show desktop (fn-f11), show open apps(f4), group (cmd g), ungroup (shft-cmd-g) find (cmd f). Mac OS X Keyboard Shortcuts Five of the hot keys must address DW text editing: bold, center, italic, H1, and check spelling.

**********

...Graphic Design and paper due

... Review Define site, pull pages and images from server, and building a site with the pulled pages.

... Quiz

...Grade Linear Gradient and 5 btns

**********

Begin Dreamweaver: create site (site name folder, images subfolder)

The first thing is to know what you are doing. We are about to begin building your Web site. Here is what is expected: My Music Store
You will turn in your completed Web Site Specification Form.
You are responsible for all of the readings on the Graphic Design Index page. You will turn in a one page summary of the readings...be brief.

Here are a couple of pages to help you get started:
Copyright Law and Logos some a short page on some general information.
Rules to Code By is an extensive page with a lot of links to external sites. There is a lot of information here.

Web Site I: Define site and display your FW buttons.
Web Site II: Define site and display your FW text in a table.
Web Site III: Define site and display your FW Special Effects in a Frameset.

...Graphic Design paper is due.
This week grade Frameset site and the Special Effects.

Read Page Layout. A one page paper is due Monday, March 9, 2009.
Wednesday, discuss Graphic Design Basics and start personal Web site.

**********

Personal Web site: Define your site as: Personal_Web. Create a 4-5 page web site that will include a home page. The page can be on anything that you want. If you are stumped for an idea, then just have it be on you...your favorite subject! The homepage will be a nice fancy page and the remaining pages can be of any format. All pages must link to each other, and you must have an images folder within your site and you must store all of your images there. Your homepage layout should use a layout table and linear gradient that you can create with FW.

Quiz I

Ethics
Web Design
Web Design II

 

**********

Review Frameset and Template Assignment: must load 10 FW projects on seperate page, apply template, and load via Frameset. Due 13Nov09
Web Site Specification due Due 13Nov09
Web Site Rubric

... Grade Div site, Div page, and 5 text

Important Dates:

... Review Frameset/Template, Web Site Specification

... Begin designing a logo for your music store
... Grade Frameset/Template and 10 FW special effects, pictures

**********

... Begin Template site.
...Grade Template site, and 5 PS projects.

**********

...Quiz: define site, resize image with a border, page properties, change link properties, indent, etc.
Begin Music Store: 2 Storyboards, and Site Specification Form Due ...

... Colors for table and how embed a color wheel into site to create color scheme or use Kuler
Begin Music Store: 2 Storyboards, and Site Specification Form

... Quiz: Build me a table with a colored border, cell formatting, embeddd images, table width, etc. 50 points

... Storyboard of Project Web homepage and content pages. Two different storyboards.
Site Specification Form must be filled out.

Summarize Color: A summary is due...
Color Theory & the Color Wheel
Communicating With Color
Color: Creating a Palette
Stop Summary

Save the images of the color wheels below to the images folder of your site and use them to create your own color scheme using the techniques above.
Real Color Wheel
Web Safe Colors by Value Order
Web Safe Colors by Hue Order
Color Wheels and Gray Scales

Go to Kuler to use an existing color scheme.

Monitor Calibration: If your monitor is not calibrated then what you are seeing may not be true/real colors. Calibrate Your Monitor and The Lagom LCD monitor test pages

Create Frameset Site

Write a summary for each of the pages below (Due 1Mar10):
The Golden Rule of Website Building
The Principles of Beautiful Web Design
10 Tips on designing a fast loading web site


DW Big Project II

Begin working on The Music Store project.

Monday: Begin working on Personal Project Site. You should begin by doing the below list:

  1. Define site
  2. Create images folder
  3. Complete Logo/Banner
  4. Begin homepage, buttons, menus, etc.

Tuesday, Wednesday: Sprys
Th: Review Table layouts and creating a color scheme using Kuler or creating own.
Fr: Clean XHTML, Source formatting, optimize images, Spell Check, anchors, View -> Toolbars

**********

Quiz: define site, resize image with a border, page properties, change link properties, indent, etc. 55 points


Quiz: Build me a table with a colored border, cell formatting, embeddd images, table width, etc. 50 points
Introduce Music Store

Graphic Design

You are to read about the graphic design concepts below, and write a summary of each subject. Each summary should be 1 paragraph in length. The summary should begin with the title of the paper (just copy/paste from below) and bold face it. See example below. So, you will have to read 4 pages and write 4 summaries...put them on the same page. See the example below on how to write the summaries. Due: Monday, 4Oct10

Example Summary

Graphic design basics
Clarity in web page design
Colour
Contrast
Readability


**********

Create a site:

  1. Preferences
  2. Define Site...call it FW_Bttns
  3. Create Folders: Images
  4. Move FW Buttons into new folders
  5. Create a Home page and link to 3 of your FW buttons.
  6. Each button must be created on a "new" page as and image. Center it, and link each page back to home.
  7. All images must be in the Images folder

Continue with FW tutorials once you create your site. Everytime you finish a button you should import it into a web page via DW.

Review: 10 Hot Keys: cut (cmd x), copy (cmd c), paste (cmd v), save (cmd- s), undo (cmd- x), redo (cmd z), quit (cmd q), select all (cmd a), forward delete (fn-delete), zoom in (cmd + or cmd- =), and zoom out (cmd -). Mac OS X Keyboard Shortcuts

Graphic Design...again

You are to read the 7 graphic design concepts below, and write a summary of each subject. Each summary should be 1 paragraph in length. The summary should begin with the title of the paper (just copy/paste from below) and bold face it. See example below. So, you will have to read 4 pages and write 4 summaries...put them on the same page. See the example below on how to write the summaries.

Due: ...

Graphic design basics
Clarity in web page design
Colour
Contrast
Readability

You can work on your summaries Friday during class, but realize that the Linear Gradient site with the next 6 Fireworks assignments will be graded the first day of class after Presidents day...16Feb10 or 17Feb10.


How a Summary Should Look

Graphic Design Summaries
Cosmic Cowboy
Period 3.14
18Feb2525

Improve Your Mixes With This Critical Listening Exercise
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Colour
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

End Summary Example

Interested in what the above translation means?
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."

 




 

********** END LESSON *********** ********* END LESSON ********** ********** END LESSON **********


 

Home | Audio | DIY | Guitar | iPods | Music | Links | Site Map | Contact

Top

Creative Commons License