电子教案网页设计与制作基础教程第3版

《电子教案网页设计与制作基础教程第3版》由会员分享，可在线阅读，更多相关《电子教案网页设计与制作基础教程第3版（204页珍藏版）》请在装配图网上搜索。

1、 网页设计与制作基础教程网页设计与制作基础教程(第第3 3版版)第第 一一 章章网页设计基础知识网页设计基础知识:计算机基础与实训教材系列系列丛书官方网站 http:/ :学学 习习 目目 标标 随着因特网（随着因特网（InternetInternet）的不断发展，越来越多的人都想要）的不断发展，越来越多的人都想要学习设计与制作网页，但是要实现较好的网页效果，设计者首学习设计与制作网页，但是要实现较好的网页效果，设计者首先要了解网页的相关基础知识，例如网页与网站的关系，网页先要了解网页的相关基础知识，例如网页与网站的关系，网页设计的构思与布局方式，常用的网页制作工具，以及与网页相设计的构思与布

2、局方式，常用的网页制作工具，以及与网页相关的概念等关的概念等。:计算机基础与实训教材系列系列丛书官方网站 http:/ :本本 章章 重重 点点uu网页制作的基础知识网页制作的基础知识网页制作的基础知识网页制作的基础知识uu网页设计构思与布局网页设计构思与布局网页设计构思与布局网页设计构思与布局uu常见的网页制作工具常见的网页制作工具常见的网页制作工具常见的网页制作工具uu与网页相关的概念与网页相关的概念与网页相关的概念与网页相关的概念:计算机基础与实训教材系列系列丛书官方网站 http:/ :1.1 1.1 网页制作的基础知网页制作的基础知识识 网页是构成网站的基本元素，是承载各种网站应用的

3、平台。它是一个文网页是构成网站的基本元素，是承载各种网站应用的平台。它是一个文件，通常为件，通常为HTMLHTML格式，可以存储在世界某个角落的某一台计算机中格式，可以存储在世界某个角落的某一台计算机中。uuu 网页和网站网页和网站网页和网站uuu 网页的基本元素网页的基本元素网页的基本元素uuu 网页的制作流程网页的制作流程网页的制作流程uuu 网页的常见类型网页的常见类型网页的常见类型 :计算机基础与实训教材系列系列丛书官方网站 http:/ :1.1.1 1.1.1 网页和网站网页和网站 在网页和网站开发领域，有着各式各样的专有名词。弄清楚它们之间的在网页和网站开发领域，有着各式各样的专

4、有名词。弄清楚它们之间的概念和联系，对于用户学习网页知识有极大的裨益概念和联系，对于用户学习网页知识有极大的裨益。uuu 网页的概念网页的概念网页的概念 uuu 网站的概念网站的概念网站的概念 :计算机基础与实训教材系列系列丛书官方网站 http:/ :1.1.2 1.1.2 网页的基本元素网页的基本元素 网页是一个纯文本文件，其通过网页是一个纯文本文件，其通过HTMLHTML、CSSCSS等脚本语言对页面元素进行等脚本语言对页面元素进行标识，然后由浏览器自动生成页面。组成网页的基本元素通常包括文本、图标识，然后由浏览器自动生成页面。组成网页的基本元素通常包括文本、图像、超链接、像、超链接、F

5、lashFlash动画、表格、交互式表单以及导航栏等动画、表格、交互式表单以及导航栏等。:计算机基础与实训教材系列系列丛书官方网站 http:/ :1.1.3 1.1.3 网页的常见类型网页的常见类型 一般情况下，网页的常见类型分为静态网页与动态网页两种。网页程序一般情况下，网页的常见类型分为静态网页与动态网页两种。网页程序是否在服务器端运行，是区分静态网页与动态网页的重要标志，在服务器端是否在服务器端运行，是区分静态网页与动态网页的重要标志，在服务器端运行的网页运行的网页(包括程序、网页、组件等包括程序、网页、组件等)属于动态网页属于动态网页(动态网页会随不同用户、动态网页会随不同用户、不同

6、时间，返回不同的网页不同时间，返回不同的网页)。运行于客户端的网页程序。运行于客户端的网页程序(包括程序、网页、包括程序、网页、插件、组件等插件、组件等)则属于静态网页则属于静态网页。:计算机基础与实训教材系列系列丛书官方网站 http:/ :1.2 1.2 网页设计的构思与网页设计的构思与布局布局 网页设计的成功与否，很重要的一个原因就在于它的构思与布局，具有网页设计的成功与否，很重要的一个原因就在于它的构思与布局，具有创造性构思和巧妙的页面布局会让网页具有更强的生命力和观赏性。本节将创造性构思和巧妙的页面布局会让网页具有更强的生命力和观赏性。本节将重点介绍网页构思与布局的相关知识重点介绍网

7、页构思与布局的相关知识。uuu 网页的设计构思网页的设计构思网页的设计构思uuu 网页的布局结构网页的布局结构网页的布局结构:计算机基础与实训教材系列系列丛书官方网站 http:/ :1.3 1.3 网页制作工具简介网页制作工具简介 网页制作工具可以分为两类：一类是源代码编辑工具网页制作工具可以分为两类：一类是源代码编辑工具(如如HotDogHotDog、HomeSiteHomeSite、EditPlusEditPlus等等)，另一类是所见即所得编辑工具，另一类是所见即所得编辑工具(如如HotMetalHotMetal、FrontPageFrontPage、DreamweaverDreamwe

8、aver等等)。除此之外，设计者在制作网页时，还需要用到。除此之外，设计者在制作网页时，还需要用到图像设计工具图像设计工具(如如PhotoshopPhotoshop、FireWorks)FireWorks)和动画制作工具和动画制作工具(如如Flash)Flash)。本节将简。本节将简要介绍目前常用的网页制作工具要介绍目前常用的网页制作工具DreamweaverDreamweaver、图像设计工具、图像设计工具PhotoshopPhotoshop和动和动画制作工具画制作工具FlashFlash。uuu 网页制作软件网页制作软件网页制作软件DreamweaverDreamweaverDreamwe

