一、实训内容

1.设计商务类电子商务网站

二、实训要求

（一）网站设计基本要求

1．网站的夹命名

班级+学号+姓名+网站名。例如：18051139zhangsanXXXweb。

2．网站目录结构

网站的目录是指在创建网站时建立的目录，我们要根据网站的主题和内容来分类规划，不同的栏目要对应不同的目录，在各个栏目目录下我们也要根据内容的不同对其划分不同的分目录，比如说样式放在css目录下，脚本放在js目录下，页面图片放到images目录下，动态上传文件放在upfile目录下，如果有后台数据库放到database目录下，管理页面放在admin目录下等等。同时要注意目录的层次不宜太深，一般不要超过三层，另外给目录起名的时候要尽量使用能表达目录内容的英文或汉语拼音且不能过长，这样会更加方便日后的管理维护。

3．网页的构成和布局

不同主题的网站对网页内容的安排会有所不同，但大多数网站首页的页面结构都会包括页面标题、网站LOGO、导航栏、登录区、搜索区、热点推荐区、主内容区和页脚区，其他页面不需要设置如此复杂了，一般由页面标题、网站LOGO、导航栏、主内容区和页脚区等构成。

网站设计不是把所有内容放置到网页中就行了，还需要我们把网页内容进行合理的排版布局，以给浏览者赏心悦目的感觉，增强网站的吸引力。在设计布局的时候我们要注意把文字、图片在网页空间上均匀分布并且不同形状、色彩的网页元素要相互对比，以形成鲜明的视觉效果。

4．网站页面色彩

网页中色彩的应用是网页设计中极为极为重要的一环，赏心悦目的网页，色彩的搭配都是和谐优美的。在确定网站的主题后，我们就要了解哪些颜色适合站点使用，哪些不适合，这主要根据人们的审美习惯和站点的风格来定，一般情况下要注意以下几点，第一：忌讳使用强烈对比的颜色搭配做主色；第二：配色简洁，主色要尽量控制在三种以内；第三：背景和内容的对比要明显，少用花纹复杂的背景图片，以便突出显示文字内容。

5．网站页面

（1）首页(index.html)

导航栏:导航栏可以一排、两排、多排、图片导航和Frame 框架快捷导航等等各种情况的设计。有时候是横排，有时候则是竖排。另外还有一些动态的导航栏。可以应用CSS和JS技术实现。

LOGO：LOGO是网站为了给大家一个比较直观的信息的表达工具。网站的LOGO，一般以静态的居多，也有动态的，但是LOGO的特点都是在表达网站的信息，是一个网站的直接的表现窗口。

Banner：是网站的广告展示，对于引起用户注意和记忆、增强画面效果有重要作用。可以设置轮播效果。

登录区、搜索区、热点推荐区、主内容区和页脚区：配合整体风格进行设计。

（2）关于我们（about.html）：可以对企业或者商品的介绍。

（3）商品展示页(shop.html)：展示网站相关产品。

（4）商品详单页(shop_single.html)：商品展示通过放大镜效果实现，可以添加商品详情、累计评价信息。

（5）购物车页面(shop_cart.html)：增加商品、删除商品、增加数量、结算等功能。

（6）结账页面(shop_checkout.html)：根据页面结构自行设计。

（7）联系我们(contact_us.html)：自行设计。

（8）服务(services.html)：自行设计。

（9）登录(login.html)：实现登录验证。

（10）注册(register.html)：实现注册校验。

6.图片设计要求

（1）网站图片设计总体要求

①合理位置出现正确图片：尽量避免页面开头就是一张大的产品图片，然后开始一段文字介绍。这种排版方式就存在很大的弊端，用户浏览图片之后开始阅读文章，完全没有图文结合的功能。在文章描述合理的地方，通过图片展示提升用户对文字的理解非常有必要。

②合理的图片处理：并不是所有的图片都适合添加在网页中，占用带宽较大的图片，加载速度慢，用户提前离开网页，那么添加占用带宽较大的图片完全没有必要。添加图片需要对图片进行处理，调整合适的大小，以及在图片中添加一些文字信息，提高用于阅读效率。

③图片与搜索引擎：网页不仅仅给用户浏览，而且也需要展现给搜索引擎。搜索引擎无法获得图片展示的信息，通过图片前后文字、图片alt属性对其介绍，使得搜索引擎也能获得准确的图片信息。

（2）网站图片设计具体要求

①图片设计：网站中至少包含10张自己设计的图片，必须保留源文件（.psd），需要用到PS技术来实现。

②网站logo与广告轮播图片：设计与网站对应的logo，广告轮播图片，至少三张，图片顶部的宽度要与网站下方的宽度一致，要与整个网站风格一致。

③图片要完整、清晰：商品图片一定要完整清晰，图片要能够将内容清晰地传达给用户。

④图片文件的大小：在保证图片完整清晰的情况下，尽量减少图片容量。

⑤图片挑选：选择图片时,应该挑选与网页主网站主题有关联性的图片。

7.视频广告设计要求
如网页中添加视频，视频内容必须是自行设计，并且网站内容相一致。

8.提交要求

提交网站源程序、提交实训报告、提交网站演示视频。