《Dreamweaver CS4网站设计实例教程 教学课件 ppt 作者 汤文飞 赵晓秋 刘菁 第2章 公司网站》由会员分享，可在线阅读，更多相关《Dreamweaver CS4网站设计实例教程 教学课件 ppt 作者 汤文飞 赵晓秋 刘菁 第2章 公司网站（158页珍藏版）》请在金锄头文库上搜索。
1、第2章 设计服务型公司网站,本章要点 使用Dreamweaver管理站点中的多个网页 使用Div+CSS制作两列固定的布局 添加垂直导航栏 使用Div标签与CSS制作弹出菜单 灵活使用背景图片,2.1 制作首页,在制作公司网站时，网站的首页集中了导向其他页面的链接，按照公司服务领域的不同，这里往往又会使用不同的布局、内容及样式。服务型公司网站可以更加关注于产品本身的介绍，而且风格搭配也可以更加灵活。本章就来使用Dreamweaver进行此网站的制作。 这里需要注意的事项包括： 固定列宽的浮动Div标签 结合使用多个标签的背景图片 指定标签的填充值与边界值 列表项的组织与应用,2.1 制作首页,
2、在IIS的当前站点中中创建虚拟目录后进入Dreamweaver以添加相应的站点。这里分别定义了站点的本地信息与测试服务器。,2.1 制作首页,返回Dreamweaver窗口，新建空白HTML文档，适当修改【标题】后保存文档。 现在新建CSS规则，在【新建CSS规则】对话框中指定【选择器名称】为“*”，【规则定义】位置为“新建样式表文件”。单击【确定】按钮以继续。,2.1 制作首页,此时弹出【将样式表文件另存为】对话框，选择样式文件的保存路径并输入文件名称，然后单击【保存】按钮以创建新样式文件。 在弹出的【CSS规则定义】对话框中切换到【方框】类别，指定【Padding】与【Margin】值均为
3、0以便清除浏览器赋予所有标签的默认填充值与边界值。单击【确定】按钮以保存规则。,2.1 制作首页,返回编辑区，选中标签后创建CSS规则，在【新建CSS规则】对话框中指定【选择器类型】为“标签”，【选择器名称】为“body”，【规则定义】位置为之前保存的样式表文件。 在【CSS规则定义】对话框中切换到【背景】类别，指定【Background-color】为深蓝色。单击【确定】按钮以保存规则。,2.1 制作首页,返回编辑区后向页面中添加Div标签，在【插入Div标签】对话框中指定【ID】值为“divHeader”。 单击【新建CSS规则】按钮，在弹出的【新建CSS规则】对话框中保留【选择器名称】为
4、“#divHeader”。,2.1 制作首页,在【CSS规则定义】对话框中切换到【定位】类别，指定【Position】为“fixed”，【Width】值为200px，【Top】与【Left】值均为0px。保存规则后返回。,2.1 制作首页,返回文档窗口，在标签中插入LOGO图后，在的结束标签之前添加新的Div标签，在【插入Dv标签】对话框中指定其【ID】值“divNavi”。 单击【新建CSS规则】按钮，在弹出的【新建CSS规则】对话框中简化【选择器名称】为“#divNavi”。,2.1 制作首页,在【CSS规则定义】对话框的【类型】类别中指定字体大小值【Font-size】为14px，行高值
5、【Line-height】值为30px。,2.1 制作首页,切换到【背景】类别后单击【浏览】按钮，从弹出的【选择图像源文件】对话框中选择准备好的圆角图片。 返回【CSS规则定义】对话框，指定【Background-repeat】为“no-repeat”，【Background-position】水平与位置位置分别为“right”与“top”。,2.1 制作首页,接着切换到【区块】类别，指定【Text-align】值为“right”以右对齐文本。 最后，在【方框】类别中指定顶部与底部的【Margin】值均为10px。单击【确定】按钮以保存规则。,2.1 制作首页,返回后，向这里的Div标签中填充
6、文本内容，然后使用3号标题与项目列表来组织结构。 选中Div标签中的超链接标签后创建CSS规则，在【新建CSS规则】对话框中指定【选择器名称】为“#divNavi a”。,2.1 制作首页,在【CSS规则定义】对话框的【类型】类别中指定【Font-family】为无衬线“sans-serif”，【Font-weight】为“normal”，【Color】为白色并勾选【none】复选框。 切换至【区块】类别，在此指定字符间距为5px，【Display】为“block”。最后在【方框】类别中右【Padding】值为1em。,2.1 制作首页,返回编辑区后，选中项目列表中的列表标签以创建CSS规则，
7、在【新建CSS规则】对话框中简化【选择器名称】至“#divNavi ul li”。,2.1 制作首页,在【CSS规则定义】对话框中切换到【列表】类别，指定【List-style-type】值为“none”。,2.1 制作首页,返回编辑区，选择列表项中的标签后新建CSS规则，在弹出的【新建CSS规则】对话框中指定【选择器名称】为“#divNavi ul li a”。 在【CSS规则定义】对话框中切换至【背景】类别，在此指定链接背景颜色为淡蓝色。,2.1 制作首页,切换到【区块】类别，在此指定【Display】方式为“block”；最后切换至【边框】类别，然后指定底部【边框】为宽1px的白色实线，
8、单击【确定】按钮以保存规则。,2.1 制作首页,返回编辑区并继续选中导航项中的标签以创建CSS规则，这里在【新建CSS规则】对话框中指定【选择器名称】为“#divNavi ul li a:hover”。,2.1 制作首页,在【CSS规则定义】对话框中切换到【背景】类别，单击此处的【浏览】按钮，从弹出的【选择图像源文件】对话框中选择准备好的图片，返回【CSS规则定义】对话框后指定背景图片重复方式为“repeat-y”。,2.1 制作首页,返回编辑区后，选中导航栏底部的标签，接着进入【标签检查器】面板，指定【class】值为“h3Bottom”。,2.1 制作首页,选中该标签后新建CSS规则，在【
9、新建CSS规则】对话框中简化【选择器名称】为“#divNavi .h3Bottom”，在【CSS规则定义】对话框中切换到【背景】类别后单击【浏览】按钮，从弹出的对话框中选择背景图片。,2.1 制作首页,返回【CSS规则定义】对话框，指定背景图片重复方式为“no-repeat”，水平位置与垂直位置分别为“left”与“top”。单击【确定】按钮以保存规则。,2.1 制作首页,返回编辑区以查看编辑完成的导航栏。,2.1 制作首页,现在使用CSS制作导航栏弹出菜单。在【CSS样式】面板中双击“#divNavi”，在弹出的【CSS规则定义】对话框中切换到【定位】类别，在此指定【Postion】为“re
10、lative”。,2.1 制作首页,在编辑区输入弹出子菜单文本并添加链接，将它组织为项目列表。注意子菜单的标签对位于导航栏的标签对中。接着进入【标签检查器】，指定子菜单的【class】值为“ulSubNavi”。,2.1 制作首页,选中子菜单列表项后创建CSS规则，在【新建CSS规则】对话框中指定【选择器名称】为“#divNavi .ulSubNavi”。 在【CSS规则定义】对话框中切换到【背景】类别，选择准备好的背景图片，其水平位置与垂直位置则分别为“right”与“bottom”。,2.1 制作首页,接下来切换到【方框】类别，并在此指定底部【Padding】值为10px。 继续切换到【定
11、位】类别，指定【Position】方式为“absolute”，【Width】值为150px，【Left】值为200px。,2.1 制作首页,返回编辑区，选中子菜单中的标签后创建CSS规则，在【新建CSS规则】对话框中指定【选择器名称】为“#divNavi .ulSubNavi li a”。,2.1 制作首页,在【CSS规则定义】对话框的【类型】类别中指定【Font-size】为12px，【Line-height】为25px，切换到【背景】类别，指定【Background-color】为蓝色；继续切换至【区块】类别，指定【Text-align】为 “center”。,2.1 制作首页,现在选中该
12、标签后创建CSS规则，在【新建CSS规则】对话框中指定【选择器名称】为“#divNavi #ulSubNavi1”。,2.1 制作首页,现在选中该标签后创建CSS规则，在【新建CSS规则】对话框中指定【选择器名称】为“#divNavi #ulSubNavi1”，在【CSS规则定义】对话框中切换到【定位】类别，指定其【Top】值为62px。,2.1 制作首页,接下来定义CSS规则以控制子菜单的隐藏与显示。新建CSS规则，在【新建CSS规则】对话框中指定【选择器名称】为“#divNavi li:hover .ulSubNavi”；在【CSS规则定义】对话框中切换到【区块】类别，在此指定【Displ
13、ay】为“block”。,2.1 制作首页,修改“#divNavi .ulSubNavi”规则，在【CSS规则定义】对话框中同样切换至【区块】类别，然后指定【Display】为“none”。,2.1 制作首页,返回编辑区，此时菜单项已在【设计】视图中隐藏。现在启用【实时视图】模式，将光标移动到这里的导航项上，制作好的子菜单即会显示出来。使用类似的方法添加其他的弹出菜单，唯一需要注意的是修改各子菜单的【Top】值。,2.1 制作首页,现在向导航栏下方添加联系信息面板。在的结束标签之前插入新的Div标签，在【插入Div标签】对话框中指定【ID】为“divContent”，单击【新建CSS规则】按钮
14、，在弹出的【新建CSS规则】对话框中指定【选择器名称】为“#divContact”。,2.1 制作首页,在【CSS规则定义】对话框的【类型】类别中指定【Font】为serif，【Font-size】为12px，【Line-height】为20px，字体颜色【Color】为白色。,2.1 制作首页,切换到【背景】类别，单击【浏览】按钮以选择准备好的图片，返回【CSS规则定义】对话框后，指定【Background-repeat】为“no-repeat”。,2.1 制作首页,现在切换到【方框】类别，在此指定【Height】值为60px，【Padding】值为10px，返回编辑区输入适当的文本内容。,
15、2.1 制作首页,选中需要添加电子邮件链接的文本，然后单击【插入】面板上的【电子邮件链接】按钮，在弹出的对话框中输入【E-Mail】地址后确定。,2.1 制作首页,返回编辑区，选择自动添加的标签后新建CSS规则，在【新建CSS规则】对话框中指定【选择器名称】为“#divContact p a”，在【CSS规则定义】对话框中指定字体颜色为浅绿色，勾选【none】复选框后确定以保存规则。,2.1 制作首页,接下来添加页面主体内容框架。在标签之后添加新的Div标签，在【插入Div标签】对话框中指定【ID】值为“divMainWrapper”；为此Div创建CSS规则，在【新建CSS规则】对话框中指定
16、【选择器名称】为“#divMainWrapper”。,2.1 制作首页,在【CSS规则定义】对话框中切换到【背景】类别，单击【浏览】按钮以从弹出的对话框中选择准备好的背景图片，返回【CSS规则定义】对话框，指定【Background-repeat】为“no-repeat”，【Background-position】的值分别为“top”与“bottom”。,2.1 制作首页,切换到【方框】类别，指定【Width】值为700px，底部【Padding】值为10px，四周【Margin】值依次为100px、0px、10px及250px，单击【确定】按钮以保存规则。,2.1 制作首页,返回编辑区，会发现此时【设计】视图与【实时视图】并不一致。由于并不会影响浏览器中的最终显示效果，这里暂且不去管它。,2.1 制作首页,在的开始标签之后添加新的Div标签，在【插入Div标签】对话框中指定【ID】为“divMain”，为此Div创建CSS规则，在【新建CSS规则】对话框中简化【选择器名称】至“#divMain”。,2.1 制作首页,在【CSS规则定义】对话框的【类型】类别中指定【Font-si
