新書推薦：
《
海外中国研究·未竟之业：近代中国的言行表率
》
售價：HK$
135.7
《
我们为何建造（城市与生态文明丛书）
》
售價：HK$
89.7
《
算法经济 ： 商业逻辑与人类生活的智能演进（生动呈现AI与算法的创新应用与商业价值）
》
售價：HK$
79.4
《
家书中的百年史
》
售價：HK$
79.4
《
偏爱月亮
》
售價：HK$
45.8
《
生物安全与环境
》
售價：HK$
56.4
《
泥土：文明的侵蚀（城市与生态文明丛书）
》
售價：HK$
84.0
《
医用化学（第三版）
》
售價：HK$
57.3
|
| 編輯推薦： |
|
《实战从入门到精通》系列图书是专门为职场办公初学者量身定做的一套学习用书，整套书涵盖办公、网页设计等方面。整套书具有以下特点：前沿科技无论是Office办公，还是Dreamweaver CC、Photoshop CC，我们都精选较为前沿或者用户群*的领域推进，帮助大家认识和了解*动态权威的作者团队组织国家重点实验室和资深应用专家联手编著该套图书，融合丰富的教学经验与优秀的管理理念学习型案例设计以技术的实际应用过程为主线，全程采用图解和同步多媒体结合的教学方式，生动、直观、全面地剖析使用过程中的各种应用技能，降低难度提升学习效率
|
| 內容簡介： |
本书以零基础讲解为宗旨，用实例引导读者深入学习，采取基础知识核心技术高级应用行业应用案例全能拓展的讲解模式，深入浅出地讲解Dreamweaver CC网页设计的各项技术及实战技能。
本书第1篇基础知识主要讲解网页设计与制作基础、认识Dreamweaver CC、创建网页中的文本；第2篇核心技术主要讲解使用图像和多媒体、HTML5新增元素与属性速览、设计网页超链接、表格的应用、使用网页表单和行为、使用模板和库；第3篇高级应用主要讲解使用CSS样式表美化网页、网页布局典型范例、在网页中编写JavaScript、网站的发布、网站配色与布局；第4篇行业应用案例主要讲解制作电子商务类网页、制作网上音乐类网页、制作休闲娱乐类网页、制作移动设备类网页的方法；第5篇全能拓展主要讲解网站优化与推广、网站安全与防御。
本书适合任何想学习Dreamweaver CC设计网页的人员，无论您是否从事计算机相关行业，无论您是否接触过Dreamweaver CC，通过学习均可快速掌握Dreamweaver CC设计网页的方法和技巧。
|
| 關於作者： |
|
刘玉红老师在新疆大学主要负责计算机系的毕业生实训，善于引导学生学习，让学校所学的知识和社会的需求很好地衔接，同时具有丰富的教学经验和开发经验。曾做项目：电子货币交易系统、 B2C 电子商务平台和众多企业等。
|
| 目錄：
|
目录
第1篇 基础知识
第1章 开启网页设计之路网页设计与制作基础
1.1 认识网页和网站 4
1.1.1 什么是网页 4
1.1.2 什么是网站 5
1.1.3 网站的种类和特点 5
1.2 网页的相关概念 6
1.2.1 因特网与万维网 6
1.2.2 浏览器与HTML 6
1.2.3 URL、域名与IP地址 7
1.2.4 上传和下载 8
1.3 网页的HTML构成 8
1.3.1 文档标签 9
1.3.2 头部标签 9
1.3.3 主体标签 9
1.4
HTML常用标签 9
1.5 实战演练制作日程表 21
1.6 高手甜点 25
1.7 跟我练练手 26
第2章 磨刀不误砍柴工认识Dreamweaver CC7
2.1 走进Dreamweaver
CC 28
2.1.1 案例1安装Dreamweaver
CC 28
2.1.2 案例2启动Dreamweaver
CC 29
2.2
Dreamweaver CC的工作环境 30
2.2.1 认识Dreamweaver CC的工作界面 30
2.2.2 熟悉【插入】面板组 32
2.3 体验Dreamweaver
CC的新增功能 34
2.4 认识站点 36
2.5 创建站点 36
2.5.1 案例3创建本地站点 37
2.5.2 案例4创建远程站点 37
2.6 管理站点 38
2.6.1 案例5打开站点 38
2.6.2 案例6编辑站点 39
2.6.3 案例7删除站点 39
2.6.4 案例8复制站点 40
2.7 操作站点文件及文件夹 40
2.7.1 案例9创建文件夹 40
2.7.2 案例10创建文件 41
2.7.3 案例11文件或文件夹的移动和复制 41
2.7.4 案例12删除文件或文件夹 42
2.8 实战演练1创建本地站点 42
2.9 实战演练2创建站点文件和文件夹 43
2.10
高手甜点 45
2.11
跟我练练手 46
第3章 网页内容之美创建网页中的文本
3.1 网页设计的基本操作 48
3.1.1 案例1新建网页 48
3.1.2 案例2保存网页 48
3.1.3 案例3打开网页 49
3.1.4 案例4预览网页 49
3.2 设置页面属性 50
3.3 用文字充实网页 54
3.3.1 案例5插入文字 54
3.3.2 案例6设置字体 55
3.3.3 案例7设置字号 57
3.3.4 案例8设置字体颜色 57
3.3.5 案例9设置字体样式 58
3.3.6 案例10编辑段落 59
3.3.7 案例11检查拼写 64
3.3.8 案例12创建项目列表 65
3.4 特殊文本的操作 67
3.4.1 案例13插入换行符 67
3.4.2 案例14插入水平线 67
3.4.3 案例15插入日期 68
3.4.4 案例16插入特殊字符 69
3.4.5 案例17插入注释 70
3.5 实战演练设置主页中的跟踪图像 71
3.6 高手甜点 73
3.7 跟我练练手 74
第2篇 核心技术
第4章 有图有真相使用图像和多媒体
4.1 选择适合网页中图像的格式 78
4.2 用图像美化网页 79
4.2.1 案例1插入图像 79
4.2.2 案例2图像属性设置 80
4.2.3 案例3图像的对齐方式 82
4.2.4 案例4插入鼠标经过图像 83
4.2.5 案例5插入图像占位符 84
4.3 在网页中插入多媒体 85
4.3.1 案例6插入背景音乐 85
4.3.2 案例7插入Flash动画 86
4.3.3 案例8插入FLV 87
4.3.4 案例9插入HTML5音频 88
4.3.5 案例10插入HTML5视频 89
4.4 实战演练制作图文并茂的网页 90
4.5 高手甜点 92
4.6 跟我练练手 92
第5章 Web新面孔HTML5新增元素与属性速览
5.1 新增的主体结构元素 94
5.1.1 案例1section元素 94
5.1.2 案例2article元素 94
5.1.3 案例3aside元素 97
5.1.4 案例4nav元素 98
5.1.5 案例5time元素 100
5.2 新增的非主体结构元素 101
5.2.1 案例6header元素 101
5.2.2 案例7hgroup元素 102
5.2.3 案例8footer元素 103
5.2.4 案例9figure元素 104
5.2.5 案例10address元素 105
5.3 新增其他常用元素 107
5.3.1 案例11mark元素 107
5.3.2 案例12rp、rt与ruby元素 107
5.3.3 案例13progress元素 108
5.3.4 案例14command元素 109
5.3.5 案例15embed元素 109
5.3.6 案例16details与summary元素 110
5.3.7 案例17datalist元素 110
5.4 新增的全局属性 111
5.4.1 案例18content
Editable属性 111
5.4.2 案例19spellcheck属性 112
5.4.3 案例20tabIndex属性 112
5.5 新增的其他属性与废除的属性 114
5.5.1 案例21表单相关的属性 114
5.5.2 案例22链接相关属性 119
5.5.3 案例23其他新增属性 121
5.5.4 案例24HTML5废除的属性 121
5.6 实战演练制作HTML5的网页 123
5.7 高手甜点 125
5.8 跟我练练手 126
第6章 不在网页中迷路设计网页超链接
6.1 链接与路径 128
6.1.1 链接的概念 128
6.1.2 链接的路径 128
6.1.3 链接的类型 129
6.2 添加网页超链接 130
6.2.1 案例1添加文本链接 130
6.2.2 案例2添加图像链接 131
6.2.3 案例3创建外部链接 132
6.2.4 案例4创建锚记链接 132
6.2.5 案例5创建图像热点链接 133
6.2.6 案例6创建电子邮件链接 134
6.2.7 案例7创建下载文件的链接 135
6.2.8 案例8创建空链接 136
6.2.9 案例9创建脚本链接 136
6.2.10
案例10链接的检查 137
6.3 实战演练为企业网站添加友情链接 138
6.4 高手甜点 139
6.5 跟我练练手 139
第7章 简单的网页布局表格的应用
7.1 插入表格 142
7.2 选择表格 143
7.2.1 案例1选择完整的表格 143
7.2.2 案例2选择行和列 144
7.2.3 案例3选择单元格 144
7.3 表格属性 145
7.3.1 案例4设置单元格属性 145
7.3.2 案例5设置整个表格属性 146
7.4 操作表格 147
7.4.1 案例6调整大小 147
7.4.2 案例7增加行、列 147
7.4.3 案例8删除行、列 149
7.4.4 案例9剪切、复制和粘贴单元格 149
7.4.5 案例10合并和拆分单元格 150
7.5 操作表格数据 151
7.5.1 案例11向表格中输入文本 151
7.5.2 案例12向表格中插入图像 151
7.5.3 案例13表格数据的排序 152
7.5.4 案例14导入表格数据 153
7.5.5 案例15导出表格数据 153
7.6 实战演练使用表格布局网页 154
7.7 高手甜点 157
7.8 跟我练练手 158
第8章 让网页互动起来使用网页表单和行为
8.1 认识表单 160
8.2 在网页中插入表单元素 160
8.2.1 案例1插入表单域 161
8.2.2 案例2插入文本域 161
8.2.3 案例3插入密码域 163
8.3 在网页中插入复选框和单选按钮 164
8.3.1 案例4插入复选框 164
8.3.2 案例5插入单选按钮 165
8.4 制作网页菜单和列表 165
8.4.1 案例6插入下拉菜单 165
8.4.2 案例7插入滚动列表 166
8.5 在网页中插入按钮 167
8.5.1 案例8插入按钮 167
8.5.2 案例9插入图像按钮 167
8.6 插入文件上传域 168
8.7 添加网页行为 169
8.7.1 案例10打开【行为】面板 169
8.7.2 案例11添加行为 170
8.8 常用行为的应用 170
8.8.1 案例12交换图像 171
8.8.2 案例13弹出信息 172
8.8.3 案例14打开浏览器窗口 173
8.8.4 案例15检查表单行为 175
8.8.5 案例16设置状态栏文本 177
8.9 实战演练使用表单制作留言本 178
8.10
高手甜点 181
8.11
跟我练练手 182
第9章 批量制作风格统一的网页使用模板和库
9.1 创建模板 184
9.1.1 案例1在空白文档中创建模板 184
9.1.2 案例2在【资源】面板中创建模板 184
9.1.3 案例3从现有文档创建模板 185
9.1.4 案例4创建可编辑区域 186
9.2 管理模板 187
9.2.1 案例5从模板中分离文档 187
9.2.2 案例6更新模板及基于模板的网页 188
9.3 库概述 189
9.4 库的创建、管理与应用 190
9.4.1 案例7创建库项目 190
9.4.2 案例8库项目的应用 191
9.4.3 案例9编辑库项目 192
9.5 实战演练创建基于模板的页面 194
9.6 高手甜点 196
9.7 跟我练练手 196
第3篇 高级应用
第10章 读懂样式表密码使用CSS样式表美化网页
10.1
初识CSS 200
10.1.1 CSS概述 200
10.1.2 CSS的作用 200
10.1.3 基本CSS语法 201
10.1.4 案例1使用Dreamweaver
CC
编写CSS 201
10.2
使用CSS的方法 203
10.2.1 案例2行内样式 203
10.2.2 案例3内嵌样式 203
10.2.3 案例4链接样式 204
10.2.4 案例5导入样式 205
10.2.5 案例6优先级问题 206
10.3
使用CSS样式美化网页 208
10.3.1 案例7使用字体样式美化文字 208
10.3.2 案例8使用文本样式美化文本 212
10.3.3 案例9使用背景样式美化背景 215
10.3.4 案例10使用链接样式美化链接 218
10.3.5 案例11使用列表样式美化列表 219
10.3.6 案例12使用区块样式美化区块 221
10.3.7 案例13使用宽高样式设定宽高 222
10.3.8 案例14使用边框样式美化边框 223
10.4
实战演练设定网页中链接样式 225
10.5
高手甜点 228
10.6
跟我练练手 228
第11章 架构师的大比拼网页布局典型范例
11.1
使用CSS排版 230
11.1.1 案例1将页面用DIV分块 230
11.1.2 案例2设置各块位置 230
11.1.3 案例3用CSS定位 230
11.2
固定宽度网页剖析与布局 233
11.2.1 案例4网页单列布局模式 233
11.2.2 案例5网页1-2-1型布局模式 237
11.2.3 案例6网页1-3-1型布局模式 240
11.3
自动缩放网页1-2-1型布局模式 244
11.3.1 案例71-2-1等比例变宽布局 244
11.3.2 案例81-2-1单列变宽布局 245
11.4
自动缩放网页1-3-1型布局模式 246
11.4.1 案例91-3-1三列宽度等比例布局 246
11.4.2 案例101-3-1单侧列宽度固定的
变宽布局 246
11.4.3 案例111-3-1中间列宽度固定的
变宽布局 249
11.4.4 案例121-3-1双侧列宽度固定的
变宽布局 252
11.4.5 案例131-3-1中列和侧列宽度
固定的变宽布局 255
11.5
实战演练使用CSS设定网页布局
列的背景色 258
11.6
高手甜点 259
11.7
跟我练练手 260
第12章 让网页更绚丽在网页中编写JavaScript
12.1
认识JavaScript 262
12.1.1 什么是JavaScript 262
12.1.2 JavaScript的特点 262
12.2
JavaScript 在HTML中的使用 263
12.2.1 案例1在HTML网页头中嵌入
JavaScript代码 263
12.2.2 案例2在HTML网页中嵌入
JavaScript代码 264
12.2.3 案例3在HTML网页的元素事件中嵌
入JavaScript代码 265
12.2.4 案例4在HTML中调用已经存在的
JavaScript文件 266
12.2.5 案例5通过JavaScript伪URL引入
JavaScript脚本代码 267
12.3 JavaScript的基本语法 268
12.3.1 执行顺序 268
12.3.2 区分大小写 268
12.3.3 分号与空格 268
12.3.4 对代码行进行折行 269
12.3.5 案例6注释 269
12.4
JavaScript 的数据结构 270
12.4.1 标识符 270
12.4.2 关键字 271
12.4.3 保留字 271
12.4.4 常量 272
12.4.5 变量 272
12.5 案例7使用函数 274
12.6
JavaScript的常用事件 275
12.6.1 案例8页面事件 275
12.6.2 案例9鼠标事件 276
12.6.3 案例10键盘事件 277
12.6.4 案例11表单处理事件 279
12.7
实战演练使用事件动态改变图片
的焦点 281
12.8
高手甜点 282
12.9
跟我练练手 282
第13章 让别人浏览我的成果网站的发布
13.1 上传网站前的准备工作 284
13.1.1 注册域名 284
13.1.2 申请空间 285
13.2
测试网站 286
13.2.1 案例1测试站点范围的链接 286
13.2.2 案例2改变站点范围的链接 286
13.2.3 案例3查找和替换 287
13.2.4 案例4清理文档 288
13.3
上传网站 289
13.3.1 案例5使用Dreamweaver
CC上传网站 289
13.3.2 案例6使用FTP工具上传网站 290
13.4
高手甜点 292
13.5
跟我练练手 293
第14章 整体把握网站结构网站配色与布局
14.1 善用色彩设计网页 296
14.1.1 认识色彩 296
14.1.2 案例1网页上的色彩处理 297
14.2
网页色彩的搭配 300
14.2.1 案例2确定网站的主题色 300
14.2.2 案例3网页色彩搭配原理 301
14.2.3 案例4网页中色彩的搭配 303
14.2.4 案例5网页元素的色彩搭配 304
14.2.5 案例6网页色彩搭配的技巧 305
14.3
布局网站板块结构 306
14.3.1 案例7国字型 307
14.3.2 案例8标题正文型 307
14.3.3 案例9左右框架型 307
14.3.4 案例10上下框架型 307
14.3.5 案例11综合框架型 308
14.3.6 案例12封面型 308
14.3.7 案例13Flash型 308
14.4
网站配色应用案例 308
14.4.1 案例14网络购物网站色彩应用 308
14.4.2 案例15游戏网站色彩应用 309
14.4.3 案例16企业门户网站色彩应用 310
14.4.4 案例17时政新闻网站色彩应用 311
14.4.5 案例18影音视频网站色彩应用 311
14.4.6 案例19电子商务网站色彩应用 312
14.4.7 案例20娱乐网站色彩应用 312
14.5 实战演练定位网站页面的框架 313
14.6 高手甜点 314
14.7
跟我练练手 314
第4篇 行业应用案例
第15章 行业综合案例1制作电子商务类网页
15.1
整体布局 318
15.1.1 设计分析 318
15.1.2 排版架构 318
15.2
模块组成 319
15.3
制作步骤 319
15.3.1 样式表 319
15.3.2 网页头部 325
15.3.3 主体第一通栏 328
15.3.4 主体第二通栏 328
15.3.5 主体第三通栏 329
15.3.6 网页底部 331
第16章 行业综合案例2制作网上音乐类网页
16.1
构思布局 336
16.1.1 设计分析 336
16.1.2 排版架构 336
16.2
模块分割 338
16.2.1 页头部分 338
16.2.2 左侧内容列表 340
16.2.3 中间内容列表 342
16.2.4 右侧内容列表 344
16.2.5 页脚部分 346
16.3
整体调整 346
16.3.1 页面内容主体调整 346
16.3.2 页面整体调整 347
第17章 行业综合案例3制作休闲娱乐类网页
17.1
整体布局 350
17.1.1 设计分析 350
17.1.2 排版架构 351
17.2
模块组成 351
17.3
制作步骤 352
17.3.1 制作样式表 352
17.3.2 Logo与导航菜单 359
17.3.3 搜索条 359
17.3.4 左侧视频模块 360
17.3.5 评论模块 361
17.3.6 右侧热门推荐 362
17.3.7 底部模块 365
第18章 行业综合案例4制作移动设备类网页
18.1
网站设计分析 368
18.2
网站结构分析 368
18.3
网站主页面的制作 369
18.4
网站成品预览 370
第5篇 全能拓展
第19章 增加点击率网站优化与推广
19.1
在网站中添加广告 380
19.1.1 网站广告分类 380
19.1.2 添加网站广告 381
19.2 添加实用查询工具 382
19.2.1 添加天气预报 382
19.2.2 添加IP查询 383
19.2.3 添加万年历 383
19.2.4 添加列车时刻查询 384
19.3
网站的宣传与推广 385
19.3.1 网站宣传实用策略 385
19.3.2 利用大众传媒进行推广 386
19.3.3 利用网络媒介进行推广 386
19.3.4 利用其他形式进行推广 388
19.4
实战演练查看网站的流量 388
19.5
高手甜点 391
19.6
跟我练练手 391
第20章 打造坚实的堡垒网站安全与防御
20.1
网站维护基础知识 394
20.1.1 网站的维护与安全 394
20.1.2 常见的网站攻击方式 395
20.2
网站安全防御策略 396
20.2.1 案例1检测上传文件的安全性 396
20.2.2 案例2设置网站访问权限 397
20.3
高手甜点 399
20.4
跟我练练手 400
|
| 內容試閱：
|
前言
Preface实战从入门到精通视频教学版系列图书是专门为职场办公初学者量身定做的一套学习用书，整套书涵盖办公、网页设计等方面。整套书具有以下特点。前沿科技无论是Office办公，还是Dreamweaver CC、Photoshop CC、Flash CC，我们都精选较为前沿或者用户群最大的领域推进，帮助大家认识和了解最新动态。权威的作者团队组织国家重点实验室和资深应用专家联手编著该套图书，融合丰富的教学经验与优秀的管理理念。学习型案例设计以技术的实际应用过程为主线，全程采用图解和同步多媒体结合的教学方式，生动、直观、全面地剖析使用过程中的各种应用技能，降低难度提升学习效率。为什么要写这样一本书随着网络的发展，很多企事业单位和广大网民对于建立网站的需求越来越强烈。另外，大中专院校中的很多学生需要做网页毕业设计，但是他们又不懂网页代码程序，不知道从哪里下手。本书针对这样的零基础的读者，为读者讲解网页设计的全面知识。读者在网页设计中遇到的技术，本书中基本上会有详细讲解。通过本书的实训，读者可以很快地上手设计网页，提高职业化能力，从而帮助解决公司需求问题。本书特色零基础、入门级的讲解无论您是否从事计算机相关行业，无论您是否接触过Dreamweaver CC和网页设计，都能从本书中找到最佳起点。超多、实用、专业的范例和项目本书在编排上紧密结合深入学习Dreamweaver CC网页设计技术的先后过程，从Dreamweaver CC的基本操作开始，带领大家逐步深入学习各种应用技巧，侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者读起来简明轻松，操作起来有章可循。随时检测自己的学习成果每章首页中，均提供了学习目标，以指导读者重点学习及学后检查。每章最后的跟我练练手板块，均根据本章内容精选而成，读者可以随时检测自己的学习成果和实战能力，做到融会贯通。细致入微、贴心提示本书在讲解过程中，在各章中使用了注意提示等小栏目，使读者在学习过程中更清楚地了解相关操作、理解相关概念，并轻松掌握各种操作技巧。专业创作团队和技术支持本书由刘玉红、侯永岗编著，IT应用实训中心提供技术支持。您在学习过程中遇到任何问题，可关注微信订阅号zhihui8home进行提问，专家人员会在线答疑。Dreamweaver CC网页设计学习最佳途径本书以学习Dreamweaver网页设计的最佳制作流程来分配章节，从Dreamweaver CC基本操作开始，然后讲解了网页美化布局、行业应用案例、网站全能拓展等。特别在本书中讲述了4个行业应用案例的设计过程，以便更进一步地提高大家的实战技能。本书架构如下。
超值光盘全程同步教学录像涵盖本书所有知识点，详细讲解每个实例及项目的过程及技术关键点。比看书更轻松地掌握书中所有的Dreamweaver CC网页设计知识，而且扩展的讲解部分能使您得到比书中更多的收获。超多容量王牌资源大放送赠送大量王牌资源，包括本书实例源文件、教学幻灯片、本书精品教学视频、88个实用类网页模板、11个精彩JavaScript案例、Dreamweaver CC快捷键速查手册、HTML标签速查表、精彩网站配色方案赏析、网页样式与布局案例赏析、CSS DIV布局案例赏析、Web前端工程师常见面试题等。读者对象没有任何Dreamweaver CC基础的初学者。有一定的Dreamweaver基础，想精通网页设计的人员。有一定的网页设计基础，没有项目经验的人员。正在进行毕业设计的学生。大专院校及培训学校的老师和学生。创作团队本书由刘玉红和王攀登编著，参加编写的人员还有刘玉萍、周佳、付红、李园、郭广新、侯永岗、蒲娟、刘海松、孙若淞、王月娇、包慧利、陈伟光、胡同夫、梁云梁和周浩浩。在编写过程中，我们力尽所能地将最好的讲解呈现给读者，但也难免有疏漏和不妥之处，敬请不吝指正。
编 者
第15章行业综合案例1制作电子商务类网页
电子商务网站是当前比较流行的一类网站。随着网络购物、互联网交易的普及，如淘宝、阿里巴巴、亚马逊等类型的电子商务网站在近几年风靡，越来越多的公司企业着手架设电子商务网站平台。本章就来介绍如何制作电子商务类网页。
本章学习目标
掌握电子商务网页整体布局的方法
了解电子商务网页的模块组成
掌握电子商务网页的制作步骤
15.1 整体布局
电子商务类网页主要实现网络购物、交易，所要体现的组件相对较多，主要包括产品搜索、账户登录、广告推广、产品推荐、产品分类等内容。本实例最终的网页效果如
图15-1所示。
图15-1 网页效果图
15.1.1 设计分析
电子商务类网站主要是用来提供购物交易的，所以要体现出以下特性。
⑴ 商品检索方便：要有商品搜索功能，有详细的商品分类。
⑵ 有产品推广功能：增加广告活动位，帮助特色产品推广。
⑶ 热门产品推荐：消费者的搜索很多都带有盲目性，所以可以设置热门产品推荐位。
⑷ 对于产品要简单准确地展示信息。
⑸ 页面整体布局要清晰、有条理，让浏览者知道在网页中如何快速找到自己需要的
信息。
15.1.2 排版架构
本实例的电子商务网站整体上还是上中下架构，上部为网页头部、导航栏、热门搜索栏，中间为网页主要内容，下部为网站介绍及备案信息，如图15-2所示。
图15-2 网页架构
15.2 模块组成
实例中整体虽然是上中下结构，但是每一部分都有更细致的划分。
上部主要包括网页头部、导航栏等内容。
中间主体主要包括商品检索模块、商品分类模块、热销专区模块等。
下部主要包括友情链接模块、快速访问模块、网站注册备案信息等模块。
网页中各个模块的划分主要依靠table标签来实现。
15.3 制作步骤
网站制作要逐步完成，本实例中网页制作主要包括以下几个部分。
15.3.1 样式表
为了更好地实现网页效果，需要为网页制作CSS样式表。制作样式表的代码如下。
* reset *
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
margin：0;
padding：0;
border：0;
font-weight：inherit;
font-style：inherit;
font-size：100%;
font-family：inherit;
vertical-align：baseline；
}
ol, ul {
list-style：none；
}
table {
border-collapse：collapse;
border-spacing：0；
}
caption, th, td {
text-align：left;
font-weight：normal;
}
blockquote：before, blockquote：after, q：before, q：after {
content："";
}
blockquote, q {
quotes：""
"";
}
html, body {
height：101%;
}
body {
background：#fff;
height：100%;
padding：0;
vertical-align：top;
}
* Default HTML Elements
-------------------------------*
* Images *
img, a img {
border：0pt none;
vertical-align：bottom;
}
* Reusables *
* Misc classes *
.right {
float：right !important;
}
.left {
float：left;
}
.padd-top {
padding-top：10px !important;
}
.clear-left {
clear：left;
}
.img-replace {
background-position：0 0;
background-repeat：no-repeat;
display：block;
padding：0;
text-indent：-9999px;
}
* Grid Layout *
.container {
margin：0 auto;
padding-right：10px;
padding-left：10px;
width：940px;
}
.grid, .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7
{
display：inline;
float：left;
margin-left：0px;
margin-right：0px;
padding-left：10px;
}
.grid_whatsnew {
display：inline;
float：right;
margin-left：0px;
margin-right：0px;
}
.no-grid {
display：block;
float：none;
}
.grid_whatsnew_IFrame {
display：inline;
float：left;
margin-left：0px;
margin-right：0px;
padding-left：10px;
padding-top：287px;
}
.begin {
margin-left：0;
}
.end {
margin-right：0;
}
.container .grid_1 {
width：145px;
}
.container .grid_2 {
width：300px;
}
.container .grid_whatsnew {
width：300px;
}
.container .grid_3 {
width：455px;
}
.container .grid_4 {
width：610px;
}
.container .grid_5 {
width：765px;
}
.container .grid_6 {
width：915px;
}
.container .grid_whatsnew_IFrame {
display：inline;
float：left;
margin-left：0px;
margin-right：0px;
padding-left：10px;
width：300px;
padding-top：287px;
}
.container .grid_7 {
width：770px;
}
* add extra space before *
.container .ahead_1 {
padding-left：155px;
}
.container .ahead_2 {
padding-left：310px;
}
.container .ahead_3 {
padding-left：465px;
}
.container .ahead_4 {
padding-left：615px;
}
.container .ahead_5 {
padding-left：775px;
}
* add extra space after *
.container .behind_1 {
padding-right：155px;
}
.container .behind_2 {
padding-right：310px;
}
.container .behind_3 {
padding-right：465px;
}
.container .behind_4 {
padding-right：615px;
}
.container .behind_5 {
padding-right：775px;
}
* move item forward *
.container .move_1 {
left：155px;
}
.container .move_2 {
left：310px;
}
.container .move_3 {
left：465px;
}
.container .move_4 {
left：615px;
}
.container .move_5 {
left：775px;
}
* move item back *
.container .remove_1 {
left：-155px;
}
.container .remove_2 {
left：-310px;
}
.container .remove_3 {
left：-465px;
}
.container .remove_4 {
left：-615px;
}
.container .remove_5 {
left：-775px;
}
.clear {
clear：both;
display：block;
overflow：hidden;
visibility：hidden;
width：0;
height：0;
}
.clearfix：after {
clear：both;
content：'' '';
display：block;
font-size：0;
line-height：0;
visibility：hidden;
width：0;
height：0;
}
.clearfix {
display：inline-block;
}
* html .clearfix {
height：1%;
}
.clearfix {
display：block;
}
* fix the outline on firefox focus *
a：active {
outline： none;
}
a：focus {
-moz-outline-style： none;
}
*
** Markup free clearing
** Details： http：www.positioniseverything.neteasyclearing.html
*
.clear-block：after {
content： ".";
display： block;
height： 0;
clear： both;
visibility： hidden;
}
.clear-block {
display： inline-block;
}
.clear {
float： none;
clear： both;
}
* Hides from IE-mac *
* html .clear-block {
height： 1%;
}
.clear-block {
display： block;
}
* End hide from IE-mac *
* kat''s formatting -- facebox overlay for send to friend *
div#facebox {
position： absolute;
top： 0;
left： 0;
z-index： 100;
text-align： left;
}
div#facebox div.popup {
position： relative;
}
div#facebox div.body {
}
div#facebox div#sendtofriend {
padding： 11px;
background： #fff;
}
div#facebox div.content {
width： 672px;
}
div#facebox .loading { **
width： 650px;
height： 300px;
text-align： center;
background-color： transparent;
}
div#facebox h2#sendtofriend {
background-image： urlhttp：www.woolworths.com.auwpswoolworths_imagestitle-sendtofriend.gif;
background-repeat： no-repeat;
background-position： top left;
width： 222px;
height： 26px;
margin： 14px 0px 0px 10px;
text-indent： -3001px;
}
div#facebox div.note {
margin： 13px 0px 60px 0px;
height： 300px;
}
div#facebox form ul {
padding： 6px 0px 0px 0px;
margin： 0;
}
div#facebox form ul li {
float： left;
display： inline;
width： 373px;
padding： 0px 0px 17px 0px;
}
div#facebox form ul li input.text {
border： 1px solid #b1b1b1;
height： 17px;
width： 369px;
}
div#facebox form ul li.left {
width： 247px;
}
div#facebox form ul li.left input {
width： 227px;
}
div#facebox form label {
width： 100%;
padding： 0px 0px 5px 0px;
}
div#facebox form textarea {
width： 621px;
border： 1px solid #b1b1b1;
height： 79px;
}
div#facebox input.btn-search {
position： absolute;
bottom： 36px;
right： 105px;
}
div#facebox a.close {
position： absolute;
bottom： 36px;
right： 10px;
}
div#facebox_overlay {
position： fixed;
top： 0px;
left： 0px;
height：100%;
width：100%;
}
.facebox_hide {
z-index：-100;
}
.facebox_overlayBG {
background-color： #000;
z-index： 99;
}
* overlay *
* html div#facebox_overlay { * ie6 hack *
position： absolute;
height：
expressiondocument.body.scrollHeight document.body.offsetHeight ?
document.body.scrollHeight ： document.body.offsetHeight ''px'';
}
* kat''s formatting -- facebox overlay for send to friend *
本实例的样式表比较多，这里只展示一部分，随书光盘中有文字的代码文件。
制作完成后将样式表保存到网站根目录下，文件名为.css文件夹。
制作好的样式表需要应用到网站中，所以在网站主页中要建立到CSS的链接代码。链接代码需要添加在head标签中，具体代码
如下。
15.3.2 网页头部
网页头部主要是企业Logo和一些快速链接，如关于我们、食品知识、网银在线支付等。除此之外还有导航菜单栏和搜索框等。
本实例网页头部的效果如图15-3所示。
图15-3 网页头部效果
实现网页头部的代码如下所示。
div id="header"
登录
联系我们
注册
放大 缩小
首页
博客园
查看最新
写博客
进入博客园
VIP会员
VIP会员登录
申请VIP会员
订阅免费期刊
VIP会员的优惠
VIP会员帮助
儿童食品在线选购
婴幼儿食品
1~3岁儿童食品
婴幼儿乳制品
儿童乳制品
儿童零食
儿童饮料
专家咨询
美食社区
进入社区
最新动态
专题报道
讨论专区
社区帮助
食品知识
食物的搭配
美食营养学
注意要点
在线咨询
网站帮助
在线提问
意见建议
网银在线支付
支付平台
支付流程
支付帮助
关于我们
关于公司
关于团队
联系我们
社会责任
展望未来
公司新闻
|
|
購物車/收銀台(
0
) | 在線留言板
| 付款方式
| 運費計算
| 聯絡我們
| 幫助中心 |
加入書簽
HOME
新書上架
