11.25

B/S结构用户界面设计

 

【实验编号】

10003809548j 　　Web界面设计

【实验学时】

8学时

【实验环境】

l 所需硬件环境为微机；

l 所需软件环境为dreamweaver

【实验内容】

这次实验要设计一个B/S结构的用户界面，题目自拟，我的题目是购物网站，网页仿照淘宝京东的首页面风格，有商城首页，促销中心，会员中心，帮助中心子页面。

 

【关键步骤】

1. 首先进行页面设计，想好一共需要做几个页面，之间的联系是什么，有什么共同点。
2. 先进行首页的设计，规划好布局。
3. 然后做导航栏，内容等；
4. 一些细节方面的修改；

                                   。

 

 

 

 

 

 

【程序运行截图】

首页面：

 

 

 

子页面：

 

 

 

 

 

 

 

【实验体会】

这次实验做了一个BS结构的页面，主要是通过js，json,css来实现的，在大部分的布局上采用css，感觉这个功能十分强大，几乎所有布局都能够通过这个来实现，以前用Dreamweaver的时候搞不懂这些div是怎样排列的，这次掌握css之后发现即使不适用Dreamweaver也能很快的进行页面的布局等，总的来说，收获颇丰。