Web Page Design

Week of 5/11/15
Dreamweaver Unit H – Tables

Jing 1 here – setting up the framework for a table
Jing 2 here – column widths, merge cells, and split cells
Jing 3 here – adding a picture and some text
Jing 4 here – attaching style sheet and inserting a horizontal rule
Jing 5 here – Formatting cells and editing styles

Week of 5/04/15
Dreamweaver Unit G – more CSS
Jing 1 here – Using a template
Jing 2 here – copying and pasting the index elements into the preset template
Jing 3 here – editing the internal style sheet
Jing 4 here – editing some more of the internal style sheet
Jing 5 here – adding an AP (absolutely positioned) Div tag
Jing 6 here – modifying an AP div
Jing 7 here – more modifying

After you listen to each of these Jings and perform the actions along the way on your own version of Striped Umbrella, find the G packet to perform the exercises for Blooms, Rapids, TripSmart, and Carolyne’s. Help each other quietly. Mrs. Kimbro has the list of the students who will need to come back next week and take the final exam in my classroom on either Monday or Tuesday.

Week of 4/27/15
Unit F – Anchors and Spry Menu Bar
Jing 1 here – get the Activities file ready to use
Jing 2 here – Links (external and internal)
Jing 3 here – anchors
Jing 4 here – link to anchors
Jing 5 here – adding a Spry Menu Bar
Jing 6 here – adding items to the menu bar
Jing 7 here – formatting the menu bar
Jing 8 here – copying the menu bar to other files
Video from youtube here – setting up an Image Map

Once you have completed all of the Jings, do all of the assignments in Packet F.
Blooms & Bulbs
Rapids Transit
TripSmart
Carolyne’s

Week of 4/20/15
Finish all Unit D and Unit E assignments. Make sure that I look at them so that I can record them in the gradebook.

Work on your personal project.

  • Add an image map on one of your pages
  • Add a banner image to EVERY page in your project
  • Build an external style sheet for Body Text and at least two other items
  • Attach css to every page in your project
  • Add content to at least one more page in your project

QUIZ on Thursday and Friday of this week.

Dreamweaver Illustrated Images – Unit E
Part 1: Inserting an Image and changing the Alternate Text, HSpace, VSpace, Alignment, and Border, listen here.
Part 2: Follow along with the handout provided.
Assignments:
Blooms & Bulbs
Rapids Transit
Trip Smart
Carolyne’s Creations

Personal Project:
Once you have completed Assignments for Units D & E, you should work on your own personal project, following the instructions that are on the handout.

Dreamweaver Style Sheets – Unit D
Part 1 – Import data, set HTML Heading property, listen here
Part 2 – HTML Heading property 4, unordered list from existing material, listen here
Part 3 – Creating a new CSS style, listen here
Part 4 – Applying and editing the CSS style, listen here
Part 5 – Attaching CSS file and running spell , listen here

Make the changes to The Striped Umbrella as you go through the videos. I want to see it to give you a completion grade.

Assignments:
Blooms & Bulbs
Rapids Transit
Trip Smart
Carolyne’s Creations

Update your own personal web site by adding a CSS style sheet. On one of your new pages, make sure you have a bulleted list of some sort. Customize your headings (those within the body tag) and at least two other items on your page. For each of the pages that you have remaining, create a title on the page and attach your CSS style sheet to it.

NO QUIZ over this chapter right now. We will have a quiz over over this chapter and the next one at the end of the next unit.

HTML – Style Sheets
Open your MWS.css file and your Astro.htm file. You will be using both of these files in the following Jings.
Pause as you are going through each one so that you can perform the steps that are indicated.
Let me know if you have any problems getting something to work. 

When you are done with each of these, you will be ready to work on the packet of assignments.

Style Sheet 1 – Introduction to Style Sheets
Style Sheet 2 – Set up an external css file to to each file.
Style Sheet 3 – tag, font-size,tag,
Style Sheet 4 – text-indent, text-transform, font-variant, font-style, text-align
Style Sheet 5 – background-color

Jing 1 – UL.B and A:link and A:visited

Jing 2 – Set A:Hover and P:first-line and P:first-letter

Jing 3 – Set LI.special by setting a special class in the .htm file

Jing 4 – Set DIV tags in the htm file and change the DIV tag in the css file, change margins

Jing 5 – DIV tag, change background color and border

Jing 6 – DIV tag, change width and float

Monday 3/2/15 and Wednesday 3/4/15
Snow Day #3 on 3/3/15

Create a web site of your own (figure out what you want your theme to be)
In Dreamweaver, set up a new Site (with a new Folder and a new Assets Folder underneath it)
Create an index page plus at least FIVE other pages (FILES) that will become clickable links on each page.
Do NOT worry a lot right now about colors, fonts, etc. We will get to that at a later time.
Add a title, some keywords, and a description to your index page.

