中职电子商务网页制作课件PPT

1、以德立身 以技立足放飞理想 激扬青春 展现自我专业老师：罗忠成DW电子商务网页制作初识电子商务网页专业老师：罗忠成课前准备与纪律上课时间，手机请设置为静音状态！挺住啊，骚年！以德立身 以技立足放飞理想 激扬青春 展现自我以德立身 以技立足放飞理想 激扬青春 展现自我项目目标1、能描述网页和网站的概念；2、能说出域名、IP地址及URL、HTML的含义；3、能解释静态网页与动态网页的概念及其区别；4、会描述电子商务网站的特点与构成；5、能讲述网页制作发展史，列举开发技术及工具。重点内容以德立身 以技立足放飞理想 激扬青春 展现自我看一看走马观花看电子商务网页http:/ 这是一个知名的互联网时尚品

2、牌服装销售网站，倡导“快时尚”，瞄准的是年轻一代消费群体。 在色彩运用上采用了明快的色调，符合年轻消费者的审美趋向。在结构设计上使用矩形块划分信息区域，让浏览者很容易就能明确网页界面的结构。以德立身 以技立足放飞理想 激扬青春 展现自我看一看走马观花看电子商务网页作为一个品牌购物网站具有大量的物品信息，在导航栏中对于物品导航进行了两种类型的分类方式：一是按照衣服的类别进行分类。在网页顶部红色条状导航栏中不仅显示了当季热销的商品，还可以查看优惠信息、推荐商品和各类活动；二是按照用户来分类。页面左边罗列了男装，女装，童装，内衣，配饰等类别，使浏览者能很快找到想要的商品。为了方便浏览者购买商品，在网

3、页的底部还提供了详细帮助的栏目，这一栏目通常称为“网站地图”以德立身 以技立足放飞理想 激扬青春 展现自我看一看走马观花看电子商务网页这是商品详情页面。这个页面看上去干净清爽，产品性能参数、客户评价一目了然，购买与收藏功能齐备。以德立身 以技立足放飞理想 激扬青春 展现自我看一看走马观花看电子商务网页这是注册页面页面。这一页中主要的网页元素是表单，表单是电子商务网站必不可少的组成部分，是实现网站和浏览者交互的重要途径之一，一般用来收集联系信息、接受用户要求、获得反馈意见、用户注册及用户登录。以德立身 以技立足放飞理想 激扬青春 展现自我看一看走马观花看电子商务网页一般来说，电子商务网站都具备有

4、站内搜索功能，对于性急或者有明确购买目标的浏览者，使用搜索栏可以更为便捷地搜索到想要的结果。以德立身 以技立足放飞理想 激扬青春 展现自我看一看走马观花看电子商务网页电子商务网站的用户登录网站的目的，是要从这些网站上获得利益或资讯。因此界面简洁，易用性好是商务网站最主要的特点。作为营销的手段之一，电子商务网站的视觉形象十分重要，既要美观又要准确传达企业信息。应当注意的是，当你进行本次体验时，即使仍然使用凡客的网站，所见到的内容与教材相对照一定发生了变化。因为电子商务网站必须在第一时间给浏览者提供企业资讯，需要较高的更新频率，才能保持旺盛的生命力。活动小结一起回顾总结以德立身 以技立足放飞理想

5、激扬青春 展现自我看一看2020年开学第一课活动小结做一个有担当、责任心、爱国主义情怀作业：1、写观后感400字以上？以德立身 以技立足放飞理想 激扬青春 展现自我1.1理解网页与网站1什么是网页网页（Web）：是用html语言编写的，通过www网传输，并被web浏览器翻译成可以显示出来的集合文本、图片、声音和动画等信息元素的页面文件。2网页的类型根据页面内容可以分首页、主页、专栏网页、内容网页和功能网页等类型；按制作技术分为静态网页与动态网页。以德立身 以技立足放飞理想 激扬青春 展现自我1.1理解网页与网站1.1.2 网站网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的

