课堂实录 HTML+CSS网页设计与布局课堂实录PDF电子书下载

第1篇 HTML篇 2

第1课 HTML入门 2

1.1什么是HTML 2

1.2HTML文件的基本结构 2

1.2.1HTML文件结构 2

1.2.2编写HTML文件注意事项 3

1.3HTML文件编写方法 4

1.3.1课堂小实例——使用记事本编写HTML页面 4

1.3.2课堂小实例——使用Dreamweaver编写HTML页面 5

1.4 HTML页面主体常用设置 5

1.4.1课堂小实例——定义网页背景色（bgcolor） 5

1.4.2课堂小实例——设置背景图片（background） 6

1.4.3课堂小实例——设置文字颜色（text） 7

1.4.4课堂小实例——设置链接文字属性 8

1.4.5课堂小实例——设置页面边距 10

1.5页面头部元素＜head＞和＜！DOCTYPE＞ 10

1.6页面标题元素＜title＞ 11

1.7元信息元素＜meta＞ 11

1.7.1课堂小实例——设置页面描述 12

1.7.2课堂小实例——定义页面的搜索方式 12

1.7.3课堂小实例——定义页面的跳转 13

1.7.4课堂小实例——设置页面关键字 14

1.8综合实战——创建基本的HTML文件 14

1.9课后练习 15

1.10本课小结 16

第2课 用HTML设置文字与段落格式 18

2.1插入其他标记 18

2.1.1课堂小实例——输入空格符号 18

2.1.2输入特殊符号 19

2.2设置文字的格式 19

2.2.1课堂小实例——设置字体（face） 19

2.2.2课堂小实例——设置字号（size） 20

2.2.3设置文字颜色（color） 21

2.2.4设置粗体、斜体、下划线（b、strong、em、u） 22

2.2.5设置上标与下标（sup、sub） 23

2.2.6多种标题样式的使用（＜h1＞～＜h6＞） 24

2.3设置段落的排版与换行 24

2.3.1给文字进行分段（p） 25

2.3.2段落的对齐属性（align） 25

2.3.3不换行标记（nobr） 26

2.3.4换行标记（br） 27

2.4水平线标记 28

2.4.1插入水平线（hr） 28

2.4.2设置水平线宽度与高度属性（width、size） 29

2.4.3设置水平线的颜色（color） 30

2.4.4设置水平线的对齐方式（align） 31

2.4.5水平线去掉阴影（noshade） 31

2.5设置滚动文字 32

2.5.1滚动文字标签——marquee 32

2.5.2滚动方向属性——direction 33

2.5.3滚动方式属性——behavior 34

2.5.4滚动速度属性scrollamount 35

2.5.5滚动延迟属性——scrolldelay 36

2.5.6滚动循环属性——loop 37

2.5.7滚动范围属性——width、height 37

2.5.8滚动背景颜色属性bgcolor 38

2.5.9滚动空间属性hspace、vspace 39

2.6综合实例——设置页面文本及段落 40

2.7课后练习 42

2.8本课小结 42

第3课 用HTML创建精彩的图像和多媒体页面 44

3.1网页中常见的图像格式 44

3.2插入图像并设置图像属性 44

3.2.1图像标记：img 44

3.2.2课堂小实例——设置图像高度（height） 45

3.2.3课堂小实例设置图像宽度（width） 46

3.2.4课堂小实例——设置图像的边框（border） 46

3.2.5课堂小实例设置图像水平间距（hspace） 47

3.2.6课堂小实例设置图像垂直间距（vspace） 48

3.2.7课堂小实例设置图像的对齐方式（align） 49

3.2.8课堂小实例——设置图像的替代文字（alt） 50

3.3添加多媒体文件 51

3.3.1课堂小实例——添加多媒体文件标记（embed） 52

3.3.2课堂小实例——设置自动运行（autostart） 52

3.4添加背景音乐 53

3.4.1课堂小实例——设置背景音乐（bgsound） 53

3.4.2课堂小实例——设置循环播放次数（loop） 54

3.5综合实例 55

3.5.1实例1——创建多媒体网页 55

3.5.2实例2——创建图文混合排版网页 56

3.6课后练习 57

3.7本课小结 58

第4课 用HTML创建超链接 60

4.1链接和路径 60

4.1.1超链接的基本概念 60

4.1.2课堂小实例——路径url 60

4.1.3课堂小实例——HTTP路径 61

4.1.4课堂小实例——FTP路径 62

4.1.5课堂小实例——邮件路径 62

4.2链接元素＜a＞ 63

4.2.1课堂小实例——指定路径href 63

4.2.2显示链接目标属性target 64

4.2.3链接的热键属性accesskey 65

4.3创建图像的超链接 67

4.3.1课堂小实例——创建链接区域元素＜map＞ 67

4.3.2链接区域的名称属性name 67

4.3.3定义鼠标敏感区元素＜area＞ 68

4.3.4链接的路径属性href、nohref 69

4.3.5鼠标敏感区坐标属性coords 70

4.4下载文件 71

4.5实战应用——给网页添加链接 72

4.6课后练习 74

