毕业设计（论文）-个人网页制作.doc

《毕业设计（论文）-个人网页制作.doc》由会员分享，可在线阅读，更多相关《毕业设计（论文）-个人网页制作.doc（34页珍藏版）》请在三一文库上搜索。

1、长治职业技术学院信息工程系毕业设计长治职业技术学院信息工程系毕业设计说明书设计课题名称 个人网站设计专业班级 08计大一班 .学生姓名 .指导教师 .2011年 5月5日毕业设计任务书专业： 计算机应用 班级： 08计大一班 .课 题 名 称个人网站设计指 导 教 师学 生 姓 名毕业设计起止时间2011年02月28日 2011年05月5日共 8 周课题的目的与任务：1、 通过毕业设计能够综合所学知识进行网站的设计，其中包括页面的布局、颜色的搭配、图片的处理等基本知识。2、 网站的选材要精，主题要鲜明，布局要合理，色彩的搭配要美观并且符合主题。3、 按照要求撰写毕业论文。课题的要求：内容要求:

2、在老师指导下独立完成毕业设计，严禁抄袭。所引资料须注明出处；主动与指导老师进行联系与沟通，在指导老师指导下按期按质完成毕业设计;提交要求:网站电子档。毕业设计说明书。拟定的工作进度(以周为单位)：第 周搜集整理相关素材第 周确定总体设计方案第3-6周进行过程设计第 周撰写毕业设计文档（说明书）第 周修改、整理说明书并装订成册任务下达人(签字)： 日期： 2011 年 2 月 28 日任务接受人(签字)： 日期： 2011 年 2 月 28 日信息工程系毕业设计综合评价表指导教师对设计说明书的评语指导教师签字： 年 月 日毕业设计指导小组意见毕业设计指导小组组长签字： 年 月 日毕业答辩评语答辩

3、小组组长签字： 年 月 日备注毕业设计成绩答辩小组组长签字年 月 日摘 要网页设计作为用户界面交互设计的延伸，是在新的媒体和新的技术支持下实现一个全新的设计创作领域。设计创作网页应遵循其特有的特点和结构思路，具备实际可行性和外观的时尚。本论文讲述了网站建设的一般步骤，并结合丰富的色彩应用与网页设计理论，通过我的个人网页制作实例，阐述了网页设计的视觉效果和具体操作。关键词 网页 色彩 网站建设 布局目 录引 言1第一章 需求分析21.1 性能需求21.2开发工具的介绍21.2.1梦幻网页的编织者-Dreamweaver8.021.2.2网页动画的制作软件-Micromedia Flash 8.0

4、31.2.3 JavaScript31.2.4影像与动画的制作软件Adobe Photoshop8.031.3网站设计的步骤41.4网站总体结构设计4第二章 个人网站设计分析52.1相关术语及解析52.1.1相关术语及解释52.1.2个人网站的由来和发展6第三章、站点的建立及页面制作73.1站点建立73.2各个页面的制作页面图83.2.1首页的页面：83.2.2日志的页面：143.2.3相册的页面：143.2.4音乐欣赏页面：163.2.5小游戏页面：18第四章 注册域名、租用免费空间214.1搜索可以免费申请空间的网站214.2注册会员，申请成功21第五章 上传发布22参考文献25结 束 语

5、26引 言随着Internet的诞生和发展，许多人不再仅仅局限于网上冲浪，而是参与到网站建设中。企业建站相当于在网上建立一个家，你就可以在这里向客户介绍你的企业，展示你的实力，推销你的产品，网页制作作为网站制作中一个重要的环节，相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。结合本人的实习过程，现就网站建设与管理过程中，网页设计与制作的具体经历，包括：网页设计与制作过程中的网页布局、色彩构置，框架结构等相关事项做以下论述。第一章 需求分析1.1 性能需求Dreamweaver8.0要求的运行环境 1 CPU P3-8002内存256MB3硬盘剩余空间1.8GB4显示器分

6、辨率1024768516位视频卡。6软件WINDOWS2000/XP 当前的开发环境（硬件、软件）1CPU AMD Arhlon(tm) 64 2 dual Core Processor TK-572内存1GB3硬盘剩余空间20GB4显示器分辨率12808005显示卡 ATI Redeon X12507软件WINDOWS XP1.2开发工具的介绍1.2.1梦幻网页的编织者-Dreamweaver8.0Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术允许用户随意导入HTM

