Learn How To Create a Tracing Image in Dreamweaver
Tags:adobe creative suite 2,adobe dreamweaver,adobe fireworks,adobe flash 8 professional,adobe illustrator,adobe photoshop,adobe web bundle,cascading style sheets,cmyk,html,jpeg,live,mac,macromedia studio 8,microsoft windows,rgb,total training
Grab video code:
Now one more thing that can be really handy to set up is that tracing reference that we built in the very end of our last lesson. Down here in the property window, we have access to page properties and I am going to go ahead and click that, and you will see that one of the categories we have here is tracing image.
That is a really neat Dreamweaver feature. It allows us to pull that image up and use it as a reference while we are building the rest of our content. This is not going to become part of our publish page. It is only there for us to be able to see very quickly what should be in the content areas and then be able to build it using the Dreamweaver tools.
Now I will just browse out to find that file. We saved it in to the images folder and there it is right at the end. Remember this is a reference of what our completed webpage should look like and by putting it in as a tracing image, let me just move this out of the way here real quickly and I will click apply. You can see that it is loaded right into the table almost as a background element and we can see exactly where our content is supposed to go.
Now just so I do not confuse this with real elements on my page, I am going to use the transparency setting to knock that down let say to about 30, and we will click apply again. So now I have a ghosted version. This is a great feature because we will not be worrying about what the alignment was, and we can even see settings like capitalization versus normal text for some of our contents sections.
I will click okay and we will leave that in. Now we can start making some changes to our webpage like for instance I could take the home and the alien stuff up here, instead of it being pushed to the upper right hand corner of the table as it is right now. We know that it is going to need to be centered both horizontally and vertically within the table cell.
We will just make that quick change on our table cell properties down here. I will change my horizontal alignment to center, and we will do the same thing for vertical. We will pick out middle. Now while I am here I might as well also drop a space in between these two words. That was really supposed to be alien stuff, and we just drop in place holder content where we were building our Fireworks page. So obviously we are free to make any changes we need to, to complete the sections of the table that had been left for HTML content.
One of the thing I might add while I am here is we could set the background of this table element to the same grey that we are using for the rest of our page. I will just use the eyedropper tool and pick it back from the background of the image next to it. Now I also might take the time to upgrade the place holders in our main content window especially since we know we are going to be having a title, and a subtitle, followed by some content.
I will also set up standard HTML formats for these. I am going to choose the title one by just simply clicking into the title text and I will go down to my properties and change the format from paragraph to heading one. And we will do the same thing on subtitle. I will click right in to the subtitle text and change that to heading two.
Now obviously these are not going to be the styles we are going to use. We are going to update those as we continue with our document, but as I said, I just wanted to improve that place holders so we knew what was coming into these sections. I will just copy content and subtitle by selecting them and I will use Ctrl+C and of course that is Command C on the Mac. And Ctrl+V to paste it and that way we will be using the same formats for the subtitle and the content over on the left content section as well.