Begin to add some text to your supporting pages. Add your banner and clickable menu in there as well.

Unit B & C- Creating Web Sites in Dreamweaver
Wednesday 02/06/2013
How to set up a Web site by creating folders – listen here
How to set up new pages by creating files and updating image links – listen here
Creating Head content – listen here
Setting Properties for Text on a web page – listen here and here
Keep the Date Current – listen here and here

Now update your Striped Umbrella page, if you have not already done so.
Assignment Packet:
Blooms
Rapids
TripSmart
Carolynes
Your Own

Unit A – Tour of Dreamweaver

Part 1 of the tour – listen here
Part 2 of the tour – listen here

Dreamweaver Units ABC
Take a tour around Dreamweaver
Set up the basic FRAMEWORK for a web site
Develop the actual web page
-Plan the layout
-Create the head content, listen here
-Set the Web Page properties, listen here
-Create and format text, listen here
-Add links to the page, listen here
-Automatically change the DATE when page is updated, listen here

The example we will use throughout Dreamweaver is The Striped Umbrella.
Show me your changes to this file before you begin the following assignments.

ASSIGNMENTS:
-Blooms and Bulbs, page 66-67
-Rapids Transit, page 68
-Trip Smart, page 69
-Carolyne’s, page 72
-Real Life Independent Challenge, page 45 (Get the Index page set up for your own web page, must contain at least five pages)

All assignments DUE by Thursday 2/19/15.
Quiz on Friday 2/20/15.

2/12/15
Tutorial 7 = Style Sheets
1/28/15
Go to the Internet and find the poem called Snow Day by Billy Collins.
Copy and paste it into a notepad file and set it up like the example that you will hear me refer to on the first video below. Save it as an htm file in your Tutorial 3 subdirectory. The picture files you will need are already there.
Find the links farther down on this page that show these and click on those links to work your way through this information.
Colors1
Colors2
Fonts
Image
Image Maps1
Image Maps2

Tuesday 1/27/15
HTML Colors click here
Unit H – Tables
Jing 1 here – setting up the framework for a table
Jing 2 here – column widths, merge cells, and split cells
Jing 3 here – adding a picture and some text
Jing 4 here – attaching style sheet and inserting a horizontal rule
Jing 5 here – Formatting cells and editing styles

Unit G – More CSS
Video from youtube here – setting up an Image Map
Do Blooms & Bulbs and Carolyne’s image map portions of the assignment.

Jing 1 here – Using a template
Jing 2 here – copying and pasting the index elements into the preset template
Jing 3 here – editing the internal style sheet
Jing 4 here – editing some more of the internal style sheet
Jing 5 here – adding an AP (absolutely positioned) Div tag
Jing 6 here – modifying an AP div
Jing 7 here – more modifying

Unit F – Anchors and Spry Menu Bar
Jing 1 here – get the Activities file ready to use
Jing 2 here – Links (external and internal)
Jing 3 here – anchors
Jing 4 here – link to anchors
Jing 5 here – adding a Spry Menu Bar
Jing 6 here – adding items to the menu bar
Jing 7 here – formatting the menu bar
Jing 8 here – copying the menu bar to other files
Video from youtube here – setting up an Image Map

Once you have completed all of the Jings, do all of the assignments in Packet F.
Blooms & Bulbs
Rapids Transit
TripSmart
Carolyne’s

Personal Project Web Page (Your Own)
After Unit E, this is what your project should contain.

Home page:
–Four links that are clickable
–an Assets folder to store all your pictures and media
–Create the four pages that can receive the click from the home page (they can just say UNDER CONSTRUCTION for now)
–Add contact information (you can make this up)

Two additional pages of content (from the four links you created earlier on the home page).
Create some content for each of these pages. At least two paragraphs of your own original writing about this topic.
Create an unordered list on one of these two pages. It should contain AT LEAST three items.
Insert at least ONE IMAGE on every page. Cite the source of each picture. One image center, one image left, one image right. Set the VSpace and HSpace and alternate text for each image.

Create a Style Sheet
Create body text in a different font and color
Create a different font and color for your headings
Create a special style for your contact info to make it look different from the body text
Create a different font weight and height and bullet for your unordered list

Add the following items to EACH of your pages:
–Description, Keywords, and Title
–Last updated statement that includes a date that automatically changes on each save
–Attach your CSS file to each page

Dreamweaver Unit E – Using and Managing Images
Part 1: Inserting an Image and changing the Alternate Text, HSpace, VSpace, Alignment, and Border, listen here.
Part 2: Follow along with the handout provided.

Assignments:
Blooms & Bulbs
Rapids Transit
Trip Smart
Carolyne’s Creations

Additional Assignment:
On a separate piece of paper, handwrite the answers to these questions. Here is the website to get your answers.

