网站设计与制作.doc

1、成 绩目 录“我的站”概述2“我的站”功能需求分析2.1 注册登陆模块3.2 友情链接3.3 E站日记3.4关于我们3.5联系我们3.6关于我们3.7 帮助信息3.意见反馈32.9.“我的站”功能结构图3.“我的站”美工效果及切图设计4.设计“我的站”的logo43.2 设计“我的站”效果图43.21“我的站”首页效果图设计43.22“我的站”子页效果图设计5.3 裁切“我的站”设计效果图63.3.1我的E站子页切图效果图6.设计“我的站”中的动画6.“我的站”页面设计7.首页设计7.子页设计134.2.1 在线申请页面134.2.2 关于我们页面144.2.3 联系我们页面144.2.4 服

2、务条款页面154.2.5 E站日记页面154.2.6 帮助信息页面164.2.7 意见反馈页面165.我的E站测试176.设计总结及体会18“我的站”概述 “我的E站”是一款面向国内中小企业网络营销从业人员的网络营销工具集成平台，它通过集成全面、实用的各种网络营销工具，让用户获得全面、完整、可量身定制的网络营销方法、工具支持，这一切基于它高质量的核心应用及第三方开放平台策略。“我的站”功能需求分析本系统分为“平台系统”和“产品应用”两部分。“系统平台”分为Web站点（本教材需要完成的部分）、用户操作平台、平台管理后台三个模块。“产品应用”共包含五个大类6个子应用。每个应用有独立的使用界面和管理

3、后台。本教材需要完成的部分系统平台中的Web站点部分。Web网站的主要作用为，1、向访客介绍本平台功能及价值，2、吸引用户注册使用，并提供登陆方式。主要系统模块有：注册登陆模块、友情链接、E站日记、关于我们，联系我们、服务条款、帮助信息、意见反馈8个模块。.1 注册登陆模块包含：用户注册系统、用户登陆系统注册系统：用户点击注册按钮，进入注册页面，输入注册信息（账号邮箱、密码、重复密码，验证码），点击提交，系统自动向客户注册邮箱发送验证邮件，用户登陆邮箱点击邮件验证链接，账号生效，以新窗口进入网站（已登陆状态），用户登陆：用户点击登陆按钮，进入登陆页面，输入帐号密码信息，登陆。注：两次登陆失败，

4、第三次登陆开始，要求输入验证码。.2 友情链接分为图片、文字两种链接系统、以横排显示友链网站的图片logo及文字链接，点击更多，进入全部友情链接页面。.3 E站日记本模块为新闻公告系统，以新闻列表形式，展示最新3条日志，点击更多，显示全部新闻列表。.4关于我们以静态页面形式图文介绍.5联系我们以静态页面形式图文介绍.6关于我们以静态页面形式图文介绍.7 帮助信息 以二级内容列表形式展示分类帮助信息。.意见反馈 在线提交的表单系统，提交后平台管理后台可查。表单字段只含两个提交字段：“建议内容”和验证码，建议内容输入控件为单文本编辑框，点击提交，页面显示提交成功，或验证码错误。2.9.“我的站”功

5、能结构图图2-1 我的E站功能结构图.“我的站”美工效果及切图设计.设计“我的站”的logoLOGO在视觉的品牌传播和传达企业对内对外的精神和文化理念方面均起着举足轻重的作用，LOGO在设计过程中注重比例，对比，复制技巧，遵循客观规律。LOGO标志作为企业CIS战略的最主要部分，在企业形象传递过程中，是应用最广泛、出现频率最高，同时也是最关键的元素。企业强大的整体实力、完善的管理机制、优质的产品和服务，都被涵概于标志中，通过不断的刺激和反复刻画。 优秀的LOGO具有个性鲜明、视觉冲击力，便于识别、记忆，有引导、促进消费，产生美好联想的作用，利于在众多的商品中脱颖而出，LOGO以其简约、优美的造