9、averuuu 图像处理软件图像处理软件图像处理软件PhotoshopPhotoshopPhotoshopuuu 动画制作软件动画制作软件动画制作软件FlashFlashFlash:计算机基础与实训教材系列系列丛书官方网站 http:/ :1.4 1.4 与网页相关的概念与网页相关的概念 InternetInternet是从是从Interconnected NetworksInterconnected Networks延伸而来的，是跨国界的网络。延伸而来的，是跨国界的网络。InternetInternet把世界各地数以千万计的计算机和传输线路连接在一起构成一个网络。把世界各地数以千万计的计算机

10、和传输线路连接在一起构成一个网络。通过它可以交换信息、共享资源，并以此为基础实现各种计算机通信应用项通过它可以交换信息、共享资源，并以此为基础实现各种计算机通信应用项目。在目。在InternetInternet中，网页是它的重要组成部分，本节将主要介绍一些与网页相中，网页是它的重要组成部分，本节将主要介绍一些与网页相关的名词和概念关的名词和概念。uuu 万维网（万维网（万维网（WWWWWWWWW）uuu 超文本传输协议超文本传输协议超文本传输协议uuu 统一资源定位器统一资源定位器统一资源定位器uuu 网页框架语言网页框架语言网页框架语言HTMLHTMLHTML:计算机基础与实训教材系列系列丛

11、书官方网站 http:/ :1.4.1 1.4.1 万维网（万维网（WWWWWW）WWW(World Wide Web)WWW(World Wide Web)即环球信息网，也可以称为即环球信息网，也可以称为 Web Web，中文名字为，中文名字为“万维网万维网”。用户在使用浏览器来访问。用户在使用浏览器来访问WebWeb的过程中，无须关心一些技术性的的过程中，无须关心一些技术性的细节即可得到丰富的信息资料。细节即可得到丰富的信息资料。WWWWWW是是InternetInternet上发展最快和目前使用最广上发展最快和目前使用最广泛的一种服务泛的一种服务。简单地说，简单地说，WWWWWW是漫游是

12、漫游InternetInternet的工具，它把的工具，它把InternetInternet上不同地点的相关上不同地点的相关信息聚集起来，通过信息聚集起来，通过WWWWWW浏览器浏览器(如如IEIE，即，即Internet Explorer)Internet Explorer)检索，无论用户检索，无论用户所需的信息在什么地方，只要浏览器为用户检索到之后，就可以将这些信息所需的信息在什么地方，只要浏览器为用户检索到之后，就可以将这些信息(文字、图片、动画、声音等文字、图片、动画、声音等)“提取提取”到用户的计算机屏幕上到用户的计算机屏幕上:计算机基础与实训教材系列系列丛书官方网站 http:/

13、:1.4.2 1.4.2 超文本传输协议超文本传输协议 HTTP(HyperText Transfer Protocol)HTTP(HyperText Transfer Protocol)即超文本传输协议，它是即超文本传输协议，它是WWWWWW服务器服务器上最主要的协议。通过这一跨平台的通信协议，在上最主要的协议。通过这一跨平台的通信协议，在WWWWWW任何平台上的电脑任何平台上的电脑都可以阅读远方服务器都可以阅读远方服务器(Server)(Server)上的同一文件上的同一文件。HTTP HTTP协议经常用来在网络上传送协议经常用来在网络上传送WebWeb页。当用户以页。当用户以“http:

14、/http:/”开始一个开始一个超链接的名字时，就是告诉浏览器去访问使用超链接的名字时，就是告诉浏览器去访问使用HTTPHTTP协议的协议的WebWeb页。页。HTTPHTTP协议协议不仅能保证正确传输超文本文档，还可以确定传输文档中的哪一部分，以及不仅能保证正确传输超文本文档，还可以确定传输文档中的哪一部分，以及哪部分内容首先显示哪部分内容首先显示。:计算机基础与实训教材系列系列丛书官方网站 http:/ :1.4.3 1.4.3 统一资源定位器统一资源定位器 URL(Uniform Resource Locator)URL(Uniform Resource Locator)即统一资源定位器

15、，它使用数字和字母来即统一资源定位器，它使用数字和字母来代表网页文件在网上的地址。代表网页文件在网上的地址。URLURL好比好比InternetInternet的门牌号码，它可以帮助用户的门牌号码，它可以帮助用户在在InternetInternet的信息海洋中查找到所需要的资料的信息海洋中查找到所需要的资料。Web Web上所能访问的资源都有唯一的上所能访问的资源都有唯一的URLURL。URLURL包括所用的传输协议、服务包括所用的传输协议、服务器名称、文件的完整路径。例如，在浏览器的器名称、文件的完整路径。例如，在浏览器的URLURL处输入处输入http:/ http:/ :1.4.4 1.

16、4.4 网页框架语言网页框架语言HTMLHTML HTML(Hyper Text Markup Language)HTML(Hyper Text Markup Language)即超文本标记语言，是即超文本标记语言，是WWWWWW上通用的上通用的描述语言。描述语言。HTMLHTML语言主要是为了把存放在一台计算机中的文本或图形与另语言主要是为了把存放在一台计算机中的文本或图形与另一台计算机中的文本或图形方便地联系在一起，形成有机的整体一台计算机中的文本或图形方便地联系在一起，形成有机的整体。uuu HTMLHTMLHTML文件的基本结构文件的基本结构文件的基本结构uuu HTMLHTMLHTM

17、L网页的常用标记网页的常用标记网页的常用标记 网页设计与制作基础教程网页设计与制作基础教程(第第3 3版版)第第 二二 章章Dreamweaver CCDreamweaver CC快速入门快速入门:计算机基础与实训教材系列系列丛书官方网站 http:/ :学学 习习 目目 标标 Dreamweaver Dreamweaver是一款集网页制作与网站管理于一身的网页编是一款集网页制作与网站管理于一身的网页编辑软件，是针对专业网页设计师特别开发的视觉化网页开发工辑软件，是针对专业网页设计师特别开发的视觉化网页开发工具，利用它，用户可以轻松制作出跨越平台和浏览器限制并且具，利用它，用户可以轻松制作出跨

