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

《新媒体网页设计与制作DreamweaverCS6基础、案例、技巧实用教程第34章课件.ppt》由会员分享，可在线阅读，更多相关《新媒体网页设计与制作DreamweaverCS6基础、案例、技巧实用教程第34章课件.ppt（79页珍藏版）》请在三一办公上搜索。

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）打开素材文件“e

2、xamplechapter03index.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）设置嵌套表格宽度。单击“分类列表”中任意一个单元格边线，选中整个表格，在【属性】检查器中设置表格属性

4、【宽】的值为“100”，单位选择“%”。,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” CS,3.2 设置文本换行与段落版式,3.2.1 强制文

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

7、er”键，将文本划分成两个段落，如下图所示：,3.2.3 课堂案例设置段落样式具体操作步骤：,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

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

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

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

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

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

14、期格式】和【时间格式】，如下图所示。,3.4 插入日期,将鼠标光标置于目标位置，选择【插入】/【日期】命,3.5 插入水平线,将鼠标光标置于目标位置，选择【插入】/【HTML】/【水平线】命令，即可在指定位置插入一条水平线。选中水平线，可以通过【属性】检查器对水平线进行属性设置，如下图所示。,3.5 插入水平线 将鼠标光标置于目标位置，选择【插入,3.6 插入特殊字符,将鼠标光标置于目标位置，选择【插入】/【HTML】/【特殊字符】/【其他字符】命令，弹出【插入其他字符】对话框，如图所示，选择相应的字符即可在指定位置插入一个特殊字符。,3.6 插入特殊字符 将鼠标光标置于目标位置,3.7 输入

15、连续的空格,选择【插入】/【HTML】/【特殊字符】/【不换行空格】命令。单击【插入】浮动面板的【文本】面板，选择【字符】命令，在弹出的列表中选择【不换行空格】。通过同时按下“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插入特殊字符

16、。,第4章 使用CSS样式美化网页,本章学习要点：1CSS基础知识2创建CSS样式3管理CSS样式4应用CSS样式,第4章 使用CSS样式美化网页本章学习要点：,4.1 认识CSS样式,CSS样式即层叠样式表，是Cascading Style Sheets的缩写，它能够控制网页样式、统一站点风格，并允许网页样式与内容相分离。通过使用CSS样式，能够节省许多重复性的格式设置，使用户很轻松地设置网页元素的显示格式和位置，从而提高了网页的整体美观。,4.1 认识CSS样式 CSS样式即层叠样式表,4.1.1 认识【CSS样式】面板,4.1.1 认识【CSS样式】面板,4.1.2 CSS样式表分类,根

17、据CSS样式表存放的位置以及其应用范围，CSS样式表分为以下三种： 1外部CSS 2内部CSS 3内联CSS,4.1.2 CSS样式表分类 根据CSS样式表,4.1.3 CSS基本语法,CSS格式设置规则由两部分组成：选择器和声明。选择器需要标识已设置格式元素（如A标签、类名称、ID或复合内容）的术语，而声明则用于定义样式元素。,4.1.3 CSS基本语法 CSS格式设置规,声明由属性和值两部分组成，中间使用半角英文下的冒号“:”分隔 如 “.txt”类的定义：.txt color: #FFF;background-color: #39C; font-size: 18px;line-heigh

18、t: 15px;,4.1.3 CSS基本语法,声明由属性和值两部分组成，中间使用半,4.2 创建CSS样式,单击【CSS面板】右下角的按钮，弹出【新建CSS规则】对话框，如下图所示。,4.2 创建CSS样式 单击【CSS面板】右下,4.2 创建CSS样式,1类：可用于HTML中的任何元素。 2ID：只能应用于唯一的标签，并且该标签的ID也是唯一的。 3标签：用于重新定义某个HTML标签的格式，即定义某种类型页面元素的格式。 4复合内容：用于创建或改变一个或多个类、ID或标签的复合规则样式表。,4.2 创建CSS样式1类：可用于HTML中的任何元素。,4.2.1 建立内部CSS样式表,1内联CS

19、S样式 内联CSS样式是所有CSS样式中比较简单和直观的方法，即直接把CSS样式代码添加到HTML的标签中，作为HTML标签的属性存在。 例如：“蓝色18像素显示的内联CSS样式文本信息”。,4.2.1 建立内部CSS样式表1内联CSS样式,4.2.1 建立内部CSS样式表,2内部CSS样式 内部CSS样式即将CSS样式代码添加到“”标签之间，并且用“”标签进行声明。 内部CSS样式即在【新建CSS规则】对话框中，选择【选择器类型】，并输入或选择【选择器名称】，在【规则定义】中选择“仅限该文档”选项 。,4.2.1 建立内部CSS样式表2内部CSS样式,4.2.2 建立外部CSS样式表,建立外

