目　录




工作任务1
网站项目分析 1
【知识目标】 1
【技能目标】 1
【素养目标】 1
1.1　网站基础知识 1
1.1.1　网页简介 1
1.1.2　网页设计 2
1.1.3　网站需求分析 4
1.2　博客网站项目分析 9
1.2.1　博客网站介绍 9
1.2.2　设计需求分析 10
1.2.3　完成项目需求分析 15
1.3　校园网站项目分析 16
1.3.1　校园网站介绍 16
1.3.2　设计需求分析 16
1.3.3　完成项目需求分析 17
【任务总结】 18
1.4　拓展实训 18
1.5　AI技能拓展——AI助力网站
需求分析 18

工作任务２
网站项目设计 19
【知识目标】 20
【技能目标】 20
【素养目标】 20
2.1　网站项目设计基础知识 20
2.1.1　网站总体规划设计 20
2.1.2　网站建设方案介绍 20
2.1.3　网站建设方案示例 23
2.1.4　网站项目实施 26
2.2　博客网站项目设计 27
2.2.1　博客网站建站目的及面向群体 27
2.2.2　博客网站建站内容 28
2.3　校园网站项目设计 29
2.3.1　校园网站建站目的及面向群体 29
2.3.2　校园网站建站内容 29
【任务总结】 30
2.4　拓展实训 30
2.5　AI拓展技能——AI辅助网站
项目规划与设计 31

工作任务３
建立网站站点 30
【知识目标】 32
【技能目标】 32
【素养目标】 32
3.1　网站站点基础知识 32
3.1.1　网站站点的概念及作用 32
3.1.2　建立网站站点 33
3.1.3　Dreamweaver CC 2019介绍 34
3.2　建立博客网站站点 42
3.2.1　博客网站站点目录结构设计 42
3.2.2　博客网站站点搭建 42
3.3　建立校园网站站点 44
3.3.1　校园网站站点目录结构设计 45
3.3.2　校园网站站点搭建 45
【任务总结】 47
3.4　拓展实训 48
3.5　AI技能拓展——AI辅助建立
网站站点 48

工作任务４
网站主页设计与制作 47
【知识目标】 49
【技能目标】 49
【素养目标】 49
4.1　网页设计与制作基础知识 49
4.1.1　Photoshop图像处理基础 49
4.1.2　HTML基础 59
4.1.3　CSS介绍 70
4.2　博客网站主页设计与制作 89
4.2.1　博客网站主页效果图制作 89
4.2.2　切片与优化 100
4.2.3　博客网站主页布局及实现 102
4.3　校园网站主页设计与制作 115
4.3.1　校园网站主页效果图制作 115
4.3.2　切片与优化 122
4.3.3　校园网站主页布局及实现 123
【任务总结】 130
4.4　拓展实训 130
4.5　AI技能拓展——AI辅助主页
设计与制作 131

工作任务5
网站子页设计与制作 129
【知识目标】 132
【技能目标】 132
【素养目标】 132
5.1　网站子页设计与制作基础
知识 132
5.1.1　超链接 132
5.1.2　CSS规则 135
5.1.3　模板介绍 142


5.2　博客网站子页设计与制作 145
5.2.1　博客网站子页效果图设计与
制作 145
5.2.2　切片与优化 149
5.2.3　博客网站子页布局及实现 150
5.3　校园网站子页设计与制作 158
5.3.1　校园网站子页效果图设计与
制作 1p58
5.3.2　切片与优化 162
5.3.3　校园网站子页布局及实现 163
【任务总结】 170
5.4　拓展实训 170
5.5　AI技能拓展——AI辅助子页
设计与制作 171

工作任务６
网站发布 170
【知识目标】 172
【技能目标】 172
【素养目标】 172
6.1　网站发布基础知识 172
6.1.1　网站发布流程 172
6.1.2　域名介绍 173
6.2　博客网站发布 174
6.2.1　博客网站发布流程 174
6.2.2　博客网站域名选择 175
6.3　校园网站发布 175
6.3.1　校园网站发布流程 175
6.3.2　校园网站域名选择 175
【任务总结】 176
6.4　拓展实训 176
6.5　AI技能拓展——AI辅助网站
发布与优化 176