第3章 Dreamweaver基础2ppt课件.ppt

在此输入您的封面副标题第3章 Dreamweaver基础2中国铁道出版社中国铁道出版社 2016.122016.12李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 编著：编著：李红李红 岳云康岳云康 樊东燕樊东燕中国铁道出版社2016.9中国铁道出版社中国铁道出版社 2016.122016.12李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 主讲：主讲： 第3章 Dreamweaver基础中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 熟悉熟悉Dreamweaver CCDreamweaver CC的工作环境；掌握运用的工作环境；掌握运用DreamweaverDreamweaver建立本建立本地站点与管理站点文件的基本方法；掌握在网页中添加文字、图像、地站点与管理站点文件的基本方法；掌握在网页中添加文字、图像、多媒体等网页元素，并实现页面间的跳转链接；能使用多媒体等网页元素，并实现页面间的跳转链接；能使用CSSCSS对页面进对页面进行美化。行美化。技能目标：技能目标： 综合运用综合运用Dreamweaver的各项功能结合的各项功能结合HTML和和CSS语语法进行网页设计。法进行网页设计。能力目标：能力目标： 培养和提升自身的审美观，合理的组织网页元素美化页面。培养和提升自身的审美观，合理的组织网页元素美化页面。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 网页文档的基本操作网页文档的基本操作使用超链接使用超链接 3.6 站点管理和网页管理站点管理和网页管理3.5 使用使用CSS美化网页美化网页中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 网页编辑工具Dreamweaver介绍 本节要点中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B CC的界面 首次启动首次启动Dreamweaver CC后就可以看到图后就可以看到图3-1所示的界所示的界面，此时的工作环境主要用于设置网站，操作内容有菜单面，此时的工作环境主要用于设置网站，操作内容有菜单栏和浮动面板组的文件面板。栏和浮动面板组的文件面板。菜单栏中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 菜单栏：由文件、编辑、查看、插入、修改、格式、命令菜单栏：由文件、编辑、查看、插入、修改、格式、命令、站点、窗口、帮助等菜单组成，每个菜单中都包含有一、站点、窗口、帮助等菜单组成，每个菜单中都包含有一系列命令。其中的系列命令。其中的“站点站点”菜单下的菜单下的“新建站点新建站点”命令主命令主要用于新建站点；要用于新建站点；“窗口窗口”菜单主要用于打开文件面板和菜单主要用于打开文件面板和插入面板等。插入面板等。 文件面板：是常用的浮动功能面板之一，文件面板默认显文件面板：是常用的浮动功能面板之一，文件面板默认显示上次编辑的站点，如图示上次编辑的站点，如图3-3。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B CC的工作环境由菜单栏、文档窗口、插入面板、属的工作环境由菜单栏、文档窗口、插入面板、属性面板和面板组等多部分组成。性面板和面板组等多部分组成。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 文档标签：文档标签：文档窗口的左上角显示网页文档的名称，如文档窗口的左上角显示网页文档的名称，如Untitle.html，当有多个文档进行编辑时，网页文档名称以标签形，当有多个文档进行编辑时，网页文档名称以标签形式排列，以便于在各网页文件之间快速的进行切换。式排列，以便于在各网页文件之间快速的进行切换。 工作视图按钮：工作视图按钮：文档标签下方提供了文档标签下方提供了3种工作视图，分别是代码视种工作视图，分别是代码视图、拆分视图和设计视图。代码视图是一种直接编写图、拆分视图和设计视图。代码视图是一种直接编写HTML代码代码的工作环境，相当于记事本；设计视图是一种可视化的工作环境的工作环境，相当于记事本；设计视图是一种可视化的工作环境，通过界面操作完成网页元素的编辑，适合于初学者使用；拆分，通过界面操作完成网页元素的编辑，适合于初学者使用；拆分视图则将工作区分成了两个区域，一半是代码视图，一半是设计视图则将工作区分成了两个区域，一半是代码视图，一半是设计视图，图视图，图3-2显示的是拆分视图下的文档编辑窗口。在一个区域中显示的是拆分视图下的文档编辑窗口。在一个区域中进行编辑的时候，另一个区域也会随之发生变化。进行编辑的时候，另一个区域也会随之发生变化。 状态栏：状态栏：文档窗口底部是状态栏，状态栏左边显示了网页中的各文档窗口底部是状态栏，状态栏左边显示了网页中的各种种HTML标签、设备类型和窗口大小等信息。标签、设备类型和窗口大小等信息。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 插入面板：有常用、结构、媒体、表单、插入面板：有常用、结构、媒体、表单、jQuery Mobile、jQuery UI、模板和收藏夹等、模板和收藏夹等8个对象面板，每个个对象面板，每个对象面板都包含一组命令按钮，利用这些按钮可以方便快对象面板都包含一组命令按钮，利用这些按钮可以方便快速地插入图像、表格、多媒体等各种类型的网页元素（可速地插入图像、表格、多媒体等各种类型的网页元素（可以通过以通过“窗口窗口”“插入插入”打开或关闭）。打开或关闭）。 属性面板：用于设置网页元素的属性。不同的网页元素属性面板：用于设置网页元素的属性。不同的网页元素其属性面板的样子也不相同，编辑网页时，选中的对象不其属性面板的样子也不相同，编辑网页时，选中的对象不同，属性面板中的内容也会随之发生变化。同，属性面板中的内容也会随之发生变化。 浮动面板：窗口右端是浮动面板组，可以通过窗口菜单浮动面板：窗口右端是浮动面板组，可以通过窗口菜单命令打开，包含了文件、插入、命令打开，包含了文件、插入、CSS样式、资源等一系列样式、资源等一系列浮动面板，如图浮动面板，如图3-3。单击还可以显示其设置对话框，其。单击还可以显示其设置对话框，其中文件面板是常用的功能面板之一，如图中文件面板是常用的功能面板之一，如图3-4，用户可以，用户可以自行对其进行拆分和组合。自行对其进行拆分和组合。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 创建及设置本地站点创建及设置本地站点1.创建本地站点的目的创建本地站点的目的创建本地站点就是将本地文件夹中的网页文件与创建本地站点就是将本地文件夹中的网页文件与Dreamweaver系统系统之间建立一种关联性，这样，设计者就可以通过之间建立一种关联性，这样，设计者就可以通过Dreamweaver软件软件来管理站点中的文件。创建本地站点实质上就是在本地硬盘上创建一来管理站点中的文件。创建本地站点实质上就是在本地硬盘上创建一系列的一个文件和文件夹，把网站中所涉及到的各种网页文件和图形系列的一个文件和文件夹，把网站中所涉及到的各种网页文件和图形、多媒体素材按照类别放在不同的文件夹中，以便利用、多媒体素材按照类别放在不同的文件夹中，以便利用Dreamweaver软件对网站中的各种文件进行管理。因此，在创建本软件对网站中的各种文件进行管理。因此，在创建本地站点的第一步，应该首先在本地硬盘上建立一个文件夹。地站点的第一步，应该首先在本地硬盘上建立一个文件夹。在开始制作网页之前，最好先建立一个本地站点，以便全面系统地管在开始制作网页之前，最好先建立一个本地站点，以便全面系统地管理网站中的网页文件、图像文件和多媒体文件，也可以尽可能避免各理网站中的网页文件、图像文件和多媒体文件，也可以尽可能避免各种错误，如路径出错、链接不能实现等问题。初学者往往是由于文件种错误，如路径出错、链接不能实现等问题。初学者往往是由于文件的存放没有条理，网页经常会出现图片不能显示、链接出错等问题。的存放没有条理，网页经常会出现图片不能显示、链接出错等问题。因此，建议在开始制作网页之前，先建立一个文件夹用于存放网站的因此，建议在开始制作网页之前，先建立一个文件夹用于存放网站的所有文件，再在该文件夹内建几个子文件夹，把网页中所涉及到的图所有文件，再在该文件夹内建几个子文件夹，把网页中所涉及到的图片、多媒体等素材分门别类的放在站点文件夹中。片、多媒体等素材分门别类的放在站点文件夹中。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2.创建及设置本地站点创建及设置本地站点 创建本地站点前，先在你计算机硬盘的根目录下（如创建本地站点前，先在你计算机硬盘的根目录下（如D盘盘或或E盘盘)下新建一个站点文件夹，用以给网页安个下新建一个站点文件夹，用以给网页安个“家家”。接着在该文件夹中还可以建立几个子文件夹，把网站用到接着在该文件夹中还可以建立几个子文件夹，把网站用到的所有图像、多媒体素材、程序文件全部放在这个网站文的所有图像、多媒体素材、程序文件全部放在这个网站文件夹中。本地站点的创建分两步：一是新建一个站点文件件夹中。本地站点的创建分两步：一是新建一个站点文件夹，二是设置本地文件夹和夹，二是设置本地文件夹和DW软件的关联。软件的关联。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 第第1步：步：创建站点文件夹。步骤如下：创建站点文件夹。步骤如下： 在在D盘根目录下新建一个文件夹。打开盘根目录下新建一个文件夹。打开“我的电脑我的电脑”，打开打开D盘，点鼠标右键，选择盘，点鼠标右键，选择“新建新建”“文件夹文件夹”选项选项，D盘下会出现一个新建文件夹图标。盘下会出现一个新建文件夹图标。 输入你要的站点名称，这里输入输入你要的站点名称，这里输入ncpshop。如图。如图3-5。 再在该文件夹下新建图像文件夹，如再在该文件夹下新建图像文件夹，如images；或同时；或同时在该根文件夹下新建几个你拟设计的网页模块的文件夹。在该根文件夹下新建几个你拟设计的网页模块的文件夹。如如images、css、js、techan等文件夹。等文件夹。 注意：文件夹名称可以任意的，但尽量使用西文，不要用注意：文件夹名称可以任意的，但尽量使用西文，不要用中文，可参考。中文，可参考。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 第第2步：步：运用运用DW设置本地文件和设置本地文件和DW软件的关联。步骤如下：软件的关联。步骤如下： 启动启动Dreamweaver，选择，选择“站点站点”“新建站点新建站点”命令，命令，打开打开“站点设置对象站点设置对象”对话框，默认对话框如图对话框，默认对话框如图3-6所示。所示。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 在在“站点设置对象站点设置对象”对话框的对话框的“站点名称站点名称”文本框内输入文本框内输入站点的名称站点的名称“ncpshop”。 单击单击“本地站点文件夹本地站点文件夹”文本框右边的按钮，选择站点文文本框右边的按钮，选择站点文件夹所在的位置，即件夹所在的位置，即“D:ncpshop”。 接下来，在接下来，在“站点设置对象站点设置对象”对话框的左边，单击对话框的左边，单击“高级高级设置设置”，出现新的，出现新的“站点设置对象站点设置对象 ncpshop”对话框，如图对话框，如图3-7所示。所示。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 单击右面区域中的单击右面区域中的“默认图像文件夹默认图像文件夹”文本框右边的按文本框右边的按钮，选择站点内图片的默认保存位置，如钮，选择站点内图片的默认保存位置，如“D:ncpshopimages”。 勾选勾选“启用缓存启用缓存”复选框，可以提高链接的更新速度，复选框，可以提高链接的更新速度，默认为选中状态。默认为选中状态。 单击单击“确定确定”按钮，此时在按钮，此时在“文件文件”面板中会看到如图面板中会看到如图3-4所示的站点结构图，站点所示的站点结构图，站点“ncpshop”创建成功。创建成功。 远程站点的设置内容将在第节介绍。远程站点的设置内容将在第节介绍。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 网页文档的基本操作网页文档的基本操作2. 设置站点首页设置站点首页3. 制作网页的一般过程制作网页的一般过程本节要点中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 的文件，此时可以直的文件，此时可以直接为其重命名，或者在该文件名上单击右键，选择接为其重命名，或者在该文件名上单击右键，选择“编辑编辑”“重命重命名名”改名字，如改名字，如index.html，就创建了第一个网页文件，但是扩展名，就创建了第一个网页文件，但是扩展名必须为必须为“.html”。要编辑这个文件，用鼠标双击它就行了。网页文件。要编辑这个文件，用鼠标双击它就行了。网页文件的命名规范，参见节。的命名规范，参见节。在在“文件文件”面板窗口也可以用来在站点中创建文件夹，步骤和建立网面板窗口也可以用来在站点中创建文件夹，步骤和建立网页文件的步骤相似。首先用鼠标选中相应的上一层文件夹，单击右键页文件的步骤相似。首先用鼠标选中相应的上一层文件夹，单击右键弹出菜单选择弹出菜单选择“新建文件夹新建文件夹”选项，为其重命名。通过上面创建新网选项，为其重命名。通过上面创建新网页文件的办法，我们可以创建任意数目的文件或文件夹。页文件的办法，我们可以创建任意数目的文件或文件夹。2.打开网页文档打开网页文档 在在“文件文件”面板中双击文件名，或者在该文件名上单击右键，选择面板中双击文件名，或者在该文件名上单击右键，选择“打开打开”，就可以在文档窗口打开该文件，接下来就可以在工作区对文，就可以在文档窗口打开该文件，接下来就可以在工作区对文档进行编辑了。档进行编辑了。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 3.保存网页文档保存网页文档 通过上述方式创建的网页已经被保存在了站点文件夹内，通过上述方式创建的网页已经被保存在了站点文件夹内，当我们对该网页编辑后，单击保存或按当我们对该网页编辑后，单击保存或按【Ctrl+S】组合键组合键即可。也可以选择菜单栏的即可。也可以选择菜单栏的“文件文件”“保存保存”。 4.关闭网页文档关闭网页文档 完成对网页文档的编辑、保存后，单击文档窗口上的的来完成对网页文档的编辑、保存后，单击文档窗口上的的来关闭当前文档，或通过关闭当前文档，或通过“文件文件”“关闭关闭”命令关闭文档命令关闭文档。 5.网页文档的初始化网页文档的初始化 单击单击“编辑编辑”“首选参数首选参数”命令，打开命令，打开“首选参数首选参数”对对话框，在左侧的话框，在左侧的“分类分类”项中选择项中选择“新建文档新建文档”选项，出选项，出现如图现如图3-8所示对话框，设置所示对话框，设置“默认文档类型默认文档类型”为为html5，这样我们在软件里新建的文档默认为这样我们在软件里新建的文档默认为html5文档。也可以文档。也可以设置其他文档类型，如设置其他文档类型，如XHTML1.1。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 每个网站都包含至少一个网页，其中有一个页面包含所有每个网站都包含至少一个网页，其中有一个页面包含所有跳转到其他页面的链接，它就是首页。首页是浏览网站时跳转到其他页面的链接，它就是首页。首页是浏览网站时看到的第一个页面，通常被命名为看到的第一个页面，通常被命名为index.html或或default.html。比如，在地址栏中输入。比如，在地址栏中输入http:/，虽然指明，虽然指明要访问的站点的主机地址，但是并没有说明要浏览其上的要访问的站点的主机地址，但是并没有说明要浏览其上的哪一个文件，这时会自动打开该站点的首页，因此输入哪一个文件，这时会自动打开该站点的首页，因此输入http:/www. /，就相当于是输入了，就相当于是输入了http:/或或http:/ /default.html。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 基本网页元素编辑1.设置网页页面属性设置网页页面属性2.在网页中插入头部内容在网页中插入头部内容3.网页文本的编辑网页文本的编辑4.网页图像的设置网页图像的设置本节要点中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 编辑网页的第一步，就是选择菜单编辑网页的第一步，就是选择菜单“修改修改”“页面属性页面属性”，打开，打开“页面属性页面属性”对话框来设置网页标题等网页元素对话框来设置网页标题等网页元素，如图，如图3-9所示。对话框中左边有所示。对话框中左边有“外观（外观（CSS）、外观）、外观（HTML）、链接）、链接(CSS)、标题、标题(CSS)、标题、标题/编码、跟踪编码、跟踪图像图像”六个分类，这里只介绍六个分类，这里只介绍“标题标题/编码编码”。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 在左侧选择在左侧选择“标题标题/编码编码”分类，可以设置网页的标题和分类，可以设置网页的标题和文字编码等元素：文字编码等元素： 标题：设置网页的标题：设置网页的标签。标签。 文档类型：设置网页的文档声明类型。一般选择文档类型：设置网页的文档声明类型。一般选择HTML5，也可以设置其他类型。，也可以设置其他类型。 编码：设置网页的字体编码。编码：设置网页的字体编码。Unicode（UTF-8）是世界）是世界性通用代码，完美的支持中文编码，性通用代码，完美的支持中文编码，HTML5环境下最好环境下最好选择选择UTF-8。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 1.插入插入META标签标签 标签一般用来描述网页文件自身信息，是网页设标签一般用来描述网页文件自身信息，是网页设计中非常重要的元素。计中非常重要的元素。元素常用于描述一些该页元素常用于描述一些该页面的一些基本信息，普通浏览者不会使看到相关数据，搜面的一些基本信息，普通浏览者不会使看到相关数据，搜索引擎对这里的数据很感兴趣。索引擎对这里的数据很感兴趣。元素也是网络营元素也是网络营销运作的主要阵地。销运作的主要阵地。 插入插入META的具体操作步骤如下：的具体操作步骤如下： 执行执行“插入插入”“Head”“META”命令，弹出命令，弹出“META”对话框，如图对话框，如图3-10。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2. 设置移动设备的视区设置移动设备的视区 移动设备的屏幕一般都比移动设备的屏幕一般都比PC小很多，移动设备的浏览器小很多，移动设备的浏览器（核心是（核心是webkit）会将一个较大的）会将一个较大的“虚拟虚拟”窗口映射到移窗口映射到移动设备的屏幕上，默认的虚拟窗口为动设备的屏幕上，默认的虚拟窗口为980像素宽（目前大像素宽（目前大部分网页的标准宽度），然后按一定的比例（部分网页的标准宽度），然后按一定的比例（3：1或或2：1）进行缩放。也就是说当我们加载一个普通网页的时候）进行缩放。也就是说当我们加载一个普通网页的时候，webkit会先以会先以980像素的浏览器标准加载网页，然后再像素的浏览器标准加载网页，然后再缩小为缩小为490像素的宽度。注意这个缩小是一个全局缩小，像素的宽度。注意这个缩小是一个全局缩小，也就是页面上的所有元素都会缩小。移动版的也就是页面上的所有元素都会缩小。移动版的 Safari 浏浏览器最先引进了览器最先引进了viewport 这个这个 meta标签，让网页开发者标签，让网页开发者来控制来控制 viewport 的大小和缩放，其他手机浏览器也基本的大小和缩放，其他手机浏览器也基本支持。在用支持。在用HTML5开发手机应用或手机网页时，需要设开发手机应用或手机网页时，需要设置置meta的的viewport属性，属性，DW设置移动设备视区的设置移动设备视区的中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B width：控制：控制 viewport 的大小，可以指定的一个值，如的大小，可以指定的一个值，如600或者或者特殊的值，如特殊的值，如 device-width 为设备的宽度（单位为缩放为为设备的宽度（单位为缩放为 100% 时的时的 CSS 的像素）；的像素）； height：和：和 width 相对应，指定高度；相对应，指定高度； initial-scale：初始缩放比例，也即是当页面第一次：初始缩放比例，也即是当页面第一次 load 的时候的时候缩放比例；缩放比例； maximum-scale：允许用户缩放到的最大比例；：允许用户缩放到的最大比例； minimum-scale：允许用户缩放到的最小比例；：允许用户缩放到的最小比例； user-scalable：用户是否可以手动缩放。：用户是否可以手动缩放。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 按下按下【Crtl+Shift+Space】组合键。组合键。转换中文输入法的转换中文输入法的“半角半角”为为“全角全角”，在工作区中连续单击，在工作区中连续单击“空格空格”键。键。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B （3）插入特殊字符）插入特殊字符 特殊字符，比如版权符号、商标符号、英磅符号、左引号特殊字符，比如版权符号、商标符号、英磅符号、左引号、右引号、破折号等，一般不能在键盘上直接输入，可以、右引号、破折号等，一般不能在键盘上直接输入，可以选择选择“插入记录插入记录”“字符字符”来输入。来输入。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B ，如图，如图3-12所示，是所示，是Dreamweaver的可视化设置文本属性的界面，其实质是生成的可视化设置文本属性的界面，其实质是生成HTML代码来修改文本属性的。代码来修改文本属性的。格式：可以为文本设置段落和标题样式。段落就是增加格式：可以为文本设置段落和标题样式。段落就是增加标标记。而六级标题，分别对应记。而六级标题，分别对应HTML标记标记。类：可以为所选文本添加类样式。当我们设计了类：可以为所选文本添加类样式。当我们设计了CSS类样式后，所类样式后，所有的样式名都会显示在有的样式名都会显示在“类类”下拉列表框中，供其它文字使用。下拉列表框中，供其它文字使用。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 和和 按钮：设置文本为粗体和斜体。先选中网页中的文字，然后按钮：设置文本为粗体和斜体。先选中网页中的文字，然后单击和按钮，可将该文字设置为粗体和斜体，相当于添加了单击和按钮，可将该文字设置为粗体和斜体，相当于添加了strong和和em标签。标签。 按钮：用于设置列表；用于设置段落缩进。要改变段按钮：用于设置列表；用于设置段落缩进。要改变段落文字与页面左边界的距离，可以将光标定位在文字区，然后单击文落文字与页面左边界的距离，可以将光标定位在文字区，然后单击文（文本凸出，每点一下向左移两个单位）按钮或（文本缩进，每点一（文本凸出，每点一下向左移两个单位）按钮或（文本缩进，每点一次向右移两个单位）按钮。次向右移两个单位）按钮。链接：为所选文字创建超链接。详细设置参照链接：为所选文字创建超链接。详细设置参照3.4节。节。标题：为链接文字设置提示说明，对应标题：为链接文字设置提示说明，对应title属性。浏览时当光标指属性。浏览时当光标指向链接文字时，会出现该提示。向链接文字时，会出现该提示。目标：设置链接网页打开的窗口，详见。目标：设置链接网页打开的窗口，详见。图图3-13是选中的效果，该项主要是设置文本显示效果的。实质上是修是选中的效果，该项主要是设置文本显示效果的。实质上是修改改CSS样式的设置。其主要含义如下：样式的设置。其主要含义如下：中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 的效果，该项主要是设置文本显示效果的。实质上是修改的效果，该项主要是设置文本显示效果的。实质上是修改CSS样式的设置。其主要含义如下：样式的设置。其主要含义如下：目标规则：用来设置控制网页文字外观的目标规则：用来设置控制网页文字外观的CSS样式属性。详细介绍请参照样式属性。详细介绍请参照3.5节。节。字体：后面有字体：后面有3个下拉列表框，分别是默认字体、字体样式和字体粗细。默认字体以个下拉列表框，分别是默认字体、字体样式和字体粗细。默认字体以字体组合的形式呈现，这样网页在显示时，会按照字体组合中指定的顺序自动寻找用字体组合的形式呈现，这样网页在显示时，会按照字体组合中指定的顺序自动寻找用户计算机中安装的字体，尽可能的避免了网页内容不能正常显示的问题。字体样式下户计算机中安装的字体，尽可能的避免了网页内容不能正常显示的问题。字体样式下拉列表主要有斜体等。字体粗细列出了一系列的设置。拉列表主要有斜体等。字体粗细列出了一系列的设置。大小：用于设置文字大小的值和单位。大小：用于设置文字大小的值和单位。颜色：单击，弹出颜色选择面板，从中可以选择文字的颜色。颜色：单击，弹出颜色选择面板，从中可以选择文字的颜色。对齐方式：、四个按钮分别表示文字在水平方向上的四种对齐方式，左对齐、对齐方式：、四个按钮分别表示文字在水平方向上的四种对齐方式，左对齐、居中对齐、右对齐、两端对齐。居中对齐、右对齐、两端对齐。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 制作步骤如下：制作步骤如下： 启动启动Dreamweaver，“文件面板文件面板”默认站点为上次定默认站点为上次定义的站点。如果没有站点，须按照义的站点。如果没有站点，须按照【案例案例3-1】的操作步的操作步骤新建站点。骤新建站点。 在文件面板中，用鼠标选择站点文件夹在文件面板中，用鼠标选择站点文件夹ncpshop，单击，单击右键，新建一个空白文件夹，重命名为右键，新建一个空白文件夹，重命名为techan；再鼠标；再鼠标选中选中techan文件夹，单击右键，新建一个空白文档，重文件夹，单击右键，新建一个空白文档，重命名为命名为“techan.html”。 双击打开双击打开“techan.html”，在文档窗口的工具栏，在文档窗口的工具栏“标题标题”文本框中输入网页标题，如文本框中输入网页标题，如“山西农产品地域分布及特山西农产品地域分布及特色色”。 在空白的网页文档工作区中键入网页文字内容在空白的网页文档工作区中键入网页文字内容“山西农山西农产品地域分布及特色产品地域分布及特色”。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 2016.12 B 设置文字为一级标题。操作方法是：首先选中文字设置文字为一级标题。操作方法是：首先选中文字“山山西农产品地域分布及特色西农产品地域分布及特色”，在文本属性面板（图，在文本属性面板（图3-12）中单击中单击“格式格式”下拉列表，选中其中的下拉列表，选中其中的“标题标题1”即可。即可。 链接和标题：链接用于设置文字链接属性，相关设置参链接和标题：链接用于设置文字链接属性，相关设置参考。标题用于设置文字的提示效果，相当于添加了考。标题用于设置文字的提示效果，相当于添加了title标标签。签。 其它文字的其它文字的CSS效果设置方法，参考效果设置方法，参考3. 5节案例节案例3-6。 编辑完成后，选择编辑完成后，选择“文件文件”“保存保存”命令，按下【命令，按下【F12】键也可预览。案例效果如图】键也可预览。案例效果如图3-15所示。所示。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 2016.12 B 链接：指定图像的链接文件的链接：指定图像的链接文件的URL地址。地址。“目标目标”一般和一般和链接一起使用。链接一起使用。 标题：对应标题：对应title属性，可以设置鼠标放置在图像上的提示属性，可以设置鼠标放置在图像上的提示文字。文字。 替换：对应替换：对应alt属性，表示如果浏览器无法正常显示图像，属性，表示如果浏览器无法正常显示图像，在图像的位置会显示替代性说明文字。在图像的位置会显示替代性说明文字。 原始：低解析度源，设置当前图像的低品质源图像的路径原始：低解析度源，设置当前图像的低品质源图像的路径。 编辑按钮：对图像的处理还可以点击后面的按钮和中的按编辑按钮：对图像的处理还可以点击后面的按钮和中的按钮对图像进行编辑、优化、裁剪、重设图像，以及设置图钮对图像进行编辑、优化、裁剪、重设图像，以及设置图像的亮度和对比度像的亮度和对比度中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 使用超链接1. 什么是超链接什么是超链接2. 文本链接文本链接3. 图像链接图像链接中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 什么是超链接什么是超链接超链接，简称链接，是页面与页面之间一个单向的关联关系。网页中超链接，简称链接，是页面与页面之间一个单向的关联关系。网页中一般以文字或图像作为链接载体，然后指定一个要跳转的网页地址，一般以文字或图像作为链接载体，然后指定一个要跳转的网页地址，标签是标签是.，源于英文，源于英文anchor（锚）。（锚）。超链接利用超链接利用URL联系联系Web上的资源，链接路径就是指所要链接的文件上的资源，链接路径就是指所要链接的文件所在的位置，它是设置超级链接的关键，一般有绝对路径和相对路径所在的位置，它是设置超级链接的关键，一般有绝对路径和相对路径两种。两种。1.绝对路径绝对路径绝对路径是绝对路径是Internet上一个完整的上一个完整的URL地址表示，包括所用到的协议地址表示，包括所用到的协议（如（如HTTP、FTP等）、主机名（或域名）和包含路径的文件名等各等）、主机名（或域名）和包含路径的文件名等各种信息，如种信息，如“http:/”。绝对路径适用于链接站点以外的文件，尤其。绝对路径适用于链接站点以外的文件，尤其是网站之间网页的链接，必须使用绝对路径。是网站之间网页的链接，必须使用绝对路径。2.相对路径相对路径相对路径是相对于当前页面（即正在访问的页面）的相对路径是相对于当前页面（即正在访问的页面）的URL地址，是指地址，是指要链接的文件和本文件之间网站内部的相对位置，适用于站点内文件要链接的文件和本文件之间网站内部的相对位置，适用于站点内文件之间的链接。建立链接之前，应该先将文件保存，这样才能建立正确之间的链接。建立链接之前，应该先将文件保存，这样才能建立正确的路径，否则会自动出现无效的的路径，否则会自动出现无效的“file:/.”式的路径。式的路径。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 当使用相对当使用相对URL时，如果资源在网站中的同一文件夹下，时，如果资源在网站中的同一文件夹下，可以直接指定该资源即可；如果不在同一文件夹下，可以可以直接指定该资源即可；如果不在同一文件夹下，可以使用与使用与DOS文件目录类似的一个特殊符号：双重句点（文件目录类似的一个特殊符号：双重句点（.），表示在上一级目录中查找资源，其形式为：），表示在上一级目录中查找资源，其形式为：./文件路文件路径径/文件名，例如，文件名，例如，./images/logo.gif表示资源是在上一表示资源是在上一级级images目录中的目录中的logo.gif文件。文件。C:egopass(站点文件夹)firstsecondthirda.htmlb.htmlc.htmld.html中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 文本链接文本链接 1.页面超链接页面超链接 页面超链接就是指向其他网页文件的链接，浏览者单击该页面超链接就是指向其他网页文件的链接，浏览者单击该链接时可以跳到另一个对应的网页。如果超链接的目标文链接时可以跳到另一个对应的网页。如果超链接的目标文件在同一站点下，就使用相对件在同一站点下，就使用相对URL；如果超链接的目标文；如果超链接的目标文件在其他网站下，就使用绝对件在其他网站下，就使用绝对URL。 创建页面超链接的步骤如下：选中文本，打开如图创建页面超链接的步骤如下：选中文本，打开如图3-12所所示的示的“文字文字”HTML属性面板，单击属性面板，单击“链接链接”后面按钮，后面按钮，打开对话框选择链接位置。点击打开对话框选择链接位置。点击“目标目标”文本框右边的下文本框右边的下拉按钮，常见有以下拉按钮，常见有以下2种选择，用来指明链接所要打开的种选择，用来指明链接所要打开的文件在哪个浏览器窗口中打开。常用的有：文件在哪个浏览器窗口中打开。常用的有： _blank：在新浏览器窗口中打开。：在新浏览器窗口中打开。 _parent：在原文件的父框架或窗口中打开，实质上是：在原文件的父框架或窗口中打开，实质上是替代了原网页。替代了原网页。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 操作步骤如下：操作步骤如下： 启动启动Dreamweaver，“文件面板文件面板”默认站点为上次定默认站点为上次定义的站点。如果没有站点，须按照义的站点。如果没有站点，须按照【案例案例3-1】的操作步的操作步骤新建站点。骤新建站点。 用鼠标单击站点文件夹用鼠标单击站点文件夹techan前面的加号，选择前面的加号，选择“techantu.html”，双击打开，网页另存为，双击打开，网页另存为“textlink.html”。 把光标定位在第一段前面，输入把光标定位在第一段前面，输入“首页首页”、“特产特产”、“核桃核桃”等文字。等文字。 选中选中“核桃核桃”，单击，单击“文本文本”属性面板中属性面板中“链接链接”后面后面的按钮，打开的按钮，打开“选择文件选择文件”对话框，选择站点文件夹内的对话框，选择站点文件夹内的“hetao.html”，文字随即显示为蓝色、带下划线。此时，文字随即显示为蓝色、带下划线。此时代码为：代码为：核桃核桃 保存文件，预览。带链接的文字点击过后，变为紫色。保存文件，预览。带链接的文字点击过后，变为紫色。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2.Email链接链接 选中文字，直接在选中文字，直接在“属性属性”面板中面板中“链接链接”后面的文本框后面的文本框中输入中输入E-mail地址，或是选择地址，或是选择“插入插入”“电子邮件链接电子邮件链接”，打开，打开“电子邮件链接电子邮件链接”对话框，如图对话框，如图3-24，设置文本，设置文本文字和电子邮件的地址即可。文字和电子邮件的地址即可。 3.空链接空链接 空链接是未指定链接对象的链接。创建空链接的方法是：空链接是未指定链接对象的链接。创建空链接的方法是：首先选中添加空链接的文字，如首先选中添加空链接的文字，如“晋东南地区晋东南地区”，然后直，然后直接在文本属性面板的接在文本属性面板的“链接链接”设置中加入一个设置中加入一个“#”号。其号。其代码为：代码为：晋东南地区晋东南地区中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 1.整体图像链接整体图像链接 创建图像超链接和创建文本超链接的方法基本一致，步骤创建图像超链接和创建文本超链接的方法基本一致，步骤如下：如下： 选中需要设置链接的图像，然后在如图选中需要设置链接的图像，然后在如图3-18的的“图像属图像属性面板性面板”中的中的“链接链接”文本框右侧单击文本框右侧单击“浏览文件浏览文件”按钮按钮。 打开打开“选择文件选择文件”对话框，选择到要跳转的文件后单击对话框，选择到要跳转的文件后单击“确认确认”按钮即可。按钮即可。 或者是打开或者是打开“文件面板文件面板”用用“指向文件指向文件”图标直接拖动到图标直接拖动到相关文件或图像上创建链接。相关文件或图像上创建链接。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B （功能分别为：移动热区到合适的位置、创建矩形热区、（功能分别为：移动热区到合适的位置、创建矩形热区、创建椭圆形热区、创建不规则形状的热区），如选择方形按钮，在地图创建椭圆形热区、创建不规则形状的热区），如选择方形按钮，在地图上合适