GRADES | Course outline / grading information | Contact Me |Publishing

5/21-

Take any javascript/dynamic element that you have seen, incorporate it into the small business pages (Template 1)... or, if you'd rather, create a new page and put it on there...

No need to put a new link on your home page... it's still there

5/18- Some of the options for JavaScript

What is it?

• http://www.dynamicdrive.com/
• http://www.javascriptkit.com/cutpastejava.shtml (also tons of neat stuff on the home link)
• http://www.thefreecountry.com/javascript/index.shtml

Some 'assignments' to try...

5/17-

Use the Flash slideshow feature - insert a slideshow on to your small business page (don't use the template)...

I would like there to be at least 5 pictures... wow me!

5/16 - Flash Slideshow

5/15 - Behavior Assignment -

Template assignment 1 modification - Take your business that you created...add one 'behavior' to the home page.

Inserting a jump menu to Template 1a

On a blank example page, Use Insert --> Form --> Jump Menu and create an additional way for users to navigate through your site. (My example is in the top right of this page)

5/14 - Behaviors!!!

Behavior 1 - new window on page load

Behavior 2 - new window on link

Behavior 3 - image opens a new window with a link - link is in same window :-(

Behavior 4 - Pop-Up message (extremely annoying--use with extreme care)

Behavior 5 -Creating Timelines

Behavior 6 - Rollovers and Interactive Navigation Bars (just to see there is another way to do it)

Some links to sounds for behaviors if you are interested:  Chainsaw, hello, Seinfeld

/ - Dreamweaver Template Assignment 4 - The Master!!!!

Ok - starting from scratch... Here is a basic example I started...

You have been contracted to design a page for an ice cream store based in Glens Falls - downtown right near Centennial Circle. You can name the business anything you want. They have been in business for 5 years, it's time for an online presence. They are looking for you to come up with a design for them. The pages will be static for now.

They believe there should be 6 pages:

1. Home (including contact information)
2. Flavors
3. About Us
4. Making the Ice Cream
5. Our Mission
6. Kids eating our ice cream pics

Your job:

1. Create a new page using a DW premade theme (use the Starter Page --> theme).
2. Save it first as a regular html page
3. Make it a template page. (You may want more than one template, or maybe the template will not apply to all of the pages...hhmmmmm...)
4. Create your 6 html pages. Maybe they should all be based on the template, maybe not.
5. They would like a custom made image banner to display on every page.
6. They would like simple navigation to go between pages. You can choose text or an image based navigation bar.
7. Put some simple content on each page. Make it relevant to that page.
8. The pictures should be related to their pages (as necessary)
9. Change the colors as you would like them to be. They may be changed later.

5/15 -

Domain name recommendation

Here is a letter your web design company received.

Read the letter, start researching and documenting some information.

I will provide a sample letter for you to follow when responding.

Letter example for you to write...

5/14 - Domain Research

Done? - try this - ad research

5/8 -

Now the fun part -

For each of your 4 pages, come up with content. What you write is up to you, just be sure to make it reasonable and appropriate for the pages. You can find information online and use that as a guide if needed.

I would also like each page to have some sort of related logo in the top left APDIV that is linked to the home page. (use the template for this one)

I would also like one of your pages to have at least 2-3 pictures, sized and inserted appropriately, that are somehow related. For a challenge, use this image gallery...

5/4 -

Dreamweaver Template Assignment 1a

Open the Template from Assignment #1 (not the .html page but the .dwt page in the Templates folder)

What regions on the page can be changed?  What regions cannot be changed?

Make the following changes:

1. Make a simple banner in Fireworks for a fictitious company with your name (Strongman Gym, LaFave's Garden Shop, etc...) - insert the converted image into the appropriate spot on the Template.
2. Come up with 4 pages that your business would have... for example, a garden shop may have Home, Annuals, Perennials and Contact Us.
3. Add the name of the 4 pages where you think is reasonable for the pages. Suggestion - create another editable region above the content region - leave that editable as an <h1> for each page and put your page title there...
4. Use one of two options:
   1. Create a simple vertical nav bar in Fireworks that can navigate between your site's pages, or
   2. Use the challenge from yesterday with the rollover cel
5. Remember that you should only have to make changes to one document.
6. You should have the 4 'a' classes for hyperlinks and they should fit in with the rest of the page colors.
7. Update the pages that are based on this Template.

Publish all when done (no need to make new links from your main page - these were changes to the 1st template assignment)

5/3 -

Challenge--make a rollover nav column....like this

Here is the code:

For the style - the most efficient way is to add a new class call .hlt and define the background color as green...

<style type="text/css">
.hlt {
background-color: green;

}
</style>

For the nav:

<table border="1" width="100">
<tr>
<td onmouseover="this.className = 'hlt';" onmouseout="this.className = '';"; bgcolor="#0000CC">link 1</td>
</tr>
</table>

You should definitely add a:link, a:visited, a:hover, a:active to your styles.

Getting the colors to work takes time/patience... see what you come up with.

5/2 -

Dreamweaver Template Assignment 1

Creating a new template (or master) page...

1. Go to File, New, Blank Page, HTML template
2. Notice that the title bar says <<Template>> in it.
3. Draw 4 AP divs so that your page looks sort of like mine.  Style yours nicely :-)
4. Add an editable content region inside the content APDiv - this should be the only editable region on the page...
5. Save it as a template...(notice that DW creates a folder called Templates and places this document into that folder with a .dwt extension)
6. Close the template page.
7. Use the files panel and create a new folder called template-example3
8. Create 4 new documents, but choose Page From Template and choose the template page you just made.
9. Save these new documents inside of the template-example3 folder:
   • template_assignment_1a.html
   • template_assignment_1b.html
   • template_assignment_1c.html
   • template_assignment_1d.html

Using the template, link between the 4 pages- use the APDIV that is for nav (don't put the links in the editable region)

Link from your main page as always to 1a - make sure the link says Template #1 (this must be on top)

5/1 -

Save this page, then open in DW...

creating template from .html, editable regions again, creating pages from template

4/24-

APDiv and Div assignment 5

Now that you are all pros at divs and apdivs, let's apply them.

I would essentially like you to duplicate what I have done here. (I did not add content)

I would like:

• A Page Banner similar to mine
• A navigation bar similar to mine
• 4 APDivs that are in a similar set up to mine
• The styles should all be in an external sheet. Make sure your style sheet is properly linked to the three pages.
• You should probably get one page working, with colors, styles, and images that will be the same for all 3 pages.
• When this is set, I would then save your 2 new pages from the original.
• Your main page needs to have 3 images. They can be of anything related to camping.
• Add 'head' tags for content and description

Here is the content for your pages:

• Main page
• FAQ's (you need to set name anchor links like my example...I'll help)
• Contact Us

PUBLISH AS Spanky's - APDiv #5 (make sure it's on top)

4/20-

Div and APDiv Assignment 3

Open your div_assignment1.html file.

Perform a save as and save the above document as div_assignment1a.html, div_assignment1b.html and div_assignment1c.html

Only after you have saved your additional files, check your files panel and make sure you have the following 3 new documents inside of your div_apdiv folder

1. div_assignment1a.html
2. div_assignment1b.html
3. div_assignment1c.html

Got them?

Now, open the 1st document (div_assignment1a.html).

Choose the navigation apdiv and change the background color to something else. Make this change only on the 1st document.

Check the b and c document and see if that change is on all 3 documents...Is it?

Let's fix this together by exporting our styles to an external style sheet...

Please wait and we will do this as a group...

4/19 -

APDIV/DIV assignment 1 - making 3 APDIVS

Create a new subfolder inside dreamweaver titled apdiv_div

Create a new blank html document inside of this folder called div_assignment1.html

(here is my example of basically how it should end up looking)

• Using your layout toolbar, create an ap-div tag that is positioned at the top of the page (along the left and top with 0 px margin)...color the background green of some sort.

1. The size should be 900 px wide and 150 px tall.
2. Rename the ap-div in the property inspector as bannerapdiv1 (make sure the name changes in the CSS panel - the css panel should have a # in front of the name).
3. Make a thick, black border for all 4 sides (or if you wish, make all 4 sides different).
4. Choose any font style that you like, but change the weight to bold
5. Set the padding to 6px
6. Use the AP Elements panel (in css panel) and set this ap-div to visible
7. Type some text in this ap-div....something like: This is my banner ap-div

• Under the first one, insert another ap-div, set them to the same left margin, and the same width, but make this height 100 px

1. Rename this ap-div in the propert inspector as navigation-apdiv1 (make sure the name changes in the CSS panel - the css panel should have a # in front of the name).
2. Set the color to anything that works well with the bannerapdiv1 color
3. Set the padding to 6px
4. Use the AP Elements panel (in css panel) and set this ap-div to visible
5. Type some text in here like: This is my navigation ap-div

• Now, insert your content ap-div under the first two.

1. The size should be the same width as the others, but very tall (you determine)
2. Rename appropriately...
3. Choose any font style you wish, including weights
4. Set the padding to 6px
5. Use the AP Elements panel (in css panel) and set this ap-div to visible
6. Type something in this ap-div like: This is my content ap-div

Publish as: APDIV Assignment 1

4/17 - Pull Down Menu Assignment 1... My example...

Create a new folder inside dreamweaver called spa_nav_bar_pull_down

Save a new page as index.html using the Starter Page Theme--> Spa Calendar and save into the spa_nav_bar_pull_down subfolder.

Then, save as the following pages:

1. massage.html
2. aroma.html
3. directions.html
4. contact.html

(you should end up with 5 pages - home, massage, aroma, directions, contact)

Create a pull down nav bar similar to mine...Home - Services (massage & aroma)- Company Info (directions & contact)

Set the links to work properly according to the above pages.

Pay close attention to the colors.  Your nav bar and menu options should all match the colors on the page.

Insert the pull down nav bar on to the 5 pages above.

Publish as: Spa Pull Down menu Assignment 1

4/16-

Pull Down Menu Options:

An example

4/2 -

Let's do it again! - Dreamweaver/Fireworks Nav Bar Assignment 3 - Spa

Create another new sub-folder inside dreamweaver called nav_bar_3_spa

Save these files into that subfolder:

• Home
• Massage
• Aromatherapy
• Contact
• css file
• bg red
• bullet yellow
• product sm
• photo1
• photo2
• spacer

Create a vertical navigation bar and insert where instructed on the page.

Create a horizontal text based navigation and use one of the 'snippet' options.

Change all page titles.

Customize the css file (mm_spa.css) to something you believe is presentable... Remember that the style sheet is external so it should apply to all 4 pages.

You don't need to make new id's for the styles... use the ones given.

Publish as: DW/FW Nav Bar Assignment 3 - Spa

3/29- Creating and inserting custom made navigation bars (vertical):

Save these 4 pages (you may wish to save to a subfolder)

1. Home
2. Contact
3. About
4. For Sale

Create a custom made vertical nav bar - Home - Contact - About - For Sale

Use a snippet for the bottom nav...

Make sure all of the links work...

Change all page titles...

Publish as: DW/FW Nav Bar Assignment 2 - custom buttons

3/28 -

Now that you have Fred's pages up and running, along with a basic navigation bar, I would like you to make suggestions as to what you think it should look like.  You may notice that the instructions I gave regarding color and font choices may not have been the best use of colors. 

Set up the page, using the external style sheet, and adjust your navigation bar to all work together.

WOW me...

I am grading Fred on two general criteria:  Nav Bar and Style Sheet

Suggestion - set the bottom links to:

• a:link (the font color the same as the button 'up' text color)
• a:hover (the font color the same as the button 'over' color)

Please don't do this: 

But, you can do something similar to this:

Make sure the page titles are correct. Make sure all links work!

3/27 -

Create an external style sheet for the 3 nav bar pages (Fred) we have been working on... set the following styles:

• body background color of #66FF00
• H1 - green
• H2 - red
• H3 - yellow
• H4
• H5
• H6
• .StoryContentColor - size 24
• p - size 8
• table - border thick red groove
• a:link
• a:visited
• a:hover
• a:active

3/26 -

Make the following changes to DW/FW nav bar assignment 1 - Fred's Pages

Remember you should open the .png image with the buttons, double click one of the buttons to open the button editor, and make your changes in the button editor. Save the original, then update html...

• Change the 'up' button background color to solid color #00FF00
• Change the 'over' button background color to solid color #009900
• Add a down button (copy the graphic), and make the background color solid #0099CC
• Change fonts if necessary...

Do you have to change every page in DW?

Re-publish when done...make sure you Test, Test, Test!

3/22 -

Dreamweaver/Fireworks Nav Bar Assignment 1 - Fred's Pages

Save these 3 pages into a subfolder - call it anything you want...

• Fred Home
• Fred Contact
• Fred About

Create a custom nav bar (do not use import!). I would like at least a 2 state button.

Don't worry yet about styling on the 3 pages...

Set up the hyperlinks on the bottom to work properly.

I am going to be providing styling requirements for both the nav bar and the 3 pages...

That's it!

Publish as: DW/FW Nav Bar Assignment 1 - Fred's Pages

???-

Creating a nav button from scratch

3/19-

Save the 4 perro & gato pages into a subfolder...

• Home
• Pics
• Contact
• Styles

Your task:

Create a 3 button horizontal nav bar to be used on the above pages. Insert where appropriate. Make the links work...

This will be graded.

Be sure that this is the very top link! It should say simply:

Perro & Gato with nav bar

3/16 -

Save my 3 sample pages:

Sample 1

Sample 2

Sample 3

Create a nav bar to insert on the 3 pages where the placeholder is now. Delete the placeholder (pay attention to the code!)

The links should work when done.

Publish as Sample Nav Bar 1

3/14 -

Creating another nav bar (importing buttons), exporting as html, importing to dw

Adjusting links in dw

Create a simple navigation bar in FW by using the 'import button' option, then insert into the top cell of each page, it's already set up to insert. (Remember to use the Insert--> Image Objects-->Fireworks HTML

3/12 -

Creating a nav bar in FW and using the import button option, using the 'button' editor

Remember you should ALWAYS save your .png file first into the subfolder where your .html docs are... this will make your life much easier...

Dealing with transparent background issues:

1. The easiest way is to go to the optimize panel, choose gif, then index transparency and make sure the transparent background box is chosen...
2. Set as png32

3/9 - Creating and styling DIV tags from scratch

Create a new page in your dreamweaver_starting folder - call it div_examples.html

Your challenge: Try creating a 2 column page, with horizontal rows above and below for nav...include a container div

Something along these lines...

Styles after you have tried:

.container {
background-color: #0000FF;
clear: none;
float: none;
height: 1500px;
width: 98%;
margin-right: auto;
margin-left: auto;
left: auto;
top: auto;
}

.toprow {
background-color: #FF0000;
clear: both;
float: none;
height: 75px;
width: 100%;
margin-top: 25px;
}

.leftcol {
background-color: #CCFF00;
clear: left;
float: left;
height: 750px;
width: 50%;
}

.rightcol {
background-color: #66FF33;
clear: right;
float: left;
height: 750px;
width: 50%;
}

.bottomrow {
background-color: #99CCFF;
clear: both;
float: none;
height: 100px;
width: 100%;
}

3/5 - Challenge to Perro & Gato:

Insert an image gallery that looks somewhat similar to this...

Hints:

• You'll need to copy the styling to the style sheet.
• You'll need to copy the page code to the content div on the pictures page.
• To make it look like mine, you'll need a large and small pic of the same picture.

Styling:

div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}

div.imageholder
{
height: auto;
width: 400px;
margin-right: auto;
margin-left: auto;
text-align: left;
clear: both;
float: none;
}

Page code:

<div class="imageholder">
<div class="img">
<a target="_blank" href="pic1big.jpg">
<img src="pic1small.jpg" alt="Perro and Gato Happiness" width="110" height="90" />
</a>
<div class="desc">Eat and be merry</div>
</div>

<div class="img">
<a target="_blank" href="pic2big.jpg">
<img src="pic2small.jpg" alt="Perro and Gato Happiness" width="110" height="90" />
</a>
<div class="desc">Frolic and play</div>
</div>

<div class="img">
<a target="_blank" href="pic3big.jpg">
<img src="pic3small.jpg" alt="Perro and Gato Happiness" width="110" height="90" />
</a>
<div class="desc">play and frolic</div>
</div>

</div><br>

3/1- Dreamweaver Assignment 4 - Dog and Cat Day Care (revisited) - div styling

Save these into your dreamweaver_starting folder (you may want an additional subfolder for these to help manage your files):

• DW Assignment 4 home (activities)
• DW Assignment 4 Pictures
• DW Assignment 4 Contact info
• DW Assignment 4 styling (link as an external sheet to the above 3 files)

Your assignment:

Use the external style sheet for ALL styling - notice that I have already placed the classes in there that you will need, but you will need to add other classes/ID's...

Work with the floating and clearing of the divs, the widths and heights and the bg colors... try to get it to work...

Some hints:

• text-align center the body
• the container tag should be wide (wide enough to hold everything) - it should have float none and clear none
• float and clear the ads to the right
• float the nav and the content left (you figure out the clear - remember the clear is sort of like a break - so after the nav where do you want the next div to be?? and after the content where do you want the next div to be??)

This is the home page kind of formatted...

Styles for the divs - only after you have tried...

body
{
text-align: center;

}

div.container
{
background-color: #FFCC99;
width: 98%;
height: 1500px;
text-align: center;
margin-right: auto;
margin-left: auto;
clear: none;
float: none;

}

div.navigation_menu
{
text-align: center;
vertical-align: middle;
clear: both;
float: left;
width: 100%;
background-color: #FFFF00;
height: 20px;
padding-top: 20px;
padding-bottom: 20px;
}

div.content
{
clear: none;
float: left;
width: 75%;
height: 1000px;
}

div.adcontainer
{
float: right;
width: 25%;
height: 1000px;
background-color: #FFFF66;
clear: right;
}

2/29 - extension of yesterday...

Delete the two extra links in the nav table (ctrl-click the cells and delete or use the code)

Take the original document from yesterday and save as 2 more times (a,b,c...) -

• Set up the links to work properly between the pages
• Add an image to the content div on each page
• Add an advertisement to the ad div on each page (keep it simple!)
• Add a copyright in the bottom div on each page

2/28- Dreamweaver DIV tags

Save this document and this style sheet to your dreamweaver_starting folder...

Float - think of this like floating on the page - where do you want it to appear in relation to other elements

Clear - sort of like a break - where do you want the next item (div) to go

• .divholder (the holder for everything) - no float, width 100%, height 1000px, clear none, left and right margins auto
• .divnav - vertical nav - float left, clear none, width 25%, height 700px
• .divcontent - content for the page - float left, clear none, width 50%, height 700px,
• .divrightads - adholder - clear right (forces the .divbottom under), float right, width 25%, height 700px
• .divbottom - copyright notice - width 100%, height 75px, float left

You can adjust the div tags to anything you would like after you have set the above properties. Make it work.

• body a lighter color
• #navtable
• a:link, visited, hover, active

2/27 -

First, let's work on creating two basic pages and applying an external style sheet...

Right click and save these to your dreamweaver_starting folder... or create 2 basic pages - File--> New --> Page From Sample --> Starter Page Basic --> Text Article A (do this twice - save as Article A and Article B)

Article A

Article B

2/13 - Review of limitations of internal styling, adding/using snippets, then...

Dreamweaver assignment 3 - External Styling - Up and Away Realty

Save these files to your dreamweaver_starting folder - you may wish to add a subfolder called external3:

• External 1
• External 2
• External 3

Rules for formatting:

1. Use one external style sheet that links to all of the documents
2. Create and insert a logo in the exact size of the placeholder for all pages
3. Find a picture you can use for each of the 3 placeholders for all the homes (try to find different images of the same house for each page)
4. Change the description for each home
5. Change the unordered list (css only) to something neat - maybe an image?
6. Background color of page a light color
7. Background color of table to a complementary color (not the same as bg)
8. All images should be centered
9. All text that is not a headline left aligned, size 12, with a color that works well with the background
10. Set headlines (h1--> h6) and subheadlines - they should be centered
11. Hyperlinks (link, visited, hover, active) should be set using the snippets as instructed on the pages (anything you want as long as they are noticeable)
12. Spellcheck
13. Any others?

From your main index.html page, link to the home page for Up and Away Realty

Be sure that this is the very top link! It should say simply: Dreamweaver Assignment 3 - Up and Away Realty

Be sure to test your work after you publish.

2/10 -

Review of limitations of internal styling, adding/using snippets, then...

2/6 -

Dreamweaver Assignment 2 - Fred's Chicken Fingers - Internal Styling

Right click this link, save as I have already named it inside your dreamweaver_starting folder.

Format as following - set all of your styles for now as internal (this document only!)

• H1 = size 36, red - pick font
• H2 = size 24, shade of red - pick font
• H3 = size 18, green - pick font
• H4 = size 16, green - pick font
• H5 = size 14, green - pick font
• H6 = size 14, green - pick font
• .StoryContentColor = size 12, red - pick font
• a:link = regular, size 12 - pick font
• a:visited = regular, size 10 - pick font
• a:hover = bold, size 12 - pick font
• a:active = bold, size 14 - pick font

Challenges:

• Define a new class (.tablemiddle) and set the middle column of the table to background yellow
• Define a new class (.copyright) and apply it to the copyright text at the bottom
• Center the main table on the page
• Set a cream colored background to the body
• Spell Check and fix the errors
• Create 2 images using Fireworks in the exact sizes of the current placeholders and insert properly

Perform a 'Save As' and save two more times, contact.html and about.html

• Adjust the <title> tags properly for all 3 pages
• Make your links for all 3 pages work properly
• All 3 pages should look EXACTLY the same

Think about the disadvantage to using an internal style sheet...

From your main index.html page, link to the home page for Fred

Be sure that this is the very top link! It should say simply: Dreamweaver Assignment 2 - Fred's

Be sure to test your work after you publish.

2/3 -

Save this file, then format:

• .div1 (change the background at minimum)
• .div2 (change the background at minimum)
• .divcontainer (change the background at minimum)
  • For the divs, adjust margins, borders, and padding so they look nice. (remember they are structure for content)
• p
• .p2
• .p3
• h1
• h2
• h3
• body
• img1
• img2
• a: link, visited, hover, active

Change the page title.

Publish as Dreamweaver pre-pre-assignment #2

2/2 -

Adding classes to the styles from pre#2

2/1 -

pre-assignment to #2 - right click and save to dreamweaver_starting folder, then open in dw

Formatting:

• adjusting 'H' tags
• a:link, visited, hover, active
  
• adding new class of .leftcolumn and applying
• adding style to tag p
• adding class .p2
• naming table as table1, adding id of #table1
• aligning the table in center
• inserting a top row to the table - setting a class of .tdtoprow
• adding nav links to the top row
• body background color
• image tag

1/31 -

Your first Dreamweaver assignment - Links/Bullets/Basic Formatting

1. Create a new blank .html document in your dreamweaver_starting folder called dw_assignment1.html
2. Make a bulletted list of 3 internal and 3 external hyperlinks. I would like the internal links to open in the same window and the external links to open in a new window.
3. Lastly, I would like you to add two images:

• One is any one of the banners/logos that we have made already. Link this image to your main index.html page.
• The second is an image from any website that you save to this folder. Link this image to the website where you got the image from.

From your main index.html page, link to this new assignment.

Be sure that this is the very top link! It should say: Dreamweaver Assignment 1.

Be sure to verify your work after you publish.

1/30 -

Going over the midterm

Cleaning up files

Reviewing New Page options

Create a new folder - name it dreamweaver_starting

Save this html file

Save this image

1/18 - Midterm Part 2 -

Put these 4 files in the midterm2012 folder: Home - Camry - Malibu - Wrangler

(a starting point for your style sheet)

You will be designing a website for a used car dealership called Quaker Automobiles in Glens Falls.

The owner of the company is open to suggestions about colors, but she has mentioned that she likes gray, light green, and light blue. How you style the page is up to you, however it should be easy to read.  Think about complementary colors - You are not designing it for you...

1. All styling must be done in an external style sheet called car_styles.css. Create at least these:

• a:link, visited, hover, active
• h1 thru h6
• p
• img
• There are 5 div tags (4 different classes) - float/clear/format properly
• You can and should set different classes to different elements on the page... for example the adcontainer links could be set as .adcontainerlink and they could be made to look different than the other links on the page
• Others as you wish

2. Use Fireworks and create a page banner and insert into the image placeholder on each page.
3. Find and modify (in some way) an image to be used on the main page placeholder of a picture of their business.
4. Find an image for each car type and insert into the car image placeholder on each page - the image must be modified so it has a copyright notice on it - like this
5. There are some other items on the pages that can be customized/modified...see if you can find them
6. Spell Chck?.
7. You can do anything you wish to make this look amazing.

When done, link from your main page to the home page for this and call it Midterm Part 2

1/12 -

Midterm Part 1 - create a new folder called midterm2012 - file to save -

Instructions:

• Create a page banner for the pizza place and insert to the appropriate spot
• Find a picture of someone making pizza, add the words "Tom Scungili making his famous pizza" to the picture, and insert
• Find three images related to pizza and insert into the bottom row where the 3 image placeholders are - crop/resize so they are all 150x150

Use INTERNAL STYLING and follow these rules:

• I have given ID's to 3 of the tables on the page - identify those, make new ID's (not classes - ID's have #) in the Internal Styling, and format as you wish. You should make the 3 tables the same width, and anything else so they look nice.
• Give the table with the 3 images an ID of #tableimages and format (name the table and create new ID in CSS)
• text-align: center the body tag
• paragraph text should be left aligned
• There is a .p2 class somewhere... find it and format
• Set a new class of .td1 - format it with a yellow background, then apply it to the cell that contains the 'Our Story' text
• You can and should format the rest of the page so it looks nice and is easy to read.

When done, link from your main page and call it Midterm Part 1

Good Luck!

1/?? -

Now that you are getting proficient in using fireworks....let's start making some page banners...

Vinny's Pizzeria wants you to work on a banner for their new web site...They don't have any knowledge of what should even be in a banner...

Create a new subfolder called 'fireworks-vinnys'

You will be creating 2 banners for them to look at... Set the resolution to 72 ppi and the sizes as 432 x 216

One of the banners (or both) must have a pizza pie as part of the graphic :-)

Save them as 'vinnys1.png' and 'vinnys2.png' into the 'fireworks-vinnys' subfolder (before exporting)

When done, use the export wizard and export properly - place links on your homepage to both of the above images (do not put the images on your main page) -

Remember that the exported images should be in either .jpg or .gif format

1/11 -

Using the paste into feature (mask)...

Examples to work on... - save and open in FW

The 'MT' bottle and can recycling center would like you to make a logo for their site...

Here is one image with 4 different layers... (save as and open in FW)

I have only 2 requirements:

1. Finished size must be 576x216
2. The cans image must be integrated with either the text or the heart as a mask, similar to the leopard print thing we did...

1/10 -

Taking surfboard, cutting out extra, using on Hang Ten Surf Shop

Save this surfboard to your folder, then open in fireworks (btw - it's a good idea to always save the original as a copy in case you ever need it)

Cut out the white background space, place onto your Hang Ten surf shop logo (the original .png image)

My Hang Ten Logo

Link from the top of your home page to the gif image - make sure your link says today's date and Surf Shop Image 1

1/9 - after my intro...

Create a subfolder called fireworks-surfing -

The customer would like a 500 (width) x 200 (height) logo (standard resolution)

Save a new image as surfshopimage1.png -

Make a logo for the following company:

Hang Ten Surf Shop
'Surfing in style'

Use only simple colors, borders and text colors…nothing else just yet

Be sure to save it into the subfolder 'fireworks-surfing'

When done, use the File Export Wizard and export as a gif image.

Link from the top of your home page to the gif image - make sure your link says today's date and Surf Shop Image 1

Here is a basic example...

1/? -

There are two external files below - save them to a new folder called 'fireworks-bird-tree'

Your assignment - Take the images - combine just the bird and tree to one image called 'tree_bird_together'...

You have a customer that really likes birds and trees :-)... fluff it up as you like

Bird Flying

Tree

When done, export properly and link from the top of your main page - 'Birds and Tree image'

1/4 -

Starting with bitmaps...

Joining pictures -

Create a subfolder called 'fireworks-simpsons'...then

Save Grampa

Save the Flying Eagle

Save the black pallette, or just make your own...

Then, if you are done, save the whole Simpson family -

Ask me what to do...  (it involves a landmark)   :-)

1/3 -

Using Vector Pen, Vector Path, Vector Redraw Path tools

Attaching text to path...

changing orientation...

Using Modify -> alter -> simplify to attach text to any shape

Example of text to path and orientation...

12/22 -

Converting text to paths and modifying the paths independently...

'Your Name' "assignment"

example

12/21 -

converting shape to vector and reshaping boxes

using the Reshape area and Freeform tool

scale, skew, distort shapes

12/20 -

Fireworks png to save

export wizard

Your instructions:

Take your document from yesterday, the one with your name and at least 3 layers...

Use the export wizard, save as .gif.

Place it on a page with a colored background.

Publish as Fireworks example 1 - TTT

Exporting/Optimizing images

See the quality of these images....

Dealing with transparent background issues:

1. The easiest way is to go to the optimize panel, choose gif, then index transparency and make sure the transparent background box is chosen...

12/19 -

Beginning with Fireworks

Please read these...

http://electronics.howstuffworks.com/tv1.htm

http://computer.howstuffworks.com/question289.htm

http://computer.howstuffworks.com/monitor.htm

• creating pages
• basic tools
• canvas size
• pallettes
• toolbars
• saving
• Creating a basic document

12/12 -

Here is one working document with basic structure set up... save it to a new subfolder called 'external'

Attach a style sheet to it.

Create the pages as necessary, named properly, with proper title tags.

Format any necessary styles so the pages work and look appropriately.

For content:

1. The home page should welcome your readers
2. The FAQ page should answer 4 questions about your business/site.
3. About us should describe who you are, company history, etc...
4. Contact/Directions - tell me how to get there
5. Pictures - provide 3 pictures, sized the exact same reasonable size, of your business

At the very minimum, you should have the following styles:

• h1 & h2
• a minimum of 2 p classes
• body
• 2 divs
• 4 pseudo classes
• ul or ol
• img

Don't forget meta tags

Challenges:

1. Use the css horizontal nav to add a nav bar
2. Try this image gallery...
3. Your FAQ's should be set up as bookmark links... remember those? If I click on a question, it takes me to a spot on the same page... try it.

Link from the top of your main page to one of these pages and publish - the text should be External Assignment #2

12/6 -

External Styling - code to place in head section of every page using external css:
<link rel="stylesheet" type="text/css" href="name_of_file.css" />

Make sure you save your style sheet with a .css extension. The whole idea is that every page looks exactly the same!

Create a folder called 'styles-external'

Save my 3 examples:

• external1.html
• external2.html
• external3.html
• external123.css

Your instructions:

• Remember that you are working with 1 external style sheet for all formatting!
• Link the style sheet given to each of the above 3 pages. - Once linked, you should notice the ugliness of the current design...
• Change the colors that I put in my external style sheet to use hex codes
• Adjust all colors, font sizes, font types, etc. to anything you want as long as they work
• There is a hyperlink placeholder (#) - you should make the links work
• I used borders on the example just to see where the div tags are...you can adjust as you wish
• Set up the 'pseudo classes' for the hyperlinks
  • a:link
  • a:visited
  • a:hover
  • a:active
• On external2.html, insert 2 pictures of potential pets that you pet sit for...

• A challenge - try to get the adcontainer div to work with the other divs for size and color - you'll notice that the way it is set up now the adcontainer height is different...
• Another challenge - create a 4th page (use external1.html and save as...) - update your pages with links to this 4th page - make the content anything you wish
• Yet another challenge - create a style in the external123styles.css document for the images that applies to the images only

Link from the top of your main page to external1.html and publish - the text should be External Styles 1,2,3

12/ -

A model for you to use... (internal4)

Create a new document titled internal4.html. Create a page similar to my example using these guidelines:

• Make a heading 1 of: My Favorite Pictures
• Underneath that, put a heading 2 with your name
• Create a container div tag
• Float 3 'images' div tags nested in the container
• Add 3 images of anything inside the images divs
• Under each picture write a little something about each picture
• Add a hyperlink under each image that takes me to the page where you found the image
• Add a bulletted list under the container div that lists why you chose those images

Now that you have completed the content, use an internal style sheet to set to following formatting: (use hex for colors)

• h1 color red and 36 px
• h2 color silver and 24 px
• h3 color red and 18px
• body background of green, smiley guy on right side only
• container div floated left, 95% width, thick red border, 300px tall, white background, 15 pixel margin
• images div floated left, 100 pixel left margin
• the image tag - height and width of 200 px, 10px green border
• a:link 150% font size, arial, red
• a:visited 75% font size, arial, green
• a:active 200% font size (even though the active font will not have any effect right now)
• a:hover 160% font size, purpleish
• ul list type square

Link from the top of your main page and publish - the text should be Internal Styles 4 - cars

12/1-

Challenge:

Take the internal3.html from yesterday - make it work well and look as nice as you can, then save as:

1. famtree.html
2. fampics.html
3. famlinks.html

Then, follow this link (horizontal), or this link (vertical) - (more explanation here)

Take internal3.html from yesterday, and add in either a vertical navigation or horizontal navigation bar. The horizontal probably works better, but the choice is yours. You will need to adjust the styling so the colors work better, and remove some of what you did...you'll see...

Republish...

11/30 -

Right click and save this document (internal3.html), open in Notepad, then format using the internal styling in the head section.

body - light green background
div#container - background slightly darker green than the body - padding and margins of 5px
div#banner - background slightly lighter than the body - padding and margins of 5px
div#menu - padding and margins of 10px, background yellowish
div#familyhistory - padding and margins of 5px, thin black border, background same as banner
div#news - padding and margins of 5px, background same as banner
p.famhis - font color white, size 12px, arial
p.news - font color white, size 12px, arial
a:link - bold, size 14 font
a:visited - normal, size 12
a:hover - normal, size 14 font
a:active - bold, size 16 font
ul - choose the font and bullet type

Link from the top of your main page and publish - the text should be Internal Styles 3

11/28 -

Create new documents titled div1index.html, div1images.html, div1about.html

1. Create a header div that contains hyperlinks to 3 pages: div1index.html, div1images.html, and div1about.html

Set up the links with | separating the links

2. Create a div content that will contain the information for the page. Again, style simply so it is easy to read with the simple formatting options we have done to this point.

3. Create a footer div that is similar to the header div you made. You should also add in a copyright notice that this page was created by you. Make the links on one line, and the copyright notice on the next line.

Here is how to set up the content:

div1index: Welcome to Willie's Goat Milk Farm. We offer nothing but the best in goat's milk to our customers. We are now offering online sales of our milk shipped directly to your door. We hope you will enjoy perusing our site, and feel free to contact us with any questions.

div1images: find 3 images, size them so they are reasonable, and insert on this page.

div1about: Make up an email, mailing address, and directions to the farm.

**I will specifically be looking for an internal style sheet within each document. All 3 pages should look exactly the same, of course with different content.**

Have fun!

From your home page, make a link to the div1index.html page - date it for today and call it Willie's Goat Farm

11/18 -

Floating Divs and alignment on pages...

Float - think of this like floating on the page - where do you want it to appear in relation to other elements

Clear - sort of like a break - where do you want the next item (div) to go

11/17 -

Save these two files in there:

• internal1.html
• internal2.html

Notice that there are both ids (#) and classes (.)

Format both pages so they are exactly the same... but please think about why you should not have to format two pages separately...there has to be a better way...

Publish as Internal 1 & 2 - sasquatch with today's date

11/14 -

How to tell the difference between classes and ID's in CSS:

Classes refer to more than one element on a page, for example multiple headings or paragraphs. Use the . (period) to reference a class. Think of it this way: There are many periods (classes) in a day.

In stylesheet: p.2 {font-size:16px; border:double thick #003399}

In the document: <p class="2">

ID is unique usually to a single element on the page. The pound sign references an ID. Think of it this way: Your ID for you is unique. There is only one of you.

In stylesheet: div#container {background-color black; font-size:24px; }

In the document: <div id="container">

Try this - save this document, and...

• Set up the styles for the various classes so they are different.
• Also change the page background & set the page title.

11/10 -

Making some adjustments to yesterday's styles...

11/9 - Save this document, then format as follows:

• h1-h6 - set the styles as you wish, keeping in mind that h1 is biggest
• p - Arial, Times New Roman, size 14, greenish colored
• table - border style solid, border color red, background color light yellow
• body - page background light blue-ish
• a:link 150% font size, arial, red
• a:visited 75% font size, arial, green
• a:hover 160% font size, purpleish
• a:active 200% font size (even though the active font will not have any effect right now)
• ul - list type square
• img - yellow 5px border

Link from your home page, then publish as Internal Style Challenge #1

11/8 -

Setting up 'pseudo' classes -

Paste this into your page19.html document - in the head, between the <style type="text/css">

</style>

a:link {color:#FF0000;} /* unvisited link */

a:visited {color:#00FF00;} /* visited link */

a:hover {color:#FF00FF;} /* mouse over link */

a:active {color:#0000FF;} /* selected link */

a:link - http://www.w3schools.com/cssref/sel_link.asp

a:visited - http://www.w3schools.com/cssref/sel_visited.asp

a:hover - http://www.w3schools.com/cssref/sel_hover.asp

a:active - http://www.w3schools.com/cssref/sel_active.asp

Font links: http://www.w3schools.com/css/css_font.asp

11/4 -

Fun Friday Challenge...

Use this link: http://www.w3schools.com/css/css_examples.asp

• Place this image horizontally only along the top of page18.html
• Set the background so it does not scroll (fixed image)
• Make the background color a sort of reddish
• Change the font size for the paragraphs to 16, color green, with a background of black
• Set headings 1-3 as you wish... make them horrifically ugly if you wish

11/3 -

Internal styling (not inline!)

First, check out these color wheels...

Color Wheel - http://www.ficml.org/jemimap/style/color/wheel.html

Another color chart - http://www.quackit.com/css/css_color_codes.cfm

And one more... - http://www.w3schools.com/cssref/css_colornames.asp

Second:

Create a new page - page18.html

Put this in the head section:

<style type="text/css">

</style>

Third,

Read this css syntax link...

Good CSS link to have:

http://www.w3schools.com/css/css_examples.asp (really nice)

http://www.tizag.com/cssT/index.php (nice)

http://www.w3schools.com/css/css_syntax.asp

http://www.w3schools.com/css/default.asp

http://www.quackit.com/css/properties/

http://www.w3schools.com/css/tryit.asp?filename=trycss_default

10/31 -

Using inline frames

Assignment:

Create a new folder on the root - call it iframe

Place all of your files inside of your 'iframe' folder...Your main page should be saved as main.html

On your main.html page, create a 2 column table, 95% of the screen with a border size of 1

In the left column, place this bulleted list:

• New York
• South Dakota
• California
• Florida

Make each state name a hyperlink that goes to an inline frame in the right column.

Make the inline frame width 100%, and the height 500 pixels.

The content of the frame should be a picture of a famous landmark of the state, plus a fact or two about the state. 

You should have 6 html files when done, plus 4 pictures:

1. main.html
2. welcome.html (source of the inline frame)
3. ny.html
4. sd.html
5. ca.html
6. fl.html

When finished, link from your main page to this assignment- the text should say:  Inline frames and today's date

10/27 -

Table assignment #1

Create a new page called table-assignment1.html

On this page, make a 2 column, 4 row table that is 75% of the screen.

In the left column, put a picture.  In the right column, put a description of the picture that you put in the left column. 

All images must have alternate text, and be sized so they fit relatively well...

See my (bad) example

Then, when you are done, make a hyperlink from your main index page to this table-assignment page.
The text should say:  Table Assignment 1 (this should be your top link)

Upload all pages when done

TTT

10/27 -

column spanning

10/26 -

Semi-challenge:

Create a table similar to below, and fill in for your classes...

Link from your home page with today's date, publish as Teacher Table, TTT

10/24 - Working with tables...

10/20-

What makes a good web site? Please read these 4 links, then put together a simple page (goodwebsite.html).

Make a list of at least 5 of the ideas that were common to these sites that make up a good web site...

http://www.multcolib.org/homework/webeval.html

http://www.ehow.com/how_4847815_good-website-design.html

http://www.ehow.com/about_4805667_building-good-website.html

http://www.evancarmichael.com/Marketing/333/What-makes-a-good-website-and-the-common-mistakes-to-avoid.html

10/18 -

http://www.imdb.com/title/tt1054588/ - true story made into a movie about Ford stealing someone's idea

http://www.benedict.com/Digital/Digital.aspx - internet copyright issues

Save (then open) this document about copyrighted information...

10/17 - Save, then open this document - a little review, then some info on web safety...

10/12 -

Hyperlinks that go to a section on the same page - save this page

'Mailto' links:-(

A serious challenge... that I know you can do: - save me...

Your task:

• Set up name anchors for each of the type of cars
• Add a logo like I did for Porsche (I got the logos at the bottom of this page - http://www.cars.com/go/crp/index.jsp)
• Make the back to top button go back to the very top of the page
• Make the 'cars in my garage' h1
• Make the car types h2
• make the list of cars an unordered list

We have not yet gotten to the point of styling beyond this, so that's all you ned to do!

When done, link from your home page, call it Hyperlink-name anchor challenge

10/11 -

Finishing up image links, bulletts...

A 'bullett' to save...

10/7 -

Quiz on Basics - please save to your local folder, then open and complete.  This is closed notes.

10/6 - save the 'pals', but do not do anything else just yet...

resizing, file sizes...

Challenge - image hyperlinks... Put three images on your page...hyperlink them to another page.

Example: a picture of a tree, and then the tree is the link to the site for National Arbor Day...

10/5 -

Save my hot air balloon image...

alt text, hspace, vspace, align, sizing :-(

Pals...

10/3 -

Save both of these:

Eiffel Tower small

Eiffel Tower large

Then...

Save these pics...

9/30 - Hyperlink Quiz

Create a new document in your html folder called hyperlinkquiz1.html - set up the following links:

1. Mr. Amberger's favorite sites:
   www.gfwebclass.org, www.gfsd.org, high school site - (same window)

2. My Favorite Sites:
   Your 3 favorite web sites - (new window)

3. Weather:
   The weather for this area using www.weather.com- (new window)

4. 3 internal links to pages you already have

5. A link to your home page

You must use a numbered list and a bulletted list somewhere.

Add lines between each of the categories.

Make the heading of the category a <h1> tag.

Put your name in a comment code directly under the body tag.

When done, make a link from your home page with today's date, call it Hyperlink Quiz 1, and publish. This link must be at the very top of your home page.

TTT

9/28 -

Your job today...

Your most recent work should always be at top.

Use today's date, and complete:

Your index page must have links to all of your pagexx.html pages that we have worked on.

I would also like links back from those pages to your index.html page.

You should also have links to the note guide, list troubleshooting, and list quiz 1

Test, Test, Test...

9/23 -

Meta tags -

http://www.metatags.org/create_meta_tags

http://www.metatags.org/meta_tags_code_generator

Finish up the assignments from yesterday

9/22 -

Right click, save this file to your html folder... open in notepad and fix. When done, print the code and the page as it appears in the browser.

Then, create the following:

A new page (listquiz1.html), with at least the following:

• One heading tag
• an unordered list
• an ordered list
• Your name in a comment code

These should be brand new lists - no using previous files... for now.

Print the code, then the page as it appears in the browser.

9/19 - Lots of pages on the web...

Beginning coding...

9/13 - Read about Web servers - http://computer.howstuffworks.com/web-server.htm

9/9 - Note Guide - save to your local folder, then open

Welcome...

http://regionalhelpwanted.com/home/2.htm

http://web.timesunion.com/jobs/