个人网页制作毕业设计

1 引言随着Internet 的诞生和发展，许多人不再仅仅局限于网上冲浪，而是参与到网站建设中。企业建站相当于在网上建立一个家，你就可以在这里向客户介绍你的企业，展示你的实力，推销你的产品，网页制作作

1 引言随着Internet 的诞生和发展，许多人不再仅仅局限于网上冲浪，而是参与到网站建设中。企业建站相当于在网上建立一个家，你就可以在这里向客户介绍你的企业，展示你的实力，推销你的产品，网页制作作为网站制作中一个重要的环节，相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。结合本人的实习过程，现就网站建设与管理过程中，网页设计与制作的具体经历，包括：网页设计与制作过程中的网页布局、色彩构置，框架结构等相关事项做以下论述。长治职业技术学院信息工程系毕业设计 2 第一章需求分析 1.1 性能需求 Dreamweaver8.0 要求的运行环境 1． CPU P3-800 2．内存256MB 3．硬盘剩余空间1.8GB 4．显示器分辨率1024×768 5．16 位视频卡。 6．软件WINDOWS2000/XP 当前的开发环境（硬件、软件） 1．CPU AMD Arhlon(tm) 64 ×2 dual Core Processor TK-57 2．内存1GB 3．硬盘剩余空间20GB 4．显示器分辨率1280×800 5．显示卡 ATI Redeon X1250 7．软件WINDOWS XP 1.2 开发工具的介绍 1.2.1 梦幻网页的编织者------Dreamweaver8.0 Dreamweaver 是创建和管理网页的专业化可视编辑器。使用Dreamweaver 可以轻松创建跨平台、跨浏览器的页面。Macromedia 的Roundtrip HTML 技术允许用户随意导入 HTML 文档而无需重新设置代码格式。 Dreamweaver 可以为用户做到：使用动态HTML 功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。长治职业技术学院信息工程系毕业设计 3 Dreamweaver 还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript 代码扩展Dreamweaver 的行为和属性检查器。至于Dreamweaver 工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver 工作区组件有以下若干种： (1) 文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。 (2) 装载器中包含一些打开和关闭常用检查器和模板的按钮。 (3) 对象工具栏包含创建不同类型的对象（例如图象、表格和层等）

的按钮。 (4) 属性检查器显示选定对象的属性。 (5) 快捷菜单可以使用户对当前选择或区域快速执行某些命令。 (6) 可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中 1.2.2 网页动画的制作软件----Micromedia Flash 8.0 Micromedia Flash 8.0 用于web 站点的交互式的矢量图形和动画的制作，它可制作出用于浏览时的导航控制、制作动画图标、带同步声音的大段的动画，创建出生动的富于表现力的网页。Flash 中的图形都是矢量的，占据存储空间较少，因而下载时间短，且能很好地适应浏览者不同尺寸的屏幕。 Flash 的交互性的大部分设置就在 Action 和 Fs Command 里，通过对 Action 和 Fs Command 的设置，你可以随意的设置各事件发生的效果，还有对变量及函数的设置。

1.2.3 JavaScript JavaSript 是一种基于对象(Object)和事件驱动(Event Driven) 并具有安全性能的脚本语言。使用它的目的是与HTML 超文本标记语言、Java 脚本语言（Java 小程序）一起实现在一个Web 页面中链接多个对象，与Web 客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML 语言中实现的。它的出现弥补了HTML 语言的缺陷，它是Java 与HTML 折衷的选择。 1.2.4 影像与动画的制作软件—Adobe Photoshop8.0 Photoshop 8.0 是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。 (1) 文字处理更加方便 (2) 增加的图层集使图层管理更有序。 (3) 新增图像功能：图像的剪切和剪裁更加方便。长治职业技术学院信息工程系毕业设计 4 (4) 将所有工具的选项板改进为工具选项栏放置在工作区顶部，方便先项参数的设置。 (5) 为了更方便地用路径绘画，改进增加了几何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使得矢量绘图功能得到了加强。 1.3 网站设计的步骤 1．规划网站； 2．建立站点及制作页面； 3．注册域名、租用空间； 4．上传；推广及维护 1.4 网站总体结构设计功能模块图（层次图）个人主页主页日志相册音乐欣赏小游戏长治职业技术学院信息工程系毕业设计

