网页的层次
- 格式：pptx
- 大小：977.41 KB
- 文档页数：14
下载文档原格式
合集下载
HTML,Css,JavaScript之间的关系
HTML,Css,JavaScript之间的关系简述HTML,Css,JavaScript⽹页设计思路是把⽹页分成三个层次，即：结构层(HTML)、表⽰层(CSS)、⾏为层(Javascript)。
1.HTML（超⽂本标记语⾔ Hyper Text Markup Language），HTML 是⽤来描述⽹页的⼀种语⾔,是整个⽹页的基础⾻架.定义⽹页内容2.CSS(层叠样式表C ascading S tyle S heets),样式定义如何显⽰ HTML 元素，语法为：selector{property：value} (选择符 {属性：值}),规定⽹页布局3.JavaScript是⼀种脚本语⾔，它是连接前台（html）和后台服务器的桥梁,对⽹页⾏为进⾏编程,定义⽹页的⾏为三者关系:HTML为主要结构,所有内容都是定义在html上的,css则负责对⽹页的修饰和布局,⽽JavaScript则是是⽹页拥有⼀个动态的效果, 何为动态效果?在我们初学html是,所学的form表单中的submit提交组件则是⼀种类似的动态效果,⽽我们的js,则是使静态的⽹页动起来. 如,当我们点击摸个按钮,想要弹出窗⼝,或者修改背景图⽚,或是其他⾏为,都可以有⾃⼰定义这个⾏为,这就是⽹页的动态化. HTML,Css,JavaScript的基本语法以及引⼊⽅法:HTML:有⼤量的基础标签组成,不同的标签具有不同的功能,但只有⽹页⾃带的样式,⽬前最常⽤的布局⽅式则是使⽤div的盒⼦布局,设计⽹页时通常 先设置整个⽹页的div布局,再讲⼤⼤⼩⼩的.具有不同作⽤的div嵌⼊⽹页的⼤盒⼦中,最后形成⼀个基本的⽹页结构, 标签分为单标签和双标签:<div></div>,<br/>CSS:作为html的样式存在.在html中有三种⽅式: 第⼀种:内部样式:嵌⼊在html代码中,<style> selector{property：value} 样式... </style> 第⼆种:外部样式表:通过<link rel="stylesheet" type="text/css" href="外部样式表路径" />引⼊外部样式表. 第三种:内联样式:<标签 style: 属性:"值";属性:"值">,以分号隔开不同属性,通常在需要特定属性,且不经常修改的标签中使⽤,且优先级为最⾼, 会覆盖样式表中的样式JavaScript:JavaScript代码分为两种书写⽅式: 第⼀种:将js代码直接写在html的代码中,为嵌⼊式代码块<script type="text/JavaScript">这⾥⾯负责代码的写⼊</script> 第⼆种:将js代码写在单独的 .js⽂件中,通过<script type="text/JavaScript" src="js⽂件路径"></script>. 通常不在引⼊外部js⽂件的<script>标签中书写js代码,因为写的会被浏览器忽略.且引⼊的⽅式也不同于css的href引⼊,⽽是使⽤src HTML,Css,JavaScript是⽹页的三要素,后⾯所学的各种框架都是在他们的基础上建⽴起来的,不求精通,但求会读且懂.是JavaWeb的基础部分.。
网页设计与制作 名词解释
1协议：事先约定货定义的一组精确地规定所交换数据的格式和传输方式的方法和规则，即计算机在交换信息时都要遵守的表达方式。
主要包括用户数据和控制信息的结构和格式，需要发出的控制信息以及相应要完成的操作与响应、对事件实现顺序的详细说明等三个部分。
2网站的层次：指整个站点各个层次之间的结构关系。
这是一种逻辑上的概念，目的在于合理组织整个站点中的所有内容，便于访问者查找和浏览，一般来说站点都把自身的内容分为多个层次，每个层次逐渐递进,最后达到最相信的内容。
3表单：是网页中站点服务器处理的一组数据输入域。
当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。
它是非常重要的通过网页在与服务器之间传递信息的途径，表单网页可以用来说收集浏览者的意见和建议，以实现浏览者与站点之间的互动。
4内联式样式单：它利用于现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中。
5虚拟主机:使用特殊的软硬件技术，把一台运行在因特网上的服务器主机分为多台“虚拟"主机,每一台虚拟主机都具有独立的域名和IP地址,具有完整的Internet服务器功能，虚拟主机之间完全独立,并可由用户自行管理，每一台虚拟主机和一台独立的主机完全一样.6标记型网页制作工具：指创建的网页文件在编辑过程中只能看到页面的源代码，只需要转到浏览器中就能看到页面的效果。
要求用户对HTML的使用方法非常熟悉才能够做出希望要的页面，其优点在于可以完全的控制页面元素，写出精简的代码.7色相：是颜色的基本属性，反应颜色的原貌,通过色相,人们才能区分种种颜色。
8客户端图像地图：它可将每个作用区的URL位置直接对应在Web网页的图像。
客户端图像映射并不需要通过服务器处理来允许站点访问者是否可在图像映射上进行超级链接。
但是,并非所有的浏览器都支持客户端图像映射。
9嵌入式样式单：和Script类似，嵌入到HTML文件的头部中去（<html>和<body>标记之间的〈head〉〈/head>标记之间）使用<Style>和〈/style>标记装载。
layout hierarchy结构
layout hierarchy结构摘要：1.布局层次结构的概念2.布局层次结构的作用3.布局层次结构的设计原则4.布局层次结构的应用实例正文：1.布局层次结构的概念布局层次结构，也被称为页面布局层次结构，是指在网页设计或文档设计中，元素在页面上的排列方式和层次关系。
这种结构通过将页面元素进行分组和分类，使得页面内容更加清晰、有序和易于理解。
2.布局层次结构的作用布局层次结构在设计中起着至关重要的作用，主要表现在以下几点：（1）提高用户体验：良好的布局层次结构能够使用户快速找到所需信息，提高用户体验。
（2）增强页面美感：合理的布局层次结构能够增强页面的美感，使页面更加美观。
（3）体现内容关系：通过布局层次结构，可以清晰地体现页面元素之间的层次关系和逻辑关系。
3.布局层次结构的设计原则在设计布局层次结构时，需要遵循以下几点原则：（1）一致性：保持页面元素的排列和样式的一致性，使用户更容易理解和操作。
（2）简洁性：尽量减少页面元素的种类和数量，保持页面的简洁性。
（3）清晰性：确保页面元素的层次关系和逻辑关系清晰，方便用户快速找到所需信息。
（4）美观性：在保证功能性的前提下，注重页面的美观性，提高用户的视觉享受。
4.布局层次结构的应用实例布局层次结构在各种设计中都有广泛应用，例如：（1）网站设计：通过布局层次结构，可以清晰地呈现网站的导航、内容和功能模块，提高用户体验。
（2）APP 界面设计：合理的布局层次结构可以使APP 界面更加简洁、美观，易于用户操作。
（3）文档排版：通过布局层次结构，可以使文档内容结构清晰，便于读者阅读和理解。
总之，布局层次结构是设计中不可或缺的重要组成部分，对于提高用户体验、增强页面美感和体现内容关系都具有重要意义。
网页布局结构与色彩搭配解析
二、色彩搭配的基本原理和常见搭配方式
3、对比度：对比度是衡量两种颜色在视觉上的差异程度。高对比度的颜色搭 配可以增强网页的视觉效果，但过多使用可能会使网页显得过于刺眼。
三、不同应用场景和需求下的色 彩搭配分析
三、不同应用场景和需求下的色彩搭配分析
1、新闻类网站：新闻类网站以传递信息为主要目的，要求色彩搭配简洁明了。 使用对比度较高的色彩搭配可以突出标题和重点段落，提高阅读体验。例如，黑 色和白色的对比搭配可以很好地突面内容。
四、总结
四、总结
网页布局结构与色彩搭配是网页设计的重要组成部分，对于提高用户体验和 提升网站质量具有关键作用。通过选择合适的布局结构和色彩搭配，能够使用户 更加愉悦地使用网站，同时也能更好地传递网站的信息和价值。
四、总结
希望本次演示的解析能对相关从业人员有所帮助，在未来的工作中注重布局 结构和色彩搭配的运用，为打造更加优秀、实用的网页提供支持。
四、实际操作案例
1、确定主题：该电商网站主要销售环保产品，主题为“绿色生活”。 2、确定色彩搭配方案：以绿色为主色调，搭配灰色和白色。绿色代表环保， 灰色和白色则可以营造出简洁、干净的视觉效果。
四、实际操作案例
3、应用色彩搭配方案：首页的背景色为淡绿色，产品图片使用深绿色，与背 景形成对比度，突出产品。标题文字使用白色，与背景色形成强烈对比，引导用 户视线。副标题和正文使用灰色，保持视觉上的平衡。
3、品牌官网：品牌官网是展示品牌形象的重要平台，色彩搭配要与品牌形象 保持一致。例如，对于科技品牌，通常使用蓝色、灰色等冷色调来营造一种专业、 可靠的形象；而对于儿童品牌，则可以使用较为鲜艳的色彩来传达一种活泼、有 趣的氛围。
四、实际操作案例
四、实际操作案例
网页的层次
二、受众视线扫描的核心地带
屏幕右部区域更容易成为核心地带，因为他与滚动条更接近。 例：新浪网
二． 新闻网页设计与受众阅读习惯和需求
视线的第一落点也容易影响核心地带的形成
中国网络电视台零首页大图（视频）推荐区很容易成为用户打开页面之后的第一落点 ，所以以第一落点为中心很容易形成网民浏览的核心地带。
二． 新闻网页设计与受众阅读习惯和需求
一．新闻网站结构规划 一．新闻网站结构规划
（三）网状结构 网状结构，指网页之间是呈网状联系的。即网页A、B、C、D、E之间 的链接是网状的，可随意地互相链接。 缺点：如果不科学地将各种页面按照信息的分类来分层处理，就容易出现不分层次、
不问条理、乱连一气的网状结构。
一．新闻网站结构规划 一．新闻网站结构规划
招生就业
外语系
经济管理系
艺术设计系
服装设计与 工程系
机电与信息 工程系
学生作品
系内动态
一．新闻网站结构规划 一．新闻网站结构规划
四、确立网站结构的原则
（三）信息易找 要使网络新闻信息容易查找，应注意以下两个方面： 1、导航条让人一目了然（央视网2008、2011） 2、提供高效的搜索（CNTV、BBC、新浪）
宁良红 2011/10
目录
一、网页的超链接功能 由于网络具有超文本链接技术，网页的结构与报纸版面的结构有了 很大的差异。 （一）报纸靠自然版序和版序来查找信息 自然版序：是依自然翻看的先后顺序，用数字标明的各个版的序号 版序：是用简短的文字，如“要闻”、“国内新闻”、“本地新闻” 等，来说明各个版面刊载的信息内容。 （二）网页靠超链接来浏览信息 超链接包括哪些：文字、图片、声音、动画、视频
三、不同类型信息吸引受众视线的能力
网页(Page)是用HTML语言写成的文件,它存放在某一台计算机中,
1、用主页空间或者使用免费空间
(1) 树状结构：树状结构中，网站中的网页是按照金字塔层次结构组织的。
1、模拟二网络技术第1、2套20题。4.2.3 树立网站整体风格
如果网站还包括交互性内容，可能还会有第三类文件，即Web数据库和程序文件。
4.2.4 收集素材
构成一个网站的基本元素是各种各样的文件以及存放这些文件的文件夹。
(3) 网状结构：网状结构中，网站中的各个网页随意地连接在一起，似乎没有明显的组织规律。
1、用主页空间4或.1者.使4用免制费定空间网站建设计划表
一般来说，网站的结构主要有三种类型。
网站设计 如果网站还包括交互性内容，可能还会有第三类文件，即Web数据库和程序文件。
主页的作用和地位类似于杂志的封面4.或2报.1纸的栏第一目版设，是置用来对整个网站进行概括性的4介.2绍.，2描述版其面他各设个计页面的内容的。
网站实现 构成一个网站的基本元素是各种4各.3样.的1文件建以立及存站放点这些文件的文件夹。
主页(Home Page)实际上也是网页，通常用来表示访问某个网站时出现的第一个页面。
如4这果制也网 定 是站网最还站常包建见括设的交计一互划种性表网内站容结，构可。4能.3还.会2有第网三页类文制件作，即We12b数、、据制使库作用和网程模序站板文的制件主作。 页其,他利页用面表格定位网页,添加网页元素
规划网站
1、制作网站的主页,利用表格定位网页,添加网页元素
选择网站主题
确定网站名称
这些文件大致可分为三类：第一类描述资源结构、位置，引导浏览者访问该网站，通常以“.
网第页四(章Pag建e)立:是主用题4H.网T1M站.L3语言选写择成的网文页件，制它作存放工在具某一台计算H机T中M，而L语这台言计算机网必页须是制与作因工特网具相连的。
(1) 树状结构：树状结构中，网站中的网页是按照金字塔层次结构组织的。
1、模拟二网络技术第1、2套20题。4.2.3 树立网站整体风格
如果网站还包括交互性内容，可能还会有第三类文件，即Web数据库和程序文件。
4.2.4 收集素材
构成一个网站的基本元素是各种各样的文件以及存放这些文件的文件夹。
(3) 网状结构：网状结构中，网站中的各个网页随意地连接在一起，似乎没有明显的组织规律。
1、用主页空间4或.1者.使4用免制费定空间网站建设计划表
一般来说，网站的结构主要有三种类型。
网站设计 如果网站还包括交互性内容，可能还会有第三类文件，即Web数据库和程序文件。
主页的作用和地位类似于杂志的封面4.或2报.1纸的栏第一目版设，是置用来对整个网站进行概括性的4介.2绍.，2描述版其面他各设个计页面的内容的。
网站实现 构成一个网站的基本元素是各种4各.3样.的1文件建以立及存站放点这些文件的文件夹。
主页(Home Page)实际上也是网页，通常用来表示访问某个网站时出现的第一个页面。
如4这果制也网 定 是站网最还站常包建见括设的交计一互划种性表网内站容结，构可。4能.3还.会2有第网三页类文制件作，即We12b数、、据制使库作用和网程模序站板文的制件主作。 页其,他利页用面表格定位网页,添加网页元素
规划网站
1、制作网站的主页,利用表格定位网页,添加网页元素
选择网站主题
确定网站名称
这些文件大致可分为三类：第一类描述资源结构、位置，引导浏览者访问该网站，通常以“.
网第页四(章Pag建e)立:是主用题4H.网T1M站.L3语言选写择成的网文页件，制它作存放工在具某一台计算H机T中M，而L语这台言计算机网必页须是制与作因工特网具相连的。
网页(百度百科)
网页编辑词条网页网页概述网页(web page)，是网站中的一「页」，通常是HTML格式（文件扩展名为.html或.htm 或.asp或.aspx或.php或.jsp等）。
网页通常用图像档来提供图画。
网页要使用网页浏览器来阅读。
网页是构成网站的基本元素，是承载各种网站应用的平台。
通俗的说，您的网站就是由网页组成的。
如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。
所谓网站(Website)，就是指在网际网路（因特网）上，根据一定的规则，使用HTML 等工具制作的用於展示特定内容的相关网页的集合。
简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。
人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务什么是网页?现在在你眼前，出现在显示器上的这个“东西”，就是一个网页。
网页实际是一个文件，它存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。
网页经由网址（ URL ）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。
构成网页的元素:文字与图片是构成一个网页的两个最基本的元素。
你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。
除此之外，网页的元素还包括动画、音乐、程序等等。
在网页上点击鼠标右键，选择菜单中的“查看源文件”，就可以通过记事本看到网页的实际内容。
可以看到，网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，于是就得到你现在所看到的画面。
为什么在源文件看不到任何图片？网页文件中存放的只是图片的链接位置，而图片文件与网页文件是互相独立存放的，甚至可以不在同一台计算机上。
网页的组成元素有哪些-有什么组成元素-具体介绍
网页的组成元素有哪些-有什么组成元素-具体介绍在〔制定〕网页时要组织好页面的基本元素，其常见的元素包括文字、图片、动画、音频、视频、超链接等，这些元素在网页中都占据着相对重要的位置。
以下是关于网页的组成元素有哪些的具体介绍。
(1)文本。
文本是网页中最常见的元素之一，也是网页内容的核心部分。
在制定网页时，应合计到文字的字体、字号、颜色、段落、层次等属性。
(2)图像。
图像是用来美化网页的主要元素，具有生动、直观等特点，在网页中合理使用图像，不仅可以产生一定的视觉冲击力，而且可以简化页面内容，从而传达出用文字难以表达的信息。
(3)动画。
动画是网页上最活跃的元素，通常状况下，吸引访问者最有效的方法是制作优秀的、有创意的动画。
网页中使用的动画文件一般采纳GIF动画格式或Flash动画格式。
(4)视频、音频。
随着网络带宽的增加，在网页中嵌入视频和音频元素，可以提升网页的多媒体效果，更加直观、生动、准确、特别地表达网页内容，受到浏览者的欢迎。
(5)Logo。
网站Logo相当于网站的图形标识，它可以显示网站名称、英文网址、网站理念等信息。
(6)Banner 。
Banner多用于展示网络广告的内容，又称网络图片广告，常位于Logo的右侧，多采纳GIF或Flash动画建立的动画元素，其形状、颜色应与整个页面的布局和色调一致。
(7)超链接。
超级链接(简称超链接或链接)是网页中最重要和最基本的元素之一。
超链接可以使一些孤立的网页产生一定的互相联系，从而使各个网页形成一个有机的整体。
当鼠标指针移动到设置有超链接的对象(如文字、图片、标题、动画等)时，鼠标指针会变成一个手指形，只要单击鼠标就可以打开超链接的网页。
(8)按钮。
按钮实质上也是一种超链接，通过按钮的形式可以直观地提示浏览者进行操作。
(9)导航栏。
导航栏实际上是一组采纳超链接技术的网页对象，包括文字、图像、按钮等。
它们有效地连接了网站或其他网站的内容，使你可以在各部分或各网站之间快速切换。
名词解释 网站的层次
名词解释网站的层次在如今数字化时代，网站成为我们生活中不可缺少的一部分。
它们引领着我们的信息获取和交流方式，成为连接世界的桥梁。
然而，我们对于网站的层次结构可能并不十分了解。
本文将对网站层次进行名词解释，以帮助读者更好地理解网站的结构和功能。
一、前端与后端我们先来谈谈网站的前端与后端。
前端是指网站用户所能直接看到和操作的界面部分。
它主要包括网页的布局、设计、交互和展示内容的呈现。
当我们打开一个网页，看到色彩斑斓的界面、悬浮菜单、动画特效等，这些都属于前端的范畴。
后端则是负责处理用户请求、数据库管理、服务器软件的运行等与用户无直接接触的部分。
它确保网站的正常运作和数据的安全性。
二、页面与站点下面让我们来深入了解网站的两个重要组成部分：页面和站点。
页面是网站上的一个单独的网页，它可以包含文字、图片、视频等多种形式的内容。
当我们单击一个链接或输入一个网址时，打开的就是一个页面。
而站点则是由多个相关页面组成的一个完整的网站体系。
在站点中，不同的页面通过内部链接或导航菜单相互连接，形成一个有机的整体。
一个站点可以包含多个页面，每个页面都扮演着不同的角色和功能。
三、导航与搜索当我们访问一个网站时，如何快速地找到我们需要的信息呢？这就需要依赖导航和搜索功能。
导航是指网站设计师为用户提供的获取信息的导引工具。
它可以以菜单栏、侧边栏、标签等形式展示，帮助用户快速定位到目标页面。
而搜索功能则可以通过输入关键词或短语，通过搜索引擎快速搜索到相关的信息。
导航和搜索的设计与实现，直接影响着用户对网站的体验和满意度。
四、用户界面与交互网站的用户界面（User Interface）是指用户和网站进行交互的中介，它呈现给用户的是一个友好、易操作的环境。
用户界面的设计与构建，旨在提供良好的用户体验和简化操作流程。
通过图标、按钮、表单等元素的布置和交互逻辑的设定，让用户能够快速上手和操作。
好的用户界面需要考虑用户的需求和习惯，使得用户在使用过程中感到舒适和自然。
网页结构
在网站建设中，网站的整体框架结构是需要提前规划好的。
美工设计人员需要根据用户的要求，做出符合用户浏览习惯的网页布局来。
洛阳做网站公司总结通常有以下几种：
网页的布局结构
1、上下结构
通常上方是导航条，上面罗列出企业的公司形象，产品、服务项目、用户的留言反馈和联系信息等。
在导航的上部是广告或者banner图。
这样的布局在大部分的企业和机构中都会用到。
二级页面有些则会换成另外的结构。
如果企业的产品想要重点位置进行推介的话，可以采用这种，让主要产品更容易突出，起到更好的宣传。
2、左右结构
这样的结构又称为二分栏式，分列两旁清晰的框架结构，左侧是导航条，右侧是正文、内容或企业形象展示。
这样的结构方式也有不少企业喜欢采用，还有一些网站内页采用这样的方法，也能够较好的突出产品内容。
3、上左右结构、上中左右结构
还有不少网站属于上左右结构，上中左右结构。
一般采用这样布局的通常内容信息较多，在大型企业中应用比较多。
上方为主要的菜单导航条，左侧为细分栏目导航条，下方为较主要的栏目及次级内容，右侧为内容区域。
这样层次分明的结构，一般企业内容分栏多，产品较多的时候使用会让人看上去琳琅满目又不凌乱。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
目录
新闻网站的结构规划
• 网页的超链接功能 • 网页的层次结构 • 新闻网页结构规划的思路 • 确立网站结构的原则
新闻网页设计与受众阅读习惯和需求
• 受众视线在页面中的第一落点 • 受众视线扫描的核心地带 • 不同类型信息吸引受众视线的能力
一、网页的超链接功能 由于网络具有超文本链接技术，网页的结构与报纸版面的结构有了
一．新闻网站结构规划
（三）网状结构 网状结构，指网页之间是呈网状联系的。即网页A、B、C、D、E之间
的链接是网状的，可随意地互相链接。 缺点：如果不科学地将各种页面按照信息的分类来分层处理，就容易出现不分层次、
不问条理、乱连一气的网状结构。
一．新闻网站结构规划
三、新闻网页结构规划的思路
新闻网站页面分类：导读页（首页或频道页）、正文页。 新闻网站的结构表现方式两类： 中国特色：平面主导式，新浪、搜狐。 国外新闻网站：立体主导式
一．新闻网站结构规划
四、确立网站结构的原则
（一）分层合理
要做到合理分层，首先应考虑网站内可能会发布些什么样的新闻信息， 按照这些新闻信息的属性和特征，在根目录下分成若干层级的子目录，组 成一个有层次的、逐级展开的树形结构体系。
校园网为例：
学校主页
校园概况
校园新闻
院系设置
教务教学
招生就业
外语系
经济管理系
一．新闻网站结构规划
（二）树形结构 树形结构，指网页之间是分层联系的。若以网页A为树干（即主页），
网页B、C为树枝，网页D、E为树叶，那么，从网页A可以链接到网 页B、C，从网页B可以链接到网页D，从网页C可以链接到网页E。 也可以依次回链。但树形结构严格按照由树干到树枝、由树枝到 树叶的方式层层相连，不能跳层相连 举例：MSNBC、BBC
二、网页的层次结构 网站的层次结构，根据链接的线路不同，可以分为三种：线性结
构、树形结构、网状结构。下面以A、B、C、D、E几个网页的链接 结构为例，说明三种网页层次结构的具体构架形式。 （一）线性结构 线性结构，指网页之间是单线联系的。即，从网页A可以链接到网页 B，从网页B可以链接到网页C，从网页C可以链接到网页D，从网页 D可以链接到网页E。也可以依次返回，从网页E回链到网页D、C、 B、A。但网页A、B、C、D、E却不能跳跃式地自由联系。 一般内容较少的小型企业网站多采用这种模式。
一．新闻网站结构规划
四、确立网站结构的原则
（二）分类合理 网页分层的成功，实际上建立在信息分类成功的基础上。网站信息分类，
应根据该网站新闻信息的特点、目标网民的特点和网站经营的特点等方面 来综合考虑，将网站信息按照一定的逻辑条理进行细分。 以MSNBC为例： 新闻信息特点：信息量大，以视频和自主产品为主。 目标网民：多数是NBC新闻频道的用户 网站经营特点：以视频为主打 具体实施：掌握分类标准、其名称应符合网民阅读习惯、名称应相对固 定、不虚设类目。
很大的差异。 （一）报纸靠自然版序和版序来查找信息 自然版序：是依自然翻看的先后顺序，用数字标明的各个版的序号 版序：是用简短的文字，如“要闻”、“国内新闻”、“本地新闻”
等，来说明各个版面刊载的信息内容。 （二）网页靠超链接来浏览信息 超链接包括哪些：文字、图片、声音、动画、视频
一．新闻网站结构规划
1、最关心、最常用的内容或服务
2、编辑进行强化处理的地方
二、新闻网页设计与受众阅读习惯和需求
虽然不同网民的视线第一落点不同，但是，网站尽量让自己的重点推荐内 容成为多数人视线的第一落点。
例：中国网络电视台（中间焦点大图就是为了突出它的视频）
二、受众视线扫描的核心地带
屏幕右部区域更容易成为核心地带，因为他与滚动条更接近。 例：新浪网
二． 新闻网页设计与受众阅读习惯和需求
谢谢！
宁良红 2011年10月25日
Байду номын сангаас艺术设计系
服装设计与 工程系
机电与信息 工程系
一．新闻网站结构规划
学生作品
系内动态
四、确立网站结构的原则
（三）信息易找 要使网络新闻信息容易查找，应注意以下两个方面： 1、导航条让人一目了然（央视网2008、2011） 2、提供高效的搜索（CNTV、BBC、新浪）
一．新闻网站结构规划
一、受众视线在页面中的第一落点
二． 新闻网页设计与受众阅读习惯和需求
视线的第一落点也容易影响核心地带的形成
中国网络电视台零首页大图（视频）推荐区很容易成为用户打开页面之后的第一落点 ，所以以第一落点为中心很容易形成网民浏览的核心地带。
二． 新闻网页设计与受众阅读习惯和需求
三、不同类型信息吸引受众视线的能力
对于新闻网站来说，网民首先看的是文本，而后才是图片和视频。但随着 多媒体呈现方式的转变，网民的浏览习惯也发生了改变，色彩鲜明的图片 对网民的视觉冲击力越来越强。 网站的页面风格与受众阅读习惯之间是一个互为作用关系，一方面，网站 的页面风格会影响到受众的习惯，另一方面，当受众习惯反作用于网站时 ，网站的页面风格会延续下去。 央视网首页改版 首先要先给自己的网站定位 做好改版前的准备工作——用户体验调查
新闻网站的结构规划
• 网页的超链接功能 • 网页的层次结构 • 新闻网页结构规划的思路 • 确立网站结构的原则
新闻网页设计与受众阅读习惯和需求
• 受众视线在页面中的第一落点 • 受众视线扫描的核心地带 • 不同类型信息吸引受众视线的能力
一、网页的超链接功能 由于网络具有超文本链接技术，网页的结构与报纸版面的结构有了
一．新闻网站结构规划
（三）网状结构 网状结构，指网页之间是呈网状联系的。即网页A、B、C、D、E之间
的链接是网状的，可随意地互相链接。 缺点：如果不科学地将各种页面按照信息的分类来分层处理，就容易出现不分层次、
不问条理、乱连一气的网状结构。
一．新闻网站结构规划
三、新闻网页结构规划的思路
新闻网站页面分类：导读页（首页或频道页）、正文页。 新闻网站的结构表现方式两类： 中国特色：平面主导式，新浪、搜狐。 国外新闻网站：立体主导式
一．新闻网站结构规划
四、确立网站结构的原则
（一）分层合理
要做到合理分层，首先应考虑网站内可能会发布些什么样的新闻信息， 按照这些新闻信息的属性和特征，在根目录下分成若干层级的子目录，组 成一个有层次的、逐级展开的树形结构体系。
校园网为例：
学校主页
校园概况
校园新闻
院系设置
教务教学
招生就业
外语系
经济管理系
一．新闻网站结构规划
（二）树形结构 树形结构，指网页之间是分层联系的。若以网页A为树干（即主页），
网页B、C为树枝，网页D、E为树叶，那么，从网页A可以链接到网 页B、C，从网页B可以链接到网页D，从网页C可以链接到网页E。 也可以依次回链。但树形结构严格按照由树干到树枝、由树枝到 树叶的方式层层相连，不能跳层相连 举例：MSNBC、BBC
二、网页的层次结构 网站的层次结构，根据链接的线路不同，可以分为三种：线性结
构、树形结构、网状结构。下面以A、B、C、D、E几个网页的链接 结构为例，说明三种网页层次结构的具体构架形式。 （一）线性结构 线性结构，指网页之间是单线联系的。即，从网页A可以链接到网页 B，从网页B可以链接到网页C，从网页C可以链接到网页D，从网页 D可以链接到网页E。也可以依次返回，从网页E回链到网页D、C、 B、A。但网页A、B、C、D、E却不能跳跃式地自由联系。 一般内容较少的小型企业网站多采用这种模式。
一．新闻网站结构规划
四、确立网站结构的原则
（二）分类合理 网页分层的成功，实际上建立在信息分类成功的基础上。网站信息分类，
应根据该网站新闻信息的特点、目标网民的特点和网站经营的特点等方面 来综合考虑，将网站信息按照一定的逻辑条理进行细分。 以MSNBC为例： 新闻信息特点：信息量大，以视频和自主产品为主。 目标网民：多数是NBC新闻频道的用户 网站经营特点：以视频为主打 具体实施：掌握分类标准、其名称应符合网民阅读习惯、名称应相对固 定、不虚设类目。
很大的差异。 （一）报纸靠自然版序和版序来查找信息 自然版序：是依自然翻看的先后顺序，用数字标明的各个版的序号 版序：是用简短的文字，如“要闻”、“国内新闻”、“本地新闻”
等，来说明各个版面刊载的信息内容。 （二）网页靠超链接来浏览信息 超链接包括哪些：文字、图片、声音、动画、视频
一．新闻网站结构规划
1、最关心、最常用的内容或服务
2、编辑进行强化处理的地方
二、新闻网页设计与受众阅读习惯和需求
虽然不同网民的视线第一落点不同，但是，网站尽量让自己的重点推荐内 容成为多数人视线的第一落点。
例：中国网络电视台（中间焦点大图就是为了突出它的视频）
二、受众视线扫描的核心地带
屏幕右部区域更容易成为核心地带，因为他与滚动条更接近。 例：新浪网
二． 新闻网页设计与受众阅读习惯和需求
谢谢！
宁良红 2011年10月25日
Байду номын сангаас艺术设计系
服装设计与 工程系
机电与信息 工程系
一．新闻网站结构规划
学生作品
系内动态
四、确立网站结构的原则
（三）信息易找 要使网络新闻信息容易查找，应注意以下两个方面： 1、导航条让人一目了然（央视网2008、2011） 2、提供高效的搜索（CNTV、BBC、新浪）
一．新闻网站结构规划
一、受众视线在页面中的第一落点
二． 新闻网页设计与受众阅读习惯和需求
视线的第一落点也容易影响核心地带的形成
中国网络电视台零首页大图（视频）推荐区很容易成为用户打开页面之后的第一落点 ，所以以第一落点为中心很容易形成网民浏览的核心地带。
二． 新闻网页设计与受众阅读习惯和需求
三、不同类型信息吸引受众视线的能力
对于新闻网站来说，网民首先看的是文本，而后才是图片和视频。但随着 多媒体呈现方式的转变，网民的浏览习惯也发生了改变，色彩鲜明的图片 对网民的视觉冲击力越来越强。 网站的页面风格与受众阅读习惯之间是一个互为作用关系，一方面，网站 的页面风格会影响到受众的习惯，另一方面，当受众习惯反作用于网站时 ，网站的页面风格会延续下去。 央视网首页改版 首先要先给自己的网站定位 做好改版前的准备工作——用户体验调查