《电子商务网页设计》课件(完整版)

1、电子商务网页设计课件第1章 电子商务网页设计概述本章学习目标：知识目标： 了解电子商务的概念；掌握互联网的基础知识；理解网页的本质； 了解网页的色彩的基本知识；了解网页制作的基本工具；了解网页设计师的执业技能。 技能目标： 掌握记事本编写网页的方法；掌握IE操作的基本能力。能力目标： 理解建设电子商务网站的必要性。 本章主要内容：1.3 网页设计基础1.1 电子商务基础1.2 网络基础1.4电子商务网页设计的知识体系1.3 网页设计基础1. 什么是电子商务2. 电子商务的定义3. 电子商务的概念模型4. 电子商务的应用类型5. 企业网站在电子商务中的地位与作用电子商务网页设计1.1 电子商务基

2、础任务1：理解电子商务概念1. 电子商务的概念 按照IBM的观点，电子商务 = WEB + 企业业务。也就是说，电子商务包含两个方面内容，一是电子方式，二是商贸活动。 就电子方式而言，电子商务的方式是指利用当代最先进的信息技术，如电子计算机技术、网络技术、通讯技术、多媒体技术、Internet技术等，从事的商业活动。它强调现代信息技术在网络计算环境下的商业化应用。 从商贸活动的角度分析，商务是核心，电子是手段。我们研究、学习电子商务的目的是为了更好的利用先进的电子商务技术手段，降低企业的经营成本、提高工作效率、实现企业盈利的根本目的。在此基础上提高整个社会的运行效率、改善我们的生活质量。2.电

3、子商务的定义电子商务首先是商业经营中的一种全新经营理念，是在通过电子手段建立一种新的经济秩序，是信息技术对传统商务活动的一种变革；同时电子商务是新的商业模式，是各种具有商业活动能力的实体（如生产企业、商贸企业、金融机构、政府机构、个人消费者等）利用网络和先进的数字化传媒技术进行的各项商业贸易活动；电子商务强调对网络化和数字化技术的综合利用。电子商务是信息技术发展的产物，计算机技术、网络技术、通讯技术、多媒体技术等信息技术和计算机设备、电子设备是电子商务的基础。 3. 电子商务的概念模型电子商务的概念模型可以抽象地描述每个交易主体和电子市场之间的交易事务关系。如图1-1所示： 图1-1 电子商务

4、的概念模型其中：交易主体：是指从事电子商务活动的客观对象是电子商务活动的实际参与主体，包括买卖双方和交易活动必须的第三方中介机构，如企业、银行、政府机构、认证机构和个人等。电子市场：是交易主体从事商品和服务交换的场所，它是由各种商务活动的参与者，利用通信网络连接成的虚拟的统一经济整体。交易事务：是指电子商务参与各方所从事的具体的商务活动的内容，例如，询价、报价、转账支付、广告宣传、商品运输等。信息流：在电子商务活动中最基本也最普遍的是信息流，既包括商品信息、营销信息、技术支持、售后服务等内容，也包括诸如询价单、报价单、付款通知单、转账通知单等商业贸易单证，还包括交易方的支付能力、支付信誉、中介

5、信誉等。资金流：是指资金的转移过程。如付款、转账、兑换等。物流：主要是指商品和服务的存储、保管、加工、配送、和运输、装卸。在电子商务交易中，通过网络实现物流的能力十分有限，只能直接传输如软件、有价信息等信息类商品和服务。对于大多数实体商品和服务来说，物流仍然要经由传统的配送渠道和方式。商流：是指商品在购、销之间进行交易和商品所有权转移的过程。4. 电子商务的应用类型（1）企业内部电子商务（2）本地电子商务（3）国内远程电子商务（4）全球电子商务1.1.2电子商务对企业经营活动的影响1.电子商务的优势（1）商务流程信息化。（2）虚拟化。（3）全球化。（4）低成本。（5）互动性。2.电子商务的影响

6、（1）电子商务将改变企业的经营模式（2）电子商务将改变企业的生产方式（3）电子商务将改变企业的管理方式（4）电子商务将转变政府的行为1.1.3 企业网站在电子商务中的地位与作用1.企业电子商务网站的功能2.电子商务网站的主要功能模块1. Internet 2. TCP/IP 3. Internet的地址结构 4. WEB技术5. URL6.搜索引擎任务2：了解网页设计的网络知识电子商务网页设计1.2 网络基础 1.2.1 Internet任务2：了解网页设计的网络知识 互联网是由多个计算机网络相互连接而成的一个网络，它是在功能和逻辑上组成的一个大型网络。如图所示。 图 1-11 Interne