5 第二章个人网站设计分析 2.1 相关术语及解析 2.1.1 相关术语及解释 1、Internet Internet(英特网) 诞生于上世纪60 年代，发展非常慢，到90 年代才开始迅速发展。现在英特网已经是世界上最大的网络的，联在英特网上的电脑有数亿台。上面的资料、信息数不胜数，所以有人把英特网叫成是信息的海洋、知识的海洋。 2、站点所谓站点，就是将网页文件和素材文件，有条理地放置站点文件夹里，这些文件与文件夹就构成了网站的实质内容。站点文件夹里除了网页文件还有素材文件，所谓素材就是网页中所用到的图像、声音、视频等，这些内容是以单独文件的形式存在。 3、超链接我们在浏览网页时，当鼠标指针指向某段文本或是某个图像，鼠标指针变成小手状，单击鼠标可以打开其他的网页或是跳转到其他的网站，这就是超链接。采用超链接技术可以将不同的网站、网站中的不同网页、网页中的不同位置彼此串在一起，实现相互间的跳转，方便信息的浏览和查找。人们通过超链接可以很方便很迅速地访问分布于全球计算机上的海量资源，实现在互联网中的漫游。超链接能使Web 服务存在广泛和持久的生命力，超链接可以说是Web 的灵魂。 4、URL URL（Uniform Resource Locator 的缩写），统一资源定位器。互联网中某种信息资源以某种方式存储在网络中的某处，必须用一个惟一的URL 来进行标识，这样才能方便查找。对于Web 来说，可以简单并通俗把URL 理解为网址。每个Web 网页都有自己的网址，在浏览器地址栏里输入网页的URL ，就可以访问这个网页。例如， http://www.sina.com/index.html，其意思就是采用http 超文本传输协议访问新浪网的首页，由于网页均是通过http 超文本传输协议进行访问，默认下，“http://”可以省略不输。 5、IP 地址为了使互联网上的电脑主机在通信时能够相互识别，每台主机都分配一个能表示其位置的IP （Internet Protocol）地址，这如同公用电话网中电话的号码一样。IP 地址是由专门的互联网机构来分配。IP 地址具有惟一性，是由32 位二进制数组成，分为四组，每组8 位，每组之间用小数点分隔，在实际之中常转换成十进制数表示。长治职业技术学院信息工程系毕业设计 6 2.1.2 个人网站的由来和发展互联网

在中国的出现只有短短七年时间，1994 年中国科学院高能物理研究所设立了国内第一个Web 服务器，推出一个叫做“中国之窗”的网页，这可能是国内Internet 上出现的第一个Web 网页，1995 年开始，中国教育科研网，中国科技网，中国公用计算机互联网以及中国金桥网这构成中国数字神经系统的四大互联网络相继建成，使互联网在中国开始真正进入社会生活之中。这时期，个人网站出现的条件还很不成熟，国内上网的人数很少，也缺乏支持个人建站的环境，用户很难找到理想的个人主页存放地。个人网站发展的第二阶段是从1997 年初到1998 年，这段时间，中国网民数量飞速增长，个人网站日渐繁荣，个人主页的数量急剧增加。同时，越来越多的商业网站开始免费提供个人主页空间，这些良好的外部极大地促进了个人网站的发展，涌现了一批很著名的个人网页，从1998 年下半年开始，随着互联网应用的深入的普及，随着众多主页制作工具的出现，使得建站成为一件非常容易的事，创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。长治职业技术学院信息工程系毕业设计 7 第三章、站点的建立及页面制作 3.1 站点建立（1）打开：“窗口”下的“新建站点”（2）按“下一步（3）单击“下一步”（4）单击“下一步”（出现“你如何连接到远程服务器”时选择“无”）（5）单击完成⑴⑵⑶⑷长治职业技术学院信息工程系毕业设计 8 ⑸ 3.2 各个页面的制作页面图 3.2.1 首页的页面：本页有滚动字幕及背景音乐。滚动字幕的制作：使用“标签选择器”插入marquee 标签 1. 把光标插入点放在需要插入滚动字幕的地方。 2. 点击插入面板的“标签选择器”长治职业技术学院信息工程系毕业设计 9 3. 选择 marquee 标签，点击“插入”按钮。使用“标签检查器”设置marquee 标签的属性 4. 转换到代码视图。把光标插入点放在 marquee 标签内。长治职业技术学院信息工程系毕业设计 10 5. 选择“窗口”>“标签检查器”。可以在“标签检查器”设置标签的各种用法。设置marquee 标签的主要用法 6. 点击behavior 设置项右边的下拉箭头，选择滚动字幕内容的运动方式。 7.direction 属性设置字幕内容的滚动方向。长治职业技术学院信息

