网页设计与制作的制作技巧

摘要：笔者经过学习网页制作后，发现在实际操作中，仍然会出现较多问题。因此本文查阅部分相关资料，试对网页设计与制作的相关内容的一些制作技巧进行整理归纳，希望能为大家提供一些较为有用的具体的可行的制作技巧。

关键词：网页设计制作;技巧;网页制作

目前，随着科技的日益进步，电脑手机等电子设备已经成为人们生活中必不可少的部分，同时利用电脑手机等查询资料也变得越来越大众化。而查询资料就需要应用网页。因此，网页等内容的设计以及如何制作出更好效果的网页则成为越来越重要的问题。如果能够有效的解决此类问题，设计出整洁好看美观大方的网页界面，将会有效提升网站的用户数量，并给予用户更好地视觉感受，也能够更好的促进网站的成长与发展。

一、网页设计中应注意的问题

在网页设计与制作之前，制作者应先仔细考虑好自己想要做的内容及大概的风格，并从观众的角度看问题，仔细思考，并为其选择合适的颜色、配乐、排版等。但设计时仍要注意一下以下的问题。

（一）适当选择背景颜色可以增加整体效果

制作者可以選择纯色或彩色等鲜艳的颜色用于背景颜色的制作。例如黑色、红色、白色、灰色或紫色等是网页中的主要颜色之一，他们一般都能产生比较好的制作效果。例如黑色具有深沉庄重等含义，可以利用它较好的展现庄严肃穆的感觉，同时线条的变化也能突出科技感。而白色是设计中最常用的颜色，它具有干净简洁的特点，同时白色与其它色彩进行结合也能够表现出空间感和通透感，彩色在白色的背景中，能够体现更好的侧重点，同时还可以起到良好的过渡作用。利用红色会给人以温暖，喜庆的感觉。尤其红色是中国春节期间的主颜色，与黄色的搭配能够给人一种灵动、活力的感觉，并在观看效果上使网页界面更为突出及时尚。同时在购物网站上，红色网页的界面也能有效的激起人的购物欲望。黄色在色彩中是明度很高的颜色，其在网页界面设计中的应用能够给予用户一种光芒以及温暖的感觉，并且彩色能够给人一种鲜艳、热烈的感觉。

（二）合理安排网页内容及结构

在网页制作环节，内容的合理筛选对浏览者的信息获取有着重要意义，而网页内容的筛选需要以框架设计为前提，即根据网站框架情况，决定网站内容的含量。那么在制作网页之前，就需要先对其进行规划。同时，受众经过长时间的观看后，对于设计良好的版面，也会使受众产生愉悦感。那么这就需要设计者进行仔细计划，首先，需要整理和组织框架内容，明确网页主旨，并围绕要求进行收集、筛选相应素材，建立清晰脉络;做好计划是其中很重要的一点。第二，要考虑具体的技术执行等内容;其次要掌握受众的群体信息，及实际需求。需要根据受众的掌握情况，安排相应的内容，不能安排过难或过简单的内容，选择适合的内容难度展现给受众;再然后，列出初分类，做好页面的制作计划;并且，着手进行层级内容的规划及网页内容的规划;最后对内容进行丰富及完善。

同时，本文提出建议，从内容编排的合理性角度考虑，主栏目应当放置与主题密切相关的内容，其他的辅助信息（如个人信息等）则应当尽量放在网站的最底部或者左侧、右侧，避免辅助信息出现在不恰当的位置，转移受众的注意力。而在版面布局方面，常见的结构类型主要有以下几种（1）     国字型布局，即把标志或者广告等内容放置在页面最上方，将最终的内容放置在中间放置因为中间位置是受众第一眼看到的部分，然后，在最下方的部分可以放置联系方式、版权等信息;（2）T型布局，即将标志或者广告放置在页面最顶部，下方为导航栏及网页正文信息。即向受众展示网页的主要内容，及本网站都有哪些内容;（3）POP布局，以精美海报画面为主体。而具体的制作方式，则需要考虑内容及整体效果等因素。

