目录一引言 (3)二建设的流程 (3)三网页制作 (3)（一）制作步骤 (3)（二）常用参数 (4)（三）网页布局 (5)（四）网页色彩 (6)（五）细节的把握 (8)（六）常用工具介绍 (9)四企业网页制作实例 (9)五结束语 (10)参考文献 (11)致谢词 (12)浅谈网页制作XXX 指导教师：XXX（学院系级专业）【摘要】网页设计作为用户界面交互设计的延伸，是在新的媒体和新的技术支持下实现一个全新的设计创作领域。

设计创作网页应遵循其特有的特点和结构思路，具备实际可行性和外观的时尚。

本论文讲述了建设的一般步骤，并结合丰富的色彩应用与网页设计理论，通过网页制作实例，阐述了网页设计的视觉效果和具体操作。

关键词网页色彩建设布局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 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 ofdesigning homepage，and unifies the rich color application and 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的诞生和发展，许多人不再仅仅局限于网上冲浪，而是参与到建设中。

企业建站相当于在网上建立一个家，你就可以在这里向客户介绍你的企业，展示你的实力，推销你的产品，网页制作作为制作中一个重要的环节，相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。

结合本人的实习过程，现就建设与管理过程中，网页设计与制作的具体经历，包括：网页设计与制作过程中的网页布局、色彩构置，框架结构等相关事项做以下论述。

二建设的流程1．定义合适的域名。

由域名构成的网址会像商标一样，有助于将来塑造网上的形象。

域名除了要符合公司的性质以及信息容的特征外，还要具有简洁、易记、具有冲击力的特点。

2．租用虚拟服务器。

有了域名后，就需要一个空间存放，这个空间就是Internet上的服务器。

一般虚拟主机提供商都能向用户提供大容量、高速度的服务器，用户可根据的容设置及其发展前景来选择。

3．设计网页。

网页的设计制作可以自己完成，也可以通过虚拟主机提供商或专业的网页设计制作商来完成。

设计网页前要收集所有需要放在上的文本资料、图片等，并尽量用文字详细说明制作的框架结构，将收集的材料提供给网页设计者。

4．ICP备案。

备案的目的就是为了防止在网上从事非法的经营活动，打击不良互联网信息的传播，如果不备案的话，很有可能被查处以后关停。

ICP备案可以自主通过官方备案 . 在线备案或者通过当地电信部门两种方式来进行备案。

三网页制作（一）制作步骤是网页的集合，一个站点用的所有网页构成一个，网页是的表现形式，网页设计是指对整体页面的设计，包括页面风格、配色、布局、容等。

网页设计包含的容非常多，大体分为两个方面：一方面是纯本身的设计，如文字、排版、图片制作、平面设计、静态图文和动态声音、影像等；另一方面是的延伸设计，包括主题、浏览群的定位、智能交互、制作策划、形象包装和宣传营销等。

设计页面的第一步就是设计片面布局，就像报刊杂志版面设计一样，我们可以看作一报约或者一份杂志来进行排版布局。

1. 草稿新页面就像一白纸，没有任何的约定俗成的东西，可以尽可能地发挥想象力、创造力，将想象的布局到上面去。

这是原创阶段，你不必讲究细腻工整，你也可在草稿本上先画出整个布局框架，把多个版块的位置先粗略的布置上去以往下一步工作的展示，这一步也可以借住PHOTOSHOP或其他工具软件来完成。

2. 粗略布局在草稿的基础上，将需要的功能模块放到页面上去，这时要遵循突出重点、整体协调的原则，首先将标志、导航条、广告条等最主要的模块放在最突出位置，然后考虑其他模块的布局。

3. 定稿定稿即将粗略布局精细化、具体化，完成整个页面的设计。

页面的制作，首先在根据客户的要求下，完成首页的制作，在经客户确定后，再制作其他的页面，制作完成后，交给客户验收，然后发给客户确定，待所有的页面的都经客户确定后，完成网页的制作进程，交给程序员添加程序。

（二）常用参数图片质量与下载速度由于网络速度问题，我们要考虑图片的大小对传输速度的影响，如果图片太大就会影响浏览速度，访问者很快就对这个失去了兴趣，只有充分了解图片质量与下载速度的关系，并了解不同的文件格式，才能更有效的表达容。

1. 分辨率理解图像分辨率可以直接控制文件大小和下载速度，进而影响访问者的人数，创建WEB图片的要小、快、好。

显示器的分辨率起决定性的作用，大多数显示器使用的是1024*768的分辨率，因为要通过显示器页面，所以用高分辨率并不会增加图片质量相反还会降低图片的下载速度。

2. 位图习惯性称为图像，而将矢量图称为图形，位图是位映射图像的简称，也可叫栅格图。

