个人网页制作毕业设计

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网页动画的制作软件-Microme

4、dia Flash 8.031.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第五章 上传发布

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

6、余空间1.8GB4显示器分辨率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

7、技术允许用户随意导入HTML文档而无需重新设置代码格式。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站点的交互式的矢量图形和动画的制作，它可制作出用于浏览时的导航控制、制作动画图标、带同步声音的大段的动画，创建出生动的富于表现力的网页。Fla

9、sh中的图形都是矢量的，占据存储空间较少，因而下载时间短，且能很好地适应浏览者不同尺寸的屏幕。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

13、的灵魂。4、URLURL（Uniform Resource Locator的缩写），统一资源定位器。互联网中某种信息资源以某种方式存储在网络中的某处，必须用一个惟一的URL来进行标识，这样才能方便查找。对于Web来说，可以简单并通俗把URL理解为网址。每个Web网页都有自己的网址，在浏览器地址栏里输入网页的URL，就可以访问这个网页。例如，5、IP地址为了使互联网上的电脑主机在通信时能够相互识别，每台主机都分配一个能表示其位置的IP（Internet Protocol）地址，这如同公用电话网中电话的号码一样。IP地址是由专门的互联网机构来分配。IP地址具有惟一性，是由32位二进制数组成，分为四

14、组，每组8位，每组之间用小数点分隔，在实际之中常转换成十进制数表示。2.1.2个人网站的由来和发展互联网在中国的出现只有短短七年时间，1994年中国科学院高能物理研究所设立了国内第一个Web服务器，推出一个叫做“中国之窗”的网页，这可能是国内Internet上出现的第一个Web网页，1995年开始，中国教育科研网，中国科技网，中国公用计算机互联网以及中国金桥网这构成中国数字神经系统的四大互联网络相继建成，使互联网在中国开始真正进入社会生活之中。这时期，个人网站出现的条件还很不成熟，国内上网的人数很少，也缺乏支持个人建站的环境，用户很难找到理想的个人主页存放地。个人网站发展的第二阶段是从1997

15、年初到1998年，这段时间，中国网民数量飞速增长，个人网站日渐繁荣，个人主页的数量急剧增加。同时，越来越多的商业网站开始免费提供个人主页空间，这些良好的外部极大地促进了个人网站的发展，涌现了一批很著名的个人网页，从1998年下半年开始，随着互联网应用的深入的普及，随着众多主页制作工具的出现，使得建站成为一件非常容易的事，创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。第三章、站点的建立及页面制作 3.1站点建立（1）打开：“窗口”下的“新建站点”（2）按“下一步（3）单击“下一步”（4）单击“下一步”（出现“你如何连接到远程服务器”时选择“无”）（5）单击完成 3.2各个

16、页面的制作页面图3.2.1首页的页面：本页有滚动字幕及背景音乐。滚动字幕的制作：使用“标签选择器”插入marquee标签1.把光标插入点放在需要插入滚动字幕的地方。2.点击插入面板的“标签选择器 ”3.选择 marquee标签，点击“插入”按钮。使用“标签检查器”设置marquee标签的属性4.转换到代码视图。把光标插入点放在 marquee标签内。5. 选择“窗口”“标签检查器”。可以在“标签检查器”设置标签的各种用法。设置marquee标签的主要用法6.点击behavior设置项右边的下拉箭头，选择滚动字幕内容的运动方式。7.direction属性设置字幕内容的滚动方向。8.scrolla

17、mount属性设置字幕滚动的速度。9.scrolldelay属性设置字幕内容滚动时停顿的时间，单位为毫秒。如果要让滚动看起来流畅，数值应该尽量小。实例中设置为1毫秒。如果要有步进的感觉，就设置时间长一点吧。10.width属性设置滚动字幕的宽度。11.onMouseOver事件设置鼠标移动到滚动字幕时的动作，常设置为停止滚动。onMouseOut事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动。12.style属性设置字幕内容的样式。实例中设置字幕文字大小，输入了“font:12px;”。13.loop属性设置字幕内容滚动次数，默认值为无限。“-1”也为无限。背景音乐的添加：1打开行为面板，

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

