网络编辑课件第四讲(1)

1、一、网站的结构组成,主页,栏目一,栏目二,栏目三,1,2,3,4,1标题,导读页,频道页,列表页,2标题,3标题,1内容,2内容,3内容,最终页,第一部分：网站结构规划,案例分析,第一部分：网站结构规划,二、网站的开发流程,1、确定网站的目标定位。 2、目标群体（受众）分析。 3、规划网站内容 （1）确定栏目构架：需要多少栏目 （2）确定版面样式结构：如何布局页面 4、进行网站美工设计 确定风格样式 5、进行程序开发 选择开发语言 6、录入网站内容 7、网站运行测试 测试运行是否正常，程序是否有问题 8、上线运营，日常维护 注意：日常管理人员,服务器选择,域名申请,域名备案,第一部分：网站结构

2、规划,三、网站规划（栏目设计）,1、网站功能：建设者试图通过网站达到什么样的目的。为网民提供什么样的服务 （1）用户服务：通过各类信息与服务满足网民的需求。（核心功能） 如：新闻、通讯、电子商务、政务、互动（论坛、博客） （2）用户分析：合法地收集用户资料信息。 通过数据分析了解用户的访问习惯、兴趣，了解用户的背景资料，从而掌握访问者的基本情况，指导网站建设。 （3）市场开发与调研：观察用户需求变化，以便为下一步发展做指导。,第一部分：网站结构规划,三、网站规划（栏目设计）,2、栏目类别 （1）核心服务栏目 媒体网站：新闻信息 商业网站/专业网站：产品信息 （2）倾斜服务类栏目 重点锁定部分人

3、群，提供较为个性化的，特色的服务 胶东在线：网上民声、爱心无限、网上问法 （3）互动类栏目 论坛、sns、留言板等服务 （4）自我推介 本网动态（关于我们）,第一部分：网站结构规划,三、网站规划（栏目设计）,3、栏目名称设计原则 （1）简短：两个字为主，特别情况不超过4个字。,（2）明确：意思清晰 （3）统一：风格、字数尽可能统一，便于制作,第一部分：网站结构规划,第二部分：网站的二维布局,1层,2层,3层,4层,平面+立体,矛盾：广度与深度,第二部分：网站的二维布局,腾讯 10,网易 28,搜狐 42,新浪 16,平面主导式,内容多负担重,阅读深度不够,美国在线 51,雅虎 4,立体主导式,

4、信息数量少,深度阅读 提高点击量,yahoo news page,第三部分：网站设计与受众习惯,一、受众视线在页面中的第一落点 网站不同，页面不同落点不同，对于某一个页面，其第一落点是相同的 （1）受众关心的内容和服务 （2）网站的编排手段不同。,第三部分：网站设计与受众习惯,二、受众视线扫描的核心地带 视线特点：侧重于垂直扫描，而不是水平扫描。 应尽可能地将新闻放在一个垂直延展的区域，避免过分横向扩线。 三、受众视线移动的速度 要有合适的宽度，页面长度要适宜。 四、不同类型信息吸引受从视线的能力 文字（大标题、小标题）、图片（大图片、小图片）、视频,设计页面注意： 1、网民的阅读环境和条件不

5、同。如电脑配置 2、网民的阅读需求不同。文字、图片（一般性图片、吸引眼球的图片） 3、网民接收信息的时间不一样。滚动新闻、热点关注。,第三部分：网站设计与受众习惯,网站设计的易用性问题,设计上的目标：给用户方便、舒适的体验。易用性表现在： 1、网页信息传输与打开的速度。 主要影响因素：网页文件大小（内容多少、图片数量质量、使用动画、音视频等手段） 2、界面的简洁性与稳定性。 简洁不是少，而是版式清晰，有条理，合理地划分分割各个版块。 不能过于频繁地改版。不容易养成阅读习惯，造成受众流失。 3、网站结构与导航要合理 （1）栏目之间逻辑关系要合理。 按信息和服务的性质进行规划，有些栏目是面向用户群

6、体进行规划 栏目之间要避免内容交叉，避免用户困惑。导航要安排要有条理。 （2）层次应该适中。层次容易使信息淹没。一般三级较为普遍。,第三部分：网站设计与受众习惯,4、栏目名称要准确，指向明晰。 比如“服务”、“定票”、“查询” 5、页面色彩要舒适 色彩要柔和，不要对用户眼睛产生强烈的刺激。 6、用户参与要便捷 例如：减少用户输入，多提供选择项。 用户注册（验证码） 私人信息（电话、住址、身份证等） 7、附加功能要方便 例如：技术方面的支持：插件的运用、文件下载、动画和音视频的播放等。,第四部分：导读页（首页）设计,网站页面分类： （1）导读页：网站首页、频道或栏目首页 功能：导读、容器和审美

7、-网站首页（一级导读） -频道首页（二级导读） -栏目页面（三级导读） 导读页属平面设计。 设计原则： -实用性：易于阅读，内容为网民所属、充分表达了编辑的意图 -审美性：综合运用文字、色彩、图像、视频、动画等手段产生的美感，不仅能烘托内容，也能产生美感。 （2）正文页：也叫内容页，每一条信息正文（内容）的页面。,第四部分：导读页（首页）设计,一、导读页（首页）页面布局模式 三种模式：垂直式、水平式、格子式,垂直式：网页内容纵向切割、延伸的效果。,t型布局：就是指页面顶部为导航条，下方左侧（右侧）是主菜单（推荐内容），右面（左侧）显示内容的布局，因为菜单条背景较深，整体效果类似英文字母t,所以我们称之为t形布局。,导航条,左侧推荐区,右侧内容区,门型布局：通