互动网页设计

《互动网页设计》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第五章　互动网页设计5．1用Dreamweaver制作静态网页DreamweaverMX是建立Web站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能，和代码编辑支持组合为一个强大的工具，利用它可快速地创建符合标准的站点和应用程序。开发人员可以将其选择的服务器技术与Dreamweaver配合使用，建立将用户连接到数据库、Web服务和旧式系统的强大Internet应用程序。下面介绍用DreamWeaver来制作一个静态网页的方法。演示：“华中大在线”预备：在D盘根目录下建一个文件夹“MyWeb”5.1.1制作网站主页启动DreamWeaver；单击

2、“文件”菜单的“新建”命令；选择“常规”选项中“基本页”的“HTML”；然后单击“创建”按钮。打开一个默认的htm类型的文件（untitled-1*）。选择“设计”选项后，在此基础上进行编辑。411、建立并保存主页文档在“标题”栏中输入“华中大在线”单击“修改”菜单下的“页面属性”命令在出现的“页面属性”对话框中设置：背景：白色；文本：黑色(2004在“外观”中)超级链接：红色(2004在“链接”中)单击“文件”菜单下“保存”命令，将该文件保存在文件夹D:MyWeb中，文件名为index.htm。2　主页的设计(演示、分析：主页)（1）插入主页的画面单击

3、“插入”菜单的“图像”命令，弹出“选择图像源”对话框；在文件夹“D:MyWebimage”中：选择文件“bg1.jpg”后，单击“确认”按钮41（2）在主页中建立超级链接右击出现的图片后，选择“属性”命令；在“属性”对话框中选择“矩形热点工具”。在图片上用鼠标选择“新闻”区域为热点区域。41打开该热点的“属性”对话框，进行属性的设置：链接：为当前文件夹D:MyWeb下的web/xinwen.htm即在网页中单击此热点时，链接到web目录下的xinwen.htm页面；目标：选择_self”，表示不另外打开新的浏览器窗口替代：键入“浏览新闻”，表示链接提

4、示信息　　关闭“属性”面板，“新闻”已设置为超级链接。类似地，再将“论坛”区域设置为超级链接：链接为：web/luntan.htm；替代为：论坛　（3）保存主页单击“文件”菜单下“保存”命令保存编辑好的index.htm文件按F12键，可浏览已经修改了的主页单击超级链接“新闻”，可进入到相应的子页面。(不过由于要访问的子页面还没有建立，所以浏览器显示“该页无法显示”等信息)415.1.２　建立一个子页面(新闻页)１、设计“新闻页”的框架(演示、分析：新闻页)　“新闻页”的框架如下图所示：主要内容页标动画子子页选项2、建立“新闻页”的文档单击“文件”菜单的“

5、新建”命令；选择“常规”选项中“基本页”的“HTML”然后单击“创建”按钮，创建一个新的html文档　在“标题”栏中输入“华中大新闻中心”单击“修改”菜单的“页面属性”命令进行与主页相应的设置：41单击“文件”菜单“保存”命令，将文件保存在文件夹Ｄ:MyWebWeb中，文件名为xinwen.htm３、新闻页的设计(1)用表格实现粗框架单击“插入”菜单“表格”命令，在对话框中的行数和列数中输入“2”和“1”然后单击“确定”按钮。在表格第一行单击鼠标，使之处于编辑状态用同样方法在该行内插入一个1行、2列的表格(2)设计“页标”的宽和高激活新插入的表格的第一

6、行、第一列此时状态栏如图所示：加重表示已经激活，即：编辑已经处于该列、或单元格中。在属性框中将该列的宽、和高分别设置为:241和106象素:41(3)插入一张图片作为页标单击“插入”菜单“图象”命令插入文件“MyWeb/image/online.gif”中的图片(4)设计动画的框架在第1行、第2列中再插入一个2行、1列的表格使编辑处于这个新插入表格的第1行在该行的属性框中设置高为60象素。(5)在该行中插入一张Flash动画单击“插入”菜单“媒体”的“Flash”命令；插入文件“MyWeb/flash/xqbanner.swf”中的动画。在该动画的

7、“属性”对话框中，将其宽设置为535(或525)，高为60，其他设置如图：保存后，按F12进行显示。41（若限制Flash动画的显示，单击提示栏，选择“允许阻止的内容”）(6)设计“子页选项”在第2行的属性框中进行如下设置：高为46，背景颜色为黑色，字体颜色为白色：在该行中输入一些导航性的文字：校内快讯

8、专题报道

9、校报在线

10、高校动态

11、返回首页选择文字后，打开属性对话框：选择字的“大小”(如18)并加粗选择字体：如：华文新魏。若没有，可添加字体：先打开“字体”框的“编辑字体列表”单击按钮“＋”添加列表项；单击按钮“«”将所选择的字体添加到列表中将每个文字项目

12、依次设置为超级链接，分别链接到相应的页面。41如选中文字“返回首页