7、t示意图 Internet起源于美国早期的军用计算机网络ARPANET，是世界上第一个远程分组交换网。运行ARPANET的协议称为网络控制协议（NCP），NCP后来被分为两部分，网络协议（IP）和传输控制协议（TCP）。从NCP到TCP/IP的改变是ARPANET和Internet之间的技术分歧。从1994年起，我国Internet开始起步。人们在工作、学习和生活中越来越多地使用互联网，整个社会的运行都搭上了互联网的快车，并打上了互联网的烙印，互联网已经从单一的行业互联网发展成为深入我国各行各业的社会大众的互联网。我国的五大Internet主干网都与国外Internet形成了互联，连接的国家包

8、括美国、英国、德国、法国、加拿大、澳大利亚、日本、韩国等1.2.2 TCP/IP协议TCP/IP是一种网络通信协议，为连接跨越不同操作系统和不同硬件体系结构的计算机提供通信的基础。 TCP/IP是一种网络通信协议，为连接跨越不同操作系统和不同硬件体系结构的计算机提供通信的基础。 IP主要用于标识该计算机的网络地址。TCP主要功能是用来发送的数据。 1.2.3 Internet的地址结构1. IP地址互联网上的计算机是用IP地址标识的按照TCP/IP协议规定，IP地址用二进制来表示每个IPv4地址长32位，分为4段，每段8位，用十进制数字表示，每段数字范围为0255，段与段之间用“.”隔开。 I

9、P协议有两种版本：IPv4和IPv6。 一般将IP地址按节点计算机所在网络规模的大小分为A，B，C三类，默认的网络屏蔽是根据IP地址中的第一个字段确定的。A类地址的表示范围为：55，默认网络屏蔽为：； A类网络用第一组数字表示网络本身的地址，后面三组数字作为连接于网络上的主机的地址。 B类地址的表示范围为：55，默认网络屏蔽为：；B类网络用第一、二组数字表示网络的地址，后面两组数字代表网络上的主机地址。 C类地址的表示范围为：55，默认网络屏蔽为：； C类网络用前三组数字表示网络的地址，最后一组数字作为网络上的主机地址。 2. Internet域名域名是Internet上服务器或网络系统的名字

10、，是互联网上企业或机构间相互联络的网络地址。它是一种有意义的英文的缩写，1.2.4 Web空间及技术1. Web空间Web，也可以简称为“万维网”，又称WWW，是互联网上专门存放网站页面内容的计算机空间。 2. Web技术内容保存在Web服务器中，用户通过浏览器来访问，这种结构叫浏览器服务器（BS）模式。 Web服务器程序：目前常用的Web服务器程序有微软的IIS、IBM公司的IBM Lotus Notes Domino、Netscape公司Netscape Enterprise Server和Apache，其中常用的是IIS和Apache。Web浏览器 目前最流行的是微软的IE和网景的 Ne

11、tscape。HTTP协议HTTP协议是Web服务器使用的主要协议，它提供WWW浏览器和WWW服务器之间的通信。 Web浏览器的中文名称：网络浏览器或网页浏览器，简称浏览器；英文名称：Web Browser。浏览器是用于观看网页的工具，是一个显示网页伺服器或档案系统内的HTML文件，并让用户与这些文件进行互动的一种软件。个人电脑上常见的网页浏览器包括微软的Internet Explorer、Mozilla的Firefox、Opera和Safari。浏览器是最经常使用到的客户端程序。 网页的浏览Web浏览器 地址栏：输入URL地址。后退：退回到前面已访问过的页面。前进：转到下面的屏幕。停止：当页

12、面内容较多或准备停止浏览时，点击按钮可停止链接。刷新：重新载入当前页面。主页：链接用户默认的主页，又叫起始页。搜索：打开浏览区的搜索窗口。“搜索”按钮实际上是在浏览区另开一个用于搜索各种网页的窗口，它是微软公司使用Excite网站的中文搜索工具。只要在搜索关键字输入框中输入要搜索的内容，按“搜索”按钮即可得到搜索的内容。收藏：打开浏览区的收藏窗口，显示收藏夹内容。历史：打开浏览区的历史窗口，显示网站浏览的历史记录。邮件：利用系统邮件程序处理邮件。打印：页面打印。编辑：利用系统中安装的程序对页面进行编辑。3.网站（Web site）网站就是互联网上固定地发布信息的地方，它由域名和网站空间构成。网

