《网页设计与制作》第三章插入网页基本元素精品PPT课件
合集下载
《网页设计与制作》课件
《网页设计与制作》PPT 课件
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
网页设计与制作讲义课件第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) 【颜色】：用户可以通过单击【颜色选择按钮】 打开颜色拾取框来选择所需的颜色，颜色拾取框上列 出了网络安全色；单击【系统颜色选取器】按钮可以 打开调色板，选用其它丰富多彩的颜色。单击【透明】 按钮可以选择无色。
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
《网页设计与制作课件》全册精讲PPT教学课件
1．屏幕分辨率对网页制作的重要性
要根据网页和浏览者的特性，以合适的屏幕分 辨率为基准来设置网页尺寸，以使浏览者更加 便利地浏览网页。如游戏爱好者大部分都使用 高配置系统，所以游戏网站的网页尺寸大都在 1024像素×768像素以上，如下图所示。
项目一 网页设计与制作基础知识
13
2．常见网页尺寸
对于网页尺寸，是没有硬性规定的。目前常见的网页宽 度有1000像素、1190像素和1200像素3种，例如新浪 是1000像素、淘宝和京东是1190像素，当当是1200像 素。如果需要兼容不同浏览器尺寸，现在比较流行的做 法是做成响应式的，即根据不同分辨率显示不同的尺寸， 不过这样工作量要大很多。网页高度可根据网页内容来 定，一般不要超过3屏。
右图显示了新华网的主页，可 以看到网页中有文字、图像和 动画等。
项目一 网页设计与制作基础知识
6
在浏览三器、中网单击页右的上本角质的“工具”按钮 ，在弹出的菜单中选择“文件”>“另存为”菜单，打开
“保存网页”对话框，在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”，将网 页保存到磁盘中，便可看到网页的组成文件，如下图所示。
网页就是我们上网时在浏览器中打开的一 个个画面。网站则是一组相关网页的集合。 一个小型网站可能只包含几个网页，而一 个大型网站则可能包含成千上万个网页， 如新浪网就包括新闻、财经、科技、体育、 娱乐等多个板块，而每个板块又包括很多 网页。
另外，打开某个网站时显示的第一个网页 被称为网站的主页（或首页）。
当当网主页
项目一 网页设计与制作基础知识
4
二、网页的构成元素
网页中的 元素按功 能可分为 站标、导 航条、广 告条、标 题栏和按 钮等。
要根据网页和浏览者的特性，以合适的屏幕分 辨率为基准来设置网页尺寸，以使浏览者更加 便利地浏览网页。如游戏爱好者大部分都使用 高配置系统，所以游戏网站的网页尺寸大都在 1024像素×768像素以上，如下图所示。
项目一 网页设计与制作基础知识
13
2．常见网页尺寸
对于网页尺寸，是没有硬性规定的。目前常见的网页宽 度有1000像素、1190像素和1200像素3种，例如新浪 是1000像素、淘宝和京东是1190像素，当当是1200像 素。如果需要兼容不同浏览器尺寸，现在比较流行的做 法是做成响应式的，即根据不同分辨率显示不同的尺寸， 不过这样工作量要大很多。网页高度可根据网页内容来 定，一般不要超过3屏。
右图显示了新华网的主页，可 以看到网页中有文字、图像和 动画等。
项目一 网页设计与制作基础知识
6
在浏览三器、中网单击页右的上本角质的“工具”按钮 ，在弹出的菜单中选择“文件”>“另存为”菜单，打开
“保存网页”对话框，在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”，将网 页保存到磁盘中，便可看到网页的组成文件，如下图所示。
网页就是我们上网时在浏览器中打开的一 个个画面。网站则是一组相关网页的集合。 一个小型网站可能只包含几个网页，而一 个大型网站则可能包含成千上万个网页， 如新浪网就包括新闻、财经、科技、体育、 娱乐等多个板块，而每个板块又包括很多 网页。
另外，打开某个网站时显示的第一个网页 被称为网站的主页（或首页）。
当当网主页
项目一 网页设计与制作基础知识
4
二、网页的构成元素
网页中的 元素按功 能可分为 站标、导 航条、广 告条、标 题栏和按 钮等。
网页设计与制作 PPT03
3.2.2 插入Flash文本
Flash文本是指只包含文本的Flash影片。Flash文本使 用户利用自己选择的设计字体创建较小的矢量图形影片。
3.2.3 插入Flash按钮
如果用户想在网页中插入一个具有交互效果的按钮，可通过 “插入Flash 按钮”功能轻松实现。用户可以在文档中插入 Flash 按钮，但在插入Flash按钮前，必须先保存文档。
第3章 在网页中插入图像
本章简介：
图像和多媒体是网页中的重要 元素，在网页中的应用越来越广泛。 本章主要讲解了图像和多媒体在网 页中的应用方法和技巧，通过这些 内容的学习，可以使设计制作的网 页更加美观形象、生动丰富，更可 以增加网页的动感，使网页更具有 吸引力。
课堂学习目标
掌握在网页中插入和编辑图像的方法 掌握图像占位符的设置方法 掌握多媒体在网页中的应用方法和技巧
3.1 图像的基本操作
在网页中插入图像 设置图像属性 图像占位符 课堂案例——休闲时刻网页
3.1.1 在网页中插入图像
要在Dreamweaver CS3文档中插入的图像必须位于当前站点文 件夹内或远程站点文件夹内，否则图像不能正确显示，所以在建立 站点时，网站设计者常先创建一个名叫“image”的文件夹，并将需 要的图像拷贝到其中。
3.1.4 课堂案例——休闲时刻网页
使用属页中的应用
插入flash动画 插入Flash文本 插入Flash按钮 课堂案例——化妆品网页
3.2.1 插入flash动画
在网页中插入Flash动画的具体操作步骤如下。 （1）在文档窗口的“设计”视图中，将插入点放置在想要插入影 片的位置。 （2）通过以下几种方法启用“Flash”命令。 在“插入”面板“常用”选项卡中，单击“媒体”展开式工具按 钮 ，选择“SWF”选项 。 选择“插入> 媒体 > SWF”命令。 （3）选中文档窗口中的Flash对象，在“属性”面板中单击“播 放”按钮 ，测试效果。
《A网页设计与制作》第三章：插入网页基本元素PPT课件
（3）设置多边形热区
2021/2/22
19
图像占位符和轮换图像
1. 图象占位符
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择 图像占位符按钮
2.插入鼠标经过图像
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠 标经过图像按钮
2021/2/22
20
设置网页图片属性最终效果图
2021/2/22
21
插入表格
❖ 添加表格 ❖ 编辑表格 ❖ 格式化表格 ❖ 导入表格数据
2021/2/22
22
插入表格
➢表格的知识
表格由数个行与列组成的，行、列交叉组成表格 的单元格，可以在表格的单元格内插入各种信息， 包括文本、数字、链接，甚至是图像。
2021/2/22
23
添加表格
❖新建表格 ❖修改表格属性 ❖设置单元格属性
loop=“2”Bgcolor=“#00ff00”Width=“200”Height=“100”> …………
</marquee>
direction为滚动的目标方向，可选right、left、up、down。
scrollamount 和scrolldelay为滚动数量和延迟，可设置滚动速度
和间隔时间。
❖ 设置字体大小 ❖ 设置字体颜色 ❖ 设置字体列表
【字体】【编辑字体列表】 ✓ 单击＋ ✓ 在可用字体中选则，单击《按钮
2021/2/22
6
➢ 使用样式设置文字格式 【样式】选择 重命名、再进行修改。 ➢ 把文字变为标题 在属性面板的格式中选择 ➢ 设置文本对齐 在属性面板中设置 ➢ 列表 在属性面板中进行设置
3种格式。 ❖ 图像的获取方法 ❖ 图像文件的保存
网页设计与制作基础教程ch03简明教程PPT课件
网页设计与制作基础教程
本章知识点
使用表格 编辑表格 使用框架 设置框架属性
网页设计与制作基础教程
3.1
表格的基础知识
网页向浏览者提供的信息是多样化的，例如文字、图像、Flash动 画等。如何使这些网页元素在网页中的合理位置上显示出来，使网页 变得有条理和美观，是设计人员在着手设计网页之前必须考虑的事情 。表格的作用就在于帮助设计者高效、准确地定位各种网页数据，直 观、鲜明地表达设计者的思想。 认识表格 表格模式 插入表格
网页设计与制作基础教程
3.2.4 【扩展表格模式】
【扩展表格模式】会临时向网页文档中的所有表格添加单元格边 距和间距，并且增加表格的边框以使编辑操作更加容易。使用该模式 ，可以选择表格中的项目或者精确地放置插入点，从而避免无意中选 中该图像或表格单元格。
网页设计与制作基础教程
3.3
使用框架
在网络带宽十分有限的情况下，如何提高网页的下载速度，是 设计网页时必须考虑的问题。如果多个网页拥有相同的导航区，只是 内容有所不同，则可以考虑使用框架来设计网页布局。这样浏览者在 查看不同内容时，便无需每次都下载整个页面，而可以保持导航部分 不变，只下载网页中需要更新的内容部分即可，从而能够极大提高网 页的下载速度。这样的网页也称为框架页，其最典型的应用便是当前 十分流行的各种论坛。
网页设计与制作基础教程
第03章 规划网页布局
构建好本地站点后，可以开始规划网页布局。表格和框架是常用 的布局工具，表格在网页中不仅可以排列数据，还可以对页面中的图 像、文本、动画等元素进行准确的定位，是页面显得整齐有序、分类 明确，便于浏览。使用表格布局网页，在不同平台和不同分辨率的浏 览器中都能 保持原有的布局。使用框架规划网页，可以把网页分 成几个部分，每个部分都是一个独立的HTML页。本章主要介绍使用 表格和框架规划网页布局。
网页设计与制作课件第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：在文本“属性”面板单击按钮设置字体为加粗，接着单击按钮设置 对齐方式为居中对齐 。
网页设计与制作实用教程ppt课件
置于页面中央：将转换的表格放在页面的中央。
2．表格转换为层
– 选中需要转换成层的表格，选择“【修改】 →【转换】→【表格到层】”菜单命令，打 开如图所示的“转换表格为层”对话框。
“转换表格为层”对话框
防止层重叠。选择此项，可以在建立，移动和调整
层大小时防止层互相重叠。
显示层面板。选择此项，转换后将显示层面板。
链接目标
本章小结
网页布局是网站建设的初始工作，是按照设计的原则 和方法，安排页面元素，并通过色彩调和出不同的网 站基调，使网页内容形成一个有机的整体，充分表达 网站主题的过程。
网页布局的方法很多，大致分为表格布局（包括布局 表格），层布局，框架布局。其中表格布局是最基本 的布局方式。“布局表格”布局、层布局最终都转换 成普通表格来实现页面布局。框架布局是把浏览器窗 口划分成几个不同的区域，在同一个浏览器窗口中显 示多个框架页面的技术。
右边的灰色区域来识别。可以通过鼠标在不同区域点击来选择某个 框架，以设置某个框架的尺寸大小。
单位：设置行、列尺寸的单位。可以是像素、百分比和相对。使
用“像素”单位时，框架的尺寸大小是保持不变的，选择“百分比 ”、“相对”时，框架的尺寸大小随着浏览器窗口的改变而发生改 变。
2．框架的属性设置
框架属性
3.2.2 表格的属性设置
1.边框、填充、间距
（1）边框
一个“一行一列”的表格，至少有两个边框，表格外 边框和单元格边框。边框颜色只有当边框值设置为非 零值时才能显示。当未指定单元格边框颜色时， Dreamweaver会以表格图的3外-2边-3 框颜色作为单元格的边 框颜色。
（2）间距
表格边框和单元格边框之间的距离或单元格边框与 单元格边框之间的距离称为间距。
2．表格转换为层
– 选中需要转换成层的表格，选择“【修改】 →【转换】→【表格到层】”菜单命令，打 开如图所示的“转换表格为层”对话框。
“转换表格为层”对话框
防止层重叠。选择此项，可以在建立，移动和调整
层大小时防止层互相重叠。
显示层面板。选择此项，转换后将显示层面板。
链接目标
本章小结
网页布局是网站建设的初始工作，是按照设计的原则 和方法，安排页面元素，并通过色彩调和出不同的网 站基调，使网页内容形成一个有机的整体，充分表达 网站主题的过程。
网页布局的方法很多，大致分为表格布局（包括布局 表格），层布局，框架布局。其中表格布局是最基本 的布局方式。“布局表格”布局、层布局最终都转换 成普通表格来实现页面布局。框架布局是把浏览器窗 口划分成几个不同的区域，在同一个浏览器窗口中显 示多个框架页面的技术。
右边的灰色区域来识别。可以通过鼠标在不同区域点击来选择某个 框架，以设置某个框架的尺寸大小。
单位：设置行、列尺寸的单位。可以是像素、百分比和相对。使
用“像素”单位时，框架的尺寸大小是保持不变的，选择“百分比 ”、“相对”时，框架的尺寸大小随着浏览器窗口的改变而发生改 变。
2．框架的属性设置
框架属性
3.2.2 表格的属性设置
1.边框、填充、间距
（1）边框
一个“一行一列”的表格，至少有两个边框，表格外 边框和单元格边框。边框颜色只有当边框值设置为非 零值时才能显示。当未指定单元格边框颜色时， Dreamweaver会以表格图的3外-2边-3 框颜色作为单元格的边 框颜色。
（2）间距
表格边框和单元格边框之间的距离或单元格边框与 单元格边框之间的距离称为间距。
《网页设计与制作》第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>
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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>
direction为滚动的目标方向，可选right、left、up、down。
scrollamount 和scrolldelay为滚动数量和延迟，可设置滚动速度
和间隔时间。
第3章 插入网页基本元素
本章要点 ❖ 插入文字 ❖ 插入图像 ❖ 插入表格 ❖ 插入媒体元素 ❖ 插入表单
09.10.2020
1
➢插入文字
❖ 在Dreamweaver中为网页插入文本 有两种方法：
❖ 直接输入文本 ❖ 从其他文档中复制文本
09.10.2020
2
➢插入特殊符号
❖ 将插入工具切换到“文本”工具组； ❖ 使用菜单“插入”→“HTML” →“特殊字
09.10.2020
21
插入表格
❖ 添加表格 ❖ 编辑表格 ❖ 格式化表格 ❖ 导入表格数据
09.10.2020
22
插入表格
➢表格的知识
表格由数个行与列组成的，行、列交叉组成表格 的单元格，可以在表格的单元格内插入各种信息， 包括文本、数字、链接，甚至是图像。
09.10.2020
23
添加表格
❖新建表格 ❖修改表格属性 ❖设置单元格属性
3种格式。 ❖ 图像的获取方法 ❖ 图像文件的保存
09.10.2020
16
插入图像
❖ 插入图像的步骤如下 ：
（1）把工具栏切换到“常用”状态，然后单击“图像： 图象”按钮
（2）选择要插入的图像文件，在文件列表中单击一个 图象文件时，图象预览区会显示这个图象的缩略图。
（3）单击确定按钮，如果图像文件在站点文件夹中， 就会直接插入到网页中，同时在编辑窗口显示出图 像。
（2）插入邮件链接
链接目标是电子邮件地址时，单击工具栏上的电子邮件链接按钮
09.10.2020
12
设置文本超级链接
3、设置下载文件的超级链接 4、创建外部链接
5、链接文字颜色的设置 通过页面属性来设置的。
09.10.2020
13
➢使用锚记
❖ 设置锚记 ❖ 使用锚记
09.10.2020
14
插入水平线
水平线可用于页面上内容的分隔。
将工具按钮切换到“HTML”，单击水平线按钮
单击该水平线，可在属性面板中设置水平线的属性，如宽 度、高度、对齐方式等。
水平线的颜色可以使用属性面板中的“快速标签编辑器” 设置。值得注意的是水平线的颜色只能在预览时看出来。
09.10.2020
15
插入图像
❖ 图像的格式 用于网页的图像通常只有GIF、JPE和PNG
09.10.2020
17
设置图像的基本属性
❖ 改变图像大小 ❖ 图文混排 ❖ 垂直边距和水平边距 ❖ 图像替代 ❖ 图像边框
09.10.2020
18
图片超级链接和图像地图
1.图片超级链接
2.图像地图
如果想在一个图像的不同位置上点击，就跳转到相应的 目标网页，就需要使用图象地图。
（1）设置矩形热区
▪ 设置字体大小 ▪ 设置字体颜色 ▪ 设置字体列表
【字体】【编辑字体列表】
✓ 单击＋ ✓ 在可用字体中选则，单击《按钮
09.10.2020
6
➢使用样式设置文字格式 ❖ 【样式】选择 重命名、再进行修改。 ➢把文字变为标题 在属性面板的格式中选择 ➢设置文本对齐 在属性面板中设置 ➢列表 在属性面板中进行设置
符”。
09.10.2020
3
➢插入特殊符号
❖ 插入换行符 ▪ 使用[Shift]+[Enter]组合键
09.10.2020
4
➢插入特殊符号ห้องสมุดไป่ตู้
❖ 插入空格 ▪ ctrl＋shift＋空格 ▪ 插入特殊符号，不换行空格
❖ 插入转义符
09.10.2020
5
➢设置文字属性
❖ 进行设置时使用组合键[Ctrl]+F3或菜单“窗 口”“属性”打开属性面板。
（2）设置圆形热区
（3）设置多边形热区
09.10.2020
19
图像占位符和轮换图像
1. 图象占位符
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择 图像占位符按钮
2.插入鼠标经过图像
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠 标经过图像按钮
09.10.2020
20
设置网页图片属性最终效果图
09.10.2020
7
应用举例——设置网页文本格式
❖ 下面为“如果”网页中的文本进行格式设置， 要求文本标题样式与正文不同，正文中某些 文字需突出，以达到美化网页文本的目的。
09.10.2020
8
网页效果图
09.10.2020
9
插入滚动字幕
1.插入滚动字幕
（1）单击编辑窗口上方的“拆分”按钮，将视图切换为拆分模式。
09.10.2020
24
1.新建表格
（1）将插入工具栏切换到“常用”模式，单击表格按钮 （2）在表格对话框中设置表格的样式。 （3）单击“确定”按钮就可以把表格插到网页中。
（4）在表格的各个单元格中分别输入内容。
09.10.2020
25
2.修改表格属性
❖高 ❖背景颜色 ❖边框颜色 ❖背景图像 ❖对齐设置