1. 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
3. • First locate the
www.sector9.com at
the bottom of your text.
When you find it
highlight it with your
cursor
• NowWe’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
4. 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
5. 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 theTarget window on your Properties Panel
(its circled in purple above), the next slide will go over
those options
6. These are you options
for theTarget 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 theTarget property for this link to _blank
This way when people log on to the real Sector 9Website it will be opened in a new
window
7. 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
8. Now Save your work and Preview your page, It
should look like this…
9. 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.
10. ONLY 3 Folders
A MyWebsites folder
Inside that you should have
a yourname_practicesite folder
And inside that you should have
an images folder
You should not have any other folders associated with your site
11. ONLY 6 Pages
You should have 6 pages named…
Index.html
Products.html
Sale.html
Downloads.html
Events.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!
12. 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 working
Navbar with hotspots
13. 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
14. 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
15. Thanks guys!
Now let’s get started with our Product
page
Go ahead and close index.html and open
up products.html
16. In products.html draw an AP Element on top of your textpad.png image
Then name the AP Element producttable (remember, no spaces)
17. 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 button
for inserting a
table
18. 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
19. 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
20. 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!
21. Before we continue, you will need to grab the
following 7 .png images from my folder in the
Dreamweaver Practice folder
1. Superfish.png
2. Luke.png
3. California grown.png
4. Helmet.png
5. Wheels.png
6. Bearings.png
7. LONG text pad.png
22. 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.
23. 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
27. Now would definitely
be a good time to
SAVE ALL
Once you save all, close
products.html but leave
Dreamweaver open
28. Create a new html and then
choose SAVE.
Save it as superfish.html
29. 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 GripTape, 1.5" Bolt Pack, 9/16 Flat Risers
Copy & Paste this text for your page
30. Now set your table’s
border to ZERO and
SAVE ALL
Then open
products.html
31. 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
32. 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
33. 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!
