DREAMWEAVER CS4 KEY CODE
Make sure that you have also deleted the header tags by looking at the code from inside code view. Ok, now highlight all of the text in #sidebar 1 from within design view and delete it. That’s a good sign because now our rollover images will not be pushed away from the edge of the div tag and protrude inside the #mainContent div tag beside it. When you click apply you will find that the text will then be shunted against the top left wall of the div tag. So zero out all of the padding and while you are there you can also zero out all of the margins too. There is some default padding inside the css rule for #sidebar 1 because it has text inside of it which is being pushed away from the edge of the div tag. You may be putting in 20 buttons so you should just let it expand as you add the buttons for a nice snug fit. I find that 165px width is just right for me!ĭo not adjust the height of the div tag for #sidebar 1 because your Dreamweaver template is already set to auto extend down the page of the template. Then click on the BOX category and I’m going to adjust the width of #sidebar 1 to 165px so you should adjust the #sidebar 1 div tag to be whatever width your buttons are. ThrColFixHdr #sidebar 1 and double click on it to bring up the css rule definition dialogue box. Now we know what we are editing, look inside the CSS styles panel for a css rule definition called:
So if you are ever not sure of where you are inside of Dreamweaver remember to look inside the tag inspector and the tag inspector will help you navigate smoothly through your Dreamweaver template. ThrColFixHdr template which you have created. This code indicates that you are inside and that is inside and the container is inside the body of the. There is a line of code there and from the tag inspector we can make sure we are in exactly the right place when we go to edit any of the attributes contained within the Dreamweaver template: Now have a look at the tag inspector which is just above the properties inspector. Now, with you template loaded click on the side bar 1 div tag inside ‘design view’ So to easily remember my buttons I have named them: I am inserting 5 rollover buttons and they are:
DREAMWEAVER CS4 KEY WINDOWS
The dimensions for each button are 165px (Pixels) Width and 32px Height or as windows will show it: ‘165 x 32.‘ It is important to know the image dimensions as we are going to be adjusting our CSS styles to fit the dimensions of the image buttons. We will be positioning our rollover images inside Sidebar 1 which is on the left side of the template under the word header. If you have them in a folder just click and drag the folder into your site root. The OVER image is ‘swapped in’ when the end users mouse rolls over the image.įirst step is to make sure the images are in a folder or in your site directory so that you can access them from Dreamweaver. The UP image is how the button will look when it first appears on your website. The rollover button images consist of an UP image and an OVER image. The rollover buttons were created in Adobe Fireworks but you can use whatever graphics editor you have, even paint brush.
The template is a three column fixed header and footer and is a Dreamweaver template available by going to FILE>NEW and selecting the blank HTML template option and scroll down until you find it. Ok, we’ll be inserting rollover images into our Dreamweaver template.
0 kommentar(er)
