课堂实录 HTML+CSS网页设计与布局课堂实录PDF|Epub|txt|kindle电子书版本网盘下载

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

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第1篇 HTML篇2

第1课 HTML入门2

1.1什么是HTML2

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滚动文字标签——marquee32

2.5.2滚动方向属性——direction33

2.5.3滚动方式属性——behavior34

2.5.4滚动速度属性scrollamount35

2.5.5滚动延迟属性——scrolldelay36

2.5.6滚动循环属性——loop37

2.5.7滚动范围属性——width、height37

2.5.8滚动背景颜色属性bgcolor38

2.5.9滚动空间属性hspace、vspace39

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

2.7课后练习42

2.8本课小结42

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

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

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

3.2.1图像标记：img44

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课堂小实例——路径url60

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

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

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

4.2链接元素＜a＞63

4.2.1课堂小实例——指定路径href63

4.2.2显示链接目标属性target64

4.2.3链接的热键属性accesskey65

4.3创建图像的超链接67

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

4.3.2链接区域的名称属性name67

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

4.3.4链接的路径属性href、nohref69

4.3.5鼠标敏感区坐标属性coords70

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课堂小实例——文本域text98

6.2.2课堂小实例——密码区域password99

6.2.3课堂小实例——提交按钮submit100

6.2.4课堂小实例——复位按钮reset100

6.2.5课堂小实例——图像按钮image101

6.2.6课堂小实例——单击按钮button102

6.2.7课堂小实例——复选框checkbox102

6.2.8课堂小实例——单选按钮radio103

6.2.9课堂小实例——隐藏区域hidden104

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

6.4课后练习109

6.5本课小结110

第7课 HTML 5的新特性112

7.1认识HTM 5112

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编辑和浏览CSS151

9.4.1手工编写CSS151

9.4.2 Dreamweaver编写CSS151

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-family166

10.1.2课堂小实例——字号font-size167

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

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

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

10.2通过CSS控制段落格式171

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

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

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

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

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

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

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

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

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

10.3滤镜177

10.3.1课堂小实例——不透明度alpha178

10.3.2课堂小实例——动感模糊blur179

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

10.3.4课堂小实例——设置阴影DropShadow181

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

10.3.6课堂小实例——发光效果glow182

10.3.7课堂小实例——灰度处理gray183

10.3.8课堂小实例——反相invert184

10.3.9课堂小实例X光片效果xray184

10.3.10课堂小实例——波形滤镜wave184

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 border222

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个浮动的div234

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