adobe dreamweaver cs5 on demand part 33 ppsx

ptg 204 Chapter 8 You can use a tracing image as a guide to create a page design in Dreamweaver. For example, you can use Adobe Photoshop to create an exact replica of what you want your Web page to look like (i.e. head- ings, body text areas, navigation, etc), and then use that image as a tracing image to help design the actual Web page. A tracing image is a JPEG, GIF, or PNG formatted image that appears in the background of the Document window. In addition, a tracing image is visible only in Dreamweaver, not visible when you view the page in a browser. When the tracing image is visible, the page's real background image and color are not visible in the Document window; however, the back- ground image and color is visible when the page is viewed in a browser. Using a Tracing Image Insert a Tracing Image Open a Web page that you want to insert the tracing image. Click the View menu, point to Tracing Image, and then click Load. Navigate to the image you want to use, select it, and then click OK. Drag the Transparency slider to adjust the transparency of the tracing image. NOTE If the chosen graphic file is not located in the current Site, Dreamweaver prompts you to save a copy within the active Site folder (recommended). Click OK. The tracing image now appears in the background of the current Web document. 5 4 3 2 1 3 5 4 From the Library of Wow! eBook ptg Chapter 8 Working with Web Page Tables 205 Modify a Tracing Image Click the View menu, and then point to Tracing Image. Select from the following options: ◆ Show. Select to show or hide the tracing image. ◆ Align With Selection. Select an element in the document window, and then use this option to align the upper-left corner of the tracing image with the upper left corner of the selected element (i.e. a table cell). ◆ Adjust Position. Select to open a dialog box where you can precisely specify the position of the tracing image by entering coordinate values in the X and Y text boxes. ◆ Reset Position. Select to return the tracing image to its default position, the upper-left corner of the Web document. 2 1 1 2 Tracing image aligned to selec tion From the Library of Wow! eBook ptg 206 Chapter 8 A nested table is a table inside a cell of another table. You can format a nested table as you would any other table; however, its width is limited by the width of the cell in which it appears. The cells inside a nested table are isolated from changes made to the outer table; for example, when you change the size of a row or column in the outer table, the cells in the inner table don't change size. The question arises as to why you might want to do something like this, and there are several answers to that. You might want to use a table to add design elements to a page, and at the same time use one of the cells for tabular data, or you have a picture and a related caption and you want them to remain stationary in relation to one another while text on the page flows according to the size of the browser window. In older browsers (pre 5.0) creating nested tables can slow down the load of the page. In Web design one of the things we have to do is balance page content to load speed. Make sure you keep things in balance. Creating a Nested Table Nest a Table in Standard Mode Open the Web page containing a table, or create a new table. Click the Design button to display the page in Design mode. Click the View menu, point to Table Mode, and then click Standard Mode. Select the cell you want to insert the nested table. Click the Insert menu, and then click Table. Choose the properties for the nested table you want from the Table dialog box. Click OK. The nested table is inserted into the selected cell. NOTE By default, the nested table is left justified and centered vertically within the cell. If you want to change the position of the nested table, select the cell that contains the table, and make your changes using the Properties panel. 7 6 5 4 3 2 1 7 6 Nested table in Standard Mode From the Library of Wow! eBook ptg 9 9 What You’ll Do Introduce Cascading Style Sheets Create a Web Page with a CSS Layout Create CSS Styles Apply Internal CSS Styles Apply and Modify External CSS Styles Remove Internal Styles Use the CSS Styles Panel Edit CSS in the Properties Panel Set CSS Properties Work with CSS Rules Disable or Enable CSS Rules Inspect CSS Use the Relevant CSS Tab Work with ID Selectors Create and Apply an ID Selector Check for CSS Browser Compatibility Format CSS Code Set CSS Styles Preferences Use Design-Time Style Sheets Optimize Web Pages 207 Working with Cascading Style Sheets Introduction Cascading Style Sheets are one of the greatest things to come along since the creation of the World Wide Web. A hard definition of CSS might go something like this: Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of the content in a Web page. Using CSS styles to format a page separates content from presentation. This gives you greater flexibility and control over the exact appearance of your Web pages. With CSS you can control text properties including specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and background color, link color and underlining. With CSS controlling fonts, it ensures a more consistent treatment of your page layout and appearance in multiple browsers. In this chapter you'll get an introduction to Cascading Style Sheets: what they are, and how to use them efficiently to create great Web content. You'll also learn how CSS func- tions, and how it's used to control multiple Web pages. With Dreamweaver and Cascading Style Sheets we're get- ting closer and closer to the goal of What You See Is What You Get, and I can't wait. From the Library of Wow! eBook ptg 208 Chapter 9 Cascading Style Sheets (CSS) are a revolution in the world of web design. Some of the ben- efits include: ◆ The layout of many documents from one single style sheet ◆ Precise control of layouts ◆ Application of different layout to different media-types (screen, print, etc.) ◆ Many advanced and sophisticated techniques Many of the CSS properties are similar to those of HTML. Therefore, if you are comfort- able designing Web pages using HTML code, you will most likely recognize many of the codes. CSS Versus HTML If you wanted to change the color of the back- ground of a Web page, the HTML code would look like this: <body bgcolor="#0000FF"> To write th e s a m e thing using CSS, wo ul d look like this: body {background-color: #0000FF;} Incidentally, the code, in both cases, is instructing the browser to paint the back- ground in pure blue. CSS Breakdown Cascading Style Sheets are broken down into three sections: a selector, a property, and a value. In our example, body is the selector, background-color is the property, and #0000FF is the value. Create CSS Styles There are three ways you can apply CSS to an HTML document: Attributes, Tags, and External Style Sheets. Attribute Styles One way to apply CSS to HTML is by using the HTML attribute style. CSS used in this way is coded directly into the HTML docu- ment. For example, you can create your own named tags, and use them throughout the active document. Building on the above example, it can be applied like this: <html> <head> <title>Attribute Style Example<title> </head> <body style="background-color: #0000FF;"> <p>This page has a blue background</p> </body> </html> NOTE Attribute styles are a one-shot deal. That is, they are applied to single areas of an HTML document such as a background color, or a specific portion of text. Tag Styles A second way to include CSS into an HTML document is to use the Tag Style method. In this method you control the formatting of standard HTML tags. For example, you could redefine the <H1> heading tag to always use a specific font, size and justification or, in this example, use the <body> tag to paint the background blue. <html> <head> <title>Tag Style Example<title> <style type="text/css"> body {background-color: #0000FF;} </style> </head> Introducing Cascading Style Sheets From the Library of Wow! eBook . the same time use one of the cells for tabular data, or you have a picture and a related caption and you want them to remain stationary in relation to one another while text on the page flows. Cascading Style Sheets Introduction Cascading Style Sheets are one of the greatest things to come along since the creation of the World Wide Web. A hard definition of CSS might go something like. (CSS) are a collection of formatting rules that control the appearance of the content in a Web page. Using CSS styles to format a page separates content from presentation. This gives you greater