Transcript
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!
top related