6、集合。信息可以是网页形式也可以是其他的文档形式。网页与网站的区别与联系：网站是一个文件夹，其中的文件不仅是网页还有网站所需的其他文件或文件夹。网页是一个页面文件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超链接形成的集合。以德立身 以技立足放飞理想 激扬青春 展现自我1.1理解网页与网站1.1.2 网站网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的集合。信息可以是网页形式也可以是其他的文档形式。网页与网站的区别与联系：网站是一个文件夹，其中的文件不仅是网页还有网站所需的其他文件或文件夹。网页是一个页面文件，用来发布各种信息。

7、网页是网站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超链接形成的集合。以德立身 以技立足放飞理想 激扬青春 展现自我1.2认识HTMLHTML（Hyper Text Markup Language）又称超文本标识语言，是一种标识性的语言，是网页设计的最初语言。文件的扩展名:“html”或“htm”。 举例说明： 简单的HTML文档 .长春欢迎您！这里是长春悠游网，我们带您畅游长春！ 由“”组成的就是标记。在HTML语言中标记分“单标记”和“围堵标记”。以德立身 以技立足放飞理想 激扬青春 展现自我1.3区分静态网页与动态网页简单的区别是:动态网页是客户端与服务器端是交互的。

8、即相互传递信息。静态网页是只能在客户端浏览，但易被搜索引擎搜索到。 静态网页打开的速度比动态网页快。以德立身 以技立足放飞理想 激扬青春 展现自我作业1、什么是网页？2、网页的类型？以德立身 以技立足放飞理想 激扬青春 展现自我了解电子商务网站的网页构成信息社会中，企业和个人可以利用网络和各种电子工具，高效率、低成本地从事各种以电子方式实现的商业贸易活动。从电子商务应用的角度来看，电子商务可分为三个层次：展示、交易和服务，这三个层次的应用都离不开电子商务网站。电子商务网站由前台和后台组成，前台面向消费者、供货商、分销商提供商品或服务，如信息发布、商务交易、双向交流等；后台全面控制和支配前台页面

9、中的内容，包括信息管理系统、网站管理系统和业务管理系统，网站内容的变更大多数情况下依赖于网站后台的管理。以德立身 以技立足放飞理想 激扬青春 展现自我2、1电子商务网站类型有几种。1主页主页是进入网站的第一个网页，它和其他网页组成一个网站。主页是展示公司的企业形象、发布广告、信息的主要界面。主页包括以下内容：企业名称与标志、导航、广告与推介、重要新闻、客户与公司联系的方式等。主页的制作要引人入胜，能高度概括和体现企业的形象，不要有过多冗余的信息以德立身 以技立足放飞理想 激扬青春 展现自我2、1电子商务网站类型有几种。2产品和服务网页产品和服务网页采用信息分层、逐层细化的方法展示公司的产品或服

10、务。产品网页包括产品/价格清单网页、单个产品网页等。以德立身 以技立足放飞理想 激扬青春 展现自我2、1电子商务网站类型有几种。3网站新闻页电子商务网站应该有一类专门用于发布新闻的网页，如图1-9所示。它既是展示公司的新产品、新服务和新的开发项目的窗口，又可以作为保存公司业务发展情况的档案。以德立身 以技立足放飞理想 激扬青春 展现自我2、1电子商务网站类型有几种。4产品百科页电子商务网站除了提供企业的产品和服务信息，还应该成为客户了解相关信息的综合平台。因此，寻找大量与企业相关的特定主题的网络论坛或其它网络资源，并将其链接到产品百科网页，是一种使网站迅速成为该领域权威的有效途径。以德立身 以

11、技立足放飞理想 激扬青春 展现自我2、1电子商务网站类型有几种。5服务与技术支持页电子商务网站保持与客户的联系是非常重要的。除了作交易以外，还应该为客户提供帮助和技术支持。许多网站的来访者并不是要购买商品，而是来查询信息或寻求帮助，网站应尽可能地满足他们的需求，这种长期的服务性投资必定能获得回S报。以德立身 以技立足放飞理想 激扬青春 展现自我2、1电子商务网站类型有几种。6市场调研网页网页是一种有力的市场调研工具，利用它可以快速有效地获取客户信息、对产品和服务的评价、意见和建议等等，为营销决策提供量化基础。7企业信息网页企业的运营状况，如公司数据库、财务报表、与投资者的关系、销售情况等对客户

