1.1 认识网站

对于网页设计的初学者而言，必须对网站的各基础概念进行界定与区分，如网站、网页和主页的区别，静态网页与动态网页的区别，网站第一屏以及网页界面的定义等。此外，了解不同类型的网站及其特征也对学习网页设计有着重要的意义。

1.1.1 网站的基本概念

网页是以提供人机交流便利为目的的中间媒体。它的语言格式是超文本标记语言（文件扩展名为.html或.htm），该语言是一种可以在环球信息网（World Wide Web，WWW）上传输，经由网址（URL）被浏览器识别并翻译成页面展示出来的文件。

网站是由多个网页用超链接的方式组成的有机整体。它被存储在指定的网站空间（服务器或虚拟主机），通过域名（网址）进行访问。一个网站至少包含一个网页，上不封顶。

主页也称首页，是用户访问一个网站时看到的第一个页面，就像一本书的封面或目录，对整个网站的风格定位、框架结构起到指导作用。一般网站首页的第一屏是网站的重中之重，一屏指的是用户不拉动右侧滚动条或者鼠标就能在浏览器中看到的有效可视区，第一屏就是指打开页面后在浏览器中默认看到的第一个有效可视区，相当于一张报纸的头版，如苹果的官网首页（见图1.1），其完整效果需要拉动右侧滚动条才能展示完，而第一屏（见图1.2）仅仅是浏览器显示的第一个部分。

静态网页是指不通过程序（如ASP、JSP、PHP等）而直接制作成的HTML页面。每个静态网页都有一个固定的网址，一般以.htm、.html、.shtml等后缀结尾，且不带“？”。这种网页不能通过识别用户的不同身份而呈现出不同的内容。静态网页并非绝对的静止，也可以出现各种动态效果，如GIF格式动画、Flash动画、滚动字幕等，这些只是视觉上的“动态效果”，而不是动态网页。

动态网页是指使用网页程序语言，如ASP、JSP、PHP等，通过编程将网站内容动态存储到数据库，用户访问网站时通过读取数据库来动态生成的网页，对用户不具备可见性。动态网页具有编程性，可根据设计者的要求动态地改变网站的内容，同时动态网页可与各种数据库进行交互，可以实现网络游戏、电子交易等功能。

网页界面是用户与网站的一个中间媒介。与传统的平面设计相比较，网页界面设计的特点在于它的交互性、持续性、多维性、多媒体性，其目标是优化信息与通信系统以满足用户的需求。网页界面设计必须以科学技术与艺术审美的结合为基础，以视觉为手段，始终遵循艺术与功能高度统一的原则，让用户在“动态的”浏览操作中感受网页界面的设计之美。

1.1.2 网站的分类

网站的种类样式繁多，目前尚无一个严谨的分类方式。将网站按照主体性质不同，可大概分为：门户类、垂直类、电子商务类、社交类、企业类和个人类。

门户类网站是以提供信息资讯为主要目的，类似于网络世界的“超市”的综合网站。其特点是信息量大、内容丰富、多为分栏结构。这类网站用户群广，具有较高的访问量，很容易得到较多的广告投放量，典型的门户网站有搜狐、网易和新浪等。门户网站涉及的领域非常广泛，如搜狐网（见图1.3）包括各类新闻、搜索引擎、娱乐视频、功能链接、免费邮箱等，整个界面中有多处广告区域。

垂直类网站是聚焦于某些特定的领域，提供该领域的深度信息和相关服务的网站。相对传统门户类网站而言更像是一个网络“专卖店”。垂直类网站的用户一般是该领域或行业的爱好者、关注者和消费者，所以吸引该网站用户的方法就是将网站内的信息整理得更具深度，更加精彩。如全球最大的Web技术资源网站W3school网（见图1.4），页面布局简洁大气。从基础的HTML到CSS，乃至进阶的XML、SQL、JS、PHP和ASP.NET，都提供全面的教程、完善的参考手册以及庞大的代码库。

电子商务类网站是企业、机构或者个人实施电商服务或交易的窗口。它的用户为供应商、客户或者企业产品的消费群体。随着互联网技术的迅速发展，电子商务逐渐渗透到现代商业的各个领域，最常见的是为用户提供一种新的购物方式——网上虚拟商城，如亚马逊网站、淘宝商城、1号店、唯品会等。

如果垂直网站加上专业化的购物服务就形成了更加专业化的电子商务，就能以权威、专业的内容吸引、刺激和带动顾客消费。如聚美优品网（见图1.5），专注于女性化妆品正品折扣，具有强烈的产品特色和专业性。在设计电子商务类网站时，要充分考虑到网站有高质量且丰富的内容、更新及时、网站响应时间短、易于操作等因素。

