求全吧 关注:51贴子:12,068

网页制作中的图像编辑技巧

只看楼主收藏回复

网页制作中的图像编辑技巧 
 
 
 
加入图像(或图片)可以使网页变得引人入胜,常用的网页编辑件如FrontPage和Dreamweaver对图像的处理功能强大。下面以问题式同时解释图像编辑的技巧。 
1、哪些格式的图像可以被放在网页中? 
图像可以为下列的文件格式:GIF、JPEG、BMP、TIFF、TGA、RAS、EPS、PCX、PNG、PCD 和WMF。 
保存网页时,FrontPage 会提示将图像保存到您的站点中。若像不是GIF或JPEG格式,使用256色或更少颜色的图像会自动地转换成GIF,而所有其他的图像会转换成JPEG格式。插入图像时Dreamweaver会提示将图像保存到您的站点中。 
2、利用FrontPage将图像转换成GIF、JPEG或PNG格式GIF、JPEG是网页常用的图像格式,利用FrontPage您可以将图像转换成GIF、JPEG或PNG格式。 
在网页视图模式下,在图像上单击鼠标右键,然后单击快捷菜单上的“图像属性”。然后在“常规”选项卡中,进行下列之一的操作: 
(l)将图像转换成GIF格式,可单击“GIF”。若您想要在下载图像同时图像所显示的细节逐渐增加,可选择“交错”。注意:您不能在该对话框设透明颜色,但是如果您不想让图像具有透明色,则可以清除“透明”复选框。 
(2)将图像转换成JPEG格式,可单击“JPEG”。您也可以通过在“质量”框中输入从1到100的值来指定JPEG图像的质量。该数值越大,文件的压缩率就越小,文件就越大。在“渐进式变化”框中,您可以指定Web浏览器在下载它时解析图像的变化次数。注意:某些Web浏览器不支持渐进式变化。  
(3)将图像转换成PNG格式,可单击 “PNG”。 
3、哪些格式的图像可以设置成透明颜色? 
透明色实际上是使图像上某一种颜色消失,这样,就能透过图像看到网页的背景,由于JPEG格式的图像的颜色比较丰富而且众多的颜色交织在一起,如果一种颜色透明的话,JPEG格式的图像会出现许多小空,因此FrontPage和Dreamweaver只对GIF图像设置透明色。 
4、怎么样,才能为图像添加指定颜色的边框? 
对于没有边框的图像而言,直接插入到网页中,在显示效果上是相当差的。 
在FrontPage中,可以将边框添加到图像、动态GIF、剪贴画或视频上。若您为图形设置默认超链接,FrontPage会自动在图形上放入边框。您可以设置边框的宽度,或若您不想要边框的话,您可以删除它。边框默认为黑色。然而,若图形有个默认的超链接,边框将是您为超链接指定的颜色,这些颜色是在“网页属性”对话框中设置的。 
(1)在网页视图模式下,在图形上单击鼠标右键,单击快捷菜单上的“图像属性”; 
(2)然后单击“样式”按钮,再单击“格式”按钮,选择“边框”命令; 
(3)在弹出的对话框中可以设置颜色和宽度; 
(4)在“边框粗细”框中,以像素为单位输入数值来给出边框的宽度。要删除边框,可键入0。 
在Dreamweaver中,可以通过“Border”属性直接设置边框的宽度。宽度设好了,你一定会问,颜色呢?面板上并没有提供颜色的选择呀!呵呵,其实这里有一个技巧问题,用鼠标选择图像对像,注意不是点击选中,而是拖动选择。像设定文字颜色一样进行就可以了。另外,DM要使图像和表格接触的地方不留空隙,仅在表格属性面板上把外框线(border)设为0是不行的,还需要在表格的属性面板上把单元格的两个属性设为0(即cellspacing=“0”和cellpadding=“0”)。 
 



