网页设计66035.pptVIP

大家好 天花板上是天气防潮的水滴，估计是大家昨晚上忘了关窗户才会这样的，水汽进来了。 刚才看了大家的作业，觉得都做的不错。而且比起上一次的作业很多同学在细节上注意了，所以整体画面效果看起来更棒一些。 今天我们开始学习网页设计，网页是我们经常接触的一种互联网上面的文件。大家每天上网的时候都会浏览网页。 那么网页是怎么制作的呢？ 通常我们会使用PHOTOSHOP、DREAMWEAVE、flash这三个软件来制作。PS负责设计、DW负责组装和程序、flash负责动画。 通常我们的工作流程也是这样的，先是PS、然后是DW、最后是FLASH 好的，下面我们先看一下网页。 网速比较慢，大家要多等一下 网页一般由几个部分组成，1是LOGO，就是标志。2是导航，他引导我们去网页的任何位置。3是功能按钮，4是旗帜广告，就是网页上用来做宣传的图片。这种图片可以是动画。5是标题文本，他告诉你网页上的主要内容是什么，6是下标，用来说明网页的所有方以及其他相关信息。7最后一部分就是图片 好的，那么我们怎么开始网页设计呢？ 首先大家必须掌握的是如何建立网页的尺寸。 我们做网页设计一般都是用像素作为单位，像素就是显示器上的小点。我们一会把网页图片放大就可以看到这些点了。用键盘上的印屏幕键，可以帮你抓下屏幕上的内容 我们现在把他放大看看 这样的一个正方形方块就是像素点了。比如我们的图片大小是1024X768像素，就是指这张图片横向上有1024个点组成。纵向上有768个点组成。 网页的设计分辨率是72DPI 那么我们设计网页是不是就直接使用显示器的分辨率作为设计尺寸呢？不是的。 网页设计要扣除掉浏览器工具栏的尺寸，我们只做里面的内容页面。 我对画面做了裁切，画面中间部分才是网页的大小。从刚才的操作我们不难看出，在1024X768显示器分辨率下的网页尺寸，1屏（1个屏幕大小的页面）尺寸宽度是1000像素，高度是600像素。 我们可以采用这种方式同样去计算1440X960显示器上的网页大小，也可以去计算1920X1080上面的页面大小。 下面大家各自回到座位上先挑选好网页，然后计算大小，这里需要注意一点，有些网页很长，有两三个屏幕的长度，我们就要在PS里面把他接起来。 现在开始吧 好的，下面我们开始演示一下网页设计的流程。 这个是我们平时看到的网页，我把他另存下来，我们会发现网页包含一个HTML的页面文件和一个文件夹。 文件夹里面有很多碎碎的图片，如果我们修改文件夹的名称，再打开html文件就会发现文件都没有了。 网页是不是图片都丢失了。 所以我们分析，HTML文件主要是存放文本的，而图片文件夹里面的图片是通过链接方式导入到HTML文件里面。希望大家能牢记这个概念。 这样我们后面做网页设计的时候，就不会混乱了。 下面我演示一下，基本制作流程。 注意一点，网页里面的图片很多都被切碎了，原因是，网页要适合网络上传播，如果文件太大了，会影响传输速度。如果大家的网速比较慢，网页图片再一多，文件就打不开了。所以，我们做网页的时候要注意资源的共用。一张很小的图片我们都可以把它做成很大的图片。下面我演示一下。 比如这个点状的背景 像这种长条形的导航或者边框，我们的制作也是一样的。 等一下，这个软件好像有些问题，部分功能不完整，我先调试一下。 如果我想要一个长条形的导航，制作方式是先找一张细的图片，然后把他通过复制方式，来表现一个表格。 如果我要在里面加文字，可以直接打字进去。 这个就是网页设计的时候，最重要的一个要求，就是增加图片资源的重复利用率，这样即使使用很少的图片也能够做出哦很漂亮的网页。 这里我们需要说明的是在DW里面站点的建立，我们要做一个网站，首先要建立一个站点，所有的图片和文字、动画都放在这个站点文件夹里面。图片统一放在images文件夹里，英文不能错哦。 下面我演示一下这个操作。 先在电脑上建立一个专门的文件夹，用于存放你的工作文件，里面要包含站点文件夹。大家看我操作。 源文件里面是你们用PS设计的PSD格式的源文件。 flash源文件里面放着flash动画源文件 Web里面是你的站点文件夹 Images里面放着网页上使用的图片文件 注意在WEB文件夹下面的文件命名都要用英文小写命名。不能使用中文，要不然会找不到文件，网页上会显示X。 通常如果页面很多的话，我们还会多设计几个文件夹，比如：news(放新闻的）、productor（放产品的）css（放样式列表的） 接下来我们定义站点，这个过程有一些选项大家要记住。 这个是DW的安装文件，大家一会可以拷贝回去安装。 注意这个时候是定义的你站点的位置，必须选择文件夹到我们刚才设立的那个WEB文件夹的位置。 注意不能放在工程文件夹下面，要不然会把源文件一起算到站点里面去就麻烦了。 接下来我们建立主页，主页的命名