7、L文档而无需重新设置代码格式。Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种：(1) 文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。(

8、2) 装载器中包含一些打开和关闭常用检查器和模板的按钮。(3) 对象工具栏包含创建不同类型的对象（例如图象、表格和层等）的按钮。(4) 属性检查器显示选定对象的属性。(5) 快捷菜单可以使用户对当前选择或区域快速执行某些命令。(6) 可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中1.2.2网页动画的制作软件-Micromedia Flash 8.0Micromedia Flash 8.0用于web站点的交互式的矢量图形和动画的制作，它可制作出用于浏览时的导航控制、制作动画图标、带同步声音的大段的动画，创建出生动的富于表现力的网页。Flash中的图形都是矢量的，占

9、据存储空间较少，因而下载时间短，且能很好地适应浏览者不同尺寸的屏幕。Flash 的交互性的大部分设置就在 Action 和 Fs Command 里，通过对 Action 和 Fs Command 的设置，你可以随意的设置各事件发生的效果，还有对变量及函数的设置。1.2.3 JavaScriptJavaSript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标

10、准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择。1.2.4影像与动画的制作软件Adobe Photoshop8.0Photoshop 8.0是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。(1) 文字处理更加方便(2) 增加的图层集使图层管理更有序。(3) 新增图像功能：图像的剪切和剪裁更加方便。(4) 将所有工具的选项板改进为工具选项栏放置在工作区顶部，方便先项参数的设置。(5) 为了更方便地用路径绘画，改进增加了几何形状工具，通过选择工具的不同工作模式，可创建路径、

11、几何形状或几何填充区，使得矢量绘图功能得到了加强。1.3网站设计的步骤1规划网站；2建立站点及制作页面；3注册域名、租用空间；4上传；推广及维护1.4网站总体结构设计功能模块图（层次图）个人主页主页日志相册音乐欣赏小游戏第二章 个人网站设计分析2.1相关术语及解析2.1.1相关术语及解释1、InternetInternet(英特网)诞生于上世纪60年代，发展非常慢，到90年代才开始迅速发展。现在英特网已经是世界上最大的网络的，联在英特网上的电脑有数亿台。上面的资料、信息数不胜数，所以有人把英特网叫成是信息的海洋、知识的海洋。2、站点所谓站点，就是将网页文件和素材文件，有条理地放置站点文件夹里，

12、这些文件与文件夹就构成了网站的实质内容。站点文件夹里除了网页文件还有素材文件，所谓素材就是网页中所用到的图像、声音、视频等，这些内容是以单独文件的形式存在。3、超链接我们在浏览网页时，当鼠标指针指向某段文本或是某个图像，鼠标指针变成小手状，单击鼠标可以打开其他的网页或是跳转到其他的网站，这就是超链接。采用超链接技术可以将不同的网站、网站中的不同网页、网页中的不同位置彼此串在一起，实现相互间的跳转，方便信息的浏览和查找。人们通过超链接可以很方便很迅速地访问分布于全球计算机上的海量资源，实现在互联网中的漫游。超链接能使Web服务存在广泛和持久的生命力，超链接可以说是Web的灵魂。4、URLURL（

13、Uniform Resource Locator的缩写），统一资源定位器。互联网中某种信息资源以某种方式存储在网络中的某处，必须用一个惟一的URL来进行标识，这样才能方便查找。对于Web来说，可以简单并通俗把URL理解为网址。每个Web网页都有自己的网址，在浏览器地址栏里输入网页的URL，就可以访问这个网页。例如，http:/ Protocol）地址，这如同公用电话网中电话的号码一样。IP地址是由专门的互联网机构来分配。IP地址具有惟一性，是由32位二进制数组成，分为四组，每组8位，每组之间用小数点分隔，在实际之中常转换成十进制数表示。2.1.2个人网站的由来和发展互联网在中国的出现只有短短七

14、年时间，1994年中国科学院高能物理研究所设立了国内第一个Web服务器，推出一个叫做“中国之窗”的网页，这可能是国内Internet上出现的第一个Web网页，1995年开始，中国教育科研网，中国科技网，中国公用计算机互联网以及中国金桥网这构成中国数字神经系统的四大互联网络相继建成，使互联网在中国开始真正进入社会生活之中。这时期，个人网站出现的条件还很不成熟，国内上网的人数很少，也缺乏支持个人建站的环境，用户很难找到理想的个人主页存放地。个人网站发展的第二阶段是从1997年初到1998年，这段时间，中国网民数量飞速增长，个人网站日渐繁荣，个人主页的数量急剧增加。同时，越来越多的商业网站开始免费提

