电子商务网页设计与制作第2版PPT完整全套教学课件

SAMPLE1.1知识链接项目一：赏析和规划电子商务网站—了解电子商务网站全套PPT教学课件网页的构成元素1电子商务网站的概念和特点2电子商务网站的视觉营销3电子商务网站的开发流程4知识链接5电子商务网站的分类1网页的构成元素ABOUTME

网页中常见的构成元素有文本、图像、超链接、动画、声音、视频、动画、表单、程序等，如图所示Logo作为公司或网站的标志，起着非常重要的作用。一个制作精美的Logo不仅可以很好地树立公司形象，还可以传达丰富的产品信息。LOGO网站作为一种全新的、已经为大众所熟悉和接受的媒体，正在逐步显示出其特有的、蕴藏深厚的广告价值空间。广告条导航是网站设计中不可缺少的基础元素之一，它是网站信息结构的基础分类，也是浏览者进行信息浏览的路标。导航菜单文本和图像是网页中最基本的构成元素，这两种基本的构成元素都是必不可少的，它们是向浏览者传达信息最直接、最有效的方式。文本和图像随着互联网的迅速发展，网络速度的提高，在网页中出现了越来越多的多媒体元素，包括动画、声音、视频等。动画表单是功能型网站中经常使用的元素，是网站交互中最重要的组成部分。在网页中，小到搜索框与搜索按钮，大到用户注册表单及用户控制面板，都要使用到表单及其表单元素。表单2电子商务网站的概念和特点商品展示页面信息量大、图片多①网站注册登录简单化②通过相关产品的交叉销售提高销售额③安全与快捷的多种支付方式④

电子商务网站是指一个企业、机构或公司在互联网上建立的站点，其目的是为了宣传企业形象、发布产品信息、宣传经济法规、提供商业服务等。

⑤具备信息检索与筛选功能⑥具备订单信息确认及取消功能概念：功能：3电子商务网站的分类信息服务类①广告类②管理类③综合类④电子商务网站的种类有很多种,按照其功能的不同可以分为五类：⑤交易类4电子商务网站的视觉营销

主题突出原则

整体设计原则

内容与形式统一原则准确表达与良好体验原则5电子商务网站的开发流程SAMPLETHANKSSAMPLE项目一：赏析和规划电子商务网站—了解电子商务网站任务描述——分析电子商务网站首页1技术引进——分析页面结构与色彩2新手试炼——赏析电子商务页面341.2任务一赏析电子商务网站任务实施——提高用户体验的要素1任务描述——分析电子商务网站首页ABOUTME

从网站的功能栏目、色彩和页面布局进行分析，帮助读者快速了解电子商务网站与普通网站在页面上的不同。2技术引进——分析页面结构与色彩ABOUTME

网页页面结构种类很多，常见的有满版型、分割型、骨骼型、曲线型、中轴型、对称型、倾斜型、焦点型、自由型和三角型等。页面结构ABOUTME

页面顶部和左右两侧布局页面导航。导航的任务就是清楚地告诉用户将前往信息架构中的什么地方。最初可以只是指定链接，随着进一步设计导航，最终会把用户所做的一切都展示在狭小的屏幕空间里。导航设置结构导航表示网站内容的层次结构，通常会采用全局和局部导航的形式。全局导航一般是网站的顶层类别，通过全局类型很容易地访问到网站中最重要的内容。1)结构导航关联导航将一个页面与包含类似内容的其他页面相关联，特别适合“试探的查找”，并且可以帮助用户发现他们“原本不知道”但却应该知道的信息。2)关联导航可用性导航实现了页面与帮助访问者使用网站本身的特性之间的关联。例如会员登录、访问用户信息和搜索等功能。3)可用性导航ABOUTME

网页色彩是树立网站形象的关键之一，很多网页都以其完美的色彩搭配起到令人过目不忘的效果，由此可见，颜色的使用在网页的制作中是非常重要和关键的。色彩分析3任务实施——提高用户体验的要素ABOUTME

网页尺寸的设定和书本不同，书本的开本基本是固定的，作者和读者看到的尺寸都是一样的。而网页的尺寸受限于两个因素：显示器的尺寸和浏览器软件。用户在不同的显示器上或使用不同的浏览器都会产生不同的体验。1.确定网页的尺寸ABOUTME

用户在浏览网页的时候，总是希望可以快速找到自己需要的内容，否则用户通常会选择马上离开。合理的页面布局可以使用户快速发现网站的核心内容和服务。2.合理的页面布局从上到下，从左到右，按照内容重要性的优先级有序放置①重要的内容一定要放在页面显眼的位置②同级页面布局要统一③合理的应用嵌套④⑤建立清晰的视觉层次感⑥合理地体现视觉关联2.合理的页面布局4新手试炼——赏析电子商务页面Loremipsumdolorsitamet,consectetueradipiscingelit.Maecenasporttitorconguemassa.Fusceposuere,magnasedpulvinarultricies,puruslectusmalesuadalibero,sitametcommodomagnaerosquisurna.ADDYOURPOINTHERELoremipsumdolorsitamet,consectetueradipiscingelit.Maecenasporttitorconguemassa.Fusceposuere,magnasedpulvinarultricies,puruslectusmalesuadalibero,sitametADDYOURPOINTHERELoremipsumdolorsitamet,consectetueradipiscingelit.Maecenasporttitorconguemassa.Fusceposuere,magnasedpulvinarultricies,puruslectusmalesuadalibero,sitametADDYOURPOINTHERE

此页面首页采用扁平化设计风格，采用通栏的布局方式。主色采用Logo的颜色红紫色。辅色为主色的补色黄绿色。整个页面对比强烈，主题明确。

通过前面的任务实施，读者应该学会如何赏析一个电子商务网页了。接下来通过一个小案例巩固一下所学内容。

此页面商品列表页布局紧凑。使用红色文字和红色按钮将页面中重点信息突显出来，便于浏览者查看。

此页面产品详情页采用左右结构，明亮的红色和黄色将整个页面分割成几部分，内容清晰，对比明确。SAMPLETHANKSSAMPLE项目一：赏析和规划电子商务网站—了解电子商务网站任务描述——分析电子商务网站结构1技术引进——完成电子商务网站线框图2新手试炼——电子商务网站会员页面设计341.3规划“学设计吧”电子商务网站任务实施——设计电子商务网站1任务描述——分析电子商务网站结构ABOUTME

该项目为视频教程网站，用户注册为会员后，通过付费的方式购买单节课程或成为网站VIP观看全部视频。按照网站内容，将网站分为首页、在线课程、书籍光盘和图文教程4个栏目，ABOUTME首页中主要用来显示最新发布或指定的视频、书籍和教程。让浏览者第一时间看到网站最新更新和最想推广的内容。同时用户可以通过首页中的各种链接，快速到达想要了解的内容。首页ABOUTME该页面中采用罗列的方式，展示网站中的各类在线课程。通过建立分类链接，便于用户查找想要观看的课程视频。在线课程ABOUTME该页面与在线课程表现形式一致，采用罗列的方式将图书展示给用户。为了便于查找，将书籍按照行业和软件进行了分类。书籍光盘ABOUTME

