网站设计的关键要素和页面制作技巧

　　摘    要：　信息时代，互联网技术的快速普及以及相关设备、设施的不断完善，使得网络逐渐演变为全球最大的信息传播平台，越来越多的企业和个人开始建设自己的网站。针对网站设计的要点进行了分析，重点剖析了网站主页的构思以及设计方法的选择，并以此为基础，给出了有关网页制作的注意事项，以期为网页制作、网站设计的学习提供一定的参考。

　　关键词：　网站建设; 设计方法; 网页制作; 技巧;

　　在互联网时代，面对面交流不再受到地域的限制。这一变化带来的最为显着的效果，就是企业经营格局的变革，与以往的经营模式相比，互联网技术提供的支持使得诸多企业能够将自己的业务开展至更加广泛的范围，使得企业有了更广的发展空间与更多的发展契机。但互联网时代的交流与合作，也需要企业积极应对网站建设方面的挑战。而对于个人，或是出于好奇，或是出于信息分享、交流等目的，也有不少建立个人主页，并获得了一定成果的例子。在此背景下，网站建设、网页制作的学习成为了一种潮流与趋势。

　　1、 网站建设的重要意义

　　目前，互联网用户数已经超过30亿，在如此庞大的用户基数中，企业以网站的建立为基础，尽快融入互联网大环境，能够增加全球的互联网用户接触企业业务的机会，其中一部分可能成为企业未来发展的合作伙伴，另一部分则可能发展为企业业务的消费群体。以用户与企业之间的交流为例，在信息时代，企业通过网站的建设构建自身的形象，宣传自己的企业文化以及现有业务，能够起到较好的“广告”效应，帮助用户了解企业的现况；而从用户的历程来看，每天通过浏览相应的网站获取信息更加符合当下环境、更能体现与时俱进理念的一种信息获取渠道，借助企业网站公布的信息，了解企业业务发展的最新状况与今后动向，并通过网站提供的交互工具，就自己存在的问题向企业方寻求解答，是一种更加高效、便捷的信息交流方式。换言之，网站的建设对信息资源的了解、用户反馈信息的收集、营销活动的开展以及商业交往等皆有重大意义。而从企业宣传的角度来看，虽然网店、微博、门户博客等平台能够起到展示企业文化、经营现状的效果，但网站仍然是重要的展示方案，建设一个与企业自身的形象、文化相称的网站，是全网开放背景下企业发展的重要抉择。

　　2、 网站设计关键要素

　　网站建设的学习，首先需要明确的是网站设计的关键要素以及网页设计必备的核心技能。通常情况下，网站的建立都会经过“分析策划—交互设计—视觉设计—前端制作—后端制作—测试上线”6个环节。在分析策划环节，网站主题的确定将直接左右整个设计过程的走向，若设计者不能对客户的需求进行准确判断，将很容易出现最终输出产品偏离既定主题的现象。在视觉设计方面，色彩的合理搭配以及栏目板块的合理编排，可直接影响到输出产品的视觉效果，继而对用户浏览该网站的兴趣产生相应作用。除上述两项要素外，网站风格的确定在网站设计过程中也扮演着重要角色。
 

　　2.1 、网站主题

　　在网站建设中，网站设计是生产运营的技术支撑环节，整个制作过程要求最终的作品输出是为企业、商业产品服务的。因此，在确定网站主题时，针对企业的网站，应当将企业文化价值进行准确传递；针对产品的网站，需要尽可能保证产品功能属性向潜在客户传递的效果。而实际操作中，初学者首先应当审慎思考的问题是：（1）网站的主题是什么？（2）设计该网站最重要的目的是什么？（3）该网站面向的主体主要是哪些人群？其群体特征或者浏览的习惯如何？（4）网站的主要内容有哪些？不论是企业网站的设计，还是个人主页的制作，上述问题都是需要在策划阶段明确的内容。

　　以个人网站的制作为例，在确定主题阶段，初学者最容易犯的错误就是过分借鉴国内外综合类网站的设计理念与方法，寄希望于“包罗万象”的网站主题来吸引更多的网民。从个人网站设计的初衷与目标来看，更适合作为其网站主题的应当是能够反映个体擅长领域或者感兴趣的话题的内容。而这一要求带来的直接挑战，就是选材的“小”与“精”，以及既定主题的深化，确保主题有足够的深度，内容有足够的吸引力。

　　2.2、 网站色彩

　　色彩的运用与搭配是考验设计师功底的重要环节，同时也是最容易给用户留下深刻印象的环节。从网站设计的作品输出来看，其呈现设计效果的载体———网页实质上属于平面效果设计的范畴，除开现有网站设计在动画、视频以及立体图形等方面做出的创新，色彩对整个平面呈现的最终效果带来的冲击力往往是难以想象的。在实际生活中，不难发现，一些在用色上比较“糟糕”的网站，给用户带来的综合感受往往是处于较低水平的。而在现有的知识体系中，色彩的运用与搭配更是作为一门独立的课程，“活跃”于包含网站设计在内的诸多领域。结合当前网站建设的经验与优秀设计师在色彩搭配方面总结的技巧，在网站设计阶段，色彩的选用除了考虑网站本身的特点外，还要以设计出更加精美的网站为方向，遵循一定的艺术规律。