二、网页制作中的技巧

内容与色彩的选用有了初步方案后，但在网页制作的过程中，仍然不可避免地会遇到一些实际问题。以下介绍一些较好的方法。

（一）常用图片切换方式

在网页制作中经常使用两种方法实现图片切换：第一，JavaScript代码，首先创建SQL数据库，引入外部代码进行编辑，最后，调用数据库。第二，Flash软件制作，随后插入网页中。准备好需要切换的素材图片，然后导入图片，各个图片占一个图层，选中以后转变成为图形元件。把帧转换成关键帧，按照顺序排列好，存储文件。在网页中插入Flash，完成循环播放。其中利用CSS技术实现图片切换能够得到较好的应用。编写代码简单，文件占用空间较小，后期维护较为简单，对素材图片没有太多的要求，仅需改变链接地址与图片地址即可。

（二）网页尺寸选择技巧

大多数初学者在制作网页时，并不知道如何设定网页界面的宽度尺寸。本文建议设计者规定好合适的字体大小，方法程度后，选择合适的比例，避免出现设计太窄太宽等问题，同时也尽量避免因受众放大或缩小而导致影响最终效果。尽量保证滚动部分宽度等设计合理，避免出现图片或者视频变形，影响最终效果等问题。网页的页面宽度选择技巧如下：网页宽度在778之间，不建议出现水平滚动条部分，在1 002像素内建议不出现水平滚动条，选择垂直滚动条更对版面的设计起到作用。

（三）文字处理技巧

网页上文字内容的排版也需注意，如果文字过密，或与背景颜色相似、反差较小，长时间观看都会使受众产生疲劳感，进而引发反感心理。如果文字排版可参照报纸的编排方式，将网页内容分栏设计，两栏比一满页的视觉效果好，更方便访问者快速阅读。字体也会影响文字可读性，通用字体（Arial等）最易阅读，特殊字体（Gothic、Script、Westminster、Cloister）用于标题效果较好，但不适用于正文。同时，设计者也可以针对关键词采用加粗或者变颜色的方法加深效果，使关键内容一目了然，同时更有助于受众理解设计的内容，而非大段阅读，难以找到重点等问题出现，甚至对设计者所准备的内容产生厌烦感。

除此之外，制作特效时，考虑到用户浏览的流畅性，应当优选JavaScript，并尽可能减少动态网页、视频、声音等元素。对因网站主题需要，涉及大量图片时，应当考虑以缩略图链接的形式，兼顾加载速度与信息展示效果。其次，考虑到不同分辨率的图片在加载、下载速度方面的差异，制作时应当合理设置注解，以帮助浏览者了解图片的基本信息，改善其浏览体验。这些问题也应多多注意。

三、结论

网页设计与制作是非常重要的一个部分，文中可见，制作前的大纲及提前准备十分重要，同时设计者在制作之前也应学好基础的理论知识，这样更有助于设计者对其内容的理解。而后进行不断的实践，在实践中也应注意文中提到的几点，例如在整体制作之前先考虑整体的框架、主题，并选择合适的颜色及字体字号等。充分设计完成后再进行制作，制作时也可以参考本文提出的图片切换等技巧，帮助设计者提升整体的制作效果。

参考文献：

[1]   陈凤琴.网页设计中的色彩搭配及技巧[J].黑龙江纺织.2019年 01期：29-31.

[2]   夏鹏举.网站设计及网页制作技巧[J].电脑编程技巧与维护.2020年01期：171-173.

[3]   吴晓清.网页制作教学中图片切换的CSS应用[J].计算机产品与流通.2020年 08期：85.

[4]周金容.网页制作过程与技巧[J].软件导刊.2016年 06期：149-151.

作者简介：

明欣玥（1999—），女，汉族，吉林长春人，延边大学师范学院教育技术学专业，17级在读本科生（学号2174043696）。