Dreamweaver网页设计期末试题及详细答案

Dreamweaver网页设计期末试题及详细答案考试说明：满分100分，考试时间90分钟，题型包含选择题、填空题、简答题、实操应用题，无特殊答题要求，答案规范、条理清晰即可得分。一、单项选择题（每题2分，共20分）1、在Dreamweaver中，新建默认HTML网页的后缀名是（）A、.txtB、.htmlC、.cssD、.js2、Dreamweaver中，用于预览网页效果的快捷键是（）A、F12B、F5C、F8D、F13、以下标签中，用于定义网页段落的是（）A、<body>B、<p>C、<span>D、<div>4、在Dreamweaver站点设置中，必须配置的核心内容是（）A、站点名称和本地根文件夹B、远程服务器地址C、测试服务器D、文件缓存5、CSS样式中，设置文本颜色的属性是（）A、font-sizeB、colorC、background-colorD、text-align6、网页中插入图片的核心标签是（）A、<pic>B、<img>C、<image>D、<photo>7、Dreamweaver的工作视图中，用于纯代码编辑的视图是（）A、设计视图B、代码视图C、拆分视图D、实时视图8、超链接标签中，用于指定跳转地址的属性是（）A、nameB、hrefC、targetD、id9、以下不属于网页布局方式的是（）A、表格布局B、DIV+CSS布局C、框架布局D、文本堆叠布局10、设置网页标题的标签需要放置在（）标签内A、<body>B、<head>C、<html>D、<title>二、填空题（每空2分，共20分）1、完整的HTML网页结构由<html>、__________、__________三大核心标签组成。2、Dreamweaver中__________视图可以同时查看代码和网页可视化效果。3、超链接中，target="_blank"的作用是__________。4、CSS样式表分为行内样式、__________和外部样式表三种类型。5、表格布局中，<tr>代表__________，<td>代表__________。6、网页中，__________属性可以设置图片的替代文字，图片加载失败时显示。7、DIV标签的默认显示方式是__________级元素，独占一行。8、Dreamweaver中，__________功能可以批量管理站点文件，统一更新网页链接。三、简答题（每题10分，共30分）1、简述在Dreamweaver中创建本地站点的完整操作步骤。2、简述HTML中表格、DIV布局的优缺点对比。3、简述外部CSS样式表的优势及调用方式。四、实操应用题（共30分）使用Dreamweaver完成简单个人主页制作，要求如下：1、新建站点，创建index.html主页面；2、设置网页标题为“我的个人主页”；3、页面包含标题、个人简介文字、一张个人配图、两个超链接（首页、关于我）；4、添加简单CSS样式：设置页面字体、文本居中、图片自适应大小；5、简述操作流程并写出核心代码。参考答案及详细解析一、单项选择题答案及解析1、B解析：HTML网页标准后缀为.html/.htm，.txt是文本文件，.css是样式文件，.js是脚本文件。2、A解析：F12是Dreamweaver默认网页预览快捷键，F5刷新页面，F8展开文件面板，F1打开帮助文档。3、B解析：<p>为段落标签，<body>是网页主体，<span>用于行内文本修饰，<div>是区块布局标签。4、A解析：本地站点搭建只需配置站点名称和本地根文件夹，远程服务器、测试服务器为可选配置。5、B解析：color控制文本颜色，font-size控制字体大小，background-color控制背景颜色，text-align控制文本对齐方式。6、B解析：HTML插入图片的唯一标准标签为<img/>，其余均为非规范标签。7、B解析：代码视图仅显示网页代码，设计视图为可视化编辑，拆分视图为代码+设计双界面。8、B解析：href是超链接跳转地址属性，target控制跳转窗口方式，id为标签唯一标识。9、D解析：网页主流布局包含表格布局、DIV+CSS布局、框架布局，无文本堆叠布局方式。10、B解析：<title>网页标题标签必须嵌套在<head>头部标签内。二、填空题答案1、<head>、<body>2、拆分3、在新窗口中打开超链接页面4、内部样式表（嵌入式样式表）5、表格行、表格单元格6、alt7、块8、站点管理器（站点文件管理）三、简答题详细答案1、Dreamweaver创建本地站点操作步骤（1）提前在电脑磁盘新建专属文件夹，作为站点根目录，可细分images、css、js等子文件夹，分类存放网页素材；（2）打开Dreamweaver软件，点击顶部菜单栏【站点】-【新建站点】；（3）在站点设置窗口，输入自定义站点名称，方便识别管理；（4）选择提前创建好的本地根文件夹，绑定站点路径；（5）无需配置远程服务器和测试服务器，直接点击保存，完成本地站点创建；（6）创建完成后，可在文件面板查看站点所有文件，后续网页素材、页面文件均存放于此文件夹。2、表格布局与DIV布局优缺点对比表格布局：优点：操作简单、上手容易，兼容性极强，所有浏览器均可正常显示，适合简单静态页面制作，布局规整统一。缺点：代码冗余量大，嵌套层级多，页面加载速度慢；结构与样式混杂，不利于后期修改维护；灵活性差，无法实现复杂动态布局。DIV+CSS布局：优点：代码简洁精简，页面加载速度快；结构与样式分离，修改CSS即可批量更改页面样式，维护便捷；布局灵活，适配移动端、响应式设计，符合现代网页制作标准。缺点：早期低版本浏览器兼容性一般，新手上手难度略高，需要掌握CSS样式语法。3、外部CSS样式表的优势及调用方式核心优势：（1）实现结构与样式完全分离，HTML代码更简洁整洁；（2）一个外部CSS文件可同时作用于多个网页，批量统一网站样式，大幅提升制作和维护效率；（3）网页加载时CSS文件可缓存，减少重复加载，提升网页访问速度；（4）便于后期样式改版，仅修改CSS文件即可更新全站页面样式，无需逐个修改网页。调用方式：在网页<head>标签内，使用<link>标签引入外部.css文件，通过href属性指定样式文件路径。四、实操应用题参考答案1、完整操作流程（1）新建本地站点，创建站点根文件夹，新建images子文件夹存放图片素材；（2）在Dreamweaver中新建HTML空白页面，保存为index.html，存放于站点根目录；（3）在页面头部设置网页标题为“我的个人主页”；（4）在设计视图输入页面标题、个人简介文本，插入本地配图；（5）添加超链接，分别链接首页（index.html）和关于我页面（可新建空白页面）；（6）新建外部CSS样式文件，设置页面字体、居中对齐、图片自适应样式并引入页面；（7）保存所有文件，按F12预览网页效果，检查样式和链接是否正常。2、核心完整代码PlainText

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>我的个人主页</title>

<style>

/*全局样式设置*/

body{

font-family:"微软雅黑",宋体;

text-align:center;

margin:0auto;

}

/*图片自适应样式*/

img{

max-width:500px;

width:100%;

height:auto;

}

/*超链接样式*/

a{

margin:010px;

text-decoration:none;

color:#333;

}

</style>

</head>

<body>

<h2>欢迎来到我的个人主页</h2>

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

<imgsrc="images/tu.jpg"alt="个人配图">

<p>