Subtitles of the Movie

In the previous movie I demonstrated several techniques and tools for creating layout mockups, practice layouts and design ideas for laying out your Dreamweaver pages. In this movie, we'll take those layout mockups and insert them into Dreamweaver and start laying out our pages in Dreamweaver by drawing out AP DIVs. This is the mockup that I've worked up for our project so you're welcome to go with this design or with your own design following along using my graphics or perhaps the best solution is to go ahead and go through the project tutorials once using my graphics and all the graphics that I've provided in the Project folder and once you get everything looking the way that this website looks, this is actually the completed website here in Live View, it'll look like this when we're all done, once you get this looking correctly then you can go ahead and run through the project movies again using your graphics or your mockups that you've created from either a template generator or from a graphics editor or perhaps you've copied an existing website that you like. Let's start by creating a new HTML file and then immediately saving this file as good form and as good practice to your Local Site Root Folder that you've defined previously in our project. In this case, it's going to be project files. Let's call this layout planning traceImage. Let's provide an extension here, .htm. Dreamweaver will do it for you, but better to get in the habit of adding that extension. I'm going to leave out the l, don't need it. Click Save. Overwrite my existing file and now from the View Menu choose Tracing Image, Load. Go ahead and go into the Work Files folder. You should probably have a Work Files folder outside of your project files folder where you can start saving things but right now you can go ahead and look inside my project files and Work Files. There is the mockup that I've prepared for us. Click OK to insert that in there. That brings up the Page Properties dialog, Tracing Image Category. Let's take down my transparency. There's the wireframe.jpg file that we'll be working together with. Click OK and there is the file. Notice that it's much larger than my view can show here but it's all in there. Let's open this up so we can see it. It has a very large background that I've provided for you so we'll be going through the stages of adding the graphics and the text in the next several project movies but for now good practice will be to go ahead and use the Insert Panel to draw out AP DIVs on all the sections here to practice using that method for laying out Dreamweaver pages. Let's go ahead and move this over here so I can see my Insert Panel right there. Draw AP DIV and proceed to draw out all of these DIV Containers here that you can see. The errors that you'll make here will probably be not including enough containers. There's quite a number of containers that you're going to need. You'll notice that some of these divisions have rounded edges. See that one has rounded edges. Others have straight edges. There's a rounded edge. I'll be showing you later how to convert these AP DIVs into DIV Tags that then have these rounded edges. The rounded edges will work on most browsers but not all, but go ahead for now and lay out all of your sections to get some practice with the AP DIV Tool. Try to get these as accurate as you can, traced out over each section. Again, the most likely errors that you'll run into is you won't have enough of these DIVs laid out here, but you can always go back later as you move through more of the project movies and continue adding the divs that you forgot or left behind. Remember also that you can go back to the View, Tracing Image, turn off the Tracing Image as well as adjust the position of the image. To do that, actually we need to first make the Tracing Image visible, then we can go in and adjust the position using the Adjust Tracing Image Position Tool. We have a very broad background back there which is going to make this harder to move this image left or up. You can also, remember, choose Modify Page Properties and the Tracing Image adjustments are here in the Tracing Image Category and I can, notice, adjust the Opacity of the Tracing Image, make it very, very transparent or more opaque as needed, right here. So again, practice and review what I've covered in the course so far regarding using Tracing Images in Dreamweaver CS5. Let's actually go back and adjust this opacity way up so we can work with colors here. Don't forget to color these DIVs and the way you'll do that is with the Properties Inspector. Here in the Bg Color Box you can go ahead and get the Eyedropper and color. We'll get an approximate color for these AP DIVs. The idea being just to get a sense of the mockup here. We'll be refining this as we go, but I'm adding in all the colors to get a sense of our Color Palette, is it going to work, do we need to refine the color palette and so on. So you can see that it's starting to look much better. Once you're satisfied with your layout and you feel comfortable with all the tools that I've demonstrated thus far, go ahead and Save your file. Give it a descriptive name or copy my name, layout planning traceImage.htm, close the document and then move on to the next movie.