网站制作初步第三部分创建图像

客官°小女子只卖身不卖艺 2022-10-02 04:40 139阅读 0赞

**网站制作初步 第三部分 图像处理**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div style="line-height:200%;"> 
      <b><font></font></b>&nbsp; 
     </div> 
     <div style="line-height:200%;"> 
      <b><font>第一课：创建图像</font></b> 
     </div> 
     <hr> 
     <div style="line-height:200%;"> 
      <b><font></font></b>&nbsp; 
     </div> 
     <div style="line-height:200%;"> 
      <b><font>第一节：介绍</font></b> 
     </div> 
     <div style="line-height:200%;"> 
      <strong><font></font></strong>&nbsp; 
     </div> 
     <div style="line-height:200%;">
       &nbsp;&nbsp;&nbsp; 最初的互联网上只有纯文本信息，但随着网络技术的发展，网页也发生了变化，拥有各种图片的网页成为它的主人向人们眩耀的资本。现在的网页一般情况下至少也会有一些简单的图片，从而使网页显得更活泼生动，而有的网页甚至只用图片来提供信息。因此学习如何为网站创建图片是在建立网页过程中非常重要的一个内容，而且你只要对图片制作接触一段时间，就会发现它并不很难。 
     </div> 
     <div style="line-height:200%;">
       &nbsp;&nbsp;&nbsp; 为网站制作图片的方法有很多。例如，如果你想为你的订书机网站提供一些订书机的图片，那么你最好是自己亲自制作这些图片，而不要去挪用别人已经做好的图片，否则你可就犯了盗窃罪了。 
     </div> 
     <div style="line-height:200%;">
       &nbsp;&nbsp;&nbsp; 为了创建图片，你需要一些制作图片的软件。说起来任何一款允许你在上面乱涂乱画的软件都是可以胜任这一工作的，有些软件是免费的，或非常便宜，以便象我们这些普通人和初学者能够同样享受到这些软件给我们提供的画图功能，你可以访问我们的工具部分来挑选一些适合你的制图软件。 
     </div> 
     <div style="line-height:200%;">
       然后你就使用画笔自己亲自画出一个订书机来，这应该并不很难吧。 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div style="line-height:200%;"> 
      <b><font></font></b>&nbsp; 
     </div> 
     <div style="line-height:200%;"> 
      <b><font>第二节：抓取图片</font></b> 
     </div> 
     <div style="line-height:200%;"> 
      <strong><font></font></strong>&nbsp; 
     </div> 
     <div style="line-height:200%;">
       &nbsp;&nbsp;&nbsp; 不过，也许你和我一样，手上工夫笨得很，不会画图，那么还有另外一种方法，那就是用照相机把订书机的图片照下来。你可以使用数字照相机，这可以非常方便地直接把图片下载至计算机内，当然你也可以使用传统的普通照相机，但你就需要再使用扫描仪设备将照片扫描成数字信息后，再传输至计算机内。有些胶卷冲洗店甚至还会帮助你冲洗好照片后，把它们制作成数字照片存入光盘中。 
     </div> 
     <div style="line-height:200%;">
       &nbsp;&nbsp;&nbsp; 另外如果你的扫描仪很高级，也许你可以直接把订书机放在扫描仪上进行扫描。现在还有一些电脑商店专门提供扫描仪租赁服务，这样你就不必自己购买一台扫描仪了。 
     </div> 
     <div style="line-height:200%;">
       &nbsp;&nbsp;&nbsp; 另外你可以从其它网站抓取一些图片，不过你最好确保这不是在偷窃他人的劳动成果。如果有朝一日你的订书机网站变得非常有名，访问量巨增，到时碰巧你偷窃的那幅图片的主人浏览了你的网页，那么你的麻烦就大了。因此希望你能够前往那些提供免费图片的网站来获取你需要的图片，在国外有一些这样的免费图片网站，如Barry's Clip Art Server和The Elated Web Toolbox。 
     </div> 
     <div style="line-height:200%;">
       &nbsp;&nbsp;&nbsp; 从其它网站抓取图片自然非常简单，而且应该说太简单了。在一台Mac计算机上，你只需将鼠标放置在需要抓取的图片上，按下鼠标键，根据不同的浏览器在弹出菜单中选择"Save This Image As"或"Save Picture As"(图片另存为) 即可。而在Windows操作系统中，点击鼠标右键，弹出菜单，然后将图片另存至自己的计算机硬盘中就可以了。 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div style="line-height:200%;"> 
      <b><font>第三节：图片格式GIF和JPEG</font></b> 
     </div> 
     <div style="line-height:200%;">
       &nbsp;&nbsp;&nbsp; 好了，不管你是自己画的，还是拍摄的，或是扫描而成的，亦或是偷窃别人的，反正现在你手头上已经有了一幅订书机图片，这时你就需要在图片编辑软件中对这幅图片进行一定的处理了。许多制图软件允许你改变图片的大小，删减图片的一些部分，或是调整图片的颜色等。你可以通过软件对图片进行各种修改，直至你满意为止，从而使这幅图片恰到好处地放入网页中。 
     </div> 
     <div style="line-height:200%;">
       &nbsp;&nbsp;&nbsp; 别忘了大家前来访问你的网站时需要等待图片下载完毕才能看清图片，而如果这段时间较长的话，有些人恐怕就会变得不耐烦而离开，当然你不会希望这种情况的发生，因此就需要确保你的图片不要过大。 
     </div> 
     <div style="line-height:200%;">
       &nbsp;&nbsp;&nbsp; 当你处理好图片后，需要将它保存为JPEG或GIF这两种格式。这两种格式是网页中最主要的图片格式，它们都能够对图片有一定的压缩作用，从而使下载图片的速度加快，但两者采用不同的压缩方式。JPEG格式适用于压缩较大的图片，而GIF则适用于压缩较小的图片或一些动画图片。 
     </div> 
     <div style="line-height:200%;">
       &nbsp;&nbsp;&nbsp; 你通过图片编辑软件将订书机的图片保存为GIF或JPEG的格式，然后给图片起一个名字，例如"订书机.gif"，这样浏览器就会知道如何读取这种图片了。 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div style="line-height:200%;"> 
      <b><font></font></b>&nbsp; 
     </div> 
     <div style="line-height:200%;"> 
      <b><font>第四节：上传图片</font></b> 
     </div> 
     <div style="line-height:200%;"> 
      <strong><font></font></strong>&nbsp; 
     </div> 
     <div style="line-height:200%;">
       &nbsp;&nbsp;&nbsp; 下一步你要将图片上传至服务器中，对于上传操作，请查阅前面关于FTP文件传输的章节。 
     </div> 
     <div style="line-height:200%;">
       &nbsp;&nbsp;&nbsp; 如何在网页中添加图片，如何编写代码，这些我们在前面的HTML章节中已经进行了介绍。这里做为一个简单的提示，你需要使用的代码是： 
     </div> 
     <div style="line-height:200%;">
       &lt;img src="stapler.gif"&gt; 
     </div> 
     <div style="line-height:200%;">
       在这里，stapler.gif当然可以根据你的需要来更换成其它的文件名，在本例中此标志符告诉浏览器在服务器目录中查找一个名为stapler.gif的文件，并将其粘贴至网页中。 
     </div> 
     <div style="line-height:200%;">
       &nbsp;&nbsp;&nbsp; 好了，现在你的网页中已经拥有了一些图片，但是不是还觉得网页有些单调呢？那么下一步我们将制作一些更加神奇的特殊效果。 
     </div> 
     <div style="line-height:200%;">
       &nbsp; 
     </div> 
     <div style="line-height:200%;"> 
      <table> 
       <tbody> 
        <tr> 
         <td> 
          <div> 
           <div style="line-height:200%;"> 
            <b><font>第二课：制作动态GIF图片</font></b> 
           </div> 
           <hr> 
           <div style="line-height:200%;"> 
            <b><font>第一节：介绍</font></b> 
           </div> 
           <div style="line-height:200%;">
             &nbsp;&nbsp;&nbsp; 你是否曾经见过其它网站上有一些可以活动的图片，它们就是动态GIF图片，制作这种图片并不很难，却能为网页增色不少。动态GIF图片小到可以是一个图标，大到可以是一个不断变换文字的广告横幅，如下例： 
           </div> 
           <div style="line-height:200%;"> 
           </div> 
           <div style="line-height:200%;">
             &nbsp;&nbsp;&nbsp;&nbsp; 有许多软件可以帮助你来制作动态GIF图片，比较有名的如适用于Windows系统的GIF Construction Set和适用于Mac系统的GifBuilder等，而且这些软件都是免费的。接下来 我们就来看一看在使用GIF动画制作软件时应注意的问题，并告诉你如何自己制作动态图片。 
           </div> 
          </div></td> 
        </tr> 
       </tbody> 
      </table> 
     </div>  
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <div> 
          <div style="line-height:200%;"> 
           <b><font>第二节：开始制作</font></b> 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 当你制作动态GIF图片时，你不能仅考虑自己看到的情况，因为也许你制作出来的图片在你自己的计算机上可以非常平滑快速地显示出来，但在其它计算机上也许就会出现不同的效果。其它人的计算机可能处理速度较慢，或者他们的调制解调器速度较慢，这些都会影响到图片的显示效果。那么你该怎么办呢？你怎么才能知道别人的计算机是否能够正确显示你制作的图片呢？不过，在目前的状况下，我想你还不必过多考虑这些问题，暂时还是先观注如何学习制作动态GIF图片吧。 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 在开始之前，我们先来看一个图片，这是一幅网狐工作人员泰勒拿捶子砸自己脑袋的动画图片。当然如果真能让泰勒给自己脑袋狠狠地砸一下当然最好，但这恐怕很难做到。制作动态GIF图片时的第一个步骤是你可以通过自己绘制或拿现成的图片做为动画材料，如下例： 
          </div> 
          <div style="line-height:200%;"> 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 第二步，你要将几幅单独的图片连接在一起，具体如何实施请看下一节。 
          </div> 
         </div></td> 
       </tr> 
      </tbody> 
     </table>   
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <div> 
          <div style="line-height:200%;"> 
           <b><font>第三节：连接图片</font></b> 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 要知道动态图片实际上就是几幅静止的图片被放在一起，并连续快速地播放，就象在电影和电视中的方式一样，由于图片的播放速度非常快，你根本看不出来它们是独立的一幅幅图片，而在你眼前显示出的效果就象真动了起来似的。 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 要制作让泰勒砸自己脑袋的动态图片非常简单，只需两幅图片即可。当制作好两幅图片后，我们可以将这两幅GIF图片拖至编辑动画图片的软件中，并设置两幅图片之间转换的速度，这样就可以制作出最终的动态图片了。 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 也许你会问在两幅图片之间转换的时间需要多长呢？这并没有什么硬性规定，针对不同的动画，转换的间隔要求也不同，你需要通过多次测试来寻找到最合适的间隔。另外你需要注意一点，即在网络中浏览者观看你制作的动画图片与你在自己的计算机上观看的效果可能有差别，一般他们的动画速度略慢。 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 我们要把动画图片设置为循环模式，也就是说这个动画会一直持续播放。而且如果你的动画只包含两幅图片，那么你最好将动画设置为循环模式，如果你没有这样做，当访问者来到你的网页时，可能就无法看到动画的全部过程了。 
          </div> 
         </div></td> 
       </tr> 
      </tbody> 
     </table>   
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <div> 
          <div style="line-height:200%;"> 
           <b><font>第四节：一些提议</font></b> 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 当你制作动态图片时应该注意一点，即注意动画的变化，如果你知道动作的变化部位局限于一点，但这种变化会很大很明显，那么你就可以将最终的图片尽量缩小，这样其他人在浏览网页时图片的下载速度就可以加快。 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 第一幅图片一般情况下都会较大，因为它会控制图片的大小和背景颜色，而第二幅图片则可以较小，只要把第一幅图片需要产生动作变化的位置进行改变即可，这样只需很小的变化，就可以实现很多位置的明显动作，如下例 
          </div> 
          <div style="line-height:200%;">
            （另外，如果你希望重新欣赏该动画，可以点击浏览器顶端菜单的"Refresh"或"Reload"--即刷新--按钮）： 
          </div> 
          <div style="line-height:200%;"> 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 看到了吗？在这里背景的图片基本不变，只是前景不断出现新的图案。 
          </div> 
         </div></td> 
       </tr> 
      </tbody> 
     </table>   
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <div> 
          <div style="line-height:200%;"> 
           <b><font>第五节：循环</font></b> 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 你可以设置动画图片的循环次数，但有时如果你在动画编辑软件中设置循环播放的次数，也许在某些浏览器中将无法支持这一功能，导致动画图片只播放一次便告停止，因此为了防止这种情况的发生，你最好将一幅你认为最重要的图片放置在循环过程的起始和结尾两个位置，这样当动画停止后，该幅图片总会显示在网页中。 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 许多制作动态GIF图片的软件都为你提供了循环的选项，不过其实对于一般图片来说，你并不一定非要总将其设置为始终持续循环，因为这有可能会让浏览者反感。 
          </div> 
          <div style="line-height:200%;"> 
          </div> 
         </div></td> 
       </tr> 
      </tbody> 
     </table>   
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <div> 
          <div style="line-height:200%;"> 
           <b><font>第六节：创建自己的动态GIF图片</font></b> 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 好了，经过上面的介绍和一些提醒，你应该可以创建自己的动态GIF图片了。你首先需要选择一个制作动态GIF图片的软件，我们在前面曾经提到的两款免费制作软件你还记得吗？那就是用于Windows系统下的GIF Construction Set软件和用于Macintosh系统的GifBuilder软件。 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 这类制作动态GIF图片的软件都有一个共同点，将你的几幅图片一一放入程序中，并将其保存为一个GIF格式的图片，这样当你使用浏览器浏览这些图片时就会发现他们已经动起来了。 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 当你创建好所需的图片材料后，打开动画图片编辑软件，例如你使用GIF Construction Set这个软件，具体的操作步骤为： 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 打开程序，从"File"（文件）菜单中选择"Animation Wizard"（动画制作向导），选择你是否希望让你的动画循环播放或只播放一次，从硬盘中选择你希望处理的图片，选择好后将所有文件保存为一个GIF文件。 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 好了，这样你就制作出一个动态GIF图片了，你可以在浏览器中试着打开它看一看有什么效果。 
          </div> 
          <div style="line-height:200%;">
            而如果你使用的是GifBuilder软件，你需要执行下列步骤： 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 打开软件，从"File"菜单中选择"Open"（打开），然后打开你希望处理的所有图片，将它们保存为一个GIF文件，方法是点击"File"菜单下的"Save"（保存）按钮，并为这个文件起名（别忘记给文件加.gif的扩展名）。 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 另外你还可以在这套软件中对动画文件的循环播放，延迟时间，颜色等进行设置。 
          </div> 
          <div style="line-height:200%;">
            &nbsp;&nbsp;&nbsp; 通过上面的练习，接下来你还可以制作更多的动画图片，试着采取不同的设置方式，从中你不但会学到重要的知识，也可以享受到无限的快乐。 
          </div> 
         </div></td> 
       </tr> 
      </tbody> 
     </table>  
    </div></td> 
  </tr> 
 </tbody> 
</table>

转载于:https://blog.51cto.com/100114/13337