设置WebStorm背景图片

设置WebStorm背景图片

1、设计的目的

做个网站以纪念港珠澳大桥彰显大国基建魅力，为中国工程师点赞喝彩。港珠澳大桥此刻的美丽,以及无限的未来向往正是中国工匠人的工匠精神延续。

2、设计布局

主页设计布局是在网站的左上角是网站标题名称为港珠澳大桥、首页、项目简介、设计理念、设计特点、大桥影响、桥见美景共六大模块，点击相应的导航栏目页面跳转到相应位置。首页采用div+js+css来实现四张港珠澳大桥背景图的引入和隔一定时间实现循环自动来回切换背景图，通过js设置切换间隔，每张图的停留时间。网站中央是内容，分别包含五大板块，每个版块由不同的div块组成，右上角是主题，下面是详情的文字介绍，右边配上相应的图片，增加网站的观赏性，吸引性。港珠澳大桥美的恰恰是其在不同场景下的景色图。网站底部分别是网站版权介绍信息，采用居中透明显示，文字大小和样式用css来控制，美观大方。

3、网站具体设计过程

首先选定 本网页制作工具是前端开发利器： WebStorm，创建前端项目工程，并创建相应的文件夹，存放各个css、js，还有网页中用到的各种图片，以及除了主页面index.html之外的二级页面，其存放在html文件夹下，在各个二级页面与主页跳转的网页链接上采用相对路径而不是绝对路径，创建好的项目工程目录结构如下所示：

站点结构图：

首先设计网站主页也就是核心内容index.html。页面总体采用 CSS+DIV 布局，最外层DIV为框架。导航栏主要采用a标签以及span标签，并在a标签里面用锚点链接到其对应的模块位置，点击即可跳转到指定位置，使得网站更加人性化，方便展示内容。