电子商务网站建设案例教程第4章新课件.ppt

1、2022-8-151第4章 设计网站的静态网页 建设一个完善的电子商务网站，网络平台硬、软件的 搭建为将来网站的建设、测试和运行提供了环境，而域名 的注册则是为网站的发布作准备，之后需要根据市场需求 和调研结果，进行电子商务网站的规划和设计，并利用网 页的相关技术和开发工具制作网页，实现网站的功能模块，经测试后，上传到Web服务器进行发布，用户就可以在 Internet上通过域名访问这个电子商务网站。2022-8-152第4章 设计网站的静态网页 4.1 Web技术简介 4.2 信息流程设计 4.3 首页设计 4.4 其他页面的设计 4.5 页面的更新 4.6 花店网站首页的制作2022-8-

2、1534.1 Web技术简介 4.1.1 静态网页相关技术 4.1.2 网页动态效果相关技术 4.1.3 交互式网页相关技术2022-8-1544.1.1 静态网页相关技术HTML语言FrontPage 2002Dreamweaver MX/20042022-8-1551.HTML语言HTML是Hyper Text Markup Language的缩写，称为超文本标记语言，是一种用于编写超文本文件的语言。用HTML编写的超文本文件，通常以.htm或.html为文件的扩展名。HTML是标记的集合，这些标记由“”括起来，并且标记一般成对出现，例如是一个开始标记，就构成一个结束标记，在开始标记和结束

3、标记之间的就是页面的内容。2022-8-156HTML文件的基本结构如下：2022-8-157 HTML文件本身是纯文本文件，可以用Windows自带的“记事本”直接编写，以下是一个HTML编写的例子：Example.htm显示图片网站徽标2022-8-158Example.htm运行后显示效果2022-8-1592.FrontPage 2002直接使用HTML语言编写网页，代码量太大，而且调试困难，所以出现了功能强大的网页编辑制作工具FrontPage、Dreamweaver、HomeSite等。这些网页编辑工具的出现，使网页制作变得简单。FrontPage 2002是Microsoft公司

4、继FrontPage 2000之后推出的一个全新的网页设计工具，可以通过“所见即所得”的方式设计和制作网页，从而使网页制作变得简单易行。所以即使你不懂HTML语言，使用FrontPage 2002就可以创建一个看起来很不错的网站。2022-8-1510FrontPage 2002的功能主要包括以下几个方面：站点管理 编辑HTML 发布网页 数据库集成2022-8-1511FrontPage的“普通”视图模式 2022-8-1512FrontPage的“HTML”视图模式 2022-8-15133.Dreamweaver MX/2004Dreamweaver MX与FrontPage 2002相

5、似，也是一个可以实现“所见即所得”的网页设计工具，它是Macromedia公司开发的集网页制作和网站管理于一身的网页编辑器，是专门为网页设计师量身定制的网页开发工具。由网页设计工具Dreamweaver、矢量动画制作工具Flash和处理网页图像工具Fireworks，共同组成的网页开发工具包，被Macromedia公司称为Dream Team(梦之队)，也就是网站设计者通常所说的“网页设计三剑客”。2022-8-1514Dreamweaver MX的功能主要包括以下几个方面：站点管理 与其他网页开发工具高效率的配合 代码提示功能 Coldfusion MX支持 支持最新的网页标准2022-8-

6、15154.1.2 网页动态效果相关技术 Java Applet JavaScript和VBScript CSS Flash2022-8-15161.Java AppletJava的程序分为两种类型：Java Application和Java Applet，其中Java Applet应用于网页中，但它不是可以独立运行的程序，它编译后生成的字节码文件必须嵌入到用HTML语言编写的网页文件中，并由客户端的Web浏览器内部所包含的Java解释器来解释运行。Java Applet作为一种网页开发语言，由于具有跨平台和安全等特性，曾一度被认为是Internet上最适合的开发语言，但事实上，由于Java程

7、序的编译运行速度慢，资源消耗大等缺陷，使Java的应用在Internet上并未真正流行起来。2022-8-15172.JavaScript和VBScriptJavaScript是Netscape公司的Live Script语言和Sun公司的Java语言相结合的产物，但JavaScript不是Java语言，两者最主要的区别是JavaScript是一种脚本语言，可以由浏览器直接解释执行，而Java需要先编译成字节码文件，再由Web浏览器包含的Java解释器进行解释执行，所以JavaScript的运行速度比Java Applet快得多。2022-8-1518VBScript也是一种脚本语言，与Jav

