Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
A web site is just a web site unless it’s designed with a unique style. Creating a CSS Style Guide: Hands-On Training highlights the importance of a CSS style guide, which serves as an interface for the design team and a communication tool for the client. Laurie Burruss calls on her background as director of digital media at Pasadena City College and takes an informative, real–world approach to this topic. She shows how Dreamweaver CS4 can be used to develop a coherent site–wide emotion that boosts brand identity. The course culminates with building a working web style guide for professional use. Exercise files and a downloadable PDF quiz accompany the course.
Download the exercise files from the Exercise Files tab.
Continuing on with our semantic markup and our structural markup, let's scroll down the page and insert a table. In the old days of web design, and I mean two or three years ago, tables were often used for layout, but now the new web standard is to use your structural markup as the layout method and to do your styling with style sheets. Tables should only be used for data. This line, 'This is a table,' is where we want to insert our table. So put your I-beam at the end of this line and hit your Return key. We are going to use that Common toolbar. Up at the top, if you scan across these icons, you will see one that actually looks like a table. That's the one we want to use.
Click on that icon, this is the Table dialog box, and this is the way it opens by default. We want to create a table that has two rows, three columns. We will leave that as it is. But we want a table that will stretch to be the width of whatever our user's browser window is. The way we can do that is by typing in 100, and instead of using pixels, which is a fixed width, we will use percent. That will make it stretch or be a relative size, according to what our user's browser is open to.
Border thickness we will leave on as 1, so you can see the actual structure of the table. For Cell padding, we will put 2, and Cell spacing, we will put 2. I would like you to use the special formatted table, which would be the Top row header. If we use this table, the top row will be bold and centered, and the secondary rows will be left aligned and regular weight. Let's click on the OK button. There it goes. It's inserted right in. You could see the table has been inserted but no content.
I have already typed the lines I want you to use inside the table, so we don't have to spend time typing. Let's select this first line and do a Command+X or Cut or Ctrl+X or Cut and Paste it into the first cell. Put your I-beam in the second cell, and this is very disconcerting to first time users of tables, that these tables stretch and collapse according to what content is put inside of them. So this is what we call a collapse. Continue to paste; don't be daunted by this. Put your I-beam in the last cell and paste.
So it's Column 1, Row 1, but this should be changed to Column 2, and then finally Column 3. Let's grab our second line of text, Column 2, Row 2, do a Command+X or Ctrl+X and Cut, Paste it in, again, and again, and let's clean up some of this white space, put our I-beam in front of your name, and hit our Delete key. There we go.
One more thing. The second row doesn't read quite right. This is Column 1, Row 2, Column 2, Row 2, and Column 3, Row 2. So now we have created our table. The table tag is very complex. It has, as I said, a parent tag and then a lot of nested tags. So it helps to take a look at that. You can insert your I-beam anywhere in a table, then go down to your Tag Inspector, and you will see that there is the table tag.
If you select the table tag in the Tag Inspector, this is the fasted, easiest, and safest way to select your entire table. If I click that I-beam into the first cell, top row, notice two tags appear. One is th, which is table header. If I select that in the Tag Inspector, it selects just that cell. If I select tr, which is table row, that selects the entire top row. Again, these are the super user, fast and safe ways to select elements inside of your table.
Let's try that in the second row. I can click anywhere inside that second row. Notice this one comes up as td or table data. If I select td, that selects just that cell. If I select in another cell, it is also called a table data, and I can select just that cell. But if I want to select the entire row, the second row, I'll click on tr. It's a great way to use tables and finally, again, just to remind you to select the entire table, click on table.
This is the way I work with tables. I don't try to get in there and do all that dragging and stuff that everybody else does, it's so easy to get the wrong thing. The only time I do the dragging is if I want to do an entire column and then I just do a quick drag through. If you stop and slow down, it gets screwed up. So just remember, click, drag, let go. That's the way to use the table. Now, I want to go to Code View and we will go not to Split View, but the entire window, so you can see this easily. Because I selected the table in Design View before we came into Code View, the entire table is selected. When we have a parent tag with many tags inside of that, that is called nesting and in this case we have two nests. The parent tag is the table tag and nested inside of the table tag are two rows. So this is table row one and this is table row two.
Inside of table row one, we have three table headings, and inside of table row two, we have three table data cells. This concept is called nesting. So the td tag lives inside of the tr that lives inside of the table. It sounds a little bit like those stories you used to learn when you were four or five. Fortunately for us, inside of Dreamweaver the Code View visually shows us that nesting is occurring. So whenever you see this sort of curving, or when you see the indented tags, you can pretty much guess this is nesting, and that you have a child tag inside of another tag, inside of another tag.
Let's go back to Design View. To deselect your table, click anywhere outside of the table document. The last thing I want to show you is that inside the Properties Inspector. Remember the Properties Inspector is our new best friend. It's going to contextually change according to what we have selected, so let's put our I-beam inside the table, and let's select the table tag using the Tag Inspector. All of that information about the table now displays down here. It shows us that it is 2 Rows, 3 Columns. It's 100%. Now, we might want to change that width, maybe we only want it to be 50%. Let's try that out. Don't be afraid to use your Properties Inspector and to change your attributes, it's a way to try designing and try ideas out, and to feel comfortable and like you have some control over what you are doing. There we go, 50%.
I can try 80%. I usually choose 90%. I don't like my tables to be going from edge to edge, so 90% sets it just inside the browser window for the user. It looks good. We can change the cell padding, the cell spacing, the border, alignment, all kinds of things. For just a moment let's go back to Code View. Where did these same attributes appear in Code View? It's really important to see this. These will all be table attributes for the table tag; the width, the border, the cell spacing, and the cell padding will all appear as attributes of the table tag. It's easy to find them and you can change them quickly. It's actually as you get used to Dreamweaver easier to change them inside of the Code View than it is down inside of the Properties Inspector.
Let's return to Design View and deselect the table by clicking outside and let's get an overall view of what we have done. Our formatting and out semantic markup is looking very, very good. We are almost done. It's time to add some links.
There are currently no FAQs about Creating a CSS Style Guide: Hands-On Training.
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.