第八章 电子商务网站建设

1. 第八章 电子商务网站建设 创建电子商务网站的过程 FrontPage2003的基本操作 网页文本格式化、插入图像和超链接、丰富网页内容 使用表格实现网页定位、增加页面层次 框架的使用 创建CSS样式表 实训八 练习题 本章小结 导航 末页 前一页 后一页 退出

2. 案例：苏宁电器集团电子商务案例 通过案例，请思考： • 1．目前主流的虚拟主机配置如何？如果你要为一新注册成立的公司搭建电子商务平台，你会怎样去做虚拟主机选型？ • 2．搭建电子商务平台是选择自行购买主机，还是选择租赁虚拟主机，你的判断标准是什么？ • 3．网站信息发布系统对于电子商务网站的信息更新与维护有哪些帮助？你所用过或了解的这类软件有哪些？

3. 8.1 创建电子商务网站的过程 • 8.1.1 申请域名 • 8.1.2 选择主机 • 8.1.3 选择操作系统、WWW服务器、开发工具和数据库 • 8.1.4 网站建设与日常维护 导航 末页 前一页 后一页 退出

4. 8.1.1 申请域名 注册域名是电子商务网站规划的第一步。 域名的形式是以若干个英文字母、数字、中横线组成，由“.”分隔成几部分。国际域名由InterNIC审批和维护。 中国互联网络信息中心（CNNIC）是我国域名注册管理机构和域名根服务器运行机构。 国内域名和国际域名在互联网上的使用上是没有本质区别的。 注册域名时用户向指定的域名注册服务机构提交域名申请表和有关证件等，由代理机构替用户进行域名注册的工作即可。 导航 末页 前一页 后一页 退出

5. 8.1.2 选择主机 目前解决服务器空间的方式有多种： （1）虚拟主机：虚拟主机即通常所谓的租用ISP硬盘空间。 （2）主机(服务器)托管：企业自行购买Web服务器后可以将自己的服务器托管在ISP的机房里 。实现其与Internet连接，从而省去用户自行申请专线接入到Internet。适用于大型企业，并有较强的计算机技术力量。 （3）租用DDN专线：通过申请相应速率的DDN线路连接到Internet上。 从价格角度看，这三种方式的成本投入是依次增加的。虚拟主机最为经济，每月只需支付几百元的租用费，采取远程登录的方式就可以实现对站点的维护和更改，自己的网站就可以被访问，而且速度与浏览互联网中的其他网站没有区别。服务器托管的价格界于虚拟主机和专线入网之间，一般月租金几千元，而专线入网的费用每个月要上万元。 导航 末页 前一页 后一页 退出

6. 8.1.3 选择操作系统、WWW服务器、开发工具和数据库 • 服务器有不同厂商的不同品牌，有PCServer，也有企业级的服务器，主要根据用户的业务需求、数据量和访问人数来确定。 • 如果打算在网站上使用数据库，那么选用一种合适的数据库是十分重要的。当数据量不大时，可以考虑使用微软的Accsess数据库，当数据量达到一定程度时需要安装专用数据库，如SQLserver，Mysql等。 • 常用的操作系统有Unix和WindowsNT。 导航 末页 前一页 后一页 退出

7. 8.1.4 网站建设与日常维护 网站建设包括几个要素： （1）网站内容： （2）设计制作： （3）功能开发： （4）网站推广： （5）网站维护与更新： 导航 末页 前一页 后一页 退出

8. 8.2 FrontPage2003的基本操作 • 8.2.1 FrontPage2003简介 • 8.2.2 FrontPage2003的基本操作 导航 末页 前一页 后一页 退出