15、供个人主页空间，这些良好的外部极大地促进了个人网站的发展，涌现了一批很著名的个人网页，从1998年下半年开始，随着互联网应用的深入的普及，随着众多主页制作工具的出现，使得建站成为一件非常容易的事，创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。第三章、站点的建立及页面制作 3.1站点建立（1）打开：“窗口”下的“新建站点”（2）按“下一步（3）单击“下一步”（4）单击“下一步”（出现“你如何连接到远程服务器”时选择“无”）（5）单击完成 3.2各个页面的制作页面图3.2.1首页的页面：本页有滚动字幕及背景音乐。滚动字幕的制作：使用“标签选择器”插入marquee标签1.把

16、光标插入点放在需要插入滚动字幕的地方。2.点击插入面板的“标签选择器 ”3.选择 marquee标签，点击“插入”按钮。使用“标签检查器”设置marquee标签的属性4.转换到代码视图。把光标插入点放在 marquee标签内。5. 选择“窗口”“标签检查器”。可以在“标签检查器”设置标签的各种用法。设置marquee标签的主要用法6.点击behavior设置项右边的下拉箭头，选择滚动字幕内容的运动方式。7.direction属性设置字幕内容的滚动方向。8.scrollamount属性设置字幕滚动的速度。9.scrolldelay属性设置字幕内容滚动时停顿的时间，单位为毫秒。如果要让滚动看起来流

17、畅，数值应该尽量小。实例中设置为1毫秒。如果要有步进的感觉，就设置时间长一点吧。10.width属性设置滚动字幕的宽度。11.onMouseOver事件设置鼠标移动到滚动字幕时的动作，常设置为停止滚动。onMouseOut事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动。12.style属性设置字幕内容的样式。实例中设置字幕文字大小，输入了“font:12px;”。13.loop属性设置字幕内容滚动次数，默认值为无限。“-1”也为无限。背景音乐的添加：1打开行为面板，点击“”按钮添加行为。 2选择“播放声音”。 3. 选择声音文件。一个网页的背景音乐就添加好了。 如果要修改背景音乐属性 1.

18、 在文档中选择背景音乐的图标。2. 在属性检查器中，点击“参数”按钮。 3. 修改参数。 3.2.2日志的页面：制作过程：本页只是简单的超链接与文本编辑，无特殊效果。3.2.3相册的页面：制作过程：本页有flash相册。flash相册的制作：2、插入 Flash 。在工具栏中转到“ Flash 元素”工具条，插入 Flash 元素并保存文件，如下图所示。3、保存Flash文件，然后可以在属性面板中修改Flash的长和宽要和预先准备的图片的长和宽一样啊！接着设置 Flash 元素的参数，如下图所示。4、保存文件，完成操作。3.2.4音乐欣赏页面：制作过程：音乐播放器插入以下代码： 3.2.5小游

19、戏页面： 制作过程：插入flash动画：选择“插入”“媒体”“flash 视频”。 在“插入 Flash 视频”对话框中，从“视频类型”弹出式菜单中选择“渐进式下载视频”。 关于 Flash 视频 使用 Dreamweaver 中的“插入 Flash 视频”命令，可将 Flash 视频内容插入 Web 页面，而无需使用 Flash 创作工具。该命令可以插入 Flash 组件；当您在浏览器中查看它时，它显示您选择的 Flash 视频内容以及一组播放控件。 “插入 Flash 视频”命令提供以下选项，用于将视频内容发送给站点访问者： 累进式下载视频将 Flash 视频 (FLV) 文件下载到站点访

20、问者的硬盘上，然后播放。但是，与传统的“下载并播放”视频传送方法不同，累进式下载答应在下载完成之前就开始播放视频文件。 流视频将 Flash 视频内容进行流处理并立即在 Web 页面中播放。若要在 Web 页面中启用流视频，您必须具有对 Macromedia Flash Communication Server 的访问权限，这是唯一可对 Flash 视频内容进行流处理的服务器。 在 URL 文本框中，指定 cafe_townsend_home.flv 文件的相对路径，方法是单击“浏览”，浏览至 cafe_townsend_home.flv 文件（位于站点的 cafe_townsend 根文件夹

21、中），并选择该 FLV 文件。 从“外观”弹出式菜单中选择 Halo Skin 2。 所选外观的预览会出现在“外观”弹出式菜单下方。“外观”选项指定将包含 Flash 视频内容的 Flash 视频组件的外观。 在“宽度”和“高度”文本框中，执行以下操作： 在“宽度”文本框中，键入 180。 在“高度”文本框中，键入 135 ，然后按 Enter 键。 第四章 注册域名、租用免费空间4.1搜索可以免费申请空间的网站4.2注册会员，申请成功第五章 上传发布虚拟主机上传网页常用的FTP软件有CuteFTP、LeapFTP、FlashFXP等等，Dreamweaver、以及FrontPage也有发布网

