g《网页设计与制作》第三章：插入网页基本元素50页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) 【颜色】：用户可以通过单击【颜色选择按钮】 打开颜色拾取框来选择所需的颜色，颜色拾取框上列 出了网络安全色；单击【系统颜色选取器】按钮可以 打开调色板，选用其它丰富多彩的颜色。单击【透明】 按钮可以选择无色。
李强网页设计与制作第三章：插入网页基本元素.
文本字段 1.单行文本 1.单行文本在表单中输入“用户名”，在单击工具栏上的文本字段按钮 2.密码 2.密码密码输入区用于用户输入密码信息，用户在此区域输入的所有字符都显示为“*” 或黑点。
3.多行文本 3.多行文本在单击工具栏上的文本区域按钮 2011-9-6 46
复选框单击工具栏上的复选框按钮单选按钮 1.单选按钮 1.单选按钮单击工具栏上的单选按钮按钮 2.单选按钮组 2.单选按钮组单击工具栏上的单选按钮组按钮2011-9-6 47
下拉菜单 1.列表/ 1.列表/菜单列表单击工具栏上的列表/菜单按钮 2.跳转菜单2.跳转菜单在工具栏上单击跳转菜单按钮 2011-9-6 48
隐藏区域在工具栏上单击隐藏域按钮在网页中插入一个隐藏域标志按钮在工具栏上单击按钮按钮 2011-9-6 49。
网页设计与制作课件第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章课件
如何实现图文布局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>
网页设计与制作第三章插入网页基本元素共50页文档
22.05.2020
23
添加表格
❖新建表格 ❖修改表格属性 ❖设置单元格属性
22.05.2020
24
1.新建表格
（1）将插入工具栏切换到“常用”模式，单击表格按钮 （2）在表格对话框中设置表格的样式。 （3）单击“确定”按钮就可以把表格插到网页中。
（4）在表格的各个单元格中分别输入内容。
22.05.2020
（3）在“源”中指定背景音乐文件，可以是.wav、.mid或.mp3 格式的音频文件。
（4）在“循环”栏指定网页调入时背景音乐的播放次数，选 择“无限（-1）”循环播放。其他选项根据需要设置。
（5）单击“确定”，背景音乐就插入到网页中。关闭标签选择器
22.05.2对02话0 框。
40
插入表单
❖ 文本字段 ❖ 复选框 ❖ 单选按钮 ❖ 下拉式菜单 ❖ 隐藏区域 ❖ 按钮
（3）单击确定按钮，如果图像文件在站点文件夹中， 就会直接插入到网页中，同时在编辑窗口显示出图 像。
22.05.2020
17
设置图像的基本属性
❖ 改变图像大小 ❖ 图文混排 ❖ 垂直边距和水平边距 ❖ 图像替代 ❖ 图像边框
22.05.2020
18
图片超级链接和图像地图
1.图片超级链接
2.图像地图
符”。
22.05.2020
3
➢插入特殊符号
❖ 插入换行符 ▪ 使用[Shift]+[Enter]组合键
22.05.2020
4
➢插入特殊符号
❖ 插入空格 ▪ ctrl＋shift＋空格 ▪ 插入特殊符号，不换行空格
❖ 插入转义符
22.05.2020
5
➢设置文字属性