18、越平台和浏览器限制并且充满动感的网页。本章将重点介绍充满动感的网页。本章将重点介绍Dreamweaver CCDreamweaver CC的相关知识的相关知识和常用操作，帮助用户尽快掌握制作网页的基本方法和常用操作，帮助用户尽快掌握制作网页的基本方法。:计算机基础与实训教材系列系列丛书官方网站 http:/ :本本 章章 重重 点点uu创建与设置站点创建与设置站点创建与设置站点创建与设置站点uuDreamwerDreamwer的基本操作的基本操作的基本操作的基本操作uu切换切换切换切换”文档文档文档文档”视图视图视图视图uu使用可视化助理使用可视化助理使用可视化助理使用可视化助理:计算机基础与

19、实训教材系列系列丛书官方网站 http:/ :2.1 Dreamweaver CC2.1 Dreamweaver CC简简介介 Dreamweaver Creative Cloud(CC)Dreamweaver Creative Cloud(CC)是一款可视的网页制作与编辑软件，它可是一款可视的网页制作与编辑软件，它可以针对网络及移动平台设计、开发并发布网页。以针对网络及移动平台设计、开发并发布网页。Dreamweaver CCDreamweaver CC提供直觉式提供直觉式的视觉效果界面，可用于建立及编辑网站，并与最新的网络标准相兼容（同的视觉效果界面，可用于建立及编辑网站，并与最新的网络标

20、准相兼容（同时对时对 HTML5/CSS3 HTML5/CSS3 和和 jQuery jQuery 提供支持）。本节将详细介绍提供支持）。本节将详细介绍Dreamweaver CCDreamweaver CC的的工作界面和基本操作，帮助用户初步了解该软件的使用方法工作界面和基本操作，帮助用户初步了解该软件的使用方法。uuu Dreamweaver CCDreamweaver CCDreamweaver CC的工作界面的工作界面的工作界面uuu Dreamweaver CCDreamweaver CCDreamweaver CC的基本操作的基本操作的基本操作:计算机基础与实训教材系列系列丛书官方

21、网站 http:/ :2.1.1 Dreamweaver CC2.1.1 Dreamweaver CC的工的工作界面作界面 Dreamweaver CCDreamweaver CC的工作界面效果秉承栏的工作界面效果秉承栏DreamweaverDreamweaver系列软件产品一贯系列软件产品一贯简洁、高效和易用的特点，软件的多数功能都能在功能界面中非常方便地找简洁、高效和易用的特点，软件的多数功能都能在功能界面中非常方便地找到，如图到，如图2-12-1所示所示。uuu 菜单栏菜单栏菜单栏uuu“插入插入插入”面板面板面板uuu “文档文档文档”工具栏工具栏工具栏uuu “文档文档文档”窗口窗口

22、窗口uuu “属性属性属性”检查器检查器检查器uuu 状态栏状态栏状态栏:计算机基础与实训教材系列系列丛书官方网站 http:/ :2.1.2 Dreamweaver CC2.1.2 Dreamweaver CC的基的基本操作本操作 使用使用Dreamweaver CCDreamweaver CC编辑网页之前，用户应掌握该软件的基本操作方法，编辑网页之前，用户应掌握该软件的基本操作方法，例如创建网页、保存网页、打开网页、设置网页属性以及预览网页的效果等例如创建网页、保存网页、打开网页、设置网页属性以及预览网页的效果等。uuu 创建网页创建网页创建网页uuu 打开网页打开网页打开网页uu 设置网

23、页设置网页uu 预览网页预览网页uu 保存网页保存网页:计算机基础与实训教材系列系列丛书官方网站 http:/ :2.2 2.2 创建与设置站点创建与设置站点 在在DreamweaverDreamweaver中，用户可以创建本地站点，本地站点是本地计算机中创中，用户可以创建本地站点，本地站点是本地计算机中创建的站点，其所有的内容都保存在本地计算机硬盘上，本地计算机可以被看建的站点，其所有的内容都保存在本地计算机硬盘上，本地计算机可以被看成是网络中的站点服务器。本节将通过实例操作，详细介绍在本地计算机上成是网络中的站点服务器。本节将通过实例操作，详细介绍在本地计算机上创建与管理站点的方法创建与管

24、理站点的方法。uuu 站点简介站点简介站点简介uuu 规划站点规划站点规划站点uuu 创建本地站点创建本地站点创建本地站点uuu 设置本地站点设置本地站点设置本地站点uuu 创建网站文件创建网站文件创建网站文件:计算机基础与实训教材系列系列丛书官方网站 http:/ :2.3 2.3 设置设置DreamweaverDreamweaver视图视图 在在Dreamweaver CCDreamweaver CC中，软件提供了中，软件提供了“设计设计”、“代码代码”、“拆分拆分”、“实时视图实时视图”等多种视图模式，可以帮助设计者随时查看网页的设计效果和相等多种视图模式，可以帮助设计者随时查看网页的设

25、计效果和相应代码的对应状态。除此之外，在应代码的对应状态。除此之外，在“设计设计”视图中，用户还可以使用视图中，用户还可以使用“标尺标尺”和和“网络网络”功能，精确定位网页中的各种页面元素功能，精确定位网页中的各种页面元素。uuu 切换切换切换“文档文档文档”视图视图视图uuu 使用可视化助理使用可视化助理使用可视化助理:计算机基础与实训教材系列系列丛书官方网站 http:/ :1.3.1 1.3.1 切换切换“文档文档”视图视图 Dreamweaver CCDreamweaver CC文档窗口显示栏当前文档，选择文档窗口显示栏当前文档，选择“查看查看”命令，在文档命令，在文档视图下拉菜单中，

26、用户可以视图下拉菜单中，用户可以“设计设计”、“代码代码”、“拆分拆分”、“实时视图实时视图”等视图模式，其各自的功能如下等视图模式，其各自的功能如下。uuu 设计视图设计视图设计视图uuu 代码视图代码视图代码视图uuu 代码视图代码视图代码视图uuu 实时视图实时视图实时视图uuu 实时代码模式实时代码模式实时代码模式uuu 检查模式检查模式检查模式:计算机基础与实训教材系列系列丛书官方网站 http:/ :2.3.2 2.3.2 使用可视化助理使用可视化助理 Dreamweaver CCDreamweaver CC提供了提供了“标尺标尺”和和“网格网格”功能，用于辅助设计网页文功能，用于

