《网站规划与网页设计（第三版）》从商务网站建设的实践出发，对网站规划、网站原型设计、网页设计三大部分进行了全面系统的讲解。其中网站规划部分主要包括网站规划的流程、内容、要点与原则以及如何撰写网站规划方案等；网站原型设计部分主要包括网站原型设计、交互设计等；网页设计部分主要包括网站编辑、网页设计基础理论、网页界面设计等。

《网站规划与网页设计（第三版）》内容的组织突出了知识体系的模块化结构，共分为五大模块：网站规划、网站编辑、网页设计基础理论、产品原型设计Axure RP、平面设计大师Photoshop CC，各模块之间既有独立性，又有关联性。全书共分为11章，以商务网站的真实案例为切入点，按照案例引入→提出问题→理论讲解→案例分析的总体思路编写而成；每章末配有小结、练习题、上机实验，并附有详细的实验指导，对每个章节的学习起到了巩固和提高的作用。

通过《网站规划与网页设计（第三版）》的学习，学生能够获得从事网站规划、网站编辑、网页美工创意、产品原型设计、平面设计等方面所需的综合技能。《网站规划与网页设计（第三版）》既可作为普通高等院校计算机、电子商务、艺术设计等专业的教材，也可作为信息技术培训机构的用书，还可作为网页设计与制作人员、网站建设与开发人员、多媒体设计与开发人员的参考书。

本书(第一版)出版后，广受读者欢迎，2016年获得陕西省优秀教材二等奖，也是陕西省精品资源共享课程“网站规划与网页设计”的配套教材，陕西省精品资源共享课程的网址为http://web.xjpgy.com/。电子课件、教材源文件、上机素材、教学大纲、实验指导、习题解答、教学视频既可通过http://www.tupwk.com.cn/downpage网站下载，也可通过扫描前言中的二维码获取。

前    言0

随着计算机网络的迅速发展，Internet已经成为我们生活中不可或缺的重要组成部分。政府机关通过网站实现电子政务；企业利用网站展示企业形象、推广产品并进行电子商务活动；个人建立一个具有独特风格的网站来展示与宣传自我。因此，如何通过搭建网站、设计精美的网页来吸引浏览者已成为大家共同关注的目标。学校里和社会上涌现了大量的网页设计爱好者，他们迫切希望尽快学习网站规划与网页设计的知识，并将其应用于网站建设的实践中。

《网站规划与网页设计（第三版）》在编写时力求“理论与实践的完美结合，突出能力结构的培养”。《网站规划与网页设计（第三版）》旨在使学生熟练运用软件进行网站的编辑、产品原型设计和网页界面设计；培养学生进行商务网站建设的自主策划与设计能力；使学生能获得从事网站编辑、网页美工创意、产品原型设计、网页设计等方面的综合技能。

一、《网站规划与网页设计（第三版）》的内容

模    块 内    容 目    的

网站规划 网站规划的流程

网站规划的内容

网页设计的要点与原则

域名、服务器及ICP备案

网站的测试、发布与维护 1. 项目调查：网站项目需求分析

2. 方案决策：网站规划

3. 计划制订：网站建设项目实施方案的制订

网站编辑 网络与Web基础 使用Dreamweaver CC 2019软件进行站点的创建、网页的布局，利用模板进行网站的编辑和响应式网页设计

创建站点

制作页面

CSS+DIV页面布局技术

使用表单

模板与库的应用

响应式网页设计

网页设计基础理论 平面设计基础

色彩的应用

网页设计的构图

网页设计的流程 掌握平面设计基础(图像类型、图像分辨率等)，了解色彩的应用和网页构图的技巧，掌握网页设计的工作流程

产品原型设计Axure RP  Axure RP的基本操作

Axure RP网站原型设计

Axure RP交互设计 利用Axure RP设计网站原型

平面设计大师Photoshop CC 

Photoshop CC基本应用

Photoshop CC平面设计

Photoshop CC网页设计 利用Photoshop CC设计平面作品和网站首页作品

