电子商务网站建设案例教程 梁露 第4章新_第1页
电子商务网站建设案例教程 梁露 第4章新_第2页
电子商务网站建设案例教程 梁露 第4章新_第3页
电子商务网站建设案例教程 梁露 第4章新_第4页
电子商务网站建设案例教程 梁露 第4章新_第5页
已阅读5页，还剩94页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第4章设计网站的静态网页

建设一个完善的电子商务网站，网络平台硬、软件的搭建为将来网站的建设、测试和运行提供了环境，而域名的注册那么是为网站的发布作准备，之后需要根据市场需求和调研结果，进行电子商务网站的规划和设计，并利用网页的相关技术和开发工具制作网页，实现网站的功能模块，经测试后，上传到Web效劳器进行发布，用户就可以在Internet上通过域名访问这个电子商务网站。10/10/20231第4章设计网站的静态网页4.1Web技术简介4.2信息流程设计4.3首页设计4.4其他页面的设计4.5页面的更新4.6花店网站首页的制作10/10/202324.1Web技术简介4.1.1静态网页相关技术4.1.2网页动态效果相关技术4.1.3交互式网页相关技术10/10/202334.1.1静态网页相关技术HTML语言FrontPage2002DreamweaverMX/200410/10/202341.HTML语言HTML是HyperTextMarkupLanguage的缩写，称为超文本标记语言，是一种用于编写超文本文件的语言。用HTML编写的超文本文件，通常以.htm或.html为文件的扩展名。HTML是标记的集合，这些标记由“<>〞括起来，并且标记一般成对出现，例如<head>是一个开始标记，</head>就构成一个结束标记，在开始标记和结束标记之间的就是页面的内容。10/10/20235HTML文件的根本结构如下：<html><head><!-HTML文件头-!></head><body><!-HTML文件正文-!></body></html>10/10/20236HTML文件本身是纯文本文件，可以用Windows自带的“记事本〞直接编写，以下是一个HTML编写的例子：Example.htm<html><head><title>显示图片</title></head><body><fontsize=3color=blueface=宋体>网站徽标</font><p><imgsrc="logo.gif"alt="徽标"width=50height=50></body></html>10/10/20237Example.htm运行后显示效果10/10/202382.FrontPage2002直接使用HTML语言编写网页，代码量太大，而且调试困难，所以出现了功能强大的网页编辑制作工具FrontPage、Dreamweaver、HomeSite等。这些网页编辑工具的出现，使网页制作变得简单。FrontPage2002是Microsoft公司继FrontPage2000之后推出的一个全新的网页设计工具，可以通过“所见即所得〞的方式设计和制作网页，从而使网页制作变得简单易行。所以即使你不懂HTML语言，使用FrontPage2002就可以创立一个看起来很不错的网站。10/10/20239FrontPage2002的功能主要包括以下几个方面：

