网站网页设计范例6篇

　　天选团队现代智能手机和平板电脑的使用率日益普及，桌面版网站浏览的关注度正处于下降趋势，但由于B2C领域的发展，桌面版网站在今后的时间里也将成为网络发展的重要战略方向。在许多电影的官方网站上，由于B2C商业化模式的激励，电影官方网站的设计在内容呈现、浏览互通的方式上下足了功夫，促使网站设计师制作出了许多设计优秀且让人为之惊艳的网页UI设计，起到了有效的营销推广作用，正是如此，我们可以从电影网站的设计中看出些许未来网页UI设计的风向标。本文将从电影网站的设计中浅析未来网页UI设计的部分趋势及改变。

　　在《侏罗纪世界》和《王牌特工》的网站初始背景中，设计者分别运用电影内片段和场景景深变换，使用户在登入网站时能很快地融入到电影主题中，这种新颖的设计方式已得到多数设计师的青睐。随着Flash应用的衰退，大多数PC网站普遍不加入动态变化，而在UI中加入视频的网站却逐渐增多。在HTML中插入视频，需要插入“video”标签，此标签于HTML5中供给使用，HTML5对多媒体网站支撑主要通过包含元素项来兑现，主要包括Video、Canvas、Audio等元素。其中，Canvas元素拥有十分重要的效用，它好似一张画板，通过该元素自带的API联合JavaScript代码，可以在这个画板上绘制各种图案图像以及动画；而“Video”和“Audio”作为视频、音频特征标记，使视频、音频从此不必绑定在Object或Embed标记中,既提高了网页应用的安全性和稳定性，也在一定程度上提高了用户体验，随着近些年主流浏览器支持HTML5，使得利用视频的环境更加容易。Web网站和APP程序在页面跳转上是否有接缝这点上略有不同，随着Flash的没落，HTML的网站成为主流，页面跳转使用页面刷新，变得乏味陈旧。然而，通过Pjax让web网页实现了像APP那样的无缝跳转，如同插入JQuery一样，PC版网站也可以做到页面间的无缝画面跳转。Pjax的使用，大大提升了用户体验，是很多主流网站，如facebook等都支持的一种浏览方式。在电影《饥饿游戏》（TheHungerGames）的官网上，点击左侧栏链接时，页面不做跳转，而只是站内页面刷新，这样的用户体验比起整个页面刷新来说，视觉好上很多，也给用户一种未来科技的代入感。Pjax维护了web原本的构造，在页面跳转时便替换了原定的代码，让页面保持整洁，有利于SEO（搜索引擎优化），Pjax成功取代了Flash和曾经的Ajax。

　　PC网页常常在有限的空间内加入大量单一button元素的设计，但如今的潮流趋势将UI部件推向了大型化（BigUI）、低密度（LowDensity）和长页面（LongPage），加之Microsoft推出的Window10和Apple的ios9中倡导的扁平化设计，扁平化设计已经在现行的APPUI中逐渐普及。《侏罗纪世界》的网页上，我们看到设计师很明显地将上述元素运用到位，右侧栏的button大型化，模仿window8和window10中的“开始”界面栏。点击网页下方六边形的button可以推出长页面，增加了用户互动元素，整体网页布局采用低密度形式，从使用者角度更容易浏览、理解，减少了网页内容的指向性错误，也让网页可以更好地利用触摸屏幕进行浏览，使部分移动设备得以全方位体验网页。这些年来，许多新型笔记本电脑上安装了触屏,而触摸屏的使用出自手指点击，时常不能进行精准操作，因此用户界面增大，元素和button之间要留出充分的空间，页面中表现元素变得清晰，方便页面滚动浏览。作为大型化、低密度、长页面这三大项要素的合适布局，趋势为一栏布局。一栏布局对于使用者，不会再有不需要的杂项入眼，使重要的内容汇集在一起，页面上的文字更容易被阅读，图片被展示得更大。在今年日本热门电影《百元之恋》的网页上，就采用了典型的一栏设计，在banner部分贴出大幅的电影海报，信息栏则简要地展示电影近期动态和文字新闻，去掉了侧边栏导航条，让网页的层级得到降低，减少了选项菜单，只留下banner下方的选项栏。关于扁平化设计，iPhoneios7以来就在设计界刮起了追崇之风。扁平化设计是不使用任何额外效果的设计，去掉3D化效果，无多重阴影、斜角、立体浮雕等创建出的凸起或凹陷的效果。扁平化网页元素并不是拒绝一切修饰效果。首先，扁平化元素关注颜色，通常使用色彩明亮鲜艳的色彩。与此同时，扁平化也注重文字，很多扁平化处理只会涵盖很少的文字，为了达到让用户易辨识的使用感受，设计中需要注意每一处文字的长度和字体的应用。

