Adobe Dreamweaver CS3 Unleashed- P9

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

78
lượt xem 13
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Adobe Dreamweaver CS3 Unleashed- P9: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why so many windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowing developers complete control when building websites and applications....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Adobe Dreamweaver CS3 Unleashed- P9

Letter spacing— Enter a value within this text box to increase (represented by a positive value) or decrease (represented by a negative value) space between letters or characters. Vertical alignment— Select an option from this menu to specify the vertical alignment of the element to which the class is applied. Dreamweaver displays this attribute in the Document window only when it is applied to an image. Text align— Sets the alignment of text on the page to left, right, center, or justify. Text indent— Enter a value within this text box to have the first line of text in your paragraph indent. You can also enter a negative number to outdent, but the appearance depends on the browser. Whitespace— Select an option from this menu to specify how whitespace within the selected element is handled. Options within this menu include Normal, Pre, and Nowrap. Choose Normal to collapse whitespace. Choose Pre to retain all whitespace, including spaces, tabs, and returns. Choose Nowrap to specify that text wraps only when a line break () is encountered. Display— Choose an option from this menu to specify whether an element is displayed, and if so, how it is displayed. For example, you can mimic the look and functionality of a table-based structure by using various properties offered within this menu such as table, table-column, table-row, table-cell, and so on. These properties will become extremely useful in the next chapter as we discuss page structuring techniques using CSS. Detailed descriptions of each option within this menu are listed next: none—The element will not be displayed. block—The element will be displayed as a block-level element, with a line break before and after the element. inline—Default. The element will be displayed as an inline element, with no line break before or after the element. list-item—The element will be displayed as a list. run-in—The element will be displayed as a block-level or an inline element, depending on context. inline-block—The element is placed inline (on the same line as adjacent content), but it behaves as a block. compact—The element will be displayed as a block-level or an inline element, depending on context. marker—Used to specify the nearest border edges of a marker box and its associated principal box. Many browsers still do not support this property. table—The element will be displayed as a block table (like ), with a line break before and after the table.
inline-table—The element will be displayed as an inline table (like ), with no line break before or after the table. table-row-group—The element will be displayed as a group of one or more rows (like ). table-header-group—The element will be displayed as a group of one or more rows (like ). table-footer-group—The element will be displayed as a group of one or more rows (like ). table-row—The element will be displayed as a table row (like ). table-column-group—The element will be displayed as a group of one or more columns (like ). table-column—The element will be displayed as a column of cells (like ). table-cell—The element will be displayed as a table cell (like and ). table-caption—The element will be displayed as a table caption (like ). inherit—Inherits display properties from the parent element. Don't be alarmed by the overwhelming list of properties contained within the Block category. This is merely an overview and reference. The next chapter will put a lot of these properties into perspective. Box Options The Box category of the CSS Rule Definition dialog, shown in Figure 6.16, provides you with the capability to change and customize attributes within tables and the page itself. If you need to modify the width, height, padding, and spacing on a table, row, or cell, you would modify elements within this category. Furthermore, you can set the margins for the page by using the margin properties. Figure 6.16. Use the Box category to modify width, height, padding, and spacing for tables, rows, and cells. [View full size image]
Following is a list of properties exposed by the Box category: Width and Height— Enter a value and then select a measurement to set the width and height of the element. These properties are especially useful when working with page-structuring techniques in CSS, which we'll be covering in the next chapter. Float— Choose an option from this menu to set which side elements, such as text, AP elements, tables, and so on, will float around an element. Clear— Choose an option from this menu in cases in which you are inserting images or need to place a description next to the image, but still need to add more text under the image. Padding— Use this group of options to specify the amount of space that should be added in between an element and the element's border. Unlike HTML, which forces you to enter one value for all sides, you can enter separate values followed by the measurement unit independently for each side. If you'd like to use the same value for all sides of the element, check the Same For All check box. For our example, we'll disable the Same For All option and enter a value of 5 pixels in the Left text box. Margin— Use this group of options to specify the amount of space that should be added between elements, such as cells within a table or the margins for the entire page. Unlike HTML, which forces you to enter one value for all sides, you can enter separate values for all sides. If you'd like to use the same value for all sides of the element, check the Same For All check box. Border Options The Border category of the CSS Rule Definition dialog, shown in Figure 6.17, provides you with the capability to make changes to borders. This feature works only on items that accept borders for attributes, such as text boxes, tables, AP elements, and so on.
Figure 6.17. Use the Border category to make border adjustments to elements that support borders such as tables, text boxes, AP elements, and so on. [View full size image] Following is a list of properties exposed by the Border category: Style— Use this group of options to specify the style of the border. Options include dotted, dashed, solid, double, groove, ridge, inset, and outset. Width— Select or enter a value within this text box to set the width of the border. Selectable options include thin, medium, and thick. You can also enter your own numeric value followed by the measurement type. Color— Use the color picker to select from a palette of 216 web-safe colors. Unlike HTML, where border colors are limited depending on the element used, border colors for all elements that support borders can be set independently of one another here. As with options in the Box category, all options within the Border category have the optional Same for All check box to apply identical values to the Top, Bottom, Left, and Right sides. By unchecking this box, you can enter separate values followed by the measurement independently of other sides. If you'd like to use the same value for all sides of the element, check the Same for All check box. List Options The List category of the CSS Rule Definition dialog, shown in Figure 6.18, provides you with the capability to customize the way lists are created within Dreamweaver. You can customize options for bullets and numbers, even providing your own custom image to replace the standard bullets.
Figure 6.18. Use the List category to customize how ordered and unordered lists are created within Dreamweaver. [View full size image] Following is a list of properties exposed by the List category: Type— Choose from one of the eight options in this list to identify the type of list that should be applied to the selected element. Options include Disc, Circle, Square, Decimal, Lower-roman, Upper- roman, Lower-alpha, Upper-alpha, none (Default). Bullet image— Use the Browse to button to select a custom image to use in place of bullets. Position— Select an option from this menu to set whether list item text wraps and indents (outside) or whether the text wraps to the left margin (inside). Positioning Options The Positioning category of the CSS Rule Definition dialog, shown in Figure 6.19, provides you with options that enable you to position and tags freely on the web page. Otherwise known as AP Elements in Dreamweaver, the positioning properties allow for pinpoint accurate movement and placement of various elements within your web pages. Figure 6.19. Use the Positioning category to set placement properties for and tags. [View full size image]
Following is a list of properties exposed by the Positioning category: Type— Choose one of four options in this menu to set the type of positioning AP Element should have in the browser. Options include Absolute, Fixed, Relative, and Static. Setting the type to Absolute guarantees that the AP Element's positioning is governed by the top-left corner of the nearest absolutely positioned element. If none is specified, it uses the page as a reference. Choose Fixed to set an AP Element's positioning relative to the top-left corner of the browser. The content will remain fixed in this position as the user scrolls the page. Choose Relative when you want to position an element relative to another element's flow within the document. Finally, choose Static when you want to place the AP Element in a fixed position within the text flow. This is the default position of all positionable HTML elements. Width and Height— Sets the width and height of the AP Element based on the value you enter and the measurement type you select. Visibility— Choose an option from this menu to set the display condition of the AP Element within the page. Options include Inherit, Visible, and Hidden. Inherit guarantees that a nested AP Element will inherit the visibility properties of its parent AP Element. If it has no parent AP Element, the visibility will default to Visible. Choose the Visible option when you want to show the AP Element regardless of the parent value. Choose the Hidden option when you want to hide the AP Element regardless of the parent value. We'll discuss visibility in more detail later in the book. Z-Index— One interesting aspect of AP Elements is that they can be stacked and overlapped. Use the z-index property to set the stacking order of AP Elements. Higher z-indexed AP Elements appear above lower z-indexed AP Elements. Overflow— Choose an option from this menu to set how content within the AP Element should be treated if it exceeds the width and/or height of the AP Element. Options include Visible, Hidden, Scroll, and Auto. Choose Visible when you want the AP Element to automatically resize if the content exceeds the width and/or height of the AP Element. Choose Hidden when you want the content within the AP Element to appear hidden if it exceeds the width and/or height of the AP Element. Alternatively, you
can choose Scroll to automatically have scrollbars appear to the right and bottom of the AP Element, allowing you to scroll the content within the AP Element. This option will display scrollbars even if the content doesn't exceed the width and/or height. Finally, choose Auto when you want to display scrollbars within the AP Element only when the content exceeds the width and/or height of the AP Element. Placement— Enter values within these text boxes to set the physical location of the positionable element on the page. Although the default measurement is represented by pixels, you can also choose to use picas, points, inches, millimeters, centimeters, percentages, and more by selecting the appropriate option from the measurement menu. Clip— Enter a value within this series of text boxes to define the part of the positionable element that is visible. You can use these properties in conjunction with JavaScript to create visual effects such as transitions. Extensions The Extensions category of the CSS Rule Definition dialog, shown in Figure 6.20, provides you with advanced CSS functionality. Modifying extensions allows you to make changes to the way page breaks are handled, customize cursors, create opacities and glows, and so on. Figure 6.20. Use the Extensions category to work with advanced CSS features such as customized cursors. [View full size image] Following is a list of properties exposed by the Extensions category: Page break— Choose options from these menus to force a page break during printing either before or
after the element controlled by the style. This property is supported only by Internet Explorer browser versions 5.5 and later. Visual effect: Cursor— Choose an option from this menu to change the pointer image when the pointer is over the element controlled by the style. There are 14 cursor options to choose from. Visual effect: Filter— Select an option from this menu to apply special effects to the element controlled by the style. Most of the options within this list are supported only by Internet Explorer 4 and later and are not covered in this book. Applying Style Classes to Elements on Your Page Now that you have a good idea as to the various properties that can be accessed and modified within the CSS Rule Definition dialog, it's time to apply what we've selected. In review, we modified basic type properties and added a slight 5-pixel padding to the left side of the element. To apply the style class we've created, we must first click OK to close the CSS Rule Definition dialog and return to our workspace. After you've clicked OK, you'll see the new class appear within the CSS Styles panel, as shown in Figure 6.21. Figure 6.21. The new style class appears within the CSS Styles panel. Looking at the CSS Styles panel in Figure 6.21, you'll notice a few interesting points. First, the style is defined as a class. You can tell it is a class because it appears with a period (.) before the name in the CSS Styles panel. Second, you can see the properties of the class listed below the All Rules list, within the Properties for .link list. Finally, you can see that the style class is actually a part of an external style sheet
defined by styles.css. Hierarchically, the class appears under, or within, the external style sheet file. If we were using a documentwide style sheet, the class would appear under the heading . Note The CSS Styles panel allows you to work with external style sheets and documentwide styles within the same page. An external style sheet is defined by styles.css within the CSS Styles panel, whereas a documentwide style is defined with the tag. All classes, tag redefinition, and so on are hierarchically listed under their respective style sheet reference. Because we've created a class named .link, this should tip you off to the fact that we've just created a style to handle the left side navigational links within the index.html page. To apply the new style to a link, highlight the individual link (Home) and choose the link option from the Style menu within the Property inspector, shown in Figure 6.22. Figure 6.22. Select the link option from the Style menu to apply the class to an element on the page. [View full size image] After you select the style from the list, you'll notice that the link for Home changes, based on the properties we defined within the CSS Rule Definition dialog. Now select each of the other links and apply the same link style class. When you're finished, the navigation bar will resemble Figure 6.23.
Figure 6.23. Apply the style class to all the links within the navigation bar. It's important that you highlight and apply the style class to each link individually. If you highlight the cells and apply the style once, the class is applied to the tag instead of each individual (link) tag. Doing this guarantees that pseudoclasses such as hover, discussed later in this chapter, will work properly. To ensure that the class is being applied properly, select the link within the navigation bar and look at the Tag Selector. If the last tag in the list reads the class was applied properly. To guarantee that the class is applied correctly, you can also apply a class directly to a tag from within the Tag Selector. For instance, I'll highlight the Contact Us link, right-click (Control+click)the tag in the Tag Selector, and choose the link option from the Set Class submenu (see Figure 6.24). Figure 6.24. Apply the class directly from within the Tag Selector. [View full size image] You can remove a style class by choosing the None option from the Set Class submenu by right-clicking (Control+clicking) the tag within the Tag Selector. Alternatively, you can choose the None option from the
Style menu in the Property inspector. Now that you have an idea as to how classes and style sheets are created and you know how to apply classes to elements within your web pages, let's direct our attention to working with tag redefinitions. In the next section we'll redefine the default properties for the tag to set the margins and the default type face and size within the page.
Designing Styles by Redefining HTML Tags Aside from creating classes within your style sheets, you can also redefine HTML tags. As we've discussed, redefining an HTML tag is the process of changing the properties of a tag (as they're defined by the browser) using CSS. For example, the tag, in which all elements in a typical web page are nested, is defined by the browser as having left and top margins of 5 pixels and fonts as having faces of Times New Roman, sizes of 3, and the color black. By redefining this tag using CSS, we can change these properties to be anything we want. And because we're redefining a tag, there are no classes or IDs to define and no elements to define them to. Even better, every time we create a new page within our site, that new page will also inherit the properties set for the tag (as long as the link between the page and external style sheet file exists). As an example, let's redefine the tag now. You can follow along by performing these steps: 1. Create a new style within your external styles.css file by choosing the New CSS Rule icon located in the icon group, second from the left, to the bottom right of the CSS Styles panel. The New CSS Rule dialog appears. 2. Choose the Tag option button from the Selector Type. The Name menu now becomes a Tag menu. 3. Select the option body from the Tag menu. 4. Make sure that styles.css is selected from the Define In option. When you're finished, the New CSS Rule dialog will resemble Figure 6.25. Figure 6.25. Choose the Tag Selector Type and then choose the body option from the Tag menu. 5. Click OK. The CSS Rule Definition for body in styles.css dialog appears. 6. Within the Type category, choose the Arial, Helvetica, sans-serif option from the Font menu and enter a value of 12 pixels within the Size text box. 7. Switch to the Box category and enter 0 within the Top text box for Margin, making sure that the Same for All check box is selected. 8. You're done. Click OK to close the CSS Rule Definition dialog and return to your workspace. You'll notice that the margins of the page instantly disappear and all the text within the page changes from
Times New Roman to Arial with a size of 12 pixels. It's important to note that tag redefinitions aren't applied like classes are, meaning there isn't anything to select from the Style menu in the Property inspector. Instead, tag redefinitions are attached to the tag, in a sense, and are therefore added by choosing the specific formatting option from either the Property inspector or the context and modify menus. In our case, our page (as all pages do) already contains a tag. Because this is the case, the properties of the tag redefinitions are automatically applied. Tip In the previous section, we created a class to control the look of the navigation items on the left side of the page. Alternatively, we could have taken a different, possibly much more efficient, route and redefined the tag instead. Redefining the tag would guarantee that all links in the site would take on the properties that we specify. Furthermore, this would save us from the task of having to apply styles to each and every link manually (as we did in the previous section), because links would automatically take on the style for the redefined tag as soon as they were created.
Working with Pseudoclasses Other rules, such as pseudoclasses, exist for creating CSS styles within Dreamweaver's framework and are represented by the final option button within the Selector Type option group in the New CSS Rule dialog. You can use pseudoclasses to define styles for certain tag states. The difference between normal classes and pseudoclasses is that pseudoclasses must be associated with an already defined class and are "attached" to the existing class by a colon. For instance, we've already defined a class named .link. We can use the hover pseudoclass to assign styling to all elements that use our .link class as follows: .link:hover This code allows us to define a new color for elements that use the .link class when the cursor rolls over them. It's important to note that pseudoclasses already have predefined names, in contrast to classes, which you name yourself. The most common pseudoclasses are those that specify styling for hyperlinks. These include the following: a:link—The styling given to all unvisited links. a:visited—The styling given to all links that have already been clicked. a:hover—The styling given to all links when the cursor rolls over them. a:active—The styling given to all currently selected links. For the most part, pseudoclasses, as they are supported within Dreamweaver, are associated with the tag (although this is not always the case when hand coding pseudo-classes). For this reason they are listed with the tag, followed by a colon, and then the pseudoclass type. However, as you saw in the preceding example, pseudoclasses can also be associated with existing classes. In our project, we'll want to associate the hover pseudo-class to the .link class. To do this in Dreamweaver, follow these steps: 1. Create a new style within your external styles.css file by choosing the New CSS Rule icon located in the icon group, second from the left, to the bottom right of the CSS Styles panel. The New CSS Rule dialog appears. 2. Choose the Advanced option button from the Selector Type. The Tag menu now becomes a Selector menu. 3. From the Selector menu choose the a:hover pseudoclass. 4. Replace the a with .link. Your dialog will resemble Figure 6.26. Figure 6.26. Use the hover pseudoclass to redefine the rollover state of our navigation bar.
5. Click OK. The CSS Rule Definition dialog for .link:hover in styles.css appears. 6. This time, change only the Color. Sample (using the eyedropper tool that appears) the red color (#CE1C08) from the Vecta Corp logo in the header image. 7. Click OK. The new pseudoclass appears within the CSS Styles panel. Again, like tag redefinitions, you don't select and apply pseudoclasses the same as you would a normal class. Instead, pseudoclasses are associated with existing classes or tag redefinitions. In our case, our pseudoclass is associated with the existing .link class. This means is although all links will take on the properties defined under the .link class, as soon as the user's cursor rolls over them, they will take on any properties that derive from those defined within the normal class, or in our case, the color defined within the pseudoclass hover. Save your work and preview the page in the browser. As Figure 6.27 shows, the link color changes when the cursor rolls over it. Figure 6.27. The link changes color when the cursor rolls over it. [View full size image]
We've merely scratched the surface. We could also define properties for the other pseudoclasses such as link, visited, and active. Experiment with the others at your leisure to see how they work.
Designing CSS Styles by Using IDs Unlike classes, pseudoclasses, and tag redefinitions, IDs are slightly more difficult to integrate within the context of Dreamweaver's design environment because they are not directly supported. This means that although you can still work with IDs using the CSS Styles panel, you won't be able to select them as an option from the Style menu in the Property inspector. Instead, you'll have to add them using the code hints menu within the Code view or by using the Tag Selector. To demonstrate how to work with IDs, let's create a new ID for the solution name in our Solutions table. To do this, follow these steps: 1. Create a new style within your external styles.css file by clicking the New CSS Rule icon located in the icon group, second from the left, to the bottom right of the CSS Styles panel. The New CSS Rule dialog will appear. 2. As you did with pseudoclasses, choose the Advanced option button from the Selector Type option group. The Tag menu will now become a Selector menu. 3. Enter the text #tableheader. Again the # symbol represents an ID. 4. Click OK. The CSS Rule Definition for #tableheader in styles.css dialog appears. 5. Choose Bold from the weight menu and click OK. The new ID appears within the CSS Styles panel. Now that the ID has been created, you can apply the style to the text in one of a few ways. First, you can switch to split Code/Design view, place your cursor within the tag that wraps the solution name text, and type the first part of the attribute ID=". As you enter the first quote, the code hints menu appears with the tableheader ID in the menu (because this is the only ID in the style sheet), as you can see in Figure 6.28. Figure 6.28. The tableheader ID appears within the code hints menu. [View full size image]
Press Enter so that the tableheader ID is applied to the tag's ID attribute as a value. Now switch back to Design view. A second way of applying styles, or IDs in this case, is to highlight the text that you want to apply the style to (in our case, the second solution header). As you can see, the tag is highlighted within the Tag Selector. Right-click (Control+click) the tag in the Tag Selector to open the context menu and choose the tableheader option from the Set ID menu, as shown in Figure 6.29. Figure 6.29. Use the Tag Selector to set an ID to a selected element on the page. [View full size image]
The last method of applying a style, or in this case, an ID, is to use the Apply option directly from the CSS Styles panel. To use this method, highlight the last solution option in the company events table: vRetain 1.0. Right-click (Control+click) the #tableheader ID in the CSS Styles panel to access the context menu, and then click the Apply option (see Figure 6.30). Figure 6.30. Use the Apply option from the context menu in the CSS Styles panel to apply a style directly to a selected element. [View full size image]
Any method you pick produces the same results. In our examples, we could have easily used classes to accomplish the same results. Remember, IDs are particularly useful when working with client-side scripting languages like JavaScript; they help us uniquely identify an HTML element for use with JavaScript and allow us to apply a CSS style at the same time. Furthermore, IDs are useful when working with page structuring techniques that take advantage of CSS positioning properties. You'll see this in much more detail in the next chapter.