首页  »  网页设计教程  »  制作产品展示厅

制作产品展示厅

浏览数:共 557 次     评论:共 0 条     发布日期:2011-01-27     分类:dreamweaver

公司创建电子商务主要是为了推广自己的产品,这就要求必须要有一个产品展示厅。本实例主要讲解如何实现公司的产品展示厅。

效果说明 打开首页“ index.aspx ”,即可看到公司的产品展示,如图 82-1 所示。单击某一产品,就可以看到更详细的产品信息,如图 82-2 所示。

dreamweaver

dreamweaver 

创作构思 通过【数据列表】服务行为,可以对公司产品进行展示,通过将产品的编号动态链接到页面,就可以打开产品的详细资料页面。

操作步骤

步骤一 设置展示厅基本页面

( 1 )打开“ index.aspx ”,在“ main ”表格的右边列中嵌入一个 1 行 4 列的表格,如图 82-3 所示。

dreamweaver

( 2 )添加数据集“ cpdata ”。在【数据集】对话框中设列为“选定”,并选择“ cpid ”、“ cpname ”和“ cpdj ” 3 个字段,其他相关设置如图 82-4 所示。

( 3 )添加表格并绑定动态文本。在新嵌入表格的第 3 行中嵌入一个 5 行 1 列的表格,给第一行输入一张图片(任意一张),并绑定数据集“ cpdata ”字段到相应位置,如图 82-5 所示。

dreamweaver 

dreamweaver

( 4 )在第 5 行中添加两张图片,如图 82-6 所示。

dreamweaver


提示:将以上嵌入的图片边框全部设置为“ 0 ”,其图片素材可以在随书光盘中找到。下面将分别为这 3 张图片绑定动态链接,通过产品图像及“详细”图片可以链接打开产品信息窗口,通过“购买”图片可以链接打开产品在线购物窗口,本书将在实例 83 中对在线购物进行详细讲解。


dreamweaver


( 6 ) 将图 82-7 中的代码 src=”images/18.jpg” 改为 src="http://img1.cssword.com/article/2011/0127/810/8."images /"+cpdata.fieldvalue ("cpid", container)+".jpg" ?>" 。

提示:本实例中将产品图片全部保存为“ jpg ”格式的图片,并将产品编号作为图片名,所以打开某一产品的图


片时,其链接地址即为“路径” + “产品编号” + “ .jpg ”。

( 7 ) 添加行为。 切换 到设计视图,选择产品图像,并为其添加标签行为【打开浏览器窗口】,如图 82-8 所示。

dreamweaver


提示:如果没有特别说明,其他实例中【打开浏览器窗口】行为中的窗口宽度、高度也设置为“ 500 ”、“ 350 ”。

( 8 )将【打开浏览器窗口】行为的响应事件由“ onload ”改为“ onclick ”,如图 82-9 所示。

( 9 )切换到代码视图,找到【打开浏览器窗口】行为的源代码,如图 82-10 中圆角方框所示。

( 10 )将图 82-10 中的代码 "cpzl.aspx" 改为 "cpzl.aspx?cpid=" 。切换到【绑定】面板,将数据集“ cpdata ”下的字段“ cpid ”绑定到修改代码的“ = ”之后,如图 82-11 所示。

dreamweaver


dreamweaver


dreamweaver


( 11 )修改代码。切换到设计视图,选择“详细”图片,按第( 7 )至( 10 )步的操作添加【打开浏览器窗口】行为,并绑定字段“ cpid ”到修改代码的“ = ”之后。

( 12 )在设计视图中选择“购买”图片,参照第( 7 )至( 10 )步的操作添加【打开浏览器窗口】行为,设置 url 为“ cpby.aspx ”,将响应事件由“ onload ”改为“ onclick ”。再修改代码“ cpby.aspx ”为“ cpby.aspx?cpid= ”,然后绑定数据集“ cpdata ”下的字段“ cpid ”到修改代码的“ = ”之后。



上一篇:验证用户注册
下一篇:给产品下订单