新媒体网页设计与制作DreamweaverCS6基础、案例、技巧实用教程第34章课件

1、第3章 制作绚丽多彩的网页本章学习要点：1页面属性的设置2网页文本对象的添加3文本格式的设置4特殊字符的插入第3章 制作绚丽多彩的网页本章学习要点：3.1 网页文本的基本操作3.1.1 输入文本 1直接输入文本 2复制文本 3导入文本3.1 网页文本的基本操作3.1.1 输入文本3.1.2 设置文本属性 文本属性的设置主要有【HTML】和【CSS】两种不同的方式，它们分别采用不同的方式实现对文本的格式设置，其包含的设置项也有所不同。通过单击【属性】检查器左侧的和进行切换。3.1.2 设置文本属性 3.1.3 课堂案例网页文本操作具体操作步骤：1录入网页文本（1）打开素材文件“examplech

2、apter03index.html”，如下图所示。3.1.3 课堂案例网页文本操作具体操作步骤：3.1.3 课堂案例网页文本操作（2）定义页脚。将鼠标光标定位到页脚编辑区域，输入文本“版权所有 Copyright 2018 WuYunYoGa All Rights Reserved.”，如下图所示：（3）复制文本。打开素材文件“examplechapter03yoga.doc”，选取要复制的文本信息，选择【复制】命令或按“Ctrl+C”组合键。 3.1.3 课堂案例网页文本操作（2）定义页脚。将鼠标光标（4）粘贴文本。返回Dreamweaver文档中，鼠标光标定位到主设计窗口的中间区域，执行【

3、粘贴】命令或按“Ctrl+V”组合键，将文本粘贴到网页文档中，如下图所示：3.1.3 课堂案例网页文本操作（4）粘贴文本。返回Dreamweaver文档中，鼠标光标定3.1.3 课堂案例网页文本操作（5）导入文本。将鼠标光标定位到主设计窗口的左侧位置，执行【文件】/【导入】/【Excel文档】命令，选择“menu1.xls”文档，完成文本的导入操作，如下图所示：3.1.3 课堂案例网页文本操作（5）导入文本。将鼠标光标3.1.3 课堂案例网页文本操作（6）设置嵌套表格宽度。单击“分类列表”中任意一个单元格边线，选中整个表格，在【属性】检查器中设置表格属性【宽】的值为“100”，单位选择“%”。

4、3.1.3 课堂案例网页文本操作（6）设置嵌套表格宽度。单3.1.3 课堂案例网页文本操作2设置文本格式及属性（1）设置页面属性。单击【属性】检查器中的【页面属性】按钮，设置【页面字体】为“楷体”，【大小】为“14pt”，如下图所示： 3.1.3 课堂案例网页文本操作2设置文本格式及属性3.1.3 课堂案例网页文本操作（2）设置标题。选择左侧列表文本“分类列表”，选择属性检查器上的按钮，在【格式】中选择“标题3” 。（3）设置文本样式。选中“分类列表”下的文本“传统瑜伽”，选择【格式】/【样式】/【代码】，再选择【格式】/【样式】/【粗体】命令，然后设置列表中的其他项目执行同样的操作，如下图所

5、示。3.1.3 课堂案例网页文本操作（2）设置标题。选择左侧列3.1.3 课堂案例网页文本操作（4）设置特殊文本样式。 选中文档主设计区域中间部分，即瑜伽内容介绍的开头文字“瑜伽”二字，即瑜伽内容介绍的开头文字“瑜伽”二字，选择按钮，设置文字【大小】为“30pt”，如下图所示。3.1.3 课堂案例网页文本操作（4）设置特殊文本样式。 3.1.3 课堂案例网页文本操作设置“.First” CSS样式文本样式效果，如下图所示：3.1.3 课堂案例网页文本操作设置“.First” CS3.2 设置文本换行与段落版式3.2.1 强制文本换行 1换行：标签 2分段 ：标签 3.2.2 设置段落对齐 段落

6、文本的对齐在网页布局中十分重要，在Dreamweaver CS6中，提供了“左对齐”、“居中对齐”、“右对齐”和“两端对齐”4种对齐方式。3.2 设置文本换行与段落版式3.2.1 强制文本换行 3.2.3 课堂案例设置段落样式具体操作步骤： 1设置文本换行。打开素材文件“examplechapter03index.html”，将鼠标光标定位到主设计窗口中间区域“瑜伽源于古印度”之前，同时按下“Shitf+Enter”快捷键，使文本换行。 2设置段落。将鼠标光标定位到“瑜伽姿势运用古老而易于掌握的技巧”文本之前，按下“Enter”键，将文本划分成两个段落，如下图所示：3.2.3 课堂案例设置段落

