《网页设计与制作实例教程》课件第5章
合集下载
电子商务网页设计与制作课件项目五
任务二 使用表格和框架进行布局
table标签的使用： （1）<table>语法：建立一个最基本的表格，必须包含一组<table></table>标记、一组 <tr></tr>标记以及一组<td></td>标记，这也是最简单的单元格表格。<table></table>标记的 作用是定义一个表格<tr></tr>标记的作用是定义一行，而<td><td>标记的作用是定义一个单 元格。 （2）<table>常用属性：
任务一 添加网页基本元素
文档窗口用于显示当前创建和编辑的网页文档。Dreamweaver提供了4种查看文档的方式： 代码视图、拆分视图、设计视图和实时视图。 代码视图：用于编写和编辑HTML、JavaScript、服务器语言代码，以及任何其他类型代码的 手工编码环境。 拆分视图：用于在一个窗口中同时看到同一文档的代码视图和设计视图。 设计视图：用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中， Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到 的内容。 实时视图：与设计视图类似，实时视图更逼真地显示文档在浏览器中的表示形式。实时视图 不可编辑，不过可以在代码视图中进行编辑，然后通过刷新实时视图来查看所做的更改。
任务一 添加网页基本元素
Dreamweaver CS6中添加文本的方式：一种是直接输入，另一种是导入外部文档数据。前者 的操作相对简单，只需要在文档窗口中直接输入文字或从其他程序中复制或剪切所需文本再 粘贴到文档窗口中即可；后者则需要通过菜单命令来完成。
网页设计与制第5章图文
第5章 Fireworks入门 图5-5 与文本工具对应的“属性”面板
第5章 Fireworks入门 图5-6 矩形图形对象的“属性”面板
第5章 Fireworks入门
2．“颜色”面板 “颜色”面板及其弹出菜单如图5-7所示，其中显示的是 Fireworks当前的调色板。 3．“混色器”面板 “混色器”面板及其弹出菜单如图5-8所示，创建颜色时 可以单击下拉式列表框，也可以在红(R)、绿(G)、蓝(B)三处 各输入相应值，或者用工具箱中的滴管工具直接点取下部选 色盘的各颜色。选色盘中的颜色范围可随右上部弹出莱单的 内容而改变。弹出菜单指明所选用的颜色系统，如图5-8所示。
快捷 键 无 无 S S t y b b q q q f
第5章 Fireworks入门 图5-2 工具箱的缺省位置和配置
第5章 Fireworks入门
5.2.2 面板
Fireworks的面板是浮于界面上方的，可以把它们移到 屏幕的任何一个地方。每个面板都可以单独移动、分割和组 合。
(1) 若想隐藏面板，可选择菜单中的“窗口”→“隐藏 面板”命令或按Tab键，所有的面板就会隐藏起来。
第5章 Fireworks入门 图5-18 把文字粘贴到路径的前后状态
第5章 Fireworks入门
(6) 选择菜单命令“视图”→“隐藏选区”，或者在 “图层”面板中单击相应的缩略图前的小图标，隐藏文字及 其路径，画面仍然如前图5-14所示，只有一条铅笔所绘的路 径。
(7) 使用鼠标选中该路径，在“属性”面板中设置它的 线条和填充属性。在“填充”下拉列表中选择“线性渐变填 充”，然后用鼠标单击列表框左边的填充色按钮，在打开面 板的“预置”下拉列表中选择“银”色，如图5-19所示。这 时，图片效果如图5-20所示。
网页设计与制作教程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">`
网页设计与制作05
5.4 位图的处理
位图图形由排列成网格的称为“像素”的点组成。 5.4.1 区域的选择 1. 规则编辑区域的选择
单击工具箱中的“选取框工具”或“椭圆形选取框工 具”，在画布中按住鼠标左键并拖动，即可在位图中选 取一个矩形或椭圆形区域。
单击工具箱中的“套索工具”，在画布中按住鼠标左 键直接勾画可以在位图中画出一个不规则的闭合区域。 3.相近颜色编辑区域的选择
④选中组合的矢量对象，在“编辑”菜单选择 “粘贴于内部”，即可完成蒙版的效果，拖拽图 像中心蓝色调节柄可进行位图位置的调整。
5-5 创建动画
操作实例5-14 使用“以动画打开”方式创建动画 操作步骤：
①首先，制作好动画的每一帧图像，各自保存成一个文件， 如图5-54所示。 ②选择“文件”菜单的“打开”选项，在弹出的对话框中 选中这4幅图像文件，并选中“以动画打开”选项，如图 5-55所示，然后，单击“打开”按钮。 ③打开“帧面板”，即可看到组成动画的4帧，如图5-56 所示，此时单击图像窗口下方的“播放”按钮，可观看 动画的播放效果。 ④双击“帧面板”每帧后的数字“7”，可调整每一帧图 像播放的延时时间，以达到期望的播放效果，如图5-57
5.5.3 弹出菜单
弹出菜单是指当鼠标单击或滑过网页中的某些热点或 切片时，在浏览器中弹出的一个菜单。
操作实例5-22 为图5-75所示的网页创建弹出菜单 操作步骤：
①首先使用Web工具箱的“切片”工具为每个导航按钮勾 画一个矩形区域，如图5-76所示。下面以“实景案例” 栏目为例制作。
②单击“实景案例”切片，在“修改”菜单选择“弹出菜 单”、“添加弹出菜单”选项，或者单击切片中心的时 钟图形，在弹出菜单中选择“添加弹出菜单”，打开如 图5-77所示的“弹出菜单编辑器”，利用其中的4个选 项卡完成整个菜单的创建。
《网页设计与制作》电子教案课程课件PPT 第五章
第5章 HTML语言和动态交互
HTML语言含有大量的标记符号， 并且还在不断的增加当中。本节 将介绍HTML一些常用的标记符号， 以及它们使用时的语法规则
5.1.1 网页和HTML语言的关系
在Dreamweaver的可视化窗口中制作网页时， 形成的目标文件仍然是HTML代码，如果切换 到代码窗口中，马上就可以看到对应的HTML 代码。 1．一个空白网页的HTML代码 当新建一个网页时，网页上没有什么对象， 这就是一个空白页，现在看一下空白页的 HTML代码。如图5-1所示。
在HTML语言中规定，两个 <Body>之间是输入网页对象 的位置。那么，如果是一幅 图像，情况又会怎样呢？ 注意：在代码窗口调试 HTML代码时，如果有语法 或格式错误，代码将会用黄 色显示。
图5-5代码窗口中的文本对照
3．在网页中插入图像 在网页中输入一行文本，采用5号字，再插入一幅大小为 150×100像素的图像，在两个窗口中观察对比一下。如图5的语法规则
1．HTML语言文件的基本结构 对于一个网页，即一个HTML文档，其基本结构为： <html> <head> 文档标题部分 </head> <body> 页面主体部分 </body> </html> · 从上面的格式可以看出，文档内容以<标记符>开始，以</标记符>结束。 · <head>文档标题</head> 是文件标题标记。 · <body>文档标题部分</body> 是页面主体部分标记。 · <html> </html>是一个页面的开始和结尾。
HTML语言含有大量的标记符号， 并且还在不断的增加当中。本节 将介绍HTML一些常用的标记符号， 以及它们使用时的语法规则
5.1.1 网页和HTML语言的关系
在Dreamweaver的可视化窗口中制作网页时， 形成的目标文件仍然是HTML代码，如果切换 到代码窗口中，马上就可以看到对应的HTML 代码。 1．一个空白网页的HTML代码 当新建一个网页时，网页上没有什么对象， 这就是一个空白页，现在看一下空白页的 HTML代码。如图5-1所示。
在HTML语言中规定，两个 <Body>之间是输入网页对象 的位置。那么，如果是一幅 图像，情况又会怎样呢？ 注意：在代码窗口调试 HTML代码时，如果有语法 或格式错误，代码将会用黄 色显示。
图5-5代码窗口中的文本对照
3．在网页中插入图像 在网页中输入一行文本，采用5号字，再插入一幅大小为 150×100像素的图像，在两个窗口中观察对比一下。如图5的语法规则
1．HTML语言文件的基本结构 对于一个网页，即一个HTML文档，其基本结构为： <html> <head> 文档标题部分 </head> <body> 页面主体部分 </body> </html> · 从上面的格式可以看出，文档内容以<标记符>开始，以</标记符>结束。 · <head>文档标题</head> 是文件标题标记。 · <body>文档标题部分</body> 是页面主体部分标记。 · <html> </html>是一个页面的开始和结尾。
网页设计与制作案例教程 PPT
8．表单
表单是用来收集访问者信息或实现一些 交互作用的网页，访问者填写表单的方式是 输入文本、单击单选按钮或复选框、从下拉 菜单中选择选项等。
Page 24
2.3 制作网页的工具概述
制作网页的专业工具功能越来越完善、 操作越来越简单，处理图像、制作动画、发 布网站的专业软件应用也非常广泛。
Page 25
Page 29
2．Dreamweaver 8的启动与退出
（1）启动Dreamweaver 8 单击【开始】按钮→指向【程序】菜单 →指向【Macromedia】菜单→单击【 Macromedia Dreamweaver 8】即可启动。
Page 30
（2）退出Dreamweaver 8 ➢ 单击Dreamweaver 8窗口右上方的关闭按 钮； ➢ 按下“Alt+F4”组合键； ➢ 单击菜单【文件】－【退出】。
Page 47
4．使用索引查找所需的信息
使用Dreamweaver 8帮助系统的索引可以 快速找到所需的信息。例如查找有关“不换 行空格”的相关内容，操作方法如下：
（1）打开Dreamweaver 8帮助系统的窗口。
Page 48
（2）单击“索引”标题，切换到“索引” 选项卡。
（3）在文本框中输入“HTML”。下方的 列表框中自动显示与“HTML”相关内容的标 题，例如“不换行空格”、“设置格式和插 入”等。
（2）在Dreamweaver 8主窗口中观察其 各个菜单、工具栏、面板的组成。
（3）利用Dreamweaver 8的帮助，查找 有关“JavaScript”的内容，请分别利用“ 目录”、“索引”、“搜索”三种途径完成。
Page 52
★ 课外拓展实践 ★
《网页设计与制作课件》全册精讲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
二、网页的构成元素
网页中的 元素按功 能可分为 站标、导 航条、广 告条、标 题栏和按 钮等。
网页设计与制作整套课件完整版电子教案最全ppt整本书课件全套教学教程(最新
上一页 下一页 返回
1.1 认识网页
1.浏览者能够看到的内容
(1)主题：一般情况下，浏览器在所显示网页窗口的标题栏 上显示“主题”。网页的真正主题不一定出现在网页内部， 而是有可能作为显示此网页的浏览器窗口的标题。然而，大 多数网页的标题表现为屏慕上的文本或图像，标题的作用和 在书本或杂志中的作用一样，位于网页中比较醒目重要的顶 部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者 其他的突出显示类型来显示标题。一个网页可以有很多标题， 而且标题还可以有多达6层的嵌套深度。 (3)普通文本：是指组成网页基本内容A.多用途的文本。一 般情况下将普通文本中的线和块当作页面中的“段落”。
网页是一种网络信息传递的载体。这种媒介的性质和日 常的“报纸”、“广播”、“电视”等传统媒体是可以相提 并论的。在网络上传递的相关信息，比如文字、图片甚至多 媒体音影，都是在网页中的存储，浏览者只需要通过浏览网 页，就可以了解到相关信息了。
下一页 返回
1.1 认识网页
1.1.2网页是如何形成的
网页是由一些部件组成的，知道这些部件是做什么的很 重要，因为在网页编写或设计过程中，主要的任务就是为每 一个标准的部件选用或编写相应的内容，这些部件有的能够 在网页中直接看到，而有的却不能在网页中直接看到。
上一页 下一页 返回
1.1 认识网页
(4)签名：通常显示在网页的底部。签名标识了网页的作者，并 且常常还包含作者(或者网络竹理员)的电子邮件地址，从而 使访问者可以发送有关此网页的评论或者建议、问题等。
(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。 (6)动画：可以是网页中出现的文本或者图片，不同的是它们以
上一页 下一页 返回
1.1 认识网页
1.浏览者能够看到的内容
(1)主题：一般情况下，浏览器在所显示网页窗口的标题栏 上显示“主题”。网页的真正主题不一定出现在网页内部， 而是有可能作为显示此网页的浏览器窗口的标题。然而，大 多数网页的标题表现为屏慕上的文本或图像，标题的作用和 在书本或杂志中的作用一样，位于网页中比较醒目重要的顶 部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者 其他的突出显示类型来显示标题。一个网页可以有很多标题， 而且标题还可以有多达6层的嵌套深度。 (3)普通文本：是指组成网页基本内容A.多用途的文本。一 般情况下将普通文本中的线和块当作页面中的“段落”。
网页是一种网络信息传递的载体。这种媒介的性质和日 常的“报纸”、“广播”、“电视”等传统媒体是可以相提 并论的。在网络上传递的相关信息，比如文字、图片甚至多 媒体音影，都是在网页中的存储，浏览者只需要通过浏览网 页，就可以了解到相关信息了。
下一页 返回
1.1 认识网页
1.1.2网页是如何形成的
网页是由一些部件组成的，知道这些部件是做什么的很 重要，因为在网页编写或设计过程中，主要的任务就是为每 一个标准的部件选用或编写相应的内容，这些部件有的能够 在网页中直接看到，而有的却不能在网页中直接看到。
上一页 下一页 返回
1.1 认识网页
(4)签名：通常显示在网页的底部。签名标识了网页的作者，并 且常常还包含作者(或者网络竹理员)的电子邮件地址，从而 使访问者可以发送有关此网页的评论或者建议、问题等。
(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。 (6)动画：可以是网页中出现的文本或者图片，不同的是它们以
上一页 下一页 返回
《网页设计与制作》PPT课件
（五）知识讲解与操作示范（8）
3．页面中图像应用
传递信息的视觉要素包括版式、文字、图像、色彩等。 网页中图像在信息传达上应用具备以下功能： （1）要有良好的视觉吸引力，能吸引浏览者的注意力。 （2）要简洁明确地传达网站信息，能使人们一目了然地抓 住网站信息的重点。 （3）要有强而有力的诱导作用，造成鲜明的视觉感受效果， 从观看过程中产生愿望和欲求。 对图像的处理主要包括以下几个方面： （1）图像的外形处理 （2）图像的面积处理 （3）图像的数量处理 （4）图像的背景处理
（五）知识讲解与操作示范（7）
(2）文字粗细的确定 文字变细会显得十分优美，反之将文字变粗会显得有
力。 （3）文字字号的确定
对于网页中正文文本，其字号一般设置为10～12磅； 对于网页中版权声明等文本一般设置为9～10磅；对于网 页中标题文本，一般设置为12～18磅。 （4）文字的字间距和行间距
网页中文本的字间距和行间距在某种程度上会改变访 问者的阅读心理。
（2）站内搜索引擎 站内搜索引擎提供了一种主动查询方式，浏览者
只要把自己需要寻找的内容的关键字输入到搜索引擎 中，网站将自动地查找出站内符合条件的页面，这是当前浏览位置”就是在网站的每个页面中 加入当前位置的文字说明并逐级加入链接。
（五）知识讲解与操作示范（6）
15.2.4 网页色彩设计
1．色彩的基本知识
（1）三原色 三原色是能够按照一些数量规定合成其他任何
一种颜色的基色。所有的颜色其实都是由三原色按 照不同的比例混合而来。电脑屏幕的色彩是由红、 绿、蓝三种原色组成。
（2）色彩三要素 色彩三要素是指色相、饱和度和明度。
（五）知识讲解与操作示范（2）
2．颜色的计算机表示
4．广告尺寸 广告尺寸应为标准尺寸，全尺寸banner不超过14KB。
网页设计与制作PPT教程
果等交互效果。
学习JavaScript需要理解事件、 函数、对象等概念，以及如何 编写有效的JavaScript代码。
响应式设显示的设计方法。
通过媒体查询、弹性布局和流 式设计等技术，实现网页在不 同屏幕尺寸下的自适应布局。
学习响应式设计需要理解不同 屏幕尺寸和设备的特点，以及 如何编写响应式设计的代码。
文字排版技巧
字体选择
选择清晰易读的字体，避免使 用过于花哨的字体。
字号大小
根据内容的重要程度选择合适 的字号，突出标题和重点内容 。
行间距
适当的行间距可以提高文本的 可读性。
文字颜色
考虑背景颜色和文字颜色的对 比度，确保文字清晰可见。
图片使用规范
01
图片质量
选用高清、无损的图片，确保图片 清晰度。
03 网页布局与排版
常见网页布局
固定布局
整个网页的宽度和高度固定，适合展示内容 较多的页面。
弹性布局
使用百分比、em等相对单位设置元素大小， 使页面在不同设备上呈现良好。
流式布局
页面元素随浏览器窗口的大小自适应调整， 适合响应式设计。
网格布局
将页面划分为若干行和列，使内容在网格中 排列，便于对齐和规划。
05 网页优化与发布
网站性能优化
页面加载速度
01
优化图片、脚本和CSS文件，减少HTTP请求，使用CDN加速，
以提升页面加载速度。
代码优化
02
精简HTML、CSS和JavaScript代码，避免冗余和无效的代码，
提高网页的渲染效率。
响应式设计
03
根据不同设备和屏幕尺寸，自适应调整网页布局和元素尺寸，
网页设计不仅关注页面的外观，还关注其在不同设备和浏览器上的显示效 果，以及如何吸引和留住用户。
学习JavaScript需要理解事件、 函数、对象等概念，以及如何 编写有效的JavaScript代码。
响应式设显示的设计方法。
通过媒体查询、弹性布局和流 式设计等技术，实现网页在不 同屏幕尺寸下的自适应布局。
学习响应式设计需要理解不同 屏幕尺寸和设备的特点，以及 如何编写响应式设计的代码。
文字排版技巧
字体选择
选择清晰易读的字体，避免使 用过于花哨的字体。
字号大小
根据内容的重要程度选择合适 的字号，突出标题和重点内容 。
行间距
适当的行间距可以提高文本的 可读性。
文字颜色
考虑背景颜色和文字颜色的对 比度，确保文字清晰可见。
图片使用规范
01
图片质量
选用高清、无损的图片，确保图片 清晰度。
03 网页布局与排版
常见网页布局
固定布局
整个网页的宽度和高度固定，适合展示内容 较多的页面。
弹性布局
使用百分比、em等相对单位设置元素大小， 使页面在不同设备上呈现良好。
流式布局
页面元素随浏览器窗口的大小自适应调整， 适合响应式设计。
网格布局
将页面划分为若干行和列，使内容在网格中 排列，便于对齐和规划。
05 网页优化与发布
网站性能优化
页面加载速度
01
优化图片、脚本和CSS文件，减少HTTP请求，使用CDN加速，
以提升页面加载速度。
代码优化
02
精简HTML、CSS和JavaScript代码，避免冗余和无效的代码，
提高网页的渲染效率。
响应式设计
03
根据不同设备和屏幕尺寸，自适应调整网页布局和元素尺寸，
网页设计不仅关注页面的外观，还关注其在不同设备和浏览器上的显示效 果，以及如何吸引和留住用户。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第5章 设置超级链接
5.2 创建超级链接
教学内容
5.2.2 创建文本超链接
文本超链接的创建，有多种方法，可以在“链接”文本框中输入内容，
也可以利用工具按钮来创建链接。 实例2 安徽省各地简介 给网页中的文本“淮北”、“合肥”、“阜阳”、“宿州”创建超
链接，效果如下图所示。
单击 ②删除
打开网页
第5章 设置超级链接
5.2.1 创建图像超链接
教学内容
给网页上的图像设置超链接，使得用户通过单击图像就可以打开相应 的内容，让网页更加生动。例如常见的友情链接，可以将站点页面链接到本 地站点以外的页面，设计者需要事先给相应的图像指定一个完整的地址。
实例1 创建友情链接 在网页文档中插入3张图像，并将它们用新窗口的方式分别链接到相应 的网页，如下图所示。
A. 1像素 B. 5像素 C. 10像素 D. 20像素
第5章 设置网页超级链接
5.4 小结和习题
5.4.2 强化练习
教学内容
二、判断题
1．设置电子邮件超链接时，在“链接”框中直接输入邮箱地址即可，例如
teacher@。
()
2．使用根目录相对路径时，以“\”开头。
()
3．超链接创建后无法删除或更改。
5.3.1 自动更新超链接 5.3.2 检查链接错误
第5章 设置网页超级链接
5.4 小结和习题
教学内容
5.4.1 本章小结
网络中的所有资源都是通过超链接联系在一起的，利用好超链接，可 以让网页变得更加方便、清晰和更富有灵性。本章详细介绍了超级链接的制 作方法和技巧，具体包括以下主要内容。
1. 超链接的基本概念 超链接的定义、分类、地址、URL等。 2. 创建超链接 主要介绍了在Dreamweaver中创建图像超链接、文本超 链接、电子邮件超链接、空链接和脚本超链接、下载文件超链接以及热点超 链接的方法。 3. 管理超链接 包括自动更新和检查链接错误的方法。
A. *
B. javascript
C. javascript;
D. javascript:;
3．设置超级链接属性时，目标窗口设置为_blank时，表示的是( )。
A. 会打开一个新的浏览器窗口来打开链接文档
B. 在当前窗口的父窗口中打开链接
C. 在当前窗口打开链接文档
D. 在整个浏览器窗口中打开链接的文档
单击
回到页首
第5章 设置超级链接
5.2 创建超级链接
教学内容
5.2.5 创建空链接及脚本链接
脚本链接是可以执行JavaScript语句的链接，其通过链接触发脚本命 令，通常有添加到收藏夹，关闭窗口等脚本代码可以调用。
实例5 创建空链接 打开5-2.html，给文本“1.电子信息工程”创建空链接。空链接是一 个未指派的链接，利用该链接可激活页面上的对象。
4．下列关于在一个文档中可以创建的链接类型，说法错误的是( )。
A. 命名锚记链接，此类链接可跳转至文档中的指定位置
B. 电子邮件链接，此类链接可新建一个收件人地址已填好的空白电子邮件
C. 链接到其他文档或文件的链接
D. 空链接，此类链接不能够在对象上附加行为
5．在移动热点时，按下方向键的同时按下Ctrl键，每次移动的距离为( )。
实例8 创建热区超链接 打开网页5-3.html，在中间单元格中插入所示图片“shopping.jpg”，建 立相应的热区链接，如下图所示。
第5章 设置超级链接
5.3 管理超链接
教学内容
管理超链接是网站管理中不可或缺的一部分，通过超链接可以使 各个网页连接在一起，使网站中众多页面构成一个有机整体。通过管 理网页中的超链接，可以对网页进行相应管理，从而使得网站运行的 更加流畅。
5.2 创建超级链接
教学内容
5.2.4 创建锚记超链接
锚记链接是指链接到同一页面中不同位置的链接。例如，当一个页 面较长时，为了方便用户浏览网页，可以在页面底部设置一个锚记链接， 单击后可以快速跳转到页面顶部。
实例4 返回页首 打开光盘中的网页5-2.html文件，实现单击“返回页首”后返回到 页首的功能，效果如下图所示。
实例6 创建脚本链接 打开光盘中的5-2.html文件，给文本“关闭窗口”创建脚本链接，当单 击其时，系统将弹出如下图所示的“关闭”对话框。
第5章 设置超级链接
5.2 创建超级链接
教学内容
5.2.6 创建下载文件超链接
网站中经常提供一些下载文件的链接，单击这些链接，就可以直接 下载文件，这些超链接指向的不是网页，而是其他文件，例如rar、mp3 或者exe文件等。
第5章
2020/6/30
内容提要
网络世界里，超级链接无处不在。通过超级链接可以将因特 网上的各种相关信息有机地联系起来，能很方便地从一个网页跳 转到另一个网页，从而可以方便的查询到所需要的资源。
本章通过多个实例，从超级链接的基本概念、创建和管理三 个方面，介绍超级链接在网页中的相关应用。
第5章 设置网页超级链接
教学目录
01 认识超级链接
02
创建超级链接
03 管理超级链接
第5章 设置网页超级链接
பைடு நூலகம்
5.1 认识超级链接
教学内容
5.1.1 超级链接定义与分类
超级链接在本质上属于一个网页的一部分，它是一种允许同其他网页 或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网 站。
1. 超链接定义 2. 超链接分类
()
4．可以创建超链接的对象可以是文本、图像、图像的某一部分。 ( )
5．在浏览器中单击电子邮件链接后，会启动浏览器。
()
第5章 设置网页超级链接
5.4.2 强化练习
第5章 设置网页超级链接
5.4 小结和习题
教学内容
5.4.2 强化练习
一、选择题
1．要实现网页上有如跳转到页首之类的链接，应该使用的方法是 ( )。
A. 表单
B. 选择“插入”→“超级链接”命令
C. 标签
D. 选择“插入”→“命名锚记”命令
2．添加空链接时，应选中对象，并在“链接”文本框中输入( )。
5.1.2 URL简介
URL(Uniform Resource Locator，统一资源定位符)，简称网址。 互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位 置以及浏览器应该怎么处理它。
5.1.3 超级链接的路径
绝对路径 根目录相对路径 文档目录相对路径
第5章 设置超级链接
5.2 创建超级链接
实例7 下载VB软件的超链接 打开光盘中的5-2.html文件，给文本“VB软件下载”创建下载文件 超链接，当单击其时，系统将弹出下载文件的对话框，如下图所示。
单击
第5章 设置超级链接
5.2 创建超级链接
教学内容
5.2.7 创建热区超链接
当制作的网页是由图片构成的，可以使用热点工具来给图片的各个 部分建立不同的热区链接，使页面的导航结构更加简洁、明快。
5.2 创建超级链接
教学内容
5.2.3 创建电子邮件超链接
电子邮件超链接是一种特殊的链接，单击其时，将打开一个新的空白 邮件窗口，在“收件人”栏里将自动显示电子邮件链接中指定的地址。
实例3 创建电子邮件超链接 给网页中的文字或者图像创建电子邮件超链接，使得单击其时， 打开如下图的发送邮件的窗口。
第5章 设置超级链接