9. 8.2.1 FrontPage2003简介 • （1）网页是WWW的基本文档，它是用HTML（Hypertext Markup Language，超文本标识语言）编写的，扩展名为.htm或.html。 • （2） FrontPage是一种“所见即所得”的网页编辑器，用户使用FrontPage，无需懂HTML的语法和元素，就能做出引人入胜的具有一定专业水准的网页。 • （3） FrontPage2003是一种功能强大的、易于掌握的Web页开发工具，微软公司将它集成到MicrosoftOffice20003系列中，以保持MicrosoftOffice系列的整体风格一致性。使用FrontPage2003能够轻松愉快地进行网页编辑，能够方便、准确地进行Web网站的建立和管理。 导航 末页 前一页 后一页 退出

10. 8.2.1 FrontPage2003简介 • FrontPage2003的界面介绍 • 安装Office2003后，单击【开始】菜单【程序】中的Microsoft FrontPage，打开FrontPage2003，界面如下页图所示。这个界面对于我们学过Office系列的用户来说是非常熟悉的，它秉承了MicrosoftOffice的界面风格。 导航 末页 前一页 后一页 退出

11. 8.2.1 FrontPage2003简介 导航 末页 前一页 后一页 退出

12. FrontPage由 程序窗口和工作窗口共同组成 • 程序窗口包括： 窗口标题栏、菜单栏、工具栏、任务窗格、状态栏； • 工作窗口包括： 标签栏、网页编辑区、网页编辑模式栏垂直/水平滚动条。 导航 末页 前一页 后一页 退出

13. 8.2.2 FrontPage2003的基本操作 1.建立站点 站点是指一系列可通过Internet浏览器浏览的，具有相互超链接的多媒体文档的集合，以及完成这些文档的存放、查找、搜索、发布的物理设备和其他各种相关硬件、软件系统。通常的站点仅仅是指本地硬盘上的一个文件夹。站点是FrontPage2003操作的核心，所有的操作都是建立在站点之上的。操作步骤如下： （1）在本地磁盘中建立一个“huadian”文件夹。 （2）单击【开始】菜单→【程序】→【MicrosoftFrontPage】，打开FrontPage2003。 （3）单击菜单栏【文件】→【新建】→【站点】或单击工具栏中 按钮旁边的下拉菜单，从中选择【站点】命令，打开【新建站点】对话框，选取“个人网站”模板，在【指定新站点的位置】选项中输入“C:\助理电子商务师\huadian”，如图8-2所示。 导航 末页 前一页 后一页 退出

14. 8.2.2 FrontPage2003的基本操作 导航 末页 前一页 后一页 退出

15. 8.2.2 FrontPage2003的基本操作 2.编辑简单的网页 在FrontPage2003编辑区中输入文本，与其他文字处理软件的操作一样，在光标所在位置直接输入文字，或者从已有的文档中复制文本等即可。例如，输入如图所示的网页。 导航 末页 前一页 后一页 退出

16. 8.2.2 FrontPage2003的基本操作 导航 末页 前一页 后一页 退出

17. 8.2.2 FrontPage2003的基本操作 3.保存网页 单击菜单栏的【文件】→【保存文件】或单击工具栏中的保存按钮，保存新建的文件new_page_1.htm，命名为1_1.htm。 4.退出FrontPage 单击【文件】→【退出】，或者单击FrontPage窗口右上角的关闭按钮。 5.打开网页 启动FrontPage后，单击【文件】→【打开】或单击工具栏上的打开按钮，在查找范围中找到C:\助理电子商务师\huadian，出现【打开】对话框。单击文件名“1_1.htm”，然后单击【打开】按钮。 6.在浏览器中浏览网页 单击桌面上或任务栏上的图标，启动浏览器。在地址栏中直接输入网页的文件名C:\助理电子商务师\huadian，回车确认，或单击浏览器【文件】菜单下的【打开】，浏览器中出现相应的网页。 导航 末页 前一页 后一页 退出

18. 8.3 网页文本格式化 8．3．1 设置文字与段落 8．3．2 插入图象和超链接 8．3．3 丰富网页内容 导航 末页 前一页 后一页 退出

