第8章 创建电子商务网站

第8章创建电子商务网站8.1 规划设计电子商务网站8.1.1规划设计网上书店网上的小店，麻雀虽小、五脏俱全。

好的规划设计可以使建站工作事半功倍1．网站需求分析根据市场调查统计，确定书店的长期服务对象是中老年客户，那么可以确定主营对象为文学类和生活百科类书籍，同时配备一些民间艺术类的书籍作为网站的特色。

2．网站规划01）明确所创建的是一个C2C的网站，主营业务是售书。

02）网上书店是一个多功能的系统，每个功能模块由多个链接文件组成，采用树状链接结构。

图 8-1-1图 8-1-204）确定网站整体风格，网站是以书为主题，因此可将整个站点的风格定位为清新儒雅或活泼易变。

33934005）构建网站目录结构在F 盘根目录下新建文件夹，命名为bookshop ，在此新文件夹里新建三个文件夹，分别取名为Files （存放除首页外的网页文件）、Images(主要存放图片)、Other(主要存放flash 动画、声音等其它类型的文件)。

注意：站点文件夹里所有的文件夹或文件一般不用中文，而用拼音或英文表示。

8.1.2配置网站的运行环境要使网上书店能对外发布，必须正确配置计算机上的Internet 信息服务（IIS ），使放置网站的计算机成为Web 服务器1．安装IIS将Windows 操作系统安装盘放入光驱，单击“开始/设置/控制面板”，双击“添加或删除程序”，然后单击“添加或删除Windows 组件”按钮后选择“Internet 信息服务（IIS ）”，进行安装。

图 8-1-32．配置IIS单击“开始/设置/控制面板”，执行“管理工具/Internet 服务管理器”命令，打开信息服务对话框。

01）设置默认网站：单击“默认网站”，按下鼠标右键，在快捷菜单中选择“属性”菜单，打开“默认网站”对话框。

图 8-1-4341若网卡有具体的IP 地址，也可在“IP 地址”旁的文本框内输入地址。

注意：默认网站的TCP 端口是80。

图 8-1-502）设置主目录路径：单击“主目录”，单击“浏览”按钮，选择站点文件夹的具体路径，并为站点设置权限。

图 8-1-603）设置默认的主页文档：单击“文档”标签后单击“添加”按钮，输入主页文件名：“index.htm ”，确定后，选中“index.htm ”，然后连续单击向上箭头，使其成为第一个文件。

这样就可以将主页放在默认文档的首位，使游览器能自动识别并打开站点的默认主页。

图 8-1-704）在F:\bookshop文件夹内新建一个主页文件index.htm，单击“Internet信息服务”的“默认网站”，右键“index.htm”选择“游览”命令，观察打开的主页文件的地址：图 8-1-88.1.3练习01）在F盘根目录下新建文件夹，命名为bookshop，并在该文件夹内新建一个主页文件index.htm02）正确配置IIS服务，设置主目录，权限，默认文档，并浏览该网站的主页。

3423438.2 装饰网上书店在做完了前期的网站规划设计工作后，就可以为书店网站设计和制作主页了。

8.2.1建立网上书店站点网站的主页是网站的“门面”。

它的设计是一个网站成功与否的关键。

主页的设计应该遵循快速、简洁、吸引人、信息概括能力强、易于导航等原则。

为了吸引用户经常访问网上书店，主页设计应力求新颖、大方，如主页上展示最新的书籍，就可以引起读者的关注。

1． 主页功能规划网站的主页是整个网站的门户，大致应包含“图书介绍”、“在线销售”、“会员注册”等基本功能。

2．主页栏目设计图 8-2-13．选择制作工具使用Dreamweaver8网页制作工具来制作网站4．创建站点在书店网页中，部分功能需要使用到Web 数据库技术，因此必须使用服务器技术，如用 ASP VPScript 脚本编写语言来实现对Web 数据库的各项操作。

01）单击Dreamweaver 站点，图 8-2-202）输入站名“tushu”，及站点的HTTP地址：“http://localhost/，单击“下一步”图 8-2-303）选中服务器技术，并在下拉列表中选择“ASP VBScript”，然后单击“下上步”图 8-2-404）选中“在本地进行编辑和测试”，选择网站文件夹或在输入框中输入：“F:\bookshop”，然后单击“下一步”图 8-2-534434505）单击“测试URL ”，若IIS 配置正确，会弹出“URL 前缀测试已成功”的消息框，否则会弹出出错信息框。

然后单出“下一步”图 8-2-606）选中“否”，不使用远程服务器，然后单击“下一步”。

提示：若网站规模较大，可以选择团队协作开发的方式。

图 8-2-707）单击“完成”，结束对站点的创建。

小提示：通过“高级”标签可以对站点作进一步的设置。

图 8-2-8练习01）建立一个名为“sport”的站点，站点文件夹位置为“F:\sport”，服务器技术为VBScript。

02）制作一个动态主页index.asp，按F12预览8.2.2 搭建商务网站主页框架为了提高网站的搭建效率，可以使用框架技术将网页划分成若干个区域，同时将栏目内容按功能归类后放置在不同的区域内。

采用框架技术来构建主页，上部是内容相对不变的网站logo、动态横标、导航栏，中是部分是变化的栏目内容，底部则是版权信息等内容。

