Web前端设计与制作——HTML+CSS+jQuery 新世纪职业教育应用型人才培养培训创新教材

网站前端设计师目前是求职就业的热点，从技术角度来说，HTML、CSS和JavaScript是网站前端设计师的必修课，本书既有基础知识讲解又有商业案例应用，非常适合教学和自学使用。

本书系统完整地介绍了网站前台设计与制作所需技术基础和3个企业项目。技术基础包括网页布局基础、图文排版、网站导航、网站栏目、网站表单、框架网站等，企业项目包括企业宣传网站——舒适家居网、彩宇商贸公司网站、弘叶美容美发公司网站的主页设计与制作。本书从网站前台设计与制作项目开发角度出发，采用HTML+CSS+jQuery技术作为主体，以任务为单位，全面、系统地将网站项目开发中前台所需的常用技术、技巧进行逐一剖析，对于网站前台开发中所出现的各种技术难点给出合理的解决方案，指明实现的技术技巧，每一任务都有针对性的解决项目开发中的具体技术，避免了大量的知识堆积。本书提供了所有任务和项目的源代码、素材、习题及部分答案。
……

第1篇网页基础知识

第1章网页布局基础31.1Web前端技术概述3

1.1.1万维网与W3C3

1.1.2关于Web前端技术4

1.1.3网站与网页4

1.2认识HTML5

1.2.1关于HTML5

1.2.2HTML结构文件6

1.3CSS样式7

1.3.1关于CSS的调用7

1.3.2关于选择器10

1.3.3框模型介绍12

1.3.4CSS的定位13

1.4关于网页布局15

1.4.1网页布局的相关技术15

1.4.2网页布局的流程16

1.4.3网页布局的HTML技术17

1.5DIV+CSS页面布局基础17

1.5.1单栏式布局设计17

1.5.2二栏式布局设计19

1.5.3三栏式布局设计21

1.6任务拓展24

1.7本章小结24

习题25

第2章网页图文排版26

2.1设计图文版面26〖2〗〖4〗Web前端设计与制作——HTML+CSS+jQuery目录〖3〗2.1.1制作网页文字版面26

2.1.2制作网页图片版面34

2.1.3制作网页图文混排版面37

2.2插入多媒体44

2.2.1制作滚动的文本和图片页面44

2.2.2制作背景音乐页面49

2.2.3制作视频混排页面55

2.2.4制作动画混排页面59

2.3任务拓展62

2.4本章小结63

习题63

第3章链接与导航设计64

3.1关于超链接64

3.1.1理解超链接64

3.1.2理解路径65

3.1.3创建文件链接65

3.2利用文字实现超级链接66

3.2.1制作面包屑导航66

3.2.2制作水平栏导航67

3.2.3制作书签导航70

3.3利用图片实现超级链接74

3.3.1制作图片水平栏导航74

3.3.2制作图像局部导航75

3.4关于其他链接76

3.4.1下载文件的链接77

3.4.2电子邮件链接78

3.5任务拓展80

3.6本章小结80

习题80

第4章网页栏目设计82

4.1关于网页栏目82

4.1.1网站栏目的含义82

4.1.2网站栏目的策划82

4.2常用栏目设计83

4.2.1制作简易式栏目83

4.2.2制作典型式栏目87

4.3TAB式栏目设计91

4.4视频栏目设计93

4.5滚动式栏目设计95

4.5.1制作左右滚动式栏目96

4.5.2制作上下滚动式栏目102

4.6任务拓展105

4.7本章小结105

习题105

第5章表单页面设计106

5.1表单概述106

5.1.1表单的概念106

5.1.2创建表单106

5.1.3表单元素107

5.1.4表单布局112

5.2搜索表单设计113

5.2.1表单及其作用113

5.2.2制作百度搜索页面114

5.3跟帖评论表单设计116

5.3.1表单及其作用116

5.3.2制作跟帖评论页面116

5.4注册表单设计120

5.4.1表单及其作用120

5.4.2制作账户注册页面122

5.5任务拓展128

5.6本章小结128

习题129

第6章框架网页设计130

6.1关于框架网页130

6.2制作导航框架页131

6.2.1关于导航框架131

6.2.2制作导航框架131

6.3制作综合框架页135

6.3.1关于框架的嵌套135

6.3.2制作综合框架135

6.4制作浮动框架页139

6.4.1关于浮动框架139

6.4.2制作浮动框架140

6.5任务拓展142

6.6本章小结142

习题143

第7章应用jQuery144

7.1关于jQuery144

7.1.1jQuery的概念144

7.1.2jQuery的原理与运行机制144

7.1.3jQuery运行环境145

7.2利用jQuery设计网站导航146

7.2.1制作普通下拉菜单147

7.2.2制作级联菜单150

7.3利用jQuery设计Tab选项卡153

7.3.1横向选项卡设计153

7.3.2纵向选项卡设计155

7.4利用jQuery设计图片效果158

7.4.1制作图片切换效果158

7.4.2制作图片滚动效果161

7.5任务拓展163

7.6本章小结164

习题164

第8章移动产品网页设计165

8.1了解jQueryMobile165

8.1.1关于jQueryMobile165

8.1.2安装jQueryMobile166

8.2创建第一个移动产品网站167

8.2.1制作单容器页面结构网站167

8.2.2制作多容器页面结构网站170

8.2.3制作可折叠内容页面174

8.3网站导航栏设计177

8.3.1制作导航工具栏177

8.3.2制作固定导航栏181

8.4使用布局网格185

8.4.1两列布局185

8.4.2三列布局186

8.4.3多行多列布局186

8.5创建列表视图190

8.5.1制作文字列表190

8.5.2制作图文列表194

8.6表单设计196

8.7任务拓展203

8.8本章小结204

习题204

第2篇项目开发

第9章企业宣传网站——舒适家居网2079.1客户需求207

9.2网站分析207

9.2.1网页主题分析207

9.2.2网页风格定位208

9.3网站搭建209

9.3.1建立网站结构209

9.3.2建立网站主页210

9.4技术准备210

9.4.1网页DIV区域划分210

9.4.2网页效果图切片212

9.5添加网页结构和样式214

9.5.1建立网页主体轮廓214

9.5.2建立网页内容区域215

9.5.3建立网页页脚区域220

9.6常规添加Flash动画220

9.7本章小结221

第10章彩宇商贸公司网站222

10.1客户需求222

10.2网站分析222

10.2.1网页主题分析222

10.2.2网页风格定位223

10.3网站技术准备224

10.3.1网页效果图切片224

10.3.2网页DIV区域划分225

10.4添加网页结构和样式227

10.4.1建立网页主体227

10.4.2建立网页页头区域228

10.4.3建立网页内容区域231

10.4.4建立网页页脚区域236

10.5利用jQuery添加网页特效237

10.6本章小结238

第11章弘叶美容美发公司网站239

11.1客户需求239

11.2网站分析239

11.2.1网页主题分析239

11.2.2网页风格定位240

11.3网站技术准备240

11.3.1网页效果图切片241

11.3.2网页DIV区域划分242

11.4添加网页结构和样式243

11.4.1建立网页主体243

11.4.2建立网页页头区域244

11.4.3建立网页内容区域245

11.4.4建立网页页脚区域249

11.5利用jQuery添加网页特效249

11.6本章小结250

参考文献251