个人网站设计毕业设计论文-米菲儿空间网站的设计与制作

毕毕 业业 设设 计（论计（论 文）文） 题目米菲儿空间网站的设计与制作 姓名王甜 学号310316070413 学院职业技术学院 专业计算机网络技术 20132013 年年 5 5 月月 2020 日日 附 1： 成绩评议成绩评议 学号310316070413姓名王甜专业计算机网络技术 题目米菲儿空间网站的设计与制作 指导教师建议成绩： 评阅教师建议成绩： 答辩小组建议成绩： 院答辩委员会评阅意见及评定成绩： 答辩委员会主任签字（盖章） ： 年月日 附 2： 毕业设计开题报告毕业设计开题报告 学 院 职业技术 学院 专 业 计算机网络 技术 学 号 310316070413 姓 名 王甜 题 目 米菲儿空间网站的设计与制作 选题目的和意义 随着科学技术的发展，互联网技术也越来越先进，人们相互交流的方 式也越来越多样化。其中个人网站也是用户使用最多的一种方式。个人网 站为我们提供了一个更好的平台。为了树立个人网站在网络上的形象，并 且通过设计一个个人网站；已达到个人推荐、展现自我的一个平台，个人 网站为交流提供综合的网络环境，同时也为个人的宣传、发展、提供了一 个平台。 设计背景 如今网站的类型越来越多，现在有许多人设计自己的个性网站来增加 与别人的交流。网站的设计已经成为个人、企业公司等介绍自己的平台， 相互交流的会所。 主要使用 DreamWeaver、FireWorks、ASP.NET、SQLServer 数据库等一 些软件设计具有自己特色个人网站。 设计提纲 本网站设计主要包括以下几部分内容： 1基于框架建立的前台页面（包括主页、个人简介、留言板、忘记密码、 登录、注册等）。 2基于代码的后台页面（留言板管理、数据库的修改、删除，后台代码的 查询、修改、删除等功能）。 计划进度 12013 年 1 月 14 日确定毕业设计的题目，提交开题报告。 22013 年 1 月 16 日2 月 10 日查阅有关资料，深入学习相关开发工具。 3. 2013 年 2 月 11 日3 月 20 日各功能模块的代码编写并测试。 4. 2011 年 4 月 15 日前基本完成设计，完成毕业文论文初稿并提交。 52013 年 4 月 16 日5 月 5 日完成论文二稿，并提交。 62013 年 5 月 6 日5 月 17 日完成并提交论文三稿。 72013 年 6 月 4 日前组织院级答辩。 指导教师意见 指导教师签字： 年月日 附 3 : 指导教师意见指导教师意见 序号项目要求 满 分 得 分 1选题 设计选题符合本专业应用范围 选题有现实价值，能反映设计对象的客观需要 设计目的明确、唯一 设计任务有一定难度 10 2考勤与态度 毕业设计各阶段工作按时完成 积极主动与指导老师沟通 认真对待指导老师给出的意见 10 3信息资料应用 设计任务所需信息、资料使用充足 信息资料的针对性、时效性、合理性强 10 4工作量正文字数不少于 5000 字5 5 理论知识综合运用 能力 合理运用了相关学科的理论、 思想、 方法与规律文 研究方法和手段的运用能力 10 6分析问题的能力 分析过程逻辑严谨 结论表达明确 10 7解决问题的能力 形成完整解决问题的方案 设计方案是否具有可行性 方案的预期效果能够达到设计的目的 10 8设计撰写质量 结构合理，层次清晰、逻辑性强 文题相符，观点、结论正确 写作规范，图表完备、整洁，符号统一，编号齐全 设计内容是否存在抄袭 20 9可行性及创新性 可应用性强 在思想、构思、方法等方面有创新表现 10 10其它5 建议成绩：优良中及格不及格 总 分 注：总分为 60 分以下为不及格，6070 分为及格，70 分80 分为中，80 分90 分为良，90 分100 分 为优。 对设计的简短评价 指导教师签字 年月日 附 4 : 评阅教师意见评阅教师意见 序号项目要求 满 分 得 分 1选题 设计选题符合本专业应用范围 选题有现实价值，能反映设计对象的客观需要 设计目的明确、唯一 设计任务有一定难度 10 2考勤与态度 毕业设计各阶段工作按时完成 积极主动与指导老师沟通 认真对待指导老师给出的意见 10 3信息资料应用 设计任务所需信息、资料使用充足 信息资料的针对性、时效性、合理性强 10 4工作量正文字数不少于 5000 字5 5 理论知识综合运用 能力 合理运用了相关学科的理论、 思想、 方法与规律文 研究方法和手段的运用能力 10 6分析问题的能力 分析过程逻辑严谨 结论表达明确 10 7解决问题的能力 形成完整解决问题的方案 设计方案是否具有可行性 方案的预期效果能够达到设计的目的 10 8设计撰写质量 结构合理，层次清晰、逻辑性强 文题相符，观点、结论正确 写作规范，图表完备、整洁，符号统一，编号齐全 设计内容是否存在抄袭 20 9可行性及创新性 可应用性强 在思想、构思、方法等方面有创新表现 10 10其它5 建议成绩：优良中及格不及格 总 分 注：总分为 60 分以下为不及格，6070 分为及格，70 分80 分为中，80 分90 分为良，90 分100 分 为优。 对设计的简短评价 指导教师签字 年月日 附 5: 答辩小组评议意见答辩小组评议意见 序号 项目要求满分得分 1选题 设计选题符合本专业应用范围 选题有现实价值，能反映设计对象的客观需要 设计目的明确、唯一 10 2信息资料应用 设计任务所需完成所需信息、资料使用充足； 信息资料的针对性、时效性强 10 3工作量与任务难度 正文字数不少于 5000 字 设计各个部分结构清晰、严谨 设计任务有一定难度 10 4理论应用情况合理运用了相关学科的理论、思想、方法与规律5 5分析问题的能力 分析过程逻辑严谨 结论表达明确 10 6解决问题的能力 形成完整解决问题的方案 方案的预期效果能够达到设计的目的 10 7 答辩语言及思维逻 辑 简明扼要阐述设计主要内容，语言表达流畅 思路清晰，重点突出，讲解透彻 回答问题有理论依据，基本概念清楚，逻辑性强 能抓住要点，对问题回答准确、有深度 使用专业化术语 25 8答辩过程仪容仪态 仪态端庄，自然得体5 9设计撰写质量 结构合理，层次清晰、逻辑性强 文题相符，观点、结论正确 写作规范，图表完备、整洁，符号统一，编号齐全 设计内容是否存在抄袭 10 10 可行性及创新性评 价 可应用性强 在思想、方法或创意等方面有创新表现 5 建议成绩：优良中及格不及格总分 答辩小组意见： 答辩小组长签字 年月日 石家庄经济学院职业技术学院毕业设计（论文） 摘摘要要 随着互联网的飞速发展，电脑网络已应用到各个领域，普及到千家万户,无论是国内 还是国外都迅速的发展起来。现在，网络已经成为人们快速获取信息、发布信息和传输信 息的主要渠道， 成为每个人生活中的一部分， 同时网络也提供了一个很好的信息交换平台。 目前，网页设计和网站建设成为新时代的一个热点。网络已经渗透到各个领域，无论 是企业还是个人， 网络为我们提供了很好的信息交流平台。 政府利用网站宣传自己的政策、 企业利用网站宣传自己的形象、学校利用网站宣传自己的教育、个人利用网站展示自己的 个性风采。越来越多的人都希望拥有自己的个性网站，展现自己的个性风采。通过建设个 人网站，我们可以展示自己，与别人交流学习，求职等等。 本网站主要从个人网站的数据库的设计方面和网页设计三剑客入手，实现个人网站系 统的主页浏览模块、后台管理员登录模块、留言板模块、前台会员登录模块、会员注册模 块与身份验证模块等方面设计，从网站设计的主页、界面设计方面研究，并探讨了运用数 据库技术，基于 ASP.NET 的动态网页设计和 SQLServer 数据库进行个人网站的设计与实 现，针对要实现这些方面的技术，此文将一一简单介绍其设计思想和设计方法。 关键词：ASP.NET；SQLServer；个人网站；留言板 石家庄经济学院职业技术学院毕业设计（论文） ABSTRACT With the rapid speed development of Internet, the network computer network has been applied to various fields more and more, popular both in domestic and foreign families to rapid development. Now network has quick access to information, publishing information and the main channel to transmit information, become a part of life, everyone at the same time the network also provides a good information exchange platform. At present, web design and website construction has become a focus in the new era. Network has already penetrated into every field, whether business or personal, Internet provides us with very good communication platform. Use website propaganda their government policies, enterprise use website propaganda their image, schools use website propaganda education, personal use of your own website to show your personality. More and more people want to have his own personality website, showing their own personality. Through the construction of personal website, we can show ourselves and communicate with others learning, job search, etc. My personal website is mainly from the website database design and web design of the three musketeers, achieving personal website system backstage administrator login, message board module, member login, registration and authentication aspects such as design, from the home page of website design, interface design, research, and probes into the use of database technology, dynamic web design based on ASP.NET and is essentially digital personal website design and implementation of the database, in view of the technology to achieve these aspects, this article will introduce one by one the design idea and design method. KEYWORDS:ASP.NET；SQLServer；Personal Website；Message board 石家庄经济学院职业技术学院毕业设计（论文） 目录 引言.1 1 概述.2 1.1 软件的选用与简介.2 1.2 选题的目的和意义.2 1.3 课题研究的主要简介.2 2 设计准备.3 2.1 设计愿望.3 2.2 设计背景.4 2.3 确定网站主题.6 2.4 确定网站形象.6 2.5 确定网站风格.6 2.6 确定网站内容.6 3 各模块简介.7 3.1 首页模块.7 3.2 我的朋友.8 3.3 大学之旅.8 3.4 美文欣赏.9 3.5 可爱收藏.9 4 具体实现与分析.9 4.1 静态设计.9 4.1.1 站点的建设与收集素材.10 4.1.2 HTML 语言.10 4.1.3 用框架表格进行布局和排版.11 4.1.4 添加网页元素.11 4.1.5 滚动的公告.11 4.1.6 典型的子页设计过程.12 4.2 动态设计.13 4.2.1 数据库的建立.13 4.2.2 建立会员登录系统.15 4.2.3 建立留言板模块. 18 4.2.4 后台部分. 19 5 结论. 20 参考文献.21 致谢. 22 石家庄经济学院职业技术学院毕业设计（论文） 1 引言 随着科技的进步、时代的发展，计算机信息行业也逐步壮大，人们也越来越离不开各 种各样的信息，人们对信息的追求越来越迫切。 网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者，在互联网上表 现出了它及其重要的地位，并发挥着及其重要的作用，无论是国内还是国外都迅速的发展 和壮大，并被人们重视。网站的迷人之处在于它综合使用文本、图像、声音、动画视频信 息和内容，具有丰富的多媒体表现与互动特点。毋庸置疑，网站已成为最吸引人的也是最 有效的信息传递的手段与方式。随着网络技术的逐步发展，各类网站纷纷出现，个人网站 也成为了一种时尚，越来越多的人希望拥有自己的网站，开辟自己在网络世界里的一片天 地，展示自己的才华和风格。 网站数据库的规划设计以及网站的页面开发，都是对应网站要实现的功能而进行设计 的，我将通过各种网页制作以及数据库设计工具作出能达到预期效果的数据管理系统以及 网站页面，使网站管理人员更加方便的，准确的对留言板进行正确的维护和更新；使个人 网站成为我们与外界沟通和交流的平台，让更多的人了解自己，在以后的社会竞争中能起 到自我推荐和自我展示的作用。 石家庄经济学院职业技术学院毕业设计（论文） 2 1 概述 1.1 软件的选用与简介 Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见 即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利 用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 Dreamweaver 具有制作效率高、操作直观、简单易学、站点管理方便等无可比拟的控制能 力优势，但它也同样存在着难以精确达到与浏览器完全一致、不能实时更新、不能对大量 信息进行更改、操作不方便、页面原始代码难以控制等不足。本设计选用的是 DreamweaverCS4。 ASP 是一项微软公司的技术，是一种嵌入网页中的脚本，可由因特网服务执行的服务 器端脚本技术。 指 Active Server Pages （动态服务器页面） ， 运行于 IIS 之中的程序。 ASP.NET 的前身 ASP 技术，是在 IIS2.0 上首次推出的。本设计用的是基于 C#的 ASP.NET 技术。 ASP.NET 是基于通用语言编译运行的程序，有着很强的适应性，C#编程语言语法灵活，功 能强大，论述都基于 C#的 ASP.NET 建立气象数据库查询系统的构建与编程。ASP.NET 有 好多优点：1、可管理性：ASP.NET 使用基于文本的、分级的配置系统，简化了将设置应 用于服务器环境和 Web 应用程序的工作。2、安全：ASP.NET 为 Web 应用程序提供了 默认的授权和身份验证方案。开发人员可以根据应用程序的需要很容易地添加、删除或替 换这些方案。3、跟踪和调试：ASP.NET 提供了跟踪服务，该服务可在应用程序级别和页 面级别调试过程中启用。可以选择查看页面的信息，或者使用应用程序级别的跟踪查看工 具查看信息。 4、 增强的性能：ASP.NET 是运行在服务器上的已编译代码， 与传统的 Active Server Pages (ASP) 不同，ASP.NET 能利用早期绑定、实时 (JIT) 编译、本机和全新的缓 存服务来提高性能。 1.2 选题的目的和意义 随着 Internet 的迅速发展，我们已经不再满足于单单地进行浏览网页，而是希望我们 能更深入地参预到网络中去，Internet 的开放性使得个人建立自己的网站成为可能， 拥有自 己的个性网站也越来越成为一种网络时尚，同时创建一个能充分体现自我风格和自我特色 的个人网站已经成为互联网用户的新追求。 我们更需要的是交流，交流能促进我们不断的进步，并且融合别人的长处；让我们能 多一些渠道倾听来自不同立场的声音；设想一下我们的网络，当每个人都拥有个人网站， 不管是否在线，我们都能跨越时间、空间进行交流，因为这个网站中拥有我所有的一切， 生活、想法、知识、思想；梦想和理想的状态是个人门户也是我们每个人的影子，它为每 个人打点网络上的一切，好多志同道合的朋友会在这里和你相识、相交、相知。 1.3 课题研究的主要简介 现在互联网是社会发展的必然趋势，很多人已经意识到网络强大生命力和它在未来将 石家庄经济学院职业技术学院毕业设计（论文） 3 要处于的重要地位。他们进行钻研并且努力进入到一个新的空间、新的领域。其中包括你、 我、他。 在我们的日常、工作生活当中，能够拥有一个自己的网站已经成为越来越多的人的理 想和骄傲。就这个课题的研究，因为是个人的网站，所以我只选择了自己擅长和喜爱的内 容，在突出自己的风格个性和特点的同时，还应用了我们所学过的的网站设计技术和数据 库技术等。 2 设计准备 “个人网站要发展， 要么是从我 （自己） 的需求出发， 要么是从我周围人的需求出发。 ” 这是国内著名的个人网站站长、手机之家站长高春辉说的。网页设计是一门新兴起的设计 类，近几年来随着网络的发展而逐渐受到人们的重视，它自己本身以网络作为载体,把各 种各样的信息以最快捷、方便的方式传达给大家。一个网站项目的确立一般是建立在各种 各样的需求上面的，这是个人网站，所以这种需求一般来自于个人的实际需求，其中每个 人的实际需求占了绝大数部分。因此如何更好地了解、分析需求，并且又能够准确、清晰 地以文档的形式表达出来，保证开发过程以个人需求为目的正确项目开发方向进行。 2.1 设计愿望 越来越多的人希望能够真正参与到互联网上，这就出现了越来越多的个人网站设计以 及推广的工作和任务。 就我个人来说，我之所以在毕业设计的时候选择这个课题是因为我自己也想拥有一个 自己的个人网站，在互联网上拥有我自己的一席之地，从而真正的参与到互联网中去，做 个网络新时代的主人，同时也希望自己喜欢的一些东西能够和大家一起分享，和互联网上 的朋友一起分享。 我所制作的个人网站大体可分为以下几个功能： 1.秘密收藏： 在其中展示一些我喜爱的东西，包括衣服、饰品、帽子等。和大家分享这些东西，我 只想让大家进一步认识我和了解我，让一些美好的东西我们大家能共同欣赏。 2.留言板： 这是一个大家谈心交流的好地方，浏览者登录以后在留言板中，你可以畅所欲言，和 大家进行交流。对我留言，写下你对本网站的意见、建议或者感受，也可以对我们感兴趣 的话题来展开讨论，进行心与心的沟通。而且可以查看自己和查看别人的留言，看看别人 的感受。但我增加了管理权限，我以管理员的身份可以对新加入的新内容进行管理，即允 许其加入和允许对其进行删除操作等。欢迎大家来这里留言哦！ 石家庄经济学院职业技术学院毕业设计（论文） 4 3.会员登录： 在这里可以进行会员登录操作，如果用户还没有注册也可以进行注册然后再登录。在这 里如果你忘记了自己的密码还可以进行找回密码的操作，并且可以修改和查看自己的相关 信息。登录后就可以进行留言操作。非常灵活，为会员提供了很大的方便。 4.个人信息： 在这里，浏览者可以看到我自己的个人相关信息，包括兴趣爱好、籍贯、缺点及喜爱的 明星和喜爱的小动物。欢迎大家浏览我的个人信息！ 2.2 设计背景 使用工具简介: IIS 的简要介绍: IIS 是 Internet Information Server 的缩写，它是微软公司主推的一种 Web 服务器， 最 新的版本是 Windows2000/2003server 里面包含的 IIS 5.0 或 IIS 6.0， IIS 与 Window2000/2003 Server 完全集成在一起， 因而用户能够利用 Windows 2000/2003 Server 和 NTFS（NT File System，NT 的文件系统）内置的安全特性， 建立强大、灵活又安全的 Internet 和 Intranet 站点。 IIS 的一个重要特性是支持 ASP。IIS 3.0 版本以后引入了 ASP，可以很容易的张贴 动态内容和开发基于 Web 的应用程序。如果是其他的 Windows 操作系统则需要用户手动 安装 IIS。下面以 Windows XP 为例，说明 IIS 的安装步骤： IIS 的安装步骤： 1.依次打开： 【控制面板】 - 【添加/删除程序】 - 【添加/删除 Windows 组件】 ， 勾选 【Internet 信息服务（IIS） 】 ，然后单击信息按钮。 2.在打开的【Internet 信息服务（IIS） 】对话框中勾选所有项。 3.单击“确定”按钮后，再单击“下一步”按钮。在光驱中放入 Windows XP 的安装盘， 安装完毕后，可以测试一下安装是否成功，在浏览器地址栏中输入”http:/localhost”, 如果安装成功则会出现欢迎画面。 A 的简要介绍: Active Server Pages（ASP）是服务器端脚本编写环境，使用它可以创建和运行动态、 交互的 Web 服务器应用程序。使用 ASP 还可以组合 HTML 页、VBScript 脚本命令和 JavaScript 脚本命令等，是创建交互的 Web 页和基于 Web 的功能强大的应用程序。 由于脚本程序是在服务器上运行而不是在客户端上运行，所以传送到浏览器上的 Web 页是在 Web 服务器上生成的，所以不必担心浏览器能否处理脚本。Web 服务器已经完成 石家庄经济学院职业技术学院毕业设计（论文） 5 了所有脚本的处理，并将标准的 HTML 页面传输给浏览器。由于只有脚本的结果返回到 浏览器，所以服务器端的脚本不容易被别人复制。用户并看不到创建他们正在浏览的页的 脚本命令。 ASP 的运行环境：ASP 只能用于下列 Web Server IIS Microsoft Personal Web Server ASP 的编程语言：ASP 可以使用 VBScript 和 JavaScript 进行程序的编写。 ASP 文件，ASP 的文件后缀名为.ASP，用以区别于同样可以包含 Script 的 HTML 文件。 一个*.ASP 文件是一个文本文件， 可以包括下列元素的任意组合： 文本（text） HTML 标志（tags） Script 命令 ASP：不需要任何 HTML 的 tag 保存在文件中，起一个见名知意的名字，文件 的后缀一定要改为.ASP ，然后再上传到服务器上一个有执行权的目录下（例如 wwwroot） 。 ASP 访问数据库的原理 ASP 是服务器端脚本执行的环境，可用来产生和执行动态的高性能的 WEB 服务器程 序。当用户使用浏览器来请求 ASP 主页时，WEB 服务器作出响应，调用 ASP 引擎来执行 ASP 文件，并解释其中的脚本语言（javascript 或 vbscript） ，并通过 ODBC 连接数据库，由 数据库访问组件 ADO（active data objects）完成数据库操作，最后 ASP 生成包含有数据查 询结果的 HTML 主页返回用户端并显示。 SQL Server 的简要介绍： SQL Server 是微软公司开发的数据库产品，SQL Server2000 被广泛使用，很多电子商 务网站、企业的内部信息化平台等等都是基于 SQL Server 产品的。今天的商业环境要求不 同类型的数据库的性能、 可伸缩性及可靠性是基本的要求， 而进入市场时间也非常的关键。 除了这些核心企业品质外，SQL Server2000 还为数据库的管理和分析提供了方便，非常灵 活和易于操作。我此次的毕业设计就选用的是 SQL Server2000。 完全的 Web 支持: SQL Server2000 提供了 Web 以标准为基础的扩展数据库编程功能。丰富的 XML 和 Internet 标准支持允许使用内置的存储过程以 XML 的格式轻松存储和检索数据。还可以使 用 XML 更新程序，更容易地进行插入、更新和删除记录的操作。 石家庄经济学院职业技术学院毕业设计（论文） 6 2.3 确定网站主题 做网站，首先必须要解决的就是网站内容的问题，即是确定网站的主题。如果自己在 某些方面越有兴趣，或掌握的资料越多，就可以做一个自己感兴趣的东西。你可以有自己 的见解，做出自己的特色网站。当然，也可以推销自己，让别人了解自己，和别人进行沟 通和交流，展示一些自己的东西，让大家更好地了解自己。对于内容主题的选择，要做到 小而精，即主题定位要小，且内容要精。不要去试着作一个包罗万象的站点，这往往会失 去你的网站的特色，也会带来很大的劳动，给网站的及时更新带来更大的困难。我的网站 主题是以我个人相关的资料来制作的，介绍了我自己。 2.4 确定网站形象 网站形象的设计可以从网站的 LOGO、网站的色彩、网站的字体宣传语等这些方面着 手。 网站色彩，网站给人的第一印象来自于视觉的冲击，不同的色彩搭配会产生不同的效 果，并可能影响到访问者的情绪。 “标准色彩”指的是能体现网站形象和延伸内涵的色彩， 给人们一种以整体统一的感觉。我个人网站的色彩是以浅蓝色色为主，浅蓝色的字体和浅 色的图像给人一种舒服的感觉，仿佛生活在虚幻的世界里。 网站字体，和标准色彩一样，标准字体是指用于标题、主菜单的一些特有字体。为了 体现网站所特有的风格，可以根据自已的网站所表达的内涵，选择更贴切的字体。我的个 人网站的标准字体是华文彩体。给人一种沉稳而不失俏皮的感觉。 2.5 确定网站风格 风格是抽象的，指网站的整体形象给浏览者留下的综合感受。这个“整体形象”包括 网站的 LOGO、网站的色彩、网站的字体、网站的标语等许多因素。网站是可以平易近人 的、生动活泼的，也可以是严肃专业的。但不管是在色彩、技术、文字、布局、还是交互 方式上，只要能由此让浏览者明确的看出这是你的网站所独有的，这就形成了一种风格。 风格是有人性的，它通过网站的色彩、技术、文字、布局、交互方式等可以综合概括 出一个网站的自己的个性；我的网站风格是以舒服为主，给人一种舒舒服服的感觉。 2.6 确定网站内容 我的个人网站大体上包括了一些内容：首页、我的朋友、美文欣赏、大学之旅、秘密 收藏、会员登录、会员注册、留言板等网站常用内容，方便的大家的浏览。 石家庄经济学院职业技术学院毕业设计（论文） 7 3 各模块简介 一个网站的首页其实是一个文档， 当一个网站服务器收到一台电脑上网络浏览器 的信息连接请求时，便会向这台电脑发送这个文档。当在浏览器的位址列输入域名， 而并未指向特定目录或档案时，通常浏览器会打开网站的首页。 网站首页往往会被编辑的很易于了解该网站所提供的所有资讯， 并引导互联网用 户浏览网站其他部分的内容。这部分内容一般被认为是一个目录性质的内容，我的个 人网站的首页给大家一目了然的感觉， 打开首页就可以了解我的个人网站的设计风格 还可以看到一些特定的功能，大家可以尽情地浏览其中的信息。首页的大致图如下图 3.1 所示： 图 3.1 首页框图展示 首页框图展示了我的整个设计页面的架构，主要包括首页、我的朋友、大学之旅、美 文欣赏、秘密收藏和用户登录这几部分，给浏览者一种一目了然的感觉。点击每一部分可 以进入相应的界面，可以具体浏览其中的信息。而且左边有滚动字幕，点击可以浏览具体 的内容。欢迎大家浏览！ 3.1 首页模块 介绍了一些关于我自己的基本信息，比如姓名、生日、兴趣爱好等。希望大家可以进 一步的了解我。如下图 3.2 所示： 首页 我的朋友 大学之旅 美文欣赏 可爱收藏 浏览者 基 本 信 息 给我留言 优美文 章 可 爱 饰 品 和 衣 服 我的旅游 我 和 朋 友 石家庄经济学院职业技术学院毕业设计（论文） 8 图 3.2 首页模块展示 3.2 我的朋友 介绍了我和我的朋友的一些事和一些去过的地方，里面有我和朋友照片，大家可以参 考一下。这里面有我的高中同学和大学同学还有我的闺蜜。 第一页用了一个滚动的图片展示了我和我的朋友们在一起的照片，下面写了一些关于 赞美朋友的话语。记得有个人说过情人是一时的，而朋友却是一辈子的，那些深重的友情 永远都会埋在我们的心底，永远都不会磨灭。所以我愿意把它拿出来跟大家一起分享，让 我们共同珍惜我们的友谊。 第二页用 FireWorks 做了一个胶卷型的流动的照片，显示了一些我的朋友们。那些美 丽的时刻我将永远把它留下来。第三页显示了我的大学的朋友们，他们给我大学的生活留 下了美好的记忆。 3.3 大学之旅 在这里介绍了一部分我在上大学期间去过的一些地方，拍下了一些优美的风景，那些 给我留下美好回忆的地方我都把他们记载下来。里面有照片和文字简介，大家可以做个参 考，也去欣赏那里的优美风景。 第一页插入了一个 spry 折叠面板，介绍了去保定满城汉墓旅游时的一些照片。并且介 绍了一些关于满城汉墓的一些信息。 第二页插入了几张去石家庄空中花园游玩时的照片，并附加了空中花园的一些相关信 息。第三页介绍了竞秀公园，并插入了几张竞秀公园的照片，也对竞秀公园作了简单的介 绍。 石家庄经济学院职业技术学院毕业设计（论文） 9 3.4 美文欣赏 在美文欣赏这部分中列举出了几篇优美的文章供浏览者欣赏。 这些文章中有讲述关于人生哲理的，讲述了人生的悲欢离合，人生旅途的不顺利；有 关于爱情的，介绍了男女之间刻骨铭心的感人爱情故事；还有介绍关于朋友之间的深厚友 谊以及一些励志的文章，激励那些正在追逐梦想的人有一颗不怕失败、永不言败、愈挫愈 勇的心。 以上都是本人认为比较优美的文章，希望浏览者也喜欢！ 左边是滚动的字幕，也是优美的文章，大家点击直接可以欣赏。如下图 3.3 所示： 图 3.3 美文欣赏展示 3.5 可爱收藏 在可爱收藏这部分中展示了一些可爱的衣服、帽子、项链、耳环等首饰。并使用到了 Dreamweaver 中的鼠标经过图像技术，是浏览者有一种变幻感！为那些爱美的朋友们提供 了一个参考。 其中里面还有一些模特的展示，可以看见模特穿上那些衣服的效果，使爱美丽的朋友 们对那些衣服的样式有一个更清晰的认知。 这些衣服、 帽子和首饰等都是本人自己喜欢的， 希望大家也喜欢。 如果大家有更好更漂亮的衣服、帽子、首饰等，欢迎给我留言，让我们大家一起来分 享这些。 4 具体实现与分析 4.1 静态设计 先用 Dreamweaver 进行布局和排版。 石家庄经济学院职业技术学院毕业设计（论文） 10 4.1.1 站点的建设与收集素材站点的建设与收集素材 创建本地站点的具体操作步骤如下： 要制作一个网站，第一步操作都是一样的，就是要创建一个“站点” ，这样可以使整 个网站的结构清晰地展现在面前，避免了以后复杂的管理。 打开 Dreamweaver 从菜单中 选择“站点/新建站点”在弹出的对话框中填写目录和指定文件夹，输入站点名称和默认的 存放图像的位置。在文本框中输入自己已经想好的网站名称“个人网站” 。填好后，单击 “下一步” ， 进入下一个步骤。 由于我要做的是一个静态的网页， 所以选择上面的一项 “否， 我不想使用服务器技术。 ”单击“下一步” ，进入下一个步骤。 在此选项中有两个选择， 选择推荐的“编辑我的计算机上的本地副本，完成后再上传到服务器” 。底下的文本框允 许在本地磁盘上指定一个文件夹，Dreamweaver 将在其中储存站点文件的本地副本。单击 该文本框后面的文件夹图标，新建并指定一个空的文件夹“E:/web555” 。之后单击“下一 步“，进入下一个步骤。这一步是如何设置连接到远程服务器，弹出式菜单中有 6 中选择， 这里选择“无” 。而后“下一步”再“完成” ，这样，一个站点就算建好了。 收集素材： 收集一些网站所需要的素材，比如图片、动画、文字等。做网站前的一些准备工作也 是很重要的。只有有了充足的准备我们才能把网站做好。因此在做网站前我们必须把做网 站的过程中可能所需