Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have the images in place and all of the assets we need for our template, let's come back over to Dreamweaver. Start in here, on each project I usually make a decision whether I'm going to build the HTML or the CSS first. Referring back to our sketch, this sort of informs the CSS rules and the dimensions of the objects we need to create in our CSS. So what I'm going to do here is I'm actually going to divide this. We're going to create our CSS rules first, leave them blank, and then we're going to go into HTML and build the HTML structure, so that we get all the nesting properly in place with all of the right classes.
So to start with my HTML file open over here in the CSS panel in Dreamweaver, let's come down here and click on New CSS Rule. All the rules we're going to create are going to be classes, and let's start off creating one called page_container. We'll click OK. I'm going to leave all of this blank for moment. I'm going to create another new rule. This one is going to be called .gallery-credit. Click OK.
New rule, this one is going to be called .gallery_type. Click OK. Create another rule. This one is going to be called .gallery_top. This one is actually going to be the top of the rounded-corner box, and we're going to use the Photoshop slice in this one. Choose OK. gallery_content, choose OK.
New rule called .gallery_thumbnails. Click OK. New rule called .gallery_preview. Choose OK. New rule called .gallery_contact. Click OK. New rule called .gallery_caption. Click OK.
Another one called .gallery_bottom. Choose OK. Then the last one we're going to create, .clear_both. Choose OK, and in this one, we'll go ahead and define the properties here. Let's come down to Box properties, come down to Clear, and select both. This is going to be a class that we're going to use to clear out different float objects that we're going to be assigning to our layout.
The other thing I like to set inside the Type settings is the line height and set this to a height of 1 pixel. Then click OK. Now this gives us all of the CSS rules we're going to need. If I click over to the CSS rules here, we can see all of these are empty except for clear_both. But actually having these rules defined in the CSS here inside of Dreamweaver, in HTML Code view we can actually access these, and Dreamweaver will give us some code hinting and quick shortcuts to assign these into the proper nested structure for the HTML.
Let's come back to our index file. Let's choose File > Save All just to make sure everything saved, and in the next movie we'll create our HTML file based on these CSS rules.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99368 Viewers
56 Video lessons · 112625 Viewers
71 Video lessons · 81446 Viewers
131 Video lessons · 39096 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.