网页设计制作流程.ppt

什么是网站和网页？;构成网页的基本要素; 字形：粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多采。关键是如何根据页面内容来掌握这个比例关系。   ;字体：从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。解决问题的办法是：在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。 ;行距：行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。这主要是出于以下考虑：适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。 除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。 ;通过文字大小疏密进行处理，突出重点，层次分明。;2.图形 格式：网页上经常使用的图片格式：JPG、GIF、SWF、BMP、TIFF、PNG等。GIF具有图像文件短小、下载速度快、低颜色数下GIF比JPEG装载的更快.JPEG格式是在目前Internet中最受欢迎的图像格式，JPEG可支持多达16M颜色，它能展现十分丰富生动的图像，还能压缩。但压缩方式是以损失图像质量为代价，压缩比越高图像质量损失越大，图像文件也就越小。; 图像的形式：同印刷排版一样，静态图像在网页排版中的运用不外乎四种形式：方形图、退底图、出血图以及这三种??式的结合使用。  （1）方形图　即图形以直线边框来规范和限制，是一种最常见、最简洁、最单纯的形态。方形图使图像内容更突出且将主体形象与环境共融，可以完整地传达主题思想，富有感染性。配置方形图的页面，给人以稳重、可信、严谨、理性、庄重和安静等感觉，但有时也显得平淡、呆板。;（2）退底图　将图像中的背景去掉，只留下主题形象。退底图形自由而突出，更具有个性，因而给人印象深刻。配置退底图的页面，轻松、活泼，动态十足，而且图文结合自然，给人以亲和感。但也容易造成凌乱和不整体的感觉。  ;（3）出血图　图像的一边或几个边充满页面，有向外扩张和舒展之势。一般用于传达抒情或运动信息的页面，因不受边框限制，感觉上与人更加接近，便于情感与动感的发挥。; 主体形象退底且两边出血。主体形象的方向性与右侧文字的排列方式具有引导视觉的作用。;3.交互功能（菜单按钮、链接、表单、数据交换...）;网页版式的基本类型; 1.骨骼型 　　网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。; 2.满版型 　　页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。; 3.分割型 　　把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。可以调整图片和文案所占的面积，来调节对比的强弱。例如：如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。 ; 4.中轴型 　　沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。;5.曲线型 　　图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。 ;;;;;;;网页设计制作流程;一.确定网页主题（网页类型）;二.收集网页相关资料;;;;;三.构思网页布局;主页的设计规则;四.制作网页;五.发布为网页文件HTML或SWF;六.上传网页;Flash简要介绍; FLASH的特点 1. 使用矢量图形和流式播放技术。与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图形