27、辅助设计网页文档。档。“标尺标尺”功能可以辅助测量、组织和规划布局；功能可以辅助测量、组织和规划布局；“网格网格”功能可以绝对功能可以绝对定位的网页元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格定位的网页元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行为或控制靠齐行为。uuu 使用使用使用“标尺标尺标尺”功能功能功能uuu 使用使用使用“网络网络网络”功能功能功能 网页设计与制作基础教程网页设计与制作基础教程(第第3 3版版)第第 三三 章章使用表格布局页面使用表格布局页面:计算机基础与实训教材系列系列丛书官方网站 http:/ :学学 习习 目目 标标 在网页中

28、插入的文本和图像会随着浏览器窗口的放大与缩在网页中插入的文本和图像会随着浏览器窗口的放大与缩小发生变化，这使得网页处于不稳定的显示状态。要解决这种小发生变化，这使得网页处于不稳定的显示状态。要解决这种状态，最简单的方法就是使用表格，表格不仅能够控制网页在状态，最简单的方法就是使用表格，表格不仅能够控制网页在浏览器窗口中的位置，还可以控制网页元素在网页中的显示位浏览器窗口中的位置，还可以控制网页元素在网页中的显示位置置。:计算机基础与实训教材系列系列丛书官方网站 http:/ :本本 章章 重重 点点uu 创建基本表格创建基本表格创建基本表格创建基本表格uu 插入表格元素插入表格元素插入表格元素

29、插入表格元素uu 调整表格大小调整表格大小调整表格大小调整表格大小uu 导入与导出表格数据导入与导出表格数据导入与导出表格数据导入与导出表格数据uu 使用表格制作网页使用表格制作网页使用表格制作网页使用表格制作网页:计算机基础与实训教材系列系列丛书官方网站 http:/ :3.1 3.1 使用表格使用表格 网页能够向访问者提供的信息是多样化的，包括文字、图像、动画和视网页能够向访问者提供的信息是多样化的，包括文字、图像、动画和视频等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得不频等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得不仅美观而且有条理，是网页设计者在着手

30、设计网页之前必须要考虑的问题。仅美观而且有条理，是网页设计者在着手设计网页之前必须要考虑的问题。表格的作用就是帮助用户高效、准确地定位各种网页数据，并直观、鲜明地表格的作用就是帮助用户高效、准确地定位各种网页数据，并直观、鲜明地表达设计者的思想表达设计者的思想。uuu 网页中表格的用途网页中表格的用途网页中表格的用途uuu 创建表格创建表格创建表格uuu 插入表格元素插入表格元素插入表格元素uuu 设置表格属性设置表格属性设置表格属性:计算机基础与实训教材系列系列丛书官方网站 http:/ :3.1.1 3.1.1 网页中表格的用途网页中表格的用途 使用表格排版的页面在不同平台、不同分辨率的浏

31、览器中都能保持其原使用表格排版的页面在不同平台、不同分辨率的浏览器中都能保持其原有的布局，并且在不同的浏览器平台中具有较好的兼容性，所以表格式网页有的布局，并且在不同的浏览器平台中具有较好的兼容性，所以表格式网页中最常用的排版方式之一中最常用的排版方式之一。:计算机基础与实训教材系列系列丛书官方网站 http:/ :3.1.2 3.1.2 创建表格创建表格 表格是用于在表格是用于在HTMLHTML页面上显示表格式数据以及对文本和图形进行布局的页面上显示表格式数据以及对文本和图形进行布局的工具。表格由一行或多行组成，每行又由一个或多个单元格组成工具。表格由一行或多行组成，每行又由一个或多个单元格

32、组成。uuu 插入表格插入表格插入表格uuu 插入嵌套表格插入嵌套表格插入嵌套表格:计算机基础与实训教材系列系列丛书官方网站 http:/ :3.1.3 3.1.3 插入表格元素插入表格元素 为了使网页中的元素能够有序的在浏览器中显示，用户在插入文本和图为了使网页中的元素能够有序的在浏览器中显示，用户在插入文本和图像之前，最好先插入一个表格。在表格中插入文本与图像的方法与直接在网像之前，最好先插入一个表格。在表格中插入文本与图像的方法与直接在网页中插入基本相同，只是在插入之前，需要先将鼠标光标放置在表格中页中插入基本相同，只是在插入之前，需要先将鼠标光标放置在表格中。uuu 在表格中输入文本在

33、表格中输入文本在表格中输入文本uuu 在表格中插入图像在表格中插入图像在表格中插入图像:计算机基础与实训教材系列系列丛书官方网站 http:/ :3.1.4 3.1.4 设置表格属性设置表格属性 表格由单元格组成，即使是一个最简单的表格，也由一个单元格。而表表格由单元格组成，即使是一个最简单的表格，也由一个单元格。而表格与单元格的属性完全不同，选择不同的对象（表格或单元格），格与单元格的属性完全不同，选择不同的对象（表格或单元格），“属性属性”检查器将会显示相应的选项参数检查器将会显示相应的选项参数。uuu 表格属性表格属性表格属性uuu 单元格属性单元格属性单元格属性:计算机基础与实训教材系

34、列系列丛书官方网站 http:/ :3.2 3.2 编辑表格编辑表格 当用户创建的表格不符合网页设计的要求时，可以通过拆分与合并表格当用户创建的表格不符合网页设计的要求时，可以通过拆分与合并表格中的单元格，或者增加与删除表格行或列来达到所需的目的。除此之外，在中的单元格，或者增加与删除表格行或列来达到所需的目的。除此之外，在表格中还可以执行复制、剪切、粘贴等操作，并保存原有单元格的格式表格中还可以执行复制、剪切、粘贴等操作，并保存原有单元格的格式。uuu 选择表格元素选择表格元素选择表格元素uuu 调整表格大小调整表格大小调整表格大小uuu 更改列宽和行高更改列宽和行高更改列宽和行高uuu 添

