网站规划与网页设计(第二版)

本书适合作为普通高等院校的计算机、电子商务、艺术设计等专业的教材，也可作为信息技术培训机构的培训用书，还可作为网页设计与制作人员、网站建设与开发人员、多媒体设计与开发人员的参考书。本书(*版)出版后，受到广大读者的广泛欢迎，2016年获陕西省优秀教材二等奖，是陕西省精品课程“网页设计与制作”的配套教材，精品课程网址为http://web.xjpgy.com/，提供全套电子课件、电子教案、建站素材、教学大纲、实验指导、习题解答、视频教学等。 

本书从商务网站建设的实践出发，对网站规划和网页设计两大部分全面系统地进行了讲解。网站规划部分主要包括网站规划的流程、网站规划的内容、网站规划的原则以及如何撰写网站规划方案等。网页设计部分主要包括网站编辑、网页设计基础理论、网页界面设计、网页动画设计等。 全书共分为11章，以商务网站的真实案例为切入点，按照案例引入→提出问题→理论讲解→案例分析的总体思路编写而成；每章配有小结、练习题、上机实验，并附有详细的实验指导，这对每章的学习起到了巩固和提高的作用。
本书适合作为普通高等院校的计算机、电子商务、艺术设计等专业的教材，也可作为信息技术培训机构的培训用书，还可作为网页设计与制作人员、网站建设与开发人员、多媒体设计与开发人员的参考书。
本书(*版)出版后，受到广大读者的广泛欢迎，2016年获陕西省优秀教材二等奖，是陕西省精品课程“网页设计与制作”的配套教材，精品课程网址为http://web.xjpgy.com/，提供全套电子课件、电子教案、建站素材、教学大纲、实验指导、习题解答、视频教学等。

目    录

第1章  网站规划 1

1.1  网站规划的流程 1

1.2  网站规划的内容 2

1.2.1 
建设网站前的市场分析 2

1.2.2 
建设网站的目的及

功能定位 2

1.2.3 
分析目标客户及潜在

客户对站点的需求 3

1.2.4 
域名申请 3

1.2.5 
Web服务器的选择 4

1.2.6 
确定网站风格 4

1.2.7 
考虑网络的技术问题 6

1.3  网页设计的原则 6

1.4  网站的测试、发布与维护 8

1.5  网站规划案例 8

小结 10

练习题 10

上机实验 10

第2章  网页设计基础知识 12

2.1 
Internet基础 12

2.1.1 
Internet概述 12

2.1.2 
WWW 12

2.1.3 
网页与网站 13

2.1.4 
域名与IP地址 13

2.2  网页制作工具 16

2.2.1 
网页编辑工具 16

2.2.2 
图形和图像处理工具 16

2.2.3 
动画制作工具 17

2.3 
HTML语言 17

2.3.1 
HTML语法结构 17

2.3.2 
常见的HTML标签

(HTML5标准) 18

小结 22

练习题 22

上机实验 22

第3章  创建站点 24

3.1 
Dreamweaver CC简介 24

3.2 
Dreamweaver CC的

工作界面 25

3.3  定义本地站点 28

3.3.1 
创建站点 28

3.3.2 
管理站点 31

3.3.3 
创建网页 32

小结 34

练习题 34

上机实验 34

第4章  制作页面 35

4.1  实例导入：咖啡吧 35

4.2  页面属性的设置 36

4.3  文本的修饰 37

4.3.1 
输入文本 38

4.3.2 
文本属性的设置 39

4.3.3 
段落格式的设置 41

4.3.4 
列表格式的设置 42

4.3.5 
滚动文本 43

4.4  设置超链接 43

4.4.1 
URL地址 44

4.4.2 
超链接的分类 44

4.4.3 
选择链接目标 46

 

4.5  制作包含超链接的

纯文本网站 47

4.6  使用图像 50

4.6.1 
插入图像 50

4.6.2 
设置图像属性 51

4.6.3 
制作翻转图像 52

4.6.4 
制作图像映射 53

4.7  插入Flash影片 53

4.8  插入Flash视频 55

小结 56

练习题 57

上机实验 57

第5章  CSS DIV页面布局技术 59

5.1  实例导入：采用CSS样式表

的网页 59