该页面主要以图片和文字的形式向用户展示设计相关知识。同样也对相关内容进行了分类，用户可以以行业和软件进行查找。图文教程2技术引进——完成电子商务网站线框图

在开始设计制作页面前，通常会先绘制网站原型的线框图，帮助设计师平衡保真度和速度。绘制的时候不用在意细节，一定要表达出设计思想，不要漏掉任何重要的部分。

首页面内容较多，包含大量的图片和文字。为了保证各功能的独立性，还要便于用户浏览，页面采用了中轴线的布局方式，将图形、文字以水平或垂直的方式排列，给人稳定、平静、含蓄的感觉。3任务实施——设计电子商务网站ABOUTME该页面是一个培训类网站，故可以选择代表科技的蓝色和代表教育的绿色作为主色，但考虑网站中的视频教程多为互联网类的教材，所以排除了绿色，选择了蓝色作为主色。但蓝色颜色过于深沉，与设计行业多姿多彩的寓意相违背，所以提高蓝色的明度，选择较为活泼清新的青色作为网站的主色，确定主色ABOUTME主色确定后，接下来确定辅色。通常情况可以选择同色搭配、临色搭配和补色搭配三种方式。同色搭配可以实现风格整体风格一致的效果，但对比不强烈。临色搭配可以实现丰富的层次感，但对于需要突出的内容表现不足。确定辅色ABOUTME页面中的文本，通常都是要黑色或者白色。标题文字或重点突出文字使用辅色。纯黑的文字过于生硬，故页面中使用深灰色作为文本的颜色。文本颜色完成设计主页设计稿二级页设计稿完成设计项目页设计稿详情页设计稿4新手试炼——电子商务网站会员页面设计ABOUTME

会员系统页面与整个页面风格保持一致。会员系统是网站中最重要的功能，也是网站正常运营的保障。一般设计的较为简洁，主题明确，避免受到其他内容影响。接下来读者根据前面所学内容设计会员页面。SAMPLETHANKSSAMPLE2.1知识链接项目二：创建并管理电商网站站点——掌握网站搭建基础········电子商务网站制作相关术语1远程站点和本地站点2站点规划34知识链接统一资源定位器URL在开始创建站点前,需要了解一些制作电子商务网站的术语。充分理解相关术语有利于用户网站站点的建立及以后章节内容的学习。1电子商务网站制作相关术语ABOUTME

用户进入某个电子商务网站首先看到的网页称为“主页”，也称为“首页”。首页承载了一个网站的所有主要内容，顾客可以按照首页中的分类来精确、快速地找到自己想要的商品或服务。网站则是各种内容网页的集合。商城类的电子商务网站内容比较庞大复杂（例如天猫、易趣和洋码头等），如图2-2所示。图2-2首页index.html茶叶tea.html茶礼gift.html茶与生活space.html品牌故事about.html品质优势trait.html联系我们contact.html图2-3企业形象类的电子商务网站一般只有几个页面，都是由最基本的网页元素组合在一起的，这类网站主要以宣传企业文化和企业的相关产品为目的，一般不提供在线购买功能。图2-4大家熟悉的WWW,也就是WordWideWeb——万维网，万维网是互联网的一个子集，以超文本(Hypertext)超媒体（Hypermedia)技术为基础，为全世界用户提供信息，如图2-4所示。超文本传输协议HyperTextTransferProtocol（HTTP），是访问Web上资源必须遵循的规范。1.协议统一定位符UniformResourceLocators（URL）用来标示Web页面中的资源，WWW按统一命名方案访问Web页面资源。2.地址3.HTMLHTML是超文本标记语言的简称，使用超文本标记语言创建的文档称为HTML文档，扩展名为.htm或.html，可以在Web上直接访问。HTML文档使用HTML标记和元素建立页面并将其保存到服务器上，与互联网连接。WWW共享资源共有3种机制，分别为协议、地址和HTML。提示：使用浏览器请求某些信息时，Web服务器也会做出相应的请求，它会将请求的信息发送至浏览器。浏览器将会处理从服务器发来的信息。浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。目前比较流行网页浏览器有InternetExplorer、Edge、Firefox、Safari，Opera、GoogleChrome，如图2-6所示。浏览器图2-6浏览器虽然很多，但如果按照浏览器内核区分，却只有4种。具体分类如表2-1所示。内核分类功能介绍使用该内核浏览器Trident该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的。IE浏览器、360浏览器、遨游浏览器、百度浏览器、腾讯TT浏览器、搜狗浏览器等GeckoGecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。Firefox浏览器Webkit苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。GoogleChrome、AppleSafari、遨游浏览器3BlinkBlink是一个由Google和OperaSoftware开发的浏览器排版引擎。Chrome（28及往后版本）Opera（15及往后版本）表2-1浏览器内核2远程站点和本地站点站点指的是一个文件夹，该文件夹中保存着网站的网页文件、图像文件、动画文件、媒体文件等内容。站点文件夹不是简单的文件堆积，它的结构决定着文件间链接信息的表达，按照其功能的不同，可以分为远程站点和本地站点。

远程站点本地站点用户在Internet上浏览各种网站，其实就是用浏览器打开存储于Internet服务器上的HTML文档与其他相关资源。这种存储于Internet服务器上的站点和相关文档称作远程站点。本地站点通常指的是远程站点关联的一个本地文件夹。该文件夹的主要目的是便于设计制作人员在本地编辑网站，然后再上传到远程站点中。为了保证站点的正确性，该文件夹具有和远端站点上相同的文件结构。统一资源定位器是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。3统一资源定位器URL统一资源定位器是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。基本URL包含协议、服务器名称（或IP地址）、路径和文件名。如协议://授权/路径/查询协议用来告诉浏览器如何处理将要打开的文件。最常用模式就是超文本传输协议（HypertextTransferProtocol，缩写为HTTP），这个协议可以用来访问网络。除了HTTP协议外，其他协议如表2-2所示。文件所在的服务器的名称或IP地址，后面是到达这个文件的路径和文件本身的名称。服务器的名称或IP地址后面有时还跟一个冒号和一个端口号。路径部分包含等级结构的路径定义，一般来说不同部分之间以斜线（/）分隔。询问部分一般用来传送对服务器上的数据库进行动态询问时所需要的参数。表2-2URL协议协议功能协议功能https用安全套接字层传送的超文本传输协议File当地电脑或网上分享的文件ftp文件传输协议newsUsenet新闻组mailto电子邮件地址gopherGopher协议ldap轻型目录访问协议搜索telnetTelnet协议绝对URL相对URL

绝对URL显示文件的完整路径，这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关。例如。这就是个绝对地址。相对URL以包含URL本身的文件夹的位置为参考点，描述目标文件夹的位置。如果目标文件与当前页面（也就是包含URL的页面）在同一个目录，那么这个文件的相对URL仅仅是文件名和扩展名，如果目标文件在当前目录的子目录中，那么它的相对URL是子目录名，后面是斜杠，然后是目标文件的文件名和扩展名例如images/back.jpg这就是一个相对地址。提示：一般来说，对于同一服务器上的文件，应该使用相对URL，除了更容易输入以外，当文件上传到远程服务器时，每个文件的相对位置保持不变，链接就仍然有效。如同做事情之前要先计划一样，在创建网站前，最关键的事情无外乎规划整个站点的结构了。如果要制作的网站规模非常大，分类非常多，或者栏目繁杂，这时就更需要有充分的时间做好规划工作了。4站点规划