35、加或删除行或列添加或删除行或列添加或删除行或列uuu 拆分与合并单元格拆分与合并单元格拆分与合并单元格uuu 复制与粘贴单元格复制与粘贴单元格复制与粘贴单元格uuu 设置表格内容排序设置表格内容排序设置表格内容排序uuu 导入与导出表格式数据导入与导出表格式数据导入与导出表格式数据:计算机基础与实训教材系列系列丛书官方网站 http:/ :3.2.1 3.2.1 选择表格元素选择表格元素 将鼠标光标放置在网页中的表格内，将鼠标光标放置在网页中的表格内，“属性属性”检查器将显示单元格的属检查器将显示单元格的属性，而不是表格的属性。这说明选中的单元格，而非表格。在网页中创建一性，而不是表格的属性。

36、这说明选中的单元格，而非表格。在网页中创建一个表格，既包括表格自身，还包含单元格、行与列等元素，而这些元素的选个表格，既包括表格自身，还包含单元格、行与列等元素，而这些元素的选择方法各不相同择方法各不相同。uuu 选择整个表格选择整个表格选择整个表格uuu 选中行和列选中行和列选中行和列uuu 选中单元格选中单元格选中单元格uuu 选中单元格区域选中单元格区域选中单元格区域uuu 选中不相邻的单元格选中不相邻的单元格选中不相邻的单元格:计算机基础与实训教材系列系列丛书官方网站 http:/ :3.2.2 3.2.2 调整表格大小调整表格大小 当用户选中网页中的表格后，在表格右下角区域将显示当用

37、户选中网页中的表格后，在表格右下角区域将显示33个控制点，通过个控制点，通过拖动这拖动这33个控制点可以将表格横向、纵向或者整体放大个控制点可以将表格横向、纵向或者整体放大。:计算机基础与实训教材系列系列丛书官方网站 http:/ :3.2.3 3.2.3 更改列宽和行高更改列宽和行高 要更改单元格的列宽和行高，可以在要更改单元格的列宽和行高，可以在“属性属性”面板中调整数值，或拖动面板中调整数值，或拖动列或行的边框来更改表格的列宽或行高；也可以在列或行的边框来更改表格的列宽或行高；也可以在“代码代码”视图中修改视图中修改HTMLHTML代码来更改单元格的宽度和高度代码来更改单元格的宽度和高度

38、。:计算机基础与实训教材系列系列丛书官方网站 http:/ :3.2.4 3.2.4 添加或删除行或列添加或删除行或列 表格中空白的单元格也会占据页面位置，所以多余的行或列可以删除；表格中空白的单元格也会占据页面位置，所以多余的行或列可以删除；此外，也可以在特定行或列上方或左侧添加行或列此外，也可以在特定行或列上方或左侧添加行或列。:计算机基础与实训教材系列系列丛书官方网站 http:/ :3.2.5 3.2.5 拆分与合并单元格拆分与合并单元格 在制作页面时，如果插入的表格与实际效果不相符，例如有缺少或多余在制作页面时，如果插入的表格与实际效果不相符，例如有缺少或多余单元格的情况，可根据需要

39、，进行拆分和合并单元格操作单元格的情况，可根据需要，进行拆分和合并单元格操作。:计算机基础与实训教材系列系列丛书官方网站 http:/ :3.2.6 3.2.6 复制与粘贴单元格复制与粘贴单元格 用户在用户在Dreamweaver CCDreamweaver CC中插入表格并选中表格中一个单元格后，选择中插入表格并选中表格中一个单元格后，选择“编辑编辑”命令，在弹出的的菜单中可以对表格执行命令，在弹出的的菜单中可以对表格执行“剪切剪切”、“拷贝拷贝”、“粘粘贴贴”等操作等操作。:计算机基础与实训教材系列系列丛书官方网站 http:/ :3.2.7 3.2.7 设置表格内容排序设置表格内容排序

40、对于网页中插入的表格，用户可以根据单个列的内容对表格中的行进行对于网页中插入的表格，用户可以根据单个列的内容对表格中的行进行排序或者根据两个列的内容执行更加复杂的表格排序排序或者根据两个列的内容执行更加复杂的表格排序。:计算机基础与实训教材系列系列丛书官方网站 http:/ :3.2.8 3.2.8 导入与导出表格式数导入与导出表格式数据据 使用使用Dreamweaver CCDreamweaver CC，用户不仅可以将另一个应用程序，例如，用户不仅可以将另一个应用程序，例如ExcelExcel中创中创建并以分隔文本格式建并以分隔文本格式(其中的项以制表符、逗号、冒号、分号或其他分隔符隔其中的

41、项以制表符、逗号、冒号、分号或其他分隔符隔开开)保存的表格式数据导入到网页文档中并设置为表格的格式，而且还可以将保存的表格式数据导入到网页文档中并设置为表格的格式，而且还可以将Dreamweaver CCDreamweaver CC中的表格导出中的表格导出。uuu 导入表格式数据导入表格式数据导入表格式数据uuu 导出表格式数据导出表格式数据导出表格式数据 网页设计与制作基础教程网页设计与制作基础教程(第第3 3版版)第第 四四 章章制作简单图文网页制作简单图文网页:计算机基础与实训教材系列系列丛书官方网站 http:/ :学学 习习 目目 标标 文本和图像是网页中不可缺少的部分，对文本进行格

42、式化文本和图像是网页中不可缺少的部分，对文本进行格式化可以充分体现页面所要表达的重点，而在网页中插入图像的实可以充分体现页面所要表达的重点，而在网页中插入图像的实质则是把我们设计完成的最终效果展示给人们看质则是把我们设计完成的最终效果展示给人们看。:计算机基础与实训教材系列系列丛书官方网站 http:/ :本本 章章 重重 点点uu在网页中插入文本在网页中插入文本在网页中插入文本在网页中插入文本uu设置网页文本的属性设置网页文本的属性设置网页文本的属性设置网页文本的属性uu在网页中插入图像在网页中插入图像在网页中插入图像在网页中插入图像uu在网页中插入特殊符号在网页中插入特殊符号在网页中插入特

