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

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

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

3、eamweaverDreamweaver文档中，鼠标光标文档中，鼠标光标定位到主设计窗口的中间区域，执行【粘贴】命令或按定位到主设计窗口的中间区域，执行【粘贴】命令或按“Ctrl+V”Ctrl+V”组合键，将文本粘贴到网页文档中，如下图组合键，将文本粘贴到网页文档中，如下图所示：所示：3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作（5）导入文本。将鼠标光标定位到主设计窗口的左侧位置，执行【文件】/【导入】/【Excel文档】命令，选择“menu1.xls”文档，完成文本的导入操作，如下图所示：3.1.3 3.1.

4、3 课堂案例课堂案例网页文本操作网页文本操作（6）设置嵌套表格宽度。单击“分类列表”中任意一个单元格边线，选中整个表格，在【属性】检查器中设置表格属性【宽】的值为“100”，单位选择“%”。3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作2设置文本格式及属性（1）设置页面属性。单击【属性】检查器中的【页面属性】按钮，设置【页面字体】为“楷体”，【大小】为“14pt”，如下图所示：3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作（2）设置标题。选择左侧列表文本“分类列表”，选择属性检查器上的按钮，在【格式】中选择“标题3”。（3）设置文本样式。选中“分类列表”下的

5、文本“传统瑜伽”，选择【格式】/【样式】/【代码】，再选择【格式】/【样式】/【粗体】命令，然后设置列表中的其他项目执行同样的操作，如下图所示。3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作（4）设置特殊文本样式。选中文档主设计区域中间部分，即瑜伽内容介绍的开头文字“瑜伽”二字，即瑜伽内容介绍的开头文字“瑜伽”二字，选择按钮，设置文字【大小】为“30pt”，如下图所示。3.1.3 3.1.3 课堂案例课堂案例网页文本操作网页文本操作设置“.First”CSS样式文本样式效果，如下图所示：3.2 3.2 设置文本换行与段落版式设置文本换行与段落版式3.2.1 3.2.1 强制文

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

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

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

9、鼠标光标定位到任意一个项目列表或编号列表的段落中，选择【格式】/【列表】/【属性】命令，打开【列表属性】对话框，如下图所示。3.3.4 3.3.4 设置列表样式设置列表样式 3.3.4 设置列表样式 1设置项目列表样式3.3.4 设置列表样式 2设置编号列表样式1设置文本缩进 选中需要设置段落缩进的文本，单击【属性】检查器左侧的按钮，切换到【HTML】分类属性检查器中，单击【缩进】按钮，可增加所选文本的段落缩进；单击【凸出】按钮，即可减少所选文本的段落缩进。3.3.5 3.3.5 设置文本缩进格式设置文本缩进格式2设置嵌套列表 选中需要设置段落缩进列表的项目，单击【属性】检查器中的【缩进】按钮

10、，使指定列表向右缩进并创建一个单独的列表，以形成不同级的子列表项。然后，对缩进的文本应用新的列表样式或类型即可。如下图所示。3.3.5 3.3.5 设置文本缩进格式设置文本缩进格式3.3.5 3.3.5 设置文本缩进格式设置文本缩进格式3.3.6 3.3.6 课堂案例课堂案例创建段落与列表创建段落与列表具体操作步骤：1设置段落。打开素材文件“examplechapter03index.html”，将鼠标光标定位到主设计窗口中间区域段落文本的开头两字“瑜伽”之后，输入“Enter”，创建了两个新的段落，如下图所示。3.3.6 3.3.6 课堂案例课堂案例创建段落与列表创建段落与列表2创建定义列表

11、。选中刚刚创建的两个段落，选择【插入】/【HTML】/【文本对象】/【定义列表】命令，效果如下图所示。3.3.6 3.3.6 课堂案例课堂案例创建段落与列表创建段落与列表 3设置文本及段落。在主设计窗口右侧输入几段文本，并将窗口中间的第二个段落设置成多个段落，如下图所示。3.3.6 3.3.6 课堂案例课堂案例创建段落与列表创建段落与列表 4创建项目列表。选中主设计窗口中间新建的所有段落，单击【属性】检查器中的项目列表按钮，创建新的项目列表，预览结果如下图所示。5创建编号列表。选中主窗口右侧“瑜伽新闻”下的所有段落，单击【属性】检查器中的编号列表按钮，创建新的编号列表，如下图所示。3.3.6

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

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

14、【不换行空格】。通过同时按下“Ctrl+Shitf+Space”快捷键插入。3.8 课堂案例插入其它文本1插入日期。2插入水平线。3.8 课堂案例插入其它文本 3设置水平线颜色。3.8 课堂案例插入其它文本 4插入特殊字符。5插入不换行空格。第4章 使用CSS样式美化网页本章学习要点：本章学习要点：1 1CSSCSS基础知识基础知识2 2创建创建CSSCSS样式样式3 3管理管理CSSCSS样式样式4 4应用应用CSSCSS样式样式4.1 认识CSS样式 CSS样式即层叠样式表，是Cascading Style Sheets的缩写，它能够控制网页样式、统一站点风格，并允许网页样式与内容相分离。