1楼2005-12-19 20:21回复
    5、怎样使图像可以任意移动? 
    在FrontPage中,使用绝对定位可以实现图像位置的任意移动。图像的位置相对于其窗口容器的左上角定位,如网页或一个位置框。(1)如果“定位”工具栏没有出现,请指向“查看”菜单上的“工具栏”,然后单击“定位”。(2)在网页视图模式下,插入网页元素或键入您要定位的文本(在网页上的位置并不重要)。(3)选择网页元素,然后单击“定位”工具栏上的“绝对定位”。(4)执行以下操作之一以指定元素位置:移动元素 鼠标指向边框直到光标更改为四向箭头,单击,然后拖曳元素到新的位置。设置像素座标 在“定位”工具栏上的“左边”(x 轴座标)和“顶边”(y 轴座标)框中各指定一个数值。提示:若要指定Z————顺序,也就是该元素在网页图层中的位置,则可在“定位”工具栏上的“Z—顺序”框内指定一个数值。正值就表示该元素是在主要文本层之前(0 层),而负值则表示该元素在它之后。 
    注意:1、当定位元素时,请关闭“显示标记符”(单击“查看”菜单中的“显示标记”可删除选中标记)和“全部显示”(单击“全部显示”,如果它已被选中)。标记符和非打印字符并不是布局的一部分,但在编辑时会显在屏幕上,它们更改了在FrontPage中显示的布局。关闭这些功能后,您的网页布局就会和实际在站点浏览器上的显示更接近,请经常切换FrontPage中的“普通”和“预览”选项卡来查看。  
    2、当以不同的屏幕分辨率查看时会改变网页布局,即使一个绝对定位的元素也总是出现在您指定的座标处。为了向所有站点访问者正确地显示网页,您必须分别在不同的屏幕分辨率下测试它。  
    3、绝对定位时不要使用DHTML效果,因为可能会出现不可预料的结果。 
    在Dreamweaver中,可以使用图层精确的定位网页中的图像,图层用起来就更加随意了,你可以根据需要任意的拖拽它。 
    6、怎样计算全部图像的大小? 
    站点总览报表以KB为单位来显示您站点中所有图像(GIF、JPEG、BMP等) 字节的大小。  
    (1)在“查看”菜单中,指向“报表”,然后单击“站点总览”。  
    (2)在“图像”行的“大小”列中,列出了您站点中全部图像的大小。 
    如果您的站点中包含了位于隐藏文件夹中的图像文件,那么那些图像文件的数目将不会被包含在此报表中。若要在报告中包含隐藏文件夹中的图像数目,在“工具”菜单中单击“站点设置”,单击“高级”选项卡,然后选择“显示隐藏目录中的文档”复选框。  
    以上针对FrontPage有效。 
    7、怎样把图形放在最中间? 
    FrontPage 中,在网页视图模式下,在图形上单击鼠标右键,单击快捷菜单上的“图像属性”,然后单击“外观”选项卡,在“对齐方式”中选择对齐属性。 
    在Dreamweaver中,用鼠标点击选取图形,然后在图形的属性面板的右上角Align(对齐属性)边上有个下拉框,在下拉框中选取,则文字在图像四周绕排。若是单独图像在中间,则在图像面板上点取居中属性即可。


    2楼2005-12-19 20:22
    回复
      2025-05-15 14:22:25
      广告
      一个简单的菜单/列表改变图片 

       
      images/01.gif是初始图片地址~~把以下代码加到页面即可。
      <img id=idface src="images/01.gif" alt=个人形象代表 width="20" height="20"> <select name="face" size=1 onChange="document.images['idface'].src=options[selectedIndex].value;" >
       <option selected value="images/01.gif">用户头像-01
       <option selected value="images/02.gif">用户头像-02
       <option selected value="images/03.gif">用户头像-03
       <option selected value="images/04.gif">用户头像-04
       <option selected value="images/05.gif">用户头像-05
       <option selected value="images/06.gif">用户头像-06
       <option selected value="images/07.gif">用户头像-07
       <option selected value="images/08.gif">用户头像-08
       <option selected value="images/09.gif">用户头像-09
       <option selected value="images/10.gif">用户头像-10
       <option selected value="images/11.gif">用户头像-11
       <option selected value="images/12.gif">用户头像-12
       <option selected value="images/13.gif">用户头像-13
       <option selected value="images/14.gif">用户头像-14
       <option selected value="images/15.gif">用户头像-15
       <option selected value="images/16.gif">用户头像-16
       <option selected value="images/17.gif">用户头像-17
       <option selected value="images/18.gif">用户头像-18
       <option selected value="images/19.gif">用户头像-19
       <option selected value="images/20.gif">用户头像-20
       </select> 


      3楼2005-12-19 20:42
      回复
        最简单的表单验证代码 
         
         
         
        以下代码加到任意部位即可。
        <SCRIPT language=JavaScript>

        function checkform(){

        if(form1.name.value==''){
        alert("您没有填写 昵称!");
        form1.name.focus();
        return false;
        }

        return true;
        }
        </SCRIPT>
        <form name="form1" method="post" action="" onSubmit="return checkform();">
         <input name="name" type="text" id="name">
         <input type="submit" name="Submit" value="提交">
        </form>


        4楼2005-12-19 20:43
        回复
          需要时就找你啦~~~~~~~~~


          5楼2005-12-22 12:13
          回复
            1


            6楼2005-12-22 13:05
            回复
              2


              7楼2005-12-22 13:05
              回复
                3


                8楼2005-12-22 13:06
                回复
                  2025-05-15 14:16:25
                  广告
                  4


                  9楼2005-12-22 13:06
                  回复
                    5


                    10楼2005-12-22 13:07
                    回复
                      6


                      11楼2005-12-22 13:08
                      回复
                        7


                        12楼2005-12-22 13:08
                        回复
                          8


                          13楼2005-12-22 13:09
                          回复
                            9


                            14楼2005-12-22 13:09
                            回复
                              2025-05-15 14:10:25
                              广告
                              10


                              15楼2005-12-22 13:10
                              回复