如同做事情之前要先计划一样，在创建网站前，最关键的事情无外乎规划整个站点的结构了。如果要制作的网站规模非常大，分类非常多，或者栏目繁杂，这时就更需要有充分的时间做好规划工作了。这就是说，把网站中相关的、属于同样栏目、具有同样含义的文件放在各自的目录中。比如一般的企业形象类电子商务网站，通常都包含“企业简介”“服务项目”或“主要产品”“人才招聘”“联系我们”等栏目，均可以放在同一个文件夹下，而真正涉及网站具体内容的部分，再分别放置在各自的文件夹中。1.划分站点目录这很容易让人理解，只有远程服务器与本地的站点结构相同时，才会使在本地制作的站点原封不动地显示出来。用在FTP上传文件时需要这样做，如果使用Dreamweaver自身的上传功能，Dreamweaver会为我们做好这一切。3.本地站点和远程服务器站点使用统一目录结构正所谓“分门别类”，如今的电子商务网站，除了具有标准的HTML格式的文件外，其他如图像格式文件、动画文件、Mp4格式文件和JS文件等均司空见惯。这些不同种类的文件可以放在各自的文件夹中，以便于管理和调用。最常见的就是把网站的所有图片或网站中某个栏目的所有图片放在一个叫作images的文件夹下，而在国外众多网站的结构管理中，经常把非HTML文件放在一个叫作Assets的二级目录下，或者是每个分类下再建立Assets目录。2.不同种类的文件放在不同的文件夹中SAMPLETHANKSSAMPLE2.2任务一创建网站文件结构项目二创建并管理电子商务网站站点ABOUTME图2-7

再精美的网站都是要从构建站点开始，在本地磁盘上建立的站点叫作本地站点，如果想让更多的人浏览到自己的网站，就必须把网站上传到Web服务器上，而处在Web服务器上的站点叫作远程站点，建立完善的站点，疏通网站的结构与脉络对网站的建设具有重要的意义，如图2-7所示。首页会员图片CSS视频图2-7任务描述——创建本地静态站点1技术引进——了解“站点设置对象”对话框2新手试炼——创建小型电子商务网站站点34任务实施——站点文件的优化与管理

2.2任务一创建网站文件结构1任务描述——创建本地静态站点ABOUTME

站点的类型有很多，包括本地静态站点和远程动态站点等。对于网页初学者来说，创建本地静态站点是很关键的，使用Dreamweaver可以轻松创建本地静态站点。本任务将在Dreamweaver中使用“新建站点”的功能创建一个静态站点，使用“管理站点”优化站点结构。帮助读者掌握创建本地站点的方法的同时，理解本地站点的基本结构，如图2-8所示。图2-8在创建站点之前，需要对站点的结构进行规划，特别是大型网站的站点，更需要对站点有好的规划，好的站点规划可以使网站的结构目录更加清晰。完成站点的创建后，可以在站点中进行新建文件夹、新建页面等基本操作，以及在站点中复制文件和调整文件的位置等。通过Dreamweaver中的站点功能可以更好地管理整个网站中的所有文件。2技术引进——了解“站点设置对象”对话框要创建本地静态站点，首先需要打开“站点设置对象”对话框，执行“站点>新建站点”命令，即可弹出“站点设置对象”对话框，如图2-9所示。或者执行“站点>管理站点”命令，在弹出的“管理站点”对话框中单击“新建站点”按钮，同样可以弹出“站点设置对象”对话框。图2-9

Dreamweaver站点是网站中使用的所有文件和资源的集合。Dreamweaver站点通常包含两个部分，本地站点文件夹和远程文件夹。本地站点文件夹用来存储和处理本地文件。远程文件夹用来在Web服务器上保存与本地站点文件夹相同结构的文件。如果用户想要使用Git管理站点文件，可以选中“将Git存储库与此站点关联”复选框。如果用户首次使用Git，而且希望将要创建的站点与Git关联，请选择“初始化为Git存储库”。如果用户已经注册了Git用户名，并且希望将您要创建的站点与现有存储库关联，请选择“使用URL克隆现有Git存储库”。提示：Git全称GitHub，是一个面向开源及私有软件项目的托管平台，用来存放软件代码与内容的共享虚拟主机服务。用户可以通过登录官网/完成用户注册、下载客户端等操作，如图2-10所示。提示：用户如果希望在Dreamweaver中使用Git，则需要先安装Git，再启动Dreamweaver。如果用户已经安装了Git，可以在首选项中指定自定义路径。POWERYOURPOINT图2-1001执行“站点”→“新建站点”命令。弹出“站点设置对象‘对话框。在”站点名称文本框中输入站点的名称，如图2-11所示。02单击“本地站点文件夹”文本框后面的“浏览”按钮，弹出“根文件夹”对话框，浏览到本地站点的位置，如图2-12所示。03单击“选择文件夹”按钮，确定本地站点根文件的位置，单击“保存”按钮，即可完成本地站点的创建，如图2-13所示。04执行“窗口>文件”命令，打开“文件”面板，在“文件”面板中显示出刚创建的本地站点，如图2-14所示。

练一练——在“代码”视图中编写HTML页面源文件：源文件\项目二\2-1.html图2-11图2-12图2-13图2-14操作视频：视频\项目二\创建本地静态站点.MP4完成站点创建后，接下来就可以根据项目的不同创建不同的站点结构了。通常一个网站中包含很多内容，为了便于管理，通常会对文件进行分类保存。03在站点名称位置单击右键，在弹出的快捷菜单中选择“新建文件”命令，新建一个index.html文件，如图2-18所示。练一练——在站点中创建文件结构01执行“窗口”→“文件”命令。打开“文件”面板，在站点名称位置单击右键，在弹出快捷菜单中选择”新建文件夹”命令，如图2-15所示。02将文件夹命名images，用来保存站点中所有的图片文件，如图2-16所示。04在站点名称位置单击右键，在弹出的快捷菜单中选择“新建文件”命令，新建一个index.html文件，如图2-18所示。03使用相同的方式，可以创建用来存储样式文件和视频文件的文件夹，完成效果如图2-17所示。05双击index.html文件，即可进入页面编辑状态，如图2-19所示。用户可以在该页面中完成完整首页面的制作。图2-15图2-16图2-17图2-18图2-19提示：除了在“文件”面板中创建站点文件结构。用户可以直接在windows资源管理器中创建站点文件夹和文件。