二、《网站规划与网页设计（第三版）》的特点

《网站规划与网页设计（第三版）》根据普通高等院校应用型特色进行规划，按照教育部应用型人才培养的教学要求进行编写，从基础理论到专业技能再到工程实践三个阶段出发进行开发。

一是教材实例来源于企业实际资料，可以保证学生所学的内容满足社会和用人单位的实际需求。

二是教材体系包括基础知识、专业技能和工程实践三个方面，涵盖范围广，可以充分保证学生的不同起点、不同层次的选择。

三是教材设计尽量使用简洁明了的文字和科学的逻辑思维，在教学上严格规定教师的教学方向，将教学内容中的理论部分与实践部分进行合理的分配，能够让学生迅速跟进，快速领悟。

四是通过精讲、练习、实战三个层次的真实项目教学来提高学生的实践操作能力。这一特点主要体现在以下三个方面：

(1) 以能力的培养和提高来构建教学内容。

教学内容以商务网站建设的实际项目作为主线展开，介绍网站规划与网页设计的工作流程，将实用技术作为重点。

(2) 教材的编写满足社会和企业的需求。

以商务网站规划、网站原型设计、网页设计所具备的综合能力培养为目标，以教、学、做融于一体为方法，校企合作为模式，共同开发与设计教材。

(3) 加强系统性和针对性，注重培养学生的综合素质。

通过大量的案例分析，使学生掌握网页设计基础理论，从而能够从美学的角度进行网页配色、网页构图，最终实现网页设计的最佳境界。

五是《网站规划与网页设计（第三版）》的内容丰富，配套资料全。

本书(第一版)出版后，广受读者欢迎，2016年获得陕西省优秀教材二等奖，也是陕西省精品资源共享课程“网站规划与网页设计”的配套教材。《网站规划与网页设计（第三版）》教学资源非常全面，有全套的电子课件、教材源文件、上机素材、教学大纲、实验指导、习题解答、教学视频，既可通过http://www.tupwk.com.cn/downpage网站下载，也可通过扫描下方的二维码获取。

 

《网站规划与网页设计（第三版）》由杜永红主编，负责全书的统稿工作。各章节编写工作分工如下：第1章、第2章、第6章、第7章由杜永红编写，第8~11章由梁林蒙编写，第3章由曲贵翔编写，第4章、第5章由钟梦雪编写。由于作者水平有限，书中难免有不足之处，敬请读者批评指正。

三、《网站规划与网页设计（第三版）》读者对象

《网站规划与网页设计（第三版）》既可作为普通高等院校的计算机、电子商务、艺术设计、网络与新媒体等专业的教材，也可作为信息技术培训机构的用书，还可作为网页设计与制作人员、网站建设与开发人员、多媒体设计与开发人员的参考书。

编者    

2020年10月

目    录

第1 章  网络与Web基础   1

1.1  Internet基础   2

1.1.1  Internet概述   2

1.1.2  WWW   2

1.1.3  网页与网站   3

1.1.4  TCP/IP协议栈   3

1.1.5  HTTP与HTTPS   4

1.1.6  域名与IP地址   5

1.2  网页设计与制作工具   8

1.2.1  网页编辑工具   8

1.2.2  图形和图像处理工具   9

1.2.3  网站原型设计工具   9

1.3  超文本标记语言HTML5   10

1.3.1  HTML语法结构   10

1.3.2  HTML5简介   11

1.3.3  常见的HTML标签(HTML5标准)    12

小结   16

练习题   16

上机实验   16

 

第2 章  网站规划   19

2.1  网站规划的流程   20

2.2  网站规划的内容   21

2.2.1  建设网站前的市场分析   21

2.2.2  建设网站的目的及功能定位   21

2.2.3  分析目标客户及潜在客户对站点的需求   22

2.2.4  网站类型   22

2.2.5  网站风格   25

2.2.6  考虑网络的技术问题   27

2.3  网页设计的要点与原则   28

2.4  域名、Web服务器申请及ICP备案   30

