简介本资源是一份面向高校计算机类专业学生及网页设计初学者的《网页设计》课程复习题集聚焦HTML、CSS、JavaScript基础与Dreamweaver实操核心考点助力考前系统梳理与查漏补缺。文件为单个125KB的Word文档.docx内容结构清晰涵盖填空题、判断题、单项选择题三大题型共60余道题目全面覆盖CSS选择器类型、表单提交方式GET/POST、框架与层嵌套、超链接路径设置、库项目复用、时间轴动画控制、图像格式特性、表单对象分类等关键知识点并附详细解析逻辑与易错点提示。预览可见题目紧扣教学大纲如类样式定义、行为绑定限制、跳转菜单事件onChange、框架集文件必要性、Dreamweaver快捷键ShiftEnter换行等均属高频考点。目前已有64人学习下载适合作为课堂练习补充、期末冲刺训练或自学自测材料帮助读者快速掌握网页设计基础技能与工具应用规范。1. 这不是一份普通复习题它是一份 Dreamweaver 时代网页设计的「技术断代标本」你打开《网页设计》复习题.docx第一反应可能是“这题太老了”——Dreamweaver MX、框架集、层Layer、时间轴动画、.lbi 库文件、ASPADO 数据库连接……这些词在现代前端工程中几乎已成考古术语。但恰恰是这份看似过时的文档精准锚定了中国职业教育网页设计课程的关键分水岭它完整覆盖了从纯静态 HTML/CSS 向动态交互过渡的临界阶段且所有知识点都严格绑定在 Dreamweaver 可视化工作流中。这意味着它不是教你怎么写代码而是教你怎么用工具把结构、样式、行为三者拧成一股绳。对刚接触网页开发的中职/高职学生而言这份题的价值在于所有操作都有明确的 UI 路径如“按住 Alt 键绘制层”“在行为面板中选择 onChange 事件”所有概念都对应着 Dreamweaver 界面里的一个按钮、一个面板或一个快捷键。它不讲 React 的虚拟 DOM但会告诉你为什么“嵌套层必须在父层内释放鼠标”它不提 CSS Grid 布局但用“表格转换为层”这个高危操作逼你直面 HTML 结构与视觉呈现的撕裂风险。如果你正在带中职网页设计课、准备期末命题或需要快速复现一个兼容 IE6 的老系统维护界面——这份题就是你的操作手册不是怀旧是精准复位。2. Dreamweaver 工作流下的 CSS 与 HTML 实战从选择器到页面结构落地Dreamweaver 的 CSS 支持并非现代编辑器的实时预览模式而是一套强耦合于“属性面板—标签检查器—代码视图”三件套的闭环体系。理解其底层逻辑才能避开填空题第 10 题“类样式、标签样式和高级样式”的概念陷阱——这里的“高级样式”并非 CSS3 中的:is()或:has()而是指 Dreamweaver 自定义的复合选择器类型如a:hover、p:first-line等需通过“新建 CSS 规则”对话框中“选择器类型”下拉菜单手动指定的伪类/伪元素规则。这种设计倒逼开发者必须明确区分三类样式的作用域与优先级。2.1 类选择器与标签选择器的创建路径差异在 Dreamweaver MX 中创建类选择器.btn-primary与标签选择器p的操作路径截然不同且直接影响后续复用效率类选择器必须通过“CSS 样式”面板 → “新建 CSS 规则” → 在“选择器类型”中选“类可应用于任何标签” → 输入名称如highlight→ 设置样式 → 点击“确定”。此时生成的 CSS 规则形如.highlight { background-color: #ffeb3b; font-weight: bold; }提示类名必须以字母开头不能含空格或特殊符号填空题第 34 题验证了此规则Layer1合法-Layer和Layer*1非法。应用时需选中文本或元素在“属性面板”中“CSS”下拉框选择该类名。标签选择器同样进入“新建 CSS 规则”但“选择器类型”选“标签”再从下拉列表中选择目标标签如h2。生成规则直接作用于所有h2元素h2 { color: #333; border-bottom: 2px solid #007bff; }注意Dreamweaver 会自动将此类规则插入head内的style标签而非外部.css文件。若需外链必须手动剪切代码并保存为.css再通过“链接外部样式表”命令关联。2.2 表格结构与语义化冲突的实操解法填空题第 16 题指出表格由“单元格、行和列”三部分组成但 Dreamweaver 的表格操作常导致 HTML 语义污染。例如为实现复杂布局而嵌套多层表格会生成大量无意义的trtd嵌套。此时应采用“表格转换为层”功能菜单栏修改 → 转换 → 表格转换为层但需警惕判断题第 2、8 题的警告“所有空单元格都不会转换为层”。实测验证如下创建一个 3×3 表格仅在中心单元格填入文字其余为空执行“表格转换为层”观察生成代码div idLayer1 styleposition:absolute; width:200px; height:115px; z-index:1; left: 100px; top: 100px; div idLayer2 styleposition:absolute; width:200px; height:115px; z-index:1; left: 0px; top: 0px; div idLayer3 styleposition:absolute; width:200px; height:115px; z-index:1; left: 0px; top: 0px; p中心文字/p /div /div /div关键发现空单元格未生成对应div但原表格的table、tr、td标签仍保留在代码中需手动删除。这解释了为何判断题第 2、8 题判为“×”——转换不彻底需人工清理冗余标签。2.3 框架集Frameset的物理文件依赖关系填空题第 8 题强调“制作框架网站需保存框架集文件”这是 Dreamweaver 框架开发的核心约束。框架集文件.html但内容为frameset本身不包含可视内容仅定义子框架的尺寸、源文件路径及边框属性。一个典型框架集代码如下!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN html headtitle主框架集/title/head frameset rows100,* frameborderyes border2 frame srcheader.html nametopFrame scrollingno frameset cols200,* frameborderyes border2 frame srcnav.html nameleftFrame frame srccontent.html namemainFrame /frameset /frameset /html重要参数说明rows100,*首行固定高度 100 像素剩余空间分配给第二行cols200,*左列固定宽度 200 像素剩余空间分配给右列frameborderyes显示框架边框设为no则隐藏srcheader.html每个frame的src必须指向独立 HTML 文件且这些文件必须与框架集文件同目录或按相对路径正确引用。若遗漏保存header.html、nav.html、content.html中任一文件浏览器将显示空白或错误提示这正是填空题第 8 题强调“还需保存框架集文件”的实践依据。3. 行为Behaviors与 JavaScript 的可视化封装从事件绑定到时间轴控制Dreamweaver 的“行为”面板本质是 JavaScript 的低代码封装层它将常用交互逻辑如弹出窗口、显示/隐藏层、跳转菜单抽象为“事件 动作”的二元组合。填空题第 14 题明确指出“一个行为由时间和动作两部分组成”此处的“时间”即事件触发时机Event而“动作”是预编译的 JS 函数。理解其映射关系才能突破判断题第 10 题“跳转菜单对应 onChange 事件”的机械记忆进入调试层面。3.1 跳转菜单Jump Menu的底层 JS 解析当在 Dreamweaver 中插入跳转菜单并设置行为后生成的 HTML 与 JS 代码如下form nameform1 idform1 select namejumpMenu idjumpMenu onchangeMM_jumpMenu(parent,this,0) option value请选择/option option valuepage1.html页面一/option option valuepage2.html页面二/option /select /form script typetext/javascript function MM_jumpMenu(targ,selObj,restore){ eval(targ.locationselObj.options[selObj.selectedIndex].value); if (restore) selObj.selectedIndex0; } /script参数说明targparent指定跳转目标窗口parent表示当前框架的父窗口_self为当前窗口_blank为新窗口selObj指向select元素对象restore0是否重置下拉框选中项0 不重置1 重置eval()执行字符串形式的 URL 跳转存在 XSS 风险故现代框架已弃用。3.2 时间轴Timeline动画的帧控制指令填空题第 17 题提到“播放时间轴”“停止时间轴”行为其对应 JS 函数为MM_timelinePlay()与MM_timelineStop()。一个典型时间轴动画需三步构建在“时间轴”面板中拖拽创建关键帧Keyframe设置元素位置/可见性为关键帧添加“改变属性”动作如left: 100px在页面加载或按钮点击时绑定行为。生成的控制代码示例!-- 播放时间轴 -- a href# onclickMM_timelinePlay(Timeline1); return false;播放/a !-- 停止时间轴 -- a href# onclickMM_timelineStop(Timeline1); return false;停止/a script typetext/javascript // Timeline1 定义由 Dreamweaver 自动生成 var Timeline1 [ [100, div1, left, 0], [200, div1, left, 200], [300, div1, visibility, hidden] ]; /script关键逻辑MM_timelinePlay()函数遍历Timeline1数组按时间戳毫秒执行属性变更。若时间轴长度不足如仅 200ms而动画需 300ms 完成则需按判断题第 15 题提示“向后拖动最后的关键帧”延长总时长否则动画被截断。3.3 库项目Library Item的 HTML 片段同步机制填空题第 15 题指出库项目用于“经常更新的页面元素”其技术本质是 Dreamweaver 维护的一个.lbi文件如header.lbi内容为纯 HTML 片段!-- header.lbi -- div idheader h1公司名称/h1 nav a hrefindex.html首页/a a hrefabout.html关于/a /nav /div当在网页中插入该库项目时Dreamweaver 生成如下代码!-- InstanceBeginEditable namemainContent -- div idheader h1公司名称/h1 nav a hrefindex.html首页/a a hrefabout.html关于/a /nav /div !-- InstanceEndEditable --同步原理Dreamweaver 将!-- InstanceBeginEditable --与!-- InstanceEndEditable --作为标记边界当库文件更新后执行“修改 → 库 → 更新当前页面”命令工具自动扫描所有页面定位标记内的 HTML 并替换为最新.lbi内容。若手动删除标记如误删InstanceEndEditable则该实例将脱离库管理成为独立 HTML——这解释了判断题第 3 题“库依赖于网站”的深层含义库文件路径由站点根目录决定脱离站点定义则无法解析.lbi相对路径。4. 表单Form与服务器端交互从 GET/POST 到 ASP Request 对象解析填空题第 5 题明确表单提交方法为 POST 和 GET但二者在 Dreamweaver 工作流中的配置差异极大。GET 方式将数据拼接在 URL 后如?name张三age20适用于搜索、筛选等非敏感操作POST 方式将数据置于 HTTP 请求体无长度限制且不暴露于地址栏适用于登录、订单提交等场景。而判断题第 20 题“删除文件无法用回收站还原”直指 Dreamweaver 站点管理的底层逻辑所有文件操作均直接作用于本地磁盘或远程 FTP 服务器不经过操作系统回收站。4.1 表单域Form Field的 HTML 结构与 Dreamweaver 属性映射填空题第 18 题列举表单对象其 HTML 标签与 Dreamweaver 属性面板的对应关系如下表表单对象HTML 标签Dreamweaver 插入路径关键属性设置文本字段input typetext插入 → 表单 → 文本字段“最多字符数”对应maxlength属性填空题第 39 题密码框input typepassword插入 → 表单 → 密码域无明文显示typepassword自动启用单选按钮input typeradio插入 → 表单 → 单选按钮“同一组”需共享name属性如namegender复选框input typecheckbox插入 → 表单 → 复选框每个独立name或同名数组namehobby[]列表/菜单selectoption.../option/select插入 → 表单 → 列表/菜单“列表值”对应option value...的value属性跳转菜单select onchange...插入 → 表单 → 跳转菜单自动生成onchange事件判断题第 10 题实操注意Dreamweaver 的“字段集”fieldset用于逻辑分组其标题由legend标签定义。若在属性面板中未设置“字段集标签”则生成空legend需手动补全。4.2 ASP 中 Request 对象的四大集合调用方式填空题第 9 题提及 ASP 交互语言其核心是Request对象它通过不同集合获取客户端数据% 获取 GET 请求参数URL 中 ?keyvalue Dim nameFromGet nameFromGet Request.QueryString(name) 获取 POST 提交数据表单 body Dim emailFromPost emailFromPost Request.Form(email) 获取 Cookie 值 Dim userPref userPref Request.Cookies(theme) 获取服务器变量如浏览器类型、IP 地址 Dim userAgent userAgent Request.ServerVariables(HTTP_USER_AGENT) %关键区别Request.QueryString仅对 GET 方法有效URL 中?后的键值对Request.Form仅对 POST 方法有效表单提交的name/value对Request.Cookies读取客户端发送的 Cookie 字符串Request.ServerVariables访问 HTTP 请求头及服务器环境变量。4.3 图像格式选择与 Dreamweaver 优化参数填空题第 22 题指出网页图像格式为.gif、.jpg、.pngDreamweaver 的“优化”面板文件 → 图像优化针对三者提供差异化压缩策略格式适用场景Dreamweaver 优化参数技术要点GIF图标、简单动画、透明背景“颜色”设为 256“损耗”为 0“透明度”启用支持 1 位透明全透明/不透明不支持半透明判断题第 6 题验证 256 色JPG照片、渐变图像“品质”设为 60-80“优化”勾选“模糊”慎用有损压缩不支持透明文件体积小PNG需要 Alpha 透明的图像如阴影、圆角“PNG-24”模式“透明度”启用无损压缩支持 256 级透明文件较大实操技巧在 Dreamweaver 中选中图像 → 属性面板 → “优化”按钮 → 弹出优化窗口。若导出 PNG 时发现边缘锯齿需确认原始图像已启用“消除锯齿”在 Fireworks 或 Photoshop 中处理Dreamweaver 本身不提供抗锯齿算法。5. 复习题中的高频陷阱与排错实战从判断题误判到选择题精析判断题与选择题是检验 Dreamweaver 工作流理解深度的试金石。许多题目表面考概念实则考操作细节。例如判断题第 17 题“Dreamweaver 是较好的图片处理软件”判为“×”其依据并非 Dreamweaver 功能弱而是其定位为网页集成开发环境IDE图像处理仅限基础裁剪、亮度调整专业修图必须依赖 Fireworks/Photoshop多项选择题第 3 题印证此点。以下聚焦三类高频陷阱的排错逻辑。5.1 层Layer坐标系统的绝对定位失效问题判断题第 11、19 题均涉及“子层能否完全处于母层之外”答案为“×”但原因常被误解为“Dreamweaver 限制”。实测发现当父层position: absolute子层若设置left: -50px其左边缘确会超出父层边界但 Dreamweaver 的“层面板”默认只显示父层内嵌套的层即z-index层级关系而视觉上“超出”的子层仍受父层overflow: hidden影响若父层设置了该属性。解决方案在层面板中右键子层 → “显示”确保可见检查父层 CSS 是否含overflow: hidden若有则改为visible若需精确控制直接编辑代码为子层添加position: absolute; top: 0; left: 0;并调整数值。5.2 超链接路径的三种类型混淆排错填空题第 13 题要求区分绝对路径、相对路径、文档相对路径。实际开发中最易出错的是“文档相对路径”Document-relative path其基准是当前 HTML 文件所在目录而非站点根目录。例如站点结构/index.html、/pages/about.html、/images/logo.png在about.html中链接logo.png绝对路径/images/logo.png以/开头从根目录算起相对路径../images/logo.png..返回上一级因about.html在/pages/下文档相对路径images/logo.pngDreamweaver 默认选项从about.html所在目录/pages/出发排错口诀打开 Dreamweaver → 选中链接 → 属性面板“链接”框右侧有三个图标地球、文件夹、文档分别对应绝对路径、站点根目录路径、文档相对路径。若链接失效先确认图标状态再检查路径字符串是否匹配实际文件位置。5.3 时间轴关键帧数量的动态扩展机制选择题第 33 题问“时间线上可添加多少个关键帧”答案为“D应时间线长度而定”这揭示了 Dreamweaver 时间轴的弹性设计。关键帧并非预设数量而是随动画需求动态插入。操作步骤在时间轴面板底部拖拽“时间线长度滑块”延长总时长如从 200 帧拉至 500 帧将播放头红色竖线拖至目标时间点如 300 帧点击目标图层左侧的“添加关键帧”按钮闪电图标在该帧设置元素属性如left: 300px。验证技巧若关键帧未生效检查“时间线”面板右上角是否启用“自动关键帧”Auto Keyframe按钮。未启用时必须手动点击“添加关键帧”启用后修改属性即自动生成关键帧。此细节正是判断题第 15 题“拖动关键帧延长时线”的操作前提。Dreamweaver 的“层面板”中当多个层堆叠时可通过点击层名左侧的眼睛图标控制显示/隐藏或拖拽层名上下调整z-index顺序——这是解决“层被盖住无法选择”判断题第 4 题的唯一可靠方法而非盲目尝试“CtrlZ 撤销”。本文还有配套的精品资源点击获取