7、样式具体操作步骤：3.2.3 课堂案例设置段落样式3.2.3 课堂案例设置段落样式3.2.3 课堂案例设置段落样式3设置文本的对齐方式。将鼠标光标定位到页脚处文本中，单击【属性】检查器中的居中对齐按钮 ，设置页脚文本居中对齐，如下图所示。3.2.3 课堂案例设置段落样式3设置文本的对齐方式。将3.3 创建列表 列表是指将具有相似特性或某种顺序的文本进行有规则的排列，是网页中最常见的一种文本排列方式，常用于为文档设置自动编号、项目符号等格式信息。3.3 创建列表 列表是指将具有相似特性或某种顺3.3.1 创建定义列表 定义列表也称作列表，因为它同字典具有相同的格式。在定义列表中，每个列表项带有一

8、个缩进的字段，就好像字典对文字进行解释一样。选中需要创建定义列表的段落文本，选择【格式】/【列表】/【定义列表】命令，即可创建一个定义列表，如下图所示。3.3.1 创建定义列表 定义列表也称作列表3.3.2 创建项目列表 项目列表前面一般用项目符号作为前导字符，并且列表项目前的项目符号相同，各列表项之间是平行的关系。 将鼠标光标置于目标位置，选中需要创建项目列表的段落文本，选择【格式】/【列表】/【项目列表】命令，即可创建一个项目列表，如下图所示。3.3.2 创建项目列表 项目列表前面一般用3.3.3 创建编号列表 编号列表前面通常有数字前导字符，这些字符可以是英文字母、阿拉伯数字或罗马数字等

9、。 选中需要创建编号列表的段落文本，选择【格式】/【列表】/【编号列表】命令，即可创建一个编号列表，如下图所示。3.3.3 创建编号列表 编号列表前面通常有数 在创建了项目列表或编号列表后，如果需要改变列表样式，可以将鼠标光标定位到任意一个项目列表或编号列表的段落中，选择【格式】/【列表】/【属性】命令，打开【列表属性】对话框，如下图所示。3.3.4 设置列表样式 在创建了项目列表或编号列表后，如果需要改变列表样式，3.3.4 设置列表样式 1设置项目列表样式3.3.4 设置列表样式 1设置项目列表样式3.3.4 设置列表样式 2设置编号列表样式3.3.4 设置列表样式 2设置编号列表样式1设

10、置文本缩进 选中需要设置段落缩进的文本，单击【属性】检查器左侧的按钮，切换到【HTML】分类属性检查器中，单击【缩进】按钮，可增加所选文本的段落缩进；单击【凸出】按钮，即可减少所选文本的段落缩进。3.3.5 设置文本缩进格式1设置文本缩进3.3.5 设置文本缩进格式2设置嵌套列表 选中需要设置段落缩进列表的项目，单击【属性】检查器中的【缩进】按钮，使指定列表向右缩进并创建一个单独的列表，以形成不同级的子列表项。然后，对缩进的文本应用新的列表样式或类型即可。如下图所示。3.3.5 设置文本缩进格式2设置嵌套列表3.3.5 设置文本缩进格式3.3.5 设置文本缩进格式3.3.5 设置文本缩进格式3

11、.3.6 课堂案例创建段落与列表具体操作步骤：1设置段落。打开素材文件“examplechapter03index.html”，将鼠标光标定位到主设计窗口中间区域段落文本的开头两字“瑜伽”之后，输入“Enter”，创建了两个新的段落，如下图所示。3.3.6 课堂案例创建段落与列表具体操作步骤：3.3.6 课堂案例创建段落与列表2创建定义列表。选中刚刚创建的两个段落，选择【插入】/【HTML】/【文本对象】/【定义列表】命令，效果如下图所示。3.3.6 课堂案例创建段落与列表2创建定义列表。选中刚3.3.6 课堂案例创建段落与列表 3设置文本及段落。在主设计窗口右侧输入几段文本，并将窗口中间的第

12、二个段落设置成多个段落，如下图所示。3.3.6 课堂案例创建段落与列表 3设置文本及段落。在3.3.6 课堂案例创建段落与列表 4创建项目列表。选中主设计窗口中间新建的所有段落，单击【属性】检查器中的项目列表按钮，创建新的项目列表，预览结果如下图所示。5创建编号列表。选中主窗口右侧“瑜伽新闻”下的所有段落，单击【属性】检查器中的编号列表按钮，创建新的编号列表，如下图所示。3.3.6 课堂案例创建段落与列表 4创建项目列表。选中3.3.6 课堂案例创建段落与列表6创建嵌套列表。将鼠标光标放在2级项目列表或编号列表文本的任意位置，单击【属性】检查器上的缩进按钮，完成文本的缩进。如果要返回上级列表，

