《Dreamweaver网页设计与网站开发》第六章.ppt

（6）单击对话框中的【确定】按钮，返回到【插入Div标签】对话框。再单击对话框中的【确定】按钮，Div标签就被插入到了页面中（见图6-78）。Style.css文件中添加的代码如下：01#menu{02maigin-left：auto；03maigin-right：auto：04border-right-color：#cccccc；05border-right-width：1px；06border-right-style：dotted；07width：776px；08background-color：#eeeeee09}（7）删除“此处显示id‘main’的内容”的文字，将插入点置于Div标签的内部，单击【插入】面板【布局】分类中的【插入Div标签】按钮，在打开的对话框中设置【插入】为【再插入点】，【ID】为【main_left】（见图6-79）。（7）删除“此处显示id‘main’的内容”的文字，将插入点置于Div标签的内部，单击【插入】面板【布局】分类中的【插入Div标签】按钮，在打开的对话框中设置【插入】为【再插入点】，【ID】为【main_left】（见图6-79）。（8）单击【新建CSS规则】按钮，弹出【新建CSS规则】对话框，在该对话框中设置【规则定义】为【style.css】。这时设置的就是main_left的样式规则（见图6-80）。（9）单击【确定】按钮，在弹出对话框的【方框】选项面板中设置【Width】（宽）为“174”像素，【Height】（高）为【auto】（自动），【Float】（浮动）为【left】（左对齐）（见图6-81）。（10）切换至【背景】选项面板，设置【Background-color】（背景颜色）为浅灰色“#EEEEEE”（见图6-82）。（11）单击对话框中的【确定】按钮，返回【插入Div标签】对话框中。再单击对话框中的【确定】按钮，Div标签就被插入到了页面中（见图6-83）。此时，div.htm页面中添加的代码如下：01＜divid=main_left＞02此处显示idmain_left的内容03＜/div＞Style.css文件中添加的代码如下：01#main-left{02float：left； 03width：176px；04height：auto；05background-color：#eeeeee06}（12）删除“此处显示id‘main_left’的内容”的文字，将插入点置于Div标签的内部，单击【插入】面板【布局】分类中的【插入Div标签】按钮，在打开的对话框中设置【插入】为【再插入点】，【ID】为【main_left_menu】（见图6-84）。（13）单击【新建CSS规则】按钮，在弹出的【新建CSS规则】对话框中设置【规则定义】为【style.css】。这时设置的就是main_left_menu的样式规则（见图6-85）。（14）单击【确定】按钮，在【方框】选项面板中设置【Width】（宽）为“174”像素，在【Margin】（边界）选项组中设置【Top】（上）为“6”像素（见图6-86）。（15）切换至【背景】选项面板，设置【Background-color】（背景颜色）为浅灰色“#EEEEEE”（见图6-87）。（16）单击对话框中的【确定】按钮，返回到【插入Div标签】对话框中。再单击对话框中的【确定】按钮，Div标签就被插入到了页面中（见图6-88）。此时，div.htm页面中添加的代码如下：01＜divid=〝main_left_menu〞＞02＜ul＞03＜li＞＜ahref=〝http///about-us/beiersdorf〞＞拜尔斯道夫＜/a＞＜li＞…04＜ul＞05＜/div＞（17）删除“此处显示id‘main_left_menu’的内容”的文字。插入6段文字，设置成无序列表，为每一段文字添加上一个链接地址（见图6-89）。Style.css文件中添加的代码如下：01#main_left_menu{02margin-top：6px； 03width：176px；04background：#eeeeee05}（18）新建CSS规则，设置【选择器类型】为【复合内容】，【选择器名称】为“#main_left_menuul”，【规则定义】为【style.css】（见图6-90）。（19）单击【确定】按钮后，弹出规则定义对话框，在【分类】列表中选择【区块】选项，在【区块】选项面板中设置【Display】（显示）为【block】（区块）（见