19. 8.3.1 设置文字与段落 • 1.设置文本的字符格式 • （1）启动FrontPage,打开需要格式化的文件。例如，打开上一节中建立的C:\助理电子商务师\1-1.htm文件。 • （2）选中需要进行格式化的文本。例如，选中第一行“我的花店”。有两种方法，一是利用格式工具栏的按钮，对选定的文本进行格式化。或者单击【格式】菜单下的【字体】，利用【字体】对话框进行设置。 • 2.设置文本的段落格式 • （1）选中需要进行格式化的段落。 • （2）单击格式栏上的按钮，对选定的段落进行格式化，或者在选定的段落上右击选择【段落】进行设置。 • 3.插入水平线 • （1）在需要插入水平线的位置单击，例如，在标题“我的花店”后面单击，表示将水平线插在该段的下面。 • （2）单击【插入】菜单下的【水平线】，即可插入一条水平线。默认情况下，插入的水平线与浏览器窗口等宽。如果要改变水平线的宽度、高度、颜色以及其他属性，可双击水平线，利用【水平线属性】对话框进行设置。 导航 末页 前一页 后一页 退出

20. 8.3.1 设置文字与段落 4.插入滚动字幕 （1）选中文本“欢迎您访问我的花店”，单击【编辑】菜单下的【剪切】，或单击工具栏的按钮。 （2）单击菜单栏【插入】→【组件】→【字幕】，在弹出的【字幕属性】对话框中进行相应的设置，在【文本选项】中粘贴剪切的文字，滚动方向为左，滚动速度为４像素，字幕宽度200像素，背景色为紫色，如图8-9所示。单击【确定】按钮即可。如果要使文本上下滚动，需要修改其HTML代码。 5.页面属性的设置 （1）单击【格式】菜单下的【背景】，或在页面的空白位置处右击后选择【网页属性】。 （2）在【网页属性】对话框中分别进行【常规】、【背景】、【边距】的设置，将页面标题设置为“我的花店”，背景颜色设置为淡黄色，上边距设置为０。 导航 末页 前一页 后一页 退出

21. 8.3.2 插入图象和超链接 1.插入图像 （1）网页中使用图像的原则： ①一个网页最好不要超过100KB（包括网页上的图像），下载时间不要超过8秒，必要时需要利用一些软件对图像进行优化处理。 ②在保证所需的清晰度的情况下，尽量压缩图像的大小。 ③采用分割图像的方法把大的图像分割成几小块，同时下载。 ④使用尽量少的颜色，因为图像的颜色种类越多，下载的时间越长。 ⑤除了彩色照片和高色彩图像以外，尽量使用GIF格式图像。 ⑥给大图像设置一个预选下载的图像替代。 导航 末页 前一页 后一页 退出

22. 8.3.2 插入图象和超链接 （2）插入图像的操作 如果要在适当位置插入图像，可执行如下操作： ①将光标插入点定位到需要插入图像的位置。 ②单击【插入】菜单下的【图像】或单击工具栏上的按钮，打开【图片】对话框。 ③选择图像文件所在的位置及文件名，单击【确定】按钮完成图像的插入 。 ④选中图片后右击选择【图片属性】，在【图片属性】对话框进行图片的属性设置，单击【确定】按钮完成设置。 ⑤保存文件，预览效果。 导航 末页 前一页 后一页 退出

23. 8.3.2 插入图象和超链接 （3）创建图像热点 ①选中需要创建热点的图像。 ②在如图8-15所示的图片工具栏中选择多边形热点工具，在图像中选取范围后，打开【创建超链接】对话框进行超链接的设置。 ③保存文件 。 导航 末页 前一页 后一页 退出

24. 8.3.2 插入图象和超链接 2.创建超链接 ①新建一个1-11.htm页面文件，将其保存在与1-11.htm相同的文件夹下。 ②在文件1-1.htm中选中需要创建超链接的对象，如文字“花可以传情”。 ③单击【插入】菜单下的【超链接】或单击工具栏上的按钮，打开【创建超链接】对话框，选中1-11.htm文件， 如下图所示。 导航 末页 前一页 后一页 退出

