HTML+CSS+JavaScript网页制作三合一案例教程PDF电子书下载

第一章网站开发入门 1

本章导读 1

学习目标 1

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

案例说明 1

案例步骤 1

支撑知识点 4

一、网页、网站和主页 4

二、Internet， IP地址和域名 4

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

案例二 创建Dreamweaver站点 5

案例说明 5

案例步骤 6

支撑知识点 8

一、Dreamweaver工作界面介绍 8

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

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

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

案例说明 16

案例步骤 17

一、构建HTML结构 17

二、构建CSS样式 19

支撑知识点 20

一、HTML与CSS简介 20

二、HTML基础语法 21

三、网页的基本结构 23

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

五、网页的Web标准 26

本章总结 26

本章实训 27

第二章HTML标签与CSS样式基础 28

本章导读 28

学习目标 28

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

案例说明 28

案例步骤 29

支撑知识点 36

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

二、HTML列表 37

三、HTML图像 39

四、HTML超链接 40

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

案例说明 42

案例步骤 43

支撑知识点 45

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

二、选择器的类型 50

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

四、选择器的继承 54

本章总结 57

本章实训——制作个人主页 57

第三章 使用CSS设置文字效果 60

本章导读 60

学习目标 60

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

案例说明 60

案例步骤 60

支撑知识点 65

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

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

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

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

案例说明 69

案例步骤 69

支撑知识点 72

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

二、HTML常用符号 74

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

案例说明 74

案例步骤 75

支撑知识点 79

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

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

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

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

本章总结 81

本章实训——制作企业新闻网页 81

第四章 使用CSS设置图片效果和网页背景 84

本章导读 84

学习目标 84

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

案例说明 84

案例步骤 85

支撑知识点 88

一、设置图片和其他元素大小 88

二、设置图片和其他元素边框 89

三、设置图片的对齐方式 90

四、设置图文混排 91

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

案例说明 91

案例步骤 92

支撑知识点 95

一、设置背景颜色 95

二、设置背景图片 95

本章总结 97

本章实训——制作旅游景点介绍网页 97

第五章 制作导航栏并使用CSS美化 99

本章导读 99

学习目标 99

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

案例说明 99

案例步骤 99

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

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

案例说明 105

案例步骤 105

案例三 制作带片效果的横向导航栏 108

案例说明 108

案例步骤 109

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

案例说明 112

案例步骤 113

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

本章总结 120

本章实训——制作3个不同的导航菜单 121

第六章 制作表格并使用CSS美化 123

本章导读 123

学习目标 123

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

案例说明 123

案例步骤 123

支撑知识点 130

一、表格的HTML标签 130

二、合并和拆分单元格 131

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

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

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

案例说明 132

案例步骤 133

支撑知识点 140

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

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

本章总结 142

本章实训——设计两个表格 143

第七章 制作表单并使用CSS美化 144

本章导读 144

学习目标 144

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

案例说明 144

案例步骤 145

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

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

案例说明 162

案例步骤 163

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

本章总结 167

本章实训——制作快递信息输入页面 167

第八章CSS与浏览器兼容问题 169

本章导读 169

学习目标 169

案例一 无序列表的兼容性 169

案例二 浮动在IE下产生的双倍距离 171

案例三在IE 6中图片下方有空隙产生 173

案例四3像素问题 174

案例五 浏览器不能自适应高度 175

案例六margin值加倍问题 178

支撑知识点 180

一、浏览器兼容性介绍 180

二、解决浏览器兼容性问题的小技巧 181

本章总结 181

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

本章导读 183

学习目标 184

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

案例说明 184

案例步骤 184

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

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

案例说明 190

案例步骤 190

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

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

案例说明 196

案例步骤 196

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

本章总结 202

本章实训 203

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

二、制作企业简介页面 203

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

本章导读 205

学习目标 206

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

案例说明 206

案例步骤 206

支撑知识点 211

一、float和clear属性 211

二、浮动布局的原理 212

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

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

五、浮动布局应用技巧 216

案例二 制作搜索栏目 219

案例说明 219

案例步骤 219

案例三 制作新闻菜单 222

案例说明 222

案例步骤 223

案例四 制作新闻列表 226

案例说明 226

案例步骤 227

本章总结 232

本章实训 232

一、制作个人文集页面 232

二、制作博客网站主页 233

第十一章 CSS定位布局——制作企业网站首页 234

本章导读 234

学习目标 235

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

案例说明 235

案例步骤 235

支撑知识点 241

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

二、CSS相对定位 242

三、CSS绝对定位 243

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

五、网页布局经验总结 245

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

案例说明 246

案例步骤 246

案例三 制作新闻列表栏目 251

案例说明 251

案例步骤 251

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

案例说明 255

案例步骤 256

一、制作公司简介栏目 256

二、制作项目展示栏目 257

三、制作站内搜索栏目 258

本章总结 259

本章实训 259

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

二、制作学校网站主页 260

第十二章 JavaScript的应用 261

本章导读 261

学习目标 261

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

案例说明 261

案例步骤 262

支撑知识点 264

一、JavaScript简介 264

二、JavaScript的特点 264

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

案例二 制作跑马灯效果 266

案例说明 266

案例步骤 266

支撑知识点 271

一、数据类型和变量 271

二、表达式和运算符 272

三、函数 272

四、基本语句 273

五、事件 276

本章总结 277

本章实训 278

一、制作交换图像效果 278

二、屏蔽网页鼠标右键 279

第十三章 综合应用1——制作婚礼策划机构首页 281

本章导读 281

综合分析 282

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

一、整体布局分析 282

二、编写HTML代码 283

三、编写CSS代码 284

案例二 制作网页头部 288

一、模块分析 288

二、编写HTML代码 288

三、编写CSS代码 288

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

一、模块分析 289

二、编写HTML代码 289

三、编写CSS代码 289

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

一、制作左边登录部分 291

二、制作右边图片显示部分 293

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

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

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

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

一、模块分析 300

二、编写HTML代码 300

三、编写CSS代码 301

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

一、模块分析 302

二、编写HTML代码 303

三、编写CSS代码 303

案例八 制作网页底部 304

第十四章 综合应用2——制作海南旅游网首页 305

本章导读 305

案例分析 306

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

一、整体布局分析 306

二、编写HTML代码 307

三、编写CSS代码 308

案例二 制作网页头部 311

一、模块分析 311

二、编写HTML代码 312

三、编写CSS代码 312

案例三 制作主体内容的上面部分 314

一、制作今日三亚栏目 314

二、制作广告条部分 316

三、制作右边快捷按钮部分 316

案例四 制作主体内容的下面部分 317

一、制作旅游资讯栏目 318

二、制作推荐路线栏目 320

三、制作酒店推荐栏目 324

四、制作推荐景点栏目 327

案例五 制作友情链接栏目 330

一、模块分析 330

二、编写HTML代码 330

三、编写CSS代码 331

案例六 制作页面底部 332

一、模块分析 332

二、编写HTML代码 332

三、编写CSS代码 332