Hands-on exercises and applications provide students with a practical method to learning software skills as well as web design concepts. Exercises introduce basic skills then build to integrate Dreamweaver, Flash and Fireworks together. The full color illustrations visually support the concepts taught. The text is spiral bound for extra ease-of-use.
现代网页设计与前端开发实战指南 (不含 Adobe CS3 内容) 一本面向未来、聚焦于最新标准与实践的综合性网页构建圣经 在这个信息爆炸的时代，一个网站的质量直接决定了信息的传播效率和用户体验的成败。本书旨在摒弃过时的工具和技术，以HTML5、CSS3、JavaScript (ES6+) 为核心驱动力，结合现代前端框架的实践理念，为读者提供一套全面、深入且极具前瞻性的网页设计与开发解决方案。我们不关注特定软件的捆绑或过时版本的功能，而是专注于网页构建的基石、设计的美学原则以及交互的逻辑实现。 --- 第一部分：网页构建的基石——语义化与结构化 (HTML5 深度解析) 本部分将彻底颠覆你对 HTML 的传统认知，强调“结构即内容，内容即结构”的现代网页构建哲学。 第 1 章：超越标签的艺术：HTML5 核心语义与可访问性 (Accessibility, A11Y) 语义化复兴： 深入解析 `
`, ``, ``, ``, ``, `` 等新元素的内在含义和正确使用场景。如何利用这些结构来提升搜索引擎优化（SEO）和屏幕阅读器的兼容性。 表单的革命： 探索 HTML5 新增的输入类型（如 `email`, `url`, `date`, `range`），客户端验证机制（`required`, `pattern`），以及如何使用 `` 增强用户输入体验。 多媒体的集成： 掌握 `` 和 `` 标签的高级用法，包括响应式加载策略、自定义播放器控制以及流媒体兼容性处理。 可访问性优先 (A11Y)： 介绍 WAI-ARIA 规范的基础，如何通过 `role`, `aria-label`, `aria-live` 属性，确保残障用户能够顺畅地访问你的网站。本书将此视为现代网页开发的“基本职业道德”。 第 2 章：数据结构与网络存储：超越 Cookies 的范畴 本地存储的威力： 详细对比 `localStorage`、`sessionStorage` 和 `IndexedDB` 的异同点、容量限制和最佳应用场景。 Web Workers： 如何利用后台线程处理耗时任务，确保主线程的流畅运行，优化大型数据集处理时的用户界面响应速度。 离线优先 (Offline First) 的理念： 初步介绍 Service Workers 的概念和作用，为后续的 PWA (Progressive Web Apps) 打下坚实的基础。 --- 第二部分：视觉的魔法与响应的智慧 (CSS3 进阶与响应式设计) 本部分致力于将静态的 HTML 转化为富有表现力和动态适应性的用户界面，全面拥抱 CSS3 的强大功能。 第 3 章：CSS3 的核心引擎：布局、定位与视觉特效 现代布局的双雄：Flexbox 与 Grid： 深度剖析 Flexbox（一维布局）和 CSS Grid（二维布局）的特性、属性优先级和混合使用策略。通过大量实例演示如何轻松解决传统浮动布局的痛点。 选择器的力量： 掌握最新的伪类和伪元素（如 `:nth-child`, `::before`, `::placeholder`），以及属性选择器的精确匹配能力。 超越像素： 深入理解 `em`, `rem`, `vw`, `vh`, `ch` 等相对单位在构建自适应系统中的作用。 视觉增强技术： 精通 `box-shadow`, `text-shadow`, `border-radius` 的高级应用，以及 CSS 3D 变换（`transform: translateZ()`）和过渡（`transition`）的性能优化。 第 4 章：响应式设计 (RWD) 的系统化实践 移动先行 (Mobile First) 策略： 强调自下而上的设计流程，如何用最少的代码应对最常见的小屏幕设备。 媒体查询的精妙运用： 学习如何基于设备特性（如 `orientation`, `resolution`, `prefers-color-scheme`）而非固定的断点来应用样式。 流体排版与图像处理： 应用 `object-fit` 属性处理响应式图片，以及使用 `picture` 元素进行艺术指导（Art Direction）。 性能考量下的响应式： 如何使用 CSS Level 4 的新特性，例如容器查询（Container Queries，处于草案但趋势明显）来构建更健壮的组件级响应。 第 5 章：动画与性能优化：CSS 驱动的交互体验 关键帧动画 (`@keyframes`)： 学习如何创建复杂、流畅且可控的动画序列。 动画性能的秘密： 深入讲解 GPU 加速的概念，优先使用 `transform` 和 `opacity` 进行动画的原因，以及如何避免布局（Layout）和绘制（Paint）的重排。 CSS 预处理器 (Sass/Less 基础概念)： 介绍变量、混合宏 (Mixins) 和嵌套结构如何帮助管理大型 CSS 代码库，提升可维护性。 --- 第三部分：行为的掌控——JavaScript 交互逻辑 (ES6+ 现代标准) 本部分聚焦于使用 ECMAScript 2015 (ES6) 及后续版本编写高效、可维护的客户端脚本，实现动态的用户交互和数据处理。 第 6 章：ECMAScript 2015+ 的现代语法与核心概念 变量声明的变革： 区分 `let`, `const`, 和老式的 `var`，理解块级作用域（Block Scoping）。 函数与箭头函数： 掌握箭头函数的简洁语法，以及其在处理 `this` 绑定时的独特优势。 模块化开发： 深入学习 `import` 和 `export` 语句，如何使用 ES Modules 结构化和组织大型 JavaScript 项目。 解构赋值与展开/剩余运算符： 提升代码的简洁性和可读性。 第 7 章：异步编程与数据交互 回调地狱的终结：Promises (承诺)： 详细解释 Promise 的状态（Pending, Fulfilled, Rejected）以及 `.then()`, `.catch()`, `.finally()` 的链式调用。 Async/Await 语法糖： 如何用同步的语法结构优雅地处理异步逻辑，极大地简化数据获取流程。 现代数据获取：Fetch API： 替代老旧的 `XMLHttpRequest`，掌握 Fetch API 进行 RESTful 服务请求、处理 JSON 数据以及设置请求头和取消请求的技巧。 第 8 章：DOM 操作与事件模型 精确的 DOM 操作： 使用 `querySelector` / `querySelectorAll` 高效地选择元素，以及创建、插入、移动和删除节点的最佳实践。 事件委托 (Event Delegation)： 减少事件监听器的数量，提升大型列表中事件处理的性能。 自定义事件： 学习如何使用 `CustomEvent` 在应用程序的不同部分之间进行安全、松耦合的通信。 --- 第四部分：走向生产力——工具链与持续集成 现代网页开发不仅仅是编写代码，更关乎如何高效地管理、测试和部署代码。 第 9 章：开发环境的标准化与自动化 包管理器初探 (npm/Yarn)： 理解依赖管理在前端项目中的核心地位。 代码转译 (Transpilation) 概念： 介绍 Babel 的作用，如何让您使用最新的 JavaScript 语法兼容到旧版浏览器环境。 代码打包 (Bundling) 简介： 简要介绍 Webpack, Rollup 等工具的核心理念——如何将分散的模块、样式和资源文件合并优化，为生产环境做好准备。 版本控制 (Git 基础)： 强制要求读者掌握基本的 `commit`, `push`, `pull`, `branch` 操作，确保团队协作的流畅性。 第 10 章：设计系统与组件化思维 原子设计 (Atomic Design) 简介： 介绍如何将 UI 分解为原子、分子、组织、模板和页面的层级结构，构建可重用、可维护的 UI 组件。 设计与代码的桥梁： 强调设计规范（颜色、字体、间距）必须在设计工具（如 Figma/Sketch）和代码（CSS 变量）中保持一致。 网站性能度量： 介绍 Lighthouse 等工具，重点关注 FCP（首次内容绘制）和 LCP（最大内容绘制）指标，并提供针对性的优化策略。 --- 本书承诺： 本书内容完全基于最新的 W3C 标准和行业最佳实践编写。它不依赖任何特定的、可能在未来版本中被淘汰的软件套件，而是致力于教授网页构建的核心原理、思维模式和可持续的编码习惯。学完本书，您将具备独立设计、开发和优化任何现代响应式、高性能网站所需的所有基础能力。
