设计报告封面

1.电子商务网站Demo (1)

1.1实训目标 (1)

1.2实训任务 (1)

2.实训内容 0

2.1补充知识 0

2.1.1html 0

2.1.2css 0

2.1.3javascript 0

2.1.4网站相关知识 (1)

2.2完成的任务 (1)

2.2.1竖广告（indexshu）模块 (1)

2.2.2二级页面 (3)

2.2.3首页及网站整合,布局及实现 (12)

3.小结 (16)

0911040203班王赛（2009110402336）1.电子商务网站Demo

通过Dreamweaver对网站首页及二级页面进行设计

1.1实训目标

通过Dreamweaver来实现一个电子商务网站的界面，主要包括网站首页及二级界面，其网站首页包括顶部导航，左侧导航，广告轮转，每日特价，本周推荐，母婴用品馆，鞋包皮具馆，手机数码馆，电脑办公馆，入驻商家，图书，帮助中心，底部导航，精彩活动，美妆个护，文字广告，竖广告，横向广告，潮流服装，五星图书榜，家居家纺等几个模块。用户可以通过网站首页一目了然的了解此网站的性质。轻而易举的通过分类查找到自己想购买的商品，还可以通过网站首页得知每日促销商品的详情并购买。主要二级界面主要包括商品详情，购物车，订单，登录，注册，公司简介，新手入门，我的当当，礼品卡，帮助，公告等，用户可通过二级页面更深一步的了解商品详情，注册用户，成为会员后达到最终的购买商品。

1.2实训任务

本人负责当当网首页竖广告的设计，并以三人一组形式完成二级页面商品详情界面。

通过此次实训课，我学习了如何应用Dreamweaver软件制作网站，掌握的运用代码做网站的基本步骤

2.实训内容

2.1补充知识

2.1.1html

HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。

另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

2.1.2css

CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。

样式表定义如何显示HTML 元素，就像HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的.css 文件中。通过仅仅编辑一个简单的CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上WEB 设计领域的一个突破。作为网站开发者，你能够为每个HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新

2.1.3javascript

Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言。主要目的是为了解决服务器端语言，比如Perl，遗留的速

度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

2.1.4网站相关知识

通过Dreamweaver8对网站的设计，使我了解到css可以设计html页面的格式，而js可以为其增加动态效果。

2.2完成的任务

2.2.1竖广告（indexshu）模块

2.2.1.1模块效果图

2.2.1.2内容布局图word 图的大体框架

2.2.1.4css 样式控制

2.2.2.1模块效果图

2.2.2.2内容布局图word 图的大体框架

2.2.2.3内容布局实现html原代码

2.2.2.4css样式控制（css）

2.2.3首页及网站整合,布局及实现2.2.

3.1网站目录结构及命名规范

2.2.

3.2页面效果图

2.2.

3.3内容布局图word 图的大体框架

潮流服饰

图书

图书馆

Indexhelpcenter(帮助中心)

3.小结

通过此次实训课，使我了解到Macromedia Dreamweaver 8是建立Web站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于CSS的设计的领先支持到手工编码功能，Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能连接到数据库、Web服务和旧式系统。

非常感谢老师在这五周里的悉心教导，使我们从没接触过网站制作的课程到现在可以制作一个网站，我受益匪浅，收获颇多。通过这次实训，我们对网页制作有了更深刻的认识，做二十一世纪现代人不但要有过硬的理论知识，良好的心理素质，健康的体魄，还要有超强的电脑操作能力。

本次实训有个人完成部分，也有小组共同完成部分，通过大家的分工合作，让我知道团队的力量是如此强大。

知识无止境，我深刻了解我们学习至此还是远远不够的，事实证明，我们仅仅学的是网站制作知识的皮毛，通过老师一步一步的教导才能够做到最后的网页整合，在未来的日子里，我会加强对代码的学习，并且会进一步加强运用Dreamweaver软件制作网站的能力，已达到学以致用。

最后，再次感谢老师在这一个多月的悉心教导，使我们有了这么大的进步！