Web Site Design

Assignments Page

Mr. Clarke Green, Instructor

 

 

Week of Aug 14

Monday - Wednesday

Thursday:

- Log on to Network

- Find “Messages From Staff” page

- Do students have Dreamweaver folder and PSP or Jasc Software

- Do students have student projects drive.

- Student Handbook pages

 

Question:  What are your expectations when you go to a website?

 

Homework:

Read the Course Syllabus on the web site .

Go to the assignment page (at home) and print off the first page only.

 

Friday:

- Collect Homework

- Q & A

Lesson – How to save files from home and get them here and on the network drives

Assignment - Find 3 sites:

- 3 of the most hideous / worst designed– 2 or 3 sentences

- Have file saved in your network directory, on a disk or thumb drive before class tomorrow.  File must have the URL (LINK) and 2-3 sentence explanation of why you chose it.

- Save as: .rtf  “Rich Text Format”

- Print it off before class so you can also hand in a printout.

 

 

 

Week of Aug 18

Monday:

Mr. Green gone.

 

In class:  Be sure that your homework from the weekend is saved on the network before the end of class.  (If you forgot to do it on the weekend, you have dodged a bullet here because you can get it done in class.)

 

AFTER YOU HAVE YOUR HOMEWORK SAVED ON THE NETWORK:

You have a choice here.  You may either (quietly) do homework for another class provided you don’t have to go to your locker to get it 

 

OR 

 

You may launch Paint Shop Pro (the icon is on the desktop) and experiment….this is called discovery learning.

 

YOU MAY NOT:

-       Surf the web.

-       Play online games, videos or any other online entertainment.

-       Cause the sub any stress!!!

 

Informational Note

If you missed points on the Syllabus quiz….

you may recover those ponts by bringing in a box of Kleenex. 

So…..the Kleenex is worth 1-5 points,

depending on how poorly you did on the quiz.

Deadline for this is Friday.

 

 

Tuesday:

- Access to “Studentprojects on Xweb” folder

- Collect homework

- Share student websites (from the homework) …

- Discuss what makes for good design vs bad design

 

Wednesday:

- Vocab Pre-test

- Return “Good Bad and Ugly”

- Progress Reports

- Course Overview  and examples of prior work

- What are web sites/pages?

- What do you expect when you go to a web site (content, design, navigation, etc).

- What are different purposes of web sites?

 

In class assignment…..start the assignment below.

 

Thursday:

Assignment in class:

-       Create 2 word processing documents. One full page each.

 

Use Tables on One

Use Columns on One

Pictures (laid out in different places)

Clip art

Text – play with fonts, size and color

Experiment with layout

Play with color

On this one....play with backgrounds to the table, cells and/or to the page

Pictures(laid out in different places)

Clip art

Text – play with fonts, size and color

Experiment with layout

Play with color

 

 

 

The two documents can be the same except for the column

and table (layouts)...the content should be fundamentally the same.

 

DO NOT SUPPLY YOUR REAL EMAIL ADDRESS --- EVER.

DO NOT SUPPLY YOUR LAST NAME --- EVER

 

 

Friday:

- Appropriate Content and the “Grandma Rule”

- Use student files as basis for lesson

- Create a student list of what does/does not work on the web

- What about borders on pics????

 

 

Refer to this info about things that work or not      

 

Homework: Collect info / pics for 1st web page

 

 

Week of 8/25

Monday:

- htm...what is it (.html)

 

ASSIGNMENT:

- Make an About Me or ‘Topic of Choice’ file in your word processor.  Should be 1 to 3 screen lengths long. 

- Include appropriate information as you see fit. 

- Avoid Paragraph formats and long winded prose (people won’t read it). 

- f you do the page about yourself…DO NOT SUPPLY YOUR LAST NAME --- NOT EVER

- Use formatting tips from prior lesson.

- Make sure the page has a title at the top.

- HINTS:  Use tables to lay it out.  Experiment with background colors for the page and cells on the table.  Refer to the link above for what does and does not work.

- While doing your work, be sure that you are in View / Web Layout

- Preview in web Browser often: File / Web Page Preview

- Save Often

- Tables can be centered (and should be)

- Bring a picture from home for scanning (optional). 

- Refine with photos, background, link(s), text formatting, etc

- Leave room for 2 text links that I will teach you how to make.  One of these will link to a web site.  The other will be a mail link....to send mail to your bogus email a/c. DO NOT SUPPLY YOUR REAL EMAIL ADDRESS --- EVER.

- One of the pics will be a link to another site.  So be sure to put a caption below the pic that says something like ......”Click on the picture of Shakespeare to go to my favorite Shakespeare site. “

- NO blind links

- Bad idea.....text wrap around tables and/or  pictures is always a very bad idea.

- Good idea....limit tables to 3 columns.

- Note:  All the words have to be your own.  No cut and paste except for pictures.

- If you are using pics from other web sites, save them to your own directory and then insert them.

- I will show you how to make the links later..

Tuesday:

Work on assignment from yesterday

Wednesday:

- Do I have your initials right – are there duplicates?

