Web编程基础(HTML+CSS)项目实战教程

模块1 网站的设计与策划 1
1．1 任务1：认识网页与网站 1
1．1．1 网页与网站的相关概念 2
1．1．2 服务器与客户端 3
1．2 任务2：认识网页开发技术 4
1．2．1 Web前端的概念 4
1．2．2 Web前端开发技术 5
1．3 任务3：设计策划网站 9
1．3．1 网站设计原则 9
1．3．2 网站制作流程 11
1．4 任务4：选择网页开发工具 12
1．4．1 编写工具 12
1．4．2 浏览工具 16
1．5 知识进阶 16
1．6 小结 18
1．7 实训任务 19
实训任务1：创建班级网站页面 19
实训任务2：制作班级学习交流页面 20
实训任务3：制作班级公告栏 21
模块2 制作图文并茂的新闻页面 24
2．1 任务1：创建网页结构 25
2．1．1 HTML文档结构 25
2．1．2 HTML基本语法 26
2．1．3 ＜head＞标记 27
2．1．4 任务实施 28
2．2 任务2：添加网页文本内容 29
2．2．1 标题与段落标记 30
2．2．2 水平线标记 32
2．2．3 换行标记 33
2．2．4 特殊字符 33
2．2．5 ＜div＞与＜span＞标记 34
2．2．6 任务实施 35
2．3 任务3：设置图文并茂的网页 35
2．3．1 插入图像 36
2．3．2 网页中支持的图像文件格式 37
2．3．3 任务实施 38
2．4 知识进阶 38
2．5 小结 42
2．6 实训任务 42
实训任务1：制作图文并茂的班级学习交流页面 42
实训任务2：制作图文并茂的班级公告栏页面 44
模块3 美化修饰网站的新闻页面 47
3．1 任务1：修饰文字排版 48
3．1．1 CSS概述 48
3．1．2 引入CSS的方法 49
3．1．3 CSS选择器 50
3．1．4 CSS特性 66
3．1．5 文字修饰 68
3．1．6 文本修饰 69
3．1．7 任务实施 71
3．2 任务2：控制元素属性 74
3．2．1 盒子模型 74
3．2．2 边框属性 74
3．2．3 边距属性 76
3．2．4 浮动 81
3．2．5 定位 92
3．2．6 任务实施 100
3．3 任务3：设置页面背景 102
3．3．1 背景的设置 102
3．3．2 背景的运用技术 104
3．3．3 任务实施 107
3．4 知识进阶 108
3．5 小结 113
3．6 实训任务 114
实训任务1：使用CSS渲染班级学习交流页面 114
实训任务2：使用CSS渲染班级公告栏页面 116
实训任务3：制作班级网站中的青春名片 117
实训任务4：制作图文环绕效果 119
实训任务5：制作班级图片新闻版块 121
模块4 制作网站的*新动态页面 124
4．1 任务1：制作*新动态列表条目 125
4．1．1 有序列表 125
4．1．2 无序列表 127
4．1．3 嵌套列表 128
4．1．4 定义列表 129
4．1．5 CSS列表修饰 130
4．1．6 任务实施 131
4．2 任务2：创建*新动态条目链接 134
4．2．1 创建超链接 135
4．2．2 链接对象 135
4．2．3 CSS超链接修饰 136
4．2．4 任务实施 139
4．3 知识进阶 141
4．4 小结 143
4．5 实训任务 144
实训任务1：制作班级新闻栏目 144
实训任务2：制作班级网站的软件大赛通知 145
实训任务3：制作班级学习园地 147
实训任务4：制作班级网站的导航条 150
实训任务5：制作班级网站的新闻栏目 152
模块5 制作网站的多媒体相册页面 159
5．1 任务1：创建多媒体相册 160
5．1．1 表格组成 160
5．1．2 表格属性 161
5．1．3 任务实施 163
5．2 任务2：调整相册行列结构 164
5．2．1 单元格属性 164
5．2．2 单元格合并 165
5．2．3 任务实施 167
5．3 任务3：设置相册布局 168
5．3．1 表格嵌套 168
5．3．2 表格布局 170
5．3．3 任务实施 173
5．4 任务4：设置多媒体效果 175
5．4．1 音频 175
5．4．2 视频 176
5．4．3 任务实施 178
5．5 知识进阶 178
5．6 小结 181
5．7 实训任务 181
实训任务1：制作班级网站的班级课程表 181
实训任务2：制作班级网站的学生信息登记表 184
实训任务3：制作班级网站的新闻栏目 185
实训任务4：制作班级网站的首页布局 187
模块6 制作网站的会员注册页面 191
6．1 任务1：制作基本信息区 192
6．1．1 表单基础 192
6．1．2 辅助标记 194
6．1．3 单行文本输入框 194
6．1．4 密码输入框 194
6．1．5 表单按钮 197
6．1．6 单选按钮 199
6．1．7 复选框 199
6．1．8 文件上传域 201
6．1．9 任务实施 202
6．2 任务2：制作信息收集区 205
6．2．1 多行文本域 205
6．2．2 下拉列表框 206
6．2．3 任务实施 208
6．3 任务3：制作法律条款区 209
6．3．1 浮动框架标记 209
6．3．2 任务实施 210
6．4 知识进阶 211
6．5 小结 219
6．6 实训任务 220
实训任务1：制作班级网站的调查问卷 220
实训任务2：制作班级网站的邮箱注册页面 224
实训任务3：制作电子邮箱的发送邮件页面 226
实训任务4：制作班级网站的用户注册页面 229
模块7 网站首页的设计制作 233
7．1 任务1：首页整体布局分析设计 234
7．1．1 整体布局分析 234
7．1．2 样式重置 234
7．1．3 全局CSS的定义 235
7．2 任务2：头部的实现 236
7．2．1 头部的布局分析和实现 236
7．2．2 Logo的实现 237
7．2．3 顶部导航的实现 237
7．2．4 登录注册的实现 238
7．3 任务3：中间主体内容的实现 239
7．3．1 主体内容的布局分析和实现 239
7．3．2 上部内容区的实现 240
7．3．3 左侧主要内容区的实现 240
7．3．4 右侧主要内容区的实现 242
7．4 任务4：底部页脚版权的实现 243
7．5 知识进阶 244
7．6 小结 247
7．7 实训任务 248
实训任务1：DIV+CSS布局班级网站首页 248
实训任务2：使用DIV+CSS布局左中右页面结构 252
实训任务3：使用HTML5中新增语义化标记进行页面布局 254
模块8 企业级项目综合应用 258
8．1 任务1：制作企业产品展示页面 258
8．1．1 任务描述 258
8．1．2 定义页面结构 259
8．1．3 添加页面样式 259
8．2 任务2：制作新闻详情页面 261
8．2．1 任务描述 261
8．2．2 整体布局分析的实现 262
8．2．3 头部的实现 263
8．2．4 内容部分的实现 265
8．2．5 版权信息部分的实现 270
8．3 任务3：制作用户登录页面 271
8．3．1 任务描述 271
8．3．2 定义页面结构 271
8．3．3 登录表单部分的实现 272
8．3．4 其他部分的实现 274
8．4 知识进阶 275
8．5 小结 279
8．6 实训任务 279
实训任务1：CSS精灵技术制作导航条 279
实训任务2：CSS制作图文版块中的三角形 282
参考文献 286