　　SVG(可缩放矢量图形)格式可以算上目前最为热捧的图像文件格式，与其他格式相比，SVG不会像JPEG、GIF和PNG依存于尺寸和分辨率，无论环境变化，无论扩大减小，都能够正常输出显示。图片尺寸格式相对更小，技术上可以制作成动画，设计出高分辨率的Web图形网页，图片格式适合在移动端和多种设备下阅览。当今设备的多样化，画面的分辨率出现了彻底的改变。以前，宽度符合960px~980px就可以解决问题，如今对于分辨率多用化，最符合页面宽度的布局当属液态布局。设计元素和图片不是用像素来定义，而是使用百分比，就好比将液体倒入容器中，当容器的形态发生变化时，液态的形态也将跟着发生相应的改变，因此无论什么分辨率的网页，都能够被布局成拥有一定平衡感的页面，这样也解决了适应小型或大型屏幕设备时的缺点了。《模仿游戏》的图片浏览页面就很好地做到了两者结合，看似排列不同的矩形SVG图片方阵，通过跟随浏览器大小的变更，排列从全屏时的四行排列，缩小浏览器视窗后变为两行排列，这样也无需左右调节滑动条进行浏览，而电影剧照的图片清晰度也未发生改变，仍然保持着很好的用户体验。

　　综上所述，本文通过国外电影网站洞悉了一些网页UI设计趋势。值得一提的是，趋势这样简单的概括难以在设计领域长青，前端设计往往要做的就是打破设计的框架，让使用者眼前一亮却恰到好处。了解趋势是重要的，把握这个背景的网页用户的动向也不容忽视，在没有了解用户需求本质的情况下，如果只是为了追求网站的设计，效果未必能够达到预期。优秀的电影网站设计，在大商业环境下不断涌现，跟随这样的设计趋势，不是普通网页UI设计师的必选项，但可以说是一个非常不错的选择。

　　[1]徐镇辉.基于HTML5的视频网站设计与Web前端EPG系统实现[J].漳州职业技术学院学报,2013（2）.

　　随着社会经济的快速发展和科学技术的日益进步，网络在人们的日常生活工作中的作用愈发明显，在推动我国社会经济发展和改善人民生活水平等方面具有重要意义。因此，在网站建设中要更加注重网页设计的创新性，进而推动网站建设的实施进程，注重用户的良好体验，实现企业的建站目标，向用户传达具有价值的信息、产品、理念和文化，增强企业网站的竞争力。

　　网页设计的好坏对网站建设起到关键性的作用，美观的网页设计可以为企业树立良好的品牌形象，向用户展示企业的自身风采，提高企业知名度，使企业在市场竞争中处于有利地位，网站建设有效的满足了企业业务自动化的需求，使企业的运行机制朝着科学化、快捷化、高效化的方向发展，优化了企业的内部结构，对企业的产品起到了重要的推广作用，实现了资源的有效合理配置。网站作为现代科技发展的重要产物，更加注重用户体验，有效的实现了网页设计的最高价值，将以人为本的设计理念在网站建设中深入贯彻，将用户的人文主义情感在网页设计和网站建设的实际操作中得到重要体现，使网站建设更加具有人性化特征。

　　实用性原则。网页的人性化设计推动网站建设的实施进程，以增加用户的访问量为主，因此就要为客户提供更加具有人文特征的多功能界面和生活化的产品，以贴近用户的实际生活为主要着力点。快速性原则。在网站建设过程中要保证网页的打开速度快，这是网站留住用户的关键性因素，网页设计过程中要将重要的内容放在网站的首页，着重体现网站给用户提供的主题，保证用户可以及时浏览到信息。丰富性原则。网页设计要保证内容的充实，再进行功能性划分，最后进行细节性处理，以此来丰富网站建设的内容，用户对网站的持续点击量主要来自于网站的内容，这是影响网站质量的直接性因素。人性化原则。网页设计要以用户的实际需求为主要出发点，这是网站建设品质优秀的重要保证，因此，网页设计和网站建设要服务周到，体现人性化特点，努力实现用户的需求，进而增加用户对网站的满意度和信任度。

