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

电子商务网页设计课件,第1章 电子商务网页设计概述,本章学习目标：,知识目标： 了解电子商务的概念；掌握互联网的基础知识；理解网页的本质； 了解网页的色彩的基本知识；了解网页制作的基本工具；了解网页设计师的执业技能。,技能目标： 掌握记事本编写网页的方法；掌握IE操作的基本能力。,能力目标： 理解建设电子商务网站的必要性。,本章主要内容：,1.3 网页设计基础,1.1 电子商务基础,1.2 网络基础,1.4电子商务网页设计的知识体系,1.3 网页设计基础,1. 什么是电子商务2. 电子商务的定义3. 电子商务的概念模型4. 电子商务的应用类型5. 企业网站在电子商务中的地位与作用,电子商务网页设计,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. Internet 2. TCP/IP 3. Internet的地址结构 4. WEB技术5. URL6.搜索引擎,任务2：了解网页设计的网络知识,电子商务网页设计,1.2 网络基础,1.2.1 Internet,互联网是由多个计算机网络相互连接而成的一个网络，它是在功能和逻辑上组成的一个大型网络。如图所示。,图 1-11 Internet示意图,Internet起源于美国早期的军用计算机网络ARPANET，是世界上第一个远程分组交换网。运行ARPANET的协议称为网络控制协议（NCP），NCP后来被分为两部分，网络协议（IP）和传输控制协议（TCP）。从NCP到TCP/IP的改变是ARPANET和Internet之间的技术分歧。从1994年起，我国Internet开始起步。人们在工作、学习和生活中越来越多地使用互联网，整个社会的运行都搭上了互联网的快车，并打上了互联网的烙印，互联网已经从单一的行业互联网发展成为深入我国各行各业的社会大众的互联网。我国的五大Internet主干网都与国外Internet形成了互联，连接的国家包括美国、英国、德国、法国、加拿大、澳大利亚、日本、韩国等,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，段与段之间用“.”隔开。 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.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和网景的 Netscape。HTTP协议HTTP协议是Web服务器使用的主要协议，它提供WWW浏览器和WWW服务器之间的通信。,Web浏览器的中文名称：网络浏览器或网页浏览器，简称浏览器；英文名称：Web Browser。浏览器是用于观看网页的工具，是一个显示网页伺服器或档案系统内的HTML文件，并让用户与这些文件进行互动的一种软件。个人电脑上常见的网页浏览器包括微软的Internet Explorer、Mozilla的Firefox、Opera和Safari。浏览器是最经常使用到的客户端程序。,网页的浏览Web浏览器,地址栏：输入URL地址。后退：退回到前面已访问过的页面。前进：转到下面的屏幕。停止：当页面内容较多或准备停止浏览时，点击按钮可停止链接。刷新：重新载入当前页面。主页：链接用户默认的主页，又叫起始页。搜索：打开浏览区的搜索窗口。“搜索”按钮实际上是在浏览区另开一个用于搜索各种网页的窗口，它是微软公司使用Excite网站的中文搜索工具。只要在搜索关键字输入框中输入要搜索的内容，按“搜索”按钮即可得到搜索的内容。收藏：打开浏览区的收藏窗口，显示收藏夹内容。历史：打开浏览区的历史窗口，显示网站浏览的历史记录。邮件：利用系统邮件程序处理邮件。打印：页面打印。编辑：利用系统中安装的程序对页面进行编辑。,3.网站（Web site）网站就是互联网上固定地发布信息的地方，它由域名和网站空间构成。网站是通过超链接形式构成的一组相关网页以及相关的文件集合。4.网页网页（Web page）是位于Web网站上的文档，是Internet中最基本的信息单位。网页一般由一个超文本文件以及相关的图形和脚本文件组成。在网站设计中，有“静态网页”和动态网页的区别。,1.2.5 URL,URL（Uniform Resource Locator统一资源定位器）是一种通用的地址格式，在Web上用来标志资源地址和查找访问资源的地址编码方法。通俗的说，URL就是Web地址，俗称“网址”。URL的一般格式为： URL的格式由下列三部分组成：（1）协议名。协议名是用来指示Web浏览器软件用什么协议来获取服务器的文件，不同的服务器需要采用不同的协议来连接。（2）主机名。主机名用来表示用户所要访问的计算机，可以为域名或IP地址（有时也包括端口号）。例如：或192.168.0.13:80等。（3）目录名或文件名。表示主机资源的具体地址。Web网站的规模越大，越复杂，路径名也会变得很长。,URL地址格式，它从左到右排列为：Internet协议、主机标识、端口、文件的主机路径和文件名。Internet协议：指客户用来访问网页的软件工具。其类型有：http:/ 指定用超文本传输协议连接，为WWW服务器专用，也是最常用的连接类型。ftp:/ 指定用文件传输控制协议连接，用于文件下载或上传。gopher:/ 指定浏览器与gopher服务器连接。telnet:/ 指定与telnet会话连接，用于远程登录。file:/ 指定连接本地文件，用于浏览本地的文件系统。,1.2.6 搜索引擎,网页设计要了解搜索引擎的主要规则。,网页与HTML2. 网页的基本要素3.网页设计色彩基础4. 网页图形基础5. 网页设计常用工具软件 6.网站建设的基本流程,电子商务网页设计,1.3 网页设计基础,1. 网页的本质html标记,如果在浏览器窗口中任意打开一个网页，然后选择“查看”菜单中的“源文件”命令，则系统会启动“记事本”程序，其中包含一些文本信息。这就是网页的本质。如下图：,结论：1）这些文本实际就是网页的本质HTML代码标记(文本信息)HTML （HyperText Markup Language，超文本标记语言）是表示网页的一种设计规范，它通过一定规范定义了网页内容的显示方法。由此可以看出，网页就是用HTML写成的文档，在Internet中可以通过浏览器程序进行浏览。2）网页文件的后缀.html或者在windows系统中简写为.htm,简单说网页是用html语言编写的程序,2. html,1、Html(hyper text markup language )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版权copyright,1.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格式。 GIFJPEGPNG,1.3.6网页设计常用工具软件,1. 网页代码编辑工具 （1）文本编辑器“记事本”是一个用来创建简单的文档的基本的文本编辑器。“记事本”最常用来查看或编辑文本(.txt)文件，但是现在许多用户使用“记事本”是创建Web页面。（2）DreamweaverDreamweaver是美国Macromedia公司开发的具有网页制作与网站管理功能的所见即所得的网页编辑软件，是专业网页设计的首选，使用Dreamweaver可以轻松地制作出精美的网页。（3）FrontPageFrontPage是美国微软公司的产品，是一套用来创建互联网站点的软件包。,2.网页图像素材处理工具（1）Photoshop Photoshop是大家公认的最好的通用平面美术设计软件。（2）Fireworks Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件。 （3）Illustrator （4） Flash Flash是美国的Macromedia公司推出的优秀网页动画设计软件。,1.3.7 网站建设的基本流程,网站的需求分析。网站规划。收集素材。设计网站的文字、图像和颜色。制作静态网页。（6）开发动态网页。（7）申请网站域名和网站空间。（8）网站的测试与发布。（9）网站的维护与推广。,网页设计工作内容2.网页设计的知识和技能3.电子商务网页设计的知识体系,电子商务网页设计,1.4 电子商务网页设计的知识体系,1.4.1网页设计工作内容,网页设计主要包含以下工作内容： （1）电子商务网站内容的商业规划。（2）网页界面的设计制作（3）网站的功能实现。（4）网站的维护。,具体来讲，电子商务网页设计工作包含以下技能：（1）商业信息架构能力（2）视觉设计（3）前端界面制作（5）团队合作能力（4）用户交互功能的实现,1.4.3电子商务网页设计的知识体系,本章小结:,任务3：了解网页设计的基本工具。,任务1：理解网页的本质。,任务2：了解网页设计的基础知识。,任务4：掌握网站建设的基本流程。,网页学习参考书和网址：,http:/,实验1、用记事本编写网页,一、实验目的：用记事本编写一简单网页，理解网页的本质。二、实验内容1、用记事本编写一简单网页的HTML语言标记代码；2、掌握HTML语言的标记代码；3、网页文件的创建、编辑及保存。三、实验步骤： （参考p12）,小结：用记事本编写网页的步骤：,1、在桌面上，单击鼠标右键新建一个记事本文档。2、双击打开进行编辑。键入html相关标记。3、单击“文件/另存为”命令，弹出“另存为”对话框，文件名后缀名html。4、选择保存类型为“所有文件”。最后单击“确定”。 桌面上出现一个网页文件图标，文件名是你的学号，此时可以通过WEB浏览器程序进行浏览。,谢谢大家,第2章网页设计语言基础,电子商务网页设计课件,知识目标：理解HTML语言组成及XHTML语法规范；掌握CSS语法,技能目标：掌握在网页中如何使用CSS样式表,能力目标：运用html语言和CSS样式表制作简单网页,本章教学目标,2.1 Web语言基础,认识HTML,认识CSS,Web标准,2.1.1认识HTML,1.HTML例2-1 简单的HTML网页制作实例。 未使用CSS的简单网页 未使用CSS的html文件 这是一张未使用CSS的简单网页！ ,| GML(1969) | SGML(1985) | XML(1998) 、HTML(1993) | XHTML(2000）,1969 1985 1993 1998 2000,2.标记语言的历史,2.标记语言的历史 HTML存在缺陷：不可扩展；只能用于信息显示 3.XML（Extensible Markup Language） 用于描述、存储和交换数据。 XML格式包含两部分：数据的文档部分；描述文档中所存储数据的数据类型的文档类型定义。 4.XHTML（ eXtensible HyperText Markup Language） 比HTML有更严格的要求，符合Web标准规范,2.1.2 认识CSS, 使用了CSS的网页 使用了CSS的html文件 这是一张使用了CSS的简单网页！ ,CSS定义,当需要修改网页中标记的格式时，只需修改样式表定义,2.1.3 Web标准,Web标准,结构标准,表现标准,行为标准,页面能提供适于打印的版本,下载与页面显示速度更快,内容能被更广的设备访问,访问者,内容能被更多的用户所访问,用户能通过样式定制界面。,采用Web标准的好处,提供打印版本，不用复制内容,更少代码和组件，容易维护,更容易被搜寻引擎搜索到,网站所有者,带宽要求降低（代码更简洁）,改版方便，不需变动页面内容,更少代码和组件，容易维护,2.2 HTML语法基础,基本语法,文档结构,常用标签,2.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.2 HTML文档的结构,1. HTML文件基本结构,2. 文档头部内容 在. 定义。头部内容主要用来定义文档的相关信息，如文档标题、说明信息、样式定义、脚本代码等。 在头部内容通常可以应用、等标签。,（1）标签 title标签用来给HTML文件添加标题，位于与圈定的范围内。 标题除了可以在通常的浏览器窗口的标题栏中显示以外，还可以作为加入收藏夹时的标题 。,（2）标签,提供网页的相关信息，如：关键字、作者、描述、网页过渡时间等多种信息。,1）网页编码 ,设置网页编码,文档类型,编码类型,常用编码类型： GB2312 - 简体中文 HZ - 简体中文 BIG5 - 繁体中文 ISO-8859-1 - 英文,2）关键字 便于搜索引擎搜索网页，关键字之间要用逗号分割。 ,关键字内容,关键字,3）自动刷新 每隔几秒钟后刷新页面内容 ,刷新,刷新间隔的秒数,4）自动跳转 设定跳转时间和地址 ,跳转后打开的文件地址,（3）base基准链接,base用来设定浏览器中文件的绝对路径，然后在文件中只需写下文件的相对位置，在浏览器中浏览时这些位置会自动附载绝对路径后面，成为完整的路径。,3. HTML主体内容 在 与标记之间，显示在浏览器的正文部分,4. HTML文件命名规则（1）网页文件扩展名用.html或.htm。（2）网页文件名使用字母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 框架和内联框架,1框架 框架应用示例： ,2内联框架应用示例,2.2.8 列表标签,1有序列表,项目1项目2项目n,2无序列表,项目1项目2项目n,例:使用列表 使用有序列表静态网页设计与制作动态网页设计与制作使用无序列表静态网页设计与制作动态网页设计与制作 ,2.2.9 网页中使用音频和视频,1插入音频（1）加入背景音乐（2）利用超链接播放声音（3）利用标记播放声音,音乐,1插入视频（1）利用超链接播放视频文件（2）利用标签插入视频,2.3从HTML转向XHTML,XHTML文件整体结构,XHTML语法规范,2.3.1 XHTML文件的整体结构, 这是显示在浏览器标题栏的网页标题 XHTML文件展示给用户的主体内容部分,注意：1XHTML文件的开始要声明DTD(1) Transitional：过渡的，允许继续使用HTML 4.01中已作废的标签和属性，但要符合XHTML的写法。(2) Strict：严格的，用户必须严格遵守XHTML规范，不再支持已作废的标签和属性。(3) Frameset：框架集的，如果页面中包含有框架，需要采用这种DTD。,2需要为标签添加一个命名空间 标签必须带xmlns属性，例如：,3. 文档主体内容由.定义的部分。,2.3.2 XHTML标签的使用规范,2.4 CSS语法基础,CSS基本语法,CSS选择器,如何在网页中应用样式表,CSS基本属性,2.4.1 CSS的基本语法,Selector property:value;property: value; . ,选择器,声明,属性,属性值,1.CSS语法,例如：body color: blue,2. 选择符组 把相同属性和值的选择符组合起来书写,p，table font-size: 9pt ,p font-size: 9pt table font-size: 9pt ,3. CSS注释：/* . */,2.4.2 CSS选择器,标记选择器类选择器ID选择器派生选择器伪类, color:blue 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: #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.链接外部样式表,链入外部样式表是把样式表保存为一个样式表文件，然后在页面中区内用标记链接到这个样式表文件。,设置属性。,3.输入样式表,输入样式表是把样式表保存为一个样式表文件，然后在页面中用import将样式表文件导入。, import sheet1.css ,4.内联样式,直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值。也称行内样式。,设置属性本段应用了内嵌样式本段以默认样式显示。您能发现本行中的不同之处吗？,2.4.4 CSS的基本属性,1. 背景属性2. 文字属性3. 文本属性4. 列表属性5. 边框和边距,1.背景属性,2.文字属性,3.文本属性,4.列表属性,5.边框属性,CSS外边距属性,CSS内边距属性,本章小结,通过本章可以了解到标记语言的发展历史和Web标准规范，以及采用(X)HTML语言与CSS样式表结合进行Web设计有何好处。 本章重点介绍了网页设计基础语言HTML和CSS层叠样式表基础。通过本章的学习，读者可以设计简单的网页，(X)HTML语言在HTML语言基础上加了严格的限制，建议读者在初学时尽量采用(X)HTML规范来设计网页，养成良好的习惯。,习题,1.选择题（1）Web 标准的制定者是（ ）A.微软（Microsoft） B.万维网联盟（W3C） C.网景公司（Netscape）（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, Transitional, 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基础,本章学习目标：,知识目标： 熟悉Dreamweaver CS5的工作环境；掌握运用Dreamweaver建立本地站点与管理站点文件的基本方法；掌握在网页中添加文字、图像、多媒体等网页元素，并实现页面间的跳转链接；能使用CSS对页面进行美化。,技能目标： 综合运用Dreamweaver的各项功能结合HTML和CSS语法进行网页设计。,能力目标： 培养和提升自身的审美观，合理的组织网页元素美化页面。,本章主要内容：,3.1 网页编辑工具Dreamweaver介绍,3.2 网页文档的基本操作,3.4 使用超链接,3.3 基本网页元素编辑,3.6 站点管理和网页管理,3.5 使用CSS美化网页,电子商务网页设计,3.1 网页编辑工具Dreamweaver介绍,Dreamweaver CS5的界面,2. 创建及设置本地站点,1.Dreamweaver CS5的界面,首次启动Dreamweaver CS5后就可以看到图3-1所示的界面，单击“新建”下的“HTML”可以进入Dreamweaver的编辑环境，如图3-2。如果下次启动时，不希望打开此界面，可以选中窗口左下角的“不再显示”复选框。,图3-1 Dreamweaver CS5起始界面,Dreamweaver CS5的工作环境由菜单栏、插入工具栏、文档窗口、属性面板和面板组等多部分组成，如图3-2所示。,1、菜单栏：由文件、编辑、查看、插入记录、修改、文本、命令、站点、窗口、帮助等菜单组成，每个菜单中都包含有一系列命令。 2、插入工具栏：有常用、布局、表单、文本、HTML、应用程序、Flash元素和收藏夹8个对象面板，每个对象面板都包含一组命令按钮，利用这些按钮可以方便、快速地插入图像、表格、表单等各种类型的网页元素。 3、文档窗口：当前文档的编辑和显示区域，也是实际操作的区域。,4、“属性”面板：不同的网页元素，其属性也不相同。编辑网页时，选中的对象不同，“属性”面板中的内容也会随之发生变化，从而查看和设置所选对象的属性。5、浮动面板：窗口右端包含了CSS样式、AP元素、文件、资源等一系列浮动面板，每个浮动面板又由多个功能面板组合而成，用户可以自行对其进行拆分和组合。单击还可以显示其设置对话框，其中文件面板是常用的功能面板之一，如图3-3。,2 .创建及设置本地站点,创建本地站点的目的 在开始制作网页之前，最好先建立一个本地站点，以便全面系统地管理网站中的网页文件和图像文件，也可以尽可能避免各种错误，如路径出错、链接不能实现等问题。初学者往往是由于文件的存放没有条理，网页经常会出现图片不能显示、链接出错等问题。因此，建议在开始制作网页之前，先建立一个文件夹用于存放网站的所有文件，再在该文件夹内建几个子文件夹，把网页中所涉及到的图片、动画等素材分门别类的放在站点文件夹中。 创建本地站点就是将本地文件夹中的文件和文件夹与Dreamweaver之间建立联系，然后通过Dreamweaver来管理站点中的文件。本地站点实质上就是建立在本地硬盘上的一个文件夹，把网页中所涉及到的所有素材文件按照类别放在不同的文件夹中，以便管理网站中的文件。因此，在创建本地站点之前，应该首先在本地硬盘上建立一个文件夹。,创建及设置本地站点,案例3-1：创建ncpshop本地站点 创建一个名为ncpshop的站点，本章后面用到的所有案例，都会存放在该站点中进行管理。创建站点之前，先在D盘根目录下创建一个名为ncpshop的文件（站点名和文件夹的名字可以相同也可以不同），再在ncpshop文件夹下建立images、css、js等文件夹，如图3-3所示。 创建站点文件夹的步骤如下： （1）在D盘根目录下新建一个文件夹。打开“我的电脑”，打开D盘，点鼠标右键，选择新建选择文件夹选项，D盘下会出现一个新建文件夹图标。 （2）输入你想要的站点名称，这里输入ncpshop。如图3-4。 注意：名称可以任意的，但尽量使用西文，不要用中文。 （3）再在该文件夹下新建图像文件夹，如images；或同时在该根文件夹下新建几个你拟设计的网页模块的文件夹。如techan、css、admin等文件夹。,创建本地站点的创建步骤如下： （1）启动Dreamweaver，选择“站点管理站点”命令，弹出“管理站点”对话框，选择“新建”按钮，打开“站点设置对象”对话框，如图3-5所示。,（2）在“站点设置对象”对话框的“站点名称”文本框内输入站点的名称“ncpshop”。（3）单击“本地站点文件夹”文本框右边的 按钮，选择站点文件夹所在的位置，即“D:ncpshop”。（4）接下来，在“站点设置对象”对话框的左边，单击“高级设置”，出现新的“站点设置对象 ncpshop”对话框，如图3-6左所示。,（5）单击右面区域中的“默认图像文件夹”文本框右边的 按钮，选择站点内图片的默认保存位置，如“D:ncpshopimages”。（6）勾选“启用缓存”复选框，可以提高链接的更新速度，默认为选中状态。（7）单击“确定”按钮，站点“ncpshop”创建成功，如图3-6右。选择“窗口文件”命令，打开“文件”面板，就能看到如图3-3所示的站点结构图。,电子商务网页设计,3.2网页文档的基本操作,1. 网页文档的基本操作,2. 设置站点首页,3. 制作网页的一般过程,1.网页文档的基本操作 新建网页文档 在“文件”面板中，用鼠标选中相应文件夹（如ncpshop），单击鼠标右键，在弹出的菜单中选择“新建文件”，这时窗口中会新增加一个名为Untitled.html 的文件，此时可以直接为其重命名，或者在该文件名上单击右键，选择“编辑重命名”改名字，如index.html，就创建了第一个网页文件，但是扩展名必须为“.html”。要编辑这个文件，用鼠标双击它就行了。 打开网页文档 在“文件”面板中双击文件名，或者在该文件名上单击右键，选择“打开”，就可以在文档窗口打开该文件，系统默认的视图方式是“设计视图”，接下来就可以在工作区对文档进行编辑了。 保存网页文档 通过上述方式创建的网页已经被保存在了站点文件夹内，编辑后再次保存时，选择“文件保存”或按【Ctrl+S】组合键即可。 注意：在编辑网页时，如果文档窗口文件标签后有一个“*”，则表示当前文档没有保存，此时应当按下【Ctrl+S】键或者单击“文件保存”命令，对网页进行保存。 关闭网页文档 完成对网页文档的编辑、保存后，可以通过“文件关闭”命令，或在文本窗口上的 关闭文档。,2.设置站点首页,每个网站都包含至少一个网页，其中有一个页面包含所有跳转到其他页面的链接，它就是首