3任务实施——站点文件的优化与管理03在站点名称位置单击右键，在弹出的快捷菜单中选择“新建文件”命令，新建一个index.html文件，如图2-18所示。01执行“站点>管理站点”命令，如图2-20所示。在弹出的“管理站点”对话框，如图2-21所示。03单击“编辑当前选定的站点”按钮,即弹出“站点设置对象”对话框，用户可以在该对话框中修改站点信息，如图2-23所示。04单击“复制当前选定的站点”按钮，即可复制选中的站点并得到该站点的副本，如图2-24所示。图2-20图2-21图2-22图2-23图2-24提示：这里删除的只是在Dreamweaver中创建的站点，而该站点中的文件并不会被删除。

站点创建完成后，用户可能会有修改站点信息的需求，也有可能需要更换操作设备。可以通过站点管理的功能完成对站点文件的优化与管理。02用户可以在“您的站点”列表中看到在Dreamweaver中创建的所有站点。单击“删除当前选定的站点”按钮,弹出提示对话框，单击“是”按钮，即可删除当前选中的站点,如图2-22所示。03在站点名称位置单击右键，在弹出的快捷菜单中选择“新建文件”命令，新建一个index.html文件，如图2-18所示。05单击“导出当前选定的站点”按钮，用户可以在“导出站点”对话框中选择导出站点的位置，如图2-25所示。单击“保存”按钮即可将当前站点导出。06单击“导入站点”按钮，用户可以在任何一台设备上导入站点，如图2-26所示。用户如果对于设置站点有疑问，可以单击“帮助”按钮，如图2-27所示。图2-25图2-26图2-274新手试炼——创建小型电子商务网站站点4在Dreamweaver中指定myweb文件为站点文件夹。通过前面案例的制作，读者应该掌握基本的页面布局方法和制作。接下来通过一个小案例巩固一下所学内容。01在windows资源管理器中，新建一个名为myweb的文件夹。02分别在myweb文件夹中新建images和style文件夹。03新建一个“文本文档”，修改文件名为index.html。04在Dreamweaver中指定myweb文件为站点文件夹。SAMPLETHANKSSAMPLE2.3任务二设置远程站点服务器信息项目二创建并管理电子商务网站站点ABOUTME图2-7

用户可以通过Dreamweaver连接远程服务器，通过设置“服务器”选项卡中的相关选项，将站点中的文件上传到远程服务器，如图2-28所示。图2-28任务描述——设置“服务器”选项1技术引入——设置“站点设置对象”对话框2新手试炼——站点中的操作34任务实施——设置远程服务器

2.3任务二设置远程站点服务器信息5项目小结1任务描述——设置“服务器”选项

ABOUTME

在Dreamweaver中完成本地站点的创建后，用户可以通过使用FTP的方式上传站点文件到远程服务器。通过在“站点设置对象”对话框中设置远程服务器的各项参数，用户可以直接在“文件”面板中实现本地站点和远程站点之间的数据交换，如图2-29所示图2-292

技术引入——设置“站点设置对象”对话框

用户需要将站点中的Dreamweaver上传到远程服务器，首先要使用Dreamweaver连接远程服务器。执行“站点>新建站点”命令，在弹出的“站点设置对象”对话框中单击左侧的“服务器”选项，即可进入服务器设置选项,如图2-30所示。单击“添加新服务器”按钮，弹出设置服务器对话框，如图2-31所示。图2-30图2-31对话框中包含“基本”和“高级”两个选项。“基本”选项下包含了服务器名称、连接方法、FTP地址、用户名和密码等选项，可以对服务器的基本选项进行设计。1.“基本“选项卡（1）服务器名称在该文本框中可以指定服务器的名称，该名称可以是用户任意定义的名称。（2）连接方式在该下拉列表中可以选择连接到远程服务器的方法，在Dreamweaver中提供了6种连接远程服务器的方式，如图2-32所示。（3）FTP地址在该文本框中输入要将站点文件上传到其中的FTP服务器的地址。FTP地址是计算机系统完整Internet名称。注意，在这里需要输入完整的FTP地址，并且不要输入任何多余的文本，特别是不要在地址前面加上协议名称图2-32图2-33（4）端口端口21是接收FTP连接的默认端口。可以通过编辑右侧的文本框更改默认的端口号。（5）用户名/密码分别在“用户名”和“密码”文本框中输入用于连接到FTP服务器的用户名和密码，选中“保存”复选框，可以保存所输入的FTP用户名和密码。（6）根目录在该选项的文本框中输入远程服务器上用于存储站点文件的目录。在有些服务器上，根目录就是首次使用FTP连接到的目录。用户也可以链接到远程服务器，如果在“文件”面板中的“远程文件”视图中出现像public_html、www或用户名这样名称的文件夹，它可能就是FTP的根目录。（7）WebURL在该文本框中可以输入Web站点的URL地址（例如）。Dreamweaver使用WebURL创建站点根目录相对链接。单击“更多选项”选项前的三角形按钮，可以在FTP设置窗口中显示出更多的设置选项，如图2-33所示。图2-34（8）使用被动式FTP如果代理配置要求使用被动式FTP，可以选中该选项。（9）使用IPv6传输模式如果使用的是启用IPv6的FTP服务器，可以选中该选项。IPv6指的是第6版Internet协议。（10）使用以下位置中定义的代理如果选中该复选框，则将指定一个代理主机或代理端口。单击该选项后的“首选参数”链接，可以弹出站点的“首选参数”对话框，在该对话框中可以对代理主机进行设置。(11)使用FTP性能优化默认选中该选项，对连接到的FTP的性能进行优化操作。(12)使用其他的FTP移动方法如果需要使用其他一些FTP中移动文件的方法，可以选中该选项。在其相关的设置对话框中都有一个“高级”选项卡，无论选择哪种连接方式，其“高级”选项卡中的选项都是相同的，单击“高级”选项卡，切换到“高级”选项卡中，如图2-34所示。图2-35(1)维护同步信息如果希望自动同步本地站点和远程服务器上的文件，可以选中该复选框。(2)保存时自动将文件上传到服务器如果希望在本地保存文件时，Dreamweaver自动将该文件上传到远程服务器站点中，可以选中该复选框。(3)启用文件取出功能选中该复选框，可以启用“存回/取出”功能，则可以对“取出名称”和“电子邮件地址”选项进行设置。(4)服务器类型如果使用的是测试服务器，则可以从“服务器模型”下拉列表中选择一种服务器模型，在该下拉列表中提供了8个选项可供选择,如图2-35所示。(5)将文件自动推送到测试服务器如果使用的是测试服务器，选中该复选框，Dreamweaver将会自动将文件推动到测试服务器中。(6)始终自动保存相关文件选中该复选框，Dreamweaver将自动保存相关文件。2.”高级“选项卡3任务实施——设置远程服务器05连接成功后，弹出提示对话框，提示Dreamweaver成功连接你的Web服务器，如图2-40所示。06在“文件”菜单中单击“连接到远程服务器”按钮，与远程服务器连接，用户可以在当前面板中进行各种操作，如图2-41所示。图2-40图2-414新手试炼——站点中的操作在网站制作的过程中，常常需要对站点中的文件夹或文件进行操作，包括文件夹和文件的移动、复制和重命名删除等，下面就通过实战练习介绍如何对站点中的文件夹和文件进行操作。

