Dreamweaver-Day 03: AP Elements & Text Formatting
- 1. 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.
- 2. 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.
- 3. 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
- 4. In this Powerpoint we’re going to go over AP Elements But what is an AP Element? Excellent question! I should have expected that coming from such a smart individual like yourself. Allow me to explain…
- 5. 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!
- 6. 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
- 7. 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.
- 8. 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
- 9. And paste it into you AP Element. Now before we continue, lets go over some of the properties for an AP Element…
- 10. Here are some of the properties you will be working with… 1 2 3 4 5 1. Dimensions of your AP Element: Length, Width, Height, and distance from the top of your page 2. 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 Photoshop 3. Visibility: This determines whether your element is visible in your web browser 4. Background: You can add background image and/or color for your element 5. 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 visible 2. Hidden: hides what won’t fit 3. Scroll: adds scroll bars so you can scroll to see all the content
- 11. Now lets take a moment and format all this new text
- 12. 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.
- 13. Hmmm… Now would be a good time to SAVE ALL.
- 14. 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 and new products.png files into your images file
- 15. 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.
- 16. 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
- 17. 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.
- 18. Click on your new products image, and create an oval hotspot around it. Then link it to your products page.
- 19. 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.