-
-
搜索
-
图标汇集
在浏览网页时，一般要经过：下载、完善、可视三个视觉步骤，而下载是最关键的一个步骤。如果连接半天还没有返回页面，那么访客会离开，所以，提高下载速度是网页优化的关键。在设计网页时，会利用许多老的或新的技术，但当使用某一项技术时，有可能因为浏览器的兼容问题，会使得网页下载变得非常缓慢。有时，只出现了网页背景，内容却迟迟不出现，这就是因为浏览器在解释网页文件时，出现了问题，所以，在网页设计上一定要注意。
目前利用表格制作网页成为流行，因为它具有完备的布局功能，可以指定文档或图片在某一个地方出现。但在利用表格过程中，要注意一些问题，表格嵌套过深，也就是在一个表格里，还包含数个其他表格，当浏览器遇到表格时，会首先解释最里层的表格，然后再解释外层的表格，顺序是从里到外，最后再解释表格里含有的内容，也就是说，当使用一个大的表格，而其中又包含其他表格时，浏览器的解释将变得十分麻烦，它将一层层解释表格，然后浏览器本身含有不兼容的问题，就会成成页面内容没有出现，但数据还在传输。如果要避免这个问题，建议嵌套不超过三层的表格。也可以把网页分成几个表格进行设计，比如标题导航一个表格，内容目录一个表格，然后制作信息一个表格，这样做可以使得浏览器分开解释表格，它可以解释完一个表格就出现表格里的内容，然后再解释下一个表格。
网页制作中，我们在处理图像时应遵循一个合理的流程
1、材质库的建立。进行图像处理的时候，为了表现某种主题，可能就需要各种各样的原始材料来支持，如果材料缺乏的话，就像机器没有原材料，大楼没有地基一样，没有任何意义。根据自己的需要，建立自己的材质库，并随时加以整理，做好标签。
2、范围的选取。作为点阵图，它只能通过对范围的选择形成所谓的“对象”，再进行各种各样的处理。范围的选取在photoshop中占有非常重要的地位，应熟练掌握这种技巧。
3、颜色的控制。任何将进行组合的图像，在刚开始的时候，都肯定在颜色上与别的现有的图像发生冲突。必须在正式融合前，加以颜色的调整，使得亮度、对比度、色值等都比较合适。
从传统意义上讲，水印是用来鉴别真假的，因为他们的存在并不影响印刷在该页上内容的清晰度。后来把水印的概念引入数字时代。在页面制作时利用这个技巧，在页面上就可以做出一个半透明的标志，它就像独立的悬浮在页面上一样。尽管这很麻烦，但能产生非常漂亮的效果。
这里有几种在主页上产生水印效果的方法。例如，如果访问者使用的是IE浏览器，只需用<BODY background=”graphic/g.gif” bgprgperties=fixed>就可产生水印效果。但这对Navigator不适用，它会自动地将图片平铺显示。为了兼顾不同的浏览器，必须使用动态HTML来实现这个功能。GeoCities采用服务器端来检测访问者使用的浏览器，并针对不同的浏览器（IE或Navigate）采用不同的实现方法。下面是一种单一的客户端脚本，它能在上述两种浏览器上工作，甚至还可以给用户更大的选择余地。
这里介绍的是现在流行的图像压缩工具Fireworks。确切地说，它并不是一款图像压缩软件，但它具有强大的图像压缩功能，并且，它能够一次性输出图像到网页中。由于切图功能经常用于切割使用photoshop制作的图像DEMO (在制作网页前，经常需要用图像处理软件制作首页的样式，然后使用切图软件来切割制作的图像，以便把图像的各个位置确定在页面的表格中，这样便于网站首页整体的协调。这张使用图像处理软件制作的文件称为DEMO)，因此下面介绍下用DEMO来说明切割的过程。
首先，使用Fireworks打开要切图的图像文件。第二步，点击左侧工具栏中的切割按钮，在图像中画出切割的区域（区域之间不要相互重叠）。这里所说的切图实际上就是画出页面中的表格位置。因为每一个切割的图片在输出时都将被放置到与图片大小等大的单元格中。这个步骤是由Fireworks自动完成的。当图片切割完成后，选择file/export preview，在弹出的窗口中进行输出设置。
要制作抽线图的效果，首先在photoshop中打开需要制作的图片。从工具箱中选择圆形圏选工具，在图片上画出一个椭圆形，然后在“选择”菜单下选择“羽化”命令，选择10像素。根据图片的大小，选择的羽化宽度可不同。接下来按下shift+ctrl+I，反选区域，最后按下delete键，这样我们要做抽线图的图片就准备好了。
第一步，建立一个抽线层：首先用photoshop新建一个图片（刚才制作的图片），宽1像素，高2像素; 将它放大1600倍，用矩形选择工具，选取上半部分，并用黑色填充。然后按ctrl+A择图像全部，选择“编辑”菜 单下的“定义图案”将它设为默认填充块。
在某些电子商务网站上，经常会见到把商品用鼠标直接拖拽到购物车中的情形。在某些在线游戏网站，偶尔还会玩一些拼图游戏等。这些效果可以用Dreamweaver实现。这些使用鼠标拖拽对象的行为在Dreamweaver中就称之为Drag Layer。使用这个动作的时候，可以规定浏览者用鼠标拖拽对象的方向，浏览者要将对象拖动到的那个目标，并且，如果这个对象处于目标周围一定的坐标范围内，还可以自动地依附到目标上。更神奇的是，当对象到达目标时，可以规定将要发生的事情。下面讲解下使用Drag Layer动作的全过程。
我们每天都能在网页上看到形形色色的动画，那么这些动画要如何分类呢~
一、按视觉效果分类：根据网站动画不同的视觉效果，可以把动画分成二维动画和三维动画。二维动画，就是我们所说的平面动画，只能产生平面视觉效果，所有的运动都是在两个坐标轴上完成的，制作起来比较简单，是现在一般网站设计中经常使用的一类动画。三维动画：就是我们所说的立体动画，能产生逼真的立体效果，他的运动在三个坐标轴上完成的，故制作起来比较麻烦。
二、按制作原理分类：可以分为轨迹动画和逐帧动画两类。轨迹动画：这种动画的特点就是变化的图形不是很多，对于同一个图形，只要改变动画的轨迹就可以产生动画效果。逐帧动画：与上面的轨迹动画相比，逐帧动画变化的图形较多，每一个帧的图形都不同，例如，一个10帧动画，它的每一个帧的图形都不同，通过帧移动产生动画效果。
弹出窗口特效是网页设计中比较常用的。在打开某一个网页时，同时弹出的窗口可以用于显示广告、临时添加的信息等各种消息。 下面看一看使用Dreamweaver如何制作这种特效。
打开Dreamweaver后，选择window/behaviors，点击行为面板中的“ + ”号，从菜单中选择open browser window，将弹出对话框。使用这个动作可以使HTML文件在新窗口中打开，并且，可以控制新窗口的大小、样式、有无菜单栏等多种特性。
这个对话框中的设置是这样的：
在Dreamweaver中实现表格嵌套的方法很简单：先在网页中创建一个外部表格，将光标定位在需要嵌套表格的单元格内；再在单元格内创建一个或多个表格，设置它们的属性使它们在外部表格中合理排列即可。
我们已经知道，除了DHTML的层以外，表格是唯一能够让网页设计者随意排放页面上所有内容（包括图片和文字）的手段。当然，使用表格也要有一定的技巧，首先必须掌握Dreamweaver对表格属性控制的方法，然后在开始动手制作之前先对要实现的网页做个规划，设计好网页大致的排版方式，这样在应用表格时才能做到心中有数。
大家在使用软件时经常能够发现，在打开选项对话框后，会显示一些简单的常规选项，但如果常规选项不能满足需要，可以再点击“高级”按钮，面板会扩大，并显示出一些高级选项。这样，既能屏蔽软件设置的复杂性，又不失高级功能的定制性。还能够节省屏幕空间，不会因为一打开选项菜单就面对烟花缭乱的选项而不知所措，我们在网站设计时也可以加入这样的功能。
现在的网页设计中也经常使用这种方法。比如某个软件下载站，打开页面后显示一整张大表，里面是一行行的软件名称等最基本信息，但单击“详细”后，并不弹出新页，而是在当前行下“挤”出一行显示更详细的信息。这种方法比弹出新页要直观快速的多，并且显得更专业。另外，一个经常使用这个功能的地方时ID注册页面，比如注册一个免费邮箱或论坛账号，往往首先显示出简单注册界面，在点击高级功能后，才会显示出输入更多个人信息的界面。
