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

第四讲第四讲 网站的规划与网页的设计网站的规划与网页的设计一、网站的结构组成一、网站的结构组成主页主页栏目一栏目一栏目二栏目二栏目三栏目三子栏目子栏目1子栏目子栏目2子栏目子栏目3子栏目子栏目4文章文章1标题标题导读页导读页频道页频道页列表页列表页文章文章2标题标题文章文章3标题标题文章文章1内容内容文章文章2内容内容文章文章3内容内容最终页最终页第一部分：网站结构规划第一部分：网站结构规划1.第四讲第四讲 网站的规划与网页的设计网站的规划与网页的设计案例分析案例分析第一部分：网站结构规划第一部分：网站结构规划2.3.4.5.第四讲第四讲 网站的规划与网页的设计网站的规划与网页的设计二、网站的开发流程二、网站的开发流程1、确定网站的目标定位。2、目标群体（受众）分析。3、规划网站内容 （1）确定栏目构架：需要多少栏目（2）确定版面样式结构：如何布局页面4、进行网站美工设计 确定风格样式5、进行程序开发 选择开发语言6、录入网站内容7、网站运行测试 测试运行是否正常，程序是否有问题8、上线运营，日常维护 注意：日常管理人员服务器选择域名申请域名备案第一部分：网站结构规划第一部分：网站结构规划6.第四讲第四讲 网站的规划与网页的设计网站的规划与网页的设计三、网站规划（栏目设计）三、网站规划（栏目设计）1、网站功能：建设者试图通过网站达到什么样的目的。为网民提供什么样的服务（1）用户服务：通过各类信息与服务满足网民的需求。（核心功能）如：新闻、通讯、电子商务、政务、互动（论坛、博客）（2）用户分析：合法地收集用户资料信息。通过数据分析了解用户的访问习惯、兴趣，了解用户的背景资料，从而掌握访问者的基本情况，指导网站建设。（3）市场开发与调研：观察用户需求变化，以便为下一步发展做指导。第一部分：网站结构规划第一部分：网站结构规划7.第四讲第四讲 网站的规划与网页的设计网站的规划与网页的设计三、网站规划（栏目设计）三、网站规划（栏目设计）2、栏目类别（1）核心服务栏目媒体网站：新闻信息商业网站/专业网站：产品信息（2）倾斜服务类栏目重点锁定部分人群，提供较为个性化的，特色的服务胶东在线：网上民声、爱心无限、网上问法（3）互动类栏目论坛、sns、留言板等服务（4）自我推介本网动态（关于我们）第一部分：网站结构规划第一部分：网站结构规划8.第四讲第四讲 网站的规划与网页的设计网站的规划与网页的设计三、网站规划（栏目设计）三、网站规划（栏目设计）3、栏目名称设计原则（1）简短：两个字为主，特别情况不超过4个字。（2）明确：意思清晰（3）统一：风格、字数尽可能统一，便于制作第一部分：网站结构规划第一部分：网站结构规划9.第四讲第四讲 网站的规划与网页的设计网站的规划与网页的设计第二部分：网站的二维布局第二部分：网站的二维布局1层2层3层4层平面+立体矛盾：广度与深度10.第四讲第四讲 网站的规划与网页的设计网站的规划与网页的设计第二部分：网站的二维布局第二部分：网站的二维布局腾讯10网易28搜狐42新浪 16平面主导式内容多负担重阅读深度不够美国在线51雅虎4立体主导式信息数量少深度阅读 提高点击量Yahoo News page11.第四讲第四讲 网站的规划与网页的设计网站的规划与网页的设计第三部分：网站设计与受众习惯第三部分：网站设计与受众习惯一、受众视线在页面中的第一落点一、受众视线在页面中的第一落点网站不同，页面不同落点不同，对于某一个页面，其第一落点是相同的（1）受众关心的内容和服务（2）网站的编排手段不同。12.第四讲第四讲 网站的规划与网页的设计网站的规划与网页的设计第三部分：网站设计与受众习惯第三部分：网站设计与受众习惯二、受众视线扫描的核心地带二、受众视线扫描的核心地带视线特点：侧重于垂直扫描，而不是水平扫描。应尽可能地将新闻放在一个垂直延展的区域，避免过分横向扩线。三、受众视线移动的速度三、受众视线移动的速度要有合适的宽度，页面长度要适宜。四、不同类型信息吸引受从视线的能力四、不同类型信息吸引受从视线的能力文字（大标题、小标题）、图片（大图片、小图片）、视频设计页面注意设计页面注意：1、网民的阅读环境和条件不同。如电脑配置2、网民的阅读需求不同。文字、图片（一般性图片、吸引眼球的图片）3、网民接收信息的时间不一样。滚动新闻、热点关注。13.第四讲第四讲 网站的规划与网页的设计网站的规划与网页的设计第三部分：网站设计与受众习惯第三部分：网站设计与受众习惯网站设计的易用性问题网站设计的易用性问题设计上的目标：给用户方便、舒适的体验。易用性表现在：1、网页信息传输与打开的速度。主要影响因素：网页文件大小（内容多少、图片数量质量、使用动画、音视频等手段）2、界面的简洁性与稳定性。简洁不是少，而是版式清晰，有条理，合理地划分分割各个版块。不能过于频繁地改版。不容易养成阅读习惯，造成受众流失。3、网站结构与导航要合理（1）栏目之间逻辑关系要合理。按信息和服务的性质进行规划，有些栏目是面向用户群体进行规划 栏目之间要避免内容交叉，避免用户困惑。导航要安排要有条理。（2）层次应该适中。层次容易使信息淹没。一般三级较为普遍。14.第四讲第四讲 网站的规划与网页的设计网站的规划与网页的设计第三部分：网站设计与受众习惯第三部分：网站设计与受众习惯4、栏目名称要准确，指向明晰。栏目名称要准确，指向明晰。比如“服务”、“定票”、“查询”5、页面色彩要舒适、页面色彩要舒适色彩要柔和，不要对用户眼睛产生强烈的刺激。6、用户参与要便捷、用户参与要便捷例如：减少用户输入，多提供选择项。用户注册（验证码）私人信息（电话、住址、身份证等）7、附加功能要方便、附加功能要方便例如：技术方面的支持：插件的运用、文件下载、动画和音视频的播放等。15.第四讲第四讲 网站的规划与网页的设计网站的规划与网页的设计第四部分：导读页（首页）设计第四部分：导读页（首页）设计网站页面分类：网站页面分类：（1）导读页：网站首页、频道或栏目首页 功能：导读、容器和审美 -网站首页（一级导读）-频道首页（二级导读）-栏目页面（三级导读）导读页属平面设计。设计原则：-实用性：易于阅读，内容为网民所属、充分表达了编辑的意图 -审美性：综合运用文字、色彩、图像、视频、动画等手段产生的美感，不仅能烘托内容，也能产生美感。（2）正文页：也叫内容页，每一条信息正文（内容）的页面。16.第四讲第四讲 网站的规划与网页的设计网站的规划与网页的设计第四部分：导读页（首页）设计第四部分：导读页（首页）设计一、导读页（首页）页面布局模式一、导读页（首页）页面布局模式 三种模式：垂直式、水平式、格子式垂直式：网页内容纵向切割、延伸的效果。T型布局：型布局：就是指页面顶部为导航条，下方左侧（右侧）是主菜单（推荐内容），右面（左侧）显示内容的布局，因为菜单条背景较深，整体效果类似英文字母T,所以我们称之为T形布局。导航条导航条左侧推荐区左侧推荐区右侧内容区右侧内容区17.门型布局：门型布局：通过页面分成四大区域，分别为：导航条部分、左（右）侧内容、主体内容。通过色彩、线条加以区分，形成一个“门”形。导航条导航条左侧部分左侧部分右侧部分右侧部分18.川型布局：川型布局：水平方向内容视觉感不强，而内容的垂直分割感却十分强烈。总体内容分割规律一致19.