25. 8.3.2 插入图象和超链接 导航 末页 前一页 后一页 退出

26. 8.3.2 插入图象和超链接 ④单击“目标框架”旁的编辑按钮，在弹出的【目标框架】对话框中进行链接目标的设置，此处选择“新建窗口”，如教材P208图8-18所示。 ⑤单击【确定】按钮完成超链接的创建，结果会在选择的超链接文本下面出现蓝色的下划线。 ⑥保存文件，预览效果。有超链接的地方会变成小手形状，单击此处即可在新窗口中打开所链接的页面。 导航 末页 前一页 后一页 退出

27. 8.3.3 丰富网页内容 1.表格 表格可以帮助我们有序、整齐地组织网页上的信息。FrontPage的表格功能很强，用户既可以直接插入表格，也可以自定义表格，甚至可以把网页上的文本转换为表格，将Word文档中的表格转换为网页上的表格。表格单元中不仅可以输入文字，也可以插入图片。 表格操作可借助于表格工具栏。在缺省情况下，该工具栏是不显示的。在【视图】菜单下选择【表格工具栏】，可显示表格工具栏。 从左至右各按钮的作用为：自由画表格、擦除边框线、插入行、插入列、删除单元、合并单元格、拆分单元格、上对齐、垂直居中、下对齐、均匀分布各行、均匀分布各列、设置背景颜色。 基本操作有： （1）插入表格 （2）编辑表格 （3）设置表格属性 （4）表格的格式化 导航 末页 前一页 后一页 退出

28. 8.3.3 丰富网页内容 2.多媒体 （1）音频 在网页中插入音频文件有三种方法：嵌入、插入、超链接。 1）嵌入音频，操作步骤如下： 单击【插入】菜单的【高级】→【插件】选项，打开【插件属性】对话框，在【插件属性】对话框中单击数据源【浏览】按钮，选择要播放的音频文件，如图8-25所示。可以对插件属性进行设置，然后单击【确定】按钮。 2）插入音频，嵌入要使用插件来播放音频文件，离开了插件，嵌入的文件就不能够正常的播放。而插入则不同，它在播放多媒体时并不依赖插件，只和浏览器有关。插入音频的操作步骤如下： 在网页内右击选择【网页属性】，在打开的【网页属性】对话框【常规】选项下，单击背景音乐位置【浏览】按钮，选择插入的音频文件，还可以设置播放的次数，在默认情况下，不限次数复选框是选中的，表示文件将不断循环播放，然后单击【确定】按钮。 3）链接音频，操作步骤同文字、图像的超链接相同。 导航 末页 前一页 后一页 退出

29. 8.3.3 丰富网页内容 （2）视频 用FrontPage不仅可以灵活的使用音频，同时也可以很方便地控制视频。这和我们使用音频的方法差不多，我们可以使用嵌入、插入和链接的方法使用视频。 可以用嵌入、插入、链接的方法来使用视频和音频，最常用的方法是链接，一般来说，音频、视频文件都比较大，把它们放在站点里不是很合适，而链接可以指向任何位置，这样就可以在其他地方存放媒体文件，甚至链接到别的站点的音频、视频文件上；同时链接还可以让用户可以方便地进行媒体文件的下载。嵌入的方法可以使音频、视频和网页融为一体，也被许多浏览器支持，可以用它来增强网页的吸引力；插入音频、视频文件既可以在设计时设置媒体播放的方式，也不需要插件来播放，制作网页特效时可以采用。 导航 末页 前一页 后一页 退出

30. 8.4 网页定位 8．4．1 利用表格进行页面布局 8．4．2 利用表格增加页面层次 8．4．3 利用框架制作页面 导航 末页 前一页 后一页 退出

