DW网页设计期末考试试题（含详细答案）

DW网页设计期末考试试题（含详细答案）考试说明：满分100分，考试时间90分钟，题型包含选择题、填空题、简答题、实操分析题，所有答案规范贴合网页设计实操知识点，适配课堂期末考核、技能测评使用。一、单项选择题（每题2分，共30分）1、Dreamweaver软件的核心作用是（）A、图像处理B、网页制作与网站管理C、视频剪辑D、数据编程2、在DW中，新建的空白网页默认的文件格式是（）A、.txtB、.htmlC、.cssD、.js3、HTML中，用于定义网页标题的标签是（）A、<head>B、<title>C、<body>D、<h1>4、在DW设计视图中，按下F12键的功能是（）A、保存网页B、预览网页C、刷新页面D、新建文件5、下列标签中，用于插入段落文本的是（）A、<span>B、<p>C、<div>D、<br>6、CSS样式表中，设置文本居中对齐的属性是（）A、text-indentB、text-alignC、line-heightD、font-align7、在DW中，超级链接的目标属性_blank表示（）A、在当前窗口打开链接B、在新窗口打开链接C、在父窗口打开D、全屏打开8、HTML中，插入图片的核心标签是（）A、<pic>B、<img>C、<image>D、<photo>9、下列不属于网页布局常用标签的是（）A、<div>B、<table>C、<body>D、<ul>10、CSS文件的后缀名是（）A、.htmB、.cssC、.javaD、.xml11、在网页中，实现换行且不产生段落间距的标签是（）A、<p>B、<br>C、<hr>D、<tr>12、DW中，站点管理的主要目的是（）A、美化网页B、统一管理网站文件、规范站点结构C、提升网速D、压缩代码13、设置字体大小的CSS属性是（）A、font-styleB、font-sizeC、font-weightD、font-family14、超链接标签是（）A、<a>B、<link>C、<url>D、<href>15、网页中水平线的标签是（）A、<line>B、<hr>C、<hl>D、<border>二、填空题（每空2分，共20分）1、网页的基本组成结构分为__________、头部、主体三部分。2、CSS样式的三种引入方式：行内样式、__________、外部样式表。3、<img>标签中，__________属性用于指定图片的路径。4、HTML中，无序列表使用__________标签，列表项使用<li>标签。5、设置文字加粗的CSS属性值是font-weight:__________。6、超链接中，__________属性用于设置链接的目标地址。7、DW中，__________视图可以直接查看和编辑网页代码。8、表格中，__________标签用于定义表格行，<td>用于定义单元格。9、设置文本首行缩进的CSS属性是__________。10、网站首页的默认文件名一般为__________。三、简答题（每题10分，共30分）1、简述Dreamweaver中创建本地站点的步骤及站点创建的意义。2、简述HTML、CSS的各自作用，以及二者的配合关系。3、简述网页中相对路径和绝对路径的区别及适用场景。四、实操分析题（每题20分，共20分）根据以下需求，分析网页制作的实现思路，并写出核心代码：需求：制作一个简单网页，包含网页标题“个人简介”，页面正文有一段介绍文字，插入一张图片，添加一个跳转至百度的新窗口超链接，要求文字居中、图片自适应宽度。参考答案及详细解析一、单项选择题答案及解析1、【答案】B【解析】Dreamweaver是专业的网页制作工具，主要用于网页编写、编辑、站点搭建与网站文件管理，不具备图像处理、视频剪辑、独立编程的核心功能。2、【答案】B【解析】DW新建默认网页为超文本标记语言文件，后缀为.html，是网页的标准格式。3、【答案】B【解析】<title>标签定义浏览器标题栏显示的网页标题；<head>是头部容器，<body>是页面主体，<h1>是一级标题文本。4、【答案】B【解析】DW软件默认快捷键，F12为调用浏览器预览网页效果，是日常制作最常用的快捷键。5、【答案】B【解析】<p>是段落标签，用于分段展示文本；<span>用于行内文本修饰，<div>是块级布局标签，<br>是换行标签。6、【答案】B【解析】text-align为文本对齐属性，center值代表居中；text-indent是首行缩进，line-height是行高。7、【答案】B【解析】_blank是超链接常用目标值，作用是打开全新浏览器窗口展示链接页面，不覆盖当前页面。8、【答案】B【解析】HTML标准图片插入标签为<img/>，其余选项均非官方规范标签。9、【答案】C【解析】<div>、<table>、<ul>均用于页面布局排版，<body>是网页主体内容容器，不属于布局标签。10、【答案】B【解析】CSS样式表文件专属后缀为.css，用于统一管理网页样式。11、【答案】B【解析】<br>为强制换行标签，无段落间距；<p>换行后会产生默认段落间距。12、【答案】B【解析】站点管理是DW的核心功能，可规范网站文件分类、统一文件路径、避免链接失效，方便网站整体维护。13、【答案】B【解析】font-size专门用于设置字体像素、百分比等大小样式。14、【答案】A【解析】<a>是超链接本体标签，href是其属性，用于定义链接地址。15、【答案】B【解析】<hr>是HTML标准水平线标签，可设置宽度、颜色、粗细等样式。二、填空题答案及解析1、【答案】文档结构（html）【解析】标准HTML网页结构由<html>文档根标签、<head>头部、<body>主体三部分组成。2、【答案】内部样式表【解析】CSS三种引入方式：行内样式（标签内直接设置）、内部样式（页面head内设置）、外部样式（独立css文件引入）。3、【答案】src【解析】src是图片标签核心属性，用于填写图片相对或绝对路径，加载图片资源。4、【答案】<ul>【解析】<ul>无序列表，默认圆点符号；<ol>为有序列表，默认数字序号。5、【答案】bold【解析】font-weight:bold;实现字体加粗效果，normal为默认常规字体。6、【答案】href【解析】<ahref="地址"></a>，href是定义链接跳转地址的必备属性。7、【答案】代码【解析】DW分为设计视图、代码视图、拆分视图，代码视图可纯手工编辑网页源码。8、【答案】<tr>【解析】表格结构：<table>表格容器、<tr>表格行、<td>单元格。9、【答案】text-indent【解析】常用text-indent:2em;实现段落首行缩进两个汉字的效果。10、【答案】index.html【解析】服务器默认识别index.html、index.htm为网站首页，是行业通用命名规范。三、简答题详细答案1、简述Dreamweaver中创建本地站点的步骤及站点创建的意义。【详细答案】创建步骤：第一，在电脑本地新建专属文件夹，作为网站根目录，分类创建images、css、js等子文件夹，分别存放图片、样式、脚本文件；第二，打开DW软件，点击菜单栏「站点」-「新建站点」；第三，设置站点名称，选择本地新建的根文件夹作为站点本地根文件夹；第四，无需配置远程服务器信息，仅完成本地站点设置，保存站点配置，即可完成创建。创建意义：一是规范网站文件结构，统一资源存放路径，避免文件混乱、丢失；二是保证网页链接、图片、样式路径统一，有效防止预览时资源加载失效、链接报错；三是方便后期网站修改、更新与迁移，是正规网站制作的基础操作。2、简述HTML、CSS的各自作用，以及二者的配合关系。【详细答案】HTML的作用：属于网页结构语言，负责搭建网页的整体骨架，定义网页的所有内容元素，包括文字、图片、链接、表格、列表等，决定网页有什么内容、内容如何排版布局。CSS的作用：属于网页样式美化语言，负责修饰HTML搭建的网页结构，设置文字颜色、大小、行距、背景颜色、元素宽高、对齐方式、页面布局等视觉效果，让单调的网页结构变得美观规整。二者配合关系：HTML是基础骨架，负责搭建内容结构；CSS是外观装饰，负责美化骨架。HTML搭建原始网页内容，通过引入CSS样式，对HTML标签元素进行统一美化和布局调整，结构与样式分离，让网页代码更简洁，后期修改维护更便捷。3、简述网页中相对路径和绝对路径的区别及适用场景。【详细答案】区别：绝对路径是文件完整的、固定的地址，包含完整的盘符或网址，路径唯一固定；相对路径是基于当前网页文件位置，查找其他资源的路径，路径随站点文件夹整体移动不会失效。适用场景：绝对路径多用于引用网络外部资源，如网络图片、外部官网链接，本地文件不建议使用，移动文件夹后会直接报错失效；相对路径是本地网站制作的主流路径，适用于站点内部所有图片、样式、网页链接，站点文件夹整体复制、迁移后，资源路径依然有效，稳定性更强。四、实操分析题详细答案【实现思路】1、搭建标准HTML基础结构，设置网页标题为“个人简介”；2、通过CSS统一设置页面文字居中样式；3、使用段落标签添加个人介绍文本；4、插入图片并设置宽度自适应，适配页面尺寸；5、添加超链接，设置新窗口打开百度网址；6、整合代码，保证页面样式统一、功能正常。【核心完整代码】html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>个人简介</title>

<style>

/*设置页面所有内容居中*/

body{

text-align:center;

}

/*图片宽度自适应，高度自动适配*/

img{

width:100%;

max-width:600px;

height:auto;

}

</style>

</head>

<body>

<h2>我的个人简介</h2>

<p>大家好，我是一名网页设计学习者，热爱前端制作，专注于美观、规范的网页设计与制作。</p>

<!--插入图片，可替换为本地图片路径-->

<imgsrc="ima