19、h 元素的参数，如下图所示。4、保存文件，完成操作。3.2.4音乐欣赏页面：制作过程：音乐播放器插入以下代码： 3.2.5小游戏页面： 制作过程：插入flash动画：选择“插入”“媒体”“flash 视频”。 在“插入 Flash 视频”对话框中，从“视频类型”弹出式菜单中选择“渐进式下载视频”。 关于 Flash 视频 使用 Dreamweaver 中的“插入 Flash 视频”命令，可将 Flash 视频内容插入 Web 页面，而无需使用 Flash 创作工具。该命令可以插入 Flash 组件；当您在浏览器中查看它时，它显示您选择的 Flash 视频内容以及一组播放控件。 “插入 Flas

20、h 视频”命令提供以下选项，用于将视频内容发送给站点访问者： 累进式下载视频将 Flash 视频 (FLV) 文件下载到站点访问者的硬盘上，然后播放。但是，与传统的“下载并播放”视频传送方法不同，累进式下载答应在下载完成之前就开始播放视频文件。 流视频将 Flash 视频内容进行流处理并立即在 Web 页面中播放。若要在 Web 页面中启用流视频，您必须具有对 Macromedia Flash Communication Server 的访问权限，这是唯一可对 Flash 视频内容进行流处理的服务器。 在 URL 文本框中，指定 cafe_townsend_home.flv 文件的相对路径，方

21、法是单击“浏览”，浏览至 cafe_townsend_home.flv 文件（位于站点的 cafe_townsend 根文件夹中），并选择该 FLV 文件。 从“外观”弹出式菜单中选择 Halo Skin 2。 所选外观的预览会出现在“外观”弹出式菜单下方。“外观”选项指定将包含 Flash 视频内容的 Flash 视频组件的外观。 在“宽度”和“高度”文本框中，执行以下操作： 在“宽度”文本框中，键入 180。 在“高度”文本框中，键入 135 ，然后按 Enter 键。 第四章 注册域名、租用免费空间4.1搜索可以免费申请空间的网站4.2注册会员，申请成功第五章 上传发布虚拟主机上传网页常

22、用的FTP软件有CuteFTP、LeapFTP、FlashFXP等等，Dreamweaver、以及FrontPage也有发布网页的功能。CuteFTP是一款非常受欢迎的FTP工具，界面简洁，并具有支持上、下载断点续传，操作简单方便等特征，使其在众多的FTP软件中脱颖而出，无论是下载软件还是更新主页，CuteFTP都是一款不可多得的好工具。CuteFTP上传操作说明（1）启动CuteFtp （2） 打开“文件”“站点管理器”（3）定义站点：点击“新建”建立FTP站，然后定义站点标签，可任意填写。“FTP主机地址” 中填入您的IP地址或您的域名都可，如：12 ，“站点用户

23、名”中填写您的用户名（管理员用户名），“站点密码”中填写您的密码。输入密码时，框中只有*字，防止被别人看到。FTP连接端口为默认的“21”，登录类型请选择“普通”。（4） 接远程站点：点击“连接”，即可连接至虚拟主机目录我们可以看到现在我们所看到的界面分为以下四部分：上部：命令区域（工具栏和菜单）中间:（分左右两边）左边：本地区域，即本地硬盘，上面两个小框可以选择驱动器和路径。右边：远程区域，即远端服务器，双击目录图标可进入相关目录。下部：记录区域，从此区域可以看出进程，程序已进行到哪一步。（5） 上传网页：从本地区域选定要上传的网页或文件，双击或用鼠标拖至远程区即可完成上传工作。（6） 相关

24、操作：连接至远程服务器后可利用鼠标右键中的常用选项对远端文件和目录进行操作，如删除、重命名、移动、修改属性、建立目录等。（7） 经过以上操作就可以将您的网页顺利上传至虚拟主机。参考文献1邓文渊.网页制作高手M.北京：人民邮电大学出版，2007，62李宪广.网页制作边学边用M.北京：清华大学出版社， 2009，33网页设计入门EB/OL. ID=2884许凌云，柳勇良.网页设计全方位学习M.北京：清华大学出版社，2008，115陈琳.photoshop cs3 入门实战与提高M.北京：电子工业出版社，2008，116焦慧.网页制作基础与典型范例M.北京：电子工业出版社，2008，77戎马工作室.Dreamweaver 8与asp动态网站开发M.北京：机械工业出版社，2006，58戴一波.Dreamweaver CS3网站制作炫例精讲M.北京：电子工业出版社， 2008，19何秀芳.网页制作与网站建设课堂实录M.北京：人民邮电出版社. 2009，310孙连三.新编网页制作与网站建