下载掌阅APP，畅读海量书库
立即打开
本节主要对网站效果图进行分析，包括页面头部和页脚分析、首页主体内容分析和内页主体内容分析。图2.1和图2.2所示psd格式的UI图分别是企业网站的首页和公司产品页的页面效果图。
图2.1 首页
图2.2 公司产品页
首页UI图和XHTML页面通常表示为index.psd和index.html，除首页外的其他页面统称为内页。
页面的头部，如图2.3所示，包括标志、日期、邮箱、导航和网站banner，分别对应图中①②③④⑤。
图2.3 页面头部
标志、邮箱和banner分别是三张图片，日期是一段文字，导航是文字链接列表，单击每行文字可以跳转到相应的子页面，导航有背景图。
网站的banner通常是一张反映公司核心产品或核心价值观的图片或Flash动画，色彩鲜艳，是一个网站的点睛之处，这个例子中的banner是一张图片。
在布局上，头部先分为上下两行：第一行分为左右两栏，标志在左栏，向左浮动，日期和邮箱在右栏，向右浮动；第二行分为左右两栏，导航在左栏，向左浮动，banner在右栏，向右浮动。
页脚如图2.4所示，是一段关于公司版权信息的文字，这段文字有白色到灰色的渐变背景。
图2.4 页脚
首页的主体内容，如图2.5所示，包括两部分：公司简介和公司新闻。
图2.5 首页的主体内容
公司简介由标题、一张图片和三段文字组成，分别对应图中①②③④⑤。图片和第一段文字以图文环绕的形式展现，第三段文字的颜色区别于页面中的其他文字，各段落之间间距相等。各段落中文字的样式、大小以及行高都一样。
公司新闻由标题、日期+文字链接列表组成，分别对应图中⑥⑦。日期前有小标识，每个日期和文字组成的列表项之间有距离。
在布局上分为左右两栏，左栏是公司简介，向左浮动，右栏是公司新闻，向右浮动。在图文环绕这种页面展现形式中，如果图片向左浮动，则文字在图片右边并包围整张图片，如果图片向右浮动，则文字在图片左边并包围整张图片。
公司产品页的主体内容，如图2.6所示，包括两部分：特色产品和服务项目。
图2.6 公司产品页的主体内容
特色产品由标题和三个结构相似的模块组成，分别对应图中①②③④。其中每个模块由图片、标题和内容摘要组成。图片与文字是左右结构，图片在左边，文字在右边。
服务项目由标题、一段文字和一个文字链接列表组成，分别对应图中⑤⑥⑦。文字链接列表由5条文字链接组成，每一条文字链接前面都有一个三角形小图标，每条文字链接由点划线分隔。
在布局上，分为左右两栏，左栏是特色产品，向左浮动，右栏是服务项目，向右浮动。