网页设计制作流程

《网页设计制作流程》由会员分享，可在线阅读，更多相关《网页设计制作流程（40页珍藏版）》请在金锄头文库上搜索。

1、什么是网站和网页？,“网页”是什么，平常我们所听说的“新浪”、“搜狐”、“网易”等，即是俗称的“网站”。而当我们访问这些网站的时候，最直接访问的就是“网页”了。这许许多多的网页则组成了整个站点，也就是网站。网页 是一种网络信息传递的载体。这种媒介的性质和我们日常的“报纸”、“广播”、“电视”等传统媒体是可以相提并论的。在网络上传递相关的信息，比如文字、图片甚至多媒体音影，都是存储在网页中，浏览者只需要通过浏览网页，就可以了解到相关信息了。,构成网页的基本要素,1.文字 字号:最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号

2、。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。,字形：粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多采。关键是如何根据页面内容来掌握这个比例关系。,字体：从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览

3、者的机器里并不一定能够找到，这给网页设计带来很大的局限。解决问题的办法是：在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。,行距：行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。这主要是出于以下考虑：适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。 除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性

4、、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。,通过文字大小疏密进行处理，突出重点，层次分明。,2.图形格式：网页上经常使用的图片格式：JPG、GIF、SWF、BMP、TIFF、PNG等。GIF具有图像文件短小、下载速度快、低颜色数下GIF比JPEG装载的更快.JPEG格式是在目前Internet中最受欢迎的图像格式，JPEG可支持多达16M颜色，它能展现十分丰富生动的图像，还能压缩。但压缩方式是以损失图像质量为代价，压缩比越高图像质量损失越大，图像文件也就越小。,图像的形式：同印刷排版一样，静态图像在网页排版中的运用不外乎四种形式

5、：方形图、退底图、出血图以及这三种形式的结合使用。 （1）方形图 即图形以直线边框来规范和限制，是一种最常见、最简洁、最单纯的形态。方形图使图像内容更突出且将主体形象与环境共融，可以完整地传达主题思想，富有感染性。配置方形图的页面，给人以稳重、可信、严谨、理性、庄重和安静等感觉，但有时也显得平淡、呆板。,（2）退底图 将图像中的背景去掉，只留下主题形象。退底图形自由而突出，更具有个性，因而给人印象深刻。配置退底图的页面，轻松、活泼，动态十足，而且图文结合自然，给人以亲和感。但也容易造成凌乱和不整体的感觉。,人物全部退底，文字色块的安排轻松随意，是面向年轻人的设计。,（3）出血图 图像的一边或几

6、个边充满页面，有向外扩张和舒展之势。一般用于传达抒情或运动信息的页面，因不受边框限制，感觉上与人更加接近，便于情感与动感的发挥。,四边出血，有强烈的扩张感。,主体形象退底且两边出血。主体形象的方向性与右侧文字的排列方式具有引导视觉的作用。,3.交互功能（菜单按钮、链接、表单、数据交换.）,网页版式的基本类型,网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。,1.骨骼型 网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人

7、以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。,2.满版型 页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。,3.分割型 把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。可以调整图片和文案所占的面积，来调节对比的强弱。例如：如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会

8、产生自然和谐的效果。,4.中轴型 沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。,5.曲线型 图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。,6.倾斜型 页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。,7.对称型 对称的页面给人稳定、严谨、庄重、理性的感受。 对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见。 四角型也是对称型的一种，是在页面四角安排相应的视觉元素。四个角是页面的边界点，重要性不可低估。在四个角安排的任何内容都能产

9、生安定感。控制好页面的四个角，也就控制了页面的空间。越是凌乱的页面，越要注意对四个角的控制。,8.焦点型 焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。焦点型分三种情况。（1）中心 以对比强烈的图片或文字置于页面的视觉中心。 （2）向心 视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。（3）离心 视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。,通过离心的版式，清晰地传达出网站提供的服务。,9.三角型 网页各视觉元素呈三角形排列。正三角形（金字塔型）最具

10、稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。,10.自由型 自由型的页面具有活泼、轻快的风格。,网页设计制作流程,一.确定网页主题 二.收集网页相关资料 三.构思网页布局 四.制作网页 五.发布为网页文件HTML或SWF 六.上传网页,一.确定网页主题（网页类型）,个人主页 商业网站 综合网站,二.收集网页相关资料,图片 文字 声音 视频 动画,1.文字与图片:是网站的基本单元 文字与图片的比例要适当 文字太多，会使减低网站的吸引力 图片太多，又会使页面的浏览速度大大下降,2.声音：主要是音响和音乐，其中音乐占主要地位 适当的在网页上加点音乐效果，会使网页更具吸引力