4.7本课小结 75

第5课 使用HTML创建强大的表格 77

5.1创建并设置表格属性 77

5.1.1课堂小实例——表格的基本标记（table、tr、td） 77

5.1.2课堂小实例——表格宽度和高度（width、height） 78

5.1.3课堂小实例——表格的标题（caption） 78

5.1.4课堂小实例——表格的表头（th） 79

5.1.5课堂小实例——表格对齐方式（align） 80

5.1.6表格的边框宽度（border） 81

5.1.7表格边框颜色（bordercolor） 82

5.1.8单元格间距（cellspacing） 83

5.1.9单元格边距（cellpadding） 83

5.1.10表格的背景色（bgcolor） 85

5.1.11表格的背景图像（background） 86

5.2表格的结构标记 87

5.2.1课堂小实例——设计表头样式（thead） 87

5.2.2课堂小实例——设计表主体样式（tbody） 88

5.2.3课堂小实例——设计表尾样式（tfoot） 88

5.3综合实例使用表格排版网页 90

5.4课后练习 94

5.5本课小结 94

第6课 创建交换式表单 96

6.1表单元素＜form＞ 96

6.1.1课堂小实例——动作属性（action） 96

6.1.2课堂小实例——发送数据方式属性（method） 96

6.1.3课堂小实例——名称属性（name） 97

6.2表单的控件＜input＞ 97

6.2.1课堂小实例——文本域text 98

6.2.2课堂小实例——密码区域password 99

6.2.3课堂小实例——提交按钮submit 100

6.2.4课堂小实例——复位按钮reset 100

6.2.5课堂小实例——图像按钮image 101

6.2.6课堂小实例——单击按钮button 102

6.2.7课堂小实例——复选框checkbox 102

6.2.8课堂小实例——单选按钮radio 103

6.2.9课堂小实例——隐藏区域hidden 104

6.3综合实战——用户注册表单页面实例 105

6.4课后练习 109

6.5本课小结 110

第7课 HTML 5的新特性 112

7.1认识HTM 5 112

7.2HTML 5的新特性 114

7.3HTML 5与HTML 4的区别 115

7.3.1HTML 5的语法变化 115

7.3.2 HTML 5中的标记方法 115

7.3.3 HTML 5语法中的3个要点 116

7.3.4 HTML 5与HTML 4在搜索引擎优化的对比 116

7.4 HTML 5新增的元素和废除的元素 117

7.4.1课堂小实例——新增的结构元素 117

7.4.2课堂小实例——新增的块级的语义元素 118

7.4.3课堂小实例——新增的行内的语义元素 120

7.4.4课堂小实例——新增的嵌入多媒体元素与交互性元素 123

7.4.5课堂小实例——新增的input元素的类型 124

7.4.6废除的元素 125

7.5新增的属性和废除的属性 126

7.5.1新增的属性 126

7.5.2废除的属性 127

7.6课后练习 129

7.7本课小结 129

第8课 HTML 5的结构 131

8.1新增的主体结构元素 131

8.1.1课堂小实例——article元素 131

8.1.2课堂小实例——section元素 132

8.1.3课堂小实例——nav元素 133

8.1.4课堂小实例——aside元素 136

8.2新增的非主体结构元素 136

8.2.1课堂小实例——header元素 136

8.2.2课堂小实例——hgroup元素 137

8.2.3课堂小实例——footer元素 138

8.2.4课堂小实例——address元素 139

8.3课后练习 140

8.4本课小结 141

第2篇 CSS篇 143

第9课 CSS基础知识 143

9.1 CSS 3介绍 143

9.1.1 CSS基本概念 143

9.1.2 CSS的优点 143

9.1.3 CSS 3功能 144

9.1.4 CSS 3发展历史 145

9.2在HTML 5中使用CSS的方法 145

9.2.1行内样式 145

9.2.2内嵌样式 146

9.2.3链接样式 146

9.2.4导入样式 147

9.2.5优先级问题 147

9.3选择器类型 148

9.3.1课堂小实例——标签选择器 148

9.3.2课堂小实例——类选择器 148

9.3.3课堂小实例——ID选择器 149

9.4编辑和浏览CSS 151

9.4.1手工编写CSS 151

9.4.2 Dreamweaver编写CSS 151

9.5使用Dreamweaver设置CSS样式 152

9.5.1设置文本样式 152

9.5.2设置背景样式 153

9.5.3设置区块样式 155

9.5.4设置方框样式 156

9.5.5设置边框样式 157

9.5.6设置列表样式 158

9.5.7设置定位样式 159

9.5.8设置扩展样式 161

9.5.9过渡样式的定义 161

9.6实战应用——对网页添加CSS样式 161

9.7课后练习 164

9.8本课小结 164

第10课 CSS控制网页文本和段落样式 166

10.1通过CSS控制文本样式 166

10.1.1课堂小实例——字体font-family 166

10.1.2课堂小实例——字号font-size 167

10.1.3课堂小实例——加粗字体font-weight 168

10.1.4课堂小实例——字体风格font-style 169

10.1.5课堂小实例——小写字母转为大写字母font-variant 170