　　网页设计与网站建设的视觉效果要以吸引用户的注意力为主，保证在设计和实施过程中可以做到大方美观，这就要求网页设计与网站建设的视觉效果要达到专业化水平，给用户以强烈的视觉冲击为主，从文字和图片的分配为主要出发点，进行广度和深度的设计，将抽象化的实际理念转为具象化的视觉效果，并形成具有网站自身独特风格的建设导航。在色彩搭配方面要注重颜色之间的固定搭配，如蓝白橙、绿白蓝、橙白红、暗红黑等，突出标准色彩，尽量将色彩控制在三至五种色彩以内，并且背景和前文的对比效果要比较明显，但是不要使用花纹繁琐的图案作为背景，以此来突出主要文字内容。不同的色彩搭配对主题内容的表达可以起到不同程度的渲染作用，吸引用户注意力。

　　网页设计和网站建设过程中要对内部空间结构进行合理设计，根据明确的主题对内容进行有针对性和规律性的划分，分别根据空间结构进行文字、图片、动画等因素的合理添加，最后确定网站的整体风格。网页设计与网站建设的结构要以用户的根本需求为出发点，尤其注意网站建设时的逻辑链接结构、目录机构，使其机构更加趋于合理化，页面的主次性要明确，切忌喧宾夺主，突出重点，并对各种信息因素进行专业化的总结归类，使用户在网站使用和网页浏览时轻而易举的找到所需要的东西。

　　网站建设的实际应用要更加注重模块设计的功能化，功能范围的落实是确保网站实施的关键所在。网站建设的模块设计包括新闻系统模块、公司信息系统模块、下载中心模块、会员管理系统模块等，因此，在进行功能性设计时要根据用户的不同需求制定具体的可行性方略，模块设计的功能化趋势可以使网站的使用和实施更加人性化和科学化。如下载中心模块，是网站管理者提供用户下载资料的功能性区域，管理者可以通过后台，实现在线增加、修改已的系在信息。

　　当前是信息化时代，网络作为作为世界最大的信息传播平台，越来越多的商家和个人开始重视建立自己的网站，如何制作一个网站并且告诉浏览者这个网站是做什么的，吸引浏览者关注这个网站，这就是我们下面所要介绍的。一个网站不但要做到操作方便，引人入胜，趣味盎然，还要告诉浏览者它的用处：我能在这里找到什么，我能做什么，如何从众多的网站中脱颖而出，并且把网站的主题“思想”快捷的承现在浏览者眼前，这些设计都是有讲究的。

　　开始着手策划制作网页首先面临的问题便是明确我的网站主题，要做什么，面向哪些主体，包含什么内容。特别是对初学者建立个人网站来说，不要做得像综合网站那样大而全，网站的选材要小而精，明确一个主题，把你认为最精彩的，自己最感兴趣的内容放在上面就可以了。好多初学者认为我要把网站做得全一些，包罗万象才能吸引更多的浏览者进来，但往往事与愿违，给人的感觉是样样有却样样都不精，因为您不可能有那么多的精力去维护它。所以明确一个主题把它内容做深、做透、办出特色来，这样才能给浏览者一个深刻的印象。

　　主题明确以后，就要对整个网站结构做个总体规划。一个网站的建设就像设计一栋大楼，在进行设计前必须要有个设计图纸：主页上要有什么栏目，突出什么内容，所谓栏目实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来，你可以将网站内最有价值的内容列在栏目上，在制定栏目的时候，要仔细考虑，合理安排。尽量从浏览者的角度编排以方便他们的浏览和查询，一些辅助信息就不要放在主栏目里，如个人信息、版权信息等以免冲淡主题。

　　一般情况下，网站常见的版面布局结构为：上边为网站栏目，下边为网站内容；左边为网站栏目，右边为网站内容；主页全为网站栏目，分页为具体内容。

　　除了栏目板块的编排，我们还要考虑到网站的文字和图片的布局，颜色的搭配，后期网站的更新和维护等问题，有的初学者经过短暂的学习就开始制作网页，想到什么就做什么，结果发现做出来的网站结构不清晰，条理混乱，浏览者看得很糊涂，制作者在扩充和维护网站也相当困难。所以我们在制作网站前，一定把这方方面面考虑清楚再动手。

