《网页设计与制作》第三章：插入网页基本元素.ppt-文档资料
合集下载
网页设计与制作讲义课件第3章
图案填充采用Fireworks 8预设的图案或用户自己选择 的图案进行填充。
渐变填充采用若干种颜色之间平滑地过渡来进行填 充。
单击颜色拾取框上的【填充选项】按钮可以选择填充 的类型并作进一步的设置。
(2) 【笔尖大小】：用于设置刷子、铅笔、橡皮擦等绘图 工具的笔头的粗细。
(3) 【边缘】：用于设置用绘图工具绘出的图像边缘的柔 和程度。
网页设计与制作课件第 3章
精品
本章重点：
位图绘图和编辑操作 位图的选区操作 矢量图绘图和编辑操作 路径的操作 文字的使用方法 路径、文字、选区互相转换
3.1位图绘制
位图是由像素组成的。Fireworks 8提供了许多 修饰位图图像的方法，包括修饰、裁剪、羽化和克隆 图像等操作。利用图层和蒙版技术还可以进行图像的 后期创作，可以取得一些特殊的效果。
3. 设置不规则选区
用于设置不规则选区的是【套索工具】。具体操作如 下：
选择【自动擦除】选项时，当【铅笔工具】在描边颜色上拖 动时会自动转为使用填充颜色绘图，相当于擦除了描边。
3.刷子工具
【刷子工具】汇集了生活中各种绘图工具的功能，可 以模拟各种作图手法画出异彩纷呈的图像。单击工具 箱中的【刷子工具】按钮，并在属性面板里设置所需 的属性，然后在画布中拖曳鼠标即可画出相应图形。
3.1.1位图的绘图操作
1. 绘图工具的常用属性
Fireworks 8 工具箱里有很多绘图工具，在属性面 板里可以设置绘图工具的各种属性，使之具有各种不 同的功能和状态，以满足各种各样的绘图需求。属性 面板里各项属性的功能如下。
(1) 【颜色】：用户可以通过单击【颜色选择按钮】 打开颜色拾取框来选择所需的颜色，颜色拾取框上列 出了网络安全色；单击【系统颜色选取器】按钮可以 打开调色板，选用其它丰富多彩的颜色。单击【透明】 按钮可以选择无色。
渐变填充采用若干种颜色之间平滑地过渡来进行填 充。
单击颜色拾取框上的【填充选项】按钮可以选择填充 的类型并作进一步的设置。
(2) 【笔尖大小】：用于设置刷子、铅笔、橡皮擦等绘图 工具的笔头的粗细。
(3) 【边缘】：用于设置用绘图工具绘出的图像边缘的柔 和程度。
网页设计与制作课件第 3章
精品
本章重点：
位图绘图和编辑操作 位图的选区操作 矢量图绘图和编辑操作 路径的操作 文字的使用方法 路径、文字、选区互相转换
3.1位图绘制
位图是由像素组成的。Fireworks 8提供了许多 修饰位图图像的方法，包括修饰、裁剪、羽化和克隆 图像等操作。利用图层和蒙版技术还可以进行图像的 后期创作，可以取得一些特殊的效果。
3. 设置不规则选区
用于设置不规则选区的是【套索工具】。具体操作如 下：
选择【自动擦除】选项时，当【铅笔工具】在描边颜色上拖 动时会自动转为使用填充颜色绘图，相当于擦除了描边。
3.刷子工具
【刷子工具】汇集了生活中各种绘图工具的功能，可 以模拟各种作图手法画出异彩纷呈的图像。单击工具 箱中的【刷子工具】按钮，并在属性面板里设置所需 的属性，然后在画布中拖曳鼠标即可画出相应图形。
3.1.1位图的绘图操作
1. 绘图工具的常用属性
Fireworks 8 工具箱里有很多绘图工具，在属性面 板里可以设置绘图工具的各种属性，使之具有各种不 同的功能和状态，以满足各种各样的绘图需求。属性 面板里各项属性的功能如下。
(1) 【颜色】：用户可以通过单击【颜色选择按钮】 打开颜色拾取框来选择所需的颜色，颜色拾取框上列 出了网络安全色；单击【系统颜色选取器】按钮可以 打开调色板，选用其它丰富多彩的颜色。单击【透明】 按钮可以选择无色。
《网页设计与制作》插入网页基本元素免费学技术改变生活51页PPT
大的骄傲于最大的自卑都表示心灵的最软弱无力。——斯宾诺莎 7、自知之明是最难得的知识。——西班牙 8、勇气通往天堂，怯懦通往地狱。——塞内加 9、有时候读书是一种巧妙地避开思考的方法。——赫尔普斯 10、阅读一切好书如同和过去最杰出的人谈话。——笛卡儿
1、不要轻言放弃，否则对不起自己。
2、要冒一次险!整个生命就是一场冒险。走得最远的人，常是愿意 去做，并愿意去冒险的人。“稳妥”之船，从未能从岸边走远。-戴尔．卡耐基。
梦 境
3、人生就像一杯没有加糖的咖啡，喝起来是苦涩的，回味起来却有 久久不会退去的余香。
《网页设计与制作》插入网页基本元素免 4、守业的最好办法就是不断的发展。 5、当爱不能完美，我宁愿选择无悔，不管来生多么美丽，我不愿失 去今生对你的记忆，我不求天长地久的美景，我只要生生世世的轮 回里有你。 费学技术改变生活
1、不要轻言放弃，否则对不起自己。
2、要冒一次险!整个生命就是一场冒险。走得最远的人，常是愿意 去做，并愿意去冒险的人。“稳妥”之船，从未能从岸边走远。-戴尔．卡耐基。
梦 境
3、人生就像一杯没有加糖的咖啡，喝起来是苦涩的，回味起来却有 久久不会退去的余香。
《网页设计与制作》插入网页基本元素免 4、守业的最好办法就是不断的发展。 5、当爱不能完美，我宁愿选择无悔，不管来生多么美丽，我不愿失 去今生对你的记忆，我不求天长地久的美景，我只要生生世世的轮 回里有你。 费学技术改变生活
网页设计与制作基础教程ch03简明教程PPT课件
网页设计与制作基础教程
本章知识点
使用表格 编辑表格 使用框架 设置框架属性
网页设计与制作基础教程
3.1
表格的基础知识
网页向浏览者提供的信息是多样化的，例如文字、图像、Flash动 画等。如何使这些网页元素在网页中的合理位置上显示出来，使网页 变得有条理和美观，是设计人员在着手设计网页之前必须考虑的事情 。表格的作用就在于帮助设计者高效、准确地定位各种网页数据，直 观、鲜明地表达设计者的思想。 认识表格 表格模式 插入表格
网页设计与制作基础教程
3.2.4 【扩展表格模式】
【扩展表格模式】会临时向网页文档中的所有表格添加单元格边 距和间距，并且增加表格的边框以使编辑操作更加容易。使用该模式 ，可以选择表格中的项目或者精确地放置插入点，从而避免无意中选 中该图像或表格单元格。
网页设计与制作基础教程
3.3
使用框架
在网络带宽十分有限的情况下，如何提高网页的下载速度，是 设计网页时必须考虑的问题。如果多个网页拥有相同的导航区，只是 内容有所不同，则可以考虑使用框架来设计网页布局。这样浏览者在 查看不同内容时，便无需每次都下载整个页面，而可以保持导航部分 不变，只下载网页中需要更新的内容部分即可，从而能够极大提高网 页的下载速度。这样的网页也称为框架页，其最典型的应用便是当前 十分流行的各种论坛。
网页设计与制作基础教程
第03章 规划网页布局
构建好本地站点后，可以开始规划网页布局。表格和框架是常用 的布局工具，表格在网页中不仅可以排列数据，还可以对页面中的图 像、文本、动画等元素进行准确的定位，是页面显得整齐有序、分类 明确，便于浏览。使用表格布局网页，在不同平台和不同分辨率的浏 览器中都能 保持原有的布局。使用框架规划网页，可以把网页分 成几个部分，每个部分都是一个独立的HTML页。本章主要介绍使用 表格和框架规划网页布局。
《网页设计与制作》第三章插入网页基本元素精品PPT课件
loop设置循环次数，小于1为连续循环。
Bgcolor设置滚动区域的背景颜色。
width 和height设置滚动区域的大小，沿垂直方向（up或down）
滚动时，必须设置一定的高度值，否则看不到滚动的文字。
09.10.2020
11
设置文本超级链接
1.使用属性面板 设置超级链接
2.使用工具按钮
（1）插入超级链接 单击工具栏上的超级链接按钮
对话框。
（5）在代码中出现<marquee></marquee>，在中间的两个尖括号
09.10.“20>20<”之间输入要滚动的文字，如“欢迎访问励志学社的主页！” 。
10
设置滚动字幕的属性
<marquee direction=“right”scrollamount=“8”scrolldelay=“110”
（2）在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码 窗口中光标的位置。
（3）将插入工具栏设置为“常规”，单击标签选择器按钮，打开标签选择
器对话框。
（4）在标签选择器对话框左边窗口逐级选择“HTML标签”→ “页元
素”→“浏览器特定”，然后在右边窗口中单击“marquee”，再单击下
面的“插入”按钮，marquee标签被插入到代码中，按“关闭”按钮关闭
09.10.2020
26
3.设置单元格属性
❖ 文字（属性面板的上半部分） ❖ 水平 ❖ 宽、高 ❖ 垂直 ❖ 标题 ❖ 背景和背景颜色 ❖ 边框
loop=“2”Bgcolor=“#00ff00”Width=“200”Height=“100”> …………
</marquee>
网页设计与制作课件第3章
在网页中插入水平线和图像 给网页设置背景颜色或背景图像
关闭
本章内容
• 3.1 文本与段落 • 3.1.1 字体和字号 • 3.1.2 文字颜色、对齐方式和文字样式 • 3.2 美 化 页 面 • 3.2.1 插入水平线 • 3.2.2 插入图像和给表格设置背景图像 • 3.2.3 图文混排 • 3.2.4 改变网页背景色和设置背景图像
“index.html”的网页，在页面中插入一个层并在层内输入文字 。
步骤2：在网页标题中输入网页标题“《沁园春·雪》”，按【Enter】键确认 。
步骤3：选择第1段“《沁园春·雪》（1936年2月）”，然后选择“属性”面
板中“字体”下拉列表中的“编辑字体列表”，系统弹出“编辑字体列表”对话
框。
步骤4：在“可用字体”栏中选中所需字体，这里选择“仿宋_GB2312”，单
击“可用字体”左侧的 按钮，将选中的字体添加到左侧的“选择的字体”列
表中，一种字体就添加好了，然后单击“确定”按钮 。
步骤5：选择文本“属性”面板上的“字体”下拉列表，把第一段设置为
“仿宋_GB2312” 。
步骤6：选择文本“属性”面板上的“大小”下拉列表，选择字体大小为
“18” 。 步骤7：保存文件，按【F12】键在浏览器中预览 。
在Dreamweaver中输入空格，直接使用空格键只能输入 一个半角字符，可以把输入法切换到全角状态，或是 使用【Ctrl+Shift+空格】组合键输入空格。
上一页 下一页 返回
知识点评
用鼠标选中文字后，“属性”面板中显示出关于文字的属性设置。如下图所 示。如果此时“属性”面板隐藏，可以通过菜单栏中的【窗口】→【属性】命令 打开文字“属性”面板。
步骤2：在文本“属性”面板单击按钮设置字体为加粗，接着单击按钮设置 对齐方式为居中对齐 。
关闭
本章内容
• 3.1 文本与段落 • 3.1.1 字体和字号 • 3.1.2 文字颜色、对齐方式和文字样式 • 3.2 美 化 页 面 • 3.2.1 插入水平线 • 3.2.2 插入图像和给表格设置背景图像 • 3.2.3 图文混排 • 3.2.4 改变网页背景色和设置背景图像
“index.html”的网页，在页面中插入一个层并在层内输入文字 。
步骤2：在网页标题中输入网页标题“《沁园春·雪》”，按【Enter】键确认 。
步骤3：选择第1段“《沁园春·雪》（1936年2月）”，然后选择“属性”面
板中“字体”下拉列表中的“编辑字体列表”，系统弹出“编辑字体列表”对话
框。
步骤4：在“可用字体”栏中选中所需字体，这里选择“仿宋_GB2312”，单
击“可用字体”左侧的 按钮，将选中的字体添加到左侧的“选择的字体”列
表中，一种字体就添加好了，然后单击“确定”按钮 。
步骤5：选择文本“属性”面板上的“字体”下拉列表，把第一段设置为
“仿宋_GB2312” 。
步骤6：选择文本“属性”面板上的“大小”下拉列表，选择字体大小为
“18” 。 步骤7：保存文件，按【F12】键在浏览器中预览 。
在Dreamweaver中输入空格，直接使用空格键只能输入 一个半角字符，可以把输入法切换到全角状态，或是 使用【Ctrl+Shift+空格】组合键输入空格。
上一页 下一页 返回
知识点评
用鼠标选中文字后，“属性”面板中显示出关于文字的属性设置。如下图所 示。如果此时“属性”面板隐藏，可以通过菜单栏中的【窗口】→【属性】命令 打开文字“属性”面板。
步骤2：在文本“属性”面板单击按钮设置字体为加粗，接着单击按钮设置 对齐方式为居中对齐 。
网页设计教程-第3章ppt课件
5
3.1.1 创建文档
在Dreamweaver中，用户可以从一个空白的HTML页面创建新文档，也 可以从模板创建，还可以打开并修改其他应用程序创建的HTML文档。
1. 创建新文档 启动Dreamweaver 8后，就可直接创建一个空文档。如果已经启动
Dreamweaver 8，要创建空白文档，可以在菜单栏中选择【文件】|【新 建】命令，则会出现如图3.1所示的【新建文档】对话框。 该对话框中默认显示的是【常规】选项卡，可以在其中选择不同的文档 格式。在【类别】列表框中选择【框架集】选项，在【框架集】列表框 中选择【上方固定，左侧嵌套】选项，在右边的【预览】框中可以预览 新建文档的结构。 单击并打开该对话框的【模板】选项卡，对话框如图3.2所示。可以在其 中选择不同的模板，在右边的【预览】框中可以预览新建文档的结构。
6
3.1.1 创建文档
图 3.1 【新建文档】对话框
7
3.1.1 创建文档
图 3.2 选择新建文档的模板
8
3.1.1 创建文档
图3.3所示为新建的一个框架结构类型的空文档，其中包含3个框架，分 别为：上框架、左框架和主框架。
在创建一个新文档后，如果打开HTML源代码检视器，实际上 Dreamweaver已经为用户打开了一个名为“Default.htm”的模板，每次 开始新建网页时，Dreamweaver都会将它打开。单击文档编辑窗口上的 【代码】按钮查看，源代码如图3.4所示。
教学目标：文档操作是设计网页的基本操作，它包括打开和编辑文档、 设置文档属性、定义文档标题等多个方面，在设计网页时都是必须 考虑到的。Dreamweaver 8提供了强大的页面图像控制能力，能够 帮助用户创建专业的图文并茂的页面。本章将介绍如何利用 Dreamweaver 8创建文档，并在文档中添加和控制图像。能否掌握 好这些网页基本元素的制作，对制作网页至关重要。
3.1.1 创建文档
在Dreamweaver中，用户可以从一个空白的HTML页面创建新文档，也 可以从模板创建，还可以打开并修改其他应用程序创建的HTML文档。
1. 创建新文档 启动Dreamweaver 8后，就可直接创建一个空文档。如果已经启动
Dreamweaver 8，要创建空白文档，可以在菜单栏中选择【文件】|【新 建】命令，则会出现如图3.1所示的【新建文档】对话框。 该对话框中默认显示的是【常规】选项卡，可以在其中选择不同的文档 格式。在【类别】列表框中选择【框架集】选项，在【框架集】列表框 中选择【上方固定，左侧嵌套】选项，在右边的【预览】框中可以预览 新建文档的结构。 单击并打开该对话框的【模板】选项卡，对话框如图3.2所示。可以在其 中选择不同的模板，在右边的【预览】框中可以预览新建文档的结构。
6
3.1.1 创建文档
图 3.1 【新建文档】对话框
7
3.1.1 创建文档
图 3.2 选择新建文档的模板
8
3.1.1 创建文档
图3.3所示为新建的一个框架结构类型的空文档，其中包含3个框架，分 别为：上框架、左框架和主框架。
在创建一个新文档后，如果打开HTML源代码检视器，实际上 Dreamweaver已经为用户打开了一个名为“Default.htm”的模板，每次 开始新建网页时，Dreamweaver都会将它打开。单击文档编辑窗口上的 【代码】按钮查看，源代码如图3.4所示。
教学目标：文档操作是设计网页的基本操作，它包括打开和编辑文档、 设置文档属性、定义文档标题等多个方面，在设计网页时都是必须 考虑到的。Dreamweaver 8提供了强大的页面图像控制能力，能够 帮助用户创建专业的图文并茂的页面。本章将介绍如何利用 Dreamweaver 8创建文档，并在文档中添加和控制图像。能否掌握 好这些网页基本元素的制作，对制作网页至关重要。
《网页设计与制作》第3章课件
如何实现图文布局2-1
实现步骤
如何实现图文布局2-2
…… 公告栏：跨2列 <table border="1px"> <tr> <td colspan="2"><img src=“…" alt="公告栏" /></td> 图片：跨4行 </tr> <tr> <td rowspan="4"><img src=“…" alt="公告左侧图" /></td> <td>大学要求老师开网店</td> </tr> <tr> <td>安全锤网上大热销</td> </tr> …… </tr> </table> ……
colspan 跨3列
colspan 跨2行
表格高级标签2-1
如何实现年终数据报表？
表头<th> 表格标题 <caption> 页眉<thead>
数据主体 <tbody>
页脚<tfoot>
表格数据的分组标签<thead>、<tbody>、 <tfoot>配合使用，对报表数据进行逻辑分组
表格高级标签2-2
第三章
表格应用和布局
基本语法
<table> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> ...... </tr> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> ...... </tr> </table>
网页设计与制作3.ppt
<I></I> <U></U> <TT></TT> <CITE></CITE> <EM></EM>
文本以黑体字的形式输出
文本以斜体字的形式输出 文本以下加一划线的形式 输出 输出打字机风格字体文本 输出引用方式的字体，通 常是斜体 输出需要强调的文本(通 常是斜体加黑体) 输出加重文本(通常也是 斜体加黑体)
网页设计艺术
1)、关于META标签中的HTTP-EQUIV <META http-equiv="Content-Type" content="text/HTML; charset=gb2312"> 其作用是指定了当前文档所使用的字 符编码为gb2312，也就是中文简体字符。 根据这一行代码，浏览器就可以识别出这 个网页应该用中文简体字符显示。类似地， 如果 将 “gb2312”替换为“big5”，就是我 们熟知的中文繁体字符了。 HTTP-EQUIV用于向浏览器提供一些说 明信息，从而可以根据这些说明做出相应。
№ 24
网页设计艺术 3.2 利用Dreamweaver MX处理网页文本
3.2.1 3.2.2 3.2.3 3.2.4 3.2.5
输入文本 查找/替换文本的内容 设置文本格式 添加和删除中文字体 设置页面的属性
№ 25
网页设计艺术
3.2.1 输入文本
1．换行
（1）自动换行：在输入文字时，若某一行的长度超过 了Dreamweaver MX窗口的显示范围，文字将自动换到下
№5
网页设计艺术
3.<TITLE></TITLE> 在<TITLE></TITLE>标记对之间加入 要显示的文本即是网页的“主题”。注 意：<TITLE></TITLE>标记对只能放在 <HEAD></HEAD>标记对之间。
文本以黑体字的形式输出
文本以斜体字的形式输出 文本以下加一划线的形式 输出 输出打字机风格字体文本 输出引用方式的字体，通 常是斜体 输出需要强调的文本(通 常是斜体加黑体) 输出加重文本(通常也是 斜体加黑体)
网页设计艺术
1)、关于META标签中的HTTP-EQUIV <META http-equiv="Content-Type" content="text/HTML; charset=gb2312"> 其作用是指定了当前文档所使用的字 符编码为gb2312，也就是中文简体字符。 根据这一行代码，浏览器就可以识别出这 个网页应该用中文简体字符显示。类似地， 如果 将 “gb2312”替换为“big5”，就是我 们熟知的中文繁体字符了。 HTTP-EQUIV用于向浏览器提供一些说 明信息，从而可以根据这些说明做出相应。
№ 24
网页设计艺术 3.2 利用Dreamweaver MX处理网页文本
3.2.1 3.2.2 3.2.3 3.2.4 3.2.5
输入文本 查找/替换文本的内容 设置文本格式 添加和删除中文字体 设置页面的属性
№ 25
网页设计艺术
3.2.1 输入文本
1．换行
（1）自动换行：在输入文字时，若某一行的长度超过 了Dreamweaver MX窗口的显示范围，文字将自动换到下
№5
网页设计艺术
3.<TITLE></TITLE> 在<TITLE></TITLE>标记对之间加入 要显示的文本即是网页的“主题”。注 意：<TITLE></TITLE>标记对只能放在 <HEAD></HEAD>标记对之间。
相关主题