31. 8.4.1 利用表格进行页面布局 使用表格进行网页的布局定位时，通常第一层为一个1×1的表格，用于设定网页的尺寸。网页宽度和高度的设置原则是：在800×600分辨率下不会产生横向滚动条，可将表格的宽度设置为760像素，表格的高度可根据需要自行设定，但宽度最好不要超过778像素。 导航 末页 前一页 后一页 退出

32. 8.4.2 利用表格增加页面层次 （1）在FrontPage2003中新建页面文件并保存。 （2）打开【页面属性】对话框，进行页面背景图像的设置。 （3）单击【表格】菜单下的【插入】→【表格】，插入一个3×3的表格，设置表格的背景图像，效果如下页图所示 ： （4）将光标置于中间的单元格中，设置此单元格的背景图像。 （5）将光标置于中间的单元格中，输入文本“网页层次”，效果如图8-31所示。此时的页面已含有4个层次，分别是页面背景层、表格背景层、单元格背景层及文字层。 导航 末页 前一页 后一页 退出

33. 8.4.2 利用表格增加页面层次 导航 末页 前一页 后一页 退出

34. 8.4.3 使用框架制作页面 框架也称为帧(Frame)，通过框架技术能够把Web浏览器的窗口分成几个独立的区域，每个区域即为一个框架。框架是能够独立变化和滚动的小窗口，可以单独显示一个网页。利用这些小窗口，通过合理的组织和编排，可以更好地展示Web网页，使其更加美观。带有框架的网页称为框架网页。 在许多方面，框架与表格相似，所不同的是表格对页面区域进行划分，而框架对整个窗口进行划分。与表格相比，框架更有用，每个框架都有自己独立的网页文件，其内容不因另外框架内容的改变而改变。 导航 末页 前一页 后一页 退出

35. 1.创建框架页操作步骤： （1）启动FrontPage后，单击【文件】菜单下的【新建】→【其他网页模板】，在打开的【网页模板】对话框中选择【框架网页】选项，从中选择一种框架形式，此处选择“横幅和目录”框架形式，单击【确定】按钮即可创建如P215图8-32所示的三框架网页。 每个框架区域内都有2个按钮：设置初始网页和新建网页，单击【设置初始网页】按钮可以为框架指定一个初始网页，单击【新建网页】按钮可以为框架新建一个网页。选中的框架边框会被加黑显示。此处在每个框架中单击【新建网页】按钮，系统会自动在每个框架中创建一个空白网页。 导航 末页 前一页 后一页 退出

36. 8.4.3 使用框架制作页面 导航 末页 前一页 后一页 退出

37. 8.4.3 使用框架制作页面 • （2）为每个框架的新建网页输入内容，并对输入文本进行格式化，如P215图8-32所示（下页图）。对于三框架网页，上边的框架通常显示标题，左边的框架通常显示栏目，右边的框架显示栏目的内容。 • 框架网页有五种视图方式，比普通网页多了以下两种： • ①无框架：当访问者试图打开某个框架网页时，若其使用的浏览器不支持框架，那么浏览器中将显示这样一句话"Thispageusesframes,butyourbrowserdoesn't supportthem."。若要改变上述提示信息，可以切换到无框架视图进行修改。 • ②框架网页HTML：切换到该视图可显示整个框架的HTML代码。而切换到HTML视图，只能看到当前框架初始网页的HTML代码。 导航 末页 前一页 后一页 退出

38. 8.4.3 使用框架制作页面 导航 末页 前一页 后一页 退出

39. 2.保存框架及框架页 操作步骤： （1）单击工具栏上的按钮，出现【另存为】对话框，如下页图所示。此时上边的框架为蓝色框，说明此时保存的是上边框架，输入文件名top，单击【保存】按钮。 导航 末页 前一页 后一页 退出

40. 2.保存框架及框架页 操作步骤： 导航 末页 前一页 后一页 退出