　　风格是指网站的整体形象给浏览者的综合感受，它通过网站的版面布局、浏览方式、文字、色彩、交互性等因素承现出来，它就像一个人的性格：你是希望它是粗犷豪放的，清新秀丽的，生动活泼的，或是温文儒雅的。通过它的“性格”让浏览者分辨出你的网站与其他网站的不同处。这就形成了网站的“风格”。

　　一个网站设计的成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计是一种平面效果设计，在排除立体图形、动画效果外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象，也是体现网页风格的关键。因此，在设计网页时，必须要高度重视色彩的搭配，我们可使用混用颜色，即网站主色不得超过3种，采用这三种的混合达到其他效果；加强颜色对比，即以一种颜色为主色调，对比色为点缀，起到画龙点睛的作用等方式来组织网页颜色。

　　在以上工作做好以后，还有一点也是我们要考虑的——选择合适的网页设计软件。在当前我们能使用的网页设计类软件越来越多，而选择一个功能强大、操作简单的软件则会让你事半功倍。对于网页制作软件来说，初学者最常使用是Frontpage

　　和Dreamweaver，Frontpage是微软公司出品的一款网页制作入门级软件，FrontPage使用方便简单，会用Word就能做网页，所见即所得是其特点，该软件结合了设计、程式码、预览三种模式。Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，利用它可以轻而易举地制作出充满动感的网页。

　　除此之外，我们还应了解一些制作网站所用到的边缘性软件，如photoshop、flash等，Photoshop是集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，如作为网站主页来说，因要设计成一幅图片，可选用位图图像，制作工具就可以选择Photoshop；flash是一种动画创作与应用程序开发于一身的创作软件，它包含丰富的视频、声音、图形和动画。网页设计者使用Flash创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。这两个软件深受广大平面设计人员和电脑美术爱好者的喜爱。你可以根据自己的需要灵活运用这些软件。

　　前期的框架设计好后，下面我们就要为这个网站“添砖加瓦”了，这是一个复杂而细致的过程，需要我们先从简单的内容下手，再设计稍复杂的内容，以便出现问题时好修改。在内容上我们要选择有新意的、独特的，这些可以从图书、报纸、互联网等信息媒介搜集素材，素材通常分为三类——文字、图片、影像。素材准备得越多越好，再从这些素材中粗中取细，以备制作网站时可以随时拿来使用。总之，网页内容是网站的根本，如果内容空洞，页面制作的再怎么精美，仍然不会留住访问者。所以我们要多花一些心思在内容制作上，网页内容影响着网站的成败。

　　网页版面的设计要遵循一定的规律，明确编排时的重点，分清主次内容，按由主到次的顺序逐步完成编排。尤其在使用符号、图片、文字、动画等内容时，要遵循平面设计中形式美的视觉规律，强调文字、图片及色彩的搭配。同时，网页的设计必须要与网页内容想关联，不可脱离主题，仅为美学而设计。

　　页面的编排中，可以将单个的文字看做是点，成行的文字看做是线，成段落的文字看成面。点、线、面的排列要强调均衡性。三种形式要因实际情况而采用。如单个文字，用起来会十分突兀，但可以让用户一眼就看到；成段文字可以排列十分美观，但用户可能因为字数过多而放弃阅读。文字的排列方式一般有水平、垂直、倾斜，前两种容易带给人稳定，安宁的感觉，而倾斜会让人不由产生运动感。合理的结合三种排列方式，保证页面整体平衡的情况下给局部安插一些斜体字，会显得更动感而富有生气。

　　一个网站要得到用户的喜爱，其页面内容、整体布局都必须通过视觉感官使用户感到愉悦或欣赏。而精心设计过得页面相比随意的版面编排无疑要更容易吸引用户，从而增加网站的访问量。网站要通过网页传达信息，就必须要要虑到视觉元素的处理，只有拥有良好的视觉效果，才能称得上是新时代背景下真正意义上的新媒体。这就要求网页设计师们从人们的日常生活出发，更多的考虑人们的阅读习惯。对于网页版面的编排，各个元素之间的排列及其各自的大小、位置，都要结合阅读顺序。使用户保留自己的习惯，在阅读网页时感到轻松，自然。

　　网页的作用在于传递信息，而网页设计就是服务于这个目的。通过优化网页中文字、图片、色彩的造型、排列和放置，使网页更美观，更容易让人获取信息。如何处理文字、图片和色彩，值得我们做更多的讨论。

