新媒体网页设计与制作DreamweaverCS6基础、案例、技巧实用教程第11章课件.ppt

1、第第11 11章章 综合实训综合实训家具联盟网站家具联盟网站本章学习要点：本章学习要点：1 1视图的切换视图的切换 2 2网页的布局网页的布局 3 3制作网页主体制作网页主体 4 4CSSCSS层叠样式表的应用层叠样式表的应用11.1 11.1 实例目标实例目标 本例通过综合运用所学知识，以家具联盟网站为例制作一个综合性网站，使用户通过实践巩固所学知识，掌握网站的开发流程，并能结合PhotoShop、Flash等技术，熟练地使用Dreamweaver CS6进行网站的设计和开发。11.2 11.2 制作思路制作思路 本例包含了本教材大部分的知识点，通过综合运用这些知识，制作一个家具联盟网站。网

2、站使用DIV+CSS对页面进行布局，通过CSS对页面内容进行修饰和美化，从而制作出一个主题鲜明、布局合理、色彩丰富、效果美观的网站，如图所示。11.2 11.2 制作思路制作思路 11.3 11.3 制作过程制作过程11.3.1 11.3.1 创建站点及网页文件创建站点及网页文件1新建站点。启动Dreamweaver CS6，选择【站点】/【新建站点】命令，在打开对话框的【站点名称】中输入“Furniture Union”，在【本地站点文件夹】文本框中设置文件的根目录，单击【保存】按钮，如图所示。2新建网页文件。选择【文件】/【新建】命令，在打开的【新建文档】对话框中，选择【空白页】，【页面类

3、型】选择【HTML】，单击【创建】按钮，如图所示。11.3 11.3 制作过程制作过程3保存网页文件。单击【文件】/【保存】命令，在打开的【另存为】对话框中，将文件保存到“Furniture Union”站点根文件夹下，设置文件名称为“index.html”。11.3 11.3 制作过程制作过程4新建文件夹。选择【文件】/【窗口】命令，打开【文件】面板，右键单击站点名称，在弹出的快捷菜单中选择【新建文件夹】，在站点根文件夹下生成一个名为“untitled”的空白文件夹，修改文件夹名称为“CSS”。11.3 11.3 制作过程制作过程5创建样式表文件。选择【文件】/【新建】命令，在打开的【新建文

4、档】对话框中，选择【空白页】，【页面类型】选择【CSS】，单击【创建】按钮。11.3 11.3 制作过程制作过程6保存样式表文件。单击【文件】/【保存】命令，在打开的【另存为】对话框中，将文件存储到“Furniture Union”站点根文件夹下名为“CSS”的文件夹下，设置文件名称为“format.css”。11.3 11.3 制作过程制作过程7附加样式表。打开“index.html”文件，选择【窗口】/【CSS】命令，在【CSS样式】面板中单击“附加样式表”按钮，在弹出的【链接外部样式表】对话框中设置【文件/URL】为“CSS/format.css”，【添加为】选择“链接”，单击【确定】按

5、钮，如图所示。11.3 11.3 制作过程制作过程本例的网页总体布局如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构1 插入DIV。（1）插入网页容器DIV。首先将鼠标光标置于目标位置，选择【插入】/【布局对象】/【DIV标签】命令，插入一个名为“box”的DIV。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（2）插入其他DIV。将鼠标光标置于“box”内部，分别插入名字分别为“logo”、“titl”、“aboutus”、“menu”、“searc”、“picBox”、“show”(包含嵌套DIV“

6、list”和“ifr”，“list”中包含嵌套DIV“m1”、“m2”和“m3”)、“center”、“news”、“scroll”、“link”和“bot”的DIV，如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构 11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构2创建DIV布局（1）新建ID为“box”的CSS规则。选中ID为“box”的DIV，选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，单击【CSS样式】面板底部的按钮，创建名为“#box”的ID CSS规则，在【规则定义】下拉列表框中

7、 选择“CSS/format.css”，单击【确定】按钮，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（2）新建ID为“logo”的CSS规则。选中ID为“logo”的DIV，创建名为“#logo”的ID CSS规则，创建方法如步骤（1），以下均相同。属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（3）新建“titl”ID样式。选中ID为“titl”的DIV，创建名为“#titl”的ID CSS规则，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV

8、+CSS布局网页结构布局网页结构(4)新建ID为“aboutus”的CSS规则。选中ID为“aboutus”的DIV，单击【CSS样式】面板底部的按钮，创建名为“#aboutus”的ID CSS规则，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（5）新建ID为“menu”的CSS规则。选中ID为“menu”的DIV，创建名为“#menu”的ID CSS规则，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（7）新建ID为“picBox”的CSS规则。选中ID为“picBox”