41. 2.保存框架及框架页操作步骤： • （2）左边框架为蓝色时，输入文件名list，单击【保存】按钮。 • （3）右边框架为蓝色时，输入文件名main，单击【保存】按钮。 • （4）整个框架为蓝色框时，输入文件名frame，单击【保存】按钮。 • （5）建立超链接。如将为左边的栏目创建超链接，并使链接目标在右框架中显示，操作步骤如下：选定文本“花语”，单击工具栏上的插入超链接按钮，在出现的【创建超链接】对话框中选择要链接的hy.htm网页，单击“目标框架”旁的编辑按钮，在弹出的【目标框架】对话框中进行链接目标的设置，此处选择右框架，如下页图所示，然后单击【确定】按钮。 导航 末页 前一页 后一页 退出

42. 2.保存框架及框架页操作步骤： 导航 末页 前一页 后一页 退出

43. 3.编辑框架 框架创建之后，可以根据需要对框架进行一些必要的编辑。 （1）拆分框架 （2）删除框架 导航 末页 前一页 后一页 退出

44. 4.设置框架和框架网页的属性 框架创建之后，还可以根据需要设置框架的属性和框架网页的属性。 （1）设置框架属性 操作步骤如下： 1）选择需设置属性的框架。 2）单击【框架】菜单下的【框架属性】，打开【框架属性】对话框，如下页图所示。 3）在【框架属性】对话框中，可进行以下设置： 名称：系统为每个框架提供了默认的名字，用户可以重新输入新的名字。 初始页面：设置该框架的初始网页。 框架大小：设置框架的宽度和高度。通常可以像素为单位给出高度/宽度的绝对值，或者以浏览器窗口大小的百分比设置高度/宽度。 边距：设置框架内的文本距离框架边缘的空白区的大小。 选项：设置框架的可选选项。 导航 末页 前一页 后一页 退出

45. 8.4.3 使用框架制作页面 导航 末页 前一页 后一页 退出

46. （2）设置框架页属性操作步骤： 1）在【框架属性】对话框中单击【框架网页】按钮，打开【网页属性】对话框。 2）在【网页属性】对话框的【框架】选项卡中，可进行以下设置： 框架间距：用于设置框架之间的距离。 显示边框：选中此复选框，表示框架之间有边界；取消选中该项，“框架空间”中的数值将自动为0，表示框架之间没有边界。有时，取消框架之间的边框，能够保持网页的完整性，使客户在浏览时感觉不到框架的存在。 导航 末页 前一页 后一页 退出

47. 5.使用框架注意的问题 1）一个网页上的框架最好不要超过4个，否则，将会显著增加网页下载的时间。 2）与保存普通的网页相比，保存框架有两种方法：其一，单击【文件】菜单下的【保存】，或直接单击工具栏上按钮，将保存整个框架页以及每个框架中的网页；其二，单击【框架】菜单下的【保存页面】，只保存当前所选框架中的网页。 导航 末页 前一页 后一页 退出

48. 8.5 层叠式样式表的应用 在FrontPage2003里可以通过三种方式给网页增加样式表。只有在一个网页一、两个地方才用到的CSS，采用行内嵌入方式。只在单个网页中使用的CSS，采用内联方式。当有多个网页要用到的CSS，采用外联CSS文件的方式，这样网页的代码大大减少，修改起来非常方便。 8．5．1 应用嵌入式样式 8．4．2 应用内联式样式 8．4．3 外联式样表的使用 导航 末页 前一页 后一页 退出

49. 8.5.1 应用嵌入式样式 通过<style>标记符，可将样式信息作为文档的一部分，用于HTML。该方式将样式信息放在文档头部区域中，在<style>和</style>之间定义样式。 导航 末页 前一页 后一页 退出

50. 8.5.2 应用内联式样式 内联式样式只包含在与它有关的标记内，通过使用内含样式表元素，单独指定样式表。在FrontPage 2003编辑一个页面的时候，只要选中要发生变化的文字或图像等有关内容，然后点击右键，选择网页属性中的样式按钮就可以随时随地进行可视化操作了。 导航 末页 前一页 后一页 退出