互动网页制作.doc

　　　　　　　　　　　第五章　互动网页设计 5．1 用Dreamweaver制作静态网页 Dreamweaver MX是建立Web站点和应用程序的专业工具。 它将可视布局工具、应用程序开发功能，和代码编辑支持组合为一个强大的工具，利用它可快速地创建符合标准的站点和应用程序。 开发人员可以将其选择的服务器技术与Dreamweaver配合使用，建立将用户连接到数据库、Web服务和旧式系统的强大Internet应用程序。 下面介绍用DreamWeaver来制作一个静态网页的方法。 演示：“华中大在线” 预备：在D盘根目录下建一个文件夹“MyWeb” 5.1.1 制作网站主页 启动DreamWeaver； 单击“文件”菜单的“新建”命令； 选择“常规”选项中“基本页”的“HTML”； 然后单击“创建”按钮。 打开一个默认的htm类型的文件（untitled-1*）。 选择“设计”选项后，在此基础上进行编辑。 1、建立并保存主页文档 在“标题”栏中输入“华中大在线” 单击“修改”菜单下的“页面属性”命令 在出现的“页面属性”对话框中设置： 背景：白色；文本：黑色 (2004在“外观”中) 超级链接：红色(2004在“链接”中) 单击“文件”菜单下“保存”命令，将该文件保存在文件夹D:\MyWeb中，文件名为index.htm。 2　主页的设计(演示、分析：主页) （1）插入主页的画面 单击“插入”菜单的“图像”命令，弹出“选择图像源”对话框； 在文件夹“D:\MyWeb\image”中： 选择文件“bg1.jpg”后，单击“确认”按钮 （2）在主页中建立超级链接 右击出现的图片后，选择“属性”命令； 在“属性”对话框中选择“矩形热点工具”。 在图片上用鼠标选择“新闻”区域为热点区域。 打开该热点的“属性”对话框，进行属性的设置： 链接： 为当前文件夹D:\MyWeb下的web\xinwen.htm 即在网页中单击此热点时，链接到web目录下的 xinwen.htm页面； 目标：选择_self”，表示不另外打开新的浏览器窗口 替代：键入“浏览新闻” ，表示链接提示信息 　 　关闭“属性”面板，“新闻”已设置为超级链接。 类似地，再将“论坛”区域设置为超级链接： 链接为：web\luntan.htm； 替代为：论坛　 （3）保存主页 单击“文件”菜单下“保存”命令 保存编辑好的index.htm文件 按F12键，可浏览已经修改了的主页 单击超级链接“新闻”，可进入到相应的子页面。 (不过由于要访问的子页面还没有建立，所以浏览器显示“该页无法显示”等信息) 5.1.２　建立一个子页面(新闻页) １、设计“新闻页”的框架(演示、分析：新闻页) 　“新闻页”的框架如下图所示： 2、建立“新闻页”的文档 单击“文件”菜单的“新建”命令； 选择“常规”选项中“基本页”的“HTML” 然后单击“创建”按钮，创建一个新的html文档 　 在“标题”栏中输入“华中大新闻中心” 单击“修改”菜单的“页面属性”命令 进行与主页相应的设置： 单击“文件”菜单“保存”命令，将文件保存在文件夹Ｄ:\MyWeb\Web中，文件名为xinwen.htm ３、新闻页的设计 (1) 用表格实现粗框架 单击“插入”菜单“表格”命令， 在对话框中的行数和列数中输入“2”和“1” 然后单击“确定”按钮。 在表格第一行单击鼠标，使之处于编辑状态 用同样方法在该行内插入一个1行、2列的表格 (2) 设计“页标”的宽和高 激活新插入的表格的第一行、第一列 此时状态栏如图所示： td加重表示已经激活，即： 编辑已经处于该列、或单元格中。 在属性框中将该列的宽、和高分别设置为: 241和106象素: (3) 插入一张图片作为页标 单击“插入”菜单“图象”命令 插入文件“MyWeb/image/online.gif”中的图片 (4) 设计动画的框架 在第1行、第2列中再插入一个2行、1列的表格 使编辑处于这个新插入表格的第1行 在该行的属性框中设置高为60象素。 (5) 在该行中插入一张Flash动画 单击“插入”菜单“媒体”的“Flash”命令； 插入文件“MyWeb /flash/xqbanner.swf”中的动画。 在该动画的“属性”对话框中，将其 宽设置为535(或525)，高为60，其他设置如图： 保存后，按F12进行显示。 （若限制Flash动画的显示， 单击提示栏，选择“允许阻止的内容”） (6) 设计“子页选项” 在第2行的属性框中进行如下设置： 高为46，背景颜色为黑色，字体颜色为白色： 在该行中输入一些导航性的文字： 校内快讯|专题报道|校报在线|高校动态|返回首页 选择文字后，打开属性对话框： 选择字的“大小”(如18)并加粗 选择字体：如：华文新