HTML CSS网页设计与布局从入门到精通目录

时间：2023-02-10 15:36:02 | 来源：营销百科

时间：2023-02-10 15:36:02 来源：营销百科

HTML CSS网页设计与布局从入门到精通目录：第1部分　HTML基础篇

第1章　网页设计基础知识　3

1.1　基础概念　3

1.2　网页与HTML语言　4

1.3Web标准：结构、表现与行为　5

1.3.1　标准的重要性　5

1.3.2　'Web标准'概述　6

1.4　初步理解网页设计与开发的过程　7

1.4.1　基本任务与角色　7

1.4.2　明确网站定位　8

1.4.3　收集信息和素材　8

1.4.4　策划栏目内容　8

1.4.5　设计页面方案　9

1.4.6　制作页面　9

1.4.7　实现后台功能　9

1.4.8　整合与测试网站　10

1.5　与设计相关的技术因素　10

1.6　本章小结　12

第2章　HTML网页文档结构　13

2.1　HTML简介　13

2.1.1　创建第一个HTML文件13

2.1.2　HTML文件结构　15

2.2　简单的HTML案例　16

2.3　网页源文件的获取　18

2.3.1　直接查看源文件　19

2.3.2　保存网页　19

2.4　辅助：利用Dreamweaver快速建立基本文档　20

2.5　本章小结　24

第3章　用HTML设置文本和图像　25

3.1　文本排版　25

3.1.1　实现段落与段内换行(p和br)　25

3.1.2　设置标题(h1～h6)　27

3.1.3　使文字水平居中(center)　27

3.1.4　设置文字段落的缩进(blockquote)　29

3.2　设置文字列表　29

3.2.1　建立无序列表(ul)　29

3.2.2　建立有序列表(ol)　30

3.3　HTML标记与HTML属性　31

3.3.1　用align属性控制段落的水平位置　31

3.3.2　用bgcolor属性设置背景颜色　32

3.3.3　设置文字的特殊样式　34

3.3.4　设置文字的大小和颜色(font)　35

3.4　忘记过时的HTML标记和属性　35

3.5　特殊文字符号　36

3.6　在网页中使用图像(img)　38

3.6.1　网页中的图片格式　38

3.6.2　一个简单的图片网页　38

3.6.3　使用路径　39

3.7　用width和height属性设置图片的尺寸　41

3.8　用alt属性为图像设置替换文本　43

3.9　辅助：利用Dreamweaver设置文本和图像　43

3.10　辅助：利用Dreamweaver代码视图提高效率　47

3.10.1　代码提示　47

3.10.2　代码折叠　49

3.10.3　使用拆分视图对代码快速定位　49

3.11　本章小结　50

第4章　用HTML建立超链接(a)　51

4.1　设置基本文字超链接　51

4.1.1　URL的格式　51

4.1.2　URL的类型　52

4.2　设置页面内部的特定目标的链接　53

4.3　设置图片的超链接　54

4.4　设置电子邮件链接　54

4.5　设置以新窗口显示链接页面　55

4.6　创建热点区域　55

4.6.1　用HTML建立热点区域(map和area)　56

4.6.2　辅助：利用Dreamweaver精确定位热点区域　57

4.7　框架之间的链接　59

4.7.1　建立框架与框架集(frame和frameset)　59

4.7.2　用cols属性将窗口分为左右两部分　60

4.7.3　用rows属性将窗口分为上中下三部分　60

4.7.4　框架的嵌套　61

4.7.5　用src属性在框架中插入网页　61

4.7.6　用src属性在框架之间链接　62

4.7.7　创建嵌入式框架(iframe)　64

4.8　链接增多后网站的组织结构与维护　65

4.9　本章小结　66

第5章　用HTML创建表格　67

5.1　表格基本结构(table)　67

5.2合并单元格68

5.2.1　用colspan属性左右合并单元格　68

5.2.2　用rowspan属性上下合并单元格　69

5.3　用align属性设置对齐方式　70

5.4　用bgcolor属性设置表格背景色和边框颜色　71

5.5　用cellpadding属性和cellspacing属性设定距离　72

5.6　完整的表格标记(thead、tbody和tfoot)　73

5.7　需要抛弃的方法：用表格进行页面布局　75

5.8　本章小结　78

第2部分　CSS基础篇

第6章　(X)HTML与CSS概述　81

6.1　HTML与XHTML　81

6.1.1　追根溯源　81

6.1.2　DOCTYPE(文档类型)的含义与选择　82

6.1.3　XHTML与HTML的重要区别　83

6.2　(X)HTML与CSS　84

6.2.1　CSS标准　85

6.2.2　传统HTML的缺点　85

6.2.3　CSS的引入　86

6.2.4　如何编辑CSS　88

6.2.5　浏览器与CSS　89

6.3　本章小结　90

第7章　CSS核心基础　91

7.1　构造CSS规则　91

7.2　基本CSS选择器92

7.2.1　标记选择器　92

7.2.2　类别选择器　93

7.2.3　ID选择器　95

7.3　在HTML中使用CSS的方法　96

7.3.1　行内样式　96

7.3.2　内嵌式　97

7.3.3　链接式　98

7.3.4　导入样式　99

7.3.5　各种方式的优先级问题　100

7.4　本章小结　102

第8章　手工编写与借助工具　103

8.1　从零开始　103

8.2　设置标题　104

8.3　控制图片　105

8.4　设置正文　106

8.5　设置整体页面　106

8.6　对段落进行分别设置　107

8.7　完整代码　108

8.8　CSS的注释　109

8.9　辅助：使用Dreamweaver创建页面　109

8.10　辅助：在Dreamweaver中新建CSS规则　110

8.11　辅助：在Dreamweaver中编辑CSS规则　112

8.12　为图像创建CSS规则　114

8.13　本章小结　116

第9章　CSS的高级特性　117

9.1　复合选择器　117

9.1.1　'交集'选择器　117

9.1.2　'并集'选择器　118

9.1.3后代选择器120

9.2　CSS的继承特性　122

9.2.1　继承关系　122

9.2.2　CSS继承的运用　123

9.3　CSS的层叠特性　125

9.4　本章小结　126

第10章　用CSS设置文本样式　127

10.1　长度单位　127

10.2　颜色定义　128

10.3　准备页面　129

10.4　设置文字的字体　129

10.5　设置文字的倾斜效果　130

10.6　设置文字的加粗效果　131

10.7　英文字母大小写转换　132

10.8　控制文字的大小　133

10.9　文字的装饰效果　133

10.10　设置段落首行缩进　134

10.11　设置字词间距　135

10.12　设置段落内部的文字行高　136

10.13　设置段落之间的距离　136

10.14　控制文本的水平位置　137

10.15　设置文字与背景的颜色　138

10.16　设置段落的垂直对齐方式　138

10.16.1　使用line-height属性进行设置　138

10.16.2　更通用的解决方案　139

10.17　本章小结　140

第11章　用CSS设置图像效果　141

11.1　设置图片边框　141

11.1.1　基本属性　141

11.1.2　为不同的边框分别设置样式　142

11.2　图片缩放　144

11.3　图文混排　145

11.3.1　文字环绕　145

11.3.2　设置图片与文字的间距　146

11.4　案例——八大行星科普网页　147

11.5　设置图片与文字的对齐方式　150

11.5.1　横向对齐方式　150

11.5.2　纵向对齐方式　151

11.6　本章小结　154

第12章　用CSS设置背景颜色与图像　155

12.1　设置背景颜色　155

12.2　设置背景图像　156

12.3　设置背景图像平铺　157

12.4　设置背景图像位置　159

12.5　设置背景图片位置固定　162

12.6　设置标题的图像替换　163

12.7　使用滑动门技术的标题　166

12.8　本章小结　168

第3部分　CSS高级篇

第13章CSS盒子模型171

13.1　'盒子'与'模型'的概念探究　171

13.2　边框(border)　172

13.2.1　设置边框样式(border-style)　173

13.2.2　属性值的简写形式　174

13.2.3　边框与背景　176

13.3　设置内边距(padding)　177

13.4　设置外边距(margin)　178

13.5　盒子之间的关系　179

13.5.1　HTML与DOM　180

13.5.2　标准文档流　183

13.5.3　div标记与span标记　184

13.6　盒子在标准流中的定位原则　187

13.6.1　行内元素之间的水平margin　187

13.6.2　块级元素之间的竖直margin　188

13.6.3　嵌套盒子之间的margin　189

13.6.4　margin属性可以设置为负值　191

13.7　思考题　192

13.8　本章小结　196

第14章　盒子的浮动与定位　197

14.1　盒子的浮动　197

14.1.1　准备代码　197

14.1.2　案例1——设置第1个浮动的div　199

14.1.3　案例2——设置第2个浮动的div　199

14.1.4　案例3——设置第3个浮动的div　199

14.1.5　案例4——改变浮动的方向　200

14.1.6　案例5——再次改变浮动的方向　200

14.1.7　案例6——全部向左浮动　201

14.1.8　案例7——使用clear属性清除浮动的影响　202

14.1.9　案例8——扩展盒子的高度　203

14.2　盒子的定位　204

14.2.1　静态定位(static)　204

14.2.2　相对定位(relative)　205

14.2.3　绝对定位(absolute)　209

14.2.4　固定定位(fixed)　214

14.3　z-index空间位置　214

14.4　盒子的display属性　215

14.5　本章小结　216

第15章　用CSS设置表格样式　217

15.1　控制表格　217

15.1.1　表格中的标记　217

15.1.2　设置表格的边框　219

15.1.3　确定表格的宽度　222

15.1.4　其他与表格相关的标记　223

15.2　美化表格　224

15.2.1　搭建HTML结构　224

15.2.2　整体设置　225

15.2.3　设置单元格样式　226

15.2.4　斑马纹效果　227

15.2.5　设置列样式　227

15.3　设置鼠标指针经过时整行变色提示的表格　232

15.3.1　在Firefox和IE 7中实现鼠标指针经过时整行变色　232

15.3.2　在IE 6中实现鼠标指针经过时整行变色　233

15.3.3　最终合并代码　234

15.4　辅助：使用jQuery实现更多效果　236

15.4.1　用jQuery实现斑马纹效果　237

15.4.2　用jQuery实现'前3行'特殊样式　239

15.4.3　用jQuery实现渐变背景色表格效果　240

15.4.4　用jQuery实现鼠标指针经过变色效果　241

15.5　案例——日历　241

15.5.1　搭建HTML结构　241

15.5.2　设置整体样式和表头样式　244

15.5.3　设置日历单元格样式　245

15.6　本章小结　248

第16章　用CSS设置链接与导航菜单　249

16.1　丰富的超链接特效　250

16.2　创建按钮式超链接　252

16.3　制作荧光灯效果的菜单　253

16.3.1HTML框架254

16.3.2　设置容器的CSS样式254

16.3.3　设置菜单项的CSS样式　255

16.4　控制鼠标指针　257

16.5　设置项目列表样式　257

16.5.1　列表的符号　258

16.5.2　图片符号　260

16.6　创建简单的导航菜单　261

16.6.1　简单的竖直排列菜单　261

16.6.2　横竖自由转换菜单　264

16.7　设置图片翻转效果　265

16.8　应用滑动门技术的玻璃效果菜单　266

16.8.1　基本思路　266

16.8.2　设置菜单整体效果　267

16.8.3　使用'滑动门'技术设置玻璃材质背景　268

16.8.4　进一步解决的问题　269

16.9　鼠标指针经过时给图片增加边框　270

16.10　本章小结　272

第17章　用CSS建立表单　273

17.1　表单的用途和原理　273

17.2　表单输入类型　274

17.2.1　文本输入框　274

17.2.2　单选按钮　274

17.2.3　复选按钮　275

17.2.4　密码输入框　275

17.2.5　按钮　276

17.2.6　多行文本框　277

17.2.7　列表框　277

17.3　CSS与表单　278

17.3.1　表单中的元素　278

17.3.2　像文字一样的按钮　281

17.3.3　多彩的下拉菜单　283

17.4　案例——'数独'游戏网页　284

17.4.1　搭建基本表格　285

17.4.2　设置表格样式　286

17.4.3　加入文本输入框　287

17.4.4　设置文本输入框的样式　287

17.5　对齐文本框和旁边的图像按钮　289

17.6　本章小结　290

第18章　网页样式综合案例——灵活的电子相册　291

18.1　搭建框架　291

18.2　阵列模式　293

18.3　单列模式　298

18.4　改进阵列模式　301

18.5　IE 6兼容　304

18.6　双向联动模式　306

18.6.1　在Firefox中实现　306

18.6.2　IE 6兼容　311

18.6.3　改变方向　312

