1、目 录一 引言 .3二 网站建设的流程 .3三 网页制作 .3（一）制作步骤 .3（二）常用参数 .4（三）网页布局 .5（四）网页色彩 .6（五）细节的把握 .8（六）常用工具介绍 .9四 企业网页制作实例 .9五 结束语 .10参考文献 .11致 谢 词 .12浅谈网页制作XXX 指导教师：XXX（ 学院 系 级 专业）【摘 要】网页设计作为用户界面交互设计的延伸，是在新的媒体和新的技术支持下实现一个全新的设计创作领域。设计创作网页应遵循其特有的特点和结构思路，具备实际可行性和外观的时尚。本论文讲述了网站建设的一般步骤，并结合丰富的色彩应用与网页设计理论，通过 网页制作实例，阐述了网页设计
2、的视觉效果和具体操作。关键词 网页 色彩 网站建设 布局Discusses about the homepage designXXX Instructor：XXX（Management Department of E-commerce in 200X）【Abstract】 The homepage design which is used to be the extending of user interface designing， it is realizes a brand-new design creation field in new media and under the new
3、technical support. Design creation homepage should follow the homepage its unique background characteristic and the structure mentality， it has actual feasible and the outward appearance fashion. The article talk about the general step of designing homepage， and unifies the rich color application an
4、d homepage design theory， through Chong Qing tuo tian science and technology development limited company homepage design example， elaborated the homepage design visual effect and the concrete operationKeywords homepage Color Website design Layout一 引言随着 Internet 的诞生和发展，许多人不再仅仅局限于网上冲浪，而是参与到网站建设中。企业建站相
5、当于在网上建立一个家，你就可以在这里向客户介绍你的企业，展示你的实力，推销你的产品，网页制作作为网站制作中一个重要的环节，相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。结合本人的实习过程，现就网站建设与管理过程中，网页设计与制作的具体经历，包括：网页设计与制作过程中的网页布局、色彩构置，框架结构等相关事项做以下论述。二 网站建设的流程1定义合适的域名。由域名构成的网址会像商标一样，有助于将来塑造网上的形象。域名除了要符合公司的性质以及信息内容的特征外，还要具有简洁、易记、具有冲击力的特点。2租用虚拟服务器。有了域名后，就需要一个空间存放网站，这个空间就是 Intern
6、et 上的服务器。一般虚拟主机提供商都能向用户提供大容量、高速度的服务器，用户可根据网站的内容设置及其发展前景来选择。3设计网页。网页的设计制作可以自己完成，也可以通过虚拟主机提供商或专业的网页设计制作商来完成。设计网页前要收集所有需要放在网站上的文本资料、图片等，并尽量用文字详细说明制作的框架结构，将收集的材料提供给网页设计者。4ICP 备案。网站备案的目的就是为了防止在网上从事非法的网站经营活动，打击不良互联网信息的传播，如果网站不备案的话，很有可能被查处以后关停。ICP 备案可以自主通过官方备案网站 http:/ 在线备案或者通过当地电信部门两种方式来进行备案。三 网页制作（一）制作步骤
7、网站是网页的集合，一个站点用的所有网页构成一个网站，网页是网站的表现形式，网页设计是指对网站整体页面的设计，包括页面风格、配色、布局、内容等。网页设计包含的内容非常多，大体分为两个方面：一方面是纯网站本身的设计，如文字、排版、图片制作、平面设计、静态图文和动态声音、影像等；另一方面是网站的延伸设计，包括网站主题、浏览群的定位、智能交互、制作策划、形象包装和宣传营销等。设计页面的第一步就是设计片面布局，就像报刊杂志版面设计一样，我们可以看作一张报约或者一份杂志来进行排版布局。1. 草稿 新页面就像一张白纸，没有任何的约定俗成的东西，可以尽可能地发挥想象力、创造力，将想象的布局到上面去。这是原创阶
8、段，你不必讲究细腻工整，你也可在草稿本上先画出整个布局框架，把多个版块的位置先粗略的布置上去以往下一步工作的展示，这一步也可以借住 PHOTOSHOP 或其他工具软件来完成。2. 粗略布局 在草稿的基础上，将需要的功能模块放到页面上去，这时要遵循突出重点、整体协调的原则，首先将网站标志、导航条、广告条等最主要的模块放在最突出位置，然后考虑其他模块的布局。3. 定稿 定稿即将粗略布局精细化、具体化，完成整个页面的设计。页面的制作，首先在根据客户的要求下，完成首页的制作，在经客户确定后，再制作其他的页面，制作完成后，交给客户验收，然后发给客户确定，待所有的页面的都经客户确定后，完成网页的制作进程，
9、交给程序员添加程序。（二）常用参数图片质量与下载速度由于网络速度问题，我们要考虑图片的大小对传输速度的影响，如果图片太大就会影响浏览速度，访问者很快就对这个网站失去了兴趣，只有充分了解图片质量与下载速度的关系，并了解不同的文件格式，才能更有效的表达内容。1. 分辨率理解图像分辨率可以直接控制文件大小和下载速度，进而影响访问者的人数，创建 WEB 图片的要求是小、快、好。显示器的分辨率起决定性的作用，大多数显示器使用的是 1024*768 的分辨率，因为要通过显示器页面，所以用高分辨率并不会增加图片质量相反还会降低图片的下载速度。2. 位图习惯性称为图像，而将矢量图称为图形，位图是位映射图像的简
10、称，也可叫栅格图。它将一幅图像分成许多栅格，栅格的每一个点就是图像的像素，其值就是像素的亮度和色彩度，扩大位图尺寸的效果是增多像素，从而将使线条和形状显得的参次不齐，位图的与其分辨率密切相关，因此在处理位图图像时，必须设置合适的图像分辨率，否则输出图像时会遗漏细节，使图像模糊。3. 矢量矢量图也称为面向对像的图像或绘图图像，它使用一组线段造型描述一段图像，图像中包含的直线，弧线和造型的设置与开关是由指令描述的，矢量图适用于描述色彩简单的图像，矢量文件中的图像元素称为对象，每一个对象都是一个自成一体的主体，它具有形状、轮廓、大小和屏幕位置等属性。放大位图会失真，但放大矢量图不会失真。4.图片格式
11、制作好的效果图可以保存为各种格式，包括 GIF 格式，JPEG 格式和 PNG 格式等各个图片格式之间的区别为：GIF 格式即图形交换格式；GIF 格式的图片只能使用 256 种颜色，不适合显示色彩丰富的图像内容。其特点是 1.采用隔行扫描的显示方式；2.可以设置背景透明；3.可以制作简单的动画。JPEG 格式可以显示颜色复杂的图片，但是在处理大面积的颜色块时可能会出现明显的压缩痕迹。PNG 格式的图片兼有 GIF 和 JPEG 的优点。（三）网页布局常见网页版式布局结构有以下几种：两栏式结构，即页面顶部为网站标志或广告条，下面分为左右两栏，一般左栏式导航或分类信息，右栏为主要内容，这种布局很
12、容易掌握，但如果在色彩上不加以注意的，很容易给人一种“乏味”的感觉。三栏式结构是一些大型网站常用的布局结构，一般为上面是横幅的广告条，下面分为三竖栏，中间较大，是主要的信息，左右是小条内容或者广告条。三栏式给人一种充实的感觉，但页面拥挤，不够灵活，是网站常用的一种布局形式。“三”型结构，这种结构多用于国外网站或者视频类网站，其特点是分类清晰，展示方便。左右框架型，是企业网站或论坛常用的布局，页面分为左右两部分，左边一般为导航部分，右边是与导航相对应的内容。左右框架型的结果非常清晰，内容一目了然，便于信息的查询。上下框架型与左右框架型类似，其区别仅仅在于形式。页面整体为横向分布，上面为导航，中间
13、的大展式窗口很突出，整个网站显得简洁明亮，这种结构适合于信息量不大，主要靠图片展示内容的网站。Flash 型主要采用现在流行的 Flash 技术，页面表达的内容较为丰富，给人视觉和听觉上很大的冲击，处理得当会达到 Web 页面难以达到的效果。（四）网页色彩1. 色彩模式。在自然界看到的各种色彩都是由三种色光或三种颜色组成的，而他们本身不能再分拆出其他的颜色成分，所以称为三原色。三原色分为光学三原色和物理三原色。这两种三原色各自混合后，分别形成了不同的色彩体系。RGB 模式：R 代表红色，G 代表绿色，B 代表蓝色，三种色彩叠加形成了其它的色彩。因为三种颜色都有 256 个亮度水平级，所以三种色
14、彩叠加就形成 1670 万种颜色了，通过它们足以再现绚丽的世界。就编辑图象而言，RGB 色彩模式也是最佳的色彩模式，因为它可以提供全屏幕的 24bit 的色彩范围，即真彩色显示。CMYK 模式：CMYK 代表印刷上用的四种颜色，C 代表青色，M 代表洋红色，Y 代表黄色，K 代表黑色。因为在实际引用中，青色、洋红色和黄色很难叠加形成真正的黑色，最多不过是褐色而已。因此才引入了 K黑色。黑色的作用是强化暗调，加深暗部色彩。CMYK 模式是最佳的打印模式，RGB 模式尽管色彩多，但不能完全打印出来。可以先用 RGB 模式进行编辑工作，再用 CMYK 模式进行打印工作，在打印前才进行转换，然后加入必
15、要的色彩校正，锐化和休整。2. 色彩的心理表现。色彩具有精神的价值，人们常常能感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥作用，影响我们的情绪。色彩的心理效应法是在不同层次中，有些色彩对人有直接的刺激，有些则需要通过间接的联想，更高层次的则涉及人的观念与信仰。3. 色彩的表达感觉。不同的色彩给人不同的心理暗示。对色彩的不同感觉和认知，对色彩搭配所产生的心理联想，会导致不同的心理反应。空间感色彩的空间感与色彩对比的知觉度有关，对比度强和高纯度的色彩具有前进感，对比度弱和低纯度色的色彩具有后退感。色彩的空间感，具体表现在利用色彩的明度对比层次、形与色的排列转折、大小弯曲等秩序节奏，从而
16、有意识地形成凹凸深远的空间感，甚至利用人的错觉形成假象空间色彩的前进、后退感形成的距离措视原理、在网页中常被用来加强画面的空间层次。亲切感色彩的亲切感是指人对色彩的对比变化所产生的亲近的心理感觉。通常较为明快柔和的色彩都能使人产生亲切感，色彩的纯度对比和明度对比较弱时，也会使整体色调变得柔和、轻快。产生亲切感的网页一般采用同类色、类似色和邻近色。使用具有亲切感的色彩，可以用来表现家具网站、儿童网站和女性网站、服装网站及日用消费品网站等。庄重感通常，明度较低、纯度不高的色彩能给人以庄重感、常用的有黑、棕色、深蓝和褐色等。在使用时要注意搭配，搭配不当则会产生沉闷、呆板的感觉。神秘感色彩的神秘感，并
17、不是色彩本身具有的，而是人的联想所产生的心理感觉。一般能使人感到神秘的色彩，多为明度较低、色相不明确、纯度也不高的色彩，如昏黄的氛围、幽暗的巷子、夜晚的角落，都可以用来营造色彩的神秘感。兴奋和忧郁感色彩和人的个性一样，具有明朗与忧郁的区分。明朗的色彩必然是明度高、对比较强的色彩，以及纯度偏纯的色彩，忧郁的色彩则是明度低、对比较弱的色彩，以及纯度偏低且色性偏冷的色彩。一般来说，暖色较易引起心理的亢奋和积极性，属于兴奋色，其中朱红色最具兴奋作用，其他明度较高、纯度较高的颜色（如黄色、橘黄色等）也具有煽动性、倾向于兴奋色。4. 网页色彩的搭配。将色彩具体到网页搭配中，应遵循一定的方法。同色搭配，该方
18、法采用一种颜色的深浅搭配，尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。邻近色搭配，使用在色带上相邻近的颜色，如绿色和蓝色、红色和黄色。采用邻近色彩设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。对比色搭配，该方法使用两种完全不同的颜色搭配。对比色可以突出重点，产生强烈的视觉效果。通过合理使用对比色，能够使网站特色鲜明，重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，起到画龙点睛的作用。明度推移色彩搭配，有两种方法操作：通过加入等量的白色，使一种颜色渐亮；或者通过加入等量的黑色，使颜色变暗。这两种方法都可以产
19、生色彩明度渐变的效果。（五）细节的把握网站的品位，除了页面本身整体的视觉效果外，往往更突出在一些细节上，只有把握住细节，才能更好地提高浏览者的使用友好度，给浏览者留下深刻的印象。1 颜色。在初学网页设计的时候，在用色方面要非常注意，如果对网页用色没有太大的把握，那么就先选择好网页的基本色调，然后针对这一种颜色去进行变化，如需加其他颜色，可以试着加些灰色，因为灰色是中色调，不会对页面颜色造成太大的冲突。这样做出的网页整体颜色会非常协调统一。2线条的运用。很多朋友在制作网页的时候，在两块过渡的地方，如 banner 和导航条之间会用一条细线区分开，此时往往会画上一条直直的线，这样给人感觉会很突兀。
20、3图标。网站中在各个标题的前面适当的加些图标点缀网页，可以使网页效果更加出彩，但是切忌网页图标使用过多，图标的色调也要一致，避免杂乱。4文字。网站中文字的运用，用户在浏览网页时，主要是要看网页当中的文字内容，所以要特别注意文字的处理。一是文字的颜色不要和背景颜色相近，这样用户在浏览文字信息时会非常的吃力；二是不要乱用字体，你使用的字体在本机上可以显示，但是到了别人的电脑上就不一定能显示出来了；三是注意文字之间的行距，通常我们不对文字进行行距的设置时，文字间的行距会非常小；影响页面的美观度，注意文字间的行距，使其不会显得特别挤，做到宽松有序。（六）常用工具介绍用来制作效果图的软件并没有明确的规定
21、。可以使用各种图形制作软件和处理软件，现在通常使用的软件是 PHOTOSHOOP 和 FIREWORKS。在制作效果图时，使用的软件对最终结果并没有什么影响，用自己精通的即可。Photoshop 是 一 款 非 常 好 用 的 平 面 设 计 软 件 。 由 Adobe 公 司 开 发 设 计 ，其 用 户 界 面 易 懂 、 功 能 完 善 、 性 能 稳 定 ， 是比较专业的图像处理软件，它具有强大的滤镜功能。所 以 ， 在 很 多 的 的广 告 、 出 版 、 软 件 公 司 ， Photoshop都 是 首 选 的 平 面 工 具 ， 它 有 很 多 的 快 捷 方 式 ， 如 抓 手
22、 工 具 H 键 ， TABLE 键切换显示或隐藏所有的控制板，D 键、X 键迅速切换前景色和背景色等，灵活的运用快捷键，可以使设计的速度大大提高。Fireworks 是网页开发图形处理工具，可以做出矢量的图形，主要是和Dreamweaver 配合做网页。对处理一般的网页图片比较实用，而且学起来也比Photoshop 易上手，是一个入门级的网页设计软件。四 企业网页制作实例1分析客户的要求和企业的类型，并参考相关类型的企业网站，结合自己的实际经验画出大概的框架图，并标明其用途和要实现的功能，这一步可直接在纸上完成。2利用 PS 来进行具体的设计，利用辅助线画出框架图，不同模块之间要画两条辅助线
23、，并留一定的距离，便于对网页的控制，接下便可以制作企业的logo、广告条、导航条等主要内容，然后依次完成其他模块的制作。3对色彩、文字的排版、导航条、底部内容进行细化，使网站达到一定的品质感，完成首页的全部制作后就可以把做好的页面发给客户确定。4.首页确定以后，便开始内页的制作，内页的制作相对简单，保持首页的整体风格不变，对相应的版块就行修改即可，相同模块的内容只需要制作一个即可，内页制作完成后发给客户确定，完成整个网页的设计，并交给程序员切片添加程序。以本人在重庆拓天科技发展有限公司实习过程中，通过对其页面的制作，结合本论文写作，将主页（index.asp）效果图 http:/ 展示如图 1 所示。图 1 有限公司主页放入，网页图片五 结束语网页制作主要是利用图形制作软件和处理软件进行网页效果图的制作。我们需要了解一个完整网站的制作过程，并知道网页制作在网站制作中的作用。一方面结合具体的实例，多加练习，培养对于技术的敏感和快速适应性，注意到技术变化带来的各种新的可能性，消除技术所形成的障碍；另一方面要多方面、多角度地感受与掌握电脑设计的时尚语言，扩展对传统设觉设计范畴的认识。