12、来说，都是非常关心的内容。如图1-12所示，企业信息网页为客户提供了这方面的信息，提高了企业资信的透明度，从而影响客户的购买决策。以德立身 以技立足放飞理想 激扬青春 展现自我2、1电子商务网站类型有几种。8广告将互联网作为广告的载体有着其他媒体无可比拟的优越性，对于一个电子商务网站来说，广告更是不可或缺的内容。除了宣传本企业的产品和服务以外，还能以一定的广告收入支持网站建设。以德立身 以技立足放飞理想 激扬青春 展现自我作业：1、电子商务可分为那几个层次？2、电子商务前台（前端）指什么？3、电子商务后台（后端）指什么？4、电子商务网站包含几种类型网页以德立身 以技立足放飞理想 激扬青春 展现

13、自我电子商务网站的特点电子商务网站的特点电子商务网站是企业开展电子商务的一个平台，它始终以商务活动为中心，除了展示和介绍企业的产品与服务外，还是用于开展企业电子营销的信息化平台，因此电子商务网站与普通网站相比，更强调其功能与服务。（1）商务性。电子商务网站具有普通网站所不具备的辅助交易（或叫撮合交易）的功能，如快速的新闻更换来吸引消费者、可智能统计分析的计数器、强大的市场或消费习惯的调查功能等等。（2）集成性。电子商务网站能规范事务处理的工作流程，将人工操作和电子信息处理集成为一个不可分割的整体，提高了人员、设备的利用效率和系统运行的可靠性。（3）可扩展性。随着电子商务网站规模的扩大，为了保证

14、网站的正常工作，必须考虑到访问量的变化，使网站具有一定的扩展性，以防止系统阻塞。（4）安全性。客户在网上购物时会首先考虑安全性。网络交易中的欺骗、窃听等行为、信息系统中的病毒和黑客的非法入侵都是电子商务的大敌。以德立身 以技立足放飞理想 激扬青春 展现自我认识电子商务网页制作工具网页编辑工具电子商务网站的特点FrontPage（FP)是个网页设计的软件，也只是个最基本的软件以德立身 以技立足放飞理想 激扬青春 展现自我认识电子商务网页制作工具网页编辑工具电子商务网站的特点Dreamweaver（DW)是个网页设计的软件,重点学习这个软件以德立身 以技立足放飞理想 激扬青春 展现自我认识电子商务

15、网页制作工具网页编辑工具电子商务网站的特点网页设计与制作三剑客是指：DW 软件、Flash动画软件、Firworks软件Photoshop以德立身 以技立足放飞理想 激扬青春 展现自我认识电子商务网页制作工具网页编辑工具电子商务网站的特点Fireworks以德立身 以技立足放飞理想 激扬青春 展现自我认识电子商务网页制作工具网页编辑工具电子商务网站的特点Flash以德立身 以技立足放飞理想 激扬青春 展现自我了解网站开发技术1. DHTMLDHTML又称动态HTML（Dynamic HTML），它可以创造出许多特殊的效果，这效果不需要重新加载网页或载入一个新的网页，也不需要向远处的服务器索取新

16、的材料，所有的功能都是在浏览者的计算机上实现并完成的，因此浏览者也不需要花时间等待服务器返回结果。动态DHTML通常用JavaScript或VBScript来实现其动态和交互性。以德立身 以技立足放飞理想 激扬青春 展现自我了解网站开发技术2. ASPASP（Active Server Pages）又称动态网页，是微软公司推出的一种取代CGI（通用网关接口）的技术，它可以与数据库和其它程序进行交互。在ASP中，使用VBScript 、JavaScript等简单易懂的脚本语言，结合HTML代码，即可快速地完成网站的应用程序。ASP网页文件的扩展名是.asp，当浏览器浏览ASP网页时，Web服务器