13、通过单击凸出按钮返回。7修改列表样式。将鼠标光标定位到编号列表的第3项，单击【属性】检查器上的【列表项目】按钮，打开【列表属性】对话奇框，选择【样式】为“大写罗马字母”，如下图所示。3.3.6 课堂案例创建段落与列表6创建嵌套列表。将鼠标3.3.6 课堂案例创建段落与列表效果如下图所示。 3.3.6 课堂案例创建段落与列表效果如下图所示。 将鼠标光标置于目标位置，选择【插入】/【日期】命令，弹出【插入日期】对话框，可以选择【星期格式】、【日期格式】和【时间格式】，如下图所示。3.4 插入日期 将鼠标光标置于目标位置，选择【插入】/【日期】命3.5 插入水平线 将鼠标光标置于目标位置，选择【插入

14、】/【HTML】/【水平线】命令，即可在指定位置插入一条水平线。选中水平线，可以通过【属性】检查器对水平线进行属性设置，如下图所示。3.5 插入水平线 将鼠标光标置于目标位置，选择【插入3.6 插入特殊字符 将鼠标光标置于目标位置，选择【插入】/【HTML】/【特殊字符】/【其他字符】命令，弹出【插入其他字符】对话框，如图所示，选择相应的字符即可在指定位置插入一个特殊字符。3.6 插入特殊字符 将鼠标光标置于目标位置3.7 输入连续的空格选择【插入】/【HTML】/【特殊字符】/【不换行空格】命令。单击【插入】浮动面板的【文本】面板，选择【字符】命令，在弹出的列表中选择【不换行空格】。通过同时

15、按下“Ctrl+Shitf+Space”快捷键插入。3.7 输入连续的空格选择【插入】/【HTML】/【特殊字符3.8 课堂案例插入其它文本1插入日期。 2插入水平线。3.8 课堂案例插入其它文本1插入日期。 3.8 课堂案例插入其它文本 3设置水平线颜色。 3.8 课堂案例插入其它文本 3设置水平线颜色。 3.8 课堂案例插入其它文本 4插入特殊字符。 5插入不换行空格。 3.8 课堂案例插入其它文本 4插入特殊字符。第4章 使用CSS样式美化网页本章学习要点：1CSS基础知识2创建CSS样式3管理CSS样式4应用CSS样式第4章 使用CSS样式美化网页本章学习要点：4.1 认识CSS样式

16、CSS样式即层叠样式表，是Cascading Style Sheets的缩写，它能够控制网页样式、统一站点风格，并允许网页样式与内容相分离。通过使用CSS样式，能够节省许多重复性的格式设置，使用户很轻松地设置网页元素的显示格式和位置，从而提高了网页的整体美观。4.1 认识CSS样式 CSS样式即层叠样式表4.1.1 认识【CSS样式】面板 4.1.1 认识【CSS样式】面板 4.1.2 CSS样式表分类 根据CSS样式表存放的位置以及其应用范围，CSS样式表分为以下三种： 1外部CSS 2内部CSS 3内联CSS4.1.2 CSS样式表分类 根据CSS样式表 4.1.3 CSS基本语法 CSS

17、格式设置规则由两部分组成：选择器和声明。选择器需要标识已设置格式元素（如A标签、类名称、ID或复合内容）的术语，而声明则用于定义样式元素。 4.1.3 CSS基本语法 CSS格式设置规 声明由属性和值两部分组成，中间使用半角英文下的冒号“:”分隔 如 “.txt”类的定义：.txt color: #FFF;background-color: #39C; font-size: 18px;line-height: 15px; 4.1.3 CSS基本语法 声明由属性和值两部分组成，中间使用半4.2 创建CSS样式 单击【CSS面板】右下角的按钮，弹出【新建CSS规则】对话框，如下图所示。4.2 创建

18、CSS样式 单击【CSS面板】右下4.2 创建CSS样式1类：可用于HTML中的任何元素。 2ID：只能应用于唯一的标签，并且该标签的ID也是唯一的。 3标签：用于重新定义某个HTML标签的格式，即定义某种类型页面元素的格式。 4复合内容：用于创建或改变一个或多个类、ID或标签的复合规则样式表。 4.2 创建CSS样式1类：可用于HTML中的任何元素。 4.2.1 建立内部CSS样式表1内联CSS样式 内联CSS样式是所有CSS样式中比较简单和直观的方法，即直接把CSS样式代码添加到HTML的标签中，作为HTML标签的属性存在。 例如：“蓝色18像素显示的内联CSS样式文本信息”。4.2.1

19、建立内部CSS样式表1内联CSS样式4.2.1 建立内部CSS样式表2内部CSS样式 内部CSS样式即将CSS样式代码添加到“”标签之间，并且用“”标签进行声明。 内部CSS样式即在【新建CSS规则】对话框中，选择【选择器类型】，并输入或选择【选择器名称】，在【规则定义】中选择“仅限该文档”选项 。4.2.1 建立内部CSS样式表2内部CSS样式4.2.2 建立外部CSS样式表 建立外部样式表的方法与内部样式表的过程相同，只是在【规则定义】中要选择“新建样式表文件”选项 。4.2.2 建立外部CSS样式表 建立外部样式表4.3 应用CSS样式4.3.1 应用内部CSS样式表1应用【类】规则2应