它将一幅图像分成许多栅格，栅格的每一个点就是图像的像素，其值就是像素的亮度和色彩度，扩大位图尺寸的效果是增多像素，从而将使线条和形状显得的参次不齐，位图的与其分辨率密切相关，因此在处理位图图像时，必须设置合适的图像分辨率，否则输出图像时会遗漏细节，使图像模糊。

3. 矢量矢量图也称为面向对像的图像或绘图图像，它使用一组线段造型描述一段图像，图像中包含的直线，弧线和造型的设置与开关是由指令描述的，矢量图适用于描述色彩简单的图像，矢量文件中的图像元素称为对象，每一个对象都是一个自成一体的主体，它具有形状、轮廓、大小和屏幕位置等属性。

放大位图会失真，但放大矢量图不会失真。

4.图片格式制作好的效果图可以保存为各种格式，包括GIF格式，JPEG格式和PNG 格式等各个图片格式之间的区别为：GIF格式即图形交换格式；GIF格式的图片只能使用256种颜色，不适合显示色彩丰富的图像容。

其特点是1.采用隔行扫描的显示方式；2.可以设置背景透明；3.可以制作简单的动画。

JPEG格式可以显示颜色复杂的图片，但是在处理大面积的颜色块时可能会出现明显的压缩痕迹。

PNG格式的图片兼有GIF和JPEG的优点。

（三）网页布局常见网页版式布局结构有以下几种：两栏式结构，即页面顶部为标志或广告条，下面分为左右两栏，一般左栏式导航或分类信息，右栏为主要容，这种布局很容易掌握，但如果在色彩上不加以注意的，很容易给人一种“乏味”的感觉。

三栏式结构是一些大型常用的布局结构，一般为上面是横幅的广告条，下面分为三竖栏，中间较大，是主要的信息，左右是小条容或者广告条。

三栏式给人一种充实的感觉，但页面拥挤，不够灵活，是常用的一种布局形式。

“三”型结构，这种结构多用于国外或者视频类，其特点是分类清晰，展示方便。

左右框架型，是企业或论坛常用的布局，页面分为左右两部分，左边一般为导航部分，右边是与导航相对应的容。

左右框架型的结果非常清晰，容一目了然，便于信息的查询。

上下框架型与左右框架型类似，其区别仅仅在于形式。

页面整体为横向分布，上面为导航，中间的大展式窗口很突出，整个显得简洁明亮，这种结构适合于信息量不大，主要靠图片展示容的。

Flash 型主要采用现在流行的Flash技术，页面表达的容较为丰富，给人视觉和听觉上很大的冲击，处理得当会达到Web页面难以达到的效果。

（四）网页色彩1. 色彩模式。

在自然界看到的各种色彩都是由三种色光或三种颜色组成的，而他们本身不能再分拆出其他的颜色成分，所以称为三原色。

三原色分为光学三原色和物理三原色。

这两种三原色各自混合后，分别形成了不同的色彩体系。

RGB模式：R代表红色，G代表绿色，B代表蓝色，三种色彩叠加形成了其它的色彩。

因为三种颜色都有256个亮度水平级，所以三种色彩叠加就形成1670万种颜色了，通过它们足以再现绚丽的世界。

就编辑图象而言，RGB色彩模式也是最佳的色彩模式，因为它可以提供全屏幕的24bit的色彩围，即真彩色显示。

CMYK模式：CMYK代表印刷上用的四种颜色，C代表青色，M代表洋红色，Y代表黄色，K代表黑色。

因为在实际引用中，青色、洋红色和黄色很难叠加形成真正的黑色，最多不过是褐色而已。

因此才引入了K——黑色。

黑色的作用是强化暗调，加深暗部色彩。

CMYK模式是最佳的打印模式，RGB模式尽管色彩多，但不能完全打印出来。

可以先用RGB模式进行编辑工作，再用CMYK模式进行打印工作，在打印前才进行转换，然后加入必要的色彩校正，锐化和休整。

2. 色彩的心理表现。

色彩具有精神的价值，人们常常能感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥作用，影响我们的情绪。

色彩的心理效应法是在不同层次中，有些色彩对人有直接的刺激，有些则需要通过间接的联想，更高层次的则涉及人的观念与信仰。

3. 色彩的表达感觉。

不同的色彩给人不同的心理暗示。

对色彩的不同感觉和认知，对色彩搭配所产生的心理联想，会导致不同的心理反应。

空间感——色彩的空间感与色彩对比的知觉度有关，对比度强和高纯度的色彩具有前进感，对比度弱和低纯度色的色彩具有后退感。

色彩的空间感，具体表现在利用色彩的明度对比层次、形与色的排列转折、大小弯曲等秩序节奏，从而有意识地形成凹凸深远的空间感，甚至利用人的错觉形成假象空间色彩的前进、后退感形成的距离措视原理、在网页中常被用来加强画面的空间层次。