10.2通过CSS控制段落格式 171

10.2.1课堂小实例——单词间隔word-spacing 171

10.2.2课堂小实例——字符间隔letter-spacing 171

10.2.3课堂小实例——文字修饰text-decoration 172

10.2.4课堂小实例——垂直对齐方式vertial-align 173

10.2.5课堂小实例——文本转换text-transform 173

10.2.6课堂小实例——水平对齐方式text-align 174

10.2.7课堂小实例——文本缩进text-indent 175

10.2.8课堂小实例——文本行高line-height 175

10.2.9课堂小实例——处理空白white-space 176

10.3滤镜 177

10.3.1课堂小实例——不透明度alpha 178

10.3.2课堂小实例——动感模糊blur 179

10.3.3课堂小实例——对颜色进行透明处理chroma 180

10.3.4课堂小实例——设置阴影DropShadow 181

10.3.5课堂小实例——对象的翻转flipH、flipV 182

10.3.6课堂小实例——发光效果glow 182

10.3.7课堂小实例——灰度处理gray 183

10.3.8课堂小实例——反相invert 184

10.3.9课堂小实例X光片效果xray 184

10.3.10课堂小实例——波形滤镜wave 184

10.4实战应用——CSS字体样式综合演练 185

10.5课后练习 187

10.6本课小结 188

第11课 用CSS设计图片和背景 190

11.1设置网页的背景 190

11.1.1课堂小实例——背景颜色 190

11.1.2课堂小实例——背景图片 190

11.2设置背景图片的样式 191

11.2.1课堂小实例——背景图片重复 191

11.2.2课堂小实例——背景图片附件 192

11.2.3课堂小实例——背景图片定位 193

11.3设置网页图片的样式 195

11.3.1课堂小实例——设置图片边框 195

11.3.2课堂小实例——图文混合排版 197

11.4实战应用 198

11.4.1实战1——给图片添加边框 198

11.4.2实战2——图文绕排效果 199

11.5课后练习 201

11.6本课小结 202

第12课 用CSS制作实用的菜单和网站导航 204

12.1列表的使用 204

12.2列表样式控制 204

12.2.1课堂小实例——ul无序列表 204

12.2.2课堂小实例——ol有序列表 205

12.2.3课堂小实例——dl定义列表 207

12.2.4更改列表项目样式 208

12.3横排导航 209

12.3.1课堂小实例——文本导航 209

12.3.2课堂小实例——标签式导航 211

12.4课堂小实例——竖排导航 213

12.5实战应用 214

12.5.1实战1——实现背景变换的导航菜单 214

12.5.2实战2——利用CSS制作横向导航 215

12.5.3实战3——用背景图片实现CSS柱状图表 216

12.5.4实战4——树形导航菜单 217

12.6课后练习 220

12.7本课小结 220

第13课 CSS盒子模型与定位 222

13.1“盒子”与“模型”的概念 222

13.2 border 222

13.2.1课堂小实例——边框样式（border-style） 223

13.2.2属性值的简写形式 224

13.2.3课堂小实例——边框与背景 225

13.3课堂小实例——设置内边距（Padding） 226

13.4课堂小实例——设置外边距（margin） 227

13.5盒子的定位 228

13.5.1静态定位（static） 229

13.5.2课堂小实例——相对定位（relative） 229

13.5.3课堂小实例——绝对定位（absolute） 230

13.5.4课堂小实例——固定定位（fixed） 232

13.6盒子的浮动 233

13.6.1准备代码 233

13.6.2案例——设置第1个浮动的div 234

13.7课后练习 236

13.8本课小结 236

第14课 CSS＋DIV布局方法 238

14.1 CSS布局模型 238

14.1.1关于CSS布局 238

14.1.2流动布局模型 238

14.1.3浮动布局模型 240

14.1.4层布局模型 242

14.1.5高度自适应 244

14.2 CSS布局理念 245

14.2.1将页面用div分块 245

14.2.2设计各块的位置 246

14.2.3用CSS定位 246

14.3常见的布局类 247

14.3.1课堂小实例——列固定宽度 247

14.3.2课堂小实例——列自适应 248

14.3.3课堂小实例——两列固定宽度 249

14.3.4课堂小实例——两列宽度自适应 250

14.3.5课堂小实例——两列右列宽度自适应 251

14.3.6课堂小实例——三列浮动中间宽度自适应 252

14.3.7课堂小实例——三行二列居中高度自适应布局 253

14.4课后练习 255

14.5本课小结 255

第3篇 综合案例篇 257

第15课 设计制作企业网站 257

15.1企业网站设计概述 257

15.1.1企业网站分类 257

15.1.2企业网站主要功能 258

15.1.3页面配色与风格设计 259

15.1.4排版构架 260

15.2各部分设计 261

15.2.1页面的通用规则 261

15.2.2制作网站导航部分 262

15.2.3制作header右侧部分 265

15.2.4制作欢迎部分 272

15.2.5制作景点新闻部分 275

15.2.6制作景点介绍部分 279

15.2.7制作景点展示部分 282

15.2.8制作底部版权部分 288