5.2  了解CSS样式表 61

5.2.1 
CSS样式表概述 61

5.2.2 
在Dreamweaver

中定义CSS 62

5.3  利用CSS美化网页 64

5.3.1 
背景样式的应用 65

5.3.2 
文本及列表的应用 66

5.3.3 
方框和边框样式的应用 67

5.3.4 
动态链接样式的应用 69

5.3.5 
滤镜效果的应用 70

5.4  利用CSS＋DIV进行

网页布局 71

小结 74

练习题 75

上机实验 75

第6章  网页制作：页面布局

辅助技术 78

6.1  网页版面布局概述 78

6.2  实例导入：表格排版网页
80

6.3  使用表格布局网页 81

6.3.1 
插入表格和编辑表格 82

6.3.2 
表格及单元格属性的设置 85

6.3.3 
使用表格排版网页 86

6.3.4 
表格排版实例的制作过程 87

6.4 
Bootstrap响应式布局 89

6.4.1 
什么是响应式布局？ 89

6.4.2 
Bootstrap简介 89

6.4.3 
基于Bootstrap搭建

响应式布局网站 90

6.5  使用 jQuery UI
Widget 94

6.5.1 
插入jQuery Widget 95

6.5.2 
修改jQuery Widget 95

6.6  利用JavaScript制作

网页特效 96

6.6.1 
利用JavaScript制作

网页特效 96

6.6.2 
应用Dreamweaver

内部的行为 99

6.6.3 
推荐制作网页特效的软件 102

小结 103

练习题 104

上机实验 104

第7章  使用表单 106

7.1  实例导入：利用表单创

建用户信息注册表 106

7.2  创建表单 107

7.3  插入表单对象 109

7.3.1 
表单网页的布局 109

7.3.2 
插入和编辑表单对象 110

7.4  制作用户注册表 115

7.5  验证表单 117

小结 119

练习题 119

上机实验 119

第8章  模板与库的应用 121

8.1  实例导入：利用模板

生成站点 121

8.2  模板的创建和编辑 122

8.2.1 
创建模板 122

8.2.2 
编辑模板 123

8.3  模板的应用和更新 124

8.3.1 
模板的应用 124

8.3.2 
更新模板 125

8.4  使用库 126

8.4.1 
创建库 126

8.4.2 
应用库 127

8.4.3 
修改库 127

8.5  利用模板和库生成站点的

制作过程 129

小结 131

练习题 131

上机实验 131

第9章  网页设计基础理论 134

9.1  平面设计基础 134

9.1.1 
图像类型 134

9.1.2 
图像分辨率 135

9.1.3 
图像文件格式 135

9.1.4 
图像设计的分类 135

9.2  色彩的应用 138

9.2.1 
色彩模式 138

9.2.2 
色彩的应用 140

9.2.3 
配色方案的应用实例 141

9.3  网页设计的构图 143

9.3.1 
构图概述 143

9.3.2 
构图范例欣赏 146

9.4  网页设计的流程 148

9.4.1 
网页策划 148

9.4.2 
设计网页原型图 148

9.4.3 
设计网页效果图 149

9.4.4 
网页设计实例——房地产

网站首页设计 149

小结 153

练习题 154

上机实验 154

第10章  利用Flash CC设计

网页动画 155

10.1 
实例导入：制作Flash

网页片头动画 156

10.2 
Flash CC概述 156

10.2.1 
Flash的工作界面 156

10.2.2 
Flash的基本操作 159

10.2.3 
Flash CC的新功能 161

10.3 
Flash的基本功能 163

10.3.1 
绘图和填充 164

10.3.2 
位图操作 171

10.3.3 
处理文本 173

10.4 
应用Flash CC设计动画 175

10.4.1 
场景、元件与实例 175

10.4.2 
帧与关键帧 177

10.4.3 
图层 177

10.4.4 
创建动画 178

10.4.5 
Flash动画中的

交互控制 195

10.5 
网站片头Flash动画设计 202

小结 204

练习题 204

上机实验 205

第11章  利用Photoshop

设计网页 209

11.1 
Photoshop CC简介 209

11.2 
Photoshop CC工作界面 213

11.3 
Photoshop CC基本应用 214

11.3.1 
Photoshop CC