17、就会根据请求生成相应的HTML代码，然后再返回给浏览器，这样浏览器端看到的，就是动态生成的网页。以德立身 以技立足放飞理想 激扬青春 展现自我了解网站开发技术3. ASP.NETASP.NET是ASP的最新版本，是一种建立在公共语言运行库上的编程框架，可用于在服务器上生成功能强大的 Web 应用程序，为Web站点创建动态的、交互的HTML网页。以德立身 以技立足放飞理想 激扬青春 展现自我了解网站开发技术4. JSPJSP（JavaServer Pages）是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。 在传统的网页HTML文件中加入Java程序片段

18、和JSP标记，就构成了JSP网页，其扩展名是.jsp。以德立身 以技立足放飞理想 激扬青春 展现自我了解网站开发技术5. XMLXML（Extensible Markup Language）称为可扩展性标记语言，与HTML只能在浏览器中显示内容不同的是，XML是一种显示数据的标记语言，它能使数据通过网络无障碍地进行传输，并显示在用户的浏览器上。XML并非像HTML那样，提供了一组事先已经定义好了的标签，而是提供了一个标准，利用这个标准，可以根据设计者的实际需要，定义自己的新的标记语言，并为这个标记语言规定一套特有标签。因此，XML是一种定义语言的语言，即是一种元标记语言，简单地说，HTML用于

19、显示内容，XML用来描述结构化数据。XML的有利于数据交换和传递的特性，将为电子商务，尤其是B2B带来革命性的冲击。以德立身 以技立足放飞理想 激扬青春 展现自我了解网页制作团队根据网站开发项目的规模，网站开发团队可以有几到几十人，大小不等。在团队划分中应该含有6个角色：项目经理策划前台设计员后台程序员代码整合员测试员以德立身 以技立足放飞理想 激扬青春 展现自我了解网页制作团队（1）项目经理，负责项目总体设计，开发进度的定制和监控，定制相应的开发规范，负责各个环节 的评审工作，协调各个成员之间的工作。（2）策划，提供详细的策划方案和需求分析。还包括后期网站推广方面的策划。（3）前台设计员，根

20、据策划和需求负责包括网页设计、浏览器端程序和网页美工设计。（4）后台程序员，包括编程与调试，数据库，根据项目总体设计来设计数据库和功能模块的实现。（5）代码整合员，负责将程序员的代码和界面融合到一起，代码整合员可以制作网站的相关页面。（6）测试员，负责测试程序。以德立身 以技立足放飞理想 激扬青春 展现自我在本项目中，我们一起学习了电子商务网页的基础知识，通过体验活动了解了常见的网页元素，了解了电子商务网站的基本概念、网页构成，以及网页制作的工具、开发技术、发展历史和网站开发团队。电子商务网站由于其功用与普通网站有着很多的不同，在制作电子商务网页时，要注意到此类网页的特殊性。活动小结初识电子商

21、务网页以德立身 以技立足放飞理想 激扬青春 展现自我活动小结推荐资源著名的电子商务网站：国内：阿里巴巴全球电子商务网站 （）淘宝网（）当当网（）长虹集团（）慧聪网（）携程旅行网 （）国外：亚马逊（http:/www.A）美国Netflix公司（）Ecplaza贸易平台（/）印度商务网（/）以德立身 以技立足放飞理想 激扬青春 展现自我作业：1、网页编辑工具有些？2、网页图像制作工具有些？3、网站开发技术用那些软件？4、网页制作团队包含那6个角色？DW电子商务网页制作Dreamweaver CS5入门一、认识Dreamweaver CS5。二、安装和启动Dreamweaver CS5。三、了解D

22、reamweaver CS5的工作界面。四、会对Dreamweaver CS5的工作区进行设置。学习目标以德立身 以技立足放飞理想 激扬青春 展现自我试一试结识Adobe家族新成员DW CS5是一款所见即所得的网页制作软件，它功能强大，简单易学，即使你是初次学习，也能够很快地使用它制作出简单的网页来。以德立身 以技立足放飞理想 激扬青春 展现自我试一试结识Adobe家族新成员第一步：双击桌面上的DW图标，运行Dreamweaver CS5软件。第二步：观察Dreamweaver CS5的界面组成。包括菜单栏、起始页、面板组和属性面板等。以德立身 以技立足放飞理想 激扬青春 展现自我试一试结识A