　　文字是传递信息的核心部分，网页设计中一定会涉及文字的处理。且一般来说文字占整个页面篇幅较大，因此文字处理好坏直接影响到整个页面设计的水平。设计师在进行处理时需要考虑文字编辑的整体效果，应尽量给人以简洁亮丽的视觉效果，要避免页面中文字效果凌乱、复杂，过多刻意的修饰若使用不当反而会适得其反，因此在必要时，可以不加修饰，仅保留文字本身。此外，设计时还应注意文字的格式、大小及字体要配合文章内容。总而言之，要合理运用美学的观念编辑文字。

　　0引言 随着网络技术和网络规模的不断发展以及电子商务的兴起，许多企业都建立了自己的商务网站，针对网络和计算机系统的攻击已经屡见不鲜,在构建网站的时候，都会考虑网络安全问题，对于网络安全的投入较大，如使用防火墙、入侵检测、企业防病毒等安全产品，但网站还是有被攻击,甚至完全被控制的可能。因为企业的网站一般都采用ASP、PHP或JSP等脚本语言来连接数据库，取得数据库里面的数据生成动态网页。当一个网站完全建立后，程序会很多，特别是网页设计的特殊性，服务器与用户的交互程序更多，所以，程序的漏洞也会增多，给网站带来不可估量的安全隐患，这些程序漏洞比网站服务器的漏洞更为严重 [1][2][3] 。

　　1网页设计安全漏洞的形成ASP、PHP或JSP等脚本语言作为典型的服务器端网页设计技术，为网站开发人员提供了简单高效的动态Web应用程序开发方法。在网站设计时，使用上述脚本语言编程可以更好地管理网站资源，增加网站与浏览者之间的交互，如新闻系统、产品管理系统、会员管理系统、论坛反馈系统、在线调查系统、在线订单系统和留言板系统等，其共同点是用户输入很多资料，与其他浏览者交流或者与网站管理者交流。。而交互正是漏洞形成的一大原因，因为用户输入信息不可预测，如果程序没有考虑或者考虑不全面，用户输入就有可能成为攻击事件，且不管有意还是无意。网页编程直接和服务器打交道，与网站目录、网站数据库设置、系统设置相关，通过这些程序访问网站目录、设置等所有服务器内容，若程序设计有漏洞，即网站有漏洞。

　　2网页设计的安全漏洞及对策2.1登陆验证漏洞凡带有交互性的网站，包括论坛、聊天室、信息网会员区、网上影院等，登陆验证是必不可少的组成部分。。虽然登陆的验证程序只是网站整体的一部分，但却是网站的安全关口。网站设计者容易疏忽这一点，没有处理好口令验证程序的关口，以至他人趁虚而进，甚至造成重大影响与经济损失。许多网站都存在一个登陆验证的漏洞，而这个漏洞是在编写程序验证账号密码时由于程序不严谨而造成。。如在设计网站会员区时，都会将账号、密码放在一个叫“User”的数据表中，并设置“username”和“password”两个字段分别表示用户的登录名称和登录密码。当验证时，检查用户输入的两个参数是否存在于这个数据表，如果存在，证明这个用户合法；不存在，证明用户不合法，而漏洞就出现在这段验证代码上。

　　在登陆验证(以asp为例)中常会用SQL查询语句来判断该用户是否为站点的合法会员。

　　1） 生成SQL查询语句之前，对用户输入的参数(用户名和密码)进行过滤；

　　2.2绕过验证直接进入设计页面漏洞每个敏感的页面必须进行身份验证，如果用户知道了一个设计页面（如用ASP）的路径和文件名，而这个页面又没有验证的程序，则用户可直接输入这个设计页面的文件名，即绕过了登陆验证，直接进入了指定的页面。。网站设计者除了登陆验证外还必须在有关页面进行身份验证，才能提高站点的安全指数。。

　　2.3桌面数据库被下载漏洞在ASP＋Access应用系统中，如果获得Access数据库的存储路径和数据库名，则该数据库可以被下载到本地。。如对于网上图书馆的Access数据库，一般命名为Library.mdb等，而存储的路径一般为“URL/database”或放在根目录（“URL/”）下。这样，只要在浏览器地址栏中输入地址 “URL/database/Library.mdb”，就可以轻易地把Library.mdb下载到本地的机器中。

　　在ASP程序设计中，应尽量使用ODBC数据源，不直把数据库名直接写在程序中，否则数据库名将随ASP源代码的失密而一同失密，例如：

　　可见，ASP源代码失密后，数据库也很容易被下载。如果使用ODBC数据源，则不会存在 conn.open