01选择需要移动或复制的文件夹，单击鼠标右键，选择“编辑>剪切”命令。02在需要粘贴的位置单击鼠标右键，选择“编辑>粘贴”命令，即可完成相应的操作。

03在“文件”面板中选中需要进行移动的文件夹或文件，按住鼠标左键不放，拖动到目标文件夹中，然后释放鼠标。04选中要删除的文件或文件夹，然后在鼠标右键菜单中选择“编辑>删除”命令或按Delete键。5

项目小结项目小结本章主要讲解了Dreamweaver中站点的创建和管理，站点对于网站来说就好像盖房子需要打好地基一样，创建站点是网站设计的第一步，也是很重要的一步，这将有利于为网站的建设提供良好的结构和布局，并养成一个好的工作习惯。THANKSSAMPLE项目三使用HTML编写页面——搭建页面底层的基础电子商务网站设计建设原则1电子商务页面设计规则2HTML的基本结构343.1知识链接了解HTML51电子商务网站设计建设原则系统结构要清晰1选择熟练的技术2使用缓存3适当分析45细化网站功能2电子商务页面设计规则页面易读1容易浏览2风格布局保持一致3页面快速下载45方便查找3了解HTML5ABOUTME

HTML是最基本的网页制作语言，Dreamweaver等专业网页制作软件都是以HTML语言为基础的。HTML通过应用标签可以使页面文本显示出预期的效果，也就是在文本文件的基础上，加上一系列的标记语言，形成后缀名为htm或html的文件。HTML

HTML语言作为一种网页编辑语言，易学易懂，能制作出精美的网页效果，其主要功能如下。1)利用HTML语言格式化文本。如设置标题、字体、字号、颜色，设置文本的段落、对齐方式等。2)利用HTML语言可以在页面中插入图像。使网页图文并茂，还可以设置图像的属性。如大小、边框、布局等。3)HTML语言可以创建列表，把信息用一种易读的方式表现出来。4)利用HTML语言可以建立表格。表格为浏览者提供了快速找到需要信息的显示方式。5)利用HTML语言在页面中加入多媒体。可以在网页中加入音频、视频和动画，还能设定播放的时间和次数。6)HTML语言可以建立超链接。通过超链接检索在线的信息，用鼠标单击，就可以链接到任何一处。7)利用HTML语言还可以实现交互式表单、计数器等。4HTML的基本结构ABOUTME<html>……</html>：告诉浏览器HTML文件开始和结束，其中包含<head>和<body>标签。HTML文档中所有的内容都应该在两个标签之间，一个HTML文档总是以<html>开始，以</html>结束的。<head>……</head>：HTML文件的头部标签。<body>……</body>：HTML文件的主体标签，绝大多数内容都放置在这个区域中。通常它在</head>标签之后，和</html>标签之前。HTML的基本结构5掌握HTML的标签ABOUTME1.普通标签ABOUTME2.空标签ABOUTME3.文本标签ABOUTME4.图像标签ABOUTME5.格式标签ABOUTME6.表格标签ABOUTME7.超链接标签ABOUTME8.分区标签SAMPLETHANKSSAMPLE项目三使用HTML编写页面——搭建页面底层的基础任务描述——了解页面基本结构1技术引进——在Dreamweaver中编写HTML2新手试炼——制作社区生活页面343.2任务一布局学设计吧“关于我们”页面任务实施——制作关于我们页面结构1任务描述——了解页面基本结构ABOUTME

在“关于我们”页面依次插入4个“DIV”，并使用CSS样式分别设置每个DIV的Width和Height，设置完的页面布局如图所示2技术引进——在Dreamweaver中编写HTMLABOUTME在Dreamweaver的编辑环境中，主要有3种编辑视图的方式，分别为代码视图、拆分视图和实时视图。代码视图主要用于编辑页面的HTML代码；拆分视图则可以一边对页面进行可视化编辑制作，一边查看相应的HTML代码；实时视图则用来显示页面的实时效果，便于用户随时查看制作效果。

为了符合时下的制作方法DreamweaverCC2018将设计视图和实时视图组合在一起，如图3-9所示。有需要的用户可以自行选择；设计视图用于在Dreamweaver中进行可视化的页面编辑制作。ABOUTME01执行“文件>新建”命令，弹出“新建文档”对话框，设置如图所示。单击“创建”按钮，创建一个HTML页面。单击文档工具栏上的“代码”按钮，转换到“代码”视图中，可以看到页面的代码，如图所示。练一练——在“代码”视图中编写HTML页面“新建文档”对话框“代码”视图ABOUTME02页面HTML代码中的<title>与</title>标签之间输入页面标题，如图所示。在<body>与</body>标签之间输入页面的主体内容，如图所示。练一练——在“代码”视图中编写HTML页面输入页面标题输入页面主体内容ABOUTME03执行“文件>保存”命令，弹出“另存为”对话框，将其保存为“光盘\源文件\项目三\3-1.html”，如图所示。完成第一个HTML页面的制作，在浏览器中预览该页面，效果如图所示。练一练——在“代码”视图中编写HTML页面保存页面页面预览效果ABOUTME

Dreamweaver使用了RoundtripHTML技术，使得用户在修改HTML代码的同时，也可以在设计视图中修改网页，并且在设计视图中的操作结果会立刻以源代码的形式显示在代码视图中。同样，在代码视图中可以直接编辑HTML源代码，当用鼠标单击设计视图中的任意位置时，会立刻看到相应的编辑结果。3任务实施——制作关于我们页面结构ABOUTME01执行“站点>新建站点”命令，如图所示。在弹出的“站点设置对象”对话框中设置站点名称和本地站点文件夹，如图所示。新建站点设置站点ABOUTME02单击“保存”按钮，在“文件”面板中单击右键，创建如图所示的文件夹。在CSS文件上单击，新建一个div.css文件，如图所示。创建文件夹新建CSS文件ABOUTME03在站点名称上单击右键，选择“新建文件”命令，新建一个about.html文件，如图所示。双击进入about.html文件，如图所示。创建HTML文件进入文本编辑环境ABOUTME04单击CSS设计器下的按钮，选择“附加现有的CSS文件”选项，如图所示。在弹出的“使用现有的CSS文件”对话框中选择链接站点中div.css文件，如图所示。单击“确定”按钮。附加现有的CSS文件使用现有的CSS文件对话框ABOUTME05单击“插入”面板上的Div选项，在页面中新建一个Div，如图所示。在底部源代码视图中指定其ID为header，如图所示。新建一个Div指定Div的IDABOUTME06切换到div.css文件中，为header创建样式，定义其宽度和高度，如图所示。定义完成后div效果如图所示。创建CSS样式页面效果ABOUTME07单击“插入”面板上的Div选项，选择“之后”选项，如图所示。在header后面插入一个div，并将其命名为crumbs，如图所示。选择“之后”选项指定Div的IDABOUTME08切换到div.css文件中，为crumbs创建样式，定义其宽度和高度，如图所示。定义完成后div效果如图所示。定义main的宽和高div效果ABOUTME09继续使用相同的方法,在crumbs后面插入一个id为main的div。切换到div.css文件中，为main创建样式，定义其宽度和高度，如图所示。设置main的样式ABOUTME10继续使用相同的方法，在main后插入一个id为bottom的div，并在div.css文件中创建如图所示样式。设置bottom的样式11执行“文件>保存”命令，将文件保存，完成页面结构的搭建。4新手试炼——制作社区生活页面ABOUTME

