资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,第4章 设计网站的静态网页,建设一个完善的电子商务网站，网络平台硬、软件的,搭建为将来网站的建设、测试和运行提供了环境，而域名,的注册那么是为网站的发布作准备，之后需要根据市场需求,和调研结果，进行电子商务网站的规划和设计，并利用网,页的相关技术和开发工具制作网页，实现网站的功能模块，,经测试后，上传到Web效劳器进行发布，用户就可以在,Internet上通过域名访问这个电子商务网站。,8/28/2024,1,第4章 设计网站的静态网页,4.1 Web技术简介,4.2 信息流程设计,4.3 首页设计,4.4 其他页面的设计,4.5 页面的更新,4.6 花店网站首页的制作,8/28/2024,2,4.1 Web技术简介,4.1.1 静态网页相关技术,4.1.2 网页动态效果相关技术,4.1.3 交互式网页相关技术,8/28/2024,3,4.1.1 静态网页相关技术,HTML语言,FrontPage 2002,Dreamweaver MX/2004,8/28/2024,4,1. HTML语言,HTML是Hyper Text Markup Language的缩写，称为超文本标记语言，是一种用于编写超文本文件的语言。用HTML编写的超文本文件，通常以 .htm或 .html为文件的扩展名。,HTML是标记的集合，这些标记由“括起来，并且标记一般成对出现，例如是一个开始标记，就构成一个结束标记，在开始标记和结束标记之间的就是页面的内容。,8/28/2024,5,HTML文件的根本结构如下：,8/28/2024,6,HTML文件本身是纯文本文件，可以用Windows自,带的“记事本直接编写，以下是一个HTML编写的例子： Example.htm,显示图片,网站徽标,8/28/2024,7,Example.htm运行后显示效果,8/28/2024,8,2.FrontPage 2002,直接使用HTML语言编写网页，代码量太大，而且调试困难，所以出现了功能强大的网页编辑制作工具FrontPage、Dreamweaver、HomeSite等。这些网页编辑工具的出现，使网页制作变得简单。,FrontPage 2002是Microsoft公司继FrontPage 2000之后推出的一个全新的网页设计工具，可以通过“所见即所得的方式设计和制作网页，从而使网页制作变得简单易行。所以即使你不懂HTML语言，使用FrontPage 2002就可以创立一个看起来很不错的网站。,8/28/2024,9,FrontPage 2002的功能主要包括以下几个方面：,站点管理,编辑HTML,发布网页,数据库集成,8/28/2024,10,FrontPage的“普通视图模式,8/28/2024,11,FrontPage的“HTML视图模式,8/28/2024,12,3.Dreamweaver MX/2004,Dreamweaver MX与FrontPage 2002相似，也是一个可以实现“所见即所得的网页设计工具，它是Macromedia公司开发的集网页制作和网站管理于一身的网页编辑器，是专门为网页设计师量身定制的网页开发工具。,由网页设计工具Dreamweaver、矢量动画制作工具Flash和处理网页图像工具Fireworks，共同组成的网页开发工具包，被Macromedia公司称为Dream Team(梦之队)，也就是网站设计者通常所说的“网页设计三剑客。,8/28/2024,13,Dreamweaver MX的功能主要包括以下几个方面：,站点管理,与其他网页开发工具高效率的配合,代码提示功能,Coldfusion MX支持,支持最新的网页标准,8/28/2024,14,4.1.2 网页动态效果相关技术,Java Applet,JavaScript和VBScript,CSS,Flash,8/28/2024,15,1.Java Applet,Java的程序分为两种类型：Java Application和Java Applet，其中Java Applet应用于网页中，但它不是可以独立运行的程序，它编译后生成的字节码文件必须嵌入到用HTML语言编写的网页文件中，并由客户端的Web浏览器内部所包含的Java解释器来解释运行。,Java Applet作为一种网页开发语言，由于具有跨平台和平安等特性，曾一度被认为是Internet上最适合的开发语言，但事实上，由于Java程序的编译运行速度慢，资源消耗大等缺陷，使Java的应用在Internet上并未真正流行起来。,8/28/2024,16,2.JavaScript和VBScript,JavaScript是Netscape公司的Live Script语言和Sun公司的Java语言相结合的产物，但JavaScript不是Java语言，两者最主要的区别是JavaScript是一种脚本语言，可以由浏览器直接解释执行，而Java需要先编译成字节码文件，再由Web浏览器包含的Java解释器进行解释执行，所以JavaScript的运行速度比Java Applet快得多。,8/28/2024,17,VBScript也是一种脚本语言，与JavaScript非常相似，能够实现的网页功能也类似。,VBScript的优点是对初学者来说，入门容易，易学易用。缺点是VBScript编写的脚本程序只能用于微软的IIS效劳器端，客户端由IE浏览器解释执行。,8/28/2024,18,以下是一个JavaScript编写的程序例子：javascript.htm,显示系统时间,var mydate=newDate();,var today=mydate.getDate();,var tomonth=mydate.getMonth();,var toyear=mydate.getYear();,document.write(toyear+年+(tomonth+1)+月+today+日);,8/28/2024,19,javascript.htm运行后显示效果 ：,8/28/2024,20,3. CSS,CSS是Cascading Style Sheets的缩写，称为层叠样式表，与HTML语言一样，也是一种标记语言。,利用CSS技术可以有效地对页面的布局、字体、颜色、背景和其他效果实现精确的控制，可以充分发挥动态html的优势，但是只有最新版的浏览器才支持CSS。,8/28/2024,21,一个CSS例子，css.htm,CSS样式例子,H1FONT-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,实验,链接,8/28/2024,22,css.htm文件运行后显示效果,8/28/2024,23,4. Flash,Flash是Macromedia公司专门为网络开发的一个交互式矢量动画设计软件，网站设计者可以使用Flash轻松地为网站设计各种动态Logo、动画、导航条等,还可以参加背景音乐，它出色的多媒体功能和强大的交互功能，使其成为网站设计者制作动画的首选软件。,8/28/2024,24,4.1.3 交互式网页相关技术,CGI,ASP与ASP.NET,PHP,8/28/2024,25,1.CGI,CGI是Common Gateway Interface的缩写，称为公共网关接口，它是最早的Web数据库连接技术，大多数Web效劳器都支持这项技术。同时CGI也是一种通信标准，它为Web效劳器提供了一种与外部应用程序交互的接口协议标准。,8/28/2024,26,2.ASP与ASP.NET,ASP是Active Server Pages的英文简称，它是Microsoft公司推出的一种用以取代CGI的交互式网页技术。与CGI相比，ASP的功能更为强大，执行速度也快得多。,ASP.NET是ASP的下一代版本，但并不仅仅是ASP的简单升级，在许多方面，ASP.NET与ASP有着本质的不同。ASP.NET是Microsoft开展的新型体系结构.NET的一局部，它的全新技术架构会让每个人的网络生活都变得更简单。,8/28/2024,27,3.PHP,PHP技术与ASP相似，也是一种可以嵌入HTML的交互式网页技术，运行速度比CGI快得多。与ASP相比，PHP可以跨多个平台，能够在Windows、UNIX、Linux等不同平台的Web效劳器上运行，支持Apache和IIS等多种Web效劳器。PHP通常运行的Web效劳器平台是基于UNIX/Linux操作系统下的Apache平台。,8/28/2024,28,4.2 信息流程设计,4.2.1 信息流程总体设计,4.2.2 花店网站功能模块设计,4.2.3 花店网站信息流程设计,8/28/2024,29,4.2.1 信息流程总体设计,网站信息设计流程,信息流程设计要注意的问题,8/28/2024,30,1. 网站信息设计流程,确定网站的目标和定位,收集与该网站有关的资料,网站功能模块设计,网站草案设计,网页制作,网站测试,网站发布,8/28/2024,31,2. 信息流程设计要注意的问题,主题突出,速度优先,信息要便于用户浏览,设立交流平台,8/28/2024,32,4.2.2 花店网站功能模块设计,网上花店主要实现的是一个完整的电子商务流程，用户可以注册个人信息，修改个人信息，在用户登录后，可以选购商品，将选购的商品放入购物车后，生成定单，以货到付款的形式完成支付。花店的后台能够实现商品管理，如添加商品、删除商品、修改商品的信息等，并对客户定单进行查询和管理。另外，用户的反响意见可以发布在留言板上，以便和花店进行沟通。,8/28/2024,33,网上花店的主要功能模块包括：,客户管理功能,商品管理功能,下定单及定单管理功能,留言板管理功能,8/28/2024,34,4.2.3 花店网站信息流程设计,网上花店作为一个电子商务网站，属于B to C的电子商务模式。,从网站的功能模块设计中可以看到，该网站可以实现四个方面的完整功能。这些功能按照信息流程设计，又可分为花店网站的前台购物流程和后台管理流程。,8/28/2024,35,花店网站的前台购物流程 :,选择付款方式,会员注册,会员登录,商品查询,选购商品（可以选购多种商品）,下订单（放入购物车）,收银台（结账）,购物完成,定单查询,确定送货方式和收货人地址,8/28/2024,36,花店网站的后台管理流程 ：,管理员登录,商品类别管理,商品管理,定单查询,针对各模块不同的表实现添加记录、修改记录、删除记录、查询显示记录等功能,各,8/28/2024,37,4.3 首页设计,4.3.1 首页的版面设计,4.3.2 首页设计要注意的问题,8/28/2024,38,4.3.1 首页的版面设计,“国字型,“T字型,封面型,8/28/2024,39,1.“国字型,8/28/2024,40,2.“T字型,8/28/2024,41,3.封面型,8/28/2024,42,4.3.2 首页设计要注意的问题,首页明确，主题突出,导航栏设计形式服从功能,设立最近更新或网站指南栏目,快速下载,8/28/2024,43,4.4 其他页面的设计,4.4.1 客户管理,4.4.2 商品管理,4.4.3 定单管理,4.4.4 留言板管理,8/28/2024,44,4.4.1 客户管理,在花店网站的客户管理模块中，包括会员注册、会员登录、会员信息修改等功能，通过客户信息的收集，可以进行客户资料分析，了解客户的购物倾向，所售商品适合的消费群体，以及在此根底上进一步进行市场预测，从而把握市场走向。,8/28/2024,45,会员注册界面,8/28/2024,46,会员登录界面,8/28/2024,47,会员信息修改界面,8/28/2024,48,4.4.2 商品管理,商品管理是电子商务网站最重要的一个环节，商品页面一般采用信息分层、逐层细化的方法展示公司的产品。,在花店网站的商品管理模块中，包括商品显示、管理员登录、商品类别管理、商品管理、商品查询等功能。,8/28/2024,49,商品显示界面,8/28/2024,50,管理员登录界面,8/28/2024,51,商品类别管理界面,8/28/2024,52,商品管理界面,8/28/2024,53,商品查询界面,8/28/2024,54,4.4.3 定单管理,定单管理也是电子商务网站一个非常重要的环节，用户在网站上选购好商品，放入购物车，并到收银台结账后，会形成定单。一方面发货方会根据用户定单及时发货，同时网站的后台管理员也可以再次确认定单，核实是否正确。另一方面，用户订货后如果忘记所定货物，也可以在网站上通过定单查询，确认定单上的商品。,8/28/2024,55,用户登录后选购商品,在花店网站首页上先进行会员登录，如：用户名为“a，密码为“a，如果未注册的用户购物前需要先进行会员注册，进入购物界面，选购一件商品。,8/28/2024,56,购物车界面,8/28/2024,57,收银台页面,8/28/2024,58,收银结账界面,8/28/2024,59,形成定单,8/28/2024,60,定单查询,8/28/2024,61,4.4.4 留言板管理,留言板主要为电子商务网站的用户提供了一个交互的平台 ，在花店网站的留言板管理模块中，包括发新贴子、查看贴子列表、回复留言等功能。,8/28/2024,62,发新贴子界面,8/28/2024,63,查看贴子列表界面,8/28/2024,64,回复留言界面,8/28/2024,65,4.5 页面的更新,一个网站要有影响力，最重要的就是要有新的内容。网页的内容应该是动态的，根据实际情况随时进行修改和更新，以紧紧抓住浏览者。,8/28/2024,66,网站更新应注意以下几点：,网站内容或效劳时常更新,搜集用户的反响意见,注意网站的升级,时常检查相关链接,8/28/2024,67,4.6 花店网站首页的制作,4.6.1 静态网页的制作,4.6.2 交互式网页的制作,8/28/2024,68,4.6.1 静态网页的制作,徽标的设计,页头的制作,样式的应用,8/28/2024,69,1.徽标的设计,一个好的网站也需要整体的形象包装和设计，有创意的CI 设计，对网站的宣传推广有事半功倍的效果。,在花店网站首页页面的左上角是网站的徽标，如以下图所示：,8/28/2024,70,2.页头的制作,为了保持页面风格的一致，也便于用户方便地使用导航栏，页头需要在网站的每一页中都出现，如以下图所示：,8/28/2024,71,如果在网站首页中要显示页头，需要在首页中调用top.inc文件。方法是在Dreamweaver中翻开网站首页文件index.aspx，在的程序体内，嵌入以下语句：,8/28/2024,72,3.样式的应用,花店网站的首页中还应用了在提到的CSS样式表，在网页文件夹下的style文件夹里有一个style.css文件，就是样式表文件，局部代码如下：,.topinc ,font-size: 12px;,color: #FFFFFF;,8/28/2024,73,4.6.2 交互式网页的制作,交互式网页中网页数据内容的动态交互一般是和数据库系统联系在一起，通过特定的编程语言和外部应用程序来访问企业信息系统中已经存在于数据库中的信息。,8/28/2024,74,交互式网页的制作主要包括两大步骤,：,数据库设计阶段,程序设计阶段,8/28/2024,75,4.7 习题,实验名称,在第2章选定网站主题，规划网站的基础上，对网站进行全面的系统分析和系统设计，并进行初步的页面规划和设计。,实验日期,年 月 日,实验目的,通过练习真实地分析一个网站，掌握网站系统设计的主要技术方法,实验内容,1.功能需求分析报告。,2.数据需求分析报告。,3.系统模块设计。,4. 网站信息流程设计。,5. 确定网站的整体风格、色彩、CI形象及徽标。,6.首页版面设计。,7.其他页面设计。,参考资料,相关书籍与网站名称,8/28/2024,76,谢谢大家！,8/28/2024,77,在线教务辅导网：,更多课程配套课件资源请访问在线教务辅导网,8/28/2024,78,8/28/2024,79,8/28/2024,80,8/28/2024,81,8/28/2024,82,8/28/2024,83,馋死,8/28/2024,84,8/28/2024,85,8/28/2024,86,8/28/2024,87,8/28/2024,88,8/28/2024,89,8/28/2024,90,8/28/2024,91,8/28/2024,92,8/28/2024,93,8/28/2024,94,8/28/2024,95,8/28/2024,96,PPT研究院,POWERPOINT ACADEMY,8/28/2024,97,8/28/2024,98,8/28/2024,99,
展开阅读全文