43、殊符号在网页中插入特殊符号:计算机基础与实训教材系列系列丛书官方网站 http:/ :4.1 4.1 在网页中添加文本在网页中添加文本 文本既是网页中不可缺少的内容，也是网页中最基本的对象。由于文本文本既是网页中不可缺少的内容，也是网页中最基本的对象。由于文本的存储空间非常小，所以在一些大型网站中，其占有不可代替的主导地位。的存储空间非常小，所以在一些大型网站中，其占有不可代替的主导地位。在一般网页中，文本一般以普通文字、段落或各种项目符号等形式显示在一般网页中，文本一般以普通文字、段落或各种项目符号等形式显示。uuu 输入网页文本输入网页文本输入网页文本uuu 插入特殊符号插入特殊符号插入特

44、殊符号uuu 插入日期与时间插入日期与时间插入日期与时间uuu 插入水平线插入水平线插入水平线uuu 插入滚动文字插入滚动文字插入滚动文字:计算机基础与实训教材系列系列丛书官方网站 http:/ :4.2 4.2 创建无序列表和有序列创建无序列表和有序列表表 在网页中，我们可以用很多方法来排列文本项目，可以将多种项目没有在网页中，我们可以用很多方法来排列文本项目，可以将多种项目没有顺序地排列在一起，也可以给每个项目赋予编号后再进行排列。此时，没有顺序地排列在一起，也可以给每个项目赋予编号后再进行排列。此时，没有顺序的文本排列方式称为无序列表，赋予编号排列的文本项目则称为有序列顺序的文本排列方式

45、称为无序列表，赋予编号排列的文本项目则称为有序列表表。uuu 制作无序列表制作无序列表制作无序列表uuu 制作有序列表制作有序列表制作有序列表 :计算机基础与实训教材系列系列丛书官方网站 http:/ :4.2.1 4.2.1 制作无序列表制作无序列表 在制作网页时，如果需要把各个项目美观地排列在一起，建议用户使用在制作网页时，如果需要把各个项目美观地排列在一起，建议用户使用无序列表。在无序列表中各项目前面的圆点直接用制作好的图像来替代，也无序列表。在无序列表中各项目前面的圆点直接用制作好的图像来替代，也可以在可以在CSSCSS样式表中定义更改圆点形状样式表中定义更改圆点形状。:计算机基础与实

46、训教材系列系列丛书官方网站 http:/ :4.2.2 4.2.2 制作有序列表制作有序列表 在各个项目中将赋予编号或字母表来创建的目录称为在各个项目中将赋予编号或字母表来创建的目录称为“有序列表有序列表”。在。在有序列表中各项目之间的顺序是非常重要的。在每项之前赋予数字、罗马数有序列表中各项目之间的顺序是非常重要的。在每项之前赋予数字、罗马数字的大小写以及字母表的大小写字的大小写以及字母表的大小写。:计算机基础与实训教材系列系列丛书官方网站 http:/ :4.3 4.3 设置网页文本属性设置网页文本属性 使用使用DreamweaverDreamweaver的的“属性属性”检查器可以设置网页

47、中文本的大小、颜色和检查器可以设置网页中文本的大小、颜色和字体等文本属性，并且可以设置字体等文本属性，并且可以设置HTMLHTML的基本属性，也可以设置的基本属性，也可以设置CSSCSS文本的扩文本的扩展属性展属性。uuu 设置文本基本属性设置文本基本属性设置文本基本属性uuu 添加网页文本字体添加网页文本字体添加网页文本字体:计算机基础与实训教材系列系列丛书官方网站 http:/ :4.4 4.4 在网页中插入图像在网页中插入图像 在网页中插入图像可以起到美化页面的作用，常用的图像格式有在网页中插入图像可以起到美化页面的作用，常用的图像格式有JPEGJPEG和和GIFGIF两种。在网页中适当

48、加入图像可以为网页增色不少，但图像文件过大会两种。在网页中适当加入图像可以为网页增色不少，但图像文件过大会影响网页的下载速度，因此图像要用的少而精，必要时在不失真的情况下可影响网页的下载速度，因此图像要用的少而精，必要时在不失真的情况下可以使用图像软件尽量压缩图像以使用图像软件尽量压缩图像。uuu 网页图像简介网页图像简介网页图像简介uuu 插入普通网页图像插入普通网页图像插入普通网页图像uuu 插入网页背景图像插入网页背景图像插入网页背景图像uuu 插入插入插入PhotoshopPhotoshopPhotoshop智能图像智能图像智能图像uuu 制作鼠标经过图像制作鼠标经过图像制作鼠标经过图

49、像 网页设计与制作基础教程网页设计与制作基础教程(第第3 3版版)第第 五五 章章处理与编辑网页图像处理与编辑网页图像:计算机基础与实训教材系列系列丛书官方网站 http:/ :学学 习习 目目 标标 Photoshop Photoshop是网页制作过程中设计和修改图片的必用软件之是网页制作过程中设计和修改图片的必用软件之一，应用一，应用PhotoshopPhotoshop处理网页图像，将可以使得网页的效果更加处理网页图像，将可以使得网页的效果更加绚丽多彩。本章将主要介绍绚丽多彩。本章将主要介绍Photoshop CCPhotoshop CC的一些基础知识和操作，的一些基础知识和操作，以及使用

50、该软件制作网页图片元素的方法，帮助用户掌握处理以及使用该软件制作网页图片元素的方法，帮助用户掌握处理图像并在网页中使用图像的相关知识图像并在网页中使用图像的相关知识。:计算机基础与实训教材系列系列丛书官方网站 http:/ :本本 章章 重重 点点uu Photoshop CC Photoshop CC的基本操作的基本操作的基本操作的基本操作uu 创建与编辑图像选区创建与编辑图像选区创建与编辑图像选区创建与编辑图像选区uu 编辑网页中的图像编辑网页中的图像编辑网页中的图像编辑网页中的图像:计算机基础与实训教材系列系列丛书官方网站 http:/ :5.1 Photoshop CC5.1 Phot

51、oshop CC简介简介 Adobe PhotoshopAdobe Photoshop是目前最为流行的图形图像编辑处理应用程序。一直都是目前最为流行的图形图像编辑处理应用程序。一直都以其界面美观、操作边界，功能齐全的特点，在众多的图像编辑处理软件中以其界面美观、操作边界，功能齐全的特点，在众多的图像编辑处理软件中高居榜首。使用高居榜首。使用PhotoshopPhotoshop软件强大的图像修饰和色彩调整功能，可修复图软件强大的图像修饰和色彩调整功能，可修复图像画面的瑕疵，调整图像画面的色彩和色调，并且可以自由合成多张图像从像画面的瑕疵，调整图像画面的色彩和色调，并且可以自由合成多张图像从而获得