13、站是通过超链接形式构成的一组相关网页以及相关的文件集合。4.网页网页（Web page）是位于Web网站上的文档，是Internet中最基本的信息单位。网页一般由一个超文本文件以及相关的图形和脚本文件组成。在网站设计中，有“静态网页”和动态网页的区别。1.2.5 URL URL（Uniform Resource Locator统一资源定位器）是一种通用的地址格式，在Web上用来标志资源地址和查找访问资源的地址编码方法。通俗的说，URL就是Web地址，俗称“网址”。URL的一般格式为： URL的格式由下列三部分组成：（1）协议名。协议名是用来指示Web浏览器软件用什么协议来获取服务器的文件，不同

14、的服务器需要采用不同的协议来连接。（2）主机名。主机名用来表示用户所要访问的计算机，可以为域名或IP地址（有时也包括端口号）。例如：或3:80等。（3）目录名或文件名。表示主机资源的具体地址。Web网站的规模越大，越复杂，路径名也会变得很长。协 议:/主 机/ip路 径http index.htm URL地址格式，它从左到右排列为：Internet协议、主机标识、端口、文件的主机路径和文件名。Internet协议：指客户用来访问网页的软件工具。其类型有：http:/ 指定用超文本传输协议连接，为WWW服务器专用，也是最常用的连接类型。ftp:/ 指定用文件传输控制协议连接，用于文件下载或上传。

15、gopher:/ 指定浏览器与gopher服务器连接。telnet:/ 指定与telnet会话连接，用于远程登录。file:/ 指定连接本地文件，用于浏览本地的文件系统。1.2.6 搜索引擎网页设计要了解搜索引擎的主要规则。网页与HTML2. 网页的基本要素3.网页设计色彩基础4. 网页图形基础5. 网页设计常用工具软件 6.网站建设的基本流程电子商务网页设计1.3 网页设计基础任务3：了解网页设计的基础知识1. 网页的本质html标记如果在浏览器窗口中任意打开一个网页，然后选择“查看”菜单中的“源文件”命令，则系统会启动“记事本”程序，其中包含一些文本信息。这就是网页的本质。如下图：结论：1

16、）这些文本实际就是网页的本质HTML代码标记(文本信息)HTML （HyperText Markup Language，超文本标记语言）是表示网页的一种设计规范，它通过一定规范定义了网页内容的显示方法。由此可以看出，网页就是用HTML写成的文档，在Internet中可以通过浏览器程序进行浏览。2）网页文件的后缀.html或者在windows系统中简写为.htm简单说网页是用html语言编写的程序2. html1、Html(hyper text markup language )A、html超文本标记语言，是网页设计的基础语言。 HTML是网页的描述语言。B、超文本文件是一个ASCII格式的文件

17、,它由文本内容和标记元素组成。C、html文件通常用编辑器建立或者修改，而同过浏览器来展示。 D、是一个放置了标记的ASCII文本文件，扩展名为html/htm 。2、 HTML文件结构HTML的结构包括头部（Head）、主体（Body）两大部分。头部（Head）描述网页的标题和浏览器所需的其它信息。而主体则是网页所要表示说明的具体内容。通过标签（也叫做标记符）定义网页内容的显示格式。例如，标签表示此文档是一个网页文件，而标签则表示定义一个表格。 HTML可以指定文字、图形、动画、声音等的显示。HTML的版本在不断在发展 。3. 动手实践用记事本编写网页HTML文件基本结构： 网页文件格式。

18、文件开始 标头区开始标头区:网页头部的 标识，记录文件基本资料，如作者、编写时间。 . 标题区标题区:文件标题须使用在 标头区内，可以在浏览器最上面看到标题。 标头区结束 文本区开始 * 文本区:文件资料，即在浏览器上 看到的网站内容。 文本区内容 文本区结束 文件结束 1.3.2网页的基本要素1. 页面标题用来提示该页面的主要内容。在HTML文档中的和之间设置。 2. 网站标志也称Logo，一般出现在页面的显要位置（通常在页眉中）。3. 文本文本是网页传递信息的主要载体， 4. 图片和多媒体5. 导航栏导航栏是网页设计中的重要部分，引导访问者了解所要浏览的网站的内容，而不至于迷失方向。 6.

19、 页眉和页脚页眉指的是页面上端的部分。一个富有个性特色的页眉将和网站标志一样起到标识的作用。 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,G25