站点管理编辑HTML发布网页数据库集成10/10/202310FrontPage的“普通〞视图模式10/10/202311FrontPage的“HTML〞视图模式10/10/2023123.DreamweaverMX/2004DreamweaverMX与FrontPage2002相似，也是一个可以实现“所见即所得〞的网页设计工具，它是Macromedia公司开发的集网页制作和网站管理于一身的网页编辑器，是专门为网页设计师量身定制的网页开发工具。由网页设计工具Dreamweaver、矢量动画制作工具Flash和处理网页图像工具Fireworks，共同组成的网页开发工具包，被Macromedia公司称为DreamTeam(梦之队)，也就是网站设计者通常所说的“网页设计三剑客〞。10/10/202313DreamweaverMX的功能主要包括以下几个方面：站点管理与其他网页开发工具高效率的配合代码提示功能ColdfusionMX支持支持最新的网页标准10/10/2023144.1.2网页动态效果相关技术JavaAppletJavaScript和VBScriptCSSFlash10/10/2023151.JavaAppletJava的程序分为两种类型：JavaApplication和JavaApplet，其中JavaApplet应用于网页中，但它不是可以独立运行的程序，它编译后生成的字节码文件必须嵌入到用HTML语言编写的网页文件中，并由客户端的Web浏览器内部所包含的Java解释器来解释运行。JavaApplet作为一种网页开发语言，由于具有跨平台和平安等特性，曾一度被认为是Internet上最适合的开发语言，但事实上，由于Java程序的编译运行速度慢，资源消耗大等缺陷，使Java的应用在Internet上并未真正流行起来。10/10/2023162.JavaScript和VBScriptJavaScript是Netscape公司的LiveScript语言和Sun公司的Java语言相结合的产物，但JavaScript不是Java语言，两者最主要的区别是JavaScript是一种脚本语言，可以由浏览器直接解释执行，而Java需要先编译成字节码文件，再由Web浏览器包含的Java解释器进行解释执行，所以JavaScript的运行速度比JavaApplet快得多。10/10/202317VBScript也是一种脚本语言，与JavaScript非常相似，能够实现的网页功能也类似。VBScript的优点是对初学者来说，入门容易，易学易用。缺点是VBScript编写的脚本程序只能用于微软的IIS效劳器端，客户端由IE浏览器解释执行。10/10/202318以下是一个JavaScript编写的程序例子：javascript.htm<html><head><title>显示系统时间</title></head><SCRIPTlanguage=JavaScript>varmydate=new Date();vartoday=mydate.getDate();vartomonth=mydate.getMonth();vartoyear=mydate.getYear();</SCRIPT><body><SCRIPTlanguage=javascript>document.write(toyear+"年"+(tomonth+1)+"月"+today+"日");</SCRIPT></body></html>10/10/202319javascript.htm运行后显示效果：10/10/2023203.CSSCSS是CascadingStyleSheets的缩写，称为层叠样式表，与HTML语言一样，也是一种标记语言。利用CSS技术可以有效地对页面的布局、字体、颜色、背景和其他效果实现精确的控制，可以充分发挥动态html的优势，但是只有最新版的浏览器才支持CSS。10/10/202321一个CSS例子，css.htm<HTML><HEAD><TITLE>CSS样式例子</TITLE><STYLETYPE="text/css">H1{FONT-SIZE:13pt;COLOR:blue}A:link{COLOR:#0000ff;TEXT-DECORATION:none}A:visited{COLOR:#0000ff;TEXT-DECORATION:none}A:active{COLOR:#ff00ff;TEXT-DECORATION:underline}A:hover{COLOR:#ff0000;TEXT-DECORATION:underline}</STYLE></HEAD><BODY><H1>实验</H1><Ahref="javascript.htm">链接</A></BODY></HTML>10/10/202322css.htm文件运行后显示效果

10/10/2023234.FlashFlash是Macromedia公司专门为网络开发的一个交互式矢量动画设计软件，网站设计者可以使用Flash轻松地为网站设计各种动态Logo、动画、导航条等,还可以参加背景音乐，它出色的多媒体功能和强大的交互功能，使其成为网站设计者制作动画的首选软件。10/10/2023244.1.3交互式网页相关技术CGIASP与ASP.NETPHP10/10/2023251.CGICGI是CommonGatewayInterface的缩写，称为公共网关接口，它是最早的Web数据库连接技术，大多数Web效劳器都支持这项技术。同时CGI也是一种通信标准，它为Web效劳器提供了一种与外部应用程序交互的接口协议标准。10/10/2023262.ASP与ASP.NETASP是ActiveServerPages的英文简称，它是Microsoft公司推出的一种用以取代CGI的交互式网页技术。与CGI相比，ASP的功能更为强大，执行速度也快得多。ASP.NET是ASP的下一代版本，但并不仅仅是ASP的简单升级，在许多方面，ASP.NET与ASP有着本质的不同。ASP.NET是Microsoft开展的新型体系结构.NET的一局部，它的全新技术架构会让每个人的网络生活都变得更简单。10/10/2023273.PHPPHP技术与ASP相似，也是一种可以嵌入HTML的交互式网页技术，运行速度比CGI快得多。与ASP相比，PHP可以跨多个平台，能够在Windows、UNIX、Linux等不同平台的Web效劳器上运行，支持Apache和IIS等多种Web效劳器。PHP通常运行的Web效劳器平台是基于UNIX/Linux操作系统下的Apache平台。10/10/2023284.2信息流程设计4.2.1信息流程总体设计4.2.2花店网站功能模块设计4.2.3花店网站信息流程设计10/10/2023294.2.1信息流程总体设计网站信息设计流程信息流程设计要注意的问题10/10/2023301.网站信息设计流程确定网站的目标和定位收集与该网站有关的资料网站功能模块设计网站草案设计网页制作网站测试网站发布10/10/2023312.信息流程设计要注意的问题主题突出速度优先信息要便于用户浏览设立交流平台10/10/2023324.2.2花店网站功能模块设计网上花店主要实现的是一个完整的电子商务流程，用户可以注册个人信息，修改个人信息，在用户登录后，可以选购商品，将选购的商品放入购物车后，生成定单，以货到付款的形式完成支付。花店的后台能够实现商品管理，如添加商品、删除商品、修改商品的信息等，并对客户定单进行查询和管理。另外，用户的反响意见可以发布在留言板上，以便和花店进行沟通。10/10/202333网上花店的主要功能模块包括：客户管理功能商品管理功能下定单及定单管理功能留言板管理功能10/10/2023344.2.3花店网站信息流程设计网上花店作为一个电子商务网站，属于BtoC的电子商务模式。从网站的功能模块设计中可以看到，该网站可以实现四个方面的完整功能。这些功能按照信息流程设计，又可分为花店网站的前台购物流程和后台管理流程。10/10/202335花店网站的前台购物流程:选择付款方式会员注册会员登录商品查询选购商品（可以选购多种商品）下订单（放入购物车）收银台（结账）购物完成定单查询确定送货方式和收货人地址10/10/202336花店网站的后台管理流程：

管理员登录商品类别管理商品管理定单查询针对各模块不同的表实现添加记录、修改记录、删除记录、查询显示记录等功能各10/10/2023374.3首页设计4.3.1首页的版面设计4.3.2首页设计要注意的问题10/10/2023384.3.1首页的版面设计“国〞字型“T〞字型封面型10/10/2023391.“国〞字型10/10/2023402.“T〞字型10/10/2023413.封面型10/10/2023424.3.2首页设计要注意的问题首页明确，主题突出导航栏设计形式服从功能设立最近更新或网站指南栏目快速下载10/10/2023434.4其他页面的设计4.4.1客户管理4.4.2商品管理4.4.3定单管理4.4.4留言板管理10/10/2023444.4.1客户管理在花店网站的客户管理模块中，包括会员注册、会员登录、会员信息修改等功能，通过客户信息的收集，可以进行客户资料分析，了解客户的购物倾向，所售商品适合的消费群体，以及在此根底上进一步进行市场预测，从而把握市场走向。10/10/202345会员注册界面10/10/202346会员登录界面10/10/202347会员信息修改界面10/10/2023484.4.2商品管理商品管理是电子商务网站最重要的一个环节，商品页面一般采用信息分层、逐层细化的方法展示公司的产品。在花店网站的商品管理模块中，包括商品显示、管理员登录、商品类别管理、商品管理、商品查询等功能。10/10/202349商品显示界面10/10/202350管理员登录界面10/10/202351商品类别管理界面10/10/202352商品管理界面10/10/202353商品查询界面10/10/2023544.4.3定单管理定单管理也是电子商务网站一个非常重要的环节，用户在网站上选购好商品，放入购物车，并到收银台结账后，会形成定单。一方面发货方会根据用户定单及时发货，同时网站的后台管理员也可以再次确认定单，核实是否正确。另一方面，用户订货后如果忘记所定货物，也可以在网站上通过定单查询，确认定单上的商品。10/10/202355用户登录后选购商品在花店网站首页上先进行会员登录，如：用户名为“a〞，密码为“a〞，〔如果未注册的用户购物前需要先进行会员注册〕，进入购物界面，选购一件商品。10/10/202356购物车界面10/10/202357收银台页面

10/10/202358收银结账界面10/10/202359形成定单10/10/202360定单查询10/10/2023614.4.4留言板管理留言板主要为电子商务网站的用户提供了一个交互的平台，在花店网站的留言板管理模块中，包括发新贴子、查看贴子列表、回复留言等功能。10/10/202362发新贴子界面10/10/202363查看贴子列表界面10/10/202364回复留言界面10/10/2023654.5页面的更新一个网站要有影响力，最重要的就是要有新的内容。网页的内容应该是动态的，根据实际情况随时进行修改和更新，以紧紧抓住浏览者。10/10/202366网站更新应注意以下几点：网站内容或效劳时常更新搜集用户的反响意见注意网站的升级时常检查相关链接10/10/2023674.6花店网站首页的制作4.6.1静态网页的制作4.6.2交互式网页的制作10/10/2023684.6.1静态网页的制作徽标的设计页头的制作样式的应用10/10/2023691.徽标的设计一个好的网站也需要整体的形象包装和设计，有创意的CI设计，对网站的宣传推广有事半功倍的效果。在花店网站首页页面的左上角是网站的徽标，如以下图所示：10/10/2023702.页头的制作为了保持页面风格的一致，也便于用户方便地使用导航栏，页头需要在网站的每一页中都出现，如以下图所示：10/10/202371如果在网站首页中要显示页头，需要在首页中调用top.inc文件。方法是在Dreamweaver中翻开网站首页文件index.aspx，在<BODY>的程序体内，嵌入以下语句：<!--#includevirtual="./top.inc"-->10/10/2023723.样式的应用花店网站的首页中还应用了在提到的CSS样式表，在网页文件夹下的style文件夹里有一个style.css文件，就是样式表文件，局部代码如下：.topinc{ font-size:12px; color:#FFFFFF;}10/10/

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论