What is copyright?
What is public domain?
What is fair use?
What is special about the Smithsonian? What other sites do they recommend?
What is the difference between fair use and publishing on a Web Page?
What is attribution?
Who is going to know?

Personal Project:
Once you have completed Assignments for Units D & E, you should work on your own personal project, following the instructions that are on the handout.  We will have a quiz next Wednesday.

Dreamweaver Unit D – Cascading Style Sheets
Part 1 – Import data, set HTML Heading property, listen here
Part 2 – HTML Heading property 4, unordered list from existing material, listen here
Part 3 – Creating a new CSS style, listen here
Part 4 – Applying and editing the CSS style, listen here
Part 5 – Attaching CSS file and running spell , listen here

Make the changes to The Striped Umbrella as you go through the videos. I want to see it to give you a completion grade.

Assignments:
Blooms & Bulbs
Rapids Transit
Trip Smart
Carolyne’s Creations

Update your own personal web site by adding a CSS style sheet. On one of your new pages, make sure you have a bulleted list of some sort. Customize your headings (those within the body tag) and at least two other items on your page. For each of the pages that you have remaining, create a title on the page and attach your CSS style sheet to it.

We will work on these assignments through Thursday of this week. NO QUIZ over this chapter right now. We will have a quiz over Units D and E at the end of the next unit.

Cascading Style Sheets HTML
Open your MWS.css file and your Astro.htm file. You will be using both of these files in the following Jings.
Pause as you are going through each one so that you can perform the steps that are indicated.
Let me know if you have any problems getting something to work. 

When you are done with each of these, you will be ready to work on the packet of assignments.

Jing 1 – UL.B and A:link and A:visited

Jing 2 – Set A:Hover and P:first-line and P:first-letter

Jing 3 – Set LI.special by setting a special class in the .htm file

Jing 4 – Set DIV tags in the htm file and change the DIV tag in the css file, change margins

Jing 5 – DIV tag, change background color and border

Jing 6 – DIV tag, change width and float 

Make all of the changes to your own Striped Umbrella folder. Show me those changes for a completion grade.

Do all of the assignments at the end of the unit:
Blooms and Bulbs
Rapids Transit
Tripsmart
Carolyne’s Creations

Be ready for a quiz on Friday.

Dreamweaver Units ABC
Take a tour around Dreamweaver
Set up the basic FRAMEWORK for a web site
Develop the actual web page
-Plan the layout
-Create the head content, listen here
-Set the Web Page properties, listen here
-Create and format text, listen here
-Add links to the page, listen here
   -Automatically change the DATE when page is updated, listen here

The example we will use throughout Dreamweaver is The Striped Umbrella.
Show me your changes to this file before you begin the following assignments.

ASSIGNMENTS:
-Blooms and Bulbs, page 66-67
-Rapids Transit, page 68
-Trip Smart,  page 69
-Carolyne’s, page 72
-Real Life Independent Challenge, page 45 (Get the Index page set up for your own web page, must contain at least five pages)

All assignments DUE by Friday 2/28/14.

Colors, Fonts, Images, and Image Maps
Go to the Common/Cooper/WebPage2014 folder and copy the Colors, Images, and Fonts file to your own folder.
Listen to the videos here. 
For each of these videos, perform the actions as you are watching. 
I will ask to see your changes for a completion grade.

Color1
Color2
Fonts
Images
Image Maps 1
Image Maps 2

Show me the changes that you made to your Snow Day page.
Make the changes from the handout on the Expo webpage.

Graded Assignments:
Case 1 = Jackson
Case 2 = SFSF
Case 3 = Kelsey’s Diner (Breakfast, Lunch, Dinner)
Problem Quiz over all of this information

QUIZ OVER ALL OF THIS, PLUS LINKS ON THURSDAY, 2/20/14

HTML – Chapter 2
Create Links to Internal locations
Create links to specific locations in external locations
Relative vs. Absolute pathnames
Use absolute pathnames to link to files
Create Links to External pages
Link to an email address

Listen to Links Part 1 here
Listen to Links Part 2 here (when you Name the TOP of your document, put a closing </A> tag at the end of that line in your notepad file. I forgot it in the video. Also, when you finish the link to make it go to the top, this video is finished. I was having technical difficulties)

There is no part 3 as mentioned in the video. 
Instead, you create all five of the anchors and links for the top of the page.
In section 3P, create a link to your favorite website.
In section 4P, use a different picture to create a link to another of your favorite websites.
In section 5P, create a link to your own personal email address.

I will issue a completion grade for this video assignment so when you are finished with it, I must review it. Then proceed to the two assignments on the handout provided.

HTML – Chapter 1
Tag Format
HTML
Head
Title
Body
Paragraph
Break
Headings H1, H2, H3, with align property
ordered list
Unordered list
Definition list
Bold
Italics
Underline
Special Characters
Horizontal lines
Inline image
_______________
Tutorial #1
Tutorial #2
Three program problems from handout
Program Quiz

