网页设计课程设计报告..docVIP

课 程 设 计 报 告 课程名称: 网 页 设 计 设计题目： 游戏：《英雄联盟》 院（系）: 软 件 学 院 专业年级: 2011 级 学 号: 姓 名: 田启志 指导教师: 2012 年月目 录 游戏《英雄联盟》网站设计报告书 1 1 作品简介 1 2设计方案 2 3 实现过程 3 3.1站点的创建和结构组织 3 3.2库项目的创建 3 3.3样式的创建 3 3.4模板的创建和应用 4 3.5超级链接的创建 6 3.6技术难点及解决方法 7 4作品特色 8 5参考文献 9 《英雄联盟》网站设计报告书 1 作品简介 设计思想:在中国互联网的快速发展的同时，一个新的产业也悄然兴起，没错，那就是游戏。本网站仅以介绍时下最流行的网络游戏《英雄联盟》。 网站主题:本网站以深蓝色为背景。本网页多以文字介绍和游戏攻略为主，图片来自游戏截图和互联网，，这样能使浏览者更能清楚的了解游戏并能从该处得到有用的游戏信息。 2设计方案 先对网站进行需求分析，并根据需求确定网站的布局类型和配色方案，写网站策划书，画出网站的链接结构和层次结构图。本网站是根据广大玩家的心理需求而制定的，主要以厂子形和同字形为布局类型，其配色主要以深蓝色为背景。其网站的链接结构如图1。 图1 网站的链接结构和层次结构 然后根据网站策划收集相关素材，并根据需要精心整理或制作素材；接着使用Dreamweaver创建站点，并组织好站点的结构；紧跟着创建库项目、模板和样式，并将库项目和样式应用于模板；使用模板创建首页、一级页面和二级页面，创建合适的超级链接；添加合适的图、文、多媒体或行为；检查、完善网站；书写课程设计报告书。 3 实现过程 3.1站点的创建和结构组织 首先在我的电脑除C盘以外的盘区建立以英文命名的文件夹，然后在所建好好的文件夹下命名HTML、SOUND等文件夹。打开DREAMWEAVER，在标题栏点击新建站点，取名站点名，选择刚才已经建好的文件夹。站点结构图如图2： 图2 站点结构 3.2库项目的创建 我为了方便起见创建了一个库，就是自己的学号和姓名，还有联系站长链接。 库的作用在于重复使用和频繁更新内容。点击资源面板，选择库项目，点击下面的小加号添加新库，再添加好的库后编辑库名，双击库在里面输入你想要的内容，然后保存，则在库被自动保存在站点的library文件夹中。 3.3样式的创建 我创建的样式是：wenzi。wenzi均属于类样式，具有调整字体和文字前面的图片作用，美化网页，给浏览者以视觉上的舒服，另外样式具有批量生产，方便省时。 3.4模板的创建和应用 在实现过程中，本人创建了2个模板，模板的布局分别采用“厂”字形和“同”字形。 模板创建的主要步骤：点击资源面板，选择模版，点击下面的加号，创建模版，然后单击标题栏的文件，新建文件，点击模版，选择你所建的模版双击便可创建新的网页。模板效果如图3和图4： 图3 模板1效果图 图4 模板2效果图 3.5超级链接的创建 普通超链接，电子邮件等链接。普通超链接采用样式效果下图7。 图7 3.6技术难点及解决方法 实现过程中技术难点主要有一下几个： 难点1：一些特效代码较难改写；解决方法是：查阅资料请教同学 难点2：框架命名困难，解决方法是：翻阅课本，自己反复演示 4作品特色 我的网站特色主要有一下几个特色： 1：首页可播放游戏介绍视频。 2：框架在框架的页面中打开任意的网页内容会在主页面打开，效果在英雄联盟主页页面中。 3.背景音乐.在游戏介绍页面可自动播放背景音乐。 4.反馈意见.页面中可打开文件以及输入必要的信息。 5参考文献 颜虹中文版Dreamweaver应用基础教程上海科学普及出版社 [2] 彭宗勤.Dreamweaver网页制作使用教程.清华大学出啊版社，2008 [3] 黄爱娟DreamweaverCS5完全自学一本通 2 2 首页 英雄介绍 攻略心得 反馈意见 站长信息 3个英雄实例 5篇攻略 英雄列表 游戏介绍