20、5,B255），十六进制(#FFFFFF)。自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，即反射白光的色彩，而其他所有颜色均属于彩色。 2.色彩三属性：色相、明度、纯度（彩度）。（1）色相色相波长最长的是红色，最短的是紫色。最基本的色相为：红、橙、黄、绿、蓝、紫6个颜色。 图1-6 12色相环（2）饱和度 饱和度(Saturation) 是指色彩的鲜艳程度，饱和度取决于该色中含色成分和消色成分(灰色)的比例。如某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度降低，颜色趋于柔和、沉稳。即使是相同的色相，因为明度的不同，彩度也会随之变化的。（3）明度明度(Bri

21、ghtness或Lightness)也叫亮度，是指色彩的明暗程度，明度越大，色彩越亮。体现颜色的深浅，也称色彩的黑白度对比。非彩色只有明度特征，没有色相和饱和度的区别。1.3.5 网页图形基础网页中常见的图像格式有3种，即GIF、JPEG、PNG格式。 GIFJPEGPNG 1.3.6网页设计常用工具软件1. 网页代码编辑工具 （1）文本编辑器“记事本”是一个用来创建简单的文档的基本的文本编辑器。“记事本”最常用来查看或编辑文本(.txt)文件，但是现在许多用户使用“记事本”是创建Web页面。（2）DreamweaverDreamweaver是美国Macromedia公司开发的具有网页制作与网

22、站管理功能的所见即所得的网页编辑软件，是专业网页设计的首选，使用Dreamweaver可以轻松地制作出精美的网页。（3）FrontPageFrontPage是美国微软公司的产品，是一套用来创建互联网站点的软件包。2.网页图像素材处理工具（1）Photoshop Photoshop是大家公认的最好的通用平面美术设计软件。（2）Fireworks Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件。 （3）Illustrator （4） Flash Flash是美国的Macromedia公司推出的优秀网页动画设计软件。1.3.7 网站建设的基本流程网站的需求分析。

23、网站规划。收集素材。设计网站的文字、图像和颜色。制作静态网页。（6）开发动态网页。（7）申请网站域名和网站空间。（8）网站的测试与发布。（9）网站的维护与推广。网页设计工作内容2.网页设计的知识和技能3.电子商务网页设计的知识体系电子商务网页设计1.4 电子商务网页设计的知识体系本节任务：1.4.1网页设计工作内容网页设计主要包含以下工作内容： （1）电子商务网站内容的商业规划。（2）网页界面的设计制作（3）网站的功能实现。（4）网站的维护。具体来讲，电子商务网页设计工作包含以下技能：（1）商业信息架构能力（2）视觉设计（3）前端界面制作（5）团队合作能力（4）用户交互功能的实现1.4.3电子

24、商务网页设计的知识体系设计主页布局技术 页面设计 图像设计维护域名申请 空间申请 数据上传 维护商业规划网站商业规划 技术规划 色彩设计基础技术WEB标准 HTML语言 CSS Javascript 互联网基础电子商务战略 企业商务流程本章小结: 任务3：了解网页设计的基本工具。任务1：理解网页的本质。任务2：了解网页设计的基础知识。任务4：掌握网站建设的基本流程。网页学习参考书和网址：/sdsylihong126/实验1、用记事本编写网页一、实验目的：用记事本编写一简单网页，理解网页的本质。二、实验内容1、用记事本编写一简单网页的HTML语言标记代码；2、掌握HTML语言的标记代码；3、网页

25、文件的创建、编辑及保存。三、实验步骤： （参考p12） 小结：用记事本编写网页的步骤：1、在桌面上，单击鼠标右键新建一个记事本文档。2、双击打开进行编辑。键入html相关标记。3、单击“文件/另存为”命令，弹出“另存为”对话框，文件名后缀名html。4、选择保存类型为“所有文件”。最后单击“确定”。 桌面上出现一个网页文件图标，文件名是你的学号，此时可以通过WEB浏览器程序进行浏览。谢谢大家第2章网页设计语言基础电子商务网页设计课件知识目标：理解HTML语言组成及XHTML语法规范；掌握CSS语法技能目标：掌握在网页中如何使用CSS样式表 能力目标：运用html语言和CSS样式表制作简单网页