Dreamweaver Unit H – Tables
Jing 1 here – setting up the framework for a table
Jing 2 here – column widths, merge cells, and split cells
Jing 3 here – adding a picture and some text
Jing 4 here – attaching style sheet and inserting a horizontal rule
Jing 5 here – Formatting cells and editing styles

Dreamweaver Unit G – more CSS
Jing 1 here – Using a template
Jing 2 here – copying and pasting the index elements into the preset template
Jing 3 here – editing the internal style sheet
Jing 4 here – editing some more of the internal style sheet
Jing 5 here – adding an AP (absolutely positioned) Div tag
Jing 6 here – modifying an AP div
Jing 7 here – more modifying

Dreamweaver – Unit F
Jing 1 here – get the Activities file ready to use
Jing 2 here – Links (external and internal)
Jing 3 here – anchors
Jing 4 here – link to anchors
Jing 5 here – adding a Spry Menu Bar
Jing 6 here – adding items to the menu bar
Jing 7 here – formatting the menu bar
Jing 8 here – copying the menu bar to other files

Once you have completed all of the Jings, do all of the assignments in Packet F.

March 12, 2013
Dreamweaver Unit D

Part 1 – Import data, set HTML Heading property, listen here
Part 2 – HTML Heading property 4, unordered list from existing material, listen here
Part 3 – Creating a new CSS style, listen here
Part 4 – Applying and editing the CSS style, listen here
Part 5 – Attaching CSS file and running spell , listen here

Thursday 02/21/2013
Open your MWS.css file and your Astro.htm file. You will be using both of these files in the following Jings.
Pause as you are going through each one so that you can perform the steps that are indicated.
Let me know if you have any problems getting something to work. 

When you are done with each of these, you will be ready to work on the packet of assignments.

Jing 1 – UL.B and A:link and A:visited

Jing 2 – Set A:Hover and P:first-line and P:first-letter

Jing 3 – Set LI.special by setting a special class in the .htm file

Jing 4 –  Set DIV tags in the htm file and change the DIV tag in the css file, change margins

Jing 5 – DIV tag, change background color and border

Jing 6 – DIV tag, change width and float

Unit C – Developing Our First Web Pages
Thursday 02/07/2013

Together, in class, we will look at the following items:
Using the History Panel 
Browser Preview button 

Creating Head content – listen here
Setting Properties for Text on a web page – listen here and here
Keep the Date Current – listen here and here

Now update your Striped Umbrella page, if you have not already done so.
Assignment Packet:
Blooms
Rapids
TripSmart
Carolynes
Mine

Unit B – Creating a Web Site
Wednesday 02/06/2013
How to set up a Web site by creating folders – listen here
How to set up new pages by creating files and updating image links – listen here

In class, we created The Striped Umbrella as our practice Site

Unit A – Tour of Dreamweaver
Tuesday 02/05/2013
Part 1 of the tour – listen here
Part 2 of the tour – listen here
Thursday 01/24/2013
Unit 3 – HTML – Image Maps
See notes here.
Wednesday 01/23/2013
Unit 3 – HTML – Colors and Images
source code is here

Tuesday 1/22/2013
Sorry I’m gone today. Wish I were there.

Ask the sub to find the folder that says HTML 2. It should be on my actual desk, or on the corner of the back desk. Also, will one of you show the sub how to find this page.

Your task is to finish the second project. When you are finished with it, email the htm file to me at lcooper@mths.us.  Even if I checked it on Friday, I want you to email it to me this morning. When you have finished that, please tell the sub to put a check by your name on the seating chart.

Once you are done with that, begin a web page of your own. It should be a web page about you and contain at least three other branch pages with some of your hobbies or interests.

NO YOUTUBE!!!

Monday 01/14/2013
HTML coding lecture for photos and links.
Friday 01/11/2013
Finish all assignments from HTML Packet 1.
Thursday 01/10/2013
Finish Project 1-1 – Beethoven
Proceed on to Project 1-2 Euler
Project 1-3- Chester
Wednesday 01/09
HTML coding:

Bold
Underline
Italics
Insert graphics

Work on Project 1-1 from the Handout.
Beethoven’s Ninth Symphony

Tuesday 01/08
HTML tags for:

Breaks
Paragraphs
Headings
Comment lines
Ordered lists with customization
Unordered lists with customization
Horizontal Rules

Monday 01/07
Help build a participation rubric. What do you think weighting should be for participation? What criteria should we use for judging participation?

What free-time websites can we come up with for a list of approved sites? Please suggest at least two.

Begin demonstration on HTML using Notepad.

Friday 01/04
Open this file here.

Select a website from within the categories listed. Perform the tasks on the sheet to Analyze the Web Site you are given.