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

《新媒体网页设计与制作DreamweaverCS6基础、案例、技巧实用教程第11章课件.ppt》由会员分享，可在线阅读，更多相关《新媒体网页设计与制作DreamweaverCS6基础、案例、技巧实用教程第11章课件.ppt（65页珍藏版）》请在三一办公上搜索。

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新建网页文件。选择【文件】/【新建】命令，在打开的【新建文档】对话框中，选择【空白页】，【页面类型】选择【HTM

3、L】，单击【创建】按钮，如图所示。,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.htm

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

6、1.3.2 使用DIV+CSS布局网页结构,1 插入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

7、使用DIV+CSS布局网页结构,11.3.2 使用DIV+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

8、”的ID CSS规则，创建方法如步骤（1），以下均相同。属性设置如图所示。,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规则，属性设置如图

9、所示。,11.3.2 使用DIV+CSS布局网页结构,(4) 新建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规则。选

10、中ID为“p,（8）新建ID为“line”的CSS规则。选中ID为“line”的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

11、”的ID CSS规则，属性设置如图所示。,11.3.2 使用DIV+CSS布局网页结构,(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）分别创建I

12、D为“center”、“news”和“scroll”的CSS规则。选中名为“center”的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 使用

13、DIV+CSS布局网页结构,（14）新建ID为“link”的CSS规则。选中名为“lin,（15）新建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定义网页整体

14、样式。将鼠标光标置于文档窗口的空白处或单击标,2定义链接样式。新建“a”标签的CSS规则。属性设置如图所示。3定义图像边框样式。新建“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中，插入名为“biaoy

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

16、内容,4插入菜单。将鼠标光标置于ID为“menu”的DIV中，选,5编辑菜单样式。（1）设置菜单栏文本字体大小。选择【窗口】/【CSS样式】命令，在【CSS样式】面板中展开 “SpryMenuBarHorizontal.css”样式，双击ul.MenuBarHorizontal，在弹出的对话框中设置【类型】中的【Font-size】为“14px”。,11.3.4 制作头部内容,5编辑菜单样式。11.3.4 制作头部内容,（2）设置菜单栏宽度及文本对齐方式。在【CSS样式】面板中栏双击“ul.MenuBarHorizontal li”样式，在弹出的对话框中设置【方框】中的【Width】属性值为“

17、150px”；设置【区块】中的【Text-align】属性值为“center”。,11.3.4 制作头部内容,（2）设置菜单栏宽度及文本对齐方式。在【CSS样式】面板中栏,（3）设置链接样式。在【CSS样式】面板中选择“ul.MenuBarHoriaontal a:hover，ul.MenuBarHorizontal a:focus”，设置【Color 】属性值为“#FFF”， 【background-color】属性值为“#F00”。选择“ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSu

18、bmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible”，设置 【background-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）设置“首页”文本样式。将鼠标光标置于“首页

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

20、择原始图像为“images/fanzhuantuxiang/gm.png”，鼠标经过图像为“images/fanzhuantuxiang/gm1.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”的

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

22、 制作网页主体,2设置改变属性行为。选中第一幅鼠标经过图像，选择【窗口】/,用同样的方法设置其他两个鼠标经过图像的行为值为“url (images/zuoyou/zuoyou.jpg)”和“url(images/shuangye/shuangye.jpg)”,11.3.5 制作网页主体,用同样的方法设置其他两个鼠标经过图像的行为值,3录入文本信息并设置列表。在ID为“center”、“news”和“scroll”的DIV中，分别输入文本信息，设置文本标题样式为【标题三】，段落文本设置成项目列表，并设置项目列表的超级链接，如图所示。,11.3.5 制作网页主体,3录入文本信息并设置列表。在ID为

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

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

25、的DIV中插入名称为“main”、“list1”、“list2”、“list3”的可编辑区域，删除可编辑区域内容，如图所示。,11.4 制作网页模板,3用同样的方法，分别在ID为“show”、“center”,11.4 制作网页模板,11.4 制作网页模板,4应用模板。选择【文件】/【新建】命令，新建一个空白HTML网页，选择【窗口】/【资源】命令，打开资源面板，单击 按钮，在右侧列表中选择名“moban”的文件，单击面板底部的【应用】按钮，设置【不一致的区域名称】对话框，属性如图所示。将套用模板的网页另存为“guangming.html”。,11.4 制作网页模板,4应用模板。选择【文件】/

26、【新建】命令，新建一个空白HTM,5编辑网页文件（1）编辑“func”区域。将鼠标光标置于名为“func”的可编辑区域内，选择【插入】/【图像】命令，在打开的【选择图像源文件】对话框中，选择本地站点“images”文件夹下的“funcimg.gif”图像。,11.4 制作网页模板,5编辑网页文件11.4 制作网页模板,（2）编辑“mian”区域将鼠标光标置于名为“main”的可编辑区域内，插入一个2行4列的表格，设置【表格宽度】为“100%”，【边框粗细】、【单元格边距】、【单元格间距】均为“0”；在指定单元中，分别插入名为“guangm.png”、“chaji.jpg”、“shafa.jpg

27、”和“shugui.jpg”的图像，并输入相应的文本，如图所示；新建一个名为“.fonta”的基本类，将其保存至“format.css”中，设置为“#666”；分别选中单元格文本，右键单击“.fonta”样式，在弹出的快捷菜单中选择“应用”。,11.4 制作网页模板,（2）编辑“mian”区域11.4 制作网页模板,11.4 制作网页模板,11.4 制作网页模板,（3）编辑“list1”区域将鼠标光标置于名为“list1”的可编辑区域，插入一个4行2列的表格，设置【表格宽度】为“95%”，【边框粗细】、【单元格边距】、【单元格间距】均为“0”；将鼠标光标置于表格第一行的单元格中，设置单元格【高

28、】为“6”，将鼠标光标置于表格第二行第一列，设置单元格【宽】为“5%”，【高】为“20”；,11.4 制作网页模板,（3）编辑“list1”区域11.4 制作网页模板,（3）编辑“list1”区域选择【插入】/【图像】命令，在打开的【选择图像源文件】对话框中，选择本地站点images文件夹下的“guangming/fengexian.jpg”图像；将鼠标光标置于表格第二行第二列，输入“企业文化”文本，选中文本，在【属性】检查器的【HTML】选项卡中设置【格式】为“标题3”；,11.4 制作网页模板,（3）编辑“list1”区域11.4 制作网页模板,（3）编辑“list1”区域新建“h3”标题

29、标签样式，设置【Font-family】为“微软雅黑”，【Font-size】为“16px”；选中表格第三行的两个单元格，在【属性】检查器中单击按钮，将单元格合并后，进入代码窗口，在鼠标光标所在的“”标签中添加“bgcolor=#FF0000 height=1”属性，如图所示；,11.4 制作网页模板,（3）编辑“list1”区域11.4 制作网页模板,（3）编辑“list1”区域选中表格第四行的两个单元格，在【属性】检查器中单击按钮，将单元格合并，并输入文本；在【CSS面板】中双击“#center”样式，设置【Font-family】为“微软雅黑”，【Font-size】为“14px”。如图

30、所示。,11.4 制作网页模板,（3）编辑“list1”区域11.4 制作网页模板,（4）编辑“list2”区域将鼠标光标置于名为“list2”的可编辑区域，插入一个4行3列的表格，设置【表格宽度】为“95%”，【边框粗细】、【单元格边距】、【单元格间距】均为“0”；将鼠标光标置于表格第一行的单元格中，设置单元格【高】为“6”，将鼠标光标置于表格第二行第一列，设置单元格【宽】为“12”，【高】为“20”；分别设置第二列、第三列单元格【宽】为“175”和“190”。,11.4 制作网页模板,（4）编辑“list2”区域11.4 制作网页模板,（4）编辑“list2”区域选择【插入】/【图像】命令

31、，在打开的【选择图像源文件】对话框中，选择本地站点“images”文件夹下的“guangming/fengexian.jpg”图像；将鼠标光标置于表格第二行第二列，设置输入“家居布置”文本，选中文本，在【属性】检查器的【HTML】选项卡中设置【格式】为“标题3”；,11.4 制作网页模板,（4）编辑“list2”区域11.4 制作网页模板,（4）编辑“list2”区域选中表格第三行的三个单元格，在【属性】检查器中单击按钮，将单元格合并后，进入代码窗口，在鼠标光标所在的“”标签中添加“bgcolor=#FF0000 height=1”属性。选中表格第四行的前两个单元格，在【属性】检查器中单击按钮

32、，将单元格合并，选择【插入】/【图像】命令，在打开的【选择图像源文件】对话框中，选择本地站点“images”文件夹下的“guangming/gmjj.jpg”图像；,11.4 制作网页模板,（4）编辑“list2”区域11.4 制作网页模板,（4）编辑“list2”区域将鼠标光标置于图像右侧的单元格中，输入如图所示文本，选中所有文本，单击【属性】检查器的 按钮，设置文本列表。在【CSS面板】中双击“#news”样式，设置【Font-family】为“微软雅黑”，【Font-size】为“14px”。,11.4 制作网页模板,（4）编辑“list2”区域11.4 制作网页模板,（5）编辑“lis

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