页面制作说明.docx

页面制作说明.docx

《页面制作说明.docx》由会员分享，可在线阅读，更多相关《页面制作说明.docx（11页珍藏版）》请在冰豆网上搜索。

页面制作说明

页面制作说明

项目说明

目标和范围

本工程要求按照下面的设计，最终完成html的页面排版。

输出一个完整的静态的HTML页面。

本标不含制作付款信息

投标时，请大家将下面的内容制作成PS的效果图，并拷入到word文档中，配以一定的文字说明（即一些页面的操作说明）。

注意，PS的效果图，开始不用给太大的原图，截取部分小图放到word中，可以方便评选即可。

同时在word文档中给出制作的费用。

然后根据这些信息，一起进行招标。

功能说明

网络收藏夹

提供一个网络收藏夹的功能，用户可以自己建立分类，然后往分类里面增加网络标签。

网络黄页

上到下的层次结构为：

大分类->小分类->频道->网页

频道可以由用户自行创建，创建完后，大家可以往频道里面添加网站。

添加的网站按照点击数计算，每点一个给频道积一分。

每天排一次序，积分考前的频道往前排列。

具体页面说明

首页

页面结构如下：

登录框，包含用户名，密码两个输入框。

然后在下面有登录、注册、忘记密码三个功能按钮。

另外考虑，在登录框区域左侧，放下网站Logo。

网站Logo要重新设计，能表达汇聚网络信息智慧的含义。

另外，当用户登录后，登录框应当变成用户的信息提示框，包含用户名，以及用户的积分。

参见如下：

注意：

登录框是有验证码的。

注意，这里可选的设计是，登录仅仅是一个连接，点击后弹出窗口进行登录。

1．一级菜单的连接说明：

私人空间：

导航到网络收藏夹，要登录后才能用

我的频道：

是一个频道收藏夹，下面有二级菜单，分别是：

收藏的频道、我加入的圈、我创建的圈。

收藏频道，就是下面描述功能连接点击收藏后的频道

加入的圈就是下面描述的功能连接点击加入后的频道

我创建的圈就是由上面功能功能连接“新建频道”建立的频道

热门频道：

是每天积分排在头13位的频道

所有频道：

就是按照分类列出所有的频道信息，这里“所有频道”这个菜单只是列出大小分类。

点击这里的所有分类，将会导航到分类现实页面。

新建频道：

创建新的频道

这里我的频道、热门频道、所有频道相当于一个大分类点击后，在二级菜单下显示对应的频道。

搜索栏是针对频道的搜索，提供一个输入框和一个点击按钮。

点击后给出搜索的结构。

系统公告。

导航到系统公告处

1．二级菜单的连接说明：

二级导航菜单是点击一级导航菜单后出现的频道列表，全部都可以点击。

点击后进入下面的频道信息展现。

3．频道导航信息、公告以及频道操作信息说明

这里处于二级导航菜单，和下面频道具体标签之间。

有几个显示要素：

1．频道导航信息，显示告知当前所选择的菜单和大小分类等信息

2．就给一行滚动的方式，显示最新的公告列表标题，和当前频道的信息描述

3．最后一个单元是频道的操作单元。

包含：

收藏频道：

收藏当前的频道，点击我的频道后可以看到收藏的频道信息

加入圈：

申请加入该圈

进入圈论坛：

点击后导航到该圈的论坛中

申请圈长：

如果不是圈长，点击后向圈长发起申请，当该圈的圈长

如果是圈长，点击后查到申请当圈长的人员列表，圈长可以选择其中一个做圈的新圈长。

新增标签：

给频道新增加标签的功能按钮。

注意：

这个操作单元区以后对频道的操作可能会很多，这里设计要留下一定的空间和余地。

最好能分一下组，有些是成员看到的操作，有些是非成员使用的操作，有些是圈长独有的操作。

4．存在一个活动的频道展现小方框。

以一个鼠标滑动就拉出的方式显示。

里面显示的内容包括：

频道所属圈长、当日总分、排名、收录的网站数、当日访问量、会员数、以及所属的分类

4．网络标签展现区

这里平铺方式列上了这个频道的所有标签。

每个标签的显示要素包括：

1．要有标签代表网站的缩略图

2．要有标签名称

3．有标签的说明，包括：

点击数，标签的讨论的贴子数，以及排名的变化（上升、下降、平级无变化）

4．最后是标签的操作菜单：

包括删除标签以及修改标签

标签也有导航信息：

1．点击图片导航到标签的对应的网站

2．点击标签的名称，导航到标签的详细页面。

（这个设计可嫩不大好，入口不明显，很多人不知道）

这里注意：

一级菜单和二级菜单这样的设计，让人看起来会有点分不清楚，两者之间应该有较为明显的分界点。

搜索页面设计

入口说明：

点击了首页上的搜索后进入该页面

设计：

设计见下图：

上面红色方框和首页一样，下面是搜索结果列表展现。

列表的列包括：

频道名称，所属圈长，频道排名、频道分数，频道描述。

点击频道名称进入该频道，这将导航回首页方式展现。

分类页面设计

入口说明：

点击了首页上的所有频道后进入该页面

设计：

设计见下图：

上面红色方框和首页一样，下面是搜索结果列表展现。

大分类和小分类都比较多。

参考的分类实际页面如下：

注意：

上面实际页面只是展示实际的目前大分类和小分类，可以作数量上的参考。

小分类点击后，可以直接导航到首页上面，显示这个小分类，以及小分类下所有的频道。

标签的详细页面设计

入口说明：

首页上的标签的名称后，弹出该标签的详细说明

设计：

设计见下图：

1．消息信息的标题，主要存放该页的logo，图片等修饰性的内容。

2．URL信息，进入该标签的URL，可以点击并真正导航到该URL中

3．标签的详细信息描述标签的详细内容，包括：

标签的缩略图、名称、点击率。

同时还包含一个“占为己有”的功能按钮。

该按钮点击后将打开收藏该标签到自己的收藏夹中的功能。

4．右边是对该网站的评价区，类似论坛。

没一个列表包含：

评价（枚举值：

很好，好，一般，差，很差）以及评价作者、评价时间，和评价的详细内容。

5．评价的输入入口就是让用户输入实际的评价信息的地方。

页面参考：

网络收藏夹（私人空间进去）

入口说明：

在首页上点击私人空间将进入这个页面。

页面结构：

主菜单的操作区域，包含用户提示信息区：

包括：

用户欢迎语、积分、以及当前选中的私人频道和私人标签。

操作的功能，分别有：

对私人频道的操作入口：

新增、修改、删除

对标签的操作入口：

新增、修改、删除

导航操作：

首页、频道收藏夹

用户操作：

登录、登出

其他页面：

添加频道的页面（用iFram被集成的）

添加网页的页面（用iFram被集成的）：

修改页面（用iFram被集成的）：

和新增页面类似

删除页面（用iFram被集成的）：

就是一个确认窗口。

操作结果页面（用iFram被集成的）：

成功提示信息，返回按钮

失败提示信息，返回按钮

参考如下：

用户注册页面：

其他中间要登录的操作，点击后弹出登录窗口

注意，登录窗口如前所述，登录是要求能够输入验证码的

页面制作说明

1．要完成如上所有页面的图案设计

2．设计时，保证美观的情况下尽量少用图片。

尽可能的用CSS的方式将众多小图合并成一个大图。