6、型语言，体现着品牌的特点和企业的形象。我设计的LOGO为下图所示：3-1我的E站3.2 设计“我的站”效果图网页的界面是整个网站的门面，好的门面会吸引越来越多的访问者，因此网页界面的设计也就显得非常重要。网站的界面设计主要包括首页和子页的设计，其中首页的设计最为重要。3.21“我的站”首页效果图设计网站首页是一个网站的入口网页，故往往会被编辑得易于了解该网站，并引导互联网用户浏览网站其他部分的内容。这部分内容一般被认为是一个目录性质的内容。首页的作用就是让浏览者第一时间知道这个网站是做什么的，那么网站的首页除了网站设计精美，最好在第一页就对这个网站的性质与内容做个扼要说明，让人一目了然。(1)

7、设计页面大小和参考线(2)设计页面header区(3)设计页面pagebody区(4)设计页面footer区具体的设计效果图如图3-2-1所示：3-2-1首页设计效果图3.22“我的站”子页效果图设计由于商业网站的规模都相当庞大，会出现多个级别的页面，且各个级别的页面之间有很强的延续性，但与一级页面又不完全相同。因此，通常设计好主页面以后，还要对二级、三级页面进行设计，目的是为了区分页面的等级，以便浏览者的浏览。因此，只需要保持页面的整体设计，在结构上做一些调整即可。具体的步骤如下：(1)设计页面大小和参考线(2)设计页面header区(3)设计页面pagebody区(4)设计页面footer

8、区具体的设计效果图如图3-2-2所示3-2-2 我的E站子页效果图.3 裁切“我的站”设计效果图整体效果图制作完成后，将效果图切片，然后导入到Dreamweaver中进行布局重新排版，在Photoshop中裁切设计稿非常方便。网站设计，一般从设计师那得到的都是psd文件，里面有几十或者上百个图层，有文字有图片，有的只在特殊情况下显示的，比如鼠标划过，这时候就需要根据自己的需要导出不同的图。在网页上图片较大时，浏览器下载整个图片的话需要花很长时间，切片的使用使得整个图片分为多个不同的小图片分开下载，运用切片来减少网页下载时间又不影响图片的效果。切图如图3-3所示：3-3我的E站首页切片图片3.3

9、.1我的E站子页切图效果图根据站点需求，具体的子页切图效果图如图3-3-1所示：图3-3-1 “我的E站”子页设计E站日记切图.设计“我的站”中的动画Flash是由Macromedia公司推出的一款二维动画制作软件，Flash动画以矢量图形为基础,文件数据量小,传输速度快,应用领域非常广泛,在动画制作、网络广告、游戏制作、教学课件制作、网络艺术等方面均可极好地发挥作用. flash互动动画有着很强的交互性优势，它可以让欣赏着通过点击、选择等动作决定动画的过程和结果，充分享受互动的喜悦。flash互动动画更进一步体现了网络自身的互动性，满足了浏览者对互动性的更好要求，实现更强烈的直观感受、更丰富

10、的交互性响应和更具感染力的体验。动感绚丽的动画可以给网站浏览者以极大的冲击力；可以生动地体现一个网站的性质和形象，Flash动画就是其中的一种。一个好的Flash动画具有很高的艺术欣赏性，对于增强网站浏览者对网站的友好度非常有好处。 1.动画原理动画是将静止的画面变为动态的艺术。实现由静止到动态，主要是靠人眼的视觉残留效益。比如在画面中连续显示数十乃至数百个静态的图片，由于视觉残留效益效果使得我们认为物体是运动着的。利用人的这种世界生理特性可制作出具有高度想象力和表现力的动画影片。 2.Flash动画制作方式（1）用帧做动作来制作动画，可以在每帧上放不同的图片，在一定时间内快速的播放完每一帧动

11、画。（2）用脚本控制动画，用它可以实现更多的效果，主要运用于交互式的动画中。 根据站点需求，具体的Flash效果如图3-4所示：3-4“我的站”中的动画效果.“我的站”页面设计.首页设计图片和文字是网页的两大构成元素，缺一不可。文字提供给用户大量信息；图片不仅能够增加网页的吸引力，同时也大大地提升用户在浏览网页的体验。因此重视叶面上的每一个像素和每一个文字是网站制作者最基本的要求。具体的首页效果图如图4-1所示。4-1设置文字段落与图片的首页效果.子页设计4.2.1 在线申请页面在此页面可以进行用户注册申请，用户需要填写姓名、性别、联系电话、附言。4.2.2 关于我们页面介绍“我的E站”相关信

