《网页设计与制作》网页图文编辑（1）（举一反三考点练）-讲义

举一反三考点练 《网页设计与制作》网页图文编辑-讲义 1. 理解网页文本插入与特殊符号输入 2. 掌握文本格式设置—HTML 与 CSS 双模式 3. 熟悉网页图像插入与属性精修 知识点一 网页文本插入与特殊符号输入 1.文本插入方式 （1）直接键入 ① 在“文档”窗口光标处即时输入。 ② 支持回车自动分段，段间距默认一行。 （2）复制/粘贴 ① 普通粘贴保留源格式；Ctrl+Shift+V 调出“选择性粘贴”。 ② 可仅保留纯文本，便于后续套用 CSS。 （3）外部导入 ① Word、TXT 内容先复制到剪贴板，再用“选择性粘贴”去格式。 ② 避免隐藏样式污染代码，提高后期维护性。 2.换行与空格 （1）硬回车 vs 软回车 ① Enter 产生新段落，上下间距大。 ② Shift+Enter 为软回车，同段内换行，间距小。 （2）连续空格 ① 输入法切“全角”后按空格。 ② Ctrl+Shift+Space 插入“不换行空格”实体。 ③ “编辑—首选项”勾选“允许多个连续空格”一劳永逸。 3.特殊字符 （1）菜单插入 ① “插入—字符”子集中直接选 ©、®、¥ 等。 ② “其他字符”对话框提供全库选择。 （2）面板插入 ① “插入面板>常用>字符”按钮下拉调用。 ② 可自定义收藏，常用字符一键即达。 （3）代码手写 ① < > & 等实体保证 W3C 校验通过。 ② 避免直接敲符号导致浏览器解析错误。 （多项选择题）在网页文本插入与特殊符号输入中，以下说法正确的是（ ） A. 可以直接在“文档”窗口中键入文本，也可以剪切并粘贴文本 B. 使用“选择性粘贴”选项可以去掉文本的所有格式设置 C. 按Enter键会产生一个新段落，而按Shift+Enter组合键则为软回车 D. 在Dreamweaver中不能连续输入多个空格 【答案】ABC 【解析】可以直接在“文档”窗口中键入文本，也可以剪切并粘贴文本。使用“选择性粘贴”选项可以去掉文本的所有格式设置。按Enter键会产生一个新段落，而按Shift+Enter组合键则为软回车。在Dreamweaver中可以通过设置首选参数或插入不换行空格来输入多个空格。 【要点】考查网页文本插入与特殊符号输入的方法。 1.（单项选择题）在Dreamweaver中，以下哪种方法不能用于插入文本（ ） A. 直接键入 B. 复制/粘贴 C. 选择性粘贴 D. 插入图片 【答案】D 【解析】在Dreamweaver中，插入文本的方法包括直接键入、复制/粘贴和选择性粘贴。插入图片是用于插入图像，而不是文本。 【要点】考查插入文本的方法。 2.（单项选择题）在Dreamweaver中，按Enter键和按Shift+Enter组合键的区别是（ ） A. 没有区别 B. 按Enter键会产生一个新段落，按Shift+Enter组合键则为软回车 C. 按Enter键会产生一个软回车，按Shift+Enter组合键则为硬回车 D. 按Enter键会产生一个新段落，按Shift+Enter组合键会产生一个新行 【答案】B 【解析】在Dreamweaver中，按Enter键会产生一个新段落，段间距较大；而按Shift+Enter组合键则为软回车，同段内换行，间距较小。 【要点】考查换行与空格的设置。 3.（多项选择题）在Dreamweaver中，以下哪些方法可以用于输入多个空格（ ） A. 将输入法提示框上的“半角”改为“全角”后按Space键 B. 插入不换行空格 C. 设置首选参数 D. 直接按Space键多次 【答案】ABC 【解析】在Dreamweaver中，可以通过将输入法提示框上的“半角”改为“全角”后按Space键、插入不换行空格（Ctrl+Shift+Space）或设置首选参数来输入多个空格。直接按Space键多次只能输入一个空格。 【要点】考查连续空格的输入方法。 1.（填空题）在Dreamweaver中，使用“选择性粘贴”选项可以去掉文本的______设置，便于后续套用CSS。 【答案】格式 【解析】在Dreamweaver中，使用“选择性粘贴”选项可以去掉文本的格式设置，便于后续套用CSS。 【要点】考查选择性粘贴的功能。 2.（填空题）在Dreamweaver中，按Enter键会产生一个新段落，而按Shift+Enter组合键则为______。 【答案】软回车 【解析】在Dreamweaver中，按Enter键会产生一个新段落，而按Shift+Enter组合键则为软回车。 【要点】考查换行与空格的设置。 3.（判断题）在Dreamweaver中，不能连续输入多个空格（ ） 【答案】× 【解析】在Dreamweaver中，可以通过将输入法提示框上的“半角”改为“全角”后按Space键、插入不换行空格（Ctrl+Shift+Space）或设置首选参数来输入多个空格。 【要点】考查连续空格的输入方法。 · 插入：直接输入、复制粘贴、选择性粘贴去格式。 · 换行：Enter新段间距大，Shift+Enter同段换行。 · 多空格：全角空格、Ctrl+Shift+Space、首选项允许多空格。 · 特殊符：插入菜单/面板/手写实体，避免解析错。 知识点二 文本格式设置—HTML 与 CSS 双模式 1.HTML 属性面板 （1）格式与样式 ① “段落”“标题 1-6”快速定义语义标签。 ② ID、Class 为脚本或样式提供钩子。 （2）基本修饰 ① B 按钮加 <strong><em><a> 2.CSS 属性面板 （1）目标规则 ① 下拉列表显示已写样式，可新建、编辑、删除。 ② 实时切换不同规则，即时预览效果。 （2）字体与大小 ① 内置“宋体、黑体”堆栈，支持 Adobe Edge & Web 字体。 ② 字号 12px/14px 常用，过大失真，过小难读。 （3）颜色与对齐 ① 取色器自动写入十六进制，支持 Web 安全色。 ② 左中右对齐属性直接写入规则，保持版面整洁。 3.样式管理技巧 （1）外部样式表 ① “附加样式表”按钮链接 .css，实现多页共享。 ② 修改一次，全站自动更新，维护效率高。 （2）层次覆盖 ① 行内 > 内嵌 > 外部，合理利用层叠。 ② 统一基准样式，局部用 Class 覆盖，减少冗余代码。 （3）自定义字体堆栈 ① 使用“管理字体”创建“宋体,SimSun,serif”序列。 ② 避免客户端缺失字体导致版面走样。 （多项选择题）在Dreamweaver中进行文本格式设置时，以下说法正确的是（ ） A. 在HTML属性面板中，可以通过“格式”选项设置段落样式，如“段落”“标题1”等 B. 在CSS属性面板中，可以通过“目标规则”下拉列表选择已有的CSS规则进行编辑 C. 在HTML属性面板中，使用“B”按钮可以将\<b\>或\<strong\>应用于所选文本 D. 在CSS属性面板中，可以通过“字体”选项添加Adobe Edge字体和Web字体 【答案】ABCD 【解析】在HTML属性面板中，可以通过“格式”选项设置段落样式，如“段落”“标题1”等；使用“B”按钮可以将\<b\>或\<strong\>应用于所选文本。在CSS属性面板中，可以通过“目标规则”下拉列表选择已有的CSS规则进行编辑；可以通过“字体”选项添加Adobe Edge字体和Web字体。 【要点】考查HTML和CSS属性面板的基本功能。 1.（单项选择题）在Dreamweaver中，若要为文本应用外部样式表，应通过以下哪个选项进行操作（ ） A. HTML属性面板中的“附加样式表”按钮 B. CSS属性面板中的“附加样式表”按钮 C. HTML属性面板中的“链接”选项 D. CSS属性面板中的“链接”选项 【答案】B 【解析】在CSS属性面板中，可以通过“附加样式表”按钮链接外部样式表，实现多页共享样式。 【要点】考查外部样式表的应用方法。 2.（单项选择题）在Dreamweaver中，若要对文本的字体大小进行设置，应使用（ ） A. HTML属性面板中的“大小”选项 B. CSS属性面板中的“大小”选项 C. HTML属性面板中的“字体”选项 D. CSS属性面板中的“字体”选项 【答案】B 【解析】在CSS属性面板中，可以通过“大小”选项设置文本的字体大小。 【要点】考查文本字体大小的设置方法。 3.（多项选择题）在Dreamweaver中进行文本格式设置时，以下说法正确的是（ ） A. 在HTML属性面板中，可以通过“类”下拉列表选择已有的类样式应用到文本上 B. 在CSS属性面板中，可以通过“目标规则”下拉列表新建CSS规则 C. 在HTML属性面板中，使用“I”按钮可以将\<i\>或\<em\>应用于所选文本 D. 在CSS属性面板中，可以通过“字体”选项管理字体堆栈 【答案】ABCD 【解析】在HTML属性面板中，可以通过“类”下拉列表选择已有的类样式应用到文本上；使用“I”按钮可以将\<i\>或\<em\>应用于所选文本。在CSS属性面板中，可以通过“目标规则”下拉列表新建CSS规则；可以通过“字体”选项管理字体堆栈。 【要点】考查HTML和CSS属性面板的高级功能。 1.（填空题）在Dreamweaver中，若要对文本进行格式设置，可以通过HTML属性面板或______属性面板进行操作。 【答案】CSS 【解析】在Dreamweaver中，可以通过HTML属性面板或CSS属性面板对文本进行格式设置。 【要点】考查文本格式设置的两种模式。 2.（填空题）在CSS属性面板中，可以通过“目标规则”下拉列表选择或新建______规则来对文本进行格式设置。 【答案】CSS 【解析】在CSS属性面板中，可以通过“目标规则”下拉列表选择或新建CSS规则来对文本进行格式设置。 【要点】考查CSS规则的应用。 3.（判断题）在HTML属性面板中，使用“B”按钮和“I”按钮分别可以将文本设置为粗体和斜体（ ） 【答案】√ 【解析】在HTML属性面板中，使用“B”按钮可以将文本设置为粗体，使用“I”按钮可以将文本设置为斜体。 【要点】考查HTML属性面板的基本功能。 · HTML：标题、列表、加粗、斜体、链接目标一键设。 · CSS：目标规则选/新建，字体大小颜色对齐实时改。 · 外联：附加样式表，一改全站更新；自定义字体堆栈防缺失。 知识点三 网页图像插入与属性精修 1.图像格式选择 （1）GIF ① 256 色无损压缩，适合图标、线条图。 ② 支持透明与动画，文件小加载快。 （2）JPEG ① 百万色有损压缩，照片首选。 ② 品质 60-80% 平衡视觉与体积。 （3）PNG ① 支持真彩色与 alpha 透明，Fireworks 源文件。 ② 无损，适合半透明 Logo、按钮，体积大于 GIF。 2.插入与替换 （1）三种插法 ① 菜单“插入>图像”浏览选图。 ② 插入面板按钮拖拽至目标位置。 ③ 文件面板直接拖入，自动生成路径。 （2）相对路径 ① 选“文档”相对，利于整站迁移。 ② 选“站点根目录”相对，服务器端更稳。 （3）占位符 ① 暂无图时用占位符设宽 high，保持布局。 ② 后期双击替换，无需重新排版。 3.属性面板设置 （1）基本属性 ① ID 供 JavaScript 调用；Src 显示路径，可重选。 ② 宽/高修改后弧形箭头一键恢复原始尺寸。 （2）优化与编辑 ① 裁剪、亮度、对比度、锐化按钮实时处理。 ② 重新取样减少文件大小，提升下载性能。 （3）交互与 SEO ① Link 输入 URL 即可把图变按钮；Target 定义打开窗口。 ② Alt 文本必填，提升无障碍与搜索引擎识别。 （多项选择题）关于网页图像插入与属性精修，以下说法正确的是（ ） A. GIF格式图像支持透明与动画，文件小加载快 B. JPEG格式图像适合照片，有损压缩，品质和文件大小可平衡 C. PNG格式图像支持真彩色与alpha透明，适合半透明Logo、按钮 D. 图像插入后，可以通过属性面板设置宽高、裁剪、亮度、对比度等属性 【答案】ABCD 【解析】GIF格式图像支持透明与动画，文件小加载快，适合图标、线条图等；JPEG格式图像适合照片，有损压缩，可以通过调整品质来平衡视觉效果和文件大小；PNG格式图像支持真彩色与alpha透明，适合半透明Logo、按钮等。图像插入后，可以通过属性面板设置宽高、裁剪、亮度、对比度等属性，以优化图像效果。 【要点】考查网页图像格式的特点及属性面板的设置。 1.（单项选择题）在Dreamweaver中插入图像时，以下哪种方法是不正确的（ ） A. 菜单“插入”\|“图像”浏览选图 B. 插入面板按钮拖拽至目标位置 C. 直接从Windows操作系统窗口或Dreamweaver的“文件”面板中将图像文件拖动到当前编辑的网页文档中 D. 直接在文档窗口中键入图像的路径和文件名 【答案】D 【解析】在Dreamweaver中插入图像时，可以通过菜单“插入”\|“图像”浏览选图、插入面板按钮拖拽至目标位置、直接从Windows操作系统窗口或Dreamweaver的“文件”面板中将图像文件拖动到当前编辑的网页文档中。直接在文档窗口中键入图像的路径和文件名并不是一种正确的插入图像的方法。 【要点】考查网页图像插入的方法。 2.（单项选择题）在网页设计中，以下哪种图像格式适合用于照片（ ） A. GIF B. JPEG C. PNG D. BMP 【答案】B 【解析】在网页设计中，JPEG格式图像适合用于照片，因为它可以包含数百万种颜色，并且可以通过压缩在图像品质和文件大小之间达到良好的平衡。GIF格式图像支持透明与动画，但只支持256种颜色，适合图标、线条图等。PNG格式图像支持真彩色与alpha透明，适合半透明Logo、按钮等。BMP格式图像文件体积较大，不适合网页使用。 【要点】考查不同图像格式的适用场景。 3.（多项选择题）关于网页图像的属性设置，以下说法正确的是（ ） A. 可以通过属性面板设置图像的ID、Src、宽高、替换文本等属性 B. 图像的宽高修改后，可以通过属性面板的弧形箭头一键恢复原始尺寸 C. 图像的替换文本在图像无法显示时，可以向用户描述图像的内容 D. 图像的链接属性可以将图像设置为一个超链接的源端点 【答案】ABCD 【解析】选项A正确，可以通过属性面板设置图像的ID、Src、宽高、替换文本等属性。选项B正确，图像的宽高修改后，可以通过属性面板的弧形箭头一键恢复原始尺寸。选项C正确，图像的替换文本在图像无法显示时，可以向用户描述图像的内容。选项D正确，图像的链接属性可以将图像设置为一个超链接的源端点。 【要点】考查网页图像属性设置的功能和作用。 1.（填空题）在网页设计中，GIF格式图像支持______种颜色，适合图标、线条图等。 【答案】256 【解析】GIF格式图像支持256种颜色，采用无损压缩方式，文件体积较小，适合图标、线条图等。 【要点】考查GIF格式图像的颜色支持。 2.（填空题）在Dreamweaver中，可以通过属性面板的______按钮实时处理图像的裁剪、亮度、对比度、锐化等优化操作。 【答案】编辑 【解析】在Dreamweaver中，可以通过属性面板的“编辑”按钮实时处理图像的裁剪、亮度、对比度、锐化等优化操作。 【要点】考查图像编辑工具的位置和功能。 3.（判断题）在网页设计中，PNG格式图像的文件体积通常比GIF格式图像小（ ） 【答案】× 【解析】PNG格式图像支持真彩色与alpha透明，文件体积通常比GIF格式图像大。GIF格式图像采用无损压缩方式，文件体积较小。 【要点】考查PNG和GIF格式图像的文件体积特点。 · 格式：GIF图标动画，JPEG照片压缩，PNG透明真彩。 · 插入：菜单、面板、拖拽三种方式；用相对路径；占位符保布局。 · 属性：ID/宽高/Alt必填；裁剪、亮度、锐化一键优化；加Link变按钮。 原创精品资源学科网独家享有版权，侵权必究！2 学科网（北京）股份有限公司 学科网（北京）股份有限公司 $