52、满意的创意效果而获得满意的创意效果。uuu Photoshop CCPhotoshop CCPhotoshop CC的工作界面的工作界面的工作界面uuu Photoshop CCPhotoshop CCPhotoshop CC的基本操作的基本操作的基本操作:计算机基础与实训教材系列系列丛书官方网站 http:/ :5.1.1 Photoshop CC5.1.1 Photoshop CC的工作的工作界面界面 如许多应用程序一样，当系统安装完如许多应用程序一样，当系统安装完Photoshop CCPhotoshop CC后会自动在后会自动在“开始开始”菜单中设置一个程序快捷方式，用户只要选择菜单中

53、设置一个程序快捷方式，用户只要选择“开始开始”|“所有程序所有程序”|Adobe Master Collection CC|Adobe Photoshop CCAdobe Master Collection CC|Adobe Photoshop CC命令，或直接双击桌面上的命令，或直接双击桌面上的Photoshop CCPhotoshop CC快捷方式图标可启动该软件快捷方式图标可启动该软件。uuu 菜单栏菜单栏菜单栏uuu 选项栏选项栏选项栏uuu 工具箱工具箱工具箱uuu 文档窗口文档窗口文档窗口uuu 状态栏状态栏状态栏uuu 面板面板面板:计算机基础与实训教材系列系列丛书官方网站 ht

54、tp:/ :5.1.2 Photoshop CC5.1.2 Photoshop CC的基本的基本操作操作 在使用在使用PhotoshopPhotoshop处理网页图像之前，用户应掌握该软件的基本操作方法，处理网页图像之前，用户应掌握该软件的基本操作方法，包括新建图像、保存图像和打开图像等包括新建图像、保存图像和打开图像等。uuu 新建文件新建文件新建文件uuu 打开文件打开文件打开文件uuu 置入文件置入文件置入文件uuu 保存文件保存文件保存文件uuu 关闭文件关闭文件关闭文件:计算机基础与实训教材系列系列丛书官方网站 http:/ :5.2 5.2 处理网页图像处理网页图像 使用使用Pho

55、toshopPhotoshop进行网页图像制作之前，用户可以对图像素材进行编修处进行网页图像制作之前，用户可以对图像素材进行编修处理，如调整图像的大小、校正变形、二次构图等操作，使其更加符合需求理，如调整图像的大小、校正变形、二次构图等操作，使其更加符合需求。uuu 网页图像的基础知识网页图像的基础知识网页图像的基础知识uuu 图像文件的基本操作图像文件的基本操作图像文件的基本操作uuu 常用工具的使用方法常用工具的使用方法常用工具的使用方法uuu 处理图层的操作方法处理图层的操作方法处理图层的操作方法uuu 创建路径创建路径创建路径uuu 使用通道使用通道使用通道uuu 使用图层蒙版使用图层

56、蒙版使用图层蒙版uuu 使用滤镜使用滤镜使用滤镜:计算机基础与实训教材系列系列丛书官方网站 http:/ :5.2.1 5.2.1 网页图像的基础知识网页图像的基础知识 在计算机中，图像都是以数字的方式进行记录和存储的，大致可分为矢在计算机中，图像都是以数字的方式进行记录和存储的，大致可分为矢量图像和位图图像两种。这两种图像类型有着各自的优点，在处理图像文件量图像和位图图像两种。这两种图像类型有着各自的优点，在处理图像文件的过程中，这两种类型经常交叉使用的过程中，这两种类型经常交叉使用。uuu 位图与矢量图位图与矢量图位图与矢量图uuu 网页图像格式网页图像格式网页图像格式:计算机基础与实训教

57、材系列系列丛书官方网站 http:/ :5.2.2 5.2.2 图像文件的基本操作图像文件的基本操作 在使用在使用PhotoshopPhotoshop制作网页图像元素之前，用户首先应掌握使用制作网页图像元素之前，用户首先应掌握使用PhotoshopPhotoshop处理图像的一些基本操作方法处理图像的一些基本操作方法。uuu 调整图像大小调整图像大小调整图像大小uuu 创建图像选区创建图像选区创建图像选区:计算机基础与实训教材系列系列丛书官方网站 http:/ :5.2.3 5.2.3 常用工具的使用方法常用工具的使用方法 PhotoshopPhotoshop的的“工具工具”面板中显示了所有的

58、可用工具，熟练使用这些工具面板中显示了所有的可用工具，熟练使用这些工具是使用是使用PhotoshopPhotoshop制作网页图像的前提，下面将主要介绍设计网页图片元素制作网页图像的前提，下面将主要介绍设计网页图片元素时常用的工具时常用的工具。uuu 套索工具套索工具套索工具uuu 魔棒工具魔棒工具魔棒工具uuu 画笔工具画笔工具画笔工具uuu 铅笔工具铅笔工具铅笔工具uuu 模糊工具模糊工具模糊工具uuu 锐化工具锐化工具锐化工具 uuu仿制图章仿制图章仿制图章uuu 图案图章图案图章图案图章uuu 擦除工具擦除工具擦除工具uuu 渐变工具渐变工具渐变工具uuu 油漆桶工具油漆桶工具油漆桶工

59、具:计算机基础与实训教材系列系列丛书官方网站 http:/ :5.2.4 5.2.4 处理图层的操作方法处理图层的操作方法 图层是图层是PhotoshopPhotoshop中非常重要的一个概念，它是中非常重要的一个概念，它是PhotoshopPhotoshop实现绘制和处实现绘制和处理图像的基础。在绘图、使用滤镜或调整图像时，这些操作只影响所处理的理图像的基础。在绘图、使用滤镜或调整图像时，这些操作只影响所处理的图层。如果对某一图层的编辑结果不满意，则可以放弃这些修改，重新编辑，图层。如果对某一图层的编辑结果不满意，则可以放弃这些修改，重新编辑，这时文档的其他部分不会受到影响这时文档的其他部分