社交类网站（Social Network Site，SNS），是帮助用户建立社会性网络关系的互联网平台。在这个平台上，人们可以实现娱乐共享、展现自我观点以及分享自身经历等，最具代表性的有Facebook、人人网、新浪微博等。随着社会需求的发展，社交网站也逐渐向专业化、兴趣化、电子商务营销化及多平台化的趋势发展。如豆瓣网（见图1.6），其核心用户群是具有良好教育背景的都市青年，他们可以在该网站上发表有关书籍、电影、音乐的评论，也可以搜索别人的推荐，所有的内容、分类、筛选、排序都由用户产生和决定，甚至在豆瓣主页出现的内容也取决于你的选择。豆瓣除了有桌面网页版外还能自适应手机端，并配套开发了豆瓣App。

企业类网站是企业向用户宣传产品和服务的互联网平台，是当今时代企业对外的窗口。有的企业网站还制作了电子商务的基础设施和信息平台，方便用户直接购买本企业的产品和服务。现在无论是大型跨国企业还是国内小企业几乎都有自己的网站，它必须要符合自身品牌的个性，不能千篇一律。如水井坊官网（见图1.7）中就提供了产品介绍和定制服务等功能，页面本身无购买功能，但在其销售服务页面设置了（京东、天猫等）销售链接。页面视觉上以企业的标准色金色为主，红色为辅，文字图像里蕴涵着典雅文化与高雅品位，十分符合水井坊企业本身的市场定位。

个人网站可以说是个人在网络上的家，可以存放个人信息资料，让更多的网页浏览者了解你，相互结识成为网络中的朋友。一般在个人网站中会存放一些个人收藏整理的资料并不断更新，这也为网络浏览者们提供了资讯服务，使个人站点发挥了更强大的功能。如摄影师Julian Abrams的个人网站（见图1.8），它为单页设计，页面两栏布局，大胆的留白，当你向下滑动鼠标，便可切换菜单选项，而单击左右方向图标即可观看摄影作品，无论是交互方式还是视觉效果都个性十足。因此设计个人网站时最好是针对个人的爱好和专业特长，按个人的想法收集资料，然后将其制作成网站。

1.1.3 网站的商业模式

网站的商业模式是依据网站类型而具体设置的。其盈利内容主要是卖服务和卖产品，具体的盈利途径可分为以下4种类型。

1.流量变现模式

流量变现模式是一种先获得大量的流量，然后在此基础上通过广告、流量分发等赚钱的方式，它也是最基础的盈利模式，具体的落地方案如下。

（1）Banner广告

Banner广告是网站通过出租广告位、展示广告图来盈利，无论用户是否单击广告图，网站都需要向广告商家收取费用。这种形式也是互联网上最常见的盈利方式，常用于一些门户网站之中，如腾讯大申网的广告区域（见图1.9）。

（2）匹配广告

搜索引擎网站/电子商务中的搜索功能都是靠搜索关键词来匹配广告的一种形式。此类搜索广告一般按照每次单击价格（Cost Per Click，CPC）的方式计价，如百度网站搜索结果页面（见图1.10）展现免费，产生有效点击才会收费。

（3）社交广告

社交广告模式是将广告跟社交元素结合，最大的特点凭借“他人推荐”而对广告产生信任感。例如喜马拉雅网站（见图1.11）中，头条推荐栏目中的播放、点赞、留言数量，凡是有很多人关注与点赞的质量都不会差。

（4）流量分发

流量分发模式主要是用于一些门户网站或者浏览器入口，其利用其独特的网站定位和运营模式，争夺用户的上网入口，从而获得大量的流量，最后，再把这些流量分发到各种网站上，向网站收费。如hao123网（见图1.12）就提供了大量的网站入口，最后向这些网站收费。

2.佣金与分成

佣金与分成模式是借助网站这一平台直接为客户提供服务，收取一定的提成。最常见的是B2C电商平台，如天猫商城网（见图1.13），它就是按卖出商品的价格向店铺租户收取提成。

3.增值服务收费

增值服务收费模式是指基础服务功能免费，高级服务功能收费。这种模式常见于一些社交网站的会员制度及游戏网站中的道具。如QQ本身免费，但是你若想享受更多服务就需付费升级会员（见图1.14）。

4.直销模式

直销模式是利用互联网平台本身来卖自营商品，这种模式实际上就是减少中间环节，把商品直接销售到用户手中，典型方式如当当网的自营部分（见图1.15）。