26、本章教学目标2.1 Web语言基础认识HTML认识CSSWeb标准2.1.1认识HTML1.HTML例2-1 简单的HTML网页制作实例。 未使用CSS的简单网页 未使用CSS的html文件 这是一张未使用CSS的简单网页！ | GML(1969) | SGML(1985) | XML(1998) 、HTML(1993) | XHTML(2000）1969 1985 1993 1998 20002.标记语言的历史2.标记语言的历史 HTML存在缺陷：不可扩展；只能用于信息显示 3.XML（Extensible Markup Language） 用于描述、存储和交换数据。 XML格式包含两部分：

27、数据的文档部分；描述文档中所存储数据的数据类型的文档类型定义。 4.XHTML（ eXtensible HyperText Markup Language） 比HTML有更严格的要求，符合Web标准规范2.1.2 认识CSS 使用了CSS的网页 使用了CSS的html文件 这是一张使用了CSS的简单网页！ CSS定义当需要修改网页中标记的格式时，只需修改样式表定义2.1.3 Web标准Web标准结构标准表现标准行为标准页面能提供适于打印的版本下载与页面显示速度更快内容能被更广的设备访问访问者内容能被更多的用户所访问用户能通过样式定制界面。采用Web标准的好处提供打印版本，不用复制内容更少代码和

28、组件，容易维护更容易被搜寻引擎搜索到网站所有者带宽要求降低（代码更简洁）改版方便，不需变动页面内容更少代码和组件，容易维护2.2 HTML语法基础基本语法文档结构常用标签2.2.1 HTML基本语法1. HTML 标记标记又称标签，指的是对于元素内容进行控制的符号，其具体形式是用一对尖括号“”括起来的字符串。 在HTML中，所有的标记符都用尖括号括起来。绝大多数标记符都是成对出现的。 如： 。HTML标记不区分大小写的，但XHTML标准规定大小写标记不同，推荐使用标记小写。标记有单标记和双标记之分。单标记如、 2. HTML 标记的属性例如： 3. HTML 元素 HTML元素是构建网页的一种

29、单位，是由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注释的开

30、始使用“” 2.2.2 HTML文档的结构 1. HTML文件基本结构2. 文档头部内容 在. 定义。头部内容主要用来定义文档的相关信息，如文档标题、说明信息、样式定义、脚本代码等。 在头部内容通常可以应用、等标签。（1）标签 title标签用来给HTML文件添加标题，位于与圈定的范围内。 标题除了可以在通常的浏览器窗口的标题栏中显示以外，还可以作为加入收藏夹时的标题 。（2）标签 提供网页的相关信息，如：关键字、作者、描述、网页过渡时间等多种信息。标记描述HTTP-EQUIV向服务器请求NAME设置属性值CONTENT根据搭配的属性设置对应的属性值1）网页编码 设置网页编码文档类型编码类型常

31、用编码类型： GB2312 简体中文 HZ 简体中文 BIG5 繁体中文 ISO-8859-1 英文2）关键字 便于搜索引擎搜索网页，关键字之间要用逗号分割。 关键字内容关键字3）自动刷新 每隔几秒钟后刷新页面内容 刷新刷新间隔的秒数4）自动跳转 设定跳转时间和地址 跳转后打开的文件地址（3）base基准链接 base用来设定浏览器中文件的绝对路径，然后在文件中只需写下文件的相对位置，在浏览器中浏览时这些位置会自动附载绝对路径后面，成为完整的路径。3. HTML主体内容 在 与标记之间，显示在浏览器的正文部分4. HTML文件命名规则（1）网页文件扩展名用.html或.htm。（2）网页文件名

32、使用字母az，排序数字09、连字符（-）、下划线（_）；不使用特殊字符，如空格、加号（+ ）、或$等。（3）网页文件名尽量使用所有小写（4）网页文件名尽量短，最长不超30个字符。 2.2.3 文本与版面风格控制标签文字格式标签特殊字符标题标签到 段落标签换行标签水平分割线标签文本标记2.2.4 超链接标记1.超链接标记2.书签标记超链接标识超链接标识 1先定义书签2链接书签2.2.5 使用图像1.插入图像2. 制作图像热区定义图片地图制作图像映射区域2.2.6 表格标记HTML中常用的表格命令有：. 定义了表格的开始和结束.定义表格标题 定义表行 定义表头 定义表元(表格的具体数据)2.2.7

33、 框架和内联框架1框架 框架应用示例： 2内联框架应用示例2.2.8 列表标签1有序列表项目1项目2项目n2无序列表项目1项目2项目n例:使用列表 使用有序列表静态网页设计与制作动态网页设计与制作使用无序列表静态网页设计与制作动态网页设计与制作 2.2.9 网页中使用音频和视频1插入音频（1）加入背景音乐（2）利用超链接播放声音（3）利用标记播放声音音乐1插入视频（1）利用超链接播放视频文件（2）利用标签插入视频 2.3从HTML转向XHTML XHTML文件整体结构XHTML语法规范2.3.1 XHTML文件的整体结构 这是显示在浏览器标题栏的网页标题 XHTML文件展示给用户的主体内容部分

34、注意：1XHTML文件的开始要声明DTD(1) Transitional：过渡的，允许继续使用HTML 4.01中已作废的标签和属性，但要符合XHTML的写法。(2) Strict：严格的，用户必须严格遵守XHTML规范，不再支持已作废的标签和属性。(3) Frameset：框架集的，如果页面中包含有框架，需要采用这种DTD。2需要为标签添加一个命名空间 标签必须带xmlns属性，例如：3. 文档主体内容由.定义的部分。 2.3.2 XHTML标签的使用规范1XHTML标签必须被关闭2标签名和属性名必须用小写3标签可以嵌套，但必须正确嵌套4属性值必须加引号5特殊符号用编码表示6属性不能简写，且

35、属性必须赋值7不要在注释内容中使用“-”2.4 CSS语法基础CSS基本语法CSS选择器如何在网页中应用样式表CSS基本属性2.4.1 CSS的基本语法Selector property:value;property: value; . 选择器声明属性属性值1.CSS语法例如：body color: blue2. 选择符组 把相同属性和值的选择符组合起来书写p，table font-size: 9pt p font-size: 9pt table font-size: 9pt 3. CSS注释：/* . */2.4.2 CSS选择器标记选择器类选择器ID选择器派生选择器伪类p color:bl

36、ue h1 color:red 标题 段落文字1.标记选择器.class1 color:blue .class2 color:red 第一类第二类无样式斜体2.类选择器ID选择器#control color:red这是什么颜色本段没有应用样式3.ID选择器派生选择器li strongfont-style: italic; font-weight: normal斜体字。strong 元素位于 li 元素内。4.派生选择器5.伪类 伪类是特殊的类，能自动被支持CSS的浏览器所识别。CSS 伪类用于向某些选择器添加特殊的效果。a:link color: #FF0000a:visited color:

37、 #00FF00a:hover font-size: 150% a:active color: #0000FF选择器优先级（1）选择器的作用顺序应当为：标记选择器、类选择器、id选择器，优先级依次提高；（2）选择器定义越具体，指向越明确，则优先级越高；（3）同一个级别的情况下，最后指定的规则优先级就越高，也就是我们通常说的就近原则。2.4.3 如何在网页中应用CSS样式表嵌入样式表 链接到外部样式表 输入外部样式表内联样式1.嵌入样式表在文档的部分用style元素插入所有规则。 H1color:maroon; Pcolor:hotpink; font-family:Arial;2.链接外部样式

38、表链入外部样式表是把样式表保存为一个样式表文件，然后在页面中区内用标记链接到这个样式表文件。设置属性。3.输入样式表输入样式表是把样式表保存为一个样式表文件，然后在页面中用import将样式表文件导入。 import sheet1.css 4.内联样式直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值。也称行内样式。设置属性本段应用了内嵌样式本段以默认样式显示。您能发现本行中的不同之处吗？2.4.4 CSS的基本属性1. 背景属性2. 文字属性3. 文本属性4. 列表属性5. 边框和边距1.背景属性属性描述属性值举例background简写属性，作用是将背景属

39、性设置在一个声明中。其它属性集合bodybackground:#ff0000 url(图片url) no-repeat fixed centerbackground-color设置背景色颜色h1background-color:yellowbody background-color:#ffff00background-attachment背景图像是否滚动scroll/fixedbody background-attachment :fixbackground-image设置为背景图像图片URLbodybackground-image:url(图片url) background-position

40、设置背景图像的起始位置百分比、长度值、top、left、right、bottom等bodybackground-position:bottom leftpbackground-position:30% 70%background-repeat设置背景图像是否及如何重复repeat-x/repeat-y/no-repeatbodybackground-repeat:norepeatpbackground-repeat:repeat-x2.文字属性属性描述属性值举例font-family设置字体系列字体名称h1font-family:Times New Romanfont-size设置字体的尺寸a

41、bsolute-size/relative-size/length/percentageh1 font-size: 300%p font-size: 100%font-style设置字体风格normal/italic/obliquep font-style: italic font-variant以小型小写字体或者正常字体显示文本normal/small-capsp font-variant: small-capsfont-weight设置字体的粗细normal/bold/bolder/lither等p.normal font-weight: normalp.thick font-weight

42、: boldfont字体属性综合设置字体、字号、字体粗细等pfont:italic bold 12px/30px arial3.文本属性属性描述属性值举例color设置文本颜色颜色p color: red direction设置文本方向ltr/rtlp direction: rtl line-height设置行高normal/数字/长度值/百分比p.small line-height: 10pxp.big line-height: 200%letter-spacing设置字符间距normal/长度值h1 letter-spacing: -0.5emh4 letter-spacing: 20px

43、text-align对齐元素中的文本left/right/center/justifyh1 text-align: centerh2 text-align: lefth3 text-align: righttext-decoration向文本添加修饰none/underline/overline/line-through/blinkh1 text-decoration: overlineh2 text-decoration: line-throughh3 text-decoration:blinka text-decoration: nonetext-indent缩进元素中文本的首行长度值/百

44、分比p text-indent: 1cmtext-transform控制元素中的字母none/capitalize/uppercase/lowercaseh1 text-transform: uppercasep.uppercase text-transform: uppercasep.capitalize text-transform: capitalizewhite-space设置元素中空白的处理方式normal/pre/nowrapwhite-space: nowrapword-spacing设置字间距normal/长度值p.spread word-spacing: 30px;4.列表属

45、性属性描述属性值举例list-style列表属性综合设置list-style-type list-style-position list-style-imageul list-style: square inside url(图片url)list-style-image将图象设置为列表项标志url、noneul list-style-image: url(图片url)list-style-position设置列表中列表项标志的位置inside、outsideul.inside list-style-position: insideul.outside list-style-position:

46、outsidelist-style-type设置列表项标志的类型none/disc/circle/squaredecimal/decimal-leading-zero/lower-roman/upper-roman等ul.disc list-style-type: discul.circle list-style-type: circleol.decimal list-style-type: decimalol.lroman list-style-type: lower-roman5.边框属性属性描述属性值border简写属性，用于把针对四个边的属性设置在一个声明。border-width 、

47、border-style、order-color border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outsetborder-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。Thin/medium/thick/lengthborder-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。Color/transparentborder-bottom简写属性，用于把下边框的所有属性设置到一

48、个声明中。border-bottom-widt、border-style 、border-color border-bottom-color设置元素的下边框的颜色。与border-color属性值相同border-bottom-style设置元素的下边框的样式。与border-style属性值相同border-bottom-width设置元素的下边框的宽度。与border-width属性值相同border-left简写属性，用于把左边框的所有属性设置到一个声明中。border-left- width、border -styleborder- colorborder-left-color设置元素

49、的左边框的颜色。与border-color属性值相同border-left-style设置元素的左边框的样式。与border-style属性值相同border-left-width设置元素的左边框的宽度。与border-width属性值相同border-right简写属性，用于把右边框的所有属性设置到一个声明中。border-right- width、border -styleborder- colorborder-right-color设置元素的右边框的颜色。与border-color属性值相同border-right-style设置元素的右边框的样式。与border-style属性值相同b

50、order-right-width设置元素的右边框的宽度。与border-width属性值相同border-top简写属性，用于把上边框的所有属性设置到一个声明中。border-bottom-width、border-style border-color border-top-color设置元素的上边框的颜色。与border-color属性值相同border-top-style设置元素的上边框的样式。与border-style属性值相同border-top-width设置元素的上边框的宽度。与border-width属性值相同CSS外边距属性属性描述属性值举例margin简写属性。在一个声明中

51、设置所有外边距属性。margin-top 、margin-right、margin-bottom、margin-lefth1 margin: 10px 2% -10px automargin-bottom设置元素的下外边距。auto/length/%h2 margin-bottom: -20px margin-left设置元素的左外边距。auto/length/%h1 margin-top: 10px margin-right设置元素的右外边距。auto/length/%h1 margin-right: 10px margin-top设置元素的上外边距。auto/length/%h2 marg

52、in-top: -20px 属性描述属性值举例padding简写属性。作用是在一个声明中设置元素的所内边距属性。padding-top、padding-right、adding-bottom、padding-lefth1 padding: 10px 2% 15px 20pxpadding-bottom设置元素的下内边距。length/%h1 padding-bottom: 10px padding-left设置元素的左内边距。length/%h1 padding-left: 10px padding-right设置元素的右内边距。length/%h1 padding-right: 10px p

53、adding-top设置元素的上内边距。length/%h1 padding-top: 10px CSS内边距属性本章小结 通过本章可以了解到标记语言的发展历史和Web标准规范，以及采用(X)HTML语言与CSS样式表结合进行Web设计有何好处。 本章重点介绍了网页设计基础语言HTML和CSS层叠样式表基础。通过本章的学习，读者可以设计简单的网页，(X)HTML语言在HTML语言基础上加了严格的限制，建议读者在初学时尽量采用(X)HTML规范来设计网页，养成良好的习惯。习题1.选择题（1）Web 标准的制定者是（ ）A.微软（Microsoft） B.万维网联盟（W3C） C.网景公司（Net

54、scape）（2）在下面的 XHTML 中，哪个可以正确地标记段落（ ）A. B. C. D.（3）下列 XHTML 中的属性和值，哪个是正确的（ ）A.width=80 B. WIDTH=“80” C.WIDTH=80 D.width=80（4）CSS 指的是（ ）A.Computer Style Sheets B.Cascading Style Sheets C.Creative Style Sheets D.Colorful Style Sheets（5）在 XHTML 中有哪些不同的 DTD （ ）A.Strict, Transitional, Frameset B.Strict, T

55、ransitional, Loose, Frameset C.Strict, Transitional, LooseC.Transitional, Loose, Frameset（6）在以下的 HTML 中，哪个是正确引用外部样式表的方法（ ）A. B. C. mystyle.cssD. （7）下列哪些是格式良好的 XHTML （ ）A. A short paragraph B. A short paragraph C. A short paragraphD. A short paragraph电子商务网页设计课件主讲： 第3章 Dreamweaver基础本章学习目标：知识目标： 熟悉Drea

56、mweaver CS5的工作环境；掌握运用Dreamweaver建立本地站点与管理站点文件的基本方法；掌握在网页中添加文字、图像、多媒体等网页元素，并实现页面间的跳转链接；能使用CSS对页面进行美化。技能目标： 综合运用Dreamweaver的各项功能结合HTML和CSS语法进行网页设计。能力目标： 培养和提升自身的审美观，合理的组织网页元素美化页面。本章主要内容：3.1 网页编辑工具Dreamweaver介绍 3.2 网页文档的基本操作 3.4 使用超链接 3.3 基本网页元素编辑3.6 站点管理和网页管理3.5 使用CSS美化网页电子商务网页设计3.1 网页编辑工具Dreamweaver介

57、绍 Dreamweaver CS5的界面2. 创建及设置本地站点1.Dreamweaver CS5的界面 首次启动Dreamweaver CS5后就可以看到图3-1所示的界面，单击“新建”下的“HTML”可以进入Dreamweaver的编辑环境，如图3-2。如果下次启动时，不希望打开此界面，可以选中窗口左下角的“不再显示”复选框。 图3-1 Dreamweaver CS5起始界面 Dreamweaver CS5的工作环境由菜单栏、插入工具栏、文档窗口、属性面板和面板组等多部分组成，如图3-2所示。1、菜单栏：由文件、编辑、查看、插入记录、修改、文本、命令、站点、窗口、帮助等菜单组成，每个菜单中

58、都包含有一系列命令。 2、插入工具栏：有常用、布局、表单、文本、HTML、应用程序、Flash元素和收藏夹8个对象面板，每个对象面板都包含一组命令按钮，利用这些按钮可以方便、快速地插入图像、表格、表单等各种类型的网页元素。 3、文档窗口：当前文档的编辑和显示区域，也是实际操作的区域。4、“属性”面板：不同的网页元素，其属性也不相同。编辑网页时，选中的对象不同，“属性”面板中的内容也会随之发生变化，从而查看和设置所选对象的属性。5、浮动面板：窗口右端包含了CSS样式、AP元素、文件、资源等一系列浮动面板，每个浮动面板又由多个功能面板组合而成，用户可以自行对其进行拆分和组合。单击还可以显示其设置对

59、话框，其中文件面板是常用的功能面板之一，如图3-3。2 .创建及设置本地站点 创建本地站点的目的 在开始制作网页之前，最好先建立一个本地站点，以便全面系统地管理网站中的网页文件和图像文件，也可以尽可能避免各种错误，如路径出错、链接不能实现等问题。初学者往往是由于文件的存放没有条理，网页经常会出现图片不能显示、链接出错等问题。因此，建议在开始制作网页之前，先建立一个文件夹用于存放网站的所有文件，再在该文件夹内建几个子文件夹，把网页中所涉及到的图片、动画等素材分门别类的放在站点文件夹中。 创建本地站点就是将本地文件夹中的文件和文件夹与Dreamweaver之间建立联系，然后通过Dreamweave

60、r来管理站点中的文件。本地站点实质上就是建立在本地硬盘上的一个文件夹，把网页中所涉及到的所有素材文件按照类别放在不同的文件夹中，以便管理网站中的文件。因此，在创建本地站点之前，应该首先在本地硬盘上建立一个文件夹。创建及设置本地站点 案例3-1：创建ncpshop本地站点 创建一个名为ncpshop的站点，本章后面用到的所有案例，都会存放在该站点中进行管理。创建站点之前，先在D盘根目录下创建一个名为ncpshop的文件（站点名和文件夹的名字可以相同也可以不同），再在ncpshop文件夹下建立images、css、js等文件夹，如图3-3所示。 创建站点文件夹的步骤如下： （1）在D盘根目录下新建