《使用HTML5实现响应式布局》第十一章-综合项目：传奇互动游戏公司网站（一）学习资料.pptxVIP

第十一章游戏公司网站（一）

理论内容

网站整体规划

网站功能设计

网站页面设计

制作首页

1.网站整体规划

传奇互动游戏公司是网络游戏开发商、运营商和发行商，致力于打造中国领先的网络游戏平台。

传奇互动游戏包括大型多人在线角色扮演游戏（MMORPG）、高级休闲游戏、网页游戏、社交游戏和移动互联网游戏等多款差异化游戏产品。

网站整体规划

本项目开发的是传奇互动游戏公司企业网站的前端页面部分

所谓企业网站，是企业在互联网上开展网络营销和形象宣传的平台

类似于企业的网络名片，不仅对企业的形象是一个良好的宣传，同时可以辅助企业的销售，通过网络直接帮助企业实现产品的销售。

传奇互动游戏公司的网站包括公司信息和公司游戏两大组成部分

分为首页、公司介绍、案例介绍、游戏大厅四大功能

宣传公司的信息和产品，为公司的客户和游戏玩家提供快速使用游戏功能的入口。

2.网站功能设计

网站功能设计包括首页、公司介绍、案例介绍、游戏大厅四大功能

首页用于集中展示网站的重要信息。首页内容显示“关于传奇互动”、“服务项目”、“案例展示”等信息

公司介绍主要发布公司信息、公司的联系方式等内容。

案例介绍以图文的方式显示公司的产品和案例信息，方便网站的访问者集中查询和了解公司的业务内容。

游戏大厅是传奇互动游戏公司运营的棋牌类游戏入口页面，提供游戏注册、下载、客服、公告、新闻等综合功能。

网站的总体功能设计图

2.网站功能设计

网站功能文件及目录规划

功能文件或目录

说明

index.html

首页

about.html

公司介绍

sample.html

案例介绍

game.html

游戏大厅

css.css

index.html、about.html、sample.html的样式文件

basic.css

game.html使用的基础样式文件

layout.css

game.html使用的布局样式文件

css

样式文件的目录

images

网站图片的目录

3.网站页面设计

（1）传奇互动游戏公司首页效果

网站页面设计

（2）公司简介的页面效果

网站页面设计

（3）案例介绍的页面效果

网站页面设计

（4）游戏大厅的页面效果

4.制作首页

（1）在DreamweaverCC中新建HTML5文档，保存为index.html，然后编写首页布局的页面结构主体代码

body

divclass=boxindex_box1/div

divclass=boxindex_box2/div

divclass=boxindex_box3/div

divclass=boxindex_box4/div

divclass=boxindex_box5/div

/body

单列布局

制作首页

（2）新建文件css.css并保存到css目录，然后链接到index.html文件，在css.css文件中编写首页布局的CSS3主体代码

.box{

width:100%;

}

.index_box1{

height:97px;

background:url(../images/topnav_bg.png)no-repeattopcenter;

}

/*省略*/

.index_box5{

height:34px;

background:url(../images/footer.png)repeat-x;

}

div宽度

div高度

div背景图片

div高度

div背景图片

制作首页

（3）在index.html中编写首页页头的页面结构主体代码

divclass=boxindex_box1

divclass=wrap

divid=logo!--省略--/div

divid=nav!--省略--/div

/div

divid=classic_case!--省略--/div

/div

经典案例按钮

LOGO图片

导航菜单栏

制作首页

（4）首页页头的CSS3主体代码

.wrap{

margin:0auto;

width:980px;

}

#logo{

float:left;

/*省略*/

}

#nav{

float:right;

/*省略*/

}

#classic_case{

float:right;

/*省略*/

}

/*省略*/

制作首页

（5）在index.html中编写首页页脚的页面结构主体代码

divclass=boxindex_box5

divclass=wrapfooter

!--省略--

/div

/div

.footer{

text-align:center;

}

.footerspan