Part II: Appreciating Web Design Options in Java

Encoder QR Code in Java Part II: Appreciating Web Design Options

a Click to select the twoColFixLtHdr #header style in the CSS Styles panel b Click and drag to select the contents of the Padding field In this example, select 0 10px 0 20px in the Padding field in the Properties pane at the bottom of the CSS Styles panel and then press the Delete or Backspace key This completely removes all the padding from the Header area c Select the text or image you inserted into the Header area and then right-click the <h1> tag in the tag selector at the bottom of the workspace and choose Remove Tag from the pop-up menu, as shown in Figure 6-5

Figure 6-5: You can use the tag selector at the bottom of the workspace to edit or remove tags and styles

You may also want to adjust the width and padding of the content areas in your preset layout When you re done, you re ready to add your own text to these areas The following steps explain how: 1 To change the width of the entire content area, select the two ColFixLtHdr #container style in the CSS Styles panel The style definition appears in the Properties pane (refer to Figure 6-5) 2 Select the size in the width field and type a new number with your desired page width In this example, I selected the width, which is set to 780, as shown in Figure 6-5, and I changed it to 760 When you alter the width of the #content style, as I did here, you change the width of the entire design because all the other <div> tags are contained within the <div> that s formatted with the #content style and they re all set to expand to fill the #content <div>

3 Replace the text in the sidebar and main content areas You can replace the text in any page created from a CSS layout just as you would in any other Web page If you delete content, such as the headline in the sidebar, make sure you also delete any corresponding code, such as the <h3> tag, which formats the sidebar heading You can most easily delete this code by using the tag selector, as shown in Figure 6-5 4 To change the width and background color of the sidebar, doubleclick the twoColFixLtHdr #sidebar1 style in the CSS Styles panel The CSS Rule Definition dialog box opens 5 Select the Background category and use the color well in the Background-Color field to specify a color Alternatively, you can enter any hexadecimal color code manually 6 Select the Box category and change the width, padding, and margin settings You can alter the width of the sidebar, the padding (the space inside the border of the sidebar), or the margins (the space outside the border of the sidebar) 7 Click the Apply button to preview the changes and then click OK to save the changes and close the dialog box The changes are applied automatically to the design in the open page When you change the width of a sidebar in a Dreamweaver CSS layout, you must also change the corresponding margin setting in the mainContent style (as you see in the next step) The width in the sidebar style and the margin in the mainContent style are used in combination to control the positioning of the sidebar and mainContent <div>s in relation to each other 8 Double-click the twoColFixLtHdr #mainContent style in the CSS Styles panel The CSS Rule Definition dialog box opens 9 Select the Box category and change the margin settings to correspond to the new width of the sidebar In this example, I changed the width of the sidebar from 200 to 300, so I need to change the corresponding margin setting in the mainContent style You may not want to change the margin setting by the same amount as you changed the width of the sidebar because this can lead to a margin that may not look right in your page design Instead, I recommend you experiment by changing the margin setting and then clicking the Apply button to see how the page looks