基本操作 214

11.3.2 
Photoshop功能介绍 227

11.3.3 
Photoshop CC文件

存储格式 228

11.4 
Photoshop CC网页设计 228

 

11.5 
使用Photoshop制作网页

热点链接 234

小结 237

练习题 237

上机实验 237

参考文献 244

 

 

前    言

评论

第1章网站规划网站规划也叫网站策划，是指在网站建设前对市场进行分析、确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。网站规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。本章主要介绍网站规则的方法，主要包括：网站规划的流程、网站规划的内容、网站规划的原则，并通过一个案例分析，进一步讲解如何撰写网站规划方案。【本章学习目标】通过本章学习，读者能够掌握：● 项目调查：网站项目需求分析● 方案决策：网站规划● 计划制定：网站建设项目实施方案的制定1.1 网站规划的流程网站的成功与否与建站前的网站规划有着极为重要的关系。在建立网站前应明确建设网站的目的，确定网站的功能，确定网站规模、投入费用，进行必要的市场分析等。只有经过详细的规划，才能避免在网站建设中出现很多问题，使网站建设能够顺利进行，网站规划流程图如图1.1 所示。图1.1 网站规划流程图网站规划的工作流程如下：1) 了解客户的需求。只有了解制作网站的真正目的，才能设计出满意的网站。比如某企业希望通过网站获得更多的知名度，则重点就要在宣传推广方面进行设计。大家熟知的一些大型网站，比如腾讯、新浪等，都是通过推广其网站，然后陆续推出一些拍卖网、广• 2 • 网站规划与网页设计(第二版)告位等赢利项目。2) 了解管理者对网络的需求。这里要强调的是如果管理人员对网络比较了解，那么在规划网站时就应当根据自己的经验为客户打造他们真正需要的网站，避免制作后多次更改。3) 了解企业中未来网站的管理者。虽然未来的网站管理者不是决定本次业务合作能否接受的关键，但他拥有的却是决定事情难易程度的能力。尽量把网站管理者的一些爱好和习惯考虑进去，这样在将来会减少修改的机会。4) 提出方案。在规划方案的过程中，不要照搬他人的方案，而应认真分析客户的需求以及综合考虑多方面的因素，提出切实可行的方案。5) 站在他人的角度思考问题。在制作规划的过程中，要假设自己是一个运营者，该关心什么问题，是成本，还是收益？只有站在别人的角度思考问题，才能交出满意的作品。6) 合理分配网站的版面，在设计网页的时候不要将太多功能压缩到3 至5 个栏目中，或者栏目设计太多，功能却被极力压缩，使付出的代价和得到的回报不成正比。7) 追踪调查。体现设计人员的专业性，不仅是把规划方案制作好，而更艰巨的任务是后期的服务，比如定时追踪、接受反馈意见等。1.2 网站规划的内容网站规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。网站规划是网站建设的基础和指导纲领，决定了网站的发展方向，同时对网站推广也具有指导意义，主要任务是制定网站的发展战略、制定网站的总体方案，安排项目开发计划、制定网站建设的资源分配计划。网站规划内容通常包括以下内容：1.2.1 建设网站前的市场分析1) 相关行业的市场是怎样的，市场有什么样的特点，是否能够在互联网上开展公司业务。2) 市场主要竞争者分析，竞争对手的上网情况及其网站策划、功能作用。3) 公司自身条件分析、公司概况、市场优势，可以利用网站提升哪些竞争力，建设网站的能力(费用、技术、人力等)。1.2.2 建设网站的目的及功能定位1) 为什么要建立网站，是为了树立企业形象，宣传产品，进行电子商务，还是建立行业性网站？是企业的基本需要还是市场开拓的延伸？2) 整合公司资源，确定网站功能。根据公司的需要和计划，确定网站的功能类型：企业形象型、产品宣传型、网上营销型、信息服务型、网络销售型等。3) 根据网站功能，确定网站应达到的目的及作用。举例说明，建设一个教育培训网站的目标是为接受培训教育的学生服务，并且吸引更第1 章 网站规划 • 3 •多的学生接受该校的教育培训，因此在建设网站时就要围绕这个目标确定网站的栏目，如图1.2 所示。尽管建设网站的目标不尽相同，但是有一点必须明确，那就是目标控制得越详细，对今后的工作开展越有利。图1.2 教育培训网站1.2.3 分析目标客户及潜在客户对站点的需求在这一阶段，需要掌握一些典型目标客户的基本信息。例如：他们共同的兴趣是什么？他们希望从站点中获得什么？要得到这些信息，既可以做一些问卷调查，也可以从亲友、同学那里获得一些建议，还可以在博客、BBS 上设立反馈信息页，从浏览者那里得到实际的信息，然后对网站进行规划。例如：对于教育培训网站，目标客户相对固定，所以比较容易确定用户对站点的需求。通过简要分析即可确定网站的栏目主要应包括“课程分类”、“学习资料”、“教师简介”等。1.2.4 域名申请所谓域名，就是企业在互联网上的名称。一个企业的域名在互联网上是的。通过在浏览器的地址栏中输入域名来访问企业的网站。域名与企业商标、企业标识物具有异曲同工的效果，因此又把域名称为“网络商标”。1. 域名的注册一般选择信誉较好的互联网信息服务提供商，由他们代为办理注册事宜。比如：当地的电信运营商、国内较为著名的ICP 服务商。2. 域名的命名规则域名非常重要，域名已经成为互联网的品牌、网上商标保护的产品之一，一个好• 4 • 网站规划与网页设计(第二版)的域名对网络营销的成功具有重要意义。1) 域名的申请与企业的CIS 有一定的关系。营造一个独一无二的企业品牌是建立成功域名的核心。企业域名的命名应与企业名称、商标等统一、整合，构成完整的企业识别系统(CIS)。比如：www.ibm.com(IBM 公司的域名)、www.dell.com(戴尔公司的域名)。2) 命名域名时应掌握具有、易记、形象好的特点。例如：网易原来的域名叫netease.com，后改为163.com，更适合中国人记忆。3) 域名由字母、数字和横杠组成，不能有空格或其他特殊字符。4) 域名长度要短。1.2.5 Web 服务器的选择为什么要选择 Web 服务器？Web 服务器是企业信息资料的存放处。通过HTTP(超文本传输协议)来访问企业的网站。如何构架服务器呢？有以下几种选择：1) 企业自己架构服务器(用于大中型企业)，建立企业内联网(intranet)并接入到互联网。需要专业的服务器、接入外网的专用线路和专业的网络管理人员。2) 租用ICP 服务商的服务器。● 虚拟主机服务：用特殊的软件将计算机主机分成若干部分，每一部分可具有独立的域名，因此一台Web 服务器可提供给多个用户使用，这大大降低了成本，适用于中小型企业。● 租用独立服务器：租用互联网服务提供商的整台服务器，由其提供 IP 地址和必要的日常维护等，与自架服务器相比成本较低，适用于中小型企业。1.2.6 确定网站风格确定了站点的整体风格，也就决定了网站内容的表现形式，包括网页所采用的布局结构、颜色、字体、标志图形、图像、动画等。不管采用什么样的风格，只要能够找到文字与图像和其他网络媒体的平衡点，给访问者想得到的信息或是感受，终吸引访问者，那么网站就成功了。Internet 上的网站类型繁多，归纳起来主要有以下两种：1. 信息式这类站点主要是以文字信息为主，所以页面的布局要求整齐划一，而且站点中的每层页面都会有一个导航系统，顶部区域大多使用一些比较有特色的徽标或公司商标，顶部中间有一些广告横幅，页面剩余部分则分门别类放置了大量的文本超链接，整个站点对图像、动画等这些带有修饰成分的多媒体信息采用比较低调的处理方式，每个页面包含少量图像或动画。目前国内知名的门户网站，例如“搜狐”、“新浪”等都属于信息式网站，如图1.3 所示。第1 章 网站规划 • 5 •图1.3 信息式网站：新浪2. 画廊式这类站点的典型代表是个人网站或公司网站，表现形式主要以图像、动画、多媒体等为主，注重通过各种信息手段表现个人特色或公司要宣扬的理念。例如：对于教育培训网站，它既不是一个大型的门户网站，也不是一个公司或个人网站，所以网站的风格介于上述两种风格之间，既需要提供大量的文字信息，也需要一些图像、动画来吸引浏览者，如图1.4 所示。图1.4 画廊式网站• 6 • 网站规划与网页设计(第二版)1.2.7 考虑网络的技术问题在设计网页时，要充分考虑到网络的速度因素，也就是常说的“带宽”问题，而且还要考虑浏览器、分辨率等。1. 网络的速度因素有关下载时间有一条“8 秒钟原则”，即：绝大多数浏览者不会等待8 秒钟来完整下载一个网页，所以在设计网页时应使预计的下载时间少于8 秒钟。如果页面的下载速度太慢，则访问者不会考虑页面中有什么吸引人的地方，而且会很快地按下浏览器上的“停止”按钮，或是转到其他的网站。影响网页显示速度的主要因素是图像、动画、视频的数量和大小。加快页面下载速度有效的方法，就是适当减少页面中的图像、动画、视频的大小和数量。2. 浏览器与分辨率显示器的屏幕分辨率是网页设计者应该特别关注的因素，显示器的屏幕分辨率是指计算机屏幕水平与垂直方向的像素值(即屏幕的宽度与高度)，通常可以将国内用户的显示器屏幕分辨率的设计标准定为：1024*768 像素。3. 即时交互与插件考虑网站是否需要进行交互。网站中包含多媒体对象时，客户端是否需要下载安装相应的插件以及客户是否愿意下载安装，由于大多数浏览器内置了Flash 播放器，建议多采用Flash 动画或Flash 视频。1.3 网页设计的原则网页要设计好，需要看设计者的功力与用心程度。在这里应当考虑到站点内容的丰富性，只有吸引大量的用户来关注，网站才会产生生命力。所以，设计者应当注意以下几条原则，如图1.5 所示。1) 用户优先。无论什么时候，只有得到用户的认可，工作才算做到位。设计者的初衷是为了满足广大用户的需要，并不是用来自我欣赏。2) 在设计网页的过程中，对一些比较大的Flash 动画、图像等要尽量做技术上的分割。进行测试，检测网页开启的速度是否合理，即前面提到的“8 秒钟原则”。3) 考虑用户的软硬件配置。有些用户的电脑软硬件配置不高，比如存在显示分辨率和浏览器版本高低等问题。所以设计者应当为用户考虑一下，怎样才能让他们可以正确浏览网页。4) 内容丰富。内容的丰富性包括文字、图像和音视频等巧妙搭配，但要记住，内容一定要跟网站所要提供的信息相对应。第1 章 网站规划 • 7 •图1.5 优秀网站推荐：页面干净、主题突出、栏目导航清晰5) 着手规划、确定特色、锁定目标。确定网站的性质、内容、目标网民后，提供及时、新颖、丰富的信息，吸引浏览者驻足网站。6) 首页的重要性。首页是浏览者对网站产生印象的关键，要秉持干净而清爽的原则。，若无特殊需要，尽量不要放置大的图像文件或程序，因为它们会增加下载的时间，导致用户失去浏览网页的耐心；第二，画面不要设置得杂乱无序，因为用户有可能会找不到自己需要的东西。7) 栏目的归类。内容的分类很重要，可以按主题、性质、组织机构等分类，无论采用哪一种分类方法，都要让用户能够容易地找到目标。而且分类方法要尽量保持一致，如果混用多种分类方法，就容易使用户感觉混乱。此外，在每个分类选项的旁边或下一行，好加上该选项内容的简要说明。8) 互动性。互动包括整个设计的呈现、使用界面引导等，都应该掌握互动的原理，让用户感觉每一步操作都能得到互动，这部分内容需要设计上的技巧与软硬件的支持。9) 图像应用技巧。恰当使用图像可以让网页增色不少，但图像应用不当则会适得其反。在图像使用上，尽量采用一般浏览器均可支持的图像压缩格式，例如jpg 与gif 等，jpg 的压缩效果较好，适合中大型图像，可以节省传输时间。10) 背景底色。如果在网页的背景上添加一些图像，则会影响阅读的时间。所以没有必要的话，尽量避免使用背景图像，保持干净清爽。11) HTML 格式的注意事项。为了日后维护方便，撰写HTML 时要架构完整。为了优化搜索，可在