60、不会受到影响。uuu 添加图层添加图层添加图层uuu 调整图层调整图层调整图层uuu 复制图层复制图层复制图层uuu 删除图层删除图层删除图层uuu 链接图层链接图层链接图层uuu 合并图层合并图层合并图层uuu 添加图层样式添加图层样式添加图层样式:计算机基础与实训教材系列系列丛书官方网站 http:/ :5.2.5 5.2.5 创建路径创建路径 在在PhotoshopPhotoshop中可以使用中可以使用“工具工具”面板中的面板中的“钢笔钢笔”工具、工具、“自由钢笔自由钢笔”工具和工具和“路径选择路径选择”工具创建路径工具创建路径。uuu 使用使用使用“钢笔钢笔钢笔”工具工具工具uuu 使

61、用使用使用“自由钢笔自由钢笔自由钢笔”工具工具工具uuu 使用使用使用“路径选择路径选择路径选择”工具工具工具:计算机基础与实训教材系列系列丛书官方网站 http:/ :5.2.6 5.2.6 使用通道使用通道 在在PhotoshopPhotoshop中，通道是图像文件颜色数据信息的一种存储形式，它与图中，通道是图像文件颜色数据信息的一种存储形式，它与图像文件的颜色模式密切关联，多个分色通道叠加在一起可以组成一幅具有颜像文件的颜色模式密切关联，多个分色通道叠加在一起可以组成一幅具有颜色层次的图像。通道还可以用来存放选区和蒙版，让用户完成更复杂的操作色层次的图像。通道还可以用来存放选区和蒙版，让

62、用户完成更复杂的操作和控制图像的特定部分和控制图像的特定部分。uuu 创建和编辑通道创建和编辑通道创建和编辑通道uuu 复制和删除通道复制和删除通道复制和删除通道:计算机基础与实训教材系列系列丛书官方网站 http:/ :5.2.7 5.2.7 使用图层蒙版使用图层蒙版 图层蒙版是图像处理中最为常用的蒙版，主要用来显示或隐藏图层的部图层蒙版是图像处理中最为常用的蒙版，主要用来显示或隐藏图层的部分内容，在编辑的同时保留原图像不因编辑而受到破坏分内容，在编辑的同时保留原图像不因编辑而受到破坏。uuu 创建图层蒙版创建图层蒙版创建图层蒙版uuu 应用图层蒙版应用图层蒙版应用图层蒙版uuu 停用与启用

63、图层蒙版停用与启用图层蒙版停用与启用图层蒙版uuu 删除图层蒙版删除图层蒙版删除图层蒙版:计算机基础与实训教材系列系列丛书官方网站 http:/ :5.2.8 5.2.8 使用滤镜使用滤镜 PhotoshopPhotoshop中的滤镜是一种插件模块，使用滤镜可以改变图像像素的位置中的滤镜是一种插件模块，使用滤镜可以改变图像像素的位置或颜色从而产生各种特殊的图像效果。或颜色从而产生各种特殊的图像效果。PhotoshopPhotoshop提供了多达百种的滤镜，提供了多达百种的滤镜，这些滤镜经过分组归类后存放在这些滤镜经过分组归类后存放在“滤镜滤镜”菜单中。同时，菜单中。同时，PhotoshopPh

64、otoshop还支持还支持由第三方开发商提供的增效工具。在安装后，这些增效工具滤镜出现在由第三方开发商提供的增效工具。在安装后，这些增效工具滤镜出现在“滤滤镜镜”菜单的底部，与内置滤镜一样使用菜单的底部，与内置滤镜一样使用。uuu 使用滤镜使用滤镜使用滤镜uuu 使用滤镜库使用滤镜库使用滤镜库:计算机基础与实训教材系列系列丛书官方网站 http:/ :5.3 5.3 编辑网页图像编辑网页图像 在网页中插入图像后，可以设置图像属性、对齐方式等编辑操作，这些在网页中插入图像后，可以设置图像属性、对齐方式等编辑操作，这些编辑操作可以直接影响网页的整体效果编辑操作可以直接影响网页的整体效果。uuu 设

65、置网页图像属性设置网页图像属性设置网页图像属性uuu 使用图像编辑器使用图像编辑器使用图像编辑器:计算机基础与实训教材系列系列丛书官方网站 http:/ :5.3.1 5.3.1 设置网页图像属性设置网页图像属性 在网页文档中插入图像后，需要经常对图像进行大小、对齐方式、边距在网页文档中插入图像后，需要经常对图像进行大小、对齐方式、边距等属性的设置，这些设置可以在等属性的设置，这些设置可以在“属性属性”面板中进行面板中进行。uuu 设定图像名称设定图像名称设定图像名称uuu 调整图像大小调整图像大小调整图像大小uu 替换图像源文件替换图像源文件替换图像源文件uuu 添加图像替换文件添加图像替换

66、文件添加图像替换文件uuu 剪裁图像剪裁图像剪裁图像:计算机基础与实训教材系列系列丛书官方网站 http:/ :5.3.2 5.3.2 使用图像编辑器使用图像编辑器 在在DreamweaverDreamweaver中，图像编辑器主要分为内部图像编辑器和外部图像编中，图像编辑器主要分为内部图像编辑器和外部图像编辑器。下面将分别介绍内部图像编辑器和外部图像编辑器的功能及特点辑器。下面将分别介绍内部图像编辑器和外部图像编辑器的功能及特点。uuu 使用内部图像编辑器使用内部图像编辑器使用内部图像编辑器uuu 使用外部图像编辑器使用外部图像编辑器使用外部图像编辑器 网页设计与制作基础教程网页设计与制作基础教程(第第3 3版版)第第 六六 章章制作多媒体网页制作多媒体网页:计算机基础与实训教材系列系列丛书官方网站 http:/ :学学 习习 目目 标标 除了在网页中使用文本和图像元素来表达页面信息以外，除了在网页中使用文本和图像元素来表达页面信息以外，在制作网页时还可以向其中插入在制作网页时还可以向其中插入FlashFlash动画、视频和音乐控件等动画、视频和音乐控件等内容，以丰富网页的效果。本章