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

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

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

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

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

5、在【CSS样式】面板中单击“附加样式表”按钮，在弹出的【链接外部样式表】对话框中设置【文件/URL】为“CSS/format.css”，【添加为】选择“链接”，单击【确定】按钮，如图所示。 11.3 制作过程7附加样式表。打开“index.html”文件，选择【窗口本例的网页总体布局如图所示。 11.3.2 使用DIV+CSS布局网页结构本例的网页总体布局如图所示。 11.3.2 使用DIV+C1 插入DIV。（1）插入网页容器DIV。首先将鼠标光标置于目标位置，选择【插入】/【布局对象】/【DIV标签】命令，插入一个名为“box”的DIV。 11.3.2 使用DIV+CSS布局网页结构1 插

6、入DIV。 11.3.2 使用DIV+CSS布局网（2）插入其他DIV。将鼠标光标置于“box”内部，分别插入名字分别为“logo”、“titl”、“aboutus”、“menu”、“searc”、“picBox”、“show”(包含嵌套DIV“list”和“ifr”，“list”中包含嵌套DIV“m1”、“m2”和“m3”)、“center”、“news”、“scroll”、“link”和“bot”的DIV，如图所示。 11.3.2 使用DIV+CSS布局网页结构（2）插入其他DIV。将鼠标光标置于“box”内部，分别插入 11.3.2 使用DIV+CSS布局网页结构 11.3.2 使用DI

7、V+CSS布局网页结构2创建DIV布局（1）新建ID为“box”的CSS规则。选中ID为“box”的DIV，选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，单击【CSS样式】面板底部的按钮，创建名为“#box”的ID CSS规则，在【规则定义】下拉列表框中 选择“CSS/format.css”，单击【确定】 按钮，属性设置如图所示。 11.3.2 使用DIV+CSS布局网页结构2创建DIV布局 11.3.2 使用DIV+CSS布局网（2）新建ID为“logo”的CSS规则。选中ID为“logo”的DIV，创建名为“#logo”的ID CSS规则，创建方法如步骤（1），以下均相同。属性

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

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

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

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

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

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

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

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

16、【CSS样式】命令，在【CSS样式】面板中展开 “SpryMenuBarHorizontal.css”样式，双击ul.MenuBarHorizontal，在弹出的对话框中设置【类型】中的【Font-size】为“14px”。11.3.4 制作头部内容 5编辑菜单样式。11.3.4 制作头部内容 （2）设置菜单栏宽度及文本对齐方式。在【CSS样式】面板中栏双击“ul.MenuBarHorizontal li”样式，在弹出的对话框中设置【方框】中的【Width】属性值为“150px”；设置【区块】中的【Text-align】属性值为“center”。11.3.4 制作头部内容 （2）设置菜单栏宽度

17、及文本对齐方式。在【CSS样式】面板中栏（3）设置链接样式。在【CSS样式】面板中选择“ul.MenuBarHoriaontal a:hover，ul.MenuBarHorizontal a:focus”，设置【Color 】属性值为“#FFF”， 【background-color】属性值为“#F00”。选择“ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible”，设置 【back

18、ground-color】属性值为“#F00”。 11.3.4 制作头部内容 （3）设置链接样式。在【CSS样式】面板中选择“ul.Men（4）设置“首页”文本样式。将鼠标光标置于“首页”菜单项中，在【属性】检查器中设置ID为“l1”，新建“#box #menu #MenuBar1 li #l1”ID CSS规则，设置【背景】的【background-color】属性值为“#F00”。11.3.4 制作头部内容 （4）设置“首页”文本样式。将鼠标光标置于“首页”菜单项中， 6插入搜索表单。将鼠标光标置于ID为“search”的DIV中，选择【插入】/【表单】/【表单】命令，在指定位置插入一个表

19、单，将鼠标光标置于表单中，插入一个【ID】为“ss”的单行文本域和属性【值】为“搜索”的提交按钮。7插入轮显广告。打开站点根文件夹下的“翻滚图像代码.txt”，依据提示将相应代码复制到网页指定位置。11.3.4 制作头部内容 6插入搜索表单。将鼠标光标置于ID为“search”的D11.3.5 制作网页主体1插入鼠标经过图像。将鼠标光标置于ID为“m1”的DIV中， 选择【插入】/【图像对象】/【鼠标经过图像】命令，在弹出的【插入鼠标经过图像】对话框中选择原始图像为“images/fanzhuantuxiang/gm.png”，鼠标经过图像为“images/fanzhuantuxiang/gm

20、1.png”，按下时前往的URL选择“images/guangming/guangm.png”。11.3.5 制作网页主体1插入鼠标经过图像。将鼠标光标置用同样的方法在ID为“m2”的DIV中，插入原始图像为“images/fanzhuantuxiang/zy.png”鼠标经过图像为“images/fanzhuantuxiang/zy1.png”按下时前往的URL为“images/zuoyou/zuoyou.jpg”的鼠标经过图像。在ID为“m3”的DIV中，插入原始图像为“images/fanzhuantuxiang/sy.png”鼠标经过图像为“images/fanzhuantuxiang

21、/sy1.png”按下时前往的URL为“images/shuangye/shuangye.jpg”的鼠标经过图像。11.3.5 制作网页主体用同样的方法在ID为“m2”的DIV中，11.3.5 制作网2设置改变属性行为。选中第一幅鼠标经过图像，选择【窗口】/【行为】命令，打开【行为】面板，单击【行为】面板上的“+”按钮，在弹出的快捷菜单中选择【改变属性】行为，设置属性如图所示。在【行为】面板中选择事件为“onMouseOver”。11.3.5 制作网页主体2设置改变属性行为。选中第一幅鼠标经过图像，选择【窗口】/ 用同样的方法设置其他两个鼠标经过图像的行为值为“url (images/zuoy

22、ou/zuoyou.jpg)”和“url(images/shuangye/shuangye.jpg)”11.3.5 制作网页主体 用同样的方法设置其他两个鼠标经过图像的行为值3录入文本信息并设置列表。在ID为“center”、“news”和“scroll”的DIV中，分别输入文本信息，设置文本标题样式为【标题三】，段落文本设置成项目列表，并设置项目列表的超级链接，如图所示。11.3.5 制作网页主体3录入文本信息并设置列表。在ID为“center”、“ne4设置滚动字幕。将鼠标光标置于“精品欣赏”下的列表中，在设计窗口左下角的【标签选择器】中选择“”标签，选择【插入】/【标签】命令，在打开的【

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

24、emplates /moban.dwt”，创建模板文件。2打开“moban.dwt”文件，选中ID为“aboutus”的DIV，选择【插入】/【模板对象】/【可编辑区域】命令，在打开的【新建可编辑区域】对话框中，设置【名称】为“func”，如图所示。11.4 制作网页模板1打开“index.html”，将文件另存为“Templa3用同样的方法，分别在ID为“show”、“center”、“news”和“scroll”的DIV中插入名称为“main”、“list1”、“list2”、“list3”的可编辑区域，删除可编辑区域内容，如图所示。11.4 制作网页模板3用同样的方法，分别在ID为“sh

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

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

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

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

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