第11卷 使用Div（1） 山东省对口考试-数字媒体类《网页制作》考点双析卷

编写说明：山东省春季高考统一考试-数字媒体类《网页制作》考点双析卷专辑，依据省教育厅《山东省春季高考统一考试招生专业类别考试标准》编写。“考点双析卷”即围绕一个考点，一份是老师的讲解卷一份是学生的练习卷，助力师生构建“讲练结合”的学习闭环，特别适用于山东省春季高考统一考试第一轮高考复习教学。 本专辑第11卷精准对标山东省考纲，考试内容及范围【网页制作】： （二）表格、模板及Div在页面布局与排版中的运用：（4）掌握使用模板文档统一网页风格和布局的方法。 （5）掌握 Div 基本操作、属性设置及在排版中的应用方法。 山东省春季高考统一考试  数字媒体类 《网页制作》考点双析卷 第11卷 使用Div（1） 老师讲解卷 时间：45分钟 总分：100分 一、单项选择题（本大题共20小题，每题3分，共60分） 1．关于网页布局，下列说法错误的是（    ） A．使用表格进行页面布局能很好地控制整个布局页面，一般都将表格的边框设置为“0” B．选择菜单“插入”→“HTML”→“框架”下的子菜单项可以创建一个框架 C．与表格布局网页相比，使用CSS＋DIV布局的页面，代码简洁，修改起来更方便 D．插入DIV块，可以选择“插入”菜单“布局对象”选项中的“Div块”命令 【答案】D 2．如下图所示，在Dreamweaver CS6中插入了两个DIV块，要使两个块按顺序在水平方向并排排列，下列操作正确的是 （   ） A．在CSS中将两个DIV标签“left”“right”的浮动分别设为左对齐、右对齐 B．在CSS中将两个DIV标签“left”“right”的浮动分别设为左对齐、左对齐 C．在CSS中将两个DIV标签“left”“right”的填充分别设为左对齐、左对齐 D．在CSS中将两个DIV标签“left”“right”的填充分别设为左对齐、右对齐 【答案】B 3．两列固定宽度的布局方式是网页中常用的布局结构，在插入两个DIV块后，要实现这两个块在水平方向的排列，必须用到块的________属性。（   ） A．position B．Indent C．filter D．float 【答案】D 4．下列有关CSS＋DIV布局的描述，正确的是（   ） A．CSS＋DIV将页面独立成更多的区城，在打开页面的时候，逐层加载，使得加载速度很慢 B．若使DIV块在页面中居中对齐，则要设置其float属性 C．DIV是网页中的“块”，类似于容器，不同的网页文件均可划分到不同的块中 D．CSS＋DIV布局的网页，代码简洁，结构清晰 【答案】D 5．在DreamweaverCS6中，插入一个DIV块，正确的操作是（   ） A．“插入”菜单→“媒体”→“DIV标签” B．“插入”菜单→“布局对象”→“DIV标签” C．“插入”菜单→“表单”→“DIV标签” D．“插入”菜单→“HTML”→“DIV标签” 【答案】B 6．在DreamweaverCS6中，下列关于CSS＋DIV网页布局的描述中，正确的是（   ） A．CSS＋DIV布局以块为单位，块及块中所包含元素的属性通过CSS进行控制，实现整个页面的布局 B．CSS＋DIV布局的网页通过修改CSS就能完成批量页面的变化，修改方便，但网站维护成本提高了 C．插入第1个DIV块时，图示中①处只有“在插入点”“在开始标签之前”和“在结束标签之后” D．要实现两个块的水平方向排列，只需要使用“区块”中块的“浮动”属性 【答案】A 7．在DreamweaverCS6中，插入一个DIV，创建CSS样式能实现如图所示效果的选项是（   ） A．背景 B．区块 C．边框 D．方框 【答案】D 8．在Dreamweaver CS6中，光标位于当前DIV中，如图所示，若要在当前DIV中再插入一个DIV，且位于“此处”文字前，则在“插入Div标签”对话框中选择（   ） A．在插入点 B．在开始标签之后<div id＝”d1”> C．在结束标签之前<body> D．在标签之前<div id＝”d1”> 【答案】B 9．在 Dreamweaver CS6中， 下列关于 CSS+DIV 网页布局操作的描述，不正确的是（   ） A．单击"插入"菜单--“布局对象"选项中的“DIV 标签"命令插入 DIV块 B．单击“CSS样式"面板中的“编辑样式"按钮，在对话框中可设置“选择器类型"和"选择器名称” C．在CSS规则定义时，在“方框"中可设置块宽度、高度、浮动、填充和边界 D．修改 CSS时根据区域内容标记，到CSS里找到相应的ID即可进行相关修改 【答案】B 10．在Dreamweaver CS6中，插入一个DIV标签，下列各项中不是其插入位置的是 （   ） A．在插入点 B．在开始标签之后 C．在结束标签之前 D．在插入点之前 【答案】D 11．要插入一个DIV块，可以采用的方法是在指定位置上选择“插入”菜单中 （   ） A．“布局”选项中的“Div标签”命令 B．“布局对象”选项中的“Div标签”命令 C．“常用”选项中的“插入Div标签”命令 D．“布局对象”选项中的“插入Div标签”命令 【答案】B 12．在Dreamweaver CS6中插入DIV块，并且定义该DIV样式时，应选择 （   ） A． B． C． D． 【答案】B 13．在Dreamweaver CS6中，利用CSS＋DIV进行了如图所示的两个DIV （ID分别为“left”和“right”）布局，下列说法不正确的是 （   ） A．插入“left”DIV后，在插入“right”DIV时，插入DIV方式可能选择了 B．“left” DIV和“right” DIV都经过“区块” CSS规则设置其“浮动”属性值为“left” C．“left” DIV和“right” DIV的宽度之和不大于页面的宽度 D．如需修改“left” DIV或“right” DIV的布局，可找到CSS样式中ID号为“#left”或“#right”，修改其相关的属性值来实现 【答案】B 14．在Dreamweaver CS6中，单击“插入”菜单中的“HTML”，不可以插入的是 （   ） A．水平线 B．框架 C．特殊字符 D．DIV标签 【答案】D 15．下列关于利用CSS＋DIV布局网页的说法，错误的是（   ） A．CSS＋DIV布局是以块为单位，块及块中所包含元素的属性通过CSS进行控制 B．“插入”菜单→“布局对象”→“DIV标签”可以插入DIV块 C．定义块的样式可以定义为“ID”，如“#left” D．要实现两个块的水平方向排列，必须要使用到块的“对齐”属性 【答案】D 16．DIV是网页中的“块”，块及块中所包含的元素的属性是通过 来控制的。 （   ） A．属性面板 B．修改菜单 C．CSS D．HTML 【答案】C 17．在 Dreamweaver CS6中，关于利用CSS+DIV布局网页的描述，正确的是________。 （   ） A．CSS+DIV 将网页中的元素划分到不同的块中，块与块之间可以显示与内容无关的网页 B．块与块中所包含元素的属性通过 CSS进行控制，从而实现整个页面的布局 C．在 DIV 中不可以再插入 DIV D．插入 DIV 标签时，如果同时设置了类和ID的 CSS样式，类的优先级别比ID高 【答案】B 18．下图是DIV标签，内容到DIV边界的距离是30像素，这一数据是通过 设置的。 （   ） A．Padding选项 B．Margin选项 C．Float选项 D．Width选项 【答案】A 19．在光标定位处插入一个DIV块，可以选择“插入”→“布局对象”→“DIV标签”命令，在弹出对话框的“插入”选项中选择具体的插入位置。以下选择的位置正确的是（   ） A．插入点 B．在开始标签之后 C．在结束标签之前 D．在标签之后 【答案】A 20．插入DIV块，可以选择插入－布局对象－DIV标签，在其中再连续插入两个DIV，要使里面的两个DIV左右排列，那么在设置样式时应选择（   ） A．方框 B．定位 C．边框 D．区块 【答案】A 二、判断题（本大题共6小题，每题2分，共12分） 21．使用CSS＋DIV布局网页时，当需要一个块居中对齐时，可以通过方框的margin属性设置。 ( ) 【答案】正确 22．使用CSS＋DIV的网页布局方式可以加快页面的加载速度。 ( ) 【答案】正确 23．常用的网页布局方式有表格布局、框架布局和CSS＋DIV布局，它们都可以精准定位各种内容，以实现各种不同的网页布局效果。( ) 【答案】错误 24．插入DIV块，可以选择“插入→HTML→布局对象”选项中的“DIV标签”命令。( ) 【答案】错误 25．在HTML中，使用DIV标签连续插入两个DIV模块，则它们默认的排列方式为垂直排列。 ( ) 【答案】正确 26．两列固定宽度的布局方式是网页中常见的布局结构，可以通过两个DIV块呈水平方向排列实现，在Dream weaver CS6中直接插入两个DIV即可。 ( ) 【答案】错误 三、简答题（本大题共4小题，每题7分，共28分） 27．环保科技网站的任务解析内容？ 【答案】熟悉Div的创建和属性设置； 熟悉css设计器的使用方法； 巩固使用css+Div布局和美化网页的方法。 28．在进行CSS布局时，如何定义Div标签的CSS样式？ 【答案】在进行CSS布局时，定义Div标签的CSS样式通常包括以下步骤：首先，在HTML中插入Div标签并为其指定一个唯一的ID或类名；然后，在CSS文件中使用选择器（如ID选择器#或类选择器.）选中该Div标签；最后，在CSS文件中为该选择器定义所需的样式属性（如宽度、高度、边距、填充、边框等），从而实现对Div标签的布局和美化。 29．什么是Div元素？它在HTML中的作用是什么？ 【答案】Div元素是HTML中的一个块级元素，用于定义文档中的分区或节。它在HTML中的主要作用是作为其他HTML元素（如段落、图片、链接等）的容器，通过CSS可以对其进行布局和样式设计，从而实现网页的整体布局和美化。 30．在index.html中，当鼠标移到文字“大明湖”上时，显示一幅图片123.png，离开时隐藏该图片，如图所示，写出操作步骤。 【答案】（1）选择“插入→布局对象→ApDiv”命令，插入一个默认大小的ApDiv； （2）将光标定位到ApDivl中，选择“插入→图像”命令插入图像123.png； （3）选中该APDiv，在属性面板设置“可见性”为hidden； （4）选中“大明湖”，打开“行为”面板，单击“添加行为”按钮选择“显示一隐藏元素”命令，弹出“显示→隐藏元素”对话框，设置APDiv为“显示”，在“事件”列表中选择“onMouseOver”； （5）同样的操作，为文本“大明湖”添加“显示→隐藏元素”行为，将APDiv设置为“隐藏”，事件为“onMouseOut”。 试卷第6页，共6页 试卷第5页，共6页 学科网（北京）股份有限公司 $ 编写说明：山东省春季高考统一考试-数字媒体类《网页制作》考点双析卷专辑，依据省教育厅《山东省春季高考统一考试招生专业类别考试标准》编写。“考点双析卷”即围绕一个考点，一份是老师的讲解卷一份是学生的练习卷，助力师生构建“讲练结合”的学习闭环，特别适用于山东省春季高考统一考试第一轮高考复习教学。 本专辑第11卷精准对标山东省考纲，考试内容及范围【网页制作】： （二）表格、模板及Div在页面布局与排版中的运用：（4）掌握使用模板文档统一网页风格和布局的方法。 （5）掌握 Div 基本操作、属性设置及在排版中的应用方法。 山东省春季高考统一考试  数字媒体类 《网页制作》考点双析卷 第11卷 使用Div（1） 老师讲解卷 时间：45分钟 总分：100分 一、单项选择题（本大题共20小题，每题3分，共60分） 1．关于网页布局，下列说法错误的是（    ） A．使用表格进行页面布局能很好地控制整个布局页面，一般都将表格的边框设置为“0” B．选择菜单“插入”→“HTML”→“框架”下的子菜单项可以创建一个框架 C．与表格布局网页相比，使用CSS＋DIV布局的页面，代码简洁，修改起来更方便 D．插入DIV块，可以选择“插入”菜单“布局对象”选项中的“Div块”命令 2．如下图所示，在Dreamweaver CS6中插入了两个DIV块，要使两个块按顺序在水平方向并排排列，下列操作正确的是 （   ） A．在CSS中将两个DIV标签“left”“right”的浮动分别设为左对齐、右对齐 B．在CSS中将两个DIV标签“left”“right”的浮动分别设为左对齐、左对齐 C．在CSS中将两个DIV标签“left”“right”的填充分别设为左对齐、左对齐 D．在CSS中将两个DIV标签“left”“right”的填充分别设为左对齐、右对齐 3．两列固定宽度的布局方式是网页中常用的布局结构，在插入两个DIV块后，要实现这两个块在水平方向的排列，必须用到块的________属性。（   ） A．position B．Indent C．filter D．float 4．下列有关CSS＋DIV布局的描述，正确的是（   ） A．CSS＋DIV将页面独立成更多的区城，在打开页面的时候，逐层加载，使得加载速度很慢 B．若使DIV块在页面中居中对齐，则要设置其float属性 C．DIV是网页中的“块”，类似于容器，不同的网页文件均可划分到不同的块中 D．CSS＋DIV布局的网页，代码简洁，结构清晰 5．在DreamweaverCS6中，插入一个DIV块，正确的操作是（   ） A．“插入”菜单→“媒体”→“DIV标签” B．“插入”菜单→“布局对象”→“DIV标签” C．“插入”菜单→“表单”→“DIV标签” D．“插入”菜单→“HTML”→“DIV标签” 6．在DreamweaverCS6中，下列关于CSS＋DIV网页布局的描述中，正确的是（   ） A．CSS＋DIV布局以块为单位，块及块中所包含元素的属性通过CSS进行控制，实现整个页面的布局 B．CSS＋DIV布局的网页通过修改CSS就能完成批量页面的变化，修改方便，但网站维护成本提高了 C．插入第1个DIV块时，图示中①处只有“在插入点”“在开始标签之前”和“在结束标签之后” D．要实现两个块的水平方向排列，只需要使用“区块”中块的“浮动”属性 7．在DreamweaverCS6中，插入一个DIV，创建CSS样式能实现如图所示效果的选项是（   ） A．背景 B．区块 C．边框 D．方框 8．在Dreamweaver CS6中，光标位于当前DIV中，如图所示，若要在当前DIV中再插入一个DIV，且位于“此处”文字前，则在“插入Div标签”对话框中选择（   ） A．在插入点 B．在开始标签之后<div id＝”d1”> C．在结束标签之前<body> D．在标签之前<div id＝”d1”> 9．在 Dreamweaver CS6中， 下列关于 CSS+DIV 网页布局操作的描述，不正确的是（   ） A．单击"插入"菜单--“布局对象"选项中的“DIV 标签"命令插入 DIV块 B．单击“CSS样式"面板中的“编辑样式"按钮，在对话框中可设置“选择器类型"和"选择器名称” C．在CSS规则定义时，在“方框"中可设置块宽度、高度、浮动、填充和边界 D．修改 CSS时根据区域内容标记，到CSS里找到相应的ID即可进行相关修改 10．在Dreamweaver CS6中，插入一个DIV标签，下列各项中不是其插入位置的是 （   ） A．在插入点 B．在开始标签之后 C．在结束标签之前 D．在插入点之前 11．要插入一个DIV块，可以采用的方法是在指定位置上选择“插入”菜单中 （   ） A．“布局”选项中的“Div标签”命令 B．“布局对象”选项中的“Div标签”命令 C．“常用”选项中的“插入Div标签”命令 D．“布局对象”选项中的“插入Div标签”命令 12．在Dreamweaver CS6中插入DIV块，并且定义该DIV样式时，应选择 （   ） A． B． C． D． 13．在Dreamweaver CS6中，利用CSS＋DIV进行了如图所示的两个DIV （ID分别为“left”和“right”）布局，下列说法不正确的是 （   ） A．插入“left”DIV后，在插入“right”DIV时，插入DIV方式可能选择了 B．“left” DIV和“right” DIV都经过“区块” CSS规则设置其“浮动”属性值为“left” C．“left” DIV和“right” DIV的宽度之和不大于页面的宽度 D．如需修改“left” DIV或“right” DIV的布局，可找到CSS样式中ID号为“#left”或“#right”，修改其相关的属性值来实现 14．在Dreamweaver CS6中，单击“插入”菜单中的“HTML”，不可以插入的是 （   ） A．水平线 B．框架 C．特殊字符 D．DIV标签 15．下列关于利用CSS＋DIV布局网页的说法，错误的是（   ） A．CSS＋DIV布局是以块为单位，块及块中所包含元素的属性通过CSS进行控制 B．“插入”菜单→“布局对象”→“DIV标签”可以插入DIV块 C．定义块的样式可以定义为“ID”，如“#left” D．要实现两个块的水平方向排列，必须要使用到块的“对齐”属性 16．DIV是网页中的“块”，块及块中所包含的元素的属性是通过 来控制的。 （   ） A．属性面板 B．修改菜单 C．CSS D．HTML 17．在 Dreamweaver CS6中，关于利用CSS+DIV布局网页的描述，正确的是________。 （   ） A．CSS+DIV 将网页中的元素划分到不同的块中，块与块之间可以显示与内容无关的网页 B．块与块中所包含元素的属性通过 CSS进行控制，从而实现整个页面的布局 C．在 DIV 中不可以再插入 DIV D．插入 DIV 标签时，如果同时设置了类和ID的 CSS样式，类的优先级别比ID高 18．下图是DIV标签，内容到DIV边界的距离是30像素，这一数据是通过 设置的。 （   ） A．Padding选项 B．Margin选项 C．Float选项 D．Width选项 19．在光标定位处插入一个DIV块，可以选择“插入”→“布局对象”→“DIV标签”命令，在弹出对话框的“插入”选项中选择具体的插入位置。以下选择的位置正确的是（   ） A．插入点 B．在开始标签之后 C．在结束标签之前 D．在标签之后 20．插入DIV块，可以选择插入－布局对象－DIV标签，在其中再连续插入两个DIV，要使里面的两个DIV左右排列，那么在设置样式时应选择（   ） A．方框 B．定位 C．边框 D．区块 二、判断题（本大题共6小题，每题2分，共12分） 21．使用CSS＋DIV布局网页时，当需要一个块居中对齐时，可以通过方框的margin属性设置。 ( ) 22．使用CSS＋DIV的网页布局方式可以加快页面的加载速度。 ( ) 23．常用的网页布局方式有表格布局、框架布局和CSS＋DIV布局，它们都可以精准定位各种内容，以实现各种不同的网页布局效果。( ) 24．插入DIV块，可以选择“插入→HTML→布局对象”选项中的“DIV标签”命令。( ) 25．在HTML中，使用DIV标签连续插入两个DIV模块，则它们默认的排列方式为垂直排列。 ( ) 26．两列固定宽度的布局方式是网页中常见的布局结构，可以通过两个DIV块呈水平方向排列实现，在Dream weaver CS6中直接插入两个DIV即可。 ( ) 三、简答题（本大题共4小题，每题7分，共28分） 27．环保科技网站的任务解析内容？ 28．在进行CSS布局时，如何定义Div标签的CSS样式？ 29．什么是Div元素？它在HTML中的作用是什么？ 30．在index.html中，当鼠标移到文字“大明湖”上时，显示一幅图片123.png，离开时隐藏该图片，如图所示，写出操作步骤。 试卷第6页，共6页 试卷第5页，共6页 学科网（北京）股份有限公司 $