1、 南京 城市职业学院 毕业设计说明书 题目： 个人网站设计 姓 名： 学 号： 年 级： 专 业： 计算机信息管理 学生类别： 五年制大专 指导教师： 教学单位： 江宁教学点 年 月 日 南京城市职业学院毕业作业课题审批表 教学单位 江宁 专业 计算机信 息管理 学生类别 高职专科 课题名称 个人网站设计 填报 时间 课 题 内 容 简 介 本课题的主要内容是设计一个介绍个人情况网站， 主要包括主页、个人介绍、学习情况、工作经历、兴趣、特长等内容。 主页 要能反映个人的特色，包括网站徽标、站内导航、热门新闻、常用链接、联系方式等内容； 个人介绍 包括个人简介、个人成长历程、家庭情况等内容； 学
2、习情况包括自己的学历情况、正在学习的情况和将来学习计划； 工作经历 包括工作经历、工作心得、工作经验、工作挫折、同事相处等内容； 兴趣 包括您的爱好、计划或兴趣等内容； 特长 包括个人专长、获奖情况 等内容 。 其他内容可以自由发挥。 站点 使用的软件是 Dreamweaver。 同时利用 Photoshop 进行图像处理，利用 Flash 设计 动画 。 本人完成部分为：建议一人完成。 指导教师姓名 参加学生姓名 指导教师意见 同意此课题！ 指导教师签名： 教学 单位 审核 意见 审核人： 审核部门（盖章） 年 月 日 个人网站设计 【内容摘要】 二十一世纪是电子技术飞速发展的时代，计算机
3、网络 以其优越的性能，强大的处理功能已经应用于人类生活的各个方面，成为人们学习、工作、科研等各项活动离不开的 工具。因特网为人们打开了一扇了解世界的大门，构筑了一条走向信息世界的高速公路。为世界各地的人们提供电子邮件、文件传输、远程登录、信息浏览（ WWW）等服务。随着 Internet的发展，网络已经深入到千家万户，也给各企业事业单位带来了无限的发展空间。电子网站的风起云涌，更使人们认识到在因特网上建立自己的网站给企事业单位带来是效益。而 个人网络的应用正改变我们的生活方式，本设计是一个介绍个人方面情况的网站，从个人的学习、生活、工作、爱好、特长等方面介绍自己，以便于与朋友及同事交流 。 【
4、关 键 词】 个人网站 网页 Dreamweaver 目 录 一、网站设计准备 1 1 确立个人网站主题 1 2 网站目的及功能定位 1 3 前期信息收集 1 4 设计软件介绍 1 二、总体设计 2 1.模块划分 2 2.策划书撰写 2 三、具体设计 3 1.站点建立 3 2.网页设计 3 四、网站测试和维护 5 1、网站测试 6 2、网站发布 6 3、网站维护 6 参考文献 7 - - 1 - - 二十一世纪是电子技术飞速发展的时代，计算机网络成为人们学习、工作、科研等各项活动离不开的工具。因特网为人们打开了一扇了解世界的大门，构筑 了一条走向信息世界的高速公路。为世界各地的人们提供电子邮件
5、、文件传输、远程登录、信息浏览（ WWW）等服务。随着 Internet 的发展，网络已经深入到千家万户，而个人网络的应用正改变我们的生活方式。本设计是一个介绍个人方面情况的网站，从个人的学习、生活、工作、爱好、特长等方面介绍自己，以便于与朋友及同事交流。下面详细介绍设计过程。 一、 网站 设计 准备 1、 确立个人网站主题 个人网站是介绍个人方面情况的网站，要具有个人特色。参考 其他人的个人网站或者网页是什么样式的主题 ？ 主题 能 否 完整的体现个人大部份资料。 对于内容主题的 选择，要做到小而精，主题定位要小，内容要精。不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高
6、强度的劳动，给网站的及时更新带来困难。 2、 网站目的及功能定位 建设个人网站的目的是通过网络将自己介绍为人所知。 通过 整合资源，确定网站功能。 3、 前期信息收集 对建站 目的明确后，就应着手搜集相关资料。 根据自己各个方面的情况，包括学习、生活、工作、爱好及特长等分类收集资料，资料涉及方方面面，只要是积极健康的内容，都可以在网站上表现。收集的资料包括自己的照片、小收藏品、绘画作品、手工制作、日记、随笔等；我还充 分利用网上资源，如网上下载的文字资料、各类图片、 GIF 小动画等。收集的资料 利用学习的 Word、 Photoshop、 Flash 等软件进行 文本、 图像等处理，在 图像
7、加标题文字设计 ， 对文本进行录入分类存档 。 4、 设计软件介绍 本站点采用由 Macromedia公司所开发的著名网站开发工具 Dreamweaver进行设计。它使用所见即所得的接口，亦有 HTML 编辑的功能。 Dreamweaver 可以用最快速的方式将Fireworks，或 Photoshop 等档案移至网页上。使用 Dreamweaver 网站地图可以快速制作网站雏形、 设计、更新和重组网页。改变网页位置或档案名称， Dreamweaver 会自动- - 2 - - 更新所有链接。使用支援文字、 HTML 码、 HTML 属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速
8、又简单。 二、 总体设计 1. 模块划分 划分模块，写出分析说明书。从可行性方案中所提供的资料和数据出发，把系统分为若干个模块，形成一个多层次的结构。把控制结构图、每个模块的功能都加以说明。 收集资料后，对其进行整理，整理以后找出重点，根据重点以及网站的侧重点，结合网站定位来敲定网站的分栏目需要有哪几项，可能开始时会因为栏目较多进而难 以确定最终需要哪几项，需要反复比较，给定下来的内容进行归类，形成网站栏目的树状列表用以清晰表达站点结构。 然后以同样的方法，来讨论二层栏目下的子栏目，对它进行归类，并逐一确定每个二级分栏目的主页面需要放哪些具体的东西，二级栏目下面的每个小栏目需要放哪些内容，将内
9、容详细，具体写下来，并有统一的格式，以备网站留档，这次的策划书只是第一版本，以后在制作的过程当中如果出现问题及时修改该策划书，并且也需要留档。策划书要求有电子版和书面版两份。 2. 策划书 撰写 策划书设计到的具体内容。每个栏目的策划书是格式统一的。 第一， 是栏目概述，其中包括栏目定位，栏目目的，服务对像，子栏目设置，首页内空，分页内容！这一部分起到一个索引的作用，让网友看起来能对栏目有一个大概的整体把握和了解。 第二，为栏目详情。栏目详情就是把每一个子栏目的具体情况描述一下，其中包括到各个子栏目的名称，栏目目的，服务对像（用以明确栏目的发展方向，更好的为达到目的而做哪些具体内容），内容介绍
10、（详细说明本子栏目的具体内容），资料来源（说明该栏目的内容来源是什么，以保证栏目开展下去不会出现没有内容的情况），实现方法（讲述实现这个栏目的具体方法），有关问题（在栏目的 策划过程当中想到的，目前尚未解决的问题），重点提示（重点提示需要注意的地方，或需要结合的地方，也可是栏目策划人员对该子栏目在这些方面的良好见意） - - 3 - - 第三，相关栏目，这一项是用以说明本栏目和其它栏目之间的结合，沟通，之所以要有这一项是想通过各个栏目之间的联系，来加强网站的整体性。 网站结构图如下： 三、 具体设计 1. 站点 建立 本地站点是在本地计算机上创建一个文件夹，用于存放网页及与网页有关的文件，如图
11、片、音频文件等。在 Dreamweaver 中有本地站点、远程站点和测试服务器站点。 利用“站点”菜单来新建各类站点，其中 将图片、音频文件所在的文件夹设置为默认的图像文件夹。 2. 网页 设计 根据课题的控制结构图和各个模块的功能说明书，详细编制系统程序。主要进行网页设计，网页设计具体要求： 1) 版面布局 在草图上，首先将需要放置的功能模块安排到页面上，主要包含网站标志、导航条、页脚信息等。其他栏目页面同样设计出来，与真实网页能够较接近。 一个好的网页，首先要有一个好看的主页，给人良好的第一印象，所以要精心设计自己网页的这一“门面”。主页的设计首先涉及到的是页面的版面编排问题（一般有表格、
12、框架、样式表等）。主页作为一种版面，既有文字，又有 图片。文字有大有小，还有标题和正文之分；图片也有大小，而且有横有竖之别。图片和文字都需要同时展示给观众，总不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。因此必须根据内容的需要，将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有学习经历 主页 个人介绍 工作经历 兴趣及特长 - - 4 - - 机的整体。若抛去是图还是文字的问题，画面上的所有元素可以统一作为画面的基本构成要素点、线、面来进行处理。在一幅成功的作品里，是需要点、线、面的共同组合与搭配来构造整个页面的。 通常我们可以使用的组合手法有秩序、比例、均衡、对称、连
13、续、间隔、重叠、反复、节奏、韵律、归纳、变异、特写、反射等等，它们都有各自的特点。在设计中应根据具体情况，选择最适合的表现手法，这样有利于主题的表现。通过点、线、面的组合，可以突出页面上的重要元素，突出设计的主题，增强美感，让观者在感受美的过程中领会设计的主题，从而实现设计的任务。 造型的巧妙运用不仅能带来极大的美感，而且能较好地突出企业形象，而且能将网页上的各种元素有机的组织起来，它甚至还可以引导观者的视线。 主次分明，中心突出。在一个页面上，必然考虑 视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排
14、那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。 大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。 图文并茂，相得益彰。可以选择一幅适合表现主题的好图片作为主页背景，以增强吸引力。文字和图片具有一种 相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。还可以在自己的主页设计主题
15、词 简短的几句“广告宣传语”，可以是自我介绍，也可以是网页主题说明，还可以是一首抒情小诗可以随意设计。 2）设计 原则 网页命名要简明有规律 确保页面的浏 览性好 主页设计要一目了然 网页要易读 合理设计视觉效果 - - 5 - - 3）确定网站风格 风格是有人性的，通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性：是粗犷豪放的，还是清新秀丽的；是温文儒雅的，还是执著热情的；是活泼易变的，还是墨守成规的。 总之，有风格的网站与普通网站的区别在于：在普通网站上你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量多少，浏览速度快慢等；在有风格的网站上你可以获得除内容
16、之外的更感性的认识，比如站点的品位，对浏览者的态度等。 在明确自己想给人以怎样的印象后，要找出网站中最有特色的东西，就是 最能体现网站风格的东西。并以它作为网站的特色加以重点强化、宣传。总之，风格的形成不是一次定位的，你可以在实践中不断强化、调整、改进。 4）进行形象设计 网站的设计可以从以下几点出发： 设计网站标志 (LOGO)。 LOGO 是指网站的标志，标志可以是中文、英文字母，也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容 设计网站色彩。网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同 的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象 和延伸内涵的色
17、彩，要用于网站的标志，标题，主菜单 和主色块。给人以整体统一的感觉。至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。一般来说，一个网站的标准色彩不超过 3 种，太多则让人眼花缭乱。适合于网页标准色的颜色有：蓝色，黄 /橙色，黑 /灰 /白色三大系列色。 设计网站字体。和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，可以根据需要选择一些特别字体。制作者可以根据自己网站所表达的内涵，选择更贴切的字体。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏 览者的计算机里没有安装特别字体，那么辛苦设计
18、制作便可能付之东流了。 设计网站宣传语。也可以说是网站的精神、主题与中心，或者是网站的目标，用一句话或者一个词来高度概括。用富有气势的话或词语来概括网站，进行对外宣传，可以收到比较好的结果。 四、 网站测试和维护 - - 6 - - 1、网站测试 网站发布前要进行细致周密的测试，以保证正常浏览和使用。主要测试内容： 1) 服务器稳定性、安全性。 2) 程序及数据库测试。 3) 网页兼容性测试，如浏览器、显示器。 4) 根据需要的其他测试。 2、网站发布 个人网站的很多都依赖免费个人空间 ，其域名也是依赖免费域名指向， 如网易的虚拟域名服务，其实这对个人网站的推广与发展很为不利，不仅 是它“适时
19、”开启的窗口妨碍了浏览者的视线和好感，让人一看就知道是个人网站，而且也妨碍了网页的传输速度。所以，就我个人观点来说，首先花点钱去注册一个域名，独立的域名就是个人网站的第一笔财富，要把域名起得形象、简单、易记。 3、网站维护 1）对网站的正常运行进行维护 2）对网站的格局阶段性的进行更新，给点击到网站的人耳目一新的感觉。 3）对个人经历部分进行与时俱进的更新，不能将之前的旧资料一直挂在网 上，这样不利于对个人的展示。 通过 个人网站设计，我进一步掌握网站设计的基本流程， 更加了解网站设计资料收集、总体设计、具体设计到测试和维护的过程。 对网页设计的基本软件如 Dreamweaver、Photoshop、 Flash 等软件使用更加灵活。 在设计过程中我了解网站运行流程，掌握了很多具体的设计方法，克服了多个技术难题，进步很大。 致谢： 向 指导老师和帮助我的各位同学 致谢；向协助完成 设计 ，提供便利条件的组织或个人，提出建议和提供帮助的人致谢；向 给予转载和引用权的资料、图片、文献、研究思想和设想的所有者致谢 。
