网页设计与制作第4章 文本和样式
合集下载
网页设计与制作4
№ 17
网页设计艺术
（2）在现有的表格中插入单元列 将光标移到在插入单元列的右边一列， 将光标移到在插入单元列的右边一列，选 修改” 表格 表格” 插入列 命令。 插入列” 择“修改”|“表格”|“插入列”命令。 将光标移到要插入单元列的右边一列， 将光标移到要插入单元列的右边一列，按 组合键“Ctrl+Shift+A”。 组合键“Ctrl+Shift+A 。 将光标移到要插入单元列的右边一列， 将光标移到要插入单元列的右边一列，单 击鼠标右键， 击鼠标右键，在弹出的快捷菜单中选择 表格” 插入列 命令。 插入列” “表格”|“插入列”命令。
网页设计艺术 第四章 网页表格的处理
表格是控制网页页面布局最有力的工具。 使用表格可以对列表数据进行布局，布局 网页文本、图像、媒体等。 通过本章学习应该掌握以下内容: 利用HTML创建和编辑网页表格 利用Dreamweaver MX处理表格
№1
网页设计艺术
4.1 利用Dreamweaver MX处理网页表格 4.2 利用HTML创建和编辑网页表格
№ 14
网页设计艺术
（3）选择多个单元格 选择多个单元格 按住Ctrl键 单击所要选择的所有单元格。 按住Ctrl键，单击所要选择的所有单元格。 Ctrl 将光标置于单元格中，拖动鼠标， 将光标置于单元格中，拖动鼠标，选择多 个单元格。 个单元格。 如果要选择整行， 如果要选择整行，将光标置于该行的左边 图标时单击鼠标左键。 缘，当光标变成 图标时单击鼠标左键。 如果要选择整列， 如果要选择整列，将光标置于该列的上边 图标时单击鼠标左键。 缘，当光标变成 图标时单击鼠标左键。
№ 19
网页设计艺术
删除整行/ （4）删除整行/整列 先选择欲删除的整行或整列，直接按Del 先选择欲删除的整行或整列，直接按Del 即可删除。 键，即可删除。 先将光标移到要删除的行或列中， 先将光标移到要删除的行或列中，选择 修改” 表格 表格” 删除行 删除行” 删除列” “修改”|“表格”|“删除行”或“删除列” 命令。 命令。 将光标移到要删除的行或列中， 将光标移到要删除的行或列中，单击鼠标 右键，在弹出的快捷菜单中选择“表 右键，在弹出的快捷菜单中选择“ 删除行” 删除列”命令。 格”|“删除行”或“删除列”命令。 删除行
网页设计艺术
（2）在现有的表格中插入单元列 将光标移到在插入单元列的右边一列， 将光标移到在插入单元列的右边一列，选 修改” 表格 表格” 插入列 命令。 插入列” 择“修改”|“表格”|“插入列”命令。 将光标移到要插入单元列的右边一列， 将光标移到要插入单元列的右边一列，按 组合键“Ctrl+Shift+A”。 组合键“Ctrl+Shift+A 。 将光标移到要插入单元列的右边一列， 将光标移到要插入单元列的右边一列，单 击鼠标右键， 击鼠标右键，在弹出的快捷菜单中选择 表格” 插入列 命令。 插入列” “表格”|“插入列”命令。
网页设计艺术 第四章 网页表格的处理
表格是控制网页页面布局最有力的工具。 使用表格可以对列表数据进行布局，布局 网页文本、图像、媒体等。 通过本章学习应该掌握以下内容: 利用HTML创建和编辑网页表格 利用Dreamweaver MX处理表格
№1
网页设计艺术
4.1 利用Dreamweaver MX处理网页表格 4.2 利用HTML创建和编辑网页表格
№ 14
网页设计艺术
（3）选择多个单元格 选择多个单元格 按住Ctrl键 单击所要选择的所有单元格。 按住Ctrl键，单击所要选择的所有单元格。 Ctrl 将光标置于单元格中，拖动鼠标， 将光标置于单元格中，拖动鼠标，选择多 个单元格。 个单元格。 如果要选择整行， 如果要选择整行，将光标置于该行的左边 图标时单击鼠标左键。 缘，当光标变成 图标时单击鼠标左键。 如果要选择整列， 如果要选择整列，将光标置于该列的上边 图标时单击鼠标左键。 缘，当光标变成 图标时单击鼠标左键。
№ 19
网页设计艺术
删除整行/ （4）删除整行/整列 先选择欲删除的整行或整列，直接按Del 先选择欲删除的整行或整列，直接按Del 即可删除。 键，即可删除。 先将光标移到要删除的行或列中， 先将光标移到要删除的行或列中，选择 修改” 表格 表格” 删除行 删除行” 删除列” “修改”|“表格”|“删除行”或“删除列” 命令。 命令。 将光标移到要删除的行或列中， 将光标移到要删除的行或列中，单击鼠标 右键，在弹出的快捷菜单中选择“表 右键，在弹出的快捷菜单中选择“ 删除行” 删除列”命令。 格”|“删除行”或“删除列”命令。 删除行
《网页设计与制作》习题及答案
第1章网页设计基础1.网页文件不包括 ( D )A HTML文件 B多媒体文件 C图像文件 D Dos文件2.网页构成元素按照元素划分为（ABCD ）A 文本B 图像 C超链接 D音频和视频3. HTML文档结构中表示头部信息的（ B）A < body > < /body > B<head></head> c <html></html> D<title></title>4.在HTML文档中，使文本内容强制换行的标签是（B）A<hr> B<br> C<pre> D<hn>5.以下哪个标签语言符合HTML的语法规范（D）A<img src=pic.jpg width=150 height=200/>B<p><div>文字加粗</p></div>C<p align=center>D<hr width=”400” color=”#000000”>6．不属于HTML标记的是（ C ）A.<html>B.<head>C.<color>D.<body>7．为了标记一个HTML文件，应该使用的HTML标记是（ C ）A.<p></p>B.<body></body>C.<html></html >D.<title></ title>二填空1.网页分为（静态网页）和（动态网页）两种类型。
2.HTML中的所有标签都是有一对（<>）围住。
3.HTML网页的标题是通过（<title></title>）标签显示的。
4.（<hr>）是水平线标签，可以在页面生成一条水平线。
网页设计与制作第四章
（3）定义CSS样式的区块属性
在CSS样式定义对话框中的“分类”列表中选择 “区块”选项，设置CSS样式的“区块”属性， 包括单词间距、字母间距、对齐方式、文字缩进 等内容。
（4）定义CSS样式的方框属性
在CSS样式定义对话框中的“分类”列表中选择 “方框”选项，设置CSS样式的“方框”属性 。
4.1 CSS样式 样式
一.使用CSS样式面板 使用CSS样式面板 CSS
使用Dreamweaver MX 2004的CSS样式面板可以创建和管 理CSS样式。用下面的方法之一可以打开CSS样式面板： （1）选择命令“窗口”→“CSS样式”。 （2）单击“设计”面板上的小三 角形将 “设计”面板展开，选择 样 面板上的“CSS样式”标签。 式 面 （3）使用快捷键“Shift+F11” 板
二.模板的编辑 模板的编辑
1．编辑页面共用部分
（1）打开模板面板，然后 在模板面板的列表中选中 要修改的模板，单击“编 辑”按钮，或双击已有模 板名将模板打开； （2）编辑页面共用部分
2．定义可编辑区域
（1）将光标放在表格右边单元格中，单击鼠标右键 选择“模板”→“新建可编辑区域”，出现新建 可编辑区域对话框，为该区域输入一个名称；
4.2 模板
模板的创建 模板的编辑
模板
在一个网站中，有大量的网页具有相同的格式， 我们可以创建一个网页样本，在此样本中包含有 可编辑区域和不可编辑区域。不可编辑区域的内
模板 容是固定的，通常为标记、图标、导航栏目，而
可编辑区域内容是可变的，这就是模板。使用模 板可以大大提高制作网页的效率。
一、模板的创建
CSS 图
二.新建和编辑CSS样式 新建和编辑CSS样式 CSS 1.新建CSS样式 2.设置CSS样式定义对话框参数 3.编辑CSS样式表
网页设计与制第4章图文
3．图层 图层就像透明的胶片，每个层都包含一个显示在舞台中 的不同图像，在舞台上一层层地向上叠加，每一张又都保持 独立。在一个图层上绘制和编辑对象，不会影响其他图层上 的对象。当有很多图层时，可以组合出各种复杂的动画效果。 Flash中的图层位于时间轴左侧，如图4-17所示。
第4章 Flash 8入门 图4-17 图层
第4章 Flash 8入门 图4-26 设置“声音”属性
第4章 Flash 8入门
(4) 测试和保存影片。 ① 保存文档，文件名为“奔驰的骏马”。 ② 按组合键Ctrl+Enter测试影片，观看效果。 ③ 制作完成的动画场景如图4-27所示。
4.2 制作Flash动画
本节知识点
逐帧动画 形状补间动画 动作补间动画 引导层动画 遮罩动画
第4章 Flash 8入门
4.2.1 逐帧动画
逐帧动画是一种常见的动画形式，其原理是在“连续的 关键帧”中分解动画动作，也就是在时间轴的每个关键帧上 逐帧绘制不同的内容，连续播放形成动画。
案例1：制作“文字流光效果”动画 制作如图4-21所示的“文字流光效果”动画。
③ 选择“工具”面板上的“椭圆工具”，在“属性”面 板上设置笔触颜色为“没有颜色”，设置填充颜色为蓝色 (#0000FF)。移动鼠标到舞台的中间，按住键盘上的Shift键的 同时按住鼠标左键拖动，绘制出一个任意大小的正圆，如图 4-5所示。
第4章 Flash 8入门 图4-5 绘制出的小球
第4章 Flash 8入门
(5) 保存和测试动画。 ① 执行“文件”→“保存”命令(快捷键为Ctrl+S)，弹 出“另存为”对话框，指定文件保存的路径，输入文件名 “小球运动”，保存类型为“Flash 8文档(*.fla)”，如图4-13 所示。
第4章 Flash 8入门 图4-17 图层
第4章 Flash 8入门 图4-26 设置“声音”属性
第4章 Flash 8入门
(4) 测试和保存影片。 ① 保存文档，文件名为“奔驰的骏马”。 ② 按组合键Ctrl+Enter测试影片，观看效果。 ③ 制作完成的动画场景如图4-27所示。
4.2 制作Flash动画
本节知识点
逐帧动画 形状补间动画 动作补间动画 引导层动画 遮罩动画
第4章 Flash 8入门
4.2.1 逐帧动画
逐帧动画是一种常见的动画形式，其原理是在“连续的 关键帧”中分解动画动作，也就是在时间轴的每个关键帧上 逐帧绘制不同的内容，连续播放形成动画。
案例1：制作“文字流光效果”动画 制作如图4-21所示的“文字流光效果”动画。
③ 选择“工具”面板上的“椭圆工具”，在“属性”面 板上设置笔触颜色为“没有颜色”，设置填充颜色为蓝色 (#0000FF)。移动鼠标到舞台的中间，按住键盘上的Shift键的 同时按住鼠标左键拖动，绘制出一个任意大小的正圆，如图 4-5所示。
第4章 Flash 8入门 图4-5 绘制出的小球
第4章 Flash 8入门
(5) 保存和测试动画。 ① 执行“文件”→“保存”命令(快捷键为Ctrl+S)，弹 出“另存为”对话框，指定文件保存的路径，输入文件名 “小球运动”，保存类型为“Flash 8文档(*.fla)”，如图4-13 所示。
网页设计与制作第四章讲稿
4.6.1 创建框架集与框架
HTML语言用标签<FRAMESET>表示框架集， 属性rows表示水平分割几个窗口，属性值可以是 数值、百分数，其中“*”表示分配剩余空间。 属性值的个数代表分割窗口数，并用逗号隔开。 例如，rows=“60,30%,*”表示将窗口水平分割 成三个子窗口，第一个窗口宽度为60像素，为绝 对高度，第二个窗口占整个窗口的50%，为相对 高度，第三个窗口分配剩余部分；属性cols表示 将窗口垂直分割，属性值表达方式与rows相似；
4.6.1 创建框架集与框架
属性frameborder表示框架是否显示边框， 其值只有0和1，0表示不显示边框，1表示 显示边框； 属性border表示框架的边框宽度，以像素 为单位； 属性bordercolor表示框架的边框颜色；属 性framespacing表示框架与框架间的间距。
4.6.1 创建框架集与框架
4.1.3 插入其它常见对象
插入图像 使用Dreamweaver插入图像，点击菜单栏的 【插入】→【图像】，弹出图像选择对话框，选 择图像所在路径，确定添加图像。 图像选择对话框上【URL】文本框会显示添加图 像的路径，图像的路径表达方式可以通过对话框 上【相对于】下拉菜单选择。默认值是【文档】 选项，表示路径表达方式是相对路径，而选项 【站点根目录】表示路径表达方式是根相对路径。
4.6.1 创建框架集与框架
属性scrolling表示窗口滚动条设置，其中 yes 表示一定显示滚动条，no表示从不显 示滚动条，auto表示根据页面大小决定是 否显示滚动条； 属性noresize表示使用者不可以改变这个 窗口边框的位置，如果没有设定noresize 属性，使用者可以随意地调整窗口边框的 位置；
《网页设计与制作》第4章课件
如何实现窗口间的关联3-1
如何实现左列导 航，在右面显示 相关页面？
使用<a>标签的target目标窗口属性
如何实现窗口间的关联3-2
实现窗口间关联的步骤 1、设置窗口名（框架主页）
设置右窗口名为： rightFrame
…… <frameset rows="20%,*" frameborder="0"> ... ... <frame src="subframe/right.html" name="rightFrame"> ... ... </frameset> ……
操作演示：iframe常用属性
练习——引用google主页
需求说明：
根据提供的素材实现
引用Google主页
练习——<iframe>实现页面复用
需求说明：
根据提供的素材实现
总结2-1
框架的基本语法？ 如何实现2行2列的典型框架？
如何实现窗口间关联？
内嵌框架的语法？
……
<body> <iframe src="" width="400px" height="236px" frameborder="1" scrolling="no" > <iframe/>
引用站内页面 <iframe src="subframe/the_second.html" width="400px" height="236px" scrolling="no" > <iframe/> </body> …… 引用站外页面： sohu
《网页设计与制作—第四章》：页面设计(免费下载)
10
返回
网页布局实例3 网页布局实例3
11
标题正文型结构的顶端是网站标识和标题 ，下面是网页正文。内容非常简单。
返回
网页布局实例4 网页布局实例4
12
返回
网页布局实例5 网页布局实例5
13
返回
网页布局实例6 网页布局实例6
14
返回
15
网页的版面布局
1.确定显示分辨率 确定显示分辨率
（1）T型结构布局
返回
多个层的大小调整
46
• 选择需调整大小的多个层，然后选择“修 改/对齐”菜单中的“设成宽度相同”或 “设成高度相同”命令，则所有选择的层 将设置为最后选择层的宽度或高度，也可 在“属性”面板的“宽”、“高”文本框 中输入所需的宽度和高度值，再按Enter键， 选择的所有层将调整为设定的大小。
返回
在一个已有的层中描绘新层时按住[Alt]键可绘制 现有层的嵌套层，如果不按住[Alt]键绘制的是连个 重叠的层。 在层面板中按住[Ctrl]键将一个层拖动到层列表的 另一个层上，可将其变为后者的子层。
返回
层与表格的互相转换
1. 将层转换成表格
选中要转换的层，使用菜单“修改”→“转 换”→“层到表格”打开转换层为表格对话框。
50
返回
使用层实现图文混排2 使用层实现图文混排2
重复上述操作，再次插入两个新层。这样 在该单元格中共插入三个层，我们将图片移到 在左上方的层中，文字移到右上方和下面的层 中。 单击该标记可以选中其所对应的层。单击层 的外围框线，选中层。将鼠标指针移动到框线 上，拖动鼠标，更改层的大小为图像大小。 调整文字的字 号和字体 ，以 及层的位置， 实现图文混排 。
返回
网页设计与制作第4章PPT课件
ID：用于设置HTML 5音频的标题。 源：用于设置HTML 5音频源文件。 Controls：选中该属性，表示显示音频播放控件。 Autoplay：选中该属性，则音频在加载完成后自动播放。 Loop：选中该属性，则音频将循环播放。 Muted：设置音频是否静音。 Preload：选中该属性，则音频在页面加载的同时进行加载，并预备播放。如果已选中 “Autoplay”，则忽略该属性。 “Alt源1”和“Alt源2”：用于设置当“源”编辑框中设置的音频格式不被当前浏览器支持 时，打开的第2种和第3种音频格式。
一、网页、网站和主页
15
拓展知识
HTML 5 Audio和Video所支持的音频和视频格式
HTML 5 Audio元素能够播放声音文件和音频流，下表列出了当前Audio元素支持的3种音频格式及其所适用 的浏览器。
IE 9
Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
4
相关知识
一、插入HTML 5 Audio
步骤 01 将本书附赠的“素材与实例\ch04”目录下的“blog”文件夹拷贝至本地磁盘，并以“blog”为站 点文件夹，在Dreamweaver CC中创建站点“blog”。
步骤 02 启动Dreamweaver CC，在“文件”面板中双击打开站点“blog”中的“music.html”文档。
“W”和“H”：用于设置视频对象的宽度和高度，默认单位为像素。 Flash回退：用于设置在不支持HTML 5视频的浏览器中显示的SWF文件。
9
三、插入并编辑插件
步骤 01 步骤 02
步骤 03
在“blog”站点中新建文档“chj.html”，并将其在文档编辑窗口中打开。 将插入点置于文档编辑窗口中，单击“插入”面板“HTML”类别中的“插件”按钮，打 开“选择文件”对话框。 在对话框的文件列表中选择要 插入的文件“cj.mp3”，并单 击“确定”按钮，插入插件， 如右图所示。
一、网页、网站和主页
15
拓展知识
HTML 5 Audio和Video所支持的音频和视频格式
HTML 5 Audio元素能够播放声音文件和音频流，下表列出了当前Audio元素支持的3种音频格式及其所适用 的浏览器。
IE 9
Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
4
相关知识
一、插入HTML 5 Audio
步骤 01 将本书附赠的“素材与实例\ch04”目录下的“blog”文件夹拷贝至本地磁盘，并以“blog”为站 点文件夹，在Dreamweaver CC中创建站点“blog”。
步骤 02 启动Dreamweaver CC，在“文件”面板中双击打开站点“blog”中的“music.html”文档。
“W”和“H”：用于设置视频对象的宽度和高度，默认单位为像素。 Flash回退：用于设置在不支持HTML 5视频的浏览器中显示的SWF文件。
9
三、插入并编辑插件
步骤 01 步骤 02
步骤 03
在“blog”站点中新建文档“chj.html”，并将其在文档编辑窗口中打开。 将插入点置于文档编辑窗口中，单击“插入”面板“HTML”类别中的“插件”按钮，打 开“选择文件”对话框。 在对话框的文件列表中选择要 插入的文件“cj.mp3”，并单 击“确定”按钮，插入插件， 如右图所示。
第4章网页设计与制作
3
4
• 在设计网页时，可以直接绘制表格，也可以导入表格数 据，并将其转化为表格。
• 表格是网页中对文本和图像布局的强有力的工具。一个 表格通常由行、列和单元格组成，每行由一个或多个单 元格组成。表格中的横向称为行，纵向称为列，一行与 一列相交所产生的区域则称为单元格。要将相关数据有 序地组织在一起，必须先插入表格，然后才能有效组织 数据。 • 绘制表格的具体操作步骤如下： • （1）在“文档”窗口的“设计”视图中，将插入点放在 需要表格出现的位置。 • 提示： 如果您的文档是空白的，则只能将插入点放置在 文档的开头。
18
4.2.5设置表格边框
• 表格中的一些效果是通过设置表格边框的属性来实 现的，对于表格边框，可以设置它的粗细和颜色。
• 1）边框的粗细
• 在表格【属性】面板上的“边框”问半框用来设置 表格边框的粗细，默认情况下设置为1，即如果没有 明确指定边框的值，则大多数浏览器按边框值为1的 设置显示表格。通过改变该文本框中的数值，可以 调整表格边框的粗细。如下图所示为分别将表格的 边框设置为0、1和10的效果。
5
• （2）通过以下几种方法启用【表格】对话框。 • 在菜单栏中选择【插入】→【表格】命令。 • 在【插入】面板的【常用】模式中，单击【表格】按钮 。 • 弹出【表格】对话框，如图所示。其中，各选项的含义如 下：
6
• 行数：确定表格行的数目。
• 列数：确定表格列的数目。 • 表格宽度：以像素为单位或按占浏览器窗口宽度的百分 比指定表格的宽度。 • 边框粗细：指定表格边框的宽度（以像素为单位）。 • 单元格间距：决定相邻的表格单元格之间的像素数。如 果没有明确指定边框粗细或单元格间距和单元格边距的 值，则大多数浏览器都按边框粗细和单元格边距设置为 1 、单元格间距设置为 2 来显示表格。若要确保浏览器显 示表格时不显示边距或间距，请将“单元格边距”和“ 单元格间距”设置为 0。 • 单元格边距：确定单元格边框与单元格内容之间的像素 数。
第4章 网页制作-盒子模型_教学设计(教案)
《网页设计与制作(HTML+CSS)》教学设计(教案)课程名称：网页设计与制作(HTML+CSS) 授课年级：XX年级授课学期：XX学年第一学期教师姓名：某某老师XX年XX月XX日课题名称第4章盒子模型计划学时6 课时内容分析盒子模型是CSS网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。
本课程将对盒子模型的组成进行详细讲解，并结合案例进一步巩固本章节所学知识。
教学目标及基本要求要求学生理解盒子模型的概念，掌握盒子模型的内边距（padding）、边框（border）和外边距（margin），熟悉元素模式的相互转换，同时注意盒子外边距合并的问题，熟练使用边距属性值的几个写法。
重点及措施教学重点：盒子模型的组成、元素类型的转换、盒子外边距合并问题及其解决方法。
难点及措施教学难点：利用盒子模型进行布局时，外边距和内边距的使用、使用内边距注意盒子实际的大小。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解教学过程第一课时（认识盒子模型、盒子模型的组成属性、边框(border)属性）认识盒子模型✧盒子模型的重要性盒子模型是CSS网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。
首先我们分析一下盒子的构成。
上图就是盒子模型的组成部分，网页中所有的元素和对象都是由上图所示的基本结构组成，理解了盒子模型的结构后，要想随心所欲地控制页面中每个盒子的样式，还需要掌握盒子模型的相关属性，接下来我们就对盒子模型的相关属性进行详细讲解。
盒子模型的组成属性✧边框属性为了分割页面中不同的盒子，常常需要给元素设置边框效果，在CSS中边框属性包括边框样式属性（border-style）、边框宽度属性（border-width）、边框颜色属性（border-color）。
1、设置边框样式（border-style）：边框样式用于定义页面中边框的风格，常用属性值如下：●none：没有边框即忽略所有边框的宽度（默认值）●solid：边框为单实线●dashed：边框为虚线●dotted：边框为点线●double：边框为双实线使用border-style属性综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
网页设计与制作基础教程ch04简明教程PPT课件
网页设计与制作基础教程
本章知识点
CSS样式的概念 在网页文档中使用CSS样式 编辑CSS样式 设置CSS样式
网页设计与制作基础教程
4.1 CSS样式的概念
CSS样式是Cascading Style Sheets(层叠样式单)的简称，也可以称为【 级联样式表】，它是一种网页制作的新技术，利用它可以对网页中的 文本进行精确的格式化控制。
网页设计与制作基础教程
4.1.2
CSS规则
CSS规则由两部分组成：选择器和声明(大多数情况下为包含多个 声明的代码块)。选择器是标识已设置格式元素的术语，例如 p、h1、 类名称或ID，而声明块则用于定义样式属性。例如下面CSS规则中， h1 是选择器，大括号({})之间的所有内容都是声明块。
网页设计与制作基础教程
网页设计与制作基础教程
4.3.3
移动CSS规则
在Dreamweaver CS4中的CSS规则，可以很方便地移动到不同 位置，例如将规则在文档间移动、从文档头移动到外部样式表、在外 部CSS文件之间移动等等。 如果移动的CSS规则与目标样式表中的规则冲突，系统会打开 一个【存在同名规则】对话框，将移动的规则放在目标样式表中紧靠 冲突规则的旁边。
4.3
编辑CSS样式
新建好CSS样式后，如果要对CSS样式进行编辑等操作。对CSS 样式的编辑操作主要包括修改CSS样式属性、设置CSS样式首选参数以 及链接和导入CSS样式。
设置CSS样式首选参数 修改CSS样式 移动CSS规则 链接和导入CSS样式
网页设计与制作基础教程
4.3.1
网页设计与制作基础教程
4.2.3 新建CSS规则
创建一个CSS规则后，可以用来自动完成HTML标签的格式设 置或者class或ID属性所标识的文本范围的格式设置。 将光标移至网页文档中，选择【格式】|【CSS样式】|【新建 】命令，打开【新建CSS规则】对话框，如图所示。
第4章 编辑与设置网页文本(姜慧霖)
直接输入文本
导入外部文本 复制与粘贴文本
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
4.1.2 插入特殊字符
在网页文档中常见的特殊符号有版权符号、货币符号、注册商标号以及 直线等。要在网页中插入特殊字符，用户可以在Dreamweaver中执行以下操 作。
4.1 在网页中添加文本
文本是网页中最常见也是应用最广泛的元素之一，是网页内容的核心 部分。在网页中输入文本域在其他应用软件（例如Word、Excel等）中添加 文本一样方便，用户可以在Dreamweaver软件中直接在网页中输入文本，也 可以从其他文档中复制文本，还可以插入水平线和特殊字符等。本节将通过 实例详细介绍在网页中添加文本的具体方法 。
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
4.2
设置网页文本属性
设置网页中的文本属性，可以将网页中的文本设置成色彩纷呈、样式 各异的文本，使枯燥的文本更显生动。在Dreamweaver中，用户可以通过编 辑文本设置文本字体、颜色以及对齐方式等属性 。
显示网页文档头部信息
在网页文档头部插入元素
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
本 章 重 点
在网页中插入文本
设置网页文本属性 设置网页文本格式 设置文本段落格式 设置网页头部信息
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
高等学校计算机应用规划教材
《网页设计与制作基础教程》
第 四 章
导入外部文本 复制与粘贴文本
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
4.1.2 插入特殊字符
在网页文档中常见的特殊符号有版权符号、货币符号、注册商标号以及 直线等。要在网页中插入特殊字符，用户可以在Dreamweaver中执行以下操 作。
4.1 在网页中添加文本
文本是网页中最常见也是应用最广泛的元素之一，是网页内容的核心 部分。在网页中输入文本域在其他应用软件（例如Word、Excel等）中添加 文本一样方便，用户可以在Dreamweaver软件中直接在网页中输入文本，也 可以从其他文档中复制文本，还可以插入水平线和特殊字符等。本节将通过 实例详细介绍在网页中添加文本的具体方法 。
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
4.2
设置网页文本属性
设置网页中的文本属性，可以将网页中的文本设置成色彩纷呈、样式 各异的文本，使枯燥的文本更显生动。在Dreamweaver中，用户可以通过编 辑文本设置文本字体、颜色以及对齐方式等属性 。
显示网页文档头部信息
在网页文档头部插入元素
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
本 章 重 点
在网页中插入文本
设置网页文本属性 设置网页文本格式 设置文本段落格式 设置网页头部信息
:::::《计算机基础与实训教材系列》系列丛书官方网站
/edu :::::
高等学校计算机应用规划教材
《网页设计与制作基础教程》
第 四 章
《网页设计与制作》第04章
无边框。 无边框。
• 表格宽度控制：依次为清除列宽、将表宽度转换为像素 表格宽度控制：依次为清除列宽、
单位、将表宽度转换为百分比单位。 单位、将表宽度转换为百分比单位。
• 表格高度控制：依次为清除列宽、将表列度转换为像素 表格高度控制：依次为清除列宽、
单位、将表列度转换为百分比单位。 单位、将表列度转换为百分比单位。
拆分单元格” 弹出“拆分单元格”对话框。 拆分单元格”按钮 ，弹出“拆分单元格”对话框。
• 步骤6：在对话框中设置行为3。单击“确定”按钮。 步骤6 在对话框中设置行为3 单击“确定”按钮。 • 步骤7：保存。按F12预览。 步骤7 保存。 F12预览 预览。
4.2 布局视图的使用
4.2.1 绘制布局视图
属性面板。 属性面板。
• 单元格属性面板参数说明： 单元格属性面板参数说明： • 合并与拆分单元格：将选取的多个单元格合并，或将单元格 合并与拆分单元格：将选取的多个单元格合并，
拆分为多行或多列。 拆分为多行或多列。
• 水平、垂直：设置单元格内容的水平对齐与垂直对齐方式。 水平、垂直：设置单元格内容的水平对齐与垂直对齐方式。 • 宽、高：设置单元格的宽度和高度。 设置单元格的宽度和高度。 • 不换行：购选此项，文本超出单元格的宽度时不自动换行， 不换行：购选此项，文本超出单元格的宽度时不自动换行，
《网页设计与制作》
第四章 网页布局
讲解提纲
• 4.1 表格的使用 • 4.2 布局视图的使用 • 4.3 层的使用 • 4.4 框架的使用
本章教学目标：
• • • •
1．掌握新建表格 编辑表格 2．熟练掌握布局视图的使用 3．掌握层的使用在页面中的应用 4．掌握框架的技术使用
4.1表格的使用 4.1表格的使用
• 表格宽度控制：依次为清除列宽、将表宽度转换为像素 表格宽度控制：依次为清除列宽、
单位、将表宽度转换为百分比单位。 单位、将表宽度转换为百分比单位。
• 表格高度控制：依次为清除列宽、将表列度转换为像素 表格高度控制：依次为清除列宽、
单位、将表列度转换为百分比单位。 单位、将表列度转换为百分比单位。
拆分单元格” 弹出“拆分单元格”对话框。 拆分单元格”按钮 ，弹出“拆分单元格”对话框。
• 步骤6：在对话框中设置行为3。单击“确定”按钮。 步骤6 在对话框中设置行为3 单击“确定”按钮。 • 步骤7：保存。按F12预览。 步骤7 保存。 F12预览 预览。
4.2 布局视图的使用
4.2.1 绘制布局视图
属性面板。 属性面板。
• 单元格属性面板参数说明： 单元格属性面板参数说明： • 合并与拆分单元格：将选取的多个单元格合并，或将单元格 合并与拆分单元格：将选取的多个单元格合并，
拆分为多行或多列。 拆分为多行或多列。
• 水平、垂直：设置单元格内容的水平对齐与垂直对齐方式。 水平、垂直：设置单元格内容的水平对齐与垂直对齐方式。 • 宽、高：设置单元格的宽度和高度。 设置单元格的宽度和高度。 • 不换行：购选此项，文本超出单元格的宽度时不自动换行， 不换行：购选此项，文本超出单元格的宽度时不自动换行，
《网页设计与制作》
第四章 网页布局
讲解提纲
• 4.1 表格的使用 • 4.2 布局视图的使用 • 4.3 层的使用 • 4.4 框架的使用
本章教学目标：
• • • •
1．掌握新建表格 编辑表格 2．熟练掌握布局视图的使用 3．掌握层的使用在页面中的应用 4．掌握框架的技术使用
4.1表格的使用 4.1表格的使用
网页设计与制作实践(HTML+CSS)第4章盒子模型
该设置方式中，宽度、样式、颜 色顺序任意，不分先后，可以只 指定需要设置的属性，省略的部 分将取默认值（样式不能省略）。
4.2 盒子模型相关属性
• 4.2.1 边框属性—综合设置边框
• 像border、border-top等这样，能够一个属性定义元素的多种样式，在CSS中称之为复合属性。 • 常用的复合属性有font、border、margin、padding和background等。 • 复合属性可以简化代码，提高页面的运行速度，但是如果只有一项值，最好不要应用复合
4.2 盒子模型相关属性
• 4.2.1 边框属性—设置边框样式（border-style）
• 既可以对盒子的单边进行设置，也可以综合设置四条边的样式：
border-top-style:上边框样式 border-right-style:右边框样式 border-bottom-style:下边框样式
值为四边，两个值为上下/左右，
border-left-width：左边框宽度
三个值为上/左右/下。
border- width：上边框宽度 [右边框宽度 下边框宽度 左边框宽度]
4.2 盒子模型相关属性
• 4.2.1 边框属性—设置边框颜色（border-color）
– 边框颜色的单边与综合设置如下：
• 使用border-style属性综合设置四 边样式时，必须按上右下左的顺
border-left-style:左边框样式
时针顺序。
border-style:上边框样式
右边框样式 下边框样式
左边框样式
• 省略时采用值复制的原则，即一
border-style:上边框样式 左右边框样式 下边框样式
《网页设计与制作》第04章
制布局表格。单击“布局”工具栏上的“绘制布局单元格”按 钮，绘制布局单元格。
• 步骤4：拖动鼠标在页面上绘制出所需要的表格，即可完成布
局模式的创建。布局表格为浅绿色，上面带有布局表格的标签 和列标题栏。在列标题栏上显示着每列的宽度，单击列标题栏 可以打开列标题菜单。
• 步骤5：绘制完布局表格和单元格后，系统会自动生成表格。
• 2. 设置表格属性
如果需要查看表格的属性，可以选中表格，弹出表格属性 面板。
• 表格属性面板参数说明： • 表格Id：表格名称，用于脚本语言中的引用。 • 行、列：表格的行与列。可输入数值改变表格的行数和列数。 • 宽、高：表格的宽与高。可输入数值改变表格的宽与高，单位
有百分比和像素。
• 填充：单元格边框相对于单元格内容的距离。 • 间距：表格内单元格之间的距离。 • 对齐：可以设置表格水平对齐方式，包括默认、左对齐、居中
动到适当的位置。
4.2.3 重设布局表格和单元格的大小
• 步骤1：打开buju.htm，切换到布局模式下。 • 步骤2：选中要调整的布局表格，出现控制点，用鼠标
拖动控制点，调整布局表格的大小。
• 步骤3：选中要调整的布局单元格，出现控制点，用鼠
标拖动控制点，调整布局表格的大小。
4.2.4 清除单元格高度
击“插入”按钮。
• 步骤3：在“标签编辑器-Iframe”对话框中，根据面板提示
操作。最基本的两项是“源”和“名称”。
• 步骤4：设置链接在某个iframe中打开。选中链接，在属性
面板中的“目标”项，手工输入目标iframe的名称。
• 步骤5：iframe透明。为了使iframe内容和网页背景相同，
择链接的文档应在其中显示的框架或窗口。
• 步骤4：拖动鼠标在页面上绘制出所需要的表格，即可完成布
局模式的创建。布局表格为浅绿色，上面带有布局表格的标签 和列标题栏。在列标题栏上显示着每列的宽度，单击列标题栏 可以打开列标题菜单。
• 步骤5：绘制完布局表格和单元格后，系统会自动生成表格。
• 2. 设置表格属性
如果需要查看表格的属性，可以选中表格，弹出表格属性 面板。
• 表格属性面板参数说明： • 表格Id：表格名称，用于脚本语言中的引用。 • 行、列：表格的行与列。可输入数值改变表格的行数和列数。 • 宽、高：表格的宽与高。可输入数值改变表格的宽与高，单位
有百分比和像素。
• 填充：单元格边框相对于单元格内容的距离。 • 间距：表格内单元格之间的距离。 • 对齐：可以设置表格水平对齐方式，包括默认、左对齐、居中
动到适当的位置。
4.2.3 重设布局表格和单元格的大小
• 步骤1：打开buju.htm，切换到布局模式下。 • 步骤2：选中要调整的布局表格，出现控制点，用鼠标
拖动控制点，调整布局表格的大小。
• 步骤3：选中要调整的布局单元格，出现控制点，用鼠
标拖动控制点，调整布局表格的大小。
4.2.4 清除单元格高度
击“插入”按钮。
• 步骤3：在“标签编辑器-Iframe”对话框中，根据面板提示
操作。最基本的两项是“源”和“名称”。
• 步骤4：设置链接在某个iframe中打开。选中链接，在属性
面板中的“目标”项，手工输入目标iframe的名称。
• 步骤5：iframe透明。为了使iframe内容和网页背景相同，
择链接的文档应在其中显示的框架或窗口。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
文本的应用
1. 文本的输入
所见即所得 将光标定位到要 输入文字的空白区 域 输入文字 换行回车
文本的应用
2. 编辑区域的设置
可编辑区域，即文字 或图片与网页的边距。 在网页任意位置，单 击鼠标右键 打开“页面属性”对 话框
文本的应用
3. 字符格式化
字符格式化主要是设置字体，字体大小， 文字的粗细、倾斜及文字的颜色等。 字符格式的设置主要是使用“文本”菜单 中的各种命令或者使用“属性面板”中的 各种快捷方式
文本的应用——段落格式化
(3) 选择不同的标题进行设置，其效果如图所示。
文本的应用——段落格式化
段落对齐有四种方式
左以齐 居中对齐 右对齐 两端对齐
CSS样式
CSS是 Cascading Style Sheet 的缩写，译 为“层叠样式表单” 作用：设置网页中文字的样式 与字符格式化区别
相同格式的文字设置 大量相同格式的文字样式的设置特别有效
CSS样式
样式分为三种，即类样式，标签样式， 高级样式 类样式 标签样式 高级样式 样式的两种保存方式:
在网页内部 在外部文件中(.css)
CSS样式
CSS样式的基本操作
自动创建样式 使用“CSS样式面板”创建样式
CSS样式的应用
建立新网页
1. 建立新网页的方 法
在Dreamweaver的 开始画面 执行“文件” →“新建”菜单 命令
建立 新网页
2. 保存网页
新网页的在 没有保存前的 默认名称是： Untitled-n 执行“文 件”→”保存 “菜单命令
建立新网页
3. 设置网页标题
网页的工具栏 上”标题”选项 输入标题
实训指导4
Step3:输入文字。 (1) 打开Dreamweaver,执行”文件” →”新建 “菜单命令，弹出“新建文档”窗口。 (2) 在“新建文档”窗口中选择“基本页”中的 “HTML”，再单击【创建】按钮,创建一个新网 页。 (3) 在网页中输入“静夜诗”的内容，并执行 “文件”→“保存”菜单命令。
CSS样式
CSS样式的应用 创建样式 样式的设置 应用到网页中的 文字
总结
新建网页的两种方式 文本格式化的内容:字体，字体大小，颜 色，粗体，倾斜 段落格式化的内容:左对齐，居中对齐， 右对齐,两端对齐 CSS样式的种类:类样式，标签样式，高 级样式
实训指导4
【实训项目1】某诗词鉴赏网站要制作一些古诗欣赏页 面，供广大读者欣赏，要求如下：页面内容可以是五言 绝句，七言绝句，宋词，元曲等。页面格式要求如下： (1) 每首诗、词、曲用一张网页显示，内容全部居中显 示。 (2) 要有标题，标题使用宋体，36号字,粗体，黑色。 (3) 内容使用楷书，使用28号字,蓝色。 (4) 因为要内容格式统一，要求使用CSS样式进行上述 格式的设置。
文本的应用——字符格式化
(1) 编辑字体
“编辑字体列表” 对话框中编辑网页 可用字体
文本的应用——字符格式化
(2) 设置字符格式
字体 字体大小 颜色 粗体 斜体
文本的应用——段落格式化
1.设置段落与标题 选中文字，可以将此文字设置为段落或标题，将一段独 立的台词设置为段落或标题，可以让整个网页显的有层 次感，网页标题分为6级。其操作步骤如下： (1) 在网页中选中相应的文字。 (2) 在“属性面板”中选择“格式”下拉列表，如图所 示。
实训指导4
操作步骤参考如下： Step1:建立站点SX9 (1) 启动Dreamweaver，执行“站点”→“新建站点”菜 单命令。 (2) 在打开的“未命名站点1的站点定义为“对话框中输 入站点名称sx9。 (3) 选择合适的位置放置站点文件。 Step2:建立网页，设置其属性 (1) 在Dreamweaver中执行“文件”→“新建”，打开 “新建文档”对话框。 (2) 选择“基本页”中的“HTML”部分，创建HTML网 页。 (3) 设置网页的标题。
实训指导4
Step4: 建立样式，并应用到网页中。 (1) 执行“窗口”→“CSS样式”，打开“CSS样式面 板”，设置标题的样式，样式名称为JinTitle。 (2) 在“CSS样式面板”上单击鼠标右键，在弹出的快捷 菜单中选择“新建”菜单命令，建立样式,并命名为 JinContent。 (3) 在编辑区域选中“静夜诗”，并在“属性面板”中选 择样式JinTitle。 (4) 在编辑区域选中其它文字 ，并在“属性面板”中选择 样式JinContent。
上一章回顾
Dreamweaver工作环境 站点创建与管理 制作一个简单的网页
制作网页标题 设置导航栏 设置网页内容 图像和文字的链接 设置页面属性 保存网页 浏览网页 设置首页及应用站点地图
本章目标
建立 新网页 文本的应用
文本的输入 文本的格式化 段落格式化
综合练习4
2. 填空题 (1) 为网页设置可编辑区域时，在”页面属性“对话框 中设置_______、_______、_______、________。 (2)对字符格式化时，可以设置字符的字体、颜色、字体 大小、________、_________。 3. 简答题 (1) 简述使用CSS样式的过程？ (2) 简述CSS的种类？
综合练习4
综合练习4 1. 选择题 (1) 在网页的设计中，对其中的文字进行格式化设置时，下列哪些不是对文字 格式化（ ）。 A. 粗体 B. 倾斜 C. 大小 D. 左对齐 (2) 在网页的设计中，设置段落格式时，可以将段落设置为（ ）。 A. 左对齐 B. 居中对齐 C. 两端对齐 D. 倾斜 (3) 新建网页时，在“新建文档”对话框中选择”基本页”中的（ ）来创建一 个HTML网页。 A. HTML模板 B. HTML C. CSS D. XSLT片段
实训指导4
Step5:浏览网页，查看效果。 (1) 保存网页，并按下快捷键F12，浏览网页内容，其效 果如图所示。
实训指导4
【实训项ห้องสมุดไป่ตู้2】设计一张网页，内容为个人简介 信息，要求对其中的文字进行格式化，使用宋体 12号字,加粗，颜色为蓝色,要写三段文字，分别 使用居中，左对齐，右对齐的方式显示。 【实训项目3】设计两张网页，内容为个人简介 信息和班级简介，要求对其中的文字进行格式化， 使用楷体14号字,斜体，颜色为蓝色,但要求使用 CSS样式。