20、用【ID】规则3应用【标签】规则4应用【复合内容】规则4.3 应用CSS样式4.3.1 应用内部CSS样式表4.3.2 应用外部CSS样式表 外部样式表创建并保存后，可以随时调用该样式表，并应用在任意所需的文档中。若用户需要将外部CSS文件导入到打开的网页文档中，则可以在【CSS样式】面板中单击按钮，打开【链接外部样式表】对话框，如下图所示。 4.3.2 应用外部CSS样式表 外部样式表创4.3.2 应用外部CSS样式表 通过单击【浏览】按钮，在弹出的【选择样式表文件】对话框中查找外部的样式表文件，如下图所示。 4.3.2 应用外部CSS样式表 通过单击【浏4.4 利用CSS样式表美化网页4.

21、4.1 设置【类型】属性4.4 利用CSS样式表美化网页4.4.1 设置【类型】属性4.4.2 设置【背景】属性4.4.2 设置【背景】属性4.4.3 设置【区块】属性4.4.3 设置【区块】属性4.4.4 设置【方框】属性4.4.4 设置【方框】属性4.4.5 设置【边框】属性4.4.5 设置【边框】属性4.4.6 设置【列表】属性4.4.6 设置【列表】属性4.4.7 设置【定位】属性4.4.7 设置【定位】属性4.4.8 设置【扩展】属性4.4.8 设置【扩展】属性4.4.9 设置【过渡】属性4.4.9 设置【过渡】属性4.5 课堂案例CSS应用具体操作步骤：1打开素材文件“exampl

22、echapter04index1.html”，如下图所示。4.5 课堂案例CSS应用具体操作步骤：4.5 课堂案例CSS应用2创建内联CSS样式（1）在标签选择器选择“”后的“”标签（2）单击【拆分】按钮，进入拆分视图（3）将鼠标光标定位到左侧代码窗口已选区域的“”标签内部，输入一个空格，在展开的提示列表中选择“style”（4）根据提示输入或选择“style”的“background”属性值，即“”。 内联CSS样式是直接在HTML标签中使用style属性，因此无需套用即可显示样式，网页效果如下图所示。 4.5 课堂案例CSS应用2创建内联CSS样式4.5 课堂案例CSS应用 应用内联CSS

23、样式4.5 课堂案例CSS应用 应用内联CSS样4.5 课堂案例CSS应用2创建内部CSS样式 选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，单击面板底部按钮，打开【新建CSS规则】对话框，通过选取不同的【选择器类型】来创建不同的CSS样式。4.5 课堂案例CSS应用2创建内部CSS样式4.5 课堂案例CSS应用 (1)类： .hd的CSS规则定义 4.5 课堂案例CSS应用 (1)类： .hd的CSS规则4.5 课堂案例CSS应用 (1)类： .txt的CSS规则定义 4.5 课堂案例CSS应用 (1)类： .txt的CSS规4.5 课堂案例CSS应用 (1)类： .txt的CS

24、S规则定义 4.5 课堂案例CSS应用 (1)类： .txt的CSS规4.5 课堂案例CSS应用应用CSS样式 （1）选中设计窗口中“生活感悟”文本（2）右键单击【CSS面板】【所有规则】下的“. Hd”样式（3）在弹出的快捷菜单中选择“应用”。（4）分别选中设计窗口左侧的日记列表和窗口右侧“生活感悟”下的所有文本（5）使用上述方法应用“.txt”样式。4.5 课堂案例CSS应用应用CSS样式 4.5 课堂案例CSS应用应用【类】CSS样式后的网页效果如下图所示。4.5 课堂案例CSS应用应用【类】CSS样式后的网页效果（2）ID本例定义了ID为“top”的窗口顶部单元格的样式。定义CSS样式 在【选择器类型】中选择【ID（仅应用于一个HTML元素）】，在【选择器名称】下拉列表中选择“#top” ，单击【确定】按钮，并设置【背景】的【Background-color】属性为“#AACF68”。应用CSS样式 当元素已经被赋予ID，对应的ID规则会自动匹配。应用【ID】样式后的网页效果如下图所示：4.5 课堂案例CSS应用（2）ID4.5 课堂案例CSS应用4.5 课堂案例CSS应用（3）标签本例重定义了超链接标签“a”标签的样式。定义CSS样式 在【选择器类型】中选择【标签（重新定义HTML元素）】，在【选择器名称】中选择“a”，单击【确定】按钮，属性设置如下图