2.4.1  域名申请   30

2.4.2  Web服务器的选择   32

2.4.3  ICP备案   32

2.5  网站的测试、发布与维护   34

2.6  网站规划案例   34

小结   37

练习题   38

上机实验   38

第3章  网页设计基础理论   39

3.1  平面设计基础   40

3.1.1  图像类型   40

3.1.2  图像分辨率   41

3.1.3  图像文件格式   41

3.1.4  图像设计的分类   41

3.2  色彩的应用   45

3.2.1  色彩模式   45

3.2.2  应用色彩   48

3.2.3  配色方案的应用实例   50

3.3  网页设计的构图   54

3.3.1  构图概述   54

3.3.2  构图范例欣赏   58

3.4  网页设计的流程   60

3.4.1  网页策划   60

3.4.2  设计网页原型图   61

3.4.3  设计网页效果图   62

3.4.4  网页设计实例——嘟嘟甜品网站设计   62

3.4.5  网页设计实例——海派婚纱网站设计   67

小结   70

练习题   70

上机实验   70

第4章  Axure RP原型设计   73

4.1  原型设计基础   74

4.1.1  原型设计概念   74

4.1.2  Axure RP简介   74

4.2  Axure RP的工作界面   77

4.3  Axure RP软件操作基础   83

4.4  Axure RP预览、发布与生成   88

4.5  Axure RP交互制作   90

4.5.1  交互事件与交互样式   90

4.5.2  交互事件动作介绍   96

4.6  Axure RP综合实例操作   103

小结   108

练习题   108

上机实验   108

第5章  利用Photoshop设计网页   115

5.1  Photoshop CC简介   116

5.2  Photoshop CC的工作界面   119

5.3  Photoshop CC基本应用   121

5.3.1  Photoshop CC基本操作   121

5.3.2  Photoshop CC常用工具详解   126

5.3.3  Photoshop CC功能介绍   136

5.3.4  Photoshop CC文件的存储格式   137

5.4  Photoshop CC网页设计   137

5.4.1  网页设计的组成与规范   137

5.4.2  网页设计   139

小结   147

练习题   147

上机实验   147

第6章  创建站点   153

6.1  Dreamweaver CC 2019简介   154

6.2  Dreamweaver CC 2019工作界面简介   155

6.3  定义本地站点   157

6.3.1  创建站点   158

6.3.2  管理站点   161

6.3.3  创建网页   162

小结   164

练习题   164

上机实验   164

第7章  制作页面   167

7.1  实例导入：中国传统节日——端午节   168

7.2  页面属性的设置   169

7.3  文本的修饰   170

7.3.1  输入文本   171

7.3.2  文本属性的设置   172

7.3.3  段落格式的设置   174

7.3.4  列表格式的设置   175

7.3.5  滚动文本   176

7.4  设置超链接   177

7.4.1  URL地址   177

7.4.2  超链接的分类   177

7.4.3  选择链接目标   180

7.5  制作包含超链接的纯文本网站   180

7.6  使用图像   184

7.6.1  插入图像   185

7.6.2  设置图像属性   185

7.6.3  制作翻转图像   186

7.6.4  制作图像映射   187

7.7  插入Flash动画与Flash视频   188

7.7.1  插入Flash动画   188

7.7.2  插入Flash Video   189

7.8  插入HTML5音频与HTML5视频   191

7.8.1  插入HTML5音频   191

7.8.2  插入HTML5视频   191

7.9  使用表格布局网页   193

7.9.1  插入表格和编辑表格   193

7.9.2  表格及单元格属性的设置   196

7.9.3  使用表格布局网页   198

小结   200

练习题   201

上机实验   201

第8章  CSS+DIV页面布局技术   203

8.1  实例导入：利用CSS+DIV完成西京小学网站   204

8.2  网页版面布局概述   205

8.3  CSS的简单应用   207

8.4  定义CSS   209

8.4.1  CSS概述   209

8.4.2  在Dreamweaver中定义CSS   211

8.5  利用CSS美化网页   213