8、aScript非常相似，能够实现的网页功能也类似。VBScript的优点是对初学者来说，入门容易，易学易用。缺点是VBScript编写的脚本程序只能用于微软的IIS服务器端，客户端由IE浏览器解释执行。2022-8-1519以下是一个JavaScript编写的程序例子：javascript.htm显示系统时间var mydate=new Date();var today=mydate.getDate();var tomonth=mydate.getMonth();var toyear=mydate.getYear();document.write(toyear+年+(tomonth+1)+月+

9、today+日);2022-8-1520javascript.htm运行后显示效果：2022-8-15213.CSSCSS是Cascading Style Sheets的缩写，称为层叠样式表，与HTML语言一样，也是一种标记语言。利用CSS技术可以有效地对页面的布局、字体、颜色、背景和其他效果实现精确的控制，可以充分发挥动态html的优势，但是只有最新版的浏览器才支持CSS。2022-8-1522一个CSS例子，css.htmCSS样式例子H1FONT-SIZE:13pt;COLOR:blueA:link COLOR:#0000ff;TEXT-DECORATION:noneA:visited

10、COLOR:#0000ff;TEXT-DECORATION:noneA:active COLOR:#ff00ff;TEXT-DECORATION:underlineA:hover COLOR:#ff0000;TEXT-DECORATION:underline实验链接2022-8-1523css.htm文件运行后显示效果 2022-8-15244.FlashFlash是Macromedia公司专门为网络开发的一个交互式矢量动画设计软件，网站设计者可以使用Flash轻松地为网站设计各种动态Logo、动画、导航条等,还可以加入背景音乐，它出色的多媒体功能和强大的交互功能，使其成为网站设计者制作动画的

11、首选软件。2022-8-15254.1.3 交互式网页相关技术 CGI ASP与ASP.NET PHP2022-8-15261.CGICGI是Common Gateway Interface的缩写，称为公共网关接口，它是最早的Web数据库连接技术，大多数Web服务器都支持这项技术。同时CGI也是一种通信标准，它为Web服务器提供了一种与外部应用程序交互的接口协议标准。2022-8-15272.ASP与ASP.NETASP是Active Server Pages的英文简称，它是Microsoft公司推出的一种用以取代CGI的交互式网页技术。与CGI相比，ASP的功能更为强大，执行速度也快得多。A

12、SP.NET是ASP的下一代版本，但并不仅仅是ASP的简单升级，在许多方面，ASP.NET与ASP有着本质的不同。ASP.NET是Microsoft发展的新型体系结构.NET的一部分，它的全新技术架构会让每个人的网络生活都变得更简单。2022-8-15283.PHPPHP技术与ASP相似，也是一种可以嵌入HTML的交互式网页技术，运行速度比CGI快得多。与ASP相比，PHP可以跨多个平台，能够在Windows、UNIX、Linux等不同平台的Web服务器上运行，支持Apache和IIS等多种Web服务器。PHP通常运行的Web服务器平台是基于UNIX/Linux操作系统下的Apache平台。2

13、022-8-15294.2 信息流程设计 4.2.1 信息流程总体设计 4.2.2 花店网站功能模块设计 4.2.3 花店网站信息流程设计2022-8-15304.2.1 信息流程总体设计网站信息设计流程信息流程设计要注意的问题2022-8-15311.网站信息设计流程 确定网站的目标和定位 收集与该网站有关的资料 网站功能模块设计 网站草案设计 网页制作 网站测试 网站发布2022-8-15322.信息流程设计要注意的问题 主题突出 速度优先 信息要便于用户浏览 设立交流平台2022-8-15334.2.2 花店网站功能模块设计网上花店主要实现的是一个完整的电子商务流程，用户可以注册个人信息

14、，修改个人信息，在用户登录后，可以选购商品，将选购的商品放入购物车后，生成定单，以货到付款的形式完成支付。花店的后台能够实现商品管理，如添加商品、删除商品、修改商品的信息等，并对客户定单进行查询和管理。另外，用户的反馈意见可以发布在留言板上，以便和花店进行沟通。2022-8-1534网上花店的主要功能模块包括：客户管理功能 商品管理功能 下定单及定单管理功能 留言板管理功能2022-8-15354.2.3 花店网站信息流程设计网上花店作为一个电子商务网站，属于B to C的电子商务模式。从网站的功能模块设计中可以看到，该网站可以实现四个方面的完整功能。这些功能按照信息流程设计，又可分为花店网站

15、的前台购物流程和后台管理流程。2022-8-1536花店网站的前台购物流程:选择付款方式会员注册会员登录商品查询选购商品（可以选购多种商品）下订单（放入购物车）收银台（结账）购物完成定单查询确定送货方式和收货人地址2022-8-1537花店网站的后台管理流程：管理员登录商品类别管理商品管理定单查询针对各模块不同的表实现添加记录、修改记录、删除记录、查询显示记录等功能各2022-8-15384.3 首页设计 4.3.1 首页的版面设计 4.3.2 首页设计要注意的问题2022-8-15394.3.1 首页的版面设计“国”字型“T”字型 封面型2022-8-15401.“国”字型2022-8-15