- Intro to file naming and file mngmnt

 

- Work on assignment from yesterday…should be finished at end of class.

 

.

Thursday:

·         15 minutes to complete web page

·         Create links

·         Save to proper folder

·         Check links.& .look at web pages

 

Homework:

·         Look at your web page from home.

·         Typed list of reasons supporting your grade for this project:

·         Consider: Following directions, appearance, layout, links work, WHAT YOU LEARNED.  Effort

·         Short, lazy lists = short, lazy grades. 

·         Be specific.  Be convincing. 

·         30 points possible

Due Tomorrow at the beginning of class….If late, the max possible is 20 points

Friday:

·         Save web page to proper folder

·         Check links.& .look at web pages

·         Possibly a little repair is in order.

 

Homework:

·         Look at your web page from home.

·         Type a list of reasons supporting your grade for this project: Handwritten or paragraphs will NOT be accepted.

·         Consider: Following directions, appearance, layout, links work, WHAT YOU LEARNED.  Effort

·         Short, lazy lists = short, lazy grades. 

·         Be specific.  Be convincing. 

·         30 points possible

·         Due next class period at the beginning of class….If late, the max possible is 20 points

 

Week of  9/1

Monday:

No school.  Boo hoo!

Tuesday:

-   Collect Homework

-   pdf files.  What are they and let’s create some.

 

 

File Naming

All of our filenames will start with our initials.  This includes the names of pictures we use on our pages.  My initials are CWG.  When I use ‘cwg’ in an example, you should substitute your initials for ‘cwg’

Filename for this assignment:

cwg_wordfile

Sample filenames for pictures:

cwg_honda.gif

cwg_ mon_and_dad.jpg

cwg_harley.jpg

No capital letters in filenames - NEVER

No spaces in filenames – NEVER

 

 

A Warning about content

ANY inappropriate or offensive language or content in a website or webpage that you create will result in ‘0’ points.

ANY inappropriate or offensive language or content in a website or webpage that you link to will result in a loss of all possible points.

Use the ‘Grandma Rule’ to determine if content or language is offensive

 

 

So……What is HTML?  LET THE FUN BEGIN!

Minimum HTML tags:

<html>

<head>

<title>          </title>

</head>

<body>

</body>

</html>

·         Using Notepad to write code and saving as .htm

Preview in Browser

Wednesday:

Hand back self evals for Word web page.

Progress Reports

 

Note – tomorrow is the last day to hand in the self eval  for the page you made using MS Word.

- - - - - - - - - - - - -

 More fun like yesterday !!

 

Good Idea

VERY Bad Idea

Code

Check

Code

Check

Code

Check

Code

Check

 

 

Code

Code

Code

Code

Code

Code

Code

Finally Check

Tears and Confusion

 

Lesson:

Basic tags...see above

Notepad

Paragraph:  <p> breaks and skips line

Line break:    <br> breaks line

Bold :   <b>    </b>

Italics:    <i>      </i>

Headings <h1>  </h1>   through  <h6>    </h6>  skips line, makes bold, changes

                 font size

Thursday:

Today is the last day to hand in the self eval for the MSWord web page (it was due Tuesday).

 

Anatomy of a link:

This is the text in front of the link <a href=”http://www.wrhs.net”> Clickable area. </a>  This is the text after the link.

 

Body tag attributes;

-  Background color (bgcolor): bgcolor=yellow OR bgcolor=125de8  - sets the

    background color of the web page

-  Background image (background) -----not doing now

-  Text: text=brown OR text=65ad5e    -  sets the default color of all text

-  link :  link=green OR link=de34a9     -  sets the default color of all links

-  vlink: vlink=red OR vlink=65a5f9e  -  sets the default color of visited links

-  alink: alink=red OR alink=65a5f9e  -  sets the default color of active links

 

All the body tag attributes go in the (ONE AND ONLY) body tag:

<body bgcolor=yellow  text=brown link=green vlink=red vlink=65a5f9e>

 

Friday:

 

Review:

Anatomy of a link:

This is the text in front of the link <a href=”http://www.wrhs.net”> Clickable area. </a>  This is the text after the link.

 

New:

Anatomy of a mail link:

This is the text in front of the link <a href=”mailto:myname@cox.net”> Clickable area. </a> This is the text after the link

 

Hex (hexadecimal) color codes:

·         Google hex color chart

·         http://www.december.com/html/spec/colorhex.html

 

 

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

 

 

Week of  9/8

Monday:

 

 

Insert an Image ...... and just for fun...add a border to the image:

<img src=”filename.jpg” border=#>

 

Link to a pic:

Click <a href= “filename.jpg” > HERE </a>  to see the pic.

 

Open a file from the same directory (hello “File Management”)

Click <a href=dog.doc> HERE </a>  to open the dog file.

 

Image borders ....”o” and other numbers.

 

Link to a pic

 

Global nature of <body> tag

 

Tuesday:

Wednesday:

Thursday:

Friday:

 

 

 

Week of 

Monday:

Tuesday:

Wednesday:

Thursday:

Friday: