CSS styles are the standard for today's web page typesetting. Here's an exercise that adjusts the width of the page, modifies the background color, adds a background graphic to a page area, and adjusts a variety of text attributes, all of which can be done in the CSS styles panel of Dreamweaver.
Change page width
You may notice that the image that is inserted in the title area is slightly narrower than the predefined page width. The Width property of a Web page is typically applied to the <body> meta cable or to the parent <div> meta cable that contains the primary content. The first step in changing the width is to determine the CSS rules that control it, which will require some CSS detection work.
1. If necessary, you can choose File > Open most recent File > greenstart.html, and click the Design button to view the page in Design view.
2. Insert the cursor anywhere in the page content. Observe the name and order of the tag selector at the bottom of the document window, as shown in the following illustration.
The label selector displays the order in which the page's code structure is directly related. The element that appears on the left is the parent element or container of all elements on the right side of it. The leftmost element is the GAO level element in the page structure. You can see that,<body> is the highest level element,<div.container>. No matter where you click on the page, the relationship doesn't change, so with simple reasoning, you can determine that one of these two elements may contain the width attribute you are looking for.
3. If the CSS styles panel is not visible and is not open, choose Window > CSS styles to open it. Minimize or close any panel as needed to maximize access to the CSS styles panel.
4. If necessary, in the CSS Styles panel, click the All button to switch from current view to all view.
The all view displays the entire style sheet associated with the current page. The current view displays only the styles that affect the selected element. You must open a document to view any style in the CSS styles panel.
5. Click the plus sign to expand the <style> entry in the CSS styles panel.
Note: In this page, the style rule is in the header area of the document. Dreamweaver use the (<style>) tab inline style. These style sheets are listed by name in the CSS styles panel (for example, MyStyles.css).
6. In the CSS Styles panel, click the Body rule to view its properties.
As shown in Figure 4.17, the body rule has properties for backgrounds, colors, fonts, margins, and fills, but there are no properties for widths. Now check for another element.
Figure-1
Figure-2
7. Click the. Container rule and observe its properties.
This rule has a width property of 960 pixels. Because the width of the banner is 950 pixels, it obviously seems to be the element we're looking for. You can modify the rule directly in the Panel's properties area.
8. In the Properties area, click the number "960". Enter "950" and press ENTER. The Web page will shrink to the width of the banner graphic.
Change the background color of a page
CSS can be used to change the properties and behavior of any HTML element, such as <body>. In this exercise, you will modify the entire page's back dong color.
1. Click the Design button to view the page in Design view.
2. In the CSS Styles panel, click the Body rule, and then click the Edit Style button.
3. When the "Body CSS Rule Definition" dialog box appears, select the "Background" category. Then click the "Backgmimd-color" box to display the color tube.
4. In the Color picker, click the white square using the eyedropper tool, as shown in the following figure.
Dreamweaver will automatically insert the white hexadecimal value "#FFF" in the Background-color box.
Note: You usually use hexadecimal colors, where each color channel (red, green, and Blue) uses two characters. When a two-character Fu Cheng is present, it can be abbreviated, for example, #003366 can be written as #036.
6. Insert the cursor in the bottom area to view the label selector.
The label <div.footer> appears at the bottom of the document window, although it is obvious, but do not assume that the elements are styled. It is a safe way to rely on the label selector to determine the page structure.
7. In the CSS Styles panel, double-click the. Footer rule.
8. Change the Background-color to "#060", and then click the "OK" button. The background color at the bottom will change from gray to dark green. Last save File
Insert a graphic background at the bottom
In this exercise, you will use CSS to add a background graphic to the bottom:
1. If necessary, click the Design button to view the page in Design view.
2. In the CSS Styles panel, double-click the. Footer rule.
3. Select the "Background" category. Then click the Browse button next to Backgmimd-image to eject the Select Image source file dialog box.
4. Choose Background.jpg. The size of the image is 5 pixels x30, and its size is 1KB. Since the page is 950 pixels, this graphic cannot be spread across the bottom.
5. Click the OK button, and then click the Apply button.
The background image is automatically repeated to fill the entire bottom. In some cases, the background is not designed to be filled in two directions. For example, this graphic is intended to create a rounded 3D effect on the top edge of a <div> element. CSS allows you to control repetitive functions, such as restricting them to vertical or horizontal axes, and other settings.
6. Select "Repeat-x" from the menu in the "Background-repeat" box, and then click the Apply button.
The graphic will now repeat only horizontally, and it will be aligned with the top of the <div> element by default. But the previously selected background color and graphics do not smell, it is too deep.
7. Select the "Background-color" color box to access the Eyedropper tool. At the bottom of the two green shades in the lighter area click the Eyedropper tool, which will be lost in the Background-color box as #090.
8. Click "OK" button.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