通过前面案例的制作，读者应该掌握基本的页面布局方法和制作。接下来通过一个小案例巩固一下所学内容。SAMPLETHANKSSAMPLE项目三使用HTML编写页面——搭建页面底层的基础任务描述——了解关于我们页面结构1技术引入——Div+CSS盒模型2新手试炼——制作蓝色企业网站343.3任务二制作学设计吧“关于我们”页面任务实施——完成关于我们页面制作1任务描述——了解关于我们页面结构ABOUTME

通过任务一的操作，完成了关于我们页面的基本结构的创建。接下来继续制作页面其他内容。制作过程中要熟练掌HTML页面的编辑和CSS样式的应用。网页中的图片格式通常为JPG、PNG或GIF格式。2技术引入——Div+CSS盒模型盒模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒模型以及其中每个元素的用法，才能真正控制页面中的各个元素的位置。盒模型是由margin（边界）、border（边框）、padding（填充）和content（内容）4部分组成的。此外，在盒模型中，还具备高度和宽度两个辅助属性。margin：边界（或称为外边距），用来设置内容与内容之间的距离。border：边框，内容边框线，可以设置边框的粗细、颜色、样式等。padding：填充（或称为内边距），用来设置内容与边框之间的距离。content：内容，是盒模型中必需的一部分，可以放置文字、图像等内容。ABOUTME01执行“文件>打开”命令，打开页面“素材\项目三\3-3.html”，效果如图所示。将光标移至页面中名为box的Div中，然后将多余文字删除，插入图像“源文件\项目三\images\86202.jpg”，如图所示。练一练——定位网页元素位置1.margin（边界）margin（边界）用来设置页面中元素和元素之间的距离，即定义元素周围的空间范围，是页面排版中一个比较重要的概念。margin属性包含4个子属性，分别是margin-top、margin-right、margin-bottom和margin-left，分别用于控制元素四周的边距。ABOUTME02转换到该文件链接的外部CSS样式文件中，定义id名为box的Div的CSS样式，如图所示。选中id名为box的Div，可以看到所设置的上边界效果，如图所示。练一练——定位网页元素位置设置CSS样式设置margin属性效果ABOUTME03执行“文件>保存”命令，保存页面和外部CSS样式文件，在浏览器中预览页面，效果如图所示。练一练——定位网页元素位置页面预览效果ABOUTME2.border（边框）border（边框）是内边距和外边距的分界线，可以分离不同的HTML元素，border属性设置的是元素的最外围。在网页设计中，如果计算元素的宽和高，则需要把border计算在内。border属性有3个子属性，分别是边框样式（border-style）、边框宽度（border-width）和边框颜色（border-color）。练一练——为网页元素添加边框01执行“文件>打开”命令，打开页面“素材\项目三\3-4.html”，效果如图所示。将光标移至页面中名为banner的Div中，插入相应的图像，如图所示。打开页面插入图像效果ABOUTME练一练——为网页元素添加边框02转换到该文件链接的外部CSS样式文件中，定义名为.pic01的类CSS样式，如图所示。切换到“源代码”视图，在img标签中指定样式，如图所示。定义类样式为图像指定样式ABOUTME练一练——为网页元素添加边框03执行“文件>保存”命令，保存页面和外部CSS样式文件，在浏览器中预览页面，如图所示页面完成效果ABOUTME3.padding（填充）在CSS中，可以通过设置padding属性定义内容与边框之间的距离，即内边距。padding属性值可以是一个具体的长度，也可以是一个相对于上级元素的百分比，但不可以使用负值。padding属性可以为盒子定义上、右、下、左各边填充的值，分别是padding-top（上填充）、padding-right（右填充）、padding-bottom（下填充）和padding-left（左填充）。在给padding设置值时，如果提供4个参数值，将按顺时针的顺序作用于上、右、下、左四边；如果只提供1个参数值，则将作用于四边；如果提供2个参数值，则第1个参数值作用于上、下两边，第2个参数值作用于左、右两边；如果提供3个参数值，第1个参数值作用于上边，第2个参数值作用于左、右两边，第3个参数值作用于下边。4.content（内容）从盒模型中可以看出中间部分是content（内容），它主要用来显示内容，这部分也是整个盒模型的主要部分，其他如margin、border、padding所做的操作都是对content部分所做的修饰。对于内容部分的操作，也就是对文本、图像等页面元素的操作。3任务实施——完成关于我们页面制作ABOUTME01执行“文件>打开”命令，将about.html文件打开。选择header，在代码视图中删除内部文字，单击“插入”面板上的Image选项，选择“嵌套”选项，将“images/top.jpg”插入到Div中，页面效果如图3-53所示。插入图片ABOUTME02选择crumbs，切换到Div.css中，为其添加顶部边距，如图所示样式。在crumbs中输入如图所示文本。创建CSS样式页面效果ABOUTME03选择main，插入一个id为main-top的div，在div.css文件中创建样式文件如图所示。修改main的样式文件如图所示。插入图片修改CSS代码ABOUTME04在main-top之后插入一个id为main-left的div，在div.css中创建样式，将“images/liebiao.jpg”插入到Div如图所示。页面效果如图所示。创建CSS样式页面效果ABOUTME05继续在main-left后面插入一个id为main-right的div，在div.css中创建样式，如图所示。为main-left中添加一个左浮动标签，如图所示文本内容。创建CSS样式修改CSS样式ABOUTME06在main-right中输入如图所示文本。输入文本ABOUTME07使用相同的方法，在bottom中插入图片，完成效果如图所示。插入图片效果ABOUTME08执行“文件>保存”命令，将文件保存为about1.html。单击软件界面右下角的“实时预览”按，选择在浏览器中预览，预览效果如图所示。页面完成效果4新手试炼——制作蓝色企业网站ABOUTME

通过Div+CSS布局方式，可以轻松制作各种页面效果。CSS样式的应用除了可以快速实现页面效果外，也便于后期修改。接下来通过一个案例巩固学习内容。THANKS

本项目中主要讲解了HTML的基本知识。分别针对HTML的基本结构、普通标签和重要标签进行了介绍。帮助读者了解网页底层的构成。并通过制作关于我们页面，掌握Div与CSS结合布局页面的方法。通过学习，读者应理解页面布局的基础，初步掌握页面布局的方法。SAMPLE4.1知识链接项目四使用CSS样式美化页面——简单快捷规范制作页面电子商务网页常用术语1CSS样式基础234

CSS样式基本语法

4.1知识链接

CSS样式的使用方法电子商务网站需要以展示商品和服务为主，在页面设计中需要着重突出的部分与普通网站有所不同。商品分类列表的合理布局，将直接应用站点中产品的销量；网站菜单栏和导航条的合理使用，更有利于用户查找想要的商品。接下来针对电子商务网页设计中常用的术语和CSS样式基础进行介绍。1电子商务网页常用术语

