摘要：Web前端是互联网时代用户交互的主要承载体，因此搭建美观、实用的前端是提升用户体验，优化使用效率的重要环节。本课题使用Photoshop，Adobe illustrator，hbuilder等多种工具完成了游戏资讯门户网站制作，并通过制作过程中的工具应用情况分析不同工具的功能特色及具体环境下的使用方法、不同工具之间的优缺点等。因此本文旨在通过对游戏资讯门户网站web前端设计的重现，一则丰富资讯门户网站的多样性，二则协助阅览者快速、直接地了解网页制作流程及工具。

本项目主要使用Photoshop以及Balsamiq Mockups作为网站设计工具，设计内容包括以下几个页面：网站首页、新闻资讯页、游戏专区页、新闻资讯详情页、游戏详情页。

项目使用Bootstrap框架作为前端开发框架，使用JQuery进行开发，json数据作为本地数据存储，ajax进行本地数据调用操作，基于设计草图制作网站。计划制作一个界面布局简约美观，交互性高，具有响应式体验的现代化资讯门户网站。

关键词：web前端；网页设计；网站制作

目录

摘要

Abstract

1. 绪论-5

1.1 课题研究背景-5

1.2 课题研究目的-6

1.3 课题研究意义-6

1.4 本章小结-7

2. 平面设计软件、前端开发软件、前端开发框架-8

2.1 平面设计软件-8

2.1.1 定义-8

2.1.2 功能特色-8

2. 2 网站开发软件-8

2.2.1 软件简介-8

2.2.2 软件特点-9

2.3 网站开发框架-9

2.3.1 框架介绍-9

2.3.2 包含内容-9

2.4 本章小结-10

3. 作品设计与制作-11

3.1 网站设计-11

3.1.1 设计思路-11

3.1.2 首页设计-13

3.1.3 新闻资讯页设计-14

3.1.4 新闻资讯详情页设计-16

3.1.5 游戏专区页设计-17

3.1.6 游戏详情页设计-18

3.2 网站制作流程-20

3.2.1 框架安装-20

3.2.2 首页制作-21

3.2.3 新闻资讯页制作-25

3.2.4 游戏专区页制作-27

3.2.5 新闻资讯详情页制作-29

3.2.6 游戏详情页制作-30

3.2.7 本地数据操作-32

3.5 本章小结-34

总结-36

参考文献-37

致 谢-38