　　“ODBC－DSN名”。2.4 源代码泄露漏洞为有效防止源代码泄露，可以对页面代码进行加密。

　　使用组件技术存在的主要问题是每段代码均需组件化，操作比较烦琐，工作量较大，而使用Script Encoder对ASP页面进行加密，操作简单、收效良好。Script Encoder方法具有以下优点：

　　代码，其他部分仍保持不变，故仍可以使用FrontPage或Dreamweaver等常用网页编辑工具对HTML部分进行修改、完善，但不能对ASP加密部分进行修改，否则将导致文件失效；

　　2） 作较简单，只要掌握几个命令行参数即可，Script Encoder的运行程序是

　　3） 用Script Encoder可以对当前目录中所有的ASP文件进行加密，并把加密

　　后的文件统一输出到相应的目录中，例如：screnc ＊.asp c: emp；

　　2.4文件上传漏洞许多网站如论坛、同学录、邮件服务系统都提供了文件上传的功能，但设计者在设计用户提交参数缺少充分过滤，以至远程攻击者利用这个漏洞可以上传恶意文件，甚至造成系统数据库破坏或以Web权限在系统上执行任意命令。例如iXmail包含的“ixmail_attach.php”脚本对用户提交的附件缺少充分过滤，攻击者可以通过操作URL参数上传恶意文件(如php文件)到服务器上，虽然文件放置在Web目录下的/tmp目录中，但可以远程访问，因此攻击者可能以Web进程权限在系统上执行任意命令，故在文件上传之前，加入文件类型判断模块，并进行过滤。如要求用户上传图片时，对上传的文件格式进行判断，如果是指定的图片文件格式(如JPG、GIF)允许上传，其他格式诸如*.EXE,*.PHP，*.ASP，*.JSP等可执行或可解释的程序文件就禁止上传。

　　3 结论本文介绍了网站建设中网页设计容易出现的漏洞和解决方法，安全概念要贯穿在整个网页设计过程中，只有随时考虑安全的问题，网站才会有更强的安全性。

　　[3] 张小斌, 严望佳. 黑客分析与防范技术[M].北京: 清华大学出版社, 1999

　　2000年以来，各省的重点新闻网站纷纷开通，虽说主要定位于新闻网，但一般也是各省的代表性网站，不仅其规模在省内最大，其首页实际上成了某个省份的重要形象之一，是该省在网上的唯一面孔。所以各省重点新闻网站的业内同行实际上一直在作无声的较量，力求在开网之日有一个不同凡响的首页。有些网站开通后不久即进行了改版，欲换一副面孔即是重要动因；因为在网站开通前的筹备期通常时间窘迫，来不及对首页设计进行全方位的思考，开通后不久即会有较大缺憾并非会在预料之外。

　　新闻网站的首页要做到不同凡响、一鸣惊人，主要需要考虑三个冲击力的问题，即色彩的冲击力、布局的冲击力和logo的冲击力。如果在这三方面都能给网友以全新的感受和强烈的冲击，就达到了一个较高境界的首页设计理念。

　　省级新闻网站，实际上也兼作政府网站和地方门户网站，其首页的风格，应当是沉稳、简明、大方。与商业性网站的色彩斑澜和个人网站的简洁淡雅相比，新闻网站宜采用对比鲜明、冲击强烈的色彩作为首页的主色调。即以一两种基色的搭配的为主色，来显示新闻网站整肃而富有竞争力的特性。由于主色构成相对单一，所以宜通过较浓烈的色彩来强化人们的视觉，如果色彩过淡，感觉上会趋向于个人主页，也容易有失轻漂，压不住阵。

　　千龙网作为首家开通的省级重点新闻网，2000年3月8日首次亮相时采用了黑与白为主的基色，给人留下了较深的印象。而两个多月后开通的东方网，其首页以淡黄色为基调，过份强调了高雅，却未能形成色彩冲击方面的后发优势，这不能不说是东方网在推出三个月后就进行改版的一个重要原因。东方网（当年8月）改版后给人的第一印象，就是大胆地一扫众多网站轻描淡写的首页风格，以红与黑相间的主色调，给人以前所未有的强烈的视觉冲击，不禁令人为之击节叫好。其后，东方网由于种种原因，于2001年元旦进行了第二次改版，但依然保留了这色彩个性极其鲜明的主色调。