1.LOGO2.Banner3.导航栏Logo指的是标志、徽标的意思。互联网中的Logo通常指的是网站的标志，如图4-2所示。Logo是网站形象的重要体现，也是网站的名片。对于一个追求完美的网站，Logo更是其灵魂的所在。Logo的形式很多，有文字Logo、图形化Logo，还有动态的Logo。丰富的Logo表现形式更能吸引人的注意。图4-2Banner是指横幅广告或者通栏广告，在网站设计和制作中，除了小图片、文字、图标外，通常还有一个占较大篇幅或占据重要位置的广告，往往称其为Banner，如图4-3所示。在网络营销术语中，Banner作为一种网络广告形式，Banner广告一般是放置在网页上的不同位置，在用户浏览网页信息的同时，吸引用户对于广告信息的关注，从而获得用户点击广告进入相关链接页面的效果。图4-3用户访问网站的主要目的就是为了寻找信息。而导航系统就是帮助用户找到这些信息。要想设计出优秀的导航，帮助用户轻松找到他们真正想要找的东西。导航系统中最常用的就是位于网站页面顶部或者侧边区域的导航栏，如图4-4所示。图4-4局部导航帮助用户到达临近感兴趣的位置网站全局导航，是最顶层导航，可以方便地查找页面中重要的内容导航栏导航栏是一个网站的指路标，可以帮助用户快速到达想要到达的页面。通常导航栏中会加入搜索功能，更便于用户查询并找到想要的内容。用户对每个信息的搜索行为都要通过特定的导航工具才能完成，按照其功能的不同可以分为3种导航工具：结构导航、关联导航和可用性导航。结构导航表示网站内容的层次结构，通常会采用全局和局部导航的形式。全局导航一般是网站的顶层类别，通过全局类型很容易地访问到网站中最重要的内容。局部导航会引导用户到达网站层次结构中临近用户当前所在位置的层次，如图4-5所示。图4-5图4-6

关联导航将一个页面与包含类似内容的其他页面相关联，特别适合“试探的查找”，并且可以帮助用户发现他们“原本不知道”但却应该知道的信息，如图4-6所示。可用性导航实现了页面与帮助访问者使用网站本身的特性之间的关联。例如会员登录、访问用户信息等功能，如图4-7所示。网站中主要内容组织以外的所有内容都可以归纳为可用性导航，它对网站的功能设计非常重要。通过关联导航可以快速进入到与本页面相似的页面中通过可用性导航可以帮助用户快速进入网站其他页面中图4-6图4-7商品分类表，是划分商品和服务类别的文件，根据商品的性质、用途、原料以及不同的服务将其分为若干类，每类又分若干种。按照这种归类方式划分的商品注册使用表，成为商品分类表，如图4-8所示。[商品分类列表在商品众多的大型电子商务网站中起着至关重要的作用。用户通过使用商品分类列表可以快速找到感兴趣的商品，同时也会在不同品牌中做选择，避免用户离开该网站去访问其他网站4.商品分类列表图4-8版权信息通常指的是网站中文字、艺术、科学作品的作者对其作品享有的权利。通常位于页面的底部，主要用来展示一些网页相关版权信息，如图4-9所示。5.版权信息图4-96.友情链接友情链接是指互相在自己的网站上放对方网站的链接，是具有一定资源互补优势的网站之间的简单合作形式。即分别在自己的网站上放置对方网站的LOGO[上一页还是Logo，这种专业术语请全书统一][已改]图片或文字的网站名称，并设置对方网站的超链接，如图4-10所示。用户可以从合作网站中发现自己的网站，达到互相推广的目的，因此常作为一种网站推广基本手段，图4-102CSS样式基础

运用CSS样式表可以依次对若干个网页所有的样式进行控制。同HTML样式相比，使用CSS样式表的好处除了在于它可以同时链接多个网页文件之外，还在于当CSS样式表要是被修改后，所有应用的样式都会自动更新。在Dreamweaver中，用户不需要了解CSS复杂烦琐的语法就可以创建出具有专业水准的CSS样式。不仅如此，Dreamweaver还能够识别现存文档中已定义的CSS样式，方便用户对现有文档进行修改。CSS是网页排版和风格设计的重要工具，在所谓的新式网页里，CSS不容置疑是相当重要的一环，CSS是用来弥补HTML规格中的不足，也让网页设计更为灵活。也可以这样讲，CSS是为了帮助简化和整理在使用HTML标签制作页面过程中那些烦琐的方式以及杂乱无章的代码而被开发出来的。

CSS可以为网页上的元素精确地定位和控制传统的格式属性（如字体、尺寸、对齐等），还可以设置如位置、特殊效果、鼠标滑过之类的HTML属性。如图4-11所示为未使用CSS样式时的页面，如图4-12所示为使用CSS样式后的页面效果。图4-12图4-11（1)将格式和结构分离HTML语言定义了网页的结构和各要素的功能，而CSS样式表通过将定义结构的部分和定义格式的部分分离，使设计者能够对页面的布局施加更多的控制，同时HTML仍可以保持简单明了的初衷。CSS代码独立出来从另一个角度控制页面外观。（2)以前所未有的能力控制页面布局HTML语言对页面总体上的控制很有限。如精确定位、行间距或字间距等，这些都可以通过CSS来完成。（3)制作体积更小、下载更快的网页CSS样式表只是简单的文本，就像HTML那样。它不需要图像，不需要执行程序，不需要插件。使用CSS样式表可以减少表格标签及其他加大HTML体积的代码，减少图像用量从而减小文件大小。（4)将许多网页同时更新，比以前更快更宜易没有CSS样式表时，如果想更新整个站点中所有主体文本的字体，必须一页一页地修改网页。CSS样式表的主旨就是将格式和结构分离。利用CSS样式表，可以将站点上所有的网页都指向单一的一个CSS文件，这样只要修改CSS文件中的某一行，整个站点的网站都会随之修改。（5)浏览器将成为更友好的界面样式表的代码有很好的兼容性，也就是说，如果用户丢失了某个插件时不会发生中断，或者使用老版本的浏览器时代码不会出现杂乱无章的情况。只要是可以识别CSS样式表的浏览器就可以应用它。3CSS样式基本语法