16、412.“T”字型2022-8-15423.封面型2022-8-15434.3.2 首页设计要注意的问题 首页明确，主题突出 导航栏设计形式服从功能 设立最近更新或网站指南栏目 快速下载2022-8-15444.4 其他页面的设计 4.4.1 客户管理 4.4.2 商品管理 4.4.3 定单管理 4.4.4 留言板管理2022-8-15454.4.1 客户管理在花店网站的客户管理模块中，包括会员注册、会员登录、会员信息修改等功能，通过客户信息的收集，可以进行客户资料分析，了解客户的购物倾向，所售商品适合的消费群体，以及在此基础上进一步进行市场预测，从而把握市场走向。2022-8-1546会员注

17、册界面2022-8-1547会员登录界面2022-8-1548会员信息修改界面2022-8-15494.4.2 商品管理商品管理是电子商务网站最重要的一个环节，商品页面一般采用信息分层、逐层细化的方法展示公司的产品。在花店网站的商品管理模块中，包括商品显示、管理员登录、商品类别管理、商品管理、商品查询等功能。2022-8-1550商品显示界面2022-8-1551管理员登录界面2022-8-1552商品类别管理界面2022-8-1553商品管理界面2022-8-1554商品查询界面2022-8-15554.4.3 定单管理定单管理也是电子商务网站一个非常重要的环节，用户在网站上选购好商品，放入

18、购物车，并到收银台结账后，会形成定单。一方面发货方会根据用户定单及时发货，同时网站的后台管理员也可以再次确认定单，核实是否正确。另一方面，用户订货后如果忘记所定货物，也可以在网站上通过定单查询，确认定单上的商品。2022-8-1556用户登录后选购商品在花店网站首页上先进行会员登录，如：用户名为“a”，密码为“a”，（如果未注册的用户购物前需要先进行会员注册），进入购物界面，选购一件商品。2022-8-1557购物车界面2022-8-1558收银台页面 2022-8-1559收银结账界面2022-8-1560形成定单2022-8-1561定单查询2022-8-15624.4.4 留言板管理留言

19、板主要为电子商务网站的用户提供了一个交互的平台，在花店网站的留言板管理模块中，包括发新贴子、查看贴子列表、回复留言等功能。2022-8-1563发新贴子界面2022-8-1564查看贴子列表界面2022-8-1565回复留言界面2022-8-15664.5 页面的更新一个网站要有影响力，最重要的就是要有新的内容。网页的内容应该是动态的，根据实际情况随时进行修改和更新，以紧紧抓住浏览者。2022-8-1567网站更新应注意以下几点：网站内容或服务时常更新 搜集用户的反馈意见 注意网站的升级 时常检查相关链接2022-8-15684.6 花店网站首页的制作 4.6.1 静态网页的制作 4.6.2

20、交互式网页的制作2022-8-15694.6.1 静态网页的制作 徽标的设计 页头的制作 样式的应用2022-8-15701.徽标的设计一个好的网站也需要整体的形象包装和设计，有创意的CI 设计，对网站的宣传推广有事半功倍的效果。在花店网站首页页面的左上角是网站的徽标，如下图所示：2022-8-15712.页头的制作为了保持页面风格的一致，也便于用户方便地使用导航栏，页头需要在网站的每一页中都出现，如下图所示：2022-8-1572如果在网站首页中要显示页头，需要在首页中调用top.inc文件。方法是在Dreamweaver中打开网站首页文件index.aspx，在的程序体内，嵌入以下语句：2

21、022-8-15733.样式的应用花店网站的首页中还应用了在4.1.2提到的CSS样式表，在网页文件夹下的style文件夹里有一个style.css文件，就是样式表文件，部分代码如下：.topinc font-size:12px;color:#FFFFFF;2022-8-15744.6.2 交互式网页的制作交互式网页中网页数据内容的动态交互一般是和数据库系统联系在一起，通过特定的编程语言和外部应用程序来访问企业信息系统中已经存在于数据库中的信息。2022-8-1575交互式网页的制作主要包括两大步骤：数据库设计阶段程序设计阶段2022-8-15764.7 习题实验名称在第2章选定网站主题，规划

22、网站的基础上，对网站进行全面的系统分析和系统设计，并进行初步的页面规划和设计。实验日期 年 月 日实验目的通过练习真实地分析一个网站，掌握网站系统设计的主要技术方法实验内容1.功能需求分析报告。2.数据需求分析报告。3.系统模块设计。4.网站信息流程设计。5.确定网站的整体风格、色彩、CI形象及徽标。6.首页版面设计。7.其他页面设计。参考资料相关书籍与网站名称2022-8-1577谢谢大家！2022-8-1578在线教务辅导网：在线教务辅导网：http:/ 更多课程配套课件资源请访问在线教务辅导网更多课程配套课件资源请访问在线教务辅导网2022-8-15792022-8-15802022-8-15812022-8-15822022-8-15832022-8-1584馋死2022-8-15852022-8-15862022-8-15872022-8-15882022-8-15892022-8-15902022-8-15912022-8-15922022-8-15932022-8-15942022-8-15952022-8-15962022-8-1597PPT研究院POWERPOINT ACADEMY2022-8-15982022-8-1599