In this presentation we will work on your Product page, but first let’s quickly finish up your home page (index.html)

Open Dreamweaver and open up your index.html

Your homepage is almost done, so lets finish it up real quick

• First locate the www.sector9.com at the bottom of your text. When you find it highlight it with your cursor

• Now We’re going to link this text to the actual Sector 9 website. However www.sector9.com is not in our website, so we can’t do it as easily as we would link to other pages within our site

When linking to a page inside your website (internal link) you must use a Relative Path

For example: to link to my products page all you need to type is products.html

When linking to a page outside of my website (external link) you must use an Absolute Path

For example: to link to www.sector9.com you must type http://www.sector9.com

Now make sure www.sector9.com is still selected and in its link property, type http://www.sector9.com.

(Make sure to use the absolute path, don’t just type sector9.com)

Now look at the Target window on your Properties Panel (its circled in purple above), the next slide will go over those options

These are you options for the Target property

For right now, we’re only going to be concerned with _blank and _self

_blank:When this option is chosen the link will open in a new window when clicked

_self:When this option is chosen the link will open in the same window as your current page

Please set the Target property for this link to _blankThis way when people log on to the real Sector 9 Website it will be opened in a new window

You can see if you have the table selected because it will say table, showing you that these are the properties for a table

Then change your border option to ZERO. This will make the border invisible

Now click your table to select it and it’s properties will appear in the Property Panel

Now Save your work and Preview your page, It should look like this…

Sweet!You’re done with your homepage.

Now, before we move on to your Products page, let’s review to make sure you’re caught up with everything.

ONLY 3 Folders

A My Websites folder

Inside that you should havea yourname_practicesite folder

And inside that you should have an images folder

You should not have any other folders associated with your site

ONLY 6 Pages

You should have 6 pages named…Index.html

Products.htmlSale.html

Downloads.htmlEvents.html

Contact.html

You should not have any other pages associated with your site

These pages should be in your practice site folder. NOT in any other folders!

EACH of your six pages should look like this (except for your index.html which should look completed)

EACH of your 6 pages should have a workingNavbar with hotspots

If your site has everything it should then you are ready to continue.

Yay!I read the Powerpoints, followed directions, and didn’t screw around in class.

I’m caught up and ready to go

Being on task is the Best!

Who knew learning Web Design was as easy as paying attention and reading the Powerpoints

We read all the Powerpoints too!

Our sites look great, and we understand so much about Web Design

Thanks guys!

Now let’s get started with our Product page

Go ahead and close index.html and open up products.html

In products.html draw an AP Element on top of your textpad.png image

Then name the AP Element producttable (remember, no spaces)

Then click inside the AP Element and insert a table with 3 rows & 2 columns

*Your table should be INSIDE your AP Element

Remember the buttonfor inserting a table

Oops!

I changed my mind…

Make your table with 6 rows instead of 3

Just click your table and in the Properties Panel, change the Rows from 3 to 6

Wow!

That was easy!Thanks Hanna, But don’t interrupt me

Duh Hanna,

Everyone knows it’s Disrespectful to talk while Mr. Prindiville is trying to teach

Sorry Mr. P.

Your class is just so FUN!

It’s ok Hanna, Web Design gets me excited too.Now let’s get back on task!

Before we continue, you will need to grab the following 7 .png images from my folder in the Dreamweaver Practice folder

1. Superfish.png2. Luke.png3. California grown.png4. Helmet.png5. Wheels.png6. Bearings.png7. LONG text pad.png

Now place each of the .png files in the cells of rows 1, 3, and 5

Rows 2, 4, and 6 will be saved for product names

PLEASE only put ONE image per cell

DO NOT use the LONG text pad.png (we use that in a sec)

You’ll notice that your images extend farther than the text pad image and it looks sloppy.

Don’t worry we’ll fix that in the next slide.

Click on your text pad.png image

In the Property Panel, under Src, grab the whippet and drag it to LONG text pad.png

grab the whippet and drag it to LONG text pad.png

Your image should now change to LONG text pad.png

Now in rows 2,4, and 6 add the product name below each product. Make your font Verdana & your size Small

Then please CENTER everything in the cells

Now would definitely be a good time to SAVE ALL

Once you save all, close products.html but leave Dreamweaver open

Create a new html and then choose SAVE.

Save it as superfish.html

Make your superfish.html look like this By using what you’ve learned so far

You will need to…•Change the background color

•Insert a table

•Add the superfish.png image

•Add & format the text

Superfish - 7 ply maple

Deck 37.5" L x 9.5" W Trucks 9" Gullwing Mission Trucks Wheels 61mm/78a Nineball Wheels Bearings Abec 5 Greaseball Bearings Hardware Clear Grip Tape, 1.5" Bolt Pack, 9/16 Flat Risers

Copy & Paste this text for your page

Now set your table’s border to ZERO and SAVE ALL

Then open products.html

In case you didn’t know,

All your open projects show up at the top of your document window

Whatever tab is open is the page you are working on

If you want to work on a different page, just click the tab

Now in products.html…

Click the superfish image and in the Properties Panel, link the superfish.png image to your superfish.html page. THEN SET THE TARGET PROPERTY TO _blank

Once you’ve successfully linked your image, select each table on the products page and set the borders to ZERO

Then SAVE ALL

Then preview your page, and raise your hand for Mr. Prindiville. He needs to see how your page looks, and grade you on what you’ve done so far.

Hooray!

We love grades!