9、的DIV，创建名为“#picBox”的ID CSS规则，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（8）新建ID为“line”的CSS规则。选中ID为“line”的DIV，创建名为“#line”的ID CSS规则，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构(9)新建ID为“show”的CSS规则。选中ID为“show”的DIV，创建名为“#show”的ID CSS规则，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网

10、页结构(10)新建ID为“list”的CSS规则。选中ID为“list”的DIV，创建名为“#list”的ID CSS规则，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构(11)新建“m1”、“m2”和“m3”CSS规则。设置三个DIV的属性值如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构(12)新建ID为“ifr”的CSS规则。选中ID为“ifr”的DIV，创建名为“#ifr”的ID CSS规则。属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局

11、网页结构布局网页结构（13）分别创建ID为“center”、“news”和“scroll”的CSS规则。选中名为“center”的DIV，创建名为“#center”的ID CSS规则。属性设置如图所示。设置“news”和“scroll”【方框】的【width】属性值分别为“400px”和“300px”，其他属性与“center”DIV相同。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（14）新建ID为“link”的CSS规则。选中名为“link”的DIV，单击【CSS样式】面板底部的按钮，创建名为“#link”的 CSS规则。属性设置如图所示。11.

12、3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（15）新建ID为“bot”的CSS规则。选中名为“bot”的DIV，单击【CSS样式】面板底部的按钮，创建名为“#bot”的CSS规则。属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构1定义网页整体样式。将鼠标光标置于文档窗口的空白处或单击标签选择器上的“body”标签，选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，创建“body”标签的CSS规则，属性设置如图所示。11.3.3 11.3.3 定义定义CSSCSS规则规则2定义链接样式。新建

13、“a”标签的CSS规则。属性设置如图所示。3定义图像边框样式。新建“img”标签的CSS规则，设置“img”标签【边框】的【Width】属性值增均为“0”。11.3.3 11.3.3 定义定义CSSCSS规则规则11.3.4 11.3.4 制作头部内容制作头部内容 1插入LOGO图标。将鼠标光标置于ID为“logo”的DIV中，选择【插入】/【图像】命令，在弹出的【选择图像源文件】对话框中选择images文件夹下的“logo.png”。2插入站点标语图像。将鼠标光标置于ID为“titl”的DIV中，插入名为“biaoyu.png”的图像。3设置联系信息。将鼠标光标置于ID为“aboutus”的

14、DIV中，输入“联系我们”、“关注我们”、“关于我们”三个段落文本；设置超级链接分别为“mailto:”、“guanzhu.html”和“guanyuwm.html”。11.3.4 11.3.4 制作头部内容制作头部内容 4插入菜单。将鼠标光标置于ID为“menu”的DIV中，选择【插入】/【Spry】/【Spry菜单栏】命令，在弹出的【Spry菜单栏】对话框中选择【水平】选项，编辑菜单项如图所示。11.3.4 11.3.4 制作头部内容制作头部内容 5编辑菜单样式。（1）设置菜单栏文本字体大小。选择【窗口】/【CSS样式】命令，在【CSS样式】面板中展开“SpryMenuBarHorizon

15、tal.css”样式，双击ul.MenuBarHorizontal，在弹出的对话框中设置【类型】中的【Font-size】为“14px”。11.3.4 11.3.4 制作头部内容制作头部内容（2）设置菜单栏宽度及文本对齐方式。在【CSS样式】面板中栏双击“ul.MenuBarHorizontal li”样式，在弹出的对话框中设置【方框】中的【Width】属性值为“150px”；设置【区块】中的【Text-align】属性值为“center”。11.3.4 11.3.4 制作头部内容制作头部内容（3）设置链接样式。在【CSS样式】面板中选择“ul.MenuBarHoriaontal a:hove

16、r，ul.MenuBarHorizontal a:focus”，设置【Color】属性值为“#FFF”，【background-color】属性值为“#F00”。选择“ul.MenuBarHorizontal a.MenuBarItemHover,ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,ul.MenuBarHorizontal a.MenuBarSubmenuVisible”，设置【background-color】属性值为“#F00”。11.3.4 11.3.4 制作头部内容制作头部内容（4）设置“首页”文本样式。将鼠标光标置于“首页”菜

17、单项中，在【属性】检查器中设置ID为“l1”，新建“#box#menu#MenuBar1 li#l1”ID CSS规则，设置【背景】的【background-color】属性值为“#F00”。11.3.4 11.3.4 制作头部内容制作头部内容 6插入搜索表单。将鼠标光标置于ID为“search”的DIV中，选择【插入】/【表单】/【表单】命令，在指定位置插入一个表单，将鼠标光标置于表单中，插入一个【ID】为“ss”的单行文本域和属性【值】为“搜索”的提交按钮。7插入轮显广告。打开站点根文件夹下的“翻滚图像代码.txt”，依据提示将相应代码复制到网页指定位置。11.3.4 11.3.4 制作头

