This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
(paragraph) tag, to create a box around your content. Then you use CSS to style each box, using attributes to control the position and alignment of each box, and specify such settings as margins, padding, and borders. Although you can use any XHTML tag as part of your page layout, the tag is used most often to create the boxes for main sections of a page, such as the banner area, main content area, sidebars, and footer of a page. Think of as a generic container — designed to hold text, images, or other content — or to make a division on the page, to separate one section of content from another. Unlike other HTML tags, has no inherent formatting features. Unless CSS is applied to a tag, it can seem invisible on a page, yet the tag has a powerful purpose because any content surrounded by opening and closing tags becomes an object (or a box) that can be formatted with CSS. I used the box model to create all the templates in this book. As a result, to change the size or positioning of a section of a Web page in one of the templates featured in Chapters 7–9, you need to edit the corresponding style. When you create or edit a style that corresponds to a tag ID, you can specify properties such as alignment, border, margin, height, and width to control how the tag is displayed on the page. In the template chapters, you find step-by-step instructions for adding your own images and text to these templates, and for making minor changes to the styles of the page. To edit the styles that control the positioning, width, and other display options of the tags that make up these pages layouts, read Chapter 6, where you find instructions for editing a CSS layout. Each in the page templates has an ID, which corresponds to a style in the style sheet. The ID appears in the HTML within the tag brackets so that the browser knows which style to use to control the formatting of that when it displays the page. For example, all the templates have a with the ID container that controls the overall size of the design area. If you look at the code, the looks like this: In the corresponding style sheet, which you can easily access through the CSS Panel in Dreamweaver, you’ll find a style called #container, which controls the width and other settings for that . If this all seems a bit confusing, don’t
Part I: Laying the Groundwork worry too much at this stage. When you put all this theory into practice with the templates in Chapters 7–9, it makes a lot more sense, and you find more detailed instructions for editing CSS layouts in Chapter 6. To learn more about CSS, you can find many more lessons on how to create, define, and edit styles in my book Dreamweaver CS4 For Dummies (Wiley).
Understanding style selectors One of the first things you need to understand when you create new styles is which selector to use for which job. The selector determines the kind of style you will create. Each selector option has different naming restrictions and purposes. If you’re completely new to working with styles, this may not make much sense yet, but this is a fundamental part of work with styles, and I encourage you to read through all these descriptions of selectors so that you can appreciate your options before you move on.
Don’t feel you have to memorize all this. Instead, consider folding down the corner on this page so you can refer to this list of selectors when you create and edit styles later.
Class selectors The class selector is the most versatile selector option. Class styles can be used to format any element (from text to images to multimedia), and they can be used as many times as you like on any page in a Web site. Class style names always begin with a period, and you can create class styles with any name as long as you don’t use spaces or special characters. Note: Hyphens and dashes are okay. Thus, you could create a style called caption for the text that appears before your pictures. .caption Dreamweaver helps you with the opening period (or a dot). If you choose class as the selector type and forget to include a dot at the beginning of the name, Dreamweaver adds one for you. Note: Don’t include any space between the dot and the style name, though. One other thing that can make styles confusing is that when you apply a class style to text or another element, the dot doesn’t appear in the name when it’s added to your HTML code. Thus, if you applied the .caption style to a paragraph tag to format the text under an image, it would look like this:
(Paragraph) tag in the code, which creates a line break followed by a blank line. If you want a line break without the extra blank line, hold down the Shift key and press Enter or Return; Dreamweaver inserts the
tag into the code, to create a single line break. If you want to add a lot of space, press Enter or Return multiple times to have
. These Open and Close paragraph tags have a nonbreaking space in the middle. You can also add space to a page by using margins or padding settings in CSS styles. You find instructions for working with these style options in the section, “Creating New Pages in Dreamweaver,” earlier in this chapter. Note that you can add as much space as you like to HTML code without changing the page design. If you’re working in Code view in Dreamweaver, you can add space within the code by pressing Enter or Return without affecting the way the page appears in a Web browser.