22、页的功能。CuteFTP是一款非常受欢迎的FTP工具，界面简洁，并具有支持上、下载断点续传，操作简单方便等特征，使其在众多的FTP软件中脱颖而出，无论是下载软件还是更新主页，CuteFTP都是一款不可多得的好工具。CuteFTP上传操作说明（1）启动CuteFtp （2） 打开“文件”“站点管理器”（3）定义站点：点击“新建”建立FTP站，然后定义站点标签，可任意填写。“FTP主机地址” 中填入您的IP地址或您的域名都可，如：210.192.102.112 ，“站点用户名”中填写您的用户名（管理员用户名），“站点密码”中填写您的密码。输入密码时，框中只有*字，防止被别人看到。FTP连接端口为默

23、认的“21”，登录类型请选择“普通”。（4） 接远程站点：点击“连接”，即可连接至虚拟主机目录我们可以看到现在我们所看到的界面分为以下四部分：上部：命令区域（工具栏和菜单）中间:（分左右两边）左边：本地区域，即本地硬盘，上面两个小框可以选择驱动器和路径。右边：远程区域，即远端服务器，双击目录图标可进入相关目录。下部：记录区域，从此区域可以看出进程，程序已进行到哪一步。（5） 上传网页：从本地区域选定要上传的网页或文件，双击或用鼠标拖至远程区即可完成上传工作。（6） 相关操作：连接至远程服务器后可利用鼠标右键中的常用选项对远端文件和目录进行操作，如删除、重命名、移动、修改属性、建立目录等。（7）

24、 经过以上操作就可以将您的网页顺利上传至虚拟主机。参考文献1邓文渊.网页制作高手M.北京：人民邮电大学出版，2007，62李宪广.网页制作边学边用M.北京：清华大学出版社， 2009，33网页设计入门EB/OL.http:/ ID=2884许凌云，柳勇良.网页设计全方位学习M.北京：清华大学出版社，2008，115陈琳.photoshop cs3 入门实战与提高M.北京：电子工业出版社，2008，116焦慧.网页制作基础与典型范例M.北京：电子工业出版社，2008，77戎马工作室.Dreamweaver 8与asp动态网站开发M.北京：机械工业出版社，2006，58戴一波.Dreamweave

25、r CS3网站制作炫例精讲M.北京：电子工业出版社， 2008，19何秀芳.网页制作与网站建设课堂实录M.北京：人民邮电出版社. 2009，310孙连三.新编网页制作与网站建设入门与提高M.北京：人民邮电出版社. 2008，911邓文渊.网页制作高手FLASH 8M.北京：人民邮电出版社， 2007，612胡崧.超梦幻劲爆网页M.中国青年出版社.2008，713Scot Johson etal.using Active Server PageJ.Que 2007 14卓越科技.PHOTOSHOP CS3 美工广告设计百炼成精M.电子科技出版社， 2009，315David Hunter eta

26、l，Beginning XMLJ.Wrox Press Ltd，200516杨大勇，李金江.ASP网络开发自学导航M.北京：机械工业出版社，2007，617卓越科技.SQL SERVER数据库开发培训教程M.北京：电子工业出版社， 2009，418李曦琳.WEB导航设计M.北京：电子工业出版社，2009，319力诚教育.ACCESS 2007完全自学手册M.成都：四川出版集团，2009，320丛书编委会.ASP动态网页编辑M.北京：清华大学出版社，2006，1021陈刚.商业网站开发从入门到精通M.科学出版社，2008，2结 束 语不知不觉中网页设计与制作的毕业设计将要结束了，这门课程所包含内

27、容的丰富是我从没有想到的。在整个学习过程中，我接触了Flash、Dreamweaver、等重要工具，我很庆幸我能够学到这么多的内容。网页设计与制作毕业设计是在宋丽芳老师的悉心指导下独立完成的。虽然整个内容还有很多不足，但是我的确能够感到在我制作过程中技能的提高。在今后的学习生活中，我将不断提高自己网页设计与制作的能力和水平，从而弥补在本次毕业设计中的不足。在此我要感谢在毕业设计期间给予我帮助的许多人。首先，我要特别感谢的是我的指导老师宋丽芳老师。因为是他为我提供了一个正确的方向，才使我完成了毕业设计。在设计期间他也给予我无私的帮助，在此表示深深的谢意。我有论文中的网页源码，需要的可以百度联系我！27