网站的前台界面与站点建设-专业课程设计.doc

课程设计（论文）编 号： 学 号： 201040430121 课 程 设 计教 学 院计算机学院课程名称专业课程设计题 目网站的前台界面与站点建设专 业计算机科学与技术（数字媒体方向）班 级2010级姓 名叶莲莲同组人员陈燕羽，秦盼，李小健，李斌指导教师李海霞2013年6月29日目 录一 概述21 课程设计软件概述22 课程设计的目的33 课程设计的要求3二 总体方案设计4三 详细设计5四 程序的调试与运行结果说明10五 课程设计总结11参考文献12一 概述1 课程设计软件概述1.1 实时视图新增功能借助 Dreamweaver CS4 中新增的实时视图在真实的浏览器环境中设计网页, 同时仍可以直接访问代码。呈现的屏幕内容会立即反映出对。1.2 代码提示新增功能借助改进的 JavaScript 核心对象和基本数据类型支持, 更快速、准确地编写 JavaScript。通过集成包括jQuery、Prototype 和 Spry 在内的流行 JavaScript 框架, 充分利用 Dreamweaver CS4的扩展编码功能。1.3 代码导航器新增功能新增的“代码导航器”功能可显示影响当前选定内容的所有代码源, 如 CSS 规则、服务器端包括、外部 JavaScript 功能、Dreamweaver 模板、iframe 源文件等。1.4 创作支持新增功能在 Dreamweaver 中直接新建基于 HTML 和 JavaScript 的 Adobe AIR 应用程序。在 Dreamweaver 中即可预览 AIR 应用程序。使 Adobe AIR 应用程序随时可与 AIR 打包及代码签名功能一起部署。1.5 支持增强功能通过轻松点击和符合标准的编码将 FLV 文件集成到任何网页中 - 无需 Adobe Flash® 软件知识。设计时在 Dreamweaver 全新的实时视图中播放 FLV 影片。1.6 支持领先技术在支持大多数领先 Web 开发技术的工具中进行设计和编码, 这些技术包括 HTML、XHTML、CSS、XML、JavaScript、Ajax、PHP、Adobe ColdFusion® 软件和 ASP。1.7 CSS 最佳做法新增功能无需编写代码即可实施 CSS 最佳做法。在“属性”面板中新建 CSS 规则, 并在样式级联中清晰、简单地说明每个属性的相应位置。1.8 CSS 支持增强功能使用 Dreamweaver CS4 中增强的 CSS 实施工具令您的网站脱颖而出。借助“设计”和“实时视图”中的即时可视反馈, 在“属性”面板中快速定义和修改 CSS 规则。使用新增的“相关文件”和“代码导航器”功能找到定义特定 CSS 规则的位置。2 课程设计的目的1理解和掌握该课程中的有关基本概念，程序设计思想和方法。2培养综合运用所学知识独立完成课题的能力。3培养勇于探索、严谨推理、实事求是、有错必改，用实践来检验理论，全方位考虑问题等科学技术人员应具有的素质。4掌握从资料文献、科学实验中获得知识的能力，提高学生从别人经验中找到解决问题的新途径的悟性，初步培养工程意识和创新能力。3 课程设计的要求1完成一个网站的建设；网站建成后，进行交互、远程（模拟）维护；2数据库要求：数据库中至少包含 4 个表，分别是：管理员验证、用户信息管理、信息发布、维护信息；3界面要求：网站布局合理，结构清晰。必须包含用户浏览界面、管理员维护界面；具有管理员、客户登录表单及密码设计；实时更新的信息发布系统；4. 要求计算机论坛系统具有高性能，能满足用户发布、浏览。二 总体方案设计2.1整体设计思路2.2具备功能网站的主要功能是为大家介绍关于一部美剧吸血鬼日记的一些内容，可以让没有看过该剧的人对该剧多一些了解，对于看过该剧的人，该网站可以作为一个收藏，网站图片文字音乐相结合，看起来会更愉悦一些。主要模块设置是如下的一些模块：首页（视频页），主页，剧情简介，角色介绍，经典台词，获奖情况，今日TVB贴吧三 详细设计3.1 功能按钮介绍按钮部分有如下：logo，主页，剧情简介，角色介绍，经典台词，获奖情况，今日TVB贴吧,以及每一个独立页面的的最大化显示按钮和返回按钮。我负责的部分为主页和剧情简介。3.2 我设计的部分1.主要代码主页主页body background-image: url(images/bj1.jpg);background-repeat: repeat;color:#FFF;       中文名：吸血鬼日记       外文名：Vampire Diaries       其它译名：吸血新世代       出品时间：2009年9月       出品公司：哥伦比亚及华纳兄弟联合电视网       制片地区：美国，加拿大       导演：Marcos Siega       主演：Nina Dobrev，Paul Wesley，Ian Somerhalder       集数：4季       类型：剧情，恐怖，爱情       制片人：Kevin Williamson       发行公司：CW Television Network (USA)       制作公司：Warner Bros. Television       首播频道：CW      每集长度：41-42分钟 返回最大化显示剧情简介：主页body background-image: url(images/bj1.jpg);background-repeat: repeat;color:#FFF;吸血鬼日记      吸血鬼日记（The Vampire Diaries）哥伦比亚及华纳兄弟联合电视网出品，Marcos Siega导演，Nina Dobrev、Paul Wesley、Ian Somerhalder主演。该剧是一部集青春、魔幻、恐怖、剧情于一身的美国电视连续剧，由美国女作家L.J.史密斯的同名畅销系列小说改编而成。 该剧第一季在加拿大温哥华拍摄，后迁至美国佐治亚州科文顿县。第一季于2009年9月在CW电视台开播，第二季于2010年9月9日回归，第三季于2011年9月15日回归。返回最大化显示2.截图四 程序的调试与运行结果说明1. 打开主页：2.进入主页，可以看到有跑马灯的效果。3.下拉点击最大化，得到全屏效果4. logo可快速回到网站首页五 课程设计总结在创建本次网站时，对创建网站的许多知识还不太熟，难免有点手忙脚乱，力不从心，不知从何入手，想要到达的效果很多，却不知怎么实现。通过一段时间的摸索，对于Dreamweaver软件有了一定的掌握，用起来也方便许多。网站的Logo通过Photoshop制作的，用到了抠图，渐变和文字编辑。网站有6个页面：主页，剧情简介，角色介绍，经典台词，获奖情况，今日TVB贴吧。网站的主页页对一组图片用到跑马灯效果，也就是让图片自行从左至右滚动，同样对文字也用到了跑马灯效果。刚开始做的时候，不会做跑马灯效果，然后通过查看书本以及在网上搜找视频教程，照样类似做出了图片滚动及文字滚动的效果。具体跑马灯代码是：。网站主要是用div标签做的，插一些相关文字和图片，以及做了一些链接。网站版权是用表格做的。由于时间及对软件的不熟练，许多方面不够完善需要进一步改进。各个子网页主要是插了一些文字和图片完成的，没有链接，使得网站不够全面具体，功能不够非富，这方面需要改进。页面排版方面有点花，不太简洁干净，这方面也需要加以改进。 在本次网站的创建中，遇到了许多困难，通过与同学讨论，查找资料得以解决。虽然网站做的不怎么样，功能也不够全面，但对于网站开发有了更深的了解，也学会了一些制作网站的技巧。 参考文献1 /item/3758aed4443c6316b840df7f Dreamweaver网页制作标准课程2 /view/2163350.htm网页设计与制作实用教程3 /item/8eef382280e21b7e42481eecdreamweaver8中文版实用教材4Dreamweaver CS3宝典人民邮电出版社 2009年6月 专业 课程设计成绩评定表1、课程设计答辩或质疑记录1）2）3）2、答辩情况a）未能完全理解题目，答辩情况较差 c）理解题目较清楚，问