Managing CSS styles in Java

Drawing Data Matrix 2d barcode in Java Managing CSS styles

You can manage your CSS styles both from the Manage Styles and Apply Styles task panes, although Manage Styles (see Figure 3-3) is generally preferred

Here are some of the typical tasks that you will want to perform with CSS styles: Define a new style Click the New Style link to define a new style The New Style dialog box is displayed, as shown in Figure 3-4 In the Selector field, enter the pound sign (#) and a unique identifier for an id selector, a period () and a class name for a class selector, or select an element name from the list Next, define the location in which the class should be defined in the Define In field After that, format the style based on the dialog box settings Click OK to save

Attach a style sheet Click the Attach Style Sheet link to attach an external css file to the current document (or optionally to all HTML pages in the site) Edit an existing style You can edit an existing style by selecting it from the CSS Styles list, right-clicking, and then choosing Modify Style from its contextual menu The Modify Style dialog box is displayed Jump to a style s CSS code If you are comfortable with CSS code, you can jump directly to a style s CSS definition code by double-clicking the style from the list

To insert an image, perform the following steps: 1 In the Editing window, position your cursor at the desired location in which you d like to insert an image

2 Click the Insert Picture from File button from the Common toolbar You can also choose Insert Picture From File from the menu, if you prefer The Picture dialog box (as shown in Figure 3-5) is displayed

3 Select the desired image 4 Click OK The Accessibility Properties dialog box is displayed (see Figure 3-6) Providing alternate text for your images ensures visually impaired persons will be better able to understand your Web site

5 Enter a description of the image in the Alternate Text field Alternate text is vital for visually impaired visitors of your site 6 Click OK The image is now available on your Web page, as shown in Figure 3-7

If the image isn t already located inside the folder of the current site, Expression Web displays a Save Embedded Files dialog box (see Figure 3-8) when you save the document Use this dialog box to add the picture to your images folder of your site

You can modify the properties of an image by double-clicking the image in the Editor window, pulling up the Picture Properties dialog box The Picture Properties dialog box has two tabs: the General tab (see Figure 3-9) and the Appearance tab (see Figure 3-10)

In the following sections, we walk you through some of the changes you might want to make to an image s properties

Expression Web enables you to convert your existing image into another format type through the Picture File Type button on the General tab Use it to convert between GIF, JPEG, PNG-8, and PNG-24 See Book VII for full details on the pros and cons of these different formats If you have an image editor, such as Photoshop, you probably want to do most image conversion there because you ll have greater control over the quality of the conversion However, if you don t have access to other software, this conversion utility can come in handy

By default, when you insert a picture into a paragraph, the image is added directly in the paragraph itself However, in most cases, you want to wrap the text around the image instead In the Picture Properties dialog box, use the Wrapping Style options on the Appearance tab to specify the type of wrapping you d like to use: None, Left, or Right You can also specify the position from the Alignment drop-down list