15、通过使用CSS样式，能够节省许多重复性的格式设置，使用户很轻松地设置网页元素的显示格式和位置，从而提高了网页的整体美观。4.1.1 认识【CSS样式】面板 4.1.2 CSS4.1.2 CSS样式表分类样式表分类 根据CSS样式表存放的位置以及其应用范围，CSS样式表分为以下三种：1外部CSS 2内部CSS 3内联CSS 4.1.3 CSS基本语法 CSS格式设置规则由两部分组成：选择器和声明。选择器需要标识已设置格式元素（如A标签、类名称、ID或复合内容）的术语，而声明则用于定义样式元素。声明由属性和值两部分组成，中间使用半角英文下的冒号“:”分隔 如“.txt”类的定义：.txt colo

16、r:#FFF;background-color:#39C;font-size:18px;line-height:15px;4.1.3 CSS基本语法4.2 创建CSS样式 单击【CSS面板】右下角的按钮，弹出【新建CSS规则】对话框，如下图所示。4.2 创建CSS样式1类：可用于HTML中的任何元素。2ID：只能应用于唯一的标签，并且该标签的ID也是唯一的。3标签：用于重新定义某个HTML标签的格式，即定义某种类型页面元素的格式。4复合内容：用于创建或改变一个或多个类、ID或标签的复合规则样式表。4.2.1 建立内部CSS样式表1内联CSS样式 内联CSS样式是所有CSS样式中比较简单和直观的

17、方法，即直接把CSS样式代码添加到HTML的标签中，作为HTML标签的属性存在。例如：“蓝色18像素显示的内联CSS样式文本信息”。4.2.1 建立内部CSS样式表2内部CSS样式 内部CSS样式即将CSS样式代码添加到“”标签之间，并且用“”标签进行声明。内部CSS样式即在【新建CSS规则】对话框中，选择【选择器类型】，并输入或选择【选择器名称】，在【规则定义】中选择“仅限该文档”选项。4.2.2 建立外部CSS样式表 建立外部样式表的方法与内部样式表的过程相同，只是在【规则定义】中要选择“新建样式表文件”选项。4.3 应用CSS样式4.3.1 4.3.1 应用内部应用内部CSSCSS样式表

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

19、.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打开素材文件“examplechapter04index1.html

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

21、【新建CSS规则】对话框，通过选取不同的【选择器类型】来创建不同的CSS样式。4.5 课堂案例CSS应用(1)类：.hd的CSS规则定义 4.5 课堂案例CSS应用(1)类：.txt的CSS规则定义 4.5 课堂案例CSS应用(1)类：.txt的CSS规则定义 4.5 课堂案例CSS应用应用CSS样式 （1）选中设计窗口中“生活感悟”文本（2）右键单击【CSS面板】【所有规则】下的“.Hd”样式（3）在弹出的快捷菜单中选择“应用”。（4）分别选中设计窗口左侧的日记列表和窗口右侧“生活感悟”下的所有文本（5）使用上述方法应用“.txt”样式。4.5 课堂案例CSS应用应用【类】CSS样式后的网页

22、效果如下图所示。（2）ID本例定义了ID为“top”的窗口顶部单元格的样式。定义CSS样式 在【选择器类型】中选择【ID（仅应用于一个HTML元素）】，在【选择器名称】下拉列表中选择“#top”，单击【确定】按钮，并设置【背景】的【Background-color】属性为“#AACF68”。应用CSS样式 当元素已经被赋予ID，对应的ID规则会自动匹配。应用【ID】样式后的网页效果如下图所示：4.5 课堂案例CSS应用4.5 课堂案例CSS应用（3）标签本例重定义了超链接标签“a”标签的样式。定义CSS样式 在【选择器类型】中选择【标签（重新定义HTML元素）】，在【选择器名称】中选择“a”，

23、单击【确定】按钮，属性设置如下图所示。应用CSS样式 对“a”标签重定义后，系统会自动应用到具有“a”标签，即具有超级链接的网页元素上。4.5 课堂案例CSS应用标签“a”的CSS规则定义（4）复合内容本例定义了页面底部单元格的背景图像。定义样式（1）新建CSS规则，【选择器类型】自动选择【复合内容（基于选择的内容）】（2）【选择器名称】自动输入“#tb tr#bot”（3）设置【背景】的【Background-image】属性为“images/bot.png”。应用样式 【复合内容】CSS样式是以上3类规则使用方法进行结合来应用样式的。应用样式后的网页效果如下图所示。4.5 课堂案例CSS应

24、用3导入CSS样式本例定义的是标题文本样式。（1）单击【CSS面板】底部按钮，打开【链接外部样式表】对话框（2）选择【文件/URL】为“chang3css.css”，【添加为】选择“导入”，单击【确定】按钮。4.5 课堂案例CSS应用4.5 课堂案例CSS应用（2）应用CSS样式应用类 选中“我的每一天”和“人生如茶，静心以对”文本，右侧单击“.myday”样式，在弹出的快捷菜单中选择“应用”，然后再次选择“人生如茶，静心以对”文本，应用“.hd”样式，完成文本样式的套用。4.5 课堂案例CSS应用应用标签样式 分别选中“5月2日 晴 星期三”、“5月3日 晴 星期四”和“5月4日 阴 星期五”文本，单击【属性】检查器【HTML】标签上【格式】后的下拉列表，在弹出的列表中选择“标题3”。设置了标题的文本会自动应用“h3”样式。4.5 课堂案例CSS应用整个网页效果如下图所示。