8.5.1  背景样式的应用   214

8.5.2  文本及列表样式的应用   215

8.5.3  方框和边框样式的应用   217

8.5.4  动态链接样式的应用   218

8.5.5  CSS3的应用   220

8.6  利用CSS＋DIV进行

网页布局   223

小结   226

练习题   226

上机实验   226

第9章  使用表单   231

9.1  实例导入：利用表单创建用户信息注册表   232

9.2  创建表单   233

9.3  插入表单对象   234

9.3.1  表单网页的布局   234

9.3.2  插入和编辑表单对象   235

9.4  制作用户注册表   240

9.5  验证表单   243

小结   244

练习题   244

上机实验   244

第10章  模板与库的应用   249

10.1  实例导入：利用模板生成站点   250

10.2  模板的创建和编辑   250

10.2.1  创建模板   251

10.2.2  编辑模板   252

10.3  模板的应用和更新   253

10.3.1  模板的应用   253

10.3.2  更新模板   254

10.4  使用库   255

10.4.1  创建库   255

10.4.2  应用库   256

10.4.3  修改库   256

10.5  实例：利用模板和库生成站点的过程   257

小结   262

练习题   262

上机实验   262

第11章  响应式网页设计   267

11.1  实例导入：利用Bootstrap完成西度科技网站   268

11.2  初识响应式网页设计   268

11.2.1  响应式网页设计的优势   268

11.2.2  响应式网页设计的理念   269

11.2.3  发展趋势及主流开发框架   270

11.2.4  主流的响应式网站测试工具   272

11.3  Bootstrap响应式布局   273

11.3.1  Bootstrap简介   273

11.3.2  Bootstrap网格系统及组件   275

11.3.3  基于Bootstrap搭建响应式布局网站   282

11.4  jQuery在Dreamweaver中的应用   288

11.4.1  jQuery简介   288

11.4.2  应用Dreamweaver内置的行为   289

11.4.3  使用Dreamweaver自带的jQuery效果   292

11.4.4  使用jQuery Mobile创建适用于移动设备的Web应用程序   293

11.4.5  插入jQuery Widget   297

小结   299

练习题   299

上机实验   299

参考文献   303

图书特点

本书根据普通高等院校应用型特色进行规划，按照教育部应用型人才培养的教学要求进行编写，从基础理论到专业技能再到工程实践三个阶段出发进行开发。

一是教材实例来源于企业实际资料，可以保证学生所学的内容满足社会和用人单位的实际需求。

二是教材体系包括基础知识、专业技能和工程实践三个方面，涵盖范围广，可以充分保证学生的不同起点、不同层次的选择。

三是教材设计尽量使用简洁明了的文字和科学的逻辑思维，在教学上严格规定教师的教学方向，将教学内容中的理论部分与实践部分进行合理的分配，能够让学生迅速跟进，快速领悟。

四是通过精讲、练习、实战三个层次的真实项目教学来提高学生的实践操作能力。这一特点主要体现在以下三个方面：

(1) 以能力的培养和提高来构建教学内容。

教学内容以商务网站建设的实际项目作为主线展开，介绍网站规划与网页设计的工作流程，将实用技术作为重点。

(2) 教材的编写满足社会和企业的需求。

以商务网站规划、网站原型设计、网页设计所具备的综合能力培养为目标，以教、学、做融于一体为方法，校企合作为模式，共同开发与设计教材。

(3) 加强系统性和针对性，注重培养学生的综合素质。

通过大量的案例分析，使学生掌握网页设计基础理论，从而能够从美学的角度进行网页配色、网页构图，最终实现网页设计的最佳境界。

五是本书的内容丰富，配套资料全。

本书(第一版)出版后，广受读者欢迎，2016 年获得陕西省优秀教材二等奖，也是陕西省精品资源共享课程“网站规划与网页设计”的配套教材。本书教学资源非常全面，有全套的电子课件、教材源文件、上机素材、教学大纲、实验指导、习题解答、教学视频，获取地址见书内容简介和前言。