网页制作二PPT课件
合集下载
第3章静态页面制作ppt课件
表格宽度：表格的宽度可以选 择是占页面宽度的百分比〔单 位为百分比〕或者固定尺寸〔 单位为像素〕。
边框粗细：表格的边境宽度，单位为像素，表格的属性设 置中将详细讲解边框、填充值和间距值的区别。
单元格边距：单元格边框和单元格内容的间隔间隔。 单元格间距：单元格和单元格之间的间隔间隔。 页眉：把表格的第一行或第一列作为标题行或标题列。 作为标题行或标题列的行或列的内容将以粗体的方式显
静态页面设计
一、网页规划----表格 二、超链接 三、添加文本 四、插入图像 五、用框架规划页面
标题栏 插入栏 工具栏 文档窗口
标签选择器
菜单栏 面板组
“文件” 面板
属性检查器
一、网页规划
1、规划的本质
规划: 就是在页面上划分出不同的区域，按照设计的原那 么和方法，把不同的内容放置到不同的位置上，并经过颜 色调和出不同的网站基调，使网页内容构成一个有机的整 体，充分表达网站主题的过程。
规划的方法 :表格、层、框架 利用表格规划： 在插入面板中选择“常用〞标签，点击按
钮，弹出 “插入表格〞对话框，设置相应的参数来插入表 格。也可以经过选择“【插入】→【表格】〞菜单命令翻 开“插入表格〞对话框。
“插入表格〞对话框
行数：新插入的表格的行数， 可以更改数值来确定行数。
列数：新插入的表格的列数， 可以更改数值来确定列数，行 、列数控制表格划分的区域个 数〔行×列〕。
选择“存储时自动更新〞复选框，那么在日期格式插 入到文档中后可以对其进展编辑，假设没有选这项， 插入后变成纯文本，不好修正。假设希望在每次保管 文档时都更新插入的日期，那么选择“储存时自动更 新〞。
假设要更改日期，可以先用鼠标选中该对象，然后单 击“属性〞面板中的“编辑日期格式〞按钮，
边框粗细：表格的边境宽度，单位为像素，表格的属性设 置中将详细讲解边框、填充值和间距值的区别。
单元格边距：单元格边框和单元格内容的间隔间隔。 单元格间距：单元格和单元格之间的间隔间隔。 页眉：把表格的第一行或第一列作为标题行或标题列。 作为标题行或标题列的行或列的内容将以粗体的方式显
静态页面设计
一、网页规划----表格 二、超链接 三、添加文本 四、插入图像 五、用框架规划页面
标题栏 插入栏 工具栏 文档窗口
标签选择器
菜单栏 面板组
“文件” 面板
属性检查器
一、网页规划
1、规划的本质
规划: 就是在页面上划分出不同的区域，按照设计的原那 么和方法，把不同的内容放置到不同的位置上，并经过颜 色调和出不同的网站基调，使网页内容构成一个有机的整 体，充分表达网站主题的过程。
规划的方法 :表格、层、框架 利用表格规划： 在插入面板中选择“常用〞标签，点击按
钮，弹出 “插入表格〞对话框，设置相应的参数来插入表 格。也可以经过选择“【插入】→【表格】〞菜单命令翻 开“插入表格〞对话框。
“插入表格〞对话框
行数：新插入的表格的行数， 可以更改数值来确定行数。
列数：新插入的表格的列数， 可以更改数值来确定列数，行 、列数控制表格划分的区域个 数〔行×列〕。
选择“存储时自动更新〞复选框，那么在日期格式插 入到文档中后可以对其进展编辑，假设没有选这项， 插入后变成纯文本，不好修正。假设希望在每次保管 文档时都更新插入的日期，那么选择“储存时自动更 新〞。
假设要更改日期，可以先用鼠标选中该对象，然后单 击“属性〞面板中的“编辑日期格式〞按钮，
网络信息编辑实务第一章网络编辑工作ppt课件
4
第一章 网络编辑工作
1
任务提出
2
任务分析
3
任务分解
4
任务实施
5
任务总结
5
【任务提出】
❖ 小王即将从大学毕业，欲应聘某网站网络编辑的职位。要应聘这个 职位，首先应该对该职业及相关知识有所了解，于是小王开始做起 了相关的信息准备工作。假如你是小王，你打算怎么做？
6
【任务分析】
❖ 本次任务涉及到如下内容：
著作权人有权在Internet上自行传播在法定许可范围 内的作品，有权许可他人传播作品，禁止他人未经许 可而传播其作品。
受著作权保护的作品，包括著作权法第三条规定 的各类作品的数字化形式”， “在网络环境下 无法归于著作权法第三条列举的作品范围，但在 文学、艺术和科学领域内具有独创性并能以某种 有形形式复制的其他智力创作成果，人民法院应 当予以保护。
著作权法相关知识
著作权，又称版权，是指著作权人对于具体著作（作品）依法享有 的权利。著作（作品）是指文学、艺术和科学领域内，具有独创性 并能以某种有形形式复制的智力创作成果。
与网络版权相关的法律法规有《著作权法》、《著作权法 实施条例》、《信息网络传播权保护条例》及最高人民法 院《关于审理计算机网络著作权纠纷案件适用法律若干问 题的解释》等。
1
网络编辑工作的主要特点及工作职能是什么？
2
网络编辑日常的主要工作内容有哪些？
3
网络编辑人员需要哪些技能和素质？
4Hale Waihona Puke 网络编辑部的构成情况如何？
5
如何获取上述信息？
7
【任务分解】
第一章任务
任务1：收集有关网 络编辑工作内容信息
任务2：分析网络编 辑需要具备的素质
第一章 网络编辑工作
1
任务提出
2
任务分析
3
任务分解
4
任务实施
5
任务总结
5
【任务提出】
❖ 小王即将从大学毕业，欲应聘某网站网络编辑的职位。要应聘这个 职位，首先应该对该职业及相关知识有所了解，于是小王开始做起 了相关的信息准备工作。假如你是小王，你打算怎么做？
6
【任务分析】
❖ 本次任务涉及到如下内容：
著作权人有权在Internet上自行传播在法定许可范围 内的作品，有权许可他人传播作品，禁止他人未经许 可而传播其作品。
受著作权保护的作品，包括著作权法第三条规定 的各类作品的数字化形式”， “在网络环境下 无法归于著作权法第三条列举的作品范围，但在 文学、艺术和科学领域内具有独创性并能以某种 有形形式复制的其他智力创作成果，人民法院应 当予以保护。
著作权法相关知识
著作权，又称版权，是指著作权人对于具体著作（作品）依法享有 的权利。著作（作品）是指文学、艺术和科学领域内，具有独创性 并能以某种有形形式复制的智力创作成果。
与网络版权相关的法律法规有《著作权法》、《著作权法 实施条例》、《信息网络传播权保护条例》及最高人民法 院《关于审理计算机网络著作权纠纷案件适用法律若干问 题的解释》等。
1
网络编辑工作的主要特点及工作职能是什么？
2
网络编辑日常的主要工作内容有哪些？
3
网络编辑人员需要哪些技能和素质？
4Hale Waihona Puke 网络编辑部的构成情况如何？
5
如何获取上述信息？
7
【任务分解】
第一章任务
任务1：收集有关网 络编辑工作内容信息
任务2：分析网络编 辑需要具备的素质
网页设计与制作说课稿（盒子模型） -完整课件PPT
教学重难点
教学重点
掌握DIV+CSS布局应用与技巧，熟练CSS语法规则。
教学难点
深入理解布局的精髓——盒子模型以及如何灵活、简练的应用。
提纲
教法与学法
◇课前分析
◇教学目标及重难点
1
◇教法与学法 ◇教学时间安排 ◇教学设计
小组讨论法
宏观： 项目教学法
◇教学反思
直观演示法
微观
任务驱动法
活动探究法
提纲 ◇课前分析 ◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教材分析
上海交通大学出版社 《网页制作三合一案例教程》
第9章“CSS标准流布局”。 对页面进行整体布局——盒子 模型
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
学情分析
对文本、图形、动画等多媒体信息的处理技术 有了一定的使用经验，但基础差异大 计算机实际操作能力较弱 对理论讲解不感兴趣。 对网页内容、结构、效果等设计的优劣有一定 的感性认识，但自主创作设计能力不足
提纲 ◇课前分析 ◇教学目标及重难点
教学目标 重点难点
◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
展
示 与
自信感、成就感、责任心
评
价
以工作任务为主线，以学生为主体，以教师为主导，融“教、 学、做、评”为一体。
提纲
布置作业
◇课前分析
◇教学目标及重难点
◇教法与学法
电子商务网页设计与制作完整版ppt课件全套教学教程(最新)
任务实施
01 电商企业网站的需求分析 02 电商企业网站的布局结构分析
03 电商企业网站的色彩应用
知识分析 1.网站规划的市场调研
网站的规划是指在网站建设前确定好网站的主题和功能目标后，对网站目标 定位，进行的内容规划和功能规划。其中直接的表现就是网站结构的规划，特别 对于网站前端部分而言，更为关注的是网站的栏目设计。
度，通过划分具有规律的分割，来提高网页开发效率。如下图所示： 将960像素的页面平均分成12分，间隔10像素。
960像素12栅格分割示意图
知识分析 3. 基于栅格化设计原理的网页布局
（1）960栅格化系统 960栅格化系统系统（或者说适应型css构架）早期主要用来进行快速原型制
作，减少重复单调的工作，但是目前，它在网页设计开发项目中开始扮演非常重 要的角色。它为我们的设计提供一个坚实的坐标基础。
拓展练习 2.网页设计常用尺寸
网页设计因其载体的限制，要充分考虑到设备的尺寸，在设计页面的过程中， 设计师往往会根据屏幕大小来设计页面每个部分的宽窄，通常一个静态屏幕所展 示页面的宽高可以称之为一屏，一个完整的页面是由多屏组成的。
一屏的宽度由显示器宽度决定，再根据不同的浏览器进行微调。在显示器的 尺寸上减去20像素到30像素不会出现水平滚动条。但在实际操作中，我们通常只 会对网页中的主体部分进行设计，将主体放在屏幕中间，两边留白，或者插入大 的背景图。因此网页的宽度很大程度上会和版心尺寸保持一致。通常是920像素到 1400像素之间。而一屏的高度通常会在600像素到800像素之间，如果超过800像素， 那么该部分内容就不能在一个静态屏幕上完整显示，会进一步影响用户的体验。
知识分析
2. 竞品分析 竞品分析通常包括背景分析和定位分析两方面： 背景分析主要包括公司的资源、团队的背景，人员构成、组织架构、公司愿景、 成本构成。通过背景分析，可以深入了解公司的现状，公司的风格。
HTML教学 ppt课件
网页设计与制作教程
第2章 超文本标记语言HTML
ppt课件
1
2.1 HTML文件的基本结构 2.2 文字和段落标记 2.3 列表标记 2.4 图片标记 2.5 表格标记 2.6 超链接标记 2.7 表单标记 2.8 框架标记
ppБайду номын сангаас课件
目 录
2
2.1 HTML文件的基本结构
2.1.1 HTML概述 2.1.2 HTML语法 2.1.3 HTML文件的基本结构
<META http-equiv=”Page-Exit” content=”revealTrans (duration=5,transition=2) ”>的意思是离开本网页时，页 面将按圆形收缩的形式切换成其他网页，并且整个切换 时间为5秒。
ppt课件
14
2. HTML文件主体
HTML文件主体标记的格式为： <BODY backgrongd=”文件名” bgcolor=”颜色值” text=” 颜色值” link=”颜色值” vlink=”颜色值” alink=”颜色值”> 网页的内容</BODY>
ppt课件
9
name属性主要用于描述网页，其常用的选项有 GENERATOR、Keywords、description、robots、 author等。 GENERATOR用来说明制作本网页所用的编辑工具， Keywords用来告诉搜索引擎本网页的关键字是什么， description用来告诉搜索引擎本网页的主要内容， robots用来告诉搜索机器人那些页面需要索引，哪些页 面不需要索引，
ppt课件
27
表2-2 设置各种字型的标记
<B>受影响的文字</B> <I>受影响的文字</I> <U>受影响的文字</U> <TT>受影响的文字</TT> <BIG>受影响的文字</BIG> <SMALL>受影响的文字</SMALL> <BLINK>受影响的文字</BLINK> <SUB>受影响的文字</SUB> <SUP>受影响的文字</SUP> <STRIKE>受影响的文字</STRIKE>
第2章 超文本标记语言HTML
ppt课件
1
2.1 HTML文件的基本结构 2.2 文字和段落标记 2.3 列表标记 2.4 图片标记 2.5 表格标记 2.6 超链接标记 2.7 表单标记 2.8 框架标记
ppБайду номын сангаас课件
目 录
2
2.1 HTML文件的基本结构
2.1.1 HTML概述 2.1.2 HTML语法 2.1.3 HTML文件的基本结构
<META http-equiv=”Page-Exit” content=”revealTrans (duration=5,transition=2) ”>的意思是离开本网页时，页 面将按圆形收缩的形式切换成其他网页，并且整个切换 时间为5秒。
ppt课件
14
2. HTML文件主体
HTML文件主体标记的格式为： <BODY backgrongd=”文件名” bgcolor=”颜色值” text=” 颜色值” link=”颜色值” vlink=”颜色值” alink=”颜色值”> 网页的内容</BODY>
ppt课件
9
name属性主要用于描述网页，其常用的选项有 GENERATOR、Keywords、description、robots、 author等。 GENERATOR用来说明制作本网页所用的编辑工具， Keywords用来告诉搜索引擎本网页的关键字是什么， description用来告诉搜索引擎本网页的主要内容， robots用来告诉搜索机器人那些页面需要索引，哪些页 面不需要索引，
ppt课件
27
表2-2 设置各种字型的标记
<B>受影响的文字</B> <I>受影响的文字</I> <U>受影响的文字</U> <TT>受影响的文字</TT> <BIG>受影响的文字</BIG> <SMALL>受影响的文字</SMALL> <BLINK>受影响的文字</BLINK> <SUB>受影响的文字</SUB> <SUP>受影响的文字</SUP> <STRIKE>受影响的文字</STRIKE>
第五章(网页设计)PPT课件
• 模板可以自动保存在站点根目录下的
Templates文件夹内。
9
6.1.2 编辑模板
模板内分为可编辑区及不可编辑区，缺省是不可编 辑区。不可编辑区是指引入模板的文档而言；在模板环 境下（.dwt）均可编辑。
• 可编辑区
<!-- TemplateBeginEditable name="aaa" --> 可编辑区的内容
• 库项目“属性”面板：脱离库
【例6-2】在网页中插入一个图片，使其成为库项目。在库编辑环境中修
改库项目后，更新网页。将网页文档窗口的库项目“引用”脱离库项目，
再修改库项目，观察文档窗口相应内容有无变化。
15
第7章 动态网页特效
7.1 JavaScript应用
7.1.1 JavaScript简介 7.1.2 编写JavaScript程序 7.1.3 动态网页特效工具
• 视频格式：AVI、 MPG 、RA 、WMV等 • 视频编辑软件Adobe Premiere，编辑AVI格式文件
3
5.4.2 插入视频
【例5-9】分别使用ActiveX按钮及插件按钮插入视频。 新建文件，必须先存盘，否则无法设置视频文件的
相对位置。 网页应与视频文件放在一个文件夹中。 设置属性autostart为false 或start
卡|“可编辑区”按钮
• 删除可编辑区域 • 指向可编辑区执行 右键菜单 “模
板”|“删除模板标记”
• 存盘 • 可以存成 *.htm 或 *.dwt。
11
6.1.3 使用模板
1．使用模板和脱离模板
• 使用：从“资源”面板中的“模板”类别
中选中要插入的模板，直接拖动到网页中
• 脱离：如果要修改应用了模板的文档中的
Templates文件夹内。
9
6.1.2 编辑模板
模板内分为可编辑区及不可编辑区，缺省是不可编 辑区。不可编辑区是指引入模板的文档而言；在模板环 境下（.dwt）均可编辑。
• 可编辑区
<!-- TemplateBeginEditable name="aaa" --> 可编辑区的内容
• 库项目“属性”面板：脱离库
【例6-2】在网页中插入一个图片，使其成为库项目。在库编辑环境中修
改库项目后，更新网页。将网页文档窗口的库项目“引用”脱离库项目，
再修改库项目，观察文档窗口相应内容有无变化。
15
第7章 动态网页特效
7.1 JavaScript应用
7.1.1 JavaScript简介 7.1.2 编写JavaScript程序 7.1.3 动态网页特效工具
• 视频格式：AVI、 MPG 、RA 、WMV等 • 视频编辑软件Adobe Premiere，编辑AVI格式文件
3
5.4.2 插入视频
【例5-9】分别使用ActiveX按钮及插件按钮插入视频。 新建文件，必须先存盘，否则无法设置视频文件的
相对位置。 网页应与视频文件放在一个文件夹中。 设置属性autostart为false 或start
卡|“可编辑区”按钮
• 删除可编辑区域 • 指向可编辑区执行 右键菜单 “模
板”|“删除模板标记”
• 存盘 • 可以存成 *.htm 或 *.dwt。
11
6.1.3 使用模板
1．使用模板和脱离模板
• 使用：从“资源”面板中的“模板”类别
中选中要插入的模板，直接拖动到网页中
• 脱离：如果要修改应用了模板的文档中的
网页设计与制作Dreamweaver CS6标准教-ppt课件-07
案例练习目标：练习设置CSS文字导航条。 案例操作要点： 1. 创建样式表文件dogclub并将所有CSS样 式存放其中。 2. 在导航条单元格中插入表格：行数列数均 为1，宽度为100%，ID标识为navi。输入导 航条文字“俱乐部介绍 会员注册 服务内容 图片展示 联系我们（中间留空格）”。
根据CSS样式所控制的网页元素不同，可以将 样式分为四种形式。 当所控制的网页元素是HTML语言中的某一个 特定的标签时，为此标签设置的CSS样式，称 为标签样式。 当把网页中或网站中若干元素归为一类，作为 一个整体来看待，为此类元素设置一个CSS样 式，称为类样式。
一个标签或元素在网站中的不同网页中，或在 一个网页中的不同位置上，外观效果不同，则 需要先为该特定标签赋予一个唯一的ID号，然 后，再为具有该ID号的标签设置样式，称此样 式为ID样式。 当设置若干个内容相同而名称不同样式时，或 者设置超级链接样式时，则可以使用复合样式。
7.5.1练习案例-航空旅游 7.5.2练习案例-狗狗俱乐部 7.5.3练习案例-鲜花店
案例练习目标：练习使用各种CSS样式。 案例操作要点： 1．打开文档index1.html，在导航条单元格 中插入表格：行数列数均为1，宽度为100%， ID标识为navi，并输入导航条文字“网站首 页 旅游计划 服务中心 联系我们（中间留空 格）”。 2．设置导航条复合样式#navi a:link， #navi a:visited属性，字体大小: 12px，颜 色为#666；设置#navi a:hover属性，颜色 为#999。
1. 2. 3. 4.
ቤተ መጻሕፍቲ ባይዱ
下载网页版的ppt课件
04
网页版PPT课件的案例与实战演练
案例一：如何制作一个精美的PPT课件
总结词
精美、大气、有品质
详细描述
在制作PPT课件时，要注重版面布局、配色 方案和字体选择，使课件具有吸引力。同时 ，可以添加适量的图片、图表和动画效果， 使课件更加生动有趣。在内容方面，要注重 内容的逻辑性和连贯性，使观众更容易理解 和接受。
总结词
在线美化工具可以快速为PPT添加各种风 格的装饰和设计元素，而无需太多手动 操作。
VS
详细描述
在线美化工具通常提供各种预设的装饰和 设计元素，如主题、背景、图标、形状等 ，用户可以选择适合自己的能，使用户可以快 速查看和分享美化后的PPT。
格式不兼容问题
总结词
$item1_c格式不兼容问题通常是由于课件格式与浏览器 或操作系统不兼容引起的。
详细描述
格式不兼容问题通常是由于课件格式与浏览器或操作系 统不兼容引起的。
内容丢失或乱码问题
要点一
总结词
内容丢失或乱码问题通常是由于课件在传输过程中出现错 误或课件本身存在编码问题引起的。
要点二
案例二
总结词
高效、便捷、准确
详细描述
将PDF文件转换为PPT课件需要使用专门的 转换工具，如Adobe Acrobat、
PDFelement等。这些工具可以将PDF文件 中的文字、图片和排版等元素提取出来，并 按照PPT的格式进行重新排版。在转换过程 中，需要注意保持原文件的准确性和美观度 ，同时也可以对PPT课件进行适当的排版和
在浏览器中打开PPT课件的网页，按下键盘上的Ctrl+J组合键，打开浏览器的开发者工具，找到需要下载的PPT 课件的链接，右键点击链接，选择“在新标签页中打开链接”，即可下载PPT课件。
flash教程 ppt课件
2000年代初
Flash成为主流的网 页动画和交互设计工 具。
2008年
Adobe收购 Macromedia， Flash成为Adobe的 产品。
2017年
Adobe宣布停止更 新和分发Flash Player，鼓励使用其 他技术。
Flash的应用领域
Flash成为许多动画制作公司的首 选工具，用于制作短片、广告和 电影。
影片剪辑交互
总结词
影片剪辑是Flash中的基本动画元素，通过ActionScript控制影片剪辑可以实现复杂的 交互效果。
详细描述
影片剪辑是Flash中用于创建动画的元素之一。通过ActionScript，可以控制影片剪辑 的行为和属性，如移动、旋转、缩放等。掌握影片剪辑交互的技巧，可以创建出更加丰
详细描述
运动渐变动画是Flash中最基本的动画形式之一，它通过在时 间轴上的关键帧上设置对象的属性，如位置、大小、旋转等 ，然后在关键帧之间创建平滑的过渡效果，从而实现物体运 动的动画效果。
运动渐变动画
01
操作步骤
02
03
04
1. 在时间轴上创建关键帧， 并在每个关键帧上设置物体的
不同位置或状态。
Flash的交互功能使其成为在线课 程和互动课件的理想选择。
网页设计 动画制作 游戏开发 教育培训
Flash在网页设计中广泛使用，用 于创建动态效果和交互式内容。
Flash一度是网页游戏开发的主要 工具，许多经典游戏都是使用 Flash开发的。
Flash的特点与优势
跨平台
Flash可以在Windows、Mac OS和Linux等多个操作系统上运 行。
游戏制作基础
总结词：创意应用
输标02入题
下载网页中的PPT课件
01
02
03
字体选择
选择易于阅读、简洁的字 体，如微软雅黑、宋体等 。
字体大小
根据需要调整字体大小， 确保文字清晰易读。
字体颜色
选择与背景色对比度高的 颜色，避免使用深色背景 和浅色字体。
制作动画效果
动画目的
明确动画的目的和作用， 如突出重点、吸引注意力 等。
动画类型
选择适当的动画类型，如 淡入淡出、飞入飞出等， 避免使用过于复杂或花哨 的动画。
下载方法
根据课件的具体格式和要求，选择合适的下载方式进行下载。
03
网页ppt课件制作技巧
制作高质量的图片
图片清晰
使用高分辨率的图片，避免使用 模糊的图片。
图片大小
根据需要调整图片大小，避免图片 过大或过小。
图片格式
选择合适的图片格式，如JPEG、 PNG等，以保持图片质量和大小。
使用高质量的字体
方式。
在版权使用许可下，被授权人可 以在特定条件下使用版权作品， 并享有相应的权利，如复制、发
行、表演或展示等。
版权使用许可是有偿的，被授权 人需要支付一定的费用作为使用
许可的条件。
THANKS FOR WATCHING
感谢您的观看
特点
支持多媒体、动画效果，可进行丰富的演示，但 文件较大，可能影响加载速度。
3
下载方法
在网页中，找到PPT课件的下载链接，选择合适 的下载方式进行下载。
pdf格式
PDF文件
PDF是Portable Document Format的缩写，是一种跨平台 的文档格式，可以保持原文档的 排版和内容，广泛应用于电子书
下载网页中的ppt课件
contents
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<font size="数字" face="字体名" color="色彩"> 被设置的文
字 </font>
size=1～7，size取1时最小，取7时最大。自动加粗。
文字字型：加粗（<b>…</b>）、斜体（<i>…</i>）、带下划
线（<u>…</u>）、带删除线（<strike>…</strike>）、下标
<a href="URL" target="打开窗口方式"> 热点 </a>
href属性为超文本引用，它的值为一个URL，是目标资源的有效地址。 如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL，即 <a href="#"> 热点 </a>。
target属性设定链接被单击后结果所要开始窗口的方式。可选值为： _blank，_parent，_self，_top。
2
② HTML文档的基本结构
➢ 标记及其属性
• 标记 HTML文档由标记和被标记的内容组成。 格式为： <标记> 受标记影响的内容 </标记> 如，标题标记<title>表示为： <title> 我的第一个网页 </title>
• 标记的属性 显示或控制信息，格式为： <标记 属性1="属性值1" 属性2="属性值2" …> 受影响的内
6
④ 段落标记
➢ 注释标记
<!-- 注释内容 -->
➢ 强制换行和不换行标记
“文字 <br>” 和 “<nobr> 文字 </nobr> ” 【例2-2】
➢ 段落标记<p>...</p>
<p align="left|center|right"> 文字 </p> <p>可看作<br><br>。
【例2-3】
2 —HTML
HTML HTML文档的基本结构 网页文件的创建过程
超链接
图片
列表
表格
字幕、音频和视频
框架（多窗口页面）
表单
1
① HTML简介
• Hypertext Markup Language，超文本标记语言 • 用于构成Web页面（Page）、表示Web页面的符号标记语 言 • 通过专用的浏览器来识别 • 2000年，W3C组织公布发行了XHTML 1.0版本，适应未来 网络应用更多的需求
【例2-1】
4
③ 网页文件的创建过程
➢ 编辑和保存网页 • “记事本” 打开记事本 创建新文件 保存网页 (*.html或*.htm,首页的文件名为index.html或index.htm)
5
③ 网页文件的创建过程
➢ 预览网页 • 用浏览器打开 • 在“Windows资源管理器”或“我的电脑”中打开
1 href="下载文件名"> 热点文本 </a> 【例2-13】
➢ 指向电子邮件的链接
格式为： <a href="mailto:E-mail地址"> 热点文本 </a>
12
⑦ 图片
➢ 网页的背景
颜色名称
• 设置背景色
或十六进 制值
格式为：<body bgcolor="色彩值">
容 </标记> 例如，字体标记<font>有属性size和color等。
<font size="3" color="red"> 属性示例 </font>
3
② HTML文档的基本结构
➢ HTML的基本结构 <html> <head> <title> 网页的标题 </title> </head> <body> 网页的内容 </body> </html>
【例2-5】
7
⑤ 文字标记
➢ 标题文字标记<h#>…</h#>
<h# align="left|center|right"> 标题文字 </h#>
#=1～6，取1时文字最大，6时文字最小。不自动加粗。
缺省显示宋体，在一个标题行中无法使用不同大小的字体。
【例2-6】
➢ 字体标记<font>...</font>
（<sub>…</sub>）、上标（<sup>…</sup>）
ch2-7.html 【例2-9】
【例2-10】
8
⑥ 超链接
网页互相联系的桥梁；“热 点”
➢ 锚点（anchor）标记<a>...</a>
• 热点—单击一个“词”、“句”或“图片”，可从此处转到 具有唯
一URL地址的目标资源。
• <a>标记的格式为：
• 链接到同级目录中的网页文件
<a href="../子目录名/目标文件名.html"> 热点文本 </a>
10
⑥ 超链接
➢ 指向本页中的链接
• 定义两个标记：超链接标记和书签标记。 • 超链接标记的格式为： <a href="#记号名"> 热点文本 </a> • 书签：用<a>标记对该文本作个记号，
➢定位标记<div>…</div>
<div align="left|center|right"> 文本、图像或表格 </div>
【例2-4】
➢ 水平线标记<hr>
<hr align="left|center|right" size="横线粗细" width="横线长
度" color="横线色彩" noshade>
9
⑥ 超链接
➢ 指向其他页面的链接
• 链接到同一目录内的网页文
<a href=“目标文件名.html”> 热点文本 </a>
• 链接到下一级目录中的网页文件
<a href="子目录名/目标文件名.html"> 热点文本 </a>
• 链接到上一级目录中的网页文件
<a href=“../目标文件名.html”> 热点文本 </a> 其中：“. . /02”表示退到上一级目录
• 用图片作背景
格式为：<body background="图片文件名">
【例2-14】
“GIF”、”JPEG”， 并指明存放路径
13
⑦ 图片
➢ 图片标记<img>——将图片插入到网页中 • 作用：将图片插入到网页中
设置图片的替代文本、尺寸、布局等属性。
• 格式: <img src="图片文件名" alt="简单说明" width="图片宽度"
<a name="记号名"> 目标文本附近的字符串 </a> 【例2-12】
• 指向其他页面某处的文本， <a href="URL#记号名"> 热点文本
</a>
• 跳转到的位置处加上链接标记：<a name="记号名"> 文字串 </a> • 指向其他文件的某一部分：
<a href="目标文件路径/文件名#记号名"> 热点文本 </a>