、等。 示例：

欢迎来到我的网页

这是一个段落。

2. CSS（层叠样式表）
CSS用于控制网页的样式，包括布局、颜色、字体等。可以通过内联、内部和外部样式表三种方式引入。

示例：
body { background-color: #f0f0f0; }
h1 { color: #333; font-size: 24px; }

1. 盒模型与布局

• 盒模型：每个元素都是一个矩形盒子，包括内容、内边距、边框和外边距。
• 布局方式：浮动（float）、定位（position）、弹性盒子（flexbox）、网格（grid）。

四、网页设计流程

1. 需求分析：明确网站目标、受众和内容。
2. 信息架构：规划网站结构和导航。
3. 原型设计：绘制线框图或使用工具制作交互原型。
4. 视觉设计：确定色彩、字体、图标等视觉元素。
5. 前端开发：将设计稿转换为HTML/CSS代码。
6. 测试与上线：在不同设备和浏览器中测试，确保兼容性，然后发布。

五、色彩与字体设计

1. 色彩理论

• 色轮：了解原色、间色、复色。
• 配色方案：单色、互补、 analogous、三角对立等。
• 色彩心理学：不同颜色引发的情感反应。

1. 字体选择

• 可读性：选择易读的字体，避免过于花哨。
• 字体搭配：通常使用2-3种字体，注意对比与和谐。
• 网页安全字体：如Arial, Helvetica, Times New Roman等。

六、响应式设计

1. 视口设置：
2. 媒体查询：根据屏幕尺寸应用不同样式。
@media (max-width: 768px) { ... }

1. 流式布局：使用百分比而非固定像素。
2. 弹性图片：img { max-width: 100%; height: auto; }
3. 移动优先：先设计移动端，再逐步增强到桌面端。

七、常用工具与资源

1. 设计工具：Adobe XD, Sketch, Figma, Photoshop。
2. 代码编辑器：VS Code, Sublime Text, Atom。
3. 框架与库：Bootstrap, Tailwind CSS, jQuery。
4. 图标与图片：Font Awesome, Unsplash, Pexels。
5. 学习资源：MDN Web Docs, W3Schooles, CSS-Tricks。

八、实战案例：创建一个个人简介网页
步骤：

1. 规划内容：姓名、照片、简介、联系方式。
2. 设计布局：采用居中卡片式布局。
3. 编写HTML结构。
4. 使用CSS美化：背景渐变、圆角、阴影。
5. 添加响应式：适应手机屏幕。

示例代码（简化）：
...

九、与进阶
本教程介绍了网页设计的基础知识和流程，但学无止境。建议继续深入学习JavaScript、前端框架、用户体验设计等，并多实践，参考优秀网站，不断提升设计水平。

附录：术语表

• HTML：超文本标记语言
• CSS：层叠样式表
• 响应式设计：适应不同设备的网页设计方法
• 线框图：低保真原型，展示布局结构

（注：本内容可制作成PPT，每部分可作为一页或几页。）