《网页设计与制作》网页设计基础（2）（举一反三考点练）-讲义

举一反三考点练 《网页设计与制作》网页设计基础-讲义 1. 熟悉网站建设完整流程 2. 熟悉主流网页制作工具对比 3. 掌握网页九大基本元素及设计要点 知识点一 网站建设完整流程 1.域名与空间准备 （1）域名注册 ① 先定网站主题，再选“好记、见名知意”的域名。 ② 国际 .com、国内 .com.cn 为先，全球唯一，先注先得。 ③ 绑定企业形象，保护网络无形资产。 （2）空间租用 ① 购买虚拟主机 / 云主机，获得可访问 IP。 ② 域名解析并绑定主机，访问域名即可进入站点。 2.规划与设计 （1）目标定位 ① 明确网站类型：个人、企业或门户。② 列出核心功能与目标用户群。③ 确定版式风格、信息架构。 （2）素材收集 ① 整理文字、图片、视频等原始内容。② 统一命名与规格，便于后续快速调用。 3.制作与建设 （1）前台页面 ① 用 Dreamweaver 等工具做可视化布局，保持简洁。 ② 强调用户体验：导航清晰、重点突出、加载迅速。 （2）后台程序 ① 根据功能选 PHP/ASP/JSP 语言编写逻辑。② 连接数据库，实现内容管理、会员、订单等模块。 4.测试与发布 （1）本地/线上测试 ① 功能、链接、表单、兼容性多轮检查。② 邀请真实用户试用，收集反馈并修正。 （2）正式上传 ① 通过 FTP 将文件传至虚拟主机。② 再次绑定域名，公网可访问即上线。 5.维护与推广 （1）日常运维 ① 定期备份、安全补丁、服务器监控。② 更新内容，保持信息鲜活。 （2）站外推广 ① SEO 优化：关键词、内链、地图、友好 URL。② 百度推广、社交媒体、多渠道引流。 （多项选择题）网站建设进入“测试与发布”阶段时，必须完成的工作有（ ） A. 本地功能与兼容性检查 B. 邀请真实用户试用并修正问题 C. 通过 FTP 上传文件到虚拟主机 D. 立即投放百度广告进行引流 【答案】ABC 【解析】D 属于“维护推广”阶段，测试发布阶段重点是查错、修正并上传至主机。 【要点】测试发布流程。 1.（单项选择题）下列关于域名注册的说法正确的是（ ） A. 域名注册后可终身使用无需续费 B. 注册域名时应优先选择难记但个性的字母组合 C. 域名需与网站主题呼应且“见名知意” D. 国内域名只能使用 .com.cn 一种后缀 【答案】C 【解析】好域名应易记、易联想；注册按年续费，后缀多样。 【要点】域名选择原则。 2.（单项选择题）网站规划阶段中，最先需要明确的是（ ） A. 后台数据库字段类型 B. 网站目标定位与核心功能 C. 网页背景颜色 D. 服务器操作系统品牌 【答案】B 【解析】规划首要是“做什么、给谁用”，技术细节在后续阶段确定。 【要点】规划顺序。 3.（多项选择题）下列措施有助于提升网站上线后访问量的有（ ） A. 站内关键词 SEO 优化 B. 社交媒体多渠道引流 C. 每周定期更新内容 D. 关闭用户评论功能减少维护量 【答案】ABC 【解析】关闭评论降低互动性，不利于流量增长；其余均为有效推广手段。 【要点】维护推广方法。 1.（填空题）把本地制作好的网站文件传送到虚拟主机的常用协议是________。 【答案】FTP（或 SFTP） 【解析】FTP 用于将网页文件从本地上传至服务器空间。 【要点】上传方式。 2.（填空题）为避免用户迷失，导航栏层级一般建议不超过________级。 【答案】3 【解析】层级过深会降低可寻性，讲义建议≤3 级。 【要点】导航设计。 3.（判断题）网站上线后只需备份一次，以后无需再定期备份。（ ） 【答案】× 【解析】数据与内容持续更新，需定期备份防止丢失。 【要点】日常运维。 · 域名空间：选易记域名→租虚拟主机→绑定解析。 · 规划设计：定类型功能→收素材→画架构草图。 · 制作建设：前台简洁版式→后台写程序连数据库。 · 测试发布：多设备查错→FTP上传→域名访问。 · 维护推广：定期备份更新→SEO+多渠道引流。 知识点二 主流网页制作工具对比 1.所见即所得类 （1）Dreamweaver ① 可视化+代码双视图，适合各级用户。 ② 站点管理、模板、语法提示一应俱全。 （2）Fireworks ① 专注 Web 图像与原型，矢量位图混合编辑。 ② 与 DW/PS/AI 无缝协作，一键导出 HTML 切片。 2.动画与多媒体 （1）Flash ① 矢量动画创作，文件小、效果炫。 ② 输出 SWF，需 Flash Player 支持；现 HTML5 替代趋势明显。 3.代码与高级开发 （1）HotDog Professional ① 早期代码型工具，向导丰富，适合嵌入复杂脚本。 （2）Visual Studio ① 微软旗舰，擅长 ASPX、无刷新 AJAX、Web 服务。 ② 高度集成调试器，仅适合高级开发者。 （3）JBuilder ① 专注 Java 与 JSP，企业级应用首选，学习曲线陡峭。 4.纯代码方案 （1）编辑器+手写 ① 使用 VS Code、Sublime 等轻量编辑器。 ② 完全手写 HTML、CSS、JS、后端脚本，控制精细，效率依赖经验。 （多项选择题）下列软件中，属于“所见即所得”网页制作工具的有（ ） A. Dreamweaver B. Fireworks C. HotDog Professional D. Visual Studio 【答案】AB 【解析】Dreamweaver 与 Fireworks 均提供可视化界面；HotDog 偏向代码+向导，VS 主要面向代码开发。 【要点】工具分类。 1.（单项选择题）Fireworks 最主要的优势是（ ） A. 编写 Java 后台代码 B. 矢量位图混合编辑并快速导出 Web 切片 C. 制作 3D 动画 D. 远程数据库管理 【答案】B 【解析】Fireworks 专注 Web 图像与原型设计，可一键导出 HTML 切片。 【要点】Fireworks 定位。 2.（单项选择题）当前替代传统 Flash 矢量动画的主流技术是（ ） A. Java Applet B. CSS3+JavaScript C. ASP 脚本 D. SWF 播放器 【答案】B 【解析】HTML5 时代多用 CSS3/JS 实现动画，Flash 已逐步淘汰。 【要点】动画技术趋势。 3.（多项选择题）关于“纯代码”开发方案，下列说法正确的有（ ） A. 使用 VS Code、Sublime 等轻量编辑器 B. 完全手写 HTML、CSS、JS，控制精细 C. 无需任何开发经验即可快速上手 D. 效率高度依赖个人编码经验 【答案】ABD 【解析】纯代码对新手门槛高，需熟悉语法与调试技巧。 【要点】纯代码特点。 1.（填空题）若需开发 ASPX 动态页面并集成 AJAX 无刷新功能，适合选用________开发工具。 【答案】Visual Studio 【解析】VS 对微软技术栈支持完善，内置调试器与组件库。 【要点】VS 优势。 2.（填空题）Dreamweaver 提供的“拆分”视图可同时显示________视图与________视图。 【答案】代码；设计（顺序可互换） 【解析】方便用户在可视化与源码间对照编辑。 【要点】DW 双视图。 3.（判断题）JBuilder 适合用于开发 PHP 网页，且学习曲线平缓。（ ） 【答案】× 【解析】JBuilder 专注 Java/JSP，学习门槛高，不用于 PHP。 【要点】JBuilder 定位。 · 可视化：Dreamweaver双视图；Fireworks切图导HTML。 · 动画：Flash做SWF，今改用CSS3/JS。 · 代码：HotDog向导多；VS写ASPX；JBuilder搞JSP。 · 轻量：VS Code+手写，速度快，控细节。 知识点三 网页九大基本元素及设计要点 1.标题（Title） （1）作用 ① 出现在浏览器标签，搜索引擎结果第一行。② 概括页面核心内容，吸引点击。 （2）设计 ① ≤60 字符，关键词靠前。② 全站唯一，避免重复堆砌。 2.Logo （1）功能 ① 品牌识别符号，可返回主页。② 位置固定：页眉左上角，高辨识度。 （2）设计 ① 矢量制作，保证缩放清晰。② 与整体配色、文化定位协调。 3.Banner （1）类型：宣传标语/活动海报；88×31 互换按钮；巨幅焦点图。 （2）设计 ① 黄金首屏展示，文案简短、视觉突出。 ② 可出租广告位，需兼顾加载速度。 4.导航栏 （1）结构：横排、竖排、下拉、面包屑、隐藏式等多种形态。 （2）原则 ① 层级不超过三级，文字简洁。 ② 高对比配色，当前页高亮，提升可寻性。 5.文本 （1）优势：信息精准、利于 SEO。 （2）技巧 ① 字号≥14px，行高 1.5–1.8。 ② 重点句加粗/变色，段前小标题增强扫描式阅读。 6.图像 （1）用途：插图、背景、按钮、产品展示。 （2）优化 ① 格式选 JPG（照片）、PNG（透明）、SVG（图标）。 ② 压缩体积，加 alt 属性提升无障碍与搜索识别。 7.动画 （1）形式：GIF、CSS3、JavaScript、SVG 动画取代传统 Flash。 （2）原则：① 时长 < 3 s，不循环干扰；提供关闭按钮。② 保证首屏加载速度，优先使用硬件加速 CSS。 8.表单 （1）组成：输入框、选择器、按钮、验证提示。 （2）体验：① 字段≤7 项，分步骤展示长表单。② 实时校验、错误红字+成功绿勾，减少用户挫败。 9.版权信息 （1）内容：Copyright © [年份] [主体] All Rights Reserved. （2）位置：页脚最下方，字号略小；链接至隐私政策与使用条款。 （多项选择题）关于网页标题（Title）的设计要点，下列说法正确的有（ ） A. 字符数宜≤60 B. 关键词尽量靠前 C. 全站可重复使用同一标题 D. 在浏览器标签与搜索结果首行展示 【答案】ABD 【解析】标题应全站唯一，避免堆砌重复；其余均符合优化要求。 【要点】标题设计规范。 1.（单项选择题）Logo 在网页中的常见位置是（ ） A. 页脚中央 B. 页眉左上角 C. 正文段落内 D. 侧边栏底部 【答案】B 【解析】页眉左上角为品牌高辨识度区域，且多设置为返回首页的链接。 【要点】Logo 位置。 2.（单项选择题）导航栏层级深度一般建议不超过（ ） A. 2 级 B. 3 级 C. 4 级 D. 5 级 【答案】B 【解析】层级过深降低可寻性，讲义建议≤3 级。 【要点】导航深度。 3.（多项选择题）下列关于网页图像优化的做法，正确的有（ ） A. 照片类内容选用 JPG 格式 B. 透明图标选用 PNG 格式 C. 随意使用未经压缩的 BMP D. 添加 alt 属性提升搜索与无障碍 【答案】ABD 【解析】BMP 体积大，不适合网络；其余均为标准优化手段。 【要点】图像优化。 1.（填空题）为减少用户挫败感，表单字段数一般控制在≤________项。 【答案】7 【解析】字段过多易降低完成率，长表单应分步展示。 【要点】表单体验。 2.（填空题）现代网页动画优先采用 CSS3、JavaScript 或 SVG，而传统________动画因需插件已逐步被淘汰。 【答案】Flash 【解析】Flash 需 Player 支持，移动端兼容性差，已被 HTML5 技术取代。 【要点】动画趋势。 3.（判断题）Banner 必须放置于首屏上方，且尺寸越大越好，以吸引用户点击。（ ） 【答案】× 【解析】Banner 应首屏展示但需兼顾加载速度与视觉平衡，并非越大越好。 【要点】Banner 设计原则。 · 标题：≤60字符，关键词靠前，唯一。 · Logo：页眉左上，矢量，可返首页。 · Banner：首屏大图，文案短，加载快。 · 导航：层级≤3，当前高亮，多排可选。 · 文本：≥14px，1.5行高，重点加粗色。 · 图像：JPG/PNG/SVG，压体积，加alt。 · 动画：GIF/CSS3，时长<3s，可关闭。 · 表单：字段≤7，实时校验，分步长。 · 版权：页脚©年份+主体，链隐私政策。 原创精品资源学科网独家享有版权，侵权必究！2 学科网（北京）股份有限公司 学科网（北京）股份有限公司 $