　　2001年5月25日，千龙在正式运行一年后首次改版，断然放弃了开网之初的黑白之色，代之以京城故宫围墙赭红与皇宫金黄色调的搭配①，色彩对比依然鲜明，但又成功地体现了千龙地处首都地域的风格定位，并给其它新闻网站提供了从地域特色和文化内涵方面寻找首页主色调的设计理念，深化了人们在首页基色定位方面的思路。相形之下，东方网则很难回答其红与黑与上海这个城市或东方文化之间的内在联系，而更多是纯美术层面的选择--红与黑历来是很抢眼的色调。上海人捷足先登了，其它省市也只有妒忌的份。

　　目前省级重点新闻网站已有十多家，但千龙、东方首页仍然以其鲜明而强烈的个性色彩鹤立鸡群。

　　相对于主色调的选择余地并不很大，首页的内容布局翻新却可以多作些文章。内容布局尽管也受到诸种限制，只能在网页固有的框架内，戴着镣铐跳舞，但有束缚才有创造，才会显示出创造的魅力，才会具有突破原有框架的新鲜感。根据这两年新闻网站首页在设计、改版过程中的一些规律性变化，可以总结出在内容布局方面的三个重要特征。

　　1、服务至上。内容布局的第一个突破，是新浪网在1999的改版中，首次将banner广告（468X60ps）移到了频道导航栏的下方，突出了频道入口，强调了在首页整体布局?quot;频道导航的纲领性作用。东方网的第一次改版，则在此基础上更进一步，不但把导航条置于banner之上，并进而把用户登录区做成一长条，也置于banner之上，这样又第一次通过内容布，体现出为网友服务的思想。这与当时各大网站经营理念从内容为王到服务为王的转变是有着密切联系的。中安网的首页虽无多少特色，但其用户服务功能甚至比东方网还要方便，即将网友最常登录的邮箱与厶?quot;两个点击按钮直接并列在首页频道导航栏下（东方网采用的下拉框选择形式，进论坛要多点击一次），最大程度地方便了网友进入。

　　2、一步提优。如何在首页上把网站的全部精彩内容直接作上链接，使网友不需进入二、三级页面就能长驱直入到网站里最优内容最佳信息，这个看似简单的问题在首页上成为现实还是有一个发展过程的。东方网2000年8月改版后的首页，还有两处引人瞩目，一是把中区下部的网站导航横向压缩了一半，省出的另一半布置为频道精选，即衙扛銎档赖淖罹实哪谌莞餮∫桓錾鲜滓场R蛭?quot;网站导航里的各个一级栏目全部展示确无必要，不可能这些栏目都很精彩，倒不如将这宝贵的空间直接展示各频道的一条最优稿，使网友不必进入各频道的首页，就可预知其精彩内容并一步点入。同年11月28日开网的北方网，几乎原样照搬了东方网的这一手法。东方网的另一?quot;突破是在首页右区中部，设置了一个栏目叫BBS精华，把论坛里的精彩妙贴也直接链上首页，既体现了新闻网站的强大编辑力量（为网友去芜取菁），也反映了对直接来自网友的观点和看法的尊重。新闻网站首页的内容布局，在突破上应当永无止境。可以吸取传统平面媒体的经验。对logo的位置、banner的位置及新闻图片的位置，作出更加大胆的设计。如logo为什么只能放在右上角并水平放置呢，能不有竖起来放到左上角、象某些报纸的名称那样呢？又如，新闻标题为什么非要全部横排呢，能否划根据不同的新闻类别，划出部分标题实行竖排呢？在改版后的千龙首页右区，千龙互动和首都导航两个栏目下的标题就已实行了竖排方式。

　　3、寸土寸金。人们登录新闻网站，主要是获取各种新闻性信息。故新闻网站的首页理应显示出紧凑的布局，在单位面积里传达出最大的信息量，而不能象许多大型企业的网站首页那样，以空间换潇洒。首页一般在两屏至两屏半的幅长，这里缺省的上半幅里内容的安排尤其重要，因为忙的人都不会往下拉，很可能只看个缺省的一幅，所以需要将网站的重点内容和基本服务都安排下，在安排内容时具有寸土寸金的意识。一般来说，导读和新闻图片放进缺省一幅并在主要位置并无异议，毕竟是新闻网站嘛！但对将邮箱、BBS、ChatRoom、搜索引擎、手机短信、股市查询等基本服务项目也基本纳入缺省一幅，就不是所有新闻网站都能引起足够的重视了。如果发邮件或搜索新闻还要用鼠标下拉一下，对网友是很不方便的。天选东方网在缺省的一幅里，信息量是相当大的，仅看它的中区，不仅安排了导读性新闻要目及图片，还安排了反映百姓呼声的东方直通车、热门专题集锦东方热点，以及包括股市查询、天气预报、求医问药在内的生活锦囊，甚至英语新闻要目也上了缺省这一屏，显示其国际大都市风貌。东方网中区上部这一块看起来有点乱，实质精心安排也！千龙网也把它?quot;拳头产品千龙黄金耳（音频新闻）、环球见闻（视频新闻）、Flash7日（新闻故事）和48小时精彩回放（新闻回顾），悉数纳入缺省一幅。相比之下，云南新闻网、金黔在线、新疆天山网等省级新闻网站的首页的信息量就难以与东方、千龙相提并论。

