网页设计案例教程PDF电子书下载

第1章 网站开发入门 1

学习目标 1

案例一 了解网站开发流程 1

案例说明 1

案例步骤 1

支撑知识点 4

一、网页、网站和主页 4

二、Internet，IP地址和域名 5

三、WWW，URL，HTTP和浏览器 5

四、网页文件的制作方法 6

案例二 创建Dreamweaver站点 6

案例说明 6

案例步骤 6

支撑知识点 9

一、Dreamweaver工作界面介绍 9

二、新建和保存网页文档 15

三、打开、预览和关闭网页文档 17

案例三 制作简单的HTML＋CSS页面 18

案例说明 18

案例步骤 19

一、构建HTML结构 19

二、构建CSS样式 21

支撑知识点 22

一、HTML与CSS简介 22

二、HTML的标签构成 23

三、HTML网页文件的基本结构 25

四、静态页面与动态页面 28

五、网页的Web标准 28

本章总结 29

本章实训 29

第2章 HTML标签与CSS样式基础 31

学习目标 31

案例一 制作鲜花导购网页的结构——HTML标签 31

案例说明 31

案例步骤 32

支撑知识点 39

一、HTML标题、水平线、段落和换行 40

二、HTML列表 42

三、HTML图像 43

四、HTML超链接 45

案例二 修饰鲜花导购网页——CSS样式基础 47

案例说明 47

案例步骤 48

支撑知识点 51

一、在HTML页面中引入CSS样式表的方法 51

二、选择器的类型 55

三、选择器的集体声明、嵌套与优先级 59

四、选择器的继承 60

本章总结 63

本章实训 63

第3章 文字在网页中的应用 66

学习目标 66

案例一 制作个人博客首页——设置文字样式 66

案例说明 66

案例步骤 66

支撑知识点 72

一、CSS文字样式常用属性 73

二、网页中元素的长度单位 75

三、为网页元素设置颜色的技巧 75

案例二 制作个人博客子页——设置段落和其他文字样式 76

案例说明 76

案例步骤 77

支撑知识点 80

一、CSS段落和其他文字样式属性 80

二、HTML常用符号 82

案例三 制作个人博客排行榜——设置列表样式 83

案例说明 83

案例步骤 83

支撑知识点 88

一、CSS列表样式常用属性 88

二、清除列表的默认边距 90

三、〈div〉与〈span〉标签补充讲解 90

四、块级元素与行内元素补充讲解 91

本章总结 91

本章实训 91

第4章 图像在网页中的应用 94

学习目标 94

案例一 制作休闲文章页面——设置图像效果 94

案例说明 94

案例步骤 95

支撑知识点 99

一、设置图像和其他元素大小 100

二、设置图像和其他元素边框 100

三、设置图像的对齐方式 101

四、设置图文混排 102

案例二 制作童话故事页面——设置网页元素背景 103

案例说明 103

案例步骤 103

支撑知识点 106

一、设置背景颜色 106

二、设置背景图像 106

本章总结 109

本章实训 109

第5章 制作导航栏 111

学习目标 111

案例一 制作简单纵向导航栏 111

案例说明 111

案例步骤 111

支撑知识点——使用CSS的一些小技巧 116

案例二 制作简单横向导航栏 116

案例说明 116

案例步骤 117

案例三 制作带图像效果的横向导航栏 119

案例说明 119

案例步骤 119

案例四 制作带下拉菜单的横向导航栏 122

案例说明 122

案例步骤 122

支撑知识点——使用CSS的一些小技巧 129

本章总结 130

本章实训 130

第6章 表格在网页中的应用 132

学习目标 132

案例一 制作2012年世界杯分组表——构建和美化表格 132

案例说明 132

案例步骤 133

支撑知识点 139

一、表格的HTML标签 139

二、合并和拆分单元格 140

三、使用CSS设置表格或单元格颜色 141

四、使用CSS设置表格或单元格大小和边框 141

案例二 制作月历——使用CSS控制表格进阶 142

案例说明 142

案例步骤 142

支撑知识点 149

一、使用CSS设置网页元素的内边距和外边距 149

二、使用CSS合并表格边框 151

本章总结 152

本章实训 152

第7章 表单在网页中的应用 153

学习目标 153

案例一 制作注册页面——表单的HTML结构 153

