Graphics Programs Reference
In-Depth Information
To insert a div tag into the home page:
◗
1.
Open the
index.html
page, verify that it is open in
Design
view, and then, in the
status bar, click the
<body>
tag.
You can also insert a div
tag from the Common cat-
egory of the Insert panel.
◗
2.
Open the Insert panel and, in the
Layout
category, click the
Insert Div Tag
button. The Insert Div Tag dialog box opens. See Figure 4-9.
Figure 4-9
Insert Div Tag dialog box
select an existing rule for the div
click to create a new rule for the div
◗
3.
Click the
Insert
button, and then click
Wrap around selection
, if necessary.
◗
4.
Click the
New CSS Rule
button. The New CSS Rule dialog box opens.
◗
5.
Create a new CSS rule using
ID
as the selector type. Type
#container
as the
selector name, select
nbf_styles.css
for the rule definition, and then click the
OK
button. The CSS Rule definition for #container in nbf_styles.css dialog box opens.
◗
6.
In the
Background
category, type
#666666
in the Background-color box, click
the
Browse
button to open the Select Image Source dialog box, navigate to the
Tutorial.04\Tutorial
folder included with your Data Files, double-click
back.jpg
to set the image path and name in the Background-image box, and then select
no-repeat
from the Background-repeat list.
◗
7.
In the
Box
category, type
955 px
in the Width box, uncheck the
Same for all
check
box in the Margin section, type
0
in the Top and Bottom margin boxes, select
auto
in the Right and Left margin boxes. In the Border category, check the
Same for all
check boxes, if necessary. In the Top box, select
solid
from the Style list,
type 1
in the Width box, type
#666
in the Color box, and then click the
OK
button. The
container ID style appears in the ID list in the Insert Div Tag dialog box.
Although you are creating
a border for the div tag,
it will not be noticeable
because it is the same color
as the background you will
add. It is necessary to cre-
ate the border because the
div tag needs something in
the foreground to display
properly in the page.
◗
8.
Click the
OK
button. The container ID style is added to the div, the div is inserted
into the home page, and the new style is added to the style sheet. Press the right
arrow to deselect the page content. See Figure 4-10.
Search WWH ::
Custom Search