　　值得指出，首页内容布局之创新，不是单纯地把有关重点栏目、深层优秀内容或banner的位置在页面框架内移来移去、重作调整，而是本着创新的理念，将网站的内容重心和基本服务，在特定的网页框架内积极调谴，推陈出新。这一过程实际上反映了网站从业人员对互联网认识在不断加深，如对互联网的即时互动等强势特质的进一步认同。

　　在首页设计过程中，即便具有了上述两种冲击力，如果缺少一个别具一格、特征鲜明的logo，仍然会功败垂成。Logo是首页的网眼，是整体艺术创作的画龙点睛之笔。一个绝妙的logo不但会使首页蓦然生辉，而且会成为整个网站的形象大使，成为员工的胸牌，成为宣传品上的标志，对网站的进一步发展有着非同寻常的功用。

　　近两年大型网站在logo设计方面有崇尚简单明了的审美倾向，往往越是知名的网站，logo设计越简单，但那是一种高明的简单，是一种认识论上循环往复、删繁就简后的简单。通常的做法是取消了独立的标志图案，而在英文域名上做文章，说得更确切点，是将英文域名中的某个特定字母拿出来，进行图象化或夸张性的变形、变色处理。

　　这方面一个典型的例子是新浪网的logo。设计者仅在黑色字体的sina中，将小写字母i上的那一点作空心处理，然后套上了一个红色帽子，象眼睛，也象火炬；顿时就妙不可言，很抽象，也很现代。新浪的logo太简单了，却击败了许多花上许多功夫精雕细琢的logo，个中道理值得玩味。另一个老牌新闻网站大洋网的logo设计，亦与此有异曲同工之妙。大洋的域名是dayoo，最后两个oo引起了设计者的兴趣，结果演变成一双眼帘不断翻动的眼睛，使人过目难忘。

　　2001年9月12日开通的西部网（），其logo是一个西字，这个西字经过拟人化变形械?quot;臂挽臂的味道，形象地表明了这是一个联合型的超级媒体航母（西部网由中国西部12家省、市、区联合主办）。东北网的logo设计，则是一个有着抗联军旗风格的东字，地方特征鲜明。但也有一些省级新闻网站的首页，看不出有进行logo设计的意识，或者干脆就没有logo，如河南网和桂龙新闻网就是如此。

　　发达国家的一些新闻网站，首页的logo设计通常都比较简单，但显得很大方。如USAToday的logo只在名称前加了个模糊的地球；Foxnews的logo只在英文域名上打上两道光束，继承似浼易錐ox电影公司的片头特征。

　　另外还有两点，值得首页设计者注意。一是首页的页面设计必须与内容紧密配合，不能脱开内容来谈形式及一切美术应用。是内容决定色彩、布局，而不是相反。因此在设计过程中，应始终对首页的内容安排引起足够的重视，对每一区域的设计都以明确本区的内容概念为基础，由此引向独到而深刻的美术创意。二是不要轻视首页设计过程中一些局部的打磨和处理，如对一个栏目bar条的图案、栏目内标题的字体等，都应当精心设计、选择；一个成功的首页给人的总体感觉，正是由每一个局部叠加而来。

　　首页的主色调、内容布局和logo，构成了首页设计的三大重点，同时也是三大难点。其形成冲击力的基本理念不仅针对新闻网站，也在很大程度上涵盖其它性质的网站。作为一项复杂的艺术创作，新闻网站的美工应把握住新闻网站的基本定位及由此决定的总体风格，与网页制作人员密切配合，在重点、难点上很下功夫，勇于创新，勇推第一，才能在首页亮相之日，取得众望所归的效果。