下载掌阅APP，畅读海量书库
立即打开
本节主要对网站效果图进行分析，包括页面头部分析、首页主体内容分析和内页主体内容分析。图3.1和图3.2所示psd格式的UI图分别是个人博客的首页和博客正文页的页面效果图。
|
|
| 图3.1 首页 | 图3.2 博客正文页 |
页面的头部，如图3.3所示，包括博客标题、签名和站内搜索，分别对应图中①②③。
博客标题和签名都是文字，站内搜索是一个文本框和按钮。
图3.3 页面头部
在布局上，头部分为左右两栏，左栏是博客标题和签名，由于博客标题和签名的文字字数不确定，所以这里的DIV是正常文档流，不采用向左浮动，可以不必设置该div的宽度。右栏是站内搜索，向右浮动。
首页的主体内容，如图3.4所示，包括导航、博客列表和上下翻页按钮，分别对应图中①②③。
图3.4 首页的主体内容
导航，是一个文字链接列表，由三张图片组成。
博客列表，由三个结构和样式相似的模块组成。通过这三个模块可以发现，共有两种形式展示。第一种由图片、文章标题和日期组成。第二种由文章标题、文章摘要和日期组成。在这两种形式中，文章标题和日期样式相同，可以共用。
上下翻页按钮由两个文字链接组成。
首页主体内容从布局上分为左右两栏。导航是左栏，向左浮动，博客列表和上下翻页按钮是右栏，向右浮动或正常文档流。
博客正文页的主体内容如图3.5所示，包括导航、博客内容和上下翻页按钮，分别对应图中①②③。
图3.5 博客正文页的主体内容
在布局上，分为左右两栏，导航是左栏，向左浮动，其他部分是右栏，正常文档流。
导航和上下翻页按钮与首页主体部分的导航及上下翻页按钮，无论是内容还是样式都完全一致，不再赘述。
正文由文章标题、日期及浏览量、正文段落和文章标签组成。这几部分是正常文档流，按照顺序依次从上到下布局。
评论由评论数量、评论框、提交评论按钮和评论列表组成。其中，每个评论列表项由用户头像、用户名、评论内容和回复按钮组成。在布局上，每个评论列表项都分为左右两栏，用户头像是左栏，向左浮动，其他部分是右栏，向右浮动或正常文档流。