20、部样式表的方法与内部样式表的过程相同，只是在【规则定义】中要选择“新建样式表文件”选项 。,4.2.2 建立外部CSS样式表 建立外部样式表,4.3 应用CSS样式,4.3.1 应用内部CSS样式表1应用【类】规则2应用【ID】规则3应用【标签】规则4应用【复合内容】规则,4.3 应用CSS样式4.3.1 应用内部CSS样式表,4.3.2 应用外部CSS样式表,外部样式表创建并保存后，可以随时调用该样式表，并应用在任意所需的文档中。若用户需要将外部CSS文件导入到打开的网页文档中，则可以在【CSS样式】面板中单击按钮，打开【链接外部样式表】对话框，如下图所示。,4.3.2 应用外部CSS样式表

21、 外部样式表创,4.3.2 应用外部CSS样式表,通过单击【浏览】按钮，在弹出的【选择样式表文件】对话框中查找外部的样式表文件，如下图所示。,4.3.2 应用外部CSS样式表 通过单击【浏,4.4 利用CSS样式表美化网页,4.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 设

22、置【列表】属性,4.4.7 设置【定位】属性,4.4.7 设置【定位】属性,4.4.8 设置【扩展】属性,4.4.8 设置【扩展】属性,4.4.9 设置【过渡】属性,4.4.9 设置【过渡】属性,4.5 课堂案例CSS应用,具体操作步骤：1打开素材文件“examplechapter04index1.html”，如下图所示。,4.5 课堂案例CSS应用具体操作步骤：,4.5 课堂案例CSS应用,2创建内联CSS样式（1）在标签选择器选择“”后的“”标签（2）单击【拆分】按钮，进入拆分视图（3）将鼠标光标定位到左侧代码窗口已选区域的“”标签内部，输入一个空格，在展开的提示列表中选择“style”（

23、4）根据提示输入或选择“style”的“background”属性值，即“”。 内联CSS样式是直接在HTML标签中使用style属性，因此无需套用即可显示样式，网页效果如下图所示。,4.5 课堂案例CSS应用2创建内联CSS样式,4.5 课堂案例CSS应用,应用内联CSS样式,4.5 课堂案例CSS应用 应用内联CSS样,4.5 课堂案例CSS应用,2创建内部CSS样式 选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，单击面板底部按钮，打开【新建CSS规则】对话框，通过选取不同的【选择器类型】来创建不同的CSS样式。,4.5 课堂案例CSS应用2创建内部CSS样式,4.5 课堂案例

24、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的CSS规则定义,4.5 课堂案例CSS应用 (1)类： .txt的CSS规,4.5 课堂案例CSS应用,应用CSS样式 （1）选中设计窗口中“生活感悟”文本（2）右键单击【CSS面板】【所有规则】下的“. Hd”样式（3）在弹出的快捷菜单中选择“应用”。（4）分别选中设计窗口左侧的日记列表和窗口右侧“生活感悟”下的

25、所有文本（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】样式后的网页效果如下

26、图所示：,4.5 课堂案例CSS应用,（2）ID4.5 课堂案例CSS应用,4.5 课堂案例CSS应用,（3）标签本例重定义了超链接标签“a”标签的样式。定义CSS样式 在【选择器类型】中选择【标签（重新定义HTML元素）】，在【选择器名称】中选择“a”，单击【确定】按钮，属性设置如下图所示。应用CSS样式 对“a”标签重定义后，系统会自动应用到具有“a”标签，即具有超级链接的网页元素上。,4.5 课堂案例CSS应用（3）标签,4.5 课堂案例CSS应用,标签“a”的CSS规则定义,4.5 课堂案例CSS应用标签“a”的CSS规则定义,（4）复合内容本例定义了页面底部单元格的背景图像。定义样式

27、（1）新建CSS规则，【选择器类型】自动选择【复合内容（基于选择的内容）】（2）【选择器名称】自动输入“#tb tr #bot”（3）设置【背景】的【Background-image】属性为“images/bot.png”。应用样式 【复合内容】CSS样式是以上3类规则使用方法进行结合来应用样式的。应用样式后的网页效果如下图所示。,4.5 课堂案例CSS应用,（4）复合内容4.5 课堂案例CSS应用,3导入CSS样式本例定义的是标题文本样式。（1）单击【CSS面板】底部按钮，打开【链接外部样式表】对话框（2）选择【文件/URL】为“chang3css.css”，【添加为】选择“导入”，单击【确

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