18.7　本章小结　314

第4部分　CSS布局篇

第19章　固定宽度布局剖析与制作　317

19.1　向报纸学习排版思想　317

19.2　CSS排版观念　319

19.2.1　两列布局　320

19.2.2　三列布局　320

19.2.3　多列布局　321

19.2.4　布局结构的表达式与结构图　321

19.3　圆角框　325

19.3.1　准备图像　325

19.3.2　搭建HTML结构　326

19.3.3　放置背景图像　328

19.3.4　设置样式并修复缺口　329

19.4　单列布局　330

19.4.1　放置第一个圆角框　331

19.4.2　设置圆角框的CSS样式331

19.4.3　放置其他圆角框　334

19.5　'1-2-1'固定宽度布局　335

19.5.1　准备工作　336

19.5.2　绝对定位法　337

19.5.3　浮动法　339

19.6　'1-3-1'固定宽度布局　341

19.7　'1-((1-2) 1)-1'固定宽度布局　343

19.8　本章小结　344

第20章　变宽度网页布局剖析与制作　345

20.1　'1-2-1'变宽度网页布局　345

20.1.1　'1-2-1'等比例变宽布局　345

20.1.2　'1-2-1'单列变宽布局　348

20.2　'1-3-1'宽度适应布局　352

20.2.1　'1-3-1'三列宽度等比例布局　352

20.2.2　'1-3-1'单侧列宽度固定的变宽布局　352

20.2.3　'1-3-1'中间列宽度固定的变宽布局　353

20.2.4　进一步的思考　355

20.2.5　'1-3-1'双侧列宽度固定的变宽布局　356

20.2.6　'1-3-1'中列和侧列宽度固定的变宽布局　358

20.3　变宽布局方法总结　359

20.4　分列布局背景色问题　360

20.4.1　设置固定宽度布局的列背景色　360

20.4.2　设置特殊宽度变化布局的列背景色　364

20.4.3　设置单列宽度变化布局的列背景色　364

20.5　CSS排版与传统的表格方式排版的分析　365

20.6　浏览器的兼容性问题　368

20.7　CSS布局页面的调试技巧　368

20.7.1　技巧1：设置背景色或者边框，确定错误范围　369

20.7.2　技巧2：删除无关代码，暴露核心矛盾　369

20.7.3　技巧3：先用Firefox调试，然后使它兼容IE　369

20.7.4　技巧4：善于利用工具，提高调试效率　370

20.7.5　技巧5：善于提问，寻求帮助　370

20.8　本章小结　370

第21章　网页布局综合案例——儿童用品网上商店　371

21.1　案例概述　371

21.2　内容分析　372

21.3　HTML结构设计　374

21.4　原型设计　377

21.5　页面方案设计　380

21.6　布局设计　383

21.6.1　整体样式设计　383

21.6.2　页头部分　384

21.6.3　内容部分　386

21.6.4　页脚部分　389

21.7　细节设计　389

21.7.1　页头部分　389

21.7.2　内容部分　395

21.7.3　左侧的主要内容列　395

21.7.4　右边栏　398

21.8　CSS布局的优点　402

21.9　交互效果设计　403

21.9.1　次导航栏　403

21.9.2　主导航栏　404

21.9.3　账号区　404

21.9.4　图像边框　405

21.9.5　产品分类　407

21.10　遵从Web标准的设计流程　407

21.11　从'网页'到'网站'　408

21.11.1　历史回顾　408

21.11.2　不完善的办法　408

21.11.3　服务器出场　409

21.11.4　CMS出现　409

21.11.5　具体操作　409

21.12　 本章小结　410

附录A　网站发布与管理　411

A.1　在Internet上建立自己的Web站点　411

A.1.1　制作网站内容　411

A.1.2　申请域名　411

A.1.3　信息发布　411

A.2　租用虚拟主机空间412

A.2.1　了解基本的技术名词　412

A.2.2　选择和租用虚拟主机　413

A.3　向服务器上传网站内容　414

A.3.1　使用Dreamweaver上传文件　414

A.3.2　使用IE浏览器上传文件　415

A.3.3　使用专业FTP工具上传文件　416

A.4　网站管理　418

A.4.1　修改密码　418

A.4.2　集团邮箱管理　419

A.4.3　注意事项　420

附录B　CSS英文小字典　421