11、网上的流行的声音格式有MIDI、WAV、MP3及REAL AUDIO,3.动画 适量的动画使页面生动活泼，有时会使页面内容更加直观易读； 使用动画不能过多，否则不仅网站的浏览速度会大大降低，更会给人一种眼花缭乱的感觉； 普通的动画使用GIF动画技术；对于复杂又需交互的内容，则可以借助Flash动画制作技术； 使用Java、ASP等编程技术也可以获得灵活的动画效果。,4.视频影象 视频影像是一种非常直观而有效的表现方式 下载一个视频文件要花费很多的时间,三.构思网页布局,网页布局-主要构成原则 醒目性：指用户把注意力集中到你诱导起浏览的部分和内容 可读性：指网站的内容让人容易读懂 明快性：指准确

12、、快速转达网站的构成内容 造型性：维持整体外型上的稳定感和均衡性 创造性：有鲜明个性，创意是必不可少的 布局的构成原则上是:统一、协调、流动、强调、均衡,主页的设计规则,一.一个网页的下载速度应在10秒之内每个页面大小应在2040KB其中HTML文件通常为14KB，其余1936KB是其他内容，如图片、文本。二.页面的宽度页面的宽度一般设计成770象素三.页面长度一般页面长度最长为三个屏幕长度,如果多于三个屏幕长度,则要简化主页内容. 即: 634, 1018, 1334pixel四. 建议使用动态布局即随着分辨率不同来调整页面宽度,以保证无论保种分辨率下都可以看到全屏的内容.,四.制作网页,1

13、.伪界面设计根据事先规划的结构，在平面软件里设计你想要的最终效果，利用平面图片的形式先展示一次，设计时要注意宜人性、人机、心理等各方面因素2.网页设计常用工具软件 Adobe Photoshop Macromedia Flash Adobe Illustrator Adobe ImageRead Dreamweaver：自制动态HTML动画的网页 Macromedia Fireworks：Fireworks进行切图，可以将一个大图片分割成不同色深的多个小图片，并且生成相应的网页文件或代码，从而减小网页的重量。 Macromedia Director:对多媒体元素进行整合。,五.发布为网页文件H

14、TML或SWF,HTML全称 HyperText Markup Language，正式名称是超文本标记语言，HTML语言发展很快，已历经HTML1.0、HTML2.0和HTML3.0、HTML4.0多个版本，现在HTML5.0正在测试，同时DHTML (动态)、VHTML(虚拟)、SHTML等也飞速发展起来, html利用标记（tag）用来描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本编辑器都可以对它进行编辑。 在Flash中发布主影片和菜单以及与此相关的子影片。主影片发布为首页(index.html)Web文档和index. swf，其余影片均发布为swf.,六.上传网页,将网页

15、中的所有 Flash影片文件（swf）和文档（html）均登录到自己的个人主页空间上。登陆以后，通过网页浏览器便可以浏览自己的网页。,Flash简要介绍,什么是FLASHFlash是美国的MACROMEDIA公司于1999年6月推出的优秀网页动画设计软件。它是一种交互式动画设计工具，用它可以将音乐，声效，动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。 如今升级到Flash 8版本，它不仅可以制作网页，而且在游戏、网页动画、网络广告、网络贺卡服务等多种领域有广泛应用。,FLASH的特点1. 使用矢量图形和流式播放技术。与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图形的质

16、量；流式播放技术使得动画可以边播放边下载，从而缓解了网页浏览者焦急等待的情绪。 2. 通过使用关键帧和图符使得所生成的动画(.swf)文件非常小，几K字节的动画文件已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放。,3. 把音乐，动画，声效，交互方式融合在一起，越来越多的人已经把Flash作为网页动画设计的首选工具，并且创作出了许多令人叹为观止的动画(电影)效果。4. 强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画，通过ACTION（动作）可以实现交互性，使Flash具有更大的设计自由度，另外，它与当今最流行的网页设计工具Dreamweaver配合默契，可以直接嵌入网页的任一位置，非常方便。,Flash动画原理,逐帧动画关键帧动画建立两个关键帧（两关键帧上的图像属性不同），由软件自动生成动画过程。,