网页实训报告终极大成版.doc

成绩 《网页设计与制作》实训报告 题 目 英雄联盟官方网站模拟 系 部 信息工程系 班 级 12市场营销（二）班 姓 名__________赵雅涓，李子豪___________ 指导老师 丁 丽 2013年 12月 12日 引言 现今社会网页设计将是一个热门的行业，随着电子商务的如日中天，更多的年轻人选择在网络上创业，既然选择了电子商务，那么为自己量身打造的网页是必不可少的，别人设计的终究不如自己设计来的更合意，所以学好网页设计这一门课程是今后所有选择电子商务的年轻人必不可少的一门必修课。 在这次网页设计实训中我所用到的软件有： dreamweaver8：Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。 Flash CS6 ：Adobe Flash CS6是用于创建动画和多媒体内容的强大的创作平台。Adobe Flash CS6设计身临其境、而且在台式计算机和平板电脑、智能手机和电视等多种设备中都能呈现一致效果的互动体验。新版flash professional cs6附带了可生成 sprite 表单和访问专用设备的本地扩展。可以锁定最新的 adobe flash player 和 air 运行时以及 android 和 ios 设备平台。 目录 制作网站的基本思路 系统开发及运行环境 网站栏目结构图 网站目录结构图 网站制作过程及制作要点 网站测试 网站评价 总结 参考文献 （一）、制作网站的基本思路 1.网站主题确立：英雄联盟是最近最火的网络竞技类游戏，本小组成员也不例外成为了这款游戏的忠实玩家，出于对这款游戏的热爱，于是将此次网页设计实训的网站主题定为“英雄联盟游戏主页模拟” 2.设计网站实现的功能：通过自己的双手来传达我们对这款游戏的热爱，并锻炼自己的网页设计技能 3.网站适用的群体：15——35岁的各类人群 4.网站的整体风格：基本模仿英雄联盟官方网站主页 5.网站包含的主要信息：英雄联盟视频两份，英雄联盟招商信息，英雄联盟新模式介绍等 、系统开发及运行环境 1.操作系统：windows 7 2.处理器：intel core i7 990x3.6 ghz 6核 3.安装内存：4GB 4.系统类型：64位操作系统 5.网页制作软件：Dreamweaver8，Adobe Flash CS6 6.测试浏览器：IE8，火狐浏览器，360浏览器，搜狗浏览器 、网站栏目、链接结构图 网页栏目结构图： 网页链接结构图： 、网站目录结构图 、网站建设过程及制作要点 网页图示： 主页图示： 此页面插有两个flash，一个是相关视频，一个是flash按钮。有一个滚动栏八张图片。每一个图片相对应都有一个链接。总共是两个空链接、三个下载链接、一个表单链接、两个网页链接。本页还利用CSS做出了鼠标滑动文字出现下划线的效果。 子页1，极地大乱斗图示： 此页有一个flash视频，一个返回首页的链接和一个去往下一个子页的链接。其他全为空链接。 子页2，LOL招聘： 此页除了一个返回首页的链接外，全为空链接。下面的图采用了鼠标滑过换一个图的效果。 子页3，LOL玩家自制图： 此图在第一幅图上做了一个返回首页的链接。其他则没有什么特殊效果。但下面的图全是自己纯手工制作出来的。 子页4，表单： 此图除了有一个返回首页的链接之外没有其他的特殊效果。表单则是一个较为简单的登陆表单。 子页5，模式介绍： 此页是用模板做成，是极地大乱斗下的四个子页之一，内设一个返回极地大乱斗的链接，还有四个切换子页面之间的链接。 CSS代码：主页CSS代码如下： .ziti { font-family: 宋体; font-size: 12px; color: #000000; } .STYLE1 {font-family: 宋体; font-size: 12px; color: #FFFFFF; } .STYLE2 {color: #FFFFFF} a:link { color: #CCCCCC; text-decoration: none; } a:visited { text-decoration: none; color: #