12、息。4.2.3 联系我们页面4.2.4 服务条款页面4.2.5 E站日记页面4.2.6 帮助信息页面4.2.7 意见反馈页面5.我的E站测试 一、网站功能测试 对于网站的测试而言，每一个独立的功能模块需要单独的测试用例的设计导出，主要依据为需求规格说明书及详细设计说明书，对于应用程序模块需要设计者提供基本路径测试法的测试用例。 二、性能测试 网站的性能测试对于网站的运行而言异常重要，但是目前对于网站的性能测试做的不够，我们在进行系统设计时也没有一个很好的基准可以参考，因而建立网站的性能测试的一整套的测试方案将是至关重要的。三、接口测试 在很多情况下，web 站点不是孤立。Web 站点可能会与外

13、部服务器通讯，请求数据、验证数据或提交订单。四、可用性测试 可用性易用性方面目前我们只能采用手工测试的方法进行评判，而且缺乏一个很好的评判基准进行，此一方面需要大家共同讨论。五、兼容性测试 需要验证应用程序可以在用户使用的机器上运行。如果您用户是全球范围的，需要测试各种操作系统、浏览器、视频设置和 modem 速度。最后，还要尝试各种设置的组合。六、安全测试七、代码合法性测试代码合法性测试主要包括2个部分：程序代码合法性检查与显示代码合法性检查。 1、程序代码合法性检查 程序代码合法性检查主要标准为intergrp小组编程规范，目前采用由SCM管理员进行规范的检查，未来期望能够有相应的工具进行

14、测试。 2、显示代码合法性检查 显示代码的合法性检查，主要分为Html、JavaScript、Css代码检查，目前采用 HTML代码检查-采用CSE HTML Validator进行测试 JavaScript、Css也可以在网上下载相应的测试工具。6.设计总结及体会四周的课程设计结束了，已经处在实习阶段的我虽然只来过一次课但是还是可以感受到同学们对这门课的兴趣所在，都很积极的在完成它，毕竟自己做的东西当运行成功时也会有成就感，在这次的课程设计中不仅检验了我们所学习的知识，也培养了我们如何去把握一件事情，如何去做一件事情，又如何完成一件事情。 课程设计是我们专业课程知识综合应用的实践训练，着是我

15、们迈向社会，从事职业工作前一个必不少的过程”千里之行始于足下”，通过这次课程设计，我深深体会到这句千古名言的真正含义我今天认真的进行课程设计，学会脚踏实地迈开这一步，就是为明天能稳健地在社会大潮中奔跑打下坚实的基础 通过这次E站设计，综合运用本专业所学课程的理论和生产实际知识进行一次网页编辑的实际训练从而培养和提高学生独立工作能力，巩固与扩充了网站设计和网页制作所学的内容，掌握网页设计设计的方法和步骤，懂得了怎样编改代码，怎样确定网页模板，了解了网站系统的基本结构，提高了代码能力，独立能力，熟悉了规范和标准，同时各科相关的课程都有了全面的复习，独立思考的能力也有了提高。 在这次设计过程中，体现

16、出自己设计网站的能力以及综合运用知识的能力，体会了学以致用、突出自己劳动成果的喜悦心情，从中发现自己平时学习的不足和薄弱环节，从而加以弥补。 在此感谢我们的李蕾老师，老师严谨细致、一丝不苟的作风一直是我工作、学习中的榜样；老师循循善诱的教导和不拘一格的思路给予我无尽的启迪；这次网站设计的每个实验细节和每个数据，都离不开老师您的细心指导。而您开朗的个性和宽容的态度，帮助我能够很顺利的完成了这次课程设计。 同时感谢对我帮助过的同学们，谢谢你们对我的帮助和支持，让我感受到同学的友谊。由于本人的设计能力有限，在设计过程中难免出现错误，恳请老师们多多指教,我十分乐意接受你们的批评与指正,本人将万分感谢。