　　色彩是网站设计的关键部分，但其出现“失控”现象的风险较高。在用色步骤上，网站色彩的选择一般会按照以下流程进行：选择主色，将其作为品牌颜色→选择1到2个辅助色颜色，创建配色方案→选择背景颜色，完成设计。实际操作中，用色可从以下角度入手，进行合理搭配：（1）遵循色彩的鲜明性、艺术性与独特性；（2）根据网站的主题选择相应的色彩，如与科技相关的技术类网站，可选择蓝色作为主色；（3）同种色彩搭配苛刻通过调整选定色彩的饱和度、透明度，兼顾色彩的层次感与统一性；（4）对比色彩搭配通常以一种颜色为主色调，其对比色作为点缀，以起到画龙点睛的作用；（5）在混用颜色时，应当尽可能保证网站的主色不超过3种。

　　2.3 、网站结构规划

　　在网站主题明确以后，对网站结构进行总体规划，是后续网页制作环节的重要前提。从某种意义上来讲，网站结构的合理规划，对栏目板块的编排、网站内容的组织乃至整个网站的设计都有莫大的帮助。如果将网站建设比作建筑项目的施工，网站结构的规划就是整个项目施工的设计图纸，如果缺少设计图纸，或者图纸的内容与项目实际不符，最终生产出的产品质量将受到极大影响。而网站设计亦是如此，要保证网站建设完成后能够达到既定的效果，就必须以网站结构的合理规划为前提。换言之，在网站机构的规划阶段，应当根据网站建设的相关内容，列出网站的大纲索引，而后根据索引合理编排栏目板块。

　　从内容编排的合理性角度考虑，主栏目应当放置与网站主题密切相关的内容，与网站相关的其他辅助信息（如个人信息等）则应当尽量放在网站的最底部或者左侧、右侧，避免辅助信息出现在不恰当的位置，冲淡主题。而在版面布局方面，网站建设常见的结构类型主要有以下几种：（1）国字型布局，页面最上方为网站的导航栏、标志或者广告，页面中间放置主要内容，最下部主要放置联系方式、版权等辅助信息；（2)T型布局，页面最顶部为标志或者广告，下方左侧为导航栏，右侧为网页正文信息；（3)POP布局，以精美海报画面为布局主体。结合既往经验，网站结构的规划需要以最适合用户浏览的方式，将网页的主要内容排放在相应的位置，而高度重视布局对网站设计的意义，深度挖掘浏览者的信息获取需求，以友好、舒适的结构，提升用户的访问体验，是将用户所需信息进行充分展示的可行方案。

　　3 、网页制作技巧

　　3.1 、网页内容的合理筛选

　　在网页制作环节，内容的合理筛选对浏览者的信息获取有着重要意义，而网页内容的筛选需要以框架设计为前提，即根据网站框架情况，决定网站内容的含量，对相关内容进行合理精简。从浏览者的浏览习惯来看，用户停留在每个页面的时间并不会太长，如何在有限的时间内，提高其继续阅读的兴趣，就是网页内容筛选环节需要深入探讨的话题。在网页设计学习中，内容构建策略可谓是学习的一大难点，但同时也是内容筛选的技巧之一。根据该策略，在第一阶段，需要组织网站的框架内容，对网页主旨进行明确，并围绕内容的收集、筛选建立清晰脉络；在第二阶段，需要明确网站持有者、用户的利益，考虑信息传播空间渠道、技术执行等内容；在第三阶段，则需要匹配网站适用群体，掌握其实际需求；第四阶段，列出页面内容的初分类；第五阶段，着手进行层级内容规划与单网页内容规划；第六阶段，以前期工作获得的成果为基础，规划信息架构图。其中，层级规划策略能够较好地将网站内容进行层级细节化，使整个网页的设计更具逻辑性。

　　3.2、 网页制作过程的注意事项

　　结构的编排与色彩的选用虽然在规划阶段已经有了初步方案，但在网页制作的过程中，仍然不可避免地会遇到一些实际问题。针对这些问题，较好的处理策略是统一网站的风格，在确定网页制作的方向后，围绕主页、子页内容进行恰当处理。以主页为例，在制作时需要关注用色是否合理、编排是否能够满足用户需要、链接方式是否可靠等问题。而制作特效时，考虑到用户浏览的流畅性，应当优选JavaScript，并尽可能减少动态网页、视频、声音等元素。对因网站主题需要，涉及大量图片时，应当考虑以缩略图链接的形式，兼顾加载速度与信息展示效果。其次，考虑到不同分辨率的图片在加载、下载速度方面的差异，制作时应当合理设置注解，以帮助浏览者了解图片的基本信息，改善其浏览体验。

　　4 、结语

　　在网站建设刚刚起步的时期，不少初学者通过学习、借鉴国外网站设计案例，摸索出了一些与网页制作、网站设计相关的技巧。近年来，在各大网络自学平台以及网络技术辅导班课程体系上，也总少不了网站建设的影子。但对初学者而言，仍然需要明确其设计的要点与注意事项，尽可能规避一些常见错误。

　　参考文献

　　[1]吕临林,刘恒.项目案例教学法在高职“网页设计与制作”课程教学中的应用研究[J].新校园(上旬),2017,(4):109-110.
　　[2]杨小伟.翻转课堂教学模式在中职网页设计与制作课程中的实践研究[J].新智慧,2017,(15):77-78.
　　[3]朱彦斐.Flash动画制作技术与网页设计的融合研究[J].科技资讯,2019,(19):35-36.