23、dobe家族新成员第三步：单击起始页中“新建”栏中的“HTML”选项，新建一个HTML空白文档，在工作区设计视图窗口中输入一段文字。以德立身 以技立足放飞理想 激扬青春 展现自我试一试结识Adobe家族新成员第四步：打开“文件”菜单选择“保存”命令，在弹出的“另存为”对话框中选择保存的位置，单击“保存”按钮将文档保存。快捷键：保存Ctrl+S, 另存为Ctrl+shift+S,以德立身 以技立足放飞理想 激扬青春 展现自我试一试结识Adobe家族新成员第五步：按F12 键，可以在浏览器中预览网页效果。以德立身 以技立足放飞理想 激扬青春 展现自我试一试结识Adobe家族新成员学习一个新的软件首

24、先要对其有一个大致的总体印象，了解它的界面组成和最基本的操作，通过自己动手慢慢去摸索和熟悉，然后才能进一步去深入学习软件的各种功能和操作。Adobe Dreamweaver CS5是Adobe家族的成员，是一款制作网页的专业软件，它功能强大，易于学习，初学者能够很快上手使用它制作出简单的网页来。活动小结以德立身 以技立足放飞理想 激扬青春 展现自我初识Dreamweaver CS5Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，Dreamweaver CS5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平

25、台限制和跨越浏览器限制的充满动感的网页。Dreamweaver原本是由著名的软件公司Macromedia开发的，Macromedia的著名产品还有矢量动画制作软件Flash、网页图像处理软件Fireworks等。2006年全球最大的图像编辑软件供应商Adobe以换股方式收购了Macromedia公司，自此开始，Dreamweaver开始属于ADOBE设计软件系列。2007年Adobe发布了Dreamweaver CS3，2008年发布Dreamweaver CS4，到了2010年，Adobe推出了全新的Dreamweaver CS5。以德立身 以技立足放飞理想 激扬青春 展现自我Dreamwe

26、aver CS5的安装步骤1：将Dreamweaver CS5的安装光盘放在光驱中，此时会自动进行Dreamweaver CS5的安装程序的始化，并对系统进行检查。以德立身 以技立足放飞理想 激扬青春 展现自我Dreamweaver CS5的安装步骤2：如果系统满足安装所需要的条件，就会打开“Adobe Dreamweaver CS5”安装界面，首先是显示的“Adobe软件许可协议”页面。以德立身 以技立足放飞理想 激扬青春 展现自我Dreamweaver CS5的安装步骤3：阅读软件许可协议，单击【接受】按钮，进入序列号页面。以德立身 以技立足放飞理想 激扬青春 展现自我Dreamweave

27、r CS5的安装步骤4：输入产品序列号，或选择“安装此产品的试用版”，单击“下一步”按钮，进入“安装选项”页面。以德立身 以技立足放飞理想 激扬青春 展现自我Dreamweaver CS5的安装步骤5：选择需要安装程序的磁盘并指定安装路径，单击“安装”按钮，进入“安装进度”页面。以德立身 以技立足放飞理想 激扬青春 展现自我Dreamweaver CS5的安装步骤6：安装过程会持续几分钟的时间，然后弹出如图2-10所示的页面，单击【完成】按钮，完成Dreamweaver CS5的安装工作。以德立身 以技立足放飞理想 激扬青春 展现自我Dreamweaver CS5的启动Dreamweaver

28、CS5安装完毕后，会自动在“开始”按钮的“程序”菜单中添加启动项，同时也会在桌面上创建Dreamweaver CS5快捷方式图标。单击“程序”菜单中相应的启动项或双击桌面快捷方式，都可以启动Dreamweaver CS5。Dreamweaver以德立身 以技立足放飞理想 激扬青春 展现自我Dreamweaver CS5的启动单击“确定”后，将进入Dreamweaver CS5的起始页。可以勾选下面的“不再显示”来隐藏它。在起始页中可以打开最近使用过的文档或创建新文档，还可以从起始页通过“快速入门”或“资源”来了解Dreamweaver CS5的更多信息。以德立身 以技立足放飞理想 激扬青春 展