18、部内容制作头部内容 11.3.5 11.3.5 制作网页主体制作网页主体1插入鼠标经过图像。将鼠标光标置于ID为“m1”的DIV中，选择【插入】/【图像对象】/【鼠标经过图像】命令，在弹出的【插入鼠标经过图像】对话框中选择原始图像为“images/fanzhuantuxiang/gm.png”，鼠标经过图像为“images/fanzhuantuxiang/gm1.png”，按下时前往的URL选择“images/guangming/guangm.png”。用同样的方法在ID为“m2”的DIV中，插入原始图像为“images/fanzhuantuxiang/zy.png”鼠标经过图像为“image

19、s/fanzhuantuxiang/zy1.png”按下时前往的URL为“images/zuoyou/zuoyou.jpg”的鼠标经过图像。在ID为“m3”的DIV中，插入原始图像为“images/fanzhuantuxiang/sy.png”鼠标经过图像为“images/fanzhuantuxiang/sy1.png”按下时前往的URL为“images/shuangye/shuangye.jpg”的鼠标经过图像。11.3.5 11.3.5 制作网页主体制作网页主体2设置改变属性行为。选中第一幅鼠标经过图像，选择【窗口】/【行为】命令，打开【行为】面板，单击【行为】面板上的“+”按钮，在弹出的

20、快捷菜单中选择【改变属性】行为，设 置 属 性 如 图 所 示。在【行 为】面 板 中 选 择 事 件 为“onMouseOver”。11.3.5 11.3.5 制作网页主体制作网页主体 用同样的方法设置其他两个鼠标经过图像的行为值为“url(images/zuoyou/zuoyou.jpg)”和“url(images/shuangye/shuangye.jpg)”11.3.5 11.3.5 制作网页主体制作网页主体3录入文本信息并设置列表。在ID为“center”、“news”和“scroll”的DIV中，分别输入文本信息，设置文本标题样式为【标题三】，段落文本设置成项目列表，并设置项目列表

21、的超级链接，如图所示。11.3.5 11.3.5 制作网页主体制作网页主体4设置滚动字幕。将鼠标光标置于“精品欣赏”下的列表中，在设计窗口左下角的【标签选择器】中选择“”标签，选择【插入】/【标签】命令，在打开的【标签选择器】中选择【HTML标签】下的“”标签，如图所示。11.3.5 11.3.5 制作网页主体制作网页主体 单击【插入】按钮，系统自动进入【拆分】窗口，在左侧的代码窗口中显示刚刚插入的“”标签，设置“”标签属性如图所示，单击【关闭】按钮，关闭【标签选择器】。11.3.5 11.3.5 制作网页主体制作网页主体 在ID为“link”和“bot”的DIV中分别插入友情链接和版权信息文

22、本，并设置友情链接的超级链接，如图所示。11.3.6 11.3.6 制作页脚内容制作页脚内容1打开“index.html”，将文件另存为“Templates/moban.dwt”，创建模板文件。2打开“moban.dwt”文件，选中ID为“aboutus”的DIV，选择【插入】/【模板对象】/【可编辑区域】命令，在打开的【新建可编辑区域】对话框中，设置【名称】为“func”，如图所示。11.4 11.4 制作网页模板制作网页模板3 用 同 样 的 方 法，分 别 在 I D 为“s h o w”、“center”、“news”和“scroll”的DIV中插入名称为“main”、“list1”、

23、“list2”、“list3”的可编辑区域，删除可编辑区域内容，如图所示。11.4 11.4 制作网页模板制作网页模板11.4 11.4 制作网页模板制作网页模板4应用模板。选择【文件】/【新建】命令，新建一个空白HTML网页，选择【窗口】/【资源】命令，打开资源面板，单击 按钮，在右侧列表中选择名“moban”的文件，单击面板底部的【应用】按钮，设置【不一致的区域名称】对话框，属性如图所示。将套用模板的网页另存为“guangming.html”。11.4 11.4 制作网页模板制作网页模板5编辑网页文件（1）编辑“func”区域。将鼠标光标置于名为“func”的可编辑区域内，选择【插入】/【

24、图像】命令，在打开的【选择图像源文件】对话框中，选择本地站点“images”文件夹下的“funcimg.gif”图像。11.4 11.4 制作网页模板制作网页模板（2）编辑“mian”区域将鼠标光标置于名为“main”的可编辑区域内，插入一个2行4列的表格，设置【表格宽度】为“100%”，【边框粗细】、【单元格边距】、【单元格间距】均为“0”；在指定单元中，分别插入名为“guangm.png”、“chaji.jpg”、“shafa.jpg”和“shugui.jpg”的图像，并输入相应的文本，如图所示；新建一个名为“.fonta”的基本类，将其保存至“format.css”中，设置为“#666”