工程系毕业设计 11 8.scrollamount 属性设置字幕滚动的速度。 9.scrolldelay 属性设置字幕内容滚动时停顿的时间，单位为毫秒。如果要让滚动看起来流畅，数值应该尽量小。实例中设置为1 毫秒。如果要有步进的感觉，就设置时间长一点吧。 10.width 属性设置滚动字幕的宽度。长治职业技术学院信息工程系毕业设计 12 11.onMouseOver 事件设置鼠标移动到滚动字幕时的动作，常设置为停止滚动。 onMouseOut 事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动。 12.style 属性设置字幕内容的样式。实例中设置字幕文字大小，输入了“font:12px;”。 13.loop 属性设置字幕内容滚动次数，默认值为无限。“-1”也为无限。长治职业技术学院信息工程系毕业设计 13 背景音乐的添加： 1．打开行为面板，点击“＋”按钮添加行为。 2．选择“播放声音”。 3. 选择声音文件。一个网页的背景音乐就添加好了。如果要修改背景音乐属性 1. 在文档中选择背景音乐的图标。 2. 在属性检查器中，点击“参数”按钮。 3. 修改参数。长治职业技术学院信息工程系毕业设计 14 3.2.2 日志的页面：制作过程：本页只是简单的超链接与文本编辑，无特殊效果。 3.2.3 相册的页面：制作过程：本页有flash 相册。长治职业技术学院信息工程系毕业设计 15 flash 相册的制作： 2、插入 Flash 。在工具栏中转到“ Flash 元素”工具条，插入 Flash 元素并保存文件，如下图所示。 3、保存Flash 文件，然后可以在属性面板中修改Flash 的长和宽要和预先准备的图片的长和宽一样啊！接着设置 Flash 元素的参数，如下图所示。长治职业技术学院信息工程系毕业设计 16 4、保存文件，完成操作。 3.2.4 音乐欣赏页面：制作过程：音乐播放器插入以下代码：长治职业技术学院信息工程系毕业设计 17 长治职业技术学院信息工程系毕业设计 18 } } 3.2.5 小游戏页面：长治职业技术学院信息工程系毕业设计 19 制作过程：插入flash 动画：选择“插入”>“媒体”>“flash 视频”。在“插入 Flash 视频”对话框中，从“视频类型”弹出式菜单中选择“渐进式下载视频”。关于Flash 视频使用 Dreamweaver 中的“插入 Flash 视频”命令，可将 Flash 视频内容插入 Web 页面，而无需使用 Flash 创

作工具。该命令可以插入 Flash 组件；当您在浏览器中查看它时，它显示您选择的 Flash 视频内容以及一组播放控件。“插入 Flash 视频”命令提供以下选项，用于将视频内容发送给站点访问者：累进式下载视频将 Flash 视频 (FLV) 文件下载到站点访问者的硬盘上，然后播放。但是，与传统的“下载并播放”视频传送方法不同，累进式下载答应在下载完成之前就开始播放视频文件。流视频将 Flash 视频内容进行流处理并立即在 Web 页面中播放。若要在 Web 页长治职业技术学院信息工程系毕业设计 20 面中启用流视频，您必须具有对 Macromedia Flash Communication Server 的访问权限，这是唯一可对 Flash 视频内容进行流处理的服务器。在 URL 文本框中，指定 cafe_townsend_home.flv 文件的相对路径，方法是单击“浏览”，浏览至 cafe_townsend_home.flv 文件（位于站点的 cafe_townsend 根文件夹中），并选择该 FLV 文件。从“外观”弹出式菜单中选择 Halo Skin 2。所选外观的预览会出现在“外观”弹出式菜单下方。“外观”选项指定将包含 Flash 视频内容的 Flash 视频组件的外观。在“宽度”和“高度”文本框中，执行以下操作：在“宽度”文本框中，键入 180。在“高度”文本框中，键入 135 ，然后按 Enter 键。长治职业技术学院信息工程系毕业设计 21 第四章注册域名、租用免费空间 4.1 搜索可以免费申请空间的网站 4.2 注册会员，申请成功长治职业技术学院信息工程系毕业设计 22 第五章上传发布虚拟主机上传网页常用的FTP 软件有CuteFTP 、LeapFTP 、FlashFXP 等等， Dreamweaver 、以及FrontPage 也有发布网页的功能。 CuteFTP 是一款非常受欢迎的FTP 工具，界面简洁，并具有支持上、下载断点续传，操作简单方便等特征，使其在众多的FTP 软件中脱颖而出，无论是下载软件还是更新主页， CuteFTP 都是一款不可多得的好工具。 CuteFTP 上传操作说明（1）启动CuteFtp （2）打开“文件”－＞“站点管理器”（3）定义站点：点击“新建”建立FTP 站，然后定义站点标签，可任意填写。“FTP 主机地址”中填入您的IP 地址或您的域名都可，如：210.192.102.112 ，“站点用户长治职业技术学院信息工程系毕业设计 23 名”中填写您的用