1．打开“tushu”站点2．制作框架网页01）制作如下图所示的框架网页图 8-2-902）单击“文件/保存全部”命令，先保存总框架页面即框架页取名为“index.htm”，存于站点的根目录，它是记载页面框架分割信息的。

03）然后依次保存各框架的页面，保存时会出现虚框来显示所要保存的框架网页在整个框架中所处的位置。

将框架的上部网页命名为“sb.htm”，左部网页命名为“zb.htm”，右部网页命名为“yb.htm”，下部网页命名为“xb.htm”，3．框架布局调整的方法01）用鼠标拖曳框架边框线02）执行“窗口/框架”命令，打开“框架”面板，单击需调整的框架，通过“属性”面板可以对该框架进行常规设置。

3468.2.3 制作主页各框架页面图 8-2-101．制作上框架页面(sb.htm)，如图8-2-11所示图 8-2-1101）插入表格，2行7列，宽度为98%，填充为3，边框为0，间距为0，居中对齐02）选中第一行的第二列至第七列，合并03）插入图像04）输入导航栏文字05）修饰文字，用CSS样式表实现，类名：wenzi，参数设置如下：14号宋体，白色，粗体06）修饰单元格：背景色“#006BB6”2．制作下框架页面(xb.htm)，如图8-2-12所示347348图 8-2-1201）插入表格，1行1列，宽度为98%，填充为3，边框为0，间距为0，居中对齐 02）输入文字并修饰：12号宋体，淡蓝色“#8CB0F8” 3． 制作左框架页面(zb.htm)，如图8-2-13所示图 8-2-1301）制作会员登录，插入表单，命名为“form1”02）在表单中插入表格4行1列，宽度为98%，填充为0，边框为0，间距为0 03）在第1行插入图片04）在第2、3行插入文字和文本字段，分别设置如下：图 8-2-14 图 8-2-1505）在第4行插入按钮 06）制作“新书上架”，插入表格7行2列，宽度为98%，填充为0，边框为0，间距为3图 8-2-1607）分别插入文字和图片，并进行修饰4． 制作右框架页面(yb.htm)，如图8-2-16所示349图 8-2-1601）第一个表格图 8-2-1702）第二个表格图 8-2-1803）第三个表格图 8-2-193508.2.4 制作次级页面模板1．创建模板(moban.dwt)，如图8-2-20所示图 8-2-2001）新建一模板网页,利用所学的网页制作技能设计网页,内容是介绍少儿读物，把该页面另存为模板“moban.dwt”。

注：模板默认保存在站点文件夹下的“Templates”图 8-2-21图 8-2-2235102）制作标题及导航栏如图8-2-23所示图 8-2-2303）在导航栏下方插入一个表格：1行2列，宽度100%，高327，填充0，边框0，间距0 04）在左边的单元格内插入插入如下表格，并输入文字和插入图片图 8-2-2405）在右边的单元格内插入插入如下表格，并输入文字和插入图片图 8-2-2506）创建模板的可编辑区域：选中右边的表格，单击菜单“插入|模板对象|可编辑区域”，命名为“main”，再次保存。

352353图 8-2-262． 模板的使用01）制作“少儿读物”页面。

小提示：模板在使用时，只能对“可编辑区域”进行修改编辑，其他区域是不能进行编辑的，处于锁定状态。

①执行“文件/新建”命令，单击“模板”标签，选择“moban ”模板，单击“创建”图 8-2-27②输入网页标题为“少儿读物”③由于在创建模板时采用的正好是少儿读物的页面，因此将页面以“shaoerduwu.htm ”保存至站点的文件夹files 下即可。

02）制作“文学艺术”页面利用模板新建网页，对可编辑区域进行修改编辑，并将页面以“wenxueyishu.htm ”保存至站点的文件夹files 下。

图 8-2-2803）采用相同的方式制作“科技教育（kejijiaoyu.htm）”如图8-2-29、“生活百科(shenghuobaike.htm)”如图8-2-30和“财经管理(caijingguanli.htm)”如图8-2-31页面。

图 8-2-29图 8-2-30图 8-2-313．模板的修改打开模板文件“moban.dwt”，对非可编辑区域进行修改后保存。

小提示：模板修改并更新后，所有引用模板的而面会自动修改。

3548.2.5 创建图片超级链接1．创建导航文字超级链接打开主页“index.htm”和模板页“moban.dwt”2．创建图片超给链接3．创建电子邮件链接4．创建锚记链接5．创建URL链接3553568.3 设计ASP 网页与网络数据库8.3.1揭开ASP 面纱前面学习了建立网站、新建网页和美化修饰页面等静态网页制作的常规技能。

但是，要制作一个电子商务的网站，还应该具有动态网页的交互和Web 数据库有应用。

在因特网的初期，Web 网页通常是静态的图文组合，也称静态网页。

浏览者只能通过网页来阅读信息，而无法进行查询、问卷调查、在线交谈等交互行为。

ASP----作为动态网页的解决方案，大大丰富了Web 网页的功能，满足了游览者多元化的需求。

ASP （全称Active Server Page ）是微软公司推出的一种动态网页技术。

ASP 本身不是一种脚本语言，而是提供一种嵌在HTML 中的脚本程序在Web 服务端执行的环境。