CSS的基本语法CSS由选择符和声明两部分组成。其中声明由属性和属性值组成，所以简单的CSS规则如图4-13所示选择符属性属性值图4-13选择符部分指定对文档中的哪个标签进行定义。选择符最简单的类型是“类型选择符”，直接输入元素的名称，便可以对其进行定义，例如定义XHTML中的<p>标签，只要给出<>尖括号内的元素名称，用户就可以编写类型选择符了，如下所示：p{属性:值;}规则会选择所有<p>标签的样式1.选择符3.属性2.声明4.属性值声明包含在{}大括号内，在大括号中首先给出属性名，接着是冒号，然后是属性值，结尾分号是可选项，推荐使用结尾分号，这样做的原因将在本章后面更清楚，整条规则以结尾大括号结束。属性由官方CSS规范定义。用户可以定义特有的样式效果，与CSS兼容的浏览器可能会支持这些效果，尽管有些浏览器识别不是正式语言规范部分的非标准属性，但是大多数浏览器很可能会忽略一些非CSS规范部分的属性，最好不要依赖这些专有的扩展属性，不识别它们的浏览器只是简单的忽略它们。声明的值放置在属性名和冒号之后。它确切定义应该如何设置属性。每个属性值的范围也在CSS规范中定义。例如，名为color（颜色）的属性可以采用由颜色名或代码组成的值如下所示：p{color:blue;}该规则声明所有段落标签的内容应该将color属性设置为值blue（蓝色），因此所有<p>文本将变成蓝色。4CSS样式的使用方法CSS的使用方法在HTML内插入样式，可分为3种，分别是内联式样式、嵌入式样式和外部样式，在应用时可以根据需要任意应用以上3种，最接近目标的样式定义优先权越高，高优先权样式将继承低优先权样式的未重叠定义并覆盖重叠的定义。1．内联样式内联样式是指将CSS样式写在XHTML标签中，其格式如下。<pstyle=”font-family:宋体;font-size:14px;color:#CCCCCC;”>内联样式<./p>内联样式由XHTML文件中的元素的style属性所支持，只需要将CSS代码用“;”分号隔开输入在style=””中，便可以完成对当前标签的样式定义。这是CSS样式定义的一种基本形式。内联样式仅仅是XHTML标签对于style属性的支持所产生的一种CSS样式编写方式，并不符合表现与内容分离的设计模式，使用内联样式与表格式布局从代码结构上来说完全相同，仅仅利用了CSS对于元素的精确控制优势，并没有很好的实现表现与内容的分离，所以这种书写方式应当尽量少用。CSS的使用方法2．嵌入样式嵌入样式又称为内部样式，是将CSS样式统一放置在页面一个固定的位置，代码如下。<html><head><title>内部样式</title><styletype="text/css">*{padding:0px;<--!设置填充-->margin:0px;border:0px;<--!设置边框-->}body{ font-family:"宋体"; font-size:12px; color:#CCCCCC;}</style></head><body>内部样式</body>样式由<style>……</style>标签标记在<head>……</head>之间，作为一个单独的部分。内部样式是CSS样式的初级应用形式，它只针对当前页面有效，不能跨页面执行，因此达不到CSS代码多用的目的，在实际的大型网站开发中，很少会用得到内部样式。CSS的使用方法3．外部样式外部样式是CSS样式中较为理想的一种形式。将CSS样式代码单独编写在一个独立文件之中，由网页进行调用，多个网页可以调用同一个外部样式文件，因此能够实现代码的最大化使用及网站文件的最优化配置。<html><head><title>外部样式</title><linkhref="style/style.css"rel="stylesheet"type="text/css"/></head><body>外部样式</body>在上面的HTML代码中，在<head>标签中使用<link>标签，可以将link指定为stylesheet样式方式，并使用href=”style.css”指明外部样式文件的路径，只需将样式单独编写在style.css文件中即可。CSS的使用方法

除此之外设计人员还可以使用@import命令导入外部CSS样式文件，此方法与链接外部CSS文件基本相同，创建一个简单的CSS样式文件，然后在引入到HTML文件中，只不过语法上和运作方式上有所不同。采用导入的样式，在HTML文件初始化时，会被导入到HTML文件中，作为文件的一部分，类似于内部CSS样式。而链接的外部CSS样式文件是在HTML标签需要CSS样式风格时才以链接方式引入。简单地说，导入外部CSS样式文件就是在内部样式的<style>……</style>标签中，使用@import导入一个外部CSS样式文件。那么如何导入外部CSS样式文件呢？首先打开一个已将初步设计好并且没有CSS样式控制的页面，打开“CSS设计器”面板，单击“源”部分的加号按钮，在弹出的快捷菜单中选择“附加现有的CSS文件”选项，如图4-14所示。在弹出的“使用现有的CSS文件”对话框中单击“浏览”按钮选择导入的CSS文件，如图4-15所示。图4-15CSS的使用方法单击“确定”按钮完成CSS样式的导入，在代码界面可以看到在<head>……</head>标签中间添加了一段相应代码，如图4-16所示。CSS样式在页面中的应用主要目的在于实现良好的网站文件管理及样式管理，分离式的结构有助于合理分配表现与内容。SAMPLETHANKSSAMPLE4.2任务一美化“关于我们”页面导航项目四使用CSS样式美化页面——简单快捷规范制作页面本任务中将学习使用div+css的方式布局“关于我们”页面导航，通过案例的制作掌握基本布局页面的方法，完成页面效果如图4-17所示。图4-17任务描述——了解页面导航的结构1技术引进——了解id选择符234

任务实施——美化关于我们页面导航

新手试炼——制作个人作品网站页面任务一1任务描述——了解页面导航的结构任务描述——了解页面导航的结构“关于我们”页面导航中依次插入5个“DIV”，并使用CSS样式分别设置每个div的Width和Height，设置完的页面布局如图4-18所示。图4-182技术引进——了解id选择符本任务中主要使用CSS中的id样式完成页面导航的制作。在使用CSS页面布局时，通常都是使用div来布局页面，每个div都需要使用id样式实现不同的效果。用户在页面中选择想要插入div的位置后,单击“插入”面板上的div选项，即可在页面中插入一个div。用户在源代码中选择想要出入div的位置后，单击“插入”面板上的div选项，则会弹出“插入div”对话框，如图4-19所示。了解id选择符图4-19用户在该对话框中可以选择插入位置、定义样式和id名，还可以通过新建CSS规则对div进行控制。提示：在dreamweavercc2018中可以明显感觉到，dreamweaver已经逐渐转换成一款面向专业人员的专业网页制作工具，对网页制作人员的要求也越来越高。id选择符定义的是HTML页面中某一个特定的元素，即一个网页中只能有一个元素使用某一个id的属性值。id选择符的基本语法如下。了解id选择符#id名称{属性：属性值；}id名称表示id选择符的名称，其具体名称由CSS定义者自己命名。具体HTML代码如下。<body><divid=”menu”><p> </p><p>网站首页</p><p>关于我们</p><p>我们的服务</p><p>合作客户</p><p>我们的作品</p><p>联系我们</p></div><div>中间内容</div></body>接下来了解CSS的具体代码。了解id选择符#menu{width:120px;height:100%;text-align:right;padding-right:20px;font-size:14px;font-weight:bold;line-height:50px;color:#FFF;background-color:#F60;position:absolute;top:0px;right:0px;}在正常情况下，id的属性值在文档中具有唯一性，只有具备id属性的标签，才可以使用id选择符定义样式。同时idCSS样式是网页中唯一的特定针对id名称的元素，尽量不要在一个网页中设置多处id名称相同的元素，idCSS样式的命名必须以井号（#）开头，并且可以包含任何字母和数字组合。提示：id选择符在页面的标签中只能使用一次；id选择符比类选择符具有更高的优先级别，当id选择符与类选择符发生冲突时，将会优先使用id选择符。03在站点名称位置单击右键，在弹出的快捷菜单中选择“新建文件”命令，新建一个index.html文件，如图2-18所示