29、现自我Dreamweaver CS5的退出用以下五种方法都可以退出Dreamweaver CS5：（1）打开“文件”菜单，选择“退出”命令。（2）单击Dreamweaver CS5窗口右上角的“关闭”按钮 。（3）双击Dreamweaver CS5窗口左上角的控制按钮。（4）按快捷键+Q。（5）按组合键+F4。在退出Dreamweaver CS5时，窗口中如还有正在编辑的网页，系统会提示你是否保存本次对文件的编辑，你可以根据需要选择“是”、“否”或“取消”。如选择“是”，系统将保存本次编辑并退出Dreamweaver CS5；如选择“否”，系统将不保存本次编辑，文件回到编辑前的状态，并退出Dr

30、eamweaver CS5；如选择“取消”，系统将不退出Dreamweaver CS5，继续保持编辑状态。请注意：以德立身 以技立足放飞理想 激扬青春 展现自我Dreamweaver CS5的窗口组成DW的窗口界面如图2-13所示。包括：标题栏、菜单栏、插入栏、文档工具栏、文档窗口、状态栏、属性面板和面板组。以德立身 以技立足放飞理想 激扬青春 展现自我Dreamweaver CS5的窗口组成1菜单栏菜单栏提供了Dreamweaver CS5的所有功能，一共包含十个菜单。2文档工具栏文档工具栏中显示的是已经打开的各个文档的图标，单位击各图标可以在不同文档间进行切换。3文档窗口文档窗口是网页文档

31、的编辑区，它用于显示当前正在编辑的网页文档。设计者可以在文档区域中进行各种编辑操作。4标签选择器标签选择器用于快速选择网页中的各种标签，在网页布局时非常有用。以德立身 以技立足放飞理想 激扬青春 展现自我Dreamweaver CS5的窗口组成5属性检查器网页设计中的每个对象都有自己的属性，比如文字有字体、字号、对齐方式等属性，图像有大小、链接、替换文字等属性。属性检查器的设置项目会根据对象的不同而变化。6状态栏状态栏中显示与正在编辑的文档有关的其他信息。以德立身 以技立足放飞理想 激扬青春 展现自我Dreamweaver CS5的窗口组成7面板组为了方便设计者的编辑工作，Dreamweave

32、r CS5组合了各种具备各种功能的面板供设计者选择使用，每个面板组都可以展开或折叠，可以和其他面板组停靠在一起或取消停靠，所以也称为浮动面板。（1）查看面板组打开“窗口”菜单，选择“显示面板”或“隐藏面板”，可以显示或隐藏面板组。也可以单击面板组名称，或者直接按快捷键F4快速隐藏和显示面板组。（2）关闭面板组要关闭某个面板，可以单击该面板标题栏右侧的按钮，在弹出的菜单中选择“关闭标签组”。如果要再打开被关闭的面板组，可以选择“窗口”菜单，然后选择要打开的面板名称即可。以德立身 以技立足放飞理想 激扬青春 展现自我Dreamweaver CS5的窗口组成8“文件”面板“文件”面板是很常用的面板，

33、利用它可以管理站点的文件和文件夹。通过“文件”面板还可以访问本地磁盘上的全部文件。以德立身 以技立足放飞理想 激扬青春 展现自我了解Dreamweaver CS5的视图管理在Dreamweaver CS5的文档窗口中可以使用三种视图方式查看当前文档。1“设计”视图模式这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在“设计”视图中，设计者可以“所见即所得”地设计网页。以德立身 以技立足放飞理想 激扬青春 展现自我了解Dreamweaver CS5的视图管理“代码”视图模式这是一个用于编写和编辑html、Javascript、服务器语言代码以及任何其他类型代码的手工编码环境。以德立身 以技立足放飞理想 激扬青春 展现自我了解Dreamweaver CS5的视图管理3“拆分”视图模式这种视图模式在单个窗口中同时显示同一文档的“代码”视图和“设计”视图。以德立身 以技立足放飞理想 激扬青春 展现自我自定义Dreamweaver