案例说明 153

案例步骤 154

支撑知识点——常用的表单HTML标签 168

案例二 美化注册页面——使用CSS控制表单 171

案例说明 171

案例步骤 171

支撑知识点——使用CSS定义表单样式 174

本章总结 175

本章实训 175

第8章 CSS标准流布局——制作企业网站的新闻显示页面 177

学习目标 178

案例一 对页面进行整体布局——盒子模型 178

案例说明 178

案例步骤 178

支撑知识点——盒子模型的概念 182

案例二 制作页头部分——标准流布局概念 184

案例说明 184

案例步骤 184

支撑知识点——标准流的概念 190

案例三 制作新闻正文显示部分 190

案例说明 190

案例步骤 191

支撑知识点——margin使用注意事项 194

本章总结 197

本章实训 197

一、制作博客网站日志页面 197

二、制作企业简介页面 198

第9章 CSS浮动布局——制作企业网站新闻列表页面 199

学习目标 200

案例一 对页面进行整体布局——浮动布局概念 200

案例说明 200

案例步骤 200

支撑知识点 204

一、float和clear属性 204

二、浮动布局的原理 205

三、常用的浮动布局方法 207

四、清除浮动对布局的不良影响 209

五、浮动布局应用技巧 210

案例二 制作搜索栏目 213

案例说明 213

案例步骤 213

案例三 制作新闻菜单 217

案例说明 217

案例步骤 217

案例四 制作新闻列表 220

案例说明 220

案例步骤 221

本章总结 226

本章实训 226

一、制作个人文集页面 226

二、制作博客网站主页 226

第10章 CSS定位布局——制作企业网站首页 228

学习目标 229

案例一 对页面进行整体布局——CSS定位属性 229

案例说明 229

案例步骤 229

支撑知识点 234

一、认识CSS中的定位属性 234

二、CSS相对定位 237

三、CSS绝对定位 237

四、元素的堆叠顺序、溢出和剪裁 238

五、网页布局经验总结 240

案例二 制作图片新闻栏目 241

案例说明 241

案例步骤 241

案例三 制作集团新闻栏目 246

案例说明 246

案例步骤 246

案例四 制作企业首页的其他栏目 251

案例说明 251

案例步骤 251

一、制作公司简介栏目 251

二、制作项目展示栏目 252

三、制作站内搜索栏目 253

本章总结 255

本章实训 255

一、制作博客网站日志页面 255

二、制作学校网站主页 255

第11章 JavaScript的应用 257

学习目标 257

案例一 使用JavaScript实现关闭窗口功能 257

案例说明 257

案例步骤 258

支撑知识点 259

一、JavaScript简介 259

二、JavaScript的特点 260

三、在页面中添加脚本的方式 261

案例二 制作跑马灯效果 262

案例说明 262

案例步骤 262

支撑知识点 265

一、数据类型和变量 265

二、表达式和运算符 266

三、函数 267

四、基本语句 268

五、事件 271

本章总结 272

本章实训 272

一、制作交换图像效果 272

二、屏蔽网页鼠标右键 274

第12章 综合应用——制作婚礼策划机构首页 275

案例分析 276

案例一 搭建页面整体框架 276

一、整体布局分析 276

二、构建HTML结构 277

三、编写CSS代码 278

案例二 制作网页头部 282

一、模块分析 282

二、编写HTML代码 283

三、编写CSS代码 283

案例三 制作网页导航部分 284

一、模块分析 284

二、编写HTML代码 284

三、编写CSS代码 284

案例四 制作主体内容的上面部分 285

一、制作左侧登录部分 286

1．模块分析 286

2．编写HTML代码 286

3．编写CSS代码 287

二、制作右侧图像显示部分 288

案例五 制作主体内容的中间部分 292

一、制作左侧婚礼资讯部分 293

1．模块分析 293

2．编写HTML代码 293

3．编写CSS代码 294

二、制作右侧视频显示区 296

1．模块分析 296

2．编写HTML代码 296

3．编写CSS代码 296

案例六 制作主体内容的下面部分 297

一、模块分析 297

二、编写HTML代码 297

三、编写CSS代码 298

案例七 制作友情链接部分 299

一、模块分析 299

二、编写HTML代码 299

三、编写CSS代码 300

案例八 制作网页底部 301