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

编写说明：山东省春季高考统一考试-数字媒体类《网页制作》考点双析卷专辑，依据省教育厅《山东省春季高考统一考试招生专业类别考试标准》编写。“考点双析卷”即围绕一个考点，一份是老师的讲解卷一份是学生的练习卷，助力师生构建“讲练结合”的学习闭环，特别适用于山东省春季高考统一考试第一轮高考复习教学。 本专辑第13卷精准对标山东省考纲，考试内容及范围【网页制作】： （二）表格、模板及Div在页面布局与排版中的运用：（4）掌握使用模板文档统一网页风格和布局的方法。 （5）掌握 Div 基本操作、属性设置及在排版中的应用方法。 山东省春季高考统一考试  数字媒体类 《网页制作》考点双析卷 第13卷 使用Div（2） 老师讲解卷 时间：45分钟 总分：100分 一、单项选择题（本大题共20小题，每题3分，共60分） 1．下列关于网页布局的说法，正确的是（   ） A．网页只能使用一种布局方式 B．DIV 和表格布局方式不能混用 C．框架和DIV 不能混用 D．框架集文件是一个 HTML 文件 2．在 Dreamweaver CS6 中， 插入 DIV块的正确方法是（   ） A．“插入”菜单→“布局对象”命令→“Div标签” B．“插入”面板→“布局对象”选项→“Div标签” C．“插入”面板→“布局”选项→“Div标签” D．“插入”菜单→“布局对象”命令→“插入 Div 标签” 3．下列不属于 “插入”菜单“HTML”选项中的命令的是 （   ） A．DIV标签 B．框架 C．水平线 D．特殊字符 4．下列关于DIV的说法，错误的是 （   ） A．可以在“插入”面板“布局”选项中，选择“插入Div标签”来插入DIV标签 B．在插入DIV标签的对话框中，默认有ID与类两种CSS样式 C．当需要使DIV两列排列时，需要用到边框中的float D．“插入DIV标签”的对话框中， DIV标签插入位置：在插入点、在开始标签之后、在结束标签之前 5．在Dreamweaver CS6中，第一次插入DIV标签，不能在以下________插入位置进行插入。（   ） A．在插入点 B．在开始标签之后 C．在结束标签之前 D．在标签之前 6．要将DIV块的对齐方式设置为水平居中,则需利用CSS设置DIV的________属性。（   ） A．“方框”→“float” B．“区块”→“对齐方式” C．“方框”→“Margin” D．“列表”→“位置” 7．在“CSS规则定义”对话中，要设置DIV居中，应选择（   ） A．扩展 B．区块 C．方框 D．边框 8．一般来说，CSS是利用 标记构建网页布局。（   ） A．<dir> B．<div> C．<dis> D．<dif> 9．要设置如图（1）所示的DIV块，“新建CSS规则”对话框如图（3）所示，则在如图（2）所示的“插入Div标签”对话框中的（1）处应该输入（   ） A．left B．#left C．##left D．.left 10．如图所示为插入两个块之后的效果，下列有关CSS+DIV布局网页的说法，错误的是（   ） A．插入DIV块，可以选择“插入”菜单“布局对象”选项中的“Div标签”命令 B．left是一个宽度为300像素，高度为200像素的DIV块 C．left 和right两个块的“浮动"属性都需要定义为“左对齐”，这样才能实现图中所示的效果 D．CSS+DIV将页面独立成更多的区域，在打开页面时逐层加载，使得加载速度很慢 11．若要在网页的最前面插入 DIV块，则在“插入DIV标签”对话框中“插入：”处选择插入位置为（   ） A．插入点 B．开始标签之后 C．结束标签之前 D．开始标签之前 12．在Dream weaver CS6的网页布局中，把2个垂直排列的DIV块设置成水平排列，下列选项中的属性组合能实现此设置的是（   ） A．width与float B．height与float C．width与height D．padding与right 13．在Dream weaver CS6网页中插入DIV块，给这个DIV块定义样式，如图所示，通常使用的选择器类型是（   ） A．类（可应用于任何HTML元素） B．ID（仅应用于一个HTML元素） C．标签（重新定义HTML元素） D．复合内容（基于选择的内容） 14．在Dreamweaver CS6中，给某DIV添加CSS样式，设置高、宽填充等属性，需要在________分类中设置。（   ） A．类型 B．背景 C．方框 D．边框‌ 15．下列不是CSS＋DIV布局特点的是（   ） A．代码简洁 B．结构复杂 C．面向搜索引擎友好 D．维护成本低 16．下列关于CSS＋DIV布局网页的叙述中，错误的是（   ） A．面向搜索引擎更加友好 B．可以实现批量页面的修改 C．代码简洁，结构清晰 D．不能实现元素的精确定位 17．层的属性面板上“z轴”上的值（   ） A．为正 B．为负 C．为0 D．三者均可 18．若两个DIV块未设置浮动属性，默认的排列方式是（   ） A．水平排列 B．垂直排列 C．重叠排列 D．随机排列 19．在DIV布局中，要实现两个块的横向排列，应设置 属性（   ） A．display: block; B．float: left; C．position: static; D．margin: 0 auto; 20．下列哪个不是块级元素的特征？（   ） A．独自占据一整行或多整行 B．可以设置宽度和高度 C．在页面中以区域块的形式出现 D．在一行中可以显示多个 二、判断题（本大题共6小题，每题2分，共12分） 21．在网页中顺序插入的两个块，即使设置了合适的宽度，仍然保持在垂直方向上的线型排列。 ( ) 22．在制作网页时，插入一个DIV块的操作是“插入”→“布局对象”→“Div标签”。 ( ) 23．利用CSS＋DIV布局网页时，在网页中顺序插入两个块，只要设置两者宽度之和小于网页宽度就能使两个块水平方向排列。 ( ) 24．当一个网页内容划分成多个DIV区域时，打开页面时是逐层加载，而不是整个页面一起下载。 ( ) 25．使用CSS＋DIV布局，与表格布局的网页相比，代码简洁，结构清晰，面向搜索引擎更加友好，而且可以降低网站维护成本。 ( ) 26．DIV是网页的“块”，块类似于容器，可以在每个块中显示不同的网页。 ( ) 三、简答题（本大题共4小题，每题7分，共28分） 27．如何改变AP Div的层叠顺序？ 28．创建Div有哪些方法？ 29．架构梦想的具体步骤有哪些？ 30．简述使用Div 对页面进行整体规划 试卷第6页，共6页 试卷第5页，共6页 学科网（北京）股份有限公司 $ 编写说明：山东省春季高考统一考试-数字媒体类《网页制作》考点双析卷专辑，依据省教育厅《山东省春季高考统一考试招生专业类别考试标准》编写。“考点双析卷”即围绕一个考点，一份是老师的讲解卷一份是学生的练习卷，助力师生构建“讲练结合”的学习闭环，特别适用于山东省春季高考统一考试第一轮高考复习教学。 本专辑第13卷精准对标山东省考纲，考试内容及范围【网页制作】： （二）表格、模板及Div在页面布局与排版中的运用：（4）掌握使用模板文档统一网页风格和布局的方法。 （5）掌握 Div 基本操作、属性设置及在排版中的应用方法。 山东省春季高考统一考试  数字媒体类 《网页制作》考点双析卷 第13卷 使用Div（2） 老师讲解卷 时间：45分钟 总分：100分 一、单项选择题（本大题共20小题，每题3分，共60分） 1．下列关于网页布局的说法，正确的是（   ） A．网页只能使用一种布局方式 B．DIV 和表格布局方式不能混用 C．框架和DIV 不能混用 D．框架集文件是一个 HTML 文件 【答案】D 2．在 Dreamweaver CS6 中， 插入 DIV块的正确方法是（   ） A．“插入”菜单→“布局对象”命令→“Div标签” B．“插入”面板→“布局对象”选项→“Div标签” C．“插入”面板→“布局”选项→“Div标签” D．“插入”菜单→“布局对象”命令→“插入 Div 标签” 【答案】A 3．下列不属于 “插入”菜单“HTML”选项中的命令的是 （   ） A．DIV标签 B．框架 C．水平线 D．特殊字符 【答案】A 4．下列关于DIV的说法，错误的是 （   ） A．可以在“插入”面板“布局”选项中，选择“插入Div标签”来插入DIV标签 B．在插入DIV标签的对话框中，默认有ID与类两种CSS样式 C．当需要使DIV两列排列时，需要用到边框中的float D．“插入DIV标签”的对话框中， DIV标签插入位置：在插入点、在开始标签之后、在结束标签之前 【答案】C 5．在Dreamweaver CS6中，第一次插入DIV标签，不能在以下________插入位置进行插入。（   ） A．在插入点 B．在开始标签之后 C．在结束标签之前 D．在标签之前 【答案】D 6．要将DIV块的对齐方式设置为水平居中,则需利用CSS设置DIV的________属性。（   ） A．“方框”→“float” B．“区块”→“对齐方式” C．“方框”→“Margin” D．“列表”→“位置” 【答案】C 7．在“CSS规则定义”对话中，要设置DIV居中，应选择（   ） A．扩展 B．区块 C．方框 D．边框 【答案】C 8．一般来说，CSS是利用 标记构建网页布局。（   ） A．<dir> B．<div> C．<dis> D．<dif> 【答案】B 9．要设置如图（1）所示的DIV块，“新建CSS规则”对话框如图（3）所示，则在如图（2）所示的“插入Div标签”对话框中的（1）处应该输入（   ） A．left B．#left C．##left D．.left 【答案】A 10．如图所示为插入两个块之后的效果，下列有关CSS+DIV布局网页的说法，错误的是（   ） A．插入DIV块，可以选择“插入”菜单“布局对象”选项中的“Div标签”命令 B．left是一个宽度为300像素，高度为200像素的DIV块 C．left 和right两个块的“浮动"属性都需要定义为“左对齐”，这样才能实现图中所示的效果 D．CSS+DIV将页面独立成更多的区域，在打开页面时逐层加载，使得加载速度很慢 【答案】D 11．若要在网页的最前面插入 DIV块，则在“插入DIV标签”对话框中“插入：”处选择插入位置为（   ） A．插入点 B．开始标签之后 C．结束标签之前 D．开始标签之前 【答案】B 12．在Dream weaver CS6的网页布局中，把2个垂直排列的DIV块设置成水平排列，下列选项中的属性组合能实现此设置的是（   ） A．width与float B．height与float C．width与height D．padding与right 【答案】A 【详解】width控制元素尺寸，float实现水平方向并排，在Dream weaver CS6的网页布局中，把2个垂直排列的DIV块设置成水平排列，能实现此设置的是 width与float。 13．在Dream weaver CS6网页中插入DIV块，给这个DIV块定义样式，如图所示，通常使用的选择器类型是（   ） A．类（可应用于任何HTML元素） B．ID（仅应用于一个HTML元素） C．标签（重新定义HTML元素） D．复合内容（基于选择的内容） 【答案】B 【分析】每个ID在HTML文档中应该是唯一的，如果给一个特定的DIV块定义样式，使用ID选择器是最好的选择。 【详解】在Dreamweaver CS6网页中给DIV块定义样式，通常使用ID选择器，因其唯一性可精准为特定DIV块定义样式。 14．在Dreamweaver CS6中，给某DIV添加CSS样式，设置高、宽填充等属性，需要在________分类中设置。（   ） A．类型 B．背景 C．方框 D．边框 【答案】C 【详解】CSS样式表中，DIV的尺寸（高、宽）、内边距（填充）等属性属于“盒模型”相关属性，在Dreamweaver的CSS面板中归类于“方框”分类‌ 15．下列不是CSS＋DIV布局特点的是（   ） A．代码简洁 B．结构复杂 C．面向搜索引擎友好 D．维护成本低 【答案】B 【详解】CSS＋DIV布局的‌典型特点‌包括：相比传统表格布局，代码简洁‌ ，CSS+DIV通过样式与内容分离显著减少冗余代码；面向搜索引擎友好‌ 结构清晰的HTML代码更利于搜索引擎抓取和索引；修改CSS样式即可批量更新全站页面，降低维护难度和成本。 16．下列关于CSS＋DIV布局网页的叙述中，错误的是（   ） A．面向搜索引擎更加友好 B．可以实现批量页面的修改 C．代码简洁，结构清晰 D．不能实现元素的精确定位 【答案】D 【详解】CSS＋DIV布局网页的有点是：面向搜索引擎更加友好；可以实现批量页面的修改；代码简洁，结构清晰。 17．层的属性面板上“z轴”上的值（   ） A．为正 B．为负 C．为0 D．三者均可 【答案】D 【详解】层的属性面板上“z轴”上的值为正、为负、为0，三者均可。 18．若两个DIV块未设置浮动属性，默认的排列方式是（   ） A．水平排列 B．垂直排列 C．重叠排列 D．随机排列 【答案】B 【详解】未设置浮动的DIV块默认按文档流垂直排列。 19．在DIV布局中，要实现两个块的横向排列，应设置 属性（   ） A．display: block; B．float: left; C．position: static; D．margin: 0 auto; 【答案】B 【详解】float: left; 使DIV脱离文档流并水平排列，是传统布局中实现横向排列的关键属性。 20．下列哪个不是块级元素的特征？（   ） A．独自占据一整行或多整行 B．可以设置宽度和高度 C．在页面中以区域块的形式出现 D．在一行中可以显示多个 【答案】D 【详解】块级元素通常独自占据一整行或多整行，可以设置宽度和高度，并以区域块的形式出现在页面中，但在一行中不能显示多个块级元素。 二、判断题（本大题共6小题，每题2分，共12分） 21．在网页中顺序插入的两个块，即使设置了合适的宽度，仍然保持在垂直方向上的线型排列。 ( ) 【答案】正确 22．在制作网页时，插入一个DIV块的操作是“插入”→“布局对象”→“Div标签”。 ( ) 【答案】正确 23．利用CSS＋DIV布局网页时，在网页中顺序插入两个块，只要设置两者宽度之和小于网页宽度就能使两个块水平方向排列。 ( ) 【答案】错误 24．当一个网页内容划分成多个DIV区域时，打开页面时是逐层加载，而不是整个页面一起下载。 ( ) 【答案】正确 25．使用CSS＋DIV布局，与表格布局的网页相比，代码简洁，结构清晰，面向搜索引擎更加友好，而且可以降低网站维护成本。 ( ) 【答案】正确 26．DIV是网页的“块”，块类似于容器，可以在每个块中显示不同的网页。 ( ) 【答案】错误 三、简答题（本大题共4小题，每题7分，共28分） 27．如何改变AP Div的层叠顺序？ 【答案】①中AP Div，在属性面板的“Z轴”框中直接输入Z值。 ②在“AP元素”面板中，使用鼠标直接拖动AP Div到指定位置。 ③在“AP元素”面板中，单击AP Div的Z值，直接输入新的Z值。 28．创建Div有哪些方法？ 【答案】选择菜单“插入”——“Div”命令，弹出“插入 Div”对话框，插入位置可选择“在插入点”、“在标签开始之后”。 选择“插入”面板种的“html”——“Div”命令，也弹出如图3-54所示的插入面板。如果不是新创建的Div。 29．架构梦想的具体步骤有哪些？ 【答案】（2）将素材中的renwu9文件夹复制到D盘根目录。运行Dreamweaver CC新建站点“架构梦想"，站点文件夹为D:\renwu90打开懿点根目录，新建空白文档index•html'修改标题为"CSS+Div布局页面''，打开“页面属性"对话框，在“外观（css）''分类选项卡中设置背景颜色为#CCC, “左边距"、“右边距"、“上边距"和“下边距"均为0。 （3）创建嵌套Dive打开index.html,选择“插入''    "Div"命令，在DOM面板中输入Div的名字"#container";将鼠标光标定位在"#container"层中，再次选择“插入'' Div 命令，单击“嵌套"按钮，如图3一42所示，插入嵌套Div,在DOM面板中输入名称"#banner"; 用同样的方法创建"#content"和"#footer"嵌套Div, DOM面板。 （4）定义#container层的样式。在CSS设计器中，创建#container样式，并设置属性。 （5）在#banner层中插入图片并编辑OSS样式。将鼠标光标定位在#banner层中，选择“插 “图像〔image）"命令，打开“选择图像源文件''对话框，选择"Images"文件夹中的01.gif,单击“确定"按钮。 （6）在#content层中插入图片并编辑css样式表。将鼠标光标定位在#content层中，选择“插入” “图像(image广命令，打开“选择图像源文件"对话框，选择'images"文件夹中的2.gif,单击“确定"按钮。 （7）在#footer层中设置背景图像和文本并编辑css样式表。在css设计器中，创建#footer样式并设置属性，如图3．49所示，完善#footer层后的拆分视图。 （8）将鼠标光标定位在# Oter层中，将text文件夹下的“精益求精．doc"文本内容复制到#footer层中。在css设计器中，创建#footerp样式并设置属性，完善#footer p层后的拆分视图。 （9）保存文件，按F12键预览网页。 30．简述使用Div 对页面进行整体规划 【答案】使用 Div 可以将页面先在整体上进行<div>标记的分块，然后对各个块进行 CSS 定位， 最后在各个块中添加相应内容。这样进行<div>标记过的页面更新起来会十分容易，也可以通过修改 CSS 的属性重新定位。 试卷第6页，共6页 试卷第5页，共6页 学科网（北京）股份有限公司 $