户名（管理员用户名），“站点密码”中填写您的密码。输入密码时，框中只有*字，防止被别人看到。FTP 连接端口为默认的“21”，登录类型请选择“普通”。（4）接远程站点：点击“连接”，即可连接至虚拟主机目录我们可以看到现在我们所看到的界面分为以下四部分：上部：命令区域（工具栏和菜单）中间:（分左右两边）左边：本地区域，即本地硬盘，上面两个小框可以选择驱动器和路径。右边：远程区域，即远端服务器，双击目录图标可进入相关目录。下部：记录区域，从此区域可以看出进程，程序已进行到哪一步。长治职业技术学院信息工程系毕业设计 24 （5）上传网页：从本地区域选定要上传的网页或文件，双击或用鼠标拖至远程区即可完成上传工作。（6）相关操作：连接至远程服务器后可利用鼠标右键中的常用选项对远端文件和目录进行操作，如删除、重命名、移动、修改属性、建立目录等。（7）经过以上操作就可以将您的网页顺利上传至虚拟主机。长治职业技术学院信息工程系毕业设计 25 参考文献 [1]邓文渊. 网页制作高手[M].北京：人民邮电大学出版，2007，6 [2]李宪广. 网页制作边学边用[M].北京：清华大学出版社， 2009，3 [3]网页设计入门

[EB/OL].http://www.xue8.com/sale/view.asp?Article ID=288 [4]许凌云，柳勇良. 网页设计全方位学习[M].北京：清华大学出版社，2008，11 [5]陈琳.photoshop cs3 入门实战与提高[M].北京：电子工业出版社，2008，11 [6]焦慧. 网页制作基础与典型范例[M].北京：电子工业出版社，2008，7 [7]戎马工作室.Dreamweaver 8 与asp 动态网站开发[M].北京：机械工业出版社， 2006，5 [8]戴一波.Dreamweaver CS3 网站制作炫例精讲[M].北京：电子工业出版社， 2008， 1 [9]何秀芳. 网页制作与网站建设课堂实录[M].北京：人民邮电出版社. 2009，3 [10]孙连三. 新编网页制作与网站建设入门与提高[M].北京：人民邮电出版社. 2008，9 [11]邓文渊. 网页制作高手FLASH 8[M].北京：人民邮电出版社， 2007，6 [12]胡崧. 超梦幻劲爆网页[M].中国青年出版社.2008，7 [13]Scot Johson etal.using Active Server Page[J].Que 2007 [14]卓越科技.PHOTOSHOP CS3 美工广告设计百炼成精[M].电子科技出版社， 2009， 3 [15]David Hunter

etal ，Beginning XML[J].Wrox Press Ltd，2005 [16]杨大勇，李金江.ASP 网络开发自学导航[M].北京：机械工业出版社，2007，6 [17]卓越科技.SQL SERVER 数据库开发培训教程[M].北京：电子工业出版社， 2009， 4 [18]李曦琳.WEB 导航设计[M].北京：电子工业出版社，2009，3 [19]力诚教育.ACCESS 2007 完全自学手册[M].成都：四川出版集团，2009，3 [20]丛书编委会.ASP 动态网页编辑[M].北京：清华大学出版社，2006，10 [21]陈刚. 商业网站开发从入门到精通[M].科学出版社，2008，2 长治职业技术学院信息工程系毕业设计 26 结束语不知不觉中网页设计与制作的毕业设计将要结束了，这门课程所包含内容的丰富是我从没有想到的。在整个学习过程中，我接触了Flash 、Dreamweaver 、等重要工具，我很庆幸我能够学到这么多的内容。网页设计与制作毕业设计是在宋丽芳老师的悉心指导下独立完成的。虽然整个内容还有很多不足，但是我的确能够感到在我制作过程中技能的提高。在今后的学习生活中，我将不断提高自己网页设计与制作的能力和水平，从而弥补在本次毕业设计中的不足。在此我要感谢在毕业设计期间给予我帮助的许多人。首先，我要特别感谢的是我的指导老师宋丽芳老师。因为是他为我提供了一个正确的方向，才使我完成了毕业设计。在设计期间他也给予我无私的帮助，在此表示深深的谢意。