Open Dreamweaver and locate your site in the File Panel.

Remember, the File Panel should be located in the bottom right corner or Dreamweaver.

WARNING: This PowerPoint does not cover all the updated Dreamweaver CS4 software

changes. It is strongly advised to complete this PowerPoint as a class, with Mr.

Prindiville’s supervision.

By now you should have created 6 webpages for your site, and you should have created hotspots for the Navbars on each page. If you need to catch up, please do so before continuing with this powerpoint.

You need to do this for each of those 6 pages, not just once.

Once you’re caught up and ready to go, make sure you are working on your home page (index.html)

You can easily see which page your working by checking the tab at the top of the document window

If you are not working on your home page, double click index.html in the File Panel to open it up

Notice the index.html is the tab you working on

In this Powerpoint we’re going to go over

AP ElementsBut what is an AP Element?

Excellent question!I should have expected that coming from such a smart individual like yourself. Allow me to explain…

AP Element stands for Absolute Position Element.

These are elements that can be put anywhere you want, without using things like tables or frames.

They have a fixed or Absolute Position, and work as containers for things like text and/or images

Think of it as an element that is Positioned Absolutely where you want it.

Ah yes, of Course!It makes perfect sense now!

To use an AP Element, first you must draw one first. To do this you need to select the correct tool from the

When you are in the Layout Tab, click here to Draw an AP Element

Now click and drag open a box over your text pad

If you open up the CSS menu (circled in red) and select the AP Elements tab you can see you have a new AP element

We’ll use this more later.

Now please copy all of the text in the yellow box below…

Welcome to Sector 9 Skateboards

This site is dedicated to bringing you only the best quality skateboards. Most of our skateboards are made from maple veneers which have been glued and pressed together to form the decks. That's the simple answer. The complicated answer is that we use a wide variety of materials to make a wide verity of skateboards. So be sure to check out all of our products to see what will best fits your needs.

Oh one more thing…

This is not the official Sector 9 webpage, and we are not actually selling Sector 9 products. This is an educational site helping students learn the basics of building a website. This site should not be uploaded to the web. However, if by some act of wizardry it does show up on the web, please do not sue. For actual Sector 9 information and products please visit their official website at www.sector9.com

Thank you

And paste it into you AP Element.

Now before we continue, lets go over some of the properties for an AP Element…

Here are some of the properties you will be working with…

12

34

51. Dimensions of your AP Element: Length, Width, Height, and distance from the

top of your page2. Z-Index: This is the stacking order of your elements. A Z-Index of 1 will be on

the bottom, 2 will be on top of 1, and so on. Think of it like layers in Photoshop3. Visibility: This determines whether your element is visible in your web browser4. Background: You can add background image and/or color for your element5. Overflow: If you create an AP Element and then put something that will not fit

inside this determines how it handles it.1. Visible: Makes the element as big as it needs to be to make everything

visible2. Hidden: hides what won’t fit3. Scroll: adds scroll bars so you can scroll to see all the content

Now lets take a moment and format all this new text

Please format the text as follows…

1. The entire text should have Arial font (if a window pops up asking you to create a new CSS rule, that’s ok. I would name the selector arial and click ok)

2. There should be a space between all headings and paragraphs and 2 space separating the first paragraph and the 2nd heading (“oh one more thing”)

3. “Welcome to Sector 9 Skateboards” should be sized medium and bold

4. “Oh one more thing…” should be set to small, bold, and italic

5. The body text should be sized small

If your text doesn’t look similar to the picture above, you need to re-format your text.

Hmmm…Now would be a good time to SAVE ALL.

You bet it’s a good time to SAVE ALL.

Now minimize Dreamweaver and access my folder

In the Dreamweaver Practice folder copy and paste the footer.png andnew products.png files into your images file

1. Draw a New AP element below the text.

2. Then Drag and drop the footer.png file into the AP Element

If it don’t look like this, you messed up. No worries, just try it again.

Then do the same thing with the new products.png file as shown below

Notice this AP Element is on top of the AP Element with the text.

If you go back to your CSS Panel and open the AP Element Tab you can easily see this

This is your CSS Panel(usually located at the top right of Dreamweaver)

These are the Z-Indexes for each shape (we mentioned these earlier)

Notice the Main Text has a Z-Index of 1. These means it will be on the bottom. If for any reason you need to change the Z-Index you can double click and change it here, or change it in the properties menu (refer to slide 10 of this Powerpoint). Please leave the Z-Indexes as they pictured above

These are your AP Elements

So you don’t get confused, double click on them and rename them as shown here.

Click on your new products image, and create an oval hotspot around it.Then link it to your products page.

Congratulations!

That’s all for today. Make sure you save all and preview your site, so you can see what it looks like so far.