25、；分别选中单元格文本，右键单击“.fonta”样式，在弹出的快捷菜单中选择“应用”。11.4 11.4 制作网页模板制作网页模板11.4 11.4 制作网页模板制作网页模板（3）编辑“list1”区域将鼠标光标置于名为“list1”的可编辑区域，插入一个4行2列的表格，设置【表格宽度】为“95%”，【边框粗细】、【单元格边距】、【单元格间距】均为“0”；将鼠标光标置于表格第一行的单元格中，设置单元格【高】为“6”，将鼠标光标置于表格第二行第一列，设置单元格【宽】为“5%”，【高】为“20”；11.4 11.4 制作网页模板制作网页模板（3）编辑“list1”区域选择【插入】/【图像】命令，在打

26、开的【选择图像源文件】对话框中，选择本地站点images文件夹下的“guangming/fengexian.jpg”图像；将鼠标光标置于表格第二行第二列，输入“企业文化”文本，选中文本，在【属性】检查器的【HTML】选项卡中设置【格式】为“标题3”；11.4 11.4 制作网页模板制作网页模板（3）编辑“list1”区域新建“h3”标题标签样式，设置【Font-family】为“微软雅黑”，【Font-size】为“16px”；选中表格第三行的两个单元格，在【属性】检查器中单击按钮，将单元格合并后，进入代码窗口，在鼠标光标所在的“”标签中添加“bgcolor=#FF0000 height=1”

27、属性，如图所示；11.4 11.4 制作网页模板制作网页模板（3）编辑“list1”区域选中表格第四行的两个单元格，在【属性】检查器中单击按钮，将单元格合并，并输入文本；在【CSS面板】中双击“#center”样式，设置【Font-family】为“微软雅黑”，【Font-size】为“14px”。如图所示。11.4 11.4 制作网页模板制作网页模板（4）编辑“list2”区域将鼠标光标置于名为“list2”的可编辑区域，插入一个4行3列的表格，设置【表格宽度】为“95%”，【边框粗细】、【单元格边距】、【单元格间距】均为“0”；将鼠标光标置于表格第一行的单元格中，设置单元格【高】为“6”，

28、将鼠标光标置于表格第二行第一列，设置单元格【宽】为“12”，【高】为“20”；分别设置第二列、第三列单元格【宽】为“175”和“190”。11.4 11.4 制作网页模板制作网页模板（4）编辑“list2”区域选择【插入】/【图像】命令，在打开的【选择图像源文件】对话框中，选择本地站点“images”文件夹下的“guangming/fengexian.jpg”图像；将鼠标光标置于表格第二行第二列，设置输入“家居布置”文本，选中文本，在【属性】检查器的【HTML】选项卡中设置【格式】为“标题3”；11.4 11.4 制作网页模板制作网页模板（4）编辑“list2”区域选中表格第三行的三个单元格，

29、在【属性】检查器中单击按钮，将单元格合并后，进入代码窗口，在鼠标光标所在的“”标签中添加“bgcolor=#FF0000 height=1”属性。选中表格第四行的前两个单元格，在【属性】检查器中单击按钮，将单元格合并，选择【插入】/【图像】命令，在打开的【选择图像源文件】对话框中，选择本地站点“images”文件夹下的“guangming/gmjj.jpg”图像；11.4 11.4 制作网页模板制作网页模板（4）编辑“list2”区域将鼠标光标置于图像右侧的单元格中，输入如图所示文本，选中所有文本，单击【属性】检查器的 按钮，设置文本列表。在【CSS面板】中双击“#news”样式，设置【Fon

30、t-family】为“微软雅黑”，【Font-size】为“14px”。11.4 11.4 制作网页模板制作网页模板（5）编辑“list3”区域右键单击“list1”区域中的表格，在弹出的快捷菜单中选择“拷贝”，将鼠标光标置于“list3”可编辑区域中，右键单击鼠标，在弹出的快捷菜单中选择“粘贴”；将“企业文化”文本删除，输入“家具保养”文本，将“企业文化”单元格下的所有文本删除，输入如图所示文本，并设置文本列表；11.4 11.4 制作网页模板制作网页模板（5）编辑“list3”区域在【CSS面板】中双击“#scroll”样式，设置【Font-family】为“微软雅黑”，【Font-size】为“14px”。11.4 11.4 制作网页模板制作网页模板网页预览效果 11.4 11.4 制作网页模板制作网页模板