《电子商务网页设计》500页教学课件全书电子教案.ppt

电子商务网页设计课件电子商务网页设计课件第1章电子商务网页设计概述本章学习目标：本章学习目标：知识目标：知识目标：了解电子商务的概念；掌握互联网的基础知识；理解网页的本质；了解电子商务的概念；掌握互联网的基础知识；理解网页的本质；了解网页的色彩的基本知识；了解网页制作的基本工具；了解网页设了解网页的色彩的基本知识；了解网页制作的基本工具；了解网页设计师的执业技能。计师的执业技能。技能目标：技能目标：掌握记事本编写网页的方法；掌握掌握记事本编写网页的方法；掌握IEIE操作的基本能力。操作的基本能力。能力目标：能力目标：理解建设电子商务网站的必要性。理解建设电子商务网站的必要性。本章主要内容：本章主要内容：1.31.3网页设计基础网页设计基础网页设计基础网页设计基础1.11.1电子商务基础电子商务基础电子商务基础电子商务基础1.21.2网络基础网络基础网络基础网络基础1.41.4电子商务网页设计的知识体系电子商务网页设计的知识体系电子商务网页设计的知识体系电子商务网页设计的知识体系1.31.3网页设计基础网页设计基础网页设计基础网页设计基础1.1.什么是电子商务什么是电子商务什么是电子商务什么是电子商务2.2.电子商务的定义电子商务的定义电子商务的定义电子商务的定义3.3.电子商务的概念模型电子商务的概念模型电子商务的概念模型电子商务的概念模型4.4.电子商务的应用类型电子商务的应用类型电子商务的应用类型电子商务的应用类型5.5.企业网站在电子商务中的企业网站在电子商务中的企业网站在电子商务中的企业网站在电子商务中的地位与作用地位与作用地位与作用地位与作用电子商务网页设计电子商务网页设计电子商务网页设计电子商务网页设计1.1电子商务基础电子商务基础任务任务1：理解电子商务概念：理解电子商务概念1.电子商务的概念电子商务的概念按照按照IBM的观点，电子商务的观点，电子商务=WEB+企业业务企业业务。也就是说，电子商务包。也就是说，电子商务包含两个方面内容，一是电子方式，二是商贸活动。含两个方面内容，一是电子方式，二是商贸活动。就电子方式而言，电子商务的方式是指利用当代最先进的信息技术，如电就电子方式而言，电子商务的方式是指利用当代最先进的信息技术，如电子计算机技术、网络技术、通讯技术、多媒体技术、子计算机技术、网络技术、通讯技术、多媒体技术、Internet技术等，从事的技术等，从事的商业活动。它强调现代信息技术在网络计算环境下的商业化应用。商业活动。它强调现代信息技术在网络计算环境下的商业化应用。从商贸活动的角度分析，商务是核心，电子是手段。我们研究、学习电从商贸活动的角度分析，商务是核心，电子是手段。我们研究、学习电子商务的目的是为了更好的利用先进的电子商务技术手段，降低企业的经营子商务的目的是为了更好的利用先进的电子商务技术手段，降低企业的经营成本、提高工作效率、实现企业盈利的根本目的。在此基础上提高整个社会成本、提高工作效率、实现企业盈利的根本目的。在此基础上提高整个社会的运行效率、改善我们的生活质量。的运行效率、改善我们的生活质量。2.电子商务的定义电子商务的定义电子商务首先是商业经营中的一种全新经营理念，是在通过电子手段建立一种新的经济电子商务首先是商业经营中的一种全新经营理念，是在通过电子手段建立一种新的经济秩序，是信息技术对传统商务活动的一种变革；秩序，是信息技术对传统商务活动的一种变革；同时电子商务是新的商业模式，是各种具有商业活动能力的实体（如生产企业、商贸企同时电子商务是新的商业模式，是各种具有商业活动能力的实体（如生产企业、商贸企业、金融机构、政府机构、个人消费者等）利用网络和先进的数字化传媒技术进行的各业、金融机构、政府机构、个人消费者等）利用网络和先进的数字化传媒技术进行的各项商业贸易活动；项商业贸易活动；电子商务强调对网络化和数字化技术的综合利用。电子商务是信息技术发展的产物，计电子商务强调对网络化和数字化技术的综合利用。电子商务是信息技术发展的产物，计算机技术、网络技术、通讯技术、多媒体技术等信息技术和计算机设备、电子设备是电算机技术、网络技术、通讯技术、多媒体技术等信息技术和计算机设备、电子设备是电子商务的基础。子商务的基础。3.电子商务的概念模型电子商务的概念模型电子商务的概念模型可以抽象地描述每个交易主体和电子市场之间的交易事务关系。如电子商务的概念模型可以抽象地描述每个交易主体和电子市场之间的交易事务关系。如图图1-1所示：所示：图1-1电子商务的概念模型其中：其中：交易主体：是指从事电子商务活动的客观对象是电子商务活动的实际参与主体，包括买交易主体：是指从事电子商务活动的客观对象是电子商务活动的实际参与主体，包括买卖双方和交易活动必须的第三方中介机构，如企业、银行、政府机构、认证机构和个人卖双方和交易活动必须的第三方中介机构，如企业、银行、政府机构、认证机构和个人等。等。电子市场：是交易主体从事商品和服务交换的场所，它是由各种商务活动的参与者，利电子市场：是交易主体从事商品和服务交换的场所，它是由各种商务活动的参与者，利用通信网络连接成的虚拟的统一经济整体。用通信网络连接成的虚拟的统一经济整体。交易事务：是指电子商务参与各方所从事的具体的商务活动的内容，例如，询价、报价、交易事务：是指电子商务参与各方所从事的具体的商务活动的内容，例如，询价、报价、转账支付、广告宣传、商品运输等。转账支付、广告宣传、商品运输等。信息流：在电子商务活动中最基本也最普遍的是信息流，既包括商品信息、营销信息、信息流：在电子商务活动中最基本也最普遍的是信息流，既包括商品信息、营销信息、技术支持、售后服务等内容，也包括诸如询价单、报价单、付款通知单、转账通知单等技术支持、售后服务等内容，也包括诸如询价单、报价单、付款通知单、转账通知单等商业贸易单证，还包括交易方的支付能力、支付信誉、中介信誉等。商业贸易单证，还包括交易方的支付能力、支付信誉、中介信誉等。资金流：是指资金的转移过程。如付款、转账、兑换等。资金流：是指资金的转移过程。如付款、转账、兑换等。物流：主要是指商品和服务的存储、保管、加工、配送、和运输、装卸。在电子商务交物流：主要是指商品和服务的存储、保管、加工、配送、和运输、装卸。在电子商务交易中，通过网络实现物流的能力十分有限，只能直接传输如软件、有价信息等信息类商易中，通过网络实现物流的能力十分有限，只能直接传输如软件、有价信息等信息类商品和服务。对于大多数实体商品和服务来说，物流仍然要经由传统的配送渠道和方式。品和服务。对于大多数实体商品和服务来说，物流仍然要经由传统的配送渠道和方式。商流：是指商品在购、销之间进行交易和商品所有权转移的过程。商流：是指商品在购、销之间进行交易和商品所有权转移的过程。4.电子商务的应用类型电子商务的应用类型（1）企业内部电子商务）企业内部电子商务（2）本地电子商务）本地电子商务（3）国内远程电子商务）国内远程电子商务（4）全球电子商务）全球电子商务1.1.2电子商务对企业经营活动的影响电子商务对企业经营活动的影响1.电子商务的优势电子商务的优势（1）商务流程信息化。）商务流程信息化。（2）虚拟化。）虚拟化。（3）全球化。）全球化。（4）低成本。）低成本。（5）互动性。）互动性。2.电子商务的影响电子商务的影响（1）电子商务将改变企业的经营模式电子商务将改变企业的经营模式（2）电子商务将改变企业的生产方式）电子商务将改变企业的生产方式（3）电子商务将改变企业的管理方式）电子商务将改变企业的管理方式（4）电子商务将转变政府的行为）电子商务将转变政府的行为1.1.3企业网站在电子商务中的地位与作用企业网站在电子商务中的地位与作用1.企业电子商务网站的功能企业电子商务网站的功能2.电子商务网站的主要功能模块电子商务网站的主要功能模块1.Internet1.Internet2.TCP/IP2.TCP/IP3.Internet3.Internet的地址结构的地址结构的地址结构的地址结构 4.WEB4.WEB技术技术技术技术5.URL5.URL6.6.搜索引擎搜索引擎搜索引擎搜索引擎任务任务2：了解：了解网页设计的网络知识网页设计的网络知识网页设计的网络知识网页设计的网络知识电子商务网页设计电子商务网页设计电子商务网页设计电子商务网页设计1.2网络基础网络基础1.2.1Internet任务任务2：了解网页设计的网络知识：了解网页设计的网络知识互联网互联网是由多个计算机网络相互连接而成的一个网络，它是在功能和逻是由多个计算机网络相互连接而成的一个网络，它是在功能和逻辑上组成的一个大型网络。如图所示。辑上组成的一个大型网络。如图所示。图1-11Internet示意图Internet起源于美国早期的军用计算机网络起源于美国早期的军用计算机网络ARPANET，是世界上第一个远程分组交换，是世界上第一个远程分组交换网。网。运行运行ARPANET的协议称为网络控制协议（的协议称为网络控制协议（NCP），），NCP后来被分为两部分，网络协议后来被分为两部分，网络协议（IP）和传输控制协议（）和传输控制协议（TCP）。从）。从NCP到到TCP/IP的改变是的改变是ARPANET和和Internet之间之间的技术分歧。的技术分歧。从从1994年起，我国年起，我国Internet开始起步。人们在工作、学习和生活中越来越多地使用互联开始起步。人们在工作、学习和生活中越来越多地使用互联网，整个社会的运行都搭上了互联网的快车，并打上了互联网的烙印，互联网已经从单网，整个社会的运行都搭上了互联网的快车，并打上了互联网的烙印，互联网已经从单一的行业互联网发展成为深入我国各行各业的社会大众的互联网。一的行业互联网发展成为深入我国各行各业的社会大众的互联网。我国的五大我国的五大Internet主干网都与国外主干网都与国外Internet形成了互联，连接的国家包括美国、英国、形成了互联，连接的国家包括美国、英国、德国、法国、加拿大、澳大利亚、日本、韩国等德国、法国、加拿大、澳大利亚、日本、韩国等1.2.2TCP/IP协议协议TCP/IP是一种网络通信协议，为连接跨越不同操作系统和不同硬件体系结构的计算机提是一种网络通信协议，为连接跨越不同操作系统和不同硬件体系结构的计算机提供通信的基础。供通信的基础。TCP/IP是一种网络通信协议，为连接跨越不同操作系统和不同硬件体系结构的计算机提是一种网络通信协议，为连接跨越不同操作系统和不同硬件体系结构的计算机提供通信的基础。供通信的基础。IP主要用于标识该计算机的网络地址。主要用于标识该计算机的网络地址。TCP主要功能是用来发送的数据。主要功能是用来发送的数据。1.2.3Internet的地址结构的地址结构1.IP地址地址互联网上的计算机是用互联网上的计算机是用IP地址标识的地址标识的按照按照TCP/IP协议规定，协议规定，IP地址用二进制来表示地址用二进制来表示每个每个IPv4地址长地址长32位，分为位，分为4段，每段段，每段8位，用十进制数字表示，每段数字范围为位，用十进制数字表示，每段数字范围为0255，段与段之间用，段与段之间用“.”隔开。隔开。IP协议有两种版本：协议有两种版本：IPv4和和IPv6。一般将一般将IP地址按节点计算机所在网络规模的大小分为地址按节点计算机所在网络规模的大小分为A，B，C三类，默认的网络屏蔽是三类，默认的网络屏蔽是根据根据IP地址中的第一个字段确定的。地址中的第一个字段确定的。A类地址的表示范围为：类地址的表示范围为：1.0.0.1126.255.255.255，默认，默认网络屏蔽为：网络屏蔽为：255.0.0.0；A类网络用第一组数字表示网络类网络用第一组数字表示网络本身的地址，后面三组数字作为连接于网络上的主机的地本身的地址，后面三组数字作为连接于网络上的主机的地址。址。B类地址的表示范围为：类地址的表示范围为：128.0.0.1191.255.255.255，默，默认网络屏蔽为：认网络屏蔽为：255.255.0.0；B类网络用第一、二组数字类网络用第一、二组数字表示网络的地址，后面两组数字代表网络上的主机地址。表示网络的地址，后面两组数字代表网络上的主机地址。C类地址的表示范围为：类地址的表示范围为：192.0.0.1223.255.255.255，默，默认网络屏蔽为：认网络屏蔽为：255.255.255.0；C类网络用前三组数字类网络用前三组数字表示网络的地址，最后一组数字作为网络上的主机地址。表示网络的地址，最后一组数字作为网络上的主机地址。2.Internet域名域名域名是域名是Internet上服务器或网络系统的名字，是互联网上企业或机构间相互联络的网络上服务器或网络系统的名字，是互联网上企业或机构间相互联络的网络地址。它是一种有意义的英文的缩写，地址。它是一种有意义的英文的缩写，1.2.4Web空间及技术空间及技术1.Web空间空间Web，也可以简称为，也可以简称为“万维网万维网”，又称，又称WWW，是互联网上专门存放网站页面内容的计，是互联网上专门存放网站页面内容的计算机空间。算机空间。2.Web技术技术内容保存在内容保存在Web服务器中，用户通过浏览器来访问，这种结构叫浏览器服务器（服务器中，用户通过浏览器来访问，这种结构叫浏览器服务器（BS）模式。）模式。Web服务器程序：服务器程序：目前常用的目前常用的Web服务器程序有微软的服务器程序有微软的IIS、IBM公司的公司的IBMLotusNotesDomino、Netscape公司公司NetscapeEnterpriseServer和和Apache，其中常用的是，其中常用的是IIS和和Apache。Web浏览器浏览器目前最流行的是微软的目前最流行的是微软的IE和网景的和网景的Netscape。HTTP协议协议HTTP协议是协议是Web服务器使用的主要协议，它提供服务器使用的主要协议，它提供WWW浏览器和浏览器和WWW服务器之间的服务器之间的通信。通信。Web浏览器的中文名称：网络浏览器或网页浏览器，简称浏览器；英文名称：WebBrowser。浏览器是用于观看网页的工具，是一个显示网页伺服器或档案系统内的HTML文件，并让用户与这些文件进行互动的一种软件。个人电脑上常见的网页浏览器包括微软的InternetExplorer、Mozilla的Firefox、Opera和Safari。浏览器是最经常使用到的客户端程序。网页的浏览网页的浏览Web浏览器浏览器地址栏：输入URL地址。后退：退回到前面已访问过的页面。前进：转到下面的屏幕。停止：当页面内容较多或准备停止浏览时，点击按钮可停止链接。刷新：重新载入当前页面。主页：链接用户默认的主页，又叫起始页。搜索：打开浏览区的搜索窗口。“搜索”按钮实际上是在浏览区另开一个用于搜索各种网页的窗口，它是微软公司使用Excite网站的中文搜索工具。只要在搜索关键字输入框中输入要搜索的内容，按“搜索”按钮即可得到搜索的内容。收藏：打开浏览区的收藏窗口，显示收藏夹内容。历史：打开浏览区的历史窗口，显示网站浏览的历史记录。邮件：利用系统邮件程序处理邮件。打印：页面打印。编辑：利用系统中安装的程序对页面进行编辑。3.网站（网站（Website）网站就是互联网上固定地发布信息的地方，它由域名和网站空间构成。网网站就是互联网上固定地发布信息的地方，它由域名和网站空间构成。网站是通过超链接形式构成的一组相关网页以及相关的文件集合。站是通过超链接形式构成的一组相关网页以及相关的文件集合。4.网页网页网页（网页（Webpage）是位于）是位于Web网站上的文档，是网站上的文档，是Internet中最基本的信息中最基本的信息单位。网页一般由一个超文本文件以及相关的图形和脚本文件组成。在网单位。网页一般由一个超文本文件以及相关的图形和脚本文件组成。在网站设计中，有站设计中，有“静态网页静态网页”和动态网页的区别。和动态网页的区别。1.2.5URLURL（UniformResourceLocator统一资源定位器）是一种通用的地址格式，在统一资源定位器）是一种通用的地址格式，在Web上用来标志资源地址和查找访问资源的地址编码方法。上用来标志资源地址和查找访问资源的地址编码方法。通俗的说，通俗的说，URL就是就是Web地址，俗称地址，俗称“网址网址”。URL的一般格式为：的一般格式为：URL的格式由下列三部分组成：的格式由下列三部分组成：（1）协协议议名名。协协议议名名是是用用来来指指示示Web浏浏览览器器软软件件用用什什么么协协议议来来获获取取服服务务器器的的文文件件，不同的服务器需要采用不同的协议来连接。不同的服务器需要采用不同的协议来连接。（2）主主机机名名。主主机机名名用用来来表表示示用用户户所所要要访访问问的的计计算算机机，可可以以为为域域名名或或IP地地址址（有有时时也包括端口号）。例如：也包括端口号）。例如：或或192.168.0.13:80等。等。（3）目目录录名名或或文文件件名名。表表示示主主机机资资源源的的具具体体地地址址。Web网网站站的的规规模模越越大大，越越复复杂杂，路径名也会变得很长。路径名也会变得很长。协 议:/主 机/ip路 径 index.htm URL地址格式，它从左到右排列为：Internet协议、主机标识、端口、文件的主机路径和文件名。Internet协议：指客户用来访问网页的软件工具。其类型有：http:/指定用超文本传输协议连接，为WWW服务器专用，也是最常用的连接类型。ftp:/指定用文件传输控制协议连接，用于文件下载或上传。gopher:/指定浏览器与gopher服务器连接。telnet:/指定与telnet会话连接，用于远程登录。file:/指定连接本地文件，用于浏览本地的文件系统。1.2.6搜索引擎搜索引擎网页设计要了解搜索引擎的主要规则。1.1.网页与网页与网页与网页与HTMLHTML2.2.网页的基本要素网页的基本要素网页的基本要素网页的基本要素3.3.网页设计色彩基础网页设计色彩基础网页设计色彩基础网页设计色彩基础4.4.网页图形基础网页图形基础网页图形基础网页图形基础5.5.网页设计常用工具软件网页设计常用工具软件网页设计常用工具软件网页设计常用工具软件6.6.网站建设的基本流程网站建设的基本流程网站建设的基本流程网站建设的基本流程电子商务网页设计电子商务网页设计电子商务网页设计电子商务网页设计1.3网页设计基础网页设计基础任务任务3：了解网页设计的基础知识：了解网页设计的基础知识1.网页的本质网页的本质html标记标记如果在浏览器窗口中任意打开一个网页，然后选择如果在浏览器窗口中任意打开一个网页，然后选择“查看查看”菜单中的菜单中的“源文件源文件”命令，命令，则系统会启动则系统会启动“记事本记事本”程序，其中包含一些文本信息。这就是网页的本质。程序，其中包含一些文本信息。这就是网页的本质。如下图：如下图：结论结论：1）这些文本实际就是网页的本质）这些文本实际就是网页的本质HTML代码标记代码标记(文本信息文本信息)HTML（HyperTextMarkupLanguage，超文本标记语言）是表示网，超文本标记语言）是表示网页的一种设计规范，它通过一定规范定义了网页内容的显示方法。页的一种设计规范，它通过一定规范定义了网页内容的显示方法。由此可以看出，网页就是用由此可以看出，网页就是用HTML写成的文档，在写成的文档，在Internet中可以通过中可以通过浏览器程序进行浏览。浏览器程序进行浏览。2）网页文件的后缀）网页文件的后缀.html或者在或者在windows系统中简写为系统中简写为.htm简单说简单说网页是用网页是用html语言编写的程序语言编写的程序2.html1、Html(hypertextmarkuplanguage)A、html超文本标记语言，是网页设计的基础语言。超文本标记语言，是网页设计的基础语言。HTML是网页的描述是网页的描述语言。语言。B、超文本文件是一个、超文本文件是一个ASCII格式的文件格式的文件,它由文本内容和标记元素组成。它由文本内容和标记元素组成。C、html文件通常用编辑器建立或者修改，而同过浏览器来展示。文件通常用编辑器建立或者修改，而同过浏览器来展示。D、是一个放置了标记的、是一个放置了标记的ASCII文本文件，扩展名为文本文件，扩展名为html/htm。2、HTML文件结构文件结构HTML的结构包括头部（的结构包括头部（Head）、主体（）、主体（Body）两大部分。）两大部分。头部（头部（Head）描述网页的标题和浏览器所需的其它信息。）描述网页的标题和浏览器所需的其它信息。而主体则是网页所要表示说明的具体内容。而主体则是网页所要表示说明的具体内容。通过标签（也叫做标记符）定义网页内容的显示格式。例如，通过标签（也叫做标记符）定义网页内容的显示格式。例如，标签表示此文档是一个网页文件，而标签表示此文档是一个网页文件，而标签则表示定义一个表格。标签则表示定义一个表格。HTML可以指定文字、图形、动画、声音等的显示。可以指定文字、图形、动画、声音等的显示。HTML的版本在不断在发展的版本在不断在发展。3.动手实践动手实践用记事本编写网页HTML文件基本结构：网页文件格式。-文件开始-标头区开始标头区:网页头部的标识，记录文件基本资料，如作者、编写时间。.-标题区标题区:文件标题须使用在标头区内，可以在浏览器最上面看到标题。-标头区结束-文本区开始*文本区:文件资料，即在浏览器上看到的网站内容。-文本区内容-文本区结束-文件结束1.3.2网页的基本要素网页的基本要素1.页面标题页面标题用来提示该页面的主要内容。在用来提示该页面的主要内容。在HTML文档中的文档中的和和之间设置。之间设置。2.网站标志网站标志也称也称Logo，一般出现在页面的显要位置（通常在页眉中）。，一般出现在页面的显要位置（通常在页眉中）。3.文本文本文本是网页传递信息的主要载体，文本是网页传递信息的主要载体，4.图片和多媒体图片和多媒体5.导航栏导航栏导航栏是网页设计中的重要部分，引导访问者了解所要浏览的网导航栏是网页设计中的重要部分，引导访问者了解所要浏览的网站的内容，而不至于迷失方向。站的内容，而不至于迷失方向。6.页眉和页脚页眉和页脚页眉指的是页面上端的部分。一个富有个性特色的页眉将和网站标志一样起到标识的作用。1.3.2网页的布局网页的布局网页布局就是对所有网页元素进行的组织。网页布局就是对所有网页元素进行的组织。几个概念：几个概念：旗帜广告旗帜广告banner标志图片标志图片logo导航栏导航栏menu按钮按钮Button版权版权copyright1.3.4网页设计色彩基础网页设计色彩基础1.色彩的三原色色彩的三原色电脑屏幕的色彩是由电脑屏幕的色彩是由RGB（红、绿、蓝）三种色光所合成的，而我们可通（红、绿、蓝）三种色光所合成的，而我们可通过调整这三个基色就可以调校出其它的颜色过调整这三个基色就可以调校出其它的颜色在在HTML语言中的基本色彩是红色语言中的基本色彩是红色(R)、绿色、绿色(G)、蓝色、蓝色(B)，这三种颜色的，这三种颜色的数值都是数值都是255。例如：红色的值。例如：红色的值(R:255,G:0,B:0)，十六进制表示为，十六进制表示为(#FF0000)。白色为（。白色为（R255,G255,B255），十六进制），十六进制(#FFFFFF)。自然界中的颜色可以分为非彩色和彩色两大类。自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，即反射白光的色彩，而其他非彩色指黑色、白色和各种深浅不一的灰色，即反射白光的色彩，而其他所有颜色均属于彩色。所有颜色均属于彩色。2.色彩三属性：色相、明度、色彩三属性：色相、明度、纯度（彩度）。纯度（彩度）。（1）色相）色相色相波长最长的是红色，最短色相波长最长的是红色，最短的是紫色。最基本的色相为：的是紫色。最基本的色相为：红、橙、黄、绿、蓝、紫红、橙、黄、绿、蓝、紫6个颜个颜色。色。图1-6 12色相环（2）饱和度）饱和度饱和度饱和度(Saturation)是指色彩的鲜艳程度，饱和度取决于该色中含色成分是指色彩的鲜艳程度，饱和度取决于该色中含色成分和消色成分和消色成分(灰色灰色)的比例。的比例。如某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度降低，颜色趋于如某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度降低，颜色趋于柔和、沉稳。柔和、沉稳。即使是相同的色相，因为明度的不同，彩度也会随之变化的。即使是相同的色相，因为明度的不同，彩度也会随之变化的。（3）明度）明度明度明度(Brightness或或Lightness)也叫也叫亮度，是指色彩的明暗程度，明度越亮度，是指色彩的明暗程度，明度越大，色彩越亮。体现颜色的深浅，也大，色彩越亮。体现颜色的深浅，也称色彩的黑白度对比。称色彩的黑白度对比。非彩色只有明度特征，没有色相和饱非彩色只有明度特征，没有色相和饱和度的区别。和度的区别。1.3.5网页图形基础网页图形基础网页中常见的图像格式有网页中常见的图像格式有3种，即种，即GIF、JPEG、PNG格式。格式。GIFJPEGPNG1.3.6网页设计常用工具软件网页设计常用工具软件1.网页代码编辑工具网页代码编辑工具（1）文本编辑器）文本编辑器“记事本”是一个用来创建简单的文档的基本的文本编辑器。“记事本”最常用来查看或编辑文本(.txt)文件，但是现在许多用户使用“记事本”是创建Web页面。（2）DreamweaverDreamweaver是美国Macromedia公司开发的具有网页制作与网站管理功能的所见即所得的网页编辑软件，是专业网页设计的首选，使用Dreamweaver可以轻松地制作出精美的网页。（3）FrontPageFrontPage是美国微软公司的产品，是一套用来创建互联网站点的软件包。2.网页图像素材处理工具网页图像素材处理工具（1）PhotoshopPhotoshop是大家公认的最好的通用平面美术设计软件。是大家公认的最好的通用平面美术设计软件。（2）FireworksFireworks是是Macromedia公司发布的一款专为网络图形设计的图形编公司发布的一款专为网络图形设计的图形编辑软件。辑软件。（3）Illustrator（4）FlashFlash是美国的是美国的Macromedia公司推出的优秀网页动画设计软件。公司推出的优秀网页动画设计软件。1.3.7网站建设的基本流程网站建设的基本流程网站的需求分析。网站的需求分析。网站规划。网站规划。收集素材。收集素材。设计网站的文字、图像和颜色。设计网站的文字、图像和颜色。制作静态网页。制作静态网页。（6）开发动态网页。）开发动态网页。（7）申请网站域名和网站空间。）申请网站域名和网站空间。（8）网站的测试与发布。）网站的测试与发布。（9）网站的维护与推广。）网站的维护与推广。1.1.网页设计工作内容网页设计工作内容网页设计工作内容网页设计工作内容2.2.网页设计的知识和技能网页设计的知识和技能网页设计的知识和技能网页设计的知识和技能3.3.电电电电子子子子商商商商务务务务网网网网页页页页设设设设计计计计的的的的知知知知识识识识体系体系体系体系电子商务网页设计电子商务网页设计电子商务网页设计电子商务网页设计1.4电子商务网页设计的知识体系电子商务网页设计的知识体系本节任务：本节任务：1.4.1网页设计工作内容网页设计工作内容网页设计主要包含以下工作内容：网页设计主要包含以下工作内容：（1）电子商务网站内容的商业规划。）电子商务网站内容的商业规划。（2）网页界面的设计制作）网页界面的设计制作（3）网站的功能实现。）网站的功能实现。（4）网站的维护。）网站的维护。具体来讲，电子商务网页设计工作包含以下技能：具体来讲，电子商务网页设计工作包含以下技能：（1）商业信息架构能力）商业信息架构能力（2）视觉设计）视觉设计（3）前端界面制作）前端界面制作（5）团队合作能力）团队合作能力（4）用户交互功能的实现）用户交互功能的实现1.4.3电子商务网页设计的知识体系电子商务网页设计的知识体系设计主页布局技术 页面设计 图像设计维护域名申请 空间申请 数据上传 维护商业规划网站商业规划 技术规划 色彩设计基础技术WEB标准 HTML语言 CSS Javascript 互联网基础电子商务战略 企业商务流程本章本章小结小结:任务任务3：了解网页设计的基本工具。：了解网页设计的基本工具。任务任务1：理解网页的本质。：理解网页的本质。任务任务2：了解网页设计的基础知识。：了解网页设计的基础知识。任务任务4：掌握网站建设的基本流程。：掌握网站建设的基本流程。网页学习参考书和网址：网页学习参考书和网址：http:/ 2章章网页设计语言基础网页设计语言基础电子商务网页设计课件电子商务网页设计课件知识目标：理解知识目标：理解HTML语言组成及语言组成及XHTML语法规范；掌握语法规范；掌握CSS语法语法技能目标：掌握在网页中如何使技能目标：掌握在网页中如何使用用CSS样式表样式表能力目标：运用能力目标：运用html语言和语言和CSS样式表制作简单网页样式表制作简单网页本章教本章教学目标学目标2.1 Web语言基础认识认识HTML认识认识CSSWeb标准标准2.1.12.1.1认识认识HTMLHTML1.HTML例2-1简单的HTML网页制作实例。未使用CSS的简单网页未使用CSS的html文件这是一张未使用CSS的简单网页！|GML(1969)|SGML(1985)|XML(1998)、HTML(1993)|XHTML(2000）196919851993199820002.标记语言的历史标记语言的历史2.标记语言的历史标记语言的历史HTML存在缺陷：不可扩展；只能用于信息显示3.XML（ExtensibleMarkupLanguage）用于描述、存储和交换数据。XML格式包含两部分：数据的文档部分；描述文档中所存储数据的数据类型的文档类型定义。4.XHTML（eXtensibleHyperTextMarkupLanguage）比HTML有更严格的要求，符合Web标准规范2.1.2 2.1.2 认识认识CSSCSS使用了CSS的网页使用了CSS的html文件这是一张使用了CSS的简单网页！CSS定义当需要修改网页中当需要修改网页中标记标记的格式时，只需修改样式表的格式时，只需修改样式表定义定义2.1.3 Web2.1.3 Web标准标准Web标准标准结构标准结构标准表现标准表现标准行为标准行为标准页面能提供适页面能提供适于打印的版本于打印的版本下载与页面显下载与页面显示速度更快示速度更快内容能被更广内容能被更广的设备访问的设备访问访问者内容能被更多内容能被更多的用户所访问的用户所访问用户能通过样用户能通过样式定制界面。式定制界面。采用采用WebWeb标准的好处标准的好处提供打印版本，提供打印版本，不用复制内容不用复制内容更少代码和组更少代码和组件，容易维护件，容易维护更容易被搜寻更容易被搜寻引擎搜索到引擎搜索到网站所有者带宽要求降低带宽要求降低（代码更简洁）（代码更简洁）改版方便，不需改版方便，不需变动页面内容变动页面内容更少代码和组更少代码和组件，容易维护件，容易维护2.2 HTML2.2 HTML语法基础语法基础基本语法基本语法文档结构文档结构常用标签常用标签2.2.1 HTML2.2.1 HTML基本语法基本语法1.HTML标记标记标记又称标签，指的是对于元素内容进行控制的符号，其标记又称标签，指的是对于元素内容进行控制的符号，其具体形式是用一对尖括号具体形式是用一对尖括号“”括起来的字符串。括起来的字符串。在在HTML中，所有的标记符都用尖括号括起来。绝大多数中，所有的标记符都用尖括号括起来。绝大多数标记符都是成对出现的。标记符都是成对出现的。如：如：。HTML标记不区分大小写的，但标记不区分大小写的，但XHTML标准规定大小写标标准规定大小写标记不同，推荐使用标记小写。记不同，推荐使用标记小写。标记有单标记和双标记之分。单标记如标记有单标记和双标记之分。单标记如、2.HTML标记的属性标记的属性例如：例如：3.HTML元素元素 HTML元素是构建网页的一种单位，是元素是构建网页的一种单位，是由由HTML标签和标签和HTML属性组成的。属性组成的。元素指的是包含标签在内的整体，除去元素指的是包含标签在内的整体，除去标签的部分叫做内容。标签的部分叫做内容。4.颜色的指定方法颜色的指定方法（1）颜色值）颜色值由一个十六进制符号来定义，这个符号由红色、绿色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（和蓝色的值组成（RGB）。每种颜色的最小值是）。每种颜色的最小值是0（十六（十六进制：进制：#00），最大值是），最大值是255（十六进制：（十六进制：#FF）。例如：）。例如：#000000表示黑色，表示黑色，#ff0000表示红色。表示红色。（2）颜色名）颜色名aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow。5.HTML注释注释HTML注释的开始使用注释的开始使用“”2.2.2HTML文档的结构文档的结构1.HTML文件基本结构文件基本结构2.文档头部内容文档头部内容在在.定义。头部内容定义。头部内容主要用来定义文档的相关信息，如文档标主要用来定义文档的相关信息，如文档标题、说明信息、样式定义、脚本代码等。题、说明信息、样式定义、脚本代码等。在头部内容通常可以应用在头部内容通常可以应用、等标签。等标签。（1）标签标签title标签用来给标签用来给HTML文件添加标题，文件添加标题，位于位于与与圈定的范围内。圈定的范围内。标题除了可以在通常的浏览器窗口的标标题除了可以在通常的浏览器窗口的标题栏中显示以外，还可以作为加入收藏夹题栏中显示以外，还可以作为加入收藏夹时的标题时的标题。（2 2）标签标签 提供网页的相关信息，如：关键字、作者、提供网页的相关信息，如：关键字、作者、描述、网页过渡时间等多种信息。描述、网页过渡时间等多种信息。标记描述HTTP-EQUIVHTTP-EQUIV向服务器请求NAMENAME设置属性值CONTENTCONTENT根据搭配的属性设置对应的属性值1）网页编码）网页编码设置网页编码设置网页编码文档类型文档类型编码类型编码类型常用编码类型：常用编码类型：GB2312-简体中文简体中文HZ-简体中文简体中文BIG5-繁体中文繁体中文ISO-8859-1-英英文文2）关键字）关键字便于搜索引擎搜索网页，关键字之间要用逗号便于搜索引擎搜索网页，关键字之间要用逗号分割。分割。关键字内容关键字内容关键字关键字3）自动刷新）自动刷新每隔几秒钟后刷新页面内容每隔几秒钟后刷新页面内容刷新刷新刷新间隔的秒数刷新间隔的秒数4）自动跳转）自动跳转设定跳转时间和地址设定跳转时间和地址跳转后打开的文件地址跳转后打开的文件地址（3 3）basebase基准链接基准链接 /base用来设定浏览器中文件的绝对路径，然后在文件中只需写下文件的相对位置，在浏览器中浏览时这些位置会自动附载绝对路径后面，成为完整的路径。3.HTML主体内容主体内容在在与与标记之间，显示标记之间，显示在浏览器的正文部分在浏览器的正文部分4.HTML文件命名规则文件命名规则（1）网页文件扩展名用）网页文件扩展名用.html或或.htm。（2）网页文件名使用字母）网页文件名使用字母az，排序数字，排序数字09、连、连字符（字符（-）、下划线（）、下划线（_）；不使用特殊字符，如）；不使用特殊字符，如空格、加号（空格、加号（+）、或）、或$等。等。（3）网页文件名尽量使用所有小写）网页文件名尽量使用所有小写（4）网页文件名尽量短，最长不超）网页文件名尽量短，最长不超30个字符。个字符。2.2.3文本与版面风格控制标签文本与版面风格控制标签1.文字格式标签文字格式标签2.